/* ==========================================================================
   trummerphoto.at - gemeinsame Stil-Basis fuer alle Seiten (site.css)
   Keine Verlaeufe, keine Daten-URIs, nur relative Pfade.
   Aufbau: 1 Tokens/Fonts · 2 Basis · 3 Buttons · 4 Header + Menue-Sheet · 5 Tab-Leiste · 6 Footer
           7 Sektionen/Flaechen · 8 Seiten-Hero (ph-*) · 9 Slots · 10 Karten · 11 Pakete-Karten
           13 Foto-Raster + Lightbox · 14 Listen/Prosa/FAQ · 15 Animation · 16 Embed-Modus · 17 Breakpoints · 18 Seitenwechsel (View Transitions)
   Header, Menue-Sheet, Tab-Leiste und Footer (4-6) sind die Single Source fuer ALLE Seiten.
   Markup dazu: partials/header.html, partials/tabbar.html, partials/footer.html
   Runde 6: ueberwiegend hell, ein Flaechen-Set aus einer Familie, Lila nur fuer Betonwort, primaeren Button, Tab-Indikator.
   ========================================================================== */

/* 1 Tokens + Fonts (Schriftnamen NUR hier; ueberall sonst --serif/--sans/--mono) */
/* Runde 8: Newsreader (Ueberschriften, opsz variabel, Strichstaerke fest 500) · Albert Sans (Text, wght 100-900) · DM Mono (Labels 400/500).
   Gewichtsbereiche bewusst breit: Seiten fordern noch 400/700 an -> die Datei wird ohne kuenstliches Fett/Duenn genutzt.
   Preload je Seite (im head, vor site.css): newsreader.woff2 + albert-sans.woff2, as="font" type="font/woff2" crossorigin. */
@font-face{font-family:"Newsreader";src:url(fonts/newsreader.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(fonts/albert-sans.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Runde 10e (PERF M1): DM Mono nur noch EIN Schnitt (400) fuer alle Gewichte -> 500er-Labels/Buttons nutzen dieselbe Datei
   (Mono: gleiche Laufweite, kein Umbruch-Unterschied; optisch minimal duenner). fonts/dm-mono-500.woff2 bleibt im Ordner, unreferenziert. */
@font-face{font-family:"DM Mono";src:url(fonts/dm-mono.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Runde 9 (M-2): Fallback-Metrik fuer den Swap. Georgia hat fast dasselbe Text/ch-Verhaeltnis wie Newsreader (H1 mit max-width in ch
   bricht gleich um); size-adjust 99 % per Messung (13 Seiten-Breiten), Ober-/Unterlaenge = Newsreader 73,5/26,5 % geteilt durch 0,99. */
@font-face{font-family:"Newsreader Fallback";src:local("Georgia");size-adjust:99%;ascent-override:74.24%;descent-override:26.77%;line-gap-override:0%}
/* R31: gleiche Methode wie Newsreader Fallback (Google-Fonts-Verfahren, Verhaeltnis xAvgCharWidth/unitsPerEm zu Arial),
   da Albert Sans sitemweit die meistgenutzte Schrift ist (Nav, Buttons, Fliesstext) und bisher ohne Groessenausgleich beim Schriftwechsel reflowte. */
@font-face{font-family:"Albert Sans Fallback";src:local("Arial");size-adjust:122.34%;ascent-override:77.65%;descent-override:20.44%;line-gap-override:0%}
:root{
  --ink:#1A1A1A; --lila:#714A96; --lilal:#C4A9F0;
  /* Runde 11: nur ZWEI helle Flaechen (paper + cream) + EINE dunkle (--deep) je Seite. Regel: RUNDE11-FARBREGEL.md
     cream = neutrales Greige (C* 3,3, dE zu paper 6,9; Ink 14,4:1, Lila 5,5:1, muted 7,3:1). Alte Namen bleiben, zeigen auf das Paar.
     vorher (Runde 10): cream #EBE3D5 · sand #E5D5B8 · stone #D9D7D2 · mist #E6DCEC */
  --paper:#FDFCFA;   /* fast reines Weiss, hellste Flaeche, Karten, Zettel */
  --cream:#ECE9E3;   /* Basis (body, .sec), ruhiges Greige, nicht gelblich */
  --sand:var(--cream);
  --stone:var(--cream);
  --mist:var(--paper);
  --deep:#3A3340;    /* weicher Dunkelton: hoechstens EINE dunkle Sektion pro Seite (+ Footer) */
  --foot:#2C2731;    /* Footer */
  --on-deep:#EEE8F0; --on-deep2:#D3CAD9; --line:#514858;
  /* Alt-Namen (Seiten nutzen sie noch) -> auf das Set umgelegt */
  --muted:#4d4a43; --edge:#E3D6C0;
  /* App-Flaechen (Menue-Sheet, Tab-Leiste), 1:1 aus mobil.html */
  --app:#FBFAFC; --app-line:#E4DFEA; --ink2:#4A4650; --lila-t:#F1EAF8;
  --bar:#FDFCFA;   /* Header blickdicht (Florian: Text darf nicht durchscheinen); alt: Header-Blur: helles Glas auf allen Flaechen (vorher Creme rgba(243,237,226,.8)) */
  --serif:"Newsreader","Newsreader Fallback","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Albert Sans","Albert Sans Fallback",Arial,"Helvetica Neue",sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --t-h1:clamp(2.75rem,6.6vw,6rem); --t-h2:clamp(2.2rem,4.9vw,4.25rem); --t-h3:1.6rem;   /* Runde 8: Newsreader wirkt kleiner als die alte Serif -> ca. 6 % groesser */
  --t-st:clamp(2rem,4.7vw,3.85rem);
  --t-lead:clamp(1.125rem,1.5vw,1.3rem); --t-body:1.0625rem; --t-mono:.78rem;
  --sp1:8px; --sp2:16px; --sp3:24px; --sp4:40px; --sp5:64px; --sp6:clamp(48px,6vw,88px);
  --sec:clamp(48px,4.8vw,70px);   /* Runde 12: zwei Sektionen zusammen max. ca. 140 px Luft (vorher 96-168 px je Seite) */
  --gap:clamp(40px,6vw,104px); --w:1200px;
  --gut:clamp(24px,5vw,120px);   /* Fix 12: Seitenrand je Seite (1100 px -> 55 px statt 24 px; ab ca. 1440 px greift --w) */
  --hdr:64px; --hdr-c:52px; --tab:68px; --tabh:0px;
  --hero-top:clamp(40px,6vw,96px); --hero-bot:clamp(48px,5vw,72px);
  /* Ruhige Formensprache fuer ALLE Seiten: feine Linie + weicher Schatten. Einzige Ausnahme: Papier-Zettel auf pakete.html (11) */
  --soft:0 1px 2px rgba(26,26,26,.06),0 12px 32px rgba(26,26,26,.1);
  --soft-up:0 2px 4px rgba(26,26,26,.06),0 20px 44px rgba(26,26,26,.14);
  --hair:rgba(26,26,26,.12);
  /* Bewegung: eine Kurve, eine Dauer */
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.9s;
  --em-to:var(--lila);
}
/* Runde 9 (H-1): Betonwort auf dunkler Sektion hell -> Hell-Lila (Lila auf --deep waere 1,8:1) */
:is(.dk,.nt,.s-deep){--em-to:var(--lilal)}
/* 2 Basis */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 var(--t-body)/1.6 var(--sans);font-optical-sizing:auto;overflow-x:clip;padding-bottom:var(--tabh)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
/* Newsreader: Schnitt 500, optische Groesse automatisch; enge Zeilen, leicht negative Laufweite nur bei grossen Groessen */
h1,h2,h3{font-family:var(--serif);font-weight:500;font-optical-sizing:auto;font-variant-numeric:lining-nums;line-height:1.1;letter-spacing:-.008em;margin:0;overflow-wrap:break-word}
h1{font-size:var(--t-h1);line-height:1.08;letter-spacing:-.016em} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3);line-height:1.14;letter-spacing:0}
p{margin:0}
.wrap{width:min(var(--w),100% - 2 * var(--gut));margin-inline:auto}
:focus-visible{outline:3px solid var(--lila);outline-offset:3px}
.dk :focus-visible,.nt :focus-visible,.s-deep :focus-visible,.ftr :focus-visible{outline-color:var(--lilal)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:99;min-height:44px;display:inline-flex;align-items:center}
.skip:focus{left:8px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--t-mono);letter-spacing:.08em;text-transform:uppercase}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--muted);max-width:52ch;margin-top:var(--sp3)}
.dk .lead,.nt .lead,.s-deep .lead{color:var(--on-deep2)}
.sec-h{max-width:820px;margin-bottom:var(--sp6)}
.sec-h p{margin-top:var(--sp3);font-size:var(--t-lead);line-height:1.5;color:var(--muted);max-width:52ch}
.dk .sec-h p,.nt .sec-h p,.s-deep .sec-h p{color:var(--on-deep2)}
/* Statement-Zeile: grosse ruhige Aussage zwischen Sektionen (<p class="statement">…<span class="em">…</span></p>) */
.statement{font:500 var(--t-st)/1.12 var(--serif);letter-spacing:-.012em;max-width:22ch;margin-inline:auto;text-align:center}
/* Unterseiten: Statement steht immer in <section class="sec sec-st" aria-label="Kurz gesagt"><div class="wrap"><p class="statement rv">…</p></div></section> */
.sec.sec-st{padding:clamp(40px,4.4vw,64px) 0}
/* Betonung in Ueberschriften: immer Akzentfarbe (Runde 12: kein Farbverlauf/Grau-Dimmen mehr, h2 blendet als Ganzes ein, siehe 21) */
.em{color:var(--em-to)}

/* 3 Buttons: klein, fein, eckig, Mono-Label. Primaer = Ink, Hover Lila */
/* Runde 20: ruhiger. Primaer = Ink-Flaeche (Hover Lila). .ghost = Tonflaeche statt Umrandung (kein harter Kasten). Druck: 1 px nach unten. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;font:500 .78rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:14px 20px;border:1.5px solid var(--ink);border-radius:2px;background:var(--ink);color:var(--cream);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,transform .15s}
.btn:hover{background:var(--lila);border-color:var(--lila);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.ghost{min-height:48px;background:var(--lila-t);border:1px solid rgba(113,74,150,.28);color:var(--ink)}   /* Runde 27 (C-F8): EIN Sekundaer-Stil, ersetzt grau und .lnk-Kasten */
.btn.ghost:not(:has(svg))::after{content:"";flex:none;width:16px;height:16px;background:currentColor;transition:transform .3s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat}
.btn.ghost .lnk-ar{flex:none;transition:transform .3s var(--ease)}
.btn.ghost:is(:hover,:focus-visible){background:var(--lila);border-color:var(--lila);color:#fff}
.btn.ghost:is(:hover,:focus-visible)::after,.btn.ghost:is(:hover,:focus-visible) .lnk-ar{transform:translateX(4px)}
.btn.lt{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn.lt:hover{background:var(--lilal);border-color:var(--lilal);color:var(--ink)}
.dk .btn.ghost,.nt .btn.ghost,.s-deep .btn.ghost{color:var(--on-deep);background:rgba(196,169,240,.14);border-color:rgba(196,169,240,.4)}
.dk .btn.ghost:is(:hover,:focus-visible),.nt .btn.ghost:is(:hover,:focus-visible),.s-deep .btn.ghost:is(:hover,:focus-visible){background:var(--lilal);border-color:var(--lilal);color:var(--ink)}
.btn.sm{padding:10px 14px;font-size:.72rem}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp4)}

/* 4 Header (partials/header.html): Logo links, 6 Links mittig, "Anfragen" rechts.
   Ruhe: transparent. Gescrollt (.sc, setzt site.js): kompakt 52 px, flache Farbe + Blur.
   Helle Schrift ueber dunklem Seitenanfang automatisch: erste Sektion in <main> ist .dk/.nt (per :has, kein Flag noetig).
   Aktiver Link: nur Textfarbe, kein Balken. Box bleibt immer --hdr hoch (kein Layoutsprung). */
.hdr{position:sticky;top:0;z-index:40;height:var(--hdr);color:var(--ink);pointer-events:none}
.hdr::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;border-bottom:1px solid transparent;transition:height .4s var(--ease),background-color .4s,border-color .4s}
.hdr.sc::before{height:var(--hdr-c);background:var(--bar);border-bottom-color:var(--hair)}
.hdr-in{position:relative;pointer-events:auto;width:min(var(--w),100% - 2 * var(--gut));height:100%;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--sp3);transition:height .4s var(--ease)}
.hdr.sc .hdr-in{height:var(--hdr-c)}
.hdr-logo{justify-self:start;display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:500 1.05rem/1.1 var(--serif);white-space:nowrap}
.hdr-logo img{width:28px;height:28px;flex:none}
.hdr .lg-w{display:none}
.hdr-nav{position:relative}
.hdr-nav>ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.hdr-nav a{display:flex;align-items:center;min-height:44px;position:relative;padding:10px 12px;text-decoration:none;font:500 .9rem/1 var(--sans);letter-spacing:.005em;opacity:.8;transition:opacity .4s var(--ease),color .4s var(--ease)}
.hdr-nav a:hover{opacity:1}
.hdr-nav a[aria-current]{opacity:1;color:var(--lila)}   /* Runde 20: "page" = diese Seite, "true" = Oberpunkt einer Unterseite */
/* Runde 8: gleitender Indikator (span.nav-ind, legt site.js an): feine 2-px-Linie in Ink (currentColor der Kopfzeile) unter dem aktiven Link.
   Beim Seitenwechsel gleitet sie vom zuletzt aktiven Link (sessionStorage tp-nav) zum aktuellen; Startseite: blendet aus. Ohne JS: Linie direkt am aktiven Link. */
.nav-ind{position:absolute;left:0;bottom:8px;width:0;height:2px;background:currentColor;pointer-events:none;opacity:0;transform-origin:center;
  transition:translate .42s var(--ease),width .42s var(--ease),scale .42s var(--ease),opacity .3s}
.nav-ind.on{opacity:1}
.nav-ind.out{scale:0 1;opacity:0}
.nav-ind.instant{transition:none}
.hdr-nav a.nav-pre{color:inherit!important;opacity:.8}  /* Startzustand fuer den sanften Farbwechsel (kurz, nur beim Laden) */
.hdr-nav a.nav-was{opacity:1;color:var(--lila)}
html:not(.js) .hdr-nav>ul>li>a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:var(--ink)}
.hdr-cta{justify-self:end;display:inline-flex;align-items:center;min-height:44px;font:500 .78rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;padding:10px 14px;background:var(--ink);color:var(--cream);border:1.5px solid var(--ink);transition:background .25s,color .25s,border-color .25s}
.hdr-cta:hover{background:var(--lila);border-color:var(--lila);color:#fff}
.hdr-menu{display:none;width:44px;height:44px;border:0;padding:0;background:transparent;border-radius:50%;place-items:center;color:inherit;cursor:pointer;justify-self:end}
.hdr-menu:active{background:var(--lila-t)}
.hdr-menu svg{width:26px;height:26px}
/* ueber dunkler erster Sektion (.dk/.nt/.s-deep; .hdr.onDark bleibt als Alt-Klasse gueltig) */
:is(.hdr.onDark,body:has(main>:first-child:is(.dk,.nt,.s-deep)) .hdr):not(.sc){color:#f3eee9}
:is(.hdr.onDark,body:has(main>:first-child:is(.dk,.nt,.s-deep)) .hdr):not(.sc) .lg-c{display:none}
:is(.hdr.onDark,body:has(main>:first-child:is(.dk,.nt,.s-deep)) .hdr):not(.sc) .lg-w{display:block}
:is(.hdr.onDark,body:has(main>:first-child:is(.dk,.nt,.s-deep)) .hdr):not(.sc) .hdr-nav>ul>li>a[aria-current]{color:var(--lilal)}
:is(.hdr.onDark,body:has(main>:first-child:is(.dk,.nt,.s-deep)) .hdr):not(.sc) .hdr-cta{background:var(--cream);border-color:var(--cream);color:var(--ink)}
:is(.hdr.onDark,body:has(main>:first-child:is(.dk,.nt,.s-deep)) .hdr):not(.sc) .hdr-cta:hover{background:var(--lilal);border-color:var(--lilal)}
:is(.hdr.onDark,body:has(main>:first-child:is(.dk,.nt,.s-deep)) .hdr):not(.sc) .hdr-menu:active{background:rgba(255,255,255,.14)}
:is(.hdr.onDark,body:has(main>:first-child:is(.dk,.nt,.s-deep)) .hdr):not(.sc) :focus-visible{outline-color:var(--lilal)}

/* Menue-Sheet (nur bis 760 px erreichbar), 1:1 aus mobil.html */
dialog.msheet{position:fixed;inset:auto 0 0 0;transform:translateY(100%);width:100%;max-width:none;max-height:88dvh;margin:0;padding:0;border:0;border-radius:28px 28px 0 0;background:var(--app);color:var(--ink);overflow:hidden;display:flex;flex-direction:column;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
dialog.msheet:not([open]){display:none}
dialog.msheet.show{transform:none}
dialog.msheet::backdrop{background:rgba(26,26,26,0);transition:background .3s}
dialog.msheet.show::backdrop{background:rgba(26,26,26,.55)}
.msheet :focus-visible{outline-color:var(--lila);border-radius:6px}
.msheet-grab{flex:none;height:30px;display:grid;place-items:center;touch-action:none;cursor:grab}
.msheet-grab::before{content:"";width:44px;height:5px;border-radius:3px;background:#B9B1C4}
.msheet-body{overflow-y:auto;padding:0 22px calc(24px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.msheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.msheet-x{width:44px;height:44px;border:0;padding:0;background:transparent;border-radius:50%;display:grid;place-items:center;color:inherit;cursor:pointer}
.msheet-x:active{background:var(--lila-t)}
.msheet-x svg{width:26px;height:26px}
.msheet-list{list-style:none;margin:0;padding:0;display:grid}
.msheet-list a{display:flex;align-items:center;min-height:56px;padding:0 4px;border-bottom:1px solid var(--app-line);text-decoration:none;font:500 22px/1.2 var(--serif)}
.msheet-list a[aria-current]{color:var(--lila)}
.msheet-cta{display:flex;margin-top:22px}
.msheet-cta a{flex:1;display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 22px;border-radius:999px;border:2px solid var(--lila);background:var(--lila);color:#fff;font:600 16px/1 var(--sans);text-decoration:none;transition:transform .15s}
.msheet-cta a:active{transform:scale(.97)}

/* 5 Tab-Leiste (partials/tabbar.html): nur bis 760 px, fest am unteren Rand (Stil in 17).
   Indikator .tab-ind legt site.js an; er gleitet per transform (window.TPTabbar). Ohne JS: Balken direkt am aktiven Tab. */
.tabbar{display:none}

/* 6 Footer (partials/footer.html) */
.ftr{background:var(--foot);color:#bdb8c8;padding:clamp(40px,4vw,56px) 0 var(--sp4);font-size:.95rem}   /* Runde 12: oben kleiner (Luecke zum letzten Abschnitt) */
.ftr .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp4) var(--sp5);align-items:start}
.ftr a{text-decoration:none;color:inherit;transition:color .25s}
.ftr a:hover{color:var(--lilal)}
.ftr-brand{display:inline-flex;align-items:center;gap:10px;font:500 1.3rem/1.1 var(--serif);color:#fff}
.ftr-brand img{width:26px;height:26px;flex:none}
.ftr-claim{margin-top:12px;max-width:38ch;color:#bdb8c8}
.ftr .soc{justify-content:flex-end}
.ftr-nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 28px;padding-top:var(--sp3);border-top:1px solid rgba(255,255,255,.1)}
.ftr-nav a{font:500 .95rem/1.4 var(--sans);color:var(--on-deep)}
.ftr-nav a[aria-current]{color:var(--lilal)}
/* Runde 22 (Bild 243): statt Roll-Hover eine ruhige Unterstreichung. Aktuelle Seite und Hover/Fokus: Linie in Textfarbe, blendet weich ein.
   Markup bleibt a > span.ftr-r > span; die Linie sitzt am inneren span (inline, damit sie auch im Flex-Link am Handy greift). */
.ftr-r,.ftr-r>span{display:inline}
.ftr-r>span{text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-decoration-color .25s var(--ease)}
.ftr-nav a:is(:hover,:focus-visible,[aria-current]) .ftr-r>span{text-decoration-color:currentColor}
.ftr-legal a{text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .25s,text-decoration-color .25s var(--ease)}
.ftr-legal a:is(:hover,:focus-visible,[aria-current]){text-decoration-color:currentColor}
.ftr-legal a[aria-current]{color:var(--lilal)}
/* © + Impressum + Datenschutz: EINE Zeile, gleiche Schrift/Zeilenhoehe, Grundlinie gemeinsam; am Handy sauber umbrechend */
.ftr-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px;font:400 .76rem/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#a7a2b2}
.ftr-legal>*{font:inherit;line-height:inherit}
.ftr-legal>span{margin-right:auto}

/* 7 Sektionen + Flaechen. .sec = Creme (Standard). Helle Flaechen (Runde 11): nur .s-paper und .s-cream; (Alt-Namen .s-sand/.s-stone/.s-mist entfernt, final12).
   Dunkel: .s-deep (= .dk = .nt, ein weicher Ton) - hoechstens EINE dunkle Sektion pro Seite. Abfolgen: BASIS-ANLEITUNG.md */
.sec{padding:var(--sec) 0;position:relative}
.s-cream{background:var(--cream)}
.s-paper{background:var(--paper)}
.paper-bg{background:var(--sand)}
.dk,.nt,.s-deep{background:var(--deep);color:var(--on-deep)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:center}
.split.wide-l{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
/* Ausgleich: Split mit nur Ueberschrift links (FAQ, Vertragsliste) -> gestapelt in zentrierter Lesespalte.
   Ohne :has()-Support bleibt das alte Zweispalten-Layout. */
.split:has(>.faq){grid-template-columns:minmax(0,1fr);gap:var(--sp5);max-width:860px;margin-inline:auto}

/* 8 Seiten-Hero. Neu (Runde 6): hell, je Seite eigene Flaeche + Komposition:
   <section class="page-hero ph-video"> … Varianten ph-video | ph-pakete | ph-referenzen | ph-foto | ph-kontakt | ph-legal.
   Der Hero zieht sich unter die transparente Kopfzeile (Flaeche reicht bis ganz oben). */
.page-hero{padding:clamp(48px,7vw,104px) 0 var(--sec)}
.page-hero.dk,.page-hero.nt{margin-top:calc(-1 * var(--hdr));padding-top:calc(var(--hdr) + clamp(56px,8vw,120px))}
.page-hero h1{max-width:16ch}
.page-hero .lead{max-width:56ch}
.ph-video,.ph-pakete,.ph-referenzen,.ph-foto,.ph-kontakt,.ph-legal{--hero-bg:var(--cream);background:var(--hero-bg);margin-top:calc(-1 * var(--hdr));padding:calc(var(--hdr) + var(--hero-top)) 0 var(--hero-bot)}
.ph-video{--hero-bg:var(--mist)}
.ph-pakete{--hero-bg:var(--sand)}
.ph-referenzen{--hero-bg:var(--stone)}
.ph-foto{--hero-bg:var(--paper)}
.ph-kontakt{--hero-bg:var(--cream)}
.ph-legal{--hero-bg:var(--cream);--hero-bot:clamp(24px,3vw,44px);border-bottom:1px solid var(--hair)}
/* video: zentriert, darunter eine Buehne (.ph-stage) fuer Reel-Slots/Medien */
.ph-stage{display:flex;justify-content:center;align-items:flex-end;gap:var(--sp3);margin:var(--sp5) auto 0;max-width:1040px}
.ph-stage>*{flex:0 1 240px;min-width:0}
/* referenzen: Text links + Medien rechts (.ph-grid) */
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--gap);align-items:center}
/* kontakt: Portraet + Formular/Inhalt (.ph-duo > .ph-portrait + div) */
.ph-duo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--gap);align-items:start}
.ph-portrait{max-width:380px;width:100%}
/* Nebenseiten: kleinere H1, schmale Spalte */
.ph-legal h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.ph-legal .wrap{max-width:780px}

/* 9 Slots: Platzhalter-Optik; data-src gesetzt -> echtes <video>/<img> (site.js) */
.reel-slot,.photo-slot{position:relative;background:var(--deep);border:1px solid rgba(255,255,255,.12);color:var(--on-deep);overflow:hidden;width:100%}
.reel-slot[data-format="9x16"]{aspect-ratio:9/16}
.reel-slot[data-format="16x9"]{aspect-ratio:16/9}
.photo-slot[data-format="4x5"]{aspect-ratio:4/5}
.photo-slot[data-format="3x2"]{aspect-ratio:3/2}
.rs-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:12px}
.rs-play{width:54px;height:54px;border-radius:50%;border:2px solid rgba(238,232,240,.85);display:grid;place-items:center;flex:none}
.rs-play::after{content:"";margin-left:5px;border-left:15px solid var(--on-deep);border-top:9px solid transparent;border-bottom:9px solid transparent}
.rs-ph b{font:500 1.15rem/1.2 var(--serif)}
.rs-ph small{font:500 .75rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--edge);border:1px solid rgba(227,214,192,.45);padding:3px 8px}
.reel-slot.has-video{background:#000}
.reel-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.reel-slot .rs-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}   /* Runde 27 (PERF-2): Poster zuerst, Video erst beim Klick */
.rs-go{position:absolute;inset:0;z-index:1;display:grid;place-items:center;margin:0;padding:0;border:0;background:transparent;color:var(--on-deep);cursor:pointer}
.rs-go .rs-play{background:rgba(26,26,26,.45);transition:background-color .25s,border-color .25s}
.rs-go:is(:hover,:focus-visible) .rs-play{background:var(--lila);border-color:var(--lila)}
.rs-go:focus-visible{outline:3px solid var(--lilal);outline-offset:-3px}
.reel-slot.sm .rs-play{width:36px;height:36px}
.reel-slot.sm .rs-play::after{margin-left:3px;border-left-width:10px;border-top-width:6px;border-bottom-width:6px}
.reel-slot.sm .rs-ph b{font-size:.95rem}
.photo-slot .ps-ic{width:54px;height:54px;flex:none}
.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot-shadow{box-shadow:var(--soft)}
.slot-shadow.lt{box-shadow:0 2px 4px rgba(0,0,0,.2),0 20px 48px rgba(0,0,0,.3)}
.tcode{display:block;margin-top:20px;color:var(--muted)}
:is(.dk,.nt,.s-deep) .tcode{color:var(--edge)}

/* 10 Karten A/B/C: Papierflaeche, 1-px-Linie, weicher Schatten */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4)}
.card{background:var(--paper);color:var(--ink);border:1px solid var(--hair);box-shadow:var(--soft);padding:var(--sp4) var(--sp3) 36px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--soft-up)}
.badge{display:inline-block;font:500 var(--t-mono) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:var(--sp2)}
.card h3{margin-bottom:var(--sp1)}
.card p{color:#33312c}
.tag{font:500 var(--t-mono) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
:is(.dk,.nt,.s-deep) :is(.tag,.badge){color:var(--on-deep2)}

/* 11 Pakete: Papier-Zettel (Preise exakt aus inhalt-live-pakete.html). Bewusste Ausnahme von der ruhigen Formensprache,
   von Florian ausgewaehlt: Reisskante (clip-path), Klebeband (.tape, Rose/Lila/Salbei), leichte Schraeglage, weicher Papierschatten.
   Schraeglage ueber die Einzel-Eigenschaften rotate/translate (Hover richtet auf). Runde 13: kein Scroll-Einblenden mehr. */
.zrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4);align-items:start;padding-top:20px}
.zw{position:relative;filter:drop-shadow(0 1px 1px rgba(40,25,10,.2)) drop-shadow(0 12px 14px rgba(40,25,10,.22));transition:rotate .5s var(--ease),translate .5s var(--ease)}
.zw:nth-child(1){rotate:-1.6deg}
.zw:nth-child(2){rotate:.8deg;translate:0 -14px}
.zw:nth-child(3){rotate:-.8deg;translate:0 6px}
.zw:hover{rotate:0deg;translate:0 -8px;z-index:3}
/* Runde 13: Zettel ohne Scroll-Effekt (kein Einfliegen/Drehen), stehen ruhig in ihrer Schraeglage, auch falls .rv noch am Element haengt */
html.js.anim .zrow .zw.rv{opacity:1;transform:none!important;transition:rotate .5s var(--ease),translate .5s var(--ease)}
.zp{background:var(--paper);color:var(--ink);padding:44px 28px 28px;min-height:100%;display:flex;flex-direction:column}
.zw:nth-child(1) .zp{clip-path:polygon(0 1.2%,6% 0,14% .9%,27% .2%,41% 1%,58% 0,72% .8%,86% .1%,100% 1%,99.4% 18%,100% 37%,99.2% 59%,100% 80%,99.5% 100%,84% 99.2%,66% 100%,47% 99%,30% 100%,12% 99.3%,0 100%,.6% 78%,0 55%,.7% 31%,0 12%)}
.zw:nth-child(2) .zp{clip-path:polygon(0 .3%,9% 1%,22% 0,37% .9%,52% .1%,69% 1%,83% 0,100% .7%,99.3% 15%,100% 34%,99.4% 52%,100% 71%,99.2% 88%,100% 100%,88% 99.1%,71% 100%,55% 99.2%,38% 100%,21% 99%,8% 100%,0 99.4%,.7% 83%,0 64%,.6% 45%,0 26%,.5% 10%)}
.zw:nth-child(3) .zp{clip-path:polygon(0 .8%,8% 0,19% .7%,35% .1%,48% 1%,63% 0,79% .9%,92% .2%,100% 0,99.5% 22%,100% 41%,99.3% 63%,100% 84%,99.4% 99.5%,90% 100%,73% 99%,58% 100%,42% 99.3%,25% 100%,9% 99%,0 99.6%,.5% 72%,0 49%,.6% 27%,0 9%)}
.tape{position:absolute;top:-12px;left:50%;width:104px;height:30px;margin-left:-52px;z-index:2;clip-path:polygon(0 0,3% 20%,0 40%,3% 60%,0 80%,3% 100%,100% 100%,97% 80%,100% 60%,97% 40%,100% 20%,97% 0)}
.zw:nth-child(1) .tape{background:rgba(232,160,176,.82);rotate:-4deg}
.zw:nth-child(2) .tape{background:rgba(196,169,240,.88);rotate:3deg}
.zw:nth-child(3) .tape{background:rgba(160,192,150,.85);rotate:-2deg}
.rec{position:absolute;left:28px;top:14px;z-index:3;font:500 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lila);border:1px solid var(--lila);padding:4px 8px}
.zp h3{font:500 1.05rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lila)}
.price{font:500 3.4rem/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em;margin:var(--sp2) 0 4px}
.price small{font:400 1rem var(--sans);color:var(--muted)}
.zp ul{list-style:none;margin:var(--sp3) 0;padding:0;flex:1}
.zp li{padding:9px 0 9px 26px;border-bottom:1px dashed rgba(26,26,26,.28);position:relative;font-size:.98rem;line-height:1.4}
.zp li::before{content:"";position:absolute;left:2px;top:13px;width:11px;height:6px;border-left:2.5px solid var(--lila);border-bottom:2.5px solid var(--lila);transform:rotate(-45deg)}
.terms{background:var(--paper);color:#2c2a26;margin:var(--sp5) auto 0;padding:24px 28px;max-width:900px;box-shadow:0 1px 1px rgba(40,25,10,.2),0 10px 14px -6px rgba(40,25,10,.3);rotate:.4deg;position:relative;display:flex;gap:var(--sp3);flex-wrap:wrap;align-items:center;justify-content:space-between}
.terms p{flex:1 1 420px;max-width:640px;font-size:.96rem}
.terms strong{font:500 1.15rem var(--serif);display:block;margin-bottom:6px}

/* kontakt.html Formularkarte an die ruhige Formensprache angeglichen (Seiten-Style hat 3-px-Rahmen) */

/* 13 Foto-Raster + Filter + Lightbox (Struktur wie index.html, #lb-Dialog ins Seitenende kopieren) */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--sp3)}
.chip{font:500 .78rem var(--mono);letter-spacing:.06em;text-transform:uppercase;background:rgba(26,26,26,.06);color:var(--ink);border:1px solid transparent;border-radius:2px;padding:9px 16px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.chip:hover{background:rgba(26,26,26,.11)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.gal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.frame{margin:0;position:relative;transition:opacity .5s var(--ease),filter .5s var(--ease)}
.frame.dim{opacity:.22;filter:grayscale(1)}
.frame .im{display:block;position:relative;aspect-ratio:4/5;background:var(--sand);overflow:hidden}
.frame button{all:unset;display:block;width:100%;cursor:zoom-in;position:relative}
.frame button:focus-visible{outline:3px solid var(--lila);outline-offset:3px}
.frame button:disabled{cursor:default}
.frame img{width:100%;height:100%;object-fit:cover}   /* Runde 26 (337): kein Hover-Zoom mehr */
dialog{border:0;padding:0;background:transparent;color:var(--on-deep)}
dialog::backdrop{background:rgba(24,21,27,.94)}
/* Runde 20: Lightbox fuer ALLE Fotos (site.js legt dialog#lb an, falls die Seite keinen hat). Nur Klassen-Selektoren,
   damit eigene #lb-Regeln einer Seite (galerie, case-gudrun) weiter gewinnen. Zoom/Wischen: transform auf #lb-img (site.js). */
dialog#lb{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;overflow:hidden}
.lb{position:relative;height:100%;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom))}
.lb-top,.lb-bot{flex:none;display:flex;justify-content:space-between;align-items:center;gap:14px;font:400 .8rem var(--mono);color:var(--edge);letter-spacing:.05em}
.lb-bot{justify-content:center;text-align:center;padding:12px 8px 0;font:400 1rem/1.45 var(--sans);letter-spacing:0;color:var(--on-deep)}
.lb-bot:has(#lb-cap:empty){visibility:hidden}
.lb-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:8px 64px;overflow:hidden;touch-action:none}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;cursor:zoom-in;transform-origin:50% 50%}
.lb-stage img.lb-anim{transition:transform .28s var(--ease),opacity .2s}
#lb.lb-zoom .lb-stage img{cursor:grab}
#lb.lb-zoom .lb-stage img:active{cursor:grabbing}
.lb-btn{background:rgba(26,26,26,.6);color:var(--on-deep);border:0;border-radius:50%;width:48px;height:48px;font:400 1.2rem var(--mono);cursor:pointer;display:grid;place-items:center;transition:background-color .2s}
.lb-btn:hover{background:rgba(255,255,255,.16)}
.lb-btn:focus-visible{outline:3px solid var(--lilal);outline-offset:2px}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.lb-prev{left:0}.lb-next{right:0}
.lb-btn[hidden]{display:none}
.lb-close{width:auto;min-width:48px;padding:0 18px;border-radius:999px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;height:48px;margin-left:auto}
#lb.lb-zoom :is(.lb-prev,.lb-next){opacity:0;pointer-events:none}
html.anim dialog#lb[open]{animation:vboxIn .25s var(--ease)}
/* Runde 23 (Bild 273): Laden ohne Sprung. .lb-ph = Vorschaubild als unscharfer Platzhalter in voller Groesse, bis die grosse Datei
   vorgeladen ist (site.js), dann scharf ueberblenden. Ladekreis erst nach 250 ms (schnelle Ladungen zeigen nichts).
   Hintergrund deckt fast ganz ab, damit die Seite dahinter beim Oeffnen nicht durchblitzt. */
dialog#lb::backdrop{background:rgba(24,21,27,.97)}
html.anim dialog#lb[open]::backdrop{animation:vboxIn .2s var(--ease)}
.lb-stage img.lb-ph,#lb .lb-stage img.lb-ph{width:100%;height:100%;filter:blur(6px) brightness(.9)}   /* #lb: schlaegt Seitenregeln wie #lb .lb-stage img{width:auto} (galerie, case-*) */
html.anim .lb-stage img{transition:filter .35s var(--ease)}
html.anim .lb-stage img.lb-anim{transition:transform .28s var(--ease),opacity .2s,filter .35s var(--ease)}
#lb.lb-load .lb-stage::after{content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;
  border:2px solid rgba(238,232,240,.25);border-top-color:var(--lilal);pointer-events:none;opacity:0;animation:lbLoad .2s .25s forwards}
html.anim #lb.lb-load .lb-stage::after{animation:lbLoad .2s .25s forwards,lbSpin .9s linear infinite}
@keyframes lbLoad{to{opacity:1}}
@keyframes lbSpin{to{transform:rotate(360deg)}}
/* Ausloeser: jedes Foto mit role=button (site.js). Fokusring nach innen, weil die Rahmen oft overflow:hidden haben */
img.lb-t{cursor:zoom-in}
img.lb-t:focus-visible{outline:3px solid var(--lila);outline-offset:-3px}

/* 14 Listen, Kontaktzeilen, FAQ, Prosa (Impressum/Datenschutz) */
.lines{list-style:none;margin:var(--sp4) 0 0;padding:0;border-top:1px solid rgba(26,26,26,.3)}
.lines li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid rgba(26,26,26,.16);align-items:baseline}
.lines .mono{color:var(--muted)}
.lines li>:only-child{grid-column:2} /* Folgezeile ohne Beschriftung (kein leerer Span) */
.lines a{font:500 clamp(1.1rem,1.8vw,1.4rem)/1.3 var(--serif);text-decoration:none;word-break:break-word;transition:color .25s}
.lines a:hover{color:var(--lila)}
.lines.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sp4)} /* Zeilen als Spalten-Reihe unter einem Text/Bild */
.lines.cols li{grid-template-columns:1fr;gap:4px}
.sec-h+.lines{margin-top:0}
:is(.dk,.nt,.s-deep) .lines{border-top-color:rgba(238,232,240,.4)}
:is(.dk,.nt,.s-deep) .lines li{border-bottom-color:var(--line)}
:is(.dk,.nt,.s-deep) .lines .mono{color:var(--on-deep2)}
:is(.dk,.nt,.s-deep) .lines a:hover{color:var(--lilal)}
/* FAQ: Ueberschrift oben, Liste in zentrierter Spalte (siehe .split:has(>.faq) in 7) */
.faq details{border-top:1px solid rgba(26,26,26,.2)}
.faq details:last-child{border-bottom:1px solid rgba(26,26,26,.2)}
.faq summary{cursor:pointer;list-style:none;padding:24px 48px 24px 0;position:relative;font:500 clamp(1.2rem,1.9vw,1.45rem)/1.3 var(--serif);transition:opacity .25s}
.faq summary:hover{opacity:.72}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:400 1.6rem/1 var(--mono);color:var(--ink2)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 48px 26px 0;color:var(--muted);max-width:64ch}
.prose{max-width:720px}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:var(--sp5) 0 var(--sp2)}
.prose>:first-child{margin-top:0}
.prose h3{font-size:1.2rem;margin:var(--sp4) 0 var(--sp1)}
.prose p,.prose li{color:#33312c}
.prose p+p{margin-top:var(--sp2)}
.prose ul{padding-left:1.2em}

/* 15 Animation: nur mit html.js.anim (setzt das Inline-Skript im Header-Partial bzw. site.js, nicht bei prefers-reduced-motion).
   Ohne: alles sichtbar. Eine Dauer (--dur), eine Kurve (--ease): Fade + 16 px, Medien skalieren 0.98 -> 1. Kein Bounce. */
html.js.anim .rv{opacity:0;transform:translateY(16px);transition:opacity var(--dur) var(--ease) var(--dl,0s),transform var(--dur) var(--ease) var(--dl,0s)}
html.js.anim .rv.in{opacity:1;transform:none}
html.js.anim .rv :is(.reel-slot,.photo-slot,.frame .im){transform:scale(.98);transition:transform var(--dur) var(--ease) var(--dl,0s)}
html.js.anim .rv.in :is(.reel-slot,.photo-slot,.frame .im){transform:none}
html.js.anim .three .rv:nth-child(2){--dl:.1s}
html.js.anim .three .rv:nth-child(3){--dl:.2s}
html.js.anim .card.rv.in:hover{transform:translateY(-4px);transition-delay:0s;transition-duration:.5s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
html.js.anim .page-hero .lead,html.js.anim .page-hero .cta{animation:rise var(--dur) var(--ease) .25s backwards}

/* 16 Embed-Modus (html.embed): Seite laeuft im iFrame der Handy-App-Huelle (?embed=1 oder self!==top; ?embed=0 erzwingt aus).
   Kopfzeile, Menue-Sheet und Tab-Leiste stellt die Huelle -> hier ausgeblendet, kein Platz unten, Hero-Abstand oben passend. */
html.embed{--hdr:0px;--hdr-c:0px;--tabh:0px;--hero-top:clamp(28px,5vw,64px)}
html.embed :is(.hdr,dialog.msheet,.tabbar){display:none!important}
html.embed body{padding-bottom:0}
html.embed{overscroll-behavior-y:contain}  /* Runde 18: Panel-Ende/-Anfang federt im Panel, Geste laeuft nicht in die Huelle weiter (kein Mitwackeln/Pull-to-Refresh) */

/* 17 Breakpoints */
@media (max-width:1100px){.gal{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Runde 22b (Pruefung B, N7): bis 1100 px Logo | Navigation | Anfragen als auto/1fr/auto, damit das Logo nie in "Video" ragt
   (vorher erst ab 961 px dreigeteilt mit gleich breiten Seitenspalten -> Ueberlappung bei ca. 961 bis 1000 px). */
@media (min-width:761px) and (max-width:1100px){
  .hdr-in{grid-template-columns:auto minmax(0,1fr) auto}
  .hdr-nav{justify-self:center}
}
@media (min-width:761px) and (max-width:960px){
  .hdr-in{gap:var(--sp2)}
  .hdr-nav a{padding:10px 8px}
  html:not(.js) .hdr-nav>ul>li>a[aria-current]::after{left:8px;right:8px}
}
@media (max-width:1000px){
  .split,.split.wide-l,.ph-grid,.ph-duo{grid-template-columns:minmax(0,1fr);gap:var(--sp4)}
  .lines.cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .three{gap:var(--sp3)}
}
@media (max-width:900px){
  .zrow{grid-template-columns:minmax(0,1fr);max-width:540px;margin-inline:auto}
  .zw:nth-child(n){rotate:-.5deg;translate:none}.zw:nth-child(2){rotate:.5deg}.zw:hover{rotate:0deg}
  .zrow{gap:calc(var(--sp4) + 12px)}
}
@media (max-width:860px){
  .three{grid-template-columns:minmax(0,1fr);max-width:540px;margin-inline:auto}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Handy (bis 760 px): Header = App-Leiste aus mobil.html (52 px, Logo, Burger-Sheet), Tab-Leiste unten */
@media (max-width:760px){
  :root{--sec:36px;--hdr:52px;--hdr-c:52px;--tabh:calc(var(--tab) + env(safe-area-inset-bottom));--bar:#FDFCFA;--hero-top:32px;--hero-bot:36px}  /* final12: 44->36, Luecken mobil <=112 */
  .hdr-in{width:100%;padding:0 8px 0 20px;display:flex;justify-content:space-between;gap:8px;transition:none}
  .hdr::before{transition:background-color .3s,border-color .3s}
  .hdr.sc::before{border-bottom-color:var(--app-line)}
  .hdr-nav,.hdr-cta{display:none}
  .hdr-menu{display:grid}
  .hdr-logo{font-size:16px;white-space:normal}
  .hdr-logo img{width:26px;height:26px}
  .tabbar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:35;height:var(--tabh);padding-bottom:env(safe-area-inset-bottom);grid-template-columns:repeat(5,minmax(0,1fr));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--app-line)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;text-decoration:none;font:600 12px/1.2 var(--sans);color:#5C5664;position:relative;transition:color .4s var(--ease)}
  .tabbar svg{width:26px;height:26px;transition:transform .4s var(--ease)}
  .tabbar a[aria-current="page"]{color:var(--lila)}
  .tabbar a[aria-current="page"] svg{transform:translateY(-1px)}
  /* Gleitender Indikator (eigenes Element, site.js): Breite = 1 Tab, Position per translateX in Tab-Einheiten */
  .tab-ind{position:absolute;left:0;top:0;width:20%;height:3px;pointer-events:none;opacity:0;transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .3s}
  .tab-ind::before{content:"";position:absolute;left:50%;top:0;width:30px;height:3px;margin-left:-15px;border-radius:0 0 3px 3px;background:var(--lila)}
  .tab-ind.on{opacity:1}
  .tab-ind.instant{transition:opacity .3s}
  html:not(.js) .tabbar a[aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;width:30px;height:3px;margin-left:-15px;border-radius:0 0 3px 3px;background:var(--lila)}
  .chip{min-height:44px}
  .chips{gap:8px}.chip{padding:9px 12px}
  .lines a,.toc a{display:inline-flex;align-items:center;min-height:44px}
  .ftr-nav a{min-width:44px;justify-content:center}
  .ftr{padding:40px 0 32px}
  .ftr .wrap{grid-template-columns:minmax(0,1fr);gap:var(--sp3)}
  .ftr .soc{justify-content:flex-start}
  .ftr a{display:inline-flex;align-items:center;min-height:44px}
  .ftr-nav{gap:0 24px;padding-top:var(--sp2)}
  /* Rechtszeile: alle Teile gleich hoch (44 px) und mittig -> gemeinsame Grundlinie; © eigene Zeile, Links darunter */
  .ftr-legal{gap:0 22px;align-items:center}
  .ftr-legal>*{display:inline-flex;align-items:center;min-height:44px}
  .ftr-legal>span{flex:1 1 100%;min-height:0;padding:10px 0 2px}
  .faq summary{padding:20px 40px 20px 0}
  .faq details p{padding-right:0}
  .faq p a{padding:13px 0}
  .prose a,.ph-legal p a,.consent a{padding:14px 0} /* Inline-Polster: Trefferflaeche 44 px, Zeilenabstand unveraendert */
  .lines li{grid-template-columns:1fr;gap:2px}
  .lines li>:only-child{grid-column:auto}
  .lines.cols{grid-template-columns:minmax(0,1fr)}
  .lb{padding-inline:8px}
  .lb-stage{padding:4px 0}
  .lb-top{min-height:52px}
  .lb-close{height:52px;padding:0 22px;font-size:.85rem;background:rgba(255,255,255,.12)}   /* grosse Schliessen-Flaeche oben rechts */
  .lb-prev,.lb-next{top:auto;bottom:0;transform:none;background:rgba(26,26,26,.5)}   /* Handy: Pfeile unten in die Ecken, Bild bleibt frei (Wischen geht auch) */
  .ph-stage{gap:12px}
}
@media (max-width:400px){
  .hdr-logo{gap:8px;font-size:15px}
}
/* 18 Seitenwechsel (Runde 8): View Transitions fuer Dokumente. Nur der Inhalt blendet kurz ueber (200 ms),
   Kopfzeile und Tab-Leiste bleiben stehen (eigener Name, keine Animation; ihr eigener Indikator gleitet).
   Ohne Unterstuetzung: normales Laden. prefers-reduced-motion: aus. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .hdr{view-transition-name:tp-hdr}
  .tabbar{view-transition-name:tp-tabbar}
  ::view-transition-group(root){animation-duration:.2s}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:ease-out}
  ::view-transition-old(tp-hdr),::view-transition-old(tp-tabbar){display:none}
  ::view-transition-group(tp-hdr),::view-transition-group(tp-tabbar),::view-transition-new(tp-hdr),::view-transition-new(tp-tabbar){animation:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* 19 Auswahl-Liste (Runde 10b, Vorbild "Services"-Liste): grosse ruhige Zeilen, aktive Zeile voll, Pfeil gleitet (transform),
   rechts gestapelte Bilder mit Cross-Fade (nur opacity). Markup: index.html #bereiche, mobil-start.html #ueberblick.
   Ohne JS bzw. ohne .anim (reduced motion): alle Zeilen voll, erstes Bild sichtbar. */
.svc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--sp5) var(--gap);align-items:start}
.svc-head h2{font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--muted)}
.svc-rows{position:relative;margin-top:var(--sp4)}
.svc-list{list-style:none;margin:0;padding:0}
.svc-row{padding:clamp(12px,1.4vw,20px) 0 clamp(12px,1.4vw,20px) clamp(40px,4.4vw,72px)}
.svc-row h3{font-size:clamp(2.3rem,5vw,4.5rem);line-height:1.04;letter-spacing:-.02em}
.svc-row h3 a{display:inline-block;text-decoration:none}
.svc-row p{margin-top:6px;font-size:var(--t-body);line-height:1.45;color:var(--muted);max-width:52ch}
html.anim .svc-row h3 a{opacity:.62;transition:opacity .5s var(--ease)}
html.anim .svc-row.on h3 a,html.anim .svc-row h3 a:focus-visible{opacity:1}
.svc-stage{position:sticky;top:calc(var(--hdr) + var(--sp4));display:grid;width:min(100%,calc((100vh - var(--hdr) - 170px) * .8));justify-self:end}
.svc-fig{grid-area:1/1;margin:0;opacity:0}
.svc-fig.on{opacity:1}
html.anim .svc-fig{transition:opacity .6s var(--ease)}
.svc-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sand)}
.svc-frame img{display:block;width:100%;height:100%;object-fit:cover}
.svc-frame>:is(.reel-slot,.photo-slot){position:absolute;inset:0;aspect-ratio:auto;height:100%}
.svc-fig figcaption{margin-top:var(--sp2);font:400 .95rem/1.4 var(--sans);color:var(--muted)}
.svc-frame>.photo-slot{background:var(--cream);border:1px solid var(--hair);color:var(--muted)}
.svc-frame>.photo-slot .ps-ic{opacity:.55}
.svc-type{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:var(--sp3);padding:var(--sp4);background:var(--deep);color:var(--on-deep)}
.svc-type small{display:block;font:500 var(--t-mono)/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-deep2)}
.svc-type b{display:block;margin-top:4px;font:500 clamp(2rem,3.4vw,2.8rem)/1 var(--serif)}
@media (max-width:760px){
  .svc{grid-template-columns:minmax(0,1fr)}
  .svc-stage{display:none}
  .svc-row{padding:12px 0 12px 36px}
  .svc-row h3{font-size:clamp(30px,8.6vw,38px)}
  .svc-row p{font-size:15px}
}

/* 19 neu.html: Hero .ph-neu (paper). Runde 22b: altes Upload-Raster .neu-grid/.neu-cap/.neu-tag entfernt (neu.html nutzt .pj, Pruefung B N2). */
.ph-neu{--hero-bg:var(--paper);background:var(--hero-bg);margin-top:calc(-1 * var(--hdr));padding:calc(var(--hdr) + var(--hero-top)) 0 var(--hero-bot)}

/* 20 Runde 11: globale Komponenten (Nutzung: RUNDE11-KOMPONENTEN.md) */
/* Social-Leiste (partials/social.html): Linien-Pillen, Icon 24 px / 1,6 px Linie. Runde 26: Hover/Fokus-Animation (Kreis lila, Symbol hell, soc-flap/soc-hs/soc-lens/soc-mv) in Abschnitt 27 b */
.soc{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.soc [hidden]{display:none}
/* Runde 20: keine Umrandung mehr. Icon in einer zarten Lila-Scheibe, Beschriftung in Mono daneben; Hover: Scheibe Lila, Text Lila, ganze Zeile leicht getoent */
.soc-a{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 14px 0 4px;border:0;border-radius:999px;color:var(--ink);background:transparent;text-decoration:none;font:500 .74rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:color .3s var(--ease),background-color .3s var(--ease)}
.soc-a:focus-visible{color:var(--lila)}
@media (hover:hover){.soc-a:hover{color:var(--lila)}}   /* Runde 27 (C-F14): keine Zeilen-Toenung mehr, nur Text + Kreis */
.soc-a svg{width:36px;height:36px;padding:8px;box-sizing:border-box;border-radius:50%;background:var(--lila-t);color:var(--lila);flex:none;overflow:visible;transition:background-color .3s var(--ease),color .3s var(--ease)}
.soc--icons .soc-a{padding:0;width:44px;justify-content:center}
.soc--icons .soc-a:is(:hover,:focus-visible){background:transparent}
.soc--icons .soc-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.soc--on-dark .soc-a,:is(.dk,.nt,.s-deep) .soc-a{color:var(--on-deep)}
.soc--on-dark .soc-a svg,:is(.dk,.nt,.s-deep) .soc-a svg{background:rgba(196,169,240,.16);color:var(--lilal)}
.soc--on-dark .soc-a:is(:hover,:focus-visible),:is(.dk,.nt,.s-deep) .soc-a:is(:hover,:focus-visible){color:var(--lilal)}

/* Frage-Formular v2 (Runde 12, form.ask[data-ask] -> send.php): links E-Mail + Name + Einwilligung, rechts Frage + Button. Bis 760 px einspaltig. */
.ask{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--sp3) var(--sp4);max-width:980px;align-items:start}
.ask-col{display:grid;gap:var(--sp2);min-width:0}
.ask-f{display:grid;gap:8px;min-width:0}
.ask label:not(.ask-c){font:500 var(--t-mono)/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.ask .req{color:var(--lila)}
.ask :is(input:not([type=checkbox]),textarea){width:100%;min-height:50px;padding:12px 14px;font:400 1rem/1.4 var(--sans);color:var(--ink);background:var(--paper);border:1px solid #8A857D;border-radius:0;transition:border-color .25s var(--ease)}
.ask textarea{min-height:168px;resize:vertical}
.ask :is(input,textarea):hover{border-color:var(--ink2)}
.ask :is(input,textarea):focus-visible{outline:2px solid var(--lila);outline-offset:2px;border-color:var(--ink)}
.ask ::placeholder{color:#6b675f;opacity:1}
.ask [aria-invalid=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}   /* Runde 22b: Fehler in Ink (Lila = Akzent/Auswahl) */
.ask-c{display:flex;gap:12px;align-items:flex-start;font:400 .92rem/1.5 var(--sans);color:var(--ink);cursor:pointer}
.ask-c input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--lila)}
.ask-c a{color:var(--lila);font-weight:600}
:is(.consent,.ask-c){min-height:44px}
:is(.consent,.ask-c) a{padding:14px 0} /* F7 Runde 13: Zeile und Link-Trefferflaeche >= 44 px */
.ask-e{font:500 .88rem/1.4 var(--sans);color:var(--ink);padding-left:10px;border-left:2px solid var(--lila)}
.ask-e:empty{display:none}
.ask-go{justify-content:center;min-height:52px;width:100%}
.ask-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
:is(.dk,.nt,.s-deep,.ftr) .ask label:not(.ask-c){color:var(--on-deep2)}
:is(.dk,.nt,.s-deep,.ftr) .ask .ask-c{color:var(--on-deep)}
:is(.dk,.nt,.s-deep,.ftr) .ask :is(.ask-c a,.req){color:var(--lilal)}
:is(.dk,.nt,.s-deep,.ftr) .ask .ask-e{color:var(--on-deep);border-left-color:var(--lilal)}
:is(.dk,.nt,.s-deep,.ftr) .ask .btn.ask-go{background:var(--cream);border-color:var(--cream);color:var(--ink)}
:is(.dk,.nt,.s-deep,.ftr) .ask .btn.ask-go:hover{background:var(--lilal);border-color:var(--lilal)}
@media (max-width:760px){.ask{grid-template-columns:minmax(0,1fr)}.ask textarea{min-height:140px}}

/* Hochzaehlen (data-count): feste Ziffernbreite, nichts springt (min-width in ch setzt site.js) */
[data-count]:not([data-yt-feed]){display:inline-block;font-variant-numeric:lining-nums tabular-nums;text-align:right}

/* Ueberscroll-Kulisse (site.js, .tp-under): oben Header-/Seitenanfangsfarbe, unten Footer-Farbe.
   html-Hintergrund = Footer-Farbe, body = cream: die Kulisse ist nur beim Gummiband-Ueberscrollen sichtbar. Embed/Huelle: aus. */
html{background:var(--foot)}
html.embed,html[data-shell]{background:none}
.tp-under{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--foot)}
.tp-under::before{content:"";position:absolute;inset:0 0 50%;background:var(--tp-top,var(--paper))}

/* Runde 11 Nachtrag: lesbare Kontaktzeile im Footer */
.ftr-direct{margin:var(--sp2,16px) 0 0;font-size:.95rem;line-height:1.6}
.ftr-direct a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
.ftr-direct a:hover,.ftr-direct a:focus-visible{text-decoration-color:currentColor}

/* 21 Runde 12: Scroll-Bausteine + Link-Button (Nutzung: RUNDE12-KOMPONENTEN.md). Versteckte Startzustaende NUR unter html.js.anim
   (fehlt ohne JS und bei prefers-reduced-motion) -> sonst Endzustand. Nur transform/opacity, weiche Kurve, kein Bounce. */
html.js.anim :is([data-rise],[data-stagger]>*,h2.hrv){transition:opacity .8s var(--ease) var(--rd,0s),transform .8s var(--ease) var(--rd,0s)}
html.js.anim :is([data-rise]:not(.in),[data-stagger]:not(.in)>*){opacity:0;transform:translateY(24px)}
html.js.anim h2.hrv:not(.in){opacity:0;transform:translateY(14px)}
/* Bilder: data-zoom 1.06 -> 1 beim Hereinscrollen; data-par Verschiebung setzt site.js (inline transform, max 24 px, Bild dabei 1.06) */
html.js.anim [data-zoom]{transition:transform 1.4s var(--ease)}
html.js.anim [data-zoom]:not(.in){transform:scale(1.06)}
html.js.anim [data-par]{transform:scale(1.06)}
/* Haarlinie */
.hl{display:block;width:100%;height:1px;margin:0;border:0;background:var(--hair)}
:is(.dk,.nt,.s-deep,.ftr) .hl{background:rgba(238,232,240,.28)}
html.js.anim [data-line]{transform-origin:0 50%;transition:transform 1.1s var(--ease)}
html.js.anim [data-line=center]{transform-origin:50% 50%}
html.js.anim [data-line]:not(.in){transform:scaleX(0)}
/* Scroll-Fortschritt: --p (Container) / --k + .on (Kinder) setzt site.js; Standard = Endzustand */
[data-scrub]{--p:1}
[data-scrub]>*{--k:1}
.scrub-bar{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--hair);pointer-events:none}
.scrub-bar::after{content:"";position:absolute;inset:0;background:var(--lila);transform:scaleY(var(--p));transform-origin:50% 0}
:is(.dk,.nt,.s-deep) .scrub-bar{background:rgba(238,232,240,.28)}
:is(.dk,.nt,.s-deep) .scrub-bar::after{background:var(--lilal)}

/* Link-Button .lnk (Runde 20 neu): ruhige Sekundaer-Aktion OHNE Kasten. Mono-Text mit feiner Grundlinie (35 %), die beim Hover
   voll und Lila wird; optionaler Pfeil (.lnk-ar) rueckt 3 px. Mind. 44 px Trefferflaeche. */
.lnk{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;color:var(--ink);text-decoration:none;
  font:500 .78rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:color .25s}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;opacity:.35;transition:opacity .25s}
.lnk:has(.lnk-ar)::after{right:26px}
.lnk-ar{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.lnk:is(:hover,:focus-visible){color:var(--lila)}
.lnk:is(:hover,:focus-visible)::after{opacity:1}
.lnk:is(:hover,:focus-visible) .lnk-ar{transform:translateX(3px)}
.lnk:active{opacity:.75}
.lnk--u{padding:0 2px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.lnk--u::after{display:none}
:is(.dk,.nt,.s-deep) .lnk{color:var(--on-deep)}
:is(.dk,.nt,.s-deep) .lnk:is(:hover,:focus-visible){color:var(--lilal)}

/* Footer Social (Runde 20): Scheiben ohne Rand, 48 px, wie die Kontakt-Leiste */
.ftr .soc--icons{gap:10px}
.ftr .soc--icons .soc-a{width:48px;min-height:48px;color:#fff}
.ftr .soc--icons .soc-a svg{width:48px;height:48px;padding:12px;background:rgba(255,255,255,.1);color:#fff}

/* 22 Runde 13 (Nutzung: RUNDE13-KOMPONENTEN.md)
   a) Pin-Schritte [data-pin-steps]: Grundzustand = Endzustand (Balken voll, alle Punkte gefuellt, kein Pin).
      site.js setzt nur ab 1001x600 (ohne reduced-motion) .pin-on, --pin-top, die Hoehe der Huelle, --p und li.on / li.is-act.
      Runde 14: Balken, Fuellung und Punkte liegen in EINEM Koordinatensystem (.pin-list). Die li sind nicht positioniert,
      der Punkt (li::before) haengt also an der .pin-list: quer zur Leiste top = bar-y + (bar-h - dot)/2 (alles gerade Zahlen),
      laengs bleibt er an seiner statischen Stelle (Inhaltsanfang des li). Ring als inset-Schatten, Box immer genau dot x dot
      (frueher: border 3px auf content-box-Pseudo -> 26 px Box, Mitte 3 px nach unten/rechts versetzt). */
[data-pin-steps]{--p:1;--bar-y:13px;--bar-h:10px;--dot:20px;--bar-gap:48px;--li-pad:20px}
.pin-list{position:relative;list-style:none;margin:0;padding:var(--bar-gap) 0 0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--sp3)}
.pin-list::before,.pin-list::after{content:"";position:absolute;left:0;right:0;top:var(--bar-y);height:var(--bar-h);border-radius:999px;pointer-events:none}
.pin-list::before{background:rgba(26,26,26,.1)}
.pin-list::after{background:var(--lila);clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0 round 999px);transition:clip-path .5s var(--ease)}
.pin-list>li{padding:var(--li-pad);border:1px solid transparent;border-radius:14px;transition:background-color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
.pin-list>li::before{content:"";position:absolute;z-index:1;top:calc(var(--bar-y) + (var(--bar-h) - var(--dot)) / 2);box-sizing:border-box;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--lila);box-shadow:inset 0 0 0 3px var(--lila);transition:background-color .3s}
.pin-n{display:block;width:fit-content;font:400 2rem/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--lila);transform-origin:left bottom;transition:transform .45s var(--ease)}
.pin-list :is(h3,b,strong){display:block;margin:12px 0 8px;font:500 1.35rem/1.2 var(--serif);color:var(--ink)}
.pin-list p{margin:0;color:var(--muted);line-height:1.5}
@media (max-width:760px){
  [data-pin-steps]{--bar-y:5px;--bar-gap:40px;--li-pad:12px}
  .pin-list{grid-auto-flow:row;padding:0 0 0 var(--bar-gap);gap:var(--sp2)}
  .pin-list::before,.pin-list::after{left:var(--bar-y);right:auto;top:0;bottom:0;width:var(--bar-h);height:auto}
  .pin-list::after{clip-path:inset(0 0 calc((1 - var(--p)) * 100%) 0 round 999px)}
  .pin-list>li::before{top:auto;margin-top:6px;left:calc(var(--bar-y) + (var(--bar-h) - var(--dot)) / 2)}
}
@media (prefers-reduced-motion:reduce){.pin-list>li,.pin-list>li::before,.pin-list::after,.pin-n{transition:none}}

/* b) Video-Lightbox [data-vbox]: Knopf ueber dem Slot (bei echtem Video klein in der Ecke), gemeinsames dialog.vbox (site.js) */
[data-vbox]{position:relative}
.vbox-btn{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px;margin:0;border:0;background:transparent;cursor:zoom-in;font:inherit;color:var(--on-deep)}
.vbox-btn span{font:500 .76rem/1 var(--sans);letter-spacing:.02em;background:rgba(26,26,26,.72);padding:7px 9px;transition:background .25s}
.vbox-btn:hover span{background:rgba(26,26,26,.92)}
.vbox-btn:focus-visible{outline:3px solid var(--lilal);outline-offset:-3px}
.has-video>.vbox-btn{inset:8px 8px auto auto;padding:0}
dialog.vbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0}
dialog.vbox[open]{display:grid;place-items:center}
html.anim dialog.vbox[open]{animation:vboxIn .3s var(--ease)}
@keyframes vboxIn{from{opacity:0}}
.vbox-stage{position:relative;aspect-ratio:9/16;height:min(88vh,calc((100vw - 32px) * 16 / 9));max-width:calc(100vw - 32px)}
.vbox-stage.w{aspect-ratio:16/9;height:auto;width:min(calc(100vw - 32px),calc(88vh * 16 / 9))}
.vbox-stage>.reel-slot{height:100%;aspect-ratio:auto}
.vbox-stage video{object-fit:contain}
.vbox-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vbox-stage .rs-ph b{font:400 2.4rem/1 var(--serif)}
.vbox-note{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;background:var(--deep);color:var(--on-deep)}
.vbox-note p{margin:0;max-width:34ch;font-size:.95rem;line-height:1.5}
.vbox-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.vbox .lb-close{position:fixed;top:14px;right:16px;z-index:2}
.fcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp2);min-width:0;padding:28px 28px 26px;background:var(--paper);color:var(--ink);
  border:1px solid var(--hair);border-radius:6px;box-shadow:0 1px 2px rgba(26,26,26,.04);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
:is(.s-paper,.ph-foto,.ph-neu) .fcard{background:var(--cream);border-color:transparent;box-shadow:none}
.fcard h3{font:500 clamp(1.3rem,1.8vw,1.55rem)/1.15 var(--serif)}
.fcard p{color:var(--muted);line-height:1.55}
.fcard>p:last-of-type{flex:1}
.fcard .lnk{margin-top:auto}
.fcard:is(:hover,:focus-within){transform:translateY(-3px);box-shadow:var(--soft);border-color:rgba(26,26,26,.18)}
:is(.dk,.nt,.s-deep) .fcard{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--on-deep);box-shadow:none}
:is(.dk,.nt,.s-deep) .fcard p{color:var(--on-deep2)}
@media (max-width:760px){
  .fcard{padding:22px 20px 20px}
}
@media (prefers-reduced-motion:reduce){.fcard:is(:hover,:focus-within){transform:none}}

/* 24 Runde 22 (Nutzung: RUNDE22-KOMPONENTEN.md)
   a) Kopfzeile 761 bis 960 px: mit Video-, Referenzen- und Foto-Dropdown wird die Leiste breiter; Logo nur als Bildmarke (Link behaelt aria-label). */
@media (min-width:761px) and (max-width:960px){.hdr-logo span{display:none}}
/* b) Balken-Wachstum [data-grow]: .f-Segmente fuellen sich beim Einblenden von links (background-size), Spur bleibt stehen.
   Nur unter html.js.anim (ohne JS / reduced-motion: Endzustand). Staffelung --gd setzt site.js (Standard 80 ms). Optik danach = Original. */
html.js.anim [data-grow] .f{background-color:var(--grow-track,rgba(26,26,26,.13));background-image:linear-gradient(var(--grow-fill,var(--lila)),var(--grow-fill,var(--lila)));background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;transition:background-size var(--grow-dur,700ms) var(--ease) var(--gd,0s)}
html.js.anim [data-grow] .f::before{background:none}
html.js.anim [data-grow]:not(.gr) .f{background-size:0 100%}   /* Runde 24: .gr statt .in, setzt site.js bei jedem Einblenden neu */
/* c) Runde 22b: Touch-Ziele und Ruhe (Pruefungen B und C)
   - Filter-Chips auf Touch mindestens 44 px hoch (Handy hatte das schon, Tablet nicht). */
@media (pointer:coarse){
  .chip{min-height:44px}
}
/* Gedrueckt-Zustand fuer Chips und Zeilen-Links (Pruefung C, N2), wie .btn */
:is(.chip,.areas .ar,.of-rows a,.vb-more a,.fb-more a):active{transform:translateY(1px)}
/* Ruhige Schritte (data-pin-steps ohne ="scroll"): einmaliges Einblenden nur ueber opacity. Kein transform an den li,
   sonst wuerden sie waehrend des Einblendens zum Bezugsrahmen der absolut gesetzten Punkte (li::before) und die Punkte springen. */
html.js.anim [data-pin-steps] .pin-list[data-stagger]:not(.in)>*{transform:none}
/* FAQ auf dunkler Flaeche (Pruefung C, H1: z. B. kontakt.html #faq als s-deep dk) */
:is(.dk,.nt,.s-deep) .faq details{border-color:rgba(238,232,240,.28)}
:is(.dk,.nt,.s-deep) .faq details p{color:var(--on-deep2)}
:is(.dk,.nt,.s-deep) .faq summary::after{color:var(--on-deep2)}
/* Fokusring fuer Strecklink-Karten auch ohne :has() (Pruefung B, N6 sinngemaess fuer .fcard) */
/* 25 Runde 24 (Core3) ------------------------------------------------------------------------------------------------
   a) Dropdowns: Runde 26 entfernt. */
/* b) Social-Symbole ohne Adresse (Bilder 280, 282): a.soc-soon (site.js / partials/footer.html), ohne href (kein Klick moeglich).
   R30: optisch und in der Hover-Animation gleich wie die aktiven Symbole (kein pointer-events:none mehr), Tooltip am li */
.soc-a.soc-soon{cursor:default}
.soc li[title]{cursor:default}
/* c) Balken wachsen bei jedem Einblenden (Bilder 289, 295). Klasse .gr setzt/entfernt site.js. Ohne JS/reduced-motion: Endzustand.
      So-laeuft-Linie [data-pin-steps]: Lila-Fuellung waechst, Punkte erscheinen nacheinander (--gd). */
html.js.anim [data-pin-steps]:not([data-pin-steps="scroll"]) .pin-list:not(.gr){--p:0}
html.js.anim [data-pin-steps]:not([data-pin-steps="scroll"]) .pin-list::after{transition:clip-path 1.4s var(--ease)}
html.js.anim [data-pin-steps]:not([data-pin-steps="scroll"]) .pin-list>li::before{transition:background-color .3s,transform .45s var(--ease) var(--gd,0s)}
html.js.anim [data-pin-steps]:not([data-pin-steps="scroll"]) .pin-list:not(.gr)>li::before{transform:scale(0)}
/*    Video-Unterseiten "So laeuft es ab" (.vb-steps): Hell-Lila-Linie ueber der Trennlinie jedes Schritts waechst nacheinander. */
.vb-steps>li{position:relative}
.vb-steps>li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--lilal);transform-origin:0 50%}
html.js.anim .vb-steps>li::before{transition:transform .8s var(--ease) var(--gd,0s)}
html.js.anim .vb-steps:not(.gr)>li::before{transform:scaleX(0)}
/* d) Bereichs-Leiste .anav (Bilder 291, 297), sticky direkt unter der Kopfzeile. Markup: RUNDE24-KOMPONENTEN.md 1
      (nav.anav als ERSTES Kind von <main>, darin .wrap > ul). Die Leiste zieht sich unter die transparente Kopfzeile
      (Flaeche bis ganz oben) und dockt beim Scrollen genau unter der kompakten Kopfzeile an: top = --hdr-c - --hdr
      (Desktop -12 px, Handy 0, Embed 0). Der folgende Hero zieht sich nicht mehr hoch, kleiner Kopfabstand. */
.anav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;white-space:nowrap;font:500 var(--t-mono)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.anav li:first-child a{padding-left:0}
.anav a:hover{color:var(--ink)}
.anav a[aria-current="page"]{color:var(--lila);border-bottom-color:var(--lila)}
.anav a:focus-visible{outline-offset:-3px}
main>.anav{position:sticky;top:calc(var(--hdr-c) - var(--hdr));z-index:30;margin:calc(-1 * var(--hdr)) 0 0;padding-top:var(--hdr);background:var(--bar);border-bottom:1px solid var(--hair)}
main>.anav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:0;overscroll-behavior-x:contain}
main>.anav ul::-webkit-scrollbar{display:none}
main>.anav+.page-hero{margin-top:0;padding-top:var(--hero-top-anav,clamp(24px,3.2vw,44px))}
html:has(main>.anav){scroll-padding-top:calc(var(--hdr-c) + 60px)}

/* 26) Runde 25 (Bilder 302, 303): Fotos nicht herausziehbar (dazu site.js: draggable=false, dragstart abgefangen). Klick und Rechtsklick bleiben. */
img,video{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}

/* 27 Runde 26 (Core5, Nutzung: RUNDE26-KOMPONENTEN.md) ------------------------------------------------------------------
   a) Kontakt-Chips (Bild 316): Chip-Zeilen mit Instagram-Chip (nicht die reinen Symbol-Leisten) als ruhiges Raster,
      3 Spalten x 2 Zeilen gleicher Breite, Handy 2 Spalten. Reines CSS, kein Markup noetig. */
.soc:not(.soc--icons):has(.soc-ig){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 26px}.soc:not(.soc--icons):has(.soc-ig) .soc-a{width:100%}   /* R31 (Bild 360): fest 2 Zeilen zu 3, Florian wollte die lockere Reihe nicht */
@media (max-width:560px){.soc:not(.soc--icons):has(.soc-ig){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}.soc:not(.soc--icons):has(.soc-ig) .soc-a{width:100%}}
/* b) Hover/Fokus-Animation Chips und Footer-Symbole (Bilder 320, 321): Kreis fuellt sich lila, Symbol hell,
      E-Mail Klappe oeffnet, Telefon neigt sich, Instagram Linse dreht (Blenden-Muster), LinkedIn kippt, YouTube/TikTok deutlich.
      R30 (Bild 351): Bewegungen kraeftiger, wirkten vorher zu schwach/"faul" (YouTube verschob sich nur 0,8px).
      Runde 27 (C-F14/F20): kein Anheben, keine Zeilen-Toenung, keine Keyframes mehr; alles Transitions, laeuft beim Verlassen weich zurueck.
      Nur :focus-visible und :hover bei Maus (hover:hover). Bewegung nur unter html.anim (aus bei reduced-motion), Transitions laufen beim Verlassen zurueck. */
.soc-a svg *{transform-box:fill-box;transform-origin:50% 50%}
.soc-a .soc-flap{transform-origin:50% 0}
.soc-a .soc-lens{stroke-dasharray:24 0}
html.anim .soc-a svg{transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
html.anim .soc-a svg *{transition:transform .3s cubic-bezier(.34,1.56,.64,1),stroke-dasharray .45s var(--ease)}
.soc-a:focus-visible svg,.ftr .soc--icons .soc-a:focus-visible svg,.soc--on-dark .soc-a:focus-visible svg,:is(.dk,.nt,.s-deep) .soc-a:focus-visible svg{background:var(--lila);color:#fff}
html.anim .soc-a:focus-visible .soc-flap{transform:scaleY(.4)}
html.anim .soc-a:focus-visible .soc-lens{stroke-dasharray:2.9 1.08;transform:rotate(135deg)}
html.anim .soc-yt:focus-visible path{transform:scale(1.22)}
html.anim .soc-fb:focus-visible .soc-mv{transform:scale(1.22)}
html.anim .soc-a:focus-visible .soc-hs{transform:rotate(-22deg)}
html.anim .soc-li:focus-visible .soc-mv{transform:scale(1.22)}
@media (hover:hover){
  .soc-a:hover svg,.ftr .soc--icons .soc-a:hover svg,.soc--on-dark .soc-a:hover svg,:is(.dk,.nt,.s-deep) .soc-a:hover svg{background:var(--lila);color:#fff}
  html.anim .soc-a:hover .soc-flap{transform:scaleY(.4)}
  html.anim .soc-a:hover .soc-lens{stroke-dasharray:2.9 1.08;transform:rotate(135deg)}
  html.anim .soc-yt:hover path{transform:scale(1.22)}
  html.anim .soc-fb:hover .soc-mv{transform:scale(1.22)}
  html.anim .soc-a:hover .soc-hs{transform:rotate(-22deg)}
  html.anim .soc-li:hover .soc-mv{transform:scale(1.22)}
}
/* c) Wechselleiste nav.anav (Bild 326, 333): kein Punkt mehr; der lila Balken ist ein span.anav-bar (legt site.js an), waechst beim Laden
      von links und gleitet zum neuen Eintrag. Ohne JS: Unterlinie am aktiven Link (wie bisher).
      Lueckenlos unter der Kopfzeile: top = --hdr-c - --hdr (Kopfzeilen-Box ist immer --hdr hoch, sichtbar oben --hdr, gescrollt --hdr-c).
      Damit die Leiste beim Umschalten nicht vom wachsenden/schrumpfenden Kopfzeilen-Hintergrund ueberdeckt wird, wechselt die Hoehe
      der Kopfzeile auf Seiten mit Leiste ohne Uebergang (genau bei 12 px, wenn auch die Leiste andockt). */
main>.anav ul{position:relative}
/*    Runde 27 (C-F3): weicher Verlauf als Scrollhinweis, nur wenn die Leiste ueberlaeuft (site.js setzt .fl/.fr je Richtung) */
main>.anav ul.fr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
main>.anav ul.fl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
main>.anav ul.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.anav-bar{position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--lila);pointer-events:none;transition:translate .45s var(--ease),width .5s var(--ease)}
.anav-bar.instant{transition:none}
.anav ul.has-bar a[aria-current="page"]{border-bottom-color:transparent}
html:has(main>.anav) .hdr::before{transition:background-color .4s,border-color .4s}
html:has(main>.anav) .hdr-in{transition:none}
/* d) Hero fuellt den Frame (Bilder 323, 329, 333): Fensterhoehe minus Kopfzeile, Leiste und Handy-Tab-Leiste, hoechstens --hero-max,
      Inhalt vertikal mittig. --hero-h (sichtbare Hero-Hoehe) steht jeder .page-hero zur Verfuegung (Mediengroessen der Seiten).
      Nicht: Embed, .ph-legal (Impressum, Datenschutz, danke, 404), body.pg-projekt, .hero-nofill, .hero-compact; nicht unter 521 px Fensterhoehe.
      Runde 27 (C-F1): --hero-max 1200 px (vorher 960, bei 1080p blitzte unten die Folgeflaeche auf). Doku: RUNDE27-KOMPONENTEN.md.
      Null-Spezifitaet (:where), damit Seitenregeln gewinnen. */
:root{--anav-h:45px}
.page-hero{--hero-pull:0px;--hero-bar:0px}
:is(.ph-video,.ph-pakete,.ph-referenzen,.ph-foto,.ph-kontakt,.ph-neu,.ph-home,.dk,.nt).page-hero{--hero-pull:var(--hdr)}
main>.anav+.page-hero{--hero-pull:0px;--hero-bar:var(--anav-h)}
.page-hero{--hero-h:calc(100vh - var(--hdr) - var(--hero-bar) - var(--tabh))}
@supports (height:100svh){.page-hero{--hero-h:calc(100svh - var(--hdr) - var(--hero-bar) - var(--tabh))}}
@media (min-height:521px){
  :where(html:not(.embed)) :where(body:not(.pg-projekt)) :where(.page-hero:not(.ph-legal,.hero-nofill,.hero-compact)){min-height:calc(min(var(--hero-h),var(--hero-max,1200px)) + var(--hero-pull));display:flex;flex-direction:column;justify-content:center}
}
/*    Runde 27 (C-F2): textarme Heros .hero-compact: kein Fuellen, Hoehe = Inhalt plus ruhiger Abstand unten */
.page-hero.hero-compact{padding-bottom:clamp(32px,4vw,56px)}
/*    Zweispaltiger Hero-Inhalt: .wrap.hero-grid > .hero-txt + .hero-media (Seitenregeln duerfen alles ueberschreiben).
      Runde 27 (C-F4): Medienspalte breiter, Hero-.wrap bis 1400 px (ueber --w, nicht .ph-home). */
:where(.hero-grid){display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.55fr);gap:var(--gap);align-items:center}
:where(.page-hero:not(.ph-home)>.hero-grid){--w:1400px}
/*    .hero-fit: Medium nimmt die Groesse aus der Hero-Hoehe (--hero-h minus --hero-gap), Seitenverhaeltnis --ar bleibt, 280-px-Boden. */
/*    Klasse statt :where, damit sie .reel-slot{width:100%} schlaegt; Seitenregeln mit zwei Klassen gewinnen weiter. Die Hoehe ergibt sich
      aus Breite / --ar und bleibt so <= --hero-h minus --hero-gap (wirkt wie max-height, ohne das Seitenverhaeltnis zu brechen). */
.hero-fit{--ar:16/9;display:block;width:min(100%,max(280px,(var(--hero-h) - var(--hero-gap,120px)) * var(--ar)));height:auto;aspect-ratio:var(--ar);margin-inline:auto;object-fit:cover}
.hero-fit>:is(img,video){width:100%;height:100%;object-fit:cover}
:where(.hero-txt,.hero-media){min-width:0}
@media (max-width:900px){:where(.hero-grid){grid-template-columns:minmax(0,1fr)}}
/* e) Mittelklick-Autoscroll (Bild 330, site.js): Ursprungsmarke und Cursor */
.tp-as{position:fixed;z-index:200;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:rgba(253,252,250,.92);color:var(--ink);box-shadow:0 0 0 1px var(--hair),0 2px 8px rgba(0,0,0,.18);pointer-events:none}
.tp-as svg{display:block;width:32px;height:32px}
html.tp-as-on,html.tp-as-on *{cursor:all-scroll!important}

/* R31: hierher verschobenes Seiten-CSS (vorher Inline-<style> je Seite), spart Transfer bei Folgeseiten da site.css gecacht ist */

/* ---- aus kontakt.html ---- */
/* Runde 11 (#80/#81): keine Karte mehr - Formular steht mit Haarlinien-Feldern direkt auf der Papier-Flaeche (nur paper/cream im Bild) */
.pg-kontakt .kbox{max-width:760px}
/* Runde 22: Seitenspalte als ruhige Info-Karte "So geht es weiter" (vorher Timeline mit leeren Kreisen und wachsender Linie = Scheinfortschritt).
   Einfache nummerierte Liste, nichts bewegt sich. Ab 1001 px und mind. 620 px Fensterhoehe sticky (Karte ist kurz, kein Springen);
   darunter und im Embed gestapelt unter dem Formular. */
.pg-kontakt .k-grid{display:grid;grid-template-columns:minmax(0,760px) minmax(240px,300px);column-gap:clamp(40px,6vw,96px);align-items:start}
.pg-kontakt .k-side{position:sticky;top:calc(var(--hdr-c) + 24px);background:var(--cream);padding:clamp(22px,2.4vw,30px)}
.pg-kontakt .k-side h2{font-size:1.35rem;line-height:1.25;margin:0 0 var(--sp3)}
.pg-kontakt .k-steps{list-style:none;margin:0;padding:0;counter-reset:ks}
.pg-kontakt .k-steps>li{counter-increment:ks;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:6px}
.pg-kontakt .k-steps>li+li{margin-top:var(--sp3);padding-top:var(--sp3);border-top:1px solid var(--hair)}
.pg-kontakt .k-steps>li::before{content:counter(ks) ".";grid-row:1/3;font:500 1.15rem/1.25 var(--serif);color:var(--lila)}
.pg-kontakt .k-steps h3{margin:0 0 6px;font:500 1.15rem/1.25 var(--serif);color:var(--ink)}
.pg-kontakt .k-steps p{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink2)}
@media(max-width:1000px){
  .pg-kontakt .k-grid{grid-template-columns:minmax(0,1fr)}
  .pg-kontakt .k-side{position:static;max-width:760px;margin-top:var(--sp5)}
}
@media(max-height:619px){.pg-kontakt .k-side{position:static}}
html.embed .pg-kontakt .k-side{position:static}
.pg-kontakt .kbox h2{font-size:1.8rem;margin-bottom:var(--sp3)}
.pg-kontakt .kform{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.pg-kontakt .kform .full{grid-column:1/-1}
/* Runde 20b: Feldbeschriftungen lesbarer (Kundentest): Albert Sans .9375rem, normale Schreibung, volle Tintenfarbe */
.pg-kontakt .kform label{display:block;font:600 .9375rem/1.35 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:8px}
.pg-kontakt .kform .req{color:var(--lila)}
.pg-kontakt .kform .opt{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0}
.pg-kontakt .ask label:not(.ask-c){font:600 1rem/1.35 var(--sans);letter-spacing:0;text-transform:none;color:var(--on-deep)}
/* Runde 23 (#276): Kurzformular steht auf dem dunklen #faq (s-deep). Vorher Ink-/Muted-Farben aus der Cream-Zeit = kaum lesbar.
   Kontrast auf #3A3340: on-deep 10.1:1, on-deep2 7.7:1, lilal 6.0:1. Titel in Newsreader, Text Albert Sans. */
.pg-kontakt #faq .ask-intro{font:400 1.0625rem/1.6 var(--sans);color:var(--on-deep2);max-width:60ch}
.pg-kontakt #faq .ask-intro b{display:block;margin-bottom:6px;font:500 clamp(1.5rem,2.2vw,1.85rem)/1.2 var(--serif);color:var(--on-deep)}
.pg-kontakt #faq .ask-intro a,.pg-kontakt #faq .ask-c a{color:var(--lilal);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pg-kontakt #faq .ask .ask-c{font:400 1rem/1.5 var(--sans);color:var(--on-deep)}
.pg-kontakt #faq .ask .req{color:var(--lilal)}
.pg-kontakt #faq .ask :is(input,textarea):focus-visible{outline-color:var(--lilal)}
.pg-kontakt #faq .ask .ask-e{font-size:.9375rem}
/* Runde 23: Fehlertexte im Hauptformular (Klasse .ask-e aus site.css) */
.pg-kontakt .kform .ask-e{margin:8px 0 0}
/* R23b: Hinweis bei "Etwas anderes" (C-M5) und Zeichenrest der Nachricht (B6) */
.pg-kontakt .kform .msg-h{margin:0 0 8px;font-size:.9375rem;line-height:1.45;color:var(--muted)}
.pg-kontakt .kform .msg-c{margin:6px 0 0;font-size:.875rem;line-height:1.4;color:var(--muted)}
.pg-kontakt .kform [aria-invalid=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* Feldrahmen #8A857D: weich statt schwarz, aber >= 3:1 zur Flaeche (WCAG 1.4.11) */
.pg-kontakt .kform input:not([type=checkbox]),.pg-kontakt .kform select,.pg-kontakt .kform textarea{width:100%;min-height:50px;background:var(--paper);border:1px solid #8A857D;border-radius:0;color:var(--ink);font:400 1rem/1.4 var(--sans);padding:12px 14px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.pg-kontakt .kform input:not([type=checkbox]):hover,.pg-kontakt .kform select:hover,.pg-kontakt .kform textarea:hover{border-color:var(--ink2)}
.pg-kontakt .kform textarea{min-height:140px;resize:vertical}
.pg-kontakt .kform input:focus-visible,.pg-kontakt .kform select:focus-visible,.pg-kontakt .kform textarea:focus-visible{outline:2px solid var(--lila);outline-offset:2px;border-color:var(--ink)}
/* Runde 22b: Fehler in Ink statt Lila (Lila = Auswahl/Akzent), Lila nur als Randlinie links am Fehlertext */
.pg-kontakt .kform :user-invalid{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pg-kontakt .kform .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.pg-kontakt .kform .consent{grid-column:1/-1;display:flex;gap:14px;align-items:flex-start;text-transform:none;letter-spacing:0;font:400 .95rem/1.5 var(--sans);color:var(--ink);margin:0;cursor:pointer}
.pg-kontakt .kform .consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--lila)}
.pg-kontakt .kform .consent a{color:var(--lila);font-weight:600}
.pg-kontakt .kform .btn{width:100%;justify-content:center;min-height:56px;font-size:.9rem}
.pg-kontakt .knote{grid-column:1/-1;font-size:.9rem;color:var(--muted)}
/* Runde 25 (#315): "Worum geht es?" als zwei Dropdowns statt Kacheln. #pk-1 = Hauptpunkt (Pflicht, required erst per JS),
   darunter je nach Hauptpunkt EIN optionales zweites Dropdown (.pk-sub, data-for = Hauptpunkt). Selects ohne name; das Skript
   schreibt die Auswahl in #pk-val (name=paket). Ohne JS: Block aus, <noscript>-Select wie bisher.
   Eigener Pfeil per CSS (kein data:-Bild wegen CSP), Hoehe 50 px (Touch >= 44 px), Fokus = lila Ring aus der Feldregel oben. */
html:not(.js) .pg-kontakt .pk-f{display:none}
.pg-kontakt .pk-f{min-width:0}
.pg-kontakt .pk-f [hidden]{display:none}
.pg-kontakt .pk-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px 18px;align-items:start}
.pg-kontakt .pk-c{min-width:0}
.pg-kontakt .pk-sw{position:relative}
.pg-kontakt .pk-sw::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;box-sizing:border-box;border:solid var(--ink2);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);pointer-events:none}
.pg-kontakt .kform .pk-sel{-webkit-appearance:none;appearance:none;display:block;max-width:100%;padding-right:44px;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.pg-kontakt .kform .pk-sel[aria-invalid=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pg-kontakt .pk-hint{margin:12px 0 0;font-size:.9375rem;line-height:1.45;color:var(--muted)}
.pg-kontakt .pk-err{margin:0;font-weight:600;font-size:.9375rem;color:var(--ink)}
.pg-kontakt .pk-err:not(:empty){border-left:3px solid var(--lila);padding:6px 0 6px 12px;margin-top:10px}
@media (forced-colors:active){.pg-kontakt .pk-sw::after{border-color:CanvasText}}
/* Runde 26 (#341): eigenes Auswahlfeld statt Betriebssystem-Menue. JS setzt .pk-on an .pk-sw, versteckt das <select> (bleibt Datenquelle)
   und haengt .pk-btn (role=combobox) plus .pk-lb (role=listbox) an. Leerer Wert = Platzhalter "Auswählen" in Grau (#6b675f wie ::placeholder, 5.5:1).
   Liste: Optionen mind. 44 px, scrollt ab max-height (JS: Platz im Fenster, hoechstens 320 px), .up = oeffnet nach oben. Pfeil = vorhandenes ::after. */
.pg-kontakt .kform .pk-on>select{position:absolute;left:0;top:0;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0;pointer-events:none}
.pg-kontakt .pk-btn{display:block;width:100%;min-height:50px;background:var(--paper);border:1px solid #8A857D;color:var(--ink);font:400 1rem/1.4 var(--sans);padding:12px 44px 12px 14px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.pg-kontakt .pk-btn{white-space:normal;line-height:1.3;text-overflow:clip}
.pg-kontakt .pk-btn:hover,.pg-kontakt .is-open>.pk-btn{border-color:var(--ink2)}
.pg-kontakt .pk-btn.is-ph{color:#6b675f}
.pg-kontakt .pk-btn:focus-visible{outline:2px solid var(--lila);outline-offset:2px;border-color:var(--ink)}
.pg-kontakt .pk-btn[aria-invalid=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pg-kontakt .pk-sw::after{transition:transform .2s var(--ease),margin-top .2s var(--ease)}
.pg-kontakt .pk-sw.is-open::after{transform:rotate(225deg);margin-top:-2px}
.pg-kontakt .pk-lb{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:39;margin:0;padding:6px 0;list-style:none;background:var(--paper);border:1px solid var(--ink2);box-shadow:0 14px 32px rgba(26,26,26,.14);max-height:320px;overflow-y:auto;overscroll-behavior:contain}
.pg-kontakt .pk-sw.up>.pk-lb{top:auto;bottom:calc(100% + 4px)}
.pg-kontakt .pk-lb>li{display:flex;align-items:center;min-height:44px;padding:10px 14px;font:400 1rem/1.35 var(--sans);color:var(--ink);cursor:pointer;overflow-wrap:anywhere}
.pg-kontakt .pk-lb>li:hover,.pg-kontakt .pk-lb>li.is-act{background:var(--cream)}
.pg-kontakt .pk-lb>li[aria-selected=true]{font-weight:600;box-shadow:inset 3px 0 0 var(--lila)}
.pg-kontakt .pk-own{margin:8px 0 0;font-size:.9375rem;line-height:1.45;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.pg-kontakt .pk-sw::after,.pg-kontakt .pk-btn{transition:none}}
@media (forced-colors:active){.pg-kontakt .pk-btn{border-color:CanvasText}.pg-kontakt .pk-lb>li.is-act{outline:2px solid Highlight;outline-offset:-2px}.pg-kontakt .pk-lb>li[aria-selected=true]{text-decoration:underline}}
/* Runde 21a: drei optionale Zusatzfelder (Termin, Ort, Personen/Umfang). Ohne name: das Skript setzt ausgefuellte Werte
   als Zeilen "Termin: ...", "Ort: ...", "Personen: ..." unter "Gewünscht:" an den Anfang von nachricht. Ohne JS ausgeblendet. */
html:not(.js) .pg-kontakt .kx{display:none}
/* Runde 22b: Zusatzfelder in <details> (zugeklappt), Summary als volle Zeile mit +/- wie die FAQ */
.pg-kontakt .kx{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:0;padding:0;min-width:0}
.pg-kontakt .kx>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 0;cursor:pointer;list-style:none;font:600 .9375rem/1.35 var(--sans);color:var(--ink)}
.pg-kontakt .kx>summary::-webkit-details-marker{display:none}
.pg-kontakt .kx>summary::after{content:"+";flex:none;font:400 1.4rem/1 var(--mono);color:var(--ink2)}
.pg-kontakt .kx[open]>summary::after{content:"\2212"}
.pg-kontakt .kx>summary:focus-visible{outline:2px solid var(--lila);outline-offset:2px}
.pg-kontakt .kx-fs{border:0;margin:0;padding:4px 0 18px;min-width:0}
.pg-kontakt .kx-hint{margin:0 0 14px;font-size:.9375rem;line-height:1.45;color:var(--muted)}
.pg-kontakt .kx-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px 18px;align-items:end}
.pg-kontakt .kform>noscript{grid-column:1/-1} /* ohne JS: noscript-Inhalt ueber die volle Breite */
.pg-kontakt .kform .err{grid-column:1/-1;border:1px solid var(--lila);padding:14px 16px;font-weight:600;margin:0}
/* Runde 6: heller Einstieg .ph-kontakt (Creme): Portraet links, Text rechts, Kontaktzeilen darunter ueber die volle Breite */
.pg-kontakt .ph-duo{align-items:center}
.pg-kontakt .ph-kontakt{--hero-bot:clamp(36px,3.6vw,52px)} /* Runde 12: Luecke Social-Leiste > Formular unter 140 px */
.pg-kontakt .k-pic{margin:0}
/* Runde 21a: vorhandene Vertrauens-Aussagen im ersten Bildschirm gebuendelt (nur wiederholt, nichts Neues) */
.hfacts{display:flex;flex-wrap:wrap;gap:6px 24px;list-style:none;margin:var(--sp3) 0 0;padding:0;font:400 .9rem/1.4 var(--sans);color:var(--muted)}
html.js.anim .page-hero .hfacts{animation:rise var(--dur) var(--ease) .3s backwards}
.pg-kontakt .k-pic figcaption{margin-top:var(--sp3);color:var(--muted);font-size:1rem}
.pg-kontakt .k-pic figcaption b{display:block;font:400 1.4rem/1.2 var(--serif);color:var(--ink);margin-bottom:4px}
.pg-kontakt .k-lines{margin-top:var(--sp6)}
@media(max-width:1000px){.pg-kontakt .k-txt{order:-1}.pg-kontakt .k-pic{max-width:400px}.pg-kontakt .k-lines{margin-top:var(--sp5)}}
@media(max-width:560px){.pg-kontakt .kform{grid-template-columns:minmax(0,1fr)}}
/* Runde 12: FAQ 3+3 in zwei gleich langen Spalten (wie pakete), darunter Frage-Formular .ask v2 */
.pg-kontakt #faq .sec-h{max-width:none}
.pg-kontakt .faq2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp5);align-items:start}
.pg-kontakt .ask-intro{margin-top:var(--sp5);margin-bottom:var(--sp3);max-width:56ch;color:var(--muted)}
@media(max-width:760px){.pg-kontakt .faq2{grid-template-columns:minmax(0,1fr)}.pg-kontakt .faq2 .faq:first-child details:last-child{border-bottom:0}}
/* Runde 14: Statement-Band entfernt (Satz steht bereits in Schritt 03), FAQ + Frage-Formular als letzter Abschnitt vor dem Footer;
   Schritte und FAQ beide cream, Haarlinie trennt die Abschnitte */
#faq{padding-top:calc(var(--sec) - 6px);border-top:1px solid var(--hair)}

/* ---- aus video.html ---- */
/* video.html (Runde 12): helle Flaechen, genau ein dunkler Abschnitt (Ablauf). Alles linksbuendig wie die anderen Seiten. Nur Seitenspezifisches, Praefix .pg-video */
/* 1 Hero .ph-video: site.css setzt den Kopf noch zentriert, hier links wie alle anderen Hero-Bereiche */
.pg-video .ph-head{text-align:left}
.pg-video .ph-head :is(h1,.lead){margin-inline:0}
.pg-video .ph-head h1{max-width:15ch}
.pg-video .ph-stage{max-width:1120px;display:block;margin:0;overflow:hidden;overflow:clip;overflow-clip-margin:44px}
/* Runde 16: keine Ueberschrift mehr ueber der Buehne; der 16:9-Slot traegt "Showreel" selbst (wie "Reel folgt" im Start-Hero, nur groesser) */
.pg-video .ph-video .ph-stage{margin-top:var(--sp4)}
/* Runde 26 (Bild 323): Hero fuellt den Frame (Mindesthoehe + vertikale Mitte kommen aus site.css .page-hero, RUNDE26-KOMPONENTEN.md).
   Zweispaltig per .hero-grid/.hero-txt/.hero-media; hier nur: Showreel-Spalte breiter (groesser, praesenter), bis 1000 px untereinander wie bisher */
@media (min-width:1001px){
  .pg-video .hero-grid{display:grid;gap:var(--sp5);align-items:center}  /* R27: Spalten und 1400-px-Breite aus site.css (.hero-grid, RUNDE27-KOMPONENTEN.md 2) */
  .pg-video .hero-grid h1{font-size:clamp(2.8rem,4.4vw,4.4rem)}
  .pg-video .ph-video .hero-grid .ph-stage{margin-top:0;max-width:none}
}
@media (max-width:1000px){.pg-video .hero-grid{grid-template-columns:minmax(0,1fr)}}
.pg-video .ph-video .rs-ph{gap:16px}
.pg-video .ph-video .rs-play{width:76px;height:76px}
.pg-video .ph-video .rs-play::after{margin-left:7px;border-left-width:21px;border-top-width:13px;border-bottom-width:13px}
.pg-video .ph-video .rs-ph b{font:400 clamp(1.5rem,2.2vw,1.9rem)/1.1 var(--serif)}
/* 2 Format-Explorer: zwei native Formate, links */
/* Runde 20: Segment-Schalter statt zwei Tab-Buttons. Gleitende dunkle Markierung (--i = 0/1), Formatsymbol + kurzer Einsatzzweck je Seite.
   Panels liegen mit JS uebereinander im selben Grid-Feld (Hoehe = hoeheres Panel, kein Springen) und blenden weich ueber. Ohne JS: Schalter aus, beide Panels untereinander. */
.pg-video .fx-seg{display:none}
/* Runde 23: dezenter Umschalter direkt ueber dem Panel (Reiterzeile mit Haarlinie), keine Box, kein Hinweistext. Aktiv = Tinte, lila Formatsymbol, lila Unterstrich. */
html.js .pg-video .fx-seg{display:flex;flex-wrap:wrap;gap:0 clamp(20px,3vw,40px);margin:0 0 var(--sp4);border-bottom:1px solid var(--hair)}
.pg-video .fx-seg button{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 2px;background:none;border:0;color:var(--muted);font:500 1.05rem/1.2 var(--sans);cursor:pointer;transition:color .3s var(--ease)}
/* Runde 24: EIN Unterstrich fuer die ganze Reiterzeile, gleitet per --ux/--uw (JS misst den aktiven Reiter) zum anderen Reiter. Uebergang erst ab .rdy (beim Laden kein Gleiten). */
html.js .pg-video .fx-seg{position:relative}
.pg-video .fx-seg::after{content:"";position:absolute;left:0;bottom:-1px;width:var(--uw,0);height:2px;background:var(--lila);transform:translateX(var(--ux,0));pointer-events:none}
.pg-video .fx-seg.rdy::after{transition:transform .45s var(--ease),width .45s var(--ease)}
.pg-video .fx-seg svg{width:22px;height:22px;flex:none}
.pg-video .fx-seg svg rect{fill:transparent;transition:fill .3s var(--ease)}
.pg-video .fx-seg small{font:500 .74rem/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.pg-video .fx-seg button:hover{color:var(--ink)}
.pg-video .fx-seg [aria-selected="true"]{color:var(--ink);cursor:default}
.pg-video .fx-seg [aria-selected="true"] svg{color:var(--lila)}
.pg-video .fx-seg [aria-selected="true"] svg rect{fill:var(--lila-t)}
.pg-video .fx-seg button:focus-visible{outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pg-video .fx-seg :is(button,svg rect),.pg-video .fx-seg.rdy::after{transition:none}}
@media (max-width:400px){.pg-video .fx-seg svg{display:none}}  /* 360 px: beide Reiter in einer Zeile */
html.js .pg-video .fx-stack{display:grid}
html.js .pg-video .fx-stack>.fx-p{grid-area:1/1}
html.js .pg-video .fx-p.off{visibility:hidden;opacity:0}
html.anim .pg-video .fx-p{transition:opacity .45s var(--ease),visibility 0s}
html.anim .pg-video .fx-p.off{transition:opacity .45s var(--ease),visibility 0s .45s}
/* Runde 13: Hochformat = Text links + drei 9:16-Slots; Querformat = grosses 16:9 links, rechts Text, darunter zwei kleine 16:9. Spaltenverhaeltnisse so gewaehlt, dass beide Panels gleich hoch sind (9:16-Hoehe = 16:9-Hoehe). */
.pg-video .fx-p{margin:0 0 var(--sp6);display:grid;gap:var(--sp4) var(--sp5);align-items:start}
.pg-video .fx-p:last-child,html.js .pg-video .fx-p{margin-bottom:0}
.pg-video .fx-p[hidden]{display:none}
.pg-video .fx-v{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)}
.pg-video .fx-q{grid-template-columns:minmax(0,2.15fr) minmax(0,1fr);grid-template-rows:auto 1fr}
.pg-video .fx-q .fx-big{grid-column:1;grid-row:1/3}
.pg-video .fx-q .fx-t{grid-column:2;grid-row:1}
.pg-video .fx-q .fx-sm{grid-column:2;grid-row:2;align-self:end}
.pg-video .fx-m{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp3)}
.pg-video .fx-sm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp2)}
.pg-video .fx-t h3{margin-bottom:10px}
.pg-video .fx-t p{color:var(--muted)}
.pg-video .fx-l{list-style:none;margin:var(--sp3) 0 0;padding:0;font-size:.95rem;color:var(--ink2)}
.pg-video .fx-l li{padding:8px 0;border-top:1px solid rgba(26,26,26,.14)}
.pg-video .fx .rs-ph small{font-size:.68rem}
/* 3 Was ich liefere: je Leistung eine flache Strich-Illustration (inline SVG), viel Weissraum, keine Kaesten */
.pg-video .lv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp6) var(--sp5)}
.pg-video .lv article{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}  /* Runde 13: Subgrid, damit Titel, Text, Preis und .lnk ueber alle Karten einer Reihe buendig sind */
.pg-video .lv-ill{display:block;width:176px;height:132px;margin:0 0 var(--sp3) -10px;color:var(--ink);overflow:visible}
.pg-video .lv-ill *{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pg-video .lv-ill .f{fill:var(--lila-t)}
.pg-video .lv-ill .w{fill:var(--paper)}
.pg-video .lv-ill .h{stroke:var(--paper);stroke-width:5}
.pg-video .lv-ill .a{stroke:var(--lila)}
.pg-video .lv-ill .fw{stroke:var(--paper);stroke-width:1.2}
.pg-video .lv-ill .af.a{stroke:var(--lila)}
.pg-video .lv-ill .af{fill:var(--lila);stroke:none}
.pg-video .lv-ill .d{fill:var(--lila);fill-opacity:0}
.pg-video .lv-ill .ok{stroke-width:2.2}
.pg-video .lv-ill .ry{opacity:0}
.pg-video .lv-ill .vf{opacity:0;stroke-width:1.2}
.pg-video .lv h3{font-size:clamp(1.6rem,2.3vw,2.1rem);line-height:1.08;margin:0 0 12px;text-wrap:balance}
.pg-video .lv p{color:var(--muted)}
/* Runde 25 (Bild 305): Beschreibung unter den Titeln entfernt; Preis + Button sitzen direkt unter Titel/Untertitel. Die Checkliste (6. Karte) behaelt ihren Abstand zur Aufzaehlung.
   Subgrid bleibt (4 Zeilen): bei den fuenf Karten ist Zeile 3 = Preis/Button, Zeile 4 leer (0 px), daher keine Luecke zwischen Titel und Button. */
.pg-video .lv-f{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:4px}
/* Runde 26 (Bilder 324, 325): Beschreibung (.lv-d) wieder unter dem Titel, alle fuenf Texte gleich lang (2 Zeilen bei Kartenbreite 270 bis 500 px).
   Subgrid-Zeilen: Grafik, Titel, Beschreibung, Preis+Button. Karte 6 gleich aufgebaut: Zeile "In jedem Paket enthalten" + einspaltige Liste in der
   Beschreibungszeile, Button unten auf Hoehe der anderen Buttons der Reihe (.lv-end). */
.pg-video .lv .lv-d{margin-bottom:var(--sp3);min-width:0}
.pg-video .lv .lv-d .inc{margin-top:6px}
/* Runde 27 (Fable C F5): Liste als Fliesszeile (Punkte · dazwischen, Eintraege brechen nicht), 3 statt 6 Zeilen -> Subgrid-Zeile 3 der Reihe
   Imagefilm/Hochzeit/Checkliste nur noch ca. 40 px hoeher als die zweizeiligen Beschreibungen (vorher ca. 130 px) */
.pg-video .lv .lv-d .inc{font-size:.95rem;line-height:1.5}
.pg-video .lv .lv-d .inc li{display:inline;white-space:nowrap}
.pg-video .lv .lv-d .inc li:not(:last-child)::after{content:" \00B7 ";margin:0 .1em;color:var(--lila);white-space:normal}
.pg-video .lv .lv-end{justify-content:flex-end}
/* Runde 27 (Fable C F8): Karten-Buttons sind jetzt .btn.ghost aus site.css (RUNDE27-KOMPONENTEN.md 3), keine eigenen Button-Regeln mehr */
.pg-video .lv .lv-p{font:500 1.05rem/1.4 var(--sans);color:var(--ink)}
.pg-video .lv .inc{list-style:none;margin:0;padding:0;color:var(--muted)}
.pg-video .lv .inc li{break-inside:avoid}
.pg-video .lv-sub{display:block;margin-top:6px;font:500 1rem/1.3 var(--sans);letter-spacing:0;color:var(--ink2)}
/* Runde 23: Einzelnes Reel, Eventvideo, Imagefilm, Hochzeitsvideo, Checkliste wieder mit Design und Hover-Animation von vor Runde 20 (aus video.vor-r20.html). */
/* Hover-/Fokus-Animationen (ganze Karte, auch Tastaturfokus). Nur transform/opacity/stroke-dashoffset/fill-opacity, kein Bounce. */
.pg-video .lv-ill :is(.dr,.rd){stroke-dasharray:1}
@media (prefers-reduced-motion:no-preference){
  .pg-video .lv-ill :is(.pl,.nx,.bar,.mk,.pr,.rl,.rr,.spl,.spr){transform-box:view-box;transition:transform .6s var(--ease),opacity .5s var(--ease)}
  .pg-video .lv-ill .nx{transform:translateY(46px);opacity:0}
  .pg-video .lv article:is(:hover,:focus-within) .lv-ill .pl{transform:translateY(-46px);opacity:0}
  .pg-video .lv article:is(:hover,:focus-within) .lv-ill .nx{transform:none;opacity:1}
  .pg-video .lv-ill .bar{transform-origin:49px 72px;transition-duration:1.2s}
  .pg-video .lv article:is(:hover,:focus-within) .lv-ill .bar{transform:scaleX(2.2)}
  /* Kamera (Runde 14): Schwenk + Aufnahme-Puls laufen per JS (Web Animations, unten), damit sie beim Verlassen weich in Ruhe zurueckgleiten; hier nur der Sucherrahmen */
  .pg-video .lv-ill .cam{transform-box:view-box;transform-origin:52px 44px}
  .pg-video .lv-ill .vf{transition:opacity .5s var(--ease)}
  .pg-video .lv article:is(:hover,:focus-within) .lv-ill .vf{opacity:1;transition-delay:.15s}
  .pg-video .lv-ill .pr{transform-origin:12px 80px;transition-duration:1.2s}
  .pg-video .lv-ill .mk{transition-duration:1.2s}
  .pg-video .lv article:is(:hover,:focus-within) .lv-ill .pr{transform:scaleX(2)}
  .pg-video .lv article:is(:hover,:focus-within) .lv-ill .mk{transform:translateX(40px)}
  .pg-video .lv article:is(:hover,:focus-within) .lv-ill .ln{animation:lv-draw .7s var(--ease) both}
  .pg-video .lv article:is(:hover,:focus-within) .lv-ill .ck{animation:lv-draw .5s var(--ease) both}
  .pg-video .lv article:is(:hover,:focus-within) .lv-ill .ck:nth-of-type(3){animation-delay:.2s}
  .pg-video .lv article:is(:hover,:focus-within) .lv-ill .ck:nth-of-type(4){animation-delay:.4s}
  @keyframes lv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  /* Ringe (Runde 12): zweiter Ring zeichnet sich neu, beide drehen gegeneinander (Steine wandern), dann ruecken sie ineinander; Steine funkeln nacheinander mit Strahlen */
  .pg-video .lv-rings .spl{transform-origin:48px 56px;transition-duration:1s}
  .pg-video .lv-rings .spr{transform-origin:72px 56px;transition-duration:1s}
  .pg-video .lv-rings :is(.rl,.rr){transition-duration:.5s}
  .pg-video .lv article:is(:hover,:focus-within) .lv-rings .spl{transform:rotate(-24deg)}
  .pg-video .lv article:is(:hover,:focus-within) .lv-rings .spr{transform:rotate(24deg)}
  .pg-video .lv article:is(:hover,:focus-within) .lv-rings .rl{transform:translateX(3px);transition-delay:.55s}
  .pg-video .lv article:is(:hover,:focus-within) .lv-rings .rr{transform:translateX(-3px);transition-delay:.55s}
  .pg-video .lv article:is(:hover,:focus-within) .lv-rings .rd{animation:lv-draw .7s var(--ease) both}
  .pg-video .lv-rings .ry{transform-box:fill-box;transform-origin:50% 100%}
  .pg-video .lv article:is(:hover,:focus-within) .lv-rings .ry{animation:lv-ray .45s var(--ease) .45s 1}
  .pg-video .lv article:is(:hover,:focus-within) .lv-rings .spr .ry{animation-delay:.65s}
  @keyframes lv-ray{from{opacity:0;transform:scale(.6)}45%{opacity:1;transform:none}to{opacity:0;transform:scale(1.12)}}
}
/* Runde 24: Kalender (Monatliche Pakete) deutlicher, weiter nur bei Hover/Fokus und nur mit Transitions (kein Keyframe, daher kein Neustart bei Mausbewegung, kein Papierblatt):
   die freien Tage fuellen sich in Lesereihenfolge kraeftig lila (--n = Reihenfolge, 70 ms Abstand), eine lila Markierung gleitet vom ersten Tag zum Termin-Haken.
   Verlassen: alles geht gemeinsam und zuegig zurueck. Nur mit echtem Hover (hover:hover), am Handy klebt nichts. */
.pg-video .lv-cal .mv{stroke:var(--lila);stroke-width:2;opacity:0}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .pg-video .lv-cal .d{transition:fill-opacity .25s var(--ease)}
  .pg-video .lv article:is(:hover,:focus-within) .lv-cal .d{fill-opacity:.85;transition-duration:.35s;transition-delay:calc(var(--n,0) * 70ms)}
  .pg-video .lv-cal .mv{transform-box:view-box;transition:opacity .25s var(--ease),transform .5s var(--ease)}
  .pg-video .lv article:is(:hover,:focus-within) .lv-cal .mv{opacity:1;transform:translate(48px,30px);transition:opacity .2s var(--ease),transform 1.1s var(--ease) .1s}
}
/* 4 Ablauf (einzige dunkle Flaeche), Runde 8/11: Zeitleiste. Grundzustand (ohne JS, reduced motion) = alle Karten hell.
   Mit JS (.go): --k je Karte 0 oder 1, Strich-Fuellung --p per scaleX/scaleY. Desktop (>1000): gepinnt (.pin). Bis 1000: gestapelt. */
.pg-video .steps{list-style:none;margin:0;padding:28px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp3);position:relative;--p:1}
.pg-video .steps::before,.pg-video .steps::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--on-deep);transform-origin:0 0}
.pg-video .steps::before{opacity:.2}
.pg-video .steps::after{transform:scaleX(var(--p))}
.pg-video .step{--k:1;--kt:1;position:relative;padding:var(--sp4) var(--sp3);min-height:300px;display:flex;flex-direction:column;border:1px solid color-mix(in srgb,var(--on-deep) calc(18% + var(--k) * 40%),transparent)}  /* fix13: Karten ohne eigene Flaeche, aktiv = hellerer Rahmen + Schatten */
.pg-video .step::after{content:"";position:absolute;inset:0;box-shadow:0 22px 44px -26px rgba(0,0,0,.55);opacity:var(--k);pointer-events:none}
.pg-video .step-n{font:400 2.4rem/1 var(--serif);color:var(--lilal)}
.pg-video .step h3{font-size:clamp(1.5rem,2.2vw,2rem);color:var(--on-deep);margin-top:auto;padding-top:var(--sp5)}
.pg-video .step p{color:var(--on-deep2);margin-top:10px}
.pg-video .steps.go .step,.pg-video .steps.go .step *{transition:border-color .6s var(--ease),color .6s var(--ease),transform .6s var(--ease)}
.pg-video .steps.go .step::after{transition:opacity .6s var(--ease)}
.pg-video .steps.go .step{transform:translateY(calc((1 - var(--k)) * 16px))}
.pg-video .steps.go .step .step-n{color:color-mix(in srgb,var(--lilal) calc(var(--kt) * 100%),var(--on-deep2))}
.pg-video .steps.go .step h3{color:color-mix(in srgb,var(--on-deep) calc(var(--kt) * 100%),var(--on-deep2))}
.pg-video .ab-pin>.wrap{width:min(var(--w),100% - 2 * var(--gut))}
@media (min-width:1001px) and (min-height:640px){
  .pg-video #ablauf.pin{height:220vh;padding:0;background:var(--paper)}
  .pg-video #ablauf.pin .ab-pin{position:sticky;top:var(--abt,var(--hdr));padding-block:var(--abp,64px);background:var(--deep);box-shadow:0 0 0 100vmax var(--deep);clip-path:inset(0 -100vmax)}  /* fix13: Buehne = Inhalt + max. 64 px, mittig unter der Kopfzeile; Strecke in paper */
  .pg-video #ablauf.pin .sec-h{margin-bottom:var(--sp5)}
  .pg-video #ablauf.pin .step{min-height:min(300px,32vh)}
}
/* 5 Aktuelle Projekte (hell). Runde 22: Imagefilm-Detail ist nach video-imagefilm.html gewandert */
.pg-video .ws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp3);margin-top:var(--sp4)}
.pg-video .ws figure{margin:0}
/* Runde 26 (Bild 328): Kachel Eventvideo ist wieder ein .reel-slot (data-src + data-vbox), site.js erzeugt das <video>; eigene .ws video-Regel entfaellt */
.pg-video .ws figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px}
.pg-video .ws b{font:400 1.2rem/1.2 var(--serif)}
.pg-video .ws-h{display:flex;justify-content:space-between;align-items:end;gap:var(--sp3);flex-wrap:wrap}
.pg-video .ws-h h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.pg-video .ph-video{--hero-bg:var(--paper);--hero-bot:clamp(40px,4.4vw,64px)}  /* R16: Statement weg, Showreel-Slot > Formate bei 1440 <= 140 px */
/* 6 FAQ: 5 + 5 Fragen; ab 1001 px ein Grid mit 5 Zeilen, Spalten fliessen nacheinander -> Zeilen links/rechts buendig */
.pg-video .faq2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:0 var(--sp5)}
.pg-video .faq2>div{display:contents}
.pg-video .faq2 details{border-bottom:0}
.pg-video .faq2 details:nth-child(5){border-bottom:1px solid rgba(26,26,26,.2)}
.pg-video .faq2 summary{padding-block:18px}
.pg-video .faq2 details p{padding-bottom:20px}
.pg-video .ask-h{margin:var(--sp6) 0 var(--sp3);font-size:clamp(1.4rem,2.2vw,1.8rem)}
.pg-video #faq{padding-top:calc(var(--sec) - 32px)}  /* Runde 14: FAQ folgt jetzt auf den Kontakt-Abschnitt, Luecke bei 1440 <= 140 px */
/* 7 Kontakt */
.pg-video #kontakt{padding-top:0}
.pg-video #kontakt .hl{margin:0 0 var(--sec)}
.pg-video .end :is(h2,.lead){max-width:62ch}
.pg-video .end .lead{margin-top:var(--sp3)}
/* R16: wie pakete #anfrage: eine Zeile Button(s) + Social-Icons, vertikal mittig; mobil untereinander */
.pg-video .end-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2) 20px;margin-top:var(--sp4)}
.pg-video .end-row .cta{margin:0}
@media (max-width:760px){.pg-video .end-row{flex-direction:column;align-items:flex-start}}
@media (max-width:1000px){
  .pg-video .faq2{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .pg-video .faq2>div:first-child details:nth-child(5){border-bottom:0}
  .pg-video .lv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-video .steps{grid-template-columns:minmax(0,1fr);max-width:640px;padding:0 0 0 20px}
  .pg-video .steps::before,.pg-video .steps::after{right:auto;bottom:0;width:1px;height:auto}
  .pg-video .steps::after{transform:scaleY(var(--p))}
  .pg-video .step{min-height:0}
  .pg-video .step h3{padding-top:var(--sp3)}
}
@media (max-width:760px){
  .pg-video .lv,.pg-video .ws{grid-template-columns:minmax(0,1fr)}
  .pg-video .lv{gap:var(--sp5)}
  .pg-video .lv .inc{font-size:.95rem}
  .pg-video .fx-m .rs-ph small{display:none}  /* schmale 9:16-Slots: nur Symbol, Text bricht sonst um */
  .pg-video .lv-ill{width:128px;height:96px;margin-bottom:var(--sp2)}
  .pg-video .steps{padding-left:16px;gap:var(--sp2)}
  .pg-video .fx-p{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .pg-video .fx-q :is(.fx-big,.fx-t,.fx-sm){grid-column:auto;grid-row:auto}
  .pg-video .fx-q{row-gap:var(--sp2)}.pg-video .fx-q .fx-sm{gap:8px;margin-top:-8px}  /* fix13 (Fund 4): Querformat-Panel kompakter, Hoehe nahe am Hochformat (<= 60 px) */
}
#liefere{padding-top:calc(var(--sec) - 6px)}  /* Runde 12 final: Luecke #formate > #liefere bei 1440 <= 138 px */

/* R31: hierher verschobenes Seiten-CSS (vorher Inline-<style> je Seite), spart Transfer bei Folgeseiten da site.css gecacht ist */

/* ---- aus pakete.html ---- */
.pg-pakete .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-pakete .zp .btn{margin-top:0}
/* Farbregel: Hero paper, Bedingungs-Zettel Papier */
.pg-pakete .ph-pakete{--hero-bg:var(--paper)}
/* Runde 12 (#97/#104): nie mehr als 140 px ohne Text, auch an Abschnittsgrenzen (Ueberschriften-Zeilenabstand mitgerechnet) */
.pg-pakete .ph-pakete{--hero-bot:var(--sp5)}
/* R30: Preisuebersicht-Karte entfernt (doppelt zu den Paketkarten gleich darunter), Hero wieder einspaltig */
.pg-pakete .pk-hg{grid-template-columns:minmax(0,1fr);align-items:start}
/* R25 (#313): Hero ohne Einblenden, sofort sichtbar (hebt site.css "html.js.anim .page-hero .lead/.cta{animation:rise}" nur hier auf) */
html.js.anim .pg-pakete .page-hero :is(.lead,.cta){animation:none}
.pg-pakete>.sec{padding-block:clamp(44px,4.2vw,58px)}
.pg-pakete .terms{background:var(--paper)}
.pg-pakete .lead a{color:inherit;text-underline-offset:3px}
.pg-pakete .lead a:hover{color:var(--ink)}
/* Zettel (Runde 13): stehen fest, kein Scroll-Reveal, kein Scrub. Nur Reel-Zahl zaehlt hoch. */
.pg-pakete .zp h3{font:600 1.2rem/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 4px}
.pg-pakete .rin{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:12px;align-items:end;margin:0 0 var(--sp3)}
.pg-pakete .rn{font:400 clamp(3.2rem,6vw,4.2rem)/.85 var(--serif);color:var(--ink)}
.pg-pakete .rl{font:400 1rem/1.3 var(--sans);color:var(--muted);padding-bottom:4px}
.pg-pakete .rm{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.pg-pakete .rm i{display:block;height:6px;border-radius:3px;background:rgba(26,26,26,.13);overflow:hidden}
.pg-pakete .rm i.f::before{content:"";display:block;height:100%;border-radius:inherit;background:var(--lila)}
/* R22 (#245/#247): Balken wachsen per Core2-Komponente data-grow (site.css/site.js, RUNDE22-KOMPONENTEN.md): an jeder .rm und jeder Tabellenzeile mit .mt */
/* R22 (#249): Einzeiler aus dem frueheren Abschnitt "Welches Paket passt" direkt in der Karte */
.pg-pakete .zp .zs{margin:0 0 10px;font:400 1rem/1.35 var(--sans);color:var(--muted)}
/* R22 (#246): Box mit Button in eigener Zeile */
.pg-pakete .terms{display:block}
.pg-pakete .terms p{max-width:none}
.pg-pakete .terms .btn{margin-top:var(--sp3)}
/* R23 (#267): Kasten Mindestlaufzeit unter der Tabelle entfernt (steht gross bei "Klare Regeln") */
/* Vergleich (Runde 13): Kriterium + Erklaerzeile, Werte in Serif mit kleiner Mengenanzeige, nur Haarlinien */
.pg-pakete #vergleich .sec-h{text-align:left;margin-inline:0}
.pg-pakete .cmp{width:100%;border-collapse:collapse;table-layout:fixed}
.pg-pakete .cmp caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-pakete .cmp th,.pg-pakete .cmp td{text-align:left;vertical-align:top;padding:28px 16px;font-weight:400;border-bottom:1px solid var(--hair)}
.pg-pakete .cmp thead td{width:34%;border-bottom:1px solid var(--ink)}
.pg-pakete .cmp thead th{vertical-align:bottom;padding-top:0;padding-bottom:22px;border-bottom:1px solid var(--ink)}
.pg-pakete .cmp thead th b{display:block;font:400 clamp(1.9rem,2.9vw,2.7rem)/1 var(--serif);color:var(--ink)}
.pg-pakete .cmp thead th span{display:block;margin-top:10px;font:500 1.05rem/1.3 var(--sans);font-variant-numeric:lining-nums;color:var(--ink2)}
.pg-pakete .cmp tbody th{padding-left:0;font:600 1.15rem/1.35 var(--sans);color:var(--ink)}
.pg-pakete .cmp tbody th small{display:block;margin-top:6px;font:400 .95rem/1.4 var(--sans);color:var(--muted)}
.pg-pakete .cmp td{font:400 clamp(2rem,2.8vw,2.6rem)/1 var(--serif);font-variant-numeric:lining-nums;color:var(--ink)}
.pg-pakete .cmp td small{display:block;margin-top:8px;font:400 .95rem/1.3 var(--sans);color:var(--muted)}
/* Mengenanzeige: Segmente, gefuellt = enthalten, Skala = Maximum der Zeile */
.pg-pakete .mt{display:flex;gap:4px;margin-top:12px}
.pg-pakete .mt i{width:14px;height:6px;border-radius:3px;background:rgba(26,26,26,.13)}
.pg-pakete .mt i.f{background:var(--lila)}
.pg-pakete .cmp td.in{font:400 1.05rem/1.4 var(--sans);color:var(--ink)}
.pg-pakete .cmp td.in svg{display:inline-block;width:20px;height:20px;margin-right:10px;vertical-align:-4px;color:var(--lila)}
.pg-pakete .cmp td.no{font:400 1.4rem/1.2 var(--sans);color:var(--muted)}
.pg-pakete .cmp tbody tr:last-child>*{border-bottom:0}
/* R23 (#268) Das steckt immer drin: Titelblock links sticky (ab 901 px), Punkte rechts blenden beim Scrollen sanft ein.
   Reines CSS (scroll-driven animations, animation-timeline:view()): an die Scrollposition gekoppelt, daher flüssig auch mit Mausrad,
   kein Pinnen, kein Scroll-Jacking, keine Schritte. Ohne Unterstützung oder bei prefers-reduced-motion (kein html.anim): statisch sichtbar. */
.pg-pakete .incl-w{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);align-items:start;timeline-scope:--incl}
.pg-pakete .incl-s{position:sticky;top:calc(var(--hdr,64px) + var(--sp5))}
.pg-pakete .incl-h{margin:0;font:500 clamp(2rem,3.4vw,3rem)/1.08 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.pg-pakete .incl-l{margin-top:var(--sp3);max-width:34ch}
.pg-pakete .incl-p{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:14px;row-gap:14px;margin-top:var(--sp4);max-width:340px}
.pg-pakete .incl-p b{font:400 clamp(3.4rem,5.6vw,4.6rem)/.8 var(--serif);font-variant-numeric:lining-nums;color:var(--ink)} /* R23b (C-H1): Tinte statt Lila */
.pg-pakete .incl-p span{padding-bottom:2px;font:500 .75rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pg-pakete .incl-p i{grid-column:1/-1;display:block;height:2px;background:var(--hair);overflow:hidden}
.pg-pakete .incl-p i::before{content:"";display:block;height:100%;background:var(--lila);transform-origin:left}
.pg-pakete .incl{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--hair);view-timeline:--incl block}
.pg-pakete .incl li{position:relative;display:grid;grid-template-columns:3.25rem minmax(0,1fr);padding:26px 0 28px;border-top:1px solid var(--hair)}
.pg-pakete .incl li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:transparent;transform-origin:left} /* R24 (#290): statt kurzem Strich waechst die ganze Trennlinie lila und wird dann grau; ohne Animation nur die graue Haarlinie */
.pg-pakete .incl .n{padding-top:.95rem;font:500 .8rem/1 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--muted)} /* R23b (C-H1): muted statt Lila */
.pg-pakete .incl b{display:block;font:400 clamp(1.6rem,2.3vw,2.1rem)/1.15 var(--serif);letter-spacing:-.008em;color:var(--ink)}
.pg-pakete .incl span:not(.n){display:block;margin-top:8px;max-width:46ch;color:var(--muted)}
@supports (animation-timeline:view()){
  html.anim .pg-pakete .incl li>*{animation:inclIn linear both;animation-timeline:view();animation-range:entry 0% entry 55%} /* R23b (C-H1): vorher entry 10% entry 90%, unterster Punkt blieb halb durchsichtig */
  html.anim .pg-pakete .incl li>.n{animation-range:entry 0% entry 40%}
  html.anim .pg-pakete .incl li::before{animation:inclRule linear both;animation-timeline:view();animation-range:entry 20% cover 35%}
  html.anim .pg-pakete .incl-p i::before{animation:inclLn linear both;animation-timeline:--incl;animation-range:entry 40% exit 0%} /* R23b (C-M3): voll, sobald das Listenende im Bild ist (exit 0% = contain 100%) */
}
@keyframes inclIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes inclRule{from{transform:scaleX(0);background-color:var(--lila)}70%{transform:scaleX(1);background-color:var(--lila)}to{transform:scaleX(1);background-color:var(--hair)}}
@keyframes inclLn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:900px){.pg-pakete .incl-w{grid-template-columns:minmax(0,1fr);gap:var(--sp4)}.pg-pakete .incl-s{position:static}.pg-pakete .incl-p{margin-top:var(--sp3)}}
@media (max-width:560px){.pg-pakete .incl li{grid-template-columns:2.5rem minmax(0,1fr);padding:20px 0 22px}.pg-pakete .incl .n{padding-top:.7rem}}
/* Ein Monat (Runde 12): sechs 9:16-Slots ueber die volle Breite (ab 1100 px eine Reihe), Vergroessern per <dialog> */
.pg-pakete .shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp3)}
.pg-pakete .shelf>div{position:relative}
.pg-pakete .shelf .rs-ph b{font:400 1.6rem/1 var(--serif)}
.pg-pakete .rz-btn{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px;margin:0;border:0;background:transparent;cursor:zoom-in;font:inherit;color:var(--on-deep)}
.pg-pakete .rz-btn span{font:500 .7rem/1 var(--sans);letter-spacing:.02em;background:rgba(26,26,26,.72);padding:7px 9px;transition:background .25s}
.pg-pakete .rz-btn:hover span{background:rgba(26,26,26,.92)}
.pg-pakete .rz-btn:focus-visible{outline:3px solid var(--lila);outline-offset:3px}
.pg-pakete .reel-slot.has-video+.rz-btn{inset:8px 8px auto auto;padding:0}
dialog.rz{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0}
dialog.rz[open]{display:grid;place-items:center}
html.anim dialog.rz[open]{animation:rzIn .3s var(--ease)}
@keyframes rzIn{from{opacity:0}}
.rz-stage{height:min(84vh,calc((100vw - 32px) * 16 / 9));aspect-ratio:9/16;max-width:calc(100vw - 32px)}
.rz-stage .reel-slot{height:100%}
.rz-stage .rs-ph b{font:400 2.4rem/1 var(--serif)}
.rz .lb-close{position:fixed;top:14px;right:16px;z-index:2}
@media (min-width:1100px){.pg-pakete .shelf{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* Einzelprojekte (Runde 12): vier offene Spalten, Haarlinie, grosse Preiszahl, kurzer Text, Link-Button */
.pg-pakete .oo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp5) var(--sp4)}
.pg-pakete .oo-c{display:flex;flex-direction:column}
.pg-pakete .oo-c .hl{display:block;margin-bottom:var(--sp3)}
.pg-pakete .oo-p{margin:0 0 var(--sp3);font:400 clamp(2.4rem,3.4vw,3.2rem)/1 var(--serif);font-variant-numeric:lining-nums;color:var(--ink);white-space:nowrap}
.pg-pakete .oo h3{margin:0 0 10px;font-size:clamp(1.25rem,1.5vw,1.375rem);text-wrap:balance}
.pg-pakete .oo h3 span{display:block;margin-top:4px;font:400 .95rem/1.35 var(--sans);color:var(--muted)}
.pg-pakete .oo-c p{flex:1;margin:0 0 var(--sp3);color:var(--muted)}
.pg-pakete .oo-c .btn{align-self:flex-start;margin:0}
/* R23 (#269): pro Kachel nur der Link zur eigenen Seite, darunter EINE gemeinsame Anfrage-Zeile */
.pg-pakete .oo-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp2) var(--sp4);margin-top:var(--sp5);padding-top:var(--sp4);border-top:1px solid var(--hair)}
.pg-pakete .oo-end p{margin:0;font:400 1.125rem/1.45 var(--sans);color:var(--muted)}
.pg-pakete .oo-end strong{font:500 1.5rem/1.2 var(--serif);color:var(--ink);margin-right:.35em}
.pg-pakete .oo-end .btn{margin:0}
@media (max-width:760px){.pg-pakete .oo-end{flex-direction:column;align-items:flex-start;margin-top:var(--sp4)}.pg-pakete .oo-end strong{display:block;margin:0 0 4px}}
/* R17 Vertrag: drei Kernzahlen in Serif mit senkrechten Haarlinien, darunter zwei ruhige Textspalten mit fettem Vorspann */
.pg-pakete .kz{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-pakete .kz li{padding:4px var(--sp4)}
.pg-pakete .kz li:first-child{padding-left:0}
.pg-pakete .kz li+li{border-left:1px solid rgba(26,26,26,.18)}
.pg-pakete .kz b{display:block;font:400 clamp(2.6rem,4.4vw,3.9rem)/1 var(--serif);letter-spacing:-.015em;font-variant-numeric:lining-nums;color:var(--ink);white-space:nowrap}
.pg-pakete .kz span{display:block;margin-top:14px;max-width:30ch;font:400 1.0625rem/1.45 var(--sans);color:var(--muted)}
.pg-pakete .vt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp3) var(--gap);margin-top:var(--sp5);padding-top:var(--sp4);border-top:1px solid rgba(26,26,26,.18)}
.pg-pakete .vt p{margin:0;max-width:52ch;color:var(--muted)}
.pg-pakete .vt p+p{margin-top:var(--sp3)}
.pg-pakete .vt strong{display:block;margin-bottom:6px;font:600 1rem/1.4 var(--sans);color:var(--ink)}
@media (max-width:760px){
  .pg-pakete .kz{grid-template-columns:minmax(0,1fr)}
  .pg-pakete .kz li,.pg-pakete .kz li:first-child{padding:var(--sp3) 0;border-left:0}
  .pg-pakete .kz li:first-child{padding-top:0}
  .pg-pakete .kz li+li{border-left:0;border-top:1px solid rgba(26,26,26,.18)}
  .pg-pakete .vt{grid-template-columns:minmax(0,1fr);margin-top:var(--sp3)}
}
/* FAQ: zwei gleich lange Spalten (5 + 5), darunter Frage-Formular v2 */
.pg-pakete .faq2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp5);align-items:start}
.pg-pakete .faq2 .faq summary{font-size:clamp(1.1rem,1.5vw,1.25rem);padding-block:20px}
.pg-pakete #faq .ask{margin-top:var(--sp5)}
.pg-pakete #pakete .sec-h{margin-bottom:var(--sp5)} /* R13: Ueberschrift > Zettel straffer */

.pg-pakete #anfrage{padding-block:var(--sp4)} /* R14: zwischen Vertrag und FAQ, alle cream */
.pg-pakete #faq{padding-top:var(--sp4)}
/* R16: eine linksbuendige Spalte: Haarlinie, Ueberschrift, Satz, dann eine Zeile Button + Social-Icons (vertikal mittig); mobil untereinander */
.pg-pakete #anfrage .hl{margin:0 0 var(--sp4)}  /* R23 (#270): straffer, vorher var(--sec) */
.pg-pakete #anfrage .sec-h{margin:0;max-width:62ch}
.pg-pakete #anfrage h2{font-size:clamp(2rem,3.4vw,3rem)} /* R23b (C-M6): Stufe wie .incl-h statt voller H2-Groesse */
.pg-pakete .end-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2) 20px;margin-top:var(--sp4)}
@media (max-width:760px){.pg-pakete .end-row{flex-direction:column;align-items:flex-start}}
/* R22 (#252): rechts eine ruhige Kontaktkarte statt Leerraum */
.pg-pakete .end-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp3) var(--gap);align-items:start} /* R23 (#270): oben buendig statt mittig, kein Versatz der Ueberschrift */
.pg-pakete .end-card{background:var(--paper);border:1px solid var(--hair);padding:var(--sp4)}
.pg-pakete .end-card h3{margin:0 0 var(--sp3);font:500 1.5rem/1.2 var(--serif);color:var(--ink)}
.pg-pakete .end-card dl{margin:0;display:grid;gap:14px}
.pg-pakete .end-card dt{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pg-pakete .end-card dd{margin:6px 0 0;font:400 1.1rem/1.4 var(--sans)}
.pg-pakete .end-card dd a{color:var(--ink);text-underline-offset:3px;overflow-wrap:anywhere}
.pg-pakete .end-card dd a:hover{color:var(--lila)}
.pg-pakete .end-card p{margin:var(--sp3) 0 0;padding-top:var(--sp3);border-top:1px solid var(--hair);color:var(--muted)}
@media (max-width:900px){.pg-pakete .end-g{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1200px){.pg-pakete .oo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .pg-pakete .ph-pakete{--hero-bot:var(--sp4)}  /* Runde 12 final: Luecke Hero > Pakete mobil <= 112 px */
  /* Vergleich gestapelt: Kriterium oben, drei Werte mit Paketname darunter */
  .pg-pakete .cmp,.pg-pakete .cmp tbody{display:block}
  .pg-pakete .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pg-pakete .cmp thead tr,.pg-pakete .cmp thead th{display:block;width:1px;overflow:hidden} /* Fix 12: Kopfzeile nur fuer Screenreader, ragt nicht mehr ueber 390 px hinaus */
  .pg-pakete .cmp tbody{border-top:1px solid var(--ink)}
  .pg-pakete .cmp tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;padding:18px 0;border-bottom:1px solid var(--hair)}
  .pg-pakete .cmp tbody tr:last-child{border-bottom:0}
  .pg-pakete .cmp tbody th{grid-column:1/-1;padding:0}
  .pg-pakete .cmp th,.pg-pakete .cmp td{border:0}
  .pg-pakete .cmp td{padding:0;display:flex;flex-direction:column;gap:6px;font-size:1.7rem}
  .pg-pakete .mt{margin-top:2px;gap:3px}.pg-pakete .mt i{width:9px}
  .pg-pakete .cmp td small{margin-top:0}
  .pg-pakete .cmp td.in{font-size:.95rem;display:block}
  .pg-pakete .cmp td::before{content:attr(data-p);font:400 .85rem/1.3 var(--sans);color:var(--muted)}
  .pg-pakete .cmp td.no{display:block}
  .pg-pakete .cmp td.in::before,.pg-pakete .cmp td.no::before{display:block;margin:0 0 6px}
  .pg-pakete .shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pg-pakete .faq2{grid-template-columns:minmax(0,1fr)}
  .pg-pakete .faq2 .faq:first-child details:last-child{border-bottom:0}
}
@media (max-width:560px){.pg-pakete .oo{grid-template-columns:minmax(0,1fr)}}

/* R31: yt.css hierher verschoben (war eigene blockierende Datei auf 3 Seiten), jetzt mit site.css gecacht */
/* yt.css - YouTube-Karten fuer yt.js. Baut auf .reel-slot aus site.css auf (Masse, Flaeche, .rs-play). Nach site.css einbinden.
   Keine Verlaeufe, keine Daten-URIs. */
.yt-card .no,[data-yt-feed] .reel-slot .no{position:absolute;left:8px;top:8px;z-index:3;font:400 .75rem var(--mono);color:var(--edge);letter-spacing:.06em;pointer-events:none}
.yt-open{all:unset;box-sizing:border-box;position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;color:#ece8f2;min-height:44px}
.yt-open:focus-visible{outline:3px solid var(--lilal);outline-offset:-3px}
.yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .3s}
.yt-open .rs-play{position:relative;z-index:1;background:rgba(16,14,21,.45);transition:border-color .2s,background-color .2s}
.yt-open:hover .rs-play,.yt-open:focus-visible .rs-play{border-color:var(--lilal);background:rgba(16,14,21,.7)}
.yt-open:hover .yt-thumb{transform:scale(1.03)}
.yt-meta{position:absolute;left:0;right:0;bottom:0;z-index:1;display:grid;gap:2px;padding:10px 12px;background:rgba(16,14,21,.78);text-align:left}
.yt-meta b{font:400 .92rem/1.25 var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-meta small{font:400 .7rem/1.3 var(--mono);letter-spacing:.06em;color:#c9c2d6}
.reel-slot.sm .yt-meta{padding:6px 8px}
.reel-slot.sm .yt-meta b{font-size:.8rem}

/* Hinweis vor dem Laden: deckt die Karte ab, scrollt bei sehr kleinen Karten */
.yt-note{position:absolute;inset:0;z-index:4;overflow:auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding:16px;background:rgba(16,14,21,.94);color:#ece8f2;font:400 .82rem/1.45 var(--sans)}
.yt-note a{color:var(--lilal)}
.yt-note :focus-visible{outline-color:var(--lilal)}
.yt-note .btn{min-height:44px}
.yt-back{all:unset;box-sizing:border-box;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;font:700 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#c9c2d6}
.yt-back:hover{color:#fff}
.yt-back:focus-visible{outline:3px solid var(--lilal);outline-offset:2px}
.reel-slot.sm .yt-note{padding:10px;gap:6px;font-size:.74rem}

/* Geladenes Video */
.reel-slot.yt-on{background:#000}
.yt-frame{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (prefers-reduced-motion:reduce){.yt-thumb,.yt-open .rs-play{transition:none}.yt-open:hover .yt-thumb{transform:none}}

/* Audit 12.10.2026: grössere Tippflächen */
.has-video>.vbox-btn{inset:0 0 auto auto;padding:8px;min-height:44px;align-items:flex-start}
.svc-row h3 a{padding-block:6px;margin-block:-6px}
@media (pointer:coarse){
  .ftr a{display:inline-flex;align-items:center;min-height:44px}
  .ftr-nav a{min-width:44px;justify-content:center}
}

/* Mobil-Runde 1 (nur Handy <= 760 px, Desktop unveraendert): Platzhalter zuruecknehmen, Button-Paare gleich breit, Footer, Kleinkram */
@media (max-width:760px){
  /* Platzhalter ohne Inhalt: kein grosser leerer Kasten, erscheint von selbst wieder, sobald ein echtes Bild/Video da ist (dann entfaellt role="img") */
  .photo-slot[role="img"]:has(>.rs-ph):not(.me .photo-slot){display:none}
  .ph-stage:not(:has(.reel-slot:not([role="img"]))){display:none}
  /* Button-Paare: volle Breite, gleich gross */
  .cta .btn,.page-hero .cta .btn,.pg-vb .cta .btn{flex:1 1 100%}
  /* Footer: 6 Symbole in eine Zeile (bis 400 px), Kontaktzeile umbricht sauber */
  .ftr .soc--icons{gap:4px}
  .ftr-direct{display:flex;flex-wrap:wrap;column-gap:16px}
  .ftr-direct>span[aria-hidden]{display:none}
  /* Video: schmale Kacheln ohne ueberlappende Etiketten */
  .pg-video :is(.fx-m,.fx-sm) .rs-ph small{display:none}
  .pg-video .fx-m .vbox-btn{padding:6px}
  .pg-video .fx-m .vbox-btn span{font-size:.68rem;padding:5px 6px}
  /* Reel-Seite: Video im Hero kleiner, Preis und Button naeher am ersten Bildschirm */
  html .pg-vb .vb-h .vb-m{width:min(56vw,220px)}
  /* Foto: reine Info-Chips als ruhige Textzeile statt tippbar wirkender Kaesten */
  html .also ul{gap:4px 14px}
  html .also ul li{border:0;padding:0}
  /* Kontakt: Kurzfakten untereinander mit Punkt */
  .hfacts{flex-direction:column;gap:6px}
  .hfacts li{position:relative;padding-left:14px}
  .hfacts li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--lila)}
  /* Event: Bildreihen als ruhiges Raster, alle Kacheln gleich gross (zugeschnitten), ein einzelnes drittes Bild volle Breite */
  .pg-event .jr .frame{aspect-ratio:1/1}
  .pg-event .jr .frame:nth-child(3):last-child{flex-basis:100%;aspect-ratio:3/2}
  .pg-event .jr .frame>button,.pg-event .jr .frame .im{display:block;width:100%;height:100%}
  .pg-event .jr .frame img{width:100%;height:100%;object-fit:cover}
  /* Touch: kein haengender Hover-Zustand nach dem Antippen */
  .faq summary:hover{opacity:1}
}

/* Mobil-Runde 2 (nur Handy <= 760 px, Desktop unveraendert): Orientierung, Touch, Browser-Eigenheiten, Kleinkram */
@media (max-width:760px){
  :root{color-scheme:only light}  /* kein erzwungener Dunkelmodus durch Chrome/Samsung (Seite hat keine Dunkel-Gestaltung) */
  /* Weniger feste Leisten: Bereichsleiste scrollt mit, Tab-Leiste ohne Blur (ruhiger, schneller) */
  main>.anav{position:relative;top:auto}
  html:has(main>.anav){scroll-padding-top:var(--hdr-c)}
  .tabbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bar)}
  /* Menue und Lightbox: Seite dahinter bleibt stehen */
  html:has(dialog[open]){overflow:hidden}
  dialog#lb,.lb{overscroll-behavior:contain}
  /* Touch: Hover-Zustaende bleiben nach dem Antippen nicht haengen */
  @media (hover:none){
    .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
    .btn.lt:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
    .btn.ghost:hover{background:var(--lila-t);border-color:rgba(113,74,150,.28);color:var(--ink)}
  }
  /* sichtbare Hoehe auch bei ein-/ausfahrender Browserleiste */
  .vbox-stage{max-height:88dvh}
  .rz-stage{max-height:84dvh}
  body.pg-legal{min-height:100svh}
  /* Tippflaechen mindestens 44 px */
  .pg-pakete .lead a{display:inline-block;padding:10px 0}
  .pg-pakete .end-card dd a{display:inline-flex;align-items:center;min-height:44px}
  /* Datenschutz: kompaktes Inhaltsverzeichnis */
  .pg-legal .toc li{padding:0}
  .pg-legal .toc a{min-height:40px}
  /* Galerie: Filter als wischbare Einzeiler, quadratische Kacheln statt stark beschnittener 4:3 */
  .pg-gal .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .pg-gal .chips::-webkit-scrollbar{display:none}
  .pg-gal .chip{flex:none;white-space:nowrap}
  .pg-gal .gal .frame .im{aspect-ratio:1}
  /* Pakete: Beispiel-Platzhalter als wischbare Reihe statt 830 px dunkler Bloecke */
  .pg-pakete .shelf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;overscroll-behavior-x:contain}
  .pg-pakete .shelf::-webkit-scrollbar{display:none}
  .pg-pakete .shelf>*{flex:0 0 44%;scroll-snap-align:start}
}

/* Mobil-Runde 4 (nur Handy): einklappbare Abschnitte */
@media (max-width:760px){
  .mfold.shut .mf-b{display:none}
  .mfold .mf-btn{display:block;position:relative;width:100%;margin:0;padding:0 44px 0 0;border:0;border-radius:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
  .mfold .mf-btn::after{content:"";position:absolute;right:4px;top:.35em;width:12px;height:12px;border-right:2px solid var(--lila);border-bottom:2px solid var(--lila);transform:rotate(45deg);transition:transform .3s var(--ease)}
  .mfold:not(.shut) .mf-btn::after{transform:rotate(-135deg);top:.5em}
  .mfold.shut{padding-block:calc(var(--sec) * .6)}
  .mfold .mf-btn:focus-visible{outline:2px solid var(--lila);outline-offset:4px}
}

/* Mobil-Runde 5 (nur Handy): weniger Text, keine doppelten Social-Icons (stehen im Footer) */
@media (max-width:760px){
  main .soc{display:none!important}
  .ftr-legal a{padding:12px 0} /* Runde 2 Test: AGB-Link nur 24 px breit, Trefferflaeche >= 44 px */
  /* Foto: vier Bereiche als 2x2-Kacheln ohne Beschreibungstext */
  .pg-foto .areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pg-foto .areas p{display:none}
  .pg-foto .areas-more{margin-top:var(--sp3)}
  /* Video-Unterseiten: leere Hero-Platzhalter nicht zeigen */
  .pg-vb .vb-m:has(>.reel-slot>.rs-ph){display:none}
}

/* Mobil-Runde 6 (nur Handy): Scroll-Verhalten, Social-Reste, Kleinkram aus der 5-Agenten-Pruefung */
@media (max-width:760px){
  /* Seite im Panel scrollt nur senkrecht; Wischen zwischen Panels meldet site.js an die Huelle (kein Achsen-Raten des Browsers mehr) */
  html.embed{touch-action:pan-y pinch-zoom}
  .m-shelf,main>.anav ul,.pg-gal .chips,.pg-pakete .shelf{touch-action:pan-x pan-y}   /* waagrechte Wischreihen behalten ihre Wischrichtung */
  /* Grossansichten: Wischen dahinter wechselt kein Panel und scrollt nichts */
  dialog.vbox,dialog.rz,dialog#lb{touch-action:none;overscroll-behavior:contain}
  html.embed:has(dialog[open]){overscroll-behavior:contain}
  /* leere Reste der ausgeblendeten Social-Leisten */
  .kx-direct,.neu-kontakt,.pg-kontakt .k-lines{display:none}
  .soc-a{-webkit-tap-highlight-color:transparent}
  /* Einklapp-Abschnitte: kein toter Abstand unter der Ueberschrift, Pfeil auch auf dunkel sichtbar */
  .mfold.shut :is(.sec-h,.incl-s,.of-top,.ws-h){margin-bottom:0}
  :is(.dk,.s-deep).mfold .mf-btn::after{border-color:var(--lilal)}
  :is(.dk,.s-deep).mfold .mf-btn:focus-visible{outline-color:var(--lilal)}
  /* Foto: Bereichs-Kacheln ohne ueberstehende Pfeil-Kaestchen */
  .pg-foto .areas .ar{display:none}
  .pg-foto .areas h3{font-size:1.3rem;min-width:0;hyphens:auto;overflow-wrap:anywhere}
  /* Referenzen: leerer Foto-Block bei ausgeblendeten Platzhaltern */
  .rp-f:not(:has(>:not(.photo-slot[role="img"]))){display:none}
  /* YouTube-Hinweis in schmalen Reel-Karten: nichts schneiden, kein Eigen-Scrollbereich */
  .yt-note{justify-content:safe center}
  .m-shelf .yt-note{padding:10px;gap:6px;font-size:.74rem;overflow:hidden}
}
@supports not (overflow-x:clip){html{overflow-x:hidden}}

/* Formular + Einklappen: naechsten Schritt sichtbar machen (Desktop und Handy), Auswahl als Fenster am Handy */
.pg-kontakt .step-new{position:relative;background:var(--lila-t);box-shadow:-4px 0 0 var(--lila),0 0 0 8px var(--lila-t);animation:stepPulse 1.4s var(--ease) 2}
.pg-kontakt .step-new::before{content:"Nächster Schritt";position:absolute;right:0;top:-18px;padding:3px 8px;background:var(--lila);color:#fff;font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
@keyframes stepPulse{0%{box-shadow:-4px 0 0 var(--lila),0 0 0 8px var(--lila-t),0 0 0 8px rgba(113,74,150,.35)}100%{box-shadow:-4px 0 0 var(--lila),0 0 0 8px var(--lila-t),0 0 0 22px rgba(113,74,150,0)}}
.pg-kontakt .pk-c,.pg-kontakt .kx{transition:background-color .5s,box-shadow .5s}
.pg-kontakt .pk-btn:not(.is-ph):not(:hover):not(.is-open){border-color:var(--ink);font-weight:500}
@keyframes mfFlash{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.pg-kontakt .step-new{animation:none}.mfold.mf-new::after{animation:none}}
@media (max-width:760px){
  .pg-kontakt .pk-lb.sheet{position:fixed;left:0;right:0;top:auto;bottom:0;max-height:72vh;max-height:72dvh;z-index:70;padding:0 0 env(safe-area-inset-bottom);border:0;border-radius:16px 16px 0 0;box-shadow:0 -14px 40px rgba(26,26,26,.28);overflow-y:auto;overscroll-behavior:contain}
  .pg-kontakt .pk-lb.sheet::before{content:attr(data-title);display:block;position:sticky;top:0;padding:16px 18px 12px;background:var(--paper);border-bottom:1px solid var(--hair);font:500 .72rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .pg-kontakt .pk-lb.sheet>li{min-height:54px;padding:12px 18px;font-size:1.05rem;border-bottom:1px solid var(--hair)}
  .pg-kontakt .pk-lb.sheet>li:last-child{border-bottom:0}
  .pk-bd{position:fixed;inset:0;z-index:65;background:rgba(26,26,26,.5)}
  .pk-bd[hidden]{display:none}
  /* Einklapp-Ueberschriften: einheitlich, Pfeil rechts und gut sichtbar */
  html .mfold h2.mf-h{display:block;width:100%;font-size:clamp(1.4rem,6.2vw,1.75rem);line-height:1.15}
  html .mfold .mf-btn{padding-right:48px}
  html .mfold .ws-h{display:block}
  html .mfold .mf-btn::after{width:14px;height:14px;border-width:0 2.5px 2.5px 0;right:6px;top:50%;margin-top:-12px}
  html .mfold:not(.shut) .mf-btn::after{margin-top:-4px;top:50%}
}

/* Mobil-Runde 7 / Fehlerrunde: Desktop + Handy */
html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}   /* Grossansichten/Lightbox: Seite dahinter scrollt nicht mit */
.rp-f:not(:has(>:not(.photo-slot[role="img"]))){display:none}   /* Referenzen: leerer Foto-Block ohne echte Bilder */
.pg-ref .rp:not(:has(>.rp-f>:not(.photo-slot[role="img"]))){grid-template-columns:minmax(0,1fr)}
.regal:not(:has(.reel-slot:not([role="img"]))){display:none}   /* auch bei reduzierter Bewegung: Reel-Regal erst mit echten Reels */
.k-direct{display:none}
@media (min-width:761px) and (max-width:900px){main>.anav ul{gap:0}main>.anav a{padding-inline:7px}.anav li:first-child a{padding-left:0}}   /* Bereichsleiste passt bis 761 px in eine Zeile (Balken bleibt unter dem aktiven Punkt) */
@media (min-width:761px){.pg-pakete .ph-pakete h1{font-size:clamp(2.4rem,4vw,3.6rem);max-width:24ch}}   /* Preise schon im ersten Bildschirm (Laptop) */   /* Bereichsleiste schneidet bei schmalen Fenstern nichts mehr ab */
@media (max-width:760px){
  .mfold{position:relative}
  .mfold.mf-new::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--lila);pointer-events:none;animation:mfFlash 1.8s var(--ease) forwards}
  .mfold.shut{border-top:1px solid var(--hair)}
  html .mfold .mf-btn{padding-block:9px;margin-block:-9px}
  .k-direct{display:block;margin:var(--sp3) 0 0;font-size:.95rem;line-height:1.55;color:var(--muted)}
  .k-direct a{display:inline-block;padding-block:10px;color:var(--ink);text-underline-offset:3px}
  .pg-kontakt .k-pic:has(.photo-slot[role="img"]){display:none}
  .pg-kontakt .pk-btn{white-space:normal;line-height:1.3;padding-block:10px}
  .pg-foto .areas{gap:20px 8px}
  /* leere Video-Beispielkacheln (Format-Beispiele, Pakete-Monat) am Handy nicht zeigen, solange keine echten Videos da sind */
  .pg-video :is(.fx-m,.fx-big,.fx-sm):not(:has(.reel-slot:not([role="img"]))){display:none}
  .pg-video .ws figure:has(>.reel-slot[role="img"]){display:none}
  .pg-video #faq .ask-h{margin-top:var(--sp5)}
  .pg-pakete #monat:not(:has(.has-video)){display:none}
}
@media (max-width:760px){dialog.msheet{z-index:80}}