/* SHAMANIC WAYS · Re:Charge Tag im Kiental-Look (13.11.2026), Schicht über recharge.css.
   Flächen nur Nacht und Muschel. Pfirsich ist Licht und Auswahl, Rötel ist Handlung.
   Kein Klebeband, keine Kippen, keine harten Versatzschatten. Funktion und Wortlaut unverändert. */
:root{--rt-schatten:0 18px 40px -18px rgba(22,29,46,.45);--rt-r:14px;--nacht-tief:#161D2E}
body{font-weight:400}
::selection{background:var(--pfirsich);color:var(--nacht)}
:focus-visible{outline:2px solid var(--pfirsich);outline-offset:4px}

/* Leiste: ruhig, ohne Balken */
.leiste{background:var(--nacht-tief);color:var(--muschel);border-bottom:1px solid rgba(243,231,225,.1)}
body::before{background:var(--nacht-tief)}
.marke{font-weight:500;letter-spacing:.26em}
.marke img{filter:brightness(0) invert(93%) sepia(8%) saturate(300%) hue-rotate(320deg)}
.abend{background:transparent;color:var(--muschel);box-shadow:inset 0 0 0 1px rgba(243,231,225,.7);border-radius:999px;font-weight:600;padding:0 18px}
.abend:hover{background:rgba(243,231,225,.1)}
.burger i{background:var(--muschel);height:1.5px;width:28px}
html body .menue{border-radius:28px!important;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)!important;border:0}
html body .menue .m-tuer{border-radius:14px}

/* Knöpfe: Pillen wie im Brand Manual */
.knopf{border-radius:999px;background:var(--roetel);font-weight:600;box-shadow:none;padding:0 30px;transition:background .2s}
.knopf:hover{transform:none;box-shadow:none;background:var(--roetel-tief)}
.knopf:active{transform:scale(.98);box-shadow:none}
.kn-linie{border:0;border-radius:999px;box-shadow:inset 0 0 0 1.5px currentColor;font-weight:600;padding:0 22px;transition:background .2s}
.kn-linie:hover{transform:none;box-shadow:inset 0 0 0 1.5px currentColor;background:rgba(34,45,68,.06)}
.kn-linie:active{transform:scale(.98);box-shadow:inset 0 0 0 1.5px currentColor}

/* Hero: links Nacht mit dem Wort, rechts der Teich bis an den Rand */
.hero{background:var(--nacht-tief);color:var(--muschel);border-bottom:0;padding-right:0;padding-block:0;align-items:stretch;gap:0;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.hero .text{padding:clamp(56px,6vw,96px) clamp(34px,4vw,72px) clamp(56px,6vw,96px) 0}
.hero h1{font:600 clamp(56px,6.4vw,104px)/.92 var(--serif);letter-spacing:-.045em}
.hero .satz{font:500 clamp(24px,2.4vw,36px)/1.2 var(--sans);letter-spacing:-.02em}
.mark{display:inline;padding:0;margin:0;background:none;color:var(--pfirsich)}
.hero .unter{font-weight:400;color:rgba(243,231,225,.85)}
.preis{transform:none;background:none;padding:0;color:var(--muschel);font:600 clamp(24px,2.2vw,34px)/1.1 var(--serif);letter-spacing:-.03em}
.drin{font-weight:500;color:rgba(243,231,225,.7);margin-top:6px}
.wort{margin-top:clamp(40px,4.4vw,64px)}
.wort label{color:var(--muschel)}
.wort input{background:var(--muschel);border:0;border-radius:var(--rt-r);box-shadow:none;font-weight:600}
.wort input:focus-visible{outline:2px solid var(--pfirsich);outline-offset:3px;box-shadow:none}
.hinweis{font-weight:600;color:rgba(243,231,225,.8)}
.chip{border:0;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(243,231,225,.5);color:var(--muschel);font-weight:600;padding:0 16px}
.chip:hover{background:rgba(243,231,225,.1);color:var(--muschel)}
.chip[aria-pressed="true"]{background:var(--pfirsich);color:var(--nacht);box-shadow:none}
.mehr{color:rgba(243,231,225,.85);font-weight:500}
.mehr a{font-weight:600;text-decoration-thickness:1.5px;text-decoration-color:var(--pfirsich)}
.mehr a:hover{background:none;color:var(--pfirsich)}
.hero .bild{width:100%;justify-self:stretch;margin:0}
.hero .bild::before,.hero .bild::after{display:none}
.hero .bild .foto{height:100%;transform:none;border:0;box-shadow:none}
.hero .bild img{height:100%;min-height:100%;aspect-ratio:auto;filter:none;object-position:50% 60%}

/* Baukasten */
.bau{background:var(--muschel)}
.bau h2{color:var(--nacht);letter-spacing:-.035em}
.bau h2 b{display:block;background:none;padding:0;color:var(--roetel)}
.bau .unter{font-weight:400}
.lade{background:var(--nacht);border-radius:24px;box-shadow:var(--rt-schatten)}
.weiche button{border:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(243,231,225,.45)}
.weiche button[aria-pressed="true"]{box-shadow:none}
.stein{border-radius:12px;box-shadow:none;background:var(--muschel)}
.stein:hover{transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(0,0,0,.6)}
.stein:active{transform:scale(.98);box-shadow:none}
.stein[aria-pressed="true"]{box-shadow:none}
.stein[aria-disabled="true"]{outline:1.5px dashed rgba(243,231,225,.45);outline-offset:-1.5px}
.s-min{border-width:1px;border-radius:999px;padding:.32em .6em .28em;font-weight:600}
.s-stand{font-weight:600}
.s-name{font-weight:700}
.s-lang,.b-lang{border:0;border-radius:14px;box-shadow:0 20px 40px -14px rgba(22,29,46,.5);background:var(--muschel)}
.s-info{border-width:1px;border-radius:50%}
.info{border-radius:12px;box-shadow:none;background:var(--muschel)}
.muster-marke{transform:none;border-width:1px;border-radius:999px;font-weight:600}
.tag-kopf h3{color:var(--nacht)}

/* Die Schiene: Haarlinien statt dicker Rahmen, der Tag wird dunkler bis zum Feuer */
.schiene>li+li,.halb>*+*{margin-top:-1px}
.fest{border-width:1px;border-color:rgba(34,45,68,.35);background:var(--muschel-2);border-radius:0}
.schiene>li:first-child .fest{border-radius:12px 12px 0 0}
.fest.ende{box-shadow:none;border-radius:0 0 12px 12px}
.uhr{border-width:1px;border-radius:999px;font-weight:600}
.block{border-width:1px;border-color:rgba(34,45,68,.35)}
.block.t1{background:var(--muschel)}
.b-text b{font-weight:700}
.b-griffe button{border-radius:8px}
.frei{border-width:1.5px;border-radius:0;font-weight:600}

/* Schluss: Nacht, das Wort als einziger Stempel, der Zettel ohne Klebeband */
.schluss{background:var(--nacht-tief)}
.schluss h2{font:600 clamp(56px,8vw,132px)/.9 var(--serif);letter-spacing:-.045em}
.schluss .stempel{box-shadow:none}
.stempel b{background:var(--muschel);border-width:.05em;border-radius:6px}
.schluss .dazu{font-weight:500;font-family:var(--sans);font-size:clamp(19px,1.6vw,24px);line-height:1.4}
.zettel{border-radius:24px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6);background:var(--muschel)}
.zettel::before{display:none}
.zettel li{border-bottom:1px solid rgba(34,45,68,.18);font-weight:600}
.zettel time{color:var(--roetel)}
.kosten{border-radius:12px;font-weight:600}
.kosten span{font-family:var(--serif)}
.anfrage label{font-weight:600}
.anfrage input[type=text],.anfrage input[type=email],.anfrage input[type=tel]{border:1px solid rgba(34,45,68,.35);border-radius:12px;background:#FBF5F1;font-weight:500}
.anfrage input:focus-visible{outline:2px solid var(--roetel);outline-offset:2px}
.fein{font-weight:500;color:var(--grau)}
.notiz{border-width:1.5px;border-radius:12px}

/* Fuss ohne Pfirsich-Balken */
.fuss{border-top:0}
.f-karte{border-top:1px solid rgba(243,231,225,.18)}

@media(max-width:899px){
  .hero{display:flex;flex-direction:column-reverse;padding-left:0}
  .hero .text{padding:34px var(--gr) 55px var(--gl)}
  .hero .bild{width:100%;height:min(46svh,420px);margin:0}
  .hero .bild img{height:100%}
  .lade{border-radius:20px 20px 0 0;border-top:0;box-shadow:0 -12px 30px -12px rgba(22,29,46,.5)}
  .zettel{margin-right:0}
}
.block.t2{background:var(--muschel-2)}

/* Kopfbilder wechseln: Cold Plunge und Kientalerhof, weich überblendet, je gut sechs Sekunden.
   Bei reduzierter Bewegung bleibt das erste Bild stehen. */
.hero .bild .foto{position:relative;overflow:hidden;background:var(--nacht-tief)}
.hero .bild .foto .w{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero .bild .foto .w2{opacity:0;object-position:40% 50%}
@media(prefers-reduced-motion:no-preference){
  .hero .bild .foto .w{animation:rt-wechsel 14s cubic-bezier(.45,0,.55,1) infinite}
  .hero .bild .foto .w1{animation-delay:-1s}
  .hero .bild .foto .w2{animation-delay:-8s}
}
@keyframes rt-wechsel{
  0%{opacity:0;transform:scale(1.06)}
  8%{opacity:1}
  50%{opacity:1}
  58%{opacity:0;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}