/* NavyAmber-Designgrundlage — portiert aus dem Canvas-Entwurf am 18.09.2026. */
/* Schriften selbst gehostet, Pfade auf /neu/fonts/ korrigiert. */
@font-face{font-family:"Rubik";font-style:normal;font-weight:300;font-display:swap;src:url("/neu/fonts/rubik-latin-300.woff2") format("woff2")}
@font-face{font-family:"Rubik";font-style:normal;font-weight:400;font-display:swap;src:url("/neu/fonts/rubik-latin.woff2") format("woff2")}
@font-face{font-family:"Rubik";font-style:normal;font-weight:500;font-display:swap;src:url("/neu/fonts/rubik-latin-500.woff2") format("woff2")}
@font-face{font-family:"Rubik";font-style:italic;font-weight:400;font-display:swap;src:url("/neu/fonts/rubik-latin-italic.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/neu/fonts/ibm-plex-mono-latin.woff2") format("woff2")}
:root{
  /* --- Navy: the brand ground. Sampled from the reference screenshots. --- */
  --navy-990:#070B14;
  --navy-950:#0A0F1C;
  --navy-900:#0D1422;   /* page background */
  --navy-850:#101827;
  --navy-800:#131B2B;   /* cards, input fills */
  --navy-700:#1A2334;
  --navy-600:#232E42;
  --navy-line:#242F44;  /* hairline on dark */

  /* --- Amber: the single accent. --- */
  --amber-700:#C8941A;
  --amber-600:#E0AC28;
  --amber-500:#F6C445;  /* buttons, links, section labels */
  --amber-400:#F9D36E;
  --amber-300:#FBE09A;
  --amber-tint:rgba(246,196,69,.12);
  --amber-tint-strong:rgba(246,196,69,.22);

  /* --- Neutrals on navy --- */
  --white:#FFFFFF;
  --gray-200:#DFE2E7;
  --gray-300:#C3C8D1;
  --gray-400:#A2A9B5;   /* body copy on navy */
  --gray-500:#7B828F;
  --gray-600:#59606C;

  /* --- Light surfaces (CV / print / .pit-day scope) --- */
  --paper-000:#FFFFFF;
  --paper-100:#F5F6F8;
  --paper-200:#EAECF0;
  --paper-300:#D8DCE3;

  /* --- Semantic status --- */
  --green-500:#3FAE6E;
  --green-tint:rgba(63,174,110,.14);
  --red-500:#E0644F;
  --red-tint:rgba(224,100,79,.14);
  --blue-500:#5B9BD5;
  --blue-tint:rgba(91,155,213,.14);

  /* --- Semantic aliases: text --- */
  --text-strong:var(--white);
  --text-body:var(--gray-400);
  --text-muted:var(--gray-500);
  --text-faint:var(--gray-600);
  --text-inverse:var(--navy-900);
  --text-accent:var(--amber-500);
  --text-link:var(--amber-500);
  --text-link-hover:var(--white);

  /* --- Semantic aliases: surfaces --- */
  --surface-page:var(--navy-900);
  --surface-page-alt:var(--navy-950);
  --surface-card:var(--navy-800);
  --surface-raised:var(--navy-700);
  --surface-inset:var(--navy-850);
  --surface-field:var(--navy-800);
  --surface-accent:var(--amber-500);
  --surface-accent-soft:var(--amber-tint);
  --surface-footer:var(--navy-990);

  /* --- Lines, accents, states --- */
  --border-subtle:var(--navy-line);
  --border-strong:var(--gray-500);
  --border-accent:var(--amber-500);
  --accent:var(--amber-500);
  --accent-hover:var(--amber-400);
  --accent-press:var(--amber-600);
  --accent-soft:var(--amber-tint);
  --on-accent:var(--navy-900);
  --focus-ring:var(--amber-500);
  --overlay-scrim:rgba(10,15,28,.78);
  --watermark:rgba(255,255,255,.035);
  --status-success:var(--green-500);
  --status-danger:var(--red-500);
  --status-info:var(--blue-500);
}
/* Light scope — for CV pages, print and PDF exports. Same amber accent, dark ink. */
.pit-day{
  --text-strong:var(--navy-900);
  --text-body:#3C4453;
  --text-muted:#6B7382;
  --text-faint:#98A0AC;
  --text-inverse:var(--white);
  --text-accent:var(--amber-700);
  --text-link:var(--amber-700);
  --text-link-hover:var(--navy-900);
  --surface-page:var(--paper-100);
  --surface-page-alt:var(--paper-200);
  --surface-card:var(--paper-000);
  --surface-raised:var(--paper-000);
  --surface-inset:var(--paper-200);
  --surface-field:var(--paper-000);
  --border-subtle:var(--paper-300);
  --border-strong:var(--navy-900);
  --accent:var(--amber-500);
  --accent-hover:var(--amber-600);
  --on-accent:var(--navy-900);
  --watermark:rgba(13,20,34,.05);
  --overlay-scrim:rgba(10,15,28,.6);
}
:root{
  /* One family for everything, as in the reference. Mono only for code.
     Rubik wird lokal aus assets/fonts/ geladen (siehe fonts.css). Solange die
     WOFF2-Dateien fehlen, greift die System-Grotesk der Fallback-Kette
     (San Francisco, Segoe UI Variable, Roboto) statt Arial. */
  --font-display:"Rubik","Inter var",system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Rubik","Inter var",system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-label:"Rubik","Inter var",system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Scale — measured off the reference screenshots */
  --type-hero:clamp(46px,6.4vw,92px);      /* "Patrick Gerard" */
  --type-watermark:clamp(64px,9vw,128px);  /* ghost section word */
  --type-display:clamp(30px,3.2vw,44px);
  --type-h1:44px;
  --type-h2:34px;                          /* "Just say Hello" */
  --type-h3:22px;                          /* amber entry titles */
  --type-h4:19px;
  --type-section-label:20px;               /* uppercase amber section label */
  --type-lead:21px;                        /* "Visual Designer" role line */
  --type-body:17px;
  --type-body-sm:15px;
  --type-caption:14px;
  --type-label:12px;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  --leading-hero:1.06;
  --leading-tight:1.14;
  --leading-heading:1.25;
  --leading-body:1.66;
  --leading-loose:1.8;

  --tracking-hero:-0.02em;
  --tracking-display:-0.01em;
  --tracking-heading:-0.005em;
  --tracking-body:0em;
  --tracking-label:0.16em;   /* uppercase section labels / nav */
  --tracking-nav:0.08em;
  --tracking-mono:0.02em;

  --measure-prose:64ch;
  --measure-lead:52ch;
}
:root{
  /* 4px base, generous upper end for editorial whitespace */
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-11:80px;
  --space-12:96px;
  --space-13:120px;
  --space-14:160px;
  --space-15:200px;

  /* Layout */
  --container-max:1240px;
  --container-narrow:820px;
  --container-wide:1440px;
  --gutter:clamp(20px,5vw,72px); /* @kind spacing */
  --section-y:clamp(72px,10vw,var(--space-13));
  --section-y-lg:clamp(96px,13vw,var(--space-14));
  --grid-gap:clamp(20px,2.4vw,var(--space-7));
  --header-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--type-body);font-weight:var(--weight-regular);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);color:var(--text-strong);font-weight:var(--weight-regular);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);text-wrap:balance}
h1{font-size:var(--type-h1);line-height:var(--leading-tight);letter-spacing:var(--tracking-display)}
h2{font-size:var(--type-h2)}
h3{font-size:var(--type-h3)}
h4{font-size:var(--type-h4)}
p{margin:0 0 var(--space-4);max-width:var(--measure-prose);text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-color)}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--radius-xs)}
small{font-size:var(--type-caption)}
code,kbd,pre{font-family:var(--font-mono);font-size:.92em;letter-spacing:var(--tracking-mono)}
hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--space-9) 0}
img,svg,video{max-width:100%;height:auto;display:block}
button{font:inherit}
input,textarea,select{font:inherit}
::selection{background:var(--amber-tint-strong);color:var(--white)}
::placeholder{color:var(--text-muted);opacity:1}
.pit-eyebrow{font-family:var(--font-label);font-size:var(--type-label);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.pit-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.pit-section{padding-block:var(--section-y)}
:root{
  --duration-instant:90ms; /* @kind other */
  --duration-fast:160ms; /* @kind other */
  --duration-base:240ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
  --duration-reveal:700ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.5,0,.9,.3); /* @kind other */
  --transition-color:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard); /* @kind other */
  --transition-transform:transform var(--duration-base) var(--ease-out); /* @kind other */
  --hover-lift:translateY(-2px); /* @kind other */
  --press-scale:scale(.985); /* @kind other */
  --reveal-offset:18px; /* @kind spacing */
}
@media (prefers-reduced-motion:reduce){
  :root{
    --duration-fast:0ms; /* @kind other */
    --duration-base:0ms; /* @kind other */
    --duration-slow:0ms; /* @kind other */
    --duration-reveal:0ms; /* @kind other */
    --hover-lift:none; /* @kind other */
    --press-scale:none; /* @kind other */
    --reveal-offset:0px; /* @kind spacing */
  }
}
:root{
  /* Radii — pill buttons, softly rounded fields, near-square media */
  --radius-xs:3px;
  --radius-sm:6px;
  --radius-md:8px;    /* input + textarea */
  --radius-lg:12px;
  --radius-pill:999px; /* all buttons */
  --radius-circle:50%; /* social + contact icon buttons */
  --radius-media:2px;  /* portfolio tiles are essentially square */

  --border-hairline:1px;
  --border-medium:1.5px;
  --border-heavy:2px;

  /* Shadows read as depth against navy, never as a light-mode drop shadow */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(0,0,0,.28);
  --shadow-sm:0 4px 14px rgba(0,0,0,.30);
  --shadow-md:0 14px 34px -14px rgba(0,0,0,.55);
  --shadow-lg:0 30px 70px -30px rgba(0,0,0,.70);
  --shadow-accent:0 10px 26px -12px rgba(246,196,69,.45);
  --shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle);
  --ring-focus:0 0 0 3px rgba(246,196,69,.30);

  --image-radius:var(--radius-media);
  --image-scrim:linear-gradient(180deg,rgba(10,15,28,0) 35%,rgba(10,15,28,.85) 100%); /* @kind other */
  --tile-overlay:rgba(10,15,28,.72);
  --blur-veil:saturate(140%) blur(12px); /* @kind other */
}
@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/elevation.css";
@import "tokens/motion.css";
@import "tokens/base.css";

/* ── Icons als Masken (einfärbbar über currentColor) ── */
.pit-icon{display:inline-block;width:1em;height:1em;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;flex:0 0 auto}
.pit-icon[data-icon="arrow-down"]{-webkit-mask-image:url("/neu/icons/arrow-down.svg");mask-image:url("/neu/icons/arrow-down.svg")}
.pit-icon[data-icon="arrow-right"]{-webkit-mask-image:url("/neu/icons/arrow-right.svg");mask-image:url("/neu/icons/arrow-right.svg")}
.pit-icon[data-icon="arrow-up-right"]{-webkit-mask-image:url("/neu/icons/arrow-up-right.svg");mask-image:url("/neu/icons/arrow-up-right.svg")}
.pit-icon[data-icon="arrow-up"]{-webkit-mask-image:url("/neu/icons/arrow-up.svg");mask-image:url("/neu/icons/arrow-up.svg")}
.pit-icon[data-icon="at-sign"]{-webkit-mask-image:url("/neu/icons/at-sign.svg");mask-image:url("/neu/icons/at-sign.svg")}
.pit-icon[data-icon="briefcase"]{-webkit-mask-image:url("/neu/icons/briefcase.svg");mask-image:url("/neu/icons/briefcase.svg")}
.pit-icon[data-icon="check"]{-webkit-mask-image:url("/neu/icons/check.svg");mask-image:url("/neu/icons/check.svg")}
.pit-icon[data-icon="chevron-down"]{-webkit-mask-image:url("/neu/icons/chevron-down.svg");mask-image:url("/neu/icons/chevron-down.svg")}
.pit-icon[data-icon="chevron-right"]{-webkit-mask-image:url("/neu/icons/chevron-right.svg");mask-image:url("/neu/icons/chevron-right.svg")}
.pit-icon[data-icon="download"]{-webkit-mask-image:url("/neu/icons/download.svg");mask-image:url("/neu/icons/download.svg")}
.pit-icon[data-icon="github"]{-webkit-mask-image:url("/neu/icons/github.svg");mask-image:url("/neu/icons/github.svg")}
.pit-icon[data-icon="graduation-cap"]{-webkit-mask-image:url("/neu/icons/graduation-cap.svg");mask-image:url("/neu/icons/graduation-cap.svg")}
.pit-icon[data-icon="id-card"]{-webkit-mask-image:url("/neu/icons/id-card.svg");mask-image:url("/neu/icons/id-card.svg")}
.pit-icon[data-icon="linkedin"]{-webkit-mask-image:url("/neu/icons/linkedin.svg");mask-image:url("/neu/icons/linkedin.svg")}
.pit-icon[data-icon="mail"]{-webkit-mask-image:url("/neu/icons/mail.svg");mask-image:url("/neu/icons/mail.svg")}
.pit-icon[data-icon="map-pin"]{-webkit-mask-image:url("/neu/icons/map-pin.svg");mask-image:url("/neu/icons/map-pin.svg")}
.pit-icon[data-icon="minus"]{-webkit-mask-image:url("/neu/icons/minus.svg");mask-image:url("/neu/icons/minus.svg")}
.pit-icon[data-icon="phone"]{-webkit-mask-image:url("/neu/icons/phone.svg");mask-image:url("/neu/icons/phone.svg")}
.pit-icon[data-icon="plus"]{-webkit-mask-image:url("/neu/icons/plus.svg");mask-image:url("/neu/icons/plus.svg")}
.pit-icon[data-icon="x"]{-webkit-mask-image:url("/neu/icons/x.svg");mask-image:url("/neu/icons/x.svg")}

/* ── Komponenten aus dem Design-Bundle, als CSS nachgebaut ── */
.pit-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:17px 38px;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:16px;font-weight:var(--weight-medium);letter-spacing:.01em;line-height:1.2;border:1px solid transparent;background:var(--accent);color:var(--on-accent);cursor:pointer;white-space:nowrap;transition:var(--transition-color),var(--transition-transform),box-shadow var(--duration-base) var(--ease-out)}
.pit-btn:hover{background:var(--accent-hover);color:var(--on-accent);transform:var(--hover-lift);box-shadow:var(--shadow-accent)}
.pit-btn:active{transform:var(--press-scale)}
/* Ghost wie im Original: kein sichtbarer Rahmen, nur Amber-Text; beim Hover ein zarter Amber-Grund. */
.pit-btn--ghost{background:transparent;border-color:var(--accent);color:var(--text-accent);box-shadow:none}
.pit-btn--ghost:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--text-accent);transform:var(--hover-lift);box-shadow:none}

/* ── KI-Kachel mit Innenleben (aus PortfolioTile) ── */
.pit-tile{position:relative;display:block;overflow:hidden;aspect-ratio:4 / 3;border-radius:var(--radius-media);background:var(--surface-inset);text-decoration:none;cursor:pointer}
.pit-tile__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--space-4);text-align:center;font-family:var(--font-label);font-size:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);background-image:repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.03) 12px 13px)}
.pit-tile__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}
.pit-tile:hover .pit-tile__ph img{transform:scale(1.04)}
.pit-tile__info{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:var(--space-5);text-align:center;background:linear-gradient(to top,rgba(10,15,28,.78) 0%,rgba(10,15,28,.42) 55%,rgba(10,15,28,.30) 100%);transition:opacity var(--duration-base) var(--ease-standard)}
.pit-tile__cat{font-family:var(--font-label);font-size:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent)}
.pit-tile__name{font-family:var(--font-display);font-size:var(--type-h4);line-height:1.12;color:var(--white)}
/* Beim Hover tritt die feste Info zurück, die Klick-Andeutung erscheint. */
.pit-tile:hover .pit-tile__info,.pit-tile:focus-visible .pit-tile__info,.pit-tile[data-active] .pit-tile__info{opacity:0}
.pit-tile__ov{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-4);text-align:center;background:var(--tile-overlay);opacity:0;transition:opacity var(--duration-base) var(--ease-standard)}
.pit-tile:hover .pit-tile__ov,.pit-tile:focus-visible .pit-tile__ov,.pit-tile[data-active] .pit-tile__ov{opacity:1}
.pit-tile__ring{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--radius-circle);border:1px solid var(--accent);color:var(--accent);font-size:22px}
.pit-tile__hint{font-family:var(--font-label);font-size:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--white)}
.pit-tag{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);background:var(--surface-inset);font-family:var(--font-label);font-size:13px;font-weight:var(--weight-medium);letter-spacing:.02em;color:var(--text-body)}
.pit-mediaframe{position:relative;width:100%;border-radius:var(--radius-media);overflow:hidden;background:var(--surface-card);border:1px solid var(--border-subtle)}
.pit-mediaframe>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Kopf */
/* Kopf wie im Original SiteHeader: oben transparent, beim Scrollen Grund + Unschärfe. */
.pit-header{position:sticky;top:0;z-index:40;height:var(--header-h);display:flex;align-items:center;background:transparent;border-bottom:1px solid transparent;transition:var(--transition-color),backdrop-filter var(--duration-base) var(--ease-standard)}
/* Fallback zuerst (solide Fläche) für Browser ohne color-mix (älteres Safari);
   moderne Browser überschreiben mit der halbtransparenten Fläche + Weichzeichner. */
.pit-header[data-scrolled]{background:var(--surface-page-alt);background:color-mix(in oklab,var(--surface-page-alt) 88%,transparent);backdrop-filter:var(--blur-veil);-webkit-backdrop-filter:var(--blur-veil);border-bottom-color:var(--border-subtle)}
.pit-header-inn{width:100%;max-width:var(--container-wide);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-7)}
.pit-wordmark{display:inline-flex;align-items:baseline;gap:var(--space-3);font-family:var(--font-display);font-size:23px;font-weight:var(--weight-medium);letter-spacing:-.015em;line-height:1;color:var(--text-strong)}
.pit-wordmark .dot{color:var(--accent)}
.pit-wordmark small{font-family:var(--font-label);font-size:11px;font-weight:var(--weight-regular);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);line-height:1.3}
.pit-nav{display:flex;align-items:center;gap:var(--space-7)}
.pit-header .pit-nav a{font-family:var(--font-label);font-size:14px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-nav);text-transform:uppercase;color:var(--text-strong);transition:var(--transition-color)}
.pit-header .pit-nav a:hover,.pit-header .pit-nav a[aria-current]{color:var(--accent)}
@media(max-width:1000px){.pit-header .pit-nav{display:none}}

/* ── Profil-Akkordeon (aufklappbar, eines offen) ── */
.pit-acc-item{border-top:1px solid var(--border-subtle);padding:clamp(18px,2.4vw,30px) 0}
.pit-acc-head{display:flex;align-items:baseline;gap:clamp(12px,2vw,26px);flex-wrap:wrap;width:100%;background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.pit-acc-no{font-family:var(--font-label);font-size:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint);flex:0 0 auto;transition:color var(--duration-base) var(--ease-standard)}
.pit-acc-title{margin:0;flex:1 1 220px;min-width:0;font-size:clamp(26px,3.8vw,54px);line-height:1.04;letter-spacing:-0.02em;font-weight:var(--weight-light);color:var(--text-muted);transition:color var(--duration-base) var(--ease-standard)}
.pit-acc-arrow{flex:0 0 auto;width:34px;height:34px;border-radius:999px;border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:16px;transition:transform 320ms var(--ease-out),border-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.pit-acc-panel{overflow:hidden;max-height:0;opacity:0;margin-top:0;transition:max-height 460ms cubic-bezier(.22,.61,.36,1),opacity 300ms ease,margin-top 460ms cubic-bezier(.22,.61,.36,1)}
.pit-acc-panel-inner{display:flex;flex-wrap:wrap;gap:var(--space-2);padding-left:clamp(0px,3vw,50px)}
.pit-acc-item[data-open] .pit-acc-title{color:var(--text-strong)}
.pit-acc-item[data-open] .pit-acc-no{color:var(--accent)}
.pit-acc-item[data-open] .pit-acc-arrow{transform:rotate(180deg);border-color:var(--border-accent);color:var(--accent)}
.pit-acc-item[data-open] .pit-acc-panel{max-height:400px;opacity:1;margin-top:var(--space-5)}

/* ── Mobil-Optimierung ─────────────────────────────────────────────────────
   Weniger Leerraum, verschlankter Kopf, ruhigere Lesegrößen. */
@media(max-width:640px){
  :root{ --section-y:clamp(46px,11vw,64px); --type-lead:18px; --header-h:60px; }
  /* Tagline im Kopf bricht auf dem Handy um und drängt — hier ausblenden. */
  .pit-wordmark small{ display:none; }
  .pit-wordmark{ font-size:20px; }
  /* KI-Kacheln etwas höher, damit Bild + Titel Luft haben. */
  .pit-tile{ aspect-ratio:16 / 11; }
}