/* ==========================================================================
   Propspector Startseite — gemeinsame Formate für b2c.html, b2b.html, anfrage.html

   Designsprache aus Armins Draft.
   Schriften: Oswald (Display), Barlow (alles andere), Barlow Condensed
   (Versal-Labels), Fraunces ausschliesslich in der Wortmarke.

   Hero-Komposition „Bündig": Textspalte und Produkt sind exakt gleich hoch,
   der Aktionsblock wird nach unten gedrückt. Zwei gemeinsame Kanten.
   ========================================================================== */

:root{
/* >>> MERKMALE ANFANG <<< */

/* Farben nach Aufgabe, nicht nach Wert. Eine Palette ist damit eine
   Handvoll Zeilen — siehe varianten/_bauen/paletten.py. */
  --grund:#17191b;
  --grund-2:#212427;
  --grund-2b:#212427;
  --grund-3:#2e3236;
  --grund-3b:#2b2f33;
  --grund-3c:#26292d;
  --grund-3d:#303438;
  --grund-4:#3a3f44;
  --grund-4b:#2a2e32;
  --tief:#0e0f11;
  --tief-1b:#26292c;
  --tief-1c:#0b0c0e;
  --tief-2:#08090a;
  --nebel:#8e9095;
  --nebel-2:#6a6e72;
  --nebel-3:#55585c;
  --nebel-4:#4a4d51;
  --glanz:#7e838a;
  --glanz-2:#8c9199;
  --glanz-3:#6e737a;
  --glanz-4:#4a4f55;
  --dunst-0:#f4f5f2;
  --dunst:#e9eae7;
  --dunst-2:#dcddd9;
  --zart:#d6d7d3;
  --bericht:#1e2023;
  --bericht-2:#2a2d31;
  /* Zweitnamen, damit die vorhandenen Stellen bleiben duerfen */
  --navy:var(--grund); --navy-700:var(--grund-2); --navy-600:var(--grund-3);
/* <<< MERKMALE ENDE >>> */

/* ---------------------------------------------------------------------------
   Der Report ist eine eigene Welt.

   Im Produktfenster steckt die Gestaltung der Report-Vorlage, und die kennt
   die Startseite nicht. Wo beide denselben kurzen Klassennamen benutzen,
   greift die Seitenregel in den Report hinein: .fr faerbte dort sechs
   Faktenzeilen mit Papier, .hd machte eine Zeile klebend. Beides ist am
   30.08.2026 aufgefallen, beides war unsichtbar genug, um lange zu bleiben.

   Statt vier Sektionen umzubenennen, endet die Seitengestaltung hier an der
   Fensterkante. Wer eine neue Sektion baut, deren Name schon im Report
   vorkommt, sieht es in pruefen.py, Punkt 9.
   --------------------------------------------------------------------------- */
/* Drei Klassen stehen bewusst NICHT hier, weil sie im Produktfenster ihre
   eigenen Regeln haben und das Zuruecksetzen ihnen die genommen hat
   (David, 31.08.2026):
     .tabs      der Objektart-Umschalter gehoert zur Bedienung der Demo und
                soll aussehen wie auf der Seite, mit Schiene und Rahmen.
     .nav/.obj  Seitenleiste des Reports; ohne ihr Polster kleben die
                Symbole am linken Rand. */
.app-main .hd, .app-side .hd, .app-main .hero, .app-main .card.hero,
.app-main .tag{
  position:static;background:none;box-shadow:none;
  backdrop-filter:none;border:0;padding:0;margin:0;
  text-transform:none;letter-spacing:normal}
  --paper:#fafaf8; --wash:#edeeeb; --yellow:#f7e95c;
  --checked:#2e9e63; --point:#e08a2e; --critical:#d93a2b;
  --border:#dedfdb; --muted:#6a6e72;
  --text:#3a3d40;                    /* Fliesstext auf hellem Grund */
  --sans:'Barlow',system-ui,-apple-system,sans-serif;
  --cond:'Barlow Condensed',var(--sans);
  --disp:'Oswald',var(--cond);
  --serif:'Fraunces',Georgia,serif;   /* NUR Wortmarke */
  --max:1440px;                       /* Inhaltsbreite. War 1520 (Legalfly),
                                       aber die Produktbloecke standen immer
                                       auf 1440 mit 64 Rand: auf grossen
                                       Monitoren lagen die Kanten 136 px
                                       auseinander (David, 30.08.2026). */
  --gutter:64px;
  /* Schatten in drei Stufen statt siebenundzwanzig Einzelfaellen. Aufliegend
     fuer Zeilen und kleine Karten, schwebend fuer Karten auf Flaeche, tief
     fuer grosse Elemente ueber dunklem Grund (David, 30.08.2026). */
  --schein-1:0 1px 3px color-mix(in srgb, var(--bericht) 6%, transparent);
  --schein-2:var(--schein-2);
  --schein-3:0 30px 70px -30px color-mix(in srgb, var(--grund) 55%, transparent);
  /* Zwei Sonderfaelle, die etwas anderes tun als schweben: das
     Hero-Fenster wirft nach links unten, weil es angeschnitten ist,
     und der dunkle Einsatz in der Preistafel sitzt in der Flaeche. */
  --schein-fenster:-46px 46px 130px -44px rgba(0,0,0,.72),
    inset 1px 1px 0 color-mix(in srgb, var(--paper) 12%, transparent);
  --schein-einsatz:var(--schein-einsatz);
  /* Abschnittspolster: normal und gross. Es gab 72, 80, 96 und 104. */
  --luft:96px;
  --luft-gross:128px;
  /* Display-Groessen. Es gab zehn clamp-Formeln, sieben davon je einmal:
     jede Sektion hatte ihre eigene Ueberschriftgroesse, ohne Grund. Fuenf
     Rollen decken alles ab (David, 30.08.2026). */
  --titel-hero:clamp(36px,4.45vw,68px);   /* nur der Hero */
  --titel-seite:clamp(34px,3.6vw,52px);   /* h1 der Unterseiten */
  --titel-gross:clamp(30px,3.1vw,46px);   /* Bloecke, die herausstehen */
  --titel:clamp(26px,2.4vw,38px);         /* Sektionsueberschrift, Standard */
  --titel-klein:clamp(22px,2.1vw,30px);   /* Unterzeilen und Nebentitel */
  --radius:8px;                       /* jede Flaeche */
  --radius-pille:var(--radius);       /* AUFGEGEBEN am 28.08.2026: es gibt
                                         nur einen Radius. Bleibt als Name,
                                         damit keine Regel ins Leere zeigt. */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--navy);
  font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.inner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------------------------------------------------------------- Kopfzeile */
/* Der Kopf laesst den Inhalt durchscheinen. Werte an harvey.ai gemessen
   (31.08.2026): 72 Prozent Deckkraft, 16 Pixel Unschaerfe, keine Linie und
   kein Schatten. Ohne Unschaerfe im Browser bleibt die Flaeche deckend, sonst
   liefe der Text ueber dem Hero auf dunklem Grund. */
.hd{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--border)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hd{background:color-mix(in srgb, var(--paper) 72%, transparent);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    backdrop-filter:blur(16px) saturate(1.4);
    border-bottom-color:color-mix(in srgb, var(--border) 60%, transparent)}
}
.hd-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);height:76px;
  display:flex;align-items:center;gap:32px}
/* Zwischen Marke und Menue liegt eine Markenbreite: gemessen 135 px, mit
   dem Grundabstand von 32 ergeben 104 genau das. Bei gleichem Abstand
   zu den Menuepunkten las sich die Wortmarke wie deren erster Punkt,
   und weil sie in einer anderen Schrift und Groesse steht, stiess das
   auf (David, 31.08.2026). */
.brand{display:flex;align-items:center;gap:12px;flex:none;margin-right:104px}
.brand img{width:34px;height:34px;border-radius:var(--radius)}
.brand span{font-family:var(--serif);font-size:24px;font-weight:500;letter-spacing:-.02em}
.nav{display:flex;gap:32px;margin-right:auto}
.nav a{font-family:var(--cond);font-size:17px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;opacity:.75}
.nav a:hover{opacity:1}

/* Umschalter: verlinkt auf die andere Seite, tauscht nicht den Inhalt */
.aud{display:flex;align-items:center;gap:8px;flex:none}
.aud > span{font-family:var(--cond);font-size:13px;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted)}
.aud-sw{display:flex;background:var(--wash);border:1px solid var(--border);
  border-radius:var(--radius);padding:3px}
.aud-sw a{font-family:var(--cond);font-size:15px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;padding:8px 16px;border-radius:var(--radius);color:var(--muted)}
/* Der aktive Zustand ist eine Anzeige, keine Handlung: helle Flaeche mit
   Haarlinie statt gefuelltem Schwarz. Gefuellt sah er aus wie ein zweiter
   Knopf neben dem Aufruf, und zwei schwarze Flaechen im Kopf streiten um
   denselben Blick (David, 31.08.2026, Vorbild harvey.ai: dort traegt nur
   ein Element eine Fuellung). */
.aud-sw a[aria-current]{background:var(--paper);color:var(--navy);
  box-shadow:var(--schein-1),0 0 0 1px var(--border)}
.hd-login{font-family:var(--cond);font-size:17px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;opacity:.75;flex:none}
.hd-login:hover{opacity:1}
.hd-cta{flex:none;background:var(--navy);color:var(--paper);border-radius:var(--radius);padding:12px 20px;
  font-family:var(--cond);font-size:17px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em}
.hd-cta:hover{background:var(--navy-700)}

/* --------------------------------------------------------------------- Hero */
/* Kein Kicker. Der Hero beginnt mit der Überschrift. */
/* Flaeche wie die rechte Seite in Block 2 (.buehne), nur in Navy: Radialschein
   bei 88% 6%, Grundverlauf 145 Grad, Keil um 18 Grad gedreht. Gleiche Werte,
   damit Hero und Befund dieselbe Sprache sprechen. */
.hero{position:relative;overflow:hidden;color:var(--paper);
  background:
    radial-gradient(120% 90% at 88% 6%, color-mix(in srgb, var(--glanz-4) 55%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 58%),
    linear-gradient(145deg,var(--tief-1b) 0%,var(--navy) 45%,var(--tief) 100%)}
.hero::after{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:75%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-2) 20%, transparent),color-mix(in srgb, var(--glanz-2) 0%, transparent));
  transform:rotate(18deg);pointer-events:none;z-index:0}
.hero-grid{position:relative;z-index:1}
/* Mehr Tiefe ohne Bewegung: ein enger Lichtkegel direkt hinter dem Produkt,
   dazu eine Abdunklung nach links, damit Ueberschrift und Gelb knallen. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(46% 58% at 74% 46%, color-mix(in srgb, var(--glanz-3) 34%, transparent) 0%, color-mix(in srgb, var(--glanz-3) 0%, transparent) 68%),
    radial-gradient(52% 62% at 16% 34%, color-mix(in srgb, var(--glanz-3) 24%, transparent) 0%, color-mix(in srgb, var(--glanz-3) 0%, transparent) 70%),
    linear-gradient(90deg, color-mix(in srgb, var(--tief-2) 26%, transparent) 0%, color-mix(in srgb, var(--tief-2) 8%, transparent) 34%,
      color-mix(in srgb, var(--tief-2) 0%, transparent) 56%)}
/* Keine senkrechte Haarlinie im Hero: sie kreuzt die Trennlinie ueber der
   Vertrauenszeile und liest sich als Fehler, nicht als Struktur. */
/* Feines Korn ueber die ganze Flaeche. Grosse Navy-Verlaeufe zeigen auf vielen
   Bildschirmen sichtbare Streifen — das Korn bricht sie und laesst die Flaeche
   satt statt digital wirken. */
.hero-grid::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E")}
/* B2B-Zeilen sind laenger als B2C-Zeilen. Statt die Schrift kleiner zu machen,
   bekommt die Textspalte dort mehr Breite — sonst bricht die Ueberschrift mitten
   im Satz um und laesst Waisen stehen. */
/* Kein eigenes Hero-Raster fuer die Profi-Seite mehr: zwei Spaltenbreiten und
   zwei Videoformate fuer dasselbe Bauteil waren nur gewachsen, nicht gewollt. */
/* KEIN eigener Schriftgrad mehr fuer die Profi-Ueberschrift. Sie lief auf
   clamp(38px,4.6vw,70px) gegen clamp(42px,5.1vw,78px) auf der Privatseite, bei
   1440 Pixeln also 66 gegen 73 — ein Zehntel Unterschied fuer dasselbe Bauteil.
   Aufgefallen ist es, seit der Umschalter im Kopf direkt zwischen beiden
   springt. Begruendet war es damit, dass die Profi-Ueberschrift zweizeilig ist
   und die Privatseite vierzeilig war; die Privatseite steht inzwischen auf drei
   Zeilen. Auf gleichem Grad wird die Profi-Ueberschrift dreizeilig, der Hero
   waechst von 587 auf 668 Pixel und bleibt damit unter den 724, die auf einen
   Bildschirm passen. */
/* Es gibt hier KEINE Regel mehr, die nur fuer eine der beiden Seiten gilt.
   Frueher standen drei: ein eigener Schriftgrad, senkrechte Zentrierung und ein
   fester Abstand zum Knopf. Sie waren damit begruendet, dass die
   Profi-Ueberschrift zweizeilig ist und die Privatseite vierzeilig war. Seit die
   Textspalte 720 Pixel breit ist, sind beide dreizeilig, und nachgemessen war der
   Unterschied 6 Pixel Hoehe und 6 Pixel Abstand. Dafuer haelt man keinen
   Sonderfall vor: er kostet bei jeder spaeteren Aenderung doppelte Arbeit und
   faellt genau dann auf, wenn der Umschalter im Kopf zwischen beiden springt. */
.hero-grid{display:grid;grid-template-columns:600px 1fr;gap:72px;align-items:stretch;
  padding:78px 0 78px max(var(--gutter), calc((100% - var(--max))/2 + var(--gutter)))}
.hero-col{display:flex;flex-direction:column}
.hero h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1.08;
  letter-spacing:-.022em}
/* Der Schriftgrad steht im Dichte-Block weiter unten. Frueher stand hier
   clamp(42px,5.1vw,78px) — tot, weil ueberschrieben, und beim Lesen irrefuehrend. */
.hero h1 .hl{color:var(--yellow)}
.lead{font-size:20px;line-height:1.55;color:color-mix(in srgb, var(--paper) 88%, transparent);
  margin-top:24px;max-width:36ch}
/* Der Aktionsblock wird nach unten gedrückt und sitzt auf der Unterkante des
   Produkts. Das ist die zweite gemeinsame Linie. */
.hero-act{margin-top:auto;padding-top:32px}
.note{font-size:15px;color:color-mix(in srgb, var(--paper) 60%, transparent);margin-top:12px}
.trust{display:flex;flex-wrap:wrap;gap:16px 32px;list-style:none;
  margin-top:32px;padding-top:24px;border-top:1px solid color-mix(in srgb, var(--paper) 18%, transparent)}
.trust li{display:flex;align-items:center;gap:8px;font-family:var(--cond);font-size:17px;
  font-weight:600;text-transform:uppercase;letter-spacing:.03em}
/* NICHT gelb: Gelb ist Handlung und steht im Hero schon am Knopf und im
   hervorgehobenen Wort. Drei gelbe Symbole daneben machen daraus Dekoration
   und nehmen dem Knopf seine Bedeutung. */
.trust .kurz{display:none}
.trust svg{width:22px;height:22px;flex:none;
  color:color-mix(in srgb, var(--paper) 72%, transparent)}

/* Produkt: gleiche Höhe wie die Textspalte, läuft rechts aus dem Bild */
.screen{position:relative;overflow:hidden;min-height:440px;
  border:1px solid color-mix(in srgb, var(--paper) 22%, transparent);border-right:0;border-radius:var(--radius) 0 0 var(--radius);
  background:var(--navy-700);
  box-shadow:var(--schein-fenster)}
.screen video{width:100%;height:100%;object-fit:cover}
/* Gleicher Bildausschnitt auf beiden Seiten: sonst haengt die Videohoehe an der
   Laenge der Textspalte und beschneidet je Seite anders. */
.screen{aspect-ratio:16/9;height:auto;align-self:center}
.tag{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;
  background:var(--navy);border:1px solid color-mix(in srgb, var(--paper) 25%, transparent);border-radius:var(--radius-pille);
  padding:8px 12px;font-family:var(--cond);font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--yellow);display:block}

/* --------------------------------------------------- Aktion: Feld und Knöpfe */
/* B2C startet mit einem Account. B2B fragt an, dort qualifiziert das Formular. */
.start-row{display:flex;gap:8px;align-items:stretch;max-width:540px}
.start{display:flex;flex:1;min-width:0;background:var(--navy-700);
  border:1px solid color-mix(in srgb, var(--paper) 30%, transparent);border-radius:var(--radius);overflow:hidden}
.start:focus-within{border-color:var(--yellow)}
.start input{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:16px 16px;
  font-family:var(--sans);font-size:15px;color:var(--paper)}
.start input::placeholder{color:color-mix(in srgb, var(--paper) 45%, transparent)}
.start button{flex:none;border:0;cursor:pointer;background:var(--yellow);color:var(--navy);
  padding:0 24px;font-family:var(--cond);font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em}
.start button:hover{background:#f2e24a}
.gbtn{flex:none;width:56px;display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid color-mix(in srgb, var(--paper) 30%, transparent);border-radius:var(--radius)}
.gbtn:hover{background:#fff}
.gbtn svg{width:22px;height:22px}

.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius);
  padding:16px 32px;font-family:var(--cond);font-size:17px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;transition:background .15s}
.btn-y{background:var(--yellow);color:var(--navy)}
.btn-y:hover{background:#f2e24a}

/* ---------------------------------------------------------------- Fusszeile */
.ft{background:var(--navy);color:color-mix(in srgb, var(--paper) 75%, transparent);padding:48px 0 48px}
.ft-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center}
.ft .brand span{color:var(--paper)}
.ft nav{display:flex;flex-wrap:wrap;gap:24px;margin-left:auto}
.ft nav a{font-size:15px}
.ft nav a:hover{color:var(--paper)}
.ft-co{width:100%;font-size:13px;color:color-mix(in srgb, var(--paper) 50%, transparent);
  border-top:1px solid color-mix(in srgb, var(--paper) 15%, transparent);padding-top:24px}

/* ======================================================= Seitenübergang ====
   Nachgebaut aus dem Mitschnitt von Legalfly, Bild für Bild:
   Die alte Seite wird von unten nach oben weggezogen wie ein Abziehbild,
   darunter kommt der helle Grund hoch. Kurz steht alles hell, dann kommt
   die neue Seite. Die Kopfzeile geht mit, sie bleibt nicht stehen.
   Browser ohne Unterstützung navigieren ganz normal. */
@view-transition{ navigation:auto }
/* Der Grund hinter dem Vorhang. Bewusst nicht der Papierton, der ist heller
   und leicht warm und knallt gegen das Navy. Aus Legalflys Mitschnitt
   ausgemessen: #F3F3F3, neutral. Genau das nehmen wir. */
::view-transition{ background:#f3f3f3 }

::view-transition-old(root){
  animation:ps-abziehen .40s cubic-bezier(.55,0,.85,.35) both;
}
::view-transition-new(root){
  animation:ps-ankommen .46s cubic-bezier(.16,.84,.24,1) .48s both;
}
/* von unten nach oben weg */
@keyframes ps-abziehen{
  from{ clip-path:inset(0 0 0 0) }
  to  { clip-path:inset(0 0 100% 0) }
}
@keyframes ps-ankommen{
  from{ opacity:0; transform:translateY(14px) }
  to  { opacity:1; transform:none }
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
}

/* ------------------------------------------------------------------- Mobil */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr;gap:40px;padding:60px var(--gutter)}
  .hero-act{margin-top:0;padding-top:32px}
  .screen{height:auto;min-height:0;aspect-ratio:16/9;
    border:1px solid color-mix(in srgb, var(--paper) 22%, transparent);border-radius:var(--radius)}
  .nav{display:none}
}
@media (max-width:1180px){
  :root{--gutter:36px}
}
@media (max-width:760px){
  :root{--gutter:22px}
  /* Die Zeile bleibt auch schmal eine Zeile: Feld, Knopf, Google als Quadrat
     daneben. Gestapelt wurde das Google-Feld so breit wie der Hauptknopf und
     zog Aufmerksamkeit, die ihm nicht zusteht (David, 31.08.2026). */
  .start-row{max-width:none}
  .start input{padding:12px}
  .start button{padding:0 16px;font-size:13px}
  .gbtn{width:48px}
  .gbtn svg{width:20px;height:20px}
  /* Schmal muss die Zeile eine Zeile bleiben, aber mit Symbolen: ohne sie
     geht die Aussage unter, mit ihnen und voller Groesse wird eine Liste
     daraus. Also beides kleiner und ueber die Breite verteilt (David,
     31.08.2026). */
  .trust{gap:8px;margin-top:24px;padding-top:20px;flex-wrap:wrap;
    justify-content:space-between}
  .trust li{font-size:13px;gap:8px;letter-spacing:0;white-space:nowrap}
  .trust svg{width:16px;height:16px}
  .trust .lang{display:none}
  .trust .kurz{display:inline}
  .aud > span{display:none}
}

@media (max-width:420px){
  /* Gemessen: mit 13 px passt die Vertrauenszeile erst ab 430 px Fensterbreite
     in eine Zeile. Darunter die kleine Stufe, sonst bricht sie in zwei plus
     eins und liest sich als Liste (David, 31.08.2026). */
  .trust li{font-size:11px;gap:4px}
  .trust svg{width:14px;height:14px}
}

/* ========================================================= Befund-Abschnitt
   Position 2, Variante A. Aufbau wie Legalfly unterhalb des Heros: zwei Kästen
   mit schmaler Lücke, schmaler als der Hero, Text oben ausgerichtet mit Knopf
   unten. Rechts ein kräftiger Verlauf in Messing mit diagonalem Keil.
   Gemessen bei 1440: Hero beginnt bei 40, die Kästen erst bei 64. */
/* Der Befundblock fuehrt vor, er argumentiert nicht: getoente Flaeche, damit
   die beiden Kacheln darauf stehen statt mit dem Papier zu verschwimmen. */
.bf{background:var(--wash);padding:var(--luft) 0}
.bf-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.bf-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:16px;align-items:stretch}

/* Textkasten, oben ausgerichtet, Knopf sitzt unten */
.bf-txt{border-radius:var(--radius);padding:48px 48px;
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 150% at 88% 0%, color-mix(in srgb, var(--glanz-4) 14%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 62%),
    linear-gradient(145deg,#ffffff 0%,#f7f8f5 45%,#eff1ed 100%)}
.bf-txt::before{content:"";position:absolute;top:-120%;right:-4%;width:32%;height:340%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-4) 14%, transparent),color-mix(in srgb, var(--glanz-4) 0%, transparent));
  transform:rotate(18deg);pointer-events:none}
.bf-txt::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.5) 66%,rgba(255,255,255,.88) 100%)}
.bf-txt > *{position:relative;z-index:1}
.bf h2{margin-top:0;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  line-height:1.08;letter-spacing:-.012em;font-size:var(--titel);color:var(--navy);
  text-wrap:balance}
/* Ueberschrift, Text und Knopf stehen als eine Gruppe mittig in der Flaeche.
   Weder oben angeschlagen (dann klafft es unter dem Knopf) noch der Text nach
   unten gezogen (dann klafft es unter der Ueberschrift). Die Bühne rechts gibt
   die Hoehe vor, die Luft verteilt sich gleichmaessig darum. */
.bf-lead{margin-top:16px;font-size:17px;line-height:1.6;color:var(--text);
  max-width:38ch;text-wrap:pretty}
.bf-cta{padding-top:32px}
.bf-cta a{display:inline-flex;align-items:center;border-radius:var(--radius);padding:16px 24px;
  background:var(--navy);color:var(--paper);font-family:var(--cond);font-size:15px;
  font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.bf-cta a:hover{background:var(--navy-700)}

/* Bühne: kräftiger Verlauf mit diagonalem Keil, wie bei Legalfly */
.buehne{position:relative;border-radius:var(--radius);overflow:hidden;padding:48px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(224,138,46,.55) 0%, rgba(224,138,46,0) 58%),
    linear-gradient(145deg,#f7efe2 0%,#f2e6d4 45%,#e8d6bd 100%)}
.buehne::after{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:75%;
  background:linear-gradient(200deg,rgba(180,83,9,.30),rgba(180,83,9,0));
  transform:rotate(18deg);pointer-events:none}
.panel{background:#fff;border:1px solid color-mix(in srgb, var(--grund) 10%, transparent);border-radius:var(--radius);
  box-shadow:var(--schein-3);padding:24px 24px;width:100%;
  position:relative;z-index:1}
.panel h3{font-size:15px;font-weight:600;color:var(--navy)}
.panel .liste{margin-top:16px;border-top:1px solid var(--border)}
.zeile{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--border)}
.zeile:last-child{border-bottom:0}
.skala{display:flex;gap:3px;flex:none;margin-top:4px}
.skala i{width:9px;height:9px;border-radius:2px;background:var(--border);display:block}
.skala.s3 i{background:var(--critical)}
.skala.s2 i:nth-child(-n+2){background:var(--point)}
.zeile .txt b{display:block;font-size:13px;font-weight:600;color:var(--navy);
  text-wrap:balance}
.zeile .txt p{margin-top:4px;font-size:13px;line-height:1.55;color:var(--muted);
  text-wrap:pretty}
/* Nachsatz zu den Befunden, kein zweiter Block. Nur eine Haarlinie und zwei
   Zeilen, kleiner als die Befunde. Nur Unterlagen, die oben nicht schon stehen. */
.hinweis{margin-top:8px;padding-top:16px;border-top:1px solid var(--border)}
.hinweis > b{display:block;font-family:var(--cond);font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.hinweis ul{list-style:none;margin-top:8px}
.hinweis li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:4px 0;font-size:13px;color:var(--navy)}
.hinweis li em{font-style:normal;flex:none;font-family:var(--cond);font-size:11px;
  font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--point)}
.hinweis li em.alt{color:var(--muted)}
.hinweis .zu{margin-top:12px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--cond);font-size:13px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--navy);border-bottom:1px solid var(--border)}

@media (max-width:1180px){
  .bf{padding:56px 0}
  .bf-in{padding:0 var(--gutter)}
  .bf-grid{grid-template-columns:1fr;gap:16px}
  .bf-txt{padding:32px 32px}
  .bf-cta{margin-top:32px;padding-top:0}
  .buehne{padding:24px}
  .hinweis{flex-direction:column;align-items:flex-start;gap:16px}
}

/* --- Abgleich: Umschalter Wohnung / Haus --- */
.panel-hd{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.tabs{display:inline-flex;gap:3px;margin-left:auto;background:#e7e9ee;border-radius:var(--radius);
  padding:3px}
.tabs button{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted);
  background:transparent;border:0;padding:8px 16px;border-radius:var(--radius);cursor:pointer;
  transition:background .16s,color .16s}
.tabs button:hover{color:var(--navy)}
.tabs button[aria-selected="true"]{background:rgba(247,233,92,.30);color:var(--navy);
  box-shadow:inset 0 0 0 1px rgba(200,180,20,.55)}
/* beide Zustände in derselben Rasterzelle: Höhe bleibt stehen, kein Springen */
.tp-wrap{display:grid}
.tp{grid-area:1/1;visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .18s ease}
.tp.is-on{visibility:visible;opacity:1;pointer-events:auto}

/* --- Umfang: Kapitel je Objektart, Haarlinien statt Kacheln --- */
.uf{padding:var(--luft) 0}
.uf.hell{background:var(--paper);color:var(--navy)}
.uf.dunkel{background:var(--navy);color:var(--paper)}
.uf h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1.08;
  letter-spacing:-.012em;font-size:var(--titel);text-wrap:balance}
.uf.hell .uf-lead{color:var(--text)}
.uf.dunkel .uf-lead{color:var(--zart)}
.uf.dunkel .uf-cols{border-top-color:color-mix(in srgb, var(--paper) 20%, transparent)}
.uf.dunkel .uf-col + .uf-col{border-left-color:color-mix(in srgb, var(--paper) 20%, transparent)}
.uf.dunkel .uf-art span{color:var(--nebel)}
.uf.dunkel .uf-row{border-top-color:color-mix(in srgb, var(--paper) 14%, transparent)}
.uf-row .nr{font-family:var(--cond);font-size:13px;font-weight:600;letter-spacing:.06em;
  color:var(--nebel);padding-top:3px}
.uf.dunkel .uf-row .nr{color:var(--nebel-2)}
.uf-row .nm{font-size:15px;font-weight:600}
.uf.dunkel .uf-row .ws{color:var(--nebel)}

/* Fassung C: ein breiter Kasten mit Reitern, näher an Legalfly */
.uf.karte{background:var(--paper)}
.uf-box-hd .t{font-size:15px;font-weight:600;color:var(--navy)}
.uf-box-hd .tabs{margin-left:auto}
/* im großen Kasten darf die Höhe mitgehen: mehr Kapitel heißt sichtbar mehr */
.uf-box .tp{position:static;visibility:visible;opacity:1;display:none;grid-area:auto}
.uf-box .tp.is-on{display:block}

/* --- Vier Kacheln nach Legalfly-Bauform: Bild oben, ein Satz unten --- */
.kach{background:var(--paper);padding:var(--luft) 0}
.kach h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1.08;
  letter-spacing:-.012em;font-size:var(--titel);color:var(--navy);
  text-wrap:balance}
.kachel .fuss{padding:24px 24px 32px}
.kachel .fuss b{display:block;font-size:17px;font-weight:600;color:var(--navy);
  text-wrap:balance}
.kachel .fuss p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--muted);
  text-wrap:pretty}
.mini .k{font-family:var(--cond);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;color:var(--muted)}
.mini .z{display:flex;align-items:baseline;gap:8px;padding:8px 0;
  border-top:1px solid var(--border);font-size:13px;color:var(--navy)}
.mini .z:first-of-type{margin-top:8px}
.mini .z em{font-style:normal;margin-left:auto;font-size:13px;color:var(--muted)}
.mini .z em.warn{color:var(--point)}
.mini .z em.stop{color:var(--critical)}
.mini .gg .s{border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px}
.mini .gg .s span{display:block;font-family:var(--cond);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.mini .gg .s b{display:block;margin-top:3px;font-size:15px;color:var(--navy)}
.mini .ck{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:13px;
  color:var(--navy)}
.mini .ck i{width:7px;height:7px;border-radius:2px;background:var(--checked);flex:none}
.mini .ck i.rot{background:var(--critical)}

/* --- Block 3: eine breite Produktfläche, rechts auslaufend --- */
.app{background:var(--paper);padding:var(--luft) 0 0;overflow:hidden}
.app h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1.08;
  letter-spacing:-.012em;font-size:var(--titel);color:var(--navy);
  text-wrap:balance}

.app-buehne{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) 96px}
.app-fenster{display:grid;grid-template-columns:256px 1fr;width:calc(100% + 60px);min-width:1180px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius) 0 0 var(--radius);
  border-right:0;overflow:hidden;
  box-shadow:var(--schein-3)}

/* Seitenleiste: Werte 1:1 aus etw-report-brand.html */
.app-side,.app-side a,.app-side .nav,.app-side .subnav{text-transform:none;
  letter-spacing:normal;font-family:var(--sans)}
.app-side{--sb:var(--navy);--sb2:var(--grund-2b);--sbl:var(--grund-3b);--sblab:var(--nebel-2);--sbmut:var(--nebel);
  background:var(--sb);display:flex;flex-direction:column;padding:16px 0}
.app-side .top{padding:8px 16px 16px 24px;display:flex;align-items:center;gap:12px}
.app-side .top img{width:22px;height:22px;object-fit:contain}
.app-side .top span{font-weight:700;font-size:17px;color:#fff}
.app-side .obj{margin:8px 16px 8px;padding:8px;background:var(--sb2);
  border:1px solid var(--sbl);border-radius:var(--radius);display:flex;align-items:center;gap:8px}
.app-side .obj .ic{width:30px;height:30px;border-radius:var(--radius);background:var(--grund-3c);
  display:grid;place-items:center;flex:none}
.app-side .obj .ic svg{width:15px;height:15px;stroke:var(--zart);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.app-side .obj .otxt{min-width:0;flex:1}
.app-side .obj .name{font-weight:600;font-size:13px;color:#fff;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-side .obj .sub{font-size:11px;color:var(--sbmut);margin-top:2px;line-height:1.25}
.app-side .obj .sw{flex:none;width:26px;height:26px;border-radius:var(--radius);
  border:1px solid var(--sbl);background:transparent;display:grid;place-items:center}
.app-side .obj .sw svg{width:12px;height:12px;stroke:var(--sbmut);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.app-side .lbl{color:var(--sblab);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:16px 24px 8px;font-weight:600}
.app-side .nav{list-style:none;padding:0 16px;display:flex;flex-direction:column;gap:1px}
.app-side .nav > li > a{display:flex;align-items:center;gap:8px;padding:8px 8px;
  border-radius:var(--radius);color:var(--zart);font-size:13px}
.app-side .nav > li.on > a{background:var(--sb2);color:#fff}
.app-side .nav .ico{width:16px;display:inline-grid;place-items:center;flex:none}
.app-side .nav .ico svg{width:15px;height:15px;stroke:var(--nebel);stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.app-side .nav > li.on > a .ico svg{stroke:#fff}
.app-side .nav .count{margin-left:auto;background:var(--grund-3d);color:var(--zart);font-size:11px;
  padding:1px 8px;border-radius:var(--radius-pille);font-weight:600}
.app-side .nav .check{margin-left:auto;display:flex}
.app-side .nav .check svg{width:14px;height:14px;stroke:var(--checked);stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.app-side .subnav{list-style:none;margin:2px 0 4px 20px;padding:2px 0 2px 24px;
  border-left:1px solid var(--sbl);display:flex;flex-direction:column}
.app-side .subnav li a{display:flex;align-items:center;gap:8px;padding:8px 8px;
  border-radius:var(--radius);color:var(--nebel);font-size:13px}
.app-side .subnav li a svg{width:13px;height:13px;stroke:var(--nebel);stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.app-side .subnav li.on a{color:var(--yellow);background:rgba(247,233,92,.16);
  border:1px solid rgba(247,233,92,.42);padding:4px 8px}
.app-side .subnav li.on a svg{stroke:var(--yellow)}
.app-side .user{margin-top:auto;padding:12px 16px 0}
.app-side .user .row{padding:8px;background:var(--sb2);border:1px solid var(--sbl);
  border-radius:var(--radius);display:flex;align-items:center;gap:8px}
.app-side .user .av{width:30px;height:30px;border-radius:50%;background:var(--sbl);
  box-shadow:inset 0 0 0 1px rgba(231,236,245,.22);display:grid;place-items:center;
  color:#fff;font-size:13px;font-weight:600;flex:none}
.app-side .user .nm{font-size:13px;font-weight:600;color:#fff;line-height:1.15}
.app-side .user .em{font-size:11px;color:var(--sbmut)}

/* --- Arbeitsfläche: Regeln 1:1 aus etw-report-brand.html übernommen --- */
.app-main{--card:#FFFFFF;--hair:#E4E0D5;--hair-2:#EEEBE2;--ink:var(--bericht);--ink-2:var(--bericht-2);
  --ink-3:var(--text);--muted:var(--nebel-2);--green:var(--checked);--green-dk:#1D6B4F;--red:var(--critical);
  --red-dk:#C0392B;--brass:var(--point);--brass-dk:#B45309;
  background:#F6F5EF;color:var(--ink)}
.app-main .chap{margin-bottom:16px}
.app-main .chap .no{font-size:11px; font-variant-numeric:tabular-nums}
.app-main .chap .nm{font-weight:700;}
.app-main .chap .ln{flex:1;height:1px;background:var(--hair)}
.app-main .chap .st{font-size:11px;font-weight:600;color:var(--muted)}
.app-main .chap .st.warn{color:var(--ink-3)}
.app-main .chap .st.ok{color:var(--green-dk)}
.app-main .kv .k{color:var(--muted);font-size:11px;margin-bottom:3px}
.app-main .kv .v{font-size:15px;font-weight:500;color:var(--ink-2)}
.app-main .hero{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;align-items:stretch}
.app-main .hero .info{padding:20px;display:flex;flex-direction:column}
.app-main .hero .lage-sum{grid-column:1 / -1;border-top:1px solid var(--hair)}
.app-main .hero .head{display:flex;align-items:flex-start;}
.app-main .hero .hic{width:36px;height:36px;border-radius:var(--radius);background:var(--hair-2);color:var(--ink-3);place-items:center;flex-shrink:0}
.app-main .hero h1{margin:0;color:var(--ink);line-height:1.15}
.app-main .hero .addr{color:var(--ink-3);font-size:13px;margin-top:2px}
.app-main .btn-pdf{margin-top:16px;width:100%;border:1px solid var(--hair);background:#fff; padding:12px;display:flex;align-items:center;justify-content:center;gap:8px; color:var(--ink);font-size:13px;font-weight:600}
.app-main .beta{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--ink-3);background:var(--hair); border-radius:4px;padding:2px 8px}
.app-main .meta4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;border-top:1px solid var(--hair-2); margin-top:16px;padding-top:16px;padding-bottom:16px}
.app-main .stats4{background:var(--wash);border-radius:var(--radius);}
.app-main .stats4-eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em; color:var(--muted);text-align:center;margin-bottom:20px}
.app-main .stats4-row{display:grid;grid-template-columns:repeat(3,1fr)}
.app-main .stats4 .s4c{display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:2px 16px;border-left:1px solid var(--hair)}
.app-main .stats4 .s4c:first-child{border-left:none}
.app-main .stats4 .n{font-size:30px;line-height:1}
.app-main .stats4 .l{font-size:13px;color:var(--muted);margin-top:8px}
.app-main .n-amber{color:var(--ink)}
.app-main .n-ink{color:var(--ink)}
.app-main .n-pos{color:var(--green-dk)}
.app-main .rp-banner{margin-top:16px;padding:0 2px}
.app-main .rp-banner .rp-bh{font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:-.005em;color:var(--ink);line-height:1.1;margin:0 0 16px}
.app-main .rp-banner .rp-bd{font-size:13px;color:var(--ink-3);line-height:1.6;margin:16px 0 0;text-wrap:pretty}
.app-main .rp-banner .rp-bd b{color:var(--ink);font-weight:600}
.app-main .rp-kc{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:8px 12px;border-radius:var(--radius);white-space:nowrap;line-height:1}
.app-main .rp-kc.on{color:var(--ink);background:var(--card);border:1px solid var(--hair)}
.app-main .rp-kc.on svg{width:13px;height:13px;fill:none;stroke:var(--green-dk);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app-main .rp-kc.off{color:var(--muted);background:none;border:1px dashed #CDD2DB}
.app-main .chap .st.crit{color:var(--red-dk);font-weight:700}
.app-main .btn-pdf{border-radius:var(--radius)}
.app-main .hero h1{font-family:var(--cond);font-weight:700;font-size:24px;letter-spacing:-.012em}
.app-main .stats4 .n{font-family:var(--cond);font-weight:700;letter-spacing:-.015em}
.app-main .chap .nm{font-size:11px}
.app-main .chap .no{letter-spacing:.02em}
.app-main .hero .hic{display:none}
.app-main .hero .head{gap:0}
.app-main .chap .no{color:var(--ink);font-weight:800}
.app-main .chap .nm{letter-spacing:.16em;color:var(--ink)}

/* Arbeitsfläche, eigener Rahmen */
.app-main{padding:24px 24px 32px;min-width:0}
.app-main .chap{display:flex;align-items:center;gap:12px;padding-bottom:16px}
.app-main .stats4{padding:20px 0 4px}
.app-main .rp-map{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}
.app-main .card.hero .info{padding:16px 20px}
.app-main .card.hero .btn-pdf{width:auto;align-self:flex-start;padding:8px 16px}
.app-main .obj-sw-zeile{display:flex;align-items:center;gap:16px;padding-bottom:16px}
.app-main .obj-sw-zeile .tabs{margin-left:auto}
.app-main .tabs button{color:var(--muted)}
.app-main .tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}

/* Im Fenster darf die Höhe mitgehen: mehr Kapitel heißt sichtbar mehr */
.app-fenster > .tp-wrap.seiten{display:flex;flex-direction:column}
.app-fenster .tp{position:static;visibility:visible;opacity:1;display:none;grid-area:auto}
.app-fenster .tp.is-on{display:block}
.app-fenster aside.tp.is-on{display:flex;flex:1}

/* Lage-Streifen und Straßenansicht, ebenfalls aus dem Report */
.app-main .sv{position:relative;min-height:280px;
  background:linear-gradient(135deg,#D9D3C3,#BCB29A 55%,#CFC7B4)}
.app-main .sv .tag{position:absolute;top:12px;left:12px;background:color-mix(in srgb, var(--tief-1c) 85%, transparent);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.09em;padding:4px 8px;border-radius:var(--radius)}
.app-main .sv .gm{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.95);
  font-size:11px;font-weight:600;padding:4px 8px;border-radius:var(--radius);color:var(--ink)}
.app-main .lage-sum{grid-column:1/-1;padding:16px 20px;display:flex;align-items:center;
  gap:32px;border-top:1px solid var(--hair)}
.app-main .lage-sum .hd{display:flex;align-items:center;gap:8px;font-size:15px;
  font-weight:600;color:var(--ink);white-space:nowrap}
.app-main .lage-sum .facts{display:flex;gap:32px;flex:1;min-width:0}
.app-main .lage-sum .f .k{color:var(--muted);font-size:11px;margin-bottom:2px}
.app-main .lage-sum .f .v{font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.app-main .lage-sum .f .v.warn{color:var(--brass-dk);font-weight:600}
.app-main .lage-sum .more{font-size:13px;color:var(--ink);font-weight:600;
  white-space:nowrap;margin-left:auto}

/* Website-Regeln nicht in die Anwendung durchschlagen lassen */
.app-main,.app-main h1,.app-main h2,.app-main h3,.app-main button,.app-main a{
  text-transform:none;letter-spacing:normal}
.app-main .stats4-eyebrow,.app-main .chap .nm,.app-main .sv .tag,.app-main .beta{
  text-transform:uppercase}
.app-main .card.hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  overflow:hidden}

/* Umschalter über dem Fenster */
.app-sw .tabs{margin-left:0}
.app-sw > span{font-family:var(--cond);font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}

/* Unterlagen-Karte, Regeln aus etw-report-brand.html */
.app-main .pr-src{background:#fff;border:1px solid var(--hair);border-radius:var(--radius);padding:12px 16px;}
.app-main .pr-src .sh{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.app-main .pr-src .sh .ic{color:var(--ink-3);display:grid;place-items:center}
.app-main .pr-src .sh .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.app-main .pr-src .sh .t{font-family:var(--cond);font-weight:700;font-size:17px}
.app-main .pr-src .sh .n{margin-left:auto;font-size:11px;color:var(--muted)}
.app-main .pr-src .docs{display:grid;}
.app-main .pr-doc{display:flex;align-items:center;gap:12px;border-radius:var(--radius);padding:8px 12px;background:#F3F1EA}
.app-main .pr-doc .th{flex:none;width:30px;height:40px;border-radius:3px;overflow:hidden;box-shadow:var(--schein-1)}
.app-main .pr-doc .th svg{width:100%;height:100%;display:block}
.app-main .pr-doc .k{font-size:13px;font-weight:700;color:var(--ink);line-height:1.2}
.app-main .pr-doc .f{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.app-main .pr-src{margin:0}
.app-main .pr-src .docs{grid-template-columns:repeat(3,1fr);gap:8px}
.app-main .pr-doc .f{max-width:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px}

/* --- Block 3: Dokumenteneingang --- */
.dok-hd{display:flex;align-items:baseline;gap:16px;padding-bottom:16px}
.dok-hd .no{font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.dok-hd .nm{font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink)}
.dok-hd .ln{flex:1;height:1px;background:var(--hair)}
.dok-hd .st{font-size:11px;font-weight:600;color:var(--critical)}
.dok h1{font-family:var(--cond);font-weight:700;font-size:30px;letter-spacing:-.02em;
  line-height:1.08;color:var(--ink)}
.dok .intro{margin-top:8px;font-size:17px;font-weight:600;line-height:1.5;color:var(--ink);
  max-width:640px;text-wrap:pretty}
.dok .zahlen{display:flex;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin-top:16px}
.dok .zahlen b{font-family:var(--cond);font-size:24px;font-weight:700;line-height:1;color:var(--brass-dk)}
.dok .zahlen .n2 b{color:var(--nebel)}
.dok .zahlen .n3 b{color:var(--ink)}
.dok .zahlen span{font-size:15px;color:var(--muted);margin-left:8px}

.app-main .dok-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;
  align-items:start;margin-top:24px}
.dok .rubrik{display:flex;align-items:center;gap:8px;padding-bottom:8px;
  border-bottom:1px solid var(--hair);font-family:var(--cond);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.dok .rubrik .n{margin-left:auto;font-family:var(--sans);font-size:13px;font-weight:400;
  letter-spacing:normal;text-transform:none;color:var(--muted)}

.dl{display:flex;flex-direction:column}
.dl-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:0 16px;align-items:start;
  padding:8px 12px 8px 8px;border-bottom:1px solid var(--hair-2);cursor:pointer;
  border-left:2px solid transparent;}
.dl-row:hover{background:#FBF9F3}
.dl-row.an{background:#F6F2E7;border-left-color:var(--brass)}
.dl-row .th{width:48px;height:63px;border-radius:2px;overflow:hidden;
  box-shadow:var(--schein-1);display:block}
.dl-row .th svg{width:100%;height:100%;display:block}
.dl-row .kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dl-row .typ{font-size:15px;font-weight:600;color:var(--ink);line-height:1.2}
.dl-row .mehr{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brass-dk);border:1px solid rgba(180,83,9,.4);border-radius:4px;padding:2px 8px}
.dl-row .fn{margin-top:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:var(--nebel);word-break:break-all}
.dl-row .zus{margin-top:8px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.dl-row .zus b{color:var(--ink);font-weight:600}
.dl-row .end{font-size:11px;color:var(--nebel);white-space:nowrap;padding-top:3px}

.vor{background:#fff;border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--schein-2)}
.vor-hd{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--hair);background:#FBFAF6}
.vor-hd .t{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vor-hd .s{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.vor-blatt{background:#E9E5DA;padding:24px 16px;display:flex;justify-content:center}
.vor-blatt .seite{width:100%;max-width:270px;height:auto;display:block;
  box-shadow:var(--schein-2)}
.vor-fuss{padding:16px 16px 16px}
.vor-fuss .lbl{font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding-bottom:8px}
.vor-fuss ul{list-style:none;display:flex;flex-direction:column}
.vor-fuss li{display:flex;align-items:baseline;gap:8px;padding:8px 0;
  border-top:1px solid var(--hair-2);font-size:13px}

.vor-fuss li b{font-weight:400;color:var(--muted);font-size:13px}
.vor-fuss li em{font-style:normal;margin-left:auto;font-size:13px;font-weight:600;
  color:var(--ink);white-space:nowrap}

.vor-fuss .extra{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair-2);
  font-size:13px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.vor-fuss .extra b{color:var(--ink-3);font-weight:600}

/* --- Block 3: Ein Ordner rein, sortierte Akte raus --- */
/* Grund hell wie bei Legalfly (#F5F5F5), Produktfläche weiß, ohne Schatten */
.ord{padding:var(--luft) 0}
.ord-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.ord-hd{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:end;
  padding-bottom:48px}
.ord h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1.08;
  letter-spacing:-.012em;font-size:var(--titel);text-wrap:balance}
.ord-lead{font-size:17px;line-height:1.6;color:var(--text);text-wrap:pretty}

.ord-kopf,.ord-z{display:grid;grid-template-columns:1fr 44px 1fr;align-items:baseline;gap:0 20px}
.ord-kopf{padding-bottom:12px}
.ord-kopf span{font-family:var(--cond);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted)}
.ord-tab{border-top:1px solid #dcdfe4}
.ord-z{padding:16px 0;border-bottom:1px solid #e3e6ea}
.ord-z:last-child{border-bottom:0}
.ord-z .roh{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  line-height:1.4;color:var(--nebel);word-break:break-all}
.ord-z .pf{justify-self:center;color:var(--nebel);font-size:15px;line-height:1}
.ord-z .erk{font-size:15px;font-weight:600;color:var(--navy)}
.ord-fuss{margin-top:24px;font-size:15px;color:var(--muted)}
.ord-fuss b{color:var(--navy);font-weight:600}

.ord .app-sw{margin-top:64px;padding-bottom:16px}
.ord .app-buehne{max-width:none;margin:0;padding:0}
.ord .app-fenster{overflow:hidden}

@media (max-width:900px){
  .ord-hd{grid-template-columns:1fr;gap:16px}
  .ord-kopf{display:none}
  .ord-z{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .ord-z .pf{display:none}
}

/* echte Seitenbilder aus dem Produkt */
.dl-row .th{background:#fff}
.dl-row .th img.thb{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.vor-blatt img.seite{width:100%;max-width:270px;height:auto;display:block;
  box-shadow:var(--schein-2)}

.vor-doc{display:none}
.vor-doc.an{display:block}

/* Dokumentliste läuft nach unten aus: es kommen noch mehr */
.dl-sp{position:relative}
.dl{padding-bottom:8px}
.dl-mehr{position:relative;margin-top:-70px;height:86px;margin-bottom:8px;pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.94) 58%,
    #fff 100%);display:flex;align-items:flex-end;justify-content:center}
.dl-mehr span{pointer-events:auto;font-size:13px;color:var(--muted);padding-bottom:4px}
.dl-mehr b{color:var(--ink);font-weight:600}

/* Laufbahn: Fenster bleibt stehen, die Akte läuft durch */
.ord-run{position:relative}
.ord-stick{position:sticky;top:32px}
.dl-row{transition:background .25s,border-color .25s,opacity .25s}
.dl-row:not(.an){opacity:.62}
.dl-row.an{opacity:1}
.vor-doc{animation:vor-auf .35s ease both}
@keyframes vor-auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .dl-inner{transition:none}
  .vor-doc{animation:none}
}

/* Beispiel-Umschalter der Website (nicht Teil des Produkts) */
.bsp{display:flex;align-items:center;gap:12px;margin-top:24px}
.bsp > span{font-family:var(--cond);font-size:13px;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted)}
.bsp .tabs{margin-left:0}
.ord .bsp{margin-top:0}
.app-sw{display:flex;align-items:center;gap:16px;padding-bottom:16px}

/* Beispiel-Umschalter: in beiden Blöcken rechtsbündig über der Fläche */
.ord .app-sw{justify-content:flex-end}
.panel .tabs{background:#eef0f4;margin-left:auto}

/* Ordnerblock zum Vergleich auf Verlaufsfläche */
.ord.verlauf{background:
  radial-gradient(90% 70% at 88% 4%, rgba(224,138,46,.40) 0%, rgba(224,138,46,0) 60%),
  linear-gradient(150deg,#f7efe2 0%,#f2e6d4 48%,#ead9c2 100%)}
.ord.verlauf .ord-tab{border-top-color:color-mix(in srgb, var(--bericht) 16%, transparent)}
.ord.verlauf .ord-z{border-bottom-color:color-mix(in srgb, var(--bericht) 10%, transparent)}
.ord.verlauf .ord-z .roh{color:#8d8272}
.ord.verlauf .tabs{background:rgba(255,255,255,.6)}

/* --- Ordnerblock: randlose Blaufläche mit Verlauf und diagonalem Keil ---
   Farbregel: Flächen kommen aus der Navy-Familie. Eine Bedeutungsfarbe trägt eine
   Fläche nur, wenn der Block genau davon handelt. Hier geht es um Ordnung → Blau. */
.ord{position:relative;overflow:clip;color:var(--navy);
  background:
    radial-gradient(84% 72% at 88% 0%, color-mix(in srgb, var(--grund-3) 34%, transparent) 0%, color-mix(in srgb, var(--grund-3) 0%, transparent) 58%),
    linear-gradient(155deg,var(--dunst-0) 0%,var(--dunst) 50%,var(--dunst-2) 100%)}
.ord::after{content:"";position:absolute;top:-24%;right:-6%;width:54%;height:80%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--grund-4) 26%, transparent),color-mix(in srgb, var(--grund-4) 0%, transparent));
  transform:rotate(18deg);pointer-events:none;z-index:0}
.ord > *{position:relative;z-index:1}
.ord .ord-box{display:contents}

.ord h2{color:var(--navy)}
.ord .ord-lead{color:var(--text)}
.ord .ord-kopf span{color:color-mix(in srgb, var(--bericht) 52%, transparent)}
.ord .ord-tab{border-top-color:color-mix(in srgb, var(--bericht) 28%, transparent)}
.ord .ord-z{border-bottom-color:color-mix(in srgb, var(--bericht) 13%, transparent)}
.ord .ord-z .roh{color:color-mix(in srgb, var(--bericht) 62%, transparent);font-size:13px}
.ord .ord-z .pf{color:color-mix(in srgb, var(--bericht) 30%, transparent)}
.ord .ord-z .erk{color:var(--navy);font-size:17px;font-weight:600;letter-spacing:-.005em}
.ord .ord-fuss{color:var(--muted)}
.ord .ord-fuss b{color:var(--navy)}
.ord .bsp > span{color:var(--muted)}
.ord .tabs{background:rgba(255,255,255,.66)}
.ord .app-fenster{border:1px solid color-mix(in srgb, var(--bericht) 12%, transparent);border-radius:var(--radius);
  box-shadow:var(--schein-3)}

/* --- Block 4: Einwertung. Ruhige Papierfläche nach zwei starken Blöcken. --- */

@media (max-width:1000px){.ew-grid{grid-template-columns:1fr;gap:32px}}

/* --- Block 4{background:var(--paper);padding:96px 0}
.fz .sk{display:flex;gap:3px;margin-top:8px}
.fz .sk i{width:8px;height:8px;border-radius:2px;background:var(--border);display:block}
.fz .sk.s3 i{background:var(--critical)}
.fz .sk.s2 i:nth-child(-n+2){background:var(--point)}
.fz .sk.s1 i:nth-child(1){background:var(--point)}
.fz .her{font-family:var(--cond);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;color:var(--muted);white-space:nowrap;padding-top:8px}

/* A: Ausschnitt aus der Übersicht{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:32px 32px 24px}
.vk-blatt .kopf{display:flex;align-items:baseline;gap:16px;padding-bottom:16px}
.vk-blatt .kopf .t{font-family:var(--cond);font-weight:700;font-size:20px;color:var(--ink,var(--bericht))}
.vk-blatt .kopf .n{margin-left:auto;font-size:13px;color:var(--muted)}
.vk-zahlen .a b{color:var(--brass-dk,#B45309)}
.vk-blatt .fuss{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);
  font-size:13px;color:var(--muted)}

/* C: Kapitel links{display:grid;grid-template-columns:250px 1fr;gap:0;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.vk-liste button .z{margin-left:auto;font-family:var(--cond);font-size:13px;color:var(--nebel)}
.vk-tafel.an{display:block}

@media (max-width:1000px){.vk-hd{grid-template-columns:1fr;gap:16px}}

/* Betrachter dunkel, wie ein echter PDF-Viewer */
.vor.dunkel{background:var(--grund-4b);border-color:color-mix(in srgb, var(--paper) 14%, transparent)}
.vor.dunkel .vor-hd{background:var(--grund-2b);border-bottom-color:color-mix(in srgb, var(--paper) 14%, transparent)}
.vor.dunkel .vor-hd .t{color:#dce4f0}
.vor.dunkel .vor-hd .s{color:var(--nebel)}
.vor.dunkel .vor-blatt{background:transparent;padding:24px 24px}
.vor.dunkel .vor-blatt img.seite{box-shadow:var(--schein-3)}
.vor.dunkel .vor-fuss{background:var(--grund-2b);border-top:1px solid color-mix(in srgb, var(--paper) 14%, transparent)}
.vor.dunkel .vor-fuss .lbl{color:var(--nebel)}
.vor.dunkel .vor-fuss li{border-top-color:color-mix(in srgb, var(--paper) 12%, transparent)}
.vor.dunkel .vor-fuss li b{color:var(--nebel)}
.vor.dunkel .vor-fuss li em{color:var(--paper)}
.vor.dunkel .vor-fuss .extra{border-top-color:color-mix(in srgb, var(--paper) 12%, transparent);color:var(--nebel)}
.vor.dunkel .vor-fuss .extra b{color:var(--zart)}
/* Betrachterleiste rechts oben{display:flex;align-items:center;gap:12px;margin-left:auto;color:var(--nebel);
  font-size:11px}

/* --- Betrachter nach Armins Bauform, Werte aus seinem Entwurf gemessen --- */
.btr{display:grid;grid-template-columns:1.06fr 1fr;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;align-items:stretch}
.btr-liste{padding:24px 24px 24px;border-right:1px solid var(--border);background:#fff}
.btr-kopf{display:flex;align-items:baseline;gap:12px;padding-bottom:16px}
.btr-kopf .t{font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy)}
.btr-kopf .n{margin-left:auto;font-size:13px;color:var(--muted)}

.btr-zeile{display:flex;align-items:center;gap:16px;width:100%;padding:16px 16px;
  border:1px solid transparent;border-radius:var(--radius);background:none;cursor:pointer;
  text-align:left;transition:background .18s,border-color .18s}
.btr-zeile + .btr-zeile{margin-top:8px}
.btr-zeile:hover{background:#f7f8fa}
.btr-zeile.an{background:var(--wash);border-color:var(--navy)}
.btr-zeile .th{width:34px;height:45px;flex:none;border-radius:3px;overflow:hidden;
  background:#fff;box-shadow:var(--schein-1)}
.btr-zeile .th img{width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block}
.btr-zeile .mid{min-width:0}
.btr-zeile .fn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  color:var(--navy);word-break:break-all;line-height:1.35}
.btr-zeile .typ{display:inline-block;margin-top:8px;font-family:var(--cond);font-size:13px;
  font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:color-mix(in srgb, var(--grund) 70%, transparent);
  background:var(--wash);border-radius:4px;padding:2px 8px}
.btr-zeile .mehr{display:inline-block;margin:8px 0 0 8px;font-family:var(--cond);font-size:13px;
  font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--brass-dk,#B45309);
  border:1px solid rgba(180,83,9,.4);border-radius:4px;padding:1px 8px}
.btr-zeile .st{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.btr-zeile .st svg{width:16px;height:16px;fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;stroke:var(--zart)}
.btr-zeile .st .hak svg{stroke:var(--checked)}
.btr-zeile.an .st .aug svg{stroke:var(--navy)}

.btr-blatt{background:var(--navy);display:flex;flex-direction:column;min-height:520px}
.btr-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 14%, transparent)}
.btr-bar .dn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  color:#dce4f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btr-bar .wz{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--nebel);
  font-size:11px;flex:none}
.btr-bar .wz svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round}
.btr-buehne{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 24px}
.btr-seite{display:none}
.btr-seite.an{display:block}
.btr-seite img{display:block;border-radius:4px;
  box-shadow:var(--schein-3)}
.btr-fuss{padding:12px 16px;border-top:1px solid color-mix(in srgb, var(--paper) 14%, transparent);font-size:13px;
  line-height:1.55;color:var(--nebel)}
.btr-fuss b{color:#dce4f0;font-weight:600}

@media (max-width:1000px){.btr{grid-template-columns:1fr;min-width:0}
  .btr-liste{border-right:0;border-bottom:1px solid var(--border)}}

/* Betrachter: Objektart ein- und ausblenden */
.app-buehne > .tp{display:none;position:static;visibility:visible;opacity:1;grid-area:auto}
.app-buehne > .tp.is-on{display:block}

/* Umschalter in der Listenkopfzeile, Blattgröße gleich halten */
.btr-kopf .tabs{margin-left:16px;margin-right:auto;background:#e7e9ee}
.btr-kopf .tabs button{font-size:13px;padding:4px 12px}
.btr-buehne{min-height:404px}
.btr-seite img{max-width:268px;max-height:352px;width:auto;height:auto;margin:0 auto}

/* --- Block 4: Protokolle. Flaches Wash-Grau, ruhig, ohne Verlauf. --- */
.pr{background:var(--wash);padding:var(--luft) 0;position:relative}
.pr-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.pr-hd{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:end;
  padding-bottom:40px}
.pr h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1.08;
  letter-spacing:-.012em;font-size:var(--titel);color:var(--navy);text-wrap:balance}
.pr-lead{font-size:17px;line-height:1.6;color:var(--text);text-wrap:pretty}
/* In der Produktdemo steht das Fenster ganz im Raster, nicht angeschnitten.
   Der Ueberstand von 60 px stammt aus der Zeit der breiteren Inhaltsflaeche:
   damals lief das Fenster deutlich aus dem Bild, seit der Aufraeumaktion
   endete es vier Pixel vor dem Bildschirmrand und sah aus wie abgeschnitten
   (David, 31.08.2026). Der Report darin will ohnehin gelesen werden. */
.pr .app-fenster{width:100%;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--schein-3)}
.pr .app-buehne{max-width:none;margin:0;padding:0}

@media (max-width:1000px){.pr-hd{grid-template-columns:1fr;gap:16px}
  .jahre{flex-direction:column}.jahr{border-right:0;border-bottom:1px solid var(--hair-2)}}

/* Themenkarten der Protokolle, Bauform aus dem Produkt gemessen */
.pk-titel{font-family:var(--cond);font-weight:700;font-size:24px;letter-spacing:-.01em;
  color:var(--ink,var(--bericht));line-height:1.1}

@media (max-width:1100px){.kraster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.kraster{grid-template-columns:1fr}}

/* --- Block 4: Protokolle. Regeln 1:1 aus etw-report-brand.html --- */
.pr-klar{margin-top:24px;border-radius:var(--radius);padding:20px 24px;background:var(--wash)}
.pr-klar .khd{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.pr-klar .khd svg{width:19px;height:19px;fill:none;stroke:var(--brass-dk,#B45309);
  stroke-width:1.8;stroke-linecap:round}
.pr-klar .khd .t{font-family:var(--cond);font-weight:700;font-size:17px;color:var(--ink,var(--bericht))}
.pr-klar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}

.pr-tl{position:relative;margin-top:24px;border:1px solid var(--hair-2,#EEEBE2);
  border-radius:var(--radius);padding:20px 24px 24px;background:#FAFAF7}
.pr-tl::before{content:"";position:absolute;left:42px;top:44px;bottom:32px;width:2px;
  background:var(--hair,#E4E0D5)}
.pr-yb{position:relative;margin-bottom:20px}
.pr-yb:last-child{margin-bottom:0}
.pr-yh{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pr-node{width:40px;height:40px;border-radius:50%;background:var(--ink,var(--bericht));color:#fff;
  display:grid;place-items:center;flex:none;position:relative;z-index:1}
.pr-node svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.pr-node.miss{background:#F6F5EF;border:2px dashed #C4CBD6;color:var(--muted)}
.pr-yy{font-family:var(--cond);font-weight:700;font-size:24px;color:var(--ink,var(--bericht));
  line-height:1}
.pr-yy.off{color:var(--muted)}
.pr-cards{margin-left:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  align-items:stretch}
.pr-card{background:#fff;border:1px solid var(--hair,#E4E0D5);border-radius:var(--radius);
  padding:12px 16px 16px;box-shadow:var(--schein-1);
  display:flex;flex-direction:column}
.pr-card .ch{display:flex;align-items:flex-start;gap:8px;justify-content:space-between}
.pr-card h4{font-size:13px;font-weight:700;color:var(--ink,var(--bericht));line-height:1.25}
.pr-card .sev{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;flex:none}
.pr-card .sev.hoch{color:#C0392B}
.pr-card .sev.mittel{color:var(--text)}
.pr-card .sev.niedrig{color:var(--nebel-2)}
.pr-card .spanne{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;
  color:var(--muted)}
.pr-card .spanne svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pr-card p{font-size:13px;color:var(--ink-3,var(--text));line-height:1.5;margin-top:8px}
.pr-card .q{margin-top:auto;padding-top:8px;font-size:11px;color:var(--nebel)}

.pr-umlage{margin-top:16px;border:1px solid var(--hair,#E4E0D5);border-radius:var(--radius);
  padding:16px 16px;background:#fff}
.pr-umlage .uhd{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.pr-umlage .uhd svg{width:18px;height:18px;fill:none;stroke:var(--brass-dk,#B45309);
  stroke-width:1.8;stroke-linecap:round}
.pr-umlage .uhd .t{font-family:var(--cond);font-weight:700;font-size:17px;
  color:var(--ink,var(--bericht))}
.pr-umlage table{width:100%;border-collapse:collapse}
.pr-umlage thead th{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:8px 4px;border-bottom:1px solid var(--hair,#E4E0D5)}
.pr-umlage thead th.r,.pr-umlage tbody td.r{text-align:right}
.pr-umlage tbody td{font-size:13px;color:var(--ink-2,var(--bericht-2));padding:8px 4px;
  border-bottom:1px solid var(--hair-2,#EEEBE2)}
.pr-umlage tbody tr:last-child td{border-bottom:none}
.pr-umlage td.r{font-weight:700;color:var(--ink,var(--bericht));font-variant-numeric:tabular-nums}
.pr-umlage td.jr{color:var(--muted);font-weight:500}
.pr-umlage td.r em{font-style:normal;font-weight:400;color:var(--muted);margin-left:4px}

@media (max-width:1200px){.pr-cards,.pr-klar-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:780px){.pr-cards,.pr-klar-grid{grid-template-columns:1fr}
  .pr-cards{margin-left:0}.pr-tl::before{display:none}}

/* Zählpille wie .pr-cnt im Report */
.pr-cnt{font-size:11px;font-weight:500;color:var(--text);background:#EEF0F4;padding:4px 8px;
  border-radius:var(--radius)}

/* Finanzen-Kapitel, Regeln 1:1 aus etw-report-brand.html */
.fin-lead{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.5}
.fin-kpi .ic{display:block;color:var(--ink-3,var(--text));margin-bottom:8px}
.fin-kpi .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.fin-kpi .kl{font-size:13px;color:var(--muted);margin-bottom:8px}
.fin-h .t{font-family:var(--cond);font-weight:700;font-size:17px;color:var(--ink,var(--bericht))}
.fin-aff-def .r{display:grid;grid-template-columns:190px 1fr;gap:0 16px;align-items:baseline;
  padding:12px 2px;border-bottom:1px solid var(--hair-2,#EEEBE2)}
.fin-aff-def .r:last-child{border-bottom:0}
.fin-aff-def .k{font-size:13px;font-weight:600;color:var(--ink,var(--bericht))}

/* Kapitel im Fenster umschaltbar */
.app-side .subnav li a{cursor:pointer}
/* Nur die gebauten Kapitel sind anklickbar. Der Rest bleibt sichtbar, aber
   erkennbar stumm — die Demo zeigt bewusst nur einen Teil des Berichts. */
.app-side .subnav li:not([data-k]){pointer-events:none}
.app-side .subnav li:not([data-k]) a{color:var(--nebel-2);cursor:default}
.app-side .subnav li:not([data-k]) a svg{stroke:var(--nebel-3)}
.kap-tafel.an{display:block}
@media (max-width:1000px){.fin-kpis{grid-template-columns:1fr}
  .fin-aff-def .r{grid-template-columns:1fr;gap:4px}}

/* --- Kapitel Grundbuch, Regeln woertlich aus etw-report-brand.html --- */
.app-main .dok.aus{display:none}
.app-main .gb-h{display:flex;align-items:center;gap:8px;margin:24px 0 12px}
.app-main .gb-h .t{font-family:var(--cond);font-weight:700;font-size:17px;color:var(--ink)}
.app-main .gb-sv{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600}
.app-main .gb-sv .d{width:8px;height:8px;border-radius:2px;flex:none}
.app-main .gb-sv.ok{color:var(--green-dk)} .app-main .gb-sv.ok .d{background:var(--green)}
.app-main .gb-sv.warn{color:var(--red-dk)} .app-main .gb-sv.warn .d{background:var(--red)}
.app-main .gb-guide{background:var(--wash);border-radius:var(--radius);padding:16px 16px;margin:0 0 16px}
.app-main .gb-guide .gl{font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.app-main .gb-guide .gt{font-size:13px;color:var(--ink-2);line-height:1.55}
.app-main .gb-guide .gt b{color:var(--ink);font-weight:600}
.app-main .gb-guide.warn{background:var(--hair-2)}
.app-main .gb-guide.warn .gl{color:var(--brass-dk)}
.app-main .gb-stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.app-main .gb-statc{background:#fff;border:1px solid var(--hair);border-radius:var(--radius);
  padding:16px 16px;box-shadow:var(--schein-1)}
.app-main .gb-statc .sl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:700;line-height:1.25;min-height:2.5em}
.app-main .gb-statc .sv{font-family:var(--cond);font-weight:700;font-size:17px;margin-top:8px;
  display:flex;align-items:center;gap:8px;background:none;min-height:0;position:static}
.app-main .gb-statc.warn .sv{color:var(--red-dk)}
.app-main .gb-statc .sv .ck{width:15px;height:15px;flex:none}
.app-main .gb-statc .sd{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}
.app-main .gb-tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--hair);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--schein-1)}
.app-main .gb-tbl thead th{font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 16px;
  background:#FAFAF7;border-bottom:1px solid var(--hair)}
.app-main .gb-tbl tbody td{font-size:13px;color:var(--ink-2);padding:8px 16px;
  border-bottom:1px solid var(--hair-2);vertical-align:top;line-height:1.4}
.app-main .gb-tbl tbody tr:last-child td{border-bottom:none}
.app-main .gb-tbl .nr{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;width:34px}
.app-main .gb-tbl .art{font-weight:600;color:var(--ink);white-space:nowrap}
.app-main .gb-tbl .inh{color:var(--ink-3)}
.app-main .gb-tbl .src2{font-size:11px;color:var(--muted);margin-top:3px}
.app-main .gb-tbl .flag{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;
  letter-spacing:.03em;color:var(--brass-dk);background:none;padding:3px 0}

.app-main .gb-src{background:#fff;border:1px solid var(--hair);border-radius:var(--radius);
  padding:12px 16px;margin:16px 0 20px}
.app-main .gb-src .sh{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.app-main .gb-src .sh .ic{color:var(--ink-3);display:grid;place-items:center}
.app-main .gb-src .sh .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.app-main .gb-src .sh .tt{font-family:var(--cond);font-weight:700;font-size:17px}
.app-main .gb-src .sh .n{margin-left:auto;font-size:11px;color:var(--muted)}
.app-main .gb-src .docs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.app-main .gb-doc{display:flex;align-items:center;gap:12px;border-radius:var(--radius);padding:8px 12px;
  background:#F3F1EA}
.app-main .gb-doc .th{flex:none;width:30px;height:40px;border-radius:3px;overflow:hidden;
  box-shadow:var(--schein-1)}
.app-main .gb-doc .th svg{width:100%;height:100%;display:block}
.app-main .gb-doc .k{font-size:13px;font-weight:700;color:var(--ink);line-height:1.2}
.app-main .gb-doc .f{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:220px;margin-top:2px}
.app-main .gb-own{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.app-main .gb-ownc{background:#fff;border:1px solid var(--hair);border-radius:var(--radius);
  padding:16px 16px;box-shadow:var(--schein-1)}
.app-main .gb-ownc .oh{display:flex;align-items:center;gap:12px;padding-bottom:12px;
  border-bottom:1px solid var(--hair-2)}
.app-main .gb-ownc .oh .oi{color:var(--ink-3);flex:none}
.app-main .gb-ownc .oh .oi svg{width:24px;height:24px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.app-main .gb-ownc .oh .on{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ink);
  line-height:1.2}
.app-main .gb-ownc .oh .ob{font-size:13px;color:var(--muted);margin-top:1px}
.app-main .gb-otag{margin-left:auto;flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--green-dk);background:none;padding:4px 8px;border-radius:var(--radius);
  white-space:nowrap}
.app-main .gb-ownc .orow{display:flex;justify-content:space-between;gap:16px;padding:12px 0 0;
  font-size:13px}
.app-main .gb-ownc .orow .l{color:var(--muted)}
.app-main .gb-ownc .orow .v{color:var(--ink-2);font-weight:500;text-align:right}
.app-main .gb-lastfrei{display:flex;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--hair);border-radius:var(--radius);padding:16px 20px;
  box-shadow:var(--schein-1)}
.app-main .gb-lastfrei .lf-t{font-weight:700;color:var(--ink);font-size:13px}
.app-main .gb-lastfrei .lf-s{font-size:13px;color:var(--muted);margin-top:2px}
.app-main .gb-lead{font-size:13px;color:var(--ink-3);line-height:1.55;margin-top:8px}

/* --- Originaldokument aufklappen, nachgebaut nach der Live-Ansicht ---
   Das Dokument ueberdeckt den Bericht NICHT: der Inhalt wird schmaler,
   der Betrachter legt sich als eigene Karte daneben. --- */
.app-main .gb-doc{cursor:pointer;border:1px solid transparent;transition:border-color .2s}
.app-main .gb-doc:hover{border-color:var(--hair)}
.app-main .gb-doc.an{border-color:var(--navy);background:#fff}
.app-main .dok{display:flex;align-items:flex-start}
.gb-body{flex:1;min-width:0}
.pdfv{position:relative;align-self:flex-start;flex:none;width:0;overflow:hidden;display:flex;flex-direction:column;
  background:#fff;border:1px solid transparent;border-radius:var(--radius);
  transition:width .44s cubic-bezier(.22,.61,.36,1),margin-left .44s cubic-bezier(.22,.61,.36,1)}
.pdfv.auf{width:clamp(300px,36%,400px);margin-left:24px;border-color:var(--hair);
  box-shadow:var(--schein-1)}
.pdfv-griff{position:absolute;left:-17px;top:50%;transform:translateY(-50%);width:3px;
  height:34px;border-radius:2px;background:repeating-linear-gradient(to bottom,
  var(--hair) 0 3px,transparent 3px 6px)}
.pdfv-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;flex:none;
  color:var(--ink-3);font-size:11px;position:relative}
.pdfv-bar .di{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.pdfv-bar .fn{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdfv-bar .pg{flex:none;color:var(--muted)}
.pdfv-bar .wz{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none;
  color:var(--muted)}
.pdfv-bar .wz svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round}
.pdfv-bar .zu{background:none;border:0;padding:0;cursor:pointer;color:var(--muted);
  display:grid;place-items:center}
.pdfv-blatt{padding:0 16px 0;overflow:hidden;display:flex;
  flex-direction:column;gap:8px}
.pdfv-blatt img{width:100%;height:auto;display:block;flex:none;
  border:1px solid var(--hair-2);border-radius:3px}
/* angeschnittene Folgeseite, damit das Dokument nicht am Blattende aufhoert */
.pdfv-next{flex:none;height:96px;background:#fff;border:1px solid var(--hair-2);
  border-bottom:0;border-radius:3px 3px 0 0}

/* Ist das Dokument offen, wird der Bericht schmal. Die Raster darin richten sich
   deshalb nach der Breite des Inhalts, nicht nach der des Bildschirms. */
.gb-body{container-type:inline-size}
@container (max-width: 760px){
  .gb-body .pr-cards{grid-template-columns:repeat(2,1fr)}
  .gb-body .pr-klar-grid{grid-template-columns:repeat(2,1fr)}
}
@container (max-width: 470px){
  .gb-body .pr-cards,.gb-body .pr-klar-grid,.gb-body .gb-own,
  .gb-body .gb-src .docs{grid-template-columns:1fr}
  .gb-body .gb-stat3{grid-template-columns:1fr}
}

/* --- Haus-Kapitel: Regeln woertlich aus efh-report-brand.html --- */
.app-main{--empty:#D3D6DE;--card:#FFFFFF}
.app-main .gb-src.drei .docs{grid-template-columns:repeat(3,1fr)}
.app-main .abg-card{background:#fff;border:1px solid var(--hair);border-radius:var(--radius);
  box-shadow:var(--schein-1);padding:12px 16px 8px;margin:0 0 8px}
.app-main .abg-card .hd{display:flex;align-items:center;gap:8px;margin:0}
.app-main .abg-card .hd .ic{color:var(--ink-3);display:grid;place-items:center;flex:none}
.app-main .abg-card .hd .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.app-main .abg-card .hd .t{font-family:var(--cond);font-weight:700;font-size:17px;
  letter-spacing:-.005em;color:var(--ink)}
.app-main .ab-finds{border-top:2px solid var(--ink);margin-top:2px}
.app-main .ab-f{display:grid;grid-template-columns:26px 1fr;gap:0 16px;padding:8px 2px;
  border-bottom:1px solid var(--hair-2);align-items:baseline}
.app-main .ab-f:last-child{border-bottom:0}
.app-main .ab-f .scale{padding-top:4px}
.app-main .ab-f h4{margin:0 0 3px;font-size:13px;font-weight:600;color:var(--ink);
  letter-spacing:-.005em}
.app-main .ab-f p{margin:0;font-size:13px;color:var(--ink-3);line-height:1.55}
.app-main .ab-f p.src{margin-top:8px;font-size:11px;color:var(--muted)}
.app-main .scale{display:inline-flex;gap:3px;vertical-align:middle}
.app-main .scale i{width:7px;height:7px;background:var(--empty);display:block}
.app-main .scale.s3 i{background:var(--red)}
.app-main .scale.s2 i:nth-child(-n+2){background:var(--ink)}
.app-main .scale.s1 i:nth-child(-n+1){background:var(--ink)}
.app-main .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.app-main .card{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.app-main .p{padding:16px 20px}
.app-main .makro .row{display:flex;justify-content:space-between;gap:16px;padding:4px 0;
  font-size:13px;border-bottom:1px solid var(--hair-2)}
.app-main .makro .row:last-child{border-bottom:none}
.app-main .makro .row span:first-child{color:var(--muted)}
.app-main .makro .row span:not(:first-child){color:var(--ink);font-weight:600;text-align:right}
.app-main .grp-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin:24px 0 8px}
.app-main .grp-lbl.grey{color:var(--muted)}
.app-main .au-lead{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3)}
.app-main .eb-card{margin-top:8px}
.app-main .eb-head{display:flex;align-items:flex-end;gap:24px;margin-bottom:16px;flex-wrap:wrap}
.app-main .eb-cls{font-family:var(--cond);font-weight:700;font-size:52px;line-height:.85;
  color:var(--ink)}
.app-main .eb-val .k,.app-main .eb-kind .k{font-size:13px;color:var(--muted);margin-bottom:3px}
.app-main .eb-val .v{font-family:var(--cond);font-weight:700;font-size:24px;line-height:1;
  color:var(--ink)}
.app-main .eb-kind{margin-left:auto;text-align:right}
.app-main .eb-kind .v{font-size:13px;color:var(--muted)}
.app-main .eb-scale{display:grid;grid-template-columns:repeat(9,1fr);gap:2px}
.app-main .eb-s{height:26px;display:grid;place-items:center;font-size:11px;font-weight:600;
  color:var(--ink-3);border:1px solid transparent;border-radius:2px}
.app-main .eb-s.on{border-color:var(--ink);font-weight:700;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink)}
.app-main .eb-foot{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;
  color:var(--muted)}
@container (max-width: 560px){.gb-body .g2{grid-template-columns:1fr}}

.app-side .subnav.aus{display:none}

/* Waehrend der Messung darf die Breite nicht animieren, sonst misst sie den alten Zustand */
.pr.messen .pdfv{transition:none}

/* Eigentuemer- und Grundstueckskarten, Regeln aus etw-report-brand.html */
.app-main .gb-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.app-main .gb-factc{background:#fff;border:1px solid var(--hair);border-radius:var(--radius);
  padding:16px 16px;box-shadow:var(--schein-1)}
.app-main .gb-factc .fh{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px}
/* Nicht .ft nennen: das ist auf dieser Seite die Fusszeile (Navy-Flaeche). */
.app-main .gb-factc .fh .gb-ft{font-family:var(--sans);font-weight:700;font-size:13px;
  color:var(--ink)}
.app-main .gb-factc .fr{padding:12px 0;border-top:1px solid var(--hair-2)}
.app-main .gb-factc .fr:first-of-type{border-top:none}
.app-main .gb-factc .fk{font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px}
.app-main .gb-factc .fv{font-size:13px;font-weight:500;color:var(--ink-2)}
.app-main .gb-factc .fq{font-size:11px;color:var(--muted);margin-top:1px}
.app-main .gb-ckg{width:19px;height:19px;flex:none}
.app-main .gb-veraltet{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);background:var(--hair-2);padding:4px 8px;border-radius:var(--radius);white-space:nowrap}
/* Vorgangskette der Bauakte, Regeln aus efh-report-brand.html */
.app-main .vg-row{display:grid;grid-template-columns:62px 1fr;gap:0 16px;padding:8px 2px;
  border-bottom:1px solid var(--hair-2)}
.app-main .vg-row:last-child{border-bottom:0}
.app-main .vg-row .vg-y{font-family:var(--cond);font-size:17px;font-weight:700;color:var(--ink)}
.app-main .vg-row .vg-y.muted{font-size:13px;color:var(--muted);font-weight:600}
.app-main .vg-row h4{margin:0 0 3px;font-size:13px;font-weight:600;color:var(--ink)}
.app-main .vg-row .src{margin:0;font-size:11px;color:var(--muted)}
@container (max-width: 560px){.gb-body .gb-facts{grid-template-columns:1fr}}

/* Hoehenwechsel zwischen Kapiteln weich, sonst springt das Fenster */
.pr .app-main{transition:min-height .42s cubic-bezier(.22,.61,.36,1)}
.pr.messen .app-main{transition:none}

/* Objektzeile ist der Umschalter zwischen Wohnung und Haus */
.pr .app-side .obj{cursor:pointer}
.pr .app-side .obj:hover{background:var(--sbl,var(--grund-3b))}

/* Objektart-Umschalter ueber dem Bericht */
.kap-obj{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:16px}
.kap-obj .lb{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.kap-obj .tabs{margin-left:0;background:#EDEBE4}
.kap-obj .tabs button{font-size:13px;padding:8px 16px}

/* Beide Karten im Zweispalter gleich hoch, auch wenn ein Wert umbricht */
.app-main .g2{align-items:stretch}

/* ==========================================================================
   Block 5 — Referenzen, Fassung „Editorial".
   Portrait randlos ueber die linke Spalte, Text schiebt sich ueber die
   verlaufende Kante. Gelb steht hier an genau einer Stelle.
   Die Siegel gehoeren Heckmann, nicht Propspector — sie stehen deshalb
   unter seinem Namen und nirgends sonst.
   ========================================================================== */
.rf{position:relative;overflow:clip;color:var(--paper);
  background:linear-gradient(158deg,var(--navy) 0%,var(--tief-1b) 44%,var(--tief) 100%)}
/* Diagonale Kante. Sie sitzt NICHT frei im Raum: ihr unterer Punkt liegt auf
   33,33 Prozent der Inhaltsbreite und damit exakt auf der Trennlinie zwischen
   der ersten und zweiten Stimme. Deshalb liegt sie in .rf-in, das dieselbe
   Koordinaten hat wie das Stimmenraster. */
/* Die Kante ist die Verlaengerung der Trennlinie zwischen der ersten und der
   zweiten Stimme nach oben: senkrecht, auf exakt einem Drittel der
   Inhaltsbreite, in derselben Farbe wie der Trenner darunter. Rechts davon
   liegt die aufgehellte Flaeche, die bis zum Bildschirmrand auslaeuft. */
.rf-keil{position:absolute;top:0;pointer-events:none;z-index:0;
  left:64px;right:calc(-1 * max(0px, (100vw - var(--max)) / 2));
  clip-path:polygon(calc((min(var(--max), 100vw) - 128px) / 3) 100%,
    calc(100% - var(--rf-k, 0px)) 0, 100% 0, 100% 100%);
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz) 11%, transparent),color-mix(in srgb, var(--glanz) 0%, transparent) 78%)}
/* Bewegung beim Scrollen: der Lichtschein im Hintergrund wandert, die Kante
   kippt leicht mit. Am Portrait wird NICHTS animiert — ein wanderndes Gesicht
   wirkt billig. Der untere Punkt der Kante bleibt fest auf dem Trenner. */
.rf-glanz{position:absolute;top:-30%;right:-10%;width:70%;height:110%;z-index:0;
  pointer-events:none;will-change:transform;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--glanz-2) 30%, transparent) 0%,
    color-mix(in srgb, var(--glanz-2) 10%, transparent) 46%, color-mix(in srgb, var(--glanz-2) 0%, transparent) 72%)}
@media (prefers-reduced-motion: reduce){
  .rf-glanz{transform:none !important}
  .rf-keil{--rf-k:0px !important}
}
.rf-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
/* Die Bildspalte ist exakt ein Drittel der Inhaltsbreite. Damit endet das Foto
   senkrecht genau auf dem Trenner zwischen der ersten und zweiten Stimme und
   die Kante laeuft in ihn hinein statt daneben ins Leere. */
.rf-gr{display:grid;grid-template-columns:33.3333% 1fr;align-items:stretch;
  min-height:560px}
/* Das Portrait laeuft nach links aus dem Raster. Eingezogen wirkt es wie eine
   schwebende Platte im Navy — probiert und verworfen. Text und Stimmen bleiben
   buendig mit allen anderen Bloecken. */
.rf-bild{margin-left:calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter)))}
.rf-bild{position:relative;overflow:hidden}
.rf-bild img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  display:block;filter:grayscale(.2)}
.rf-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,color-mix(in srgb, var(--tief) 0%, transparent) 34%,color-mix(in srgb, var(--grund) 92%, transparent) 82%,var(--navy) 100%)}
/* Der Text beginnt rechts der Bildkante, nicht darueber. */
.rf-tx{padding:80px 0 72px 56px;max-width:960px;margin-left:0;position:relative;z-index:2}
.rf-tx h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:var(--titel-gross);line-height:1.08;letter-spacing:-.015em;color:var(--paper)}
.rf-tx h2 span{color:var(--yellow)}
.rf-zitat{margin-top:24px;font-size:20px;line-height:1.6;color:color-mix(in srgb, var(--paper) 80%, transparent);
  max-width:58ch;text-wrap:pretty}
/* Ein Zitat, zwei Absaetze: Anfuehrungszeichen nur einmal aussen herum. */
.rf-zitat:first-of-type::before{content:"\201E"}
.rf-zitat:last-of-type::after{content:"\201C"}
.rf-wer{margin-top:32px;padding-top:24px;border-top:1px solid color-mix(in srgb, var(--paper) 18%, transparent)}
.rf-wer b{font-family:var(--serif);font-size:20px;font-weight:600}
.rf-wer span{display:block;margin-top:4px;font-size:15px;color:color-mix(in srgb, var(--paper) 60%, transparent)}
.rf-siegel{display:flex;align-items:center;gap:24px;margin-top:32px;flex-wrap:wrap}
.rf-siegel img{height:104px;width:auto;display:block}
.rf-siegel img.hi{height:38px;opacity:.9}
.rf-siegel .rf-hi{display:block;line-height:0}
.rf-siegel .rf-hi:hover img{opacity:1}

.rf-stimmen{padding:0 0 80px;display:grid;grid-template-columns:repeat(3,1fr)}
/* Alle drei Zellen gleich hoch, die Person sitzt unten — sonst haengt sie je
   nach Textlaenge auf drei verschiedenen Hoehen. */
.rf-st{padding:32px 32px 0;border-top:1px solid color-mix(in srgb, var(--paper) 20%, transparent);
  display:flex;flex-direction:column}
.rf-st + .rf-st{border-left:1px solid color-mix(in srgb, var(--paper) 12%, transparent)}
.rf-st p{font-size:17px;line-height:1.62;color:color-mix(in srgb, var(--paper) 88%, transparent);text-wrap:pretty}
.rf-st p::before{content:"\201E"} .rf-st p::after{content:"\201C"}
.rf-stwer{display:flex;align-items:center;gap:16px;margin-top:auto;
  padding-top:24px;padding-bottom:4px}
.rf-stwer img{width:74px;height:90px;border-radius:var(--radius);object-fit:cover;
  object-position:center 18%;flex:none;filter:grayscale(.15)}
.rf-stwer b{display:block;font-size:15px}
.rf-stwer span{display:block;margin-top:3px;font-size:13px;
  color:color-mix(in srgb, var(--paper) 58%, transparent)}

@media (max-width:1100px){
  .rf-gr{grid-template-columns:1fr}
  .rf-bild{height:340px}
  .rf-tx{margin-left:0;padding:56px 0 48px}
  .rf-bild{margin-left:0}
  .rf-stimmen{grid-template-columns:1fr;padding:0 0 64px}
  .rf-st + .rf-st{border-left:0}
}

/* Die drei Stimmen fahren nacheinander ein, sobald die Reihe ins Bild kommt. */
.rf-st{opacity:0;transform:translateY(46px);
  transition:opacity 1s ease, transform 1s cubic-bezier(.22,.61,.36,1)}
.rf-st.an{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rf-st{opacity:1 !important;transform:none !important;transition:none}
}

/* ==========================================================================
   Block 3 — Fluss: viele Unterlagen rein, geordnet durch die Pruefline,
   am Ende EIN Bericht. Reine CSS-Animation, keine Videodatei.
   Die senkrechte Linie sitzt auf der Mitte der Inhaltsbreite und damit auf
   derselben Achse wie die Pfeilspalte der Zuordnungstabelle darunter.
   ========================================================================== */
/* Die Flaeche laeuft bis an beide Bildschirmraender. Sonst werden die Blaetter
   an der Containerkante sichtbar und wirken, als wuerden sie hereinspringen.
   Lupe bleibt bei 50 Prozent — der Anschnitt ist symmetrisch, also ist die Mitte
   weiterhin die Mitte des Inhalts. */
.ord-fluss{--rand:max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter));
  position:relative;height:460px;overflow:hidden;
  margin:0 calc(-1 * var(--rand)) 10px}
/* Die Achse laeuft nicht durch das Glas, sondern bis zur Lupe und dahinter
   weiter. Die Luecke ist so breit wie die Linse und weich auslaufend. */
.ord-fluss-linie{position:absolute;left:50%;top:14px;bottom:14px;width:1px;z-index:2;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--grund) 0%, transparent)    0%,
    color-mix(in srgb, var(--grund) 28%, transparent) 16%,
    color-mix(in srgb, var(--grund) 28%, transparent) 24%,
    color-mix(in srgb, var(--grund) 0%, transparent)   31%,
    color-mix(in srgb, var(--grund) 0%, transparent)   69%,
    color-mix(in srgb, var(--grund) 28%, transparent) 76%,
    color-mix(in srgb, var(--grund) 28%, transparent) 84%,
    color-mix(in srgb, var(--grund) 0%, transparent)  100%)}
/* --- Lupe, geordnete Reihe: nach dem Markup und den Screenshots wiederhergestellt.
   Die Originalregeln standen hinter dem Block-6-Abschnitt und wurden vom Erzeuger
   mit abgeschnitten; seitdem liegt der Bereich zwischen zwei Marken. --- */
.ord-lupe{position:absolute;left:50%;top:50%;width:122px;height:122px;
  margin:-61px 0 0 -61px;
  z-index:4;pointer-events:none}
.ord-lupe .glas{position:absolute;left:7px;top:7px;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,
    color-mix(in srgb, var(--grund) 20%, transparent),color-mix(in srgb, var(--grund) 10%, transparent) 60%,color-mix(in srgb, var(--grund) 5%, transparent) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--grund) 14%, transparent)}
.ord-lupe svg{position:absolute;inset:0;width:100%;height:100%;fill:none;
  stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;opacity:1}

/* Rechts der Achse liegen die geordneten Blaetter ruhig da, blass und ohne Bewegung.
   Der Bereich endet vor dem Bericht, sonst schieben sie sich dahinter. */
.ord-reihe{position:absolute;left:54%;right:calc(var(--rand) + 128px);top:50%;height:0;z-index:1}
.ord-ruhe{position:absolute;top:-34px;width:52px;height:68px;border-radius:3px;background:#fff;
  transform:scale(1.46);transform-origin:center;
  border:1px solid color-mix(in srgb, var(--bericht) 16%, transparent);box-shadow:var(--schein-2)}
.ord-ruhe i{position:absolute;left:7px;right:7px;height:2px;border-radius:1px;
  background:color-mix(in srgb, var(--bericht) 16%, transparent)}
.ord-ruhe i:nth-child(1){top:10px;right:22px;background:color-mix(in srgb, var(--bericht) 30%, transparent)}
.ord-ruhe i:nth-child(2){top:20px}
.ord-ruhe i:nth-child(3){top:27px}
.ord-ruhe i:nth-child(4){top:34px;right:18px}
.ord-ruhe i:nth-child(5){top:44px}
.ord-ruhe .hk2{position:absolute;bottom:-9px;left:50%;margin-left:-9px;width:18px;height:18px;
  border-radius:50%;background:var(--checked);border:2px solid #fff}
.ord-ruhe .hk2::after{content:"";position:absolute;left:4px;top:5px;width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

.ord-blatt{position:absolute;top:50%;left:0;width:52px;height:68px;margin-top:-34px;
  border-radius:3px;background:#fff;border:1px solid color-mix(in srgb, var(--bericht) 16%, transparent);
  box-shadow:var(--schein-2);
  animation:ord-lauf var(--d) cubic-bezier(.24,.42,.32,1) infinite;
  animation-delay:var(--v)}
.ord-blatt i{position:absolute;left:7px;right:7px;height:2px;border-radius:1px;
  background:color-mix(in srgb, var(--bericht) 16%, transparent)}
.ord-blatt i:nth-child(1){top:10px;right:22px;background:color-mix(in srgb, var(--bericht) 30%, transparent)}
.ord-blatt i:nth-child(2){top:20px}
.ord-blatt i:nth-child(3){top:27px}
.ord-blatt i:nth-child(4){top:34px;right:18px}
.ord-blatt i:nth-child(5){top:44px}
.ord-blatt i:nth-child(6){top:51px;right:26px}
.ord-blatt .hk{position:absolute;top:auto;bottom:-9px;left:50%;margin-left:-9px;
  width:18px;height:18px;border-radius:50%;background:var(--checked);
  border:2px solid #fff;opacity:0;
  animation:ord-haken var(--d) cubic-bezier(.24,.42,.32,1) infinite;
  animation-delay:var(--v)}
.ord-blatt .hk::after{content:"";position:absolute;left:4px;top:5px;width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

@keyframes ord-lauf{
  /* Kein Foerderband: jedes Blatt hat eigene Dauer, eigene Flugbahn und taumelt,
     bevor es sich an der Linie ausrichtet. Weg ueber `left`, weil Prozente in
     transform sich auf das Element selbst beziehen. */
  0%   {left:-6%;  transform:translateY(var(--y1)) rotate(var(--r1)) scale(var(--s,1));opacity:0}
  14%  {opacity:var(--o,1)}
  22%  {transform:translateY(var(--y2)) rotate(var(--r2)) scale(var(--s,1))}
  36%  {transform:translateY(calc(var(--y2) * .35)) rotate(calc(var(--r2) * .3))
        scale(var(--s,1))}
  47%  {left:47%;  transform:translateY(0) rotate(0deg) scale(var(--s,1));
        opacity:var(--o,1)}
  /* Ziel ist der Bericht, nicht der Bildrand: dieselbe Kante wie .ord-bericht,
     minus dessen Breite. Sonst laufen Blaetter hinter ihm wieder heraus. */
  84%  {left:calc(100% - var(--rand) - 250px);
        transform:translateY(0) rotate(0deg) scale(var(--s,1));opacity:var(--o,1)}
  97%  {left:calc(100% - var(--rand) - 132px);
        transform:translateY(0) rotate(0deg) scale(calc(var(--s,1) * .38));opacity:0}
  100% {left:calc(100% - var(--rand) - 132px);opacity:0}
}
@keyframes ord-haken{
  0%,44%  {opacity:0;transform:scale(.5)}
  53%,78% {opacity:1;transform:scale(1)}
  88%,100%{opacity:0;transform:scale(1)}
}

/* Der Bericht am Ende: ein Blatt, groesser, mit Kopfzeile */
.ord-bericht{position:absolute;right:var(--rand);top:50%;margin-top:-58px;width:88px;height:116px;
  transform:scale(1.46);transform-origin:right center;
  border-radius:var(--radius);background:#fff;border:1px solid color-mix(in srgb, var(--bericht) 20%, transparent);
  box-shadow:var(--schein-2);z-index:3;
  animation:ord-puls 9s ease-in-out infinite}
.ord-bericht .kf{position:absolute;left:0;right:0;top:0;height:22px;background:var(--navy);
  border-radius:4px 4px 0 0}
.ord-bericht i{position:absolute;left:10px;right:10px;height:2px;border-radius:1px;
  background:color-mix(in srgb, var(--bericht) 16%, transparent)}
.ord-bericht i:nth-of-type(1){top:34px;right:44px;background:color-mix(in srgb, var(--bericht) 34%, transparent)}
.ord-bericht i:nth-of-type(2){top:46px}
.ord-bericht i:nth-of-type(3){top:54px}
.ord-bericht i:nth-of-type(4){top:62px;right:30px}
.ord-bericht i:nth-of-type(5){top:74px}
.ord-bericht i:nth-of-type(6){top:82px;right:38px}
.ord-bericht .marke{position:absolute;left:10px;bottom:9px;font-family:var(--cond);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy)}
@keyframes ord-puls{
  0%,88%{box-shadow:var(--schein-2)}
  94%   {box-shadow:var(--schein-2),0 0 0 6px rgba(46,158,99,.16)}
  100%  {box-shadow:var(--schein-2)}
}

/* Beschriftung links und rechts, ruhig */
.ord-fluss-lb{position:absolute;font-family:var(--cond);font-size:15px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--bericht) 62%, transparent);
  z-index:4}
.ord-fluss-lb{top:auto;bottom:14px;display:flex;flex-direction:column;gap:4px}
.ord-fluss-lb b{font-weight:700}
/* Die Beispiele wechseln durch: sechs Paare, je zwei Sekunden. Beide Seiten
   laufen im selben Takt, damit Name und erkannter Typ zusammengehoeren. */
.ord-fluss-lb .bsp{position:relative;display:block;height:26px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;
  font-weight:400;letter-spacing:0;text-transform:none;color:color-mix(in srgb, var(--bericht) 58%, transparent)}
.ord-fluss-lb .bsp span{position:absolute;top:0;white-space:nowrap;opacity:0;
  animation:ord-wechsel 12s linear infinite;}
.ord-fluss-lb.links .bsp span{left:0}
.ord-fluss-lb.rechts .bsp span{right:0}
/* ord-wechsel wird von fluss.py erzeugt, siehe Marke FLUSS TAKT weiter unten.
   Hier stand eine zweite, wirkungslose Fassung. */
@media (prefers-reduced-motion: reduce){
  .ord-fluss-lb .bsp span{animation:none;opacity:0}
  .ord-fluss-lb .bsp span[style*="--n:0"]{opacity:1}
}
.ord-fluss-lb.rechts .bsp{font-family:var(--cond);font-size:20px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.ord-fluss-lb.links{left:var(--rand);align-items:flex-start;text-align:left}
.ord-fluss-lb.rechts{right:var(--rand);align-items:flex-end;text-align:right}

@media (prefers-reduced-motion: reduce){
  .ord-blatt,.ord-blatt .hk,.ord-bericht{animation:none}
  .ord-blatt{opacity:1;transform:translateY(var(--y)) rotate(var(--r))}
  .ord-blatt .hk{opacity:0}
}
/* Schmaler Bildschirm, Zwischenstand: weniger und groessere Blaetter, keine
   geordnete Reihe — zwischen Lupe und Bericht bleiben auf 375 Pixel nur rund
   35 Pixel. Eine echte Mobilfassung der Grafik steht noch aus, hochkant
   angefangen und wieder entfernt, siehe docs/naechste-seiten.md. */
@media (max-width:900px){
  .ord-fluss{height:230px}
  .ord-blatt:nth-child(n+11){display:none}
  .ord-blatt{width:58px;height:76px;margin-top:-38px}
  .ord-bericht{width:76px;height:100px;margin-top:-50px}
  .ord-reihe{display:none}
}

/* Kopfzeile auf dem Handy: Navigation und Login fallen weg, es bleiben Wortmarke,
   Objektumschalter und der Knopf. Ein Klappmenue fehlt noch. */
@media (max-width:900px){
  .hd-in{gap:8px;flex-wrap:nowrap}
  .nav,.hd-login{display:none}
  .brand{flex:none}
  .aud{margin-left:auto}
  .aud > span{display:none}
  .aud-sw a{font-size:13px;padding:4px 12px}
  .hd-cta{padding:8px 12px;font-size:13px;letter-spacing:.03em;white-space:nowrap}
  /* Auf schmalen Bildschirmen faellt das erste Wort des Knopfs weg:
     „Kostenlos starten" wird zu „starten". */
  .hd-cta .lang{display:none}
  .brand span{font-size:20px}
  /* Kopf auf derselben Rasterlinie wie der Inhalt darunter, nicht auf
     einem eigenen Festwert (David, 31.08.2026). */
  .hd-in{padding-left:var(--gutter);padding-right:var(--gutter)}
}

/* >>> EINWERTUNG ANFANG <<< */

body{background:var(--paper)}
/* Der Block zeigt ein Instrument, ist also eine Vorfuehrung. Auf welcher
   Flaeche er steht, entscheidet der Nachbar: auf der Privatseite folgt er dem
   Befund (getoent), also Papier. Auf der Profi-Seite folgt er den Preisen
   (Papier), also getoent. Siehe Flaechenregel in STAND.md. */
.ev{padding:var(--luft) 0}
.ev.getoent{background:var(--wash)}
.ev-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.ev-kopf{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding-bottom:40px}
.ev h2{margin:0;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  line-height:1.08;letter-spacing:-.012em;font-size:var(--titel-gross);color:var(--navy);
  text-wrap:balance}
.ev-lead{margin:0;padding-bottom:4px;font-size:17px;line-height:1.6;color:var(--text);
  text-wrap:pretty}
/* Fassung H1: Titel zuerst, darunter die Herkunft als Stuetze. Der Vorlauf steht
   rechts auf der Mitte des Titels. Ein Partnerlogo ueber unserer Ueberschrift
   liest sich, als waere der Abschnitt von PriceHubble. */
.ev-marke{display:flex;align-items:center;gap:16px;margin-top:24px}
.ev-marke .lb{font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--nebel);flex:none}
.ev-marke img{height:64px;width:auto}

/* Die Flaeche traegt das Instrument. Konstruktion wie die Buehne in Block 2,
   nur in Blau — Amber steht auf dieser Seite fuer Befunde. */
.ev-blatt{position:relative;overflow:hidden;border-radius:var(--radius);padding:32px 40px 32px;
  background:
    radial-gradient(120% 150% at 88% 0%, color-mix(in srgb, var(--glanz-4) 22%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 62%),
    linear-gradient(145deg,#eef2f8 0%,#e7edf6 45%,#e0e8f3 100%)}
/* Die Facette liegt unten, der Verlauf nach unten hin heller darueber. So wird
   die Flaeche zum Ende hin ruhig und der Verlauf steht fast auf Weiss — wie im
   Report. Der Inhalt liegt ueber beidem. */
.ev-blatt::before{content:"";position:absolute;top:-120%;right:-4%;width:32%;height:340%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-4) 20%, transparent),color-mix(in srgb, var(--glanz-4) 0%, transparent));
  transform:rotate(18deg);pointer-events:none}
.ev-blatt::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.55) 62%,
    rgba(255,255,255,.92) 100%)}
.ev-blatt > *{position:relative;z-index:1}
/* Titel oben, Konfidenz als eigene Zeile darunter. Nebeneinander gestellt
   brach beides in schmalen Spalten um und stand schief (David, 31.08.2026,
   Vorlage ist die Ansicht im Produkt). */
.ev-latte-kopf{display:block}
.ev-latte-kopf .t{display:block;font-family:var(--cond);font-size:13px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* Konfidenz wie im Produkt: drei steigende Balken, gruen, danach der Text */
.ev-latte-kopf .konf{display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  font-size:15px;font-weight:500;color:var(--text);white-space:nowrap}
.ev-latte-kopf .konf svg{width:15px;height:15px;fill:var(--checked);flex:none}
.ev-latte-kopf .konf svg.i{fill:none;width:15px;height:15px;color:var(--nebel);margin-left:2px}

/* Choreografie: Das Gerät kalibriert (die Spanne öffnet sich), misst (der
   Angebotspreis läuft), berichtet (die Einordnungen) und schließt (das Fazit).
   Die Zeiten bauen aufeinander auf, deshalb stehen sie hier beieinander. */
.ev-blatt{--takt:cubic-bezier(.22,.61,.36,1)}
/* ACHTUNG: Die Spanne oeffnet sich NICHT. Der Anfangswert left/right:50% stand
   frueher hier, wurde aber weiter unten von der Grundregel .ev-latte .spanne
   (left/right:6%) ueberschrieben, die spaeter in derselben Datei steht. Beide
   Zustaende waren dadurch 6%. Um die Bewegung einzuschalten, muss der
   Anfangswert NACH der Grundregel stehen, nicht davor. Solange das nicht
   entschieden ist, steht hier nur der Uebergang. */
.ev-latte .spanne{transition:left .55s var(--takt),right .55s var(--takt)}
.ev-blatt.laeuft .ev-latte .spanne{left:6%;right:6%}

/* Der Verlauf zeichnet sich selbst, sobald er im Bild steht. Bei einer
   Zeitreihe ist das die einzige Bewegung, die inhaltlich stimmt. */
.ev-svg .band{opacity:0;transition:opacity .7s ease .35s}
.ev-svg .linie{stroke-dasharray:var(--lang);stroke-dashoffset:var(--lang);
  transition:stroke-dashoffset 1.3s var(--takt)}
/* Auch hier: das Einblenden der Punkte ist tot. Weiter unten setzt
   .ev-svg .pkt circle{transition:r .12s} den Uebergang neu und wirft den
   Deckkraft-Uebergang weg, die Punkte springen also hart auf. Einschalten
   hiesse dort transition:r .12s,opacity .3s ease zu schreiben. */
.ev-svg .pkt circle{opacity:0}
.ev-svg .angebot,.ev-svg .angebot-pkt{opacity:0;transition:opacity .6s ease 1.25s}
.ev-plot.gezeichnet .ev-svg .band{opacity:1}
.ev-plot.gezeichnet .ev-svg .linie{stroke-dashoffset:0}
.ev-plot.gezeichnet .ev-svg .angebot,
.ev-plot.gezeichnet .ev-svg .angebot-pkt{opacity:1}

/* Die Latte zeigt drei Zonen: aussen der Rest des Marktes, in der Mitte die
   ermittelte Spanne, darin der Weg vom Marktwert zum Angebot. */
.ev-latte{position:relative;height:6px;border-radius:3px;background:color-mix(in srgb, var(--bericht) 10%, transparent);
  margin-top:80px}
.ev-latte .spanne{position:absolute;top:0;bottom:0;left:6%;right:6%;border-radius:3px;
  background:#eee7d6}
/* Bewegung: der Angebotspreis laeuft vom Marktwert nach rechts, sobald der
   Block ins Bild kommt. Start- und Zielwert stehen hier, nicht im Markup —
   Inline-Positionen wuerden den Uebergang ueberschreiben.
   Marktwert 379.000 liegt bei 50 %, Angebot 399.000 bei 87 % der Spanne. */
.ev-latte{--start:50%;--ziel:87%;--dauer:1.15s;--kurve:cubic-bezier(.22,.61,.36,1)}
.ev-latte .fuell{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--point);
  left:var(--start);right:calc(100% - var(--start));
  transition:right var(--dauer) var(--kurve) .55s}
.ev-latte .pkt.markt{left:var(--start)}
.ev-latte .pkt.an{left:var(--start);
  transition:left var(--dauer) var(--kurve) .55s}
.ev-blatt.laeuft .ev-latte .fuell{right:calc(100% - var(--ziel))}
.ev-blatt.laeuft .ev-latte .pkt.an{left:var(--ziel)}
.ev-blatt.laeuft .ev-preis{left:var(--ziel);opacity:1}
.ev-latte .pkt{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:50%;background:#fff;border:2px solid var(--navy)}
.ev-latte .pkt.an{border-color:var(--point)}
.ev-preis{position:absolute;bottom:24px;left:var(--start);opacity:0;
  transform:translateX(-50%);text-align:center;white-space:nowrap;
  transition:left var(--dauer) var(--kurve) .55s, opacity .45s ease .6s}
.ev-preis .w{display:block;font-family:var(--disp);font-weight:700;font-size:30px;
  line-height:1;color:var(--point)}
.ev-preis .l{display:block;margin-top:4px;font-family:var(--cond);font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--point)}
.ev-preis .strich{position:absolute;left:50%;top:100%;width:1px;height:20px;
  background:var(--point)}
.ev-werte{display:flex;justify-content:space-between;margin-top:16px}
.ev-werte .w{font-family:var(--sans);font-weight:600;font-size:20px;line-height:1;
  color:var(--muted)}
.ev-werte .l{margin-top:8px;font-family:var(--cond);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ev-werte .mitte{text-align:center}
.ev-werte .mitte .w{font-family:var(--disp);font-weight:700;font-size:38px;color:var(--navy)}
.ev-werte .rechts{text-align:right}

/* Einordnungen: eine Zeile je Befund, Bezeichnung in eigener Spalte.
   Bewusst ohne Bewegung — die Choreografie gehoert der Messung, nicht dem Text. */
.ev-saetze{display:grid;gap:16px;margin-top:32px;padding-top:24px;
  border-top:1px solid color-mix(in srgb, var(--bericht) 12%, transparent)}
.ev-satz{display:grid;grid-template-columns:auto minmax(150px,.24fr) 1fr;gap:12px 16px;
  align-items:baseline}
.ev-satz .pt{width:8px;height:8px;border-radius:50%;background:var(--checked);
  transform:translateY(-2px)}
.ev-satz.warn .pt{background:var(--point)}
.ev-satz b{font-size:15px;font-weight:600;color:var(--navy)}
.ev-satz p{margin:0;font-size:15px;line-height:1.5;color:var(--text)}
.ev-satz em{font-style:normal;font-weight:600;color:var(--navy)}

/* Fazit: die Beschriftung schlaegt rechts an einer breiten Spalte an,
   der Trennstrich sitzt bei rund 38 Prozent der Breite. */
.ev-fazit{display:grid;grid-template-columns:.62fr 1fr;gap:32px;align-items:center;
  margin-top:32px;padding:24px 32px;border-radius:var(--radius);color:var(--paper);
  background:linear-gradient(145deg,var(--tief),var(--tief))}
.ev-fazit .lb{font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(250,251,245,.5);text-align:right;padding-right:32px;
  border-right:1px solid rgba(250,251,245,.2)}
.ev-fazit b{display:block;font-family:var(--disp);font-weight:700;font-size:20px;
  letter-spacing:-.01em}
.ev-fazit p{margin:4px 0 0;font-size:15px;line-height:1.5;color:rgba(250,251,245,.78)}

/* Entwicklung */
.ev-trend{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;margin-top:40px;
  padding-top:32px;border-top:1px solid color-mix(in srgb, var(--bericht) 12%, transparent);align-items:start}
.ev-trend .lb{display:block;font-family:var(--cond);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--nebel)}
.ev-trend .gross{margin-top:8px;font-family:var(--disp);font-weight:700;font-size:24px;
  color:var(--navy)}
.ev-trend .gross em{font-style:normal;color:var(--checked)}
.ev-trend-txt p{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--text);max-width:44ch}
.ev-trend .qm{margin-top:24px;border-top:1px solid color-mix(in srgb, var(--bericht) 12%, transparent)}
.ev-trend .qm > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid color-mix(in srgb, var(--bericht) 12%, transparent)}
.ev-trend .qm span{font-size:15px;color:var(--text)}
.ev-trend .qm b{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--navy)}
.ev-trend .qm i{font-style:normal;font-family:var(--sans);font-size:13px;font-weight:500;
  color:var(--muted)}
.ev-trend-kopf b{display:block;font-size:15px;font-weight:600;color:var(--navy)}
.ev-trend-kopf span{font-size:13px;color:var(--muted)}
.ev-svg{width:100%;height:auto;margin-top:8px;overflow:visible}
.ev-svg .raster line{stroke:color-mix(in srgb, var(--bericht) 12%, transparent);stroke-width:1}
.ev-svg .raster text{font-family:var(--sans);font-size:11px;fill:var(--nebel);text-anchor:end}
.ev-svg .band{fill:color-mix(in srgb, var(--bericht) 10%, transparent);stroke:none}
.ev-svg .linie{fill:none;stroke:var(--navy);stroke-width:2;stroke-linejoin:round}
.ev-svg .pkt circle{fill:#fff;stroke:var(--navy);stroke-width:2}
.ev-svg .angebot{stroke:var(--point);stroke-width:1.4;stroke-dasharray:3 4}
.ev-svg .angebot-pkt{fill:var(--point)}
.ev-svg .jahre text{font-family:var(--sans);font-size:11px;fill:var(--nebel);text-anchor:middle}
.ev-svg .jahre text.an{fill:var(--navy);font-weight:600}
/* Mauszeiger: Fuehrungslinie, hervorgehobener Punkt, Anzeige daneben */
.ev-plot{position:relative}
.ev-svg .fuehrung{stroke:color-mix(in srgb, var(--bericht) 35%, transparent);stroke-width:1;opacity:0;
  transition:opacity .12s}
.ev-plot.an .ev-svg .fuehrung{opacity:1}
.ev-svg .pkt circle{transition:r .12s}
.ev-svg .pkt circle.zeig{r:5.4;fill:var(--navy)}
.ev-tip{position:absolute;transform:translate(-50%,-100%);pointer-events:none;
  background:var(--navy);color:var(--paper);border-radius:var(--radius);padding:8px 12px;
  white-space:nowrap;box-shadow:var(--schein-3);z-index:2}
.ev-tip b{display:block;font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.1}
.ev-tip span{display:block;margin-top:3px;font-family:var(--cond);font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(250,251,245,.6)}
.ev-legende{display:flex;gap:24px;margin-top:8px;font-size:13px;color:var(--muted)}
.ev-legende i{display:inline-block;margin-right:8px;vertical-align:middle}
.ev-legende .fl{width:18px;height:9px;background:color-mix(in srgb, var(--bericht) 9%, transparent);border-radius:2px}
.ev-legende .li{width:18px;height:0;border-top:1.4px dashed var(--point)}

.ev-fuss{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--border);
  font-size:13px;color:var(--nebel)}
.ev-ph{display:inline-flex;align-items:center;gap:8px}
.ev-ph img{height:26px;width:auto}
/* Wer Bewegung abbestellt hat, sieht sofort den Endzustand */
@media (prefers-reduced-motion: reduce){
  .ev-latte .fuell,.ev-latte .pkt.an,.ev-preis,.ev-latte .spanne,
  .ev-svg .band,.ev-svg .linie,.ev-svg .angebot,
  .ev-svg .angebot-pkt,.ev-svg .pkt circle{transition:none}
  .ev-latte .spanne{left:6%;right:6%}
  .ev-svg .band,.ev-svg .angebot,.ev-svg .angebot-pkt,.ev-svg .pkt circle{opacity:1}
  .ev-svg .linie{stroke-dashoffset:0}
  .ev-latte .fuell{right:calc(100% - var(--ziel))}
  .ev-latte .pkt.an{left:var(--ziel)}
  .ev-preis{left:var(--ziel);opacity:1}
}

@media(max-width:1000px){
  .ev-kopf,.ev-trend{grid-template-columns:1fr;gap:24px}
  .ev-satz{grid-template-columns:auto 1fr;gap:8px 12px}
  .ev-satz p{grid-column:2}
  .ev-fazit{grid-template-columns:1fr;gap:12px}
  .ev-fazit .lb{border-right:0;padding-right:0;text-align:left}
  .ev-blatt{padding:24px 20px}
}
/* <<< EINWERTUNG ENDE >>> */

/* >>> BLOCK4 KOMPAKT ANFANG <<< */
/* Produktdemo passt auf einen Bildschirm: Kopf in eine Zeile, Bericht
   verkleinert, Kapitel als Auszug. Messwerte und Begruendung in STAND.md. */
.pr .app-main .dok .auslass{display:none}
@media (min-width:1051px){
  /* 1: Kapitelkopf in eine Zeile */
  .pr .app-main .dok-hd{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
    margin-bottom:12px}
  .pr .app-main .dok-hd h2,.pr .app-main .dok-hd h3{margin:0}
  .pr .app-main .dok-hd p{font-size:13px;margin:0}

  /* 2: nur die Berichtsspalte verkleinern, der Betrachter daneben bleibt */
  .pr .app-main .gb-body{zoom:.66}

  /* 3: Auszug statt ganzem Kapitel */
  .pr .app-main .dok{position:relative;max-height:620px;overflow:hidden}
  .pr .app-main .dok::after{content:"";position:absolute;left:0;right:0;bottom:0;
    height:110px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 78%);
    pointer-events:none;z-index:2}
  .pr .app-main .dok .auslass{position:absolute;left:0;right:0;bottom:0;z-index:3;
    display:flex;align-items:center;gap:16px;padding:0 2px 4px}
  .pr .app-main .dok .auslass i{flex:1;height:0;border-top:1px dashed color-mix(in srgb, var(--bericht) 28%, transparent)}
  .pr .app-main .dok .auslass span{font-family:var(--cond);font-size:11px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--bericht) 55%, transparent);white-space:nowrap}
}
/* <<< BLOCK4 KOMPAKT ENDE >>> */

/* >>> BLOCK6 ANFANG — nur dieser Bereich wird ersetzt, nichts dahinter <<< */
/* ==========================================================================
   Block 6 — Preise. Fassung F.

   Eine zusammenhaengende Tafel mit Haarlinien, kein Satz freistehender Karten:
   die Referenzen (Linear, PamPam) machen beide genau das, und es passt zur
   Haarlinien-Sprache der uebrigen Bloecke. Der empfohlene Tarif steht als
   Navy-Einsatz oben und unten aus der Tafel heraus — Hervorhebung durch Farbe
   und Versatz statt durch einen weiteren Kasten mit Schlagschatten.

   Die grosse Zahl ist der Preis JE REPORT, der Gesamtpreis klein darunter.
   Grund: die Tafel soll als Leiter 59 - 29 - 20 lesbar sein. Waeren die Pakete
   gross gesetzt, stuenden 290 gegen 130 und der guenstigere Tarif saehe teurer aus.

   Der Abrechnungsschalter gilt nur auf der Profi-Seite: die Privatseite hat kein
   Abo. Die 10 Prozent liegen auf der Gebuehr, nicht auf dem Reportpreis.
   ========================================================================== */
.pz{background:var(--paper);color:var(--navy);padding:var(--luft) 0;position:relative;overflow:clip}
/* Blau-Wash von rechts oben, wie im Hero: nur Flaeche, nie Status */
.pz-wash{position:absolute;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(70% 90% at 88% 0%, color-mix(in srgb, var(--glanz) 20%, transparent) 0%, color-mix(in srgb, var(--glanz) 0%, transparent) 62%),
  linear-gradient(180deg, color-mix(in srgb, var(--glanz) 10%, transparent), color-mix(in srgb, var(--glanz) 0%, transparent) 46%)}
.pz .inner{position:relative;z-index:1}
/* Kopfform wie in Block 3 und 4: Ueberschrift links, Vorlauf rechts, unten buendig */
.pz-hd{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding-bottom:48px}
.pz h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1.08;
  letter-spacing:-.012em;font-size:var(--titel-gross);text-wrap:balance}

.pz-lead{margin-top:16px;font-size:17px;line-height:1.6;color:var(--text);text-wrap:pretty}
.pz-lead b{color:var(--navy);font-weight:600}

/* Abrechnungsschalter */

.pz-sch{display:flex;gap:4px;padding:4px;border-radius:var(--radius);width:max-content;
  margin:0 0 32px;border:1px solid var(--border);background:#fff}
.pz-sch button{font-family:var(--cond);font-size:15px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:8px 20px;border:0;border-radius:var(--radius);cursor:pointer;
  background:none;color:var(--muted);display:flex;align-items:center;gap:8px}
.pz-sch button.an{background:var(--navy);color:var(--paper)}
.pz-sch button i{font-style:normal;font-size:13px;letter-spacing:.02em;color:var(--point);
  font-weight:700}
.pz-sch button.an i{color:var(--yellow)}

/* Tafel */
.pz-tafel{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;
  border:1px solid var(--border);border-radius:var(--radius)}
.pz-tafel.zwei{grid-template-columns:repeat(2,1fr)}
/* Zwei Spalten brauchen keine volle Seitenbreite. Kopf, Tafel und Fusszeile
   laufen auf derselben Spur, sonst stehen drei verschiedene Kanten uebereinander. */
.pz.schmal .pz-hd,.pz.schmal .pz-tafel,.pz.schmal .pz-fuss{max-width:1040px;
  margin-left:auto;margin-right:auto}
.pz.schmal .pz-hd{width:100%}
/* Auf der Privatseite folgt die Fusszeile direkt auf die Tafel. Die hervorgehobene
   Karte steht 24 px darunter hinaus, also braucht die Zeile mehr Abstand als die
   22 px, die zwischen Tafel und Leiste reichen. */
.pz.schmal .pz-fuss{margin-top:24px}
/* Zahlungsarten: eine ruhige Zeile, keine Kaesten, erst unterhalb der Tafel.
   Aber in Farbe: Zahlungssiegel wirken ueber Wiedererkennung, und die ist in
   Graustufen weg — dann stehen dort nur graue Kaestchen. Klein halten reicht,
   um sie als Fussnote zu setzen. Der Abstand traegt den Ueberstand der
   hervorgehobenen Karte. */
.pz-zahlung{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;
  margin-top:56px;padding-top:24px;border-top:1px solid var(--border)}
.pz-zahlung .lb{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  color:var(--muted)}
.pz-zahlung .lb svg{width:15px;height:15px;color:var(--checked)}
.pz-zahlung .logos{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pz-zahlung img{height:24px;width:auto;border-radius:4px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--grund) 10%, transparent)}
.pz-sp{padding:32px 32px 32px;display:flex;flex-direction:column;
  border-left:1px solid var(--border)}
.pz-sp:first-child{border-left:0}
/* Der empfohlene Tarif steht aus der Tafel heraus */
.pz-sp.top{margin:-24px -1px;padding:56px 32px 56px;border:0;border-radius:var(--radius);
  color:var(--paper);box-shadow:var(--schein-einsatz);
  /* Gleiche Konstruktion wie die Buehne in Block 2, nur in Navy statt Amber:
     Schein oben rechts ueber einem 145-Grad-Grundverlauf, dazu die gedrehte Facette. */
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 6%, color-mix(in srgb, var(--glanz-4) 55%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 58%),
    linear-gradient(145deg,var(--tief) 0%,var(--navy) 45%,var(--tief) 100%)}
.pz-sp.top::after{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:75%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-2) 22%, transparent),color-mix(in srgb, var(--glanz-2) 0%, transparent));
  transform:rotate(18deg);pointer-events:none;z-index:0}
.pz-sp.top > *{position:relative;z-index:1}
/* Das Addon sitzt auf dem Guthaben, nicht daneben: Pluszeichen auf der Trennlinie */
.pz-sp.zusatz{position:relative}
.pz-sp.zusatz::before{content:"+";position:absolute;left:-18px;top:52px;width:36px;height:36px;
  border-radius:50%;background:#fff;border:1px solid var(--border);display:flex;
  align-items:center;justify-content:center;font-family:var(--cond);font-size:24px;
  font-weight:700;color:var(--muted);line-height:1}
.pz-nm{font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--nebel)}
.pz-sp.top .pz-nm{color:rgba(250,251,245,.62)}
.pz-pr{margin-top:12px;display:flex;align-items:baseline;gap:8px}
.pz-pr b{font-family:var(--disp);font-weight:700;font-size:46px;line-height:1;
  letter-spacing:-.025em}
.pz-pr span{font-size:15px;color:var(--muted)}
.pz-sub{margin-top:8px;font-size:15px;color:var(--muted)}
.pz-sp.top .pz-pr span,.pz-sp.top .pz-sub{color:rgba(250,251,245,.65)}
.pz-txt{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);
  font-size:15px;line-height:1.55;color:var(--text);min-height:74px;text-wrap:pretty}
.pz-sp.top .pz-txt{border-top-color:rgba(250,251,245,.2);color:rgba(250,251,245,.72)}
.pz-sp.top .pz-txt b{color:var(--paper);font-weight:600}
.pz-ls{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:12px;flex:1}
.pz-ls li{display:flex;gap:12px;font-size:15px;line-height:1.45}
.pz-ls li span{text-wrap:balance}
.pz-hk{width:16px;height:16px;flex:none;margin-top:3px;color:var(--nebel)}
.pz-sp.top .pz-hk{color:rgba(250,251,245,.5)}
.pz-cta{margin-top:32px;display:flex;justify-content:center;border-radius:var(--radius);padding:16px 16px;
  border:1px solid var(--navy);font-family:var(--cond);font-size:15px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;transition:background .16s,color .16s}
.pz-cta:hover{background:var(--navy);color:var(--paper)}
.pz-sp.top .pz-cta{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.pz-sp.top .pz-cta:hover{background:#fff;border-color:#fff}

.pz-probe b{color:var(--navy);font-weight:600}
/* Dieselbe Flaechenkonstruktion wie die Enterprise-Karte, nur hell */
.pz-inkl{margin-top:48px;border-radius:var(--radius);padding:24px 32px;
  display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;
  position:relative;overflow:hidden;background:
    radial-gradient(130% 190% at 91% 4%, color-mix(in srgb, var(--glanz) 30%, transparent) 0%, color-mix(in srgb, var(--glanz) 0%, transparent) 60%),
    linear-gradient(145deg,#eff2f7 0%,#e9edf5 45%,#e2e8f2 100%)}
.pz-inkl::after{content:"";position:absolute;top:-120%;right:-4%;width:34%;height:340%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz) 26%, transparent),color-mix(in srgb, var(--glanz) 0%, transparent));
  transform:rotate(18deg);pointer-events:none;z-index:0}
.pz-inkl > *{position:relative;z-index:1}
.pz-inkl-lbl{font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);line-height:1.35;max-width:13ch}
.pz-inkl ul{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.pz-inkl li{display:flex;gap:8px;font-size:15px;line-height:1.4;color:var(--navy);
  text-wrap:pretty}
.pz-inkl .pz-hk{color:var(--nebel)}
.pz-fuss{margin-top:24px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;
  font-size:13px;color:var(--nebel)}
.pz-fuss a{color:var(--navy);border-bottom:1px solid var(--border);font-weight:500}
.pz-fuss a:hover{border-bottom-color:var(--navy)}

@media(max-width:1050px){
  .pz{padding:var(--luft) 0}
  .pz-hd{grid-template-columns:1fr;gap:20px}
  .pz-tafel,.pz-tafel.zwei{grid-template-columns:1fr}
  .pz-sp{border-left:0;border-top:1px solid var(--border)}
  .pz-sp:first-child{border-top:0}
  .pz-sp.top{margin:0;border-radius:var(--radius);padding:32px 32px 32px}
  .pz-sp.zusatz::before{left:50%;top:-13px;transform:translateX(-50%)}
  .pz-txt{min-height:0}
  .pz-fuss{display:block}
  .pz-fuss p + p{margin-top:8px}
}
/* <<< BLOCK6 ENDE >>> */

/* >>> FLUSS TAKT ANFANG <<< */
.ord-fluss-lb .bsp span{animation-duration:26.4s;animation-delay:calc(var(--n) * 2.4s)}
@keyframes ord-wechsel{
  0%,1% {opacity:0}
  1.45%,7.82% {opacity:1}
  9.09%,100% {opacity:0}
}
/* <<< FLUSS TAKT ENDE >>> */
/* >>> DEMO TAKT ANFANG <<< */
/* Fortschritt am laufenden Kapitel: laeuft ueber die Standzeit voll, startet
   bei jedem Wechsel neu. Zeitwert kommt aus demo_takt.py. */
.app-side .subnav li[data-k]{position:relative}
.app-side .subnav li[data-k]::after{content:"";position:absolute;left:10px;right:10px;
  bottom:2px;height:2px;border-radius:1px;background:rgba(250,251,245,.22);
  transform:scaleX(0);transform-origin:left;opacity:0}
.app-side .subnav li[data-k].on::after{opacity:1;
  animation:app-takt 3.6s linear forwards}
@keyframes app-takt{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  .app-side .subnav li[data-k]::after{display:none}
}
/* <<< DEMO TAKT ENDE >>> */
/* >>> RECHTSSEITEN ANFANG <<< */
/* Impressum, Datenschutz, AVV. Eine schmale Spalte, kein Kastenwerk: das sind
   Seiten zum Lesen, nicht zum Ueberfliegen. Die Nummer steht im Rand, damit die
   Ueberschriften auf derselben Linie beginnen wie der Text darunter. */
.hd-zurueck{margin-left:auto;font-family:var(--cond);font-size:17px;font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;color:var(--navy);opacity:.7}
.hd-zurueck:hover{opacity:1}

.lu{background:var(--paper);padding:var(--luft) 0 var(--luft)}
.lu-in{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.lu-art{font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.lu h1{margin-top:16px;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  line-height:1.08;letter-spacing:-.01em;font-size:var(--titel-seite);color:var(--navy)}
.lu-vor{margin-top:24px;font-size:17px;line-height:1.65;color:var(--text)}
.lu-vor + .lu-vor{margin-top:16px}

.lu-ab{margin-top:48px;padding-top:24px;border-top:1px solid var(--border)}
.lu-ab h2{position:relative;font-family:var(--sans);font-size:17px;font-weight:600;
  line-height:1.35;color:var(--navy)}
.lu-nr{position:absolute;right:calc(100% + 16px);top:1px;font-family:var(--cond);
  font-size:17px;font-weight:700;color:var(--muted);white-space:nowrap}
.lu-ab p{margin-top:16px;font-size:17px;line-height:1.68;color:var(--text)}
.lu-ab p b{font-weight:600;color:var(--navy)}
.lu-ab a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

.lu-li{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.lu-li li{position:relative;padding-left:20px;font-size:17px;line-height:1.6;color:var(--text)}
.lu-li li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;
  background:var(--muted)}

/* Anschriften und andere Blockangaben laufen enger als Fliesstext. */
.lu-adr{margin-top:16px;font-size:17px;line-height:1.55;color:var(--text)}

/* Was noch fehlt. Gelb ist auf der ganzen Seite die Farbe fuer Aufmerksamkeit,
   hier heisst sie: hier steht noch nichts Verbindliches. */
.lu-offen{background:var(--yellow);padding:1px 8px;border-radius:3px;
  font-family:var(--cond);font-size:.94em;font-weight:600;color:var(--navy);
  white-space:nowrap}

/* Schlussbemerkung, ruhiger als der Rest. */
.lu-schluss{margin-top:48px;padding-top:24px;border-top:1px solid var(--border);
  font-size:15px;line-height:1.6;color:var(--muted)}

.lu-druck{margin-top:24px;display:inline-flex;align-items:center;gap:8px;
  background:var(--navy);color:var(--paper);border:0;border-radius:var(--radius);
  padding:12px 20px;font-family:var(--cond);font-size:17px;font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;cursor:pointer}
.lu-druck:hover{background:var(--navy-700)}

@media print{
  .hd,.ft,.lu-druck{display:none}
  .lu{padding:0}
  .lu-offen{background:none;border-bottom:1px solid var(--navy)}
}
@media(max-width:900px){
  .lu{padding:48px 0 64px}
  .lu-nr{position:static;display:block;margin-bottom:4px}
}
/* <<< RECHTSSEITEN ENDE >>> */
/* >>> KOPF ANFANG <<< */
/* Die Kopfzeile faehrt beim Runterscrollen weg und beim Hochscrollen zurueck,
   wie auf harvey.ai. Sie nimmt sonst dauerhaft 77 Pixel Hoehe weg, die beim
   Lesen niemand braucht. */
.hd{transition:transform .28s cubic-bezier(.16,.84,.24,1)}
.hd.weg{transform:translateY(-100%)}
@media (prefers-reduced-motion: reduce){
  .hd{transition:none}
}
/* <<< KOPF ENDE >>> */

/* >>> DICHTE ANFANG <<< */
/* Dichte: jeder Block soll auf einen Bildschirm passen. Gemessen bei 1440x800,
   abzueglich Kopfzeile bleiben 724 Pixel. Siehe varianten/_bauen/dichte.py. */
:root{--luft:64px}

/* Eine Stufe fuer alle Blockabstaende statt sechs Einzelwerten. */
.bf,.uf,.kach,.ev,.ord,.pr,.pz{padding-top:var(--luft);padding-bottom:var(--luft)}
.app{padding-top:var(--luft)}
.hero-grid{padding-top:var(--luft);padding-bottom:var(--luft)}
.rf-tx{padding-top:var(--luft);padding-bottom:calc(var(--luft) - 12px)}

/* Die kleinen Grade. Die Hero-Ueberschrift bleibt, sie misst wie bei harvey. */
.nav a{font-size:15px}
.bf-lead, .ord-lead, .pr-lead, .ev-lead, .pz-lead{font-size:15px}
.hero-col p{font-size:17px}
.bf h2,.uf h2,.kach h2,.ord h2,.pr h2,.pz h2,.ev h2,.app h2{font-size:var(--titel)}

/* Der Hero ist gegen drei Anforderungen ausbalanciert: auf einen Bildschirm,
   Demo praesent, in Summe stimmig. Die sichtbare Breite des Produktfensters ist
   Fensterbreite minus linke Kante, und die linke Kante ist Rand + Textspalte +
   Spaltenabstand. Breite laesst sich also kaum holen — Hoehe dagegen schon,
   solange der Hero unter 724 Pixeln bleibt. */
.hero-grid{grid-template-columns:640px 1fr;gap:40px}
.hero h1{font-size:var(--titel-hero)}
.screen{min-height:440px}
/* <<< DICHTE ENDE >>> */

/* >>> HERO VORLAUF ANFANG <<< */
/* Der Vorlauf bricht an Satzgrenzen, die Umbrueche stehen im Text. Die Spalte
   muss deshalb breit genug sein, dass der Browser nicht zusaetzlich umbricht —
   36 Zeichen ergaben 346 Pixel neben einer 720 Pixel breiten Ueberschrift. */
.lead{max-width:640px}
@media(max-width:900px){
  /* Auf schmalen Bildschirmen sind feste Umbrueche schaedlich: sie erzeugen
     Waisen. Dort bricht der Browser. */
  .lead br{display:none}
  .lead{max-width:46ch}
}
/* <<< HERO VORLAUF ENDE >>> */

/* >>> HERO FLAECHE ANFANG <<< */
/* Schnittflaeche mit Durchscheinen. Zwei geschraegte Ebenen trennen Text und
   Produkt, beide sind durchscheinend, und ein Lichtkegel von rechts drueckt
   sich hindurch — wie ein Blatt gegen das Licht. Siehe hero_flaeche.py. */
.hero{background:
  radial-gradient(46% 60% at 82% 44%, color-mix(in srgb, var(--glanz) 34%, transparent) 0%,
    color-mix(in srgb, var(--glanz) 0%, transparent) 68%),
  linear-gradient(180deg, var(--tief) 0%, var(--tief) 100%)}
.hero::before{content:"";position:absolute;z-index:0;pointer-events:none;
  inset:-20% -10% -20% 34%;transform:skewX(-11deg);
  background:color-mix(in srgb, var(--grund-2) 82%, transparent)}
.hero::after{content:"";position:absolute;z-index:0;pointer-events:none;
  inset:-20% -10% -20% 62%;transform:skewX(-11deg);opacity:1;
  background:color-mix(in srgb, var(--grund-3) 42%, transparent)}
@media(max-width:900px){
  /* Auf schmalen Bildschirmen steht das Produkt unter dem Text, die Diagonale
     haette dann nichts mehr zu trennen. */
  .hero::before,.hero::after{display:none}
}
/* <<< HERO FLAECHE ENDE >>> */

/* >>> GEOMETRIE ANFANG <<< */
/* Zwei Faelle, mehr braucht es nicht: bedienbar ist eine Pille, alles andere
   hat acht Pixel. Die frueher scharfkantige dritte Kategorie ist raus, sie
   trug keine Information und fiel nur an den Portraets bei den Stimmen auf.
   Herkunft: nike.com, ueber styles.refero.design. Ihr Schattenverbot ist
   bewusst NICHT uebernommen. Siehe varianten/_bauen/graphit_live.py. */
/* Nikes Schattenverbot ist NICHT uebernommen (Entscheidung 28.08.2026). Es
   traegt bei ihnen, weil ihr Inhalt randlose Fotografie ist. Unser Trichter
   zeigt Blaetter, die auf einer Flaeche liegen — ohne Schatten sind das flache
   Rechtecke, und das arbeitet gegen den Papiergedanken der Hero-Flaeche. */
/* Der Knopf steckt in der Pille und darf keine eigene Rundung haben. */
.start button{border-radius:0}
/* Auf Obsidian steht unser Gelb haerter als auf Navy: dunkle Tinte darauf. */
.start button,.pz-cta,.kx-ab,.btn-y{color:var(--grund)}
/* Der Kopfknopf bleibt Obsidian — Gelb hoechstens einmal je Abschnitt. */
.hd-cta{background:var(--grund);color:var(--paper)}

/* WERBEFLAECHE: bedienbar ist eine Pille, Flaeche und Bild sind scharfkantig. */
a:not(.brand):not(.rf-hi),button,input,select,.aud-sw,.tabs,.obj,.start,
.app-sw a,.gbtn{border-radius:var(--radius) !important}
/* Zwei Faelle statt drei: bedienbar ist eine Pille, alles andere hat acht
   Pixel. Die frueher scharfkantige Kategorie trug keine Information — und sie
   fiel genau dort auf, wo sie stoerte, .rf-st, .kx-karte, .card, .gb-doc, .dok, .panel, img, video, .screen{border-radius:var(--radius)!important}
.screen{overflow:hidden}

/* ARBEITSFLAECHE: das Berichtsfenster spricht eine andere Sprache. Acht Pixel,
   auch fuer die Bedienelemente darin. Die Grenze ist der Rahmen des Fensters,
   nicht der Geschmack — deshalb steht hier ein Behaelterselektor und keine
   Liste von Ausnahmen. */
.app-fenster.app-fenster.app-fenster,
.app-fenster.app-fenster.app-fenster *{border-radius:var(--radius)!important}
/* Haarlinien und Trenner bleiben Linien, keine Kapseln. */
.app-fenster.app-fenster.app-fenster.app-fenster .ln,
.app-fenster.app-fenster.app-fenster.app-fenster hr{border-radius:0 !important}
/* <<< GEOMETRIE ENDE >>> */

/* >>> FRAGEN ANFANG <<< */
/* Block 8, die Fragen. Klasse frg, NICHT fr: fr ist im Produktfenster
   die Faktenzeile (.app-main .gb-factc .fr) und bekam sonst den
   Papier-Hintergrund dieser Sektion.
   Block 8, die Fragen. Ueberschrift links stehend, Liste rechts.
   Keine Kaesten, nur Haarlinien: die Hierarchie kommt aus Luft und Linie,
   nicht aus einem Rahmen. Siehe DESIGN.md, Abschnitt Flaechen. */
.frg{background:var(--paper);padding:var(--luft) 0}
.fr-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.fr-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.fr-halt{position:sticky;top:96px}
.frg h2{font-family:var(--disp);font-size:var(--titel);line-height:1.08;
  font-weight:700;color:var(--navy);text-wrap:balance}
.fr-lead{margin-top:16px;max-width:640px;font-size:17px;line-height:1.55;color:var(--muted)}
.fr-liste{max-width:640px}
.fr-zeile{border-top:1px solid var(--border)}
.fr-zeile:last-child{border-bottom:1px solid var(--border)}
.fr-kopf{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:20px 0;background:none;border:0;text-align:left;cursor:pointer}
.fr-f{font-size:17px;font-weight:600;line-height:1.35;color:var(--navy)}
.fr-mehr{color:var(--navy);font-weight:600;border-bottom:1px solid var(--zart);
  white-space:nowrap}
.fr-mehr:hover{border-bottom-color:var(--navy)}

/* Das Zeichen ist zwei Striche. Der senkrechte dreht weg, kein Symbol von
   der Stange. */
.fr-zeichen{position:relative;flex:none;width:16px;height:16px}
.fr-zeichen i{position:absolute;background:var(--navy);border-radius:1px}
.fr-zeichen i:first-child{left:0;right:0;top:7px;height:2px}
.fr-zeichen i:last-child{top:0;bottom:0;left:7px;width:2px;transition:transform .25s}
.fr-zeile.auf .fr-zeichen i:last-child{transform:rotate(90deg)}

.fr-koerper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s}
.fr-zeile.auf .fr-koerper{grid-template-rows:1fr}
.fr-koerper > p{overflow:hidden;opacity:0;transform:translateY(6px);
  transition:opacity .28s ease .06s,transform .28s cubic-bezier(.16,.84,.24,1) .06s}
.fr-zeile.auf .fr-koerper > p{opacity:1;transform:none}
.fr-t{max-width:640px;font-size:15px;line-height:1.6;color:var(--muted)}
.fr-t b{font-weight:600;color:var(--navy)}
.fr-zeile.auf .fr-t{padding-bottom:20px}

/* Einlaufen je Zeile beim Reinscrollen. Langsam und mit weicher Kurve: die
   Hauskurve bremst hart ab und wirkt hier wie hereingeworfen.
   Versteckt wird erst, wenn das Skript laeuft, sonst frisst ein Aussetzer
   den Inhalt. */
.fr-bereit .fr-ein{opacity:0;transform:translateY(14px)}
.fr-bereit .fr-ein.da{opacity:1;transform:none;
  transition:opacity 1.1s cubic-bezier(.33,0,.2,1) var(--vz,0ms),
             transform 1.1s cubic-bezier(.33,0,.2,1) var(--vz,0ms)}

@media (prefers-reduced-motion: reduce){
  .fr-koerper,.fr-koerper > p,.fr-zeichen i{transition:none}
  .fr-bereit .fr-ein,.fr-bereit .fr-ein.da{opacity:1;transform:none;transition:none}
}
@media (max-width:1180px){
  .frg{padding:56px 0}
  .fr-in{padding:0 var(--gutter)}
  .fr-grid{grid-template-columns:1fr;gap:32px}
  .fr-halt{position:static}
}
/* <<< FRAGEN ENDE >>> */

/* >>> WISSEN ANFANG <<< */
/* Wissen: Verzeichnis und Artikel. Das Cover ist die Kachel, kein Kasten
   darum. Die Lesespalte ist 680 breit, rund 65 Zeichen. */
.wi{background:var(--paper);padding:var(--luft) 0 var(--luft-gross)}
.wi-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.wi h1{font-family:var(--disp);font-size:var(--titel-seite);line-height:1.08;
  font-weight:700;color:var(--navy)}
.wi-lead{margin-top:16px;max-width:640px;font-size:17px;line-height:1.55;color:var(--muted)}
/* Schmal bricht nur der Browser: der feste Umbruch nach dem ersten Satz
   liess sonst eine halbe Zeile stehen (David, 31.08.2026). */
@media (max-width:700px){
  .wi-lead br{display:none}
  .wi-lead{text-wrap:pretty}
  /* Nebeneinander wird der Titel auf dem Handy in eine schmale Spalte
     gequetscht. Dort steht das Etikett wieder darueber. */
  .ar-blk-hd{flex-direction:column;align-items:flex-start;gap:2px}
}
.wi-grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:48px 32px}
/* Die Karte ist eine Saeule: Bild, Titel, Zeile. Der Titel waechst, die
   Zeile darunter sitzt unten. Ohne das stehen die Zeilen einer Reihe auf
   verschiedenen Hoehen, weil die Titel unterschiedlich oft umbrechen. */
.wi-a{display:flex;flex-direction:column;color:inherit}
.wi-t{flex:1}
.wi-bild{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--radius);
  border:1px solid color-mix(in srgb, var(--grund) 10%, transparent);
  box-shadow:var(--schein-2);
  transition:box-shadow .3s cubic-bezier(.33,0,.2,1)}
.wi-a:hover .wi-bild{box-shadow:var(--schein-2)}
.wi-t{margin-top:20px;font-size:20px;font-weight:600;line-height:1.3;color:var(--navy);
  text-wrap:balance}
.wi-k{margin-top:8px;font-family:var(--cond);font-size:13px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.wi-a:hover .wi-t{color:var(--grund-3)}

/* Artikel */
.ar{background:var(--paper);padding:var(--luft) 0 var(--luft-gross);display:block}
.ar-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
/* Aufmacher: Titel und Vorspann links, Cover rechts. */
.ar-auf{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.ar-auf-tx{max-width:560px}
.ar-k{font-family:var(--cond);font-size:13px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.ar h1{margin-top:12px;font-family:var(--disp);font-size:var(--titel-seite);
  line-height:1.1;font-weight:700;color:var(--navy);text-wrap:balance}
.ar-vor{margin-top:24px;font-size:20px;line-height:1.55;color:var(--text);
  text-wrap:pretty}
.ar-bild{display:block;width:100%;height:auto;aspect-ratio:16/10;
  object-fit:cover;border-radius:var(--radius);
  border:1px solid color-mix(in srgb, var(--grund) 10%, transparent);
  box-shadow:var(--schein-2)}
/* Zwei Spalten: links die Kapitelschiene wie im Report, rechts der Text. */
.ar-grid{margin-top:56px;display:grid;grid-template-columns:240px 1fr;gap:80px;
  align-items:start}
.ar-schiene{position:sticky;top:96px}
.ar-schiene-t{font-family:var(--cond);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding-bottom:12px;border-bottom:1px solid var(--border)}
.ar-schiene a{display:flex;gap:12px;align-items:baseline;padding:12px 0;
  font-size:13px;line-height:1.4;color:var(--muted);
  border-bottom:1px solid var(--border);transition:color .2s}
.ar-schiene a:hover,.ar-schiene a.on{color:var(--navy)}
.ar-nr{flex:none;font-family:var(--cond);font-weight:700;color:var(--zart)}
.ar-schiene a.on .ar-nr{color:var(--yellow)}

/* Fortschritt am oberen Rand, zwei Pixel. */
.ar-fort{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;
  background:transparent;pointer-events:none}
.ar-fort i{display:block;height:100%;width:0;background:var(--yellow)}

.ar-tx{max-width:780px}
.ar-tx p{margin-top:20px;font-size:17px;line-height:1.7;color:var(--text);text-wrap:pretty}
.ar-tx > h2:first-child{margin-top:0;border-top:0;padding-top:0}
/* Die kurze Antwort. Keine eigene Flaeche und keine eigene Linie: die
   Haarlinie der folgenden Ueberschrift trennt bereits. */
.ar-kurz{max-width:720px}
.ar-kurz-l{font-family:var(--cond);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ar-kurz-f{margin-top:12px;font-family:var(--disp);font-size:20px;
  font-weight:600;line-height:1.3;color:var(--navy);text-wrap:balance}
.ar-kurz-a{margin-top:12px;font-size:17px;line-height:1.7;
  color:var(--text);text-wrap:pretty}
.ar-tx h2{position:relative;margin-top:64px;font-family:var(--disp);font-size:24px;
  font-weight:600;line-height:1.25;color:var(--navy);text-wrap:balance;
  padding-top:20px;border-top:1px solid var(--border)}
/* Folgt auf das Zitat eine Ueberschrift, standen zwei Haarlinien mit 64 Pixeln
   Luft dazwischen: die untere des Zitats und die obere der Ueberschrift. Das
   liest sich als Fehler. Die untere Linie des Zitats bleibt der Trenner, die
   Ueberschrift setzt ohne eigene Linie darunter an. */
.ar-tx blockquote + h2{border-top:0;margin-top:40px;padding-top:0}
.ar-h2-nr{display:block;margin-bottom:8px;font-family:var(--cond);font-size:13px;
  font-weight:700;letter-spacing:.14em;color:var(--zart)}
.ar-tx h3{margin-top:40px;font-family:var(--cond);font-size:17px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.ar-tx ul{margin-top:16px;padding-left:0;list-style:none}
.ar-tx li{position:relative;margin-top:8px;padding-left:24px;font-size:17px;
  line-height:1.7;color:var(--text)}
.ar-tx li::before{content:"";position:absolute;left:4px;top:12px;width:8px;height:2px;
  background:var(--zart)}
/* Das Zitat ist ein Ausrufezeichen, kein Randstrich: Display-Schrift, gross,
   zwischen zwei Haarlinien. Kein Gelb, Gelb ist Handlung. */
.ar-tx blockquote{margin:40px 0;max-width:720px;padding:24px 0;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);font-family:var(--disp);font-size:20px;
  font-weight:500;line-height:1.4;color:var(--navy);text-wrap:balance}

/* Gebaute Bloecke aus dem Artikel. Im Original waren sie blau und rot
   hinterlegt; getoente Statusflaechen sind bei uns raus, und hier ist
   ohnehin nichts geprueft worden. Die Ziffer traegt die Zeile. */
/* Produktbilder aus dem Artikel. Unsere Rahmung: Haarlinie, ein Radius, der
   schwebende Schatten. Kein gezeichneter Geraeterahmen, das waere Dekoration.
   Das Bild darf breiter sein als die Lesespalte, es ist die Auflockerung. */
.ar-fig{margin:48px 0;width:calc(100% + 120px);max-width:none}
.ar-fig img{display:block;width:100%;height:auto;border-radius:var(--radius);
  border:1px solid color-mix(in srgb, var(--grund) 10%, transparent);
  box-shadow:var(--schein-2)}
.ar-fig figcaption{margin-top:16px;font-size:13px;line-height:1.55;color:var(--muted);
  max-width:640px}

/* Der Block ist eine eigene Flaeche mit Kopfzeile, wie im Original. Die
   Zeilen darin bleiben ungetoent: dort waren sie blau, rot und gelb
   hinterlegt, das waere bei uns eine Statusaussage. Die Ziffer traegt die
   Hierarchie. */
.ar-blk{margin:32px 0;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--dunst-0);overflow:hidden}
/* Der Kopf sass als weisses Band auf der getoenten Flaeche: eine Box in der
   Box, und dazwischen viel leere Luft. Jetzt liegt er auf derselben Flaeche,
   getrennt nur durch die Haarlinie. Das Etikett steht in der Zeile des Titels,
   nicht darueber, und ohne Titel ist es die ganze Zeile. */
.ar-blk-hd{display:flex;gap:16px;align-items:baseline;
  padding:12px 24px;border-bottom:1px solid var(--border)}
.ar-blk-l{flex:none;font-family:var(--cond);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--zart)}
.ar-blk-t{font-size:15px;font-weight:600;line-height:1.3;
  color:var(--navy);text-wrap:balance}
.ar-blk-liste{padding:8px 24px}
.ar-kt{display:grid;grid-template-columns:40px minmax(200px,.9fr) 1.1fr;
  gap:16px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--border)}
.ar-kt:last-child{border-bottom:0}
.ar-kt-nr{font-family:var(--cond);font-size:15px;font-weight:700;color:var(--muted)}
.ohne-nr .ar-kt{grid-template-columns:minmax(200px,.9fr) 1.1fr}
.ohne-nr .ar-kt-nr{display:none}
.ar-kt-t{font-size:15px;font-weight:600;line-height:1.4;color:var(--navy)}
.ar-kt-z{font-size:13px;line-height:1.5;color:var(--muted)}
.ar-kt-r{font-family:var(--cond);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-right:8px}

/* Phasen: die Nummer traegt die Stufe, die Positionen liegen als Raster aus
   Haarlinien darunter. Im Original waren sie blau und gruen hinterlegt, das
   waere bei uns eine Statusaussage. Der Schlusssatz bekommt den gelben
   Anstrich, weil er die Aussage des Blocks ist. */
.ar-ph-z{display:flex;gap:16px;padding:16px 24px;border-bottom:1px solid var(--border)}
.ar-ph-z:last-child{border-bottom:0}
.ar-ph-nr{flex:none;width:32px;font-family:var(--cond);font-size:15px;font-weight:700;
  line-height:1.4;color:var(--muted)}
.ar-ph-in{flex:1;min-width:0}
.ar-ph-t{font-size:15px;font-weight:600;line-height:1.35;color:var(--navy)}
.ar-ph-g{margin-top:12px;display:grid;gap:1px;background:var(--border);
  grid-template-columns:repeat(var(--sp,3),1fr);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.ar-ph-p{background:#fff;padding:8px 12px}
.ar-ph-p.weit{grid-column:span var(--span,2)}
.ar-ph-p b{display:block;font-size:13px;font-weight:600;line-height:1.35;color:var(--navy)}
.ar-ph-p span{display:block;margin-top:1px;font-size:13px;line-height:1.45;color:var(--muted)}
.ar-ph-s{position:relative;margin-top:12px;padding-left:16px;font-size:13px;
  line-height:1.55;color:var(--text)}
.ar-ph-s::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;
  border-radius:2px;background:var(--yellow)}

/* Vergleich: zwei Spalten an einer Haarlinie. Im Original waren die Zeichen
   gruen und gelb, das waere bei uns eine Statusaussage. Der Haken ist hier
   keine Pruefung, deshalb bleibt er dunkel, das Kreuz tritt zurueck. */
.ar-vg{display:grid;grid-template-columns:repeat(var(--spalten,2),1fr);
  gap:1px;background:var(--border)}
/* Die Spalte ist eine Saeule: Kopf, Liste, Fuss. Die Liste waechst, der Fuss
   sitzt unten. Damit stehen die Fuesse aller Spalten auf einer Linie, statt zu
   eiern, weil die Listen unterschiedlich hoch umbrechen. */
.ar-vg-sp{background:var(--dunst-0);padding:16px 24px 20px;
  display:flex;flex-direction:column}
.ar-vg-k{font-family:var(--cond);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.ar-vg-sp ul{flex:1;margin:12px 0 0;padding:0;list-style:none}
.ar-vg-sp li{position:relative;padding:2px 0 2px 24px;font-size:13px;
  line-height:1.5;color:var(--text)}
.ar-vg-sp li::before{content:"";position:absolute;left:4px;top:11px;
  width:8px;height:2px;background:var(--zart)}
.ar-vg-sp li.nein{color:var(--muted)}
.ar-vg-sp li:not(.nein) + li.nein{margin-top:8px;padding-top:12px;
  border-top:1px solid var(--border)}
/* Die Zeile rutscht durch das Polster nach unten, die Marke muss mit. */
.ar-vg-sp li:not(.nein) + li.nein::before{top:21px}
.ar-vg-f{margin-top:16px;padding-top:12px;border-top:1px solid var(--border);
  font-size:13px;line-height:1.5;color:var(--muted)}

/* Zeitstrahl, wie im Report: Linie, Punkte, Schritt daneben. */
.ar-schritte{margin:0;padding:16px 24px 8px 48px;list-style:none;position:relative}
.ar-schritte::before{content:"";position:absolute;left:28px;top:32px;bottom:32px;
  width:1px;background:var(--border)}
.ar-schritte li{position:relative;padding:0 0 16px 24px}
.ar-schritte li::before{content:"";position:absolute;left:-4px;top:6px;width:12px;
  height:12px;border-radius:50%;background:var(--grund);
  box-shadow:0 0 0 4px var(--dunst-0)}
.ar-sp-t{display:block;font-size:15px;font-weight:600;line-height:1.35;color:var(--navy)}
.ar-sp-z{display:block;margin-top:2px;font-size:13px;line-height:1.55;color:var(--muted)}

/* Schluss: dunkle Flaeche mit unserer Bauform, Schein oben rechts und
   gedrehter Keil. Dieselbe Konstruktion wie die Enterprise-Spalte. */
.ar-cta{position:relative;overflow:hidden;margin-top:80px;padding:40px;
  border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 88% 6%, color-mix(in srgb, var(--grund-4) 70%, transparent) 0%,
                    transparent 58%),
    linear-gradient(145deg, var(--grund-2) 0%, var(--grund) 62%, var(--tief) 100%);
  box-shadow:var(--schein-2)}
.ar-cta::after{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:75%;
  background:linear-gradient(200deg, color-mix(in srgb, var(--glanz) 22%, transparent),
                             transparent);
  transform:rotate(18deg);pointer-events:none}
.ar-tx .ar-cta-t{position:relative;z-index:1;font-family:var(--disp);font-size:24px;
  font-weight:600;line-height:1.25;color:var(--paper);text-wrap:balance}
.ar-tx .ar-cta-l{position:relative;z-index:1;margin-top:12px;max-width:480px;font-size:17px;
  line-height:1.6;color:var(--nebel)}
.ar-tx .ar-cta-a{position:relative;z-index:1;display:inline-block;margin-top:24px;
  padding:12px 24px;border-radius:var(--radius);background:var(--yellow);
  font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grund)}
/* Querverweise am Ende des Textes. Haarlinie darueber, sonst nichts. */
.ar-weiter{margin-top:64px;padding-top:24px;border-top:1px solid var(--border)}
.ar-weiter-l{font-family:var(--cond);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ar-weiter a{display:block;margin-top:12px;font-size:17px;font-weight:600;
  line-height:1.4;color:var(--navy)}
.ar-weiter a:hover{color:var(--grund-3)}
.ar-fuss{margin-top:64px;max-width:780px;padding-top:24px;border-top:1px solid var(--border)}
.ar-fuss a{font-family:var(--cond);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);border-bottom:2px solid var(--yellow);
  padding-bottom:2px}

@media (max-width:1180px){
  .wi{padding:56px 0 80px}
  .wi-grid{grid-template-columns:1fr;gap:40px}
  .ar{padding:48px 0 80px}
  .ar-auf{grid-template-columns:1fr;gap:32px}
  .ar-grid{grid-template-columns:1fr;gap:32px}
  .ar-schiene{position:static}
  .ar-tx h2{margin-top:48px}
  .ar-fig{width:100%}
  .ar-vor{font-size:17px}
}
/* <<< WISSEN ENDE >>> */

/* >>> SCHLUSS ANFANG <<< */
/* Block 9, der Schluss. Klasse slb, NICHT sl: sl traegt in der
   Produktdemo das Label der Grundbuchkarten (.gb-statc .sl) und
   bekam dadurch den dunklen Verlauf dieser Sektion.
   Block 9, der Schluss. Zahlen als Zeilen an Haarlinien wie eine Abrechnung,
   darunter die Schlusszeile mit dem einen Knopf. Flaeche wie die
   Enterprise-Spalte: Schein oben rechts, 145-Grad-Verlauf, gedrehte Facette. */
.slb{position:relative;overflow:hidden;color:var(--paper);padding:var(--luft) 0;
  background:
    radial-gradient(120% 90% at 88% 6%, color-mix(in srgb, var(--glanz-4) 55%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 58%),
    linear-gradient(145deg,var(--tief) 0%,var(--navy) 45%,var(--tief) 100%)}
.slb::after{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:75%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-2) 22%, transparent),color-mix(in srgb, var(--glanz-2) 0%, transparent));
  transform:rotate(18deg);pointer-events:none}
.sl-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sl-z{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;
  padding:24px 0;border-top:1px solid color-mix(in srgb, var(--paper) 16%, transparent)}
.sl-zahlen .sl-z:last-child{border-bottom:1px solid color-mix(in srgb, var(--paper) 16%, transparent)}
.sl-l{font-size:17px;color:var(--nebel)}
.sl-w{font-family:var(--disp);font-weight:700;font-size:46px;line-height:1;
  letter-spacing:-.02em;display:flex;align-items:baseline;gap:12px;
  font-variant-numeric:tabular-nums}
.sl-w span{font-family:var(--lauf);font-size:15px;font-weight:500;color:var(--nebel)}
.sl-cta{margin-top:80px;display:grid;grid-template-columns:1fr auto;gap:56px;
  align-items:center}
.slb h2{font-family:var(--disp);font-size:var(--titel);line-height:1.08;
  font-weight:700;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.sl-satz{margin-top:16px;font-size:17px;line-height:1.6;color:var(--nebel)}
.sl-knopf{white-space:nowrap}
/* Zeilen fahren nacheinander ein, wie die Stimmen in den Referenzen. */
@media (prefers-reduced-motion: no-preference){
  .sl-z,.sl-cta{opacity:0;transform:translateY(12px);
    transition:opacity .5s ease,transform .5s ease}
  .sl-z.an,.sl-cta.an{opacity:1;transform:none}
}
@media (max-width:860px){
  .slb{padding:var(--luft) 0}
  .sl-z{grid-template-columns:1fr;gap:4px}
  .sl-w{font-size:38px}
  .sl-cta{grid-template-columns:1fr;gap:32px;margin-top:56px;justify-items:start}
}
/* <<< SCHLUSS ENDE >>> */

/* >>> SICHERHEIT ANFANG <<< */
/* Sicherheitsseite. Dunkler Kopf mit dem Weg der Unterlagen als Strecke,
   darunter die Zusagen als Kartenraster mit Strichikonen. Keine Siegel-Optik,
   keine getoenten Statusflaechen, keine absoluten Versprechen. */
.si-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.si-kopf{position:relative;overflow:hidden;color:var(--paper);padding:var(--luft) 0;
  background:
    radial-gradient(120% 90% at 88% 6%, color-mix(in srgb, var(--glanz-4) 55%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 58%),
    linear-gradient(145deg,var(--tief) 0%,var(--navy) 45%,var(--tief) 100%)}
.si-kopf::after{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:75%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-2) 22%, transparent),color-mix(in srgb, var(--glanz-2) 0%, transparent));
  transform:rotate(18deg);pointer-events:none}
.si-kopf .si-in{position:relative;z-index:1}
.si-kopf-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.si-art{font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:color-mix(in srgb, var(--paper) 55%, transparent)}
.si-kopf h1{margin-top:16px;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  line-height:1.08;letter-spacing:-.01em;font-size:var(--titel-seite)}
.si-lead{margin-top:24px;max-width:640px;font-size:17px;line-height:1.65;color:var(--nebel)}
.si-chips{margin:32px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.si-chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
  border:1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  border-radius:var(--radius);font-family:var(--cond);font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb, var(--paper) 82%, transparent)}
.si-chips svg{width:14px;height:14px;color:var(--yellow)}

/* Die Strecke: senkrechte Linie, fuenf Stationen. Die Linie waechst beim
   Laden, die Stationen treten nacheinander an. Die letzte Station ist der
   Report und traegt als einzige das Gelb. */
.si-weg{position:relative;justify-self:end;min-width:340px}
.si-weg-t{font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:color-mix(in srgb, var(--paper) 55%, transparent);
  margin:0 0 8px 72px}
.si-weg::before{content:"";position:absolute;left:23px;top:44px;bottom:24px;width:1px;
  background:color-mix(in srgb, var(--paper) 22%, transparent);
  transform-origin:top}
.si-st{position:relative;display:flex;gap:20px;align-items:center;padding:12px 0}
.si-st-ic{flex:none;width:48px;height:48px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;position:relative;z-index:1;
  background:var(--grund-2);border:1px solid color-mix(in srgb, var(--paper) 22%, transparent)}
.si-st-ic svg{width:20px;height:20px;color:var(--paper)}
.si-st:last-child .si-st-ic{background:var(--yellow);border-color:var(--yellow)}
.si-st:last-child .si-st-ic svg{color:var(--navy)}
.si-st-tx b{display:block;font-size:17px;font-weight:600;line-height:1.35}
.si-st-tx span{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:var(--nebel)}
@media (prefers-reduced-motion: no-preference){
  .si-weg::before{animation:si-linie 1.7s ease .3s both}
  .si-st{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
  .si-st.an{opacity:1;transform:none}
}
@keyframes si-linie{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.si-liste{background:var(--paper);padding:var(--luft) 0 var(--luft)}
.si-kicker{font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:32px}
.si-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.si-k{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;box-shadow:var(--schein-2)}
.si-k svg{width:22px;height:22px;color:var(--navy)}
.si-k h2{margin-top:16px;font-size:17px;font-weight:600;line-height:1.35;color:var(--navy);
  text-wrap:balance}
.si-k p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--text)}
.si-k p a{color:var(--navy);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
.si-k.breit{grid-column:span 2}


/* Wer das baut und betreibt. Die Frage nach der Seriositaet beantwortet man
   mit Personen und ihren Rollen, nicht mit Adjektiven (David, 30.08.2026).
   Alle drei stehen nebeneinander: mit nur einem Namen sieht es aus, als hielte
   einer allein den Kopf hin. Flaeche bleibt Papier, der Wechsel kommt erst
   beim Schluss. */
.si-wer{background:var(--paper);padding:0 0 96px}
.si-wer .si-in{border-top:1px solid var(--border);padding-top:48px}
.si-wer h2{font-family:var(--disp);font-size:var(--titel-klein);line-height:1.15;
  font-weight:700;color:var(--navy);text-wrap:balance}
/* Ueberschrift links, Fliesstext rechts, dieselbe Aufteilung wie bei den
   Preisen. Ueber die volle Breite gesetzt klebte der Text links und rechts
   daneben stand eine leere Bahn. */
.si-wer-tx{display:grid;grid-template-columns:0.9fr 1.1fr;gap:72px;align-items:start}
.si-wer-p{font-size:17px;line-height:1.7;color:var(--text)}
.si-wer-p + .si-wer-p{margin-top:20px}
@media (max-width:1050px){
  .si-wer-tx{grid-template-columns:1fr;gap:24px}
  /* Feste Umbrueche sind schmal schaedlich: der Browser bricht zusaetzlich um,
     und aus dem Absatz wird eine Treppe aus halben Zeilen. Dort bricht nur der
     Browser, text-wrap:pretty haelt die Waisen raus (David, 31.08.2026). */
  .si-wer-p br{display:none}
  .si-wer-p{text-wrap:pretty}
  .si-wer-leute{gap:0}
  .si-wer-reg{margin-top:16px;padding-top:16px}
}
/* Der Registereintrag ist der einzige Beleg auf dieser Seite, den jeder
   selbst nachschlagen kann. Er steht deshalb dabei, nicht nur im Impressum. */
.si-wer-reg{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
  font-size:15px;line-height:1.6;color:var(--muted)}
.si-wer-leute{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:56px}
.si-wer-p2{border-top:1px solid var(--border);padding-top:20px}
.si-wer-name{margin-top:12px;font-family:var(--disp);font-size:20px;font-weight:600;
  color:var(--navy)}
.si-wer-rolle{margin-top:4px;font-size:15px;line-height:1.55;color:var(--muted)}
@media (max-width:860px){
  .si-wer-leute{grid-template-columns:1fr;gap:0}
  .si-wer-p2{margin-top:24px}
}
.si-schluss{position:relative;overflow:hidden;color:var(--paper);padding:var(--luft) 0;
  background:
    radial-gradient(120% 90% at 88% 6%, color-mix(in srgb, var(--glanz-4) 55%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 58%),
    linear-gradient(145deg,var(--tief) 0%,var(--navy) 45%,var(--tief) 100%)}
.si-schluss::after{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:75%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-2) 22%, transparent),color-mix(in srgb, var(--glanz-2) 0%, transparent));
  transform:rotate(18deg);pointer-events:none}
.si-schluss .si-in{position:relative;z-index:1}
.si-cta{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center}
.si-schluss h2{font-family:var(--disp);font-size:var(--titel);line-height:1.08;
  font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.si-satz{margin-top:16px;font-size:17px;line-height:1.6;color:var(--nebel)}
.si-akt{display:flex;flex-direction:column;gap:16px;align-items:center}
.si-avv{font-family:var(--cond);font-size:15px;font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;color:var(--nebel)}
.si-avv:hover{color:var(--paper)}

@media (prefers-reduced-motion: no-preference){
  .si-k{opacity:0;transform:translateY(12px);
    transition:opacity .5s ease,transform .5s ease}
  .si-k.an{opacity:1;transform:none}
}
@media (max-width:1024px){
  .si-kopf-grid{grid-template-columns:1fr;gap:48px}
  .si-weg{justify-self:start;min-width:0}
  .si-karten{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .si-kopf{padding:64px 0}
  .si-karten{grid-template-columns:1fr}
  .si-k.breit{grid-column:auto}
  .si-cta{grid-template-columns:1fr;gap:32px;justify-items:start}
  .si-akt{align-items:flex-start}
}
/* <<< SICHERHEIT ENDE >>> */

/* >>> STANDARDKI ANFANG <<< */
/* Gegenueberstellung Chat gegen Pruefprozess. Dunkler Kopf mit dem Duell
   als Bild, darunter die sieben Zeilen an Haarlinien in drei Spalten. */
.ki-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.ki-kopf{position:relative;overflow:hidden;color:var(--paper);padding:var(--luft) 0;
  background:
    radial-gradient(120% 90% at 88% 6%, color-mix(in srgb, var(--glanz-4) 55%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 58%),
    linear-gradient(145deg,var(--tief) 0%,var(--navy) 45%,var(--tief) 100%)}
.ki-kopf::after{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:75%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-2) 22%, transparent),color-mix(in srgb, var(--glanz-2) 0%, transparent));
  transform:rotate(18deg);pointer-events:none}
.ki-kopf .ki-in{position:relative;z-index:1}
.ki-kopf-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.ki-kopf h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;
  line-height:1.08;letter-spacing:-.01em;font-size:var(--titel-seite)}
.ki-lead{margin-top:24px;max-width:640px;font-size:17px;line-height:1.65;color:var(--nebel)}

/* Das Duell: zwei Tafeln auf einem gemeinsamen Sockel. Links wandern die
   Antworten (drei ungleiche Blasen), rechts steht der Katalog (drei gleiche
   Zeilen mit Haken). Nur der Pruefprozess traegt das Gelb. */
.ki-duell{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;
  justify-self:end;min-width:460px;padding-bottom:72px}
.ki-seite{position:relative;border:1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  border-radius:var(--radius);padding:20px 20px 96px;
  background:color-mix(in srgb, var(--paper) 5%, transparent)}
/* Die Haarlinie sitzt an der Karte, nicht am Text: so liegt sie in beiden
   Karten exakt auf derselben Hoehe. */
.ki-seite::after{content:"";position:absolute;left:20px;right:20px;bottom:80px;
  border-top:1px solid color-mix(in srgb, var(--paper) 14%, transparent)}
.ki-seite.ist::after{border-top-color:var(--border)}
/* Der Pruefprozess ist eine weisse Karte wie der Report selbst: auf der
   dunklen Flaeche steht Papier gegen Geist. Haken gruen wie im Produkt,
   gruen heisst geprueft. */
.ki-seite.ist{background:#fff;border-color:#fff;
  box-shadow:var(--schein-3)}
.ki-seite.ist .ki-s-t{color:var(--navy)}
.ki-seite.ist .ki-s-f{color:var(--muted)}
.ki-seite.ist .ki-katalogzeilen li{color:var(--text)}
.ki-seite.ist .ki-katalogzeilen li::before{border-color:var(--checked)}
.ki-seite.ist .ki-s-u{color:var(--muted);border-top-color:var(--border)}
.ki-s-t{font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:color-mix(in srgb, var(--paper) 82%, transparent)}
.ki-s-f{margin-top:12px;font-size:13px;line-height:1.5;
  color:color-mix(in srgb, var(--paper) 60%, transparent)}
.ki-antworten{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.ki-antworten p{font-size:13px;line-height:1.5;font-style:italic;
  color:color-mix(in srgb, var(--paper) 86%, transparent)}
.ki-katalogzeilen{margin:12px 0 0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:8px}
.ki-katalogzeilen li{position:relative;padding-left:20px;font-size:13px;
  line-height:1.5;color:color-mix(in srgb, var(--paper) 86%, transparent)}
.ki-katalogzeilen li::before{content:"";position:absolute;left:0;top:3px;
  width:10px;height:6px;border-left:2px solid var(--yellow);
  border-bottom:2px solid var(--yellow);transform:rotate(-45deg)}
.ki-s-u{position:absolute;left:20px;right:20px;top:calc(100% - 68px);margin:0;
  font-size:13px;line-height:1.5;color:var(--nebel)}
.ki-sockel{position:absolute;left:0;right:0;bottom:0;text-align:center;
  font-family:var(--cond);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:color-mix(in srgb, var(--paper) 55%, transparent);
  border-top:1px solid color-mix(in srgb, var(--paper) 22%, transparent);padding-top:12px}
/* Das leise Zugestaendnis, darunter die laute Folgerung. */
.ki-sockel b{display:block;margin-top:4px;font-size:20px;font-weight:700;
  letter-spacing:.04em;color:var(--paper)}
.ki-sockel b i{font-style:normal;color:var(--yellow)}

/* Neun Runden an Haarlinien: Schlagwort in Condensed, die Chat-Schwaeche
   wird durchgestrichen (der Strich zieht sich beim Einscrollen), unsere
   Antwort kraeftig darunter. Reine Typografie, keine Karten. */
.ki-liste{background:var(--paper);padding:var(--luft) 0 var(--luft)}
.ra{border-top:1px solid var(--border);display:grid;
  grid-template-columns:minmax(220px,.7fr) 1.3fr;gap:48px;padding:24px 0;
  align-items:baseline}
.ra:last-of-type{border-bottom:1px solid var(--border)}
.ra-k{font-family:var(--cond);font-size:20px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--navy)}
.ra-chat{position:relative;display:inline-block;font-size:15px;line-height:1.6;
  color:var(--muted)}
.ra-chat::after{content:"";position:absolute;left:0;top:calc(50% - 1px);height:1px;
  width:100%;background:color-mix(in srgb, var(--muted) 70%, transparent)}
.ra-uns{margin-top:4px;font-size:15px;line-height:1.6;color:var(--navy);font-weight:500}
.ra-uns a{color:var(--navy);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
/* Katalog und Stimme teilen sich die obere Haelfte des Schlussbands:
   links das Statement, rechts die Stimme mit Portrait wie in den
   Referenzen der Startseite. */
/* Helles Band vor dem dunklen Schluss, damit der Wechsel stimmt. */
.ki-praxis-sek{background:var(--wash);padding:var(--luft) 0}
.ki-praxis{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;
  align-items:center}
.ki-praxis h2{font-family:var(--disp);
  font-size:var(--titel);line-height:1.08;font-weight:700;
  text-transform:uppercase;letter-spacing:.01em}
.ki-pr-s{margin-top:16px;font-size:17px;line-height:1.65;color:var(--text)}
/* Weisse Karte statt dunkel auf dunkel: die Stimme soll sich abheben,
   wie die Report-Karte im Duell. */
/* Dieselbe Bauform wie die Chatkarte und wie jede helle Flaeche bei uns:
   Schein oben rechts, 145-Grad-Verlauf, Facette um 18 Grad, darueber die
   Aufhellung nach unten. Flach weiss stand sie als einzige Karte ohne die
   Gestaltung da (David, 31.08.2026). */
.ki-stimme{position:relative;overflow:hidden;border-radius:var(--radius);padding:32px;
  border:1px solid var(--border);box-shadow:var(--schein-3);
  background:
    radial-gradient(120% 150% at 88% 0%, color-mix(in srgb, var(--glanz-4) 14%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 62%),
    linear-gradient(145deg,#ffffff 0%,#f7f8f5 45%,#eff1ed 100%)}
.ki-stimme::before{content:"";position:absolute;top:-120%;right:-4%;width:32%;height:340%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-4) 14%, transparent),color-mix(in srgb, var(--glanz-4) 0%, transparent));
  transform:rotate(18deg);pointer-events:none}
.ki-stimme::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.5) 66%,rgba(255,255,255,.88) 100%)}
.ki-stimme > *{position:relative;z-index:1}
.ki-stimme p{color:var(--text)}
.ki-stimme .rf-stwer b{color:var(--navy)}
.ki-stimme .rf-stwer span{color:var(--muted)}

/* Der Tiefgarage-Moment. Drei Stufen statt sechs gleicher Absaetze:
   Ueberschrift, Einordnung, dann die Pointe gross, darunter die zwei
   Folgerungen an einer Haarlinie. Rechts der Wortwechsel, der die
   Geschichte selbst erzaehlt, deshalb erzaehlt der Text sie nicht noch
   einmal. Kein Kicker: die Startseite kennt keine Mini-Ueberschriften. */
/* Dunkel wie das Elefanten-Band auf der Startseite: derselbe Moment sieht
   damit ueberall gleich aus. Und der Wechsel stimmt wieder, vorher standen
   Praxis, Schluss und Fusszeile dreimal dunkel hintereinander. */
.ki-fall{position:relative;overflow:hidden;color:var(--paper);padding:var(--luft) 0;
  background:
    radial-gradient(120% 90% at 88% 6%, color-mix(in srgb, var(--glanz-4) 55%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 58%),
    linear-gradient(145deg,var(--tief) 0%,var(--navy) 45%,var(--tief) 100%)}
.ki-fall::after{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:75%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-2) 22%, transparent),color-mix(in srgb, var(--glanz-2) 0%, transparent));
  transform:rotate(18deg);pointer-events:none}
.ki-fall .ki-in{position:relative;z-index:1}
.ki-fall-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.ki-fall h2{font-family:var(--disp);font-size:var(--titel);line-height:1.08;
  font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--paper);
  text-wrap:balance}
/* Die eine gelbe Stelle des Abschnitts: hier wird aus dem Wortspiel Ernst. */
.ki-fall h2 i{font-style:normal;color:var(--yellow)}
.ki-fall-lead{margin-top:16px;max-width:520px;font-size:17px;line-height:1.65;
  color:var(--nebel)}
.ki-fall-punch{margin-top:32px;max-width:560px;font-family:var(--disp);
  font-size:24px;font-weight:500;line-height:1.35;color:var(--paper);
  text-wrap:balance}


/* Der Wortwechsel: Darstellung eines fremden Chats, nicht unsere
   Oberflaeche. Deshalb neutral, ohne Statusfarben. */
.ki-chat{border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;gap:16px;
  box-shadow:var(--schein-3);position:relative;overflow:hidden;
  background:
    radial-gradient(120% 150% at 88% 0%, color-mix(in srgb, var(--glanz-4) 14%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 62%),
    linear-gradient(145deg,#ffffff 0%,#f7f8f5 45%,#eff1ed 100%)}
.ki-chat::before{content:"";position:absolute;top:-120%;right:-4%;width:32%;height:340%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-4) 14%, transparent),color-mix(in srgb, var(--glanz-4) 0%, transparent));
  transform:rotate(18deg);pointer-events:none}
.ki-chat::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.5) 66%,rgba(255,255,255,.88) 100%)}
.ki-chat > *{position:relative;z-index:1}
.ki-bl{max-width:85%}
.ki-bl span{display:block;font-family:var(--cond);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ki-bl p{font-size:15px;line-height:1.55;border-radius:var(--radius);padding:12px 16px}
.ki-bl-ki{align-self:flex-start}
.ki-bl-ki p{background:var(--dunst-0);border:1px solid var(--border);color:var(--text)}
.ki-bl-du{align-self:flex-end;text-align:right}
.ki-bl-du p{background:var(--navy);color:var(--paper);text-align:left}

/* Der Fragenblock. Dieselbe Bauform wie die Gegenueberstellung: Haarlinie,
   zwei Spalten, keine Kaesten. Papier zwischen Wash und Dunkel. */
.ki-frag{background:var(--paper);padding:var(--luft) 0}
.ki-frag h2{font-family:var(--disp);font-size:var(--titel-gross);line-height:1.1;
  font-weight:700;text-transform:uppercase;color:var(--navy)}
.ki-fr-z{margin-top:0;border-top:1px solid var(--border);display:grid;
  grid-template-columns:minmax(220px,.7fr) 1.3fr;gap:48px;padding:24px 0;
  align-items:baseline}
.ki-frag .ki-fr-z:first-of-type{margin-top:40px}
.ki-fr-f{font-size:17px;font-weight:600;line-height:1.4;color:var(--navy)}
.ki-fr-a{font-size:15px;line-height:1.7;color:var(--muted)}
.ki-schluss{position:relative;overflow:hidden;color:var(--paper);padding:var(--luft) 0;
  background:
    radial-gradient(120% 90% at 88% 6%, color-mix(in srgb, var(--glanz-4) 55%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 58%),
    linear-gradient(145deg,var(--tief) 0%,var(--navy) 45%,var(--tief) 100%)}
.ki-schluss::after{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:75%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-2) 22%, transparent),color-mix(in srgb, var(--glanz-2) 0%, transparent));
  transform:rotate(18deg);pointer-events:none}
.ki-schluss .ki-in{position:relative;z-index:1}
.ki-cta{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center}
.ki-schluss h2{font-family:var(--disp);font-size:var(--titel);line-height:1.08;
  font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.ki-satz{margin-top:16px;font-size:17px;line-height:1.6;color:var(--nebel)}
.ki-akt{display:flex;flex-direction:column;gap:16px;align-items:center}
.ki-b2b{font-family:var(--cond);font-size:15px;font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;color:var(--nebel)}
.ki-b2b:hover{color:var(--paper)}

@media (prefers-reduced-motion: no-preference){
  .ra,.ki-praxis,.ki-bl,.ki-fr-z{opacity:0;transform:translateY(12px);
    transition:opacity .5s ease,transform .5s ease}
  .ra.an,.ki-praxis.an,.ki-bl.an,.ki-fr-z.an{opacity:1;transform:none}
  /* Der Strich zieht sich, sobald die Runde steht. */
  .ra-chat::after{width:0;transition:width 1.1s cubic-bezier(.4,0,.2,1) .4s}
  .ra.an .ra-chat::after{width:100%}
}
@media (max-width:1024px){
  .ki-kopf-grid{grid-template-columns:1fr;gap:48px}
  .ki-duell{justify-self:start;min-width:0;width:100%;max-width:480px}
}
@media (max-width:1024px){
  .ki-praxis{grid-template-columns:1fr;gap:40px}
  .ki-fall-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:680px){
  .ki-kopf{padding:64px 0}
  .ra{grid-template-columns:1fr;gap:8px}
  .ki-fr-z{grid-template-columns:1fr;gap:8px}
  /* Umbrochene Zeilen: der gezogene Strich wuerde zwischen den Zeilen
     laufen, deshalb streicht dort die Schrift selbst, ohne Zug. */
  .ra-chat{text-decoration:line-through;
    text-decoration-color:color-mix(in srgb, var(--muted) 70%, transparent)}
  .ra-chat::after{display:none}
  .ki-cta{grid-template-columns:1fr;gap:32px;justify-items:start}
  .ki-akt{align-items:flex-start}
}
/* <<< STANDARDKI ENDE >>> */

/* >>> MOBILDEMO ANFANG <<< */
/* Mobile-Demo in Block 4: die Mobile-Ansicht des Reports laeuft als Tour
   durch (Wohnung, dann Haus, dann wieder Wohnung), und der Kunde kann
   jederzeit selbst wischen; wer wischt, uebernimmt (David, 29.08.).
   Nur unter 860 Pixeln sichtbar, volle Breite, randlos. */
.md{display:none}
@media (max-width:860px){
  .pr .app-buehne{padding:0}
  .pr .app-buehne .app-fenster{display:none}
  .md{display:block;padding:0 var(--gutter)}
  .md-fenster{border-radius:var(--radius);
    border:1px solid color-mix(in srgb, var(--bericht) 12%, transparent);
    overflow:hidden;
    box-shadow:var(--schein-3)}
  .md-kopf{display:block;width:100%;height:auto}
  /* Standardmaessig laeuft die Tour und Wischen scrollt die SEITE, nicht
     das Fenster: sonst sitzt der Kunde in der Scroll-Falle (David,
     29.08.). Erst die Pille uebergibt das Fenster; die Kanten reichen den
     Scroll dann an die Seite weiter. */
  .md-fenster{position:relative}
  .md-schirm{position:relative;height:620px;overflow:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .md.selbst .md-schirm{overflow-y:auto;overscroll-behavior:auto}
  .md-schirm::-webkit-scrollbar{display:none}
  /* Der Schalter steht UNTER dem Fenster, nicht darin: im Fenster
     verdeckte er den Report (David, 29.08.2026). */
  .md-hand{display:block;margin:16px auto 0;border:1px solid var(--border);
    cursor:pointer;border-radius:var(--radius);background:#fff;color:var(--navy);
    font-family:var(--cond);font-size:13px;font-weight:600;letter-spacing:.05em;
    text-transform:uppercase;padding:8px 16px}
  .md-schirm{position:relative}
  .md-lauf{position:absolute;top:0;left:0;display:block;width:100%;height:auto;
    will-change:transform;opacity:0;transition:opacity .45s ease}
  .md-lauf.an{opacity:1;position:relative}
  /* Umschalter Wohnung/Haus, dieselbe Bauform wie bei den Preisen. */
  .md-sch{display:flex;gap:4px;padding:4px;border-radius:var(--radius);
    width:max-content;margin:0 auto 16px;background:#fff;
    border:1px solid var(--border)}
  .md-sch button{font-family:var(--cond);font-size:15px;font-weight:600;
    letter-spacing:.05em;text-transform:uppercase;border:0;background:none;
    color:var(--muted);padding:8px 16px;border-radius:var(--radius);cursor:pointer}
  .md-sch button.an{background:var(--navy);color:var(--paper)}
}
/* <<< MOBILDEMO ENDE >>> */

/* >>> MENUE ANFANG <<< */
/* Mobiles Menue. Der Burger erscheint, sobald die Navigation der Leiste
   verschwindet; Umschalter und Login ziehen mit ins Panel. */
.hd-burger{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:44px;height:44px;padding:8px;margin-left:4px;border:0;background:none;
  cursor:pointer;flex:none}
.hd-burger i{display:block;height:2px;border-radius:1px;background:var(--navy);
  transition:transform .22s ease,opacity .18s ease}
.hd-burger.offen i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd-burger.offen i:nth-child(2){opacity:0}
.hd-burger.offen i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mn{position:fixed;inset:0;z-index:39;background:var(--paper);
  padding:104px var(--gutter) 32px;overflow-y:auto;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease}
.mn.offen{opacity:1;transform:none;pointer-events:auto}
html.mn-fest{overflow:hidden}
/* Grosszuegig wie bei Harvey: grosse Zeilen, keine Trennlinien, die
   Knoepfe unten angepinnt. */
.mn-liste{display:flex;flex-direction:column;gap:8px}
.mn-liste a{display:block;padding:8px 0;
  font-family:var(--cond);font-size:30px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--navy)}
.mn-aud{margin-top:auto;padding-top:32px;display:flex;align-items:center;gap:16px}
.mn-aud > span{font-family:var(--cond);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mn-aud .aud-sw{display:flex;gap:4px;padding:4px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--border)}
.mn-aud .aud-sw a{font-family:var(--cond);font-size:15px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  padding:8px 16px;border-radius:var(--radius)}
.mn-aud .aud-sw a[aria-current]{background:var(--navy);color:var(--paper)}
.mn-akt{display:flex;gap:12px;margin-top:24px}
.mn-akt .mn-cta{flex:1.3;display:flex;white-space:nowrap;padding-left:12px;padding-right:12px}
.mn-akt .mn-login{flex:1;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--navy);border-radius:var(--radius);padding:16px 24px;
  font-family:var(--cond);font-size:17px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;color:var(--navy)}

@media (max-width:1180px){
  .hd-burger{display:flex;margin-left:auto}
  .hd-in .aud,.hd-in .hd-login{display:none}
  /* Der Burger dockt selbst rechts an. Vorher schob ihn der Knopf daneben
     dorthin, und seit die Unterseiten keinen Knopf mehr haben, hing er
     mitten im Raum: die Marke traegt 104 px Abstand zum Menue, und ohne
     Menue klebte er direkt dahinter (David, 31.08.2026). */
  .hd-in .brand{margin-right:0}
}
/* <<< MENUE ENDE >>> */

/* >>> HALTUNG ANFANG <<< */
/* Haltung: der Taschenmesser-Satz wird durchgestrichen, die eine Sache
   bleibt stehen. Dieselbe Streich-Geste wie in den Neun Runden. */
.sk{background:var(--wash);padding:var(--luft) 0}
.sk-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sk-viele{position:relative;display:inline-block;font-family:var(--disp);
  font-size:var(--titel-klein);font-weight:500;line-height:1.2;
  text-transform:uppercase;letter-spacing:.01em;color:var(--muted)}
.sk-viele::after{content:"";position:absolute;left:0;top:calc(50% - 1px);
  height:2px;width:100%;background:color-mix(in srgb, var(--muted) 75%, transparent)}
.sk-eins{margin-top:16px;font-family:var(--disp);font-weight:700;
  font-size:var(--titel);line-height:1.15;text-transform:uppercase;
  letter-spacing:.01em;color:var(--navy);text-wrap:balance}
/* Keine Buntfarbe: auf hellem Grund hebt unser System mit Navy und
   Gewicht hervor (siehe .pz-lead b, .ord-fuss b). Gelb ist Handlung und
   haette hier keinen Knopf, an dem es haengt. */
.sk-eins i{font-style:normal}
@media (prefers-reduced-motion: no-preference){
  /* Nur mit Skript (.sk.bereit) wird versteckt. Ohne Skript oder ohne
     Beobachter steht der Satz da: die Hauptaussage darf nie fehlen.

     Drei Schritte nacheinander, nicht zusammen: erst liest man den Satz,
     dann wird er gestrichen, dann kommt die Antwort. Vorher stand der Satz
     schon da, wenn der Block ins Bild kam, und der Strich lief 0,3 Sekunden
     spaeter los — das las sich wie ein Vorgang statt wie drei (David,
     31.08.2026). */
  .sk.bereit .sk-viele{opacity:0;transition:opacity .45s ease}
  .sk.bereit.an .sk-viele{opacity:1}
  .sk.bereit .sk-viele::after{width:0;transition:width .9s cubic-bezier(.4,0,.2,1) .95s}
  .sk.bereit.an .sk-viele::after{width:100%}
  .sk.bereit .sk-eins{opacity:0;transform:translateY(12px);
    transition:opacity .5s ease 1.85s,transform .5s ease 1.85s}
  .sk.bereit.an .sk-eins{opacity:1;transform:none}
}
@media (max-width:700px){
  .sk{padding:64px 0}
  /* Umbrochene Zeile: die Schrift streicht selbst, ohne Zug. */
  .sk-viele{text-decoration:line-through;
    text-decoration-color:color-mix(in srgb, var(--muted) 75%, transparent)}
  .sk-viele::after{display:none}
}
/* <<< HALTUNG ENDE >>> */

/* >>> ELEFANT ANFANG <<< */
/* Der Elefant im Raum: dunkles Band vor der FAQ. Links die Einordnung,
   rechts der ganze Wortwechsel als weisse Karte. Der volle Verlauf ist
   Pflicht, ohne die Nachfrage versteht niemand die Pointe (David,
   29.08.2026). Die Blasen sind die Darstellung eines fremden Chats,
   nicht unsere Oberflaeche. */
.ele{position:relative;overflow:hidden;color:var(--paper);padding:var(--luft) 0;
  background:
    radial-gradient(120% 90% at 88% 6%, color-mix(in srgb, var(--glanz-4) 55%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 58%),
    linear-gradient(145deg,var(--tief) 0%,var(--navy) 45%,var(--tief) 100%)}
.ele::after{content:"";position:absolute;top:-30%;right:-8%;width:52%;height:75%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-2) 22%, transparent),color-mix(in srgb, var(--glanz-2) 0%, transparent));
  transform:rotate(18deg);pointer-events:none}
.ele-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;
  padding:0 var(--gutter);display:grid;grid-template-columns:.85fr 1.15fr;
  gap:64px;align-items:center}
.ele h2{font-family:var(--disp);font-size:var(--titel);
  line-height:1.08;font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.ele-p{margin-top:16px;font-size:17px;line-height:1.65;color:var(--nebel)}
.ele-mehr{display:inline-flex;align-items:center;margin-top:24px;
  border-radius:var(--radius);padding:16px 24px;background:var(--yellow);
  color:var(--navy);font-family:var(--cond);font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em}
.ele-mehr:hover{background:#f2e24a}

/* Der Wortwechsel als weisse Karte, wie ein Ausschnitt aus dem Chatfenster. */
.ele-chat{position:relative;overflow:hidden;border-radius:var(--radius);padding:24px;
  display:flex;flex-direction:column;gap:16px;
  background:
    radial-gradient(120% 150% at 88% 0%, color-mix(in srgb, var(--glanz-4) 16%, transparent) 0%, color-mix(in srgb, var(--glanz-4) 0%, transparent) 62%),
    linear-gradient(145deg,#ffffff 0%,#f7f8f5 45%,#eff1ed 100%);
  box-shadow:var(--schein-3)}
/* Dieselbe Bauform wie Hero, Enterprise-Spalte und Schluss, nur hell
   uebersetzt: Schein oben rechts, 145-Grad-Verlauf, Facette um 18 Grad,
   darueber die Aufhellung nach unten. Geometrie bleibt, nur die Helligkeit
   wechselt (STAND, Flaechen und Formen). */
.ele-chat::before{content:"";position:absolute;top:-120%;right:-4%;width:32%;height:340%;
  background:linear-gradient(200deg,color-mix(in srgb, var(--glanz-4) 16%, transparent),color-mix(in srgb, var(--glanz-4) 0%, transparent));
  transform:rotate(18deg);pointer-events:none}
.ele-chat::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.5) 66%,rgba(255,255,255,.88) 100%)}
.ele-chat > *{position:relative;z-index:1}
/* Die KI-Blase steht jetzt weiss auf der getoenten Karte, sonst verschwimmt
   sie mit dem Untergrund. Dieselbe Loesung wie beim Befund auf Wash. */
.ele-bl{max-width:85%}
.ele-bl span{display:block;font-family:var(--cond);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ele-bl p{font-size:15px;line-height:1.55;border-radius:var(--radius);padding:12px 16px}
.ele-ki{align-self:flex-start}
.ele-ki p{background:#fff;border:1px solid var(--border);color:var(--text)}
.ele-du{align-self:flex-end;text-align:right}
.ele-du p{background:var(--navy);color:var(--paper);text-align:left}
/* Die Bewegung steuert allein das Skript ueber Inline-Werte. Kein
   Verstecken per Stylesheet: ohne Skript steht der Verlauf sichtbar da,
   und keine fremde Regel kann ihn unsichtbar lassen. */
@media (max-width:1024px){
  .ele{padding:64px 0}
  .ele-in{grid-template-columns:1fr;gap:32px}
}
/* <<< ELEFANT ENDE >>> */

/* >>> MOBILPASS ANFANG <<< */
/* Mobilfassung. Dieser Block steht bewusst am Dateiende: er ist die letzte
   Stimme der Kaskade und stellt unter 700 Pixeln die eine Spalte her, die
   die fruehen Regeln versprechen und spaete Bloecke sonst zurueckdrehen. */
@media (max-width:700px){
  /* Grundsatz: volle Breite, einheitlicher Rand. */
  .bf-in,.ev-in,.rf-in,.app-buehne{padding-left:var(--gutter);padding-right:var(--gutter)}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .screen{width:100%;min-height:0}

  /* Held: die Ueberschrift darf brechen, die Zeile haelt sonst nicht. */
  .hero h1{font-size:clamp(30px,8.6vw,40px)}
  /* Das Buehnenlicht des Heros zielt am Desktop auf das Produktfenster
     rechts. Ohne rechte Spalte stand es mitten im Text (David, 29.08.).
     Mobil: Schein oben rechts wie bei den anderen dunklen Koepfen, die
     Facette hinter das Fenster unten. */
  .hero{background:
    radial-gradient(120% 70% at 88% 4%, color-mix(in srgb, var(--glanz) 30%, transparent) 0%,
      color-mix(in srgb, var(--glanz) 0%, transparent) 60%),
    linear-gradient(180deg, var(--tief) 0%, var(--tief) 100%)}
  .hero::before{inset:52% -10% -10% -10%;transform:skewX(-11deg)}

  /* Befund: eine Spalte, Kaesten mit ruhigem Innenrand. */
  .bf-grid{grid-template-columns:1fr}
  .bf-txt{padding:24px}
  .buehne{padding:24px}

  /* Panelkopf: Zeile statt Umbruch-Treppe, der Umschalter kompakt rechts. */
  .panel-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .panel-hd h3{font-size:15px}
  .panel-hd .tabs button{padding:4px 12px;font-size:13px}

  /* Einwertung: eine Spalte, das Panel traegt die volle Breite. */
  .ev-kopf,.ev-trend,.ev-fazit{grid-template-columns:1fr}
  .ev-kopf{gap:32px}
  .ev-satz{grid-template-columns:auto 1fr}
  .ev-satz .t2{grid-column:2}
  .panel{padding:16px}

  /* Marktspanne: die Werte eine Stufe kleiner, und der Euro haengt am
     Betrag statt allein umzubrechen (David, 29.08.: "zu gross"). */
  .ev-werte .w,.ev-preis .w{font-size:20px;white-space:nowrap}
  .ev-werte .mitte .w{font-size:24px}
  .ev-werte .l,.ev-preis .l{font-size:11px}

  /* Referenzen: das Portrait steht ueber die volle Breite, kein
     Briefmarkenformat auf dunkler Flaeche. */
  .rf-bild{height:auto;margin:0 calc(-1 * var(--gutter))}
  .rf-bild img{width:100%;height:auto;display:block}
  .rf-stimmen{padding:0 0 48px}
  .rf-st{padding:24px 0 0}

  /* Preise: eine Spalte, die Ziffer eine Stufe kleiner. */
  .pz-tafel{grid-template-columns:1fr}
  .pz-sp{padding:32px 24px}
  .pz-sp.top{margin:0;padding:32px 24px}
  .pz-pr b{font-size:38px}
  .pz-hd{grid-template-columns:1fr;gap:24px}

  /* Kopfzeile: enger gesetzt, nichts laeuft ueber. */
  /* Marke und Burger stehen auf derselben Rasterlinie wie der Inhalt
     darunter, nicht knapp daneben: 12 px lasen sich wie ein Anschnitt, und
     ein fester Wert liefe beim naechsten Rastermass wieder auseinander
     (David, 31.08.2026). */
  .hd-in{gap:8px;padding:0 var(--gutter)}
  .hd-cta{padding:8px 12px}
  .brand img{width:34px;height:34px}

  /* Inklusiv-Leiste der Preise: untereinander statt abgeschnitten. */
  .pz-inkl{grid-template-columns:1fr;gap:12px;padding:20px}
  .pz-inkl ul{grid-template-columns:1fr;gap:8px}

  /* B2B-Kopfknopf ist laenger als der private: das Vorwort faellt weg,
     es bleibt "anfragen" bzw. "starten". */
  .hd-cta .lang{display:none}
  .hd-cta{font-size:15px;letter-spacing:.02em}
  /* Der Glanz hinter dem Portrait lief rechts aus dem Bild. */
  .rf{overflow:clip}

  /* Fusszeile gestapelt. */
  .ft-in{flex-direction:column;align-items:flex-start}
  .ft nav{margin-left:0;gap:16px 24px}
}

/* Der Dokumentenfluss in schmal (David, 29.08.): dieselbe Mechanik wie am
   Desktop, nur alles eine Nummer kleiner. Die Blaetter (zoom .5) kommen
   links rein, gehen rechts sortiert raus (geordnete Reihe, zoom .5), der
   Report entsteht darunter. zoom statt Breite: es skaliert auch Innenmasse
   und Lupenglas mit, der graue Kreis war genau dieser Fehler. Gemessen:
   Prozent-Anker bleiben bei zoom stabil, Pixelwerte skalieren. */
@media (max-width:1180px){
  .ord-fluss{--rand:0px;height:432px;margin:32px 0 0;overflow:hidden}
  .ord-blatt{zoom:.5;top:38%}
  .ord-blatt:nth-child(n+11){display:revert}
  .ord-lupe{zoom:.62;top:38%}
  .ord-fluss-linie{top:8%;bottom:auto;height:60%}
  .ord-reihe{display:block;zoom:.5;left:64%;right:16px;top:38%}
  .ord-reihe .ord-ruhe:first-child{display:none}
  .ord-ruhe{display:block}
  .ord-fluss-lb.links{left:var(--gutter);top:0;bottom:auto;
    align-items:flex-start;text-align:left}
  /* Der Report entsteht darunter, mittig. */
  .ord-bericht{left:50%;right:auto;top:auto;bottom:104px;margin:0;
    transform:translateX(-50%);transform-origin:center bottom}
  .ord-fluss-lb.rechts{left:0;right:0;top:auto;bottom:16px;
    align-items:center;text-align:center}
  .ord-fluss-lb.rechts .bsp{width:100%}
  .ord-fluss-lb.rechts .bsp span{left:0;right:0;text-align:center}
}
/* Block 4 unterhalb der Desktop-Breite: das feste 1180-Fenster traegt
   nicht, die Mobile-Demo uebernimmt. Block 3 behaelt nur den Fluss; die
   Mobilfassung des Dokumenteneingangs ist als eigene Aufgabe notiert
   (docs/naechste-seiten.md, 4a). */
@media (max-width:860px){
  .ord .app-buehne,.ord .app-sw{display:none}
  .pr-in{padding-left:var(--gutter);padding-right:var(--gutter)}
  .md{margin-top:24px}
}
/* Die Mobile-Demo randlos: die Aufnahme ist 470 Pixel breit und kann nicht
   schmaler (die Vorlage traegt darunter nicht). Groesse entsteht also nur
   ueber die volle Breite, ohne Rand und ohne Rundung (David, 29.08.). */
@media (max-width:700px){
  .md{padding:0}
  .md-fenster{border-left:0;border-right:0;border-radius:0}
}

/* Artikelseiten: das Grid-Item darf nicht die Bildbreite erzwingen
   (min-width:auto-Falle), die Reportbilder skalieren mit. */
@media (max-width:1180px){
  .ar-tx{min-width:0;max-width:none}
  .ar-fig img{width:100%;height:auto}
  .ar-kt{grid-template-columns:32px 1fr}
  .ar-kt-z{grid-column:2}
  .ohne-nr .ar-kt{grid-template-columns:1fr}
  .ohne-nr .ar-kt-z{grid-column:1}
  /* Nebeneinander gestellte Spalten laufen auf dem Handy aus dem Bild. Sie
     stehen dort untereinander, wie alles andere auch. */
  .ar-vg{grid-template-columns:1fr}
  .ar-ph-g{grid-template-columns:1fr}
  .ar-ph-p.weit{grid-column:auto}
}
/* <<< MOBILPASS ENDE >>> */