/* ---------- Schriften (lokal gehostet, DSGVO-konform) ---------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/lato-400.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/lato-700.woff2") format("woff2")}
@font-face{font-family:"Alex Brush";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/alexbrush-400.woff2") format("woff2")}

/* ---------- Farben und Grundwerte (aus den Avada-Theme-Optionen) ---------- */
:root{
  --blue:#002fa7;        /* Primärfarbe, Links, Icons */
  --blue-soft:#3d66ae;   /* Buttons, Zwischenüberschriften */
  --white:#ffffff;
  --tint:#f5fcff;        /* zarter Farbverlauf im unteren Bereich */
  --line:#e2e2e2;
  --text:#4f4f4f;
  --dark:#222222;
  --wrap:1140px;
  --sans:"Lato",Arial,Helvetica,sans-serif;
  --display:"Poppins",Arial,Helvetica,sans-serif;
  /* "only" verbietet dem Browser, das Farbschema zu ueberschreiben.
     Ohne das Schluesselwort greift der automatische Dunkelmodus
     von Edge und Chrome trotzdem. */
  color-scheme: only light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  color:var(--text);
  background:var(--white);
}
img{max-width:100%;height:auto;vertical-align:top;border:0}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--dark);margin:0}
p{margin:0 0 1.4em}
p:last-child{margin-bottom:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:12px;z-index:200;background:var(--white);color:var(--blue);padding:10px 16px;border-radius:4px}

/* ---------- Leiste ganz oben ---------- */
.topbar{background:var(--blue);padding:5px 0}
.topbar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.btn-call{
  display:inline-block;
  background:var(--blue-soft);
  color:var(--white);
  font-family:var(--display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.015em;
  line-height:1.2;
  padding:13px 24px;
  border-radius:50px;
  transition:background .2s ease;
}
.btn-call:hover{background:var(--line);color:var(--dark);text-decoration:none}
.icon-round{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--blue-soft);color:var(--white);
  transition:background .2s ease;
}
.icon-round:hover{background:var(--line);color:var(--dark)}
.icon-round svg{width:17px;height:17px;fill:currentColor}

/* ---------- Kopfbereich mit Bild ---------- */
.hero{
  position:relative;
  padding-top:15%;
  background-color:rgba(255,255,255,.72);
  background-image:url("img/joga-raum.jpg");
  background-size:cover;
  background-position:center;
  background-blend-mode:lighten;
}
.hero__logo{
  position:absolute;top:0;left:0;right:0;z-index:10;
  padding:60px 0 40px;
}
.hero__logo img{max-width:50%}
.hero__grid{
  display:flex;flex-wrap:wrap;align-items:stretch;
  gap:0 4%;
  padding-bottom:20px;
}
.hero__intro{flex:0 0 58%;display:flex;flex-direction:column;justify-content:center;text-align:center}
.hero__intro h1{
  font-size:44px;line-height:1.25;letter-spacing:-.015em;
  margin-bottom:16px;
}
.hero__intro p{font-size:22px}
.sep{
  width:100%;height:20px;margin:20px auto;
  background:radial-gradient(ellipse at 50% -50%, var(--line) 0, rgba(255,255,255,0) 80%);
}

/* Leistungskarte */
.card{
  flex:0 0 38%;
  background:var(--white);
  border-radius:8px;
  padding:25px 30px 15px;
  box-shadow:0 10px 14px 9px rgba(34,34,34,.08);
}
.card h2{
  font-size:24px;line-height:1.2;color:var(--blue-soft);
  margin-bottom:20px;
}
.card > p{font-size:15px;margin-top:18px}

/* Häkchenliste */
.checklist{list-style:none;margin:0;padding:0}
.checklist li{position:relative;padding-left:38px;line-height:27px;margin-bottom:18px}
.checklist li:last-child{margin-bottom:0}
.checklist li svg{
  position:absolute;left:0;top:2px;
  width:22px;height:22px;fill:var(--blue);
}

/* Wellen am unteren Rand */
.waves{position:relative;line-height:0;margin-top:40px}
.waves svg{display:block;width:100%;height:340px}

/* ---------- Praxis, Anfahrt, Kontakt ---------- */
.info{
  background-image:linear-gradient(0deg, var(--tint) 0%, rgba(255,255,255,0) 100%);
  padding:2% 0 6%;
}
.cols{display:flex;flex-wrap:wrap;gap:0 4%}
.cols > div{flex:1 1 46%}
.info__left p{font-size:20px}
.address-line{
  font-family:var(--display);
  font-weight:600;
  font-size:22px;
  line-height:1.4;
  color:var(--blue-soft);
  border-left:3px solid var(--blue);
  padding-left:16px;
  margin-bottom:1.4em;
}
.info__right > p{font-size:24px;line-height:1.5;margin-bottom:1em}

/* Kontaktliste mit runden Symbolen */
.contact{list-style:none;margin:0;padding:0;font-size:18px}
.contact li{position:relative;padding-left:44px;margin-bottom:18px;line-height:1.7}
.contact li .bullet{
  position:absolute;left:0;top:2px;
  width:31px;height:31px;border-radius:50%;
  background:var(--blue);color:var(--white);
  display:flex;align-items:center;justify-content:center;
}
.contact li .bullet svg{width:16px;height:16px;fill:currentColor}
.contact p{margin:0}
.contact .hint{font-size:15px}

/* Philosophie */
.philosophy{max-width:75%;margin:40px 0 0}
.philosophy h3{font-size:28px;line-height:1.2;margin-bottom:.6em}
.philosophy p{font-size:20px}
.signature{
  font-family:"Alex Brush","Segoe Script","Brush Script MT",cursive;
  font-size:36px;line-height:1.3;color:var(--dark);
  margin:0;
}
.role{font-size:18px;margin:0}

/* ---------- Fuß ---------- */
.site-footer{background:var(--white);padding:3% 0}
.site-footer .wrap{display:flex;justify-content:flex-start}
.site-footer__block{text-align:left}
.site-footer .logo{max-width:200px;margin-bottom:15px}
.site-footer address{font-style:normal;line-height:1.9}
.copyright{background:var(--text);color:var(--white);padding:20px 0}
.copyright .wrap{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Nach oben ---------- */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:50;
  width:42px;height:42px;border-radius:4px;
  background:var(--blue);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.to-top.is-visible{opacity:1;pointer-events:auto}
.to-top svg{width:18px;height:18px;fill:currentColor}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:1024px){
  .hero__intro h1{font-size:36px}
  .philosophy{max-width:100%}
}
@media (max-width:800px){
  .hero{padding-top:25%}
  .hero__logo{padding:25px 0}
  .hero__logo img{max-width:75%}
  .hero__intro,.card{flex:0 0 100%}
  .card{margin-top:28px}
  .hero__intro h1{font-size:27px;line-height:1.3}
  .hero__intro p{font-size:18px}
  .sep{display:none}
  .waves svg{height:120px}
  .cols > div{flex:0 0 100%}
  .info__left p,.philosophy p{font-size:18px}
  .info__right > p{font-size:20px}
  .info__right{margin-top:28px}
  .topbar .wrap{justify-content:center}
  .btn-call{font-size:13px;padding:12px 18px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}

/* ---------- Innenseiten (404, Impressum, Datenschutz) ---------- */
.page-head{padding:30px 0 20px}
.page-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.page-head__logo{max-width:340px}

/* Ausgefuellter Knopf, z. B. oben rechts auf den Innenseiten */
.btn-nav{
  display:inline-block;
  background:var(--blue);
  color:var(--white);
  font-family:var(--display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.015em;
  line-height:1.2;
  padding:13px 24px;
  border-radius:50px;
  white-space:nowrap;
  transition:background .2s ease;
}
.btn-nav:hover{background:var(--blue-soft);color:var(--white);text-decoration:none}

/* Umrandeter Knopf fuer die dunkle Leiste im Fuss */
.btn-ghost{
  display:inline-block;
  border:1px solid var(--white);
  color:var(--white);
  font-family:var(--display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.015em;
  line-height:1.2;
  padding:10px 20px;
  border-radius:50px;
  text-decoration:none;
  transition:background .2s ease,color .2s ease;
}
.btn-ghost:hover{background:var(--white);color:var(--dark);text-decoration:none}
.page{
  background-image:linear-gradient(0deg, var(--tint) 0%, rgba(255,255,255,0) 100%);
  padding:20px 0 6%;
}
.page__body{max-width:820px}
.page__body h1{font-size:38px;line-height:1.3;margin-bottom:.6em}
.page__body h2{font-size:24px;line-height:1.3;color:var(--blue-soft);margin:1.8em 0 .6em}
.page__body h3{font-size:19px;line-height:1.4;margin:1.4em 0 .5em}
.page__body ul{padding-left:20px}
.page__body li{margin-bottom:.4em}
@media (max-width:800px){
  .page-head__logo{max-width:100%}
  .page__body h1{font-size:28px}
}