/* ==========================================================================
   Praxis Kattan — Art Direction "Ruhiger Sprechstundenraum"
   GetAlwin Design System 3.0 · additive Redesign-Schicht
   --------------------------------------------------------------------------
   Wird NACH style.css geladen. Ändert ausschließlich Darstellung.
   Keine Formularfelder, keine Endpunkte, keine Links, keine medizinischen
   oder rechtlichen Texte, keine Kontaktdaten, keine Sprechzeiten.

   Abkehr vom Ausgangsstand:
   - Kaltes Blau-Weiß mit großen Radien und weichen Schatten wirkt nah an
     einer SaaS-Vorlage und teilt die Formsprache mit den Schwesterseiten.
   - Inter + Plus Jakarta Sans (beide AI-Default-Watchlist) -> Fira Sans,
     humanistisch, für Patientinnen und Patienten jeden Alters gut lesbar.
   Signatur: warmes Papier + ruhige Rechtecke + eine einzige klare Blaukante.
   Vertrauen entsteht hier durch Lesbarkeit, nicht durch Effekte.
   ========================================================================== */

@font-face{font-family:'Fira Sans';src:url('fonts-new/FiraSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts-new/FiraSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts-new/FiraSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fira Sans';src:url('fonts-new/FiraSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Warmes Papier statt kühlem Blauweiß — ruhiger, weniger klinisch */
  --bg:#FCFBF9;
  --bg-soft:#F2F0EA;
  --ink:#16233C;
  --ink-soft:#3A4459;
  --muted:#616B80;
  --line:#DDD9D0;

  /* Marken-Blau bleibt erhalten, nur kontrastsicher justiert */
  --blue:#1B54D6;
  --blue-2:#2D6FE8;
  --blue-deep:#123FA8;
  --green:#0E8A57;
  --green-deep:#0A6B43;

  --radius:4px;
  --radius-lg:6px;
  --sh-1:none;
  --sh-2:none;

  --sans:'Fira Sans',ui-sans-serif,system-ui,sans-serif;
}

body{font-family:var(--sans);font-size:17.5px;line-height:1.7;background:var(--bg);color:var(--ink-soft)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:600;letter-spacing:-.014em;line-height:1.16;color:var(--ink)}
.hero h1{font-size:clamp(36px,4.6vw,56px);font-weight:600}
p{font-size:inherit}

/* Flächen beruhigen: Kanten statt Schatten, kleine Radien statt Pillen */
.card,.ccard,.form-card,.svc-split .media,.split .media,.gcard,.vac-note,.foot-emg,
.page-hero.has-image,.hero-photo-bg,.tcard{
  border-radius:var(--radius)!important;box-shadow:none!important
}
.card,.ccard,.form-card,.tcard{border:1px solid var(--line);background:#fff}
.btn,.term-btn,.field input,.field select,.field textarea,
.hero .badge,.vac-hint,.vac-note,.emg,.foot-emg,.eyebrow,.gal-arrows button,.to-top,.card .ic,.ccard .ic{
  border-radius:var(--radius)!important;box-shadow:none!important
}
.wa-float{border-radius:50%!important}
.vac-hint,.hero .badge{border:1px solid var(--line);background:#fff;font-weight:500}
.term-btn{min-height:46px;font-weight:600;font-size:15px}

/* Consent-Banner: ruhig und lesbar, Funktion unverändert */
[class*="consent"]{border-radius:var(--radius)!important;box-shadow:none!important;border:1px solid var(--line)}
[class*="consent"] button{border-radius:var(--radius)!important}

/* --- Eyebrow: ruhige Marke ---------------------------------------------- */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--blue)}
.eyebrow::before{background:var(--blue);width:30px;height:1px}

/* --- Hero ---------------------------------------------------------------- */
.hero{background:linear-gradient(180deg,var(--bg-soft),var(--bg))}
.hero .badge{border-radius:var(--radius);border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.hero .sub,.lead{color:var(--ink-soft)}

/* --- Karten: sachlich, ohne Bewegung ------------------------------------ */
.card{padding:26px 24px;transition:border-color .25s var(--ease)}
.card:hover{transform:none;border-color:var(--blue)}
.card .ic{border-radius:var(--radius);background:var(--bg-soft);color:var(--blue);border:1px solid var(--line)}
.card h3{font-size:19.5px;margin-bottom:7px}
.card p{font-size:16px;color:var(--muted)}

/* --- Kontaktwege: klar und groß antippbar ------------------------------- */
.ccard{padding:20px}
.ccard .lbl{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.ccard .val{font-size:18px;font-weight:600;color:var(--ink)}
.ccard:hover{transform:none;border-color:var(--blue)}

/* --- Buttons: ein klarer Primärweg -------------------------------------- */
.btn{font-weight:600;letter-spacing:.005em;min-height:50px;font-size:16px}
.btn-primary,.btn-submit,.term-btn{background:var(--blue);color:#fff;border:1px solid var(--blue)}
.btn-primary:hover,.btn-submit:hover,.term-btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);transform:none}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}

/* --- Formulare: maximale Klarheit --------------------------------------- */
.form-card{padding:30px 28px}
.field label{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:0;text-transform:none}
.field input,.field select,.field textarea{
  border:1px solid #C9C4B9;background:#fff;font-family:var(--sans);font-size:17px;color:var(--ink);padding:13px 14px
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue);outline:2px solid rgba(27,84,214,.32);outline-offset:1px
}
.field input::placeholder,.field textarea::placeholder{color:#8A8577}

/* --- Notfall bleibt sofort erkennbar ------------------------------------ */
.emg,.foot-emg{border-radius:var(--radius)!important;font-weight:600}

/* --- Kopf/Fuß ------------------------------------------------------------ */
.site-header{background:rgba(252,251,249,.94);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(10px)}
.nav a{font-size:15px;font-weight:500}
.nav a::after{background:var(--blue)}
.nav a:hover,.nav a.active{color:var(--blue)}
.hc-line{font-size:14.5px;font-weight:500}
.footer{background:var(--ink)}
.footer h5{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.scroll-progress{background:var(--blue);height:3px}

/* --- Rechtliche Seiten: reine Lesetypografie ---------------------------- */
.legal{max-width:74ch}
.legal p,.legal li{font-size:17px;line-height:1.75}
.legal h2{font-size:23px;margin-top:1.8em}

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (max-width:1024px){
  body{font-size:17px}
  .card{padding:22px 20px}
}

/* ==========================================================================
   MOBIL — eigenständige Komposition
   Ältere Patientinnen und Patienten: größere Schrift, große Touchziele,
   Kontaktweg zuerst, keine dekorative Bewegung.
   ========================================================================== */
@media (max-width:760px){
  body{font-size:17px;line-height:1.72}
  .hero h1{font-size:clamp(30px,8.6vw,38px)}
  .hero .badge{font-size:11.5px}

  /* Leistungen: ruhige Zeilen statt neun gleicher Karten */
  .card{padding:16px 0;border:0;border-bottom:1px solid var(--line);background:transparent;
    display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;border-radius:0!important}
  .card:hover{border-color:var(--line)}
  .card .ic{width:38px;height:38px;margin:0}
  .card h3{font-size:18px;margin:0 0 4px}
  .card p{font-size:16px;margin:0}

  /* Kontakt: ganze Zeile ist ein großes Ziel */
  .ccard{padding:16px 14px;min-height:66px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
  .ccard .val{font-size:17.5px}

  /* Formular: großzügige Felder, ein Weg */
  .form-card{padding:20px 16px}
  .field input,.field select,.field textarea{font-size:17px;padding:15px 14px}
  .btn{width:100%;justify-content:center;min-height:54px;font-size:16.5px}

  .legal p,.legal li{font-size:16.5px}
  .footer h5{font-size:11.5px}
}