/* Dipsitter-Website – Mail-Look (E-27): helle Fläche, dunkle Karte mit Akzentleiste.
   Farbtokens identisch zu hermes_studio/web/app.py (CSS), damit Website, App und Mails
   dieselbe Handschrift haben. Kein Framework, keine externen Assets (CSP-freundlich). */
:root{
  --bg:#222823;--flaeche:#262d2c;--flaeche2:#1b201f;--rand:#3a4241;
  --text:#EFEFEE;--gedimmt:#9aa3a1;--akzent:#39A2AE;--charcoal:#575A5E;
  --absatz:#c9cdcc;--fuss:#6f7674;--hell:#EFEFEE;
}
*{box-sizing:border-box}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--hell);color:var(--absatz);margin:0;
  padding:36px 12px 8px;display:flex;flex-direction:column;align-items:center;
  font-size:16px;line-height:1.6;
}
.mrahmen{width:min(680px,100%)}
.mleiste{background:var(--akzent);height:5px;border-radius:10px 10px 0 0}
.mkarte{background:var(--bg);border-radius:0 0 10px 10px;padding:0 44px 44px}

/* Kopf: Bildmarke + Wortmarke, wie in App und Mail */
.mkopf{display:flex;align-items:center;gap:.6rem;padding:22px 0 16px;border-bottom:1px solid var(--rand)}
.mkopf b{color:var(--text);font-size:15px;font-weight:600;letter-spacing:5px}
.mkopf nav{margin-left:auto;font-size:13px;letter-spacing:.04em}
.mkopf nav a{color:var(--gedimmt);text-decoration:none;margin-left:1.1rem}
.mkopf nav a:hover{color:var(--akzent)}

.kicker{margin:34px 0 10px;font-size:13px;font-weight:700;letter-spacing:3px;color:var(--akzent);text-transform:uppercase}
h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:1.85rem;line-height:1.25;margin:0 0 20px;color:var(--text)}
h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:1.35rem;margin:2.1rem 0 .7rem;color:var(--text)}
h3{font-size:1.02rem;font-weight:600;margin:1.3rem 0 .3rem;color:var(--text)}
p{margin:.7rem 0}
a{color:var(--akzent)}
strong{color:var(--text);font-weight:600}
ul{margin:.6rem 0 1rem;padding-left:1.35rem}
li{margin:0 0 .5rem}

.lead{font-size:17px;color:var(--text)}
.trenner{border:0;border-top:1px solid var(--rand);margin:30px 0 0}

/* Aufzählung mit Akzent-Kopfzeile, ersetzt Icon-Kacheln */
.punkte{margin:1.2rem 0 0;padding:0;list-style:none}
.punkte li{margin:0 0 1.2rem;padding-left:1.1rem;border-left:2px solid var(--akzent)}
.punkte b{display:block;color:var(--text);font-size:15px;margin-bottom:.15rem}
.punkte span{font-size:15px}

/* Belegte Datenschutz-Aussagen (Sprachregelung E-26): Häkchenliste */
.belegt{list-style:none;padding:0;margin:.8rem 0 0}
.belegt li{position:relative;padding-left:1.6rem;font-size:15px}
.belegt li::before{content:'✓';position:absolute;left:0;color:var(--akzent);font-weight:700}

.btn{display:inline-block;margin:.6rem 0 .2rem;padding:.75rem 1.6rem;border-radius:6px;
  background:var(--akzent);color:#0d1413;text-decoration:none;font-weight:700;font-size:15px}
.btn:hover{background:#46b7c4}
.btn::after{content:'  →'}
.btn.sek{background:transparent;border:1px solid var(--charcoal);color:var(--gedimmt);font-weight:400}
.btn.sek:hover{border-color:var(--akzent);color:var(--text)}
.btn.sek::after{content:''}
.klein{font-size:14px;color:var(--gedimmt)}

/* Kontakt-/Rechtsangaben als Definitionsliste */
.daten{display:grid;grid-template-columns:11rem 1fr;gap:.35rem 1rem;margin:.8rem 0;font-size:15px}
.daten dt{color:var(--gedimmt)}
.daten dd{margin:0;color:var(--text)}

.mfuss{width:min(680px,100%);text-align:center;padding:22px 12px 24px;font-size:14px;line-height:1.7;color:var(--fuss)}
.mfuss a{color:var(--fuss)}

@media(max-width:640px){
  body{padding:14px 8px 6px}
  .mkarte{padding:0 20px 32px}
  h1{font-size:1.5rem}
  .mkopf{flex-wrap:wrap}
  .mkopf nav{margin-left:0;width:100%;padding-top:.5rem}
  .mkopf nav a{margin:0 1.1rem 0 0}
  .daten{grid-template-columns:1fr;gap:.1rem 0}
  .daten dd{margin-bottom:.5rem}
}