/* Variante B: gemeinsames Raster und visuelle Anker.
   Wird nach styles.css geladen und ergaenzt sie. styles.css bleibt unveraendert,
   damit Variante A davon nicht beruehrt wird. Beim Zusammenfuehren wandert diese
   Datei vollstaendig in styles.css. */

/* ------------------------------------------------------------------
   1. Oberzeilen der Unterseiten wie die Abschnittsetiketten der Startseite.
   ------------------------------------------------------------------ */
.kicker,.page-intro .kicker{font-size:14px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1.7;margin-bottom:14px}

/* ------------------------------------------------------------------
   2. Ein Raster fuer alle Unterseiten.
   Drei gleiche Spalten mit 32px Abstand bilden das Modul. Zweispaltige
   Abschnitte nehmen ein Modul links und den Rest rechts. Dadurch liegt die
   rechte Spalte jedes Abschnitts auf derselben senkrechten Achse, und zwar
   bei jeder Fensterbreite.
   ------------------------------------------------------------------ */
.unternehmen-page,.ki-dienstleister-page,.beispiel-page{
  --modul:300px 1fr;--modul-abstand:32px;--modul-h2:var(--t-h3)}
/* Die Beispielseite braucht 40px mehr: "Unternehmensentscheidung" misst
   bei 25px 310px und wuerde in einer 300px-Spalte getrennt. */
.beispiel-page{--modul:340px 1fr}

/* Die Ueberschriftenspalte ist eine schmale Randspalte, keine halbe Seite.
   Bei der Haelfte stand unter jeder kurzen Ueberschrift eine leere Flaeche
   von 474px Breite, und die Kartenreihen daneben wurden so schmal, dass
   die Saetze in Fetzen zerfielen. Bei 300px brechen lange Ueberschriften
   von selbst auf zwei Zeilen, kurze stehen als Randnotiz, und der Text
   daneben bekommt 648px. */
.unternehmen-page .reading,.ki-dienstleister-page .reading,
.beispiel-page .reading{max-width:none}

/* Eine Achse fuer alle zweispaltigen Bloecke einer Seite. Der
   Kontaktabschnitt teilte 1fr zu 1,25fr mit 72px Abstand, der Vorspann
   1,2fr zu 1fr mit 72px, die Zahlungsbedingungen 1,4fr zu 1fr. Damit
   begann die rechte Spalte in jedem dieser Bloecke an einer anderen
   Stelle als im Rest der Seite. */
.contact-grid,.lp-hero-grid,.payment-terms,.lp-feedback{
  grid-template-columns:1fr 1fr;gap:var(--modul-abstand,32px)}
.unternehmen-page .contact-grid,.ki-dienstleister-page .contact-grid,
.beispiel-page .contact-grid{grid-template-columns:var(--modul)}
@media(max-width:850px){
  .contact-grid,.lp-hero-grid,.payment-terms,.lp-feedback,
  .unternehmen-page .contact-grid,.ki-dienstleister-page .contact-grid,
  .beispiel-page .contact-grid{grid-template-columns:1fr}
}

/* Kartenreihen nehmen die volle Breite unter der Ueberschrift. */
.unternehmen-page .use-grid>.use-cases,
.ki-dienstleister-page .deliverable-section>div{grid-column:1 / -1;margin-top:var(--a-3)}



.unternehmen-page .teaser-grid,.unternehmen-page .contribution-grid,.unternehmen-page .scope-grid,
.ki-dienstleister-page .teaser-grid,.ki-dienstleister-page .contribution-grid,.ki-dienstleister-page .scope-grid,
.beispiel-page .decision-grid,.beispiel-page .contribution-grid,.beispiel-page .example-case{
  grid-template-columns:var(--modul);gap:var(--modul-abstand);align-items:start}

.unternehmen-page .teaser-grid>h2,.unternehmen-page .use-grid>h2,
.unternehmen-page .contribution-grid>h2,.unternehmen-page .scope-grid>h2,
.ki-dienstleister-page .teaser-grid>h2,.ki-dienstleister-page .deliverable-section>h2,
.ki-dienstleister-page .contribution-grid>h2,.ki-dienstleister-page .scope-grid>h2,
.beispiel-page .decision-grid>h2,.beispiel-page .contribution-grid>h2,.beispiel-page .example-case>h2{
  font-size:var(--modul-h2)}

/* Die Fallabschnitte der Beispielseite folgen demselben Raster: Ueberschrift im
   ersten Modul, Inhalt in den Modulen zwei und drei. Die beiden Antwortkarten
   fuellen darin exakt Modul zwei und Modul drei. */
.beispiel-page .example-case{display:grid;align-items:start}
.beispiel-page .example-case>h2{margin-bottom:0}
/* Die beiden Antwortkarten brauchen die volle Breite. In der rechten
   Haelfte eingesperrt ergaben sie zwei Spalten von je 221px; darin
   zerfiel jeder Satz in Fetzen. Der Fallkoerper gibt seine eigene Box
   auf, damit seine Teile direkt im Fallraster liegen: Text rechts auf
   der Achse, Antwortkarten ueber beide Spalten. */
.beispiel-page .case-body{display:contents}
.beispiel-page .case-body>p,.beispiel-page .sample-quote{grid-column:2}
.beispiel-page .answer-pair{grid-column:1 / -1;grid-template-columns:1fr 1fr;
  gap:20px var(--modul-abstand);margin-top:28px}
/* Auf schmalen Fenstern gibt es nur eine Spalte. Ohne diese Ruecknahme
   erzwaenge grid-column:2 eine zweite Spalte, und die Antwortkarten
   blieben nebeneinander; beides sprengte die Ueberschriften. */
@media(max-width:850px){
  .beispiel-page .case-body>p,.beispiel-page .sample-quote,
  .beispiel-page .answer-pair{grid-column:1}
  .beispiel-page .answer-pair{grid-template-columns:1fr}
}
.beispiel-page .sample-quote{margin:24px 0}
.unternehmen-page .use-grid{display:grid;grid-template-columns:var(--modul);gap:var(--modul-abstand);align-items:start}
.unternehmen-page .use-grid>h2{margin-bottom:0}
.unternehmen-page .use-cases,.ki-dienstleister-page .deliverables{gap:16px var(--modul-abstand)}

/* Silbentrennung nur dort, wo die Spalte sie wirklich braucht.

   Die Regel galt zuvor fuer alle Ueberschriften der drei Unterseiten. Der
   Browser bricht Zeilen gierig: Er setzt einen Trennstrich, sobald ein
   Wortteil noch auf die laufende Zeile passt, auch wenn das ganze Wort in
   die naechste Zeile gepasst haette. So entstanden "Kundenpro-jekt",
   "Kunden-projekt", "Gel-tungsstand" und "menschli-che".

   Nachgemessen bei 1440px und bei 900px: Ohne Trennung laeuft auf keiner
   der vier Seiten eine Ueberschrift ueber ihre Spalte hinaus. Ausgenommen
   sind zwei schmale Ueberschriftenspalten, siehe unten.

   text-wrap:balance verteilt eine zweizeilige Ueberschrift auf zwei
   aehnlich lange Zeilen, statt eine volle Zeile und ein Einzelwort zu
   erzeugen. */
h1,h2,h3{-webkit-hyphens:none;hyphens:none}
h1,h2{text-wrap:balance}

/* Zwei Ausnahmen. In der 220px schmalen Ueberschriftenspalte der Preiskarte
   ist "Entscheidungsfaelle" bei 25px 234px breit; ohne Trennung brach
   overflow-wrap aus styles.css das Wort ohne Trennstrich ("Entscheidungsfaell
   / e"). Dasselbe gilt fuer "Unternehmensentscheidung" auf der Beispielseite.
   Hier ist ein Trennstrich richtig, ein harter Wortbruch nicht. */
/* Die Preiskarte braucht die Ausnahme nicht mehr: Seit die Karten
   "Eine abgegrenzte Aufgabe" und "Drei Aufgaben in einem Regelwerk"
   heissen, ist das laengste Wort "abgegrenzte" mit 153px deutlich
   schmaler als die 220px breite Spalte. Es bleibt die Beispielseite,
   wo "Unternehmensentscheidung" bei 900px Fensterbreite 305px in einer
   247px-Spalte misst. */
/* Damit entfaellt auch die letzte Trennungsausnahme. */

@media(max-width:680px){h2,h3{-webkit-hyphens:auto;hyphens:auto}}

/* ------------------------------------------------------------------
   3. Je Unterseite ein dunkler Ankerblock, damit die Seite ein Zentrum hat
   und nicht als gleichfoermige Textfolge liest.
   ------------------------------------------------------------------ */
.unternehmen-page .use-grid,
.ki-dienstleister-page .deliverable-section{position:relative}
.unternehmen-page #unternehmen-2,
.ki-dienstleister-page #ki-dienstleister-2{background:var(--night);color:rgba(247,244,239,.8);border-top:0}
.unternehmen-page #unternehmen-2 h2,
.ki-dienstleister-page #ki-dienstleister-2 h2{color:#D2694A}
.unternehmen-page #unternehmen-2 h3,
.ki-dienstleister-page #ki-dienstleister-2 h3{color:#F7F4EF}
.unternehmen-page #unternehmen-2 .use-case{border-color:#61574e}
.ki-dienstleister-page #ki-dienstleister-2 .deliverables li{border-top-color:#D2694A}

/* ------------------------------------------------------------------
   4. Preise als Zahl statt im Fliesstext. Gleiche Auszeichnung wie im
   Angebotsblock der Startseite.
   ------------------------------------------------------------------ */
.preis-zeilen{display:grid;grid-template-columns:1fr 1fr;gap:var(--modul-abstand);margin:0 0 28px;padding-top:24px;border-top:1px solid var(--line)}
.preis-zahl{font-size:40px;font-weight:700;letter-spacing:-.035em;line-height:1.1;color:var(--ink);margin:0 0 10px}
.preis-zeilen p:last-child{font-size:16px;margin:0}

/* ------------------------------------------------------------------
   5. Rhythmus: nach einem dunklen Block beginnt der naechste Abschnitt enger,
   damit der Wechsel als Zusammenhang und nicht als Bruch gelesen wird.
   ------------------------------------------------------------------ */
.unternehmen-page #unternehmen-3,
.ki-dienstleister-page #ki-dienstleister-3,
.beispiel-page #beispiel-2{padding-top:var(--a-4)}
.beispiel-page #beispiel-5,.beispiel-page #beispiel-6{padding-top:var(--a-4)}

/* ------------------------------------------------------------------
   6. Arbeitsmarkierungen fuer noch offene Entscheidungen.
   ------------------------------------------------------------------ */
.offen{display:inline-block;background:rgba(179,78,48,.10);border:1px dashed var(--accent);border-radius:4px;padding:2px 8px;font-size:13px;font-weight:600;line-height:1.5;color:var(--accent)}
#investition .offen,.decision-section .offen{background:rgba(210,105,74,.18);border-color:#D2694A;color:#F7F4EF}

/* ------------------------------------------------------------------
   7. Bauteile der Startseite, die es in styles.css noch nicht gibt.
   ------------------------------------------------------------------ */
.lp-consult .consult-title{font-size:17px;font-weight:700;color:var(--ink);line-height:1.4;margin-bottom:10px}
.def-line{max-width:800px;border-left:2px solid var(--accent);padding-left:24px;margin-top:36px}
.def-line strong{font-weight:700;color:var(--ink)}
.excerpt-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:36px;align-items:start}
.audience-note{font-size:14px;line-height:1.6;color:var(--ink);margin-top:16px}

/* Icon-Link ohne Beschriftung. Einfarbig in der Textfarbe, damit keine
   zweite Akzentfarbe entsteht. Die Klickflaeche bleibt 44px, das Zeichen
   selbst ist kleiner; der negative Aussenabstand haelt das Zeichen trotzdem
   an der Textkante. Die Beschriftung steht in aria-label. */
.icon-link{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;margin-left:-10px;color:var(--ink);text-decoration:none}
.icon-link:hover{color:var(--accent)}
.icon-link svg{display:block;width:24px;height:24px}
.about-linkedin{margin-top:var(--a-1)}
.site-footer .icon-link{width:44px;height:44px;margin:0 0 0 -10px;padding:0}
.site-footer .icon-link svg{width:20px;height:20px}

/* Regelfelder im dunklen Entscheidungsblock der Beispielseite. */
.paper dl{margin:0}
.paper dt{font-weight:700;color:#F7F4EF;margin:22px 0 6px}
.paper dt:first-of-type{margin-top:0}
.paper dd{margin:0}
.paper-flag{font-size:13px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:#D2694A;border-top:1px solid #61574e;padding-top:18px;margin-top:24px}

/* ------------------------------------------------------------------
   8. Schmale Fenster: ab hier reicht die Breite nicht mehr fuer drei Spalten.
   Der Umbruch liegt dort, wo auch die Navigation auf das mobile Menue wechselt.
   ------------------------------------------------------------------ */
/* Zwischen 850 und 1000px werden die beiden Nutzungskacheln zu schmal fuer
   Woerter wie "Entscheidungsgrundlagen". Sie stehen dort untereinander. */
@media(max-width:1000px){.unternehmen-page .use-cases{grid-template-columns:1fr}}
@media(max-width:850px){
  .unternehmen-page,.ki-dienstleister-page,.beispiel-page{--modul:1fr;--modul-abstand:24px}
  .ki-dienstleister-page .deliverables{grid-template-columns:1fr;grid-template-rows:none;gap:28px}
  .ki-dienstleister-page .deliverables li{display:block;grid-row:auto}
  .beispiel-page .answer-pair{grid-template-columns:1fr;grid-template-rows:none;gap:28px}
  .beispiel-page .answer-pair>article{display:block;grid-row:auto}
  .preis-zeilen{grid-template-columns:1fr;gap:24px}
}
@media(max-width:680px){
  .unternehmen-page,.ki-dienstleister-page,.beispiel-page{--modul-abstand:20px}
  .kicker,.page-intro .kicker{font-size:13px}
  .excerpt-grid{grid-template-columns:1fr;gap:24px;margin-top:28px}
  .def-line{padding-left:20px;margin-top:28px}
  .preis-zahl{font-size:34px}
}

/* ==================================================================
   9. Massystem. Ersetzt 25 Schriftgroessen durch 7 und 25 Abstands-
   werte durch 6. Die vielen dicht beieinanderliegenden Werte in
   styles.css sind der Grund, warum die Seiten gleichfoermig wirken:
   Bei 17, 18, 19, 20, 21 und 22 Pixeln sieht man keinen Unterschied,
   man sieht nur Unruhe.
   ================================================================== */
@font-face{font-family:'DM Sans';src:url('assets/DMSans-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}

:root{
  /* Schriftgroessen, Faktor 1,25 ab 16px */
  --t-klein:13px; --t-text:16px; --t-gross:20px; --t-h3:25px;
  --t-h2:31px; --t-h1:39px; --t-hero:61px;
  /* Abstaende, Faktor rund 1,6 ab 8px */
  --a-1:8px; --a-2:16px; --a-3:24px; --a-4:40px; --a-5:64px; --a-6:104px;
  /* Lesebreite: 36rem sind rund 72 Zeichen. 44rem waren rund 95. */
  --measure:36rem;
}

/* Grundgroessen */
body{font-size:var(--t-text)}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
.lp-hero h1{font-size:var(--t-hero);line-height:1.04;letter-spacing:-.03em}
.page-intro h1{font-size:var(--t-h1);letter-spacing:-.025em}
.page-intro .lead,.check-hero .lead,.lp-hero-copy>p,.section-heading>p{font-size:var(--t-gross);line-height:1.6}
.section-label,.lp-eyebrow,.kicker,.page-intro .kicker,
.intro-note,.note,.lp-evidence-label,.step-label,.level-name,
.lp-credentials,.rule-document-label,.rule-critical,.paper-flag,
.offer-features>p,.comparison-points li,.site-footer,.draft{font-size:var(--t-klein)}
.use-case h3,.deliverables h3,.problem-story h3,.lp-audiences h3,
.quality-criterion h3,.offer-followup h3,.lp-feedback h3,.step-content h3,
.comparison-card h3,.answer-pair h3{font-size:var(--t-gross)}
.offer-heading h3,.teaser-grid>h2,.contribution-grid>h2,.scope-grid>h2,
.use-grid>h2,.deliverable-section>h2,.decision-grid>h2,.example-case>h2,
.contact-grid h2,.rule-document h3,.paper-title,.lp-consult .consult-title{font-size:var(--t-h3)}
.inquiry>p:last-child,.answer-quote,.answer-pair blockquote,.sample-quote{font-size:var(--t-gross);line-height:1.6}
.offer-scope>p,.offer-features li,.offer-followup p,.lp-feedback p,
.quality-criterion p,.deliverables p,.use-case p,.level-copy,.detail-body,
.payment-terms p,.offer-action p,.lp-consult>p{font-size:var(--t-text)}
.offer-scope .offer-limit{font-size:var(--t-klein)}

/* Preise und die grosse Zahl: Gewicht 300 statt 700. Grosse Grade wirken
   in Light ruhig, in Bold laut. Tabellenziffern, damit 500 und 2.500
   dieselbe Zifferbreite haben. */
.price,.preis-zahl{font-size:49px;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}

/* Abstaende */
/* 104px oben und unten ergaben zwischen zwei sandfarbenen Abschnitten 208px.
   Der groesste Abstand innerhalb eines Abschnitts betraegt 40px. Dieses
   Verhaeltnis von 5:1 liest sich als Loch, nicht als Gliederung. Wo die
   Flaeche wechselt, ist derselbe Wert richtig: Dort ist er Innenabstand der
   farbigen Flaeche und nicht Luecke zwischen zwei Abschnitten. */
.section{padding:var(--a-5) 0}
#beispiele,#investition,#ueber-mich{padding:var(--a-6) 0}
.section-heading{margin-bottom:var(--a-4)}
.page-intro{padding:var(--a-4) 0 var(--a-5)}
.contact{padding:var(--a-5) 0}
/* Das abschliessende p hatte sechs Layoutbloecke in die Absatzregel gezogen
   und ihnen ihren oberen Abstand genommen. Gemessene Folge: Vergleichsraster
   zu Pruefsatz 0px, Zahlungsbedingungen zu Preisraster 16px, Kriterienreihe
   zu Fussnote 16px. Beide Regeln stehen jetzt getrennt. */
p{margin:0 0 var(--a-2)}
.lp-proof,.quality-criteria,.pricing-grid,.payment-terms,
.offer-followup,.lp-feedback,.lp-quality-notes{margin:var(--a-4) 0 0}

/* Linien feiner. Gleiche Farbe, geringere Deckung: Haarlinien wirken
   hochwertiger als kraeftige Striche. */
.problem-story,.comparison-points,.quality-criterion,.use-case,
.lp-audiences article,.context-level,.process-steps>li,details,
.section-nav,.detail-section,.case-section,#problem,#qualitaet{border-color:rgba(26,26,26,.14)}

@media(max-width:850px){
  :root{--t-hero:41px;--t-h1:31px;--t-h2:26px;--t-h3:21px;--t-gross:18px;--a-6:64px;--a-5:48px;--a-4:32px}
  .price,.preis-zahl{font-size:36px}
}

/* Restliche Ausreisser aus styles.css auf die Skala ziehen. */
.text-link,.lp-link{font-size:var(--t-text)}
.site-header nav a,.section-nav a,.mobile-menu summary{font-size:var(--t-klein)}
.button{font-size:var(--t-text)}
.lp-proof>p:first-child:has(strong),.lp-quality-principle,.quality-criterion h3,
.teaser-grid h2,.example-case h2,.decision-grid>h2,.contribution-grid>h2,.scope-grid>h2{font-size:var(--t-h3)}
summary{font-size:var(--t-text)}
.lp-hero-copy .intro-note,.lp-hero-copy>.intro-note{font-size:var(--t-klein)}
.lp-hero{padding:var(--a-4) 0 var(--a-3)}

/* ==================================================================
   10. Zweit- und Drittschrift, seit 2026-09-13 lokal ausgeliefert.

   Source Serif 4 traegt Seiten- und Abschnittsebene, DM Sans den
   Fliesstext und die Bauteile, Source Code Pro ausschliesslich die
   Dateiauszuege. Die Wortmarke bleibt DM Sans.

   Beide neuen Schriften liegen als woff2 in assets/ und werden von
   der eigenen Domain geliefert. Die frueher hier stehende Ladung von
   einem externen Schriftdienst ist entfallen; es wird keine Adresse
   eines Besuchers mehr an einen Dritten uebertragen. Der Hostname
   steht hier bewusst nicht mehr im Text, weil die Exportpruefung in
   export-seitenpaket.py jede ausgelieferte Datei auf genau diese
   Zeichenfolge durchsucht und sonst abbrechen wuerde.

   woff2 statt ttf: Dasselbe Schriftbild, aber 73 statt 322 KB bei der
   Antiqua und 50 statt 130 KB bei der Festbreitenschrift. Die fuenf
   DM-Sans-Dateien bleiben vorerst ttf; eine Umstellung waere ein
   eigener Schritt und beruehrt auch die veroeffentlichte Fassung.

   Von Source Serif 4 wird nur der Schnitt 400 ausgeliefert. Der in
   visuelles_system.md als Reserve genannte Schnitt 600 wird nirgends
   verwendet und wuerde 73 KB ohne Gegenwert kosten.
   ================================================================== */
@font-face{font-family:'Source Serif 4';src:url('assets/SourceSerif4-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Code Pro';src:url('assets/SourceCodePro-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{--mono:'Source Code Pro',ui-monospace,SFMono-Regular,Menlo,monospace}

:root{--serif:'Source Serif 4',Georgia,serif}

h1,h2,
.lp-hero h1,.page-intro h1,
.teaser-grid>h2,.contribution-grid>h2,.scope-grid>h2,.use-grid>h2,
.deliverable-section>h2,.decision-grid>h2,.example-case>h2,.contact-grid h2,
.section-heading h2,
.paper-title,.rule-document h3,.lp-consult .consult-title,
.price,.preis-zahl{font-family:var(--serif);font-weight:400}

/* Antiquas brauchen weniger negative Laufweite als Grotesken. */
.lp-hero h1{letter-spacing:-.02em;line-height:1.06}
h1,h2,.page-intro h1{letter-spacing:-.015em}
.price,.preis-zahl{letter-spacing:0;font-weight:400}

/* Kartenueberschriften bleiben DM Sans. Damit trennen sich die Ebenen:
   Antiqua fuer Seite und Abschnitt, Grotesk fuer die Bauteile darin. */
.use-case h3,.deliverables h3,.problem-story h3,.lp-audiences h3,
.quality-criterion h3,.offer-followup h3,.lp-feedback h3,.step-content h3,
.comparison-card h3,.answer-pair h3,.offer-heading h3,
.brand,.button,.site-header nav a{font-family:'DM Sans',sans-serif}

/* Kartenueberschriften im Lieferergebnis in Terrakotta, wie die sieben
   uebrigen Kartenueberschriften der Startseite. Ausgenommen bleiben die
   Prozessschritte und die Dokumenttitel, weil dort bereits ein
   terrakottafarbenes Etikett darueber steht. */
#lieferergebnis .use-case h3{color:var(--accent)}

/* ==================================================================
   11. Abnahme-Abschnitt: Terrakotta zuruecknehmen und die Dreierreihe
   wiederherstellen.

   Die Trennung in zwei Gruppen hatte die Reihe zerrissen: Eine Kachel
   stand allein in einem Drittel, zwei Drittel blieben leer. Die
   Zugehoerigkeit steht jetzt als kleines Etikett in der Kachel selbst.
   Damit traegt nur noch eine Ebene die Akzentfarbe, die Kriterien.
   ================================================================== */
.kriterium-art{font-size:var(--t-klein);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(26,26,26,.5);margin:0 0 6px;font-family:'DM Sans',sans-serif}
.quality-criteria{grid-template-columns:repeat(3,1fr);gap:var(--modul-abstand,32px)}

/* Der Grundsatz war dreifach betont: gross, fett und in Terrakotta.
   Die Linie links genuegt als Auszeichnung. */
.lp-quality-principle{color:var(--ink);font-weight:400;font-size:var(--t-gross);line-height:1.6;
  border-left:2px solid var(--accent);padding-left:24px;margin-top:var(--a-4);max-width:36rem}
@media(max-width:850px){.quality-criteria{grid-template-columns:1fr}.lp-quality-principle{padding-left:20px}}

/* ------------------------------------------------------------------
   12. Preis: Farbe statt Groesse.

   Die Zahl stand mit 49px groesser als jede Ueberschrift der Seite
   ausser der Startseiten-Headline und war damit das lauteste Element
   des Abschnitts. Jetzt markiert die Akzentfarbe den Preis, und die
   Groesse faellt auf die einer Abschnittsueberschrift zurueck. Farbe
   macht auffindbar, Groesse macht laut.

   Gegenzug: In diesem Abschnitt trug Terrakotta bereits das
   Abschnittsetikett, beide Enthalten-Etiketten, jeden
   Aufzaehlungspunkt, die Akzentlinie und zwei Folgeueberschriften.
   Damit die Farbe weiter etwas markiert, werden die beiden
   schwaechsten Verwendungen leise. Ein Punkt vor einer Zeile braucht
   keine Markenfarbe.

   Der Rueckfallwert in var() haelt die Regel gueltig, solange der
   Farbvorschlag aus Abschnitt 13 nicht uebernommen ist: ohne ihn
   greift der verbindliche Ton #D2694A, mit ihm #DA7757.
   ------------------------------------------------------------------ */
.price{font-size:var(--t-h2);color:var(--accent-dunkelgrund,#D2694A)}
.preis-zahl{font-size:var(--t-h2);color:var(--accent)}
.offer-features li:before{color:rgba(247,244,239,.55)}

/* Nachtrag vom 2026-09-14: Das Enthalten-Etikett traegt wieder Terrakotta.
   Der Gegenzug oben nannte zwei solche Etiketten; seit die gemeinsamen
   Leistungen ueber den Karten stehen, gibt es nur noch eines. Es steht
   jetzt unter der terrakottafarbenen Ueberschrift des gemeinsamen Blocks
   und wuerde in Grau danebenstehen. Auf #171717 erreicht #DA7757 5,77:1
   und der Rueckfallwert #D2694A 5,00:1; beide halten die Schwelle fuer
   normal grossen Text. Angewiesen von Rima Varaskaite. */
.offer-features>p{color:var(--accent-dunkelgrund,#D2694A)}

/* ------------------------------------------------------------------
   13. Regelauszug als Dateiansicht.

   Der Auszug zeigt jetzt, was der Kunde tatsaechlich bekommt: den
   Inhalt der Datei samt ihrer Strukturzeichen. Die Schrift mit gleich
   breiten Zeichen traegt die Aussage; in einer Proportionalschrift
   lesen sich ## und ** wie Tippfehler und nicht wie Dateisyntax.

   Die beiden Auszuege standen zuvor als freie Textbloecke mit je einer
   senkrechten Linie nebeneinander, 514 gegen 597 Pixel hoch, die Linien
   entsprechend ungleich lang. Als Karten mit gleicher Unterkante
   entfaellt das.
   ------------------------------------------------------------------ */
.excerpt-grid{align-items:stretch}
.md-file{margin:0;display:flex;flex-direction:column;background:#fff;
  border:1px solid rgba(26,26,26,.14);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:24px 26px}
.md-file figcaption{font-size:var(--t-klein);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent);margin:0 0 18px;
  font-family:'DM Sans',sans-serif}
.md-file pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);
  font:400 13.5px/1.8 var(--mono)}
@media(max-width:680px){.md-file{padding:20px}.md-file pre{font-size:12.5px}}

/* ------------------------------------------------------------------
   14. Sechs Reste aus der Sichtung vom 2026-09-13.
   ------------------------------------------------------------------ */

/* 14.1 Eine Lesebreite statt zweier.
   Auf der Startseite standen sechs Textbreiten nebeneinander: 576, 800,
   920 und 960 Pixel sowie zwei Spaltenbreiten. Das Massystem hatte 36rem
   als Lesebreite festgelegt, aber nur drei Selektoren erreicht; die 800
   aus styles.css blieben an acht weiteren Stellen stehen. Unterschiedliche
   rechte Kanten lesen sich als Unruhe, nicht als Gliederung.
   Ausgenommen bleiben die dunkle Anfragebox und die FAQ-Liste: Die eine
   ist ein Zitatblock in groesserer Schrift, die andere eine Zeilenliste
   und keine Textspalte. */
.lp-proof,.def-line,.level-copy,.step-content p,.lp-quality-copy,
.lp-feedback p,.detail-body,.case-body>p,.sample-quote{max-width:var(--measure)}

/* 14.2 Terrakotta von den Abschnittsueberschriften der Unterseiten nehmen.
   Die Farbe trug dort Etiketten, Kartenueberschriften, Links, Buttons,
   Linien und zusaetzlich jede Abschnittsueberschrift. Eine Farbe, die
   alles markiert, markiert nichts. Auf der Unternehmensseite standen
   Ueberschrift und Preis unmittelbar nebeneinander in demselben Ton. */
.teaser-grid h2,.section-row>h2,.contribution-grid>h2,.scope-grid>h2,
.use-grid>h2,.deliverable-section>h2,.example-case>h2{color:var(--ink)}

/* 14.3 Eine Behandlung fuer Ueberschriften auf dunklem Grund.
   Auf der Startseite stand die Ueberschrift im dunklen Abschnitt in
   gedaempftem Grau, auf der Dienstleisterseite in Terrakotta. Jetzt
   tragen beide dasselbe helle Weiss, waehrend das Etikett darueber die
   Akzentfarbe behaelt. */
#investition .section-heading h2,.contact-grid h2,.decision-grid>h2,
.unternehmen-page #unternehmen-2 h2,
.ki-dienstleister-page #ki-dienstleister-2 h2{color:#F7F4EF}

/* 14.4 Zahlungsbedingungen als Paar statt als Einzelstueck.
   Von den zwei Absaetzen trug nur der linke eine Akzentlinie. Jetzt
   trennt eine Haarlinie das Paar vom Abschnittskopf, und beide Absaetze
   stehen gleich. */
.payment-terms{border-top:1px solid #61574e;padding-top:var(--a-3)}
.payment-terms p:first-child{border-left:0;padding-left:0}

/* 14.5 Die Einordnungsetiketten ueber den Abnahmekriterien lesbar machen.
   Bei 50 Prozent Deckkraft erreichten sie auf Sand 3,26:1 und lagen damit
   unter der Schwelle von 4,5:1 fuer normal grossen Text. Bei 65 Prozent
   sind es 5,22:1. */
.kriterium-art{color:rgba(26,26,26,.65)}

/* 14.6 Zwei Spaltenabstaende statt sieben.
   In Gebrauch waren 16, 20, 24, 32, 48, 72 und 80 Pixel. Das Massystem
   hatte Schriftgroessen und senkrechte Abstaende vereinheitlicht, die
   waagerechten nicht. Es bleiben zwei: 32 innerhalb einer Kartengruppe,
   72 zwischen Ueberschriftenspalte und Textspalte. */
.problem-grid,.use-cases,.lp-audiences,.payment-terms,
.offer-followup{gap:var(--modul-abstand,32px)}
.comparison-grid,.answer-pair{gap:20px var(--modul-abstand,32px)}
.about-grid{gap:72px}

/* ------------------------------------------------------------------
   16. Abnahme: ein Kriterium vorn, zwei Beobachtungsgroessen dahinter.

   Zuvor standen drei gleich grosse Spalten nebeneinander, zwei davon mit
   dem Etikett "Nur beobachtet" heruntergestuft. Der Leser zaehlt dabei:
   zwei von drei Kriterien gelten nicht. Die Aussage bleibt, die Bauform
   aendert sich.

   Das Abnahmekriterium bekommt die Kartenform der Dateiauszuege, damit
   die Seite eine Kartensprache hat und nicht zwei. Die beiden
   Beobachtungsgroessen stehen ruhig darunter, ohne Akzentfarbe und ohne
   Etikett. Der Vorbehalt steht einmal mit Begruendung statt zweimal als
   Stempel.
   ------------------------------------------------------------------ */
.abnahme-karte{max-width:680px;background:#fff;border:1px solid rgba(26,26,26,.14);
  border-left:3px solid var(--accent);border-radius:var(--radius);padding:32px 36px}
.abnahme-karte h3{font-size:var(--t-h3);color:var(--accent);margin:0 0 14px}
.abnahme-karte .kriterium-art{margin-bottom:10px}
.abnahme-karte p:last-child{margin:0}

.beobachtung{margin-top:var(--a-5)}
.beobachtung>h3{font-size:var(--t-gross);color:var(--ink);margin:0 0 var(--a-3)}
.beobachtung-paar{display:grid;grid-template-columns:1fr 1fr;gap:var(--modul-abstand,32px)}
.beobachtung-paar>div{border-top:1px solid rgba(26,26,26,.14);padding-top:20px}
.beobachtung-paar h4{font-size:var(--t-gross);font-weight:700;color:var(--accent);
  line-height:1.4;margin:0 0 10px;font-family:'DM Sans',sans-serif}
.beobachtung-paar p{font-size:var(--t-text);margin:0}
.beobachtung-note{font-size:var(--t-klein);line-height:1.7;color:var(--ink);
  max-width:var(--measure);margin-top:var(--a-3)}
@media(max-width:680px){
  .abnahme-karte{padding:24px 22px}
  .beobachtung-paar{grid-template-columns:1fr;gap:24px}
}

/* ------------------------------------------------------------------
   18. Satzspiegel von 1120 auf 980.

   Bei 1120px ergab die Achse zwei Spalten von je 544px. Eine Spalte
   dieser Breite ist fuer eine kurze Kennung wie "Schritt 1" oder
   "Gezaehlt wird in Aufgaben" zu gross; dazwischen entstand eine Luecke
   ohne Funktion. Bei 980px sind es 474px je Spalte. Das ist zugleich
   die Breite der Kartenspalten, und 474px tragen rund 60 Zeichen, also
   eine gute Zeilenlaenge.
   ------------------------------------------------------------------ */
.wrap,.lp-container{width:min(980px,calc(100% - 80px))}

/* ------------------------------------------------------------------
   17. Eine senkrechte Achse statt einer linken Textsaeule.

   Der Abschnittskopf bestand aus Etikett, Ueberschrift und Einleitung
   untereinander, alle auf 576px begrenzt. In einem 1120px breiten
   Satzspiegel blieben damit 544px rechts leer, und zwar am Anfang jedes
   Abschnitts. Darunter folgte jeweils ein Raster ueber die volle Breite.
   Die Seite sprang dadurch staendig zwischen halber und voller Breite.

   Jetzt stehen Etikett und Ueberschrift links, die Einleitung rechts
   daneben auf derselben Achse wie die rechte Spalte der Raster darunter.
   Abschnittskoepfe ohne Einleitung bleiben einspaltig; eine Ueberschrift
   allein braucht keine zweite Spalte.
   ------------------------------------------------------------------ */
.section-heading:has(>p),.section-heading:has(>.lp-quality-copy){display:grid;
  grid-template-columns:1fr 1fr;column-gap:var(--modul-abstand,32px);align-items:start}
.section-heading:has(>p)>.section-label,.section-heading:has(>.lp-quality-copy)>.section-label{grid-column:1;grid-row:1}
.section-heading:has(>p)>h2,.section-heading:has(>.lp-quality-copy)>h2{grid-column:1;grid-row:2;margin-bottom:0}
.section-heading:has(>p)>p,.section-heading:has(>.lp-quality-copy)>.lp-quality-copy{
  grid-column:2;grid-row:1 / span 2;margin-top:0;max-width:none}

/* Prozessschritte als Zeitstrahl, wie im veroeffentlichten Stand.
   Eine senkrechte Linie traegt die Schritte, ein Punkt markiert jeden
   Schritt, der Inhalt steht in einer Spalte daneben. Die zuvor hier
   versuchte Zweiteilung liess neben jeder Kennung eine leere Haelfte
   stehen; die Kennung ist zu kurz, um eine Spalte zu fuellen. */
.process-steps{position:relative;border-left:2px solid rgba(179,78,48,.3);
  margin-left:4px;padding-left:0}
.process-steps>li{display:block;position:relative;border-top:0;
  padding:0 0 0 var(--a-5);margin:0 0 var(--a-5)}
.process-steps>li:last-child{margin-bottom:0}
/* box-sizing:border-box aus styles.css gilt nur fuer Elemente, nicht fuer
   ::before. Ohne diese Zeile ist der Punkt 20px Inhalt plus 8px Rand breit
   und sitzt vier Pixel neben der Linie statt auf ihr. */
.process-steps>li::before{content:'';box-sizing:border-box;position:absolute;
  left:-11px;top:4px;width:20px;height:20px;border-radius:50%;
  background:var(--paper);border:4px solid rgba(179,78,48,.3)}
.process-steps>li:first-child::before,
.process-steps>li:last-child::before{border-color:var(--accent)}
.step-label{margin-bottom:6px}
.step-content h3{margin-bottom:10px}
.step-content p,.level-copy{max-width:44rem}

/* Einordnungszeilen: kurze Kennung, breiter Text. Keine halbe Seite
   fuer zwei Woerter. */
.context-level,.context-level-core{grid-template-columns:170px 1fr;
  gap:var(--modul-abstand,32px)}

/* Die Abnahmekarte nimmt die volle Breite und teilt sich innen auf
   dieselbe Achse: Kriterium links, Beschreibung rechts. */
.abnahme-karte{max-width:none;display:grid;grid-template-columns:1fr 1fr;
  column-gap:var(--modul-abstand,32px);align-items:start}
.abnahme-karte .kriterium-art{grid-column:1;grid-row:1}
.abnahme-karte h3{grid-column:1;grid-row:2;margin:0}
.abnahme-karte>p{grid-column:2;grid-row:1 / span 2;margin:0}

/* Portraet und FAQ auf dieselbe Achse und dieselbe Satzbreite.
   Der Text im Abschnitt "Ueber mich" war auf 576px begrenzt, seine Spalte
   aber 768px breit; dazwischen blieb eine Luecke ohne Funktion. Die
   FAQ-Liste endete bei 960px und damit 160px vor dem rechten Rand aller
   uebrigen Abschnitte. */
.about-grid{grid-template-columns:1fr 1fr;gap:var(--modul-abstand,32px)}
/* Ohne diese Zeile blieb der Abschnitt auch auf dem Telefon zweispaltig:
   Die Regel darueber gilt fuer jede Breite und schlug die einspaltige
   Fassung in styles.css, die frueher geladen wird. Der Text stand dann in
   einer Spalte von rund 150 Pixeln neben dem Bild. Gefunden am
   2026-09-14 beim Rendern der Telefonansicht. */
@media(max-width:850px){
  .about-grid{grid-template-columns:1fr;gap:var(--a-4)}
  .about-portrait{justify-self:start}
  .about-portrait img{width:260px}
}
.about-copy>div{max-width:none}
/* Das neue Portraet behält den bestehenden 4:5-Rahmen.
   Der Ausschnitt wird nur in der Darstellung gesetzt; das Original bleibt erhalten. */
.about-portrait{justify-self:end}
.about-portrait img{width:400px;max-width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center}

/* Das Icon im Fuss sitzt auf derselben Grundlinie wie die Textlinks. */
.site-footer .wrap>div{align-items:baseline}
.site-footer .icon-link{height:auto;align-self:center}
.faq-list{max-width:none}

/* Die hervorgehobenen Bloecke nutzen dieselbe Achse: die tragende
   Aussage links, die Erlaeuterung rechts. Vorher hing der ganze Block
   auf 576px links und liess die rechte Haelfte leer. Bloecke ohne
   tragende Aussage verteilen ihre Absaetze auf beide Spalten. */
/* Ein Block mit tragender Aussage und Erlaeuterung wird nicht geteilt;
   die Aussage steht oben, der Text darunter. Nur der Block aus zwei
   gleichwertigen Absaetzen steht zweispaltig, weil dort beide Spalten
   Inhalt haben. */
.lp-proof{max-width:44rem}
.lp-proof:not(:has(>p>strong)){display:grid;grid-template-columns:1fr 1fr;
  column-gap:var(--modul-abstand,32px);max-width:none;align-items:start}
.lp-proof:not(:has(>p>strong))>p{margin:0}
/* Auf schmalen Schirmen ergaeben zwei Spalten rund 120 Pixel je Spalte.
   Der Block darunter hatte diese Ausnahme bereits, dieser nicht. */
@media(max-width:850px){
  .lp-proof:not(:has(>p>strong)){grid-template-columns:1fr;row-gap:var(--a-2)}
}
/* Die Zaehleinheit ist ein Satz und eine Erlaeuterung, keine zwei
   Spalten. Sie steht geschlossen auf der Textachse rechts, samt ihrer
   Akzentlinie: Eine Linie am linken Satzspiegelrand haette 474px
   entfernt von dem Text gestanden, den sie auszeichnet. */
.def-line{display:block;max-width:44rem}
.def-lead{font-weight:700;color:var(--ink);margin-bottom:var(--a-1)}

/* Die beiden Fussnoten standen untereinander auf einer dritten Breite,
   die weder zur Spalte noch zum Satzspiegel passte: drei rechte Kanten in
   einem Block. Sie stehen jetzt in denselben zwei Spalten wie die beiden
   Groessen, auf die sie sich beziehen. */
.beobachtung-fuss{display:grid;grid-template-columns:1fr 1fr;
  column-gap:var(--modul-abstand,32px);margin-top:var(--a-4)}
.beobachtung-fuss p{font-size:var(--t-klein);line-height:1.7;color:var(--ink);margin:0}
.lp-quality-copy{max-width:44rem}
@media(max-width:850px){.beobachtung-fuss{grid-template-columns:1fr;row-gap:var(--a-2)}}

@media(max-width:850px){
  .section-heading:has(>p),.section-heading:has(>.lp-quality-copy),
  .abnahme-karte{display:block}
  .section-heading:has(>p)>h2,.section-heading:has(>.lp-quality-copy)>h2{margin-bottom:var(--a-2)}
  .abnahme-karte h3{margin-bottom:14px}
  .abnahme-karte>p{margin-top:14px}
  .lp-proof,.def-line{grid-template-columns:1fr;max-width:var(--measure)}
  .lp-proof>p,.def-line>p{grid-column:1 !important;grid-row:auto !important}
  .lp-proof>p+p,.def-line>p+p{margin-top:var(--a-2)}
  .context-level,.context-level-core,.process-steps>li{grid-template-columns:1fr;gap:10px}
}

/* ==================================================================
   15. Farbpaar von Variante B, seit 2026-09-13 uebernommen.

   Ausgangspunkt: Terrakotta wirkt auf Sand weich, weil der Abstand im
   Hellwert klein ist. Der Fliesstext #1A1A1A erreicht auf Sand 15,9:1,
   der Akzent #B34E30 nur 4,58:1. Der Akzent ist damit der zweitschwaechste
   Ton der Seite, obwohl er der auszeichnende sein soll. Hinzu kommt: 4,58
   ist der knappste Wert, der die Schwelle von 4,5 gerade noch haelt, also
   ein Minimum und kein gewaehlter Wert.

   Loesung ist kein zweiter Farbwert, sondern ein Ton in zwei Helligkeiten.
   Beide haben denselben Buntton (15 Grad) und fast dieselbe Saettigung;
   sie unterscheiden sich nur im Hellwert. Damit bleibt es eine Farbe.

     #9E4426  H15 S61 L38   auf Sand 5,61:1, mit weisser Schrift 6,35:1
     #DA7757  H15 S64 L60   auf #171717 5,77:1

   Zum Vergleich die geltenden Werte: #B34E30 auf Sand 4,58:1, mit Weiss
   5,19:1; #D2694A auf #171717 5,00:1.

   Abschlussauftrag vom 2026-09-21: Die gewaehlten Werte stehen jetzt in
   visuelles_system.md und den gemeinsamen OG- und Bildkartenvorlagen.
   Dies ist der lokale Freigabestand, kein Nachweis einer Veroeffentlichung.
   ================================================================== */
:root{--accent:#9E4426;--accent-dunkelgrund:#DA7757}

#investition .section-label,
.contact .section-label,
.offer-followup h3,
.lp-feedback h3,
.decision-grid>h2,
.unternehmen-page #unternehmen-2 h2,
.ki-dienstleister-page #ki-dienstleister-2 h2,
.paper-flag{color:var(--accent-dunkelgrund)}
.ki-dienstleister-page #ki-dienstleister-2 .deliverables li{border-top-color:var(--accent-dunkelgrund)}
#investition .offen{border-color:var(--accent-dunkelgrund)}
.contact :focus-visible,#investition :focus-visible{outline-color:var(--accent-dunkelgrund)}
.lp-accent{color:rgba(158,68,38,.85)}

/* Auf dunklem Grund traegt der helle Ton auch die Flaechen und Linien.
   Der dunkle Ton erreicht als Flaeche auf #171717 nur 2,82:1, der geltende
   #B34E30 3,46:1. Beides ist zu wenig, damit ein Button sich von seinem
   Grund abhebt. #DA7757 erreicht 5,77:1, und schwarze Schrift darauf
   ebenfalls 5,77:1. Weisse Schrift auf #DA7757 waere mit 3,11:1 zu wenig. */
#investition .button,.contact .button{background:var(--accent-dunkelgrund);color:#171717}
#investition .button:hover,.contact .button:hover{background:var(--paper);color:var(--ink)}
#investition .payment-terms p:first-child{border-left-color:var(--accent-dunkelgrund)}

/* Die Frage im Beispielteaser traegt die Akzentfarbe.
   Abschnitt 14.2 nimmt Terrakotta von den Abschnittsueberschriften. Diese
   Ueberschrift ist ein Sonderfall: Sie besteht aus einer grauen Feststellung
   und der schwarzen Frage darunter. Die Farbe trennt hier die beiden Saetze
   voneinander, statt eine ganze Ueberschrift einzufaerben. */
.teaser-grid h2 .example-question{color:var(--accent)}

/* ==================================================================
   18. Preisblock: gemeinsame Leistungen einmal, danach die Unterschiede.

   Beide Karten trugen eine eigene Liste. Sie unterschieden sich an
   Stellen, an denen sich die Pakete nicht unterscheiden, und ein
   fehlender Punkt las sich wie eine fehlende Leistung. Die gemeinsamen
   Leistungen stehen jetzt einmal ueber den Karten, auf derselben Achse
   wie alle zweispaltigen Bloecke. Die kleine Karte braucht danach keine
   Liste mehr; ihr Text nimmt die freie Spalte ein.
   ================================================================== */
/* ==================================================================
   20. Preise als zwei weisse Kacheln auf dem dunklen Grund.

   Die Zeilenfassung war eine Tabelle in der Farbe des Abschnitts: drei
   Spalten, funf Haarlinien, alles dunkel. Die veroeffentlichte Seite
   stellt die beiden Angebote als weisse Karten nebeneinander, und das
   ist die Fassung, die gelten soll. Eine Karte hebt ein Angebot heraus,
   eine Tabellenzeile reiht es ein.

   Die Karte verwendet dieselben Werte wie die Abnahmekarte auf hellem
   Grund: weisser Grund, feine Kante, Radius 8, Innenabstand 32 und 36.
   Innerhalb der Karte gelten die Textfarben des hellen Grundes; der
   Akzent ist dort #9E4426 und erreicht auf Weiss 5,61:1.
   ================================================================== */
#investition .payment-terms{grid-template-columns:1fr;margin-top:var(--a-4)}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:var(--modul-abstand,32px);border:0;margin-top:var(--a-4)}
/* gap:0 hebt den Spaltenabstand der frueheren Tabellenfassung auf. Als
   Flexabstand haette er zwischen jedem Kartenteil noch einmal 32 Pixel
   eingefuegt. */
.pricing-card{display:flex;flex-direction:column;gap:0;background:#fff;
  color:var(--text);border:1px solid rgba(26,26,26,.14);
  border-radius:var(--radius);padding:32px 36px}
.pricing-card + .pricing-card{border-top:1px solid rgba(26,26,26,.14)}
.pricing-card .offer-heading{display:block;margin-bottom:var(--a-3)}
.pricing-card .offer-heading h3{color:var(--ink);margin:0 0 10px}
.pricing-card .price{color:var(--accent);font-family:'DM Sans',sans-serif;
  font-weight:400;letter-spacing:-.01em}
.pricing-card .offer-scope{display:block}
.pricing-card .offer-scope>p{color:var(--text);margin:0}
.pricing-card .offer-features{margin-top:var(--a-3);padding-top:var(--a-3);
  border-top:1px solid rgba(26,26,26,.14)}
.pricing-card .offer-features>p{color:var(--accent)}
.pricing-card .offer-features li{color:var(--text)}
.pricing-card .offer-features li:before{color:var(--accent)}
/* Der Hinweis steht am Fuss der Karte. Beide Karten sind gleich hoch;
   ohne diese Zeile haengt er in der kuerzeren Karte in der Mitte. */
.pricing-card>.offer-limit{color:var(--ink);border-top:0;
  margin:auto 0 0;padding-top:var(--a-4);font-size:var(--t-klein);
  line-height:1.7}

/* Nebeneinander teilen beide Karten dieselben vier Zeilen: Kopf,
   Beschreibung, Leistungen, Hinweis. Ohne gemeinsame Zeilen stehen
   Trennlinie, "Enthalten:" und Hinweis je nach Textlaenge versetzt. */
@media(min-width:851px){
  @supports (grid-template-rows:subgrid){
    .pricing-grid{grid-template-rows:auto auto 1fr auto}
    .pricing-card{display:grid;grid-row:span 4;grid-template-columns:1fr;
      grid-template-rows:subgrid;gap:0}
    .pricing-card>.offer-limit{margin:0}
  }
}
@media(max-width:850px){
  .pricing-grid{grid-template-columns:1fr;gap:var(--a-4)}
}
@media(max-width:680px){
  .pricing-card{padding:26px 24px}
  /* styles.css ordnet die Kartenteile fuer die alte Tabellenfassung um.
     In der Kachel steht der Name oben; die Umordnung wird aufgehoben. */
  .pricing-card>*{order:0}
}

/* Unter der Preistabelle standen zwei Haarlinien 35 Pixel uebereinander:
   der untere Abschluss der Tabelle und der obere Rand des Folgeblocks.
   Dazwischen war nichts. Die Tabelle schliesst die Zeile, der Folgeblock
   braucht keine zweite. */
.offer-followup{border-top:0}

@media(max-width:680px){
  /* Dieselbe Auswahl noch einmal: Die Regel mit :not(:has(...)) oben waere
     sonst staerker und liesse die Einschraenkung auf dem Telefon vor der
     Ueberschrift der Zeile stehen. */
}
/* Die kleine Karte behaelt die Spaltenbreite der grossen, statt ihren Text
   ueber die freie dritte Spalte zu ziehen: Zwei Angebote nebeneinander
   lesen sich nur dann als Paar, wenn ihre Textspalten gleich breit sind. */


/* ==================================================================
   19. Abnahmeabschnitt: Form statt Fliesstext.

   Der Abschnitt bestand unten aus einem fuenfzeiligen Absatz, einer
   Fussnote und einem Schlusssatz, alle untereinander in einer Spalte.
   Das war viel Text fuer zwei Beobachtungsgroessen. Die beiden Groessen
   stehen jetzt als Paar nebeneinander, mit Kennung und einem Satz, wie
   die Kartenreihen der uebrigen Abschnitte. Der Schlusssatz steht ueber
   die volle Satzspiegelbreite unter dem Abschnitt.
   ================================================================== */
.beobachtung-paar p{max-width:none}
/* Die Fussnote gehoert zu den beiden Groessen darueber, der Schlusssatz
   gehoert zum Abschnitt. Deshalb steht die Fussnote nah am Paar und der
   Schlusssatz deutlich weiter weg. Eine zusaetzliche Trennlinie waere die
   dritte waagerechte Linie in diesem Block; der Abstand trennt genauso
   und bleibt ruhiger. */
.beobachtung-note{font-size:var(--t-klein);line-height:1.7;color:var(--ink);
  margin:var(--a-3) 0 0;max-width:44rem}
#qualitaet>.wrap>.lp-quality-principle{margin-top:var(--a-5)}
#qualitaet>.wrap>.lp-evidence-label{margin-top:var(--a-2)}

/* Sekundaerer Knopf: sichtbar, aber dem Hauptknopf nachgeordnet */
.button.button-sekundaer{background:transparent;color:var(--ink);border:1px solid currentColor}
.button.button-sekundaer:hover{background:var(--ink);color:var(--paper)}
#investition .button.button-sekundaer,.contact .button.button-sekundaer{background:transparent;color:var(--paper);border:1px solid var(--paper)}
#investition .button.button-sekundaer:hover,.contact .button.button-sekundaer:hover{background:var(--paper);color:#171717}

/* Vorspannbereich: eine tragende Zeile statt fuenf verschieden langer.
   Die Ueberschrift fuellt die Breite und wird zur Kante, an der sich der
   Vorspann ausrichtet. balance gleicht die Zeilen einer mehrzeiligen
   Ueberschrift aneinander an.

   Seit 2026-09-19 gilt diese Form fuer alle Unterseiten, nicht mehr nur
   fuer die Unternehmensseite. Vorher fing jede Unterseite auf einer
   anderen Hoehe und in einer anderen Groesse an. Der 3-Minuten-Check
   hat keine .page-intro, sondern .check-hero; er steht deshalb als
   zweiter Selektor daneben statt als eigene Regel in check.css. */
.page-intro h1,.check-hero h1{font-size:56px;line-height:1.08;text-wrap:balance;max-width:none}
.page-intro .lead,.check-hero .lead{max-width:none}
@media(max-width:680px){.page-intro h1,.check-hero h1{font-size:36px;line-height:1.15}}


/* ==================================================================
   20. Rechtstexte: Impressum und Datenschutzerklaerung.

   Beide Seiten liefen bis zum 2026-09-19 ueber ein eigenes zweites
   Gestaltungssystem mit eigener Kopfzeile, eigenen Schriftgraden und
   ohne Fusszeile. Sie haben jetzt denselben Kopf, denselben Fuss und
   dieselbe Schriftskala wie die uebrigen Unterseiten.

   Der Blocksatz der alten Fassung ist entfallen. Auf der ganzen
   uebrigen Seite steht jeder Text linksbuendig mit gleichmaessigem
   Wortabstand; Blocksatz haette den Rechtstext als Fremdkoerper
   ausgewiesen und erzeugt bei langen Rechtsbegriffen Loecher.
   ================================================================== */
.rechtstext{max-width:var(--measure)}
.rechtstext>section{padding-top:var(--a-4);margin-top:var(--a-4);
  border-top:1px solid rgba(26,26,26,.14)}
.rechtstext>section:first-child{padding-top:0;margin-top:0;border-top:0}
.rechtstext h2{font-size:var(--t-h3);margin:0 0 var(--a-2)}
.rechtstext p{line-height:1.75}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext .rechtstext-hinweis{font-size:var(--t-klein);color:rgba(26,26,26,.7)}
/* Zwischen Vorspann und erstem Abschnitt stand auf gleicher Flaeche ein
   Loch aus zwei Aussenabstaenden. Auf den uebrigen Unterseiten faellt es
   nicht auf, weil dort die Flaeche wechselt. */
.rechtstext-page .page-intro+.section{padding-top:0}


/* ==================================================================
   21. Kurzvorstellungen unter /pitch und /pitch-allgemein.

   Beide Seiten liefen bis zum 2026-09-19 ueber ein zweites
   Gestaltungssystem und luden ausserdem Schriften aus einem Ordner,
   den es hier nicht mehr gibt; sie wurden in einer Systemschrift
   ausgeliefert. Sie verwenden jetzt Kopf, Fuss, Schriften und
   Schriftskala der uebrigen Seiten.

   Die Seiten bleiben einzweckig: Die Kopfzeile traegt nur die
   Wortmarke und einen Knopf, keine Hauptnavigation. Sie sind auf
   noindex gesetzt und werden aus Nachrichten heraus aufgerufen,
   nicht ueber die Website durchblaettert.
   ================================================================== */
.pitch-page .site-header nav{gap:0}
/* Der Knopf in der Kopfzeile: .site-header nav a setzt sonst Schriftgrad
   und Innenabstand jedes Links in der Kopfzeile und presste die Schrift
   ueber den Rand des Knopfes hinaus. */
.pitch-page .site-header nav a.button{padding:11px 18px;color:#fff;font-weight:700}
.pitch-page .site-header nav a.button:hover{color:#fff}

/* Die Abschnittsueberschriften sind Oberzeilen und keine gesetzten
   Zeilen einer Antiqua: Versalien in Source Serif lesen sich auf
   dieser Groesse als Fremdkoerper. */
.pitch-page h2.kicker{font-family:'DM Sans',sans-serif;font-size:var(--t-klein);
  letter-spacing:.07em;color:var(--accent);margin:0 0 var(--a-3)}

/* Eine Aussage, die einen Abschnitt traegt: gross wie eine Zwischen-
   ueberschrift, aber als Satz gesetzt. Die Angabe steht hinter
   .use-case p, damit sie in den Karten nicht auf Fliesstextgroesse
   zurueckfaellt. */
.pitch-aussage,.pitch-page .use-case p.pitch-aussage{font-size:var(--t-h3);
  line-height:1.35;letter-spacing:-.015em;font-family:var(--serif);max-width:44rem}
.pitch-page .use-case p.pitch-aussage{font-size:var(--t-gross);max-width:none}

/* Die Zeile zur Person ist eine Angabe, keine Aussage des Abschnitts.
   .lp-proof haette ihr ueber die :has(strong)-Regel 25px gegeben. */
.pitch-byline{border-left:2px solid var(--accent);padding-left:var(--a-3);
  max-width:44rem;margin-top:var(--a-3)}
.pitch-byline p{margin:0;font-size:var(--t-text);line-height:1.7}

.pitch-liste{list-style:none;padding:0;margin:0 0 var(--a-2);max-width:44rem}
.pitch-liste li{position:relative;padding:0 0 10px 26px;margin:0;line-height:1.6}
.pitch-liste li:before{content:attr(data-marke);position:absolute;left:0;
  color:var(--accent);font-weight:700}
.pitch-page .use-cases{gap:32px}
/* Der erklaerende Absatz klebte an den Knoepfen: .actions bringt nur
   einen Abstand nach oben mit. */
.pitch-page .actions+.reading{margin-top:var(--a-3)}
/* Die tragende Aussage folgt meist auf einen Absatz. Der Abstand von
   16px unter dem Absatz ist fuer einen deutlich groesseren Satz zu
   wenig; er sah aus wie eine Fortsetzung derselben Zeile. */
.pitch-page *+.pitch-aussage{margin-top:var(--a-3)}

/* Unter 850px blendet styles.css die Kopfzeilennavigation aus und
   zeigt stattdessen das Menue. Diese Seiten haben kein Menue, nur
   den Knopf; ohne diese Zeile waere er auf dem Telefon verschwunden,
   und die Seiten werden vor allem auf dem Telefon geoeffnet. */
@media(max-width:850px){.pitch-page .site-header>.wrap>nav{display:flex}}
/* Auf schmalen Telefonen stiess die lange Knopfbeschriftung an die
   Wortmarke. Der Knopf traegt dort das kuerzere Wort. */
.knopf-kurz{display:none}
@media(max-width:480px){.knopf-kurz{display:inline}.knopf-lang{display:none}}
/* Der Preis in der Angebotskarte: gleiche Groesse und Farbe wie auf der
   Unternehmensseite. .use-case p haette ihn auf Fliesstext gezogen. */
.pitch-page .use-case p.preis-zahl{font-size:var(--t-h2);color:var(--accent);
  margin:var(--a-1) 0 var(--a-2)}


/* ==================================================================
   22. Hero der Startseite, neu gefasst am 2026-09-20.

   Vorher standen dort die Aussage, ein erklaerender Absatz und rechts
   ein zweiter Aufruf zum selben Gespraech, dessen Text fast woertlich
   noch einmal im Kontaktabschnitt steht. Der Hero sagte dasselbe
   dreimal. Uebrig ist ein Satz; rechts steht jetzt die Gabelung, die
   der Besucher wirklich braucht.

   Die Textspalte wird breiter, damit die beiden Knoepfe nebeneinander
   stehen und nicht untereinander umbrechen.
   ================================================================== */
/* Nur ab Tabletbreite zweispaltig. Ohne diese Klammer haette die Regel
   die Einspalter-Regel aus styles.css ueberschrieben, weil sie spaeter
   steht: Auf dem Telefon standen dann zwei Spalten von 158 und 96 Pixeln
   nebeneinander und die rechte Spalte ragte aus dem Bild. */
@media(min-width:681px){.lp-hero-grid{grid-template-columns:1.65fr 1fr;gap:56px}}
.lp-consult>p:last-child{margin-bottom:0}