/* The only CSS in this project that is not a byte-for-byte copy of Webflow's
 * published output. Everything here exists to keep a semantic fix from becoming
 * a visual one. Loaded last, after the per-page stylesheet.
 */

/* Nine of the eleven pages had no <h1> at all — Webflow started them at <h2>.
 * The first heading on each page is now an <h1>, keeping its .heading-2 class.
 * Webflow styles h1 at 4rem and h2 at 2rem, so without these three rules the
 * promoted heading would double in size. They restate exactly what <h2> gets at
 * each of Webflow's breakpoints:
 *
 *   base            h1 4rem   / h2 2rem
 *   max-width:991px h1 3.5rem / h2 2rem   (h2 has no rule at this breakpoint)
 *   max-width:479px h1 3.5rem / .heading-2 1.5rem
 *
 * h1 also sets line-height:1.35 where h2 sets none, hence the inherit.
 */
h1.heading-2 {
  font-size: 2rem;
  line-height: inherit;
}

@media screen and (max-width: 991px) {
  h1.heading-2 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 479px) {
  h1.heading-2 {
    font-size: 1.5rem;
  }
}

/* Turnstile runs with appearance="interaction-only": the widget stays invisible
 * unless Cloudflare decides a human actually has to solve something. The form is
 * a flex column with a 1rem gap, so an empty container would still cost a gap.
 * Collapse it while it has no iframe to show.
 */
.cf-turnstile:empty {
  display: none;
}

/* Nachweise auf /team. Ein Label-Wert-Register unter der Biografie, nach dem
 * Muster der Accenture-Board-Profile: erst der Fliesstext, dann knapp und
 * ungeschmueckt, was die Person mitbringt.
 *
 * Die Limettenlinie oben ist dieselbe Geste wie .div-block-78 unter der
 * Ueberschrift — sie trennt die Nachweise vom Text, ohne einen Kasten zu
 * bauen. Werte stehen in Weiss, Labels im Grau der Fusszeile: die Zeile soll
 * am Wert entlang gelesen werden, nicht am Label.
 */
.credentials {
  border-top: 1px solid #ecfd6f;
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-self: stretch;
  max-width: 100%;
}

/* minmax(0,1fr), nicht 1fr: ein Grid-Element hat min-width:auto, und
 * "CISSP — Certified Information Systems Security Professional (ISC2)" ist
 * laenger als die Spalte auf dem Telefon. Mit 1fr waechst die Spur ueber den
 * Container hinaus und schiebt die ganze Seite seitlich weg — auf dem
 * Telefon standen dann Woerter rechts ausserhalb des Bildschirms.
 */
.credential {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
}

.credential-label {
  color: #a7a7a7;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.credential-value {
  color: #ffffff;
}

/* Der Verweis aufs Profil ist der einzige anklickbare Wert im Register. Er
 * traegt den Akzent, damit man ihn als Link erkennt, ohne dass eine blaue
 * unterstrichene Zeile die Reihe aufbricht. Webflow setzt a{color:#000} —
 * ohne diese Regel waere der Link auf Anthrazit praktisch unsichtbar.
 */
.credential-link {
  color: #ecfd6f;
  text-decoration: none;
  border-bottom: 1px solid #4a4a4a;
  padding-bottom: 1px;
}

.credential-link:hover {
  border-bottom-color: #ecfd6f;
}

/* Zweispaltig braucht Breite. Ab hier steht das Label ueber seinem Wert. */
@media screen and (max-width: 767px) {
  .credential {
    grid-template-columns: 1fr;
    gap: 0.125rem;
  }
}

/* Das Ergebnis je Leistung auf /services.
 *
 * Dieselbe Geste wie das Nachweisregister auf /team: Label in Grau, Wert in
 * Weiss. Die Beschreibung sagt, was getan wird; erst diese Zeile sagt, was der
 * Kunde bekommt, und vorher stand das nirgends auf der Seite.
 *
 * Das Register sitzt am Fuss seiner Zelle, nicht direkt unter dem Text.
 * .div-block-73 ist ein zweispaltiges Grid, die Zellen einer Reihe sind also
 * ohnehin gleich hoch; flex:1 auf dem Textblock nimmt die Resthoehe,
 * margin-top:auto schiebt das Register nach unten. Damit steht unten eine
 * gemeinsame Kante, an der das Auge die Reihe abliest.
 *
 * Die Haarlinie sitzt am FUSS der Zelle, nicht ueber dem Register. Das ist der
 * einzige Ort, an dem sie links und rechts zwangslaeufig auf gleicher Hoehe
 * liegt: die beiden Zellen einer Reihe sind Grid-Elemente und damit ohnehin
 * gleich hoch. Ueber dem Register lag sie zuerst, dort richtet sie sich nach
 * der Laenge der Ergebniszeile — und die bricht je nach Breite auf ein, zwei
 * oder drei Zeilen um (gemessen: bei 1000px vier verschiedene Registerhoehen
 * von 64 bis 127 px). Zwei Haarlinien nebeneinander auf verschiedener Hoehe
 * liest man als Satzfehler.
 *
 * Eine feste min-height auf dem Register waere die andere Loesung gewesen, sie
 * muesste aber die laengste Ergebniszeile fassen und risse unter den kurzen ein
 * Loch von zwei Zeilen auf. Subgrid waere formal richtig, damit sich beide
 * Zellen dieselben Zeilenspuren teilen; in dieser Webflow-Struktur liegt der
 * Text aber in einem eigenen Flex-Container mit eigenem gap, und das
 * Verschachteln hat die Zeilen uebereinandergeschoben.
 *
 * minmax(0,1fr) aus demselben Grund wie oben: eine lange Ergebniszeile in einem
 * Grid-Element mit min-width:auto zieht die Spur sonst ueber den Container.
 */
.div-block-73 > .in-detail-section {
  border-bottom: 1px solid #4a4a4a;
  /* 0,4rem ist die Untergrenze, nicht der Geschmack: bei der laengsten
     Ergebniszeile geht die Reserve aus --svc-meta-h auf null, dort ist dieses
     Polster der einzige Abstand zwischen Text und Linie. */
  padding-bottom: 0.4rem;
}

/* Unter der letzten Reihe keine Linie. Sie trennt dort nichts mehr, sondern
 * zieht eine zweite Kante kurz ueber die Kante der Karte selbst.
 *
 * Die letzte Reihe sind bei gerader Anzahl die beiden letzten Zellen, bei
 * ungerader nur die letzte. Genau das leistet die zweite Bedingung: die
 * vorletzte Zelle steht bei gerader Gesamtzahl auf einer ungeraden Position.
 * Servicefeld 2 hat fuenf Leistungen, ist also der Fall, der eine Regel mit
 * :nth-last-child(-n+2) still falsch machen wuerde. */
.div-block-73 > .in-detail-section:last-child,
.div-block-73 > .in-detail-section:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}

/* flex:1 laesst den Textblock die Resthoehe der Zelle nehmen, display:flex
 * macht ihn selbst zum Spaltencontainer. Beides ist noetig: .focus-text ist bei
 * Webflow ein Block, und in einem Block ist margin-top:auto null. Ohne diese
 * Zeile sass das Register weiter direkt unter dem Text, nur unbemerkt, weil die
 * Trennlinie an der Zelle haengt und deshalb trotzdem ausgerichtet war. */
.in-detail-section > .focus-text.in-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.focus-text.in-detail > p:last-of-type {
  margin-bottom: 1rem;
}

.svc-meta {
  display: grid;
  /* auto statt 7rem: die Beschriftung ist immer dasselbe Wort, eine feste Spur
     liess rechts daneben eine Luecke stehen. Die gewonnene Breite kommt der
     Wertspalte zugute und spart je nach Fensterbreite eine Umbruchzeile. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 1.1rem;
  margin-top: auto;
  min-height: var(--svc-meta-h, 0);
  font-size: 0.9375rem;
}

/* --svc-meta-h ist die Hoehe des laengsten Registers bei dieser Fensterbreite.
 *
 * Bodenbuendig allein richtet nur die UNTERkante aus. Damit auch die Zeile
 * ERGEBNIS links und rechts auf gleicher Hoehe beginnt, muessen alle Register
 * gleich hoch sein — und weil sie es von sich aus nicht sind, bekommen sie eine
 * Mindesthoehe. Zusammen mit gleich hohen Grid-Zellen und margin-top:auto sitzt
 * die Oberkante dann zwangslaeufig bei Zellenunterkante minus Mindesthoehe,
 * also ueberall gleich.
 *
 * Die Werte sind gemessen, nicht geschaetzt (07.08.2026, alle 17 Leistungen,
 * deutsche UND englische Seite, Fensterbreiten von 992 bis 1920 px). Die
 * Ergebniszeile bricht je nach Breite auf drei bis fuenf Zeilen um, und weil
 * die Seite eine fluide Grundschrift hat, ist die Hoehe in rem konstant:
 * 1 Zeile = 1,406rem. Massgeblich ist die jeweils hoehere der beiden Sprachen.
 *
 *   ab 1400px   3 Zeilen   4,22rem gemessen
 *   1100–1399   4 Zeilen   5,63rem
 *    992–1099   5 Zeilen   7,03rem
 *
 * Aufgerundet, denn die Abweichung ist einseitig gefaehrlich: zu gross kostet
 * eine Leerzeile unter den kurzen Registern, zu klein bricht die Ausrichtung
 * genau dort, wo sie gebraucht wird. Aus demselben Grund bleibt es oberhalb von
 * 1400px bei drei Zeilen, obwohl bei 1920px zwei genuegen wuerden.
 *
 * WER EINE ERGEBNISZEILE VERLAENGERT, MISST NACH. Unter 992px steht die Seite
 * einspaltig, dort gibt es nichts auszurichten.
 */
@media screen and (min-width: 992px) {
  .in-detail-section { --svc-meta-h: 7.05rem; }
}
@media screen and (min-width: 1100px) {
  .in-detail-section { --svc-meta-h: 5.65rem; }
}
@media screen and (min-width: 1400px) {
  .in-detail-section { --svc-meta-h: 4.25rem; }
}

.svc-meta dt {
  color: #a7a7a7;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.svc-meta dd {
  color: #ffffff;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .svc-meta {
    grid-template-columns: 1fr;
    gap: 0.125rem;
  }
  .svc-meta dt {
    margin-top: 0.5rem;
  }
}

/* Das Portraet endete vorher ungefaehr dort, wo auch der Text endete — die
 * Zeile sah gesetzt aus. Die Nachweise haben die Textspalte laenger gemacht,
 * und weil .w-layout-hflex auf align-items:flex-start steht, blieb das Bild
 * oben haengen und darunter stand ein Loch.
 *
 * Das Bild bekommt daher ein festes Hochformat und sitzt mittig in der Zeile.
 *
 * Warum 4:5 und nicht die volle Zeilenhoehe: die Quelle ist 1629x1365, also
 * querformatig (1,19). object-fit:cover skaliert immer auf die knappere Achse,
 * und ein Rahmen von 0,65 zeigte nur noch 54 % der Bildbreite — daher der
 * starke Zoom. Bei 4:5 (0,8) sind es 67 %, das Bild bleibt hochformatig und
 * der Ausschnitt ist deutlich ruhiger. Weiter aufmachen laesst sich das nur
 * mit einer hochformatigen Aufnahme, nicht per CSS.
 *
 * Nur ab 992px. Darunter kippt die Zeile in eine Spalte (column-reverse),
 * wo das Bild ohnehin volle Breite hat.
 */
@media screen and (min-width: 992px) {
  .grid-block > picture {
    align-self: center;
    display: flex;
  }

  .grid-block > picture > .image-10 {
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
    object-position: 50% 18%;
  }
}

/* Das NIS2-Band unter dem Hero der beiden Startseiten.
 *
 * Die Startseite bestand aus einem einzigen Hero von 100vh und sonst nichts —
 * indexierbar war daran genau eine Ueberschrift, und einen Weg zum
 * Betroffenheitscheck gab es ausser der Navigation nicht. Das Band ist beides:
 * der Einstieg fuer den Besucher, der herunterscrollt, und der einzige Text auf
 * der Startseite, in dem „NIS2" und „NISG 2026" ueberhaupt vorkommen.
 *
 * Charcoal statt Anthrazit, damit sich das Band vom Hero absetzt, ohne eine
 * zweite Farbe einzufuehren: es ist derselbe Ton, den die Fusszeile schon
 * benutzt. Die Limettenlinie oben ist dieselbe Geste wie im Nachweisregister.
 *
 * Die Innenabstaende sind an den Hero angelegt, nicht frei gewaehlt:
 * .hero-parent hat 4rem seitlich, .header-parent noch einmal 2rem — der
 * Ueberschriftentext beginnt also bei 6rem. Unter 480px sind es 2rem + 2rem.
 */
.nis2-promo {
  background-color: #161616;
  border-top: 1px solid #ecfd6f;
  padding: 5rem 6rem;
}

.nis2-promo-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  max-width: 46rem;
}

.nis2-promo-eyebrow {
  color: #ecfd6f;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

/* Webflow setzt h2 auf 2rem/300 — aber nur ueber 480px. Im Handy-Breakpoint
 * steht in JEDER Seiten-CSS ein nacktes `h2{font-size:4.4rem}`, und die
 * line-height bleibt bei den 36px aus dem Grundsatz. Webflows eigene
 * Ueberschriften laufen an dieser Falle vorbei, weil sie .heading-Klassen
 * tragen; dieses <h2> hat keine und ist hineingelaufen: 67px Schrift in
 * 36px Zeilen, die sich uebereinander legten, und „Unternehmen" allein
 * 456px breit auf einem 390px-Schirm — die ganze Startseite liess sich
 * seitlich wegschieben. Deshalb steht hier alles, was die Groesse
 * bestimmt, ausdruecklich; geerbt wird nichts mehr.
 */
.nis2-promo h2 {
  color: #ffffff;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.nis2-promo-text {
  color: #d0d0d0;
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0;
}

.nis2-promo-cta {
  margin: 0.6rem 0 0;
}

/* Dieselbe Taste wie „Beratung vereinbaren" im Hero (.div-block-74): Lime
 * gefuellt, 10px Radius, Anthrazit als Schrift. a{color:var(--black)} aus dem
 * Webflow-Grundsatz wuerde sie sonst schwarz auf Lime setzen — fast richtig,
 * aber eben nicht die Markenfarbe.
 */
.nis2-promo-btn {
  background-color: #ecfd6f;
  color: #292929;
  border-radius: 10px;
  display: inline-block;
  padding: 1rem 1.6rem;
  /* 400 wie .nav-link. Stand auf 500 und war damit der einzige Limettenknopf
   * der Startseite in einem anderen Schnitt als die beiden daneben — gleiche
   * Familie, gleiche 16px, nur fetter, was wie eine falsche Schrift aussieht. */
  font-weight: 400;
  min-height: 44px;
}

/* Der Hover dieser Taste liess frueher den Hintergrund auf Weiss gehen. Er ist
 * ersatzlos weg: Alle Limettentasten teilen sich jetzt einen einzigen Hover,
 * und der steht weiter unten unter „Ein Hover fuer alle Limettentasten". */

@media screen and (max-width: 991px) {
  .nis2-promo { padding: 4rem 3rem; }
}

@media screen and (max-width: 479px) {
  .nis2-promo { padding: 3rem 2rem; }
  .nis2-promo-btn { display: block; text-align: center; }
}

/* Verweis aus einer Leistung heraus auf den Betroffenheitscheck.
 *
 * Er steht in der Leistung „Regulatory Readiness & Gap-Analyse", weil das die
 * Leistung ist, die auf die Frage folgt, die der Check beantwortet. Farbe wie
 * beim Nachweisregister: Lime als Erkennungszeichen, graue Haarlinie statt
 * Unterstreichung, damit die Zeile den Absatz nicht aufbricht.
 *
 * Die Regel .focus-text.in-detail > p:last-of-type{margin-bottom:1rem} greift
 * jetzt auf diesen Absatz statt auf die Beschreibung — der Abstand zum
 * Ergebnisregister bleibt damit unveraendert.
 */
.svc-inline-link {
  font-size: 0.9375rem;
}

.svc-inline-link a {
  color: #ecfd6f;
  border-bottom: 1px solid #4a4a4a;
  padding-bottom: 1px;
}

.svc-inline-link a:hover {
  border-bottom-color: #ecfd6f;
}

/* Fluide Grundschrift.
 *
 * Stand bis zum 08.08.2026 als <style>-Block IM BODY jeder Seite — auf zehn
 * der dreizehn sogar zweimal in derselben Seite, zusammen 11.748 Zeichen in
 * einer einzigen Fassung. Es ist keine Komponente, sondern CSS, die im Markup
 * gelandet ist: Was `html { font-size }` setzt, gehoert in ein Stylesheet.
 *
 * Hier statt in webflow-shared.css, weil site-fixes.css zuletzt geladen wird
 * und der Block im Body vorher ebenfalls zuletzt galt. Kein Stylesheet der
 * Site setzt sonst `html { font-size }` — geprueft, sonst waere die
 * Reihenfolge nicht gleichgueltig.
 *
 * Die Zahlen sind unveraendert aus Webflows Ausgabe uebernommen. Wer den
 * Typo-Massstab aendert, aendert ihn ab jetzt hier und nur hier.
 */
html { font-size: calc(0.625rem + 0.41666666666666663vw); }
@media screen and (max-width: 1920px) { html { font-size: calc(0.625rem + 0.41666666666666674vw); } }
@media screen and (max-width: 1440px) { html { font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); } }
@media screen and (max-width: 479px)  { html { font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); } }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Der Spalt zwischen Kopfleiste und Kontaktfenster.
 *
 * .contact-overlay haelt oben 6rem frei, damit das Fenster unter der fixierten
 * Kopfleiste beginnt. Die Kopfleiste ist aber 5,5rem hoch — gemessen am
 * 08.08.2026 bei 1920, 1600, 1440, 1200 und 992 px, ueberall exakt 5,5rem, weil
 * die Seite eine fluide Grundschrift hat und beide Masse in rem stehen. Die
 * fehlende halbe rem stand als 8 bis 9 px hoher Streifen zwischen Leiste und
 * Fenster, durch den die Seite dahinter durchschien.
 *
 * 5,25rem statt 5,5rem: Das Fenster soll die Leiste UNTERFAHREN, nicht an ihr
 * anstossen. Bei 768 px ist die Leiste 6rem hoch, auf dem Telefon 5,45rem —
 * ein Wert, der irgendwo genau passt, hinterlaesst anderswo wieder eine
 * Haarlinie. Die Kopfleiste liegt mit z-index 200 ueber dem Fenster (102),
 * also verschwindet der Ueberstand hinter ihr. Sichtbar verloren geht nichts:
 * .panel-header bringt selbst 6rem Innenabstand mit.
 */
.contact-overlay {
  padding-top: 5.25rem;

  /* Zweite Haelfte des Blaustichs weiter oben (.text-parent). Das Fenster
   * faehrt mit translate3d herein, bekommt dadurch eine eigene
   * Compositing-Ebene — aber erst beim Oeffnen und nur, solange die Animation
   * laeuft. Genau dieser Wechsel zwingt Chrome, die Ueberschrift darunter neu
   * zu rastern, und dabei entsteht der Farbsaum an der Naht.
   *
   * will-change:transform legt die Ebene schon beim Laden an und behaelt sie.
   * Damit gibt es keinen Wechsel mehr: der Rahmen wird einmal gerastert und
   * beim Oeffnen nur noch verschoben. Kosten sind eine Ebene in Fenstergroesse,
   * die ohnehin auf jeder der dreizehn Seiten im Dokument steht.
   */
  will-change: transform;
}

/* Der Blaustich am letzten Buchstaben der Startseiten-Ueberschrift.
 *
 * Beim Oeffnen des Kontaktfensters bekam auf der Startseite genau EIN Zeichen
 * der Ueberschrift einen Blaustich — das „n" von „koennen". Gemessen am
 * 09.08.2026 bei 2433 px Fensterbreite: die linke Kante von .contact-panel
 * liegt bei x = 1216,5, das letzte „n" laeuft von 1208,6 bis 1259,6. Die Kante
 * schneidet den Buchstaben also 8 px hinter seinem Anfang. Ein Breitendurchlauf
 * von 1000 bis 2560 px zeigt dasselbe bei 1040 px und durchgehend ab 2430 px;
 * dazwischen faellt die Kante zwischen zwei Zeichen und nichts ist zu sehen.
 * Deshalb haengt der Fehler an der Fensterbreite und nicht am Zufall.
 *
 * In der Seite selbst ist nichts blau: das Kontaktfenster faehrt mit
 * translate3d herein, .contact-overlay-bg legt #0006 darueber, aus dem weissen
 * Titel wird exakt rgb(153,153,153) — jeder Pixel neutral grau, nachgemessen im
 * abgegriffenen Bild. Der Blaustich entsteht erst beim Zeichnen: Windows setzt
 * ClearType ein, also Subpixel-Antialiasing mit getrennten R-, G- und B-Kanten.
 * Wo die eigene Compositing-Ebene des Kontaktfensters die Ueberschrift
 * ueberdeckt, faellt Chrome auf Graustufen zurueck, davor nicht — und weil die
 * Naht mitten durch das „n" laeuft, wird dieser eine Buchstabe anders gerastert
 * als seine Nachbarn und zeigt den Farbsaum.
 *
 * `body { -webkit-font-smoothing: antialiased }` weiter oben soll genau das
 * verhindern, wirkt aber nur unter macOS; unter Windows ist die Eigenschaft
 * ohne Funktion. Die Ebene erzwingen wirkt dort: ein 3D-Transform legt den
 * Textblock in eine eigene Compositing-Ebene ohne deckenden Hintergrund, und
 * fuer solche Ebenen schaltet Chrome ClearType generell ab. Damit gibt es
 * keinen Subpixel-Farbsaum mehr, den eine Naht sichtbar machen koennte.
 *
 * .text-parent statt .heading, damit der Vorspann darunter dieselbe Ebene
 * teilt — er kreuzt die Kante genauso. Die Klasse kommt nur auf den beiden
 * Startseiten als Element vor. Geprueft: mit und ohne die Regel ist das
 * gerenderte Bild bei 2433 px bis auf eine Stufe in einem Kanal gleich.
 *
 * Die zweite Haelfte steht unten bei .contact-overlay: dort haelt
 * will-change:transform die Ebene ueber die ganze Lebensdauer der Seite fest,
 * damit Chrome seine Rasterentscheidung nicht beim Oeffnen wechselt.
 */
.text-parent {
  transform: translateZ(0);
}

/* Ein Kopfabstand fuer alle Seiten.
 *
 * Gemessen am 08.08.2026 zwischen Unterkante der Kopfleiste und dem ersten
 * Inhalt: 88 px auf /services, /team, /impressum, /datenschutz und ihren
 * englischen Fassungen — und 40 px auf /nis2-check. Auf kurzen Seiten wurde
 * der Unterschied noch groesser, weil .main-wrapper seinen Inhalt mittig
 * stellt: Auf /impressum lagen bei 900 px Fensterhoehe 164 px zwischen Leiste
 * und Kasten.
 *
 * Der engere Abstand des Checks gilt jetzt ueberall. Zwei Ursachen, zwei
 * Zeilen:
 *
 * 1. .hero-parent-2 hielt 8rem frei, dazu die 3rem von .main-wrapper — macht
 *    11rem ab Seitenoberkante. Der Check kommt mit 3rem + 5rem aus. 5rem hier
 *    stellt beide gleich.
 * 2. justify-content:center liess kurze Seiten in die Mitte des Fensters
 *    rutschen. Damit haengt der Abstand an der Inhaltsmenge, und zwei Seiten
 *    mit gleichem Aufbau sehen verschieden aus. Der Inhalt beginnt jetzt
 *    ueberall oben.
 *
 * Die Startseiten bleiben unberuehrt: Sie benutzen .hero-parent (100vh), nicht
 * .hero-parent-2.
 */
.main-wrapper {
  justify-content: flex-start;
}

.hero-parent-2 {
  padding-top: 5rem;
}

/* Unter 480px faellt .main-wrapper auf padding:0 — die 3rem, mit denen die
   5rem oben zusammen 8rem ergeben, fehlen dann. 5rem allein sind weniger
   als die Kopfleiste hoch ist, der Inhalt liefe also dahinter. 7rem ist
   derselbe Wert, den .nis2 auf dem Telefon benutzt. */
@media screen and (max-width: 479px) {
  .hero-parent-2 { padding-top: 7rem; }
}

/* Die 404-Seite.
 *
 * Sie kam so aus Webflow: lang="de" am <html>, der Text darin englisch, der
 * Titel „Not Found", und kein einziger Link — wer sich vertippt hatte oder
 * einem alten Verweis gefolgt war, kam nur ueber die Zurueck-Taste weiter.
 * .utility-page-content ist ausserdem auf 260px festgenagelt, in die keine
 * Zeile passt.
 *
 * Bewusst OHNE die Navigationsleiste: page-404.css bringt zwar .nav-bar und
 * .contact-overlay mit, aber weder .footer-parent noch die #w-node-Regeln, die
 * Logo und Menue im Kopf mittig setzen — dieselbe Luecke, an der die
 * Check-Seite haengengeblieben ist. Eine Sackgasse mit vier Links ist besser
 * als ein halber Seitenrahmen.
 *
 * a{color:var(--black)} kommt aus dem Webflow-Grundsatz; ohne eigene Farbe
 * waeren die Links hier schwarz auf Anthrazit.
 */
.utility-page-content {
  width: min(34rem, 88vw);
  gap: 1.1rem;
}

.nf-logo { align-self: center; }
.nf-bild { max-width: 8rem; align-self: center; opacity: .5; }

.utility-page-content h1 { font-size: 2rem; line-height: 1.35; color: #fff; }
.utility-page-content p { color: #d0d0d0; margin: 0; }

.nf-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.4rem;
  margin-top: .4rem !important;
}

.nf-links a {
  color: #ecfd6f;
  border-bottom: 1px solid #4a4a4a;
  padding-bottom: 1px;
}

.nf-links a:hover { border-bottom-color: #ecfd6f; }

.nf-en {
  border-top: 1px solid #3a3a3a;
  padding-top: 1rem;
  margin-top: .6rem !important;
  font-size: .875rem;
  color: #a7a7a7 !important;
}

.nf-en a { color: #a7a7a7; border-bottom: 1px solid #4a4a4a; }
.nf-en a:hover { color: #ecfd6f; }

/* Auswahlfarbe. Stand als <style>-Block im Kopf jeder der dreizehn Seiten,
 * zusammen mit zwei Regeln aus Webflows CMS:
 *
 *     .dynamic-section:has(.w-dyn-empty)          { display: none !important; }
 *     .team-info-section:has(.rich-text:empty)    { display: none !important; }
 *
 * Beide blenden leere CMS-Sammlungen aus. Diese Site hat keine Sammlungen —
 * die Klassen kommen auf keiner Seite als Element vor, nur als Regel. Sie sind
 * mit dem Block entfallen, ::selection bleibt und steht jetzt einmal hier.
 */
::selection      { background: #ecfd6f; color: #292929; }
::-moz-selection { background: #ecfd6f; color: #292929; }

/* Die beiden Limettentasten sind nur auf ihrer Schrift anklickbar.
 *
 * Webflow baut eine Taste nicht als Verweis mit Innenabstand, sondern als
 * <div> mit Hintergrund, Radius und Polster, in dem ein nacktes <a> sitzt. Das
 * <a> ist inline und damit genau so gross wie sein Wort — Polster, Rand und
 * abgerundete Ecke gehoeren dem <div> und sind tot. Gemessen am 09.08.2026 bei
 * 1440 px auf allen dreizehn Seiten:
 *
 *   .div-block-76  Contact-Pille im Kopf   97 x 40 px sichtbar,  65 x 23 klickbar   39 %
 *   .div-block-74  „Beratung vereinbaren" 246 x 64 px sichtbar, 174 x 24 klickbar   27 %
 *
 * Beim Hero-Knopf kommt dazu, dass der Pfeil rechts ein <img> NEBEN dem <a>
 * ist: Er sieht aus wie ein Teil der Taste, gehoert aber nicht zum Verweis.
 * Wer auf den Pfeil klickt, trifft nichts.
 *
 * Dieselbe Regel stand schon einmal hier, aber eingesperrt in den
 * Handy-Breakpoint — dort ging es um die 44px-Fingerflaeche aus WCAG 2.5.8.
 * Das Problem hat mit der Fensterbreite nichts zu tun: am Zeigegeraet ist der
 * tote Rand genauso tot, nur faellt er weniger auf. Die Regel gilt jetzt
 * ueberall, der Handy-Block verweist nur noch hierher.
 *
 * ::after statt Umbau des <a> zu display:block mit eigenem Polster: Das <div>
 * traegt Hintergrund und Flex-Ausrichtung, und im Hero sitzt der Pfeil als
 * Geschwister daneben. Ein Verweis, der das Polster uebernimmt, muesste beides
 * an sich ziehen — die Flaeche zu vergroessern kostet dagegen keine Zeile
 * Layout. Deshalb aendert sich am gerenderten Bild nichts, nur am Trefferfeld.
 *
 * Damit haengt auch der Hover-Zustand an der ganzen Taste: Die Maus ueber dem
 * Polster liegt ueber dem ::after des Verweises, also gilt :hover, und
 * .nav-link:hover faerbt die Schrift wie erwartet.
 */
.div-block-74,
.div-block-76 {
  position: relative;
}

.div-block-74 > .contact-open::after,
.div-block-76 > .contact-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Der Pfeil ist Schmuck — alt="" und ohne eigene Bedeutung. Ohne diese Zeile
 * faengt er als spaeteres Geschwister die Klicks ab, die sonst auf dem ::after
 * darunter landen wuerden, und ausgerechnet die rechte Haelfte der Taste
 * bliebe tot. pointer-events:none laesst den Zeiger durch. */
.div-block-74 > .image-9 {
  pointer-events: none;
}

/* Ein Hover fuer alle Limettentasten
 * ---------------------------------------------------------------------------
 * Massgeblich ist, was „Beratung vereinbaren" von Anfang an getan hat. Am
 * 09.08.2026 bei 1440px mit echter Maus gemessen, und zwar nicht nur die
 * Farbe, sondern ALLE berechneten Eigenschaften vorher gegen nachher: Genau
 * eine bewegt sich, color von rgba(53,53,53,.8) auf #000. Der Hintergrund
 * bleibt Limette, nichts verschiebt sich, nichts wird gross. Die uebrigen
 * Eigenschaften in so einem Vergleich — border-*-color, caret-color,
 * text-decoration-color — sind nur currentColor, das mitlaeuft.
 *
 * Derselbe Vergleich im Urzustand fuer die anderen Tasten:
 *
 *   .div-block-74  Beratung vereinbaren  color -> #000        das Vorbild
 *   .div-block-76  Contact-Pille         color -> #000        gleich
 *   .image-9       Pfeil daneben         KEINE Eigenschaft
 *   .submit-button Absenden              KEINE Eigenschaft
 *   .x-line        Schliesskreuz         KEINE Eigenschaft
 *
 * Deshalb steht hier nur ein :hover und keine Ruheregel. Die Ruhefarben
 * bleiben, wie sie waren — #292929 bei Absenden und der Promo-Taste, #363636
 * beim Kreuz. Ein erster Versuch hatte sie auf die rgba(53,53,53,.8) des
 * Vorbilds gezogen, damit auch der Ausgangspunkt ueberall derselbe ist. Das
 * war falsch: Angeglichen werden soll die Reaktion, nicht das Aussehen im
 * Ruhezustand.
 *
 * Auch keine transition. Das Vorbild schaltet hart um; .nav-link traegt zwar
 * ein transition, aber auf opacity, nicht auf color. Ein Uebergang haette die
 * angeglichenen Tasten wieder anders aussehen lassen als das Vorbild.
 *
 * Beim Kreuz fehlte die Regel nie: Der Verweis darunter faerbt bei :hover sehr
 * wohl sein color von #363636 auf Schwarz. Nur sind die beiden Striche <div>s,
 * die ihre Farbe aus background-color beziehen, und dort stand ein Festwert.
 * Die Absicht war da, sie kam nur nicht an. currentColor holt sie ab.
 *
 * Der Pfeil macht die Farbregel mit, seit er kein <img> mehr ist. Als Bild
 * ging das nicht: An einem <img> greift keine Schriftfarbe, das
 * stroke="currentColor" der Datei loest im Bildkontext gegen Schwarz auf, und
 * damit war der Pfeil bereits am Ziel des Hovers. Zwei Umwege wurden
 * verworfen — ihn in Ruhe auf opacity .62 dimmen (dann ist der Hover keine
 * Hervorhebung, sondern die Ruecknahme einer Abdunklung, und im Normalfall
 * sieht er blasser aus als vorher), und ihn um 3px verschieben (ein echtes
 * Signal, aber ein anderes als das der Schrift daneben).
 *
 * Jetzt steht dasselbe SVG inline in der Seite statt in einer Datei. Damit
 * loest currentColor gegen die Farbe DIESES Elements auf, und der Pfeil
 * bekommt Ruhe- und Hoverfarbe der Schrift. Er bleibt Geschwister des <a> und
 * nicht sein Kind: Als Kind wuerde er die Farbe zwar erben, aber die
 * Flex-Ausrichtung des Kastens muesste in den Verweis wandern.
 *
 * height ist noetig, weil ein inline-<svg> ohne Hoehenangabe nicht die
 * Eigengroesse eines <img> hat und sonst auf 150px aufgeht. width:2rem steht
 * schon in page-home.css. stroke-width 1 mit vector-effect:non-scaling-stroke
 * ergibt dieselbe 1px-Linie wie zuvor, unabhaengig von der Skalierung des
 * viewBox.
 */
.div-block-74 > .image-9 {
  height: 2rem;
  color: #292929;
}

.div-block-74:hover > .image-9 {
  color: #000;
}

/* Ruhefarbe der beiden nav-link-Tasten: Webflows #353535cc ergibt auf Limette
 * rgb(90,93,65), ein Oliv-Grau. Es ist der Urzustand — nachgeprueft am
 * 09.08.2026, indem 00209c5 ausgecheckt und gegen den heutigen Stand
 * fotografiert wurde: 0 von 141.696 Pixeln abweichend. Trotzdem ist es zu
 * hell fuer die wichtigste Taste der Seite und passt nicht zu den anderen
 * Limettentasten, die auf #292929 stehen. Also Anthrazit, wie ueberall sonst.
 *
 * Der Preis steht in derselben Zeile: Der Hover geht auf #000 und ist damit
 * nur noch ein kleiner Schritt (13,0:1 zu 18,9:1 Kontrast statt 6,1:1 zu
 * 18,9:1). Die Taste sieht besser aus und reagiert schwaecher sichtbar.
 *
 * .nav-link trifft nur diese zwei Elemente ohne .white — alle uebrigen
 * Navigationsverweise sind weiss und bleiben unberuehrt. Die Regel ist
 * trotzdem auf die beiden Kaesten eingegrenzt, damit sie das nicht stillschwei-
 * gend voraussetzt. */
.div-block-74 > .contact-open,
.div-block-76 > .contact-toggle {
  color: #292929;
}

/* Ohne diese vier Zeilen haetten ausgerechnet die beiden Vorbild-Tasten gar
 * keinen Hover mehr. .nav-link:hover ist eine Klasse plus eine Pseudoklasse,
 * die Regel darueber sind zwei Klassen — gleiche Spezifitaet, und weil
 * site-fixes.css zuletzt geladen wird, gewinnt die spaetere. Gemessen: beide
 * Tasten meldeten nach der Ruhefarbe „NICHTS" beim Ueberfahren. */
.div-block-74 > .contact-open:hover,
.div-block-76 > .contact-toggle:hover {
  color: #000;
}

/* Der Hover soll nicht nur dunkler werden, sondern auch kraeftiger.
 * ---------------------------------------------------------------------------
 * Reine Farbe war zu leise, seit die Ruhefarbe von rgb(90,93,65) auf #292929
 * gewandert ist: Der staerkste Pixelunterschied fiel dabei von 251 auf 133.
 *
 * Der nachliegende Griff waere font-weight 400 -> 500. Poppins liegt in 300
 * bis 700 vor, der Schnitt waere also da. Er ist trotzdem nicht benutzbar:
 * Ein anderer Schnitt ist breiter, und .div-block-74 ist ein Flex-Kasten, der
 * sich nach seinem Inhalt richtet. Die Taste wuerde beim Ueberfahren wachsen
 * und den Pfeil vor sich herschieben — eine Bewegung, die niemand angefragt
 * hat, ausgeloest vom blossen Darueberfahren.
 *
 * -webkit-text-stroke legt stattdessen eine Kontur auf die Glyphenkanten. Das
 * ist reines Malen: Es traegt auf, ohne die Metrik anzufassen, die Taste
 * behaelt auf den Pixel ihre Groesse.
 *
 * 0.2px. Der erste Anlauf stand auf 0.4px — sauber gesetzt, die Innenraeume
 * von a, e und g blieben offen (zu laufen beginnen sie erst ab etwa 0.7px),
 * aber als Antwort auf das blosse Darueberfahren zu laut. 0.2px liegt in der
 * Mitte zwischen reiner Farbe und diesem ersten Anlauf. Gemessen als
 * staerkster Pixelunterschied zwischen Ruhe und Hover: 133 ohne Auftrag, 600
 * bei 0.4px, 404 jetzt.
 *
 * Der Pfeil ist mitgezogen, 1 -> 1.6 -> 1.3, damit er denselben Anteil seines
 * vollen Auftrags behaelt.
 *
 * Das Kreuz nicht: Es bleibt bei 2px. 1.5px waere der Zwischenwert gewesen,
 * ist aber wirkungslos — nachgemessen ergaben 1.5px exakt dasselbe Bild wie
 * gar kein Auftrag (730 geaenderte Pixel, staerkster Unterschied 162, beides
 * identisch mit reiner Farbe). Eine Haarlinie hat keinen halben Geraetepixel,
 * auf den sie wachsen koennte. Mit 2px liegt das Kreuz bei 334 und damit
 * ohnehin unter den Schriftflaechen; es faellt nicht als das lauteste auf.
 *
 * Farbe muss mitgegeben werden. .submit-button traegt aus Webflow ein
 * -webkit-text-stroke-color:var(--white); nur die Breite zu setzen, wuerde die
 * Schrift dort weiss umranden und heller statt kraeftiger machen. Die
 * Kurzschreibweise setzt beides.
 *
 * Der Pfeil zieht ueber stroke-width mit: Mit vector-effect:non-scaling-stroke
 * zaehlt der Wert in Geraetepixeln, 1 -> 1.6 entspricht dem Auftrag der
 * Schrift. CSS schlaegt dabei das Praesentationsattribut im SVG.
 *
 * Das Schliesskreuz hat keine Schrift, nur zwei 1px hohe <div>s. Es wird
 * stattdessen 2px hoch. Die Striche sind absolut gesetzt, die Mitte
 * verschiebt sich dabei um einen halben Pixel.
 */
.div-block-74 > .contact-open:hover,
.div-block-76 > .contact-toggle:hover,
.nis2-promo-btn:hover,
.submit-button:hover {
  -webkit-text-stroke: 0.2px #000;
}

.div-block-74:hover > .image-9 path {
  stroke-width: 1.3;
}

.link-block.close-button.contact-close:hover .x-line {
  height: 2px;
}

.nis2-promo-btn:hover,
.submit-button:hover {
  color: #000;
}

.x-line {
  background-color: currentColor;
}

/* ------------------------------------------------------------------- Handy
 *
 * Webflow hat einen Handy-Breakpoint, aber er ordnet nur um: Spalten werden
 * Zeilen, das Menue wird eine Schublade. Was am Finger haengt, hat es nie
 * angefasst. Drei Dinge stehen deshalb hier, und alle drei gelten nur
 * unter 480px:
 *
 * SCHRIFTGRAD IN FELDERN. iOS Safari zoomt die Seite beim Antippen jedes
 * Eingabefeldes, dessen Schrift kleiner als 16px ist, und zoomt danach
 * nicht zurueck. Webflows .w-input steht auf 14px — das Kontaktformular
 * liess die Seite also bei jedem Feld verspringen. 16px ist keine
 * Gestaltung, sondern die Schwelle, unter der iOS eingreift.
 *
 * FINGERFLAECHEN. 44px ist das Mass, das Apple und WCAG 2.5.8 nennen. Die
 * Bedienelemente lagen bei 21 bis 41px. Hier stehen nur noch die Verweise, die
 * ihre Flaeche selbst aufspannen muessen. Die beiden Limettentasten
 * (Hero-Taste, Contact-Pille) sind hier ausgezogen: ihr ::after gilt jetzt bei
 * jeder Fensterbreite, siehe oben — der tote Rand war nie ein Handy-Problem.
 *
 * Bewusst NICHT vergroessert: Verweise im Fliesstext (Impressum, Fundstellen
 * im Check). WCAG 2.5.8 nimmt sie ausdruecklich aus, und ihre Hoehe ist die
 * Zeilenhoehe des Absatzes — wer sie auf 44px zieht, reisst den Satz auf.
 *
 * KLEINSTE SCHRIFT. Der Grundschriftgrad ist fluid (siehe oben) und faellt
 * bei 320px auf 14,7px. Alles in rem faellt mit: Fusszeile und Register
 * landeten bei 11,9 bis 12,8px. Die Untergrenze steht hier in px, weil eine
 * Untergrenze nicht mitschrumpfen darf.
 */
@media screen and (max-width: 479px) {
  /* .form/.nis2 davor, weil Webflows .w-input{font-size:14px} eine Klasse ist
     und ein nacktes `input` gegen eine Klasse verliert. */
  .form input, .form select, .form textarea,
  .nis2 input, .nis2 select, .nis2 textarea {
    font-size: 16px;
  }

  .flex-menu .nav-link,
  .nf-links a,
  .credential-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nav-link-footer {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .tab-about-header { padding-top: 13px; }

  /* Eine Mailadresse ist kein Verweis im Satz, sondern der Weg zur Aufnahme
     des Kontakts — die einzige Handlung auf dem Impressum. Der Verweis auf
     ris.bka.gv.at daneben bleibt Fliesstext und behaelt seine Zeilenhoehe. */
  a[href^="mailto:"], a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nav-link-footer, .nav-text-footer,
  .credential-label, .svc-meta dt,
  .nis2-promo-eyebrow, .nf-en {
    font-size: 13px;
  }
}