/* =========================================================
   Praxis Schneider · WARM & HELL (v2)
   Overrides für styles.css — freundlicher, heller, einladender.
   Nur auf der Startseite verlinkt; klassische Version bleibt unberührt.
   ========================================================= */

:root {
  /* --- Hellere, etwas wärmere Flächen --- */
  --bg:        oklch(0.995 0.003 95);    /* warmes Weiß */
  --bg-soft:   oklch(0.983 0.013 80);    /* sehr helle Creme — Wärme */
  --bg-mint:   oklch(0.970 0.022 178);   /* helles, frisches Mint */
  --bg-warm:   oklch(0.968 0.024 70);    /* warmer Sand-Ton */

  /* --- Petrol/Teal etwas frischer & freundlicher --- */
  --petrol:        oklch(0.515 0.072 205);
  --teal:          oklch(0.665 0.098 190);
  --teal-soft:     oklch(0.790 0.070 186);
  --mint:          oklch(0.890 0.050 178);

  /* --- Warmer Sonnen-Akzent (Freundlichkeit) --- */
  --amber:      oklch(0.800 0.115 72);
  --amber-deep: oklch(0.610 0.115 60);
  --sun-soft:   oklch(0.945 0.045 75);

  /* --- Weichere, freundlichere Rundungen --- */
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Etwas weicheres Schatten-Set */
  --shadow-sm: 0 1px 2px rgba(28,68,78,.04), 0 2px 6px rgba(28,68,78,.05);
  --shadow-md: 0 8px 24px rgba(28,68,78,.07);
  --shadow-lg: 0 20px 50px rgba(28,68,78,.10);
}

/* ---------------------------------------------------------
   HERO — heller Verlauf, wärmerer Bild-Übergang
   --------------------------------------------------------- */
.hero-photo::after {
  background:
    linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,.40) 6%, rgba(255,255,255,0) 15%),
    linear-gradient(0deg, #fbf7f1 0%, rgba(251,247,241,0) 16%);
}
.hero-trust-strip { background: linear-gradient(180deg, var(--bg-mint), var(--bg-warm)); }
.hts-ic { box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------
   ALTERNIERENDE FLÄCHEN — warm/kühl im Wechsel
   --------------------------------------------------------- */
.bg-soft { background: var(--bg-warm); }   /* Schwerpunkte: warmer Sand */
.bg-mint { background: var(--bg-mint); }

/* ---------------------------------------------------------
   TRUST-BAND — von dunkel zu HELL (größter "heller"-Hebel)
   --------------------------------------------------------- */
.trust-band {
  background: linear-gradient(180deg, var(--bg-mint), var(--bg) 90%);
  color: var(--ink-soft);
  border-block: 1px solid var(--line);
}
.trust-band h2 { color: var(--petrol-ink); }
.trust-band .lead { color: var(--ink-soft); }
.trust-band .kicker.on-dark { color: var(--petrol); }
.trust-band .kicker.on-dark::before { background: var(--teal); }

.cert {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.cert .ic {
  background: var(--bg-mint);
  color: var(--petrol);
  border-radius: 12px;
}
.cert h3 { color: var(--petrol-ink); }
.cert p { color: var(--ink-soft); }

.logo-strip { border-top: 1.5px solid var(--line); }
.logo-strip .lbl { color: var(--petrol); }

/* ---------------------------------------------------------
   FREUNDLICHERE ICON-KACHELN — runder, warm-tonig im Wechsel
   --------------------------------------------------------- */
.svc .ic,
.fact .ic,
.qcard .ic,
.contact-line .ic,
.acc-head .ic {
  border-radius: 14px;
}

/* Schwerpunkt-Karten: weiche, runde Icon-Scheibe */
.schwer-card .ic {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg-mint);
  color: var(--petrol);
  display: grid; place-items: center;
  margin-bottom: 18px;
  transition: background .2s ease, color .2s ease;
}
.schwer-card .ic svg { width: 28px; height: 28px; }
.schwer-card:hover .ic { background: var(--teal); color: #fff; }
.schwer-card h3 { font-size: 20px; }
.schwer-card p { font-size: 15px; line-height: 1.55; }

/* Erste Schwerpunkt-Karte bekommt einen warmen Sonnen-Akzent */
.schwer-card:nth-of-type(2) .ic { background: var(--sun-soft); color: var(--amber-deep); }
.schwer-card:nth-of-type(2):hover .ic { background: var(--amber); color: #fff; }

/* ---------------------------------------------------------
   WELCOME-FAKTEN — etwas freundlicher
   --------------------------------------------------------- */
.fact .ic { background: var(--bg-mint); }
.fact:nth-child(2) .ic { background: var(--sun-soft); color: var(--amber-deep); }

/* Leitbild-Block heller & wärmer */
.leitbild { background: linear-gradient(135deg, var(--bg-mint), var(--bg-warm)); }

/* ---------------------------------------------------------
   BUTTONS — eine Spur weicher
   --------------------------------------------------------- */
.btn { border-radius: 10px; }

/* ---------------------------------------------------------
   UTILITY-BAR — minimal heller/freundlicher
   --------------------------------------------------------- */
.utility { background: var(--petrol); }

/* ---------------------------------------------------------
   HERO-EYEBROW & KICKER — warmer Doppelklang erlaubt
   --------------------------------------------------------- */
.hero-eyebrow { color: var(--petrol); }

/* ---------------------------------------------------------
   MARKE — schlichte Wortmarke, "Praxis an der Lohstraße"
   Sachlich & klar (entschnörkelt), kleiner Strich-Akzent.
   --------------------------------------------------------- */
.brand { gap: 13px; }
.brand-mark {
  width: 30px; height: 4px; border-radius: 2px;
  background: var(--teal);
}
.brand-name {
  font-family: var(--sans);
  font-weight: 800; font-size: 15.5px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--petrol-ink); white-space: nowrap;
}
.brand-sub {
  font-family: var(--sans);
  font-weight: 600; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: var(--teal-soft); }

@media (max-width: 420px) {
  .brand-name { font-size: 13.5px; letter-spacing: .03em; }
  .brand-sub { font-size: 9px; letter-spacing: .08em; }
  .brand-mark { width: 22px; }
}

/* ---------------------------------------------------------
   NOTFALL-KARTE (Startseite Sidebar) — dezent, aber sichtbar
   --------------------------------------------------------- */
.side-card.notfall-soft {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  padding: 22px 24px;
}
.notfall-soft .nf-title {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--serif); font-weight: 600; font-size: 18px;
  color: var(--petrol-ink); margin: 0 0 6px;
}
.notfall-soft .nf-title svg { width: 20px; height: 20px; color: var(--coral); flex: none; }
.notfall-soft .nf-note { font-size: 13.5px; color: var(--ink-faint); margin: 0 0 12px; }
.notfall-soft .nf-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--line-soft);
}
.notfall-soft .nf-k { font-size: 13.5px; color: var(--ink-soft); line-height: 1.3; max-width: 58%; }
.notfall-soft .nf-v {
  font-family: var(--serif); font-weight: 700; font-size: 19px;
  color: var(--coral); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.notfall-soft .nf-emergency {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; padding: 10px 14px;
  background: var(--coral-soft); border-radius: 10px;
  font-size: 14px; font-weight: 700; color: var(--coral);
}
.notfall-soft .nf-emergency svg { width: 17px; height: 17px; flex: none; }

/* ---------------------------------------------------------
   MOBILE HEADER — kompakter, sauberes Logo (Strich-Akzent weg)
   --------------------------------------------------------- */
@media (max-width: 820px) {
  .nav { min-height: 60px; gap: 12px; }
  .brand-mark { display: none; }          /* schwebenden Strich auf Mobil entfernen */
  .brand-name { font-size: 15.5px; letter-spacing: .03em; }
  .brand-sub { font-size: 9.5px; letter-spacing: .12em; }
  .nav-toggle { width: 44px; height: 44px; }
}
@media (max-width: 380px) {
  .brand-name { font-size: 13.5px; }
  .brand-sub { font-size: 8.5px; letter-spacing: .09em; }
  .container { padding-inline: 16px; }
  .utility { font-size: 13px; }
}