/* Designsystem „Verlegt“, Fassung A6. Vier Farben, eine Schriftfamilie in drei Schnitten, fünf Größen, ein Grundmaß. */
@font-face{font-family:Sofia;src:url("../media/schrift-sofia-400.woff2") format("woff2");font-weight:400;font-stretch:100%;font-display:swap}
@font-face{font-family:Sofia;src:url("../media/schrift-sofia-650.woff2") format("woff2");font-weight:650;font-stretch:100%;font-display:swap}
@font-face{font-family:Sofia;src:url("../media/schrift-sofia-xc-800.woff2") format("woff2");font-weight:800;font-stretch:62.5%;font-display:swap}
/* Die eine Handschrift der Seite: nur das Wort „Unikat.“ in der Hauptüberschrift. Enthält nur diese Buchstaben. */
@font-face{font-family:Handschrift;src:url("../media/schrift-damion-unikat.woff2") format("woff2");font-weight:400;font-display:block}
:root{
  --blau:#14588A;--sand:#D4C9BE;--kalk:#EDE6DB;--neon:#E2F53C;--fugensand:#DEDDD8;
  --u:calc(100vw/8);--fuge:3px;
  --t1:calc(var(--u)*1.44);--t2:calc(var(--u)*.94);--t3:24px;--t4:17px;--t5:14px;
  --kante:max(0px,calc((100vw - 1920px)/2));--rand:calc(var(--kante) + var(--u)*.5);
  --luft:calc(var(--u)*1.5);--titel:calc(var(--u)*.75);
}
@media(min-width:700px){:root{--u:calc(100vw/16);--t1:calc(var(--u)*2.1);--t2:calc(var(--u)*1.2);--t3:26px;--t4:18px;--rand:calc(var(--kante) + var(--u))}}
@media(max-height:500px) and (min-width:700px){:root{--t1:calc(var(--u)*1.3)}}
@media(min-width:1100px){:root{--u:min(calc(100vw/24),80px);--t1:calc(var(--u)*2.5);--t2:calc(var(--u)*1.26);--t3:30px;--t4:19px;--t5:15px;--rand:calc(var(--kante) + var(--u)*2)}}
@media(min-width:1700px){:root{--t3:34px;--t4:21px;--t5:16px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--blau)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--blau);color:var(--kalk);font:400 var(--t4)/1.5 Sofia,system-ui,sans-serif;overflow-x:clip;text-wrap:pretty}
img,video,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
button,textarea{font:inherit}
button,a{touch-action:manipulation}
h1,h2,h3,p,figure,address,ul{margin:0;font-style:normal}
a{color:inherit}
h1,h2{font-weight:800;font-stretch:62.5%;letter-spacing:-.005em;line-height:.98;text-wrap:balance}
.nb{white-space:nowrap}
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
h1{font-size:var(--t1)}
h2{font-size:var(--t2)}
h3{font-size:var(--t3);font-weight:400;line-height:1.25}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.sprung{position:absolute;left:-999px;top:0;z-index:9;background:var(--kalk);color:var(--blau);padding:12px}
.sprung:focus{left:0}

/* Rhythmus: Blau und Sand wechseln sich ab, jeder Abschnitt hat dieselbe Luft und dieselbe Inhaltsbreite. */
.grund-blau{background:var(--blau);color:var(--kalk)}
.grund-sand{background:var(--sand);color:var(--blau)}
.galerie{padding-top:var(--fuge)}
.stimmen{padding-block:var(--luft) calc(var(--u)*.5);overflow-x:clip}
.kopfzeile{padding-inline:var(--rand);margin-bottom:var(--titel)}

/* Der Knopf ist ein Doppelstein: 4 U breit, 1 U hoch. */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-width:min(calc(var(--u)*4),240px);height:min(var(--u),60px);min-height:48px;padding:0 calc(var(--u)*.4);border:0;background:var(--kalk);color:var(--blau);font:650 var(--t4)/1 Sofia,sans-serif;text-decoration:none;cursor:pointer}
.knopf.neon{background:var(--neon)}
.grund-sand .knopf:not(.neon){background:var(--blau);color:var(--kalk)}
/* Der kleine Knopf auf dem Foto: flache blaue Fläche, hebt sich von jedem Bild ab. Aktiv oder unter der Maus: Kalk. */
.flach{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 calc(var(--u)*.3);border:0;background:var(--blau);color:var(--kalk);font:400 var(--t5)/1 Sofia,sans-serif;cursor:pointer}
.flach[aria-pressed=true]{background:var(--kalk);color:var(--blau)}
.knopf:active,.flach:active,#vn-vorschau button:active{opacity:.82}
/* Neon über Blau ergäbe Oliv: Neon-Knöpfe rücken beim Drücken, statt durchzuscheinen */
.knopf.neon:active{opacity:1;transform:translateY(1px)}
@media(hover:hover){.knopf:hover{background:var(--blau);color:var(--kalk);box-shadow:inset 0 0 0 var(--fuge) var(--kalk)}.knopf.neon:hover{background:var(--blau);color:var(--neon);box-shadow:inset 0 0 0 var(--fuge) var(--neon)}.grund-sand .knopf:not(.neon):hover{background:var(--sand);color:var(--blau);box-shadow:inset 0 0 0 var(--fuge) var(--blau)}.flach:hover{background:var(--kalk);color:var(--blau)}.marke:hover,.kopf-tel:hover{text-decoration:underline}}

/* Hero: Foto vollflächig, Titel darauf, gerade Kante. */
.hero{position:relative;height:100svh;min-height:calc(var(--u)*10);overflow:hidden;background:var(--blau)}
.hero picture,.hero-bild{position:absolute;inset:0;width:100%;height:100%}
.hero-bild{object-fit:cover}
.hero .steine{z-index:1}
/* Das ganze Foto gleichmäßig abgedunkelt, neutral und ohne Verlauf. Gemessen an allen sieben Motiven in Hoch- und Querformat. */
.hero-schatten{position:absolute;inset:0;z-index:2;background:rgba(0,0,0,.59)}
.kopf{position:absolute;z-index:3;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u)*.25);padding:calc(var(--u)*.45) var(--rand)}
.marke,.kopf-tel{font-weight:650;text-decoration:none;white-space:nowrap;padding-block:9px;margin-block:-9px}
@media(max-width:319px){.kopf-tel{display:none}}
.hero-text{position:absolute;z-index:3;left:var(--rand);right:var(--rand);bottom:calc(var(--u)*1.25);display:grid;gap:calc(var(--u)*.4)}
.hero h1{color:var(--neon);max-width:9.4em}
/* Wie im Logo: Blockschrift schwer, Handschrift leichter und glatt. Zeilenhöhe 0: die Zeile und der Hero werden nicht höher. Die Schräge lässt die Lücke zu „ein“ größer wirken, darum etwas näher. */
.unikat{font-family:Handschrift,Sofia,sans-serif;font-weight:400;font-stretch:100%;font-size:1.3em;line-height:0;letter-spacing:0;margin-left:-.05em}
.korn-zeile,.korn-paar{display:inline-block}
.korn-paar{white-space:nowrap}
.hero-zeile{font-size:var(--t4);max-width:42em;text-wrap:pretty}
.hero-tun{margin-top:calc(var(--u)*.2)}
@media(min-width:1100px){.hero h1{max-width:none}}

/* Galerie: Fotos im Verband, drei Formate, über die ganze Breite: oben und außen eine Fuge wie zwischen den Bildern. Nur Fotos und Videos.
   Je Baustelle ein Verband aus ganzen Reihen (Antonio 06.11.2026: „von Baustelle zu Baustelle“), dazwischen dieselbe Fuge. */
.bloecke{display:flex;flex-direction:column;gap:var(--fuge)}
.galerie{overflow-anchor:none}
.verband{display:grid;grid-template-columns:1fr 1fr;gap:var(--fuge);margin-inline:var(--fuge)}
/* Hintergrund: ein flacher Stein im Mischton aus Blau und Sand, solange das Foto noch nicht liegt */
.bild{position:relative;overflow:hidden;background:color-mix(in srgb,var(--blau) 20%,var(--sand))}
.bild.g{grid-column:span 2;aspect-ratio:4/3}
.bild.h{aspect-ratio:4/5}
.bild a{position:absolute;inset:0;display:block;cursor:zoom-in}
.bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.bild a:focus-visible{outline-offset:-6px;outline-color:var(--neon)}
@media(min-width:1100px){
  .verband{grid-template-columns:repeat(12,1fr)}
  .bild.dg{grid-column:span 7;aspect-ratio:3/2}
  .bild.dk{grid-column:span 5;aspect-ratio:auto;height:100%}
  .bild.dd{grid-column:span 4;aspect-ratio:4/5}
  .bild.dq{grid-column:span 4;aspect-ratio:3/2}
  .bild.dv{grid-column:span 3;aspect-ratio:4/5}
}
/* Vor „Mehr sehen“ nur die Vorschau (Anfang der Galerie); die übrigen Fotos hängen sich danach nur darunter an */
.js .galerie:not(.offen) .verband.mehr{display:none}
/* Beim Öffnen keine Scroll-Verankerung, sonst hielte der Browser den Abschnitt unter der Galerie fest und spränge mit */
.ohne-anker,.ohne-anker body{overflow-anchor:none}
#mehr{display:none;position:absolute;z-index:2;right:calc(var(--u)*.25);bottom:calc(var(--u)*.25)}
.js #mehr{display:inline-flex}
.spiel{position:absolute;right:calc(var(--u)*.25);bottom:calc(var(--u)*.25);width:60px;height:44px;background:var(--blau);display:grid;place-items:center;z-index:1}
.spiel::after{content:"";width:0;height:0;border-left:12px solid var(--kalk);border-top:7px solid transparent;border-bottom:7px solid transparent}
/* Videos: eigener Abschnitt nach der Galerie (Antonio 09.11.2026: „eine eigene Kategorie Videos“). Drei kleine Kacheln
   in einer Reihe, am Handy im Hochformat der Videos, ab 700 px wie eine Galeriereihe in 4:5. Klick öffnet die Großansicht
   ohne Ton; geladen wird ein Video erst dort. */
.videos{padding-top:var(--luft);padding-bottom:var(--fuge)}
.verband.filme{grid-template-columns:repeat(3,1fr)}
.bild.v{aspect-ratio:9/16}
.bild.v img{object-position:50% 40%}
@media(max-width:699px){.bild.v .spiel{right:8px;bottom:8px;width:44px}}
@media(min-width:700px){.bild.v{aspect-ratio:4/5}}

/* Legen: Stein für Stein, ohne Linien über dem Bild, höchstens 0,6 s je Foto. Danach liegt nur das echte <img> da. */
.steine{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bild.legt img{visibility:hidden}
.st{position:absolute;background-repeat:no-repeat;animation:setzen .2s cubic-bezier(.2,.8,.25,1) both}
@keyframes setzen{0%{opacity:0;transform:translateY(calc(var(--u)*-.1)) scale(1.05)}40%{opacity:1}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.st{animation:none}}

/* Vorher und nachher: die letzte Kachel der Galerie. Je Paar ein Foto, oben der Umschalter Vorher/Nachher auf deckender
   blauer Platte (wie A6), Start auf Nachher, ein Tipp wechselt das Bild, keine Animation. Der Rahmen trägt den Zustand
   (data-zeigt). Am Handy quadratisch, ab 700 px volle Breite und fast Fensterhöhe. Unten die Beispiele direkt auf dem Foto.
   Ohne Skript stehen alle Paare mit beiden Fotos untereinander, jedes mit seiner Marke oben links. */
.vn{background:var(--sand);padding:var(--fuge)}
.vn-rahmen{position:relative}
.vn-paar{display:grid;grid-template-columns:1fr;gap:var(--fuge)}
.vn-paar+.vn-paar{margin-top:var(--fuge)}
.js .vn-paar:not(.an){display:none}
.js .vn-rahmen[data-zeigt=nachher] .vn-vorher,.js .vn-rahmen[data-zeigt=vorher] .vn-nachher{display:none}
.vn-bild{position:relative;overflow:hidden;background:color-mix(in srgb,var(--blau) 20%,var(--sand));aspect-ratio:1/1;max-height:calc(100vh - var(--fuge)*2);max-height:calc(100svh - var(--fuge)*2)}
.vn-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.vn-marke{position:absolute;z-index:1;left:calc(var(--u)*.25);top:calc(var(--u)*.25);display:inline-flex;align-items:center;min-height:44px;padding:0 calc(var(--u)*.3);background:var(--blau);color:var(--kalk);font:400 var(--t5)/1 Sofia,sans-serif}
.js .vn-marke{display:none}
/* Unter den Vorschaubildern der einzige Verlauf der Seite, ganz schwach, damit sie sich vom Foto abheben */
.js .vn-bild::after{content:"";position:absolute;inset:auto 0 0;height:max(150px,calc(var(--u)*2.6));background:linear-gradient(to top,rgba(0,0,0,.34),rgba(0,0,0,.2) 45%,rgba(0,0,0,0));pointer-events:none}
@media(min-width:700px){
  .vn-bild{aspect-ratio:auto;max-height:none;height:min(calc(100vh - var(--fuge)*2),62.5vw);height:min(calc(100svh - var(--fuge)*2),62.5vw)}
}
/* Umschalter: der kleine blaue Fotoknopf (.flach), beide auf einer Platte; gewählt Kalk mit blauer Schrift */
#vn-steuer{display:none;position:absolute;z-index:2;top:calc(var(--u)*.25);left:50%;transform:translateX(-50%);gap:var(--fuge);padding:calc(var(--fuge)*2);background:var(--blau)}
.js #vn-steuer{display:flex}
#vn-steuer .flach{min-width:calc(var(--u)*1.6)}
#vn-steuer :focus-visible{outline:3px solid var(--kalk);outline-offset:2px}
/* Lage des Ausschnitts je Foto: l = waagerecht, o = senkrecht */
.vn-bild .vn-l40{object-position:40% 50%}.vn-bild .vn-l60{object-position:60% 50%}
.vn-bild .vn-o60{object-position:50% 60%}.vn-bild .vn-o65{object-position:50% 65%}.vn-bild .vn-o70{object-position:50% 70%}
#vn-vorschau{display:none;position:absolute;z-index:2;left:0;right:0;bottom:calc(var(--u)*.25);justify-content:center;gap:var(--fuge);pointer-events:none}
.js #vn-vorschau{display:flex}
#vn-vorschau button{position:relative;display:block;width:calc(var(--u)*1.1);min-width:44px;height:max(44px,calc(var(--u)*.72));padding:0;border:0;background:none;cursor:pointer;pointer-events:auto}
#vn-vorschau img{width:100%;height:100%;object-fit:cover;filter:brightness(.74)}
#vn-vorschau button[aria-pressed=true] img{filter:none}
#vn-vorschau button[aria-pressed=true]::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 var(--fuge) var(--kalk)}
@media(hover:hover){#vn-vorschau button:hover img{filter:none}}
#vn-vorschau :focus-visible{outline:3px solid var(--kalk);outline-offset:2px}
@media(min-width:1100px){#vn-vorschau button{width:calc(var(--u)*1.3);height:max(44px,calc(var(--u)*.87))}}

/* Galerie: Lage des Ausschnitts bei Fotos, deren Arbeit unten im Bild liegt */
.bild img.pos-unten{object-position:50% 68%}
.bild img.pos-oben{object-position:50% 28%}

/* Gartenideen: Aufbau und Abstände des Bausteins bleiben, die Eingabezeile wie im Original. Nur Farben, Schrift, gerade Kanten, flache Flächen. */
:where(.garden-ideas,.garden-privacy-dialog) button{border:0;background:none;color:inherit;font:inherit}
.garden-ideas,.garden-privacy-dialog{--t-white:var(--kalk);--t-ink:var(--blau);--t-muted:var(--blau);--t-paper:var(--sand);--t-font:Sofia,system-ui,sans-serif;--t-display:Sofia,system-ui,sans-serif;--gutter:var(--rand);--content:100%;font:400 var(--t4)/1.5 Sofia,system-ui,sans-serif;color:var(--blau)}
.garden-ideas{--garden-action:var(--blau);--garden-ink:var(--blau);--garden-radius:0px;margin-bottom:0;background:var(--sand)}
.garden-ideas .garden-stage{background:var(--blau)}
.garden-ideas *{border-radius:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
.garden-ideas textarea,.garden-ideas input,.garden-ideas button{font-family:Sofia,system-ui,sans-serif}
.garden-ideas :has(>#garden-demo-counter-label){display:none}
.garden-ideas .garden-shade{background:none}
.garden-ideas .garden-image-label,.garden-ideas .garden-image-context{padding:6px 10px;border:0;background:var(--blau);color:var(--kalk);font:400 var(--t5)/1.3 Sofia,sans-serif;text-shadow:none}
.garden-ideas .garden-divider{background:var(--kalk)}
.garden-ideas .garden-divider>span{border:0;background:var(--kalk)}
.garden-stage:has(.garden-slider:focus-visible) .garden-divider>span{outline-color:var(--kalk)}
.garden-ideas .garden-composer,.garden-ideas .garden-composer:focus-within{border:0;background:var(--kalk)}
/* Die Überschrift steht im Kasten über der Eingabe: lesbar auf beiden Seiten des Reglers, das Foto bleibt unberührt. */
.garden-ideas .garden-composer .garden-heading{grid-column:1/-1;margin:0;padding:18px 24px 0;width:auto;pointer-events:none}
.garden-ideas .garden-composer .garden-heading h2,.garden-ideas .garden-stage:has(.garden-result-actions:not([hidden])) .garden-composer .garden-heading h2{text-wrap:pretty;color:var(--blau);font:400 var(--t3)/1.25 Sofia,sans-serif;font-stretch:100%;letter-spacing:0;max-width:none;text-shadow:none}
.garden-ideas .garden-stage:has(.garden-loading:not([hidden])) .garden-heading{visibility:visible}
/* Fokus dezent wie im Baustein: eine feine Linie um den ganzen Kasten, für die Tastatur erkennbar; Knöpfe darin mit schmalem Umriss */
.garden-ideas .garden-editor:has(textarea:focus-visible){outline:1px solid var(--blau);outline-offset:-1px}
.garden-ideas .garden-composer button:focus-visible,.garden-ideas .garden-editor-foot button:focus-visible{outline:2px solid color-mix(in srgb,var(--blau) 55%,var(--kalk));outline-offset:2px}
.garden-ideas .garden-composer textarea{height:64px;min-height:64px;max-height:64px;padding:8px 24px 10px;font-size:var(--t4);line-height:1.4}
.garden-ideas .garden-composer textarea::placeholder{color:var(--blau);opacity:.72}
.garden-ideas .garden-upload,.garden-ideas .garden-photo-change{border-color:transparent;background:none;opacity:1;font-size:var(--t5);font-weight:400}
.garden-ideas .garden-photo-change:hover{background:var(--sand)}
.garden-ideas .garden-photo-placeholder{width:48px;height:48px;border:0;background:var(--sand)}
.garden-ideas .garden-icon-button:hover{background:var(--sand)}
.garden-ideas .garden-generate{min-height:48px;padding-block:0;border:var(--fuge) solid var(--blau);background:var(--blau);color:var(--kalk);font:650 var(--t4)/1.2 Sofia,sans-serif}
.garden-ideas .garden-generate:hover{border-color:var(--blau);background:var(--sand);color:var(--blau)}
.garden-ideas .garden-editor .garden-generate:disabled{border-color:var(--blau);background:var(--blau);color:var(--kalk);opacity:.55}
.garden-ideas .garden-glass-button{border:var(--fuge) solid var(--kalk);background:var(--kalk);color:var(--blau);font:650 var(--t4)/1.2 Sofia,sans-serif}
.garden-ideas .garden-glass-button:hover{background:var(--blau);color:var(--kalk)}
.garden-ideas .garden-inquiry-invitation{text-wrap:pretty;width:fit-content;margin-left:auto;padding:6px 10px;background:var(--blau);color:var(--kalk);font:400 var(--t4)/1.3 Sofia,sans-serif;text-shadow:none}
@media(max-width:700px){.garden-ideas .garden-inquiry-invitation{margin-right:auto}}
.garden-ideas .garden-status,.garden-ideas .garden-error,.garden-ideas .garden-secondary,.garden-ideas .garden-transcription,.garden-ideas .garden-voice-time{font-size:var(--t5);text-shadow:none}
.garden-ideas .garden-refine-toggle{font-size:var(--t4)}
.garden-ideas .garden-loading strong{font-size:var(--t3);font-weight:400}
.garden-privacy-link,.garden-editor-foot button{border:0;background:none;padding:0;color:inherit;text-decoration:underline;cursor:pointer}
.garden-privacy-dialog,.garden-privacy-dialog *{border-radius:0!important;box-shadow:none!important}
.garden-privacy-dialog{background:var(--kalk)}
.garden-privacy-dialog h2{text-wrap:pretty;font-size:var(--t3);font-weight:400;font-stretch:100%;letter-spacing:0;line-height:1.25;max-width:none}
.garden-privacy-dialog h3{font-size:var(--t4);font-weight:400;letter-spacing:0}
.garden-privacy-dialog p,.garden-privacy-dialog .garden-legal-note{font-size:var(--t5)}
.garden-privacy-dialog .garden-delete-session{border:0;background:var(--blau);color:var(--kalk);font:400 var(--t5)/1.3 Sofia,sans-serif;cursor:pointer}
.garden-privacy-dialog .garden-legal-note{border-top:0}
/* Rechner und Tablet: das Foto füllt den ganzen Kasten, die Eingabezeile steht darauf mit Luft zum Rand */
@media(min-width:701px){
  .garden-ideas .garden-overlay{padding-block:calc(var(--u)*.25) calc(var(--u)*.75)}
  .garden-ideas .garden-topline{top:calc(var(--u)*.25)}
  .garden-ideas .garden-editor{padding-top:0}
  /* Rundum dieselbe Innenkante: Überschrift, Eingabe, Symbol, Knopf und Datenschutz liegen 24 px vom Rand des Kastens */
  .garden-ideas .garden-tools{padding:4px 12px 12px 20px}
  .garden-ideas .garden-generate{margin:0 24px 12px 0}
  .garden-ideas .garden-status,.garden-ideas .garden-error{margin:0;padding:8px 24px;border:0;background:var(--kalk);color:var(--blau)}
  .garden-ideas .garden-status:empty{display:none}
  .garden-ideas .garden-result-actions{top:calc(var(--u)*.25 + 44px)}
  .garden-ideas:not(.has-photo) .garden-compare>img{object-position:50% 100%}
  .garden-ideas .garden-editor-foot{margin:0;padding:2px 24px 16px;background:var(--kalk);color:var(--blau);font-size:var(--t5);line-height:1.4;text-shadow:none;pointer-events:auto}
}
/* Handy: das Foto randlos oben, darunter derselbe Kasten bündig angesetzt, keine eigene Überschriftenfläche */
@media(max-width:700px){
  .garden-ideas .garden-stage{padding-block:0;background:var(--kalk);color:var(--blau)}
  .garden-ideas .garden-topline{width:calc(100% - var(--rand)*2)}
  .garden-ideas .garden-composer .garden-heading{grid-area:3/1;width:100%;padding:14px var(--gutter) 0;background:var(--kalk)}
  .garden-ideas .garden-composer,.garden-ideas .garden-composer:focus-within{background:var(--kalk)}
  .garden-ideas .garden-editor:has(textarea:focus-visible){outline:0}
  .garden-ideas .garden-composer textarea{height:78px;min-height:78px;max-height:78px;padding:13px 14px}
  .garden-ideas .garden-input{margin-top:10px;border:1px solid color-mix(in srgb,var(--blau) 35%,var(--kalk));background:var(--kalk)}
  .garden-ideas .garden-input:focus-within{border-color:var(--blau);background:var(--kalk)}
  .garden-ideas:not(.has-photo) .garden-entry-action,.garden-ideas.entry-expanded:not(.has-photo) .garden-entry-action{grid-area:4/1;align-self:auto;align-items:stretch;gap:0;padding:6px var(--gutter) 0;background:var(--kalk)}
  .garden-ideas:not(.has-photo) .garden-entry-hint{margin-bottom:10px;color:var(--blau);font-size:var(--t5);text-align:left;text-shadow:none}
  .garden-ideas:not(.has-photo) .garden-generate,.garden-ideas:not(.has-photo) .garden-generate:hover{background:var(--blau);color:var(--kalk);border-color:var(--blau);font:650 var(--t4)/1.2 Sofia,sans-serif}
  .garden-ideas:not(.has-photo) .garden-divider>span,.garden-ideas.entry-expanded:not(.has-photo) .garden-divider>span{top:50%}
  .garden-ideas .garden-editor-foot{grid-area:8/1;width:100%;margin:0;padding:8px var(--gutter) 14px;background:var(--kalk);color:var(--blau);font-size:var(--t5)}
  .garden-ideas .garden-result-actions{background:none}
  .garden-ideas.result-expanded .garden-result-actions{background:var(--blau)}
}

/* Bewertungen: nur Farben und Schrift am Baustein */
/* Seitenrand der Bewertungen: Hülle um den Baustein (am Baustein selbst nur Farben und Schrift). Der Baustein misst ihren Rand und lässt die Leiste beim Wischen bis an den Fensterrand laufen. */
.stimmen-leiste{padding-inline:var(--rand)}
.stimmen .wb-reviews{--wb-review-bg:var(--kalk);--wb-review-radius:0;--wb-review-rahmen:0;--wb-review-schatten:none;--wb-knopf-radius:0;--wb-knopf-rahmen:0;--wb-review-kopf:var(--t5);--wb-review-name:var(--t5);--wb-review-klein:var(--t5);color:var(--kalk)}
/* Mit Seitenrand passt der Hinweis knapp über 700 px erst bei etwas kleinerer Schrift in eine Zeile. */
@media(min-width:700px) and (max-width:739px){.stimmen .wb-reviews{--wb-review-klein:13px}}
.stimmen .wb-review{color:var(--blau)}.stimmen .wb-review-stars{font-size:var(--t5)}
.stimmen .wb-reviews-nav button{background:var(--kalk);color:var(--blau)}
.stimmen .wb-reviews a{color:var(--kalk)}
@media(hover:hover){.stimmen .wb-reviews-nav button:hover{--wb-knopf-schatten:inset 0 0 0 var(--fuge) var(--kalk);background:var(--blau);color:var(--kalk)}}
.stimmen .wb-review a{color:var(--blau)}
.stimmen .wb-reviews-rating strong{font-weight:400}

/* Über mich und Leistungen: eine Spalte, drei Stufen: Überschrift, Kernsatz, Text. Der Pfad liegt daneben auf der Leinwand. */
.ueber-abschnitt{position:relative;padding-top:var(--luft);padding-bottom:calc(var(--u)*1)}
.ueber-abschnitt>*{position:relative;z-index:1}
.ueber{padding-inline:var(--rand);display:grid;gap:calc(var(--u)*.4)}
.ueber h2{margin-bottom:calc(var(--u)*.35)}
.satz{font-size:var(--t3);line-height:1.25;text-wrap:pretty}
.nur-breit{display:none}
@media(min-width:700px){.nur-breit{display:inline}}
/* Antonios Logo (09.11.2026) unter seiner Unterschrift, das Original unverändert. Die Datei ist quadratisch auf Cremegrund;
   der Kreis schneidet sie knapp außerhalb ihres Rahmens zu, die runde Plakette fluchtet links mit dem Text. */
.ueber .logo{width:min(100%,calc(var(--u)*7));margin-top:calc(var(--u)*.25)}
.ueber .logo img{width:109.04%;max-width:none;height:auto;margin:-4.957% 0 -4.087% -4.522%;clip-path:circle(45.85% at 50% 50.4%)}
@media(min-width:1100px){.ueber .logo{width:calc(var(--u)*6)}}
.leistungen{margin-top:calc(var(--u)*.75);display:grid;gap:calc(var(--u)*.4)}
.leistungen{--sym:28px}
.leistungen ul{list-style:none;padding:0;display:grid;gap:calc(var(--u)*.2)}
.leistungen li{display:grid;grid-template-columns:var(--sym) 1fr;column-gap:14px;align-items:start;line-height:1.4}
.leistungen li span{padding-top:calc((var(--sym) - 1.4em)/2)}
.leistungen svg{display:block;width:var(--sym);height:var(--sym);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.leistungen .fall a{display:inline-block;padding-block:10px;margin-block:-10px}
@media(min-width:1100px){
  .ueber{width:calc(var(--u)*11.5 + var(--rand));padding-right:0}
  .leistungen{--sym:30px}
}

/* Kontakt: gerade Kante, ein Satz, die Nummer, das Formular. */
.kontakt{padding:var(--luft) var(--rand) calc(var(--u)*.5);display:grid;gap:calc(var(--u)*1)}
.kontakt-kopf{display:grid;gap:calc(var(--u)*.5);align-content:start}
.nummer{display:block;padding-block:2px;font-size:var(--t2);font-weight:800;font-stretch:62.5%;line-height:1;color:var(--neon);text-decoration:none;white-space:nowrap}
.kontakt address{display:grid;gap:calc(var(--u)*.2)}
.kontakt address a{padding-block:9px;margin-block:-9px}
.wb-form form{display:grid;gap:calc(var(--u)*.3)}
.wb-form label{display:grid;gap:6px;font-size:var(--t5)}
.wb-form input:not([type=checkbox]),.wb-form textarea{width:100%;min-height:min(var(--u),60px);padding:12px 14px;border:0;border-radius:0;background:var(--kalk);color:var(--blau);font:400 var(--t4)/1.4 Sofia,sans-serif}
.wb-form textarea{min-height:min(calc(var(--u)*3),180px);resize:none}
/* Einwilligung als Fließtext: Text, Link und Punkt bleiben ein Satz, das Kästchen hängt links */
.wb-form .wb-consent{display:block;position:relative;padding-left:34px;line-height:1.4}
.wb-form .wb-consent input[type=checkbox]{position:absolute;left:0;top:-2px}
.wb-form input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:0;background:var(--kalk);cursor:pointer}
.wb-form input[type=checkbox]:checked{box-shadow:inset 0 0 0 5px var(--kalk);background:var(--blau)}
.wb-form [role=status]{font-size:var(--t5)}
.wb-form button[type=submit]{display:inline-flex;align-items:center;justify-content:center;min-width:min(calc(var(--u)*4),240px);height:min(var(--u),60px);min-height:48px;padding:0 calc(var(--u)*.4);border:0;border-radius:0;background:var(--neon);color:var(--blau);font:650 var(--t4)/1 Sofia,sans-serif;cursor:pointer}
.wb-form button[type=submit]:active{transform:translateY(1px)}
@media(hover:hover){.wb-form button[type=submit]:hover{background:var(--blau);color:var(--neon);box-shadow:inset 0 0 0 var(--fuge) var(--neon)}}
@media(min-width:1100px){.kontakt{grid-template-columns:1fr 1fr;column-gap:0}.kontakt-kopf{position:sticky;top:var(--u);align-self:start}}
@media(max-width:699px){.wb-form button[type=submit]{width:100%}}

.fuss{padding:calc(var(--u)*.5) var(--rand) calc(var(--u)*1);display:flex;flex-wrap:wrap;gap:calc(var(--u)*.2) calc(var(--u)*.6);font-size:var(--t5);justify-content:space-between}
.fuss a{color:inherit;display:inline-block;padding-block:12px;margin-block:-12px}
.fuss-recht{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.2) calc(var(--u)*.5)}

/* Großansicht */
#gross{border:0;padding:0;background:var(--blau);color:var(--kalk);max-width:none;max-height:none;width:100%;height:100%}
#gross::backdrop{background:var(--blau)}
.gross-innen{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%}
.gross-bild{position:relative;min-height:0;overflow:hidden}
.gross-bild img{position:absolute;inset:calc(var(--u)*.25);width:calc(100% - var(--u)*.5);height:calc(100% - var(--u)*.5);max-width:none;object-fit:contain}
.gross-bild video{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:100%;max-height:100%}
.gross-bild video::-webkit-media-controls-mute-button,.gross-bild video::-webkit-media-controls-volume-slider,.gross-bild video::-webkit-media-controls-volume-control-container{display:none}
.gross-leiste{display:flex;flex-wrap:wrap;gap:var(--fuge);justify-content:space-between;padding:calc(var(--u)*.25)}
.gross-leiste>div{display:flex;gap:var(--fuge)}
.gross-leiste button.knopf{min-width:min(calc(var(--u)*2),120px)}
@media(min-width:700px){.gross-leiste{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.gross-leiste .zu{justify-self:end}}

/* Bühne im Raster der Seite: gleiche linke Kante, gleiche Überschrift, das Bild läuft bis zum Rand */
.buehne .buehne-innen{padding-inline:var(--rand)}
.buehne .buehne-text{font-size:var(--t2)}
.buehne .buehne-bild{margin-inline:calc(var(--rand)*-1)}
@media(min-width:900px){
  .buehne .buehne-innen{padding-inline:0}
  .buehne .buehne-text{flex:0 0 50%;min-width:0;max-width:none;padding-left:var(--rand)}
  .buehne .buehne-bild,.buehne.buehne--an .buehne-bild{flex:0 0 50%;margin-inline:0}
}

/* Körnung wie ein abgenutzter Stempel: echte Aussparungen in der Schrift, nur auf T1 und T2. Die Maske lässt durch, was dahinter liegt.
   Sie schneidet alles außerhalb der Box ab: Ausgleichsrand hält Umlaute und Unterlängen drin, ohne dass sich der Satz bewegt. Ohne Masken-Unterstützung bleibt der Text voll. */
:root{--k-o:.22em;--k-u:.3em;--k-i:.08em}
.korn-zeile,#buehne-titel,#videos-titel,#stimmen-titel,#ueber-titel,#schluss-titel,#kontakt-titel{-webkit-mask:var(--korn-bild) var(--k-x,0) var(--k-y,0)/var(--korn-b) var(--korn-h) repeat;mask:var(--korn-bild) var(--k-x,0) var(--k-y,0)/var(--korn-b) var(--korn-h) repeat;padding-block:var(--k-o) var(--k-u);margin-block:calc(var(--k-o)*-1) calc(var(--k-u)*-1)}
.korn-zeile,#videos-titel,#stimmen-titel,#ueber-titel,#kontakt-titel{padding-inline:var(--k-i);margin-inline:calc(var(--k-i)*-1)}
/* Je Überschrift ein anderer Ausschnitt der Kachel */
#buehne-titel{--k-x:-1.1em;--k-y:-.7em}#videos-titel{--k-x:-2.9em;--k-y:-1.2em}#stimmen-titel{--k-x:-2.3em;--k-y:-1.9em}#ueber-titel{--k-x:-3.7em;--k-y:-2.6em}#schluss-titel{--k-x:-4.4em;--k-y:-.3em}#kontakt-titel{--k-x:-.6em;--k-y:-3.1em}
#ueber-titel{margin-bottom:calc(var(--u)*.35 - var(--k-u))}

/* Entwurfs-Schalter, kommt nicht auf die echte Seite */
.ohne-buehne #buehne{display:none}

/* Körnung: Kachel 640 x 400 mit echten Löchern (Alpha 0, Hintergrund scheint durch), 5.8 x 3.6 em. Erzeugt von redesign-ideen/05-neustart/a7-korn/a7_korn.py (Dichte 1.5, Seed 7), nicht von Hand ändern.
   Unter 700 px ist die Schrift klein: Kachel 1,8-fach, damit kein Loch unter etwa 1,5 px fällt und die Körnung am Handy so deutlich wirkt wie am Rechner. */
:root{--korn-bild:url("../media/korn-loecher.webp");--korn-b:5.8182em;--korn-h:3.6364em}
@media(max-width:699px){:root{--korn-b:10.4727em;--korn-h:6.5455em}}

/* Bühne: Der Weg setzt sich beim Scrollen aus einzelnen Steinen zusammen. Liest die Tokens der Seite mit Rückfall.
   Ohne Skript und bei prefers-reduced-motion: Text und fertiges Bild, kein Festhalten. buehne.js setzt .buehne--an. */
.buehne{background:var(--blau,#14588A);color:var(--kalk,#EDE6DB)}
.buehne-innen{display:flex;flex-direction:column;gap:20px;padding:24px 16px 0;box-sizing:border-box}
.buehne-text{margin:0;font-family:Sofia,system-ui,sans-serif;font-weight:800;font-stretch:62.5%;font-size:46px;line-height:1.02;letter-spacing:0;color:var(--kalk,#EDE6DB);text-wrap:balance}
.buehne-bild{position:relative;overflow:hidden;margin:0 -16px;aspect-ratio:1024/1160;background:var(--blau,#14588A)}
.buehne-bild img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 100%}
.buehne-bild canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* Festhalten nur mit laufendem Skript: 1,15 Bildschirme, die Hauptwelle läuft, wenn das ganze Bild steht */
.buehne--an{height:215vh;height:215svh}
.buehne--an .buehne-innen{position:sticky;top:0;height:100vh;height:100svh}
.buehne--an .buehne-bild{flex:1 1 0;min-height:0;aspect-ratio:auto}
@media(min-width:900px){
  .buehne-innen{flex-direction:row;align-items:center;gap:0;padding:0 0 0 clamp(32px,5vw,80px)}
  .buehne-text{flex:1 1 34%;font-size:76px;padding-right:clamp(24px,4vw,64px);max-width:9.5em}
  .buehne-bild{flex:0 0 58%;margin:0;align-self:stretch;aspect-ratio:auto;min-height:70vh}
  .buehne--an .buehne-bild{flex:0 0 58%;height:100%}
}
@media(prefers-reduced-motion:reduce){
  .buehne--an{height:auto}
  .buehne--an .buehne-innen{position:static;height:auto}
}

/* Schluss: Leitspruch an der Rosette, der Pfad mündet hinein, der Knopf ist der letzte Stein. */
.schluss{margin-top:var(--luft)}
.schluss h2{padding-inline:var(--rand)}
/* Am Handy so lang, dass der Aufbau genug Scrollweg hat: Weg und Rosette zusammen mindestens 1,4 Bildschirme */
.pfad-band{height:calc(var(--u)*8);height:max(calc(var(--u)*8),calc(140svh - min(100vw - var(--u)*.5,var(--u)*10)));margin-top:calc(var(--u)*.6)}
.ohne-pfad .pfad-band,html:not(.js) .pfad-band{display:none}
.schluss-flaeche{position:relative;width:calc(100% - var(--u)*.5);max-width:calc(var(--u)*10);aspect-ratio:1;margin-inline:auto}
.ohne-pfad .schluss-flaeche,html:not(.js) .schluss-flaeche{margin-top:calc(var(--u)*.6)}
.schluss-flaeche noscript img{position:absolute;inset:0;width:100%;height:100%}
/* Die eine Ausnahme von den eckigen Knöpfen: rund, konzentrisch zu den Ringen, wie der Deckel in seiner Rosette. Erscheint mit der fertigen Rosette (--auf), ohne Skript immer da. */
.letzter-stein{position:absolute;left:50%;top:50%;z-index:2;width:calc(var(--u)*3);height:calc(var(--u)*3);min-width:48px;padding:0;border-radius:50%;flex-direction:column;text-align:center;white-space:normal;hyphens:none;font-size:calc(var(--u)*.5);line-height:1.06;translate:-50% -50%;scale:var(--auf,1);transition:background-color .15s,color .15s,transform .18s cubic-bezier(.2,.8,.25,1)}
.letzter-stein.zu{pointer-events:none}
@media(hover:hover){.knopf.neon.letzter-stein:hover{transform:scale(1.04)}}
.knopf.neon.letzter-stein:active{background:var(--neon);color:var(--blau);box-shadow:none;transform:scale(.95)}
.letzter-stein:focus-visible{outline:4px solid var(--neon);outline-offset:3px}
/* Sobald die Rosette fertig ist: Der letzte Stein setzt sich. Sagt auch ohne Maus, dass er zu drücken ist. */
@keyframes setzt-sich{0%,100%{transform:scale(1)}35%{transform:scale(1.06)}70%{transform:scale(.985)}}
.letzter-stein.setzt-sich{animation:setzt-sich .9s cubic-bezier(.3,.7,.3,1) 1}
@media(prefers-reduced-motion:reduce){.letzter-stein{transition:none}.letzter-stein.setzt-sich{animation:none}.knopf.neon.letzter-stein:active,.knopf.neon.letzter-stein:hover{transform:none}}
@media(min-width:1100px){
  .schluss{display:grid;grid-template-columns:1fr calc(var(--u)*10 + var(--rand));align-items:center;margin-top:calc(var(--u)*.5)}
  .schluss h2{padding-inline:var(--rand) 0}
  .pfad-band{display:none}
  .schluss-flaeche{width:calc(var(--u)*10);max-width:none;margin:0}
  }
.ueber-abschnitt>#pfad{position:absolute;z-index:0;pointer-events:none;max-width:none}

.wbu-6c19d68d41{object-position:50% 70% !important}
.wbu-94ab6b2be5{object-position:45% 60% !important}
.wbu-b01dc9d3ee{object-position:50% 50% !important}
.wbu-b82711be60{object-position:50% 62% !important}
.wbu-c990b523c5{object-position:50% 40% !important}
.wbu-e2ced605c4{object-position:60% 50% !important}
/* Kahle blaue Flächen am Rechner (Antonio 09.11.2026: „fettes blaues Kästchen … zu trist“, „für diese kahlen Stellen“;
   Tom 09.11.2026: ein Pflastermuster, das sich um den Text herum leicht ausblendet, nicht animiert). Bogenpflaster Ton in
   Ton im Blau, nahtlose Kachel 616 x 426 aus skripte/pflastermuster.py. Die Maske blendet es zum Text hin aus; das Blau
   selbst bleibt flach, kein Farbverlauf, keine Bewegung. Am Handy gibt es diese Flächen nicht. */
:root{--pflaster:url("../media/pflaster-blau.webp") 0 0/616px 426px repeat}
@media(min-width:900px){
  .buehne-innen{position:relative}
  .buehne-innen::before{content:"";position:absolute;inset:0 50% 0 0;background:var(--pflaster);pointer-events:none;
    -webkit-mask-image:radial-gradient(ellipse 64% 46% at 54% 50%,transparent 42%,#000 100%);mask-image:radial-gradient(ellipse 64% 46% at 54% 50%,transparent 42%,#000 100%)}
  .buehne .buehne-text{position:relative;z-index:1}
}
/* Kontakt: die leere Spalte unter der Anschrift. Der Kopf steht oben fest, das Pflaster füllt den Rest der Spalte bis zum
   Fuß und blendet zur Anschrift, zum Formular und zum Fuß hin aus. */
@media(min-width:1100px){
  .kontakt-kopf{position:relative;top:auto;align-self:stretch;grid-template-rows:auto auto auto 1fr}
  .kontakt-kopf::after{content:"";min-height:calc(var(--u)*3);margin:calc(var(--u)*-.2) 0 calc(var(--u)*-.5) calc(var(--rand)*-1);background:var(--pflaster);pointer-events:none;
    -webkit-mask-image:radial-gradient(ellipse 72% 52% at 34% 52%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 72% 52% at 34% 52%,#000 40%,transparent 100%)}
}

/* wb-reviews:start v9 */
/* Google-Bewertungen (zentraler Baustein, KB.30), Toms Vorgaben vom 20. und 30.10.2026: Note und „Google Maps“
   in einer Zeile, Karten als Wischleiste, Kartenkopf mit Name links und Sternen rechts, lange Texte bis zu
   einer festen Höhe, darunter allein ein Chevron, Anzahl und Zeitraum unten beim Hinweis. Der Aufbau steht
   nur hier (Raster, order): Das HTML aus render() setzt der Host auch in ältere Fassungen ein, die ihr altes
   CSS behalten. Gewicht einer Klasse: schlägt Grundregeln wie p{margin:0}, jede Seitenregel mit Abschnitt
   davor (#stimmen .wb-review, .wb-reviews .wb-review) schlägt den Baustein. Stellschrauben: --wb-review-bg
   (Kartenhintergrund), --wb-mehr-zeilen (Höhe in Zeilen); seit v9 (A6, 02.11.2026) Ecken, Rahmen und Schatten der
   Karte (--wb-review-radius 4px, --wb-review-rahmen, --wb-review-schatten), der Knöpfe (--wb-knopf-radius 50%,
   --wb-knopf-rahmen, --wb-knopf-schatten) und die Schriftstufen (--wb-review-kopf Note und Quelle, --wb-review-name,
   --wb-review-klein Hinweis und Anzahl). Ohne Wert steht alles wie in v8. Rahmen, Schatten und Kopf hängen an
   :where() (Gewicht null): ungesetzt gelten wie bisher die Grundregeln der Seite. */
.wb-reviews{--wb-mehr-zeilen:7;display:flex;flex-wrap:wrap;align-items:center;column-gap:.45em}
/* Ohne Zitate (FB22 #319): Baustein und Seitenabschnitt um ihn weg, auch gegen eigenes display der
   Seite. Den Abschnitt markiert die Montage (website_reviews.inject) mit hidden und data-wb-leer. */
.wb-reviews[hidden],[data-wb-leer]{display:none!important}
.wb-reviews>*{flex:0 0 100%;min-width:0;margin:0}
.wb-reviews-rating,.wb-reviews-source{flex:0 0 auto}
.wb-reviews-rating+.wb-reviews-source::before{content:"·";margin-right:.45em}
/* Anzahl und Zeitraum zur Note (BGH I ZR 143/23, Tom 21.10.2026) stehen seit 30.10.2026 unten beim Hinweis, gleich
   groß und in dessen Zeile, solange beide hineinpassen; sonst darunter. Im HTML bleiben sie direkt hinter der Note.
   max-width hart: Seitenregeln wie p{max-width:62ch} (Morina) oder #stimmen p{…} brächen den Hinweis sonst um,
   Toms Vorgabe für alle Seiten ist ab Tablet eine Zeile (#685). Wird die Spalte zu schmal, meldet es der Befund. */
.wb-reviews-notice,.wb-reviews-basis{flex:0 1 auto;align-self:flex-end;max-width:none!important;font-size:var(--wb-review-klein,.75rem);
  line-height:1.5;opacity:.7}
/* pretty statt balance (Tom 01.11.2026): balance machte die Zeilen am Handy künstlich gleich lang und brach zu früh um;
   pretty füllt die Zeile und lässt trotzdem kein Wort allein in der letzten. */
.wb-reviews-notice{order:1;margin-top:16px;text-wrap:pretty}
/* Auch die Zeile mit Anzahl und Zeitraum nie balance (A6, 02.11.2026): sonst griffe dort eine Grundregel der Seite für p mit balance. */
.wb-reviews-basis{order:2;text-wrap:pretty}
.wb-reviews a{color:inherit;overflow-wrap:anywhere}
.wb-reviews-source a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.wb-reviews cite{font-style:normal}
/* Nur waagrecht scrollbar (FB24 #462): baut eine Seite die Karte um und ragt etwa die 44-px-Tippfläche des
   Chevrons unter die Karte, wurde die Leiste sonst senkrecht scrollbar und wackelte am Handy. Der Puffer
   unten (16 px, Rand −12 px) hält den Überstand sichtbar; die Lage bleibt wie vorher (4 px). */
.wb-reviews-quotes{display:flex;gap:16px;margin-top:20px;padding-bottom:16px;margin-bottom:-12px;overflow-x:auto;
  overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.wb-reviews-quotes::-webkit-scrollbar{display:none}
/* Kopf eine Zeile (Tom 30.10.2026): Name links, Sterne rechts; ein langer Name bricht um und lässt den Sternen
   ihren Platz. Die mittlere Reihe nimmt die Höhe auf, darum steht der Chevron gleich hoher Karten auf einer Linie. */
.wb-review{flex:0 0 86%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto 1fr auto;grid-template-areas:"name sterne" "text text" "mehr mehr";column-gap:12px;
  scroll-snap-align:start;padding:22px 22px 20px;border-radius:var(--wb-review-radius,4px);
  background:var(--wb-review-bg,color-mix(in srgb,currentColor 5%,transparent))}
:where(.wb-review){border:var(--wb-review-rahmen);box-shadow:var(--wb-review-schatten)}
.wb-review:only-child{flex-basis:100%}
.wb-review-author{grid-area:name;align-self:baseline;min-width:0;margin:0;font-size:var(--wb-review-name,.875em);opacity:.75;overflow-wrap:anywhere}
.wb-review-author a{text-decoration:none}
.wb-review-author a:hover{text-decoration:underline}
.wb-review-stars{grid-area:sterne;align-self:baseline;justify-self:end;margin:0 -.14em 0 0;letter-spacing:.14em;line-height:1;white-space:nowrap}
.wb-review blockquote{grid-area:text;align-self:start;min-width:0;margin:12px 0 0;max-width:none}
.wb-reviews-links{order:3;margin-top:8px;font-size:.875em}
.wb-review-mehr{grid-area:mehr;justify-self:center;display:grid;place-items:center;width:44px;height:44px;margin:-8px 0 -18px;
  padding:0;border:0;border-radius:var(--wb-knopf-radius,50%);background:none;color:inherit;cursor:pointer}
.wb-review-mehr svg{display:block;transition:transform .3s cubic-bezier(.3,.7,.2,1)}
.wb-review-mehr[aria-expanded="true"] svg{transform:rotate(180deg)}
.wb-reviews-nav{display:none;flex:0 0 auto;gap:8px;margin-left:auto}
.wb-reviews-nav button{display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:var(--wb-knopf-rahmen,1px solid color-mix(in srgb,currentColor 30%,transparent));border-radius:var(--wb-knopf-radius,50%);
  background:none;color:inherit;cursor:pointer}
:where(.wb-reviews-nav button){box-shadow:var(--wb-knopf-schatten)}
:where(.wb-reviews-rating,.wb-reviews-source){font-size:var(--wb-review-kopf)}
/* Note und „Google Maps“ in einer Zeile auch am Handy (Tom 20.10.2026; mit der Anzahl brach die Kopfzeile bei
   390 px um, seit 21.10. steht sie in der eigenen Zeile darunter): die Kopfzeile dort etwas kleiner. */
@media (max-width:479px){.wb-reviews-rating,.wb-reviews-source{font-size:var(--wb-review-kopf,.8125em)}.wb-reviews{column-gap:.35em}}
@media (min-width:700px){
  .wb-reviews-quotes{gap:20px}
  .wb-review{flex-basis:340px}
  .wb-reviews-nav:not([hidden]){display:flex}
}

/* Zustände aus website_reviews_runtime.js */
.wb-reviews-quotes.wb-mehr-an{align-items:flex-start}
.wb-review-text.is-lang{max-height:var(--wb-mehr-hoehe);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 3em),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 3em),transparent)}
.wb-review-text.is-lang.is-offen{max-height:none;-webkit-mask-image:none;mask-image:none}
.wb-review-text.is-fahrt{transition:max-height .45s cubic-bezier(.3,.7,.2,1)}
.wb-review-mehr[hidden],.wb-reviews-nav[hidden]{display:none}
.wb-review-mehr:focus-visible,.wb-reviews-nav button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.wb-reviews-notice.is-einzeilig{white-space:nowrap}
/* Leiste bis an den Fensterrand: die Ränder misst das Skript (Scrollleiste, beliebiger Seitenrand). */
.wb-reviews-quotes.wb-leiste{box-sizing:border-box;flex-basis:calc(100% + var(--wb-rand-l,0px) + var(--wb-rand-r,0px));
  margin-inline:calc(var(--wb-rand-l,0px) * -1) calc(var(--wb-rand-r,0px) * -1);
  padding-inline:var(--wb-rand-l,0px) var(--wb-rand-r,0px);scroll-padding-inline:var(--wb-rand-l,0px) var(--wb-rand-r,0px)}
.wb-reviews-quotes.wb-schleife{cursor:grab}
.wb-reviews-quotes.wb-zieht{cursor:grabbing;scroll-snap-type:none;user-select:none}
.wb-reviews-quotes.wb-schleife:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.wb-review-text.is-fahrt,.wb-review-mehr svg{transition:none}}
/* wb-reviews:end */