/* Privatpraxis Stefanie Goldner – Stylesheet
   Kein Bootstrap, kein jQuery. Source Sans Pro, exakte Mobirise-Größen. */

/* ── Fonts ────────────────────────────────────────────── */
@font-face{font-family:"Source Sans Pro";font-weight:300;font-display:swap;
  src:url("fonts/source-sans-pro-v21-latin-300/font.woff") format("woff");}
@font-face{font-family:"Source Sans Pro";font-weight:400;font-display:swap;
  src:url("fonts/source-sans-pro-v21-latin-regular/font.woff") format("woff");}
@font-face{font-family:"Source Sans Pro";font-weight:700;font-display:swap;
  src:url("fonts/source-sans-pro-v21-latin-700/font.woff") format("woff");}
@font-face{font-family:"Source Sans Pro";font-weight:700;font-style:italic;font-display:swap;
  src:url("fonts/source-sans-pro-v21-latin-700italic/font.woff") format("woff");}

/* ── Variablen ────────────────────────────────────────── */
:root{
  --gold:       #dfdf94;
  --gold-hover: #cdcd59;
  --dark:       #363230;   /* Haupt-Textfarbe: warmes Dunkelgrau */
  --grau:       #777472;  /* Sekundärtext: warm-neutral */
  --bg-footer:  #efefef;
  --maxw:       1140px;
  --font: "Source Sans Pro","Helvetica Neue",Arial,sans-serif;

  /* Fluid-Größen aus mbr-additional.css */
  --d1: clamp(2.4rem, calc(2.225rem + 3.83vw), 4.5rem);
  --d2: clamp(1.6rem, calc(1.525rem + 1.64vw), 2.5rem);
  --d5: clamp(1.3rem, calc(1.28rem  + 0.89vw), 1.8rem);
  --d7: 1.3rem;
  --d4: 0.85rem;
}

/* ── Barrierefreiheit ─────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Reset / Basis ────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:var(--d7);color:var(--dark);background:#fff;line-height:1.6}
a{color:var(--dark);text-decoration:none}
a:hover{color:var(--grau)}
/* Überschriften: immer dunkel */
h1,h2,h3,h4{line-height:1.1;word-break:break-word;margin:0 0 .8rem;color:var(--dark)}
p{margin:0 0 1rem;color:var(--grau)}
p:last-child{margin-bottom:0}
img{max-width:100%;height:auto;display:block}
main{width:100%}

/* ── Navbar ───────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.5rem 2rem;background:#fff;min-height:77px;
  box-shadow:0 1px 6px rgba(0,0,0,.08);
}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;flex:1 1 auto;padding-left:.5rem}
.brand img{height:60px;width:auto;display:block}
.brand-name{font-family:var(--font);font-weight:700;font-size:var(--d4);color:var(--dark);line-height:1.3}
.site-nav{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}

/* Alle Nav-Elemente: einheitlich outlined gold */
.site-nav a{
  display:inline-flex;align-items:center;gap:.3rem;
  color:var(--dark);font-size:var(--d7);padding:.35rem .9rem;
  border-radius:2px;font-weight:400;text-decoration:none;
  border:2px solid var(--gold);background:transparent;
  transition:background .15s,color .15s;white-space:nowrap;
}
.site-nav a:hover{background:var(--gold-hover);border-color:var(--gold-hover);color:var(--dark)}
.site-nav a.active,.site-nav a.header-tel{
  background:var(--gold);color:var(--dark);font-weight:700;
}
.site-nav a.active:hover,.site-nav a.header-tel:hover{
  background:var(--gold-hover);border-color:var(--gold-hover);
}

.nav-toggle{display:none}
.nav-burger{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--dark);padding:.2rem .5rem}

/* ── Allgemeine Bänder ────────────────────────────────── */
.band{padding:60px 1.5rem}
.band>.wrap{max-width:var(--maxw);margin:0 auto}

/* ── Hero Startseite (Fullscreen Parallax) ───────────── */
.band-hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:3rem 1.5rem;
  background-size:cover;background-position:center center;
  background-attachment:fixed;
}
.band-hero .overlay{position:absolute;inset:0;background:rgba(70,80,82,.3);pointer-events:none}
.band-hero .wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;width:100%}
.hero-box{max-width:680px;text-align:center;margin:0 auto}
.hero-box h1{font-size:var(--d1);font-weight:700;color:#fff;line-height:1.05;margin-bottom:.6rem}
.hero-box p{font-size:var(--d2);color:#fff;font-weight:300;line-height:1.35;margin:0}

/* ── Gold-Band ────────────────────────────────────────── */
.band-gold{padding:60px 1.5rem;background-color:var(--gold)}
.band-gold>.wrap{max-width:var(--maxw);margin:0 auto}
/* Überschriften auf Gold: grau */
.band-gold h1,.band-gold h2,.band-gold h3,.band-gold h4{color:var(--grau)}

/* Willkommen-Layout */
.willkommen{display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.willkommen-text{flex:1 1 280px}
.willkommen-text h2{
  font-size:var(--d2);font-weight:300;line-height:1.3;margin-bottom:.8rem;
}
.willkommen-text h2 strong{font-weight:700}
.willkommen-tel{font-size:var(--d7);margin-bottom:.8rem;font-weight:700;color:var(--dark)}
.willkommen-tel a{font-weight:700;color:var(--dark)}
.willkommen-bild{flex:1 1 300px;max-width:520px}
.willkommen-bild img{width:100%;object-fit:cover}
picture{display:block}

/* Buttons auf Gold-Hintergrund */
.band-gold .btn{background:#fff;color:var(--dark);border-color:#fff}
.band-gold .btn:hover{background:var(--dark);color:#fff;border-color:var(--dark)}
.band-gold .btn-tel{
  display:inline-flex;align-items:center;gap:.35rem;
  background:#fff;color:var(--dark);border:2px solid #fff;
  padding:.4rem 1.1rem;border-radius:2px;font-weight:700;font-size:var(--d7);
  text-decoration:none;transition:background .2s,color .2s;
}
.band-gold .btn-tel:hover{background:var(--dark);color:#fff;border-color:var(--dark)}

/* Zitat über mich: Foto rechts, Text links, ~4 Zeilen */
.band-gold .text-bild{
  display:flex;gap:3.5rem;align-items:center;
  flex-direction:row-reverse;flex-wrap:nowrap;
}
.band-gold .text-bild img{flex:0 0 min(420px,45%);width:min(420px,45%);height:auto;object-fit:cover}
.band-gold .text-bild .inhalt{flex:0 0 auto;width:min(380px,50%)}
.band-gold .text-bild .inhalt p{
  font-size:var(--d5);color:var(--dark);
  font-style:normal;font-weight:400;line-height:1.6;margin:0;
}

/* ── Weißes Band ──────────────────────────────────────── */
.band-weiss{padding:60px 1.5rem;background-color:#fff}
.band-weiss>.wrap{max-width:var(--maxw);margin:0 auto}

/* Feature-Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.feature-card img{width:100%;display:block;object-fit:cover}
.feature-card .pad{padding-top:2rem}
.feature-card h3{font-size:var(--d5);font-weight:500;color:var(--dark);margin-bottom:.5rem;line-height:1.2}
.feature-card p{font-size:var(--d7);color:var(--grau);hyphens:auto}

/* 5-Ebenen-Modell: zentriert, Scroll-Einblend */
.band-weiss .text-bild{
  display:flex;gap:2rem;align-items:flex-start;flex-wrap:wrap;
  margin:0 auto 2.5rem;max-width:860px;
  opacity:0;transform:translateY(60px);
  transition:opacity .75s ease,transform .75s ease;
}
.band-weiss .text-bild.visible{opacity:1;transform:none}
.band-weiss .text-bild:last-child{margin-bottom:0}
.band-weiss .text-bild img{flex:0 0 auto;width:min(380px,44%);height:auto}
.band-weiss .text-bild .inhalt{flex:1 1 280px}
.band-weiss .text-bild .inhalt p{font-size:var(--d7);color:var(--grau)}
.band-weiss .text-bild h3{font-size:var(--d7);font-weight:700;color:var(--dark);margin-bottom:.4rem}
/* 5-Ebenen-Modell-Titel als h2 */
.band-weiss .text-bild h2{font-size:var(--d2);font-weight:700;color:var(--dark);margin-bottom:.7rem;line-height:1.15}
/* Erstes text-bild (5-Ebenen-Modell): Bild rechts */
.band-weiss .text-bild.rev{flex-direction:row-reverse}
.band-weiss .text-bild.rev .inhalt p{font-size:var(--d5);color:var(--dark)}

/* ── Parallax-Band ────────────────────────────────────── */
.band-parallax{
  position:relative;padding:60px 1.5rem;
  background-size:cover;background-position:center center;
  background-attachment:fixed;text-align:center;
}
.band-parallax>.wrap{max-width:var(--maxw);margin:0 auto;position:relative;z-index:1}
.band-parallax h2{font-size:var(--d1);font-weight:700;color:#fff;margin-bottom:.6rem}
.band-parallax p{font-size:var(--d5);color:#fff;margin:0;line-height:1.8}
.band-parallax strong{font-weight:700;color:#fff}

/* ── Drei Spalten auf Gold ────────────────────────────── */
.drei-spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.drei-spalten p{font-size:var(--d7);color:var(--grau);background:#fff;padding:1rem;margin:0}

/* ── Vollbild-Foto (gold) ─────────────────────────────── */
.vollbild{background:var(--gold);line-height:0}
.vollbild img{width:100%;display:block;max-height:820px;object-fit:cover}

/* ── Vollbild Parallax (uebermich) ───────────────────── */
.vollbild-parallax{
  height:540px;
  background-size:cover;background-position:center center;
  background-attachment:fixed;
}

/* ── Seiten-Hero (Unterseiten) ───────────────────────── */
.band-page-hero{
  position:relative;
  padding:180px 1.5rem 90px;
  min-height:55vh;
  background-size:cover;background-position:center center;
  background-attachment:fixed;text-align:center;
}
.band-page-hero::before{content:"";position:absolute;inset:0;background:rgba(70,80,82,.38)}
.band-page-hero>.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto}
.band-page-hero h1{font-size:var(--d1);font-weight:700;color:#fff;margin:0}

/* ── Über mich: 2-spaltig ────────────────────────────── */
.section-2col{display:grid;grid-template-columns:1fr 2fr;gap:2.5rem;align-items:start;max-width:var(--maxw)}
/* Label-Spalte: leicht, Keyword-Teil (strong) dunkel */
.section-2col h2{font-size:var(--d2);font-weight:300;color:var(--grau);margin:0}
.section-2col h2 strong{font-weight:700;color:var(--dark)}
.section-2col p{font-size:var(--d7);color:var(--grau)}
.section-2col strong{font-weight:700;color:var(--dark)}

/* ── Textseiten ───────────────────────────────────────── */
.textpage{max-width:820px}
.textpage h1{font-size:var(--d2);margin-bottom:1.5rem}
.textpage h2{font-size:var(--d5);margin:2rem 0 .5rem;border-bottom:1px solid #ddd;padding-bottom:.3rem}
.textpage h3{font-size:var(--d7);font-weight:700;margin:1.2rem 0 .3rem}
.textpage p,.textpage li{font-size:var(--d7);color:var(--grau);line-height:1.7}
.textpage ul{padding-left:1.3rem;margin-bottom:1rem}
.textpage a{font-weight:700}

/* ── Buttons ──────────────────────────────────────────── */
.btn{
  display:inline-block;background:var(--gold);color:var(--dark);
  padding:.5rem 1.3rem;border:2px solid var(--gold);border-radius:2px;
  font-weight:700;font-size:var(--d7);text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;letter-spacing:.5px;
}
.btn:hover{background:var(--gold-hover);border-color:var(--gold-hover);color:var(--dark)}
.btn-weiss{background:#fff;color:var(--grau);border-color:#fff}
.btn-weiss:hover{background:var(--dark);color:#fff;border-color:var(--dark)}
.btn-dunkel{background:var(--dark);color:#fff;border-color:var(--dark)}
.btn-dunkel:hover{background:var(--grau);border-color:var(--grau)}

/* ── Footer ───────────────────────────────────────────── */
.site-footer{padding:0;background-color:var(--bg-footer)}
.footer-body{
  padding:50px 1.5rem 30px;
  display:grid;grid-template-columns:auto repeat(3,1fr);
  gap:2rem;align-items:start;
  max-width:1300px;margin:0 auto;
}
.foot-logo img{height:6rem;width:auto;display:block;margin-bottom:.5rem}
.foot-logo p{font-size:var(--d7);color:var(--dark);line-height:1.4;margin:0}
.foot-col h3{
  font-size:var(--d7);font-weight:700;color:var(--dark);
  text-transform:uppercase;letter-spacing:.05em;margin:0 0 .8rem;
}
.foot-col p{font-size:var(--d7);color:var(--dark);line-height:1.7;margin:0}
/* Inline-Links in <p> bleiben inline */
.foot-col p a{display:inline;color:var(--dark);font-weight:400;text-decoration:none}
.foot-col p a:hover{color:var(--grau)}
/* Wichtige Kontakt-Elemente fett */
.foot-col p a[href^="tel"],.foot-col p .tel-label{font-weight:700}
.foot-col p a[href^="mailto"]{font-weight:700}
.foot-col a{display:block;color:var(--dark);font-size:var(--d7);font-weight:400;margin:.35rem 0;text-decoration:none}
.foot-col a strong{font-weight:700}
/* Anfahrt-Link fett */
.foot-col a[href*="maps"]{font-weight:700}
.foot-col a:hover{color:var(--grau)}
.copyright{
  padding:1rem 1.5rem;border-top:1px solid rgba(0,0,0,.08);
  font-size:calc(var(--d7) * 0.9);color:var(--dark);text-align:center;margin:0;
}

/* ── Cookie-Banner ───────────────────────────────────── */
#cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:#fff;border-top:2px solid var(--gold);
  padding:.9rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  box-shadow:0 -2px 10px rgba(0,0,0,.08);
}
#cookie-banner p{margin:0;font-size:var(--d7);color:var(--grau)}
#cookie-banner .btn{flex-shrink:0;padding:.4rem 1.2rem}
#cookie-banner.hidden{display:none}

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .drei-spalten{grid-template-columns:1fr 1fr}
  .footer-body{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
  .band-hero,.band-parallax,.band-page-hero,.vollbild-parallax{background-attachment:scroll}
  .vollbild-parallax{height:280px}
  .band-page-hero{padding:120px 1.5rem 60px;min-height:40vh}

  .nav-burger{display:block}
  .site-nav{display:none;width:100%;flex-direction:column;gap:.3rem;padding:.6rem 0;align-items:flex-start}
  .nav-toggle:checked ~ .site-nav{display:flex}
  .site-nav a.header-maps{display:none}

  .willkommen{flex-direction:column}
  .willkommen-bild{max-width:100%}
  .cards{grid-template-columns:1fr}
  .drei-spalten{grid-template-columns:1fr}
  /* Zitat: auf Mobil untereinander */
  .band-gold .text-bild{flex-direction:column;flex-wrap:wrap}
  .band-gold .text-bild img{width:100%;max-width:360px;flex:none}
  .band-weiss .text-bild{flex-direction:column}
  .band-weiss .text-bild img{width:100%;max-width:100%}
  .band-weiss .text-bild .inhalt{flex:none;width:100%}
  .section-2col{grid-template-columns:1fr}
  .footer-body{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .footer-body{grid-template-columns:1fr}
}