/* ==========================================================================
KU-Technologies – Globale Styles
========================================================================== */
/* --------------------------------------------------------------------------
Farbschema (Root-Variablen)
-------------------------------------------------------------------------- */
:root {
/* — Marken-Farbwelt (unverändert; identisch zur V2-Palette) — */
--color-bg-petrol: #004D4A; /* Basis-Petrol (Header/Footer, Akzentflächen) */
--color-mint: #40E0D0; /* Highlights & Pulsieren */
--color-gold: #C5A059; /* Dezentere Akzente */
--color-teal: #00A39E; /* Farbverlauf-Komponente */
--color-text-light: #FFFFFF;
--color-text-muted: #A0C0BF;
/* — Heller Header/-Footer (Variante 1): edles Mint-Weiß als harmonischer
Übergang zur Seite; dunkle Anthrazit-Schrift wie im Logo-Wortzeichen,
Hover wechselt elegant ins Petroleum-Grün des Logos. — */
--surface: #f3f7f6; /* edles, sehr helles Mint-Weiß für Header & Footer */
--petrol: #28332f; /* Anthrazit (aus „KU-TECHNOLOGIES"): Navi-/Footer-Text */
--petrol-deep: #004D4A; /* Petroleum-Grün des Logos: Hover/aktiv */
--petrol-line: rgba(40, 51, 47, 0.14); /* feine, dezent dunkle Trennlinien & Rahmen */
--ink: #28332f; /* Anthrazit-Fließtext (Dropdown-Links) */
--ink-muted: #5d6b67; /* gedämpftes Anthrazit-Grau (Sekundärtext) */
/* Fließender Header/Footer-Verlauf: links hell (Logo/Branding) → rechts tiefes
Petrol. Identisch in Header & Footer (eine Quelle). Gleichmäßiger Mehrstufen-
Verlauf ("Smoothie"): die helle Zone deckt die Branding-Spalte ab, blendet
dann weich, aber vollständig ins Dunkle über – bevor die Textspalten 2–4
(heller Text) beginnen. So bleibt jeder Footer-Text gestochen scharf. */
--hf-gradient: linear-gradient(to right, #f3f7f6 0%, #f3f7f6 24%, #4f7d77 32%, #0f4640 41%, #06231f 54%, #03201d 100%);
--hf-deep: #04211e; /* tiefes Petrol-Ende (Fallback & Mobile-Solid) */
--hf-text: rgba(255, 255, 255, 0.92);/* Sekundärtext/Links auf dunklem Verlaufsteil */
--hf-strong: #ffffff; /* Navi-/Kontakt-Text auf dunklem Verlaufsteil */
--hf-heading: var(--color-mint); /* Footer-Überschriften auf dunklem Verlaufsteil */
/* — V2-Designsystem: tiefe „Abyss"-Hintergründe — */
--abyss: #04100f;
--abyss-2: #061715;
--panel: #08201e;
--panel-2: #0a2826;
/* — Linien, Glas & Glanz (V2) — */
--line: rgba(64, 224, 208, 0.12);
--line-strong: rgba(64, 224, 208, 0.28);
--glass: rgba(10, 38, 36, 0.55);
--glass-brd: rgba(64, 224, 208, 0.16);
--glow-teal: rgba(0, 163, 158, 0.55);
--glow-mint: rgba(64, 224, 208, 0.45);
/* — Typografie (V2) — */
--font-display: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
/* — Radien & Easing (V2) — */
--radius: 18px;
--radius-lg: 26px;
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
/* — Cursor-Position für das Hintergrund-Glühen (von JS gesetzt) — */
--mx: 50%;
--my: 30%;
/* — V4.3: Helle Mintweiß-Karten auf dunklem Seitengrund —
Karteninhalte wechseln von Glas-Dunkel auf edles Mintweiß mit
dunkler Petrol-/Anthrazit-Schrift. Die Seiten-Atmosphäre (Abyss,
Blobs, Glow, Mesh) bleibt unverändert dunkel. */
--card-bg: #F4FBF9; /* Mintweiß: Standard-Kartenfläche */
--card-bg-2: #FDFFFE; /* fast Weiß: Kacheln AUF Mintweiß-Panels */
--card-heading: #0c3835; /* dunkles Petroleum: Karten-Überschriften */
--card-ink: #1d3a37; /* dunkles Petrol-Anthrazit: Fließtext */
--card-muted: #4c6763; /* gedämpfter Sekundärtext auf Mintweiß */
--card-line: rgba(0, 77, 74, 0.16); /* feiner Petrol-Rand */
--card-line-strong: rgba(0, 77, 74, 0.32);
--card-teal: #007a74; /* abgedunkeltes Teal: Akzente/Links auf hell */
--card-gold: #96762f; /* abgedunkeltes Gold: Labels auf hell */
--card-shadow: 0 22px 45px -26px rgba(2, 26, 24, 0.55),
0 4px 14px -8px rgba(2, 26, 24, 0.20);
--card-shadow-hover: 0 32px 60px -28px rgba(2, 26, 24, 0.60),
0 8px 20px -10px rgba(2, 26, 24, 0.24);
}
/* --------------------------------------------------------------------------
Basis-Reset & FOUC-Schutz
Hintergrund & Textfarbe direkt auf html/body, damit beim Laden
niemals eine weiße, ungestylte Seite aufblitzt.
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
background-color: var(--abyss);
color: var(--color-text-light);
font-family: var(--font-body);
}
html {
scroll-behavior: smooth;
/* Anker-Sprünge landen nicht unter dem schwebenden Sticky-Header */
scroll-padding-top: 6rem;
/* Transformierte/skalierte Elemente (3D-Bühne, Hover-Scale) dürfen nie
horizontales Scrollen erzeugen. "clip" statt "hidden", da hidden
einen Scroll-Container erzeugen und position: sticky brechen würde. */
overflow-x: clip;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
/* V2-Basisatmosphäre: tiefes Petrol-Verlaufsfeld (fixiert hinter dem Inhalt) */
background:
radial-gradient(120% 90% at 50% -10%, #0a2422 0%, var(--abyss) 55%, #020a09 100%)
fixed no-repeat;
}
main {
flex: 1;
}
/* Lange deutsche Komposita (z. B. „Unternehmenswebseiten") dürfen auf
schmalen Screens niemals horizontal überlaufen: Silbentrennung gemäß
lang="de", harter Umbruch als letzte Rettung. */
h1, h2, h3, h4 {
font-family: var(--font-display);
overflow-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
}
/* ==========================================================================
Cyber-Grid-Hintergrund & strikte Z-Index-Hierarchie
z-index 1 → Cyber-Grid (fixierter Hintergrund)
z-index 2 → Ebene für spätere animierte Farbnebel (pointer-events: none!)
z-index 3 → kompletter Seiteninhalt (Texte, Karten, Formulare)
z-index 100 → Navigationsleiste/Header
========================================================================== */
/* Hauchdünnes, fixiertes Tech-Raster über die ganze Viewport-Fläche */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
background-image:
linear-gradient(rgba(64, 224, 208, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(64, 224, 208, 0.03) 1px, transparent 1px);
background-size: 64px 64px;
}
/* Blurry Mesh Blobs (Ebene 2): großflächige, extrem weichgezeichnete
Farbnebel in Mint, Gold und Teal. pointer-events: none stellt sicher,
dass jeder Klick physikalisch durch diese Ebene durchgeht. */
.mesh-blobs {
position: fixed;
inset: 0;
z-index: 2;
overflow: hidden;
pointer-events: none;
}
/* Parallax-Ebene pro Nebel: GSAP verschiebt beim Scrollen die Ebene
(Tiefen-Dynamik), während die CSS-Keyframes darunter ungestört den
Blob selbst treiben lassen – beide Transforms kollidieren so nie. */
.blob-layer {
position: absolute;
inset: 0;
will-change: transform;
}
/* Der Blur ist statisch, animiert wird ausschließlich translate3d/scale –
die Blobs leben damit auf eigenen, hardwarebeschleunigten Layern. */
.blob {
position: absolute;
border-radius: 50%;
filter: blur(120px);
transform: translate3d(0, 0, 0);
will-change: transform;
/* Auf dem tiefen Abyss-Grund leuchten die Nebel wie eine V2-Aurora auf */
mix-blend-mode: screen;
}
.blob-mint {
top: -12%;
left: -10%;
width: 46vw;
height: 46vw;
background: radial-gradient(circle, rgba(64, 224, 208, 0.30), transparent 70%);
animation: blob-drift-1 26s ease-in-out infinite alternate;
}
.blob-gold {
bottom: -15%;
right: -10%;
width: 40vw;
height: 40vw;
background: radial-gradient(circle, rgba(197, 160, 89, 0.18), transparent 70%);
animation: blob-drift-2 32s ease-in-out infinite alternate;
}
.blob-teal {
top: 35%;
left: 55%;
width: 36vw;
height: 36vw;
background: radial-gradient(circle, rgba(0, 163, 158, 0.30), transparent 70%);
animation: blob-drift-3 38s ease-in-out infinite alternate;
}
@keyframes blob-drift-1 {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(12vw, 9vh, 0) scale(1.15); }
}
@keyframes blob-drift-2 {
from { transform: translate3d(0, 0, 0) scale(1.1); }
to { transform: translate3d(-10vw, -10vh, 0) scale(0.95); }
}
@keyframes blob-drift-3 {
from { transform: translate3d(0, 0, 0) scale(0.95); }
to { transform: translate3d(-9vw, 11vh, 0) scale(1.1); }
}
/* Mobile: kleinerer Blur-Radius schont GPU & Akku */
@media (max-width: 768px) {
.blob {
filter: blur(70px);
opacity: 0.85;
}
}
@media (prefers-reduced-motion: reduce) {
.blob {
animation: none;
}
}
/* --------------------------------------------------------------------------
V2-Atmosphäre (per JS erzeugt): cursorgesteuertes Glühen (.bg-glow) und
Partikel-Netz (#mesh). Beide liegen als Nebel-Ebene (z-index 2) hinter dem
Inhalt (z-index 3) und sind klick-transparent (pointer-events: none), damit
echte Buttons/Links niemals blockiert werden.
-------------------------------------------------------------------------- */
.bg-glow {
position: fixed;
inset: 0;
z-index: 2;
pointer-events: none;
background: radial-gradient(40rem 40rem at var(--mx) var(--my),
rgba(0, 163, 158, 0.16), transparent 60%);
}
#mesh {
position: fixed;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
.bg-glow,
#mesh {
display: none;
}
}
/* Seiteninhalt liegt verlässlich über Grid & Nebel */
main,
.site-footer {
position: relative;
z-index: 3;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
/* ==========================================================================
Header
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
width: 100%;
/* Kompakte Einzeilen-Leiste: Logo links, Navigation rechts bündig */
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1.5rem;
padding: 0.5rem clamp(1.25rem, 4vw, 2.5rem);
/* Fließender Verlauf: links hell beim Logo, nach rechts tiefes Petrol */
background-color: var(--hf-deep); /* Fallback */
background-image: var(--hf-gradient);
border-bottom: 1px solid var(--petrol-line);
box-shadow: 0 6px 24px -16px rgba(0, 0, 0, 0.35);
}
/* --------------------------------------------------------------------------
Header-Bar: trägt nur noch das Logo (Desktop) bzw. Logo + Hamburger (Mobile).
Schrumpft auf Desktop auf Logobreite, damit die Nav rechts bündig sitzt.
-------------------------------------------------------------------------- */
.header-bar {
display: flex;
flex: 0 0 auto;
align-items: center;
}
/* --------------------------------------------------------------------------
Logo (Header & Footer): Originalgrafik assets/logo.jpg + pulsierender Punkt
-------------------------------------------------------------------------- */
.logo-wrapper {
position: relative;
display: inline-block;
line-height: 0;
}
/* Helle Kapsel auf dem #f3f7f6-Header: rahmt das Logo dezent ein, feine
Anthrazit-Kontur statt dunklem Glas – harmonisch zum hellen Hintergrund.
HINWEIS LOGO-DATEI: Sobald das freigestellte Logo mit transparentem
Hintergrund vorliegt (assets/logo.png), genügt:
1) im HTML-![]()
src="assets/logo.png" eintragen,
2) bei .logo-link Hintergrund/Border/Schatten entfernen (randlos auf das
Mint-Weiß setzen) – .logo-img steht bereits auf normalem Blend-Modus.
Bis dahin rahmt die feine Kapsel die JPG sauber ein; die dunkle Logo-
Schrift bleibt auf dem hellen Grund perfekt lesbar. */
.logo-link {
position: relative;
display: inline-block;
padding: 0.3rem 0.6rem;
color: var(--petrol); /* Alt-Text-Farbe, falls das Logo fehlt */
background: #ffffff;
border: 1px solid var(--petrol-line);
border-radius: 0.85rem;
overflow: hidden; /* Bildecken folgen der Kapselrundung */
box-shadow: 0 2px 10px -3px rgba(0, 77, 74, 0.14);
transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.logo-link:hover {
border-color: var(--petrol-deep);
box-shadow: 0 6px 16px -4px rgba(0, 77, 74, 0.20);
}
/* Logo wird auf dem hellen Header in seiner echten Farbwelt gezeigt –
kein Blend-Modus nötig. Kompakte, aber gut lesbare Höhe. */
.logo-img {
display: block;
height: clamp(2.6rem, 4.5vw, 3.1rem);
width: auto;
}
/* Der pulsierende Punkt: liegt absolut exakt über dem Punkt des "U" in der
Logografik. Die top/left-Prozentwerte sind auf die Logodatei abzustimmen –
Feinjustierung nach Einbau von assets/logo.jpg. */
.logo-pulse-dot {
position: absolute;
/* Exakt auf dem freistehenden mintgrünen Punkt über dem „U" im KU-Monogramm.
Punkt per Connected-Component-Analyse am Logo isoliert (runder 21×21-Blob,
Zentrum ≈ 28,1%/21,6% der Bildfläche). */
top: 22.1%;
left: 29.1%;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--color-mint);
animation: pulse 2s ease-in-out infinite;
pointer-events: none;
/* Dauerhaft animiert → eigene Compositor-Ebene gegen Mikroruckler */
will-change: transform, opacity;
}
/* Footer-Logo ist größer skaliert und hat mehr Padding → der Bildanteil am
Wrapper verschiebt sich minimal. Eigene Feinjustierung, damit der Leuchtpunkt
auch hier haargenau auf dem U-Knauf sitzt (deckungsgleich mit dem Header). */
.footer-brand .logo-pulse-dot {
top: 23.9%;
left: 29.9%;
}
/* Weiches, lebendiges Glühen: pulsierender box-shadow + sanfte Skalierung */
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 0.65;
box-shadow: 0 0 0 0 rgba(64, 224, 208, 0.45);
}
50% {
transform: scale(1.35);
opacity: 1;
box-shadow: 0 0 12px 4px rgba(64, 224, 208, 0.7);
}
}
/* --------------------------------------------------------------------------
Hamburger-Button (nur Mobile sichtbar)
-------------------------------------------------------------------------- */
.nav-toggle {
display: none;
position: relative;
z-index: 130; /* bleibt über dem Full-Screen-Overlay klickbar */
padding: 0.6rem 0.4rem;
background: none;
border: none;
cursor: pointer;
}
.nav-toggle span {
display: block;
width: 26px;
height: 2px;
margin: 5px 0;
border-radius: 2px;
background-color: var(--petrol);
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* --------------------------------------------------------------------------
Trennlinie unter dem Logo: in der kompakten Einzeilen-Leiste nicht mehr
nötig – die Petrol-Bottom-Border des Headers übernimmt das. Im Markup
bleibt das
erhalten, wird hier aber ausgeblendet.
-------------------------------------------------------------------------- */
.gold-divider {
display: none;
}
/* ==========================================================================
Navigation
========================================================================== */
.main-nav {
/* Rückt rechts bündig neben das Logo (füllt den Rest der Leiste) */
flex: 1 1 auto;
min-width: 0;
}
.main-nav > ul {
display: flex;
flex-wrap: wrap; /* Menüpunkte brechen auf schmalen Screens sauber um */
justify-content: flex-end;
align-items: center;
gap: 0 clamp(1.25rem, 2.5vw, 2.25rem);
}
.main-nav a {
display: inline-block;
padding: 0.55rem 0.15rem;
font-size: 0.88rem;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--hf-strong); /* klares Weiß auf dem dunklen Verlaufsteil rechts */
transition: color 0.3s ease, text-shadow 0.3s ease;
}
/* Eleganter Hover: feine Mint-Unterlinie wächst von links ein.
Nur auf die Top-Level-Links (nicht auf Dropdown-Einträge) angewandt,
damit sich die Animation nicht mit dem Mobile-Chevron beißt. */
.main-nav > ul > li > a {
position: relative;
background-image: linear-gradient(var(--color-mint), var(--color-mint));
background-repeat: no-repeat;
background-position: left 88%;
background-size: 0% 1.5px;
transition: color 0.3s ease, text-shadow 0.3s ease, background-size 0.35s var(--ease);
}
/* Hover: Text leuchtet elegant in Mint auf, Unterlinie wächst mit */
.main-nav > ul > li > a:hover,
.main-nav > ul > li > a:focus-visible {
color: var(--color-mint);
text-shadow: 0 0 12px rgba(64, 224, 208, 0.55);
background-size: 100% 1.5px;
}
/* --------------------------------------------------------------------------
Dropdown "Leistungen" – rein per CSS-Hover, mit Backdrop-Blur
-------------------------------------------------------------------------- */
.has-dropdown {
position: relative;
}
.dropdown {
position: absolute;
top: 100%;
left: 50%;
z-index: 100;
min-width: 16rem;
padding: 0.75rem 0;
background-color: var(--surface);
border: 1px solid var(--petrol-line);
border-radius: var(--radius);
box-shadow: 0 20px 45px -12px rgba(0, 77, 74, 0.25);
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(0.75rem);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0.25rem);
}
/* Übergeordneter Einstiegspunkt „Leistungen im Überblick": goldene
Auszeichnung + feine Trennlinie zu den Unterseiten darunter */
.dropdown .dropdown-overview {
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--petrol-line);
}
.dropdown .dropdown-overview a {
font-weight: 700;
color: var(--petrol);
}
.dropdown .dropdown-overview a:hover {
color: var(--petrol-deep);
}
.dropdown a {
display: block;
padding: 0.6rem 1.5rem;
font-size: 0.85rem;
text-transform: none;
letter-spacing: 0.03em;
white-space: nowrap;
text-align: left;
color: var(--ink);
transition: color 0.25s ease, background-color 0.25s ease;
}
.dropdown a:hover {
color: var(--petrol-deep);
background-color: rgba(0, 77, 74, 0.06);
}
/* --------------------------------------------------------------------------
Mobile Navigation (max-width: 768px):
Logo schrumpft & rückt nach links, Hamburger rechts, Desktop-Nav wird
zum bildschirmfüllenden Petrol-Overlay
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
html {
/* Kompakter Mobile-Header → kleinerer Anker-Versatz */
scroll-padding-top: 5rem;
}
/* Solides Weiß (kein Blur): so bleibt der Header ein sauberer
Containing-Block-freier Hintergrund für das Full-Screen-Overlay. */
.site-header {
padding: 0.5rem 1.25rem;
}
/* Logo links, Hamburger rechts: Bar spannt die volle Breite */
.header-bar {
flex: 1 1 100%;
justify-content: space-between;
}
.site-header .logo-img {
height: 2.5rem;
}
/* Kapsel schrumpft proportional zum Logo mit */
.site-header .logo-link {
padding: 0.3rem 0.6rem;
border-radius: 0.75rem;
}
/* Hamburger sichtbar */
.nav-toggle {
display: block;
}
/* Desktop-Leiste wird zum weißen Full-Screen-Overlay */
.main-nav {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--surface);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s;
}
.site-header.nav-open .main-nav {
opacity: 1;
visibility: visible;
}
/* Links groß untereinander */
.main-nav > ul {
flex-direction: column;
gap: 2.25rem;
width: 100%;
}
/* Jeder Menüpunkt nimmt die volle Breite ein und zentriert seinen Inhalt.
Dadurch sitzt auch „Leistungen" exakt in der Bildschirmmitte – obwohl
sein (eingeklapptes) Dropdown den Listenpunkt sonst verbreitert und den
Link nach links zog. */
.main-nav > ul > li {
width: 100%;
text-align: center;
}
.main-nav a {
padding: 0.25rem 0.5rem;
font-size: 1.35rem;
color: var(--petrol);
}
/* Im Overlay keine wachsende Unterlinie – die Links stehen groß
und zentriert, ein linksbündiger Strich passt hier nicht. */
.main-nav > ul > li > a {
background-image: none;
}
/* Dropdown im Overlay: zugeklapptes Akkordeon, das NUR über die
JS-Klasse .open aufklappt (Slide-Down via max-height).
WICHTIG: Die Selektoren müssen die Desktop-Hover-Regeln
(.has-dropdown:hover .dropdown → translateX(-50%)!) in der
Spezifität schlagen, sonst schiebt ein Tap auf Touch-Geräten
das Untermenü um die halbe Breite nach links aus dem Viewport. */
.main-nav .has-dropdown .dropdown,
.main-nav .has-dropdown:hover .dropdown,
.main-nav .has-dropdown:focus-within .dropdown {
position: static;
min-width: 0;
padding: 0;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
box-shadow: none;
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: visible; /* Sichtbarkeit regelt allein max-height */
transform: none; /* niemals translateX im Overlay! */
transition: max-height 0.45s ease, opacity 0.35s ease,
padding 0.45s ease;
}
.main-nav .has-dropdown.open .dropdown {
max-height: 24rem; /* genug Raum für alle sechs Einträge */
opacity: 1;
padding: 0.75rem 0 0;
}
/* Aufklapp-Indikator: kleiner Chevron, dreht sich im offenen Zustand */
.has-dropdown > a::after {
content: '';
display: inline-block;
width: 0.45em;
height: 0.45em;
margin-left: 0.6rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
vertical-align: 0.2em;
transition: transform 0.3s ease;
}
.has-dropdown.open > a::after {
transform: rotate(225deg);
vertical-align: -0.05em;
}
.dropdown a {
padding: 0.3rem 1rem;
font-size: 0.95rem;
text-align: center;
color: var(--ink-muted);
}
/* Hamburger morpht zum X */
.site-header.nav-open .nav-toggle span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .nav-toggle span:nth-child(2) {
opacity: 0;
}
.site-header.nav-open .nav-toggle span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
}
/* Scroll-Lock, solange das Overlay-Menü offen ist */
body.nav-open {
overflow: hidden;
}
/* ==========================================================================
Footer
========================================================================== */
.site-footer {
width: 100%;
margin-top: 8rem;
padding: 4.5rem clamp(1.5rem, 5vw, 5rem) 2.5rem;
border-top: 1px solid var(--petrol-line);
/* Derselbe fließende Verlauf wie im Header: links hell beim Logo, rechts Petrol */
background-color: var(--hf-deep); /* Fallback */
background-image: var(--hf-gradient);
}
/* Vier ausbalancierte Spalten: Branding | Leistungen | Unternehmen | Kontakt */
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 0.8fr 1.3fr;
align-items: start;
gap: 2.5rem 3rem;
}
/* Spaltenüberschriften: Mint-Akzent auf dem dunklen Verlaufsteil (Desktop),
auf Mobile via --hf-heading-Override wieder Petrol auf hellem Grund. */
.footer-heading {
margin-bottom: 1.1rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--hf-heading);
}
/* Spalte 1: Branding – das Footer-Logo wird bewusst deutlich größer als im
Header skaliert, damit es in der Fußzeile präsenter wirkt. */
.footer-brand .logo-img {
height: clamp(3.6rem, 6vw, 4.6rem);
}
.footer-brand .logo-link {
padding: 0.5rem 1rem;
border-radius: 0.9rem;
}
.footer-claim {
margin-top: 1.25rem;
max-width: 24rem;
font-size: 0.88rem;
line-height: 1.7;
color: var(--ink-muted);
}
/* Link-Spalten: linksbündig, ruhige Zeilenabstände */
.footer-nav ul {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.65rem;
}
.footer-nav a {
font-size: 0.9rem;
letter-spacing: 0.06em;
color: var(--hf-text);
transition: color 0.3s ease;
}
.footer-nav a:hover {
color: var(--color-mint);
}
/* Spalte 4: Direktkontakt – edler E-Mail-Link mit Umschlag-Icon */
.footer-mail-link {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.7rem;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--hf-strong);
transition: color 0.3s ease;
}
.footer-note {
margin-top: 0.85rem;
font-size: 0.85rem;
line-height: 1.6;
color: var(--ink-muted);
}
/* Icon erbt via currentColor die Textfarbe → färbt beim Hovern mit */
.footer-mail-link .mail-icon {
display: block;
flex-shrink: 0;
}
.footer-mail-link:hover {
color: var(--color-mint);
}
/* Footer-Bottom: hauchdünne Trennlinie, darunter zentriert Copyright &
Rechtliches – das identische gap erzwingt exakt gleiche Abstände */
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem 2.5rem;
margin-top: 3rem;
padding-top: 1.5rem;
/* zentriert auf dem dunklen Verlaufsteil → helle, durchscheinende Linie */
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-bottom .footer-copyright,
.footer-bottom a {
margin: 0;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hf-text);
}
.footer-bottom a {
transition: color 0.3s ease;
}
.footer-bottom a:hover {
color: var(--color-mint);
}
/* --------------------------------------------------------------------------
Mobile: Header & Footer behalten denselben flüssigen weiß-grünen Verlauf wie
der Desktop (kein flaches Weiß). Der Verlauf bleibt über var(--hf-gradient)
aus den globalen Regeln erhalten; die hellen Verlaufs-Textfarben passen, da
die Inhalte zentriert über dem dunklen Verlaufsteil liegen. Lediglich das
Hamburger-Icon und der (mobil zentrierte) Claim brauchen eine Kontrast-
Anpassung – ausschließlich hier in der Media-Query.
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
/* Hamburger liegt rechts auf dem dunklen Verlaufsende → helle Striche */
.nav-toggle span {
background-color: var(--hf-strong);
}
/* Geöffnetes Menü = heller Vollbild-Overlay → X muss dunkel sein */
.site-header.nav-open .nav-toggle span {
background-color: var(--petrol);
}
/* Footer-Inhalte stehen mobil zentriert/gestapelt – ein Links-Rechts-
Verlauf würde die mittige Schrift im hellen Teil verschlucken (v. a. die
Copyright-Zeile links). Daher derselbe weiß-grüne Verlauf, aber von oben
nach unten geführt: hell nur hinter der Logo-Kapsel (oberste ~150px), ab
dem ersten Textblock durchgehend tiefes Petrol → jede Zeile bleibt lesbar. */
.site-footer {
background-image: linear-gradient(to bottom,
#f3f7f6 0px, #f3f7f6 90px, #4f7d77 120px,
#0f4640 148px, #03201d 172px, #03201d 100%);
}
/* Claim & alle Footer-Texte liegen nun über dem dunklen Verlauf → helle Schrift */
.footer-claim {
color: var(--hf-text);
}
}
/* --------------------------------------------------------------------------
Responsive: Footer bricht auf schmalen Screens zentriert untereinander um
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 2.75rem;
}
.footer-claim {
margin-inline: auto;
}
.footer-nav ul {
align-items: center;
}
.footer-heading {
margin-bottom: 0.85rem;
}
}
/* Nutzer mit reduzierter Bewegungspräferenz: Pulsieren deaktivieren */
@media (prefers-reduced-motion: reduce) {
.logo-pulse-dot {
animation: none;
opacity: 1;
}
}
/* ==========================================================================
Sektions-Layout
========================================================================== */
.section {
width: 100%;
max-width: 1280px;
margin-inline: auto;
/* Großzügiger Whitespace: das Layout darf atmen */
padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 4.5rem);
}
.section h2 {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.01em;
}
.section-intro {
margin-top: 1rem;
max-width: 40rem;
color: var(--color-text-muted);
}
/* ==========================================================================
CTA-Buttons
========================================================================== */
.btn-cta {
display: inline-block;
padding: 0.95rem 2.4rem;
/* V2-Primärbutton: Teal→Mint-Verlauf mit Mint-Glühen */
background-color: var(--color-mint); /* Fallback ohne Verlaufs-Support */
background-image: linear-gradient(120deg, var(--color-teal), var(--color-mint));
color: #00211f;
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
border-radius: 999px;
box-shadow: 0 8px 30px -6px var(--glow-teal), inset 0 1px 0 rgba(255, 255, 255, 0.4);
transition: transform 0.3s var(--ease-out), box-shadow 0.35s var(--ease),
border-color 0.3s ease, background-color 0.35s ease;
}
/* Hover: sanfte Skalierung, intensiveres Mint-Glühen (V2) */
.btn-cta:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 14px 44px -8px var(--glow-mint), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Sekundär-Variante (Paketkarten ohne Bestseller-Status): V2-Glas-Ghost */
.btn-cta.btn-outline {
background-color: rgba(64, 224, 208, 0.04);
background-image: none;
border: 1px solid var(--line-strong);
color: var(--color-text-light);
box-shadow: none;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.btn-cta.btn-outline:hover {
border-color: var(--color-mint);
color: var(--color-text-light);
background-color: rgba(64, 224, 208, 0.10);
background-image: none;
box-shadow: 0 0 22px rgba(64, 224, 208, 0.18);
}
/* ==========================================================================
Hero-Sektion
========================================================================== */
.hero {
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
gap: clamp(2rem, 5vw, 5rem);
min-height: 70vh;
}
.hero h1 {
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.015em;
}
.hero-subline {
margin-top: 1.5rem;
max-width: 34rem;
font-size: clamp(1rem, 1.5vw, 1.15rem);
color: var(--color-text-muted);
}
.hero .btn-cta {
margin-top: 2.5rem;
}
/* ==========================================================================
Marketing-Sektion
========================================================================== */
.marketing {
text-align: center;
}
.marketing-text {
margin-top: 2.5rem;
}
/* Jede Zeile als eigener Span – Ziel für spätere GSAP-Scroll-Reveals */
.reveal-text {
display: block;
font-size: clamp(1.1rem, 2.2vw, 1.5rem);
font-weight: 300;
line-height: 1.8;
color: var(--color-text-muted);
}
/* ==========================================================================
Paket-Dashboard
========================================================================== */
.packages h2,
.packages .section-intro {
text-align: center;
margin-inline: auto;
}
.package-grid {
display: grid;
/* Adaptiv: 3 Spalten auf Desktop, bricht selbstständig um.
min(300px, 100%) verhindert Overflow auf Screens unter 300px. */
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
margin-top: 3.5rem;
}
.package-card {
position: relative;
display: flex;
flex-direction: column;
padding: 3rem 2.25rem;
/* V2-Glasfläche: dunkler Petrol-Verlauf statt flacher Weiß-Schleier */
background-image: linear-gradient(165deg, rgba(12, 42, 40, 0.70), rgba(6, 23, 21, 0.60));
border: 1px solid var(--glass-brd);
border-radius: var(--radius);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: transform 0.4s var(--ease-out), border-color 0.4s ease,
box-shadow 0.4s ease;
}
/* Hover: sanfte Skalierung, tiefer Schatten + Mint-Glühen (V2) */
.package-card:hover {
transform: translateY(-6px) scale(1.02);
border-color: var(--line-strong);
box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.70), 0 0 28px rgba(64, 224, 208, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.package-card h3 {
font-size: 1.35rem;
font-weight: 700;
transition: color 0.4s ease;
}
.package-card:hover h3 {
color: var(--color-gold);
}
.package-tagline {
margin-top: 0.5rem;
font-size: 0.9rem;
color: var(--color-text-muted);
}
.package-card .btn-cta {
align-self: center;
margin-top: auto;
}
/* Bestseller: hauchdünne goldene Kontur + Badge */
.package-card.bestseller {
border: 1px solid rgba(197, 160, 89, 0.6);
box-shadow: 0 0 30px rgba(197, 160, 89, 0.08);
}
.package-card.bestseller:hover {
border-color: var(--color-gold);
}
.bestseller-badge {
position: absolute;
top: -0.85rem;
left: 50%;
transform: translateX(-50%);
padding: 0.3rem 1rem;
background-color: var(--color-gold);
color: var(--color-bg-petrol);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 999px;
white-space: nowrap;
}
/* --------------------------------------------------------------------------
Feature-Listen mit CSS-gezeichneten Häkchen
-------------------------------------------------------------------------- */
.feature-list {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin: 1.75rem 0 2.25rem;
flex: 1;
}
.feature-list li {
position: relative;
padding-left: 1.8rem;
font-size: 0.92rem;
color: var(--color-text-muted);
}
/* Häkchen rein per CSS (zwei Border-Kanten, rotiert) */
.feature-list li::before {
content: '';
position: absolute;
left: 0.1rem;
top: 0.4em;
width: 0.85em;
height: 0.4em;
border-left: 2px solid var(--color-mint);
border-bottom: 2px solid var(--color-mint);
transform: rotate(-45deg);
}
/* Bestseller-Karten (Web Plus, Care Basic): die Zusatzleistungen erscheinen
im goldenen Akzentton der Karte – nur der erste Punkt („Alles aus …")
behält die Standardfarbe */
.package-card.bestseller .feature-list li:nth-child(n+2) {
color: var(--color-gold);
}
.package-card.bestseller .feature-list li:nth-child(n+2)::before {
border-left-color: var(--color-gold);
border-bottom-color: var(--color-gold);
}
/* ==========================================================================
Bento-Grid: „Was bei jeder unserer Webseiten Standard ist"
========================================================================== */
.standards-bento {
margin-top: 5rem;
}
.standards-bento > h3 {
text-align: center;
font-size: clamp(1.3rem, 2.5vw, 1.7rem);
font-weight: 700;
}
/* Flexbox statt Grid: drei Karten pro Reihe; bleibt in der letzten Reihe
ein Rest (z. B. 2 Karten), zentriert justify-content diese symmetrisch
unter den 3er-Reihen – es entsteht keine unschöne Lücke. */
.bento-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem;
margin-top: 2.25rem;
}
.bento-card {
position: relative;
display: flex;
flex-direction: column;
/* exakt 3 pro Reihe (gap 1.25rem); der kleine Abzug fängt Sub-Pixel-
Rundung ab, damit nie eine Karte vorzeitig umbricht. */
flex: 0 0 calc((100% - 2 * 1.25rem) / 3 - 0.02px);
padding: 2rem;
background-image: linear-gradient(165deg, rgba(12, 42, 40, 0.70), rgba(6, 23, 21, 0.60));
border: 1px solid var(--glass-brd);
border-radius: var(--radius);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: border-color 0.4s ease, box-shadow 0.4s ease,
transform 0.4s ease;
}
/* Interaktiver Rahmen-Leuchteffekt: voller Mint-Rahmen beim Hovern */
.bento-card:hover {
border-color: var(--color-mint);
box-shadow:
0 0 0 1px rgba(64, 224, 208, 0.25),
0 30px 60px -28px rgba(0, 0, 0, 0.70),
0 0 28px rgba(64, 224, 208, 0.15),
inset 0 0 20px rgba(64, 224, 208, 0.04);
transform: translateY(-3px);
}
.bento-card h4 {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gold);
}
.bento-card p {
margin-top: 0.85rem;
font-size: 0.92rem;
line-height: 1.7;
color: var(--color-text-muted);
}
.bento-card .feature-list {
margin: 1.1rem 0 0;
gap: 0.55rem;
}
/* Banner-Kachel: das eine, minimalistische DSGVO-Statement über die volle
Breite – Label links, Statement rechts, kein Loch im Grid. */
.bento-banner {
flex: 0 0 100%; /* Banner über die volle Breite (war grid-column: 1 / -1) */
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem 2.5rem;
padding: 1.75rem 2rem;
}
.banner-statement {
font-size: clamp(1.15rem, 2.2vw, 1.5rem);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.3;
color: var(--color-mint);
text-shadow: 0 0 20px rgba(64, 224, 208, 0.25);
}
/* überschreibt das gedämpfte Standard-p der Bento-Karten */
.bento-card .banner-statement {
margin-top: 0;
}
/* Mobile: bricht in eine einspaltige, zentrierte Liste um */
@media (max-width: 768px) {
.bento-grid {
max-width: 480px;
margin-inline: auto;
}
/* Jede Karte volle Breite (Flexbox stapelt dann untereinander) */
.bento-card {
flex-basis: 100%;
}
.bento-banner {
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
padding: 2rem;
}
}
/* --------------------------------------------------------------------------
Responsive: Sektionen brechen auf Mobilgeräten sauber um
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
min-height: auto;
text-align: center;
}
.hero-subline {
margin-inline: auto;
}
/* Bestseller-Karte auf Mobile zuerst zeigen
(Spaltenumbruch übernimmt das auto-fit-Grid selbst) */
.package-card.bestseller {
order: -1;
}
}
/* ==========================================================================
Projekt-Konfigurator (kontakt.html)
========================================================================== */
.configurator {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - 220px); /* Fullscreen abzüglich Header */
text-align: center;
}
.configurator-head h1 {
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.015em;
}
.configurator-head p {
margin-top: 1rem;
color: var(--color-text-muted);
}
/* --------------------------------------------------------------------------
Schritt-Indikator
-------------------------------------------------------------------------- */
.step-indicator {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem clamp(1.5rem, 5vw, 3.5rem);
margin: 3rem 0 1rem;
}
.step-indicator li {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
opacity: 0.5;
transition: opacity 0.4s ease, color 0.4s ease;
}
.step-indicator li span {
display: grid;
place-items: center;
width: 1.8rem;
height: 1.8rem;
font-weight: 700;
border: 1px solid rgba(160, 192, 191, 0.4);
border-radius: 50%;
transition: border-color 0.4s ease, color 0.4s ease;
}
.step-indicator li.active {
opacity: 1;
color: var(--color-text-light);
}
.step-indicator li.active span {
border-color: var(--color-mint);
color: var(--color-mint);
}
/* --------------------------------------------------------------------------
Schritte: nur der aktive ist sichtbar, sanft eingeblendet
-------------------------------------------------------------------------- */
.form-step {
display: none;
}
/* Übergänge zwischen den Schritten steuert GSAP (Slide + Fade in main.js).
Ohne JS/GSAP wird schlicht hart umgeschaltet – das Formular bleibt nutzbar. */
.form-step.active {
display: block;
}
@keyframes step-fade {
from {
opacity: 0;
transform: translateY(1rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-step h2 {
margin-top: 2rem;
font-size: clamp(1.4rem, 2.5vw, 1.9rem);
font-weight: 700;
}
.step-hint {
margin-top: 0.4rem;
font-size: 0.9rem;
color: var(--color-text-muted);
}
/* --------------------------------------------------------------------------
Auswahl-Kacheln (Checkboxen & Radios)
-------------------------------------------------------------------------- */
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
gap: 1.25rem;
max-width: 56rem;
margin: 2.5rem auto 0;
}
/* Ab 4 Kacheln: festes 2er-Raster statt 3+1-Umbruch → gleichmäßige Reihen
(:has wird im Projekt bereits für .tile:has(input:checked) vorausgesetzt) */
.tile-grid:has(> :nth-child(4)) {
grid-template-columns: repeat(2, 1fr);
max-width: 44rem;
}
@media (max-width: 620px) {
.tile-grid:has(> :nth-child(4)) {
grid-template-columns: 1fr;
}
}
.tile {
position: relative;
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 2rem 1.5rem;
text-align: left;
background-image: linear-gradient(165deg, rgba(12, 42, 40, 0.60), rgba(6, 23, 21, 0.55));
border: 1px solid var(--glass-brd);
border-radius: var(--radius);
cursor: pointer;
transition: border-color 0.4s ease, background-color 0.4s ease,
box-shadow 0.4s ease, transform 0.4s ease;
}
/* Native Inputs unsichtbar, aber für Tastatur/Screenreader vorhanden */
.tile input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* Moderner Check-Indikator oben rechts in der Kachel */
.tile::after {
content: '';
position: absolute;
top: 1.1rem;
right: 1.1rem;
width: 1.15rem;
height: 1.15rem;
border: 1px solid rgba(160, 192, 191, 0.4);
border-radius: 50%;
transition: border-color 0.4s ease, background-color 0.4s ease,
box-shadow 0.4s ease;
}
.tile:hover {
border-color: rgba(64, 224, 208, 0.45);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25), 0 0 20px rgba(64, 224, 208, 0.1);
}
/* Ausgewählt: Rahmen färbt sich flüssig mintgrün.
Hinweis: Die .is-selected-Regeln (per JS gesetzt) sind bewusst NICHT mit
den :has()-Regeln zu einer Selektorliste zusammengefasst – alte Browser,
die :has() nicht kennen, würden sonst den gesamten Regelblock verwerfen.
So greift auf modernen Browsern beides, auf alten der JS-Fallback. */
.tile:has(input:checked) {
border-color: var(--color-mint);
background-color: rgba(64, 224, 208, 0.06);
box-shadow: 0 0 24px rgba(64, 224, 208, 0.12);
}
.tile:has(input:checked)::after {
background-color: var(--color-mint);
border-color: var(--color-mint);
box-shadow: 0 0 10px rgba(64, 224, 208, 0.6);
}
/* JS-Fallback: identische Styles ohne :has() */
.tile.is-selected {
border-color: var(--color-mint);
background-color: rgba(64, 224, 208, 0.06);
box-shadow: 0 0 24px rgba(64, 224, 208, 0.12);
}
.tile.is-selected::after {
background-color: var(--color-mint);
border-color: var(--color-mint);
box-shadow: 0 0 10px rgba(64, 224, 208, 0.6);
}
/* Tastaturfokus sichtbar halten */
.tile:has(input:focus-visible) {
border-color: var(--color-mint);
}
.tile-title {
font-size: 1.05rem;
font-weight: 700;
padding-right: 1.5rem;
}
.tile-desc {
font-size: 0.85rem;
color: var(--color-text-muted);
}
/* --------------------------------------------------------------------------
Minimalistische Input-Felder mit Unterlinien
-------------------------------------------------------------------------- */
.field-group {
display: flex;
flex-direction: column;
gap: 2.25rem;
max-width: 30rem;
margin: 3rem auto 0;
text-align: left;
}
.field label {
display: block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.field input,
.field textarea {
width: 100%;
padding: 0.6rem 0;
font-family: inherit;
font-size: 1.1rem;
color: var(--color-text-light);
background-color: transparent;
border: none;
border-bottom: 1px solid rgba(160, 192, 191, 0.35);
border-radius: 0;
transition: border-color 0.35s ease;
}
.field textarea {
resize: vertical;
min-height: 5.5rem;
line-height: 1.5;
}
.field input::placeholder,
.field textarea::placeholder {
color: rgba(160, 192, 191, 0.45);
}
.field input:focus,
.field textarea:focus {
outline: none;
border-bottom-color: var(--color-mint);
}
/* --------------------------------------------------------------------------
Schritt-Navigation
-------------------------------------------------------------------------- */
.step-controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem 1.5rem;
margin-top: 3rem;
}
.step-controls button {
font-family: inherit;
cursor: pointer;
}
.btn-cta.btn-next,
.btn-cta.btn-submit {
border: none;
}
.btn-back {
background: none;
border: none;
padding: 0.5rem;
font-size: 0.9rem;
letter-spacing: 0.05em;
color: var(--color-text-muted);
transition: color 0.3s ease;
}
.btn-back:hover {
color: var(--color-mint);
}
/* --------------------------------------------------------------------------
Ladeanimation: rotierender Mint-Kreis im Absenden-Button
-------------------------------------------------------------------------- */
.btn-cta.is-loading {
position: relative;
color: transparent;
background-color: transparent;
border: 1px solid rgba(64, 224, 208, 0.3);
pointer-events: none;
}
.btn-cta.is-loading::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 1.3em;
height: 1.3em;
border: 2px solid rgba(64, 224, 208, 0.25);
border-top-color: var(--color-mint);
border-radius: 50%;
animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin {
to {
transform: rotate(360deg);
}
}
/* --------------------------------------------------------------------------
Edle Bestätigung nach dem Absenden
-------------------------------------------------------------------------- */
/* Edle Bestätigungs-Card nach dem Absenden */
.form-success {
position: relative;
max-width: 34rem;
margin: 2rem auto 0;
padding: 3.5rem 2.5rem 3rem;
background-image: linear-gradient(165deg, rgba(12, 42, 40, 0.60), rgba(6, 23, 21, 0.55));
border: 1px solid rgba(197, 160, 89, 0.35);
border-radius: var(--radius-lg);
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 0 40px rgba(64, 224, 208, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
animation: step-fade 0.7s ease both;
}
.form-success h2 {
margin-top: 2rem;
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
font-weight: 800;
}
.form-success p {
margin-top: 1rem;
color: var(--color-text-muted);
line-height: 1.8;
}
/* Mint-Kreis mit CSS-gezeichnetem Häkchen */
.success-check {
position: relative;
width: 5rem;
height: 5rem;
margin: 3rem auto 0;
border: 2px solid var(--color-mint);
border-radius: 50%;
box-shadow: 0 0 30px rgba(64, 224, 208, 0.35);
}
.success-check::after {
content: '';
position: absolute;
top: 1.6rem;
left: 1.35rem;
width: 2.2rem;
height: 1.1rem;
border-left: 3px solid var(--color-mint);
border-bottom: 3px solid var(--color-mint);
transform: rotate(-45deg);
}
/* ==========================================================================
Über uns: Split-Layout
========================================================================== */
.about-split {
display: grid;
grid-template-columns: 1fr 1.15fr;
align-items: center;
gap: clamp(2.5rem, 6vw, 6rem);
}
.about-story h1 {
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.015em;
}
.about-story p {
margin-top: 1.5rem;
color: var(--color-text-muted);
line-height: 1.8;
}
/* ==========================================================================
Über uns: Werte-Zeilen (öffnen sich beim Hovern per CSS)
Zentriertes Layout: Überschrift und Liste sitzen als mittige Spalte,
passend zum zentrierten Story-Block darüber.
========================================================================== */
.values h2 {
text-align: center;
margin-inline: auto;
}
.value-list {
margin-top: 3rem;
max-width: 52rem;
margin-inline: auto;
border-bottom: 1px solid rgba(197, 160, 89, 0.15);
}
.value-row {
border-top: 1px solid rgba(197, 160, 89, 0.15);
padding: 0 0.5rem;
cursor: default;
transition: background-color 0.4s ease;
}
.value-row:hover,
.value-row:focus-visible {
background-color: rgba(255, 255, 255, 0.02);
outline: none;
}
.value-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 1.5rem;
padding: 1.75rem 0;
}
.value-num {
font-size: 0.9rem;
font-weight: 700;
color: var(--color-gold);
letter-spacing: 0.1em;
}
.value-head h3 {
font-size: clamp(1.2rem, 2.5vw, 1.7rem);
font-weight: 700;
transition: color 0.4s ease, transform 0.4s ease;
}
/* Im zentrierten Layout kein seitlicher Versatz (wirkt asymmetrisch),
stattdessen dezente Skalierung um die eigene Mitte */
.value-row:hover .value-head h3,
.value-row:focus-visible .value-head h3 {
color: var(--color-mint);
transform: scale(1.03);
}
/* Textfeld: über grid-template-rows elegant von 0 auf volle Höhe */
.value-body {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 0.5s ease, opacity 0.5s ease,
padding-bottom 0.5s ease;
}
.value-body p {
overflow: hidden;
min-height: 0;
max-width: 46rem;
margin-inline: auto;
text-align: center;
color: var(--color-text-muted);
line-height: 1.8;
}
.value-row:hover .value-body,
.value-row:focus-visible .value-body {
grid-template-rows: 1fr;
opacity: 1;
padding-bottom: 1.75rem;
}
/* ==========================================================================
Referenzen: Projekt-Grid
========================================================================== */
.references h1 {
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.015em;
}
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
margin-top: 3.5rem;
}
.project-link {
display: block;
}
.card-media {
position: relative;
aspect-ratio: 16 / 11;
border-radius: 1rem;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Bild: gestochen scharf – Referenzbilder werden weder geblurrt noch
abgedunkelt, beim Hovern nur minimal hochskaliert */
.media-img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.001);
transition: transform 0.5s ease;
will-change: transform;
}
/* Hauchfeiner Petrol-Schleier statt starker Abdunklung */
.card-media::after {
content: '';
position: absolute;
inset: 0;
background-color: rgba(0, 77, 74, 0.10);
transition: opacity 0.5s ease;
}
.project-link:hover .media-img,
.project-link:focus-visible .media-img {
transform: scale(1.04);
}
.project-link:hover .card-media::after,
.project-link:focus-visible .card-media::after {
opacity: 0;
}
/* "Live ansehen"-Button: blendet sich beim Hovern elegant ein */
.card-btn {
position: absolute;
left: 50%;
bottom: 1.25rem;
z-index: 1;
padding: 0.65rem 1.6rem;
background-color: rgba(0, 77, 74, 0.65);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(64, 224, 208, 0.5);
border-radius: 999px;
color: var(--color-mint);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.05em;
white-space: nowrap;
opacity: 0;
transform: translateX(-50%) translateY(0.75rem);
transition: opacity 0.45s ease, transform 0.45s ease;
}
.project-link:hover .card-btn,
.project-link:focus-visible .card-btn {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.card-info {
padding: 1.1rem 0.25rem 0;
}
.card-info h3 {
font-size: 1.05rem;
font-weight: 700;
transition: color 0.3s ease;
}
.project-link:hover .card-info h3 {
color: var(--color-mint);
}
.card-info p {
margin-top: 0.2rem;
font-size: 0.85rem;
color: var(--color-text-muted);
transition: color 0.3s ease;
}
/* Goldener Sekundär-Akzent beim Hovern der Projektkarte */
.project-link:hover .card-info p {
color: var(--color-gold);
}
/* Platzhalter-Motive, bis echte Projekt-Screenshots in /assets/ liegen */
.media-placeholder-1 { background: linear-gradient(135deg, #0a5a55, #013a37), radial-gradient(circle at 70% 30%, rgba(64, 224, 208, 0.25), transparent 60%); background-blend-mode: screen; }
.media-placeholder-2 { background: linear-gradient(160deg, #024842, #0b6862), radial-gradient(circle at 25% 70%, rgba(197, 160, 89, 0.3), transparent 55%); background-blend-mode: screen; }
.media-placeholder-3 { background: linear-gradient(120deg, #075f57, #02403c), radial-gradient(circle at 50% 20%, rgba(64, 224, 208, 0.2), transparent 50%); background-blend-mode: screen; }
.media-placeholder-4 { background: linear-gradient(150deg, #013f3b, #0a6660), radial-gradient(circle at 80% 75%, rgba(64, 224, 208, 0.22), transparent 55%); background-blend-mode: screen; }
.media-placeholder-5 { background: linear-gradient(140deg, #0b625c, #023d39), radial-gradient(circle at 30% 35%, rgba(197, 160, 89, 0.28), transparent 50%); background-blend-mode: screen; }
.media-placeholder-6 { background: linear-gradient(125deg, #03473f, #096058), radial-gradient(circle at 65% 60%, rgba(64, 224, 208, 0.24), transparent 55%); background-blend-mode: screen; }
/* --------------------------------------------------------------------------
Responsive: Über uns & Referenzen
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
.about-split {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Leistungsseiten (unternehmenswebseiten.html, landingpages.html, ...)
========================================================================== */
.service-detail {
max-width: 52rem;
text-align: center;
}
.service-detail h1 {
font-size: clamp(2.2rem, 4.5vw, 3.4rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.015em;
}
/* Unterzeile direkt unter der H1 */
.service-detail .subtitle {
margin-top: 1rem;
font-size: clamp(1.05rem, 1.8vw, 1.3rem);
font-weight: 600;
color: var(--color-mint);
}
/* Einleitender Fließtext */
.service-detail > p:not(.subtitle) {
margin-top: 2.25rem;
color: var(--color-text-muted);
line-height: 1.8;
}
/* Zwischenüberschrift über der Leistungsliste */
.service-detail h3 {
margin-top: 3.5rem;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gold);
}
/* Leistungsliste: linksbündig mit Mint-Häkchen, mittig gesetzt */
.service-detail ul {
display: flex;
flex-direction: column;
gap: 1.1rem;
max-width: 42rem;
margin: 1.75rem auto 0;
text-align: left;
}
.service-detail ul li {
position: relative;
padding-left: 2rem;
color: var(--color-text-muted);
line-height: 1.7;
}
.service-detail ul li::before {
content: '';
position: absolute;
left: 0.15rem;
top: 0.45em;
width: 0.85em;
height: 0.4em;
border-left: 2px solid var(--color-mint);
border-bottom: 2px solid var(--color-mint);
transform: rotate(-45deg);
}
.service-detail ul li strong {
color: var(--color-text-light);
}
.service-detail .btn-cta {
margin-top: 3.5rem;
}
/* ==========================================================================
Rechtsseiten (impressum.html, datenschutz.html)
========================================================================== */
.legal-page {
max-width: 800px;
text-align: left;
}
.legal-page h1 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.015em;
margin-bottom: 1.5rem;
}
/* Abschnittsüberschriften (Datenschutzerklärung) */
.legal-page h2 {
margin-top: 3.5rem;
padding-top: 2rem;
border-top: 1px solid rgba(197, 160, 89, 0.15);
font-size: clamp(1.25rem, 2.2vw, 1.6rem);
font-weight: 700;
line-height: 1.3;
}
/* Unterüberschriften (Impressum-Blöcke & Datenschutz-Unterpunkte) */
.legal-page h3 {
margin-top: 2.25rem;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gold);
}
.legal-page p {
margin-top: 0.85rem;
color: var(--color-text-muted);
line-height: 1.8;
}
.legal-page a {
color: var(--color-mint);
transition: color 0.3s ease;
}
.legal-page a:hover {
color: var(--color-gold);
}
/* Aufzählungen (Datenschutz: Logfile-Daten, Betroffenenrechte etc.) –
hebt den globalen list-style:none-Reset gezielt für Rechtstexte auf */
.legal-page ul {
list-style: disc;
margin-top: 0.85rem;
padding-left: 1.5rem;
color: var(--color-text-muted);
line-height: 1.8;
}
.legal-page li {
margin-top: 0.35rem;
}
/* ==========================================================================
Leistungs-Übersicht (leistungen.html)
========================================================================== */
.services-overview {
padding-top: 0; /* schließt kompakt an den Hero an */
}
.services-grid {
display: grid;
/* Exakt Kernleistungen → perfekt symmetrisches 2×2-Raster */
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
/* kompakt halten und mittig unter der Überschrift zentrieren */
max-width: 900px;
margin-inline: auto;
}
/* Mobil: 2×2 bricht sauber auf eine Spalte um */
@media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr;
max-width: 460px;
}
}
.service-card {
position: relative;
display: flex;
flex-direction: column;
padding: 2.25rem 2rem;
background-image: linear-gradient(165deg, rgba(12, 42, 40, 0.70), rgba(6, 23, 21, 0.60));
border: 1px solid var(--glass-brd);
border-radius: var(--radius);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: border-color 0.4s ease, box-shadow 0.4s ease,
transform 0.4s ease;
}
.service-card:hover {
border-color: var(--line-strong);
box-shadow:
0 30px 60px -28px rgba(0, 0, 0, 0.70),
0 0 28px rgba(64, 224, 208, 0.15);
transform: translateY(-3px);
}
.service-card h3 {
font-size: 1.15rem;
font-weight: 700;
}
.service-card p {
flex: 1;
margin-top: 0.75rem;
font-size: 0.92rem;
line-height: 1.7;
color: var(--color-text-muted);
}
/* Edler Textlink „Mehr erfahren →" */
.more-link {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
margin-top: 1.5rem;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--color-mint);
transition: color 0.3s ease;
}
.more-link .arrow {
transition: transform 0.3s ease;
}
.more-link:hover,
.service-card:hover .more-link {
color: var(--color-gold);
}
.service-card:hover .more-link .arrow {
transform: translateX(0.3rem);
}
/* ==========================================================================
Add-on-System: Erweiterungsmodule (leistungen.html)
========================================================================== */
.addons h2,
.addons .section-intro {
text-align: center;
margin-inline: auto;
}
.addon-list {
max-width: 56rem;
margin: 3.5rem auto 0;
border-top: 1px solid rgba(197, 160, 89, 0.15);
}
.addon-row {
display: grid;
grid-template-columns: minmax(240px, 1fr) 1.6fr;
align-items: baseline;
gap: 0.5rem 3rem;
padding: 1.75rem 0.75rem;
border-bottom: 1px solid rgba(197, 160, 89, 0.15);
transition: background-color 0.35s ease;
}
.addon-row:hover {
background-color: rgba(255, 255, 255, 0.02);
}
.addon-row h3 {
position: relative;
padding-left: 1.4rem;
font-size: 1rem;
font-weight: 700;
transition: color 0.35s ease;
}
/* Goldenes Plus als Modul-Marker */
.addon-row h3::before {
content: '+';
position: absolute;
left: 0;
top: -0.05em;
font-weight: 400;
color: var(--color-gold);
}
.addon-row:hover h3 {
color: var(--color-mint);
}
.addon-row p {
font-size: 0.92rem;
line-height: 1.7;
color: var(--color-text-muted);
}
/* Mobile: Add-on-Zeilen brechen untereinander */
@media (max-width: 768px) {
.addon-row {
grid-template-columns: 1fr;
}
.addon-row p {
padding-left: 1.4rem; /* bündig mit dem Titel hinter dem Plus */
}
}
/* ==========================================================================
Paket-Preise & Footnote (leistungen.html)
Preis-Block zwischen Tagline und Feature-Liste, oben und unten durch
feine Divider gefasst. Betrag mit Teal→Mint-Verlauf als Textfüllung.
========================================================================== */
.package-price {
margin-top: 1.5rem;
padding-top: 1.4rem;
padding-bottom: 1.5rem;
border-top: 1px solid var(--line);
border-bottom: 1px solid rgba(64, 224, 208, 0.12);
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.4rem;
font-size: clamp(1.7rem, 3vw, 2rem);
font-weight: 800;
letter-spacing: -0.01em;
color: var(--color-mint);
transition: color 0.4s ease;
}
.package-card:hover .package-price {
color: var(--color-text-light);
}
.package-price .prefix {
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 500;
color: var(--color-text-muted);
}
.package-price .amount {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 2.6rem);
font-weight: 700;
line-height: 1;
/* Teal→Mint-Verlauf als Textfüllung, identisch zur Markenlogik */
background-image: linear-gradient(120deg, var(--color-teal), var(--color-mint));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.package-price .period {
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-muted);
}
/* Goldener Preis bei der Bestseller-/Empfohlen-Karte als dezenter Akzent */
.package-card.bestseller .package-price .amount {
background-image: linear-gradient(120deg, var(--color-gold), #e6c98a);
}
/* Kleiner Hinweis unter dem Preis (z. B. „zzgl. USt", „einmalig") */
.package-price-note {
width: 100%;
margin-top: 0.5rem;
font-size: 0.78rem;
color: var(--color-text-muted);
opacity: 0.85;
}
/* Die Feature-Liste schließt nach dem Preis-Divider kompakter an */
.package-price + .feature-list {
margin-top: 1.5rem;
}
/* Vertrauens-Footnote unter dem Paket-Grid */
.package-footnote {
margin: 2.5rem auto 0;
max-width: 44rem;
text-align: center;
font-size: 0.88rem;
color: var(--color-text-muted);
}
.package-footnote::before {
content: '';
display: block;
width: 3rem;
height: 1px;
margin: 0 auto 1.25rem;
background-color: rgba(197, 160, 89, 0.5);
}
/* ==========================================================================
Paket-Dropdown im Konfigurator (kontakt.html)
Gestaltet exakt wie die Text-Inputs: transparente Fläche, feine
Unterstreichung, Mint-Fokus. Eigener Chevron als Inline-SVG, da das
native Pfeil-Styling browserübergreifend nicht kontrollierbar ist.
========================================================================== */
.field select {
width: 100%;
padding: 0.6rem 2rem 0.6rem 0;
font-family: inherit;
font-size: 1.1rem;
color: var(--color-text-light);
background-color: transparent;
border: none;
border-bottom: 1px solid rgba(160, 192, 191, 0.35);
border-radius: 0;
transition: border-color 0.35s ease;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2340E0D0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.25rem center;
}
.field select:focus {
outline: none;
border-bottom-color: var(--color-mint);
}
/* Aufgeklappte Optionsliste: dunkle Fläche statt System-Weiß */
.field select option {
background-color: var(--color-bg-petrol);
color: var(--color-text-light);
}
/* ==========================================================================
Kontakt-Informationskacheln (kontakt.html)
Desktop: exaktes, symmetrisches 2x2-Grid. Mobile (<768px): einspaltige
vertikale Liste. Look angelehnt an die Service-Cards des Designsystems.
========================================================================== */
.contact-info h2,
.contact-info .section-intro {
text-align: center;
margin-inline: auto;
}
.contact-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* exakt 2 Spalten = 2x2 bei 4 Kacheln */
gap: 1.5rem;
max-width: 56rem;
margin: 3.5rem auto 0;
}
.info-tile {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
padding: 2rem 2rem 2.1rem;
background-image: linear-gradient(165deg, rgba(12, 42, 40, 0.70), rgba(6, 23, 21, 0.60));
border: 1px solid var(--glass-brd);
border-radius: var(--radius);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: border-color 0.4s ease, box-shadow 0.4s ease,
transform 0.4s ease;
}
.info-tile:hover {
border-color: var(--line-strong);
box-shadow:
0 30px 60px -28px rgba(0, 0, 0, 0.70),
0 0 28px rgba(64, 224, 208, 0.15);
transform: translateY(-3px);
}
.info-tile .info-icon {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
color: var(--color-mint);
background-color: rgba(64, 224, 208, 0.08);
border: 1px solid rgba(64, 224, 208, 0.25);
border-radius: 12px;
transition: color 0.4s ease, border-color 0.4s ease;
}
.info-tile:hover .info-icon {
color: var(--color-gold);
border-color: rgba(197, 160, 89, 0.45);
}
.info-tile h3 {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gold);
}
.info-tile p,
.info-tile a {
font-size: 1.02rem;
line-height: 1.6;
color: var(--color-text-light);
}
.info-tile a {
text-decoration: none;
border-bottom: 1px solid rgba(64, 224, 208, 0.35);
transition: color 0.3s ease, border-color 0.3s ease;
}
.info-tile a:hover {
color: var(--color-mint);
border-bottom-color: var(--color-mint);
}
.info-tile .info-note {
font-size: 0.85rem;
color: var(--color-text-muted);
}
/* Mobile: 2x2 bricht zu einer sauberen vertikalen Liste um */
@media (max-width: 768px) {
.contact-info-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Gesellschafter-Karten "Wer steckt hinter all dem ganzen?" (ueber-uns.html)
Look: gebürstetes Cyber-Silber. Der Metall-Effekt entsteht aus drei
Schichten: (1) feine horizontale Bürst-Linien per repeating-gradient,
(2) diagonaler Licht-Schimmer, (3) kühle Silber-Basisfläche. Alles rein
CSS – keine Bilder, keine externen Assets, kein Performance-Kostenfaktor.
========================================================================== */
.founders h2,
.founders .section-intro {
text-align: center;
margin-inline: auto;
}
.founders-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* zwei Karten exakt nebeneinander */
gap: clamp(1.25rem, 2.5vw, 2rem);
max-width: 56rem;
margin: 3.5rem auto 0;
}
.founder-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 3rem 2.25rem 2.5rem;
border-radius: 1rem;
border: 1px solid rgba(200, 215, 218, 0.22);
/* Schicht-Stapel des gebürsteten Cyber-Silbers (oben → unten):
1. Bürst-Struktur: hauchfeine helle 1px-Linien
2. Diagonaler Schimmer von links oben
3. Kühle Silber-Basis mit Petrol-Unterton */
background-image:
repeating-linear-gradient(
180deg,
rgba(255, 255, 255, 0.035) 0px,
rgba(255, 255, 255, 0.035) 1px,
transparent 1px,
transparent 3px
),
linear-gradient(
135deg,
rgba(255, 255, 255, 0.10) 0%,
rgba(255, 255, 255, 0.02) 38%,
rgba(255, 255, 255, 0.07) 62%,
rgba(255, 255, 255, 0.01) 100%
),
linear-gradient(
160deg,
rgba(176, 196, 200, 0.14) 0%,
rgba(132, 156, 160, 0.08) 50%,
rgba(176, 196, 200, 0.12) 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 14px 36px rgba(0, 0, 0, 0.28);
transition: transform 0.4s ease, border-color 0.4s ease,
box-shadow 0.4s ease;
}
.founder-card:hover {
transform: translateY(-6px);
border-color: rgba(64, 224, 208, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 20px 45px rgba(0, 0, 0, 0.34),
0 0 28px rgba(64, 224, 208, 0.12);
}
/* Monogramm statt Porträtfoto: Initialen in silberner Fassung */
.founder-monogram {
display: grid;
place-items: center;
width: 4.5rem;
height: 4.5rem;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--color-text-light);
background:
linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
border: 1px solid rgba(200, 215, 218, 0.35);
border-radius: 50%;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.founder-card h3 {
margin-top: 1.5rem;
font-size: 1.25rem;
font-weight: 700;
transition: color 0.4s ease;
}
.founder-card:hover h3 {
color: var(--color-gold);
}
.founder-role {
margin-top: 0.45rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* Goldene Trennklinge zwischen Rolle und LinkedIn-Icon */
.founder-card .founder-divider {
width: 2.5rem;
height: 1px;
margin: 1.5rem 0 1.35rem;
background-color: rgba(197, 160, 89, 0.5);
border: none;
}
/* LinkedIn-Icon: silbern in Ruhe, leuchtendes Mint bei Hover/Fokus */
.founder-linkedin {
display: grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
color: rgba(200, 215, 218, 0.75);
border: 1px solid rgba(200, 215, 218, 0.28);
border-radius: 10px;
transition: color 0.35s ease, border-color 0.35s ease,
box-shadow 0.35s ease, transform 0.35s ease;
}
.founder-linkedin:hover,
.founder-linkedin:focus-visible {
color: var(--color-mint);
border-color: rgba(64, 224, 208, 0.6);
box-shadow: 0 0 18px rgba(64, 224, 208, 0.35);
transform: translateY(-2px);
outline: none;
}
/* Mobile: Karten brechen untereinander */
@media (max-width: 768px) {
.founders-grid {
grid-template-columns: 1fr;
max-width: 28rem;
}
}
/* ==========================================================================
V2-Glanzrahmen: hauchfeiner Verlaufs-Rand auf den Glas-Flächen.
Maskierter 1px-Ring (mask-composite) – rein dekorativ, klick-transparent.
Liegt nur am äußersten Rand und überdeckt deshalb keine Texte/Buttons.
========================================================================== */
.package-card::before,
.bento-card::before,
.service-card::before,
.info-tile::before,
.form-success::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(140deg, var(--line-strong), transparent 42%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.7;
}
.form-privacy-note {
margin-top: 1rem;
font-size: 0.9rem;
color: var(--color-text-muted);
}
.form-privacy-note a {
color: var(--color-mint);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.is-disabled {
pointer-events: none;
opacity: 0.62;
cursor: not-allowed;
}
/* ==========================================================================
Preissektion & Paketkarten-Ausrichtung (index.html, leistungen.html)
========================================================================== */
/* --------------------------------------------------------------------------
Divider-Verankerung: Alle Trennlinien einer Reihe auf exakt einer Höhe.
Die Karte ist bereits ein Flex-Container und wird vom Grid auf Reihenhöhe
gestreckt. Der Kniff: Die unterschiedlich lange Tagline über der
Trennlinie schluckt per flex-grow den gesamten freien Raum – dadurch
werden Preis-Divider, Preis, Feature-Liste und Button von unten verankert
und liegen kartenübergreifend auf einer Linie.
-------------------------------------------------------------------------- */
.package-card .package-tagline {
flex-grow: 1;
}
/* Wichtig: .feature-list hat oben ein flex: 1 – innerhalb der Paketkarten
würde das mit der Tagline um den freien Raum konkurrieren und die Divider
erneut verschieben. Hier deshalb auf Eigenhöhe fixiert. */
.package-card .feature-list {
flex: 0 0 auto;
}
/* Pixelgenaue Stufe für moderne Browser: Subgrid koppelt die fünf inneren
Zeilen (Titel, Tagline, Preisblock, Feature-Liste, Button) aller Karten
an gemeinsame Grid-Tracks. Damit liegen beide Trennlinien des Preisblocks
auch dann exakt auf einer Höhe, wenn sowohl Taglines als auch
Feature-Listen unterschiedlich lang sind. Unterhalb von 600px (einspaltig)
greift weiterhin das Flex-Layout, damit kurze Karten nicht künstlich
auf die Höhe der längsten gestreckt werden. */
@media (min-width: 600px) {
@supports (grid-template-rows: subgrid) {
.package-card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 5;
row-gap: 0;
}
/* align-self/margin-auto aus dem Flex-Kontext neu verankern:
unten in der Button-Zeile, horizontal zentriert. */
.package-card .btn-cta {
align-self: end;
justify-self: center;
}
}
}
/* --------------------------------------------------------------------------
Zwei-Spalten-Infozeile (Domain: bestehend vs. neu)
Lehnt sich optisch an .services-grid an.
-------------------------------------------------------------------------- */
.duo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 1.5rem;
margin-top: 3rem;
}
/* Preis-/Kennzahl-Tag am Ende einer Add-on-Zeile (rechtsbündig) */
.addon-row .addon-price {
font-family: var(--font-display);
font-weight: 600;
color: var(--color-mint);
white-space: nowrap;
}
/* Bento-Block ohne den großen oberen Abstand (eigene Sektion) */
.standards-bento.is-flush {
margin-top: 0;
}
/* Leistungs-Übersicht mit etwas Luft nach dem Hero, statt direkt am Hero
zu kleben (leistungen.html). */
.services-overview {
padding-top: clamp(2.5rem, 5vw, 4rem);
}
.services-overview .services-grid {
margin-top: 3rem;
}
/* Kapitel-Auftakt zur Preissektion: zentrierter, schlanker Übergang
zwischen dem Leistungsteil und den Preistabellen. */
.pricing-lead {
text-align: center;
padding-bottom: 0; /* die folgende Paketsektion bringt ihren eigenen Abstand mit */
}
.pricing-lead .subtitle {
margin-bottom: 0.85rem;
font-size: clamp(1rem, 1.8vw, 1.25rem);
font-weight: 600;
color: var(--color-mint);
}
.pricing-lead h2 {
max-width: 46rem;
margin-inline: auto;
}
.pricing-lead .section-intro {
margin: 1.25rem auto 0;
max-width: 44rem;
text-align: center;
}
/* Schlanker Abschluss-CTA-Block */
.cta-band {
text-align: center;
}
.cta-band h2 {
max-width: 40rem;
margin-inline: auto;
}
.cta-band .section-intro {
margin-inline: auto;
text-align: center;
}
.cta-band .btn-cta {
margin-top: 2.25rem;
}
/* --------------------------------------------------------------------------
Serverseitiges Kontaktformular: Honeypot + Statusmeldungen
-------------------------------------------------------------------------- */
.hp-field {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
.form-message {
margin-top: 1.2rem;
padding: 1rem 1.1rem;
border-radius: var(--radius-sm);
font-size: 0.95rem;
line-height: 1.6;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.05);
color: var(--color-text);
}
.form-message.is-error {
border-color: rgba(255, 120, 120, 0.55);
background: rgba(255, 80, 80, 0.08);
}
.form-message.is-success {
border-color: rgba(64, 224, 208, 0.45);
background: rgba(64, 224, 208, 0.08);
}
/* ==========================================================================
V4.3 – Helle Mintweiß-Karten
Alle Karteninhalte wechseln von Glas-Dunkel auf Mintweiß mit dunkler
Petrol-Schrift. Bewusst ANS ENDE der Datei gesetzt: gleiche Spezifität
gewinnt durch Quelltext-Reihenfolge, ohne !important-Kaskaden.
Hintergrund, Header, Footer und Atmosphäre-Ebenen bleiben unangetastet.
========================================================================== */
/* --------------------------------------------------------------------------
Gemeinsame helle Kartenbasis
-------------------------------------------------------------------------- */
.package-card,
.bento-card,
.service-card,
.info-tile,
.founder-card,
.form-success,
.work-card,
.process-card {
background-image: none;
background-color: var(--card-bg);
border: 1px solid var(--card-line);
box-shadow: var(--card-shadow);
}
/* Ruhige Hover-Zustände: leichtes Anheben, weicher Schatten – kein Neon */
.package-card:hover {
transform: translateY(-6px);
border-color: var(--card-line-strong);
box-shadow: var(--card-shadow-hover);
}
.bento-card:hover,
.service-card:hover,
.info-tile:hover {
border-color: var(--card-line-strong);
box-shadow: var(--card-shadow-hover);
transform: translateY(-3px);
}
.founder-card:hover {
transform: translateY(-6px);
border-color: var(--card-line-strong);
box-shadow: var(--card-shadow-hover);
}
/* Glanzrahmen (maskierter 1px-Ring) auf hellen Karten: Petrol statt Mint */
.package-card::before,
.bento-card::before,
.service-card::before,
.info-tile::before,
.form-success::before {
background: linear-gradient(140deg, rgba(0, 77, 74, 0.35), transparent 42%);
opacity: 0.5;
}
/* --------------------------------------------------------------------------
Paketkarten (index.html, leistungen.html)
-------------------------------------------------------------------------- */
.package-card h3 { color: var(--card-heading); }
.package-card:hover h3 { color: var(--card-gold); }
.package-tagline { color: var(--card-muted); }
.package-card .feature-list li,
.bento-card .feature-list li {
color: var(--card-ink);
}
.package-card .feature-list li::before,
.bento-card .feature-list li::before {
border-left-color: var(--card-teal);
border-bottom-color: var(--card-teal);
}
/* Bestseller: goldene Zusatzpunkte in abgedunkeltem, lesbarem Gold */
.package-card.bestseller {
border-color: rgba(150, 118, 47, 0.55);
box-shadow: var(--card-shadow);
}
.package-card.bestseller:hover { border-color: var(--card-gold); }
.package-card.bestseller .feature-list li:nth-child(n+2) {
color: var(--card-gold);
}
.package-card.bestseller .feature-list li:nth-child(n+2)::before {
border-left-color: var(--card-gold);
border-bottom-color: var(--card-gold);
}
/* Preisblock: dunkle Petrol-Verläufe statt Mint auf Mintweiß */
.package-price {
color: var(--card-heading);
border-top-color: var(--card-line);
border-bottom-color: var(--card-line);
}
.package-card:hover .package-price { color: var(--card-heading); }
.package-price .prefix,
.package-price .period { color: var(--card-muted); }
.package-price .amount {
background-image: linear-gradient(120deg, var(--petrol-deep), var(--color-teal));
}
.package-card.bestseller .package-price .amount {
background-image: linear-gradient(120deg, var(--card-gold), #b9945a);
}
.package-price-note { color: var(--card-muted); }
/* Ghost-Buttons auf hellen Karten: Petrol-Kontur statt Weiß-Glas */
.package-card .btn-cta.btn-outline,
.service-card .btn-cta.btn-outline {
color: var(--petrol-deep);
border-color: rgba(0, 77, 74, 0.35);
background-color: rgba(0, 77, 74, 0.03);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.package-card .btn-cta.btn-outline:hover,
.service-card .btn-cta.btn-outline:hover {
color: var(--petrol-deep);
border-color: var(--petrol-deep);
background-color: rgba(0, 163, 158, 0.10);
box-shadow: 0 10px 24px -14px rgba(2, 26, 24, 0.45);
}
/* --------------------------------------------------------------------------
Bento-Karten
-------------------------------------------------------------------------- */
.bento-card h4 { color: var(--card-gold); }
.bento-card p { color: var(--card-muted); }
.banner-statement {
color: var(--petrol-deep);
text-shadow: none;
}
/* --------------------------------------------------------------------------
Service-Karten & Info-Kacheln
-------------------------------------------------------------------------- */
.service-card h3 { color: var(--card-heading); }
.service-card p { color: var(--card-muted); }
.service-card .more-link { color: var(--card-teal); }
.service-card .more-link:hover,
.service-card:hover .more-link { color: var(--card-gold); }
.info-tile h3 { color: var(--card-gold); }
.info-tile p,
.info-tile a { color: var(--card-ink); }
.info-tile a { border-bottom-color: rgba(0, 122, 116, 0.4); }
.info-tile a:hover { color: var(--card-teal); border-bottom-color: var(--card-teal); }
.info-tile .info-note { color: var(--card-muted); }
.info-tile .info-icon {
color: var(--card-teal);
background-color: rgba(0, 163, 158, 0.08);
border-color: rgba(0, 163, 158, 0.30);
}
.info-tile:hover .info-icon {
color: var(--card-gold);
border-color: rgba(150, 118, 47, 0.45);
}
/* --------------------------------------------------------------------------
Gründer-Karten (ueber-uns.html): hell statt Cyber-Silber
-------------------------------------------------------------------------- */
.founder-card h3 { color: var(--card-heading); }
.founder-card:hover h3 { color: var(--card-gold); }
.founder-role { color: var(--card-muted); }
.founder-monogram {
color: var(--petrol-deep);
background: linear-gradient(150deg, #ffffff, #e6f4f0);
border-color: rgba(0, 77, 74, 0.25);
box-shadow: inset 0 1px 0 #ffffff;
}
.founder-card .founder-divider { background-color: rgba(150, 118, 47, 0.5); }
.founder-linkedin {
color: #3d5a56;
border-color: rgba(0, 77, 74, 0.25);
}
.founder-linkedin:hover,
.founder-linkedin:focus-visible {
color: var(--card-teal);
border-color: rgba(0, 122, 116, 0.6);
box-shadow: 0 8px 20px -10px rgba(2, 26, 24, 0.4);
}
/* --------------------------------------------------------------------------
Icon-Chip: dünne Line-Icons auf Paket-, Care- und Leistungskarten
-------------------------------------------------------------------------- */
.card-head {
display: flex;
align-items: center;
gap: 0.9rem;
}
.card-icon {
display: grid;
place-items: center;
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
color: var(--card-teal);
background-color: rgba(0, 163, 158, 0.08);
border: 1px solid rgba(0, 163, 158, 0.30);
border-radius: 12px;
transition: color 0.4s ease, border-color 0.4s ease;
}
.card-icon svg { display: block; }
.package-card:hover .card-icon,
.service-card:hover .card-icon {
color: var(--card-gold);
border-color: rgba(150, 118, 47, 0.45);
}
/* Service-Karten: Icon-Chip als eigene Zeile über dem Titel */
.service-card > .card-icon { margin-bottom: 1.1rem; }
/* --------------------------------------------------------------------------
Ausgewählte Arbeiten (index.html): Referenzen in Browserrahmen
-------------------------------------------------------------------------- */
.works-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem 2.5rem;
}
.works-head h2 { max-width: 38rem; }
.works-head .more-link { margin-top: 0; }
.works-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
margin-top: 3rem;
}
.work-card {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--radius-lg);
transition: transform 0.4s var(--ease-out), border-color 0.4s ease,
box-shadow 0.4s ease;
}
.work-card:hover {
transform: translateY(-5px);
border-color: var(--card-line-strong);
box-shadow: var(--card-shadow-hover);
}
/* Browser-Chrome-Zeile: helle Leiste mit drei Fensterpunkten */
.work-chrome {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.1rem;
background-color: var(--card-bg-2);
border-bottom: 1px solid var(--card-line);
}
.work-chrome span {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(0, 77, 74, 0.18);
}
.work-chrome .work-url {
width: auto;
height: auto;
margin-left: auto;
padding: 0.15rem 0.85rem;
border-radius: 999px;
background-color: rgba(0, 77, 74, 0.06);
border: 1px solid var(--card-line);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--card-muted);
}
/* Screenshot-Bühne: klar und unverfälscht – kein Blur, keine Abdunklung.
Innen scrollbar (Fullpage-Screenshot läuft vertikal durch), damit auch
tiefere Seitenabschnitte sichtbar werden statt hart beschnitten zu sein. */
.work-shot {
display: block;
aspect-ratio: 5 / 4;
background-color: #0b1514;
}
.work-shot img {
display: block;
width: 100%;
height: auto;
}
.work-info { padding: 1.6rem 1.9rem 1.9rem; }
.work-type {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--card-gold);
}
.work-info h3 {
margin-top: 0.6rem;
font-size: 1.25rem;
font-weight: 800;
color: var(--card-heading);
}
.work-info p {
margin-top: 0.5rem;
font-size: 0.95rem;
line-height: 1.7;
color: var(--card-muted);
}
.work-info .more-link {
margin-top: 1rem;
color: var(--card-teal);
}
.work-info .more-link:hover { color: var(--card-gold); }
/* --------------------------------------------------------------------------
Nummerierte Prozesskarten: 01 Anfrage → 04 Betreuung
-------------------------------------------------------------------------- */
.process-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
gap: clamp(1.25rem, 2.5vw, 1.75rem);
margin-top: 3rem;
}
.process-card {
border-radius: var(--radius);
padding: 1.9rem 1.75rem;
transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.process-card:hover {
transform: translateY(-3px);
border-color: var(--card-line-strong);
box-shadow: var(--card-shadow-hover);
}
.process-num {
display: block;
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.02em;
background-image: linear-gradient(120deg, var(--petrol-deep), var(--color-teal));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.process-card h3 {
margin-top: 1rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--card-heading);
}
.process-card p {
margin-top: 0.5rem;
font-size: 0.9rem;
line-height: 1.7;
color: var(--card-muted);
}
/* --------------------------------------------------------------------------
Mini-Badges: kleine Vertrauens-Pills auf dunklem Seitengrund
-------------------------------------------------------------------------- */
.badge-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem 0.75rem;
margin: 1.75rem auto 0;
max-width: 46rem;
}
.mini-badge {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 1rem;
border: 1px solid var(--line-strong);
border-radius: 999px;
background-color: rgba(64, 224, 208, 0.05);
font-size: 0.8rem;
letter-spacing: 0.03em;
color: var(--color-text-muted);
}
.mini-badge svg {
flex-shrink: 0;
color: var(--color-mint);
}
/* --------------------------------------------------------------------------
Projekt-Konfigurator (kontakt.html): helles, freundliches Formular-Panel
-------------------------------------------------------------------------- */
#project-configurator {
max-width: 62rem;
margin: 2.5rem auto 0;
padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
background-color: var(--card-bg);
border: 1px solid var(--card-line);
border-radius: var(--radius-lg);
box-shadow: var(--card-shadow);
}
#project-configurator .step-indicator { margin-top: 0.5rem; }
.step-indicator li { color: var(--card-muted); }
.step-indicator li span { border-color: rgba(0, 77, 74, 0.30); }
.step-indicator li.active { color: var(--card-heading); }
.step-indicator li.active span {
border-color: var(--card-teal);
color: var(--card-teal);
}
.form-step h2 { color: var(--card-heading); }
.step-hint { color: var(--card-muted); }
/* Auswahl-Kacheln: fast weiße Kacheln auf dem Mintweiß-Panel, klare
Auswahlzustände in Teal – ohne Neon-Glow, mit mehr Innenruhe */
.tile {
background-image: none;
background-color: var(--card-bg-2);
border: 1px solid var(--card-line);
padding: 2.1rem 1.75rem;
}
.tile:hover {
border-color: rgba(0, 122, 116, 0.5);
transform: translateY(-3px);
box-shadow: 0 14px 30px -18px rgba(2, 26, 24, 0.45);
}
.tile::after { border-color: rgba(0, 77, 74, 0.35); }
.tile:has(input:checked) {
border-color: var(--card-teal);
background-color: rgba(0, 163, 158, 0.07);
box-shadow: 0 0 0 1px var(--card-teal);
}
.tile:has(input:checked)::after {
background-color: var(--card-teal);
border-color: var(--card-teal);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-11'/%3E%3C/svg%3E");
background-size: 68%;
background-position: center;
background-repeat: no-repeat;
box-shadow: none;
}
/* JS-Fallback identisch (bewusst getrennt von :has, s. Kommentar oben) */
.tile.is-selected {
border-color: var(--card-teal);
background-color: rgba(0, 163, 158, 0.07);
box-shadow: 0 0 0 1px var(--card-teal);
}
.tile.is-selected::after {
background-color: var(--card-teal);
border-color: var(--card-teal);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-11'/%3E%3C/svg%3E");
background-size: 68%;
background-position: center;
background-repeat: no-repeat;
box-shadow: none;
}
.tile:has(input:focus-visible) { border-color: var(--card-teal); }
.tile-title { color: var(--card-heading); }
.tile-desc { color: var(--card-muted); }
/* Eingabefelder auf hellem Panel */
.field label { color: var(--card-muted); }
.field input,
.field textarea,
.field select {
color: var(--card-ink);
border-bottom-color: rgba(0, 77, 74, 0.30);
}
.field input::placeholder,
.field textarea::placeholder {
color: rgba(76, 103, 99, 0.55);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
border-bottom-color: var(--card-teal);
}
.field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23007a74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.field select option {
background-color: #ffffff;
color: var(--card-ink);
}
.btn-back { color: var(--card-muted); }
.btn-back:hover { color: var(--card-teal); }
/* Ladezustand des Absende-Buttons auf hellem Panel */
.btn-cta.is-loading { border-color: rgba(0, 122, 116, 0.35); }
.btn-cta.is-loading::after {
border-color: rgba(0, 122, 116, 0.25);
border-top-color: var(--card-teal);
}
/* Statusmeldungen auf hellem Panel */
.form-message {
color: var(--card-ink);
border-color: var(--card-line-strong);
background: #ffffff;
max-width: 34rem;
margin-inline: auto;
text-align: left;
}
.form-message.is-error {
border-color: rgba(178, 58, 58, 0.55);
background: rgba(178, 58, 58, 0.06);
}
.form-message.is-success {
border-color: rgba(0, 122, 116, 0.5);
background: rgba(0, 163, 158, 0.07);
}
/* --------------------------------------------------------------------------
Datenschutz-Einwilligung (Pflichtfeld im letzten Schritt)
-------------------------------------------------------------------------- */
.consent-check {
display: flex;
align-items: flex-start;
gap: 0.85rem;
max-width: 34rem;
margin: 2.5rem auto 0;
padding: 1.05rem 1.2rem;
text-align: left;
background-color: var(--card-bg-2);
border: 1px solid var(--card-line);
border-radius: 14px;
cursor: pointer;
transition: border-color 0.3s ease;
}
.consent-check:hover,
.consent-check:focus-within {
border-color: rgba(0, 122, 116, 0.5);
}
.consent-check input {
flex-shrink: 0;
width: 1.2rem;
height: 1.2rem;
margin-top: 0.12rem;
accent-color: var(--card-teal);
cursor: pointer;
}
.consent-check span {
font-size: 0.88rem;
line-height: 1.6;
color: var(--card-ink);
}
.consent-check a {
color: var(--card-teal);
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Pflichtfeld-Hinweis unter dem Formular */
.form-footnote {
margin-top: 1.5rem;
font-size: 0.82rem;
color: var(--card-muted);
text-align: center;
}
/* Erfolgs-Karte nach dem Absenden: hell, mit Teal-Häkchen */
.form-success { border-color: rgba(150, 118, 47, 0.45); }
.form-success h2 { color: var(--card-heading); }
.form-success p { color: var(--card-muted); }
.success-check {
border-color: var(--card-teal);
box-shadow: 0 10px 26px -14px rgba(2, 26, 24, 0.4);
}
.success-check::after {
border-left-color: var(--card-teal);
border-bottom-color: var(--card-teal);
}
/* ==========================================================================
V4.4 – Geräte-Mockups (MacBook & iPhone) als gemeinsame Komponente
Genutzt im Hero (index.html, statische Vorschau) und auf referenzen.html
(scrollbare Vorschau). Komplett aus HTML/CSS: Perspektive, Transforms,
Pseudo-Elemente, Schatten-Layering – keine externen Mockup-Dateien.
========================================================================== */
.device-stage {
position: relative;
perspective: 1600px;
}
/* --------------------------------------------------------------------------
MacBook: Display-Deckel mit Bezel, Notch, Glasreflex und Alu-Basis.
Zwei gestaffelte Drop-Shadows (weit/weich + nah/dicht) verankern das
Gerät räumlich auf dem dunklen Grund.
-------------------------------------------------------------------------- */
.device-laptop {
position: relative;
transform: rotateY(-9deg) rotateX(3.5deg);
transform-style: preserve-3d;
filter: drop-shadow(0 55px 40px rgba(0, 0, 0, 0.5))
drop-shadow(0 16px 14px rgba(0, 0, 0, 0.38));
transition: transform 0.7s var(--ease-out);
}
/* Dezente Zuwendung zum Betrachter beim Hovern der Bühne */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.device-stage:hover .device-laptop {
transform: rotateY(-4deg) rotateX(1.5deg);
}
}
.laptop-screen {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: #04100f;
border: clamp(7px, 1vw, 10px) solid #131d1c;
border-bottom-width: clamp(12px, 1.6vw, 18px);
border-radius: 18px 18px 5px 5px;
box-shadow:
inset 0 0 0 1.5px rgba(255, 255, 255, 0.07),
inset 0 0 26px rgba(0, 0, 0, 0.35);
}
/* MacBook-Notch mittig in der oberen Bezel-Kante */
.laptop-screen::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
width: 13%;
height: 8px;
background-color: #131d1c;
border-radius: 0 0 9px 9px;
}
/* Glasreflex: diagonaler Lichteinfall von links oben, klick-transparent */
.laptop-screen::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(112deg,
rgba(255, 255, 255, 0.10) 0%,
rgba(255, 255, 255, 0.035) 24%,
rgba(255, 255, 255, 0) 40%);
}
/* Statische Vorschau (Hero): Bild füllt den Screen, oben verankert */
.laptop-screen > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
/* Alu-Unterteil: Lichtkante oben, abgedunkelte Front, Öffnungs-Kerbe */
.laptop-base {
position: relative;
height: 17px;
margin: 0 -6%;
background: linear-gradient(#414e4b 0%, #2b3533 20%, #17201e 58%, #0a100f 100%);
border-radius: 4px 4px 16px 16px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -2px 3px rgba(0, 0, 0, 0.55),
0 10px 18px -8px rgba(0, 0, 0, 0.6);
}
.laptop-base::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 15%;
height: 7px;
background-color: #0c1413;
border-radius: 0 0 10px 10px;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
}
/* Weicher Bodenkontakt unter der Basis */
.laptop-base::after {
content: '';
position: absolute;
left: 8%;
right: 8%;
bottom: -10px;
height: 10px;
background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, 0.45), transparent 75%);
pointer-events: none;
}
/* --------------------------------------------------------------------------
iPhone: Metallring-Rahmen, Dynamic Island, Glasreflex, gestaffelte
Schatten. Leicht gedreht für eine natürlichere Komposition.
-------------------------------------------------------------------------- */
.device-phone {
position: relative;
aspect-ratio: 9 / 19;
overflow: hidden;
background-color: #04100f;
border: 6px solid #131d1c;
border-radius: clamp(1.5rem, 2vw, 2rem);
box-shadow:
0 0 0 1.5px rgba(255, 255, 255, 0.16),
0 36px 50px -18px rgba(0, 0, 0, 0.7),
0 10px 18px -8px rgba(0, 0, 0, 0.5),
inset 0 0 0 1px rgba(0, 0, 0, 0.65);
transform: rotate(2deg);
transition: transform 0.7s var(--ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.device-stage:hover .device-phone {
transform: rotate(0.5deg) translateY(-4px);
}
}
/* Dynamic-Island-Pille */
.device-phone::before {
content: '';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
width: 34%;
height: 10px;
background-color: #0c1413;
border-radius: 999px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* Glasreflex an der linken Gehäusekante */
.device-phone::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(105deg,
rgba(255, 255, 255, 0.10) 0%,
rgba(255, 255, 255, 0.02) 30%,
rgba(255, 255, 255, 0) 45%);
border-radius: inherit;
}
.device-phone > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
/* --------------------------------------------------------------------------
Scrollbare Geräte-Displays (referenzen.html): der Fullpage-Screenshot
läuft in natürlicher Höhe durch einen Scroll-Container im Screen.
overscroll-behavior verhindert, dass am Bildende die Seite mitscrollt.
-------------------------------------------------------------------------- */
.device-scroll {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
scrollbar-width: thin; /* Firefox */
scrollbar-color: rgba(64, 224, 208, 0.55) rgba(4, 16, 15, 0.5);
}
.device-scroll::-webkit-scrollbar { width: 5px; }
.device-scroll::-webkit-scrollbar-track { background-color: rgba(4, 16, 15, 0.5); }
.device-scroll::-webkit-scrollbar-thumb {
background-color: rgba(64, 224, 208, 0.55);
border-radius: 999px;
}
/* Volle Breite, natürliche Höhe – bewusst KEIN object-fit,
damit die komplette Seitenlänge scrollbar bleibt */
.device-scroll img {
display: block;
width: 100%;
height: auto;
}
/* Scrollbare Browser-Bühne der Projektkarten (index.html) */
.work-shot.device-scroll { height: auto; }
/* --------------------------------------------------------------------------
Icon vor Bento-Labels: kleines Line-Icon in Teal neben der Gold-Überschrift
-------------------------------------------------------------------------- */
.bento-card h4 {
display: flex;
align-items: center;
gap: 0.55rem;
}
.bento-card h4 svg {
flex-shrink: 0;
color: var(--card-teal);
}