/* Heimolo Landingpage (Closed Alpha) — Styles.
   Quelle: Claude-Design-Entwurf „Heimolo - Closed Alpha.dc.html" + Familienkompass-
   Design-System-Tokens (colors/typography/radii/shadows, Stand 2026-07).
   Fonts werden lokal gehostet (DSGVO — kein Google-Fonts-CDN); der Entwurf lud
   Material Symbols vom Google-CDN, das ist hier bewusst durch das lokale Subset
   ersetzt. Layout und Inline-Styles des Entwurfs sind unverändert übernommen —
   diese Datei liefert nur Tokens, Schriften und die Komponentenklassen. */

/* ── Fonts (lokal, variable) ─────────────────────────── */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/nunito-latin.woff2?v=f205831e38') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/nunito-sans-latin.woff2?v=f205831e38') format('woff2');
}
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('fonts/material-symbols-subset.woff2?v=f205831e38') format('woff2');
}
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'opsz' 24;
  -webkit-font-smoothing: antialiased;
}

/* ── Design-Tokens ───────────────────────────────────── */
:root {
  /* Farben (colors.css) */
  --green-50:#EBF5F0; --green-100:#C8E8DC; --green-200:#95D3BE; --green-300:#5CBEA0;
  --green-400:#34A67D; --green-500:#2D7D62; --green-600:#24654F; --green-700:#1C4E3C;
  --green-800:#133729; --green-900:#0A2018;
  --amber-50:#FEF7E8; --amber-100:#FCEBC3; --amber-200:#F9D487; --amber-300:#F7BD4E;
  --amber-400:#F5AB38; --amber-500:#F4A235; --amber-600:#D4831A; --amber-700:#A86513;
  --amber-800:#7E480D; --amber-900:#552F07;
  --coral-light:#F5A080; --coral-500:#E05C3A; --coral-dark:#C0441E;
  /* Mauve — Lumi/Emotion (Brand v3) */
  --color-emotion:#7C6597; --mauve-300:#B9A6D4; --mauve-500:#7C6597; --mauve-600:#6A5484;
  --mauve-700:#574470; --container-mauve:#EDE8F3; --on-container-mauve:#4A3A5E; --mauve-soft:rgba(124,101,151,.13);
  --neutral-50:#FAFAF8; --neutral-100:#F5F4F1; --neutral-200:#EEECEA; --neutral-300:#D8D5D1;
  --neutral-400:#B8B3AF; --neutral-500:#938E8A; --neutral-600:#726E6A; --neutral-700:#545150;
  --neutral-800:#383534; --neutral-900:#1C1B1A;
  --color-primary:var(--green-500); --color-primary-hover:var(--green-600);
  --color-primary-active:var(--green-700); --color-secondary:var(--amber-500);
  --color-accent:var(--coral-500); --color-error:#D63B2F;
  --bg-app:#EEEDE9;
  --glow-ambient:rgba(45,125,98,.12);
  --surface-card:rgba(255,255,255,.72);
  --surface-raised:#FFFFFF; --surface-solid:#FFFFFF; --surface-sunken:#E4E2DD;
  --surface-container:rgba(28,27,26,.06);
  --accent-soft:rgba(45,125,98,.12);
  --border-glass:rgba(255,255,255,.9); --border-default:rgba(28,27,26,.12);
  --border-subtle:rgba(28,27,26,.07); --divider:rgba(28,27,26,.08); --hairline:rgba(28,27,26,.06);
  --text-primary:var(--neutral-900); --text-body:var(--neutral-800);
  --text-secondary:var(--neutral-500); --text-tertiary:var(--neutral-600);
  --text-placeholder:var(--neutral-400); --text-on-primary:#FFFFFF; --text-on-accent:#FFFFFF;
  --container-primary:var(--green-100); --on-container-primary:var(--green-700);
  --container-amber:var(--amber-100); --on-container-amber:var(--amber-800);
  /* Typo (typography.css) */
  --font-heading:'Nunito','Arial Rounded MT Bold',system-ui,sans-serif;
  --font-body:'Nunito Sans','Segoe UI',system-ui,sans-serif;
  --text-button-size:15px; --text-button-tracking:.1px;
  --text-label-size:12px; --text-body-lg-size:16px;
  /* Radii (radii.css) */
  --radius-sm:12px; --radius-tile:22px; --radius-md:16px; --radius-lg:22px; --radius-xl:26px;
  --radius-pill:999px; --radius-full:999px; --radius-icon-tile:14px;
  /* Schatten/Glas (shadows.css) */
  --shadow-card:0 1px 2px rgba(28,27,26,.04),0 12px 32px -12px rgba(28,27,26,.18);
  --shadow-nav:inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(28,27,26,.06),0 18px 40px -14px rgba(28,27,26,.34);
  --shadow-float:0 2px 6px rgba(28,27,26,.05),0 24px 60px -20px rgba(28,27,26,.28);
  --focus-ring:0 0 0 3px rgba(45,125,98,.25);
  --glass-blur:24px; --glass-saturate:1.3;
  /* Motion (base) */
  --duration:.2s; --duration-fast:.12s; --ease:cubic-bezier(.4,0,.2,1);
}

/* ── Base ────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg-app); color:var(--text-body); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
a { color:var(--color-primary); text-decoration:none; }
a:hover { color:var(--color-primary-hover); }
.hm-navlink { color:var(--text-tertiary); font-family:var(--font-body); font-weight:600; font-size:15px; padding:8px 2px; transition:color .2s ease; }
.hm-navlink:hover { color:var(--color-primary); }
@keyframes hm-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@media (prefers-reduced-motion: reduce) {
  .hm-phone { animation: none !important; }
  [data-reveal] { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Sichtbarkeit der JS-gesteuerten Zustände (Menü, Overlay, Feedback).
   `!important` ist nötig, weil die aus dem Entwurf übernommenen Inline-Styles
   ein eigenes `display` mitbringen, das sonst jede Regel hier schlägt. */
[hidden] { display: none !important; }

/* Hinweis: Ohne JavaScript bliebe alles mit data-reveal auf opacity:0 stehen —
   also unsichtbar. Dagegen steht ein <noscript>-Block in der index.html. */

/* ── Komponenten (aus dem Design-System-Bundle) ──────── */
.fk-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:14px 24px; border-radius:var(--radius-md);
  font-family:var(--font-heading); font-weight:700; font-size:var(--text-button-size);
  letter-spacing:var(--text-button-tracking); line-height:1; cursor:pointer;
  transition:background var(--duration) var(--ease),color var(--duration) var(--ease),border-color var(--duration) var(--ease),transform var(--duration-fast) var(--ease);
  user-select:none; box-sizing:border-box;
}
.fk-btn--primary { background:var(--color-primary); color:var(--text-on-primary); border:none; }
.fk-btn--primary:not(:disabled):hover { background:var(--color-primary-hover); }
.fk-btn--primary:not(:disabled):active { background:var(--color-primary-active); transform:scale(.98); }
.fk-btn--secondary { background:transparent; color:var(--color-primary); border:1.5px solid var(--color-primary); }
.fk-btn--secondary:not(:disabled):hover { background:var(--accent-soft); }
.fk-btn--secondary:not(:disabled):active { transform:scale(.98); }
.fk-btn--text { background:transparent; color:var(--color-primary); border:none; min-height:48px; padding:12px 16px; }
.fk-btn--text:not(:disabled):hover { background:var(--accent-soft); }
.fk-btn--full { width:100%; }

.fk-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--container-primary); color:var(--on-container-primary); border:none;
  border-radius:var(--radius-pill); padding:7px 14px;
  font-family:var(--font-body); font-size:var(--text-label-size); font-weight:600;
  letter-spacing:.3px; cursor:pointer; transition:background var(--duration) var(--ease); line-height:1.4;
}
.fk-chip[aria-pressed="true"] { background:var(--color-primary); color:var(--text-on-primary); }

.fk-field { display:flex; flex-direction:column; gap:6px; width:100%; font-family:var(--font-body); }
.fk-field label { font-size:13px; font-weight:600; color:var(--text-tertiary); }
.fk-field .fk-field-box {
  display:flex; align-items:center; gap:10px; background:var(--surface-container);
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  padding:0 16px; min-height:54px; transition:border-color var(--duration) var(--ease); box-sizing:border-box;
}
.fk-field .fk-field-box:focus-within { border:2px solid var(--color-primary); }
.fk-field.error .fk-field-box, .fk-field.error .fk-field-box:focus-within { border:1px solid var(--color-error); }
.fk-field.error label { color:var(--color-error); }
.fk-field input {
  flex:1; border:none; outline:none; background:transparent;
  font-family:var(--font-body); font-size:var(--text-body-lg-size);
  color:var(--text-primary); padding:14px 0; min-width:0;
}
.fk-field .fk-field-msg { font-size:12px; color:var(--color-error); padding-left:2px; display:none; }
.fk-field.error .fk-field-msg { display:block; }

/* Nachrichtenfeld im Feedback-Formular (im Entwurf ein style-focus-Attribut,
   das es in echtem HTML nicht gibt). */
#fb-msg { font-family:var(--font-body); }
#fb-msg:focus { outline:none; border-color:var(--color-primary); }

/* Honeypot — für Menschen unsichtbar */
.hp-field { position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden; }

/* ── Responsive Kopfbereich ──────────────────────────────
   Ersetzt den JS-Zustand isMobile/isDesktop des Entwurfs durch Media Queries:
   kein Flackern vor dem Laden des Skripts.
   Achtung Spezifität: Diese Regeln müssen NACH `.fk-btn` stehen, sonst gewinnt
   dessen `display:inline-flex` und der Burger ist auch am Desktop sichtbar. */
.hm-burger { display:none; }
@media (max-width: 879px) {
  .hm-desktopnav { display:none !important; }
  .hm-burger { display:inline-flex; }
}