/* =========================================================================
   kiesewetter.NET — Aufmassblatt
   Die Bildwelt dieser Site. Entscheidung Tommy, 2026-08-13; Richtungsvertrag
   im Markup, oberhalb des Skip-Links im Header-Partial.

   Grundsatz: Die Seite ist ein Formular, kein Prospekt. Was ein Prospekt mit
   Karten, Schatten und Icon-Kacheln macht, macht ein Formular mit Linien,
   Feldflaechen und Positionsnummern. Deshalb gibt es hier keinen einzigen
   Kartenschatten und keine abgerundete Box als Traeger von Inhalt.

   Diese Datei loest die Weltebene von custom.css ab. Sie wird erst ueber
   knet.advanced.customCss scharfgeschaltet, wenn sie die Site vollstaendig
   traegt; bis dahin laeuft die Seite unveraendert weiter.
   ========================================================================= */

/* Die alte Welt laeuft zuerst und traegt weiter alle Funktionsarbeit der
   Runden davor: Schnellkontaktleiste, Formularfehler mit Uebersicht und
   Sprungzielen, Skip-Link, Ankerabstaende, Consent, Karte. Was hier darunter
   steht, ueberschreibt ihre Optik bei gleicher Spezifitaet, weil es spaeter
   kommt. Mit jedem fertigen Bereich faellt der zugehoerige Abschnitt drueben
   ersatzlos weg; am Ende bleibt von custom.css nur die Funktion uebrig.
   ZWISCHENZUSTAND, kein Dauerbau. */
@import url('custom.css');
@import url('fonts/aufmass-fonts.css');

/* ---------------------------------------------------------------------------
   1) Die fuenf Markenfarben
   Verbindlich seit 2026-07-31, bestaetigt 2026-08-13. Keine sechste, keine
   abgeleiteten Zwischentoene. Die Rollen sind keine Geschmacksfrage, sondern
   folgen aus den gemessenen Kontrasten:

     #333 auf #fff        12,63:1   alles erlaubt
     #333 auf #ade602      8,48:1   alles erlaubt   <- Flaeche, die Text traegt
     #333 auf #e68702      4,71:1   alles erlaubt
     #333 auf #739a01      3,82:1   nur grosse fette Schrift
     #fff auf #739a01      3,31:1   nur grosse fette Schrift
     #739a01 auf #fff      3,31:1   nur grosse fette Schrift
     #e68702 auf #fff      2,68:1   ueberhaupt kein Text

   Merksatz, der jede Regel unten erklaert: Das Hauptgruen traegt in keiner
   Richtung normalen Text. Es ist Linie, Rahmen und Flaeche. Wo eine Flaeche
   Text tragen muss, ist sie Hellgruen mit #333.
--------------------------------------------------------------------------- */
:root {
  --kw-gruen:      #739a01;   /* Formularlinie, Rahmen, Flaeche, grosse Schrift */
  --kw-hellgruen:  #ade602;   /* Feldflaeche, traegt #333 */
  --kw-orange:     #e68702;   /* Stempel und Markierung, traegt #333 */
  --kw-text:       #333333;   /* Fliesstext und Ueberschriften */
  --kw-weiss:      #ffffff;   /* Blattgrund */

  /* Abstufungen des Blattes selbst. Kein Farbwert, sondern Papier: Deckkraft
     des Textes und Staerke der Linien. So bleibt die Palette bei fuenf. */
  --kw-text-leise:  rgba(51, 51, 51, .72);   /* Sekundaertext, 8,0:1 auf Weiss */
  --kw-linie:       rgba(51, 51, 51, .22);   /* feine Formularlinie */
  --kw-linie-stark: var(--kw-gruen);         /* tragende Linie */
  --kw-feld:        rgba(173, 230, 2, .16);  /* sehr blasse Feldflaeche */

  --kw-schrift:     'Archivo', system-ui, sans-serif;
  --kw-schrift-pos: 'Martian Mono', ui-monospace, monospace;

  /* Formularraster: eine Positionszeile hat immer dieselben Spalten.
     Pos. | Bezeichnung | Menge/Einheit — auf schmalen Geraeten klappt sie um. */
  --kw-spalte-pos:  4.5rem;
  /* Breit genug, dass die Telefonnummer in einer Zeile steht: gemessen brach
     sie bei 168px nutzbarer Breite hinter der Vorwahl um. */
  --kw-spalte-wert: 15.5rem;

  /* Abstand zwischen tragender Linie und der Ueberschrift darunter. Vorher in
     em der Elternschrift gesetzt und damit an 17px gemessen statt an der
     Ueberschrift: unter einer 58px-H1 blieben 6px, was gequetscht aussah.
     Feste Werte, weil die Linie zur Schriftgroesse gehoert, nicht zum Absatz. */
  --kw-linie-abstand:      24px;   /* H2-Positionen */
  --kw-linie-abstand-kopf: 32px;   /* H1 im Kopf, groessere Schrift */
  --kw-zeile:       1px;
}

/* ---------------------------------------------------------------------------
   2) Blattgrund und Grundschrift
   Weiss, nicht Off-White: ein Formular liegt auf Papier, nicht auf Creme.
   Der Grauton der alten Welt (#FAFAF8) war die haeufigste aller KI-Grundfarben.
--------------------------------------------------------------------------- */
body {
  background: var(--kw-weiss);
  color: var(--kw-text);
  font-family: var(--kw-schrift);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--kw-schrift);
  color: var(--kw-text);
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Die H1 ist die Betreffzeile des Formulars: gross, eng, in Versalhoehe
   gesetzt, nicht als weiche Marketing-Headline. */
h1, .h1 {
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.02;
  letter-spacing: -.035em;
}
h2, .h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; }
h3, .h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }

p { margin-bottom: 1rem; }

/* ---------------------------------------------------------------------------
   3) Die Notation des Formulars
   Positionsnummern, Mengen, Einheiten, Datum, Zeichen: alles, was in einem
   Aufmassblatt in die schmalen Spalten gehoert, laeuft in Martian Mono.
   Fliesstext nie — Mono als Kostuem fuer "technisch" ist genau der Fehler,
   den diese Welt vermeiden soll.
--------------------------------------------------------------------------- */
.kw-pos,
.kw-menge,
.kw-feldname,
.kw-datum {
  font-family: var(--kw-schrift-pos);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.kw-pos      { font-size: 13px; color: var(--kw-text-leise); }
.kw-feldname { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--kw-text-leise); }
.kw-datum    { font-size: 12px; color: var(--kw-text-leise); }

/* ---------------------------------------------------------------------------
   4) Linien
   Die Linie ist in dieser Welt das, was in der alten Welt der Kartenrand war:
   das Mittel, mit dem Inhalt gefasst wird. Zwei Staerken, mehr nicht.
--------------------------------------------------------------------------- */
.kw-linie-fein   { border-top: 1px solid var(--kw-linie); }
.kw-linie-tragend{ border-top: 2px solid var(--kw-linie-stark); }

/* ---------------------------------------------------------------------------
   5) Der Stempel
   Genau eine orange Markierung je Bildschirm. Sie zeigt nicht auf Dekoratives,
   sondern auf das, was der Leser als Naechstes tun oder wissen soll.
--------------------------------------------------------------------------- */
.kw-stempel {
  display: inline-block;
  padding: 4px 10px;
  background: var(--kw-orange);
  color: var(--kw-text);
  font-family: var(--kw-schrift-pos);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  transform: rotate(-1.4deg);
}

/* ---------------------------------------------------------------------------
   6) Schrift der ganzen Site umhaengen
   custom.css setzt --font-heading/--font-body auf Space Grotesk und Hanken
   Grotesk und zieht sie ueber Elementregeln durch. Beide Tokens werden hier
   umgehaengt, damit kein Selektor einzeln nachgezogen werden muss.
--------------------------------------------------------------------------- */
:root {
  --font-heading: var(--kw-schrift);
  --font-body:    var(--kw-schrift);
  --font-mono:    var(--kw-schrift-pos);
  --knet-font-headline: var(--kw-schrift);
  --knet-font-body:     var(--kw-schrift);
}

/* Martian Mono laeuft deutlich breiter als Space Mono. Ueberall dort, wo die
   alte Welt Mono als Label gesetzt hat, muss die Laufweite zurueck, sonst
   sprengen die Labels ihre Spalten. */
.eyebrow, .knet-eyebrow, .font-mono, .knet-mono,
.knet-header-phone, .knet-breadcrumb .breadcrumb,
.kw-trust-num, .knet-footer .knet-footer-bottom,
.knet-footer a[href^="tel:"], .knet-footer a[href^="mailto:"] {
  letter-spacing: -.03em;
}

/* ---------------------------------------------------------------------------
   7) Blatt statt Prospekt
   Off-White raus, Karten raus, Schatten raus.
--------------------------------------------------------------------------- */
.knet-hero,
.knet-main .frame-light,
.knet-main .frame-light:has(.kw-trust-cell) { background: var(--kw-weiss); }
.knet-hero {
  border-bottom: 0;
  border-top: 2px solid var(--kw-gruen);
  padding-block: 0 56px;
}

/* ---------------------------------------------------------------------------
   8) Der erste Bildschirm als Positionszeile
   Ein Aufmassblatt fuehrt seine Positionen in drei Spalten: Nummer,
   Bezeichnung, Wert. Genau das ist der Hero. In der Wertspalte, wo sonst der
   Preis steht, steht die Telefonnummer. Das ist der Kern dieser Richtung.
--------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .knet-hero .frame-type-textmedia:has(> header h1) {
    display: grid;
    grid-template-columns: var(--kw-spalte-pos) minmax(0, 1fr) var(--kw-spalte-wert);
    column-gap: 0;
    align-items: start;
    padding-top: 34px;
    max-width: none;
  }
  /* Die Positionsnummer sitzt NEBEN der Ueberschrift, nicht darueber: ein
     Label ueber einer H1 waere ein Eyebrow, und den gibt es in dieser Welt so
     wenig wie in einem echten Formular. */
  .knet-hero .frame-type-textmedia:has(> header h1)::before {
    content: "1";
    grid-column: 1; grid-row: 1;
    font-family: var(--kw-schrift-pos);
    font-size: 13px; font-weight: 600;
    color: var(--kw-text-leise);
    border-top: 2px solid var(--kw-gruen);
    padding-top: var(--kw-linie-abstand-kopf);
    margin-right: 1.5rem;
  }
  .knet-hero .frame-type-textmedia:has(> header h1) > header {
    grid-column: 2; grid-row: 1;
    border-top: 2px solid var(--kw-gruen);
    padding-top: var(--kw-linie-abstand-kopf);
    margin-bottom: 0;
  }
  /* Nur die aeussere Huelle .ce-textpic wird aufgeloest. Der Textblock selbst
     bleibt ein normaler Fluss und damit bleiben die beiden Knoepfe in einer
     Zeile; loeste man ihn ebenfalls auf, wuerde jeder Absatz eine eigene
     Rasterzeile und die Knoepfe stapelten sich (gemessen). */
  .knet-hero .frame-type-textmedia:has(> header h1) > .ce-textpic { display: contents; }
  .knet-hero .frame-type-textmedia:has(> header h1) .ce-bodytext { grid-column: 2; grid-row: 2; }
}

.knet-hero h1 { margin-bottom: 1.4rem; max-width: 19ch; }
.knet-hero .ce-bodytext > p { color: var(--kw-text-leise); max-width: 52ch; }
.knet-hero .ce-bodytext > p:first-of-type {
  font-size: 20px !important;
  line-height: 1.5;
  font-weight: 500;
  color: var(--kw-text) !important;
  max-width: 46ch !important;
  padding-top: 1.1rem;
  border-top: 1px solid var(--kw-linie);
}

/* ---------------------------------------------------------------------------
   9) Die Wertspalte: Rueckfragen
   Steht als eigener Absatz im Bodytext (Klasse kw-rueckfrage), damit die
   Nummer ein echter Link bleibt und ohne JavaScript da ist. Ab 900px rutscht
   sie per display:contents in die dritte Rasterspalte.
--------------------------------------------------------------------------- */
/* Keine Fuellflaeche: ein gefuellter Kasten in einer Welt aus Linien ist ein
   Aufkleber, kein Feld. Die Spalte wird oben und unten von denselben Linien
   gefasst wie die Positionszeile daneben. */
.kw-rueckfrage {
  display: block;
  background: none;
  border-top: 2px solid var(--kw-gruen);
  border-bottom: 1px solid var(--kw-linie);
  padding: .5em 0 1rem;
  margin: 1.8rem 0 0;
  max-width: none !important;
}
.kw-rueckfrage .kw-feldname { display: block; margin-bottom: .5rem; }
.kw-rueckfrage a[href^="tel:"] {
  display: block;
  font-family: var(--kw-schrift-pos);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.06em;
  color: var(--kw-text) !important;
  text-decoration: none;
}
.kw-rueckfrage .kw-notiz {
  display: block;
  margin-top: .7rem;
  font-size: 14px;
  line-height: 1.45;
  color: var(--kw-text-leise);
}
@media (min-width: 900px) {
  /* Die Wertspalte wird aus dem Fluss gehoben und sitzt buendig an der
     Oberkante des Blattes, in derselben Spalte, in der ein Leistungs-
     verzeichnis den Preis fuehrt. */
  .knet-hero .frame-type-textmedia:has(> header h1) { position: relative; }
  /* 34px ist das padding-top des Rasters: damit liegt die gruene Oberkante
     dieser Spalte auf derselben Linie wie die der Ueberschrift daneben, und
     die drei Spalten Pos / Bezeichnung / Wert beginnen gemeinsam. */
  .kw-rueckfrage {
    position: absolute;
    top: 34px; right: 0;
    width: var(--kw-spalte-wert);
    margin: 0;
  }
}

/* ---------------------------------------------------------------------------
   9b) Die Skizze im Kopf der Startseite (Idee Tommy, 2026-08-13)
   Bildschirm mit Browser, daneben Zollstock und Bleistift. Gezeichnet, nicht
   fotografiert: die Seite ist ein Formular, und ein Formular fuehrt
   Zeichnungen. Sie liegt unter der Rueckfragen-Spalte in der rechten Bahn und
   ist dekorativ, steht deshalb als Hintergrund und nicht im Markup.
   Deckkraft 0.7 steckt in der Datei selbst.
   Nur auf der Startseite: dort traegt der Kopf keinen weiteren Inhalt.
--------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .knet-hero .frame-type-textmedia:has(> header h1)::after {
    content: "";
    position: absolute;
    right: -18px;
    /* Unterkante buendig mit den Knoepfen (Tommy, 2026-08-13). Der Rahmen
       endet gemessen genau auf deren Unterkante, beide bei 878px, deshalb
       genuegt bottom:0 und der Wert bleibt richtig, wenn der Text waechst. */
    bottom: 0;
    width: 420px;
    height: 340px;
    background: url('bilder/aufmass-skizze.svg') no-repeat right bottom;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
  }
  /* Der Text bleibt vorn, die Skizze dahinter. Die Rueckfragen-Spalte ist
     bereits absolut gesetzt und bekommt deshalb NUR den z-index: ein
     position:relative hier hat sie aus ihrer Position geworfen und unter die
     Knoepfe fallen lassen (gemessen: Hero von 826 auf 1038px). */
  /* Kein position:relative: header und .ce-textpic sind Rasterelemente und
     nehmen z-index auch ohne. Ein relative auf .ce-textpic hat die absolut
     gesetzte Rueckfragen-Spalte an sich gebunden statt an den Rahmen und sie
     mitten in die Skizze geschoben (gemessen). */
  .knet-hero .frame-type-textmedia:has(> header h1) > header,
  .knet-hero .frame-type-textmedia:has(> header h1) > .ce-textpic { z-index: 1; }
  .knet-hero .kw-rueckfrage { z-index: 1; }
}
/* Unter 1100px ist die rechte Bahn zu schmal; die Skizze entfaellt, statt zu
   schrumpfen oder den Text zu unterlaufen. */

/* ---------------------------------------------------------------------------
   10) Knoepfe als Formularfelder
   Kein Pillenradius, kein Verlauf, kein Pfeil. Die Hauptaktion ist eine
   Hellgruen-Flaeche mit dunkler Schrift (8,48:1) und tragender gruener
   Unterkante; die Nebenaktion ist ein leeres Feld mit feiner Linie.
--------------------------------------------------------------------------- */
.knet-hero .btn, .knet-main .btn, .frame-primary .btn, .knet-header .btn {
  border-radius: 0;
  font-family: var(--kw-schrift);
  font-weight: 600;
  letter-spacing: -.01em;
}
.btn-primary,
.knet-main .frame-type-form_formframework .btn-primary,
.knet-footer .frame-primary .btn.btn-primary {
  --bs-btn-color: var(--kw-text);
  --bs-btn-bg: var(--kw-hellgruen);
  --bs-btn-border-color: var(--kw-hellgruen);
  --bs-btn-hover-color: var(--kw-text);
  --bs-btn-hover-bg: #9ed002;
  --bs-btn-hover-border-color: #9ed002;
  --bs-btn-active-color: var(--kw-text);
  --bs-btn-active-bg: #9ed002;
  --bs-btn-active-border-color: #9ed002;
  --bs-btn-disabled-color: var(--kw-text);
  --bs-btn-disabled-bg: var(--kw-hellgruen);
  color: var(--kw-text) !important;
  border-radius: 0 !important;
  border-bottom: 3px solid var(--kw-gruen) !important;
  padding: 13px 22px;
}
.btn-outline-primary, .btn-outline-secondary {
  --bs-btn-color: var(--kw-text);
  --bs-btn-border-color: var(--kw-linie);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--kw-text);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--kw-gruen);
  --bs-btn-active-color: var(--kw-text);
  --bs-btn-active-border-color: var(--kw-gruen);
  border-width: 1px;
  border-radius: 0 !important;
  border-bottom: 3px solid var(--kw-linie) !important;
  padding: 13px 22px;
}
.btn-outline-primary:hover { border-bottom-color: var(--kw-gruen) !important; }
.btn.kw-arrow::after { content: none !important; }

/* ---------------------------------------------------------------------------
   11) Kopfleiste — weisser Grund, feine Linie statt Schatten
--------------------------------------------------------------------------- */
.knet-header { background: var(--kw-weiss); border-bottom: 1px solid var(--kw-linie); }
.knet-header.kw-scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: none;
  border-bottom: 1px solid var(--kw-linie);
}
.knet-header .nav-link { font-weight: 500; }
.knet-header .nav-link::after { background: var(--kw-gruen); height: 3px; bottom: .45rem; }
.knet-header-phone { font-size: 13px; color: var(--kw-text); }
.knet-header-cta.btn.btn-primary { font-size: 14px; padding: 10px 18px; }
/* Der pulsierende Statuspunkt ist Dekoration, die Aufmerksamkeit zieht, ohne
   etwas zu melden. In einem Formular hat das nichts zu suchen, und der
   Detector meldet ihn seit der Critique dreimal als Fehler. */
.knet-status-dot { display: none !important; }

/* ---------------------------------------------------------------------------
   11b) Kopfleiste des Blattes
   Die obere Seitenhaelfte stand komplett auf Weiss, der Kopf hatte kein
   Gewicht (Befund Tommy). Ein Aufmassblatt fuehrt dort seine Felder: wer
   ausfuehrt, wo, und unter welcher Nummer Rueckfragen laufen. Das Band
   loest damit beides, den fehlenden Kontrast und die fehlende Struktur, und
   es traegt Inhalt statt Dekoration.
--------------------------------------------------------------------------- */
.knet-blattkopf {
  background: var(--kw-text);
  color: #fff;
  border-bottom: 2px solid var(--kw-gruen);
}
.knet-blattkopf-inner {
  max-width: 1240px;
  margin-inline: auto;
  padding: 9px clamp(20px, 5vw, 40px) 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(24px, 4vw, 56px);
  align-items: baseline;
}
.knet-blattkopf-feld {
  font-family: var(--kw-schrift-pos);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.03em;
  color: #fff;
}
.knet-blattkopf-label {
  display: inline-block;
  margin-right: .55em;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .6);
}
.knet-blattkopf-rechts { margin-left: auto; }
.knet-blattkopf a { color: #fff !important; text-decoration: none; }
.knet-blattkopf a:hover,
.knet-blattkopf a:focus { color: var(--kw-hellgruen) !important; }
/* Auf schmalen Geraeten reichen zwei Felder; das dritte erzwaenge nur einen
   Zeilenumbruch. */
@media (max-width: 767.98px) {
  .knet-blattkopf-rechts { display: none; }
  .knet-blattkopf-inner { gap: 3px 20px; }
  .knet-blattkopf-feld { font-size: 11px; }
}
/* Die Hero-Oberkante war die tragende Linie; die liefert jetzt das Band. */
.knet-hero { border-top: 0; }

/* ---------------------------------------------------------------------------
   12) Trust-Streifen als Fussleiste des Blattes
--------------------------------------------------------------------------- */
.knet-main .frame-light:has(.kw-trust-cell) {
  border-block: 1px solid var(--kw-linie) !important;
  padding-block: 20px !important;
}
.kw-trust-num {
  font-family: var(--kw-schrift-pos);
  font-size: 21px; font-weight: 600;
  color: var(--kw-text);
}
.kw-trust-num.kw-trust-accent { color: var(--kw-text); }
.kw-trust-label { font-size: 13px; color: var(--kw-text-leise); }
.knet-textcolumns:has(.kw-trust-cell) > [class*="col-"] + [class*="col-"]::before {
  background: var(--kw-linie); height: 26px;
}
/* Genau eine Markierung je Bildschirm. Der eine Ansprechpartner ist das, was
   diese Site von jeder Agentur unterscheidet, also bekommt er den Stempel. */
.knet-textcolumns:has(.kw-trust-cell) > [class*="col-"]:last-child .kw-trust-num {
  background: var(--kw-orange);
  padding: 1px 9px 2px;
}

/* ---------------------------------------------------------------------------
   13) Die Sektionen sind Positionen
   Jeder Abschnitt mit Ueberschrift bekommt seine Nummer in der linken
   Randspalte und eine tragende Linie darueber. Der Zaehler laeuft automatisch
   und startet bei 2, weil der Kopf Position 1 ist. Abschnitte ohne
   Ueberschrift (Trust-Streifen) zaehlen nicht mit.
--------------------------------------------------------------------------- */
/* Zwischen .container und den Rahmen liegt auf den meisten Seiten noch
   .knet-content-col. Beide Wege muessen im Selektor stehen, sonst greift die
   Regel genau dort nicht, wo der Inhalt steht (gemessen: null Treffer). */
.knet-main > .container { counter-reset: kwpos 1; }

/* :not(:has(> header h1)) ist entscheidend: TYPO3 rendert eine Unterueberschrift
   als h2 im selben header. Ein H1-Element mit Unterzeile (der Bild-Auftakt auf
   /ueber-mich) sah fuer die Regel deshalb aus wie eine Position und bekam das
   Zwei-Spalten-Raster. Gemessen: der Fliesstext landete in der 72px schmalen
   Nummernspalte, das Foto lag ueber der Ueberschrift. */
@media (min-width: 900px) {
  .knet-main > .container > .frame:has(> header h2):not(:has(> header h1)),
  .knet-main > .container > .knet-content-col > .frame:has(> header h2):not(:has(> header h1)) {
    display: grid;
    grid-template-columns: var(--kw-spalte-pos) minmax(0, 1fr);
    column-gap: 0;
    border-top: 2px solid var(--kw-gruen);
    padding-top: var(--kw-linie-abstand);
    margin-top: 3.6rem !important;
  }
  .knet-main > .container > .frame:has(> header h2):not(:has(> header h1))::before,
  .knet-main > .container > .knet-content-col > .frame:has(> header h2):not(:has(> header h1))::before {
    counter-increment: kwpos;
    content: counter(kwpos);
    grid-column: 1; grid-row: 1;
    font-family: var(--kw-schrift-pos);
    font-size: 13px; font-weight: 600;
    color: var(--kw-text-leise);
    /* Eigene Linie ueber der Nummer, wie im Kopf: die Spalte gehoert zum
       Formular, sie steht nicht daneben. Beide Zellen liegen in Rasterzeile 1,
       ihre Oberkanten fallen dadurch von selbst zusammen. */
    border-top: 2px solid var(--kw-gruen);
    padding-top: var(--kw-linie-abstand);
    margin-right: 1.5rem;
  }
  .knet-main > .container > .frame:has(> header h2):not(:has(> header h1)) > *,
  .knet-main > .container > .knet-content-col > .frame:has(> header h2):not(:has(> header h1)) > * { grid-column: 2; }
  .knet-main > .container > .frame:has(> header h2):not(:has(> header h1)) > header,
  .knet-main > .container > .knet-content-col > .frame:has(> header h2):not(:has(> header h1)) > header { grid-row: 1; }
}

/* Die alte Welt setzte vor jede H2 einen 30x2px-Balken als Eyebrow-Ersatz.
   Die tragende Linie der Position leistet das jetzt; der Balken faellt weg. */
.knet-main .frame > header::before { content: none !important; }

/* ---------------------------------------------------------------------------
   14) Leistungen: Zeilen statt Icon-Kacheln
   Sechs gleich aussehende Kacheln mit nichtssagenden Icons (Raute fuer
   Webdesign, Stern fuer Meta Ads) waren der zwoelffach gemeldete Befund der
   Critique. In einem Formular gibt es keine Icons, es gibt Zeilen mit Nummern.
--------------------------------------------------------------------------- */
.knet-icongroup { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.knet-icongroup .col {
  background: none;
  border: 0;
  border-top: 1px solid var(--kw-linie);
  border-radius: 0;
  padding: 20px 26px 22px 0;
  transition: background-color .18s ease;
}
.knet-icongroup .col:hover {
  background: var(--kw-feld);
  border-color: var(--kw-linie);
  transform: none;
  box-shadow: none;
}
.knet-icongroup .knet-icon-accent { display: none !important; }
.knet-icongroup h3 { font-size: 19px; font-weight: 700; margin-bottom: .4rem; }
.knet-icongroup p, .knet-icongroup p p { font-size: 15.5px; color: var(--kw-text-leise); }
.knet-icongroup .stretched-link {
  font-family: var(--kw-schrift);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kw-text) !important;
  border-bottom: 2px solid var(--kw-gruen);
  padding-bottom: 1px;
  /* Alle „Mehr erfahren" einer Reihe auf einer Hoehe: die Zelle ist eine
     Flex-Spalte, der Verweis wird ans untere Ende geschoben. Unterschiedlich
     lange Texte verschieben ihn sonst zeilenweise gegeneinander. */
  margin-top: auto;
  padding-top: 1.2rem;
  align-self: flex-start;
}
/* Bewusst KEINE eigenen Hoehenregeln: die Zeile streckt ihre Spalten von
   selbst, und .col ist drueben schon eine Flex-Spalte. Ein zusaetzliches
   display:flex mit height:100% hat die Zellen auf das Dreifache aufgeblasen
   und die dritte Kachel in die naechste Zeile gedraengt (gemessen auf
   /leistungen: 1048px fuer sechs Kacheln). margin-top:auto oben genuegt. */

/* Dasselbe fuer Karten: der Fuss mit dem Knopf sitzt unten, nicht direkt
   hinter dem Text. */
.knet-cards .card { display: flex; flex-direction: column; }
.knet-cards .card-body { flex: 1 1 auto; }
.knet-cards .card-footer { margin-top: auto; }

/* ---------------------------------------------------------------------------
   15) Referenzen: eine Positionsliste, keine elf Kaesten
   Die elf Kacheln waren der lauteste Block der Startseite. Als Liste sind sie
   das, was sie inhaltlich sind: elf ausgefuehrte Positionen mit Ort.
--------------------------------------------------------------------------- */
.knet-textteaser { --bs-gutter-x: 0; --bs-gutter-y: 0; }
/* Eine Position je Zeile. Dreispaltig quetschte das Raster die Namen in zwei
   Zeilen ("Wartner / Holzbau"), was in einer Positionsliste falsch aussieht
   und beim Ueberfliegen bremst. */
.knet-textteaser > [class*="col"] { flex: 0 0 100%; max-width: 100%; width: 100%; }
.knet-textteaser .knet-teaser-box {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--kw-linie) !important;
  border-radius: 0;
  padding: 13px 24px 14px 0 !important;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.knet-textteaser .knet-teaser-box:hover { transform: none; box-shadow: none; background: var(--kw-feld) !important; }
.knet-textteaser .knet-teaser-box h3 { font-size: 16px; font-weight: 700; margin: 0; flex: 1 1 auto; }
.knet-textteaser .knet-teaser-box p,
.knet-textteaser .knet-teaser-box p p {
  font-family: var(--kw-schrift-pos);
  font-size: 11.5px;
  letter-spacing: -.03em;
  color: var(--kw-text-leise);
  margin: 0;
  text-align: right;
}

/* ---------------------------------------------------------------------------
   16) Karten: dasselbe in Zeilenform
--------------------------------------------------------------------------- */
.knet-cards { --bs-gutter-x: 24px; --bs-gutter-y: 24px; }
.knet-cards .card {
  background: none;
  border: 0;
  border-top: 2px solid var(--kw-gruen);
  border-radius: 0;
  box-shadow: none !important;
}
.knet-cards .card:hover { transform: none; box-shadow: none !important; border-color: var(--kw-gruen); }
.knet-cards .card-body { padding: 16px 0 18px; }
.knet-cards .card-footer { padding: 0 0 4px; background: none; }
.knet-cards .card-title, .knet-cards h3.card-title { font-size: 19px; font-weight: 700; }
.knet-cards .card-text, .knet-cards .card-text p { font-size: 15.5px; color: var(--kw-text-leise); }

/* ---------------------------------------------------------------------------
   17) Das dunkle Band als Durchschlag
   Ein Aufmassblatt hat einen Durchschlag: dieselbe Sache, andere Farbe.
   Deshalb bleibt das Band dunkel, verliert aber Radius und Weichzeichnung.
--------------------------------------------------------------------------- */
.knet-main .frame-dark {
  background: var(--kw-text);
  border-radius: 0;
  border-top: 2px solid var(--kw-hellgruen);
}
.frame-dark, .frame-dark p { color: #fff; }
.frame-dark h2, .frame-dark h3 { color: #fff; }
/* Aufzaehlungen im Durchschlag standen auf dem Fliesstextgrau der hellen Welt:
   #5C5F59 auf #333 sind 1,95:1, gemessen auf /kontakt und
   /handwerker-website-straubing. Die Regel drueben traegt drei Klassen, diese
   muss sie erreichen und steht spaeter. */
.knet-main .frame-dark.frame-type-text ul > li,
.knet-main .frame-dark.frame-type-textmedia ul > li,
.knet-main .frame-dark .card-text ul > li { color: #fff; }
.frame-dark a:not(.btn) { color: var(--kw-hellgruen); }
.frame-dark ul > li::before { background: var(--kw-hellgruen); }
@media (min-width: 900px) {
  .knet-main > .container > .frame-dark:has(> header h2),
  .knet-main > .container > .knet-content-col > .frame-dark:has(> header h2) { border-top-color: var(--kw-hellgruen); }
  .knet-main > .container > .frame-dark:has(> header h2)::before,
  .knet-main > .container > .knet-content-col > .frame-dark:has(> header h2)::before { color: rgba(255, 255, 255, .62); }
}

/* ---------------------------------------------------------------------------
   18) Das Handlungsband
   Weisse Schrift auf dem Hauptgruen sind 3,31:1 und nach der Markenregel
   verboten. Das Band wird deshalb eine Hellgruen-Flaeche mit dunkler Schrift
   (8,48:1) — dieselbe Flaeche wie der Hauptknopf, nur ganzseitig.
--------------------------------------------------------------------------- */
/* Ganzseitig war das Hellgruen blendend (Tommy, 2026-08-13). Die Farbe behaelt
   ihre Rolle als Flaeche, die Text traegt, aber auf Knopfgroesse: das Band wird
   die Schlussposition des Blattes, gefasst von zwei tragenden Linien. Damit
   bleibt es bei genau einer Limettenflaeche je Bildschirm, und die sitzt dort,
   wo gehandelt wird. */
.knet-main .frame-primary,
.knet-footer-cta .frame-primary {
  background: var(--kw-weiss);
  border-radius: 0;
  border-top: 2px solid var(--kw-gruen);
  border-bottom: 2px solid var(--kw-gruen);
  padding: 38px 0 40px;
  color: var(--kw-text);
}
.knet-footer-cta { background: var(--kw-weiss); padding-block: 0; }
.frame-primary h2, .frame-primary p,
.knet-footer-cta .frame-primary p, .knet-footer .frame-primary p { color: var(--kw-text) !important; }
.frame-primary a:not(.btn),
.knet-footer-cta .frame-primary a:not(.btn) { color: var(--kw-text) !important; }
/* Der Knopf im Schlussband ist die eine Limettenflaeche dieses Bildschirms. */
.frame-primary .btn.btn-primary,
.knet-footer-cta .frame-primary .btn.btn-primary,
.knet-footer .frame-primary .btn.btn-primary {
  --bs-btn-bg: var(--kw-hellgruen);
  --bs-btn-border-color: var(--kw-hellgruen);
  --bs-btn-color: var(--kw-text);
  --bs-btn-hover-bg: #9ed002;
  --bs-btn-hover-border-color: #9ed002;
  --bs-btn-hover-color: var(--kw-text);
  --bs-btn-active-bg: #9ed002;
  --bs-btn-active-color: var(--kw-text);
  color: var(--kw-text) !important;
  border-bottom: 3px solid var(--kw-gruen) !important;
}
/* Der Deko-Kreis war eine weiche Form in einer Welt aus Linien. */
.frame-primary::after { content: none !important; }

/* ---------------------------------------------------------------------------
   18b) „Wie ich arbeite": zwei Raster uebereinander
   Die alte Welt machte aus diesem Band ein Zwei-Spalten-Raster und zog die
   Prinzipienliste per grid-row:1/span 99 in die erste Zeile. Zusammen mit dem
   Positionsraster landete sie damit in derselben Zelle wie die Ueberschrift und
   lag sichtbar darueber. Die Liste laeuft jetzt wieder in der Reihenfolge des
   Markups: Ueberschrift, Einleitung, Punkte.
--------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .knet-main .frame-dark:has(.kw-principles) > .kw-principles {
    grid-row: auto;
    margin-top: 1.6rem;
  }
}
/* Die Nummern sind Positionen, also laufen sie in der Positionsschrift. */
.frame-dark .kw-principle-num {
  font-family: var(--kw-schrift-pos);
  font-size: 12px;
  letter-spacing: -.03em;
  color: var(--kw-hellgruen);
}
.frame-dark .kw-principle { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 14px; }
.frame-dark .kw-principle-body p { color: rgba(255, 255, 255, .8); }
/* Die Einleitung stand auf 420px, die Punkte darunter auf gut 820px: zwei
   Satzbreiten in einem Block. Beide laufen jetzt auf demselben Mass. */
.frame-dark .kw-arbeit-intro p { color: rgba(255, 255, 255, .8); max-width: 62ch; }

/* ---------------------------------------------------------------------------
   19) Bilder
   Ein Foto in einem Formular ist ein Beleg, kein Schmuckstueck: es bekommt
   eine Linie, keinen Schlagschatten und keine runden Ecken. Gemessen auf
   /ueber-mich als letzter verbliebener Schatten im Inhaltsbereich.
--------------------------------------------------------------------------- */
/* Das Foto spannt ueber beide Rasterzeilen und ist hoeher als Ueberschrift
   plus Text. Der Ueberschuss wurde auf die Zeilen verteilt und riss eine
   Luecke von rund 100px zwischen Ueberschrift und erstem Absatz. Mit
   inhaltsgrossen Zeilen bleibt der Text an der Ueberschrift. */
/* Bild-Auftakt (/ueber-mich): Raster raus, Float rein.
   Das Zwei-Spalten-Raster der alten Welt liess das Foto ueber beide Zeilen
   spannen. Sein Ueberschuss wurde auf die Zeilen verteilt und blies Zeile 1
   von 132 auf 238px auf: zwischen Ueberschrift und erstem Absatz klaffte eine
   Luecke von 125px, gemessen. Weder min-content noch feste Zeilen haben das
   aufgeloest, weil ein zeilenuebergreifendes Element seinen Bedarf immer auf
   die ueberspannten Spuren verteilt.
   Ein Float ist hier das richtige Werkzeug: die Ueberschrift laeuft ueber die
   volle Breite, der Text fliesst am Bild entlang und beginnt direkt darunter. */
@media (min-width: 900px) {
  .knet-content-col .frame-type-textmedia:has(> header h1) {
    display: block;
    max-width: none;
  }
  /* Das Markup gibt die Loesung selbst her: header und .ce-textpic sind
     Geschwister, und .ce-textpic enthaelt Bild und Text. Also Ueberschrift
     ueber die volle Breite, darunter ein Zweispalter aus beiden. Kein Element
     spannt mehr ueber Zeilen, damit kann sich auch nichts aufblaehen. */
  .knet-content-col .frame-type-textmedia:has(> header h1) > header { margin-bottom: 1.6rem; }
  .knet-content-col .frame-type-textmedia:has(> header h1) > .ce-textpic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38%;
    column-gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
  .knet-content-col .frame-type-textmedia:has(> header h1) > .ce-textpic > .ce-bodytext { grid-column: 1; grid-row: 1; }
  .knet-content-col .frame-type-textmedia:has(> header h1) > .ce-textpic > .ce-gallery { grid-column: 2; grid-row: 1; }
}

.knet-main .frame-type-textmedia:has(> header h1) .ce-gallery img,
.knet-main .ce-gallery img,
.knet-main figure.image img {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  border-top: 2px solid var(--kw-gruen) !important;
}
.knet-main figcaption,
.knet-main .ce-gallery figcaption {
  font-family: var(--kw-schrift-pos);
  font-size: 11.5px;
  letter-spacing: -.03em;
  color: var(--kw-text-leise);
  padding-top: .5rem;
}
/* Der Badge „seit 2004" hing als weisses Kaestchen mit Schatten am Bild. */
.knet-main .frame-type-textmedia:has(> header h1) .ce-gallery::after { content: none !important; }

/* ---------------------------------------------------------------------------
   20) Preiskarten
   Die Fassung von heute Vormittag arbeitete mit --kw-green-dark (#5F7F00),
   einem abgeleiteten Ton, den die Markenregel ausschliesst. Knopf und Fahne
   ziehen deshalb auf die fuenf Farben um: der Knopf ist dieselbe
   Limettenflaeche wie ueberall, die Empfehlung wird zum orangen Stempel.
   Auf dieser Seite gibt es keinen Trust-Streifen, die eine Markierung je
   Bildschirm ist also frei.
--------------------------------------------------------------------------- */
#c83 .card-footer .btn {
  --bs-btn-bg: var(--kw-hellgruen) !important;
  --bs-btn-border-color: var(--kw-hellgruen) !important;
  --bs-btn-color: var(--kw-text) !important;
  --bs-btn-hover-bg: #9ed002 !important;
  --bs-btn-hover-border-color: #9ed002 !important;
  --bs-btn-hover-color: var(--kw-text) !important;
  color: var(--kw-text) !important;
  border-radius: 0 !important;
  border-bottom: 3px solid var(--kw-gruen) !important;
}
#c83 .col:nth-child(2) .card {
  border-color: var(--kw-gruen);
  border-top-width: 2px;
  box-shadow: none !important;
}
.knet-card-flag {
  background: var(--kw-orange);
  color: var(--kw-text);
  font-family: var(--kw-schrift-pos);
  letter-spacing: -.01em;
  border-radius: 0;
  transform: none;
  top: -13px;
  left: 0;
  padding: 3px 9px 4px;
}
#c83 .knet-price-amount { font-family: var(--kw-schrift); font-weight: 700; }
#c83 .knet-price-unit { font-family: var(--kw-schrift-pos); letter-spacing: -.03em; }

/* ---------------------------------------------------------------------------
   21) Sichtbarkeitspakete (#c11) und der Wartungssockel
   Dieselbe Behandlung wie die Wartungspakete. Dazu die Sockelzeile: sie sagt,
   welche Wartungsstufe im Paket steckt. Sie steht als erstes im Kartentext,
   weil ein Fundament unten liegt und zuerst gebaut wird.
--------------------------------------------------------------------------- */
#c11 .card-footer .btn,
#c13 .card-footer .btn {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  --bs-btn-bg: var(--kw-hellgruen) !important;
  --bs-btn-border-color: var(--kw-hellgruen) !important;
  --bs-btn-color: var(--kw-text) !important;
  --bs-btn-hover-bg: #9ed002 !important;
  --bs-btn-hover-border-color: #9ed002 !important;
  color: var(--kw-text) !important;
  border-radius: 0 !important;
  border-bottom: 3px solid var(--kw-gruen) !important;
}
#c11 .card-subtitle {
  font-family: var(--kw-schrift) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--kw-text) !important;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: 1.1rem !important;
}
/* effects.js teilt die Preiszeile in Betrag und Einheit, wie bei den
   Wartungspaketen (#c83): "ab 249 €" bleibt die groesste Zahl der Karte,
   "/ Monat (zzgl. USt)" steht klein darunter. Ohne JavaScript bleibt die
   Zeile ungeteilt in 32px stehen, der USt-Zusatz ist dann Teil der Zahl. */
#c11 .knet-price-amount { display: block; font-family: var(--kw-schrift); font-weight: 700; }
#c11 .knet-price-unit {
  display: block;
  margin-top: .25rem;
  font-family: var(--kw-schrift-pos);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: -.03em;
}
#c11 .knet-price-unit,
#c83 .knet-price-unit { color: var(--kw-text-leise); }
/* Die Sockelzeile ist ein markiertes Feld, kein Fliesstext: sie beantwortet
   die Frage, die sonst offen bliebe, naemlich ob die Technik mitlaeuft. */
.kw-sockel {
  background: var(--kw-feld);
  /* Oberlinie, kein farbiger Linksrand: den verbietet der Qualitaetsboden
     ausdruecklich fuer Hinweisfelder, und er waere in dieser Welt auch das
     falsche Mittel. */
  border-top: 2px solid var(--kw-gruen);
  padding: 10px 12px 11px;
  margin-bottom: 1rem !important;
  font-size: 14px !important;
  line-height: 1.45;
  color: var(--kw-text) !important;
}
.kw-sockel strong { font-weight: 700; }