/* ============================================================================
 * Mobilkorrekturen fuer den Apricus-Klon
 *
 * Grundsatz: Der Desktop bleibt pixelgenau. Alles, was hier steht, greift
 * entweder nur unterhalb von 782 px (das ist der Punkt, an dem das Thema selbst
 * auf das Mobilmenue umschaltet), oder es ist eine Lesbarkeitskorrektur, die
 * bewusst ueberall gilt und unten eigens begruendet wird.
 *
 * Jede Regel nennt die gemessene Zahl, die sie behebt. Gemessen wurde mit
 * tools/mobilcheck.py in Chrome bei 320, 360, 390 und 430 px, Geraetefaktor 3,
 * gedrosseltem 4G.
 * ========================================================================= */


/* ---------------------------------------------------------------------------
 * 1. Kopfzeile
 *
 * Gemessen bei 390 px: Die Kopfreihe war nur 281 px breit, obwohl 390 zur
 * Verfuegung stehen. Davon nahm das Logo 142 px und der Hamburger 24 px, sodass
 * fuer den Knopf "Kontaktieren Sie uns" ganze 99 px uebrig blieben. Der Text
 * brach in drei Zeilen um, der Knopf wurde 95 px hoch und die Kopfzeile frass
 * 127 px, also 15 Prozent des Bildschirms, bevor der Besucher ein Wort
 * gelesen hatte.
 * ------------------------------------------------------------------------ */

@media (max-width: 781px) {

  /* Der Aussenrand der Kopfzeile war fuer Desktopbreiten gedacht. Auf dem
     Handy sind 109 px ungenutzter Rand purer Verlust.

     Achtung beim Selektor: die Kopfreihe IST das <header>-Element und traegt
     die Klassen selbst. "header .wp-block-group.alignwide" mit Leerzeichen
     sucht ein Kind und trifft nichts; gemessen blieb die Reihe bei 281 px. */
  header.wp-block-group.alignwide {
    max-width: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    /* Umbruch erlauben: unter 520 px passen Logo, Menueknopf und der
       Handlungsaufruf nicht mehr nebeneinander. Ein erster Versuch zwang sie
       mit "white-space: nowrap" in eine Zeile; der Knopf ragte daraufhin bei
       320 px um 95 px aus dem Bild. */
    flex-wrap: wrap;
    row-gap: 10px;
    /* 12 px statt der urspruenglichen 16: gemessen fehlten bei 390 px genau
       15 px, damit Logo, Menueknopf und Handlungsaufruf in eine Zeile passen.
       Der Abstand bleibt ueber den 8 px, ab denen Fehlgriffe drohen. */
    column-gap: 12px;
  }

  /* Logo etwas kleiner: es bleibt gut erkennbar und gibt Platz frei. */
  header .custom-logo-link img,
  header .custom-logo {
    /* 104 statt 118 px. Die 14 px sind der Rest, der bei 390 px zur einzeiligen
       Kopfleiste fehlte. Das Logo bleibt bei dieser Groesse klar lesbar. */
    max-width: 104px;
    height: auto;
  }

  /* Das Logo ist der Weg zurueck zur Startseite und war 32 px hoch. Der
     Innenabstand hebt die Trefflaeche auf 44 px, ohne das Bild zu vergroessern. */
  header .custom-logo-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  header .wp-block-button__link {
    white-space: nowrap;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Unter 384 px rutscht der Handlungsaufruf in die zweite Zeile und nimmt dort
   die volle Breite ein. Das ist ehrlicher als ein abgeschnittener Knopf: er
   ist gross, einzeilig lesbar und mit dem Daumen sicher zu treffen. Oben
   bleiben Logo und Menueknopf mit viel Luft dazwischen. */
@media (max-width: 383px) {
  /* Der Umbruch muss an .wp-block-buttons ansetzen, nicht am Knopf selbst:
     zwischen Kopfreihe und Knopf liegen ZWEI Kaesten, und nur der aeusserste
     ist ein direktes Kind der Flex-Reihe. Ein "flex: 1 0 100%" weiter innen
     bleibt wirkungslos, gemessen blieb der Knopf bei 171 px. */
  header .wp-block-buttons {
    flex: 1 0 100%;
    width: 100%;
    order: 3;
  }

  header .wp-block-buttons > .wp-block-button,
  header .wp-block-button__link {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Ab 384 px ist genug Platz fuer eine Zeile. Die Grenze lag zuerst bei 520 px
   und wurde nach unten korrigiert, nachdem der Innenabstand des aeusseren
   Kastens 81 px zusaetzliche Breite freigegeben hat. */
@media (min-width: 384px) and (max-width: 781px) {
  header .wp-block-buttons,
  header .wp-block-button.has-custom-width.wp-block-button__width-100 {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
  }

  header .wp-block-button__link {
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* ---------------------------------------------------------------------------
 * 2. Der Hamburger-Knopf
 *
 * Gemessen: 24 x 24 px, auf allen sechs Seiten. Ueber diesen Knopf laeuft auf
 * dem Handy die gesamte Navigation, er ist der wichtigste Bedienpunkt der
 * Seite, und er war der kleinste. Apple empfiehlt 44 px, WCAG 2.2 fordert im
 * Mindestmass 24 px, was er gerade eben erreichte.
 *
 * Vergroessert wird die TREFFFLAECHE, nicht das Symbol. Das Symbol behaelt
 * seine 24 px, sonst wirkt die Kopfzeile plump.
 * ------------------------------------------------------------------------ */

@media (max-width: 781px) {
  .wp-block-navigation__responsive-container-open {
    /* 24 px Symbol plus zweimal 12 px Innenabstand ergibt 48 px Trefflaeche */
    padding: 12px;
    margin: -12px;
    box-sizing: content-box;
  }

  /* Der negative Aussenabstand haelt die Optik an ihrem Platz: der Knopf
     wirkt weiterhin 24 px gross, faengt aber 48 px Beruehrung ab. Damit er
     dabei nicht unter das Logo greift, braucht die Reihe etwas Luft. */
  header.wp-block-group.alignwide {
    column-gap: 12px;
  }

  /* Hier lag der eigentliche Platzfresser: der aeussere Kasten der Kopfzeile
     hat 54,6 px Innenabstand auf JEDER Seite, zusammen 109 px. Genau die
     fehlten der Reihe, die deshalb nur 281 statt 366 px breit war. Dazu 24 px
     oben und 8 px unten, in denen nichts steht.

     Das "!important" ist noetig, weil das Thema den Wert ueber die
     Klasse has-global-padding und eigene Variablen setzt. */
  .wp-block-group.alignfull:has(> header.wp-block-group.alignwide) {
    padding-inline: 14px !important;
    padding-block: 10px !important;
  }

  /* Der Schliessen-Knopf im geoeffneten Menue hat dasselbe Problem. */
  .wp-block-navigation__responsive-container-close {
    padding: 12px;
    margin: -12px;
    box-sizing: content-box;
  }

  /* Die Menuepunkte im geoeffneten Menue: grosszuegige Zeilen statt enger
     Textlinks. */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    display: block;
    padding: 12px 0;
    min-height: 44px;
  }
}


/* ---------------------------------------------------------------------------
 * 3. Seitlicher Ueberlauf
 *
 * Gemessen: Die Datenschutzseite lief bei 390 px um 543 px ueber, also um mehr
 * als eine ganze Bildschirmbreite. Verursacher waren 15 Absaetze mit
 * ausgeschriebenen Internetadressen, die nicht umbrechen konnten
 * ("overflow-wrap: normal"). Die laengste war 59 Zeichen lang.
 *
 * "break-word" reicht dafuer nicht zuverlaessig: es bricht ein Wort nur dann
 * um, wenn es allein in einer Zeile immer noch nicht passt. "anywhere" darf
 * dagegen auch mitten im Wort umbrechen und bezieht den Umbruch in die
 * Breitenberechnung ein. Nur damit verschwindet der Ueberlauf sicher.
 *
 * Die Regel gilt nur mobil, weil auf dem Desktop dieselben Adressen dank der
 * breiteren Spalte nicht ueberlaufen und der Umbruch dort nichts zu suchen hat.
 * ------------------------------------------------------------------------ */

@media (max-width: 781px) {
  main p,
  main li,
  main dd,
  main h1,
  main h2,
  main h3,
  main h4 {
    overflow-wrap: anywhere;
    /* Silbentrennung nach deutschen Regeln, das Dokument ist lang und die
       Woerter sind es auch ("Wiedererkennungstechnologien",
       "Datenverarbeitungsvorgaenge"). Ohne Trennung reisst "anywhere" die
       Woerter an beliebiger Stelle auseinander. */
    hyphens: auto;
  }

  /* KEIN "overflow-x: hidden" hier. Das war der erste Versuch und er war
     falsch: es versteckt den Ueberlauf, statt ihn zu beheben, und die Messung
     meldet danach 0 px, waehrend in Wahrheit der Kopfzeilenknopf rechts aus
     dem Bild ragte. Ein Sicherheitsnetz, das die Anzeige der Gefahr abschaltet,
     ist keins. Ueberlauf muss an der Ursache geloest werden. */
}


/* ---------------------------------------------------------------------------
 * 4. Schriftgroesse im Fliesstext
 *
 * Gemessen: 239 Textstellen unter 16 px auf der Datenschutzseite, 34 auf
 * stromspeicher-bess, 25 auf karriere. Ursache ist eine einzige Regel:
 *   body { font-size: clamp(14px, -0.5728px + 0.875rem + 0.179vw, 16px) }
 * Auf dem Desktop erreicht sie ihre 16 px, auf dem Handy faellt sie auf 14.
 * Ausgerechnet dort, wo der Bildschirm klein und der Leseabstand groesser ist,
 * wird die Schrift also kleiner.
 *
 * Angehoben wird nur die Untergrenze. Der obere Wert bleibt bei 16 px, der
 * Desktop aendert sich dadurch nicht.
 * ------------------------------------------------------------------------ */

@media (max-width: 781px) {
  body {
    font-size: 16px;
    line-height: 1.7;
  }

  /* Die Regel oben allein reicht nicht. 96 Absaetze tragen die Groesse als
     Inline-Stil ("style=font-size:clamp(14px, ...)"), und ein Inline-Stil
     schlaegt jede Regel aus einer Datei. Nur "!important" kommt dagegen an.
     Getroffen werden gezielt die beiden Untergrenzen, die unter 16 px liegen:
     clamp(14px, ...) kommt 96 mal vor, clamp(15.747px, ...) 29 mal. Groessere
     Untergrenzen bleiben unangetastet, Ueberschriften also auch. */
  p[style*="clamp(14px"],
  p[style*="clamp(15."],
  li[style*="clamp(14px"] {
    font-size: 16px !important;
  }

  /* Dieselbe Groesse fuer die Absaetze, die ueber eine Themenklasse bei 14 px
     landen. Auch hier "!important": ein erster Versuch ohne war wirkungslos,
     weil dieselben Absaetze zusaetzlich einen Inline-Stil tragen. */
  p.has-open-sans-font-family,
  p.is-service-description,
  p.has-theme-3-color {
    font-size: 16px !important;
  }
}


/* ---------------------------------------------------------------------------
 * 5. Zentrierter Fliesstext
 *
 * Die gesamte Datenschutzerklaerung ist zentriert gesetzt. Auf dem Desktop ist
 * das eine Geschmacksfrage, auf einem 390 px breiten Bildschirm ist es keine:
 * bei zentriertem Satz beginnt jede Zeile woanders, und das Auge verliert beim
 * Zeilenwechsel den Anschluss. Bei einem Text dieser Laenge ist das der
 * Unterschied zwischen lesbar und unlesbar.
 *
 * Ueberschriften bleiben zentriert, nur der Fliesstext wird linksbuendig.
 * ------------------------------------------------------------------------ */

@media (max-width: 781px) {
  main p.has-text-align-center {
    text-align: left;
  }

  /* Ausgenommen: kurze Absaetze, die als Auszeichnung gemeint sind, etwa die
     Quellenangabe am Ende. Die erkennt man an der Schriftgroessenklasse. */
  main p.has-text-align-center.has-large-font-size,
  main p.has-text-align-center.has-medium-font-size {
    text-align: center;
  }
}


/* ---------------------------------------------------------------------------
 * 6. Kontrast
 *
 * Gemessen auf der Karriereseite: Drei Absaetze im Testimonial-Karussell stehen
 * in #bbb auf weiss. Das ergibt ein Kontrastverhaeltnis von 1,92 zu 1, WCAG
 * verlangt 4,5 zu 1. Bei 18 px Schrift ist dieser Text auf einem Handy im
 * Freien nicht mehr lesbar.
 *
 * Diese Regel gilt bewusst AUCH auf dem Desktop, denn dort ist der Text
 * genauso schwer lesbar. Das ist die einzige Stelle, an der die
 * Pixelgleichheit bewusst aufgegeben wird. Wer sie zurueckhaben will, loescht
 * diesen Block; die Zeilen stehen deshalb zusammen und nicht verstreut.
 *
 * Gewaehlt ist #6a6a6a. Ein erster Versuch mit #767676 reichte nicht: er
 * erreicht auf WEISS zwar 4,54 zu 1, aber ein Teil dieser Texte steht auf dem
 * hellgrauen Abschnittshintergrund #eee, und dort kam er nur auf 3,91 zu 1.
 * #6a6a6a schafft 5,0 zu 1 auf Weiss und 4,53 zu 1 auf #eee, also beides.
 *
 * Das "!important" ist nicht Bequemlichkeit, sondern Notwendigkeit: das Thema
 * schreibt die Farbe selbst mit "!important"
 * (.has-theme-3-color{color:var(--wp--preset--color--theme-3) !important}).
 * Ohne Gegengewicht bleibt die Regel wirkungslos, gemessen im ersten Anlauf.
 * ------------------------------------------------------------------------ */

.has-theme-3-color,
.has-theme-3-color.has-text-color {
  color: #6a6a6a !important;
}

/* Auf dunklem Grund war #bbb richtig und bleibt es. Die Ausnahme wird eng
   gefasst: ein erster Versuch mit [class*="has-background"] traf so gut wie
   jeden Abschnitt und hob die Korrektur wieder auf. */
.has-black-background-color .has-theme-3-color,
.has-theme-5-background-color .has-theme-3-color,
.has-theme-4-background-color .has-theme-3-color {
  color: #bbb !important;
}

/* Die Beschreibungstexte der Leistungskacheln standen in #979797 (2,92 zu 1)
   und #7c7c7c (4,17 zu 1), beide unter dem Soll. */
.is-service-description,
p.is-service-description {
  color: #6a6a6a !important;
}


/* ---------------------------------------------------------------------------
 * 7. Fussleiste
 *
 * Gemessen: die sieben Navigationslinks der Fussleiste sind 20 px hoch und
 * stehen dicht untereinander. Auf dem Handy trifft man damit regelmaessig den
 * Nachbarn statt des gewuenschten Ziels.
 * ------------------------------------------------------------------------ */

/* Die Links der Fussleiste tragen KEINE Klasse, sie stehen schlicht als <a> in
   einem <p>. Ein erster Versuch mit den Blocknavigationsklassen des Themas
   griff deshalb ins Leere, gemessen: die Links blieben 20 px hoch. */
@media (max-width: 781px) {
  footer p > a,
  footer li > a {
    display: inline-block;
    padding: 11px 0;
    min-height: 44px;
    line-height: 22px;
  }

  /* Der Widerrufslink fuer die Videoeinwilligung steht in derselben Liste und
     bekommt dieselbe Trefflaeche. */
  .klon-video-widerruf {
    display: inline-block;
    padding: 11px 0;
    min-height: 44px;
    line-height: 22px;
  }
}


/* ---------------------------------------------------------------------------
 * 8. Formulare
 *
 * Die Eingabefelder setzen bereits 16 px Schrift, loesen also KEINEN
 * ungewollten Zoom in iOS Safari aus. Das war eine Sorge, die sich in der
 * Messung nicht bestaetigt hat.
 *
 * Offen blieb die Hoehe: Felder 41 px, Absendeknopf 40 px, beide unter den
 * empfohlenen 44 px.
 * ------------------------------------------------------------------------ */

@media (max-width: 781px) {
  /* Forminator setzt selbst "min-height: unset" ueber einen sehr spezifischen
     Selektor (.forminator-ui.forminator-custom-form[data-design=default] ...).
     Ein einfacher Selektor verliert dagegen; gemessen blieben die Felder bei
     41 px. Deshalb "!important". */
  .forminator-ui .forminator-input,
  .forminator-ui .forminator-textarea,
  .forminator-ui select {
    min-height: 48px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .forminator-ui .forminator-textarea {
    min-height: 120px !important;
  }

  .forminator-ui .forminator-button-submit {
    min-height: 52px;
    width: 100%;
    font-size: 16px;
  }

  /* Das Einwilligungskaestchen wird von Forminator versteckt und durch ein
     gestaltetes Ersatzelement dargestellt. Das Ersatzelement ist das, was der
     Daumen trifft, also muss es gross genug sein. */
  .forminator-ui .forminator-checkbox {
    min-height: 44px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .forminator-ui .forminator-checkbox-box {
    width: 24px;
    height: 24px;
    flex: none;
  }

  /* Beschriftung und Feld standen 0 px auseinander. */
  .forminator-ui .forminator-label {
    margin-bottom: 6px;
    display: block;
  }
}


/* ---------------------------------------------------------------------------
 * 9. Layoutsprung auf der Kontaktseite
 *
 * Gemessen: CLS 0,179 bei 390 px, gut waere unter 0,1. Ein einziger Sprung mit
 * dem Wert 0,169. Ursache: Forminator laedt das Formular erst zur Laufzeit
 * nach. Vorher steht dort eine leere Huelle, danach schiebt das fertige
 * Formular alles darunter nach unten, sichtbar an der Fussleiste.
 *
 * Der Platz wird deshalb von Anfang an reserviert. Der Wert stammt aus der
 * Messung des fertig geladenen Formulars bei 390 px Breite.
 *
 * Nicht gewaehlt wurde der naheliegende Weg, das Formularmarkup direkt in die
 * Seite zu schreiben: Forminator initialisiert sich dann nicht und die
 * Pflichtfeldpruefung ist tot. Das ist in diesem Projekt schon einmal
 * passiert, siehe tools/formulare-einfrieren.py.
 * ------------------------------------------------------------------------ */

@media (max-width: 781px) {
  .forminator-ui[data-forminator-render],
  .forminator-custom-form {
    min-height: 640px;
  }
}


/* ---------------------------------------------------------------------------
 * 10. Antippbare Telefonnummer und E-Mail
 *
 * Die Nummer stand als reiner Text in der Fussleiste jeder Seite. Auf einem
 * Handy ist eine Rufnummer, die man nicht antippen kann, ein verschenkter
 * Anruf. tools/optimieren.py macht Links daraus, hier bekommen sie eine
 * Trefflaeche und bleiben optisch unauffaellig.
 * ------------------------------------------------------------------------ */

.klon-kontaktlink {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 781px) {
  .klon-kontaktlink {
    display: inline-block;
    padding: 10px 0;
    min-height: 44px;
    line-height: 24px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  /* Telefon und E-Mail stehen auf der Kontaktseite direkt untereinander und
     beruehrten sich dadurch auf den Pixel genau. Wer die Nummer antippen will,
     erwischt die Mailadresse. Ein Zeilenabstand loest das. */
  .klon-kontaktlink + br + .klon-kontaktlink,
  p:has(> .klon-kontaktlink + br) {
    margin-bottom: 0;
  }

  p .klon-kontaktlink {
    margin-block: 4px;
  }
}


/* ---------------------------------------------------------------------------
 * 11. Restlicher Ueberlauf auf der Karriereseite
 *
 * Gemessen: 10 px Ueberlauf am Dokument, verursacht von sechs FAQ-Spalten mit
 * je 34 px Ueberbreite und einer Stellenanzeigen-Gruppe mit 11 px.
 * ------------------------------------------------------------------------ */

@media (max-width: 781px) {
  main .wp-block-columns,
  main .wp-block-column {
    max-width: 100%;
    min-width: 0;
  }

  main .wp-block-group.has-background {
    max-width: 100%;
  }

  /* Die eigentliche Ursache: die Schaltflaechen der FAQ-Elemente rechnen im
     alten Kastenmodell (box-sizing: content-box). Ihre Breite von 308,9 px
     versteht der Browser als Breite OHNE die 32 px Innenabstand je Seite, also
     werden sie 373 px breit und sprengen die 343 px schmale Spalte. Der
     Ueberlauf war deshalb konstant 31 bis 39 px, unabhaengig von der
     Bildschirmbreite; genau daran war zu erkennen, dass es kein Textproblem ist. */
  /* Der Selektor kommt OHNE "main" aus: die FAQ-Elemente liegen ausserhalb
     des main-Bereichs, ein erster Versuch mit "main a.button" traf deshalb
     nichts. "!important" ist noetig, weil das Plugin die Breite selbst setzt. */
  a.button {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* ---------------------------------------------------------------------------
 * 12. Bilder
 *
 * Kein gemessener Mangel, aber ein billiges Sicherheitsnetz: kein Bild darf
 * breiter werden als sein Platz.
 * ------------------------------------------------------------------------ */

@media (max-width: 781px) {
  main img,
  main video,
  main iframe {
    max-width: 100%;
    height: auto;
  }
}


/* ---------------------------------------------------------------------------
 * 13. Videos
 *
 * Die Videos liegen seit dem Umbau lokal und laufen als gewoehnliches
 * <video>-Element. Zuvor stand hier eine Zwei-Klick-Loesung mit Hinweistext,
 * rechtlich noetig, solange Wistia beim Seitenaufruf Daten in die USA schickte.
 * Mit eigenem Hosting entfaellt der Grund und damit die Textwand vor dem Film.
 *
 * "preload=metadata" steht am Element selbst: ohne das laedt die Startseite
 * ungefragt rund 70 MB mit.
 * ------------------------------------------------------------------------ */

video.klon-video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  border-radius: 6px;
}