/* Impuls+ Webseite, Stil.
   Drei Teile: der globale Block aus dem Entwurf, die Bausteine (Kopf, Aufruf,
   Fuss) und die Bruchstellen. Der Entwurf hatte keine einzige Layout-Bruchstelle,
   sein Layout haengt an clamp() und flex-wrap. Was hier an @media steht, ist
   darum neu und nicht aus v6 uebernommen.

   Tasks A2 und A4 des Plans 00-System/plans/2026-08-19-webseite-bau.md
   Regeln: _vorlagen/compile-regeln.md */

/* ================= Global, aus dem helmet-Block von v6 ================= */

html { scroll-behavior: smooth; --ip-kopf: 75px; }

body {
  margin: 0;
  background: #FFFFFF;
  color: #000000;
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #000000; text-decoration: none; }
a:hover { color: #2B0AFF; }
button { font-family: 'Poppins', sans-serif; }
input { font-family: 'Poppins', sans-serif; }
::selection { background: #2B0AFF; color: #FFFFFF; }
button, a, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

@keyframes ipUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes ipFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ipMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Sprungmarke fuer die Tastatur, sichtbar erst beim Fokus */
[data-skip] {
  position: fixed; top: -64px; left: 16px; z-index: 100;
  background: #2B0AFF; color: #FFFFFF;
  font-size: 14px; font-weight: 600; padding: 12px 20px;
  transition: top 0.15s linear;
}
[data-skip]:focus { top: 12px; }

:focus-visible { outline: 2px solid #2B0AFF; outline-offset: 2px; }
[data-fokus-hell] :focus-visible, [data-fokus-hell]:focus-visible { outline-color: #FFFFFF; }

details > summary { transition: background-color 0.2s linear; }
details > summary > img { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
details > summary:not(:has(> h3))::after {
  content: '+'; font-size: 17px; font-weight: 600; line-height: 1; flex: none;
  transform: rotate(var(--ip-dreh, 0deg));
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}

/* ================= Bausteine ================= */

/* Umschaltung mobil zu desktop.
   Bruchstelle 1249, gemessen am 2026-09-21: der Kopfinhalt braucht 1249 px
   (Leistungen 495 + Logo 158 + Hauptnavigation 476 + 2 Abstaende a 28 +
   Innenabstand 64). Der Entwurf setzte 1120, seit der Umbenennung von
   Junge Pioniere auf Persoenlichkeiten lief der Termin-Knopf darunter aus
   dem Rahmen. Wer diese Zahl senkt, holt den Ueberlauf zurueck.
   Beide Fassungen stehen im HTML, umgeschaltet wird per @media, nie per JavaScript. */
@media (max-width: 1249px) {
  [data-nur="desktop"] { display: none !important; }
}
@media (min-width: 1250px) {
  [data-nur="mobil"] { display: none !important; }
}

/* Mobilmenue: zu, bis seite.js die Klasse setzt */
[data-mobilmenue] { display: none; }
body.menue-offen [data-mobilmenue] { display: flex; animation: ipFade 0.2s linear both; }
body.menue-offen { overflow: hidden; }

/* Navigation: der Unterstrich faehrt bei Hover aus und bleibt auf der aktiven Seite stehen.
   Im Entwurf machten das die Handler navEnter, navLeave und navAktivMarkieren.

   !important, weil der Entwurf transform:scaleX(0) inline setzt. Ohne das
   passiert beim Ueberfahren gar nichts, und der Aktiv-Zustand bleibt auf allen
   22 Unterseiten unsichtbar, obwohl aria-current gesetzt ist.
   Der Ursprung wechselt wie im Entwurf (navEnter links, navLeave rechts): der
   Strich waechst von links heraus und schrumpft nach rechts weg. */
[data-nav-id] [data-nav-line] { transform-origin: right !important; }
[data-nav-id]:hover [data-nav-line],
[data-nav-id][aria-current="page"] [data-nav-line] {
  transform-origin: left !important;
  transform: scaleX(1) !important;
}

/* Hover-Zustaende. Im Entwurf als style-hover notiert und dort wirkungslos,
   der Effekt entsteht erst durch diese Regeln. */
/* Auch hier !important, aus demselben Grund: die Ruhefarbe steht inline.
   Der Zustand haengt am Verweis, nicht am gefaerbten Element selbst, darum
   zusaetzlich die a:hover-Fassung fuer Marken, die in einem Verweis liegen. */
[data-hover="kopf-termin"]:hover { background: #2B0AFF !important; border-color: #2B0AFF !important; color: #FFFFFF !important; }
[data-hover="primaer"]:hover { background: #1A06A8 !important; border-color: #1A06A8 !important; color: #FFFFFF !important; }
[data-hover="schwarz"]:hover, a:hover > [data-hover="schwarz"] { background: #000000 !important; color: #FFFFFF !important; }
[data-hover="blau"]:hover, a:hover [data-hover="blau"] { background: #2B0AFF !important; color: #FFFFFF !important; }
[data-hover="weiss"]:hover { color: #FFFFFF !important; }
[data-hover="ig"]:hover { color: #1A06A8 !important; }
/* E-Mail und LinkedIn auf den Team-Kacheln: blaue Flaeche, beim Ueberfahren
   eine Stufe tiefer. */
[data-hover="tiefblau"]:hover { background: #1F07C4 !important; }
/* Der zweite Knopf im Abschnitt Zusammenarbeit der 3 Bereichsseiten: heller
   Umriss auf Schwarz, beim Ueberfahren fuellt er sich leicht. */
[data-hover="hell"]:hover { background: rgba(255,255,255,0.12) !important; color: #FFFFFF !important; }
/* Der zweite Verweis im Aufruf-Block steht auf Schwarz, dort ist Blau der
   Hover. Die globale a:hover-Regel verliert gegen die Inline-Farbe. */
#sec-cta a:hover { color: #2B0AFF !important; }
#sec-cta a[data-hover]:hover { color: #FFFFFF !important; }

/* Aufzaehlungspunkt in den Leistungs-Kacheln. Der Entwurf notiert ihn als
   style-before, ein Attribut, das kein Browser kennt: die Punkte waeren
   unsichtbar geblieben und die Zeilen haetten 20 px Einzug ins Leere
   gehabt. Das Plus-Zeichen ist hier Aufzaehlungszeichen, darum als
   Hintergrund und nicht als Bild im Text. */
[data-punkt]::before {
  content: ''; position: absolute; left: 0; top: 0.4em;
  width: 10px; height: 10px;
  background: url('/bilder/marke/plus-blau.png') center/contain no-repeat;
}

/* ================= Kacheln ================= */

/* Im Entwurf setzten tileEnter und tileLeave diese Werte als Inline-Stil.
   Kachel-Schleier steht auf nur-hover, Hover-Effekte auf lebendig.

   WARUM UEBERALL !important: der Entwurf schreibt die Ruhewerte inline
   (max-height:0, opacity:0, flex:1 1 280px). Ein Inline-Stil schlaegt jede
   Regel aus einer Datei, egal wie eng der Selektor ist. Ohne !important
   passiert beim Ueberfahren gar nichts. Das ist keine Nachlaessigkeit, es ist
   der Preis dafuer, dass das Markup des Entwurfs 1:1 uebernommen wird. */

a:hover [data-timg],
[data-kachel]:hover [data-timg] { transform: scale(1.04) !important; }

/* Die Kachel waechst und schiebt die Nachbarn zur Seite. */
a[data-grow]:hover { flex-grow: 1.25 !important; }

/* Der Text, der beim Ueberfahren aufklappt, und die Beschriftung der Pille.
   Der Entwurf mass das Mass in JavaScript (scrollHeight bzw. scrollWidth) und
   liess die Bewegung genau bis dorthin laufen.

   Eine feste Obergrenze trifft das nicht. Gemessen sind 118 px Text und 85 px
   Pille, ein Deckel von 16em waeren 256 px, mehr als das Doppelte. Weil die
   Beschleunigung stark ausklingt, waere die Bewegung nach rund 0.07 statt
   0.5 Sekunden am Ziel: der Text springt auf, statt aufzuklappen.

   Darum setzt seite.js beim Laden das echte Mass als --ip-auf je Element, genau
   wie der Entwurf. Der Deckel bleibt als Rueckfall stehen, wenn kein JavaScript
   laeuft: dann klappt es zu schnell auf, aber es klappt auf und nichts fehlt.
   (Ein Raster von 0fr auf 1fr waere der Weg ohne JavaScript, hier traegt er
   nicht: Polsterung und Linie im Kind lassen sich nicht auf 0 schrumpfen, das
   Element behielte 17 px Resthoehe.) */
a:hover [data-tmore],
[data-kachel]:hover [data-tmore] { max-height: var(--ip-auf, 16em) !important; opacity: 1 !important; }

/* Die Beschriftung der Pille, die beim Ueberfahren aufgeht */
a:hover [data-wide],
[data-kachel]:hover [data-wide] { max-width: var(--ip-auf, 16ch) !important; opacity: 1 !important; }

/* Auf Touch gibt es kein Ueberfahren, dort steht alles offen. */
@media (hover: none) {
  [data-tmore] { max-height: none !important; opacity: 1 !important; }
  [data-wide] { max-width: var(--ip-auf, 16ch) !important; opacity: 1 !important; }
}

/* Eine einzelne Beitrags-Karte. Der Entwurf zeigt in dieser Reihe 3 Karten,
   je Bereich gibt es heute weniger echte Beitraege. Ohne diese Regel zieht die
   eine Karte auf die volle Breite und wirkt wie ein zweites Hero, dabei ist sie
   ein Teaser. Sobald 3 Beitraege da sind, greift :only-child nicht mehr und die
   Regel verschwindet von selbst. */
@media (min-width: 768px) {
  [data-teaser-reihe] > a:only-child { max-width: calc(33.333% - 7px); }
}

/* ================= Projektorte auf /work/ ================= */

/* Werte 1:1 aus work-karte.html des Entwurfs. Was dort im eingebetteten Fenster
   stand, steht hier direkt in der Seite: das Fenster war eine Kruecke des
   Entwurfs-Werkzeugs (es meldete seine Hoehe per postMessage nach oben) und
   haette die Karte aus dem Dokument genommen.

   Der Zustand haengt an data-ort am Container. Fehlt das Attribut, sind alle
   Orte mit allen Projekten sichtbar: so laedt die Seite, und so bleibt sie
   ohne JavaScript. seite.js setzt beim Start data-ort="" und stellt damit den
   Ausgangszustand des Entwurfs her (Legende plus Hinweis). */

[data-ortskarte] {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 24px;
}

[data-karte-flaeche] {
  flex: 1 1 380px;
  min-width: 0;
  align-self: flex-start;
  position: relative;
}

[data-karte-flaeche] svg { display: block; width: 100%; height: auto; }

[data-pins] { position: absolute; inset: 0; pointer-events: none; }

/* Der Entwurf gibt dem Pin 0 mal 0 und laesst nur das 14-Pixel-Bild treffbar.
   Hier liegt eine unsichtbare Flaeche um den Punkt, Bild und Name haengen an
   deren Mitte statt am nackten Punkt.

   20 und nicht die ueblichen 44: die Marken haengen an Prozentwerten und ruecken
   auf schmalen Schirmen zusammen, groessere Flaechen wuerden sich dort
   ueberlappen und ein Klick traefe den falschen Ort. Der Richtwert 44 gilt dem
   Finger, und am Handy gibt es diese Karte nicht (siehe unten). Wie eng die
   Orte stehen duerfen, rechnet _skripte/karte-geometrie.js bei jedem Lauf nach. */
[data-pin] {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  pointer-events: auto;
  cursor: pointer;
}

[data-pin] img {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: auto;
  transform: translate(-50%, -50%);
  filter: brightness(0);
}

/* Der Sitz ist groesser und behaelt sein Blau, die Projektorte sind schwarz
   und werden blau, sobald ihr Ort gewaehlt ist. Genau die Unterscheidung, die
   die Legende daneben erklaert. */
[data-pin="flawil"] img { width: 20px; filter: none; }
[data-ortskarte][data-ort="uzwil"]   [data-pin="uzwil"] img,
[data-ortskarte][data-ort="wattwil"] [data-pin="wattwil"] img,
[data-ortskarte][data-ort="zuerich"] [data-pin="zuerich"] img,
[data-ortskarte][data-ort="luzern"]  [data-pin="luzern"] img,
[data-ortskarte][data-ort="st-gallen"] [data-pin="st-gallen"] img,
[data-ortskarte][data-ort="aadorf"]    [data-pin="aadorf"] img,
[data-ortskarte][data-ort="allschwil"] [data-pin="allschwil"] img,
[data-ortskarte][data-ort="bern"]      [data-pin="bern"] img { filter: none; }

[data-pin] span {
  position: absolute;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 500;
  color: #333333;
  transition: color 0.15s linear;
}

[data-pin]:hover span { color: #2B0AFF; }
[data-ortskarte][data-ort="uzwil"]   [data-pin="uzwil"] span,
[data-ortskarte][data-ort="wattwil"] [data-pin="wattwil"] span,
[data-ortskarte][data-ort="zuerich"] [data-pin="zuerich"] span,
[data-ortskarte][data-ort="luzern"]  [data-pin="luzern"] span,
[data-ortskarte][data-ort="st-gallen"] [data-pin="st-gallen"] span,
[data-ortskarte][data-ort="aadorf"]    [data-pin="aadorf"] span,
[data-ortskarte][data-ort="allschwil"] [data-pin="allschwil"] span,
[data-ortskarte][data-ort="bern"]      [data-pin="bern"] span,
[data-ortskarte][data-ort="flawil"]  [data-pin="flawil"] span { color: #2B0AFF; font-weight: 700; }

/* Der Abstand des Namens zur Marke: halbe Marke plus 7, wie im Entwurf
   gerechnet. Der Sitz ist 20 breit, die uebrigen 14. */
[data-pin][data-anker="rechts"] span { left: calc(50% + 14px);  top: 50%; transform: translateY(-50%); }
[data-pin][data-anker="links"]  span { right: calc(50% + 14px); top: 50%; transform: translateY(-50%); }
[data-pin][data-anker="oben"]   span { left: 50%; bottom: calc(50% + 14px); transform: translateX(-50%); }
[data-pin][data-anker="unten"]  span { left: 50%; top: calc(50% + 14px);    transform: translateX(-50%); }
/* Der Sitz traegt die groessere Marke, sein Name rueckt entsprechend weiter weg. */
[data-pin="flawil"][data-anker="rechts"] span { left: calc(50% + 17px); }
[data-pin="flawil"][data-anker="links"]  span { right: calc(50% + 17px); }

[data-ort-panel] {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  padding: 22px 0;
}

[data-ort-legende] { display: flex; flex-direction: column; gap: 10px; }
[data-ort-legende] span { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #333333; }
[data-ort-legende] img { width: 13px; height: auto; display: block; flex: none; }
[data-ort-legende] img[data-schwarz] { filter: brightness(0); }

[data-ort-hinweis] {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #333333;
  max-width: 32ch;
}
/* Der Hinweis gilt nur, solange die Karte anklickbar ist. Ohne JavaScript
   stehen die Orte ohnehin alle da, dann waere er eine Luege. */
[data-ort-hinweis] { display: none; }
[data-ortskarte][data-ort] [data-ort-hinweis] { display: block; }
[data-ortskarte][data-ort]:not([data-ort=""]) [data-ort-hinweis] { display: none; }

[data-ortsliste] h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 0;
  padding-bottom: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

[data-ort-zurueck] {
  background: none;
  border: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #2B0AFF;
  cursor: pointer;
  /* Der Ruecksprung ergibt nur Sinn, wenn ein Ort gewaehlt ist. Ohne
     JavaScript gibt es keinen gewaehlten Ort, also auch keinen Knopf. */
  display: none;
}
[data-ort-zurueck]:hover { color: #1A06A8; }
[data-ortskarte][data-ort]:not([data-ort=""]) [data-ort-zurueck] { display: inline-block; }

[data-ortsliste] > a,
[data-ort-sitz] {
  display: block;
  padding: 14px 0;
  border-top: 1px solid #C9CDDA;
  color: #000000;
  transition: padding-left 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-ortsliste] > a:last-child,
[data-ort-sitz]:last-child { border-bottom: 1px solid #C9CDDA; }
[data-ortsliste] > a:hover { padding-left: 6px; }

[data-ortsliste] > a > span:first-child,
[data-ort-sitz] > span:first-child {
  display: block;
  font-size: 15px;
  font-weight: 600;
  transition: color 0.15s linear;
}
[data-ortsliste] > a:hover > span:first-child { color: #2B0AFF; }

/* Derselbe eckige Tag wie auf den Projektkacheln darueber (Fabiano, 2026-08-23),
   Werte eins zu eins von dort: Rahmen, 10 Pixel, 2 mal 7 Innenabstand. Vorher
   stand hier blauer Text ohne Rahmen und die Karte las sich wie ein fremdes
   Element auf derselben Seite. */
[data-ortsliste] > a > span:last-child,
[data-ort-sitz] > span:last-child {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 2px 7px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #000000;
}

/* Ist ein Ort gewaehlt, bleibt nur seine Liste stehen. Beide Regeln bewusst
   gleich stark (je drei Attribute), damit die Reihenfolge entscheidet und die
   Zeigen-Regel gewinnt. Mit einem :not() waere die Versteck-Regel staerker und
   das Panel bliebe leer, gemessen am 2026-08-23. */
[data-ortskarte][data-ort] [data-ortsliste] { display: none; }
[data-ortskarte][data-ort="flawil"]  [data-ortsliste="flawil"],
[data-ortskarte][data-ort="uzwil"]   [data-ortsliste="uzwil"],
[data-ortskarte][data-ort="wattwil"] [data-ortsliste="wattwil"],
[data-ortskarte][data-ort="zuerich"] [data-ortsliste="zuerich"],
[data-ortskarte][data-ort="luzern"]  [data-ortsliste="luzern"],
[data-ortskarte][data-ort="st-gallen"] [data-ortsliste="st-gallen"],
[data-ortskarte][data-ort="aadorf"]    [data-ortsliste="aadorf"],
[data-ortskarte][data-ort="allschwil"] [data-ortsliste="allschwil"],
[data-ortskarte][data-ort="bern"]      [data-ortsliste="bern"] { display: block; }
/* Neuer Ort in daten/orte.json: hier und oben bei img und span je eine Zeile,
   sonst zeigt die Karte beim Klick keine Projekte (gefunden 2026-09-15). */
[data-ortskarte][data-ort]:not([data-ort=""]) [data-ortsliste] h3 { margin-top: 26px; }

/* ================= Bereichs-Filter auf /work/ und /impulse/ ================= */

/* Im Entwurf rechnete der Zustand die Farbe jedes Knopfes und baute den
   Kartensatz neu. Hier stehen alle Karten im HTML, jede traegt ihren Bereich,
   und seite.js setzt nur data-zeigt am Kartensatz. Ohne JavaScript fehlt das
   Attribut, also ist alles sichtbar und keine Referenz geht verloren. */
[data-filterleiste] button[aria-pressed="true"] {
  /* !important, weil jeder Knopf seine Ruhefarbe inline traegt (background:#FFFFFF,
     color:#000000 aus dem Entwurf). Ohne das gewinnt der Inline-Stil und der
     gewaehlte Filter bleibt unsichtbar, gemessen am 2026-08-23. Gleiche Lage wie
     bei der Ausblende-Regel darunter. */
  background: #2B0AFF !important;
  border-color: #2B0AFF !important;
  color: #FFFFFF !important;
}

[data-karten][data-zeigt="gt"] > a:not([data-bereich="gt"]),
[data-karten][data-zeigt="db"] > a:not([data-bereich="db"]),
[data-karten][data-zeigt="dt"] > a:not([data-bereich="dt"]),
[data-karten][data-zeigt="in"] > a:not([data-bereich="in"]) {
  /* !important, weil jede Karte ihr display inline traegt (display:flex bei den
     Projekten, display:block bei den Beitraegen). Ohne das gewinnt der Inline-Stil
     und der Filter bliebe wirkungslos, wie beim ersten Lauf gemessen. */
  display: none !important;
}

/* Die Projektkarte auf /work/. Am Handy schrumpft das SVG auf 343 Punkte, damit
   fallen die Ortspunkte unter jede brauchbare Tippflaeche. Statt die
   Trefferflaechen aufzublasen, bis sie sich gegenseitig ueberlappen (Flawil und
   Uzwil stehen dort nur rund 20 Punkte auseinander), faellt die Karte weg.

   Weg faellt aber nur die Flaeche mit den Punkten, nicht das Panel: dort stehen
   die Orte mit ihren Projekten, und die sind mit dem Finger bedienbar. Ohne
   Karte gibt es nichts anzuklicken, also stehen alle Orte offen und Legende,
   Hinweis und Ruecksprung fallen mit weg. Element weglassen statt zufuegen. */
/* Zwischen 768 und 1024 steht das Panel unter der Karte statt daneben. Sonst
   bleiben der Karte dort nur rund 400 Punkte, und bei dieser Breite ruecken
   Flawil und Uzwil so nah zusammen, dass sich ihre Marken beruehren. */
@media (max-width: 1024px) {
  [data-ortskarte] { flex-direction: column; gap: 18px; }
  [data-karte-flaeche] { flex: none; width: 100%; align-self: auto; }
  [data-ort-panel] { flex: none; width: 100%; }
}

@media (max-width: 767px) {
  [data-karte-flaeche] { display: none; }
  [data-ort-panel] { flex: none; width: 100%; padding-top: 0; }
  [data-ort-legende],
  [data-ort-hinweis],
  [data-ort-zurueck] { display: none !important; }
  [data-ortskarte][data-ort] [data-ortsliste] { display: block; }
  [data-ortsliste]:first-of-type h3 { margin-top: 0; }
}

/* ================= Einblenden beim Scrollen ================= */

/* seite.js setzt html.js und dann data-sichtbar, sobald der Abschnitt in den
   Blick kommt. Ohne JavaScript steht alles sichtbar da, der Inhalt haengt nie
   am Skript. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(24px);
    transition: opacity 0.6s linear, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
  html.js [data-reveal][data-sichtbar] { opacity: 1; transform: none; }
}

/* ================= Bruchstellen ================= */

/* Bis 600: eine Spalte. Das Layout des Entwurfs wickelt sich ueber flex-wrap
   von selbst um, hier stehen nur die Stellen, an denen das nicht reicht. */
@media (max-width: 600px) {
  html { --ip-kopf: 68px; }

  /* Die Ueberschrift der Startseite. Der Entwurf deckelt sie bei 38 px nach
     unten, und "Gebaeudetechnikplanung" ist bei 38 px breiter als ein Handy.
     Das war der einzige Grund fuer waagrechtes Scrollen bei 375 px, gemessen
     101 px Ueberhang. !important, weil der Entwurf die Groesse inline setzt.

     .bk-titel ist ausgenommen. Der Trichter kommt nicht aus dem Entwurf, seine
     Ueberschrift ist ueber eine Klasse gesetzt und laeuft am Handy sauber.
     Seit /booking/ mit B4 auch seite.css laedt, hob diese Regel sie dort von
     26 auf 27.75 Punkte, gemessen am 2026-08-26. Kleine Zahl, aber eine
     ungewollte Aenderung an einer abgenommenen Oberflaeche. */
  h1:not(.bk-titel) { font-size: clamp(26px, 7.4vw, 34px) !important; letter-spacing: -1px !important; }

  /* Kacheln nehmen die volle Breite, das Wachsen beim Ueberfahren entfaellt. */
  [data-grow]:hover { flex-grow: 1; }
}

/* Tippflaechen auf Touch. Der Entwurf gibt nur den Knoepfen 44 px Hoehe, die
   Textverweise im Fuss, im Aufruf-Block und die "Alle ..."-Zeilen bleiben bei
   20 bis 21 px. Am Bildschirm mit Maus stoert das nicht, am Finger schon.
   Darum nur auf Touch: mehr Polsterung, dafuer kein Abstand im Container, die
   Zeilenhoehe bleibt damit fast gleich. */
@media (hover: none) {
  footer a, #sec-cta a[href^="tel:"], #sec-cta a[href^="mailto:"] {
    padding-top: 12px; padding-bottom: 12px;
  }
  footer div[style*="flex-direction:column"] { gap: 0 !important; }
  [data-mehr-zeile] { padding-top: 12px; padding-bottom: 12px; }
  /* Die Zeile "Leistungen im Detail" in den Leistungs-Kacheln der
     Bereichsseiten ist 34 px hoch. Sie steht in einem flex-Behaelter mit
     align-items:center, min-height reicht darum und verschiebt nichts. */
  details > summary { min-height: 44px; box-sizing: border-box; }
  /* Der Bereichs-Chip im Kopf der Projektseiten misst 39 Punkte. Eine
     Polsterung wie bei data-mehr-zeile machte ihn klobig, min-height
     hebt nur die Trefferflaeche. */
  [data-bereich-chip] { min-height: 44px; box-sizing: border-box; }
  /* Die Wortmarke im Kopf ist 30 px hoch, die Bilder darin sitzen absolut
     mittig und wandern beim Aufziehen mit. */
  header a[aria-label="Impuls+ Startseite"] { height: 44px !important; }
}

/* Lange deutsche Woerter duerfen trennen statt die Seite zu weiten. Der
   Notnagel overflow-wrap greift erst, wenn auch die Trennung nicht reicht. */
@media (max-width: 1024px) {
  h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
}

/* Ab 1440 waechst der Rand, nicht der Inhalt. Der Entwurf deckelt den Inhalt
   bei 1440, die clamp()-Obergrenzen halten die Schrift auf einem 2560er Schirm
   im Mass. Hier ist darum nichts zu tun, die Zeile haelt die Absicht fest. */

/* ================= Espresso, Groessen-Variante der Startseite ================= */

/* Die Komponente kommt aus dem Buchungstool und bleibt dort unveraendert.
   Auf der Startseite ist der Zaehler eine Ansage, darum diese eine Variante.
   Masse aus v6: Zeichen clamp(88,9vw,128), Zahl clamp(56,6.6vw,104). */
.ip-espresso--gross { gap: clamp(20px, 2.4vw, 32px); align-items: flex-end; }
.ip-espresso--gross .ip-espresso-zeichen svg {
  width: clamp(88px, 9vw, 128px);
  height: clamp(88px, 9vw, 128px);
}
.ip-espresso--gross .ip-espresso-zahl {
  font-size: clamp(56px, 6.6vw, 104px);
  letter-spacing: -4px;
  line-height: 0.86;
  color: #2B0AFF;
}
.ip-espresso--gross .ip-espresso-einheit {
  font-size: clamp(15px, 1.4vw, 19px);
  color: #000000;
}

/* ================= Ruhiger Modus ================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-marquee] { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* hidden schlaegt die Inline-Angabe.
   Der Entwurf setzt display an vielen Elementen inline, und [hidden] aus dem
   Browser-Stil verliert dagegen. Ohne diese Regel steht ein ausgeblendeter
   Knopf trotzdem da (gefunden an den Galerie-Knoepfen, 2026-08-25). */
[hidden] { display: none !important; }

/* Verweise mitten im Fliesstext.
   Der Entwurf faerbt sie nicht, damit stehen sie schwarz wie der Text daneben
   und niemand sieht, dass es Verweise sind (Fabiano, 2026-08-25). Der
   Unterstrich macht sie erkennbar, die Farbe bleibt, blau kommt beim
   Ueberfahren aus der globalen a:hover-Regel. */
main p a, main li a, main dd a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Kurzbiografien auf /persoenlichkeiten/.
   Der Text steht im HTML, seite.js setzt beim Laden nur data-bio="zu" und
   der Knopf schaltet um. Ohne Skript stehen beide Biografien offen da. */
/* !important, weil der Entwurf display am Block selbst setzt und eine
   Inline-Angabe sonst gewinnt. Gleiche Falle wie beim Bereichs-Filter. */
[data-bio="zu"] { display: none !important; }
[data-bio-schalter] svg { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
[data-bio-schalter][aria-expanded="true"] svg { transform: rotate(180deg); }

/* Rollbalken am Bildstreifen der Projektseiten.
   Unter den Einblicken stand ein grauer Balken quer durch die Seite und
   zerschnitt die Bildzeile (Fabiano, 2026-08-25). Geblaettert wird ueber die
   2 Knoepfe in der Bildzeile, den Finger, das Rad und die Tastatur, der Balken
   traegt also keine Bedienung, die sonst verloren ginge. Nur ausblenden, nie
   das Scrollen selbst abschalten. */
[data-leiste-weg] { scrollbar-width: none; -ms-overflow-style: none; }
[data-leiste-weg]::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Kachelbreite im Bildstreifen der Projektseiten.
   Steht hier und nicht inline, weil sie an den Bruchstellen wechselt: 3 Bilder
   nebeneinander am Rechner, 2 am Tablet, 1 am Handy. Gerechnet aus der Breite
   des Streifens minus der Luecken, damit immer eine ganze Zahl Bilder sichtbar
   ist und rechts keins angeschnitten stehen bleibt (Fabiano, 2026-08-25).
   Dieselben Bruchstellen wie das sizes-Attribut der Bilder (KACHEL_SIZES in
   referenz-bauen.py), sonst laedt der Browser die falsche Fassung. */
[data-galerie-bild] { flex: 0 0 calc((100% - 20px) / 3); }
@media (max-width: 1119px) { [data-galerie-bild] { flex-basis: calc((100% - 10px) / 2); } }
@media (max-width: 767px)  { [data-galerie-bild] { flex-basis: 100%; } }

/* Die Lupe: ein Bild gross, auf Klick.
   Natives dialog, damit Escape, der Abdunkler und die Tastaturfalle vom
   Browser kommen. Ohne JavaScript geht sie nie auf, die Bilder stehen dann
   weiter im Streifen (W13). Kein Rahmen, keine Rundung, kein Schatten. */
dialog[data-lupe] {
  border: 0;
  padding: 0;
  margin: auto;
  max-width: 100vw;
  max-height: 100vh;
  background: transparent;
  overflow: visible;
}
dialog[data-lupe]::backdrop { background: rgba(0, 0, 0, 0.9); }
dialog[data-lupe] > div { position: relative; line-height: 0; }
dialog[data-lupe] img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
}

/* Die Lupe ist genau so breit wie das Bild darin. Ohne diese Regel zieht die
   Bildunterschrift den Rahmen auf die volle Fensterbreite, und der
   Schliessen-Knopf steht 126 Punkte neben der Bildecke statt daran
   (gemessen 2026-08-25). */
dialog[data-lupe] { width: max-content; max-width: 92vw; }

/* Der Schliessen-Knopf lag hinter dem Bild. Beide sind positioniert und ohne
   eigene Ebene, dann gewinnt das spaetere im Markup, und das ist das Bild.
   Gemessen 2026-08-25: an der Bildecke standen 128 von 255 Helligkeit statt
   der 255 eines weissen Knopfes. Im Bildschirmfoto war er nicht zu sehen. */
dialog[data-lupe] [data-lupe-zu] { z-index: 2; }

/* Zweispalter fuer die Beschreibung der Projektseiten.
   Links der Leitsatz, rechts der Fliesstext. Gemessen 2026-08-25: einspaltig
   lief der Text auf 1010 Punkten und damit rund 126 Zeichen je Zeile, lesbar
   sind 60 bis 75. Rechts blieben 366 Punkte leer. Zweispaltig sind beide
   Seiten voll und die Zeile ist lesbar. /about/ macht es genauso.
   Unter 1120 Punkten faellt es auf eine Spalte, dort steht der Leitsatz wie
   bisher ueber dem Text. */
[data-text-raster] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1120px) {
  [data-text-raster] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Das Lupen-Zeichen auf den Bildkacheln.
   Am Rechner erscheint es beim Ueberfahren, am Handy steht es dauerhaft. Der
   Grund ist nicht Geschmack: den zoom-in-Zeiger des Browsers gibt es auf einem
   Touch-Geraet gar nicht, dort sagte bisher nichts, dass ein Tippen das Bild
   gross macht (Entscheid Fabiano 2026-08-26).
   Die Abfrage hover:none trifft Touch-Geraete, hover:hover Maus und Trackpad. */
[data-lupe-marke] {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s linear, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-lupe-auf]:hover [data-lupe-marke],
[data-lupe-auf]:focus-visible [data-lupe-marke] { opacity: 1; transform: none; }
@media (hover: none) {
  [data-lupe-marke] { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-lupe-marke] { transition: none; }
}

/* ================= Rechtsseiten ================= */

/* Die Angaben-Liste auf /impressum/. Bezeichnung links, Wert rechts.
   Unter 600 Punkten reicht die Breite fuer zwei Spalten nicht: mit
   "Unternehmens-Identifikationsnummer" als laengster Bezeichnung bliebe
   rechts nichts uebrig. Dort stehen sie darum untereinander, mit Abstand
   nur zwischen den Paaren (dd + dt), nicht vor dem ersten. */
[data-angaben] {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 12px 28px;
}
@media (max-width: 600px) {
  [data-angaben] { grid-template-columns: minmax(0, 1fr); gap: 0; }
  [data-angaben] dd + dt { margin-top: 18px; }
}

/* Tippflaechen in der Angaben-Liste. Telefon, Mail und der Verweis auf den
   Betreiber sind je 23 Punkte hoch, weil sie allein in einem dd stehen und
   nicht im Fliesstext (WCAG 2.5.8 nimmt nur inline stehende Ziele aus).
   Gleiche Loesung wie im Fuss: auf Touch mehr Trefferflaeche, dafuer kein
   Zeilenabstand mehr im Raster. Am Bildschirm mit Maus aendert sich nichts. */
@media (hover: none) {
  [data-angaben] { row-gap: 0; }
  [data-angaben] dd a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Kopf und Fuss stehen auf allen 23 Seiten und muessen ueberall gleich fallen,
   egal was die Stildatei der jeweiligen Seite auf body setzt.
   Der Anlass, gemessen am 2026-08-26 bei B4: booking.css setzt
   line-height:1.6 auf body. Seit /booking/ den Rahmen traegt, erbte ihn der
   Fuss und war dort 5 Punkte hoeher als auf den anderen 22 Seiten, die
   Fuss-Verweise 1 Punkt. Sichtbar wenig, aber es ist derselbe Baustein.
   Die Werte im Baustein stehen inline, hier steht nur die Grundlinie.

   Die zweite Zeile gilt der Ueberschrift "Leistungen" im Fuss. booking.css
   setzt ungescopt h1, h2, h3 mit line-height:1.3 und letter-spacing:-0.5px,
   damit stand sie auf /booking/ 98x20 statt 103x23 Punkte. Zwei Elementnamen
   im Selektor, damit die Regel unabhaengig von der Ladereihenfolge gewinnt:
   footer h2 schlaegt h2. */
header, footer { line-height: normal; }
header h1, header h2, header h3,
footer h1, footer h2, footer h3 { line-height: normal; letter-spacing: normal; }

/* ==========================================================================
   Handy: das Format des Rechners gilt auch hier
   ==========================================================================
   Befund vom 2026-08-28, gemessen mit _skripte/format-messen.js ueber alle
   23 Seiten bei 375, 390 und 430 Punkten: 213 Befunde auf 17 Seiten.

   Zwei Ursachen, beide aus dem Rechner-Entwurf uebernommen:

   1. Die Bildhoehen haengen an der Bildschirm-HOEHE (dvh), nicht an der
      Bildbreite. Am Handy schrumpft die Breite, die Hoehe nicht. Die
      Projektkachel auf /work/ steht am Rechner auf 452x342 (Verhaeltnis
      1.32, Querformat) und am Handy auf 355x342 (1.04, fast quadratisch).
      Groesster gemessener Formatsprung: 75 Prozent.
   2. Die Spaltenrechnung des Entwurfs hat keine Bruchstelle. Eine Kachel
      bleibt eine Drittel-Spalte und faellt auf ihre Mindestbreite von 280,
      waehrend die Kachel darunter 355 breit ist. Gemessen bei 390 Punkten:
      38 Bildkaesten 280 breit, 39 Kaesten 355 breit, auf demselben
      Bildschirm.

   Entscheid Fabiano, 2026-08-28: der Rechner ist massgebend. Jede Kachel
   traegt am Handy dasselbe Verhaeltnis wie am Rechner. Die Werte unten sind
   bei 1440 x 900 gemessen, nicht geschaetzt.

   Warum als Bruchstelle und nicht im Markup: die Rechner-Ansicht ist
   abgenommen und bleibt damit Punkt fuer Punkt unangetastet. Warum
   [style*=...]: die Kacheln tragen keine Klassen, der Entwurf setzt alles
   inline. Deshalb auch !important, eine Inline-Angabe gewinnt sonst.
   Pruefung 16 im Pre-Merge-Check zaehlt die Treffer je Selektor und meldet
   es, wenn ein Generator einen dieser Werte umbenennt.

   Zwei Bruchstellen, weil die zwei Ursachen unterschiedlich weit reichen:
   das Format bricht schon am Tablet (gemessen bei 1024: die Karte in
   "Weitere Projekte" steht auf 1.02 statt 1.48, 31 Prozent daneben), darum
   gehen die Hoehen bis 1119. Die Spaltenrechnung und die Blaetter-Pfeile
   sind ein reines Handy-Thema und bleiben bei 767, derselben Bruchstelle wie
   der Bildstreifen weiter oben und das media-Attribut der Handy-Bilder. */
@media (max-width: 1119px) {

  /* --- 1. Hoehe aus dem Verhaeltnis statt aus der Bildschirmhoehe --- */
  [style*="min(34dvh,320px)"],
  [style*="min(38dvh,380px)"],
  [style*="min(38dvh,360px)"],
  [style*="min(48dvh,460px)"],
  [style*="min(42dvh,400px)"],
  [style*="clamp(366px,56dvh,586px)"] {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Kachelbild "Weitere Projekte": 452x306 */
  [style*="min(34dvh,320px)"]:not([data-galerie]) { aspect-ratio: 1.48 !important; }

  /* Bildstreifen Einblicke: dasselbe Verhaeltnis, aber NICHT am Streifen.
     Im Streifen liegen je nach Breite 3 Bilder nebeneinander, 2 am Tablet,
     1 am Handy. Ein Verhaeltnis am Streifen waere darum nur bei einer der
     3 Bruchstellen richtig: bei 768 stand die Kachel dadurch auf 347x476
     statt 347x235 (gemessen 2026-08-28, mein eigener Fehler im ersten
     Anlauf). Das Verhaeltnis gehoert an die Kachel, dann traegt der Streifen
     die Hoehe, die seine Kacheln brauchen, auf jeder Breite. */
  [data-galerie] { height: auto !important; }
  [data-galerie-bild] { height: auto !important; aspect-ratio: 1.48 !important; }

  /* Projektkachel auf /work/ und der Startseite: 452x342 */
  [style*="min(38dvh,380px)"] { aspect-ratio: 1.32 !important; }

  /* Die 3 Bereichs-Kacheln, 3 Breiten im Entwurf, darum 3 Verhaeltnisse */
  [style*="min(38dvh,360px)"][style*="flex:1 1 420px"] { aspect-ratio: 1.96 !important; }
  [style*="min(38dvh,360px)"][style*="max-width:min(100%,460px)"] { aspect-ratio: 1.35 !important; }
  [style*="min(38dvh,360px)"]:not([style*="flex:1 1 420px"]):not([style*="max-width:min(100%,460px)"]) {
    aspect-ratio: 1.16 !important;
  }

  /* Hero-Band der Projekt- und Beitragsseiten: 1376x432 */
  [style*="min(48dvh,460px)"] { aspect-ratio: 3.19 !important; }

  /* Team-Band auf /about/: 1376x378 */
  [style*="min(42dvh,400px)"] { aspect-ratio: 3.64 !important; }

  /* --- 2. Die Spaltenrechnung faellt auf eine Spalte --- */
  /* siehe unten, eigener Block ab 767 */
}

@media (max-width: 767px) {

  /* Bildblock "Von fruehen Digitalisierungsprojekten" auf /about/: 683x414.
     Nur am Handy, bewusst nicht am Tablet. Dort steht der Block noch neben
     der Textspalte und bekommt seine Hoehe von ihr. Ein Verhaeltnis rechnet
     daraus dann die BREITE statt umgekehrt: bei 768 wurde der Block 1082
     statt 703 breit und die Seite scrollte waagrecht (gemessen 2026-08-28).
     Am Handy steht er allein in seiner Zeile, dort traegt das Verhaeltnis. */
  [style*="clamp(280px,28vw,420px)"] {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.65 !important;
  }

  /* Hero-Bild der Startseite: die eine Ausnahme vom Rechner-Mass.
     Das <picture> liefert unter 767 ein eigenes Bild, hero-team-handy, ein
     Hochformat 3:4, absichtlich fuers Handy zugeschnitten. Das Querformat
     des Rechners (1.81) daraufzulegen wuerde 59 Prozent davon wegschneiden
     (gemessen 2026-08-28). Hier gilt darum das Format des Handy-Bildes, und
     der Fehler war allein die Breite: die Kachel stand auf 280 statt 355.
     Dieselbe Bruchstelle wie das media-Attribut der Quelle, 767. */
  [style*="clamp(366px,56dvh,586px)"] { aspect-ratio: 3 / 4 !important; }
}

/* Ab 768 liefert das <picture> wieder das Rechner-Bild, ab da gilt auch
   dessen Verhaeltnis. */
@media (min-width: 768px) and (max-width: 1119px) {
  [style*="clamp(366px,56dvh,586px)"] { aspect-ratio: 1.81 !important; }
}

@media (max-width: 767px) {

  /* Hero-Bild der Startseite: 2 von 3 Spalten, ohne Wachsen und ohne
     Schrumpfen. Am Handy blieb es dadurch auf seiner Mindestbreite von 280
     stehen, bei 92 Punkten leerer Flaeche rechts. */
  [style*="calc((200% - 10px) / 3)"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Karten in "Weitere Projekte" und "Leistungen im Projekt": eine Drittel-
     Spalte als Hoechstbreite. Am Handy verliert sie gegen die Mindestbreite
     von 280 und die Karte steht 75 Punkte schmaler als ihre Nachbarin. */
  [style*="max-width:calc(33.333% - 7px)"] { max-width: none !important; }

  /* --- 3. Blaetter-Pfeile unter das Bild --- */
  /* Am Rechner erscheinen sie beim Ueberfahren, am Handy stehen sie
     dauerhaft. Auf 355 Punkten Breite verdecken die beiden Quadrate einen
     guten Teil des Bildes. Entscheid Fabiano, 2026-08-28: unter das Bild.
     Umgehaengt wird ueber order, die DOM-Folge bleibt zurueck, Streifen,
     vor, damit die Tastatur-Reihenfolge stimmt. */
  [data-galerie-rahmen] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
  }
  [data-galerie-rahmen] > [data-galerie] { order: 1; flex: 1 1 100%; }
  [data-galerie-rahmen] > [data-galerie-schritt] {
    order: 2;
    position: static !important;
    transform: none !important;
  }
}

/* Eckdaten auf /work/: buendig, sobald sie umbrechen
   ==================================================
   Die 3 Kacheln (Projekte, Espressi, Jahre) tragen im Entwurf absichtlich
   ungleiche Innenabstaende: 8 links bei der ersten, 8 rechts bei der dritten,
   28 dazwischen. Am Rechner ist das richtig, dort stehen sie nebeneinander
   und schliessen aussen buendig mit dem Rest der Seite ab.

   Sobald das Raster umbricht, stehen sie untereinander und der Versatz wird
   sichtbar: bei 390 beginnt die erste Kachel bei 26, die anderen beiden bei
   46 (Fabianos Befund vom 2026-08-30, nachgemessen). 3 Spalten gibt es erst
   ab 800, darunter ist es immer schief, bei 1 wie bei 2 Spalten.

   Darum unter 800 gleiche Abstaende auf allen dreien, und der senkrechte
   Trenner wird zum waagrechten: ein Strich rechts an einer Kachel, die ueber
   die volle Breite laeuft, ist ein Rest aus dem Spalten-Layout. */
@media (max-width: 799px) {
  [style*="minmax(240px,1fr)"] > div {
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-right: 0 !important;
  }
  [style*="minmax(240px,1fr)"] > div:not(:last-child) {
    border-bottom: 1px solid #E3E5EC;
  }
}

/* --- Handy: das Knopfpaar im Aufruf-Kasten der 3 Bereichsseiten -------------
   "Termin buchen" und "Alle Projekte" standen bei 390 untereinander, weil die
   beiden zusammen 350 Punkte brauchten und der Kasten innen nur 307 hat
   (gemessen 2026-08-31). Nebeneinander tragen sie mehr: der zweite Knopf ist
   sonst der einzige Inhalt seiner Zeile und wirkt wie ein zweiter Hauptweg.
   Platz kommt aus dem seitlichen Innenabstand und aus dem Pfeil, der am Handy
   nichts erklaert, was der Text nicht schon sagt. Ab 768 gilt wieder das
   Rechner-Mass, dort ist Platz genug. */
@media (max-width: 767px) {
  [data-knopfpaar] { flex-wrap: nowrap !important; }
  [data-knopfpaar] > a {
    /* auto als Basis, nicht 0: bei 0 bekaeme jeder Knopf genau die halbe Zeile,
       und die laengere Beschriftung liefe heraus, waehrend neben der kuerzeren
       Platz frei bliebe. Mit auto teilen sie sich den Rest nach Bedarf. */
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: nowrap !important;
    /* Die laengste Beschriftung ist "Erstgespraech buchen" auf der
       Transformations-Seite. Bei 15px braucht sie allein schon 148 Punkte und
       laeuft bei 360 aus dem halben Kasten heraus, auch ohne Innenabstand.
       Die Groesse haengt darum an der Bildschirmbreite, ab 417 wieder 15. */
    font-size: clamp(13px, 3.6vw, 15px) !important;
  }
  [data-knopfpaar] > a > svg { display: none !important; }
}

/* --- Handy: der Fuss steht kompakter ---------------------------------------
   Die 4 Spalten stehen am Handy untereinander. Der Abstand von 48 Punkten ist
   fuer nebeneinander stehende Spalten gedacht; untereinander reisst er den
   Fuss auf 884 Punkte auf, mehr als eine Bildschirmhoehe (gemessen 2026-08-31).
   Unter 767 darum 28 zwischen den Bloecken. Dazu rueckt das Instagram-Zeichen
   naeher an die Wortmarke: seine Trefferflaeche von 44 Punkten bringt oben
   schon 10 Punkte Luft mit, die 18 aus dem Rand der Marke kommen sichtbar
   obendrauf. Die Trefferflaeche selbst bleibt unangetastet. */
@media (max-width: 767px) {
  [style*="minmax(210px,1fr)"] { gap: 28px !important; }
  footer img[alt="Impuls+"] { margin-bottom: 6px !important; }
}

/* --- Die Logoleiste auf der Startseite --------------------------------------
   Sechs fremde Logos in ihren Originalfarben ergeben neben der eigenen Marke
   ein zweites, lauteres Farbschema. Die Brand-DNA sagt im Zweifel Kontrast
   statt Lautstaerke und Schwarz-Weiss statt Farbe, darum stehen sie grau und
   etwas zurueckgenommen. Beim Zeigen auf ein Logo kommt seine Farbe zurueck,
   damit erkennbar bleibt, wer da steht.

   Umkehrbar je Logo: verlangt eine Organisation in ihrer Markenrichtlinie die
   Originalfarbe, bekommt ihr img ein data-logo-farbig und faellt aus der Regel.
   Auf Touch gibt es kein Zeigen, dort bleibt es beim ruhigen Grau. */
[data-logoleiste] img:not([data-logo-farbig]) {
  filter: grayscale(1);
  transition: filter 0.15s linear;
}
[data-logoleiste] img:not([data-logo-farbig]):hover {
  filter: none;
}

/* Im ruhigen Modus steht das Band still. Beim Text-Laufband darueber ist das
   folgenlos, dort wiederholt sich derselbe Satz. Hier waeren 3 der 6 Logos
   nicht mehr zu sehen, und eine Leiste, die nur die halbe Kundschaft zeigt,
   ist schlechter als gar keine. Ohne Bewegung bricht sie darum um, und der
   zweite Satz, der nur fuer den nahtlosen Umlauf da ist, faellt weg. */
@media (prefers-reduced-motion: reduce) {
  [data-logoleiste] {
    flex-wrap: wrap !important;
    width: auto !important;
    justify-content: center;
    row-gap: 28px;
  }
  [data-logoleiste] img[aria-hidden="true"] { display: none !important; }
}