/* SAMiT v2 · Preview Stylesheet — Iteration 3
* Charakter: Wix-"Sat-net Portable"-Template adaptiert
* Heavy Display-Sans (Archivo Black ≈ Benzin), Silber + Black, Pill-Buttons, Mosaic-Layouts
*/
/* ============================================================
FONTS · self-hosted (DSGVO, kein Google-CDN) · Inter + Manrope
Dateien + @font-face in /assets/fonts/samit-fonts.css (latin + latin-ext)
============================================================ */
@import url("/assets/fonts/samit-fonts.css?v=20261008");
:root {
/* Ein Abstand fuer alle Abschnitte, site-weit (Entscheid Saman 2026-08-13):
so knapp wie moeglich, ohne dass zwei Abschnitte aneinanderkleben.
Zwischen zwei Abschnitten liegen damit hoechstens 112px statt bisher
144px auf den v2-Seiten und 304px auf den Projektseiten. */
--v2-pad-section: clamp(2.5rem, 5vw, 3.5rem);
--v2-pad-x: clamp(1.5rem, 4vw, 3rem);
/* Das Inhaltsmass der Website ist --c-grid (1440px, definiert in
base.css) plus Innenabstand. Siehe .v2-container. Der schmale Wert
unten ist nur noch fuer lange Rechtstexte gedacht, nicht fuer
normale Abschnitte, sonst entstehen zwei linke Kanten. */
--v2-container-narrow: 980px;
--v2-ink: #0e0f12;
--v2-ink-soft: #484c56;
--v2-silber: #e4e7ea;
--v2-silber-soft: #eceff2;
--v2-paper: #f4f6f8;
--v2-dark: #0a0a0c;
/* Eine Linienfamilie fuer die ganze Website (Entscheid Saman 2026-08-11):
dieselbe Farbe wie die Kachelraender, nur heller. Vorher lagen drei
verschiedene Grautoene nebeneinander, das wirkte zusammengewuerfelt. */
--v2-line: rgba(27, 58, 94, 0.22);
--v2-line-soft: rgba(27, 58, 94, 0.12);
--v2-line-light: rgba(228, 231, 234, 0.18);
/* Mono-Brand: Silber + Blau · eine Akzent-Farbe */
--v2-blue: #1B3A5E; /* Tintenblau, primärer Akzent */
--v2-blue-light: #6B8FB5; /* hellere Variante für Dark-BG */
--v2-accent: var(--v2-blue); /* alle Akzente = Tintenblau */
/* Eyecatcher: Coral — strategisch sparsam einsetzen,
nur für "Achtung-hier"-Akzente: Badges, dringliche Hinweise,
KI-Pilot-Markierung, NIS2-Fristen, Notification-Dots. */
--v2-coral: #FF6B47;
--v2-coral-soft: #FFE4DD;
--v2-coral-pulse: rgba(255, 107, 71, 0.25);
--v2-blue-tint: #ECF1F8;
/* Eine Flaeche fuer alle Hinweis- und Lesekaesten (Entscheid Saman
2026-08-13, abgenommen am NIS2-Fristbanner). Bis 10.09.2026 ein
Ziegelrot rgba(192, 57, 43, 0.07), das in der Guideline nie vorkam.
Auf Creme ergab es einen Sandton, auf Silber ein Rosé, damit lagen in
derselben Karte zwei Farbfamilien uebereinander. Jetzt dieselbe
Tintenblau-Toenung wie die uebrigen Fuellflaechen, nur eine Stufe
staerker: Kartenkopf 0.06, ausgewaehlte Antwort im Selbstcheck 0.08,
Hinweis 0.09. Unterschieden wird durch Gewicht, nicht durch einen
zweiten Farbton. Coral bleibt das Signal, ueberall wo bewusst
hingewiesen wird: Badges, Fristen, Punkte. Nicht fuer ruhige Flaechen. */
--v2-hinweis: rgba(27, 58, 94, 0.09);
/* Abgehaktes Kaestchen statt Aufzaehlungspunkt (Entscheid Saman
2026-08-13). Als SVG in der Variable, damit jede Liste dasselbe
Zeichen benutzt und es an einer Stelle geaendert werden kann. */
--v2-haken-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='0.7' y='0.7' width='12.6' height='12.6' rx='2.2' fill='none' stroke='%231B3A5E' stroke-width='1.2'/%3E%3Cpath d='M3.8 7.1 5.9 9.2 10.1 4.8' fill='none' stroke='%231B3A5E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* Pillar-Variablen ZÜRÜCKHALTEND: alle gleich, kein Farb-Differenzierungs-System mehr */
--v2-pillar-w: var(--v2-blue);
--v2-pillar-s: var(--v2-blue);
--v2-pillar-o: var(--v2-blue);
--v2-pillar-s-light: var(--v2-blue-light);
/* Schrift-System nach Wix-Spec:
* - Display (NUR H1, Hero-Titel): Archivo Black (Benzin-Alternative)
* - Alles andere (H2-H6, Body, UI): Inter (Neue Haas Unica Pro-Alternative)
*/
--v2-display: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
--v2-sans: "Inter", "Droid Sans", system-ui, -apple-system, sans-serif;
/* Größen: ruhige Hierarchie. Hero bleibt das eine große Statement,
Section-Titel deutlich beruhigt (war bis 84px, jetzt 44px). */
--v2-fs-display: clamp(34px, 5.2vw, 84px); /* Hero-Titel, groesste Stufe */
--v2-fs-h1: clamp(36px, 4.4vw, 72px); /* Hero H1 (eigener Override im Hero) */
--v2-fs-h2: clamp(25px, 2.5vw, 40px); /* Section-Titel */
--v2-fs-h3: clamp(21px, 2vw, 31px); /* Sub-Headline, Mosaic */
--v2-fs-h4: clamp(19px, 1.7vw, 28px); /* Mosaic-Title */
--v2-fs-h5: clamp(17px, 1.4vw, 24px); /* Card-Title */
--v2-fs-h6: clamp(15px, 1.15vw, 21px); /* Punkt-Title */
/* ============================================================
SCHRIFTGROESSEN-LEITER (Saman 2026-08-13)
Vorher standen 47 verschiedene Groessen nebeneinander. Fuenf Stufen
fuer Text, dazu die Ueberschriften-Werte darunter. Wer eine neue
Groesse braucht, nimmt eine dieser Stufen, keinen neuen Wert.
mikro = Marken, Labels, Eyebrows, Fussnoten
klein = Erklaertexte, Bedienelemente, Detailzeilen
body = Fliesstext
lead = Einleitungen, hervorgehobene Absaetze
gross = grosse Zahlen und Aussagen unterhalb der Ueberschriften
Der erste Wert jeder Stufe gilt auf dem Handy, der letzte auf grossen
Bildschirmen. Die Mindestwerte wurden am 14.08.2026 angehoben, weil auf
375px alles am unteren Anschlag landete: Fliesstext stand bei 14px,
Labels bei 11px. Die Maxima blieben unveraendert.
============================================================ */
--v2-fs-mikro: clamp(12px, 0.62vw, 13px);
--v2-fs-klein: clamp(13.5px, 0.72vw, 15px);
--v2-fs-gross: clamp(19px, 1.05vw, 22px);
--v2-fs-lead: clamp(17px, 0.92vw, 19px);
--v2-fs-body: clamp(15.5px, 0.8vw, 17px);
--v2-fs-small: clamp(14px, 0.875vw, 18px);
--v2-fs-eyebrow: clamp(12px, 0.75vw, 15px);
}
body[data-page="landing-v2"] {
background: var(--v2-silber);
color: var(--v2-ink);
font-family: var(--v2-sans);
/* Legacy-CSS-Variablen auf v2-Palette mappen, damit components.css und
pages.css ihre var(--bg)/var(--bg-soft)/var(--bg-card)-Aufrufe in der
Silber-Warm-Welt landen statt im alten Light-Gray-Blau. */
--bg: var(--v2-silber);
--bg-soft: var(--v2-paper);
--bg-card: #ffffff; /* Cards bewusst weiß, klarer Card-Look auf Silber */
--ink: var(--v2-ink);
--ink-soft: var(--v2-ink-soft);
--line: var(--v2-line);
--line-soft: var(--v2-line-soft);
--gold: var(--v2-blue); /* alte Gold-Akzente werden Tintenblau */
--font-sans: var(--v2-sans); /* Legacy Droid Sans → Inter überall */
/* Mono-Brand-Mapping: alte Pillar-Farben (Türkis, Lila, Orange) auf
Tintenblau ziehen. Saman-Spec: nur EINE Akzentfarbe site-weit. */
--workplace: var(--v2-blue);
--security: var(--v2-blue);
--operations: var(--v2-blue);
--pillar: var(--v2-blue);
}
body[data-page="landing-v2"] main {
background: var(--v2-silber);
}
/* ============================================================
HEADER · transparent über Hero, Silber beim Scrollen
Light-Hero Pages (ohne BG-Visual): Header sofort solid via
body[data-hero="light"]
============================================================ */
.v2-header {
background: transparent;
border: 1px solid transparent;
color: var(--v2-silber);
/* Wichtig: components.css setzt backdrop-filter: blur(8px) — den
explizit löschen, sonst hat der schwebende Header Milchglas. */
backdrop-filter: none;
-webkit-backdrop-filter: none;
/* Smooth Color-Transition (kein Layout-Morph mehr, da keine Pille) */
transition: color 320ms ease, top 320ms ease;
/* Layout */
gap: clamp(1rem, 2vw, 2.4rem);
padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
padding-right: clamp(1.25rem, 2.5vw, 2.5rem);
}
/* FLOATING-TRANSPARENT (Wix-Style):
Header schwebt mit Margin oben und Seiten.
- Default (über Brain-Hero): komplett transparent
- Scrolled (im Content runter gescrollt): MILCHIG mit subtilem BG
→ bessere Lesbarkeit auf Silber Body-Sections wo Text dahinter liegt
- Light-Hero (Über mich, Kontakt, Stack-Partner): ebenfalls milchig
*/
.v2-header {
/* Schon im Default leicht eingerückt — schwebt von Anfang an */
top: 0.9rem;
left: clamp(1rem, 3vw, 2.5rem);
right: clamp(1rem, 3vw, 2.5rem);
border-radius: 999px;
}
/* Textfarbe ink: beim Scrollen ODER auf Light-Hero-Pages (Lesbarkeit auf Silber).
Auf Light-Hero-Pages aber NUR die Farbe — der Header bleibt oben transparent
und wird erst beim Scrollen milchig, gleiche Regel wie auf den Dark-Hero-Pages. */
.v2-header.has-scrolled,
body[data-hero="light"] .v2-header {
color: var(--v2-ink);
}
/* MILCHGLAS-Pille: nur im gescrollten Zustand (Dark- wie Light-Hero-Pages).
semi-transparent Silber + Backdrop-Blur, bessere Lesbarkeit auf Silber Body. */
.v2-header.has-scrolled {
background: rgba(228, 231, 234, 0.65);
border-color: rgba(14, 15, 18, 0.06);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow:
0 1px 2px rgba(14, 15, 18, 0.04),
0 8px 28px rgba(14, 15, 18, 0.08);
}
/* Foto-Hero-Seiten (Projekt-Detail): Header schwebt transparent wie auf der
Landingpage. Milchglas kommt erst beim Scrollen (has-scrolled) zurück,
nicht schon im Ausgangszustand durch data-hero="light". */
body[data-hero="light"]:has(.hero-page__photo) .v2-header:not(.has-scrolled) {
color: var(--v2-ink);
background: transparent;
border-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
.v2-brand__logo {
transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Schutz für dunkle Sections im Body (z.B. v2-section--dark, CTA-Section):
Wenn der Header über eine dunkle Section gleitet, würde ink-Text verschwinden.
Per JS wird beim Hover über dunkle Section .v2-header--on-dark gesetzt. */
.v2-header--on-dark {
color: var(--v2-silber) !important;
}
.v2-header--on-dark .v2-brand__logo--dark {
display: none !important;
}
.v2-header--on-dark .v2-brand__logo--light {
display: block !important;
}
.v2-nav {
font-family: var(--v2-sans);
flex-wrap: nowrap;
/* Luftig auf großen Monitoren, deutlich knapper auf schmalen Desktops, damit
neben der Nav die beiden Icon-Kreise (Support + Erstgespräch) passen. */
gap: clamp(0.9rem, 1.6vw, 3.2rem);
justify-content: flex-end;
}
/* Support-Kreis im Header: kompakter runder Button, Coral solid.
Triggert via support-modal.js das Modal mit den 3 Tool-Optionen.
Saubere HTML: Support */
.v2-header .v2-btn--support {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
padding: 0;
font-family: var(--v2-sans);
font-size: var(--v2-fs-mikro);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
background: var(--v2-coral);
color: #fff;
border: 1px solid var(--v2-coral);
box-shadow: 0 4px 14px rgba(255, 107, 71, 0.35);
transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
white-space: nowrap;
text-align: center;
line-height: 1;
}
.v2-header .v2-btn--support:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(255, 107, 71, 0.45);
background: #ff5530;
}
/* Desktop: Icon sichtbar, Text-Label versteckt (wie Mobile). */
.v2-btn--support__icon { display: block; width: 22px; height: 22px; }
/* Beide Labels sind Default aus, sichtbar erst im Hover-Block weiter unten. */
.v2-btn--support__label,
.v2-btn--erstgespraech__label { display: none; }
/* ============================================================
HEADER-CTA · Erstgespräch (Akquise), als gefüllter Pill mit Icon
neben dem Support-Kreis. Silber über dem dunklen Hero, Tintenblau
beim Scrollen und auf Light-/Foto-Hero-Seiten (immer lesbar).
============================================================ */
.v2-header .v2-btn--erstgespraech {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
text-decoration: none;
transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease;
}
.v2-header .v2-btn--erstgespraech svg { width: 22px; height: 22px; flex-shrink: 0; }
.v2-header .v2-btn--erstgespraech:hover { transform: translateY(-1px); }
/* Über dunklem Hero (Header transparent): Silber solid, Tintenblau-Inhalt */
.v2-header:not(.has-scrolled) .v2-btn--erstgespraech {
background: var(--v2-silber);
color: var(--v2-blue);
box-shadow: 0 4px 14px rgba(228, 231, 234, 0.22);
}
.v2-header:not(.has-scrolled) .v2-btn--erstgespraech:hover {
box-shadow: 0 7px 20px rgba(228, 231, 234, 0.32);
}
/* Gescrollt ODER Light-/Foto-Hero-Seiten: Tintenblau solid, Silber-Inhalt */
.v2-header.has-scrolled .v2-btn--erstgespraech,
body[data-hero="light"] .v2-header .v2-btn--erstgespraech {
background: var(--v2-blue);
color: var(--v2-silber);
box-shadow: 0 4px 14px rgba(27, 58, 94, 0.22);
}
.v2-header.has-scrolled .v2-btn--erstgespraech:hover,
body[data-hero="light"] .v2-header .v2-btn--erstgespraech:hover {
box-shadow: 0 7px 20px rgba(27, 58, 94, 0.32);
}
/* Mobile/Tablet: CTA bleibt sichtbar wie der Support-Kreis (kompakter),
damit der wichtigste Akquise-Button auch auf dem Smartphone direkt erreichbar
ist (Großteil des Traffics ist mobil). */
@media (max-width: 960px) {
.v2-header .v2-btn--erstgespraech { width: 46px; height: 46px; }
.v2-header .v2-btn--erstgespraech svg { width: 20px; height: 20px; }
}
@media (max-width: 600px) {
.v2-header .v2-btn--erstgespraech { width: 44px; height: 44px; }
.v2-header .v2-btn--erstgespraech svg { width: 19px; height: 19px; }
}
/* Auf Tablet/Mobile: Icon statt Text im Kreis, damit nichts überläuft.
Bleibt sichtbar — Saman will den Direkt-Trigger immer parat. */
@media (max-width: 960px) {
.v2-header .v2-btn--support {
width: 46px;
height: 46px;
padding: 0;
}
.v2-btn--support__label { display: none; }
.v2-btn--support__icon { display: block; }
/* Mobile-Panel klar unter den schwebenden Header schieben, sonst
ueberlappen Logo und Support-Button den oberen Panel-Rand. */
.mobile-panel {
top: 6.5rem;
}
}
@media (max-width: 600px) {
.v2-header .v2-btn--support {
width: 44px;
height: 44px;
}
.v2-btn--support__icon { width: 20px; height: 20px; }
}
/* ============================================================
HEADER-KREISE · Hover-Label ("Support" / "Erstgespraech")
Der Kreis zieht sich beim Hover nach links zu einer Pille auf und gibt
das Label frei. Icon und rechte Kante bleiben stehen (row-reverse +
rechtsbuendige Actions), es waechst nur nach links.
Warum der Platz vorab reserviert wird (min-width auf .site-header__actions):
Die Navigation endet direkt neben dem Support-Kreis ("Ueber mich").
Ohne Reserve wuerde die Nav beim Hover um bis zu 110px zur Seite springen.
Mit Reserve steht die Nav einmalig etwas weiter links (der Platz zwischen
Logo und Nav ist ohnehin leer) und bewegt sich beim Hover nie.
Nur fuer echte Zeiger ab 1100px: darunter ist die Nav eingeklappt und
es gibt keinen Hover (Touch), dort bleiben die Kreise wie bisher.
============================================================ */
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
/* Reserve = breitester Zustand: Support-Kreis (64) + Gap (10.4) + breiteste
Pille (178 = "Zum Formular" auf der Kontaktseite). Nav bleibt dadurch beim
Aufziehen stehen. Bei laengeren Labels hier mit erhoehen. */
.v2-header .site-header__actions {
justify-content: flex-end;
min-width: 253px;
}
.v2-header .v2-btn--support,
.v2-header .v2-btn--erstgespraech {
/* Breite folgt jetzt dem Inhalt statt fix 64px, damit sie animierbar ist.
Ruhezustand bleibt exakt der bisherige 64px-Kreis:
21 + 22 (Icon) + 21 = 64. */
width: auto;
min-width: 64px;
padding: 0 21px;
border-radius: 999px;
/* Label links, Icon rechts, ohne die HTML-Reihenfolge zu drehen. */
flex-direction: row-reverse;
justify-content: flex-start;
gap: 0;
transition: transform 200ms ease, box-shadow 200ms ease,
background 200ms ease, color 200ms ease;
}
/* Das Label klappt aus 0 Breite auf. max-width ist exakt die gemessene
Textbreite (--v2-label-w), sonst laeuft die Animation ins Leere und
wirkt abgehackt. Bei geaendertem Text/Schrift hier nachmessen. */
.v2-btn--support__label,
.v2-btn--erstgespraech__label {
display: block;
max-width: 0;
margin-right: 0;
overflow: hidden;
opacity: 0;
font-family: var(--v2-sans);
font-size: var(--v2-fs-mikro);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
transition: max-width 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
margin-right 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
opacity 180ms ease;
}
.v2-header .v2-btn--support:hover .v2-btn--support__label,
.v2-header .v2-btn--support:focus-visible .v2-btn--support__label,
.v2-header .v2-btn--erstgespraech:hover .v2-btn--erstgespraech__label,
.v2-header .v2-btn--erstgespraech:focus-visible .v2-btn--erstgespraech__label {
max-width: var(--v2-label-w, 100px);
margin-right: 11px;
opacity: 1;
}
/* Support hat als einziger einen 1px-Rahmen. Bei width:auto zaehlt der oben
drauf, deshalb 20px Padding statt 21, sonst waere der Kreis 66 statt 64
und damit 2px groesser als der Kalender-Kreis daneben. */
.v2-header .v2-btn--support { --v2-label-w: 61px; padding: 0 20px; }
.v2-header .v2-btn--erstgespraech { --v2-label-w: 101px; }
/* Kontaktseite: dort springt der Button ans Formular statt auf /kontakt/,
Label heisst "Zum Formular" und ist minimal breiter. */
.v2-header .v2-btn--erstgespraech[href="#formular"] { --v2-label-w: 103px; }
}
/* Kein Aufziehen bei reduzierter Bewegung, Label klappt ohne Animation auf. */
@media (prefers-reduced-motion: reduce) {
.v2-btn--support__label,
.v2-btn--erstgespraech__label {
transition: none;
}
}
/* Nav-Toggle (Mobile-Burger) auf transparentem Header über dunklem Hero:
helle Linien + sichtbarer Border. Beim Scrollen / auf Light-Hero greift
wieder der dunkle Default. */
.v2-header:not(.has-scrolled) .nav-toggle {
border-color: rgba(228, 231, 234, 0.4);
background: rgba(228, 231, 234, 0.06);
}
.v2-header:not(.has-scrolled) .nav-toggle:hover {
background: rgba(228, 231, 234, 0.14);
border-color: var(--v2-silber);
}
.v2-header:not(.has-scrolled) .nav-toggle__bars,
.v2-header:not(.has-scrolled) .nav-toggle__bars::before,
.v2-header:not(.has-scrolled) .nav-toggle__bars::after {
background: var(--v2-silber);
}
body[data-hero="light"] .v2-header .nav-toggle {
border-color: var(--v2-line);
background: transparent;
}
body[data-hero="light"] .v2-header .nav-toggle__bars,
body[data-hero="light"] .v2-header .nav-toggle__bars::before,
body[data-hero="light"] .v2-header .nav-toggle__bars::after {
background: var(--v2-ink);
}
.v2-nav a {
color: inherit;
text-decoration: none;
font-size: var(--v2-fs-lead);
font-weight: 400;
letter-spacing: 0.005em;
padding: 0.5rem 0;
position: relative;
white-space: nowrap;
}
.v2-nav a:hover {
text-decoration: underline;
text-underline-offset: 6px;
}
/* Dropdown-Panel: Apple-Frosted-Glass-Look.
Hintergrund fast transparent — der starke backdrop-filter macht die
Lesbarkeit dort wo der Background-Content sonst stört.
Adaptiv: ein Stil, der auf Silber UND dark BG funktioniert.
Symmetrisch mittig zentriert unter dem Trigger. */
.v2-header .nav-dropdown {
/* Mittig + kompakter min-width für symmetrische Optik */
left: 50% !important;
transform: translateX(-50%) translateY(-4px);
min-width: 220px;
padding: 0.4rem;
/* Solider Hintergrund: auch über hellem, text-befülltem Inhalt voll lesbar.
Kein Backdrop-Blur, keine Transparenz. */
background: var(--v2-silber);
border: 1px solid rgba(14, 15, 18, 0.12);
border-radius: 14px;
box-shadow:
0 1px 2px rgba(14, 15, 18, 0.06),
0 16px 40px rgba(14, 15, 18, 0.18);
}
.v2-header .nav-dropdown a {
color: var(--v2-ink);
white-space: nowrap;
text-align: center;
font-weight: 500;
border-radius: 8px;
margin: 1px 0;
}
.v2-header .nav-dropdown a:hover {
background: rgba(228, 231, 234, 0.35);
color: var(--v2-blue);
text-decoration: none;
}
.v2-header .nav-dropdown__group {
color: var(--v2-ink-soft);
text-align: center;
}
.v2-header .nav-dropdown hr {
background: var(--v2-line-soft);
}
/* Wenn Header über Dark-Section schwebt: Text Silber, BG-Tint leicht dunkler */
.v2-header--on-dark .nav-dropdown,
body:not([data-hero="light"]) .v2-header:not(.has-scrolled) .nav-dropdown {
background: rgba(14, 15, 18, 0.32);
border-color: rgba(228, 231, 234, 0.15);
}
.v2-header--on-dark .nav-dropdown a,
body:not([data-hero="light"]) .v2-header:not(.has-scrolled) .nav-dropdown a {
color: var(--v2-silber);
}
.v2-header--on-dark .nav-dropdown a:hover,
body:not([data-hero="light"]) .v2-header:not(.has-scrolled) .nav-dropdown a:hover {
background: rgba(228, 231, 234, 0.18);
color: var(--v2-silber);
}
.v2-header--on-dark .nav-dropdown__group,
body:not([data-hero="light"]) .v2-header:not(.has-scrolled) .nav-dropdown__group {
color: rgba(228, 231, 234, 0.6);
}
/* Brand-Logo: originales SVG aus /assets/logo/.
Zwei Varianten: dark (für Light-BG) + light (für Dark-Hero).
Default zeigt dark; light blendet nur über transparentem Header
auf dunklem Hero ein.
============================================================ */
.v2-brand {
display: inline-flex;
align-items: center;
text-decoration: none;
color: inherit;
}
.v2-brand__logo {
/* Seit 2026-08-11 die randlos beschnittenen Logo-Dateien (-tight): die
alten hatten rund die Haelfte Leerraum in der viewBox, dadurch wurde
die Marke nur halb so gross gezeichnet und wirkte auf Monitoren ohne
doppelte Pixeldichte unscharf. Die Hoehen sind entsprechend
umgerechnet (fruehere Boxhoehe mal 0,46 plus etwas Zugabe). */
height: 52px;
width: auto;
display: block;
}
.v2-brand__logo--light {
display: none;
}
body:not([data-hero="light"]) .v2-header:not(.has-scrolled) .v2-brand__logo--dark {
display: none;
}
body:not([data-hero="light"]) .v2-header:not(.has-scrolled) .v2-brand__logo--light {
display: block;
}
/* Footer-Logo-Höhe wird in components.css gesetzt */
/* Mittlere Desktops/Laptops: Logo etwas kompakter, damit neben der Nav noch
beide Icon-Kreise (Support + Erstgespräch) in den Header passen. Auf großen
Monitoren (>1280px) bleibt das Logo in voller Größe. */
@media (max-width: 1280px) {
.v2-header .v2-brand__logo {
height: 42px;
}
}
/* Schmale Desktops/Laptops (961–1120px): volle Nav + die beiden Icon-Kreise
(Support + Erstgespräch) passen nicht nebeneinander. Daher klappt die Nav
hier schon ins Burger-Menü, wie ab 960px, nur etwas früher. */
@media (min-width: 961px) and (max-width: 1039px) {
.v2-header .site-nav { display: none; }
.v2-header .nav-toggle { display: inline-flex; }
.mobile-panel { top: 6.5rem; }
}
@media (min-width: 1040px) and (max-width: 1120px) {
.v2-header .v2-nav { gap: 0.9rem; font-size: 0.9rem; }
.v2-header { gap: 0.75rem; }
.v2-header .v2-brand__logo { height: 36px; }
.v2-header .nav-toggle { display: none; }
.v2-header .site-header__brand, .v2-header .site-header__actions { min-width: 150px; }
}
/* Tablet: Logo deutlich kompakter, passend zur schwebenden Pille */
@media (max-width: 960px) {
.v2-header .v2-brand__logo {
height: 30px;
}
}
/* Mobile: Logo passend zur Header-Höhe */
@media (max-width: 600px) {
.v2-header .v2-brand__logo {
height: 26px;
}
}
/* ============================================================
CONTAINER
============================================================ */
.v2-container {
/* Ein Inhaltsmass fuer die ganze Website (Entscheid Saman 2026-08-11):
der Inhalt endet buendig mit dem Hero-Rahmen (--c-grid = 1280px).
Der Innenabstand kommt oben drauf, damit die Innenkante des
Containers exakt auf der Rahmenkante des Heros sitzt. */
max-width: calc(var(--c-grid) + 2 * var(--v2-pad-x));
margin: 0 auto;
padding: 0 var(--v2-pad-x);
}
.v2-container--narrow {
max-width: var(--v2-container-narrow);
}
/* ============================================================
SECTION DEFAULTS
============================================================ */
.v2-section {
padding: var(--v2-pad-section) 0;
position: relative;
}
.v2-section--paper { background: var(--v2-silber); }
.v2-section--dark { background: var(--v2-dark); color: var(--v2-silber); }
/* Zwei direkt aufeinanderfolgende Paper-Sections (Zwei Versprechen +
Service-Modelle) teilen eine durchgehende Flaeche. Den doppelten
Section-Abstand dazwischen kollabieren, damit kein leerer Silber-Streifen
entsteht (besonders sichtbar auf Tablet). */
.v2-section--paper + .v2-section--paper {
padding-top: 0;
}
/* ============================================================
TYPOGRAPHY
============================================================ */
.v2-display {
font-family: var(--v2-display);
font-weight: 900;
line-height: 1;
letter-spacing: -0.025em;
text-transform: none;
}
.v2-h2 {
font-family: var(--v2-display);
font-size: var(--v2-fs-h2);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 1.5rem;
}
.v2-h3 {
font-family: var(--v2-display);
font-size: var(--v2-fs-h3);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0 0 0.6rem;
}
.v2-eyebrow {
display: inline-block;
font-family: var(--v2-sans);
font-size: var(--v2-fs-eyebrow);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--v2-ink-soft);
font-weight: 500;
margin: 0 0 1.5rem;
}
.v2-eyebrow--light { color: rgba(228, 231, 234, 0.6); }
.v2-lead {
font-family: var(--v2-sans);
font-size: var(--v2-fs-lead);
line-height: 1.6;
color: var(--v2-ink-soft);
max-width: 52ch;
margin: 0;
font-weight: 400;
}
.v2-lead--light { color: rgba(228, 231, 234, 0.78); }
.v2-body {
font-size: var(--v2-fs-body);
line-height: 1.65;
color: var(--v2-ink);
max-width: 56ch;
}
/* ============================================================
PILL BUTTONS · outline default, solid alternative
============================================================ */
.v2-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 2.25rem;
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
color: var(--v2-blue);
background: transparent;
border: 1.5px solid var(--v2-blue);
border-radius: 9999px;
transition: all 200ms ease;
cursor: pointer;
line-height: 1;
/* Eine Groesse fuer alle Knoepfe (Entscheid Saman 2026-08-20): gleiche
Hoehe und gleiche Mindestbreite, damit zwei Knoepfe untereinander oder
nebeneinander nie unterschiedlich gross wirken. min() gibt die
Mindestbreite auf schmalen Geraeten wieder her, sonst laufen die
Knoepfe in engen Kacheln aus dem Rahmen. */
min-height: 3rem;
min-width: min(26em, 100%);
max-width: 100%;
text-align: center;
}
/* Blaues Fuellen beim Hover gibt es nur noch auf der Kontaktseite,
ueberall sonst fuellt der Coral-Fill am Dateiende. */
body.kontakt-seite .v2-btn:hover {
background: var(--v2-blue);
color: var(--v2-silber);
}
.v2-btn--solid {
background: var(--v2-blue);
color: var(--v2-silber);
border-color: var(--v2-blue);
}
.v2-btn--solid:hover {
background: transparent;
color: var(--v2-blue);
}
.v2-btn--light {
color: var(--v2-silber);
border-color: var(--v2-silber);
}
.v2-btn--light:hover {
background: var(--v2-silber);
color: var(--v2-blue);
}
/* .v2-btn--sm ist entfallen (2026-08-20). Es gibt nur noch eine Knopfgroesse;
ein zweiter, kleinerer Knopf hat auf der Seite immer unruhig gewirkt. */
/* Text-Link (kein Pill) */
.v2-link {
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
font-weight: 500;
letter-spacing: 0.05em;
text-decoration: none;
color: var(--v2-ink);
border-bottom: 1px solid var(--v2-ink);
padding-bottom: 2px;
}
.v2-link:hover { color: var(--v2-accent); border-bottom-color: var(--v2-accent); }
.v2-link--light { color: var(--v2-silber); border-bottom-color: var(--v2-silber); }
/* ============================================================
HERO · schwarz, asymmetrische Tagline, riesiges Visual
============================================================ */
.v2-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
background: var(--v2-dark);
color: var(--v2-silber);
overflow: hidden;
padding: 7rem 0 5rem;
}
.v2-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
opacity: 1;
}
.v2-hero__bg video,
.v2-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
/* Leicht entsättigt: Farbe sichtbar aber gedämpft, edel und einladend.
Etwas dunkler für Text-Lesbarkeit. */
filter: grayscale(35%) contrast(1.1) brightness(0.78);
}
.v2-hero__bg::after {
content: "";
position: absolute;
inset: 0;
/* Zwei Schichten: Vignette für die Ränder PLUS vertikaler Verlauf,
der die Mitte hinter der Headline abdunkelt = Text immer lesbar. */
background:
linear-gradient(to bottom, rgba(10, 10, 12, 0.35) 0%, rgba(10, 10, 12, 0.55) 50%, rgba(10, 10, 12, 0.45) 100%),
radial-gradient(ellipse at center, transparent 0%, rgba(10, 10, 12, 0.3) 70%, var(--v2-dark) 100%);
}
.v2-hero__inner {
position: relative;
z-index: 1;
width: 100%;
/* Das Video bleibt randlos, nur der Textblock darin folgt dem
Inhaltsmass, sonst driftet er auf Ultrawide an die Raender. */
max-width: calc(var(--c-grid) + 2 * var(--v2-pad-x));
margin: 0 auto;
padding: 0 var(--v2-pad-x);
text-align: center;
}
.v2-hero__split {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
margin: 0 auto 2rem;
max-width: 1100px;
padding: 0 1rem;
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--v2-silber);
font-weight: 300;
}
/* Eyebrows zweizeilig wie im Wix: "FÜR / KMU" linksbündig, "WIEN & / UMGEBUNG" rechtsbündig.
max-width für den Umbruch, aber Umbruch auch innerhalb langer Wörter erlauben,
damit kein Wort über den Rand läuft (z.B. "Mitarbeitende"). */
.v2-hero__split span {
/* Breit genug, dass jedes Eyebrow-Wort (mit letter-spacing) in eine eigene
Zeile passt und nur an Leerzeichen umbricht, nie mitten im Wort.
overflow-wrap nur als Sicherheitsnetz für Extremfälle. */
max-width: 19ch;
line-height: 1.45;
overflow-wrap: break-word;
}
.v2-hero__split span:first-child {
text-align: left;
}
.v2-hero__split span:last-child {
text-align: right;
}
/* Brand-Dots im Hero · drei Logo-Farben als Identitäts-Anker über H1.
Aufbau-Brand-Element, klein und elegant, kein Konkurrent zur Tagline.
Abstand wie in der Wortmarke: Luecke = ein Drittel des Durchmessers. */
.v2-hero__brand-dots {
--dot: 10px;
display: flex;
justify-content: center;
gap: calc(var(--dot) / 3);
margin: 0 auto 2.5rem;
}
.v2-hero__brand-dots span {
width: var(--dot);
height: var(--dot);
border-radius: 50%;
display: block;
}
.v2-hero__brand-dots span:nth-child(1) { background: #14B8A6; }
.v2-hero__brand-dots span:nth-child(2) { background: #6D28D9; }
.v2-hero__brand-dots span:nth-child(3) { background: #F59E0B; }
@media (max-width: 600px) {
.v2-hero__brand-dots {
--dot: 7px;
margin-bottom: 1.8rem;
}
}
.v2-hero__title {
/* Manrope Light, das eine große Statement pro Seite. Charakter ohne Schreien. */
font-family: var(--v2-display);
font-size: var(--v2-fs-display);
font-weight: 300;
line-height: 1.02;
letter-spacing: -0.025em;
margin: 0 0 3rem;
color: var(--v2-silber);
}
.v2-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
/* Mehrere Knoepfe brechen in ein ruhiges Zweierraster statt in eine
Dreierreihe mit einem Nachzuegler (Kontaktseite hat vier). */
max-width: 46.5rem;
margin-left: auto;
margin-right: auto;
}
/* ============================================================
SECTION-HEAD · Editorial mit horizontalen Linien
============================================================ */
.v2-secthead {
/* Nur noch eine Linie unter der Ueberschrift. Der fruehere Rahmen oben und
unten hat auf jeder Seite einen zusaetzlichen Strich erzeugt. */
border-bottom: 1px solid var(--v2-line);
padding: 0 0 1.25rem;
margin-bottom: clamp(3rem, 6vw, 3.5rem);
display: block;
}
.v2-secthead--dark {
border-bottom-color: var(--v2-line-light);
}
.v2-secthead__eyebrow {
display: block;
font-family: var(--v2-sans);
font-size: var(--v2-fs-eyebrow);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--v2-ink-soft);
font-weight: 500;
margin-bottom: 0.4rem;
}
.v2-secthead__title {
font-family: var(--v2-display);
font-size: var(--v2-fs-h2);
font-weight: 400;
line-height: 1.18;
letter-spacing: -0.015em;
margin: 0;
}
.v2-secthead__lead {
font-family: var(--v2-sans);
font-size: var(--v2-fs-lead);
color: var(--v2-ink-soft);
margin: 0.75rem 0 0;
max-width: 60ch;
line-height: 1.5;
}
/* ============================================================
INTRO · Portrait + Editorial Body
============================================================ */
/* v2-intro__grid · Default: transparentes 2-Spalten-Layout (Sub-Pages mit
reinem Text-Layout). KEINE Card-Optik per Default.
Card-Look wird nur aktiviert wenn ein .v2-intro__photo als Child da ist
(Landing-Ansprechpartner mit Portrait + Text als visuelle Einheit). */
.v2-intro__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: clamp(2rem, 6vw, 6rem);
align-items: start;
padding-top: clamp(2rem, 4vw, 4rem);
}
/* Eingebettet (kein Card-Frame): Portrait + Text sitzen direkt im Section-Raum,
gleicher editorial Look wie die Mosaic-Bloecke. Kein paper-BG, keine Border,
kein Schatten, keine Rundung — das diagonale Foto verschmilzt mit dem Silber. */
.v2-intro__grid:has(.v2-intro__photo) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(1.75rem, 5vw, 3.5rem);
align-items: stretch;
margin-top: clamp(2rem, 4vw, 4rem);
padding-top: 0;
background: transparent;
border: none;
border-radius: 0;
overflow: visible;
box-shadow: none;
}
/* Freistehendes Editorial-Foto: pures Rechteck ueber volle Spaltenhoehe,
kein Rahmen, kein Radius, kein Schatten, keine Maske. Der dunkle
Foto-Hintergrund kontrastiert bewusst mit dem Silber, der gap-Streifen
zum Text ist der einzige Trenner. Gleiches Muster wie die Mosaic-Bloecke. */
.v2-intro__photo {
position: relative;
background: transparent;
border-radius: 0;
overflow: hidden;
width: 100%;
max-width: none;
margin: 0;
min-height: 100%;
}
.v2-intro__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 20%;
filter: grayscale(15%);
}
/* Text-Spalte: kein Innen-Padding mehr (Frame ist weg). Der gap des Grids
haelt den Abstand zum diagonalen Foto, der Text laeuft buendig zum Container. */
.v2-intro__text {
padding: 0;
align-self: center;
}
.v2-intro__text h3 {
font-family: var(--v2-display);
font-size: var(--v2-fs-h4);
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.01em;
margin: 0 0 1.5rem;
}
.v2-intro__text p {
font-size: var(--v2-fs-lead);
line-height: 1.7;
color: var(--v2-ink);
margin: 0 0 1.5rem;
max-width: 50ch;
}
.v2-intro__text strong {
color: var(--v2-ink);
font-weight: 600;
}
/* Zwei Versprechen neben dem Portraet (Entscheid Saman 14.09.2026 auf der
Design-Flaeche). Bis dahin ein eigener Abschnitt zwischen Ansprechpartner
und den Mosaiken. Jetzt gibt Saman sie selbst: erst die Vorstellung, dann
eine Haarlinie, dann die zwei Versprechen als Punkte im Muster der
Mosaik-Punkte darunter, nur eine Stufe groesser, weil sie das Versprechen
tragen und die Mosaike es ausfuehren. */
.v2-intro__versprechen {
margin-top: clamp(2rem, 4vw, 3rem);
padding-top: clamp(1.5rem, 3vw, 2rem);
border-top: 1px solid var(--v2-line-soft);
}
.v2-intro__versprechen .v2-eyebrow {
display: block;
margin-bottom: 1.5rem;
color: var(--v2-ink-soft);
}
.v2-intro__punkte {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem 2rem;
}
/* Titel und Text der Punkte exakt wie .v2-mosaic__point, damit die drei
Bildzeilen dieselben Schriftgroessen zeigen (Saman 14.09.2026: "wieder
zu viele Schriftgroessen"). */
.v2-intro__punkte h4 {
font-family: var(--v2-sans);
font-size: var(--v2-fs-small);
font-weight: 600;
line-height: 1.2;
letter-spacing: 0;
color: var(--v2-ink);
margin: 0 0 0.5rem;
}
/* Doppelte Klasse, sonst gewinnt .v2-intro__text p mit Lead-Groesse. */
.v2-intro__text .v2-intro__punkte p {
font-size: var(--v2-fs-klein);
line-height: 1.45;
color: var(--v2-ink-soft);
margin: 0;
max-width: none;
}
.v2-intro__text .v2-intro__notiz {
font-size: var(--v2-fs-klein);
line-height: 1.45;
color: var(--v2-ink);
font-weight: 500;
margin: 0;
max-width: none;
}
@media (max-width: 620px) {
.v2-intro__punkte { grid-template-columns: 1fr; }
}
/* ============================================================
PILLARS · 4-Spalten mit Icon, Title, kurzer Text
============================================================ */
.v2-pillars__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.5rem, 3vw, 3rem);
}
.v2-pillar {
display: flex;
flex-direction: column;
gap: 1rem;
}
.v2-pillar__icon {
width: 36px;
height: 36px;
color: var(--v2-ink);
margin-bottom: 0.5rem;
}
/* Drei Bereiche = drei Pillar-Farben: Workplace Türkis, Cyberschutz Lila,
Operations Orange (Cloud + KI darunter). */
.v2-pillar[data-pillar="workplace"] .v2-pillar__icon { color: #14B8A6; }
.v2-pillar[data-pillar="security"] .v2-pillar__icon { color: #6D28D9; }
.v2-pillar[data-pillar="operations"] .v2-pillar__icon { color: #F59E0B; }
/* Legacy-Fallbacks */
.v2-pillar[data-pillar="cloud"] .v2-pillar__icon { color: #F59E0B; }
.v2-pillar[data-pillar="ai"] .v2-pillar__icon { color: var(--v2-ink-soft); }
.v2-pillar h3 {
font-family: var(--v2-display);
font-size: var(--v2-fs-lead);
font-weight: 600;
line-height: 1.25;
margin: 0;
letter-spacing: -0.005em;
}
.v2-pillar p {
font-size: var(--v2-fs-klein);
line-height: 1.55;
color: var(--v2-ink-soft);
margin: 0;
}
/* ============================================================
MOSAIC · Text-Block + Bild nebeneinander, gleicher Section
============================================================ */
.v2-mosaic {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: stretch;
/* Folgt dem Inhaltsmass wie alles andere (Entscheid Saman 2026-08-11).
Die Breite ist bewusst wie beim .v2-container gerechnet und nicht nur
ueber max-width: so liegt die Bandkante auf jeder Bildschirmbreite
genau auf der Kachelkante daneben. Mit reinem max-width lief das Band
unter 1536px seitlich aus dem Raster und auf Tablet und Handy sogar
randlos bis an den Bildschirmrand.
Randlos bleiben nur die Hero-Videos. */
width: calc(100% - 2 * var(--v2-pad-x));
max-width: var(--c-grid);
margin-left: auto;
margin-right: auto;
/* Kanten bleiben gerade (Entscheid Saman 2026-08-19): das Band ist ein
Band, keine Kachel. overflow: hidden haelt nur das seitliche
Einfliegen der beiden Haelften im Rahmen. */
overflow: hidden;
}
.v2-mosaic--reverse .v2-mosaic__image { order: -1; }
.v2-mosaic__content {
padding: clamp(2.5rem, 5vw, 5rem);
display: flex;
flex-direction: column;
justify-content: center;
/* Helle Flaeche statt transparent (Ruecklauf Saman 2026-08-19): ohne
eigenen Koerper haengt die Texthaelfte im Seitenhintergrund, das Foto
daneben wirkt losgeloest und der Uebergang zum dunklen Band darunter
bricht ab. */
background: var(--v2-paper);
}
/* Die Textspalte ist eine Flex-Spalte, darin zieht ein Knopf sonst auf die
volle Breite und ist doppelt so breit wie ueberall sonst. */
.v2-mosaic__content > .v2-btn { align-self: flex-start; }
/* Offene Variante (Entscheid Saman 14.09.2026, Startseite "Vier Momente"
und "Schutz auf vier Ebenen"): die Texthaelfte steht ohne eigene Flaeche
direkt auf dem Silber, nur das Foto bleibt ein Block. Kehrt fuer diese
Stellen den Ruecklauf vom 19.08.2026 um. Abstaende und Bildformat regelt
.v2-bildzeile am Dateiende. */
.v2-mosaic--offen .v2-mosaic__content {
background: transparent;
}
.v2-mosaic__image {
position: relative;
min-height: 480px;
background-size: cover;
background-position: center;
background-color: var(--v2-dark);
}
.v2-mosaic--dark .v2-mosaic__content {
background: var(--v2-dark);
color: var(--v2-silber);
}
.v2-mosaic--dark .v2-mosaic__content h2,
.v2-mosaic--dark .v2-mosaic__content h3,
.v2-mosaic--dark .v2-mosaic__content p {
color: var(--v2-silber);
}
.v2-mosaic__head {
margin-bottom: 2.5rem;
}
.v2-mosaic__head .v2-eyebrow { color: var(--v2-ink-soft); }
.v2-mosaic--dark .v2-mosaic__head .v2-eyebrow { color: rgba(228, 231, 234, 0.6); }
/* Pillar-Colors in Mosaic-Eyebrows */
.v2-eyebrow--workplace { color: var(--v2-pillar-w) !important; }
.v2-eyebrow--security { color: var(--v2-pillar-s) !important; }
.v2-mosaic--dark .v2-eyebrow--security { color: var(--v2-pillar-s-light) !important; }
.v2-eyebrow--cloud { color: var(--v2-pillar-o) !important; }
.v2-mosaic__head h2 {
font-family: var(--v2-display);
font-size: var(--v2-fs-h3);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0 0 1rem;
}
.v2-mosaic__head p {
font-size: var(--v2-fs-lead);
line-height: 1.55;
color: var(--v2-ink-soft);
max-width: 40ch;
margin: 0;
}
.v2-mosaic--dark .v2-mosaic__head p { color: rgba(228, 231, 234, 0.78); }
/* 4-Punkte Grid in Mosaic (Workplace-Alltag, Cyberschutz-Ebenen, Cloud-Phasen) */
.v2-mosaic__points {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem 2rem;
list-style: none;
padding: 0;
margin: 0 0 2.5rem;
}
.v2-mosaic__point {
position: relative;
}
.v2-mosaic__point h4 {
font-family: var(--v2-sans);
font-size: var(--v2-fs-small);
font-weight: 600;
letter-spacing: 0;
margin: 0 0 0.5rem;
max-width: 18ch;
}
.v2-mosaic__point p {
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
line-height: 1.45;
color: var(--v2-ink-soft);
margin: 0;
}
.v2-mosaic--dark .v2-mosaic__point p { color: rgba(228, 231, 234, 0.75); }
/* ============================================================
PACKAGES · Editorial 2-Spalten, schlicht
============================================================ */
.v2-packages__intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(3rem, 7vw, 6rem);
margin-bottom: clamp(3rem, 6vw, 5rem);
align-items: end;
}
.v2-packages__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2.5rem, 5vw, 5rem);
}
/* Service-Modell-Karten als visueller Block — clean Editorial-Look mit
subtle Frame, hebt die Modelle in der Landing prominent hervor. */
.v2-package {
position: relative;
padding: clamp(2rem, 3vw, 2.5rem) clamp(1.75rem, 2.5vw, 2.25rem);
background: #ffffff;
border: 1px solid var(--v2-line-soft);
border-radius: 20px;
box-shadow: 0 1px 2px rgba(14, 15, 18, 0.03);
transition: box-shadow 280ms ease, transform 280ms ease;
}
.v2-package:hover {
box-shadow: 0 8px 24px rgba(14, 15, 18, 0.08);
transform: translateY(-2px);
}
/* Premium-Modell als "Empfohlen" hervorheben — Tintenblau-Border */
.v2-package--featured {
border-color: var(--v2-blue);
border-width: 2px;
box-shadow: 0 4px 16px rgba(27, 58, 94, 0.10);
}
.v2-package--featured:hover {
box-shadow: 0 12px 32px rgba(27, 58, 94, 0.15);
}
/* Service-Modell-Hinweis als Banner: abgesetzter heller Block im Card-Stil
der Service-Modelle darueber. Text links, Button rechts. Hebt die
Cross-Sell-Option (Einmalige Projekte) hervor, ohne mit dem End-CTA zu
konkurrieren. Ruhiger, gleichmaessiger Rahmen rundum. */
.v2-package-hint {
margin-top: 1.5rem;
padding: clamp(1.5rem, 3vw, 2rem) 2.4rem;
background: var(--v2-paper);
border: 0;
border-radius: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1.25rem, 3vw, 2.5rem);
text-align: left;
}
.v2-package-hint p {
font-size: var(--v2-fs-body);
line-height: 1.55;
color: var(--v2-ink-soft);
margin: 0;
max-width: 70ch;
}
.v2-package-hint .v2-btn {
flex-shrink: 0;
}
@media (max-width: 680px) {
/* Schmal: Text oben, Button darunter linksbuendig */
.v2-package-hint {
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
}
}
.v2-package__head {
padding-bottom: 1.25rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--v2-line);
}
.v2-package__name {
display: block;
font-family: var(--v2-display);
font-size: var(--v2-fs-h5);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.15;
margin-bottom: 0.5rem;
}
.v2-package__claim {
display: block;
font-size: var(--v2-fs-klein);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--v2-ink-soft);
font-weight: 500;
}
.v2-package__list {
list-style: none;
padding: 0;
margin: 0 0 2rem;
display: grid;
gap: 0.65rem;
}
.v2-package__list li {
font-size: var(--v2-fs-body);
line-height: 1.5;
padding-left: 1.25rem;
position: relative;
}
.v2-package__list li::before {
content: "·";
position: absolute;
left: 0;
font-size: var(--v2-fs-h5);
line-height: 0.7;
color: var(--v2-ink);
font-weight: 700;
}
/* ============================================================
PACKAGE DETAILS · expandable summary/details für Paket-Listen
============================================================ */
.v2-package__details {
list-style: none;
padding: 0;
margin: 0 0 2rem;
display: grid;
gap: 0.5rem;
}
.v2-package__details li {
border-bottom: 1px solid var(--v2-line-soft);
padding: 0.4rem 0;
}
.v2-package__details li:last-child { border-bottom: none; }
.v2-package__details-divider {
font-size: var(--v2-fs-mikro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--v2-ink-soft);
padding: 0.5rem 0 !important;
border-bottom: 1px solid var(--v2-line) !important;
}
.v2-package__details details summary {
font-size: var(--v2-fs-klein);
font-weight: 500;
line-height: 1.5;
cursor: pointer;
padding: 0.5rem 1.5rem 0.5rem 0;
position: relative;
list-style: none;
color: var(--v2-ink);
}
.v2-package__details details summary::-webkit-details-marker { display: none; }
.v2-package__details details summary::after {
content: "+";
position: absolute;
right: 0;
top: 0.4rem;
font-size: var(--v2-fs-lead);
color: var(--v2-blue);
font-weight: 700;
transition: transform 200ms ease;
}
.v2-package__details details[open] summary::after { content: "−"; }
.v2-package__details details p {
font-size: var(--v2-fs-klein);
line-height: 1.55;
color: var(--v2-ink-soft);
margin: 0.5rem 0 0.75rem;
padding-left: 0;
}
/* ---- Generisches Akkordeon (gleiche Optik wie Paket-Details, ausserhalb der Karten) ---- */
.v2-accordion { margin: 0; padding: 0; }
.v2-accordion li {
list-style: none;
border-bottom: 1px solid var(--v2-line);
padding: 0.15rem 0;
}
.v2-accordion li:last-child { border-bottom: none; }
.v2-accordion details summary {
font-size: var(--v2-fs-body);
font-weight: 500;
line-height: 1.5;
cursor: pointer;
padding: 0.65rem 1.75rem 0.65rem 0;
position: relative;
list-style: none;
color: var(--v2-ink);
}
.v2-accordion details summary::-webkit-details-marker { display: none; }
.v2-accordion details summary::after {
content: "+";
position: absolute;
right: 0;
top: 0.55rem;
font-size: var(--v2-fs-gross);
color: var(--v2-blue);
font-weight: 700;
transition: transform 200ms ease;
}
.v2-accordion details[open] summary::after { content: "−"; }
/* Klartext-Fragen auf /managed-services/: die Frage steht als Ueberschrift in
der Zusammenfassung, rechts daneben die Zwei-Wort-Antwort als Marke.
Die ausfuehrliche Antwort klappt darunter auf. */
.v2-accordion--klartext summary {
display: flex;
align-items: baseline;
gap: 1rem;
flex-wrap: wrap;
}
.v2-accordion--klartext summary h3 {
font-size: var(--v2-fs-body);
font-weight: 600;
line-height: 1.45;
margin: 0;
color: inherit;
}
/* Vergleichskachel im Stil der Paket-Karten: derselbe helle Papierton,
derselbe Innenabstand, Kopf und Zeilen in derselben Schrift. Die
Premium-Spalte ist hervorgehoben wie die empfohlene Karte, also blauer
Tint plus Coral-Linie oben. */
.v2-vergleich {
margin-top: clamp(2rem, 4vw, 3rem);
background: var(--v2-paper);
padding: 2.9rem 2.4rem 2.2rem;
overflow-x: auto;
}
/* Kopf-Block wie bei den Paket-Karten: voll-breit, ein Hauch Tintenblau,
unten abgeschlossen durch eine Haarlinie. Die negativen Aussenabstaende
heben die Polsterung der Kachel auf, damit der Block bis an die Kante geht. */
.v2-vergleich__kopf {
display: flex;
flex-direction: column;
margin: -2.9rem -2.4rem 1.75rem;
padding: 2.6rem 2.4rem 1.4rem;
background: rgba(27, 58, 94, 0.06);
border-bottom: 1px solid var(--v2-line-soft);
}
/* Ueberschrift in Tintenblau, damit der Kopf traegt (wie in den Karten) */
.v2-vergleich__kopf .v2-package__name {
color: var(--v2-blue);
}
.v2-vergleich__tabelle {
width: 100%;
border-collapse: collapse;
min-width: 30rem;
}
.v2-vergleich__tabelle thead th {
text-align: left;
font-size: var(--v2-fs-klein);
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
color: var(--v2-ink-soft);
padding: 0 1.5rem 0.8rem 0;
border-bottom: 1px solid var(--v2-line);
white-space: nowrap;
vertical-align: bottom;
}
/* Zeilen tragen dieselbe Schrift wie die Leistungslisten in den Karten. */
.v2-vergleich__tabelle tbody th {
position: relative;
text-align: left;
font-size: var(--v2-fs-body);
font-weight: 400;
line-height: 1.55;
color: var(--v2-ink);
padding: 0.75rem 1.5rem 0.75rem 0;
border-bottom: 1px solid var(--v2-line-soft);
}
/* Gruppenzeile: die Kategorie einmal je Block statt eines Punkts je Zeile.
Gleiche Anmutung wie die Gruppen-Labels in den Paket-Karten, der kleine
Farbpunkt kommt nur dreimal vor und bleibt dadurch ruhig. */
.sr-only {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Haken statt "ja": ein gezeichnetes Symbol, kein Buchstabe. */
.v2-haken {
display: inline-block;
width: 15px;
height: 9px;
border-left: 2px solid var(--v2-blue);
border-bottom: 2px solid var(--v2-blue);
transform: rotate(-45deg);
transform-origin: center;
vertical-align: middle;
margin-bottom: 3px;
}
/* Nicht enthalten: ein zurueckhaltender Strich statt eines roten Kreuzes. */
.v2-strich {
display: inline-block;
width: 14px;
height: 2px;
background: var(--v2-ink-soft);
opacity: 0.4;
vertical-align: middle;
}
.v2-vergleich__tabelle tbody td {
font-size: var(--v2-fs-body);
line-height: 1.55;
padding: 0.75rem 1.5rem;
border-bottom: 1px solid var(--v2-line-soft);
color: var(--v2-ink);
white-space: nowrap;
width: 1%;
text-align: center;
}
/* Modell-Spaltenkoepfe mittig ueber ihren zentrierten Zellen */
.v2-vergleich__tabelle thead th:nth-child(2),
.v2-vergleich__tabelle thead th:nth-child(3) {
text-align: center;
}
/* Auf dem Telefon darf die Leistungs-Spalte umbrechen, dann passt die
Tabelle ohne seitliches Schieben in die Kachel. */
@media (max-width: 640px) {
/* Die Kachel selbst wird schlanker, der Kopf-Block zieht mit
(seine negativen Raender muessen zum Polster passen). */
.v2-vergleich { padding: 1.9rem 1.1rem 1.5rem; }
.v2-vergleich__kopf { margin: -1.9rem -1.1rem 1.25rem; padding: 1.6rem 1.1rem 1rem; }
.v2-vergleich__tabelle { min-width: 0; font-size: var(--v2-fs-klein); }
.v2-vergleich__tabelle tbody th,
.v2-vergleich__tabelle tbody td { font-size: var(--v2-fs-klein); }
/* Lange Woerter wie "Authentifizierung" trennen sich mit Trennstrich,
sonst bestimmen sie die Mindestbreite der ganzen Tabelle. */
.v2-vergleich__tabelle thead th,
.v2-vergleich__tabelle tbody th,
.v2-vergleich__tabelle tbody td {
hyphens: auto;
overflow-wrap: break-word;
}
/* Auch Werte wie "mit Risk-Snapshot" duerfen zweizeilig werden, und das
Zellen-Polster schrumpft, sonst haelt der laengste unbrechbare Wert
die Tabelle breiter als die Kachel. */
.v2-vergleich__tabelle thead th,
.v2-vergleich__tabelle tbody td {
white-space: normal;
padding-left: 0.6rem;
padding-right: 0.6rem;
}
.v2-vergleich__tabelle tbody th { padding-right: 0.6rem; }
}
/* Was Produktiv nicht enthaelt, tritt zurueck statt zu schreien. */
.v2-vergleich__tabelle tbody td.ist-leer {
color: var(--v2-ink-soft);
opacity: 0.5;
}
/* Premium-Spalte hervorgehoben wie die Kacheln: transparent, nur umrandet.
Coral (Entscheid Saman 2026-08-11), weil es dieselbe Signalfarbe ist wie
die Marke "Empfohlen". Die Umrandung entsteht aus je einer Kante pro
Zelle, deshalb links und rechts an allen Zellen, oben nur am Kopf und
unten nur an der letzten Zeile. */
.v2-vergleich__tabelle thead th.ist-empfohlen,
.v2-vergleich__tabelle tbody td.ist-premium {
background: transparent;
padding-left: 1.5rem;
padding-right: 1.5rem;
border-left: 1px solid var(--v2-coral);
border-right: 1px solid var(--v2-coral);
}
.v2-vergleich__tabelle thead th.ist-empfohlen {
/* Der Kopf trug bisher eine 3px-Kante, die dicker wirkte als alle anderen
Linien der Tabelle. Jetzt dieselbe Haarlinie wie ringsum. */
border-top: 1px solid var(--v2-coral);
border-bottom-color: var(--v2-coral);
padding-top: 1.5rem;
box-shadow: none;
}
.v2-vergleich__tabelle tbody tr:last-child td.ist-premium {
border-bottom: 1px solid var(--v2-coral);
}
.v2-vergleich__marke {
display: block;
font-size: var(--v2-fs-mikro);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--v2-coral);
margin-bottom: 0.3rem;
}
.v2-vergleich__tabelle tbody tr:last-child th,
.v2-vergleich__tabelle tbody tr:last-child td {
border-bottom: 0;
}
/* Fusszeile der Kachel: der eine Weg zu den Details, leise gehalten. */
/* 14.09.2026, Entscheid Saman: Der Fuss der Vergleichskachel ist ein
CTA-Band wie Flex, Bausteine und der Projekt-Hinweis darunter. Er traegt
nur noch den Lizenzhinweis und einen Button, der Absatz ueber die
vollstaendige Leistungsbeschreibung ist raus. Das Band reicht wie der
Kopf bis an die Kachelkanten. */
.v2-vergleich__fuss {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1.25rem, 3vw, 2.5rem);
margin: 1.75rem -2.4rem -2.2rem;
padding: 1.8rem 2.4rem;
background: rgba(27, 58, 94, 0.06);
border-top: 1px solid var(--v2-line-soft);
}
.v2-vergleich__fuss p {
margin: 0;
max-width: 70ch;
font-size: var(--v2-fs-body);
line-height: 1.55;
color: var(--v2-ink);
}
.v2-vergleich__fuss .v2-btn { flex-shrink: 0; }
@media (max-width: 1180px) {
.v2-vergleich__fuss { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}
@media (max-width: 640px) {
.v2-vergleich__fuss { margin: 1.25rem -1.1rem -1.5rem; padding: 1.6rem 1.1rem; }
}
@media (max-width: 620px) {
/* Die Kachel hat hier 1.35rem Seitenabstand, das Band zieht mit */
.v2-vergleich__fuss { margin-left: -1.35rem; margin-right: -1.35rem; padding-left: 1.35rem; padding-right: 1.35rem; }
}
/* Flex-Band: Kopfzeile mit Name und Knopf zuerst, der Text folgt darunter. */
.v2-flex-band__zeile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 1.1rem;
}
.v2-flex-band__zeile .v2-package__claim { display: block; margin-top: 0.2rem; }
/* Beispiel-Kachel im Flex-Block auf /managed-services/.
Kein Balken an der Kante (Entscheid Saman 2026-08-13): was gelesen werden
soll, hebt sich durch eine hellere Flaeche ab, nicht durch eine Markierung
am Rand. */
.v2-flex-beispiel {
margin-top: 1.5rem;
padding: 1.5rem 1.75rem;
background: var(--v2-hinweis);
}
.v2-flex-beispiel__kicker {
font-size: var(--v2-fs-mikro);
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--v2-ink-soft);
margin: 0 0 0.6rem;
}
.v2-flex-beispiel .v2-btn { margin-top: 1rem; }
/* ------------------------------------------------------------
Eckige Buttons (Entscheid 2026-08-10): alle Flaechen-Buttons geben die
Pillenform auf. Ausgenommen bleiben die zwei Kreise im Header, Support
und Erstgespraech, die tragen die Marke dort weiter. Dazu die gewuenschte
Bewegung: eckiger Hintergrund schiebt sich beim Zeigen von links ein,
der Text gleitet ein Stueck mit.
------------------------------------------------------------ */
.btn, .v2-btn, .samit-consent__btn {
border-radius: 0 !important;
}
.btn, .v2-btn {
position: relative;
overflow: hidden;
isolation: isolate;
transition: color 200ms ease, border-color 200ms ease;
}
.btn::before, .v2-btn::before {
content: "";
position: absolute;
inset: 0;
background: var(--v2-blue);
transform: translateX(-101%);
transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
z-index: -1;
}
.btn:hover::before, .v2-btn:hover::before,
.btn:focus-visible::before, .v2-btn:focus-visible::before {
transform: translateX(0);
}
.btn:hover, .v2-btn:hover,
.btn:focus-visible, .v2-btn:focus-visible {
color: #fff;
border-color: var(--v2-blue);
}
/* Helle Buttons auf dunklem Grund fuellen sich hell statt blau */
.v2-btn--light::before { background: #fff; }
.v2-btn--light:hover, .v2-btn--light:focus-visible { color: var(--v2-ink); border-color: #fff; }
@media (prefers-reduced-motion: reduce) {
.btn::before, .v2-btn::before { transition: none; }
}
/* Kapitel-Aufmacher: nur Eyebrow und Ueberschrift, ohne Trennlinie. Der
Abschnitt darunter setzt direkt an, deshalb unten kein Polster. Der kleine
Rest-Abstand kommt aus dem Innenabstand der Ueberschrift. */
.v2-section--kapitel {
padding-bottom: 0;
}
.v2-section--kapitel .v2-secthead {
margin-bottom: 0;
border-bottom: 0;
}
/* Ueberschrift ohne eigene Linie, wenn direkt darunter Flaechen oder Karten
folgen, die ihre eigene Kante mitbringen. Sonst stehen zwei Striche
wenige Pixel uebereinander. */
.v2-secthead--ohne-linie {
border-bottom: 0;
}
/* Zwei nebeneinander stehende Klarstellungen auf /ki/. Bewusst nicht das
Drei-Spalten-Pillar-Raster, weil es hier nur zwei Punkte sind. */
.ki-abgrenzung {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 3rem);
}
.ki-abgrenzung h3 {
font-size: var(--v2-fs-lead);
font-weight: 600;
line-height: 1.4;
margin: 0 0 0.6rem;
color: var(--v2-ink);
}
.ki-abgrenzung p {
font-size: var(--v2-fs-body);
line-height: 1.65;
color: var(--v2-ink-soft);
margin: 0;
}
@media (max-width: 760px) {
.ki-abgrenzung { grid-template-columns: 1fr; }
}
.klartext-marke {
font-size: var(--v2-fs-mikro);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--v2-ink-soft);
white-space: nowrap;
}
.v2-accordion--klartext details > p {
font-size: var(--v2-fs-body);
line-height: 1.65;
color: var(--v2-ink-soft);
margin: 0 0 0.9rem;
max-width: 68ch;
}
.v2-accordion details p {
font-size: var(--v2-fs-klein);
line-height: 1.6;
color: var(--v2-ink-soft);
margin: 0 0 0.9rem;
}
/* ============================================================
PAKET-GRUPPEN · Leistungszeilen nach Säulen sortiert
Dezente farbige Umrandung je Bereich:
Arbeitsplatz (Teal) / Security (Violett) / Betrieb (Amber)
============================================================ */
.v2-package__groups {
display: grid;
gap: 0.85rem;
margin: 0 0 2rem;
}
.v2-package__group {
/* Flach statt farbig umrandet (Feedback 2026-08-10): die Kategorie traegt
das Label mit seinem einen Farbpunkt, nicht die ganze Box. Gleiche
Beruhigung wie in der Vergleichskachel auf der Startseite. */
border: 0;
border-top: 1px solid var(--v2-line);
background: transparent;
border-radius: 0;
padding: 0.45rem 0 0.55rem;
}
.v2-package__group--workplace { --pg: #14B8A6; }
.v2-package__group--security { --pg: #6D28D9; }
.v2-package__group--betrieb { --pg: #F59E0B; }
.v2-package__group-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: var(--v2-fs-mikro);
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
color: var(--v2-ink-soft);
padding: 0.55rem 0 0.1rem;
}
.v2-package__group-label::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pg);
flex-shrink: 0;
}
.v2-package__group .v2-package__details,
.v2-package__group .v2-package__list {
margin: 0;
}
.v2-package__inherit {
font-size: var(--v2-fs-mikro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--v2-ink-soft);
font-weight: 600;
margin: 0 0 0.85rem;
}
/* ============================================================
NETZWERK-BAUSTEIN · Panel unter den Service-Modellen
============================================================ */
.v2-netz {
margin-top: clamp(2.5rem, 4vw, 3.5rem);
padding: clamp(1.75rem, 3vw, 2.5rem);
background: #ffffff;
border: 1px solid var(--v2-line-soft);
border-radius: 20px;
box-shadow: 0 1px 2px rgba(14, 15, 18, 0.03);
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: clamp(1.75rem, 3vw, 3rem);
align-items: start;
}
.v2-netz__eyebrow {
display: block;
font-size: var(--v2-fs-mikro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--v2-blue);
font-weight: 500;
margin-bottom: 0.6rem;
}
.v2-netz__title {
font-size: var(--v2-fs-h5);
margin: 0 0 0.75rem;
color: var(--v2-ink);
}
/* :not([class]) seit 21.08.2026: Die Regel galt vorher fuer jeden Absatz
in der Kachel und schlug mit (0,1,1) jede Absatz-Klasse darin. Damit
liefen Hinweis, Fussnote und die Ablauf-Beschriftung alle auf
Fliesstextgroesse, obwohl sie eigene Groessen mitbringen. Die Kachel
sah deshalb aus wie ein einziger grauer Block. Jetzt trifft die Regel
nur noch Absaetze ohne eigene Klasse. */
.v2-netz p:not([class]) {
font-size: var(--v2-fs-body);
line-height: 1.6;
color: var(--v2-ink-soft);
margin: 0 0 1rem;
}
.v2-netz__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.5rem;
}
.v2-netz__list li {
font-size: var(--v2-fs-klein);
line-height: 1.55;
color: var(--v2-ink-soft);
padding-left: 1.1rem;
position: relative;
}
.v2-netz__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.5em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--v2-blue);
}
.v2-netz__side {
display: grid;
gap: 0.85rem;
justify-items: start;
align-content: start;
padding-top: 0.35rem;
}
.v2-netz__side p {
font-size: var(--v2-fs-klein);
margin: 0;
}
@media (max-width: 860px) {
.v2-netz { grid-template-columns: 1fr; }
}
/* Support-Feld: der Erklärtext soll die volle Feldbreite nutzen statt in der
linken Hälfte zu bleiben. Auf Desktop deshalb zweispaltig (füllt die Breite,
Zeilen bleiben lesbar kurz), unter 860px einspaltig wie der Netzwerk-Block. */
#leistungsumfang .v2-body { max-width: none; }
@media (min-width: 861px) {
#leistungsumfang .v2-body {
column-count: 2;
column-gap: clamp(2rem, 4vw, 3.5rem);
}
}
/* ============================================================
SERVICE-ITEM-STEP · Label rechts in Service-Liste
============================================================ */
.v2-service-item__step {
font-family: var(--v2-sans);
font-size: var(--v2-fs-mikro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--v2-blue);
font-weight: 500;
white-space: nowrap;
padding-top: 0.4rem;
}
/* ============================================================
SERVICES LIST · Editorial Liste für Einmalige Services
============================================================ */
.v2-services-list {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--v2-line);
}
.v2-service-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 2rem;
align-items: baseline;
padding: 1.75rem 0;
border-bottom: 1px solid var(--v2-line);
}
.v2-service-item__title h3 {
font-family: var(--v2-sans);
font-size: var(--v2-fs-h6);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
margin: 0 0 0.5rem;
}
.v2-service-item__title p {
font-size: var(--v2-fs-body);
line-height: 1.55;
color: var(--v2-ink-soft);
margin: 0;
max-width: 64ch;
}
/* ============================================================
SERVICES LIST mit Bild · Projekt-Typen mit Foto rechts
Layout: Text | Bild | Mehr-erfahren-Link, immer gleich.
============================================================ */
.v2-services-list--media .v2-service-item {
grid-template-columns: 1fr 280px auto;
gap: 2.5rem;
align-items: center;
}
.v2-service-item__media {
width: 280px;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
background-color: var(--v2-dark);
border-radius: 0;
}
@media (max-width: 860px) {
.v2-services-list--media .v2-service-item {
grid-template-columns: 1fr;
gap: 1.25rem;
align-items: start;
}
.v2-service-item__media {
width: 100%;
order: 3;
}
}
.v2-services-list__pilot {
margin-top: clamp(3rem, 5vw, 4rem);
padding: 1.75rem 2rem;
background: var(--v2-hinweis);
max-width: 64rem;
border-radius: 8px;
}
.v2-services-list__pilot .v2-eyebrow {
margin-bottom: 0.75rem;
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.v2-services-list__pilot p {
margin: 0;
font-size: var(--v2-fs-body);
line-height: 1.55;
}
/* ============================================================
PARTNERS · Grid mit Logo-Tiles
============================================================ */
.v2-partners__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
.v2-partners__intro h2 {
font-family: var(--v2-display);
font-size: var(--v2-fs-h3);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 1.5rem;
}
.v2-partners__intro ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.65rem;
}
.v2-partners__intro li {
font-size: var(--v2-fs-klein);
line-height: 1.5;
color: var(--v2-ink-soft);
padding-left: 1.25rem;
position: relative;
}
.v2-partners__intro li::before {
content: "·";
position: absolute;
left: 0;
font-size: var(--v2-fs-h5);
line-height: 0.7;
color: var(--v2-ink);
}
.v2-partners__tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.v2-partners__tile {
aspect-ratio: 4/3;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid var(--v2-line);
border-bottom: 1px solid var(--v2-line);
padding: 2rem;
background: var(--v2-silber);
}
.v2-partners__tile:nth-child(3n) { border-right: none; }
.v2-partners__tile:nth-last-child(-n+3) { border-bottom: none; }
.v2-partners__tile img {
max-height: 36px;
max-width: 100%;
width: auto;
filter: grayscale(100%);
opacity: 0.75;
}
.v2-partners__tile:hover img { filter: none; opacity: 1; }
/* ============================================================
CTA · große Tagline + Pill-CTA, schlicht
pages.css setzt allen ein margin-bottom,
das wir hier wieder rausnehmen — Dark-CTA soll bündig am Footer
andocken, kein Silber-Streifen dazwischen.
============================================================ */
main > .v2-cta:last-child,
main > section.v2-cta:last-child {
margin-bottom: 0;
}
/* Kontakt-Toast (Erfolg / Fehler) */
.kt-toast {
position: fixed;
top: 24px;
left: 50%;
transform: translateX(-50%) translateY(-140%);
z-index: 2000;
display: flex;
align-items: flex-start;
gap: 14px;
width: min(94vw, 460px);
background: var(--v2-silber-soft);
border: 1px solid var(--v2-blue);
border-radius: 16px;
padding: 18px 20px;
/* Kein Schatten: Die Guideline schliesst Schatten durchgehend aus, die
Ausnahme fuer die Hinweis-Blase betrifft nur die Rundung. Der 1px
Tintenblau-Rahmen traegt die Abgrenzung. */
opacity: 0;
visibility: hidden;
transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease, visibility .4s;
}
.kt-toast.is-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
visibility: visible;
}
.kt-toast.is-error {
border-color: var(--v2-coral);
background: var(--v2-coral-soft);
}
.kt-toast__check {
flex-shrink: 0;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--v2-blue);
color: var(--v2-silber);
}
.kt-toast.is-error .kt-toast__check {
background: var(--v2-coral);
/* Auf Coral steht dunkle Tinte. Weisse Schrift auf Coral ist in der
Guideline ausdruecklich verboten. */
color: var(--v2-ink);
}
.kt-toast__body {
display: flex;
flex-direction: column;
min-width: 0;
}
.kt-toast__title {
font-size: var(--v2-fs-lead);
color: var(--v2-ink);
line-height: 1.2;
}
.kt-toast__text {
font-size: var(--v2-fs-klein);
color: var(--v2-ink-soft);
margin-top: 4px;
line-height: 1.45;
}
.kt-toast__text a { color: inherit; text-decoration: underline; }
.kt-toast__close {
flex-shrink: 0;
background: none;
border: 0;
cursor: pointer;
font-size: var(--v2-fs-h6);
line-height: 1;
color: var(--v2-ink-soft);
padding: 0 2px;
margin: -2px -2px 0 0;
transition: color .2s ease;
}
.kt-toast__close:hover { color: var(--v2-ink); }
@media (prefers-reduced-motion: reduce) {
.kt-toast {
transition: opacity .25s ease, visibility .25s;
transform: translateX(-50%) translateY(0);
}
}
.v2-cta {
background: var(--v2-blue-tint);
color: var(--v2-ink);
padding: clamp(2.5rem, 5vw, 4.5rem) 0;
text-align: center;
}
.v2-cta__title {
font-family: var(--v2-display);
font-size: var(--v2-fs-h2);
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--v2-ink);
margin: 0 auto 2rem;
}
.v2-cta__lead {
font-size: var(--v2-fs-lead);
line-height: 1.55;
color: var(--v2-ink-soft);
max-width: 48ch;
margin: 0 auto 3rem;
}
.v2-cta__actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.v2-cta .v2-btn--light {
color: var(--v2-blue);
border-color: var(--v2-blue);
}
.v2-cta .v2-btn--light:hover {
background: var(--v2-blue);
color: var(--v2-silber);
}
/* ============================================================
FOOTER (slim)
============================================================ */
body[data-page="landing-v2"] .site-footer--slim {
background: var(--v2-silber);
border-top: 2px solid var(--v2-blue);
font-family: var(--v2-sans);
}
/* dezenter LinkedIn-Verweis im Footer */
.site-footer--slim .site-footer__social {
display: inline-flex;
align-items: center;
margin-left: 0.15rem;
}
.site-footer--slim .site-footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 999px;
color: var(--v2-ink-soft);
border: 1px solid var(--v2-line-soft);
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.site-footer--slim .site-footer__social a:hover {
color: #fff;
background: var(--v2-blue);
border-color: var(--v2-blue);
}
.site-footer--slim .site-footer__social svg { width: 15px; height: 15px; display: block; }
/* ============================================================
SUB-HERO (Lösungs-Pages)
============================================================ */
.v2-hero--sub {
min-height: 70vh;
padding: 9rem 0 5rem;
}
.v2-hero--sub .v2-hero__title {
font-size: var(--v2-fs-h1);
}
/* Light-Hero · für Pages ohne BG-Visual (Über mich, Kontakt, Stack-Partner) */
.v2-hero--light {
background: var(--v2-silber);
color: var(--v2-ink);
min-height: 50vh;
padding: 9rem 0 5rem;
}
.v2-hero--light .v2-hero__title {
color: var(--v2-ink);
}
.v2-hero--light .v2-hero__split {
color: var(--v2-ink);
}
/* Brand-Hero · Tintenblau-Fläche (Über mich) mit weichem Übergang nach unten */
.v2-hero--brand {
background: var(--v2-blue);
color: var(--v2-silber);
min-height: 50vh;
border-radius: 0;
}
.v2-hero--brand .v2-hero__title,
.v2-hero--brand .v2-hero__split,
.v2-hero--brand .v2-hero__split span { color: var(--v2-silber); }
.v2-hero--brand .v2-body { color: rgba(228, 231, 234, 0.82); }
.v2-hero--brand .v2-link { color: var(--v2-silber); }
.v2-hero--brand .v2-link::after { background: var(--v2-silber); }
/* Über-mich Hero-Foto · sanft von rechts einblenden */
@keyframes uebermich-photo-in {
from { opacity: 0; transform: translateX(48px); }
to { opacity: 1; transform: translateX(0); }
}
.ueber-mich-hero-grid {
/* Das Portrait slidet von rechts herein und ragt dabei kurz ueber den Rand.
Ohne diese Zeile blitzt beim Aufrufen ein waagrechter Scrollbalken auf. */
overflow-x: clip;
}
.ueber-mich-hero-grid figure {
animation: uebermich-photo-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.ueber-mich-hero-grid figure { animation: none; }
}
/* Pflichtfeld-Markierung im Kontaktformular */
.form-req {
color: var(--v2-coral);
margin-left: 2px;
font-weight: 600;
text-decoration: none;
cursor: help;
}
.form-legend {
font-size: var(--v2-fs-klein);
color: var(--v2-ink-soft);
margin: 0 0 1.5rem;
}
.form-legend .form-req { cursor: default; }
/* ============================================================
LEGACY-BUTTON-BRIDGE für Sub-Pages
Sub-Pages unter /projekte/, /ratgeber/, /stack-und-partner/, /cybersecurity/,
/digital-workplace/ etc. nutzen noch .btn.btn--primary / .btn.btn--ghost /
.btn.btn--secondary. Auf v2-Pages mappen wir die optisch auf v2-Pill-Tokens:
solider Tintenblau-Button statt schwarz, Outline mit Tintenblau-Rahmen.
============================================================ */
body[data-page="landing-v2"] .btn.btn--primary {
background: var(--v2-blue);
color: var(--v2-silber);
border: 1.5px solid var(--v2-blue);
border-radius: 9999px;
padding: 1rem 2.25rem;
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1;
transition: all 200ms ease;
box-shadow: none;
}
body[data-page="landing-v2"] .btn.btn--primary:hover {
transform: none;
box-shadow: none;
}
body[data-page="landing-v2"] .btn.btn--ghost,
body[data-page="landing-v2"] .btn.btn--secondary {
background: transparent;
color: var(--v2-blue);
border: 1.5px solid var(--v2-blue);
border-radius: 9999px;
padding: 1rem 2.25rem;
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1;
transition: all 200ms ease;
}
/* Header-CTA darf nie über zwei Zeilen brechen, auch nicht auf Mobile */
.v2-header .v2-btn {
white-space: nowrap;
}
/* ============================================================
BRIDGE · Legacy-Sub-Page-Klassen auf v2-Look
Stack-Partner-Detail, Cybersecurity-Sub, Digital-Workplace-Sub etc.
Holen die alten .hero-page/.section/.stat-card/.hero-visual auf
v2-Standard, ohne dass jede Sub-Page neu strukturiert werden muss.
============================================================ */
body[data-page="landing-v2"] .hero-page {
padding: clamp(7rem, 12vw, 11rem) 0 clamp(4rem, 6vw, 6rem);
background: var(--v2-silber);
color: var(--v2-ink);
}
body[data-page="landing-v2"] .hero-page__inner {
/* Gerahmte Heros ohne Video laufen auf Ultrawide nicht mehr auf
2400px auseinander, sondern folgen der Rahmen-Breite (Entscheid
Saman 2026-08-11). Video-Heros (.v2-hero) bleiben randlos. */
max-width: var(--c-grid);
margin: 0 auto;
padding: 0 clamp(1.5rem, 5vw, 4.5rem);
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
body[data-page="landing-v2"] .hero-page--split .hero-page__inner {
grid-template-columns: 1.2fr 1fr;
}
@media (max-width: 980px) {
body[data-page="landing-v2"] .hero-page__inner {
/* minmax(0,1fr) statt 1fr: erlaubt der Spalte, unter ihre
min-content-Breite zu schrumpfen. Sonst zwingt ein langer
nowrap-Button (z.B. "Klassische Beschaffung ansehen") die Spalte
auf ~450px und der Viewport laeuft seitlich ueber. */
grid-template-columns: minmax(0, 1fr);
}
}
body[data-page="landing-v2"] .hero-page__crumb {
font-family: var(--v2-sans);
font-size: var(--v2-fs-mikro);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
color: var(--v2-ink-soft);
margin: 0 0 1.5rem;
}
body[data-page="landing-v2"] .hero-page__crumb a {
color: inherit;
text-decoration: none;
}
body[data-page="landing-v2"] .hero-page__crumb a:hover {
color: var(--v2-blue);
}
body[data-page="landing-v2"] .hero-page h1 {
font-family: var(--v2-display);
font-size: var(--v2-fs-h1);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.025em;
margin: 0 0 1.5rem;
color: var(--v2-ink);
}
body[data-page="landing-v2"] .hero-page .lead {
font-family: var(--v2-sans);
font-size: var(--v2-fs-lead);
line-height: 1.5;
color: var(--v2-ink-soft);
margin: 0 0 2rem;
max-width: 56ch;
}
body[data-page="landing-v2"] .hero-page__actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
/* ============================================================
FOTO-HERO · Projekt-Detailseiten im Mosaic-Look.
Volle Sektionsbreite, Text links mit Padding, Bild randlos rechts
bis zur Kante (wie die Landing-Mosaics). Trifft per :has() nur die
6 Detailseiten mit .hero-page__photo.
============================================================ */
/* Oben Platz für den schwebenden Header: Hero startet darunter,
damit die Floating-Pille über ruhigem Silber schwebt, nicht über dem Foto.
Großzügig genug, dass auch die rechte Pillen-Hälfte über Silber sitzt. */
body[data-page="landing-v2"] .hero-page:has(.hero-page__photo) {
padding: clamp(11rem, 13vw, 13rem) 0 0;
/* Das Foto slidet beim Laden von rechts herein (translateX(56px)) und ragt
dabei kurz ueber den rechten Rand. Ohne diese Zeile blitzt beim Aufrufen
ein waagrechter Scrollbalken auf. clip statt hidden, damit hier kein
eigener Scroll-Container entsteht. */
overflow-x: clip;
}
body[data-page="landing-v2"] .hero-page:has(.hero-page__photo) .hero-page__inner {
max-width: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: stretch;
min-height: 60vh;
}
body[data-page="landing-v2"] .hero-page:has(.hero-page__photo) .hero-page__text {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 5rem) clamp(3rem, 5vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
}
body[data-page="landing-v2"] .hero-page:has(.hero-page__photo) .hero-page__photo {
min-height: 100%;
height: 100%;
/* Flach: das Foto laeuft als reines Rechteck bis zur Bildschirmkante.
Der tintenblaue Schatten allein setzt es vom Silber ab. */
border-radius: 0;
overflow: hidden;
box-shadow: -6px 0 28px 0 rgba(27, 58, 94, 0.12);
/* Beim Aufrufen der Seite slidet das Foto von rechts herein. */
animation: heroPhotoSlideIn 850ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
body[data-page="landing-v2"] .hero-page:has(.hero-page__photo) .hero-page__photo img {
border-radius: 0;
height: 100%;
width: 100%;
object-fit: cover;
display: block;
}
@keyframes heroPhotoSlideIn {
from { opacity: 0; transform: translateX(56px); }
to { opacity: 1; transform: translateX(0); }
}
/* Wer Bewegung reduziert haben will, bekommt das Foto ohne Slide. */
@media (prefers-reduced-motion: reduce) {
body[data-page="landing-v2"] .hero-page:has(.hero-page__photo) .hero-page__photo {
animation: none;
}
}
@media (max-width: 980px) {
/* Mobil: Foto stapelt unter Text in voller Breite, oben leicht gerundet,
kein Schatten (sonst wirkt der seitliche Schatten ueber voller Breite fehl). */
body[data-page="landing-v2"] .hero-page:has(.hero-page__photo) .hero-page__photo {
border-radius: 0;
box-shadow: none;
}
}
/* ============================================================
KOMPAKTER PROJEKT-HERO (.hero-page--project)
Der Foto-Hero oben wird auf einem 900px-Bildschirm rund 950px hoch,
damit ist vom Inhalt darunter nichts mehr zu sehen. Fuer die
Projektseiten ziehen wir Nav-Abstand, Ueberschrift und Mindesthoehe
zurueck, damit der erste Abschnitt oberhalb der Falz anreisst.
============================================================ */
body[data-page="landing-v2"] .hero-page--project:has(.hero-page__photo) {
padding-top: clamp(8rem, 9.5vw, 9.5rem);
/* Als Aushaengeschild vom Seitenrand abgesetzt statt randlos. */
padding-left: var(--v2-pad-x);
padding-right: var(--v2-pad-x);
}
body[data-page="landing-v2"] .hero-page--project:has(.hero-page__photo) .hero-page__inner {
min-height: 0;
/* Der Rahmen macht den Hero zur Tafel: Text und Foto sitzen gemeinsam
in einem eingefassten, hellen Block auf dem Silber der Seite.
Auf Ultrawide bleibt die Tafel bei --c-grid stehen statt sich ueber
die volle Breite zu ziehen (Entscheid Saman 2026-08-11). */
border: 1px solid var(--v2-line);
background: var(--v2-paper);
max-width: var(--c-grid);
margin: 0 auto;
}
body[data-page="landing-v2"] .hero-page--project:has(.hero-page__photo) .hero-page__text {
padding-left: clamp(1.5rem, 3vw, 3rem);
}
/* Innerhalb der Tafel braucht das Foto weder Schatten noch Einflug. */
body[data-page="landing-v2"] .hero-page--project:has(.hero-page__photo) .hero-page__photo {
box-shadow: none;
animation: none;
}
body[data-page="landing-v2"] .hero-page--project h1 {
font-size: var(--v2-fs-h2);
margin-bottom: 1rem;
}
body[data-page="landing-v2"] .hero-page--project .lead {
font-size: var(--v2-fs-lead);
margin-bottom: 1.5rem;
max-width: 48ch;
}
body[data-page="landing-v2"] .hero-page--project:has(.hero-page__photo) .hero-page__text {
padding-top: clamp(2rem, 3.5vw, 3rem);
padding-bottom: clamp(2rem, 3.5vw, 3rem);
}
body[data-page="landing-v2"] .hero-page--project:has(.hero-page__photo) .hero-page__photo {
min-height: 0;
aspect-ratio: 4 / 3;
height: auto;
align-self: stretch;
}
@media (max-width: 980px) {
body[data-page="landing-v2"] .hero-page:has(.hero-page__photo) .hero-page__inner {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
body[data-page="landing-v2"] .hero-page:has(.hero-page__photo) .hero-page__photo {
min-height: 280px;
order: 2;
}
}
@media (max-width: 600px) {
/* Lange Action-Buttons (z.B. "Alle Einmaligen Services ansehen")
auf dem Telefon voll-breit stapeln und Text umbrechen lassen,
statt nowrap ueber den Rand zu schieben. */
body[data-page="landing-v2"] .hero-page__actions {
flex-direction: column;
align-items: stretch;
}
body[data-page="landing-v2"] .hero-page__actions .btn {
width: 100%;
white-space: normal;
}
}
/* Hero-Visual: Status-Karte rechts neben Hero-Text */
body[data-page="landing-v2"] .hero-visual {
background: #ffffff;
border-radius: 24px;
padding: 2rem;
box-shadow:
0 1px 2px rgba(14, 15, 18, 0.04),
0 16px 40px rgba(14, 15, 18, 0.08);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
body[data-page="landing-v2"] .hero-visual__icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--v2-paper);
display: flex;
align-items: center;
justify-content: center;
color: var(--v2-blue);
}
body[data-page="landing-v2"] .hero-visual__icon .icon {
width: 28px;
height: 28px;
}
body[data-page="landing-v2"] .hero-visual__status {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
body[data-page="landing-v2"] .hero-visual__row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--v2-silber-soft);
border-radius: 12px;
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
}
body[data-page="landing-v2"] .hero-visual__row-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--v2-blue);
}
body[data-page="landing-v2"] .hero-visual__row-label {
color: var(--v2-ink-soft);
}
body[data-page="landing-v2"] .hero-visual__row-value {
font-weight: 600;
color: var(--v2-ink);
text-align: right;
}
/* Stat-Cards (4er-Grid mit Icon + Heading + Text) */
body[data-page="landing-v2"] .section {
padding: clamp(4rem, 8vw, 7rem) 0;
}
body[data-page="landing-v2"] .section.section--tight {
padding: clamp(2rem, 4vw, 3.5rem) 0;
}
body[data-page="landing-v2"] .section__inner {
/* Gleiches Inhaltsmass wie .v2-container und der Hero-Rahmen, damit
Projektseiten und Startseite dieselbe Kante haben. */
max-width: calc(var(--c-grid) + 2 * var(--v2-pad-x));
margin: 0 auto;
padding: 0 var(--v2-pad-x);
}
body[data-page="landing-v2"] .stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
@media (max-width: 980px) { body[data-page="landing-v2"] .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { body[data-page="landing-v2"] .stats-grid { grid-template-columns: 1fr; } }
/* Volle Breite, kein Kästchen-Look. Die vier Teile nur durch dünne
Standard-Linien getrennt, letzte Spalte ohne Linie rechts. */
body[data-page="landing-v2"] .stat-card {
background: transparent;
border: none;
border-right: 1px solid var(--v2-line);
border-radius: 0;
padding: 0.5rem clamp(1.5rem, 3vw, 2.5rem);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
body[data-page="landing-v2"] .stat-card:first-child {
padding-left: 0;
}
body[data-page="landing-v2"] .stat-card:last-child {
border-right: none;
padding-right: 0;
}
@media (max-width: 980px) {
/* 2x2: rechte Spalte ohne Linie, untere Reihe mit Trennlinie nach oben */
body[data-page="landing-v2"] .stat-card:nth-child(2n) { border-right: none; }
body[data-page="landing-v2"] .stat-card:nth-child(2n+1) { padding-left: 0; }
body[data-page="landing-v2"] .stat-card:nth-child(2n) { padding-right: 0; }
body[data-page="landing-v2"] .stat-card:nth-child(n+3) {
border-top: 1px solid var(--v2-line);
padding-top: 2rem;
margin-top: 2rem;
}
}
@media (max-width: 600px) {
/* 1 Spalte: nur horizontale Trennlinien */
body[data-page="landing-v2"] .stat-card {
border-right: none;
padding: 0 0 2rem;
}
body[data-page="landing-v2"] .stat-card:nth-child(n+2) {
border-top: 1px solid var(--v2-line);
padding-top: 2rem;
margin-top: 0;
}
}
body[data-page="landing-v2"] .stat-card .icon-img {
width: 40px;
height: 40px;
margin-bottom: 0.5rem;
}
body[data-page="landing-v2"] .stat-card h3,
body[data-page="landing-v2"] .stat-card h4 {
font-family: var(--v2-display);
font-size: var(--v2-fs-lead);
font-weight: 600;
line-height: 1.2;
margin: 0;
color: var(--v2-ink);
}
body[data-page="landing-v2"] .stat-card p {
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
line-height: 1.5;
color: var(--v2-ink-soft);
margin: 0;
}
/* Section-Head (Eyebrow + H2 + Lead) */
body[data-page="landing-v2"] .section__head {
max-width: 64ch;
margin: 0 0 2.5rem;
}
body[data-page="landing-v2"] .section__head .kicker {
font-family: var(--v2-sans);
font-size: var(--v2-fs-mikro);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
color: var(--v2-ink-soft);
margin-bottom: 1rem;
display: inline-block;
}
body[data-page="landing-v2"] .section__head h2 {
font-family: var(--v2-display);
font-size: var(--v2-fs-h2);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 1rem;
color: var(--v2-ink);
}
body[data-page="landing-v2"] .section__head .lead {
font-family: var(--v2-sans);
font-size: var(--v2-fs-lead);
line-height: 1.5;
color: var(--v2-ink-soft);
margin: 0;
}
/* CTA-Block-Actions */
body[data-page="landing-v2"] .cta-block__actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
}
/* Inline-Link */
body[data-page="landing-v2"] .link-inline {
color: var(--v2-blue);
text-decoration: underline;
text-underline-offset: 4px;
font-weight: 500;
}
/* ============================================================
MOSAIC-REVEAL · Slide-In beim Scrollen
Die drei Bereiche (Workplace, Cyberschutz, Cloud) kommen
animiert rein wenn sie in den Viewport scrollen.
Image und Content slidet von gegensätzlichen Seiten.
============================================================ */
/* Seit 15.09.2026 (Entscheid Saman) ohne eigene Geste: das Band steigt als
ganzer Block auf wie jeder andere Baustein auch, am Desktop wie am Handy.
Vorher flogen Bild und Text seitlich aus entgegengesetzten Richtungen
herein, das wirkte neben den Bildzeilen und Kacheln uneinheitlich. */
/* ============================================================
MOBILE-PANEL · Accordion-Verhalten
Sub-Items sind initial collapsed. Klick auf Parent öffnet die
nachfolgenden .mobile-panel__sub Items via JS (is-visible).
============================================================ */
.mobile-panel ul {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-panel li.has-sub > a {
position: relative;
padding-right: 3rem;
}
.mobile-panel li.has-sub > a::after {
content: "⌄";
position: absolute;
right: 1.25rem;
top: 50%;
font-size: var(--v2-fs-lead);
font-weight: 700;
line-height: 1;
transform: translateY(-65%);
transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0.7;
color: currentColor;
}
.mobile-panel li.has-sub.is-open > a::after {
transform: translateY(-50%) rotate(180deg);
opacity: 1;
}
.mobile-panel li.mobile-panel__sub {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 280ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 200ms ease;
pointer-events: none;
}
.mobile-panel li.mobile-panel__sub.is-visible {
max-height: 60px;
opacity: 1;
pointer-events: auto;
}
/* ============================================================
SUPPORT-MODAL · drei Wege Remote-Support aufzubauen
Wird per JS ins DOM injected, getriggert von .v2-btn--remote
============================================================ */
.v2-support-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(14, 15, 18, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
visibility: hidden;
transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.v2-support-overlay.is-open {
opacity: 1;
visibility: visible;
transition: opacity 220ms ease;
}
.v2-support-card {
/* Eckig wie jede Flaeche. Rund bleibt nur der Schliessen-Knopf,
der ist ein Bedienelement (Guideline C3). */
background: var(--v2-blue);
border-radius: 0;
box-shadow:
0 1px 2px rgba(14, 15, 18, 0.04),
0 24px 64px rgba(14, 15, 18, 0.40);
max-width: 560px;
width: 100%;
padding: 2.5rem 2rem 2rem;
position: relative;
transform: translateY(20px) scale(0.96);
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.v2-support-overlay.is-open .v2-support-card {
transform: translateY(0) scale(1);
}
.v2-support-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.12);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--v2-fs-lead);
color: rgba(255, 255, 255, 0.80);
line-height: 1;
transition: background 180ms ease;
}
.v2-support-close:hover { background: rgba(255, 255, 255, 0.18); }
.v2-support-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--v2-sans);
font-size: var(--v2-fs-mikro);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--v2-coral);
margin-bottom: 0.75rem;
}
.v2-support-title {
font-family: var(--v2-display);
font-size: var(--v2-fs-h3);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 1.25rem;
/* Silber statt reinem Weiss: auf Tintenblau nutzt die ganze Seite Silber. */
color: var(--v2-silber);
}
.v2-support-lead {
font-family: var(--v2-sans);
font-size: var(--v2-fs-body);
line-height: 1.5;
color: var(--v2-ink-soft);
margin: 0 0 1.75rem;
}
.v2-support-options {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
/* Auf dem tintenblauen Grund gilt dieselbe Sprache wie bei den hellen
Knoepfen: transparent mit Silber-Rahmen, beim Ueberfahren Silber-Flaeche
mit Ink-Schrift. Vorher waren es weiss gefuellte Karten mit fast
unsichtbarem Rahmen, ein Muster, das die Seite sonst nirgends kennt. */
.v2-support-option {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: transparent;
border: 1px solid var(--v2-silber);
border-radius: 0;
text-decoration: none;
color: var(--v2-silber);
transition: background-color 180ms ease, color 180ms ease;
}
.v2-support-option:hover,
.v2-support-option:focus-visible {
background: var(--v2-silber);
color: var(--v2-ink);
}
.v2-support-option__icon {
width: 32px;
height: 32px;
border-radius: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--v2-display);
font-weight: 700;
font-size: var(--v2-fs-klein);
color: inherit;
flex-shrink: 0;
}
.v2-support-option__text {
flex: 1;
min-width: 0;
}
.v2-support-option__name {
display: block;
font-family: var(--v2-display);
font-size: var(--v2-fs-body);
font-weight: 600;
line-height: 1.2;
color: inherit;
}
.v2-support-option__desc {
display: block;
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
color: inherit;
opacity: 0.78;
margin-top: 2px;
}
.v2-support-option__arrow {
color: inherit;
font-size: var(--v2-fs-gross);
flex-shrink: 0;
transition: transform 180ms ease;
}
/* Picker-Variante (z.B. TeamViewer): fragt vor dem Download nach Windows/Mac */
.v2-support-option--picker {
flex-wrap: wrap;
cursor: pointer;
}
.v2-support-option--picker.is-expanded .v2-support-option__arrow {
transform: rotate(90deg);
}
.v2-support-os-picker {
flex-basis: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
max-height: 0;
overflow: hidden;
opacity: 0;
margin-top: 0;
transition: max-height 200ms ease, opacity 180ms ease, margin-top 200ms ease;
}
.v2-support-option--picker.is-expanded .v2-support-os-picker {
max-height: 60px;
opacity: 1;
margin-top: 0.85rem;
}
.v2-support-os-picker__btn {
text-align: center;
padding: 0.6rem 0.75rem;
border-radius: 10px;
border: 1px solid var(--v2-line-soft);
background: var(--v2-paper);
color: var(--v2-ink);
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
font-weight: 600;
text-decoration: none;
transition: border-color 180ms ease, background-color 180ms ease;
}
.v2-support-os-picker__btn:hover {
border-color: var(--v2-blue);
background: #ffffff;
}
.v2-support-foot {
font-family: var(--v2-sans);
font-size: var(--v2-fs-mikro);
line-height: 1.5;
color: var(--v2-ink-soft);
margin: 1.5rem 0 0;
text-align: center;
}
.v2-support-foot a {
color: var(--v2-blue);
}
/* Trenner zwischen Remote-Tools und Direkt-Kontakt (Telefon/E-Mail) */
.v2-support-divider {
font-family: var(--v2-sans);
font-size: var(--v2-fs-mikro);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--v2-ink-soft);
text-align: center;
margin: 1.25rem 0 0.65rem;
}
/* Logo-Icon in Support-Option */
.v2-support-option__icon--logo {
background: #fff;
padding: 6px;
}
.v2-support-option__icon--logo img {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Dezente Kontakt-Zeile (Tel + Mail) */
.v2-support-contact {
display: flex;
gap: 0.625rem;
margin-top: 1rem;
}
.v2-support-contact__item {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.75rem 1rem;
background: transparent;
border: 1px solid rgba(228, 231, 234, 0.35);
border-radius: 0;
text-decoration: none;
color: var(--v2-silber);
transition: background 160ms ease;
}
.v2-support-contact__item:hover,
.v2-support-contact__item:focus-visible { background: var(--v2-silber); color: var(--v2-ink); }
.v2-support-contact__label {
font-size: var(--v2-fs-mikro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.50);
font-weight: 500;
}
.v2-support-contact__value {
font-size: var(--v2-fs-klein);
font-weight: 600;
color: #ffffff;
}
/* Mobile: Bottom-Sheet statt zentriertes Modal */
@media (max-width: 600px) {
.v2-support-overlay {
align-items: flex-end;
padding: 0;
}
.v2-support-card {
max-width: 100%;
width: 100%;
/* Auch als Bottom-Sheet eckig. */
border-radius: 0;
padding: 1.5rem 1.25rem 2rem;
}
.v2-support-title {
font-size: var(--v2-fs-gross);
margin: 0 0 1rem;
}
.v2-support-option {
padding: 0.75rem 1rem;
}
.v2-support-option__icon {
width: 28px;
height: 28px;
border-radius: 0;
}
.v2-support-option__name { font-size: var(--v2-fs-klein); }
.v2-support-option__desc { font-size: var(--v2-fs-mikro); }
.v2-support-contact { flex-direction: column; gap: 0.5rem; }
.v2-support-contact__item { flex-direction: row; justify-content: space-between; align-items: center; }
}
/* Mobile: Über-mich Hero + Grid */
@media (max-width: 720px) {
.ueber-mich-hero-grid {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
.ueber-mich-hero-grid > div {
padding-bottom: 0 !important;
}
.ueber-mich-ansatz-grid {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
CONSENT-BANNER (DSGVO) · wird von consent.js injiziert
============================================================ */
.samit-consent {
position: fixed;
left: 1rem;
right: 1rem;
bottom: 1rem;
z-index: 300;
max-width: 760px;
margin: 0 auto;
background: var(--v2-silber);
border: 1px solid var(--v2-line-soft);
border-radius: 16px;
box-shadow: 0 1px 2px rgba(14, 15, 18, 0.04), 0 18px 48px rgba(14, 15, 18, 0.16);
padding: 1.1rem 1.25rem;
opacity: 0;
transform: translateY(130%);
transition: opacity 320ms var(--ease), transform 320ms var(--ease);
pointer-events: none;
}
.samit-consent.is-visible {
opacity: 1;
transform: none;
pointer-events: auto;
}
.samit-consent__inner {
display: flex;
align-items: center;
gap: 1.25rem;
}
.samit-consent__text {
flex: 1;
margin: 0;
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
line-height: 1.5;
color: var(--v2-ink-soft);
}
.samit-consent__text a {
color: var(--v2-blue);
}
.samit-consent__actions {
display: flex;
gap: 0.6rem;
flex-shrink: 0;
}
.samit-consent__btn {
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
font-weight: 600;
padding: 0.6rem 1.2rem;
border-radius: 999px;
border: 1px solid var(--v2-ink);
cursor: pointer;
white-space: nowrap;
transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.samit-consent__btn--ghost {
background: transparent;
color: var(--v2-ink);
}
.samit-consent__btn--ghost:hover {
background: rgba(14, 15, 18, 0.06);
}
.samit-consent__btn--solid {
background: var(--v2-ink);
color: var(--v2-silber);
}
.samit-consent__btn--solid:hover {
transform: translateY(-1px);
}
/* Footer-Link "Cookie-Einstellungen" fügt sich in die bestehende Footer-Nav ein */
[data-consent-open] {
cursor: pointer;
}
@media (max-width: 600px) {
.samit-consent {
left: 0.75rem;
right: 0.75rem;
bottom: 0.75rem;
padding: 1rem;
}
.samit-consent__inner {
flex-direction: column;
align-items: stretch;
gap: 0.85rem;
}
/* Beide Buttons gleich breit/prominent (DSGVO: Ablehnen so leicht wie Akzeptieren) */
.samit-consent__btn {
flex: 1;
}
}
/* ============================================================
VENDOR-STAGE · Cinematic Section: Video-BG + floating Logo-Grid
+ animierte Headline. Full-Page-Hero-Style.
============================================================ */
.v2-vendor-stage {
position: relative;
min-height: 100vh;
background: var(--v2-dark);
color: var(--v2-silber);
overflow: hidden;
display: flex;
flex-direction: column;
padding: clamp(7rem, 12vw, 11rem) clamp(1.5rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem);
}
.v2-vendor-stage__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0.5;
/* Komplett monochrom, leicht dunkler und kontrastreicher für Tiefe */
filter: grayscale(100%) contrast(1.2) brightness(0.75);
}
.v2-vendor-stage__overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, rgba(10,10,12,0.55) 0%, transparent 25%, transparent 55%, rgba(10,10,12,0.92) 100%),
radial-gradient(ellipse at center, transparent 0%, rgba(10,10,12,0.5) 100%);
}
.v2-vendor-stage__content {
position: relative;
z-index: 2;
width: 100%;
max-width: calc(var(--c-grid) + 2 * var(--v2-pad-x));
margin: 0 auto;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Visually-hidden für SEO/Screenreader (H1 ist da, sichtbar nicht) */
.v2-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.v2-vendor-stage__bottom {
text-align: center;
animation: v2-fade-in-up 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}
.v2-vendor-stage__title {
font-family: var(--v2-display);
font-size: var(--v2-fs-h1);
font-weight: 300;
line-height: 1.02;
letter-spacing: -0.025em;
margin: 0 0 1.75rem;
color: var(--v2-silber);
}
.v2-vendor-stage__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 500;
color: var(--v2-silber);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1px solid rgba(228, 231, 234, 0.4);
transition: border-color 220ms ease, transform 220ms ease;
}
.v2-vendor-stage__cta:hover {
border-color: var(--v2-coral);
transform: translateX(4px);
}
.v2-vendor-stage__cta:hover span { color: var(--v2-coral); }
@keyframes v2-fade-in-up {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* Vendor-Stage: Flip-Karten staggered fade-in */
.v2-vendor-stage .v2-vendor-card {
animation: v2-fade-in-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.v2-vendor-stage .v2-vendor-card:nth-child(1) { animation-delay: 0.05s; }
.v2-vendor-stage .v2-vendor-card:nth-child(2) { animation-delay: 0.12s; }
.v2-vendor-stage .v2-vendor-card:nth-child(3) { animation-delay: 0.19s; }
.v2-vendor-stage .v2-vendor-card:nth-child(4) { animation-delay: 0.26s; }
.v2-vendor-stage .v2-vendor-card:nth-child(5) { animation-delay: 0.33s; }
.v2-vendor-stage .v2-vendor-card:nth-child(6) { animation-delay: 0.40s; }
.v2-vendor-stage .v2-vendor-card:nth-child(7) { animation-delay: 0.47s; }
.v2-vendor-stage .v2-vendor-card:nth-child(8) { animation-delay: 0.54s; }
@media (prefers-reduced-motion: reduce) {
.v2-vendor-stage__bottom,
.v2-vendor-stage .v2-vendor-card {
animation: none;
}
}
/* Vendor-Karten auf Dark-Stage: glass-Optik vorne, dunkle Back-Side */
.v2-vendor-stage .v2-vendor-card__front {
background: rgba(228, 231, 234, 0.92);
border: 1px solid rgba(228, 231, 234, 0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.v2-vendor-stage .v2-vendor-card:hover .v2-vendor-card__front {
background: var(--v2-silber);
border-color: var(--v2-coral);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--v2-coral);
}
.v2-vendor-stage .v2-vendor-card__back {
background: rgba(10, 10, 12, 0.92);
border: 1px solid rgba(255, 107, 71, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* ============================================================
VENDOR-GRID · Flip-Karten mit Logo (Front) und Info (Back)
4×2 symmetrisches Grid auf Desktop, 2×4 auf Tablet, 1×8 auf Mobile
============================================================ */
.v2-vendor-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
perspective: 1200px;
}
.v2-vendor-card {
position: relative;
aspect-ratio: 1;
border: none;
padding: 0;
background: none;
cursor: pointer;
font-family: inherit;
color: inherit;
}
.v2-vendor-card__inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.v2-vendor-card:hover .v2-vendor-card__inner,
.v2-vendor-card:focus-visible .v2-vendor-card__inner,
.v2-vendor-card.is-flipped .v2-vendor-card__inner {
transform: rotateY(180deg);
}
.v2-vendor-card__front,
.v2-vendor-card__back {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem;
text-align: center;
}
.v2-vendor-card__front {
background: #ffffff;
border: 1px solid var(--v2-line-soft);
box-shadow: 0 1px 2px rgba(14, 15, 18, 0.03);
transition: box-shadow 280ms ease, border-color 280ms ease;
}
.v2-vendor-card:hover .v2-vendor-card__front {
box-shadow: 0 8px 24px rgba(14, 15, 18, 0.08);
border-color: var(--v2-blue);
}
.v2-vendor-card__front img {
max-width: 70%;
max-height: 50%;
width: auto;
height: auto;
object-fit: contain;
/* Alle Logos monochrom, an die anderen angepasst — auch das bunte Microsoft */
filter: grayscale(100%) brightness(0.7) contrast(1.1);
transition: filter 280ms ease;
}
.v2-vendor-card:hover .v2-vendor-card__front img {
/* Beim Hover etwas heller (subtiles Aufleuchten), aber weiterhin monochrom */
filter: grayscale(100%) brightness(0.85) contrast(1.15);
}
.v2-vendor-card__back {
background: var(--v2-blue);
color: var(--v2-silber);
transform: rotateY(180deg);
gap: 0.6rem;
}
.v2-vendor-card__back h3 {
font-family: var(--v2-display);
font-size: var(--v2-fs-lead);
font-weight: 600;
margin: 0;
color: var(--v2-silber);
line-height: 1.2;
}
.v2-vendor-card__back .v2-badge {
background: rgba(255, 107, 71, 0.22);
color: var(--v2-coral);
border: 1px solid var(--v2-coral);
}
.v2-vendor-card__back p {
font-size: var(--v2-fs-klein);
line-height: 1.45;
color: rgba(228, 231, 234, 0.88);
margin: 0;
}
/* Responsive Grid */
@media (max-width: 980px) {
.v2-vendor-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}
@media (max-width: 480px) {
.v2-vendor-grid {
grid-template-columns: 1fr;
}
.v2-vendor-card {
aspect-ratio: 16/9;
}
}
/* ============================================================
EYECATCHER · Coral-Utility-Klassen
Strategisch sparsam einsetzen — nur dort wo Aufmerksamkeit
wirklich nötig ist (Pilot-Hinweise, Fristen, Neuigkeiten).
============================================================ */
/* Badge (solid, kleine Pille) */
.v2-badge {
display: inline-block;
padding: 0.35rem 0.85rem;
font-family: var(--v2-sans);
font-size: var(--v2-fs-mikro);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
background: var(--v2-coral);
color: #fff;
vertical-align: middle;
}
.v2-badge--soft {
background: var(--v2-coral-soft);
color: var(--v2-coral);
}
/* Callout-Box (z.B. NIS2-Frist, dringender Hinweis). Ohne Kanten-Balken,
die hellere Flaeche traegt den Hinweis allein. Seit 10.09.2026 in der
Tintenblau-Familie: wo wirklich gewarnt wird, traegt Coral das Signal,
nicht der Grund. */
.v2-callout {
padding: 1rem 1.25rem;
background: var(--v2-hinweis);
border-radius: 8px;
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
line-height: 1.5;
color: var(--v2-ink);
}
.v2-callout strong {
color: var(--v2-coral);
font-weight: 600;
}
/* Notification-Dot mit Pulse */
.v2-dot--coral {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--v2-coral);
box-shadow: 0 0 0 4px var(--v2-coral-pulse);
animation: v2-coral-pulse 2s ease-in-out infinite;
vertical-align: middle;
}
@keyframes v2-coral-pulse {
0%, 100% { box-shadow: 0 0 0 0px var(--v2-coral-pulse); }
50% { box-shadow: 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) {
.v2-dot--coral { animation: none; }
}
/* Eyebrow in Coral (z.B. Pilot-Sektion) */
.v2-eyebrow--coral {
color: var(--v2-coral) !important;
font-weight: 600;
}
/* Stat-Highlight in Coral (z.B. wichtige Zahlen) */
.v2-stat--coral {
color: var(--v2-coral);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 980px) {
.v2-mosaic,
.v2-packages__intro,
.v2-packages__grid,
.v2-partners__grid,
.v2-intro__grid {
grid-template-columns: 1fr;
}
/* Foto-Variante hat wegen :has() hoehere Spezifitaet als die Zeile oben —
hier explizit stapeln, sonst bliebe sie auf Mobile zweispaltig. */
.v2-intro__grid:has(.v2-intro__photo) {
grid-template-columns: 1fr;
gap: clamp(1.5rem, 4vw, 2rem);
}
.v2-intro__photo {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 4 / 3;
/* Gestapelt kein seitlicher Fade — Foto voll sichtbar ueber dem Text. */
-webkit-mask-image: none;
mask-image: none;
}
.v2-intro__photo img {
height: 100%;
width: 100%;
object-position: 50% 22%;
}
.v2-pillars__grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.v2-mosaic__image {
min-height: 320px;
order: -1;
}
.v2-mosaic--reverse .v2-mosaic__image { order: -1; }
.v2-partners__tiles {
grid-template-columns: repeat(2, 1fr);
}
.v2-secthead {
grid-template-columns: 1fr;
gap: 0.5rem;
}
}
/* Nav-Wechsel auf Mobile-Panel passend zu JS-Breakpoint (961px).
Header-CTA-Button auch ausblenden, damit nur Burger übernimmt
(clean Tablet/Mobile-Layout, CTA ist im Mobile-Panel verfügbar).
Actions nach rechts schieben, weil hidden Nav keinen flex-grow mehr hat. */
@media (max-width: 960px) {
.v2-nav {
display: none;
}
.v2-header .site-header__actions .v2-btn {
display: none;
}
.v2-header .site-header__actions {
margin-left: auto;
}
}
@media (max-width: 600px) {
/* !important schlaegt das inline grid-template-columns:1fr 1fr der
Zwei-Versprechen-Sektion, sonst bleiben die Karten auf dem Telefon
gequetscht nebeneinander. */
.v2-pillars__grid {
grid-template-columns: 1fr !important;
}
.v2-intro__photo {
aspect-ratio: 4 / 5;
}
.v2-mosaic__points {
grid-template-columns: 1fr;
}
.v2-hero__split {
font-size: var(--v2-fs-mikro);
}
/* Services-Liste: Step/Link unter Title statt rechts daneben (Cramping vermeiden) */
.v2-service-item {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.v2-service-item__step,
.v2-service-item > a {
justify-self: start;
}
}
/* ============================================================
SEITEN-VERLAUF: Visuelle Rhythm-Verbesserungen
============================================================ */
/* "Dein Ansprechpartner" kompakter: weniger oberes Section-Padding und kein
doppelter Abstand zwischen Titel und Portrait (Secthead-Margin + Grid-Margin
summierten sich auf bis zu 9rem). */
#ueber {
padding-top: clamp(2.5rem, 5vw, 4.5rem);
}
#ueber .v2-secthead {
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
#ueber .v2-intro__grid:has(.v2-intro__photo) {
margin-top: 0;
}
/* Pillars als prominente Statements (Warum SAMiT): keine Icons, keine
Trennstriche — die drei Versprechen tragen ihre Prominenz allein ueber
den grossen Display-Titel. Ruhig und typografisch. */
.v2-pillars--statements {
gap: clamp(2rem, 5vw, 4rem);
}
.v2-pillars--statements .v2-pillar {
gap: 0.85rem;
}
.v2-pillars--statements .v2-pillar h3 {
font-family: var(--v2-display);
font-size: var(--v2-fs-h3);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--v2-ink);
}
.v2-pillars--statements .v2-pillar p {
font-size: var(--v2-fs-body);
line-height: 1.6;
}
/* ============================================================
KI-SEITE · Reifegrad-Stufen (01/02/03) + Hinweis
============================================================ */
.v2-pillars--stufen .v2-pillar {
padding-top: 1.5rem;
border-top: 2px solid var(--v2-blue);
gap: 0.7rem;
}
.ki-stufe__num {
display: block;
font-family: var(--v2-display);
font-size: var(--v2-fs-gross);
font-weight: 300;
line-height: 1;
letter-spacing: 0.04em;
color: var(--v2-blue);
margin-bottom: 0.4rem;
}
.v2-pillars--stufen .v2-pillar h3 {
font-size: var(--v2-fs-h5);
}
.ki-stufe__fit {
margin: 0.4rem 0 0 !important;
font-size: var(--v2-fs-klein) !important;
font-weight: 500;
color: var(--v2-ink-soft) !important;
}
.ki-stufe__note {
margin: clamp(2rem, 4vw, 3rem) auto 0;
text-align: center;
font-family: var(--v2-sans);
font-size: var(--v2-fs-body);
line-height: 1.55;
color: var(--v2-ink-soft);
max-width: 62ch;
}
/* Die Grids hatten frueher einen eigenen Reveal mit anderem Weg und anderer
Dauer. Der ist weg: sie nehmen jetzt dieselbe Bewegung wie alles andere
aus base.css (Entscheid Saman 2026-08-19). */
/* Hero Scroll-Hint: animierter Pfeil am Hero-Boden */
.v2-hero__scroll-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(10, 10, 12, 0.38);
border: 1px solid rgba(228, 231, 234, 0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #e4e7ea;
animation: hero-scroll-bounce 2.4s ease-in-out infinite;
pointer-events: none;
box-shadow: 0 2px 10px rgba(10, 10, 12, 0.25);
}
.v2-hero__scroll-hint svg {
display: block;
width: 20px;
height: 20px;
}
@keyframes hero-scroll-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}
/* Hero · Peek-Streifen: naechste Section "atmet" kurz nach oben, um Scroll-Absicht zu signalisieren */
.v2-hero__peek {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
background: var(--v2-silber);
z-index: 1;
pointer-events: none;
animation: hero-peek-rise 3.6s ease-in-out infinite;
}
@keyframes hero-peek-rise {
0%, 55%, 100% { height: 0; }
75% { height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.v2-hero__peek { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.v2-hero__scroll-hint { animation: none; }
}
/* ============================================================
EDITORIAL FLAT · Pakete, Firewall/Netzwerk, Support (2026-07-20)
Abgenommenes Treatment aus der Design-Vorschau, jetzt live:
Inhalts-Karten werden flache, eingebettete Panels, Trennung über
Haarlinien, keine Rundungen/Schatten. Premium markiert (Tint +
Coral-Toast). Buttons, Header-Pille und Kreise bleiben bewusst rund.
Bewusst als Override am Ende gehalten (leicht review-/revertierbar).
============================================================ */
.v2-package,
.v2-package--featured,
.v2-netz {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}
/* Zwei helle, gleich grosse, flache Panels statt schwebender Kacheln */
.v2-packages__grid { gap: 1.5rem; }
.v2-packages__grid > .v2-package {
position: relative;
background: var(--v2-paper);
padding: 2.9rem 2.4rem 2.2rem;
border-radius: 0;
box-shadow: none !important;
}
/* Premium markiert: kuehler Tint + Coral-Toast-Linie oben */
.v2-packages__grid > .v2-package--featured {
background: var(--v2-blue-tint);
box-shadow: inset 0 3px 0 0 var(--v2-coral) !important;
}
/* "Empfohlen" absolut aus dem Fluss -> beide Paket-Koepfe fluchten */
.v2-packages__grid > .v2-package--featured .v2-badge {
position: absolute !important;
top: 1.25rem !important;
left: 2.4rem !important;
right: auto !important;
background: transparent;
color: var(--v2-coral);
padding: 0;
box-shadow: none;
border: none;
font-size: var(--v2-fs-mikro);
letter-spacing: 0.14em;
font-weight: 600;
}
/* Flache Kacheln schweben nicht: die Lift-Hover (translateY plus Schatten)
stammen aus der Zeit vor dem Editorial-Flat-Umbau und widersprechen ihm.
Kacheln ohne Klickfunktion brauchen gar keinen Hover-Effekt. Die
Dreh-Karten auf der Partner-Seite bleiben bewusst unberuehrt. */
.v2-package:hover,
.v2-package--featured:hover,
.package-card:hover,
.service-card:hover {
transform: none !important;
box-shadow: none !important;
}
/* Gruppen flach, getrennt durch feine Haarlinie */
.v2-package__group {
background: transparent;
border: none;
border-radius: 0;
padding: 1.15rem 0;
border-top: 1px solid var(--v2-line-soft);
}
.v2-package__group:first-of-type {
border-top: none;
padding-top: 0.4rem;
}
/* Firewall/Netzwerk-Band: flach, volle-Breite-Trennlinie darueber */
.v2-netz {
margin-top: 0;
padding: 2.2rem 0 0;
border-top: 1px solid var(--v2-line);
}
/* Die zwei dazubuchbaren Bausteine sollen als Bausteine lesbar sein, nicht als
zwei Textspalten mit Strich darueber. Gleiche Flaeche und gleicher
Innenabstand wie die Paket-Karten darueber. */
.v2-bausteine > .v2-netz {
background: var(--v2-paper);
border-top: 0;
--kachel-pad-x: 2.2rem;
--kachel-pad-oben: 2.4rem;
padding: var(--kachel-pad-oben) var(--kachel-pad-x) 2rem;
}
/* Support-Feld: flach, oben Trennlinie (ueberschreibt Inline-Border/Radius) */
#leistungsumfang {
border: none !important;
border-top: 1px solid var(--v2-line-soft) !important;
border-radius: 0 !important;
background: transparent !important;
padding: 1.6rem 0 0 !important;
margin-top: 2rem !important;
}
/* --- B · flach, aber premium: crispere Panels, mehr Weissraum, staerkere Typo.
Weiss (Produktiv) und kuehler Tint (Premium) heben sich klar von der Silber-
Section ab, statt als blasse Fuellflaechen zu verschwimmen. --- */
/* Paket-Section einheitlich Silber, damit die weissen Panels ueberall abheben
(Startseite lag auf --paper, dort waere Weiss auf Weiss verschwommen). */
.v2-section:has(.v2-packages__grid) { background: var(--v2-silber); }
.v2-packages__grid { gap: 1.75rem; }
.v2-packages__grid > .v2-package {
background: #ffffff;
/* Als Variablen, damit der Kopf-Block mit seinen negativen Aussenabstaenden
automatisch mitgeht, wenn die Abstaende auf kleinen Bildschirmen sinken. */
--kachel-pad-x: 2.9rem;
--kachel-pad-oben: 3.3rem;
padding: var(--kachel-pad-oben) var(--kachel-pad-x) 2.8rem;
}
.v2-packages__grid > .v2-package--featured {
background: var(--v2-blue-tint);
}
/* Package-Name groesser und selbstbewusster (war fs-h5 ~23px)
Gilt auch im Flex-Band, damit SAMiT Flex optisch wie eine dritte Karte wirkt */
.v2-package .v2-package__name,
.v2-flex-band .v2-package__name {
font-size: var(--v2-fs-h4);
line-height: 1.08;
}
/* Mehr Luft zwischen den Gruppen */
.v2-package__group { padding: 1.4rem 0; }
/* --- Kopf als eigener Block, Paketname in Tintenblau, dezente Umrandung
(Design-Feedback 2026-07-20) --- */
/* Dezente, eckige Umrandung ums ganze Paket */
.v2-packages__grid > .v2-package {
border: 1px solid var(--v2-line-soft);
}
/* Kopf-Bereich als eigener, voll-breiter Block oben im Panel: ein Hauch
Tintenblau (eine Spur dunkler als der Koerper), unten mit Trennlinie */
.v2-packages__grid > .v2-package .v2-package__head {
margin: calc(var(--kachel-pad-oben) * -1) calc(var(--kachel-pad-x) * -1) 1.75rem;
padding: 2.6rem var(--kachel-pad-x) 1.4rem;
background: rgba(27, 58, 94, 0.06);
border-bottom: 1px solid var(--v2-line-soft);
}
/* Paketname in Tintenblau, damit der Kopf traegt (auch im Flex-Band) */
.v2-package .v2-package__name,
.v2-flex-band .v2-package__name {
color: var(--v2-blue);
}
/* Premium: Coral-Akzent wandert vom Panel-Rand auf den Kopf-Block */
.v2-packages__grid > .v2-package--featured {
box-shadow: none !important;
}
.v2-packages__grid > .v2-package--featured .v2-package__head {
box-shadow: inset 0 3px 0 0 var(--v2-coral);
}
/* --- Kategorien als farbige Punkte statt Bloecke (Design-Feedback 2026-07-20).
Die drei Pillars als Legende im Kopf, jede Leistung traegt ihren Kategorie-
Punkt. Ruhigere, besser vergleichbare Gegenueberstellung. --- */
/* Pillar-Legende im Kopf */
.v2-package__pillars {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.15rem;
margin-top: 0.9rem;
}
.v2-package__pillars span {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: var(--v2-fs-mikro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--v2-ink-soft);
font-weight: 600;
}
.v2-package__pillars span::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--lp);
flex-shrink: 0;
}
/* Gruppen fliessen als eine Liste: keine Label-Header, keine Block-Trennung */
.v2-package__group-label { display: none; }
.v2-package__groups > .v2-package__group,
.v2-package__group {
padding: 0 !important;
border-top: none !important;
}
.v2-package__group + .v2-package__group { margin-top: 0; }
/* Kategorie-Punkt INLINE vor jeder Leistung (in-flow, ueberdeckt nie den Text).
Farbe = Pillar der Gruppe (--pg). */
.v2-package__list li { padding-left: 0 !important; }
.v2-package__list li::before {
content: "" !important;
position: static !important;
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
/* Neutral statt Pillar-bunt: die Farbe sitzt nur am Gruppen-Label. */
background: var(--v2-line);
margin-right: 0.6rem;
vertical-align: middle;
}
.v2-package__details summary { padding-left: 0; }
.v2-package__details summary::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--v2-line);
margin-right: 0.6rem;
vertical-align: middle;
}
/* "Alles aus Produktiv" prominent: eigener Streifen in Tintenblau-Toenung */
.v2-package__inherit {
font-size: var(--v2-fs-klein) !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--v2-blue) !important;
font-weight: 600 !important;
padding: 0.75rem 0.9rem !important;
background: var(--v2-hinweis);
margin: 0 0 1.4rem !important;
}
/* ---- SAMiT Flex: dritte Option unter den Paketen, gleiche Design-Sprache wie die Paket-Karten ---- */
.v2-flex-band {
/* Gleiche Flaeche und gleicher Innenabstand wie die Vergleichskachel,
damit Kachel, Flex und Projekt-Hinweis als eine Familie lesbar sind. */
background: var(--v2-paper);
border: 0;
--kachel-pad-x: 2.4rem;
--kachel-pad-oben: 2rem;
padding: var(--kachel-pad-oben) var(--kachel-pad-x) 2.2rem;
margin-top: 1.5rem;
}
/* Kopf-Block wie bei Produktiv und Premium: volle Breite oben im Panel,
ein Hauch Tintenblau, unten eine Trennlinie. Flex liest sich damit als
drittes Modell und nicht als Nachsatz. */
.v2-flex-band__head,
.v2-flex-band__zeile {
background: rgba(27, 58, 94, 0.06);
border-bottom: 1px solid var(--v2-line-soft);
margin: calc(var(--kachel-pad-oben) * -1) calc(var(--kachel-pad-x) * -1) 1.5rem;
padding: 1.8rem var(--kachel-pad-x) 1.3rem;
}
.v2-flex-band__head .v2-package__claim { display: block; margin-top: 0.2rem; }
/* Auf der Startseite steht nur der Kopf im Band, dort schliesst er unten
buendig ab und braucht keine Trennlinie. */
.v2-flex-band__zeile:only-child {
margin-bottom: -2.2rem;
border-bottom: 0;
}
/* Name und Claim teilen sich bewusst die Paket-Klassen (.v2-package__name /
.v2-package__claim), damit Flex optisch exakt wie eine dritte Paket-Karte
wirkt, inklusive aller Editorial-Flat-Overrides weiter unten in der Datei. */
.v2-flex-band__body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.5rem;
padding: 1.5rem 2.5rem 1.7rem;
}
.v2-flex-band__text {
color: var(--v2-ink);
font-size: var(--v2-fs-body);
line-height: 1.55;
max-width: 84ch;
margin: 0;
}
.v2-flex-band__cta { flex: 0 0 auto; }
/* ---- Hero-Ticker: dezente rotierende Angebots-Zeile auf der Landingpage.
Bewusst NICHT klickbar: reine Bandbreiten-Anzeige, der einzige Klickpfad
im Hero bleibt der Erstgespräch-CTA. Coral-Punkt als ruhiger Blickfang. ---- */
.v2-hero__ticker {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.7rem;
margin: 0 0 2.4rem;
font-size: var(--v2-fs-klein);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.v2-hero__ticker-label {
color: rgba(228, 231, 234, 0.55);
}
.v2-hero__ticker-stage {
display: grid;
text-align: left;
}
.v2-hero__ticker-item {
grid-area: 1 / 1;
color: #ffffff;
opacity: 0;
visibility: hidden;
transition: opacity 600ms ease;
white-space: nowrap;
}
.v2-hero__ticker-item.is-on {
opacity: 1;
visibility: visible;
}
@media (max-width: 560px) {
.v2-hero__ticker { font-size: var(--v2-fs-mikro); gap: 0.55rem; margin-bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
.v2-hero__ticker-item { transition: none; }
}
/* ============================================================
PREGRUENDUNG:START
Hinweisblock fuer die Zeit vor der Gruendung/Gewerbeanmeldung.
Bei Gruendung: diesen gesamten Block loeschen (siehe _PREGRUENDUNG.md).
============================================================ */
.pregruendung {
/* Innenkante buendig mit dem Inhaltsmass der Seite, deshalb Rahmenbreite
plus eigener Innenabstand statt nur --c-grid. */
max-width: calc(var(--c-grid, 1100px) + 2 * var(--v2-pad-x));
margin: 0 auto;
padding: 1.25rem var(--v2-pad-x);
background: var(--v2-blue-tint, #ECF1F8);
border-top: 3px solid var(--v2-coral, #FF6B47);
border-bottom: 1px solid var(--v2-line-soft, rgba(27, 58, 94, 0.12));
}
.pregruendung__title {
margin: 0 0 0.35rem;
font-family: var(--v2-sans, inherit);
font-size: var(--v2-fs-klein);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--v2-coral, #FF6B47);
}
.pregruendung__text {
margin: 0;
font-family: var(--v2-sans, inherit);
font-size: var(--v2-fs-klein);
line-height: 1.65;
color: var(--v2-ink, #0e0f12);
max-width: 88ch;
}
.pregruendung__text strong { font-weight: 600; }
.pregruendung__text a { color: #1B3A5E; text-decoration: underline; }
/* Variante direkt an Umwandlungspunkten (Pakete, Projekte, Formular) */
.pregruendung--inline {
margin: 2rem auto 0;
border-top-width: 2px;
}
@media (max-width: 540px) {
.pregruendung { padding: 1rem 1.25rem; }
.pregruendung__text { font-size: var(--v2-fs-klein); }
}
/* PREGRUENDUNG:END */
/* ============================================================
BAUSTEINE: zwei dazubuchbare Add-on-Karten nebeneinander
Nutzt die bestehende .v2-netz-Karte, stellt sie aber als
eigenstaendige Spalte statt als Inhalt-plus-Seitenspalte.
============================================================ */
.v2-bausteine {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
align-items: stretch;
}
/* Dreispaltige Variante fuer die Awareness-Optionen. Dieselbe Familie,
nur eine Spalte mehr. Ab 980px zweispaltig, darunter einspaltig ueber
die bestehende Regel weiter unten. */
.v2-bausteine--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 980px ist die Tablet-Schwelle, die .v2-bausteine ohnehin schon nutzt.
Darunter zwei Spalten, unter 720px eine. */
@media (max-width: 980px) {
.v2-bausteine--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.v2-bausteine--drei { grid-template-columns: minmax(0, 1fr); }
}
.v2-bausteine .v2-netz {
margin-top: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.v2-baustein__list {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
display: grid;
/* 21.08.2026: gap war 0.7rem, also 11px, waehrend eine Zeile im Punkt
21px hoch ist. Der Abstand zwischen zwei Punkten war damit kleiner
als der zwischen zwei Zeilen desselben Punktes, und das Auge konnte
die Punkte nicht als Gruppen lesen. Jetzt deutlich groesser als der
Zeilenabstand. */
gap: 1.15rem;
}
.v2-baustein__list li {
position: relative;
padding-left: 1.4rem;
font-size: var(--v2-fs-body);
line-height: 1.55;
color: var(--v2-ink-soft);
}
.v2-baustein__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--v2-blue);
}
.v2-baustein__list strong {
color: var(--v2-ink);
font-weight: 600;
}
.v2-baustein__foot {
margin-top: auto;
padding-top: 1.35rem;
border-top: 1px solid var(--v2-line-soft);
}
.v2-baustein__note {
font-size: var(--v2-fs-klein);
line-height: 1.55;
color: var(--v2-ink-soft);
margin: 0 0 1rem;
}
/* Fussnote unter der Ablauf-Leiste. Bis 21.08.2026 stand hier dieselbe
Groesse wie im Fliesstext, damit war Kleingedrucktes nicht als solches
zu erkennen (Saman). Jetzt eine Stufe kleiner, damit der Blick es beim
Ueberfliegen ueberspringen kann und es beim Lesen trotzdem dasteht. */
.v2-baustein__fussnote {
font-family: var(--v2-sans);
font-size: var(--v2-fs-mikro);
line-height: 1.5;
color: var(--v2-ink-soft);
/* unten Luft, damit die Trennlinie des Kartenfusses nicht direkt
unter der Fussnote klebt. */
margin: 1.25rem 0 1.5rem;
}
.v2-bausteine .v2-accordion {
margin-bottom: 1.25rem;
}
@media (max-width: 900px) {
.v2-bausteine { grid-template-columns: minmax(0, 1fr); }
}
/* ============================================================
KACHEL-SYSTEM 2026-08-10 (Entscheid Saman):
Info-Kacheln transparent mit Tintenblau-Rahmen, ohne Hover-Effekt,
sie sind nicht klickbar. Die Dreh-Karten der Partner-Seite und das
Support-Fenster sind bewusst nicht Teil dieses Systems.
============================================================ */
.v2-package,
.v2-packages__grid > .v2-package,
.v2-packages__grid > .v2-package--featured,
.v2-vergleich,
.v2-flex-band,
.v2-bausteine > .v2-netz,
.package-card,
.stat-card {
background-color: transparent !important;
border: 1px solid var(--v2-blue) !important;
box-shadow: none !important;
}
/* Premium behaelt Coral-Kopfkante und Empfohlen-Marke als Unterscheidung. */
/* Nachbesserung 2026-08-10 (Saman): Mit sichtbarem Rahmen brauchen die
Vier-Spalten-Reihen wieder Luft. Der alte Streifen-Look (gap 0, nur
Trennlinien, Aussenkanten ohne Innenabstand) stammt aus der rahmenlosen
Zeit und drueckt die Kacheln sonst aneinander. !important, weil die
nth-child-Regeln der Streifen-Aera einzelne Innenabstaende auf 0 setzen. */
body[data-page="landing-v2"] .stats-grid {
gap: clamp(1rem, 1.8vw, 1.5rem) !important;
}
body[data-page="landing-v2"] .stat-card {
padding: clamp(1.3rem, 2vw, 1.8rem) !important;
}
/* Die drei NISG-Stichtage ziehen in dasselbe Kachel-System um:
transparent mit Tintenblau-Rahmen statt getoenter Flaeche mit Farbbalken. */
.nis2-timeline__step {
background: transparent !important;
border: 1px solid var(--v2-blue) !important;
padding: clamp(1.3rem, 2vw, 1.8rem);
}
/* ============================================================
CTA-BUTTONS 2026-08-10 (Entscheid Saman):
Transparent, Tintenblau-Rahmen, beim Ueberfahren fuellt sich die
Pille von unten mit Coral. Text wechselt dabei auf Ink, dunkle
Tinte auf Coral haelt rund 6,9:1 Kontrast (Weiss fiele mit 2,6:1
durch). Auf dunklen Flaechen (Hero, CTA-Band) sind Rahmen und
Text hell, der Fill funktioniert dort genauso.
AUSNAHME: die Kontaktseite (body.kontakt-seite) behaelt ihre
blauen Buttons unveraendert.
Die beiden Marken-Kreise im Header (Support, Erstgespraech)
gehoeren nicht dazu.
============================================================ */
body:not(.kontakt-seite) .v2-btn,
body:not(.kontakt-seite) .btn {
/* Alle background-Teile mit !important: die alten blauen Hover-Regeln
der Buttons setzen background als Shorthand und wuerden den Fill
sonst aushebeln (dann faerbt sich die Pille tintenblau statt Coral). */
background-color: transparent !important;
background-image: none !important;
border: 1.5px solid var(--v2-blue) !important;
color: var(--v2-blue) !important;
transition: color 420ms cubic-bezier(0.33, 1, 0.68, 1);
}
/* Die Coral-Fuellung ist eine eigene Ebene, die von unten hochwaechst.
14.09.2026, Saman fand die Fuellung nicht fluessig: vorher wuchs
background-size, das rechnet der Browser bei jedem Bild neu. transform
laeuft auf der Grafikkarte und wird weich auslaufend statt ruckartig.
Der Button ist schon position: relative, overflow: hidden und
isolation: isolate (siehe "Eckige Buttons"), deshalb reicht z-index: -1. */
body:not(.kontakt-seite) .v2-btn::after,
body:not(.kontakt-seite) .btn::after {
content: "";
position: absolute;
inset: 0;
background: var(--v2-coral);
transform: scaleY(0);
transform-origin: bottom center;
transition: transform 420ms cubic-bezier(0.33, 1, 0.68, 1);
z-index: -1;
pointer-events: none;
}
/* Nur auf wirklich dunklen Flaechen (Foto-Hero): heller Rahmen und heller
Text, sonst unsichtbar. Das CTA-Band und die --light-Heroes sind hell und
behalten den tintenblauen Rahmen, sonst verschwindet der Button dort. */
body:not(.kontakt-seite) .v2-hero:not(.v2-hero--light) .v2-btn,
body:not(.kontakt-seite) .v2-mosaic--dark .v2-btn {
border-color: var(--v2-silber, #e4e7ea) !important;
color: var(--v2-silber, #e4e7ea) !important;
}
/* Auch dort wechselt die Schrift auf Coral nach Ink (Guideline C4). Die
Regel darueber war staerker als die Hover-Regel, 14.09.2026 stand im
Video-Hero deshalb helle Schrift auf Coral, rund 2,6:1. */
body:not(.kontakt-seite) .v2-hero:not(.v2-hero--light) .v2-btn:hover,
body:not(.kontakt-seite) .v2-mosaic--dark .v2-btn:hover {
color: var(--v2-ink) !important;
}
/* Das aeltere Blau-Overlay (::before schiebt sich von links ein) wuerde
den Coral-Fill uebermalen. Es lebt nur auf der Kontaktseite weiter. */
body:not(.kontakt-seite) .v2-btn::before,
body:not(.kontakt-seite) .btn::before {
content: none !important;
}
body:not(.kontakt-seite) .v2-btn:hover,
body:not(.kontakt-seite) .btn:hover {
/* Nur die Fuellung wird Coral. Der Rahmen bleibt, wie er ist,
und der Text wechselt auf Ink, damit er lesbar bleibt. */
color: var(--v2-ink) !important;
}
body:not(.kontakt-seite) .v2-btn:hover::after,
body:not(.kontakt-seite) .btn:hover::after {
transform: scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
body:not(.kontakt-seite) .v2-btn,
body:not(.kontakt-seite) .btn,
body:not(.kontakt-seite) .v2-btn::after,
body:not(.kontakt-seite) .btn::after { transition: none; }
}
body:not(.kontakt-seite) .v2-btn:focus-visible,
body:not(.kontakt-seite) .btn:focus-visible {
outline: 2px solid var(--v2-blue);
outline-offset: 3px;
}
/* ============================================================
UEBER-MICH EDITORIAL-SPLIT 2026-08-11 (Entscheid Saman):
Zweifarbiger Container: links dunkler Kopf mit der Ueberschrift,
rechts hell die Beschreibung. Auf Mobile stapelt es.
============================================================ */
.ueber-split {
display: grid;
border: 1px solid var(--v2-blue);
}
.ueber-split > .v2-secthead {
/* Dunkler Kopf-Container links, deshalb keine Trennlinie und eigene Farben.
Inhalt vertikal zentriert, damit bei langem rechten Teil kein Leerraum wirkt. */
border-bottom: 0;
margin-bottom: 0;
background: var(--v2-blue);
padding: clamp(1.75rem, 3vw, 2.75rem);
display: flex;
flex-direction: column;
justify-content: center;
}
.ueber-split > .v2-secthead .v2-secthead__title { color: var(--v2-silber); max-width: 18ch; }
.ueber-split > .v2-secthead .v2-secthead__eyebrow { color: rgba(228, 231, 234, 0.75); }
.ueber-split > div { padding: clamp(1.75rem, 3vw, 2.75rem); }
@media (min-width: 981px) {
/* 50/50: die Dunkel-Hell-Kante liegt genau auf dem mittleren
Trennstrich des 4er-Kachelrasters darunter. */
.ueber-split { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
/* Einheitliche Breite (Entscheid Saman): dunkle und helle Flaeche,
Ansatz-Kacheln und Foto-Raster folgen exakt der Hero-Rahmen-Breite
(--c-grid). Der Hero selbst wird auf dieser Seite ebenfalls gekappt,
damit er auf sehr breiten Bildschirmen nicht auseinanderlaeuft. */
.ueber-mich-seite .ueber-split,
.ueber-mich-seite .stats-grid,
.ueber-mich-seite .team-grid {
max-width: var(--c-grid);
margin-left: auto;
margin-right: auto;
}
/* Team-Kacheln auf der Ueber-mich-Seite: 6 Plaetze fuer Fotos,
im Stil der Info-Kacheln (transparent, blauer Rahmen). */
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 1rem;
}
@media (min-width: 981px) { .team-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-kachel {
margin: 0;
border: 1px solid var(--v2-blue);
padding: 0.6rem 0.6rem 0.75rem;
}
.team-kachel__foto {
aspect-ratio: 1 / 1;
background: rgba(27, 58, 94, 0.06);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--v2-fs-mikro);
color: var(--v2-ink-soft);
overflow: hidden;
}
.team-kachel__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-kachel figcaption {
margin-top: 0.5rem;
font-size: var(--v2-fs-klein);
line-height: 1.35;
color: var(--v2-ink);
}
.team-kachel figcaption span { display: block; font-size: var(--v2-fs-mikro); color: var(--v2-ink-soft); }
/* ============================================================
PREMIUM IN CORAL (Entscheid Saman 2026-08-13):
Die Premium-Spalte ist rundum in Coral gerahmt, nicht nur mit einer
Kante oben. Dasselbe gilt fuer den Streifen "+ Alles aus SAMiT
Produktiv", der vorher nur eine Coral-Kante links hatte.
Steht am Ende, weil das Kachel-System weiter oben allen Kacheln per
!important einen Tintenblau-Rahmen gibt.
============================================================ */
.v2-packages__grid > .v2-package--featured {
border: 2px solid var(--v2-coral) !important;
}
/* Kopf-Block: die Coral-Kante oben faellt weg, sonst liegt sie doppelt
auf dem neuen Rahmen. Die Trennlinie zum Koerper bleibt. */
.v2-packages__grid > .v2-package--featured .v2-package__head {
box-shadow: none;
}
.v2-package__inherit {
border: 2px solid var(--v2-coral);
}
/* ============================================================
BAUSTEIN-KOEPFE (Entscheid Saman 2026-08-13):
Die zwei dazubuchbaren Bausteine bekommen denselben Kopf-Block wie die
Pakete. So sieht man auf einen Blick, dass sie zur selben Familie
gehoeren und etwas sind, das man dazunimmt.
============================================================ */
.v2-bausteine > .v2-netz .v2-netz__head {
background: rgba(27, 58, 94, 0.06);
border-bottom: 1px solid var(--v2-line-soft);
margin: calc(var(--kachel-pad-oben) * -1) calc(var(--kachel-pad-x) * -1) 1.6rem;
padding: 1.9rem var(--kachel-pad-x) 1.2rem;
/* Der Baustein ist eine Flex-Spalte mit align-items: start, sonst waere
der Kopf nur so breit wie sein Text. */
align-self: stretch;
}
.v2-netz__head .v2-netz__title { margin-bottom: 0; }
/* ============================================================
EIN ABSTAND FUER ALLE ABSCHNITTE (Entscheid Saman 2026-08-13)
Bis jetzt liefen zwei Systeme nebeneinander: die v2-Seiten trugen den
Abstand im Innenpolster (.v2-section), die Projektseiten zusaetzlich
einen Aussenabstand aus pages.css (--section-gap). Uebereinander ergab
das 304px zwischen zwei Abschnitten, waehrend die Startseite mit 144px
auskam. Der Abstand steckt jetzt ueberall nur im Innenpolster und kommt
aus derselben Variable.
Ausgenommen bleibt .section--top: dessen grosses Kopfpolster haelt den
Inhalt unter dem festen Seitenkopf frei.
============================================================ */
body[data-page="landing-v2"] .section:not(.section--top),
body[data-page="landing-v2"] .section.section--tight:not(.section--top) {
padding-top: var(--v2-pad-section);
padding-bottom: var(--v2-pad-section);
}
body[data-page="landing-v2"] .section,
body[data-page="landing-v2"] .v2-section,
body[data-page="landing-v2"] main > section:last-child {
margin-top: 0;
margin-bottom: 0;
}
body[data-page="landing-v2"] .section--top {
padding-bottom: var(--v2-pad-section);
}
/* Beginnt eine Seite ohne Hero direkt mit einem Abschnitt, muss dieser den
Platz fuer den festen Seitenkopf selbst mitbringen, sonst liegt das Logo
auf dem Text (auf der Selbstcheck-Seite aufgefallen). Greift nur, wo das
erste Element in main wirklich ein Abschnitt ist, Hero-Seiten bleiben
unberuehrt. */
body[data-page="landing-v2"] main > .section:first-child,
body[data-page="landing-v2"] main > .section.section--tight:first-child,
body[data-page="landing-v2"] main > .v2-section:first-child {
padding-top: clamp(7rem, 12vw, 9rem);
}
/* ============================================================
ABGEHAKTES KAESTCHEN STATT PUNKT (Entscheid Saman 2026-08-13)
Die Aufzaehlungen tragen kein rundes Zeichen mehr, sondern ein kleines
abgehaktes Kaestchen. Es sagt "ist drin" statt nur "naechster Punkt".
Ein Bild aus --v2-haken-box fuer alle Listen, damit nichts auseinander
laeuft.
============================================================ */
.v2-package__list li::before,
.v2-package__details summary::before {
width: 13px !important;
height: 13px !important;
border-radius: 0 !important;
background: var(--v2-haken-box) center / contain no-repeat !important;
margin-right: 0.55rem;
vertical-align: -2px;
}
.v2-baustein__list li::before,
.painpoint-list li::before {
width: 13px;
height: 13px;
border-radius: 0;
background: var(--v2-haken-box) center / contain no-repeat;
opacity: 1;
top: 0.28em;
}
.v2-baustein__list li,
.painpoint-list li {
padding-left: 1.65rem;
}
/* Bricht eine Zeile um, steht die zweite Zeile unter der ersten und nicht
unter dem Kaestchen (Saman, 2026-08-13, auf dem Handy aufgefallen).
Haengender Einzug statt Flexbox: Flexbox wuerde jedes Inline-Element im
Text zu einer eigenen Spalte machen, dann rutscht zum Beispiel das
Fussnoten-Sternchen weg. Die Werte gehoeren zusammen, 13px Kaestchen
plus 8px Abstand ergeben die 21px Einzug. */
.v2-package__details details summary,
.v2-package__list li {
padding-left: 21px !important;
text-indent: -21px;
}
.v2-package__details summary::before,
.v2-package__list li::before {
margin-right: 8px !important;
}
/* Der aufgeklappte Text haengt sonst mit am Einzug. */
.v2-package__details details p,
.v2-package__details details[open] summary + * {
text-indent: 0;
}
/* Fussnote unter den Paket-Karten: verweist fuer den Leistungsumfang auf die
AGB, statt ihn auf der Seite noch einmal auszubreiten (Saman 2026-08-13). */
.v2-fussnote {
margin: 2rem 0 0;
padding-top: 1.2rem;
border-top: 1px solid var(--v2-line-soft);
font-size: var(--v2-fs-klein);
color: var(--v2-ink-soft);
scroll-margin-top: 7rem;
}
.v2-fussnote a { color: var(--v2-blue); text-decoration: underline; }
/* Sprungmarken landen sonst unter dem festen Seitenkopf. Eine Regel fuer alle
Anker statt eines Inline-Wertes pro Element (Saman 2026-08-13). */
:target {
scroll-margin-top: 7rem;
}
/* ============================================================
VORSPANN UND ERKLAERUNG (Saman 2026-08-13)
In diesen Listen traegt der fette Vorspann die Zeile, der Erklaertext
dahinter steht eine Stufe kleiner. Vorher waren beide gleich gross, das
liess die Kacheln ueberfuellt wirken. Der Vorspann behaelt seine
bisherige Groesse, gerechnet ueber em, damit beide Werte zusammen
bleiben, wenn einer geaendert wird.
============================================================ */
.v2-baustein__list li,
.painpoint-list li {
font-size: var(--v2-fs-klein);
}
.v2-baustein__list li > strong:first-child,
.painpoint-list li > strong:first-child,
.v2-accordion details p > strong:first-child {
font-size: 1.11em;
}
.v2-accordion details p {
font-size: var(--v2-fs-klein);
}
/* Beide Paket-Koepfe gleich hoch (Saman 2026-08-13). Vorher hing die Hoehe an
der Laenge des Claims: bei Premium bricht er auf zwei Zeilen um, bei
Produktiv nicht, und die Koepfe standen versetzt. Zwei Zeilen Platz fuer
beide, gerechnet in em, damit es bei jeder Schriftgroesse passt. */
.v2-packages__grid > .v2-package .v2-package__claim {
display: block;
min-height: 2.7em;
}
/* ============================================================
OEFFENTLICH NUR DAS ERGEBNIS (Entscheid Saman 2026-08-13)
Die Einzelleistungen sind von der Website hinter die Kontaktschwelle
gewandert. Oeffentlich stehen Ergebnis-Zeilen, die vollstaendige
Leistungsbeschreibung gibt es auf Anfrage. Grund: die frueheren 24
Aufklapper und die volle Vergleichstabelle machten das Angebot Zeile
fuer Zeile vergleichbar und luden zum Unterbieten ein.
============================================================ */
.v2-package__ergebnis {
margin-top: 0.5rem;
}
.v2-package__ergebnis .v2-package__list {
display: grid;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
.v2-vergleich__kurz {
display: grid;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
/* Kurze Aufzaehlung in den Paket-Karten (Saman 2026-08-14): eine Zeile je
Leistung, kein Fliesstext. Die Erklaerung dazu steht in der
Leistungsbeschreibung, hier zaehlt die Uebersicht auf einen Blick. */
.v2-package__list--kurz {
gap: 0.55rem;
}
.v2-package__list--kurz li {
line-height: 1.45;
}
/* Ergebnis-Ueberschrift plus kurze Zeilen (Saman 2026-08-14): der Satz sagt,
was der Kunde davon hat, die Zeilen darunter sagen, was drin ist. Getrennt
durch dieselbe Haarlinie wie die frueheren Leistungsgruppen. */
.v2-package__gruppe + .v2-package__gruppe {
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid var(--v2-line-soft);
}
.v2-package__ziel {
margin: 0 0 0.55rem;
font-weight: 600;
color: var(--v2-blue);
font-size: var(--v2-fs-body);
line-height: 1.35;
}
/* Lesebreite fuer Fliesstext (Saman 2026-08-14): Seit das Inhaltsmass auf
1440px steht, wuerden Absaetze ueber die volle Breite laufen. Ueberschriften,
Kacheln und Tabellen duerfen die Breite nutzen, durchlaufender Text nicht.
Absaetze mit eigener max-width im HTML bleiben unberuehrt. */
.v2-container > .v2-body:not([style*="max-width"]),
.v2-container > p:not([style*="max-width"]):not([class*="__"]),
.v2-secthead .v2-lead,
.v2-secthead > p,
.v2-vergleich__fuss p,
.v2-fussnote,
.v2-service-item__title p,
.v2-cta p,
.v2-vergleich__kurz li,
.v2-package__list li,
.v2-baustein__list li,
.painpoint-list li {
max-width: 68ch;
}
/* ============================================================
EIN LISTENZEICHEN FUER DIE GANZE WEBSITE (Saman 2026-08-14)
Vorher standen vier Behandlungen nebeneinander: das abgehakte
Kaestchen, ein Haken als Schriftzeichen, der Standard-Punkt des
Browsers und Listen ganz ohne Zeichen. Ab hier tragen alle
Inhaltslisten dasselbe Kaestchen in derselben Groesse, mit
haengendem Einzug, damit umbrechende Zeilen unter dem Text
stehen und nicht unter dem Zeichen.
Ausgenommen bleiben bewusst: die Ablauf-Listen mit eigener
Nummerierung und das Akkordeon, das seine Zeichen im Kopf traegt.
============================================================ */
/* ul.section__body.lead steht doppelt so genau da, weil pages.css
(Abschnitt 11b) solchen Listen mit genau diesem Selektor noch
Standard-Punkte gibt. Ohne das gewann die alte Regel, und auf
/projekte/website-erstellung/ lagen Punkt und Kaestchen uebereinander
(gefunden 14.09.2026). */
.package-card__list,
ul.lead,
.section__body,
ul.section__body.lead,
.stack-criteria__list,
.tw-tier__list,
.tw-hours-card__list,
.tw-efficiency__list {
list-style: none;
padding-left: 0;
margin-left: 0;
}
.package-card__list li,
ul.lead > li,
.section__body > li,
ul.section__body.lead > li,
.stack-criteria__list li,
.tw-tier__list li,
.tw-hours-card__list li,
.tw-efficiency__list li {
position: relative;
padding-left: 1.65rem;
margin-bottom: 0.55rem;
}
.package-card__list li::before,
ul.lead > li::before,
.section__body > li::before,
.stack-criteria__list li::before,
.tw-tier__list li::before,
.tw-hours-card__list li::before,
.tw-efficiency__list li::before {
content: "" !important;
position: absolute;
left: 0;
top: 0.28em;
width: 13px;
height: 13px;
border-radius: 0;
background: var(--v2-haken-box) center / contain no-repeat;
color: transparent;
font-size: 0;
}
/* Rechtstexte bekommen bewusst KEIN abgehaktes Kaestchen. Der Haken sagt
"ist drin", das waere bei einer Aufzaehlung von Betroffenenrechten oder
Vertragsbegriffen schlicht falsch. Stattdessen ein neutraler Strich,
einheitlich auf AGB, Datenschutz und Impressum (Saman 2026-08-14). */
.doc-body ul:not([class]) {
list-style: none;
padding-left: 0;
}
.doc-body ul:not([class]) > li {
position: relative;
padding-left: 1.35rem;
margin-bottom: 0.5rem;
}
.doc-body ul:not([class]) > li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 9px;
height: 1px;
background: var(--v2-line);
}
/* Handlungs-Knopf im Kartenfuss (Saman 2026-08-14). Die Karte wird zur
Spalte, damit der Knopf unten sitzt und beide Karten gleich hoch
bleiben, auch wenn eine Karte mehr Zeilen hat. Rechtsbuendig am
Desktop, volle Breite am Handy, weil dort der Daumen zielt. */
.v2-packages__grid > .v2-package {
display: flex;
flex-direction: column;
}
.v2-package__fuss {
margin-top: auto;
padding-top: 1.6rem;
display: flex;
justify-content: flex-end;
}
.v2-package__cta {
white-space: nowrap;
}
@media (max-width: 700px) {
.v2-package__fuss { justify-content: stretch; }
.v2-package__cta { flex: 1; text-align: center; }
}
/* Vergleich auf der Startseite: zwei Spalten statt Fliesstext ueber die
halbe Breite (Saman 2026-08-14). Links was beide Modelle koennen, rechts
was Premium darueber hinaus bringt. Dieselben Kaestchen-Zeilen wie in den
Paket-Karten, damit Startseite und Managed Services dieselbe Sprache
sprechen. */
.v2-vergleich__paar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.75rem, 3vw, 3.5rem);
align-items: start;
}
@media (max-width: 760px) {
.v2-vergleich__paar { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}
/* ============================================================
TEAM-RASTER (Saman 2026-08-17)
Statt fuenf leerer Platzhalter steht neben Saman eine Kachel fuer das
Partner-Netzwerk. Grund: auf dieser Seite landen ueberwiegend
Interessenten, und leere Plaetze beantworten deren Kapazitaetsfrage
falsch. Die Einladung zum Mitbauen steht als ruhige Zeile darunter.
============================================================ */
.team-kachel--netz .team-kachel__foto {
display: flex;
align-items: center;
justify-content: center;
background: var(--v2-hinweis);
color: var(--v2-blue);
}
.team-kachel--netz .team-kachel__foto svg {
width: 44%;
height: auto;
opacity: 0.75;
}
.team-hinweis {
margin-top: 1.25rem;
color: var(--v2-ink-soft);
font-size: var(--v2-fs-klein);
}
/* ============================================================
KACHELN AUF KLEINEN BILDSCHIRMEN (Saman 2026-08-17)
Auf dem iPhone ragten die Paket-Karten rechts aus dem Bild. Zwei
Ursachen: die Spur "1fr" schrumpft nie unter den Mindestinhalt, und
die Karte trug auch bei 375px noch 93px Innenabstand, also fast ein
Drittel der Breite. Beides ist hier behoben. Die Kopf-Bloecke folgen
ueber die Variablen automatisch.
============================================================ */
@media (max-width: 980px) {
.v2-packages__grid,
.v2-bausteine {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 620px) {
.v2-packages__grid > .v2-package {
--kachel-pad-x: 1.35rem;
--kachel-pad-oben: 2.2rem;
}
.v2-bausteine > .v2-netz {
--kachel-pad-x: 1.35rem;
--kachel-pad-oben: 1.9rem;
}
.v2-flex-band {
--kachel-pad-x: 1.35rem;
--kachel-pad-oben: 1.6rem;
}
.v2-package-hint { --kachel-pad-x: 1.35rem; }
.v2-vergleich,
.v2-flex-beispiel {
padding-left: 1.35rem;
padding-right: 1.35rem;
}
/* Das Kopfband zieht mit dem breiteren Seitenabstand mit. Mit den
-1.1rem aus der 640er-Regel endete es am iPhone links und rechts
4 px vor dem Kachelrahmen (gefunden 15.09.2026). */
.v2-vergleich__kopf {
margin-left: -1.35rem;
margin-right: -1.35rem;
padding-left: 1.35rem;
padding-right: 1.35rem;
}
/* Der Knopf im Kartenfuss zielt am Handy auf den Daumen. */
.v2-package__fuss { justify-content: stretch; }
.v2-package__cta { width: 100%; text-align: center; }
}
/* Die zwei Zeilen ueber dem Hero-Titel stehen links und rechts. Auf sehr
schmalen Geraeten, etwa dem iPhone SE mit 320px, passen sie nicht
nebeneinander und die rechte Zeile lief aus dem Bild. Dort brechen sie
jetzt um und stehen mittig untereinander (Saman 2026-08-17). */
@media (max-width: 400px) {
.v2-hero__split {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.4rem;
letter-spacing: 0.22em;
}
}
/* Der Datenschutz-Hinweis unter dem Kontaktformular lief auf breiten
Bildschirmen ueber 104 Zeichen je Zeile. Er ist zwar klein gesetzt,
aber lesbar soll er bleiben (Saman 2026-08-17). */
.contact-form > p {
max-width: 72ch;
}
/* ============================================================
FUSSZEILE AUF DEM HANDY (Saman 2026-08-17)
Die Meta-Zeile ist am Desktop eine Reihe mit Trennpunkten. Auf dem
Handy brach sie mitten in den Trennern um: ein Punkt hing am
Zeilenende, der Strich vor "Impressum" stand allein am Zeilenanfang.
Unter 620px wird daraus eine gestapelte, mittige Liste ohne Trenner.
============================================================ */
@media (max-width: 620px) {
.site-footer--slim .site-footer__slim-inner {
flex-direction: column;
align-items: center;
gap: 1.1rem;
}
.site-footer--slim .site-footer__slim-nav {
justify-content: center;
gap: 0.9rem 1.1rem;
}
.site-footer--slim .site-footer__slim-meta {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.55rem;
}
/* Der senkrechte Strich trennt am Desktop zwei Gruppen. Untereinander
trennt der Zeilenumbruch, der Strich stoert dort nur. */
.site-footer--slim .site-footer__legal {
padding-left: 0;
margin-left: 0;
border-left: 0;
}
/* Der Punkt, den das Zustimmungs-Skript vor die Cookie-Einstellungen
haengt, wird untereinander zum Fremdkoerper. */
.site-footer--slim .site-footer__slim-meta > span[aria-hidden="true"] {
display: none;
}
}
/* Der Trenner vor "Wien" gehoert zur Desktop-Reihe. Er steckte frueher im
Text und stand auf dem Handy allein am Zeilenanfang. */
@media (min-width: 621px) {
.site-footer__ort::before {
content: "· ";
}
}
/* Die zwei Hero-Zeilen stehen am Desktop links und rechts. Untereinander
gestapelt wirkte die Links-Rechts-Ausrichtung wie ein Versatz, deshalb
dort mittig (Saman 2026-08-17). */
@media (max-width: 400px) {
.v2-hero__split span:first-child,
.v2-hero__split span:last-child {
text-align: center;
}
}
/* Ein Verweis mitten im Satz muss die Groesse des Satzes uebernehmen.
.v2-link ist fuer allein stehende Verweise gebaut und brachte sonst
seine eigene, kleinere Groesse samt Sperrung mit. */
p .v2-link,
li .v2-link,
.v2-lead .v2-link,
.v2-body .v2-link {
font-size: inherit;
letter-spacing: inherit;
font-weight: inherit;
}
/* Auf dem Tablet bleiben die zwei Service-Modelle nebeneinander
(Saman 2026-08-17). Bis 980px stapelten sie, dadurch war der Vergleich
weg und eine Karte wurde auf einem iPad 692px breit. Zwei Spalten
funktionieren bis hinunter zu 720px, darunter ist eine Spalte richtig.
Zwischen 720 und 900px brauchen die Karten weniger Innenabstand,
sonst bleibt fuer den Text zu wenig uebrig. */
@media (min-width: 721px) and (max-width: 980px) {
.v2-packages__grid,
.v2-bausteine {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.1rem;
}
.v2-packages__grid > .v2-package {
--kachel-pad-x: 1.5rem;
--kachel-pad-oben: 2.4rem;
}
.v2-bausteine > .v2-netz {
--kachel-pad-x: 1.4rem;
--kachel-pad-oben: 1.9rem;
}
}
@media (max-width: 720px) {
.v2-packages__grid,
.v2-bausteine {
grid-template-columns: minmax(0, 1fr);
}
}
/* ============================================================
CTA-BAENDER · Flex-Zeile und Projekt-Hinweis sind ein Bauteil
Rueckmeldung Saman 2026-08-20: die zwei Baender unter den
Service-Modellen sahen unterschiedlich aus, obwohl sie dieselbe
Aufgabe haben. Beide bekommen jetzt dieselbe Flaeche, denselben
Innenabstand und dieselbe Mindesthoehe, damit sie als Paar lesen.
============================================================ */
.v2-flex-band__zeile:only-child,
.v2-package-hint {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1.25rem, 3vw, 2.5rem);
--band-h: 7.65rem;
padding: 1.8rem var(--kachel-pad-x, 2.4rem);
background: rgba(27, 58, 94, 0.06);
}
/* Beide Baender sollen exakt gleich hoch sein. Beim Flex-Band sitzt der
Rahmen eine Ebene weiter aussen, deshalb kommen dort zwei Pixel weg. */
.v2-flex-band__zeile:only-child { min-height: calc(var(--band-h) - 2px); }
.v2-package-hint {
min-height: var(--band-h);
border: 1px solid var(--v2-blue);
margin-top: 1.5rem;
}
.v2-package-hint p { color: var(--v2-ink); }
/* Sobald der Knopf dem Text den Platz wegnimmt, steht er unter dem Text.
Nebeneinander lohnt sich erst ab knapp 1200px, davor quetscht die feste
Knopfbreite den Satz in einen schmalen Streifen. */
@media (max-width: 1180px) {
.v2-flex-band__zeile:only-child,
.v2-package-hint {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 1.25rem;
}
.v2-package-hint p { max-width: none; }
}
/* Am Handy ist die Breite knapp. Etwas weniger Innenabstand und etwas
engere Laufweite halten auch die langen Beschriftungen einzeilig, damit
alle Knoepfe gleich hoch bleiben. */
@media (max-width: 620px) {
.v2-btn {
width: 100%;
padding-left: 1.25rem;
padding-right: 1.25rem;
font-size: var(--v2-fs-mikro);
letter-spacing: 0.1em;
}
.v2-mosaic__content > .v2-btn { align-self: stretch; }
/* Die Textspalte im Mosaik hatte am Handy mehr Innenabstand als jede
Kachel. Weniger Rand heisst mehr Platz fuer die Beschriftung. */
.v2-mosaic__content { padding: 2rem 1.5rem; }
}
/* iPhone SE und aehnlich schmale Geraete: noch etwas enger, damit auch die
langen Beschriftungen einzeilig bleiben und alle Knoepfe gleich hoch sind. */
@media (max-width: 400px) {
.v2-btn {
padding-left: 0.9rem;
padding-right: 0.9rem;
letter-spacing: 0.07em;
}
}
/* ============================================================
SPRACHUMSCHALTER · kleine Flagge in der Fusszeile
Entscheid Saman 2026-08-20: Die englische Fassung soll nicht
auffallen, solange es keine englischen Anfragen gibt. Die Flagge
steht deshalb ganz unten in der Meta-Zeile, gleich gross wie das
LinkedIn-Zeichen daneben.
============================================================ */
.site-footer__sprache a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 14px;
border-radius: 2px;
overflow: hidden;
opacity: 0.75;
transition: opacity 200ms ease, transform 200ms ease;
vertical-align: middle;
}
.site-footer__sprache a:hover,
.site-footer__sprache a:focus-visible {
opacity: 1;
transform: translateY(-1px);
}
.site-footer__sprache svg {
width: 100%;
height: 100%;
display: block;
}
/* ============================================================
SEHR SCHMALE GERAETE (iPhone SE 1, 320px)
Gefunden am 21.08.2026 beim Groessendurchgang: Logo, die zwei Kreise
und das Menue-Zeichen brauchen zusammen 294px, die schwebende Leiste
bietet bei 320px aber nur 273px. Das Menue-Zeichen wurde deshalb
rechts abgeschnitten, die Navigation war auf diesen Geraeten nicht
erreichbar. Die Leiste rueckt hier enger an den Rand und die Ziele
werden etwas kleiner, bleiben aber ueber der Tippgroesse von 36px.
============================================================ */
@media (max-width: 360px) {
.v2-header {
left: 0.5rem;
right: 0.5rem;
gap: 0.5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.site-header__actions { gap: 0.4rem; margin-left: 0; }
.v2-header .v2-btn--support,
.v2-header .v2-btn--erstgespraech { width: 40px; height: 40px; }
.v2-btn--support__icon,
.v2-header .v2-btn--erstgespraech svg { width: 18px; height: 18px; }
.nav-toggle { width: 36px; height: 36px; }
}
/* ============================================================
ABLAUF-ZEITLEISTE · vier Schritte auf einer Haarlinie
Ersetzt 21.08.2026 die Aufklapper "Ablauf und Feinheiten" auf der
Seite IT-Sicherheitsanalyse. Entscheid Saman: Der ausgeschriebene
Ablauf zeigte die eigene Arbeitsweise so genau, dass ein Mitbewerber
sie abschreiben koennte. Die Zeitleiste sagt, dass es einen Ablauf
gibt, ohne ihn beizubringen. Kein Kasten, nur Linie und Marken,
damit sie zur Kachelsprache passt.
============================================================ */
.v2-ablauf__titel {
font-family: var(--v2-sans);
font-size: var(--v2-fs-mikro);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--v2-blue);
margin: 1.75rem 0 1.1rem;
}
.v2-ablauf {
display: flex;
list-style: none;
margin: 0;
padding: 0;
/* Die Kachel ist eine Flex-Spalte und schrumpft ihre Kinder sonst auf
Inhaltsbreite. Ohne diese zwei Zeilen sitzt die Leiste in der linken
Haelfte statt ueber die ganze Kachel zu laufen. */
width: 100%;
align-self: stretch;
}
.v2-ablauf li {
flex: 1 1 0;
position: relative;
padding: 0.9rem 0.75rem 0 0;
border-top: 1px solid rgba(27, 58, 94, 0.25);
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
line-height: 1.4;
color: var(--v2-ink-soft);
}
.v2-ablauf li:last-child { padding-right: 0; }
/* Die Marke ist ein feiner Strich, abwechselnd nach oben und nach unten.
14.09.2026, Entscheid Saman: vorher sassen hier 7 px Quadrate, das war
ihm zu schwer. Der Strich ueberlappt die Linie um 1 px, damit er an
ihr haengt statt daneben zu schweben. */
.v2-ablauf li::before {
content: "";
position: absolute;
top: -9px;
left: 0;
width: 1px;
height: 9px;
background: var(--v2-blue);
}
.v2-ablauf li:nth-child(even)::before { top: -1px; }
/* Ob vier Schritte nebeneinander aufgehen, haengt an der Breite der Kachel
und nicht an der des Fensters: bei zwei Spalten ist die Kachel am Tablet
schmaler als am Handy in einer Spalte. Deshalb eine Container-Abfrage.
Browser ohne Unterstuetzung behalten die waagrechte Leiste, die bricht
nicht, sie steht nur enger. */
.v2-netz { container-type: inline-size; }
@container (max-width: 470px) {
.v2-ablauf { flex-direction: column; }
.v2-ablauf li {
border-top: 0;
border-left: 1px solid rgba(27, 58, 94, 0.25);
padding: 0 0 0.9rem 0.9rem;
}
.v2-ablauf li:last-child { padding-bottom: 0; border-left-color: transparent; }
.v2-ablauf li::before { top: 8px; left: -9px; width: 9px; height: 1px; }
.v2-ablauf li:nth-child(even)::before { top: 8px; left: -1px; }
}
@media (max-width: 620px) {
/* Rueckfallebene fuer Browser ohne Container-Abfragen. */
.v2-ablauf { flex-direction: column; }
.v2-ablauf li {
border-top: 0;
border-left: 1px solid rgba(27, 58, 94, 0.25);
padding: 0 0 0.9rem 0.9rem;
}
.v2-ablauf li:last-child { padding-bottom: 0; border-left-color: transparent; }
.v2-ablauf li::before { top: 8px; left: -9px; width: 9px; height: 1px; }
.v2-ablauf li:nth-child(even)::before { top: 8px; left: -1px; }
}
/* Kleine Leiste in den Kacheln (14.09.2026, Entscheid Saman): Die
Beschriftung steht auf der Seite ihres Strichs, wie bei der breiten
Leiste unten. Waagrecht drei Rasterzeilen (Text oben, Linie, Text
unten), per subgrid fuer alle Stationen gleich hoch. Die Beschriftung
steckt dafuer in einem span. Senkrecht steht die Linie in der Mitte,
ungerade Stationen links davon, gerade rechts. Browser ohne subgrid
behalten waagrecht die alte Leiste mit allem unter der Linie. */
@supports (grid-template-rows: subgrid) {
@media (min-width: 621px) {
@container (min-width: 471px) {
.v2-ablauf:not(.v2-ablauf--breit) {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
grid-template-rows: auto 1px auto;
}
.v2-ablauf:not(.v2-ablauf--breit) li {
grid-row: 1 / -1;
display: grid;
grid-template-rows: subgrid;
grid-template-columns: minmax(0, 1fr);
padding: 0;
border-top: 0;
}
.v2-ablauf:not(.v2-ablauf--breit) li::after {
content: "";
grid-row: 2;
background: rgba(27, 58, 94, 0.25);
}
.v2-ablauf:not(.v2-ablauf--breit) li::before { grid-row: 2; top: -8px; }
.v2-ablauf:not(.v2-ablauf--breit) li:nth-child(even)::before { top: 0; }
.v2-ablauf:not(.v2-ablauf--breit) li > span { padding-right: 0.75rem; }
.v2-ablauf:not(.v2-ablauf--breit) li:nth-child(odd) > span { grid-row: 1; align-self: end; margin-bottom: 0.9rem; }
.v2-ablauf:not(.v2-ablauf--breit) li:nth-child(even) > span { grid-row: 3; margin-top: 0.9rem; }
}
}
}
@container (max-width: 470px) {
.v2-ablauf:not(.v2-ablauf--breit) li {
display: grid;
grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
padding: 0;
border-left: 0;
}
.v2-ablauf:not(.v2-ablauf--breit) li::after {
content: "";
grid-column: 2;
grid-row: 1;
background: rgba(27, 58, 94, 0.25);
}
/* Die Linie beginnt am ersten und endet am letzten Strich */
.v2-ablauf:not(.v2-ablauf--breit) li:first-child::after { margin-top: 9px; }
.v2-ablauf:not(.v2-ablauf--breit) li:last-child::after { align-self: start; height: 10px; }
.v2-ablauf:not(.v2-ablauf--breit) li::before,
.v2-ablauf:not(.v2-ablauf--breit) li:nth-child(even)::before {
grid-column: 2;
grid-row: 1;
top: 9px;
left: -8px;
width: 9px;
height: 1px;
}
.v2-ablauf:not(.v2-ablauf--breit) li:nth-child(even)::before { left: 0; }
.v2-ablauf:not(.v2-ablauf--breit) li > span { grid-row: 1; }
.v2-ablauf:not(.v2-ablauf--breit) li:nth-child(odd) > span { grid-column: 1; justify-self: end; text-align: right; margin-right: 0.9rem; }
.v2-ablauf:not(.v2-ablauf--breit) li:nth-child(even) > span { grid-column: 3; justify-self: start; margin-left: 0.9rem; }
.v2-ablauf:not(.v2-ablauf--breit) li:not(:last-child) > span { margin-bottom: 0.9rem; }
}
@media (max-width: 620px) {
.v2-ablauf:not(.v2-ablauf--breit) li {
display: grid;
grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
padding: 0;
border-left: 0;
}
.v2-ablauf:not(.v2-ablauf--breit) li::after {
content: "";
grid-column: 2;
grid-row: 1;
background: rgba(27, 58, 94, 0.25);
}
/* Die Linie beginnt am ersten und endet am letzten Strich */
.v2-ablauf:not(.v2-ablauf--breit) li:first-child::after { margin-top: 9px; }
.v2-ablauf:not(.v2-ablauf--breit) li:last-child::after { align-self: start; height: 10px; }
.v2-ablauf:not(.v2-ablauf--breit) li::before,
.v2-ablauf:not(.v2-ablauf--breit) li:nth-child(even)::before {
grid-column: 2;
grid-row: 1;
top: 9px;
left: -8px;
width: 9px;
height: 1px;
}
.v2-ablauf:not(.v2-ablauf--breit) li:nth-child(even)::before { left: 0; }
.v2-ablauf:not(.v2-ablauf--breit) li > span { grid-row: 1; }
.v2-ablauf:not(.v2-ablauf--breit) li:nth-child(odd) > span { grid-column: 1; justify-self: end; text-align: right; margin-right: 0.9rem; }
.v2-ablauf:not(.v2-ablauf--breit) li:nth-child(even) > span { grid-column: 3; justify-self: start; margin-left: 0.9rem; }
.v2-ablauf:not(.v2-ablauf--breit) li:not(:last-child) > span { margin-bottom: 0.9rem; }
}
/* Breite Variante fuer einen ganzen Abschnitt statt fuer eine Kachel.
09.09.2026: Der Ablauf auf /managed-services/ stand als Zeilenliste mit
Beschreibungstext. Jetzt derselbe Zeitstrahl wie auf den Projektseiten,
nur ueber die volle Inhaltsbreite und deshalb eine Spur groesser. */
.v2-ablauf--breit { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.v2-ablauf--breit li {
display: flex;
flex-direction: column;
gap: 0.55rem;
font-size: var(--v2-fs-body);
color: var(--v2-ink);
padding: 1.1rem 1.25rem 0 0;
}
.v2-ablauf__icon {
display: block;
width: 26px;
height: 26px;
}
/* Stationen auf der Seite ihres Strichs (14.09.2026, Entscheid Saman).
Ungerade Stationen stehen ueber der Linie, gerade darunter. Das Symbol
liegt jeweils an der Linie, die Beschriftung aussen, oben also
gespiegelt. Die Leiste ist dafuer ein Raster mit fuenf Zeilen: Text
oben, Symbol oben, Linie, Symbol unten, Text unten. Die Stationen teilen
sich diese Zeilen per subgrid, so liegen alle Symbole und Texte einer
Seite auf einer Hoehe, auch wenn eine Beschriftung umbricht. Browser
ohne subgrid behalten die alte Leiste mit allem unter der Linie. */
@supports (grid-template-rows: subgrid) {
@media (min-width: 621px) {
.v2-ablauf--breit {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
grid-template-rows: auto auto 1px auto auto;
}
.v2-ablauf--breit li {
grid-row: 1 / -1;
display: grid;
grid-template-rows: subgrid;
/* Ohne feste Spalte macht ein langes Wort wie "Gesundheitscheck"
die Station breiter, dann liegt ihre Linie ueber der naechsten
und wird dort doppelt so dunkel. Das Wort darf ueberstehen, auf
seiner Seite ist die Nachbarspalte frei. */
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding: 0;
border-top: 0;
}
/* Die Linie ist jetzt die mittlere Rasterzeile */
.v2-ablauf--breit li::after {
content: "";
grid-row: 3;
background: rgba(27, 58, 94, 0.25);
}
/* Der Strich haengt an dieser Zeile statt am oberen Rand */
.v2-ablauf--breit li::before { grid-row: 3; top: -8px; }
.v2-ablauf--breit li:nth-child(even)::before { top: 0; }
.v2-ablauf--breit li > span { padding-right: 1.25rem; }
.v2-ablauf--breit li:nth-child(odd) > span { grid-row: 1; align-self: end; margin-bottom: 0.55rem; }
.v2-ablauf--breit li:nth-child(odd) > .v2-ablauf__icon { grid-row: 2; align-self: end; margin-bottom: 1.1rem; }
.v2-ablauf--breit li:nth-child(even) > .v2-ablauf__icon { grid-row: 4; margin-top: 1.1rem; }
.v2-ablauf--breit li:nth-child(even) > span { grid-row: 5; margin-top: 0.55rem; }
}
}
/* Am Handy steht die Linie senkrecht in der Mitte. Ungerade Stationen
links davon, rechtsbuendig, gerade rechts davon. */
@media (max-width: 620px) {
.v2-ablauf--breit li {
display: grid;
grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 0;
padding: 0;
border-left: 0;
}
.v2-ablauf--breit li::after {
content: "";
grid-column: 2;
grid-row: 1 / -1;
background: rgba(27, 58, 94, 0.25);
}
/* Die Linie beginnt am ersten und endet am letzten Strich */
.v2-ablauf--breit li:first-child::after { margin-top: 12px; }
.v2-ablauf--breit li:last-child::after { grid-row: 1; align-self: start; height: 13px; }
.v2-ablauf--breit li::before,
.v2-ablauf--breit li:nth-child(even)::before {
grid-column: 2;
grid-row: 1;
top: 12px;
left: -8px;
width: 9px;
height: 1px;
}
.v2-ablauf--breit li:nth-child(even)::before { left: 0; }
.v2-ablauf--breit li:nth-child(odd) > * { grid-column: 1; justify-self: end; text-align: right; margin-right: 1rem; }
.v2-ablauf--breit li:nth-child(even) > * { grid-column: 3; justify-self: start; margin-left: 1rem; }
.v2-ablauf--breit li > .v2-ablauf__icon { grid-row: 1; }
.v2-ablauf--breit li > span { grid-row: 2; margin-top: 0.55rem; }
.v2-ablauf--breit li:not(:last-child) > span { margin-bottom: 1.1rem; }
}
/* ============================================================
BAUSTEIN-RASTER · alle Bausteine in einem Muster
09.09.2026: Vorher standen zwei grosse Karten und darunter eine
zweite Sorte Kacheln, beide sahen anders aus. Jetzt ein Raster:
Zeichen wie auf der Startseite, Name, ein getoentes Info-Feld mit
dem Wichtigsten, unten die Abrechnungsart. Guideline C3: eckig,
1 px Tintenblau, kein Schatten. Gefuellt ist nur das Info-Feld,
und zwar in der erlaubten Toenung rgba(27, 58, 94, 0.06).
============================================================ */
.v2-baustein-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
}
.v2-baustein-kachel {
display: flex;
flex-direction: column;
gap: 0.9rem;
background: transparent;
border: 1px solid var(--v2-line);
padding: 1.7rem 1.6rem 1.5rem;
}
.v2-baustein-kachel__icon {
display: block;
width: 32px;
height: 32px;
flex-shrink: 0;
}
.v2-baustein-kachel h3 {
font-family: var(--v2-sans);
font-size: var(--v2-fs-h6);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--v2-ink);
margin: 0;
}
.v2-baustein-kachel__info {
list-style: none;
margin: 0;
padding: 1rem 1.1rem;
background: rgba(27, 58, 94, 0.06);
display: grid;
gap: 0.55rem;
/* Das Feld traegt die Kachelhoehe, damit die Abrechnung in allen
Kacheln einer Reihe auf derselben Linie sitzt. */
flex: 1 1 auto;
align-content: start;
}
.v2-baustein-kachel__info li {
position: relative;
padding-left: 1rem;
font-size: var(--v2-fs-klein);
line-height: 1.5;
color: var(--v2-ink-soft);
}
.v2-baustein-kachel__info li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 5px;
height: 5px;
background: var(--v2-blue);
}
.v2-baustein-kachel__abrechnung {
font-family: var(--v2-sans);
font-size: var(--v2-fs-mikro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--v2-blue);
font-weight: 500;
}
@media (max-width: 980px) {
.v2-baustein-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.v2-baustein-grid { grid-template-columns: 1fr; }
}
/* ============================================================
BAUKASTEN-ZEILE · Erweiterungen auf der Startseite
09.09.2026: Die Bausteine kamen auf der Startseite gar nicht vor,
wer nur dort las, erfuhr von "Server und Speicher im Haus" nichts.
Jetzt eine schmale Zeile unter dem Flex-Band, in derselben Familie
wie Vergleichskachel und Flex. Nur die Namen, die Details stehen
auf /managed-services/#bausteine.
============================================================ */
.v2-flex-band--baukasten { margin-top: 1.5rem; }
.v2-baukasten-zeile {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.7rem;
}
.v2-baukasten-zeile li {
display: flex;
align-items: center;
gap: 0.85rem;
background: transparent;
border: 1px solid var(--v2-line);
padding: 0.95rem 1.1rem;
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
line-height: 1.3;
font-weight: 500;
color: var(--v2-ink);
}
/* Die Phosphor-Dateien sind in Tintenblau gestrichelt, sie brauchen keine
eigene Farbregel. Feste Groesse, damit die Titel auf einer Grundlinie
sitzen, egal ob ein- oder zweizeilig. */
.v2-baukasten-zeile__icon {
display: block;
width: 28px;
height: 28px;
flex-shrink: 0;
}
@media (max-width: 980px) {
.v2-baukasten-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.v2-baukasten-zeile { grid-template-columns: 1fr; }
}
/* ============================================================
GEBUERSTETES SILBER · Grundflaeche
10.09.2026: Der Grundton ist von Silber auf ein kuehles Silber
gewechselt. Damit die Flaeche nicht tot wirkt, liegt eine sehr
feine Buerstenstruktur darauf, wie bei gebuerstetem Aluminium.
Zwei Entscheidungen, die man beim Nachbauen kennen sollte:
1. Der Verlauf haengt am Sichtfenster (background-attachment:
fixed), nicht am Element. Sonst bekaeme jeder Abschnitt sein
eigenes Lichtband und die Seite saehe aus wie gestapelte
Bleche. So ist es eine durchgehende Platte, ueber die der
Inhalt scrollt.
2. Nur ab 861px. Am Handy bleibt die Flaeche glatt: fixed ist
auf iOS unzuverlaessig und kostet beim Scrollen Leistung,
und die 1px-Struktur verschwindet auf kleinen Bildschirmen
ohnehin. Der Grundton allein traegt dort.
Die Struktur ist bewusst schwach (Weiss bei 0.09, Tinte bei
0.005 auf 4px Abstand, gemessen rund drei Stufen Unterschied). Sie soll Material andeuten, nicht
auffallen. Wer sie sucht, sieht sie; wer liest, nicht.
============================================================ */
@media (min-width: 861px) {
body[data-page="landing-v2"],
body[data-page="landing-v2"] main,
.v2-section--paper,
.v2-section:has(.v2-packages__grid),
.v2-hero--light,
body[data-page="landing-v2"] .hero-page,
body[data-page="landing-v2"] .site-footer--slim {
background-image:
repeating-linear-gradient(90deg,
rgba(255, 255, 255, 0.09) 0 1px,
rgba(27, 58, 94, 0.005) 1px 4px),
linear-gradient(135deg, #e8ebee 0%, #e2e5e9 32%, #e7eaee 54%, #e1e4e9 78%, #e6e9ed 100%);
background-attachment: fixed, fixed;
background-size: auto, cover;
}
/* Die Karten bleiben Karten: heller, glatt, ohne Struktur.
Sonst verschwimmt die Trennung zwischen Grund und Inhalt. */
.v2-vergleich,
.v2-flex-band,
.v2-package-hint,
.v2-packages__grid > .v2-package,
.v2-bausteine > .v2-netz {
background-image: none;
}
}
/* ============================================================
BILDZEILEN · die drei Bild-Text-Zeilen der Startseite
14.09.2026, Entscheid Saman: Portraet, Arbeitsplatz-Alltag und Schutz
auf vier Ebenen folgen einem Raster statt drei eigenen Massen. Vorher
stand das Portraet in einem 1-zu-1,1-Raster mit Abstand, die zwei
Mosaike in 1 zu 1 ohne Abstand, und alle drei Bilder waren verschieden
hoch.
Jetzt fuer alle drei gleich:
- zwei gleich breite Spalten, derselbe Abstand zwischen Bild und Text
- Bildformat 3:2, Text und Bild oben buendig (15.09.2026, vorher 4:3
und Text mittig, da schwebte der Text neben dem Bild)
- Bilder im Zickzack links, rechts, links
- keine eigene Flaeche, Text dunkel auf dem Silber
- zwischen den Zeilen jeweils ein Abschnittsabstand (--v2-pad-section)
Am Handy (15.09.2026, Entscheid Saman): Ueberschrift zuerst, darunter
das Bild flacher in 16:9, danach der Rest. Vorher stand das Bild ueber
der Ueberschrift und wirkte losgeloest vom Text.
============================================================ */
.v2-bildzeile .v2-intro__photo,
.v2-bildzeile .v2-mosaic__image {
position: relative;
/* Safari berechnet die Hoehe aus dem Seitenverhaeltnis nur bei fester
Breite. Ohne width war die leere Bildflaeche von Arbeitsplatz und
Cyberschutz dort 0 px hoch und das Bild fehlte (iPhone und iPad,
gefunden 14.09.2026). Chrome rechnet auch ohne. */
width: 100%;
aspect-ratio: 3 / 2;
min-height: 0;
height: auto;
max-height: none;
}
/* Zusaetzlich zur festen Breite traegt die Bildflaeche ihre Hoehe ueber
einen Abstandhalter statt nur ueber aspect-ratio. Das versteht jeder
Safari, auch aeltere iPhones, auf denen die Bilder am 14.09.2026 trotz
width: 100% noch fehlten. */
.v2-bildzeile .v2-mosaic__image {
aspect-ratio: auto;
}
.v2-bildzeile .v2-mosaic__image::before {
content: "";
display: block;
padding-top: 66.6667%;
}
.v2-bildzeile .v2-intro__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.v2-bildzeile .v2-mosaic__content {
background: transparent;
padding: 0;
color: var(--v2-ink);
}
/* Eine Schriftleiter fuer alle drei Zeilen: Ueberschrift wie die
Mosaik-Ueberschriften (--v2-fs-h3), Einleitung wie deren Einleitung
(--v2-fs-lead, Zeilenhoehe 1.55). Vorher stand "Hi, ich bin Saman" eine
Stufe kleiner und mit anderer Zeilenhoehe. */
.v2-bildzeile .v2-intro__text h3 {
font-size: var(--v2-fs-h3);
line-height: 1.2;
margin-bottom: 1rem;
}
.v2-bildzeile .v2-intro__text > p {
line-height: 1.55;
}
@media (min-width: 981px) {
.v2-intro__grid.v2-bildzeile,
.v2-mosaic.v2-bildzeile {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.75rem, 5vw, 3.5rem);
align-items: start;
}
.v2-bildzeile .v2-intro__text { align-self: start; }
}
@media (max-width: 980px) {
.v2-intro__grid.v2-bildzeile,
.v2-mosaic.v2-bildzeile {
row-gap: 0;
}
.v2-bildzeile .v2-intro__photo { aspect-ratio: 16 / 9; }
.v2-bildzeile .v2-mosaic__image::before { padding-top: 56.25%; }
/* Ueberschrift ueber dem Bild: Die Textspalte loest sich auf
(display: contents), ihre Teile ordnen sich direkt im Raster um das
Bild herum. Die Einblendung des Textblocks entfaellt dabei am Handy,
das Bild blendet weiter ein. */
.v2-bildzeile .v2-mosaic__content,
.v2-bildzeile .v2-intro__text {
display: contents;
}
.v2-mosaic.v2-bildzeile { grid-template-areas: "kopf" "bild" "punkte"; }
.v2-bildzeile .v2-mosaic__head { grid-area: kopf; margin-bottom: 1.25rem; }
.v2-bildzeile .v2-mosaic__image { grid-area: bild; margin-bottom: 1.5rem; }
.v2-bildzeile .v2-mosaic__points { grid-area: punkte; }
.v2-bildzeile .v2-intro__text > * { order: 3; }
.v2-bildzeile .v2-intro__text > h3 { order: 1; margin-bottom: 1.25rem; }
.v2-bildzeile .v2-intro__photo { order: 2; margin-bottom: 1.5rem; }
.v2-bildzeile .v2-intro__text > .v2-link { justify-self: start; }
}
/* ============================================================
15.09.2026 · Herausforderungen, Coral-Linie, weniger Betonung,
Portraet am Handy, Fusszeile (alles Entscheid Saman)
============================================================ */
/* --- Schwebender Knopf "Kennt ihr das?" und sein Fenster. Die Geschichte
zu den Herausforderungen im Alltag oeffnet sich erst auf Klick, am Desktop
als Fenster ueber dem Knopf, am Handy von unten. Der Coral-Punkt am Symbol
ist ein Hinweispunkt im Sinn der Guideline A5. Skript und Texte stehen in
assets/js/herausforderungen.js. --- */
.v2-alltag-knopf {
position: fixed;
right: clamp(0.9rem, 2vw, 1.5rem);
bottom: clamp(0.9rem, 2vw, 1.5rem);
z-index: 240;
display: inline-flex;
align-items: center;
gap: 0.6rem;
height: 52px;
padding: 0 1.15rem 0 0.95rem;
border: 1px solid var(--v2-blue);
border-radius: 999px;
background: rgba(244, 246, 248, 0.94);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: var(--v2-blue);
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
font-weight: 500;
line-height: 1;
box-shadow: 0 6px 20px rgba(27, 58, 94, 0.14);
cursor: pointer;
/* --knopf-hoch setzt das Skript, sobald Hinweis oder Fusszeile ins Bild
kommen. Ohne Uebergang, sonst haengt der Knopf beim Scrollen hinterher. */
transform: translateY(calc(var(--knopf-hoch, 0px) * -1));
transition: box-shadow 200ms ease, opacity 200ms ease, border-color 200ms ease;
}
.v2-alltag-knopf:hover { box-shadow: 0 10px 26px rgba(27, 58, 94, 0.22); border-color: var(--v2-ink); }
.v2-alltag-knopf:focus-visible { outline: 2px solid var(--v2-blue); outline-offset: 3px; }
.v2-alltag-knopf__icon { position: relative; display: inline-flex; width: 22px; height: 22px; }
.v2-alltag-knopf__icon svg { width: 22px; height: 22px; }
.v2-alltag-knopf__punkt {
position: absolute;
top: -1px;
right: -3px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--v2-coral);
box-shadow: 0 0 0 2px rgba(244, 246, 248, 0.94);
}
html.alltag-offen .v2-alltag-knopf,
html.alltag-ausloeser-sichtbar .v2-alltag-knopf,
body.mobile-panel-open .v2-alltag-knopf,
body:has(.samit-consent.is-visible) .v2-alltag-knopf,
body:has(.v2-support-overlay.is-open) .v2-alltag-knopf {
opacity: 0;
pointer-events: none;
}
.v2-alltag-fenster {
position: fixed;
inset: 0;
z-index: 260;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: clamp(0.9rem, 2vw, 1.5rem);
background: rgba(14, 15, 18, 0);
transition: background-color 320ms ease;
}
.v2-alltag-fenster[hidden] { display: none; }
.v2-alltag-fenster.is-open { background: rgba(14, 15, 18, 0.18); }
.v2-alltag-fenster__panel {
position: relative;
width: min(440px, 100%);
max-height: calc(100vh - 3rem);
overflow-y: auto;
background: var(--v2-paper);
border: 1px solid var(--v2-blue);
color: var(--v2-ink);
padding: 2rem 1.75rem 1.75rem;
box-shadow: 0 24px 60px rgba(14, 15, 18, 0.18);
transform-origin: bottom right;
transform: translateY(12px) scale(0.92);
opacity: 0;
transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}
.v2-alltag-fenster.is-open .v2-alltag-fenster__panel { transform: none; opacity: 1; }
.v2-alltag-fenster__panel:focus { outline: none; }
.v2-alltag-fenster__zu {
position: absolute;
top: 0.6rem;
right: 0.6rem;
width: 38px;
height: 38px;
border: 0;
background: none;
color: var(--v2-ink-soft);
cursor: pointer;
display: grid;
place-items: center;
}
.v2-alltag-fenster__zu:hover { color: var(--v2-ink); }
.v2-alltag-fenster__zu:focus-visible { outline: 2px solid var(--v2-blue); outline-offset: 2px; }
.v2-alltag-fenster__zu svg { width: 18px; height: 18px; }
.v2-alltag-fenster .v2-eyebrow { margin-bottom: 1rem; }
.v2-alltag-fenster__titel {
font-family: var(--v2-display);
font-weight: 400;
font-size: clamp(22px, 1.9vw, 27px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--v2-ink);
margin: 0 0 1rem;
padding-right: 2rem;
text-wrap: balance;
}
.v2-alltag-fenster p {
font-size: var(--v2-fs-body);
line-height: 1.6;
color: var(--v2-ink-soft);
margin: 0 0 0.9rem;
}
.v2-alltag-fenster .v2-alltag-fenster__loesung { color: var(--v2-ink); margin-bottom: 0; }
.v2-alltag-fenster__aktionen {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
margin-top: 1.5rem;
}
.v2-alltag-fenster__aktionen .v2-btn { width: 100%; }
@media (max-width: 620px) {
.v2-alltag-knopf { width: 52px; padding: 0; justify-content: center; }
.v2-alltag-knopf__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.v2-alltag-fenster { padding: 0; }
.v2-alltag-fenster__panel {
width: 100%;
max-height: 88vh;
border-left: 0;
border-right: 0;
border-bottom: 0;
padding: 1.75rem 1.35rem calc(1.5rem + env(safe-area-inset-bottom));
transform-origin: bottom center;
transform: translateY(100%);
opacity: 1;
}
html.alltag-offen,
html.alltag-offen body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
.v2-alltag-knopf,
.v2-alltag-fenster,
.v2-alltag-fenster__panel { transition: none; }
}
/* --- Kleine Ueberschriften: zierliche Coral-Linie darunter, nur so
breit wie das Wort. Ausnahme zur Coral-Regel, siehe Guideline A5.
Gilt fuer alle kleinen Ueberschriften der Seite, nicht fuer
Brotkrumen, Badges, Schlagworte an Akkordeons, Abrechnungshinweise
und Unterzeilen unter Modellnamen. --- */
.v2-eyebrow,
.v2-secthead__eyebrow,
.kicker,
.v2-netz__eyebrow,
.v2-ablauf__titel,
.v2-flex-beispiel__kicker,
.v2-service-item__step,
.hersteller__gruppe,
.doc-label {
width: -webkit-fit-content;
width: fit-content;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--v2-coral);
justify-self: start;
align-self: flex-start;
}
.v2-secthead__eyebrow { margin-bottom: 0.85rem; }
/* Gleiche Schriftstaerke und Farbe wie die Eyebrows */
.kicker,
.v2-netz__eyebrow,
.v2-ablauf__titel,
.v2-flex-beispiel__kicker,
.v2-service-item__step {
font-weight: 500;
color: var(--v2-ink-soft);
}
/* --- Formularfelder eckig wie Knoepfe und Kacheln (Guideline C3) --- */
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field textarea,
.form-field select { border-radius: 0; }
/* --- Ueberschriften der Rechtstexte in einer Zeile statt auf 32ch
umgebrochen, sonst steht die Linie unter einem Block --- */
.doc-label { max-width: none; }
.v2-baustein__foot .v2-service-item__step { display: block; margin-bottom: 0.6rem; }
/* --- Einleitungssatz unter "Worum ich mich kuemmere" auf der Startseite
(15.09.2026, ersetzt die "Zwei Versprechen") --- */
.v2-intro__versprechen .v2-eyebrow { margin-bottom: 1rem; }
/* Ohne Trennstrich und naeher am Link darueber, damit der Text neben dem
Portraet in der Bildhoehe bleibt wie in den anderen Bildzeilen */
.v2-intro__versprechen.v2-intro__alltag {
margin-top: clamp(1.75rem, 3vw, 2.5rem);
padding-top: 0;
border-top: 0;
}
/* Am Desktop bleibt der Text in allen drei Bildzeilen in der Hoehe des
Bildes: 3:2 ist die Mindesthoehe, wird die Textspalte bei schmaleren
Fenstern laenger, waechst das Bild mit und schneidet nur etwas mehr
vom Rand ab (15.09.2026, Entscheid Saman). */
@media (min-width: 981px) {
.v2-bildzeile .v2-intro__photo,
.v2-bildzeile .v2-mosaic__image { align-self: stretch; }
}
/* --- Haken mittig zur ersten Textzeile. Die Sammelregel oben setzt am
Symbol font-size: 0, damit rechnete top: 0.28em mit null und der Haken
klebte an der Oberkante (gefunden 15.09.2026 auf /projekte/website-erstellung/).
Mit geerbter Schrift rechnen em und lh wieder mit der Zeile des Punkts. --- */
.package-card__list li::before,
ul.lead > li::before,
.section__body > li::before,
.stack-criteria__list li::before,
.tw-tier__list li::before,
.tw-hours-card__list li::before,
.tw-efficiency__list li::before {
font-size: inherit;
line-height: inherit;
top: 0.3em;
top: calc(0.5lh - 6.5px);
}
/* --- Listen mit dem, was nicht enthalten ist: X statt Haken --- */
:root {
--v2-kreuz-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='0.7' y='0.7' width='12.6' height='12.6' rx='2.2' fill='none' stroke='%231B3A5E' stroke-width='1.2'/%3E%3Cpath d='M4.7 4.7 9.3 9.3M9.3 4.7 4.7 9.3' fill='none' stroke='%231B3A5E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
ul.liste--nicht > li::before { background-image: var(--v2-kreuz-box); }
/* --- Projektseite: drei Themen statt einer langen Liste (20.09.2026) --- */
.v2-projektgruppe { margin: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; }
.v2-projektgruppe:first-of-type { margin-top: 0; }
.v2-projektgruppe .v2-eyebrow { margin-bottom: 0.9rem; }
.v2-projektgruppe .v2-lead { max-width: 60ch; margin: 0; }
/* --- Druckfassung der Rechtstexte (20.09.2026). Der Kunde soll die
Bedingungen samt Muster-Widerrufsformular sauber ausdrucken und das
Formular ausfuellen koennen. --- */
/* --- Druck-Knopf fuer Dokumente, die der Kunde ausfuellen soll, etwa die
Widerrufsbelehrung. Seit 20.09.2026 nicht auf Impressum und Datenschutz,
dort braucht es ihn nicht (Entscheid Saman). --- */
.doc-aktionen { display: flex; justify-content: flex-end; margin: 0 0 1.5rem; }
.doc-aktionen:last-child { margin: 2rem 0 0; }
.doc-drucken {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.9rem;
border: 1px solid var(--v2-line-soft);
background: none;
color: var(--v2-ink-soft);
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
cursor: pointer;
transition: border-color 200ms ease, color 200ms ease;
}
.doc-drucken svg { width: 16px; height: 16px; flex: none; }
.doc-drucken:hover { border-color: var(--v2-blue); color: var(--v2-blue); }
.doc-drucken:focus-visible { outline: 2px solid var(--v2-blue); outline-offset: 3px; }
@media print {
.doc-aktionen,
header.site-header,
.mobile-panel,
.site-footer,
main ~ .pregruendung,
.v2-alltag-knopf,
.v2-alltag-fenster,
.samit-consent,
.skip-link,
.v2-hero__split,
.doc-print-hinweis { display: none !important; }
body { background: #fff !important; }
.v2-hero { min-height: 0 !important; padding: 0 0 0.5rem !important; }
.v2-hero__title { font-size: 22pt; }
.v2-hero__lead { font-size: 10.5pt; max-width: none !important; }
.doc-body { max-width: none !important; padding: 0 !important; }
.doc-section { break-inside: avoid; page-break-inside: avoid; }
.doc-section p, .doc-section li { font-size: 10pt; line-height: 1.5; }
.doc-label { color: #000 !important; }
a { color: #000 !important; text-decoration: none; }
}
/* --- "Kennt ihr das?" unter dem Portraet oeffnet dasselbe Fenster wie der
schwebende Knopf. Unterstrichen ist nur der Text, nicht das Symbol. --- */
.v2-intro__alltag-knopf {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
cursor: pointer;
}
.v2-intro__alltag-knopf svg { width: 18px; height: 18px; flex: none; }
.v2-intro__alltag-knopf span { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.v2-intro__alltag-knopf:focus-visible { outline: 2px solid var(--v2-blue); outline-offset: 4px; }
.v2-intro__text .v2-intro__einleitung {
font-size: var(--v2-fs-body);
line-height: 1.5;
color: var(--v2-ink-soft);
margin: 0 0 1.5rem;
max-width: none;
}
/* --- Abschnittskoepfe am Handy linksbuendig wie auf allen anderen
Seiten, damit Linie und Ueberschrift uebereinander stehen --- */
@media (max-width: 479px) {
.section__head { text-align: left; }
}
/* --- Minimalismus: keine dicke Unterstreichung unter Seitentiteln,
keine Fettschrift in Einleitungen. Links behalten ihre feine Linie,
sonst erkennt man sie nicht als Link. --- */
.hero-page:not(.hero-page--compact) h1 { border-bottom: 0; padding-bottom: 0; }
.hero-page:not(.hero-page--compact) .lead { font-weight: 400; }
.v2-bildzeile .v2-intro__text strong { font-weight: inherit; }
/* --- Portraet: am Tablet den Kopf nicht anschneiden, am Handy schmal
neben Begruessung und Einleitung statt breit darueber. --- */
@media (max-width: 980px) {
.v2-bildzeile .v2-intro__photo img { object-position: 50% 10%; }
}
@media (max-width: 620px) {
.v2-intro__grid.v2-bildzeile {
grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
column-gap: 1rem;
}
.v2-bildzeile .v2-intro__photo {
grid-column: 1;
grid-row: 1 / span 2;
aspect-ratio: auto;
height: auto;
min-height: 11rem;
align-self: stretch;
margin-bottom: 0;
}
.v2-bildzeile .v2-intro__photo img { object-position: 50% 15%; }
.v2-bildzeile .v2-intro__text > h3 { grid-column: 2; grid-row: 1; margin-bottom: 0.75rem; align-self: start; }
.v2-bildzeile .v2-intro__text > p { grid-column: 2; grid-row: 2; margin-bottom: 0; align-self: start; }
.v2-bildzeile .v2-intro__text > .v2-link { grid-column: 1 / -1; grid-row: 3; margin-top: 1.5rem; }
/* Seit 15.09.2026 ohne Link darunter, "Kennt ihr das?" rueckt in Zeile 3 */
.v2-bildzeile .v2-intro__text > .v2-intro__versprechen { grid-column: 1 / -1; grid-row: 3; }
}
/* --- Fusszeile: ein Raster. Links Logo und Navigation, rechts die
Angaben, alles in einer Schriftgroesse und auf einer Mittellinie,
Abstaende statt Trennpunkten, Symbole ohne Kreise. Innenkante wie
beim Seiteninhalt. --- */
.site-footer--slim { padding: 1.1rem var(--v2-pad-x); }
.site-footer--slim .site-footer__slim-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.9rem 2.5rem;
max-width: var(--c-grid);
margin: 0 auto;
}
.site-footer--slim .site-footer__slim-brand { justify-self: start; }
.site-footer--slim .site-footer__slim-nav { justify-self: start; gap: 1.75rem; }
.site-footer--slim .site-footer__slim-meta {
justify-self: end;
justify-content: flex-end;
align-items: center;
gap: 0.5rem 1.25rem;
}
.site-footer--slim .site-footer__slim-nav a,
.site-footer--slim .site-footer__slim-meta a,
.site-footer--slim .site-footer__ort {
font-size: var(--v2-fs-klein);
line-height: 1.4;
color: var(--v2-ink-soft);
}
.site-footer__ort::before { content: none; }
.site-footer--slim .site-footer__legal {
/* Der Trennpunkt steht als Text zwischen den Links. Mit font-size 0
verschwindet er, bliebe als Flex-Element aber mit eigener Luecke
stehen, deshalb Abstand ueber margin statt gap. */
display: inline-flex;
gap: 0;
padding-left: 0;
margin-left: 0;
border-left: 0;
font-size: 0;
}
.site-footer--slim .site-footer__legal a + a { margin-left: 1.25rem; }
.site-footer--slim .site-footer__slim-meta > span[aria-hidden="true"] { display: none; }
.site-footer--slim .site-footer__slim-meta > .site-footer__ort { order: 0; }
.site-footer--slim .site-footer__slim-meta > a[href^="mailto"] { order: 1; }
.site-footer--slim .site-footer__slim-meta > .site-footer__legal { order: 2; }
.site-footer--slim .site-footer__slim-meta > a:not([href^="mailto"]) { order: 3; }
.site-footer--slim .site-footer__slim-meta > .site-footer__social { order: 4; }
.site-footer--slim .site-footer__slim-meta > .site-footer__sprache { order: 5; }
.site-footer--slim .site-footer__social { gap: 0.9rem; margin-left: 0; }
.site-footer--slim .site-footer__social a {
width: auto;
height: auto;
border: 0;
border-radius: 0;
background: none;
}
.site-footer--slim .site-footer__social a:hover { color: var(--v2-ink); background: none; }
.site-footer--slim .site-footer__social svg { width: 16px; height: 16px; }
@media (max-width: 1100px) {
.site-footer--slim .site-footer__slim-inner { grid-template-columns: auto minmax(0, 1fr); }
.site-footer--slim .site-footer__slim-meta { grid-column: 1 / -1; justify-self: start; justify-content: flex-start; }
}
@media (max-width: 620px) {
.site-footer--slim { padding: 1.5rem var(--v2-pad-x); }
.site-footer--slim .site-footer__slim-inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.site-footer--slim .site-footer__slim-nav { justify-content: center; }
.site-footer--slim .site-footer__slim-meta {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.6rem 1.25rem;
max-width: 22rem;
}
.site-footer--slim .site-footer__legal { justify-content: center; }
}
/* --- Startseite nach dem Trichter Content, Interesse, CTA, Lead
(Entscheid Saman 07.10.2026). "Kennt ihr das?" steht als schmaler,
ruhiger Textabschnitt direkt unter dem Hero, das Portraet sitzt im
Abschluss neben dem CTA. --- */
.v2-kennt .v2-intro__versprechen.v2-intro__alltag {
margin: 0;
max-width: 62ch;
}
.v2-kennt .v2-intro__einleitung {
font-size: var(--v2-fs-lead);
line-height: 1.55;
color: var(--v2-ink);
margin: 0 0 1.5rem;
max-width: none;
}
.v2-hero__person {
display: inline-flex;
align-items: center;
gap: 0.7rem;
margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
font-size: var(--v2-fs-klein);
color: rgba(255, 255, 255, 0.82);
}
.v2-hero__person img {
width: 36px;
height: 36px;
object-fit: cover;
object-position: 50% 25%;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.v2-cta--person { text-align: left; }
.v2-cta__person {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
}
.v2-cta__foto { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.v2-cta__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-cta--person .v2-eyebrow { display: block; margin-bottom: 1rem; color: var(--v2-ink-soft); }
.v2-cta--person .v2-cta__title { margin: 0 0 1rem; }
.v2-cta--person .v2-cta__lead { margin: 0 0 1.75rem; }
.v2-cta--person .v2-cta__actions { justify-content: flex-start; align-items: center; gap: 1.5rem; }
@media (min-width: 981px) {
.v2-cta__person { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-cta__foto { aspect-ratio: 3 / 2; }
}
/* Ueberschrift ueber Arbeitsplatz und Cyberschutz (07.10.2026): sitzt
direkt ueber der ersten Bildzeile, darum kein Abstand nach unten. */
.v2-uebernehmen { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.v2-uebernehmen .v2-secthead { margin-bottom: 0; }
/* ============================================================
Startseite nach dem Hero: lose Handschrift-Ueberschriften mit Fenstern
(Entscheid Saman 07.10.2026). Bewusste Ausnahme von der Schriftregel
(Manrope und Inter): die Handschrift ist Caveat, selbst gehostet.
============================================================ */
@font-face {
font-family: "Caveat";
src: url("/assets/fonts/caveat.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
.v2-lose {
--hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
position: relative;
padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem);
overflow: hidden;
}
.v2-lose__liste {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 1180px;
display: flex;
flex-direction: column;
gap: clamp(1.75rem, 5vw, 2.5rem);
}
.v2-lose__punkt {
margin: 0;
opacity: 0;
transform: translateY(14px) rotate(var(--r, 0deg));
transition: opacity 600ms ease calc(var(--stufe, 0) * 110ms), transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--stufe, 0) * 110ms);
}
.v2-lose__punkt.is-in { opacity: 1; transform: rotate(var(--r, 0deg)); }
.v2-lose__punkt:nth-child(even) { margin-left: clamp(0.5rem, 12vw, 6rem); }
.v2-lose__knopf {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: flex-end;
gap: 0.6rem;
margin: 0;
padding: 0.2rem 0.1rem;
border: 0;
border-radius: 0;
background: none;
color: var(--v2-ink);
font-family: var(--hand);
font-size: clamp(2.1rem, 8vw, 3.5rem);
font-weight: 500;
line-height: 1.05;
text-align: left;
cursor: pointer;
}
.v2-lose__text { max-width: 20ch; }
.v2-lose__pfeil {
flex: none;
width: clamp(3.2rem, 10vw, 5.5rem);
height: auto;
color: var(--v2-ink);
margin-bottom: 0.25rem;
}
.v2-lose__pfeil path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.v2-lose__knopf:hover .v2-lose__pfeil path,
.v2-lose__knopf:focus-visible .v2-lose__pfeil path { animation: lose-zeichnen 700ms ease both; }
.v2-lose__knopf:hover .v2-lose__text,
.v2-lose__knopf:focus-visible .v2-lose__text { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; text-decoration-color: var(--v2-coral); }
.v2-lose__knopf:focus-visible { outline: 2px solid var(--v2-blue); outline-offset: 6px; }
@keyframes lose-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* Am Desktop frei verteilt, ohne Spalten oder Raster */
@media (min-width: 900px) {
.v2-lose { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.v2-lose__liste { display: block; position: relative; height: clamp(780px, 72vw, 980px); }
.v2-lose__punkt, .v2-lose__punkt:nth-child(even) {
position: absolute;
left: var(--x);
top: var(--y);
width: var(--w);
margin: 0;
}
.v2-lose__knopf { font-size: clamp(2.4rem, 4.2vw, 3.9rem); }
.v2-lose__text { max-width: none; }
}
/* Fenster */
html.lose-offen { overflow: hidden; }
.v2-lose-fenster {
position: fixed;
inset: 0;
z-index: 250;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(0.5rem, 3vw, 2rem);
background: rgba(14, 15, 18, 0);
transition: background-color 380ms ease;
}
.v2-lose-fenster[hidden] { display: none; }
.v2-lose-fenster.is-open { background: rgba(14, 15, 18, 0.32); }
.v2-lose-fenster__panel {
position: relative;
width: min(1100px, 100%);
max-height: min(90vh, 100%);
overflow: auto;
overscroll-behavior: contain;
background: var(--v2-silber);
border: 1px solid var(--v2-line-soft);
box-shadow: 0 28px 70px rgba(14, 15, 18, 0.26);
padding: clamp(1.25rem, 4vw, 3rem);
opacity: 0;
transform: scale(0.55) rotate(-1.5deg);
transition: transform 460ms cubic-bezier(0.2, 0.9, 0.25, 1.04), opacity 280ms ease;
}
.v2-lose-fenster.is-open .v2-lose-fenster__panel { opacity: 1; transform: none; }
.v2-lose-fenster__panel--schmal { width: min(680px, 100%); }
.v2-lose-fenster__panel:focus { outline: none; }
.v2-lose-fenster__zu {
position: sticky;
top: 0;
float: right;
z-index: 2;
width: 40px;
height: 40px;
margin: -0.5rem -0.5rem 0.5rem 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--v2-line-soft);
background: var(--v2-silber);
color: var(--v2-ink-soft);
cursor: pointer;
}
.v2-lose-fenster__zu:hover { color: var(--v2-ink); border-color: var(--v2-ink); }
.v2-lose-fenster__zu:focus-visible { outline: 2px solid var(--v2-blue); outline-offset: 2px; }
.v2-lose-fenster__zu svg { width: 18px; height: 18px; }
.v2-lose-fenster__inhalt .v2-eyebrow { display: block; margin-bottom: 1rem; color: var(--v2-ink-soft); }
.v2-lose-fenster__titel {
font-family: var(--v2-display);
font-size: var(--v2-fs-h2);
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0 0 1rem;
color: var(--v2-ink);
}
.v2-lose-fenster__lead { font-size: var(--v2-fs-lead); line-height: 1.55; color: var(--v2-ink); margin: 0 0 1.5rem; max-width: 62ch; }
.v2-lose-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.v2-lose-kachel { border: 1px solid var(--v2-line-soft); background: rgba(255, 255, 255, 0.5); padding: 1.5rem; }
.v2-lose-kachel h3 { font-family: var(--v2-sans); font-size: var(--v2-fs-small); font-weight: 600; margin: 0 0 0.5rem; color: var(--v2-ink); }
.v2-lose-kachel p { margin: 0 0 1rem; color: var(--v2-ink-soft); line-height: 1.5; }
/* Einblendungen der Seite gelten im Fenster nicht, sonst bleibt Inhalt unsichtbar */
.v2-lose-fenster .reveal-up, .v2-lose-fenster .reveal-fade { opacity: 1 !important; transform: none !important; }
/* Das Portraet-Fenster nutzt den vorhandenen Abschlussblock, ohne eigenen Hintergrund */
.v2-lose-fenster__inhalt--person .v2-cta__person { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) {
.v2-lose__punkt { transition: none; opacity: 1; transform: rotate(var(--r, 0deg)); }
.v2-lose-fenster__panel { transition: opacity 120ms ease; transform: none; }
}
/* Symbol vor jeder losen Ueberschrift (Saman 07.10.2026) */
.v2-lose__icon {
flex: none;
width: clamp(2rem, 7vw, 2.9rem);
height: auto;
align-self: center;
margin: 0 0.15rem 0 0;
}
/* Raster statt loser Verteilung (Saman 07.10.2026): zwei Spalten mit
Haarlinien, Reihenfolge von links nach rechts und oben nach unten.
Die Handschrift, die Symbole und die Pfeile bleiben. */
.v2-lose__liste { border-top: 1px solid var(--v2-line-soft); gap: 0; }
.v2-lose__punkt, .v2-lose__punkt:nth-child(even) { margin: 0; border-bottom: 1px solid var(--v2-line-soft); }
.v2-lose__knopf { width: 100%; padding: clamp(1.5rem, 4vw, 2.5rem) clamp(0.25rem, 2vw, 1.75rem); }
.v2-lose__knopf:hover { background: rgba(255, 255, 255, 0.45); }
@media (min-width: 900px) {
.v2-lose__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; height: auto; }
.v2-lose__punkt, .v2-lose__punkt:nth-child(even) { position: static; left: auto; top: auto; width: auto; margin: 0; }
.v2-lose__punkt:nth-child(odd):not(:last-child) { border-right: 1px solid var(--v2-line-soft); }
.v2-lose__punkt:last-child { grid-column: 1 / -1; }
.v2-lose__knopf { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
.v2-lose__text { max-width: 18ch; }
}
/* Im Raster bleiben die Haarlinien gerade, nur die Schrift steht leicht schief */
.v2-lose__punkt { transform: translateY(14px); }
.v2-lose__punkt.is-in { transform: none; }
.v2-lose__text { display: inline-block; transform: rotate(var(--r, 0deg)); transform-origin: left center; }
@media (prefers-reduced-motion: reduce) { .v2-lose__punkt { transform: none; } }
/* Zwei Bildzeilen fliessen im Fenster "Gute IT" ineinander: ein Absatz Luft,
dann die zweite, gespiegelt (Saman 07.10.2026) */
.v2-lose-fenster__fluss { margin-top: clamp(2rem, 5vw, 3.5rem); }
.v2-lose-fenster__inhalt + .v2-mosaic { margin-top: 0.5rem; }
/* Sechs Eintraege: kein Eintrag spannt sich ueber beide Spalten, ausser dem letzten bei ungerader Zahl */
@media (min-width: 900px) {
.v2-lose__punkt:last-child { grid-column: auto; }
.v2-lose__punkt:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Im Fenster stehen die Bildzeilen buendig mit der Ueberschrift */
.v2-lose-fenster .v2-mosaic { margin-left: 0; margin-right: 0; }
/* Einmalige Leistungen: sieben Kacheln, mehrere pro Zeile */
#lose-einmalig .v2-lose-kacheln { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* Die Themen stehen im Hero, damit niemand scrollen muss (Saman 07.10.2026).
Helle Schrift auf dem Video, Symbole weiss, Haarlinien hell. */
.v2-hero .v2-hero__themen { padding: 0; overflow: visible; margin: clamp(1.25rem, 3vw, 2rem) auto 0; max-width: 980px; text-align: left; }
.v2-hero .v2-lose__liste { border-top-color: rgba(255, 255, 255, 0.28); max-width: none; }
.v2-hero .v2-lose__punkt, .v2-hero .v2-lose__punkt:nth-child(even) { border-bottom-color: rgba(255, 255, 255, 0.28); }
@media (min-width: 900px) {
.v2-hero .v2-lose__punkt:nth-child(odd):not(:last-child) { border-right-color: rgba(255, 255, 255, 0.28); }
}
.v2-hero .v2-lose__knopf { color: var(--v2-silber); padding: clamp(0.8rem, 2vw, 1.15rem) clamp(0.25rem, 1.5vw, 1.25rem); font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.v2-hero .v2-lose__knopf:hover { background: rgba(255, 255, 255, 0.1); }
.v2-hero .v2-lose__icon { filter: brightness(0) invert(1); width: clamp(1.7rem, 3vw, 2.1rem); }
.v2-hero .v2-lose__knopf:hover .v2-lose__text,
.v2-hero .v2-lose__knopf:focus-visible .v2-lose__text { text-decoration-color: var(--v2-coral); }
.v2-hero .v2-hero__title { margin-bottom: clamp(1rem, 2vw, 1.75rem); }
.v2-hero .v2-hero__scroll-hint { display: none; }
@media (min-width: 900px) { .v2-hero { padding-top: 6rem; padding-bottom: 3.5rem; } }
.v2-hero .v2-lose__text { max-width: none; }
/* "Was wir anbieten": Laufende Betreuung breit, darunter die einmaligen Leistungen als Kacheln */
.v2-lose-kacheln--breit { grid-template-columns: minmax(0, 1fr); }
.v2-lose-kacheln--einmalig { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 0; }
.v2-lose-fenster__unter { font-family: var(--v2-display); font-size: var(--v2-fs-h3); font-weight: 400; line-height: 1.2; margin: 2.5rem 0 0.75rem; color: var(--v2-ink); }
/* So laeuft die Zusammenarbeit: eine ruhige Zeile unter den Themen im Hero
(Saman 07.10.2026). Inter, klein, kein Thema, nur Beschriftung. */
.v2-hero__ablauf {
list-style: none;
margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
padding: 0;
max-width: 980px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.35rem 0.9rem;
font-family: var(--v2-sans);
font-size: var(--v2-fs-klein);
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.78);
}
.v2-hero__ablauf li { margin: 0; white-space: nowrap; }
.v2-hero__ablauf li + li::before { content: "\2192"; margin-right: 0.9rem; opacity: 0.5; }
@media (max-width: 520px) { .v2-hero__ablauf { gap: 0.25rem 0.6rem; font-size: 0.8125rem; } .v2-hero__ablauf li + li::before { margin-right: 0.6rem; } }
/* Am Handy bricht die Zeile um, dort stuende ein Pfeil am Zeilenanfang: ohne Pfeile, die Reihenfolge ist auch so klar */
@media (max-width: 520px) { .v2-hero__ablauf li + li::before { content: none; } .v2-hero__ablauf { gap: 0.3rem 1.1rem; justify-content: flex-start; } }
/* ============================================================
Fenster der Startseite sauber ausgerichtet (Saman 07.10.2026)
Gleicher Kopf in jedem Fenster: Eyebrow, Titel, Einleitung.
============================================================ */
.v2-lose-fenster__panel--mittel { width: min(920px, 100%); }
.v2-lose-fenster__inhalt > .v2-eyebrow { margin-bottom: 0.9rem; }
.v2-lose-fenster__titel { max-width: 28ch; }
.v2-lose-fenster__lead { font-size: var(--v2-fs-body); line-height: 1.6; color: var(--v2-ink-soft); max-width: 60ch; }
.v2-lose-fenster__panel--schmal .v2-lose-fenster__lead { color: var(--v2-ink); font-size: var(--v2-fs-lead); line-height: 1.55; }
/* Kacheln: gleich hoch, der Link sitzt immer unten */
.v2-lose-kachel { display: flex; flex-direction: column; }
.v2-lose-kachel p { font-size: var(--v2-fs-small); line-height: 1.55; }
.v2-lose-kachel .v2-link { margin-top: auto; align-self: flex-start; }
.v2-lose-fenster__unter { border-top: 1px solid var(--v2-line-soft); padding-top: 2rem; margin-top: 2.25rem; }
.v2-lose-fenster__unter + .v2-lose-fenster__lead { margin-bottom: 1.25rem; }
/* Gute IT: zwei Abschnitte, die Unterueberschriften eine Stufe unter dem Fenstertitel */
.v2-lose-fenster .v2-mosaic__head h2 { font-size: var(--v2-fs-h3); line-height: 1.2; }
.v2-lose-fenster__fluss { border-top: 1px solid var(--v2-line-soft); padding-top: clamp(1.75rem, 4vw, 2.75rem); }
.v2-lose-fenster .v2-mosaic { gap: clamp(1.25rem, 3vw, 2.25rem); }
/* Ansprechpartner: Foto und Text nebeneinander, am Handy untereinander */
.v2-lose-person { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); align-items: center; }
.v2-lose-person__foto { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.v2-lose-person__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.v2-lose-person .v2-lose-fenster__titel { margin-bottom: 0.9rem; }
.v2-lose-person .v2-lose-fenster__lead { margin-bottom: 1.5rem; }
.v2-lose-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
@media (min-width: 720px) {
.v2-lose-person { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.v2-lose-person__foto { aspect-ratio: 4 / 5; }
}
@media (max-width: 520px) {
.v2-lose-aktionen .v2-btn { width: 100%; text-align: center; }
}
/* Gute IT: zwei gleich gebaute Spalten, vier Zeilen je Spalte, kein Fliesstext */
.v2-lose-doppel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 1.5rem; }
.v2-lose-doppel__spalte h3 { font-family: var(--v2-display); font-size: var(--v2-fs-h4); font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 0.75rem; color: var(--v2-ink); }
.v2-lose-doppel ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--v2-ink); }
.v2-lose-doppel li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding: 0.9rem 0; border-bottom: 1px solid var(--v2-line-soft); }
.v2-lose-doppel li strong { font-family: var(--v2-sans); font-size: var(--v2-fs-small); font-weight: 600; color: var(--v2-ink); }
.v2-lose-doppel li span { font-size: var(--v2-fs-small); line-height: 1.5; color: var(--v2-ink-soft); }
@media (min-width: 820px) {
.v2-lose-doppel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem); }
}
/* "Kennt ihr das?": ein Fenster mit der ganzen Geschichte, scrollt bei Bedarf */
.v2-lose-fenster__text { font-size: var(--v2-fs-body); line-height: 1.65; color: var(--v2-ink-soft); margin: 0 0 1.1rem; max-width: 62ch; }
.v2-lose-fenster__text--schluss { color: var(--v2-ink); }
.v2-lose-aktionen--ende { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--v2-line-soft); }
#lose-kennt .v2-lose-fenster__titel { max-width: none; }
/* Themen im Hero in der Markenschrift statt in Handschrift (Saman 07.10.2026):
Manrope Light wie der Titel "IT, die mitdenkt.", gerade statt schief.
Caveat bleibt als Schriftdatei fuer einen moeglichen persoenlichen Akzent. */
.v2-lose { --hand: var(--v2-display); }
.v2-lose__knopf { font-weight: 300; letter-spacing: -0.015em; line-height: 1.15; }
.v2-lose__text { transform: none; }
.v2-hero .v2-lose__knopf { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.v2-hero .v2-lose__icon { width: clamp(1.5rem, 2.4vw, 1.9rem); }
/* Was wir anbieten: Laufende Betreuung und Einmalige Leistungen gleich gewichtet
(Saman 08.10.2026), zwei gleich grosse Kacheln mit gleich gebauten Zeilen */
.v2-lose-paar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.v2-lose-kachel--gross { padding: clamp(1.25rem, 3vw, 1.75rem); }
.v2-lose-kachel--gross h3 { font-family: var(--v2-display); font-size: var(--v2-fs-h4); font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 0.35rem; }
.v2-lose-kachel--gross .v2-lose-kachel__lead { margin: 0 0 1rem; color: var(--v2-ink-soft); font-size: var(--v2-fs-small); line-height: 1.5; }
.v2-lose-zeilen { list-style: none; margin: 0 0 1.25rem; padding: 0; border-top: 1px solid var(--v2-line-soft); }
.v2-lose-zeilen li { display: grid; gap: 0.2rem; padding: 0.8rem 0; border-bottom: 1px solid var(--v2-line-soft); margin: 0; }
.v2-lose-zeilen strong { font-family: var(--v2-sans); font-size: var(--v2-fs-small); font-weight: 600; color: var(--v2-ink); }
.v2-lose-zeilen span { font-size: var(--v2-fs-small); line-height: 1.55; color: var(--v2-ink-soft); }
.v2-lose-zeilen .v2-link { font-size: inherit; }
@media (min-width: 820px) { .v2-lose-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Themen im Hero: vier in einer Reihe, leiser (Saman 08.10.2026) */
@media (min-width: 900px) {
.v2-hero .v2-hero__themen { max-width: 1060px; }
.v2-hero .v2-hero__themen .v2-lose__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top-color: rgba(255, 255, 255, 0.22); }
.v2-hero .v2-hero__themen .v2-lose__punkt,
.v2-hero .v2-hero__themen .v2-lose__punkt:nth-child(even) { border-bottom: 0; border-right: 0; grid-column: auto; }
.v2-hero .v2-hero__themen .v2-lose__punkt:last-child { grid-column: auto; }
.v2-hero .v2-hero__themen .v2-lose__knopf { justify-content: center; padding: 1.1rem 0.5rem; font-size: clamp(0.95rem, 1.25vw, 1.1rem); color: rgba(255, 255, 255, 0.82); }
.v2-hero .v2-hero__themen .v2-lose__knopf:hover { color: var(--v2-silber); background: none; }
.v2-hero .v2-hero__themen .v2-lose__icon { width: 1.15rem; opacity: 0.8; }
}
@media (max-width: 899px) {
.v2-hero .v2-hero__themen .v2-lose__knopf { color: rgba(255, 255, 255, 0.85); font-size: 1.1rem; }
}
/* Fenster der Startseite: keine Unterstreichungen (Saman 08.10.2026,
dezent und minimalistisch). Links erkennt man an der Farbe und am Pfeil,
beim Darueberfahren erscheint die Linie. Auch die Coral-Linie unter der
Kennzeile entfaellt. */
.v2-lose-fenster .v2-eyebrow { border-bottom: 0; padding-bottom: 0; }
.v2-lose-fenster .v2-link { border-bottom: 0; padding-bottom: 0; letter-spacing: 0.02em; font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 220ms ease, color 220ms ease; }
.v2-lose-fenster .v2-link:hover, .v2-lose-fenster .v2-link:focus-visible { background-size: 100% 1px; color: var(--v2-ink); }
.v2-lose-kachel--gross > .v2-link::after, .v2-lose-aktionen .v2-link::after { content: " \2192"; }
.v2-lose-zeilen .v2-link { font-weight: 400; font-size: var(--v2-fs-small); letter-spacing: 0; color: var(--v2-ink); }
.v2-lose-fenster__unter, .v2-lose-einmalig .v2-lose-fenster__unter { border-top-width: 1px; }
/* Unser Ansatz: drei Spalten nebeneinander (Saman 08.10.2026) */
@media (min-width: 820px) {
.v2-lose-doppel { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
}
/* Unser Ansatz: Zeilen laufen ueber alle Spalten auf einer Linie (Saman 08.10.2026).
Ueberschrift und vier Zeilen teilen sich fuenf gemeinsame Reihen (subgrid). */
@media (min-width: 820px) {
.v2-lose-doppel { grid-template-rows: auto repeat(4, auto); row-gap: 0; }
.v2-lose-doppel__spalte { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
.v2-lose-doppel__spalte > ol { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.v2-lose-doppel__spalte h3 { white-space: nowrap; }
}
/* Unser Ansatz: vier Spalten (Arbeitsplatz, Cyberschutz, Modern, Zusammenarbeit) */
.v2-lose-fenster__panel--breit { width: min(1240px, 100%); }
@media (min-width: 1000px) {
.v2-lose-doppel { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.2vw, 2rem); }
}
/* "Im Fokus" leise (Saman 08.10.2026): kleine Grossbuchstaben, feine Linie,
ohne Schatten und ohne bunten Punkt. Auf der Startseite mittig unter dem
Titel, sonst unten rechts. */
.v2-alltag-knopf { height: 42px; padding: 0 1.05rem 0 0.85rem; gap: 0.55rem; box-shadow: none; border-color: rgba(27, 58, 94, 0.45); background: rgba(244, 246, 248, 0.88); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.v2-alltag-knopf:hover { box-shadow: none; border-color: var(--v2-blue); }
.v2-alltag-knopf__icon, .v2-alltag-knopf__icon svg { width: 18px; height: 18px; }
.v2-alltag-knopf__punkt { display: none; }
.v2-hero__fokus { display: flex; justify-content: center; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.v2-alltag-knopf--inline { position: static; transform: none; height: 36px; background: transparent; border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: none; backdrop-filter: none; }
.v2-alltag-knopf--inline:hover { border-color: var(--v2-silber); color: var(--v2-silber); }
html.alltag-offen .v2-alltag-knopf--inline,
html.alltag-ausloeser-sichtbar .v2-alltag-knopf--inline,
body.mobile-panel-open .v2-alltag-knopf--inline,
body:has(.samit-consent.is-visible) .v2-alltag-knopf--inline,
body:has(.v2-support-overlay.is-open) .v2-alltag-knopf--inline { opacity: 1; pointer-events: auto; }
/* Dezentere Schriften in den Fenstern (Saman 08.10.2026): Erklaerungen in
Inter Light, Zeilentitel in Medium statt Semibold. Groesse und Farbe
bleiben, damit es lesbar bleibt. */
.v2-lose-fenster__lead,
.v2-lose-fenster__text,
.v2-lose-kachel__lead,
.v2-lose-kachel p,
.v2-lose-doppel li span,
.v2-lose-zeilen span,
.v2-lose-zeilen .v2-link { font-weight: 300; }
.v2-lose-doppel li strong,
.v2-lose-zeilen strong,
.v2-lose-kachel h3 { font-weight: 500; }
.v2-lose-fenster .v2-link { font-weight: 400; }
.v2-lose-fenster__panel--schmal .v2-lose-fenster__lead { font-weight: 300; }
/* Unser Ansatz: Titel und Text einer Zeile bleiben zusammen oben, auch wenn
die gemeinsame Zeile wegen einer laengeren Nachbarzeile hoeher ist */
.v2-lose-doppel li { align-content: start; }
.v2-lose-doppel__spalte, .v2-lose-doppel__spalte > ol { align-content: start; }
.v2-lose-doppel__spalte h3 { align-self: end; margin-bottom: 0.75rem; }
.v2-lose-doppel__spalte h3 { line-height: 1.1; margin-bottom: 0.5rem; }
/* Was wir anbieten: zwei gleich grosse Kacheln mit kurzem Text und einem Knopf */
.v2-lose-kachel__text { margin: 0 0 1.5rem; font-size: var(--v2-fs-body); line-height: 1.6; color: var(--v2-ink-soft); font-weight: 300; max-width: 46ch; }
.v2-lose-kachel--gross .v2-btn { margin-top: auto; align-self: flex-start; }
.v2-lose-kachel--gross > h3 { margin-bottom: 0.9rem; }
.v2-lose-doppel li { padding: 0.7rem 0; }
.v2-lose-doppel { margin-top: 1.1rem; }
/* Was wir anbieten: kurze Stichzeilen statt Absatz */
.v2-lose-punkte { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.5rem; }
.v2-lose-punkte li { margin: 0; font-size: var(--v2-fs-body); line-height: 1.5; font-weight: 300; color: var(--v2-ink); }
/* ============================================================
Video als Hintergrund der ganzen Seite (Saman 08.10.2026). Die Inhalte
schweben als Milchglas-Flaechen darueber und scrollen ueber das Bild.
Aktiv, wenn seitenvideo.js body.v2-videoseite setzt. --glas steuert die
Deckkraft der Flaechen (0,68 gefaellt, Rechtstexte 0,86).
============================================================ */
.v2-seitenvideo { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #12263e center / cover no-repeat; }
.v2-seitenvideo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms ease; }
.v2-seitenvideo.ist-bewegt video { opacity: 1; }
.v2-seitenvideo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14, 26, 44, 0.38) 0%, rgba(14, 26, 44, 0.5) 100%); }
.v2-videoseite, .v2-videoseite main, .v2-videoseite #main { background: transparent !important; background-image: none !important; }
.v2-videoseite .v2-hero__bg { display: none; }
.v2-videoseite .v2-hero { background: transparent; }
.v2-videoseite main > section:not(.v2-hero):not(.hero-page) { background: transparent; padding: clamp(1.25rem, 4vw, 2.75rem) 0; }
.v2-videoseite .hero-page { background: transparent; }
.v2-videoseite main > section:not(.v2-hero):not(.hero-page) > .v2-container,
.v2-videoseite main > section:not(.v2-hero):not(.hero-page) > .section__inner,
.v2-videoseite .v2-hero--light > .v2-hero__inner,
.v2-videoseite main > .doc-body {
background: rgba(236, 239, 242, var(--glas, 0.68));
-webkit-backdrop-filter: blur(22px) saturate(1.15);
backdrop-filter: blur(22px) saturate(1.15);
border: 1px solid rgba(255, 255, 255, 0.35);
padding: clamp(1.5rem, 4vw, 3rem);
box-shadow: 0 24px 70px rgba(8, 16, 30, 0.28);
width: min(1120px, calc(100% - 3rem));
margin-left: auto;
margin-right: auto;
color: var(--v2-ink);
}
.v2-videoseite .v2-hero--light > .v2-hero__inner { margin-top: clamp(0.5rem, 2vw, 1.5rem); }
.v2-videoseite main > .doc-body { margin-top: clamp(1.25rem, 4vw, 2.75rem); margin-bottom: clamp(1.25rem, 4vw, 2.75rem); --glas: 0.86; }
.v2-videoseite[data-seitenvideo-lesen] { --glas: 0.86; }
.v2-videoseite .v2-cta { color: var(--v2-ink); text-align: left; }
.v2-videoseite .site-footer { background: rgba(10, 10, 12, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); margin-top: clamp(0.75rem, 2vw, 1.25rem); }
@media (max-width: 700px) { .v2-videoseite main > section:not(.v2-hero):not(.hero-page) > .v2-container, .v2-videoseite main > section:not(.v2-hero):not(.hero-page) > .section__inner, .v2-videoseite main > .doc-body { width: calc(100% - 1.2rem); } }
.v2-videoseite .hero-page, .v2-videoseite .hero-page--split, .v2-videoseite .hero-page--project { background: transparent !important; background-image: none !important; }
.v2-videoseite .hero-page__inner { background: rgba(236, 239, 242, var(--glas, 0.68)) !important; -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 24px 70px rgba(8, 16, 30, 0.28); }
.v2-videoseite .hero-page__inner { width: min(1120px, calc(100% - 3rem)); margin-left: auto; margin-right: auto; }
/* ============================================================
Startseite (Saman 09.10.2026): Fenster als Milchglas wie die Seiten mit
Video, dazu keine feinen Linien, keine Unterstreichungen und kein Rand
um "Im Fokus".
============================================================ */
.v2-lose-fenster__panel, .v2-alltag-fenster__panel {
background: rgba(236, 239, 242, var(--glas, 0.68));
-webkit-backdrop-filter: blur(22px) saturate(1.15);
backdrop-filter: blur(22px) saturate(1.15);
border: 1px solid rgba(255, 255, 255, 0.35);
}
.v2-lose-fenster__zu, .v2-alltag-fenster__zu { border: 0; background: transparent; }
.v2-alltag-fenster .v2-eyebrow, .v2-lose-fenster .v2-eyebrow { border-bottom: 0; padding-bottom: 0; }
/* feine Linien weg */
.v2-hero .v2-hero__themen .v2-lose__liste { border-top: 0; }
.v2-lose-doppel ol, .v2-lose-zeilen { border-top: 0; }
.v2-lose-doppel li, .v2-lose-zeilen li { border-bottom: 0; }
.v2-lose-doppel li { padding: 0.85rem 0; }
.v2-lose-fenster__unter, .v2-lose-einmalig .v2-lose-fenster__unter, .v2-lose-aktionen--ende { border-top: 0; }
.v2-lose-kachel { border: 0; background: rgba(255, 255, 255, 0.34); }
.v2-lose-kachel--gross { border: 0; }
.v2-lose-fenster__fluss { border-top: 0; }
/* Unterstreichungen weg, auch beim Darueberfahren */
.v2-hero .v2-lose__knopf:hover .v2-lose__text, .v2-hero .v2-lose__knopf:focus-visible .v2-lose__text { text-decoration: none; }
.v2-lose-fenster .v2-link, .v2-alltag-fenster .v2-link { background-image: none; border-bottom: 0; }
.v2-lose-fenster .v2-link:hover, .v2-lose-fenster .v2-link:focus-visible, .v2-alltag-fenster .v2-link:hover { background-size: 0 0; text-decoration: none; }
/* "Im Fokus" auf der Startseite ohne Rand */
.v2-alltag-knopf--inline { border: 0; background: rgba(255, 255, 255, 0.12); }
.v2-alltag-knopf--inline:hover { border: 0; background: rgba(255, 255, 255, 0.2); }
/* Pop-up-Fenster: besser lesbar, mit Tiefe (09.10.2026) */
.v2-lose-fenster__panel, .v2-alltag-fenster__panel {
background: linear-gradient(155deg, rgba(255,255,255,.66), rgba(238,242,246,.56)) !important;
-webkit-backdrop-filter: blur(34px) saturate(1.5) brightness(1.35);
backdrop-filter: blur(34px) saturate(1.5) brightness(1.35);
box-shadow: 0 40px 90px -24px rgba(10,12,20,.6);
border: 0 !important; border-radius: 28px;
color: var(--ink, #0e0f12);
}
.v2-lose-fenster__panel p, .v2-alltag-fenster__panel p,
.v2-lose-fenster__panel li, .v2-alltag-fenster__panel li { color: #1a1d26; font-weight: 400; }
.v2-lose-fenster__panel h2, .v2-alltag-fenster__panel h2 { color: #0e0f12; }
.v2-lose-fenster__panel .v2-eyebrow, .v2-alltag-fenster__panel .v2-eyebrow { color: #1B3A5E; }
.v2-lose-kachel { background: rgba(255,255,255,.45) !important; border-radius: 18px; box-shadow: 0 6px 20px -10px rgba(10,12,20,.25); }
.v2-lose-fenster__panel .v2-btn, .v2-alltag-fenster__panel .v2-btn {
background: #1B3A5E; color: #fff; border-color: #1B3A5E;
}
/* Support-Fenster im Glas-Stil der anderen Fenster (09.10.2026) */
.v2-support-card {
background: linear-gradient(155deg, rgba(255,255,255,.66), rgba(238,242,246,.56)) !important;
-webkit-backdrop-filter: blur(34px) saturate(1.5) brightness(1.35);
backdrop-filter: blur(34px) saturate(1.5) brightness(1.35);
border: 0 !important; border-radius: 28px;
box-shadow: 0 40px 90px -24px rgba(10,12,20,.6);
color: #0e0f12;
}
.v2-support-title { color: #0e0f12 !important; }
.v2-support-close { background: transparent !important; border: 0 !important; color: #0e0f12 !important; }
.v2-support-close:hover { background: rgba(255,255,255,.5) !important; }
.v2-support-option, .v2-support-contact__item {
background: rgba(255,255,255,.45) !important; border: 0 !important; border-radius: 18px;
color: #0e0f12 !important; box-shadow: 0 6px 20px -10px rgba(10,12,20,.25);
}
.v2-support-option:hover, .v2-support-option:focus-visible,
.v2-support-contact__item:hover, .v2-support-contact__item:focus-visible {
background: rgba(255,255,255,.75) !important; color: #0e0f12 !important;
}
.v2-support-option__name, .v2-support-contact__value { color: #0e0f12 !important; }
.v2-support-option__desc, .v2-support-contact__label { color: #3a3f4b !important; }
.v2-support-option__icon, .v2-support-option__arrow { color: #1B3A5E !important; }
.v2-support-os-picker__btn { border-radius: 12px; }
/* Pop-ups ohne Rundungen (09.10.2026) */
.v2-lose-fenster__panel, .v2-alltag-fenster__panel, .v2-support-card,
.v2-lose-kachel, .v2-support-option, .v2-support-contact__item, .v2-support-os-picker__btn,
.v2-alltag-fenster__panel .v2-btn, .v2-lose-fenster__panel .v2-btn { border-radius: 0 !important; }
/* Startseite schmal: Themen mittig und dezent unter dem Titel, ohne Linien */
@media (max-width: 899px) {
.v2-hero .v2-hero__themen { margin-top: 1rem; max-width: 34rem; text-align: center; }
.v2-hero .v2-hero__themen .v2-lose__liste {
display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 1.25rem; border: 0;
}
.v2-hero .v2-lose__punkt, .v2-hero .v2-lose__punkt:nth-child(even),
.v2-hero .v2-lose__punkt:nth-child(odd):not(:last-child) {
border: 0 !important; grid-column: auto; width: auto;
}
.v2-hero .v2-lose__knopf {
width: auto; justify-content: center; padding: 0.55rem 0.4rem;
font-size: 1rem; color: rgba(255,255,255,.82);
}
.v2-hero .v2-lose__knopf:hover { background: none; color: #fff; }
.v2-hero .v2-lose__icon { width: 1.05rem; opacity: .8; }
}
/* Leitsatz unter der Tagline (Startseite) */
.v2-hero__leitsatz {
margin: 0.6rem 0 0; text-align: center; font-weight: 300; letter-spacing: 0.04em;
font-size: clamp(1rem, 1.5vw, 1.2rem); color: rgba(255,255,255,.78);
}
/* Unser Ansatz: saubere Kacheln statt loser Spalten (09.10.2026) */
.v2-lose-doppel { gap: 1rem; }
.v2-lose-doppel__spalte {
background: rgba(255,255,255,.34); padding: 1.25rem 1.4rem 0.75rem;
}
.v2-lose-doppel__spalte h3 { margin-bottom: 0.4rem; }
.v2-lose-doppel li { padding: 0.65rem 0; }
@media (min-width: 640px) and (max-width: 999px) {
.v2-lose-doppel { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 1rem; }
.v2-lose-doppel__spalte, .v2-lose-doppel__spalte > ol { display: block; grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 639px) {
.v2-lose-doppel { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1000px) {
.v2-lose-doppel { column-gap: 1rem; }
}
/* Symmetrie: Navigation exakt mittig, Logo links und Knöpfe rechts gleich breit */
@media (min-width: 961px) {
.v2-header .site-header__brand { flex: 1 1 0; }
.v2-header .v2-nav { flex: 0 0 auto; justify-content: center; }
.v2-header .site-header__actions { flex: 1 1 0; justify-content: flex-end; }
}
/* Themenzeile kompakt, mittig und nah am Titel */
@media (min-width: 900px) {
.v2-hero .v2-hero__themen { max-width: 760px; margin-top: 1.1rem; }
.v2-hero .v2-hero__themen .v2-lose__knopf { padding: 0.8rem 0.4rem; font-size: clamp(0.9rem, 1.05vw, 1rem); }
}
/* Handy: Pop-ups als Bottom-Sheet mit Bewegung (09.10.2026) */
@keyframes sheet-inhalt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
.v2-lose-fenster { align-items: flex-end; padding: 0; transition: background-color 380ms ease, backdrop-filter 380ms ease; }
.v2-lose-fenster.is-open { background: rgba(14,15,18,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.v2-lose-fenster__panel, .v2-alltag-fenster__panel {
width: 100% !important; max-height: 90dvh; border-radius: 0 !important;
padding: 0.9rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
opacity: 1; transform: translateY(105%);
transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.v2-lose-fenster.is-open .v2-lose-fenster__panel,
.v2-alltag-fenster.is-open .v2-alltag-fenster__panel { transform: none; }
.v2-lose-fenster__panel::before, .v2-alltag-fenster__panel::before, .v2-support-card::before {
content: ""; display: block; width: 44px; height: 4px; margin: 0 auto 1rem;
background: rgba(14,15,18,.28);
}
.v2-lose-fenster.is-open .v2-lose-fenster__inhalt > *,
.v2-lose-fenster.is-open .v2-lose-paar > *,
.v2-lose-fenster.is-open .v2-lose-doppel > *,
.v2-alltag-fenster.is-open .v2-alltag-fenster__panel > *:not(.v2-alltag-fenster__zu) {
animation: sheet-inhalt 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.v2-lose-fenster.is-open :is(.v2-lose-fenster__inhalt, .v2-lose-paar, .v2-lose-doppel) > :nth-child(2),
.v2-alltag-fenster.is-open .v2-alltag-fenster__panel > :nth-child(3) { animation-delay: 70ms; }
.v2-lose-fenster.is-open :is(.v2-lose-fenster__inhalt, .v2-lose-paar, .v2-lose-doppel) > :nth-child(3),
.v2-alltag-fenster.is-open .v2-alltag-fenster__panel > :nth-child(4) { animation-delay: 140ms; }
.v2-lose-fenster.is-open :is(.v2-lose-fenster__inhalt, .v2-lose-paar, .v2-lose-doppel) > :nth-child(n+4),
.v2-alltag-fenster.is-open .v2-alltag-fenster__panel > :nth-child(n+5) { animation-delay: 210ms; }
.v2-support-card { transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1); transform: translateY(105%); }
.v2-support-overlay.is-open .v2-support-card { transform: none; }
.v2-lose-fenster__panel.is-ziehen, .v2-alltag-fenster__panel.is-ziehen { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
.v2-lose-fenster__panel, .v2-alltag-fenster__panel, .v2-support-card { transition: none !important; animation: none !important; }
.v2-lose-fenster :is(.v2-lose-fenster__inhalt, .v2-lose-paar, .v2-lose-doppel) > * { animation: none !important; }
}
/* Themenzeile: natürliche Breite, nie umbrechen */
.v2-hero .v2-lose__text { white-space: nowrap; }
@media (min-width: 900px) {
.v2-hero .v2-hero__themen { max-width: none; }
.v2-hero .v2-hero__themen .v2-lose__liste {
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0 clamp(1.5rem, 3.2vw, 3.25rem);
}
.v2-hero .v2-hero__themen .v2-lose__punkt { flex: 0 0 auto; }
}
/* Themen rücken näher an "Im Fokus" */
body .v2-hero .v2-hero__themen { padding-top: 0 !important; margin-top: 0 !important; }
.v2-hero__fokus { margin-bottom: 1rem; }
/* Kontakt-Knopf im Hero, mittig unter den Themen */
.v2-hero__cta { display: table; margin: clamp(1.25rem, 3vh, 2rem) auto 0; }
.v2-hero .v2-hero__cta { display: flex; width: fit-content; min-width: 0; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; }
/* Kühleres, transparenteres Glas (09.10.2026): keine Farbverstärkung, bläulicher Ton */
.v2-lose-fenster__panel, .v2-alltag-fenster__panel, .v2-support-card {
background: linear-gradient(155deg, rgba(238,244,252,.46), rgba(214,224,236,.36)) !important;
-webkit-backdrop-filter: blur(30px) saturate(0.85) brightness(1.15);
backdrop-filter: blur(30px) saturate(0.85) brightness(1.15);
}
.v2-lose-kachel, .v2-support-option, .v2-support-contact__item { background: rgba(240,246,252,.34) !important; }
.v2-lose-doppel__spalte { background: rgba(240,246,252,.28); }
main > section:not(.v2-hero):not(.hero-page) > .v2-container,
.v2-videoseite main > section > .section__inner,
.v2-videoseite .v2-hero--light > .v2-hero__inner,
.v2-videoseite main > .doc-body {
-webkit-backdrop-filter: blur(22px) saturate(0.9);
backdrop-filter: blur(22px) saturate(0.9);
}
/* Handy: weniger Weichzeichner, damit das Bild dahinter durchscheint */
@media (max-width: 640px) {
.v2-lose-fenster__panel, .v2-alltag-fenster__panel, .v2-support-card {
background: linear-gradient(160deg, rgba(238,244,252,.34), rgba(214,224,236,.24)) !important;
-webkit-backdrop-filter: blur(9px) saturate(0.9) brightness(1.1);
backdrop-filter: blur(9px) saturate(0.9) brightness(1.1);
}
.v2-lose-fenster.is-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14,15,18,.28); }
}
/* Kacheln in den Fenstern: feiner Rahmen wie bei Managed Services (09.10.2026) */
.v2-lose-kachel, .v2-lose-doppel__spalte {
border: 1px solid var(--v2-blue) !important; border-radius: 0 !important; box-shadow: none !important;
}
.v2-support-option, .v2-support-contact__item {
border: 1px solid var(--v2-blue) !important; box-shadow: none !important;
}
/* Video-Seiten auf dem Handy: gleiche Breite für alle Glasflächen, Foto im Panel (09.10.2026) */
@media (max-width: 760px) {
.v2-videoseite .hero-page { padding-left: 0 !important; padding-right: 0 !important; }
.v2-videoseite .hero-page__inner { margin: 0 0.6rem !important; overflow: hidden; }
.v2-videoseite .hero-page__text { padding: 1.5rem 1.25rem 1.25rem !important; }
.v2-videoseite .hero-page__photo { margin: 0 !important; min-height: 0 !important; width: 100%; }
.v2-videoseite .hero-page__photo img {
display: block; width: 100%; height: 280px; object-fit: cover; object-position: 50% 30%;
}
.v2-videoseite main > section > .v2-container { padding: 1.25rem; }
/* dunkler Kopfblock wird zur ruhigen Überschrift auf dem Glas */
.v2-videoseite .ueber-split .v2-secthead { background: transparent !important; padding: 0 !important; }
.v2-videoseite .ueber-split .v2-secthead__title { color: var(--v2-ink) !important; }
.v2-videoseite .ueber-split .v2-secthead__eyebrow { color: var(--v2-blue) !important; border-color: var(--v2-coral) !important; }
.v2-videoseite .ueber-split { gap: 1.25rem; }
}
@media (max-width: 760px) {
.v2-videoseite .hero-page__inner { width: auto !important; max-width: none !important; margin-left: 0.6rem !important; margin-right: 0.6rem !important; }
.v2-videoseite .ueber-split { border: 0 !important; }
.v2-videoseite .ueber-split > div { padding: 0 !important; }
.v2-videoseite .hero-page__photo img { object-position: 50% 40%; }
}
/* Karten gleich hoch (Hinter SAMiT) */
.ueber-mich-seite .stats-grid { grid-auto-rows: 1fr; }
.ueber-mich-seite .stat-card { height: 100%; box-sizing: border-box; }
/* Hinter SAMiT auf Tablet (761 bis 980 px): gleiche Regeln wie auf dem Handy */
@media (min-width: 761px) and (max-width: 980px) {
.v2-videoseite .hero-page { padding-left: 0 !important; padding-right: 0 !important; }
.v2-videoseite .hero-page__inner { width: auto !important; max-width: none !important; margin: 0 0.6rem !important; overflow: hidden; }
.v2-videoseite .hero-page__text { padding: 2rem 1.75rem 1.5rem !important; }
.v2-videoseite .hero-page__photo { margin: 0 !important; min-height: 0 !important; width: 100%; }
.v2-videoseite .hero-page__photo img { display: block; width: 100%; height: 340px; object-fit: cover; object-position: 50% 40%; }
.v2-videoseite main > section > .v2-container { padding: 1.75rem; }
.v2-videoseite .ueber-split { border: 0 !important; gap: 1.5rem; }
.v2-videoseite .ueber-split > div { padding: 0 !important; }
.v2-videoseite .ueber-split .v2-secthead { background: transparent !important; padding: 0 !important; }
.v2-videoseite .ueber-split .v2-secthead__title { color: var(--v2-ink) !important; }
.v2-videoseite .ueber-split .v2-secthead__eyebrow { color: var(--v2-blue) !important; border-color: var(--v2-coral) !important; }
}
@media (max-width: 980px) {
.v2-videoseite .hero-page__photo img { height: 340px !important; object-fit: cover !important; }
.v2-videoseite main > section > .v2-container { margin-left: 0.6rem !important; margin-right: 0.6rem !important; width: auto !important; max-width: none !important; }
}
@media (max-width: 760px) {
.v2-videoseite .hero-page__photo img { height: 280px !important; }
}
/* Pop-ups heller (09.10.2026): weißer Ton, mehr Aufhellung, weniger Abdunklung dahinter */
.v2-lose-fenster__panel, .v2-alltag-fenster__panel, .v2-support-card {
background: linear-gradient(155deg, rgba(246,250,254,.62), rgba(228,236,246,.52)) !important;
-webkit-backdrop-filter: blur(26px) saturate(0.9) brightness(1.45);
backdrop-filter: blur(26px) saturate(0.9) brightness(1.45);
}
.v2-lose-fenster.is-open { background: rgba(14,15,18,.18); }
.v2-lose-kachel, .v2-support-option, .v2-support-contact__item { background: rgba(248,251,255,.42) !important; }
.v2-lose-doppel__spalte { background: rgba(248,251,255,.36); }
@media (max-width: 640px) {
.v2-lose-fenster__panel, .v2-alltag-fenster__panel, .v2-support-card {
background: linear-gradient(160deg, rgba(246,250,254,.58), rgba(228,236,246,.48)) !important;
-webkit-backdrop-filter: blur(9px) saturate(0.9) brightness(1.4);
backdrop-filter: blur(9px) saturate(0.9) brightness(1.4);
}
.v2-lose-fenster.is-open { background: rgba(14,15,18,.14); }
}
/* KI-Seiten: Säulen als gerahmte Kacheln, gleich hoch (09.10.2026) */
body[data-seitenvideo="ki-automation"] .v2-pillars__grid {
grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch;
}
body[data-seitenvideo="ki-automation"] .v2-pillar {
border: 1px solid var(--v2-blue); background: rgba(248, 251, 255, 0.34);
padding: 1.6rem 1.6rem 1.75rem; border-radius: 0; height: 100%; box-sizing: border-box;
}
body[data-seitenvideo="ki-automation"] .v2-pillar h3 { margin-top: 0; }
@media (max-width: 980px) {
body[data-seitenvideo="ki-automation"] .v2-pillars__grid { grid-template-columns: minmax(0, 1fr); }
}
/* Mosaik-Textblock auf Video-Seiten als Milchglas wie die übrigen Flächen */
.v2-videoseite .v2-mosaic__content {
background: rgba(236, 239, 242, var(--glas, 0.68));
-webkit-backdrop-filter: blur(22px) saturate(0.9); backdrop-filter: blur(22px) saturate(0.9);
}
/* Seiten ohne Hero (Mitbauen, 404): erstes Panel beginnt unter der Kopfzeile */
.v2-videoseite main > section.v2-section:first-child { margin-top: 5.75rem; }
/* Handy: der Fokus-Knopf auf der Startseite zeigt sein Wort (09.10.2026) */
@media (max-width: 620px) {
.v2-alltag-knopf--inline { width: auto; padding: 0 1.1rem 0 0.9rem; justify-content: center; }
.v2-alltag-knopf--inline .v2-alltag-knopf__label {
position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap;
}
}
/* Beschreibungstexte in Kacheln auf Glas: dunkler und etwas größer (09.10.2026) */
.v2-videoseite .stat-card p,
.v2-videoseite .v2-pillar p,
.v2-lose-doppel li span,
.v2-lose-kachel p { color: #2c303a; }
.v2-videoseite .stat-card p, .v2-videoseite .v2-pillar p { font-size: 14.5px; }
/* Absatz direkt unter einer Checkliste bekommt Luft (Cloud-Migration u. a.) */
.v2-videoseite main ul.v2-package__list + p,
.v2-videoseite main ul.v2-baustein__list + p,
.v2-videoseite main ul.painpoint-list + p { margin-top: 1.25rem; }
/* iPhone: der Videohintergrund deckt auch die Fläche hinter der ein- und
ausfahrenden Adressleiste, sonst blitzt beim Scrollen unten ein Streifen auf */
@supports (height: 100lvh) {
.v2-seitenvideo { bottom: auto; height: 100lvh; }
}
/* ============================================================
Gesamtdurchsicht 10.10.2026
============================================================ */
/* Navigation exakt in der Mitte der Kopfzeile, unabhängig davon, wie breit
Logo und Knöpfe sind. Rechts sind 253 px für das Aufziehen der Knöpfe
reserviert, links nicht, deshalb saß die Nav zwischen 1121 und 1390 px
bis zu 86 px neben der Mitte. */
@media (min-width: 1040px) {
.v2-header .v2-nav {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
flex: none; margin: 0;
}
.v2-header .site-header__brand { flex: 0 0 auto; min-width: 0; }
.v2-header .site-header__actions { flex: 0 0 auto; margin-left: auto; }
}
/* Bis 1199 px engere Nav, damit ein aufgezogener Knopf sie nicht berührt */
@media (min-width: 1121px) and (max-width: 1199px) {
.v2-header .v2-nav { gap: 0.9rem; font-size: 0.9rem; }
}
/* Alle Glasflächen einer Seite gleich breit.
Handy und Tablet: überall derselbe Rand, auch Hero-Panel und Rechtstexte. */
@media (max-width: 980px) {
.v2-videoseite main > section > .section__inner,
.v2-videoseite .v2-hero--light > .v2-hero__inner,
.v2-videoseite main > .doc-body {
width: calc(100% - 1.2rem) !important; max-width: none !important;
margin-left: auto !important; margin-right: auto !important; box-sizing: border-box;
}
}
/* Desktop: auf Seiten mit schmaler Lesespalte folgt das Hero-Panel deren Breite */
@media (min-width: 981px) {
.v2-videoseite:has(main > .doc-body) .v2-hero--light > .v2-hero__inner { width: min(740px, calc(100% - 3rem)); }
.v2-videoseite:has(#formular > .v2-container[style*="720px"]) .v2-hero--light > .v2-hero__inner { width: min(720px, calc(100% - 3rem)); }
}
/* Drei Kacheln in zwei Spalten (Tablet): die dritte läuft über die ganze Breite
statt allein links zu stehen */
@media (min-width: 721px) and (max-width: 980px) {
.v2-bausteine--drei > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Zwischen 1100 und 1219 px ist neben der mittigen Nav kein Platz für das
Aufziehen der Knöpfe. Sie bleiben dort rund, der Tooltip nennt die Funktion. */
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) and (max-width: 1219px) {
.v2-header .v2-btn--support:hover .v2-btn--support__label,
.v2-header .v2-btn--support:focus-visible .v2-btn--support__label,
.v2-header .v2-btn--erstgespraech:hover .v2-btn--erstgespraech__label,
.v2-header .v2-btn--erstgespraech:focus-visible .v2-btn--erstgespraech__label {
max-width: 0; margin-right: 0; opacity: 0;
}
}
/* Aufklappmenü auf Video-Seiten: oben liegt es jetzt oft über einer hellen
Glasfläche, der fast durchsichtige Grund war dort unlesbar */
.v2-videoseite .v2-header:not(.has-scrolled) .nav-dropdown {
background: rgba(14, 22, 36, 0.9);
-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
border-color: rgba(228, 231, 234, 0.18);
}
/* Bewegtes Ersatzbild, wenn iOS dem Video den Selbststart verweigert */
.v2-seitenvideo .v2-video-ersatz,
.v2-hero__bg .v2-video-ersatz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-seitenvideo .v2-video-ersatz { opacity: 0; transition: opacity 900ms ease; }
.v2-seitenvideo.ist-bewegt .v2-video-ersatz { opacity: 1; }
/* Fenster "Euer Ansprechpartner" am Handy: der breite Bildrahmen schnitt den
Kopf ab. Höherer Rahmen und Ausschnitt von oben, damit der ganze Kopf mit
etwas Luft darüber zu sehen ist. */
@media (max-width: 719px) {
.v2-lose-person__foto { aspect-ratio: 4 / 3; }
.v2-lose-person__foto img { object-position: 50% 0%; }
}
/* Themen im Hero: Coral-Linie beim Zeigen (nur Geräte mit Mauszeiger).
Läuft von links herein und nach rechts hinaus, nie beim Scrollen. */
@media (hover: hover) and (pointer: fine) {
.v2-hero .v2-hero__themen .v2-lose__text {
padding-bottom: 0.3em;
background-image: linear-gradient(var(--v2-coral), var(--v2-coral));
background-repeat: no-repeat;
background-position: 100% 100%;
background-size: 0% 1.5px;
transition: background-size 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.v2-hero .v2-hero__themen .v2-lose__knopf:hover .v2-lose__text,
.v2-hero .v2-hero__themen .v2-lose__knopf:focus-visible .v2-lose__text {
background-position: 0% 100%;
background-size: 100% 1.5px;
}
}
@media (prefers-reduced-motion: reduce) {
.v2-hero .v2-hero__themen .v2-lose__text { transition: none; }
}
/* ============================================================
Kopfzeile oben als zarte Glasleiste (Entscheid Saman 10.10.2026)
Vorher stand die Navigation als loser Text über dem Hero und sah aus wie
eine zweite Themenzeile. Jetzt bilden Logo, Navigation und Knöpfe von
Anfang an ein eigenes Element. Das Video scheint weiter durch. Beim
Scrollen wird daraus wie bisher die helle Milchglas-Pille.
Gilt nicht für helle Seiten ohne Videohintergrund (data-hero="light").
============================================================ */
.v2-header {
transition: color 320ms ease, top 320ms ease, background-color 320ms ease,
border-color 320ms ease, box-shadow 320ms ease;
}
body:not([data-hero="light"]) .v2-header:not(.has-scrolled) {
background: rgba(255, 255, 255, 0.09);
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
border-color: rgba(255, 255, 255, 0.16);
box-shadow: 0 10px 34px rgba(8, 16, 30, 0.22);
}
/* Navigation: beim Zeigen leiser statt unterstrichen, die Coral-Linie gehört
den Themen im Hero */
.v2-header .v2-nav > a:hover,
.v2-header .v2-nav > .nav-item--dropdown > a:hover { text-decoration: none; opacity: 0.72; }
.v2-header .v2-nav > a,
.v2-header .v2-nav > .nav-item--dropdown > a { transition: opacity 200ms ease; }
/* Aufklappmenü an der Glasleiste: es sitzt unter der Leiste statt in ihr,
und trägt einen dichten dunklen Grund. Ein Milchglas im Milchglas kann
der Browser nicht weichzeichnen, der Text darunter schien sonst durch. */
body:not([data-hero="light"]) .v2-header:not(.has-scrolled) .nav-dropdown {
top: calc(100% + 2.1rem);
background: rgba(14, 22, 36, 0.92);
border-color: rgba(228, 231, 234, 0.18);
}
/* unsichtbare Brücke, damit der Zeiger auf dem Weg nach unten nicht abreißt */
body:not([data-hero="light"]) .v2-header:not(.has-scrolled) .nav-dropdown::before {
content: "";
position: absolute;
left: 0; right: 0;
top: -2.2rem;
height: 2.2rem;
}
/* Support-Fenster: die Leiste mit der Systemauswahl war zugeklappt um den
Zeilenabstand höher als die Leiste darüber. Beide sind jetzt gleich hoch. */
.v2-support-option--picker { row-gap: 0; }
/* Support-Fenster: Knöpfe Windows und Mac als Glas wie die Leisten,
statt weiß und deckend (Entscheid Saman 10.10.2026) */
.v2-support-os-picker__btn {
background: rgba(248, 251, 255, 0.42);
border: 1px solid var(--v2-blue);
color: #0e0f12;
}
.v2-support-os-picker__btn:hover,
.v2-support-os-picker__btn:focus-visible {
background: rgba(255, 255, 255, 0.75);
border-color: var(--v2-blue);
}
/* Kleine Zeile über der Hauptüberschrift: sagt in Suchworten, was die Seite
anbietet und wo. Der Markensatz darunter bleibt (Entscheid Saman 12.10.2026). */
.v2-suchzeile {
font-family: var(--v2-sans);
font-size: 12px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.16em;
text-transform: uppercase;
color: inherit;
opacity: 0.84;
margin: 0 0 1rem;
}
/* Startseite: Zeile unten im Hero. Ein Satz aus dem Betriebsalltag und was
SAMiT dann übernimmt, die Paare wechseln ruhig (sagt.js). Alle Paare liegen
in derselben Rasterzelle, sichtbar ist nur das aktive (Entscheid Saman 12.10.2026). */
.v2-hero { position: relative; }
.v2-sagt {
position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 6vh, 3.75rem); z-index: 2;
display: grid; justify-items: center; padding: 0 1.25rem;
text-align: center; color: var(--v2-silber);
}
.v2-sagt__paar {
grid-area: 1 / 1; max-width: 40rem;
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity 420ms ease, transform 620ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 420ms;
}
.v2-sagt__paar.ist-aktiv {
opacity: 1; visibility: visible; transform: none;
transition: opacity 520ms ease 380ms, transform 720ms cubic-bezier(.2,.7,.2,1) 380ms, visibility 0s;
}
.v2-sagt__satz {
font-family: var(--v2-display); font-weight: 400;
font-size: clamp(17px, 1.5vw, 21px); line-height: 1.3; color: #fff; margin: 0;
}
.v2-sagt__antwort {
display: inline; font-family: var(--v2-sans); font-size: 14.5px; line-height: 1.55;
color: rgba(228, 231, 234, 0.84); margin: 0;
}
.v2-sagt__mehr {
display: inline; margin-left: 0.35rem; white-space: nowrap;
font-family: var(--v2-sans); font-size: 14.5px; font-weight: 600; color: #fff; text-decoration: none;
background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
background-position: 0 100%; background-size: 0% 1px; padding-bottom: 2px;
transition: background-size 320ms ease;
}
.v2-sagt__mehr::after { content: " \2192"; }
.v2-sagt__mehr:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .v2-sagt__mehr:hover { background-size: 100% 1px; } }
@media (max-height: 640px) { .v2-sagt { display: none; } }
@media (prefers-reduced-motion: reduce) { .v2-sagt__paar, .v2-sagt__paar.ist-aktiv { transition: none; transform: none; } }
/* Managed Services: ein gemeinsamer Abschluss unter den drei Modellen statt
dreier gleicher Knöpfe (Entscheid Saman 12.10.2026) */
.v2-modelle-abschluss { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 40rem; text-align: center; }
.v2-modelle-abschluss__titel {
font-family: var(--v2-display); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.2; color: var(--v2-ink); margin: 0 0 0.6rem;
}
.v2-modelle-abschluss__text { font-family: var(--v2-sans); font-size: var(--v2-fs-body); line-height: 1.6; color: #2c303a; margin: 0 0 1.4rem; }
/* Kürzere Paare sitzen unten, damit der Abstand zum Rand gleich bleibt.
Am Handy kleiner, und auf niedrigen Bildschirmen weg, bevor es an die Themen stößt. */
.v2-sagt__paar { align-self: end; }
@media (max-width: 760px) {
.v2-sagt { bottom: clamp(1.1rem, 3.5vh, 2rem); }
.v2-sagt__satz { font-size: 16px; }
.v2-sagt__antwort, .v2-sagt__mehr { font-size: 13.5px; }
.v2-sagt__paar { max-width: 20.5rem; }
}
@media (max-width: 760px) and (max-height: 760px) { .v2-sagt { display: none; } }
/* Modelle auf einem gemeinsamen Raster (Entscheid Saman 12.10.2026):
Kopf und vier Zeilen. Stehen die Kacheln nebeneinander, liegen die Gruppen
und ihre Trennlinien auf gleicher Höhe. In Premium steht in der ersten
Zeile, was aus Produktiv mitkommt, umrandet, darunter die Zusätze mit Plus. */
.v2-package__ergebnis { margin-top: 0; }
@media (min-width: 721px) {
.v2-packages__grid > .v2-package {
display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0;
}
.v2-packages__grid > .v2-package > .v2-package__ergebnis {
display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0;
}
}
.v2-package__basis {
height: 100%; box-sizing: border-box;
display: flex; flex-direction: column; justify-content: center;
padding: 1rem 1.1rem; border: 1px solid var(--v2-coral); background: var(--v2-hinweis);
}
.v2-package__basis .v2-package__ziel { margin-bottom: 0.3rem; }
.v2-package__basis-text { margin: 0; font-size: var(--v2-fs-klein); line-height: 1.5; color: #2c303a; }
.v2-package__gruppe--plus > .v2-package__ziel::before { content: "+\00a0"; color: var(--v2-coral); font-weight: 700; }
/* die Linie zwischen dem umrandeten Feld und dem ersten Zusatz wäre doppelt */
.v2-package__gruppe--basis + .v2-package__gruppe { border-top-color: transparent; }
.v2-modelle-abschluss__hinweis { margin: 1.5rem auto 0; max-width: 34rem; font-family: var(--v2-sans); font-size: var(--v2-fs-klein); line-height: 1.5; color: #4a505c; }
/* Managed Services: ein einziger Abschluss am Seitenende, mittig gesetzt.
Der frühere zweite Abschluss unter den Modellen ist entfallen (Saman 12.10.2026). */
.v2-videoseite .v2-cta--mittig { text-align: center; }
.v2-cta--mittig .v2-cta__title { margin-bottom: 0.9rem; }
.v2-cta--mittig .v2-cta__lead { margin-bottom: 1.9rem; }
/* Abschluss auf allen Seiten mit Video-Hintergrund mittig: Überschrift und
Text standen links, der Knopf in der Mitte (Saman 12.10.2026).
Der Abschluss mit Foto bleibt linksbündig. */
.v2-videoseite .v2-cta:not(.v2-cta--person) { text-align: center; }
/* Startseite: an der Stelle von "Im Fokus" steht ein Glasfeld mit
"Wir kümmern uns um" und einem wechselnden Begriff (sagt.js). Es ersetzt
auch die Zeile unten im Hero. Alle Begriffe liegen in derselben Zelle, das
Feld ist so breit wie der längste, es springt also nicht (Saman 12.10.2026). */
.v2-dreh {
display: inline-flex; align-items: center; gap: 0.45em; margin: 0;
height: 38px; padding: 0 1.15rem; background: rgba(255, 255, 255, 0.12);
font-family: var(--v2-sans); font-size: 14.5px; line-height: 1; white-space: nowrap;
color: rgba(228, 231, 234, 0.84); border-radius: 999px;
}
.v2-dreh__feld { display: inline-grid; justify-items: start; }
.v2-dreh__wort {
grid-area: 1 / 1; color: #fff; font-weight: 600; text-decoration: none;
opacity: 0; visibility: hidden; transform: translateY(5px);
transition: opacity 320ms ease, transform 480ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 320ms;
}
.v2-dreh__wort.ist-aktiv {
opacity: 1; visibility: visible; transform: none;
transition: opacity 420ms ease 260ms, transform 560ms cubic-bezier(.2,.7,.2,1) 260ms, visibility 0s;
}
.v2-dreh__wort::after { content: "\00a0\2192"; font-weight: 400; opacity: 0.8; }
.v2-dreh__wort:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .v2-dreh:hover { background: rgba(255, 255, 255, 0.2); } }
@media (max-width: 420px) { .v2-dreh { font-size: 13px; padding: 0 0.9rem; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .v2-dreh__wort, .v2-dreh__wort.ist-aktiv { transition: none; transform: none; } }
/* Das Feld ist reiner Text, ohne Verlinkung und ohne Pfeil (Saman 12.10.2026) */
.v2-dreh__wort::after { content: none; }
@media (hover: hover) and (pointer: fine) { .v2-dreh:hover { background: rgba(255, 255, 255, 0.12); } }
/* Startseite bleibt minimal (Entscheid Saman 12.10.2026): kein Feld unter dem
Titel, und der Knopf "Im Fokus" erscheint dort nicht. Auf den übrigen
Seiten bleibt er unten rechts. */
/* Die Startseite erkennt man an den Themen im Hero, die Seitenkennung
tragen alle Seiten gleich. */
body:has(.v2-hero__themen) .v2-alltag-knopf { display: none !important; }
/* Sehr schmale Handys: die Zeile über der Hauptüberschrift bleibt einzeilig */
@media (max-width: 360px) { .v2-suchzeile { font-size: 11px; letter-spacing: 0.1em; } }
/* Kopfzeile und Glasflächen auf einer Flucht (Saman 14.10.2026):
Bis 980 px stehen alle Flächen 0,6rem vom Rand, darüber sind sie
höchstens 1120 px breit und mindestens 24 px vom Rand. Die Kopfzeile
folgt genau diesen Kanten, ebenso das Panel oben auf den Leistungsseiten.
Die Seitenkennung data-seitenvideo steht schon im Quelltext, so springt
die Kopfzeile beim Laden nicht. */
@media (min-width: 981px) {
body[data-seitenvideo] .v2-header {
left: max(24px, calc((100% - 1120px) / 2));
right: max(24px, calc((100% - 1120px) / 2));
}
.v2-videoseite .hero-page { padding-left: 0 !important; padding-right: 0 !important; }
.v2-videoseite .hero-page__inner { width: min(1120px, calc(100% - 48px)) !important; max-width: none !important; box-sizing: border-box; }
}
@media (max-width: 980px) {
body[data-seitenvideo] .v2-header { left: 0.6rem; right: 0.6rem; }
}
/* Startseite, Fenster "Unser Ansatz" als kurzer Text statt Spalten (Saman 14.10.2026) */
.v2-lose-ansatz p:not(.v2-lose-fenster__lead) {
font-family: var(--v2-sans); font-size: var(--v2-fs-body); line-height: 1.65;
color: #2c303a; margin: 0 0 1rem; max-width: 58ch;
}
.v2-lose-ansatz p:last-child { margin-bottom: 0; }
/* Der erste Satz ist der Einstieg, in der Überschriftenschrift etwas größer */
.v2-lose-ansatz .v2-lose-fenster__lead {
font-family: var(--v2-display); font-weight: 400; font-size: clamp(19px, 1.7vw, 22px);
line-height: 1.35; color: var(--v2-ink); margin: 0 0 1.25rem; max-width: 34ch;
}
/* Schlusssatz im Fenster "Unser Ansatz": greift die Tagline auf */
.v2-lose-ansatz p.v2-lose-ansatz__schluss {
font-family: var(--v2-display); font-size: clamp(17px, 1.5vw, 19px); color: var(--v2-blue);
margin-top: 1.25rem;
}
/* Startseite, Fenster "Kennt ihr das?": Schlusssatz wie im Fenster "Unser Ansatz" (Saman 14.10.2026) */
.v2-lose-fenster__text.v2-lose-kennt__schluss {
font-family: var(--v2-display); font-size: clamp(17px, 1.5vw, 19px); color: var(--v2-blue);
margin-top: 1.25rem;
}
/* Büro Seestadt auf /kontakt/: Adresse links, Foto und Karte rechts (Saman 19.10.2026) */
.kt-buero { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.kt-buero__adresse { font-size: var(--v2-fs-lead); line-height: 1.5; color: var(--v2-ink); margin: 0.6rem 0 0.75rem; }
.kt-buero__hinweis { font-size: var(--v2-fs-klein); line-height: 1.55; color: #3a3f4b; margin: 0 0 1.1rem; max-width: 40ch; }
.kt-buero__sitz { font-size: var(--v2-fs-klein); color: #3a3f4b; margin: 1.4rem 0 0; }
.kt-buero__bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.kt-buero__foto, .kt-buero__karte { margin: 0; }
.kt-buero__foto img, .kt-buero__karte img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--v2-blue); }
.kt-buero__foto figcaption, .kt-buero__karte figcaption { font-size: 0.75rem; color: #3a3f4b; margin-top: 0.4rem; }
@media (max-width: 860px) {
.kt-buero { grid-template-columns: 1fr; }
.kt-buero__bilder { order: -1; }
}
@media (max-width: 480px) { .kt-buero__bilder { grid-template-columns: 1fr; } }