/* ==========================================================================
   Fellwerkstatt Bonn — gemeinsames Stylesheet
   --------------------------------------------------------------------------
   Gilt fuer index.html, impressum.html, datenschutz.html und danke.html.

   Aufbau
     1. Farben
     2. Grundlagen (alle Seiten)
     3. Startseite
     4. Rechtsseiten (body-Klasse .rechtsseite)
     5. Breakpoints (900 / 620 / 520 px)

   Die Korrekturbloecke der Vorschaudatei sind eingearbeitet: jede Eigenschaft
   steht nur noch einmal je Selektor. Wo die Vorschau ueber die Spezifitaet
   korrigiert hat (z. B. details.lcard.labg gegenueber details.lcard), ist die
   gewinnende Regel uebernommen und die verdeckte entfallen.
   Die Rechtsseiten sind ueber die body-Klasse .rechtsseite abgegrenzt, damit
   ihre Grundregeln (Schriftgroesse, Satzbreite, Ueberschriften) nicht mit
   denen der Startseite kollidieren.
   ========================================================================== */


/* ==========================================================================
   1. Farben
   ========================================================================== */

:root{
  --creme:#FBF6EB;
  --creme2:#f1e8d3;
  --petrol:#658682;
  --pdeep:#4e6a66;
  --pdark:#3f5652;
  --ink:#1F1F1F;
  --grau:#454545;
  --rost:#A8543A;
  --rostd:#8c4530;
}


/* ==========================================================================
   2. Grundlagen (alle Seiten)
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--ink);font:400 17.5px/1.66 Barlow,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
h1,h2,h3,h4{font-family:Oswald,sans-serif;margin:0;line-height:1.06;text-transform:uppercase}
section{padding:72px 0}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

.slabel{display:inline-block;font:600 11px/1 Oswald,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--pdeep);border:2px solid var(--pdeep);padding:7px 12px;border-radius:2px;transform:rotate(-1.2deg);background:var(--creme)}

h2.sec{font-size:clamp(26px,3.6vw,34px);font-weight:600;margin:16px 0 10px}
.intro{color:var(--grau);max-width:60ch;margin:0 0 30px}

/* Abschnitte mit abgesetztem Hintergrund (Ablauf, FAQ) */
.bgalt{background:var(--creme2)}


/* ==========================================================================
   3. Startseite
   ========================================================================== */

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

header.site{position:sticky;top:0;z-index:60;background:var(--pdeep);border-bottom:3px solid var(--ink)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px}
.brand img{height:56px;width:auto;display:block}
.mainnav{display:flex;gap:20px}
.mainnav a{font:500 12.5px/1 Oswald,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--creme)}
.mainnav a:hover{color:#cfe0dd}
.hright{display:flex;gap:10px;align-items:center}
.burger{display:none;width:42px;height:38px;background:none;border:2px solid var(--creme);border-radius:3px;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--creme);margin:3.5px auto}

/* --- 3.2 Schaltflaechen ------------------------------------------------- */

.cta{font:600 12.5px/1 Oswald,sans-serif;letter-spacing:.1em;text-transform:uppercase;background:var(--rost);border:2px solid var(--rost);color:#fff;padding:12px 18px;border-radius:3px;cursor:pointer;text-decoration:none}
.cta:hover{background:var(--rostd);border-color:var(--rostd)}
.ghost{font:600 12.5px/1 Oswald,sans-serif;letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--ink);color:var(--ink);padding:12px 18px;border-radius:3px;cursor:pointer;text-decoration:none;background:transparent;display:inline-block}
.ghost:hover{background:var(--ink);color:var(--creme)}
.btnfull{width:100%}

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

.hero{padding:58px 0;background:var(--creme);background-image:radial-gradient(rgba(31,31,31,.045) 1px,transparent 1.3px);background-size:6px 6px}

/* Der Hero nutzt dieselbe Spalte wie alle anderen Abschnitte: kein eigenes
   max-width auf #hg2, sonst wird der Block innerhalb von .wrap zentriert und
   sein linker Rand wandert nach innen. Damit die Zeilen trotzdem nicht zu
   lang werden, ist die Textbreite an Ueberschrift und Einleitung begrenzt.
   Schaltflaechen und Logo bleiben linksbuendig in voller Spaltenbreite. */
.heroh1{font-size:clamp(34px,5.4vw,54px);font-weight:600;line-height:1.06;margin:.34em 0 .3em;max-width:22ch}
.heroh1 em{font-style:normal;color:var(--rost)}
.herolead{font-size:18.5px;margin-bottom:26px;max-width:46ch}

/* Alle drei Hero-Schaltflaechen mit identischer Geometrie und Textlage */
#hg2 .herobtn{display:flex;gap:12px;flex-wrap:wrap}
#hg2 .herobtn>*{display:inline-flex;align-items:center;justify-content:center;font:600 12.5px/1 Oswald,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:15px 20px;border-radius:3px;border:2px solid var(--ink);text-decoration:none;cursor:pointer;box-sizing:border-box;min-height:46px;margin:0}
#hg2 .herobtn .cta{background:var(--rost);border-color:var(--rost);color:#fff;box-shadow:none}
#hg2 .herobtn .cta:hover{background:var(--rostd);border-color:var(--rostd)}
#hg2 .herobtn .ghost{background:transparent;color:var(--ink)}
#hg2 .herobtn .ghost:hover{background:var(--ink);color:var(--creme)}
#hg2 .herobtn .wa{background:var(--petrol);color:var(--creme);box-shadow:none}
#hg2 .herobtn .wa:hover{background:var(--pdeep);transform:none}

/* Logo linksbuendig unter dem Textblock, skaliert mit der Ueberschrift */
#hg2 .herologo{margin-top:32px;font-size:clamp(34px,5.4vw,54px);line-height:0}
#hg2 .herologo img{display:block;width:8.2em;max-width:460px;height:auto;margin:0}

/* --- 3.4 Vertrauensleiste ---------------------------------------------- */

.trust{background:var(--petrol);border-bottom:2px solid var(--ink)}
.tin{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;padding:13px 24px}
.tin span{display:flex;align-items:center;gap:9px;color:var(--creme);font:500 12.5px/1 Oswald,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.tin img{width:26px;height:26px;filter:brightness(0) invert(1) opacity(.92)}

/* --- 3.5 Tafel und Aufklapp-Zeilen (Grundmuster) ------------------------ */

.tafel{background:#fff;border:2px solid var(--ink);border-radius:6px;box-shadow:6px 6px 0 rgba(31,31,31,.13)}

details.lrow{border-bottom:1px dashed rgba(31,31,31,.3)}
details.lrow:last-child{border-bottom:0}
details.lrow summary{display:grid;grid-template-columns:58px 1fr 24px;gap:20px;align-items:center;padding:20px 24px;cursor:pointer;list-style:none}
details.lrow summary::-webkit-details-marker{display:none}
details.lrow img{width:56px;height:56px}
details.lrow h3{font-size:19px;font-weight:600}
details.lrow .lt p{margin:3px 0 0;color:var(--grau);font-size:15.5px}
details.lrow .ld{padding:0 24px 20px 102px;color:var(--grau)}

.plus{font:400 22px/1 Oswald,sans-serif;color:var(--rost)}
details[open] .plus{transform:rotate(45deg)}

/* --- 3.6 Leistungen: Raster und Kacheln --------------------------------- */

.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}

details.lcard{background:#fff;border:2px solid var(--ink);border-radius:6px;box-shadow:5px 5px 0 rgba(31,31,31,.12);position:relative;display:flex;flex-direction:column}
details.lcard summary{padding:24px 24px 22px;cursor:pointer;list-style:none}
details.lcard summary::-webkit-details-marker{display:none}
details.lcard img{width:62px;height:62px;margin-bottom:12px}
details.lcard h3{font-size:19px;font-weight:600}
details.lcard .tz{margin:8px 0 0;color:var(--grau);font-size:15.5px;line-height:1.55}
details.lcard .plus{position:absolute;top:18px;right:20px}
details.lcard .ld{padding:0 24px 26px;color:var(--grau);margin:0;font-size:15.5px;line-height:1.55}

/* --- 3.7 Vollpflege: Petrol-Tafel ueber die volle Breite ---------------- */

.lmain{grid-column:1/-1;padding:24px;background:var(--pdeep);color:var(--creme);border-color:var(--ink);box-shadow:7px 7px 0 rgba(31,31,31,.22)}
.lmain h3{font-size:23px;font-weight:600;margin:0;color:var(--creme)}
.lmain .tz{margin:6px 0 0;color:#d9e4e2;font-size:16px;max-width:56ch}
.lmain img{filter:brightness(0) invert(1)}

.lmkopf{display:flex;gap:20px;align-items:flex-start}
.lmkopf img{width:62px;height:62px;margin:0;flex:0 0 auto}

.umf{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin:20px 0 0;padding:18px 0 0;border-top:1px solid rgba(251,246,235,.3)}
.umf li{position:relative;padding:0 0 7px 18px;font-size:15.5px;line-height:1.45;color:var(--creme)}
.umf li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:2px;background:var(--creme)}

.lmmehr{border-top:1px solid rgba(251,246,235,.3);margin-top:14px;padding-top:2px}
.lmmehr summary{position:relative;padding:12px 0 0;cursor:pointer;list-style:none;font:600 11px/1 Oswald,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#c5d5d2}
.lmmehr summary::-webkit-details-marker{display:none}
.lmmehr summary .plus{position:absolute;top:8px;right:0}
.lmmehr[open] summary .plus{transform:rotate(45deg)}
.lmmehr .ld{padding:12px 0 0;color:#d9e4e2}

/* --- 3.8 Strichliste in den Aufklapp-Kacheln ---------------------------- */

.umf1{display:block;columns:1;margin:14px 0 0;padding:0;border-top:none}
.umf1 li{padding:0 0 11px 18px;font-size:16px;line-height:1.6;color:var(--grau)}
.umf1 li:last-child{padding-bottom:0}
.umf1 li::before{top:.72em}

/* In den Kacheln 2-4 ohne Einrueckung und ohne Striche */
details.lcard .umf1{margin:0;padding:16px 24px 26px;list-style:none}
details.lcard .umf1 li{padding:0 0 14px 0;font-size:15.5px;line-height:1.55;color:var(--grau)}
details.lcard .umf1 li:last-child{padding-bottom:0}
details.lcard .umf1 li::before{content:none;display:none}

/* --- 3.9 Abgabesalon-Kachel --------------------------------------------- */
/* Traegt .lcard und .labg. details.lcard (0,1,1) schlaegt .labg (0,1,0),
   deshalb steht die gesamte Kachel unter details.lcard.labg (0,2,1).      */

details.lcard.labg{grid-column:1/-1;background:var(--pdeep);border-color:var(--ink);box-shadow:7px 7px 0 rgba(31,31,31,.22);padding:0}
details.lcard.labg>summary{display:block;padding:24px 24px 22px;position:relative}
details.lcard.labg .lmkopf{display:flex;gap:20px;align-items:flex-start;padding-right:36px}
details.lcard.labg img{filter:brightness(0) invert(1);width:62px;height:62px;margin:0;flex:0 0 auto}
details.lcard.labg h3{color:var(--creme);margin:0;font-size:23px;font-weight:600}
details.lcard.labg .tz{margin:6px 0 0;color:#d9e4e2;font-size:16px;line-height:1.55}
details.lcard.labg .plus{position:absolute;top:22px;right:22px;color:var(--creme)}
details.lcard.labg .ld{padding:0 24px 8px;color:#dde6e4;margin:0;font-size:15.5px;line-height:1.6}
details.lcard.labg .ld:last-of-type{padding-bottom:26px}

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

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{border-top:3px solid var(--petrol);padding-top:14px}
.step .nr{font:600 34px/1 Oswald,sans-serif;color:var(--rost)}
.step h3{font-size:16.5px;font-weight:600;margin:8px 0 6px}
.step p{margin:0;color:var(--grau);font-size:15px}

.tipp{margin:26px 0 0;color:var(--grau);font-size:15.5px}
.tipp img{width:22px;height:22px;vertical-align:-5px}

.ahinweis{margin-top:26px;border:2px solid var(--ink);background:var(--creme);padding:22px 24px;box-shadow:5px 5px 0 rgba(31,31,31,.10)}
.ahinweis p{margin:0 0 10px;font-size:16.5px;color:var(--grau)}
.ahinweis p:last-child{margin:0}
.ahinweis strong{color:var(--ink)}

/* --- 3.11 Philosophie --------------------------------------------------- */

.philo{background:var(--pdark);color:var(--creme);text-align:center}
.philo .p1{font:500 clamp(19px,2.6vw,25px)/1.5 Oswald,sans-serif;max-width:34ch;margin:0 auto}
.philo .p2{max-width:62ch;margin:18px auto 0;color:#cfe0dd}
.philo .p3{font:600 clamp(26px,4vw,40px)/1.2 Oswald,sans-serif;text-transform:uppercase;margin:34px auto 0}
.philo .p3 em{font-style:normal;color:var(--rost)}

/* --- 3.12 Ueber Yvonne -------------------------------------------------- */

.about{display:grid;grid-template-columns:360px 1fr;gap:50px;align-items:center}
.about p{color:var(--grau)}
.aph{border:2px solid var(--ink);border-radius:6px;background:#fff;padding:12px 12px 40px;box-shadow:6px 6px 0 rgba(31,31,31,.13);transform:rotate(-1.4deg)}
.aph img{display:block;width:100%;height:auto}
.role{font:600 11px/1 Oswald,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--rost);margin:6px 0 14px}
.sig{font:600 22px/1 Oswald,sans-serif;color:var(--rost);margin-top:8px}

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

.punter{margin-top:-6px;font-size:19px;color:var(--petrol);font-weight:500}
.pcard{background:#fff;border:2px solid var(--ink);border-radius:6px;box-shadow:6px 6px 0 rgba(31,31,31,.13);padding:30px;max-width:820px}
.pcard p{color:var(--grau);margin:0 0 14px}
.pcard p:last-child{margin:0}

/* --- 3.14 FAQ ----------------------------------------------------------- */

.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
details.ftile{background:#fff;border:2px solid var(--ink);border-radius:6px;align-self:start}
details.ftile summary{display:grid;grid-template-columns:40px 1fr 20px;gap:14px;align-items:center;padding:15px 18px;cursor:pointer;list-style:none}
details.ftile summary::-webkit-details-marker{display:none}
details.ftile img{width:38px;height:38px}
details.ftile p{margin:0;padding:0 18px 16px 72px;color:var(--grau);font-size:15.5px}
.fq{font:500 15.5px/1.35 Oswald,sans-serif;text-transform:uppercase;letter-spacing:.02em}

/* --- 3.15 Kontakt und Karte --------------------------------------------- */

.kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.ktile{background:#fff;border:2px solid var(--ink);border-radius:6px;padding:18px;display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;gap:2px 14px;align-items:center;text-decoration:none;box-shadow:4px 4px 0 rgba(31,31,31,.10)}
a.ktile:hover{transform:translateY(-2px)}
.ktile img{width:44px;height:44px;grid-row:1/3}
.ktile strong{font:600 14.5px/1.2 Oswald,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.ktile span{color:var(--grau);font-size:14.5px}

.mapbox{border:2px solid var(--ink);border-radius:6px;overflow:hidden;background:var(--creme2);min-height:300px;position:relative}
.mconsent{padding:26px;max-width:640px}
.mconsent p{color:var(--grau);font-size:15px}
.mconsent .cta{margin-right:10px}
.mframe{position:absolute;inset:0}

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

footer{background:var(--ink);color:var(--creme)}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px;padding-top:44px;padding-bottom:26px}
.flogo{height:64px;width:auto}
.fclaim{color:#cfcabb;margin:12px 0 0;font-size:15.5px}
.fcol h4{font-size:12px;letter-spacing:.22em;color:var(--petrol);margin-bottom:10px}
.fcol p{margin:0;color:#cfcabb;font-size:15.5px;line-height:1.8}
.fcol a{color:#cfcabb;text-decoration:none}
.fcol a:hover{color:var(--creme)}
.finsta{display:inline-block;margin-top:12px;background:var(--creme);border-radius:8px;padding:6px;line-height:0}
.finsta img{width:30px;height:30px}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:16px 24px;border-top:1px solid rgba(251,246,235,.18);font-size:13.5px;color:#b9b4a6}
.legal a{color:#b9b4a6;text-decoration:none}

/* --- 3.17 Terminformular im Overlay ------------------------------------- */

.modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;background:rgba(31,31,31,.62);padding:18px}
.modal.open{display:flex}
.mcard{background:var(--creme);border:2px solid var(--ink);border-radius:8px;max-width:520px;width:100%;padding:28px;position:relative;max-height:92vh;overflow:auto}
.mcard h3{font-size:22px}
.mclose{position:absolute;top:10px;right:12px;background:none;border:none;font-size:26px;cursor:pointer;color:var(--ink)}
.msub{color:var(--grau);margin:.4em 0 16px;font-size:15.5px}
.mcard label{display:block;font:600 11px/1 Oswald,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.mcard input,.mcard textarea{width:100%;margin-top:6px;border:2px solid var(--ink);border-radius:3px;background:#fff;padding:10px 12px;font:400 16px/1.4 Barlow,sans-serif}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ds{font-size:13px;color:var(--grau)}
.ds a{color:var(--pdeep)}
.malt{display:flex;gap:10px;margin-top:14px}
.malt .ghost{flex:1;text-align:center}
/* Honigtopf gegen Spam: Feld bleibt fuer Menschen unsichtbar. */
.hp{display:none}

/* --- 3.18 Feste Leiste am unteren Rand (mobil) -------------------------- */

.sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);border-top:2px solid var(--rost)}
.sticky a{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;color:var(--creme);text-decoration:none;font:600 13px/1 Oswald,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.sticky a+a{border-left:1px solid rgba(251,246,235,.2)}
.sticky img{width:22px;height:22px;filter:brightness(0) invert(1)}


/* ==========================================================================
   4. Rechtsseiten (Impressum, Datenschutz)
   --------------------------------------------------------------------------
   body traegt .rechtsseite und zusaetzlich .impressum bzw. .datenschutz.
   ========================================================================== */

.rechtsseite{font:400 17px/1.7 Barlow,system-ui,sans-serif}
.rechtsseite a{color:var(--rost)}
.rechtsseite .wrap{max-width:800px}

/* Kopfzeile */
.rechtsseite header{background:var(--petrol);border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:20}
.rechtsseite .hbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.rechtsseite .brand{font:600 21px/1 Oswald,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--creme);text-decoration:none}
.rechtsseite .brand small{display:block;font:400 9.5px/1 Oswald,sans-serif;letter-spacing:.4em;color:#cbd8d6;margin-top:5px}
.rechtsseite .back{font:600 11.5px/1 Oswald,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--creme);text-decoration:none;border:2px solid var(--creme);padding:12px 16px}
.rechtsseite .back:hover{background:var(--creme);color:var(--petrol)}

/* Textkoerper */
.rechtsseite main{padding:54px 0 70px;background-image:radial-gradient(rgba(31,31,31,.045) 1px,transparent 1.3px);background-size:6px 6px}
.rechtsseite .slabel{letter-spacing:.2em;color:var(--petrol);border-color:var(--petrol);border-radius:0;background:none;padding:8px 13px;transform:rotate(-1.4deg);margin-bottom:22px}
.rechtsseite h1{font:600 clamp(30px,4.6vw,44px)/1.08 Oswald,sans-serif;text-transform:none;margin:0 0 34px}
.rechtsseite h2{font:600 20px/1.25 Oswald,sans-serif;text-transform:none;margin:38px 0 12px;padding-top:20px;border-top:2px solid var(--ink)}
.rechtsseite h3{font:600 16px/1.3 Oswald,sans-serif;text-transform:none;margin:24px 0 8px;color:var(--pdeep)}
.rechtsseite .h2start{margin-top:0;padding-top:0;border-top:none}
.rechtsseite p{margin:0 0 14px;color:var(--grau)}
.rechtsseite ul{margin:0 0 16px;padding-left:22px;color:var(--grau)}
.rechtsseite li{margin-bottom:7px}
.rechtsseite .stand{margin-top:36px;font-size:15px}

.rechtsseite .box{background:#fff;border:2px solid var(--ink);border-radius:6px;box-shadow:5px 5px 0 rgba(31,31,31,.12);padding:26px 28px;margin:0 0 10px}
.rechtsseite .box p{margin:0 0 6px;color:var(--ink)}
.rechtsseite .box p:last-child{margin:0}
.rechtsseite .hinweis{background:var(--creme2);border:2px dashed var(--rost);padding:20px 22px;margin:0 0 34px}
.rechtsseite .hinweis p{margin:0;font-size:15.5px;color:var(--ink)}
.rechtsseite .tbd{background:#ffe9c9;padding:1px 7px;border-radius:3px;font-weight:600;color:#7a4a00}

/* Inhaltsverzeichnis (nur Datenschutz) */
.rechtsseite .inhalt{background:#fff;border:2px solid var(--ink);padding:22px 26px;margin:0 0 40px;box-shadow:5px 5px 0 rgba(31,31,31,.12)}
.rechtsseite .inhalt ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
.rechtsseite .inhalt li{margin-bottom:5px;font-size:15.5px}
.rechtsseite .inhalt a{text-decoration:none;color:var(--ink)}
.rechtsseite .inhalt a:hover{color:var(--rost)}

/* Tabellen (nur Datenschutz) */
.rechtsseite table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15.5px}
.rechtsseite th,.rechtsseite td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(31,31,31,.18);vertical-align:top}
.rechtsseite th{font:600 12px/1.3 Oswald,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--pdeep);white-space:nowrap}

/* Fusszeile */
.rechtsseite footer{background:var(--pdark);color:#d8e2e0;padding:34px 0;border-top:2px solid var(--ink);font-size:15.5px}
.rechtsseite footer a{color:#d8e2e0}
.rechtsseite footer .fl{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}

/* Seitenbezogene Abweichungen */
.datenschutz h1{margin-bottom:30px}
.datenschutz h2{margin-top:40px}
.datenschutz .box{margin-bottom:18px}


/* ==========================================================================
   5. Breakpoints
   ========================================================================== */

@media(max-width:900px){

  /* Startseite: Navigation als Klappmenue, feste Leiste unten */
  .mainnav{position:fixed;top:79px;left:0;right:0;background:var(--pdeep);flex-direction:column;padding:16px 24px;gap:14px;display:none;border-bottom:2px solid var(--ink)}
  .mainnav.open{display:flex}
  .burger{display:block}
  .hright .cta{display:none}
  .sticky{display:flex}
  #top{padding-bottom:52px}

  /* Startseite: Raster einklappen */
  .steps{grid-template-columns:1fr 1fr}
  .lgrid,.fgrid{grid-template-columns:1fr}
  .kgrid{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .aph{max-width:340px}
  .foot{grid-template-columns:1fr}

  details.ftile p{padding-left:18px}
  details.lrow .ld{padding-left:24px}

  .lmain{padding:22px}
  .lmkopf{gap:16px}
  .lmkopf img{width:52px;height:52px}
}

@media(max-width:620px){
  .rechtsseite .inhalt ol{columns:1}
}

@media(max-width:520px){

  .umf{grid-template-columns:1fr;gap:0}
  .lmkopf{flex-direction:column;gap:12px}

  #hg2 .herobtn{gap:9px}
  #hg2 .herobtn .cta,#hg2 .herobtn .ghost,#hg2 .herobtn .wa{flex:1 1 100%;text-align:center}
  #hg2 .herologo img{width:100%;max-width:100%}

  details.lcard.labg .lmkopf{flex-direction:column;gap:12px}
  details.lcard.labg img{width:52px;height:52px}
  details.lcard.labg h3{font-size:20px}

  .rechtsseite .wrap{padding:0 18px}
  .rechtsseite .box{padding:22px 20px}
  .rechtsseite th,.rechtsseite td{padding:8px 6px}
}