/* ============================================================
   CheersMates — Mobile Bars, Cocktails & Service
   Hell · Schwarzweiß-Fotografie · Papierkante · Aprikose
   Allura (Schreibschrift) · Montserrat (Titel) · Mulish (Text)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --paper:    #FFFFFF;
  --paper-2:  #FAF7F3;
  --paper-3:  #F2EDE6;

  --ink:      #17171A;
  --ink-2:    #45454B;
  --ink-3:    #6E6E76;
  --line:     rgba(23,23,26,.13);

  --accent:   #FDB467;   /* Flächen, Linien, Deko */
  --accent-d: #A5601C;   /* Text auf Hell — kontraststark */

  --script:  'Allura', cursive;
  --display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Mulish', 'Helvetica Neue', Arial, sans-serif;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --max: 78rem;
  --sec: clamp(4.5rem, 9vw, 8rem);

  --e:     cubic-bezier(.22,.61,.36,1);
  --e-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}

body{
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .15vw,1.06rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
ul,ol{ list-style:none }

::selection{ background:var(--accent); color:var(--ink) }

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

/* Sprunglink: unsichtbar bis fokussiert (nicht nur verschoben — sonst
   taucht er beim Überscrollen am Rand auf) */
.skip{
  position:fixed; top:.5rem; left:.5rem; z-index:200;
  padding:.7rem 1.1rem; background:var(--ink); color:var(--paper);
  font-family:var(--display); font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
.skip:focus{ width:auto; height:auto; overflow:visible; clip-path:none }

/* ---------- 3. Layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }

.sec{ position:relative; padding-block:var(--sec) }
.sec--tint{ background:var(--paper-2) }
.sec--ink{ background:var(--ink); color:rgba(255,255,255,.72) }

/* ---------- 4. Typografie ---------- */
.script{
  font-family:var(--script);
  font-weight:400; line-height:.9;
  color:var(--ink);
}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:800;
}

.h-xl{ font-size:clamp(2.1rem,1.1rem + 3.6vw,3.9rem) }
.h-lg{ font-size:clamp(1.75rem,1.1rem + 2.4vw,2.9rem) }
.h-md{ font-size:clamp(1.3rem,1.05rem + 1vw,1.75rem) }

h1 em, h2 em{ font-style:normal; color:inherit }

.lead{
  font-size:clamp(1.05rem,1rem + .35vw,1.2rem);
  line-height:1.65;
  color:var(--ink-2);
  max-width:46ch;
}

.muted{ color:var(--ink-3) }

/* Kleines Label über einer Überschrift */
.klabel{
  display:inline-block;
  font-family:var(--display);
  font-size:.72rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent-d);
  margin-bottom:1rem;
}

/* Senkrechtes Label am Rand */
.vlabel{
  position:absolute; left:0; top:0;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--display);
  font-size:.68rem; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- 5. Buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  isolation:isolate;          /* eigener Stapelkontext für die Füllung */
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05rem 2.1rem;
  background:var(--ink); color:var(--paper);
  font-family:var(--display);
  font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  border:2px solid var(--ink);
  cursor:pointer;
  transition:color .35s var(--e), border-color .35s var(--e);
}
.btn > *{ position:relative; z-index:1 }
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;   /* hinter den Text */
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .42s var(--e-out);
}
.btn:hover{ color:var(--ink); border-color:var(--accent) }
.btn:hover::before{ transform:translateY(0) }
.btn svg{
  width:1.05em; height:1.05em; fill:none;
  stroke:currentColor; stroke-width:2; stroke-linecap:square;
  transition:transform .35s var(--e);
}
.btn:hover svg{ transform:translateX(4px) }

.btn--light{ background:transparent; color:var(--ink); border-color:var(--ink) }
.btn--sm{ padding:.7rem 1.3rem; font-size:.7rem }

/* ---------- 6. Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
}
/* Der Balkenhintergrund liegt bewusst in einem eigenen Element:
   backdrop-filter auf .hdr selbst würde den Header zum Bezugsrahmen für
   position:fixed machen — das mobile Menü ließe sich dann nach dem Scrollen
   nicht mehr über die volle Höhe öffnen. */
.hdr::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  box-shadow:0 1px 0 var(--line);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--e);
}
.hdr.is-stuck::before{ opacity:1 }

.hdr__in{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:1.5rem;
  max-width:var(--max); margin-inline:auto;
  padding:.9rem var(--pad);
}
/* Marke und Menüschalter bleiben über dem geöffneten Menü bedienbar */
.brand, .burger, .hdr__in > .btn{ position:relative; z-index:2 }
.hdr__line{ height:2px; background:var(--accent); transform:scaleX(0); transform-origin:0 50% }

.brand{ position:relative; display:block; margin-right:auto; line-height:0 }
.brand__bild{
  width:clamp(7.5rem,13vw,9.4rem); height:auto;
  transition:opacity .4s var(--e);
}
/* Helle Fassung liegt deckungsgleich darüber und wird ein-/ausgeblendet */
.brand__bild--hell{ position:absolute; inset:0; opacity:0 }

/* Auf dem Foto ist der Header hell — bei offenem Menü aber nie */
.hdr:not(.is-stuck):not(.is-menu) .brand__bild--dunkel{ opacity:0 }
.hdr:not(.is-stuck):not(.is-menu) .brand__bild--hell{ opacity:1 }
.hdr:not(.is-stuck):not(.is-menu) .nav a{ color:#fff }
.hdr:not(.is-stuck):not(.is-menu) .burger span{ background:#fff }
.hdr.is-menu .burger span{ background:var(--ink) }
.hdr:not(.is-stuck) .btn--light{ color:#fff; border-color:rgba(255,255,255,.7) }
.hdr:not(.is-stuck) .btn--light:hover{ color:var(--ink); border-color:var(--accent) }

.nav{ display:flex; align-items:center; gap:1.9rem }
.nav a{
  position:relative;
  font-family:var(--display);
  font-size:.76rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2);
  padding-block:.3rem;
  transition:color .3s var(--e);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .35s var(--e-out);
}
.nav a:hover::after, .nav a.is-active::after{ transform:scaleX(1); transform-origin:0 50% }
.nav__foot{ display:none }

.burger{
  display:none; position:relative;
  width:44px; height:44px; margin-right:-.6rem;
  background:none; border:0; cursor:pointer;
}
.burger span{
  position:absolute; left:11px; width:22px; height:2px;
  background:var(--ink);
  transition:transform .4s var(--e-out), opacity .2s;
}
.burger span:nth-child(1){ top:18px }
.burger span:nth-child(2){ top:25px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg) }

/* ---------- 7. Hero ---------- */
.hero{ position:relative; background:var(--ink) }
.hero__media{
  position:relative;
  height:clamp(28rem,74svh,44rem);
  overflow:hidden;
}
.hero__media img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 42%;
}
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 34%, transparent 60%);
}

.hero__script{
  position:absolute; z-index:2;
  left:50%; top:50%; transform:translate(-50%,-58%);
  width:92%; text-align:center;
  font-family:var(--script);
  font-size:clamp(3.6rem,12vw,10rem);
  line-height:.85;
  color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}

/* Gerissene Papierkante über dem unteren Bildrand */
.riss{
  position:absolute; z-index:3;
  left:0; right:0; bottom:-1px;
  height:clamp(2.5rem,6vw,5.5rem);
  background:url('../img/kante-papier.webp') bottom center / 100% 100% no-repeat;
  pointer-events:none;
}

/* ---------- 8. Intro unter dem Hero ---------- */
.intro{ position:relative; padding-block:clamp(2.5rem,6vw,4.5rem) var(--sec) }
.intro__in{ position:relative; padding-left:clamp(2rem,5vw,3.5rem) }
.intro__in::before{
  content:''; position:absolute; left:0; top:.4rem; bottom:.4rem;
  width:1px; background:var(--line);
}
.intro h1{ max-width:22ch; margin-bottom:1.5rem }
.intro .lead{ margin-bottom:2.25rem }
.intro__cta{ display:flex; flex-wrap:wrap; gap:.85rem }

/* Tintenklecks als Deko */
.klecks{
  position:absolute; z-index:0; pointer-events:none;
  opacity:.09; mix-blend-mode:multiply;
}
.klecks--intro{ right:2%; top:-6rem; width:min(26vw,17rem); transform:rotate(-12deg) }

/* ---------- 9. Über uns ---------- */
.ueber{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,5rem); align-items:center;
}
.ueber p + p{ margin-top:1.1rem }
.ueber__fig{ position:relative }
.ueber__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.ueber__fig::after{
  content:''; position:absolute; inset:0;
  outline:1px solid var(--line); outline-offset:14px;
  pointer-events:none;
}

/* ---------- 10. Zitat-Band ---------- */
.band{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  padding-block:clamp(3.5rem,8vw,6rem);
  text-align:center;
}
.band h2{ color:#fff; max-width:20ch; margin-inline:auto }
.band p{ color:rgba(255,255,255,.66); max-width:52ch; margin:1.25rem auto 2rem }
/* Auf dem dunklen Band braucht der Button eine eigene Farbe, sonst ist er
   nicht vom Untergrund zu unterscheiden und erscheint erst beim Überfahren. */
.band .btn{
  background:var(--accent); color:var(--ink); border-color:var(--accent);
}
.band .btn::before{ background:#fff }
.band .btn:hover{ color:var(--ink); border-color:#fff }

.band__spritzer{
  position:absolute; left:0; right:0; bottom:0; height:5rem;
  background:url('../img/tinte-spritzer.webp') center / cover no-repeat;
  opacity:.25; filter:invert(1); pointer-events:none;
}

/* ---------- 11. Pakete ---------- */
.pakete{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem; align-items:stretch;
}
.paket{
  position:relative;
  display:flex; flex-direction:column;
  padding:2.25rem 1.9rem 2rem;
  background:var(--paper);
  border:1px solid var(--line);
  transition:border-color .35s var(--e), transform .35s var(--e-out), box-shadow .35s var(--e);
}
.paket:hover{
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 18px 40px -24px rgba(23,23,26,.35);
}
.paket--vor{ border-color:var(--ink); border-width:2px }
/* Als Ecke gesetzt, damit alle Karten auf einer Linie beginnen */
.paket__tag{
  position:absolute; top:0; right:0;
  padding:.35rem .75rem;
  background:var(--accent); color:var(--ink);
  font-family:var(--display); font-size:.64rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
}
.paket h3{
  font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:1.1rem;
}
.paket__preis{
  display:flex; align-items:baseline; gap:.45rem;
  padding-bottom:1.4rem; margin-bottom:1.4rem;
  border-bottom:1px solid var(--line);
}
.paket__preis b{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.2rem,1.6rem + 1.6vw,3rem);
  line-height:1; color:var(--ink);
  letter-spacing:-.03em;
}
.paket__preis span{ font-size:.85rem; color:var(--ink-3) }
/* kleines „ab“ vor der Zahl, wie in der Vorlage */
.paket__preis b i{
  font-style:normal; font-weight:700;
  font-size:.34em; letter-spacing:.02em;
  vertical-align:.9em; margin-right:.1em;
}
/* Textpreise („Auf Anfrage“) kleiner als Zahlen setzen */
.paket__preis b.text{ font-size:clamp(1.35rem,1.15rem + .6vw,1.7rem); letter-spacing:-.01em }
.paket ul{ display:grid; gap:.6rem; margin-bottom:1.9rem }
.paket li{
  display:grid; grid-template-columns:auto 1fr; gap:.7rem;
  font-size:.94rem; line-height:1.5;
}
.paket li::before{
  content:''; width:6px; height:6px; margin-top:.55em;
  background:var(--accent); transform:rotate(45deg);
}
.paket .btn{ margin-top:auto; width:100% }

/* ---------- 12. Leistungen ---------- */
.leist{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.leist > div{ background:var(--paper); padding:clamp(1.75rem,3.5vw,2.5rem) }
.sec--tint .leist > div{ background:var(--paper-2) }
.leist h3{
  font-size:.95rem; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:1.1rem; padding-bottom:1.1rem;
  border-bottom:2px solid var(--accent);
  display:inline-block;
}
.leist ul{ display:grid; gap:.5rem }
.leist li{
  display:grid; grid-template-columns:auto 1fr; gap:.7rem;
  font-size:.94rem; line-height:1.55;
}
.leist li::before{ content:'—'; color:var(--accent-d) }

/* ---------- 13. FAQ ---------- */
.faq{ border-top:1px solid var(--line); max-width:52rem }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.35rem .25rem;
  cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary h3{
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  font-weight:700; letter-spacing:-.01em;
  transition:color .3s var(--e);
}
.faq summary:hover h3{ color:var(--accent-d) }
.faq summary i{ position:relative; flex:0 0 auto; width:16px; height:16px }
.faq summary i::before, .faq summary i::after{
  content:''; position:absolute; inset:50% 0 auto 0;
  height:2px; background:var(--accent-d);
  transform:translateY(-50%);
  transition:transform .3s var(--e-out), opacity .25s var(--e);
}
.faq summary i::after{ transform:translateY(-50%) rotate(90deg) }
.faq details[open] summary i::after{ transform:translateY(-50%) rotate(0); opacity:0 }
.faq__a{ padding:0 2.5rem 1.5rem .25rem; animation:faqIn .4s var(--e-out) }
.faq__a p{ max-width:60ch }
.faq__a a{ color:var(--accent-d); border-bottom:1px solid rgba(165,96,28,.4) }
@keyframes faqIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

/* ---------- 14. Kontakt ---------- */
.kt{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.5rem,6vw,5rem); align-items:start;
}
.kt__info{ display:grid; gap:1.5rem; margin-top:2.25rem }
.kt__info dt{
  font-family:var(--display); font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.3rem;
}
.kt__info dd{ font-size:1.02rem }
.kt__info a{ border-bottom:1px solid var(--line); transition:border-color .3s var(--e), color .3s var(--e) }
.kt__info a:hover{ color:var(--accent-d); border-color:var(--accent-d) }

.form{ display:grid; gap:1.35rem }
.form__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.35rem }
.field{ display:grid; gap:.45rem }
.field label{
  font-family:var(--display); font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.field label span{ color:var(--accent-d) }
.field input, .field textarea, .field select{
  width:100%; padding:.85rem 1rem;
  font-family:var(--body);
  background:var(--paper);
  border:1px solid var(--line); border-radius:0;
  font-size:1rem; color:var(--ink);
  transition:border-color .3s var(--e), box-shadow .3s var(--e);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:7rem; line-height:1.6 }

/* Feste Höhe für alle einzeiligen Felder: input[type=date] bringt in Chrome
   ein eigenes inneres Element mit, das die Zeile sonst höher macht. */
.field input, .field select{ height:3.5rem; padding-block:0 }
.field input[type="date"]::-webkit-date-and-time-value{ text-align:left; margin:0 }
.field input[type="date"]::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer }
.field input[type="date"]::-webkit-calendar-picker-indicator:hover{ opacity:1 }
.field input::placeholder, .field textarea::placeholder{ color:#A8A8AF }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--accent-d);
  box-shadow:0 0 0 3px rgba(253,180,103,.28);
}
.field input:user-invalid, .field textarea:user-invalid{ border-color:#B03A2B }

.sel{ position:relative }
.sel i{
  position:absolute; right:1rem; top:50%; width:8px; height:8px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.sel select{ cursor:pointer }

.check{
  display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:start;
  font-size:.86rem; line-height:1.55; color:var(--ink-3); cursor:pointer;
}
.check input{ position:absolute; opacity:0; width:1px; height:1px }
.check__box{
  width:19px; height:19px; margin-top:.15rem;
  border:1px solid rgba(23,23,26,.3);
  display:grid; place-items:center;
  transition:background .25s var(--e), border-color .25s var(--e);
}
.check__box::after{
  content:''; width:9px; height:5px; margin-top:-2px;
  border-left:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(-45deg) scale(0); transition:transform .25s var(--e-out);
}
.check input:checked + .check__box{ background:var(--accent); border-color:var(--accent) }
.check input:checked + .check__box::after{ transform:rotate(-45deg) scale(1) }
.check input:focus-visible + .check__box{ outline:2px solid var(--accent-d); outline-offset:2px }
.check a{ color:var(--ink); border-bottom:1px solid var(--line) }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.form__msg{
  font-size:.92rem; line-height:1.55;
  padding:.85rem 1rem; border-left:3px solid transparent; display:none;
}
.form__msg.is-ok{ display:block; background:#EEF6EC; border-color:#4A7A3F; color:#33602A }
.form__msg.is-err{ display:block; background:#FBEDEB; border-color:#B03A2B; color:#8E2E21 }
.form.is-sending{ opacity:.55; pointer-events:none }

/* ---------- 15. Footer ---------- */
.ft{ background:var(--ink); color:rgba(255,255,255,.62); padding-block:clamp(3rem,7vw,4.5rem) 1.75rem }
.ft__top{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.14);
}
.brand--ft{ margin-right:0 }
.brand--ft img{ width:clamp(10rem,22vw,13.75rem); height:auto }
.ft__claim{ max-width:34ch; font-size:.94rem; line-height:1.6 }
.ft__cols{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2rem 1.5rem; padding-block:2.5rem;
}
.ft__cols h2{
  font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:1rem;
}
.ft__cols a, .ft__cols span{
  display:block; font-size:.92rem; line-height:1.8;
  color:rgba(255,255,255,.62); transition:color .3s var(--e);
}
.ft__cols a:hover{ color:var(--accent) }
.ft__area{
  padding-block:1.5rem;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem; line-height:1.65; color:rgba(255,255,255,.5); max-width:80ch;
}
.ft__area strong{ color:rgba(255,255,255,.72); font-weight:600 }
.ft__bot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14);
  font-size:.78rem; color:rgba(255,255,255,.5);
}
.ft__bot a:hover{ color:var(--accent) }
.ft__rechts a + a{ margin-left:.35rem }

/* ---------- 16. Rechtstexte ---------- */
.legal{ background:var(--paper); padding:clamp(7.5rem,13vw,10rem) 0 var(--sec) }
.legal__head{ padding-bottom:2.25rem; border-bottom:1px solid var(--line); margin-bottom:3rem }
.legal__back{
  display:inline-block;
  font-family:var(--display); font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  transition:color .3s var(--e);
}
.legal__back:hover{ color:var(--accent-d) }
.legal__title{
  font-size:clamp(2.1rem,1.3rem + 3vw,3.4rem);
  margin-top:1rem;
}
.legal__title em{ font-style:normal; color:var(--accent-d) }
.legal__sub{ margin-top:.9rem; max-width:52ch; color:var(--ink-3) }

.prose{ max-width:46rem }
.prose h2{
  font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);
  margin:2.5rem 0 .8rem; padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:0 }
.prose h3{ font-size:.95rem; font-weight:700; margin:1.6rem 0 .45rem }
.prose p{ margin-bottom:1rem }
.prose strong{ color:var(--ink); font-weight:700 }
.prose a{ color:var(--accent-d); border-bottom:1px solid rgba(165,96,28,.4) }
.prose a:hover{ border-bottom-color:var(--accent-d) }
.prose ul{ margin:0 0 1rem; display:grid; gap:.5rem }
.prose li{ display:grid; grid-template-columns:auto 1fr; gap:.75rem; line-height:1.65 }
.prose li::before{ content:'—'; color:var(--accent-d) }
.prose .box{
  padding:1.5rem 1.75rem; margin:1.5rem 0;
  background:var(--paper-2); border:1px solid var(--line);
}
.prose .box p:last-child{ margin-bottom:0 }
.prose .muted{ font-size:.88rem }

/* Auffällige Platzhalter — dürfen so nicht live gehen */
.prose mark.todo{
  background:#FFE9A8; color:#5A3E00;
  padding:.15em .5em; border:1px dashed #B58A2B;
  font-size:.9em; font-weight:600;
}
.prose mark.todo::before{ content:'⚠ ' }

/* ---------- 17. Reveal ---------- */
.js .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .8s var(--e-out) var(--d,0s), transform .8s var(--e-out) var(--d,0s);
}
.js .reveal.is-in{ opacity:1; transform:none }

/* ---------- 18. Responsive ---------- */
@media (max-width:1024px){
  .ueber{ grid-template-columns:1fr }
  .ueber__fig{ max-width:34rem }
  .pakete{ grid-template-columns:1fr; max-width:34rem; margin-inline:auto }
  .kt{ grid-template-columns:1fr }
  .ft__cols{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:860px){
  .nav{
    position:fixed; inset:0; z-index:1;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:.2rem; padding:6rem var(--pad) 2.5rem;
    background:var(--paper);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .6s var(--e-out);
    overflow-y:auto;
  }
  .nav.is-open{ clip-path:inset(0 0 0 0) }
  .nav a{
    font-size:clamp(1.3rem,6vw,1.8rem); letter-spacing:.02em;
    text-transform:none; color:var(--ink) !important;
    line-height:1.9;
  }
  .nav a::after{ display:none }
  .nav__foot{
    display:grid; gap:.2rem; align-self:stretch;
    margin-top:2rem; padding-top:1.5rem;
    border-top:1px solid var(--line);
  }
  .nav__foot a{
    font-family:var(--body); font-size:.95rem; font-weight:400;
    color:var(--ink-3) !important; line-height:1.7;
  }
  .burger{ display:block }
  .hdr .btn{ display:none }
  .hdr:not(.is-stuck) .burger span{ background:#fff }
  .leist{ grid-template-columns:1fr }
}

@media (max-width:620px){
  .intro__in{ padding-left:0 }
  .intro__in::before{ display:none }
  .form__row{ grid-template-columns:1fr }
  .ft__cols{ grid-template-columns:1fr; gap:1.75rem }
  .intro__cta .btn{ width:100% }
  .faq__a{ padding-right:0 }
  .klecks--intro{ display:none }
}

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

@media print{
  .hdr,.riss,.klecks,/* Auf dem dunklen Band braucht der Button eine eigene Farbe, sonst ist er
   nicht vom Untergrund zu unterscheiden und erscheint erst beim Überfahren. */
.band .btn{
  background:var(--accent); color:var(--ink); border-color:var(--accent);
}
.band .btn::before{ background:#fff }
.band .btn:hover{ color:var(--ink); border-color:#fff }

.band__spritzer{ display:none }
  body{ background:#fff; color:#000 }
  .sec--ink,.band,.ft{ background:#fff !important; color:#000 !important }
}