/* conct.de — Ergänzungen zum Grundstil.
 *
 * Eine eigene Datei, nicht ein Eingriff in Base.css: Die ist ein Erzeugnis
 * des Bauwerkzeugs und wird beim nächsten Lauf überschrieben. Was hier steht,
 * ist von Hand geschrieben und soll bleiben.
 *
 * Nichts davon braucht JavaScript, und nichts davon speichert etwas im
 * Browser. Das ist keine Sparsamkeit, sondern die Zusage der Startseite:
 * null Skripte, null Cookies. Eine Leseansicht, die auf einen Knopf hört,
 * bräuchte beides — eine, die auf die Einstellung des Besuchers hört,
 * braucht keins von beiden.
 */


/* --------------------------------------------------------------------------
 * 1. Kopfzeile umbrechen lassen
 *
 * Gemessen am 23.09.2026: Bei 320 Pixel Fensterbreite und zugleich auf 200 %
 * vergrößertem Text begann der Menüknopf bei x=316 und endete bei 483 — vier
 * Pixel sichtbar, und waagerecht scrollen ließ sich die Seite nicht. Der
 * Knopf war damit praktisch unerreichbar, und mit ihm die ganze Navigation.
 *
 * Eine Zeile behebt das: Die Kopfzeile darf umbrechen, statt zu überstehen.
 * -------------------------------------------------------------------------- */
header > .wrap {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}


/* --------------------------------------------------------------------------
 * 1b. Kontrast der leisen Schrift
 *
 * Der eigene Barrierefreiheitslauf hat am 23.09.2026 vier Stellen gemeldet:
 * die drei Spaltenüberschriften der Fußzeile und die Zeile mit dem
 * Urheberrechtsvermerk. #66748a auf #f5f8fc ergibt 4.45 — gefordert sind
 * 4.5 nach WCAG 1.4.3. Ein Hauch zu hell, und genau diese Sorte Befund
 * verschwindet nie von selbst, weil sie beim Ansehen niemandem auffällt.
 *
 * #647186 ergibt 4.64 in der Fußzeile und 4.94 auf weißer Fläche. Der
 * Unterschied ist mit bloßem Auge kaum zu sehen; die Zahl stimmt.
 *
 * Nur im hellen Modus: Im dunklen liegt derselbe Ton bereits bei 5.9.
 * -------------------------------------------------------------------------- */
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  :root { --ink-3: #647186; }
}


/* --------------------------------------------------------------------------
 * 2. Worttrennung
 *
 * Deutsche Komposita sind lang: "Barrierefreiheitsstärkungsgesetz" ist ein
 * Wort. In einer schmalen Spalte — auf dem Telefon oder bei großer Schrift —
 * reißt es entweder das Layout auf oder hinterlässt ein Loch in der Zeile.
 * Die Sprache steht am <html>-Element, also weiß der Browser, wie er trennt.
 * -------------------------------------------------------------------------- */
p, li, dd, .legal {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Überschriften nur trennen, nicht brechen. "overflow-wrap: break-word"
 * zerlegt ein Wort an beliebiger Stelle, sobald es eng wird — bei 62 Pixel
 * großer Schrift in einer 320 Pixel schmalen Spalte stand dann "Website"
 * über "-Check:". Die Silbentrennung sucht dagegen eine Stelle, an der man
 * ein Wort auch trennen darf. */
h1, h2, h3 {
  hyphens: auto;
}


/* --------------------------------------------------------------------------
 * 3. Leseansicht
 *
 * Sie schaltet sich selbst ein, wenn das Fenster — gemessen in der
 * Schriftgröße des Besuchers — schmal wird. Das ist auf dem Telefon der Fall
 * und ebenso auf dem großen Bildschirm, sobald jemand die Standardschrift
 * seines Browsers hochsetzt. Genau diese beiden Fälle brauchen dasselbe:
 * weniger Beiwerk, ruhigere Zeilen, kein Balken, der Platz wegnimmt.
 *
 * Warum "em" und nicht "px": Ein Pixel-Grenzwert sieht nur das Fenster. Ein
 * em-Grenzwert sieht das Verhältnis von Fenster zu Schrift — und darauf
 * kommt es an. Wer 200 % eingestellt hat, bekommt die Leseansicht auch bei
 * 1280 Pixeln Fensterbreite, und wer normal liest, behält das gewohnte Bild.
 *
 * Es gibt dafür keinen Schalter. Der Schalter steht im Browser, seit es
 * Browser gibt, und er gilt dann für alle Seiten und nicht nur für unsere.
 * -------------------------------------------------------------------------- */
@media (max-width: 46em) {

  /* Ein Balken, der oben kleben bleibt, kostet bei großer Schrift ein
     Viertel des Schirms. Beim Lesen ist Platz mehr wert als Bequemlichkeit
     beim Springen. */
  header.sticky {
    position: static;
  }

  /* Ruhigere Zeilen: etwas mehr Durchschuss, etwas weniger Enge. */
  main p,
  main li,
  .legal p,
  .legal li {
    line-height: 1.75;
  }

  /* Überschriften sollen nicht mit einem einzelnen Wort in der letzten Zeile
     enden. text-wrap kennen noch nicht alle Browser; wer es nicht kennt,
     bekommt einfach den bisherigen Umbruch. */
  h1, h2, h3 {
    text-wrap: balance;
  }

  main p,
  .legal p {
    text-wrap: pretty;
  }
}


/* --------------------------------------------------------------------------
 * 4. Bewegung nur, wenn sie gewollt ist
 *
 * Der Grundstil blendet Abschnitte beim Scrollen ein. Wer in seinem System
 * "Bewegung reduzieren" gewählt hat, hat das nicht für unsere Seite
 * ausgenommen.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
 * Schaukasten fuer das Siegel
 *
 * Auf /pruefsiegel/ steht jede Gestalt zweimal: hell und dunkel. Die dunkle
 * Fassung braucht dafuer einen dunklen Grund — auf der hellen Seite waere sie
 * sonst ein Fleck ohne Zusammenhang, und genau der Vergleich ist der Zweck
 * der Abbildung: Der Kunde soll sehen, welche Fassung zu seiner Seite passt.
 *
 * Die beiden Flaechen sind deshalb fest und folgen NICHT dem Dunkelmodus des
 * Lesers. Sie stellen den Hintergrund einer fremden Seite dar, nicht den
 * dieser hier.
 *
 * Als eigene Regel und nicht als style-Attribut: Die Content-Security-Policy
 * dieser Seite verbietet eingebettete Stile (style-src 'self'). Ein style=""
 * wuerde stillschweigend nicht greifen — derselbe Grund, aus dem die
 * XML-Ansicht der Browser hier ohne Ausnahme zerbricht.
 * -------------------------------------------------------------------------- */
.siegel-paar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.25rem 0 0.5rem;
  /* Aus der Textspalte ausbrechen. Zwei Felder mit der ausfuehrlichen
     Fassung brauchen 46rem und brechen in einer schmaleren Spalte um.
     69.5rem ist die Innenbreite von .wrap (72rem abzueglich 2x1.25rem
     Polster); auf schmalen Schirmen greift die zweite Angabe und der
     Schaukasten bleibt im Fenster.

     Auf einer Textseite gilt das nicht mehr: Dort ist die Spalte selbst
     48rem breit und mittig, der Schaukasten passt hinein, und ein Ausbruch
     auf 69.5rem stuende ueber beide Raender hinaus. Siehe Abschnitt 6. */
  width: min(69.5rem, calc(100vw - 2.5rem));
  max-width: none;
}

.siegel-feld {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 16rem;
  padding: 1.25rem;
  border-radius: 0.9rem;
}

.siegel-feld svg { max-width: 100%; height: auto; }

.siegel-hell   { background: #ffffff; border: 1px solid #d9e2ec; }
.siegel-dunkel { background: #0b1017; border: 1px solid #253244; }

/* Die Bezeichnung der Flaeche, damit ohne Farbwahrnehmung klar bleibt,
   welche Fassung welche ist. */
.siegel-feld::before {
  content: attr(data-flaeche);
  align-self: flex-start;
  margin: -0.5rem 0.75rem 0 -0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.siegel-hell::before   { color: #6b7a8c; }
.siegel-dunkel::before { color: #8fa0b3; }

/* --------------------------------------------------------------------------
 * 6. Textseiten: die Lesespalte in die Mitte
 *
 * Gemessen am 08.10.2026 auf /ueber-uns/ bei 1280 Pixeln Fensterbreite: Kopf
 * und Fußzeile laufen über die ganzen 1152 Pixel, der Text steht in einer
 * 768-Pixel-Säule am linken Rand. Rechts bleiben 364 Pixel leer, und die
 * Seite wirkt nach links gekippt.
 *
 * Die Spalte zu verbreitern wäre der falsche Weg: Zeilen über die ganze
 * Breite liest niemand gern, und auf diesen Seiten steht nichts, was sich
 * nebeneinander stellen ließe — es ist Fließtext. Also rückt die Spalte in
 * die Mitte. Kopf und Fuß bleiben breit; links und rechts gleich viel Luft
 * sieht gewollt aus, ein einseitiger Rand sieht nach Versehen aus.
 *
 * Angefasst wird die Fläche, nicht der einzelne Absatz. Auf einer Textseite
 * wird .wrap selbst schmal, und die Deckel darin geben ihre Begrenzung ab.
 * Würde stattdessen jedes Element für sich zentriert, begännen Überschrift
 * (max-w-3xl), Vorspann (max-w-2xl) und Fließtext an drei verschiedenen
 * Stellen — und der Knopf am Ende ist ein inline-flex, den hätte
 * margin-inline: auto ohnehin nicht bewegt.
 *
 * 50.5rem abzüglich der 2×1.25rem Polsterung von .wrap ergibt 48rem
 * Inhaltsbreite — genau das Maß, in dem der Fließtext dieser Seiten schon
 * vorher stand. Die Zeilenlänge ändert sich also nicht, nur ihr Ort.
 *
 * Welche Seite eine Textseite ist, steht im HTML und nicht hier: Es sind die
 * 19, in deren <main> kein Raster steht. Wo eines steht — Startseite,
 * Leistungen mit Karten, Kontakt —, füllt es die Breite ohnehin, und die
 * schmale Textsäule darüber liest sich dort als Vorspann, nicht als Versehen.
 * -------------------------------------------------------------------------- */
.textseite .wrap {
  max-width: 50.5rem;
}

.textseite .wrap .max-w-3xl,
.textseite .wrap .max-w-2xl,
.textseite .wrap .max-w-xl {
  max-width: 100%;
}

/* Der Schaukasten des Prüfsiegels brach aus der schmalen Textspalte aus, auf
   69.5rem — die Innenbreite der alten, breiten Fläche. In der mittigen Spalte
   stünde er über beide Ränder hinaus und brächte die Seite zum seitlichen
   Scrollen. Er braucht 46rem; die Spalte hat 48rem, also genügt sie ihm. */
.textseite .siegel-paar {
  width: auto;
}