/* ==========================================================================
   Verkaufsseite dasstudiobuch.de
   Farben = PRESET_STANDARD aus ../gizem-praxis-assistent/konfig.js (Mauve/Champagner).
   Wer sie hier aendert, aendert sie dort NICHT mit — die App bleibt die Wahrheit.
   Kein Tailwind, kein Build-Schritt, keine fremden Hosts. Poppins liegt lokal.
   ========================================================================== */

:root {
  /* Marke — 1:1 aus PRESET_STANDARD.marke.farben */
  --primaer-dunkel: #8B5D7A;
  --primaer: #E3D2DD;
  --primaer-hell: #F7F3F5;
  --primaer-zart: #EFE6EC;
  --akzent: #B08A3E;
  /* Dieselbe Goldfamilie, nur dunkler — ausschliesslich fuer KLEINEN Text.
     Grund: das Marken-Gold #B08A3E erreicht als 13-px-Grossbuchstabentext nur 2,6-3,2
     (gemessen gegen weiss, #F7F3F5 und #EFE6EC) und ist damit unter der Lesbarkeitsgrenze.
     #7E6127 kommt auf 4,7-5,8. Flaechen, Punkte und Haken behalten das echte Gold. */
  --akzent-text: #7E6127;
  --text-dunkel: #2E1F29;
  --text-gedaempft: #6B5563;
  --neutral-hell: #E5DCE2;
  --neutral: #B0A5AC;
  --neutral-dunkel: #918692;

  /* abgeleitet, nur fuer diese Seite */
  --primaer-tief: #6E4A61;
  --weiss: #FFFFFF;
  --schatten: 0 1px 2px rgba(46, 31, 41, .06), 0 8px 24px rgba(46, 31, 41, .06);
  --schatten-stark: 0 2px 4px rgba(46, 31, 41, .08), 0 16px 40px rgba(46, 31, 41, .10);
  --radius: 14px;
  --breite: 1080px;
  --breite-schmal: 720px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dunkel);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--primaer-tief); }
a:hover { color: var(--primaer-dunkel); }

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

/* --- Bausteine ---------------------------------------------------------- */

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
.huelle-schmal { width: 100%; max-width: var(--breite-schmal); margin: 0 auto; padding: 0 20px; }

.abschnitt { padding: 72px 0; }
.abschnitt-zart { background: var(--primaer-hell); }
.abschnitt-getoent { background: var(--primaer-zart); }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.85rem, 5.2vw, 3rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
h3 { font-size: 1.14rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.vorspann {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--akzent-text);
  margin-bottom: 14px;
}

.fuehrungstext { font-size: 1.1rem; color: var(--text-gedaempft); }
.klein { font-size: .87rem; color: var(--text-gedaempft); }
.mittig { text-align: center; }
.abstand-oben { margin-top: 20px; }
.abschnitt-kopf { max-width: 660px; margin: 0 auto 44px; text-align: center; }

/* --- Knoepfe ------------------------------------------------------------ */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  white-space: nowrap;   /* sonst bricht der Kopf-Knopf mobil zweizeilig und schiebt sich ueber das Logo */
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.knopf:hover { transform: translateY(-1px); }
.knopf-haupt {
  background: var(--primaer-dunkel);
  color: var(--weiss);
  box-shadow: var(--schatten);
}
.knopf-haupt:hover { background: var(--primaer-tief); color: var(--weiss); box-shadow: var(--schatten-stark); }
.knopf-zweit {
  background: transparent;
  color: var(--primaer-tief);
  border-color: var(--primaer);
}
.knopf-zweit:hover { background: var(--primaer-zart); color: var(--primaer-tief); }

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--neutral-hell);
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-dunkel); }
.marke img { height: 34px; width: auto; }
.marke span { font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; }

.kopf-nav { display: flex; align-items: center; gap: 26px; }
/* :not(.knopf) ist noetig, nicht kosmetisch — sonst schlaegt die Spezifitaet von
   `.kopf-nav a` (0,1,1) die von `.knopf-haupt` (0,1,0), und die weisse Knopfschrift
   wird zu gedaempftem Grau auf Mauve (gemessener Kontrast 1,3). */
.kopf-nav a:not(.knopf) { font-size: .93rem; color: var(--text-gedaempft); text-decoration: none; }
.kopf-nav a:not(.knopf):hover { color: var(--primaer-dunkel); }
.kopf-nav a.knopf { text-decoration: none; }
.kopf-nav .knopf { padding: 9px 20px; font-size: .9rem; }

@media (max-width: 860px) {
  .kopf-nav a:not(.knopf) { display: none; }
}
/* Ab hier wird es in der Kopfzeile eng. Gemessen bei 375 px: Logo + Wortmarke + Knopf
   passten nicht nebeneinander, der Knopf legte sich ueber das Logo. Der Knopf bleibt
   (die Kopfzeile klebt oben, der Titel-Knopf ist beim Scrollen weg), die Wortmarke geht —
   das Zeichen allein traegt die Marke, der Name steht direkt darunter in der Ueberschrift. */
@media (max-width: 560px) {
  .kopf-innen { height: 60px; }
  .marke img { height: 30px; }
  .kopf-nav .knopf { padding: 9px 16px; font-size: .85rem; }
}
@media (max-width: 420px) {
  .kopf .marke span { display: none; }
}

/* --- Titelbereich ------------------------------------------------------- */

.titel {
  padding: 76px 0 68px;
  background: linear-gradient(168deg, var(--primaer-zart) 0%, var(--primaer-hell) 58%, var(--weiss) 100%);
  border-bottom: 1px solid var(--neutral-hell);
}
.titel-innen { max-width: 800px; }
.titel h1 { margin-bottom: 20px; }
.titel .fuehrungstext { font-size: clamp(1.02rem, 2.3vw, 1.2rem); max-width: 660px; }
.titel-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.titel-marker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--neutral-hell);
  font-size: .9rem;
  color: var(--text-gedaempft);
}
.titel-marker span { display: inline-flex; align-items: center; gap: 8px; }
.titel-marker span::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--akzent);
  flex: none;
}

/* --- Zitat / Vorfall ---------------------------------------------------- */

.vorfall {
  border-left: 3px solid var(--akzent);
  padding: 4px 0 4px 26px;
  margin: 0 0 26px;
  font-size: 1.14rem;
  line-height: 1.6;
}
.vorfall p:first-child { font-weight: 500; }

/* --- Raster ------------------------------------------------------------- */

/* Grid-Kinder haben von Haus aus `min-width: auto` und schrumpfen deshalb NICHT unter die
   Breite ihres laengsten unteilbaren Wortes. Gemessen bei 375 px: eine Preisspalte wurde
   396 statt 335 px breit, die ganze Seite scrollte seitwaerts. Gilt fuer jedes Raster hier. */
.raster > *, .preise > * { min-width: 0; }

.raster { display: grid; gap: 20px; }
.raster-2 { grid-template-columns: repeat(2, 1fr); }
.raster-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .raster-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .raster-2, .raster-3 { grid-template-columns: 1fr; } }

.karte {
  background: var(--weiss);
  border: 1px solid var(--neutral-hell);
  border-radius: var(--radius);
  padding: 26px;
}
.karte h3 { margin-bottom: 8px; }
.karte p { font-size: .95rem; color: var(--text-gedaempft); }

.karte-zeichen {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--primaer-hell);
  color: var(--primaer-dunkel);
  font-size: 1.15rem;
  margin-bottom: 16px;
}

/* --- Zielgruppenliste --------------------------------------------------- */

.zielgruppen { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.zielgruppen li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--weiss);
  border: 1px solid var(--neutral-hell);
  border-radius: 11px;
  padding: 14px 18px;
  font-size: .97rem;
}
.zielgruppen li::before {
  content: '✓';
  color: var(--akzent);
  font-weight: 700;
  flex: none;
  line-height: 1.55;
}

.hinweiskasten {
  background: var(--weiss);
  border: 1px solid var(--neutral-hell);
  border-left: 3px solid var(--neutral);
  border-radius: 11px;
  padding: 20px 22px;
  margin-top: 26px;
}
.hinweiskasten p { font-size: .93rem; color: var(--text-gedaempft); }

/* --- Preise ------------------------------------------------------------- */

.preise { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; }
@media (max-width: 780px) { .preise { grid-template-columns: 1fr; } }

.preiskarte {
  background: var(--weiss);
  border: 1px solid var(--neutral-hell);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: var(--schatten);
  position: relative;
}
.preiskarte-hervor { border: 2px solid var(--primaer-dunkel); box-shadow: var(--schatten-stark); }

.preis-fahne {
  position: absolute;
  top: -13px; left: 28px;
  background: var(--primaer-dunkel);
  color: var(--weiss);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
}
.preis-name { font-size: 1.28rem; font-weight: 600; margin-bottom: 4px; }
.preis-fuer { font-size: .9rem; color: var(--text-gedaempft); margin-bottom: 20px; }
.preis-zahl { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.preis-zahl strong { font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.preis-zahl span { color: var(--text-gedaempft); font-size: .95rem; }
.preis-einrichtung {
  font-size: .9rem;
  color: var(--text-gedaempft);
  padding: 14px 0 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--neutral-hell);
}
.preis-einrichtung strong { color: var(--text-dunkel); }

.preis-liste { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 9px; }
.preis-liste li { display: flex; gap: 10px; font-size: .94rem; align-items: flex-start; min-width: 0; overflow-wrap: break-word; }
/* Die Beispieladresse ist EIN Wort ohne Trennstelle — sie muss mitten im Wort brechen duerfen. */
.preis-liste em { overflow-wrap: anywhere; font-style: italic; }
.preis-liste li::before { content: '✓'; color: var(--akzent); font-weight: 700; flex: none; }
/* Die Ausschluss-Zeilen NICHT weiter aufhellen: sie sagen dem Kunden, was er nicht bekommt.
   Mit --neutral-dunkel lagen sie bei 3,5 — abgesetzt wird ueber das Zeichen, nicht ueber
   schlechtere Lesbarkeit. */
.preis-liste li.aus { color: var(--text-gedaempft); }
.preis-liste li.aus::before { content: '–'; color: var(--neutral-dunkel); }

.preis-fuss { margin-top: 30px; }

/* --- Tabelle (Erstattung/Kuendigung) ------------------------------------ */

.tabellen-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.regeln {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  min-width: 480px;
  background: var(--weiss);
}
table.regeln th, table.regeln td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--neutral-hell);
  vertical-align: top;
}
table.regeln th { font-weight: 600; background: var(--primaer-zart); }
table.regeln tr:last-child td { border-bottom: 0; }

/* --- Abschluss-Aufruf --------------------------------------------------- */

.aufruf {
  background: var(--primaer-dunkel);
  color: var(--weiss);
  border-radius: 20px;
  padding: 52px 36px;
  text-align: center;
}
.aufruf h2 { color: var(--weiss); }
.aufruf p { color: rgba(255, 255, 255, .86); max-width: 520px; margin-left: auto; margin-right: auto; }
.aufruf .knopf-haupt { background: var(--weiss); color: var(--primaer-dunkel); margin-top: 26px; }
.aufruf .knopf-haupt:hover { background: var(--primaer-zart); color: var(--primaer-tief); }
@media (max-width: 620px) {
  .aufruf { padding: 40px 22px; border-radius: 16px; }
  /* Sechs Zeilen im Flattersatz mittig lesen sich mobil unruhig — Ueberschrift bleibt mittig. */
  .aufruf p { text-align: left; }
}

/* --- Fusszeile ---------------------------------------------------------- */

.fuss {
  background: var(--primaer-hell);
  border-top: 1px solid var(--neutral-hell);
  padding: 44px 0 34px;
  font-size: .9rem;
  color: var(--text-gedaempft);
}
.fuss-innen { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-start; }
.marke-fuss { margin-bottom: 10px; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss a { color: var(--text-gedaempft); text-decoration: none; }
.fuss a:hover { color: var(--primaer-dunkel); text-decoration: underline; }
.fuss-schluss {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--neutral-hell);
  font-size: .84rem;
}

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

.recht { padding: 52px 0 72px; }
.recht h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 6px; }
.recht h2 { font-size: 1.22rem; margin: 34px 0 10px; }
.recht h3 { font-size: 1.02rem; margin: 22px 0 6px; }
.recht p, .recht li { font-size: .96rem; }
.recht ul { padding-left: 22px; }
.recht li { margin-bottom: 6px; }

.entwurf-warnung {
  background: #FDF6E7;
  border: 1px solid #E8D5A8;
  border-left: 4px solid var(--akzent);
  border-radius: 11px;
  padding: 20px 22px;
  margin: 0 0 32px;
}
.entwurf-warnung strong { display: block; margin-bottom: 6px; color: #6B5320; }
.entwurf-warnung p { font-size: .93rem; color: #6B5320; }

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 620px) {
  body { font-size: 16px; }
  .abschnitt { padding: 54px 0; }
  .titel { padding: 52px 0 48px; }
  .titel-knoepfe { flex-direction: column; align-items: stretch; }
  .titel-knoepfe .knopf { width: 100%; }
  .preiskarte { padding: 28px 22px; }
  .karte { padding: 22px; }
}