/* ==========================================================================
   Hecht Nachfolge – gemeinsames Stylesheet
   Eine Quelle für alle Seiten. Regeln stehen in design.md.
   Reihenfolge: 1 Tokens · 2 Basis · 3 Layout · 4 Kopf/Navigation · 5 Buttons
                6 Textbausteine · 7 Startseite · 8 Artikelseiten · 9 Rechtsseiten
                10 Druck · 11 Bewegungsreduktion
   ========================================================================== */

/* --- 0 Schriften ---------------------------------------------------------
   Selbst gehostet unter /assets/fonts/ – bewusst kein Google-Fonts-CDN:
   die Datenschutzerklaerung sagt zu, dass nichts von fremden Servern
   nachgeladen wird. Beide Dateien sind Variable Fonts, eine Datei deckt
   daher alle Schnitte ab (zusammen rund 51 KB).
   Lizenz: SIL Open Font License 1.1 – siehe assets/fonts/LIZENZ.txt
   ------------------------------------------------------------------------- */
@font-face{
  font-family:"Source Serif 4";
  src:url("/assets/fonts/SourceSerif4.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans VF";
  src:url("/assets/fonts/IBMPlexSans.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

/* --- 1 Tokens ------------------------------------------------------------ */
:root{
  /* Marke */
  --navy:#12314F;
  --navy-deep:#0D2540;
  --navy-hover:#0C2540;
  --navy-mid:#1E4C77;
  --navy-soft:#EAF1F8;

  /* Eisenoxidrot – die Akzentfarbe. Vorher stand hier Messing, und Messing war
     der Fehler: Navy plus Gold ist die Farbkombination von Immobilienmaklern,
     M&A-Boutiquen und Beteiligungsgesellschaften. Die Seite sagt in jeder Zeile
     "kein Makler, kein Fonds, keine Provision" – und sah dabei aus wie beides.
     Eisenoxidrot ist Rostschutzfarbe, Ziegel, Mennige: die materielle Welt
     unserer Verkäufer statt die Finanzwelt. Warm statt kühl-prestigiös, was zu
     zwei Brüdern besser passt als zu einem Fonds.
     Ein Ton statt vorher drei: --accent erreicht auf Papier 5,9:1 und trägt
     damit auch Kleinschrift – ein eigener Textton war nie nötig.
     Der Akzent lebt ausschliesslich auf hellem Grund. Eine aufgehellte Fassung
     fuer dunkle Flaechen gab es im ersten Anlauf; sie las sich auf Navy als
     Lachsrosa, also als Modefarbe statt als Handwerksfarbe. Auf dunklem Grund
     traegt jetzt Weiss – klarer, ernster und ohne zusaetzlichen Ton. */
  --accent:#9C4A28;

  /* Schrift und Flächen */
  --ink:#15202E;
  --body:#414D5C;
  --muted:#5A6675;
  --line:#DFE4EA;
  --line-soft:#EDF0F3;
  --paper:#FBFAF8;
  --white:#fff;

  /* Signalfarben (Verkäuflichkeits-Check, Kostenlisten) */
  --ok:#2F6B47;      --ok-bg:#E8F1E9;
  /* Bernstein statt Rostrot. Zwei Gruende: Das alte Warnrot lag dem neuen
     Akzent zu nahe – Marke und Warnung waren kaum zu unterscheiden. Und im
     Verkaeuflichkeits-Check ist Bernstein die ehrlichere Aussage: "hier ist
     Arbeit" statt "Ihr Lebenswerk ist ein Problem". */
  --warn:#7E5A1E;    --warn-bg:#F5EEDF;
  /* Echter Fehler (Formular liess sich nicht senden). Bewusst gesaettigter und
     roter als der Akzent – sonst liest sich eine Stoerung wie Markenfarbe.
     6,3:1 auf Papier. */
  --error:#B3261E;

  /* Dunkle Flächen */
  --on-navy:#D7E3EF;
  --on-navy-dim:#BACBDC;
  --on-navy-faint:#9FB6CC;

  /* Typografie */
  --serif:"Source Serif 4",Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:"IBM Plex Sans VF",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Maße – pro Seite über eine Body-Klasse überschrieben, siehe Abschnitt 3 */
  --wrap:1090px;
  --wrap-header:1280px;
  --wrap-footer:1090px;
  --section-pad:64px;
  --h1:clamp(2rem,4.6vw,3.1rem);
  --h2:clamp(1.55rem,3.2vw,2.15rem);

  /* Form */
  --radius-s:6px;
  --radius-m:8px;
  --radius-l:10px;
  --shadow-card:0 6px 24px rgba(18,49,79,.09);
  --shadow-panel:0 14px 40px rgba(13,37,64,.18);
  --shadow-btn:0 1px 2px rgba(12,37,64,.18);
  --shadow-btn-hover:0 4px 14px rgba(12,37,64,.28);
}

/* --- 2 Basis ------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--body);background:var(--paper);
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3{color:var(--ink);line-height:1.22;margin:0 0 .55em;font-weight:600}
h1{font-family:var(--serif);font-size:var(--h1);letter-spacing:-.015em}
h2{font-family:var(--serif);font-size:var(--h2);letter-spacing:-.01em}
h3{font-size:1.08rem}
p{margin:0 0 1.05rem}
ul{margin:0 0 1.2rem;padding-left:1.25rem}
li{margin-bottom:.5rem}
a{color:var(--navy-mid)}
:focus-visible{outline:3px solid var(--navy-mid);outline-offset:2px;border-radius:3px}

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--radius-s) 0;text-decoration:none;font-weight:600}
.skip:focus{left:0}

/* --- 3 Layout ------------------------------------------------------------ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.inner{max-width:var(--wrap-header);margin:0 auto;padding:0 22px}
.narrow{max-width:760px;margin:0 auto;padding:0 22px}
section{padding:var(--section-pad) 0}
.bg-white{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bg-navy{background:var(--navy);color:var(--on-navy)}
.bg-navy h2,.bg-navy h3{color:#fff}
.bg-navy p{color:var(--on-navy-dim)}

/* Seitentypen: setzen nur Maße, keine Farben. */
body.page-generated{--wrap:800px;--section-pad:48px;--h1:clamp(1.8rem,4.2vw,2.55rem);--h2:clamp(1.4rem,3vw,1.85rem)}
body.page-article{--wrap:780px;--section-pad:48px;--h1:clamp(1.85rem,4.2vw,2.6rem);--h2:clamp(1.4rem,3vw,1.85rem)}
body.page-tool{--wrap:720px;--section-pad:48px;--h1:clamp(1.85rem,4.2vw,2.6rem);--h2:clamp(1.35rem,3vw,1.75rem)}
body.page-legal{--wrap:740px;--section-pad:48px;--h1:2rem;--h2:1.25rem}
/* Breite Ausbrüche innerhalb schmaler Seiten (Kartenraster, Tabellen) */
.wide{max-width:1090px;margin:0 auto;padding:0 22px}

/* Brotkrumen – Orientierung „wo bin ich“, zusätzlich als BreadcrumbList im Schema */
.crumbs{font-size:.85rem;color:var(--muted);padding:14px 0 0}
/* Brotkrumen sind sekundaer, aber 18px hohe Ziele sind auch dafuer zu knapp. */
.crumbs a{display:inline-block;padding:5px 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li{margin:0}
.crumbs li::after{content:"›";margin-left:6px;color:#B9C6D4}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--muted)}

/* --- 4 Kopf, Navigation, Anrufleiste, Fuß -------------------------------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(140%) blur(8px)}
header.site .inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:70px}

/* Signet plus Wortmarke. Der frühere Verzicht hatte einen richtigen Grund –
   das alte Zeichen war ein H und las sich neben „Hecht" als versehentlich
   vorangestellter Buchstabe. Das neue Zeichen ist ein Hecht im Schild: der
   Familienname als Bild, nicht als Buchstabe. Damit entfällt die Doppelung,
   und die Wortmarke allein muss nicht mehr die ganze Marke tragen.
   Die Wortmarke bleibt echter Text: skaliert mit, ist durchsuchbar, wird vorgelesen.
   padding hält die Trefferfläche auf 44px, ohne den Kopf höher zu machen. */
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  flex:0 0 auto;white-space:nowrap;padding:3px 0;min-height:44px}
/* Wortmarke: eine Zeile, gemischte Schreibung, kein Tracking.
   Versalien mit weitem Sperrsatz waren der Template-Griff, der die Marke
   beliebig aussehen liess. Der Name traegt jetzt selbst – unterschieden wird
   nur ueber das Schriftgewicht, nicht ueber Groesse, Farbe und Laufweite. */
.logo-type{display:block;line-height:1.05;font-family:var(--serif);
  font-size:1.32rem;color:var(--ink);letter-spacing:-.006em}
.logo-type .lt-name{font-weight:600}
.logo-type .lt-sub{font-weight:400}
/* Höhe an der Versalhöhe der Wortmarke ausgerichtet, nicht an der Zeilenhöhe:
   sonst steht das Schild optisch zu tief. */
.logo-mark{width:auto;height:30px;flex:0 0 auto}
@media(max-width:980px){.logo-mark{height:27px}}

/* Häkchen und Sterne: ✓ (U+2713) und ★ (U+2605) fehlen in beiden Hausschriften –
   die Latin-Teilmenge von Google enthält sie nicht. Sie kommen also aus einer
   Ersatzschrift, und das sieht geprüft auch gut aus. Ohne diese Zeile bestimmt
   aber das Betriebssystem, welche: Auf Windows und Android kann eine Emoji-
   Schrift zuerst greifen und die Zeichen farbig rendern. Deshalb eine bewusste
   Reihenfolge symbolfähiger Textschriften vor dem normalen Stack. */
.c,.st{font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2",var(--sans)}

.tel{text-align:right;line-height:1.25}
.tel a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0;
  font-size:1.13rem;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.tel small{display:block;color:var(--muted);font-size:.82rem;margin-top:-4px}

.mainnav{display:flex;gap:16px;flex-wrap:nowrap}
.mainnav a{color:var(--body);text-decoration:none;font-weight:600;font-size:.9rem;
  padding:8px 0;white-space:nowrap;border-bottom:2px solid transparent}
.mainnav a:hover{color:var(--navy);border-bottom-color:var(--accent)}
.mainnav a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--accent)}

.callbar{display:none}

footer.site{background:var(--navy-deep);color:#93AAC2;padding:40px 0 30px;font-size:.9rem;margin-top:56px}
footer.site .inner{max-width:var(--wrap-footer)}
footer.site a{color:#C6D7E7;text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .fname{color:#fff;font-weight:600;font-family:var(--serif);font-size:1.05rem;margin-bottom:8px}
/* 176px statt 190px: Mit der fuenften Spalte (Region) ergaben 5x190 plus 4x30
   Abstand 1070px – 24px mehr, als der Fussbereich innen breit ist. Die fuenfte
   Spalte rutschte dadurch allein in eine zweite Reihe. */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:26px 30px}
.fgrid h3{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;font-family:var(--sans)}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:6px}
/* Fusszeile am Telefon: Die Links standen als 19px hohe Zeilen in 24px Abstand
   uebereinander – bei rund dreissig Eintraegen und einer Zielgruppe jenseits der
   Sechzig eine Fehlgriff-Falle. Am Schreibtisch mit der Maus ist das kein
   Problem, deshalb greift die Regel nur auf schmalen Bildschirmen. */
@media(max-width:980px){
  .fgrid li{margin-bottom:0}
  .fgrid a{display:block;padding:11px 0;min-height:44px}
}
.fbot{margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:.83rem;line-height:1.6}
.fbot b{color:#fff}

@media(min-width:981px) and (max-width:1240px){
  .mainnav{gap:12px}
  .mainnav a{font-size:.84rem}
  .tel small{display:none}
  .logo-type .lt-name{font-size:1.05rem}
}
@media(max-width:980px){
  header.site{position:static}
  header.site .inner{flex-wrap:wrap;padding-top:10px;padding-bottom:6px}
  .mainnav{order:3;width:100%;gap:18px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;border-top:1px solid var(--line-soft);margin-top:4px;padding:5px 0 3px;
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
    mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav a{font-size:.95rem;padding:11px 0}   /* 44px Tippfläche – Zielgruppe Ü60 */
  .callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--navy);box-shadow:0 -2px 14px rgba(0,0,0,.18);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .callbar a{display:flex;align-items:center;justify-content:center;min-height:48px;
    color:#fff;text-decoration:none;font-weight:700;font-size:1.04rem;text-align:center}
  body{padding-bottom:76px}
}

/* --- 5 Buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:#fff;
  text-decoration:none;font-weight:600;padding:15px 26px;border-radius:var(--radius-s);
  font-size:1.06rem;border:none;cursor:pointer;font-family:var(--sans);
  box-shadow:var(--shadow-btn);transition:background .15s,box-shadow .2s,transform .1s}
.btn:hover{background:var(--navy-hover);box-shadow:var(--shadow-btn-hover)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid #B9C6D4;box-shadow:none}
.btn-ghost:hover{background:var(--navy-soft);box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}
/* Entlastungszeile unter jedem Anruf-Button – nie ein nackter Button. */
.reassure{font-size:.93rem;color:var(--muted);margin:0}

/* --- 6 Textbausteine ----------------------------------------------------- */
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;font-weight:700;
  color:var(--accent);margin:0 0 1.1rem}
.lead{font-size:1.16rem;max-width:56ch;color:var(--ink)}
.lead strong{color:var(--ink);font-weight:600}
.sub{color:var(--muted);margin:-.3em 0 1.8rem;font-size:1.04rem;max-width:62ch}
.byline{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.88rem;
  margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.disclaim,.calc-disclaim{font-size:.87rem;color:var(--muted);margin:16px 0 0;
  padding-top:14px;border-top:1px dashed var(--line)}
.privnote,.formnote{font-size:.87rem;color:var(--muted);margin:14px 0 0}
.story{font-family:var(--serif);font-size:1.19rem;line-height:1.72;color:#2B3846}
.story h2{font-family:var(--serif);font-size:1.35rem;color:var(--ink);font-weight:600;
  line-height:1.4;margin:0 0 1.05rem;letter-spacing:0}
.story .kicker{font-family:var(--sans);font-size:.82rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--accent);font-weight:700;margin-bottom:1.4rem}

/* --- 7 Startseite -------------------------------------------------------- */
.hero{padding:72px 0 60px;background:linear-gradient(170deg,#F4F7FB 0%,var(--paper) 62%)}
.hero .grid{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
.hero-quote{margin:0;background:var(--navy);border-radius:var(--radius-l);padding:40px 36px;
  display:flex;flex-direction:column;justify-content:center;min-height:340px;box-shadow:var(--shadow-panel)}
.hero-quote blockquote{margin:0 0 22px;font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem);
  line-height:1.5;color:#fff;font-weight:600}
.hero-quote figcaption{color:#fff;font-weight:700;font-size:1rem;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.hero-quote figcaption span{color:#93AAC2;font-weight:400;font-size:.88rem}
/* Sobald das Hero-Foto da ist, ersetzt .hero-photo das Zitat-Panel. */
.hero-photo{margin:0;border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-panel)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo figcaption{font-size:.88rem;color:var(--muted);margin-top:10px}

.trustbar{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:15px 0;font-size:.9rem}
.trustbar .wrap{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:center;justify-content:center;
  color:var(--muted);text-align:center}
.trustbar b{color:var(--ink);font-weight:600}
.stars{color:var(--accent);letter-spacing:.06em}
/* Links auf dunklem Grund: Weiss mit Unterstreichung (13,3:1). Hier stand ein
   hartkodiertes Gold – es hatte den Messingwechsel ueberlebt, weil es als roher
   Hex-Wert in keiner Token-Suche auftauchte. Farbe traegt hier ohnehin nicht:
   Auf Navy ist die Unterstreichung das verlaesslichere Linksignal. */
.bg-navy a,.ctaband a:not(.btn),.safety a{color:#fff;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.bg-navy a:hover,.ctaband a:not(.btn):hover,.safety a:hover{text-decoration-thickness:2px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:22px;
  display:flex;flex-direction:column;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.card:hover{box-shadow:var(--shadow-card);border-color:#C9D4E0;transform:translateY(-2px)}
.card h3{margin-bottom:.35em}
.card p{margin:0;font-size:1rem;color:var(--body);line-height:1.6}
.card .tag{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.8rem}
/* Kartenlink: eine Bauweise für alle Karten. Die Überschrift ist nie ein Link –
   sonst stehen in einer Reihe blaue und schwarze Überschriften nebeneinander.
   Der Pfeil hängt an dieser Klasse, nicht pauschal an jedem <a> in der Karte;
   sonst bekommt ein Fließtextlink, der schon selbst auf → endet, einen zweiten. */
.card-more{display:inline-block;margin-top:auto;padding-top:14px;
  color:var(--navy-mid);text-decoration:none;font-weight:600;font-size:.95rem}
.card-more::after{content:"\00a0→"}
.card-more:hover{color:var(--navy);text-decoration:underline}

.facts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.fact{background:var(--navy-soft);border-radius:var(--radius-s);padding:12px 18px;font-size:.93rem;color:var(--ink)}
.fact b{display:block;font-size:1.15rem;font-family:var(--serif);margin-bottom:1px}

.catch{margin-top:26px;padding:20px 24px;background:var(--white);border-left:3px solid var(--accent);
  border-radius:0 var(--radius-s) var(--radius-s) 0;font-size:1rem}
.catch strong{color:var(--ink)}

.pull{font-family:var(--serif);font-size:clamp(1.4rem,2.9vw,1.95rem);line-height:1.42;
  color:#fff;max-width:24ch;margin:0 0 1.4rem;font-weight:600}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.paylist{list-style:none;padding:0;margin:0}
.paylist li{padding:0 0 20px 40px;position:relative}
.paylist li:last-child{padding-bottom:0}
.paylist .n{position:absolute;left:0;top:1px;width:27px;height:27px;border-radius:50%;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.28);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}
.paylist b{display:block;color:#fff;margin-bottom:3px;font-size:1rem}
.paylist span.t{font-size:.96rem;color:var(--on-navy-dim)}
.safety{margin-top:26px;padding:18px 22px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-m);font-size:.97rem;color:var(--on-navy)}
.safety b{color:#fff}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--radius-m);background:var(--white)}
.tablewrap table{border-collapse:collapse;width:100%;min-width:760px;font-size:.94rem}
.tablewrap th,.tablewrap td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tablewrap thead th{background:#F5F7FA;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700;border-bottom:1px solid var(--line)}
.tablewrap thead th.us{background:var(--navy);color:#fff}
.tablewrap tbody th{font-weight:600;color:var(--ink);width:20%;background:#FAFBFC}
.tablewrap td.us{background:#F4F8FC;color:var(--ink);font-weight:500}
.tablewrap tr:last-child th,.tablewrap tr:last-child td{border-bottom:none}
/* Auf dem Handy wird aus der Tabelle eine Karte je Kriterium – kein Seitwärtsscrollen. */
@media(max-width:760px){
  .tablewrap{overflow:visible;border:none;background:transparent;border-radius:0}
  .tablewrap table{display:block;min-width:0;font-size:1rem}
  .tablewrap thead{display:none}
  .tablewrap tbody{display:block}
  .tablewrap tbody tr{display:block;background:var(--white);border:1px solid var(--line);
    border-radius:var(--radius-m);margin-bottom:14px;padding:6px 0}
  .tablewrap tbody tr:last-child{margin-bottom:0}
  .tablewrap tbody th{display:block;width:auto;background:transparent;border:none;
    padding:12px 16px 6px;font-size:1.06rem;font-family:var(--serif)}
  .tablewrap tbody td{display:block;border:none;padding:9px 16px;font-size:.96rem}
  .tablewrap tbody td::before{content:attr(data-label);display:block;font-size:.78rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:2px}
  .tablewrap tbody td.us{background:#F1F6FB;border-left:3px solid var(--navy);
    margin:2px 12px 8px;border-radius:0 var(--radius-s) var(--radius-s) 0;padding:10px 14px}
  .tablewrap tbody td.us::before{color:var(--navy)}
}

/* Ablauf-Karten der Startseite (div.steps) – die nummerierte Liste
   der Artikelseiten (ol.steps) steht in Abschnitt 8. */
div.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);padding:24px;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.step:hover{box-shadow:var(--shadow-card);border-color:#C9D4E0;transform:translateY(-2px)}
.step .num{font-family:var(--serif);font-size:1.9rem;color:var(--accent);line-height:1;margin-bottom:10px}
.step b{display:block;color:var(--ink);margin-bottom:6px;font-size:1.05rem}
.step p{margin:0;font-size:1rem;color:var(--body)}

.reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px 34px}
.reason{display:flex;gap:14px}
.reason .ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--navy-soft);
  color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:.85rem;
  font-weight:700;margin-top:2px}
.reason h3{margin-bottom:.25em}
.reason p{margin:0;font-size:1rem;color:var(--body)}

/* Wertrechner */
.calc{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-l);padding:26px}
.calc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.calc-out{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.calc-out .val{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.05rem);color:var(--ink);
  display:block;margin:4px 0 8px}
.calc-out .val-label{font-size:.95rem;color:var(--muted)}
.calc-note{font-size:.87rem;color:var(--muted);margin:0}
.calc-split{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-soft)}
.calc-split span{font-size:.9rem;color:var(--muted)}
.calc-split b{display:block;font-family:var(--serif);font-size:1.12rem;color:var(--ink);font-weight:600}
.calc-cta{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.calc-cta p{font-size:1rem;color:var(--ink);margin:0 0 12px;max-width:60ch}

/* Formularelemente */
label{display:block;font-size:.87rem;font-weight:600;color:var(--ink);margin-bottom:6px}
label .hint{display:block;font-weight:400;color:var(--muted);font-size:.86rem;margin-top:2px;line-height:1.4}
input[type=number],input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:12px 13px;border:1px solid #CBD4DE;border-radius:var(--radius-s);font-size:1rem;
  font-family:var(--sans);color:var(--ink);background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy-mid);outline-offset:-1px}
.formcard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-l);padding:28px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-full{margin-bottom:16px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.87rem;color:var(--muted);
  margin:4px 0 18px;font-weight:400}
.consent input{margin-top:1px;flex:0 0 auto;width:21px;height:21px;cursor:pointer}

/* Brüder-Block */
.brothers{display:grid;grid-template-columns:190px 190px 1fr;gap:26px;align-items:start}
.ph{background:linear-gradient(165deg,#F4F7FB,#E8EEF5);border:1px solid var(--line);
  border-radius:var(--radius-l);aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;
  justify-content:center;color:var(--muted);font-size:.88rem;gap:6px;text-align:center;padding:14px}
.ph .mono{width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);
  font-size:2rem;font-weight:700;margin-bottom:8px;border:3px solid var(--accent)}
.ph b{color:var(--ink);font-weight:600;font-size:1.02rem}
.portrait{border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line)}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
.portrait figcaption{padding:10px 12px;background:var(--white);font-size:.9rem;color:var(--muted)}
.portrait figcaption b{display:block;color:var(--ink);font-size:1.02rem}
.sig{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:1.05rem;margin-top:6px}
.sig-img{max-width:230px;margin:10px 0 4px}

/* Harte Belege statt Behauptungen */
.gbadge{display:inline-flex;align-items:center;gap:10px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-m);padding:10px 16px;margin:6px 0 14px;
  text-decoration:none;color:inherit}
.gbadge .st{color:var(--accent);font-size:1.15rem;letter-spacing:.05em}
.gbadge b{color:var(--ink)}
.gbadge small{display:block;color:var(--muted);font-size:.82rem;line-height:1.35}
.factline{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--muted)}
.factline b{color:var(--ink);font-weight:600}

/* FAQ */
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:16px 32px 16px 0;font-weight:600;color:var(--ink);
  list-style:none;position:relative;font-size:1.02rem;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:1.4rem;
  color:var(--accent);font-weight:400}
.faq[open] summary::after{content:"–"}
.faq[open] summary{color:var(--navy-mid)}
.faq p{margin:0 0 16px;font-size:1rem;max-width:70ch;overflow:hidden}

/* Abschluss-Ruf */
.cta{text-align:center}
.cta .telbig{display:inline-block;font-family:var(--serif);font-size:clamp(1.7rem,4.4vw,2.5rem);
  color:#fff;text-decoration:none;font-weight:600;margin:6px 0 12px}
.cta small{display:block;color:var(--on-navy-faint);font-size:.88rem}

@media(max-width:860px){
  .hero .grid{grid-template-columns:1fr;gap:32px}
  .pay-grid{grid-template-columns:1fr;gap:30px}
  .brothers{grid-template-columns:1fr 1fr;gap:18px}
  .brothers>div:last-child,.brothers>.brothers-text{grid-column:1/-1}
  .form-row{grid-template-columns:1fr;gap:14px}
  :root{--section-pad:52px}
  .tel small{display:none}
}
@media(max-width:520px){
  body{font-size:16px}
  .tel a{font-size:1rem}
  .logo-type .lt-name{font-size:1.02rem}
  .btn{width:100%;justify-content:center}
}

/* --- 8 Artikel- und Werkzeugseiten --------------------------------------- */
.answerbox{background:var(--navy-soft);border-left:3px solid var(--navy);border-radius:0 var(--radius-m) var(--radius-m) 0;
  padding:20px 24px;margin:0 0 1.6rem;font-size:1.05rem;color:var(--ink)}
.answerbox p:last-child{margin-bottom:0}

.costlist,.assetlist{list-style:none;padding:0;margin:0 0 1.4rem}
.costlist li{padding:16px 0 16px 44px;position:relative;border-bottom:1px solid var(--line)}
.assetlist li{padding:14px 0 14px 40px;position:relative;border-bottom:1px solid var(--line)}
.costlist li:last-child,.assetlist li:last-child{border-bottom:none}
.costlist .x{position:absolute;left:2px;top:17px;width:28px;height:28px;border-radius:50%;
  background:var(--warn-bg);color:var(--warn);display:flex;align-items:center;justify-content:center;font-weight:700}
.assetlist .c{position:absolute;left:2px;top:15px;width:26px;height:26px;border-radius:50%;
  background:var(--ok-bg);color:var(--ok);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem}
.costlist b,.assetlist b{color:var(--ink)}

/* Nummerierte Ablaufliste der Artikelseiten */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 1.4rem}
ol.steps li{position:relative;padding:0 0 22px 52px}
ol.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;
  width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:1rem}
ol.steps li:not(:last-child)::after{content:"";position:absolute;left:16px;top:38px;bottom:2px;width:2px;background:var(--line)}
ol.steps b{display:block;color:var(--ink);margin-bottom:3px}

/* Betriebsprofil (Nischenseiten) */
.profil{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-l);padding:6px 26px;margin:1.2rem 0 1.6rem}
.profil dl{margin:0}
.profil div{display:grid;grid-template-columns:200px 1fr;gap:6px 20px;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.profil div:last-child{border-bottom:none}
.profil dt{font-weight:600;color:var(--ink)}
.profil dd{margin:0}
@media(max-width:620px){.profil div{grid-template-columns:1fr;gap:2px}}

/* Vergleichsrechnung (Betriebsaufgabe) */
.calcbox{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-l);padding:26px;
  margin:1.4rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.calcbox table{border-collapse:collapse;width:100%;min-width:520px;font-size:.96rem}
.calcbox th,.calcbox td{padding:10px 8px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.calcbox thead th{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.calcbox td.num{text-align:right;font-variant-numeric:tabular-nums}
.calcbox tr.sum td{border-top:2px solid var(--ink);border-bottom:none;font-weight:700;color:var(--ink)}
@media(max-width:620px){
  .calcbox{padding:0;border:none;background:transparent;overflow:visible}
  .calcbox table{display:block;min-width:0}
  .calcbox thead{display:none}
  .calcbox tbody{display:block}
  .calcbox tbody tr{display:block;background:var(--white);border:1px solid var(--line);
    border-radius:var(--radius-m);padding:12px 16px;margin-bottom:12px}
  .calcbox tbody td{display:block;border:none;padding:6px 0;text-align:left}
  .calcbox td.crit{font-weight:600;color:var(--ink);padding:0 0 8px;font-size:1rem}
  .calcbox td.num{text-align:left}
  .calcbox td[data-label]::before{content:attr(data-label);display:block;font-size:.78rem;
    font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:1px}
  .calcbox tr.sum{background:var(--navy-soft);border-color:var(--navy)}
  .calcbox tr.sum td{border-top:none}
}

/* Verkäuflichkeits-Check */
.check{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:8px 26px;margin:1.6rem 0}
.q{padding:22px 0;border-bottom:1px solid var(--line)}
.q:last-of-type{border-bottom:none}
.q .qt{font-weight:600;color:var(--ink);margin:0 0 4px;font-size:1.04rem}
.q .qh{font-size:.9rem;color:var(--muted);margin:0 0 12px}
.opts{display:flex;gap:10px}
.opts button{flex:0 0 auto;min-width:86px;min-height:44px;padding:11px 20px;border-radius:var(--radius-s);
  font-size:1rem;font-weight:600;font-family:var(--sans);cursor:pointer;
  border:1.5px solid #C4CFDA;background:#fff;color:var(--ink)}
.opts button[aria-pressed="true"].ja{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.opts button[aria-pressed="true"].nein{background:#F3F5F7;border-color:var(--muted);color:var(--muted)}
.result{display:none;margin-top:4px;padding:24px;border-radius:var(--radius-l);
  background:var(--navy-soft);border-left:3px solid var(--navy)}
.result.show{display:block}
.result h2{margin-bottom:.35em;font-size:1.3rem}
.result p{margin-bottom:.8rem}
.result .btn{margin-top:4px}

/* Abschlussband auf Artikelseiten – jede Seite endet damit, kein Dead End. */
.ctaband{background:var(--navy);border-radius:12px;padding:34px;color:var(--on-navy);margin:2rem 0 0}
.ctaband h2{color:#fff;margin-bottom:.4em}
.ctaband p{color:var(--on-navy-dim)}
.ctaband .btn{background:#fff;color:var(--navy)}
.ctaband .btn:hover{background:var(--navy-soft)}
.ctaband .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.ctaband .btn-ghost:hover{background:rgba(255,255,255,.1)}

/* Verwandte Seiten – hält den Themen-Cluster zusammen, verhindert Sackgassen */
.related{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:20px 24px;margin:1.8rem 0 0}
.related b{color:var(--ink);display:block;margin-bottom:8px}
.related ul{margin:0;padding-left:1.1rem}
.related li{margin-bottom:4px}

/* --- 9 Rechtsseiten und 404 ---------------------------------------------- */
body.page-legal main{padding-block:48px 64px}
body.page-legal h2{margin:2rem 0 .5rem}
body.page-404{display:flex;flex-direction:column;min-height:100vh}
body.page-404 main{flex:1;display:flex;align-items:center;padding-block:64px}
body.page-404 .wrap{width:100%}

/* --- 10 Druck ------------------------------------------------------------
   Inhaber drucken diese Seiten aus und legen sie ihrem Steuerberater vor. */
@media print{
  :root{--section-pad:0}
  body{background:#fff;color:#000;font-size:11pt;padding-bottom:0}
  header.site,.callbar,.mainnav,.btn,.btn-row,.skip,.hero-quote,form,.opts{display:none!important}
  /* Die Wortmarke bleibt im Ausdruck stehen. Diese Zielgruppe druckt und reicht
     das Blatt weiter – an den Steuerberater, an die Familie, an den Anwalt.
     Ohne Marke ist das ein anonymes Blatt Papier. Navigation und Kopf-Telefon
     bleiben aus, die Rufnummer steht ohnehin in der Fusszeile. */
  header.site{display:block!important;position:static;border:0;border-bottom:.5pt solid #999;
    padding:0 0 6pt;margin-bottom:10pt;background:none;backdrop-filter:none}
  /* Gleiche Breite und gleicher Einzug wie der Inhalt darunter, sonst steht die
     Marke am Blattrand und der Text eingerückt. */
  header.site .inner{display:flex;align-items:baseline;justify-content:space-between;
    gap:12pt;min-height:0;max-width:var(--wrap);padding:0 22px}
  header.site .mainnav{display:none!important}
  .logo{min-height:0;padding:0}
  .logo-type{font-size:15pt;color:#000}
  /* Die Rufnummer bleibt: Ein weitergereichter Ausdruck soll anrufbar sein. */
  .tel a{font-size:11pt;color:#000;min-height:0;padding:0}
  .tel small{display:none}
  section{padding:12pt 0;break-inside:avoid}
  .bg-navy,.ctaband,footer.site{background:#fff!important;color:#000!important;border:1pt solid #999}
  .bg-navy h2,.bg-navy h3,.ctaband h2,.paylist b,.safety b,footer.site .fname{color:#000!important}
  .bg-navy p,.paylist span.t,.ctaband p,footer.site{color:#333!important}
  .card,.step,.calc,.formcard,.tablewrap{box-shadow:none!important;break-inside:avoid}
  .tablewrap table{min-width:0}
  a{color:#000;text-decoration:underline}
  /* Linkziele sichtbar machen, damit der Ausdruck für sich steht */
  main a[href^="http"]::after,main a[href^="/"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .faq[open] p,details p{display:block!important}
  details{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
}

/* --- 10a Hilfsklassen -----------------------------------------------------
   Bewusst klein gehalten. Sie ersetzen die früheren style="…"-Attribute.
   Neue Hilfsklasse nur, wenn dieselbe Angabe an mindestens zwei Stellen steht. */
.pt0{padding-top:0}
.m0{margin:0}
.mb-1{margin-bottom:4px}
.mt-1{margin-top:16px}
.mt-2{margin-top:2rem}
.mt-3{margin-top:2.5rem}
.ta-right{text-align:right}
.ta-center{text-align:center}
.pad-xl{padding:56px 22px}
.mw-780{max-width:780px}
.mw-820{max-width:820px}
.mw-75ch{max-width:75ch}
.no-underline{text-decoration:none}
.muted{color:var(--muted)}
.muted-small{color:var(--muted);font-size:.9rem}
.prose{font-family:var(--serif);font-size:1.15rem;line-height:1.75}
.bg-white-top{background:var(--white);border-top:1px solid var(--line)}
.on-navy-dim{color:var(--on-navy-dim)}
.on-navy-faint{color:var(--on-navy-faint)}

.disclaim-plain{font-size:.87rem;color:var(--muted);margin:16px 0 0;border:none;padding-top:14px;max-width:75ch}

/* --- 11 Bewegungsreduktion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important;scroll-behavior:auto!important}
  .card:hover,.step:hover{transform:none}
}

/* --- Rechtsseiten: weiterführende Links im Fuß ---------------------------- */
.legal-nav{display:inline-block;margin-top:8px}

/* --- Kontaktformular: Zustände ------------------------------------------- */
/* Honigtopf gegen Bots: für Menschen unsichtbar, für Screenreader ausgeblendet,
   aber nicht display:none – manche Bots werten das aus. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formstatus{margin:12px 0 0;font-weight:600;font-size:.97rem;color:var(--navy-mid)}
.formstatus.fehler{color:var(--error)}

.formdanke{text-align:center;padding:14px 4px}
.formdanke h3{font-family:var(--serif);font-size:1.35rem;color:var(--ink);margin:0 0 .5em}
.formdanke p{margin:0;color:var(--body)}
.formdanke::before{content:"✓";display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin:0 auto 16px;border-radius:50%;
  background:var(--ok-bg,#E8F1E9);color:var(--ok,#2F6B47);font-size:1.6rem;font-weight:700}

button[type=submit][disabled]{opacity:.6;cursor:progress}

/* Rückfallweg, wenn der Versand über den Server nicht durchgeht. Ruhig gehalten:
   Das ist keine Fehlermeldung, sondern ein zweiter Weg – der Ton soll das tragen. */
.formausweich{margin:18px 0 0;padding:20px 22px;border-radius:var(--radius-m);
  background:var(--navy-soft);border-left:3px solid var(--navy)}
.formausweich h3{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin:0 0 .45em}
.formausweich p{margin:0 0 .8em;color:var(--body);font-size:.95rem}
.ausweich-knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ausweich-knoepfe .btn{font-size:.93rem;padding:11px 18px}
.formausweich .btn-ghost{background:#fff}
.ausweich-fuss{margin:0;font-size:.9rem}

/* --- Handschriftliche Unterschriften --------------------------------------
   Dieselben Unterschriften stehen auf den Briefen. Wer nach dem Brief die
   Seite aufruft, erkennt sie wieder – das ist der Zweck, nicht die Zierde. */
.signaturen{display:flex;flex-wrap:wrap;gap:14px 42px;margin:20px 0 0}
.signaturen figure{margin:0}
.signaturen img{width:200px;height:auto;opacity:.92}
.signaturen figcaption{margin-top:-2px;font-size:.92rem;color:var(--muted)}
@media(max-width:600px){
  /* Nebeneinander halten: zwei Unterschriften untereinander lesen sich wie
     zwei getrennte Aussagen, nebeneinander wie eine gemeinsame. */
  .signaturen{gap:10px 18px;flex-wrap:nowrap}
  .signaturen img{width:138px}
  .signaturen figcaption{font-size:.86rem}
}

/* --- Echte Fotos ----------------------------------------------------------
   Ersetzen ab Freitag das Zitat-Panel im Hero und die Monogramm-Karten.
   Feste Seitenverhältnisse, damit beim Laden nichts springt. */
.hero-foto{margin:0;border-radius:var(--radius-l,10px);overflow:hidden;
  box-shadow:0 14px 40px rgba(13,37,64,.18)}
.hero-foto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}

.portraet{margin:0}
.portraet img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radius-m,8px);display:block}
.portraet figcaption{margin-top:8px;font-weight:600;color:var(--ink);font-size:1rem}
.portraet figcaption span{display:block;font-weight:400;color:var(--muted);font-size:.88rem}