/* edumod-v6.css — Sammelkopie 06 (Handoff «Startseite v3», edumod-hp-v06.zip). Der Style-Block und die Inline-Styles der Referenz
   startseite-v3.html als Klassen; nur Tokens aus edumod.css. Lädt nach edumod-wp.css. Die Blöcke Videobox, Team und Kontakt stammen
   unverändert aus edumod-v3.css der Variante v03 (Klassen v3- → v6-). */

/* Header (User 2026-10-13): «Termin vereinbaren» (header.php, .btn-primary = rot) rechtsbündig über .nav-right{margin-left:auto}, ab 821 px
   sichtbar, darunter mobile Leiste .mcta (edumod.js). Logo 56 px beim Start, 42 px ab .site-header.scrolled (Referenz 38 px fest); flex:none,
   sonst staucht der Flex-Container das Logo, sobald der Platz knapp wird. Burger-Menü schon ab 1040 px (Referenz 820): fünf Menüpunkte, grosses
   Logo und Button brauchen 905 px (gemessen 2026-10-13; darunter staucht der Browser das Logo, bei 1001 px ragte der Button 4 px über den Rand). Die Regeln des offenen
   Menüs sind die der Referenz (edumod.css, Block 820 px) plus die v2-breit-Regeln unten, hier bis 1040 px wiederholt. */
@media(max-width:820px){.nav-termin{display:none}}
@media(max-width:1040px){
  .nav-links,.nav-tel{display:none}
  .nav-toggle{display:flex}
  .nav.open .nav-links{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);
    padding:14px var(--gutter);gap:2px;box-shadow:var(--shadow);max-height:calc(100vh - 78px);overflow:auto}
  .nav.open .nav-item{flex-direction:column;align-items:stretch}
  .nav.open .nav-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:transparent;padding:0 0 0 14px;
    min-width:0;border-left:2px solid var(--line);margin:2px 0 4px 14px;display:none}
  .nav.open .nav-item.open .nav-sub{display:flex}
  .nav.open .nav-sub-toggle{width:100%;justify-content:space-between}
  .nav.open .nav-sub.v2-breit{min-width:0;padding:0 0 0 14px} /* Gruppen bleiben im Tablet-Panel dreispaltig (Sichtprüfung 900 px), eine Spalte erst ab 820 px (Regel unten) */
}
/* Logo-Box fest 191 px breit (= 56 px × 409/120): nur das Bild schrumpft, das Menü bleibt stehen (User 2026-10-13: «Das Menü soll nicht wandern»). */
.brand{height:60px;width:191px;flex:none;justify-content:flex-start}.brand img{height:56px}
.brand img{transition:height .25s var(--ease)}
.site-header.scrolled .brand img{height:42px}
/* Eingeloggt: WordPress-Adminleiste (32 px, bis 782 px 46 px) ist fixed; der sticky Header rutschte beim Scrollen darunter und wirkte abgeschnitten
   (User 2026-10-13). Referenz kennt keine Adminleiste; gleicher Befund auf test → Fix-Kandidat fürs Repo. */
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
/* Pill-Buttons (Handoff, wiederverwendbar: .pill + .pill-primary | .pill-secondary) */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border-radius:10px;font-family:var(--display);font-weight:600;font-size:1rem;line-height:1;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.pill-arr{display:inline-block;font-size:1.1em;line-height:1;transition:transform .18s ease}
.pill:hover .pill-arr{transform:translateX(4px)}
.pill-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 2px rgba(17,42,71,.08),0 3px 8px -2px rgba(17,42,71,.12)}
.pill-primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000);color:var(--accent-ink);transform:translateY(-2px);box-shadow:0 2px 4px rgba(17,42,71,.08),0 6px 14px -4px rgba(17,42,71,.16)}
.pill-secondary{background:#fff;color:var(--blau);box-shadow:inset 0 0 0 1.5px var(--blau)}
.pill-secondary:hover{background:var(--tint);color:var(--blau);box-shadow:inset 0 0 0 2px var(--blau)}
.pill:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.pill-primary:focus-visible{outline-color:var(--accent)}
.pill-group{display:flex;flex-wrap:wrap;gap:18px;margin-top:34px;align-items:center}
/* Gleich breite Pillen im Hero (2026-10-13): beide Buttons teilen sich die Breite der längeren */
.v6-hero .pill-group{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:max-content;max-width:100%}
.v6-hero .pill-group .pill{width:100%;min-width:0}
@media(max-width:1100px){.v6-hero .pill-group{grid-auto-flow:row;width:100%;max-width:420px}}
@media(max-width:900px){.v6-hero .pill-group{max-width:none}}

/* Hero: Text links, Porträt rechts ohne Kachel */
.v6-hero{padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(48px,6vw,96px);overflow:hidden}
/* Porträt wieder grösser (2026-10-14): Spaltenverhältnis zugunsten des Bilds */
/* Drei Grid-Kinder: Text, Porträt, Weiterlink. Desktop: Text + Link links als Paar vertikal zentriert (1fr-Spacer oben/unten), Porträt rechts über alle Reihen.
   ≤900 px: Text, Porträt, Link untereinander, Porträt und Link mittig (User 2026-10-14). */
.v6-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(32px,5vw,64px);row-gap:0;align-items:center}
.v6-hero-grid>div:first-child{grid-column:1;grid-row:2}
.v6-hero-grid .v6-hero-weiter{grid-column:1;grid-row:3;justify-self:start}
.v6-hero-grid .v6-hero-photo{grid-column:2;grid-row:1 / span 4}
.v6-hero-grid>*{min-width:0}
.v6-hero h1{font-family:var(--display);font-weight:800;color:var(--blau);font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.v6-hero-lead{color:var(--ink-soft);font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.6;margin-top:22px;max-width:54ch;text-wrap:pretty}
.v6-hero-ziel{color:var(--meta);font-size:.95rem;line-height:1.5;margin-top:14px;max-width:54ch}
/* Hero-Weiterlink statt Pillen (User 2026-10-14): Textzeile, beim Hover zeichnet sich eine rote Umkreisung wie mit dem Stift */
.v6-hero-weiter{display:inline-flex;align-items:center;gap:12px;margin-top:32px;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--blau);text-decoration:none}
.v6-hero-weiter .kreis{position:relative;display:inline-block;padding:8px 16px}
.v6-hero-weiter .kreis svg{position:absolute;inset:-6px -10px;width:calc(100% + 20px);height:calc(100% + 12px);color:var(--accent);pointer-events:none;overflow:visible}
.v6-hero-weiter .kreis path{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .55s var(--ease)}
.v6-hero-weiter:hover .kreis path,.v6-hero-weiter:focus-visible .kreis path{stroke-dashoffset:0}
.v6-hero-weiter .arr{color:var(--accent);transition:transform .3s var(--ease)}
.v6-hero-weiter:hover{color:var(--blau)}
.v6-hero-weiter:hover .arr{transform:translateY(3px)}
/* Pfeil nach rechts (Unterseiten): seitlich statt nach unten bewegen */
.v6-hero-weiter[href*="#projekte"]:hover .arr{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.v6-hero-weiter .kreis path{transition:none}}
.v6-hero-photo{position:relative;width:100%}
.v6-hero-bild{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:3/3.4}
.v6-hero-bild img{width:100%;height:100%;object-fit:cover;object-position:82% top;display:block}

/* Kundenband direkt unter dem Hero und Award-Hinweis: ein Tint-Band */
.v6-kunden.marquee{margin-top:0;padding:34px 0 10px;background:var(--tint);border-top:1px solid var(--line);border-bottom:none}
.v6-award{background:var(--tint);padding:clamp(28px,4vw,48px) 0 clamp(32px,4vw,52px);border-bottom:1px solid var(--line)}
.v6-award-inner{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(20px,3vw,44px)}
.v6-award-siegel{width:clamp(120px,14vw,170px);height:auto;display:block;filter:drop-shadow(0 6px 14px rgba(17,42,71,.14))}
.v6-award-text{max-width:44ch}
.v6-award-text b{display:block;margin:0;font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.3;color:var(--blau)}
.v6-award-text p{margin:8px 0 0;color:var(--ink-soft);font-size:.98rem;line-height:1.55;text-wrap:pretty}
.v6-award-text .link-arrow{margin-top:12px;font-size:.98rem}

/* Leistungen: Kopf zentriert, drei kompakte Karten, die ganze Karte ist der Link */
.v6-leistungen{padding:clamp(56px,7vw,96px) 0}
.v6-leistungen .section-head{max-width:60ch}
.v6-leistungen .section-head .lead{margin-left:auto;margin-right:auto}
.v2-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(32px,4vw,48px)}
.v2-card{position:relative;display:flex;flex-direction:column;min-height:300px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:30px 30px 26px;text-decoration:none;color:inherit;overflow:hidden;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
/* Reveal und Karten-Hover teilen sich transform: die Reveal-Regel (.js .reveal) ist spezifischer, deshalb hier beides in einer Übergangsliste. */
.js .v2-card.reveal{transition:opacity .7s var(--ease),transform .35s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.v2-card-nr{position:absolute;right:26px;top:24px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--meta)}
.v2-card-ic{width:52px;height:52px;display:grid;place-items:center;color:var(--blau)}
.v2-card-ic svg{width:52px;height:52px;display:block}
.v2-card h3{margin:26px 0 0;font-family:var(--display);font-weight:700;font-size:1.32rem;line-height:1.2;letter-spacing:-.015em;color:var(--blau);text-wrap:balance}
.v2-card p{margin:12px 0 0;color:var(--ink-soft);font-size:1.02rem;line-height:1.55;flex:1;text-wrap:pretty}
.v2-card .link-arrow{margin-top:26px;font-size:.95rem}
/* Unterseiten-Links in der Kachel (2026-10-14) */
.v2-card-links{display:flex;flex-direction:column;gap:0;margin-top:22px;position:relative;z-index:1}
.v2-card-links a{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--blau);text-decoration:none;transition:color .2s var(--ease)}
.v2-card-links a .arr{color:var(--accent);transition:transform .25s var(--ease)}
.v2-card-links a:hover{color:var(--accent)}
.v2-card-links a:hover .arr{transform:translateX(4px)}
.v2-card-links a:focus-visible{outline:3px solid var(--blau);outline-offset:2px;border-radius:4px}
/* Variante 2b (2026-10-14): handgezeichneter roter Unterstrich wächst beim Hover von links unter das Wort, wie der Stift-Effekt im Hero */
.v2-card-links .lbl{position:relative;display:inline-block}
.v2-card-links .lbl svg{position:absolute;left:-2px;bottom:-5px;width:calc(100% + 4px);height:8px;color:var(--accent);pointer-events:none;overflow:visible}
.v2-card-links .lbl path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .5s var(--ease)}
.v2-card-links a:hover .lbl path,.v2-card-links a:focus-visible .lbl path{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.v2-card-links .lbl path{transition:none}}
.v2-card-drop{position:absolute;right:-22px;bottom:-30px;display:block;width:96px;height:112px;fill:var(--tint);transition:transform .35s var(--ease),fill .35s var(--ease)}
.v2-card:hover,.js .v2-card.reveal:hover{border-color:color-mix(in srgb,var(--blau) 35%,var(--line));box-shadow:0 10px 28px -16px rgba(17,42,71,.22);transform:translateY(-3px)}
.v2-card:hover .arr{transform:translateX(4px)}
.v2-card:hover .v2-card-drop{transform:translate(-6px,-8px);fill:color-mix(in srgb,var(--accent) 14%,var(--tint))}
.v2-card .v2-card-drop{pointer-events:none}
/* Farbkarten (Variante 1d, 2026-10-14): Phasenfarben Petrol / Blau / Stahl, weisse Schrift */
.v2-card-farbig{--phase:var(--petrol);background:var(--phase);border-color:transparent;color:#fff}
.v2-card-farbig:nth-child(2){--phase:var(--blau)}
.v2-card-farbig:nth-child(3){--phase:var(--stahl)}
.v2-card-farbig .v2-card-ic,.v2-card-farbig h3{color:#fff}
.v2-card-farbig p{color:rgba(255,255,255,.86)}
.v2-card-farbig .v2-card-links a{border-top-color:rgba(255,255,255,.24);color:#fff}
.v2-card-farbig .v2-card-links a .arr{color:#fff;transition:transform .3s var(--ease),color .3s var(--ease)}
.v2-card-farbig .v2-card-links a:hover .arr,.v2-card-farbig .v2-card-links a:focus-visible .arr{color:var(--accent);transform:translateX(5px)}
.v2-card-farbig .v2-card-links a:hover{color:#fff}
.v2-card-farbig .v2-card-links a:focus-visible{outline-color:#fff}
.v2-card-farbig .v2-card-drop{fill:#fff;opacity:.1}
.v2-card-farbig:hover,.js .v2-card-farbig.reveal:hover{border-color:transparent;box-shadow:var(--shadow-lg)}
.v2-card-farbig:hover .v2-card-drop{fill:#fff}
.v2-card-farbig:focus-within{outline:3px solid var(--blau);outline-offset:3px}
.v2-card:focus-visible{outline:3px solid var(--blau);outline-offset:3px}

/* Videobox: Bild links, Text rechts, Kaufen/Mieten gleichwertig (aus v03) */
.v6-videobox{overflow:hidden;position:relative;background:transparent;padding-top:clamp(96px,11vw,160px);padding-bottom:clamp(96px,11vw,160px)}
/* Schräge Verlaufsfläche (2026-10-13): Tint → Creme, Ober- und Unterkante um ~3° gekippt. Nur CD-Tokens. */
.v6-videobox::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(112deg,var(--tint) 0%,#D6DEE7 48%,var(--creme) 100%);
  clip-path:polygon(0 clamp(28px,4vw,64px),100% 0,100% calc(100% - clamp(28px,4vw,64px)),0 100%)}
.v6-videobox>.wrap,.v6-videobox>.watermark{position:relative;z-index:1}
.v6-videobox+.pc-section{padding-top:clamp(40px,5vw,72px)}
.v6-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.v6-vb-bild{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:#fff;aspect-ratio:4/3.3}
.v6-vb-bild img{width:100%;height:100%;object-fit:cover;display:block}
.v6-vb h2{font-family:var(--display);font-weight:800;color:var(--blau);font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.08;letter-spacing:-.02em;margin-top:18px;text-wrap:balance}
.v6-vb p{color:var(--ink-soft);font-size:1.05rem;line-height:1.6;margin-top:18px;max-width:54ch;text-wrap:pretty}
.v6-vb p+p{margin-top:12px}
.v6-wege{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;max-width:520px}
.v6-weg{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;line-height:1.35}
.v6-weg b{font-family:var(--display);font-weight:700;color:var(--blau);display:block;line-height:1.2}
.v6-weg span{display:block;margin-top:4px;color:var(--meta);font-size:.88rem;line-height:1.4}
.v6-vb-cta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;max-width:520px}
/* CTA-Pillen im selben Raster wie Kaufen/Mieten: gleiche Breite, einzeilig (User 2026-10-14) */
.v6-vb-cta .btn{min-width:0;padding:15px 16px;font-size:.92rem;box-shadow:none;white-space:nowrap;text-align:center}
/* Elektrisierende Umrandung (User 2026-10-14): beim Hover läuft ein heller Funke mit rotem Schweif um jede CTA-Pille (.btn-primary, .btn-blau) */
@property --ew{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn-primary,.btn-blau{position:relative;isolation:isolate}
.btn-primary::after,.btn-blau::after{content:"";position:absolute;inset:-3px;border-radius:13px;padding:2px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s var(--ease);background:conic-gradient(from var(--ew),transparent 0 62%,color-mix(in srgb,var(--accent) 60%,#fff) 78%,#fff 86%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 5px rgba(255,255,255,.75))}
.btn-primary:hover::after,.btn-primary:focus-visible::after,.btn-blau:hover::after,.btn-blau:focus-visible::after{opacity:1;animation:ewDreh 1.1s linear infinite}
@keyframes ewDreh{to{--ew:360deg}}
[data-motion="off"] .btn-primary::after,[data-motion="off"] .btn-blau::after{animation:none}
@media(prefers-reduced-motion:reduce){.btn-primary::after,.btn-blau::after{animation:none}}
@media(max-width:620px){.v6-wege,.v6-vb-cta{grid-template-columns:1fr}}
.v6-vb-cta .btn-blau:hover{transform:translateY(-1px);background:var(--petrol)}
.v6-vb-cta .btn .arr{transition:transform .25s var(--ease)}
.v6-vb-cta .btn:hover .arr{transform:translateX(4px)}

/* Projekte: Karussell (.pc-*, 1:1 aus dem Handoff «Projekt-Karussell» 2026-10-13, Style-Block der Referenz projekt-karussell.html);
   aktive Kachel mittig, Nachbarn abgedunkelt angeschnitten (Section overflow:hidden, Track breiter als .wrap), unter 900 px gestapelte
   Kachel 600 px hoch. Ergänzungen (User 2026-10-13): Kopf nur der zentrierte Titel in Versalien (.section-head.center h2, ohne Zähler) statt Eyebrow/Titel/Lead/Nav,
   Pfeile absolut auf dem Viewport über den Nachbarn (.pc-btn-prev/-next), Nachbar-Kacheln klickbar (cursor, Hover); min-height statt height der Kachel
   (Referenz: feste Höhe), weil die Handoff-Texte mit Zitat bei 390 px bis 209 px und bei 1280 px bis 12 px abgeschnitten wurden (Link unerreichbar);
   die Reihe wächst auf die höchste Kachel, alle bleiben gleich hoch. Kleiner (User 2026-10-13 «zu gross»): aktive Kachel 82 % der Breite,
   mittig (Verschiebung aus --pc-pos/--pc-w/--pc-gap im CSS, JS setzt nur --pc-pos), Typo, Abstände, Logo-Karte und Siegel reduziert,
   Mindesthöhe 380 px (mobil 520), Pfeile am Kachelrand; unter 900 px wieder 100 % Breite. */
.pc-section{overflow:hidden}
.pc-head{margin-bottom:clamp(28px,4vw,44px)}
.pc-head .section-head h2{text-transform:uppercase;letter-spacing:.06em}
.pc-btn{width:48px;height:48px;border-radius:999px;border:1.5px solid var(--blau);background:#fff;color:var(--blau);display:grid;place-items:center;cursor:pointer;transition:background-color .18s ease,box-shadow .18s ease}
.pc-btn:hover{background:var(--tint);box-shadow:inset 0 0 0 .5px var(--blau)}
.pc-btn:focus-visible,.pc-viewport:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.pc-viewport .pc-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;box-shadow:var(--shadow-sm)}
.pc-btn-prev{left:calc((100% - var(--pc-w)) / 2 - 24px)}
.pc-btn-next{right:calc((100% - var(--pc-w)) / 2 - 24px)}
.pc-slide:not(.is-active){cursor:pointer}
.pc-slide:not(.is-active):hover{opacity:.6}
.pc-viewport{--pc-w:82%;--pc-gap:24px;position:relative;outline:none;touch-action:pan-y;cursor:grab}
.pc-viewport:active{cursor:grabbing}
.pc-track{display:flex;gap:var(--pc-gap);align-items:stretch;will-change:transform;transition:transform .55s var(--ease);transform:translateX(calc((100% - var(--pc-w)) / 2 - var(--pc-pos, 0) * (var(--pc-w) + var(--pc-gap))))}
.pc-track.is-snap{transition:none}
.pc-slide{flex:0 0 var(--pc-w);min-width:0;min-height:clamp(380px,30vw,440px);display:grid;grid-template-columns:.42fr .58fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm);opacity:.45;transform:scale(.965);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.pc-track.is-snap .pc-slide{transition:none}
.pc-slide.is-active{opacity:1;transform:none}
.pc-visual{position:relative;background:var(--tint);display:grid;place-items:center;padding:clamp(22px,3vw,40px);min-height:0}
.pc-visual-drop{position:absolute;left:-50px;bottom:-70px;width:220px;aspect-ratio:24/27;opacity:.06;pointer-events:none;fill:var(--blau)}
.pc-logo{position:relative;z-index:1;width:100%;max-width:250px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:grid;place-items:center;min-height:124px}
.pc-logo img{max-width:100%;max-height:80px;width:auto;height:auto;display:block;object-fit:contain}
/* Zwei Logos in einer Kachel (PEPra + FMH): nebeneinander, gleiche Höhe, feiner Trenner */
.pc-logo-duo{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:18px;max-width:300px}
.pc-logo-duo img{max-height:64px;justify-self:center}
.pc-logo-duo img+img{border-left:1px solid var(--line);padding-left:18px}
.pc-badge{position:absolute;z-index:2;right:18px;top:18px;width:clamp(56px,6vw,80px);height:auto;filter:drop-shadow(0 4px 10px rgba(17,42,71,.16))}
.pc-cat{position:absolute;left:24px;bottom:18px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stahl)}
.pc-body{padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.pc-kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stahl)}
.pc-title{margin:10px 0 0;font-family:var(--display);font-weight:800;color:var(--blau);font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.15;letter-spacing:-.018em;text-wrap:balance}
.pc-client{margin:6px 0 0;font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--stahl)}
.pc-desc{margin:14px 0 0;color:var(--ink-soft);font-size:.93rem;line-height:1.55;text-wrap:pretty;max-width:58ch}
.pc-quote{margin:16px 0 0;padding-left:14px;border-left:2px solid var(--accent);font-family:var(--display);font-style:italic;font-weight:500;font-size:.95rem;line-height:1.5;color:var(--ink-soft);text-wrap:pretty;max-width:58ch}
.pc-quote cite{display:block;margin-top:8px;font-style:normal;font-family:var(--body);font-size:.82rem;color:var(--meta)}
.pc-spacer{flex:1}
.pc-link{margin-top:18px;font-size:.92rem;align-self:flex-start}
.pc-links{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:18px}
.pc-links .pc-link{margin-top:0}
.pc-dots{display:flex;justify-content:center;gap:8px;margin-top:clamp(22px,3vw,30px)}
.pc-dot{width:8px;height:8px;border-radius:999px;border:none;padding:0;cursor:pointer;background:var(--line);transition:width .3s var(--ease),background-color .3s var(--ease)}
.pc-dot[aria-selected="true"]{width:28px;background:var(--blau)}
@media(max-width:900px){
  .pc-btn{width:40px;height:40px}.pc-viewport .pc-btn{top:108px}.pc-btn-prev{left:-8px}.pc-btn-next{right:-8px} /* Pfeile im Bildteil (160 px Reihe): unter dem Siegel (bis ~80 px), neben der Logo-Karte (max 200 px), über der Kategorie-Zeile, nicht über dem Text */
  .pc-viewport{--pc-w:100%}
  .pc-slide{grid-template-columns:1fr;grid-template-rows:160px minmax(0,1fr);min-height:520px}
  .pc-visual{padding:20px}.pc-logo{min-height:0;max-width:200px;padding:14px 18px}.pc-logo img{max-height:64px}.pc-logo-duo{max-width:240px;gap:12px}.pc-logo-duo img{max-height:48px}.pc-logo-duo img+img{padding-left:12px}
  .pc-body{padding:22px}
}
@media(prefers-reduced-motion:reduce){.pc-track,.pc-slide,.pc-dot{transition:none !important}}

/* Über uns: Kopf + Links links (ein Drittel), Teamraster drei Kacheln je Reihe rechts (User 2026-10-13: ohne die drei Werte, drei je Reihe);
   Kacheln = Bestand .member mit Modal wie Slot 05/Referenz, kein cursor:default. Unter 620 px zwei je Reihe (die Basis-Regel .team-grid
   der Media-Query verliert gegen .v6-team .team-grid, darum hier ausdrücklich). */
.v6-team{display:grid;grid-template-columns:1fr 2fr;gap:clamp(32px,5vw,72px);align-items:start}
.v6-team-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px}
.v6-team .team-grid{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);align-items:stretch;align-self:stretch}
/* Gleiche Kachelhöhe (2026-10-14): Rolle darf umbrechen, ohne dass Nachbarn versetzt stehen */
.v6-team .member{display:flex;flex-direction:column;height:100%}
.v6-team .member .role{min-height:calc(2 * 1.45em);line-height:1.45;text-wrap:balance}
@media(max-width:620px){.v6-team .team-grid{grid-template-columns:repeat(2,1fr)}}
/* Lead der Team-Sektion in der Grösse der Videobox-Beschreibung (.v6-vb p; User 2026-10-14). */
.v6-team .section-head .lead{font-size:1.05rem;line-height:1.6;text-wrap:pretty}
.v6-link-stahl{color:var(--stahl)}

/* Kontakt: letzte Zeile der Kontaktbox ohne Trennlinie (aus v03) */
.v6-kontakt .ca-row:last-child{border-bottom:none}

@media(max-width:900px){.v6-hero-grid,.v6-split,.v6-team,.v2-cards{grid-template-columns:1fr}.v6-hero-photo{max-width:420px}.v2-card{min-height:0}.v6-vb-bild{max-width:520px}
  .v6-hero-grid{grid-template-rows:auto;row-gap:32px}
  .v6-hero-grid>div:first-child{grid-row:1}
  .v6-hero-grid .v6-hero-photo{grid-column:1;grid-row:2;justify-self:center;width:100%}
  .v6-hero-grid .v6-hero-weiter{grid-row:3;justify-self:center;margin-top:0}}
/* Tablet (621–900 px): Kacheln liegen gestapelt in voller Breite; Inhalt zweispaltig, Links rechts, damit die Breite genutzt wird (2026-10-14) */
@media(min-width:621px) and (max-width:900px){
  .v2-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:36px;align-items:start;padding:28px 30px}
  .v2-card-ic{grid-column:1;grid-row:1}
  .v2-card h3{grid-column:1;grid-row:2;margin-top:16px}
  .v2-card p{grid-column:1;grid-row:3;margin-top:10px}
  .v2-card-links{grid-column:2;grid-row:1 / span 3;margin-top:0;align-self:center;justify-content:center}
}
/* Smartphone: Headline eine Stufe kleiner, Abstände enger (2026-10-14) */
@media(max-width:480px){
  .v6-hero h1{font-size:2.3rem}
  .v6-hero-lead{font-size:1rem}
  .v2-card{padding:24px 22px 22px}
  .v6-vb h2{font-size:1.7rem}
}
/* Kleine Mono-Labels auf Touch-Geräten lesbar halten (≥11.5 px) */
@media(max-width:620px){
  .pc-cat,.pc-kicker{font-size:.72rem}
  .member .m-tag,.member .ph-tag{font-size:.7rem}
}
@media(max-width:560px){.pill-group{flex-direction:column;align-items:stretch}.pill{width:100%;min-height:52px}.v6-award-inner{text-align:center}}
@media(prefers-reduced-motion:reduce){.pill,.pill-arr,.v2-card,.v2-card-drop,.v2-card .arr{transition:none}.pill:hover,.pill:hover .pill-arr,.v2-card:hover,.js .v2-card.reveal:hover{transform:none}}

/* Navigation: «Leistungen» als breites Dropdown in drei Gruppen (aus v04/v05, edumod-v4.css; Markup inc/nav.php) */
.nav-sub.v2-breit{min-width:min(780px,calc(100vw - 2*var(--gutter)));padding:14px}
.v2-gruppen{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 14px}
.v2-gruppe h5{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--stahl);padding:6px 14px 4px;display:flex;align-items:center;gap:.6em;margin:0}
.v2-gruppe h5::before{display:none}
@media(max-width:820px){.v2-gruppen{grid-template-columns:1fr;gap:10px}.nav.open .nav-sub.v2-breit{min-width:0;padding:0 0 0 14px}}

/* ===== Simplex Video-Box, Variante B (2026-10-15): Hersteller-Video im Hero, Hotspot-Grafik, Formel ===== */
.vb2-video{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:#0f1a24;aspect-ratio:16/10}
/* Hero Variante B: Video bekommt die breitere Spalte und ragt leicht aus dem Raster (User 2026-10-15) */
.ls-hero-grid.vb2-hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(24px,3vw,44px)}
.vb2-hero .vb2-video{width:calc(100% + clamp(0px,6vw,96px));max-width:none;margin-right:calc(-1 * clamp(0px,6vw,96px))}
/* Stichworte im Hero: immer zwei pro Zeile (User 2026-10-15) */
.vb2-hero .ls-stich{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
/* Tablet quer: Überhang auf den Seitenrand begrenzen, sonst entsteht horizontaler Scroll */
@media(max-width:1200px){.vb2-hero .vb2-video{width:calc(100% + 16px);margin-right:-16px}}
@media(max-width:960px){.ls-hero-grid.vb2-hero{grid-template-columns:1fr}.vb2-hero .vb2-video{width:100%;margin-right:0}}
/* Schmale Textspalte: Pillen untereinander, damit der Text nicht aus der Pille läuft */
@media(min-width:621px) and (max-width:1180px){.vb2-hero .subhero-cta{grid-template-columns:1fr;max-width:none}}
.vb2-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vb2-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:0;cursor:pointer;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .25s var(--ease),opacity .25s var(--ease),background .2s}
.vb2-play svg{margin-left:4px}
.vb2-play:hover{transform:scale(1.08);background:color-mix(in srgb,var(--accent) 88%,#000)}
.vb2-video.playing .vb2-play{opacity:0;pointer-events:none}
.vb2-video-cap{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:#fff;background:rgba(15,26,36,.6);padding:5px 9px;border-radius:6px;pointer-events:none}
.hs-wrap{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:center}
.hs-stage{position:relative;max-width:900px;margin:0 auto;width:100%}
.hs-stage img{display:block;width:100%;height:auto}
/* Box fliegt von links ein (Scroll) und wieder hinaus */
.js .hs-fly{opacity:0;transform:translateX(-14%) rotate(-2deg);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .hs-fly.in{opacity:1;transform:none}
[data-motion="off"] .hs-fly,.no-js .hs-fly{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.js .hs-fly{opacity:1;transform:none;transition:none}}
.hs-dot{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--accent);box-shadow:0 0 0 4px rgba(255,255,255,.9),0 4px 14px rgba(0,0,0,.25);transition:transform .25s var(--ease),background .2s}
.hs-dot::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:.6;animation:hsPuls 2s ease-out infinite}
.hs-dot::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1}
.hs-dot:hover,.hs-dot.on,.hs-dot:focus-visible{transform:scale(1.15);background:var(--blau);outline:none}
.hs-dot.on::before,.hs-dot:hover::before{animation:none;opacity:0}
@keyframes hsPuls{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.hs-card{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translate(-50%,6px);width:240px;background:var(--surface);color:var(--ink);text-align:left;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:5;font-weight:400}
.hs-card b{display:block;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--blau);margin-bottom:3px}
.hs-card span{display:block;font-size:.85rem;line-height:1.45;color:var(--ink-soft)}
.hs-card::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--surface)}
.hs-dot:hover .hs-card,.hs-dot.on .hs-card,.hs-dot:focus-visible .hs-card{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hs-dot[style*="left:4"] .hs-card,.hs-dot[style*="left:5"] .hs-card{left:0;transform:translate(-20px,6px)}
.hs-dot[style*="left:4"] .hs-card::after,.hs-dot[style*="left:5"] .hs-card::after{left:34px}
.hs-dot[style*="left:4"]:hover .hs-card,.hs-dot[style*="left:4"].on .hs-card,.hs-dot[style*="left:5"]:hover .hs-card,.hs-dot[style*="left:5"].on .hs-card{transform:translate(-20px,0)}
.hs-list{list-style:none;display:grid;gap:6px;margin:0;padding:0}
.hs-li{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s}
.hs-li:hover,.hs-li.on{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-sm)}
.hs-nr{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--display);font-weight:700;font-size:.8rem;line-height:26px;text-align:center;display:block;margin-top:1px}
.hs-li.on .hs-nr,.hs-li:hover .hs-nr{background:var(--blau)}
.hs-li>div>b{display:block;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--blau)}
.hs-li>div>span{display:block;font-size:.9rem;line-height:1.45;color:var(--ink-soft);margin-top:2px}
/* Was macht die Box aus: Bildtrio (breit + zwei hoch) neben Text, zweite Reihe gespiegelt */
.vb2-detail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.vb2-detail+.vb2-detail{margin-top:clamp(28px,3.5vw,48px)}
.vb2-detail.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.vb2-detail.rev .vb2-detail-bilder{order:2}
.vb2-detail-bilder{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(8px,1vw,12px);align-items:stretch}
.vb2-db{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:3/4}
.vb2-db.wide{aspect-ratio:auto;height:100%}
.vb2-db img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.vb2-db:hover img{transform:scale(1.03)}
.vb2-db-btn{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.vb2-db-btn::after{content:"";position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.9) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325415F' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.5-4.5M11 8v6M8 11h6'/></svg>") center/16px no-repeat;opacity:0;transition:opacity .25s var(--ease)}
.vb2-db:hover .vb2-db-btn::after,.vb2-db-btn:focus-visible::after{opacity:1}
/* Lightbox */
.vb2-lb{position:fixed;inset:0;z-index:1000;background:rgba(10,20,30,.9);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:24px;opacity:0;transition:opacity .25s var(--ease)}
.vb2-lb.on{opacity:1}
.vb2-lb[hidden]{display:none}
.vb2-lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;height:100%}
.vb2-lb-fig img{max-width:100%;max-height:calc(100vh - 110px);width:auto;height:auto;border-radius:var(--r);box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.96);transition:transform .3s var(--ease)}
.vb2-lb.on .vb2-lb-fig img{transform:none}
.vb2-lb-fig figcaption{color:rgba(255,255,255,.75);font-size:.88rem;text-align:center}
.vb2-lb-close,.vb2-lb-nav{border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:1.6rem;line-height:1;transition:background .2s}
.vb2-lb-close:hover,.vb2-lb-nav:hover{background:var(--accent)}
.vb2-lb-close{position:absolute;top:18px;right:18px;font-size:1.1rem}
.vb2-lb-nav{font-size:2.2rem;padding-bottom:4px}
@media(max-width:620px){.vb2-lb{grid-template-columns:1fr;padding:16px}.vb2-lb-nav{position:absolute;top:50%;margin-top:-24px;width:40px;height:40px}.vb2-lb-nav.prev{left:10px}.vb2-lb-nav.next{right:10px}}
.vb2-detail-text{padding-top:6px}
.vb2-detail-text h3{font-family:var(--display);font-weight:800;color:var(--blau);font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.015em;line-height:1.12;margin:8px 0 12px;text-wrap:balance}
.vb2-detail-text p{color:var(--ink-soft);font-size:1rem;line-height:1.58;max-width:44ch}
@media(max-width:900px){.vb2-detail,.vb2-detail.rev{grid-template-columns:1fr;gap:18px}.vb2-detail.rev .vb2-detail-bilder{order:0}}
@media(max-width:520px){.vb2-detail-bilder{grid-template-columns:1fr 1fr}.vb2-db.wide{grid-column:span 2;aspect-ratio:3/2;height:auto}}
/* Kein IT-Aufwand: schräge Tint-Fläche (gegenläufig zur CTA-Schräge weiter unten), Inhalt darüber */
.vb2-it{position:relative;overflow:hidden;background:transparent;padding-top:clamp(96px,11vw,150px);padding-bottom:clamp(96px,11vw,150px)}
.vb2-it::before{content:"";position:absolute;inset:0;z-index:0;background:var(--tint);clip-path:polygon(0 clamp(32px,4.5vw,72px),100% 0,100% calc(100% - clamp(32px,4.5vw,72px)),0 100%)}
.vb2-it .wrap{position:relative;z-index:1}
/* Kein IT-Aufwand: drei offene Spalten, Hersteller-Icons (Fallback: eigene Linienzeichnung) */
.it-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);text-align:center;max-width:1040px;margin:0 auto}
.it-item{display:flex;flex-direction:column;align-items:center}
.it-ic{display:grid;place-items:center;width:120px;height:120px;margin-bottom:20px;color:var(--petrol)}
.it-ic img{width:100%;height:100%;object-fit:contain;display:block}
.it-ic img+.it-fb{display:none}
.it-ic .it-fb{width:84px;height:84px}
.it-item h3{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--blau);margin:0 0 8px;letter-spacing:-.01em}
.it-item p{color:var(--ink-soft);font-size:.96rem;line-height:1.55;margin:0;max-width:30ch}
@media(max-width:620px){.it-row{grid-template-columns:1fr;gap:36px}}
.vb2-formel{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1.2fr;gap:clamp(10px,1.6vw,20px);align-items:center}
.vb2-formel>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px;box-shadow:var(--shadow-sm);text-align:center;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.vb2-formel b{font-family:var(--display);font-weight:700;color:var(--blau);font-size:1.02rem;line-height:1.25}
.vb2-formel>div>span:not(.vb2-f-ic){font-size:.88rem;color:var(--ink-soft);line-height:1.4}
.vb2-f-ic{width:40px;height:40px;color:var(--petrol);margin-bottom:6px}
.vb2-f-ic svg{width:100%;height:100%}
.vb2-op{font-family:var(--display);font-weight:800;font-size:1.8rem;color:var(--accent);text-align:center}
.vb2-f-res{background:var(--blau) !important;border-color:var(--blau) !important}
.vb2-f-res b,.vb2-f-res span{color:#fff !important}
@media(max-width:960px){.hs-wrap{grid-template-columns:1fr}.hs-stage{max-width:640px}.vb2-formel{grid-template-columns:1fr 1fr;gap:14px}.vb2-op{display:none}.vb2-f-res{grid-column:span 2}}
@media(max-width:620px){.hs-card{width:200px}.vb2-formel{grid-template-columns:1fr}.vb2-f-res{grid-column:auto}.vb2-video{aspect-ratio:16/9}}

/* ===== Leistungskacheln als Tabs mit Detailbereich darunter (User 2026-10-16) ===== */
.v2-card-tab{appearance:none;-webkit-appearance:none;font:inherit;text-align:left;cursor:pointer;width:100%}
.v2-card-tab p{flex:1}
.v2-card-tab{min-height:0;padding:30px 30px 30px}
.v2-card-tab h3{margin-top:0}
.v2-card-tab.is-active,.js .v2-card-tab.is-active.reveal{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
/* Pfeil unter der Kachel: aktiv = breiter, auslaufender Pfeil zum Detailbereich; inaktiv beim Hover: fährt nach unten raus, pulsiert, Kanten laufen als Punkte zur Spitze aus */
.v2-card-slot{position:relative;display:flex}
.v2-card-slot>.v2-card-tab{flex:1}
.v2-card-arrow{position:absolute;left:0;right:0;top:100%;height:44px;overflow:hidden;pointer-events:none;z-index:2}
.v2-card-arrow svg{display:block;width:100%;height:36px;overflow:visible;transform:translateY(-100%);transition:transform .4s var(--ease)}
.v2-arrow-fill{fill:var(--phase)}
.v2-card-slot:has(.is-active) .v2-card-arrow svg{transform:translateY(0)}
.v2-card-slot:not(:has(.is-active)):hover .v2-card-arrow svg,.v2-card-slot:not(:has(.is-active)):has(:focus-visible) .v2-card-arrow svg{transform:translateY(0);transform-origin:50% 0;animation:v2ArrowPulse .75s ease-in-out .45s infinite alternate}
.v2-card-slot:nth-child(1){--phase:var(--petrol)}.v2-card-slot:nth-child(2){--phase:var(--blau)}.v2-card-slot:nth-child(3){--phase:var(--stahl)}
.v2-card-slot .v2-card-farbig{--phase:inherit}
@media(prefers-reduced-motion:reduce){.v2-card-slot:hover .v2-card-arrow svg{animation:none}}
.v2-detail{--phase:var(--petrol);position:relative;margin-top:34px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:border-color .35s var(--ease)}
.v2-detail[data-active="2"]{--phase:var(--blau)}
.v2-detail[data-active="3"]{--phase:var(--stahl)}
.v2-pane{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch}
.v2-pane.is-open{display:grid;animation:v2PaneIn .5s var(--ease) both}
@keyframes v2PaneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.v2-pane-foto{position:relative;overflow:hidden;background:var(--paper);aspect-ratio:4/3;align-self:center;margin:clamp(18px,2.4vw,32px) 0 clamp(18px,2.4vw,32px) clamp(18px,2.4vw,32px);border-radius:var(--r-lg)}
.v2-pane-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.v2-pane-body{padding:clamp(28px,3.4vw,44px) clamp(26px,3.6vw,52px)}
.v2-pane-body .eyebrow{color:var(--phase)}
.v2-pane-body h3{margin:8px 0 12px;font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2.2vw,1.85rem);line-height:1.15;letter-spacing:-.02em;color:var(--blau);text-wrap:balance}
.v2-pane-lead{margin:0;color:var(--ink-soft);font-size:1.02rem;line-height:1.6;max-width:62ch;text-wrap:pretty}
.v2-pane-list{margin:20px 0 0;display:grid;gap:10px}
.v2-pane-list li{font-size:.96rem;color:var(--ink)}
.v2-pane-cta{display:flex;justify-content:center;margin-top:clamp(32px,4vw,44px);padding-top:26px;border-top:1px solid var(--line)}
.v2-pane-links{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.v2-pane-links-h{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);margin-bottom:4px}
.v2-pane-links .v2-card-links{margin-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.v2-pane-links .v2-card-links a{border-top:0;padding:8px 0;color:var(--blau)}
.v2-pane-links .v2-card-links a:hover{color:var(--blau)}
@media(max-width:1040px){.v2-pane{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
@media(max-width:900px){.v2-pane{grid-template-columns:1fr}.v2-pane-foto{aspect-ratio:16/9;margin:0;border-radius:0}.v2-card-arrow{display:none}.v2-card-tab.is-active,.js .v2-card-tab.is-active.reveal{transform:none;box-shadow:inset 0 0 0 3px rgba(255,255,255,.6)}}
@media(max-width:620px){.v2-pane-links .v2-card-links{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.v2-pane.is-open{animation:none}}