/* Lokal eingebettete Schriften - kein Request an Google.
   Variable Schnitte: ein Gewichtsbereich je Datei. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/instrument-sans-400-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/instrument-sans-400-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url(../assets/fonts/playfair-display-400-900-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url(../assets/fonts/playfair-display-400-900-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(../assets/fonts/playfair-display-400-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(../assets/fonts/playfair-display-400-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --tanne:#1E3A2A;
  --tanne-deep:#14291D;
  --tanne-soft:#2A4A37;
  --cream:#F4EFE4;
  --paper:#FBF8F0;
  --sage:#E7EBDE;
  --ivory:#FCFAF3;
  --ink:#22271E;
  --ink-soft:#5A6154;
  --flag:#B5533C;
  --tp:#00B67A;
  --line:rgba(34,39,30,.14);
  --line-dark:rgba(244,239,228,.16);
  --radius:14px;
  --font-display:"Playfair Display",Georgia,serif;
  --font-body:"Instrument Sans",-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
#pruefung,#ablauf,#preis,#faq,#checkup,#stimmen,#top{scroll-margin-top:98px}
body{font-family:var(--font-body);color:var(--ink);background:var(--cream);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:14px}
.dark .eyebrow{color:rgba(244,239,228,.55)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.14;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(29px,3.8vw,42px);margin-bottom:18px;max-width:640px}
.lead{font-size:17.5px;color:var(--ink-soft);max-width:560px}
p,li,blockquote{text-wrap:pretty}
.dark .lead{color:rgba(244,239,228,.8)}
.section{padding:84px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:600;font-size:16px;padding:16px 32px;border-radius:999px;border:none;cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--tanne-soft);outline-offset:3px}
.btn-dark{background:var(--tanne);color:var(--cream);box-shadow:0 8px 24px rgba(30,58,42,.28)}
.btn-cream{background:var(--cream);color:var(--tanne);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.btn-sub{font-size:13px;color:var(--ink-soft);margin-top:16px;display:block;line-height:1.7}
.dark .btn-sub{color:rgba(244,239,228,.62)}

/* ===== Header ===== */
header{position:sticky;top:0;z-index:50;background:rgba(244,239,228,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{font-family:var(--font-display);font-weight:600;font-size:37px;text-decoration:none;letter-spacing:-.01em;line-height:1}
.nav-links{display:flex;align-items:center;gap:34px;list-style:none}
.nav-links a{text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{background:var(--tanne);color:var(--cream)!important;padding:11px 22px;border-radius:999px;font-weight:600}
.nav-phone{font-size:14.5px;font-weight:500}
/* Ausblenden der Navigation entfernt - siehe Burger-Menü weiter unten. */
@media(max-width:920px){.logo{font-size:32px}}

/* ===== Hero (Copy links, Formular rechts) ===== */
.hero{background:var(--tanne);color:var(--cream);position:relative;overflow:hidden}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:56px}
.hero h1{font-size:clamp(30px,3.4vw,41px);margin-bottom:16px;max-width:540px}
.hero h1 em{font-style:italic;color:#BCD2B8;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:.02em;right:.02em;bottom:.02em;height:.12em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 60 3, 150 2, 217 7' fill='none' stroke='%23BCD2B8' stroke-width='3' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") no-repeat center / 100% 100%;pointer-events:none}
.hero-sub{font-size:16.5px;color:rgba(244,239,228,.85);max-width:460px;margin-bottom:24px;line-height:1.6}
.hero-checks{list-style:none;display:grid;gap:10px}
.hero-checks li{display:flex;gap:11px;align-items:center;font-size:15px;color:rgba(244,239,228,.9)}
.hero-checks svg{flex:none}
.hero-proof{display:flex;flex-direction:column;align-items:flex-start;gap:11px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line-dark);font-size:13.5px;color:rgba(244,239,228,.7)}
.tp-badge{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:rgba(0,182,122,.12);border:1px solid rgba(0,182,122,.4);padding:10px 15px;border-radius:9px;color:var(--cream);font-size:13.5px;font-weight:500;white-space:nowrap;line-height:1;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.tp-badge:hover{transform:translateY(-2px);background:rgba(0,182,122,.22);border-color:rgba(0,182,122,.75)}
.tp-badge .tp-star{color:var(--tp);font-size:13px;letter-spacing:1.5px;margin-right:-1.5px;line-height:1}
@media(max-width:920px){.hero .wrap{grid-template-columns:1fr;gap:44px;padding-top:40px;padding-bottom:48px}}

/* Formular im Hero - kompakt */
.form-card{background:var(--ivory);color:var(--ink);border-radius:16px;padding:28px 28px 24px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.form-card h2{font-family:var(--font-display);font-size:21px;margin-bottom:4px;max-width:none}
.form-sub{font-size:13px;color:var(--ink-soft);margin-bottom:18px}
.field{margin-bottom:13px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.field input{width:100%;border:none;border-bottom:1.5px solid var(--line);background:transparent;padding:7px 2px;font-family:var(--font-body);font-size:15px;color:var(--ink)}
.field input:focus{outline:none;border-bottom-color:var(--tanne)}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--ink-soft);margin:18px 0 20px}
.consent input{margin-top:3px;accent-color:var(--tanne)}
.form-card .btn{width:100%;padding:14px 28px;font-size:15.5px}
.speed-promise{display:flex;gap:10px;align-items:flex-start;background:var(--sage);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--ink)}
.speed-promise .bolt{flex:none;font-size:14px;margin-top:1px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}

/* ===== Trust bar ===== */
.trustbar{background:var(--tanne-deep);color:var(--cream);padding:32px 0}
.trustbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.tb-num{font-family:var(--font-display);font-size:32px;font-weight:600;color:var(--cream);font-variant-numeric:tabular-nums}
.tb-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,239,228,.5);margin-top:6px}
@media(max-width:760px){.trustbar .wrap{grid-template-columns:repeat(2,1fr);gap:28px}}

/* ===== Pain + Rechner (Salbei-Fläche) ===== */
.pain{background:var(--sage);border-bottom:1px solid var(--line)}
.pain .wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.pain-list{list-style:none;display:grid;gap:18px;margin:28px 0 32px}
.pain-list li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;line-height:1.55}
.pain-list .x{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(181,83,60,.12);color:var(--flag);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;margin-top:2px}
.pain-note{font-size:15.5px;line-height:1.65;border-left:3px solid var(--tanne);padding-left:18px}
.pain-note .src{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:8px}
.calc{background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius);padding:28px 28px;box-shadow:0 20px 50px rgba(34,39,30,.07)}
.calc h3{font-size:20px;margin-bottom:14px;line-height:1.3}
.calc .row{margin-bottom:12px}
.calc label{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.calc label .num-wrap{display:flex;align-items:baseline;gap:4px;font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:0;text-transform:none}
.calc input.num{width:60px;text-align:right;border:none;border-bottom:1px dashed rgba(34,39,30,.4);background:transparent;font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--ink);padding:0 1px 1px}
.calc input.num:focus{outline:none;border-bottom:1px solid var(--tanne)}
.calc input.num::-webkit-outer-spin-button,.calc input.num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc input.num[type=number]{-moz-appearance:textfield;appearance:textfield}
.calc input[type=range]{width:100%;accent-color:var(--tanne)}
.calc-sublabel{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.del-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.del-cell{display:flex;align-items:baseline;gap:8px;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--paper);cursor:text}
.del-cell:focus-within{border-color:var(--tanne)}
.del-cell span{font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.del-cell input{border:none;background:transparent;width:100%;text-align:right;font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--ink);padding:0}
.del-cell input:focus{outline:none}
.del-cell input::-webkit-outer-spin-button,.del-cell input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.del-cell input[type=number]{-moz-appearance:textfield;appearance:textfield}
.g-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 14px}
.g-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.g-tag{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px;line-height:1.4}
.g-row{display:flex;align-items:baseline;gap:9px}
.g-score{font-family:var(--font-display);font-size:30px;font-weight:600;line-height:1}
.g-score.drop{color:var(--flag)}
.g-score.rise{color:var(--tanne)}
.g-stars{position:relative;display:inline-block;color:#DDDCD2;font-size:13px;letter-spacing:1px;line-height:1}
.g-stars .fill{position:absolute;left:0;top:0;white-space:nowrap;overflow:hidden;color:#e07b3f}
.g-count{font-size:12px;color:var(--ink-soft);margin-top:7px}
.calc-note{display:none;font-size:13.5px;line-height:1.55;background:var(--sage);border-radius:10px;padding:11px 14px;margin-bottom:14px}
.calc-note.show{display:block}
.calc-vs{font-size:14.5px;line-height:1.6}
.calc-disclaimer{font-size:11.5px;color:var(--ink-soft);margin-top:12px;line-height:1.55}
@media(max-width:920px){.pain .wrap{grid-template-columns:1fr;gap:48px}}
@media(max-width:420px){.g-card{padding:12px 12px}.g-score{font-size:25px}.g-stars{font-size:11px}.calc{padding:24px 20px}}

/* ===== mono.-Check (Quiz) ===== */
.check .wrap{max-width:820px}
.check-head{text-align:center;margin-bottom:44px}
.check-head h2{margin-left:auto;margin-right:auto}
.quiz{background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius);padding:38px 36px;box-shadow:0 20px 50px rgba(34,39,30,.07)}
.quiz-progress{display:flex;gap:6px;margin-bottom:28px}
.quiz-progress span{height:4px;flex:1;background:var(--line);border-radius:2px;transition:background .3s}
.quiz-progress span.on{background:var(--tanne)}
.quiz-q{font-family:var(--font-display);font-size:23px;font-weight:600;margin-bottom:8px;line-height:1.3}
.quiz-hint{font-size:14px;color:var(--ink-soft);margin-bottom:24px}
.quiz-opts{display:grid;gap:10px}
.quiz-opts button{text-align:left;font-family:var(--font-body);font-size:16px;padding:15px 18px;border:1.5px solid var(--line);border-radius:10px;background:var(--sage);cursor:pointer;transition:border-color .15s,background .15s}
.quiz-opts button:hover{border-color:var(--tanne);background:var(--cream)}
.quiz-opts button:focus-visible{outline:3px solid var(--tanne-soft);outline-offset:2px}
.quiz-result{text-align:center;display:none}
.quiz-result.show{display:block}
.quiz-result .verdict{font-family:var(--font-display);font-size:26px;font-weight:600;margin:14px 0 12px;color:var(--tanne)}
.quiz-result p{color:var(--ink-soft);max-width:520px;margin:0 auto 28px;font-size:16px}
.quiz-restart{background:none;border:none;font-family:var(--font-body);font-size:13px;color:var(--ink-soft);text-decoration:underline;cursor:pointer;margin-top:20px}
.quiz-note{text-align:center;font-size:12.5px;color:var(--ink-soft);margin-top:20px}

/* ===== Process (mit Bewertungs-Animation) ===== */
.process{background:var(--tanne);color:var(--cream)}
.process-head{display:grid;grid-template-columns:1fr .9fr;gap:64px;align-items:center;margin-bottom:52px}
.process-head h2{max-width:520px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:var(--tanne-soft);border:1px solid var(--line-dark);border-radius:12px;padding:26px 24px;position:relative}
.step-no{font-family:var(--font-display);font-size:42px;font-weight:600;line-height:1;color:rgba(244,239,228,.3);margin-bottom:14px}
.step h3{font-size:19px;margin-bottom:9px}
.step p{font-size:14px;color:rgba(244,239,228,.78);line-height:1.55}
.step .badge{position:absolute;top:24px;right:20px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(244,239,228,.12);color:rgba(244,239,228,.85);padding:4px 9px;border-radius:4px}
.effort-line{text-align:center;font-family:var(--font-display);font-size:19px;color:rgba(244,239,228,.9);margin-top:40px}
.process-cta{text-align:center;margin-top:26px}
@media(max-width:920px){.process-head{grid-template-columns:1fr;gap:44px}.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* Signature: Bewertungs-Stapel - eine nach der anderen abgearbeitet */
.demo{max-width:480px;width:100%;justify-self:end}
.demo-label{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,239,228,.5);margin-bottom:18px}
.rstack{position:relative;height:208px}
.rcard{position:absolute;inset:0;background:#fff;color:#1f1f1f;border-radius:12px;padding:22px 24px;box-shadow:0 26px 60px rgba(0,0,0,.32);font-family:var(--font-body);transition:transform .55s cubic-bezier(.22,.85,.3,1),opacity .45s ease;will-change:transform,opacity}
.rcard .inner{transition:opacity .35s ease .12s}
.rcard.pos0{z-index:3}
.rcard.pos1{transform:translate(8px,7px) rotate(1.6deg) scale(.985);z-index:2}
.rcard.pos2{transform:translate(-7px,13px) rotate(-2.4deg) scale(.97);z-index:1}
.rcard.pos1 .inner,.rcard.pos2 .inner{opacity:0}
.rcard.exit{transform:translate(38px,-46px) rotate(5deg);opacity:0}
.review-head{display:flex;align-items:center;gap:13px;margin-bottom:11px;transition:opacity .4s ease}
.avatar{width:42px;height:42px;border-radius:50%;background:#8a5a44;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.review-name{font-weight:600;font-size:15.5px;line-height:1.2}
.review-meta{font-size:12.5px;color:#777}
.review-stars{color:#e07b3f;font-size:15px;letter-spacing:1px;margin-bottom:7px;transition:opacity .4s ease}
.review-text{font-size:15px;color:#333;line-height:1.55;transition:color .4s ease}
.rcard.struck .review-text{text-decoration:line-through;text-decoration-color:var(--flag);color:#9aa09a}
.rcard.struck .review-head,.rcard.struck .review-stars{opacity:.55}
.flag,.done{position:absolute;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:7px 12px;border-radius:6px;opacity:0;z-index:4}
.flag{top:-14px;right:16px;background:var(--flag);color:#fff;transform:rotate(2deg) translateY(6px);transition:opacity .35s ease,transform .35s ease}
.rcard.flagged .flag{opacity:1;transform:rotate(2deg) translateY(0)}
.done{bottom:-14px;right:16px;background:var(--tanne-deep);color:var(--cream);border:1px solid var(--line-dark);transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;display:flex;gap:6px;align-items:center}
.rcard.done-on .done{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.rcard,.rcard .inner,.review-head,.review-stars,.review-text,.flag,.done{transition:none}}
@media(max-width:920px){.demo{justify-self:start}}

/* ===== Offer ===== */
.offer .wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.value-list{list-style:none;margin-top:10px}
.value-list li{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}
.value-list li span:last-child{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.value-list li strong{font-weight:600}
.price-card{background:var(--tanne);color:var(--cream);border-radius:18px;padding:42px 40px;box-shadow:0 30px 70px rgba(30,58,42,.35)}
.price{font-family:var(--font-display);font-size:64px;font-weight:600;line-height:1}
.price small{font-size:20px;font-weight:500;color:rgba(244,239,228,.7)}
.price-note{font-size:15px;color:rgba(244,239,228,.8);margin:14px 0 28px}
.guarantee{background:rgba(244,239,228,.07);border:1px solid rgba(244,239,228,.3);border-radius:12px;padding:19px 21px;margin-bottom:28px}
.guarantee strong{display:flex;gap:12px;align-items:center;font-size:15.5px;color:var(--cream);margin-bottom:8px}
.guarantee p{font-size:14px;color:rgba(244,239,228,.82);line-height:1.6}
.price-card .btn{width:100%}
@media(max-width:920px){.offer .wrap{grid-template-columns:1fr;gap:48px}}

/* ===== Trustpilot + Testimonials (Salbei-Fläche) ===== */
.stimmen{background:var(--sage);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tp-claim{max-width:680px;font-size:17px;color:var(--ink-soft);margin-bottom:10px;line-height:1.65}
.tp-claim strong{color:var(--ink)}
.tp-cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:40px 0 26px}
.tp-card{background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;text-decoration:none;display:flex;flex-direction:column;gap:8px;transition:transform .18s,box-shadow .18s}
.tp-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(34,39,30,.1)}
.tp-brand{font-family:var(--font-display);font-size:24px;font-weight:600}
.tp-rel{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.tp-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.tp-stars{color:var(--tp);font-size:19px;letter-spacing:2px}
.tp-score{font-family:var(--font-display);font-size:24px;font-weight:600}
.tp-count{font-size:13px;color:var(--ink-soft)}
.tp-cta{font-size:13px;font-weight:600;color:var(--tp);margin-top:12px}
@media(max-width:760px){.tp-cards{grid-template-columns:1fr}}
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.testi{background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;gap:14px;position:relative;transition:transform .18s,box-shadow .18s}
.testi:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(34,39,30,.1)}
.testi .t-link{position:absolute;inset:0;border-radius:inherit;z-index:1}
.testi .stars{color:var(--tanne);letter-spacing:2px;font-size:14px}
.testi blockquote{font-family:var(--font-display);font-style:italic;font-size:18px;line-height:1.55}
.testi figcaption{font-size:13px;color:var(--ink-soft);margin-top:auto;line-height:1.7}
.testi figcaption strong{display:block;color:var(--ink);font-weight:600}
@media(max-width:920px){.testis{grid-template-columns:1fr}}

/* ===== FAQ ===== */
.faq-list{max-width:820px;margin:48px auto 0}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 4px;font-family:var(--font-display);font-size:20px;font-weight:600}
summary::-webkit-details-marker{display:none}
summary .plus{font-family:var(--font-body);font-weight:500;font-size:22px;color:var(--tanne);transition:transform .2s;flex:none;line-height:1}
details[open] .plus{transform:rotate(45deg)}
details p{padding:0 4px 26px;color:var(--ink-soft);max-width:680px}

/* ===== Final CTA ===== */
.final{background:var(--tanne);color:var(--cream);text-align:center}
.final h2{font-size:clamp(29px,4vw,44px);max-width:780px;margin:0 auto 20px}
.final p{color:rgba(244,239,228,.82);max-width:620px;margin:0 auto 36px;font-size:17.5px;text-wrap:balance}

/* ===== Footer ===== */
footer{background:var(--tanne-deep);color:rgba(244,239,228,.6);padding:44px 0;font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer a{color:rgba(244,239,228,.75);text-decoration:none;margin-right:20px}
footer a:hover{color:var(--cream)}
.foot-logo{font-family:var(--font-display);font-size:22px;color:var(--cream)}

/* Sticky mobile CTA */
.sticky-cta{display:none}
@media(max-width:760px){
  .sticky-cta{display:block;position:fixed;bottom:0;left:0;right:0;z-index:60;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(251,248,240,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  footer{padding-bottom:calc(44px + 78px + env(safe-area-inset-bottom))}
  .sticky-cta .btn{width:100%;padding:15px}
  body{padding-bottom:76px}
}

/* WhatsApp float */
.wa{position:fixed;right:22px;bottom:22px;z-index:55;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .18s}
.wa:hover{transform:scale(1.06)}
@media(max-width:760px){.wa{bottom:92px}}


/* ==========================================================================
   Ergänzungen: mobiles Menü, Cookiebanner, Formularstatus, Rechtsseiten.
   Alles darunter arbeitet mit den --ui-* Variablen, damit derselbe Block
   für beide Marken funktioniert.
   ========================================================================== */

:root{
  --ui-panel:var(--ivory);
  --ui-soft:var(--sage);
  --ui-ink:var(--ink);
  --ui-ink-soft:var(--ink-soft);
  --ui-line:var(--line);
  --ui-accent:var(--tanne);
  --ui-accent-ink:var(--cream);
  --ui-ok:#1E7A52;
  --ui-flag:var(--flag);
  --ui-radius:14px;
  --ui-font-head:var(--font-display);
  --ui-font-body:var(--font-body);
}

/* --- Kein waagerechtes Scrollen ------------------------------------------
   Auf schmalen Geräten schob bisher ein zu breites Element die ganze Seite
   nach rechts - sichtbar als weißer Streifen neben dem Inhalt. */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}
img,svg,video,canvas{max-width:100%}

/* Die eigentliche Ursache: der Trustpilot-Nachweis stand per white-space:nowrap
   auf einer einzigen Zeile und war damit 358 px breit. Da er im selben Raster
   wie der Rest des Hero-Bereichs liegt, hat er die gesamte Spalte - und damit
   die Seite - über die Displaybreite hinausgezogen. Das war der weiße Streifen
   rechts neben dem Inhalt. */
@media(max-width:560px){
  /* Mittig, nicht oben: flex-start stammte aus der Zeit der Textsterne,
   als der Kasten auf schmalen Schirmen umbrach. Die gezeichneten Sterne
   haengen damit oben im Textband - genau der Versatz auf dem Handy. */
  .tp-badge{white-space:normal;line-height:1.45;align-items:center}
  .tp-badge .stars{flex:none}
}

/* Sehr schmale Geräte (iPhone SE, 320 px). Kinder eines Rasters haben von
   Haus aus min-width:auto - ein langes Wort oder ein Zahlenfeld zieht damit
   die ganze Spalte auf und schiebt die Seite über den Displayrand. */
@media(max-width:430px){
  .wrap>*,.wrap>*>*,.calc,.calc>*,.g-cards>*,.del-grid>*,.steps>*{min-width:0}
  h1,h2,h3,p,li,address,.q-text,.tb-label{overflow-wrap:break-word}
}

/* --- Sprunglink für Tastatur und Screenreader --------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;
  background:var(--ui-accent);color:var(--ui-accent-ink);font-weight:600;
  border-radius:0 0 var(--ui-radius) 0;text-decoration:none}
.skip-link:focus{left:0}

/* ==========================================================================
   Mobiles Menü
   ========================================================================== */

.nav-toggle{display:none;align-items:center;gap:9px;background:none;border:none;
  cursor:pointer;padding:9px 4px;font-family:var(--ui-font-body);font-size:14px;
  font-weight:600;color:var(--ui-ink);-webkit-tap-highlight-color:transparent}
.nav-toggle-bars{display:block;width:22px;height:15px;position:relative;flex:none}
.nav-toggle-bars span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:currentColor;transition:transform .22s ease,opacity .18s ease,top .22s ease}
.nav-toggle-bars span:nth-child(1){top:0}
.nav-toggle-bars span:nth-child(2){top:6.5px}
.nav-toggle-bars span:nth-child(3){top:13px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){top:6.5px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){top:6.5px;transform:rotate(-45deg)}
.nav-toggle:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px;border-radius:6px}

/* Die eingeklappte Schaltfläche im Panel taucht nur mobil auf. */
.nav-cta-inline{display:none}

@media(max-width:920px){
  /* Wortmarke links, Schaltfläche und Burger als Gruppe rechts - sonst
     steht die Schaltfläche zwischen beiden in der Luft. */
  .nav-toggle{display:inline-flex;order:3;margin-left:14px}
  .nav-cta{margin-left:auto}

  /* Aus der Navigationsleiste wird ein Panel unter dem Kopfbereich. */
  .nav-links{position:absolute;left:0;right:0;top:100%;display:block;
    background:var(--ui-panel);border-bottom:1px solid var(--ui-line);
    box-shadow:0 18px 40px rgba(0,0,0,.14);
    padding:8px 24px 20px;margin:0;list-style:none;
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .26s ease,opacity .2s ease,visibility 0s linear .26s}
  body.nav-open .nav-links{max-height:min(72vh,520px);opacity:1;visibility:visible;
    overflow-y:auto;transition:max-height .26s ease,opacity .2s ease,visibility 0s}

  .nav-links li{display:block}
  .nav-links a,.nav-links li>a{display:block;padding:13px 0;font-size:16.5px;
    border-bottom:1px solid var(--ui-line);color:var(--ui-ink)}
  .nav-links li:last-child a,.nav-links a:last-child{border-bottom:none}

  /* Telefonnummer und Schaltfläche kommen ans Ende des Panels. */
  .nav-links .tel,.nav-links .nav-phone{font-weight:600;color:var(--ui-accent)}
  .nav-cta-inline{display:block;margin-top:16px;text-align:center;border-bottom:none}
  .nav-links .nav-cta{display:block;margin-top:16px;text-align:center;border-bottom:none}

  header{position:sticky}
  .nav{position:relative}
}

/* Auf sehr schmalen Geräten drängelten sich Wortmarke und Schaltfläche.
   Die Dauer-Schaltfläche am unteren Rand übernimmt dort den Job. */
@media(max-width:600px){
  .nav-cta{display:none}
  .nav-toggle-text{display:none}
  .nav-toggle{padding:10px 2px}
}

/* ==========================================================================
   Cookiebanner
   ========================================================================== */

.cc{position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--ui-panel);color:var(--ui-ink);
  border-top:1px solid var(--ui-line);
  box-shadow:0 -18px 50px rgba(0,0,0,.18);
  padding:20px 0 calc(20px + env(safe-area-inset-bottom));
  font-size:14.5px;line-height:1.6;
  animation:cc-in .3s ease}
.cc[hidden]{display:none}
@keyframes cc-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.cc{animation:none}}

.cc-inner{max-width:1140px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cc-copy{flex:1 1 420px;min-width:0}
.cc-title{font-family:var(--ui-font-head);font-size:17px;font-weight:700;
  margin:0 0 6px;letter-spacing:-.01em;max-width:none}
.cc-text{margin:0;color:var(--ui-ink-soft);max-width:64ch}
.cc-text a{color:var(--ui-accent);text-decoration:underline}

.cc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;flex:0 0 auto}
.cc-btn{font-family:var(--ui-font-body);font-size:14.5px;font-weight:600;
  padding:12px 20px;border-radius:var(--ui-radius);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .15s ease}
.cc-btn:hover{transform:translateY(-1px)}
.cc-btn:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}

/* Zustimmen und Ablehnen sind bewusst gleich gestaltet. Wäre das Ablehnen
   unauffälliger, wäre die Einwilligung nach DSGVO nicht freiwillig. */
.cc-btn-primary{background:var(--ui-accent);color:var(--ui-accent-ink)}
.cc-btn-ghost{background:transparent;color:var(--ui-ink-soft);
  border-color:var(--ui-line);text-decoration:underline}

.cc-settings{max-width:1140px;margin:18px auto 0;padding:18px 24px 0;
  border-top:1px solid var(--ui-line)}
.cc-settings[hidden]{display:none}
.cc-list{list-style:none;display:grid;gap:14px;margin:0 0 18px;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cc-opt{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  background:var(--ui-soft);border:1px solid var(--ui-line);
  border-radius:var(--ui-radius);padding:13px 15px;font-size:13.5px;
  color:var(--ui-ink-soft);line-height:1.5}
.cc-opt b{color:var(--ui-ink)}
.cc-opt input{margin-top:3px;flex:none;accent-color:var(--ui-accent);width:17px;height:17px}
.cc-opt input:disabled{opacity:.55}
.cc-save{width:auto}

@media(max-width:760px){
  .cc{max-height:82vh;overflow-y:auto}
  .cc-inner{gap:16px}
  .cc-actions{width:100%}
  .cc-btn{flex:1 1 auto;text-align:center}
  .cc-btn-ghost{flex-basis:100%}
  /* Die Dauer-Schaltfläche am unteren Rand würde sonst darunter liegen. */
  body:has(.cc:not([hidden])) .sticky-cta{display:none}
}

/* ==========================================================================
   Kontaktformular
   ========================================================================== */

/* Honigtopf gegen Bots: für Menschen unsichtbar, für Skripte verlockend.
   display:none würde von manchen Bots erkannt - daher aus dem Bild geschoben. */
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important}

.form-status{margin:14px 0 0;font-size:14px;line-height:1.55;max-width:none}
.form-status:empty{display:none}
.form-status.is-ok{color:var(--ui-ok);font-weight:600}
.form-status.is-error{color:var(--ui-flag);font-weight:600}

/* ==========================================================================
   Rechtsseiten (AGB, Datenschutz, Impressum)
   ========================================================================== */

.page{padding:56px 0 88px;background:var(--ui-soft);min-height:60vh}
.page>.wrap{max-width:880px}
.page h1{font-family:var(--ui-font-head);font-size:clamp(30px,4.4vw,42px);
  margin-bottom:10px;color:var(--ui-ink)}
.page-sub{color:var(--ui-ink-soft);font-size:17px;margin-bottom:32px;max-width:60ch}

.legal-card{background:var(--ui-panel);border:1px solid var(--ui-line);
  border-radius:var(--ui-radius);padding:clamp(24px,4vw,46px);
  box-shadow:0 18px 44px rgba(0,0,0,.06)}

/* Die Startseite gibt jedem <section> großzügige Abstände. Innerhalb der
   Rechtstexte wären das seitenlange Lücken - hier also zurücksetzen. */
.legal-card section{padding:0;margin:0 0 30px}
.legal-card section:last-child{margin-bottom:0}
.legal-card h2{font-family:var(--ui-font-head);font-size:19.5px;font-weight:700;
  margin:0 0 10px;color:var(--ui-ink);max-width:none;letter-spacing:-.005em}
.legal-card h3{font-size:16.5px;margin:18px 0 8px;color:var(--ui-ink)}
.legal-card p,.legal-card li,.legal-card address{color:var(--ui-ink-soft);
  font-size:15.5px;line-height:1.7;max-width:72ch}
.legal-card p{margin-bottom:11px}
.legal-card p:last-child{margin-bottom:0}
.legal-card address{font-style:normal;background:var(--ui-soft);
  border-left:3px solid var(--ui-accent);border-radius:0 8px 8px 0;
  padding:13px 17px;margin:4px 0}
.legal-card ul,.legal-card ol{margin:4px 0 12px;padding-left:22px}
.legal-card li{margin-bottom:6px}
.legal-card a{color:var(--ui-accent);text-decoration:underline;
  overflow-wrap:anywhere}
.legal-card strong,.legal-card b{color:var(--ui-ink)}

/* Hinweiskasten für Stellen, die noch anwaltlich freigegeben werden. */
.legal-note{background:var(--ui-soft);border:1px dashed var(--ui-accent);
  border-radius:var(--ui-radius);padding:14px 17px;margin:16px 0;
  font-size:14.5px;color:var(--ui-ink-soft)}

.legal-updated{margin-top:26px;font-size:13.5px;color:var(--ui-ink-soft)}

/* --- Danke-Seite --------------------------------------------------------- */
.danke{text-align:center}
.danke .legal-card{max-width:640px;margin:0 auto;text-align:left}
.danke-icon{width:64px;height:64px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;margin:0 auto 22px;
  background:var(--ui-accent);color:var(--ui-accent-ink);font-size:31px}

/* ==========================================================================
   Fußbereich
   ========================================================================== */

.foot-nav{display:flex;align-items:center;gap:0 20px;flex-wrap:wrap}
.foot-cc{background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:inherit;color:rgba(255,255,255,.75);
  text-decoration:underline;text-underline-offset:2px}
.foot-cc:hover{color:#fff}
.foot-cc:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ==========================================================================
   WhatsApp-Knopf
   ========================================================================== */

/* Erscheint bewusst erst nach ein paar Sekunden: Wer gerade erst gelandet
   ist, soll den Einstieg lesen und nicht sofort angesprungen werden. */
.wa{position:fixed;right:20px;bottom:20px;z-index:55;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(20,90,45,.28),0 12px 30px rgba(0,0,0,.16);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.8);
  transition:opacity .5s ease,
             transform .5s cubic-bezier(.2,.9,.25,1),
             box-shadow .22s ease,
             visibility 0s linear .5s}
.wa.ist-da{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.wa:hover{transform:translateY(-3px) scale(1.05);
  box-shadow:0 5px 14px rgba(20,90,45,.34),0 18px 40px rgba(0,0,0,.22)}
.wa:active{transform:translateY(-1px) scale(1.01)}
.wa:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wa svg{width:29px;height:29px;fill:#fff;display:block}

/* Beschriftung, die erst beim Darüberfahren herauswächst - der Knopf bleibt
   dadurch ruhig, erklärt sich aber, sobald jemand hinsieht. */
.wa::before{content:"Schreiben Sie uns";position:absolute;
  right:calc(100% + 12px);top:50%;translate:0 -50%;
  white-space:nowrap;background:var(--ui-ink);color:#fff;
  padding:9px 13px;border-radius:9px;
  font-family:var(--ui-font-body);font-size:13.5px;font-weight:600;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
  opacity:0;translate:8px -50%;pointer-events:none;
  transition:opacity .2s ease,translate .2s ease}
.wa:hover::before,.wa:focus-visible::before{opacity:1;translate:0 -50%}

@media(max-width:760px){
  .wa{width:52px;height:52px;right:16px}
  .wa svg{width:27px;height:27px}
  .wa::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .wa{transition:opacity .2s ease,visibility 0s linear .2s;transform:none}
  .wa.ist-da{transform:none}
  .wa:hover{transform:none}
}

/* ==========================================================================
   Aufleuchten beim Klick auf eine Schaltfläche
   ========================================================================== */

/* Aufleuchten beim Klick.
   Zwei frühere Anläufe blieben unsichtbar: erst lag der Effekt per
   z-index:-1 hinter dem Knopf, dann haengte er an einem Farbverlauf mit
   var(--klick-x) - wurde diese Variable ungueltig (etwa "Infinity%"),
   fiel die gesamte background-Angabe aus und man sah nichts. Jetzt eine
   schlichte Flaeche, die aufblitzt und verschwindet. Da kann nichts mehr
   danebengehen. */
.btn,.cc-btn,.nav-cta{position:relative;overflow:hidden}
.btn::after,.cc-btn::after,.nav-cta::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;background:#fff;opacity:0}
.btn.leuchtet::after,.cc-btn.leuchtet::after,.nav-cta.leuchtet::after{
  animation:btn-leuchten .5s ease-out}
@keyframes btn-leuchten{
  0%{opacity:.5}
  35%{opacity:.32}
  100%{opacity:0}
}
/* Helle Schaltflaechen brauchen einen dunklen Blitz, sonst sieht man nichts. */
.btn-light::after,.btn-cream::after,.cc-btn-ghost::after{background:#000}
.btn-light.leuchtet::after,.btn-cream.leuchtet::after,.cc-btn-ghost.leuchtet::after{
  animation:btn-leuchten-dunkel .5s ease-out}
@keyframes btn-leuchten-dunkel{
  0%{opacity:.22}
  35%{opacity:.14}
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .btn.leuchtet::after,.cc-btn.leuchtet::after,.nav-cta.leuchtet::after{animation:none}
}

/* ==========================================================================
   Das Versprechen unter dem Formular
   ========================================================================== */

.speed-promise{align-items:flex-start;gap:11px;font-size:13px;line-height:1.55;
  padding:13px 15px;text-wrap:pretty}
.speed-promise>span{min-width:0}
.promise-icon{flex:none;width:17px;height:17px;margin-top:1px;
  stroke:var(--ui-accent);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
/* Auf schmalen Kästen sonst zerrissene Zeilen. Zwischen 920 und 1080px
   steht das Formular noch in der schmalen zweiten Spalte - dort bleiben
   innen nur rund 340px, und der Kasten lief auf drei Zeilen. Weniger
   Polsterung und Abstand geben die fehlende Breite zurück. */
@media(max-width:1080px){
  .speed-promise{font-size:12.5px;line-height:1.5;gap:8px;padding:12px 12px}
  .promise-icon{width:16px;height:16px}
}

/* ==========================================================================
   Nur für diese Marke
   ========================================================================== */
/* Der Titel im Hero war deutlich zurückhaltender als bei Reputationspartner.
   Playfair Display ist eine Serifenschrift und wirkt bei gleicher Größe
   optisch leichter - deshalb nicht nur größer, sondern auch eine Stufe
   kräftiger und mit engerem Zeilenabstand. */
/* 44px bei 560px Breite ist gemessen der beste Umbruch: jede Zeile
   bleibt eine Sinneinheit. Bei 47px/600px rutschte "Wir löschen sie"
   in die zweite Zeile und der Gedankenstrich begann die dritte. */
/* 3,6vw statt 4vw: bei 1024px Fensterbreite passte "Unfaire
   Google-Bewertung?" sonst nicht mehr in eine Zeile und der Titel wuchs
   auf vier Zeilen. Ab 1222px greift ohnehin die Obergrenze von 44px. */
.hero h1{font-size:clamp(31px,3.6vw,44px);font-weight:700;line-height:1.14;
  letter-spacing:-.014em;max-width:560px;margin-bottom:20px;color:#FFFDF7}
.hero h1 em{color:#CFE3C9}
.hero-sub{font-size:17.5px;max-width:500px;color:rgba(244,239,228,.88)}

/* Die Kursivstelle stand auf einer festen Zeile, damit der handgezeichnete
   Unterstrich passt. Bei der größeren Schrift wird das auf schmalen
   Displays zu breit - dort darf sie umbrechen. */
@media(max-width:430px){
  .hero h1{font-size:clamp(29px,8vw,34px)}
}

/* Der Gedankenstrich hing am Ende der zweiten Zeile und ließ den Titel
   abgebrochen wirken. Ab hier bestimmen zwei feste Umbrüche die drei
   Sinneinheiten, und der Strich eröffnet die Schlusszeile. Das nbsp
   hinter dem Strich hält ihn am "oder", falls die Umbrüche entfallen. */
.hero h1 br.h1-br{display:inline}
/* Unter 700px reicht die Breite für die fest gesetzten Zeilen nicht mehr -
   dort bricht der Browser wieder selbst um, sonst entstehen Lücken. */
@media(max-width:700px){
  .hero h1 br.h1-br{display:none}
}

/* ---- Schlussabschnitt: war fast bildschirmfüllend ----
   Gemessen 620px hoch bei 84px Polsterung und einem 44px-Titel - für eine
   Wiederholung des Hero-Versprechens zu viel Gewicht am Seitenende. */
.section.final{padding:60px 0}
/* Die Breiten sind auf den Text abgestimmt: 760px halten den ersten Satz
   auf einer Zeile (der feste Umbruch im Text setzt die zweite), 620px
   halten den Absatz auf zwei. Enger gefasst zerfiel beides in drei. */
.final h2{font-size:clamp(26px,2.6vw,33px);max-width:760px;margin-bottom:14px}
.final p{font-size:16px;max-width:620px;margin-bottom:26px}

/* ---- Preiskarte auf dem Handy ----
   Die Karte behielt ihre 40px-Polsterung vom Desktop. Innen blieben bei
   390px Displaybreite nur 262px, der Knopftext braucht 272px - deshalb
   brach "Kostenlose Prüfung anfordern" mitten im Satz um und der Knopf
   wurde doppelt so hoch wie der feste Balken am unteren Rand. */
@media(max-width:560px){
  .price-card{padding:30px 22px}
  .price-card .btn{padding:14px 18px;font-size:15px}
  .price-card .btn-sub{font-size:12.5px;text-wrap:balance}
  /* "89 € / gelöschte Bewertung" stand in einer Zeile: die 64px-Ziffern
     schoben "Bewertung" allein in die nächste Zeile, mit einer Lücke
     darüber. Als eigener Block darunter bleibt die Angabe zusammen. */
  .price{font-size:54px}
  .price small{display:block;font-size:17px;margin-top:6px;line-height:1.3}
}
/* iPhone SE und ältere Android-Geräte: 320px Displaybreite lässt innen
   nur 228px, der Knopftext braucht 205px plus Polsterung. */
@media(max-width:360px){
  .price-card{padding:26px 16px}
  .price-card .btn{padding:13px 12px;font-size:14px}
}

/* ---- Das Versprechen: Fußnote statt zweiter Kasten ----
   Gefüllter Kasten mit Rahmen direkt unter dem Knopf las sich wie ein
   zweites Element, das um Aufmerksamkeit konkurriert. Ohne Fläche und
   Rahmen, nur mit einer Haarlinie abgesetzt, gehört es sichtbar zum
   Knopf darüber. */
.speed-promise{background:none;border:0;border-top:1px solid var(--ui-line);
  border-radius:0;padding:13px 2px 0;margin-top:15px;
  color:var(--ui-ink-soft);font-size:12.5px}
.speed-promise strong{color:var(--ui-ink)}
.promise-icon{stroke:var(--ui-ink-soft);opacity:.85}
@media(max-width:1080px){
  .speed-promise{padding:12px 2px 0;gap:8px}
}

/* ---- Formularkarte leuchtet nach dem Sprung kurz auf ----
   Ein Klick auf einen CTA schickt einen an den Seitenanfang; ohne
   Rückmeldung sucht man dort erst, wohin man geschickt wurde. Der Ring
   in Salbei liegt außerhalb der Karte und verschiebt nichts. */
@keyframes formglow{
  0%{box-shadow:0 0 0 0 rgba(188,210,184,0),   0 30px 80px rgba(0,0,0,.35)}
  22%{box-shadow:0 0 0 4px rgba(188,210,184,.55),0 30px 80px rgba(0,0,0,.35)}
  100%{box-shadow:0 0 0 4px rgba(188,210,184,0), 0 30px 80px rgba(0,0,0,.35)}
}
.form-card.flash{animation:formglow 2.2s ease}
@media(prefers-reduced-motion:reduce){.form-card.flash{animation:none}}

/* ==========================================================================
   Profilsuche im Rechner
   ========================================================================== */

.ps{margin:0 0 22px;padding:0 0 20px;border-bottom:1px solid var(--line)}
.ps-label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px}
.ps-feld-wrap{position:relative;display:flex;align-items:center}
.ps-lupe{position:absolute;left:13px;width:17px;height:17px;stroke:var(--ink-soft);
  fill:none;stroke-width:1.9;stroke-linecap:round;opacity:.7;pointer-events:none}
#ps-feld{width:100%;padding:13px 40px 13px 40px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--ivory);font-family:var(--font-body);
  font-size:15.5px;color:var(--ink)}
#ps-feld:focus{outline:none;border-color:var(--tanne)}
.ps-laedt{position:absolute;right:14px;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--tanne);
  animation:ps-dreht .7s linear infinite}
@keyframes ps-dreht{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ps-laedt{animation:none;opacity:.5}}

.ps-liste{list-style:none;margin:7px 0 0;padding:5px;background:var(--ivory);
  border:1px solid var(--line);border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,.13);max-height:290px;overflow-y:auto}
.ps-liste li{padding:11px 13px;border-radius:7px;cursor:pointer;line-height:1.4}
.ps-liste li:hover,.ps-liste li.an{background:var(--sage)}
.ps-liste b{display:block;font-size:15px;color:var(--ink)}
.ps-liste span{display:block;font-size:13px;color:var(--ink-soft);margin-top:2px}

.ps-hinweis{font-size:13px;color:var(--ink-soft);margin-top:9px;line-height:1.5}
.ps-hinweis.warnt{color:#8a5a24}

/* Die echte Verteilung aus dem Google-Profil. Steht ueber den drei
   Feldern, weil sie erklaert, warum dort jetzt feste Zahlen stehen. */
.calc-verteilung{font-size:13px;color:var(--ink-soft);margin:-2px 0 9px;
  line-height:1.5}

/* Gezeichnete Sterne statt des Zeichens ★ im Trustpilot-Kasten.
   Der viewBox-Ausschnitt liegt exakt auf der Tinte, also deckt sich der
   Rahmen mit der Form - align-items:center stellt damit wirklich mittig,
   ohne Korrekturwert. Die alte Regel setzte font-size und wirkt auf ein
   SVG nicht mehr; sie wird hier vollstaendig ueberschrieben.
   11px sind rund die Versalhoehe von "Trustpilot" mal 1,13 - genau
   buendig wirkt zu klein, weil Sterne optisch schrumpfen. */
.tp-badge .tp-star{height:10px;width:auto;flex:0 0 auto;display:block;
  color:var(--tp);letter-spacing:normal;margin-right:0}

/* Der Rueckweg zu den Reglern - bewusst leise, damit er die Suche nicht
   als gleichwertigen zweiten Weg darstellt. Er sitzt im Hinweis unter dem
   Suchfeld: darunter stand er direkt ueber "Bewertungen loeschen" und las
   sich wie dessen Beschriftung. */
.calc-regler-auf{display:inline;margin:0;padding:0;background:none;
  border:none;cursor:pointer;font-family:inherit;font-size:inherit;
  line-height:inherit;color:var(--ink-soft);text-decoration:underline;
  text-underline-offset:3px}
.calc-regler-auf:hover{color:var(--tanne)}

/* Jede eigene display-Angabe schlaegt sonst das hidden-Attribut aus dem
   Browser-Standard - .ps-gewaehlt stand deshalb sichtbar da, obwohl noch
   kein Profil gewaehlt war. Gilt fuer die ganze Seite, nicht nur hier. */
[hidden]{display:none !important}

.ps-gewaehlt{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--sage);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px}
.ps-gewaehlt b{display:block;font-size:15px;color:var(--ink)}
.ps-gewaehlt span{display:block;font-size:13px;color:var(--ink-soft);margin-top:2px}
#ps-aendern{flex:none;background:none;border:none;cursor:pointer;
  font-family:var(--font-body);font-size:13.5px;color:var(--ink-soft);
  text-decoration:underline;padding:4px}
#ps-aendern:hover{color:var(--tanne)}

/* Kontaktfelder erscheinen erst nach der Auswahl - vorher wären sie
   nur eine weitere Hürde vor dem Ergebnis. */
.ps-absenden{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.ps-absenden-titel{font-family:var(--font-display);font-size:19px;
  font-weight:600;color:var(--ink);margin-bottom:4px}
.ps-absenden-sub{font-size:14px;color:var(--ink-soft);margin-bottom:14px}
.ps-felder{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-bottom:12px}
.ps-felder input{padding:12px 14px;border:1.5px solid var(--line);border-radius:9px;
  background:var(--ivory);font-family:var(--font-body);font-size:15px;color:var(--ink)}
.ps-felder input:focus{outline:none;border-color:var(--tanne)}
.ps-absenden .btn{width:100%}
.ps-status{font-size:13.5px;margin-top:10px;min-height:1.2em}
.ps-status.gut{color:var(--ui-ok)}
.ps-status.schlecht{color:var(--flag)}
@media(max-width:520px){.ps-felder{grid-template-columns:1fr}}

/* ---- Zeilenumbrüche ----
   Der Browser füllt jede Zeile bis zum Anschlag und lässt die letzte als
   kurzen Rest übrig. balance verteilt gleichmäßig auf alle Zeilen. */
.hero-sub,.hero-checks li,.pain-list li div,.form-card h2,.form-sub,
.speed-promise,.tb-label,.eyebrow,.offer-list li,.btn-sub,
.quiz-result p,.quiz-note,.verdict{text-wrap:balance}

/* Klammerausdruecke und Angaben, die als Einheit lesbar bleiben muessen. */
.nowrap{white-space:nowrap}

/* Der Schlussabsatz stand zentriert im Flattersatz - auf dem Handy ergab
   das fuenf verschieden lange Zeilen. Linksbuendig mit fester Breite
   liest sich das ruhiger; die Ueberschrift bleibt mittig. */
@media(max-width:640px){
  .final p{text-align:left;text-wrap:pretty;margin-left:auto;margin-right:auto}
  .final .btn-sub{text-align:center}
}

/* ---- Löschchance im Schnell-Check ----
   Vorher stand dort nur ein Satz. Eine Zahl, die von 0 hochzählt, ist
   greifbarer - und Reputationspartner zeigt sie ohnehin schon. */
/* Die Ergebniskarte ist mittig gesetzt - der Zahlenblock muss das auch
   sein, sonst hängt er als Fremdkörper links. (Bei Reputationspartner ist
   die Karte linksbündig, dort steht er nebeneinander.) */
.qr-score{display:flex;flex-direction:column;align-items:center;
  gap:10px;margin:8px 0 16px}
.qr-label{font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.qr-pct{font-family:var(--font-display);font-size:clamp(44px,6vw,58px);
  font-weight:600;line-height:1;color:var(--tanne);
  font-variant-numeric:lining-nums;letter-spacing:-.01em}
.qr-tag{display:inline-block;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;
  border-radius:8px;white-space:nowrap;
  background:rgba(30,58,42,.07);border:1px solid var(--line);
  color:var(--ink-soft)}
.qr-tag.ist-gut{background:rgba(30,122,82,.10);
  border-color:rgba(30,122,82,.34);color:var(--ui-ok)}
/* ==========================================================================
   Schriftwechsel unsichtbar machen
   ==========================================================================
   Vorher stand die Schrift auf font-display:optional. Das verhindert zwar
   das Flackern WAEHREND des Ladens - aber wenn die Datei nicht in ~100ms
   da ist, rendert der Browser die GANZE Seite in der Ersatzschrift und
   tauscht nie mehr. Genau das war der Sprung beim harten Neuladen.

   Loesung: zurueck auf swap, aber die Ersatzschrift auf dieselben Masse
   bringen. Gemessen am 09.08.2026: Playfair ist 101,0 % so breit wie
   Georgia, Instrument Sans 103,4 % von Arial. Mit size-adjust deckt sich
   der Platzbedarf, der Wechsel faellt praktisch nicht mehr auf. */
@font-face{font-family:"Playfair Ersatz";
  src:local("Georgia"),local("Times New Roman"),local("serif");
  size-adjust:101%;ascent-override:92%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Instrument Ersatz";
  src:local("Arial"),local("Helvetica"),local("sans-serif");
  size-adjust:103.4%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
:root{
  --font-display:"Playfair Display","Playfair Ersatz",Georgia,serif;
  --font-body:"Instrument Sans","Instrument Ersatz",Arial,sans-serif;
}


/* ==========================================================================
   Feinschliff nach Prüfung auf dem Handy
   ========================================================================== */

/* Zwischenüberschriften waren auf schmalen Displays auf 29 px festgenagelt.
   Gemessen: der Schlusstitel brauchte dadurch fünf Zeilen, bei 24 px sind es
   drei. Die Regel greift nur unterhalb von 520 px. */
@media(max-width:520px){
  /* .final h2 hat eine eigene Regel mit hoeherer Spezifitaet und muss
     ausdruecklich mit genannt werden, sonst bleibt der Schlusstitel gross. */
  h2,.final h2{font-size:24px}
}

/* Die Antwortknöpfe im Schnell-Check hatten gar keine eigene Textfarbe und
   erbten die Browser-Vorgabe: in Chrome schwarz, in Safari blau. */
.quiz-opts button{color:var(--ui-ink)}


/* ==========================================================================
   Fußbereich: Luft statt Gedränge
   ========================================================================== */

/* Vorher standen Wortmarke, Kontakt und Links in einer einzigen Reihe mit
   space-between. Die Marke stand dadurch verloren ganz links, der Rest
   drängte sich rechts. Jetzt zwei klar getrennte Ebenen. */
footer{padding-top:52px;padding-bottom:44px}
footer .wrap{display:block}

.foot-top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:32px 56px;flex-wrap:wrap;padding-bottom:28px}
.foot-right{display:flex;gap:12px 56px;flex-wrap:wrap;align-items:flex-start;
  justify-content:flex-end;flex:1 1 auto}

.foot-contact{display:flex;flex-direction:column;gap:7px}
.foot-contact a{margin-right:0}

.foot-nav{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.foot-nav a{margin-right:0}

/* Vorher stand alles in einer einzigen, sehr langen Zeile quer ueber die
   volle Breite. Zwei kurze Zeilen mit begrenzter Laufweite lesen sich
   ruhiger und wirken nicht wie ein Kleingedrucktes-Band. */
.foot-legal{width:100%;margin:0;padding-top:24px;
  border-top:1px solid var(--ui-line-fuss,rgba(255,255,255,.14));
  font-size:12.5px;line-height:1.75;max-width:none;
  display:flex;flex-direction:column;gap:3px}
.foot-legal span{max-width:70ch}

@media(max-width:760px){
  footer{padding-top:40px}
  .foot-top{flex-direction:column;gap:26px}
  .foot-right{justify-content:flex-start;gap:22px 48px}
  .foot-legal{padding-top:20px}
}


/* ==========================================================================
   Sanftes Einblenden beim Reinscrollen
   ========================================================================== */

/* Die Klasse "einblenden" setzt erst JavaScript - ohne JavaScript ist
   deshalb nichts versteckt. "ist-sichtbar" kommt, sobald der Block in den
   Blick kommt. Beides greift nur, wenn keine reduzierte Bewegung
   eingestellt ist. */
@media(prefers-reduced-motion:no-preference){
  .einblenden{opacity:0;transform:translateY(12px);
    transition:opacity .4s ease,transform .4s ease;
    will-change:opacity,transform}
  .einblenden.ist-sichtbar{opacity:1;transform:none;will-change:auto}
}


/* ==========================================================================
   Trustpilot-Nachweis
   ==========================================================================
   Vorher endete die Zeile auf "auf Trustpilot" - und genau dort brach sie
   um, sodass "auf" und "Trustpilot" untereinander standen. Statt es mit
   nowrap zu erzwingen (dann wird der Kasten zu breit), steht am Ende jetzt
   die Marke als eigene Einheit: Stern plus Wort, die nie auseinanderfallen.
   Umbrochen wird davor, wo es nicht stört. */
/* Die Marke steht VOR den Sternen und ohne eigenes Sternsymbol. Mit einem
   sechsten Stern daneben las sich die Zeile wie eine Sechs-Sterne-Wertung. */
.tp-marke{white-space:nowrap;font-weight:700;letter-spacing:-.01em}
.tp-wert{white-space:nowrap}

/* Der Kasten im Kopfbereich darf umbrechen - aber nur zwischen Wert und
   Marke, nicht mitten in einer Angabe. */
.tp-badge{flex-wrap:wrap;row-gap:4px;column-gap:9px;white-space:normal;
  line-height:1.35}

/* Die Zusammenfassung über den Stimmen: Wert oben, Anzahl und Marke
   darunter - statt eines hängenden Mittelpunkts am Zeilenende. */
.tp-zeile{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:flex-start;gap:2px 9px;margin-top:2px;text-align:left}

/* Zusammenfassung über den Stimmen: Marke als kleine Zeile darüber, dann
   Wert und Anzahl NEBENEINANDER - drei Zeilen machten die Karte zu hoch.
   Kein zusätzliches Sternsymbol an der Marke: zusammen mit den fünf
   Sternen daneben las es sich wie eine Sechs-Sterne-Wertung. */
.tp-sum .t{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.tp-sum .tp-marke{font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ui-ink-soft)}
.tp-sum .tp-zeile{display:flex;align-items:baseline;gap:9px;margin:0;flex-wrap:wrap}
.tp-sum .tp-zahl{font-size:24px;font-weight:800;letter-spacing:-.02em;
  color:var(--ui-ink);line-height:1.1}
.tp-sum .tp-anz{font-size:14px;color:var(--ui-ink-soft)}


/* ==========================================================================
   Branchenseiten
   ==========================================================================
   Eigene Adressen für einzelne Kundengruppen. Bewusst schlicht gehalten:
   Diese Seiten sollen eine Frage beantworten und zum Formular auf der
   Startseite führen, nicht die Startseite ersetzen. */

.branche .wrap{max-width:820px}
.brotkrumen{font-size:13px;color:var(--ui-ink-soft);margin-bottom:22px}
.brotkrumen a{color:var(--ui-ink-soft)}
.brotkrumen span{margin:0 4px}

.branche h1{margin:8px 0 16px;text-wrap:balance}
.br-lede{font-size:18px;line-height:1.65;color:var(--ui-ink-soft);
  margin-bottom:30px;text-wrap:pretty}
.branche h2{margin:44px 0 16px;text-wrap:balance}

/* Kennzahlen als ruhige Reihe, nicht als zweite Kennzahlenleiste. */
.br-zahlen{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  margin:0 0 28px;padding:20px 0;border-top:1px solid var(--ui-line);
  border-bottom:1px solid var(--ui-line)}
.br-zahlen b{display:block;font-family:var(--ui-font-head);font-size:26px;
  line-height:1.1;color:var(--ui-ink)}
.br-zahlen span{display:block;font-size:13px;color:var(--ui-ink-soft);margin-top:4px}

.br-cta{display:inline-block}
.br-cta-sub{font-size:13.5px;color:var(--ui-ink-soft);margin-top:10px}

.br-faelle{list-style:none;display:grid;gap:16px;margin:0;padding:0}
.br-faelle li{background:var(--ui-soft);border:1px solid var(--ui-line);
  border-radius:var(--ui-radius);padding:18px 20px}
.br-faelle strong{display:block;margin-bottom:5px;color:var(--ui-ink)}
.br-faelle span{color:var(--ui-ink-soft);font-size:15px;line-height:1.6}

.br-hinweis{margin-top:22px;padding-left:18px;border-left:3px solid var(--ui-accent);
  color:var(--ui-ink-soft);font-size:15.5px;line-height:1.65;text-wrap:pretty}

.br-ablauf{margin:0;padding-left:22px;display:grid;gap:12px;
  color:var(--ui-ink-soft);line-height:1.6}
.br-ablauf strong{color:var(--ui-ink)}

/* Aufklappbare Fragen: ohne JavaScript, das kann der Browser selbst. */
.br-faq{border-bottom:1px solid var(--ui-line);padding:2px 0}
.br-faq summary{cursor:pointer;padding:15px 0;font-weight:600;
  color:var(--ui-ink);list-style:none;display:flex;justify-content:space-between;
  gap:16px;align-items:flex-start}
.br-faq summary::-webkit-details-marker{display:none}
.br-faq summary::after{content:"+";flex:none;font-size:20px;line-height:1;
  color:var(--ui-ink-soft);transition:transform .18s ease}
.br-faq[open] summary::after{transform:rotate(45deg)}
.br-faq p{padding:0 0 16px;color:var(--ui-ink-soft);line-height:1.65;max-width:64ch}

.br-schluss{margin:48px 0 8px;padding:30px 28px;background:var(--ui-soft);
  border:1px solid var(--ui-line);border-radius:var(--ui-radius)}
.br-schluss h2{margin:0 0 10px}
.br-schluss p{color:var(--ui-ink-soft);margin-bottom:20px;text-wrap:pretty}
.br-zurueck{margin-top:26px;font-size:14px}

/* Verweisleiste auf der Startseite */
.branchen-links{border-top:1px solid var(--ui-line);padding-top:26px;margin-top:8px}
.branchen-links h3{font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ui-ink-soft);margin-bottom:14px}
.branchen-links ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  margin:0;padding:0}
.branchen-links a{display:inline-block;padding:9px 15px;border-radius:99px;
  border:1px solid var(--ui-line);background:var(--ui-panel);
  font-size:14px;color:var(--ui-ink);text-decoration:none;
  transition:border-color .16s ease,transform .16s ease}
.branchen-links a:hover{border-color:var(--ui-accent);transform:translateY(-1px)}


/* Kennzahl, die zu Trustpilot führt. Der Pfeil zeigt an, dass die Seite
   gewechselt wird - ein Link ohne jeden Hinweis wird sonst übersehen. */
.stat-link{display:block;text-decoration:none;color:inherit;border-radius:10px;
  padding:6px 4px;margin:-6px -4px;transition:background .16s ease}
.stat-link:hover{background:rgba(62,143,212,.08)}
.stat-link:hover .l{color:var(--ui-accent)}
.stat-link:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.stat-pfeil{font-size:.85em;opacity:.6;margin-left:2px}
/* Nur für Vorleseprogramme, optisch nicht vorhanden. */
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* Senkrechter Trennstrich zwischen Marke und Wertung (mono.). Er ersetzt
   den zweiten Stern, der neben den fünf Sternen wie ein sechster wirkte. */
.tp-trenner{width:1px;align-self:stretch;min-height:18px;
  background:currentColor;opacity:.28}