/* KreativBlick – erzeugt von _generator/final/final.js. Nicht von Hand bearbeiten. */
/* latin */
@font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(schrift/Jura-5.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(schrift/Mulish-10.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(schrift/Mulish-9.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;
}
/* KreativBlick – gemeinsame Basis aller Entwuerfe.
   Jeder Stil setzt die Variablen in :root und ueberschreibt, was er anders will.
   Mobil zuerst geschrieben; Umbruch bei 1080 px (Menue, Kontaktleiste). */

:root{
  --bg:#fff; --bg2:#f4f3f0; --fg:#1d1c1a; --muted:#5f5b55; --line:#dedbd5;
  --accent:#1d1c1a; --accent-fg:#fff; --surface:#fff;
  --fd: Georgia, serif; --fb: system-ui, sans-serif;
  --h-weight:400; --h-case:none; --h-track:0; --h-lh:1.08;
  --k-font:var(--fb); --k-size:12px; --k-track:.18em; --k-weight:500;
  --radius:0px; --btn-radius:0px; --btn-case:uppercase; --btn-track:.12em; --btn-size:13px; --btn-weight:500;
  --w:1240px; --gut:clamp(18px,4.5vw,56px); --sec:clamp(72px,10vw,140px);
  --ease:cubic-bezier(.2,.7,.2,1); --kopf-h:72px; --leiste-h:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 clamp(1rem,1.05vw + 0.6875rem,1.0938rem)/1.7 var(--fb);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;padding-bottom:var(--leiste-h)}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--fd);font-weight:var(--h-weight);text-transform:var(--h-case);letter-spacing:var(--h-track);
  line-height:var(--h-lh);margin:0;text-wrap:balance}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
h1,h2,h3,blockquote p,.kachel span,.panel__text b{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
ul,ol{margin:0;padding:0;list-style:none}
figure,blockquote,dl,dd{margin:0}
:focus-visible{outline:2px solid var(--fokus,var(--accent));outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-fg)}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:12px;z-index:200;background:var(--fg);color:var(--bg);padding:12px 18px;text-decoration:none;transform:translateY(calc(-100% - 24px));transition:transform .2s}
.skip:focus{transform:none}

.w{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
.w--schmal{max-width:820px}
.abschnitt{padding-block:var(--sec)}
.abschnitt--eng{padding-block:calc(var(--sec)*.6)}
.abschnitt--flaeche{background:var(--bg2)}

.kicker{display:inline-block;font:var(--k-weight) var(--k-size)/1.3 var(--k-font);letter-spacing:var(--k-track);text-transform:uppercase;color:var(--kicker,var(--muted));margin-bottom:18px}
.kopfzeile{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.kopfzeile--mitte{margin-inline:auto;text-align:center}
.kopfzeile h2,.h2{font-size:clamp(32px,4.2vw,58px)}
.kopfzeile .lead,.lead{color:var(--muted);font-size:clamp(1.0625rem,1.2vw + 0.625rem,1.2188rem);margin-top:20px;max-width:62ch}
.kopfzeile--mitte .lead{margin-inline:auto}

/* ---------- Knoepfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:14px 26px;
  background:var(--accent);color:var(--accent-fg);border:1px solid var(--accent);border-radius:var(--btn-radius);
  font:var(--btn-weight) var(--btn-size)/1 var(--fb);letter-spacing:var(--btn-track);text-transform:var(--btn-case);
  text-decoration:none;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s,transform .12s}
.knopf:hover{background:transparent;color:var(--accent)}
.knopf:active{transform:translateY(1px)}
.knopf svg{width:18px;height:18px;flex:none}
.knopf--zweit{background:transparent;color:var(--fg);border-color:var(--knopf-linie,var(--line))}
.knopf--zweit:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.knopf--hell{background:#fff;color:#141414;border-color:#fff}
.knopf--hell:hover{background:transparent;color:#fff}
.knopf--rahmen-hell{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.knopf--rahmen-hell:hover{background:#fff;color:#141414;border-color:#fff}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.textlink{display:inline-flex;align-items:center;gap:10px;font:var(--btn-weight) var(--btn-size)/1.2 var(--fb);letter-spacing:var(--btn-track);
  text-transform:var(--btn-case);text-decoration:none;color:var(--textlink,var(--fg));padding-block:6px;border-bottom:1px solid currentColor}
.textlink svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.textlink:hover svg{transform:translateX(4px)}

/* ---------- Bilder ---------- */
.bild{position:relative;overflow:hidden;background:var(--bg2)}
.bild img{width:100%;height:100%;object-fit:cover}
.bild--hoch{aspect-ratio:4/5}.bild--quer{aspect-ratio:3/2}.bild--quadrat{aspect-ratio:1}.bild--schmal{aspect-ratio:2/3}
a .bild img,.bild--zoom img{transition:transform 1.2s var(--ease)}
a:hover .bild img,.bild--zoom:hover img{transform:scale(1.04)}

/* ---------- Karten Leistungen ---------- */
.karten{display:grid;gap:clamp(18px,2.4vw,32px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.karte{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--surface);border-radius:var(--radius);overflow:hidden;height:100%}
.karte .bild{aspect-ratio:4/5;border-radius:var(--radius) var(--radius) 0 0}
.karte__text{padding:22px 4px 6px;display:flex;flex-direction:column;gap:8px;flex:1}
.karte h3{font-size:clamp(1.375rem,1.6vw + 0.625rem,28px)}
.karte p{color:var(--muted);font-size:.95em;margin:0}
.karte__preis{margin-top:auto;padding-top:12px;font:var(--k-weight) 0.8125rem/1.2 var(--k-font);letter-spacing:.08em;text-transform:uppercase;color:var(--preis,var(--fg))}

/* ---------- Leistung im Detail ---------- */
.leistung{display:grid;gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(48px,7vw,96px);border-top:1px solid var(--line)}
.leistung:first-of-type{border-top:0}
.leistung__bilder{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;align-items:end}
.leistung__bilder .bild:first-child{aspect-ratio:4/5}.leistung__bilder .bild:nth-child(2){aspect-ratio:3/4}
.leistung h2{font-size:clamp(30px,3.6vw,50px);margin-bottom:22px}
.leistung__text p{color:var(--muted)}
.liste-haken{display:grid;gap:10px;margin:26px 0}
.liste-haken li{display:flex;gap:12px;align-items:flex-start}
.liste-haken svg{width:18px;height:18px;flex:none;margin-top:.3em;color:var(--haken,var(--accent))}
.preisschild{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line);margin-top:28px}
.preisschild b{font-family:var(--fd);font-weight:var(--h-weight);font-size:clamp(1.625rem,2.4vw,34px)}
.preisschild span{color:var(--muted);font-size:0.875rem}
@media (min-width:900px){
  .leistung{grid-template-columns:1fr 1fr}
  .leistung:nth-of-type(even) .leistung__bilder{order:2}
}

/* ---------- Preise ---------- */
.preise{display:grid;border-top:1px solid var(--line)}
.preise__zeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:18px 0;border-bottom:1px solid var(--line)}
.preise__zeile dt{min-width:0;overflow-wrap:break-word}
.preise__zeile dt{flex:0 1 auto}
.preise__zeile::after{content:"";order:1;flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.preise__zeile dd{order:2;flex:none;font-family:var(--fd);font-weight:var(--h-weight);font-size:1.15em;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Ablauf ---------- */
.schritte{display:grid;gap:clamp(28px,3vw,40px);counter-reset:s}
.schritt{position:relative;padding-top:22px;border-top:1px solid var(--line)}
.schritt__nr{display:block;font:400 clamp(40px,4vw,56px)/1 var(--fd);color:var(--nr,var(--accent));margin-bottom:16px;font-variant-numeric:tabular-nums}
.schritt h3{font-size:clamp(1.375rem,1.6vw + 0.625rem,27px);margin-bottom:10px}
.schritt p{color:var(--muted);font-size:.96em}
@media (min-width:720px){.schritte{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.schritte{grid-template-columns:repeat(4,1fr)}}

/* ---------- Stimmen ---------- */
.stimme{display:flex;flex-direction:column;gap:18px;height:100%}
.stimme blockquote p{font-family:var(--zitat-font,var(--fd));font-size:var(--zitat-size,clamp(1.1875rem,1.3vw + 0.625rem,1.4375rem));line-height:1.5;margin:0}
.stimme figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:auto;font-size:0.875rem;color:var(--muted)}
.stimme figcaption b{color:var(--fg);font-weight:600}
.sterne{display:inline-flex;gap:2px;color:var(--stern,var(--accent))}
.sterne svg{width:14px;height:14px}
.stimmen-raster{columns:1;column-gap:clamp(18px,2.4vw,32px)}
.stimmen-raster .stimme{break-inside:avoid;margin-bottom:clamp(18px,2.4vw,32px);padding:clamp(24px,2.6vw,34px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);height:auto}
.stimmen-raster .stimme blockquote p{font-size:var(--zitat-klein,1.0625rem);font-family:var(--fb)}
@media (min-width:720px){.stimmen-raster{columns:2}}
@media (min-width:1100px){.stimmen-raster{columns:3}}

/* ---------- Karussell ---------- */
.karussell{position:relative}
.karussell__spur{display:grid;grid-auto-flow:column;grid-auto-columns:min(86%,420px);gap:clamp(16px,2vw,28px);overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;overscroll-behavior-x:contain}
.karussell__spur::-webkit-scrollbar{display:none}
.karussell__spur>*{scroll-snap-align:start}
.karussell__nav{display:flex;gap:10px;margin-top:28px;align-items:center}
.karussell__nav button{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line);background:transparent;border-radius:var(--btn-radius);cursor:pointer;transition:background .2s,color .2s}
.karussell__nav button:hover{background:var(--fg);color:var(--bg)}
.karussell__nav svg{width:18px;height:18px}
.karussell__nav button[data-zurueck] svg{transform:scaleX(-1)}

/* ---------- Galerie ---------- */
.filter{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut)*-1) clamp(24px,3vw,40px);padding-inline:var(--gut)}
.filter::-webkit-scrollbar{display:none}
.filter button{flex:none;min-height:44px;padding:10px 18px;border:1px solid var(--line);background:transparent;border-radius:var(--btn-radius);cursor:pointer;
  font:var(--btn-weight) 0.7813rem/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.filter button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.galerie{columns:2;column-gap:clamp(8px,1vw,14px)}
.galerie__bild{display:block;break-inside:avoid;margin-bottom:clamp(8px,1vw,14px);position:relative;overflow:hidden;background:var(--bg2);border-radius:var(--radius)}
.galerie__bild img{width:100%;height:auto;transition:transform 1s var(--ease),opacity .6s}
.galerie__bild:hover img{transform:scale(1.03)}
.galerie__bild[hidden]{display:none}
@media (min-width:760px){.galerie{columns:3}}
@media (min-width:1200px){.galerie--weit{columns:4}}

.lightbox{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(8,8,8,.96);color:#fff}
.lightbox::backdrop{background:rgba(8,8,8,.96)}
.lightbox[open]{display:grid;grid-template-rows:1fr auto;place-items:center}
.lightbox img{max-width:min(94vw,1400px);max-height:calc(100dvh - 120px);width:auto;height:auto;object-fit:contain}
.lightbox__leiste{display:flex;gap:10px;align-items:center;padding:14px 16px 22px}
.lightbox button{width:50px;height:50px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer;border-radius:50%}
.lightbox button:hover{background:#fff;color:#111}
.lightbox button svg{width:18px;height:18px}
.lightbox [data-lb-zurueck] svg{transform:scaleX(-1)}
.lightbox__zahl{font:500 0.8125rem/1 var(--fb);letter-spacing:.12em;min-width:70px;text-align:center;opacity:.75}

/* ---------- Termine ---------- */
.termine{display:grid;gap:clamp(20px,2.4vw,32px)}
.termin{display:grid;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.termin .bild{aspect-ratio:16/10}
.termin__text{padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:12px}
.termin__art{font:var(--k-weight) 0.7188rem/1 var(--k-font);letter-spacing:var(--k-track);text-transform:uppercase;color:var(--kicker,var(--muted))}
.termin h3{font-size:clamp(1.5rem,2vw + 0.5rem,32px)}
.termin__daten{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0}
.termin__daten time{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);line-height:1.1}
.termin__daten time b{font-family:var(--fd);font-weight:var(--h-weight);font-size:1.5rem}
.termin__daten time span{font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.termin__meta{display:grid;gap:6px;font-size:0.9063rem;color:var(--muted)}
.termin__meta span{display:flex;gap:10px;align-items:center}
.termin__meta svg{width:16px;height:16px;flex:none}
.termin p{color:var(--muted);margin:0}
.termin .knoepfe{margin-top:auto;padding-top:10px}
@media (min-width:900px){.termin{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.termin .bild{aspect-ratio:auto;height:100%;min-height:340px}}

/* ---------- Kontakt ---------- */
.kontakt-raster{display:grid;gap:clamp(36px,5vw,80px)}
.kontakt-raster>*,.shop>*,.leistung>*{min-width:0}
@media (min-width:980px){.kontakt-raster{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr)}}
.form{display:grid;gap:18px}
.form__reihe{display:grid;gap:18px}
@media (min-width:640px){.form__reihe{grid-template-columns:1fr 1fr}}
.feld{display:grid;gap:8px}
.feld label{font:500 0.8125rem/1.3 var(--fb);letter-spacing:.04em;color:var(--fg)}
.feld input,.feld select,.feld textarea{width:100%;min-height:52px;padding:13px 15px;background:var(--feld-bg,transparent);border:1px solid var(--feld-linie,var(--line));
  border-radius:var(--radius);font-size:1rem;transition:border-color .2s,background .2s;appearance:none}
.feld select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.feld textarea{min-height:150px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--fg)}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{outline:2px solid var(--fokus,var(--accent));outline-offset:1px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:0.875rem;color:var(--muted)}
.check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.check a{color:var(--fg)}
.formhinweis{padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--accent);font-size:0.9375rem}
.formhinweis:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.wege{display:grid;gap:0;border-top:1px solid var(--line)}
.weg{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none}
.weg__icon{width:46px;height:46px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--weg-radius,50%);transition:background .2s,color .2s}
.weg__icon svg{width:19px;height:19px}
.weg:hover .weg__icon{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.weg small{display:block;font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.weg b{font-weight:500;word-break:break-word}

.orte{display:grid;gap:clamp(18px,2.4vw,32px)}
@media (min-width:760px){.orte{grid-template-columns:repeat(3,1fr)}}
.ort{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--line)}
.ort h3{font-size:clamp(1.3125rem,1.4vw + 0.625rem,1.625rem)}
.ort address{font-style:normal;font-weight:500}
.ort p{color:var(--muted);font-size:.95em}

/* ---------- Gutschein ---------- */
.shop{display:grid;gap:clamp(32px,5vw,72px);align-items:start}
@media (min-width:940px){.shop{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.betraege{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;border:0;padding:0;margin:0}
.betraege legend,.shop__label{font:500 0.8125rem/1.3 var(--fb);letter-spacing:.04em;margin-bottom:12px;padding:0}
.betrag{position:relative}
.betrag input{position:absolute;opacity:0;inset:0;cursor:pointer}
.betrag span{display:grid;place-items:center;min-height:62px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--fd);font-size:1.375rem;transition:background .2s,color .2s,border-color .2s}
.betrag input:checked+span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.betrag input:focus-visible+span{outline:2px solid var(--fokus,var(--accent));outline-offset:2px}
.menge{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius)}
.menge button{width:48px;height:48px;border:0;background:transparent;cursor:pointer;font-size:1.25rem}
.menge input{width:56px;height:48px;border:0;text-align:center;background:transparent;font-size:1rem;-moz-appearance:textfield}
.menge input::-webkit-inner-spin-button{-webkit-appearance:none}
.summe{display:flex;justify-content:space-between;align-items:baseline;padding:20px 0;border-block:1px solid var(--line);margin:26px 0}
.summe b{font-family:var(--fd);font-size:clamp(28px,3vw,38px);font-weight:var(--h-weight);font-variant-numeric:tabular-nums}
.shop__optionen{display:grid;gap:22px}

/* ---------- Rechtstext ---------- */
.recht h2{font-size:clamp(1.25rem,1.4vw + 0.625rem,1.5rem);margin:44px 0 12px;font-family:var(--recht-font,var(--fd))}
.recht h2:first-child{margin-top:0}
.recht p{color:var(--muted)}
.recht a{color:var(--fg)}

/* ---------- Kontaktleiste Telefon ---------- */
.mleiste{position:fixed;inset:auto 0 0 0;z-index:90;display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:1px;
  background:var(--mleiste-linie,var(--line));padding-bottom:env(safe-area-inset-bottom);transform:translateY(0);transition:transform .35s var(--ease)}
.mleiste a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;background:var(--mleiste-bg,var(--bg));color:var(--mleiste-fg,var(--fg));
  text-decoration:none;font:600 0.8125rem/1 var(--fb);letter-spacing:.04em}
.mleiste a svg{width:19px;height:19px}
.mleiste a.mleiste__haupt{background:var(--accent);color:var(--accent-fg)}
html.menue-offen .mleiste{transform:translateY(110%)}
@media (max-width:1079px){:root{--leiste-h:58px}}
@media (min-width:1080px){.mleiste{display:none}}

/* ---------- Menue (Grundmechanik, Optik im Stil) ---------- */
.menueknopf{display:inline-grid;place-items:center;width:48px;height:48px;border:0;background:transparent;cursor:pointer;color:inherit;margin-right:-10px;position:relative;z-index:85}
/* backdrop-filter und transform machen die Kopfzeile zum Bezugsrahmen fuer
   position:fixed – das Vollbildmenue wuerde sonst in der Kopfzeile kleben. */
html.menue-offen .kopf{color:var(--menue-fg,var(--fg))!important;transform:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.menue-offen .kopf .logo,html.menue-offen .kopf .marke{position:relative;z-index:85}
.menueknopf svg{width:26px;height:26px}
.menueknopf .zu{display:none}
html.menue-offen .menueknopf .auf{display:none}
html.menue-offen .menueknopf .zu{display:block}
@media (max-width:1079px){
  .menue{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:calc(var(--kopf-h) + 20px) var(--gut) 40px;
    background:var(--menue-bg,var(--bg));color:var(--menue-fg,var(--fg));opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s;overflow-y:auto}
  html.menue-offen .menue{opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s}
  html.menue-offen{overflow:hidden}
  .menue a{font-family:var(--fd);font-size:clamp(30px,8vw,44px);line-height:1.25;text-decoration:none;padding:6px 0;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  html.menue-offen .menue a{opacity:1;transform:none}
  html.menue-offen .menue a:nth-child(2){transition-delay:.04s}html.menue-offen .menue a:nth-child(3){transition-delay:.08s}
  html.menue-offen .menue a:nth-child(4){transition-delay:.12s}html.menue-offen .menue a:nth-child(5){transition-delay:.16s}
  html.menue-offen .menue a:nth-child(6){transition-delay:.2s}html.menue-offen .menue a:nth-child(7){transition-delay:.24s}
  html.menue-offen .menue a:nth-child(8){transition-delay:.28s}
  .menue .menue__knopf{margin-top:28px;font:var(--btn-weight) 0.875rem/1 var(--fb);letter-spacing:var(--btn-track);text-transform:var(--btn-case)}
  .menue__extra{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:0.875rem;color:var(--muted);display:grid;gap:4px}
  .menue__extra a{font:inherit;padding:4px 0}
  .nur-gross{display:none!important}
}
@media (min-width:1080px){.menueknopf,.menue__extra,.nur-klein{display:none!important}}

/* ---------- Erscheinen ---------- */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rv.sichtbar{opacity:1;transform:none}
html.js .rv[data-v="2"]{transition-delay:.08s}html.js .rv[data-v="3"]{transition-delay:.16s}html.js .rv[data-v="4"]{transition-delay:.24s}

/* ---------- Fusszeile Entwurfshinweis ---------- */
.entwurf{display:inline-flex;gap:8px;align-items:center;font-size:0.7813rem;opacity:.8}
.entwurf a{text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html.js .rv{opacity:1;transform:none}
}

/* ---------- Sehr kleine Telefone (320–360 px) ---------- */
@media (max-width:360px){
  h1,h2{overflow-wrap:anywhere;letter-spacing:min(var(--h-track),.05em)!important}
  .karussell__nav{flex-wrap:wrap}
  .extra{grid-template-columns:84px 1fr!important;gap:14px!important}
}

/* ---------- Preisliste: zwei Tabellen auf einer Linie ----------
   Beide Spalten teilen sich per subgrid dieselben Zeilen (Kopf, Tabelle mit Link).
   Ist eine Einleitung laenger, waechst die Kopfzeile in beiden Spalten mit –
   die Tabellen beginnen immer auf derselben Hoehe. */
.preis-raster{display:grid;column-gap:clamp(36px,6vw,96px);row-gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));align-items:start}
.preis-spalte{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start;margin-bottom:clamp(36px,6vw,64px)}
.preis-spalte>.kopfzeile{margin-bottom:clamp(28px,3.4vw,44px)}

/* Kurze Tabelle nicht auf die Hoehe der langen strecken: Zeilen gleich hoch, Zeile fuer Zeile auf einer Linie */
.preis-spalte>.preis-tabelle{align-self:start}


:root{--bg:#fff;--bg2:#E6E3DE;--fg:#2B2623;--muted:#675F59;--line:#DCD6CF;--accent:#A24A25;--accent-fg:#fff;--surface:#fff;
  --fd:'Jura',sans-serif;--fb:'Mulish',system-ui,sans-serif;--h-weight:400;--h-lh:1.12;--k-font:'Jura',sans-serif;--k-size:12.5px;--k-weight:500;--kicker:#A24A25;
  --btn-radius:2px;--btn-size:12.5px;--btn-track:.16em;--btn-weight:600;--radius:2px;--kopf-h:76px;--knopf-linie:#A24A25;--preis:#A24A25;--menue-bg:#E6E3DE}
body{font-weight:400}
h1,h2,h3{letter-spacing:.01em}
.knopf--zweit{color:var(--accent);border-color:var(--accent)}
.knopf--zweit:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Kopf */
.kopf{position:absolute;inset:0 0 auto;z-index:50;height:var(--kopf-h);background:rgba(230,227,222,.82);backdrop-filter:blur(12px);transition:background .35s,box-shadow .35s,transform .35s}
.kopf.ist-gescrollt{position:fixed;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.kopf.ist-weg{transform:translateY(-100%)}
.kopf__innen{height:100%;display:flex;align-items:center;justify-content:space-between;position:relative}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--accent)}
.logo__mono{font:300 30px/1 'Jura',sans-serif;letter-spacing:-.06em;border:1px solid currentColor;width:46px;height:46px;display:grid;place-items:center}
.logo__name{font:500 0.8125rem/1 'Jura',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--fg)}
@media (min-width:1080px){
  /* Drei feste Spalten: linke Menuehaelfte | Logo | rechte Menuehaelfte.
     Die Haelften sind in ihren Spalten verankert – kommt etwas dazu (z. B. die
     Barrierefreiheits-Knoepfe der fertigen Seite), kann es nicht unter das Logo rutschen. */
  .kopf__innen{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:clamp(18px,2.4vw,40px);align-items:center}
  .kopf__innen>.logo{grid-column:2;grid-row:1}
  .kopf__innen>.logo .logo__name{display:none}
  .menue{display:contents}
  .menue__gruppe{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);grid-row:1;min-width:0}
  .menue__gruppe--l{grid-column:1;justify-self:start}
  .menue__gruppe--r{grid-column:3;justify-self:end}
  .menue a:not(.knopf){font:500 0.75rem/1 'Mulish',sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:8px 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
  .menue a:not(.knopf):hover,.menue a[aria-current]{color:var(--accent);border-color:var(--accent)}
  .menue .knopf{min-height:42px;padding:10px 18px}
}
@media (min-width:1080px) and (max-width:1279px){.menue a:not(.knopf){letter-spacing:.08em;font-size:0.7188rem}.menue__knopf{padding:10px 14px}}
@media (max-width:1079px){.menue__gruppe{display:contents}.menue__luecke{display:none}.menue a[aria-current]{color:var(--accent)}}

/* Hero */
.held{background:var(--bg2);position:relative;overflow:hidden}
.held__innen{display:grid;min-height:min(100svh,920px);align-items:end;position:relative}
.held__text{position:relative;z-index:2;padding:calc(var(--kopf-h) + 48px) 0 56px}
.held__dach{font:500 0.75rem/1 'Jura',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.held__h1{margin:0;font-weight:inherit}
.held__name{display:block;font:300 clamp(52px,8.6vw,120px)/.92 'Jura',sans-serif;color:var(--accent);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;hyphens:none;-webkit-hyphens:none;overflow-wrap:normal}
.held__unter{display:block;font:400 clamp(0.9375rem,1.3vw,1.1875rem)/1.4 'Jura',sans-serif;letter-spacing:.14em;text-transform:uppercase;margin:28px 0 0;color:var(--fg);hyphens:none;-webkit-hyphens:none}
.held__zahlen{display:flex;gap:clamp(24px,4vw,56px);margin-top:clamp(40px,6vw,80px)}
.held__zahlen dt{font:300 clamp(28px,3vw,40px)/1 'Jura',sans-serif;font-variant-numeric:tabular-nums}
.held__zahlen dd{margin:6px 0 0;font:500 0.7188rem/1.3 'Jura',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.held__bild{position:absolute;inset:0 0 0 auto;width:100%;z-index:1}
.held__bild img{width:100%;height:100%;object-fit:cover;object-position:60% 20%;filter:saturate(.85)}
.held__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(230,227,222,.2) 0%,rgba(230,227,222,.65) 48%,#E6E3DE 82%)}
.held__leiste{display:none}
@media (min-width:900px){
  .held__innen{grid-template-columns:1fr 1fr;align-items:center;position:static}
  .held__text{padding:calc(var(--kopf-h) + 40px) 0 64px}
  .held__bild{width:54%;right:0}
  /* Verlauf ragt 8px ueber die Bildkante: Liegt die Kante auf einem Pixelbruchteil, schiene
     das Foto sonst in der halb gedeckten Randspalte als feiner Strich durch. */
  .held__bild::after{inset:0 0 0 -8px;background:linear-gradient(90deg,#E6E3DE 0%,#E6E3DE 9%,rgba(230,227,222,0) 42%)}
  .held__leiste{display:flex;flex-direction:column;align-items:center;gap:18px;position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);z-index:3;color:var(--accent)}
  .held__leiste::before,.held__leiste::after{content:"";width:1px;height:90px;background:var(--accent)}
  .held__leiste a{display:grid;place-items:center;width:40px;height:40px;background:rgba(255,255,255,.75);border-radius:50%;transition:background .2s,color .2s}
  .held__leiste a:hover{background:var(--accent);color:#fff}
  .held__leiste svg{width:18px;height:18px}
}
@media (max-width:899px){.held__text .knopf--zweit{background:rgba(255,255,255,.6)}}

/* Titelzeile mit Linie (wie Vorlage) */
.titelzeile{display:flex;align-items:center;gap:clamp(18px,3vw,40px);margin-bottom:clamp(30px,4vw,52px)}
.titelzeile h2{font-size:clamp(28px,3.2vw,44px);flex:0 1 auto;min-width:0;overflow-wrap:break-word}
.titelzeile>span{flex:1;height:1px;background:var(--accent);opacity:.7}
.titelzeile .textlink{flex:none;color:var(--accent)}
@media (max-width:600px){.titelzeile .textlink{display:none}}

/* Ueber mich */
.ueber__innen{display:grid;gap:clamp(40px,6vw,96px);align-items:center}
.ueber__bilder{position:relative;display:grid;grid-template-columns:repeat(12,1fr);align-items:start;padding-top:12%}
.ueber__linie{position:absolute;left:0;right:6%;top:34%;height:1px;background:var(--accent);z-index:0}
.ueber__b1{grid-column:2/9;grid-row:1;aspect-ratio:3/4;z-index:1;margin-top:18%}
.ueber__b2{grid-column:6/13;grid-row:1;aspect-ratio:4/3;z-index:2;margin-top:-12%;box-shadow:0 20px 50px -20px rgba(43,38,35,.35)}
.ueber__text h2{font-size:clamp(32px,3.6vw,50px);margin-bottom:26px}
.ueber__lead{font-size:1.1em;color:var(--fg)}
.ueber__text p{color:var(--muted)}
@media (min-width:900px){.ueber__innen{grid-template-columns:1.05fr .95fr}}

/* Portfolio */
.portfolio{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut)}
.portfolio::-webkit-scrollbar{display:none}
.portfolio li{scroll-snap-align:start}
.portfolio a{display:block;position:relative;aspect-ratio:3/5;overflow:hidden;border-radius:2px;text-decoration:none}
.portfolio img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.portfolio a:hover img{transform:scale(1.05)}
.portfolio span{position:absolute;inset:40% 0 auto;padding:22px 10px;background:rgba(80,70,62,.42);backdrop-filter:blur(2px);color:#fff;text-align:center;font:400 clamp(1.0625rem,1.4vw,1.3125rem)/1 'Jura',sans-serif;letter-spacing:.14em;text-transform:uppercase}
@media (min-width:760px){.portfolio{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0}}

/* Pakete */
.pakete{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));align-items:start}
.paket{background:#fff;border:1px solid #CFC8C0;border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.paket--hervor{border-color:var(--accent)}
@media (min-width:1000px){.paket--hervor{transform:translateY(-22px)}}
.paket__kopf{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;text-decoration:none;color:#fff}
.paket__kopf img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.paket__kopf:hover img{transform:scale(1.05)}
.paket__kopf::after{content:"";position:absolute;inset:0;background:rgba(60,50,44,.38)}
.paket__titel{position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center;gap:6px;font:400 clamp(1.0625rem,1.4vw,1.25rem)/1.2 'Jura',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.paket__titel b{font-weight:400;letter-spacing:.06em}
.paket__daten{padding:8px 18px 0}
.paket__daten li{padding:14px 0;border-bottom:1px solid var(--line);font:500 0.7813rem/1.35 'Mulish',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.paket__knopf{margin:20px 18px 22px;align-self:center;min-height:44px}

/* Ablauf */
.schritt{border-top-color:var(--accent)}
.schritt__nr{font-family:'Jura',sans-serif;font-weight:300}

/* Stimmenbox (wie Vorlage: Rahmen, Rundbild auf der Kante) */
.stimmenblock{padding-top:calc(var(--sec) + 40px)}
.stimmenbox{position:relative;border:1px solid var(--accent);padding:84px clamp(20px,6vw,90px) clamp(36px,4vw,56px);text-align:center}
.stimmenbox__bild{position:absolute;left:50%;top:0;width:104px;height:104px;transform:translate(-50%,-50%);border-radius:50%;border:5px solid #fff;box-shadow:0 0 0 1px var(--accent)}
.stimmenbox .karussell__spur{grid-auto-columns:100%}
.stimmenbox__eintrag figcaption{display:grid;gap:4px;margin-bottom:22px}
.stimmenbox__eintrag figcaption b{font:400 1.375rem/1.2 'Jura',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.stimmenbox__eintrag figcaption span{font-size:0.7813rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stimmenbox__eintrag blockquote p{max-width:62ch;margin-inline:auto;color:var(--muted);font-size:clamp(0.9688rem,1vw + 0.5625rem,1.0625rem)}
.stimmenbox__nav{margin-top:20px}
.stimmenbox__strich{width:min(30%,260px);height:2px;background:linear-gradient(90deg,var(--fg) 0 var(--anteil,20%),var(--line) var(--anteil,20%));transition:background .3s}
.stimmenbox__nav .textlink{margin-left:14px}
.stimmenbox__nav button{border-color:transparent;color:var(--accent)}

/* Termine + Gutschein */
.termine-start{display:grid;gap:clamp(32px,5vw,72px);align-items:start}
@media (min-width:900px){.termine-start{grid-template-columns:1.1fr .9fr}}
.terminliste{border-top:1px solid #CFC8C0}
.terminliste a{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid #CFC8C0;text-decoration:none}
.terminliste time{width:64px;text-align:center;font:500 0.6875rem/1.2 'Jura',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.terminliste time b{display:block;font:300 30px/1 'Jura',sans-serif;color:var(--fg);margin-bottom:2px}
.terminliste span{font-weight:600}.terminliste small{display:block;font-weight:400;color:var(--muted);font-size:0.8438rem}
.terminliste svg{width:18px;height:18px;color:var(--accent);transition:transform .3s var(--ease)}
.terminliste a:hover svg{transform:translateX(4px)}
.gutscheinkarte{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;text-decoration:none;color:#fff;border-radius:2px}
.gutscheinkarte img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gutscheinkarte:hover img{transform:scale(1.04)}
.gutscheinkarte>span{position:absolute;inset:auto 0 0;padding:28px;background:linear-gradient(transparent,rgba(30,24,20,.82));font:300 clamp(1.625rem,2.6vw,36px)/1.15 'Jura',sans-serif}
.gutscheinkarte small{display:block;font:500 0.7188rem/1 'Mulish',sans-serif;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px;opacity:.85}
.gutscheinkarte b{display:flex;gap:8px;align-items:center;font:600 0.7813rem/1 'Mulish',sans-serif;letter-spacing:.14em;text-transform:uppercase;margin-top:16px}
.gutscheinkarte b svg{width:16px;height:16px}

/* Seitenkopf */
.skopf{background:var(--bg2);padding:calc(var(--kopf-h) + clamp(40px,6vw,90px)) 0 clamp(48px,6vw,90px)}
.skopf__innen{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
.skopf h1{font:300 clamp(28px,6vw,86px)/1.05 'Jura',sans-serif;color:var(--accent);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:break-word}
@media (max-width:600px){.skopf h1{font-size:clamp(1.625rem,7.6vw,40px);overflow-wrap:anywhere}}
.skopf--klein h1{font-size:clamp(34px,4.4vw,60px)}
.skopf .lead{color:var(--fg);opacity:.85}
.skopf__bild .bild{aspect-ratio:4/3;border-radius:2px}
/* Hochformat-Portraets (Ueber mich): nicht ins Querformat pressen, Kopf bleibt im Bild */
.skopf__bild--hoch .bild{aspect-ratio:4/5;max-width:440px;margin-inline:auto}
.skopf__bild--hoch img{object-position:50% 12%}
@media (min-width:900px){.skopf--bild .skopf__innen{grid-template-columns:1.1fr .9fr}.skopf--bild{padding-bottom:0}.skopf--bild .skopf__bild{margin-bottom:-60px;position:relative;z-index:2}.skopf--bild+*{padding-top:calc(var(--sec) + 40px)}}

/* Allgemein */
.abschnitt--flaeche{background:var(--bg2)}
.karte{border:1px solid #CFC8C0}
.karte__text{padding:22px 20px 22px}
.karte .bild{aspect-ratio:16/10}
.leistung .kicker,.ort .kicker{color:var(--accent)}
.cta{background:var(--bg2)}
.cta h2{font-family:'Jura',sans-serif;color:var(--accent);text-transform:uppercase;font-weight:300}
.stimmen-raster .stimme{border-color:#CFC8C0}
.stimme blockquote p{font-family:var(--fb);font-size:1.0625rem}

/* Fuss */
.fuss{background:#fff;border-top:1px solid var(--line);padding:clamp(56px,7vw,96px) 0 28px;font-size:0.9063rem}
.fuss__oben{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.fuss__marke p{color:var(--muted);margin:20px 0}
.fuss__marke a{text-decoration:none}
.logo--fuss .logo__name{display:none}
.sozial{display:flex;gap:10px}
.sozial a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--accent);transition:background .2s,color .2s}
.sozial a:hover{background:var(--accent);color:#fff}
.sozial svg{width:17px;height:17px}
.fuss__titel{font:500 0.75rem/1 'Jura',sans-serif;letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px;color:var(--accent)}
.fuss__gruppe li{margin-bottom:8px}
.fuss__gruppe a{text-decoration:none;color:var(--muted)}
.fuss__gruppe a:hover{color:var(--accent)}
.fuss__cta p{color:var(--muted)}
.fuss__unten{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;margin-top:56px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:0.8125rem}
.mleiste a.mleiste__haupt{background:var(--accent)}


/* ---------- nur fertige Seite ---------- */
.brotkrume ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 22px;padding:0;list-style:none;font-size:0.8125rem;color:var(--muted)}
.brotkrume li+li::before{content:"/";margin-right:8px;opacity:.6}
.brotkrume a{color:var(--muted)}
.brotkrume [aria-current]{color:var(--fg)}
.faq{border-top:1px solid #CFC8C0}
.faq details{border-bottom:1px solid #CFC8C0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-weight:600;font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 28px/1 'Jura',sans-serif;color:var(--accent);transition:transform .42s cubic-bezier(.22,1,.36,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details.faq--schliesst summary::after{transform:none;transition-duration:.3s}
.faq summary{transition:color .25s}
.faq summary:hover{color:var(--accent)}
.faq__inhalt{overflow:hidden}
/* ---------- Feine Bewegung (13.10.2026) – Aussehen unveraendert, nur fliessender ---------- */
/* Galerie-Filter: die dunkle Fuellung gleitet zum gewaehlten Knopf */
.filter--gleit{position:relative}
.filter--gleit button{position:relative;z-index:1}
.filter--gleit button[aria-pressed="true"]{background:transparent}
.filter__marke{position:absolute;left:0;top:0;z-index:0;background:var(--fg);border-radius:var(--btn-radius);pointer-events:none;
  transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1)}
.filter--gleit button:not([aria-pressed="true"]):hover{border-color:var(--fg)}
/* Grossbild: Flug-Uebergang */
::view-transition-group(lb-bild){animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
/* Ablauf: Linien zeichnen sich nacheinander, Nummern leuchten auf */
.schritte--zeichnen .schritt{border-top-color:transparent}
.schritte--zeichnen .schritt::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left}
.schritte--zeichnen .schritt__nr{color:#B5ABA3}
/* Uebergaenge erst im sichtbaren Moment – beim Laden springt nichts */
.schritte--da .schritt::before{transform:scaleX(1);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.schritte--da .schritt__nr{color:var(--nr,var(--accent));transition:color .6s ease}
.schritte--da .schritt:nth-child(2)::before,.schritte--da .schritt:nth-child(2) .schritt__nr{transition-delay:.25s}
.schritte--da .schritt:nth-child(3)::before,.schritte--da .schritt:nth-child(3) .schritt__nr{transition-delay:.5s}
.schritte--da .schritt:nth-child(4)::before,.schritte--da .schritt:nth-child(4) .schritt__nr{transition-delay:.75s}
/* Kundenstimmen: beim Wechsel tritt die neue Stimme hervor */
.spur--weich>*{opacity:.25;transition:opacity .55s ease}
.spur--weich>.ist-aktiv{opacity:1}
/* Formular: ruhiger Fokus, Lade- und Hinweiszustand */
.feld input,.feld select,.feld textarea{transition:border-color .25s,box-shadow .25s,background .2s}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:#B5ABA3}
.feld input:focus,.feld select:focus,.feld textarea:focus{box-shadow:0 0 0 4px rgba(162,74,37,.10)}
.feld label{transition:color .25s}
.feld:focus-within label{color:var(--accent)}
.knopf--laedt{cursor:progress;opacity:.8}
.knopf--laedt::after{content:"";width:14px;height:14px;margin-left:10px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kb-dreh .8s linear infinite}
@keyframes kb-dreh{to{transform:rotate(360deg)}}
.formhinweis:not(:empty){animation:kb-auf .35s cubic-bezier(.22,1,.36,1)}
@keyframes kb-auf{from{opacity:0;transform:translateY(-6px)}}
/* Navigation (Rechner): die Linie unter dem Eintrag waechst aus der Mitte */
@media (min-width:1080px){
  .menue__gruppe a:not(.knopf){border-bottom-color:transparent!important;background:linear-gradient(var(--accent),var(--accent)) 50% 100%/0 1px no-repeat;
    transition:background-size .35s cubic-bezier(.22,1,.36,1),color .2s}
  .menue__gruppe a:not(.knopf):hover,.menue__gruppe a[aria-current]{background-size:100% 1px}}
/* Menue am Telefon: Eintraege der Reihe nach (Reihenfolge aus kb.js) */
@media (max-width:1079px){html.menue-offen .menue .menue__gruppe a{transition-delay:calc(var(--i,0) * 45ms)}}
@media (prefers-reduced-motion:reduce){
  .filter__marke,.schritte--zeichnen .schritt::before,.schritte--zeichnen .schritt__nr,.spur--weich>*,.feld input,.feld select,.feld textarea,.menue__gruppe a{transition:none!important}
  .knopf--laedt::after,.formhinweis:not(:empty){animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
.faq details p{color:var(--muted);padding:0 0 22px;margin:0;max-width:68ch}
/* Startseite: Leistungen nur als Bildkacheln (Name + ab-Preis); am Telefon als Wisch-Leiste */
.pakete--kurz .paket{border:0}
.pakete--kurz .paket__kopf{aspect-ratio:4/3}
.pakete--kurz .paket__kopf img{object-position:var(--pos,50% 50%)}
/* Startseite, Aktionen: am Rechner wird die Gutscheinkarte so hoch wie die Liste daneben */
/* (ab 720 px nebeneinander; das Bild liegt absolut, damit nur die Liste die Hoehe bestimmt) */
@media (min-width:720px){
  .termine-start--buendig{grid-template-columns:1.1fr .9fr;align-items:stretch}
  .termine-start--buendig .gutscheinkarte{aspect-ratio:auto;height:100%;min-height:360px}
  .termine-start--buendig .gutscheinkarte img{position:absolute;inset:0}}
/* Kundenstimmen: Anfuehrungszeichen im Kreis statt Foto, darunter fuenf Sterne */
.stimmenbox__zeichen{display:grid;place-items:center;background:#fff;color:var(--accent);font:300 92px/1 'Jura',sans-serif;user-select:none}
/* das deutsche „ sitzt auf der Grundlinie – optisch in die Kreismitte heben */
.stimmenbox__zeichen span{position:relative;top:-26px}
.stimmenbox__sterne{display:flex;justify-content:center;gap:4px;color:var(--accent);margin:-26px 0 22px}
.stimmenbox__sterne svg{width:16px;height:16px}
html.a11y-kontrast .stimmenbox__zeichen{background:#fff;color:var(--accent)}
@media (max-width:759px){.pakete--kurz{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut)}.pakete--kurz .paket{scroll-snap-align:start}.pakete--kurz .paket__kopf{aspect-ratio:4/5}}
/* Startseite: Video statt Ueber-mich-Text; am Rechner Video links, Text rechts */
@media (min-width:900px){
  .vorstellung--start{grid-template-columns:330px minmax(0,440px);justify-content:center;align-items:center;column-gap:clamp(56px,7vw,110px);row-gap:28px}
  .vorstellung--start .vorstellung__rahmen{grid-row:span 2}
  .vorstellung.vorstellung--start figcaption{text-align:left;max-width:none;align-self:end;gap:12px}
  .vorstellung.vorstellung--start figcaption b{font-size:clamp(28px,2.6vw,38px)}
  .vorstellung.vorstellung--start figcaption span:not(.kicker){font-size:1.0313rem}
  .vorstellung.vorstellung--start .vorstellung__text{align-self:start;width:100%}
  .vorstellung.vorstellung--start .vorstellung__text summary{justify-content:flex-start}}
.vorstellung figcaption .textlink{justify-self:center;margin-top:8px}
@media (min-width:900px){.vorstellung.vorstellung--start figcaption .textlink{justify-self:start}}
/* Schluss der Startseite: Studio und Oeffnungszeiten */
.cta__info{margin:28px 0 0;font-size:0.9063rem;color:var(--muted)}
.cta__info+.cta__info{margin-top:14px}
/* Fusszeile am Telefon: nur Marke und Rechtliches (Kontaktwege stehen in der Leiste unten) */
@media (max-width:759px){.fuss__gruppe:not(.fuss__gruppe--recht),.fuss__cta{display:none}.fuss__oben{gap:32px}}
/* Entwickler-Hinweis: leise, in Hausschrift und Hausfarben; Unterstreichung waechst aus der Mitte */
.credit{display:inline-flex;align-items:baseline;gap:.5em;color:var(--muted);font-size:0.75rem;letter-spacing:.02em}
.credit__name{position:relative;display:inline-block;padding:4px 0;margin-block:-4px;font-family:var(--fd);font-weight:500;font-size:0.7813rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);text-decoration:none}
.credit__punkt{color:var(--accent);letter-spacing:0}
.credit__name::after{content:"";position:absolute;left:0;right:.2em;bottom:1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:50% 50%;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.credit__name:hover::after,.credit__name:focus-visible::after{transform:scaleX(1)}
.credit__name:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.credit__hinweis{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.credit__name::after{transition:none}}
@media (max-width:759px){.credit{font-size:0.7188rem}}
/* SEO-Vorschlaege: Einleitung, Bewertungsseite, Uebersicht */
.einleitung{padding-block:clamp(48px,7vw,96px) clamp(8px,2vw,24px)}
.einleitung__text{font:300 clamp(1.3125rem,2.2vw,28px)/1.55 'Jura',sans-serif;text-align:center;color:var(--fg);margin:0}
.einleitung__text strong{font-weight:500;color:var(--accent)}
.einleitung__innen{display:flex;flex-direction:column;align-items:center;gap:clamp(36px,5vw,64px)}
.einleitung__spalte{max-width:720px;display:grid;justify-items:center;gap:22px}
.einleitung--video .vorstellung__rahmen{width:min(100%,260px)}
.einleitung--video .vorstellung figcaption b,.einleitung--video .vorstellung figcaption span:not(.kicker){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.einleitung--video .vorstellung__text{width:min(100%,420px)}
@media (min-width:900px){
  /* Spalten wie im Hero darueber (Bild 54 %): Video mittig unter dem Namen,
     Text zentriert in der rechten Haelfte unter dem Foto */
  .einleitung--video .einleitung__innen:has(.vorstellung){display:grid;grid-template-columns:46fr 54fr;align-items:center;gap:clamp(32px,4vw,64px)}
  .einleitung--video .einleitung__innen:has(.vorstellung) .einleitung__spalte{max-width:540px;justify-self:center}
  .einleitung--video .vorstellung__rahmen{width:300px}
  .einleitung--video .vorstellung{width:340px;justify-self:center;order:-1}}
.bewerten{display:grid;gap:26px;justify-items:center;text-align:center;padding-top:clamp(32px,5vw,56px)}
.bewerten__knopf{display:inline-flex;flex-direction:column;align-items:center;gap:10px;font-size:0.9375rem;padding:18px 30px;min-height:58px}
.bewerten__knopf .sterne{color:currentColor;display:flex;gap:4px}
.bewerten__knopf .sterne svg{width:18px;height:18px}
.bewerten__schritte li{list-style:decimal}
.bewerten__hinweis{color:var(--muted);font-size:0.9063rem;margin:0}
.bewerten__schritte{text-align:left;margin:0;padding-left:1.3em;color:var(--muted)}
.bewerten__schritte li{margin:6px 0}
.bewerten__dank{font:400 1.375rem/1.3 'Jura',sans-serif;color:var(--accent);margin:0}
picture{display:contents}
/* Aktionen & Workshops: Bildkarte (Verlauf, Zoom) + aufklappbare Details */
.aktionen{display:grid;gap:clamp(22px,3vw,36px);align-items:start}
@media (min-width:900px){.aktionen{grid-template-columns:1fr 1fr}}
.aktion{background:#fff;border:1px solid #CFC8C0;border-radius:3px;overflow:hidden;
  transition:transform .5s cubic-bezier(.34,1.4,.64,1),box-shadow .5s cubic-bezier(.34,1.4,.64,1)}
.aktion:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(43,38,35,.5)}
.aktion__bild{position:relative;aspect-ratio:16/10;overflow:hidden;background:#1b1715;color:#fff}
.aktion__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);transition:transform 1.1s var(--ease)}
.aktion:hover .aktion__bild img{transform:scale(1.07)}
.aktion__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,14,.86) 0%,rgba(20,16,14,.42) 42%,rgba(20,16,14,0) 70%)}
.aktion__datum{position:absolute;z-index:1;top:0;left:0;display:grid;gap:2px;padding:12px 16px 11px;background:var(--accent);color:#fff;text-align:center;min-width:96px}
.aktion__datum b{font:400 1.625rem/1 'Jura',sans-serif;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.aktion__datum span{font:600 0.6875rem/1.2 'Mulish',sans-serif;letter-spacing:.16em;text-transform:uppercase}
.aktion__kopf{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:20px 22px 18px;display:grid;gap:4px}
.aktion__art{font:600 0.7188rem/1.2 'Mulish',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.aktion__kopf h2{margin:0;color:#fff;font-size:clamp(1.625rem,2.6vw,34px);line-height:1.1;letter-spacing:.04em;text-transform:uppercase}
.aktion__kopf em{font:italic 400 1.0625rem/1.3 'Mulish',sans-serif;color:rgba(255,255,255,.9)}
.aktion__info{padding:18px 22px 22px;display:grid;gap:14px}
.aktion__meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;font-size:0.9063rem;color:var(--muted)}
.aktion__meta span{display:inline-flex;align-items:center;gap:7px}
.aktion__meta svg{width:16px;height:16px;color:var(--accent)}
.aktion__preis{margin-left:auto;font-weight:700;color:var(--fg)}
.aktion__details{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.34,1.2,.64,1),opacity .35s}
.aktion__details>div{overflow:hidden;min-height:0}
.aktion__details p{margin:0 0 10px;color:var(--muted)}
.aktion__details .liste-haken{margin:0 0 4px}
.aktion--zu .aktion__details{grid-template-rows:0fr;opacity:0}
.aktion--zu .aktion__details>div{visibility:hidden;transition:visibility 0s .45s}
.aktion__knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.aktion__mehr{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;
  font:600 0.7813rem/1.2 'Mulish',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.aktion__mehr svg{width:16px;height:16px;transform:rotate(90deg);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.aktion__mehr[aria-expanded="true"] svg{transform:rotate(-90deg)}
@media (max-width:420px){.aktion__preis{margin-left:0}.aktion__knoepfe .knopf{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.aktion,.aktion__bild img,.aktion__details,.aktion__mehr svg{transition:none}.aktion:hover{transform:none}.aktion:hover .aktion__bild img{transform:none}}
/* Bezahlung: Auswahl im Formular und Uebersicht auf der Preisseite */
.zahlwahl{border:0;margin:0 0 18px;padding:0;min-width:0}
.zahlwahl legend{font-weight:600;font-size:0.9063rem;margin-bottom:10px;padding:0}
.zahlwahl__optionen{display:flex;flex-wrap:wrap;gap:10px}
.zahlwahl__option{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 16px;border:1px solid #CFC8C0;background:#fff;cursor:pointer;font-size:0.9375rem}
.zahlwahl__option input{width:18px;height:18px;margin:0;accent-color:var(--accent);flex:none}
.zahlwahl__option:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.zahlwahl__option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.zahlwahl__hinweis{font-size:0.8438rem;color:var(--muted);margin:10px 0 0}
@media (max-width:520px){.zahlwahl__option{flex:1 1 100%}}
.zahlwege{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.zahlweg{display:grid;gap:4px;align-content:start;padding:20px;background:#fff;border-top:2px solid var(--accent)}
.zahlweg b{font:400 1.1875rem/1.25 'Jura',sans-serif;letter-spacing:.04em}
.zahlweg span{color:var(--muted);font-size:0.9063rem}
.zahlweg__daten{color:var(--fg)!important;font-variant-numeric:tabular-nums;margin-top:6px}
.zahlwege__hinweis{color:var(--muted);font-size:0.9063rem;margin:18px 0 0}
/* Logo: Linienzeichnung in Terrakotta; der Name steckt im Bild */
.logo__bild{display:block;height:66px;width:auto}
.logo .logo__name{display:none!important}
@media (max-width:759px){.kopf .logo__bild{height:62px}}
.logo--fuss .logo__bild{height:80px}
.fuss__marke p{margin-top:16px}
.logo__bild--farbe,.logo__bild--kontrast{display:none}
html.a11y-farbe .logo__bild--std,html.a11y-kontrast .logo__bild--std{display:none}
html.a11y-farbe .logo__bild--farbe,html.a11y-kontrast .logo__bild--kontrast{display:block}
.kurz{margin:0 0 clamp(28px,4vw,40px);padding:clamp(20px,3vw,28px);background:var(--bg2);border-left:3px solid var(--accent)}
.kurz__titel{font:500 0.7813rem/1.3 'Jura',sans-serif!important;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)!important;margin:0 0 10px}
.kurz p:last-child{margin:0;color:var(--fg)}
.vorschlaege{list-style:none;padding:0;margin:0;counter-reset:v;border-top:1px solid #CFC8C0}
.vorschlaege li{counter-increment:v;position:relative;padding:24px 0 24px 64px;border-bottom:1px solid #CFC8C0}
.vorschlaege li::before{content:counter(v);position:absolute;left:0;top:20px;font:300 40px/1 'Jura',sans-serif;color:var(--accent)}
.vorschlaege h2{font-size:clamp(1.25rem,2vw,1.5rem);margin:0 0 8px}
.vorschlaege p{color:var(--muted);margin:0 0 10px}
/* Kopfzeile: mit "FAQ" wird es rechts eng – Eintraege nie umbrechen */
@media (min-width:1080px){.menue__gruppe a{white-space:nowrap}}
@media (min-width:1080px) and (max-width:1199px){.menue__gruppe{gap:14px!important}}
/* Handymenue: Inhalt beginnt unter der Kopfzeile und rollt nie unter das Logo;
   oben ausgerichtet, damit auf kleinen Telefonen nichts abgeschnitten wird */
@media (max-width:1079px){
  .menue{top:var(--kopf-h);padding-top:clamp(12px,3vh,32px);justify-content:flex-start}
  html.menue-offen .kopf{background:var(--menue-bg,var(--bg))!important}}
/* "Leistungen & Preise" soll auch auf 320 px in eine Zeile passen */
@media (max-width:359px){.menue .menue__gruppe a{font-size:1.625rem}}
.lp{display:grid;gap:clamp(36px,6vw,90px);align-items:start}
.lp>*{min-width:0}
@media (min-width:980px){.lp{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr)}.lp__seite{position:sticky;top:calc(var(--kopf-h) + 24px)}}
.lp__block+.lp__block{margin-top:clamp(36px,5vw,56px)}
.lp__block h2{font-size:clamp(1.625rem,2.6vw,36px);margin-bottom:18px}
.lp__block p{color:var(--muted)}
.lp__box{background:var(--bg2);padding:clamp(24px,3vw,36px)}
.lp__hinweis{font-size:0.875rem;color:var(--muted);margin:18px 0 0}
.artikel h2{font-size:clamp(1.5rem,2.4vw,32px);margin:clamp(36px,5vw,52px) 0 16px}
.artikel p,.artikel li{font-size:1.06em}
.artikel p{color:#3E3833}
.artikel__meta{font-size:0.875rem!important;color:var(--muted)!important;margin-bottom:32px}
.ctabox{margin:clamp(40px,6vw,64px) 0 28px;padding:clamp(24px,3vw,36px);background:var(--bg2);border-left:3px solid var(--accent)}
.ctabox p{font-weight:600;margin-bottom:6px}
.ctabox .knoepfe{margin-top:18px}
.formhinweis--fehler{border-left-color:#A12A10;background:#FBEDE8}
/* Vorstellungsvideo: Hochformat wie vom Telefon, Terrakotta-Rahmen wie die Atelier-Linien */
.vorstellung{margin:0;display:grid;gap:26px;justify-items:center}
.vorstellung__rahmen{width:min(100%,330px);aspect-ratio:480/848;background:#1b1715;border-radius:3px;overflow:hidden;
  outline:1px solid var(--accent);outline-offset:12px;box-shadow:0 30px 60px -28px rgba(43,38,35,.55)}
.vorstellung video{display:block;width:100%;height:100%;object-fit:cover;background:#1b1715}
.vorstellung__rahmen{position:relative}
.vorstellung__start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;
  padding:0 16px 34px;border:0;cursor:pointer;color:#fff;font:600 0.8125rem/1.2 'Mulish',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(20,16,14,.72) 0%,rgba(20,16,14,.18) 34%,rgba(20,16,14,0) 55%)}
.vorstellung__start[hidden]{display:none}
.vorstellung__start svg{width:30px;height:30px;padding:21px 19px 21px 23px;box-sizing:content-box;border-radius:50%;
  background:rgba(255,255,255,.94);color:#2b2623;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .25s,background .25s}
.vorstellung__start:hover svg,.vorstellung__start:focus-visible svg{transform:scale(1.08);background:#fff}
.vorstellung__start:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.vorstellung__start span{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.vorstellung figcaption{display:grid;gap:6px;text-align:center;max-width:340px}
.vorstellung figcaption b{font:400 1.375rem/1.2 'Jura',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.vorstellung figcaption span:not(.kicker){color:var(--muted);font-size:0.9063rem}
.vorstellung--start{padding-top:12px}
/* Google-Bewertung */
.google-zeile{display:flex;justify-content:center;margin-top:34px}
.google-zeile--links{justify-content:flex-start}
.google-zeile--kopf{flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:0;margin-bottom:clamp(28px,4vw,48px);padding-top:clamp(32px,5vw,56px)}
.google-zeile--kopf p{margin:0;color:var(--muted);font-size:0.9063rem;max-width:46ch}
.google-wertung{display:inline-flex;align-items:center;gap:14px;padding:14px 20px;border:1px solid #CFC8C0;background:#fff;text-decoration:none;color:var(--fg);transition:border-color .25s,transform .25s}
.google-wertung:hover{border-color:var(--accent);transform:translateY(-2px)}
.google-wertung .sterne{color:var(--accent)}
.google-wertung .sterne svg{width:17px;height:17px}
.google-wertung__text{display:grid;gap:2px;line-height:1.2}
.google-wertung__text b{font:400 1.125rem/1.15 'Jura',sans-serif;letter-spacing:.04em}
.google-wertung__text small{font-size:0.7813rem;color:var(--muted);letter-spacing:.04em}
.google-wertung>svg{width:16px;height:16px;color:var(--accent);flex:none}
@media (max-width:420px){.google-wertung{gap:10px;padding:12px 14px}.google-wertung .sterne svg{width:14px;height:14px}}
/* Oeffnungszeiten (Kontaktseite) */
.zeiten{margin-top:40px;padding:24px;background:var(--bg2)}
.zeiten__titel{font:500 0.7813rem/1.3 'Jura',sans-serif!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--accent);margin:0 0 14px}
.zeiten dl{margin:0;display:grid}
.zeiten dl div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #CFC8C0}
.zeiten dt{font-weight:600}
.zeiten dd{margin:0;font-variant-numeric:tabular-nums}
.zeiten .zu dt,.zeiten .zu dd{color:var(--muted);font-weight:400}
.zeiten p{font-size:0.875rem;color:var(--muted);margin:14px 0 0}
.vorstellung__text{width:min(100%,560px);border-top:1px solid #CFC8C0;border-bottom:1px solid #CFC8C0}
.vorstellung__text summary{list-style:none;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:10px;min-height:48px;
  font:600 0.7813rem/1.2 'Mulish',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.vorstellung__text summary::-webkit-details-marker{display:none}
.vorstellung__text summary::after{content:"+";font:300 1.5rem/1 'Jura',sans-serif;transition:transform .3s}
.vorstellung__text[open] summary::after{transform:rotate(45deg)}
.vorstellung__text p{font-size:0.9375rem;color:var(--muted);text-align:left;margin:0 0 12px}
.vorstellung__text p:last-child{margin-bottom:18px}
.vorstellung__text .vorstellung__wer{color:var(--fg);font-weight:700}
.vorstellung--kopf .vorstellung__rahmen{width:min(100%,300px)}
@media (min-width:900px){.skopf--bild .vorstellung--kopf{margin-bottom:-40px;position:relative;z-index:2}}

/* KreativBlick – Barrierefreiheit: zwei Knoepfe (Lupe, Kontrast) und Anzeigemodi.
   Nur in der fertigen Seite eingebunden. Klassen am <html> setzt kb.js
   (und schon im <head> ein kurzes Skript, damit nichts flackert):

   a11y-150 / a11y-200   Textgroesse; dazu a11y-gross ab 150 %
   a11y-kontrast         Schwarz auf Weiss, kraeftige Linien
   a11y-farbe            Farbsehschwaeche: Blau statt Terrakotta, alles unterstrichen
   a11y-schrift          gut lesbare Schrift statt der duennen Display-Schrift
   a11y-links            Links unterstrichen
   a11y-ruhig            keine Bewegung

   Schriftgroessen bis 26 px stehen in der fertigen Seite als rem und wachsen
   mit; grosse Ueberschriften bleiben in px, sie sind ohnehin gross genug. */

html.a11y-150{font-size:150%}
html.a11y-200{font-size:200%}

/* ---------- Ab 150 %: Telefon-Navigation auf jeder Breite ---------- */
html.a11y-gross .menueknopf{display:inline-grid!important}
html.a11y-gross .nur-gross{display:none!important}
html.a11y-gross .kopf__innen>.logo{position:static!important;transform:none!important}
@media (min-width:700px){html.a11y-gross .kopf__innen>.logo .logo__name{display:inline!important}}
@media (max-width:699px){html.a11y-gross .logo__name{display:none!important}}
html.a11y-gross .menue__luecke{display:none!important}
html.a11y-gross .menue{position:fixed!important;inset:0;z-index:80;display:flex!important;flex-direction:column;justify-content:flex-start;gap:4px;
  padding:calc(var(--kopf-h) + 20px) var(--gut) 40px;background:var(--menue-bg,var(--bg));color:var(--menue-fg,var(--fg));
  opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s;overflow-y:auto}
html.a11y-gross.menue-offen .menue{opacity:1;visibility:visible;transition:opacity .35s,visibility 0s}
html.a11y-gross .menue a{font:400 1.6rem/1.3 var(--fd)!important;letter-spacing:0!important;text-transform:none!important;border:0!important;padding:6px 0!important}
html.a11y-gross .menue .menue__knopf{font:600 1rem/1 var(--fb)!important;padding:16px 22px!important;margin-top:20px}
html.a11y-gross .menue__extra,html.a11y-gross .nur-klein{display:grid!important}
html.a11y-gross .menue__extra a{font:400 1rem/1.4 var(--fb)!important}
html.a11y-gross .mleiste{display:grid}
html.a11y-gross{--leiste-h:76px}
html.a11y-gross .mleiste a{font-size:.55rem;overflow-wrap:normal!important;word-break:keep-all;min-height:76px;flex-direction:column;gap:3px;text-align:center;line-height:1.15;padding:6px 4px}
html.a11y-gross .held__leiste{display:none!important}

/* ---------- Hoher Kontrast ---------- */
html.a11y-kontrast{--bg:#fff;--bg2:#fff;--fg:#000;--muted:#111;--line:#000;--accent:#6E2E10;--accent-fg:#fff;--kicker:#6E2E10;--preis:#000;
  --knopf-linie:#000;--menue-bg:#fff;--surface:#fff;--fokus:#000}
html.a11y-kontrast body{background:#fff;color:#000}
html.a11y-kontrast .abschnitt--flaeche,html.a11y-kontrast .skopf,html.a11y-kontrast .held,html.a11y-kontrast .cta{background:#fff!important}
html.a11y-kontrast .held__bild::after{background:rgba(255,255,255,.88)!important}
html.a11y-kontrast .kopf,html.a11y-kontrast .kopf.ist-gescrollt{background:#fff!important;box-shadow:0 2px 0 #000!important;backdrop-filter:none!important}
html.a11y-kontrast .karte,html.a11y-kontrast .paket,html.a11y-kontrast .stimmen-raster .stimme,html.a11y-kontrast .termin,html.a11y-kontrast .feld input,
html.a11y-kontrast .feld select,html.a11y-kontrast .feld textarea{border:2px solid #000!important}
html.a11y-kontrast .portfolio span,html.a11y-kontrast .paket__titel,html.a11y-kontrast .gutscheinkarte>span{background:rgba(0,0,0,.82)!important;color:#fff!important}
html.a11y-kontrast a:not(.knopf):not(.weg):not(.paket__kopf):not(.gutscheinkarte):not(.galerie__bild){text-decoration:underline!important;text-underline-offset:3px}
html.a11y-kontrast :focus-visible{outline:3px solid #000!important;outline-offset:3px;box-shadow:0 0 0 6px #FFD400!important}

/* ---------- Farbsehschwaeche ----------
   Rot und Gruen faellt am haeufigsten aus. Akzent deshalb ein dunkles Blau,
   das bei Protanopie, Deuteranopie und Tritanopie klar vom Grau abgesetzt bleibt.
   Zustaende haengen zusaetzlich an Unterstreichung und Rahmen, nie nur an Farbe. */
html.a11y-farbe{--accent:#0B4F8A;--kicker:#0B4F8A;--preis:#0B4F8A;--knopf-linie:#0B4F8A;--haken:#0B4F8A;--stern:#0B4F8A;--nr:#0B4F8A;--fokus:#0B4F8A}
html.a11y-farbe a:not(.knopf):not(.weg):not(.paket__kopf):not(.gutscheinkarte):not(.galerie__bild){text-decoration:underline;text-underline-offset:3px}
html.a11y-farbe .menue a[aria-current]{text-decoration:underline;text-decoration-thickness:2px}
html.a11y-farbe .filter button[aria-pressed="true"]{outline:2px solid currentColor;outline-offset:2px}
html.a11y-farbe :focus-visible{outline:3px dashed #0B4F8A!important;outline-offset:3px}
html.a11y-farbe img{filter:none!important}

/* ---------- Lesbare Schrift ---------- */
html.a11y-schrift{--fd:'Mulish',system-ui,sans-serif;--k-font:'Mulish',system-ui,sans-serif}
html.a11y-schrift :is(h1,h2,h3,.held__name,.held__unter,.held__dach,.logo__name,.titelzeile h2,.skopf h1,.paket__titel,.portfolio span,.fuss__titel,.kicker){
  font-family:'Mulish',system-ui,sans-serif!important;letter-spacing:.01em!important}
html.a11y-schrift .held__name{font-weight:600!important}
html.a11y-schrift body{line-height:1.8;letter-spacing:.01em;word-spacing:.06em}

/* ---------- Links ---------- */
html.a11y-links a:not(.knopf):not(.galerie__bild):not(.paket__kopf):not(.gutscheinkarte){text-decoration:underline!important;text-decoration-thickness:2px;text-underline-offset:4px}
html.a11y-links .knopf{outline:2px solid currentColor;outline-offset:2px}

/* ---------- Ruhig ---------- */
html.a11y-ruhig *,html.a11y-ruhig *::before,html.a11y-ruhig *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-ruhig .rv{opacity:1!important;transform:none!important}

/* ---------- Zwei Knoepfe oben rechts: Lupe + Kontrast ----------
   Kein Menue: Wer schlecht sieht, kann keins lesen. Jeder Tipp schaltet eine
   Stufe weiter, das Ergebnis wird gross eingeblendet (#a11y-ansage). */
.a11y-knopf{position:relative;z-index:85;flex:none;width:44px;height:44px;border-radius:50%;margin-left:clamp(6px,1vw,12px);
  border:1.5px solid currentColor;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.a11y-knopf:hover,.a11y-knopf[aria-pressed="true"]{background:#1F2A44;color:#fff;border-color:#1F2A44}
.a11y-knopf svg{width:23px;height:23px}
.a11y-knopf:focus-visible{outline:3px solid #FFD400;outline-offset:3px}
.a11y-stufe{position:absolute;right:-8px;bottom:-6px;min-width:26px;padding:2px 4px;border-radius:9px;background:#FFD400;color:#111;
  font:800 11px/1.2 'Mulish',system-ui,sans-serif;letter-spacing:0;text-align:center;border:1.5px solid #111}
.a11y-stufe:empty{display:none}
/* Rechner: Knoepfe ganz rechts, hinter "Kontakt". Damit rechts Platz ist, hat die
   linke Menuehaelfte vier Links, die rechte zwei plus Kontakt (01-atelier.js).
   Telefon und Grossmodus: oben rechts neben dem Menue. */
@media (min-width:1080px){
  html:not(.a11y-gross) #a11y-farbe{grid-column:3;grid-row:1;justify-self:end;margin:0}
  html:not(.a11y-gross) #a11y-lupe{grid-column:3;grid-row:1;justify-self:end;margin:0 52px 0 0}
  html:not(.a11y-gross) .kopf__innen .menue__gruppe--r{margin-right:clamp(112px,9vw,124px)}
}
html.a11y-gross .kopf__innen{display:flex!important}
html.a11y-gross .menue__gruppe{display:contents!important}
@media (max-width:1079px){#a11y-lupe{margin-left:auto}#a11y-farbe{margin-right:4px}}
html.a11y-gross #a11y-lupe{margin-left:auto}
html.a11y-gross #a11y-farbe{margin-right:4px}
@media (max-width:420px){.kopf .logo__name{display:none}}
html.menue-offen .a11y-knopf{visibility:hidden}

.a11y-ansage{position:fixed;left:50%;top:50%;z-index:300;transform:translate(-50%,-50%) scale(.96);min-width:min(80vw,280px);max-width:90vw;
  padding:22px 30px;border-radius:16px;background:#1F2A44;color:#fff;border:3px solid #FFD400;text-align:center;
  font:800 clamp(24px,6vw,34px)/1.25 'Mulish',system-ui,sans-serif;letter-spacing:0;box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s}
.a11y-ansage.ist-sichtbar{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
@media print{.a11y-knopf,.a11y-feld,.mleiste{display:none!important}}

/* ---------- Grossmodus: nichts darf seitlich ueberlaufen (WCAG 1.4.4 / 1.4.10) ----------
   Gesperrte Versalien werden enger, jedes Wort darf brechen, Raster- und
   Flex-Kinder duerfen schrumpfen. Der Name im Hero bleibt in px und ungetrennt. */
html.a11y-gross :where(main,footer,.kopf) *{min-width:0}
html.a11y-gross :is(h1,h2,h3,p,li,dt,dd,a,b,small,label,legend,summary,figcaption,blockquote p,span):not(.held__name){overflow-wrap:anywhere}
html.a11y-gross :is(.held__dach,.held__unter,.kicker,.titelzeile h2,.paket__titel,.portfolio span,.fakten__liste dt,.fuss__titel,.logo__name,.knopf,.textlink,.held__zahlen dd,.termin__art,.filter button){letter-spacing:.03em!important}
html.a11y-gross .knopf{white-space:normal;text-align:center;height:auto;line-height:1.25}
html.a11y-gross .held__zahlen{flex-wrap:wrap}
html.a11y-gross .held__name{white-space:nowrap;overflow-wrap:normal}
html.a11y-gross .preise__zeile{flex-wrap:wrap}
html.a11y-gross .preise__zeile::after{display:none}
html.a11y-gross .preise__zeile dd{margin-left:auto}
html.a11y-gross .paket__titel{padding:8px}

/* ---------- Lupen-Menue (ab 150 %) ----------
   Ersetzt im Grossmodus das normale Menue: vier Abschnitte mit Ueberschrift,
   volle Breite, grosse Zeilen, aktuelle Seite mit Schild "Du bist hier" statt nur
   Farbe, Darstellung als ausgeschriebene Knoepfe. Alles in rem, waechst mit. */
.menue__gross{display:none}
html.a11y-gross .menue__gruppe,html.a11y-gross .menue__extra,html.a11y-gross .menue>.menue__knopf{display:none!important}
html.a11y-gross .menue__gross{display:block;width:100%;max-width:56rem;margin:0 auto;padding-bottom:2rem;text-align:left}
html.a11y-gross .menue{justify-content:flex-start!important;align-items:stretch}
.menue__titel{font:800 1.5rem/1.2 'Mulish',system-ui,sans-serif;margin:0 0 .4rem;color:var(--fg)}
.menue__gross h2{font:800 .95rem/1.3 'Mulish',system-ui,sans-serif!important;letter-spacing:.06em!important;text-transform:uppercase!important;
  color:var(--fg);margin:1.8rem 0 .4rem;padding-bottom:.45rem;border-bottom:3px solid var(--accent)}
.menue__gross ul{list-style:none;margin:0;padding:0}
html.a11y-gross .menue .menue__gross a{display:flex!important;align-items:center;justify-content:space-between;gap:.9rem;min-height:3.25rem;
  padding:.65rem .35rem!important;border:0!important;border-bottom:1.5px solid var(--line)!important;
  font:600 1.15rem/1.3 'Mulish',system-ui,sans-serif!important;color:var(--fg);text-decoration:none!important;opacity:1!important;transform:none!important}
html.a11y-gross .menue .menue__gross a:hover{background:var(--bg2)}
html.a11y-gross .menue .menue__gross a:focus-visible{outline:4px solid #FFD400;outline-offset:-4px}
.menue__gross a span{min-width:0;overflow-wrap:break-word;hyphens:manual}
html.a11y-gross .menue__gross a span{overflow-wrap:break-word!important}
.menue__gross a svg{width:1.35rem;height:1.35rem;flex:none}
html.a11y-gross .menue .menue__gross a[aria-current]{flex-direction:column-reverse;align-items:flex-start;justify-content:center;gap:.35rem;background:var(--bg2);border-left:.4rem solid var(--accent)!important;padding-left:.8rem!important;font-weight:800!important}
.menue__gross em{flex:none;font:800 .8rem/1.2 'Mulish',sans-serif;font-style:normal;background:#FFD400;color:#111;padding:.25rem .55rem;border-radius:.4rem;border:1.5px solid #111}
html.a11y-gross .menue .menue__wege a{justify-content:flex-start}
.menue__wege a svg{color:var(--accent)}
.menue__darstellung{display:grid;gap:.6rem;margin-top:.6rem}
.menue__darstellung p{margin:0 0 .2rem;font:700 1rem/1.4 'Mulish',sans-serif;color:var(--fg)}
.menue__darstellung button{min-height:3.25rem;padding:.6rem 1rem;text-align:left;cursor:pointer;
  font:700 1.05rem/1.25 'Mulish',system-ui,sans-serif;color:var(--fg);background:var(--bg);border:2px solid var(--fg);border-radius:.6rem}
.menue__darstellung button:hover{background:var(--fg);color:var(--bg)}
.menue__darstellung button:focus-visible{outline:4px solid #FFD400;outline-offset:2px}

/* Menue-Knopf mit Wort statt nur drei Strichen */
html.a11y-gross .menueknopf{display:inline-flex!important;align-items:center;gap:.4rem;width:auto!important;height:auto;min-height:48px;padding:0 .9rem;margin-right:0;
  border:2px solid currentColor;border-radius:2rem}
html.a11y-gross .menueknopf svg{width:22px;height:22px}
html.a11y-gross .menueknopf .sr{position:static!important;width:auto!important;height:auto!important;margin:0!important;clip:auto!important;overflow:visible!important;
  white-space:nowrap;font:800 15px/1 'Mulish',system-ui,sans-serif}
html.a11y-gross.menue-offen .menueknopf{background:var(--fg);color:var(--bg)!important;border-color:var(--fg)}
/* Rechner: zwei Spalten statt bildschirmbreiter Zeilen – kurze Wege fuers Auge.
   Links "Seiten", rechts Angebote, Kontaktwege und Darstellung. */
@media (min-width:900px){
  html.a11y-gross .menue__gross{max-width:76rem;column-count:2;column-gap:4rem}
  .menue__gross .menue__titel{column-span:all}
  .menue__gross h2{break-after:avoid}
  .menue__gross ul,.menue__gross .menue__darstellung{break-inside:avoid}
  .menue__gross h2:first-of-type,.menue__gross h2:nth-of-type(2){margin-top:.8rem}
  .menue__gross h2:nth-of-type(2){break-before:column}
}
/* 200 % auf schmalen Telefonen: lange Woerter ("Kundenstimmen", "Bewerbungsfotos")
   passen sonst nicht neben den Pfeil und wuerden mitten im Wort getrennt. */
@media (max-width:430px){html.a11y-200 .menue .menue__gross a{font-size:.9rem!important}html.a11y-200 .menue__gross a svg{width:1.1rem;height:1.1rem}}