/* ============================================================================
   DROPPY - Gemeinsame Gestaltungsregeln fuer alle Inhaltsseiten
   (Zusatz zu style.min.css, wird auf jeder Seite geladen)

   Die Linie:
   - Hero-Band mit Titel, darunter eine weisse Karte (max. 900px), die ins Hero ragt
   - In der Karte: Seitentitel (tuerkis, zentriert) -> Abschnitte
   - Abschnitt = Eyebrow (Koralle, Kapitaelchen) + Titel (dunkel) + Text
   - Kacheln: immer 12px Rundung, 1px Rand, weicher Schatten
   - Akzent-Farben: Tuerkis #13c0ba (Titel, Icons), Koralle #ec6952 (Labels, Buttons)
   ============================================================================ */

:root {
    --d-teal: #13c0ba;
    --d-coral: #ec6952;
    --d-dark: #253340;
    --d-text: #5d6a75;
    --d-bg: #f8f9fa;
    --d-line: #eef0f2;
    --d-radius: 12px;
    --d-shadow: 0 4px 14px rgba(20, 30, 60, .05);
}

/* Hero-Band (statt Inline-Style) */
.page-hero { height: 420px; }

/* Weisse Hauptkarte */
.section-story .story-container { margin-bottom: 50px; }
.section-story .story-container-inner { border-radius: var(--d-radius); border-color: var(--d-line); }

/* Eyebrow: kleines Label ueber einem Abschnittstitel */
.eyebrow {
    display: block; margin-bottom: 6px;
    font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--d-coral);
}

/* Abschnittstitel in der Karte */
.section-block { margin-top: 2.5rem; }
.section-block:first-child { margin-top: 0; }
.section-block h2.title, .section-block h3.title { margin: 0 0 1rem; font-size: 1.6rem; color: var(--d-dark); }
.section-block + .section-block { padding-top: 2rem; border-top: 1px solid var(--d-line); }

/* Kachel (Schritte, Features, Team, Kennzahlen) */
.d-tile {
    border: 1px solid var(--d-line); border-radius: var(--d-radius);
    background: #fff; box-shadow: var(--d-shadow);
}

/* Abschlussband mit Aufruf */
.cta-band {
    max-width: 900px; margin: 0 auto 50px; padding: 36px 24px; text-align: center;
    border-radius: var(--d-radius); color: #fff;
    background: linear-gradient(135deg, #13c0ba, #0e9a95);
    box-shadow: 0 12px 30px -12px rgba(19, 192, 186, .6);
}
.cta-band .title { margin: 0 0 6px; color: #fff; }
.cta-band p { margin: 0 0 18px; opacity: .95; }

/* Hinweis-Box (bestehende .content-box, einheitlich) */
.section-story .content-box { border-radius: 0 var(--d-radius) var(--d-radius) 0; }

/* ---------------------------------------------------------------------------
   Rechtstexte: AGB, Datenschutz, Cookies (Container hat die Klasse .legal)
   --------------------------------------------------------------------------- */
.legal { font-size: 16px; line-height: 1.75; color: var(--d-text); }
.legal p, .legal li { color: var(--d-text); }
.legal ul { padding-left: 1.2rem; margin-bottom: 1rem; }

.legal h2:not(.droppy-primary),
.legal h3 {
    margin: 2.5rem 0 1rem; padding-top: 2rem;
    border-top: 1px solid var(--d-line);
    font-family: inherit; font-size: 1.35rem; font-weight: 600; line-height: 1.35;
    color: var(--d-dark);
}
.legal .droppy-primary + h2, .legal .droppy-primary + h3,
.legal .droppy-primary + .legal-block { margin-top: 1rem; padding-top: 0; border-top: 0; }
.legal h4 { margin: 1.5rem 0 .75rem; font-size: 1rem; font-weight: 600; color: var(--d-dark); }

/* Unterblock (frueher blockquote.belife mit Serifenschrift) */
.legal .legal-block {
    margin: 1.25rem 0; padding: 20px 26px;
    border-left: 3px solid var(--d-teal); border-radius: 0 var(--d-radius) var(--d-radius) 0;
    background: var(--d-bg);
}
.legal .legal-block h2, .legal .legal-block h3 {
    margin: 0 0 .6rem; padding: 0; border: 0; font-size: 1.15rem;
}
.legal .legal-block h2 + p, .legal .legal-block p:last-child { margin-bottom: 0; }
.legal .legal-block p { margin-bottom: .8rem; font-size: 1rem; }
.legal .legal-block h2:not(:first-child) { margin-top: 1.25rem; }
.legal .legal-block ul { margin-bottom: 0; }

.legal .table { font-size: .9rem; }
.legal .table th { color: var(--d-dark); font-weight: 600; }
.legal cite { display: block; font-size: .9rem; font-style: normal; }
.legal cite a { display: block; padding: 2px 0; }

@media (max-width: 767px) {
    .page-hero { height: 320px; }
    .legal .legal-block { padding: 16px 18px; }
}

/* Bootstrap-Hilfsklasse .m-b-lg nicht zusaetzlich auf Abschnittstiteln */
.legal h2.m-b-lg, .legal h3.m-b-lg { margin-bottom: 1rem; }