/* Consultainment Pro – Frontend-Styles 2026 (ergänzt theme.json, kein Framework) */
/* Verbindliches Farbsystem: genau eine Navbar-Hintergrundfarbe, genau eine
Hintergrundfarbe fuer die restliche Seite, eine Akzentfarbe. Als Aliase auf
die bereits vorhandenen theme.json-Presets definiert (navy-950/cyan-500
waren schon vorher die einzigen tatsaechlich als Flaechenfarbe genutzten
Marken-Navy-/Cyantoene) statt einen zweiten, parallelen Variablensatz mit
eigenen Hex-Werten einzufuehren - so bleibt es eine einzige Quelle der
Wahrheit statt zweier konkurrierender Systeme. --color-navbar-bg hat keine
Entsprechung im Farb-Preset (die Navbar nutzte bisher einen eigenen,
losen Hex-Wert per Verlauf) und bekommt darum ihren eigenen Wert - der
bisherige Verlauf-Startwert #142A44, jetzt als deckende Flaeche statt
Verlauf. */
:root {
--color-navbar-bg: #142A44;
--color-page-bg: var(--wp--preset--color--navy-950);
--color-accent: var(--wp--preset--color--cyan-500);
--color-accent-rgb: 23, 185, 196;
--color-text: var(--wp--preset--color--white);
/* Tatsaechlich gemessene Navbar-Hoehe (min-height 62px + Grenzlinie,
siehe .c-header-inner) - zentrale Variable, damit u.a. die Hero-
Hoehenberechnung (.c-hero-video-wrap) nicht mehrfach denselben Wert
hart codiert und bei einer kuenftigen Navbar-Anpassung nur hier
geaendert werden muss. */
--header-height: 62px;
}
/*
* Technische Altlast, bleibt als Absicherung: Kubio hängte (als das Plugin
* noch aktiv war) jedem post-content-Block einen breitenbegrenzten Wrapper
* an. Kubio ist jetzt deaktiviert, die Regel ist inert, schadet aber nicht
* und schützt vor einer versehentlichen Reaktivierung.
*/
.wp-block-kubio-core-post-content__container {
overflow: visible;
}
.wp-block-kubio-core-post-content__container > .alignfull {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
/* WordPress fuegt zwischen den Root-Bloecken (Header-Template-Part, main,
Footer-Template-Part) per :where(.wp-site-blocks) > * automatisch einen
Block-Gap-Abstand ein - das erzeugte sichtbare helle Balken zwischen
dunklem Header/Content und Content/Footer. Beide Selektoren haben
reale Spezifitaet und gewinnen gegen WordPress' :where()-Regel
(Spezifitaet 0). */
#c-main,
footer.wp-block-template-part {
margin-top: 0;
}
/* #c-main hat kein eigenes Padding/Border, dadurch kann die
margin-top der letzten Innensektion (z.B. Abschluss-CTA) nach aussen
"durchschlagen" (klassisches CSS-Margin-Collapsing) und zusaetzlich
zur margin-top des Footers einen sichtbaren Abstand erzeugen.
display:flow-root kapselt #c-main in einen eigenen Block-
Formatting-Context und unterbindet das Durchschlagen zuverlaessig. */
#c-main {
display: flow-root;
background-color: var(--color-page-bg);
}
/* background-color vererbt sich nicht - ohne explizite Deklaration liefert
getComputedStyle() fuer body/#c-main "rgba(0, 0, 0, 0)" (transparent),
auch wenn optisch durch den sichtbaren Body-Hintergrund kein Unterschied
entsteht. Explizit gesetzt, damit beide Ebenen auch technisch exakt
--color-page-bg tragen. */
body {
background-color: var(--color-page-bg);
}
/* Skip-Link: WordPress fuegt seit 6.4 automatisch einen eigenen
Skip-Link fuer Block-Themes ein (Klasse "skip-link screen-reader-
text", zielt korrekt auf #c-main) - ein eigener zweiter Skip-Link
war doppelt gemoppelt und wurde entfernt. Hier nur die Optik an das
Designsystem angepasst. */
.skip-link.screen-reader-text:focus {
background: var(--wp--preset--color--cyan-500);
color: var(--wp--preset--color--navy-950);
font-weight: 600;
padding: 0.75rem 1.25rem;
border-radius: 0 0 8px 0;
z-index: 100000;
}
/* Primaerer Button: einheitliche, deckende Akzentfarbe statt des frueheren
Zwei-Ton-Verlaufs (zwei zusaetzliche Cyan-Werte neben dem eigentlichen
Marken-Akzent --color-accent) - das Farbsystem erlaubt Tuerkis nur als
eine einzige, konsistente Akzentfarbe. transition/hover-Verdunkelung
bleiben, nur die Flaechenfarbe selbst wird jetzt flach statt verlaufend.
theme.json setzt fuer core/button ohnehin bereits "background:
var(--wp--preset--color--cyan-500)" - diese Regel hier ist damit
groesstenteils redundant und dient nur noch der expliziten Klarheit fuer
.wpcf7-form-Submit-Buttons, die keinen Bloecke sind. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
background: var(--color-accent);
transition: filter 150ms ease-out, transform 150ms ease-out;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
filter: brightness(0.9);
}
.wpcf7-form input[type="submit"] {
background: var(--color-accent);
}
.wpcf7-form input[type="submit"]:hover {
filter: brightness(0.9);
}
/* Sichtbare Fokuszustände überall */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
outline: 3px solid var(--wp--preset--color--cyan-500);
outline-offset: 2px;
}
/* Legacy-Absicherung aus der Kubio-Zeit (inert, Kubio ist deaktiviert und
die ID "kubio" existiert am html-Element nicht mehr - bleibt als
Absicherung stehen, siehe Kommentar oben zu .wp-block-kubio-...). */
html#kubio body.wp-theme-consultainment-pro {
overflow-x: clip !important;
overflow-y: visible !important;
}
/* Echte, aktuell wirksame Variante: WordPress' eigene "alignfull"-Regeln
rechnen mit 100vw, das bei vorhandenem Scrollbalken breiter ist als der
tatsaechlich sichtbare Viewport (Browser-Standardverhalten, kein
Layoutfehler dieser Seite) - dadurch entsteht bei laengeren Seiten ein
paar Pixel horizontales Scrollen. clip statt hidden, damit position:
sticky (Header) unangetastet bleibt. */
html, body {
overflow-x: clip;
}
header.wp-block-template-part:has(.c-site-header) {
position: sticky;
top: 0;
z-index: 1000;
}
/* Navbar-Hintergrund: sichtbar helleres, hochwertiges Navy statt des
fast schwarzen navy-950 (Basisfarbe der Seite/des Hero-Videos) - die
Klasse "has-navy-950-background-color" kommt direkt vom Block
(header.html) und hat dieselbe Spezifitaet wie dieser Selektor;
!important stellt sicher, dass die Navbar unabhaengig von der
Ladereihenfolge der WP-Kernstyles immer den neuen Ton zeigt. Deckende
Flaeche statt Verlauf (--color-navbar-bg) - eine einzige Navbar-Farbe,
keine zweite Navy-Abstufung, kein vom Seiteninhalt abhaengiger
transparenter Hintergrund. Gilt unveraendert fuer Desktop, Sticky-
Scroll, Tablet und mobile Ansicht. */
.c-site-header {
background: var(--color-navbar-bg) !important;
border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.22);
}
/* Geoeffnetes Mobilmenue (Offcanvas-Overlay/Responsive-Navigation-Overlay)
traegt dieselbe navy-950-Klasse (overlayBackgroundColor) und bekommt
hier dieselbe deckende Navbar-Farbe, damit es sich nicht farblich vom
uebrigen Header abhebt. Der Selektor ist ueber .c-site-header auf den
Header-Navigationsblock begrenzt (die Footer-Navigation nutzt kein
Offcanvas-Overlay). */
.c-site-header .wp-block-navigation__responsive-container {
background: var(--color-navbar-bg) !important;
}
/* Schlankere Navbar: min-height statt fixer Vertikal-Padding-Werte, damit
die tatsaechliche Hoehe (~62px, siehe --header-height) unabhaengig vom
Logo/Button-Innenraum konsistent bleibt - vorher 0.7rem Padding oben/
unten ergaben mit dem 50px-Logo ~72px Gesamthoehe. */
.c-header-inner {
min-height: 62px;
padding-block: 0.4rem;
gap: 1rem;
align-items: center;
}
.c-header-inner .wp-block-navigation {
--wp--style--root--padding-top: 0;
font-weight: 500;
}
.c-header-inner .wp-block-navigation a {
transition: color 150ms ease-out;
}
/* WP-Core wechselt die Navigation standardmaessig bereits ab 600px auf
die flache Desktop-Zeile (wp-includes/blocks/navigation/style.css,
"@media (min-width:600px)"). Bei Logo+Titel+6 Menuepunkten+CTA-Button
reicht das aber erst ab ca. 1125-1130px Breite (gemessen) - darunter
umbricht die Zeile zweizeilig und die Navbar wird statt ~72px ploetzlich
~138px hoch. Deshalb hier auf 1140px angehoben (etwas Sicherheitsabstand
zum gemessenen Umbruchpunkt): unterhalb bleibt die Core-Regel fuer
Container/Button per !important ausgehebelt und die urspruengliche
Basisregel (Container versteckt, Hamburger-Button sichtbar) wirkt
weiter - identischer Mechanismus wie unterhalb von 600px, nur ueber
einen groesseren Bereich. Es aendert sich dabei nichts an der JS-Logik
(Oeffnen/Schliessen bleibt reines Klassen-Toggle "is-menu-open" ohne
eigene Breite-Abfrage), daher funktioniert das Offcanvas-Menue in
diesem erweiterten Bereich unveraendert. Nur auf den Header-Navigation-
Block begrenzt (".c-site-header") - die Footer-Navigation nutzt
ohnehin "overlayMenu:never" und besitzt gar keinen Hamburger-Button. */
@media (max-width: 1140px) {
.c-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
display: none !important;
}
.c-site-header .wp-block-navigation__responsive-container-open {
display: flex !important;
}
}
/* Logo (ab hier das horizontale "consultainment-navbar-logo.png",
Attachment-ID 353): anders als das vorherige quadratische 1024x1024-
Logo mit viel innerem Freiraum ist diese Datei bereits passend
zugeschnitten (462x281, eigener dunkler Hintergrund im Bild selbst) -
ein Zuschnitt/Wrapper-Crop wie zuvor wuerde das Logo hier nur
verstuemmeln statt es zu verbessern. Der Wrapper ist daher rein
passiv (keine feste Groesse/kein overflow:hidden/kein weisser
Hintergrund mehr), das ![]()
wird stattdessen proportional per
max-width/max-height auf die verfuegbare Navbar-Hoehe herunterskaliert
(object-fit:contain verhindert Verzerrung, auch falls das Bild je
ausgetauscht wird). */
.c-site-header .wp-block-site-logo {
width: auto;
height: auto;
flex-shrink: 0;
overflow: visible;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.c-site-header .custom-logo-link {
display: block;
line-height: 0;
}
.c-site-header .custom-logo {
display: block;
width: auto;
max-width: 94px;
/* Logo-Seitenverhaeltnis 462:281 (~1.644) - bei 53px Hoehe ergibt
sich eine Breite von ca. 87px, damit liegen Breite (86-94px) UND
Hoehe (50-55px) gleichzeitig im geforderten Zielbereich. Zusammen
mit dem vertikalen Navbar-Padding (.c-header-inner: padding-block
0.4rem = 12.8px) ergibt das eine Navbar-Gesamthoehe von ca. 65.8px
(Zielbereich 60-66px). */
height: 53px;
object-fit: contain;
}
/* Mobil: kleinere Logo-Darstellung (Zielbereich 44-48px Hoehe), damit
Logo und Hamburger-Button bei wenig Platz nicht zu dominant wirken
oder sich beruehren. 600px = WP-Cores eigener Standard-Breakpoint
fuer die responsive Navigation (siehe wp-includes/blocks/navigation/
style.css), hier als konsistenter "echtes Mobilgeraet"-Schwellenwert
wiederverwendet. */
@media (max-width: 600px) {
.c-site-header .custom-logo {
height: 46px;
}
}
/* CTA-Button in der schlankeren Navbar etwas kompakter (weniger
Vertikal-Padding als der theme.json-Standardbutton), bleibt aber mit
44px Mindesthoehe komfortabel klickbar/antippbar (WCAG-Zielgroesse). */
.c-site-header .wp-block-button__link {
min-height: 44px;
padding: 0.65rem 1.15rem;
display: inline-flex;
align-items: center;
}
/* Mobiles Offcanvas-Menue: WordPress uebernimmt fuer die aufgeklappte
Vollbild-Liste dieselbe Ausrichtung wie fuer die Desktop-Zeile
(hier "rechtsbuendig" fuer den Abstand zum Projekt-Button) ueber
dieselbe CSS-Variable - das drueckt die Menuepunkte im Overlay an
den rechten Rand und schneidet laengere Eintraege ab. Im geoeffneten
Zustand auf linksbuendig zuruecksetzen und mehr Platz/Lesbarkeit geben. */
.wp-block-navigation__responsive-container.is-menu-open {
--navigation-layout-justification-setting: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right {
--navigation-layout-justification-setting: flex-start;
align-items: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
padding-left: 1.75rem;
padding-right: 1.75rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-size: 1.25rem;
font-weight: 600;
}
/* Footer: mehrspaltiges Raster (Ueber/Produkte/Unternehmen/Rechtliches)
statt zwei loser Gruppen - an die Spaltenstruktur der Referenz
angelehnt, mit vorhandenen Consultainment-Seiten statt erfundener
Links. */
.c-footer {
padding-top: 4rem;
padding-bottom: 3rem;
}
.c-footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
@media (min-width: 700px) {
.c-footer-grid {
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 2rem;
}
}
.c-footer-about {
max-width: 24rem;
}
.c-footer-col-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--wp--preset--color--muted);
margin: 0 0 1rem;
}
.c-footer-col p {
margin: 0 0 0.65rem;
}
.c-footer a {
color: var(--wp--preset--color--white);
}
.c-footer-col a {
color: var(--wp--preset--color--muted);
font-weight: 500;
text-decoration: none;
}
.c-footer a:hover,
.c-footer-col a:hover {
color: var(--wp--preset--color--cyan-500);
}
.c-footer .rcb-sc-link {
color: var(--wp--preset--color--muted);
text-decoration: underline;
}
.c-footer-col .wp-block-navigation {
margin-bottom: 0.65rem;
}
.c-footer-col .wp-block-navigation a {
font-size: 1rem;
font-weight: 500;
padding: 0;
/* Der Navigations-Block traegt sein eigenes textColor="white"-Attribut
(Legacy aus der Vorgaenger-Fassung) - hier auf denselben gedaempften
Ton wie die uebrigen Fussspalten-Links vereinheitlicht. */
color: var(--wp--preset--color--muted) !important;
}
.c-footer-col .wp-block-navigation a:hover {
color: var(--wp--preset--color--cyan-500) !important;
}
/* WordPress' useRootPaddingAwareAlignments zieht alignfull-Bloecke
normalerweise per negativem Margin bis zum Viewport-Rand (rule
".has-global-padding > .alignfull"). Sobald post-content selbst
aber "alignwide" ist (page.html-Template, Unterseiten), setzt
WordPress' eigene Ausnahme-Regel fuer verschachtelte
has-global-padding-Kontexte dieses Margin auf 0 zurueck - vermutlich
bewusst, weil WordPress' eigene Formel (fixer Root-Padding-Betrag)
hier falsch waere: Ein "wide"-begrenztes post-content bleibt bei
JEDER Viewport-Breite gleich breit (zentriert mit wachsendem
Leerraum), waehrend ein fixer Pixel-Versatz nur bei exakt 1280px
Fensterbreite zufaellig aufgeht. Ein erster Versuch mit festem
Pixel-Offset hat genau deshalb bei breiteren Bildschirmen (z.B.
1920px) grosse weisse Raender hinterlassen. Die klassische,
viewport-relative Formel funktioniert unabhaengig von der
tatsaechlichen Fensterbreite, solange post-content selbst zentriert
bleibt (was WordPress' eigene alignwide-Regel bereits sicherstellt).
========================================================================== */
.wp-block-post-content.alignwide > .alignfull {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Breadcrumbs */
.c-breadcrumbs {
font-size: 0.875rem;
color: var(--wp--preset--color--muted);
margin: 0 0 0.75rem;
}
.c-breadcrumbs ol {
list-style: none;
display: flex;
gap: 0.4rem;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.c-breadcrumbs li:not(:last-child)::after {
content: "/";
margin-left: 0.4rem;
color: var(--wp--preset--color--muted);
opacity: 0.5;
}
/* ==========================================================================
Einheitlicher Unterseiten-Header (Breadcrumb + Titel)
========================================================================== */
.c-page-header {
padding-top: var(--wp--preset--spacing--30);
padding-bottom: var(--wp--preset--spacing--30);
}
.c-page-header h1 {
margin: 0;
}
/* ==========================================================================
Hero: Video als visueller Hintergrund direkt unter der Navbar.
Ab 1200px liegen Ueberschrift, Beschreibung UND beide CTA-Buttons
gemeinsam (.c-hero-copy, raw HTML im selben wp:html-Block wie das
Video, siehe Post 12) als voellig transparentes Text-Overlay im
unteren Videobereich - keine Box, kein Balken, keine eigene
Hintergrundflaeche. Lesbarkeit entsteht ausschliesslich durch
mehrschichtige Textschatten. Das Video wird dabei NICHT beschnitten
(object-fit:contain) - ein 16:9-Video kann nicht gleichzeitig
randlos vollbreit UND unbeschnitten UND viewport-fuellend sein; hier
hat "vollstaendig sichtbar" Prioritaet, schmale Rand-/Deckenflaechen
in --color-page-bg sind das bewusst in Kauf genommene Ergebnis (siehe
Abschlussbericht fuer die gemessenen Werte je Breakpoint).
Unter 1200px fehlt der Platz fuer ein ueberlagerungsfreies Overlay mit
zwei Buttons - dort steht das Video im natuerlichen 16:9-Verhaeltnis,
.c-hero-copy (inkl. Buttons) folgt als normaler, linksbuendiger
Textblock im Lesefluss danach. Der fruehere Badge "Direkter Zugang zu
ausgewaehlten Herstellern" wurde vollstaendig aus dem Blockinhalt
entfernt (Post 12); die vorherige Cover-/Lower-Third-Fassung mit
separater CTA-Leiste unter dem Video wurde vollstaendig ersetzt.
========================================================================== */
.c-hero {
position: relative;
padding: 0;
overflow: hidden;
background-color: var(--color-page-bg);
}
/* .c-hero-video-wrap ist ein unmarkiertes (per wp:html eingefuegt)
innerhalb von .c-hero, das selbst "layout":"constrained" nutzt - WP-Core
begrenzt darum jedes nicht als alignfull/alignwide markierte Kind
automatisch auf die Content-Breite (theme.json contentSize: 720px) -
max-width/margin-Override unten stellt den klassischen Full-Bleed-
Ausgleich her. position:relative ist die Voraussetzung dafuer, dass
.c-hero-video/.c-hero-copy ab 1200px als Overlay absolut darin
positioniert werden koennen. */
.c-hero-video-wrap {
position: relative;
max-width: none;
width: 100vw;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
line-height: 0;
overflow: hidden;
background: var(--color-page-bg);
}
/* Basis = Tablet/Mobil (<1200px): Video im natuerlichen 16:9-Verhaeltnis
ohne Beschnitt (object-fit:contain). */
.c-hero-video {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: contain;
background: var(--color-page-bg);
}
/* .c-hero-copy (Ueberschrift, Beschreibung UND Buttons) steht auf
<1200px als normaler, linksbuendiger Block direkt nach dem Video im
Lesefluss - kein Overlay, da hier schlicht kein Platz fuer eine
ueberlagerungsfreie Textflaeche mit zwei Buttons im Video waere. */
.c-hero-copy {
padding: 20px 22px 4px;
text-align: left;
color: var(--color-text);
}
.c-hero-copy h1 {
margin: 0;
font-size: clamp(1.75rem, 7vw, 2.25rem);
line-height: 1.15;
}
.c-hero-copy p {
margin: 1rem 0 0;
font-size: 1rem;
line-height: 1.5;
}
/* .c-hero-actions (Buttons) auf <1200px im normalen Lesefluss direkt
unter der Beschreibung, linksbuendig. Die eigentliche Flex-Zeile ist
".wp-block-buttons" (bereits durch WP-Core als Flex-Container mit
Umbruch/Gap gesetzt) - ".c-hero-actions" bleibt bewusst ein einfacher,
nicht-flexender Abstandshalter, damit hier kein zweiter, redundanter
Flex-Kontext um einen einzigen Flex-Child entsteht. Auf sehr schmalen
Displays stapeln die Buttons automatisch untereinander, sobald sie
nicht mehr nebeneinander passen. */
.c-hero-copy .c-hero-actions {
margin-top: 1.25rem;
padding-bottom: 24px;
}
.c-hero-copy .c-hero-actions .wp-block-buttons {
justify-content: flex-start;
}
/* Ab 1200px: Video vollstaendig und unverzerrt (object-fit:contain,
object-position:center) statt beschnitten - Prioritaet liegt auf
"kein Bildinhalt geht verloren", nicht auf randlosem Vollflaechen-
Bild. Der Wrapper nutzt ungefaehr die verfuegbare Bildschirmhoehe
unterhalb der Navbar (--header-height, zentral gepflegt statt hart
codiert - siehe :root); min-/max-height verhindern ein zu kleines
Video auf sehr niedrigen bzw. ein unnoetig riesiges Video auf sehr
hohen Fenstern. */
@media (min-width: 1200px) {
.c-hero-video-wrap {
height: calc(100svh - var(--header-height));
min-height: 680px;
max-height: 1080px;
}
.c-hero-video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
}
/* Sehr leichte, gleichmaessige Abdunklung des GESAMTEN Videos (12%,
im vorgegebenen 10-15%-Rahmen) statt einer lokalen dunklen Flaeche
nur hinter dem Text - reine Absicherung der Lesbarkeit fuer
Videoframes, in denen Textschatten allein nicht genuegend Kontrast
liefern (z.B. wenn Text direkt vor einer sehr hellen Flaeche wie
den Owatch-Leuchtelementen liegt). Ausschliesslich aus
--color-page-bg abgeleitet, keine neue Farbe, kein Verlauf. Liegt
dank fehlendem z-index auf dem (unpositionierten) Video automatisch
ueber dem Video, aber unter .c-hero-copy (z-index:3);
pointer-events:none verhindert, dass dieses Pseudoelement Klicks
auf darunterliegende Inhalte blockiert. */
.c-hero-video-wrap::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgba(10, 22, 40, 0.12);
pointer-events: none;
}
/* .c-hero-copy ist ab hier ein voellig transparentes Overlay ohne
eigene Flaeche (keine Hintergrundfarbe, kein Rand, kein Radius,
kein Schatten) - Lesbarkeit kommt ausschliesslich aus den
mehrschichtigen Textschatten auf h1/p unten. bottom-Wert per
Screenshot-Pruefung gewaehlt (siehe Abschlussbericht): liegt im
unteren Videobereich, ohne das zentrale Logo zu verdecken. */
.c-hero-copy {
position: absolute;
z-index: 3;
left: 50%;
bottom: clamp(32px, 5vh, 64px);
transform: translateX(-50%);
width: min(1500px, calc(100% - 64px));
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
text-align: center;
color: var(--color-text);
}
.c-hero-copy h1 {
width: 100%;
max-width: 1500px;
margin: 0 auto;
font-size: clamp(2.25rem, 3vw, 3.75rem);
line-height: 1.05;
text-wrap: balance;
text-shadow:
0 3px 8px rgba(0, 0, 0, 0.95),
0 0 24px rgba(0, 0, 0, 0.85);
}
.c-hero-copy p {
width: 100%;
max-width: 1100px;
margin: 0.9rem auto 0;
font-size: clamp(1rem, 1.2vw, 1.2rem);
line-height: 1.45;
text-shadow:
0 2px 5px rgba(0, 0, 0, 1),
0 0 18px rgba(0, 0, 0, 0.9);
}
.c-hero-copy .c-hero-actions {
margin-top: 1.25rem;
padding-bottom: 0;
}
.c-hero-copy .c-hero-actions .wp-block-buttons {
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
}
/* .c-split-* sind die verallgemeinerten, wiederverwendbaren Klassen fuer
das 60/40-Text-Bild-Muster der Referenz, weiterhin im Einsatz auf den
Produktdetailseiten (der Hero der Startseite nutzt seit dem Video-Umbau
kein Spalten-Layout mehr). */
.c-split-grid.wp-block-columns {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 2.5rem !important;
align-items: center;
}
@media (min-width: 900px) {
.c-split-grid.wp-block-columns {
grid-template-columns: 3fr 2fr !important;
gap: 4rem !important;
}
}
.c-split-grid.wp-block-columns > .wp-block-column {
width: auto !important;
flex-basis: auto !important;
margin: 0 !important;
}
.c-split-text {
text-align: left;
}
.c-split-text .wp-block-buttons {
justify-content: flex-start;
}
.c-split-visual {
position: relative;
}
.c-split-visual::before {
content: "";
position: absolute;
inset: -18%;
background: radial-gradient(circle at 50% 50%, rgba(23, 185, 196, 0.25) 0%, rgba(23, 185, 196, 0) 65%);
z-index: 0;
pointer-events: none;
}
.c-split-visual .wp-block-image {
position: relative;
z-index: 1;
margin: 0;
}
.c-split-visual img {
width: 100%;
height: auto;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.12);
/* Der zweite Schatten blendet helle Studio-Hintergruende mancher
Produktrenderings dezent in den Rahmen ein (gleiche Technik wie bei
den Produktkarten) - das Foto/Rendering selbst bleibt unveraendert. */
box-shadow:
0 24px 48px -24px rgba(0, 0, 0, 0.6),
inset 0 0 0 40px rgba(10, 22, 40, 0.04);
}
.c-split-visual .wp-block-image {
position: relative;
overflow: hidden;
border-radius: 20px;
}
/* Permanenter, sehr dezenter Duotone-Tint (dieselbe Technik/Opacity wie
der bestehende Hover-Effekt auf Produktkarten, hier dauerhaft statt nur
bei Hover) - blendet weisse Studio-Hintergruende mancher
Produktrenderings in den dunklen Rahmen ein, ohne das Bild selbst zu
veraendern oder Fotos mit dunklem Hintergrund (z.B. das VR-Hero-Bild)
sichtbar zu verfaelschen. */
.c-split-visual .wp-block-image::before {
content: "";
position: absolute;
inset: 0;
background: var(--wp--preset--color--navy-950);
opacity: 0.1;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 2;
}
/* Unterseiten: Split-Sektion bekommt denselben vertikalen Rhythmus wie die
uebrigen Sektionen, ohne die volle Hero-Bildschirmhoehe. */
.c-split-grid {
padding-top: var(--wp--preset--spacing--40);
padding-bottom: var(--wp--preset--spacing--40);
}
.c-split-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
max-width: 28rem;
}
@media (min-width: 900px) {
.c-split-gallery {
max-width: none;
}
}
.c-split-gallery img {
border-radius: 12px;
width: 100%;
height: 160px;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* ==========================================================================
Vertrauensbereich
========================================================================== */
/* Die USP-Leiste trug bisher ein eigenes backgroundColor "sky-50" (siehe
Post 12), das sich sichtbar vom navy-950-Seitenhintergrund abhob (zwei
nur leicht unterschiedliche Navytoene = sichtbare Farbkante direkt unter
dem Hero). Die Klasse wurde aus dem Blockinhalt entfernt; diese Regel
setzt zusaetzlich explizit dieselbe Seitenhintergrundfarbe, damit
getComputedStyle() hier zuverlaessig --color-page-bg liefert statt nur
"transparent" (die Sektion hat sonst keine eigene, stabile Klasse - der
:has()-Selektor greift dieselbe Technik auf wie ".wp-block-group:has(>
.c-faq-item)" weiter unten in dieser Datei). */
.wp-block-group.alignfull:has(.c-trust-grid) {
background-color: var(--color-page-bg);
}
.c-trust-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--preset--spacing--30);
}
@media (min-width: 700px) {
.c-trust-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Mobile: kompakteres Raster statt gestapelter Vollbreite-Zeilen -
kleinere Icons, damit die zweispaltige Anordnung nicht zu eng wirkt. */
@media (max-width: 479px) {
.c-trust-grid {
gap: var(--wp--preset--spacing--20);
}
.c-trust-icon {
width: 2.25rem;
height: 2.25rem;
}
.c-trust-icon svg {
width: 1.125rem;
height: 1.125rem;
}
.c-trust-item {
gap: 0.6rem;
}
.c-trust-item p {
hyphens: auto;
}
}
.c-trust-item {
display: flex;
gap: 0.85rem;
align-items: flex-start;
min-width: 0;
}
.c-trust-item p {
min-width: 0;
overflow-wrap: break-word;
}
.c-trust-icon {
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
border-radius: 10px;
background: var(--wp--preset--color--navy-700);
border: 1px solid var(--wp--preset--color--sky-100);
display: flex;
align-items: center;
justify-content: center;
color: var(--wp--preset--color--cyan-500);
}
.c-trust-icon svg {
width: 1.375rem;
height: 1.375rem;
}
/* "Warum Consultainment" - vollbreite gestapelte Zeilen statt Icon-Raster,
angelehnt an das "How it works"-Zeilenmuster der Referenz (databahn.ai):
dort steht jeder Schritt als eigene, hervorgehobene Vollbreite-Zeile
untereinander statt in einem Karten-Raster. Max-Breite begrenzt die
Zeilen auf eine lesbare Textbreite, wie im Referenz-Layout. */
.c-why-grid {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 768px;
margin-left: auto;
margin-right: auto;
}
.c-why-item {
display: flex;
gap: 1.1rem;
align-items: center;
min-width: 0;
padding: 1.1rem 1.5rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
@media (hover: hover) {
.c-why-item:hover {
background: rgba(23, 185, 196, 0.06);
border-color: rgba(23, 185, 196, 0.3);
}
}
.c-why-item p {
min-width: 0;
overflow-wrap: break-word;
margin: 0;
font-weight: 500;
color: var(--wp--preset--color--ink);
}
.c-why-icon {
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
border-radius: 10px;
background: var(--wp--preset--color--navy-700);
border: 1px solid var(--wp--preset--color--sky-100);
display: flex;
align-items: center;
justify-content: center;
color: var(--wp--preset--color--cyan-500);
}
.c-why-icon svg {
width: 1.375rem;
height: 1.375rem;
}
/* Praxis-Galerie: asymmetrisches 50/25/25-Verhaeltnis statt drei
gleicher Spalten - Bilder muessen die jeweilige Spaltenbreite fuellen
statt bei ihrer festen "medium"-Groesse zu bleiben. */
.c-practice-gallery .wp-block-image {
height: 100%;
}
.c-practice-gallery .wp-block-image img {
width: 100%;
height: 280px;
object-fit: cover;
}
@media (max-width: 599px) {
.c-practice-gallery .wp-block-image img {
height: 220px;
}
}
/* Das Blumenautomat-Foto ist hochformatig (225x300) - beim Zuschnitt auf
die flachere Spaltenbox wurde bislang oben UND unten beschnitten, wodurch
der markante Schriftzug am oberen Geraeterand verschwand. Zuschnitt auf
den oberen Bereich beschraenken, damit das Geraet inkl. Branding sichtbar
bleibt (verloren geht nur der wenig aussagekraeftige untere Sockel). */
.c-practice-gallery .wp-image-110 {
object-position: top;
}
/* Das VR-Gruppenfoto sitzt in der breiten (50%) Spalte, die deutlich
flacher ist als das Quellbild - beim zentrierten Zuschnitt wurden Koepfe
und die erhobene Hand am oberen Bildrand abgeschnitten. Zuschnitt-Fokus
nach oben verschoben, damit Gesichter/Gesten vollstaendig sichtbar
bleiben (verloren geht nur ein Teil der weniger wichtigen Fussspitzen). */
.c-practice-gallery .wp-image-82 {
object-position: center 25%;
}
/* ==========================================================================
Karten (Produkte, Vorteile)
========================================================================== */
/* Werte 1:1 von databahn.ai gemessen: border-radius 8px, padding 24px,
Rand nur 1px ohne eigene Fuellfarbe (dort: background transparent,
Rand ~rgb(24,28,34) auf naeherungsweise schwarzem Sektionsgrund). Auf
unserer helleren Navy-Flaeche (Markenfarbe, siehe Abschlussbericht)
waere ein derart dunkler Rand unsichtbar - deshalb hier ein
entsprechend helles Pendant (transluzentes Weiss) fuer denselben
"nur Haarlinie, keine Fuellfarbe"-Effekt. */
.c-card {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
padding: 24px;
height: 100%;
transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
}
@media (hover: hover) {
.c-card.c-card--hover:hover {
transform: translateY(-4px);
border-color: rgba(23, 185, 196, 0.45);
box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(23, 185, 196, 0.08);
}
}
/* Partner-Logo-Karten: Farbgebung/Zuschnitt 1:1 von der Live-Seite
(consultainment.info/partner) uebernommen, auf Wunsch des Betreibers. */
.c-partner-card--indigo {
background: #292980;
border: none;
border-radius: 30px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.c-partner-card--light {
background: #F4F4F7;
border: none;
border-radius: 30px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.c-partner-card--light img {
border: 5px solid #D92222;
}
.c-card-image {
margin: -24px -24px 1.5rem;
}
.c-card-image img {
border-radius: 8px 8px 0 0;
width: 100%;
height: 190px;
object-fit: cover;
}
.c-card h3,
.c-card p {
overflow-wrap: normal;
word-break: normal;
hyphens: auto;
}
/* "Mehr erfahren"-Links: dezente Pfeil-Bewegung bei Hover statt eines
statischen Textlinks. Ueber :not(:has(img)) auf Textlinks beschraenkt,
damit Logo-/Bild-Links (z. B. Partner-Karten) unberuehrt bleiben. */
.c-card p:not(:has(img)) a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.c-card p:not(:has(img)) a::after {
content: "\2192";
transition: transform 200ms ease-out;
}
@media (hover: hover) {
.c-card p:not(:has(img)) a:hover::after {
transform: translateX(4px);
}
}
.c-card h3 {
position: relative;
padding-bottom: 0.75rem;
margin-bottom: 1rem;
}
.c-card h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 2.5rem;
height: 3px;
background: var(--wp--preset--color--cyan-500);
border-radius: 2px;
}
/* Bildkonsistenz: einheitlicher, dezenter Schatten plus ein leichter
Cyan-Duotone-Overlay bei Hover (nicht permanent) ueber alle Produktkarten-
und Praxis-Galerie-Bilder, damit unterschiedliche Foto-Herkunft/Belichtung
weniger auffaellt, ohne die echten Fotos zu verfaelschen. */
.c-card-image,
.c-practice-gallery .wp-block-image {
position: relative;
overflow: hidden;
}
.c-card-image img,
.c-practice-gallery .wp-block-image img {
/* Der zweite (weichere) Inset-Schatten blendet den unteren Bildrand
dezent in die jetzt dunkle Kartenflaeche ein - die Fotos selbst
haben teils helle Studio-/Werkfoto-Hintergruende, die sonst als
harte Kante gegen die dunkle Karte stehen wuerden. */
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.10),
inset 0 -56px 40px -32px rgba(10, 22, 40, 0.85);
}
.c-card-image::before,
.c-practice-gallery .wp-block-image::before {
content: "";
position: absolute;
inset: 0;
background: var(--wp--preset--color--cyan-500);
opacity: 0;
mix-blend-mode: multiply;
transition: opacity 200ms ease-out;
pointer-events: none;
}
@media (hover: hover) {
.c-card.c-card--hover:hover .c-card-image::before,
.c-practice-gallery .wp-block-image:hover::before {
opacity: 0.12;
}
}
/* Signatur-Motiv 1: Ordnungszahlen auf Produktkarten - editorielle
Systematik statt generischer Karten-Optik. Zaehlt automatisch per
CSS-Counter, unabhaengig von der Kartenanzahl/-reihenfolge. Auf dem
Bild platziert (nicht im Textbereich), damit keine Ueberlagerung mit
Ueberschrift/Text entstehen kann. */
.c-solutions-grid {
counter-reset: card-counter;
}
.c-solutions-grid .c-card-image::after {
counter-increment: card-counter;
content: counter(card-counter, decimal-leading-zero);
position: absolute;
top: 0.75rem;
right: 1rem;
font-family: var(--wp--preset--font-family--heading);
font-size: 1.5rem;
font-weight: 800;
color: var(--wp--preset--color--white);
text-shadow: 0 1px 8px rgba(10, 22, 40, 0.7), 0 1px 2px rgba(10, 22, 40, 0.9);
line-height: 1;
letter-spacing: 0.02em;
}
/* Signatur-Motiv 2: gepunktete Verbindungslinie ueber zentrierten
Sektions-Ueberschriften - nimmt das Verbindungslinien-Motiv der
Prozess-Timeline als wiederkehrendes Element auf (Positionierung:
"Vermittlung/Verbindung"). Bewusst nur auf zentrierte H2 begrenzt,
damit linksbuendige Unterseiten-Ueberschriften unberuehrt bleiben. */
#c-main h2.wp-block-heading.has-text-align-center {
position: relative;
padding-top: 1.5rem;
}
#c-main h2.wp-block-heading.has-text-align-center::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2.5rem;
border-top: 2px dotted var(--wp--preset--color--cyan-500);
z-index: 1;
}
/* Karten-/Lösungsgrid: CSS-Grid statt Flexbox (WP-Block-Layout setzt
flex-grow:1 auf .wp-block-column, das jede eigene flex-basis
übersteuert und Spalten auf 100% aufbläht — Grid ignoriert das). */
.c-solutions-grid.wp-block-columns {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
}
.c-solutions-grid.wp-block-columns > .wp-block-column {
width: auto !important;
flex-basis: auto !important;
margin: 0 !important;
}
@media (min-width: 600px) {
.c-solutions-grid.wp-block-columns {
grid-template-columns: 1fr 1fr !important;
}
}
@media (min-width: 1100px) {
.c-solutions-grid.wp-block-columns {
grid-template-columns: 1fr 1fr 1fr 1fr !important;
}
}
/* ==========================================================================
Prozess-Timeline (horizontal Desktop, vertikal Mobile)
========================================================================== */
.c-process {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
counter-reset: c-step;
list-style: none;
padding: 0;
margin: 0;
}
@media (min-width: 900px) {
.c-process {
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
position: relative;
}
.c-process::before {
content: "";
position: absolute;
top: 1.375rem;
left: 5%;
right: 5%;
height: 2px;
background: var(--wp--preset--color--sky-100);
z-index: 0;
}
}
.c-process li {
counter-increment: c-step;
position: relative;
padding-left: 3.5rem;
}
@media (min-width: 900px) {
.c-process li {
padding-left: 0;
text-align: center;
}
}
.c-process li::before {
content: counter(c-step);
position: absolute;
left: 0;
top: 0;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--wp--preset--color--cyan-500);
color: var(--wp--preset--color--navy-950);
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
@media (min-width: 900px) {
.c-process li::before {
position: static;
margin: 0 auto 1rem;
}
}
/* ==========================================================================
FAQ-Akkordeon (nativ /, kein JavaScript nötig)
========================================================================== */
.c-faq-item {
border-top: 1px solid var(--wp--preset--color--sky-100);
}
.c-faq-item:last-child {
border-bottom: 1px solid var(--wp--preset--color--sky-100);
}
/* Einspaltig, zentriert, auf Lesebreite begrenzt - so ist die FAQ-Liste in
der Referenz aufgebaut (schmale Spalte statt breitem Zwei-Spalten-Raster),
per :has() auf den umschliessenden Block angewendet, keine
Content-/HTML-Aenderung noetig. */
.wp-block-group:has(> .c-faq-item) {
max-width: 768px;
margin-left: auto;
margin-right: auto;
}
.c-faq-item summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 0;
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: 1.125rem;
color: var(--wp--preset--color--white);
}
.c-faq-item summary::-webkit-details-marker {
display: none;
}
/* Groesseres Touch-Ziel fuer die Akkordeon-Koepfe auf kleinen Bildschirmen. */
@media (max-width: 480px) {
.c-faq-item summary {
padding: 1.5rem 0;
}
}
.c-faq-item summary::after {
content: "+";
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: var(--wp--preset--color--navy-700);
border: 1px solid var(--wp--preset--color--sky-100);
color: var(--wp--preset--color--cyan-500);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
transition: transform 200ms ease-out;
}
.c-faq-item[open] summary::after {
transform: rotate(45deg);
}
.c-faq-item p {
margin: 0 0 1.25rem;
color: var(--wp--preset--color--muted);
}
/* ==========================================================================
Kontaktbereich (Kontaktseite): ersetzt das vorherige Kontaktformular
(Contact Form 7, Shortcode-ID 39) durch echte tel:/mailto:-Links.
Bewusst ohne eigene deckende Hintergrundfarbe/Verlauf - transparente
Flaeche mit dezentem, akzentfarbenem Rahmen auf dem umgebenden
".c-card" (das selbst schon transparent ist). Nur die tatsaechlich
vorhandene Kontaktmoeglichkeit (E-Mail) wird angezeigt; ohne
hinterlegte Telefonnummer entfaellt der "Jetzt anrufen"-Button bewusst
statt eine Nummer zu erfinden. */
.c-contact-options {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin-top: 1.5rem;
}
.c-contact-option {
flex: 1 1 220px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
padding: 1.25rem;
border: 1px solid rgba(var(--color-accent-rgb), 0.3);
border-radius: 10px;
background: transparent;
}
.c-contact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
color: var(--color-accent);
flex-shrink: 0;
}
.c-contact-icon svg {
width: 100%;
height: 100%;
}
.c-contact-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.65rem 1.5rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: filter 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}
/* E-Mail-Button: sekundaerer Stil (transparent, akzentfarbener Rahmen) -
passend zur Vorgabe "transparente Bereiche mit dezenten Rahmen, keine
zusaetzliche deckende Hintergrundfarbe". */
.c-contact-button--email {
background: transparent;
color: var(--color-text);
border: 1px solid var(--color-accent);
}
.c-contact-button--email:hover {
background: rgba(var(--color-accent-rgb), 0.12);
}
.c-contact-button:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
}
/* Sichtbare, per Doppelklick/Dreifachklick auswaehlbare Adresse unter dem
Button - Text statt Bild, damit Besucher sie manuell kopieren koennen. */
.c-contact-value {
margin: 0;
color: var(--color-text);
font-size: 0.9375rem;
word-break: break-word;
}
.c-contact-trust {
margin: 1.5rem 0 0;
color: var(--wp--preset--color--muted);
font-size: 0.875rem;
}
/* ==========================================================================
Projektanfrage: ersetzt das vorherige Formular (Contact Form 7,
Formular-ID 129) durch einen mailto:-Bereich - dieselben Prinzipien
wie beim Kontaktbereich (transparente Flaeche, dezenter Rahmen, keine
neue deckende Farbe/kein Verlauf), aber mit einem deckenden PRIMAEREN
Cyan-Button statt eines sekundaeren Rahmen-Buttons, da hier nur ein
einzelner, klar hervorgehobener Handlungsaufruf noetig ist. */
.c-project-mail {
max-width: 850px;
margin-top: 1.5rem;
}
.c-project-mail-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin-top: 1.5rem;
padding: 0.85rem 2rem;
background: var(--color-accent);
color: var(--color-page-bg);
font-weight: 600;
text-decoration: none;
border-radius: 8px;
transition: filter 150ms ease-out;
}
.c-project-mail-button:hover {
filter: brightness(0.9);
}
.c-project-mail-button:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
}
.c-project-mail-alt {
margin: 1.25rem 0 0;
color: var(--color-text);
}
.c-project-mail-alt a {
color: var(--color-accent);
}
.c-project-mail-trust {
margin: 0.5rem 0 0;
color: var(--wp--preset--color--muted);
font-size: 0.875rem;
}
/* Mobil: Button nutzt fast die volle verfuegbare Breite statt seiner
natuerlichen Inhaltsbreite. */
@media (max-width: 600px) {
.c-project-mail-button {
display: flex;
width: 100%;
}
}
/* ==========================================================================
Formulare (Contact Form 7) - nur Gestaltung, Logik unveraendert
========================================================================== */
.wpcf7-form p {
margin: 0 0 1.25rem;
}
.wpcf7-form label {
display: block;
font-weight: 600;
font-size: 0.9375rem;
margin-bottom: 0.4rem;
color: var(--wp--preset--color--white);
}
.wpcf7-form .required-star {
/* Helleres Rot als der ehemalige Hell-Modus-Ton (#c0392b, 3.3:1 auf
Navy-950 - unter AA): #F87171 erreicht 6.6:1 auf dem jetzt dunklen
Grund, bei dem Label/Legende/Fehlerhinweis liegen. */
color: #F87171;
margin-left: 0.15rem;
font-weight: 700;
}
.wpcf7-form .required-legend {
/* Bewusst ohne opacity: das haette den Kontrast auf 4.24:1 gedrueckt
(Lighthouse-A11y-Audit), unter dem WCAG-AA-Mindestwert 4.5:1 fuer
Fliesstext. Die kleinere Schriftgroesse traegt die "dezente"
Wirkung bereits, ohne die Lesbarkeit zu gefaehrden. */
font-size: 0.8125rem;
color: var(--wp--preset--color--muted);
margin: 0 0 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.wpcf7-form .required-legend .required-star {
color: #F87171;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form select {
/* Ohne border-box addieren Padding/Rand zur width:100% hinzu und die
Felder wuerden ihren Container ueberragen (Browser-Standard ist
content-box). */
box-sizing: border-box;
width: 100%;
padding: 0.75rem 1rem;
/* Bewusst fest statt "sky-100": das Token ist jetzt eine helle
Trennlinie fuer dunkle Flaechen (transparentes Weiss) und waere auf
dem hellen Eingabefeld praktisch unsichtbar. */
border: 1px solid #D5DCE6;
border-radius: 8px;
font-family: var(--wp--preset--font-family--body);
font-size: 1rem;
/* Bewusst fest auf Navy statt der Token-Variable "ink": Eingabefelder
bleiben als helle Flaeche stehen (Formularlogik/-lesbarkeit unveraendert),
waehrend "ink" jetzt die helle Standard-Textfarbe auf dunklem Grund ist -
ueber die Variable wuerde der Feldtext auf dem hellen Feld unsichtbar. */
color: var(--wp--preset--color--navy-950);
background: var(--wp--preset--color--white);
box-shadow: inset 0 1px 2px rgba(10, 22, 40, 0.06);
transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.wpcf7-form textarea {
/* CF7 gibt das Feld standardmaessig mit rows="10" aus - auf dieser
eher schmalen Formularspalte wirkte das unverhaeltnismaessig hoch
(deutlich mehr als fuer eine kurze Projektbeschreibung noetig).
Feste Hoehe statt min-height, damit sie die rows-Vorgabe zuverlaessig
ueberschreibt; weiterhin vertikal durch den Nutzer vergroesserbar. */
height: 9.5rem;
resize: vertical;
}
.wpcf7-form select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5B6B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.9rem center;
background-size: 1.1rem;
padding-right: 2.75rem;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
border-color: var(--wp--preset--color--cyan-500);
outline: none;
box-shadow: 0 0 0 3px rgba(23, 185, 196, 0.25);
}
.wpcf7-form .wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-weight: 400;
font-size: 0.9375rem;
color: var(--wp--preset--color--muted);
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
margin-top: 0.2rem;
width: 1.15rem;
height: 1.15rem;
flex-shrink: 0;
accent-color: var(--wp--preset--color--cyan-500);
}
.wpcf7-form .wpcf7-not-valid-tip {
display: block;
color: #F87171;
font-size: 0.875rem;
margin-top: 0.35rem;
}
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid {
border-color: #c0392b;
}
.wpcf7-form input[type="submit"] {
display: inline-block;
background: var(--wp--preset--color--cyan-500);
color: var(--wp--preset--color--navy-950);
font-family: var(--wp--preset--font-family--body);
font-weight: 600;
border: none;
border-radius: 8px;
padding: 0.85rem 2rem;
font-size: 1rem;
cursor: pointer;
transition: background-color 150ms ease-out, color 150ms ease-out;
}
.wpcf7-form input[type="submit"]:hover {
background: var(--wp--preset--color--cyan-600);
color: var(--wp--preset--color--white);
}
.wpcf7-form input[type="submit"]:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.wpcf7-response-output {
margin: 1.25rem 0 0;
padding: 1rem 1.25rem;
border-radius: 8px;
border: 1px solid #D5DCE6;
font-size: 0.9375rem;
color: var(--wp--preset--color--navy-950);
background: var(--wp--preset--color--white);
}
/* CF7 haengt den Ergebniszustand als Klasse ans