/* Extracted 1:1 from php/src/index.php - page-specific styles. */
    /* =========================================================================
       Portfolio-Startseite - eigener Namensraum "pf-" (kollidiert nicht mit
       .gi- (alte Startseite), .p- (Produktseiten) oder .h-/.l- (Hilfe/Recht)).
       Farben ausschliesslich ueber die Variablen aus theme.css - keine
       einzige feste Farbe hier, damit Hell/Dunkel beide tragen.
       ========================================================================= */
    body { display: block; } /* site.css setzt body auf flex/column - fuer dieses Layout nicht gewuenscht */

    .pf-shell {
      max-width: 1040px;
      margin: 0 auto;
      padding: 96px 24px 80px;
      display: flex;
      align-items: flex-start;
      gap: 40px;
    }

    /* ---- Linke Spalte: Profilkarte ---- */
    .pf-side {
      flex: 0 0 268px;
      position: sticky;
      top: 96px;
      background: rgba(var(--panel-rgb), .55);
      border: 1px solid rgba(var(--accent-2-rgb), .22);
      border-radius: 18px;
      padding: 28px 24px 26px;
      text-align: center;
    }
    .pf-avatar {
      width: 128px; height: 128px; border-radius: 50%;
      object-fit: cover; margin: 0 auto 18px;
      border: 2px solid rgba(var(--accent-rgb), .5);
      box-shadow: 0 8px 30px rgba(var(--shadow-rgb), .35);
    }
    .pf-intro { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700;
                letter-spacing:.06em; color:var(--accent); opacity:.85; margin:0 0 6px; }
    .pf-name { font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:22px;
               color:var(--head); margin:0 0 6px; }
    .pf-role { font-size:14px; font-weight:300; line-height:1.5; color:rgba(var(--text-rgb), .78); margin:0 0 14px; }
    .pf-loc  { display:flex; align-items:center; justify-content:center; gap:6px;
               font-size:12.5px; color:var(--muted); margin:0 0 20px; }
    .pf-loc svg { width:13px; height:13px; flex:0 0 auto; }

    .pf-links { display:flex; flex-direction:column; gap:8px; margin:0 0 20px; }
    .pf-link { display:flex; align-items:center; justify-content:center; gap:8px;
               font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:400;
               text-decoration:none; color:rgba(var(--text-rgb), .82);
               border:1px solid rgba(var(--accent-2-rgb), .25); border-radius:10px;
               padding:9px 12px; transition:border-color .2s, color .2s; }
    .pf-link:hover { border-color:var(--accent); color:var(--accent); }
    .pf-link svg { width:15px; height:15px; flex:0 0 auto; }

    .pf-cta { display:flex; align-items:center; justify-content:center; gap:8px;
              font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13.5px;
              letter-spacing:.02em; text-decoration:none; color:var(--on-accent);
              background:linear-gradient(90deg,var(--accent),var(--accent-2));
              padding:12px 18px; border-radius:11px;
              box-shadow:0 8px 24px rgba(var(--accent-rgb), .28);
              transition:transform .2s, box-shadow .2s; }
    .pf-cta:hover { transform:translateY(-2px); box-shadow:0 12px 34px rgba(var(--accent-2-rgb), .42); }

    /* ---- Rechte Spalte: Reiter + Inhalt ---- */
    .pf-main { flex: 1 1 auto; min-width: 0; }

    /* Bewusst versteckt, nicht entfernt: die Umschalt-Logik (JS weiter unten,
       Klick auf .pf-tab) bleibt komplett unangetastet und funktioniert
       unveraendert - die Auswahl kommt jetzt nur aus dem Hamburger-Menue
       (siehe pf_switchers($sections) weiter unten), das programmatisch auf
       genau diese Knoepfe klickt statt eine eigene Logik zu duplizieren. */
    .pf-tabs { display:none; }
    .pf-tab {
      font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:700;
      letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
      color:rgba(var(--text-rgb), .68); background:rgba(var(--panel-rgb), .5);
      border:1px solid rgba(var(--accent-2-rgb), .22); border-radius:999px;
      padding:9px 16px; transition:border-color .2s, color .2s, background .2s;
    }
    .pf-tab:hover { color:var(--text); border-color:rgba(var(--accent-rgb), .45); }
    .pf-tab[aria-selected="true"] {
      color:var(--on-accent); border-color:transparent;
      background:linear-gradient(90deg,var(--accent),var(--accent-2));
    }

    .pf-panel { display:none; }
    .pf-panel.is-active { display:block; animation: pf-fade .35s ease; }
    @keyframes pf-fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

    .pf-lead p { font-size:16px; font-weight:300; line-height:1.72; color:rgba(var(--text-rgb), .84); margin:0 0 16px; }
    .pf-lead p:last-child { margin-bottom:0; }
    .pf-news { margin-top:32px; padding-top:24px; border-top:1px solid rgba(var(--accent-2-rgb), .2); }
    .pf-news-h2 { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
      color:rgba(var(--text-rgb), .5); margin:0 0 14px; }
    .pf-news-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
      background:rgba(var(--panel-rgb), .5); border:1px solid rgba(var(--accent-2-rgb), .2);
      border-radius:10px; padding:11px 16px; margin-bottom:8px; }
    .pf-news-date { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); flex:0 0 auto; }
    .pf-news-text { font-size:14px; color:var(--text); flex:1 1 200px; min-width:0; }
    .pf-news-btn { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--accent);
      text-decoration:none; border:1px solid rgba(var(--accent-rgb), .4); border-radius:8px;
      padding:5px 12px; flex:0 0 auto; }
    .pf-news-btn:hover { background:rgba(var(--accent-rgb), .1); }

    /* Erfahrung als aufklappbare Karten - natives <details>, kein JS noetig */
    .pf-exp { display:flex; flex-direction:column; gap:12px; }
    .pf-card { background:rgba(var(--panel-rgb), .5); border:1px solid rgba(var(--accent-2-rgb), .2);
               border-radius:14px; padding:4px 20px; }
    .pf-card summary { list-style:none; cursor:pointer; padding:16px 0; display:flex;
                        align-items:baseline; justify-content:space-between; gap:14px; }
    .pf-card summary::-webkit-details-marker { display:none; }
    .pf-card-head { display:flex; flex-direction:column; gap:3px; }
    .pf-card-role { font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:15.5px; color:var(--head); }
    .pf-card-org { font-size:13px; font-weight:300; color:rgba(var(--text-rgb), .62); }
    .pf-card-time { flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-size:11.5px;
                     font-weight:700; color:var(--accent); opacity:.85; white-space:nowrap; }
    .pf-card-body { padding:0 0 18px; }
    .pf-card-loc { font-size:12px; color:var(--muted); margin:0 0 8px; }
    .pf-card-text { font-size:14.5px; font-weight:300; line-height:1.6; color:rgba(var(--text-rgb), .78); margin:0; }
    .pf-card-text p { margin:0 0 10px; }
    .pf-card-text p:last-child { margin-bottom:0; }
    .pf-card-text strong { color:var(--accent); font-weight:600; }
    .pf-card-text ul { margin:0 0 10px; padding-left:20px; }
    .pf-card-text ul:last-child { margin-bottom:0; }
    .pf-card[open] summary { padding-bottom:10px; }
    .pf-card summary .pf-caret { font-size:11px; color:var(--muted); transition:transform .2s; }
    .pf-card[open] summary .pf-caret { transform:rotate(180deg); }

    /* Tech-Stack als Chip-Reihe */
    .pf-stack { display:flex; flex-wrap:wrap; gap:10px; }
    .pf-chip { font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700;
               color:var(--text); background:rgba(var(--panel-rgb), .5);
               border:1px solid rgba(var(--accent-2-rgb), .25); border-radius:9px;
               padding:9px 14px; }

    /* Artikel-Platzhalter */
    .pf-soon { border:1px dashed rgba(var(--accent-2-rgb), .4); border-radius:14px;
               padding:22px 20px; }
    .pf-soon-t { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px;
                 letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin:0 0 8px; }
    .pf-soon-d { font-size:14.5px; font-weight:300; line-height:1.6; color:rgba(var(--text-rgb), .7); margin:0; }

    /* Echte Artikelliste, sobald welche veroeffentlicht sind */
    .pf-art-search-bar { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
    .pf-art-search { flex:1 1 200px; font-family:inherit; font-size:13px; color:var(--text);
      background:rgba(var(--panel-rgb), .5); border:1px solid rgba(var(--accent-2-rgb), .3);
      border-radius:9px; padding:9px 14px; }
    .pf-art-search:focus { outline:none; border-color:var(--accent); }
    .pf-art-search-btn { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent);
      background:none; border:1px solid rgba(var(--accent-rgb), .4); border-radius:9px; padding:8px 16px; cursor:pointer; }
    .pf-art-search-btn:hover { background:rgba(var(--accent-rgb), .1); }
    .pf-art-search-clear { font-size:12px; color:rgba(var(--text-rgb), .55); text-decoration:none; }
    .pf-art-search-clear:hover { color:var(--accent); }
    .pf-art-search-heading { font-size:13px; color:rgba(var(--text-rgb), .6); margin:0 0 12px; }
    .pf-art-empty { color:rgba(var(--text-rgb), .6); font-size:14px; padding:20px 0; }
    .pf-articles { display:flex; flex-direction:column; gap:10px; }
    .pf-article-row { display:flex; flex-direction:column; align-items:flex-start; gap:5px;
      text-decoration:none; background:rgba(var(--panel-rgb), .5); border:1px solid rgba(var(--accent-2-rgb), .2);
      border-radius:12px; padding:14px 18px; transition:border-color .2s, transform .2s; }
    .pf-article-row:hover { border-color:rgba(var(--accent-rgb), .5); transform:translateY(-2px); }
    .pf-article-t { font-size:15px; color:var(--head); display:flex; align-items:center; gap:9px; }
    .pf-article-t .flag { width:20px; height:14px; border-radius:2px; box-shadow:0 0 0 1px rgba(var(--shadow-rgb), .35) inset; flex:0 0 auto; display:block; }
    .pf-article-d { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted); }

    /* ---- Mobil: Spalten stapeln, Profilkarte nicht mehr sticky ---- */
    @media (max-width:820px) {
      .pf-shell { flex-direction:column; padding-top:84px; }
      .pf-side { position:static; width:100%; flex:1 1 auto; }
    }
    @media (max-width:480px) {
      .pf-tabs { gap:6px; }
      .pf-tab { padding:8px 12px; font-size:11px; }
    }