NUR um den Label-Text – der Cover-Block bleibt damit
gültig. Die Klickfläche macht das ::after unten.
position:static ist Voraussetzung: sonst verankert sich inset:0 am
Inner-Container = nur die Label-Zeile wäre klickbar (Learning aus
.ih-bento, v1.5.x). */
.ih-bereich .wp-block-cover__inner-container {
position: static !important;
}
/* Astra färbt Links blau + unterstreicht sie; .ih-bereich__label setzt
die Farbe nur auf dem , nicht auf dem darin */
.ih-bereich__label a {
color: var(--ih-navy) !important;
text-decoration: none !important;
}
.ih-bereich__label a::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
}
/* Sichtbarer Fokus für Tastaturbedienung – ohne ihn ist der gestreckte
Link nicht erkennbar fokussiert (Kachel hat overflow:hidden, deshalb
inset statt outline am ::after) */
.ih-bereich__label a:focus-visible::after {
outline: 3px solid var(--ih-yellow-accent);
outline-offset: -3px;
border-radius: var(--ih-radius);
}
/* ⚠️ WIRKUNGSLOS – Stand 05.08. (Christoph live geprüft).
Angelegt gegen die Annahme, der Glas-Header verdecke Sprungziele.
Falsch: der Header ist NICHT sticky, er scrollt mit weg. Bleibt nur
als Vorsorge stehen, falls je ein mitscrollender Header kommt.
Kann beim nächsten Aufräumen ersatzlos raus. */
[id].ih-section,
.wp-block-heading[id] {
scroll-margin-top: 120px;
}
@media (max-width: 781px) {
[id].ih-section,
.wp-block-heading[id] {
scroll-margin-top: 100px;
}
}
/* Feature-Band: volle Breite Navy, weißer Text, gelbe Icons.
v1.10.5: Kinder bekommen eine 1216px-Box mit Auto-Zentrierung und
sind DARIN linksbündig (der Padding-Trick aus v1.10.4 scheiterte an
Astras alignfull-Technik: Prozente ≠ Viewport). */
.ih-features {
background: var(--ih-navy-dark);
padding: 140px 32px;
}
.ih-features > h2,
.ih-features > .wp-block-heading,
.ih-features > .ih-features__intro,
.ih-features > .ih-features__grid {
max-width: 1216px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.ih-features h2,
.ih-features .wp-block-heading {
color: var(--ih-white);
text-align: left !important;
}
.ih-features__intro {
color: rgba(255, 255, 255, 0.78);
font-size: 18px;
line-height: 28px;
text-align: left;
margin-bottom: 56px !important;
}
@media (max-width: 768px) {
.ih-features { padding-top: 72px; padding-bottom: 72px; }
}
.ih-feature {
display: grid;
grid-template-columns: 48px 1fr;
gap: 12px 16px;
align-items: start; /* v1.10.6: alles oben ausrichten (Restraum blieb sonst mittig verteilt) */
align-content: start;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--ih-radius);
padding: 24px;
height: 100%;
}
.ih-feature > * {
margin: 0 !important;
}
/* v1.10.26: h3 statt h4 (A11y-Fix Heading-Hierarchie, Lighthouse-Befund
notes/17); h4 bleibt übergangsweise mit drin, bis die Live-Seite
umgestellt ist */
.ih-feature h3,
.ih-feature h4 {
color: var(--ih-white);
font-size: 18px;
line-height: 24px;
grid-column: 2;
/* v1.10.6: einzeilige Titel bleiben auf Icon-Mitte, zweizeilige
starten oben und füllen die 48px-Icon-Höhe */
display: flex;
align-items: center;
min-height: 48px;
}
.ih-feature p {
/* v1.10.5: größer + kräftiger (war schwer lesbar) */
color: rgba(255, 255, 255, 0.82);
font-size: 16px;
font-weight: 500;
line-height: 25px;
grid-column: 1 / -1;
}
/* Icon-Box: gelbes Icon auf Gelb-Tint (analog Navy-Icon-Box, invertiert) */
figure.ih-feature__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--ih-radius-btn);
background: rgba(252, 215, 0, 0.14);
grid-column: 1;
}
figure.ih-feature__icon img {
width: 24px;
height: 24px;
}
/* Downloads: Link-Zeile mit Inline-Icon (ersetzt große Icon-Box) */
.ih-download-link {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
.ih-download-link a {
color: var(--ih-navy);
font-size: 17px;
text-decoration: underline;
text-decoration-color: var(--ih-yellow-accent);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.ih-download-link a:hover {
color: var(--ih-navy-dark);
}
/* Geschäftsfelder-Reihe: Bild oben, Label auf weißer Kachel, Lift-Hover */
figure.ih-feld {
position: relative;
margin: 0;
background: var(--ih-white);
border-radius: var(--ih-radius);
overflow: hidden;
box-shadow: var(--ih-shadow-card);
transition: transform 0.25s ease, box-shadow 0.2s ease;
}
figure.ih-feld:hover {
transform: translateY(-6px);
box-shadow: var(--ih-shadow-card-hover);
}
.ih-feld img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* v1.10.4: Klick-Affordanz (gelber Pfeil-Kreis) + einheitliche
Label-Höhe (2 Zeilen), Bild etwas höher */
.ih-feld img {
aspect-ratio: 1 / 0.85;
}
.ih-feld figcaption {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
min-height: 74px;
}
/* v1.10.22 (Kundenfeedback 20.07., Beschluss Christoph): gelber
Pfeil-Kreis (v1.10.4) ENTFERNT – reservierte 28px + 10px Gap und
zwang lange Labels (REINIGUNGSMITTEL) in den Umbruch. Klick-
Affordanz bleibt über Hover-Lift + gelbe Unterstreichung; die
ganze Kachel ist ohnehin klickbar. */
.ih-feld figcaption a {
flex: 1;
min-width: 0; /* v1.10.5: langes Label darf nicht den Pfeil-Abstand quetschen */
/* v1.10.21 (Kundenfeedback 20.07.): Umbruch nur an Wortgrenzen –
hyphens:auto (v1.10.7) trennte auch, wenn das Wort komplett in die
nächste Zeile gepasst hätte (REINI-GUNGSMITTEL). v1.10.22: Pfeil
entfernt → Textspalte = Kachelbreite − 32px Padding; längstes Wort
REINIGUNGSMITTEL passt damit ab ~1150px-Viewport sicher einzeilig. */
hyphens: manual; /* v1.10.23: gilt jetzt auf ALLEN Breiten – der auto-Fallback aus v1.10.21/22 trennte im Wort, sobald er aktiv war (Kundenfeedback 20.07., 2. Runde). Statt Trennung skaliert unten die Schriftgröße mit, damit das längste Wort (REINIGUNGSMITTEL) immer einzeilig passt. */
overflow-wrap: break-word; /* Notbremse statt Clipping (greift nur, wenn ein Wort allein nicht in die Zeile passt, z. B. Viewports < ~340px) */
word-break: normal;
color: var(--ih-navy);
font-weight: 800;
font-size: 15px;
line-height: 1.4; /* v1.10.23: relativ statt 21px, skaliert mit der responsiven Schriftgröße */
text-transform: uppercase;
letter-spacing: 0.02em;
text-decoration: none !important; /* v1.10.1: Astra-Unterstrich raus */
}
/* v1.10.1: gelbe Unterstreichung nur beim Hover (wie Startseiten-Bento) */
figure.ih-feld:hover figcaption a {
text-decoration: underline !important;
text-decoration-color: var(--ih-yellow-accent) !important;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
/* v1.10.6: Full-Bleed verworfen (Christoph) – stattdessen bleiben
die 5 Kacheln im Container und werden über kleinere Gaps (16px)
größer (~230px statt 190px) */
.ih-felder.wp-block-group {
grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)) !important;
}
@media (min-width: 1024px) {
.ih-felder.wp-block-group {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 12px !important; /* v1.10.7: noch enger → Kacheln ~235px */
width: 100%;
}
}
/* v1.10.23: KEINE Silbentrennung mehr (Fallback aus v1.10.21/22 raus –
hyphens:auto trennt eifrig, nicht erst bei Platznot). Stattdessen
skaliert die Label-Schrift mit, sodass REINIGUNGSMITTEL (~164px bei
15px) auf jeder Breite einzeilig passt:
– 5er-Grid ab 1024px: 1.3vw ≈ 13.3px bei 1024 → 15px ab ~1154px
– Tablet-auto-fill 701–1023px (Kacheln bis 190px runter): fix 13px
– Mobil-Galerie ≤700px (Kacheln 72%): 15px reicht (Grundregel) */
@media (min-width: 1024px) {
.ih-feld figcaption a {
font-size: clamp(12px, 1.3vw, 15px);
}
}
@media (min-width: 701px) and (max-width: 1023px) {
.ih-feld figcaption a {
font-size: 13px;
}
}
/* Link auf die ganze Kachel strecken */
.ih-feld figcaption a::after {
content: "";
position: absolute;
inset: 0;
}
/* ---------- Leitspruch-Sektion (Startseite, v1.9.27) ----------
Zentrierter Philosophie-Satz, Schlüsselwort mit gelbem Marker
(Gelb als Schriftfarbe wäre auf Weiß unlesbar), Link zur
Über-Uns-Seite mit gelber Unterstreichung. */
.ih-leitspruch {
text-align: center;
}
.ih-leitspruch__text {
color: var(--ih-navy);
font-weight: 800;
font-size: 36px;
line-height: 48px;
letter-spacing: -0.02em;
margin: 0 0 32px; /* v1.9.28: mehr Luft zum Link */
}
.ih-leitspruch__highlight {
box-shadow: inset 0 -0.35em 0 var(--ih-yellow); /* Marker-Effekt */
}
.ih-leitspruch__link {
color: var(--ih-navy);
font-weight: 600;
font-size: 20px; /* v1.9.28: war 18px, wirkte verloren */
text-decoration: underline;
text-decoration-color: var(--ih-yellow-accent);
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
.ih-leitspruch__link:hover {
color: var(--ih-navy-dark);
}
@media (max-width: 768px) {
.ih-leitspruch__text { font-size: 26px; line-height: 36px; }
}
/* ---------- CTA-Sektion (gelbe Box) ---------- */
.ih-cta {
background: var(--ih-yellow);
border-radius: var(--ih-radius-cta);
padding: 64px 80px;
text-align: center;
box-shadow: 0 20px 44px rgba(112, 93, 0, 0.12);
}
.ih-cta h2,
.ih-cta .wp-block-heading {
color: var(--ih-navy);
font-weight: 800;
}
.ih-cta .wp-block-button__link {
background: var(--ih-navy);
color: var(--ih-white);
border-radius: var(--ih-radius-btn);
font-weight: 600;
font-size: 18px;
letter-spacing: 0.02em;
text-transform: uppercase;
padding: 18px 40px;
}
.ih-cta .wp-block-button__link:hover {
background: var(--ih-navy-dark);
}
/* Button-Icons (Figma: rechts, gelb): Inline-Bild im Button-Text –
gleiche Icon-Logik wie überall (SVG aus der Mediathek als ![]()
) */
.ih-cta .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 12px;
}
.ih-cta .wp-block-button__link img {
width: 20px !important;
height: 20px;
flex: 0 0 20px;
}
@media (max-width: 768px) {
.ih-cta { padding: 40px 24px; }
}
/* CTA zweispaltig mit Formular (Pattern 4, v1.9.22):
links Botschaft + Buttons (linksbündig), rechts Formular-Karte */
.ih-cta--split {
text-align: left;
padding: 56px 64px;
}
.ih-cta--split h2 {
font-size: 32px;
line-height: 1.3;
margin-bottom: 12px;
}
/* v1.9.23: Vertrauens-Zeile unter der Headline */
.ih-cta--split .ih-cta__note {
color: var(--ih-navy);
font-size: 17px;
line-height: 26px;
opacity: 0.85;
margin: 0 0 8px;
}
/* v1.9.24: Buttons nebeneinander HART erzwingen – überstimmt auch
eine vertikale Ausrichtung (is-vertical) des Buttons-Blocks */
.ih-cta--split .wp-block-buttons {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
gap: 16px !important;
margin-top: 28px;
}
.ih-cta--split .wp-block-button {
margin: 0 !important;
}
/* v1.9.26 (Variante A): H2 links in der Spalte – geschlossener
„Pitch-Kasten". v1.10.2: wieder oben ausgerichtet, der Leerraum
unten links wird von der Trust-Checkliste gefüllt. */
.ih-cta--split h2 {
text-align: left;
margin-bottom: 28px; /* v1.10.3: mehr Abstand zur Unterzeile */
}
.ih-cta--split h3.ih-cta__sub {
margin-top: 0;
}
.ih-cta--split h3.ih-cta__sub {
color: var(--ih-navy);
font-weight: 800;
font-size: 26px;
line-height: 1.3;
min-height: 0;
margin: 0 0 16px; /* v1.10.3 */
}
.ih-cta--split .ih-card--form {
text-align: left;
}
/* Formular-Karte in der gelben Box: Schatten wärmer (gelber Grund).
v1.9.25: kompakter (Karte, Feld-Abstände, Textarea), damit die
Sektion nicht so hoch wird und links keine Leere entsteht */
.ih-cta--split .ih-card {
box-shadow: 0 16px 32px rgba(112, 93, 0, 0.18);
padding: 24px 28px;
}
.ih-cta--split .ih-card h3 {
margin-bottom: 8px;
}
.ih-cta--split .ih-form p {
margin-bottom: 12px;
}
.ih-cta--split .ih-form textarea {
height: 96px;
min-height: 96px;
}
.ih-cta--split .ih-form input[type="submit"] {
padding: 14px 32px;
}
/* Buttons kompakter, damit beide in eine Reihe passen */
.ih-cta--split .wp-block-button__link {
font-size: 16px !important;
padding: 14px 24px !important;
}
/* v1.10.2: Trust-Checkliste unter den Buttons – Navy-Kreis mit gelbem
Häkchen (Standard-Check wäre gelb-auf-gelb unsichtbar) */
/* v1.10.5: neue Reihenfolge (Buttons ganz unten): Trust-Liste folgt
direkt auf die Note, Buttons bekommen den großen Abstand */
ul.ih-cta__trust {
margin-top: 32px !important;
}
.ih-cta__trust li {
font-weight: 600;
margin-bottom: 14px;
}
.ih-cta--split .ih-cta__trust + .wp-block-buttons,
.ih-cta--split ul.ih-cta__trust ~ .wp-block-buttons {
margin-top: 40px;
}
.ih-cta__trust li::before {
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* v1.10.2: Geschäftsfelder auf Mobil als Wisch-Galerie (scroll-snap) */
@media (max-width: 700px) {
.ih-felder.wp-block-group {
display: flex !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 16px;
padding-bottom: 12px;
}
.ih-felder figure.ih-feld {
flex: 0 0 72%;
scroll-snap-align: start;
}
/* v1.10.23 (Kundenwunsch 20.07.): Bereichs-Kacheln (Produktseite v2)
mobil ebenfalls als Wisch-Galerie statt untereinander */
.ih-bereiche.wp-block-group {
display: flex !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 16px;
padding-bottom: 12px;
}
.ih-bereiche .ih-bereich.wp-block-cover {
flex: 0 0 72%;
scroll-snap-align: start;
}
}
@media (max-width: 768px) {
.ih-cta--split { padding: 40px 24px; }
.ih-cta--split h2 { font-size: 26px; }
}
/* ---------- Footer: Verbände-/Mitgliedschafts-Logos (v1.9.22) ----------
Markup: patterns/footer-verbaende.html (HTML-Element im Footer-Builder,
Zeile über dem Copyright). Logos einheitlich weiß auf Navy. */
/* v1.9.23: weiße Chips statt Weiß-Invertierung (alte PNGs haben
keinen transparenten Hintergrund → Filter erzeugte graue Blöcke)
+ Name als Unterschrift, Logos größer */
.ih-verbaende {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 24px 40px;
padding: 16px 0 8px;
}
.ih-verbaende__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 0;
max-width: 180px;
}
.ih-verbaende__item img {
height: 56px;
width: auto;
min-width: 120px; /* v1.9.28: einheitliche Chip-Breite, ruhigere Reihe */
max-width: 170px;
object-fit: contain;
background: var(--ih-white);
border-radius: var(--ih-radius-btn);
padding: 8px 14px;
box-sizing: content-box;
}
.ih-verbaende__item figcaption {
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
line-height: 18px;
text-align: center;
}
@media (max-width: 600px) {
.ih-verbaende { gap: 16px 24px; }
.ih-verbaende__item img { height: 44px; }
}
/* ---------- Pattern 1: Ansprechpartner-Kachel ----------
Struktur wie alte Site (Label / Region / Name / Trennlinie /
Icon-Links inkl. vCard-Link), Farben aus dem neuen System. */
.ih-kontakt {
background: #f0f0f0;
border-radius: var(--ih-radius);
padding: 40px;
}
/* Gutenberg-Blockabstände in der Kachel neutralisieren
(alle Zeilen kompakt und bündig untereinander wie alte Site) */
.ih-kontakt > * {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
.ih-kontakt__label,
.ih-kontakt__region {
font-size: 16px;
line-height: 27px;
color: #18181d;
}
.ih-kontakt h3 {
color: var(--ih-navy);
font-size: 19px;
line-height: 27px;
font-weight: 700;
}
/* Trennlinie (kurzer Strich, linksbündig) */
.ih-kontakt .wp-block-separator {
width: 28px;
max-width: 28px;
margin: 20px auto 20px 0 !important;
border: none;
border-top: 1px solid #9fa6b4;
opacity: 1;
}
.ih-kontakt ul.ih-kontakt__links {
list-style: none;
margin: 0;
padding: 0;
}
.ih-kontakt__links li {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 10px;
padding: 0;
}
.ih-kontakt__links li:last-child {
margin-bottom: 0;
}
.ih-kontakt__links a {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--ih-navy);
font-size: 16px;
line-height: 24px;
text-decoration: none;
}
.ih-kontakt__links a:hover {
color: var(--ih-navy-dark);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Icons in den Kontakt-Links: ![]()
aus der Mediathek (einheitliche
Icon-Logik ab v1.8.0 – die alten CSS-Masken-Icons sind entfernt) */
/* ---------- Kontaktseite (Pattern 3, v1.9.2) ----------
„Ansprache links, Aktion rechts": Kontakt-Liste + Adress-Box links,
CF7-Formular in .ih-card rechts (Markup: patterns/pattern-3-kontaktseite.html) */
ul.ih-contact-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.ih-contact-list li {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px;
color: var(--ih-navy);
font-size: 16px;
line-height: 24px;
}
.ih-contact-list a {
color: var(--ih-navy);
text-decoration: none;
}
.ih-contact-list a:hover {
color: var(--ih-navy-dark);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Adress-Box: heller Grauton wie Ansprechpartner-Kachel */
.ih-adresse {
display: flex;
gap: 12px;
margin-top: 24px;
padding: 24px;
background: #f0f0f0;
border-radius: var(--ih-radius);
color: var(--ih-navy);
font-size: 16px;
line-height: 24px;
}
.ih-adresse img.ih-li-icon {
margin-top: 3px;
}
.ih-adresse p {
margin: 0;
}
/* Formular-Karte: 2-Zeilen-Reserve der Service-Karten-H3 hier nicht nötig */
.ih-card--form h3 {
min-height: 0;
}
/* Outline-Button (z. B. Anfahrtsbeschreibung, v1.9.3):
Zweitrangige Aktion – Navy-Rahmen statt Fläche, füllt sich beim Hover */
.ih-btn-outline .wp-block-button__link {
background: transparent;
border: 2px solid var(--ih-navy);
color: var(--ih-navy);
border-radius: var(--ih-radius-btn);
font-weight: 600;
font-size: 16px;
letter-spacing: 0.02em;
text-transform: uppercase;
padding: 10px 24px;
}
.ih-btn-outline .wp-block-button__link:hover {
background: var(--ih-navy);
color: var(--ih-white);
}
.ih-adresse + .wp-block-buttons {
margin-top: 24px;
}
/* ---------- Einheitliche Listen-/Inline-Icons ---------- */
img.ih-li-icon {
width: 20px;
height: 20px;
flex: 0 0 20px;
}
/* ---------- Footer: Info-Liste mit gelben Icons (Figma) ----------
Verwendung: HTML-Element im Astra-Footer-Builder, Markup siehe
patterns/footer-info.html */
/* Spalten-Wrapper: weiße Überschrift, kompakter Abstand zur Liste */
.ih-footer-col p {
color: var(--ih-white);
font-size: 18px;
line-height: 28px;
margin: 0 0 12px;
}
ul.ih-footer-info,
ul.ih-footer-plain {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.ih-footer-info li,
.ih-footer-plain li {
color: rgba(255, 255, 255, 0.8);
font-size: 18px;
line-height: 28px;
margin-bottom: 8px;
}
/* Icons als ![]()
im li (einheitliche Icon-Logik) */
.ih-footer-info li {
display: flex;
align-items: flex-start;
gap: 12px;
}
.ih-footer-info li img.ih-li-icon {
margin-top: 4px;
}
.ih-footer-info li a,
.ih-footer-plain li a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
}
.ih-footer-info li a:hover,
.ih-footer-plain li a:hover {
color: var(--ih-white);
}
/* ---------- Glas-Navigation über dem Hero (Figma) ----------
Voraussetzung: Astra Customizer → Header-Builder → Transparenter
Header AKTIV (nur dann liegt der Header über dem Hero).
Feintuning ggf. live nachziehen – Astra-Klassen können je nach
Header-Builder-Konfiguration leicht abweichen. */
.ast-theme-transparent-header .ast-main-header-wrap .main-header-bar,
.ast-theme-transparent-header .ast-primary-header-bar {
/* v1.9.12: Figma-0.2 gilt für HELLE Bilder – auf dunklen Fotos wird
das Glas sonst dunkel. Mehr Weiß + brightness/saturate im Filter
hellen das durchscheinende Bild auf = heller, glasiger Look. */
background: rgba(255, 255, 255, 0.35) !important;
-webkit-backdrop-filter: blur(8px) saturate(150%) brightness(1.3);
backdrop-filter: blur(8px) saturate(150%) brightness(1.3);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: var(--ih-radius);
/* Seitlicher Abstand, damit die Glas-Leiste frei „schwebt" */
max-width: min(1216px, calc(100% - 64px)) !important;
/* 40px Abstand zum Seitenbeginn, damit das ausbrechende Logo
(27px Überhang) nicht am oberen Rand anstößt */
margin: 40px auto 0 !important;
box-shadow: 0 8px 32px rgba(14, 40, 65, 0.08);
overflow: visible; /* Logo darf ausbrechen */
padding: 0 32px;
}
/* v1.10.9: Bedingte Glas-Variante – Produktseiten (Kinder von
„Produkte + Services", Seiten-ID 45) haben HELLE Hero-Bilder:
weniger Weiß + kein brightness, sonst wirkt die Leiste deckend.
v1.12.15: Seiten 219 + 220 ergänzt (helle Hero-Bilder, Christoph 27.08.).
v1.12.22: zusätzlich Body-Klasse `ih-header-hell` (WPCode-Snippet 19) –
sprachunabhängig: Polylang-Übersetzungen (EN …) haben eigene Seiten-IDs,
die ID-Selektoren greifen dort nicht. ID-Selektoren bleiben als Fallback.
v1.12.23: ID-Selektoren 219/220 ENTFERNT – 219 ist die EN-STARTSEITE
(Befund 19.09.: bekam dadurch die helle Variante, Menü schlecht lesbar).
EN-Seiten laufen ausschließlich über `ih-header-hell` (Snippet 19).
⚠️ Seiten-IDs sind umgebungsspezifisch (Staging-Werte!) – beim
Go-Live prüfen/anpassen (steht in der Go-Live-Checkliste)! */
body.ih-header-hell.ast-theme-transparent-header .ast-main-header-wrap .main-header-bar,
body.ih-header-hell.ast-theme-transparent-header .ast-primary-header-bar,
body.parent-pageid-45.ast-theme-transparent-header .ast-main-header-wrap .main-header-bar,
body.parent-pageid-45.ast-theme-transparent-header .ast-primary-header-bar,
body.page-id-45.ast-theme-transparent-header .ast-main-header-wrap .main-header-bar,
body.page-id-45.ast-theme-transparent-header .ast-primary-header-bar {
background: rgba(255, 255, 255, 0.2) !important;
-webkit-backdrop-filter: blur(8px) saturate(150%);
backdrop-filter: blur(8px) saturate(150%);
}
/* v1.10.19: gleiche bedingte Variante fürs Mobil-Flyout (helle
Produktseiten: ohne brightness, weniger Weiß). Die Mobil-LEISTE
erbt die Regel oben bereits (.main-header-bar gilt dort auch). */
@media (max-width: 1280px) {
body.ih-header-hell.ast-theme-transparent-header .ast-mobile-header-content,
body.parent-pageid-45.ast-theme-transparent-header .ast-mobile-header-content,
body.page-id-45.ast-theme-transparent-header .ast-mobile-header-content {
background: rgba(255, 255, 255, 0.35) !important;
-webkit-backdrop-filter: blur(12px) saturate(150%);
backdrop-filter: blur(12px) saturate(150%);
}
}
/* Leiste schmal halten – Astras Customizer-Höhe überstimmen */
.ast-theme-transparent-header .ast-primary-header-bar .site-primary-header-wrap,
.ast-theme-transparent-header .ast-primary-header-bar .ast-builder-grid-row {
min-height: 64px !important;
}
.ast-theme-transparent-header .site-branding,
.ast-theme-transparent-header .ast-site-identity {
padding: 0 !important;
}
/* Nav-Punkte: VERSALIEN, Navy auf Glas (Figma).
v1.9.21: kompakter (15px + weniger Innenabstand), damit die neuen
Punkte ÜBER UNS + DOWNLOADS einzeilig passen; Gewicht bleibt 600
(fetter = breiter = Umbruch). nowrap gegen Umbruch im Punkt selbst. */
.ast-theme-transparent-header .main-header-menu .menu-item > .menu-link {
text-transform: uppercase;
font-weight: 600;
font-size: 15px;
padding: 0 12px !important;
white-space: nowrap;
color: var(--ih-navy) !important;
}
.ast-theme-transparent-header .main-header-menu .menu-item > .menu-link:hover {
color: var(--ih-navy-dark) !important;
}
/* Aktiver Punkt: gelbe 2px-Unterstreichung.
v1.9.15: echte Text-Unterstreichung statt box-shadow – exakt
textbreit + dichter am Text (gilt auch für Dropdown-Einträge) */
.ast-theme-transparent-header .main-header-menu .current-menu-item > .menu-link,
.ast-theme-transparent-header .main-header-menu .current-menu-ancestor > .menu-link {
color: var(--ih-navy) !important;
box-shadow: none;
text-decoration: underline !important;
text-decoration-color: var(--ih-yellow-accent) !important;
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
/* ---------- Sprach-Switch (Polylang, eigener Shortcode – ab v1.8.9) ----------
Markup: WPCode-Snippet 7 [ih_lang_switch], eingebaut als HTML-Element
im Astra-Header-Builder → räumlich getrennt vom Menü (Figma).
/: Auf/Zu ohne JS. Figma: Pille rgba(255,255,255,0.5),
Flagge + „Deutsch" + Chevron. */
.ih-lang {
position: relative;
}
.ih-lang summary {
display: inline-flex;
align-items: center;
gap: 8px;
list-style: none; /* Default-Dreieck weg */
cursor: pointer;
background: rgba(255, 255, 255, 0.5);
border-radius: var(--ih-radius);
padding: 8px 14px;
color: var(--ih-navy);
font-weight: 600;
font-size: 16px;
line-height: 20px;
}
.ih-lang summary::-webkit-details-marker {
display: none;
}
.ih-lang__flag {
width: 20px;
height: auto;
border-radius: 2px;
flex: 0 0 20px;
}
.ih-lang__chevron {
transition: transform 0.15s ease;
}
.ih-lang[open] .ih-lang__chevron {
transform: rotate(180deg);
}
/* Aufklapp-Liste: Glas-Karte unter der Pille (v1.9.13, gleiche
Rezeptur wie die Nav-Leiste) */
.ih-lang .ih-lang__list {
position: absolute;
/* v1.9.19: 15px (Feinjustierung Christoph; 22px war zu tief) →
gleiche Höhe wie das Nav-Dropdown unter dem Glas-Container */
top: calc(100% + 15px);
right: 0;
z-index: 50;
min-width: 180px;
margin: 0;
padding: 6px;
list-style: none;
/* v1.9.14: Dropdowns opaker + kräftiger aufgehellt als die Leiste –
kleinere Fläche, Text braucht verlässlichen Kontrast */
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(10px) saturate(150%) brightness(1.5);
backdrop-filter: blur(10px) saturate(150%) brightness(1.5);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: var(--ih-radius);
box-shadow: var(--ih-shadow-card);
}
.ih-lang__list li {
margin: 0;
}
.ih-lang__list a {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: var(--ih-radius-btn);
color: var(--ih-navy);
font-weight: 600;
font-size: 16px;
text-decoration: none;
}
.ih-lang__list a:hover {
background: rgba(255, 255, 255, 0.75);
}
/* ---------- Header-Dropdowns + Suche im Glas-Look (v1.9.13) ---------- */
/* Nav-Submenu: schwebende Glas-Karte, 8px unter der Leiste */
.ast-theme-transparent-header .main-header-menu .sub-menu {
/* v1.9.14: opaker + heller (siehe .ih-lang__list) */
background: rgba(255, 255, 255, 0.55) !important;
-webkit-backdrop-filter: blur(10px) saturate(150%) brightness(1.5);
backdrop-filter: blur(10px) saturate(150%) brightness(1.5);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: var(--ih-radius);
box-shadow: var(--ih-shadow-card);
padding: 6px;
margin-top: 8px !important;
overflow: visible;
}
/* Unsichtbare Hover-Brücke über die 8px-Lücke – sonst klappt das
Menü beim Überqueren zu */
.ast-theme-transparent-header .main-header-menu .sub-menu::before {
content: "";
position: absolute;
top: -9px;
left: 0;
right: 0;
height: 9px;
}
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item {
border: none !important;
}
/* v1.9.22: !important + white-space normal – die Kompakt-Regel der
Top-Level-Punkte (padding 0/12 !important, nowrap) trifft auch
Submenu-Einträge und hatte das Dropdown zerdrückt */
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item > .menu-link {
background: transparent;
color: var(--ih-navy) !important;
font-size: 14px;
border-radius: var(--ih-radius-btn);
padding: 10px 12px !important;
white-space: normal;
line-height: 20px;
}
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item > .menu-link:hover {
background: rgba(255, 255, 255, 0.75);
color: var(--ih-navy-dark) !important;
}
/* Suchfeld: Glas-Pille wie der Sprach-Switch.
v1.9.18: Selektoren nach echtem Markup (Christophs outerHTML) –
Feld hängt NICHT in .ast-header-search, sondern direkt als
.search-form mit input#search-field. Fläche bewusst nur 0.28,
das Feld liegt AUF der aufgehellten Glas-Leiste. */
/* v1.9.19: Verdacht weißer Kasten = FORM/LABEL hat den weißen
Hintergrund, nicht das Input → Eltern transparent stellen */
.ast-theme-transparent-header form.search-form,
.ast-theme-transparent-header .search-form label {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.ast-theme-transparent-header .search-form .search-field,
.ast-theme-transparent-header input#search-field {
/* v1.9.20: Feld klappt ÜBER Switch/Kontakt auf (Slide-Search) →
muss abdecken statt durchscheinen: fast-deckendes Weiß */
background: rgba(255, 255, 255, 0.94) !important;
border: 1px solid rgba(255, 255, 255, 0.7) !important;
border-radius: var(--ih-radius) !important;
height: 36px !important;
padding: 6px 44px 6px 14px !important;
color: var(--ih-navy) !important;
font-size: 15px;
}
.ast-theme-transparent-header .search-form .search-field::placeholder,
.ast-theme-transparent-header input#search-field::placeholder {
color: rgba(16, 58, 148, 0.55);
opacity: 1;
}
/* Fokus: gelber Ring statt Browser-Blau (konsistent zu .ih-form) */
.ast-theme-transparent-header .search-form .search-field:focus,
.ast-theme-transparent-header input#search-field:focus {
outline: none !important;
border-color: rgba(255, 255, 255, 0.8) !important;
box-shadow: 0 0 0 3px rgba(252, 215, 0, 0.45) !important;
}
/* Lupe/Submit: transparent, Navy-Icon */
.ast-theme-transparent-header .search-form .search-submit,
.ast-theme-transparent-header .search-form button.ast-search-submit {
background: transparent !important;
color: var(--ih-navy) !important;
}
.ast-theme-transparent-header .search-form .ast-search-submit svg,
.ast-theme-transparent-header .search-form .ast-search-submit path {
fill: var(--ih-navy) !important;
}
/* ---------- Header-Rechtsgruppe: Kontakt-Button + Such-Lupe (v1.8.10) ----------
Ziel: einheitliche Höhe mit der Sprach-Switch-Pille (36px:
20px Zeile + 2×8px Padding). Astra-Klassen ggf. live prüfen. */
/* Kontakt-Button (Header-Builder-Button-Element) */
.ast-theme-transparent-header .ast-custom-button-link .ast-custom-button {
padding: 8px 18px !important;
font-size: 16px;
line-height: 20px !important;
border-radius: var(--ih-radius);
font-weight: 600;
}
/* Such-Lupe: gleiche Glas-Box wie der Sprach-Switch, Navy-Icon */
.ast-theme-transparent-header .ast-header-search .astra-search-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.5);
border-radius: var(--ih-radius);
color: var(--ih-navy) !important;
transition: background 0.15s ease;
}
.ast-theme-transparent-header .ast-header-search .astra-search-icon:hover {
background: rgba(255, 255, 255, 0.75);
}
.ast-theme-transparent-header .ast-header-search .astra-search-icon .ast-icon svg {
width: 16px;
height: 16px;
fill: var(--ih-navy);
}
/* ---------- Suche im Mobil-/Tablet-Flyout (v1.10.25) ----------
Kundenwunsch 20.07.: Suche auch Tablet/Mobil; Element liegt im
Flyout (= Dropdown-Inhalt .ast-mobile-header-content in
#ast-mobile-header – NICHT .ast-mobile-popup-drawer, deshalb griff
v1.10.24 nicht; Selektoren jetzt nach Christophs outerHTML).
Astra rendert dort die Slide-Search-Variante: Formular + separater
Lupen-Toggle (.ast-search-icon) – der stand allein rechtsbündig.
Lösung: Formular dauerhaft offen auf voller Breite, Toggle weg,
Feld deckend weiß mit Navy-Text, Submit-Lupe absolut IM Feld.
⚠️ Spezifität: Desktop-Glas-Regeln hängen an input#search-field
(ID) mit !important → hier mit #ast-mobile-header überstimmen. */
#ast-mobile-header .ast-mobile-header-content .ast-header-search,
#ast-mobile-header .ast-mobile-header-content .ast-search-menu-icon {
width: 100% !important;
max-width: none !important;
}
/* Slide-Search-Mechanik stilllegen: Formular immer sichtbar, statisch */
#ast-mobile-header .ast-mobile-header-content .ast-search-menu-icon.slide-search .search-form,
#ast-mobile-header .ast-mobile-header-content .search-form {
position: relative !important;
right: auto !important;
left: auto !important;
top: auto !important;
transform: none !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
display: block;
width: 100% !important;
max-width: none !important;
margin: 0;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Separater Lupen-Toggle raus – die Suche ist dauerhaft offen */
#ast-mobile-header .ast-mobile-header-content .ast-search-menu-icon .ast-search-icon {
display: none !important;
}
/* Label umschließt lt. Markup Input UND Submit-Button */
#ast-mobile-header .ast-mobile-header-content .search-form label {
display: block;
position: static;
width: 100%;
margin: 0;
}
#ast-mobile-header .ast-mobile-header-content input#search-field {
width: 100% !important;
height: 44px !important;
background: #ffffff !important; /* deckend statt Glas – Lesbarkeit auf hellen Heroes */
border: 1px solid rgba(16, 58, 148, 0.18) !important;
border-radius: var(--ih-radius) !important;
padding: 10px 48px 10px 16px !important; /* rechts Platz für die Lupe */
color: var(--ih-navy) !important;
font-size: 16px !important; /* ≥16px verhindert iOS-Auto-Zoom beim Fokus */
box-shadow: 0 2px 8px rgba(14, 40, 65, 0.08) !important;
}
#ast-mobile-header .ast-mobile-header-content input#search-field::placeholder {
color: rgba(16, 58, 148, 0.55) !important;
opacity: 1;
}
#ast-mobile-header .ast-mobile-header-content input#search-field:focus {
outline: none !important;
border-color: rgba(16, 58, 148, 0.3) !important;
box-shadow: 0 0 0 3px rgba(252, 215, 0, 0.45) !important; /* gelber Fokus wie .ih-form */
}
/* Submit-Lupe absolut IM Feld rechts (Button liegt im Label → Bezug = Formular) */
#ast-mobile-header .ast-mobile-header-content .search-form .search-submit,
#ast-mobile-header .ast-mobile-header-content .search-form button.ast-search-submit {
position: absolute !important;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
#ast-mobile-header .ast-mobile-header-content .search-form .search-submit svg {
width: 18px;
height: 18px;
fill: var(--ih-navy) !important;
}
#ast-mobile-header .ast-mobile-header-content .search-form .search-submit path {
fill: var(--ih-navy) !important;
}
/* ---------- Responsive-Fixes (QS 16.07., v1.10.10) ---------- */
/* (2/6) Footer: Mindest-Seitenabstand, fehlte bei ≤1350px bzw. mobil */
@media (max-width: 1350px) {
.site-footer .ast-builder-grid-row {
padding-left: 32px;
padding-right: 32px;
}
}
@media (max-width: 600px) {
.site-footer .ast-builder-grid-row {
padding-left: 20px;
padding-right: 20px;
}
}
/* (4) Hero mobil flacher (652px ist fürs Querformat gedacht) */
@media (max-width: 768px) {
.ih-hero.wp-block-cover,
.ih-hero--sub.wp-block-cover {
min-height: 440px !important;
}
}
/* (3) Mobil-Header v1.10.11: Logo 44px = bleibt IN der Leiste
(kein Überdecken des aufgeklappten Menüs mehr), Burger spiegelt
den Logo-Abstand rechts */
@media (max-width: 1280px) {
/* v1.10.16: per ID statt Klasse – Astra nutzt id="ast-desktop-header"
/ id="ast-mobile-header" (Markup-verifiziert), Klassen existieren
dort nicht → daher griff v1.10.13/14 nie */
#ast-desktop-header {
display: none !important;
}
#ast-mobile-header {
display: block !important;
}
.ast-theme-transparent-header .site-branding img.custom-logo,
.ast-theme-transparent-header .site-logo-img img {
/* v1.10.15: nochmal +10px (Wunsch QS) */
height: 82px !important;
margin: -13px 0 !important;
max-height: none !important;
}
.ast-theme-transparent-header .site-branding {
padding-left: 8px !important;
}
.ast-theme-transparent-header .ast-header-mobile-trigger,
.ast-theme-transparent-header .menu-toggle {
margin-right: 8px;
}
/* Aufgeklapptes Mobil-Menü über allem (statt unter dem Logo) */
.ast-theme-transparent-header .ast-mobile-header-content,
.ast-theme-transparent-header .main-header-bar-navigation {
position: relative;
z-index: 20;
}
.ast-theme-transparent-header .site-branding {
z-index: 1;
}
/* v1.10.14: Mobil-Flyout in ECHTER Glas-Optik (Rezeptur der
Desktop-Dropdowns: 0.55 + blur/saturate/brightness) */
.ast-theme-transparent-header .ast-mobile-header-content {
background: rgba(255, 255, 255, 0.55) !important;
-webkit-backdrop-filter: blur(12px) saturate(150%) brightness(1.5);
backdrop-filter: blur(12px) saturate(150%) brightness(1.5);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: var(--ih-radius);
box-shadow: var(--ih-shadow-card-hover);
/* v1.10.20: exakt gleiche Breite wie die Glas-Leiste
(min(1216, 100% − 64px), zentriert) */
width: min(1216px, calc(100% - 64px));
margin: 8px auto !important;
padding: 10px !important;
}
/* v1.10.16: das Weiß saß auf den Zwischen-Wrappern (Markup-verifiziert) */
.ast-theme-transparent-header .ast-mobile-header-content .ast-main-header-bar-alignment,
.ast-theme-transparent-header .ast-mobile-header-content .main-header-bar-navigation,
.ast-theme-transparent-header .ast-mobile-header-content .site-navigation,
.ast-theme-transparent-header .ast-mobile-header-content .main-navigation,
.ast-theme-transparent-header .ast-mobile-header-content .main-header-menu,
.ast-theme-transparent-header .ast-mobile-header-content .menu-item {
background: transparent !important;
border: none !important;
margin: 0 !important;
}
.ast-theme-transparent-header .ast-mobile-header-content .menu-item > .menu-link {
color: var(--ih-navy) !important;
border: none !important;
border-radius: var(--ih-radius-btn);
padding: 12px !important;
font-size: 15px;
line-height: 20px;
}
/* v1.10.17: Astra legt Weiß direkt auf .menu-link + .sub-menu
(Customizer-Menüfarben, je Breakpoint unterschiedlich) */
.ast-theme-transparent-header .ast-mobile-header-content .menu-link,
.ast-theme-transparent-header .ast-mobile-header-content ul.sub-menu,
.ast-theme-transparent-header .ast-mobile-header-content ul.sub-menu .menu-link {
background: transparent !important;
background-color: transparent !important;
}
/* v1.10.18: Desktop-Dropdown-Glas (backdrop-filter/brightness +
Schatten + Radius) greift auch im Flyout-Submenu und hellte den
dahinterliegenden weißen Seiteninhalt auf = wirkte deckend weiß.
Im Flyout komplett abschalten – das Glas liefert der Container. */
.ast-theme-transparent-header .ast-mobile-header-content .sub-menu {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border-radius: 0 !important;
margin-top: 0 !important;
padding: 0 0 0 12px !important; /* leichte Einrückung der Kinder */
}
.ast-theme-transparent-header .ast-mobile-header-content .sub-menu::before {
content: none !important;
}
/* Hover NACH der Transparent-Regel, damit er gewinnt */
.ast-theme-transparent-header .ast-mobile-header-content .menu-item > .menu-link:hover,
.ast-theme-transparent-header .ast-mobile-header-content .current-menu-item > .menu-link {
background: var(--ih-navy-tint) !important;
}
/* Untermenü-Pfeile navy + in die Zeile integriert */
.ast-theme-transparent-header .ast-mobile-header-content .ast-menu-toggle {
color: var(--ih-navy) !important;
background: transparent !important;
}
/* Astras Deko-/Trennelemente im Flyout neutralisieren */
.ast-theme-transparent-header .ast-mobile-header-content .sub-menu,
.ast-theme-transparent-header .ast-mobile-header-content .menu-link:before,
.ast-theme-transparent-header .ast-mobile-header-content .menu-item:before {
border: none !important;
content: none;
}
}
/* v1.10.16: Gegenstück ab 1281px – Mobil-Header sicher weg */
@media (min-width: 1281px) {
#ast-mobile-header {
display: none !important;
}
#ast-desktop-header {
display: block !important;
}
}
/* (5) Burger-Button im Glas-Look (wie Lupe/Sprach-Switch) */
.ast-theme-transparent-header .ast-header-mobile-trigger,
.ast-theme-transparent-header .main-header-menu-toggle,
.ast-theme-transparent-header .menu-toggle {
background: rgba(255, 255, 255, 0.5) !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
border-radius: var(--ih-radius) !important;
color: var(--ih-navy) !important;
padding: 6px 10px;
}
/* (7) Formulare mobil: Seitenabstände raus, Button volle Breite */
@media (max-width: 600px) {
.ih-cta--split {
padding: 32px 16px;
}
.ih-cta--split .ih-card,
.ih-card--form {
padding: 20px 16px;
}
.ih-card {
padding: 24px 16px;
}
.ih-form input[type="submit"] {
width: 100%;
}
}
/* (8) v1.10.11: Statt Bild-Dopplung → Bildausschnitt mobil steuern.
1. Wahl: „Brennpunkt" direkt am Cover-Block (Editor, wirkt überall).
2. Wahl: Utility-Klasse am Hero-Cover, überstimmt den Ausschnitt
NUR mobil (z. B. Motiv sitzt rechts im Bild → ih-hero--focus-right) */
@media (max-width: 768px) {
.ih-hero--focus-left img.wp-block-cover__image-background {
object-position: 15% 50% !important;
}
.ih-hero--focus-right img.wp-block-cover__image-background {
object-position: 85% 50% !important;
}
.ih-hero--focus-top img.wp-block-cover__image-background {
object-position: 50% 12% !important;
}
}
/* Fallback, falls doch mal zwei getrennte Cover nötig sind */
@media (max-width: 768px) {
.ih-only-desktop {
display: none !important;
}
}
@media (min-width: 769px) {
.ih-only-mobile {
display: none !important;
}
}
/* Logo bricht oben + unten deutlich aus der 64px-Leiste aus (Figma).
Falls das Logo im Customizer eine feste Breite hat, dort auf
~130px stellen – die Höhe hier zieht es über die Leiste hinaus. */
.ast-theme-transparent-header .site-branding img.custom-logo,
.ast-theme-transparent-header .site-logo-img img {
height: 118px;
width: auto;
max-height: none !important;
margin: -27px 0; /* (118 − 64) / 2 = symmetrischer Überhang */
}
/* ---------- v1.11.1: T2-B Feinschliff Futtermittel-Seite ----------
1) Zertifikate-Logos im CONTENT größer – die Basis-Styles von
.ih-verbaende sind fürs Footer-Band (Navy, kleine Chips) ausgelegt.
Scope .ih-section = nur Verwendung im Seiteninhalt, Footer bleibt.
2) Partner-Logo (Diamond V) in der Deko-Karte begrenzen.
Markup-Klasse ih-partner-logo (Pattern) ODER size-medium-Fallback
(so ist auch die bereits live eingebaute Seite ohne Edit abgedeckt). */
.ih-section .ih-verbaende__item {
max-width: 240px;
}
.ih-section .ih-verbaende__item img {
height: 104px;
min-width: 0;
max-width: 240px;
background: transparent;
padding: 0;
border-radius: 0;
}
.ih-section .ih-verbaende__item figcaption {
color: var(--ih-navy-dark);
font-size: 14px;
}
.ih-card--deko .wp-block-image.size-medium img,
.ih-partner-logo img {
max-width: 260px;
height: auto;
}
@media (max-width: 600px) {
.ih-section .ih-verbaende__item img { height: 72px; }
}
/* ============================================================
v1.11.2–v1.11.5: T2-C Über-Uns-Seite (patterns/seite-ueber-uns.html)
v1.11.6 (Rev. 5, Christoph 22.07., QS-Runde 4):
- Prinzip-Icons: ViewBox der SVGs auf Glyphen-BBox getrimmt
(FontAwesome-Innenluft war die Ursache der Größendifferenz),
img jetzt 22px = optisch identisch zu Feature-Icons (92% v. 24px)
- Historie: Pfeil-Navigation (WPCode-Snippet 11) statt Wischen am
Desktop (Scrollbar dort versteckt; mobil bleibt Wischen) ·
Karten MIT Bild = 640px breit (via :has), Bildspalte 220px –
ohne Bild einheitlich 420px
- Zitat-CSS (.ih-prinzipien__zitat) entfernt – Zitat lebt jetzt
oben als Leitspruch (Christophs Live-Umbau)
- Abstand Zertifikate-Chips → Downloads-Karte (48px)
- Team-Grid: Sektions-Abstand via ih-section-Wrapper (Markup)
v1.11.5 (Rev. 4, Christoph 22.07.):
- Prinzipien = helles Tint-Band (full-width), weiße Karten mit
Schatten, Zitat zentriert mit gelbem Marker; Icons auf 28px
- Historie = HORIZONTALE Wisch-Timeline (scroll-snap): Linie
mittig, Karten wechselnd oben/unten, Jahres-Punkte auf der
Linie, Bilder füllen die rechte Kartenhälfte in voller Höhe;
gelber Scroll-Balken. Mobil: eine Reihe, Linie unten.
- Zertifikate + Downloads = eine Sektion (nur Markup)
- Fix Team-Kacheln: Icon-Liste bekam kein Seiten-Padding
(Spezifität .ih-kontakt ul.ih-kontakt__links) → Regel überstimmt
Beschluss unverändert: Timeline CSS-only statt Plugin.
============================================================ */
/* ---------- Geschäftsprinzipien: helles Tint-Band ---------- */
.ih-prinzipien-band {
background: #f2f5fa; /* helles Blaugrau, Navy-Familie */
padding: 96px 32px;
}
.ih-prinzipien-band > h2,
.ih-prinzipien-band > .wp-block-heading,
.ih-prinzipien-band > .ih-prinzipien {
max-width: 1216px !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 768px) {
.ih-prinzipien-band { padding-top: 72px; padding-bottom: 72px; }
}
/* v1.12.6 (Kundenfeedback 29.07.): Liste statt Kacheln.
Markup unverändert; einspaltig, Trennlinien, keine weißen
Karten mehr – Icons + Tint-Band bleiben. */
.ih-prinzipien {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.ih-prinzip {
display: grid;
grid-template-columns: 48px 1fr;
gap: 4px 20px;
align-items: start;
align-content: start;
padding: 24px 0;
border-bottom: 1px solid rgba(16, 58, 148, 0.14);
}
.ih-prinzip:last-child {
border-bottom: none;
}
.ih-prinzip .ih-icon-box {
grid-column: 1;
width: 48px;
height: 48px;
margin: 0;
}
/* v1.11.6: SVGs auf Glyphen-BBox getrimmt; 22px = gemessene
Glyphen-Größe der Feature-Icons (24px × 92% Füllgrad) */
.ih-prinzip .ih-icon-box img {
width: 22px;
height: 22px;
}
.ih-prinzip h3 {
grid-column: 2;
display: flex;
align-items: center;
min-height: 48px;
margin: 0;
color: var(--ih-navy);
font-size: 18px;
line-height: 24px;
}
/* v1.12.6: Text in Spalte 2 (neben dem Icon, unter dem Titel);
max-width begrenzt die Zeilenlänge auf lesbares Maß */
.ih-prinzip p {
grid-column: 2;
margin: 0;
max-width: 820px;
color: var(--ih-navy-dark);
font-size: 16px;
font-weight: 500;
line-height: 25px;
}
/* ---------- Firmenhistorie: horizontale Wisch-Timeline ----------
Navy-Band bleibt; innen scrollt eine Spur (scroll-snap) mit
Karten wechselnd oben/unten an einer horizontalen gelben Linie.
Markup: .ih-timeline > .ih-timeline__spur > .ih-timeline__item
(Karte: __kopf + __body mit p und/oder img; img füllt rechts
die volle Kartenhöhe). */
.ih-historie {
background: var(--ih-navy-dark);
padding: 140px 32px;
}
.ih-historie > h2,
.ih-historie > .wp-block-heading {
max-width: 1216px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.ih-historie h2 {
color: var(--ih-white);
text-align: left !important;
margin-bottom: 56px;
}
/* Zentrierung übernimmt .ih-timeline-wrap (v1.11.7) */
.ih-historie > .ih-timeline-wrap {
max-width: 1216px;
}
@media (max-width: 768px) {
.ih-historie { padding-top: 72px; padding-bottom: 72px; }
}
.ih-timeline {
overflow-x: auto;
padding-bottom: 16px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--ih-yellow) rgba(255, 255, 255, 0.08);
}
/* v1.11.8: Snap nur mobil – am Desktop steuern die Pfeile exakt,
Snap „korrigierte" die Zielposition und machte die Schritte krumm */
@media (max-width: 700px) {
.ih-timeline { scroll-snap-type: x proximity; }
}
/* v1.11.6: Desktop navigiert per Pfeil (Snippet 11) – Scrollbar aus;
Trackpad-/Shift-Mausrad-Scrollen funktioniert weiterhin */
@media (min-width: 701px) {
.ih-timeline { scrollbar-width: none; }
.ih-timeline::-webkit-scrollbar { display: none; }
}
/* v1.11.7: Pfeile als Overlay LINKS/RECHTS auf Höhe der Linie
(Wunsch Christoph, statt oben rechts). Markup: .ih-timeline-wrap
umschließt Buttons + Scroller. */
.ih-timeline-wrap {
position: relative;
max-width: 1216px;
margin: 0 auto;
}
.ih-timeline__pfeil {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.06);
color: var(--ih-yellow);
cursor: pointer;
padding: 0;
transition: background 0.15s ease, opacity 0.15s ease;
}
.ih-timeline__pfeil:hover {
background: rgba(255, 255, 255, 0.14);
}
.ih-timeline__pfeil--prev { left: -20px; }
.ih-timeline__pfeil--next { right: -20px; }
/* deckender Hintergrund, damit durchlaufende Karten nicht stören */
.ih-timeline__pfeil {
background: var(--ih-navy-dark);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 14px rgba(0, 0, 0, 0.35);
border: none;
}
.ih-timeline__pfeil:hover {
background: rgba(255, 255, 255, 0.14);
}
.ih-timeline__pfeil.ist-aus {
opacity: 0.35;
cursor: default;
}
@media (max-width: 1300px) {
.ih-timeline__pfeil--prev { left: 4px; }
.ih-timeline__pfeil--next { right: 4px; }
}
@media (max-width: 700px) {
.ih-timeline__pfeil { display: none; } /* mobil wird gewischt */
}
.ih-timeline::-webkit-scrollbar { height: 8px; }
.ih-timeline::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.08);
border-radius: 4px;
}
.ih-timeline::-webkit-scrollbar-thumb {
background: var(--ih-yellow);
border-radius: 4px;
}
.ih-timeline__spur {
position: relative;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
grid-template-rows: 1fr 56px 1fr;
column-gap: 24px;
width: max-content;
padding: 4px 2px;
}
/* horizontale gelbe Linie mittig über die gesamte Spur */
.ih-timeline__spur::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 2px;
background: rgba(255, 221, 0, 0.3);
}
.ih-timeline__item {
grid-row: 1 / 4;
display: grid;
grid-template-rows: subgrid;
scroll-snap-align: start;
}
/* gelber Meilenstein-Punkt auf der Linie */
.ih-timeline__item::before {
content: "";
grid-row: 2;
align-self: center;
justify-self: center;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--ih-yellow);
box-shadow: 0 0 0 6px rgba(255, 221, 0, 0.18);
}
/* wechselnd oben/unten; Karte „lehnt" an der Linie */
.ih-timeline__item:nth-child(odd) .ih-timeline__card { grid-row: 1; align-self: end; }
.ih-timeline__item:nth-child(even) .ih-timeline__card { grid-row: 3; align-self: start; }
.ih-timeline__card {
display: grid;
grid-template-columns: 1fr auto;
width: 420px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--ih-radius);
overflow: hidden;
transition: background 0.2s ease;
}
.ih-timeline__card:hover {
background: rgba(255, 255, 255, 0.1);
}
.ih-timeline__kopf {
grid-column: 1;
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
padding: 20px 24px 0;
}
.ih-timeline__jahr {
color: var(--ih-yellow);
font-weight: 800;
font-size: 24px;
line-height: 1;
letter-spacing: -0.02em;
}
.ih-timeline__kopf h3 {
margin: 0;
color: var(--ih-white);
font-size: 17px;
line-height: 23px;
}
/* Body löst sich auf: p bleibt links, img wird rechte Karten-Spalte */
.ih-timeline__body { display: contents; }
.ih-timeline__body p {
grid-column: 1;
margin: 0;
padding: 10px 24px 20px;
color: rgba(255, 255, 255, 0.82);
font-size: 15px;
line-height: 24px;
}
/* v1.11.6: Karten MIT Bild werden um die Bildspalte breiter –
Textbreite bleibt für alle Karten gleich (420px + 220px Bild) */
.ih-timeline__card:has(.ih-timeline__body img) {
width: 640px;
}
/* Bild füllt die rechte Kartenspalte in voller Höhe.
v1.11.12 (Desktop): Bild ABSOLUT positioniert, damit es NIE zur
Zeilenhöhe beiträgt – lazy nachladende Bilder haben sonst beim
Durchklicken nachträglich das ganze Modul höher gedrückt.
Höhe kommt nur noch vom Text; Karten mit Bild bekommen eine
Mindesthöhe (deckt auch die 2018er Nur-Bild-Karte ab). */
.ih-timeline__body img {
width: 220px;
height: 100%;
object-fit: cover;
border-radius: 0;
margin: 0;
display: block;
}
@media (min-width: 701px) {
.ih-timeline__card:has(.ih-timeline__body img) {
position: relative;
padding-right: 220px;
min-height: 200px;
}
.ih-timeline__body img {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
}
@media (max-width: 700px) {
.ih-timeline__body img {
grid-column: 1;
}
}
@media (max-width: 700px) {
/* eine Reihe, Linie + Punkte unterhalb der Karten.
v1.11.11: zurück auf 84vw (Beschluss 22.07.: Anschnitt-Signal
nicht nötig – Wisch-Chip + Fortschrittsbalken reichen) ·
Linie auf 28px (= Mitte der 48px-Punktreihe inkl. 4px
Spur-Innenabstand; Punkte saßen 4px über der Linie) */
.ih-timeline__spur {
grid-auto-columns: min(420px, 84vw);
grid-template-rows: auto 48px;
column-gap: 16px;
}
.ih-timeline__spur::before {
top: auto;
bottom: 28px;
transform: translateY(50%);
}
.ih-timeline__item { grid-row: 1 / 3; }
.ih-timeline__item:nth-child(odd) .ih-timeline__card,
.ih-timeline__item:nth-child(even) .ih-timeline__card {
grid-row: 1;
align-self: stretch;
}
.ih-timeline__jahr { font-size: 20px; }
.ih-timeline__card,
.ih-timeline__card:has(.ih-timeline__body img) {
width: 100%;
grid-template-columns: 1fr;
}
.ih-timeline__body img {
grid-column: 1;
grid-row: auto;
width: 100%;
height: 150px;
border-radius: 0 0 var(--ih-radius) var(--ih-radius);
}
}
/* v1.11.9: Swipe-Signal mobil – weicher Ausblend-Verlauf am rechten
Rand, solange rechts noch Einträge liegen (Snippet 11 setzt
.ist-ende, sobald das Ende erreicht ist → Fade weg) */
@media (max-width: 700px) {
.ih-timeline:not(.ist-ende) {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
/* v1.11.10: native Scrollbar aus – ersetzt durch eigenen,
DAUERHAFT sichtbaren Fortschrittsbalken (iOS blendet die
Overlay-Scrollbar nur beim Wischen ein) */
.ih-timeline {
scrollbar-width: none;
}
.ih-timeline::-webkit-scrollbar { display: none; }
}
/* v1.11.10: Fortschrittsbalken (nur mobil; Breite/Position setzt
Snippet 11 Rev. 7.3 im Scroll-Handler) */
.ih-timeline__fortschritt { display: none; }
@media (max-width: 700px) {
.ih-timeline__fortschritt {
display: block;
height: 5px;
margin-top: 10px;
border-radius: 3px;
background: rgba(255, 221, 0, 0.18);
overflow: hidden;
}
.ih-timeline__fortschritt span {
display: block;
height: 100%;
width: 20%;
border-radius: 3px;
background: var(--ih-yellow);
transition: margin-left 0.15s linear;
}
}
/* v1.11.10: „Wischen"-Hinweis-Chip (nur mobil) – wippt sanft und
verschwindet nach dem ersten Wischen (Snippet setzt .hat-gescrollt
am Scroller; Chip liegt als Geschwister dahinter) */
.ih-timeline__hinweis { display: none; }
@media (max-width: 700px) {
.ih-timeline__hinweis {
position: absolute;
top: 40%;
right: 6px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--ih-yellow);
color: var(--ih-navy-dark);
font-weight: 700;
font-size: 13px;
line-height: 1;
padding: 9px 13px;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
pointer-events: none;
animation: ih-wippen 1.6s ease-in-out infinite;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ih-timeline.hat-gescrollt ~ .ih-timeline__hinweis {
opacity: 0;
visibility: hidden;
}
}
@keyframes ih-wippen {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-7px); }
}
/* v1.11.8: Einblende-Effekt – Snippet 11 (Rev. 7) setzt .ih-anim am
Scroller und .ist-sichtbar am Eintrag, sobald er ins Sichtfenster
kommt (einmal sichtbar = bleibt sichtbar). Ohne JS: alles sichtbar. */
.ih-timeline.ih-anim .ih-timeline__item {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.ih-timeline.ih-anim .ih-timeline__item.ist-sichtbar {
opacity: 1;
transform: none;
}
/* ---------- Zertifikate: Hover = Titel-Kennzeichnung ----------
Wie Geschäftsfelder-Labels – Unterschrift wird navy mit gelbem
Unterstrich. KEIN Transform/Schatten auf den Logos (PNGs haben
weiße Hintergründe, Schatten wirkte als grauer Balken). */
.ih-verbaende__item figcaption {
transition: color 0.15s ease;
}
.ih-verbaende__item:has(a:hover) figcaption {
color: var(--ih-navy);
text-decoration: underline;
text-decoration-color: var(--ih-yellow);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
/* Abstand Zertifikate-Chips → Downloads-Karte (Beschluss 22.07.:
eine Sektion, aber mehr Luft dazwischen) */
.ih-verbaende + .wp-block-group.ih-card--deko {
margin-top: 48px !important;
}
/* ---------- Team-Grid: kompakte Foto-Kacheln ----------
Name + Funktion als Overlay unten links AUF dem Foto,
Kontakt-Links darunter. */
.ih-team .ih-kontakt {
height: 100%;
}
.ih-kontakt--foto {
padding: 0 0 24px;
overflow: hidden;
border: 1px solid rgba(16, 58, 148, 0.12);
border-radius: var(--ih-radius);
}
.ih-kontakt--foto .ih-kontakt__foto {
position: relative;
margin: 0 0 18px !important;
}
.ih-kontakt--foto .ih-kontakt__foto img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
display: block;
}
.ih-kontakt--foto .ih-kontakt__foto figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 48px 24px 16px;
background: linear-gradient(transparent, rgba(14, 40, 65, 0.78));
text-align: left;
}
.ih-kontakt__name {
display: block;
color: var(--ih-white);
font-weight: 800;
font-size: 18px;
line-height: 24px;
}
.ih-kontakt__funktion {
display: block;
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
line-height: 20px;
}
/* v1.11.5-Fix: Basis-Regel .ih-kontakt ul.ih-kontakt__links (padding:0)
hatte höhere Spezifität – Icons klebten am linken Rand */
.ih-kontakt--foto p,
.ih-kontakt.ih-kontakt--foto ul.ih-kontakt__links {
padding-left: 24px;
padding-right: 24px;
}
.ih-kontakt--foto p {
padding-bottom: 6px;
}
.ih-kontakt--foto .ih-kontakt__links li {
gap: 14px;
margin-bottom: 12px;
}
/* v1.12.21: Porträt-Variante fürs Team-Grid – Kundenfotos sind hochkant
(Christoph, 18.09.). Anwendung: Zusatzklasse am Grid-Group-Block:
"ih-team ih-team--portraet" → gilt für alle Kacheln des Grids.
3:4 statt 3:2; Overlay-Caption + Rest unverändert. Ohne Klasse
bleibt Querformat (z. B. für Ansprechpartner-Kacheln). */
.ih-team--portraet .ih-kontakt__foto img {
aspect-ratio: 3 / 4;
}
/* ============================================================
v1.12.0 (T2-D, 22.07.): Downloads-Seite, Karriere-Akkordeon,
News-Archiv + Suchergebnisse
============================================================
- .ih-downloads: 2-spaltiges Karten-Grid der Downloads-Seite
- .ih-akkordeon: natives / für Stellenangebote
(kein Plugin, kein JS)
- News-/Such-Archiv: dezente Karten-Optik für Astra-Standard-
Markup. ⚠️ Selektoren nach Astra-Doku, am LIVE-Markup
verifizieren (Learning v1.10.24: Markup anfordern statt raten) –
bei Abweichung outerHTML an Claude. */
/* ---------- Downloads-Grid ---------- */
.ih-downloads {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.ih-downloads > .ih-card {
margin: 0;
padding: 32px;
}
.ih-downloads .ih-card h3 {
min-height: 0; /* 64px-Basisregel hier unnötig */
margin-bottom: 16px;
}
.ih-downloads .ih-download-link {
margin-bottom: 12px;
}
@media (max-width: 781px) {
.ih-downloads { grid-template-columns: 1fr; gap: 16px; }
}
/* ---------- Karriere-Akkordeon (natives details/summary) ---------- */
.ih-akkordeon details {
background: var(--ih-white);
border-radius: var(--ih-radius);
box-shadow: var(--ih-shadow-card);
margin-bottom: 16px;
overflow: hidden;
}
.ih-akkordeon summary {
cursor: pointer;
list-style: none;
position: relative;
padding: 22px 64px 22px 28px;
font-weight: 700;
font-size: 18px;
line-height: 26px;
color: var(--ih-navy-dark);
transition: background 0.2s ease;
}
.ih-akkordeon summary::-webkit-details-marker { display: none; }
.ih-akkordeon summary:hover { background: var(--ih-navy-tint); }
/* Plus/Minus-Indikator im gelben Kreis (rein CSS) */
.ih-akkordeon summary::after {
content: "+";
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ih-yellow);
color: var(--ih-navy-dark);
font-weight: 700;
font-size: 18px;
line-height: 28px;
text-align: center;
}
.ih-akkordeon details[open] summary::after { content: "\2013"; } /* – */
.ih-akkordeon .ih-akkordeon__inhalt {
padding: 0 28px 28px;
}
.ih-akkordeon .ih-akkordeon__inhalt ul {
padding-left: 22px;
}
.ih-akkordeon .ih-akkordeon__inhalt li {
margin-bottom: 6px;
}
@media (max-width: 781px) {
.ih-akkordeon summary { padding: 18px 56px 18px 20px; font-size: 16px; }
.ih-akkordeon .ih-akkordeon__inhalt { padding: 0 20px 20px; }
}
/* ---------- News-Archiv (Beitragsseite) + Suchergebnisse ----------
Astra-Blog-Layout kommt aus dem Customizer (Checkliste 23);
hier nur Karten-Optik + Abstände. */
.blog .ast-article-post,
.archive .ast-article-post,
.search .ast-article-post,
.search .ast-article-single {
background: var(--ih-white);
border-radius: var(--ih-radius);
box-shadow: var(--ih-shadow-card);
padding: 32px;
margin-bottom: 32px;
}
.blog .entry-title a,
.archive .entry-title a,
.search .entry-title a {
color: var(--ih-navy-dark);
}
.blog .entry-title a:hover,
.archive .entry-title a:hover,
.search .entry-title a:hover {
color: var(--ih-navy);
}
/* "Nichts gefunden"-Seite: Suchfeld nicht randlos */
.search-no-results .ast-archive-description {
margin-bottom: 24px;
}
/* ============================================================
v1.12.1 (T2-D Rev. 2, 23.07.): Feedback Christoph
============================================================
1) Hero-lose Seiten (Downloads, Rechtliches, News, Suche, Beiträge):
helle Header-Variante wie Produktseiten + Abstand nach oben
(Header liegt sonst über dem Content).
Technik: body:has(.ih-hero) erkennt Hero-Seiten (Baseline 2023);
für Archiv/Suche/Beiträge zusätzlich explizite Body-Klassen als
Fallback für ältere Browser.
2) Akkordeon: +/− exakt mittig im Kreis (Flex statt line-height).
3) Content-Suchformular („Nichts gefunden"): eigene Optik – die
Glas-Regeln (scope .ast-theme-transparent-header) trafen bisher
AUCH dieses Formular → kaputte Darstellung.
4) Suchergebnis-Polish (Karte-in-Karte neutralisiert, Seiten ohne
irritierendes Änderungsdatum).
5) News-Landingpage: Filter-Chips + Query-Loop-Karten
(Markup: patterns/seite-news.html · JS: WPCode-Snippet 12). */
/* ---------- 1) Header + Abstand auf Hero-losen Seiten ---------- */
/* Helle Glas-Variante (= Produktseiten-Werte aus v1.10.9) */
body.ast-theme-transparent-header:not(:has(.ih-hero)) .ast-main-header-wrap .main-header-bar,
body.ast-theme-transparent-header:not(:has(.ih-hero)) .ast-primary-header-bar,
body.blog.ast-theme-transparent-header .ast-main-header-wrap .main-header-bar,
body.blog.ast-theme-transparent-header .ast-primary-header-bar,
body.archive.ast-theme-transparent-header .ast-main-header-wrap .main-header-bar,
body.archive.ast-theme-transparent-header .ast-primary-header-bar,
body.search.ast-theme-transparent-header .ast-main-header-wrap .main-header-bar,
body.search.ast-theme-transparent-header .ast-primary-header-bar,
body.single-post.ast-theme-transparent-header .ast-main-header-wrap .main-header-bar,
body.single-post.ast-theme-transparent-header .ast-primary-header-bar,
body.error404.ast-theme-transparent-header .ast-main-header-wrap .main-header-bar,
body.error404.ast-theme-transparent-header .ast-primary-header-bar {
background: rgba(255, 255, 255, 0.2) !important;
-webkit-backdrop-filter: blur(8px) saturate(150%);
backdrop-filter: blur(8px) saturate(150%);
}
/* Content unter der schwebenden Leiste beginnen lassen:
40px Leisten-Abstand + 64px Leiste + Luft */
body.ast-theme-transparent-header:not(:has(.ih-hero)) #content,
body.blog.ast-theme-transparent-header #content,
body.archive.ast-theme-transparent-header #content,
body.search.ast-theme-transparent-header #content,
body.single-post.ast-theme-transparent-header #content,
body.error404.ast-theme-transparent-header #content {
padding-top: 152px;
}
@media (max-width: 781px) {
body.ast-theme-transparent-header:not(:has(.ih-hero)) #content,
body.blog.ast-theme-transparent-header #content,
body.archive.ast-theme-transparent-header #content,
body.search.ast-theme-transparent-header #content,
body.single-post.ast-theme-transparent-header #content,
body.error404.ast-theme-transparent-header #content {
padding-top: 124px;
}
}
/* ---------- 2) Akkordeon: Indikator exakt mittig ---------- */
.ih-akkordeon summary::after {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
padding-bottom: 2px; /* optischer Ausgleich der Glyphen-Grundlinie */
}
/* ---------- 3) Content-Suchformular (Suche-Seite / kein Treffer) ---------- */
.site-main .search-form,
.site-main .search-form label {
display: flex;
align-items: stretch;
gap: 12px;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.site-main .search-form {
max-width: 520px;
margin: 24px auto 8px;
}
.site-main .search-form label { flex: 1; gap: 0; }
.site-main .search-form .search-field,
.site-main input#search-field {
width: 100%;
height: 48px !important;
background: var(--ih-white) !important;
border: 1px solid rgba(14, 40, 65, 0.2) !important;
border-radius: var(--ih-radius) !important;
padding: 10px 16px !important;
color: var(--ih-navy-dark) !important;
font-size: 16px;
}
.site-main .search-form .search-field::placeholder {
color: rgba(14, 40, 65, 0.45);
opacity: 1;
}
.site-main .search-form .search-field:focus {
outline: none !important;
border-color: var(--ih-navy) !important;
box-shadow: 0 0 0 3px rgba(255, 221, 0, 0.45) !important;
}
.site-main .search-form .search-submit,
.site-main .search-form button.ast-search-submit {
position: static !important;
flex: 0 0 auto;
height: 48px;
min-width: 48px;
padding: 0 20px !important;
border: none;
border-radius: var(--ih-radius);
background: var(--ih-yellow) !important;
color: var(--ih-navy-dark) !important;
font-weight: 700;
cursor: pointer;
}
.site-main .search-form .ast-search-submit svg,
.site-main .search-form .ast-search-submit path {
fill: var(--ih-navy-dark) !important;
}
/* ---------- 4) Suchergebnis-Polish ---------- */
/* Astras eigene Innen-Box neutralisieren (Karte-in-Karte-Effekt).
⚠️ Falls weiterhin doppelte Rahmen: outerHTML eines Eintrags
an Claude (Learning v1.10.24). */
.blog .ast-article-inner,
.archive .ast-article-inner,
.search .ast-article-inner {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.search .entry-title { font-size: 24px; }
/* Seiten-Treffer: Änderungsdatum irritiert (14. Juli …) → ausblenden */
.search .type-page .entry-meta { display: none; }
.single-post .ast-article-single {
background: var(--ih-white);
border-radius: var(--ih-radius);
box-shadow: var(--ih-shadow-card);
}
/* ---------- 5) News-Landingpage (patterns/seite-news.html) ---------- */
/* Chips erst sichtbar, wenn Snippet 12 sie scharf schaltet
(ohne JS: alle Beiträge sichtbar, keine toten Buttons) */
.ih-news-filter {
display: none;
flex-wrap: wrap;
gap: 12px;
margin: 8px 0 24px;
}
.ih-news-filter.ist-bereit { display: flex; }
.ih-news-filter button {
border: 1px solid rgba(14, 40, 65, 0.2);
background: var(--ih-white);
color: var(--ih-navy-dark);
border-radius: 999px;
padding: 8px 18px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.ih-news-filter button:hover { background: var(--ih-navy-tint); }
.ih-news-filter button.ist-aktiv {
background: var(--ih-navy);
border-color: var(--ih-navy);
color: var(--ih-white);
}
.ih-news ul.wp-block-post-template {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
list-style: none;
padding: 0;
margin: 0;
}
.ih-news li.wp-block-post {
background: var(--ih-white);
border-radius: var(--ih-radius);
box-shadow: var(--ih-shadow-card);
overflow: hidden;
display: flex;
flex-direction: column;
margin: 0;
}
.ih-news li.wp-block-post.ist-versteckt { display: none; }
.ih-news .wp-block-post-featured-image { margin: 0; }
.ih-news .wp-block-post-featured-image img {
display: block;
width: 100%;
aspect-ratio: 21 / 9;
object-fit: cover;
}
.ih-news .ih-news__body {
padding: 24px 28px 28px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.ih-news .wp-block-post-title { font-size: 22px; line-height: 30px; margin: 0; }
.ih-news .wp-block-post-title a { color: var(--ih-navy-dark); text-decoration: none; }
.ih-news .wp-block-post-title a:hover { color: var(--ih-navy); }
.ih-news .ih-news__meta,
.ih-news .ih-news__meta a {
font-size: 14px;
color: var(--ih-navy);
font-weight: 600;
}
.ih-news .wp-block-post-excerpt { margin: 0; font-size: 16px; }
.ih-news .wp-block-post-excerpt__more-link {
color: var(--ih-navy);
font-weight: 700;
text-decoration: underline;
text-decoration-color: var(--ih-yellow-accent);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
@media (max-width: 781px) {
.ih-news ul.wp-block-post-template { grid-template-columns: 1fr; gap: 16px; }
.ih-news .ih-news__body { padding: 20px; }
}
/* ============================================================
v1.12.2 (T2-D Rev. 3, 23.07.): Feedback-Feinschliff
============================================================ */
/* Akkordeon: +/− als gezeichnete Balken statt Schrift-Glyphe –
Manrope-Glyphen sitzen nie exakt mittig, Balken schon. */
.ih-akkordeon summary::after {
content: "";
padding-bottom: 0;
background-color: var(--ih-yellow);
background-image:
linear-gradient(var(--ih-navy-dark), var(--ih-navy-dark)),
linear-gradient(var(--ih-navy-dark), var(--ih-navy-dark));
background-repeat: no-repeat;
background-position: center;
background-size: 12px 2px, 2px 12px; /* Quer- + Längsbalken = Plus */
}
.ih-akkordeon details[open] summary::after {
background-size: 12px 2px, 0 0; /* nur Querbalken = Minus */
}
/* Suche „Nichts gefunden": Astra versteckt seinen TEXT-Submit
(input[type=submit]) per Positionierung – unser position:static
aus v1.12.1 hat ihn wieder sichtbar gemacht (abgeschnittenes
„Suc…"). Nur der Icon-Button bleibt. */
.site-main .search-form input[type="submit"] {
display: none !important;
}
/* News-Karten: Beitragsbilder sind jetzt die Original-Motive der
Beiträge (Logos/Banner, teils schmal) → contain statt cover,
sonst zoomt der Zuschnitt in die Logos. */
.ih-news .wp-block-post-featured-image img {
object-fit: contain;
background: var(--ih-white);
padding: 16px;
}
/* Beiträge ohne Bild (4 Alt-News sind reine Textmeldungen):
Karte beginnt sauber mit dem Titel – kein Extra-CSS nötig,
Platzhalter bewusst keiner. */
/* Zurück-Link unter dem Einzelbeitrag (WPCode-Snippet 13) */
.ih-news-zurueck {
margin: 24px 0 0;
}
.ih-news-zurueck a {
font-weight: 700;
color: var(--ih-navy);
text-decoration: underline;
text-decoration-color: var(--ih-yellow-accent);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
/* ============================================================
v1.12.3 (T2-D Rev. 4, 23.07.): Akkordeon-Glyph-Rest,
Beitragsbild-Darstellung, Zurück-Link nach oben
============================================================ */
/* Akkordeon: die alte Glyphen-Regel aus v1.12.0
(details[open] … content:"–") hat höhere Spezifität als die
v1.12.2-Basisregel → altes Minus lag ZUSÄTZLICH über dem Balken.
Gleiche Spezifität + später im File = gewinnt. */
.ih-akkordeon details[open] summary::after {
content: "";
}
/* News-Karten: Motiv in Originalproportion, mittig, nie beschnitten.
aspect-ratio:auto überstimmt den 21:9-Zuschnitt aus v1.12.1;
dazu liefert das Pattern jetzt sizeSlug "full" (WP gab sonst die
hart zugeschnittene post-thumbnail-Größe aus → Zuschnitt saß
schon in der Bilddatei, CSS konnte das nicht heilen). */
.ih-news .wp-block-post-featured-image {
display: flex;
justify-content: center;
padding: 24px 24px 0;
}
.ih-news .wp-block-post-featured-image img,
.ih-news .wp-block-post-featured-image a {
width: auto;
max-width: 100%;
}
.ih-news .wp-block-post-featured-image img {
aspect-ratio: auto;
max-height: 260px;
object-fit: contain;
padding: 0;
margin: 0 auto;
display: block;
}
/* Einzelbeitrag: Beitragsbild IN der Kachel (Ausgabe via Snippet 13
Rev. 2, Hook astra_entry_content_before), passende Größe,
nie beschnitten. Astras eigene Beitragsbild-Ausgabe bleibt im
Customizer AUS (sonst doppelt + full-bleed-Zuschnitt). */
.ih-beitragsbild {
text-align: center;
margin: 0 0 28px;
}
.ih-beitragsbild img {
width: auto;
max-width: 100%;
max-height: 340px;
object-fit: contain;
display: inline-block;
}
/* Zurück-Link steht jetzt ÜBER dem Beitrag (Snippet 13 Rev. 2) */
.ih-news-zurueck {
margin: 0 0 16px;
}
/* ============================================================
v1.12.4 (T2-D Rev. 4.1, 23.07.): Beitragsbild ohne Schatten
============================================================
Das Theme legt auf wp-post-image einen Drop-Shadow – wirkt in
der weißen Kachel wie ein schwebender weißer Block (Feedback
Christoph). Beschluss: weglassen. */
.ih-beitragsbild img,
.single-post .ast-article-single .wp-post-image {
box-shadow: none !important;
border-radius: 0;
}
/* ============================================================
v1.12.5 (T2-D Rev. 5, 23.07.): Mobil-Abstände Einzelbeitrag,
Suchergebnis-Karten klickbarer
============================================================ */
/* Einzelbeitrag mobil: Luft über dem Zurück-Link + unter der
Vor/Zurück-Leiste (klebte an Header bzw. Footer) */
@media (max-width: 781px) {
.single-post .ih-news-zurueck {
margin: 20px 0 16px;
}
.single-post .ast-single-post-navigation-wrapper,
.single-post .post-navigation {
margin-bottom: 48px;
}
}
/* Suchergebnisse: Klickbarkeit sichtbar machen –
① "Zum Inhalt →"-Link je Karte (Ausgabe: WPCode-Snippet 15)
② Hover-Lift wie bei den übrigen Karten */
.ih-weiterlesen {
margin: 12px 0 0;
}
.ih-weiterlesen a {
font-weight: 700;
color: var(--ih-navy);
text-decoration: underline;
text-decoration-color: var(--ih-yellow-accent);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.search .ast-article-post {
transition: transform 0.25s ease, box-shadow 0.2s ease;
}
.search .ast-article-post:hover {
transform: translateY(-4px);
box-shadow: var(--ih-shadow-card-hover);
}