/* Cormorant Garamond italic 600 latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-italic-latin-ext-co3smX5s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond italic 600 latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-italic-latin-co3smX5s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond normal 500 latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-normal-latin-ext-co3bmX5s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond normal 500 latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-normal-latin-co3bmX5s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond normal 600 latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-normal-latin-ext-co3bmX5s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond normal 600 latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-normal-latin-co3bmX5s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond normal 700 latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-normal-latin-ext-co3bmX5s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond normal 700 latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-normal-latin-co3bmX5s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter normal 400 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-normal-latin-ext-UcC73Fwr.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter normal 400 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-normal-latin-UcC73Fwr.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter normal 500 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-normal-latin-ext-UcC73Fwr.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter normal 500 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-normal-latin-UcC73Fwr.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter normal 600 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-normal-latin-ext-UcC73Fwr.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter normal 600 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-normal-latin-UcC73Fwr.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter normal 700 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-normal-latin-ext-UcC73Fwr.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter normal 700 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-normal-latin-UcC73Fwr.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter normal 800 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/inter-normal-latin-ext-UcC73Fwr.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter normal 800 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/inter-normal-latin-UcC73Fwr.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* G5c Muster – Richtung A „Petrol & Gold" – egz.tips
   Quelle der Wahrheit: entwuerfe/g5b/entwurf-a.html (freigegeben 03.10.2026, 13:55) */
:root{
  --petrol:#0f3448;--petrol2:#15465f;--petrol3:#0b2837;
  --gold:#c9a84c;--gold2:#e4c97a;--gold-soft:#fbf7ec;--gold-ink:#7a5c12;
  --ink:#17202a;--mute:#3a4650;--line:#e3e9ec;
  --paper:#ffffff;--soft:#f3f6f7;--green:#1b5e20;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:8px;--shadow:0 24px 50px rgba(15,52,72,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--petrol)}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.1}
h2{font-size:44px;margin-bottom:14px}
h3{font-size:26px}
p.sub{color:#3a4650;font-size:17px;max-width:620px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.center{text-align:center}.center p.sub{margin:0 auto}
section{padding:88px 0}
section.tight{padding:60px 0}
.eyebrow{color:var(--gold-ink);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:16px}
.on-dark .eyebrow{color:var(--gold2)}
.muster{position:fixed;left:16px;bottom:16px;z-index:99;background:#000;color:#fff;font:700 13px/1 var(--sans);padding:9px 12px;border-radius:6px;letter-spacing:.08em}

/* Knöpfe */
.btn{display:inline-block;background:var(--gold);color:#1a1a1a;font-weight:700;padding:15px 24px;border-radius:4px;text-decoration:none;font-size:15px;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;line-height:1.2}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.dark{background:var(--petrol);color:#fff}
.btn.sm{padding:11px 16px;font-size:14px}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta-note{display:block;color:#b8c6ce;font-size:13px;margin-top:12px}

/* Header */
header.site{background:var(--petrol);color:#fff;border-bottom:1px solid rgba(201,168,76,.35);position:relative;z-index:50}
.top{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.top .logo img{height:44px;width:auto}
.nav{display:flex;gap:28px;font-size:15px;font-weight:500}
.nav a{color:#e9eef1;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.nav a:hover,.nav a[aria-current]{border-color:var(--gold)}
.tel{font-weight:600;color:var(--gold2);text-decoration:none;white-space:nowrap}
.burger{display:none;background:none;border:0;width:40px;height:40px;position:relative;cursor:pointer}
.burger span{position:absolute;left:4px;right:4px;height:2px;background:#fff;transition:transform .25s,opacity .25s}
.burger span:nth-child(1){top:11px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mnav{display:none;background:var(--petrol3);border-top:1px solid rgba(201,168,76,.35)}
.mnav.open{display:block}
.mnav a{display:block;padding:16px 24px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08);font-weight:500}
.mnav .mcta{padding:18px 24px}
.mnav .mcta .btn{display:block;text-align:center}

/* Hero mit Slideshow */
.hero{position:relative;background:radial-gradient(1200px 600px at 80% 20%,var(--petrol2),var(--petrol) 60%);color:#fff;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><path d='M0 60h120M60 0v120' stroke='%23ffffff' stroke-opacity='.04'/></svg>")}
.goldline{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7;animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-8%)}to{transform:translateX(8%)}}
.slides{position:relative;min-height:660px}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:56px 0 80px;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .9s ease,transform .9s ease,visibility 0s linear .9s}
.slide.active{opacity:1;visibility:visible;transform:none;transition:opacity .9s ease,transform .9s ease,visibility 0s}
.hero h1{font-size:60px;line-height:1.05;margin-bottom:22px}
.hero h1 em{font-style:italic;color:var(--gold2)}
/* Reparatur Zahlen Folie 2 (Alex 07.10.2026 13:10): Zahlen in Überschriften in Inter fett, gerade – wie .nf in g5d.css */
.hero .hero-h1 .nf{font-family:var(--sans);font-weight:700;font-style:normal;font-size:.86em;letter-spacing:-.02em}
.hero p.lead{font-size:19px;color:#d9e2e7;max-width:560px;margin-bottom:30px}
.portrait{position:relative;justify-self:end;width:min(100%,460px);aspect-ratio:582/700;background:#0e3a50;border-radius:var(--r);box-shadow:0 30px 60px rgba(0,0,0,.35);outline:1px solid rgba(201,168,76,.5);outline-offset:10px}
.portrait .clip img{width:100%;height:100%;object-fit:cover;animation:kb 16s ease-in-out infinite alternate;border-radius:var(--r)}
.portrait .clip{position:absolute;inset:0;border-radius:var(--r);overflow:hidden}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.portrait:after{content:"";position:absolute;inset:0;border-radius:var(--r);background:linear-gradient(180deg,transparent 60%,rgba(15,52,72,.9))}
.cap{position:absolute;left:22px;bottom:18px;z-index:2;font-size:14px;color:#fff}
.cap b{display:block;font-family:var(--serif);font-size:22px}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.num{border-top:1px solid var(--gold);padding-top:18px}
.num b{display:block;font-family:var(--sans);font-weight:800;font-size:46px;white-space:nowrap;line-height:1;color:var(--gold2);letter-spacing:-.03em}
.num > span{color:#cfd9df;font-size:14px;display:block;margin-top:6px}
.cert{justify-self:end;display:flex;gap:26px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(201,168,76,.55);padding:26px;border-radius:var(--r);max-width:520px}
.cert img{width:160px;border-radius:3px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.cert b{display:block;font-family:var(--serif);font-size:26px;margin-bottom:6px}
.cert p{font-size:14px;color:#d9e2e7}
.dots{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.dots button{width:28px;height:14px;background:none;border:0;cursor:pointer;padding:0;position:relative}
.dots button:after{content:"";position:absolute;left:0;right:0;top:5px;height:3px;background:rgba(255,255,255,.3);transition:background .3s}
.dots button[aria-selected="true"]:after{background:var(--gold)}

/* Zertifikat-Hervorhebung */
.certbadge{position:absolute;right:-22px;top:26px;z-index:3;display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);text-decoration:none;padding:8px 14px 8px 8px;border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.35);border:1px solid var(--gold);font-size:11px;line-height:1.25;letter-spacing:.02em}
.certbadge img{width:52px;height:auto;border-radius:2px}
.certbadge b{display:block;font-size:13px;color:var(--petrol)}
.cert{box-shadow:0 0 0 1px rgba(201,168,76,.55),0 0 60px rgba(201,168,76,.22);background:rgba(255,255,255,.08)}
.cert img{width:220px}
.cert b{font-size:30px}
.stat.cert-stat img{width:120px;margin:0 auto 12px;box-shadow:0 10px 24px rgba(15,52,72,.18);border-radius:3px}
.stat.cert-stat b{font-size:26px;letter-spacing:0}
/* Vertrauenszeile */
.trust{background:var(--petrol3);color:#cfd9df;font-size:14px}
.trust .wrap{display:flex;gap:34px;flex-wrap:wrap;justify-content:center;padding:14px 24px}
.trust b{color:var(--gold2)}
.trust .stars{color:var(--gold2);letter-spacing:1px}

/* Karten & Zutaten */
.card{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:30px;box-shadow:var(--shadow)}
.urgent{margin-top:28px;border-left:3px solid var(--gold);padding:14px 18px;background:var(--gold-soft);font-size:15px}
.urgent b{color:var(--petrol)}
.grid2{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.note{font-size:13px;color:#46535d;margin-top:14px}
.linkline{margin-top:28px;font-weight:600}
.linkline a{color:var(--petrol);text-decoration:none;border-bottom:2px solid var(--gold)}
.goldrule{width:56px;height:2px;background:var(--gold);margin:0 0 22px}
.center .goldrule{margin:0 auto 22px}

/* Rechner */
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
label{font-size:13px;font-weight:600;color:var(--mute);display:block;margin-bottom:6px}
.in{width:100%;background:#fff;border:1px solid #d5dde2;border-radius:6px;padding:12px 14px;font-size:16px;font-family:var(--sans);color:var(--ink)}
.in:focus{outline:2px solid var(--gold);outline-offset:1px}
.out{margin-top:18px;border-top:1px solid var(--gold);padding-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.out b{display:block;font-family:var(--sans);font-weight:700;font-size:28px;color:var(--petrol);line-height:1.1;letter-spacing:-.01em}
.out span{font-size:13px;color:#46535d}
.out .net b{color:var(--green)}
/* Rechner-Kurzform mit einem Ergebnis (Korrekturrunde B, 06.10.2026) */
#calc .calc-hint{font-size:14px;font-weight:600;color:var(--gold-ink);margin:0 0 16px}
.out.out-1{grid-template-columns:1fr}
.out-1 b{font-size:36px;margin:2px 0}
.out-1 span{font-size:15px;color:var(--ink)}
.o-satz{font-size:15px;color:var(--ink);margin-top:12px}

/* Kacheln „Für wen" */
.tile{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tile:before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.tile .pct{font-family:var(--sans);font-weight:700;font-size:44px;color:var(--petrol);line-height:1;letter-spacing:-.02em}
.tile .pct small{font-size:18px;color:#46535d;font-weight:600}
.tile h3{font-size:20px;font-family:var(--sans);font-weight:700;margin:10px 0 8px}
.tile p{font-size:15px;color:#46535d}
.tile .dur{margin-top:14px;font-size:13px;font-weight:600;color:var(--petrol);border-top:1px solid var(--line);padding-top:12px}
.srcline{font-size:14px;color:#46535d;margin-top:22px}

/* Schritte */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative}
.steps:before{content:"";position:absolute;left:4%;right:4%;top:28px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold),transparent);opacity:.6}
.step{position:relative;padding-top:74px}
.step:before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;background:var(--petrol);color:var(--gold2);font-family:var(--serif);font-size:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gold);box-shadow:0 10px 24px rgba(15,52,72,.2)}
.step h3{font-family:var(--sans);font-size:17px;font-weight:700;margin-bottom:6px}
.step small{display:block;color:var(--gold-ink);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.step p{font-size:15px;color:#46535d}

/* Preis */
.price{background:var(--petrol);color:#fff}
.price .big{font-family:var(--sans);font-weight:800;font-size:104px;line-height:.9;color:var(--gold2);letter-spacing:-.04em}
.price .big small{font-size:34px;color:#e9eef1;font-weight:600;letter-spacing:0}
.price .bigl{font-size:20px;font-weight:600;color:#e9eef1;margin:4px 0 16px}
.price p{color:#d9e2e7}
table.tbl{width:100%;border-collapse:collapse;font-size:15px}
table.tbl th{text-align:left;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold2);padding:0 14px 12px;border-bottom:1px solid var(--gold)}
table.tbl td{padding:16px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
table.tbl td.v{font-family:var(--sans);font-weight:700;font-size:22px;letter-spacing:-.01em}
.light table.tbl td.v,.light table.tbl td .v{font-family:var(--sans);font-weight:700;font-size:22px;letter-spacing:-.01em}
table.tbl td.v.g{color:var(--gold2)}
table.tbl td.v.n{color:#9be39f}
.light table.tbl th{color:var(--petrol);font-size:13px}
.light table.tbl td{border-color:var(--line);color:var(--ink);font-size:15px}
.light table.tbl td.v.g{color:var(--gold-ink)}
.light table.tbl td.v.n{color:var(--green)}

/* Beweise */
.proof{background:var(--soft)}
.stat{text-align:center;padding:30px 20px;background:#fff;border:1px solid var(--line);border-radius:10px}
.stat b{display:block;font-family:var(--sans);font-weight:700;font-size:52px;line-height:1;color:var(--petrol);letter-spacing:-.02em}
.stat b.gold{color:var(--gold-ink)}
.stat > span{font-size:14px;color:var(--mute);display:block;margin-top:8px}
.rating{display:flex;align-items:center;justify-content:center;gap:14px;margin:34px 0 10px;font-size:15px;color:var(--mute)}
.rating .stars{color:#b8902a;font-size:22px;letter-spacing:2px}
.quote{background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px;position:relative}
.quote:before{content:"„";position:absolute;left:22px;top:-38px;font-family:var(--serif);font-size:96px;color:var(--gold-ink);opacity:.45;line-height:1}
.quote p{font-family:var(--sans);font-size:16px;line-height:1.6;margin:52px 0 18px;color:var(--ink)}
.quote cite{font-style:normal;font-size:14px;font-weight:600;color:var(--petrol);display:block}
.quote cite small{display:block;color:var(--mute);font-weight:400}

/* Grenzen */
.limits{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.limit{display:flex;gap:16px;padding:22px 24px;border:1px solid var(--line);border-radius:10px;background:#fff}
.limit i{flex:0 0 36px;height:36px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--petrol);font-style:normal;font-weight:700}
.limit b{display:block;margin-bottom:4px}
.limit p{font-size:15px;color:#46535d}

/* FAQ */
.faq{max-width:860px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-weight:600;font-size:18px;position:relative;font-family:var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:18px;font-family:var(--serif);font-size:30px;color:var(--gold-ink);transition:transform .3s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:#3a4650;max-width:760px}

/* Ratgeber */
.post{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);display:block;transition:transform .25s,box-shadow .25s}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post .img{aspect-ratio:16/9;background:var(--petrol);overflow:hidden}
.post .img img{width:100%;height:100%;object-fit:cover}
.post .body{padding:22px}
.post small{color:var(--gold-ink);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.post h3{font-family:var(--sans);font-size:18px;font-weight:700;margin:8px 0}
.post p{font-size:15px;color:#46535d}

/* Abschluss */
.final{background:radial-gradient(900px 500px at 20% 0%,var(--petrol2),var(--petrol) 60%);color:#fff;position:relative;overflow:hidden}
.final h2{font-size:52px}
.final p{color:#d9e2e7;font-size:18px;max-width:640px;margin:0 auto 32px}
.final .tel2{margin-top:26px;color:#cfd9df;font-size:15px}
.final .tel2 a{color:var(--gold2);text-decoration:none;font-weight:600}
.author{display:flex;gap:22px;align-items:center;max-width:720px;margin:56px auto 0;padding:24px;border:1px solid rgba(201,168,76,.45);border-radius:10px;background:rgba(255,255,255,.05);text-align:left}
.author img{width:84px;height:84px;border-radius:50%;object-fit:cover;outline:1px solid var(--gold);outline-offset:4px}
.author b{display:block;font-family:var(--serif);font-size:24px}
.author p{font-size:15px;margin:4px 0 0;color:#d9e2e7}
.author a{color:var(--gold2)}

/* Fuß */
footer{background:var(--petrol3);color:#b8c6ce;font-size:14px;padding:56px 0 28px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
footer h4{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
footer a{color:#dfe7ec;text-decoration:none;display:block;padding:4px 0}
footer a:hover{color:var(--gold2)}
footer .src{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;font-size:13px;color:#8fa1ac}
footer .src a{display:inline;color:#b8c6ce;text-decoration:underline;padding:0}
footer .legal{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;font-size:13px}
footer .legal a{display:inline;padding:0}

/* Unterseite Preis */
.page-hero{background:radial-gradient(1000px 500px at 85% 10%,var(--petrol2),var(--petrol) 60%);color:#fff;position:relative;overflow:hidden;padding:72px 0 80px}
.page-hero .grid2{align-items:center}
.page-hero h1{font-size:54px;line-height:1.08;margin-bottom:20px}
.page-hero h1 em{font-style:italic;color:var(--gold2)}
.page-hero p.lead{font-size:18px;color:#d9e2e7;max-width:600px;margin-bottom:26px}
.pricecard{justify-self:end;width:min(100%,440px);background:rgba(255,255,255,.06);border:1px solid rgba(201,168,76,.55);border-radius:10px;padding:34px;text-align:center;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.pricecard .big{font-family:var(--sans);font-weight:800;font-size:112px;line-height:.9;color:var(--gold2);letter-spacing:-.04em}
.pricecard .big small{font-size:34px;color:#e9eef1;font-weight:600;letter-spacing:0}
.pricecard .l1{font-size:16px;color:#fff;margin-top:14px;font-weight:600}
.pricecard .l2{font-size:14px;color:#b8c6ce;margin-top:6px}
.pricecard hr{border:0;border-top:1px solid rgba(201,168,76,.45);margin:22px 0}
.pricecard ul{list-style:none;text-align:left;font-size:14px;color:#d9e2e7}
.pricecard li{padding:6px 0 6px 26px;position:relative}
.pricecard li:before{content:"✓";position:absolute;left:0;color:var(--gold2);font-weight:700}
.standzeile{font-size:13px;color:#46535d;border-bottom:1px solid var(--line);padding:14px 0}
.standzeile .wrap{display:flex;gap:18px;flex-wrap:wrap}
.crumbs{font-size:13px;color:#b8c6ce;margin-bottom:22px}
.crumbs a{color:#dfe7ec;text-decoration:none}
.list{counter-reset:l;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.list li{counter-increment:l;position:relative;padding:22px 24px 22px 76px;background:#fff;border:1px solid var(--line);border-radius:10px}
.list li:before{content:counter(l,decimal-leading-zero);position:absolute;left:22px;top:22px;font-family:var(--sans);font-weight:700;font-size:22px;color:var(--gold-ink);line-height:1}
.list li b{display:block;margin-bottom:4px}
.list li p{font-size:15px;color:#46535d}
.list li.free{outline:2px solid var(--gold);outline-offset:-2px}
.list li.free b:after{content:"kostenlos";font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);margin-left:10px;font-weight:700}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rule{padding:22px 24px;border:1px solid var(--line);border-radius:10px;background:#fff}
.rule b{display:block;color:var(--petrol);margin-bottom:6px;font-size:15px}
.rule p{font-size:15px;color:#46535d}
.decision{margin-top:16px;border:1px dashed var(--gold-ink);background:var(--gold-soft);padding:12px 14px;font-size:14px;color:#5a4410;border-radius:6px}
.decision b{color:#6b5a1e}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.compare .col{padding:30px;border-radius:10px;border:1px solid var(--line);background:#fff}
.compare .col.us{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.compare .col h3{font-family:var(--sans);font-size:18px;font-weight:700;margin-bottom:12px}
.compare .col p{font-size:16px;color:#3a4650}
.compare .col.us p{color:#d9e2e7}
.compare .col.us small{color:var(--gold2)}
.compare .col small{display:block;color:var(--gold-ink);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}

/* Scroll-Erscheinen */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.is-in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .goldline,.portrait img{animation:none}
  .slide,.btn,.tile,.post{transition:none}
}

/* Mobil */
@media (max-width:900px){
  .muster{bottom:12px;left:12px;font-size:11px;padding:7px 9px}
  .trust .wrap{gap:8px 18px;padding:12px 16px;font-size:13px}
  section{padding:56px 0}
  h2{font-size:34px}
  .nav,.tel,.top .btn{display:none}
  .burger{display:block}
  .top{height:68px}
  .top .logo img{height:36px}
  .slides{min-height:0}
  .slide{position:relative;inset:auto;grid-template-columns:1fr;padding:36px 0 60px;align-content:start;gap:28px;display:none}
  .slide.active{display:grid}
  .hero h1{font-size:36px;overflow-wrap:anywhere;hyphens:manual}
  .hero p.lead{font-size:17px}
  .portrait{width:min(100%,320px);justify-self:start}
  .nums{grid-template-columns:1fr;gap:16px}
  .num b{font-size:44px}
  .cert{flex-direction:column;align-items:flex-start;justify-self:start}
  .cert img{width:160px}
  .certbadge{right:8px;top:12px;padding:6px 10px 6px 6px}
  .certbadge img{width:40px}
  .certbadge b{font-size:12px}
  .dots{bottom:18px}
  .grid2,.grid3,.grid4,.limits,.list,.rules,.compare{grid-template-columns:1fr;gap:18px}
  .row,.out{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps:before{display:none}
  .step{padding-top:0;padding-left:74px}
  .price .big{font-size:76px}
  .rating{flex-wrap:wrap;text-align:center;gap:8px 12px}
  .price .big small{font-size:26px}
  table.tbl{font-size:14px;table-layout:fixed}
  table.tbl td.v,.light table.tbl td.v,.light table.tbl td .v{font-size:18px}
  table.tbl th{font-size:10px;letter-spacing:.04em;padding-bottom:8px;vertical-align:bottom}
  table.tbl th,table.tbl td{padding-left:6px;padding-right:6px}
  table.tbl td small{font-size:12px}
  .stat b{font-size:48px}
  .final h2{font-size:38px}
  .author{flex-direction:column;align-items:flex-start}
  footer .cols{grid-template-columns:1fr 1fr;gap:26px}
  .page-hero{padding:44px 0 56px}
  .page-hero h1{font-size:36px;overflow-wrap:anywhere;hyphens:manual}
  .pricecard{justify-self:stretch;padding:26px}
  .pricecard .big{font-size:88px}
  .pricecard .big small{font-size:30px}
}
@media (max-width:480px){
  footer .cols{grid-template-columns:1fr}
  .btn{width:100%;text-align:center}
}

/* Korrekturrunde 4 (Alex 04.10.2026 14:47): Lücke zwischen Navigation und Hero-Inhalt kleiner;
   Inhalt sitzt oben statt mittig; Zertifikat-Plakette am Porträt entfernt (HTML), Slides 5 s (app.js). */
@media (min-width:901px){.slide{align-items:start;padding-top:34px}.slides{min-height:640px}}
/* Korrekturrunde 4: Abschnittsabstand oberhalb des Hero entfällt – Inhalt rückt an die Navigation heran */
.hero{padding-top:16px}
@media (max-width:900px){.hero{padding-top:8px}}
/* Korrekturrunde 5 (Alex 04.10.2026 15:00): Auf hellem Grund ist aller Lesetext dunkel (Tinte), nie grau. Gilt seitenweit. */
body{color:var(--ink)}
section:not(.on-dark) p,section:not(.on-dark) li,section:not(.on-dark) td,section:not(.on-dark) dd,
.tile p,.step p,.limit p,.post p,.quote p,.faq details p,.card p,.note,.srcline,.out span,.tile .dur,.tile .pct small,
.prose p,.prose li,.prose td,.prose blockquote,.prose blockquote + p,.post .pmeta,.stat > span,.rating,.quote cite small{color:var(--ink)}
.on-dark p,.on-dark li,.price p,.final p,.hero p.lead,.page-hero p.lead{color:#e9eef1}
.price .bigl,.pricecard .l1{color:#fff}
/* Korrekturrunde 6 (Alex 04.10.2026 15:11): kein Hineinzoomen auf dem Porträt – wirkte beim neuen Foto wie Wackeln */
.portrait .clip img{animation:none}


/* ==========================================================================
   G5d Ergänzungen – abgeleitet aus dem freigegebenen Muster G5c (03.10.2026 21:58)
   Regeln: keine neuen Farben außer Ampel · Zahlen nie in Cormorant · Gold auf hell
   nur als --gold-ink · Fließtext #46535d / #3a4650 · Mobil bis 900 px.
   Bestehende G5c-Selektoren werden hier NICHT verändert, nur neue Klassen ergänzt.
   ========================================================================== */
:root{
  /* Ampel – einzige neue Farben (Kontrast Text/Hintergrund jeweils > 7:1) */
  --amp-g:#1b5e20;--amp-g-bg:#edf6ee;--amp-g-line:#b5d6b8;--amp-g-dot:#2e7d32;
  --amp-y:#6b4f00;--amp-y-bg:#fdf6e1;--amp-y-line:#e8d396;--amp-y-dot:#d9a400;
  --amp-r:#a11d1d;--amp-r-bg:#fcefef;--amp-r-line:#eec3c3;--amp-r-dot:#c62828;
}

/* Zahlen in Überschriften: Inter fett statt Zierschrift (Generator setzt .nf) */
h1 .nf,h2 .nf,.serif .nf{font-family:var(--sans);font-weight:700;font-size:.86em;letter-spacing:-.02em}

/* Wechselgrund heller Abschnitte */
section.alt{background:var(--soft)}
section#haeufige-fragen{scroll-margin-top:56px}

/* --- Seitenkopf-Varianten (Basis .page-hero aus G5c) ---------------------- */
.page-hero .ph-single{max-width:820px}
.page-hero .ph-single p.lead{max-width:680px}
.ph-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:26px;padding-top:16px;border-top:1px solid rgba(201,168,76,.35);font-size:13px;color:#b8c6ce;max-width:640px}
.ph-meta b{color:#e9eef1;font-weight:600}
.ph-figure{justify-self:end;width:min(100%,460px);background:#fff;border-radius:var(--r);box-shadow:0 30px 60px rgba(0,0,0,.35);outline:1px solid rgba(201,168,76,.5);outline-offset:10px;overflow:hidden;margin:0}
.ph-figure img{width:100%;height:auto}
/* (b) Werkzeug-Kopf: helle Karte ragt in den Petrol-Kopf */
.page-hero.ph-tool{padding-bottom:150px}
.tool-zone{padding:0 0 56px;position:relative;z-index:2}
.tool-card{max-width:1000px;margin:-110px auto 0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:34px;box-shadow:0 30px 60px rgba(15,52,72,.16)}
.tool-card .tool-embed{margin:0}
/* (c) schlanker Kopf für Kontakt, Recht, Übersicht */
.page-hero.ph-slim{padding:52px 0 56px}
.page-hero.ph-slim h1{font-size:46px;margin-bottom:14px}
.page-hero.ph-slim p.lead{margin-bottom:0}
.page-hero .crumbs span[aria-current]{color:#dfe7ec}

/* --- Sprungmarken-Leiste (nur Hauptseite) --------------------------------- */
.jumpbar{position:sticky;top:0;z-index:45;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:0 8px 20px rgba(15,52,72,.06)}
.jumpbar .wrap{display:flex;align-items:center;gap:6px 26px;overflow-x:auto;white-space:nowrap;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.jumpbar .jl{flex:0 0 auto;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold-ink)}
.jumpbar a{flex:0 0 auto;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;padding:17px 0 15px;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.jumpbar a:hover,.jumpbar a[aria-current]{border-color:var(--gold);color:var(--petrol)}

/* --- Artikelkörper --------------------------------------------------------- */
.article{padding:72px 0 80px}
.prose{max-width:760px;margin:0 auto;font-size:17px;line-height:1.7;color:#3a4650}
.prose > :first-child{margin-top:0}
.prose h2{font-size:36px;color:var(--ink);margin:60px 0 16px;scroll-margin-top:80px}
.prose h3{font-family:var(--sans);font-size:20px;font-weight:700;letter-spacing:0;line-height:1.3;color:var(--ink);margin:36px 0 10px;scroll-margin-top:80px}
.prose h4{font-size:16px;font-weight:700;color:var(--ink);margin:26px 0 8px}
.prose p{margin:0 0 18px}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--petrol);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a.btn{text-decoration:none;color:#1a1a1a}
.prose ul{list-style:none;margin:0 0 22px}
.prose ul li{position:relative;padding-left:24px;margin-bottom:8px}
.prose ul li:before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--gold-ink)}
.prose li > ul,.prose li > ol{margin:8px 0 0}
.prose hr{border:0;width:56px;height:2px;background:var(--gold);margin:40px 0}
.prose img{display:block;max-width:100%;max-height:620px;width:auto;height:auto;margin:8px auto 22px;border-radius:var(--r);border:1px solid var(--line);box-shadow:0 12px 30px rgba(15,52,72,.10)}
.prose p.pimg{text-align:center}
.prose p.pimg img{margin-bottom:0}
.prose .tool-embed img,.prose .post img{box-shadow:none;border:0;margin:0;border-radius:0}
.prose blockquote{margin:28px 0;padding:20px 24px;border-left:3px solid var(--petrol);background:var(--soft);border-radius:0 var(--r) var(--r) 0;color:var(--ink);font-size:16px}
.prose blockquote > :last-child{margin-bottom:0}
.prose code{font-size:.9em;background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
/* Tabellen im Text: G5c-Tabelle .tbl (hell) in Karte */
.tbl-wrap{overflow-x:auto;margin:10px 0 28px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 18px 6px}
.tbl-wrap table.tbl{font-size:15px}
.tbl-wrap table.tbl th{padding-top:12px}
.tbl-wrap table.tbl tr:last-child td{border-bottom:0}
table.tbl td.nc{font-weight:700;color:var(--petrol);white-space:nowrap}
/* Schrittfolge aus nummerierten Listen – Goldzahl in Inter */
.prose ol.stepper{list-style:none;counter-reset:st;margin:26px 0 30px}
.prose ol.stepper > li{counter-increment:st;position:relative;padding:2px 0 22px 64px}
.prose ol.stepper > li:before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:0;width:44px;text-align:left;font-family:var(--sans);font-weight:700;font-size:22px;line-height:1.2;color:var(--gold-ink)}
.prose ol.stepper > li:after{content:"";position:absolute;left:13px;top:34px;bottom:8px;width:1px;background:linear-gradient(180deg,var(--gold),transparent);opacity:.7}
.prose ol.stepper > li:last-child{padding-bottom:4px}
.prose ol.stepper > li:last-child:after{display:none}
.prose ol.stepper > li > p{margin-bottom:8px}

/* --- Kästen ---------------------------------------------------------------- */
.box{margin:30px 0;padding:22px 24px;border-radius:10px;font-size:16px;line-height:1.65;color:#3a4650}
.box > :last-child{margin-bottom:0}
.box p{margin:0 0 12px}
.box .box-t{display:block;font-weight:700;color:var(--petrol);margin-bottom:6px;font-size:16px;line-height:1.4}
.box .box-e{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold-ink);margin-bottom:10px}
.box .tbl-wrap{background:#fff}
.box.wichtig{border-radius:0;border-left:3px solid var(--gold);background:var(--gold-soft);padding:16px 20px}
.box.hinweis{background:var(--soft);border:1px solid var(--line)}
.box.hinweis .box-t{color:var(--ink)}
.box.beispiel{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden;padding-top:28px}
.box.beispiel:before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.box.beispiel strong{color:var(--petrol)}
.box.arbeitgeber{background:var(--petrol);color:#d9e2e7;border:1px solid var(--petrol)}
.box.arbeitgeber .box-e{color:var(--gold2)}
.box.arbeitgeber .box-t,.box.arbeitgeber strong{color:#fff}
.box.arbeitgeber a{color:var(--gold2);text-decoration-color:var(--gold2)}
.box.arbeitgeber ul li:before{background:var(--gold2)}
.box.arbeitgeber .tbl-wrap{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.box.arbeitgeber table.tbl th{color:var(--gold2)}
.box.arbeitgeber table.tbl td{color:#e9eef1;border-color:rgba(255,255,255,.12)}
.box.arbeitgeber table.tbl td.nc{color:var(--gold2)}
.box.erfahrung{background:#fff;border:1px solid var(--line);position:relative;margin-top:52px;padding-top:30px}
/* Reparatur Alex 07.10.2026 13:10: Zitatzeichen 20 px höher (vorher top:-40px), überdeckt „Aus“ der Eyebrow nicht mehr */
.box.erfahrung:before{content:"„";position:absolute;left:22px;top:-60px;font-family:var(--serif);font-size:96px;color:var(--gold-ink);opacity:.45;line-height:1}
.box.erfahrung .box-e{margin-top:10px}
/* Zwischen-Handlungsaufforderung */
.midcta{margin:34px 0;padding:22px 24px;border:1px solid var(--gold);background:var(--gold-soft);border-radius:10px;display:flex;gap:18px 24px;align-items:center;justify-content:space-between}
.midcta .midcta-t{color:var(--ink);font-size:16px;line-height:1.55}
.midcta .midcta-t > :last-child{margin-bottom:0}
.midcta .btn{flex:0 0 auto}

/* --- Sterne-Zeile Altartikel (Basis .rating aus G5c) ---------------------- */
.rating.inline{justify-content:flex-start;flex-wrap:wrap;gap:6px 12px;margin:44px 0 0;padding-top:22px;border-top:1px solid var(--line);color:#46535d}
.rating.inline strong{color:var(--ink)}
.rating .rnote{font-size:12px;color:#46535d}
/* Sterne klickbar (Phase 7): Optik wie bisher, Mausfahrt/Fokus färbt bis zum Stern (Gold auf hell #7a5c12) */
.rating .stars .stern{-webkit-appearance:none;appearance:none;background:none;border:0;margin:0;padding:2px 2px;font:inherit;line-height:1;letter-spacing:0;color:inherit;cursor:pointer;border-radius:4px}
.rating .stars .stern:focus-visible{outline:2px solid var(--gold-ink);outline-offset:1px}
.rating .stars.wahl .stern{color:#c3cbd1}
.rating .stars.wahl .stern.an{color:var(--gold-ink)}
/* Frage unter der Sternreihe (Wortlaut alte Seite, Alex 05.10.2026): unauffällig wie „aus N Stimmen“ */
.rating .rfrage{flex-basis:100%}
.rating:not(.inline) .rfrage{text-align:center}
/* Reparatur Sterne-Zeile (Alex 07.10.2026): Startseite ab 901 px brach die Sterne 3 + 2 um, weil die Frage (flex-basis 100 %)
   in der nicht umbrechenden G5c-Zeile alle Teile zusammenschob. Jetzt: Zeile darf umbrechen, die 5 Sterne und „x,xx von 5“
   schrumpfen und brechen nie; die Frage steht auf allen Breiten in eigener Zeile darunter. Nur Darstellung, Daten unverändert. */
.rating[data-sterne-seite]{flex-wrap:wrap}
.rating .stars,.rating .stars + strong{flex:0 0 auto;white-space:nowrap}

/* Sterne-Band, Richtung B (Alex 07.10.2026 14:03 „für B entscheiden“): Sterne wurden überscrollt.
   Alex 14:26: nur so breit wie die Texte („sonst unseriös“), „nie übertreiben“ → Petrol-Kasten mit Kartenecken und
   feiner Goldlinie in der Textspalte, Startseite: Frage | Sterne | Wert; Artikel kompakt: Frage + Sterne | Wert.
   Nur Darstellung, Wert und Stimmen unverändert (Sterne nie anfassen). Zahlen in Inter, nie Zierschrift. */
.sband{background:var(--petrol);color:#fff;margin:44px 0 10px;padding:30px 0;border:1px solid rgba(201,168,76,.55);border-radius:10px}
.rating.sband-in{display:grid;grid-template-columns:1.2fr auto auto;gap:36px;align-items:center;margin:0;padding:0 36px;font-size:15px;color:#e9eef1;text-align:left}
.sband-text{display:flex;flex-direction:column;gap:6px}
.sband-e{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);font-weight:700}
.rating.sband-in .rfrage{flex-basis:auto;text-align:left;font-family:var(--sans);font-size:23px;font-weight:700;line-height:1.25;color:#fff}
.sband-h{font-size:15px;color:#d5e0e6}
.rating.sband-in .rnote{font-size:14px;font-weight:600;color:var(--gold2)}
.rating.sband-in .rnote:empty{display:none}
.rating.sband-in .stars{color:var(--gold2);font-size:44px;letter-spacing:0}
.rating.sband-in .stars .stern{padding:0 3px}
.rating.sband-in .stars.wahl .stern{color:#5f7f8f}
.rating.sband-in .stars.wahl .stern.an{color:var(--gold2)}
.sband-wert{display:flex;align-items:center;gap:12px;padding-left:30px;border-left:1px solid rgba(255,255,255,.22)}
.sband-wert .sterne-wert{font-family:var(--sans);font-weight:800;font-size:46px;line-height:1;letter-spacing:-.02em;color:#fff}
.sband-wert > span{font-size:15px;line-height:1.35;color:#e9eef1}
.sband-wert b{color:#fff}
.sband-wert small{font-size:13px;color:#b8c6ce}
/* Artikel: Textspalte, kompakter */
.sband-artikel{margin:44px 0 0;padding:24px 0}
.sband-artikel .rating.sband-in{grid-template-columns:1fr auto;grid-template-areas:"text wert" "sterne wert";gap:8px 28px;padding:0 28px}
.sband-artikel .sband-text{grid-area:text}
.sband-artikel .rating.sband-in .stars{grid-area:sterne;font-size:34px;margin-left:-3px}
.sband-artikel .sband-wert{grid-area:wert;padding-left:26px}
.sband-artikel .rating.sband-in .rfrage{font-size:20px}
.sband-artikel .sband-h{font-size:14px}
.sband-artikel .sband-wert .sterne-wert{font-size:40px}
@media (max-width:1100px){.sband:not(.sband-artikel) .rating.sband-in{gap:24px;padding:0 28px}.sband:not(.sband-artikel) .rating.sband-in .stars{font-size:38px}.sband:not(.sband-artikel) .sband-wert{padding-left:22px}}
@media (max-width:900px){.sband,.sband-artikel{padding:24px 0}
  .rating.sband-in,.sband-artikel .rating.sband-in{grid-template-columns:1fr;grid-template-areas:none;gap:14px;text-align:center;padding:0 18px}
  .sband-artikel .sband-text,.sband-artikel .rating.sband-in .stars,.sband-artikel .sband-wert{grid-area:auto}
  .rating.sband-in .rfrage,.sband-artikel .rating.sband-in .rfrage{text-align:center;font-size:20px}
  .rating.sband-in .stars,.sband-artikel .rating.sband-in .stars{font-size:42px;margin-left:0}
  .sband-wert,.sband-artikel .sband-wert{justify-content:center;border-left:0;padding-left:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.22)}
  .sband-wert .sterne-wert,.sband-artikel .sband-wert .sterne-wert{font-size:38px}.sband-wert > span{text-align:left}}

/* --- Werkzeuge ------------------------------------------------------------- */
.tool-embed{margin:30px 0}
.tool-missing{border:2px dashed var(--gold-ink);background:var(--gold-soft);border-radius:10px;padding:28px 24px;text-align:center;color:#5a4410;font-size:15px}
.tool-missing b{display:block;font-size:18px;color:var(--petrol);margin-bottom:6px}

/* Breite Einbauten im Artikel (Ratgeber-Raster) */
.prose .wide{width:min(1152px,calc(100vw - 48px));margin-left:calc(50% - min(576px,calc(50vw - 24px)))}

/* --- Ratgeber-Karten: ohne Bild, Petrol-Feld, Metazeile ------------------- */
.post.noimg{position:relative}
.post.noimg:before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.post.noimg .body{padding:26px 24px 24px}
.post .more{display:block;margin-top:14px;font-weight:600;font-size:14px;color:var(--petrol)}
.post .img.ph{display:flex;align-items:flex-end;padding:20px 22px 26px;background:radial-gradient(500px 260px at 80% 10%,var(--petrol2),var(--petrol) 70%);position:relative}
.post .img.ph:after{content:"";position:absolute;left:22px;right:22px;bottom:16px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.post .img.ph span{font:600 12px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold2)}
.post .pmeta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:#46535d;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.post .pmeta .stars{color:#b8902a;letter-spacing:1px}
.post-grid{margin-top:34px}
.rel-grid{margin-top:34px}

/* --- Quellen, Autorenbox hell --------------------------------------------- */
.sources{max-width:760px;margin:0 auto}
.sources ul,.sources ol{list-style:none;font-size:15px;color:#3a4650;margin-top:8px}
.sources li{padding:10px 0;border-bottom:1px solid var(--line)}
.sources li:last-child{border-bottom:0}
.sources a{color:var(--petrol);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.sources p{font-size:15px;color:#3a4650;margin-bottom:10px}
.author.light{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);margin:0 auto}
.author.light b{color:var(--ink)}
.author.light p{color:#46535d}
.author.light a{color:var(--petrol);font-weight:600}
.faq details ul,.faq details ol{padding:0 0 18px 22px;color:#3a4650;max-width:760px}
.faq details li{margin-bottom:6px}
.faq details table{margin-bottom:18px}

/* --- Formularelemente (für Werkzeuge) ------------------------------------- */
.field{margin-bottom:16px}
.field .hint{display:block;font-size:13px;color:#46535d;margin-top:6px}
.rcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.rcard{position:relative;display:block;margin:0;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink)}
.rcard input{position:absolute;opacity:0;width:1px;height:1px}
.rcard > span{display:block;position:relative;padding:14px 16px 14px 46px;border:1px solid #d5dde2;border-radius:6px;background:#fff;line-height:1.35;transition:border-color .2s,background .2s}
.rcard > span:before{content:"";position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:1px solid #8c9aa4;background:#fff;box-sizing:border-box}
.rcard small{display:block;font-weight:400;color:#46535d;font-size:13px;margin-top:2px}
.rcard input:checked + span{border-color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold)}
.rcard input:checked + span:before{border:5px solid var(--petrol)}
.rcard input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;color:var(--ink)}
.check input{margin-top:4px;accent-color:var(--petrol)}
.progress-l{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:#46535d;margin-bottom:8px}
.progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.progress > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .4s ease}
.ampel{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:10px;border:1px solid var(--line);background:#fff}
.ampel > i{flex:0 0 18px;height:18px;border-radius:50%;margin-top:4px;box-shadow:0 0 0 4px rgba(255,255,255,.8)}
.ampel b{display:block;font-size:18px;margin-bottom:4px}
.ampel p{font-size:15px;color:var(--ink)}
.ampel.gruen{background:var(--amp-g-bg);border-color:var(--amp-g-line)}.ampel.gruen b{color:var(--amp-g)}.ampel.gruen > i{background:var(--amp-g-dot)}
.ampel.gelb{background:var(--amp-y-bg);border-color:var(--amp-y-line)}.ampel.gelb b{color:var(--amp-y)}.ampel.gelb > i{background:var(--amp-y-dot)}
.ampel.rot{background:var(--amp-r-bg);border-color:var(--amp-r-line)}.ampel.rot b{color:var(--amp-r)}.ampel.rot > i{background:var(--amp-r-dot)}
.form-err{display:block;color:var(--amp-r);font-size:13px;font-weight:600;margin-top:6px}

/* --- Prüfseite (_uebersicht.html) ----------------------------------------- */
.pruef td a{color:var(--petrol);font-weight:600}
.pruef td.warn{color:var(--amp-r);font-weight:600}
.pruef td.ok{color:var(--amp-g);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .jumpbar a,.rcard > span,.progress > i,.post.noimg{transition:none}
}

/* Mobil */
/* Phase 9 (Alex 05.10.2026, A): Folien 2/3 der Startseite sind h2, sehen aus wie die h1 der Folie 1 (.hero h1 in g5c/styles.css) */
.hero h2.hero-h1{font-size:60px;line-height:1.05;margin-bottom:22px}
.hero h2.hero-h1 em{font-style:italic;color:var(--gold2)}
@media (max-width:900px){
  .hero h2.hero-h1{font-size:36px;overflow-wrap:anywhere;hyphens:manual}
  .page-hero.ph-tool{padding-bottom:100px}
  .tool-card{margin-top:-70px;padding:22px 18px}
  .page-hero.ph-slim{padding:36px 0 42px}
  .page-hero.ph-slim h1{font-size:32px}
  .ph-figure{justify-self:start;width:min(100%,360px)}
  .ph-meta{margin-top:20px}
  .jumpbar .wrap{scrollbar-width:none;gap:6px 20px}
  .jumpbar .wrap::-webkit-scrollbar{display:none}
  .jumpbar a{font-size:13px;padding:14px 0 12px}
  .article{padding:44px 0 56px}
  .prose{font-size:16px}
  .prose h2{font-size:30px;margin-top:46px;scroll-margin-top:64px}
  .prose h3{font-size:18px;scroll-margin-top:64px}
  .prose ol.stepper > li{padding-left:52px}
  .prose ol.stepper > li:before{font-size:20px}
  .tbl-wrap{padding:6px 10px 4px}
  .tbl-wrap table.tbl{table-layout:auto}
  .box{padding:18px 18px}
  .midcta{flex-direction:column;align-items:stretch}
  .midcta .btn{text-align:center}
}

/* Funktionsfix 04.10.2026 nach Alex' Regel vom 03.10.2026 („Zahlen nie in Zierschrift"):
   Die Kreiszahlen der Schrittfolge auf der Startseite standen im Muster noch in Cormorant. */
.step:before{font-family:var(--sans);font-weight:700;font-size:24px;letter-spacing:-.02em}

/* Korrekturen nach Sichtprüfung 04.10.2026 (Lauf 1) */
/* Artikel- und Dazu-passt-Karten im Textkörper: keine Unterstreichung, keine Linkfarbe */
.prose a.post,.prose a.post:hover{text-decoration:none;color:var(--ink);font-weight:400}
/* Breite Tabellen und die Rechner-Kurzform sprengen auf dem Desktop die schmale Lesespalte: ausbrechen lassen */
@media (min-width:901px){
  .prose .tbl-wrap{width:min(1000px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%)}
  .prose .tool-embed[data-werkzeug="rechner-kurz"]{width:min(1152px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%)}
}
/* Mobil: Hinweis, dass die Tabelle seitlich wischbar ist */
@media (max-width:900px){
  .prose .tbl-wrap{position:relative;padding-top:26px}
  .prose .tbl-wrap:before{content:"Tabelle seitlich wischbar →";position:absolute;right:14px;top:7px;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
  .prose .tbl-wrap table.tbl td,.prose .tbl-wrap table.tbl th{min-width:120px}
}
/* Kundenstimmen: Zuschreibung als eigene Zeile unter dem Zitat */
.prose blockquote + p{margin:-16px 0 32px 27px;font-size:14px;color:#46535d}
.prose blockquote + p strong{color:var(--petrol)}
/* Phase 9: Fußspalten-Titel als p.fh statt h4 (gleiche Optik wie footer h4 im Muster); Zertifikatbilder mit
   width/height-Attributen behalten ihr Seitenverhältnis */
footer .fh{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
.cert img,.stat.cert-stat img{height:auto}

/* Phase 10 Frontend-QS (05.10.2026) – reine Reparaturen, Aussehen wie freigegeben:
   unlesbarer Text in der Arbeitgeber-Box und auf dem dunklen Knopf, abgeschnittene lange Wörter, Tabellenköpfe unter 420 px */
.box.arbeitgeber p,.box.arbeitgeber li{color:#d9e2e7}
a.btn.dark{color:#fff}
.prose h2,.prose h3,.page-hero h1{overflow-wrap:break-word;hyphens:auto}
@media (max-width:420px){table.tbl th{letter-spacing:.03em;padding-left:8px;padding-right:8px;overflow-wrap:break-word;hyphens:auto}table.tbl td{padding-left:8px;padding-right:8px}}
/* Phase 10: mobil die erste Folie schon vor dem Skript zeigen – sonst springt die Seite um ~600 px, wenn app.js die Diashow startet (CLS) */
@media (max-width:900px){.slides:not(:has(.slide.active)) .slide:first-child{display:grid;opacity:1;visibility:visible;transform:none}}

/* R1 Barrierefreiheit (Alex 07.10.2026 „ja“). R1d Fokusring, R1g Fehlermeldung am Feld und R1f mobil waren Designfragen:
   freigegeben am 07.10.2026 10:45 („so wie du vorschlägst“) als Variante A / A / C (Entwürfe web/pruefbilder/r1-entwuerfe/).
   Alles andere ändert das freigegebene Aussehen bei normaler Bedienung nicht. */
/* R1a Sprunglink: erstes Element jeder Seite, nur bei Tastaturfokus sichtbar (Farben/Schrift wie der Gold-Knopf .btn) */
.skip{position:absolute;left:16px;top:-200px;z-index:200;background:var(--gold);color:#1a1a1a;font:700 15px/1.2 var(--sans);padding:12px 18px;border-radius:4px;text-decoration:none}
.skip:focus{top:12px}
/* Nur für Vorlesegeräte (leere Tabellen-Kopfzelle, Zwischenüberschrift der Artikelliste) */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* R1e Umbruch bei 320 px (WCAG 1.4.10) + R1f mobil, Variante C (Alex 07.10.2026 10:45): lange Wörter
   („Eingliederungszuschuss“, „Rückforderungsverfahren“) schoben bei 320 px (und mit vergrößerten Textabständen nach WCAG 1.4.12
   auch bei 390 px) die einspaltigen Raster über den Rand. Mobil (bis 900 px, ab 360 px wie unter 360 px): Spalten dürfen
   schmaler werden als ihr längstes Wort, ein Wort, das nicht in die Zeile passt, wird umbrochen; Überschriften und fetter Text
   trennen dabei mit Bindestrich (Silbentrennung nach lang="de"), Fließtext nicht. */
@media (max-width:900px){
  .grid2,.grid3,.grid4,.limits,.list,.rules,.compare,.steps{grid-template-columns:minmax(0,1fr)}
  .limit > *{min-width:0}
  main h2,main h3,main p,main li,main b,main small,main a{overflow-wrap:break-word}
  .list li.free b:after{white-space:nowrap}
  main h2,main h3,main b{-webkit-hyphens:auto;hyphens:auto}
}
/* R1f Textabstände, Desktop: die Hero-Folien lagen absolut in einem Rahmen fester Höhe (640 px) – mit größeren
   Textabständen (oder größerer Schrift) wurde der Haupt-Knopf abgeschnitten. Jetzt liegen die Folien übereinander im selben
   Rasterfeld; der Rahmen wächst erst mit, wenn der Inhalt mehr als 80 px über den Rahmen hinausreicht (so weit durfte er
   bisher schon in den unteren Innenabstand des Hero ragen, ohne abgeschnitten zu werden). Bei normaler Darstellung reicht
   Folie 1 bis 642 px → Rahmen bleibt 640 px, alles liegt wie vorher (gemessen bei 1024 und 1440 px). Gleiche Breite wie
   vorher (über den Innenabstand des Rahmens, wie inset:0). */
@media (min-width:901px){
  .slides{display:grid}
  .slide{position:relative;inset:auto;grid-area:1/1;margin:0 -24px -80px;padding-bottom:0}
}

/* R1d Fokusring, Variante A (Alex 07.10.2026 10:45): Tastaturfokus als 3 px Petrol #0f3448 mit 2 px weißem Abstand
   (13:1 auf Weiß; vorher Gold 2,3:1). Auf dunklem Grund (Kopf, Fuß, Preisblock, Abschluss, Vertrauensleiste, Mobilmenü)
   Hellgold #e4c97a (8:1 auf Petrol). Gilt für Links, Knöpfe, Eingabefelder, Antwortkarten, Sterne.
   Ausgenommen sind Bereiche, die nur per Skript den Fokus bekommen (Ergebnis des Online-Checks): dort wie bisher kein Ring. */
:focus-visible,.in:focus,.tl-opt:focus-within,.rcard input:focus-visible + span,.rating .stars .stern:focus-visible{outline:3px solid #0f3448!important;outline-offset:2px!important;box-shadow:0 0 0 2px #fff!important}
header.site :focus-visible,header.site .in:focus,header.site .tl-opt:focus-within,header.site .rcard input:focus-visible + span,header.site .rating .stars .stern:focus-visible,
.on-dark :focus-visible,.on-dark .in:focus,.on-dark .tl-opt:focus-within,.on-dark .rcard input:focus-visible + span,.on-dark .rating .stars .stern:focus-visible,
footer :focus-visible,footer .in:focus,footer .tl-opt:focus-within,footer .rcard input:focus-visible + span,footer .rating .stars .stern:focus-visible,
.final :focus-visible,.final .in:focus,.final .tl-opt:focus-within,.final .rcard input:focus-visible + span,.final .rating .stars .stern:focus-visible,
.trust :focus-visible,.trust .in:focus,.trust .tl-opt:focus-within,.trust .rcard input:focus-visible + span,.trust .rating .stars .stern:focus-visible,
.mnav :focus-visible,.mnav .in:focus,.mnav .tl-opt:focus-within,.mnav .rcard input:focus-visible + span,.mnav .rating .stars .stern:focus-visible,
.price :focus-visible,.price .in:focus,.price .tl-opt:focus-within,.price .rcard input:focus-visible + span,.price .rating .stars .stern:focus-visible{outline-color:#e4c97a!important;box-shadow:none!important}
.tl-result:focus-visible{outline:none!important;box-shadow:none!important}

/* ===== tools/tools.css (Bauagent B2) ===== */
/* egz.tips – Zusatzstile der Werkzeuge (G5d, B2). Wird an site/styles.css angehängt.
   Nur Klassen mit Präfix tl- (plus Zusammenspiel mit .card/.in/.row/.out/.btn/.tbl aus dem Muster).
   Farben aus den Mustervariablen; Ampel: grün #1b5e20, gelb #8a6d00, rot #a1272e (alle ≥ 4,5:1 auf Weiß).
   Zahlen immer Inter fett (nie Cormorant). */
:root{--tl-gruen:#1b5e20;--tl-gelb:#8a6d00;--tl-rot:#a1272e;--tl-rot-soft:#fbeeee;--tl-gelb-soft:#fbf5e0}

.tl-tool{max-width:860px;margin:0 auto;color:var(--ink)}
.tl-tool [hidden],.tl-kurz [hidden]{display:none!important}
.tl-num{font-family:var(--sans);font-weight:700;letter-spacing:-.01em}
.tl-hint{display:block;font-size:13px;color:#46535d;margin-top:6px;font-weight:400}
label .tl-hint{display:inline;margin:0 0 0 6px}
.tl-h{font-family:var(--serif);font-size:28px;margin:6px 0 10px;color:var(--petrol)}
.tl-help{font-size:15px;color:#3a4650;margin:0 0 14px}

/* Fortschritt */
.tl-progress-wrap{margin-bottom:22px}
.tl-progress-txt{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--ink);margin-bottom:8px;font-family:var(--sans)}
.tl-progress-txt .tl-hint{display:inline;margin:0}
.tl-progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.tl-progress-bar{height:100%;width:10%;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .35s ease}

/* Fragen */
.tl-step{border:0;margin:0;padding:0;min-width:0}
.tl-q{font-family:var(--sans);font-weight:700;font-size:21px;line-height:1.3;color:var(--petrol);margin-bottom:12px;padding:0}
.tl-q-sm{font-size:15px;color:var(--mute);font-weight:600;margin-bottom:8px}
.tl-opts{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:14px}
.tl-opts-multi{grid-template-columns:1fr 1fr}
.tl-opts-3{grid-template-columns:repeat(3,1fr)}
.tl-opt{position:relative;display:flex;align-items:center;gap:12px;margin:0;padding:14px 16px;background:#fff;border:1px solid #d5dde2;border-radius:8px;cursor:pointer;font-size:16px;font-weight:500;color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
.tl-opt:hover{border-color:var(--gold)}
.tl-opt input{flex:0 0 18px;width:18px;height:18px;margin:0;accent-color:var(--petrol)}
.tl-opt.is-on,.tl-opt:has(input:checked){border-color:var(--petrol);background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--petrol)}
.tl-opt:focus-within{outline:2px solid var(--gold);outline-offset:1px}
.tl-sub{margin:4px 0 14px;padding:14px 16px;border-left:3px solid var(--gold);background:var(--gold-soft);border-radius:0 6px 6px 0}
.tl-sub .in{max-width:280px}
.tl-date{max-width:280px}
.tl-check-line{display:block;position:relative;padding-left:28px;font-size:14px;font-weight:400;color:#3a4650;margin:14px 0 0}
.tl-check-line input{position:absolute;left:0;top:0;width:18px;height:18px;margin:2px 0 0;accent-color:var(--petrol)}
.tl-nav{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.tl-nav #tl-c-weiter{margin-left:auto}

/* Hinweise, Fristwächter */
.tl-alert{margin:12px 0;padding:12px 16px;border-left:3px solid var(--tl-rot);background:var(--tl-rot-soft);color:#5c1418;font-size:15px;border-radius:0 6px 6px 0}
.tl-alert b{color:var(--tl-rot)}
.tl-alert a{color:var(--tl-rot);font-weight:700}
.tl-frist{margin:0 0 18px;padding:12px 16px;border-left:3px solid var(--tl-gruen);background:#eef5ee;font-size:15px;border-radius:0 6px 6px 0;color:var(--ink)}
.tl-frist--gelb{border-color:var(--tl-gelb);background:var(--tl-gelb-soft)}
.tl-frist--rot{border-color:var(--tl-rot);background:var(--tl-rot-soft)}
.tl-box{margin-top:18px;padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--petrol);background:#fff;font-size:14px;color:#3a4650;border-radius:0 6px 6px 0}
.tl-box b{color:var(--petrol)}
.tl-warn{color:#5a4410}
.tl-ok{margin-top:14px;padding:12px 16px;border:1px dashed var(--gold-ink);background:var(--gold-soft);color:#5a4410;font-weight:600;font-size:15px;border-radius:6px}
.tl-ph{display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);border:1px solid var(--gold-ink);border-radius:3px;padding:1px 6px;margin-left:6px;font-weight:700}

/* Honeypot: für Menschen unsichtbar, für Bots ausfüllbar */
.tl-hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* Ampel */
.tl-amp{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:28px;padding:0 10px;border-radius:14px;color:#fff;font:700 13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;flex:0 0 auto}
.tl-amp--gruen{background:var(--tl-gruen)}
.tl-amp--gelb{background:var(--tl-gelb)}
.tl-amp--rot{background:var(--tl-rot)}
.tl-amp--gross{min-width:96px;height:40px;border-radius:20px;font-size:15px}
.tl-result:focus{outline:none}
.tl-result-head{display:flex;gap:18px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--gold)}
.tl-result-head .tl-h{margin-top:0}
.tl-result-head p{color:#3a4650;font-size:16px}
.tl-krit{list-style:none;margin:0;padding:0}
.tl-krit li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.tl-krit li b{display:block;font-family:var(--sans);font-size:16px;color:var(--petrol);margin-bottom:2px}
.tl-krit li p{font-size:15px;color:#3a4650}
.tl-krit li small{display:block;font-size:12px;color:#46535d;margin-top:4px}
.tl-lead{margin-top:28px;padding-top:24px;border-top:1px solid var(--gold)}
/* Ergebnisansicht knapp (Korrekturrunde B, 06.10.2026): Satz + Rahmen im Kopf, Fristwächter, Ermessen, Rückruf */
.tl-result-head p+p{margin-top:8px}
.tl-result-head p a{color:var(--petrol);font-weight:700}
.tl-result .tl-frist{margin:18px 0 0}
.tl-result>.linkline{margin-top:16px}
#tl-c-vorbelegt{font-size:15px}

/* Rechner 2.0 */
.tl-range-wrap{margin:4px 0 6px}
.tl-range-wrap label{color:var(--ink);font-size:15px}
.tl-range-wrap label b{font-size:18px;color:var(--petrol)}
.tl-range{width:100%;accent-color:var(--petrol);height:28px;cursor:pointer}
.tl-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:18px 0 0}
.tl-facts div{border-top:1px solid var(--line);padding-top:10px}
.tl-facts dt{font-size:13px;font-weight:600;color:var(--mute)}
.tl-facts dd{margin:2px 0 0;font-family:var(--sans);font-weight:700;font-size:18px;color:var(--petrol)}
.tl-facts dd small{display:block;font-weight:400;font-size:13px;color:#46535d}
.tl-kontakt .tl-facts dd{font-weight:500;font-size:16px;color:var(--ink)}
.tl-kontakt .tl-facts dd a.tl-big{font-weight:700;font-size:22px;color:var(--petrol);text-decoration:none}
.tl-verlauf{margin-top:22px}
.tl-cap{caption-side:top;text-align:left;font:700 15px/1.4 var(--sans);color:var(--petrol);padding-bottom:10px}
.tl-verlauf table.tbl td{padding:12px 14px}
.tl-verlauf .tl-sum td{border-top:2px solid var(--gold);font-weight:700}
.tl-einzeln{margin-top:12px}
.tl-einzeln summary{cursor:pointer;font-weight:600;color:var(--petrol);font-size:14px;padding:8px 0}
.tl-einzeln table.tbl td{padding:6px 14px;font-size:14px}
.tl-einzeln table.tbl td.v{font-size:15px}
.tl-actions{margin-top:22px}
.tl-print-only{display:none}

/* Mobil */
@media (max-width:900px){
  .tl-q{font-size:19px}
  .tl-opts-multi,.tl-opts-3,.tl-facts{grid-template-columns:1fr}
  .tl-result-head{flex-direction:column;gap:12px}
  .tl-krit li{flex-direction:column;gap:8px}
  .tl-nav{flex-wrap:wrap}
  .tl-verlauf table.tbl td{padding:10px 6px}
  .tl-h{font-size:24px}
}
@media (max-width:480px){
  .tl-nav .btn{width:auto;flex:1}
}
/* Monatsverlauf schmal: vier Spalten passen nicht (Beträge überlappen) → je Zeitraum ein Block,
   Zeitraum als Zeile oben, darunter Satz · Je Monat · Summe mit kleiner Beschriftung */
@media (max-width:600px){
  .tl-verlauf>table.tbl,.tl-verlauf>table.tbl tbody{display:block}
  .tl-verlauf>table.tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tl-verlauf>table.tbl caption{display:block;border-bottom:1px solid var(--gold)}
  .tl-verlauf>table.tbl tr{display:grid;grid-template-columns:4.2em 1fr auto;column-gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
  .tl-verlauf>table.tbl td{padding:0;border:0}
  .tl-verlauf>table.tbl td:first-child,.tl-verlauf>table.tbl td[colspan]{grid-column:1/-1;margin-bottom:6px;font-weight:600}
  .tl-verlauf>table.tbl td.v{font-size:19px;white-space:nowrap}
  .tl-verlauf>table.tbl td:last-child{text-align:right}
  .tl-verlauf>table.tbl td:nth-child(n+2)::before{display:block;font:700 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--petrol);margin-bottom:2px}
  .tl-verlauf>table.tbl td:nth-child(2)::before{content:"Satz"}
  .tl-verlauf>table.tbl td:nth-child(3)::before{content:"Je Monat"}
  .tl-verlauf>table.tbl td:nth-child(4)::before{content:"Summe"}
  .tl-verlauf>table.tbl tr.tl-sum{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--gold);border-bottom:0}
  .tl-verlauf>table.tbl tr.tl-sum td{border:0;margin:0}
  .tl-verlauf>table.tbl tr.tl-sum td:empty{display:none}
  .tl-verlauf>table.tbl tr.tl-sum td::before{content:none}
  .tl-einzeln table.tbl th,.tl-einzeln table.tbl td{padding-left:6px;padding-right:6px}
  .tl-einzeln table.tbl td.v{white-space:nowrap}
}

/* R1g Fehlermeldung am Feld, Variante A (Alex 07.10.2026 10:45): roter Text #a1272e 14 px fett direkt unter dem Feld,
   Feldrand 2 px rot (Innenabstand 1 px kleiner, damit nichts springt), Einverständnis-Kästchen rot umrandet.
   Gilt für die Formulare mit Pflichtfeldern (Rückruf, Rückruf im Online-Check). Die Sammelmeldung darunter bleibt nur
   für „Versand hat nicht geklappt“. */
.tl-tool .in[aria-invalid="true"]{border:2px solid var(--tl-rot);padding:11px 13px}
.tl-tool .tl-check-line.ist-fehler input{outline:2px solid var(--tl-rot);outline-offset:1px}
.feld-fehler{display:block;color:var(--tl-rot);font-size:14px;font-weight:600;line-height:1.4;margin-top:6px}

/* Druck: nur das Rechenergebnis (Knopf „Rechnung drucken") */
@media print{
  html.tl-print-rechner body *{visibility:hidden}
  html.tl-print-rechner .tl-print-area,html.tl-print-rechner .tl-print-area *{visibility:visible}
  html.tl-print-rechner .tl-print-area{position:absolute;left:0;top:0;width:100%;padding:0 8mm;background:#fff}
  html.tl-print-rechner .tl-print-only{display:block}
  html.tl-print-rechner .tl-print-title{font:700 20px/1.3 var(--sans);color:#000;margin-bottom:8px}
  html.tl-print-rechner .muster{display:none}
  .tl-print-area .out b,.tl-print-area .tl-facts dd,.tl-print-area td{color:#000!important}
  .tl-print-area .tl-einzeln{display:none}
  .tl-print-area [hidden]{display:none!important}
  .tl-print-area .out{grid-template-columns:repeat(3,1fr)}
  .tl-print-area .tl-facts{grid-template-columns:1fr 1fr}
}