/* Selbst gehostete Schrift DM Sans (DSGVO: keine Google-Fonts-Verbindung) */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('fonts/dm-sans-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:100 1000;font-display:swap;src:url('fonts/dm-sans-latin-italic.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('fonts/dm-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06;}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:100 1000;font-display:swap;src:url('fonts/dm-sans-latin-ext-italic.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06;}

/* =========================================================
   Erwin Strobl – erwinstrobl.at
   Corporate Design: Blau #0071C1 · Dunkelblau #003078/#022897
   Gold #F5A623 · Schrift DM Sans · pillenförmige Buttons
   ========================================================= */

:root{
  --blue:#0071C1;
  --blue-dark:#003078;
  --blue-darker:#022897;
  --gold:#F5A623;
  --gold-dark:#e0900d;
  --gold-on-blue:#FFF0CC; /* helles Gold, lesbar auf blauem band-ink-Hintergrund (Erwins Barrierefreiheits-Fix vom 01.08.) */
  --lightblue:#75C7FF;
  --lightblue-bg:#EBF7FF;
  --ink:#0b1723;
  --ink-soft:#33414f;
  --paper:#ffffff;
  --muted:#5a6472;
  --line:#e4ebf2;
  --shadow:0 18px 50px rgba(0,48,120,.10);
  --shadow-sm:0 8px 24px rgba(0,48,120,.10);
  --radius:18px;
  --radius-lg:26px;
  --maxw:1140px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"DM Sans",-apple-system,Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

h1,h2,h3{line-height:1.12;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem);font-weight:900}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{color:var(--ink-soft)}
strong{color:var(--ink)}

.eyebrow{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin-bottom:16px;
}
.lead{font-size:clamp(1.05rem,1.8vw,1.28rem);color:var(--ink-soft)}
.muted{color:var(--muted)}
.center{text-align:center}
.gold{color:var(--gold-dark)}
.blue{color:var(--blue)}

/* ---------- Buttons (pill) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:inherit;font-weight:700;font-size:1rem;
  padding:15px 30px;border-radius:100px;border:2px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  line-height:1;white-space:nowrap;
}
.btn-cta{background:var(--gold);color:#3a2600;box-shadow:0 10px 26px rgba(245,166,35,.36)}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(245,166,35,.46)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(0,113,193,.30)}
.btn-blue:hover{transform:translateY(-2px);background:var(--blue-dark)}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-ghost{background:#fff;color:var(--blue);box-shadow:var(--shadow-sm)}

/* CTA "in Kürze" state (passiv) */
.btn-soon{
  position:relative;background:var(--gold);color:#3a2600;cursor:default;
  box-shadow:0 10px 26px rgba(245,166,35,.30);
}
.btn-soon .dot{width:9px;height:9px;border-radius:50%;background:#3a2600;opacity:.55;
  animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:.8}}
.cta-note{font-size:.9rem;color:var(--muted);margin-top:12px}

/* ---------- Header / Nav ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;
}
.site-head.scrolled{border-color:var(--line);box-shadow:0 6px 20px rgba(0,48,120,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.16rem;letter-spacing:-.02em}
.brand img{width:38px;height:38px;object-fit:contain}
.brand .nm{color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-weight:500;color:var(--ink-soft);font-size:1rem;position:relative;padding:6px 0}
.nav-links a:hover{color:var(--blue)}
.nav-links a.active{color:var(--ink);font-weight:700}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .btn{padding:11px 22px;font-size:.95rem}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  .nav-links{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:8px 22px 20px;transform:translateY(-140%);transition:transform .3s ease;
    box-shadow:0 20px 40px rgba(0,48,120,.10);
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{width:100%;padding:14px 0;border-bottom:1px solid var(--line);font-size:1.06rem}
  .nav-cta .btn{display:none}
  .burger{display:flex}
}

/* ---------- Sections ---------- */
section{padding:clamp(56px,8vw,104px) 0}
.band{background:#F4F7FA}
.band-ink{background:linear-gradient(165deg,var(--blue-darker),var(--blue) 70%);color:#fff}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink p{color:rgba(255,255,255,.9)}
.sec-head{max-width:760px;margin:0 auto 48px}
.sec-head.center{text-align:center}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(64px,7vw,96px) 0;overflow:hidden;
  background:linear-gradient(160deg,#0A3D91 0%,#1E7FC7 78%)}
.hero::before{
  content:"";position:absolute;top:-18%;right:-10%;width:60vw;height:60vw;max-width:760px;max-height:760px;
  background:none;z-index:-1;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero .eyebrow{color:#FFE1A0}
.hero h1{color:#fff}
.hero h1 span{color:#F5A623}
.hero .lead{margin-top:20px;max-width:30ch;color:rgba(255,255,255,.95)}
.hero .cta-note{color:rgba(255,255,255,.88)}
.hero-cta{margin-top:30px;display:flex;flex-direction:column;gap:0;align-items:flex-start}
.hero-media{position:relative}
.hero-media img{max-width:100%;max-height:520px;width:auto;position:relative;z-index:2;object-fit:contain;object-position:bottom;margin:0 auto;display:block}
.hero-badge{
  position:absolute;z-index:3;background:#fff;border-radius:16px;box-shadow:var(--shadow-sm);
  padding:8px 11px;display:flex;align-items:center;gap:7px;font-weight:700;font-size:.7rem;
}
.hero-badge .num{font-size:1rem;font-weight:900;color:var(--blue);line-height:1}
.hero-badge.b1{left:-14px;bottom:34px}
.hero-badge.b2{right:12px;top:6px}
.hero-media .blob{position:absolute;inset:auto -22px -22px auto;width:66%;height:70%;
  background:linear-gradient(160deg,var(--blue),var(--blue-darker));border-radius:var(--radius-lg);z-index:1;opacity:.10}

@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-media{order:-1;max-width:420px;margin:0 auto}
  .hero-cta{align-items:center;text-align:center;width:100%}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero-badge{padding:9px 12px;gap:8px;font-size:.72rem;border-radius:12px}
  .hero-badge .num{font-size:1.05rem}
  .hero-badge.b1{left:4px;bottom:26px}
  .hero-badge.b2{right:4px;top:auto;bottom:26px}
}

/* ---------- Trust / Bekannt aus ---------- */
.trust{padding:clamp(28px,4vw,46px) 0}
.trust p{text-align:center;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:16px}
.trust-row{display:flex;align-items:center;gap:clamp(24px,4vw,54px)}
.tl-label{flex:none;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;white-space:nowrap}
.trust-chip{font-weight:800;font-size:1.12rem;color:var(--blue-dark);opacity:.8;letter-spacing:-.01em}
.trust-chip small{display:block;font-weight:500;font-size:.62rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}

/* ---------- Feature grid / cards ---------- */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow-sm)}
.band .card{background:#fff}
.card .ic{width:50px;height:50px;border-radius:14px;background:var(--lightblue-bg);display:grid;place-items:center;margin-bottom:18px;color:var(--blue)}
.card .ic svg{width:26px;height:26px}
.card h3{margin-bottom:8px}
.card p{font-size:1rem}
@media(max-width:820px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

/* ---------- Split rows (image + text) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
/* Vorher/Heute-Bild (Startseite) soll am PC RECHTS stehen, Text links.
   Deshalb bekommt hier das Bild die spätere Reihenfolge, nicht der Text
   (korrigiert 31.07.2026, Erwin: "Es gehört am PC glaube ich rechts"). */
.split.reverse .split-img{order:2}
.split-img img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.split-img .credit{display:block;text-align:right;font-size:.76rem;color:var(--muted);margin-top:8px}
.foot-gf{font-size:.95rem;margin:2px 0 12px}
.split-text h2{margin-bottom:16px}
.split-text p+p{margin-top:16px}
.plan-list{list-style:none;display:grid;gap:20px;margin-top:22px}
.plan-list li{display:flex;gap:16px;align-items:flex-start}
.plan-list .pic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--lightblue-bg);display:grid;place-items:center;color:var(--blue)}
.plan-list .pic svg{width:24px;height:24px}
.plan-list strong{display:block;font-size:1.12rem;margin-bottom:3px}
.plan-list li>div p{margin:0;color:var(--ink-soft);font-size:1rem}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ba-pair figure{margin:0}
.ba-pair img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center;border-radius:var(--radius);box-shadow:var(--shadow);display:block}
.ba-pair figcaption{text-align:center;font-weight:700;font-size:.82rem;color:var(--muted);margin-top:8px;text-transform:uppercase;letter-spacing:.08em}
.figure-portrait{max-width:330px}
.figure-portrait img{border-radius:16px;box-shadow:var(--shadow)}
@media(max-width:820px){
  .split{grid-template-columns:1fr;gap:26px}
  .split.reverse .split-img{order:0}
  .figure-portrait{margin:0 auto}
}

/* small circular/rounded Erwin portrait */
.erwin-foto{max-width:190px}
.erwin-foto img{border-radius:16px;box-shadow:var(--shadow-sm)}

/* ---------- Problem list / check list ---------- */
.ticks{list-style:none;display:grid;gap:14px;margin-top:8px}
.ticks li{display:flex;gap:13px;align-items:flex-start;font-size:1.05rem}
.ticks li svg{flex:0 0 24px;width:24px;height:24px;margin-top:2px}
.ticks.neg li svg{color:var(--muted)}
.ticks.pos li svg{color:var(--blue)}

/* ---------- Selbstbestimmung band (von innen nach außen) ---------- */
.self{position:relative;text-align:center}
.self .kicker{color:var(--gold);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem}
.self h2{margin:14px auto 10px;max-width:16ch}
.self .flow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:30px;font-weight:800;font-size:clamp(1rem,2vw,1.35rem)}
.self .flow span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);padding:10px 20px;border-radius:100px}
.self .flow .arw{background:none;border:0;color:var(--gold);font-size:1.3rem}

/* Slide 5 – Leuchtkern-Bild links, Text rechts */
.self-split{display:flex;align-items:center;gap:clamp(24px,4.5vw,56px)}
.self-media{flex:1 1 46%;min-width:0}
.self-media img{width:100%;max-height:460px;object-fit:contain;object-position:center;display:block}
.self-copy{flex:1 1 54%}
.self-copy .kicker{color:var(--gold);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem}
.self-copy h2{margin:12px 0 12px;color:#fff}
.self-copy .lead{max-width:48ch;margin:0}
.self-close{margin-top:26px;font-weight:800;font-size:1.3rem;color:#fff}
@media(max-width:820px){
  .self-split{flex-direction:column;gap:18px;text-align:center}
  .self-media{width:100%;flex:none}
  .self-media img{max-height:250px}
  .self-copy .lead{margin:0 auto}
}

/* Problem – Auf-und-Ab-Welle (transparenter Hintergrund) */
.prob-figure{max-width:680px;margin:2px auto 30px}
.prob-figure img{width:100%;display:block}

/* ---------- FAQ ---------- */
.faq{max-width:800px;margin:0 auto;display:grid;gap:14px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 22px;box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:1.08rem;padding:18px 34px 18px 0;position:relative;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--blue);font-weight:700;transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 20px;font-size:1.02rem}

/* ---------- CHRIS meter ---------- */
.meter{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:26px 28px;max-width:640px;margin:0 auto}
.meter .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;flex-wrap:wrap;gap:6px}
.meter .big{font-size:1.9rem;font-weight:900;color:var(--blue)}
.meter .bar{height:14px;border-radius:100px;background:var(--lightblue-bg);overflow:hidden}
.meter .fill{height:100%;width:22%;border-radius:100px;background:linear-gradient(90deg,var(--blue),var(--gold))}
.tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-dark);background:#fff5e4;border:1px solid #ffe4b8;padding:4px 10px;border-radius:100px}

/* ---------- CTA closing block ---------- */
.cta-final{text-align:center}
.cta-final .btn{margin-top:6px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
.contact-list{list-style:none;display:grid;gap:18px;margin:26px 0}
.contact-list li{display:flex;gap:14px;align-items:center;font-size:1.08rem;font-weight:600}
.contact-list .ic{width:46px;height:46px;border-radius:12px;background:var(--lightblue-bg);color:var(--blue);display:grid;place-items:center;flex:0 0 auto}
.socials{display:flex;gap:12px;margin-top:8px}
.socials a{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);transition:.18s}
.socials a:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px}
.form label{display:block;font-weight:700;font-size:.92rem;margin:0 0 6px}
.form .fld{margin-bottom:18px}
.form input,.form textarea{width:100%;font-family:inherit;font-size:1rem;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;background:#fbfdff;color:var(--ink)}
.form input:focus,.form textarea:focus{outline:3px solid rgba(0,113,193,.55);outline-offset:2px;border-color:var(--blue);background:#fff}
.form textarea{min-height:120px;resize:vertical}
.form .consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--muted);margin-bottom:18px}
.form .consent input{width:auto;margin-top:3px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* ---------- Warteliste ---------- */
.waitlist{max-width:540px;margin:26px auto 0;display:flex;flex-direction:column;gap:12px}
.waitlist .row{display:flex;gap:10px}
.waitlist input[type=text],.waitlist input[type=email]{flex:1;min-width:0;font-family:inherit;font-size:1rem;padding:15px 18px;border:0;border-radius:100px;background:#fff;color:var(--ink)}
.waitlist input::placeholder{color:#9aa6b2}
.waitlist input:focus{outline:3px solid rgba(245,166,35,.5)}
.waitlist .btn{justify-content:center;white-space:nowrap}
.waitlist .consent{display:flex;gap:9px;align-items:flex-start;font-size:.82rem;color:rgba(255,255,255,.82);text-align:left;line-height:1.45}
.waitlist .consent input{margin-top:3px;flex:0 0 auto}
.waitlist .consent a{color:#fff;text-decoration:underline}
@media(max-width:560px){.waitlist .row{flex-direction:column}}

/* ---------- Legal pages ---------- */
/* WICHTIG: .legal .wrap bekommt KEINE eigene max-width mehr. Vorher stand hier
   max-width:820px, das hat den Inhalt in einer schmaleren, neu zentrierten Box
   angezeigt als die Überschrift oben im Hero – dadurch fing der Fließtext
   weiter rechts an als "Impressum"/"Datenschutzerklärung" usw. Jetzt startet
   der Wrap gleich weit links wie der Hero, die Lesebreite wird stattdessen an
   den Textelementen selbst begrenzt (korrigiert 31.07.2026). */
.legal{padding:clamp(40px,6vw,72px) 0}
.legal h1{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:8px;max-width:820px}
.legal .updated{color:var(--muted);font-size:.9rem;margin-bottom:34px;max-width:820px}
.legal h2{font-size:1.35rem;margin:34px 0 10px;max-width:820px}
.legal h3{font-size:1.1rem;margin:22px 0 6px;max-width:820px}
.legal p{margin-bottom:12px;color:var(--ink-soft);max-width:820px}
.legal ul{margin:0 0 14px 20px;max-width:820px}
.legal li{margin-bottom:6px;color:var(--ink-soft)}
.legal a{color:var(--blue);text-decoration:underline}
.legal .back{display:inline-block;margin-bottom:26px;font-weight:700;color:var(--blue)}

/* ---------- Footer ---------- */
.site-foot{background:#081826;color:#c7d3df;padding:60px 0 26px;font-size:.96rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.foot-brand img{width:40px;height:40px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}
.foot-brand .nm{font-weight:800;font-size:1.15rem;color:#fff}
.site-foot p{color:#93a3b3;max-width:34ch}
.foot-h{color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.foot-links{list-style:none;display:grid;gap:10px}
.foot-links a:hover{color:#fff}
/* Rechte Footer-Spalte (Recht-Links): 2 Spalten x 2 Zeilen statt 4 Zeilen,
   damit alle drei Footer-Spalten gleich hoch sind (Wunsch Erwin 28.07.2026). */
.foot-legal{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:10px}
@media(max-width:760px){.foot-legal{grid-template-columns:1fr}}
.foot-soc{display:flex;gap:10px;margin-top:14px}
.foot-soc a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:.18s}
.foot-soc a:hover{background:var(--blue)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.85rem;color:#7d8da0}
.foot-bottom a{color:#93a3b3}.foot-bottom a:hover{color:#fff}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:30px}}

/* ---------- Cookie-Banner (aus der bestätigten Landingpage-Vorlage) ---------- */
.cookie-overlay{position:fixed;inset:0;background:rgba(0,12,20,.55);z-index:9998;display:flex;align-items:flex-end;justify-content:center;}
@media (min-width:760px){.cookie-overlay{align-items:center;}}
.cookie-banner{position:relative;z-index:9999;background:#fff;color:var(--ink);max-width:520px;width:100%;margin:0 16px 16px;border-radius:14px;padding:26px 24px;box-shadow:0 12px 40px rgba(0,0,0,.3);max-height:85vh;overflow-y:auto;}
@media (min-width:760px){.cookie-banner{margin:16px;}}
.cookie-banner h2{font-size:19px;margin:0 0 10px;color:var(--blue-dark);}
.cookie-banner p{font-size:14.5px;margin:0 0 18px;color:var(--muted);}
.cookie-banner a{color:var(--blue);font-weight:bold;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
.cookie-tabs{display:flex;gap:20px;border-bottom:1px solid #e8edf2;margin:0 0 18px;}
.cookie-tab{background:none;border:none;border-bottom:2px solid transparent;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--muted);padding:0 0 10px;cursor:pointer;}
.cookie-tab.active{color:var(--blue);border-bottom-color:var(--blue);}
.cookie-cats{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0;}
.cookie-cat-toggle{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);cursor:pointer;}
.cookie-cat-toggle input{width:18px;height:18px;flex:none;}
.cookie-cat{padding:12px 0;border-bottom:1px solid #e8edf2;}
.cookie-cat:last-child{border-bottom:none;}
.cookie-cat .cat-name{font-weight:bold;font-size:14.5px;color:var(--ink);margin-bottom:4px;}
.cookie-cat .cat-desc{font-size:13.5px;color:var(--muted);margin:0;}
.cookie-cats{margin-bottom:6px;}
.cookie-btns{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
@media (min-width:480px){.cookie-btns{flex-direction:row;}}
.cookie-btn{flex:1 1 0;font-family:inherit;font-size:15px;font-weight:700;padding:13px 16px;border-radius:100px;cursor:pointer;border:2px solid var(--blue);text-align:center;}
.cookie-btn.accept{background:#fff;color:var(--blue);}
.cookie-btn.save{background:var(--blue);color:#fff;}
.cookie-btn.reject{background:#fff;color:var(--muted);border-color:#d8e2ea;font-size:13.5px;font-weight:500;padding:8px 16px;}
.cookie-reject-row{text-align:center;margin-top:12px;}
.cookie-settings-fab{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:9997;height:60px;width:8px;padding:0;border-radius:0 6px 6px 0;background:rgba(0,48,120,.35);color:#fff;border:none;font-family:inherit;cursor:pointer;display:none;align-items:center;overflow:hidden;white-space:nowrap;transition:width .2s ease, background .2s ease;}
.cookie-settings-fab:hover{width:150px;background:var(--blue-dark);}
.cookie-settings-fab .fab-label{font-size:12.5px;padding-left:14px;opacity:0;transition:opacity .15s ease;}
.cookie-settings-fab:hover .fab-label{opacity:1;}

/* ---------- Reveal animation (dezent) ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn-soon .dot{animation:none}
}

/* ---------- Bekannt aus – Balken (verbessert) ---------- */
.trust-bar{display:flex;justify-content:center;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;max-width:760px;margin:0 auto}
.trust-bar .ti{flex:1;padding:20px 16px;text-align:center;border-right:1px solid var(--line)}
.trust-bar .ti:last-child{border-right:0}
.trust-bar .ti b{display:block;font-size:1.15rem;color:var(--blue-dark);letter-spacing:-.01em}
.trust-bar .ti small{display:block;margin-top:4px;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
@media(max-width:560px){.trust-bar{flex-direction:column}.trust-bar .ti{border-right:0;border-bottom:1px solid var(--line)}.trust-bar .ti:last-child{border-bottom:0}}

/* ---------- Problem – zentriert, 4 Punkte ---------- */
.prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:840px;margin:0 auto}
.prob-grid .p{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow-sm);font-weight:600;color:var(--ink);display:flex;gap:12px;align-items:flex-start;font-size:1.05rem}
.prob-grid .p svg{flex:0 0 22px;width:22px;height:22px;color:var(--muted);margin-top:3px}
@media(max-width:640px){.prob-grid{grid-template-columns:1fr}}

/* ---------- Fluss – nummerierter Stepper (von innen nach außen) ---------- */
.flow-steps{display:flex;justify-content:center;align-items:flex-start;flex-wrap:nowrap;margin-top:38px}
.flow-steps .st{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:110px;max-width:170px;flex:1}
.flow-steps .st .n{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid var(--gold);color:#fff;display:grid;place-items:center;font-weight:900;font-size:1.1rem}
.flow-steps .st .l{font-weight:700;font-size:.98rem;color:#fff;line-height:1.3}
.flow-steps .cn{align-self:flex-start;color:var(--gold);margin-top:14px;font-size:1.4rem;flex:0 0 auto;padding:0 2px}
@media(max-width:640px){
  .flow-steps{flex-direction:column;align-items:stretch;max-width:320px;margin-left:auto;margin-right:auto}
  .flow-steps .st{flex-direction:row;max-width:none;min-width:0;gap:16px;text-align:left}
  .flow-steps .cn{align-self:flex-start;margin:4px 0 4px 22px;transform:rotate(90deg)}
}

/* ---------- Bekannt aus – echte Logos ---------- */
.trust-logos{flex:1;display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,44px);padding:2px 0}
.trust-logos .tl-label{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.trust-logos img{max-height:48px;max-width:100%;width:auto;object-fit:contain;display:block}
.trust-logos img:nth-child(1){max-height:42px}
.trust-logos img:nth-child(2){max-height:66px}
.trust-logos img:nth-child(3){max-height:40px}
@media(max-width:560px){.trust-row{flex-direction:column;gap:16px}.trust-logos{width:100%;gap:14px}.trust-logos img:nth-child(1){max-height:30px}.trust-logos img:nth-child(2){max-height:48px}.trust-logos img:nth-child(3){max-height:29px}}
/* Problem-Grid: 3 Spalten */
.prob-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.prob-grid{grid-template-columns:1fr}}

/* ---------- Footer kompakt + einheitlich (25.07.2026) ----------
   Gilt fuer ALLE Branding-Seiten (Start, CHRIS, Ueber Erwin, Kontakt, Rechtsseiten).
   NICHT fuer Landingpages/Verkaufsseiten (eigene Ordner, eigenes CSS). */
.site-foot{padding:26px 0 16px;font-size:.90rem}
.site-foot .foot-grid{gap:28px;align-items:stretch}
.site-foot .foot-grid>div{display:flex;flex-direction:column;justify-content:center}
.site-foot .foot-brand{margin-bottom:10px}
.site-foot .foot-brand img{width:34px;height:34px}
.site-foot .foot-h{margin-bottom:11px}
.site-foot .foot-links{gap:7px;margin-top:4px}
.site-foot p{margin-top:6px}
/* Haftungshinweis: eigene schmale Zeile ganz unten, gut lesbar (Kontrast 8,7:1). */
.site-foot p.foot-disclaimer{max-width:none;margin:20px 0 0;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;line-height:1.55;color:#a8b6c4;text-align:left}
.site-foot .foot-bottom{margin-top:16px;padding-top:14px;font-size:.82rem;color:#a8b6c4}
.site-foot .foot-bottom a{color:#c7d3df}
/* Kontakt mit Symbolen. Telefonnummer ist bewusst NICHT verlinkt,
   bis WhatsApp Business steht (siehe Projektplan, Punkt 24b). */
.foot-kontakt{gap:11px}
.foot-kontakt li{display:flex;align-items:center;gap:11px;color:#c7d3df}
.foot-kontakt a{display:inline-flex;align-items:center;gap:11px;color:#c7d3df;transition:.16s}
.foot-kontakt a:hover{color:#fff}
.foot-kontakt .ic{flex:none;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.09);
  display:grid;place-items:center;transition:.16s}
.foot-kontakt .ic svg{width:16px;height:16px}
.foot-kontakt a:hover .ic{background:var(--blue)}

/* ---------- Tastatur-Fokus deutlich sichtbar (WCAG 2.4.7) ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:6px;
}
.site-foot a:focus-visible{outline-color:#F5A623}
/* Fuss-Links ueberall leicht treffbar (min. 24px hoch, WCAG 2.5.8) */
.site-foot .foot-links a{display:inline-block;padding:4px 0;min-height:24px}
.site-foot .foot-bottom a{display:inline-block;padding:3px 0;min-height:24px}

/* --- Kontakt-Formular Ergänzungen (27.07.2026) --- */
.form select{width:100%;font-family:inherit;font-size:1rem;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;background:#fbfdff;color:var(--ink)}
.form select:focus{outline:3px solid rgba(0,113,193,.55);outline-offset:2px;border-color:var(--blue);background:#fff}
.form .req{color:#c0392b;font-weight:700}
.form .form-hint{font-size:.9rem;color:var(--muted);font-weight:700;margin:6px 0 14px}
.form .fld-optional label{font-weight:600;color:var(--muted)}
.email-copy{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:1.08rem;font-weight:600;margin:0 0 8px}
.btn-copy{font:inherit;font-size:.85rem;font-weight:700;padding:7px 15px;border-radius:100px;border:1.5px solid var(--blue);color:var(--blue);background:#fff;cursor:pointer}
.btn-copy:hover{background:var(--lightblue-bg)}
.info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px}
@media(max-width:820px){.info-cards{grid-template-columns:1fr}}

/* --- Kontakt-Formular Feinschliff (27.07.2026) --- */
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.form .row2{grid-template-columns:1fr}}
.form .consent{align-items:flex-start;gap:12px;font-size:.9rem;color:var(--ink);font-weight:500;background:#fbfdff;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px;line-height:1.5}
.form .consent input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--blue)}
.form .consent .req{color:#c0392b}

/* --- Kontakt: Vertrauenspunkte + Foto (27.07.2026) --- */
.trust{list-style:none;padding:0;margin:18px 0;display:grid;gap:12px}
.trust li{display:flex;gap:11px;align-items:center;font-weight:600}
.trust .tick{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:0 0 auto;font-size:.8rem}
.contact-photo{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);object-fit:cover;aspect-ratio:4/3;display:block;margin-bottom:22px}
.photo-ph{width:100%;aspect-ratio:4/3;border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(135deg,#cdd8e4,#eef3f8);display:grid;place-items:center;text-align:center;color:#55697c;font-weight:600;padding:16px;margin-bottom:22px}

/* --- Kontakt: Icon-Hintergrund an Slide angleichen + Footer-Mail-Zeile (27.07.2026) --- */
.contact-list .ic{background:transparent}
.site-foot .foot-kontakt a{display:inline-flex;align-items:center;gap:11px}

/* --- Cookie-Banner kompakter (27.07.2026) – kein Scrollen, alle 4 Reiter --- */
.cookie-banner{padding:20px 22px;max-height:94vh}
.cookie-banner p{font-size:13.5px;line-height:1.45;margin:0 0 9px}
.cookie-tabs{gap:16px;margin:0 0 12px}
.cookie-tab{font-size:14px;padding:0 0 8px}
.cookie-cats{gap:8px 18px}
.cookie-cat{padding:8px 0}
.cookie-cat .cat-name{margin-bottom:2px}
.cookie-cat .cat-desc{font-size:13px}
.cookie-cats{margin-bottom:4px}
.cookie-btns{margin-top:14px;gap:9px}
.cookie-reject-row{margin-top:9px}
.cookie-scope li{margin-bottom:6px}

/* Sehr flache Fenster (Handy-Querformat): Banner noch kompakter */
@media (max-height:440px){
  .cookie-banner{padding:14px 18px;max-height:96vh}
  .cookie-banner p{font-size:12px;line-height:1.35;margin:0 0 6px}
  .cookie-tabs{margin:0 0 8px;gap:12px}
  .cookie-tab{font-size:12.5px;padding:0 0 6px}
  .cookie-cat{padding:5px 0}
  .cookie-cat .cat-name{font-size:12.5px}
  .cookie-cat .cat-desc{font-size:11.5px;line-height:1.3}
  .cookie-btns{margin-top:9px;gap:7px}
  .cookie-reject-row{margin-top:7px}
  .cookie-scope li{margin-bottom:3px}
}

@media (max-height:440px){
  .cookie-banner{padding:12px 16px;max-height:98vh}
  .cookie-tabs{margin:0 0 6px}
  .cookie-cat{padding:3px 0}
  .cookie-cat .cat-desc{font-size:11px;line-height:1.25}
  .cookie-btns{margin-top:8px}
  .cookie-reject-row{margin-top:6px}
}

@media (max-height:440px){
  .cookie-banner{padding:10px 16px}
  .cookie-cat{padding:2px 0}
  .cookie-cat .cat-desc{line-height:1.2}
  .cookie-cat .cat-name{margin-bottom:1px}
}

@media (max-height:440px){
  .cookie-banner{max-height:99vh;margin:6px}
  .cookie-tabs{margin:0 0 5px}
  .cookie-btns{margin-top:6px}
}

/* --- „Wo gilt das?"-Liste sauber wie die Details-Kategorien (27.07.2026) --- */
.cookie-scope{list-style:none;padding:0;margin:0 0 9px}
.cookie-scope li{display:block;padding:8px 0;border-bottom:1px solid #e8edf2;margin:0}
.cookie-scope li:last-child{border-bottom:none}
.scope-dom{display:block;font-weight:bold;font-size:14.5px;color:var(--ink)}
.scope-desc{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.cookie-tabpanel[data-panel="geltung"] .scope-note{font-size:13px}
@media (max-height:440px){
  .cookie-scope li{padding:4px 0;margin:0}
  .scope-dom{font-size:12.5px}
  .scope-desc{font-size:11px;line-height:1.25}
}

/* ---------- Rechtsseiten-Hero (Impressum, Datenschutz, Nutzungsbedingungen) ---------- */
.legal-hero .hero-grid{align-items:center}
.legal-hero .hero-media img{max-height:300px;object-position:center}
@media(max-width:820px){
  .legal-hero .hero-media{max-width:220px}
  .legal-hero .hero-media img{max-height:200px}
}

/* Rechtsseiten: lange Wörter/Links am Handy sauber umbrechen */
.legal-hero h1{overflow-wrap:break-word;hyphens:auto}
.legal a{overflow-wrap:anywhere}

/* =========================================================
   Changelog-Seite (/changelog) – Kurs-Blöcke + Einträge
   ========================================================= */
/* Auch hier: kein eigener schmaler Wrap mehr (gleicher Grund wie bei .legal
   oben, die .updated-Zeile ist über die .legal-Regel schon erfasst) – die
   Lesebreite sitzt jetzt auf den Kurs-Blöcken selbst. */
.changelog-wrap .cl-course{max-width:820px}
.cl-course{margin-bottom:clamp(40px,6vw,64px)}
.cl-course:last-child{margin-bottom:0}
.cl-course-head{margin-bottom:22px}
.cl-course-head h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:6px}
.cl-course-head .cl-sub{color:var(--muted);font-size:.98rem;margin:0}
.cl-entries{list-style:none;margin:0;padding:0}
.cl-entry{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:24px 26px;margin-bottom:18px}
.cl-entry:last-child{margin-bottom:0}
.cl-entry-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px}
.cl-version{font-weight:900;color:var(--blue);font-size:1.15rem;letter-spacing:-.01em}
.cl-date{color:var(--muted);font-size:.92rem}
.cl-cat{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 11px;border-radius:100px;border:1px solid transparent}
.cl-cat.neu{color:#0a6a2f;background:#e5f6ec;border-color:#bfe6cd}
.cl-cat.verbessert{color:var(--blue);background:var(--lightblue-bg);border-color:#c7e6fb}
.cl-cat.behoben{color:#8a5a00;background:#fff5e4;border-color:#ffe4b8}
.cl-cat.sicherheit{color:#8a2b2b;background:#fdeaea;border-color:#f4c9c9}
.cl-desc{color:var(--ink-soft);margin:0 0 14px}
.cl-core{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.98rem;margin:0}
.cl-core .cl-dot{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center}
.cl-core.ja .cl-dot{background:#e5f6ec;color:#0a6a2f}
.cl-core.nein .cl-dot{background:#fdeaea;color:#8a2b2b}
.cl-core .cl-dot svg{width:14px;height:14px}
.cl-core .cl-core-label{color:var(--ink)}
.cl-core .cl-core-val{color:var(--ink)}
@media(max-width:520px){
  .cl-entry{padding:20px 18px}
  .cl-version{font-size:1.05rem}
}

/* =========================================================
   HANDY-UEBERARBEITUNG - Feedback-Video Erwin, 31.07.2026
   Gilt fuer: Hochformat (bis 860px breit) UND gedrehtes Handy
   (bis 1024px breit, aber hoechstens 560px hoch).
   Die PC-Ansicht bleibt unveraendert.
   Beschluesse: Schrift +25 %, Zeilenabstand 1,5, alles zentriert,
   lange Absaetze im Blocksatz mit Silbentrennung, CTA-Button im
   Header sichtbar, Bilder groesser, Vollbild bei allen Bildern.
   ========================================================= */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){

  /* --- 1) Schrift +25 %: Grundmass 16 -> 20 px, Fliesstext 18 -> 22,5 px --- */
  html{font-size:20px}
  body{font-size:22.5px;line-height:1.5}
  p,li,summary,figcaption,label,.lead,.card p,.faq details p{line-height:1.5}

  /* --- 2) Header: CTA-Button ist am Handy sichtbar (war ausgeblendet) --- */
  .nav{height:62px;gap:10px}
  .brand img{width:30px;height:30px}
  .nav-cta{gap:9px}
  .nav-cta .btn{display:inline-flex;font-size:15px;padding:10px 15px;
    white-space:nowrap;line-height:1.1;letter-spacing:-.01em}
  .burger{padding:6px}
  .burger span{width:26px}
  .nav-links{inset:62px 0 auto 0}
  .nav-links a{font-size:19px}

  /* --- 3) Alles zentriert --- */
  main{text-align:center}
  main .sec-head,main .hero-text,main .split-text,main .self-copy,main .legal,
  main .card,main .cta-final{text-align:center}
  .hero-cta{align-items:center;text-align:center}
  .hero .lead,.self-copy .lead,.sec-head{margin-left:auto;margin-right:auto}
  .split-img .credit{text-align:center}
  .ticks li,.prob-grid .p,.contact-list li{justify-content:center;text-align:center}
  .plan-list li{flex-direction:column;align-items:center;gap:10px;text-align:center}
  .plan-list li>div p{text-align:center}
  .faq summary{text-align:center;padding-right:0;padding-left:0}
  .faq summary::after{position:static;transform:none;display:inline-block;margin-left:10px}
  .email-copy{justify-content:center}
  .form label{text-align:center}

  /* --- 4) Lange Absaetze: Blocksatz mit Silbentrennung.
           Die letzte Zeile wird zentriert - dadurch wirken auch
           einzeilige Absaetze mittig und nichts springt. --- */
  main p,main .legal li{
    text-align:justify;text-align-last:center;
    -webkit-hyphens:auto;hyphens:auto;
    max-width:34em;margin-left:auto;margin-right:auto;
  }
  /* Kurze Texte bleiben rein zentriert (kein Blocksatz noetig) */
  main .lead,main .cta-note,main .self-close,main .center,main .muted,
  main .eyebrow,main .kicker,main .foot-gf,main .vid-note,main .credit,
  main .schluss-satz,main .schluss-gold,main .stufen p,main .plan-list p,
  main .form-hint,main .consent{text-align:center;text-align-last:center;hyphens:manual}

  /* --- 5) Bilder: Text zuerst, Bild danach + Bilder groesser --- */
  .hero-media{order:1;max-width:100%}
  .hero-media img{max-height:300px}
  .split-img img,.figure-portrait img{width:100%;max-width:430px;margin:0 auto}
  .figure-portrait{max-width:430px;margin:0 auto}
  .erwin-foto{max-width:260px;margin:0 auto}
  /* Bildpaare OHNE Beschriftung (z. B. Ueber Erwin) untereinander und groesser.
     Das Vorher/Heute-Paar auf der Startseite hat Beschriftungen und
     bleibt bewusst nebeneinander, damit man vergleichen kann. */
  .ba-pair:not(:has(figcaption)){grid-template-columns:1fr;max-width:430px;
    margin-left:auto;margin-right:auto;gap:20px}
  .ba-pair:not(:has(figcaption)) img{aspect-ratio:auto}
  .self-media img{max-height:300px}
  .prob-figure{max-width:100%}

  /* --- 6) Rechtsseiten: Bild groesser, damit man auch bildlich erkennt,
           welche Seite man vor sich hat --- */
  .legal-hero .hero-media{max-width:340px;margin:0 auto}
  .legal-hero .hero-media img{max-height:250px}
  .legal h2{font-size:1.5rem}
  .legal h3{font-size:1.22rem}
  .legal .updated{text-align:center}

  /* --- 7) Kontaktseite: zu grosser Abstand unter
           "Ich freue mich auf Deine E-Mail an" --- */
  .hero-cta{margin-top:16px}
  .js-mail-wrap{margin-top:8px!important}
  .js-mail-note{margin-top:8px!important}

  /* --- 8) Fusszeile: Platz nutzen, groesser, Copyright ganz unten --- */
  .site-foot{text-align:center;font-size:1rem}
  .site-foot p{max-width:none;margin-left:auto;margin-right:auto}
  .site-foot .foot-grid>div{align-items:center}
  .foot-brand{justify-content:center}
  .foot-links{justify-items:center}
  .foot-kontakt li{justify-content:center}
  .foot-kontakt a{justify-content:center}
  .foot-legal{grid-template-columns:1fr;justify-items:center}
  .site-foot p.foot-disclaimer{text-align:center;font-size:.92rem}
  .site-foot .foot-bottom{flex-direction:column-reverse;align-items:center;
    gap:10px;text-align:center;font-size:.9rem}
}

/* =========================================================
   NUR GEDREHTES HANDY (Querformat)
   Bild links, Text rechts - wie am PC, aber mit Handy-Schrift.
   Von Erwin gewaehlte Variante: Bild bis 560px hoch.
   ========================================================= */
@media (max-width:1024px) and (max-height:560px){
  main .hero-text,main .split-text,main .self-copy{text-align:left}
  main .split-text p,main .self-copy p{text-align:justify;text-align-last:left;
    margin-left:0;margin-right:0;max-width:none}
  main .hero-text .lead,main .hero-text .cta-note{text-align:left;text-align-last:left}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
  .hero-media{order:0}
  .hero-cta{align-items:flex-start;text-align:left}
  .split{grid-template-columns:1fr 1fr;gap:26px;align-items:center}
  .self-split{flex-direction:row;text-align:left;gap:26px}
  .hero-media img,.split-img img,.self-media img,.figure-portrait img{
    width:auto;max-width:100%;max-height:560px;margin:0 auto;object-fit:contain}
  .ba-pair:not(:has(figcaption)){grid-template-columns:1fr 1fr;max-width:none}
  .legal-hero .hero-media{max-width:300px}
  .legal-hero .hero-media img{max-height:300px}
  section{padding:38px 0}
}

/* =========================================================
   VOLLBILD FUER ALLE BILDER (Wunsch Erwin 31.07.2026)
   Antippen/Klicken oeffnet das Bild gross. Schliessen mit X,
   Klick daneben oder ESC-Taste. Tastatur-bedienbar.
   ========================================================= */
.zoombar{cursor:zoom-in}
.zoombar:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(6,16,26,.94);
  display:none;align-items:center;justify-content:center;padding:16px}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:88vh;width:auto;height:auto;
  border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:block}
.lightbox .lb-close{position:absolute;top:12px;right:12px;width:52px;height:52px;
  border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.45);
  color:#fff;font-size:26px;font-weight:700;line-height:1;cursor:pointer;
  display:grid;place-items:center}
.lightbox .lb-close:hover{background:rgba(0,0,0,.7)}
.lightbox .lb-close:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.lightbox .lb-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.8);font-size:.9rem}

/* --- Nachbesserung 31.07.2026: nichts darf am Handy seitlich hinausragen --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .btn,.cookie-btn{white-space:normal}
  .hero-grid>*,.split>*,.self-split>*,.grid>*{min-width:0}
  .hero-grid,.split,.grid{max-width:100%}
  .eyebrow{max-width:100%}
  .hero-cta .btn{font-size:19px;padding:14px 22px}
  .hero .lead{max-width:34ch}
}

/* --- Nachbesserung 2 (31.07.2026): Pfeil im Button + Fusszeilen-Hinweis --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .btn svg{width:1.15em;height:1.15em;flex:0 0 auto}
  .hero-cta .btn{max-width:100%}
  .foot-mail-hint{display:none!important}
}

/* --- Feinschliff 31.07.2026 --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  /* Rechtsseiten: Ueberschrift darf nicht mitten im Wort brechen */
  .legal-hero h1{overflow-wrap:normal;word-break:normal;font-size:1.7rem;-webkit-hyphens:auto;hyphens:auto}
  /* Rechtstexte: lange Adressen duerfen umbrechen, sonst reisst der
     Blocksatz grosse Luecken */
  .legal p,.legal li{overflow-wrap:break-word}
  .legal a{overflow-wrap:anywhere}
  /* Haekchen-Listen: Symbol und Text auf einer Hoehe */
  .ticks li{align-items:center}
}
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  /* Silbentrennung frueher zulassen -> weniger Luecken im Blocksatz */
  main p,main li{hyphenate-limit-chars:6 4 3}
  /* Impulsabend/Startseite: 5. Kachel ueber die ganze Breite */
  .facts .fact:last-child:nth-child(odd){grid-column:1 / -1}
}

/* =========================================================
   ===============  H A N D Y   V 2  (31.07.2026)  =========
   Aus dem zweiten Feedback-Video von Erwin. Dieser Block steht
   ganz unten und gewinnt deshalb gegen alles darueber.
   Grundsatz Erwin: "Eine Regel fuer alles geht nicht" -
   deshalb wird die Ausrichtung pro Seite und Abschnitt gesetzt.
   Seiten-Kennung steht am <body>: s-start, s-chris, s-erwin,
   s-kontakt, s-recht.
   ========================================================= */

/* --- Rechtsseiten: ALLES linksbuendig, auch am PC (Wunsch Erwin) --- */
.s-recht main,
.s-recht .legal,
.s-recht .legal h1,.s-recht .legal h2,.s-recht .legal h3,
.s-recht .legal p,.s-recht .legal li,
.s-recht .hero-text,.s-recht .hero-text h1,.s-recht .hero-text .lead,
.s-recht .cl-course-head,.s-recht .cl-entry,.s-recht .cl-desc{
  text-align:left;text-align-last:left;
}
.s-recht .legal .updated{text-align:left}

/* Kein waagrechtes Scrollen mehr: clip statt hidden.
   hidden macht aus dem Koerper einen Scroll-Bereich - davon
   verrutschen am Handy die blauen Markier-Griffe. */
body{overflow-x:clip}

@media (max-width:860px), (max-width:1024px) and (max-height:560px){

  /* ---------- 1) Schriftgroessen angleichen ----------
     Erwin hat drei Stellen gefunden, an denen der Text kleiner war.
     Ursache: .lead (21px) und die kleinen Hinweise (15,6px) sind
     eigene Textsorten. Jetzt alles auf Fliesstextgroesse. */
  .lead{font-size:22.5px}
  .cta-note,.credit,.vid-note,.form-hint,.split-img .credit{font-size:19px}
  main p[style*="font-size"]{font-size:19px!important}
  .site-foot{font-size:1.05rem}
  .site-foot p.foot-disclaimer{font-size:1rem}
  .site-foot .foot-bottom{font-size:.95rem}
  .faq summary{font-size:1.1rem}

  /* Ueberschriften duerfen nie seitlich hinausragen */
  h1,h2,h3{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}

  /* ---------- 2) Kein Blocksatz mehr ----------
     Grundeinstellung: zentriert. Ausnahmen stehen weiter unten. */
  main p,main li{text-align:center;text-align-last:center}

  /* ---------- 3) Kopfzeile: Button mittig, Text groesser ---------- */
  .nav{height:68px}
  .brand{flex:0 0 auto}
  .nav-cta{flex:1;display:flex;align-items:center}
  .nav-cta .btn{margin:0 auto;font-size:17px;padding:11px 18px}
  .burger{margin-left:auto}
  .nav-links{inset:68px 0 auto auto;right:10px;left:auto;
    width:min(300px,84vw);border:1px solid var(--line);border-radius:16px;
    padding:6px 18px 12px;box-shadow:0 20px 40px rgba(0,48,120,.16)}
  .nav-links a{text-align:left}

  /* ---------- 4) Pfeile in den Knoepfen weg (gibt es am PC auch nicht) ---------- */
  .btn svg{display:none}

  /* ---------- 5) Hero: Bild ueber die ganze Breite,
       die zwei Kaestchen darunter statt darueber ---------- */
  .hero-media{max-width:none;display:grid;grid-template-columns:1fr 1fr;
    gap:10px;margin-top:22px}
  .hero-media img{grid-column:1 / -1;width:100%;max-width:none;max-height:none;
    aspect-ratio:1 / 1;object-fit:cover;object-position:center 12%;
    border-radius:var(--radius)}
  .hero-badge{position:static;justify-content:center;text-align:center;
    flex-direction:column;gap:2px;padding:12px 10px;font-size:.8rem;
    border-radius:14px;box-shadow:var(--shadow-sm)}
  .hero-badge .num{font-size:1.2rem}

  /* ---------- 6) "Ein klarer Plan": Symbol links, Text rechts (wie am PC) ---------- */
  .plan-list li{flex-direction:row;align-items:flex-start;gap:16px;text-align:left}
  .plan-list li>div{text-align:left}
  .plan-list li>div p,.plan-list strong{text-align:left;text-align-last:left}

  /* ---------- 7) Haken-Listen linksbuendig, damit die Haken untereinander stehen ---------- */
  .ticks li{align-items:flex-start;text-align:left;justify-content:flex-start}
  .ticks li span{text-align:left;text-align-last:left}
  .prob-grid .p{text-align:left;justify-content:flex-start}

  /* ---------- 8) Fragen & Antworten ----------
     Das "+" faellt weg, die Boxen werden deutlicher, Antworten linksbuendig. */
  .faq summary::after{content:none}
  .faq details{background:#fff;border:1px solid var(--line);border-radius:16px;
    box-shadow:var(--shadow-sm);padding:4px 18px;margin-bottom:14px}
  .faq details[open]{border-color:var(--blue);box-shadow:0 10px 26px rgba(0,113,193,.16)}
  .faq summary{text-align:center;padding:16px 0}
  .faq details p{text-align:left;text-align-last:left;padding-bottom:16px}

  /* ---------- 9) Fusszeile: Kopier-Rueckmeldung wieder sichtbar ---------- */
  .foot-mail-hint{display:inline-flex!important;position:static!important;
    transform:none!important;margin-left:8px!important}
  .foot-grid{grid-template-columns:1fr!important;gap:26px}
  .foot-legal{grid-template-columns:1fr}

  /* ---------- 10) Seitenweise Ausnahmen ---------- */
  /* Startseite: Erwin will diese Absaetze zentriert */
  .s-start .split-text p,.s-start .self-copy p{text-align:center;text-align-last:center}
  /* Projekt CHRIS: hier stoerten die Luecken - linksbuendig */
  .s-chris .split-text p,.s-chris .split-text li{text-align:left;text-align-last:left}
  /* Ueber Erwin: bleibt zentriert (hat Erwin gelobt) */
  .s-erwin .split-text p{text-align:center;text-align-last:center}
  /* Kontakt: Karten und Aufzaehlungen linksbuendig, Schlusssatz zentriert */
  .s-kontakt .card p,.s-kontakt .card h3{text-align:left;text-align-last:left}
  .s-kontakt .contact-list li{text-align:left;justify-content:flex-start}
  .s-kontakt .muted.center{text-align:center;text-align-last:center}
  /* Rechtsseiten: Bilder groesser, an die Textbreite angeglichen */
  .s-recht .legal-hero .hero-media{max-width:100%;margin:0}
  .s-recht .legal-hero .hero-media img{max-height:none;width:100%;
    aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--radius)}
}

/* =========================================================
   NUR GEDREHTES HANDY - Korrekturen aus Video 2
   ========================================================= */
@media (max-width:1024px) and (max-height:560px){
  /* "Was mich anders macht": lief seitlich hinaus (Ursache fuer den
     weissen Streifen rechts und das waagrechte Scrollen) */
  .self-split{align-items:center}
  .self-media{flex:0 0 36%;min-width:0}
  .self-copy{flex:1 1 auto;min-width:0}
  .self-copy .lead,.self-copy h2{max-width:none}
  .self h2{max-width:none}

  /* CHRIS: Bild schmaler, damit lange Woerter in eine Zeile passen */
  .s-chris .split{grid-template-columns:.8fr 1.2fr}

  /* Fusszeile im Querformat: alles mittig, eine Spalte */
  .site-foot .foot-grid{grid-template-columns:1fr!important;text-align:center}
  .site-foot .foot-links{justify-items:center}

  /* Menue rechts, nicht ueber die ganze Breite */
  .nav-links{inset:68px 10px auto auto;left:auto;width:min(320px,60vw)}
}

/* --- V2-Korrekturen (31.07.2026) --- */
/* Der neue "Vollbild"-Knopf unter dem Rad-Video hat die Hoehen-Rechnung
   der Hobby-Reihe gesprengt. Deshalb feste Hoehen aufloesen. */
.hobby-video{height:auto}
.hobby-video button{height:auto}

@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  /* Kopfzeile darf nicht breiter werden als der Bildschirm */
  .nav{gap:6px}
  .nav-cta{flex:1 1 0;min-width:0}
  .nav-cta .btn{font-size:16px;padding:11px 14px;white-space:nowrap}
  .burger{padding:4px}
  .wrap.nav{padding-left:14px;padding-right:14px}
}

/* --- V2-Korrekturen 2 (31.07.2026) --- */
.hobby-row .hobby-video{height:auto}
.hobby-row .hobby-video button{height:auto}
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .foot-kontakt li,.foot-kontakt a{flex-wrap:wrap;justify-content:center}
  .foot-mail-hint{font-size:.72rem!important}
  .site-foot .foot-links li{max-width:100%}
  .trust li,.contact-list li,.ticks li{min-width:0}
  .contact-list li,.email-copy{flex-wrap:wrap;word-break:break-word}
}

/* --- V2-Korrekturen 3 (31.07.2026): "Ein klarer Plan" liegt innerhalb
   von .split-text, deshalb muss die Linksbuendigkeit hier gewinnen. --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .plan-list li>div p,.plan-list li>div strong{
    text-align:left!important;text-align-last:left!important}
  .ticks li span{text-align:left!important;text-align-last:left!important}
}

/* --- V2-Korrekturen 4 (31.07.2026): Menue sauber rechts aufklappen
   (im Querformat hat es vorher durchgeschimmert). --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .nav-links{
    position:fixed;top:68px;right:10px;left:auto;bottom:auto;
    display:flex;flex-direction:column;gap:0;
    width:min(300px,84vw);max-height:calc(100vh - 84px);overflow:auto;
    background:#fff;border:1px solid var(--line);border-radius:16px;
    padding:4px 18px 10px;box-shadow:0 20px 44px rgba(0,48,120,.20);
    transform:translateY(-10px);opacity:0;visibility:hidden;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .nav-links.open{transform:none;opacity:1;visibility:visible}
  .nav-links a{width:100%;text-align:left;padding:13px 0}
  .nav-links a:last-child{border-bottom:0}
}

/* --- V2-Korrekturen 5 (31.07.2026) --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  /* Markier-Griffe: der weichgezeichnete Kopfzeilen-Hintergrund
     (backdrop-filter) erzeugt eine eigene Grafikebene. Am Handy ist das
     eine bekannte Ursache dafuer, dass die blauen Auswahl-Griffe
     verrutschen. Deshalb am Handy aus - die Kopfzeile wird einfach weiss. */
  .site-head{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}

  /* Rechtsseiten: das eng beschnittene Symbol soll wirken, aber
     nicht unscharf werden - deshalb Hoehe begrenzt statt volle Breite. */
  .s-recht .legal-hero .hero-media{max-width:100%;margin:0 auto}
  .s-recht .legal-hero .hero-media img{width:auto;max-width:100%;
    height:auto;max-height:230px;aspect-ratio:auto;object-fit:contain;
    margin:0 auto;border-radius:0}
}

/* --- V2-Korrekturen 6 (31.07.2026): "Datenschutzerklaerung" wurde am
   Handy rechts abgeschnitten. Schrift so gross, dass das laengste Wort
   sicher in eine Zeile passt, plus Umbruch als Notnagel. --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .legal-hero h1{font-size:clamp(1.28rem,6.4vw,1.7rem);
    overflow-wrap:break-word;word-break:normal;line-height:1.15}
}

/* =========================================================
   V3 (31.07.2026): Die Seite folgt jetzt der persoenlichen
   Schrift-Einstellung des Besuchers.
   Frueher stand hier -webkit-text-size-adjust:100% - das hat
   Chromes eigene Vergroesserung ausgehebelt. Genau daher kamen
   die verrutschten Markier-Griffe. Jetzt entfernt.
   Damit die Seite auch bei vergroesserter Schrift haelt, duerfen
   Kopfzeile und Knoepfe mitwachsen.
   ========================================================= */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .nav{height:auto;min-height:62px;padding-top:8px;padding-bottom:8px;align-items:center}
  .nav-cta .btn{white-space:normal;line-height:1.15;max-width:100%}
  /* Menue haengt jetzt an der Kopfzeile statt an einem festen Abstand,
     damit es auch bei groesserer Schrift buendig aufklappt. */
  .nav-links{position:absolute;top:100%;right:8px;left:auto;bottom:auto;
    margin-top:6px;max-height:70vh}
  /* Nichts darf eine feste Hoehe haben, sonst laeuft Text heraus */
  .fact,.hero-badge,.card,.tl,.faq details{height:auto}
}

/* --- V3: Sicherheitsnetz, wenn jemand die Schrift stark vergroessert.
   Lange Woerter duerfen dann umbrechen, nichts laeuft seitlich hinaus. --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  main,main *,.site-foot,.site-foot *{min-width:0;overflow-wrap:break-word}
  h1,h2,h3,h4,.eyebrow,.kicker,.foot-brand .nm,.trust-chip,.tl-label{
    -webkit-hyphens:auto;hyphens:auto}
  .trust-logos,.foot-soc,.hero-media{flex-wrap:wrap}
}

/* --- V3: E-Mail-Knoepfe duerfen bei grosser Schrift umbrechen --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .foot-mail-copy,.js-mail-pill,.email-copy,.btn-copy{
    white-space:normal!important;max-width:100%;flex-wrap:wrap}
  .foot-mail-text,.js-mail-pill,.email-copy{overflow-wrap:anywhere}
}

/* =========================================================
   ============  H A N D Y   V 4  (31.07.2026)  ============
   Aus Feedback-Video 3. Punkte siehe
   Claude/Mitarbeiter/Website-Ersteller/Aenderungsliste-Handy-V3.md
   ========================================================= */

/* --- 4.1 Fragen & Antworten: gar kein Zeichen mehr, auch nicht
   das Dreieck/Minus von Firefox --- */
.faq summary{list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::after{content:none!important}

@media (max-width:860px), (max-width:1024px) and (max-height:560px){

  /* --- 1.1 / 1.2 Menue schmaler --- */
  .nav-links{width:min(240px,68vw)}

  /* --- 2.1 Weniger blaue Flaeche ueber "FUER MAENNER..." --- */
  .hero{padding-top:22px}

  /* --- 2.2 Augenbraue eine Spur kleiner --- */
  .hero .eyebrow{font-size:.74rem;margin-bottom:10px}

  /* --- 2.3 "Der Klick bringt Dich..." minimal kleiner --- */
  .hero .cta-note{font-size:17.5px}

  /* --- 2.4 Der Hinweis steht jetzt unter den beiden Kacheln --- */
  .hero-hinweis{grid-column:1 / -1;margin-top:12px;font-size:17px;
    text-align:center;opacity:.9}

  /* --- 2.5 / 2.6 Foto rueckt hoch, oben enger beschnitten.
     Gilt nur fuer die Startseite - andere Seiten zeigen ihr Bild ganz. --- */
  .s-start .hero-media{margin-top:14px}
  .s-start .hero-media img{aspect-ratio:1 / 1;object-fit:cover;object-position:center 4%}
  /* Auf allen anderen Seiten das Bild NICHT beschneiden
     (z. B. Kaffeetasse auf der Kontaktseite) */
  .hero-media img{aspect-ratio:auto;object-fit:contain;max-height:340px;width:auto;
    max-width:100%;margin:0 auto}
  .s-start .hero-media img{width:100%;max-height:none}

  /* --- 7:30 Reihenfolge: Text -> Bilder -> Hinweis --- */
  .split{display:flex;flex-direction:column}
  .split .split-text{order:1}
  .split .split-img{order:2}
  .split-hinweis{order:3;margin-top:16px;text-align:center}

  /* --- 10.3 / Frage 2: Haken und Text als eine Einheit, mittig --- */
  .ticks{justify-items:center}
  .ticks li{display:inline-flex;width:auto;max-width:100%;margin:0 auto;
    align-items:flex-start;gap:12px;text-align:left}
  .ticks li span{text-align:left!important;text-align-last:left!important}
  .contact-list{justify-items:center}
  .contact-list li{width:auto;margin:0 auto}

  /* --- 5.1 Fusszeile: Telefon und E-Mail untereinander --- */
  .foot-kontakt{display:grid;gap:12px}
  .foot-kontakt li{width:100%;justify-content:center;flex-wrap:nowrap}

  /* --- 10.1 Kontakt: eine Leerzeile weniger --- */
  .hero-cta-eng{margin-top:4px}
}

/* =========================================================
   NUR QUERFORMAT - V4
   ========================================================= */
@media (max-width:1024px) and (max-height:560px){

  /* --- 3.1 / 3.2 / Platz-Regel: Bild und Text beginnen oben auf gleicher
     Hoehe, das Bild fuellt die Hoehe aus. Keine Luecken mehr. --- */
  .hero-grid,.split,.self-split{align-items:stretch}
  .hero-media,.split-img,.self-media{display:flex;align-items:stretch}
  .hero-media img,.split-img img,.self-media img{
    width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 12%}
  .s-recht .legal-hero .hero-media img{object-fit:contain;height:auto}

  /* Der Hero-Text darf oben anfangen, damit der Kopf gleich hoch startet */
  .hero-grid{align-items:start}
  .hero-media{align-self:stretch}

  /* --- 7:30 auch im Querformat: Text -> Bilder -> Hinweis, volle Breite --- */
  .split{display:flex;flex-direction:column}
  .split .split-img{max-width:100%;width:100%}
  .split .split-img img{max-height:230px;object-fit:cover}
  .ba-pair{grid-template-columns:1fr 1fr;max-width:none}

  /* --- 3.4 Abschnitt "Was mich anders macht" komplett zentriert --- */
  .self-split{flex-direction:column;text-align:center}
  .self-media{flex:none;width:100%;max-width:260px;margin:0 auto}
  .self-media img{height:auto;object-fit:contain}
  .self-copy,.self-copy h2,.self-copy .lead,.self-close{text-align:center!important;
    text-align-last:center!important;max-width:none}

  /* --- 3.5 "Hol Dir Deine Selbstbestimmung zurueck" linksbuendig --- */
  .s-start .split-text .lead{text-align:left!important;text-align-last:left!important}

  /* --- 3.6 FAQ-Antworten linksbuendig --- */
  .faq details p{text-align:left!important;text-align-last:left!important}

  /* --- 5.2 Rechts-Links in der Fusszeile zentriert --- */
  .foot-legal{justify-items:center;text-align:center}
  .site-foot .foot-grid{grid-template-columns:1fr!important}

  /* --- 6.1 Bild rechts -> Text linksbuendig --- */
  .split:not(.reverse) .split-text,
  .split:not(.reverse) .split-text p{text-align:left;text-align-last:left}

  /* --- 10.4 Kontaktseite im Querformat: alles zentriert --- */
  .s-kontakt main,.s-kontakt main p,.s-kontakt .card,.s-kontakt .card p,
  .s-kontakt .card h3,.s-kontakt .ticks li span,.s-kontakt .contact-list li{
    text-align:center!important;text-align-last:center!important}
  .s-kontakt .ticks li,.s-kontakt .contact-list li{justify-content:center}
  /* --- 10.5 Kontakt: Bild deutlich kleiner --- */
  .s-kontakt .hero-media{max-width:230px;margin:0 auto}
  .s-kontakt .hero-media img{height:auto;object-fit:contain}

  /* --- 11.1 Rechtsseiten: alles linksbuendig, auch quer --- */
  .s-recht main,.s-recht main *{text-align:left!important;text-align-last:left!important}
  .s-recht .foot-legal,.s-recht .site-foot,.s-recht .site-foot *{
    text-align:center!important;text-align-last:center!important}
}

/* --- V4-Korrektur (31.07.2026): NIE Fuesse oder Koerperteile abschneiden.
   Inhaltsbilder werden ab jetzt vollstaendig gezeigt (contain).
   Nur das Portraet ganz oben auf der Startseite wird bewusst beschnitten,
   damit das Gesicht frueher sichtbar ist. --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .split-img img,.self-media img,.ba-pair img,.figure-portrait img,
  .hobby-row img,.prob-figure img{object-fit:contain!important}
  .ba-pair img{aspect-ratio:auto}
}
@media (max-width:1024px) and (max-height:560px){
  .split-img,.self-media{align-items:flex-start}
  .split-img img,.self-media img{height:auto!important;max-height:100%;
    object-fit:contain!important}
  .split .split-img img{max-height:230px}
}
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .split>*{width:100%;max-width:100%;min-width:0}
}

/* --- V4: Die Haken-Liste auf der Kontaktseite heisst .trust - gleiche
   Behandlung wie .ticks: Haken und Text bleiben als Einheit zusammen. --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .trust{display:grid;justify-items:center;gap:14px}
  .trust li{display:inline-flex;width:auto;max-width:100%;margin:0 auto;
    align-items:flex-start;gap:12px;text-align:left}
  .trust li span:last-child{text-align:left!important;text-align-last:left!important}
  /* 8.1 Ueber Erwin: mehr Luft zwischen Bild und Text */
  .split{gap:26px}
}
@media (max-width:1024px) and (max-height:560px){
  .s-kontakt .trust li{justify-content:center}
  .split{gap:24px}
}
/* --- V4: E-Mail-Adresse in der Kontaktliste nicht mitten im Wort trennen --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .contact-list li,.contact-list li *{overflow-wrap:normal;word-break:normal}
}
/* --- V4: Fusszeilen-Mailknopf darf umbrechen, damit "kopiert" Platz hat --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .foot-kontakt li{flex-wrap:wrap}
  .foot-mail-copy{flex-wrap:wrap!important;justify-content:center;max-width:100%}
}

/* --- V4.1 (31.07.2026): Erwin hat erwin-frei.png oben selbst knapper
   beschnitten. Damit bestimmt AB JETZT die Bilddatei den oberen Rand -
   die Seite schneidet oben nichts mehr weg, sondern nur noch unten.
   PC bleibt davon unberuehrt (dort wird gar nicht beschnitten). --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .s-start .hero-media img{object-position:center top}
}

/* =========================================================
   ============  H A N D Y   V 5  (31.07.2026)  ============
   Aus Feedback-Video 4 ("Mobile Version V4.mp4").
   Punkte siehe
   Claude/Mitarbeiter/Website-Ersteller/Aenderungsliste-Handy-V4.md
   Dieser Block steht ganz unten und gewinnt gegen alles darueber.
   ========================================================= */

/* --- A3: der Schlusssatz "Du bist damit nicht allein" darf erst
   NACH der letzten Karte erscheinen. Vierte Stufe ergaenzt. --- */
.reveal.d4{transition-delay:.34s}

/* --- B8: Der Bildnachweis gehoert UNTER das Bild, nicht daneben.
   .split-img war eine Flex-Reihe, dadurch stand "Foto: ..." rechts. --- */
.split-img{flex-direction:column}

@media (max-width:860px), (max-width:1024px) and (max-height:560px){

  /* --- A5 / B10 / E1: Fusszeile, E-Mail-Zeile exakt mittig ---------------
     Ursache war Zeile 875: der "kopiert"-Hinweis stand mit
     position:static MITTEN im Knopf und hat dort Platz gebraucht,
     obwohl man ihn nicht sieht. Dadurch rutschte die ganze
     E-Mail-Zeile ca. 36 px nach links.
     Jetzt schwebt der Hinweis mittig UNTER der Zeile - er nimmt
     keinen Platz mehr weg, bleibt sichtbar und ist wieder golden. */
  .foot-kontakt li{position:relative}
  .foot-mail-copy{justify-content:center!important;position:relative}
  .foot-mail-hint{
    position:absolute!important;left:50%!important;top:100%!important;right:auto!important;
    transform:translateX(-50%)!important;
    margin:3px 0 0 0!important;
    display:inline-flex!important;
    color:var(--gold)!important;
    font-size:.8rem!important;
    white-space:nowrap;
  }
  .foot-kontakt{gap:20px}
  /* gleiche Regel fuer den Kopier-Knopf in der Kontaktliste */
  .contact-list li{position:relative}

  /* --- A2: Startseite hoch, Abstand Hinweistext -> Foto verkleinern.
     Gemessen waren 48 px, der Abstand ganz oben ist 22 px.
     Erwin will "ganz minimal groesser als oben" -> ca. 27 px.
     Dadurch rueckt das Foto hinauf und man sieht unten mehr Gesicht. */
  .s-start .hero-media{margin-top:0}
  .s-start .hero .cta-note{margin-bottom:0}
  .s-start .hero-grid{row-gap:26px}
}

/* =========================================================
   NUR QUERFORMAT - V5
   ========================================================= */
@media (max-width:1024px) and (max-height:560px){

  /* --- B1: weniger Luft ueber dem Hero-Foto, Gesicht sitzt hoeher --- */
  .hero{padding-top:12px}
  .s-start .hero-media{margin-top:0}

  /* --- B2: Startseite quer, GANZER Hero-Block linksbuendig
     (Foto steht rechts -> Text links). Entscheidung Erwin. --- */
  .s-start .hero-text,
  .s-start .hero-text .eyebrow,
  .s-start .hero-text h1,
  .s-start .hero-text .lead,
  .s-start .hero-text .cta-note,
  .s-start .hero-text p{
    text-align:left!important;text-align-last:left!important;
    margin-left:0!important;margin-right:0!important;max-width:none}
  .s-start .hero-cta{align-items:flex-start!important;text-align:left!important}
  .s-start .hero .eyebrow{display:block}

  /* --- B3: die zwei Kacheln (20 kg / seit 2024) wurden unten
     abgeschnitten. Bild + Kacheln wieder als Raster, Bildhoehe
     begrenzt, damit alles vollstaendig Platz hat. --- */
  .s-start .hero-media{
    display:grid!important;grid-template-columns:1fr 1fr;gap:9px;
    align-content:start;align-self:start;flex-wrap:nowrap}
  /* V8 (31.07.2026): Bildhoehe von 200 auf 268 erhoeht. Bei 200 wurde im
     Querformat der Mund abgeschnitten, sobald oben nichts mehr weggeschnitten
     wird. Gemessen bei 800x360: sichtbar sind jetzt die obersten ~415 von 749
     Bildpunkten - vom Haaransatz bis unter das Kinn. */
  .s-start .hero-media img{
    grid-column:1 / -1;width:100%;height:auto!important;
    max-height:268px;object-fit:cover;object-position:center top;
    border-radius:var(--radius)}
  .s-start .hero-badge{padding:9px 8px;font-size:.72rem}
  .s-start .hero-badge .num{font-size:1rem}
  .s-start .hero-hinweis{grid-column:1 / -1;margin-top:8px;font-size:15px;
    text-align:center!important;text-align-last:center!important}

  /* --- B4: Menue muss ohne Scrollen passen, "Kontakt" war abgeschnitten --- */
  .nav-links{max-height:none;padding:2px 16px 6px}
  .nav-links a{padding:8px 0;font-size:17px;line-height:1.25}

  /* --- B5 / B6: Vorher/Heute-Paar mittig und deutlich groesser --- */
  .split .split-img{justify-content:center;align-items:center}
  .split .split-img .ba-pair{margin:0 auto;max-width:none;gap:18px;
    justify-content:center}
  .split .split-img img{max-height:250px!important}
  .split-img .credit{text-align:center}

  /* --- B7: "Zieh es durch": Liste links, Kaffee-Foto RECHTS daneben.
     Vorher stand das Bild darunter, mit viel Weissraum links und rechts.
     Gilt nur fuer .split OHNE .reverse - der Abschnitt
     "Ich kenne diese Probleme" bleibt untereinander. --- */
  .s-start .split:not(.reverse){
    flex-direction:row!important;align-items:flex-start;gap:24px}
  .s-start .split:not(.reverse) .split-text{flex:1 1 56%;min-width:0;order:0}
  .s-start .split:not(.reverse) .split-img{
    flex:0 0 40%;max-width:40%;order:1;
    flex-direction:column;align-items:center;justify-content:flex-start}
  .s-start .split:not(.reverse) .split-img img{
    width:auto;max-width:100%;height:auto!important;max-height:300px!important;
    object-fit:contain!important}

  /* --- C3: CHRIS, Hero-Bild etwas kleiner --- */
  .s-chris .hero-grid{grid-template-columns:1.15fr .85fr}
  .s-chris .hero-media img{max-height:230px!important;object-fit:contain!important}

  /* --- C4: CHRIS, "Projekt CHRIS ..." linksbuendig --- */
  .s-chris .hero-text,.s-chris .hero-text .eyebrow,.s-chris .hero-text h1,
  .s-chris .hero-text .lead,.s-chris .hero-text p{
    text-align:left!important;text-align-last:left!important;
    margin-left:0!important;margin-right:0!important}

  /* --- C5: CHRIS, "Es gibt Querschnittsgelaehmte, die gehen koennen":
     Foto war winzig (ca. 150 x 200 px) in einem breiten weissen Kasten.
     Jetzt rechts neben dem Text ueber die volle Hoehe - man erkennt
     klar, dass Erwin steht. Nicht beschnitten. --- */
  .s-chris .split.reverse{
    flex-direction:row!important;align-items:flex-start;gap:24px}
  .s-chris .split.reverse .split-text{flex:1 1 60%;min-width:0;order:0!important}
  .s-chris .split.reverse .split-img{
    flex:0 0 36%;max-width:36%;order:1!important;
    flex-direction:column;align-items:center;margin-top:0}
  .s-chris .split.reverse .split-img img{
    width:auto;max-width:100%;height:auto!important;
    max-height:288px!important;object-fit:contain!important}

  /* --- E2 / E3 / E4: Kontaktseite im Querformat.
     NEUE REGEL (ersetzt "alles zentriert" aus V3/10.4):
     linksbuendig, wo ein Foto daneben steht - zentriert, wo keines
     daneben steht. --- */
  .s-kontakt .hero-text,
  .s-kontakt .hero-text .eyebrow,
  .s-kontakt .hero-text h1,
  .s-kontakt .hero-text .lead,
  .s-kontakt .hero-text p,
  .s-kontakt .hero-text .cta-note{
    text-align:left!important;text-align-last:left!important;
    margin-left:0!important;margin-right:0!important;max-width:none}
  .s-kontakt .hero-cta{align-items:flex-start!important;text-align:left!important}
  .s-kontakt .js-mail-wrap{margin-left:0!important}
  /* zweispaltiger Block "Lass uns zusammenarbeiten" + Foto daneben */
  .s-kontakt .contact-grid>div:first-child,
  .s-kontakt .contact-grid>div:first-child p,
  .s-kontakt .contact-grid>div:first-child h2,
  .s-kontakt .contact-grid .trust li span:last-child,
  .s-kontakt .contact-list li{
    text-align:left!important;text-align-last:left!important}
  .s-kontakt .contact-grid .trust{justify-items:start}
  .s-kontakt .contact-grid .trust li,
  .s-kontakt .contact-list li{justify-content:flex-start;margin-left:0}
  .s-kontakt .contact-list{justify-items:start}
  /* Bereiche OHNE Foto daneben bleiben zentriert */
  .s-kontakt .info-cards .card,.s-kontakt .info-cards .card p,
  .s-kontakt .info-cards .card h3,
  .s-kontakt .cta-final,.s-kontakt .cta-final p,
  .s-kontakt .muted.center{
    text-align:center!important;text-align-last:center!important}

  /* --- E3: Kaffee-Foto oben groesser (Platz ist da) --- */
  .s-kontakt .hero-media{max-width:300px!important;margin:0}
  .s-kontakt .hero-media img{height:auto!important;max-height:300px!important;
    object-fit:contain!important}

  /* --- E5: das Notizbuch-Foto hat den ganzen Bildschirm gefuellt.
     Grundregel neu: breite Fotos im Querformat nie hoeher als knapp
     die halbe Bildschirmhoehe. --- */
  .contact-photo{max-height:45vh;width:auto;max-width:100%;
    object-fit:contain;margin:0 auto 14px;display:block}
  .s-kontakt .contact-grid>div:last-child{text-align:center}
}

/* =========================================================
   ============  H A N D Y   V 7  (31.07.2026)  ============
   Aus Feedback-Video 5+6 ("Mobile Version V7.mp4", zwei Teile).
   Dieser Block steht ganz unten und gewinnt gegen alles darueber.
   ========================================================= */

/* --- Kontakt Hochformat: Kaffee-Foto oben 10% groesser --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .s-kontakt .hero-media img{max-height:374px!important}
}

/* --- Startseite Querformat: Kicker + Ueberschrift beim Vorher/Heute-
   Abschnitt zentrieren (Bild bleibt rechts, Absaetze bleiben zentriert -
   nur Kicker+H2 waren noch linksbuendig). --- */
@media (max-width:1024px) and (max-height:560px){
  .s-start .split.reverse .split-text .eyebrow,
  .s-start .split.reverse .split-text h2{
    text-align:center!important;text-align-last:center!important}

  /* --- Startseite Querformat: "Ein klarer Plan" - das Foto (Herwig Korbel)
     soll die ganze Spaltenhoehe ausfuellen, kein Leerraum mehr unter dem
     Bild/Bildnachweis. Bild + Bildunterschrift enden jetzt buendig mit
     dem Textende. --- */
  .s-start .split:not(.reverse){align-items:stretch!important}
  .s-start .split:not(.reverse) .split-img{
    display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:flex-start!important}
  .s-start .split:not(.reverse) .split-img img{
    flex:1 1 auto!important;min-height:0!important;width:100%!important;
    max-width:100%!important;height:auto!important;max-height:none!important;
    object-fit:cover!important;object-position:center top!important}

  /* --- CHRIS Querformat: "Seit 2016 sitze ich im Rollstuhl" - Bild soll
     die ganze Spaltenhoehe ausfuellen, kein Leerraum mehr rechts unten
     neben dem Text (Wunsch Erwin, Video 5+6). --- */
  .s-chris .split.reverse{align-items:stretch!important}
  .s-chris .split.reverse .split-img{
    display:flex!important;flex-direction:column!important;
    align-items:center!important;margin-top:0!important}
  .s-chris .split.reverse .split-img img{
    flex:1 1 auto!important;min-height:0!important;width:100%!important;
    max-width:100%!important;height:auto!important;max-height:none!important;
    object-fit:cover!important;object-position:center top!important}

  /* --- Allgemeine Regel (Wunsch Erwin: "da braucht es eine Regel, das
     muss erkannt werden"): JEDES .split-Bild im Querformat steht neben
     dem Text wie am PC, nicht mehr winzig und zentriert darunter. Bild
     und Text sind gleich hoch, das Bild fuellt die Hoehe aus.
     Seiten mit eigener, spezifischerer Regel (Startseite, CHRIS oben)
     gewinnen weiterhin - das hier ist nur das Sicherheitsnetz fuer alle
     anderen Seiten (z. B. Ueber Erwin). --- */
  .split{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:24px}
  .split:not(.reverse) .split-text,.split:not(.reverse) .split-img{order:0}
  .split.reverse .split-text{order:1}
  .split.reverse .split-img{order:2}
  .split-text{flex:1 1 56%;min-width:0}
  .split-img{flex:0 0 40%;max-width:40%;display:flex;flex-direction:column;
    align-items:center;justify-content:flex-start;margin-top:0}
  .split-img img{
    flex:1 1 auto;min-height:0;width:100%;max-width:100%;
    height:auto!important;max-height:none!important;
    object-fit:cover!important;object-position:center top}
  /* Ein evtl. dritter Absatz im .split (z.B. "Wie Dein Ergebnis aussieht...")
     soll unter die Bild+Text-Zeile rutschen, nicht als drittes Element
     mit hineingequetscht werden - sonst wird der Text winzig schmal. */
  .split-hinweis{flex:1 1 100%!important;order:3!important;width:100%;margin-top:8px}

  /* --- Ueber Erwin, Hero: "Baujahr 1988 ..." linksbuendig statt zentriert
     (Ueberschrift war schon linksbuendig, dieser Textblock noch nicht). --- */
  .s-erwin .hero-text .stufen,.s-erwin .hero-text .stufen p{
    text-align:left!important;text-align-last:left!important}

  /* --- Ueber Erwin, Hero-Bild: Unterkante soll mit dem Textende
     ("Mandelmilch.") abschliessen statt viel laenger zu sein. --- */
  .s-erwin .hero-grid{align-items:stretch!important}
  .s-erwin .hero-media{display:flex!important;align-items:stretch!important;
    max-width:none!important}
  .s-erwin .hero-media img{
    height:100%!important;max-height:none!important;width:100%!important;
    object-fit:cover!important;object-position:center top!important}

  /* --- Kontakt Querformat: Hero-Bild groesser (weniger blaue Flaeche),
     Notizbuch-Stockfoto im "Melde Dich"-Abschnitt etwas groesser --- */
  .s-kontakt .hero-media{max-width:380px!important}
  .s-kontakt .hero-media img{max-height:380px!important}
  .s-kontakt .contact-photo{max-height:52vh!important}
}

/* --- C1: Projekt CHRIS im Hochformat. Zwischen dem letzten Absatz und
   dem Rollstuhl-Foto waren 56 px, zwischen zwei Absaetzen nur 33 px.
   Das wirkte wie ein zusaetzliches Enter. Jetzt gleich wie ein
   normaler Absatz. --- */
@media (max-width:860px){
  .s-chris .hero-media{margin-top:0}
  .s-chris .hero-text p:last-child{margin-bottom:0}
}

/* --- C2: Bugfix - lange Woerter in grossen Ueberschriften ("Wunschgewicht",
   "Zusammenarbeit") wurden am schmalen Handy (360px) mitten im Wort
   ohne Bindestrich abgeschnitten, weil die Schrift dafuer zu gross war.
   Ueberschrift-Groesse am Handy etwas kleiner, damit lange Woerter
   immer ganz in eine Zeile passen. --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  h1{font-size:clamp(28px,8vw,42px)!important}
}

/* --- C3: Bugfix Changelog - "Ja"/"Nein" bei "Kernleistung bleibt erhalten"
   wurde am schmalen Handy mitten im Wort abgeschnitten, weil die Zeile
   nicht umbrechen durfte. Jetzt darf der Text vor dem Wert umbrechen,
   "Ja"/"Nein" selbst bleibt immer ganz. --- */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .cl-core{flex-wrap:wrap}
  .cl-core-val{white-space:nowrap}
}

/* --- V8 (31.07.2026): Weiche Trennstellen (&shy;) in langen deutschen
   Woertern wirken NUR am Handy. Am PC wird das Wort wieder als Ganzes
   behandelt, damit sich das gewohnte PC-Layout nicht veraendert.
   Hintergrund: Ein &shy; verkleinert die "kleinstmoegliche Breite" eines
   Wortes. Dadurch schrumpfte die Textspalte im Hero und die Ueberschrift
   brach am PC ploetzlich um, obwohl sie vorher in eine Zeile gepasst hat. --- */
@media (min-width:861px) and (min-height:561px){
  .legal-hero h1,.legal h2,.legal p,
  .s-kontakt main h2,.s-chris main h2{
    -webkit-hyphens:none;hyphens:none}
}

/* ===================================================================
   NUR PC  —  Runde V9, 01.08.2026
   Quelle: Video 2026-08-01 11-56-30.mp4 + Aenderungsliste-PC-V9.md
   Dieser Block trifft ausschliesslich den PC. Handy hoch und Handy quer
   bleiben unberuehrt. Was hier steht, gewinnt gegen alles weiter oben.
   =================================================================== */
@media (min-width:861px) and (min-height:561px){

  /* Punkt 2 — Abstand Header -> "FUER MAENNER" um 50% reduzieren */
  .s-start .hero{padding-top:48px}

  /* Punkt 3 — Foto und Text starten auf gleicher Hoehe,
     Schild "seit 2024" rutscht vom Kopf weg nach unten */
  .s-start .hero-grid{align-items:start}
  .s-start .hero-badge.b2{top:170px;right:0}

  /* Punkt 4 — Grundregel: Text und Bild duerfen sich nicht beruehren */
  .split{column-gap:64px}

  /* Punkt 7 — Abschnitt "Ich kenne diese Probleme"
     Bisher: der graue Hinweis belegte die rechte Spalte und hat die
     zwei Fotos nach unten gedraengt (grosses Loch rechts).
     Jetzt: Text links, Fotos rechts daneben, Hinweis quer darunter. */
  .s-start .split.reverse{align-items:start}
  .s-start .split.reverse .split-hinweis{
    grid-column:1 / -1;
    order:3;
    margin-top:26px;
    text-align:center}

  /* Punkt 9 — Abstand dieses Abschnitts halbiert, oben = unten */
  .s-start section:has(.split.reverse){padding-top:52px;padding-bottom:52px}

  /* Punkt 11 — Abschnitt "Zieh es durch": Foto war zu gross,
     begann zu frueh und endete zu spaet */
  .s-start section:has(.plan-list) .split{align-items:start}
  .s-start section:has(.plan-list) .split-img{align-self:start}
  .s-start section:has(.plan-list) .split-img img{
    max-height:430px;width:auto;max-width:100%;margin-left:auto;display:block}

  /* Punkt 13 — Abschnitt "Sei beim naechsten Impulsabend dabei":
     oben und unten je 25% weniger, beide gleich */
  .s-start section:has(.cta-final){padding-top:78px;padding-bottom:78px}

  /* Punkt 14 — Fusszeile: mehr Luft zwischen den Rechts-Links */
  .site-foot .foot-legal{column-gap:48px}
}

/* ---- NUR PC — Seite "Projekt CHRIS" (Punkte 16, 18, 19) ---- */
@media (min-width:861px) and (min-height:561px){

  /* Punkt 16 — gleicher Kopf-Abstand wie auf der Startseite */
  .s-chris .hero{padding-top:48px}

  /* Punkt 18 — Foto neben "Seit 2016 sitze ich im Rollstuhl"
     begann zu weit oben und endete zu weit unten */
  .s-chris .split{align-items:start}
  .s-chris .split .split-img img{max-height:530px;width:auto;max-width:100%;display:block}
  .s-chris .split.reverse .split-img img{margin-right:auto}

  /* Punkt 19 — derselbe Abstand zwischen Text und Bild wie auf der
     Startseite (der, der Erwin gefaellt) */
  .s-chris .split{column-gap:64px}
}

/* ---- NUR PC — Seite "Ueber Erwin" (Punkte 22, 23, 24, 25) ----
   Problem: Die Fotos waren immer gleich hoch, egal wie lang der Text
   daneben war. Sie begannen weit ueber dem Text und endeten weit darunter.
   Loesung: Die Bildspalte bestimmt die Hoehe nicht mehr, der Text tut es.
   Das Bild fuellt genau diese Hoehe aus - ohne beschnitten zu werden. */
@media (min-width:861px) and (min-height:561px){

  .s-erwin .hero-grid{align-items:stretch!important}
  .s-erwin .hero-media{position:relative!important;display:block!important;
    min-height:0!important;align-self:stretch!important;max-width:none!important}
  .s-erwin .hero-media img{position:absolute!important;top:0!important;bottom:0!important;
    right:0!important;left:auto!important;
    height:100%!important;width:auto!important;max-width:100%!important;max-height:none!important;
    object-fit:cover!important;object-position:center top!important;margin:0!important}

  .s-erwin .split{align-items:stretch;column-gap:64px;grid-template-columns:.84fr 1.16fr}
  .s-erwin .split .split-img{position:relative;min-height:0;align-self:stretch}
  .s-erwin .split .split-img img{position:absolute;top:0;bottom:0;left:0;right:auto;
    height:100%;width:auto;max-width:100%;max-height:none;
    object-fit:cover;object-position:center top}
  .s-erwin .split.reverse .split-img img{left:auto;right:0}

  /* Punkt 25 - Reihe mit drei Elementen: Flugzeug, Video, Berlin */
  .s-erwin .hobby-row{max-width:1060px}
}

/* ---- NUR PC — Seite "Kontakt" (Punkt 35) ----
   Abschnitt "Lass uns zusammenarbeiten": das breite Notizbuch-Foto soll
   oben und unten moeglichst mit dem Text abschliessen. Weil es ein
   Querformat ist, geht das nicht auf den Punkt - beschneiden wollen wir
   es nicht. Deshalb bekommt die Bildspalte mehr Breite, damit das Foto
   hoeher wird und der Unterschied kleiner. */
@media (min-width:861px) and (min-height:561px){
  .s-kontakt .contact-grid{grid-template-columns:1fr 1.28fr;align-items:center}
}

/* ===================================================================
   KORB A — gilt in allen drei Ansichten (Farben, Bildvorschau, FAQ)
   Runde V9, 01.08.2026
   =================================================================== */

/* Punkt 5 + 6 — Bildvorschau, Variante C ohne Rahmen:
   heller, unscharfer Hintergrund, das Bild schwebt frei mit weichem
   Schatten. Der Hinweistext ist nicht mehr sichtbar, bleibt aber fuer
   Screenreader und Tastatur erhalten (Barrierefreiheit). */
.lightbox{background:rgba(255,255,255,.55)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)}
.lightbox img{max-height:86vh;border-radius:14px;
  box-shadow:0 40px 90px rgba(11,42,69,.42)!important}
.lightbox .lb-close{background:var(--blue-dark,#003078)!important;
  border:0!important;color:#fff!important;
  box-shadow:0 8px 20px rgba(0,0,0,.25)}
.lightbox .lb-close:hover{background:#022897!important}
.lightbox .lb-hint{position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Punkt 12 — FAQ: blauer Rahmen, wenn eine Frage aufgeklappt ist */
.faq details[open]{outline:2px solid var(--blue);outline-offset:-2px;
  box-shadow:0 10px 28px rgba(0,113,193,.14)}

/* ===== E-Learning-Login-Streifen (Vorschlag H, 01.08.2026) ===== */
.elearning-bar{background:var(--blue-dark);color:#fff;font-size:.84rem}
.elearning-bar .wrap{display:flex;justify-content:flex-end;align-items:center;height:38px}
.elearning-bar a{color:rgba(255,255,255,.92);font-weight:600;display:inline-flex;
  align-items:center;gap:8px;text-decoration:none;padding:6px 0}
.elearning-bar a:hover{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.elearning-bar a:focus-visible{outline:2px solid #FFE1A0;outline-offset:3px;border-radius:6px}
@media(max-width:900px){
  .elearning-bar .wrap{height:44px}
  .elearning-bar a{padding:11px 0}
}

/* ===================================================================
   RUNDE V10 — 01.08.2026
   Wuensche von Erwin aus dem Chat vom 01.08.2026 (PC-Runde).
   Dieser erste Teil ist KORB A: er wirkt in allen drei Ansichten,
   weil es um Texte, Farben und Bausteine geht - nicht um Abstaende.
   =================================================================== */

/* V10-A1 — E-Learning-Login: beim Zeigen mit der Maus keine
   Untermalung mehr, stattdessen nur leicht weisser und fetter.
   Die Schriftstaerke wird mit einem duennen Rand nachgezeichnet,
   damit der Text nicht springt. */
.elearning-bar a:hover,
.elearning-bar a:focus-visible{
  color:#fff;
  text-decoration:none;
  -webkit-text-stroke:.4px #fff}

/* V10-A2 — Projekt CHRIS: die drei Vorschaubilder haben einen erklaerenden
   Satz. Erwin, 01.08.2026, zweite Fassung: "Diese Texte erst beim
   Draufklicken, nicht in der Webseite." Der Satz steht deshalb im
   Bild-Merkmal `data-lb-text` und erscheint nur in der Vergroesserung als
   Bildunterschrift. Auf der Seite ist er nicht zu sehen. */
.lightbox{flex-direction:column}
.lightbox .lb-text{display:none}
.lightbox.hat-text .lb-text{
  display:block;margin:18px auto 0;max-width:60ch;text-align:center;
  font-size:1.05rem;font-weight:600;line-height:1.45;color:var(--ink)}
.lightbox.hat-text img{max-height:74vh}
.lightbox.lb-blau.hat-text .lb-text{color:#fff}
/* 20.08.2026, Wunsch Erwin: einzelnes Wort in der Vollbild-Bildunterschrift
   hervorheben (z. B. "Glaube"). Endstand nach mehreren Runden: das ECHTE Gold
   --gold #F5A623, also dieselbe Farbe wie CTA-Knopf und Hero-Wort. Moeglich
   geworden, weil der Hintergrund dunkler wurde (siehe Regel darunter) -
   Kontrast 4,96:1 am hellsten Punkt, das reicht sogar fuer normalen Fliesstext.
   Verworfen: aufgehellte Ersatztoene (#FFC38F, #F9C876) - sie verlieren
   zwangslaeufig Saettigung und wirkten matt bzw. lachsfarben. */
.lightbox.lb-blau .lb-text .lb-gold{color:var(--gold);font-weight:800}

/* V10-A3 — Vollbild-Ansicht, zwei Sonderfaelle.
   lb-blau: der leuchtende Kern auf der Startseite ist durchsichtig.
   Auf hellem Grund verschwand er halb - jetzt steht er im Blau des
   Kopfbereichs, wie Erwin es wollte.
   lb-weiss: die CHRIS-Zeichnung ist auf weissem Grund gezeichnet und
   reicht bis an den Bildrand. Auf hellem Grund sah sie abgeschnitten
   aus. Jetzt bekommt sie eine eigene weisse Flaeche mit Luft rundum. */
.lightbox.lb-blau{
  /* 20.08.2026: helles Verlaufsende von #1E7FC7 auf #1976B8 gedeckelt (steht laut
     Website-Regeln-KERN.md, Abschnitt 5, unter "Nicht mehr verwenden") - noetig,
     damit das neue kraeftigere Gold (--gold-warm-on-blue) auch am hellsten Punkt
     noch die 3:1-Grenze fuer grosse/fette Schrift schafft. Betrifft nur diese eine
     Vollbild-Ansicht, sonst verwendet aktuell kein Bild data-lb-blau. */
  /* 20.08.2026, letzte Fassung: derselbe Verlauf wie der Abschnitt auf der
     Startseite (--blue-darker -> #0A3D91). Ein Verlauf, eine Wahrheit - damit
     das Wort "Glaube" im Text und im Vollbild exakt gleich aussieht.
     Kontrast Gold #F5A623: 4,96:1 am hellen Ende, 5,91:1 am dunklen. */
  background:linear-gradient(165deg,var(--blue-darker),#0A3D91 70%)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.lightbox.lb-blau .lb-close{background:var(--gold)!important;color:#3a2600!important}
.lightbox.lb-blau .lb-close:hover{background:var(--gold-dark)!important}
.lightbox.lb-weiss img{
  background:#fff;padding:26px;border-radius:18px;
  box-shadow:0 40px 90px rgba(11,42,69,.28)!important}

/* V10-A4 — Startseite "Zieh es durch": Erwin, 01.08.2026, zweite Fassung:
   "Bitte mach bei Ein klarer Plan etc. 3 Boxen fuer jeden Punkt."
   Also nicht mehr eine grosse Flaeche um alle drei, sondern drei eigene
   Kaesten untereinander. */
.plan-list{background:none;border:0;padding:0;box-shadow:none;
  gap:14px;margin-top:20px}
.plan-list li{
  background:#F4F7FA;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow-sm)}
.plan-list .pic{background:#fff;box-shadow:0 2px 8px rgba(0,48,120,.09)}

/* ===================================================================
   RUNDE V10 — NUR PC (Korb B)
   Gilt ausschliesslich ab 861 Punkte Breite bei normaler Hoehe.
   Handy hoch und Handy quer bleiben unberuehrt.
   =================================================================== */
@media (min-width:861px) and (min-height:561px){

  /* V10-B1 — Startseite, Abschnitt "Ich kenne diese Probleme":
     Der graue Hinweissatz stand quer unter beiden Spalten, mittig und
     mit 68 Punkten Abstand. Jetzt steht er linksbuendig direkt unter
     dem letzten Absatz - als waere er Teil des Textes. */
  .s-start .split.reverse{row-gap:0}
  .s-start .split.reverse .split-hinweis{
    grid-column:1 / 2!important;
    grid-row:2!important;
    order:3;
    margin-top:14px!important;
    text-align:left!important;
    max-width:none}

  /* V10-B2 — dadurch wird die linke Spalte hoeher. Die Vorher/Heute-
     Fotos duerfen mitwachsen und schliessen weiter oben und unten mit
     dem Text ab. */
  .s-start .split.reverse{grid-template-columns:.88fr 1.12fr}
  .s-start .split.reverse .split-img{
    grid-column:2!important;grid-row:1 / span 2!important;align-self:center}

  /* V10-B3 — Startseite "Zieh es durch": zwischen Text und Foto klaffte
     eine Luecke von 258 Punkten. Die Textspalte wird breiter und das
     Foto groesser, damit die Mitte nicht mehr leer wirkt. */
  .s-start section:has(.plan-list) .split{grid-template-columns:1.12fr .88fr}
  .s-start section:has(.plan-list) .split-img img{max-height:560px}

  /* V10-B4 wurde am 26.08.2026 auf Erwins Wunsch entfernt: die
     Projekt-CHRIS-Seite soll wie Startseite/Kontakt ganz links
     beginnen, nicht nach innen gerueckt sein. */

  /* V10-B5 — Projekt CHRIS, Abschnitt "Es gibt Querschnittsgelaehmte,
     die gehen koennen": Erwin erlaubt hier ausdruecklich, dass das Foto
     deutlich groesser wird und der Text weiter nach rechts reicht -
     dafuer schliesst das Foto oben nicht mehr exakt mit dem Text ab. */
  .s-chris .split{grid-template-columns:1.10fr .90fr;align-items:center!important}
  .s-chris .split .split-img{align-self:center!important}
  .s-chris .split .split-img img{max-height:680px!important}
}

/* ---- RUNDE V10, NUR PC — Seite "Ueber Erwin" ----
   Erwins Wuensche vom 01.08.2026:
   - Kopfbereich: Foto deutlich groesser (Text bekommt einen Satz dazu).
   - Die Abschnitte darunter: Text und Bild naeher zusammen, immer genau
     64 Punkte Abstand. Links beginnt alles auf derselben Kante, rechts
     endet alles auf derselben Kante.
   - Erwin erlaubt hier ausdruecklich, dass das Bild oben und unten ein
     bisschen ueber den Text hinausragt. Dafuer ist es deutlich groesser.
   Ersetzt die V9-Loesung mit den absolut gesetzten Bildern. */
@media (min-width:861px) and (min-height:561px){

  /* Kopfbereich: Foto von 231 x 334 auf rund 350 x 508 */
  .s-erwin .hero-grid{min-height:508px}
  .s-erwin .hero-text{align-self:center!important}

  /* Die drei Abschnitte darunter.
     Wichtig: Manche Abschnitte haben das Bild zuerst im Text stehen,
     manche den Text. Die BILD-Spalte ist immer die schmale. */
  .s-erwin .split{align-items:center!important;column-gap:64px;
    grid-template-columns:.68fr 1.32fr}
  .s-erwin .split:has(> .split-text:first-child){grid-template-columns:1.32fr .68fr}
  .s-erwin .split .split-img{position:static!important;align-self:center!important;
    min-height:0}
  .s-erwin .split .split-img img{
    position:static!important;width:100%!important;height:auto!important;
    max-height:none!important;max-width:100%!important;
    object-fit:contain!important;border-radius:var(--radius);display:block;
    left:auto!important;right:auto!important}
}

/* ---- RUNDE V10, NUR PC — "Ueber Erwin", Abschnitt "Reisen und Radfahren" ----
   Erwin: "Die zwei Bilder in der gleichen Hoehe wie das Video" und
   "den oberen Text angleichen in der Breite".
   Ursache: Die drei Kacheln wurden auf gleiche Gesamthoehe gezogen.
   Weil unter dem Video noch der Datenschutz-Hinweis steht, wurden die
   zwei Fotos nach unten gestreckt und dabei beschnitten. */
@media (min-width:861px) and (min-height:561px){
  .s-erwin section:has(.hobby-row) .sec-head{max-width:1060px}
  .s-erwin .hobby-row{align-items:start}
  .s-erwin .hobby-row figure{height:auto}
  .s-erwin .hobby-row figure img{height:auto!important}
}

/* ---- RUNDE V10, NUR PC — "Ueber Erwin", Abschnitt "Woran ich glaube" ----
   Erwin: der Text oben soll genauso breit sein wie die zwei Bilder
   darunter (880 Punkte). Der Schluss-Satz "Ich bemuehe mich..." bleibt
   ausdruecklich so schmal wie er ist. */
@media (min-width:861px) and (min-height:561px){
  .s-erwin section:has(.ba-pair) .sec-head{max-width:880px}
  .s-erwin section:has(.ba-pair) .sec-head p{max-width:880px!important}
}

/* ---- RUNDE V10, NUR PC — Seite "Kontakt" ----
   Erwin: das Profilfoto oben rechts und das Notizbuch-Foto weiter unten
   sollen rechts auf derselben Kante enden. Oben endete das Foto bei
   1428, unten bei 1508. */
@media (min-width:861px) and (min-height:561px){
  .s-kontakt .hero-media{margin-left:auto!important;margin-right:0!important}
  .s-kontakt .hero-media img{margin-left:auto!important;margin-right:0!important;display:block}
}

/* ---- RUNDE V10, NUR PC — Kontakt und Ueber Erwin, zweite Runde ----
   Erwin, 01.08.2026:
   - Kopf-Abstand oben ueberall gleich (wie Start und Projekt CHRIS: 48).
   - Kontakt-Kopfbereich: der Text darf weiter nach rechts laufen.
   - Abschnitt "Lass uns zusammenarbeiten": Foto kleiner, Text breiter.
   - Der Bildnachweis steht rechtsbuendig unter dem Foto. */
@media (min-width:861px) and (min-height:561px){

  .s-kontakt .hero{padding-top:48px}
  .s-erwin .hero{padding-top:48px}

  .s-kontakt .hero-grid{grid-template-columns:1.28fr .72fr}

  .s-kontakt .contact-grid{grid-template-columns:1.32fr .98fr!important}
  .s-kontakt .contact-grid>div:last-child{text-align:right!important}
  .s-kontakt .contact-grid>div:last-child p{text-align:right!important}
}

/* V10 (Korb A) — In den Kaesten auf der Kontakt-Seite brauchen zwei
   Absaetze hintereinander wieder einen sichtbaren Abstand.
   Erwin, 01.08.2026: "ABSATZ" zwischen technischer Hilfe und dem
   Hinweis auf die Nutzungsbedingungen. */
.card p+p{margin-top:14px}

/* ---- RUNDE V10, NUR PC — Rechtsseiten ----
   Erwin, 01.08.2026: "Text beim Impressum soll ueber die ganze Breite
   gehen. Selbiges gilt fuer Datenschutz und Nutzungsbedingungen."
   Bisher waren alle Textzeilen auf 820 Punkte gebremst, die Seite ist
   aber 1096 breit. Changelog bleibt wie es ist. */
@media (min-width:861px) and (min-height:561px){
  .s-recht:not(.s-changelog) .legal h1,
  .s-recht:not(.s-changelog) .legal h2,
  .s-recht:not(.s-changelog) .legal h3,
  .s-recht:not(.s-changelog) .legal p,
  .s-recht:not(.s-changelog) .legal ul,
  .s-recht:not(.s-changelog) .legal .updated{max-width:none!important}
  .s-recht:not(.s-changelog) .legal-hero{padding-top:48px}
}

/* V10 (Korb A) — Erwin, 01.08.2026: unter den zwei Vorher/Heute-Fotos
   auf der Startseite steht jetzt zusaetzlich ein kurzer Satz in seinen
   eigenen Worten. Die Zeile darueber bleibt die kurze Kennzeichnung in
   Grossbuchstaben, der Satz darunter ist normal geschrieben. */
.ba-satz{display:block;text-transform:none;letter-spacing:0;
  font-weight:600;font-size:.92rem;color:var(--ink-soft);
  margin-top:5px;line-height:1.35}

/* V10 (nur PC) — Projekt CHRIS: der Hinweis unter dem Video soll genau
   so breit sein wie das Video darueber (900 Punkte statt 58 Zeichen). */
@media (min-width:861px) and (min-height:561px){
  .s-chris section:has(#chris-video) > .wrap > p.center{max-width:900px!important}
}

/* V10 (Korb A) — "Ueber Erwin", Kopfbereich: Der neue Satz unter der
   Stichwortliste war dunkel und klebte an der Zeile darueber.
   Jetzt gleiche Textfarbe wie die Liste und ein echter Absatz davor. */
.s-erwin .hero-text .stufen + p{
  color:#fff;margin-top:22px;font-size:1.05rem;line-height:1.55}

/* V10 (nur PC) — Startseite, Kopfbereich: Erwin, 01.08.2026:
   "Koennen wir den Kopf noch ein bisschen nach oben bringen?"
   Zuschneiden geht nicht mehr, deshalb rueckt die ganze Bildspalte
   40 Punkte nach oben. Der Text bleibt, wo er ist. */
@media (min-width:861px) and (min-height:561px){
  .s-start .hero-media{margin-top:-40px}
}

/* ---- RUNDE V10, Nachbesserungen 01.08.2026 ---- */

/* Korb A — "Ueber Erwin", Kopfbereich: Der neue Satz war kleiner als die
   Zeilen darueber. Jetzt exakt gleich gross. */
.s-erwin .hero-text .stufen + p{font-size:1.16rem}

@media (min-width:861px) and (min-height:561px){
  /* Startseite: das Schild "20 kg - mein individueller Abnehmerfolg"
     war zu weit unten und beim Laden nicht sofort zu sehen.
     Es rueckt 76 Punkte nach oben. */
  .s-start .hero-badge.b1{bottom:110px}

  /* Startseite: der Streifen "Bekannt aus" bekommt oben und unten
     25 % mehr Luft (46 -> 58 Punkte). */
  .s-start .trust{padding-top:58px;padding-bottom:58px}
}

/* ===================================================================
   RUNDE V11 — NUR HANDY HOCHFORMAT (360 x 800)
   Quelle: Erwins Video "Mobile Version 01.08.2026 V1.mp4" + Transkript.
   Dieser Block trifft ausschliesslich das Handy im Hochformat.
   PC und Handy quer bleiben unberuehrt. Was hier steht, gewinnt gegen
   alles weiter oben.
   =================================================================== */
@media (max-width:860px) and (min-height:561px){

  /* V11-1 — Erwin: "Ich moechte, dass ueber 'Fuer Maenner, die ihr
     Wunschgewicht erreichen und behalten wollen' ein bisschen mehr von
     dem Blau ist. Es ist mir ein bisschen zu weit oben."
     Und spaeter auf Projekt CHRIS: "Ich moechte, dass der neue Abstand
     dann auf allen Seiten gilt."
     Vorher 22 Punkte, jetzt 38. Gilt fuer alle 9 Seiten - der
     Kopfbereich der Rechtsseiten (.legal-hero) traegt dieselbe
     Klasse .hero. */
  .hero{padding-top:38px}

  /* V11-2 — Erwin: "Ich moechte, dass 'und behalte es' dann eine
     eigene Zeile wird." Der Abstand wirkte enger als ein normaler
     Zeilenabstand, weil Ueberschriften mit 1,12 gesetzt sind und der
     Text darunter mit 1,5.
     Jetzt ist die goldene Zeile ein eigener Block mit echtem Abstand.
     Das <br> davor wird ausgeblendet, sonst entstuende eine Leerzeile.
     Am PC bleibt alles wie es war. */
  .s-start .hero h1 br{display:none}
  .s-start .hero h1 span{display:block;margin-top:14px}

  /* V11-4 — "Ueber Erwin", Kopfbereich. Erwin: "Dieser Text ist
     groesser als 'Baujahr 1988'. Ich moechte, dass hier die gleiche
     Textgroesse verwendet wird."
     Nachtrag Erwin, 01.08.2026: "Ist der Text gleich wie bei allen
     anderen Seiten? Wenn nein: anpassen."
     Nachgemessen bei 360 x 800: Start, Projekt CHRIS, Kontakt und die
     Rechtsseiten haben im Kopfbereich 22,5 Punkte bei Zeilenabstand 1,5.
     "Ueber Erwin" hatte 20 Punkte in der Stichwortliste und 23,2 Punkte
     im Satz darunter - also weder untereinander noch zu den anderen
     Seiten gleich.
     Jetzt beide 22,5 Punkte mit Zeilenabstand 1,5 - gleich untereinander
     UND gleich wie auf allen anderen Seiten. */
  .s-erwin .hero-text .stufen p,
  .s-erwin .hero-text .stufen + p{font-size:1.125rem;line-height:1.5}

  /* V11-5 — Erwin: "Vielleicht kannst Du das 'kopiert' auf der rechten
     Seite oder auch rechts oben geben. Ich moechte es nicht darunter,
     das wirkt unprofessionell."
     Bisher schwebte der Hinweis mittig UNTER der E-Mail-Zeile (V5-Regel).
     Jetzt steht er rechts oben ueber dem rechten Ende der Zeile.
     Damit er die Zeile darueber nicht beruehrt, bekommen die Listen
     etwas mehr Luft zwischen den Zeilen. */
  .site-foot .foot-kontakt{gap:26px}
  .contact-list{row-gap:26px}
  .foot-kontakt .foot-mail-hint,
  .contact-list .foot-mail-hint{
    left:auto!important;right:0!important;
    top:auto!important;bottom:calc(100% + 3px)!important;
    transform:none!important;
    margin:0!important;
    line-height:1!important;
  }
}

/* ---- RUNDE V11, NUR HANDY HOCHFORMAT — Nachtrag Kontakt-Seite ----
   Erwin, 01.08.2026: "Gut gesehen - bitte auch verschieben."
   Gemeint ist das zweite "Kopiert" auf der Kontakt-Seite: das goldene
   Schild beim gelben Knopf mit der E-Mail-Adresse. Es schwebte zwar
   schon oben, deckte dabei aber den Satz "... Deine E-Mail an:" zu.
   Jetzt steht es rechts oben in einer eigenen Luecke und beruehrt
   nichts mehr. Am PC steht es rechts NEBEN dem Knopf und ueberdeckt
   dort nichts - deshalb bleibt der PC unangetastet. */
/* ZURUECKGENOMMEN am 01.08.2026. Erwin: "Ich habe mich umentschieden:
   Abstand zwischen 'Ich freue mich auf Deine ...' und dem Button
   verschwindet (normaler Abstand), und 'kopiert' ueber den Text oben.
   Bitte auch unten auf dieser Seite."
   Damit gilt wieder die Regel aus der Kontakt-Seite selbst: das Schild
   steht rechts oben ueber dem Knopf und darf den Satz darueber
   ueberdecken. Der zusaetzliche Abstand von 46 Punkten ist weg. */

/* ---- RUNDE V11, NUR HANDY HOCHFORMAT — Nachtrag Projekt CHRIS ----
   Erwin, 01.08.2026 (Bildschirmfoto vom Handy):
   "Bild im Rollstuhl ein bisschen groesser."
   Gemeint ist das Foto im Kopfbereich von Projekt CHRIS.
   Vorher 255 x 340 Punkte, jetzt 300 x 400 (+18 %). Es bleibt links und
   rechts ein kleiner Rand, das Foto wird nicht beschnitten.
   PC und Handy quer bleiben unberuehrt. */
@media (max-width:860px) and (min-height:561px){
  .s-chris .hero-media img{max-height:400px}
}

/* ---- RUNDE V11, NUR HANDY HOCHFORMAT — Nachtrag Kontakt-Foto ----
   Erwin, 01.08.2026: "Das Bild mit mir und der Tasse Kaffee soll sofort
   sichtbar sein. Und 5 % groesser."
   Nachgemessen: Das Foto beginnt bei 771 Punkten, das Handy zeigt nur
   die ersten rund 650. Auch wenn man jede Luecke wegnimmt, bliebe es bei
   712 - ohne Scrollen also nie sichtbar. Erwin hat entschieden: Reihen-
   folge bleibt, nur groesser. Von 237 x 374 auf 249 x 393 Punkte.
   PC und Handy quer bleiben unberuehrt. */
@media (max-width:860px) and (min-height:561px){
  .s-kontakt .hero-media img{max-height:393px!important}
}

/* ---- RUNDE V11, NUR HANDY HOCHFORMAT — Reihenfolge Vorher/Heute ----
   Erwin, 01.08.2026 (Bildschirmfoto vom Handy):
   "Die Bilder gehoeren hier her: ... habe es trotzdem geschafft. /
   DIE BILDER HIERHER / Wie Dein Ergebnis ..."
   Bisher standen die zwei Fotos GANZ OBEN, noch vor der Ueberschrift
   "Ich kenne diese Probleme". Jetzt stehen sie zwischen dem letzten
   Absatz und dem grauen Hinweissatz.
   PC und Handy quer bleiben unberuehrt. */
@media (max-width:860px) and (min-height:561px){
  .s-start .split.reverse .split-text{order:1!important}
  .s-start .split.reverse .split-img{order:2!important;margin-top:22px}
  .s-start .split.reverse .split-hinweis{order:3!important;margin-top:18px}
}

/* ---- RUNDE V11, NUR HANDY HOCHFORMAT — "Bekannt aus" ----
   Erwin, 01.08.2026: "Die Bekannt-aus Leiste geht etwas unter."
   Nach der Vorschau (Vorschau-Bekannt-aus.html) hat er Variante 4
   gewaehlt: "das sorgt fuer Vertrauen. Nimm 4. Natuerlich nur bei
   Handy Hochformat."
   Vorher: 93 Punkte hoch, oben und unten 0 Luft, drei kleine Logos
   nebeneinander (78x30, 98x48, 101x29).
   Jetzt: 30 Punkte Luft oben und unten, die drei Logos stehen
   untereinander und sind rund doppelt so gross.
   PC und Handy quer bleiben unberuehrt. */
@media (max-width:860px) and (min-height:561px){
  .s-start .trust{padding-top:30px;padding-bottom:30px}
  .trust-row{gap:22px}
  .trust-logos{flex-direction:column;align-items:center;gap:26px}
  .trust-logos img:nth-child(1){max-height:56px}
  .trust-logos img:nth-child(2){max-height:78px}
  .trust-logos img:nth-child(3){max-height:52px}
}

/* ===================================================================
   RUNDE V11 — Markierung der aktuellen Seite in der Navigation
   Am 01.08.2026 kurz auf eine dunkelblaue Flaeche umgestellt und dann
   von Erwin wieder zurueckgenommen: "Sorry - ich sehe es schon, warum
   es so war. Bitte wieder mit der goldenen Linie zurueckstellen auf
   allen Formaten."
   Es bleibt also bei der goldenen Unterstreichung aus dem
   Grundgeruest (.nav-links a.active::after). Hier steht bewusst kein
   Code mehr - damit spaeter niemand denkt, es sei vergessen worden.
   =================================================================== */

/* ===================================================================
   RUNDE V12 — 01.08.2026, NUR HANDY QUERFORMAT (800 x 360)
   Aus Erwins Video zum Querformat. Eigener Block ganz am Ende,
   damit bestehende Regeln nicht umgeschrieben werden. Was hier
   steht, gewinnt. PC und Handy hochformat bleiben unberuehrt —
   der Schalter unten trifft nur das gedrehte Handy.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){

  /* --- V12-1  Startseite: die vier Kaestchen ("Du faengst motiviert
     an ...") waren so breit wie die ganze Spalte. Erwin: "Der Text in
     den Boxen soll wirklich die Breite haben wie der Text und nicht
     komplett ueber die ganze Spalte gehen. Die Boxen sollen zentriert
     sein, aber alle vier gleich breit." Nachtrag Erwin: "Siehst Du den
     Platz, der noch rechts von 'aus' ist? Den verkleinern."
     Gemessen: die laengste Zeile ("... die Motivation aus.") endet bei
     732 Punkten. Die Box ist jetzt so breit, dass rechts davon nur noch
     der normale Innenrand von 22 Punkten bleibt. Kein Text bricht neu
     um. Vorher 756 Punkte breit ab Kante 22, jetzt 712 Punkte mittig. */
  .s-start .prob-grid .p{
    width:100%!important;max-width:712px!important;
    margin-left:auto!important;margin-right:auto!important}

  /* --- V12-2  Startseite: die zwei Fotos "Vorher / Heute" standen
     rechts neben dem Text. Erwin: "Hier moechte ich, dass Du Vorher und
     Heute direkt unter 'trotzdem geschafft' und ueber 'Wie Dein Ergebnis
     aussieht, ist individuell' einfuegst."
     Also dieselbe Reihenfolge wie im Hochformat: Text, dann die zwei
     Fotos nebeneinander, dann der graue Hinweissatz. */
  .s-start .split.reverse{flex-direction:column!important;align-items:stretch!important}
  .s-start .split.reverse .split-text{
    order:1!important;flex:1 1 auto!important;max-width:none!important}
  .s-start .split.reverse .split-img{
    order:2!important;flex:0 0 auto!important;
    width:100%!important;max-width:100%!important;margin-top:20px!important}
  .s-start .split.reverse .ba-pair{
    max-width:440px!important;margin-left:auto!important;margin-right:auto!important}
  .s-start .split.reverse .ba-pair img{
    flex:0 0 auto!important;height:auto!important;max-height:none!important;
    width:100%!important;object-fit:cover!important}
  .s-start .split.reverse .split-hinweis{order:3!important;margin-top:16px!important}

  /* --- V12-3  Startseite, Abschnitt "Zieh es durch": Erwin: "Die Boxen
     'Ein klarer Plan' sind breiter als der Text oben, und das Ganze wirkt
     sehr voll. Mach das Bild ein bisschen kleiner und gewinne Platz nach
     oben. Der Abstand zwischen dem Foto und dem Text links soll groesser
     werden, das Aufzaehlungszeichen darf leicht nach links."
     Umgesetzt: mehr Abstand zwischen Text und Foto (24 -> 46 Punkte),
     Textspalte schmaeler (dadurch rutscht "zurueck." in die zweite
     Zeile, wie von Erwin erwartet), Foto niedriger, Symbol weiter links. */
  .s-start section:has(.plan-list) .split{gap:46px!important;align-items:center!important}
  .s-start section:has(.plan-list) .split .split-text{flex:1 1 54%!important}
  .s-start section:has(.plan-list) .split .split-img{
    flex:0 0 32%!important;max-width:32%!important;justify-content:center!important}
  .s-start section:has(.plan-list) .split .split-img img{
    flex:0 0 auto!important;height:auto!important;max-height:470px!important;
    width:100%!important;object-fit:cover!important}
  /* Die drei Kaesten sind jetzt genau so breit wie die laengste Zeile
     darueber ("Ich ermutige Dich: Komm zum Impulsabend.", 452 Punkte) -
     sie ragen nicht mehr darueber hinaus. */
  .s-start .plan-list{max-width:452px!important}
  .s-start .plan-list li{padding-left:12px!important;gap:12px!important}
  .s-start .plan-list .pic{width:40px!important;height:40px!important}

  /* --- V12-4  "kopiert" steht jetzt rechts oben statt darunter —
     genau wie im Hochformat seit V11. Erwin: "Das 'kopiert' bitte hier
     auch auf die rechte Seite, das gefaellt mir sonst nicht."
     Betrifft die Fusszeile aller 9 Seiten und die Kontaktliste. */
  .site-foot .foot-kontakt{gap:26px!important}
  .contact-list{row-gap:26px!important}
  .foot-kontakt .foot-mail-hint,
  .contact-list .foot-mail-hint{
    left:auto!important;right:0!important;
    top:auto!important;bottom:calc(100% + 3px)!important;
    transform:none!important;
    margin:0!important;
    line-height:1!important;
  }

  /* --- V12-5  Menue: Erwin: "Der Text in der Navigation kann ein
     bisschen groesser sein, aber so, dass man nicht scrollen muss."
     Von 17 auf 20 Punkte. Nachgemessen: das offene Menue bleibt
     vollstaendig im Bild. */
  .nav-links a{font-size:20px!important}

  /* --- V12-6  Projekt CHRIS, Kopfbereich: Erwin: "Hier ist das Bild von
     mir im Rollstuhl viel zu klein. Mach es groesser. Wenn der Platz
     ausgeschoepft ist, muss es nicht gleichzeitig mit 'Projekt CHRIS'
     beginnen — dann kannst Du es unten zentriert lassen."
     Von 230 auf 460 Punkte Hoehe, das Foto fuellt jetzt die Spalte. */
  .s-chris .hero-media{align-self:center!important}
  .s-chris .hero-media img{
    max-height:460px!important;height:auto!important;width:auto!important;
    max-width:100%!important;object-fit:contain!important;margin:0 auto!important}

  /* --- V12-7  Projekt CHRIS, "Ja, Du liest richtig": Erwin: "Hier hast
     Du das Bild zugeschnitten, das moechte ich nicht. Ich moechte, dass
     die Arme nicht abgeschnitten sind, den Rollator sieht man auch fast
     nicht. Mach den ganzen Text inklusive der Ueberschrift zentriert und
     fuege mein Bild unter 'Ist CHRIS gebaut' ein. Genau darunter."
     Das Foto wird nicht mehr beschnitten (ganzes Bild sichtbar). */
  .s-chris .split.reverse{flex-direction:column!important;align-items:stretch!important}
  .s-chris .split.reverse .split-text{
    order:1!important;flex:1 1 auto!important;max-width:none!important;
    text-align:center!important}
  .s-chris .split.reverse .split-text .eyebrow,
  .s-chris .split.reverse .split-text h2,
  .s-chris .split.reverse .split-text p,
  .s-chris .split.reverse .split-text li{
    text-align:center!important;text-align-last:center!important}
  .s-chris .split.reverse .split-img{
    order:2!important;flex:0 0 auto!important;
    width:100%!important;max-width:100%!important;margin-top:22px!important}
  .s-chris .split.reverse .split-img img{
    flex:0 0 auto!important;width:auto!important;height:auto!important;
    max-width:100%!important;max-height:460px!important;
    object-fit:contain!important;object-position:center!important;
    margin-left:auto!important;margin-right:auto!important}

  /* --- V12-8  "Ueber Erwin", Kopfbereich: Erwin: "Der Text 'Auf dieser
     Seite lernst Du mich ...' hat nicht die gleiche Schriftgroesse und
     ist zentriert. 'Mein Lieblingskaffee ...' ist linksbuendig. Bitte
     gleiche Textgroesse und linksbuendig."
     Nach Rueckfrage entschieden: beide auf 22,5 Punkte — damit sind sie
     untereinander gleich UND gleich wie Startseite, Projekt CHRIS und
     Kontakt. So ist es im Hochformat seit V11 auch geloest. */
  .s-erwin .hero-text .stufen p,
  .s-erwin .hero-text .stufen + p{
    font-size:22.5px!important;line-height:1.5!important;
    text-align:left!important;text-align-last:left!important;
    margin-left:0!important;margin-right:0!important;max-width:none!important}

  /* --- V12-9  "Ueber Erwin": Erwin: "Hier hast Du mich komplett
     abgeschnitten. Ich moechte, dass Du mich hier nicht abschneidest."
     Gilt fuer alle drei Fotos neben dem Text (Vierkanter, Eis, "wenn
     etwas nicht passt"). Sie waren auf 250 Punkte Hoehe zugeschnitten.
     Jetzt ist immer das ganze Bild zu sehen. */
  .s-erwin .split .split-img{align-items:center!important;justify-content:center!important}
  .s-erwin .split .split-img img{
    flex:0 0 auto!important;width:auto!important;height:auto!important;
    max-width:100%!important;max-height:390px!important;
    object-fit:contain!important;object-position:center!important}

  /* --- V12-10  Kontakt, Kopfbereich: Erwin: "Hier kannst Du das Bild
     rechts noch ein bisschen groesser machen, weil es hier noch Platz
     gibt. Auf der rechten Seite — nach links nicht mehr vergroessern."
     Das Foto waechst nur nach rechts bis an die Seitenkante:
     von 241 x 380 auf 294 x 463 Punkte (+22 %). Die linke Kante und
     damit der Abstand zum Text bleiben exakt gleich. */
  .s-kontakt .hero-media{max-width:100%!important;margin-left:auto!important;margin-right:0!important}
  .s-kontakt .hero-media img{
    max-height:463px!important;height:auto!important;width:auto!important;
    max-width:100%!important;object-fit:contain!important;
    margin-left:auto!important;margin-right:0!important;display:block}

  /* --- V12-11  Kontakt: "Melde Dich beim ersten Kontakt am besten per
     E-Mail." stand eingerueckt. Erwin: "Das muss auf alle Faelle
     linksbuendig, genauso wie der ganze Text hier."
     Jetzt beginnt der Absatz auf derselben Kante wie die Haken-Liste. */
  .s-kontakt .contact-grid > div:first-child p.muted{
    max-width:none!important;margin-left:0!important;margin-right:0!important;
    text-align:left!important;text-align-last:left!important}

  /* --- V12-12  Kontakt: Erwin: "Dieses Foto von 123RF bitte um 25 %
     vergroessern. Darunter den Untertitel zentriert unter das Foto."
     Von 250 x 187 auf 312 x 234 Punkte. Der Bildnachweis steht jetzt
     mittig unter dem Foto (vorher mittig in einem schmalen Kasten,
     der links klebte). */
  .s-kontakt .contact-photo{
    width:312px!important;max-width:100%!important;height:auto!important;
    max-height:234px!important;
    margin-left:auto!important;margin-right:auto!important;display:block}
  .s-kontakt .contact-grid > div:last-child p.muted{
    max-width:none!important;width:auto!important;
    margin-left:auto!important;margin-right:auto!important;
    text-align:center!important;text-align-last:center!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 1 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT.
   Erwin: "Mehr Blau ueber 'Fuer Maenner'. Das wirkt nach oben
   gequetscht."
   Der Kopfbereich hatte im Querformat nur 12 Punkte Abstand nach oben
   (im Hochformat sind es seit V11 38). Jetzt 38 Punkte — gleich wie im
   Hochformat. Gilt ueber die Regel .hero automatisch auf allen 9
   Seiten, auch auf den Rechtsseiten (.legal-hero traegt dieselbe
   Klasse). PC bleibt unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .hero{padding-top:38px!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 2 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT.
   Erwin: "Mehr Hoehe bei 'Bekannt aus'. Du kannst Dich etwas an der
   Hochversion orientieren."
   Gemessen: der Streifen war im Querformat 70 Punkte hoch, oben und
   unten 0 Luft, die Logos 109x42, 134x66 und 139x40.
   Jetzt genau die Logo-Groessen aus dem Hochformat (146x56, 158x78,
   181x52) und 30 Punkte Luft oben und unten - der Streifen ist damit
   138 statt 70 Punkte hoch. Die drei Logos bleiben im Querformat
   nebeneinander, dafuer ist genug Platz (704 von 756 Punkten).
   Hintergrund bleibt weiss - die Entscheidung vom 25.07.2026 gilt.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .s-start .trust{padding-top:30px!important;padding-bottom:30px!important}
  .s-start .trust-logos{gap:24px!important}
  .s-start .trust-logos img:nth-child(1){max-height:56px!important}
  .s-start .trust-logos img:nth-child(2){max-height:78px!important}
  .s-start .trust-logos img:nth-child(3){max-height:52px!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 3 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT.
   Erwin: "Hier versuchen wir das Bild unter 'Wunschgewicht auch
   behalten', und dafuer groesser."
   Gemeint ist der Abschnitt "Zieh es durch". Das Foto (Herwig Korbel)
   stand rechts neben dem Text. Jetzt steht es UNTER dem letzten Kasten
   ("Endlich durchziehen ... Wunschgewicht auch behalten.") und ist
   deutlich groesser: von 242 x 323 auf 420 x 560 Punkte (+74 %),
   mittig. Der Bildnachweis steht mittig darunter.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .s-start section:has(.plan-list) .split{
    flex-direction:column!important;align-items:stretch!important;gap:26px!important}
  .s-start section:has(.plan-list) .split .split-text{
    order:1!important;flex:1 1 auto!important;max-width:none!important}
  .s-start section:has(.plan-list) .split .split-img{
    order:2!important;flex:0 0 auto!important;
    width:100%!important;max-width:100%!important;
    align-items:center!important;justify-content:flex-start!important}
  .s-start section:has(.plan-list) .split .split-img img{
    flex:0 0 auto!important;width:auto!important;height:auto!important;
    max-width:100%!important;max-height:560px!important;
    object-fit:contain!important;object-position:center!important;
    margin-left:auto!important;margin-right:auto!important}
  .s-start section:has(.plan-list) .split .split-img .credit{
    display:block!important;text-align:center!important;margin-left:auto!important;
    margin-right:auto!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 4 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT.
   Erwin: "Kopiert hier rechts." / "Bei allen Seiten natuerlich den
   Footer aendern."
   Der Hinweis stand seit heute rechts OBEN ueber der E-Mail-Zeile.
   Im Querformat ist rechts neben der Zeile genug Platz - deshalb
   steht er jetzt rechts DANEBEN, auf gleicher Hoehe. Gilt fuer die
   Fusszeile aller 9 Seiten. Der zusaetzliche Zeilenabstand von 26
   Punkten wird nicht mehr gebraucht und geht auf 14 zurueck.
   Im Hochformat bleibt es bei "rechts oben" (Entscheidung aus V11).
   PC bleibt unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .site-foot .foot-kontakt{gap:14px!important}
  .foot-kontakt .foot-mail-hint{
    left:100%!important;right:auto!important;
    top:50%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
    margin:0 0 0 10px!important;
    line-height:1!important;
  }
}

/* ===================================================================
   RUNDE V12 — Nachtrag 5 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT.
   Erwin: "Navigation auch noch ein bisschen groesser."
   Von 20 auf 23 Punkte. Nachgemessen bei 800 x 360: das offene Menue
   endet weiterhin im Bild, man muss nicht scrollen.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .nav-links a{font-size:23px!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 6 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT, Projekt CHRIS.
   Erwin: "Mehr Abstand zwischen dem Text links und dem Bild rechts.
   Du darfst dafuer das Bild minimal kleiner machen zugunsten des
   Abstands."
   Abstand von 26 auf 46 Punkte, Foto von 310 x 414 auf 297 x 396
   (-4 %) und rechtsbuendig an der Seitenkante. Nachgemessen: der
   sichtbare Abstand zwischen Textende und Bildkante ist jetzt 49
   statt 26 Punkte.
   Der groessere Abstand nach oben ("mehr Blau") ist bereits in
   Nachtrag 1 erledigt und gilt ueber die Regel .hero auf allen 9
   Seiten.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .s-chris .hero-grid{gap:46px!important}
  .s-chris .hero-media img{
    max-height:396px!important;
    margin-left:auto!important;margin-right:0!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 7 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT, "Ueber Erwin", Kopfbereich.
   Erwin: "Hier auch etwas mehr Abstand zwischen dem Text links und
   dem Bild rechts. Gerne wieder das Bild etwas verkleinern zugunsten
   des Abstands."
   Gleiche Loesung wie auf Projekt CHRIS: Abstand von 26 auf 46 Punkte,
   Foto etwas kleiner und rechtsbuendig an der Seitenkante.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .s-erwin .hero-grid{gap:46px!important}
  .s-erwin .hero-media img{
    width:auto!important;height:auto!important;
    max-width:100%!important;max-height:470px!important;
    object-fit:contain!important;
    margin-left:auto!important;margin-right:0!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 8 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT, Kontakt, Kopfbereich.
   Erwin: "Das Bild etwas nach unten bringen. Abstand zum Text passt.
   Ein kleines bisschen. Es schaut so aus, als ob es hoeher als der
   Text links 'KONTAKT' ist."
   Nachgemessen: das Foto begann bei 145 Punkten, das Wort "KONTAKT"
   erst bei 153 - das Foto stand also 8 Punkte hoeher. Jetzt beginnt
   das Foto bei 157, also knapp unter der Oberkante von "KONTAKT".
   Die Breite und der Abstand zum Text bleiben unveraendert.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .s-kontakt .hero-media img{margin-top:12px!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 9 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT, Kontakt.
   Erwin: "Bild um 10 % groesser." (das Foto von 123RF mit Notizblock
   und Kaffee)
   Von 312 x 234 auf 343 x 257 Punkte. Zusammen mit den 25 % von
   heute Nachmittag ist es jetzt 37 % groesser als am Anfang
   (250 x 187). Der Bildnachweis bleibt mittig darunter.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .s-kontakt .contact-photo{
    width:343px!important;max-height:257px!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 10 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT, Kontakt.
   Erwin: "Der Untertitel wirkt schattiert. Entfernen."
   Gemeint ist der Satz nach dem fetten "Melde Dich beim ersten Kontakt
   am besten per E-Mail." Nachgemessen: es gibt keinen Schatten - der
   Text war nur grau (#5a6472) gesetzt, waehrend der fette Teil davor
   fast schwarz ist. Dieser Unterschied laesst ihn schattiert wirken.
   Jetzt hat der ganze Absatz dieselbe Farbe wie der fette Teil.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .s-kontakt .contact-grid > div:first-child p.muted{color:var(--ink)!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 14 (Rueckfrage, 01.08.2026)
   NUR HANDY QUERFORMAT, Kontaktseite.
   Erwin auf Nachfrage: Das "kopiert" soll auch in der Kontaktliste
   rechts NEBEN der E-Mail-Adresse stehen, nicht rechts oben darueber -
   also gleich wie in der Fusszeile.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .contact-list{row-gap:18px!important}
  .contact-list .foot-mail-hint{
    left:100%!important;right:auto!important;
    top:50%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
    margin:0 0 0 10px!important;
    line-height:1!important;
  }
}

/* ===================================================================
   RUNDE V12 — Nachtrag 15 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT, Startseite.
   Erwin: "'Ich kenne diesen Weg' - zentriert."
   Die Zeile war schon auf "mittig" gestellt, stand aber trotzdem
   links. Ursache: sie ist ein kleiner Kasten, der nur so breit ist
   wie der Text selbst (234 von 756 Punkten) - der Text war also
   innerhalb dieses schmalen Kastens zentriert, und der Kasten klebte
   links. Jetzt ist der Kasten so breit wie die Spalte, damit steht
   die Zeile wirklich mittig - genau wie die Ueberschrift darunter.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .s-start .split.reverse .split-text .eyebrow{
    display:block!important;width:100%!important;
    text-align:center!important;text-align-last:center!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 16 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT.
   Erwin nach dem Vergleich: "Navigation: Bitte gleich grosser Text
   wie beim Hochformat."
   Nachgemessen im Hochformat: 19 Punkte. Im Querformat waren es
   zuletzt 23 - jetzt ebenfalls 19. Damit sind Hoch- und Querformat
   im Menue gleich.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .nav-links a{font-size:19px!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 17 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT, Kontakt.
   Erwin: "123RF ist grau hinterlegt. Entfernen. Nur normaler
   Urheberhinweis wie auch bei anderen Bildern (z. B. Herwig Korbel).
   Hinweis zentriert."
   Nachgemessen: Der Hinweis selbst ist bereits genau wie "Foto: Herwig
   Korbel" (19 Punkte, gleiche Farbe, mittig) und hat keinen eigenen
   Hintergrund. Das Graue kam vom weichen SCHATTEN des Fotos: Der
   Hinweis wurde mit einem negativen Abstand von -14 Punkten nach oben
   in den Schatten hineingezogen. Jetzt steht er 18 Punkte darunter,
   auf sauberem Weiss.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .s-kontakt .contact-photo{margin-bottom:0!important}
  .s-kontakt .contact-grid > div:last-child p.muted{margin-top:18px!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 18 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT, Kontakt.
   Erwin: "Bild nochmals um 10 % vergroessern." (Foto von 123RF)
   Von 343 x 257 auf 377 x 283 Punkte. Gegenueber dem Ausgangsstand
   (250 x 187) ist es damit rund 51 % groesser.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .s-kontakt .contact-photo{width:377px!important;max-height:283px!important}
}

/* ===================================================================
   RUNDE V12 — Nachtrag 19 (Live-Durchgang Erwin, 01.08.2026)
   NUR HANDY QUERFORMAT, Startseite, Abschnitt "Zieh es durch".
   Erwin: "Ich will diesen weissen Raum rechts vom Text nicht."
   Dann, nach der Vorschau: "Bau es live."
   Neuer Aufbau: oben links der Text (Ueberschrift und die zwei
   Saetze), oben rechts das Foto - damit ist rechts vom Text kein
   weisser Raum mehr. Darunter die drei Kaesten NEBENEINANDER ueber
   die volle Breite, wie "So einfach geht's" auf der Verkaufsseite.
   In den Kaesten steht das Symbol oben und der Text darunter -
   nebeneinander waere bei rund 240 Punkten Kastenbreite zu eng.
   Gemessen: der Abschnitt ist 814 statt 1335 Punkte hoch, also ein
   ganzer Bildschirm weniger zum Scrollen. Das Foto ist vollstaendig
   zu sehen, nichts angeschnitten.
   Umgebaut ohne Aenderung am HTML: die Huelle um den Text wird
   durchlaessig gemacht (display:contents), dann lassen sich Text,
   Foto und Kaesten frei im Raster platzieren.
   PC und Handy hochformat bleiben unberuehrt.
   =================================================================== */
@media (max-width:1024px) and (max-height:560px){
  .s-start section:has(.plan-list) .split{
    display:grid!important;
    grid-template-columns:1fr 300px!important;
    column-gap:46px!important;row-gap:12px!important;align-items:start!important}
  .s-start section:has(.plan-list) .split .split-text{display:contents!important}
  .s-start section:has(.plan-list) .split .split-text > *:nth-child(1){grid-column:1;grid-row:1}
  .s-start section:has(.plan-list) .split .split-text > *:nth-child(2){grid-column:1;grid-row:2}
  .s-start section:has(.plan-list) .split .split-text > *:nth-child(3){grid-column:1;grid-row:3}
  .s-start section:has(.plan-list) .split .split-text > *:nth-child(4){grid-column:1;grid-row:4}
  .s-start section:has(.plan-list) .split .plan-list{
    grid-column:1 / -1!important;grid-row:5!important;
    display:grid!important;grid-template-columns:repeat(3,1fr)!important;
    gap:14px!important;max-width:none!important;margin-top:16px!important}
  .s-start section:has(.plan-list) .split .plan-list li{
    flex-direction:column!important;align-items:flex-start!important;
    gap:10px!important;padding:16px!important}
  .s-start section:has(.plan-list) .split .split-img{
    grid-column:2!important;grid-row:1 / 5!important;
    max-width:300px!important;width:300px!important;
    align-items:center!important;justify-content:flex-start!important;margin:0!important}
  .s-start section:has(.plan-list) .split .split-img img{
    flex:0 0 auto!important;width:100%!important;height:auto!important;
    max-height:none!important;object-fit:contain!important}
}

/* ============================================================
   BARRIEREFREIHEIT — Runde 01 (01.08.2026)
   Nur Tastatur- und Trefferflaechen-Verbesserungen.
   Es aendert sich NICHTS am Aussehen der Seite im Ruhezustand.
   ============================================================ */

/* B1  Fokusrahmen auf den gelben Knoepfen war Gold auf Gold -> unsichtbar.
       Jetzt dunkler Rahmen mit hellem Aussenring: auf Gold UND auf Blau gut
       sichtbar. Nur zu sehen, wenn man mit der Tastatur navigiert. */
.btn-cta:focus-visible,
.cta-btn:focus-visible,
button.btn-cta:focus-visible{
  outline:3px solid #0b1723!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 6px rgba(255,255,255,.92)!important;
}

/* B2  Menue-Knopf: Trefferflaeche auf 44 x 44 vergroessert,
       ohne dass sich am sichtbaren Knopf etwas aendert. */
.burger{position:relative}
.burger::after{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:44px;height:44px;
}

/* B3  Die Fussleisten-E-Mail ist ein Knopf: Trefferflaeche auf 44 hoch,
       ohne zusaetzlichen Platzbedarf im Textfluss. */
.foot-mail-copy{position:relative}
.foot-mail-copy::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px;
}

/* ============================================================
   BARRIEREFREIHEIT — Farben, von Erwin freigegeben am 01.08.2026
   V1 · V3 · V4b · V5
   ============================================================ */

/* V1  Schild "Zahl folgt": Gold auf Hellgold war 2,4 -> jetzt 5,6 */
.tag{color:#8f5500!important}

/* V3  Goldene Kleinzeilen auf den blauen Flaechen: 3,5-4,3 -> 6,0
       Das hellere Gold ist dasselbe, das im Kopfbereich schon steht. */
.band-ink .kicker,
.band-ink .eyebrow,
.self .kicker,
.self-copy .kicker{color:#FFF0CC!important}

/* V4b  Blaues Feld eine Spur dunkler, damit weisse Schrift darauf
        die Norm erreicht: weiss war 4,3 -> jetzt 4,9 */
.hero{background:linear-gradient(160deg,#0A3D91 0%,#1976B8 78%)!important}

/* V4b + V5  Helle Hinweise und Einleitungssaetze auf Blau: volle Deckkraft
        statt leicht durchsichtig. Nur auf den blauen Flaechen. */
.hero .cta-note,
.band-ink .cta-note,
.hero .lead,
.band-ink p,
.band-ink .self-close{color:#fff!important}

/* =========================================================
   ======  K O N T A K T F O R M U L A R  (10.08.2026)  =====
   Neu aufgebautes Formular auf /kontakt.
   Nutzt die bestehenden .form-Stile und ergaenzt nur, was fehlt.
   Optimiert fuer PC, Handy Hochformat und Handy Querformat.
   ========================================================= */

.form-wrap{max-width:780px;margin:0 auto}
.form-wrap .sec-head{text-align:center;margin-bottom:22px}
.form-wrap .sec-head .lead{max-width:46ch;margin-left:auto;margin-right:auto}

/* Ehrlicher Hinweis ueber dem Formular, solange die Anbindung fehlt */
.form-notice{background:#FFF7E8;border:1.5px solid var(--gold);border-radius:14px;
  padding:14px 18px;margin:0 0 18px;font-size:.95rem;color:var(--ink);line-height:1.55}
.form-notice strong{color:#8a5a00}

/* Spamfalle – fuer Menschen unsichtbar, fuer Bots verlockend */
.form .fld-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Absenden-Bereich */
.form .form-send{margin-top:6px}
.form .form-send .btn{width:100%;justify-content:center}
.form .form-hint-end{margin:14px 0 0;font-weight:500}

/* Meldung, wenn noch nicht scharf geschaltet */
.form .form-blocked{margin:16px 0 0;background:#FFF7E8;border:1.5px solid var(--gold);
  border-radius:14px;padding:14px 18px;font-size:.95rem;line-height:1.55;color:var(--ink)}
.form .form-blocked strong{color:#8a5a00}
.js-mail-inline{all:unset;cursor:pointer;font:inherit;font-weight:700;color:var(--blue);
  text-decoration:underline;text-underline-offset:3px}
.js-mail-inline:focus-visible{outline:3px solid rgba(0,113,193,.55);outline-offset:2px;border-radius:4px}

/* Pflichtfeld-Stern und Fehlerzustand deutlicher */
.form input:user-invalid,.form select:user-invalid,.form textarea:user-invalid{
  border-color:#c0392b;background:#fff6f5}
.form .consent a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.form .consent{cursor:pointer}

/* ---------- Handy Hochformat + Querformat ----------
   Die Seite zentriert am Handy sonst alles und setzt Absaetze in
   Blocksatz. In einem Formular ist das unlesbar: Beschriftungen und
   Einwilligungstexte bleiben deshalb linksbuendig. */
@media (max-width:860px), (max-width:1024px) and (max-height:560px){
  .form-wrap{max-width:100%}
  .form{padding:22px 18px}
  .form label,.form .consent,.form .consent span{
    text-align:left!important;text-align-last:left!important}
  .form .form-hint,.form .form-blocked,.form-notice{
    text-align:left!important;text-align-last:left!important;
    max-width:none;margin-left:0;margin-right:0;hyphens:manual}
  /* Tippen ohne Zoom-Sprung: iOS zoomt unter 16px hinein */
  .form input,.form select,.form textarea{font-size:17px;padding:14px 15px}
  .form textarea{min-height:140px}
  .form .form-send .btn{font-size:18px;padding:16px 22px}
}

/* Handy Hochformat: zwei Spalten sind zu eng -> untereinander */
@media (max-width:860px) and (min-height:561px){
  .form .row2{grid-template-columns:1fr;gap:0}
}

/* Handy Querformat: wenig Hoehe, aber genug Breite.
   Zwei Spalten bleiben, dafuer alles etwas flacher. */
@media (max-width:1024px) and (max-height:560px){
  .form{padding:18px 16px}
  .form .fld{margin-bottom:14px}
  .form .row2{grid-template-columns:1fr 1fr;gap:14px}
  .form textarea{min-height:96px}
  .form .consent{padding:11px 14px;margin-bottom:11px}
  .form-wrap .sec-head{margin-bottom:16px}
  .form-notice{padding:11px 14px;margin-bottom:14px}
}

/* Sehr schmale Handys */
@media (max-width:400px){
  .form{padding:18px 14px}
  .form .form-send .btn{padding:15px 16px;font-size:17px}
}
/* Anker /kontakt#kontaktformular: nicht unter den fixen Kopf rutschen */
#kontaktformular{scroll-margin-top:96px}


/* =========================================================
   Handy Querformat: Eingabefelder linksbuendig (Wunsch Erwin 10.08.2026)
   Ursache: In der Handy-Regel steht `main{text-align:center}`. Das vererbt
   sich in input/select/textarea — dadurch standen Platzhalter wie
   "name@beispiel.at", "+43 660 1234567", "Bitte auswaehlen ..." und
   "Was machst Du - und was schwebt Dir vor?" mittig im Feld.
   ========================================================= */
@media (max-width:1024px) and (max-height:560px){
  .form input,.form select,.form textarea{
    text-align:left!important;text-align-last:left!important}
  .form input::placeholder,.form textarea::placeholder{text-align:left}
}

/* ============================================================
   Danke- und Bestaetigungsseite: Ablauf-Liste nicht fett
   (Erwin, 10.08.2026). Gilt NUR fuer .trust-plain, damit die
   Haken-Liste auf der Kontaktseite fett bleibt.
   ============================================================ */
.trust.trust-plain li{font-weight:400}



/* ============================================================
   20.08.2026 - Abschnitt "von innen nach aussen" auf der Startseite
   bekommt ein TIEFERES Blau. Erwins Weg nach mehreren Farbrunden:
   Nicht die Schrift heller machen, sondern den Hintergrund dunkler -
   dann darf das ECHTE Gold #F5A623 stehen (dasselbe wie CTA-Knopf und
   Hero-Wort), statt eines aufgehellten Ersatztons.

   Warum das noetig war: Gold #F5A623 gegen das helle Verlaufsende
   #0071C1 ergibt nur 2,51:1 - deutlich zu wenig, es wirkte matt.
   Aufhellen loest das nicht, weil Orange bei mehr Helligkeit
   zwangslaeufig Saettigung verliert (nachgerechnet: selbst bei voller
   Saettigung kommt #FFA91A nur auf 2,65:1).

   Neuer Verlauf endet bei #0A3D91 (derselbe Ton wie der Hero-Anfang,
   also keine neue Farbe im System). Kontrast nachgerechnet (WCAG-Formel):
   Gold #F5A623 auf #0A3D91 = 4,96:1, auf #022897 = 5,91:1.
   Das reicht sogar fuer normalen Fliesstext (4,5:1), nicht nur fuer
   fette Schrift - also mit Reserve.

   Eng begrenzt auf diesen einen Abschnitt: die anderen band-ink-Bloecke
   (Schluss-CTA auf Startseite, /chris, /kontakt und die zwei
   Zwischenseiten) bleiben unveraendert.

   Die Grafik von-innen.webp braucht dafuer KEINE Bearbeitung - sie hat
   einen echten Transparenz-Kanal, ihr heller Schleier nimmt die
   Hintergrundfarbe an. Auf Blau komponiert geprueft: kein Kasten,
   kein sichtbarer Bildhintergrund.
   ============================================================ */
.band-ink.band-ink-tief{
  background:linear-gradient(165deg,var(--blue-darker),#0A3D91 70%)}


/* 20.08.2026, Wunsch Erwin: Der Abschnitt "von innen nach aussen" steht in
   DREI eigenen Absaetzen mit Luft dazwischen (Erwins Wort: "ENTER"), nicht
   in einem Absatz mit Zeilenumbruechen. Noetig, weil ".self-copy .lead" weiter
   oben "margin:0" setzt - ohne diese Regel klebten die drei Absaetze
   aneinander und saehen aus wie blosse Zeilenumbrueche.
   Bewusst nur "margin-top", nicht die Kurzform "margin": in der Handy-Regel
   steht ".self-copy .lead{margin:0 auto}" fuer die Zentrierung - die bleibt
   so erhalten. */
.self-copy .lead + .lead{margin-top:16px}

/* --- Cookie-Banner: mittelhohe Fenster (24.08.2026) ---
   Live gemessen auf 1229x609: die Reiter "Details" (634 px Inhalt) und "Wo gilt das?"
   (537 px) passten nicht in die 85vh = 518 px und mussten gescrollt werden. Die Regel
   in Website-Regeln-KERN.md Abschnitt 11 verlangt aber: kein Scrollen, in allen vier
   Reitern. Die bestehende Kompakt-Regel greift erst unter 440 px Hoehe - dazwischen
   klaffte eine Luecke. Diese Regel schliesst sie. */
@media (min-height:441px) and (max-height:760px){
  .cookie-banner{max-height:94vh;padding:18px 22px}
  .cookie-banner p{font-size:13.5px;line-height:1.4;margin:0 0 10px}
  .cookie-tabs{margin:0 0 12px;gap:16px}
  .cookie-tab{font-size:13.5px;padding:0 0 8px}
  .cookie-cat{padding:8px 0}
  .cookie-cat .cat-name{font-size:14px;margin-bottom:2px}
  .cookie-cat .cat-desc{font-size:12.5px;line-height:1.35}
  .cookie-cats{gap:8px 16px}
  .cookie-btns{margin-top:12px}
  .cookie-reject-row{margin-top:9px}
  .cookie-scope li{padding:6px 0}
  .scope-dom{font-size:14px}
  .scope-desc{font-size:12.5px;line-height:1.3}
}