/* =========================================================================
   Hausarztpraxis Ngoune – Design 1b ("Bildstark")
   Enthält KEIN geteiltes Fremd-Design: individuelle Gestaltung dieser Site.
   Reset + selbst gehostete Fonts (DSGVO) + wiederkehrende Bausteine
   (Kopf/Navigation/Fuß/Buttons/Cookie-Banner). Seiten-Inhalte nutzen
   zusätzlich Inline-Styles direkt in den HTML-Seiten.
   ========================================================================= */

/* ---- Selbst gehostete Schriften (statt Google-Fonts-CDN) ---- */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---- Reset ---- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;color:#16272d;background:#ffffff;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:#275f76;text-decoration:none;}
a:hover{color:#317E9E;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}
h1,h2,h3{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;color:#16272d;overflow-wrap:break-word;hyphens:auto;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.wrap{max-width:1180px;margin:0 auto;padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px);}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#317E9E;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#317E9E;color:#fff;padding:10px 16px;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;color:#fff;}
:focus-visible{outline:2px solid #317E9E;outline-offset:2px;}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;padding:14px 26px;border-radius:10px;border:1px solid transparent;transition:background .15s,border-color .15s,transform .15s,opacity .15s;}
/* Wirkt "ausgegraut", solange die Einwilligung fehlt – bleibt aber klickbar,
   damit ein Klick den Hinweis (rotes Sternchen) auslösen kann. */
.btn.is-inactive{opacity:.5;filter:grayscale(.35);}
.btn--primary{background:#317E9E;color:#fff;}
.btn--primary:hover{background:#275f76;color:#fff;}
.btn--ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(4px);}
.btn--ghost:hover{background:rgba(255,255,255,.24);color:#fff;}
.btn--outline{background:#fff;border-color:#cddbe0;color:#1f4d5e;}
.btn--outline:hover{border-color:#317E9E;color:#1f4d5e;}
.btn--sm{font-size:15px;padding:11px 20px;}

/* ---- Notfallleiste ---- */
.topbar{background:#1f4d5e;color:#dbe9ee;font-size:13.5px;letter-spacing:.01em;}
.topbar .wrap{padding-top:9px;padding-bottom:9px;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;justify-content:center;text-align:center;}
.topbar strong{color:#fff;font-weight:600;}
.topbar a{color:#fff;font-weight:600;}
.topbar .sep{opacity:.5;}
@media (max-width:560px){
  .topbar .sep{display:none;}
}

/* ---- Kopf / Navigation ---- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid #e4ebed;}
.site-header .wrap{padding-top:12px;padding-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{width:42px;height:42px;object-fit:contain;}
.brand-name{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:19px;font-weight:600;color:#16272d;display:block;line-height:1.15;}
.brand-sub{font-size:12px;color:#57696f;letter-spacing:.04em;display:block;line-height:1.15;}
.nav{display:flex;align-items:center;gap:clamp(4px,1.5vw,10px);}
.nav a.navlink{position:relative;font-size:15px;font-weight:500;color:#16272d;padding:8px 10px;border-radius:7px;}
.nav a.navlink:hover{color:#16272d;background:#eef4f7;}
.nav a.navlink[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:#317E9E;border-radius:2px;}
.nav-toggle{display:none;background:none;border:1px solid #d8e2e5;border-radius:9px;padding:8px;color:#16272d;line-height:0;}

@media (max-width:820px){
  .brand-sub{display:none;}
  .nav-toggle{display:inline-flex;}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border-bottom:1px solid #e4ebed;box-shadow:0 20px 30px -24px rgba(31,77,94,.5);padding:10px clamp(20px,4vw,40px) 18px;display:none;}
  .site-header.nav-open .nav{display:flex;}
  .nav a.navlink{padding:12px 8px;font-size:16px;}
  .nav a.navlink[aria-current="page"]::after{display:none;}
  .nav a.navlink[aria-current="page"]{color:#317E9E;}
  .nav .btn{justify-content:center;margin-top:8px;}
  .site-header .wrap{position:relative;}
  /* Hero: auf Mobil gleichmaessig kraeftiger, vertikaler Abdunkel-Verlauf statt des
     horizontalen (der rechts fast transparent ist) – sonst ist der Text ueber hellen
     Bildstellen je nach Geraet nicht lesbar. */
  .hero{background-image:linear-gradient(180deg,rgba(15,40,49,.58) 0%,rgba(15,40,49,.46) 50%,rgba(15,40,49,.64) 100%),url('images/behandlungszimmer.jpg') !important;}
}

/* ---- Fuß ---- */
.site-footer{background:#132f3a;color:#b7cdd5;}
.footer-grid{padding-top:clamp(38px,4.5vw,56px);padding-bottom:clamp(38px,4.5vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;}
.site-footer h3{color:#fff;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:19px;font-weight:600;margin:0;}
.footer-brand{display:flex;align-items:center;gap:12px;}
.footer-brand img{width:40px;height:40px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9;}
.footer-col-title{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6f97a5;margin-bottom:12px;}
.site-footer a{color:#b7cdd5;}
.site-footer a:hover{color:#fff;}
.footer-links{display:flex;flex-direction:column;gap:9px;align-items:flex-start;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);}
.footer-bottom .wrap{padding-top:16px;padding-bottom:16px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;font-size:13.5px;}
.footer-bottom a.credit{color:#cfe1e8;font-weight:600;}

/* Adress-Karte („Wann wir für Sie da sind") verlinkt auf Google Maps */
.addr-card{transition:background .15s,border-color .15s,transform .15s;}
.addr-card:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);}
.addr-card:focus-visible{outline:2px solid #8dc4d6;outline-offset:2px;}

/* ---- Cookie-Banner + Karten-Consent ---- */
.cookie-banner{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;width:min(760px,calc(100% - 28px));background:#fff;border:1px solid #d8e2e5;border-radius:16px;box-shadow:0 20px 50px -20px rgba(19,47,58,.5);padding:20px 22px;display:none;}
/* eigene Animation: erhält die horizontale Zentrierung (translateX(-50%)),
   fadeUp würde den transform überschreiben und den Banner nach rechts aus dem Bild schieben */
.cookie-banner.show{display:block;animation:cookieUp .35s ease both;}
@keyframes cookieUp{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%);}}
.cookie-banner h2{font-size:18px;margin:0 0 6px;color:#16272d;}
.cookie-banner p{font-size:14px;color:#4a5c62;margin:0;}
.cookie-banner .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.cookie-banner .btn{padding:11px 20px;font-size:15px;}

.map-consent{background:#eef4f7;border:1px solid #dbe8ed;border-radius:16px;padding:28px 24px;text-align:center;color:#4a5c62;}
.map-consent h3{font-size:19px;margin:0 0 8px;color:#16272d;}
.map-consent p{font-size:14.5px;margin:0 auto 16px;max-width:34em;}
.map-embed{border:1px solid #e4ebed;border-radius:16px;overflow:hidden;}
.map-embed iframe{width:100%;height:300px;border:0;display:block;}

/* Sprechzeiten-Zeilen (Startseite) */
@media (max-width:560px){
  /* Uhrzeit direkt hinter den Wochentag statt rechtsbündig – spart Platz;
     bricht nur um, wenn eine Zeile (z. B. Mo/Do mit zwei Zeitspannen) zu lang wird */
  .hours-list > div{justify-content:flex-start;flex-wrap:wrap;gap:2px 10px;}
  /* Leistungsspektrum: zarterer Trennstrich, nur 30% der Bildschirmbreite, zentriert.
     Titel + Beschreibungstexte bleiben linksbündig; nur der Strich ist mittig (via ::before). */
  .svc-row{border-top:0 !important;position:relative;}
  .svc-row::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:30vw;height:1px;background:#dde7ea;}
  /* Leistungsspektrum: auf schmalen Handys 1 Spalte statt des 2er-Rasters */
  .svc-grid{grid-template-columns:1fr !important;}
  /* Leistungsanzahl nicht anzeigen (Details unter „Alle Leistungen ansehen") */
  .svc-count{display:none;}
  /* Button „Alle Leistungen ansehen" zentrieren */
  .svc-cta{display:flex;justify-content:center;width:fit-content;margin-left:auto;margin-right:auto;}
}

/* ---- Praxis-Karussell (Startseite: „Unsere Praxis") ----
   Center-Mode: Bilder liegen in Originalproportion nebeneinander in einer Reihe,
   das aktive Bild rastet mittig ein. Endlos-Lauf via Klon-Kopien (siehe app.js). */
.pc{position:relative;}
.pc-viewport{position:relative;overflow:hidden;}
.pc-track{position:relative;display:flex;gap:clamp(14px,2vw,26px);will-change:transform;transition:transform .6s cubic-bezier(.4,0,.2,1);}
.pc-track.pc-no-anim{transition:none;}
.pc-slide{flex:0 0 auto;height:clamp(230px,38vw,400px);border-radius:14px;overflow:hidden;cursor:pointer;background:#eef4f7;box-shadow:0 16px 36px -20px rgba(31,77,94,.55);}
.pc-slide img{display:block;height:100%;width:auto;max-width:none;}
.pc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid #dbe8ed;background:rgba(255,255,255,.9);color:#16272d;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px -6px rgba(19,47,58,.45);transition:background .15s;}
.pc-arrow:hover{background:#fff;}
.pc-arrow:focus-visible{outline:3px solid #8dc4d6;outline-offset:2px;}
.pc-prev{left:14px;}
.pc-next{right:14px;}
.pc-dots{display:flex;justify-content:center;gap:9px;margin-top:20px;}
.pc-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#c4d5db;cursor:pointer;transition:background .15s,transform .15s;}
.pc-dot.is-active{background:#317E9E;transform:scale(1.3);}
.pc-dot:hover{background:#9db9c2;}
.pc-dot:focus-visible{outline:2px solid #317E9E;outline-offset:2px;}

/* Anliegen-Auswahl (Kontaktformular) */
.anliegen-chip{font-size:14px;font-weight:500;padding:9px 16px;border-radius:999px;cursor:pointer;background:#f2f7f9;border:1px solid #d8e2e5;color:#3a5158;transition:background .15s,border-color .15s,color .15s;}
.anliegen-chip:hover{border-color:#bcd0d7;}
.anliegen-chip.is-active{background:#317E9E;border-color:#317E9E;color:#fff;}
.anliegen-chip:focus-visible{outline:2px solid #317E9E;outline-offset:2px;}
@media (max-width:560px){
  .pc-arrow{width:38px;height:38px;font-size:20px;}
  .pc-prev{left:8px;}
  .pc-next{right:8px;}
  /* Etwas kompakter, damit beide Anliegen-Pills bei genug Platz in einer Zeile bleiben */
  .anliegen-chip{font-size:13px;padding:8px 13px;}
}
@media (prefers-reduced-motion:reduce){
  .pc-track{transition:none;}
}

/* ---- Rechtstexte (Impressum / Datenschutz) ---- */
.legal{max-width:760px;padding-top:clamp(28px,4vw,52px);padding-bottom:clamp(44px,5vw,72px);}
.legal h1{font-size:clamp(30px,4vw,42px);font-weight:500;margin:0 0 8px;}
.legal .lead{color:#57696f;font-size:16px;margin:0 0 8px;}
.legal h2{font-size:clamp(19px,2.2vw,23px);font-weight:600;margin:32px 0 8px;}
.legal p,.legal li{font-size:16px;color:#33474e;line-height:1.7;}
.legal ul{padding-left:20px;margin:8px 0;}
.legal a{font-weight:500;}

/* ---- Leistungen: Abschnittsüberschrift + Zeilen-Raster ---- */
.leistung-head{display:flex;align-items:stretch;gap:12px;margin-bottom:18px;}
.leistung-head h2{font-weight:600;font-size:clamp(22px,2.8vw,28px);margin:0;line-height:1.2;}
/* Balken erstreckt sich über die volle Höhe der Überschrift – auch bei Umbruch auf zwei Zeilen */
.leistung-bar{width:9px;background:#317E9E;border-radius:3px;flex:none;align-self:stretch;min-height:24px;}
.lgrid{display:grid;gap:14px;grid-template-columns:1fr;}
.lgrid-rows{display:flex;flex-direction:column;gap:14px;}
@media (min-width:600px){
  .lgrid-2,.lgrid-3,.lgrid-4{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:900px){
  .lgrid-3{grid-template-columns:repeat(3,1fr);}
  .lgrid-4{grid-template-columns:repeat(4,1fr);}
}