@font-face{font-family:"Excon";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/excon-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Excon";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/excon-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Amulya";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/amulya-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Amulya";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/amulya-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Amulya";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/amulya-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --grund:oklch(20.4% 0.013 233.3);--flaeche:oklch(24.2% 0.017 237.6);--flaeche-hoch:oklch(28.6% 0.020 236.3);--linie:oklch(34.5% 0.021 237.4);
  --tinte:oklch(95.6% 0.005 228.8);--tinte-leise:oklch(76.6% 0.015 231.3);--akzent:oklch(50.5% 0.078 228.7);--akzent-hell:oklch(78.6% 0.064 223.6);
  --auf-akzent:oklch(95.6% 0.005 228.8);--grau-logo:oklch(62.3% 0.007 223.5);--fehler:oklch(79.9% 0.091 33.4);--gut:oklch(82.8% 0.078 154.3);
  --titel:"Excon",system-ui,sans-serif;--text:"Amulya",system-ui,sans-serif;
  --weich:cubic-bezier(0.16,1,0.3,1);--rand:clamp(20px,4vw,48px);--kopf:80px;
  --r-karte:22px;--r-knopf:14px;--r-rund:999px;
  --abstand:clamp(96px,11vw,176px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--kopf) + 16px)}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:var(--text);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(120% 70% at 85% -10%,color-mix(in oklch,var(--akzent) 16%,transparent),transparent 60%),
    radial-gradient(90% 60% at -10% 110%,color-mix(in oklch,var(--akzent) 9%,transparent),transparent 60%);
  background-attachment:fixed}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
picture{display:block}
/* Bilder in Rahmen mit fester Hoehe fuellen den Rahmen; ohne das bliebe das picture so hoch wie das Bild. */
.yz-hero-tafel-in picture,.yz-zelle-bild picture,.yz-paar-seite picture,.yz-foto picture,.yz-folge-buehne picture,.yz-wortbild-pille picture{height:100%}
.yz-bild-unten img{object-position:50% 78%}
/* X6-Front in der Kabine: Scheinwerfer bei 48 % der Bildhoehe, so stehen sie mittig im Rahmen. */
.yz-bild-mitte img{object-position:50% 47%}
p{text-wrap:pretty}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:0.2em}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--titel);font-weight:700;line-height:1.08;margin:0;letter-spacing:-0.01em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--akzent-hell);outline-offset:3px;border-radius:6px}
::selection{background:var(--akzent);color:var(--auf-akzent)}
.yz-sprung{position:absolute;left:12px;top:-60px;z-index:100;background:var(--tinte);color:var(--grund);padding:12px 18px;
  border-radius:var(--r-knopf);font-weight:700;text-decoration:none}
/* Per Tastatur ausgeloest, deshalb ohne Uebergang (Frequency-Gate). */
.yz-sprung:focus{transform:translateY(72px)}
.yz-bahn{width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--rand)}
.yz-icon{width:1.25em;height:1.25em;flex:none}
.yz-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.yz-zahl{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- Typografie */
/* Obergrenze 4.6rem: bei 5.1rem lief "vom Meister. In" ab 1536 px Breite in die Hero-Tafel (Luis, Vollbild 01.10.2026). */
.yz-h1{font-size:clamp(2.15rem,5.2vw,4.6rem);font-weight:700;letter-spacing:-0.02em;line-height:1.02}
.yz-h2{font-size:clamp(2rem,3.7vw,3.5rem);letter-spacing:-0.015em}
.yz-h3{font-size:clamp(1.3rem,1.7vw,1.6rem);font-weight:500}
.yz-fuehrung{font-size:clamp(1.1rem,1.35vw,1.3rem);color:var(--tinte-leise);max-width:60ch;line-height:1.55}
.yz-auge{font-family:var(--titel);font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent-hell);margin:0 0 18px}
.yz-leise{color:var(--tinte-leise)}
.yz-klein{font-size:.9rem;color:var(--tinte-leise)}
.yz-textlink{color:var(--akzent-hell);font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in oklch,var(--akzent-hell) 45%,transparent)}
.yz-textlink:hover{text-decoration-color:currentColor}
.yz-pfeillink{display:inline-flex;align-items:center;gap:.5em;color:var(--akzent-hell);font-weight:500;text-decoration:none;min-height:44px}
.yz-pfeillink .yz-icon{transition:transform .25s var(--weich)}
.yz-pfeillink:hover .yz-icon{transform:translateX(4px)}

/* ---------------------------------------------------------------- Knoepfe */
.yz-knopfreihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.yz-knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:0 26px;border-radius:var(--r-knopf);
  font-family:var(--titel);font-weight:500;font-size:1.02rem;letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;transition:transform .45s var(--weich),background-color .3s var(--weich),border-color .3s var(--weich)}
.yz-knopf:active{transform:scale(.98)}
.yz-knopf--haupt{background:var(--akzent);color:var(--auf-akzent);border-color:color-mix(in oklch,var(--akzent-hell) 35%,transparent)}
.yz-knopf--haupt:hover{background:color-mix(in oklch,var(--akzent) 86%,var(--tinte))}
.yz-knopf--zweit{background:transparent;color:var(--tinte);border-color:var(--linie)}
.yz-knopf--zweit:hover{border-color:var(--tinte-leise);background:var(--flaeche)}
.yz-knopf--gross{min-height:62px;font-size:1.12rem;padding:0 32px}

/* ---------------------------------------------------------------- Vorschau-Band */
.yz-vorschau{background:var(--flaeche-hoch);color:var(--tinte);font-size:.88rem;border-bottom:1px solid var(--linie)}
.yz-vorschau .yz-bahn{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between;padding-block:9px}
.yz-vorschau a{color:var(--akzent-hell);font-weight:500}

/* ---------------------------------------------------------------- Kopfzeile
   Logo in der Mitte (Wunsch Luis 22.09.2026). Drei Spalten 1fr auto 1fr halten das Logo genau mittig, auch
   wenn links und rechts verschieden viel steht: links die Leistungen, rechts Betrieb und Kontaktknoepfe. */
.yz-kopf{position:sticky;top:0;z-index:50;background:color-mix(in oklch,var(--grund) 90%,transparent);
  border-bottom:1px solid color-mix(in oklch,var(--linie) 70%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px)}
.yz-kopf-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;height:var(--kopf)}
.yz-kopf-links{display:flex;align-items:center;gap:12px;justify-self:start;min-width:0}
.yz-kopf-rechts{display:flex;align-items:center;justify-content:flex-end;gap:clamp(14px,1.6vw,26px);justify-self:end;min-width:0}
.yz-marke{display:flex;align-items:center;justify-content:center;text-decoration:none;min-height:44px}
.yz-marke img{height:60px;width:auto}
.yz-nav{display:flex;gap:clamp(14px,1.5vw,26px)}
.yz-nav a{font-family:var(--titel);font-weight:500;font-size:.95rem;text-decoration:none;color:var(--tinte-leise);padding:10px 2px;white-space:nowrap;
  border-bottom:1px solid transparent;transition:color .3s var(--weich),border-color .3s var(--weich)}
.yz-nav a:hover{color:var(--tinte)}
.yz-nav a[aria-current="page"]{color:var(--tinte);border-bottom-color:var(--akzent-hell)}
.yz-kopf-tat{display:flex;align-items:center;gap:10px}
.yz-kopf-tel{display:inline-flex;align-items:center;gap:.55em;min-height:46px;min-width:46px;justify-content:center;padding:0 18px;border-radius:var(--r-rund);background:var(--akzent);
  color:var(--auf-akzent);font-family:var(--titel);font-weight:500;text-decoration:none;white-space:nowrap;transition:transform .45s var(--weich),background-color .3s var(--weich)}
.yz-kopf-tel:hover{background:color-mix(in oklch,var(--akzent) 86%,var(--tinte))}
.yz-kopf-tel:active,.yz-kopf-wa:active{transform:scale(.98)}
.yz-kopf-wa{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--linie);color:var(--tinte);
  text-decoration:none;transition:border-color .3s var(--weich),background-color .3s var(--weich)}
.yz-kopf-wa:hover{border-color:var(--tinte-leise);background:var(--flaeche)}
.yz-kopf-wa .yz-icon{width:22px;height:22px}
.yz-kopf-menue{display:none;width:48px;height:48px;border-radius:var(--r-knopf);border:1px solid var(--linie);background:transparent;color:var(--tinte);
  align-items:center;justify-content:center;cursor:pointer}
.yz-kopf-menue .yz-icon{width:24px;height:24px}
.yz-kopf-menue[aria-expanded="true"] .yz-menue-auf,.yz-kopf-menue[aria-expanded="false"] .yz-menue-zu{display:none}
.yz-schublade{position:fixed;inset:var(--kopf) 0 0 0;z-index:49;background:var(--grund);padding:24px var(--rand) 120px;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px}
.yz-schublade a.yz-schublade-punkt{display:flex;justify-content:space-between;align-items:center;min-height:58px;font-family:var(--titel);font-size:1.35rem;
  text-decoration:none;border-bottom:1px solid var(--linie)}
.yz-schublade a[aria-current="page"]{color:var(--akzent-hell)}
.yz-schublade-tat{display:grid;gap:10px;margin-top:24px}
.yz-schublade-tat .yz-knopf{width:100%}
html.yz-menue-offen{overflow:hidden}
@media (max-width:1360px){.yz-kopf-tel span{display:none}.yz-kopf-tel{padding:0}.yz-nav{gap:16px}.yz-nav a{font-size:.92rem}}
@media (max-width:1100px){
  .yz-nav{display:none}.yz-kopf-menue{display:inline-flex}
}
/* Auf Mobil bleibt das Logo exakt mittig (Suite prueft +-2 px). Mit zwei Knoepfen rechts (102 px) gegen den
   Menueknopf links (48 px) lief die rechte Gruppe beim breiteren HD-Logo (3,65:1 seit 30.09.2026) bei 390 px
   8 px und bei 360 px 23 px ins Logo. Der Anrufknopf steht hier ohnehin gefuellt in der Schnellkontakt-Leiste
   unten und im Menue; in der Kopfzeile bleibt WhatsApp, beide Seiten sind damit gleich breit. */
@media (max-width:980px){
  :root{--kopf:66px}
  .yz-marke img{height:44px}
  .yz-kopf-in{gap:12px}
  .yz-kopf-tel{display:none}
}

/* ---------------------------------------------------------------- Oeffnungsstatus */
.yz-status{display:inline-flex;align-items:center;gap:10px;font-size:.95rem;color:var(--tinte-leise)}
.yz-punkt{width:9px;height:9px;border-radius:50%;background:var(--grau-logo);flex:none}
.yz-punkt--auf{background:var(--gut)}
.yz-punkt--zu{background:var(--fehler)}

/* ---------------------------------------------------------------- Abschnitte */
.yz-abschnitt{padding-block:var(--abstand)}
.yz-abschnitt--eng{padding-block:calc(var(--abstand) * .55)}
.yz-kopfzeile{display:grid;gap:18px;margin-bottom:clamp(40px,5vw,72px);max-width:880px}
.yz-kopfzeile--breit{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:24px 64px}
@media (max-width:860px){.yz-kopfzeile--breit{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- Hero */
.yz-hero{position:relative;min-height:calc(100dvh - var(--kopf));display:grid;align-items:center;padding-block:clamp(40px,6vw,88px)}
.yz-hero-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.yz-hero-text{grid-column:1 / span 7;grid-row:1;position:relative;z-index:2}
.yz-hero-text .yz-h1{max-width:15ch}
.yz-hero-fuehrung{margin:28px 0 36px;font-size:clamp(1.12rem,1.4vw,1.32rem);color:var(--tinte-leise);max-width:44ch}
.yz-hero-status{margin-top:26px}
.yz-hero-tafel{grid-column:7 / span 6;grid-row:1;position:relative;z-index:1;perspective:1400px}
/* Das Hero-Foto ist ganz zu sehen: Der Rahmen traegt das Seitenverhaeltnis des Bildes (aus dem Bau), seine Breite
   ist so begrenzt, dass er in den ersten Bildschirm passt, im Raster steht er rechtsbuendig. */
.yz-hero-tafel-in{position:relative;border-radius:calc(var(--r-karte) + 6px);overflow:hidden;aspect-ratio:1800 / 1725;
  max-width:min(100%,calc(min(100dvh - var(--kopf) - 150px,760px) * 1.0435));margin-left:auto;
  box-shadow:0 40px 90px -40px color-mix(in oklch,var(--grund) 80%,black),0 0 0 1px color-mix(in oklch,var(--linie) 80%,transparent)}
/* Kein Zoom beim Ueberfahren: Das Hero-Foto soll jederzeit ganz zu sehen sein (Luis, 30.09.). */
.yz-hero-tafel-in img{width:100%;height:100%;object-fit:cover}
/* Farbverlaeufe links und rechts vom Bild (Luis, 30.09.2026): Die Bildkanten laufen in den Grund aus, daneben liegt ein
   leiser Schein im Logo-Petrol. Weiche ab vom Glow-Verbot des Design-Stacks, weil ausdruecklich gewuenscht; der Schein
   ist einfarbig, weit und schwach, kein Mesh. Nur auf grossen Einzelbildern (Hero, Zweispalt-Fotos, breite
   Galeriezellen), nie auf Vorher/Nachher-Karten oder kleinen Kacheln. */
.yz-hero-tafel-in::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,color-mix(in oklch,var(--grund) 70%,transparent)),
    linear-gradient(90deg,color-mix(in oklch,var(--grund) 82%,transparent),transparent 22%),
    linear-gradient(270deg,color-mix(in oklch,var(--grund) 82%,transparent),transparent 22%)}
.yz-hero-tafel-in{box-shadow:0 40px 90px -40px color-mix(in oklch,var(--grund) 80%,black),0 0 0 1px color-mix(in oklch,var(--linie) 80%,transparent),
  -90px 0 170px -40px color-mix(in oklch,var(--akzent) 72%,transparent),90px 0 170px -40px color-mix(in oklch,var(--akzent) 72%,transparent)}
.yz-hero-unterschrift{position:absolute;left:22px;right:22px;bottom:18px;z-index:2;font-size:.9rem;color:var(--tinte);margin:0}
@media (max-width:980px){
  .yz-hero{min-height:0;padding-top:28px}
  .yz-hero-text,.yz-hero-tafel{grid-column:1 / -1;grid-row:auto}
  .yz-hero-tafel-in{max-width:none;margin-left:0}
  .yz-hero-text .yz-h1{max-width:none}
}
@media (max-width:520px){.yz-knopfreihe .yz-knopf{width:100%}}

/* ---------------------------------------------------------------- Fakten-Zeile */
.yz-fakten{border-block:1px solid var(--linie)}
.yz-fakten ul{list-style:none;margin:0;padding:22px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 28px}
.yz-fakten li{display:flex;align-items:center;gap:12px;font-family:var(--titel);font-weight:500;font-size:1rem}
.yz-fakten .yz-icon{color:var(--akzent-hell);width:24px;height:24px}
.yz-fakten a{text-decoration:none}
.yz-fakten a:hover{text-decoration:underline}
@media (max-width:860px){.yz-fakten ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.yz-fakten li{font-size:.92rem}}

/* ---------------------------------------------------------------- Bento Leistungen */
.yz-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(260px,auto);grid-auto-flow:dense;gap:16px}
.yz-zelle{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:clamp(22px,2.4vw,34px);border-radius:var(--r-karte);
  background:var(--flaeche);border:1px solid var(--linie);overflow:hidden;isolation:isolate;transition:border-color .4s var(--weich)}
.yz-zelle:hover{border-color:color-mix(in oklch,var(--akzent-hell) 45%,var(--linie))}
.yz-zelle--gross{grid-column:span 2;grid-row:span 2;min-height:560px}
.yz-zelle--breit{grid-column:span 2}
.yz-zelle--bild{padding:0}
.yz-zelle-bild{position:absolute;inset:0;z-index:-1}
.yz-zelle-bild img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--weich)}
.yz-zelle:hover .yz-zelle-bild img{transform:scale(1.04)}
.yz-zelle-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in oklch,var(--grund) 15%,transparent) 0%,color-mix(in oklch,var(--grund) 88%,transparent) 78%)}
.yz-zelle .yz-icon{width:34px;height:34px;color:var(--akzent-hell);margin-bottom:auto}
.yz-zelle h3{font-size:clamp(1.35rem,1.9vw,1.85rem);font-weight:700}
.yz-zelle p{margin:0;color:var(--tinte-leise);max-width:46ch}
.yz-zelle--gross p{color:var(--tinte)}
.yz-zelle a.yz-strecklink{text-decoration:none}
.yz-zelle a.yz-strecklink::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit}
.yz-zelle a.yz-strecklink:focus-visible{outline:none}
.yz-zelle:has(a.yz-strecklink:focus-visible){outline:2px solid var(--akzent-hell);outline-offset:3px}
.yz-zelle-mehr{display:inline-flex;align-items:center;gap:.5em;font-family:var(--titel);font-weight:500;color:var(--akzent-hell);font-size:.95rem}
.yz-zelle-mehr .yz-icon{width:18px;height:18px;margin:0;transition:transform .25s var(--weich)}
.yz-zelle:hover .yz-zelle-mehr .yz-icon{transform:translateX(4px)}
.yz-zelle-foto{margin:0}
.yz-zelle-foto figcaption{position:absolute;left:22px;right:22px;bottom:20px;font-size:.9rem;color:var(--tinte)}
@media (max-width:1080px){.yz-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.yz-zelle--gross{grid-column:span 2;grid-row:span 1;min-height:460px}}
@media (max-width:640px){.yz-bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}.yz-zelle,.yz-zelle--gross,.yz-zelle--breit{grid-column:auto;min-height:240px}.yz-zelle--gross{min-height:420px}}

/* ---------------------------------------------------------------- Bildfolge Kabine (Grundzustand) */
.yz-folge{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.yz-folge-buehne{position:relative;justify-self:center;width:min(100%,440px);aspect-ratio:9 / 16;border-radius:calc(var(--r-karte) + 8px);overflow:hidden;
  background:var(--flaeche);box-shadow:0 50px 100px -50px black,0 0 0 1px var(--linie)}
.yz-folge-buehne img,.yz-folge-buehne canvas{width:100%;height:100%;object-fit:cover}
.yz-folge .yz-h2,.yz-region .yz-h2,.yz-zweispalt > div > .yz-h2{margin-bottom:20px}
.yz-folge-schritte{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:14px;counter-reset:schritt}
.yz-folge-schritte li{counter-increment:schritt;display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 16px;padding:20px 22px;border-radius:var(--r-karte);
  background:var(--flaeche);border:1px solid var(--linie)}
.yz-folge-schritte li::before{content:counter(schritt,decimal-leading-zero);grid-row:span 2;font-family:var(--titel);font-weight:700;font-size:1.3rem;color:var(--akzent-hell)}
.yz-folge-schritte h3{font-size:1.25rem}
.yz-folge-schritte p{margin:0;color:var(--tinte-leise)}
.yz-folge-hinweis{margin-top:22px}
.yz-nur-kino{display:none}
html.yz-kino .yz-nur-kino{display:block}
/* Telefon: Titel und Text oben, darunter Bild und die drei Schritte nebeneinander, damit alles wie am Schreibtisch
   auf einen Blick steht (Luis, 01.10.2026). Der Textblock loest sich auf (display:contents), seine Kinder werden
   Rasterzellen; im Kino-Modus steckt die Liste in .yz-kino-schrittbereich, der dieselbe Zelle bekommt. */
@media (max-width:860px){
  .yz-folge{grid-template-columns:minmax(0,10fr) minmax(0,13fr);grid-template-areas:"titel titel" "text text" "bild schritte";gap:16px 12px;align-items:start}
  .yz-folge > div:not(.yz-folge-buehne){display:contents}
  .yz-folge .yz-h2{grid-area:titel;margin-bottom:0}
  .yz-folge .yz-fuehrung{grid-area:text;margin:0;font-size:1rem}
  .yz-folge-hinweis{display:none!important}
  .yz-folge-buehne{grid-area:bild;width:100%;justify-self:stretch;border-radius:var(--r-karte)}
  .yz-folge-schritte,.yz-kino-schrittbereich{grid-area:schritte;margin-top:0}
  .yz-folge-schritte{gap:6px}
  .yz-folge-schritte li{grid-template-columns:24px minmax(0,1fr);gap:1px 8px;padding:9px 10px;border-radius:14px}
  .yz-folge-schritte li::before{font-size:.9rem}
  .yz-folge-schritte h3{font-size:.92rem}
  .yz-folge-schritte p{font-size:.78rem;line-height:1.32}
}

/* ---------------------------------------------------------------- Vorher / Nachher */
.yz-paare{display:grid;gap:clamp(56px,7vw,112px)}
.yz-paar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);gap:16px 24px;align-items:end}
.yz-paar:nth-child(even){grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr)}
.yz-paar:nth-child(even) .yz-paar-text{order:-1}
.yz-paar-seite{position:relative;margin:0;border-radius:var(--r-karte);overflow:hidden;aspect-ratio:3 / 4;background:var(--flaeche)}
.yz-paar-seite img{width:100%;height:100%;object-fit:cover}
.yz-paar-marke{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--r-rund);
  font-family:var(--titel);font-weight:500;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;background:color-mix(in oklch,var(--grund) 78%,transparent);color:var(--tinte)}
.yz-paar-seite--nachher .yz-paar-marke{background:var(--akzent);color:var(--auf-akzent)}
.yz-paar-text{display:grid;gap:14px;align-self:center}
.yz-paar-text h3{font-size:clamp(1.5rem,2.3vw,2.2rem)}
.yz-paar-text dl{margin:0;display:grid;gap:12px}
.yz-paar-text dt{font-family:var(--titel);font-weight:500;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grau-logo)}
.yz-paar-text dd{margin:2px 0 0;color:var(--tinte)}
@media (max-width:980px){
  .yz-paar,.yz-paar:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .yz-paar-text,.yz-paar:nth-child(even) .yz-paar-text{grid-column:1 / -1;order:-1}
}

/* ---------------------------------------------------------------- Bewertungen */
.yz-stimmen-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.yz-note{display:grid;justify-items:end;gap:6px;text-align:right}
.yz-note-zahl{font-family:var(--titel);font-weight:700;font-size:clamp(3.2rem,6vw,5.6rem);line-height:.9}
.yz-sterne{display:inline-flex;gap:3px;color:var(--akzent-hell)}
.yz-sterne .yz-icon{width:22px;height:22px}
.yz-stimmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:16px}
.yz-stimme{margin:0;display:flex;flex-direction:column;gap:18px;padding:clamp(24px,2.6vw,36px);border-radius:var(--r-karte);background:var(--flaeche);border:1px solid var(--linie)}
.yz-stimme--gross{grid-row:span 2;background:var(--flaeche-hoch)}
.yz-stimme blockquote{margin:0;font-size:1.08rem;line-height:1.6}
.yz-stimme--gross blockquote{font-family:var(--titel);font-weight:500;font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.35}
.yz-stimme figcaption{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:.92rem;color:var(--tinte-leise)}
.yz-stimme figcaption b{font-family:var(--titel);font-weight:500;color:var(--tinte);font-size:1rem}
.yz-stimmen-fuss{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between}
.yz-stimmen-fuss p{margin:0;max-width:78ch}
@media (max-width:980px){.yz-stimmen{grid-template-columns:repeat(2,minmax(0,1fr))}.yz-stimme--gross{grid-column:span 2;grid-row:auto}}
@media (max-width:640px){.yz-stimmen-kopf{grid-template-columns:minmax(0,1fr)}.yz-note{justify-items:start;text-align:left}.yz-stimmen{grid-template-columns:minmax(0,1fr)}.yz-stimme--gross{grid-column:auto}}

/* ---------------------------------------------------------------- Ablauf (gepinnter Titel, CSS sticky) */
.yz-ablauf{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,120px);align-items:start}
.yz-ablauf-kopf{position:sticky;top:calc(var(--kopf) + 48px);display:grid;gap:18px}
.yz-ablauf-liste{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2vw,26px);counter-reset:ablauf}
.yz-ablauf-liste li{counter-increment:ablauf;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 24px;padding:clamp(26px,3vw,40px);
  border-radius:var(--r-karte);border:1px solid var(--linie);background:var(--flaeche)}
.yz-ablauf-liste li::before{content:counter(ablauf);grid-row:span 2;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  border:1px solid var(--akzent-hell);color:var(--akzent-hell);font-family:var(--titel);font-weight:700;font-size:1.3rem}
.yz-ablauf-liste h3{font-size:clamp(1.3rem,1.8vw,1.65rem);align-self:center}
.yz-ablauf-liste p{margin:0;color:var(--tinte-leise)}
@media (max-width:860px){.yz-ablauf{grid-template-columns:minmax(0,1fr)}.yz-ablauf-kopf{position:static}}

/* ---------------------------------------------------------------- Gutachten-Einschub (Bild im Titel) */
.yz-wortbild{font-family:var(--titel);font-weight:700;font-size:clamp(2.1rem,4.6vw,4.4rem);line-height:1.12;letter-spacing:-0.015em;max-width:22ch}
.yz-wortbild-pille{display:inline-block;width:clamp(96px,11vw,170px);height:clamp(46px,5vw,76px);border-radius:var(--r-rund);overflow:hidden;
  vertical-align:middle;margin:0 .18em;transform:translateY(-.06em)}
.yz-wortbild-pille img{width:100%;height:100%;object-fit:cover}
.yz-chips{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.yz-chips li{display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:0 18px;border-radius:var(--r-rund);border:1px solid var(--linie);font-family:var(--titel);font-weight:500;font-size:.95rem}
.yz-chips .yz-icon{color:var(--akzent-hell);width:18px;height:18px}
.yz-gutachten-text{margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end}
@media (max-width:760px){.yz-gutachten-text{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- Region und Karte */
.yz-region{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:stretch}
.yz-orte{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.yz-orte li{padding:6px 14px;border-radius:var(--r-rund);background:var(--flaeche);border:1px solid var(--linie);font-size:.95rem}
.yz-adresse{font-style:normal;margin:28px 0 0;display:grid;gap:4px;font-size:1.1rem}
.yz-region .yz-knopfreihe{margin-top:16px}
@media (max-width:860px){.yz-region{grid-template-columns:minmax(0,1fr)}}

/* Google-Satellitenkarte nach Klick: Die Flaeche streckt sich auf die Hoehe der Textspalte (Raster mit
   align-items:stretch), der Rahmen fuellt sie ganz aus. Vor dem Klick steht ein Platzhalter mit Kartenraster. */
.yz-gkarte{position:relative;min-height:420px;height:100%;border-radius:var(--r-karte);overflow:hidden;border:1px solid var(--linie);
  background:var(--flaeche);background-image:
    radial-gradient(60% 60% at 50% 45%,color-mix(in oklch,var(--akzent) 28%,transparent),transparent 70%),
    repeating-linear-gradient(0deg,color-mix(in oklch,var(--linie) 60%,transparent) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(90deg,color-mix(in oklch,var(--linie) 60%,transparent) 0 1px,transparent 1px 48px)}
.yz-gkarte-platz{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:14px;padding:32px;text-align:center}
.yz-gkarte-platz .yz-klein{max-width:44ch;margin:0}
.yz-gkarte-pin{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--akzent);color:var(--auf-akzent)}
.yz-gkarte-pin .yz-icon{width:32px;height:32px}
.yz-gkarte-titel{font-family:var(--titel);font-weight:700;font-size:1.35rem;margin:0}
.yz-gkarte-merken{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:.92rem;color:var(--tinte-leise);cursor:pointer}
.yz-gkarte-merken input{width:20px;height:20px;accent-color:var(--akzent)}
.yz-gkarte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--flaeche)}
.yz-gkarte--geladen .yz-gkarte-platz{display:none}
/* Handy: Die Flaeche waechst mit dem Platzhaltertext; geladen bekommt die Karte eine feste Hoehe. */
@media (max-width:860px){.yz-gkarte{width:100%;min-height:0;height:auto}.yz-gkarte-platz{position:relative;inset:auto;min-height:380px}.yz-gkarte--geladen{height:440px}}

/* ---------------------------------------------------------------- WhatsApp-Anfrage */
.yz-wa{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,88px);align-items:start}
.yz-wa-kopf{position:sticky;top:calc(var(--kopf) + 40px);display:grid;gap:18px}
.yz-wa-schritte{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
.yz-wa-schritte li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.yz-wa-schritte .yz-icon{width:24px;height:24px;color:var(--akzent-hell);margin-top:2px}
.yz-wa-form{display:grid;gap:26px;padding:clamp(24px,3vw,40px);border-radius:var(--r-karte);background:var(--flaeche);border:1px solid var(--linie)}
.yz-wa-feld{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
.yz-wa-feld legend,.yz-wa-form .yz-feld label{font-family:var(--titel);font-weight:500;font-size:1.02rem;padding:0;margin-bottom:12px}
.yz-wa-form .yz-feld label{margin-bottom:0}
.yz-wa-feld legend small,.yz-wa-form .yz-feld label small{font-family:var(--text);font-weight:400;color:var(--tinte-leise);margin-left:6px;font-size:.88rem}
.yz-chipwahl{display:flex;flex-wrap:wrap;gap:10px}
.yz-chip{position:relative;display:inline-flex;cursor:pointer}
.yz-chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.yz-chip span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:var(--r-rund);border:1px solid var(--linie);background:var(--grund);
  color:var(--tinte);font-size:.98rem;transition:border-color .25s var(--weich),background-color .25s var(--weich),color .25s var(--weich)}
.yz-chip:hover span{border-color:var(--tinte-leise)}
.yz-chip input:checked + span{background:var(--akzent);border-color:color-mix(in oklch,var(--akzent-hell) 45%,transparent);color:var(--auf-akzent)}
.yz-chip input:focus-visible + span{outline:2px solid var(--akzent-hell);outline-offset:3px}
.yz-chip:active span{transform:scale(.98)}
.yz-wa-feld--fehler .yz-chip span{border-color:var(--fehler)}
/* Zwei Felder nebeneinander: Beschriftung, Feld und Fehlerzeile liegen in gemeinsamen Zeilen (Subgrid), damit die
   Eingabefelder auf einer Hoehe stehen, auch wenn eine Beschriftung umbricht (Befund Luis 01.10.2026). */
.yz-wa-zeile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;gap:0 18px}
.yz-wa-zeile .yz-feld{grid-row:span 3;grid-template-rows:subgrid;align-content:end;row-gap:8px}
.yz-wa-zeile .yz-feld label{align-self:end}
.yz-wa-vorschau{padding:18px 20px;border-radius:var(--r-karte);background:var(--grund);border:1px dashed var(--linie)}
.yz-wa-vorschau .yz-klein{margin:0 0 10px}
.yz-wa-blase{margin:0;padding:14px 16px;border-radius:16px 16px 16px 4px;background:color-mix(in oklch,var(--akzent) 30%,var(--flaeche));color:var(--tinte);
  white-space:pre-line;font-size:.98rem;line-height:1.5;max-width:52ch}
.yz-wa-senden{display:grid;gap:12px;justify-items:start}
.yz-wa-senden .yz-klein{margin:0;max-width:60ch}
/* Weg der Anfrage (seit 01.10.2026): zwei Reiter ueber dem Formularkasten, das Kontaktformular mit Fotos. */
.yz-anfrage{display:grid;gap:14px;min-width:0}
.yz-wege{display:flex;gap:8px;padding:6px;border-radius:var(--r-karte);background:var(--flaeche);border:1px solid var(--linie)}
.yz-weg{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 18px;border-radius:calc(var(--r-karte) - 6px);border:1px solid transparent;
  background:transparent;color:var(--tinte-leise);font-family:var(--titel);font-weight:500;font-size:1rem;cursor:pointer;transition:background-color .3s var(--weich),color .3s var(--weich)}
.yz-weg .yz-icon{width:22px;height:22px}
.yz-weg:hover{color:var(--tinte)}
.yz-weg[aria-selected="true"]{background:var(--akzent);color:var(--auf-akzent)}
.yz-weg:focus-visible{outline:2px solid var(--akzent-hell);outline-offset:2px}
.yz-weg:active{transform:scale(.98)}
.yz-kf-form .yz-feld label{margin-bottom:0}
.yz-kf-fotos input[type=file]{padding:10px 12px;min-height:0;cursor:pointer;color:var(--tinte-leise)}
.yz-kf-fotos input[type=file]::file-selector-button{margin-right:14px;min-height:36px;padding:0 16px;border-radius:var(--r-rund);border:1px solid var(--linie);background:var(--grund);color:var(--tinte);font-family:var(--titel);font-weight:500;cursor:pointer}
.yz-kf-fotos input[type=file]:hover::file-selector-button{border-color:var(--tinte-leise)}
.yz-kf-fotos .yz-klein{margin:0}
.yz-kf-vorschau{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.yz-kf-vorschau:empty{display:none}
.yz-kf-vorschau li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px;border-radius:var(--r-knopf);background:var(--grund);border:1px solid var(--linie)}
.yz-kf-vorschau img{width:64px;height:48px;object-fit:cover;border-radius:8px;display:block}
.yz-kf-vorschau span{font-size:.92rem;color:var(--tinte-leise);overflow-wrap:anywhere}
.yz-kf-weg{min-height:40px;padding:0 14px;border-radius:var(--r-rund);border:1px solid var(--linie);background:transparent;color:var(--tinte);font:inherit;font-size:.9rem;cursor:pointer}
.yz-kf-weg:hover{border-color:var(--tinte-leise)}
.yz-kf-weg:focus-visible{outline:2px solid var(--akzent-hell);outline-offset:2px}
/* Honigtopf: fuer Menschen unsichtbar und nicht erreichbar, Skripte fuellen es trotzdem. */
.yz-kf-firma{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.yz-kf-schutz{display:grid;gap:10px}
.yz-kf-widget{min-height:65px}
.yz-kf-widget:empty{border-radius:var(--r-knopf);border:1px dashed var(--linie)}
.yz-kf-schutz .yz-klein{margin:0}
.yz-kf-status{margin:0;min-height:0;font-size:.95rem;color:var(--tinte-leise)}
.yz-kf-status:empty{display:none}
.yz-kf-status--fehler{color:var(--fehler)}
.yz-kf-status--gut{color:var(--gut)}
.yz-kf-dank{display:grid;gap:12px;padding:clamp(24px,3vw,40px);border-radius:var(--r-karte);background:var(--flaeche);border:1px solid var(--linie)}
.yz-kf-dank h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.yz-kf-dank p{margin:0;color:var(--tinte-leise)}
@media (max-width:980px){.yz-wa{grid-template-columns:minmax(0,1fr)}.yz-wa-kopf{position:static}}
.yz-weg span{white-space:nowrap}
html.yz-js .yz-kf-fotos input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
html.yz-js .yz-kf-fotos input[type=file]:focus-visible + .yz-kf-fotoknopf{outline:2px solid var(--akzent-hell);outline-offset:3px}
.yz-kf-fotoknopf{display:none}
html.yz-js .yz-kf-fotoknopf{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;border-radius:var(--r-knopf);border:1px dashed var(--tinte-leise);background:var(--grund);color:var(--tinte);font-family:var(--titel);font-weight:500;font-size:1rem;cursor:pointer;justify-self:start}
.yz-kf-fotoknopf .yz-icon{width:22px;height:22px;color:var(--akzent-hell)}
.yz-kf-fotoknopf:hover{border-color:var(--akzent-hell)}
.yz-kf-fotoknopf:focus-visible{outline:2px solid var(--akzent-hell);outline-offset:3px}
.yz-kf-fotoknopf:active{transform:scale(.98)}
@media (max-width:480px){.yz-weg{padding:0 10px;gap:8px}.yz-weg span{font-size:.92rem}.yz-kf-vorschau li{grid-template-columns:56px minmax(0,1fr)}.yz-kf-weg{grid-column:2}.yz-kf-fotoknopf{width:100%;justify-content:center}}
@media (max-width:560px){.yz-wa-zeile{grid-template-columns:minmax(0,1fr)}.yz-wa-senden .yz-knopf{width:100%}.yz-chip span{padding:0 15px}}

/* ---------------------------------------------------------------- Fragen */
.yz-fragen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.yz-fragen-liste{border-top:1px solid var(--linie)}
.yz-frage{border-bottom:1px solid var(--linie)}
.yz-frage summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:18px 0;cursor:pointer;
  font-family:var(--titel);font-weight:500;font-size:clamp(1.1rem,1.4vw,1.3rem)}
.yz-frage summary::-webkit-details-marker{display:none}
/* Das Oeffnen per Enter oder Leertaste ist tastaturausgeloest: das Plus dreht ohne Uebergang. */
.yz-frage summary .yz-icon{width:22px;height:22px;color:var(--akzent-hell)}
.yz-frage[open] summary .yz-icon{transform:rotate(45deg)}
.yz-frage-antwort{padding:0 0 24px;color:var(--tinte-leise);max-width:64ch}
.yz-frage-antwort p:last-child{margin:0}
/* Der Kopf der Fragen wandert wie beim Ablauf mit, bis die letzte Frage erreicht ist. */
.yz-fragen > .yz-kopfzeile{position:sticky;top:calc(var(--kopf) + 48px);align-self:start;margin-bottom:0}
@media (max-width:860px){.yz-fragen{grid-template-columns:minmax(0,1fr)}.yz-fragen > .yz-kopfzeile{position:static}}

/* ---------------------------------------------------------------- Schluss */
.yz-schluss{position:relative;overflow:hidden;border-radius:calc(var(--r-karte) + 10px);padding:clamp(48px,8vw,120px) clamp(24px,6vw,96px);
  background:var(--flaeche-hoch);border:1px solid var(--linie);display:grid;gap:26px;justify-items:start}
.yz-schluss::before{content:"";position:absolute;inset:auto -10% -60% 30%;height:120%;background:radial-gradient(closest-side,color-mix(in oklch,var(--akzent) 45%,transparent),transparent);z-index:0;pointer-events:none}
.yz-schluss > *{position:relative;z-index:1}
.yz-schluss .yz-h2{font-size:clamp(2.3rem,5vw,4.6rem);max-width:18ch}
.yz-schluss-signet{position:absolute;right:clamp(24px,5vw,72px);top:clamp(28px,5vw,64px);width:clamp(140px,20vw,300px);opacity:.9;z-index:1}
@media (max-width:700px){.yz-schluss-signet{position:static;width:180px}}

/* ---------------------------------------------------------------- Unterseiten */
.yz-seitenkopf{padding-block:clamp(56px,8vw,120px) clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.yz-seitenkopf .yz-h1{max-width:20ch}
.yz-pfad{font-size:.9rem;color:var(--tinte-leise)}
.yz-pfad ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.yz-pfad li+li::before{content:"/";margin-right:8px;color:var(--linie)}
.yz-pfad a{color:var(--tinte-leise)}
.yz-zweispalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.yz-zweispalt--bild{align-items:center}
@media (max-width:860px){.yz-zweispalt{grid-template-columns:minmax(0,1fr)}}
.yz-haken{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.yz-haken li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.yz-haken .yz-icon{color:var(--akzent-hell);width:24px;height:24px;margin-top:2px}
.yz-foto{margin:0;border-radius:var(--r-karte);overflow:hidden;background:var(--flaeche);position:relative}
.yz-foto img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--weich)}
.yz-foto:hover img,.yz-foto:focus-within img{transform:scale(1.04)}
/* Fotos oeffnen sich beim Klick in der Vollbild-Ansicht (Dialog unten); ohne Skript fuehrt der Link zur grossen Datei. */
.yz-foto-link{display:block;height:100%;cursor:zoom-in;color:inherit}
.yz-foto-link:focus-visible{outline:none}
.yz-foto:has(.yz-foto-link:focus-visible){outline:2px solid var(--akzent-hell);outline-offset:3px}
.yz-foto:has(.yz-foto-link) figcaption{pointer-events:none}
.yz-foto-link--deck{position:absolute;inset:0;z-index:3;height:auto;border-radius:inherit}
.yz-licht{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;color:var(--tinte)}
.yz-licht::backdrop{background:color-mix(in oklch,var(--grund) 96%,black)}
html.yz-licht-offen{overflow:hidden}
.yz-licht-rahmen{position:relative;width:100%;height:100%;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;background:color-mix(in oklch,var(--grund) 96%,black)}
.yz-licht img{width:100%;height:100%;object-fit:contain;display:block}
.yz-licht-fuss{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:10px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));font-size:.92rem;color:var(--tinte-leise)}
.yz-licht-text{margin:0;color:var(--tinte)}
.yz-licht-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;padding:0 16px;border-radius:var(--r-rund);border:1px solid color-mix(in oklch,var(--tinte) 30%,transparent);background:color-mix(in oklch,var(--grund) 75%,black);color:var(--tinte);font:inherit;font-weight:500;cursor:pointer;transition:border-color .2s,background-color .2s}
.yz-licht-knopf:hover{border-color:var(--akzent-hell)}
.yz-licht-knopf:active{transform:scale(.98)}
.yz-licht-knopf .yz-icon{width:22px;height:22px}
.yz-licht-zu{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:2}
.yz-licht-zurueck,.yz-licht-vor{position:absolute;top:50%;transform:translateY(-50%);z-index:2;padding:0;width:48px}
.yz-licht-zurueck{left:max(10px,env(safe-area-inset-left))}
.yz-licht-vor{right:max(10px,env(safe-area-inset-right))}
.yz-licht-zurueck:active,.yz-licht-vor:active{transform:translateY(-50%) scale(.98)}
.yz-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 12px;font-size:.88rem;color:var(--tinte);
  background:linear-gradient(180deg,transparent,color-mix(in oklch,var(--grund) 82%,transparent))}
.yz-foto--hoch{aspect-ratio:4 / 5}
/* Kantenverlauf und Petrol-Schein wie beim Hero (Zweispalt-Fotos); breite Galeriezellen nur mit Kantenverlauf, ein
   Schein wuerde die Nachbarkacheln im dichten Raster einfaerben. Der Kantenverlauf liegt unter der Bildunterschrift. */
.yz-foto--verlauf::before,.yz-galerie .yz-foto--breit::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,color-mix(in oklch,var(--grund) 82%,transparent),transparent 24%),
    linear-gradient(270deg,color-mix(in oklch,var(--grund) 82%,transparent),transparent 24%)}
.yz-foto figcaption{z-index:2}
.yz-foto--verlauf{box-shadow:-80px 0 150px -40px color-mix(in oklch,var(--akzent) 72%,transparent),80px 0 150px -40px color-mix(in oklch,var(--akzent) 72%,transparent)}
.yz-galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:14px}
.yz-galerie .yz-foto{aspect-ratio:3 / 4}
.yz-galerie .yz-foto--breit{grid-column:span 2;aspect-ratio:auto;min-height:0}
.yz-galerie .yz-foto--breit img{object-position:50% 58%}
.yz-galerie .yz-foto--breit picture{position:absolute;inset:0}
@media (max-width:860px){.yz-galerie{grid-template-columns:repeat(2,minmax(0,1fr))}.yz-galerie .yz-foto--breit{aspect-ratio:3 / 2}}
/* ---------------------------------------------------------------- 360-Grad-Rundgang (Zwei-Klick)
   Teaserbild mit Startknopf; nach dem Klick sitzt der Viewer (iframe aus rundgang/) im selben Rahmen. */
.yz-rundgang{position:relative;aspect-ratio:16 / 9;border-radius:var(--r-karte);overflow:hidden;background:var(--flaeche);border:1px solid var(--linie);isolation:isolate}
.yz-rundgang picture{position:absolute;inset:0}
.yz-rundgang img{width:100%;height:100%;object-fit:cover}
.yz-rundgang-start{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;padding:24px;
  background:linear-gradient(180deg,color-mix(in oklch,var(--grund) 20%,transparent),color-mix(in oklch,var(--grund) 72%,transparent))}
.yz-rundgang-start .yz-klein{margin:0;color:var(--tinte)}
.yz-rundgang iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--flaeche)}
.yz-rundgang-hinweis{margin:14px 0 0}
@media (max-width:860px){.yz-rundgang{aspect-ratio:4 / 5}}
/* ---------------------------------------------------------------- Loop-Videos aus der Halle
   Hochkant 9:16 wie die Bildfolge. Drei Karten nebeneinander auf einer Hoehe (Luis 01.10.2026: kein Versatz);
   auf dem Telefon eine seitlich rollbare Reihe mit Einrasten, die naechste Karte lugt heraus. Der Knopf haelt an
   und startet. */
.yz-loops{display:grid;grid-template-columns:repeat(3,minmax(0,400px));justify-content:center;align-items:start;gap:clamp(16px,2.4vw,32px);list-style:none;margin:0;padding:0}
.yz-loops > li{margin:0;padding:0}
.yz-loop{margin:0;display:grid;gap:12px;min-width:0}
.yz-loop-karte{position:relative;aspect-ratio:9 / 16;border-radius:var(--r-karte);overflow:hidden;background:var(--flaeche);border:1px solid var(--linie);isolation:isolate}
.yz-loop video{display:block;width:100%;height:100%;object-fit:cover;background:var(--flaeche)}
.yz-loop figcaption{font-size:.92rem;color:var(--tinte-leise);padding-inline:4px}
.yz-loop-knopf{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;border-radius:var(--r-rund);
  border:1px solid color-mix(in oklch,var(--tinte) 30%,transparent);background:color-mix(in oklch,var(--grund) 78%,transparent);color:var(--tinte);font:inherit;font-weight:500;font-size:.95rem;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s,background-color .2s}
.yz-loop-knopf:hover{border-color:var(--akzent-hell)}
.yz-loop-knopf:active{transform:scale(.98)}
.yz-loop-knopf:focus-visible{outline:2px solid var(--akzent-hell);outline-offset:3px}
.yz-loop-knopf .yz-icon{width:20px;height:20px;flex:none}
.yz-loop-knopf .yz-loop-pause,.yz-loop[data-laeuft] .yz-loop-play{display:none}
.yz-loop[data-laeuft] .yz-loop-pause{display:block}
html:not(.yz-js) .yz-loop-knopf{display:none}
.yz-loop--einzel{width:min(100%,400px);justify-self:center}
.yz-loop--einzel .yz-loop-karte{box-shadow:-80px 0 150px -40px color-mix(in oklch,var(--akzent) 72%,transparent),80px 0 150px -40px color-mix(in oklch,var(--akzent) 72%,transparent)}
.yz-zweispalt--loop{align-items:center}
@media (max-width:860px){
  /* justify-content:flex-start ist Pflicht: mit center laege der linke Ueberlauf unerreichbar vor dem Anfang. */
  .yz-loops{display:flex;justify-content:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--rand));padding:4px var(--rand) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .yz-loops::-webkit-scrollbar{display:none}
  .yz-loops > li{flex:0 0 min(76vw,340px);scroll-snap-align:center}
  .yz-loop--einzel{width:min(100%,340px)}
}
.yz-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.yz-karte-text{padding:clamp(22px,2.4vw,32px);border-radius:var(--r-karte);background:var(--flaeche);border:1px solid var(--linie);display:grid;gap:10px;align-content:start}
.yz-karte-text .yz-icon{width:30px;height:30px;color:var(--akzent-hell)}
.yz-karte-text h3{font-size:1.3rem}
.yz-karte-text p{margin:0;color:var(--tinte-leise)}
@media (max-width:980px){.yz-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.yz-karten{grid-template-columns:minmax(0,1fr)}}
.yz-hinweis{padding:22px 26px;border-radius:var(--r-karte);border:1px solid var(--linie);background:var(--flaeche);color:var(--tinte-leise);font-size:.95rem}
.yz-hinweis b{color:var(--tinte)}

/* ---------------------------------------------------------------- Kontakt */
.yz-kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.yz-kachel{position:relative;display:grid;gap:10px;align-content:start;padding:clamp(22px,2.4vw,32px);border-radius:var(--r-karte);background:var(--flaeche);
  border:1px solid var(--linie);text-decoration:none;transition:border-color .4s var(--weich),transform .45s var(--weich)}
a.yz-kachel:hover{border-color:color-mix(in oklch,var(--akzent-hell) 50%,var(--linie))}
a.yz-kachel:active{transform:scale(.98)}
.yz-kachel .yz-icon{width:30px;height:30px;color:var(--akzent-hell)}
.yz-kachel-titel{font-family:var(--titel);font-weight:500;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grau-logo)}
.yz-kachel-wert{font-family:var(--titel);font-weight:700;font-size:clamp(1.15rem,1.5vw,1.4rem);overflow-wrap:anywhere}
/* Beschriftung darf umbrechen, die Uhrzeit nicht (in schmalen Kacheln brach "8.30 bis 17.30 Uhr" nach "Uhr" um). */
.yz-zeiten{margin:0;display:grid;grid-template-columns:minmax(min-content,1fr) auto;gap:4px 18px;justify-content:start}
.yz-zeiten dd{white-space:nowrap}
.yz-zeiten dt{color:var(--tinte-leise)}
.yz-zeiten dd{margin:0}
@media (max-width:1080px){.yz-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.yz-kacheln{grid-template-columns:minmax(0,1fr)}}
.yz-formular{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;padding:clamp(24px,3vw,44px);border-radius:var(--r-karte);background:var(--flaeche);border:1px solid var(--linie)}
.yz-feld{display:grid;gap:8px;align-content:start}
.yz-feld--breit{grid-column:1 / -1}
.yz-feld label{font-family:var(--titel);font-weight:500;font-size:.95rem}
.yz-feld label small{font-family:var(--text);font-weight:400;color:var(--tinte-leise);margin-left:6px}
.yz-feld input,.yz-feld select,.yz-feld textarea{width:100%;min-height:52px;padding:12px 16px;border-radius:var(--r-knopf);border:1px solid var(--linie);
  background:var(--grund);color:var(--tinte);font:inherit;transition:border-color .3s var(--weich)}
.yz-feld textarea{min-height:150px;resize:vertical}
.yz-feld input:hover,.yz-feld select:hover,.yz-feld textarea:hover{border-color:var(--tinte-leise)}
.yz-feld input:focus-visible,.yz-feld select:focus-visible,.yz-feld textarea:focus-visible{outline:2px solid var(--akzent-hell);outline-offset:1px;border-color:var(--akzent-hell)}
.yz-feld-fehler{color:var(--fehler);font-size:.92rem;min-height:0}
.yz-feld--fehler input,.yz-feld--fehler textarea,.yz-feld--fehler select{border-color:var(--fehler)}
.yz-formular-fuss{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.yz-formular-fuss p{margin:0;max-width:60ch}
.yz-formular-gesendet{grid-column:1 / -1;padding:16px 20px;border-radius:var(--r-knopf);border:1px solid var(--gut);color:var(--tinte);margin:0}
.yz-ohne-js{display:block}
html.yz-js .yz-ohne-js{display:none}
html:not(.yz-js) .yz-nur-js{display:none!important}
@media (max-width:640px){.yz-formular{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- Fliesstext (Recht) */
.yz-fliess{max-width:76ch}
.yz-fliess h2{font-size:1.5rem;margin:48px 0 14px}
.yz-fliess h3{font-size:1.15rem;margin:28px 0 10px;font-weight:500}
.yz-fliess ul{padding-left:1.2em;margin:0 0 1em}
.yz-fliess li{margin-bottom:.4em}
.yz-fliess a{color:var(--akzent-hell)}
.yz-offen{display:inline;padding:1px 8px;border-radius:6px;background:color-mix(in oklch,var(--fehler) 18%,transparent);color:var(--tinte);font-size:.95em}

/* ---------------------------------------------------------------- Fusszeile */
.yz-fuss{margin-top:var(--abstand);border-top:1px solid var(--linie);padding-block:clamp(56px,7vw,96px) 32px;background:var(--flaeche)}
/* Zeitenspalte breiter, seit "8.30 bis 17.30 Uhr" (04.10.2026) brach "Montag bis Freitag" sonst um. */
.yz-fuss-raster{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.85fr) minmax(0,1.3fr);gap:40px 32px}
.yz-fuss h2{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau-logo);font-weight:500;margin-bottom:16px}
.yz-fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.yz-fuss a{text-decoration:none;color:var(--tinte)}
.yz-fuss a:hover{text-decoration:underline}
.yz-fuss-marke img{width:min(100%,340px);height:auto}
.yz-fuss-marke address{font-style:normal;margin-top:20px;color:var(--tinte-leise)}
.yz-fuss-sozial{display:flex;gap:10px;margin-top:20px}
.yz-fuss-sozial a{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--linie)}
.yz-fuss-sozial a:hover{border-color:var(--tinte-leise)}
/* Zeiten in zwei gemeinsamen Spalten (Subgrid), damit "geschlossen" genau unter "8.30 bis 17.30 Uhr" beginnt;
   mit space-between je Zeile stand es am rechten Rand (Luis, 30.09.2026). */
.yz-fuss-zeiten{grid-template-columns:minmax(min-content,1fr) auto}
.yz-fuss-zeiten li{display:grid;grid-column:span 2;grid-template-columns:subgrid;column-gap:16px}
.yz-fuss-zeiten .yz-zahl{white-space:nowrap}
.yz-fuss-schluss{margin-top:56px;padding-top:24px;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:.9rem;color:var(--tinte-leise)}
.yz-fuss-schluss nav{display:flex;gap:20px}
.yz-fuss-schluss a{color:var(--tinte-leise)}
/* "Website made by / Pemediacorp" in der Mitte der Schlusszeile, wie auf den anderen Pemediacorp-Seiten (Luis
   01.10.2026): zwei Zeilen, der Name groesser in Pemediacorp-Gold, waechst beim Ueberfahren leicht (nur transform). */
.yz-credit{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.15;gap:2px}
.yz-credit-von{font-family:var(--titel);font-weight:700;font-size:.84rem;color:var(--tinte);letter-spacing:.01em}
.yz-fuss-schluss .yz-credit-name{display:inline-block;font-family:var(--titel);font-weight:800;font-size:1.2rem;color:oklch(0.78 0.1 80);min-height:0;
  transition:transform .3s var(--weich)}
.yz-fuss-schluss .yz-credit-name:hover,.yz-fuss-schluss .yz-credit-name:focus-visible{text-decoration:none;transform:scale(1.08)}
.yz-fuss-schluss .yz-credit-name:active{transform:scale(1.02)}
.yz-fuss-schluss .yz-credit-name:focus-visible{outline:2px solid var(--akzent-hell);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){.yz-fuss-schluss .yz-credit-name{transition:none}.yz-fuss-schluss .yz-credit-name:hover{transform:none;text-decoration:underline}}
@media (max-width:640px){.yz-fuss-schluss{flex-direction:column;align-items:flex-start}.yz-credit{align-items:flex-start;text-align:left}}
@media (max-width:1365px){.yz-fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}.yz-fuss-marke,.yz-fuss-raster > div:last-child{grid-column:1 / -1}.yz-fuss-zeiten{grid-template-columns:max-content max-content;column-gap:32px}.yz-fuss-zeiten li{column-gap:32px}}
@media (max-width:520px){.yz-fuss-raster{grid-template-columns:minmax(0,1fr)}.yz-fuss-zeiten{grid-template-columns:minmax(min-content,1fr) auto}.yz-fuss-zeiten li{column-gap:16px}}

/* ---------------------------------------------------------------- Schnellkontakt (Handy) */
.yz-leiste{display:none}
@media (max-width:980px){
  .yz-leiste{position:fixed;left:0;right:0;bottom:0;z-index:48;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    background:color-mix(in oklch,var(--grund) 94%,transparent);border-top:1px solid var(--linie);padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .yz-leiste a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border-radius:12px;text-decoration:none;
    font-family:var(--titel);font-weight:500;font-size:.8rem;color:var(--tinte)}
  .yz-leiste a:first-child{background:var(--akzent);color:var(--auf-akzent)}
  .yz-leiste a:active{transform:scale(.98)}
  .yz-leiste .yz-icon{width:22px;height:22px}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* ---------------------------------------------------------------- Einblenden (Zugabe)
   Bewusst nur an zwei Stellen: die Schritte des Ablaufs (die Reihenfolge wird beim Rollen spuerbar) und der
   Schlusskasten. Ueberall sonst stehen die Inhalte sofort da; die 3D-Schicht setzt eigene Akzente. */
html.yz-js .yz-auf{opacity:0;transform:translateY(12px);transition:opacity .6s var(--weich),transform .6s var(--weich)}
html.yz-js .yz-auf.yz-da{opacity:1;transform:none}
/* Reduzierte Bewegung: Bewegungen (Verschieben, Skalieren) entfallen, reine Farb- und Rahmenwechsel beim
   Ueberfahren bleiben als Rueckmeldung erhalten. */
@media (prefers-reduced-motion:reduce){
  html.yz-js .yz-auf{opacity:1;transform:none;transition:none}
  .yz-pfeillink .yz-icon,.yz-zelle-bild img,.yz-zelle-mehr .yz-icon,.yz-foto img{transition:none}
  .yz-zelle:hover .yz-zelle-bild img,.yz-pfeillink:hover .yz-icon,.yz-zelle:hover .yz-zelle-mehr .yz-icon,.yz-foto:hover img,.yz-foto:focus-within img{transform:none}
  .yz-licht-knopf:active{transform:none}.yz-licht-zurueck:active,.yz-licht-vor:active{transform:translateY(-50%)}
  .yz-knopf,.yz-kopf-tel,.yz-kachel,.yz-leiste a{transition-property:background-color,border-color,color}
  .yz-knopf:active,.yz-kopf-tel:active,.yz-kopf-wa:active,a.yz-kachel:active,.yz-leiste a:active,.yz-chip:active span{transform:none}
  html{scroll-behavior:auto}
}
@media print{.yz-kopf,.yz-leiste,.yz-vorschau{display:none}body{background:none}}