::selection{background:#b3b3f9;color:#151515}
::-moz-selection{background:#b3b3f9;color:#151515}
.nb{white-space:nowrap}
@media screen and (max-width:479px){h1.display{font-size:10.6vw}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Einladung über der Fußzeile */
.join>.spacing-170{height:clamp(170px,16vw,240px)}
.join+.footer>.spacing-170:first-child{height:60px}
.footer .divider-20{display:none}
.join-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:15px;width:100%}
.join-label{grid-area:1 / 1 / 2 / 4}
.join-text{grid-area:1 / 1 / 2 / 13}
.join-mail{grid-area:2 / 4 / 3 / 13;margin-top:30px}
.intro-caps{margin-bottom:10px}
@media screen and (max-width:479px){.join-grid{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px}.join-label{grid-area:1 / 1 / 2 / 7}.join-text{grid-area:2 / 1 / 3 / 7}.join-mail{grid-area:3 / 1 / 4 / 7}}
/* Navigation ohne Hintergrund */
.navbar-section{background-color:transparent !important}
/* Hero-Foto: Pan per Skript statt Container-Parallax */
.hero-media-container{height:100% !important;transform:none !important}
.hero-media-container img[data-pan]{object-fit:cover;object-position:50% 100%;will-change:object-position}
.brand-name{white-space:nowrap}
/* The Multi: Liste in der rechten Spalte (12-Spalten-Raster der Vorlage) */
.multi{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:15px;width:100%}
.multi-label{grid-column:1 / span 3}
/* The Service: alle Bilder gleich groß */
.layers-list .w-dyn-item>a>img.media-block{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover}
.multi-list{grid-column:4 / -1}
@media screen and (max-width:767px){.multi{grid-template-columns:minmax(0,1fr)}.multi-label,.multi-list{grid-column:1 / -1}}
.brand.brand-name{width:auto}
/* Handy (Runde 6): Block-Abstände +10 % gegenüber der Vorlage */
@media screen and (max-width:479px){html body{--_spacing---spacing-110:99px;--_spacing---spacing-75:72px;--_spacing---spacing-205:187px;--_spacing---spacing-170:160px;--_spacing---spacing-70:66px;--_spacing---spacing-85:82px;--_spacing---spacing-90:88px;--_spacing---spacing-60:55px;--_spacing---spacing-120:110px;--_spacing---spacing-45:44px;--_spacing---spacing-40:38px;--_spacing---spacing-200:187px;--_spacing---spacing-140:116px;--_spacing---spacing-50:50px;--_spacing---spacing-65:60px}}
/* Handy (Runde 7): Menü über den ganzen Bildschirm, Links unten ausgerichtet */
@media screen and (max-width:479px){.menu-container{box-sizing:border-box;height:100vh;height:100dvh;justify-content:flex-end;padding-bottom:max(22px,env(safe-area-inset-bottom))}
html:has(.menu-container[style*="display: flex"]){overflow:hidden}}
/* Handy (Runde 6): drei Schichten nur als Text, ohne Fotos */
@media screen and (max-width:767px){
.layers-list{grid-row-gap:0}
.layers-list .w-dyn-item>a{display:block;border-top:1px solid var(--colors--cloud-white);padding:15px 0 30px}
.layers-list .media-block,.layers-list .spacing-10{display:none}
.layers-list .heading-h5{font-size:var(--_typography---font-size--heading-h3);line-height:var(--_typography---font-height--heading-height);letter-spacing:var(--_typography---letter-spacing--heading-h3)}
}

/* ===== Runde 15: Muster-Bibliothek (siehe 07-design-unterseiten.md) · 12 Spalten, 15 px Abstand; bis 479 px 6 Spalten, 12 px ===== */
.tl{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.links{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.para{margin:0 0 15px;max-width:500px}
.para:last-child{margin-bottom:0}
.para-l{margin:0 0 20px;max-width:640px}
.para-l:last-child{margin-bottom:0}
.pt .link{display:inline-flex;height:auto;padding-bottom:1px;vertical-align:top}
.row-text a,.para a,.srow-x a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
/* M1 Titel */
.ttl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:15px;align-items:start;width:100%}
.ttl h1,.ttl div.heading-h1{grid-column:1 / span 9;margin:0}
.ttl-cap{grid-column:10 / -1;padding-top:9px}
@media screen and (max-width:767px){.ttl h1,.ttl div.heading-h1{grid-column:1 / -1}.ttl-cap{grid-column:1 / -1;padding-top:15px}}
@media screen and (max-width:479px){.ttl{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px}}
/* M2 Aussage: Seitenspalte ab Spalte 7 */
.join-grid.s7 .join-mail{grid-area:2 / 7 / 3 / 12}
@media screen and (max-width:479px){.join-grid.s7 .join-mail{grid-area:3 / 1 / 4 / 7}}
@media screen and (min-width:480px) and (max-width:767px){.pt .join-grid .join-mail{grid-area:2 / 1 / 3 / 13}.pt .join-grid.s7 .join-mail{grid-area:2 / 1 / 3 / 13}}
/* M3 Zeilen */
.rows{border-bottom:1px solid var(--colors--cloud-white)}
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:15px;border-top:1px solid var(--colors--cloud-white);padding:15px 0 60px}
.row.tight{padding-bottom:15px}
.row.compact{padding-bottom:30px}
.row-label{grid-column:1 / span 3;min-width:0}
.row-body{grid-column:4 / span 6;min-width:0}
.row.wide .row-body{grid-column:4 / -1}
.row-value{grid-column:10 / -1;min-width:0}
.row-title{margin:0}
.row-title-s{margin:0}
.row-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em;text-decoration-color:transparent;transition:text-decoration-color .5s}
.row-link:hover{text-decoration-color:currentColor}
.row-text{margin:0;max-width:500px}
.row-title+.row-text{margin-top:15px}
.row-text+.row-text{margin-top:12px}
.row-body .sub{margin-top:30px}
@media screen and (max-width:767px){.row-label,.row-body,.row.wide .row-body,.row-value{grid-column:1 / -1}.row-label.is-empty{display:none}.row-body{margin-top:12px}.row-value{margin-top:15px}
.row.inline .row-label{grid-column:1 / span 4;margin-top:0}.row.inline .row-body{grid-column:5 / -1;margin-top:0}.row.inline .row-value{grid-column:5 / -1;margin-top:8px}}
@media screen and (max-width:479px){.row{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px;padding-bottom:45px}.row.tight{padding-bottom:15px}.row.compact{padding-bottom:24px}
.row.inline .row-label{grid-column:1 / span 2}.row.inline .row-body,.row.inline .row-value{grid-column:3 / -1}}
/* Unterliste (Events unter einem Produkt) */
.sub{max-width:500px}
.sub-label{margin-bottom:6px}
.sub-item{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:15px;align-items:baseline;padding:4px 0}
/* M4 Datenzeile */
.data{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px 15px;border-top:1px solid var(--colors--cloud-white);padding-top:15px}
.data-cell{grid-column:span 3;min-width:0}
@media screen and (max-width:767px){.data-cell{grid-column:span 6}}
@media screen and (max-width:479px){.data{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 12px}.data-cell{grid-column:span 3}}
/* M5 Kacheln */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px 15px}
.tiles.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{display:block;min-width:0}
.tile-media{position:relative;overflow:hidden;aspect-ratio:4 / 5;width:100%}
.tile-media.is-portrait{aspect-ratio:1 / 1.2}
.tile-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-title{margin:0;max-width:315px}
.tile-line{margin:6px 0 0;max-width:315px}
@media screen and (max-width:991px){.tiles,.tiles.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:479px){.tiles,.tiles.n4{grid-template-columns:minmax(0,1fr);gap:30px 12px}}
/* M7 Teilung */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:15px;align-items:start}
.split-media{grid-column:1 / span 5;position:relative;overflow:hidden;aspect-ratio:5 / 6;width:100%}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-body{grid-column:7 / -1;min-width:0}
.split.is-flip .split-media{grid-column:8 / -1;grid-row:1}
.split.is-flip .split-body{grid-column:1 / span 6;grid-row:1}
.split-body .numbers-list{margin-top:60px}
@media screen and (min-width:992px){.split-body .numbers-list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:15px}}
@media screen and (max-width:767px){.split-media,.split-body,.split.is-flip .split-media,.split.is-flip .split-body{grid-column:1 / -1;grid-row:auto}.split-body{margin-top:30px}.split-body .numbers-list{margin-top:45px}}
@media screen and (max-width:479px){.split{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px}}
/* M9 Bilder */
.pair,.strip{display:grid;gap:15px}
.pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.strip{grid-template-columns:repeat(4,minmax(0,1fr))}
.pair>div,.strip>div{position:relative;overflow:hidden;aspect-ratio:4 / 5}
.pair img,.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media screen and (max-width:767px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:479px){.pair,.strip{gap:12px}}
/* Titelzeile über Kacheln und Listen */
.hl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:15px;align-items:baseline}
.hl>:first-child{grid-column:1 / span 9}
.hl-link{grid-column:10 / -1;justify-self:end}
@media screen and (max-width:479px){.hl{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px}.hl>:first-child{grid-column:1 / span 4}.hl-link{grid-column:5 / -1}}
/* Label + Inhalt */
.pl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:15px;width:100%}
.pl-label{grid-column:1 / span 3}
.pl-main{grid-column:4 / -1;min-width:0}
@media screen and (max-width:767px){.pl-label,.pl-main{grid-column:1 / -1}}
/* Block mit Label + Zeilen (Ablauf, Angaben) */
.pl.has-line{border-top:1px solid var(--colors--cloud-white);padding-top:15px}
.sched .srow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,7fr);column-gap:15px;padding:0 0 15px}
.sched .srow+.srow{border-top:1px solid var(--colors--cloud-white);padding-top:15px}
.srow-k{min-width:0}
.srow-b{min-width:0;max-width:560px}
.srow-t,.srow-x{margin:0}
.srow-t+.srow-x{margin-top:6px}
.plist-i{border-top:1px solid var(--colors--cloud-white);padding:15px 0}
.plist-i:last-child{border-bottom:1px solid var(--colors--cloud-white)}
.plist-i p{margin:0}
@media screen and (max-width:767px){.pl.has-line .pl-main{margin-top:6px}.sched .srow{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}}
@media screen and (max-width:479px){.sched .srow{column-gap:12px}}
.sched.nok .srow{grid-template-columns:minmax(0,1fr)}
/* Kontakt: Label 1 bis 3, Angaben 4 bis 6, Formular 7 bis 12 */
.bk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:15px;width:100%}
.bk-label{grid-column:1 / span 3}
.bk-info{grid-column:4 / span 3;min-width:0}
.bk-form{grid-column:7 / -1;min-width:0}
.bk-info .contact-block+.contact-block{margin-top:25px}
@media screen and (max-width:767px){.bk-label,.bk-info,.bk-form{grid-column:1 / -1}.bk-info{margin-top:6px}.bk-form{margin-top:45px}}
/* Preistabelle */
.ptab-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,2fr);column-gap:15px;padding:15px 0;border-top:1px solid var(--colors--cloud-white)}
.ptab-row.is-head{border-top:0;padding-top:0}
.ptab-span{grid-column:2 / span 2}
@media screen and (max-width:479px){.ptab-row{column-gap:12px;grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,2fr)}}
/* Formular auf /book im Raster */
.book-form .form-block{margin:0}

/* Formulare (Buchung, Anfrage) */
.bform{display:flex;flex-direction:column;align-items:flex-start;width:100%}
.bform .fld{width:100%;margin-bottom:22px;border:0;padding:0;min-width:0}
.bform .fld-l{display:block;margin-bottom:2px;padding:0}
.bform .text-field,.bform .text-area{width:100%;background:transparent;border:0;border-bottom:1px solid var(--colors--cloud-white);border-radius:0;color:inherit;font:inherit;margin:0;padding:10px 0;height:auto}
.bform select.text-field{appearance:none;-webkit-appearance:none;background-image:none;cursor:pointer}
.bform .text-area{min-height:110px;resize:vertical}
.bform .text-field:focus,.bform .text-area:focus{outline:0;border-bottom-color:var(--colors--matt-black)}
.bform .chks .chk{margin-top:8px}
.chk{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.chk input{margin:2px 0 0;flex:none;accent-color:#151515}
.bform .consent{margin:6px 0 10px}
.bform .submit-button{margin-top:14px}
/* ===== tone.css · Tone-Ebene 3-6-9 (Feinschliff Runde 16 bis 20, 29.10.26) =====
   Verbindende, kaum wahrnehmbare Schicht für 3-6-9.studio UND 3-6-9.be. Sie wird an 369.css angehängt (build_inhalt.py, build_be.py) und ändert main.css nicht.
   Regeln: nur Variablen und Muster der Vorlage; nichts darf Lesbarkeit verschlechtern; „Bewegung reduzieren“ schaltet alles Bewegte ab.
   Teile: 1 Variablen · 2 Fokus und Tastatur · 3 Bewegung (eine Kurve, drei Zeiten) · 4 Bild-Look · 5 Einblenden · 6 Seitenübergang · 7 Bewegung reduzieren */

/* 1 · Variablen ------------------------------------------------------------ */
:root{
  --tone-ink:#151515;            /* Matt black der Vorlage */
  --tone-line:#f0f0f0;           /* Haarlinie (Cloud white) */
  --tone-muted:#666;             /* gedämpfter Text (Granite gray), 5,7:1 auf Weiß */
  --tone-ease:cubic-bezier(.165,.84,.44,1);   /* Bewegung: outQuart, wie der Bildzoom der Vorlage (a-9) */
  --tone-fade:cubic-bezier(.455,.03,.515,.955);   /* Einblenden: easeInOut, wie „Fade-in Block“ der Vorlage (a-15) */
  --tone-t1:.3s;                 /* Farbe, Fokus */
  --tone-t2:.5s;                 /* Linien und Textlinks (Vorlage: Linie 0,5 s) */
  --tone-t3:.6s;                 /* Bildzoom (Vorlage 0,6 s) */
  --tone-t4:1.1s;                /* Einblenden von Blöcken und Bildern (Vorlage 1,0 bis 1,3 s) */
  /* Bild-Look: ein Satz Werte für alle Fotos, quellenübergreifend. Ändern genügt hier. */
  --tone-img:saturate(.93) contrast(.97) sepia(.045) brightness(1.015);
  --tone-grain-o:.14;            /* Korn (Overlay, neutral), 0 schaltet es ab */
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* 2 · Fokus und Tastatur --------------------------------------------------- */
.tone-skip{position:absolute;left:15px;top:-80px;z-index:6000;background:var(--tone-ink);color:#fff;padding:9px 12px;font-size:13.4px;line-height:1.2;text-decoration:none;transition:top var(--tone-t1) var(--tone-ease)}
.tone-skip:focus{top:12px;outline:1.5px solid #fff;outline-offset:-5px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:1.5px solid var(--tone-ink);outline-offset:4px;border-radius:0}
.menu-container a:focus-visible,.menu-button:focus-visible{outline-color:#fff}
.menu-button:focus-visible{outline-color:var(--tone-ink)}
.menu-button{cursor:pointer}
a:focus:not(:focus-visible){outline:0}
.main:focus{outline:0}

/* Überschriften-Semantik (Runde 19): Abschnittslabels sind H2, sehen aber aus wie bisher (Label in Fließtextgröße) */
h2.section-title,.hl>h2{font-size:var(--_typography---font-size--body);line-height:var(--_typography---font-height--body-height);letter-spacing:var(--_typography---letter-spacing--body);font-weight:500;margin-top:0}
.hl>h2{margin-bottom:0}

/* Tastaturfokus auf dem Absenden-Knopf (unsichtbares Eingabefeld unter dem Textlink) */
.submit-button:focus-within .link{outline:1.5px solid var(--tone-ink);outline-offset:4px}
.submit-button .w-button:focus{outline:0}

/* Touch: Trefferfläche mindestens 24 × 24 px (WCAG 2.2, 2.5.8), ohne das Bild der Seite zu verändern */
@media (pointer:coarse),(max-width:767px){
  a.link,.brand-link,.menu-button,.footer-link-list a,.footer-link-list---small a{position:relative}
  a.link::before,.brand-link::before,.menu-button::before{content:"";position:absolute;left:-4px;right:-4px;top:-3px;bottom:-3px}
  .footer-link-list a{margin-bottom:6px}   /* Zeilenabstand 24 px statt 18 px: jede Zeile bleibt einzeln treffbar */
  input,textarea,select{font-size:16px}   /* iOS zoomt sonst beim Antippen */
}

/* 3 · Bewegung: gleiche Kurve, gleiche Zeiten für alles, was diese Ebene hinzufügt */
.tl,.row-link,.tile-title{transition:text-decoration-color var(--tone-t2) var(--tone-ease),color var(--tone-t1) var(--tone-ease)}
.tl{text-decoration-color:currentColor}
.tl:hover{text-decoration-color:transparent}

/* 4 · Bild-Look: leichte, gemeinsame Behandlung aller Fotos (kein Eingriff in die Originale) ------------
   Filter auf jedem Bild: minimal wärmer, minimal ruhiger. Rahmen: Platzhalter-Grau und sehr feines, neutrales Korn (Overlay).
   Plakate und Grafiken tragen data-tone="art" und bleiben unverändert. Für 3-6-9.be genügt der Filter; Korn gibt es überall dort, wo ein Rahmen existiert. */
.main img:not([src$=".svg"]){filter:var(--tone-img)}
.main img[data-tone="art"]{filter:none}
.tile-media,.split-media,.pair>div,.strip>div,.member-portrait,.tone-frame{background-color:var(--tone-line)}
.tone-frame{position:relative;overflow:hidden}
.tile-media::after,.split-media::after,.pair>div::after,.strip>div::after,.member-portrait::after,.tone-frame::after,.hero-media-container::after,
.layers-list .w-dyn-item>a::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url%28%23n%29'/%3E%3C/svg%3E");background-size:180px 180px;opacity:var(--tone-grain-o);mix-blend-mode:overlay}
.layers-list .w-dyn-item>a{position:relative;display:block}   /* volle Breite schon vor dem Laden des Bildes: kein Springen der Kacheln */
.layers-list .w-dyn-item>a::after{height:auto;aspect-ratio:4 / 5}
.tile-media:has(img[data-tone="art"])::after,.split-media:has(img[data-tone="art"])::after,.pair>div:has(img[data-tone="art"])::after,.tone-frame:has(img[data-tone="art"])::after{display:none}
@media screen and (max-width:767px){.layers-list .w-dyn-item>a::after{display:none}}
@keyframes tone-img-in{from{opacity:0}to{opacity:1}}
.tone-loaded{animation:tone-img-in var(--tone-t4) var(--tone-fade) both}

/* 5 · Einblenden beim Scrollen: leise, wie „Fade-in Block“ der Vorlage; nur Blöcke unterhalb des ersten Bildschirms (tone.js) */
.tone-rv{opacity:0;transform:translateY(8px)}
.tone-rv.tone-in{opacity:1;transform:none;transition:opacity var(--tone-t4) var(--tone-fade),transform var(--tone-t4) var(--tone-ease)}

/* Zeilenrhythmus: ausgewogene Überschriften, keine Einzelwörter am Zeilenende */
h1,.heading-h3,.heading-h4,.heading-h5,.row-title{text-wrap:balance}
.text-muted,.para,.para-l,.row-text,.srow-x,.srow-t{text-wrap:pretty}

/* 6 · Seitenübergang: sanftes Ausblenden der alten Seite (Chrome, Safari 18.2+); andere Browser wechseln hart */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:tone-vt-out .28s var(--tone-fade) both}
  ::view-transition-new(root){animation:tone-vt-in .28s var(--tone-fade) both}
}
@keyframes tone-vt-out{to{opacity:0}}
@keyframes tone-vt-in{from{opacity:0}}
@media print{.tone-rv{opacity:1 !important;transform:none !important}}

/* 7 · Bewegung reduzieren: alles Bewegte aus (auch die Laufzeit der Vorlage) ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;transition-delay:0s !important;animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
  .hero-media-container{transform:none !important}
  .tone-rv{opacity:1 !important;transform:none !important}
  .tone-loaded{animation:none !important}
}

/* Open Studios, dunkel invertiert (30.10.26): Variablen der Vorlage getauscht, Porträt fest im Hintergrund über die ganze Seite */
body.os-dark{--colors--matt-black:#f4f2ee;--colors--white:#07080a;--colors--cloud-white:rgba(255,255,255,.2);--colors--granite-gray:#b8b8b8;--tone-ink:#f4f2ee;--tone-line:#17181b;--tone-muted:#b8b8b8;background-color:#07080a;color:#f4f2ee}
.os-dark ::selection{background:#f4f2ee;color:#07080a}
.os-dark img{filter:none}   /* Bild-Look der Vorlage (tone.css: leichte Sättigung, Sepia, Korn) aus: Porträt und Referenzen bleiben original */
.os-bg{position:fixed;inset:0;z-index:-1;background:#07080a}
.os-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.os-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,10,.5) 0,rgba(7,8,10,0) 28%,rgba(7,8,10,0) 52%,rgba(7,8,10,.72) 100%)}
.os-dark .os-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:45px}
.os-dark .os-hero>.container{width:100%}
.os-dark .os-rest{background:linear-gradient(180deg,rgba(7,8,10,0) 0,rgba(7,8,10,.8) 22vh,rgba(7,8,10,.8) 100%)}
.os-dark .navbar-section{background-color:rgba(7,8,10,.78) !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}   /* Navigation erscheint beim Hochscrollen: eigener Grund statt Text darunter */
.os-dark .menu-container{background-color:#07080a}   /* Menütexte der Vorlage sind fest weiß: Menü bleibt dunkel */
.os-ws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.os-ws-i{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--colors--cloud-white);padding-top:18px}
.os-ws-i .link{align-self:flex-start;margin-top:10px}
@media screen and (max-width:767px){.os-ws{grid-template-columns:1fr}}
.os-strip{display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.os-strip>figure{margin:0;flex:0 0 auto;width:calc((100% - 45px) / 4);scroll-snap-align:start}
.os-strip .split-media{aspect-ratio:4 / 5}
.os-strip figcaption{margin-top:10px}
@media screen and (max-width:767px){.os-strip>figure{width:72%}}
/* Zahlungsseite */
#co{max-width:560px}
.co-h{padding-bottom:12px;color:var(--colors--granite-gray)}
.co-line{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;padding:16px 0;border-top:1px solid var(--colors--cloud-white)}
.co-ln{display:flex;flex-direction:column;gap:2px}
.co-lp{min-width:64px;text-align:right}
.co-qn{color:var(--colors--granite-gray)}
.co-total{display:flex;justify-content:space-between;padding:18px 0;margin-bottom:28px;border-top:1px solid var(--colors--matt-black);border-bottom:1px solid var(--colors--cloud-white);font-weight:500}
#co-element{margin-bottom:24px}
.co-btn{display:block;width:100%;background:var(--colors--matt-black);color:var(--colors--white);border:0;border-radius:0;padding:16px 24px;font:inherit;font-weight:500;cursor:pointer;margin-top:6px;text-align:center;text-decoration:none}
.co-btn:disabled{opacity:.45;cursor:default}
.co-msg{margin:20px 0 0}
.co-msg.is-bad{color:#b00020}
.co-note{margin-top:28px}
.co-pm{width:100%;margin:6px 0 22px;border:0;padding:0;min-width:0}
.co-opt{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--colors--cloud-white);cursor:pointer}
.co-opt:last-child{border-bottom:1px solid var(--colors--cloud-white)}
.co-opt input{margin-top:5px;accent-color:var(--colors--matt-black)}
.bform[hidden],#co-pm[hidden]{display:none}
.co-opt>span{font-weight:500}
.co-copy{margin-top:10px}
.co-copyin{margin-top:12px}
.co-copy textarea{width:100%;border:1px solid var(--colors--cloud-white);background:transparent;color:inherit;font:inherit;font-size:.9em;padding:12px;border-radius:0;resize:vertical}
.co-link{background:transparent;border:0;padding:0;color:var(--colors--granite-gray);font:inherit;font-size:.9em;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.co-copyin .co-link{display:block;margin-top:8px}
.co-opt span span{display:block;font-size:.9em;font-weight:400}
/* Warenkorb */
.cart-q{display:inline-flex;align-items:center;border:1px solid var(--colors--cloud-white)}
.cart-q button{background:transparent;border:0;color:inherit;font:inherit;width:34px;height:34px;cursor:pointer;line-height:1}
.cart-q button:disabled{opacity:.35;cursor:default}
.cart-q span{min-width:26px;text-align:center}
.cart-fab{position:fixed;right:16px;bottom:16px;z-index:900;background:var(--colors--matt-black);color:var(--colors--white);border:0;border-radius:0;padding:14px 20px;font:inherit;font-weight:500;cursor:pointer;display:flex;gap:10px;align-items:center}
.cart-fab .cart-n{display:inline-block;min-width:22px;text-align:center;border:1px solid currentColor;padding:0 6px;font-size:.85em}
.cart-fab:not(.has-items) .cart-n{opacity:.5}
.cart-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1900}
.cart-dr{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--colors--white);color:var(--colors--matt-black);z-index:2000;display:flex;flex-direction:column;border-left:1px solid var(--colors--cloud-white)}
.cart-ov[hidden],.cart-dr[hidden]{display:none}
.cart-hd{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 16px;border-bottom:1px solid var(--colors--cloud-white)}
.cart-x{background:transparent;border:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.cart-bd{flex:1;overflow:auto;padding:8px 20px}
.cart-row{display:grid;grid-template-columns:1fr auto;gap:10px 14px;padding:16px 0;border-bottom:1px solid var(--colors--cloud-white)}
.cart-un{font-size:.9em}
.cart-lp{text-align:right}
.cart-q{justify-self:start}
.cart-ft{padding:16px 20px 20px;border-top:1px solid var(--colors--cloud-white)}
.cart-tt{display:flex;justify-content:space-between;font-weight:500;margin-bottom:14px}
.cart-more{display:block;margin:14px auto 0;background:transparent;border:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
html.cart-open{overflow:hidden}