/* ========================================================
   Praxis-Website · Gemeinschaftspraxis Dr. Friedrich | Dr. Dräger
   Gemeinsames Stylesheet — abgeleitet aus dem Praxislogo
   ======================================================== */
/* Cormorant Garamond - Normal (enthält alle Stärken) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700; /* Unterstützt stufenlos alles von 300 bis 700 */
  src: url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
}

/* Cormorant Garamond - Kursiv (Italic) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  src: url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
}

/* Outfit - Normal (enthält alle Stärken) */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900; /* Unterstützt das komplette Spektrum */
  src: url('fonts/Outfit-VariableFont_wght.ttf') format('truetype');
}

:root{
  --tief:#195361; --tief-dark:#0F3A45;
  --k1:#5F8B98; --k2:#65A0B0; --k3:#A0C5CE; --k4:#CADDE3;
  --nebel:#E8EFF1; --papier:#FBFCFC; --linie:#D5E0E3;
  --text:#2C3E43; --leise:#7C9298;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Outfit',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--text);background:var(--papier);
  line-height:1.65;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1140px;margin:0 auto;padding:0 32px;}

/* ===== Navigation ===== */
nav{position:sticky;top:0;z-index:50;background:rgba(251,252,252,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linie);}
.nav-in{display:flex;justify-content:space-between;align-items:center;padding:15px 0;}
.nav-brand{display:flex;align-items:center;gap:12px;}
.nav-brand .nm{font-family:var(--serif);font-weight:600;font-size:1.02rem;
  color:var(--tief);line-height:1.15;}
.nav-links{display:flex;gap:26px;align-items:center;font-size:.9rem;color:var(--text);}
.nav-links a{transition:.2s;padding-bottom:2px;border-bottom:2px solid transparent;}
.nav-links a:hover{color:var(--k2);}
.nav-links a.active{color:var(--tief);border-bottom-color:var(--k2);font-weight:500;}
.nav-cta{background:var(--tief);color:#fff !important;padding:10px 20px;
  border-radius:999px;font-size:.85rem;font-weight:500;transition:.22s;border:none;}
.nav-cta:hover{background:var(--tief-dark);transform:translateY(-1px);}

/* ===== Burger / Mobile-Toggle ===== */
.nav-toggle{display:none;}
.burger{display:none;cursor:pointer;padding:10px;margin:-10px;
  background:transparent;border:none;}
.burger span{display:block;width:24px;height:2px;background:var(--tief);
  margin:5px 0;transition:transform .3s, opacity .25s;border-radius:2px;}

/* ===== Logo-Kachel-Helfer ===== */
.tile{display:inline-block;}

/* ===== Page-Header (Unterseiten) ===== */
.page-hero{
  background:
    radial-gradient(620px 320px at 88% -20%, rgba(101,160,176,.20), transparent 62%),
    radial-gradient(440px 300px at 0% 120%, rgba(160,197,206,.26), transparent 60%),
    var(--nebel);
  padding:64px 0 58px;border-bottom:1px solid var(--linie);
}
.page-hero .kick{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--k2);font-weight:600;margin-bottom:14px;
  display:flex;align-items:center;gap:12px;}
.page-hero .kick::before{content:"";width:26px;height:2px;background:var(--k2);}
.page-hero h1{font-family:var(--serif);font-weight:500;font-size:3rem;
  color:var(--tief);line-height:1.1;letter-spacing:-.012em;}
.page-hero p{color:var(--leise);font-size:1.05rem;margin-top:12px;max-width:560px;}

/* ===== Allgemeine Sektionen ===== */
section{padding:78px 0;}
.sec-head{text-align:center;max-width:580px;margin:0 auto 48px;}
.sec-head .kick{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--k2);font-weight:600;margin-bottom:12px;}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:2.5rem;
  color:var(--tief);line-height:1.14;letter-spacing:-.01em;margin-bottom:10px;}
.sec-head p{color:var(--leise);font-size:1.01rem;}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:.95rem;
  padding:14px 28px;border-radius:999px;transition:.22s;}
.btn-primary{background:var(--tief);color:#fff;}
.btn-primary:hover{background:var(--tief-dark);transform:translateY(-2px);
  box-shadow:0 14px 28px -14px rgba(25,83,97,.6);}
.btn-ghost{background:transparent;color:var(--tief);border:1.5px solid var(--linie);}
.btn-ghost:hover{border-color:var(--k2);background:#fff;}
.btn-light{background:#fff;color:var(--tief);}
.btn-light:hover{background:var(--k4);transform:translateY(-2px);}

/* ===== Footer ===== */
footer{background:var(--tief-dark);color:#9FC0C7;padding:46px 0 38px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1);}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.foot-brand .fn{font-family:var(--serif);color:#fff;font-size:1.05rem;font-weight:600;}
.foot-col h4{color:#fff;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:14px;font-weight:600;}
.foot-col a,.foot-col p{font-size:.88rem;line-height:1.95;color:#9FC0C7;}
.foot-col a:hover{color:var(--k3);}
.foot-bottom{padding-top:22px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;font-size:.78rem;color:#6E9097;}
.foot-bottom a{margin-left:18px;}
.foot-bottom a:hover{color:var(--k3);}

/* ===== Responsiv ===== */
@media(max-width:880px){
  .wrap{padding:0 22px;}

  /* Navigation: Burger-Menü */
  .nav-in{padding:13px 0;}
  .nav-brand .nm{font-size:.92rem;}
  .burger{display:block;}
  .nav-links{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(251,252,252,.98);
    backdrop-filter:blur(12px);
    padding:14px 22px 22px;
    border-bottom:1px solid var(--linie);
    box-shadow:0 22px 36px -24px rgba(25,83,97,.32);
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .28s ease, opacity .22s ease, visibility 0s linear .28s;
  }
  .nav-links a{
    padding:14px 4px;
    border-bottom:1px solid var(--linie);
    font-size:1rem;
  }
  .nav-links a:last-child{border-bottom:none;}
  .nav-links a.active{border-bottom-color:var(--linie);}
  .nav-cta{
    margin-top:12px;text-align:center;
    border-radius:14px;padding:14px 20px;
    border-bottom:none !important;
  }
  .nav-toggle:checked ~ .nav-links{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:transform .28s ease, opacity .22s ease, visibility 0s linear 0s;
  }
  .nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle:checked ~ .burger span:nth-child(2){opacity:0;}
  .nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* Inhalte */
  .page-hero{padding:46px 0 42px;}
  .page-hero h1{font-size:2.1rem;}
  .page-hero p{font-size:.98rem;}
  section{padding:58px 0;}
  .sec-head{margin-bottom:36px;}
  .sec-head h2{font-size:1.9rem;}
  .btn{padding:13px 24px;font-size:.92rem;}

  /* Footer */
  .foot-grid{grid-template-columns:1fr;gap:26px;}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:6px;}
  .foot-bottom a{margin-left:0;margin-right:18px;}
}

@media(max-width:560px){
  .wrap{padding:0 18px;}
  .nav-brand .nm{display:none;}
  .page-hero{padding:38px 0 34px;}
  .page-hero h1{font-size:1.75rem;}
  .page-hero .kick{font-size:.7rem;letter-spacing:.22em;}
  .sec-head h2{font-size:1.6rem;}
  section{padding:48px 0;}
  .btn{width:100%;justify-content:center;}
}