/* ============================================================
   TWA Pilot · site.css · Stand 21.10.2026
   Baut ausschließlich auf tokens.css auf (DESIGN.md v1.0).
   ============================================================ */

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; }

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-weight: var(--w-light);
  font-size: var(--t-body); line-height: var(--lh-body);
  font-variant-numeric: tabular-nums; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--fg-brand); text-decoration-thickness: 1px; text-underline-offset: .2em; }
p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; color: var(--fg-brand); line-height: var(--lh-head); text-wrap: balance; }
h1 { font-size: var(--t-h1); font-weight: var(--w-xbold); letter-spacing: -.01em; }
h2 { font-size: var(--t-h2); font-weight: var(--w-xbold); letter-spacing: -.005em; }
h3 { font-size: var(--t-h3); font-weight: var(--w-bold); }
strong, b { font-weight: var(--w-bold); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--bg-brand); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Raster ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: max(16px, var(--gutter)); }
.section { padding-block: var(--s-6); position: relative; }
.section.alt { background: var(--bg-alt); }
.measure { max-width: var(--measure); }
.stack > * + * { margin-top: var(--s-2); }
.stack-l > * + * { margin-top: var(--s-3); }

.label {
  display: block; font-size: var(--t-label); font-weight: var(--w-medium);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted);
  line-height: 1.4;
}
.label.green { color: #5f8a1f; }
.lead { font-size: var(--t-lead); font-weight: var(--w-light); line-height: 1.45; max-width: var(--measure); }
.muted { color: var(--fg-muted); }
.small { font-size: var(--t-small); }

.sec-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); max-width: 52rem; }
.sec-head .caps {
  font-size: var(--t-h2); font-weight: var(--w-light); text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--fg-brand); line-height: 1.05;
}
.sec-head .caps b { font-weight: var(--w-xbold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em; padding: .85em 1.4em;
  border-radius: var(--radius); font: inherit; font-weight: var(--w-medium); font-size: var(--t-small);
  letter-spacing: .02em; text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  line-height: 1.2; transition: transform var(--d-micro) var(--ease-out), background var(--d-micro), border-color var(--d-micro);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--fg); }
.btn-primary:hover { background: #7aa338; }
.btn-brand { background: var(--bg-brand); color: var(--on-brand); }
.btn-brand:hover { background: var(--twa-nacht); }
.btn-ghost { border-color: var(--line); color: var(--fg-brand); background: transparent; }
.btn-ghost:hover { border-color: var(--fg-brand); }
.on-brand .btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.btn .arr { transition: transform var(--d-state) var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.link {
  color: var(--fg-brand); font-weight: var(--w-medium); text-decoration: none; position: relative;
  display: inline-block; padding-bottom: 3px;
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--accent);
  transform: scaleX(.35); transform-origin: left; transition: transform var(--d-state) var(--ease-out);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.on-brand .link { color: #fff; }

.tag {
  display: inline-block; font-size: var(--t-label); font-weight: var(--w-medium); letter-spacing: .08em;
  text-transform: uppercase; padding: .25em .6em; background: var(--twa-tblau); color: var(--fg-brand); border-radius: var(--radius);
}
.tag.green { background: var(--twa-tgruen); color: #4e6e1f; }
.tag.note { background: #fff4d6; color: #6b4e00; }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid transparent;
  transition: border-color var(--d-state), box-shadow var(--d-state);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 84px; transition: height var(--d-state) var(--ease-out); }
.topbar.small { border-bottom-color: var(--line); }
.topbar.small .wrap { height: 64px; }
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { height: 46px; width: auto; transition: height var(--d-state) var(--ease-out); }
.topbar.small .brand img { height: 36px; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav ul { display: flex; gap: 1.35rem; }
.nav a { font-size: var(--t-small); font-weight: var(--w-medium); color: var(--fg); text-decoration: none; position: relative; padding-block: .4rem; }
.nav ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--d-state) var(--ease-out);
}
.nav ul a:hover::after, .nav ul a[aria-current="page"]::after { transform: scaleX(1); }
.nav ul a[aria-current="page"] { color: var(--fg-brand); }
.burger { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--fg-brand); }
.burger span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; transition: transform var(--d-state), opacity var(--d-state); }

@media (max-width: 1080px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 64px 0 auto 0; background: #fff; flex-direction: column; align-items: stretch;
    gap: 0; padding: 1rem max(16px, var(--gutter)) 1.5rem; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--d-state), transform var(--d-state) var(--ease-out), visibility var(--d-state);
  }
  .topbar:not(.small) .nav { inset-block-start: 84px; }
  .nav.open { opacity: 1; transform: none; visibility: visible; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav ul a::after { display: none; }
  .nav .btn { margin-top: 1rem; justify-content: center; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 520px) { .brand img { height: 38px; } }

/* ---------- Hero (Startseite) ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 5.5rem) calc(var(--s-6) + 2vw); }
.hero .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; gap: var(--s-4); }
.hero h1 { font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: -.02em; }
.hero h1 .l1, .hero h1 .l2 { display: block; }
.hero h1 .l2 { font-weight: var(--w-light); }
.hero .sub { max-width: 40rem; }
.hero .trust { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: var(--t-small); color: var(--fg-muted); margin-top: var(--s-3); }
.hero .trust span { white-space: nowrap; }
.hero .trust span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--line); margin-right: 1.1rem; vertical-align: middle; transform: skewX(-14deg); }
.hero-img { position: relative; margin-inline: calc(-1 * max(16px, var(--gutter))); }
.hero-img .slides { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; clip-path: polygon(0 10vw, 100% 0, 100% 100%, 0 100%); }
.hero-img .slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: slide 24s infinite; }
.hero-img .slides img:nth-child(1) { animation-delay: 0s; }
.hero-img .slides img:nth-child(2) { animation-delay: 6s; }
.hero-img .slides img:nth-child(3) { animation-delay: 12s; }
.hero-img .slides img:nth-child(4) { animation-delay: 18s; }
@keyframes slide { 0% { opacity: 0; transform: scale(1.04); } 5% { opacity: 1; } 25% { opacity: 1; } 32% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-img .slides img { animation: none; } .hero-img .slides img:first-child { opacity: 1; } }
.hero-img .line { position: absolute; left: 0; right: 0; top: calc(10vw - 2px); height: 4px; background: var(--accent); transform-origin: left top; transform: rotate(-5.7deg); width: 101%; }
.hero-img figcaption { position: absolute; right: max(16px, var(--gutter)); bottom: .8rem; font-size: .75rem; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

@media (min-width: 900px) {
  .hero { padding-bottom: var(--s-6); min-height: min(860px, 92vh); display: flex; align-items: center; }
  .hero .wrap { width: 100%; }
  .hero-grid { grid-template-columns: repeat(12, 1fr); }
  .hero-copy { grid-column: 1 / span 7; position: relative; z-index: 2; }
  .hero h1 { font-size: min(var(--t-display), 5.4vw + .4rem); }
  .hero-img { position: absolute; inset: 0 0 0 auto; width: 48vw; margin: 0; z-index: 1; }
  .hero-img .slides { height: 100%; aspect-ratio: auto; clip-path: polygon(14vw 0, 100% 0, 100% 100%, 0 100%); }
  .hero-img .line { display: none; }
  .hero-img::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 14.6vw; background: var(--accent);
    clip-path: polygon(14vw 0, 14.6vw 0, .6vw 100%, 0 100%);
  }
}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.pagehead { background: var(--bg-brand); color: var(--on-brand); position: relative; overflow: hidden; padding-block: var(--s-5) calc(var(--s-5) + var(--schwung-rise)); }
.pagehead::before { content: ""; position: absolute; right: -8vw; top: -10vw; width: 52vw; height: 70vw; max-height: 140%; background: var(--twa-nacht); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
.pagehead::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: calc(var(--schwung-rise) + 1px); background: var(--bg); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.pagehead .wrap { position: relative; z-index: 1; }
.pagehead .label { color: var(--twa-hblau); }
.pagehead h1 { color: #fff; font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: -.02em; margin-top: .6rem; }
.pagehead h1 span { display: block; font-weight: var(--w-light); }
.pagehead .lead { color: rgba(255,255,255,.88); margin-top: var(--s-3); }
.pagehead .ghost { position: absolute; right: max(16px, var(--gutter)); bottom: 2vw; font-size: var(--t-ghost); font-weight: var(--w-xbold); line-height: .8; color: var(--ghost-on-brand); z-index: 0; letter-spacing: -.04em; pointer-events: none; }
.crumbs { font-size: var(--t-small); margin-bottom: var(--s-3); }
.crumbs a { color: rgba(255,255,255,.75); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.pagehead.green { background: var(--accent); color: var(--fg); }
.pagehead.green::before { background: var(--twa-dgruen); opacity: .35; }
.pagehead.green h1 { color: var(--fg-brand); }
.pagehead.green .label { color: var(--fg-brand); }
.pagehead.green .lead { color: var(--fg); }
.pagehead.green .crumbs a { color: var(--fg-brand); }
.pagehead.green .ghost { color: rgba(255,255,255,.35); }

/* ---------- Kennzahlen-Zeile ---------- */
.numbers { padding-block: var(--s-4); border-top: 1px solid var(--line); }
.numbers ul { display: grid; gap: var(--s-3) var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.numbers li { display: grid; gap: .2rem; }
.numbers b { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); font-weight: var(--w-xbold); color: var(--fg-brand); line-height: 1; letter-spacing: -.02em; }
.numbers b small { font-size: .5em; font-weight: var(--w-light); letter-spacing: 0; margin-left: .15em; }
.numbers li > span { font-size: var(--t-small); color: var(--fg-muted); line-height: 1.35; }

/* ---------- Werdegang ---------- */
.timeline { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-top: var(--s-4); }
.timeline li { border-top: 3px solid var(--fg-brand); padding-top: 1rem; }
.timeline li.g { border-top-color: var(--accent); }
.timeline b { display: block; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); font-weight: var(--w-xbold); color: var(--fg-brand); line-height: 1; letter-spacing: -.02em; }
.timeline h3 { font-size: 1.05rem; margin-top: .7rem; }
.timeline p { font-size: var(--t-small); margin-top: .35rem; color: var(--fg-muted); }

/* ---------- Haltung (Blau) ---------- */
.brandband { background: var(--bg-brand); color: rgba(255,255,255,.9); position: relative; overflow: hidden; }
.brandband::before { content: ""; position: absolute; right: -6vw; top: 0; bottom: 0; width: 40vw; background: var(--twa-nacht); clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); }
.brandband .wrap { position: relative; z-index: 1; }
.brandband .label { color: var(--twa-hblau); }
.brandband h2, .brandband h3 { color: #fff; }
.quote {
  font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem); font-weight: var(--w-xbold); line-height: 1.12; color: #fff;
  max-width: 24ch; letter-spacing: -.01em; margin-top: var(--s-2); text-wrap: balance;
}
.gline { display: block; width: 96px; height: 4px; background: var(--accent); margin-block: var(--s-4); }
.haltung-grid { display: grid; gap: var(--s-4); }
.haltung-grid p + p { margin-top: var(--s-2); }
.signoff { display: flex; gap: 1rem; align-items: center; margin-top: var(--s-4); }
.signoff img { width: 64px; height: 80px; object-fit: cover; object-position: top; filter: grayscale(.15); }
.signoff b { color: #fff; display: block; font-weight: var(--w-bold); }
.signoff span { font-size: var(--t-small); color: rgba(255,255,255,.7); }
.statt { display: grid; gap: .35rem; margin-top: var(--s-4); }
.statt li { font-size: var(--t-h3); font-weight: var(--w-bold); color: var(--accent); line-height: 1.25; }
.statt li span { font-weight: var(--w-light); color: rgba(255,255,255,.75); }
@media (min-width: 900px) {
  .haltung-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}

/* ---------- Leistungskarten ---------- */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.card {
  background: var(--bg); border: 1px solid var(--line); padding: 0 0 var(--s-3); position: relative;
  display: flex; flex-direction: column; border-radius: var(--radius);
  transition: transform var(--d-state) var(--ease-out), box-shadow var(--d-state);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .no {
  display: block; background: var(--bg-brand); color: var(--on-brand); font-weight: var(--w-xbold); font-size: 2.2rem; line-height: 1;
  padding: 1rem 1.5rem 2rem; clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%); margin-bottom: var(--s-2);
}
.card .no small { display: block; font-size: var(--t-label); font-weight: var(--w-medium); letter-spacing: var(--track-label); color: var(--twa-hblau); text-transform: uppercase; margin-bottom: .5rem; }
.card.c2 .no { background: var(--twa-hblau); }
.card.c2 .no small { color: #e6f1f6; }
.card.c3 .no { background: var(--accent); color: var(--fg-brand); }
.card.c3 .no small { color: var(--fg-brand); }
.card > h3, .card > p, .card > ul, .card > .more { margin-inline: 1.5rem; }
.card > p { font-size: var(--t-small); margin-top: .7rem; line-height: 1.5; }
.card > ul { margin-top: 1rem; margin-bottom: 1.2rem; }
.card li { font-size: var(--t-small); padding: .5rem 0 .5rem 1.2rem; border-top: 1px solid var(--line); position: relative; line-height: 1.4; }
.card li::before { content: ""; position: absolute; left: 0; top: .95em; width: 8px; height: 8px; background: var(--accent); transform: skewX(-14deg); }
.card .more { margin-top: auto; }
.fineprint { margin-top: var(--s-4); font-size: var(--t-small); color: var(--fg-muted); max-width: var(--measure); }

/* ---------- Methode: Stufen-Treppe ---------- */
.stairs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: end; margin-top: var(--s-4); }
.stair {
  background: var(--twa-tblau); color: var(--fg-brand); padding: 1.6rem .9rem .9rem; position: relative;
  clip-path: polygon(0 1.1rem, 100% 0, 100% 100%, 0 100%); min-height: var(--h, 8rem);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.stair b { display: block; font-size: clamp(1.8rem, 1rem + 2vw, 2.8rem); font-weight: var(--w-xbold); line-height: 1; }
.stair .t { display: block; font-size: var(--t-label); font-weight: var(--w-medium); letter-spacing: .06em; text-transform: uppercase; margin-top: .5rem; line-height: 1.3; }
.stair .d { display: block; font-size: .875rem; line-height: 1.4; margin-top: .5rem; color: var(--fg); }
.stair .z { display: block; font-size: .75rem; color: var(--fg-muted); margin-top: .5rem; letter-spacing: .02em; }
.stair:nth-child(1) { --h: 13rem; background: var(--accent); color: var(--fg-brand); }
.stair:nth-child(1) .z { color: var(--fg-brand); }
.stair:nth-child(2) { --h: 14.5rem; }
.stair:nth-child(3) { --h: 16rem; }
.stair:nth-child(4) { --h: 17.5rem; }
.stair:nth-child(5) { --h: 19rem; }
.stair:nth-child(6) { --h: 20.5rem; background: var(--bg-brand); color: #fff; }
.stair:nth-child(6) .d, .stair:nth-child(6) .z { color: rgba(255,255,255,.8); }
@media (max-width: 899px) {
  .stairs { grid-template-columns: 1fr; gap: 4px; }
  .stair { min-height: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); padding: 1rem 1.1rem; display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1rem; margin-right: calc((5 - var(--i, 0)) * 4%); }
  .stair b { grid-row: span 3; }
  .stair .t { margin-top: 0; }
  .stair:nth-child(1) { --i: 0; } .stair:nth-child(2) { --i: 1; } .stair:nth-child(3) { --i: 2; }
  .stair:nth-child(4) { --i: 3; } .stair:nth-child(5) { --i: 4; } .stair:nth-child(6) { --i: 5; }
}
/* Treppe wächst (nur mit JS und ohne reduce) */
.js .stairs.grow .stair { transform: scaleY(.0001); transform-origin: bottom; opacity: 0; }
.js .stairs.grow.in .stair { transform: none; opacity: 1; transition: transform 700ms var(--ease-out), opacity 300ms; }
.js .stairs.grow.in .stair:nth-child(2) { transition-delay: 120ms; }
.js .stairs.grow.in .stair:nth-child(3) { transition-delay: 240ms; }
.js .stairs.grow.in .stair:nth-child(4) { transition-delay: 360ms; }
.js .stairs.grow.in .stair:nth-child(5) { transition-delay: 480ms; }
.js .stairs.grow.in .stair:nth-child(6) { transition-delay: 600ms; }
@media (max-width: 899px) { .js .stairs.grow .stair { transform: scaleX(.0001); transform-origin: left; } }

.tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s-4); }
.tools li { font-size: var(--t-small); font-weight: var(--w-medium); color: var(--fg-brand); background: var(--bg); border: 1px solid var(--line); padding: .45rem .8rem; border-radius: var(--radius); }
.section.alt .tools li { background: #fff; }
.dreisatz { margin-top: var(--s-5); display: grid; gap: .2rem; }
.dreisatz span { display: block; font-size: var(--t-h3); font-weight: var(--w-bold); color: var(--fg-brand); line-height: 1.3; }
.dreisatz span::before { content: ""; display: inline-block; width: 14px; height: 14px; background: var(--accent); margin-right: .8rem; transform: skewX(-14deg) translateY(1px); }
.method-intro { display: grid; gap: var(--s-3); }
@media (min-width: 900px) { .method-intro { grid-template-columns: 5fr 6fr; gap: var(--s-5); align-items: end; } }

/* ---------- Zielgruppen-Zeilen ---------- */
.rows { border-bottom: 1px solid var(--line); }
.zrow { display: grid; gap: .6rem; padding-block: var(--s-4); border-top: 1px solid var(--line); }
.zrow h3 { font-size: var(--t-h3); }
.zrow .k { font-size: var(--t-label); font-weight: var(--w-medium); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); display: block; margin-bottom: .3rem; }
.zrow .k.g { color: #5f8a1f; }
.zrow .n { font-size: var(--t-h2); font-weight: var(--w-xbold); color: var(--ghost); line-height: 1; }
@media (min-width: 900px) { .zrow { grid-template-columns: 4rem 3fr 4fr 4fr; gap: var(--s-4); } }

/* ---------- Team-Kacheln (ohne Fotos, bis zum Shooting) ---------- */
.tiles-team { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin-top: var(--s-3); }
.tiles-team li { position: relative; overflow: hidden; background: var(--bg-brand); color: #fff; padding: 1rem 1.1rem 1.1rem; min-height: 11.5rem; display: flex; flex-direction: column; justify-content: flex-end; border-top: 0; }
.tiles-team li:nth-child(1) { background: var(--bg-brand); }
.tiles-team li:nth-child(2) { background: #0b5487; }
.tiles-team li:nth-child(3) { background: var(--twa-hblau); }
.tiles-team li:nth-child(4) { background: var(--twa-dgruen); }
.tiles-team li:nth-child(5) { background: #346f8c; }
.tiles-team .ini { position: absolute; left: -.05em; top: -.18em; font-size: 5.6rem; font-weight: var(--w-xbold); line-height: 1; letter-spacing: -.05em; color: rgba(255,255,255,.16); }
.team.tiles-team li b { color: #fff; font-weight: var(--w-bold); font-size: 1.05rem; line-height: 1.2; position: relative; }
.team.tiles-team li b::before { content: ""; display: block; width: 32px; height: 3px; background: var(--accent); margin-bottom: .6rem; }
.team.tiles-team li > span:not(.ini) { color: rgba(255,255,255,.8); font-size: .875rem; line-height: 1.35; margin-top: .3rem; }

/* ---------- Taufenbach / Kompetenz ---------- */
.person { display: grid; gap: var(--s-4); align-items: start; }
.portrait { position: relative; margin-inline: calc(-1 * max(16px, var(--gutter))); }
.portrait img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; object-position: 62% 30%; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schwung-rise)), 0 100%); }
.portrait .tag { position: absolute; left: max(16px, var(--gutter)); top: 1rem; }
@media (min-width: 900px) {
  .person { grid-template-columns: 6fr 6fr; gap: var(--s-5); }
  .portrait { margin-left: calc(-1 * max(16px, var(--gutter)) - max(0px, (100vw - var(--max)) / 2)); margin-right: 0; }
  .portrait img { aspect-ratio: 5/5.4; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4vw)); }
}
.quals { display: grid; gap: 0; margin-top: var(--s-3); }
.quals li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--line); font-size: var(--t-small); line-height: 1.4; }
.quals li::before { content: ""; width: 10px; height: 10px; background: var(--fg-brand); transform: skewX(-14deg); margin-top: .35em; }
.team { display: grid; gap: .6rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-top: var(--s-3); }
.team li { padding-top: .7rem; border-top: 2px solid var(--fg-brand); }
.team b { display: block; color: var(--fg-brand); font-weight: var(--w-bold); }
.team span { font-size: var(--t-small); color: var(--fg-muted); }
.downloads { margin-top: var(--s-3); border-bottom: 1px solid var(--line); }
.dl { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--fg); transition: background var(--d-micro); }
.dl:hover { background: linear-gradient(90deg, var(--twa-tblau), transparent 70%); }
.dl b { color: var(--fg-brand); font-weight: var(--w-bold); display: block; }
.dl span { font-size: var(--t-small); color: var(--fg-muted); }
.dl i { font-style: normal; font-size: var(--t-label); font-weight: var(--w-medium); letter-spacing: .08em; color: var(--fg-brand); padding: .3rem .6rem; border: 1px solid var(--line); white-space: nowrap; }
.dl.off { pointer-events: none; }
.dl.off i { color: var(--fg-muted); }

/* ---------- Projekte ---------- */
.tiles { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.tile { position: relative; overflow: hidden; min-height: clamp(15rem, 40vw, 22rem); color: #fff; padding: 1.4rem; display: flex; flex-direction: column; justify-content: flex-end; background: var(--bg-brand); isolation: isolate; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: transform 600ms var(--ease-out); background: var(--bg-brand); }
.tile:hover::before { transform: scale(1.03); }
.tile .yr { position: absolute; left: -.06em; top: -.2em; font-size: clamp(5.5rem, 4rem + 4vw, 8rem); font-weight: var(--w-xbold); line-height: 1; color: rgba(255,255,255,.16); letter-spacing: -.04em; }
.tile .gl { display: block; width: 40px; height: 3px; background: var(--accent); margin-bottom: .8rem; }
.tile b { display: block; font-weight: var(--w-bold); font-size: var(--t-h3); line-height: 1.15; }
.tile .where { font-size: var(--t-small); opacity: .8; display: block; margin-top: .2rem; }
.tile .role { font-size: var(--t-small); display: block; margin-top: .6rem; line-height: 1.4; }
.tile .kpi { font-size: .8125rem; opacity: .75; display: block; margin-top: .3rem; line-height: 1.4; }
.tile.t1::before { background: linear-gradient(160deg, #0b5487, var(--twa-nacht)); }
.tile.t2::before { background: linear-gradient(160deg, #5f9fbb, #346f8c); }
.tile.t3::before { background: linear-gradient(160deg, #718a69, #4e6648); }
.tile.t4::before { background: linear-gradient(160deg, #2b6590, #0e4570); }
.tile.t5::before { background: linear-gradient(160deg, #3e7f9d, #1d5574); }
.tile.t6::before { background: linear-gradient(160deg, #5c7754, #3d5537); }

/* ---------- Sämling-Band ---------- */
.band { background: var(--accent); color: var(--fg); position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; right: -10vw; top: 0; bottom: 0; width: 50vw; background: var(--twa-dgruen); opacity: .28; clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%); }
.band .word { position: absolute; right: -0.04em; top: -.12em; z-index: 0; font-size: clamp(5.5rem, 17vw, 19rem); font-weight: var(--w-xbold); line-height: 1; letter-spacing: -.04em; color: var(--twa-tgruen); opacity: .55; white-space: nowrap; pointer-events: none; user-select: none; }
.band .wrap { position: relative; z-index: 1; }
.band .label { color: var(--fg-brand); }
.band h2 { color: var(--fg-brand); max-width: 20ch; }
.band-grid { display: grid; gap: var(--s-4); }
.band-img { position: relative; }
.band-img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%); }
.band-img .yr { display: none; position: absolute; right: max(16px, var(--gutter)); bottom: -.2em; font-size: clamp(5rem, 3rem + 7vw, 11rem); font-weight: var(--w-xbold); line-height: .8; color: rgba(255,255,255,.85); letter-spacing: -.04em; }
@media (min-width: 900px) {
  .band-grid { grid-template-columns: 5fr 6fr; gap: var(--s-5); align-items: center; }
  .band-img { margin-right: calc(-1 * max(16px, var(--gutter)) - max(0px, (100vw - var(--max)) / 2)); }
}
.four { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-top: var(--s-5); }
.four a { display: block; background: rgba(255,255,255,.62); padding: 1.1rem 1.2rem 1.3rem; text-decoration: none; color: var(--fg); transition: background var(--d-state), transform var(--d-state) var(--ease-out); position: relative; }
.four a:hover { background: #fff; transform: translateY(-3px); }
.four .ph { display: flex; align-items: center; gap: .6rem; font-size: var(--t-label); font-weight: var(--w-medium); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-brand); }
.four .ph i { display: inline-block; width: 22px; height: 6px; transform: skewX(-14deg); background: var(--c, var(--fg-brand)); }
.four b { display: block; font-size: var(--t-h3); font-weight: var(--w-bold); color: var(--fg-brand); line-height: 1.2; margin-top: .6rem; }
.four span { display: block; font-size: var(--t-small); margin-top: .4rem; }
.four em { display: block; font-style: normal; font-size: var(--t-small); font-weight: var(--w-medium); color: var(--fg-brand); margin-top: .8rem; }

/* ---------- Impulse ---------- */
.impulse { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.imp { padding-top: 1.2rem; border-top: 2px solid var(--fg-brand); display: flex; flex-direction: column; gap: .7rem; }
.imp h3 { font-size: var(--t-h3); line-height: 1.25; }
.imp p { font-size: var(--t-small); }
.imp .link { margin-top: auto; align-self: flex-start; }

/* ---------- Kontakt ---------- */
.contact { display: grid; gap: var(--s-4); }
.contact h2 { max-width: 18ch; }
.cdata { display: grid; gap: 0; border-bottom: 1px solid var(--line); }
.cdata > * { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--line); font-size: var(--t-small); }
.cdata dt { color: var(--fg-muted); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-label); padding-top: .15rem; }
.cdata dd { margin: 0; }
.cdata a { text-decoration: none; font-weight: var(--w-medium); }
.cdata a:hover { text-decoration: underline; }
@media (min-width: 900px) { .contact { grid-template-columns: 6fr 5fr; gap: var(--s-5); align-items: start; } }

/* ---------- Footer ---------- */
.footer { background: var(--bg-brand); color: rgba(255,255,255,.8); position: relative; overflow: hidden; padding-block: calc(var(--s-5) + 2vw) var(--s-4); font-size: var(--t-small); }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10vw; background: var(--twa-nacht); clip-path: polygon(0 0, 100% 0, 100% 15%, 0 100%); }
.footer .wrap { position: relative; z-index: 1; }
.fgrid { display: grid; gap: var(--s-4); }
.footer img.flogo { height: 54px; width: auto; }
.footer .claim { margin-top: .9rem; letter-spacing: .06em; font-size: var(--t-label); text-transform: uppercase; color: var(--twa-hblau); font-weight: var(--w-medium); }
.footer h4 { color: #fff; font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--track-label); font-weight: var(--w-medium); margin-bottom: .8rem; }
.footer li + li { margin-top: .35rem; }
.footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.fbottom { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .8125rem; color: rgba(255,255,255,.6); }
@media (min-width: 900px) { .fgrid { grid-template-columns: 4fr 3fr 3fr 3fr; } }

/* Pilot-Hinweis */
.pilot { background: var(--twa-tgruen); color: #3d561a; font-size: .8125rem; text-align: center; padding: .45rem 1rem; line-height: 1.4; }
.pilot b { font-weight: var(--w-medium); }

/* ---------- Unterseiten-Bausteine ---------- */
.split { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .split { grid-template-columns: 4fr 7fr; gap: var(--s-5); } .split.even { grid-template-columns: 1fr 1fr; } }
.anchor-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s-4); }
.anchor-nav a { font-size: var(--t-small); font-weight: var(--w-medium); color: #fff; text-decoration: none; background: rgba(0,48,84,.72); border: 1px solid rgba(255,255,255,.35); padding: .5rem .9rem; border-radius: var(--radius); transition: background var(--d-micro), border-color var(--d-micro); }
.anchor-nav a:hover { background: rgba(255,255,255,.1); border-color: #fff; }

.block-no { font-size: var(--t-ghost); font-weight: var(--w-xbold); color: var(--ghost); line-height: .78; letter-spacing: -.05em; margin-left: -.06em; }
.svc-head { position: relative; }
.svc-head .block-no { position: absolute; left: -.08em; top: -.18em; z-index: 0; pointer-events: none; }
.svc-head > *:not(.block-no) { position: relative; z-index: 1; }
.svc-head { padding-top: clamp(3rem, 8vw, 7rem); }
@media (min-width: 900px) { .svc-head { position: sticky; top: 90px; align-self: start; } }

.modules { border-bottom: 1px solid var(--line); }
.mod { display: grid; grid-template-columns: 3.4rem 1fr; gap: .4rem 1.2rem; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.mod .m { font-size: 2.2rem; font-weight: var(--w-xbold); color: var(--fg-brand); line-height: 1; grid-row: span 3; }
.mod h3 { font-size: 1.15rem; overflow-wrap: anywhere; hyphens: auto; }
.mod .when { font-size: var(--t-label); font-weight: var(--w-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.mod p { font-size: var(--t-small); line-height: 1.5; }
.mod.hl .m { color: var(--accent); }
@media (min-width: 900px) { .mod { grid-template-columns: 4rem minmax(0,3fr) minmax(0,5fr); } .mod .m { grid-row: auto; } .mod .when { grid-column: 2; } .mod p { grid-column: 3; grid-row: 1 / span 2; } }

.facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fact { background: var(--bg); border-top: 3px solid var(--fg-brand); padding: 1.2rem 1.2rem 1.4rem; }
.section.alt .fact { background: #fff; }
.fact b { display: block; color: var(--fg-brand); font-weight: var(--w-bold); font-size: 1.1rem; line-height: 1.25; }
.fact span { display: block; font-size: var(--t-small); margin-top: .5rem; line-height: 1.5; }
.fact.g { border-top-color: var(--accent); }
.fact.d { border-top-color: var(--twa-dgruen); }
.fact.h { border-top-color: var(--twa-hblau); }

.gallery { display: grid; gap: .8rem; grid-template-columns: repeat(12, 1fr); }
.gallery figure { position: relative; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.gallery figure:hover img { transform: scale(1.03); }
.gallery figcaption { position: absolute; left: .8rem; bottom: .6rem; font-size: .8125rem; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.gallery .g1 { grid-column: 1 / -1; aspect-ratio: 16/9; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4vw)); }
.gallery .g2 { grid-column: 1 / -1; aspect-ratio: 3/2; }
.gallery .g3 { grid-column: 1 / -1; aspect-ratio: 3/2; }
.gallery .g4 { grid-column: 1 / -1; aspect-ratio: 3/2; }
@media (min-width: 700px) {
  .gallery .g1 { grid-column: 1 / span 8; grid-row: span 2; aspect-ratio: auto; min-height: 30rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4vw)); }
  .gallery .g2 { grid-column: 9 / span 4; aspect-ratio: 4/3; }
  .gallery .g3 { grid-column: 9 / span 4; aspect-ratio: 4/3; }
  .gallery .g4 { grid-column: 3 / span 10; aspect-ratio: 21/9; margin-top: -2vw; clip-path: polygon(0 2vw, 100% 0, 100% 100%, 0 100%); }
}

.figure-plain { border: 1px solid var(--line); background: #fff; padding: 1rem; align-self: start; }
.facts.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.brandband .four a { background: #fff; }
.brandband .four a:hover { background: var(--twa-tgruen); }
.figure-plain figcaption { font-size: var(--t-small); color: var(--fg-muted); margin-top: .6rem; }

.ctaband { background: var(--bg-alt); }
.ctaband .wrap { display: grid; gap: var(--s-3); align-items: center; }
@media (min-width: 900px) { .ctaband .wrap { grid-template-columns: 1fr auto; } }

/* ---------- Rechtliches ---------- */
.legal h2 { font-size: var(--t-h3); margin-top: var(--s-4); }
.legal p, .legal ul { margin-top: .8rem; max-width: var(--measure); }
.legal ul { list-style: disc; padding-left: 1.2rem; }

/* ---------- Bewegung Stufe 2 (Motion-Plan 21.10.2026) ---------- */
/* Logo bleibt beim Seitenwechsel stehen */
.brand img { view-transition-name: twa-logo; }

/* Hero: Bild im Rahmen wandert langsamer als die Seite (nur Desktop, nur mit Unterstützung) */
.hero-img .par { position: absolute; inset: -8% 0 0 0; height: 116%; }
.hero-img .slides img { position: absolute; }
@supports (animation-timeline: scroll()) {
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .hero-img .par { animation: par-hero linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .brandband::before { animation: par-keil linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .band .word { animation: par-word linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .pagehead .ghost { animation: par-ghost linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
  }
}
@keyframes par-hero { from { transform: translateY(0); } to { transform: translateY(7%); } }
@keyframes par-keil { from { transform: translateX(3%); } to { transform: translateX(-3%); } }
@keyframes par-word { from { transform: translateX(4%); } to { transform: translateX(-4%); } }
@keyframes par-ghost { from { transform: translateY(0); } to { transform: translateY(18%); } }

/* Haltung: grüne Linie zieht sich auf */
.js .gline { transform: scaleX(0); transform-origin: left; opacity: 1; }
.js .gline.in { transform: none; transition: transform 700ms var(--ease-out) 150ms; }
.js .gline.rv { transform: scaleX(0); }
.js .gline.rv.in { transform: none; }

/* Leistungen: Nummernblock wischt von oben */
.js .card .no { transform: translateY(-101%); }
.js .card.in .no { transform: none; transition: transform 550ms var(--ease-out) 180ms; }

/* Für wen: Ghost-Ziffer kommt zuletzt, Zeile reagiert */
.js .zrow .n { opacity: 0; transform: translateX(-10px); }
.js .zrow.in .n { opacity: 1; transform: none; transition: opacity 500ms 320ms, transform 500ms var(--ease-out) 320ms; }
.zrow { transition: background var(--d-state); margin-inline: calc(-1 * var(--s-2)); padding-inline: var(--s-2); }
@media (hover: hover) { .zrow:hover { background: var(--bg-alt); } }

/* Taufenbach: Porträt wischt per Maske auf */
.js .portrait img { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.js .portrait.in img { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schwung-rise)), 0 100%); transition: clip-path 900ms var(--ease-out); }
@media (min-width: 900px) { .js .portrait.in img { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4vw)); } }

/* Projekte: Jahreszahl nach der Kachel, grüne Linie wächst beim Hover */
.js .tile .yr { opacity: 0; transform: translateX(-6px); }
.js .tile.in .yr { opacity: 1; transform: none; transition: opacity 500ms 160ms, transform 500ms var(--ease-out) 160ms; }
.tile .gl { transition: width var(--d-state) var(--ease-out); }
.tile:hover .gl { width: 72px; }

/* Sämling: Wort gleitet von rechts ein */
.js .band .word.rv { opacity: 0; transform: translateX(6%); }
.js .band .word.rv.in { opacity: .55; transform: none; transition: opacity 900ms, transform 1100ms var(--ease-out); }

/* Impulse: Oberlinie zieht sich */
.imp { border-top: 0; position: relative; padding-top: calc(1.2rem + 2px); }
.imp::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--fg-brand); transform-origin: left; }
.js .imp::before { transform: scaleX(0); }
.js .imp.in::before { transform: none; transition: transform 600ms var(--ease-out) 100ms; }

/* Kennzahlen und Treppe: Ziffern zählen (JS setzt den Text) */
.numbers b, .stair b { font-variant-numeric: tabular-nums; }

/* Unterseiten-Kopf: zweite Zeile und Ghost versetzt */
.js .pagehead h1 span { opacity: 0; transform: translateY(18px); animation: up 700ms var(--ease-out) 140ms forwards; }
.js .pagehead .ghost { opacity: 0; animation: ghost-in 900ms var(--ease-out) 350ms forwards; }
@keyframes ghost-in { to { opacity: 1; } }

/* ---------- Reveal ---------- */
.js .rv { opacity: 0; transform: translateY(18px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); transition-delay: var(--dl, 0ms); }

/* Hero-Hook */
.js .hero h1 .l1, .js .hero h1 .l2, .js .pagehead h1 { opacity: 0; transform: translateY(18px); animation: up 700ms var(--ease-out) forwards; }
.js .hero h1 .l2 { animation-delay: 120ms; }
.js .hero .hero-img .slides, .js .pagehead.wipe::before { animation: wipe 1100ms var(--ease-out) 150ms both; }
@keyframes up { to { opacity: 1; transform: none; } }
@keyframes wipe { from { opacity: 0; transform: translateX(6%); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .hero h1 .l1, .js .hero h1 .l2, .js .pagehead h1, .js .pagehead h1 span, .js .pagehead .ghost, .js .stairs.grow .stair, .js .hero .hero-img .slides, .js .gline, .js .card .no, .js .zrow .n, .js .portrait img, .js .tile .yr, .js .band .word, .js .imp::before { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; clip-path: revert-layer; }
  .js .band .word { opacity: .55 !important; }
  .card:hover, .four a:hover { transform: none; }
}
@media (hover: none) { .card:hover, .four a:hover, .btn:hover { transform: none; } }

/* =========================================================
   v6 · 22.10.2026: Footer-Logo, Nach-oben, Seitenleiste, Team, TWA-Flix
   ========================================================= */
.flogo-link { display: inline-block; transition: opacity var(--d-micro); }
.flogo-link:hover { opacity: .85; }
.flogo-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.fsocial { display: flex; gap: .5rem; margin-top: 1.2rem; }
.fsocial a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: var(--radius); transition: background var(--d-micro), border-color var(--d-micro); }
.fsocial a:hover { background: var(--accent); border-color: var(--accent); color: var(--twa-text); text-decoration: none; }
.fsocial svg { width: 18px; height: 18px; }

/* Nach oben: mitlaufender Pfeil unten rechts */
.totop { position: fixed; right: calc(max(16px, env(safe-area-inset-right, 0px)) + 4px); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); z-index: 45;
  width: 48px; height: 48px; display: grid; place-items: center; background: var(--bg-brand); color: #fff; border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(0,48,84,.25); opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--d-state) var(--ease-out), transform var(--d-state) var(--ease-out), background var(--d-micro); }
.totop svg { width: 22px; height: 22px; }
.totop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--accent); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--twa-nacht); }
.totop:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Seitenleiste: Kompetenz-Center, LinkedIn, Instagram, Flix */
.rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 44; display: flex; flex-direction: column; gap: 2px;
  padding-right: env(safe-area-inset-right, 0px); }
.rail a { position: relative; display: grid; place-items: center; width: 46px; height: 46px; background: var(--bg-brand); color: #fff; text-decoration: none; transition: background var(--d-micro); }
.rail a.rail-kc { background: var(--accent); color: var(--twa-text); height: 52px; }
.rail a:hover { background: var(--twa-nacht); color: #fff; }
.rail a.rail-kc:hover { background: #7aa338; color: var(--twa-text); }
.rail .ico svg { width: 20px; height: 20px; display: block; }
.rail .tip { position: absolute; right: 100%; top: 50%; transform: translate(8px, -50%); white-space: nowrap; background: var(--twa-nacht); color: #fff; font-size: var(--t-label); font-weight: var(--w-medium); letter-spacing: .04em;
  padding: .45rem .8rem; opacity: 0; pointer-events: none; transition: opacity var(--d-micro), transform var(--d-state) var(--ease-out); }
.rail a:hover .tip, .rail a:focus-visible .tip { opacity: 1; transform: translate(0, -50%); }
.rail a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (max-width: 899px) { .rail { display: none; } }
@media (min-width: 900px) { .footer .fbottom { padding-right: 56px; } }

/* Team: eigenes Band, lebendiger */
.teamband { background: var(--bg-alt); position: relative; overflow: hidden; }
.team-head { max-width: 46rem; display: grid; gap: .6rem; margin-bottom: var(--s-4); }
.crew { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.crew li { position: relative; overflow: hidden; background: var(--c); color: #fff; min-height: 19rem; padding: 1.2rem 1.2rem 1.3rem; display: flex; flex-direction: column; justify-content: flex-end;
  clip-path: polygon(0 1.6rem, 100% 0, 100% 100%, 0 100%); transition: transform var(--d-state) var(--ease-out), box-shadow var(--d-state); }
.crew li:nth-child(even) { clip-path: polygon(0 0, 100% 1.6rem, 100% 100%, 0 100%); }
.crew .ini { position: absolute; right: -.08em; top: .05em; font-size: 7.5rem; font-weight: var(--w-xbold); line-height: 1; letter-spacing: -.05em; color: rgba(255,255,255,.14);
  transition: transform .6s var(--ease-out), color var(--d-state); }
.crew .role { font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: var(--w-medium); color: rgba(255,255,255,.75); position: relative; }
.crew b { position: relative; font-size: 1.25rem; font-weight: var(--w-xbold); line-height: 1.15; margin-top: .3rem; }
.crew b::before { content: ""; display: block; width: 32px; height: 3px; background: var(--accent); margin-bottom: .7rem; transition: width var(--d-state) var(--ease-out); }
.crew li[style*="dgruen"] b::before { background: #c9e29b; }
.crew .what { position: relative; font-size: var(--t-small); color: rgba(255,255,255,.88); margin-top: .35rem; line-height: 1.35; }
.crew .ask { position: relative; font-size: .875rem; line-height: 1.4; color: #fff; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.25);
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease-out), opacity var(--d-state), margin var(--d-state), padding var(--d-state); margin-top: 0; padding-top: 0; border-top-color: transparent; }
@media (hover: hover) {
  .crew li:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,48,84,.22); }
  .crew li:hover .ini { transform: translate(-.15em, .15em) scale(1.08); color: rgba(255,255,255,.24); }
  .crew li:hover b::before { width: 64px; }
  .crew li:hover .ask { max-height: 6rem; opacity: 1; margin-top: .9rem; padding-top: .8rem; border-top-color: rgba(255,255,255,.25); }
}
@media (hover: none) { .crew .ask { max-height: none; opacity: 1; margin-top: .9rem; padding-top: .8rem; border-top-color: rgba(255,255,255,.25); } .crew li { min-height: 0; padding-top: 3.2rem; } }
.team-note { margin-top: var(--s-3); }
.quals-2 { margin-top: 0; }
@media (min-width: 900px) { .quals-2 { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); } }

/* TWA-Flix */
.flix { display: grid; gap: var(--s-4) var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 900px) { .flix { grid-template-columns: repeat(3, 1fr); } .flick.feat { grid-column: span 2; } .flick.feat .meta b { font-size: var(--t-h2); } }
.flick { display: flex; flex-direction: column; text-decoration: none; color: var(--fg); }
.flick .still { position: relative; display: block; overflow: hidden; aspect-ratio: 16/9; background: var(--c); }
.flick.feat .still { flex: 1; min-height: 0; }
.flick .still img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .8s var(--ease-out), filter var(--d-state); }
.flick .still::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(0,48,84,0) 35%, rgba(0,48,84,.72)); }
.flick .still::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: var(--c); clip-path: polygon(0 100%, 100% 0, 100% 100%); z-index: 2; }
.flick .no { position: absolute; left: .9rem; bottom: .55rem; z-index: 3; color: #fff; font-weight: var(--w-xbold); font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.flick.feat .no { font-size: 4.6rem; }
.flick .play { position: absolute; z-index: 3; left: 50%; top: 46%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--fg-brand);
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); transition: transform var(--d-state) var(--ease-out), background var(--d-state); }
.flick .play svg { width: 26px; height: 26px; margin-left: 3px; }
.flick .dur { position: absolute; z-index: 3; right: .7rem; top: .7rem; background: rgba(0,48,84,.85); color: #fff; font-size: var(--t-label); font-weight: var(--w-medium); padding: .2rem .5rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.flick .meta { display: grid; gap: .35rem; padding-top: 1rem; }
.flick .meta .label { color: var(--c); filter: brightness(.85); }
.flick .meta b { font-size: var(--t-h3); font-weight: var(--w-xbold); color: var(--fg-brand); line-height: 1.15; }
.flick .meta > span:not(.label) { font-size: var(--t-small); color: var(--fg-muted); }
.flick .meta em { font-style: normal; font-size: var(--t-small); font-weight: var(--w-medium); color: var(--fg-brand); margin-top: .2rem; }
.flick:hover .still img { transform: scale(1.04); filter: saturate(1); }
.flick:hover .play { transform: scale(1.1); background: var(--accent); }
.flick:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.flix-foot { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--s-3); }
.flix-foot p { max-width: 52ch; }
.flixteaser { display: grid; gap: var(--s-3); align-items: center; margin-top: var(--s-4); padding: var(--s-3); background: var(--bg-brand); color: #fff; text-decoration: none; position: relative; overflow: hidden; }
.flixteaser b { font-size: var(--t-h3); font-weight: var(--w-xbold); color: #fff; }
.flixteaser span { color: rgba(255,255,255,.8); font-size: var(--t-small); }
@media (min-width: 700px) { .flixteaser { grid-template-columns: auto 1fr auto; } }
.flixteaser .pl { width: 54px; height: 54px; display: grid; place-items: center; background: var(--accent); color: var(--twa-text); clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); }
.flixteaser .pl svg { width: 22px; height: 22px; margin-left: 3px; }
.flixteaser:hover { background: var(--twa-nacht); }
@media (prefers-reduced-motion: reduce) { .crew li, .crew .ini, .flick .still img, .flick .play, .totop { transition: none; } }
@media (hover: hover) {
  .js .crew li.rv.in:hover { transform: translateY(-6px); transition: transform var(--d-state) var(--ease-out), box-shadow var(--d-state); transition-delay: 0ms; }
}

.flick.channel { justify-content: space-between; background: var(--bg-brand); color: #fff; padding: 1.4rem; min-height: 100%; position: relative; overflow: hidden; }
.flick.channel::before { content: ""; position: absolute; right: -10%; top: 0; bottom: 0; width: 55%; background: var(--twa-nacht); clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); }
.flick.channel > * { position: relative; }
.flick.channel .label { color: var(--accent); filter: none; }
.flick.channel b { display: block; font-size: var(--t-h3); font-weight: var(--w-xbold); line-height: 1.15; margin-top: .4rem; }
.flick.channel .txt { display: block; color: rgba(255,255,255,.82); font-size: var(--t-small); margin-top: .6rem; }
.flick.channel .yt { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.2rem; font-weight: var(--w-medium); font-size: var(--t-small); }
.flick.channel .yt svg { width: 28px; height: 28px; color: #fff; }
.flick.channel:hover { background: var(--twa-nacht); }
.flick.channel:hover .yt { color: var(--accent); }


/* =========================================================
   v7 · 22.10.2026: Methode als Welle mit Skizzen, Leistungskarten als Trading Cards
   ========================================================= */

/* Methode als Scroll-Erzählung: linke Bühne bleibt stehen, rechts laufen die sechs Stufen vorbei */
.story { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.stage { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 2; height: 40vh; min-height: 260px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.frames { position: absolute; inset: 0; }
.frame { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity 700ms var(--ease-out), transform 1400ms var(--ease-out); }
.frame img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 1.2rem; }
.frame[data-step="5"] img { object-fit: cover; padding: 0; }
.frame.on { opacity: 1; transform: none; }
.stage-foot { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 0 .8rem; padding: .8rem 1rem; background: linear-gradient(0deg, rgba(255,255,255,.96), rgba(255,255,255,.75) 70%, rgba(255,255,255,0)); }
.stage-no { font-size: 2.4rem; font-weight: var(--w-xbold); color: var(--fg-brand); line-height: 1; letter-spacing: -.02em; }
.stage-t { font-size: var(--t-small); font-weight: var(--w-medium); color: var(--fg-brand); padding-bottom: .3rem; }
.bars { display: flex; gap: 3px; align-items: end; height: 34px; }
.bars i { display: block; width: 14px; background: var(--twa-tblau); clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%); height: calc(14px + var(--k) * 4px); transition: background 400ms, transform 400ms var(--ease-out); }
.bars i:nth-child(1) { --k: 0; } .bars i:nth-child(2) { --k: 1; } .bars i:nth-child(3) { --k: 2; } .bars i:nth-child(4) { --k: 3; } .bars i:nth-child(5) { --k: 4; } .bars i:nth-child(6) { --k: 5; }
.bars i.done { background: var(--twa-hblau); }
.bars i.on { background: var(--accent); transform: translateY(-3px); }
.bars i:nth-child(6).on { background: var(--fg-brand); }
.steps { display: grid; gap: 0; }
.step { padding-block: clamp(2rem, 6vh, 4rem); border-top: 1px solid var(--line); display: grid; grid-template-columns: 3.4rem 1fr; gap: .3rem 1rem; opacity: .4; transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transform: translateX(6px); }
.step.on { opacity: 1; transform: none; }
.step b { grid-row: span 3; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem); font-weight: var(--w-xbold); color: var(--fg-brand); line-height: .9; letter-spacing: -.02em; }
.step h3 { font-size: var(--t-h3); }
.step p { font-size: var(--t-body); line-height: 1.5; max-width: 40ch; }
.step .z { font-size: var(--t-label); font-weight: var(--w-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); margin-top: .4rem; }
@media (min-width: 900px) {
  .story { grid-template-columns: 6fr 5fr; gap: var(--s-5); align-items: start; }
  .stage { top: calc(84px + env(safe-area-inset-top, 0px)); height: calc(100vh - 124px); max-height: 760px; }
  .steps { padding-block: 14vh; }
  .step { min-height: 52vh; align-content: center; padding-block: 2.5rem; }
  .step:first-child { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .frame, .step, .bars i { transition: none; } .step { opacity: 1; transform: none; } }

/* Leistungskarten als Trading Cards: Neigung zur Maus, Schimmer, einmal ausgeteilt, per Klick erneut */
.cards { perspective: 1400px; }
.card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --sh: 0; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 600ms var(--ease-out), box-shadow 600ms; }
.card.tilting { transition: transform 120ms linear, box-shadow 600ms; }
.card:hover { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px); box-shadow: var(--shadow); }
.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 60%);
  opacity: var(--sh); transition: opacity 500ms var(--ease-out); mix-blend-mode: soft-light; }
.card:hover::after { --sh: 1; }
.card::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 48%, rgba(139,181,66,.25) 52%, transparent 70%); background-size: 240% 100%; background-position: 120% 0; }
.js .card.rv { opacity: 0; transform: translateY(40px) rotateX(14deg) rotateZ(-1.5deg); }
.js .card.rv.in { opacity: 1; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: opacity 500ms var(--ease-out), transform 900ms cubic-bezier(.2,.9,.25,1.05); transition-delay: var(--dl, 0ms); }
.js .card.rv.in::before { animation: sheen 1400ms var(--ease-out) calc(var(--dl, 0ms) + 500ms) both; }
.js .card.rv.in.redeal { animation: redeal 700ms var(--ease-out); }
.js .card.rv.in.redeal::before { animation: sheen 1100ms var(--ease-out) 150ms both; }
@keyframes sheen { 0% { opacity: 0; background-position: 120% 0; } 15% { opacity: 1; } 100% { opacity: 0; background-position: -120% 0; } }
@keyframes redeal { 0% { transform: rotateX(0) rotateY(0); } 30% { transform: translateY(-12px) rotateX(10deg) rotateZ(-1deg); } 100% { transform: rotateX(0) rotateY(0); } }
.card .no { z-index: 1; position: relative; }
@media (hover: none) { .card::after { display: none; } .card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .card.rv, .js .card.rv.in { transform: none !important; opacity: 1 !important; } .js .card.rv.in::before, .js .card.rv.in.redeal { animation: none !important; } .card { transition: none; } }


/* =========================================================
   v8 · Die Begehung: Kamerafahrt per Scroll (Familie 9, Pilot aus Renderings)
   ========================================================= */
.flight { position: relative; height: 560vh; background: var(--twa-nacht); }
.flight .screen { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--twa-nacht); }
.flight .layers { position: absolute; inset: 0; }
.flight .layer { position: absolute; inset: -6%; width: 112%; max-width: none; height: 112%; object-fit: cover; opacity: 0; will-change: transform, opacity; transform: scale(1); }
.flight .halts { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; padding: 0 max(16px, env(safe-area-inset-left, 0px)) calc(4.5rem + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.flight .halt { position: absolute; left: max(16px, var(--gutter)); right: max(16px, var(--gutter)); bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); max-width: 34rem; display: grid; gap: .4rem; color: #fff; opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); padding: 1.2rem 1.4rem; background: rgba(0,48,84,.72); backdrop-filter: blur(6px); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 10px)); }
.flight .halt .label { color: var(--accent); }
.flight .halt b { font-size: var(--t-h3); font-weight: var(--w-xbold); line-height: 1.2; }
.flight .halt p { font-size: var(--t-small); color: rgba(255,255,255,.85); }
.flight .halt.on { opacity: 1; transform: none; }
.flight-ui { position: absolute; z-index: 11; left: max(16px, var(--gutter)); right: max(16px, var(--gutter)); bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: .8rem; color: #fff; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; font-weight: var(--w-medium); }
.flight-ui .fl-no { font-size: 1.6rem; font-weight: var(--w-xbold); letter-spacing: -.02em; line-height: 1; }
.flight-ui .fl-of { opacity: .6; }
.flight-ui .fl-bar { flex: 1; height: 3px; background: rgba(255,255,255,.22); position: relative; }
.flight-ui .fl-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }
.flight-ui .fl-hint { opacity: .7; animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
.flight.end .fl-hint { animation: none; opacity: 0; }
@media (min-width: 900px) { .flight .halt { left: auto; right: calc(max(16px, var(--gutter)) + 56px); bottom: 5rem; } .flight-ui { padding-right: 72px; } }
@media (max-width: 899px) { .flight-ui { padding-right: 64px; } }
@media (prefers-reduced-motion: reduce) { .flight { height: auto; } .flight .screen { position: relative; height: auto; } .flight .layers { position: relative; display: grid; } .flight .layer { position: relative; inset: auto; width: 100%; height: auto; opacity: 1; transform: none; } .flight .halts, .flight-ui { display: none; } }
.no-js .flight { height: auto; } .no-js .flight .screen { position: relative; height: auto; } .no-js .flight .layer { position: relative; inset: auto; width: 100%; height: auto; opacity: 1; }


/* =========================================================
   v9 · 22.10.2026: Leistungskarten mobil als Karussell mit Schnapppunkten
   ========================================================= */
@media (max-width: 899px) {
  .cards { display: flex; gap: .8rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px));
    margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); padding-block: .5rem 1.2rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cards::-webkit-scrollbar { display: none; }
  .cards .card { flex: 0 0 84%; scroll-snap-align: start; scroll-snap-stop: always; }
  .cards .card:last-child { margin-right: max(16px, env(safe-area-inset-right, 0px)); }
  /* Schimmer läuft am Handy immer dann, wenn eine Karte einrastet */
  .js .card.rv.in.snap::before { animation: sheen 1200ms var(--ease-out) 120ms both; }
  .js .card.rv.in.snap { transform: translateY(-4px); box-shadow: var(--shadow); transition: transform 500ms var(--ease-out), box-shadow 500ms; }
}
.cards-dots { display: none; justify-content: center; gap: .5rem; margin-top: .2rem; }
.cards-dots i { width: 22px; height: 4px; background: var(--line); clip-path: polygon(0 100%, 15% 0, 100% 0, 85% 100%); transition: background var(--d-state); }
.cards-dots i.on { background: var(--accent); }
@media (max-width: 899px) { .cards-dots { display: flex; } }