/* Erledigo — Coolblack-Look: warmes Amber auf ruhigem Grund, hell + dunkel. */
:root {
  --grund: #faf6ef;
  --flaeche: #ffffff;
  --tinte: #241c11;
  --neben: #6f6353;
  --akzent: #e8930c;
  --akzent-tief: #b96f00;
  --linie: rgba(184, 134, 11, .18);
  --schatten: 0 10px 30px rgba(120, 84, 10, .10);
}
[data-theme="dark"] {
  --grund: #191410;
  --flaeche: #221c15;
  --tinte: #f4ecdf;
  --neben: #b8a98f;
  --akzent: #f0a123;
  --akzent-tief: #ffc25e;
  --linie: rgba(240, 161, 35, .22);
  --schatten: 0 10px 30px rgba(0, 0, 0, .45);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--grund); color: var(--tinte);
  line-height: 1.65; font-size: 17px;
}
.huelle { max-width: 880px; margin: 0 auto; padding: 0 22px; }
header.kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.marke { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; color: var(--tinte); text-decoration: none; }
.marke .e { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(160deg, #f6b13c, #c67b00); color: #fff; font-weight: 900; box-shadow: var(--schatten); }
.schalter { border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: .95rem; }
.held { text-align: center; padding: 56px 0 40px; }
.held h1 { font-size: clamp(2rem, 5.5vw, 3.1rem); line-height: 1.15; letter-spacing: -.5px; }
.held h1 em { font-style: normal; color: var(--akzent-tief); }
.held p.unter { margin: 18px auto 0; max-width: 560px; color: var(--neben); font-size: 1.12rem; }
.badge { display: inline-block; margin-top: 26px; background: var(--tinte); color: var(--grund); border-radius: 12px; padding: 12px 22px; font-weight: 600; text-decoration: none; }
.hinweisklein { margin-top: 12px; color: var(--neben); font-size: .9rem; }
.karten { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); padding: 26px 0 8px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 22px; box-shadow: var(--schatten); }
.karte .nr { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--akzent); color: #fff; font-weight: 800; margin-bottom: 10px; }
.karte h3 { margin-bottom: 6px; font-size: 1.05rem; }
.karte p { color: var(--neben); font-size: .97rem; }
section { padding: 34px 0; }
section h2 { font-size: 1.5rem; margin-bottom: 14px; }
.werte { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.wert { display: flex; gap: 12px; align-items: flex-start; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 16px; }
.wert .p { font-size: 1.3rem; }
.wert b { display: block; }
.wert span { color: var(--neben); font-size: .95rem; }
.dialog { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 20px; box-shadow: var(--schatten); max-width: 560px; margin: 0 auto; }
.blase { margin: 8px 0; padding: 10px 14px; border-radius: 14px; max-width: 85%; font-size: .97rem; }
.blase.agent { background: rgba(232, 147, 12, .12); border: 1px solid var(--linie); }
.blase.mensch { background: var(--grund); margin-left: auto; text-align: right; border: 1px solid var(--linie); }
.blase .wer { display: block; font-size: .78rem; color: var(--neben); margin-bottom: 2px; }
footer { border-top: 1px solid var(--linie); margin-top: 40px; padding: 26px 0 40px; color: var(--neben); font-size: .95rem; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
footer a { color: var(--akzent-tief); text-decoration: none; }
main.recht h1 { font-size: 1.8rem; padding-top: 26px; }
main.recht h2 { font-size: 1.15rem; margin: 26px 0 6px; }
main.recht p, main.recht li { color: var(--tinte); }
main.recht .neben, main.recht ul { color: var(--neben); }
main.recht ul { padding-left: 22px; }
a { color: var(--akzent-tief); }

/* Demo-Video + App-Galerie (27.08.) */
.demo{width:100%;max-width:300px;display:block;margin:0 auto;border-radius:24px;box-shadow:0 12px 40px rgba(0,0,0,.18);background:#000}
.screens{display:flex;gap:16px;overflow-x:auto;padding:8px 2px;-webkit-overflow-scrolling:touch}
.screens img{width:220px;flex:0 0 auto;border-radius:18px;box-shadow:0 8px 26px rgba(0,0,0,.15)}