/* ============================================================
   STARTHAUS — home.css · Sektionen der Startseite
   ============================================================ */

/* ---------------- HERO ---------------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--nav-h) + 40px);
  padding-bottom:clamp(28px,4vw,56px);
  isolation:isolate;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:72% 40%;
  transform:scale(1.06);
  animation:heroPan 26s var(--ease) infinite alternate;
}
/* Das erste Bild der Startseite steht still — keine Kamerafahrt, kein
   Parallax, keine Mausbewegung. Es ist das erste, was jemand sieht;
   Ruhe wirkt dort stärker als Bewegung. */
.hero-bg--ruhig img{animation:none;transform:scale(1.02)}
@keyframes heroPan{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.4%,-1.6%,0)}}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  /* ── DER VERLAUF DECKT NUR NOCH DEN TEXT, NICHT MEHR DAS BILD ──────
     Hier lagen zwei Verläufe übereinander: waagerecht von 96 % auf
     34 %, senkrecht zusätzlich 74 % oben und 97 % unten. Jeder für
     sich war begründet, zusammen waren sie eine Decke — vom Panorama
     blieb nichts übrig. Jonas am 18.08.2026: „Da erkennst du ja gar
     nicht, wo das ist." Und genau darauf zeigt der rote Zeiger.

     Jetzt drei getrennte Aufgaben statt einer Decke:
       1  Kopfleiste — die Navigation braucht Grund, sonst nichts.
       2  Textspalte — deckt links, wo Überschrift und Knöpfe stehen,
          und ist bei 62 % der Breite weg. Rechts davon liegt der Ort
          mit dem Zeiger, und der bleibt jetzt sichtbar.
       3  Fuß — schließt die Naht zur Seitenfarbe.

     Die Kennzahlenzeile braucht hier nichts: sie bringt ihre eigene
     Unterlage mit (.hero-tele, background + backdrop-filter). Genau
     deshalb darf der große Verlauf schwächer werden. */
  background:
    linear-gradient(180deg,rgba(6,10,15,.66) 0%,rgba(6,10,15,.20) 13%,transparent 25%),
    linear-gradient(96deg,rgba(6,10,15,.93) 0%,rgba(6,10,15,.82) 26%,rgba(6,10,15,.52) 48%,rgba(6,10,15,.18) 63%,transparent 74%),
    linear-gradient(180deg,transparent 60%,rgba(6,10,15,.44) 79%,rgba(10,16,23,.93) 93%,var(--bg) 100%);
}

/* ── HANDY: BAND STATT DECKE ────────────────────────────────────────
   Auf 390 px passt beides nicht übereinander. Der Kopfbereich füllte
   dort gemessen 610 von 844 px — ein Verlauf, der diesen Text trägt,
   deckt zwangsläufig das ganze Bild zu. Vorher stand hier 78 % oben
   auf 97 % unten, also praktisch Schwarz. Jonas: „Und bei der
   Mobilversion erst recht nicht."

   Deshalb wird das Bild hier nicht unterlegt, sondern freigestellt:
   oben ein Band, auf dem Ort, Hang und Zeiger wirklich zu sehen sind,
   darunter steht der Text auf Seitenfarbe. Das Band kostet 18 svh;
   die Knöpfe holen einen Teil davon zurück (siehe .hero-cta weiter
   unten, zwei Reihen statt drei).

   Die 18 svh sind gemessen, nicht gewählt: bei 390 × 844 px wird der
   Kopfbereich damit genau 844 px hoch. Die Öffnungsampel schließt bei
   799 px ab, die feste Leiste am unteren Rand beginnt bei 798 px —
   alles steht auf einem Bildschirm, nichts liegt darunter. Wer das
   Band vergrößert, schiebt zuerst die Ampel unter die Leiste.

   UND ES WIRD HINEINGEZOOMT. Das ist der Punkt, an dem die erste
   Fassung scheiterte: „object-fit:cover" in einem 390 px breiten
   Fenster zeigt bei einem querformatigen Panorama nicht etwa einen
   Ausschnitt, sondern fast das ganze Bild — nachgerechnet 431 von
   390 px Breite, also 10 % Beschnitt. Der Ort schrumpft auf ein paar
   Bildpunkte, und heller wird er dadurch nicht erkennbarer.
   Deshalb ein echter Zoom mit dem Haus als Drehpunkt: alles wird
   1,8-fach größer, der markierte Punkt bleibt liegen, wo er liegt —
   und der Zeiger stimmt weiter ohne Nachrechnen. */
@media(max-width:880px){
  .hero{
    justify-content:flex-end;
    padding-top:calc(var(--nav-h) + 18svh);
  }
  /* Das Bild füllt nicht mehr den ganzen Kopfbereich, sondern nur das
     Band darüber. Darunter steht der Text auf Seitenfarbe — kein
     Verlauf, der etwas zudecken müsste.

     overflow:hidden ist hier PFLICHT und nicht Vorsicht: das Bild ist
     vergrößert und ragt sonst unter dem Band weiter, geschnitten erst
     vom Kopfbereich selbst. Ohne diese Zeile stand unter dem Verlauf
     ein heller Streifen mit Dächern quer hinter der Kicker-Zeile —
     sah aus wie ein Fehler im Verlauf und war einer im Beschnitt. */
  .hero-bg{inset:0 0 auto 0;height:calc(var(--nav-h) + 18svh);overflow:hidden}
  /* Der Wählername muss .hero--home enthalten. Die Fassung für den
     großen Bildschirm steht in bereiche.css als „.hero--home .hero-bg
     img" — das ist der stärkere Wähler und gewinnt sonst AUCH
     innerhalb dieser Medienabfrage. Eine Medienabfrage schlägt keine
     Spezifität; das ist die Falle, die hier eine Runde gekostet hat. */
  .hero--home .hero-bg img,
  .hero--home .hero-bg--ruhig img{
    object-position:79% 75%;
    transform:scale(1.8);
    transform-origin:79% 75%;
  }
  .hero-bg::after{
    background:
      linear-gradient(180deg,rgba(6,10,15,.66) 0%,rgba(6,10,15,.20) 26%,transparent 46%),
      linear-gradient(180deg,transparent 46%,rgba(6,10,15,.50) 72%,rgba(10,16,23,.94) 92%,var(--bg) 100%);
  }
}
#snow{position:absolute;inset:0;z-index:-1;pointer-events:none}

.hero-inner{position:relative;z-index:2}
.hero .kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px 7px 11px;border-radius:999px;
  border:1px solid rgba(143,211,244,.34);background:rgba(10,20,28,.5);
  backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ice);
}
.hero .kicker .dot{
  width:7px;height:7px;border-radius:50%;background:var(--flut);
  box-shadow:0 0 0 0 rgba(255,178,92,.7);animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,178,92,.6)}
  70%{box-shadow:0 0 0 9px rgba(255,178,92,0)}
  100%{box-shadow:0 0 0 0 rgba(255,178,92,0)}
}
.hero h1{
  margin:18px 0 0;max-width:none;
  font-size:clamp(2.15rem,5.2vw,4.6rem);
}
.hero--home h1{max-width:min(100%,20ch)}
.hero h1 .l2{display:block;color:var(--ice)}
.hero h1 .line{display:block}
.hero p.lead{margin-top:20px;max-width:46ch;color:#D7E3EE}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hide-sm{display:inline}
@media(max-width:620px){.hide-sm{display:none}}

/* Telemetrie-Leiste unter dem Hero-Text */
.hero-tele{
  margin-top:clamp(34px,5vw,58px);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-2);
  /* eigene Unterlage: die Zeile steht auf einem Foto, nicht auf Farbe */
  background:linear-gradient(180deg,rgba(8,13,19,.5),rgba(8,13,19,.72));
  backdrop-filter:blur(6px);
  border-radius:2px 2px var(--r-m,14px) var(--r-m,14px);
}
.hero-tele div{padding:16px 18px 12px 18px;position:relative}
.hero-tele div+div::before{
  content:'';position:absolute;left:0;top:16px;bottom:12px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line),transparent);
}
.hero-tele dt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--soft);margin-bottom:6px;
}
.hero-tele dd{
  margin:0;font-family:var(--disp);font-weight:800;font-variation-settings:'wdth' 108;
  font-size:clamp(1.05rem,1.6vw,1.5rem);color:var(--snow);line-height:1.1;
}
.hero-tele dd small{font-size:.6em;font-weight:600;color:var(--soft);margin-left:3px}
@media(max-width:820px){
  .hero-tele{grid-template-columns:repeat(2,1fr);gap:0}
  .hero-tele div{padding-right:12px}
}

.scroll-hint{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);
}
.scroll-hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--ice),transparent);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:760px){.scroll-hint{display:none}}

/* ---------------- INTRO / MANIFEST ---------------- */
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
.intro-copy p+p{margin-top:16px}
.intro-quote{
  margin-top:30px;padding:22px 26px;border-left:2px solid var(--flut);
  background:linear-gradient(90deg,rgba(255,178,92,.07),transparent);
  font-family:var(--disp);font-weight:600;font-variation-settings:'wdth' 104;
  font-size:clamp(1.1rem,1.7vw,1.42rem);line-height:1.3;color:var(--snow);
}
.intro-media{position:relative}
.intro-media .ph-wrap{border-radius:var(--r-l)}
.intro-badge{
  position:absolute;left:-18px;bottom:26px;
  background:rgba(10,16,23,.9);backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-radius:18px;padding:16px 20px;
  display:flex;align-items:center;gap:14px;max-width:88%;
}
.intro-badge .big{
  font-family:var(--disp);font-weight:900;font-variation-settings:'wdth' 118;
  font-size:1.9rem;color:var(--flut);line-height:1;
}
.intro-badge .txt{font-size:.8rem;line-height:1.4;color:var(--text)}
@media(max-width:900px){
  .intro-grid{grid-template-columns:1fr}
  .intro-media{order:-1}
  .intro-media .ph-wrap{border-radius:var(--r-l)}
  .intro-badge{left:12px}
}

/* ---------------- LEISTUNGEN ---------------- */
.lst{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.lst-card{display:flex;flex-direction:column;min-height:340px}

.lst-card .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;gap:10px}
.lst-card .no{
  position:absolute;top:16px;left:18px;z-index:2;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  color:var(--snow);background:rgba(7,12,18,.62);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);border-radius:5px;padding:4px 8px;
}
.lst-card h3{color:var(--snow)}
.lst-card p{font-size:.92rem;color:var(--soft);line-height:1.55;flex:1}
.lst-card .tlink{margin-top:6px;align-self:flex-start}
@media(max-width:1000px){.lst{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.lst{grid-template-columns:1fr}.lst-card{min-height:0}}

/* ---------------- PREIS-KONFIGURATOR ---------------- */
.rech{
  display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(18px,2.4vw,34px);
  align-items:start;
}
@media(max-width:940px){.rech{grid-template-columns:1fr !important}}

.rech-panel{padding:clamp(22px,3vw,34px)}
.rech-block+.rech-block{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.rech-label{
  display:flex;flex-direction:column;gap:6px;margin-bottom:13px;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--soft);
}
.rech-label b{
  font-family:var(--body);font-size:.84rem;line-height:1.45;letter-spacing:0;
  text-transform:none;color:var(--soft);font-weight:400;max-width:52ch;
}
.rech-label b:empty{display:none}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  flex:1 1 auto;min-width:0;min-height:44px;padding:9px 15px;
  background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:12px;
  color:var(--text);font-size:.86rem;font-weight:500;cursor:pointer;text-align:center;
  transition:border-color .28s,background .28s,color .28s,transform .28s var(--ease-out);
}
.chip:hover{border-color:var(--line-2);color:var(--snow)}
.chip[aria-pressed="true"]{
  background:rgba(143,211,244,.12);border-color:rgba(143,211,244,.55);color:var(--snow);
}
.chip small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--soft);margin-top:2px}
.chip[aria-pressed="true"] small{color:var(--ice)}

/* Tage-Slider */
.slider-row{display:flex;align-items:center;gap:16px}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;height:28px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--ice) var(--fill,30%),rgba(196,214,230,.16) var(--fill,30%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;margin-top:-9.5px;
  background:var(--snow);border:4px solid #0d151d;
  box-shadow:0 0 0 1px rgba(143,211,244,.7),0 6px 18px -6px rgba(143,211,244,.8);
  transition:transform .2s var(--ease-out);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:rgba(196,214,230,.16)}
input[type=range]::-moz-range-progress{height:3px;border-radius:3px;background:var(--ice)}
input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--snow);border:4px solid #0d151d;
  box-shadow:0 0 0 1px rgba(143,211,244,.7);
}
.tage-out{
  min-width:82px;text-align:right;
  font-family:var(--disp);font-weight:800;font-variation-settings:'wdth' 112;
  font-size:1.5rem;color:var(--snow);line-height:1;
}
.tage-out small{display:block;font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.14em;color:var(--soft);margin-top:5px}

.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;min-height:44px}
.switch-row .t{font-size:.9rem;color:var(--text)}
.switch-row .t small{display:block;font-size:.76rem;color:var(--soft);margin-top:2px}
/* 44 px hoch als echtes Element (nicht nur als unsichtbare Huelle) —
   das Gleis zeichnet ::before, sonst misst jede Pruefung 28 px. */
.sw{
  position:relative;width:50px;height:44px;flex:none;cursor:pointer;
  background:none;border:0;padding:0;
}
.sw::before{
  content:'';position:absolute;inset:8px 0;border-radius:999px;
  background:rgba(196,214,230,.13);border:1px solid var(--line);
  transition:background .3s,border-color .3s;
}
.sw::after{
  content:'';position:absolute;top:11px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--soft);transition:transform .3s var(--ease-out),background .3s;
}
.sw[aria-checked="true"]::before{background:rgba(255,178,92,.24);border-color:rgba(255,178,92,.5)}
.sw[aria-checked="true"]::after{transform:translateX(22px);background:var(--flut)}

/* Ergebnis */
.rech-out{
  position:sticky;top:calc(var(--nav-h) + 22px);padding:clamp(24px,3vw,32px);
  display:flex;flex-direction:column;align-items:flex-start;
}
.rech-out .out-list,.rech-out .out-total,.rech-out .btn,.rech-out .rech-note{width:100%}
@media(max-width:940px){.rech-out{position:static}}
.out-list{margin:18px 0 0}
.out-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px dashed var(--line);font-size:.9rem;
}
.out-list li span:first-child{color:var(--soft)}
.out-list li span:last-child{font-family:var(--mono);color:var(--text);white-space:nowrap}
.out-list li.save span{color:var(--flut)}
.out-total{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2);
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.out-total .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--soft)}
.out-total .val{
  font-family:var(--disp);font-weight:900;font-variation-settings:'wdth' 116;
  font-size:clamp(2.6rem,5vw,3.6rem);color:var(--snow);line-height:.9;
}
.out-total .val em{font-style:normal;font-size:.45em;color:var(--soft);margin-left:4px}
.out-strike{font-family:var(--mono);font-size:.84rem;color:var(--dim);text-decoration:line-through;margin-bottom:6px}
.rech-out .btn{width:100%;margin-top:22px}
.rech-note{margin-top:14px;font-size:.74rem;line-height:1.5;color:var(--dim);max-width:62ch}

/* ---------------- SPLIT-SEKTIONEN ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,74px);align-items:center}
/* Rasterkinder haben von sich aus min-width:auto und schrumpfen NICHT
   unter die Mindestbreite ihres Inhalts. Auf 320 px lief die
   Serviceseite dadurch 39 px über den Rand — die Seite ließ sich
   seitlich wegschieben. Gemessen, nicht vermutet; der Fehler steckte
   schon in V125 und hat mit keiner der aktuellen Änderungen zu tun. */
.split > *{min-width:0}
.split--rev .split-media{order:2}
.split-media .ph-wrap{border-radius:var(--r-l)}
.split-copy p{margin-top:18px}
.feats{margin-top:26px;display:flex;flex-direction:column;gap:2px}
.feats li{
  display:flex;gap:14px;align-items:flex-start;
  padding:13px 0;border-top:1px solid var(--line);font-size:.94rem;color:var(--text);
}
.feats li::before{
  content:'';flex:none;width:7px;height:7px;margin-top:8px;border-radius:2px;
  background:var(--accent);transform:rotate(45deg);
}
.split .btn{margin-top:28px}
@media(max-width:880px){
  .split{grid-template-columns:1fr}
  .split--rev .split-media{order:-1}
  
}

/* ---------------- ZAHLEN-BAND ---------------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
}
.stats div{padding:clamp(26px,3.2vw,40px) clamp(18px,2.2vw,28px);border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats .n{
  font-family:var(--disp);font-weight:900;font-variation-settings:'wdth' 118;
  font-size:clamp(2.1rem,4.2vw,3.2rem);color:var(--snow);line-height:.95;
}
.stats .n em{font-style:normal;font-size:.42em;color:var(--ice);margin-left:2px}
.stats .t{margin-top:10px;font-size:.85rem;line-height:1.45;color:var(--soft)}
@media(max-width:820px){
  .stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(2n){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ---------------- BEWERTUNGEN ---------------- */
.rev-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.rev-score{
  display:flex;align-items:center;gap:16px;padding:16px 22px;
  border:1px solid var(--line-2);border-radius:18px;background:rgba(255,255,255,.02);
}
.rev-score .n{font-family:var(--disp);font-weight:900;font-variation-settings:'wdth' 116;font-size:2.5rem;color:var(--snow);line-height:1}
.rev-score .s{color:var(--flut);letter-spacing:2px;font-size:.95rem}
/*  margin-top:4px lief ins Leere — das Element ist inline, und inline
    kennt keinen senkrechten Außenabstand. Gemessener Abstand zum
    letzten Stern: 0 px, auf allen vier Breiten. */
.rev-score .c{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-top:5px}

.revs{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(400px,84vw);
  gap:16px;overflow-x:auto;padding:4px 0 22px;
  scroll-snap-type:x proximity;scrollbar-width:thin;
  scrollbar-color:var(--line-3) transparent;
}
.revs::-webkit-scrollbar{height:6px}
.revs::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
.rev{
  scroll-snap-align:start;padding:26px 28px 24px;display:flex;flex-direction:column;gap:14px;
}
.rev .stars{color:var(--flut);letter-spacing:3px;font-size:.9rem}
.rev p{font-size:.94rem;line-height:1.6;color:var(--text);flex:1}
.rev .who{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.rev .av{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(143,211,244,.28),rgba(255,178,92,.22));
  font-family:var(--disp);font-weight:800;color:var(--snow);font-size:1rem;
}
.rev .who b{display:block;font-size:.88rem;color:var(--snow);font-weight:600}
.rev .who span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}

/* ---------------- BERG / ORT ---------------- */
.berg{
  position:relative;border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--panel-2),#0b131b);
}
.berg-grid{display:grid;grid-template-columns:1.1fr .9fr}
.berg-copy{padding:clamp(28px,4vw,56px)}
.berg-facts{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
/*  Bis 14.08.2026 blieb dieses Raster auch auf dem Handy zweispaltig,
    während `.berg-grid` schon bei 880 px umklappt. Gemessen bei 390 px:
    `.berg-copy` wurde 456 px breit in einer 348-px-Spalte, rechte Kante
    bei 477 px. `html{overflow-x:clip}` schnitt das kommentarlos ab —
    sichtbar waren halbe Wörter („…des Fichtl", „Schwebeb").
    Bei 320 px waren es 157 px Überstand. */
@media(max-width:560px){
  .berg-facts{grid-template-columns:1fr}
}
.berg-facts div{background:#0c141c;padding:16px 18px}
.berg-facts dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.berg-facts dd{margin:6px 0 0;font-family:var(--disp);font-weight:800;font-variation-settings:'wdth' 108;font-size:1.15rem;color:var(--snow)}
.berg-map{
  position:relative;min-height:340px;
  background:
    radial-gradient(70% 60% at 60% 40%,rgba(143,211,244,.10),transparent 70%),
    linear-gradient(150deg,#101a23,#0a1017);
  border-left:1px solid var(--line);
}
.berg-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.85) hue-rotate(180deg)}
.berg-map .pin{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;
  border-radius:999px;background:rgba(8,13,19,.86);backdrop-filter:blur(10px);
  border:1px solid var(--line-2);color:var(--snow);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .3s,background .3s;
}
.berg-map .pin:hover{border-color:var(--line-3);background:rgba(8,13,19,.95)}
@media(max-width:880px){.berg-map{border-left:0;border-bottom:1px solid var(--line)}}
@media(max-width:880px){.berg-grid{grid-template-columns:1fr}.berg-map{min-height:280px;order:-1}}

/* ---------------- CTA-BAND ---------------- */
.cta{
  position:relative;border-radius:var(--r-l);overflow:hidden;
  padding:clamp(40px,6vw,84px) clamp(24px,4vw,64px);
  border:1px solid rgba(255,178,92,.28);
  background:
    radial-gradient(80% 120% at 12% 0%,rgba(255,178,92,.16),transparent 62%),
    radial-gradient(70% 110% at 92% 100%,rgba(143,211,244,.13),transparent 60%),
    linear-gradient(160deg,#141d26,#0c141c);
}
.cta-inhalt{position:relative;z-index:2;max-width:min(100%,54ch)}
.cta h2{max-width:16ch}
.cta p{margin-top:18px;max-width:52ch}
.cta .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.cta .fine{margin-top:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;color:var(--soft)}
/* Der AGB-Link im Kleingedruckten war 23 auf 16 Pixel — als Tippziel zu
   klein, auch wenn er mitten im Satz steht. Negativer Rand hält den
   Zeilenabstand, das Padding vergrößert die Fläche. */
.cta .fine a{display:inline-block;padding:14px 10px;margin:-14px -10px;
  text-decoration:underline;text-underline-offset:3px}

/* Drei Zahlen statt eines Wasserzeichens: das sind die Gründe, warum man
   überhaupt online bucht — sie gehören in den Kasten, nicht dahinter. */
.cta-punkte{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,42px);
  margin-top:clamp(24px,3vw,34px);padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid rgba(255,178,92,.22);
}
.cta-p{display:grid;gap:5px}
.cp-z{
  font-family:var(--disp);font-weight:800;font-variation-settings:'wdth' 112;
  font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1;color:var(--snow);
  font-variant-numeric:tabular-nums;
}
.cp-z em{font-style:normal;font-size:.44em;color:var(--flut);margin-left:.12em}
.cp-t{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft);
}

/* Wanderndes Licht auf der Kante — leise, aber die Karte lebt. */
.cta-rand{
  position:absolute;inset:-1px;z-index:1;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:conic-gradient(from var(--dreh,0deg),
    transparent 0 62%, rgba(255,178,92,.5) 72%, rgba(143,211,244,.45) 82%, transparent 92% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:ctaDreh 9s linear infinite;
}
@property --dreh{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes ctaDreh{to{--dreh:360deg}}
@media (prefers-reduced-motion:reduce){.cta-rand{animation:none;opacity:.4}}
body.rm .cta-rand{animation:none;opacity:.4}

/* Statt einer Strichzeichnung ein echtes Bild: die Seite lebt von Fotos,
   nicht von nachgezeichneten Bergen. Es sitzt rechts, läuft weich in die
   Fläche aus und schiebt sich beim Einblenden leicht heran. */
.cta-bild{
  position:absolute;right:0;top:0;bottom:0;width:min(52%,620px);z-index:0;
  pointer-events:none;overflow:hidden;
  /* Der Übergang muss lang sein, sonst steht da eine Kante statt eines
     Verlaufs. Gemessen an der Kastenbreite, nicht geschätzt. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 26%,
                     rgba(0,0,0,.45) 52%,rgba(0,0,0,.85) 74%,#000 92%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 26%,
             rgba(0,0,0,.45) 52%,rgba(0,0,0,.85) 74%,#000 92%);
}
.cta-bild .ph,.cta-bild picture,.cta-bild img{width:100%;height:100%;display:block}
.cta-bild img{
  object-fit:cover;filter:saturate(.82) contrast(1.05) brightness(.72);
  transform:scale(1.1);transition:transform 1.6s var(--ease-out),filter 1.2s var(--ease);
}
.cta.in .cta-bild img{transform:scale(1.02)}
.cta::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(96deg,rgba(12,20,28,.96) 0%,rgba(12,20,28,.72) 40%,transparent 74%),
    radial-gradient(70% 100% at 100% 100%,rgba(255,178,92,.16),transparent 62%);
}
@media(max-width:900px){
  .cta-bild{width:100%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 34%,#000 78%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 34%,#000 78%)}
  .cta::after{background:
    linear-gradient(180deg,rgba(12,20,28,.9) 0%,rgba(12,20,28,.82) 46%,rgba(12,20,28,.6) 100%),
    radial-gradient(80% 60% at 50% 100%,rgba(255,178,92,.14),transparent 66%)}
}
@media (prefers-reduced-motion:reduce){.cta-bild img{transition:none;transform:scale(1.02)}}


/* ---------------- KONTAKT ---------------- */
.kon{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.kon-card{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:18px}
/*  Die zwei Kontaktkarten stehen still.
    René/Jonas am 17.08.2026: „wenn ich über die Kästen hover, dann
    bewegen sie sich so — die sollen immer feststehend sein."
    Der 3D-Tilt ist im Erzeuger raus (kein .tilt mehr am Kasten).
    Hier bleibt der Lift aus .card:hover übrig — der wird abgeschaltet.
    Rand und Schatten reagieren weiter: Rückmeldung ohne Bewegung.
    Adressen liest man; ein Kasten, der unter dem Zeiger wegkippt,
    macht das Abtippen der Koordinate ins Navi schwerer.  */
.kon-card:hover{transform:none}
.kon-card .tag{
  align-self:flex-start;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:5px;
  border:1px solid var(--line-2);color:var(--ice);
}
.kon-card .tag.warm{color:var(--flut);border-color:rgba(255,178,92,.4)}
.kon-card address{font-style:normal;font-size:1rem;line-height:1.65;color:var(--text)}
.kon-card address b{color:var(--snow)}
.oz{margin-top:2px;border-top:1px solid var(--line)}
.oz li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.oz li span:first-child{color:var(--soft)}
.oz li span:last-child{font-family:var(--mono);font-size:.84rem;color:var(--snow)}
.kon-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
@media(max-width:820px){.kon{grid-template-columns:1fr}}

/* Link zum Rechner — leise, aber auffindbar. Er richtet sich an
   René und an Gäste, die weiterrechnen wollen; deshalb steht er
   unter dem Rechner und nicht daneben. */
.rl-zeile{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:18px 0 0;
}
.rl-hinweis{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--soft);word-break:break-all;
}

/* ============================================================
   MIET-BAND — der Ausgang zwischen den Abschnitten
   ------------------------------------------------------------
   Ein schmaler Streifen mit einer Zeile und einem Knopf. Er soll
   NICHT wie der nächste Abschnitt aussehen, den man liest, sondern
   wie eine Tür, an der man vorbeikommt. Deshalb:

     · keine Kennziffer, keine Überschrift, kein Bild
     · deutlich weniger Höhe als ein Abschnitt
     · eine feine Linie oben und unten statt einer Fläche —
       damit er den Lesefluss unterbricht, ohne ihn zu zerschneiden

   Der Knopf trägt die Flutlichtfarbe, also dieselbe wie oben im
   Kopfbereich und unten im Abbinder. Drei Stellen, eine Farbe, ein
   Weg — wer den Knopf einmal gedrückt hat, erkennt ihn wieder.
   ============================================================ */
.mietband{
  padding:clamp(26px,3.4vw,44px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(255,178,92,.07),transparent 62%);
}
.mtb{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,2.4vw,34px);flex-wrap:wrap;
}
.mtb-zeile{
  margin:0;flex:1 1 auto;max-width:34ch;
  font-family:var(--disp);font-weight:800;font-variation-settings:'wdth' 104;
  font-size:clamp(1.15rem,2.2vw,1.75rem);line-height:1.15;color:var(--snow);
}
.mtb-tat{flex:none}
@media(max-width:700px){
  /* Auf dem Telefon untereinander — und der Knopf über die volle
     Breite. Ein Miet-Knopf, den man auf 390 px suchen muss, ist
     keiner. */
  .mtb{flex-direction:column;align-items:stretch;gap:16px}
  .mtb-zeile{max-width:none}
  .mtb-tat .btn{width:100%;justify-content:center}
}

/* ---------------- Mobile-Feinschliff ---------------- */
@media(max-width:560px){
  /* Alles hier drin bezahlt das Bildband oben. Die Werte sind einzeln
     nachgemessen; zusammen bringen sie den Kopfbereich von 928 auf
     844 px, also auf genau einen Bildschirm. */
  .hero{padding-bottom:24px}
  .hero h1{max-width:none;font-size:clamp(2rem,8.6vw,2.5rem)}
  /* Drei Knöpfe untereinander waren drei volle Reihen. „Jetzt mieten"
     bleibt allein und voll breit, weil es der eine Weg ist, den die
     Seite anbietet; Preisliste und Telefonnummer teilen sich die
     zweite Reihe. Spart 68 px, ohne dass ein Tippziel unter 44 px
     fällt: (390 − 2·20 Rand − 10 Lücke) / 2 = 170 px je Knopf. */
  .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .hero-cta .btn{flex:none;width:100%}
  .hero-cta .btn:first-child{grid-column:1 / -1}
  .hero-tele{margin-top:18px}
  .hero-tele div{padding:11px 14px 9px}
  .za-hero{margin-top:8px}
  .revs{grid-auto-columns:min(320px,86vw)}
  .small,.rech-note{max-width:62ch}
  .foot-bot{font-size:.78rem}
}

/* ============================================================
   Feinschliff Mobil — gemessen mit pruef_geometrie.js, nicht geraten.
   Schwelle: Tippfläche ≥ 36 px, Schrift ≥ 11 px (oder Sperrung ≥ 1,2 px).
   Jede Zeile hier steht für genau einen Befund aus dem Prüflauf.
   ============================================================ */
@media(max-width:560px){
  .eyebrow .num{font-size:11px;height:22px}
  .chip small,.tage-out small{font-size:11px}
  .jump a{font-size:11.5px}
  .foot-bot nav a{min-width:44px;justify-content:center}
  input[type=range]{height:44px}
  /* AGB-Verweis in der Zustimmungszeile: 15 px hoch, jetzt 37 px */
  .switch-row .t small a{display:inline-block;padding:13px 10px;margin:-13px -4px}
  /* Fließtext-Verweise: unsichtbare Tippfläche, ohne den Absatz zu zerreißen */
  p.fine a{display:inline-block;padding-block:10px}
}

/* Tschechisch setzt die längsten Beschriftungen — „Zjistěte svou úroveň
   dovedností“ ragte auf 390 px um 6 px aus dem Knopf. Auf schmalen Geräten
   darf ein Knopf umbrechen, statt über den Rand zu laufen. */
@media(max-width:480px){
  .btn{white-space:normal;text-align:center;padding:12px 18px;line-height:1.35;letter-spacing:.1em}
  .btn .arw{flex:none}
}

/* ---------------- Karte auf Klick ----------------
   RENÉ, KORREKTUR VOM 22.08.2026, zum Abschnitt „01 Öffnungszeiten &
   Anfahrt": „Bitte das Vorschaubild etwas attraktiver gestalten.
   Vielleicht in dieser 3D Optik" — dazu eine perspektivisch gekippte
   Karte.

   Was hier NICHT geht: ein echtes Kartenbild als Vorschau. Die Karte
   lädt bewusst erst auf Klick, damit vorher keine Anfrage an einen
   fremden Server geht. Ein vorab geladenes Kachelbild würde genau das
   aushebeln — die Vorschau wäre hübsch und die Zusage gebrochen.

   Deshalb eine eigene Ebene, die nichts nachlädt: ein Raster, in die
   Fläche gekippt, nach außen ausgeblendet. Es ist erkennbar ein
   Muster und kein Stadtplan — eine gezeichnete Karte mit erfundenen
   Straßen wäre schlimmer als gar keine, weil jemand danach abbiegt. */
.berg-map:not(.karte-an)::before{
  content:"";position:absolute;inset:-25% -15% -8%;z-index:1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(143,211,244,.16) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(0deg,rgba(143,211,244,.11) 0 1px,transparent 1px 44px);
  transform:perspective(620px) rotateX(58deg) scale(1.3);
  transform-origin:50% 100%;
  -webkit-mask-image:radial-gradient(66% 58% at 50% 42%,#000 18%,transparent 76%);
  mask-image:radial-gradient(66% 58% at 50% 42%,#000 18%,transparent 76%);
}
/*  Der Schimmer am Horizont gibt dem gekippten Raster eine Tiefe, die
    ein flaches Gitter allein nicht hat. */
.berg-map:not(.karte-an)::after{
  content:"";position:absolute;left:0;right:0;top:18%;height:42%;z-index:1;
  pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,rgba(143,211,244,.13),transparent 70%);
}
body[data-hell] .berg-map:not(.karte-an)::before{
  background:
    repeating-linear-gradient(90deg,rgba(28,63,92,.20) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(0deg,rgba(28,63,92,.14) 0 1px,transparent 1px 44px);
}

.karte-aus{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:26px;text-align:center;
}
.karte-aus p{font-size:.86rem;color:var(--soft);max-width:34ch;line-height:1.55;margin:0}
.karte-nadel{
  width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--ice);box-shadow:0 0 0 6px rgba(143,211,244,.14),0 0 26px rgba(143,211,244,.5);
  animation:nadelPuls 2.6s var(--ease) infinite;
}
@keyframes nadelPuls{
  0%,100%{box-shadow:0 0 0 6px rgba(143,211,244,.14),0 0 26px rgba(143,211,244,.45)}
  50%{box-shadow:0 0 0 12px rgba(143,211,244,.06),0 0 34px rgba(143,211,244,.7)}
}
@media (prefers-reduced-motion:reduce){.karte-nadel{animation:none}}
body.rm .karte-nadel{animation:none}
.berg-map.karte-an .karte-aus{display:none}
.berg-map iframe{animation:kartenAuf .7s var(--ease-out) both}
@keyframes kartenAuf{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}

/*  ══════════════════════════════════════════════════════════════════
    PLATZ FÜR DIE WERKZEUGLEISTE NEBEN DEM PREISRECHNER
    ══════════════════════════════════════════════════════════════════
    René am 17.08.2026, mit Bildschirmfoto vom Kalkulator:
      „wie du siehst, stimmt die Formatierung nach Rechts nicht 100 %.
       Die Tabs verdecken die Preisinfos."

    NACHGERECHNET, nicht geschätzt. Die Leiste steht fest am rechten
    Fensterrand und ist 52 px breit. Der Inhalt sitzt in .wrap:

        Randbreite rechts = (100vw − Breite von .wrap) / 2
        .wrap             = min(100vw − 2 × --gut, 1280px)
        --gut             = clamp(20px, 4vw, 56px)

    Solange 100vw − 2 × --gut kleiner als 1280 px ist, ist der Rand
    genau --gut breit. Und --gut erreicht 52 px erst bei 1300 px
    Fensterbreite. Darunter ist der Rand schmaler als die Leiste —
    sie liegt dann auf der Preiskarte. Genau der Bereich, in dem ein
    gewöhnliches Notebook steht.

    Diese Regel legt so viel rechts dazu, wie fehlt — und keinen
    Pixel mehr. Ist der Rand ohnehin breit genug (großer Bildschirm),
    rechnet max() auf 0 und nichts verschiebt sich.

    Nur oberhalb von 940 px: darunter klappt der Rechner einspaltig
    und die Leiste wandert an den unteren Rand.  */
@media(min-width:941px){
  #preise > .wrap{
    padding-right:max(0px,
      calc(52px + 14px - (100vw - min(100vw - var(--gut) * 2, var(--wrap))) / 2));
  }
}