/* ============================================================
   Ali Aljasem · Portfolio — Produktions-Stylesheet
   Konsolidiert aus dem Design-System (Tokens + Komponenten)
   und den seitenspezifischen Styles des Entwurfs.
   ============================================================ */

/* ---- Fonts (selbst gehostet, kein Google-Fonts-Abruf) ---- */
@font-face{font-family:'Syne';src:url('../fonts/syne.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Mona Sans';src:url('../fonts/mona-sans.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/sora.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}
/* Newsreader: auf Latin subsettet und wght auf 340 fixiert (der einzige genutzte
   Schnitt) — 143 KB -> 55 KB. Die opsz-Achse bleibt variabel, damit die großen
   Display-Wörter optisch korrekt bleiben. Dateiname versioniert wegen des
   immutable-Cachings von /fonts/*. */
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-italic-v2.woff2') format('woff2');font-weight:340;font-style:italic;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../fonts/space-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---- Tokens: Farben ---- */
:root{
--ink-950:#0A0A0A;--ink-900:#111110;--ink-850:#161614;--ink-800:#1D1C1A;--ink-700:#2A2825;
--cream-100:#F2EFE9;--cream-300:#CFCBC2;--cream-500:#A39F96;--cream-700:#6E6A62;
--gold-100:#F4E3C4;--gold-300:#EBC48C;--gold-500:#E0A458;--gold-700:#A97434;--gold-900:#6B4517;
--line-1:rgba(242,239,233,0.14);--line-2:rgba(242,239,233,0.08);--line-3:rgba(242,239,233,0.04);
--surface-page:var(--ink-950);--surface-raised:var(--ink-900);--surface-card:var(--ink-850);--surface-hover:var(--ink-800);
--text-heading:var(--cream-100);--text-body:var(--cream-300);--text-muted:var(--cream-500);--text-faint:var(--cream-700);
--accent:var(--gold-500);--accent-soft:var(--gold-300);--accent-deep:var(--gold-700);
--on-accent:var(--ink-950);--on-light:var(--ink-950);
--selection-bg:var(--gold-500);--selection-fg:var(--ink-950);
--fill-on:#F2EFE9;--fill-off:rgba(242,239,233,0.14);--nav-bg:rgba(17,17,16,0.72);
}
/* ---- Tokens: Abstände ---- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--space-11:192px;
--section-y:clamp(96px,14vh,180px);
--container-max:1440px;--container-pad:clamp(20px,5vw,72px);
--grid-gap:clamp(16px,1.8vw,24px);
--radius-1:6px;--radius-2:10px;--radius-pill:999px;
--nav-h:76px;
}
/* ---- Tokens: Typografie ---- */
:root{
--font-sans:'Sora',system-ui,sans-serif;
--font-serif:'Newsreader',Georgia,serif;
--font-mono:'Space Mono',ui-monospace,monospace;
--text-display:clamp(64px,11vw,168px);--lh-display:0.92;--ls-display:-0.045em;
--text-h1:clamp(44px,6.5vw,92px);--lh-h1:0.98;--ls-h1:-0.035em;
--text-h2:clamp(30px,4vw,52px);--lh-h2:1.06;--ls-h2:-0.025em;
--text-h3:clamp(22px,2vw,28px);--lh-h3:1.2;--ls-h3:-0.015em;
--text-lead:clamp(18px,1.6vw,22px);--lh-lead:1.5;
--text-body:16px;--lh-body:1.65;
--text-small:14px;--lh-small:1.55;
--text-label:11px;--ls-label:0.16em;
--text-index:12px;
--w-light:250;--w-regular:380;--w-medium:460;--w-semibold:560;
--serif-accent-weight:340;
}
/* ---- Tokens: Motion ---- */
:root{
--ease-out:cubic-bezier(0.16,1,0.3,1);
--ease-inout:cubic-bezier(0.76,0,0.24,1);
--ease-soft:cubic-bezier(0.33,1,0.68,1);
--dur-micro:0.18s;--dur-ui:0.45s;--dur-reveal:0.9s;--dur-hero:1.2s;
--stagger:70ms;--reveal-shift:110%;
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--lh-body);font-weight:var(--w-regular)}
h1,h2,h3,h4{margin:0;color:var(--text-heading);font-weight:var(--w-medium)}
p{margin:0}
a{color:var(--text-heading);text-decoration:none;transition:color var(--dur-micro) var(--ease-soft)}
a:hover{color:var(--accent)}
::selection{background:var(--selection-bg);color:var(--selection-fg)}
img{display:block;max-width:100%}
button{font-family:inherit}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}

/* ---- Seiten-Typografie (aus dem Entwurf) ---- */
html{scroll-behavior:smooth;overflow-x:hidden;color-scheme:dark}
body{color:var(--cream-300);font-family:'Syne',var(--font-sans),system-ui,sans-serif}
h2,h3,p,span,li,a,button,input,textarea,select{font-family:'Syne',var(--font-sans),system-ui,sans-serif}
h1{font-family:'Mona Sans','Syne',system-ui,sans-serif;font-variation-settings:'wght' 560}
[style*="var(--font-mono)"]{font-family:var(--font-mono),ui-monospace,monospace!important}
em[style*="var(--font-serif)"]{font-family:var(--font-serif),Georgia,serif!important}

/* ---- Fokus-Sichtbarkeit (Tastatur) ---- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:2px}

/* ---- Nur für Screenreader / Suchmaschinen, visuell unsichtbar ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Text-Scramble: animiert wird das Pseudo-Element, nicht der echte Text.
       -webkit-text-fill-color macht das Original unsichtbar, lässt aber color
       an ::after weitervererben. Ohne --aa-scr bleibt ::after leer. ---- */
.aa-scrambling{position:relative;-webkit-text-fill-color:transparent}
.aa-scrambling::after{content:var(--aa-scr,"");position:absolute;left:50%;top:0;transform:translateX(-50%);-webkit-text-fill-color:currentColor;white-space:pre;pointer-events:none}

/* ---- DS-Komponente: Formularfelder ---- */
.aa-field{display:flex;flex-direction:column;gap:10px;width:100%}
.aa-field-l{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.aa-field-l i{font-style:normal;color:var(--text-faint)}
.aa-field input,.aa-field textarea{background:transparent;border:none;border-bottom:1px solid var(--line-1);color:var(--text-heading);font-family:var(--font-sans);font-weight:var(--w-regular);font-size:var(--text-lead);padding:10px 0 14px;border-radius:0;outline:none;caret-color:var(--accent);transition:border-color var(--dur-micro) var(--ease-soft);width:100%}
.aa-field input::placeholder,.aa-field textarea::placeholder{color:var(--text-faint)}
.aa-field input:focus,.aa-field textarea:focus{border-bottom-color:var(--accent)}
.aa-field textarea{resize:vertical;min-height:96px;line-height:1.5}

/* ---- DS-Komponente: Button ---- */
.aa-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--radius-pill);font-family:var(--font-sans);font-weight:var(--w-semibold);cursor:pointer;text-decoration:none;border:1px solid transparent;white-space:nowrap;transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--press,1));transition:transform var(--dur-ui) var(--ease-out),background var(--dur-micro) var(--ease-soft),color var(--dur-micro) var(--ease-soft),border-color var(--dur-micro) var(--ease-soft);will-change:transform}
.aa-btn:active{--press:.97}
.aa-btn .aa-btn-a{display:inline-block;transition:transform var(--dur-ui) var(--ease-out)}
.aa-btn:hover .aa-btn-a{transform:translate(2px,-2px)}
.aa-btn-sm{padding:9px 20px;font-size:13px}.aa-btn-md{padding:13px 28px;font-size:14px}.aa-btn-lg{padding:17px 36px;font-size:15px}
.aa-btn-primary{background:var(--cream-100);color:var(--ink-950)}.aa-btn-primary:hover{background:var(--gold-500);color:var(--ink-950)}
.aa-btn-outline{background:transparent;color:var(--text-heading);border-color:var(--line-1)}.aa-btn-outline:hover{background:var(--cream-100);color:var(--ink-950);border-color:var(--cream-100)}
.aa-btn[disabled],.aa-btn-disabled{opacity:.35;pointer-events:none}

/* ---- DS-Komponente: ArrowLink ---- */
.aa-al{position:relative;display:inline-flex;align-items:baseline;gap:8px;color:var(--text-heading);text-decoration:none;cursor:pointer;transition:color var(--dur-micro) var(--ease-soft)}
.aa-al .aa-al-a{display:inline-block;transition:transform var(--dur-ui) var(--ease-out)}
.aa-al:hover{color:var(--accent)}
.aa-al:hover .aa-al-a{transform:translate(3px,-3px)}
.aa-al-u::after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-ui) var(--ease-out)}
.aa-al-u:hover::after{transform:scaleX(1)}

/* ---- DS-Komponente: Text-Marquee ---- */
.aa-mq{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:var(--space-5) 0;user-select:none}
.aa-mq-track{display:inline-flex;animation:aa-mq-scroll var(--aa-mq-dur,30s) linear infinite}
.aa-mq-half{display:inline-flex;align-items:baseline;flex:none}
.aa-mq-item{display:inline-flex;align-items:baseline;font-size:var(--aa-mq-size,clamp(40px,6vw,84px));line-height:1;letter-spacing:-.03em;font-weight:var(--w-light);color:var(--text-heading)}
.aa-mq-item.is-serif{font-family:var(--font-serif);font-style:italic;font-weight:340;color:var(--text-muted)}
.aa-mq-sep{margin:0 .45em;font-size:.35em;color:var(--accent);transform:translateY(-.7em)}
@keyframes aa-mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---- Laptop-Karten: Deckel klappt beim Reinscrollen auf, Text folgt ----
   .is-armed setzt JS, nicht CSS: ohne JS und bei reduzierter Bewegung ist
   damit alles sofort sichtbar - gleiche Logik wie bei den data-fade-Reveals. */
.aa-lidw{perspective:1400px}
.aa-lid{transform-origin:bottom center;transition:transform 1.7s var(--ease-soft);will-change:transform}
.aa-pc.is-armed .aa-lid{transform:rotateX(-88deg)}
.aa-cs{transition:opacity 1.15s var(--ease-soft) var(--cs-d,0ms),transform 1.15s var(--ease-soft) var(--cs-d,0ms)}
.aa-pc.is-armed .aa-cs{opacity:0;transform:translateY(18px)}

/* ---- Hover-Zustände (ersetzen die style-hover-Attribute des Entwurfs) ---- */
.hv-gold:hover{color:var(--gold-500)!important}
.hv-cream-bg:hover{background:var(--cream-100)!important}
/* ---- Cascade-Text: Zeichen rollen beim Hover nach oben durch ----
   Jedes Zeichen traegt per text-shadow eine Kopie --casc-h unter sich. Beim
   Hover wandert die Zeile gestaffelt um --casc-h nach oben, die Kopie nimmt
   den Platz des Originals ein. --casc-h ist die urspruengliche Zeilenhoehe
   (per JS gesetzt), damit die Buttons ihre Groesse exakt behalten. Geklippt
   wird per clip-path statt overflow:hidden — overflow:hidden verschiebt die
   Baseline eines Inline-Blocks auf die Unterkante und macht Buttons 1px hoeher. */
.aa-casc{display:inline-block;vertical-align:top;white-space:nowrap;line-height:var(--casc-h,1.2em);clip-path:inset(0)}
.aa-casc>span{display:inline-block;text-shadow:0 var(--casc-h,1.2em) currentColor;transition:transform var(--casc-dur,250ms) var(--ease-inout);will-change:transform}
.aa-casc-h:hover .aa-casc>span,.aa-casc-h:focus-visible .aa-casc>span{transform:translateY(calc(-1 * var(--casc-h,1.2em)))}
@media(prefers-reduced-motion:reduce){.aa-casc>span{transition:none}}
.hv-raise:hover{background:var(--ink-900)!important}
.hv-circle:hover{background:var(--gold-500)!important;color:var(--ink-950)!important;border-color:var(--gold-500)!important}
.hv-line:hover:not([disabled]){border-color:var(--line-1)!important}
#aa-ava:hover img{transform:scale(1.06)!important;filter:grayscale(0)!important}

/* ---- Musik-Marquee (Cover-Band) ---- */
.aa-mc{filter:saturate(1.02);transition:filter 0.5s var(--ease-soft),opacity 0.4s var(--ease-soft),transform 0.5s var(--ease-out)}
.aa-mtrack:hover .aa-mc{opacity:0.45}
.aa-mtrack .aa-mc:hover{opacity:1;filter:saturate(1.45) brightness(1.1) contrast(1.05);transform:scale(1.04)}
.aa-mtrack{display:flex;gap:var(--grid-gap);width:max-content;padding-left:var(--container-pad);animation:aa-mloop 30s linear infinite;will-change:transform}
.aa-mtrack:hover{animation-play-state:paused}
.aa-mhalf{display:flex;gap:var(--grid-gap);padding-right:var(--grid-gap)}
.aa-mc{flex:none;width:clamp(160px,17vw,250px)}
@keyframes aa-mloop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---- Musik: zweite, kleinere Cover-Reihe laeuft gegenlaeufig ---- */
.aa-mtrack-r{animation-name:aa-mloop-r;animation-duration:38s}
.aa-mtrack-r .aa-mc{width:clamp(104px,11.5vw,168px)}
@keyframes aa-mloop-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.aa-mi{opacity:0;transform:translateY(10px);transition:opacity 0.35s var(--ease-soft),transform 0.45s var(--ease-out)}
.aa-mc:hover .aa-mi{opacity:1;transform:translateY(0)}
@keyframes aa-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---- Formular-Status ---- */
.aa-form-status{font-family:var(--font-mono);font-size:12px;letter-spacing:0.08em;line-height:1.7}
.aa-form-status.is-ok{color:var(--gold-500)}
.aa-form-status.is-err{color:#d47c6a}

/* ---- Viewport-stabile Sektionshöhe (iOS Adressleiste) ---- */
@supports(height:100svh){#hero,#about,#music,#skills,#work,#experience,#contact{min-height:100svh!important}}

/* ---- Desktop mit Maus: gestapelte Sektionen ---- */
@media(min-width:1025px) and (hover:hover) and (pointer:fine){
  .aa-stk{position:sticky;top:0}}

/* ---- Ab Tablet-Breite: wechselnde Mockup-Seite (auch Touch/iPad,
   hochkant wie quer). Unter 821px wird gestapelt, dort irrelevant. ---- */
@media(min-width:821px){
  .aa-pc:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)!important}
  .aa-pc:nth-child(even)>div:first-child{order:2}}

/* ---- Tablet: Laptop bleibt neben dem Text wie am Desktop ----
   Gestapelt wird erst im Handy-Breakpoint (max-width:820px) weiter unten.
   Vorher galt hier zusaetzlich (hover:none), wodurch jedes Touch-Geraet
   unabhaengig von der Breite gestapelt hat - auch das iPad. */
@media(min-width:821px) and (max-width:1024px){
  .aa-pc{gap:clamp(24px,3.4vw,40px)!important}}
@media(min-width:601px) and (max-width:820px){
  .aa-pc>div:last-child{max-width:640px;margin:0 auto}}

/* ---- Tablet: dreispaltige Blöcke werden zweispaltig ---- */
@media(min-width:821px) and (max-width:1024px){
  #work .aa-xp{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)!important;gap:8px 24px!important}
  #experience .aa-xp{grid-template-columns:minmax(118px,165px) minmax(0,1fr)!important;gap:8px 24px!important}
  .aa-xp>*:last-child{grid-column:2!important;text-align:left!important}}

/* ---- Touch: kein Hover, also Titel dauerhaft zeigen ---- */
@media(hover:none){
  .aa-mi{opacity:1!important;transform:none!important}}

/* ---- Handy ---- */
@media(max-width:820px){
  .aa-m-hide{display:none!important}
  .aa-sg{grid-template-columns:1fr!important}
  .aa-pg{grid-template-columns:1fr!important}
  .aa-pc{grid-template-columns:1fr!important;padding:20px!important}
  .aa-pc>div{order:0!important}
  .aa-mc{width:40vw!important}
  .aa-mrow2{display:none!important}
  .aa-ct{grid-template-columns:1fr!important}
  .aa-xp{grid-template-columns:1fr!important;gap:10px!important}
  .aa-xp-emp{text-align:left!important}
  #about,#music,#skills,#work,#experience{padding-top:clamp(56px,13vw,88px)!important;padding-bottom:clamp(56px,13vw,88px)!important}
  #contact{padding-top:clamp(56px,13vw,88px)!important}
  /* Hero fließend statt absolut gestapelt */
  #aa-hero-t{position:static!important;transform:none!important;margin-top:auto;padding:0 var(--container-pad)}
  #aa-ava{position:static!important;transform:none!important;margin:clamp(20px,4vh,36px) auto 0!important;width:clamp(132px,40vw,190px)!important}
  #aa-ava-badge{display:none!important}
  .aa-hero-b{margin-top:auto}
  #hero>div:last-child{padding-top:12px!important;padding-bottom:12px!important}
  .aa-nav a{padding-block:8px}
  #aa-cta{padding:12px 18px!important}
}
@media(max-width:600px){#hero h1{font-size:clamp(54px,16vw,92px)!important}}
@media(max-width:430px){
  .aa-nav{gap:14px!important}
  .aa-nav a{font-size:10px!important;letter-spacing:0.1em!important}
  #aa-cta{font-size:10px!important;letter-spacing:0.1em!important;padding:12px 14px!important}
  #aa-ava{width:clamp(118px,34vw,170px)!important;margin-top:clamp(14px,2.4vh,26px)!important}}

/* ---- flache Viewports (Handy/Tablet quer): Name links, Porträt rechts ---- */
@media(max-height:600px) and (min-width:601px){
  #hero h1{font-size:clamp(44px,7.6vw,96px)!important}
  #aa-hero-t{position:static!important;transform:none!important;width:auto!important;margin:auto 0 0;padding:0 var(--container-pad);text-align:left!important}
  #aa-ava{top:50%!important;left:auto!important;right:var(--container-pad)!important;transform:translateY(-50%)!important;width:clamp(104px,20vh,160px)!important;margin:0!important}
  #aa-ava-badge{display:none!important}
  .aa-hero-b{margin-top:auto;padding-right:calc(var(--container-pad) + clamp(104px,20vh,160px) + 44px)!important}
  #hero>div:last-child{padding-top:10px!important;padding-bottom:10px!important}}

/* ---- Unterseiten (Impressum / Datenschutz / 404) ---- */
.aa-legal{max-width:760px;margin:0 auto;padding:clamp(48px,8vh,96px) var(--container-pad) var(--space-9)}
.aa-legal h1{font-size:clamp(32px,4.5vw,56px);line-height:1.05;letter-spacing:-0.03em;font-weight:var(--w-light);color:var(--text-heading);font-family:'Syne',var(--font-sans),system-ui,sans-serif;font-variation-settings:normal}
.aa-legal h2{font-size:clamp(19px,2vw,24px);line-height:1.3;letter-spacing:-0.015em;font-weight:var(--w-medium);color:var(--text-heading);margin-top:var(--space-7)}
.aa-legal p,.aa-legal li{font-size:15px;line-height:1.75;color:var(--cream-300);margin-top:var(--space-3)}
.aa-legal a{color:var(--cream-100);text-decoration:underline;text-underline-offset:4px}
.aa-legal a:hover{color:var(--gold-500)}
.aa-legal .aa-label{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.aa-legal .aa-back{display:inline-block;margin-bottom:var(--space-7);font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);text-decoration:none}
.aa-legal .aa-back:hover{color:var(--gold-500)}
.aa-legal .aa-ph{background:rgba(224,164,88,0.12);color:var(--gold-300);padding:1px 6px;border-radius:3px;font-family:var(--font-mono);font-size:0.85em}

/* ============================================================
   Hell/Dunkel-Modus (portiert aus dem Design-Entwurf)
   Die Light-Palette ist eine Inversion der Token: --ink-* wird hell,
   --cream-* wird dunkel. Weil die Rollen-Token (surface, text, accent)
   nur var()-Verweise darauf sind, kippt die gesamte Seite mit diesem Block.
   ============================================================ */
html[data-theme="light"]{color-scheme:light;
--ink-950:#F2EFE9;--ink-900:#EAE5DB;--ink-850:#E3DDD1;--ink-800:#DAD3C4;--ink-700:#CDC5B3;
--cream-100:#17150F;--cream-300:#3E3A31;--cream-500:#686357;--cream-700:#857E6D;
--gold-100:#5F3D0E;--gold-300:#7A4E14;--gold-500:#8E5D1C;--gold-700:#A97434;--gold-900:#C08A3E;
--line-1:rgba(23,21,15,0.28);--line-2:rgba(23,21,15,0.13);--line-3:rgba(23,21,15,0.09);
--fill-on:#17150F;--fill-off:rgba(23,21,15,0.15);--nav-bg:rgba(242,239,233,0.82)}
body,main section,main footer,.aa-legal{transition:background-color 0.45s ease,border-color 0.45s ease}
html[data-theme="light"] .aa-form-status.is-err{color:#a33b23}

/* ---- Sprachumschalter DE | EN ---- */
.aa-lang{display:inline-flex;align-items:center;gap:10px}
.aa-lang button{background:none;border:none;padding:4px 0;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;color:var(--text-faint);transition:color var(--dur-micro) var(--ease-soft)}
.aa-lang button:hover{color:var(--gold-500)}
.aa-lang button[aria-current="true"]{color:var(--gold-500)}
.aa-lang i{display:block;width:1px;height:11px;background:var(--line-1)}

/* ---- Theme-Schalter: Sonne/Mond als Inline-SVG ---- */
.aa-thm{display:inline-flex;align-items:center;justify-content:center;line-height:0;background:transparent;border:none;padding:1px 0;cursor:pointer;color:var(--cream-100);transition:color var(--dur-micro) var(--ease-soft),border-color var(--dur-micro) var(--ease-soft)}
.aa-thm:hover{color:var(--gold-500)}
.aa-thm-b{border:1px solid var(--line-2);border-radius:var(--radius-pill);width:36px;height:36px;padding:0}
.aa-thm-b:hover{border-color:var(--gold-500)}
/* Icon: Sonne (Kreis + 8 Strahlen) und Mondsichel liegen uebereinander im
   selben SVG. Jeder Pfad skaliert um seine eigene Mitte und wird dabei per
   stroke-dashoffset nachgezeichnet (pathLength="1" normiert jede Pfadlaenge
   auf 1, dasharray:1 macht daraus "ganz sichtbar" bzw. "ganz unsichtbar").
   Gesteuert wird alles allein ueber html[data-theme] - kein JavaScript. */
.aa-thmi{display:block;width:18px;height:18px;color:inherit}
.aa-thmi path{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;transform-box:fill-box;transform-origin:center}
/* Sichtbar wird jeweils das Symbol des AKTUELLEN Modus: dunkel -> Mond, hell -> Sonne.
   Beim Erscheinen zeichnet sich der Pfad verzoegert nach (Ende der Skalierung),
   beim Verschwinden zuerst - dadurch ueberlagern sich die beiden Symbole nicht. */
.aa-thmi .aa-sun{transform:scale(0);stroke-dashoffset:1;transition:transform 0.7s var(--ease-out),stroke-dashoffset 0.28s linear}
html[data-theme="light"] .aa-thmi .aa-sun{transform:scale(1);stroke-dashoffset:0;transition:transform 0.7s var(--ease-out),stroke-dashoffset 0.28s linear 0.42s}
.aa-thmi .aa-moon{transform:scale(1);stroke-dashoffset:0;transition:transform 0.7s var(--ease-out),stroke-dashoffset 0.28s linear 0.42s}
html[data-theme="light"] .aa-thmi .aa-moon{transform:scale(0);stroke-dashoffset:1;transition:transform 0.7s var(--ease-out),stroke-dashoffset 0.28s linear}
/* Die globale Reduced-Motion-Regel weiter oben kuerzt nur die DAUER, nicht die
   Verzoegerung - ohne diese Zeile bliebe das Icon ~420 ms leer stehen. */
@media (prefers-reduced-motion:reduce){.aa-thmi path{transition-delay:0s!important}}

/* ---- Schwebende Pille: erscheint, sobald der Hero durchgescrollt ist ---- */
#aa-fx{position:fixed;top:14px;right:16px;z-index:120;display:flex;align-items:center;gap:13px;padding:8px 15px;background:var(--nav-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:var(--radius-pill);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);transition:opacity 0.35s var(--ease-soft),transform 0.4s var(--ease-out),visibility 0s linear 0.35s}
/* visibility statt nur opacity: unsichtbar heisst auch nicht fokussierbar */
#aa-fx.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity 0.35s var(--ease-soft),transform 0.4s var(--ease-out),visibility 0s}
#aa-fx .aa-lang button{padding:2px 0}

/* ---- Kopfzeile der Unterseiten (Zurück-Link + Umschalter) ---- */
.aa-legal-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:var(--space-7)}
.aa-legal-top .aa-back{margin-bottom:0}
.aa-legal-top .aa-ctrl{display:flex;align-items:center;gap:14px}
.aa-legal-note{margin-top:var(--space-4);padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--radius-1);font-size:13px;line-height:1.6;color:var(--text-muted)}

/* ---- Sprachblöcke (Rechtstexte) ---- */
[data-lang][hidden]{display:none!important}

/* ---- Nav-Umbrüche: gilt jetzt auch für die neuen Buttons ---- */
@media(max-width:820px){.aa-nav button{padding-block:8px}}
@media(max-width:600px){.aa-s-hide{display:none!important}}
@media(max-width:430px){.aa-nav button{font-size:10px!important;letter-spacing:0.1em!important}
  .aa-nav{gap:12px!important}
  .aa-thm-b{width:32px;height:32px}}