/* ===========================================================================
   ESO Media – neues Erscheinungsbild (Entwurf 03.10.2026)
   Eine Datei statt 18: Papier, Tinte und Limette. Schriften liegen auf dem eigenen Server (keine Google Fonts, kein CDN).
   Schriften: Bricolage Grotesque (Überschriften), Instrument Sans (Text), Newsreader kursiv (einzelne betonte Wörter).
   Alle drei stehen unter der SIL Open Font License 1.1. Auf deutsche/westliche Zeichen und die genutzten Stärken gekürzt
   (fonttools, 04.10.2026), Originale bei Bedarf neu aus dem esomedia-Projekt nehmen.
   =========================================================================== */

/* ---------- Schriften ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800; /* auf die genutzten Stärken gekürzt (04.10.2026) */
  font-display: swap;
  src: url("../schriften/bricolage-grotesque.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../schriften/instrument-sans.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../schriften/instrument-sans-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400; /* nur diese Stärke wird genutzt, Datei 21 KB statt 64 KB */
  font-display: swap;
  src: url("../schriften/newsreader-italic.woff2") format("woff2");
}

/* ---------- Farben und Maße ---------- */
:root {
  --papier: #f3f1ea;
  --papier-tief: #e9e6dc;
  --tinte: #15160f;
  --tinte-weich: #4a4d43;
  --linie: rgba(21, 22, 15, 0.14);
  --limette: #d5ed5b;
  --limette-hell: #e6f59a;
  --gruen-text: #48650f;
  --nacht: #121410;
  --nacht-flaeche: #1c1f19;
  --auf-nacht: #eceee5;
  --auf-nacht-weich: #a9ae9f;
  --linie-nacht: rgba(236, 238, 229, 0.14);

  --schrift-titel: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --schrift-text: "Instrument Sans", "Segoe UI", sans-serif;
  --schrift-akzent: "Newsreader", Georgia, serif;

  --breite: 1320px;
  --rand: clamp(16px, 4vw, 48px);
  --runde: 14px;
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Grundlagen ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

::selection { background: var(--limette); color: var(--tinte); }

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

.nacht :focus-visible { outline-color: var(--limette); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

em.akzent,
.akzent {
  font-family: var(--schrift-akzent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.rahmen {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.nur-lesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sprung {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--tinte);
  color: var(--papier);
  border-radius: 8px;
}

.sprung:focus { top: 1rem; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--tinte);
  border-radius: 12px;
  background: var(--tinte);
  color: var(--papier);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s var(--kurve), background 0.2s ease, color 0.2s ease;
}

.knopf:hover { transform: translateY(-2px); }

.knopf svg { width: 1.1rem; height: 1.1rem; transition: transform 0.3s var(--kurve); }
.knopf:hover svg { transform: translateX(3px); }

.knopf-hell {
  background: transparent;
  color: var(--tinte);
}

.knopf-hell:hover { background: var(--tinte); color: var(--papier); }

.knopf-limette {
  border-color: var(--limette);
  background: var(--limette);
  color: var(--tinte);
}

.knopf-limette:hover { background: var(--limette-hell); border-color: var(--limette-hell); }

.knopf-rand-nacht {
  border-color: var(--linie-nacht);
  background: transparent;
  color: var(--auf-nacht);
}

.knopf-rand-nacht:hover { border-color: var(--auf-nacht); }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
}

.textlink svg { width: 1rem; height: 1rem; transition: transform 0.3s var(--kurve); }
.textlink:hover svg { transform: translateX(3px); }

/* ---------- Kopfleiste ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 76px;
}

.marke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--schrift-titel);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
}

/* „Media“ wie mit dem Textmarker angestrichen: die Limette der bisherigen Marke, lesbar auf Papier */
.marke span {
  padding: 0 0.28rem 0.02rem;
  border-radius: 6px;
  background: var(--limette);
}

.menue {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.menue ul {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menue a {
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 0.35em;
}

.menue ul a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }

.menue .neu-wort {
  margin-left: 0.3rem;
  font-family: var(--schrift-akzent);
  font-style: italic;
  color: var(--gruen-text);
}

.menue .knopf { min-height: 2.75rem; padding: 0.6rem 1.15rem; font-size: 0.92rem; }

/* Auf dem PC unsichtbar: Drei-Striche-Taste, Kopf der Seitenleiste, Kontaktzeile, dunkler Hintergrund */
.menue-knopf,
.menue-leiste-kopf,
.menue-kontakt,
.menue-hintergrund { display: none; }

/* ---------- Handy und Tablet: Seitenleiste von rechts (04.10.2026) ---------- */
@media (max-width: 960px) {
  /* Drei Striche, wird beim Öffnen nicht verändert (das X sitzt in der Leiste) */
  .menue-knopf {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0 0.7rem;
    border: 1.5px solid var(--tinte);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
  }

  .menue-knopf span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--tinte);
  }

  .menue-knopf span:nth-child(2) { width: 70%; margin-left: auto; }

  .menue-hintergrund {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(21, 22, 15, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }

  .menue {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(86vw, 380px);
    padding: 0 1.5rem 1.75rem;
    overflow-y: auto;
    background: var(--papier);
    box-shadow: -24px 0 60px -20px rgba(21, 22, 15, 0.45);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.45s;
  }

  .kopf.offen .menue {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
  }

  .kopf.offen .menue-hintergrund {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s;
  }

  .menue-leiste-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--linie);
  }

  .menue-zu {
    display: inline-grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 0;
    border-radius: 12px;
    background: var(--tinte);
    color: var(--papier);
    cursor: pointer;
  }

  .menue-zu svg { width: 1.2rem; height: 1.2rem; }

  .menue ul { flex-direction: column; gap: 0; }

  .menue ul a {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--linie);
    font-family: var(--schrift-titel);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  /* Menüpunkte gleiten nacheinander herein */
  .kopf.offen .menue ul li { animation: menue-punkt 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .kopf.offen .menue ul li:nth-child(2) { animation-delay: 0.04s; }
  .kopf.offen .menue ul li:nth-child(3) { animation-delay: 0.08s; }
  .kopf.offen .menue ul li:nth-child(4) { animation-delay: 0.12s; }
  .kopf.offen .menue ul li:nth-child(5) { animation-delay: 0.16s; }
  .kopf.offen .menue ul li:nth-child(6) { animation-delay: 0.2s; }
  .kopf.offen .menue ul li:nth-child(7) { animation-delay: 0.24s; }

  .menue > .knopf { margin-top: 1.5rem; min-height: 3.25rem; font-size: 1rem; }

  .menue-kontakt {
    display: block;
    margin-top: 1rem;
    color: var(--tinte-weich);
    font-size: 0.9rem;
    text-align: center;
  }

  .menue-kontakt a { font-weight: 600; text-decoration: underline; }

  /* Seite dahinter scrollt nicht mit */
  html.menue-offen,
  html.menue-offen body { overflow: hidden; }
}

@keyframes menue-punkt {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem);
}

.hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.hero h1 {
  font-size: clamp(3.1rem, 8.4vw, 7.4rem);
  font-weight: 750;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.hero h1 .akzent {
  position: relative;
  z-index: 0;
  display: inline-block;
  font-size: 1.08em;
  letter-spacing: -0.025em;
}

/* Blickfang auf der Startseite: Limetten-Streifen hinter dem Akzentwort, wie mit dem Textmarker gezogen.
   Limette als Schriftfarbe wäre auf dem hellen Grund nicht lesbar, als Fläche hinter dunkler Schrift schon. */
.hero h1 .akzent::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.07em;
  right: -0.05em;
  bottom: 0.13em;
  height: 0.48em;
  border-radius: 0.05em;
  background: var(--limette);
  transform: rotate(-1.4deg);
}

.hero-text {
  max-width: 34rem;
  margin-top: 2rem;
  color: var(--tinte-weich);
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.55;
}

.hero-text strong { color: var(--tinte); font-weight: 600; }

.hero-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}

/* Foto auf einem Limetten-Block mit einer großen Schrägkante; der Kopf ragt über den Block hinaus */
.portrait {
  position: relative;
  margin: 0;
}

.portrait-buehne {
  position: relative;
  aspect-ratio: 4 / 4.6;
}

.portrait-buehne::before {
  content: "";
  position: absolute;
  inset: 18% 0 0;
  background: var(--limette);
  border-radius: var(--runde);
  clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%);
}

.portrait img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 108%;
  max-width: none;
  transform: translateX(-50%);
}

.portrait figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--tinte);
  font-size: 0.92rem;
}

.portrait figcaption strong { font-weight: 600; white-space: nowrap; }
.portrait figcaption span { color: var(--tinte-weich); text-align: right; }

/* Hero rechts: zwei Fenster aus dem Bestellsystem auf dem Limetten-Block (statt Foto) */
.hero-fenster { margin: 0; }

.hero-fenster-buehne {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 4.3;
}

.hero-fenster-buehne::before {
  content: "";
  position: absolute;
  inset: 8% 0 0;
  background: var(--limette);
  border-radius: var(--runde);
  clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%);
}

.hf-bestellung {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(80%, 22rem);
  margin-top: 6%;
  padding: 1.35rem 1.4rem 1.2rem;
  border-radius: 20px;
  background: #fbfaf6;
  color: var(--tinte);
  font-size: 0.95rem;
  line-height: 1.35;
  text-decoration: none;
  box-shadow: 0 34px 60px -22px rgba(21, 22, 15, 0.55), 0 8px 18px rgba(21, 22, 15, 0.12);
  transform: rotate(-3deg);
  transition: transform 0.45s var(--kurve);
  animation: hf-rein 0.9s var(--kurve) 0.3s both;
}

.hf-bestellung:hover { transform: rotate(0deg) translateY(-4px); }

@keyframes hf-rein {
  from { opacity: 0; transform: translateY(30px) rotate(-8deg); filter: blur(6px); }
  to { opacity: 1; transform: rotate(-3deg); filter: blur(0); }
}

.hf-kopf { display: flex; align-items: center; gap: 0.55rem; font-family: var(--schrift-titel); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }

.hf-punkt { position: relative; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #3f8a17; }

.hf-punkt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #3f8a17;
  opacity: 0;
  animation: hf-ping 1.6s cubic-bezier(0, 0, 0.2, 1) 1.3s 4;
}

@keyframes hf-ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3); opacity: 0; } }

.hf-zeit { margin-left: auto; color: var(--tinte-weich); font-family: var(--schrift-text); font-size: 0.78rem; font-weight: 500; }
.hf-art { margin: 0.2rem 0 0.8rem; color: var(--tinte-weich); font-size: 0.82rem; }

.hf-zeile { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; font-variant-numeric: tabular-nums; }
.hf-summe { margin-top: 0.4rem; padding-top: 0.55rem; border-top: 1px solid var(--linie); font-weight: 700; }

.hf-provision {
  margin: 0.55rem -0.5rem 0;
  padding: 0.45rem 0.5rem;
  border-radius: 9px;
  background: var(--limette);
  font-weight: 700;
}

.hf-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.9rem;
  color: var(--gruen-text);
  font-family: var(--schrift-titel);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.hf-fuss svg { width: 1rem; height: 1rem; transition: transform 0.3s var(--kurve); }
.hf-bestellung:hover .hf-fuss svg { transform: translateX(3px); }

.hf-bon {
  position: absolute;
  z-index: 3;
  top: 13%;
  right: 4%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem 0.65rem 0.7rem;
  border-radius: 14px;
  background: var(--tinte);
  color: var(--auf-nacht);
  font-family: var(--schrift-titel);
  font-size: 0.92rem;
  font-weight: 650;
  box-shadow: 0 18px 34px -12px rgba(21, 22, 15, 0.6);
  transform: rotate(3deg);
  animation: hf-bon 0.8s var(--kurve) 0.9s both;
}

.hf-bon svg { width: 1.3rem; height: 1.3rem; padding: 0.18rem; border-radius: 50%; background: var(--limette); color: var(--tinte); }

@keyframes hf-bon {
  from { opacity: 0; transform: translateY(-16px) rotate(8deg); filter: blur(4px); }
  to { opacity: 1; transform: rotate(3deg); filter: blur(0); }
}

.hero-fenster figcaption {
  padding-top: 0.9rem;
  border-top: 1px solid var(--tinte);
  font-size: 0.9rem;
  color: var(--tinte-weich);
}

@media (prefers-reduced-motion: reduce) {
  .hf-bestellung, .hf-bon, .hf-punkt::after { animation: none; }
}

@media (max-width: 480px) {
  .hf-bestellung { width: 86%; padding: 1.1rem 1.1rem 1rem; font-size: 0.86rem; }
  .hf-bon { top: 5%; right: 2%; font-size: 0.8rem; }
}

/* ---------- Zwei Pakete ---------- */
.pakete { padding-block: clamp(1rem, 3vw, 2rem) clamp(4rem, 8vw, 7rem); }

.pakete-titel {
  margin-bottom: clamp(4.5rem, 8vw, 6.5rem);
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 0.95;
}

.pakete-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}

.paket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  padding-right: clamp(7rem, 30%, 13rem);
  border-radius: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 30px 60px -36px rgba(21, 22, 15, 0.55);
}

.paket-limette { background: var(--limette); color: var(--tinte); }
.paket-nacht { background: var(--nacht); color: var(--auf-nacht); }

/* Echtes Handy-Bild ragt oben rechts aus der Karte: zeigt sofort, was man bekommt */
.paket-bild {
  position: absolute;
  top: -3.25rem;
  right: clamp(1.25rem, 3vw, 2.5rem);
  width: clamp(105px, 24%, 180px);
  aspect-ratio: 300 / 560;
  object-fit: cover;
  object-position: top;
  border: 5px solid var(--tinte);
  border-radius: 22px;
  box-shadow: 0 26px 40px -18px rgba(0, 0, 0, 0.55);
  transform: rotate(5deg);
  transition: transform 0.6s var(--kurve);
}

.paket-nacht .paket-bild { border-color: #050604; transform: rotate(-5deg); }
.paket:hover .paket-bild { transform: rotate(0deg) translateY(-6px); }

.paket h3 {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.paket-nacht h3 .akzent { color: var(--limette); }

.paket-fuer {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  opacity: 0.78;
}

.paket-preis {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.paket-preis strong {
  font-family: var(--schrift-titel);
  font-size: clamp(3.2rem, 6vw, 5rem);
  font-weight: 750;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.paket-nacht .paket-preis strong { color: var(--limette); }

.paket-preis span { font-weight: 600; }

.paket-klein {
  margin-top: 0.75rem;
  max-width: 24rem;
  font-size: 0.88rem;
  line-height: 1.5;
}

.paket-limette .paket-klein { color: #3b4a14; }
.paket-nacht .paket-klein { color: var(--auf-nacht-weich); }

.paket-liste {
  display: grid;
  gap: 0.7rem;
  margin: 1.75rem 0 2rem;
  padding: 1.5rem 0 0;
  list-style: none;
  border-top: 1px solid currentColor;
  border-top-color: rgba(21, 22, 15, 0.25);
}

.paket-nacht .paket-liste { border-top-color: var(--linie-nacht); }

.paket-liste li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-weight: 500;
}

.paket-liste svg {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.2rem;
}

.paket-nacht .paket-liste svg { color: var(--limette); }

.paket .knopf { align-self: flex-start; margin-top: auto; }

.paket-limette .knopf:hover { background: #2a2c22; border-color: #2a2c22; }

/* Zusatz-Band Visitenkarten: flach auf Papier, bewusst leiser als die zwei Pakete */
.zusatz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  margin-top: clamp(1rem, 2.4vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.2vw, 2.75rem);
  border: 1.5px solid var(--tinte);
  border-radius: clamp(20px, 2.4vw, 28px);
}

/* Drei Karten im Format 85 × 55 mm, leicht aufgefächert */
.zusatz-stapel {
  position: relative;
  width: clamp(130px, 14vw, 170px);
  aspect-ratio: 85 / 70;
}

.zusatz-stapel span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 85 / 55;
  border-radius: 6px;
  box-shadow: 0 10px 18px -10px rgba(21, 22, 15, 0.5);
  transition: transform 0.5s var(--kurve);
}

.zusatz-stapel span:nth-child(1) { background: var(--tinte); transform: rotate(-9deg) translate(-6%, -14%); }
.zusatz-stapel span:nth-child(2) { background: var(--limette); transform: rotate(-3deg) translate(-2%, -6%); }

.zusatz-stapel span:nth-child(3) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding: 12% 11%;
  background: #fbfaf6;
  border: 1px solid var(--linie);
  transform: rotate(4deg);
}

.zusatz-stapel b {
  margin-bottom: auto;
  font-family: var(--schrift-titel);
  font-size: 0.85rem;
  letter-spacing: -0.04em;
}

.zusatz-stapel i { display: block; height: 3px; border-radius: 2px; background: var(--linie); }
.zusatz-stapel i:last-child { width: 60%; }

.zusatz:hover .zusatz-stapel span:nth-child(1) { transform: rotate(-14deg) translate(-12%, -20%); }
.zusatz:hover .zusatz-stapel span:nth-child(3) { transform: rotate(7deg) translate(4%, 2%); }

.zusatz-dazu {
  margin-bottom: 0.35rem;
  font-family: var(--schrift-akzent);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gruen-text);
}

.zusatz h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.zusatz-text > p:last-child {
  max-width: 36rem;
  margin-top: 0.6rem;
  color: var(--tinte-weich);
  font-size: 0.95rem;
}

.zusatz-preis {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.zusatz-preis p { display: flex; align-items: baseline; gap: 0.5rem; }

.zusatz-preis strong {
  font-family: var(--schrift-titel);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 750;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.zusatz-preis span { font-weight: 600; }

@media (max-width: 1023px) {
  .zusatz { grid-template-columns: auto minmax(0, 1fr); }
  .zusatz-preis { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .zusatz { grid-template-columns: 1fr; }
  .zusatz-stapel { width: 120px; margin: 0.5rem 0 0 0.75rem; }
}

/* ---------- Abschnitts-Köpfe ---------- */
.abschnitt { padding-block: clamp(4.5rem, 9vw, 8rem); }

.abschnitt-kopf {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.abschnitt-kopf h2,
.abschnitt-kopf h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 0.95;
}

.abschnitt-kopf p { color: var(--tinte-weich); }

/* ---------- Arbeiten ---------- */
.arbeiten-raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1rem, 2.4vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.arbeit { grid-column: span 4; }
.arbeit-gross { grid-column: span 7; }
.arbeit-mittel { grid-column: span 5; }

.arbeit a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.arbeit-bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--runde);
  background: var(--papier-tief);
  box-shadow: 0 1px 0 var(--linie), 0 22px 40px -28px rgba(21, 22, 15, 0.45);
}

.arbeit-bild > img:not(.arbeit-handy),
.arbeit-video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.7s var(--kurve);
}

.arbeit a:hover .arbeit-video { transform: scale(1.03); }

/* Handy-Ansicht der Kundenseite, nur bei den beiden großen Arbeiten */
.arbeit-handy {
  position: absolute;
  right: 5%;
  bottom: 0;
  width: 19%;
  aspect-ratio: 300 / 520;
  object-fit: cover;
  object-position: top;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  border: 3px solid var(--tinte);
  border-radius: 16px;
  box-shadow: 0 18px 30px -12px rgba(21, 22, 15, 0.5);
  transition: transform 0.7s var(--kurve);
}

.arbeit a:hover .arbeit-handy { transform: translateY(-6%); }

.arbeit-text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1.1rem;
}

.arbeit h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 650;
  letter-spacing: -0.025em;
}

.arbeit-text p { color: var(--tinte-weich); font-size: 0.95rem; }

.arbeit-pfeil {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  transition: transform 0.4s var(--kurve);
}

.arbeit a:hover .arbeit-pfeil { transform: translate(3px, -3px); }

/* ---------- Bestellsystem-Kapitel (dunkel) ---------- */
.nacht {
  background: var(--nacht);
  color: var(--auf-nacht);
}

.kapitel {
  border-radius: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) 0 0;
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.kapitel-kopf {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.kapitel h2 {
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.kapitel h2 .akzent { color: var(--limette); font-size: 1.05em; }

.kapitel-text { color: var(--auf-nacht-weich); font-size: 1.1rem; }
.kapitel-text strong { color: var(--auf-nacht); font-weight: 600; }

.kapitel-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

/* Echte Ansichten aus dem System, übereinander gelegt wie auf einem Tisch */
.collage {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}

.collage-pc {
  width: 84%;
  margin-left: auto;
  border-radius: var(--runde);
  border: 1px solid var(--linie-nacht);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}

.collage-handy {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(150px, 21%, 270px);
  border: 6px solid #050604;
  border-radius: 28px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75);
}

.collage-bon {
  position: absolute;
  right: 4%;
  bottom: -1.5rem;
  width: clamp(130px, 17%, 220px);
  border-radius: 4px;
  transform: rotate(3deg);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.75);
}

.collage figcaption {
  position: absolute;
  left: calc(clamp(150px, 21%, 270px) + 1.5rem);
  bottom: 0.25rem;
  max-width: 22rem;
  color: var(--auf-nacht-weich);
  font-size: 0.85rem;
}

/* Der Weg einer Bestellung: vier Kacheln mit echten Ausschnitten aus dem System, verbunden durch eine Limetten-Linie */
.weg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
}

.weg li {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.6rem 1.5rem;
  background: var(--nacht-flaeche);
  border: 1px solid var(--linie-nacht);
  border-radius: 20px;
}

.weg-bild {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.25rem;
  border-radius: 14px;
  background: #0b0c0a;
}

.weg-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.7s var(--kurve);
}

.weg li:hover .weg-bild img { transform: scale(1.05); }

/* Dashboard-Ausschnitt: Beträge stehen links, also links ausrichten */
.weg-bild-links img { object-position: left top; transform-origin: left top; }

/* Pfeil zwischen den Kacheln */
.weg li + li::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 1.9rem;
  height: 1.9rem;
  margin: calc(clamp(4rem, 9vw, 7rem)) 0 0 calc(-1 * clamp(0.75rem, 1.6vw, 1.25rem) / 2 - 1.55rem);
  border-radius: 50%;
  background: var(--limette) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9M10 6l4 4-4 4' fill='none' stroke='%2315160f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
}

/* Die Kacheln sind immer dunkel, auch auf einer hellen Seite: Überschrift deshalb fest hell, nicht geerbt */
.weg h3 {
  color: var(--auf-nacht);
  margin: 0 0.75rem 0.45rem;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.weg p { margin: 0 0.75rem; color: var(--auf-nacht-weich); font-size: 0.93rem; line-height: 1.55; }

/* Rechnung als Balken-Grafik auf einer Limetten-Fläche */
.vergleich {
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border-radius: clamp(20px, 2.4vw, 28px);
  background: var(--limette);
  color: var(--tinte);
}

.vergleich-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 2rem;
}

.vergleich-kopf h3 {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.vergleich-kopf p { color: #3b4a14; font-weight: 500; }

.vergleich-balken {
  display: grid;
  gap: 1.5rem;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
}

.balken-zeile dt { margin-bottom: 0.5rem; font-weight: 600; }

.balken-zeile dd {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

.balken {
  display: block;
  height: clamp(2.6rem, 5vw, 3.6rem);
  border-radius: 10px;
  transform-origin: left;
}

.balken-portal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  padding-right: clamp(1rem, 2vw, 1.5rem);
  background: var(--tinte);
  color: var(--auf-nacht);
}

/* 49 von 1.260 € sind 3,9 % der Breite, mindestens aber gut sichtbar */
.balken-eigen { flex: 0 0 max(3.9%, 1.5rem); background: var(--tinte); }

.balken-zeile b {
  flex: none;
  min-width: 6.5ch;
  font-family: var(--schrift-titel);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.05em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.balken-portal b { min-width: 0; font-size: clamp(1.5rem, 3vw, 2.4rem); }
.balken-zeile:last-child b { text-align: left; }

.vergleich-ergebnis {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1.5px solid var(--tinte);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 500;
}

.vergleich-ergebnis strong { font-weight: 700; }

.vergleich-klein { margin-top: 0.6rem; color: #3b4a14; font-size: 0.85rem; }

.kapitel-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
  color: var(--auf-nacht-weich);
  font-size: 0.9rem;
}

/* ---------- Preisliste (wie eine Karte im Restaurant: Zeilen, Haarlinien, Preis rechts) ---------- */
.preisliste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--tinte);
}

.preis-zeile {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) auto;
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.4rem, 2.6vw, 2rem) 0;
  border-bottom: 1px solid var(--linie);
}

.preis-zeile h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.preis-zeile h3 + p { margin-top: 0.4rem; color: var(--tinte-weich); font-size: 0.95rem; }

.preis-betrag {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.preis-betrag strong {
  font-family: var(--schrift-titel);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.preis-betrag span { margin-top: 0.3rem; color: var(--tinte-weich); font-size: 0.85rem; }

.preis-zeile .knopf { min-width: 11.5rem; }

.preis-zeile-restaurant {
  margin-top: 1.25rem;
  padding-inline: clamp(1.25rem, 2.6vw, 2rem);
  background: var(--nacht);
  color: var(--auf-nacht);
  border-radius: var(--runde);
  border-bottom: 0;
}

.preis-zeile-restaurant h3 + p,
.preis-zeile-restaurant .preis-betrag span { color: var(--auf-nacht-weich); }

.preis-zeile-restaurant .preis-betrag strong { color: var(--limette); }

.preis-hinweise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 2rem;
  margin-top: 2rem;
  color: var(--tinte-weich);
  font-size: 0.88rem;
}

.preis-hinweise a { color: var(--tinte); }

/* ---------- Ablauf: vier Abschnitte mit Zeitangabe, darüber ein Balken, der von Schritt zu Schritt dunkler wird ---------- */
.ablauf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ablauf li { padding-top: 1.5rem; border-top: 6px solid var(--limette); }
.ablauf li:nth-child(2) { border-top-color: #b8d24a; }
.ablauf li:nth-child(3) { border-top-color: #7f9a2a; }
.ablauf li:nth-child(4) { border-top-color: var(--tinte); }

.ablauf-zeit {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--schrift-akzent);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gruen-text);
}

.ablauf h3 { margin-bottom: 0.5rem; font-size: 1.4rem; letter-spacing: -0.03em; }
.ablauf p { color: var(--tinte-weich); font-size: 0.97rem; }

/* ---------- Über mich ---------- */
.ueber {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* Name wie eine Unterschrift, statt das Foto aus dem Hero ein zweites Mal zu zeigen */
.ueber-name {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--limette);
  border-radius: clamp(20px, 2.4vw, 28px);
}

.ueber-name .akzent {
  font-size: clamp(3.4rem, 7.5vw, 6.5rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
}

.ueber-name small {
  padding-top: 1rem;
  border-top: 1.5px solid var(--tinte);
  font-size: 0.9rem;
  font-weight: 600;
}

.ueber-bild {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--runde);
  background: var(--papier-tief);
}

.ueber-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }

.ueber h2,
.ueber h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 0.98;
}

.ueber-text { display: grid; gap: 1.1rem; margin-top: 1.75rem; max-width: 40rem; color: var(--tinte-weich); font-size: 1.08rem; }
.ueber-text strong { color: var(--tinte); font-weight: 600; }

.ueber-fakten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--linie);
}

.ueber-fakten dt { color: var(--tinte-weich); font-size: 0.85rem; }
.ueber-fakten dd { margin: 0.2rem 0 0; font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 650; letter-spacing: -0.02em; }

/* ---------- Häufige Fragen (aufklappbar ohne JavaScript) ---------- */
.fragen-raster {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.fragen-raster h2,
.fragen-raster h1 {
  position: sticky;
  top: 110px;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 0.95;
}

.fragen-raster h2 + p,
.fragen-raster h1 + p { margin-top: 1.25rem; color: var(--tinte-weich); }

.frage { border-bottom: 1px solid var(--linie); }
.frage:first-child { border-top: 2px solid var(--tinte); }

.frage summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: var(--schrift-titel);
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
}

.frage summary::-webkit-details-marker { display: none; }

.frage summary::after {
  content: "";
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--limette) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4.5v11M4.5 10h11' fill='none' stroke='%2315160f' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
  transition: transform 0.35s var(--kurve);
}

.frage[open] summary::after { transform: rotate(45deg); }
.frage summary:hover { color: var(--gruen-text); }

.frage-antwort { padding: 0 3.5rem 1.5rem 0; color: var(--tinte-weich); }
.frage-antwort p + p { margin-top: 0.75rem; }
.frage-antwort a { color: var(--tinte); }

/* ---------- Kontakt ---------- */
.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.kontakt h2,
.kontakt h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); line-height: 0.92; letter-spacing: -0.045em; }
.kontakt h2 .akzent,
.kontakt h1 .akzent { color: var(--limette); }
.kontakt-text { margin-top: 1.5rem; color: var(--auf-nacht-weich); font-size: 1.08rem; max-width: 30rem; }

.kontakt-wege {
  display: grid;
  gap: 0;
  margin: 2.25rem 0 0;
  border-top: 1px solid var(--linie-nacht);
}

.kontakt-wege div { padding: 1.1rem 0; border-bottom: 1px solid var(--linie-nacht); }
.kontakt-wege dt { color: var(--auf-nacht-weich); font-size: 0.85rem; }
.kontakt-wege dd { margin: 0.2rem 0 0; font-family: var(--schrift-titel); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.kontakt-wege a { text-decoration: none; }
.kontakt-wege a:hover { color: var(--limette); }

.formular {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--papier);
  color: var(--tinte);
  border-radius: clamp(20px, 2.4vw, 28px);
}

.feld { display: grid; gap: 0.4rem; }
.feld-breit { grid-column: 1 / -1; }

.feld label { font-size: 0.9rem; font-weight: 600; }
.feld label span { color: var(--tinte-weich); font-weight: 400; }

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid rgba(21, 22, 15, 0.22);
  border-radius: 10px;
  background: #fbfaf6;
  color: var(--tinte);
  font: 400 1rem var(--schrift-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feld textarea { min-height: 8rem; resize: vertical; }

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--tinte);
  box-shadow: 0 0 0 4px rgba(213, 237, 91, 0.7);
}

.feld input::placeholder, .feld textarea::placeholder { color: #7a7d72; }

.haken {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--tinte-weich);
}

.haken input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--tinte); }
.haken a { color: var(--tinte); }

.formular .knopf { grid-column: 1 / -1; justify-self: start; cursor: pointer; }
.formular .knopf:disabled { opacity: 0.6; cursor: wait; transform: none; }

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

.formular-meldung {
  grid-column: 1 / -1;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  font-weight: 500;
}

.formular-meldung[hidden] { display: none; }
.formular-meldung.gut { background: var(--limette); color: var(--tinte); }
.formular-meldung.fehler { background: #f6d9d3; color: #6b1d10; }

/* ---------- Fuß ---------- */
.fuss {
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  border-top: 1px solid var(--linie-nacht);
  color: var(--auf-nacht-weich);
  font-size: 0.95rem;
}

.fuss-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
  gap: 2rem;
}

.fuss .marke { color: var(--auf-nacht); font-size: 1.8rem; }
.fuss .marke span { color: var(--tinte); }
.fuss-raster > div:first-child p { max-width: 24rem; margin-top: 1rem; }

.fuss h2 {
  margin-bottom: 0.9rem;
  font-family: var(--schrift-text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--auf-nacht);
}

.fuss ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.fuss a { color: var(--auf-nacht-weich); text-decoration: none; }
.fuss a:hover { color: var(--limette); }

.fuss-unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie-nacht);
  font-size: 0.85rem;
}

/* ---------- Unterseite Bestellsystem: Kopf, Faktenleiste, Kapitel mit Bild ---------- */
.seitenkopf { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }

.brotkrumen { margin-bottom: 1.75rem; font-size: 0.9rem; color: var(--tinte-weich); }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.brotkrumen li + li::before { content: "/"; margin-right: 0.5rem; color: var(--linie); }
.brotkrumen a { color: var(--tinte); }
.nacht .brotkrumen, .nacht .brotkrumen a { color: var(--auf-nacht-weich); }

.seitenkopf h1 {
  max-width: 16ch;
  font-size: clamp(2.7rem, 6.8vw, 6rem);
  font-weight: 750;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.seitenkopf h1 .akzent { color: var(--limette); }

.seitenkopf-raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.seitenkopf-text { color: var(--auf-nacht-weich); font-size: 1.12rem; }
.seitenkopf-text strong { color: var(--auf-nacht); font-weight: 600; }

/* Faktenleiste: die vier Zahlen, die jeder wissen will */
.fakten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  border-top: 1px solid var(--linie-nacht);
}

.fakten div { padding: 1.4rem 1.25rem 0 0; }
.fakten div + div { padding-left: 1.25rem; border-left: 1px solid var(--linie-nacht); }
.fakten dt { color: var(--auf-nacht-weich); font-size: 0.85rem; }
.fakten dd { margin: 0.35rem 0 0; font-family: var(--schrift-titel); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.fakten dd.limette { color: var(--limette); }

/* Kapitel: links Titel und Text, rechts ein echtes Bild aus dem System */
.kapitel-zeile {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--linie);
}

.kapitel-zeile:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.kapitel-zeile:nth-of-type(even) .kapitel-zeile-bild { order: -1; }

.kapitel-zeile h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1; }
.kapitel-zeile h2 + p { margin-top: 1.1rem; color: var(--tinte); font-size: 1.1rem; font-weight: 500; }

.kapitel-zeile ul {
  display: grid;
  gap: 0.65rem;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  list-style: none;
  border-top: 1px solid var(--linie);
  color: var(--tinte-weich);
}

.kapitel-zeile li { display: flex; gap: 0.65rem; }
.kapitel-zeile li svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.25rem; color: var(--gruen-text); }

.kapitel-zeile-bild {
  margin: 0;
  overflow: hidden;
  border-radius: var(--runde);
  border: 1px solid var(--linie);
  background: var(--papier-tief);
  box-shadow: 0 30px 60px -36px rgba(21, 22, 15, 0.55);
}

.kapitel-zeile-bild a { display: block; }
.kapitel-zeile-bild a img { transition: transform 0.4s ease; }
.kapitel-zeile-bild a:hover img, .kapitel-zeile-bild a:focus-visible img { transform: scale(1.02); }

.kapitel-zeile-bild.handy-bild {
  justify-self: center;
  width: min(100%, 300px);
  border: 6px solid var(--tinte);
  border-radius: 30px;
}

.kapitel-zeile-bild figcaption { padding: 0.75rem 1rem; font-size: 0.82rem; color: var(--tinte-weich); background: var(--papier); border-top: 1px solid var(--linie); }

.hinweis-kasse {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: clamp(20px, 2.4vw, 28px);
  background: var(--limette);
}

.hinweis-kasse svg { width: 2.5rem; height: 2.5rem; }
.hinweis-kasse h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; }
.hinweis-kasse p { margin-top: 0.75rem; max-width: 46rem; color: #2c3510; }

.stand { margin-top: 1rem; font-size: 0.85rem; color: var(--tinte-weich); }

/* ---------- Rechtstexte (Impressum, Datenschutz, AGB) ---------- */
.dokument { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); }

.dokument-innen { max-width: 46rem; }

.dokument h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 750;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.dokument-unter { margin-top: 1rem; color: var(--tinte-weich); }

.dokument h2 {
  margin: 2.75rem 0 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  letter-spacing: -0.025em;
  scroll-margin-top: 100px;
}

.dokument h3 { margin: 1.5rem 0 0.5rem; font-size: 1.1rem; letter-spacing: -0.015em; }
.dokument p, .dokument li { color: #2e3029; }
.dokument p + p { margin-top: 0.75rem; }
.dokument address { font-style: normal; line-height: 1.7; }
.dokument a { color: var(--tinte); text-underline-offset: 0.2em; }
.dokument ul { padding-left: 1.2rem; }
.dokument li + li { margin-top: 0.35rem; }
/* Antwort-Seiten (Lieferando-Alternative, Kosten): Tabelle und Balkenvergleich im Fließtext */
.dokument .vt-rahmen, .dokument .vergleich { margin-top: 1.5rem; }
.dokument .vergleich-kopf h3 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.dokument .vt th, .dokument .vt td { color: var(--tinte); }
.dokument .vt thead th, .dokument .vt td { white-space: nowrap; }

.inhalt-liste {
  columns: 2;
  column-gap: 2.5rem;
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.75rem;
  list-style: none;
  background: var(--papier-tief);
  border-radius: var(--runde);
  font-size: 0.92rem;
}

.inhalt-liste li { break-inside: avoid; padding: 0.2rem 0; }
.inhalt-liste a { text-decoration: none; }
.inhalt-liste a:hover { text-decoration: underline; }

.absatz-nr { font-weight: 600; color: var(--tinte); margin-right: 0.25rem; }

/* ---------- 404 ---------- */
.fehlerseite { padding-block: clamp(5rem, 12vw, 10rem); }
.fehlerseite h1 { font-size: clamp(3rem, 9vw, 8rem); font-weight: 750; line-height: 0.9; letter-spacing: -0.05em; }
.fehlerseite h1 .akzent { color: var(--gruen-text); }
.fehlerseite p { margin-top: 1.5rem; max-width: 34rem; color: var(--tinte-weich); font-size: 1.12rem; }
.fehlerseite .hero-knoepfe { margin-top: 2rem; }

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1023px) {
  .preis-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .preis-zeile .knopf { grid-column: 1 / -1; justify-self: start; }
  .preis-hinweise { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .ueber, .fragen-raster, .kontakt-raster, .seitenkopf-raster { grid-template-columns: minmax(0, 1fr); }
  .ueber-bild { max-width: 26rem; }
  .fragen-raster h2, .fragen-raster h1 { position: static; }
  .fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss-raster > div:first-child { grid-column: 1 / -1; }
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fakten div:nth-child(3) { padding-left: 0; border-left: 0; }
  .kapitel-zeile, .kapitel-zeile:nth-of-type(even) { grid-template-columns: 1fr; }
  .kapitel-zeile:nth-of-type(even) .kapitel-zeile-bild { order: 0; }
  .weg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weg li + li::before { display: none; }
  .hero-raster { grid-template-columns: 1fr; }
  .hero-fenster { max-width: 30rem; }
  .abschnitt-kopf, .kapitel-kopf { grid-template-columns: 1fr; }
  .arbeit, .arbeit-gross, .arbeit-mittel { grid-column: span 6; }
  .arbeit-gross { grid-column: span 12; }
}

@media (max-width: 720px) {
  .ablauf { grid-template-columns: 1fr; }
  .ueber-fakten { grid-template-columns: 1fr 1fr; }
  .formular { grid-template-columns: 1fr; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .inhalt-liste { columns: 1; }
  .frage-antwort { padding-right: 0; }
  .hinweis-kasse { grid-template-columns: 1fr; }
  .preis-betrag { align-items: flex-start; text-align: left; }
  .preis-zeile { grid-template-columns: 1fr; }
  .pakete-raster { grid-template-columns: 1fr; gap: 4.5rem; }
  .weg { grid-template-columns: 1fr; }
  .balken-zeile b { min-width: 5ch; }
  /* Am Handy nur Titel und Zielgruppe neben dem Bild schmal halten, der Rest nutzt die ganze Breite */
  .paket { padding: 1.75rem 1.5rem 2rem; }
  .paket h3, .paket-fuer { padding-right: 6.25rem; }
  .paket-bild { width: 88px; top: -2.75rem; right: 1.25rem; border-width: 4px; border-radius: 16px; }
  .arbeit, .arbeit-gross, .arbeit-mittel { grid-column: span 12; }
  .collage { padding-bottom: 0; }
  .collage-pc { width: 100%; }
  .collage-handy, .collage-bon { position: static; display: inline-block; vertical-align: top; margin-top: 1.25rem; transform: none; }
  .collage-handy { width: 52%; }
  .collage-bon { width: 40%; margin-left: 4%; }
  .collage figcaption { position: static; margin-top: 1rem; max-width: none; }
}

/* Unterseiten: Brotkrümel über dem Abschnitt, Abschnitt rückt etwas näher an die Kopfleiste */
.abschnitt > .rahmen:first-child .brotkrumen,
.kapitel > .rahmen:first-child .brotkrumen { margin-bottom: clamp(2rem, 4vw, 3rem); }
main > .abschnitt:first-child { padding-top: clamp(2.5rem, 5vw, 4rem); }
main > .kapitel:first-child { border-radius: 0; padding-top: clamp(2.5rem, 5vw, 4rem); }
.schluss .klein { margin-top: 1.25rem; font-size: 0.85rem; }
.schluss .klein a { color: var(--auf-nacht); }
.fakten dd.fakt-klein { margin-top: 0.35rem; font-family: var(--schrift-text); font-size: 0.85rem; font-weight: 400; letter-spacing: 0; color: var(--auf-nacht-weich); }

/* Lange Wörter und Adressen (z. B. buerohilfe-esomedia.de) dürfen am Handy umbrechen */
.dokument, .frage-antwort, .kontakt-wege dd, .preis-hinweise { overflow-wrap: anywhere; }
.feld select { min-width: 0; text-overflow: ellipsis; }

/* ---------- Steckbrief „auf einen Blick“: schwarzer Block mit Kacheln, wichtige Werte in Limette ---------- */
.steckbrief {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(20px, 2.4vw, 28px);
  background: var(--linie-nacht);
  box-shadow: 0 30px 60px -36px rgba(21, 22, 15, 0.55);
}

.steckbrief div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  background: var(--nacht);
}

.steckbrief dt { color: var(--auf-nacht-weich); font-size: 0.85rem; }
.steckbrief dd { margin: 0; color: var(--auf-nacht); font-family: var(--schrift-titel); font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.steckbrief .hervor { background: var(--limette); }
.steckbrief .hervor dt { color: #3b4a14; }
.steckbrief .hervor dd { color: var(--tinte); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.03em; }

/* ---------- Vergleich: zwei Karten nebeneinander, gleiche Zeilen ---------- */
.gegenueber {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}

.gegenueber-karte {
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  border-radius: clamp(20px, 2.4vw, 28px);
}

.gegenueber-eigen { background: var(--limette); box-shadow: 0 30px 60px -36px rgba(21, 22, 15, 0.55); }
.gegenueber-portal { background: var(--papier-tief); border: 1px solid var(--linie); }

.gegenueber-karte h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1; letter-spacing: -0.04em; }

.gegenueber-preis { margin-top: 0.9rem; font-weight: 500; }
.gegenueber-preis strong { font-family: var(--schrift-titel); font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 750; letter-spacing: -0.045em; margin-right: 0.35rem; }
.gegenueber-portal .gegenueber-preis strong { font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--tinte-weich); }

.gegenueber-karte dl { display: grid; gap: 0; margin: 1.75rem 0 0; }
.gegenueber-karte dl div { padding: 0.85rem 0; border-top: 1px solid rgba(21, 22, 15, 0.18); }
.gegenueber-karte dt { font-size: 0.85rem; color: #3b4a14; }
.gegenueber-portal dt { color: var(--tinte-weich); }
.gegenueber-karte dd { margin: 0.2rem 0 0; font-weight: 600; }
.gegenueber-portal dd { font-weight: 500; color: var(--tinte-weich); }

@media (max-width: 1023px) {
  .steckbrief { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .gegenueber { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .steckbrief { grid-template-columns: minmax(0, 1fr); }
}

/* Aktueller Menüpunkt unterstrichen; bei 8 Punkten auf kleineren Laptops etwas enger */
.menue ul a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--limette); text-underline-offset: 0.45em; }
@media (min-width: 961px) and (max-width: 1180px) {
  .menue { gap: 1.25rem; }
  .menue ul { gap: 1.1rem; }
  .menue a { font-size: 0.9rem; }
}

/* Zwei dunkle Abschnitte direkt hintereinander: keine runden Ecken dazwischen (sonst blitzt das Papier durch) */
.nacht + .nacht.kapitel { border-radius: 0; border-top: 1px solid var(--linie-nacht); }

/* Steckbrief: die letzte Kachel füllt die Reihe auf, damit keine leeren Plätze bleiben */
@media (min-width: 1024px) {
  .steckbrief div:last-child:nth-child(4n + 1) { grid-column: span 4; }
  .steckbrief div:last-child:nth-child(4n + 2) { grid-column: span 3; }
  .steckbrief div:last-child:nth-child(4n + 3) { grid-column: span 2; }
}
@media (min-width: 481px) and (max-width: 1023px) {
  .steckbrief div:last-child:nth-child(2n + 1) { grid-column: span 2; }
}

/* Preis-Seite: zweiter Buchungsweg unter dem Knopf einer Paket-Karte; Abstand zum Visitenkarten-Band und zu den Hinweisen */
.paket .paket-zweit { margin-top: 1.1rem; font-size: 0.95rem; }
.paket-nacht .paket-zweit { color: var(--auf-nacht); }
#preise .pakete-raster { margin-top: clamp(4.5rem, 7vw, 6rem); }
#preise .preis-hinweise { margin-top: 2.5rem; }

/* ---------- Preis-Seite ausführlich: ein großer Block je Paket, links Preis und Buchen, rechts alles, was drin ist ---------- */
.preis-paket {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  padding: clamp(1.75rem, 3.6vw, 3.25rem);
  border-radius: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 30px 60px -36px rgba(21, 22, 15, 0.55);
}

.preis-paket-limette { background: var(--limette); color: var(--tinte); }
.preis-paket-nacht { background: var(--nacht); color: var(--auf-nacht); }

.pp-kopf { align-self: start; position: sticky; top: 100px; }

.pp-kopf h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1; letter-spacing: -0.04em; }
.preis-paket-nacht .pp-kopf h2 .akzent { color: var(--limette); }

.pp-fuer { margin-top: 0.7rem; font-size: 0.95rem; opacity: 0.8; }

.pp-preis { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.5rem 0.8rem; margin-top: 1.75rem; }
.pp-preis strong { font-family: var(--schrift-titel); font-size: clamp(3rem, 5.6vw, 4.6rem); font-weight: 750; line-height: 0.88; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.pp-preis span { padding-bottom: 0.3rem; font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.preis-paket-nacht .pp-preis strong { color: var(--limette); }

.pp-eckdaten { display: grid; margin: 1.75rem 0 0; border-top: 1.5px solid currentColor; }
.pp-eckdaten div { padding: 0.75rem 0; border-bottom: 1px solid rgba(21, 22, 15, 0.2); }
.preis-paket-nacht .pp-eckdaten div { border-bottom-color: var(--linie-nacht); }
.pp-eckdaten dt { font-size: 0.82rem; opacity: 0.75; }
.pp-eckdaten dd { margin: 0.15rem 0 0; font-weight: 600; }

.pp-knoepfe { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1.75rem; }

.pp-inhalt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-content: start;
}

.pp-gruppe, .pp-nicht {
  padding: 1.35rem 1.4rem 1.5rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
}

.preis-paket-nacht .pp-gruppe { background: var(--nacht-flaeche); border: 1px solid var(--linie-nacht); }

.pp-gruppe h3, .pp-nicht h3 { margin-bottom: 0.85rem; font-size: 1.15rem; letter-spacing: -0.02em; }

.pp-gruppe ul, .pp-nicht ul { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.pp-gruppe li, .pp-nicht li { display: flex; gap: 0.55rem; align-items: flex-start; }
.pp-gruppe svg, .pp-nicht svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; }
.preis-paket-nacht .pp-gruppe svg { color: var(--limette); }

/* „Nicht enthalten“ über die ganze Breite, bewusst zurückhaltend */
.pp-nicht { grid-column: 1 / -1; background: transparent; border: 1.5px dashed rgba(21, 22, 15, 0.35); }
.preis-paket-nacht .pp-nicht { border-color: rgba(236, 238, 229, 0.3); }
.pp-nicht ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem 1.25rem; opacity: 0.85; }

.gut-zu-wissen { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.gut-zu-wissen h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; margin-bottom: 1.75rem; }
.gut-zu-wissen dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); margin: 0; border-top: 2px solid var(--tinte); }
.gut-zu-wissen div { padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.gut-zu-wissen dt { font-family: var(--schrift-titel); font-weight: 650; font-size: 1.1rem; }
.gut-zu-wissen dd { margin: 0.35rem 0 0; color: var(--tinte-weich); font-size: 0.95rem; }
.gut-zu-wissen a { color: var(--tinte); }

@media (max-width: 1023px) {
  .preis-paket { grid-template-columns: minmax(0, 1fr); }
  .pp-kopf { position: static; }
  .gut-zu-wissen dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .pp-inhalt { grid-template-columns: minmax(0, 1fr); }
  .pp-nicht ul { grid-template-columns: minmax(0, 1fr); }
  .gut-zu-wissen dl { grid-template-columns: minmax(0, 1fr); }
}
/* Ungerade Zahl an Gruppen: die letzte Gruppe vor „Nicht enthalten“ füllt die Reihe */
@media (min-width: 721px) {
  .pp-inhalt .pp-gruppe:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }
  .pp-inhalt .pp-gruppe:nth-last-child(2):nth-child(odd) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}

/* Kassen-Hinweis mit „So helfen wir Ihnen“ daneben (Esmat hilft beim Einrichten und bei der Kassenwahl) */
.hinweis-kasse { grid-template-columns: auto minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(1.25rem, 3vw, 2.5rem); }
.hinweis-kasse .klein { margin-top: 1rem; font-size: 0.85rem; color: #3b4a14; }
.hinweis-kasse a { color: var(--tinte); }
.hinweis-kasse .knopf { margin-top: 1.1rem; color: var(--papier); }
.hinweis-hilfe { padding: 1.4rem 1.5rem; border-radius: 16px; background: rgba(255, 255, 255, 0.45); }
.hinweis-hilfe h3 { margin-bottom: 0.85rem; font-size: 1.2rem; letter-spacing: -0.02em; }
.hinweis-hilfe ul { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.hinweis-hilfe li { display: flex; gap: 0.55rem; }
.hinweis-hilfe svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; }

@media (max-width: 1023px) {
  .hinweis-kasse { grid-template-columns: auto minmax(0, 1fr); }
  .hinweis-hilfe { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .hinweis-kasse { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Preis-Seite kurz: je Bereich eine Zeile, Details zum Aufklappen ---------- */
.pp-kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-kacheln li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.25rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.45);
}

.preis-paket-nacht .pp-kacheln li { background: var(--nacht-flaeche); border: 1px solid var(--linie-nacht); }
.pp-kacheln li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pp-kacheln strong { font-family: var(--schrift-titel); font-size: 1.1rem; font-weight: 650; letter-spacing: -0.02em; }
.pp-kacheln span { font-size: 0.95rem; opacity: 0.85; }
.preis-paket-nacht .pp-kacheln strong { color: var(--limette); }

.pp-details { grid-column: 1 / -1; margin-top: 1rem; }

.pp-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid currentColor;
  border-radius: 14px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.pp-details summary::-webkit-details-marker { display: none; }

.pp-details summary::after {
  content: "";
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' fill='none' stroke='%23d5ed5b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
  transition: transform 0.35s var(--kurve);
}

.preis-paket-nacht .pp-details summary { border-color: var(--linie-nacht); }
.preis-paket-nacht .pp-details summary::after { background-color: var(--limette); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' fill='none' stroke='%2315160f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pp-details[open] summary::after { transform: rotate(180deg); }
.pp-details summary:hover { background: rgba(255, 255, 255, 0.25); }
.preis-paket-nacht .pp-details summary:hover { background: var(--nacht-flaeche); }

.pp-details-inhalt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.pp-details-inhalt .pp-gruppe:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .pp-kacheln, .pp-details-inhalt { grid-template-columns: minmax(0, 1fr); }
}
.pp-kacheln { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .preis-paket-nacht .pp-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preis-paket-nacht .pp-kacheln li:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------- Preis-Seite: kompakte Preis-Karten + Vergleichstabelle „Was ist drin?“ ---------- */
.preis-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }

.preis-karte {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.5rem);
  border-radius: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 30px 60px -36px rgba(21, 22, 15, 0.55);
}

.preis-karte-limette { background: var(--limette); color: var(--tinte); }
.preis-karte-nacht { background: var(--nacht); color: var(--auf-nacht); }
.preis-karte h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.02; letter-spacing: -0.04em; }
.preis-karte-nacht h2 .akzent { color: var(--limette); }
.pk-fuer { margin-top: 0.5rem; font-size: 0.92rem; opacity: 0.8; }

.pk-preis { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-top: 1.4rem; }
.pk-preis strong { font-family: var(--schrift-titel); font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 750; line-height: 0.88; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.pk-preis span { padding-bottom: 0.25rem; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.preis-karte-nacht .pk-preis strong { color: var(--limette); }

.pk-eckdaten { margin: 1.4rem 0 0; padding: 0; list-style: none; border-top: 1.5px solid currentColor; }
.pk-eckdaten li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid rgba(21, 22, 15, 0.2); font-size: 0.92rem; }
.preis-karte-nacht .pk-eckdaten li { border-bottom-color: var(--linie-nacht); }
.pk-eckdaten span { opacity: 0.75; }
.pk-eckdaten strong { font-weight: 600; text-align: right; }

.pk-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: auto; padding-top: 1.5rem; }
.preis-karte-nacht .textlink { color: var(--auf-nacht); }

.was-drin { margin-top: clamp(3rem, 6vw, 4.5rem); }
.was-drin h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; margin-bottom: 1.5rem; }

.vt-rahmen { border-radius: clamp(16px, 2vw, 22px); border: 1px solid var(--linie); background: #fbfaf6; overflow: hidden; }
.vt { width: 100%; border-collapse: collapse; }
.vt th, .vt td { padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--linie); }
.vt tbody tr:last-child th, .vt tbody tr:last-child td { border-bottom: 0; }
.vt thead th { font-family: var(--schrift-titel); font-size: 0.95rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.15; text-align: center; background: var(--papier-tief); }
.vt tbody th { text-align: left; font-weight: 500; font-size: 0.97rem; }
.vt td { width: 9rem; text-align: center; }
.vt .vt-hervor { background: rgba(213, 237, 91, 0.35); }
.vt thead .vt-hervor { background: var(--limette); }
.vt-ja { width: 1.3rem; height: 1.3rem; color: var(--tinte); vertical-align: middle; }
.vt-nein { color: #9a9c92; font-weight: 600; }

.was-drin-mehr, .was-drin-nicht { margin-top: 1rem; max-width: 52rem; color: var(--tinte-weich); font-size: 0.95rem; }
.was-drin-mehr strong, .was-drin-nicht strong { color: var(--tinte); }
.was-drin-mehr .textlink { margin-left: 0.25rem; color: var(--tinte); }

#preise .zusatz { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

@media (max-width: 720px) {
  .preis-karten { grid-template-columns: minmax(0, 1fr); }
  .vt th, .vt td { padding: 0.7rem 0.6rem; }
  .vt td { width: 4.6rem; }
  .vt thead th { font-size: 0.8rem; }
  .vt tbody th { font-size: 0.9rem; }
}
/* ---------- Start-Aktion in den Paket-Karten: Einmalpreis groß, darunter der Stand der 10 Plätze ----------
   „x von 10 vergeben“ ist die echte Zahl der Buchungen und wird bei jeder Buchung von Hand geändert (README, „Zähler ändern“). */
/* Nur für Vorleseprogramme: sagt an, dass der durchgestrichene Preis erst später gilt (Durchstreichen wird nicht vorgelesen) */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Hinweis unter den zwei Paket-Karten der Startseite */
.pakete-hinweis { margin-top: 1.25rem; max-width: 62rem; color: var(--tinte-weich); font-size: 0.88rem; line-height: 1.5; }
.pakete-hinweis a { color: var(--tinte); }
/* Späterer Einmalpreis durchgestrichen neben „0 €“. Nur zulässig, solange direkt darunter steht, ab wann er gilt, und er dann auch verlangt wird. */
.preis-spaeter { font-family: var(--schrift-titel); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; text-decoration: none; position: relative; display: inline-block; color: #3b4a14; font-variant-numeric: tabular-nums; }
/* Schräger Strich in eigener Farbe statt grauer Schrift mit Strich in Schriftfarbe: die Zahl bleibt gut lesbar (Esmat, 10.10.2026) */
.preis-spaeter::after { content: ""; position: absolute; left: -0.1em; right: -0.1em; top: 50%; height: max(0.11em, 2.5px); margin-top: -0.05em; border-radius: 2px; background: var(--tinte); transform: rotate(-10deg); }
.paket-nacht .preis-spaeter, .preis-karte-nacht .preis-spaeter { color: var(--auf-nacht); }
.paket-nacht .preis-spaeter::after, .preis-karte-nacht .preis-spaeter::after { background: var(--limette); }
@media (forced-colors: active) { .preis-spaeter { text-decoration: line-through; } }
.aktion { margin-top: 1.4rem; }
.aktion-preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.aktion-preis strong { font-family: var(--schrift-titel); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 750; line-height: 0.95; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.aktion-preis span { font-weight: 600; }
.aktion-frei { margin-top: 0.75rem; }
.aktion-frei b { display: inline-block; padding: 0.14rem 0.55rem 0.18rem; border-radius: 6px; font-weight: 700; }
.paket-limette .aktion-frei b, .preis-karte-limette .aktion-frei b { background: var(--tinte); color: var(--limette); }
.paket-nacht .aktion-frei b, .preis-karte-nacht .aktion-frei b { background: var(--limette); color: var(--tinte); }
.aktion-stand { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-top: 0.8rem; font-size: 0.9rem; font-weight: 600; }
.aktion-balken { display: inline-flex; gap: 3px; }
.aktion-balken i { width: 0.95rem; height: 0.5rem; border-radius: 2px; background: currentColor; opacity: 0.22; }
.aktion-balken i.voll { opacity: 1; }
.paket-nacht .aktion-balken i.voll, .preis-karte-nacht .aktion-balken i.voll { background: var(--limette); }

/* Logo in der Seitenleiste in normaler Größe (die Menü-Schrift gilt dort nicht) */
.menue .menue-leiste-kopf .marke { font-size: 1.45rem; font-weight: 800; }

/* ---------- Scroll-Animation (seite.js): kurz und einmalig, nur unterhalb des ersten Bildschirms ---------- */
.erscheint { transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.erscheint-wartet { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  .erscheint-wartet { opacity: 1; transform: none; }
}

/* Drittes Paket (Terminbuch für Salons): Papier-Karte über die ganze Breite, Inhalt in zwei Spalten, Handy rechts */
.paket-papier { grid-column: 1 / -1; background: var(--papier-tief); color: var(--tinte); border: 1.5px solid var(--tinte); }
.paket-papier .paket-bild { transform: rotate(-4deg); }
.paket-papier h3 .akzent { color: var(--gruen-text); }
.paket-papier .paket-klein { color: var(--tinte-weich); }
.paket-papier .aktion-frei b { background: var(--tinte); color: var(--limette); }
.paket-papier .knopf:hover { background: #2a2c22; border-color: #2a2c22; }
.paket-spalte { display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .paket-papier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); padding-right: clamp(13rem, 24%, 17rem); }
  .paket-papier .paket-liste { margin-top: 0; padding-top: 0.25rem; border-top: 0; }
  .paket-papier .knopf { margin-top: 0.5rem; }
  .paket-papier .paket-bild { width: clamp(150px, 13%, 190px); }
}

/* Menü: Unterseiten von „Leistungen“ markieren den Punkt ebenfalls */
.menue ul a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--limette); text-underline-offset: 0.45em; }
/* Seite /leistungen/: Abstand nach oben unter dem Kopf */
.pakete-seite { padding-top: clamp(2.5rem, 6vw, 5rem); }
.pakete-seite .brotkrumen { margin-bottom: 1.25rem; }

/* Preise-Seite: drittes Paket (Terminbuch) auf Papier, ab breiten Bildschirmen drei Karten nebeneinander */
.preis-karte-papier { background: var(--papier-tief); color: var(--tinte); border: 1.5px solid var(--tinte); }
.preis-karte-papier h2 .akzent { color: var(--gruen-text); }
.preis-karte-papier .aktion-frei b { background: var(--tinte); color: var(--limette); }
@media (min-width: 721px) and (max-width: 1099px) { .preis-karte-papier { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .preis-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }