/*
Theme Name: Moritz Weymann
Theme URI: https://moritzweymann.com
Author: Moritz Weymann
Description: Eigenes Theme fuer moritzweymann.com. Reines HTML/CSS, keine Seitenbaukaesten. Schriften sind selbst gehostet, es gehen keine Anfragen an Dritte.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mw-weymann
*/

/* Selbst gehostete Schriften - kein Aufruf an Google, damit ohne Einwilligung nichts nach aussen geht. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/poppins-600-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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/poppins-600-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;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/poppins-700-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:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/poppins-700-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;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/poppins-800-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:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/poppins-800-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;}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/roboto-condensed-300-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:'Roboto Condensed';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/roboto-condensed-300-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;}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/roboto-condensed-400-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:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/roboto-condensed-400-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;}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/roboto-condensed-700-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:'Roboto Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/roboto-condensed-700-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;}

:root{
  --ink:#000000;
  --paper:#F5F5F4;
  --panel:#0B0B0E;
  --accent:#2F4BFF;
  --accent-dark:#1E36D8;
  --h-dark:#111114;
  --body-light:#3E4148;
  --body-dark:#B6BAC1;
  --muted:#9AA0A8;
  --grey:#69727D;
  --hf:'Poppins',"Segoe UI",system-ui,sans-serif;
  --bf:'Roboto Condensed',"Segoe UI",system-ui,sans-serif;
  --wrap:1294px;
  --pad:73px;
  --hdh:104px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink);overscroll-behavior-y:none}
body{margin:0;background:var(--ink);font-family:var(--bf);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto}

/* ---------- Kopfzeile: liegt fest ueber dem Hero. Oben durchsichtig,
     beim Scrollen laeuft sie ins Schwarze - genau wie bei der Referenz. ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;height:var(--hdh);
    display:flex;align-items:stretch;justify-content:space-between;
    transition:background .32s ease, height .32s ease}
.hd.fest{background:var(--ink)}
/* Oben hebt sich der Kontakt-Block mit dem dunklen Akzent von der helle Ecke ab,
   nach dem Scrollen darf er auf Schwarz wieder voll aufleuchten. */
.hd .hd-cta{background:var(--accent-dark)}
.hd.fest .hd-cta{background:var(--accent)}
.hd-l{display:flex;align-items:center;padding-left:var(--pad)}
.hd-logo{font-family:var(--hf);font-weight:800;font-size:23px;letter-spacing:.5px;
         color:#fff;text-transform:uppercase;line-height:1}
.hd-r{display:flex;align-items:stretch;gap:0}
.hd-nav{display:flex;align-items:center;gap:34px;padding-right:36px}
.hd-nav a{font-family:var(--hf);font-weight:600;font-size:19px;letter-spacing:.5px;
          text-transform:uppercase;color:#fff;transition:color .18s}
.hd-nav a:hover{color:var(--accent)}
.hd-cta{display:flex;align-items:center;justify-content:center;
        background:var(--accent);color:#fff;font-family:var(--hf);font-weight:600;
        font-size:19px;letter-spacing:.5px;text-transform:uppercase;border-radius:0;
        padding:0 42px;transition:background .18s}
.hd-cta:hover{background:var(--accent-dark)}
.burger{display:none}

/* ---------- Hero: EIN Verlauf aus der oberen rechten Ecke, wie bei der Referenz ---------- */
.hero{position:relative;overflow:hidden;
  background:radial-gradient(at 100% 0%, var(--accent) 0%, var(--ink) 100%);
  padding:var(--hdh) var(--pad) 0;
  display:flex;justify-content:center}
.hero-in{position:relative;width:100%;max-width:var(--wrap);display:flex;
         align-items:center;justify-content:flex-start;min-height:665px}
.hero-copy{position:relative;z-index:2;padding:30px 0 40px;max-width:800px;flex:0 1 800px}
h1{margin:0;font-family:var(--hf);font-weight:800;font-size:60px;line-height:1;
   letter-spacing:-3.1px;color:#fff}
.hero-sub{margin:12px 0 0;font-family:var(--hf);font-weight:800;font-size:32px;
          line-height:1.06;letter-spacing:-1.4px;color:#fff}

.rating{display:flex;align-items:center;gap:14px;margin:44px 0 0;flex-wrap:wrap}
.rating .rt{font-family:var(--hf);font-weight:800;font-size:17px;letter-spacing:-.2px;color:#fff}
.rating .rs{font-family:var(--bf);font-size:18px;color:rgba(255,255,255,.78)}
.stars{display:flex;gap:3px}
.stars svg{width:19px;height:19px;fill:#fff}

/* Pille in der dunklen Akzentfarbe, direkt daneben ein weisser Kreis - ohne Abstand */
.cta-pair{display:flex;align-items:center;gap:0;margin:38px 0 0}
.pill{display:inline-flex;align-items:center;justify-content:center;
      background:var(--accent-dark);color:#fff;font-family:var(--bf);font-weight:400;
      font-size:18px;letter-spacing:0;border-radius:100px;padding:14px 25px;
      transition:background .18s}
.pill:hover{background:var(--accent)}
.round{width:50px;height:50px;border-radius:50%;background:#fff;
       display:inline-flex;align-items:center;justify-content:center;flex:0 0 50px;
       transition:background .18s}
.round svg{width:19px;height:19px;stroke:var(--ink);stroke-width:2;fill:none}
.round:hover{background:var(--accent)}
.round:hover svg{stroke:#fff}
.round.on-light{background:var(--ink)}
.round.on-light svg{stroke:#fff}
.round.on-light:hover{background:var(--accent)}

.hero-fig{position:absolute;right:0;bottom:0;z-index:1;line-height:0;pointer-events:none}
.hero-fig img{height:668px;width:auto;display:block}

/* ---------- Kundenband: laeuft endlos durch, wie das Logoband der Referenz ---------- */
.band{background:#fff;padding:34px 0;overflow:hidden;position:relative}
.band::before,.band::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;
  pointer-events:none}
.band::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.band::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.band-track{display:flex;width:max-content;animation:lauf 34s linear infinite}
.band:hover .band-track{animation-play-state:paused}
@keyframes lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.band-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:56px;padding:0 46px;font-family:var(--hf);font-weight:800;font-size:19px;
  letter-spacing:.4px;color:#B9BCC3;white-space:nowrap;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.band-track{animation:none}}

/* ---------- Sektionen ---------- */
.sec{padding:118px var(--pad)}
.sec-light{background:var(--paper)}
.sec-dark{background:var(--ink)}
/* Farbflaeche nach dem Eck-Prinzip der Referenz, nicht als Lichtfleck in der Mitte */
.sec-color{background:radial-gradient(at 100% 100%, var(--accent) 0%, var(--ink) 74%)}
.sec-glow{background:radial-gradient(at 0% 100%, #17205c 0%, var(--ink) 64%)}

/* Kleines Label ueber der Ueberschrift (Referenzmuster) */
.eyebrow{margin:0 0 18px;font-family:var(--hf);font-weight:700;font-size:14px;
         line-height:1.2;letter-spacing:1.6px;text-transform:uppercase}
.eyebrow.on-dark{color:#fff}
.eyebrow.on-light{color:var(--accent)}

h2{margin:0;font-family:var(--hf);font-weight:800;font-size:52px;line-height:1;
   letter-spacing:-2.6px}
h2.on-dark{color:#fff}
h2.on-light{color:var(--h-dark)}
h2 .hl{color:var(--accent)}

/* ---------- Sektion 2: Bild bündig links, Text rechts (Referenzmuster) ---------- */
.diag{display:grid;grid-template-columns:minmax(0,555px) minmax(0,1fr);gap:74px;
      align-items:start;max-width:var(--wrap);margin:0 auto}
.diag-fig{line-height:0}
.diag-fig img{width:100%;height:auto}
.diag-lead{margin:20px 0 0;font-family:var(--hf);font-weight:700;font-size:25px;
           line-height:1.25;letter-spacing:-.9px;color:var(--h-dark)}
.diag-p{margin:22px 0 0;font-size:21px;line-height:1.55;color:var(--body-light)}
.diag-punch{margin:28px 0 0;font-family:var(--hf);font-weight:800;font-size:27px;
            line-height:1.15;letter-spacing:-1.1px;color:var(--h-dark)}
.diag .cta-pair{margin-top:34px}

/* ---------- 6er-Raster Schmerz: nur senkrechte Trennlinien, grosse Icons ---------- */
.grid6{display:grid;grid-template-columns:repeat(3,1fr);max-width:var(--wrap);
       margin:74px auto 0}
.pain{padding:0 44px 0 0}
.pain + .pain{border-left:1px solid rgba(255,255,255,.16);padding-left:44px}
.grid6 > :nth-child(4){border-left:0;padding-left:0}
.grid6 > :nth-child(n+4){margin-top:64px}
.ic{width:58px;height:58px;stroke:var(--accent);stroke-width:1.8;fill:none;
    stroke-linecap:round;stroke-linejoin:round;display:block}
.pain h3{margin:26px 0 0;font-family:var(--hf);font-weight:800;font-size:27px;
         line-height:1.12;letter-spacing:-.8px;color:#fff}
.pain p{margin:16px 0 0;font-size:19px;line-height:1.5;color:var(--body-dark)}
.punch{margin:88px auto 0;max-width:var(--wrap);text-align:center;
       font-family:var(--hf);font-weight:800;font-size:31px;line-height:1.3;
       letter-spacing:-1.2px;color:#fff}

/* ---------- Nutzen: bewusst ANDERS aufgebaut als das Schmerz-Raster.
     Zwei Spalten, liegende Zeilen, Haken links neben dem Text - damit die
     beiden Sektionen nicht wie eine Wiederholung wirken. ---------- */
.grid3{display:grid;grid-template-columns:repeat(2,1fr);column-gap:76px;row-gap:0;
       max-width:var(--wrap);margin:64px auto 0}
.gain{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:22px;align-items:start;
      padding:30px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.grid3 > .gain:nth-child(1),.grid3 > .gain:nth-child(2){border-top:1px solid rgba(255,255,255,.14)}
/* Icon in Spalte 1, Überschrift UND Text in Spalte 2 - sonst quetscht der
   Absatz in die 34px-Spalte und bricht nach jedem Wort. */
.gain .ic{grid-column:1;grid-row:1;width:30px;height:30px;margin-top:4px;stroke-width:2.4}
.gain h3{grid-column:2;grid-row:1;margin:0;font-family:var(--hf);font-weight:800;
         font-size:24px;line-height:1.16;letter-spacing:-.7px;color:#fff}
.gain p{grid-column:2;grid-row:2;margin:9px 0 0;font-size:18px;line-height:1.5;
        color:var(--body-dark)}

/* ---------- Doppel-Button: zwei Schaltflaechen, zusammengewachsen.
     Links eckig und weiss mit blauem Telefon, rechts blau mit Brief und
     Text, nur rechts gerundet. Der Farbwechsel ist die Trennung. ---------- */
.combo{display:inline-flex;align-items:stretch;margin:38px 0 0;
       border-radius:0 100px 100px 0;overflow:hidden}
.combo-tel{display:inline-flex;align-items:center;justify-content:center;
       width:58px;flex:0 0 58px;background:#fff;border-radius:0;
       transition:background .18s}
.combo-tel svg{width:22px;height:22px;fill:none;stroke:var(--accent);
       stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
       transition:stroke .18s}
.combo-tel:hover{background:var(--accent)}
.combo-tel:hover svg{stroke:#fff}
.combo-mail{display:inline-flex;align-items:center;gap:11px;
       background:var(--accent);color:#fff;font-family:var(--bf);font-weight:400;
       font-size:18px;padding:16px 30px 16px 26px;border-radius:0 100px 100px 0;
       transition:background .18s}
.combo-mail svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.7;
       stroke-linecap:round;stroke-linejoin:round;flex:0 0 21px}
.combo-mail:hover{background:var(--accent-dark)}
/* Auf heller Flaeche braucht die weisse Haelfte eine Kante,
   sonst verschwindet sie im Untergrund. */
.combo.auf-hell .combo-tel{box-shadow:inset 0 0 0 1.5px rgba(17,17,20,.18)}

/* ---------- Ablauf ---------- */
.ab-head{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;
         max-width:var(--wrap);margin:0 auto}
.ab-note{margin:0;font-size:20px;line-height:1.55;color:var(--body-light);max-width:340px;text-align:right}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;
       max-width:var(--wrap);margin:74px auto 0}
.step{border-top:2px solid var(--h-dark);padding-top:26px}
.step p.step-n{margin:0;font-family:var(--hf);font-weight:800;font-size:60px;line-height:1;
        letter-spacing:-3.4px;color:var(--accent)}
.step h3{margin:14px 0 0;font-family:var(--hf);font-weight:800;font-size:29px;
         line-height:1.1;letter-spacing:-1.1px;color:var(--h-dark)}
.step p{margin:14px 0 0;font-size:21px;line-height:1.55;color:var(--body-light)}

/* ---------- Passt / passt nicht ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:96px;max-width:var(--wrap);margin:0 auto}
.fit-l{margin:0 0 8px;font-family:var(--hf);font-weight:800;font-size:17px;
       letter-spacing:1.7px;text-transform:uppercase}
.fit-yes .fit-l{color:var(--accent)}
.fit-no .fit-l{color:var(--grey)}
.fit ul{list-style:none;margin:0;padding:0}
.fit li{border-top:1px solid rgba(255,255,255,.14);padding:22px 0}
.fit li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.fit-yes li{font-family:var(--hf);font-weight:700;font-size:21px;line-height:1.3;
            letter-spacing:-.6px;color:#fff}
.fit-no li{font-size:21px;line-height:1.4;color:var(--muted)}

/* ---------- Kontakt ---------- */
.kt{text-align:center;max-width:var(--wrap);margin:0 auto}
.kt h2{font-size:64px;line-height:1.06;letter-spacing:-3.2px;max-width:820px;margin:0 auto}
.kt p{margin:26px auto 0;max-width:640px;font-size:22px;line-height:1.55;color:var(--body-dark)}
.kt .cta-pair{justify-content:center;margin-top:40px}
p.kt-data{margin:32px 0 0;font-size:19px;color:var(--muted)}
.kt-data span{padding:0 12px;color:var(--accent)}

/* ---------- Fuss ---------- */
.ft{background:#050506;border-top:1px solid rgba(255,255,255,.10);
    padding:38px var(--pad)}
.ft-in{max-width:var(--wrap);margin:0 auto;display:flex;justify-content:space-between;
       align-items:center;gap:24px;flex-wrap:wrap}
.ft p{margin:0;font-size:18px;color:var(--grey)}
.ft-links{display:flex;gap:26px}
.ft-links a{font-size:18px;color:var(--muted)}
.ft-links a:hover{color:#fff}

.mbar{display:none}

/* =========================== Tablet =========================== */
@media (max-width:1024px){
  :root{--pad:32px;--hdh:88px}

  .hd-nav{gap:22px;padding-right:26px}
  .hd-nav a{font-size:14px}
  .hd-cta{padding:0 28px;font-size:15px}
  .hero-in{min-height:600px;gap:16px}
  .hero-copy{padding:52px 0 62px;flex:0 1 64%;max-width:64%}
  h1{font-size:44px;letter-spacing:-2.1px}
  .hero-sub{font-size:24px;letter-spacing:-.9px}
  .rating{max-width:58%}
  .combo{margin-top:32px}
  .combo-mail{font-size:17px;padding:14px 26px 14px 22px}
  .combo-tel{width:52px;flex:0 0 52px}
  .hero-fig img{height:520px}
  .sec{padding:84px var(--pad)}
  h2{font-size:40px;letter-spacing:-1.9px}
  .diag{grid-template-columns:1fr;gap:38px}
  .diag-fig{max-width:520px}
  .grid6{grid-template-columns:repeat(2,1fr);margin-top:56px}
  .pain{padding:0 32px 0 0}
  .pain + .pain{padding-left:32px}
  .grid6 > :nth-child(3){border-left:0;padding-left:0}
  .grid6 > :nth-child(4){border-left:1px solid rgba(255,255,255,.16);padding-left:32px}
  .grid6 > :nth-child(n+3){margin-top:48px}
  .grid3{column-gap:44px}
  .band-item{padding:0 34px;font-size:17px}
  .steps{grid-template-columns:1fr;gap:34px}
  .ab-head{flex-direction:column;align-items:flex-start;gap:18px}
  .ab-note{text-align:left;max-width:none}
  .fit{gap:48px}
  .kt h2{font-size:44px;letter-spacing:-2.1px;max-width:620px}
  .punch{font-size:25px;margin-top:64px}
}

/* =========================== Mobil =========================== */
@media (max-width:767px){
  :root{--pad:18px;--hdh:72px}

  .hd-nav{display:none}
  .burger{display:flex;align-items:center;justify-content:center;align-self:center;width:44px;height:44px;
          background:none;border:0;cursor:pointer;margin-right:6px}
  .burger span{display:block;width:24px;height:2px;background:#fff;position:relative}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:24px;
          height:2px;background:#fff}
  .burger span::before{top:-7px}.burger span::after{top:7px}
  .hd-cta{padding:0 20px;font-size:13px;letter-spacing:.8px}
  .hd-logo{font-size:17px}
  .hd-l{padding-left:var(--pad)}

  /* Portrait als Hintergrundbild der Sektion, nicht als zweite Spalte.
     Derselbe Eckverlauf wie auf Desktop - die Referenz wechselt ihn nicht.
     Der dunkle Schleier links ist nur so stark, wie er ueber dem weissen
     Hemd noetig ist, damit die Farbe traegt. */
  .hero{padding:calc(var(--hdh) + 40px) var(--pad) 26px;min-height:584px;display:block;
    background-color:var(--ink);
    background-image:
      linear-gradient(97deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.66) 44%,
                             rgba(0,0,0,.16) 70%, rgba(0,0,0,0) 88%),
      url(assets/img/portrait-desktop.webp),
      radial-gradient(at 100% 0%, var(--accent) 0%, var(--ink) 100%);
    background-repeat:no-repeat,no-repeat,no-repeat;
    background-position:0 0, right -79px top 112px, 0 0;
    background-size:auto, 372px 472px, auto}
  .hero-in{min-height:0;display:block}
  .hero-fig{display:none}
  .hero-copy{padding:0;max-width:100%;flex:none}
  h1{font-size:36px;line-height:.95;letter-spacing:-1.3px;max-width:64%}
  .hero-sub{font-size:19px;line-height:1.08;letter-spacing:-.6px;max-width:64%;margin-top:13px}
  .rating{margin-top:20px;max-width:62%;gap:7px}
  .rating .rt{font-size:13.5px}
  .rating .rs{font-size:13.5px;line-height:1.35}
  .stars svg{width:15px;height:15px}
  .cta-pair{margin-top:24px;gap:0}
  .combo{margin-top:24px}
  .combo-tel{width:46px;flex:0 0 46px}
  .combo-tel svg{width:19px;height:19px}
  .combo-mail{font-size:15px;padding:13px 22px 13px 18px;gap:9px}
  .combo-mail svg{width:18px;height:18px;flex:0 0 18px}
  .pill{font-size:15px;padding:13px 22px}
  .round{width:44px;height:44px;flex:0 0 44px}
  .round svg{width:17px;height:17px}

  .sec{padding:56px var(--pad)}
  h2{font-size:30px;letter-spacing:-1.2px}
  .diag{gap:28px}
  .diag-lead{font-size:20px}
  .diag-p{font-size:18px}
  .diag-punch{font-size:22px}
  .grid6{grid-template-columns:1fr;margin-top:38px}
  .pain{padding:0 !important;border-left:0 !important}
  .pain + .pain{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.16);
                padding-top:34px;margin-top:34px}
  .grid6 > :nth-child(n+3),.grid6 > :nth-child(n+4){margin-top:34px}
  .ic{width:46px;height:46px}
  .pain h3{font-size:23px}
  .pain p{font-size:17px}
  .grid3{grid-template-columns:1fr;column-gap:0;row-gap:0;margin-top:34px}
  .gain{padding:22px 0;grid-template-columns:26px minmax(0,1fr);column-gap:16px}
  .grid3 > .gain:nth-child(2){border-top:0}
  .gain .ic{width:24px;height:24px;margin-top:3px}
  .gain h3{font-size:20px}
  .gain p{font-size:17px}
  .band{padding:22px 0}
  .band-item{padding:0 24px;font-size:15px;height:44px}
  .band::before,.band::after{width:52px}
  .punch{font-size:21px;margin-top:44px;text-align:left}
  .steps{margin-top:38px;gap:28px}
  .step-n{font-size:44px;letter-spacing:-2.4px}
  .step h3{font-size:23px}
  .step p{font-size:18px}
  .ab-note{font-size:18px}
  .fit{grid-template-columns:1fr;gap:38px}
  .fit-yes li{font-size:18px}
  .fit-no li{font-size:18px}
  .kt h2{font-size:30px;letter-spacing:-1.2px;max-width:none}
  .kt p{font-size:18px}
  .kt .cta-pair .round{display:none}
  .ft{padding:28px var(--pad) 96px}
  .ft-in{flex-direction:column;align-items:flex-start;gap:14px}

  /* Feste Kontaktleiste unten wie bei der Referenz */
  .mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
        background:rgba(18,18,20,.94);border:1px solid rgba(255,255,255,.12);
        border-radius:999px;padding:12px 8px;justify-content:space-around;
        backdrop-filter:blur(8px)}
  .mbar a{display:flex;align-items:center;justify-content:center;width:52px;height:40px}
  .mbar svg{width:22px;height:22px;stroke:#fff;stroke-width:1.7;fill:none;
            stroke-linecap:round;stroke-linejoin:round}
}

/* ================= Ergaenzungen fuer die WordPress-Umgebung ================= */

/* Sprunglink fuer Tastatur und Screenreader */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;
      padding:14px 22px;font-family:var(--hf);font-weight:700;font-size:15px}
.skip:focus{left:0}

/* Der Logo-Schriftzug ist jetzt ein Link */
a.hd-logo{color:#fff;display:inline-block}
a.hd-logo:hover{color:var(--accent)}

/* Fehlende Rechtsseiten sichtbar als Platzhalter, nicht als toter Link */
.ft-fehlt{font-size:18px;color:var(--grey)}

/* Menue auf dem Handy */
.mobilmenue{display:none}
.burger.offen span{background:transparent}
.burger.offen span::before{top:0;transform:rotate(45deg)}
.burger.offen span::after{top:0;transform:rotate(-45deg)}
body.menue-offen{overflow:hidden}

/* Textseiten: Impressum, Datenschutz, Beitraege, 404 */
.text{max-width:820px;margin:0 auto}
.text .h2{margin:0 0 24px;font-family:var(--hf);font-weight:800;font-size:44px;
          line-height:1.05;letter-spacing:-2.1px;color:var(--h-dark)}
.text .h2 a{color:inherit}
.text .h2 a:hover{color:var(--accent)}
.beitrag + .beitrag{margin-top:54px;padding-top:54px;border-top:1px solid rgba(17,17,20,.14)}
.fliesstext{font-size:20px;line-height:1.62;color:var(--body-light)}
.fliesstext > * + *{margin-top:20px}
.fliesstext h2,.fliesstext h3,.fliesstext h4{font-family:var(--hf);font-weight:800;
          letter-spacing:-1px;color:var(--h-dark);margin-top:40px;line-height:1.15}
.fliesstext h2{font-size:30px}
.fliesstext h3{font-size:24px}
.fliesstext h4{font-size:20px}
.fliesstext a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.fliesstext ul,.fliesstext ol{padding-left:24px}
.fliesstext li + li{margin-top:8px}
.fliesstext strong{color:var(--h-dark)}
.fliesstext img{height:auto;margin:12px 0}
.fliesstext table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.fliesstext td,.fliesstext th{border:1px solid rgba(17,17,20,.16);padding:10px 12px;text-align:left}
.pagination{margin-top:48px;font-size:18px}
.pagination .page-numbers{padding:8px 14px;color:var(--body-light)}
.pagination .current{background:var(--accent);color:#fff;border-radius:4px}

@media (max-width:1024px){
  .text .h2{font-size:34px;letter-spacing:-1.5px}
  .fliesstext{font-size:19px}
}

@media (max-width:767px){
  .text .h2{font-size:27px;letter-spacing:-1.1px}
  .fliesstext{font-size:18px}
  .fliesstext h2{font-size:24px}
  .fliesstext h3{font-size:21px}

  /* Aufklappmenue unter der Kopfzeile */
  .mobilmenue{display:block;position:fixed;top:var(--hdh);left:0;right:0;z-index:49;
              background:var(--ink);border-top:1px solid rgba(255,255,255,.12);
              padding:8px var(--pad) 20px}
  .mobilmenue[hidden]{display:none}
  .mobilmenue a{display:block;padding:15px 0;font-family:var(--hf);font-weight:700;
                font-size:18px;letter-spacing:.4px;text-transform:uppercase;color:#fff;
                border-bottom:1px solid rgba(255,255,255,.10)}
  .mobilmenue a:last-child{border-bottom:0}
  .burger span,.burger span::before,.burger span::after{transition:transform .2s,background .2s,top .2s}
}


/* ===== Feste Kontaktleiste: Tablet und Mobil, erst unterhalb des Heros =====
   Sie faehrt ein, sobald der Hero nach oben aus dem Bild gescrollt ist, und
   wieder aus, sobald man in den Hero zurueckkehrt. Gesteuert per Klasse in
   site.js, damit ohne JavaScript nichts Halbes stehen bleibt. */
@media (max-width:1024px){
  .mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
        background:rgba(18,18,20,.94);border:1px solid rgba(255,255,255,.12);
        border-radius:999px;padding:12px 8px;justify-content:space-around;
        -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
        opacity:0;visibility:hidden;transform:translateY(140%);
        transition:opacity .3s ease, transform .3s ease, visibility .3s}
  .mbar.sichtbar{opacity:1;visibility:visible;transform:translateY(0)}
  .mbar a{display:flex;align-items:center;justify-content:center;width:52px;height:40px}
  .mbar svg{width:22px;height:22px;stroke:#fff;stroke-width:1.7;fill:none;
            stroke-linecap:round;stroke-linejoin:round}
  /* Platz, damit die Leiste die Fusszeile nicht verdeckt */
  .ft{padding-bottom:104px}
}
@media (prefers-reduced-motion:reduce){
  .mbar{transition:none}
}