/* AgentFranz — Marketing-Website (agentfranz.ai).
 * Aufbau, Abstaende und Texte stammen unveraendert aus dem Entwurf in
 * Claude Design. Farben und Schriften folgen dem aktiven Novamira-
 * Designsystem "agent-franz" (Ferdinands Entscheidung 2026-08-26):
 * Markenschriften statt System-Stack, Franz Navy statt Slate.
 *
 * Zu den Schriftstaerken: lokal liegen Playfair 700, Source Serif 400 und
 * Source Sans 400/600. Der Entwurf verlangte 550/600/650 — diese Werte sind
 * auf die vorhandenen Schnitte gerundet, damit der Browser nichts kuenstlich
 * verbreitert.
 */

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('/wp-content/uploads/agentfranz-fonts/playfair-700.woff2') format('woff2');}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/uploads/agentfranz-fonts/source-serif-400.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/uploads/agentfranz-fonts/source-sans-400.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('/wp-content/uploads/agentfranz-fonts/source-sans-600.woff2') format('woff2');}

:root{
  /* Papier-Fassung (Vorgabe) */
  --bg:#FFFFFF; --bg-section:#EFF4F8; --card:#FFFFFF;
  /* --muted-2 war bis GH #664 #8AA4BD, der Muted-Wert des dunklen Modus, und
     kam als Textfarbe auf 2,6 statt 4,5. Der neue Wert behaelt Farbton und
     Rolle (heller und blauer als --muted). Die Kontraste haelt
     scripts/website-contrast.test.ts fest, nicht dieser Kommentar. */
  --fg:#1B232C; --fg-strong:#1A3C5D; --muted:#586571; --muted-2:#51718F;
  --border:#E2E7EC; --border-2:#8AA4BD;
  --primary:#112233; --primary-h:#1A3C5D; --primary-fg:#FFFFFF; --on-primary-soft:rgba(255,255,255,.78);
  --accent:#E0A526;
  --ring:rgba(17,34,51,.18);
  --font-display:'Playfair Display',Georgia,serif;
  --font-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-sans:'Source Sans 3',-apple-system,system-ui,sans-serif;
  --font-mono:'Source Sans 3',-apple-system,system-ui,sans-serif;
  --radius:10px; --radius-sm:7px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(17,34,51,.05),0 1px 1px rgba(17,34,51,.04);
  /* Buchcover. --book-rim ist die Kante AUF dem Bild, nicht daneben: das
     Cover ist dunkelblau (#29374D am Rand) und steht im dunklen Modus auf
     1,1 gegen --bg-section, also ohne sichtbare Kante. Im hellen Modus
     traegt das Cover selbst (10,9 bis 12,0), der Saum darf dort unauffaellig
     sein. Die Zahlen haelt scripts/website-contrast.test.ts fest. */
  --book-rim:#E2E7EC;
  --shadow-book:0 14px 30px -14px rgba(17,34,51,.30),0 3px 8px -4px rgba(17,34,51,.18);
  --maxw:52rem; --maxw-wide:74rem; --tracking-tight:-.012em;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#112233; --bg-section:#15324C; --card:#15324C;
  --fg:#DCE6EF; --fg-strong:#FFFFFF; --muted:#8AA4BD; --muted-2:#8AA4BD;
  --border:rgba(138,164,189,.28); --border-2:#8AA4BD;
  --primary:#DCE6EF; --primary-h:#FFFFFF; --primary-fg:#112233; --on-primary-soft:rgba(17,34,51,.62);
  --ring:rgba(220,230,239,.20);
  --shadow-card:0 1px 2px rgba(0,0,0,.5),0 1px 1px rgba(0,0,0,.4);
  --book-rim:#8AA4BD;
  --shadow-book:0 18px 38px -16px rgba(0,0,0,.65),0 4px 10px -5px rgba(0,0,0,.5);
}}
[data-theme="dark"]{
  --bg:#112233; --bg-section:#15324C; --card:#15324C;
  --fg:#DCE6EF; --fg-strong:#FFFFFF; --muted:#8AA4BD; --muted-2:#8AA4BD;
  --border:rgba(138,164,189,.28); --border-2:#8AA4BD;
  --primary:#DCE6EF; --primary-h:#FFFFFF; --primary-fg:#112233; --on-primary-soft:rgba(17,34,51,.62);
  --ring:rgba(220,230,239,.20);
  --shadow-card:0 1px 2px rgba(0,0,0,.5),0 1px 1px rgba(0,0,0,.4);
  --book-rim:#8AA4BD;
  --shadow-book:0 18px 38px -16px rgba(0,0,0,.65),0 4px 10px -5px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{font-family:var(--font-serif);color:var(--fg);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;cursor:pointer}
strong{color:var(--fg-strong);font-weight:600}
::selection{background:var(--ring)}
a{color:var(--fg-strong);text-decoration-color:var(--border-2);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px}
.mono{font-family:var(--font-mono)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--card);border:1px solid var(--border);padding:10px 14px;border-radius:8px}

/* ---- Shell ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap--wide{max-width:var(--maxw-wide)}
.mhead{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px)}
.mhead__in{max-width:var(--maxw-wide);margin:0 auto;min-height:66px;padding:0 24px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
/* Offizielle horizontale Sperrung (Portraet + Schriftzug in einem Bild),
 * dieselben Dateien wie in der Anwendung: public/brand/agent-franz-lockup*.png.
 * Die CI liefert sie nur in Navy; fuer die dunkle Flaeche gibt es eine zweite,
 * hell eingefaerbte Fassung. Getauscht wird nach Systemeinstellung UND nach
 * ausdruecklicher Wahl ueber den Schalter. Kein Filter-Trick mehr.
 * Verhaeltnis 478:240, die Hoehe steuert, die Breite folgt. */
body .brand .brand__lockup{height:44px!important;width:auto!important;max-width:none}
body .mfoot .brand .brand__lockup{height:40px!important}
body .brand .brand__lockup--light{display:block}
body .brand .brand__lockup--dark{display:none}
[data-theme="dark"] body .brand .brand__lockup--light,
body[data-af-theme="dark"] .brand .brand__lockup--light{display:none}
[data-theme="dark"] body .brand .brand__lockup--dark,
body[data-af-theme="dark"] .brand .brand__lockup--dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body .brand .brand__lockup--light{display:none}
  :root:not([data-theme="light"]) body .brand .brand__lockup--dark{display:block}
}
/* Der Markenblock darf den Kopf nicht sprengen */
.brand{flex:0 0 auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:12px;min-width:0}
.nav a{font-family:var(--font-sans);font-size:14.5px;color:var(--muted);text-decoration:none;padding:9px 11px;border-radius:7px;white-space:nowrap}
.nav a:hover{color:var(--fg-strong);background:var(--bg-section)}
.nav a[aria-current="page"]{color:var(--fg-strong);font-weight:600}
.mhead__right{margin-left:auto;display:flex;align-items:center;gap:14px}
.mhead__link{font-family:var(--font-sans);font-size:14.5px;color:var(--muted);text-decoration:none;padding:9px 4px}
.mhead__link:hover{color:var(--fg-strong)}
.iconbtn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--muted)}
.iconbtn:hover{color:var(--fg-strong)}
.navtoggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--fg)}

/* Kein margin-top. Die 8 px legten zwischen dem letzten Abschnitt und dem Fuss
   einen Streifen Seitenhintergrund frei. Wenn der letzte Abschnitt ein
   --alt-Abschnitt ist, hat er DIESELBE Farbe wie der Fuss, und dann sieht man
   zwei gleichfarbige Flaechen mit einem dunklen Spalt dazwischen. Am
   10.09.2026 auf der Startseite Zeile fuer Zeile abgetastet: rgb(21,50,76),
   dann 7 px rgb(17,34,51), dann wieder rgb(21,50,76).
   Abgegrenzt wird der Fuss durch seine Haarlinie oben, dafuer braucht es
   keinen Abstand. */
.mfoot{border-top:1px solid var(--border);background:var(--bg-section)}
.mfoot__in{max-width:var(--maxw-wide);margin:0 auto;padding:40px 24px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.mfoot h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:500;margin-bottom:12px}
.mfoot ul{display:flex;flex-direction:column;gap:9px}
.mfoot a{font-family:var(--font-sans);font-size:14px;color:var(--muted);text-decoration:none}
.mfoot a:hover{color:var(--accent)}
.mfoot__note{font-family:var(--font-serif);font-size:13.5px;color:var(--muted);max-width:34ch;margin-top:12px;text-wrap:pretty}
.mfoot__bar{max-width:var(--maxw-wide);margin:0 auto;padding:16px 24px 34px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12.5px;color:var(--muted-2)}

/* ---- Type ---- */
.overline{display:block;font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.h1{font-family:var(--font-display);font-size:clamp(34px,5vw,54px);line-height:1.05;font-weight:700;letter-spacing:var(--tracking-tight);color:var(--fg-strong);text-wrap:balance}
.h2{font-family:var(--font-display);font-size:clamp(23px,2.8vw,31px);line-height:1.15;font-weight:700;letter-spacing:-.016em;color:var(--fg-strong);text-wrap:balance}
.h3{font-family:var(--font-sans);font-size:17px;font-weight:600;color:var(--fg-strong);letter-spacing:-.008em}
.lead{font-family:var(--font-serif);font-size:clamp(17px,1.9vw,20px);line-height:1.5;color:var(--muted);text-wrap:pretty}
.body{font-family:var(--font-serif);font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.sub{font-size:14px;color:var(--muted)}

/* ---- Buttons ---- */
.btn{font-family:var(--font-sans);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid transparent;border-radius:var(--radius-sm);font-size:15px;font-weight:600;text-decoration:none;line-height:1;padding:13px 22px;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn--primary{background:var(--primary);color:var(--primary-fg)}
.btn--primary:hover{background:var(--primary-h)}
.btn--ghost{border-color:var(--border-2);color:var(--fg-strong);background:transparent}
.btn--ghost:hover{background:var(--bg-section)}
.btn--sm{min-height:40px;padding:11px 16px;font-size:14px}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.tlink{font-family:var(--font-sans);font-size:15px;color:var(--fg-strong);text-decoration:none;font-weight:600}
.tlink:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pill{font-family:var(--font-sans);display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-section);font-size:12.5px;color:var(--fg)}
.pill svg{width:13px;height:13px;color:var(--muted)}
/* Echte Liste statt div/span: drei gleichrangige Aussagen sind eine Aufzaehlung.
   Kapitel 18 des eigenen Handbuchs verlangt genau das ('echte HTML-Listen,
   keine div-Container aus dem Page-Builder'), und bis zum 10.09.2026 stand hier
   das Gegenteil. list-style/margin/padding zuruecksetzen, weil ul Vorgaben
   mitbringt; role=list, weil display:flex die Listensemantik in Safari mit
   VoiceOver wieder entfernt. */
.pills{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0}

/* ---- Sections ---- */
.section{padding:74px 0}
.section--alt{background:var(--bg-section);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section__head{max-width:60ch;margin-bottom:36px}
.section__head .h2{margin-bottom:12px}
/* Kopf ohne Einleitungssatz: der volle Abstand war fuer zwei Zeilen gedacht. */
.section__head--solo{margin-top:56px;margin-bottom:0}
/* Kopf, der eng an seinem Inhalt sitzen soll. Der Entwurf trug das als
   style="margin-bottom:0" bzw. ":22px" — der Wandler verwirft Inline-Stile. */
.section__head--flush{margin-bottom:0}
.section__head--near{margin-bottom:22px}

.hero{padding-block:78px 62px}
.hero .overline{margin-bottom:20px}
.hero .h1{margin-bottom:20px}
.hero .lead{max-width:62ch;margin-bottom:32px}
.hero .pills{margin-top:36px}
/* Datums-/Standzeile: dieselbe Behandlung wie die Marke oben im Aufmacher,
   aber in der starken Textfarbe — sie soll auffallen, nicht nebenherlaufen. */
.stand{display:block;font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-strong)}

/* ---- Rechtstexte: Impressum und Datenschutzerklaerung ----
   Bis zum 29.08.2026 lagen die beiden auf der Vorlage der Baustellenseite,
   ohne Kopf und ohne Fuss. Wer dort landete, kam nur ueber den Zurueck-Knopf
   des Browsers wieder heraus. Seither sind es normale Website-Seiten; ihre
   Textauszeichnung ist deshalb hierher gewandert und benutzt die Farb- und
   Schrifttoken der Website statt der eigenen der Marken-Seiten. */
/* Die Breite braucht Gewicht. Elementor setzt auf jeden Baustein
   max-width:100% ueber ".e-con.e-con > .e-con-inner > .elementor-widget", also
   vier Klassen; eine schlichte .af-legal-Regel verpufft dagegen, und die
   Klasse .wrap am Behaelter verliert gegen Elementors Voll-Breite. Deshalb
   hier mit Element-Vorspann. Zwei Anlaeufe gebraucht, gemessen 29.08.2026.
   Die 52rem sind dieselbe Breite wie .wrap auf allen anderen Seiten, damit die
   linke Kante fluchtet; die Zeilen selbst bleiben kuerzer und damit lesbar. */
html body .e-con.e-con .elementor-widget.af-legal{width:100%;max-width:52rem;margin-inline:auto;padding:64px 24px 8px}
.af-legal > *{max-width:44rem}
.af-legal h1{font-family:var(--font-display);font-size:clamp(28px,4vw,40px);line-height:1.1;font-weight:700;letter-spacing:var(--tracking-tight);color:var(--fg-strong);margin:0 0 8px}
.af-legal h2{font-family:var(--font-display);font-size:clamp(20px,2.4vw,25px);line-height:1.2;font-weight:700;color:var(--fg-strong);margin:44px 0 12px}
.af-legal h3{font-family:var(--font-sans);font-size:16px;font-weight:600;color:var(--fg-strong);margin:26px 0 6px}
.af-legal p,.af-legal li{font-size:16px;line-height:1.65;color:var(--muted);text-wrap:pretty}
.af-legal ul{margin:0 0 16px;padding-left:1.3rem}
.af-legal li{margin-bottom:6px}
.af-legal a{color:var(--fg-strong)}
.af-legal strong,.af-legal b{color:var(--fg-strong);font-weight:600}
.af-legal .stand{margin-bottom:34px}
/* Die AGB-Seite (Beitrag 213) traegt die Klasse oben NICHT. Impressum und
   Datenschutzerklaerung sind je EIN text-editor-Baustein mit .af-legal; die AGB
   entstanden aus 151 einzelnen Bausteinen, weil die Paragraphen als eigene
   <h2> gebraucht wurden. Ihre Absaetze erben deshalb keine Farbe und standen im
   Dunkelmodus auf rgb(27,35,44) gegen einen Grund von rgb(17,34,51): Kontrast
   1,02, der Text war schlicht unsichtbar. Am 08.09.2026 am ausgelieferten
   Dokument gemessen, aufgefallen ist es Ferdinand am Bildschirm.
   Die Klasse an den Container zu haengen loest es nicht: Elementor rendert
   _css_classes an Bausteinen, an diesem Container nicht (nachgemessen, das
   ausgelieferte div trug nur seine Struktur-Klassen). Deshalb hier eine auf die
   Seite begrenzte Regel, die dieselben Token benutzt wie .af-legal daneben.
   Die Breiten- und Polsterungs-Regel bleibt bewusst aussen vor: sie ist fuer
   EINEN Baustein bemessen und wuerde hier 127 Absaetze je 64px auseinander
   treiben. */
body.page-id-213 .elementor-widget-text-editor p,
body.page-id-213 .elementor-widget-text-editor li{color:var(--muted)}
body.page-id-213 .elementor-widget-text-editor a,
body.page-id-213 .elementor-widget-text-editor strong,
body.page-id-213 .elementor-widget-text-editor b{color:var(--fg-strong)}
/* Dieselbe Herkunft, zweiter Nachtrag vom 08.09.2026: die Schriftgroessen
   fielen ebenfalls aus, weil sie an denselben .af-legal-Regeln haengen.
   Gemessen gegen die Datenschutzerklaerung: Absatz 20,7px statt 16px,
   Zwischenueberschrift 28,1px statt 24,1px, kleine Ueberschrift 17px statt
   16px. Der Fliesstext war damit rund 29 Prozent groesser als auf den zwei
   anderen Rechtsseiten. Die Werte hier sind aus .af-legal uebernommen, nicht
   neu erfunden; wer sie dort aendert, aendert sie auch hier.
   Die Klasse sitzt am BAUSTEIN, nicht am Ueberschrifts-Element darin: Elementor
   schreibt _css_classes auf den Widget-Wrapper. Ein Selektor der Form
   ".elementor-widget-heading .h2" trifft deshalb nichts; einmal danebengegriffen,
   am 08.09.2026 an der ausgelieferten Seite bemerkt. */
body.page-id-213 .elementor-widget-text-editor p,
body.page-id-213 .elementor-widget-text-editor li{font-size:16px;line-height:1.65}
body.page-id-213 .elementor-widget.h2{font-size:clamp(20px,2.4vw,25px);line-height:1.2}
body.page-id-213 .elementor-widget.h3{font-size:16px;line-height:1.4}
/* Aufmacher ohne Vorspann: die untere Polsterung ist fuer Ueberschrift PLUS
   Absatz bemessen und reisst sonst ein Loch. Gemessen: 156px bis zur naechsten
   Ueberschrift, mit dieser Klasse 78px. */
.hero--kurz{padding-block-end:8px}
.hero--kurz .h1{margin-bottom:0}

/* ---- Hairline-Liste (Module, Argumente) ---- */
.rows{border-top:1px solid var(--border)}
.rows>li{border-bottom:1px solid var(--border);display:grid;grid-template-columns:44px 1fr;gap:20px;padding:24px 0;align-items:start}
.rows__ic{width:38px;height:38px;border-radius:10px;background:var(--bg-section);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.rows__ic svg{width:18px;height:18px;color:var(--fg-strong)}
.rows__num{font-family:var(--font-mono);font-size:12px;color:var(--muted-2);padding-top:4px}
.rows h3{margin-bottom:6px}
.rows p{font-family:var(--font-serif);font-size:15.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}

/* ---- Flow (Messen -> Verbessern -> Belegen) ---- */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.flow > li{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-card)}
/* Haken-Liste in einer Karte: enger und etwas kleiner als im Fliesztext. */
.flow .checks{margin-top:0;gap:10px}
.flow .checks li{grid-template-columns:18px 1fr;gap:10px}
.flow .checks svg{width:15px;height:15px}
.flow .checks span{font-size:14.5px;line-height:1.5}
.flow__k{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.flow p{font-size:15px;line-height:1.5;color:var(--fg)}

/* ---- Modul-Block (Produktseite) ---- */
.module{border-top:1px solid var(--border);padding:40px 0;display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:36px}
.module__label .overline{margin-bottom:10px}
.module__label .h2{font-size:clamp(21px,2.3vw,25px)}
.dl{display:flex;flex-direction:column;gap:18px}
.dl dt{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);margin-bottom:5px}
.dl dd{margin:0;font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.dl dd strong{color:var(--fg-strong)}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{font-family:var(--font-sans);list-style:none;cursor:pointer;display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding:20px 0;font-size:16.5px;font-weight:600;color:var(--fg-strong);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
/* Aufklappzeiger. Vorher waren das zwei Rahmenlinien eines um 45 Grad gedrehten
   Quadrats. Dessen Enden sind schraeg abgeschnitten, und bei 1,6 px Staerke sieht
   das Ergebnis nach einem Bruchstueck aus, nicht nach einem Zeichen. Jetzt ein
   richtiger Winkel mit runden Enden, als Maske statt als Bild: so folgt die Farbe
   dem Thema, statt fest im Bild zu stecken. */
.faq summary::after{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:2px;border:0;background-color:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/18px 18px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/18px 18px no-repeat;transition:transform .2s ease,background-color .2s ease}
.faq summary:hover::after{background-color:var(--fg-strong)}
.faq details[open] summary::after{transform:rotate(180deg)}
/* Der Zeiger stand direkt hinter dem Fragetext statt am rechten Rand: Elementors
   Widget-Regel schlaegt unser justify-content mit zwei Klassen gegen eine. Statt
   dagegen anzuschreiben, wird Elementors EIGENE Variable gefuellt — sie erbt in
   die Titelzeile und kostet keinen Spezifitaetskampf. */
/* Und der Rahmen um die aufgeklappte Antwort. Elementor zeichnet dort ein
   geschlossenes Rechteck mit eckigen Ecken, das mit dem sonst nur aus
   Haarlinien bestehenden Aufbau bricht. Auch das haengt an einer eigenen
   Variable, also null statt einer Gegenregel. Die Elementor-Regel steckt
   ohnehin in :where() und hat damit gar keine Spezifitaet. */
.faq{--n-accordion-title-justify-content:space-between;--n-accordion-border-width:0}
/* Nur Radius und Abstand, KEINE eigene Farbe. Die globale :focus-visible-Regel
   weiter oben liefert den Rahmen in --primary; hier wird lediglich die Ecke
   gerundet und der Abstand vergroessert, damit der Rahmen nicht am Text klebt.
   Eine eigene Farbe stand hier kurzzeitig drin und war ein Fehler: --muted-2
   kam damals (vor GH #664) auf Weiss nur auf 2,584 und auf dem Abschnittsgrund
   auf 2,334, waehrend WCAG 1.4.11 fuer einen Fokusanzeiger 3,0 verlangt.
   --primary liefert 16,148.
   An einem Element, das nur per Tastatur bedient wird, ist der Rahmen die
   einzige Anzeige — dort leiser zu werden kostet die Bedienbarkeit. */
.faq summary:focus-visible{outline-offset:4px;border-radius:8px}
.faq p{font-family:var(--font-serif);font-size:15.5px;line-height:1.62;color:var(--muted);padding:0 0 22px;max-width:70ch;text-wrap:pretty}

/* ---- Personen ---- */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.person{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-card)}
/* Echtes Portraet an der Stelle des Platzhalters. Quadratisch und oben
   ausgerichtet, damit die Gesichter gleich sitzen, obwohl das eine Bild
   quadratisch und das andere hochkant vorliegt. */
.person__foto{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top;border-radius:8px;margin-bottom:18px;display:block;background:var(--bg-section)}
.person__ph{aspect-ratio:4/3;border-radius:8px;background:var(--bg-section);border:1px dashed var(--border-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted-2);font-size:12.5px;margin-bottom:18px;text-align:center;padding:12px}
.person__ph svg{width:22px;height:22px}
.person h3{margin-bottom:8px}
.person p{font-size:15px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.person__links{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font-size:14px}
.person__links a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:40px}
.person__links a:hover{color:var(--fg-strong)}
.person__links svg{width:14px;height:14px}

/* ---- Notiz / Vertraulichkeit ---- */
.note{background:var(--bg-section);border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.note .h3{margin-bottom:6px}
.checks{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.checks li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start}
.checks svg{width:18px;height:18px;color:var(--muted);margin-top:2px}
.checks span{font-size:15.5px;line-height:1.55;color:var(--fg);text-wrap:pretty}
.checks b{font-weight:600;color:var(--fg-strong)}

/* ---- CTA-Band ---- */
.cta{padding-block:72px;text-align:center}
.cta .h2{margin-bottom:12px}
.cta .body{margin:0 auto 26px;max-width:52ch}
.cta .ctarow{justify-content:center}

/* ---- Buch-Block ---- */
.book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,16rem);gap:36px;align-items:start}
.book__cover{aspect-ratio:3/4;border-radius:8px;background:var(--bg-section);border:1px dashed var(--border-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted-2);font-size:12.5px;text-align:center;padding:16px}
.book__cover svg{width:22px;height:22px}
/* Das echte Cover. Eigenes Seitenverhaeltnis, deshalb keine feste Vorgabe
   wie beim Platzhalter — sonst wuerde beschnitten. */
.book__img{display:block;width:100%;height:auto;border-radius:8px;border:0;
  box-shadow:0 0 0 1px var(--book-rim),var(--shadow-book)}
/* Das Cover als Verweis auf die Bestellseite. Keine eigene Ringfarbe im
   :focus-visible — eine gesetzte Farbe hat den Kontrast des Standardrings
   schon einmal von 16,1 auf 2,6 gedrueckt (Review 25.09.2026). */
.book__link{display:block;border-radius:8px}
.book__link:focus-visible{outline-offset:4px}
/* Aufmacher mit Cover: Ueberschrift und Vorspann links, Buch rechts. Pillen,
   Knopfreihe und "Weiterlesen" laufen darunter ueber die volle Breite. Sonst
   faellt die Knopfreihe auf zwei Zeilen: sie braucht rund 700 px, und jede
   Coverspalte laesst weniger als 600 uebrig (gemessen 27.09.2026 bei 10 bis
   15 rem Coverbreite, alle zweizeilig). */
.hero--book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,13rem);
  column-gap:40px;row-gap:0;align-items:start}
.hero--book > .pills,.hero--book > .ctarow,.hero--book > .bk-resume{grid-column:1 / -1}
/* Unterkante des Covers buendig mit dem letzten Absatz daneben. Ohne das
   haengt es in der Luft: der Textblock ist hoeher, und die Luecke darunter
   liest sich wie ein Versehen. Bezahlt wird es mit Leerraum OBEN, 57 px auf
   /handbuch/ und 59 auf /buch-bestellen/ (gemessen 27.09.2026). Ein voll
   gefuelltes Rechteck gaebe es nur ueber ein breiteres Cover, und das drueckt
   die Ueberschrift wieder auf drei Zeilen.
   Drei Faelle, deshalb zwei Selektoren: auf /handbuch/ ist das Rasterfeld der
   Verweis um das Bild, auf der ausgelieferten /buch-bestellen/ Elementors
   Baustein-Huelle, und im Entwurf unter seiten/ das Bild selbst. Ohne den
   ersten Selektor blieb der Entwurf unbuendig, waehrend die Live-Seite stimmte
   (am 27.09.2026 genau so vorgefunden). */
.hero--book > .book__img,
.hero--book > :has(.book__img){align-self:end}
/* Der Abstand unter dem Vorspann faellt nur weg, wo er das letzte Element der
   Spalte ist, also wenn das Stand-Datum darunter ueber die volle Breite
   laeuft. Auf der Bestellseite folgt noch der Hinweis, dort bleibt er. */
.hero--book > div > .lead:last-child{margin-bottom:0}
.hero--book > .stand{grid-column:1 / -1;margin-top:26px}

/* ---- Preistabelle ---- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptable{width:100%;border-collapse:collapse;min-width:58rem;text-align:left}
.ptable th,.ptable td{padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:top;font-size:14.5px;font-weight:400;color:var(--fg)}
.ptable thead th{border-bottom:1px solid var(--border-2);vertical-align:bottom}
.ptable .rowh{color:var(--fg-strong);font-weight:550;width:16rem;position:sticky;left:0;background:var(--bg);z-index:1}
.section--alt .ptable .rowh{background:var(--bg-section)}
.ptable tbody tr:hover td{background:color-mix(in srgb,var(--bg-section) 60%,transparent)}
.ptable .num{font-variant-numeric:tabular-nums}
.ptable .muted{color:var(--muted)}
/* Tarife als Karten statt als Vergleichstabelle. Fuenf Kaesten nebeneinander;
   Name, Preis, zwei Kennzahlen, Knopf. Die Kennzahlen sind in allen Karten
   dieselben zwei Zeilen, damit sie ueber die Karten hinweg auf einer Linie
   liegen — Abweichendes steht als Hinweis darunter, nicht im Wert. */
.tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:0}
.tier{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-card)}
.tier--hl{background:color-mix(in srgb,var(--fg-strong) 7%,var(--card));border-color:var(--border-2)}
.tier__facts{margin:14px 0 16px;border-top:1px solid var(--border)}
.tier__facts > div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.tier__facts dt{font-size:13.5px;color:var(--muted)}
.tier__facts dd{margin:0;font-size:14px;color:var(--fg);text-align:right;font-variant-numeric:tabular-nums}
.tier__hint{display:block;font-size:12.5px;color:var(--muted);margin:-6px 0 16px;text-wrap:pretty}
.tier > .btn{margin-top:auto;width:100%}
.tier__n{display:block;font-size:15px;font-weight:600;color:var(--fg-strong);letter-spacing:-.008em;margin-bottom:6px}
.tier__p{display:block;font-size:26px;font-weight:650;letter-spacing:-.02em;color:var(--fg-strong);line-height:1.1;font-variant-numeric:tabular-nums}
.tier__u{display:block;font-size:12.5px;color:var(--muted-2);margin-top:4px;margin-bottom:14px}
.inc{display:inline-flex;align-items:center;gap:7px;color:var(--fg)}
.inc svg{width:14px;height:14px;color:var(--muted)}
.dash{color:var(--muted-2)}
.tnote{font-size:13px;color:var(--muted-2);margin-top:16px}
.fnotes{border-top:1px solid var(--border);margin-top:8px;padding-top:22px;display:flex;flex-direction:column;gap:14px}
.fnotes li{display:grid;grid-template-columns:2.2rem 1fr;gap:10px;font-size:14px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.fnotes .mono{color:var(--muted-2);font-size:12.5px;padding-top:2px}
sup.fn{font-family:var(--font-mono);font-size:10.5px;color:var(--muted-2);margin-left:2px}

/* ---- Kontakt ---- */
.contact{border-top:1px solid var(--border)}
.contact li{border-bottom:1px solid var(--border);padding:20px 0;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline}
.contact__n{font-size:16px;font-weight:600;color:var(--fg-strong);min-width:14rem}
.contact__r{font-size:15px;color:var(--muted);flex:1;min-width:12rem}
.contact__l{display:flex;gap:16px;font-size:14.5px}
.contact__l a{color:var(--muted);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.contact__l a:hover{color:var(--fg-strong)}

/* ---- Responsive ---- */
@media (max-width:1000px){
  .navtoggle{display:flex}
  .nav{position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:10px 16px 16px;background:var(--bg);border-bottom:1px solid var(--border)}
  .nav[hidden]{display:none}
  .nav a{padding:12px;font-size:16px}
}
@media (max-width:900px){
  .tiers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mfoot__in{grid-template-columns:1fr 1fr}
  .module{grid-template-columns:1fr;gap:18px}
  .book{grid-template-columns:1fr}
  .hero--book{grid-template-columns:1fr;gap:32px}
  .hero--book .book__link{max-width:12rem}
  /* Einspaltig traegt der Zeilenabstand des Rasters schon 32 px; der
     Eigenabstand des Stand-Datums kaeme oben drauf. */
  .hero--book > .stand{margin-top:0}
  .book__cover{max-width:14rem}
}
@media (max-width:760px){
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:1fr}
  .people{grid-template-columns:1fr}
  .section{padding:52px 0}
  .hero{padding-block:48px 40px}
  .cta{padding-block:56px}
  .mhead__right .mhead__link{display:none}
}
@media (max-width:520px){
  .tiers{grid-template-columns:repeat(1,minmax(0,1fr))}
  .wrap{padding:0 18px}
  .ptable th,.ptable td{padding:12px 14px}
  .ptable .rowh{width:11rem}
  .ptable{min-width:46rem}
  .mfoot__in{grid-template-columns:1fr;gap:26px}
  .rows>li{grid-template-columns:1fr;gap:12px}
  .contact__n{min-width:0}
}

/* ---- Nur fuer die Vorschau in WordPress ----
 * Elementor und das Theme bringen eigene Grundstile mit. Diese Seite soll
 * exakt wie der Entwurf aussehen, deshalb hier die noetigen Rueckstellungen. */
body.af-website{background:var(--bg);color:var(--fg);font-family:var(--font-serif)}
body.af-website .elementor-widget-html{margin:0}
body.af-website .h1,body.af-website .h2{font-family:var(--font-display)}
body.af-website .h3{font-family:var(--font-sans)}
body.af-website p{font-family:var(--font-serif)}