/* =====================================================================
   LS-Matchmaker — Website (Landing + Inhalt + Rechtsseiten)
   Theme 1:1 zur App ("Creme & Bernstein"). Lokale/Systemschriften,
   keine externen CDNs (DSGVO). Eine geteilte CSS-Datei für alle Seiten.
   ===================================================================== */

:root{
  --bg:#F7F2E9; --surface:#FFFDF8; --sand:#FBEEDB;
  --ink:#26221C; --muted:#857B6D; --faint:#A99E8D;
  --line:#EADFCD; --amber:#D98A33; --terra:#B85827; --sage:#5E8A78;
  --serif: Georgia, 'Times New Roman', 'Newsreader Variable', serif;
  --sans: system-ui, -apple-system, 'Hanken Grotesk Variable', 'Segoe UI', Roboto, sans-serif;
  --maxw: 760px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:
    radial-gradient(130% 80% at 50% 0%, #F3E7D4 0%, var(--bg) 55%) fixed;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sand);}

.serif{font-family:var(--serif);}
a{color:var(--terra); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---- Sprachumschaltung (Standard = Deutsch, auch ohne JS) ---- */
.i18n{}                                   /* inline */
.i18n.en{display:none;}
html.lang-en .i18n.de{display:none;}
html.lang-en .i18n.en{display:inline;}
.block{display:none;}                     /* block-Level */
html:not(.lang-en) .block.de{display:block;}
html.lang-en .block.en{display:block;}

/* ---- Layout ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}

header.site{
  position:sticky; top:0; z-index:20;
  background:rgba(247,242,233,.86); backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
}
header.site .bar{
  max-width:var(--maxw); margin:0 auto; padding:13px 22px;
  display:flex; align-items:center; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand .dot{width:11px; height:11px; border-radius:50%; background:var(--terra); flex:0 0 auto;}
.brand .name{font-size:15px; letter-spacing:.01em;}
nav.top{margin-left:auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
nav.top a{font-size:14px; color:var(--muted);}
nav.top a:hover{color:var(--terra); text-decoration:none;}
.lang-toggle{
  border:1.5px solid var(--line); background:var(--surface); color:var(--terra);
  font:600 13px/1 var(--sans); padding:7px 11px; border-radius:9px; cursor:pointer;
}
.lang-toggle:hover{border-color:var(--terra);}

/* ---- Hero ---- */
.hero{padding:64px 0 40px; text-align:center;}
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--terra); margin:0 0 14px;}
.hero h1{font-family:var(--serif); font-weight:500; font-size:clamp(30px,6vw,46px); line-height:1.08; letter-spacing:-.02em; margin:0 auto 18px; max-width:18ch; text-wrap:balance;}
.hero p.lead{font-size:clamp(16px,2.4vw,19px); color:var(--muted); max-width:54ch; margin:0 auto 28px;}

/* ---- Buttons ---- */
.btn{display:inline-block; font:600 16px/1 var(--sans); padding:15px 26px; border-radius:14px; cursor:pointer; border:1.5px solid transparent;}
.btn.primary{background:var(--terra); color:#fff;}
.btn.primary:hover{background:#a44e22; text-decoration:none;}
.btn.ghost{background:var(--surface); color:var(--ink); border-color:var(--line);}
.btn.ghost:hover{border-color:var(--terra); text-decoration:none;}
.btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* ---- Sections / Cards ---- */
section{padding:34px 0;}
h2.sec{font-family:var(--serif); font-weight:500; font-size:clamp(23px,4vw,30px); letter-spacing:-.015em; margin:0 0 8px;}
.sub{color:var(--muted); margin:0 0 26px; font-size:15.5px;}
.cards{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px;}
.card .step{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--terra); margin:0 0 8px;}
.card h3{font-family:var(--serif); font-weight:500; font-size:19px; margin:0 0 7px;}
.card p{margin:0; font-size:14.5px; color:var(--muted);}

.panel{background:var(--sand); border:1px solid var(--line); border-radius:18px; padding:26px;}
.note{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:10px; padding:14px 16px; font-size:14px; color:var(--muted);}

/* ---- Prose (Inhalts- & Rechtsseiten) ---- */
.prose{padding:42px 0 20px;}
.prose h1{font-family:var(--serif); font-weight:500; font-size:clamp(28px,5vw,38px); line-height:1.12; letter-spacing:-.02em; margin:0 0 6px;}
.prose .updated{color:var(--faint); font-size:13px; margin:0 0 26px;}
.prose h2{font-family:var(--serif); font-weight:500; font-size:23px; letter-spacing:-.01em; margin:34px 0 10px;}
.prose h3{font-size:16px; font-weight:700; margin:22px 0 6px; color:var(--ink);}
.prose p, .prose li{font-size:15.5px; color:#36302a;}
.prose ul{padding-left:1.2em;}
.prose li{margin:5px 0;}
.prose a{color:var(--terra);}
.addr{font-style:normal; line-height:1.7;}

/* ---- Footer ---- */
footer.site{margin-top:30px; border-top:1px solid var(--line); background:rgba(255,253,248,.6);}
footer.site .wrap{padding:30px 22px 40px;}
footer.site .cols{display:flex; gap:30px 50px; flex-wrap:wrap; align-items:flex-start;}
footer.site .col h4{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:0 0 10px; font-weight:700;}
footer.site .col a{display:block; font-size:14px; color:var(--muted); margin:6px 0;}
footer.site .col a:hover{color:var(--terra); text-decoration:none;}
footer.site .legal{margin-top:24px; font-size:12.5px; color:var(--faint); line-height:1.6;}
footer.site .legal a{color:var(--muted);}

hr.soft{border:none; border-top:1px solid var(--line); margin:30px 0;}

/* ---- Modus-/Souveränitäts-Karten ---- */
.modes{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:6px;}
.mode{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; display:flex; flex-direction:column;}
.mode.rec{border-color:var(--amber); box-shadow:0 6px 22px rgba(217,138,51,.12);}
.mode .ico{font-size:26px; line-height:1; margin-bottom:12px;}
.mode h3{font-family:var(--serif); font-weight:500; font-size:19px; margin:0 0 3px;}
.mode .region{font-size:12.5px; font-weight:700; color:var(--terra); margin:0 0 11px;}
.mode p{margin:0; font-size:14.5px; color:var(--muted);}
.mode .hint{margin-top:auto; font-size:13px; color:var(--ink); background:var(--sand); border-radius:9px; padding:9px 11px;}
.mode .hint b{color:var(--terra);}
.badge-rec{display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#fff; background:var(--amber); border-radius:6px; padding:2px 7px; margin-left:6px; vertical-align:middle;}

/* ---- Abschluss-CTA mit QR ---- */
.cta-app{text-align:center; padding-top:10px;}
.qr-card{display:inline-flex; flex-direction:column; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 26px; margin-top:20px;}
.qr-card svg{border-radius:10px; border:1px solid var(--line);}
.qr-card .store{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); font-size:14px;}
.qr-card .ph{font-size:12px; color:var(--faint);}