/* DOC BS – Die Orthopädie Coskun
   Statisches Stylesheet, Layout und Werte aus dem Avada-Original übernommen */

/* ---------- Schriften ---------- */
@font-face{font-family:'Lato';src:url('../fonts/lato-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('../fonts/lato-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens (Werte aus den Avada-Theme-Optionen) ---------- */
:root{
  --akzent:#6a9eb7;          /* Buttons, Links, Kontakt-Überschriften */
  --akzent-dunkel:#588ba4;
  --blau:#009fe3;            /* primary_color, Footer-Links */
  --text:#3f3f3f;            /* body_typography-color */
  --icon:#424242;
  --dunkel:#212934;
  --footer-bg:#3f3f3f;
  --linie:#e2e2e2;           /* sep_color */
  --sans:'Lato',Arial,Helvetica,sans-serif;
  --display:'Poppins',Arial,Helvetica,sans-serif;
  --zeile:1280px;            /* Original 1140px, auf Wunsch etwas breiter */
  --zeile-text:1020px;       /* Lesebreite für Impressum und Datenschutz */
  /* Schriftgrößen – aus den Avada-Theme-Optionen abgeleitet */
  --fs-text:18px;            /* body_typography-font-size */
  --fs-klein:15px;           /* Fußzeile, Hinweise, Stand */
  --fs-h1:62px;              /* Hero */
  --fs-h1-seite:40px;        /* Seitentitel Unterseiten */
  --fs-h2:36px;              /* Abschnittsüberschriften */
  --fs-h3:24px;
  --fs-h4:19px;
  --fs-button:14px;          /* button_font_size */
  --lh-text:1.8;             /* body_typography-line-height */
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none !important;transition-duration:.01ms !important}}
body{margin:0;font-family:var(--sans);font-size:var(--fs-text);line-height:var(--lh-text);color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--akzent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
p{margin:0 0 1.2em}
h1,h2,h3,h4{font-family:var(--display);color:var(--text);margin:0;letter-spacing:-1px}
h1{font-size:var(--fs-h1);font-weight:700;line-height:1}
h2{font-size:var(--fs-h2);font-weight:500;line-height:1}
h3{font-size:var(--fs-h3);font-weight:500;line-height:1.2}
h4{font-size:var(--fs-h4);font-weight:500;line-height:1.3}
.zeile{width:100%;max-width:var(--zeile);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--akzent);color:#fff;padding:12px 20px;z-index:300}
.skip:focus{left:0}

/* ---------- Kontakt-Pille ---------- */
.pille{display:inline-flex;align-items:center;gap:9px;background:var(--akzent);color:#fff;
  font-family:var(--display);font-size:var(--fs-button);font-weight:400;text-transform:uppercase;
  padding:11px 26px;border-radius:50px;border:0;cursor:pointer;line-height:1}
.pille:hover{background:var(--akzent-dunkel);color:#fff;text-decoration:none}
.pille svg{width:15px;height:15px;fill:currentColor;flex:none}

/* ---------- Kopfbereich: liegt über dem Hero ---------- */
.kopf{position:absolute;top:0;left:0;right:0;z-index:100;padding:40px 0}
.kopf .zeile{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.kopf .logo{display:block;width:240px;max-width:45vw}
.kopf .pille{margin-right:7.68%}
.kopf--fest{position:static;background:#fff;border-bottom:1px solid var(--linie);padding:26px 0}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:max(13%,250px);background:#e8eaec center/cover no-repeat;background-image:image-set(url('../img/hero-1920.webp') type('image/webp'), url('../img/hero-1920.jpg') type('image/jpeg'))}
.hero__inhalt{position:relative;z-index:2;width:60%;padding-bottom:20px}
.hero h1{margin:0}
.trenner{height:0;margin:30px 0;border:0}
.hero .namen{margin:0}
.hero .namen p{margin:0;font-family:var(--display);font-size:var(--fs-h2);font-weight:500;line-height:1.2;letter-spacing:-1px}

/* Einblenden von links, wie im Original (fadeInLeft, 1 s) */
.animiert{animation:einblendenLinks 1s ease-out both}
@keyframes einblendenLinks{
  from{opacity:0;transform:translate3d(-100%,0,0)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.animiert{animation:none;opacity:1;transform:none}}

/* Wellen am unteren Rand des Hero */
.wellen{position:relative;display:block;width:100%;height:auto;aspect-ratio:1024/182;margin-top:40px;margin-bottom:-1px;z-index:3;pointer-events:none}
.wellen path{fill:#fff}
.wellen path:nth-child(1){opacity:.12}
.wellen path:nth-child(2){opacity:.18}
.wellen path:nth-child(3){opacity:.24}
.wellen path:nth-child(4){opacity:.3}
.wellen path:nth-child(5){opacity:1}

/* ---------- Inhaltsabschnitte ---------- */
.abschnitt{padding:40px 0 4%}
.spalten-2{display:grid;grid-template-columns:1fr 1fr;gap:91px}
.abschnitt h2{margin-bottom:30px}
.kursiv{font-style:italic}

/* Checkliste mit Kreis-Icon */
.liste{list-style:none;margin:0;padding:0}
.liste li{display:flex;align-items:flex-start;gap:14px;margin-bottom:8px}
.liste .kreis{flex:none;width:34px;height:34px;border-radius:50%;background:var(--akzent);
  display:flex;align-items:center;justify-content:center}
.liste .kreis svg{width:17.6px;height:17.6px;fill:#fff}
.liste p{margin:0;line-height:34px}

/* Checkliste ohne Kreis (Kontaktdaten) */
.liste--schlicht li{gap:12.6px;margin-bottom:2px}
.liste--schlicht .kreis{width:30.6px;height:30.6px;background:none;justify-content:flex-start}
.liste--schlicht .kreis svg{width:18px;height:18px;fill:var(--icon)}
.liste--schlicht p{line-height:30.6px}

/* ---------- Kontaktbereich ---------- */
.kontakt{padding:0 0 40px}
.kontakt-grid{display:grid;grid-template-columns:24% 24% 45%;gap:0}
.kontakt-grid > div{padding:0 3.84%}
.kontakt-grid > div:first-child{padding-left:0}
.kontakt-grid h2{color:var(--akzent);font-weight:700;margin-bottom:30px}
.kontakt-grid .logo-klein{width:200px;margin-bottom:15px}
.kontakt-grid p{margin:0}

/* Karte */
.karte{position:relative;width:100%;height:300px;background:#f2f3f5;margin-bottom:40px}
.karte iframe{width:100%;height:100%;border:0;display:block}
.karte-consent{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:18px;padding:24px;background:#f2f3f5}
.karte-consent p{max-width:60ch;margin:0;font-size:var(--fs-klein);line-height:1.6}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--footer-bg);color:#fff;padding:40px 0;font-size:var(--fs-klein)}
.fuss p{margin:0}
.fuss a{color:var(--blau)}
.fuss a:hover{color:#fff}

/* ---------- Nach oben ---------- */
.hoch{position:fixed;right:22px;bottom:22px;width:38px;height:38px;border-radius:4px;
  background:rgba(63,63,63,.45);color:#fff;border:0;cursor:pointer;display:none;
  align-items:center;justify-content:center;z-index:120}
.hoch.sichtbar{display:flex}
.hoch:hover{background:var(--akzent)}
.hoch svg{width:14px;height:14px;fill:currentColor}

/* ---------- Unterseiten ---------- */
.seitenkopf{background:#f9f9fb;border-bottom:1px solid var(--linie);padding:48px 0;text-align:center}
.seitenkopf h1{font-size:var(--fs-h1-seite)}
.inhalt{padding:56px 0 72px}
.inhalt .zeile{max-width:var(--zeile-text)}
.inhalt h2{font-size:var(--fs-h2);margin:1.6em 0 .6em;color:var(--akzent);font-weight:700}
.inhalt h2:first-child{margin-top:0}
.inhalt h3{margin:1.6em 0 .5em}
.inhalt h4{margin:1.4em 0 .4em;color:var(--dunkel)}
.inhalt ul{padding-left:1.2em}
.inhalt a{word-break:break-word}

/* ---------- Mobil ---------- */
@media (max-width:1000px){
  .spalten-2{grid-template-columns:1fr;gap:40px}
  .kontakt-grid{grid-template-columns:1fr 1fr}
  .kontakt-grid > div{padding:0 0 30px}
  .hero__inhalt{width:100%}
}
@media (max-width:700px){
  :root{--fs-text:17px;--fs-h1:34px;--fs-h1-seite:28px;--fs-h2:26px;--fs-h3:21px;--fs-h4:18px;--fs-button:12px}
  .hero .namen p{font-size:22px}
  .hero{padding-top:25%}
  .kopf{padding:22px 0}
  .kopf .logo{width:160px}
  .kopf .pille{margin-right:0;padding:9px 18px}
  .kontakt-grid{grid-template-columns:1fr}
  .abschnitt{padding:30px 0 20px}
}

/* Listen und Stand-Angabe in den Rechtstexten */
.inhalt ul{list-style:disc;margin:0 0 1.4em;padding-left:1.3em}
.inhalt li{margin-bottom:.3em}
.inhalt .stand{margin-top:2.6em;font-size:var(--fs-klein);font-style:italic;color:#6c757d}