/* Visitenkarte homburgresearch – Aussehen.
 * Eigenständig, kein gemeinsamer Code mit der App. Farben, Schriften und Ecken nur aus design/colors.css. */
* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); color: var(--text);
       font-family: var(--font); -webkit-font-smoothing: antialiased; color-scheme: dark; }
a { color: var(--accent); text-decoration: none; }
a:hover { filter: brightness(1.2); }   /* kein Unterstrich */

/* Symbole: SVG-Dateien aus assets/icons/ als Maske, Farbe kommt von currentColor (wie in der App) */
.icon { display: block; flex: none; background: currentColor;
        -webkit-mask: var(--bild) center / contain no-repeat; mask: var(--bild) center / contain no-repeat; }
.i-anmelden  { --bild: url("../assets/icons/anmelden.svg"); }
.i-chart     { --bild: url("../assets/icons/chart.svg"); }
.i-statistik { --bild: url("../assets/icons/statistik.svg"); }
.i-pruefen   { --bild: url("../assets/icons/pruefen.svg"); }

/* ---------- Kopfzeile ---------- */
header { flex: none; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--rand); }
.marke { font-family: var(--font-marke); font-size: 20px; font-weight: 600; letter-spacing: -.4px; line-height: 1; color: var(--accent); }
/* Login führt nur zur App-Adresse; dort fragt der Türsteher (Passkey/Face ID) – die Seite selbst kennt keinen Login */
.login { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px; border-radius: var(--ecke-knopf);
         border: 1px solid var(--accent); background: none; color: var(--accent); font-size: 14px; font-weight: 600; }
.login:hover { background: var(--accent-hauch); filter: none; }   /* nur Rahmen, keine Füllfarbe */
.login .icon { width: 16px; height: 16px; }

/* ---------- Inhalt: volle Breite; nur die Fließtexte oben behalten ihre Lesebreite ---------- */
main { flex: 1; width: 100%; padding: 0 var(--rand); }
.kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--sperrung); color: var(--accent); }

/* ---------- Startseite ---------- */
.held { padding: clamp(64px, 12vh, 130px) 0 60px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.held h1 { margin-top: 20px; max-width: 820px; font-size: clamp(28px, 9vw, 62px); font-weight: 700;
           letter-spacing: var(--eng); line-height: 1.04; color: var(--text-hell); text-wrap: balance; }
.held h1 span { display: block; white-space: nowrap; }   /* immer zwei Zeilen, ein Satz je Zeile; Größe wächst mit der Breite */
.held p { margin-top: 24px; max-width: 720px; font-size: 17px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
/* immer gleichmäßig: drei nebeneinander oder alle untereinander – nie 2 + 1 */
.kacheln { display: grid; grid-template-columns: 1fr; gap: var(--luecke); padding-bottom: 72px; text-align: center; }
@media (min-width: 960px) { .kacheln { grid-template-columns: repeat(3, 1fr); } }
.kachel { padding: 30px 26px; border: 1px solid var(--line); border-radius: var(--ecke-kasten); background: var(--panel);
          /* Raster der Nachbarkacheln übernehmen: Symbol, Überschrift und Text stehen in allen drei auf gleicher Höhe,
             auch wenn eine Überschrift zweizeilig umbricht */
          display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px;
          justify-items: center; align-content: start; }
.symbol { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--ecke-knopf);
          background: var(--accent-flaeche); color: var(--accent); }
.symbol .icon { width: 22px; height: 22px; }
.kachel h2 { align-self: end; font-size: 18px; font-weight: 700; color: var(--text-hell); }
.kachel p { font-size: 14px; line-height: 1.75; color: var(--muted); text-wrap: pretty; }

/* ---------- Impressum ---------- */
.recht { padding-top: clamp(40px, 8vh, 80px); padding-bottom: 64px; }
.recht h1 { margin-top: 16px; font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: var(--eng); line-height: 1.1; color: var(--text-hell); }
.recht > p { margin-top: 14px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.felder { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--luecke); align-items: stretch; }
.spalte { display: flex; flex-direction: column; gap: var(--luecke); }
.spalte .feld:last-child { flex: 1; }
.feld { padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--ecke-kasten); background: var(--panel); }
.feld h2 { margin-bottom: 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: var(--sperrung); color: var(--accent); }
.feld p { font-size: 15px; line-height: 1.75; color: var(--text); text-wrap: pretty; }
.feld p + p { margin-top: 14px; }

/* ---------- Fußzeile ---------- */
footer { padding: 22px var(--rand); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
         font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* Unter 960 px: quadratischer Symbolknopf, Beschriftung bleibt zugänglich. */
@media (width < 960px) {
  .login { position: relative; flex: none; width: 36px; height: 36px; padding: 0; gap: 0; justify-content: center; }
  .login-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* sehr kleine Handys (unter 360 px): bisherige Logo-Verkleinerung erhalten */
@media (max-width: 359px) { .marke { font-size: 18px; } }