/* =========================================================
   Unterseiten Finanzamt – baut auf style.css auf
   ========================================================= */

/* ---------- Kopfbereich ---------- */
.subhero {
  min-height: max(min(88svh, 1120px), 700px); /* gleiche Höhe auf allen Unterseiten */
  align-items: flex-end;
  padding: calc(var(--header-h) + 48px) 0 clamp(56px, 7vw, 96px);
  --text-col: min(max(640px, 30vw), 52vw);  /* wächst auf großen Screens mit */
  --max: max(1320px, 84vw);                  /* Bühne zentriert und prozentual zur Bildschirmbreite */
}
.subhero::after {
  background: linear-gradient(90deg, rgba(22,39,64,.95) 0%, rgba(22,39,64,.88) 40%, rgba(22,39,64,.4) 58%, rgba(22,39,64,0) 72%);
}
.subhero__content { position: relative; }
.subhero__eyebrow { font-weight: 700; color: var(--yellow); font-size: var(--eyebrow); line-height: 1.2; margin-bottom: .7rem; opacity: 0; animation: fadeIn .8s var(--ease) .1s forwards; }
.subhero__title {
  max-width: var(--text-col);
  font-size: clamp(2.6rem, min(5.6vw, 10vh), 7.2rem); line-height: .98; font-weight: 700; letter-spacing: -.03em;
}
/* lange Titel (Schnuppertag & Praktikum …) etwas kleiner, damit alle Kopfbereiche gleich hoch bleiben */
.subhero__title--long { font-size: clamp(2.4rem, min(4.7vw, 8.4vh), 6rem); }
@media (max-width: 360px) { .subhero__title--long { font-size: 2.1rem; } } /* „Landesoberkasse“ passt auch bei 320 px in eine Zeile */
/* Wörter kippen einzeln von unten ins Bild */
.subhero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.subhero__title .w > span { display: inline-block; transform: translateY(110%) rotate(6deg); transform-origin: left bottom; animation: wordUp 1.1s var(--ease) forwards; animation-delay: calc(.2s + var(--wi, 0) * .08s); }
@keyframes wordUp { to { transform: none; } }
.subhero__lead { max-width: min(34em, var(--text-col)); margin-top: 1.5rem; font-size: clamp(1rem, 1.2vw, 1.45rem); line-height: 1.65; opacity: 0; animation: fadeUp 1s var(--ease) .7s forwards; }
.subhero__ctas { margin-top: 2rem; opacity: 0; animation: fadeUp 1s var(--ease) .85s forwards; }

.subhero__person {
  position: absolute; z-index: -1; bottom: 0; right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  height: min(86%, 1000px); opacity: 0; transform: translateY(10%);
  animation: peopleIn 1.6s var(--ease) .45s forwards;
}
.subhero__person img { will-change: transform; height: 100%; width: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.25)); }
.sub--faq .subhero__person { height: min(80%, 900px, 36vw); }
.sub--faq .subhero__lead { max-width: min(23em, var(--text-col)); } /* Gruppenfoto ist breit: Text bricht früher um */

@media (max-width: 1024px) {
  .subhero { flex-direction: column; align-items: stretch; padding-bottom: 0; --text-col: 640px; }
  .subhero::after { background: linear-gradient(180deg, rgba(22,39,64,.94) 0%, rgba(22,39,64,.88) 55%, rgba(22,39,64,.2) 85%, rgba(22,39,64,0) 100%); }
  .subhero__person { position: relative; right: auto; order: 2; height: auto; width: min(360px, 70%); margin: 40px auto 0; }
  .subhero__person img { width: 100%; height: auto; }
  .sub--faq .subhero__person { width: min(520px, 100%); height: auto; }
}

/* ---------- Unterrubrik-Leiste: gelber Pfeil gleitet zum aktiven Punkt ---------- */
.subnav {
  position: sticky; top: var(--subnav-top, 0px); z-index: 40; overflow-x: clip;
  background: var(--blue-3); color: var(--white);
  border-top: 1px solid var(--line-light);
  transition: top .6s var(--ease), box-shadow .4s var(--ease);
}
.subnav.is-stuck { box-shadow: 0 10px 30px rgba(10, 20, 40, .28); }
.subnav__sentinel { display: block; height: 1px; margin-bottom: -1px; }
.subnav__list { display: flex; align-items: center; gap: clamp(34px, 3vw, 48px); max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list { position: relative; z-index: 1; } /* Wörter liegen über dem gelben Pfeil */
.subnav__list::after { content: ""; flex: 0 0 max(var(--gutter), 24px); align-self: stretch; } /* Platz hinter dem letzten Punkt, damit die Pfeilspitze beim Scrollen nicht abgeschnitten wird */
.subnav::before, .subnav::after { /* Verlauf am Rand: „hier geht es weiter“ – liegt über den Wörtern, ohne sie umzufärben */
  content: ""; position: absolute; top: 0; bottom: 0; width: 44px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
}
.subnav::before { left: 0; background: linear-gradient(90deg, var(--blue-3), rgba(22, 39, 64, 0)); }
.subnav::after { right: 0; background: linear-gradient(270deg, var(--blue-3), rgba(22, 39, 64, 0)); }
.subnav.has-more-l::before, .subnav.has-more-r::after { opacity: 1; }
html[data-contrast="high"] .subnav::before, html[data-contrast="high"] .subnav::after { display: none; }
.subnav__list { padding-left: max(var(--gutter), 30px); } /* Platz für die Kerbe des Pfeils vor dem ersten Eintrag */
.subnav__list a {
  display: block; position: relative; white-space: nowrap;
  padding: 24px 4px 26px; font-weight: 700; font-size: 1.05rem; text-decoration: none; color: rgba(255, 255, 255, .78);
  transition: color .25s;
}
.subnav__list a:hover, .subnav__list a:focus-visible, .subnav__list a[aria-current="page"] { color: var(--white); }
@media (max-width: 600px) {
  .subnav__list { gap: 32px; }
  .subnav__list a { font-size: .9rem; padding: 18px 0 20px; }
}
.subnav__list li { position: relative; z-index: 1; }
.subnav__list a.is-lit { color: var(--black); }
.subnav__marker { /* gelber Pfeil hinter dem Wort – Form wie die Pfeile auf der Startseite */
  position: absolute; left: 0; top: 0; z-index: 0; height: var(--mh, 0px); width: var(--mw, 0px);
  background: var(--yellow);
  clip-path: polygon(0 0, calc(100% - var(--mt, 16px)) 0, 100% 50%, calc(100% - var(--mt, 16px)) 100%, 0 100%, var(--mt, 16px) 50%); /* Spitze vorne, Kerbe hinten */
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform .45s var(--ease), width .45s var(--ease);
  pointer-events: none;
}

/* ---------- Fakten: Kachel-Raster (Bento) ---------- */
.facts { padding: var(--section) 0 0; }
.bento {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0;
  grid-template-areas: "pay pay dur dur" "status school start start";
}
.tile--pay { grid-area: pay; } .tile--dur { grid-area: dur; } .tile--status { grid-area: status; }
.tile--school { grid-area: school; } .tile--start { grid-area: start; }
.tile {
  position: relative; isolation: isolate; overflow: hidden; min-height: clamp(180px, 16vw, 230px);
  padding: clamp(22px, 2.4vw, 36px); display: flex; flex-direction: column;
  background: var(--mist);
  opacity: 0; transform: translateY(40px);
  clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
  transition: opacity .6s var(--ease), transform 1s var(--ease), clip-path 1.1s var(--ease-io), box-shadow .5s var(--ease);
  transition-delay: calc(var(--ti, 0) * .12s);
}
.facts.is-in .tile { opacity: 1; transform: none; clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%); }
.facts.is-in .tile:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(22, 39, 64, .16); transition-delay: 0s; }
.tile dt { font-size: clamp(1.1rem, 1.35vw, 1.35rem); line-height: 1.25; font-weight: 700; color: var(--ink); margin-bottom: .6rem; letter-spacing: -.01em; }
.tile dd { margin: 0; font-size: clamp(1.3rem, 1.9vw, 1.9rem); line-height: 1.12; font-weight: 700; letter-spacing: -.015em; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.tile dt:has(.tile__icon) { padding-right: 64px; }
.tile__icon { position: absolute; top: clamp(18px, 2vw, 30px); right: clamp(18px, 2vw, 30px); display: block; width: 46px; height: 46px; object-fit: contain;
  transform: scale(.6) rotate(-12deg); opacity: 0; transition: transform .9s cubic-bezier(.3, 1.5, .5, 1), opacity .5s; transition-delay: calc(.4s + var(--ti, 0) * .12s); }
.tile__icon[src*="schloss"] { width: 58px; height: 58px; top: clamp(12px, 1.6vw, 24px); right: clamp(12px, 1.6vw, 24px); }
.tile__icon[src*="schule"], .tile__icon[src*="universitaet"] { width: 62px; height: 62px; top: clamp(10px, 1.4vw, 22px); right: clamp(12px, 1.6vw, 24px); }
.facts.is-in .tile__icon { transform: none; opacity: 1; }
.tile:hover .tile__icon { transform: rotate(-8deg) scale(1.06); transition-delay: 0s; }

/* Vergütung: gelb, großes Zählwerk, Geld-Icon als Wasserzeichen */
.tile--pay { background: var(--yellow); }
.tile--pay dt { color: var(--black); }
.tile--pay dd { font-size: clamp(1.5rem, 2.4vw, 2.4rem); }
.tile--pay dd .num { font-size: 2em; }
.tile__bg { position: absolute; z-index: -1; right: -2%; bottom: -12%; width: 46%; max-width: 280px; height: auto; opacity: .1; transform: rotate(-12deg) scale(.8); transition: transform 1.4s var(--ease) .3s; }
.facts.is-in .tile__bg { transform: rotate(-6deg); }
.tile:hover .tile__bg { transform: rotate(0deg) scale(1.05); }
.tile__bg--soft { opacity: .08; width: 88%; max-width: 250px; right: -14%; bottom: -18%; }
@media (max-width: 600px) { .tile__bg--soft { width: 46%; right: -2%; bottom: -12%; } }
.tile__bg--light { filter: brightness(0) invert(1); opacity: .12; bottom: -10%; }

/* Dauer: dunkelblau, je Jahr ein Pfeil, der sich gelb füllt */
.tile--dur { background: var(--blue-3); color: var(--white); }
.tile--dur dt { color: var(--white); }
.tile--dur dd { font-size: clamp(1.5rem, 2.4vw, 2.4rem); }
.tile--dur dd .num { font-size: 2em; color: var(--yellow); }
.years { display: flex; gap: 6px; margin-top: 18px; font-size: 1rem; }
.years span {
  position: relative; flex: 1; max-width: 120px; height: 26px; background: rgba(255,255,255,.14);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}
.years span:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.years span::after { content: ""; position: absolute; inset: 0; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); transition-delay: calc(1.1s + var(--yi) * .35s); }
.facts.is-in .years span::after { transform: none; }

/* Beginn: Kalenderblätter klappen nacheinander auf */
.tile--start { background: var(--blue-2); color: var(--white); }
.tile--start dt { color: var(--white); }
.cal { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 14px; padding-bottom: 12px; perspective: 600px; }
.sheet {
  position: relative; display: flex; flex-direction: column; min-width: clamp(140px, 12vw, 170px); background: var(--white); color: var(--black); text-align: center;
  box-shadow: 6px 6px 0 rgba(255,255,255,.35), 12px 12px 0 rgba(255,255,255,.15), 0 18px 30px rgba(0,0,0,.22); transform-origin: top; transform: rotateX(-95deg); opacity: 0;
  transition: transform .9s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; transition-delay: calc(.8s + var(--si) * .25s);
}
.facts.is-in .sheet { transform: none; opacity: 1; }
.sheet__month { background: var(--yellow); padding: .45em .8em; font-size: 1rem; font-weight: 700; }
.sheet__day { padding: .15em .5em .25em; font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }

/* Wörter steigen auf / Zählwerk */
.fw { display: inline-block; max-width: 100%; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.fw > span { display: inline-block; max-width: 100%; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; transform: translateY(110%); transition: transform .9s var(--ease); transition-delay: calc(.5s + var(--ti, 0) * .12s + var(--wi, 0) * .06s); }
.facts.is-in .fw > span { transform: none; }
.tile dd .num { display: inline-flex; line-height: 1; letter-spacing: -.03em; vertical-align: -.08em; }
.odo { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; user-select: none; }
.odo__strip { display: flex; flex-direction: column; transition: transform 1.8s cubic-bezier(.16, .84, .24, 1); transition-delay: calc(.55s + var(--ti, 0) * .12s + var(--di, 0) * .09s); }
.odo__strip span { display: block; height: 1em; }
.facts.is-in .odo__strip { transform: translateY(calc(var(--to) * -1em)); }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "pay pay" "dur dur" "status school" "start start"; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "pay" "dur" "status" "school" "start"; }
  .tile { min-height: 0; }
}

/* ---------- Ablauf: proportionaler Zeitstrahl + Liste, Läufer zeigt die aktuelle Phase ---------- */
.tl { padding: var(--section) 0; }
.facts + .tl { padding-top: var(--section); }
.tl__title { margin-bottom: clamp(28px, 3vw, 44px); }
.tl__sticky { position: sticky; top: calc(var(--subnav-top, 0px) + var(--subnav-h, 74px) - 1px); z-index: 5; background: var(--paper); padding: 16px 0 20px; transition: top .6s var(--ease); }
/* Zeitstrahl: jede Phase ein Pfeil, die Pfeile greifen ineinander */
.tl__track { position: relative; --tip: 22px; }
.tl__bar { display: flex; height: clamp(60px, 7vw, 88px); margin: 0; padding: 0; list-style: none; }
.tl__seg {
  flex: var(--m) 1 0; min-width: 0; position: relative; display: flex; align-items: center;
  padding: 0 calc(var(--tip) + 4px) 0 calc(var(--tip) + 10px); margin-right: calc(var(--tip) * -1 + 5px);
  min-width: max-content; /* kurze Phasen: Pfeil mindestens so lang wie „2 Monate“ */
  font-weight: 700; font-size: clamp(.9rem, 1.2vw, 1.15rem); white-space: nowrap; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--tip) 50%);
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease);
}
.tl__seg:first-child { padding-left: 14px; clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); }
.tl__seg:last-child { margin-right: 0; }
.tl__seg--theorie { background: var(--yellow); color: var(--black); }
.tl__seg--praxis { background: var(--blue-2); color: var(--white); }
.tl.is-in .tl__seg { transform: none; }
.tl.is-in .tl__seg:nth-child(2) { transition-delay: .08s; } .tl.is-in .tl__seg:nth-child(3) { transition-delay: .16s; }
.tl.is-in .tl__seg:nth-child(4) { transition-delay: .24s; } .tl.is-in .tl__seg:nth-child(5) { transition-delay: .32s; }
.tl.is-in .tl__seg:nth-child(6) { transition-delay: .4s; } .tl.is-in .tl__seg:nth-child(7) { transition-delay: .48s; }
.tl.is-in .tl__seg:nth-child(8) { transition-delay: .56s; }
/* Grundebene blass, Füll-Ebene in voller Farbe – wird mit Pfeilspitze bis zum Lesefortschritt aufgedeckt */
.tl__bar:not(.tl__bar--fill) .tl__seg { filter: saturate(.35) brightness(1.35); opacity: .5; }
.tl__bar--fill { position: absolute; inset: 0; pointer-events: none;
  /* Spitze mit demselben Winkel wie die Segmente; bei 100 % liegt sie hinter dem Rand → letzte Phase voll gedeckt */
  --x: calc(var(--p, 0) * (100% + var(--tip)));
  clip-path: polygon(0 0, max(0px, calc(var(--x) - var(--tip))) 0, var(--x) 50%, max(0px, calc(var(--x) - var(--tip))) 100%, 0 100%);
}
.tl__legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; font-size: .88rem; color: var(--text-2); }
.tl__leg { display: inline-flex; align-items: center; gap: .6em; }
.tl__leg::before { content: ""; width: 18px; height: 12px; }
.tl__leg--theorie::before { background: var(--yellow); outline: 1px solid rgba(0,0,0,.15); }
.tl__leg--praxis::before { background: var(--blue-2); }

.tl__list { margin: 12px 0 0; padding: 0; list-style: none; }
.tl__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 24px;
  padding: clamp(24px, 3vw, 40px) 0 clamp(24px, 3vw, 40px) 24px; border-bottom: 1px solid var(--line);
  position: relative; transition: background-color .5s var(--ease);
}
.tl__row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
.tl__row--theorie::before { background: var(--yellow); }
.tl__row--praxis::before { background: var(--blue-2); }
.tl__row.is-active::before { transform: none; }
.tl__months { font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.tl__info h3 { font-size: clamp(1.25rem, 1.7vw, 1.6rem); margin-bottom: .3em; }
.tl__info p { color: var(--text-2); }
.tl__exam {
  display: inline-flex; align-items: center; gap: .6em; margin-top: .9rem; padding: .45em .9em .45em .7em;
  background: var(--black); color: var(--yellow) !important; font-weight: 700; font-size: .9rem;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); padding-right: 1.6em;
}
.tl__exam::before { content: "✓"; }
@media (max-width: 1200px) and (min-width: 701px) {
  /* schmalere Bildschirme: Angabe darf zweizeilig werden statt abgeschnitten */
  .tl__seg { min-width: calc(var(--tip) * 2 + 4em); white-space: normal; line-height: 1.1; font-size: .8rem; }
  .tl__seg > span { display: block; }
}
@media (max-width: 700px) {
  .tl__track { --tip: 10px; }
  .tl__seg { min-width: calc(var(--tip) * 2 + 1.7em); padding: 0 var(--tip) 0 calc(var(--tip) + 2px); justify-content: center; font-size: .8rem; letter-spacing: -.02em; }
  .tl__seg:first-child { padding-left: 2px; }
  .tl__bar { height: 44px; }
  .tl__unit { display: none; }
}
@media (max-width: 370px) {
  .tl__seg { min-width: calc(var(--tip) * 2 + 1.5em); font-size: .7rem; }
  .tl__row { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Praxis / Theorie / Danach ---------- */
.tabs { padding: var(--section) 0; background: var(--mist); }
.tabs__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.tabs__list { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.tabs__list button {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 22px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; line-height: 1.1; white-space: nowrap;
  font-size: clamp(1.2rem, 1.7vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; color: #5b6270;
  transition: color .4s var(--ease), padding .5s var(--ease);
}
.tabs__list button::after { content: "→"; font-size: .7em; opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .5s var(--ease); }
.tabs__list button:hover { color: var(--ink); }
.tabs__list button[aria-selected="true"] { color: var(--ink); padding-left: 18px; }
.tabs__list button[aria-selected="true"]::after { opacity: 1; transform: none; }
.tabs__list button::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 6px; background: var(--yellow); transform: scaleY(0); transition: transform .5s var(--ease); }
.tabs__list button[aria-selected="true"]::before { transform: none; }

.tabs__panels { position: relative; }
/* Foto groß im Breitformat, Text als Karte versetzt darüber */
.tabs__panel { position: relative; display: block; }
.tabs__panel[hidden] { display: none; }
.tabs__media { overflow: hidden; aspect-ratio: 16 / 9; background: var(--blue-2); }
.tabs__media img { width: 100%; height: 100%; object-fit: cover; }
.tabs__text {
  position: relative; z-index: 1; width: min(640px, 88%); margin: clamp(-120px, -9vw, -60px) 0 0 auto;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 44px); background: var(--paper);
  border-left: 6px solid var(--yellow); box-shadow: 0 24px 60px rgba(22, 39, 64, .14);
}
.tabs__text p + p { margin-top: 1rem; }
.tabs__text a { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; transition: background-color .15s; }
.tabs__text a:hover, .tabs__text a:focus-visible { background: var(--yellow); color: var(--black); text-decoration-color: var(--black); }
.tabs__text p { font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.7; }
/* Wechsel: Bild wird als Pfeil aufgezogen, Text gleitet nach */
.tabs__panel.is-entering .tabs__media { animation: arrowWipe 1s var(--ease-io) both; }
.tabs__panel.is-entering .tabs__media img { animation: zoomOut 1.4s var(--ease) both; }
.tabs__panel.is-entering .tabs__text { animation: cardIn 1s var(--ease) .35s both; }
@keyframes cardIn { from { opacity: 0; transform: translate(40px, 30px); } to { opacity: 1; transform: none; } }
@keyframes arrowWipe {
  from { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%); }
}
@keyframes zoomOut { from { transform: scale(1.15); } to { transform: none; } }
@media (max-width: 900px) {
  .tabs__grid { grid-template-columns: 1fr; }
  .tabs__list { flex-direction: row; overflow-x: auto; border-top: 0; border-bottom: 2px solid var(--ink); scrollbar-width: none; }
  .tabs__list button { border: 0; padding: 12px 16px 12px 0; font-size: 1.2rem; white-space: nowrap; }
  .tabs__list button[aria-selected="true"] { padding-left: 0; }
  .tabs__list button::before { left: 0; right: 16px; top: auto; bottom: -2px; width: auto; height: 6px; transform: scaleX(0); transform-origin: left; }
  .tabs__list button[aria-selected="true"]::before { transform: none; }
  .tabs__list button::after { display: none; }
  .tabs__text { width: calc(100% - 16px); margin-top: -40px; }
}

/* ---------- Wohnen + Foto-Laufband ---------- */
.living { padding: var(--section) 0; overflow: hidden; }
.living__label { font-size: var(--eyebrow); line-height: 1.2; font-weight: 700; color: var(--blue-2); margin-bottom: .7rem; }
.living__title { max-width: 20ch; margin-bottom: clamp(36px, 4vw, 60px); }
.living__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
/* Icons: dunkelblau, luftig, mit versetztem gelben Akzent-Block */
.living__item { padding-top: 22px; border-top: 2px solid var(--ink); }
.living__icon { position: relative; display: block; width: 76px; height: 64px; margin-bottom: 22px; }
.living__icon::before {
  content: ""; position: absolute; left: 22px; top: 18px; width: 52px; height: 44px; background: var(--yellow);
  transform: translate(-18px, -12px) scale(.4); opacity: 0; transition: transform .9s var(--ease), opacity .5s;
  transition-delay: calc(var(--d, 0s) + .2s);
}
.living__item.is-in .living__icon::before { transform: none; opacity: 1; }
.living__icon img { position: relative; width: 60px; height: 52px; object-fit: contain; object-position: left bottom; transition: transform .6s var(--ease); }
.living__item:hover .living__icon img { transform: translate(-4px, -4px); }
.living__item:hover .living__icon::before { transform: translate(4px, 4px); }
.living__item p { color: var(--text-2); }
@media (max-width: 900px) { .living__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .living__grid { grid-template-columns: 1fr; } }

/* Imagefilm: auf Weiß, schlanke gelbe Linie */
.film { position: relative; margin: clamp(56px, 7vw, 100px) 0 0; }
.film__frame { position: relative; max-width: 1080px; margin: 0 auto; }
.film__frame::after { /* schlanke gelbe Linie unter dem Bild */
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .6s;
}
.film.is-in .film__frame::after { transform: none; }
.film__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-2); }
.js .film[data-reveal] { transform: none; }
.js .film[data-reveal] .film__media { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%); transition: clip-path 1.2s var(--ease-io); }
.js .film[data-reveal].is-in .film__media { clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%); }
.film__poster { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.film__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(22,39,64,.6) 0%, rgba(22,39,64,.15) 45%, rgba(22,39,64,.05) 100%); }
.film:hover .film__poster { transform: scale(1.02); }
.film__play { /* klarer Play-Button: gelbes Quadrat mit schwarzem Dreieck, pulsierender Rahmen */
  position: absolute; left: 50%; top: 50%; z-index: 2; width: clamp(72px, 6.4vw, 96px); aspect-ratio: 1;
  transform: translate(-50%, -50%); background: var(--yellow); box-shadow: 0 14px 34px rgba(0,0,0,.3);
  transition: transform .45s var(--ease), background-color .3s;
}
.film__play::before { /* Dreieck */
  content: ""; position: absolute; left: 50%; top: 50%; width: 34%; height: 40%; background: var(--black);
  clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translate(-38%, -50%);
}
.film__play::after { /* Puls-Rahmen */
  content: ""; position: absolute; inset: 0; border: 3px solid var(--yellow); animation: playPulse 2.2s var(--ease) infinite;
}
@keyframes playPulse { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
.film:hover .film__play, .film__btn:focus-visible .film__play { transform: translate(-50%, -50%) scale(1.1); background: var(--white); }
.film:hover .film__play::after { border-color: var(--white); }
.film__dur { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: .45em; padding: .35em .7em;
  background: var(--black); color: var(--yellow); font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.film__dur::before { content: ""; width: .6em; height: .7em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (prefers-reduced-motion: reduce) { .film__play::after { animation: none; opacity: 0; } }
.film__label { position: absolute; left: 20px; bottom: 16px; z-index: 2; color: var(--white); font-weight: 700; font-size: .85rem; opacity: .9; }
.gallery { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 12px; }
.marquee-row { display: flex; gap: 12px; width: max-content; margin: 0; padding: 0; list-style: none; animation: galA 70s linear infinite; }
.marquee-row--b { animation-name: galB; animation-duration: 80s; }
.marquee-row li { width: clamp(220px, 24vw, 480px); aspect-ratio: 3 / 2; overflow: hidden; flex: none; }
.marquee-row img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s; filter: saturate(.9); }
.marquee-row li:hover img { transform: scale(1.06); filter: none; }
.gallery:hover .marquee-row, .gallery:focus-within .marquee-row { animation-play-state: paused; }
@keyframes galA { to { transform: translateX(-50%); } }
@keyframes galB { from { transform: translateX(-50%); } to { transform: none; } }

/* ---------- Ausbildungsorte + Karte (hell, Karte freigestellt) ---------- */
.places { padding: var(--section) 0; background: var(--mist); }
.places .title { margin-bottom: 1rem; }
.places__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.places__sub { font-size: clamp(1.2rem, 1.6vw, 1.5rem); color: var(--blue-2); margin-bottom: 1rem; }
.places__text p { max-width: 32em; color: var(--text-2); }
.places__text p strong { color: var(--ink); }
.places__picker { margin-top: 2rem; display: grid; gap: 14px; justify-items: start; }
.places__picker select {
  width: min(100%, 420px); appearance: none; -webkit-appearance: none;
  padding: 16px 48px 16px 18px; font: inherit; font-weight: 700; color: var(--black);
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 16px center / 18px;
  border: 0; border-radius: 0; cursor: pointer;
}
.places__go[hidden] { display: none; }
.places__info { min-height: 1.6em; font-weight: 700; font-size: 1.15rem; }
.map { position: relative; width: 100%; max-width: 780px; justify-self: center; }
.map img { width: 100%; height: auto; }
.map__canvas { position: relative; }
/* Standorte: Punkt exakt auf der Koordinate, Beschriftung direkt daneben (links/rechts/oben/unten) */
.map__place { position: absolute; width: 0; height: 0; text-decoration: none; color: var(--white); }
.map__dot {
  position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--black); box-shadow: 0 0 0 3px var(--yellow), 0 0 0 5px var(--black);
}
.map__name {
  position: absolute; padding: .4em .65em; background: var(--black); font-weight: 700; line-height: 1.25;
  font-size: clamp(.72rem, .9vw, .9rem); white-space: nowrap; transition: background-color .3s;
}
/* rechts */
.map__place--right .map__name { left: 18px; top: 0; transform: translateY(-50%); }
/* links */
.map__place--left .map__name { right: 18px; top: 0; transform: translateY(-50%); text-align: right; }
/* oben rechts */
.map__place--up .map__name { left: 10px; bottom: 14px; }
/* unten rechts */
.map__place--down .map__name { left: 10px; top: 14px; }
.map__name { box-shadow: 0 0 0 2px var(--black); transition: background-color .3s, color .3s, transform .4s var(--ease); }
.map__dot { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.map__place:hover .map__name, .map__place:focus-visible .map__name { background: var(--white); color: var(--black); }
.map__place:hover .map__dot, .map__place:focus-visible .map__dot { transform: scale(1.35); }
.map__place--right:hover .map__name, .map__place--up:hover .map__name, .map__place--down:hover .map__name { transform: translateX(4px); }
.map__place--right:hover .map__name { transform: translate(4px, -50%); }
.map__place--left:hover .map__name { transform: translate(-4px, -50%); }
.map__place:focus-visible { outline: none; }
.map__place:focus-visible .map__name { outline: 3px solid var(--yellow); outline-offset: 2px; }
.map.is-in .map__place { animation: placeIn .7s var(--ease) both; }
.map.is-in .map__place:nth-of-type(2) { animation-delay: .12s; } .map.is-in .map__place:nth-of-type(3) { animation-delay: .24s; } .map.is-in .map__place:nth-of-type(4) { animation-delay: .36s; }
@keyframes placeIn { from { opacity: 0; } to { opacity: 1; } }
.map__pin {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; display: none; z-index: 2;
  background: var(--blue-2); border: 4px solid var(--white); border-radius: 50%;
}
.map__pin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--blue-2); animation: pinPulse 1.8s var(--ease) infinite; }
.map__pin.is-dropping { animation: pinDrop .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.map__pin-name {
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-6px, -50%); opacity: 0;
  padding: .4em .7em; background: var(--blue-2); color: var(--white); font-weight: 700; line-height: 1.2;
  font-size: clamp(.8rem, 1vw, 1rem); white-space: nowrap; box-shadow: 0 0 0 2px var(--white), 0 8px 18px rgba(0,0,0,.2);
  animation: pinName .5s var(--ease) .45s forwards;
}
.map__pin.is-flip .map__pin-name { left: auto; right: calc(100% + 12px); transform: translate(6px, -50%); }
@keyframes pinName { to { opacity: 1; transform: translate(0, -50%); } }
@keyframes pinDrop { from { transform: translateY(-60px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pinPulse { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(3); opacity: 0; } }
@media (max-width: 900px) { .places__grid { grid-template-columns: 1fr; } }
.map__legend { display: none; }
/* Handy: nummerierte Punkte + Legende unter der Karte */
@media (max-width: 600px) {
  .map__name { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .map__dot { left: -12px; top: -12px; width: 24px; height: 24px; display: grid; place-items: center; }
  .map__dot::after { content: attr(data-n); color: var(--yellow); font-weight: 700; font-size: .78rem; }
  .map__legend { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font-weight: 700; font-size: .92rem; }
  .map__legend li { display: flex; gap: 10px; align-items: baseline; }
  .map__legend span { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--black); color: var(--yellow); font-size: .78rem; }
  .map__place:focus-visible .map__dot { outline: 3px solid var(--black); outline-offset: 3px; }
}

/* ---------- Abschluss-Band ---------- */
.ctaband { background: var(--yellow); padding: calc(var(--section) * .7) 0; }
.ctaband__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.ctaband__text { font-size: clamp(1.8rem, 3.6vw, 3.2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }

/* ---------- Schnuppertag: Tipp als gelber Pfeil ---------- */
.tip { padding: var(--section) 0 0; }
.tip__arrow {
  position: relative; isolation: isolate; max-width: 980px;
  padding: clamp(28px, 3vw, 44px) clamp(80px, 9vw, 140px) clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px);
}
.tip__arrow::before { /* gelbe Pfeilfläche fährt von links auf (eigene Ebene, damit die Scroll-Erkennung greift) */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yellow);
  clip-path: polygon(0 0, calc(100% - 70px) 0, 100% 50%, calc(100% - 70px) 100%, 0 100%);
}
.js .tip__arrow[data-reveal] { transform: none; }
.js .tip__arrow[data-reveal]::before { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%); transition: clip-path 1.2s var(--ease-io); }
.js .tip__arrow[data-reveal].is-in::before { clip-path: polygon(0 0, calc(100% - 70px) 0, 100% 50%, calc(100% - 70px) 100%, 0 100%); }
.tip__label { font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 2rem); margin-bottom: .4rem; }
.tip__text { font-size: clamp(1.05rem, 1.4vw, 1.3rem); max-width: 40em; }

.intern { padding: var(--section) 0; }
.intern__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px clamp(40px, 5vw, 80px); align-items: center; margin-bottom: clamp(56px, 6vw, 96px); }
/* Tipp-Pfeil unter der Einleitung zeigt nach rechts auf das Video */
.intern__intro .tip__arrow { margin-top: clamp(28px, 3vw, 44px); max-width: none; margin-right: calc(clamp(40px, 5vw, 80px) * -1 + 12px);
  padding: clamp(24px, 2.6vw, 36px) clamp(80px, 8vw, 120px) clamp(24px, 2.6vw, 36px) clamp(22px, 2.4vw, 36px); }
.intern__intro .tip__label { font-size: clamp(1.4rem, 2vw, 1.9rem); }
.intern__intro .tip__text { font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.5; }
/* Video (9:16) rechts neben der Einleitung, der Tipp-Pfeil zeigt darauf */
.intern__head { grid-template-columns: minmax(0, 1fr) auto; }
.intern__stage { justify-self: end; }
.intern__stage .film--reel { --reel-max: calc((100svh - 72px - var(--subnav-h, 64px) - 48px) * 9 / 16); /* nie höher als der sichtbare Bildschirm */
  width: min(clamp(320px, 33vw, 470px), var(--reel-max)); }
.intern__head p { margin-top: 1.2rem; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--text-2); }
.intern__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.intern__card { padding: clamp(24px, 2.6vw, 36px); background: var(--mist); border-top: 4px solid var(--ink); }
.intern__icon { width: 48px; height: 48px; object-fit: contain; object-position: left; margin-bottom: 18px; transform: scale(.6) rotate(-12deg); opacity: 0; transition: transform .9s cubic-bezier(.3, 1.5, .5, 1) .2s, opacity .5s .2s; }
.intern__card.is-in .intern__icon { transform: none; opacity: 1; }
.intern__card:hover .intern__icon { transform: rotate(-6deg) translateY(-3px); }
.intern__photo { position: relative; margin: 0; }
.intern__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.intern__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .4s; }
.intern__photo.is-in::after { transform: none; }
.intern__card h3, .intern__card-title { font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.2; margin-bottom: 1rem; }
.intern__card p + p { margin-top: .6rem; }
.intern__who { display: inline-block; padding: .2em .5em; background: var(--yellow); }
.intern__card a { font-weight: 700; }
.checks { display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 34px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 20px; height: 12px; background: var(--ink);
  clip-path: polygon(0 20%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%, 0 80%);
  transform: translateX(-12px); opacity: 0; transition: transform .6s var(--ease), opacity .4s;
}
.intern__card--list.is-in .checks li::before { transform: none; opacity: 1; }
.intern__card--list.is-in .checks li:nth-child(2)::before { transition-delay: .12s; }
.intern__card--list.is-in .checks li:nth-child(3)::before { transition-delay: .24s; }
.intern__card--list.is-in .checks li:nth-child(4)::before { transition-delay: .36s; }
.intern__card--list.is-in .checks li:nth-child(5)::before { transition-delay: .48s; }
@media (max-width: 900px) { .intern__head, .intern__grid { grid-template-columns: 1fr; } }

/* ---------- Anmeldung ---------- */
.signup { padding: var(--section) 0; background: var(--mist); color: var(--ink); scroll-margin-top: 80px; } /* weicher Hintergrund statt Dunkelblau */
.signup .title--light { color: var(--ink); }
.signup__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.signup__text .title { margin-bottom: 1.4rem; }
.signup__text > p + p { margin-top: .9rem; }
.signup__text > p { color: var(--text-2); max-width: 34em; }
.signup__pdf { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line-light); display: grid; gap: 1rem; justify-items: start; }
.signup__hello { font-weight: 700; font-size: 1.3rem; color: var(--yellow); }

.form { background: var(--paper); color: var(--ink); padding: clamp(26px, 4vw, 60px); border-top: 8px solid var(--yellow); box-shadow: 0 24px 60px rgba(22, 39, 64, .08); }
.form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; margin-bottom: 34px; align-items: end; }
.field { position: relative; display: flex; flex-direction: column-reverse; }
.field--select, .field--choices { grid-column: 1 / -1; }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* Falle für Spam-Bots, für Menschen unsichtbar */
.field--full { grid-column: 1 / -1; }
.field--select.field--half { grid-column: auto; } /* Auswahlliste neben einem anderen Feld (Anrede, Staatsangehörigkeit) */
.field label, .field legend { font-size: clamp(.95rem, 1.1vw, 1.05rem); font-weight: 700; margin-bottom: 8px; transition: color .3s; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 60px; padding: 16px 18px; font: inherit; font-size: clamp(1.05rem, 1.2vw, 1.15rem); color: var(--ink);
  background: var(--mist); border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  transition: background-color .3s, border-color .3s;
}
.field select { appearance: none; -webkit-appearance: none; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; padding-right: 44px; text-overflow: ellipsis; } /* Text läuft nicht unter den Pfeil */
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fffde0; border-color: var(--yellow); box-shadow: 0 2px 0 var(--black); }
.field input:focus + label, .field select:focus + label, .field textarea:focus + label { color: var(--blue-2); }
.field input::placeholder, .field textarea::placeholder { color: #7a808a; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #b3261e; }
.field--choices { border: 0; padding: 0; margin: 0; display: block; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; cursor: pointer; max-width: 100%; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-block; padding: .85em 1.3em; font-weight: 700; font-size: 1rem; border: 2px solid var(--ink); transition: background-color .3s, color .3s; }
.choice input:checked + span { background: var(--black); color: var(--yellow); }
.choice input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.form__status { margin-top: 14px; font-weight: 700; min-height: 1.4em; }
.form__status:focus { outline: none; }
.form__status:not(:empty) { padding: 14px 16px; border-left: 6px solid var(--yellow); background: var(--mist); color: var(--ink); }
.form.is-error .form__status { border-left-color: #c62828; }
.form__status a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.form__submit:disabled { opacity: .6; cursor: progress; }
/* Anmeldeformular in Abschnitten: Über Dich · So erreichen wir Dich · Deine Schule · Dein Praktikum */
.form__fields--gruppen { display: block; }
.form__group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 20px; align-items: end; }
.form__group + .form__group { margin-top: clamp(30px, 3.4vw, 44px); padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); } /* passt sich allen Darstellungen an */
.form__legend { grid-column: 1 / -1; float: left; width: 100%; padding: 0; margin-bottom: 4px; display: flex; align-items: center; gap: 12px; font-size: clamp(1.1rem, 1.4vw, 1.3rem); font-weight: 700; letter-spacing: -.01em; }
.form__nr { flex: none; display: grid; place-items: center; width: 32px; height: 32px; background: var(--yellow); color: var(--black); font-size: .95rem; }
.form__group > .span-2 { grid-column: span 2; }
.form__group > .span-3 { grid-column: span 3; }
.form__group > .span-4 { grid-column: span 4; }
.form__group > .span-6 { grid-column: 1 / -1; }
.form__hinweis { margin: 4px 0 0; padding: 14px 16px; border-left: 6px solid var(--yellow); background: var(--mist); font-size: .95rem; line-height: 1.5; color: var(--ink); } /* keine Zusage: vor dem Absenden lesen */
@media (max-width: 560px) {
  .form__group > .span-3, .form__group > .span-6 { grid-column: 1 / -1; }
}
/* Schritte: ein Abschnitt pro Schritt mit Fortschrittsleiste, „Zurück“ und „Weiter“ */
.steps { margin-bottom: clamp(22px, 2.6vw, 32px); }
.steps__count { font-size: .9rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); margin-bottom: 10px; }
.steps__bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.steps__bar li { height: 6px; background: color-mix(in srgb, currentColor 14%, transparent); transition: background-color .4s; }
.steps__bar li.is-done, .steps__bar li.is-current { background: var(--yellow); }
.steps__bar li.is-current { box-shadow: inset 0 -2px 0 var(--black); }
.form--steps .form__group + .form__group { margin-top: 0; padding-top: 0; border-top: 0; }
.form--steps .form__group[hidden] { display: none; }
.form--steps .form__fields { margin-bottom: 30px; }
.form--steps .form__nr { display: none; } /* Nummer steht schon in der Fortschrittsleiste */
.steps__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.steps__nav .btn[hidden] { display: none; }
.steps__nav .btn { margin-left: auto; --hover-bg: var(--black); --hover-fg: var(--yellow); font-size: 1.05rem; padding: 1.2em 2em; }
.steps__back { display: inline-flex; align-items: center; gap: .6em; padding: 1em 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: .92rem; letter-spacing: .05em; text-transform: uppercase; color: inherit; cursor: pointer; border-bottom: 2px solid currentColor; }
.steps__back::before { content: "←"; transition: transform .4s var(--ease); }
.steps__back:hover::before { transform: translateX(-4px); }
.steps__back:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.steps__back[hidden] { display: none; }
@media (min-width: 901px) { .signup__text { position: sticky; top: 120px; } } /* Text bleibt neben dem langen Formular sichtbar */
@media (max-width: 900px) { .signup__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .form__fields { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq { padding: var(--section) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__side { position: sticky; top: calc(var(--subnav-top, 0px) + 90px); }
.faq__title { font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.02em; margin-bottom: 1.2rem; }
.faq__search input {
  width: 100%; padding: 14px 14px 14px 44px; font: inherit; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M15 15l6 6' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat 14px center / 18px;
}
.faq__search input:focus { outline: none; border-color: var(--yellow); box-shadow: 0 2px 0 var(--black); background-color: #fffde0; }
.faq__nav { position: relative; margin-top: 1.4rem; }
.faq__nav a { display: block; padding: 9px 0 9px 22px; font-weight: 700; text-decoration: none; color: var(--text-2); transition: color .3s, padding .4s var(--ease); }
.faq__nav a:hover, .faq__nav a.is-active { color: var(--ink); }
.faq__nav a.is-active { padding-left: 28px; }
.faq__nav a.is-dim { opacity: .35; }
.faq__marker {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; background: var(--ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%); outline: 0;
  transform: translateY(var(--fy, 0px)); transition: transform .6s var(--ease), opacity .3s; opacity: 0;
}
.faq__marker.is-on { opacity: 1; filter: drop-shadow(0 0 0 #000); }

.faq__group { scroll-margin-top: calc(var(--subnav-top, 0px) + 90px); }
.faq__group + .faq__group { margin-top: clamp(40px, 5vw, 64px); }
/* Kategorie: Icon in Schrifthöhe direkt vor dem Titel */
.faq__cat { display: flex; align-items: center; gap: .45em; font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -.015em; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.faq__icon { flex: none; width: 1.3em; height: 1.3em; object-fit: contain; transition: transform .5s var(--ease); }
.faq__icon[src*="schule"], .faq__icon[src*="universitaet"] { width: 1.8em; height: 1.3em; margin-inline: -.1em; } /* breites Motiv optisch angleichen */
.faq__group:hover .faq__icon { transform: rotate(-8deg) scale(1.06); }
.qa { border-bottom: 1px solid var(--line); }
.qa__q button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 0; border: 0; background: none; text-align: left; font: inherit; font-weight: 700; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.35;
  transition: padding .45s var(--ease), color .3s;
}
.qa__q button:hover { padding-left: 10px; }
.qa__icon { position: relative; flex: none; width: 36px; height: 36px; border: 2px solid var(--ink); transition: background-color .35s, transform .5s var(--ease); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: currentColor; transition: transform .5s var(--ease); }
.qa__icon::after { transform: rotate(90deg); }
.qa__q button[aria-expanded="true"] .qa__icon { background: var(--yellow); border-color: var(--yellow); color: var(--black); transform: rotate(180deg); } /* Minus auf Gelb immer schwarz */
.qa__q button[aria-expanded="true"] .qa__icon::after { transform: rotate(0deg); }
.qa__a { overflow: hidden; transition: height .5s var(--ease); }
.qa__inner { padding: 0 56px 24px 0; color: var(--text-2); }
.qa__inner p + p { margin-top: .7rem; }
.qa__inner ul { margin: .5rem 0 0; padding-left: 1.25em; list-style: disc; } .qa__inner p + ul { margin-top: .5rem; } .qa__inner li + li { margin-top: .25rem; } .qa__inner li::marker { color: var(--ink); }
.qa__inner a { color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; transition: background-color .15s; }
.qa__inner a:hover, .qa__inner a:focus-visible { background: var(--yellow); color: var(--black); }
.qa mark { background: var(--yellow); color: inherit; padding: 0 .1em; }
.qa.is-hidden, .faq__group.is-hidden { display: none; }
.faq__empty { padding: 24px 0; font-weight: 700; }
@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__side { position: static; }
  .faq__nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .faq__nav a, .faq__nav a.is-active { padding: .45em .8em; border: 1px solid var(--ink); font-size: .88rem; }
  .faq__marker { display: none; }
  .qa__inner { padding-right: 0; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .subhero__title .w > span, .subhero__eyebrow, .subhero__lead, .subhero__ctas, .subhero__person { opacity: 1; transform: none; animation: none; }
  .tl__seg { transform: none; }
  .tile, .tile__icon, .sheet, .fw > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .years span::after { transform: none !important; }
  .odo__strip { transform: translateY(calc(var(--to) * -1em)) !important; }
  .marquee-row { animation: none; }
  .marquee-row li[aria-hidden] { display: none; } /* ohne Laufband keine doppelten Bilder */
  .intern__icon { opacity: 1 !important; transform: none !important; }
  .gallery { overflow-x: auto; }
  .js .tip__arrow[data-reveal]::before { clip-path: polygon(0 0, calc(100% - 70px) 0, 100% 50%, calc(100% - 70px) 100%, 0 100%); }
  .map.is-in .map__place { animation: none; }
}
/* Senden steht auf weißem Formular: Hover dunkel statt weiß */
.form__submit { --hover-bg: var(--black); --hover-fg: var(--yellow); font-size: 1.05rem; padding: 1.2em 2em; }


/* ---------- Schnuppertag-Video (9:16) neben dem Tipp ---------- */
.film--reel { margin: 0; width: clamp(300px, 31vw, 440px); }
.film--reel .film__frame { max-width: none; }
.film--reel .film__media { aspect-ratio: 9 / 16; box-shadow: 0 30px 60px rgba(22, 39, 64, .22); }
.film--reel .film__frame::after { left: 0; right: 0; }
/* Bildungszentren Freiburg und Schwäbisch Gmünd – Aufbau wie die Reiter „Praxis / Theorie“:
   links Standorte zur Auswahl, rechts Imagefilm groß, Infokarte versetzt darüber */
.bzs { margin-top: clamp(56px, 7vw, 100px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.bzs__kopf { font-size: var(--eyebrow); line-height: 1.2; font-weight: 700; color: var(--blue-2); margin-bottom: .7rem; }
.bzs__intro { color: var(--text-2); line-height: 1.6; margin-bottom: clamp(20px, 2.4vw, 32px); }
.bzs__wahl { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.bzs__wahl button {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 22px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; line-height: 1.1; cursor: pointer;
  font: inherit; font-size: clamp(1.2rem, 1.7vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; color: #5b6270;
  transition: color .4s var(--ease), padding .5s var(--ease);
}
.bzs__wahl button::after { content: "→"; font-size: .7em; opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .5s var(--ease); }
.bzs__wahl button::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 6px; background: var(--yellow); transform: scaleY(0); transition: transform .5s var(--ease); }
.bzs__wahl button:hover { color: var(--ink); }
.bzs__wahl button[aria-selected="true"] { color: var(--ink); padding-left: 18px; }
.bzs__wahl button[aria-selected="true"]::after, .bzs__wahl button[aria-selected="true"]::before { opacity: 1; transform: none; }
.bzs__wahl button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.bz { position: relative; }
.bz + .bz { margin-top: clamp(40px, 5vw, 64px); } /* ohne JavaScript: beide untereinander */
.bz[hidden] { display: none; }
.film--bz { margin: 0; }
.film--bz .film__frame { max-width: none; }
.film--bz .film__frame::after { display: none; }
.bz__text {
  position: relative; z-index: 3; width: min(560px, 88%); margin: clamp(-120px, -9vw, -60px) 0 0 auto;
  padding: clamp(22px, 2.6vw, 36px) clamp(24px, 3vw, 40px); background: var(--paper);
  border-left: 6px solid var(--yellow); box-shadow: 0 24px 60px rgba(22, 39, 64, .14);
}
.bz.is-playing .bz__text { margin-top: 18px; transition: margin .6s var(--ease); } /* läuft der Film, gibt die Karte die Steuerleiste frei */
.bz__name { font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.15; letter-spacing: -.02em; margin-bottom: .5rem; }
.bz__lead { font-weight: 700; margin-bottom: 1rem; }
.bz__punkte { color: var(--text-2); }
.bzs.is-in .bz__punkte li::before { transform: none; opacity: 1; } /* Pfeile wie bei den Infokarten */
/* Wechsel wie bei den Reitern: Film als Pfeil aufgezogen, Karte gleitet nach */
.bz.is-neu .film__media { animation: arrowWipe 1s var(--ease-io) both; }
.bz.is-neu .bz__text { animation: cardIn 1s var(--ease) .35s both; }
@media (max-width: 900px) {
  .bzs { grid-template-columns: 1fr; }
  .bzs__wahl { flex-direction: row; overflow-x: auto; border-top: 0; border-bottom: 2px solid var(--ink); scrollbar-width: none; }
  .bzs__wahl button { border: 0; padding: 12px 16px 12px 0; font-size: 1.2rem; white-space: nowrap; }
  .bzs__wahl button[aria-selected="true"] { padding-left: 0; }
  .bzs__wahl button::before { left: 0; right: 16px; top: auto; bottom: -2px; width: auto; height: 6px; transform: scaleX(0); transform-origin: left; }
  .bzs__wahl button::after { display: none; }
  .bz__text { width: calc(100% - 16px); margin-top: -40px; }
}
@media (prefers-reduced-motion: reduce) { .bz.is-neu .film__media, .bz.is-neu .bz__text { animation: none; } }
.film__btn { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.film__btn:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }
.film__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--blue-3); }
.film.is-playing .film__media::after { display: none; }
.film--reel .film__media::after { background: linear-gradient(0deg, rgba(22,39,64,.35) 0%, rgba(22,39,64,0) 40%); }
@media (max-width: 900px) {
  .intern__head { grid-template-columns: 1fr; }
  .intern__intro .tip__arrow { margin-right: 0; }
  .intern__stage { justify-self: center; }
  .intern__stage .film--reel { width: min(400px, 88vw, var(--reel-max)); }
}

.field--wide { grid-column: 1 / -1; }
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }

/* ================= Steuer macht Schule ================= */
/* Kopf: Klassenzimmer-Foto statt Pfeil-Hintergrund, langsamer Zoom */
.smshero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.smshero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; transform: scale(1.06); animation: smsZoom 1.1s var(--ease) forwards; }
/* Startanimation gestrafft (Wunsch Maxim, Oktober 2026): alles steht nach rund 1 Sekunde statt nach 2,4 Sekunden */
.sub--sms .subhero__title .w > span { animation-duration: .7s; animation-delay: calc(.05s + var(--wi, 0) * .05s); }
.sub--sms .subhero__lead { animation-duration: .6s; animation-delay: .25s; }
.sub--sms .subhero__ctas { animation-duration: .6s; animation-delay: .3s; }
@keyframes smsZoom { to { transform: scale(1.02); } }
.smshero::after { background: linear-gradient(90deg, rgba(22,39,64,.96) 0%, rgba(22,39,64,.9) 38%, rgba(22,39,64,.45) 62%, rgba(22,39,64,.1) 80%); }
.smshero__lead { font-size: clamp(1.2rem, 1.7vw, 1.6rem); line-height: 1.45; max-width: 26em; }
@media (max-width: 1024px) {
  .smshero { min-height: 88svh; justify-content: flex-end; padding-bottom: clamp(40px, 8vw, 64px); }
  .smshero::after { background: linear-gradient(180deg, rgba(22,39,64,.55) 0%, rgba(22,39,64,.85) 45%, rgba(22,39,64,.96) 100%); }
  .smshero__bg img { object-position: 62% 30%; }
}
/* Handy/Tablet: schlanker Einstieg statt Zoom – kein Stocken, schneller zum Inhalt (Wunsch Maxim, November 2026) */
@media (max-width: 1024px), (hover: none) {
  .smshero { min-height: 72svh; }
  .smshero__bg img { transform: none; animation: smsFade .45s ease-out both; }
  .sub--sms .subhero__title .w > span { animation-duration: .45s; animation-delay: calc(var(--wi, 0) * .04s); }
  .sub--sms .subhero__lead, .sub--sms .subhero__ctas { animation-duration: .4s; animation-delay: .15s; }
  .js .sub--sms [data-reveal] { transition-duration: .5s, .5s; transform: translateY(16px); }
  .js .sub--sms [data-reveal].is-in { transform: none; }
}
@keyframes smsFade { from { opacity: 0; } to { opacity: 1; } }

/* Frage als Scroll-Geschichte: Text fließt von rechts nach links, gelbe Welle begleitet ihn,
   endet im gelben Punkt – der Punkt wächst zur gelben Seite mit der Antwort */
.smsflow { position: relative; background: var(--paper); }
.smsflow__sticky { position: relative; }
.smsflow__track { position: relative; padding: var(--section) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) clamp(40px, 5vw, 72px); }
.smsflow__q { position: relative; z-index: 1; font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: 1.12; letter-spacing: -.03em; max-width: 17em; }
.smsflow__wave, .smsflow__fill { display: none; }
.smsflow__answer { background: var(--yellow); padding: clamp(48px, 6vw, 96px) 0 0; }
.smsflow__a { font-size: clamp(1.4rem, 2.8vw, 2.6rem); line-height: 1.3; font-weight: 700; letter-spacing: -.015em; max-width: 30em; margin-inline: auto; }
.smsflow__name { display: block; margin: .35em 0 .45em; font-size: 1.12em; line-height: 1.25; } /* Projektname steht für sich */
.smsflow__a strong { background: var(--black); color: var(--yellow); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Live-Modus: Frage fließt als eine Zeile von rechts nach links, große Welle schwingt mit
   und läuft exakt in den Punkt des „?“ – der Punkt wächst zur gelben Seite */
.smsflow.is-live { height: calc(340vh + var(--nach, 0px)); overflow-x: clip; } /* --nach (per JS): Bühne bleibt stehen, bis die Karten darunter die Antwort eingeholt haben */ /* waagrecht beschneiden, nach oben darf die Spur bis zum Button reichen */
.smsflow.is-live .smsflow__sticky { position: sticky; top: 0; height: 100svh; }
.smsflow.is-live .smsflow__stage { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.smsflow.is-live .smsflow__track { position: absolute; left: 0; top: 50%; padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  transform: translate3d(var(--tx, 0px), -50%, 0); will-change: transform; }
.smsflow.is-live .smsflow__q { max-width: none; white-space: nowrap; font-size: clamp(3.2rem, 9vw, 9.5rem); line-height: 1.2; }
.smsflow.is-live .smsflow__wave { display: block; position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.smsflow__ribbon { fill: var(--yellow); }                      /* Band mit wechselnder Breite: Button-Höhe → Breite des „?“-Punkts */
.smsflow__mask { fill: none; stroke: #fff; stroke-width: var(--mw, 80px); stroke-linecap: butt; stroke-linejoin: round; }
.smsflow.is-live .smsflow__fill { display: block; position: absolute; z-index: 3; left: var(--fx, 50%); top: var(--fy, 50%); width: var(--fw, 20px); height: var(--fh, 20px);
  margin: calc(var(--fh, 20px) / -2) 0 0 calc(var(--fw, 20px) / -2); background: var(--yellow); /* eckig wie der Punkt des „?“ */ transform: scale(var(--fs, 0)); will-change: transform; }
.smsflow.is-live .smsflow__answer { position: absolute; inset: 0; z-index: 4; display: grid; align-items: center; padding: calc(var(--header-h) + 16px) 0 40px; background: none;
  opacity: var(--ao, 0); pointer-events: none; } /* reines, langsames Einblenden – sichtbar nur im gelben Quadrat */

/* Projekt-Einleitung (Rest des Textes): zwei Karten mit Icon + gelber Kontakt-Balken */
.smsintro.smsintro--yellow { background: var(--yellow); padding-bottom: var(--section); }
.smsflow.is-live + .smsintro--yellow { padding-top: 0; position: relative; z-index: 5; margin-top: calc(-1 * var(--ueber, 0px)); background: none; }
/* --ueber (per JS) = Höhe dieses Bereichs: Karten kommen, sobald die Antwort steht, und schieben sich darüber; unten endet er bündig mit der gelben Bühne */
.smsintro--yellow .smsintro__card { background: var(--white); }
.smsintro--yellow .smsintro__mail { background: var(--black); color: var(--white); }
.smsintro--yellow .smsintro__mail a { color: var(--yellow); }
.smsintro--yellow .smsintro__mail-icon { filter: brightness(0) invert(1); }
.smsintro { padding: var(--section) 0 0; }
.smsintro__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.smsintro__card { position: relative;
  padding: clamp(26px, 3vw, 44px); background: var(--mist); border-top: 4px solid var(--black); }
.smsintro__card:hover .smsintro__card p { font-size: clamp(1.1rem, 1.45vw, 1.35rem); line-height: 1.55; color: var(--text-2); }
.smsintro__card strong { color: var(--ink); }
.smsintro__mail { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap;
  padding: clamp(20px, 2.4vw, 32px) clamp(26px, 3vw, 44px); background: var(--yellow); font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.4rem); }
.smsintro__mail-icon { width: clamp(44px, 3.6vw, 56px); height: auto; }
.smsintro__mail a { color: var(--black); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; transition: text-decoration-thickness .2s; }
.smsintro__mail a:hover, .smsintro__mail a:focus-visible { text-decoration-thickness: 4px; }
@media (max-width: 900px) { .smsintro__grid { grid-template-columns: 1fr; } }

/* Drei Kacheln: Zielgruppe / Inhalte / Teilnahme */
.smscards { padding: var(--section) 0; }
.smscards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 0; }
/* gemeinsames Zeilenraster: Akzent / Überschrift / Text stehen in allen Kacheln auf gleicher Höhe */
.smscard {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  padding: clamp(26px, 2.8vw, 42px);
}
.smscard--a, .smscard--b, .smscard--c { background: var(--blue-3); color: var(--white); } /* alle drei Kästen im selben Blau */
.smscard__big { font-size: clamp(2.6rem, 4.4vw, 4.2rem); line-height: 1; font-weight: 700; letter-spacing: -.035em; padding-bottom: clamp(56px, 8vw, 120px); white-space: nowrap; }
.smscard__big { color: var(--yellow); }
.smscard__glyph { display: block; width: auto; height: clamp(64px, 6vw, 92px); transform-origin: left bottom; transition: transform .6s var(--ease); }
.smscard:hover .smscard__glyph { transform: rotate(-6deg) scale(1.05); }
/* breite, flache Motive optisch an die hohen angleichen (eigene scale-Eigenschaft, Hover-Drehung bleibt) */
.smscard__glyph[src*="schule"] { scale: 1.4; transform-origin: left center; }
.smscard__glyph[src*="gruppe"] { scale: 1.05; transform-origin: left center; }
.smscard h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); margin-bottom: .6rem; }
.smscard p:not(.smscard__big) { font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.55; }
.smscard p:not(.smscard__big) { color: rgba(255,255,255,.92); }
.smscard__icon { position: absolute; z-index: -1; right: -8%; top: -6%; width: 46%; max-width: 220px; opacity: .1; transform: rotate(-10deg); transition: transform 1s var(--ease); }
.smscard__icon { filter: brightness(0) invert(1); opacity: .08; }
.smscard:hover .smscard__icon { transform: rotate(0deg) scale(1.06); }
/* Einblenden: Pfeil-Wisch von links, versetzt */
.js .smscards__grid[data-reveal] { opacity: 1; transform: none; } /* Erkennung am Raster, Animation an den Kacheln */
.js .smscards__grid[data-reveal] .smscard { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%); transition: clip-path 1.1s var(--ease-io); transition-delay: calc(var(--ci, 0) * .14s); }
.js .smscards__grid[data-reveal].is-in .smscard { clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%); }
@media (max-width: 900px) { .smscards__grid { grid-template-columns: 1fr; row-gap: 12px; } .smscard { grid-row: auto; grid-template-rows: none; } .smscard__big { padding-bottom: 32px; } }

/* Anmeldung: Kopf oben (Titel + Finanzamt-Suche), darunter breites Formular in drei Spalten */
.smsform__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 3.4vw, 48px); }
.smsform__head .title { margin: 0; }
.smsform__find { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 20px; align-items: center; padding: clamp(20px, 2.2vw, 30px); background: var(--paper); border-left: 6px solid var(--yellow); }
.smsform__find-icon { grid-row: span 2; width: clamp(48px, 4.4vw, 64px); height: auto; transition: transform .5s var(--ease); }
.smsform__find:hover .smsform__find-icon { transform: rotate(-10deg) scale(1.06); }
.smsform__find p { color: var(--text-2); line-height: 1.5; }
.smsform__find .btn { justify-self: start; margin-top: 8px; --hover-bg: var(--yellow); --hover-fg: var(--black); } /* auf weißer Karte: Hover gelb statt weiß */
.form--wide .form__fields { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.form--wide .span-2 { grid-column: span 2; }
.form--wide .span-4 { grid-column: span 4; }
.form--wide .span-6 { grid-column: 1 / -1; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.form__note { font-size: .95rem; color: var(--text-2); }
@media (max-width: 1100px) {
  .form--wide .form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form--wide .span-2 { grid-column: span 1; }
  .form--wide .span-4, .form--wide .field--area { grid-column: 1 / -1; }
}
@media (max-width: 900px) { .smsform__head { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .form--wide .form__fields { grid-template-columns: 1fr; }
  .smsform__find { grid-template-columns: 1fr; }
  .smsform__find-icon { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .smshero__bg img { animation: none; transform: none; }
  .js .smscards__grid[data-reveal] .smscard { clip-path: none; }
}

/* ================= Rechtliches: Impressum, Datenschutz, Barrierefreiheit ================= */
.legalhero { min-height: 0 !important; padding: calc(var(--header-h) + clamp(56px, 8vw, 110px)) 0 clamp(48px, 6vw, 80px); }
.legalhero .subhero__title { max-width: none; }
.legal { padding: var(--section) 0; }
.legal__grid { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.legal__grid--single { grid-template-columns: minmax(0, 1fr); }
.legal__body { max-width: 46rem; font-size: clamp(1rem, 1.1vw, 1.08rem); line-height: 1.7; color: var(--text-2); }
.legal__body > * + * { margin-top: 1em; }
.legal__body h2 { margin-top: 2.2em; padding-top: .8em; border-top: 2px solid var(--ink); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -.015em; color: var(--ink); scroll-margin-top: calc(var(--header-h) + 24px); }
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { margin-top: 1.8em; font-size: clamp(1.15rem, 1.4vw, 1.3rem); line-height: 1.3; color: var(--ink); scroll-margin-top: calc(var(--header-h) + 24px); }
.legal__body strong { color: var(--ink); }
.legal__body a { color: var(--blue-2); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal__body a:hover { text-decoration-thickness: 3px; }
.legal__body ul, .legal__body ol { padding-left: 1.3em; }
.legal__body li + li { margin-top: .35em; }
.legal__body li::marker { color: var(--blue-2); }
.legal__card { padding: clamp(22px, 2.6vw, 34px); background: var(--mist); border-left: 6px solid var(--yellow); color: var(--ink); }
.legal__card p + p { margin-top: .8em; }
.legal__stand { margin-top: 2.4rem; color: var(--text-2); }
.legal__draft { padding: 14px 18px; background: var(--yellow); color: var(--black); font-weight: 700; }
/* Inhaltsverzeichnis (Datenschutz) */
.legal__toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; font-size: .92rem; line-height: 1.4; }
.legal__toc-title { font-weight: 700; font-size: 1.1rem; margin-bottom: .8rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ink); }
.legal__toc ol { list-style: none; margin: 0; padding: 0; }
.legal__toc-part { margin-top: 1rem; }
.legal__toc-part > a { font-weight: 700; color: var(--ink); }
.legal__toc-part ol { margin-top: .4rem; border-left: 2px solid var(--line); }
.legal__toc-part ol a { display: block; padding: 4px 0 4px 12px; color: var(--text-2); text-decoration: none; transition: color .2s; }
.legal__toc a:hover, .legal__toc a:focus-visible { color: var(--blue-2); text-decoration: underline; }
@media (max-width: 1024px) {
  .legal__grid { grid-template-columns: 1fr; }
  .legal__toc { position: static; max-height: none; padding: 18px 20px; background: var(--mist); }
}

/* =========================================================
   Landeszentrum für Datenverarbeitung (LZfD)
   ========================================================= */
/* Duo-Foto ist breit (634 × 732): höchstens 40 % der Bildschirmbreite, damit es auch auf hohen Bildschirmen nie unter den Text rutscht */
@media (min-width: 1025px) {
  .subhero__person:has(img[src*="lzfd/duo"]) { height: min(86%, 1000px, calc(40vw * 732 / 634)); }
}

/* „Macht Sinn. …“ – gleicher Aufbau wie auf der Startseite (Überschrift links, Liste rechts) */
.why--sub { padding: var(--section) 0 0; } /* Abstand nach unten übernimmt der folgende Bereich */
.why--sub .why__head { top: calc(var(--header-h) + var(--subnav-h, 64px) + 40px); } /* unter Kopfzeile und Unternavigation */
.why--sub .why__title { font-size: clamp(2.2rem, min(3.4vw, 7.6vw), 3.6rem); hyphens: manual; -webkit-hyphens: manual; } /* längstes Wort („PROGRAMMIER“) passt in die Spalte */

/* Auf einen Blick: Standort und Duale Hochschule ergänzt */
.facts--lzfd { padding-bottom: 0; }
.bento--lzfd { grid-template-areas: "pay pay dur dur" "school school status status" "start place uni uni"; }
/* Wasserzeichen-Icons wie beim Finanzamt: groß, laufen unten rechts aus der Kachel – hier alle gleich groß */
.bento--lzfd .tile__bg, .bento--lzfd .tile__bg--soft { width: clamp(200px, 21vw, 290px); max-width: none; right: -36px; bottom: -48px; opacity: .08; }
.bento--lzfd .tile--pay .tile__bg { opacity: .1; }
.bento--lzfd .tile__bg--light { opacity: .12; }
@media (max-width: 600px) { .bento--lzfd .tile__bg, .bento--lzfd .tile__bg--soft { width: 180px; right: -24px; bottom: -36px; } }
/* längere Angaben: etwas kleiner und ohne Silbentrennung, damit die Kacheln ruhig bleiben */
.bento--lzfd :is(.tile--school, .tile--status, .tile--place, .tile--uni) dd[data-words] { font-size: clamp(1.25rem, 1.6vw, 1.6rem); line-height: 1.2; hyphens: manual; -webkit-hyphens: manual; }
.tile--place { grid-area: place; }
.tile--uni { grid-area: uni; background: var(--blue-3); color: var(--white); }
.tile--uni dt { color: var(--white); }
.tile__note { margin-top: .8rem !important; font-size: clamp(.95rem, 1.05vw, 1.05rem) !important; font-weight: 400 !important; line-height: 1.45 !important; letter-spacing: 0 !important; }
.tile__note--strong { font-weight: 700 !important; }
.tile--pay .tile__note { color: var(--black); }
@media (max-width: 1000px) {
  .bento--lzfd { grid-template-areas: "pay pay" "dur dur" "school school" "status status" "start place" "uni uni"; }
}
@media (max-width: 560px) {
  .bento--lzfd { grid-template-areas: "pay" "dur" "status" "school" "start" "place" "uni"; }
}

/* Studiengänge: ruhige Karten mit gelbem Balken (wie die übrigen Karten der Seite) */
.notes { padding: var(--section) 0; }
.notes .title { margin-bottom: clamp(28px, 3vw, 44px); }
.notes__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.note {
  position: relative; padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2vw, 30px);
  background: var(--mist); color: var(--ink); border-top: 6px solid var(--yellow);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.note:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(22, 39, 64, .12); }
.note__title { font-size: clamp(1.1rem, 1.3vw, 1.3rem); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin-bottom: 1rem; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
.note__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; font-size: 1rem; color: var(--text-2); }
.note__list li { position: relative; padding-left: 1.2em; }
.note__list li::before { content: "→"; position: absolute; left: 0; color: var(--ink); }
.js .notes__grid[data-reveal] { opacity: 1; transform: none; }
.js .notes__grid[data-reveal] .note { opacity: 0; translate: 0 24px; transition: opacity .6s var(--ease), translate .8s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); transition-delay: calc(var(--ni, 0) * .1s), calc(var(--ni, 0) * .1s), 0s, 0s; }
.js .notes__grid[data-reveal].is-in .note { opacity: 1; translate: 0 0; }
@media (max-width: 1000px) { .notes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .notes__grid { grid-template-columns: 1fr; } }

/* Ablauf: Überschrift über den Reitern */
.tabs__title { margin-bottom: clamp(28px, 3vw, 44px); }

/* Ausbildungsorte LZfD: Liste statt Finanzamt-Auswahl */
.places__group + .places__group { margin-top: 1.6rem; }
.places__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.places__list li { position: relative; padding-left: 1.2em; }
.places__list a { font-weight: 700; color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: background-color .15s; }
.places__list a:hover, .places__list a:focus-visible { background: var(--yellow); color: var(--black); }
.places__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.places--lzfd .map__name small { font-size: .8em; font-weight: 400; }

/* BOGY: zwei Karten + Foto */
.intern--lzfd .intern__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.intern--lzfd .intern__photo { order: -1; position: sticky; top: calc(var(--header-h) + var(--subnav-h, 64px) + 24px); }
.intern__grid--two { grid-template-columns: 1fr; }
@media (max-width: 1000px) { .intern--lzfd .intern__split { grid-template-columns: 1fr; } .intern--lzfd .intern__photo { position: relative; top: auto; } } /* relative statt static: sonst rutscht die gelbe Linie (::after) quer über die Seite */

/* Anmeldung BOGY: Sticky Notes links */
.notes__stack { margin: 0; padding: 0; list-style: none; display: grid; gap: 26px; max-width: 34em; }
.notes__stack .note { padding: 20px 24px; background: var(--paper); }
.notes__stack .note p { margin: 0; color: var(--ink); }

/* FAQ LZfD: Antworten folgen */
.qa__todo { font-style: italic; color: var(--text-2); }

html[data-contrast="high"] .note { border: 2px solid var(--hc-fg) !important; }
@media (prefers-reduced-motion: reduce) { .note:hover { transform: none; } }

/* =========================================================
   Landesoberkasse (LOK)
   ========================================================= */
/* Kachel-Anordnung Studium (7 Kacheln) und Ausbildung (6 Kacheln) */
.bento--lok-s { grid-template-areas: "pay pay dur dur" "school school status status" "start place uni uni"; }
.bento--lok-a { grid-template-areas: "pay pay dur dur" "school school status status" "start uni uni uni"; }
@media (max-width: 1000px) {
  .bento--lok-s { grid-template-areas: "pay pay" "dur dur" "school school" "status status" "start place" "uni uni"; }
  .bento--lok-a { grid-template-areas: "pay pay" "dur dur" "school school" "status status" "start start" "uni uni"; }
}
@media (max-width: 560px) {
  .bento--lok-s { grid-template-areas: "pay" "dur" "school" "status" "start" "place" "uni"; }
  .bento--lok-a { grid-template-areas: "pay" "dur" "school" "status" "start" "uni"; }
}
/* „Die 5 besten Gründe“: nur Überschriften – etwas kompaktere Zeilen */
.why__item--short { padding-top: clamp(22px, 2.4vw, 34px); padding-bottom: clamp(22px, 2.4vw, 34px); }

/* Kontakt & Bewerbung */
.contact { padding: var(--section) 0; }
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.contact__head .title { margin-bottom: 1rem; }
.contact__head p { color: var(--text-2); max-width: 30em; }
.contact__list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.contact__item { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact__label { font-weight: 700; color: var(--text-2); font-size: .95rem; }
.contact__item a { font-weight: 700; font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; transition: background-color .15s; }
.contact__item a:hover, .contact__item a:focus-visible { background: var(--yellow); color: var(--black); }
@media (max-width: 800px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .contact__item { grid-template-columns: 1fr; gap: 4px; } }