/* EIGENKERN Testversion — Stile NUR fuer loesungen.html, steuer.html, aerzte.html, handwerk.html, energie.html.
   Alles Gemeinsame (Kopfbereich, Abschnitte, Raster, Karten, Schritte, Fragen, Fuss) kommt aus eigenkern.css. */

/* Aktiver Menuepunkt */
.kopf nav a.aktiv{opacity:1;color:var(--orange-hell)}

/* Laengere Seitentitel (V5-Titel sind mehrteilig) */
body.loesungen .kopfbereich h1{max-width:20ch}
body.loesungen .kopfbereich .satz b{color:#fff}

/* Beispiel-Dialog: Frage an die lokale KI, Antwort mit Fundstelle */
.aergernis{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.aergernis .text p{max-width:560px}
.aergernis .motto{font:400 clamp(26px,3vw,38px)/1.1 var(--titel);text-transform:uppercase;margin:0 0 14px}
.aergernis .motto .o{color:var(--orange)}
.dialog{background:var(--stahl);color:#fff;border:1px solid var(--stahl-linie);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(14,17,22,.18)}
.dialog-kopf{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--stahl-linie);font-size:12.5px;color:rgba(255,255,255,.6)}
.dialog-kopf i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.dialog-kopf i:first-child{background:var(--orange)}
.dialog-kopf span{margin-left:8px}
.verlauf{padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.blase{max-width:88%;padding:12px 14px;border-radius:14px;font-size:14.5px;line-height:1.5}
.blase.nutzer{align-self:flex-end;background:var(--orange);color:#111;border-bottom-right-radius:4px}
.blase.ki{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid var(--stahl-linie);border-bottom-left-radius:4px}
.blase .quelle{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.18);font-size:12px;color:var(--orange-zart)}
.dialog-fuss{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--stahl-linie);font-size:12px;color:rgba(255,255,255,.6)}
.dialog-fuss b{color:var(--orange-hell);font-weight:600}

/* Karten mit Beispiel-Frage und Listen */
.karte .beispiel{margin:12px 0 0;padding:10px 12px;border-left:3px solid var(--orange);background:#fff7ed;font-size:14px;color:var(--text);border-radius:0 8px 8px 0}
.abschnitt-dunkel .karte .beispiel{background:rgba(249,115,22,.1);color:#fff}
.karte ul{margin:12px 0 0;padding-left:18px;font-size:14.5px;opacity:.85}
.karte ul li{margin:4px 0}
.karte .weiter{display:inline-block;margin-top:14px;font-weight:600;font-size:14.5px}
.karte .weiter::after{content:""}
.karte .kennzeichen{display:inline-block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:10px}
.karte.kern{background:var(--stahl);color:#fff;border-color:var(--stahl)}
.karte.kern p{opacity:.85}
.karte.ohne-link{opacity:.92}
.karte .grenze{margin-top:14px;font-size:13px;opacity:.65;border-top:1px solid var(--linie);padding-top:10px}
.abschnitt-dunkel .karte .grenze{border-color:var(--stahl-linie)}

/* Rollen und Rechte */
.rollen{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.rolle{background:rgba(255,255,255,.04);border:1px solid var(--stahl-linie);border-radius:14px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px}
.rolle strong{font:400 19px/1.1 var(--titel);text-transform:uppercase;letter-spacing:.03em;color:var(--orange-hell)}
.rolle span{font-size:14.5px;color:rgba(255,255,255,.8)}
.abschnitt-dunkel .unter{opacity:.8}
.abschnitt-dunkel .hinweis{color:rgba(255,255,255,.6)}

/* Video-Platzhalter (kein Material in media/) */
.platzhalter{border:1px dashed rgba(255,255,255,.35);border-radius:14px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  color:rgba(255,255,255,.75);background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px)}
.platzhalter.hoch{aspect-ratio:9/16;max-width:260px}
.platzhalter.breit{aspect-ratio:16/9}
.platzhalter small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-zart)}
.platzhalter strong{font-weight:600;font-size:15px;color:#fff}

/* Haeufige Fragen */
.fragen{max-width:820px}
.fragen .frage:last-child{border-bottom:1px solid var(--linie)}
.abschnitt-dunkel .frage{border-color:var(--stahl-linie)}
.abschnitt-dunkel .fragen .frage:last-child{border-bottom-color:var(--stahl-linie)}

/* Anker in Abschnitten: Platz fuer Testband + Kopf */
.abschnitt[id],.karte[id],.abschluss[id]{scroll-margin-top:96px}

@media (max-width:980px){
  .aergernis{grid-template-columns:1fr}
  .rollen{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .rollen{grid-template-columns:1fr}
  .platzhalter.hoch{max-width:100%;aspect-ratio:4/5}
  .blase{max-width:100%}
}

/* ===== BEWEGUNG LOESUNGEN (23.10.2026) — nur unter html.bewegt, nie bei html.ruhig ===== */
/* Abschnitte: Rotationen und seitliche Einblendungen duerfen nie eine Querrolle erzeugen */
body.loesungen .abschnitt,body.loesungen .abschluss{overflow-x:clip}
body.loesungen main{overflow-x:clip}

/* Kopf: wandernder Glanz (echtes Element statt ::before, damit data-parallax greift) */
body.loesungen .kopfbereich::before{display:none}
.kopfbereich>.glanz{position:absolute;right:-18vw;top:-12vw;width:54vw;height:54vw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(249,115,22,.26),rgba(249,115,22,.08) 45%,transparent 66%)}
@media (max-width:600px){.kopfbereich>.glanz{right:-34vw;top:-26vw;width:92vw;height:92vw}}

/* Faecher (loesungen.html): Branchenkarten kommen gestaffelt von unten, leicht gedreht wie Karten aus einem Faecher;
   auf dem Handy abwechselnd mit Versatz von links und rechts */
.bewegt:not(.ruhig) .faecher>.auf-links{transform:translateY(46px) rotate(-2.5deg) scale(.97);transform-origin:50% 130%}
.bewegt:not(.ruhig) .faecher>.auf-rechts{transform:translateY(46px) rotate(2.5deg) scale(.97);transform-origin:50% 130%}
.bewegt:not(.ruhig) .faecher>.da.auf-links,.bewegt:not(.ruhig) .faecher>.da.auf-rechts{transform:none;opacity:1}
@media (max-width:600px){
  .bewegt:not(.ruhig) .faecher>.auf-links{transform:translate(-30px,24px) rotate(-1.5deg)}
  .bewegt:not(.ruhig) .faecher>.auf-rechts{transform:translate(30px,24px) rotate(1.5deg)}
}

/* Akte (Branchenseiten): Karten kippen beim Einblenden leicht aus der Tiefe nach vorn */
.bewegt:not(.ruhig) .staffel.auf-akte>*{transform:perspective(900px) rotateX(8deg) translateY(26px);transform-origin:50% 100%}
.bewegt:not(.ruhig) .staffel.auf-akte.da>*{transform:none}
/* Nach dem Einblenden: Link-Karten heben sich beim Zeigen wieder (eigenkern.css-Regel wuerde sonst ueberdeckt) */
.bewegt:not(.ruhig) .staffel.da>.karte.link:hover,.bewegt:not(.ruhig) .faecher>.da.karte.link:hover{transform:translateY(-2px)}

/* Fragen: Antwort klappt weich auf (grid-template-rows 0fr -> 1fr), Zeichen dreht sich von + nach x */
.frage summary::after{display:inline-block;transition:transform .35s ease}
.bewegt:not(.ruhig) .frage[open] summary::after{content:"+"}
.bewegt:not(.ruhig) .frage.offen summary::after{transform:rotate(45deg)}
.bewegt:not(.ruhig) .frage .antwort{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.bewegt:not(.ruhig) .frage .antwort>div{overflow:hidden;min-height:0;opacity:0;transition:opacity .3s ease}
.bewegt:not(.ruhig) .frage.offen .antwort{grid-template-rows:1fr}
.bewegt:not(.ruhig) .frage.offen .antwort>div{opacity:1;transition-delay:.1s}

/* Mikro-Details */
.knopf:active{transform:scale(.98)}
.karte .ikone{transition:stroke .25s ease,transform .25s ease}
.karte:hover .ikone{stroke:var(--orange-hell);transform:translateY(-2px)}
.dialog{transition:box-shadow .3s ease}
.dialog:hover{box-shadow:0 30px 70px rgba(14,17,22,.26)}

/* Reduzierte Bewegung: alles aus */
.ruhig .frage summary::after,.ruhig .karte .ikone,.ruhig .knopf,.ruhig .dialog{transition:none}