/* Druck und Zauber — Basis: Tokens, Reset, Typografie, Buttons, Chips, Karten, Sektionen
   Markenregeln: Mint ist Akzent, nie Fläche · 1px-Border #D4EDE5 statt Schatten · nie reines #000 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --mint:       #8ECBB5;
  --mint-light: #C2E8DC;
  --mint-pale:  #EEF9F5;
  --mint-dark:  #4D9C85;  /* große Headlines / Deko */
  --mint-text:  #3C7D69;  /* AA-Akzent für kleinen Text & Links */
  --mint-deep:  #2F6253;  /* gefüllte Primär-Buttons (7:1 mit Weiß) */
  --mint-deep-hover: #25503F;
  --black:      #1A1A1A;
  --gray:       #4F4F4F;
  --gray-mid:   #6B6B6B;
  --gray-light: #888888;  /* nur Deko */
  --border:     #D4EDE5;
  --white:      #FFFFFF;
  --bg-alt:     #F5FBF8;
  --amber:      #E0A93E;
  --amber-text: #8A6212;

  --radius-card: 18px;
  --radius-pill: 50px;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms;
  --dur: 240ms;
  --container: 1200px;
  --gutter: clamp(1.25rem, 6vw, 4rem);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  font-family: 'Nunito', system-ui, sans-serif; background: var(--white); color: var(--black);
  font-weight: 400; font-size: 1rem; line-height: 1.7; overflow-x: hidden;
}
::selection { background: var(--mint-light); color: var(--black); }
img { max-width: 100%; height: auto; }
a { color: var(--mint-text); }
a, button, .btn, .chip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---------- Typografie ---------- */
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; color: var(--black); font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 0.4rem; }
h1 .script { font-family: 'Sacramento', cursive; font-weight: 400; color: var(--mint-dark); font-size: 1.32em; line-height: 0.8; letter-spacing: 0; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 0.9rem; }
h2 em { font-style: italic; color: var(--mint-dark); }
h2 i { font-style: italic; color: var(--mint-dark); }
h3 { font-size: 1.2rem; line-height: 1.25; overflow-wrap: anywhere; }
h1, h2, h3 { text-wrap: balance; }
.eyebrow, .section-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mint-text); font-weight: 700;
}
.section-label { margin-bottom: 0.6rem; }
.section-label svg { width: 14px; height: 14px; fill: var(--mint); }
.section-intro { color: var(--gray); font-size: 1rem; }
.script { font-family: 'Sacramento', cursive; color: var(--mint-dark); }

/* ---------- Layout-Helfer ---------- */
section { padding: 6rem var(--gutter); position: relative; }
.section-head { max-width: 560px; margin-bottom: 3.2rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .section-label { justify-content: center; }
.section-head.center .section-intro { margin: 0 auto; }
.container { max-width: var(--container); margin: 0 auto; }

/* ---------- Buttons: Feedback auf Pointer-down, Lift nur mit echtem Hover ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.85rem 1.7rem; border-radius: var(--radius-pill); border: 2px solid transparent;
  font-family: 'Nunito', sans-serif; font-size: 0.9rem; font-weight: 700; text-decoration: none; cursor: pointer;
  min-height: 44px;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur), color var(--dur), box-shadow var(--dur);
}
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn:active { transform: scale(0.97); transition-duration: 60ms; }
.btn svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
.btn-primary { background: var(--mint-deep); color: #fff; }
.btn-outline { background: transparent; color: var(--mint-text); border-color: var(--mint); }
.btn-ghost { background: transparent; color: var(--mint-text); }
.btn-block { width: 100%; }
@media (hover: hover) {
  .btn-primary:hover { background: var(--mint-deep-hover); }
  .btn-outline:hover { background: var(--mint-pale); }
  .btn-ghost:hover { background: var(--mint-pale); }
}

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 0.6rem 1.3rem; font-size: 0.9rem; font-weight: 600; color: var(--gray);
  text-decoration: none; min-height: 40px;
  transition: background var(--dur), border-color var(--dur), transform var(--dur-fast);
}
.chip strong { color: var(--mint-text); font-weight: 700; }
.chip--label { background: var(--mint-pale); border-color: transparent; min-height: 0; padding: 0.35rem 0.9rem; cursor: default; }
@media (hover: hover) { a.chip:hover { background: var(--mint-pale); border-color: var(--mint-light); } }
a.chip:active { transform: scale(0.97); }
.chip.is-active { background: var(--mint-pale); border-color: var(--mint); color: var(--mint-text); }

/* ---------- Karten ---------- */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); }
.card--hover { transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
@media (hover: hover) { .card--hover:hover { transform: translateY(-4px); border-color: var(--mint-light); } }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: var(--mint-text); background: var(--mint-pale); border: 1px solid var(--mint-light); padding: 4px 12px; border-radius: 20px;
}
.badge--amber { color: var(--amber-text); background: #FFF7E6; border-color: #F0D9A6; }

/* ---------- Hinweise ---------- */
.notice { background: var(--mint-pale); border-left: 4px solid var(--mint); border-radius: 0 12px 12px 0; padding: 0.9rem 1.4rem; font-size: 0.92rem; color: var(--black); line-height: 1.7; }
.notice--warn { background: var(--bg-alt); border: 1px solid var(--amber); border-left: 4px solid var(--amber); color: var(--gray); }
.notice--warn strong { color: var(--amber-text); }

/* ---------- Scroll-Reveal: nur mit JS, kurz, nie über der Falte ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
html.js [data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn, .chip, .card--hover { transition: none; }
}

/* ---------- Prose (Rechtstexte) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.6rem; margin: 2.4rem 0 0.8rem; }
.prose h3 { font-size: 1.15rem; margin: 1.6rem 0 0.5rem; }
.prose p, .prose li { color: var(--gray); font-size: 0.98rem; line-height: 1.8; margin-bottom: 0.9rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose address { font-style: normal; color: var(--gray); line-height: 1.8; margin-bottom: 0.9rem; }
.prose a { color: var(--mint-text); font-weight: 700; }
.prose .meta { font-size: 0.85rem; color: var(--gray-mid); }

.notice--plain { border-color: var(--border); background: #fff; }