/* ============================================================
   smtpdelivery.de – technischer Versanddienst.
   Eigene, ruhige Farbwelt: Tiefgrün als Grundton, Petrol für Verweise,
   Mint für bestandene Prüfungen, Bernstein und Ziegelrot als Akzente.
   Schriften nur aus dem System, damit keine Daten an Schriftserver gehen.
   Erstellt von deichbot.
   ============================================================ */
:root{
  --grund:#F5F7F4;
  --flaeche:#FFFFFF;
  --tief:#123A33;
  --tief-2:#0C2823;
  --petrol:#1F8A78;
  --mint:#2BB673;
  --bernstein:#E8A33D;
  --ziegel:#D9573B;
  --tinte:#14211C;
  --text:#3B4A44;
  --leise:#6B7A73;
  --linie:#DCE4DF;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.sd-body{
  margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift);
  font-size:17px;line-height:1.6;
  /* Fuß klebt unten, auch auf kurzen Seiten (Regel für alle Kunden-Sites). */
  display:flex;flex-direction:column;min-height:100svh;
}
body.sd-body > .sd-inhalt{flex:1 0 auto}
body.sd-body > .sd-fuss{flex:none;margin-top:auto}
a{color:var(--petrol)}
a:hover{color:var(--tief)}
h1,h2,h3{color:var(--tinte);line-height:1.2;margin:0}
.sd-wrap{width:100%;max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}

/* ---------- Kopf ---------- */
.sd-top{background:var(--flaeche);border-bottom:1px solid var(--linie)}
.sd-top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.sd-marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tief)}
.sd-marke__zeichen{flex:none}
.sd-marke__name{font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--tinte)}
.sd-marke__name span{color:var(--petrol)}
.sd-top__link{font-size:.92rem;font-weight:600;text-decoration:none;color:var(--ziegel);white-space:nowrap}
.sd-top__link:hover{text-decoration:underline;color:var(--ziegel)}

/* ---------- Einstieg ---------- */
.sd-held{background:linear-gradient(180deg,#FFFFFF 0%,var(--grund) 100%);padding-block:64px 72px}
.sd-held__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.sd-chip{display:inline-block;background:#E4F2EE;color:var(--tief);border-radius:999px;padding:5px 14px;font-size:.82rem;font-weight:600;letter-spacing:.02em}
.sd-held h1{font-size:clamp(2rem,4.2vw,3.05rem);letter-spacing:-.02em;margin:18px 0 20px}
.sd-held__lead{font-size:1.1rem;margin:0 0 12px;max-width:none}
.sd-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sd-knopf{display:inline-block;background:var(--tief);color:#fff;text-decoration:none;font-weight:600;padding:13px 22px;border-radius:10px;cursor:pointer;border:2px solid var(--tief)}
.sd-knopf:hover{background:var(--tief-2);color:#fff}
.sd-knopf--zwei{background:transparent;color:var(--tief)}
.sd-knopf--zwei:hover{background:#E4F2EE;color:var(--tief)}

/* Kopfzeilen-Karte */
.sd-kopf{margin:0;background:var(--tief);color:#DCEBE5;border-radius:16px;padding:22px 24px 20px;box-shadow:0 18px 40px rgba(18,58,51,.18);font-family:var(--mono);font-size:.86rem;min-width:0}
.sd-kopf__titel{display:flex;align-items:center;gap:12px;font-family:var(--schrift);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9CC4B8;margin-bottom:16px}
.sd-kopf__punkte{display:flex;gap:6px}
.sd-kopf__punkte i{width:10px;height:10px;border-radius:50%;background:#2E5A51}
.sd-kopf__punkte i:first-child{background:var(--ziegel)}
.sd-kopf__punkte i:nth-child(2){background:var(--bernstein)}
.sd-kopf__punkte i:last-child{background:var(--mint)}
.sd-kopf__zeilen{margin:0}
.sd-kopf__zeilen div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.sd-kopf__zeilen dt{color:#86AEA2}
.sd-kopf__zeilen dd{margin:0;color:#F2F8F5;overflow-wrap:anywhere}
.sd-kopf__wir dd{color:var(--bernstein);font-weight:700}
.sd-kopf__pruef{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sd-kopf__pruef li{font-family:var(--schrift);font-size:.8rem;font-weight:600;color:#CFF3E0;background:rgba(43,182,115,.16);border-radius:999px;padding:4px 12px 4px 26px;position:relative}
.sd-kopf__pruef li::before{content:"";position:absolute;left:10px;top:50%;width:8px;height:4px;border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:translateY(-70%) rotate(-45deg)}
.sd-kopf__hinweis{font-family:var(--schrift);font-size:.85rem;color:#A9C9BF;margin:16px 0 0}

/* ---------- Fragen zu einer erhaltenen E-Mail ---------- */
.sd-fragen{padding-block:72px 64px}
.sd-fragen h2,.sd-regeln h2{font-size:clamp(1.55rem,2.6vw,2rem);letter-spacing:-.01em}
.sd-einleitung{margin:12px 0 36px;font-size:1.05rem}
.sd-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sd-karte{background:var(--flaeche);border:1px solid var(--linie);border-top:4px solid var(--petrol);border-radius:14px;padding:28px 26px 26px;min-width:0}
.sd-karte--abmelden{border-top-color:var(--bernstein)}
.sd-karte--melden{border-top-color:var(--ziegel)}
.sd-icon{display:block;margin-bottom:16px}
.sd-karte h3{font-size:1.18rem;margin-bottom:10px}
.sd-karte p{margin:0}

/* ---------- Regeln ---------- */
.sd-regeln{background:var(--tief);color:#D5E6E0;padding-block:64px}
.sd-regeln__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px 56px;align-items:start}
.sd-regeln h2{color:#fff}
.sd-regeln__kopf p{margin:12px 0 0;color:#A9C9BF}
.sd-liste{list-style:none;margin:0;padding:0}
.sd-liste li{position:relative;padding:12px 0 12px 34px;border-bottom:1px solid rgba(255,255,255,.1)}
.sd-liste li:first-child{padding-top:0}
.sd-liste li:first-child::before{top:5px}
.sd-liste li::before{content:"";position:absolute;left:4px;top:17px;width:11px;height:6px;border-left:2.5px solid var(--mint);border-bottom:2.5px solid var(--mint);transform:rotate(-45deg)}
.sd-regeln__kontakt{grid-column:2;margin:8px 0 0;color:#A9C9BF}
.sd-regeln a{color:#fff}

/* ---------- Rechtstexte ---------- */
.sd-recht{padding-block:56px 72px}
.sd-recht__in{max-width:820px}
.sd-recht h1{font-size:clamp(1.8rem,3.4vw,2.4rem);margin-bottom:20px}
.sd-recht h2{font-size:1.15rem;margin:32px 0 8px}
.sd-recht p{margin:0 0 12px}

/* ---------- Fuß ---------- */
.sd-fuss{background:var(--tief-2);color:#A9C9BF;font-size:.9rem}
.sd-fuss__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px 40px;padding-block:32px}
.sd-fuss p{margin:0}
.sd-fuss__name{color:#fff;font-weight:700}
.sd-fuss__name span{display:block;color:#A9C9BF;font-weight:400;margin-top:2px}
.sd-fuss a{color:#fff}
.sd-fuss__recht span{margin:0 8px}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:960px){
  .sd-held__in{grid-template-columns:minmax(0,1fr);gap:40px}
  .sd-karten{grid-template-columns:minmax(0,1fr)}
  .sd-regeln__in{grid-template-columns:minmax(0,1fr)}
  .sd-regeln__kontakt{grid-column:1}
}
@media (max-width:520px){
  body.sd-body{font-size:16px}
  .sd-held{padding-block:44px 52px}
  .sd-top__in{min-height:60px}
  .sd-marke__name{font-size:1.02rem}
  .sd-top__link{font-size:.85rem}
  .sd-kopf{padding:18px 16px}
  .sd-kopf__zeilen div{grid-template-columns:84px minmax(0,1fr)}
  .sd-knopf{width:100%;text-align:center}
}