/* Ergänzungen zum Entwurf. styles.css bleibt unverändert, alles Zusätzliche
   steht hier, jeweils mit Begründung. */

/* Portfolio-Kacheln: styles.css gibt Logos nur eine Breite (260px) und
   rechnet mit flachen Logos. Quadratische oder hohe Logos (z. B. Stealth
   Startup) wären höher als die 204px hohe Kachel. Die Höhe wird begrenzt,
   das Seitenverhältnis bleibt erhalten. Flache Logos sind nicht betroffen. */
.company-logo img { max-height: 150px; object-fit: contain; }

/* Rechtstexte und Fehlerseite: kein eigenes Design vorhanden. Das
   Unterseiten-Layout hat zwei Spalten (Seitenleiste + Text); ohne
   Seitenleiste soll der Text die Textspalte nutzen statt der schmalen ersten. */
.article-legal { grid-template-columns: minmax(0, 720px); }
.article-legal h2 { margin-top: 48px; }
.article-legal h3 { font-size: 20px; font-weight: 500; margin: 32px 0 12px; }
.article-legal ul { list-style: disc; padding-left: 1.2em; margin: 18px 0; font-size: 18px; line-height: 1.650; }
.article-legal a { color: var(--teal); text-decoration: underline; overflow-wrap: anywhere; }

/* Kontaktformular, Spamschutz (Schritt 6): Das Honeypot-Feld „betreff“
   ist für Menschen unsichtbar, aus der Tab-Reihenfolge genommen
   (tabindex="-1") und für Screenreader ausgeblendet (aria-hidden).
   Bewusst nicht nur display:none, das erkennen manche Bots und lassen
   das Feld dann leer. Absolut positioniert, belegt also keine Rasterzeile. */
.form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Datum in der News-Liste (Schritt 7, Barrierearmut): Das Grün #1fae82 aus
   dem Entwurf erreicht auf Weiß nur 2,82 : 1 und auf dem Hover-Hintergrund
   (--pale, #e8fef7) 2,68 : 1, gefordert sind 4,5 : 1 (WCAG AA, kleiner Text).
   #178160 liegt im selben Farbton, nur dunkler: 4,83 : 1 auf Weiß, 4,59 : 1
   auf --pale. Freigegeben vom Auftraggeber. */
.news time { color: #178160; }

/* Portfolio „Alle anzeigen“ (Nachtrag): Der Entwurf kennt nur ein festes
   3er-Raster. Ab 7 Firmen zeigt die Startseite die ersten 6, der Button
   klappt die übrigen im selben Raster auf. Verstecken nur mit JavaScript
   (.js und .has-more, das portfolio.js setzt); ohne JS sind alle Firmen
   sichtbar und der Button bleibt verborgen. Button-Stil: vorhandenes .btn-teal.
   Das Einblenden der aufgeklappten Kacheln übernimmt das vorhandene
   data-reveal (main.js beobachtet auch die versteckten Kacheln). */
.portfolio-more { display: none; }
.js .portfolio-more { display: flex; justify-content: center; margin-top: clamp(32px, 3.600vw, 48px); }
.js .portfolio-more .btn { white-space: normal; text-align: center; height: auto; min-height: 48px; padding-block: 10px; }
.js .portfolio.has-more:not(.is-open) .company-extra { display: none; }

/* News „Weitere News anzeigen“ (Nachtrag): Die Startseite zeigt die 5 neuesten
   News, der Button hängt jeweils 5 weitere unten an (news.js setzt .has-more
   und .is-shown). Gleicher Button-Stil und Abstand wie beim Portfolio
   (.portfolio-more, oben). Ohne JavaScript sind alle News sichtbar. */
.js .news.has-more .news-extra:not(.is-shown) { display: none; }
/* Netzwerk-Karten mit Detailseite: Link „Mehr erfahren“ (Nachtrag). Der Stil
   .more kommt aus styles.css (Mint für die dunkle Event-Fläche). Mint auf der
   weißen Karte wäre kaum lesbar, deshalb hier in Teal (--teal, #006964,
   Kontrast 6,9 : 1 auf Weiß), sonst unverändert (Pfeil, Linie, Hover). */
.net-card .more { margin-top: 20px; color: var(--teal); border-bottom-color: rgba(0, 105, 100, .4); }
.net-card .more:hover { border-bottom-color: var(--teal); }
.net-card :focus-visible { outline-color: var(--teal); }

/* Fotos automatisch einfärben (Nachtrag). Die Redaktion lädt normale
   Farbfotos hoch, das Design zeigt entsättigte Fotos mit Teal-Stich
   (Event, Labor, Fließtext) und schwarz-weiße Teamfotos. Die Dateien selbst
   bleiben unverändert, die Einfärbung passiert nur in der Darstellung.

   .photo: Das Bild wird erst entsättigt und etwas aufgehellt, dann legt ein
   Farbfilm per mix-blend-mode: multiply (::after) den Teal-Stich darüber.
   Die Werte sind an den vorhandenen, vom Designer vorab eingefärbten Bildern
   gemessen: Dort gilt je Pixel (R, G, B) = Graustufe × (0,8813 / 1,0335 /
   1,0178) praktisch ohne Versatz. brightness(1.0335) liefert den
   G-Faktor, der Film multipliziert mit (0,8813 / 1,0335 / 1,0178) / 1,0335
   = (0,853 / 1 / 0,985) = rgb(217, 255, 251). Ein bereits eingefärbtes Bild
   sieht damit praktisch unverändert aus (mittlere Abweichung unter 1 von
   255). Details und Messung: _Projekt/12-Netzwerk-Termine-Fotos.md.
   isolation: der Film mischt sich nur mit dem Bild, nicht mit dem
   Abschnittshintergrund. Der Film wird wie das Bild von oben aufgedeckt
   (gleiche Zeit und Kurve wie in styles.css), damit vor dem Einblenden kein
   heller Kasten steht. Hover und Einblenden liegen am <img> und bleiben
   erhalten. Logos und Partnerlogos sind keine .photo und bleiben farbig. */
.photo { isolation: isolate; }
.photo img { filter: grayscale(1) brightness(1.0335); }
.photo::after { content: ""; position: absolute; inset: 0; background: rgb(217, 255, 251); mix-blend-mode: multiply; pointer-events: none; }
.js [data-photo]::after { clip-path: inset(0 0 100% 0); transition: clip-path 1.300s var(--ease-out); }
.js [data-photo].in::after { clip-path: inset(0); }
@media (prefers-reduced-motion: reduce) { .js [data-photo]::after { clip-path: none; } }
@media print { .js [data-photo]::after { clip-path: none; } }

/* Teamfotos: automatisch schwarz-weiß (Kommentar oben). Bei bereits
   schwarz-weißen Dateien ändert sich nichts. */
.member-photo img { filter: grayscale(1); }

/* Barrierefreiheit (Check 29.10.2026, _Projekt/13-Barrierefreiheit-Check.md).
   Sichtbar nur bei Tastaturbedienung bzw. gar nicht.

   B1/B2 Fokusrahmen: styles.css färbt ihn Mint, in .section Teal und in
   .section-teal wieder Mint. Auf hellen Flächen ohne .section war Mint kaum
   zu sehen (1,43 : 1 auf Weiß, 1,0 : 1 auf dem Mint-Band, gefordert 3 : 1):
   Inhalt der Unterseiten (.article), weiße Formular-Karte und Mint-Band
   (.cta-band) im Teal-Abschnitt. Dort jetzt Teal (6,6 : 1 auf Weiß,
   4,6 : 1 auf Mint), wie in den weißen Abschnitten der Startseite. */
.article :focus-visible,
.section-teal .form :focus-visible,
.section-teal .cta-band :focus-visible { outline-color: var(--teal); }

/* B8 Textabstände (WCAG 1.4.12): Die Zeilen der Hero-Überschrift schneiden
   für die Einblend-Animation rundum ab. Mit größerem Buchstabenabstand
   wurde ein langes Wort („Innovation“) rechts abgeschnitten. Abgeschnitten
   wird jetzt nur noch oben/unten, die Animation bleibt gleich. Nur in
   Browsern mit overflow: clip, sonst gilt styles.css unverändert. */
@supports (overflow: clip) {
  .hero-title .line { overflow: visible; overflow-y: clip; }
}

/* Unsichtbarer Text nur für Screenreader, z. B. der Hinweis „(öffnet in
   neuem Fenster)“ an Links mit target="_blank" (eingefügt in
   site/plugins/lsvv/index.php, Hook page.render:after). */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* B3/B4/B5 Kontraste (Check 29.10.2026, freigegeben vom Auftraggeber;
   die Feldrahmen im Formular, B6, bleiben bewusst wie im Entwurf).
   B3: Inaktive Sprache mit 75 % Deckkraft erreichte nur 4,4 : 1 (über
   dem Hero) bzw. 3,9 : 1 (gescrollter Header), gefordert 4,5 : 1.
   90 % ergibt 5,6 : 1. Hover bleibt 100 %. */
.lang a { opacity: .9; }
/* B4: Der gescrollte Header ist im Entwurf zu 92 % deckend. Über hellen
   Abschnitten kam die aktive Sprache (Mint) damit nur auf 3,9 : 1.
   Voll deckendes Teal: 4,6 : 1. Optisch kaum ein Unterschied. */
.site-header.scrolled { background: var(--teal); }
/* B5: Platzhaltertext im Formular #8ea3a0 = 2,6 : 1 auf Weiß.
   #5e7370 im selben Farbton: 5,0 : 1. */
.form ::placeholder { color: #5e7370; }