/* =================================================================
   /b2b/assets/css/lp.css
   Seitenweites Stylesheet für den Bereich /b2b/ auf local-pro.network
   Farbwelt abgeleitet aus dem LOCAL PRO Siegel:
   Marineblau als Träger, Gold als einziger Akzent, warmes Weiß als Fläche.
   Grün kommt hier bewusst nicht mehr vor.
   ================================================================= */

:root{
  /* Marine */
  --navy-900:#0A1830;   /* Kopfleiste, dunkelste Fläche */
  --navy-800:#10275D;   /* Träger, Überschriften */
  --navy-600:#1B3B7A;   /* Verlauf, Zweitfläche */
  --navy-400:#3E5C99;   /* Linien auf dunklem Grund */

  /* Gold, ausschließlich Akzent und Handlungsknopf */
  --gold:#C8A03C;
  --gold-dark:#A88129;
  --gold-tint:#FBF6E9;

  /* Flächen */
  --paper:#FFFFFF;
  --cream:#FAF8F4;
  --mist:#F3F5F9;
  --line:#DCE3EF;

  /* Schrift */
  --ink:#101A2B;
  --body:#3A4761;
  --muted:#6C7891;

  --max:1140px;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,39,93,.06), 0 8px 24px rgba(16,39,93,.07);
  --shadow-lg:0 20px 50px rgba(10,24,48,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--paper);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-800);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{
  font-family:'Spectral',Georgia,serif;
  color:var(--ink);
  line-height:1.18;
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,4.4vw,3.35rem)}
h2{font-size:clamp(1.6rem,3vw,2.35rem)}
h3{font-size:1.22rem;line-height:1.3}
p{margin:0 0 1.1em}

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.container.narrow{max-width:760px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--gold);color:var(--navy-900);padding:10px 16px;border-radius:8px;z-index:100}

/* ---------- Kopfleiste ---------------------------------------- */
.topbar{
  background:var(--navy-900);
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  max-width:var(--max);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:20px;min-height:70px;
}
.brand{display:flex;align-items:center;flex:0 0 auto}
/* Wortmarke liegt im Verhältnis 3:1 vor, Höhe steuert die Breite */
.brand img{height:30px;width:auto}
.mainnav{margin-left:auto;display:flex;align-items:center;gap:24px}
/* :not(.btn) ist wichtig: .mainnav > a ist spezifischer als .btn und
   würde sonst dessen seitlichen Innenabstand überschreiben. */
.mainnav > a:not(.btn){
  color:rgba(255,255,255,.82);
  font-size:.94rem;font-weight:500;text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;
  white-space:nowrap;
}
.mainnav > a:not(.btn):hover{color:#fff;text-decoration:none}
.mainnav > a:not(.btn).is-active{color:#fff;border-bottom-color:var(--gold)}
.navtoggle,.navburger{display:none}

@media (max-width:1040px){
  .mainnav{gap:18px}
  .mainnav > a:not(.btn){font-size:.9rem}
}
@media (max-width:940px){
  .navburger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:40px;height:40px;cursor:pointer;
  }
  .navburger span{display:block;height:2px;background:#fff;border-radius:2px}
  .mainnav{
    display:none;order:3;width:100%;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px 0 18px;
  }
  .navtoggle:checked ~ .mainnav{display:flex}
  .topbar-inner{flex-wrap:wrap}
  .mainnav > a:not(.btn){width:100%;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .mainnav > a:not(.btn).is-active{border-bottom-color:rgba(255,255,255,.08)}
  /* Nicht auf volle Breite ziehen, sonst schließt der Knopf bündig
     mit der Fläche ab und wirkt wie ein Balken. */
  .mainnav .btn{margin:16px 0 4px;width:auto;align-self:flex-start}
}

/* ---------- Knöpfe -------------------------------------------- */
/* line-height und white-space sind hier entscheidend: ohne sie erbt
   der Knopf die Zeilenhöhe 1.65 des Fließtexts und der Text sitzt
   nicht mehr sauber in der Fläche. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:0 26px;min-height:50px;
  border:1px solid transparent;border-radius:10px;
  font-family:'Figtree',system-ui,sans-serif;
  font-size:1rem;font-weight:700;line-height:1.15;
  white-space:nowrap;text-align:center;cursor:pointer;
  text-decoration:none;-webkit-appearance:none;appearance:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn-sm{padding:0 18px;min-height:40px;font-size:.92rem}
.btn-block{display:flex;width:100%}
.btn-gold{background:var(--gold);color:var(--navy-900);box-shadow:0 6px 16px rgba(200,160,60,.28)}
.btn-gold:hover{background:var(--gold-dark);color:#fff}
.btn-navy{background:var(--navy-800);color:#fff}
.btn-navy:hover{background:var(--navy-600);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.btn-outline{background:transparent;color:var(--navy-800);border-color:var(--line)}
.btn-outline:hover{border-color:var(--navy-800)}

/* ---------- Auszeichnungen ------------------------------------- */
.badge{
  display:inline-block;margin-bottom:16px;
  font-family:'Figtree',sans-serif;font-size:.76rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);
}
.badge.blue{color:var(--navy-600)}
.badge.warn{color:#B4472F}

/* ---------- Seitenkopf ----------------------------------------- */
.hero{
  background:
    radial-gradient(1000px 460px at 82% -10%, rgba(200,160,60,.16), transparent 60%),
    linear-gradient(160deg,var(--navy-900) 0%,var(--navy-800) 58%,var(--navy-600) 100%);
  color:#fff;padding:78px 0 82px;
}
.hero .container{max-width:900px}
.hero h1{color:#fff;max-width:20ch}
.hero h1 span{color:var(--gold);display:block}
.hero p{
  color:rgba(255,255,255,.84);
  font-size:1.16rem;max-width:62ch;margin-bottom:1.8em;
}
.hero .btn{margin:0 12px 12px 0}
.hero-meta{
  margin-top:30px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.62);font-size:.9rem;
}
.hero-meta a{color:rgba(255,255,255,.86)}
.hero.slim{padding:58px 0 62px}

/* Brotkrumen */
.crumbs{font-size:.86rem;color:rgba(255,255,255,.6);margin-bottom:20px}
.crumbs a{color:rgba(255,255,255,.82)}
.crumbs span{padding:0 8px;opacity:.5}

/* ---------- Abschnitte ----------------------------------------- */
.section{padding:74px 0}
.section.bg-gray{background:var(--mist)}
.section.bg-cream{background:var(--cream)}
.section-header{max-width:760px;margin:0 0 42px}
.section-header p{font-size:1.08rem;color:var(--muted)}

/* ---------- Raster --------------------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}

.benefit-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 26px;
  box-shadow:var(--shadow);
}
.benefit-card h3{margin-bottom:.45em}
.benefit-card p{margin:0;font-size:.98rem;color:var(--body)}
/* Goldene Kante statt Symbol */
.benefit-card::before{
  content:"";display:block;width:34px;height:3px;
  background:var(--gold);border-radius:2px;margin-bottom:20px;
}
.benefit-card.is-negative::before{background:#C9553D}

/* ---------- Zweispalter ---------------------------------------- */
.split-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:52px;align-items:center;
}
.split-grid.reverse .text-col{order:2}
.split-grid.reverse .visual-col{order:1}
@media (max-width:900px){
  .split-grid{grid-template-columns:1fr;gap:34px}
  .split-grid.reverse .text-col,
  .split-grid.reverse .visual-col{order:initial}
}
.visual-col img{
  border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.phone-shot img{max-width:300px;margin:0 auto}

/* ---------- Listen --------------------------------------------- */
.check-list{list-style:none;margin:0 0 26px;padding:0}
.check-list li{position:relative;padding:0 0 12px 30px;font-size:1rem;color:var(--body)}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-weight:800}
.cross-list{list-style:none;margin:0 0 26px;padding:0}
.cross-list li{position:relative;padding:0 0 12px 30px}
.cross-list li::before{content:"✕";position:absolute;left:0;top:0;color:#C9553D;font-weight:800}

/* ---------- Rechenkasten --------------------------------------- */
.calc{
  background:var(--gold-tint);border:1px solid #EADFC0;
  border-radius:var(--radius);padding:30px 28px;
}
.calc h3{margin-bottom:.4em}
.calc table{width:100%;border-collapse:collapse;font-size:1rem;margin-top:14px}
.calc td{padding:9px 0;border-bottom:1px solid #EADFC0}
.calc td:last-child{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.calc tr:last-child td{border-bottom:0;font-size:1.1rem}
.calc .hinweis{font-size:.86rem;color:var(--muted);margin:14px 0 0}

/* ---------- Formulare ------------------------------------------ */
.formcard{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:34px 32px;box-shadow:var(--shadow);
}
.formrow{margin-bottom:20px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:640px){.formgrid{grid-template-columns:1fr}}
.formcard label{
  display:block;margin-bottom:7px;
  font-size:.9rem;font-weight:600;color:var(--ink);
}
.formcard .hint{font-weight:400;color:var(--muted)}
.formcard input[type=text],
.formcard input[type=tel],
.formcard input[type=email],
.formcard input[type=date],
.formcard select,
.formcard textarea{
  width:100%;padding:13px 15px;
  font-family:'Figtree',system-ui,sans-serif;font-size:1rem;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:10px;
  line-height:1.3;-webkit-appearance:none;appearance:none;
}
.formcard select{
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size:6px 6px, 6px 6px;background-repeat:no-repeat;
  padding-right:44px;
}
.formcard textarea{min-height:110px;resize:vertical}
.formcard input:focus,.formcard select:focus,.formcard textarea:focus{
  outline:none;border-color:var(--navy-600);
  box-shadow:0 0 0 3px rgba(27,59,122,.12);
}
.formcard .pflicht{color:var(--gold-dark)}
.formcard .rechtshinweis{font-size:.86rem;color:var(--muted);margin:0 0 22px}
.honigtopf{position:absolute;left:-9999px}

.meldung{
  border-radius:var(--radius);padding:18px 20px;margin-bottom:26px;
  font-size:.97rem;
}
.meldung.ok{background:#EEF7F0;border:1px solid #C7E2CF;color:#1E5233}
.meldung.fehler{background:#FDF1EF;border:1px solid #F0CFC7;color:#8C2F1B}
.meldung ul{margin:8px 0 0;padding-left:20px}

/* ---------- Weiterlesen ---------------------------------------- */
.readmore{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:800px){.readmore{grid-template-columns:1fr}}
.readmore a{
  display:block;background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:var(--radius);
  padding:22px;text-decoration:none;box-shadow:var(--shadow);
}
.readmore a:hover{text-decoration:none;border-color:var(--navy-400)}
.readmore strong{display:block;font-family:'Spectral',serif;font-size:1.06rem;color:var(--ink);margin-bottom:6px}
.readmore span{font-size:.93rem;color:var(--muted)}

/* ---------- Abschlussband -------------------------------------- */
.cta-band{
  background:linear-gradient(160deg,var(--navy-800),var(--navy-900));
  color:#fff;padding:66px 0;text-align:center;
}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.8);max-width:60ch;margin:0 auto 28px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media (max-width:520px){
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
}

/* ---------- Fußzeile ------------------------------------------- */
.sitefooter{background:var(--navy-900);color:rgba(255,255,255,.72);padding:56px 0 0}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr 1fr;
  gap:30px;padding-bottom:44px;
}
@media (max-width:1040px){.footer-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.sitefooter h3{
  color:#fff;font-family:'Figtree',sans-serif;font-size:.8rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;
}
.sitefooter a{display:block;color:rgba(255,255,255,.72);font-size:.95rem;padding:5px 0}
.sitefooter a:hover{color:#fff;text-decoration:none}
.footer-mark{height:30px;width:auto;margin-bottom:16px}
.footer-claim{font-size:.95rem;color:rgba(255,255,255,.6);max-width:38ch}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:18px 24px;text-align:center;
  font-size:.86rem;color:rgba(255,255,255,.5);
}

/* ---------- Einwilligung --------------------------------------- */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:16px}
.consent-box{
  max-width:640px;margin:0 auto;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;box-shadow:var(--shadow-lg);
}
.consent-box p{margin:0 0 10px;font-size:.94rem}
.consent-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
.consent-row .btn-ghost{color:var(--navy-800);border-color:var(--line)}
.consent-row .btn-ghost:hover{background:var(--mist);color:var(--navy-800)}
.consent-link{font-size:.9rem;color:var(--muted)}

/* ---------- Kleinigkeiten -------------------------------------- */
.lead{font-size:1.14rem;color:var(--ink)}
.center{text-align:center}
.mt0{margin-top:0}
figure{margin:0}
figcaption{font-size:.86rem;color:var(--muted);margin-top:10px;text-align:center}

/* =================================================================
   VERKAUFSSEITEN
   Zusätzliche Bausteine für /b2b/kfz-gutachter/, /b2b/anwaltskanzlei/,
   /b2b/werkstatt/ und /b2b/verzeichniseintrag/
   ================================================================= */

/* ---------- Kurzaussage unter dem Hero ------------------------- */
.claim{background:var(--navy-800);color:#fff;padding:44px 0;text-align:center}
.claim h2{color:#fff;margin-bottom:.35em}
.claim p{color:rgba(255,255,255,.82);max-width:62ch;margin:0 auto}

/* ---------- Referenzen ----------------------------------------- */
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:800px){.refs{grid-template-columns:1fr}}
.ref{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
}
.ref b{display:block;font-family:'Spectral',serif;font-size:1.05rem;color:var(--ink)}
.ref span{display:block;font-size:.92rem;color:var(--muted);margin:4px 0 12px}
.ref a{font-size:.94rem;font-weight:600}

/* ---------- Großes Problem mit Lösung -------------------------- */
.bigprob{
  background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:var(--radius);
  padding:30px 30px 26px;margin-bottom:22px;box-shadow:var(--shadow);
  position:relative;
}
.bigprob .no{
  display:inline-block;font-family:'Spectral',serif;font-size:.95rem;
  font-weight:700;color:var(--gold-dark);margin-bottom:6px;
}
.bigprob h3{font-size:1.42rem;margin-bottom:.3em}
.bigprob .pain{color:var(--muted);font-size:1.02rem;margin-bottom:1em}
.bigprob .fix{
  font-weight:600;color:var(--ink);font-size:1.06rem;
  padding-left:16px;border-left:2px solid var(--gold);margin-bottom:1.1em;
}
.bigprob .check-list{margin-bottom:0}
.bigprob figure{margin-top:22px}
.bigprob img{border-radius:10px;border:1px solid var(--line);max-width:420px}

/* ---------- Aufklappbare Kacheln ------------------------------- */
.tgroup{margin:34px 0 16px}
.tgroup:first-of-type{margin-top:0}
.tgroup h3{font-size:1.3rem;margin-bottom:.15em}
.tgroup p{font-size:.95rem;color:var(--muted);margin:0}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:800px){.tiles{grid-template-columns:1fr}}
.tile{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.tile summary{
  cursor:pointer;list-style:none;padding:20px 22px;
  font-weight:600;color:var(--ink);font-size:1.02rem;line-height:1.4;
}
.tile summary::-webkit-details-marker{display:none}
.tile summary::after{
  content:"+";float:right;margin-left:12px;
  color:var(--gold-dark);font-weight:800;
}
.tile[open] summary::after{content:"−"}
.tile .tanswer{
  padding:0 22px 6px;font-weight:600;color:var(--navy-800);font-size:.98rem;
}
.tile .tbody{padding:10px 22px 22px;font-size:.96rem;color:var(--body)}
.tile.honest summary{color:var(--muted)}

/* ---------- Demo ----------------------------------------------- */
.demo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
@media (max-width:800px){.demo{grid-template-columns:1fr}}
.demo-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.demo-card.key{border-color:var(--gold);background:var(--gold-tint)}
.demo-card h3{font-size:1.15rem;margin-bottom:.35em}
.demo-card p{font-size:.97rem;flex:1}
.demo-qr-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.demo-qr{width:82px;height:82px;border-radius:8px;border:1px solid var(--line)}
.demo-qr-row span{font-size:.9rem;color:var(--muted)}
.demo-note{font-size:.88rem;color:var(--muted);margin-top:18px}
.demo-shots{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:end;margin-bottom:8px}
@media (max-width:800px){.demo-shots{grid-template-columns:1fr}}
.shot img{border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.shot.phone img{max-width:250px;margin:0 auto}

/* ---------- Preise --------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 26px;
  display:flex;flex-direction:column;box-shadow:var(--shadow);position:relative;
}
.plan.hi{border:2px solid var(--gold);box-shadow:var(--shadow-lg)}
.plan-badge{
  position:absolute;top:-12px;left:26px;background:var(--gold);
  color:var(--navy-900);font-size:.74rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;
}
.plan-name{font-family:'Spectral',serif;font-size:1.24rem;font-weight:700;color:var(--ink)}
.plan-price{font-family:'Spectral',serif;font-size:2.5rem;font-weight:700;color:var(--ink);line-height:1.1;margin-top:8px}
.plan-note{font-size:.88rem;color:var(--muted);margin-bottom:18px}
.plan ul{list-style:none;margin:0 0 22px;padding:0;flex:1}
.plan li{position:relative;padding:0 0 10px 26px;font-size:.97rem}
.plan li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-weight:800}
.terms{font-size:.88rem;color:var(--muted);margin-top:26px;max-width:80ch}

/* ---------- Gebietsschutz und Pro ------------------------------ */
.geo{
  background:var(--gold-tint);border:1px solid #EADFC0;
  border-radius:var(--radius);padding:30px 28px;
}
.geo h3{margin-bottom:.35em}
.geo p{max-width:70ch;margin:0}
.pro{
  background:linear-gradient(160deg,var(--navy-800),var(--navy-900));
  color:#fff;border-radius:var(--radius);padding:38px 34px;
}
.pro h2,.pro h3{color:#fff}
.pro p{color:rgba(255,255,255,.84);max-width:72ch}
.pro .tag{
  display:inline-block;background:var(--gold);color:var(--navy-900);
  font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;margin-bottom:16px;
}
.pro-head{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.pro-head img{width:80px;height:80px;border-radius:50%;flex-shrink:0}
@media (max-width:560px){.pro-head{flex-direction:column;align-items:flex-start;gap:12px}}

/* ---------- Verweis auf andere Berufsgruppen ------------------- */
.cross{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:700px){.cross{grid-template-columns:1fr}}
.cross a{
  display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;text-decoration:none;box-shadow:var(--shadow);
}
.cross a:hover{border-color:var(--navy-400);text-decoration:none}
.cross h4{font-family:'Spectral',serif;font-size:1.1rem;color:var(--ink);margin-bottom:.35em}
.cross p{font-size:.95rem;color:var(--muted);margin:0}

/* ---------- Abschluss mit Person ------------------------------- */
.close-box{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:34px;
  display:flex;gap:28px;align-items:flex-start;box-shadow:var(--shadow);
}
.close-box > img{width:110px;height:110px;border-radius:50%;flex-shrink:0;object-fit:cover}
@media (max-width:640px){
  .close-box{flex-direction:column;gap:20px}
  .close-box > img{width:88px;height:88px}
}
.close-box .btn{margin:0 12px 12px 0}
.creds{font-size:.88rem;color:var(--muted);margin-top:8px}

/* ---------- Auswahl der Wege ----------------------------------- */
.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.pick{grid-template-columns:1fr}}
.pick a{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--gold);border-radius:var(--radius);
  padding:28px 26px;text-decoration:none;box-shadow:var(--shadow);
}
.pick a:hover{text-decoration:none;border-color:var(--navy-400);border-top-color:var(--gold)}
.pick h3{font-size:1.24rem;margin-bottom:.4em}
.pick p{font-size:.97rem;color:var(--body);flex:1}
.pick .go{
  font-weight:700;color:var(--navy-800);font-size:.95rem;
  border-top:1px solid var(--line);padding-top:14px;margin-top:6px;
}

/* ---------- Vergleichstabelle ---------------------------------- */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.cmp{width:100%;border-collapse:collapse;min-width:720px;font-size:.94rem}
.cmp th,.cmp td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--line)}
.cmp thead th{
  background:var(--navy-800);color:#fff;font-family:'Figtree',sans-serif;
  font-size:.86rem;font-weight:700;letter-spacing:.03em;
  border-bottom:0;position:sticky;top:0;
}
.cmp thead th:first-child{background:var(--navy-900)}
.cmp tbody th{
  text-align:left;font-weight:600;color:var(--ink);
  background:var(--mist);min-width:260px;
}
.cmp td.y{color:var(--gold-dark);font-weight:800}
.cmp td.n{color:#C0C7D4}
.cmp tbody tr:hover td,.cmp tbody tr:hover th{background:var(--gold-tint)}

/* ---------- Was nicht passiert --------------------------------- */
.nots{
  background:var(--navy-900);color:#fff;
  border-radius:var(--radius);padding:38px 34px;
}
.nots h2{color:#fff;margin-bottom:.6em}
.nots ul{list-style:none;margin:0 0 20px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
@media (max-width:700px){.nots ul{grid-template-columns:1fr}}
.nots li{position:relative;padding-left:28px;color:rgba(255,255,255,.86)}
.nots li::before{content:"✕";position:absolute;left:0;top:0;color:var(--gold);font-weight:800}
.nots > p{color:rgba(255,255,255,.6);font-style:italic;margin:0}

/* ---------- Zähler im Seitenkopf -------------------------------- */
.counter{
  display:inline-flex;align-items:baseline;gap:10px;margin-top:26px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:12px 20px;
}
.counter b{
  font-family:'Spectral',serif;font-size:1.9rem;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1;
}
.counter span{color:rgba(255,255,255,.76);font-size:.95rem}

/* ---------- Vorteilsraster -------------------------------------- */
.adv{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.adv{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.adv{grid-template-columns:1fr}}
.adv-item{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow);
}
.adv-item::before{
  content:"";display:block;width:30px;height:3px;
  background:var(--gold);border-radius:2px;margin-bottom:18px;
}
.adv-item h3{font-size:1.14rem;margin-bottom:.4em}
.adv-item p{font-size:.96rem;margin:0}

/* ---------- Stufen des Verzeichniseintrags ---------------------- */
.tierlist{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media (max-width:900px){.tierlist{grid-template-columns:1fr}}
.tier{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 26px;
  display:flex;flex-direction:column;box-shadow:var(--shadow);position:relative;
}
.tier.mid{border:2px solid var(--gold);box-shadow:var(--shadow-lg)}
.tier.gold{border-color:var(--gold-dark)}
.tier-badge{
  position:absolute;top:-12px;left:26px;background:var(--gold);
  color:var(--navy-900);font-size:.74rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;
}
.tier-nm{font-family:'Spectral',serif;font-size:1.24rem;font-weight:700;color:var(--ink)}
.tier-pr{font-family:'Spectral',serif;font-size:2.5rem;font-weight:700;color:var(--ink);line-height:1.1;margin-top:8px}
.tier-sub{font-size:.88rem;color:var(--muted);margin-bottom:18px}
.tier ul{list-style:none;margin:0 0 22px;padding:0;flex:1}
.tier li{position:relative;padding:0 0 10px 26px;font-size:.97rem}
.tier li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-weight:800}
.tier li.off{color:var(--muted)}
.tier li.off::before{content:"✕";color:#C0C7D4}

/* =================================================================
   ÜBERBREITE VERHINDERN

   Rasterspalten haben von Haus aus min-width:auto und dürfen damit
   breiter werden als die Spalte, in der sie stehen. Ein Screenshot mit
   großer Eigenbreite schiebt dann die ganze Seite auf, und auf dem
   Handy entsteht waagerechtes Scrollen. min-width:0 nimmt den Spalten
   dieses Recht.
   ================================================================= */

.split-grid > *,
.grid-2 > *, .grid-3 > *,
.pick > *, .plans > *, .refs > *,
.demo > *, .demo-shots > *,
.tiles > *, .readmore > *,
.cross > *, .tierlist > *, .adv > * { min-width: 0; }

/* Bilder bleiben in ihrer Spalte, auch wenn sie größer angeliefert werden. */
.visual-col img,
.bigprob img,
.shot img,
.demo-card img { max-width: 100%; height: auto; }

/* Das Hochformat war auf 250 bis 300 Pixel gedeckelt. Auf schmalen
   Geräten darf es die volle Spaltenbreite nutzen, aber nicht mehr. */
.phone-shot img, .shot.phone img { width: 100%; max-width: 300px; height: auto; }

/* Die Vergleichstabelle ist absichtlich breiter als der Bildschirm und
   wird gescrollt. Der Rahmen darum darf dabei nicht mitwachsen. */
.cmp-scroll { max-width: 100%; }

/* Lange Adressen und Slugs in Fließtext und Tabellen umbrechen lassen. */
.terms, .hinweis, .bigprob p, .tile .tbody { overflow-wrap: anywhere; }

@media (max-width: 700px) {
  /* Aufklappbare Kacheln: lange Überschriften ohne Leerzeichen könnten
     sonst ebenfalls überstehen. */
  .tile summary { overflow-wrap: anywhere; }
}

/* =================================================================
   HANDBUCH
   Lesetext, Kapitelnavigation
   ================================================================= */

.container.schmal{max-width:760px}

.lesetext{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(26px,4vw,48px);
  box-shadow:var(--shadow);
}
.lesetext p{
  font-size:1.08rem;line-height:1.78;color:var(--body);
  margin:0 0 1.15em;max-width:68ch;
}
.lesetext p:last-child{margin-bottom:0}

/* Zwischenüberschriften stehen in Versalien, so wie im Manuskript.
   Eine automatische Umwandlung in normale Schreibweise ginge im
   Deutschen schief, weil sie die Substantive kleinschreiben würde.
   Deshalb hier klein gesetzt, mit Sperrung, als Gliederungszeile. */
.lesetext h2{
  font-family:'Figtree',system-ui,sans-serif;
  font-size:.84rem;font-weight:700;letter-spacing:.12em;
  color:var(--gold-dark);
  margin:2.4em 0 .9em;padding-top:1.2em;
  border-top:1px solid var(--line);
}
.lesetext h2:first-child{margin-top:0;padding-top:0;border-top:0}

/* ---------- Vor und zurück ------------------------------------- */
.kapitelnav{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px;
}
@media (max-width:640px){.kapitelnav{grid-template-columns:1fr}}
.kapitelnav a{
  display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;
  text-decoration:none;box-shadow:var(--shadow);
}
.kapitelnav a:hover{border-color:var(--navy-400);text-decoration:none}
.kapitelnav a span{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-dark);margin-bottom:6px;
}
.kapitelnav a strong{
  display:block;font-family:'Spectral',serif;font-size:1.06rem;
  color:var(--ink);line-height:1.35;font-weight:700;
}
.kapitelnav a.weiter{text-align:right}

.lesehinweis{
  margin-top:26px;font-size:.94rem;color:var(--muted);text-align:center;
}

/* ---------- Bild im Kapitel ------------------------------------- */
.kapitelbild{margin:26px 0 0}
.kapitelbild img{
  width:100%;height:auto;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
.kapitelbild.hoch img{max-width:290px;margin:0 auto}
.kapitelbild figcaption{
  font-size:.9rem;color:var(--muted);margin-top:12px;text-align:center;
  max-width:60ch;margin-left:auto;margin-right:auto;
}

/* ---------- Handbuch, vollständige Fassung ---------------------- */
.inhaltsverzeichnis{
  background:var(--mist);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 32px;margin-bottom:40px;
}
.inhaltsverzeichnis h2{font-size:1.3rem;margin-bottom:.8em}
.iv-teil{margin-bottom:20px}
.iv-teil:last-child{margin-bottom:0}
.iv-teil b{
  display:block;font-family:'Figtree',sans-serif;font-size:.82rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:8px;
}
.iv-teil ol{margin:0;padding-left:26px}
.iv-teil li{margin-bottom:5px;font-size:1rem}
.iv-teil a{color:var(--navy-800);text-decoration:none}
.iv-teil a:hover{text-decoration:underline}

.teiltrenner{
  margin:56px 0 28px;padding-top:26px;
  border-top:3px solid var(--gold);
}
.teiltrenner span{
  display:block;font-family:'Figtree',sans-serif;font-size:.8rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:6px;
}
.teiltrenner h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0}

.kapitel-block{margin-bottom:26px;scroll-margin-top:90px}
.kapitel-block .kapitelzahl{
  font-family:'Figtree',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gold-dark);
  margin:0 0 .4em;
}
.kapitel-block > h2{
  font-size:clamp(1.35rem,2.6vw,1.75rem);margin:0 0 1em;
  padding:0;border:0;font-family:'Spectral',Georgia,serif;
  color:var(--ink);letter-spacing:-.01em;text-transform:none;
}
/* Zwischenüberschriften sind hier h3, gleiche Gestaltung wie sonst h2 */
.kapitel-block h3{
  font-family:'Figtree',system-ui,sans-serif;
  font-size:.84rem;font-weight:700;letter-spacing:.12em;
  color:var(--gold-dark);
  margin:2.2em 0 .9em;padding-top:1.1em;
  border-top:1px solid var(--line);
}
.kapitel-block .einzelkapitel{
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:.92rem;color:var(--muted);
}

@media print{
  .topbar,.cta-band,.sitefooter,.consent,.inhaltsverzeichnis{display:none}
  .lesetext{border:0;box-shadow:none;padding:0}
  .kapitel-block{page-break-before:always}
  .hero{background:none;color:#000;padding:0 0 20px}
  .hero h1,.hero p{color:#000}
}

/* ---------- Autorenzeile unter dem Kapitel ---------------------- */
.autorzeile{
  display:flex;gap:20px;align-items:flex-start;
  background:var(--mist);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:var(--radius);
  padding:24px 26px;margin-top:30px;
}
.autorzeile b{
  display:block;font-family:'Spectral',serif;font-size:1.08rem;
  color:var(--ink);margin-bottom:6px;
}
.autorzeile p{font-size:.97rem;color:var(--body);margin:0 0 12px}
.autorzeile .autorlink{
  display:inline-flex;align-items:center;padding:8px 15px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);
  font-size:.9rem;font-weight:600;color:var(--navy-800);text-decoration:none;
}
.autorzeile .autorlink:hover{border-color:var(--navy-400);text-decoration:none}