/* ============================================================
   mobile.css  —  „Altes Android"-Mobile-Look
   Aktiv ab Viewport-Breite ≤ 600px. Versteckt die Win95-Oberfläche
   und zeigt stattdessen einen Gingerbread-/Froyo-artigen UI-Stack.
   ============================================================ */

#phone-ui { display:none; }

@media (max-width: 600px) {
  /* Hide Win95 stuff entirely */
  #desktop, #taskbar, #smenu, #tweaks-panel,
  #lb, #lb-backdrop,
  #console-backdrop { display:none !important; }

  body {
    background:#000;
    margin:0; padding:0;
    font-family: 'Droid Sans', 'Roboto', system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
  }

  #phone-ui {
    display:flex; flex-direction:column;
    position:fixed; inset:0;
    background:
      radial-gradient(120% 80% at 50% 0%, #0a2e1a 0%, #000 60%),
      #000;
    color:#fff;
    user-select:none;
    overflow:hidden;
  }

  /* ─── STATUS BAR ─── */
  .ph-statusbar {
    flex-shrink:0; height:22px;
    background:#000;
    color:#fff;
    display:flex; align-items:center;
    padding: 0 8px;
    font-size:11px;
    font-family:'Droid Sans', system-ui, sans-serif;
    letter-spacing:.2px;
    border-bottom:1px solid #1a1a1a;
    gap:6px;
  }
  .ph-sig { display:inline-flex; gap:1px; align-items:flex-end; height:10px; }
  .ph-sig i { display:block; width:2px; background:#fff; }
  .ph-sig i:nth-child(1){height:3px}
  .ph-sig i:nth-child(2){height:5px}
  .ph-sig i:nth-child(3){height:7px}
  .ph-sig i:nth-child(4){height:9px}
  .ph-sig i.off { background:#444; }
  .ph-carrier { font-weight:bold; font-size:10px; color:#aae66d; }
  .ph-sb-spacer { flex:1; }
  .ph-sb-clock {
    font-family:'Droid Sans Mono','Roboto Mono',monospace;
    font-size:11px; font-weight:bold;
  }
  .ph-batt {
    display:inline-flex; align-items:center;
    border:1px solid #fff; width:18px; height:9px;
    padding:1px; position:relative; margin-left:4px;
  }
  .ph-batt::after {
    content:""; position:absolute; right:-3px; top:2px;
    width:2px; height:5px; background:#fff;
  }
  .ph-batt i { display:block; height:100%; width:75%; background:#aae66d; }

  /* ─── SCREEN ─── */
  .ph-screen {
    flex:1; min-height:0; position:relative;
    overflow:hidden;
  }
  .ph-view {
    position:absolute; inset:0;
    display:none; flex-direction:column;
    overflow:hidden;
  }
  .ph-view.active { display:flex; }

  /* ─── HOME SCREEN ─── */
  .ph-home {
    padding: 14px 14px 0 14px;
    overflow-y:auto;
  }
  .ph-clock-widget {
    margin: 18px 0 28px 0;
    text-align:center;
    color:#fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
  }
  .ph-clock-widget .ph-time-big {
    font-size:64px; font-weight:200;
    font-family:'Droid Sans','Roboto',system-ui,sans-serif;
    line-height:1; letter-spacing:-2px;
  }
  .ph-clock-widget .ph-date-big {
    font-size:13px; color:#bbb;
    margin-top:6px; text-transform:uppercase; letter-spacing:1.5px;
  }
  .ph-clock-widget .ph-greet {
    margin-top: 14px; font-size:12px; color:#aae66d;
    font-style:italic;
  }
  .ph-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 16px 8px;
    margin-top:18px;
    padding-bottom: 14px;
  }
  .ph-icon {
    background:none; border:0; padding:0; margin:0;
    color:#fff; cursor:pointer;
    display:flex; flex-direction:column; align-items:center;
    gap:6px;
    font-family:inherit;
  }
  .ph-icon:active .ph-icon-tile { transform:scale(.92); filter:brightness(1.3); }
  .ph-icon-tile {
    width:54px; height:54px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:#1f1f1f;
    border:1px solid rgba(255,255,255,.08);
    box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform .08s, filter .08s;
  }
  .ph-icon-tile.t-projects { background: linear-gradient(180deg, #f0c850, #c89020); }
  .ph-icon-tile.t-about    { background: linear-gradient(180deg, #5a8fd6, #2a5fa0); }
  .ph-icon-tile.t-showreel { background: linear-gradient(180deg, #2a2a2a, #0a0a0a); }
  .ph-icon-tile.t-impressum{ background: linear-gradient(180deg, #f5f5f5, #cfcfcf); }
  .ph-icon-tile.t-recycle  { background: linear-gradient(180deg, #888, #555); }
  .ph-icon-tile.t-contact  { background: linear-gradient(180deg, #4caf7d, #1e6e42); }

  /* Contact form */
  .ph-contact-form { padding: 16px; display:flex; flex-direction:column; gap:12px; }
  .ph-contact-field { display:flex; flex-direction:column; gap:4px; }
  .ph-contact-field label { font-size:12px; color:#aaa; }
  .ph-contact-field input,
  .ph-contact-field textarea {
    background:#1a1a1a; color:#fff; border:1px solid #333;
    border-radius:4px; padding:10px; font-family:inherit; font-size:14px;
    width:100%; box-sizing:border-box;
  }
  .ph-contact-field input:focus,
  .ph-contact-field textarea:focus { outline:none; border-color:#4caf7d; }
  .ph-contact-field textarea { resize:vertical; min-height:120px; }
  .ph-contact-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .ph-cf-status { font-size:12px; color:#aaa; flex:1; }
  .ph-cf-toast {
    position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(12px);
    background:#c0392b; color:#fff; padding:10px 18px; border-radius:6px;
    font-size:13px; opacity:0; pointer-events:none;
    transition: opacity .2s, transform .2s;
    white-space:nowrap; z-index:9999;
  }
  .ph-cf-toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }
  .ph-icon-label {
    font-size:10px; color:#fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    text-align:center;
    max-width: 70px; line-height:1.2;
    overflow:hidden;
  }

  /* Dock (bottom row of frequent apps) */
  .ph-dock {
    margin: auto -14px 0 -14px;
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.85));
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 10px 14px;
    display:flex; justify-content:space-around; align-items:center;
    backdrop-filter: blur(2px);
  }

  /* ─── APP VIEW (generic) ─── */
  .ph-app { background:#0a0a0a; }
  .ph-titlebar {
    flex-shrink:0;
    height:42px;
    display:flex; align-items:center; gap:6px;
    padding: 0 8px 0 0;
    background:
      linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 6px rgba(0,0,0,.4);
    color:#fff;
  }
  .ph-back-btn {
    background:none; border:0; color:#fff;
    height:42px; min-width:42px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:22px; line-height:1;
    border-right:1px solid #000;
    box-shadow: 1px 0 0 rgba(255,255,255,.05);
  }
  .ph-back-btn:active { background:rgba(255,255,255,.1); }
  .ph-title {
    font-size:15px; font-weight:bold;
    text-shadow: 0 -1px 0 rgba(0,0,0,.6);
    flex:1;
  }
  .ph-title small { font-weight:normal; color:#aaa; font-size:11px; margin-left:6px; }

  .ph-content {
    flex:1; overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    background:#0e0e0e;
    color:#ddd;
    font-size:14px; line-height:1.55;
  }
  .ph-content .ph-pad { padding: 14px; }

  /* Markdown rendering inside app screens */
  .ph-md h1 {
    font-size:20px; color:#fff; margin: 4px 0 6px 0;
    font-weight: 300; letter-spacing:.3px;
  }
  .ph-md h2 {
    font-size:14px; color:#aae66d;
    margin: 18px 0 6px 0; padding-bottom:4px;
    text-transform:uppercase; letter-spacing:1px;
    border-bottom:1px solid #2a2a2a;
  }
  .ph-md h3 {
    font-size:13px; color:#fff; font-weight:bold;
    margin: 14px 0 4px 0;
  }
  .ph-md .md-sub {
    font-size:12px; color:#888;
    border-bottom:1px solid #2a2a2a;
    padding-bottom:10px; margin-bottom:14px;
  }
  .ph-md p {
    margin: 0 0 10px 0; color:#ccc;
    text-align: justify;
  }
  .ph-md ul { margin: 0 0 10px 18px; padding:0; }
  .ph-md li { margin-bottom: 3px; color:#ccc; }
  .ph-md a { color:#aae66d; }
  .ph-md .legal-addr {
    background:#1a1a1a; border:1px solid #2a2a2a;
    padding: 10px 12px; margin: 8px 0 14px 0;
    color:#fff; font-size:13px; line-height:1.5;
  }
  .ph-md .md-footnote {
    font-size:11px; color:#777; font-style:italic;
    margin-top: 16px;
  }

  /* Tabs (Impressum) */
  .ph-tabs {
    display:flex; background:#1a1a1a;
    border-bottom: 1px solid #2a2a2a;
  }
  .ph-tab {
    flex:1; background:none; border:0; color:#888;
    padding: 10px 0; font-size:12px;
    font-family:inherit; cursor:pointer;
    text-transform:uppercase; letter-spacing:1px;
    border-bottom: 2px solid transparent;
  }
  .ph-tab.active { color:#aae66d; border-bottom-color:#aae66d; }

  /* Showreel */
  .ph-reel-title { font-size:17px; padding: 12px 14px 4px; color:#fff; }
  .ph-reel-tag { font-size:10px; color:#aae66d; padding: 0 14px;
    text-transform:uppercase; letter-spacing:1.5px; }
  .ph-reel-frame {
    margin: 12px 0 0 0; background:#000;
    aspect-ratio: 16/9;
  }
  .ph-reel-frame iframe { width:100%; height:100%; border:0; display:block; }
  .ph-reel-controls {
    display:flex; gap:8px; padding: 14px;
  }
  .ph-btn {
    flex:1; display:inline-flex; align-items:center; justify-content:center;
    gap:6px;
    background: linear-gradient(180deg, #2a2a2a, #111);
    color:#fff; border:1px solid #000;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    padding: 10px 12px; font-size:13px;
    text-decoration:none;
    cursor:pointer;
    font-family:inherit;
    border-radius: 4px;
  }
  .ph-btn.primary {
    background: linear-gradient(180deg, #5fa028, #2a6010);
    border-color:#1a3a08;
    color:#fff; font-weight:bold;
  }
  .ph-btn:active { filter: brightness(0.85); }

  /* Projects list */
  .ph-list { padding: 0; }
  .ph-list-item {
    display:flex; align-items:center; gap:12px;
    padding: 12px 14px;
    border-bottom: 1px solid #1a1a1a;
    background:#0e0e0e;
    color:#fff; cursor:pointer;
  }
  .ph-list-item:active { background:#181818; }
  .ph-list-thumb {
    width:56px; height:42px; flex-shrink:0;
    background:#1a1a1a; background-size:cover; background-position:center;
    border:1px solid #2a2a2a;
  }
  .ph-list-text { flex:1; min-width:0; }
  .ph-list-title {
    font-size:14px; font-weight:bold; color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .ph-list-sub {
    font-size:11px; color:#888;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .ph-list-arrow { color:#555; font-size:18px; }

  /* Project detail */
  .ph-proj-hero {
    aspect-ratio: 16/10;
    background:#1a1a1a; background-size:cover; background-position:center;
    position:relative;
  }
  .ph-proj-hero::after {
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.85) 100%);
  }
  .ph-proj-meta {
    padding: 4px 14px 12px;
    background:#0e0e0e;
    border-bottom: 1px solid #1a1a1a;
  }
  .ph-proj-meta .ph-md-title { font-size:18px; margin:8px 0 2px; color:#fff;
    font-weight:300; }
  .ph-proj-meta .ph-md-venue { font-size:12px; color:#aae66d;
    text-transform:uppercase; letter-spacing:1px; }
  .ph-proj-meta .ph-md-premiere { font-size:11px; color:#888; margin-top:2px; }

  .ph-proj-section { padding: 14px; border-top: 1px solid #1a1a1a; }
  .ph-proj-section h3 {
    font-size:11px; color:#aae66d;
    text-transform:uppercase; letter-spacing:1.5px;
    margin: 0 0 8px 0;
  }
  .ph-pair {
    display:flex; padding: 5px 0;
    border-bottom: 1px dashed #1a1a1a;
    font-size:13px;
  }
  .ph-pair-k { color:#888; flex:0 0 100px; }
  .ph-pair-v { color:#fff; flex:1; }
  .ph-press blockquote {
    margin: 0 0 10px 0; padding: 8px 12px;
    background:#1a1a1a; border-left:3px solid #aae66d;
    font-style:italic; color:#ccc; font-size:13px;
  }
  .ph-press .ph-press-src {
    font-size:11px; color:#888; margin-top:-6px;
    padding-left:12px; margin-bottom:10px;
  }
  .ph-credit {
    font-size:11px; color:#888; margin-bottom:8px;
  }
  .ph-photo-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:4px;
    margin-top: 8px;
  }
  .ph-photo {
    aspect-ratio: 4/3; background:#1a1a1a;
    background-size:cover; background-position:center;
  }

  /* ─── SORT BAR ─── */
  .ph-sort-bar {
    display:flex; gap:0; overflow:hidden; flex-shrink:0;
    background:#111; border-bottom:1px solid #1a1a1a;
  }
  .ph-sort-btn {
    flex-shrink:0;
    background:none; border:0; border-right:1px solid #1a1a1a;
    color:#888; padding:8px 14px;
    font-size:11px; font-family:inherit;
    text-transform:uppercase; letter-spacing:.8px;
    cursor:pointer;
  }
  .ph-sort-btn.active { color:#aae66d; background:#0a0a0a; }
  .ph-sort-btn:active  { background:#1a1a1a; }

  .ph-filter-btn {
    flex-shrink:0; margin-left:auto;
    background:none; border:0; border-left:1px solid #1a1a1a;
    color:#888; padding:8px 14px;
    font-size:11px; font-family:inherit;
    text-transform:uppercase; letter-spacing:.8px;
    cursor:pointer;
  }
  .ph-filter-btn.active { color:#fff; background:#1a3a1a; }
  .ph-filter-btn:active  { background:#1a1a1a; }
  .ph-filter-btn + .ph-filter-btn { margin-left:0; border-left:1px solid #1a1a1a; }

  .ph-picker { display:flex; flex-direction:column; height:100%; background:#111; }
  .ph-picker-hd {
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; border-bottom:1px solid #1a1a1a;
    font-size:13px; font-weight:600; color:#ccc; flex-shrink:0;
  }
  .ph-picker-back {
    background:none; border:none; color:#aae66d;
    font-size:20px; line-height:1; cursor:pointer; padding:0 4px 0 0;
  }
  .ph-picker-list { flex:1; overflow-y:auto; }
  .ph-picker-item {
    padding:13px 16px; border-bottom:1px solid #1a1a1a;
    font-size:13px; color:#ccc; cursor:pointer;
  }
  .ph-picker-item:active { background:#1a1a1a; }
  .ph-picker-item.active { color:#aae66d; }
  .ph-picker-item.active::after { content:' ✓'; }
  .ph-picker-item:first-child { color:#666; font-style:italic; }

  /* ─── SEARCH ─── */
  .ph-search-inp {
    flex:1; background:rgba(255,255,255,.08);
    border:1px solid #333; border-radius:4px;
    color:#fff; font-size:14px; font-family:inherit;
    padding:6px 10px; outline:none;
    -webkit-appearance:none;
  }
  .ph-search-inp::placeholder { color:#555; }
  .ph-search-hint {
    padding:24px 14px; color:#666;
    font-size:13px; text-align:center;
  }

  /* ─── HAMBURGER DRAWER ─── */
  .ph-drawer-backdrop {
    position:absolute; inset:0; z-index:40;
    background:rgba(0,0,0,.55);
    display:none;
  }
  .ph-drawer-backdrop.open { display:block; }
  .ph-drawer {
    position:absolute; top:0; left:0; bottom:0;
    width:72%; max-width:260px; z-index:41;
    background:linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    border-right:1px solid #2a2a2a;
    display:flex; flex-direction:column;
    transform:translateX(-105%);
    transition:transform .22s ease;
  }
  .ph-drawer.open { transform:translateX(0); }
  .ph-drawer-hd {
    padding:22px 18px 14px;
    font-size:18px; font-weight:300; color:#fff;
    border-bottom:1px solid #2a2a2a;
    letter-spacing:.5px;
  }
  .ph-drawer-nav { display:flex; flex-direction:column; padding:8px 0; }
  .ph-drawer-item {
    background:none; border:0; border-bottom:1px solid #1a1a1a;
    color:#ccc; text-align:left; padding:14px 18px;
    font-size:15px; font-family:inherit; cursor:pointer;
    display:flex; align-items:center; gap:12px;
  }
  .ph-drawer-item:active { background:#2a2a2a; }
  .ph-drawer-icon { font-size:18px; width:24px; text-align:center; }

  /* ─── PHOTO LIGHTBOX ─── */
  .ph-lb {
    position:absolute; inset:0; z-index:50;
    background:#000;
    display:none; flex-direction:column;
    align-items:center; justify-content:center;
  }
  .ph-lb.open { display:flex; }
  .ph-lb-img-wrap {
    position:relative;
    width:100%; flex:1; min-height:0;
    display:flex; align-items:center; justify-content:center;
  }
  .ph-lb-img-wrap img {
    max-width:100%; max-height:100%;
    object-fit:contain; display:block;
    -webkit-user-drag:none;
  }
  .ph-lb-close {
    position:absolute; top:10px; right:12px; z-index:2;
    background:none; border:0; color:#fff; font-size:24px;
    cursor:pointer; padding:6px 10px; line-height:1;
  }
  .ph-lb-prev, .ph-lb-next {
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:2; background:rgba(0,0,0,.4); border:0;
    color:#fff; font-size:36px; cursor:pointer;
    padding:12px 8px; line-height:1;
  }
  .ph-lb-prev { left:0; }
  .ph-lb-next { right:0; }
  .ph-lb-counter {
    position:absolute; top:14px; left:50%;
    transform:translateX(-50%);
    font-size:12px; color:#666;
    pointer-events:none;
  }
  .ph-lb-credit-badge {
    position:absolute; bottom:8px; right:10px;
    background:rgba(0,0,0,.5); color:#aaa;
    font-size:14px; padding:4px 8px;
    cursor:pointer; border-radius:3px;
    user-select:none;
  }
  .ph-lb-credit-full {
    position:absolute; bottom:0; left:0; right:0;
    background:rgba(0,0,0,.75); color:#ccc;
    font-size:12px; padding:8px 14px;
    text-align:center;
    transform:translateY(100%);
    transition:transform .18s ease;
  }
  .ph-lb-credit-full.visible { transform:translateY(0); }

  /* ─── BOTTOM NAV KEYS ─── */
  .ph-navbar {
    flex-shrink:0; height:44px;
    background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
    border-top:1px solid #1a1a1a;
    display:flex; justify-content:space-around; align-items:center;
    padding: 0 6px;
  }
  .ph-key {
    background:none; border:0; color:#666; cursor:pointer;
    width:54px; height:36px;
    display:flex; align-items:center; justify-content:center;
    border-radius: 4px;
    transition: background .1s;
  }
  .ph-key:active { background:#1a1a1a; }
  .ph-key svg { display:block; }
  .ph-key.disabled { opacity:.3; cursor:default; }
}