/* ==========================================================================
   Gesichter unserer Stadt – Rottweil
   Eigenständiges Stylesheet im Design der Social-Media-Posts.
   Bildsprache: warmes Creme, kräftiges Orange, Condensed-Bold-Headlines,
   gesperrte Uppercase-Labels mit Punkt, Bogen-Übergänge zwischen den
   Farbflächen. Bewusst ohne Fotos – die Flächen tragen die Seite.
   ========================================================================== */

:root{
  --orange:#d5782a;
  --orange-dark:#b7621d;
  --orange-tint:#f0d3b4;
  --cream:#f3eadf;
  --cream-lt:#fbf8f2;
  --paper:#fffdf9;
  --ink:#2b2622;
  --ink-lt:#3a332d;
  --ink-2:#5a514a;
  --line:rgba(43,38,34,.14);

  --shell:1160px;
  --pad:clamp(20px,5vw,40px);
  --arc:clamp(34px,7vw,96px);

  --font-display:"Roboto Condensed",ui-sans-serif,system-ui,"Arial Narrow",sans-serif;
  --font-text:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

/* hidden muss auch bei display:flex/grid greifen */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream-lt);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}

/* Der Innenabstand berücksichtigt die abgerundeten Ecken und die
   Kameraaussparung moderner Telefone im Querformat. */
.shell{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}

/* Sprungmarken dürfen nicht unter der klebenden Kopfzeile landen. */
section[id],[id].doc__body,.doc__body h2[id]{scroll-margin-top:84px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 6px 0;
}
.skip:focus{left:0}

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:2px;
}

/* --------------------------------------------------------------- Typo --- */

.eyebrow{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(.78rem,1.5vw,.82rem);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--orange);
  margin:0;
  line-height:1.45;
  display:inline-flex;
  /* Bricht die Zeile um – auf dem Telefon der Normalfall –, soll der Punkt
     neben der ersten Zeile stehen, nicht in der Mitte des Blocks. */
  align-items:flex-start;
  gap:.7em;
}
.eyebrow--dot::before{
  content:"";
  width:.45em;height:.45em;border-radius:50%;
  background:currentColor;
  flex:none;
  margin-top:.5em;
}
.eyebrow--light{color:#fff}
.eyebrow--ink{color:var(--ink)}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.03;
  letter-spacing:-.005em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,8vw,5.4rem)}
h2{font-size:clamp(2rem,5.4vw,3.5rem)}
h3{font-size:clamp(1.25rem,2.6vw,1.6rem)}

.caps{text-transform:uppercase}
.it{font-style:italic;font-weight:700}

.lede{
  font-size:clamp(1.02rem,2.1vw,1.2rem);
  color:var(--ink-2);
  max-width:56ch;
  margin:0;
}
.lede--light{color:rgba(255,255,255,.88)}

/* ------------------------------------------------------------- Button --- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.95em 1.6em;
  border:2px solid transparent;
  border-radius:999px;
  cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--orange);color:#fff}
.btn--solid:hover{background:var(--orange-dark)}
.btn--ink{background:var(--ink);color:var(--cream-lt)}
.btn--ink:hover{background:#000}
.btn--onDark{background:#fff;color:var(--ink)}
.btn--onDark:hover{background:var(--cream)}
.btn--ghostLight{border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghostLight:hover{background:#fff;color:var(--orange-dark);border-color:#fff}
.btn--outline{border-color:currentColor;color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--cream-lt);border-color:var(--ink)}
.btn--block{width:100%}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn:disabled:hover,.btn[disabled]:hover{transform:none}

/* -------------------------------------------------------------- Decor --- */

/* Bogenkante – die Signatur der Posts */
.arc-top{border-radius:50% 50% 0 0 / var(--arc) var(--arc) 0 0}

/* Farbfläche, die sich mit einem Bogen über die vorherige schiebt */
.band{
  position:relative;
  margin-top:calc(var(--arc) * -1);
  padding-top:calc(var(--arc) + clamp(30px,5vw,64px));
  padding-bottom:clamp(50px,8vw,104px);
}
.band--orange{background:var(--orange);color:#fff}
.band--orange h2{color:#fff}
.band--ink{background:var(--ink);color:var(--cream-lt)}
.band--ink h2{color:#fff}
.band--cream{background:var(--cream)}
.band--creamLt{background:var(--cream-lt)}

/* Punkteraster wie im Post oben rechts */
.dots{
  position:absolute;
  width:clamp(72px,11vw,132px);
  aspect-ratio:1;
  background-image:radial-gradient(currentColor 2px,transparent 2.2px);
  background-size:20% 20%;
  opacity:.55;
  pointer-events:none;
}

/* -------------------------------------------------------------- Topbar --- */

.top{
  position:sticky;top:0;z-index:40;
  background:rgba(251,248,242,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.top__in{display:flex;align-items:center;gap:clamp(14px,2.2vw,26px);min-height:66px}
.top__brand{
  text-decoration:none;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.7em;
  margin-right:auto;
}
.top__brand::before{
  content:"";width:.5em;height:.5em;border-radius:50%;background:var(--orange);flex:none;
}
.top__nav{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.top__nav a{
  text-decoration:none;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.86rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:6px 0;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:border-color .18s ease,color .18s ease;
}
.top__nav a:hover{color:var(--orange);border-bottom-color:var(--orange)}
.top__nav a[aria-current="page"]{color:var(--orange);border-bottom-color:var(--orange)}

/* Reiter „Aktion einreichen" – als Pille abgesetzt */
.top__nav .tab-cta,
.top__mobile .tab-cta{
  background:var(--orange);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:.62em 1.15em;
  letter-spacing:.11em;
}
.top__nav .tab-cta:hover{background:var(--orange-dark);color:#fff}
.top__nav .tab-cta[aria-current="page"]{background:var(--ink);color:#fff}

.burger{display:none;width:44px;height:40px;background:none;border:0;padding:9px 8px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.top__mobile{display:none;flex-direction:column;padding:6px var(--pad) 22px;border-top:1px solid var(--line)}
.top__mobile a{
  text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:.95rem;
}
.top__mobile .tab-cta{border-bottom:0;margin-top:14px;text-align:center;padding:.85em 1.2em}
.top__mobile.is-open{display:flex}

@media (max-width:980px){
  .top__nav{display:none}
  .burger{display:block}
}

/* --------------------------------------------------------------- Hero --- */

.hero{
  position:relative;
  background:var(--orange);
  color:#fff;
  padding:clamp(56px,10vw,120px) 0 clamp(60px,9vw,120px);
  overflow:hidden;
}
.hero .dots{top:clamp(30px,6vw,74px);right:clamp(20px,5vw,64px);color:rgba(255,255,255,.5)}
.hero .dots--low{top:auto;bottom:clamp(24px,5vw,60px);right:auto;left:clamp(20px,5vw,64px);color:rgba(255,255,255,.28)}
.hero h1{color:#fff;margin:.22em 0 .34em;position:relative;z-index:2}
.hero__in{position:relative;z-index:2}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,4vw,40px)}

/* Kompakter Kopf für Unterseiten */
.phead{background:var(--orange);color:#fff;padding:clamp(40px,7vw,84px) 0 clamp(44px,7vw,92px);position:relative;overflow:hidden}
.phead .dots{top:clamp(24px,5vw,54px);right:clamp(20px,5vw,64px);color:rgba(255,255,255,.5)}
.phead h1{color:#fff;margin:.22em 0 .3em;font-size:clamp(2.2rem,6.5vw,4.2rem);position:relative;z-index:2}
.phead__in{position:relative;z-index:2}

/* ---------------------------------------------------------- Standpunkt --- */

.stance__head{max-width:min(100%,720px)}
.stance h2{margin:.3em 0 0}

.rows{list-style:none;margin:clamp(28px,5vw,48px) 0 0;padding:0;border-top:1px solid var(--line)}
.rows li{
  display:flex;align-items:center;gap:clamp(14px,2.5vw,26px);
  padding:clamp(16px,2.6vw,24px) 0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.35rem,3.4vw,2.1rem);
  line-height:1.15;
}
.rows li::before{content:"";width:.42em;height:.42em;border-radius:50%;background:var(--orange);flex:none}
.rows__note{
  margin-left:auto;
  font-family:var(--font-text);font-weight:400;font-size:.95rem;line-height:1.5;
  color:var(--ink-2);max-width:34ch;text-align:right;
}
@media (max-width:760px){
  .rows li{flex-wrap:wrap}
  .rows__note{margin-left:calc(.42em + clamp(14px,2.5vw,26px));text-align:left;width:100%}
}

/* ------------------------------------------------------------- Haltung --- */

.haltung h2{margin:.28em 0 .6em}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.6vw,16px);max-width:60ch}
.ticks li{
  display:flex;align-items:flex-start;gap:.8em;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.05rem,2.3vw,1.35rem);line-height:1.3;
}
.ticks li::before{content:"";width:.44em;height:.44em;border-radius:50%;background:var(--orange);flex:none;margin-top:.5em}

/* ------------------------------------------------------------ Kulinarik --- */

.kul .dots{top:calc(var(--arc) + 26px);right:clamp(20px,5vw,64px);color:rgba(255,255,255,.5)}
.kul h2{margin:.25em 0 .4em}
.kul .btn{margin-top:clamp(22px,3vw,32px)}

/* Textmarker-Effekt – Nachfolger der gelben Ellipse der alten Seite */
.hl{background:linear-gradient(transparent 60%,rgba(213,120,42,.3) 60%);padding:0 .08em}
.band--ink .hl,.band--orange .hl{background:linear-gradient(transparent 60%,rgba(255,255,255,.24) 60%)}

/* ------------------------------------------------------------ Ablauf --- */

.steps4{display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin-top:clamp(30px,5vw,52px)}
.step{
  background:var(--ink);color:rgba(255,255,255,.76);
  padding:clamp(22px,3vw,32px);
  display:flex;flex-direction:column;gap:11px;
}
.step__n{
  font-family:var(--font-display);font-weight:700;
  font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--orange);
}
.step h3{color:#fff;font-size:clamp(1.15rem,2.4vw,1.4rem)}
.step p{margin:0;font-size:.95rem;line-height:1.55}

/* ---------------------------------------------------------- Vorteile --- */

.bene{display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin-top:clamp(30px,5vw,52px)}
.bene__item{background:var(--paper);border:1px solid var(--line);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:12px}
.bene__ic{
  width:46px;height:46px;border-radius:50%;flex:none;
  background:var(--orange);color:#fff;display:grid;place-items:center;
}
.bene__ic svg{width:22px;height:22px}
.bene__item h3{font-size:clamp(1.1rem,2.3vw,1.35rem)}
.bene__item p{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-2)}

/* Teilnehmerzähler */
.counter{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-display);font-weight:700;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  border:1.5px solid var(--line);border-radius:999px;padding:.5em 1.1em;
}
.counter b{color:var(--orange);font-size:1.15em}
.band--ink .counter,.band--orange .counter{border-color:rgba(255,255,255,.35)}
.band--ink .counter b{color:var(--orange-tint)}
.band--orange .counter b{color:#fff}

/* ------------------------------------------------------------- Zahlen --- */

.stats{display:grid;gap:clamp(20px,3vw,34px);grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));margin-top:clamp(30px,5vw,52px)}
.stat{border-top:2px solid rgba(255,255,255,.28);padding-top:16px}
.stat b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;color:#fff}
.stat span{display:block;margin-top:.45em;font-size:.95rem;line-height:1.45;color:rgba(255,255,255,.75)}

/* Zweispalter Text + Zahlen */
.split{display:grid;gap:clamp(24px,4vw,52px);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}

/* -------------------------------------------------------------- Karten --- */

.biz{background:var(--cream-lt);padding:clamp(56px,9vw,110px) 0}
.biz__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,4.5vw,48px)}
.biz__head h2{margin:.25em 0 0}

.posts{
  display:grid;
  gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));
}
.post{
  position:relative;
  margin:0;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.post img{width:100%;height:100%;object-fit:cover;display:block}

/* Nur für Screenreader */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Jede Kachel klappt ihre Details auf */
.post__auf{
  display:block;width:100%;height:100%;padding:0;border:0;background:none;
  cursor:pointer;position:relative;
}
.post__auf:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.post--auf:hover{transform:translateY(-3px);border-color:var(--orange);box-shadow:0 8px 22px rgba(43,38,34,.14)}

/* Das Plus zeigt an, dass hinter der Kachel mehr steckt. */
.post__lupe{
  position:absolute;right:9px;bottom:9px;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(251,248,242,.92);color:var(--orange-dark);
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1;
  box-shadow:0 2px 8px rgba(43,38,34,.18);
  opacity:0;transform:scale(.8);
  transition:opacity .18s ease,transform .18s ease;
}
.post--auf:hover .post__lupe,
.post__auf:focus-visible .post__lupe{opacity:1;transform:none}

/* Auf Tippgeräten gibt es kein Hovern – dort immer zeigen. */
@media (pointer:coarse){.post__lupe{opacity:1;transform:none}}

/* ------------------------------------------------- Betriebsdialog --- */

.bizdlg{
  width:min(560px,calc(100vw - 2*var(--pad)));
  max-height:min(90dvh,760px);
  padding:0;border:0;border-radius:4px;
  background:var(--paper);color:var(--ink);
  overflow:auto;overscroll-behavior:contain;
  box-shadow:0 24px 70px rgba(43,38,34,.3);
}
.bizdlg::backdrop{background:rgba(43,38,34,.55);backdrop-filter:blur(3px)}
/* Eigene Leiste, damit das Kreuz nicht auf der Grafik klebt. Sie bleibt
   beim Scrollen oben stehen. */
.bizdlg__kopf{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;gap:12px;
  padding:8px 8px 8px 20px;
  background:var(--paper);border-bottom:1px solid var(--line);
}
.bizdlg__name{
  flex:1;min-width:0;
  font-family:var(--font-display);font-weight:700;
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bizdlg__zu{
  flex:none;width:44px;height:44px;border-radius:50%;
  border:0;cursor:pointer;background:none;color:var(--ink);
  font-size:1.7rem;line-height:1;
  transition:background-color .16s ease,color .16s ease;
}
.bizdlg__zu:hover{background:var(--orange);color:#fff}
.bizdlg__bild img{width:100%;height:auto;display:block}
.bizdlg__text{padding:clamp(20px,4vw,30px)}
.bizdlg__text h3,
.bizdlg__text .bd__kat{display:none}
.bd__kat{
  margin:0 0 1em;font-family:var(--font-display);font-weight:700;
  font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-dark);
}
.bd__adr{
  display:flex;gap:.55em;align-items:flex-start;
  margin:0 0 1em;font-size:.98rem;color:var(--ink-2);
}
.bd__adr svg{width:1.15em;height:1.15em;flex:none;margin-top:.14em;color:var(--orange)}
.bd__txt{margin:0 0 1.2em;line-height:1.7;color:var(--ink-lt)}
.bd__offen{
  margin:0;padding:12px 15px;
  background:var(--cream);border-left:3px solid var(--orange-tint);
  font-size:.93rem;color:var(--ink-2);
}
.bd__links{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.bd__link{
  display:inline-flex;align-items:center;gap:.5em;
  border:1px solid var(--line);border-radius:999px;
  padding:.6em 1.05em;text-decoration:none;
  font-family:var(--font-display);font-weight:700;
  font-size:.86rem;letter-spacing:.04em;color:var(--ink);
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.bd__link svg{width:1.1em;height:1.1em;flex:none}
.bd__link:hover{background:var(--orange);border-color:var(--orange);color:#fff}

@media (max-width:760px){
  .bizdlg{
    width:100vw;max-width:100vw;max-height:92dvh;
    margin:auto auto 0;border-radius:14px 14px 0 0;
  }
  .bd__link{min-height:44px}
}

/* Name nur für Screenreader – er steht bereits in der Grafik */
.post figcaption{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* Letzte Kachel: Aufruf zum Mitmachen */
.post--cta{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  border-style:dashed;background:transparent;text-decoration:none;text-align:center;
  font-family:var(--font-display);font-weight:700;
  color:var(--orange-dark);
  padding:18px;
}
.post--cta:hover{transform:translateY(-3px);border-color:var(--orange);border-style:solid}
.post__plus{
  width:52px;height:52px;border-radius:50%;flex:none;
  border:1.5px dashed var(--orange);color:var(--orange);
  display:grid;place-items:center;font-size:1.7rem;line-height:1;
}
.post__cta-text{font-size:1.05rem;line-height:1.3}
.post__cta-text span{
  display:block;font-family:var(--font-text);font-weight:400;
  font-size:.85rem;color:var(--ink-2);margin-top:.4em;
}

/* ----------------------------------------------------------------- Team --- */

.about{
  position:relative;z-index:2;
  background:var(--paper);
  color:var(--ink);
  padding:clamp(28px,5vw,60px);
  max-width:920px;
}
/* die Karte ist hell – Weiß von .band--orange h2 zuruecknehmen */
.about h2{color:var(--ink);margin:.28em 0 .6em}

.about__logo{
  display:block;width:max-content;max-width:100%;
  margin:clamp(16px,2.4vw,22px) 0 clamp(4px,1vw,10px);
  transition:opacity .18s ease;
}
.about__logo img{width:auto;height:clamp(60px,8vw,92px)}
.about__logo:hover{opacity:.75}
.about p{margin:0 0 1em;color:var(--ink-2);font-size:clamp(1rem,2vw,1.1rem);line-height:1.62;max-width:62ch}
.about p strong{color:var(--ink)}
/* auf der hellen Karte greift der orange Marker, nicht der weiße der Orangefläche */
.about .hl{background:linear-gradient(transparent 60%,rgba(213,120,42,.3) 60%)}

.trust{
  list-style:none;margin:clamp(24px,3.5vw,34px) 0 0;padding:clamp(22px,3vw,30px) 0 0;
  display:grid;gap:clamp(16px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  border-top:1px solid var(--line);
}
.trust b{
  display:flex;align-items:center;gap:.55em;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.25;
}
.trust b::before{content:"";width:.45em;height:.45em;border-radius:50%;background:var(--orange);flex:none}
.trust span{display:block;margin-top:.4em;font-size:.93rem;line-height:1.5;color:var(--ink-2)}

.about__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:clamp(24px,3.5vw,34px)}

/* ----------------------------------------------------------------- CTA --- */

.cta{background:var(--cream);padding:clamp(56px,9vw,110px) 0}
.cta__box{
  background:var(--ink);color:var(--cream-lt);
  padding:clamp(32px,5.5vw,68px);
  display:grid;gap:clamp(22px,3vw,40px);align-items:center;grid-template-columns:1fr;
  position:relative;overflow:hidden;
}
.cta__box .dots{top:-14px;right:-14px;color:rgba(213,120,42,.65)}
.cta__box h2{color:#fff;margin:.3em 0 .4em;position:relative;z-index:2}
.cta__box .lede{color:rgba(255,255,255,.78);position:relative;z-index:2}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px;position:relative;z-index:2}
@media (min-width:900px){
  .cta__box{grid-template-columns:1.4fr auto}
  .cta__actions{flex-direction:column;align-items:stretch}
}

/* ------------------------------------------------------------ Formular --- */

.formwrap{
  position:relative; /* sonst überdeckt der positionierte Seitenkopf den Bogen */
  background:var(--cream);
  margin-top:calc(var(--arc) * -1);
  padding:calc(var(--arc) + clamp(30px,5vw,60px)) 0 clamp(56px,9vw,110px);
}
.formgrid{display:grid;gap:clamp(26px,4vw,52px);grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.formgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start}}

.formside h2{margin:.28em 0 .5em}
.formside .steps{list-style:none;margin:clamp(20px,3vw,30px) 0 0;padding:0;display:grid;gap:18px;counter-reset:s}
.formside .steps li{display:flex;gap:14px;align-items:flex-start}
.formside .steps li::before{
  counter-increment:s;content:counter(s);
  width:2em;height:2em;border-radius:50%;flex:none;
  background:var(--orange);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
  display:grid;place-items:center;margin-top:.15em;
}
.formside .steps b{font-family:var(--font-display);font-size:1.1rem;display:block;line-height:1.25}
.formside .steps span{font-size:.95rem;color:var(--ink-2)}

.formcard{background:var(--paper);border:1px solid var(--line);padding:clamp(22px,3.6vw,42px)}
.formcard__head{margin-bottom:clamp(20px,3vw,30px)}
.formcard__head h3{margin:0 0 .4em}
.formcard__head p{margin:0;color:var(--ink-2);font-size:.98rem}

.fields{display:grid;gap:clamp(16px,2.4vw,22px);grid-template-columns:minmax(0,1fr)}
.grid-2{display:grid;gap:clamp(16px,2.4vw,22px);grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

.field{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
/* Die Datei-Auswahl ist selbst ein <label>. Ohne Ausnahme würde der
   Dateiname in Grossbuchstaben erscheinen – „LOGO-WOHN-SCHICK.PNG". */
.field label:not(.check):not(.filefield),.flabel{
  font-family:var(--font-display);font-weight:700;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
}
.opt{color:var(--ink-2);letter-spacing:.06em;font-weight:400;text-transform:none}
.req{color:var(--orange)}

.input{
  width:100%;
  font:inherit;font-size:1rem;
  color:var(--ink);
  background:var(--cream-lt);
  border:1px solid var(--line);
  border-radius:0;
  padding:.78em .9em;
  transition:border-color .18s ease,background-color .18s ease;
}
.input::placeholder{color:#a2968b}
.input:hover{border-color:rgba(43,38,34,.28)}
.input:focus{background:#fff;border-color:var(--orange);outline-offset:0}
.input.err{border-color:#c0392b;background:#fdf2f0}
textarea.input{resize:vertical;min-height:8em;line-height:1.55}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font-family:var(--font-display);font-weight:700;
  font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.6em 1.05em;border-radius:999px;
  border:1.5px solid var(--line);background:transparent;color:var(--ink);
  cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.chip:hover{border-color:var(--orange);color:var(--orange-dark)}
.chip.is-on{background:var(--orange);border-color:var(--orange);color:#fff}

.check{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;line-height:1.5;cursor:pointer}
.check input{margin-top:.28em;width:1.15em;height:1.15em;accent-color:var(--orange);flex:none}
.check a{color:var(--orange-dark)}

.err-msg{display:none;color:#c0392b;font-size:.88rem}
.err-msg.show{display:block}

.formdone{
  display:flex;gap:11px;align-items:flex-start;
  background:#eef6ec;border:1px solid #bcd9b4;color:#2f5d28;
  padding:15px 17px;font-size:.96rem;
}
.formdone svg{width:1.2em;height:1.2em;flex:none;margin-top:.2em}

.formnote{margin:16px 0 0;font-size:.88rem;color:var(--ink-2)}

/* --------------------------------------------------- Anmeldeformular --- */

.fset{border:0;margin:0;padding:0;display:grid;gap:clamp(14px,2.2vw,20px);grid-template-columns:minmax(0,1fr)}
.fset+.fset{border-top:1px solid var(--line);padding-top:clamp(22px,3.2vw,30px)}
.fset legend{
  padding:0;margin-bottom:2px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.1rem,2.4vw,1.3rem);
}
.fset__hint{margin:-6px 0 0;font-size:.92rem;color:var(--ink-2)}
.field--narrow{max-width:16em}
.grid-2--plz{grid-template-columns:1fr}
@media (min-width:560px){.grid-2--plz{grid-template-columns:minmax(0,9em) 1fr}}
select.input{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a514a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8em center;background-size:1.1em;padding-right:2.6em}

/* Auswahlkarten für Größe und Zahlungsweise */
.opts{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.opt{display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt__body{
  display:flex;align-items:center;gap:14px;
  border:1.5px solid var(--line);background:var(--cream-lt);
  padding:clamp(13px,2vw,17px) clamp(14px,2.2vw,20px);
  transition:border-color .16s ease,background-color .16s ease;
}
.opt:hover .opt__body{border-color:var(--orange)}
.opt input:checked+.opt__body{border-color:var(--orange);background:#fff;box-shadow:inset 0 0 0 1px var(--orange)}
.opt input:focus-visible+.opt__body{outline:3px solid var(--orange);outline-offset:2px}
.opt__key{
  width:2.1em;height:2.1em;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--orange);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
}
.opt__label{font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.25}
.opt__price{
  margin-left:auto;text-align:right;flex:none;
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;white-space:nowrap;
}
.opt__price small{display:block;font-weight:400;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.opt__tag{
  display:inline-block;margin-left:.5em;vertical-align:middle;
  background:var(--orange);color:#fff;border-radius:999px;
  padding:.25em .7em;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
}
.opt__note{margin-left:auto;font-family:var(--font-text);font-size:.86rem;color:var(--ink-2);text-align:right}
.opts.err .opt__body{border-color:#c0392b}

/* Beitragsanzeige im Anmeldeformular */
.pricebox{
  margin:0;
  background:var(--cream);border-left:3px solid var(--orange);
  padding:13px 16px;
  font-size:.96rem;line-height:1.55;
  font-variant-numeric:tabular-nums;
}
.pricebox strong{font-family:var(--font-display);font-size:1.15rem}
.pricebox s{color:var(--ink-2)}
.pricebox em{display:block;margin-top:.35em;font-style:normal;font-size:.88rem;color:var(--ink-2)}

/* Rechtstexte im Formular */
.legal{
  margin:0;padding:clamp(15px,2.2vw,20px);
  background:var(--cream);border-left:3px solid var(--orange);
}
.legal p{margin:0;font-size:.95rem;line-height:1.6;font-style:italic}
.legal p+p{margin-top:.8em}
.legal__note{font-style:normal;font-size:.88rem!important;color:var(--ink-2)}
.legal__ids{font-style:normal;font-size:.88rem!important;font-variant-numeric:tabular-nums}

/* Aufklappbare Teilnahmebedingungen */
.terms{border:1px solid var(--line);background:var(--cream-lt)}
.terms summary{
  cursor:pointer;list-style:none;
  padding:clamp(13px,2vw,16px) clamp(14px,2.2vw,18px);
  display:flex;align-items:center;gap:.6em;
  font-family:var(--font-display);font-weight:700;
  font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;
}
.terms summary::-webkit-details-marker{display:none}
.terms summary::before{
  content:"";width:.5em;height:.5em;flex:none;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(-45deg);transition:transform .18s ease;
}
.terms[open] summary::before{transform:rotate(45deg)}
.terms summary:hover{color:var(--orange-dark)}
.terms__body{
  padding:0 clamp(14px,2.2vw,18px) clamp(16px,2.4vw,20px);
  border-top:1px solid var(--line);
  max-height:22em;overflow-y:auto;
}
.terms__body h4{
  margin:1.2em 0 .35em;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
}
.terms__body h4:first-child{margin-top:1em}
.terms__body p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.terms__body strong{color:var(--ink)}

/* Unterschriftenfeld */
.sig{
  position:relative;
  height:clamp(150px,26vw,190px);
  border:1.5px dashed var(--line);
  background:var(--cream-lt);
  transition:border-color .16s ease,background-color .16s ease;
}
.sig.is-signed{border-style:solid;border-color:var(--orange);background:#fff}
.sig.err{border-color:#c0392b}
.sig__pad{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.sig__line{position:absolute;left:12%;right:12%;bottom:44px;border-bottom:1px solid var(--line)}
.sig__hint{
  position:absolute;left:0;right:0;bottom:18px;text-align:center;pointer-events:none;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  font-family:var(--font-display);font-weight:700;
}
.sig.is-signed .sig__hint,.sig.is-signed .sig__line{opacity:0}
.sig__clear{
  position:absolute;top:10px;right:10px;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  border-radius:999px;padding:.35em .9em;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
}
.sig__clear:hover{border-color:var(--orange);color:var(--orange-dark)}

/* Hinweisbox */
.notice{
  display:flex;gap:11px;align-items:flex-start;
  background:#fdf4e7;border:1px solid #e6c79a;color:#6b4a1d;
  padding:15px 17px;font-size:.94rem;line-height:1.55;
}
.notice svg{width:1.25em;height:1.25em;flex:none;margin-top:.15em}
.notice a{color:var(--orange-dark)}

/* Seitenspalte der Anmeldung */
.formside__lead{margin:0 0 1em;font-size:1rem;line-height:1.62;color:var(--ink-2)}
.callout{background:var(--paper);border:1px solid var(--line);padding:clamp(18px,2.6vw,24px);margin-top:clamp(18px,2.6vw,26px)}
.callout h3{font-size:1.1rem;margin:0 0 .6em}
.callout p{margin:0 0 .7em;font-size:.93rem;line-height:1.55;color:var(--ink-2)}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--ink)}
.formside__claim{
  margin:clamp(18px,2.6vw,26px) 0 0;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.1rem,2.4vw,1.35rem);line-height:1.3;
}

/* Datei-Auswahl (Logo-Upload) */
.filefield{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  border:1.5px dashed var(--line);background:var(--cream-lt);
  padding:13px 16px;
  transition:border-color .16s ease,background-color .16s ease;
}
.filefield:hover{border-color:var(--orange)}
.filefield input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.filefield input[type=file]:focus-visible+.filefield__btn{outline:3px solid var(--orange);outline-offset:2px}
.filefield__btn{
  flex:none;background:var(--ink);color:var(--cream-lt);border-radius:999px;
  padding:.55em 1.2em;
  font-family:var(--font-display);font-weight:700;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
}
.filefield__name{font-family:var(--font-text);font-weight:400;font-size:.92rem;letter-spacing:0;text-transform:none;color:var(--ink-2);overflow-wrap:anywhere}
.field.err .filefield,.filefield.err{border-color:#c0392b;background:#fdf2f0}

/* Honigtopf gegen Bots – für Menschen unsichtbar */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------ Rechtstexte --- */

.doc{
  position:relative;
  background:var(--cream-lt);
  margin-top:calc(var(--arc) * -1);
  padding:calc(var(--arc) + clamp(30px,5vw,56px)) 0 clamp(56px,9vw,110px);
}
.doc__grid{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:960px){.doc__grid{grid-template-columns:minmax(0,15em) minmax(0,1fr)}}

.doc__toc{position:sticky;top:90px}
@media (max-width:959px){.doc__toc{position:static}}
.doc__toc ol{list-style:none;margin:14px 0 0;padding:0;counter-reset:toc;display:grid;gap:7px}
.doc__toc li{counter-increment:toc}
.doc__toc a{
  display:flex;gap:.6em;text-decoration:none;
  font-size:.9rem;line-height:1.35;color:var(--ink-2);
  padding:3px 0;
}
.doc__toc a::before{content:counter(toc) ".";color:var(--orange);font-weight:600;flex:none}
.doc__toc a:hover{color:var(--orange-dark)}

.doc__body{max-width:68ch}
.doc__body h2{
  font-size:clamp(1.35rem,3vw,1.75rem);
  margin:2em 0 .5em;padding-top:1em;
  border-top:1px solid var(--line);
  scroll-margin-top:90px;
}
.doc__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc__body h3{font-size:1.05rem;margin:1.6em 0 .4em}
.doc__body p{margin:0 0 1em;line-height:1.7}
.doc__body ul{margin:0 0 1em;padding-left:1.2em;line-height:1.7}
.doc__body li{margin-bottom:.35em}
.doc__body a{color:var(--orange-dark)}
.doc__address{
  font-style:normal;line-height:1.8;
  background:var(--paper);border-left:3px solid var(--orange);
  padding:clamp(15px,2.2vw,20px);margin:0 0 1.2em;
}
.doc__stand{
  margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--ink-2);
}

/* -------------------------------------------------------------- Footer --- */

.foot{background:var(--ink);color:rgba(255,255,255,.72);padding:clamp(40px,6vw,70px) 0 0}
.foot__in{display:grid;gap:30px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.foot__in{grid-template-columns:1.4fr 1fr 1fr}}
.foot h3{color:#fff;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{color:rgba(255,255,255,.72);text-decoration:none}
.foot a:hover{color:var(--orange-tint)}
.foot__claim{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,3vw,1.9rem);color:#fff;line-height:1.15;margin:0 0 12px}
/* padding-block, nicht padding: die Kurzform würde den seitlichen
   Abstand von .shell überschreiben und die Zeile bis an den
   Bildschirmrand laufen lassen. */
.foot__bar{margin-top:clamp(34px,5vw,56px);border-top:1px solid rgba(255,255,255,.14);padding-block:20px;font-size:.85rem}
.foot__bar a{text-decoration:underline;text-underline-offset:3px}

.social{display:flex;gap:11px;margin-top:18px}
.social a{
  display:inline-flex;align-items:center;gap:.6em;
  border:1px solid rgba(255,255,255,.26);border-radius:999px;
  padding:.5em 1em .5em .75em;
  font-family:var(--font-display);font-weight:700;
  font-size:.82rem;letter-spacing:.1em;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.social a span{color:inherit}
.social a:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.social svg{width:19px;height:19px}

/* ------------------------------------------------------------ Chatbot --- */
/* Ankerpunkt für den Projekt-Chatbot (kommt später).
   Das Widget hängt sich an #chat-slot bzw. legt sich fix unten rechts ab. */
#chat-slot{position:fixed;right:0;bottom:0;z-index:99997}
#chat-slot:empty{display:none}

/* ------------------------------------------------------------- Reveal --- */

.anim .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.anim .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .anim .rv{opacity:1;transform:none;transition:none}
  .btn:hover,a.card:hover{transform:none}
}

/* ==========================================================================
   MOBIL

   Zwei Fragen werden hier getrennt beantwortet:

   (pointer:coarse) – wird mit dem Finger bedient? Dann müssen Tippziele
   gross genug sein, unabhängig davon, wie breit der Bildschirm ist. Auch
   ein Tablet im Querformat wird angetippt.

   (max-width:…)    – wie viel Platz ist da? Das steuert das Layout.
   ========================================================================== */

/* ------------------------------------------------- Finger statt Maus --- */
@media (pointer:coarse){

  /* Apples Empfehlung sind 44 px Kantenlänge. Danach richtet sich alles
     Folgende – erreicht wird das über Innenabstand, damit sich am
     Erscheinungsbild nichts ändert. */

  .top__brand{padding:13px 0}
  .burger{height:44px;padding:11px 8px}

  .foot ul{gap:0}
  .foot ul a{display:block;padding:12px 0}
  .foot__bar a{display:inline-block;padding:11px 0}
  .social a{min-height:44px}

  .doc__toc a{padding:13px 0}

  /* Verweise mitten im Satz können nicht 44 px hoch werden, ohne den
     Zeilenfall zu zerreissen. Innenabstand an einem Inline-Element
     vergrössert aber die Trefferfläche, ohne die Zeilenhöhe zu ändern –
     genau das, was hier gebraucht wird. */
  .doc__body p a,.doc__body li a,.doc__address a,
  .notice a,.callout a,.fset__hint a,.formside__claim a,
  .formnote a,.terms a,.lede a,.step a,.bene__item a{padding-block:13px}
  .formnote a{padding-block:14px}

  /* Ausnahme: In der Zustimmungszeile stehen die Verweise mitten im
     Etikett des Ankreuzfelds. Eine grössere Trefferfläche würde hier
     nur dazu führen, dass man beim Ankreuzen aus dem Formular
     navigiert. Das Etikett selbst ist gross genug. */
  .check a{padding-block:0}

  .chip{min-height:44px;display:inline-flex;align-items:center}

  /* Kästchen zum Ankreuzen: 15 px sind mit dem Finger nicht zu treffen. */
  .check{gap:13px;padding:4px 0}
  .check input{width:24px;height:24px;margin-top:.05em}

  /* „Löschen" über dem Unterschriftenfeld */
  .sig__clear{min-height:44px;padding:.55em 1.1em}

  /* Fläche zum Unterschreiben grosszügiger, sonst wird es eng */
  .sig{min-height:190px}

  /* Aufklappbares (Teilnahmebedingungen) */
  summary{padding:12px 0}

  /* Datei-Auswahl: Knopf und Dateiname dürfen untereinander rutschen,
     lange Dateinamen sprengen sonst die Zeile. */
  .filefield{flex-wrap:wrap;row-gap:8px}
  .filefield__btn{min-height:44px;display:inline-flex;align-items:center}

  /* Der graue Kasten, den mobile Browser beim Antippen aufblitzen lassen,
     passt nicht zum Farbklang – ein Hauch Orange stattdessen. */
  a,button,summary,label,input,select,textarea{
    -webkit-tap-highlight-color:rgba(213,120,42,.18);
  }
}

/* --------------------------------------------------- Schmale Geräte --- */
@media (max-width:760px){

  /* Auf dem Telefon eine Spur grösser als am Bildschirm – gesperrte
     Grossbuchstaben in Kleinstgrösse liest unterwegs niemand. */
  .eyebrow{font-size:.84rem}
  .opt__tag{font-size:.8rem;letter-spacing:.1em}
  .opt__price small{font-size:.78rem}

  /* Ist das Menü länger als der Bildschirm, muss es scrollen können –
     sonst sind die unteren Punkte nicht erreichbar. */
  .top__mobile{
    max-height:calc(100dvh - 66px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  /* Zwei Kacheln nebeneinander statt einer sehr grossen. */
  .posts{grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr))}

  /* Lange Wörter (E-Mail-Adressen, Nutzungsbedingungen) dürfen umbrechen,
     statt die Seite seitlich aufzuziehen. */
  .doc__body,.callout,.notice,.formside__lead{overflow-wrap:break-word}

  /* Randabstand um die Aussparung am unteren Bildschirmrand ergänzen. */
  .foot{padding-bottom:env(safe-area-inset-bottom)}
}

/* Auf sehr schmalen Geräten wird der gesperrte Grossbuchstabensatz
   sonst zum Flaschenhals. */
@media (max-width:380px){
  .top__brand{font-size:.72rem;letter-spacing:.14em}
  .eyebrow{letter-spacing:.18em}
  .posts{grid-template-columns:repeat(auto-fill,minmax(min(100%,130px),1fr))}
  .formcard{padding:18px}

  /* Die Auswahlkarten der Anmeldung stehen in einer Zeile: Kennbuchstabe,
     Bezeichnung, Preis. Der Preis darf nicht umbrechen – dadurch liess
     sich die Zeile nicht schmaler als 291 px machen und die Seite lief
     seitlich über. Auf sehr schmalen Geräten rutscht der Preis deshalb
     unter die Bezeichnung. */
  /* Deutsche Komposita wie „Teilnahmebedingungen" oder „Unternehmensgrösse"
     sind breiter als der Bildschirm. Mit lang="de" trennt der Browser sie
     sauber; break-word ist der Notnagel, falls kein Wörterbuch da ist. */
  legend,summary,label,.flabel,h1,h2,h3,.doc__body,.terms__body,.formcard{
    hyphens:auto;
    overflow-wrap:break-word;
  }
}

/* Unter dieser Breite passt die Zeile „Kennbuchstabe – Bezeichnung – Preis"
   nicht mehr nebeneinander. Der Preis rutscht dann darunter, statt die
   Seite seitlich aufzuziehen. */
@media (max-width:369px){
  .opt__body{flex-wrap:wrap;row-gap:6px}
  .opt__price,.opt__note{
    flex:1 1 100%;
    margin-left:0;text-align:left;
    white-space:normal;
  }
  .opt__price small{display:inline;margin-left:.45em}
}

/* Querformat auf dem Telefon: wenig Höhe, deshalb weniger Luft. */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:clamp(28px,6vh,48px);padding-bottom:clamp(28px,6vh,48px)}
  .top__mobile{max-height:calc(100dvh - 60px)}
}