:root{
    --bg:#ffffff;--fg:#0a0a0a;--muted:#6b6b6b;--line:#e6e6e6;
    --hover:#0a0a0a;--hover-fg:#ffffff;--veil:rgba(10,10,10,.45);
  }
  @media (prefers-color-scheme: dark){
    :root{--bg:#0a0a0a;--fg:#fafafa;--muted:#9a9a9a;--line:#232323;
      --hover:#fafafa;--hover-fg:#0a0a0a;--veil:rgba(0,0,0,.65);}
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    background:var(--bg);color:var(--fg);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    line-height:1.5;-webkit-font-smoothing:antialiased;
    display:flex;justify-content:center;padding:20px 20px 64px;
  }
  .wrap{width:100%;max-width:560px}

  /* Sprachschalter */
  .langbar{display:flex;justify-content:flex-end;gap:4px;margin-bottom:16px}
  .langbar button{
    background:none;border:1px solid var(--line);border-radius:7px;
    color:var(--muted);font:inherit;font-size:12px;font-weight:600;
    letter-spacing:.06em;padding:4px 9px;cursor:pointer;text-transform:uppercase;
  }
  .langbar button[aria-current="true"]{border-color:var(--fg);color:var(--fg)}

  header{text-align:center;margin-bottom:32px}
  .avatar{
    width:88px;height:88px;border-radius:50%;margin:0 auto 20px;
    border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
    font-size:30px;font-weight:600;letter-spacing:1px;overflow:hidden;
  }
  .avatar img{width:100%;height:100%;object-fit:cover}
  h1{font-size:24px;font-weight:600;letter-spacing:-0.02em}
  .intro{color:var(--muted);font-size:15px;margin-top:10px;max-width:400px;margin-inline:auto}

  .cta{
    display:block;text-align:center;text-decoration:none;
    background:var(--fg);color:var(--bg);
    padding:16px;border-radius:12px;font-weight:600;font-size:16px;margin:24px 0 6px;
    transition:opacity .15s ease;
  }
  /* Abstand sitzt auf der Notiz, nicht auf dem Knopf: .result .cta setzt den unteren
     Rand auf 0, sonst klebte die Notiz im Ergebniskasten des Schlaf-Checks am Knopf. */
  .cta-note{text-align:center;color:var(--muted);font-size:13px;margin-top:14px;margin-bottom:8px}

  /* SkillLoop — eigener Block */
  .feature{
    position:relative;
    display:flex;gap:14px;align-items:flex-start;
    text-decoration:none;color:var(--fg);
    border:1.5px solid var(--fg);border-radius:16px;
    padding:18px;margin-top:30px;
    transition:background .15s ease,color .15s ease,transform .1s ease;
  }
  .feature .ico svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round;display:block}
  .feature .body{flex:1;min-width:0}
  .feature .t{display:block;font-weight:700;font-size:17px;letter-spacing:-0.01em}
  .feature .d{display:block;color:var(--muted);font-size:13.5px;margin-top:3px}
  .feature .arrow{font-size:18px;opacity:.4;align-self:center}

  /* Gruppen */
  .group{margin-top:34px}
  .group-head{display:flex;align-items:baseline;gap:10px;margin:0 4px 14px;flex-wrap:wrap}
  .group-head .label{
    font-size:12px;text-transform:uppercase;letter-spacing:.14em;
    color:var(--fg);font-weight:700;
  }
  .group-head .sub{color:var(--muted);font-size:12px}

  /* Kacheln */
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .grid .full{grid-column:1 / -1}
  .tile{
    display:flex;flex-direction:column;gap:12px;
    text-decoration:none;color:var(--fg);text-align:left;
    border:1px solid var(--line);border-radius:14px;
    padding:16px;min-height:112px;background:none;font:inherit;cursor:pointer;
    position:relative;
    transition:background .15s ease,color .15s ease,transform .1s ease;
  }
  .tile .ico{width:26px;height:26px}
  .tile .ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round}
  /* Kein margin-top:auto — sonst kleben Titel und Unterzeile am unteren Rand und
     der Abstand zum Icon hängt davon ab, wie lang der Nachbartext ist. */
  /* Kein margin-top:auto — sonst hängt der Abstand zum Icon davon ab, wie lang der
     Text in der Nachbarkachel ist. Auch keine min-height: Die reservierte zweite
     Zeile zog die Seite auseinander (01.09.2026 verworfen). Bricht ein Titel um,
     rutscht die Unterzeile dieser einen Kachel mit — das ist so hingenommen. */
  .tile .t{font-weight:600;font-size:15.5px;line-height:1.25}
  .tile .d{color:var(--muted);font-size:12.5px;line-height:1.35}
  /* Badge sitzt in der oberen rechten Ecke der Kachel, nicht am Titel.
     Im Titel würde es die Zeile umbrechen und die Kachel höher machen als ihre
     Nachbarin — auf dem Handy der Normalfall. Siehe HANDOFF.md. */
  .badge{
    position:absolute;top:12px;right:12px;
    /* Kein text-transform:uppercase — sonst wird aus „iOS App" ein „IOS APP".
       Die Schreibweise steht deshalb im Text selbst. */
    font-size:10px;font-weight:700;letter-spacing:.06em;
    border:1px solid currentColor;border-radius:5px;padding:1px 5px;opacity:.6;
    pointer-events:none;
  }

  /* Panel */
  dialog.panel{
    border:none;padding:0;background:transparent;max-width:560px;width:100%;
    margin:auto auto 0;color:var(--fg);
  }
  dialog.panel::backdrop{background:var(--veil)}
  .panel-inner{
    background:var(--bg);border:1px solid var(--line);
    border-radius:18px 18px 0 0;padding:26px 22px 32px;
    max-height:88vh;overflow-y:auto;outline:none;
  }
  .panel-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
  .panel-head h2{font-size:20px;font-weight:600;letter-spacing:-0.01em;flex:1}
  .panel-close{
    background:none;border:1px solid var(--line);border-radius:50%;
    width:32px;height:32px;font-size:16px;line-height:1;cursor:pointer;
    color:var(--fg);flex:none;
  }
  .panel-body p{margin-bottom:12px;font-size:15px}
  .panel-body img{width:100%;border-radius:10px;border:1px solid var(--line);margin:10px 0}
  .panel-body .embed{position:relative;padding-bottom:56.25%;height:0;margin:12px 0}
  .panel-body .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:10px}
  .todo{
    border:1px dashed var(--line);border-radius:10px;padding:12px;
    color:var(--muted);font-size:13.5px;
  }
  .todo b{color:var(--fg)}

  @media (min-width:600px){
    dialog.panel{margin:auto}
    .panel-inner{border-radius:18px}
  }

  footer{text-align:center;margin-top:44px;color:var(--muted);font-size:13px}
  footer a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
  .imprint{margin-top:8px;font-size:12px;opacity:.7}
  /* Claim im Fuß der Startseite */
  .claim{font-size:15px;font-weight:600;color:var(--fg);letter-spacing:-0.01em;margin-bottom:14px}

/* ===== Unterseiten (golf, schlafcoach) ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.back{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--muted);text-decoration:none;font-size:13px;
}
.page h1{font-size:27px;line-height:1.2;margin-bottom:12px}
.page .kicker{
  font-size:12px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);font-weight:700;margin-bottom:10px;
}
.page .lead{font-size:16px;color:var(--muted);margin-bottom:8px}
.page section{margin-top:36px}
.page h2{font-size:18px;font-weight:600;margin-bottom:12px;letter-spacing:-0.01em}
.page p{margin-bottom:12px;font-size:15px}
.page ul{list-style:none;margin-bottom:12px}
.page li{
  position:relative;padding-left:20px;margin-bottom:8px;font-size:15px;
}
.page li::before{content:"";position:absolute;left:4px;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--muted)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{border:1px solid var(--line);border-radius:14px;padding:14px}
.card .n{font-weight:600;font-size:15px}
.card .m{color:var(--muted);font-size:12.5px;margin-top:3px}
.places{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.place{
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  font-size:13px;font-weight:600;
}
@media (max-width:420px){ .cards{grid-template-columns:1fr} }

.page p a, .panel-body a{
  color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--muted);
}

/* ===== Schlafcoaching: Belege, Check, Ablauf ===== */
.proof{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:22px 0 0}
.proof li{
  position:relative;padding:10px 12px 10px 30px;font-size:13px;
  border:1px solid var(--line);border-radius:10px;margin:0;
}
.proof li::before{
  content:"✓";position:absolute;left:11px;top:9px;
  background:none;width:auto;height:auto;border-radius:0;
  font-size:13px;color:var(--fg);
}
.q{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.q:first-child{border-top:none;padding-top:0;margin-top:0}
.qn{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:6px}
.qt{font-weight:600;margin-bottom:10px}
.opt{
  display:block;width:100%;text-align:left;font:inherit;font-size:14.5px;
  background:none;color:var(--fg);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;margin-bottom:7px;cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.opt.on{background:var(--hover);color:var(--hover-fg);border-color:var(--hover)}
.result{border:1px solid var(--fg);border-radius:14px;padding:18px;margin-top:22px}
.result .rtitle{font-weight:700;font-size:17px;margin-bottom:6px}
.result .cta{margin-bottom:0}
.steps{list-style:none;counter-reset:s}
.steps li{
  counter-increment:s;position:relative;padding-left:34px;margin-bottom:14px;font-size:15px;
}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:0;
  width:24px;height:24px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:none;
}
.disclaimer{font-size:11.5px;line-height:1.45;margin-top:14px;opacity:.75;text-align:left}
@media (max-width:420px){ .proof{grid-template-columns:1fr} }

/* ===== Rechtstexte ===== */
.legal h1{font-size:24px}
.legal section{margin-top:28px}
.legal h2{font-size:16px}
.legal p, .legal li{font-size:14.5px;line-height:1.6}
.legal ul{margin-bottom:12px}
.legal li{padding-left:18px}
.legal li::before{top:8px;width:4px;height:4px}
.legal footer{margin-top:40px;display:flex;flex-direction:column;gap:6px}
.legal footer a{color:var(--muted)}
.legal-links{margin-top:6px;font-size:12.5px}
.legal-links a{color:var(--muted)}

/* Screenshots im Panel: nebeneinander statt seitenfüllend */
.panel-body .shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.panel-body .shots figure{margin:0}
.panel-body .shots img{margin:0;display:block}
.panel-body .shots figcaption{
  color:var(--muted);font-size:11.5px;text-align:center;margin-top:5px;
}
.panel-body .hinweis{color:var(--muted);font-size:12.5px;margin-top:-6px}
/* Auszug aus dem Manuskript — abgesetzt, damit man Zitat und Fliesstext trennt */
.panel-body .auszug{
  border-left:3px solid var(--line,#ddd);
  padding:2px 0 2px 14px;
  margin:14px 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}
.feature-head{margin-top:34px;margin-bottom:14px}
.feature-head + .feature{margin-top:0}

/* ===== Hover nur für echte Zeigegeräte =====
   Auf dem Handy löst schon das Scrollen den Hover-Zustand aus. Die Kachel springt auf
   schwarz und bleibt so stehen, bis man woanders hintippt — mal diese, mal jene. Deshalb
   hängen ALLE Hover-Regeln hier drin. Neue Hover-Regeln gehören ebenfalls hierher.
   Rückmeldung beim Antippen liefert stattdessen :active weiter unten. */
@media (hover: hover) and (pointer: fine) {
  .langbar button:hover{background:var(--hover);color:var(--hover-fg);border-color:var(--hover)}
  .cta:hover{opacity:.85}
  .feature:hover{background:var(--hover);color:var(--hover-fg);transform:translateY(-2px)}
  .feature:hover .d{color:var(--hover-fg);opacity:.8}
  .tile:hover{background:var(--hover);color:var(--hover-fg);transform:translateY(-2px)}
  .tile:hover .d{color:var(--hover-fg);opacity:.75}
  .panel-close:hover{background:var(--hover);color:var(--hover-fg)}
  .back:hover{color:var(--fg)}
  .page p a:hover, .panel-body a:hover{text-decoration-color:var(--fg)}
  .opt:hover{border-color:var(--fg)}
}

/* ===== Rückmeldung beim Antippen =====
   Gilt auf allen Geräten, ist an den Finger gebunden und bleibt deshalb nicht hängen. */
.tile:active, .feature:active{
  background:var(--hover);color:var(--hover-fg);transform:translateY(0);
}
.tile:active .d, .feature:active .d{color:var(--hover-fg);opacity:.8}
.cta:active{opacity:.85}