/* =========================================================================
   CLEAN CAR ZONE  |  Design System
   Theme Lock:      dark, ganze Seite. Keine invertierten Sektionen.
   Accent Lock:     --accent (#7CD4F5) ist die einzige Akzentfarbe.
   Shape Rule:      Buttons + Chips = pill / Karten = 16px / Inputs = 10px
   Type:            Archivo Expanded (Ueberschriften), Geist (Text), Geist Mono (Zahlen)
   Motiv:           Hex-Licht. Die sechseckigen Deckenleuchten der Halle sind das
                    Erkennungszeichen des Betriebs und ziehen sich als Raster,
                    Lichtreflex und Nummernform durch die Seite.
   Dials:           VARIANCE 7  |  MOTION 6  |  DENSITY 4
   ========================================================================= */

/* ---------- Schriften, lokal (keine Verbindung zu Google) ---------- */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-var-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/geist-var-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist-mono-var-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --ink:        #0A0B0C;
  --ink-2:      #101315;
  --ink-3:      #16191C;
  --ink-4:      #1D2124;

  --text:       #EDEFEC;
  --text-2:     #A2A9A6;
  --text-3:     #8A918E;   /* mind. 5:1 auf allen Flaechen */

  --accent:     #7CD4F5;
  --accent-dim: #56B4D8;
  --accent-ink: #0A0B0C;

  --line:       rgb(255 255 255 / .085);
  --line-2:     rgb(255 255 255 / .16);

  --r-card:     16px;
  --r-input:    10px;
  --r-pill:     999px;

  --shadow-card: 0 1px 0 rgb(255 255 255 / .04) inset, 0 24px 60px -30px rgb(2 12 18 / .92);

  --display:    "Archivo","Geist",system-ui,sans-serif;
  --mono:       "Geist Mono",ui-monospace,monospace;
  --nav-h:      80px;
  --hexclip:    polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  --hex:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%237CD4F5' stroke-width='1.1'/%3E%3C/svg%3E");
  --hex-hell:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23F2FBFF' stroke-width='2.2'/%3E%3C/svg%3E");
  --grain:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --pad-x:      clamp(1.15rem, 4vw, 2.5rem);
  --sec-y:      clamp(4.5rem, 9vw, 8rem);
  --wrap:       1240px;

  --ease:       cubic-bezier(.16,1,.3,1);
  --dur:        .55s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--display);font-stretch:112%;font-weight:700;letter-spacing:-.02em;line-height:1.06}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--accent-ink);padding:.75rem 1.25rem;border-radius:0 0 var(--r-input) 0;font-weight:600}
.skip-link:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.wrap--narrow{max-width:860px}

/* ---------- Type scale ---------- */
h1,.h1{font-size:clamp(2.4rem,6.4vw,4.4rem);font-weight:700}
h2,.h2{font-size:clamp(1.85rem,4vw,3rem)}
h3{font-size:1.125rem;letter-spacing:-.015em}

.eyebrow{
  font-family:"Geist Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem;
}

.sec-head{max-width:64ch;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.sec-head p{color:var(--text-2);margin-top:1.1rem;max-width:62ch;font-size:1.02rem}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center p{margin-inline:auto}

.section{padding-block:var(--sec-y)}
.section--alt{background:var(--ink-2);border-block:1px solid var(--line)}
.section--flush{padding-bottom:0}
.section--form{background:var(--ink-2);border-top:1px solid var(--line)}

/* ---------- Buttons (Shape Rule: pill) ---------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  white-space:nowrap;
  padding:.72rem 1.4rem;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  font-weight:600;font-size:.94rem;letter-spacing:-.01em;cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s,border-color .18s,color .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn--sm{padding:.55rem 1.1rem;font-size:.88rem}
.btn--lg{padding:.95rem 1.9rem;font-size:1rem}
.btn--block{display:flex;width:100%}

.btn--accent{--btn-bg:var(--accent);--btn-fg:var(--accent-ink);--btn-bd:var(--accent)}
.btn--accent:hover{--btn-bg:#9BDFF8;--btn-bd:#9BDFF8}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--line-2)}
.btn--outline:hover{--btn-bd:var(--accent);--btn-fg:var(--accent)}
.btn--ghost{
  --btn-fg:var(--text);--btn-bd:rgb(255 255 255 / .28);
  background:rgb(10 11 12 / .42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{background:rgb(10 11 12 / .7);--btn-bd:rgb(255 255 255 / .5)}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:60}
/* Unschaerfe auf dem Pseudo-Element: backdrop-filter auf .nav selbst wuerde
   position:fixed im mobilen Menue an die Navigationshoehe binden. */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(10 11 12 / .72);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s}
.nav.is-stuck::before,.nav.is-open::before{border-bottom-color:var(--line);background:rgb(10 11 12 / .94)}
.nav__inner{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x);height:var(--nav-h);display:flex;align-items:center;gap:2rem}

.brand{display:inline-flex;align-items:center;gap:.8rem;flex:none}
.brand__emblem{display:block;height:62px;width:auto;flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}
.brand__name{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:1.12rem;letter-spacing:-.01em}
.brand__sub{margin-top:.22rem;font-size:.72rem;font-weight:500;color:var(--text-3)}
.nav__actions--end{margin-left:auto}
.nav__links a.is-active{color:var(--text)}
.nav__links a.is-active::after{transform:scaleX(1)}





.nav__links{display:flex;gap:1.85rem;margin-inline:auto;font-size:.93rem;color:var(--text-2)}
.nav__links a{position:relative;padding-block:.35rem;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__actions{display:flex;align-items:center;gap:1rem}
.nav__tel{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--text-2);font-family:"Geist Mono",monospace;transition:color .2s}
.nav__tel svg{width:15px;height:15px}
.nav__tel:hover{color:var(--accent)}

.nav__burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex-shrink:0;width:44px;height:44px;padding:0;border:1px solid var(--line-2);border-radius:var(--r-pill);background:transparent;cursor:pointer;transition:border-color .2s}
.nav__burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--text);transition:transform .3s var(--ease)}
.nav__burger:hover{border-color:var(--accent)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

.nav__mobile{
  position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;z-index:59;
  display:none;flex-direction:column;justify-content:space-between;gap:2rem;
  padding:1.25rem var(--pad-x) calc(1.5rem + env(safe-area-inset-bottom));
  background:var(--ink);border-top:1px solid var(--line);overflow-y:auto;isolation:isolate;
}
.nav__mobile::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--hex);background-size:56px 100px;opacity:.06;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);mask-image:linear-gradient(to bottom,#000,transparent 70%);pointer-events:none}
.nav__mobile-links{display:flex;flex-direction:column}
.nav__mobile-links a{font-family:var(--display);font-stretch:112%;font-weight:650;font-size:clamp(1.45rem,6vw,1.9rem);letter-spacing:-.015em;padding:.72rem 0;border-bottom:1px solid var(--line);color:var(--text);transition:color .2s,padding-left .3s var(--ease)}
.nav__mobile-links a:hover,.nav__mobile-links a:focus-visible{color:var(--accent);padding-left:.35rem}
.nav__mobile-actions{display:flex;flex-direction:column;gap:.75rem}
.nav__mobile-contact{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
html.menu-open{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .nav.is-open .nav__mobile{animation:menueEin .35s var(--ease)}
  @keyframes menueEin{from{opacity:0;transform:translateY(-10px)}}
}



/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(100dvh,880px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__video{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
/* Still-Modus: aktiv, solange keine Videodatei vorliegt.
   Langsame Kamerafahrt auf dem Poster, damit der Hero nicht tot wirkt. */
.hero__media--still{background:center/cover no-repeat var(--hero-still)}
.hero__media--still .hero__video{display:none}
.hero__media--still::before{
  content:"";position:absolute;inset:-4%;
  background:inherit;background-size:cover;background-position:center;
}
@media (prefers-reduced-motion:no-preference){
  .hero__media--still::before{animation:heroPan 26s ease-in-out infinite alternate}
  @keyframes heroPan{
    from{transform:scale(1.02) translate3d(0,0,0)}
    to{transform:scale(1.11) translate3d(-1.5%,-1%,0)}
  }
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top, var(--ink) 2%, rgb(10 11 12 / .55) 42%, rgb(10 11 12 / .30) 72%),
    linear-gradient(to right, rgb(10 11 12 / .88) 0%, rgb(10 11 12 / .42) 55%, transparent 88%);
}
.hero__inner{position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad-x) clamp(4rem,9vw,7rem)}
.hero__copy{max-width:min(720px,92%)}
.hero__title{margin-bottom:1.35rem;text-wrap:balance}
.hero__sub{color:var(--text-2);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:min(560px,100%);margin-bottom:2.1rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem}

.hero__soundless{
  position:absolute;right:var(--pad-x);bottom:clamp(4rem,9vw,7rem);
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgb(255 255 255 / .24);border-radius:var(--r-pill);
  background:rgb(10 11 12 / .45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--text);cursor:pointer;transition:border-color .2s,background-color .2s;
}
.hero__soundless:hover{border-color:var(--accent);color:var(--accent)}
.hero__soundless svg{width:17px;height:17px}
.hero__soundless .icon-play{display:none}
.hero__soundless.is-paused .icon-pause{display:none}
.hero__soundless.is-paused .icon-play{display:block}

/* Hero Entry (MOTION 6) */
@media (prefers-reduced-motion:no-preference){
  .hero__copy>*{opacity:0;transform:translateY(18px);animation:heroIn .85s var(--ease) forwards}
  .hero__copy>*:nth-child(1){animation-delay:.10s}
  .hero__copy>*:nth-child(2){animation-delay:.20s}
  .hero__copy>*:nth-child(3){animation-delay:.30s}
  .hero__copy>*:nth-child(4){animation-delay:.40s}
  @keyframes heroIn{to{opacity:1;transform:none}}
}

/* ---------- Trust Strip ---------- */
.trust{border-bottom:1px solid var(--line);background:var(--ink)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-inline:1px solid var(--line)}
.trust__item{background:var(--ink);padding:2rem clamp(1rem,2.2vw,1.9rem)}
.trust__num{display:block;font-family:"Geist Mono",monospace;font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:500;color:var(--accent);letter-spacing:-.04em;line-height:1}
.trust__label{display:block;margin-top:.7rem;font-size:.86rem;color:var(--text-2);line-height:1.45}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bento__cell{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--ink-3);min-height:270px;
  display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:var(--shadow-card);
  transition:border-color .3s,transform .4s var(--ease);
}
.bento__cell:hover{border-color:var(--line-2);transform:translateY(-3px)}
.bento__cell--wide{grid-column:span 2}
.bento__cell--img{min-height:340px}
.bento__cell--img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .8s var(--ease)}
.bento__cell--img:hover>img{transform:scale(1.045)}
.bento__cell--img::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgb(10 11 12 / .94) 10%,rgb(10 11 12 / .42) 48%,rgb(10 11 12 / .04) 100%)}
/* Kachel mit Vorher/Nachher nebeneinander. Die Fotos stammen aus
   unterschiedlichen Blickwinkeln, deshalb getrennt statt ueberblendet. */
.duo{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--ink)}
.duo img{width:100%;height:100%;object-fit:cover}
/* Doppelte Klasse, weil .compare__tag spaeter im Stylesheet steht und sonst gewinnt */
.duo .duo__tag{top:1rem;bottom:auto;z-index:2}
.duo .duo__tag--l{left:1rem}
.duo .duo__tag--r{left:calc(50% + 1rem);color:var(--accent);border-color:rgb(124 212 245 / .38)}
.bento__cell--tint{background:
  radial-gradient(120% 100% at 8% 0%, rgb(124 212 245 / .17), transparent 62%),
  linear-gradient(160deg, var(--ink-4), var(--ink-3));}
.bento__cell--line{background:
  linear-gradient(var(--ink-3),var(--ink-3)) padding-box,
  repeating-linear-gradient(115deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 13px);}
.bento__body{position:relative;z-index:2;padding:clamp(1.35rem,2.4vw,1.9rem)}
.bento__body h3{margin-bottom:.55rem}
.bento__body p{color:var(--text-2);font-size:.94rem;max-width:52ch}
.bento__stat{margin-top:1rem;font-size:.83rem;color:var(--text-3)}
.bento__stat span{font-family:"Geist Mono",monospace;color:var(--accent);font-size:.95rem}

/* ---------- Vorher / Nachher ---------- */
/* Die Reglerposition lebt in --pos. clip-path und Griff lesen denselben Wert,
   deshalb bleibt das Vorher-Bild immer in voller Groesse und wird nur beschnitten. */
.compare{max-width:960px;margin:0 auto;user-select:none}
.compare__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.1rem}
.compare__tab{
  border:1px solid var(--line-2);background:transparent;color:var(--text-2);
  border-radius:var(--r-pill);padding:.5rem 1.1rem;font-size:.88rem;font-weight:500;cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s;
}
.compare__tab:hover{color:var(--text);border-color:rgb(255 255 255 / .3)}
.compare__tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.compare__frame{
  --pos:50%;
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-card);
  cursor:ew-resize;touch-action:pan-y;
}
.compare__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s var(--ease)}
.compare__img--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare.is-loading .compare__img{opacity:.35}
.compare__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--accent);transform:translateX(-1px);pointer-events:none}
.compare__grip{position:absolute;top:50%;left:50%;translate:-50% -50%;width:52px;height:52px;border-radius:var(--r-pill);background:var(--accent);display:grid;place-items:center;box-shadow:0 8px 30px rgb(0 0 0 / .5)}
.compare__grip::before,.compare__grip::after{content:"";position:absolute;width:0;height:0;border-block:5px solid transparent}
.compare__grip::before{border-right:7px solid var(--accent-ink);left:14px}
.compare__grip::after{border-left:7px solid var(--accent-ink);right:14px}
.compare__tag{position:absolute;bottom:1rem;font-family:"Geist Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;background:rgb(10 11 12 / .72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:.4rem .8rem;border-radius:var(--r-pill);border:1px solid var(--line-2);pointer-events:none}
.compare__tag--l{left:1rem}
.compare__tag--r{right:1rem;color:var(--accent);border-color:rgb(124 212 245 / .38)}
.compare__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare__frame:has(.compare__range:focus-visible) .compare__grip{box-shadow:0 0 0 4px rgb(124 212 245 / .35),0 8px 30px rgb(0 0 0 / .5)}

/* Statisches Paar: fuer Aufnahmen aus unterschiedlicher Perspektive,
   die sich nicht ehrlich deckungsgleich machen lassen. */
.pair{max-width:960px;margin:clamp(2.2rem,4vw,3rem) auto 0}
.pair__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pair__item{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-card)}
.pair__item img{width:100%;height:100%;object-fit:cover}
.pair figcaption{margin-top:.85rem;text-align:center;color:var(--text-3);font-size:.86rem}

/* ---------- Preise ---------- */
.tiers{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:14px;align-items:stretch}
.tier{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--ink-3);padding:clamp(1.6rem,2.6vw,2.15rem);
  box-shadow:var(--shadow-card);
}
.tier--feature{
  border-color:rgb(124 212 245 / .38);
  background:
    radial-gradient(130% 90% at 50% 0%, rgb(124 212 245 / .12), transparent 60%),
    var(--ink-3);
  box-shadow:0 1px 0 rgb(255 255 255 / .05) inset,0 30px 80px -40px rgb(124 212 245 / .35);
}
.tier__badge{
  position:absolute;top:-11px;left:50%;translate:-50% 0;
  background:var(--accent);color:var(--accent-ink);
  font-family:"Geist Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.32rem .8rem;border-radius:6px;font-weight:500;
}
.tier__name{font-size:1.3rem}
.tier__for{color:var(--text-3);font-size:.86rem;margin-top:.35rem}
.tier__price{display:flex;align-items:baseline;gap:.4rem;margin:1.5rem 0 .25rem;font-family:"Geist Mono",monospace}
.tier__from{font-size:.8rem;color:var(--text-3)}
.tier__amount{font-size:clamp(2.5rem,4.4vw,3.2rem);font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--text)}
.tier--feature .tier__amount{color:var(--accent)}
.tier__cur{font-size:.95rem;color:var(--text-2)}
/* Pakete ohne Pauschalpreis: Wort statt Zahl, deshalb Textschrift statt Mono */
.tier__price--anfrage{flex-direction:column;align-items:flex-start;gap:.35rem;font-family:inherit}
.tier__price--anfrage .tier__amount{font-family:var(--display);font-stretch:112%;font-size:clamp(1.55rem,2.4vw,1.95rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.tier--feature .tier__price--anfrage .tier__amount{color:var(--accent)}
.tier__hint{font-size:.82rem;color:var(--text-3)}
.tier__time{font-size:.83rem;color:var(--text-3);margin-bottom:1.6rem}
.tier__list{display:grid;gap:.72rem;align-content:start;margin-bottom:1.9rem;flex:1}
.tier__list li{position:relative;padding-left:1.6rem;font-size:.925rem;color:var(--text-2)}
.tier__list li::before{
  content:"";position:absolute;left:0;top:.52em;width:9px;height:5px;
  border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
  rotate:-45deg;
}

.classes{margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line)}
.classes__title{font-family:"Geist Mono",monospace;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:1.1rem}
.classes__row{display:flex;flex-wrap:wrap;gap:.65rem}
.chip{
  display:inline-flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.55rem 1.05rem;font-size:.86rem;color:var(--text-3);background:var(--ink-3);
}
.chip strong{color:var(--text);font-weight:600}
.chip em{font-style:normal;font-family:"Geist Mono",monospace;color:var(--accent);font-size:.83rem}

.addons{margin-top:3.2rem}
.addons__title{font-size:1.25rem;margin-bottom:1.4rem}
.addons__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.addon{
  display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--ink-3);padding:1.15rem 1.35rem;
  transition:border-color .25s;
}
.addon:hover{border-color:var(--line-2)}
.addon__name{font-weight:600;font-size:.98rem}
.addon__price{font-family:"Geist Mono",monospace;color:var(--accent);font-size:.95rem;text-align:right;white-space:nowrap}
.addon__note{grid-column:1/-1;color:var(--text-3);font-size:.845rem}

/* ---------- Ablauf ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:step}
.flow__step{position:relative;padding:3.1rem 1.6rem 0 0;border-top:1px solid var(--line-2);counter-increment:step}
.flow__step::before{content:"";position:absolute;top:-25px;left:0;width:44px;height:50px;background:rgb(124 212 245 / .6);clip-path:var(--hexclip)}
.flow__step::after{content:counter(step,decimal-leading-zero);position:absolute;top:-23.5px;left:1.5px;width:41px;height:47px;display:grid;place-items:center;background:var(--ink-2);clip-path:var(--hexclip);font-family:var(--mono);font-size:.78rem;color:var(--accent)}
.flow__step h3{margin-bottom:.6rem}
.flow__step p{color:var(--text-2);font-size:.92rem;max-width:34ch}

/* ---------- Galerie ---------- */
/* Desktop: vier Spalten, jede zweite leicht versetzt. Das bricht das Raster
   auf, ohne die Kacheln unterschiedlich gross zu machen. */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:2.5rem}
.gallery__item{margin:0;overflow:hidden;aspect-ratio:3/4;border-radius:var(--r-card);border:1px solid var(--line);background:var(--ink-3)}
.gallery__item:nth-child(even){transform:translateY(2.5rem)}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gallery__item:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:no-preference){
  .gallery__item.reveal:nth-child(even){transform:translateY(calc(2.5rem + 22px))}
  .gallery__item.reveal.is-in:nth-child(even){transform:translateY(2.5rem)}
}
.inline-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.inline-link:hover{color:var(--text)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-weight:600;font-size:1.02rem;letter-spacing:-.015em;transition:color .2s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--accent)}
.faq__item summary::after{
  content:"";position:absolute;right:.4rem;top:calc(50% - 1px);
  width:13px;height:2px;background:var(--accent);
}
.faq__item summary::before{
  content:"";position:absolute;right:calc(.4rem + 5.5px);top:calc(50% - 7px);
  width:2px;height:14px;background:var(--accent);transition:transform .3s var(--ease),opacity .2s;
}
.faq__item[open] summary::before{transform:rotate(90deg);opacity:0}
.faq__body{padding:0 3rem 1.6rem 0}
.faq__body p{color:var(--text-2);font-size:.96rem;max-width:72ch}
@media (prefers-reduced-motion:no-preference){
  .faq__item[open] .faq__body{animation:faqIn .38s var(--ease)}
  @keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* ---------- Formular ---------- */
.form-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.form-aside h2{margin-bottom:1.2rem}
.form-aside__lead{color:var(--text-2);max-width:46ch}
.contact-list{margin:2.6rem 0 0;display:grid;gap:1.4rem}
.contact-list div{display:grid;gap:.2rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.contact-list dt{font-size:.82rem;font-weight:500;color:var(--text-3)}
.contact-list dd{margin:0;font-size:.96rem;color:var(--text)}
.contact-list a:hover{color:var(--accent)}

.form{
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--ink-3);padding:clamp(1.5rem,3vw,2.4rem);
  display:grid;gap:1.15rem;box-shadow:var(--shadow-card);
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.field{display:grid;gap:.45rem;min-width:0}
.field--set{border:0;padding:0;margin:0}
.field label,.field legend{font-size:.86rem;font-weight:500;color:var(--text);padding:0}
.req{color:var(--accent)}
.field input,.field select,.field textarea{
  width:100%;background:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-input);
  padding:.78rem .95rem;font-size:.95rem;color:var(--text);
  transition:border-color .2s,background-color .2s;
}
.field textarea{resize:vertical;min-height:104px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgb(255 255 255 / .26)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:var(--ink-4)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);background-position:calc(100% - 20px) 54%,calc(100% - 14px) 54%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem}
.field select option{background:var(--ink-3);color:var(--text)}
.field__hint{font-size:.8rem;color:var(--text-3)}
.field__hint a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.field__err{font-size:.8rem;color:#FF8A7A;min-height:0}
.field__err:empty{display:none}
.field.is-invalid input,.field.is-invalid select{border-color:#FF8A7A}

.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem .9rem;margin-top:.2rem}
.check{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--text-2);cursor:pointer;line-height:1.45}
.check input{appearance:none;flex:none;width:18px;height:18px;margin-top:.1rem;border:1px solid var(--line-2);border-radius:5px;background:var(--ink);cursor:pointer;transition:background-color .18s,border-color .18s;position:relative}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:9px;border-right:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);rotate:45deg}
.check--consent{margin-top:.4rem;font-size:.86rem}
.check--consent a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

#submitBtn{margin-top:.5rem;position:relative}
.btn__spinner{display:none;width:16px;height:16px;border:2px solid rgb(10 11 12 / .28);border-top-color:var(--accent-ink);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{rotate:360deg}}
#submitBtn.is-loading{pointer-events:none;opacity:.75}
#submitBtn.is-loading .btn__spinner{display:block}

.form__status{font-size:.92rem;border-radius:var(--r-input);padding:0;transition:padding .2s}
.form__status:empty{display:none}
.form__status.is-ok{background:rgb(124 212 245 / .12);border:1px solid rgb(124 212 245 / .35);color:var(--accent);padding:.9rem 1.1rem}
.form__status.is-err{background:rgb(255 138 122 / .09);border:1px solid rgb(255 138 122 / .32);color:#FF8A7A;padding:.9rem 1.1rem}

/* ---------- Footer ---------- */
.foot{background:var(--ink);border-top:1px solid var(--line);padding-top:clamp(3rem,6vw,4.5rem)}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem}
.foot__logo{display:inline-block}
.foot__logo img{display:block;width:220px;height:auto}
.foot__claim{margin-top:1.1rem;color:var(--text-3);font-size:.9rem;max-width:36ch}
.foot__col{display:flex;flex-direction:column;gap:.6rem}
.foot__col h3{font-family:var(--display);font-stretch:112%;font-size:.95rem;font-weight:650;color:var(--text);margin-bottom:.4rem}
.foot__col a{color:var(--text-2);font-size:.91rem;transition:color .2s}
.foot__col a:hover{color:var(--accent)}
.foot__col address{font-style:normal;color:var(--text-2);font-size:.91rem;line-height:1.7}
.foot__bar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.5rem;border-top:1px solid var(--line);color:var(--text-3);font-size:.84rem}
.foot__bar a:hover{color:var(--accent)}

/* ---------- Scroll Reveal (MOTION 6) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal.is-in{opacity:1;transform:none}
}


/* ---------- Hero ab 900 px: Film im Hochformat-Rahmen rechts ----------
   Das Kundenmaterial ist 480x848. Vollflaechig auf Desktop wuerde es vierfach
   hochskaliert und weich. Im Rahmen laeuft es nahe der Originalgroesse,
   dahinter liegt das scharfe Querformat-Standbild. */
@media (min-width:900px){
  .hero{--hero-edge:max(var(--pad-x), calc((100% - var(--wrap)) / 2 + var(--pad-x)));--hero-pb:clamp(4rem,9vw,7rem);min-height:min(100dvh,860px)}
  .hero__media{background:center/cover no-repeat url("../img/hero-poster.jpg")}
  .hero__scrim{
    z-index:0;
    background:
      linear-gradient(to top, var(--ink) 2%, rgb(10 11 12 / .55) 40%, rgb(10 11 12 / .30) 72%),
      linear-gradient(to right, rgb(10 11 12 / .90) 0%, rgb(10 11 12 / .55) 50%, rgb(10 11 12 / .35) 100%);
  }
  .hero__video{
    position:absolute;z-index:1;
    right:var(--hero-edge);bottom:var(--hero-pb);
    width:auto;height:min(66vh,600px);aspect-ratio:9/16;
    border-radius:var(--r-card);border:1px solid rgb(255 255 255 / .16);
    box-shadow:0 40px 90px -30px rgb(0 0 0 / .9);
  }
  .hero__copy{max-width:min(600px,54%)}
  .hero__title{font-size:clamp(2.4rem,4.4vw,3.9rem)}
  .hero__soundless{right:calc(var(--hero-edge) + 14px);bottom:calc(var(--hero-pb) + 14px);z-index:2}
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  /* 2 Spalten: alle Zellen span 1, damit 6 Zellen exakt 3 volle Reihen ergeben */
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento__cell--wide{grid-column:span 1}
  .bento__cell--img{min-height:300px}
  .tiers{grid-template-columns:1fr;max-width:600px}
  .tier--feature{order:-1}
  .flow{grid-template-columns:repeat(2,1fr);gap:0 1.5rem}
  .form-layout{grid-template-columns:1fr;gap:2.5rem}
  .foot__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:900px){
  .trust__grid{grid-template-columns:repeat(2,1fr)}
}

/* Navigation: Der Markenblock mit Logo ist rund 270 px breit.
   Unter 1200 px faellt die Telefonnummer weg, unter 1024 px kommt das Menue,
   unter 560 px der Button (er steht gross im Hero und im Menue). */
@media (max-width:1199px){
  .nav__tel{display:none}
}
@media (max-width:1023px){
  .nav__links{display:none}
  .nav__actions{margin-left:auto}
  .nav__burger{display:flex}
  .nav__inner{gap:1rem}
  .nav.is-open .nav__mobile{display:flex}
}
@media (max-width:559px){
  .nav__actions .btn{display:none}
  .brand__emblem{height:48px}
  .brand{gap:.6rem}
  .brand__sub{display:none}
  .brand__name{font-size:1rem}
}

@media (max-width:680px){
  html{scroll-padding-top:80px}
  .hero{min-height:min(100dvh,720px)}
  .hero__copy{max-width:100%}
  .hero__cta .btn{flex:1 1 100%}
  .hero__soundless{bottom:auto;top:calc(72px + 1rem)}
  .bento{grid-template-columns:1fr}
  .bento__cell--wide{grid-column:span 1}
  .bento__cell,.bento__cell--img{min-height:0}
  .bento__cell--img{min-height:290px}
  .addons__grid{grid-template-columns:1fr}
  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:.5rem;margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x);scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery__item{flex:0 0 68%;scroll-snap-align:start}
  .gallery__item:nth-child(even),.gallery__item.reveal:nth-child(even),.gallery__item.reveal.is-in:nth-child(even){transform:none}
  .flow{grid-template-columns:1fr}
  .flow__step{padding-right:0;margin-top:1.4rem}
  .field-row{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .compare__frame{aspect-ratio:1/1}
  .compare__grip{width:44px;height:44px}
  .pair__grid{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr;gap:2rem}
  .foot__bar{flex-direction:column;gap:.4rem}
  .section--form .wrap{padding-inline:var(--pad-x)}
}

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

/* ---------- Print ---------- */
@media print{
  .nav,.hero__media,.hero__soundless,.compare__range,.form,.foot__bar{display:none}
  body{background:#fff;color:#000}
}

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal{padding-block:clamp(3.5rem,7vw,6rem)}
.legal h1{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:2.5rem}
.legal h2{font-size:1.35rem;margin:2.8rem 0 .9rem}
.legal h3{font-size:1.02rem;margin:1.8rem 0 .5rem;color:var(--text)}
.legal p,.legal li{color:var(--text-2);font-size:.96rem;max-width:76ch}
.legal p+p{margin-top:.9rem}
.legal ul{list-style:disc;padding-left:1.3rem;display:grid;gap:.4rem;margin-top:.7rem}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal__note{margin-top:3rem;padding:1.15rem 1.35rem;border:1px solid rgb(124 212 245 / .3);border-radius:var(--r-card);background:rgb(124 212 245 / .06);font-size:.9rem;color:var(--text-2)}
.legal__back{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:2rem;color:var(--text-3);font-size:.9rem}
.legal__back:hover{color:var(--accent)}
.classes__note{margin-top:1rem;font-size:.85rem;color:var(--text-3);max-width:70ch}


/* =========================================================================
   HEX-LICHT  |  Markensprache aus der Halle
   ========================================================================= */

/* Feine Koernung gegen die digitale Flachheit. Fest, ohne Mausereignisse. */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background-image:var(--grain);opacity:.035}

/* Hero: das Deckenlicht als Raster, ein Lichtband zieht langsam darueber */
.hero__hex{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--hex);background-size:64px 114px;opacity:.13;
  -webkit-mask-image:radial-gradient(55% 75% at 80% 45%,#000 0%,transparent 72%);
          mask-image:radial-gradient(55% 75% at 80% 45%,#000 0%,transparent 72%);
}
.hero__hex::after{
  content:"";position:absolute;inset:0;
  background-image:var(--hex-hell);background-size:64px 114px;
  -webkit-mask-image:linear-gradient(105deg,transparent 42%,#000 50%,transparent 58%);
          mask-image:linear-gradient(105deg,transparent 42%,#000 50%,transparent 58%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;
  -webkit-mask-position:110% 0;mask-position:110% 0;
  opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  .hero__hex::after{opacity:1;animation:hexLicht 11s cubic-bezier(.45,0,.2,1) 1.2s infinite}
  @keyframes hexLicht{
    0%{-webkit-mask-position:110% 0;mask-position:110% 0}
    55%,100%{-webkit-mask-position:-10% 0;mask-position:-10% 0}
  }
}
@media (max-width:899px){ .hero__hex{display:none} }

/* Abschnitte mit leisem Raster in einer Ecke */
.section--hex{position:relative;isolation:isolate}
.section--hex::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--hex);background-size:56px 100px;opacity:.07;
  -webkit-mask-image:radial-gradient(60% 70% at 100% 0%,#000,transparent 72%);
          mask-image:radial-gradient(60% 70% at 100% 0%,#000,transparent 72%);
}

/* Lichtreflex unter dem Mauszeiger, wie das Hallenlicht im polierten Lack.
   Die Klasse .spot setzt main.js, nur auf Geraeten mit Maus. */
@media (hover:hover) and (pointer:fine){
  .spot{--mx:50%;--my:50%}
  .spot::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
    background-image:var(--hex-hell);background-size:42px 75px;opacity:0;
    transition:opacity .4s var(--ease);
    -webkit-mask-image:radial-gradient(200px circle at var(--mx) var(--my),rgb(0 0 0 / .55),transparent 70%);
            mask-image:radial-gradient(200px circle at var(--mx) var(--my),rgb(0 0 0 / .55),transparent 70%);
  }
  .spot:hover::before{opacity:.35}
  .spot:hover{border-color:rgb(124 212 245 / .3)}
  .tier.spot>*:not(.tier__badge),.addon.spot>*{position:relative;z-index:3}
  .addon.spot{position:relative;overflow:hidden}
}

/* FAQ: Einordnung links, Antworten rechts */
.faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.faq-aside{position:sticky;top:calc(var(--nav-h) + 2rem);display:flex;flex-direction:column;gap:1rem}
.faq-aside p{color:var(--text-2);max-width:40ch}
.faq-aside__more{font-size:.92rem}
@media (max-width:900px){
  .faq-layout{grid-template-columns:1fr}
  .faq-aside{position:static}
}

/* Hero-Ueberschrift: breite Schrift braucht etwas weniger Groesse */
.hero__title{font-stretch:116%;font-weight:760}
@media (min-width:900px){ .hero__title{font-size:clamp(2.3rem,3.9vw,3.45rem)} }

@media (max-width:360px){
  .brand__emblem{height:42px}
  .brand__name{font-size:.94rem}
}

/* ---------- 404 ---------- */
.notfound{min-height:calc(100dvh - var(--nav-h) - 80px);display:flex;align-items:center;padding-block:4rem}
.notfound__inner{display:flex;flex-direction:column;gap:1.2rem;max-width:760px}
.notfound__code{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(5rem,16vw,10rem);line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgb(124 212 245 / .55)}
.notfound__text{color:var(--text-2);max-width:52ch}
.notfound__links{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.6rem}

/* Handy: breite Schrift wuerde die Hero-Zeile sprengen, deshalb normale Laufweite */
@media (max-width:559px){
  .hero__title{font-size:clamp(1.7rem,8.4vw,2.3rem);font-stretch:100%;letter-spacing:-.025em}
}

/* Vertrauensstreifen: Spalten duerfen schrumpfen, lange Woerter passen sich an */
.trust__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.trust__label{overflow-wrap:break-word;hyphens:auto}
@media (max-width:900px){ .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:430px){
  .trust__item{padding:1.5rem .9rem}
  .trust__num{font-size:clamp(1.2rem,5.6vw,1.5rem)}
}

/* Einzelleistungen: sehr schmale Handys, Preis unter den Namen */
.addon{min-width:0}
.addon__name,.addon__note{min-width:0;overflow-wrap:break-word;hyphens:auto}
@media (max-width:360px){
  .addon{grid-template-columns:1fr}
  .addon__price{text-align:left;white-space:normal}
}

/* =========================================================================
   ZONE PLANER  (Online-Termin mit Zustands-Check und KI-Fotocheck)
   Hex-Motiv: Schrittnummern, Zustandsstufen und Erfolgssiegel als Sechseck.
   ========================================================================= */
.planer-head{margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.planer{position:relative}

/* Fortschritt */
.planer__steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;margin-bottom:1.4rem;counter-reset:s}
.planer__steps li{position:relative}
.planer__steps li+li::before{content:"";position:absolute;top:19px;right:calc(50% + 24px);width:calc(100% - 48px + .5rem);height:1px;background:var(--line-2)}
.planer__steps button{width:100%;display:flex;flex-direction:column;align-items:center;gap:.45rem;background:none;border:0;padding:0;cursor:pointer;color:var(--text-3);font-size:.8rem;font-weight:500}
.planer__steps button:disabled{cursor:default;opacity:.55}
.planer__nr{display:grid;place-items:center;width:38px;height:40px;clip-path:var(--hexclip);background:var(--line-2);font-family:var(--mono);font-size:.85rem;color:var(--text);position:relative;isolation:isolate}
.planer__nr::after{content:"";position:absolute;inset:1px;clip-path:var(--hexclip);background:var(--ink-2);z-index:-1}
.planer__steps button[aria-current="step"]{color:var(--text)}
.planer__steps button[aria-current="step"] .planer__nr{background:var(--accent);color:var(--accent);font-weight:700}
.planer__steps button[aria-current="step"] .planer__nr::after{background:#0E2630}
.planer__steps button.is-fertig{color:var(--text-2)}
.planer__steps button.is-fertig .planer__nr{background:var(--accent);color:var(--accent-ink)}
.planer__steps button.is-fertig .planer__nr::after{background:var(--accent)}
.planer__steps button:not(:disabled):hover{color:var(--accent)}

/* Raster: Schritte links, Zettel rechts */
.planer__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.4rem;align-items:start}
.planer__main{border:1px solid var(--line);border-radius:var(--r-card);background:var(--ink-3);box-shadow:var(--shadow-card);padding:clamp(1.3rem,3vw,2.2rem);display:grid;gap:1.5rem;min-width:0}
.schritt{display:grid;gap:1.5rem;min-width:0}
.schritt[hidden]{display:none}
.schritt__titel{font-size:clamp(1.25rem,2.4vw,1.6rem);outline:none}
.schritt__lead{color:var(--text-2);margin-top:-.8rem;max-width:60ch}
.schritt__klein{font-size:.8rem;color:var(--text-3);max-width:70ch}
.schritt__klein a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.gruppe{border:0;margin:0;padding:0;display:grid;gap:.7rem;min-width:0}
.gruppe legend{font-size:.86rem;font-weight:600;color:var(--text);padding:0;margin-bottom:.7rem}
.gruppe__opt{font-weight:400;color:var(--text-3);font-size:.8rem;margin-left:.35rem}

/* Kacheln (Klasse, Paket) */
.kacheln{display:grid;gap:.6rem}
.kacheln--klasse{grid-template-columns:repeat(3,minmax(0,1fr))}
.kacheln--paket{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kachel{position:relative;cursor:pointer;min-width:0}
.kachel input,.pille input,.stufe input,.segment input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.kachel__in{display:grid;gap:.2rem;height:100%;padding:.85rem 1rem;border:1px solid var(--line-2);border-radius:12px;background:var(--ink);transition:border-color .18s,background-color .18s,transform .18s var(--ease)}
.kachel__in strong{font-size:.93rem;font-weight:600}
.kachel__in small{font-size:.78rem;color:var(--text-3);line-height:1.4}
.kachel__in em{font-style:normal;font-family:var(--mono);color:var(--accent);font-size:.74rem}
.kachel__badge{justify-self:start;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:.12rem .5rem;border-radius:var(--r-pill);margin-bottom:.2rem}
.kachel:hover .kachel__in{border-color:rgb(255 255 255 / .3)}
.kachel input:checked+.kachel__in{border-color:var(--accent);background:rgb(124 212 245 / .09);box-shadow:inset 0 0 0 1px var(--accent)}
.kachel input:focus-visible+.kachel__in,.pille input:focus-visible+span,.stufe input:focus-visible+.stufe__in,.segment input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* Pillen (Zusatz, Merkmale) */
.pillen{display:flex;flex-wrap:wrap;gap:.45rem}
.pille{position:relative;cursor:pointer}
.pille span,.pille--knopf{display:inline-flex;align-items:center;gap:.4rem;padding:.48rem .9rem;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:.84rem;color:var(--text-2);background:var(--ink);transition:border-color .18s,color .18s,background-color .18s}
.pille:hover span{border-color:rgb(255 255 255 / .3);color:var(--text)}
.pille input:checked+span{border-color:var(--accent);color:var(--accent-ink);background:var(--accent)}
.pille input:checked+span::before{content:"";width:8px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;rotate:-45deg;margin-top:-3px}
.pille--knopf{cursor:pointer;font:inherit;font-size:.84rem;color:var(--accent);border-color:rgb(124 212 245 / .45)}
.pille--knopf:hover{background:rgb(124 212 245 / .1)}

/* Zustandsskala: vier Stufen, Hex-Balken zeigt die Stärke */
.skala{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem}
.stufe{position:relative;cursor:pointer;min-width:0}
.stufe__in{display:grid;gap:.25rem;height:100%;padding:.85rem .9rem;border:1px solid var(--line-2);border-radius:12px;background:var(--ink);transition:border-color .18s,background-color .18s}
.stufe__in strong{font-size:.9rem}
.stufe__in small{font-size:.76rem;color:var(--text-3);line-height:1.4}
.stufe__hex{display:flex;gap:3px;margin-bottom:.35rem}
.stufe__hex i{width:11px;height:12px;clip-path:var(--hexclip);background:var(--line-2)}
.stufe:nth-child(1) .stufe__hex i:nth-child(-n+1),
.stufe:nth-child(2) .stufe__hex i:nth-child(-n+2),
.stufe:nth-child(3) .stufe__hex i:nth-child(-n+3),
.stufe:nth-child(4) .stufe__hex i:nth-child(-n+4){background:var(--text-3)}
.stufe:hover .stufe__in{border-color:rgb(255 255 255 / .3)}
.stufe input:checked+.stufe__in{border-color:var(--accent);background:rgb(124 212 245 / .09);box-shadow:inset 0 0 0 1px var(--accent)}
.stufe:nth-child(1) input:checked+.stufe__in .stufe__hex i:nth-child(-n+1),
.stufe:nth-child(2) input:checked+.stufe__in .stufe__hex i:nth-child(-n+2),
.stufe:nth-child(3) input:checked+.stufe__in .stufe__hex i:nth-child(-n+3),
.stufe:nth-child(4) input:checked+.stufe__in .stufe__hex i:nth-child(-n+4){background:var(--accent)}

/* Segmente (Zeiten, letzte Aufbereitung, Abholung) */
.segment{display:flex;flex-wrap:wrap;gap:.45rem}
.segment label{position:relative;cursor:pointer}
.segment span{display:inline-flex;padding:.6rem 1rem;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:.86rem;color:var(--text-2);background:var(--ink);transition:border-color .18s,color .18s,background-color .18s}
.segment label:hover span{border-color:rgb(255 255 255 / .3);color:var(--text)}
.segment input:checked+span{border-color:var(--accent);color:var(--accent);background:rgb(124 212 245 / .1);font-weight:600}
#abholFelder{margin-top:.4rem}
#abholFelder[hidden]{display:none}

/* Fotos */
.fotos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.foto{position:relative;aspect-ratio:4/5;border:1px dashed rgb(255 255 255 / .22);border-radius:12px;background:var(--ink) var(--hex) center/28px 50px;background-blend-mode:normal;overflow:hidden;cursor:pointer;transition:border-color .18s}
.foto::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(10 11 12 / .78),rgb(10 11 12 / .92))}
.foto:hover{border-color:var(--accent)}
.foto input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.foto:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.foto__leer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:.8rem;text-align:center;font-size:.8rem;color:var(--text-2);pointer-events:none;line-height:1.35}
.foto__plus{width:34px;height:38px;clip-path:var(--hexclip);background:rgb(124 212 245 / .16);position:relative}
.foto__plus::before,.foto__plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--accent);translate:-50% -50%}
.foto__plus::after{rotate:90deg}
.foto__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.foto.is-voll{border-style:solid;border-color:rgb(124 212 245 / .55)}
.foto__weg{position:absolute;top:6px;right:6px;z-index:3;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);background:rgb(10 11 12 / .78);cursor:pointer}
.foto__weg::before,.foto__weg::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--text);translate:-50% -50%;rotate:45deg}
.foto__weg::after{rotate:-45deg}
.foto.is-laden::after{content:"";position:absolute;left:50%;top:50%;z-index:4;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid rgb(124 212 245 / .25);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}

/* KI-Ergebnis */
.ki{display:grid;gap:1rem;justify-items:start}
.ki .btn{position:relative}
.ki .btn.is-loading{pointer-events:none;opacity:.8}
.ki .btn.is-loading .btn__spinner,.planer__nav .btn.is-loading .btn__spinner{display:block}
.ki__ergebnis{width:100%}
.ki__ergebnis:empty{display:none}
.ki__laeuft{display:flex;align-items:center;gap:.7rem;font-size:.88rem;color:var(--text-2)}
.ki__laeuft span{flex:none;width:14px;height:16px;clip-path:var(--hexclip);background:var(--accent);animation:kiPuls 1.1s ease-in-out infinite}
@keyframes kiPuls{50%{opacity:.25;scale:.8}}
.ki__karte{border:1px solid rgb(124 212 245 / .35);border-radius:12px;background:linear-gradient(160deg,rgb(124 212 245 / .09),rgb(124 212 245 / .02) 60%);padding:1.1rem 1.2rem;display:grid;gap:.8rem}
.ki__kopf{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.9rem}
.ki__kopf span{font-family:var(--mono);font-size:.75rem;color:var(--accent)}
.ki__werte{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.9rem;color:var(--text-2)}
.ki__stufe{margin-left:.35rem;padding:.12rem .55rem;border-radius:var(--r-pill);font-size:.8rem;font-weight:600;color:var(--text);background:var(--line-2)}
.ki__stufe[data-n="1"],.ki__stufe[data-n="2"]{color:var(--accent-ink);background:var(--accent)}
.ki__stufe[data-n="3"]{color:#1a1204;background:#F5C77C}
.ki__stufe[data-n="4"]{color:#1d0806;background:#FF8A7A}
.ki__befunde{display:grid;gap:.3rem;font-size:.86rem;color:var(--text-2)}
.ki__befunde li{padding-left:1rem;position:relative}
.ki__befunde li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:7px;clip-path:var(--hexclip);background:var(--accent)}
.ki__diff{font-size:.88rem}
.ki__diff s{color:var(--text-3)}
.ki__diff strong{color:var(--accent)}
.ki__hinweis{font-size:.86rem;color:var(--text-2);border-left:2px solid var(--line-2);padding-left:.8rem}
.ki__empf-titel{font-size:.8rem;color:var(--text-3);margin-bottom:-.3rem}

/* Kalender */
.kalender{border:1px solid var(--line);border-radius:12px;background:var(--ink);padding:1rem;display:grid;gap:.7rem;max-width:460px;transition:opacity .2s}
.kalender[hidden]{display:none}
.kalender.is-aus{opacity:.35;pointer-events:none}
.kalender__kopf{display:flex;align-items:center;justify-content:space-between}
.kalender__monat{font-family:var(--display);font-stretch:108%;font-weight:650;text-transform:capitalize}
.kalender__pfeil{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer}
.kalender__pfeil:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.kalender__pfeil:disabled{opacity:.3;cursor:default}
.kalender__woche,.kalender__tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.kalender__woche span{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--text-3)}
.tag{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:10px;border:1px solid transparent;background:none;color:var(--text-3);font-family:var(--mono);font-size:.86rem;cursor:default}
.tag::after{content:"";position:absolute;bottom:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%}
.tag--frei,.tag--knapp{color:var(--text);background:var(--ink-3);border-color:var(--line);cursor:pointer}
.tag--frei::after{background:#6FD39A}
.tag--knapp::after{background:#F5C77C}
.tag--voll{text-decoration:line-through;text-decoration-color:rgb(255 255 255 / .25)}
.tag--voll::after{background:#FF8A7A;opacity:.7}
.tag--heute{box-shadow:inset 0 0 0 1px var(--line-2)}
.tag--frei:hover,.tag--knapp:hover{border-color:var(--accent)}
.tag[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.tag[aria-pressed="true"]::after{background:var(--accent-ink)}
.kalender__legende{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .8rem;font-size:.75rem;color:var(--text-3)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:-.35rem}
.dot--frei{background:#6FD39A}.dot--knapp{background:#F5C77C}.dot--voll{background:#FF8A7A}
.kalender__status{font-size:.86rem;color:var(--text-2)}
.kalender__status:empty{display:none}
.kalender__status.is-err{color:#FF8A7A}
.kalender__status a{color:var(--accent);text-decoration:underline}
#zeitGruppe[hidden]{display:none}
.check--box{padding:.85rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--ink)}
.check--box[hidden]{display:none}

/* Navigation unter den Schritten */
.planer__nav{display:flex;align-items:center;gap:.8rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.planer__nav #weiter{margin-left:auto;min-width:11rem}
.planer__nav .btn.is-loading{pointer-events:none;opacity:.8}
.planer__mini{display:none;font-family:var(--mono);font-size:.82rem;color:var(--accent)}

/* Zettel (Zusammenfassung) */
.zettel{position:sticky;top:calc(var(--nav-h) + 1rem);border:1px solid var(--line);border-radius:var(--r-card);background:
  radial-gradient(120% 60% at 100% 0,rgb(124 212 245 / .1),transparent 60%),var(--ink-3);padding:1.4rem;display:grid;gap:1.2rem;box-shadow:var(--shadow-card)}
.zettel__eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.zettel__aufwand{display:grid;gap:.3rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.zettel__label{font-size:.78rem;color:var(--text-3)}
.zettel__zahl{font-family:var(--display);font-stretch:116%;font-weight:750;font-size:2.2rem;line-height:1.05;letter-spacing:-.02em}
.zettel__spanne{font-size:.82rem;color:var(--text-2)}
.zettel__balken{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:.5rem}
.zettel__balken span{display:block;height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease)}
.zettel__balken[data-ueber="ja"] span{background:repeating-linear-gradient(90deg,var(--accent) 0 22px,var(--accent-dim) 22px 24px)}
.zettel__ki{justify-self:start;margin-top:.4rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:.18rem .6rem;border-radius:var(--r-pill)}
.zettel__ki[hidden]{display:none}
.zettel__liste{display:grid;gap:.55rem;margin:0}
.zettel__liste div{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.8rem;font-size:.86rem}
.zettel__liste dt{color:var(--text-3)}
.zettel__liste dd{margin:0;color:var(--text);overflow-wrap:break-word}
.zettel__hinweise{display:grid;gap:.45rem}
.zettel__hinweise:empty{display:none}
.zettel__hinweise li{font-size:.8rem;color:var(--text-2);padding:.55rem .7rem;border-radius:8px;background:rgb(124 212 245 / .07);border:1px solid rgb(124 212 245 / .18)}
.zettel__fuss{font-size:.76rem;color:var(--text-3);line-height:1.5}

/* Erfolg */
.planer-fertig{border:1px solid rgb(124 212 245 / .35);border-radius:var(--r-card);background:radial-gradient(80% 90% at 0 0,rgb(124 212 245 / .12),transparent 60%),var(--ink-3);padding:clamp(1.6rem,4vw,2.8rem);display:grid;gap:1rem;max-width:720px;outline:none}
.planer-fertig[hidden]{display:none}
.planer-fertig__hex{width:56px;height:62px;clip-path:var(--hexclip);background:var(--accent);position:relative}
.planer-fertig__hex::after{content:"";position:absolute;left:50%;top:46%;width:22px;height:11px;border-left:3px solid var(--accent-ink);border-bottom:3px solid var(--accent-ink);translate:-50% -50%;rotate:-45deg}
.planer-fertig h3{font-size:clamp(1.5rem,3vw,2rem)}
.planer-fertig>p{color:var(--text-2);max-width:60ch}
.planer-fertig .zettel__liste{padding:1rem 0;border-block:1px solid var(--line)}
.planer-fertig__aktionen{display:flex;flex-wrap:wrap;gap:.7rem}
.planer-fertig__aktionen [hidden]{display:none}

/* Kontaktleiste unter dem Planer */
.kontakt-leiste{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;margin:2.4rem 0 0}
.kontakt-leiste div{display:grid;gap:.2rem;padding-top:1rem;border-top:1px solid var(--line);min-width:0}
.kontakt-leiste dt{font-size:.78rem;color:var(--text-3)}
.kontakt-leiste dd{margin:0;font-size:.9rem;overflow-wrap:break-word}
.kontakt-leiste a:hover{color:var(--accent)}

@media (max-width:1080px){
  .planer__grid{grid-template-columns:1fr}
  .zettel{position:static;order:-1;grid-template-columns:1fr 1fr;align-items:start}
  .zettel__eyebrow{grid-column:1/-1}
  .zettel__aufwand{border-bottom:0;padding-bottom:0}
  .zettel__hinweise,.zettel__fuss{grid-column:1/-1}
  .kontakt-leiste{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .planer__steps span:not(.planer__nr){display:none}
  .planer__steps li+li::before{right:calc(50% + 22px);width:calc(100% - 44px + .5rem)}
  .kacheln--klasse{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skala{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fotos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zettel{grid-template-columns:1fr;display:none}
  .planer__main{padding:1.2rem}
  /* Handy: Navigation klebt unten, mit Live-Aufwand */
  .planer__nav{position:sticky;bottom:0;z-index:5;margin:0 -1.2rem -1.2rem;padding:.8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom));background:rgb(22 25 28 / .94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:0 0 var(--r-card) var(--r-card)}
  .planer__mini{display:block}
  .planer__nav #weiter{min-width:0;flex:1 1 auto}
  .planer__nav:has(#zurueck:not([hidden])) .planer__mini{display:none}
  .kontakt-leiste{grid-template-columns:1fr 1fr}
  /* Die untere Leiste schwebt ueber dem Inhalt. Etwas Luft am Ende, damit
     sich auch das letzte Feld ueber die Leiste schieben laesst, und ein
     Sicherheitsabstand beim automatischen Scrollen. */
  .schritt{padding-bottom:1.2rem}
  #zeitGruppe,.check--box,.field{scroll-margin-bottom:7rem}
}
@media (max-width:720px){
  /* Auf dem Handy: Zettel erst im letzten Schritt als Überblick */
  .planer:has(.schritt[data-schritt="5"]:not([hidden])) .zettel{display:grid}
}
@media (max-width:400px){
  .kacheln--klasse{grid-template-columns:1fr 1fr}
  .kachel__in{padding:.75rem .8rem}
  .skala{grid-template-columns:1fr 1fr}
  .kontakt-leiste{grid-template-columns:1fr}
}
/* hidden muss gegen display:inline-flex der Buttons gewinnen */
.btn[hidden],.planer [hidden]{display:none!important}

/* ---------- Anfahrt mit Karte (lädt erst nach Klick) ---------- */
.anfahrt{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:stretch;margin-top:2.6rem}
.karte{position:relative;min-height:340px;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--ink) var(--hex) center/56px 100px}
.karte::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 45%,rgb(124 212 245 / .10),rgb(10 11 12 / .92) 70%)}
.karte.is-geladen::before{display:none}
.karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.8) contrast(.95)}
.karte__platzhalter{position:relative;height:100%;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:2rem;text-align:center}
.karte__pin{width:46px;height:52px;clip-path:var(--hexclip);background:var(--accent);position:relative}
.karte__pin::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:var(--accent-ink);translate:-50% -50%}
.karte__titel{font-family:var(--display);font-stretch:108%;font-weight:650;font-size:1.05rem}
.karte__text{font-size:.8rem;color:var(--text-3);max-width:40ch}
.karte__text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.anfahrt__info{display:flex;flex-direction:column;justify-content:center;gap:.9rem}
.anfahrt__info h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.anfahrt__info>p:not(.eyebrow){color:var(--text-2);max-width:46ch}
.anfahrt__info .eyebrow{margin-bottom:0}
.anfahrt__knoepfe{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}
@media (max-width:900px){
  .anfahrt{grid-template-columns:1fr}
  .karte,.karte__platzhalter{min-height:300px}
}

/* Hochformat-Paare (Handyfotos aus dem Innenraum) */
.pair--hoch{max-width:760px}
.pair--hoch .pair__item{aspect-ratio:3/4}