/*
Theme Name: Hausarztpraxis Panteli
Theme URI: https://praxis-panteli.de
Author: Praxis Panteli
Description: Individuelles WordPress-Theme für die Hausarztpraxis Benjamin Panteli in Salzhausen. Ruhige, klare Gestaltung ohne externe Dienste, Tracking oder eingebettete Karten.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: panteli
*/

/* -----------------------------------------------------------
   Lokal gehostete Schriftarten (kein externes Laden!)
   Bitte die passenden .woff2-Dateien gemäß fonts/README.txt
   in die jeweiligen Unterordner legen. Bis dahin greift der
   System-Fallback (siehe font-family unten).
   ----------------------------------------------------------- */
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces/fraunces-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces/fraunces-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces/fraunces-500italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces/fraunces-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Source Sans 3';
  src:url('fonts/source-sans-3/source-sans-3-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Source Sans 3';
  src:url('fonts/source-sans-3/source-sans-3-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Source Sans 3';
  src:url('fonts/source-sans-3/source-sans-3-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  /* --------------------------------------------------------------
     Farbpalette – sechs Rollen, identisch benannt wie im
     WordPress-Farbwähler. Änderungen bitte NUR hier vornehmen,
     alle weiteren Werte leiten sich davon ab.
     -------------------------------------------------------------- */
  --background:#ffffff;      /* Background      – Hauptfläche       */
  --background-alt:#eff0f7;  /* Background Alt  – ruhige Zweitfläche */
  --foreground:#12141b;      /* Foreground      – Fließtext          */
  --foreground-alt:#0a0c12;  /* Foreground Alt  – stärkste Kontraste */
  --primary:#252c8a;         /* Primary         – Marine/Indigo      */
  --secondary:#17798b;       /* Secondary       – Petrol/Türkis      */

  /* Abgeleitete Töne */
  --primary-deep:#1a2069;
  --secondary-soft:#e6f0f3;
  --ink-soft:#4d5364;
  --line:#dfe0ea;

  /* Aliasnamen für Abwärtskompatibilität im übrigen Stylesheet */
  --navy:var(--primary);
  --navy-deep:var(--primary-deep);
  --petrol:var(--secondary);
  --petrol-soft:var(--secondary-soft);
  --white:var(--background);
  --sand:var(--background-alt);
  --ink:var(--foreground);

  --radius:3px;
  --maxw:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;
  font-family:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--ink);
  background:var(--white);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight:500;
  color:var(--navy);
  line-height:1.25;
  margin:0 0 0.6em 0;
}
h1{font-size:2.1rem; font-weight:600;}
h2{font-size:1.55rem;}
h3{font-size:1.15rem;}
p{margin:0 0 1.1em 0;}
a{color:var(--petrol); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--petrol);
  outline-offset:3px;
}
ul{margin:0; padding:0;}
img{max-width:100%; height:auto;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--navy); color:#fff;
  padding:10px 16px; z-index:200; border-radius:var(--radius);
}
.skip-link:focus{left:16px; top:16px;}

/* Signatur-Element: dezente "Horizontlinie" statt maritimer Klischees */
.horizon{
  height:2px;
  width:64px;
  background:linear-gradient(90deg, var(--navy), var(--petrol));
  border:none;
  margin:18px 0 30px 0;
}
.horizon.center{margin-left:auto; margin-right:auto;}

/* Topbar mit Telefonlink */
.topbar{
  background:var(--sand);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto; padding:7px 24px;
  display:flex; justify-content:flex-end;
}
.topbar-phone{
  font-size:0.86rem; font-weight:600; color:var(--navy);
  padding:4px 2px; display:inline-block;
}
.topbar-phone:hover{color:var(--petrol); text-decoration:none;}
@media (max-width:760px){
  .topbar-inner{justify-content:center; padding:8px 16px;}
  .topbar-phone{font-size:0.92rem;}
}

/* Header */
header.site-header{
  border-bottom:1px solid var(--line);
  background:var(--white);
  position:sticky; top:0; z-index:100;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:var(--maxw); margin:0 auto;
}
.logo-link{display:inline-flex; align-items:center;}
.site-logo-img{
  height:52px; width:auto; display:block;
}

nav.main-nav ul{
  display:flex; gap:28px; list-style:none; margin:0; padding:0;
}
nav.main-nav a{
  color:var(--navy); font-size:0.98rem; font-weight:500;
  padding:6px 2px; border-bottom:2px solid transparent;
}
nav.main-nav a:hover{text-decoration:none; border-bottom-color:var(--petrol);}
nav.main-nav li.current-menu-item > a,
nav.main-nav li.current_page_item > a{
  border-bottom-color:var(--petrol); color:var(--petrol);
}

.menu-toggle{
  display:none;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  width:42px; height:42px; cursor:pointer; padding:0;
}
.menu-toggle span{
  display:block; width:20px; height:2px; background:var(--navy);
  margin:4px auto;
}

@media (max-width:760px){
  nav.main-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--line);
  }
  nav.main-nav.open{display:block;}
  nav.main-nav ul{
    flex-direction:column; gap:0; padding:8px 24px 18px;
  }
  nav.main-nav li{border-top:1px solid var(--line);}
  nav.main-nav a{display:block; padding:14px 2px;}
  .menu-toggle{display:block;}
}

.terminservice-banner{
  text-align:center;
}
.terminservice-banner img{
  max-width:340px; width:100%; height:auto; border-radius:var(--radius);
  display:inline-block;
}
.terminservice-caption{
  max-width:420px; margin:10px auto 0; font-size:0.84rem; color:var(--ink-soft);
}

.hero{
  background:var(--sand);
  padding:64px 0 56px;
}
.hero .eyebrow{
  text-transform:uppercase; letter-spacing:0.09em; font-size:0.8rem;
  color:var(--petrol); font-weight:600; margin-bottom:14px;
}
.hero p.lead{
  font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:400;
  font-size:1.25rem; color:var(--navy); max-width:640px; margin-bottom:18px;
}
.hero p.intro{max-width:620px; color:var(--ink-soft);}

.eyebrow{
  text-transform:uppercase; letter-spacing:.09em; font-size:.8rem;
  color:var(--petrol); font-weight:600;
}

section{padding:52px 0;}
section.alt{background:var(--sand);}

.notice-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px;
}
@media (max-width:820px){ .notice-grid{grid-template-columns:1fr;} }
.notice-card{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; background:var(--white);
}
.notice-card h3{font-size:1.02rem; margin-bottom:8px;}
.notice-card p{margin:0; color:var(--ink-soft); font-size:0.98rem;}

.aktuelles-teaser{
  border:1px solid var(--line); border-left:4px solid var(--petrol);
  border-radius:var(--radius); padding:28px 30px; background:var(--white);
}
.aktuelles-teaser h2{margin-bottom:10px;}
.aktuelles-teaser p:last-child{margin-bottom:0;}

.two-col{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:start;
}
@media (max-width:820px){ .two-col{grid-template-columns:1fr; gap:32px;} }

.team-teaser-cards{display:flex; gap:20px; flex-wrap:wrap; margin-top:18px;}
.team-mini{
  border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;
  flex:1; min-width:200px; background:var(--white);
}
.team-mini .name{font-family:'Fraunces', serif; color:var(--navy); font-weight:600;}
.team-mini .role{color:var(--ink-soft); font-size:0.92rem;}

.btn{
  display:inline-block; padding:12px 22px; border-radius:var(--radius);
  font-weight:600; font-size:0.95rem; border:1px solid var(--navy);
}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--navy-deep); text-decoration:none;}
.btn-outline{background:transparent; color:var(--navy);}
.btn-outline:hover{background:var(--petrol-soft); text-decoration:none;}

.link-arrow{font-weight:600;}
.link-arrow::after{content:" →"; }

.spectrum-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:6px 40px; margin-top:6px;
}
@media (max-width:600px){ .spectrum-grid{grid-template-columns:1fr;} }
.spectrum-grid li{
  list-style:none; padding:11px 0 11px 20px; border-bottom:1px solid var(--line);
  position:relative; font-size:0.98rem;
}
.spectrum-grid li::before{
  content:""; position:absolute; left:0; top:20px;
  width:6px; height:6px; border-radius:50%; background:var(--petrol);
}

.value-block{margin-bottom:34px;}
.value-block:last-child{margin-bottom:0;}

.team-profile{
  display:grid; grid-template-columns:160px 1fr; gap:28px; align-items:start;
  padding:30px 0; border-top:1px solid var(--line);
}
.team-profile:last-child{border-bottom:1px solid var(--line);}
@media (max-width:600px){ .team-profile{grid-template-columns:1fr;} }
.avatar-placeholder{
  width:140px; height:140px; border-radius:var(--radius);
  background:var(--petrol-soft); color:var(--petrol);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-size:1.6rem; font-weight:600;
}

.aktuelles-main{
  border:1px solid var(--line); border-left:4px solid var(--petrol);
  border-radius:var(--radius); padding:26px 28px; margin-bottom:18px; background:var(--white);
}
.aktuelles-main p:last-child{margin-bottom:0;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr; gap:32px;} }
.info-list{list-style:none;}
.info-list li{padding:6px 0; font-size:0.98rem;}
.info-list .label{color:var(--ink-soft); font-size:0.86rem; text-transform:uppercase; letter-spacing:0.03em; display:block; margin-bottom:2px;}

table.hours{width:100%; border-collapse:collapse; margin-top:6px;}
table.hours th, table.hours td{
  text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); font-size:0.96rem;
}
table.hours th{color:var(--ink-soft); font-weight:600; width:45%;}

.warning-box{
  border:1px solid var(--line); background:var(--sand);
  border-radius:var(--radius); padding:20px 22px; margin-top:26px; font-size:0.95rem;
}

footer{
  border-top:1px solid var(--line); background:var(--white); margin-top:40px;
  padding:36px 0 28px;
}
footer .footer-links{display:flex; gap:24px; margin-bottom:14px;}
footer .footer-links a{color:var(--navy); font-size:0.92rem; font-weight:500;}
footer .footer-address{color:var(--ink-soft); font-size:0.85rem; margin:0;}

/* --- Rechtsseiten: Impressum & Datenschutz ------------------ */
.legal-page{max-width:720px;}
.legal-intro{
  max-width:640px; color:var(--ink-soft); font-size:1.02rem;
}
.legal-block{
  padding:26px 0;
  border-top:1px solid var(--line);
}
.legal-block:first-child{border-top:none; padding-top:6px;}
.legal-block:last-child{border-bottom:1px solid var(--line);}
.legal-block h2{
  font-size:1.22rem;
  display:flex; align-items:baseline; gap:12px;
  margin-bottom:14px;
}
/* Nummerierung bildet die tatsächliche Gliederung der
   Datenschutzerklärung ab, ist also inhaltlich begründet. */
.legal-num{
  font-family:'Source Sans 3', sans-serif;
  font-size:0.78rem; font-weight:600; letter-spacing:0.06em;
  color:var(--petrol);
  border:1px solid var(--petrol-soft); background:var(--petrol-soft);
  border-radius:var(--radius);
  min-width:26px; padding:2px 6px; text-align:center;
  flex:0 0 auto;
}
.legal-block p{font-size:0.99rem; color:var(--ink);}
.legal-block p:last-child{margin-bottom:0;}

.legal-list{
  list-style:none; margin:0 0 1.1em 0; padding:0;
}
.legal-list li{
  position:relative; padding:5px 0 5px 20px;
  font-size:0.97rem; color:var(--ink-soft);
}
.legal-list li::before{
  content:""; position:absolute; left:0; top:14px;
  width:5px; height:5px; border-radius:50%; background:var(--petrol);
}

.legal-dl{margin:0;}
.legal-dl dt{
  font-size:0.82rem; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--ink-soft); font-weight:600; margin-top:14px;
}
.legal-dl dt:first-child{margin-top:0;}
.legal-dl dd{margin:2px 0 0 0; color:var(--ink); font-size:0.99rem;}

.legal-callout{
  border-left:3px solid var(--petrol);
  background:var(--sand);
  border-radius:var(--radius);
  padding:16px 20px;
  margin:0 0 1.1em 0;
}
.legal-callout p{margin-bottom:0.7em;}
.legal-callout p:last-child{margin-bottom:0;}

.placeholder-note{
  font-size:0.88rem; color:var(--ink-soft); font-style:italic; margin-top:6px;
}

@media (max-width:600px){
  .legal-block h2{font-size:1.12rem; gap:10px;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}