/*
Theme Name: SMD Theme
Theme URI: https://swissmediadesign.com
Author: Shane Buchs, Swiss Media Design GmbH
Author URI: https://swissmediadesign.com
Description: Handgeschriebenes Premium-Theme für swissmediadesign.com. Dark-First mit Light-Mode, Typografie als Statement, ohne Page Builder und ohne Framework-Ballast.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smd-theme
Tags: custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/
/* --------------------------------------------------------------------------
1. Schriften (lokal, kein CDN)
Space Grotesk = Display/Headlines, Inter = Lauftext. Beide OFL-lizenziert.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Space Grotesk";
src: url("assets/fonts/space-grotesk-var.woff2") format("woff2");
font-weight: 300 700;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("assets/fonts/inter-var.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
}
/* Comic Neue (OFL): gebuendelt fuer die Doge-Optik auf ALLEN Plattformen
(inkl. Android), wo es kein System-Comic-Font gibt. Laedt nur, wo die
Doge-Woerter im DOM stehen (Ueber-uns-Team). */
@font-face {
font-family: "Comic Neue";
src: url("assets/fonts/comic-neue-bold.woff2") format("woff2");
font-weight: 700;
font-display: swap;
}
/* --------------------------------------------------------------------------
2. Design-Tokens: Dark ist Standard, Light Mode überschreibt.
Farben ausschliesslich über Custom Properties, damit beide Modes
vollständig funktionieren.
-------------------------------------------------------------------------- */
:root {
/* Dark Mode (Standard) */
--bg: #0a0a0c;
--bg-soft: #121215;
--bg-raise: #17171b;
--ink: #f4f4f1;
--ink-soft: #b9b9b4;
--ink-faint: #82827d;
--line: rgba(255, 255, 255, 0.1);
--line-strong: rgba(255, 255, 255, 0.22);
--accent: #ff4438;
--accent-2: #ff7a29;
--accent-ink: #ffffff;
--accent-grad: linear-gradient(120deg, var(--accent), var(--accent-2));
--glow: 0 0 22px rgba(255, 68, 56, 0.5), 0 0 60px rgba(255, 122, 41, 0.25);
--glow-strong: 0 0 28px rgba(255, 68, 56, 0.62), 0 0 74px rgba(255, 122, 41, 0.34);
--glass-bg: rgba(255, 255, 255, 0.04);
--glass-border: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 40%, rgba(255, 122, 41, 0.25));
--header-bg: rgba(10, 10, 12, 0.7);
--shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
--inverse-bg: #0a0a0c;
--font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
--measure: 42rem;
--measure-wide: 62rem;
--wrap: 78rem;
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2.5rem;
--space-5: 4.5rem;
--space-6: 7.5rem;
--radius: 10px;
--radius-s: 6px;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-mode="light"] {
--bg: #faf9f6;
--bg-soft: #f1efea;
--bg-raise: #ffffff;
--ink: #131312;
--ink-soft: #4c4c48;
--ink-faint: #7c7c76;
--line: rgba(19, 19, 18, 0.12);
--line-strong: rgba(19, 19, 18, 0.3);
--accent: #d62820;
--accent-2: #e8590c;
--glow: 0 0 28px rgba(214, 40, 32, 0.18);
--glow-strong: 0 0 32px rgba(214, 40, 32, 0.26);
--glass-bg: rgba(255, 255, 255, 0.6);
--glass-border: linear-gradient(135deg, rgba(19, 19, 18, 0.18), rgba(19, 19, 18, 0.05) 40%, rgba(232, 89, 12, 0.3));
--header-bg: rgba(250, 249, 246, 0.75);
--shadow: 0 18px 50px rgba(19, 19, 18, 0.12);
}
/* --------------------------------------------------------------------------
3. Reset & Basis
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: 1.0625rem;
line-height: 1.7;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
transition: background 0.3s ease, color 0.3s ease;
}
::selection {
background: var(--accent);
color: var(--accent-ink);
text-shadow: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.025em;
margin: 0 0 var(--space-2);
text-wrap: balance;
}
h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.75rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.12; }
h4 { font-size: 1.1rem; letter-spacing: 0; }
/* Outline-Typo (Azurio-Stil): transparente Füllung, feine Kontur */
.outline-text {
color: transparent;
-webkit-text-stroke: 1.5px var(--ink);
}
p, ul, ol {
margin: 0 0 var(--space-2);
}
a {
color: var(--ink);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover {
color: var(--accent);
}
/* Animierte Unterstreichung: DAS Hover-Pattern für alle Textlinks der
Site (wie Navigation): dezente Ruhe-Linie, beim Hover baut sich der
Gradient von links nach rechts darüber auf. Wiederverwendbar über die
Klasse .u-link oder die Selektoren hier (Buttons und Cards ausgenommen). */
.u-link,
.entry-content a:not(.button):not(.smd-logo-tile),
.post-navigation a,
.projekt-facts a {
text-decoration: none;
background-image: var(--accent-grad), linear-gradient(var(--line-strong), var(--line-strong));
background-repeat: no-repeat;
background-size: 0% 2px, 100% 1px;
background-position: 0 100%, 0 100%;
transition: background-size 0.35s var(--ease-out), color 0.2s ease;
}
.u-link:hover,
.entry-content a:not(.button):not(.smd-logo-tile):hover,
.post-navigation a:hover,
.projekt-facts a:hover {
background-size: 100% 2px, 100% 1px;
}
/* Im dunklen Footer ist die Ruhe-Linie immer hell (Footer bleibt in
beiden Modes dunkel, die Custom Property würde im Light Mode kippen) */
.site-footer .u-link {
background-image: var(--accent-grad), linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28));
}
/* Kontakt-Links (Telefon/E-Mail) site-weit: beim Hover/Tap faerbt sich der Text
im selben Orange-Gradient wie die Akzentstriche (--accent-grad, identische
Stops/Richtung), via background-clip: text. Da die .u-link-Unterstreichung
selbst ein Hintergrund ist (wuerde von background-clip:text auf die Textform
geclippt), kommt der Hover-Unterstrich hier aus einem eigenen ::after-Balken,
ebenfalls im Gradient. Normalzustand bleibt weiss. !important schlaegt die
kontext-spezifischen Hover-Farben (.entry-content / .site-footer) sauber. */
a[href^="tel:"],
a[href^="mailto:"] {
position: relative;
}
a[href^="tel:"]::after,
a[href^="mailto:"]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--accent-grad);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s var(--ease-out);
pointer-events: none;
}
a[href^="tel:"]:hover,
a[href^="tel:"]:focus-visible,
a[href^="mailto:"]:hover,
a[href^="mailto:"]:focus-visible {
background: var(--accent-grad) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
}
a[href^="tel:"]:hover::after,
a[href^="tel:"]:focus-visible::after,
a[href^="mailto:"]:hover::after,
a[href^="mailto:"]:focus-visible::after {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
a[href^="tel:"]::after,
a[href^="mailto:"]::after { transition: none; }
}
blockquote {
margin: var(--space-3) 0;
padding-left: var(--space-3);
border-left: 2px solid var(--accent);
color: var(--ink-soft);
font-size: 1.2rem;
}
hr {
border: 0;
border-top: 1px solid var(--line);
margin: var(--space-4) 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--space-2);
}
th, td {
text-align: left;
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--line);
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
4. Layout-Helfer
-------------------------------------------------------------------------- */
.wrap {
max-width: var(--wrap);
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.prose { max-width: var(--measure); }
.section {
padding-block: clamp(4rem, 10vw, 8.5rem);
position: relative;
}
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
/* Asymmetrischer Sektionskopf: grosse Headline links, Lead rechts unten */
.section-head {
display: grid;
gap: var(--space-2) var(--space-5);
margin-bottom: clamp(2rem, 5vw, 4rem);
}
/* Ueber-uns: Lead-Text steht (anders als bei Leistungen/Referenzen) NICHT im
section-head, sondern im Grid darunter. Darum hier engerer Abstand = derselbe
Wert wie der Titel-zu-Lead-Abstand der anderen Sektionen (section-head row-gap
var(--space-2)) -> Titel und Text gehoeren als Einheit zusammen. Text-zu-Button
bleibt unberuehrt (liegt im Grid). */
.section-head--compact { margin-bottom: var(--space-2); }
@media (min-width: 64rem) {
.section-head {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
align-items: end;
}
.section-head--flip > :first-child { order: 2; }
.section-head--flip > :last-child { order: 1; }
}
.section-head h2 { margin-bottom: 0; }
/* Riesige Outline-Sektionsnummer hinter dem Kopf (data-index="01" …) */
.section-head[data-index] { position: relative; }
.section-head[data-index]::before {
content: attr(data-index);
position: absolute;
top: -0.55em;
right: 0;
font-family: var(--font-display);
font-size: clamp(5rem, 12vw, 10rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: transparent;
-webkit-text-stroke: 1px var(--line-strong);
pointer-events: none;
z-index: -1;
}
/* Eyebrow-Label: präsentes Sektions-Label, ein Pattern für die ganze Site
(Startseiten-Sektionen, Page-Heros der Unterseiten, Ablauf) */
.section__kicker {
display: inline-flex;
align-items: center;
gap: 0.85rem;
font-family: var(--font-mono);
font-size: clamp(0.92rem, 1.4vw, 1.05rem);
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-2);
}
.section__kicker::before {
content: "";
width: 2.75rem;
height: 3px;
border-radius: 2px;
background: var(--accent-grad);
box-shadow: 0 0 12px rgba(255, 68, 56, 0.55);
}
html[data-mode="light"] .section__kicker::before { box-shadow: none; }
.section__lead {
font-size: 1.15rem;
color: var(--ink-soft);
max-width: var(--measure);
margin-bottom: 0;
}
.skip-link {
position: absolute;
left: -9999px;
background: var(--ink);
color: var(--bg);
padding: 0.75rem 1.25rem;
z-index: 1000;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
word-wrap: normal !important;
}
/* Scroll-Progress: dünner leuchtender Gradient-Balken am oberen Rand */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--accent-grad);
box-shadow: var(--glow);
transform: scaleX(0);
transform-origin: 0 50%;
z-index: 1001;
pointer-events: none;
}
/* Einblendungen: staggered reveal, nur mit JS aktiv */
html.js .reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
transition-delay: calc(var(--stagger, 0) * 80ms);
}
html.js .reveal.is-in {
opacity: 1;
transform: none;
}
/* --------------------------------------------------------------------------
5. Header, Navigation, Mode-Toggle
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0; /* ausgeloggt: bündig oben */
z-index: 100;
background: transparent;
border-bottom: 1px solid transparent;
transition: border-color 0.3s ease;
}
/* Schutz vor WP Rocket "Automatic Lazy Rendering" (Vorfall 07.08.2026): das
Plugin setzt per [data-wpr-lazyrender] content-visibility:auto auf den
Header. Das implizite Paint-Containment schneidet Dropdown und mobiles
Menü an der Header-Box ab. !important ist nötig, weil die Plugin-Regel
gleiche Spezifität hat. */
.site-header {
content-visibility: visible !important;
contain: none !important;
}
/* Eingeloggt: Sticky-Offset an die WP-Adminbar koppeln. WordPress setzt
die Variable selbst (32px Desktop, 46px mobil), der Fallback deckt
ältere Setups ab. */
body.admin-bar .site-header {
top: var(--wp-admin--admin-bar--height, 32px);
}
@media (max-width: 782px) {
body.admin-bar .site-header {
top: var(--wp-admin--admin-bar--height, 46px);
}
}
/* Unter 600px scrollt die Adminbar weg (position absolute), der Header
darf dann wieder ganz oben kleben. */
@media (max-width: 600px) {
body.admin-bar .site-header { top: 0; }
}
/* Glass-Layer als Pseudo-Element. Wichtig: backdrop-filter direkt auf dem
Header würde ihn zum Containing Block für position:fixed machen und das
mobile Menü-Overlay einsperren. */
.site-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--header-bg);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
opacity: 0;
transition: opacity 0.3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header.is-scrolled::before { opacity: 1; }
/* Header über dem Overlay halten, damit Logo und Schliessen-X bedienbar bleiben */
body.nav-open .site-header { z-index: 100002; }
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
min-height: 5.75rem;
}
.site-logo { display: flex; align-items: center; order: 1; }
/* Logo ~20% praesenter, per clamp sauber skalierend (Mobile ~3.5rem -> Desktop 4.5rem);
bleibt innerhalb der Header-min-height (5.75rem / mobil 4.5rem), Leiste nicht hoeher. */
.site-logo__img { width: auto; height: clamp(3.5rem, 2.9rem + 1.6vw, 4.5rem); }
@media (max-width: 40rem) {
.site-header__inner { min-height: 4.5rem; }
}
/* Logo-Wechsel: dunkles Logo im Light Mode, helles im Dark Mode */
.site-logo__img--dark { display: block; }
.site-logo__img--light { display: none; }
html[data-mode="light"] .site-logo__img--dark { display: none; }
html[data-mode="light"] .site-logo__img--light { display: block; }
.main-nav { order: 2; }
.site-header__tools {
order: 3;
display: flex;
align-items: center;
gap: 0.6rem;
}
/* Top-Level: EINE Zeile, exakt mittig auf Header-Höhe, gleichmässige Gaps */
.main-nav > ul {
display: flex;
align-items: center;
gap: clamp(1.3rem, 2.4vw, 2.4rem);
list-style: none;
margin: 0;
padding: 0;
}
.main-nav li {
position: relative;
white-space: nowrap;
}
.main-nav > ul > li {
display: flex;
align-items: center;
flex: none;
}
.main-nav a {
display: inline-flex;
align-items: center;
font-family: var(--font-display);
text-decoration: none;
font-weight: 600;
font-size: 1.05rem;
line-height: 1;
letter-spacing: 0.01em;
white-space: nowrap;
color: var(--ink);
background-image: var(--accent-grad);
background-repeat: no-repeat;
background-size: 0% 3px;
background-position: 0 100%;
/* Symmetrisches Padding: Text bleibt exakt auf der Mittelachse des
Headers, die Underline sitzt an der Box-Unterkante. */
padding-block: 0.35rem;
transition: background-size 0.35s var(--ease-out), color 0.2s ease;
}
/* Eltern-Punkt mit Dropdown: kleiner Pfeil */
.main-nav .menu-item-has-children > a::after {
content: "";
display: inline-block;
width: 0.45em;
height: 0.45em;
margin-left: 0.45em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform 0.25s var(--ease-out);
}
/* Desktop (ab 64rem): Glass-Dropdown beim Hover/Fokus.
Die Submenüs sind hier IMMER aus dem Fluss (position:absolute), damit
sie das Top-Level nie umbrechen oder vertikal verschieben können. */
@media (min-width: 64rem) {
.main-nav .sub-menu {
position: absolute;
top: calc(100% + 0.85rem);
left: -1rem;
min-width: 16rem;
margin: 0;
padding: 0.6rem;
list-style: none;
display: block;
background: var(--header-bg);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px);
/* Grace-Period: schliesst erst nach 300ms, öffnet sofort (siehe unten) */
transition:
opacity 0.22s var(--ease-out) 0.3s,
transform 0.22s var(--ease-out) 0.3s,
visibility 0s linear 0.52s;
z-index: 10;
}
/* Unsichtbare Brücke zwischen Menüpunkt und Panel */
.main-nav .menu-item-has-children::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 1.1rem;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition:
opacity 0.22s var(--ease-out),
transform 0.22s var(--ease-out),
visibility 0s;
}
.main-nav .sub-menu li {
display: block;
white-space: nowrap;
}
.main-nav .sub-menu a {
display: block;
padding: 0.65rem 0.85rem;
font-size: 0.97rem;
font-weight: 500;
line-height: 1.3;
border-radius: var(--radius-s);
background-image: none;
transition: background 0.15s ease, color 0.15s ease;
}
.main-nav .sub-menu a:hover {
background: var(--glass-bg);
color: var(--accent);
}
/* Pfeil dreht, solange das Dropdown offen ist */
.main-nav .menu-item-has-children:hover > a::after,
.main-nav .menu-item-has-children:focus-within > a::after {
transform: rotate(225deg) translateY(2px);
}
/* Toggle-Button für Submenüs nur mobil */
.main-nav .sub-toggle { display: none; }
}
/* Sicherheitsnetz unterhalb des Desktop-Breakpoints: solange das Overlay
geschlossen ist, dürfen Submenüs nie das Layout beeinflussen. */
@media (max-width: 63.9375rem) {
.main-nav:not(.is-open) .sub-menu { display: none; }
}
.main-nav a:hover {
background-size: 100% 3px;
color: var(--ink);
}
/* Aktiver Menüpunkt: dauerhafte Akzent-Unterstreichung */
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a {
background-size: 100% 3px;
color: var(--ink);
}
.main-nav .menu-item-cta > a {
background: var(--accent-grad);
color: #fff;
padding: 0.6rem 1.25rem;
border-radius: 99px;
box-shadow: var(--glow);
}
/* Hover des Header-Kontakt-Buttons: siehe die gemeinsame Accent-Hover-Regel
im Button-Abschnitt (vereinheitlicht). */
/* Mode-Toggle (Sonne/Mond) */
.mode-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--glass-bg);
color: var(--ink);
cursor: pointer;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.mode-toggle:hover {
border-color: var(--line-strong);
transform: rotate(15deg);
}
/* Icon des Ziels anzeigen: Sonne im Dark Mode, Mond im Light Mode */
.mode-toggle__icon--sun { display: block; }
.mode-toggle__icon--moon { display: none; }
html[data-mode="light"] .mode-toggle__icon--sun { display: none; }
html[data-mode="light"] .mode-toggle__icon--moon { display: block; }
.nav-toggle {
display: none;
background: none;
border: 0;
padding: 0.5rem;
cursor: pointer;
}
.nav-toggle__bar {
display: block;
width: 24px;
height: 2px;
background: var(--ink);
margin: 5px 0;
transition: transform 0.25s var(--ease-out), opacity 0.2s ease;
}
@media (max-width: 63.9375rem) {
/* Schliessen-X über dem Overlay (Fix 14.08.): .main-nav ist ein KIND
des Headers (z-index 100001) und deckte die Header-Geschwister ab,
der Toggle war im offenen Zustand unsichtbar und unklickbar
(Sackgasse). Im selben Stacking-Kontext höher stapeln; Tap-Fläche
mit 0.65rem-Padding auf min. 44px. */
.nav-toggle {
display: block;
position: relative;
z-index: 100002;
padding: 0.65rem;
}
/* Body-Scroll-Lock, solange das Overlay offen ist */
body.nav-open { overflow: hidden; }
/* Vollbild-Overlay: fixed mit voller Viewport-Höhe (100dvh gegen das
iOS-Adressleisten-Problem), Adminbar-Offset über die WP-Variable,
z-index über Header (100) und Adminbar (99999). */
.main-nav {
position: fixed;
top: var(--wp-admin--admin-bar--height, 0px);
left: 0;
right: 0;
height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
background: var(--header-bg);
backdrop-filter: blur(22px) saturate(150%);
-webkit-backdrop-filter: blur(22px) saturate(150%);
display: none;
padding: 6rem var(--space-3) var(--space-4);
overflow-y: auto;
z-index: 100001;
}
/* Menüpunkte vertikal zentriert, unabhängig von der Scroll-Position */
.main-nav.is-open {
display: flex;
flex-direction: column;
justify-content: center;
}
.main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
/* Top-Level-Punkte: Text + Pfeil in EINER Zeile, das Submenü darf darunter
umbrechen (flex-wrap). So bleibt der Pfeil direkt neben dem Text statt
im leeren Raum zu schweben. */
.main-nav > ul > li { flex-wrap: wrap; align-items: center; }
.main-nav li { border-bottom: 1px solid var(--line); }
.main-nav li:last-child { border-bottom: 0; }
.main-nav .sub-menu li { border-bottom: 0; }
/* Submenü mobil: bricht unter den Hauptpunkt um (volle Breite), aufklappbar
über den Toggle-Button. Dezenter, einheitlicher Einzug gegenüber den
Hauptpunkten (linker Rand der Hauptpunkte plus fester Einzug). */
.main-nav .sub-menu {
display: none;
flex-basis: 100%;
width: 100%;
list-style: none;
margin: 0;
padding: 0 0 0.65rem 1rem;
}
.main-nav li.is-sub-open > .sub-menu { display: block; }
.main-nav .menu-item-has-children > a::after { display: none; }
/* Pfeil sitzt direkt rechts neben dem Text (kleiner Abstand), nicht mehr
absolut am rechten Rand. */
.main-nav .sub-toggle {
position: static;
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
margin-left: 0.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: 0;
border-radius: 0;
color: var(--ink);
cursor: pointer;
}
.main-nav .sub-toggle::before {
content: "";
width: 0.55em;
height: 0.55em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform 0.25s var(--ease-out);
}
.main-nav li.is-sub-open > .sub-toggle::before {
transform: rotate(225deg) translateY(-2px);
}
/* Gestaffelte Einblendung der Menüpunkte */
.main-nav.is-open > ul > li {
animation: nav-item-in 0.45s var(--ease-out) both;
}
.main-nav.is-open > ul > li:nth-child(1) { animation-delay: 0.04s; }
.main-nav.is-open > ul > li:nth-child(2) { animation-delay: 0.09s; }
.main-nav.is-open > ul > li:nth-child(3) { animation-delay: 0.14s; }
.main-nav.is-open > ul > li:nth-child(4) { animation-delay: 0.19s; }
.main-nav.is-open > ul > li:nth-child(5) { animation-delay: 0.24s; }
.main-nav.is-open > ul > li:nth-child(6) { animation-delay: 0.29s; }
.main-nav.is-open > ul > li:nth-child(7) { animation-delay: 0.34s; }
/* Gross und touch-freundlich */
.main-nav a {
display: block;
padding: 1.05rem 0.5rem;
font-size: clamp(1.35rem, 5vw, 1.7rem);
background-image: none;
}
.main-nav .sub-menu a {
font-size: 1.05rem;
padding: 0.55rem 0.5rem;
text-align: left;
color: var(--ink-soft);
}
/* Kontakt-Button linksbündig am selben linken Rand wie die Hauptpunkte,
nicht über die volle Breite zentriert. */
.main-nav .menu-item-cta > a {
display: inline-block;
width: auto;
margin: var(--space-2) 0 var(--space-2) 0.5rem;
padding: 0.7rem 1.5rem;
text-align: center;
border-radius: 99px;
background: var(--accent-grad);
color: #fff;
box-shadow: var(--glow);
}
body.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@keyframes nav-item-in {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
/* --------------------------------------------------------------------------
6. Buttons (magnetisch via JS: --mx/--my)
-------------------------------------------------------------------------- */
.button,
button[type="submit"],
input[type="submit"] {
display: inline-block;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
padding: 0.85rem 1.9rem;
border: 0;
border-radius: 99px;
text-decoration: none;
cursor: pointer;
background: var(--ink);
color: var(--bg);
transform: translate(var(--mx, 0), var(--my, 0));
transition: transform 0.25s var(--ease-out), filter 0.2s ease, box-shadow 0.2s ease;
will-change: transform;
}
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
filter: brightness(1.06);
color: var(--bg);
}
.button--accent,
button[type="submit"],
input[type="submit"] {
background: var(--accent-grad);
color: #fff;
box-shadow: var(--glow);
}
/* Einheitlicher Hover für ALLE orangen Buttons dieser Stil-Variante
(Accent-Buttons, Submit-Buttons UND der Header-Kontakt-Button): der
Verlauf hellt leicht auf, der Glow verstärkt sich dezent, der Text bleibt
sauber weiss und lesbar. Eine einzige Regel statt mehrerer Definitionen. */
.button--accent:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.main-nav .menu-item-cta > a:hover {
filter: brightness(1.08);
box-shadow: var(--glow-strong);
color: #fff;
}
.button--ghost {
background: transparent;
color: var(--ink);
box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.button--ghost:hover {
box-shadow: inset 0 0 0 1.5px var(--ink);
color: var(--ink);
}
.button--big {
font-size: 1.1rem;
padding: 1.05rem 2.4rem;
}
/* --------------------------------------------------------------------------
7. Hero: grosse Aussage, animierter Glow, Parallax (JS: --parallax)
-------------------------------------------------------------------------- */
.hero {
position: relative;
padding-block: clamp(1.75rem, 3.5vh, 3rem) clamp(1.25rem, 3vh, 2.5rem);
overflow: clip;
}
/* Desktop: kompletter Hero (Headline, Intro, Buttons, Kennzahlen) plus der
Marquee-Ticker darunter füllen zusammen genau ein Viewport (abzüglich
Sticky-Header ~5.85rem inkl. Border und Marquee ~4.2rem) und sind ohne
Scrollen sichtbar. Mobil bleibt der normale Fluss, dort darf gescrollt
werden. */
@media (min-width: 64rem) {
.hero {
min-height: calc(100vh - 5.85rem - 4.2rem);
min-height: calc(100dvh - 5.85rem - 4.2rem);
display: flex;
flex-direction: column;
justify-content: center;
}
.hero > .wrap { width: 100%; }
}
.hero__bg {
position: absolute;
inset: -20% -10%;
z-index: -1;
transform: translateY(var(--parallax, 0));
will-change: transform;
pointer-events: none;
}
/* Inhalt (Headline, Buttons, Stats) liegt immer über den Deko-Layern */
.hero__content {
position: relative;
z-index: 1;
}
.hero__bg::before,
.hero__bg::after {
content: "";
position: absolute;
width: 44vw;
height: 44vw;
min-width: 22rem;
min-height: 22rem;
border-radius: 50%;
filter: blur(90px);
opacity: 0.5;
animation: blob-drift 18s ease-in-out infinite alternate;
}
.hero__bg::before {
background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
top: -5%;
right: -5%;
}
.hero__bg::after {
background: radial-gradient(circle, var(--accent-2) 0%, transparent 65%);
bottom: -15%;
left: -10%;
animation-delay: -9s;
opacity: 0.35;
}
html[data-mode="light"] .hero__bg::before { opacity: 0.22; }
html[data-mode="light"] .hero__bg::after { opacity: 0.16; }
@keyframes blob-drift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-6%, 8%) scale(1.15); }
}
.hero__title {
/* vw UND vh im Spiel: auf flachen Laptops schrumpft die Headline,
damit Kennzahlen-Reihe und Marquee sicher ins Viewport passen */
font-size: clamp(2.75rem, min(9.5vw, 9vh), 7.5rem);
line-height: 1.04;
letter-spacing: -0.045em;
max-width: 16ch;
/* Unterlängen (g, p, j) der Headline bekommen unten Luft */
padding-bottom: 0.12em;
margin-bottom: calc(var(--space-2) - 0.12em);
}
.hero__title em {
font-style: normal;
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero__lead {
font-size: clamp(1.15rem, 1.9vw, 1.4rem);
color: var(--ink-soft);
max-width: var(--measure);
margin-bottom: clamp(1rem, 2vh, 1.5rem);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.hero__facts {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) clamp(2rem, 6vw, 5rem);
/* Trennlinie exakt mittig: identischer Abstand oberhalb (margin-top) und
unterhalb (padding-top) der border-top, damit die Linie symmetrisch sitzt. */
margin: clamp(1.25rem, 2.5vh, 2.25rem) 0 0;
padding: clamp(1.25rem, 2.5vh, 2.25rem) 0 0;
border-top: 1px solid var(--line);
list-style: none;
}
.hero__facts strong {
display: block;
font-family: var(--font-display);
font-size: clamp(1.9rem, 3.5vw, 2.8rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
text-shadow: none; /* kein Geister-/Doppel-Schatten hinter der Zahl (auch nicht geerbt) */
/* Eigener Compositor-Layer: verhindert den blassen, versetzten Paint-Rest der
Ziffern auf Mobile, der beim Scramble unter einem laufenden Transform entsteht. */
transform: translateZ(0);
backface-visibility: hidden;
}
/* Facts opacity-only einblenden (kein translateY): der Count-up laeuft so nie
unter einem aktiven Transform -> kein gestapelter Geister-Frame auf Mobile. */
html.js .hero__facts.reveal,
html.js .hero__facts.reveal.is-in { transform: none; }
.hero__facts span {
color: var(--ink-faint);
font-size: 0.9rem;
}
/* Mobile: Kennzahlen als saubere 2-Spalten OHNE jede Trennlinie. Die Ziffern
liegen per z-index ueber etwaigen durchscheinenden Hintergrund-Linien (z. B.
die grosse Sektions-Outline-Ziffer), sodass keine senkrechte Linie mehr durch
die Zahlen laeuft. Zusaetzlicher margin-bottom haelt beide Reihen frei vom
darunterliegenden Marquee-Band (kein Ueberlappen/Abschneiden). */
@media (max-width: 48rem) {
/* Robuster Boden unter den Kennzahlen: padding am Hero selbst (kein Margin-
Collapse, liegt sicher innerhalb von overflow: clip) -> beide Stat-Reihen
inkl. "Ansprechpartner von A bis Z" sind komplett sichtbar, bevor das
Marquee-Band beginnt. Das Section-Padding der folgenden Leistungen-Sektion
sorgt fuer die naechste klare Trennung. */
.hero { padding-bottom: clamp(2.5rem, 9vw, 4rem); }
.hero__facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
/* Enger Spaltenabstand: beide Spalten nah beieinander, rechte Spalte laeuft
nicht zum Rand. minmax(0,1fr) verhindert Ueberlauf; Wrap-Padding bleibt. */
gap: var(--space-2) clamp(0.6rem, 3vw, 1.1rem);
/* Moderater, adressleisten-sicherer Abstand nach den Buttons (svh). Darunter trennen
margin-bottom (--space-2) + Hero-padding-bottom (~2.5-4rem) klar vom Marquee -> keine
Ueberlappung. Kein 100dvh-Konstrukt mehr (das verursachte die Marquee-Ueberlappung). */
margin-top: clamp(2rem, 10svh, 4rem);
margin-bottom: var(--space-2);
}
.hero__facts li { position: relative; z-index: 1; }
}
/* iPad/Tablet-Luecke (48-64rem): hier greift fuer .hero__facts die Basis-Flex-Regel
(margin-bottom:0) -> zu wenig Abstand zum Marquee, Kennzahlen/Marquee wirken gedraengt
bzw. ueberlappen. Klare Trennung wie auf Mobile sicherstellen (Hoch- UND Querformat). */
@media (min-width: 48.0625rem) and (max-width: 63.99rem) {
.hero__facts { margin-bottom: var(--space-3); }
}
/* Niedrige Laptop-Viewports (~800px, z. B. MacBook mit Dock und
Browserleisten): alles verdichten, damit Hero + Stats + Marquee
weiterhin in ein Viewport passen. Steht NACH den Basisregeln,
damit die Kaskade die kompakten Werte gewinnen lässt. */
@media (min-width: 64rem) and (max-height: 860px) {
.hero { padding-block: 1.25rem 1rem; }
.hero__title {
font-size: clamp(2.75rem, min(9.5vw, 8.2vh), 7.5rem);
margin-bottom: var(--space-1);
}
.hero__lead {
font-size: 1.05rem;
margin-bottom: 0.75rem;
}
.hero__actions .button--big {
font-size: 1rem;
padding: 0.85rem 1.9rem;
}
.hero__facts {
margin-top: 1rem;
padding-top: var(--space-1);
}
.hero__facts strong { font-size: 1.7rem; }
}
/* Hero mit Bild: Slider-Foto der Live-Site, dunkles Overlay für Lesbarkeit
in beiden Modes (Bild bleibt dunkel, Text bleibt hell, unten Übergang
in die jeweilige Seitenfarbe). */
.hero--image { color: #f4f4f1; }
.hero__media {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
}
.hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(7, 7, 10, 0.93) 0%, rgba(7, 7, 10, 0.78) 45%, rgba(7, 7, 10, 0.5) 100%),
linear-gradient(to top, var(--bg) 0%, transparent 32%);
}
.hero--image .hero__lead { color: rgba(255, 255, 255, 0.8); }
.hero--image .hero__facts { border-top-color: rgba(255, 255, 255, 0.22); }
.hero--image .hero__facts span { color: rgba(255, 255, 255, 0.62); }
.hero--image .button--ghost { color: #f4f4f1; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); }
.hero--image .button--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; color: #fff; }
/* Light Mode: statt das Bild abzudunkeln, ein helles Overlay in Seitenfarbe
darüberlegen (Bild wird aufgehellt/beruhigt), Schrift auf dunkel umstellen.
Oranger Akzent (em/.grad-word) und der orange Accent-Button bleiben
unverändert, da sie eigene Farben setzen. */
html[data-mode="light"] .hero--image .hero__media::after {
background:
linear-gradient(to right, rgba(250, 249, 246, 0.86) 0%, rgba(250, 249, 246, 0.72) 45%, rgba(250, 249, 246, 0.48) 100%),
linear-gradient(to top, var(--bg) 0%, transparent 32%);
}
html[data-mode="light"] .hero--image { color: var(--ink); }
html[data-mode="light"] .hero--image .hero__lead { color: var(--ink-soft); }
html[data-mode="light"] .hero--image .hero__facts { border-top-color: var(--line); }
html[data-mode="light"] .hero--image .hero__facts strong { color: var(--ink); }
html[data-mode="light"] .hero--image .hero__facts span { color: var(--ink-faint); }
html[data-mode="light"] .hero--image .button--ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
html[data-mode="light"] .hero--image .button--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
/* --------------------------------------------------------------------------
8. Marquee / Laufband
-------------------------------------------------------------------------- */
.marquee {
border-block: 1px solid var(--line);
padding-block: 1.1rem;
overflow: hidden;
display: flex;
}
.marquee__track {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 3.5rem;
padding-right: 3.5rem; /* gleicher Abstand wie gap -> Naht zwischen den Tracks ist gleichmaessig */
/* KEIN min-width: 100%: das streckte den Track auf Viewport-Breite und schob
Extra-Raum an die Naht (ungleicher Abstand z. B. Oesterreich -> Webdesign).
Track = Inhaltsbreite -> alle Abstaende identisch, auch ueber die Naht. */
animation: marquee 36s linear infinite;
white-space: nowrap;
}
.marquee__item {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
display: inline-flex;
align-items: center;
gap: 3.5rem;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
/* Hover: Laufband wird per JS verlangsamt, Einträge leuchten auf */
.marquee:hover .marquee__item {
color: var(--ink);
text-shadow: 0 0 18px rgba(255, 122, 41, 0.55);
}
.marquee__item::after {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent-grad);
box-shadow: var(--glow);
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* --------------------------------------------------------------------------
9. Glassmorphism-Karten & Raster
-------------------------------------------------------------------------- */
.grid {
display: grid;
gap: clamp(1rem, 2.5vw, 1.75rem);
grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
.grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
.grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.card {
position: relative;
background: var(--glass-bg);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid transparent;
background-clip: padding-box;
border-radius: var(--radius);
padding: clamp(1.5rem, 3vw, 2.25rem);
display: flex;
flex-direction: column;
gap: var(--space-1);
/* Zentral: jede Card fuellt ihre Grid-Zelle -> alle Cards einer Reihe gleich
hoch, ohne dass es pro Seite/Grid wiederholt werden muss. */
height: 100%;
transition: transform 0.4s var(--ease-out), box-shadow 0.3s ease;
}
/* Feiner Verlaufs-Rahmen */
.card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--glass-border);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 0.35rem; }
.card h3 a { text-decoration: none; }
.card p { color: var(--ink-soft); margin-bottom: 0; font-size: 1rem; }
.card__index {
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.15em;
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card__more {
margin-top: auto;
padding-top: var(--space-2);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
color: var(--ink);
}
.card__more::after {
content: "\2192";
display: inline-block;
margin-left: 0.45rem;
transition: transform 0.3s var(--ease-out);
}
.card:hover .card__more::after { transform: translateX(6px); }
/* --------------------------------------------------------------------------
10. Projekt-Grid: grosse Bilder, Overlays, asymmetrisch
-------------------------------------------------------------------------- */
.projekt-grid {
display: grid;
gap: clamp(1rem, 2.5vw, 1.75rem);
grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
.projekt-grid { grid-template-columns: repeat(2, 1fr); }
.projekt-grid > .projekt-card:first-child { grid-column: span 2; }
.projekt-grid > .projekt-card:first-child .projekt-card__media { aspect-ratio: 21 / 9; }
}
.projekt-card {
position: relative;
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-soft);
border: 1px solid var(--line);
cursor: pointer; /* ganze Karte ist via Stretched-Link (h3 a::after) klickbar */
}
.projekt-card__media {
aspect-ratio: 16 / 10;
overflow: hidden;
}
.projekt-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s var(--ease-out), filter 0.5s ease;
}
.projekt-card:hover .projekt-card__media img {
transform: scale(1.06);
}
.projekt-card__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(1.25rem, 3vw, 2rem);
background: linear-gradient(to top, rgba(5, 5, 7, 0.85) 0%, rgba(5, 5, 7, 0.25) 45%, transparent 70%);
transition: background 0.4s ease;
}
.projekt-card__meta {
font-family: var(--font-display);
font-size: 0.78rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.16em;
margin-bottom: 0.3rem;
transform: translateY(6px);
transition: transform 0.45s var(--ease-out);
}
.projekt-card__overlay h3 {
color: #fff;
font-size: clamp(1.2rem, 2.4vw, 1.7rem);
margin: 0;
transform: translateY(6px);
transition: transform 0.45s var(--ease-out);
}
.projekt-card:hover .projekt-card__meta,
.projekt-card:hover .projekt-card__overlay h3 {
transform: translateY(0);
}
/* GANZE Karte klickbar: separater Stretched-Link als DIREKTES Kind von
.projekt-card (position:relative, ohne transform). Bewusst NICHT im h3 -
dessen transform (Hover-Lift) bildet sonst den containing block und begrenzt
den absoluten Link auf die Titelzeile (genau das war der Bug). Bild, Overlay
und Gradient-Rahmen fangen keine Klicks ab; der Link darunter bekommt sie. */
.projekt-card__media,
.projekt-card__media img,
.projekt-card__overlay { pointer-events: none; }
.projekt-card__link {
position: absolute;
inset: 0;
z-index: 5; /* ueber Bild/Zoom-Layer (0), Overlay-Verlauf und ::before-Rahmen (z2) */
}
.projekt-card__link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -3px; /* nach innen, sonst vom overflow:hidden der Karte abgeschnitten */
}
/* Blog-Karten: grosszügige Listenzeilen */
.post-card {
position: relative;
border-top: 1px solid var(--line);
padding-block: clamp(1.5rem, 3vw, 2.25rem);
display: grid;
grid-template-columns: minmax(0, 15rem) 1fr;
gap: clamp(1rem, 3vw, 2.25rem);
align-items: center;
}
/* Stretched-Link: ganze Karte inkl. Bild klickbar, kein a-in-a (Titel ist Text). */
.post-card__link { position: absolute; inset: 0; z-index: 2; }
.post-card__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.post-card__media {
position: relative;
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--bg-soft);
border: 1px solid var(--line);
box-shadow: var(--shadow);
}
.post-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s var(--ease-out);
}
.post-card:hover .post-card__media img { transform: scale(1.04); }
/* Bild-Fallback ohne Beitragsbild: Orange-Akzent-Flaeche statt kaputtem Bild. */
.post-card__media--empty {
background: linear-gradient(135deg, rgba(255, 68, 56, 0.2), rgba(255, 122, 41, 0.1));
border-color: rgba(255, 122, 41, 0.32);
}
.post-card__body { min-width: 0; }
.post-card__title { margin: 0 0 0.3rem; }
.post-card p { color: var(--ink-soft); max-width: var(--measure); margin: 0; }
/* Mobile: Bild oben, Text darunter (eine Spalte). */
@media (max-width: 48rem) {
.post-card {
grid-template-columns: 1fr;
gap: 0.85rem;
}
.post-card__media { aspect-ratio: 16 / 9; }
}
/* --------------------------------------------------------------------------
11. Projekt-Detailseite
-------------------------------------------------------------------------- */
.projekt-hero { padding-block: clamp(4rem, 10vh, 7rem) var(--space-4); }
.projekt-facts {
display: grid;
gap: var(--space-2);
grid-template-columns: 1fr;
margin: var(--space-4) 0;
padding: var(--space-3);
background: var(--glass-bg);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--line);
border-radius: var(--radius);
list-style: none;
}
@media (min-width: 40rem) {
.projekt-facts { grid-template-columns: repeat(4, 1fr); }
}
.projekt-facts dt {
font-family: var(--font-display);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-faint);
margin-bottom: 0.25rem;
}
.projekt-facts dd { margin: 0; font-weight: 600; }
.projekt-image {
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
margin-bottom: var(--space-4);
}
/* --------------------------------------------------------------------------
12. Inhalt & Artikel
-------------------------------------------------------------------------- */
/* Page-Hero der Unterseiten: Eyebrow, grosse Headline mit Gradient-Wort
(JS), Lead, Glow statt flachem Schwarz. Gleiche Sprache wie die
Startseiten-Sektionen. */
.page-header {
position: relative;
padding-block: clamp(4.5rem, 11vh, 8rem) clamp(2rem, 5vh, 3.5rem);
overflow: clip;
}
.page-header::before {
content: "";
position: absolute;
top: -14rem;
right: -10rem;
width: 38rem;
height: 38rem;
border-radius: 50%;
background: radial-gradient(circle, var(--accent) 0%, transparent 62%);
filter: blur(90px);
opacity: 0.22;
pointer-events: none;
}
.page-header::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 72px 72px;
-webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 0%, rgba(0, 0, 0, 0.55), transparent 70%);
mask-image: radial-gradient(ellipse 80% 90% at 70% 0%, rgba(0, 0, 0, 0.55), transparent 70%);
pointer-events: none;
}
html[data-mode="light"] .page-header::before { opacity: 0.1; }
.page-header > .wrap { position: relative; z-index: 1; }
.page-header h1 {
max-width: 18ch;
margin-bottom: var(--space-2);
}
.page-header__lead {
font-size: clamp(1.15rem, 1.9vw, 1.35rem);
color: var(--ink-soft);
max-width: var(--measure);
margin-bottom: 0;
}
/* Rechtsseiten: bewusst ruhig, ohne Glow und Eyebrow-Inszenierung */
.page-header--plain { padding-block: clamp(3rem, 8vh, 5rem) var(--space-3); }
.page-header--plain::before,
.page-header--plain::after { content: none; }
.page-header--plain h1 { font-size: clamp(2.2rem, 4.5vw, 3.5rem); }
/* Inhaltsbreite: füllt den zentrierten Wrap und nutzt damit dieselbe
Breite, Zentrierung und Padding wie die Startseiten-Sektionen. Textblöcke
bleiben auf lesbarer Breite (linksbündig wie der Page-Header, kein
schmaler links zusammengequetschter Block mehr). */
.entry-content { max-width: var(--measure-wide); }
/* Konsistenter Abstand zum Footer-CTA auf ALLEN Inhaltsseiten (page.php:
Impressum/AGB/Datenschutz/Kontakt/Ueber uns). Entkoppelt vom Inhalt: vorher
haftete der Abstand nur an .smd-memberships (nur Ueber uns). Jetzt = var(--space-5)
= footer-cta padding-top -> Trennlinie (.site-footer border-top) symmetrisch.
Last-child-Reset, damit der Abstand exakt var(--space-5) ist (nicht + Absatz-Margin). */
.entry-content { padding-bottom: var(--space-5); }
.entry-content > :last-child { margin-bottom: 0; }
/* Anker-Sprünge (Inhaltsuebersicht der Legal-Seiten: #m716, #m25, #m900 ...) landen
sichtbar UNTER dem sticky Header (.site-header, ~5.75rem hoch) statt dahinter.
Gescoped auf Ueberschriften MIT id -> nur die Anker-Ziele, keine anderen Seiten
verschoben. Vertraegt sich mit scroll-behavior: smooth. */
.entry-content :is(h2, h3)[id] { scroll-margin-top: 6.75rem; }
/* Eingeloggt sitzt die WP-Admin-Bar (32px, mobil 46px) ueber dem Header -> einrechnen. */
body.admin-bar .entry-content :is(h2, h3)[id] { scroll-margin-top: calc(6.75rem + 32px); }
@media screen and (max-width: 782px) {
body.admin-bar .entry-content :is(h2, h3)[id] { scroll-margin-top: calc(6.75rem + 46px); }
}
.entry-content--wide { max-width: none; }
.entry-content h2 { margin-top: var(--space-4); font-size: clamp(1.6rem, 3vw, 2.25rem); }
.entry-content h3 { margin-top: var(--space-3); }
.entry-content img { border-radius: var(--radius); }
/* Bilder im Blog-Fliesstext: gleiche Breite und Optik wie das Beitragsbild
(.projekt-image in single.php: --measure breit, Rahmen, runde Ecken,
buendig auf derselben linken Kante), gleicher vertikaler Rhythmus, plus
sichtbarer Abstand zwischen Bild und Bildunterschrift. */
.entry-content .wp-block-image {
max-width: var(--measure);
margin-block: var(--space-4);
}
.entry-content .wp-block-image img {
width: 100%;
height: auto;
border: 1px solid var(--line);
border-radius: var(--radius);
}
.entry-content .wp-block-image figcaption {
margin-top: 0.75rem;
font-size: 0.9rem;
color: var(--ink-faint);
}
.entry-meta {
font-family: var(--font-display);
font-size: 0.9rem;
letter-spacing: 0.04em;
color: var(--ink-faint);
margin-bottom: var(--space-3);
}
.post-navigation {
display: flex;
justify-content: space-between;
gap: var(--space-2);
padding-block: var(--space-4);
border-top: 1px solid var(--line);
margin-top: var(--space-4);
}
.post-navigation a { text-decoration: none; font-weight: 600; font-family: var(--font-display); }
/* --------------------------------------------------------------------------
13. Formulare
-------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
textarea {
width: 100%;
font-family: inherit;
font-size: 1rem;
padding: 0.85rem 1rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius-s);
background: var(--glass-bg);
color: var(--ink);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus, textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(255, 68, 56, 0.18);
outline: none;
}
label {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.92rem;
margin-bottom: 0.35rem;
}
.form-field { margin-bottom: var(--space-2); }
.form-note { font-size: 0.875rem; color: var(--ink-faint); }
.gform_wrapper .gfield { margin-bottom: var(--space-2); }
/* --------------------------------------------------------------------------
14. CTA-Banner mit Glow
-------------------------------------------------------------------------- */
.cta-banner {
position: relative;
overflow: clip;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(2rem, 5vw, 3.5rem);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.cta-banner::before {
content: "";
position: absolute;
width: 30rem;
height: 30rem;
right: -12rem;
top: -14rem;
border-radius: 50%;
background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
filter: blur(80px);
opacity: 0.35;
pointer-events: none;
}
.cta-banner h2 { margin-bottom: 0.35rem; }
.cta-banner p { color: var(--ink-soft); margin: 0; }
.cta-banner > * { position: relative; }
/* --------------------------------------------------------------------------
15. Footer (bewusst dunkel in beiden Modes)
Struktur: Pre-Footer-CTA, 4-Spalten-Grid (Kontakt / Aktuelles /
Service & Vertrauen / Bewertungswald), Bottom-Bar.
-------------------------------------------------------------------------- */
.site-footer {
background: var(--bg);
color: var(--ink-soft);
font-size: 0.95rem;
border-top: 1px solid var(--line);
}
.site-footer a:not(.button) { color: var(--ink); text-decoration: none; }
.site-footer a:not(.button):hover { color: var(--accent-2); }
/* Pre-Footer-CTA: grosse Abschluss-Sektion im Hero-Stil */
.footer-cta {
position: relative;
overflow: clip;
text-align: center;
/* padding-top = Memberships-Unterkante (beide var(--space-5)) -> die Trennlinie
(.site-footer border-top) hat oben/unten gleich viel Luft (symmetrisch).
padding-bottom = derselbe Wert -> CTA-Inhalt vertikal symmetrisch. Beide von
var(--space-4) auf var(--space-5) angehoben, damit die Logos mehr Luft nach
unten bekommen UND beide Symmetrien erhalten bleiben. Gilt global. */
padding-top: var(--space-5);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--line);
}
/* Variante A (entkoppelt): der innere Wrapper gibt dem CTA-Inhalt grosszuegig
Luft, oben UND unten gleich (padding-block) -> der Inhalt sitzt luftig + mittig.
Der AEUSSERE padding-top der .footer-cta bleibt var(--space-4) (2.5rem), damit
die Logo-Symmetrie an der .site-footer-Trennlinie unveraendert bleibt. Title hat
global margin-top:0, der Button keinen margin-bottom -> exakt symmetrisch. */
.footer-cta .wrap {
padding-block: var(--space-5);
}
.footer-cta::before {
content: "";
position: absolute;
left: 50%;
top: -16rem;
width: 44rem;
height: 44rem;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle, var(--accent) 0%, transparent 62%);
filter: blur(100px);
opacity: 0.18;
pointer-events: none;
}
.footer-cta > .wrap { position: relative; }
.footer-cta__title {
color: var(--ink);
font-size: clamp(2.4rem, 5.5vw, 4.5rem);
letter-spacing: -0.035em;
max-width: 22ch;
margin-inline: auto;
}
.footer-cta__lead {
color: var(--ink-soft);
font-size: clamp(1.05rem, 1.8vw, 1.3rem);
max-width: var(--measure);
margin: 0 auto var(--space-3);
}
/* Haupt-Footer: vier Spalten. Mobile 1, Tablet 2, Desktop 4. */
.site-footer__grid {
display: grid;
gap: var(--space-4) var(--space-3);
grid-template-columns: 1fr;
padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
border-bottom: 1px solid var(--line);
}
@media (min-width: 40rem) {
.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
/* Spalte 3 mit Mindestbreite 14.6rem (233.6px) = zwei kleine Zertifikats-
Kacheln (2x7rem + 0.6rem Gap) - sonst faellt deren Reihe auf Laptop-
Breiten (1024-1242px) auf eine Spur zurueck und stapelt wieder. */
.site-footer__grid { grid-template-columns: 1.1fr 1.1fr minmax(14.6rem, 0.9fr) 1.1fr; }
}
.site-footer__col { min-width: 0; }
/* Spaltentitel im Eyebrow-Stil (Caps, Letter-Spacing, oranger Strich) */
.site-footer__title {
display: flex;
align-items: center;
gap: 0.7rem;
color: var(--ink);
font-family: var(--font-mono);
/* Etwas kleiner + weniger Sperrung als zuvor, damit lange Titel
(DATENAUSTAUSCH) nicht umbrechen/in die Nachbarspalte laufen; nowrap haelt
jede Ueberschrift garantiert auf EINER Zeile. Akzentstrich (::before)
unveraendert. */
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
margin: 0 0 var(--space-2);
}
.site-footer__title::before {
content: "";
flex: 0 0 auto;
width: 1.6rem;
height: 2px;
border-radius: 2px;
background: var(--accent-grad);
}
.site-footer__col .site-footer__title:not(:first-child) { margin-top: var(--space-3); }
/* Spalte 1: Kontakt */
.site-footer__wordmark { margin-bottom: var(--space-2); }
.site-footer__address {
font-style: normal;
color: var(--ink-soft);
line-height: 1.6;
margin-bottom: 0.75rem;
}
.site-footer__contact { margin-bottom: var(--space-3); line-height: 1.9; }
/* Oeffnungszeiten im Footer: dieselbe Komponente wie auf der Kontaktseite
([smd_oeffnungszeiten] -> .smd-hours, EINE Quelle fuer Zeilen und
Schreibweise). Hier bekommt die Liste die gerahmte, abgerundete Box im
Stil der Bewertungswald-Box (.footer-rating__card): gleicher Border,
border-radius und Surface (Dark: --bg-raise, Light: #fff). */
.site-footer .smd-hours {
max-width: none;
margin: 0 0 0.85rem;
}
/* Live-Status-Pill behaelt ihren bisherigen Footer-Abstand zur Box
(= h4-Abstand darueber, symmetrisch) */
.site-footer .smd-hours__status {
margin-bottom: var(--space-2);
}
.site-footer .smd-hours__list {
background: var(--bg-raise);
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
}
html[data-mode="light"] .site-footer .smd-hours__list {
background: #fff;
border-color: var(--line-strong);
}
/* In der Box braucht die Zeile auch rechts Innenabstand (die Komponente
selbst hat nur links welchen). Innenabstand und Gap sind in der schmalen
Footer-Spalte enger als auf der Kontaktseite, damit die Mo-Fr-Zeit auf
Desktop einzeilig bleibt (Schrift/Farben/Struktur identisch); wird es
wirklich zu schmal, bricht sie sauber zwischen den Fenstern um. */
.site-footer .smd-hours__row {
padding-left: 0.6rem;
padding-right: 0.6rem;
gap: 0.6rem;
}
.site-footer__note {
/* Punkt 3: gleiche Schriftgroesse wie die Oeffnungszeiten-Zeilen (0.9rem). */
font-size: 0.9rem;
color: var(--ink-faint);
line-height: 1.5;
}
/* Punkt 5: ALLE Footer-Textlinks bekommen denselben Hover wie Telefon/E-Mail.
Es gibt keine eigene Klasse nur fuer diesen Effekt (der Text-Gradient haengt
sonst an a[href^="tel:"]/[mailto:]); die gemeinsame Klammer ist .u-link, hier
fuer den ganzen Footer generalisiert: Text faerbt sich im Orange-Gradient
(background-clip:text), Unterstrich aus einem ::after-Balken. Die statische
u-link-Hintergrund-Unterstreichung wird abgeschaltet, sonst wuerde
background-clip:text sie wegclippen. Betrifft Kontakt, Legal und Formular-Link. */
.site-footer .u-link {
background-image: none;
position: relative;
}
.site-footer .u-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background: var(--accent-grad);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s var(--ease-out);
pointer-events: none;
}
.site-footer .u-link:hover,
.site-footer .u-link:focus-visible {
background: var(--accent-grad) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
}
.site-footer .u-link:hover::after,
.site-footer .u-link:focus-visible::after {
transform: scaleX(1);
}
/* Spalte 2: Aktuelles (Letzte News, Letzte Projekte) mit Thumbnail */
.footer-feed {
list-style: none;
margin: 0 0 var(--space-2);
padding: 0;
display: grid;
gap: 0.85rem;
}
.footer-feed__item {
display: flex;
align-items: center;
gap: 0.75rem;
}
.footer-feed__thumb {
flex: 0 0 3.25rem;
width: 3.25rem;
height: 3.25rem;
border-radius: var(--radius-s);
overflow: hidden;
background: var(--glass-bg);
border: 1px solid var(--line);
}
.footer-feed__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s var(--ease-out);
}
.footer-feed__item:hover .footer-feed__thumb img { transform: scale(1.08); }
/* Bild-Fallback ohne Beitragsbild: dezente Orange-Akzent-Flaeche statt leerem
oder kaputtem Bild (Dark + Light gleichermassen sichtbar). */
.footer-feed__thumb--empty {
background: linear-gradient(135deg, rgba(255, 68, 56, 0.2), rgba(255, 122, 41, 0.1));
border-color: rgba(255, 122, 41, 0.32);
}
.footer-feed__body { min-width: 0; }
.footer-feed__title {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.9rem;
line-height: 1.3;
color: var(--ink);
transition: color 0.2s ease;
}
/* Task 7: Titel-Links (Letzte News / Letzte Projekte) bekommen denselben
Orange-Rot-Gradient-Hover wie die uebrigen Footer-Links. Der Link ist
.footer-feed__item (nicht .u-link), darum hier eigens angesteuert. */
.footer-feed__item:hover .footer-feed__title,
.footer-feed__item:focus-visible .footer-feed__title {
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.footer-feed__date {
display: block;
margin-top: 0.15rem;
font-size: 0.75rem;
color: var(--ink-faint);
}
/* ============ Einheitliches Logo-Kachelsystem (Grundmass 10.5 x 4.5rem) ============
EIN Grundmass fuer ALLE Logo-Sektionen: Footer (Support, Datenaustausch,
Zertifikate) und Ueber-mich (Mitglied bei, Zertifikate). Ersetzt die drei
frueheren Systeme (.footer-logo, .footer-labels, .smd-memberships), deren
Kachelbreite jeweils vom Logo kam (shrink-to-fit) und unruhige Kanten erzeugte.
Raster: feste 10.5rem-Spuren via auto-fill -> pro Kontext ergibt sich die
Spaltenzahl von selbst (Footer-Desktop-Spalte 235px: 1/Zeile mit buendiger
Kante; Tablet-Spalte 372px: 2/Zeile; Mobile 358px: 2/Zeile). Feste Spuren
statt 1fr, damit das Grundmass kontextuebergreifend identisch bleibt. */
.smd-logo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, 10.5rem);
justify-content: start;
gap: 0.6rem; /* ueberall derselbe Gap, auch mobil */
list-style: none;
padding: 0;
margin: 0;
}
/* Im Seiteninhalt (Ueber-mich): Abstand unter der H2 wie zuvor bei
.smd-memberships; unterer Abstand kommt zentral vom entry-content. */
.entry-content .smd-logo-grid {
margin-block: var(--space-3) 0;
}
/* EINE Kachelhoehe fuer ALLE Logo-Reihen im Seiteninhalt (Mitglied bei und
Zertifikate), damit die Seite ruhig wirkt. 6rem ist das groessere der beiden
Masse und kommt von den Zertifikaten, deren Kleinschrift die Hoehe braucht.
Die Reihe "Mitglied bei" gewinnt dadurch nur Luft, keine groesseren Logos:
marketingclub (2.8:1) und Wirtschaft Buchs (3.7:1) sind breitengebunden und
stossen schon vorher an den Breitendeckel von 9rem. */
.entry-content .smd-logo-grid .smd-logo-tile { height: 6rem; }
/* Die Kachel: festes Grundmass, Logo exakt zentriert. display:grid statt flex,
damit SVG-Logos als Kachel-Kind nicht auf Breite 0 kollabieren (bekannter
Flex-Item-Bug, siehe Wirtschaft-Buchs-SVG). */
.smd-logo-tile {
display: grid;
place-items: center;
width: 10.5rem;
height: 4.5rem;
padding: 0.5rem;
background: #f4f3ef; /* bewusst fix hell: Logos muessen auch auf dunklem Grund lesbar sein */
border-radius: var(--radius-s);
transition: transform 0.25s ease;
}
a.smd-logo-tile:hover { transform: translateY(-2px); }
/* Kachel ohne Link: gleicher Hover-Lift wie die Links, damit sie optisch nicht
aus der Reihe faellt; nur der Cursor bleibt Standard (Pointer ohne Ziel waere
taeuschend). Aktuell NICHT verwendet - Swiss Digital Services trug diese
Klasse, hat inzwischen aber einen Link auf swissmadesoftware.org. Bleibt fuer
kuenftige Labels ohne eigenes Ziel stehen. */
.smd-logo-tile--static { cursor: default; }
.smd-logo-tile--static:hover { transform: translateY(-2px); }
/* Bild-Deckel in absoluten rem-Werten, NICHT in Prozent: die Kachel ist ein
display:grid-Container mit auto-Track, dort sind %-Hoehen/-Breiten am Kind
zirkulaer und werden ignoriert. Innenbox der Kachel: 9.5 x 3.5rem (152x56px).
LUFT-GARANTIE: jeder Deckel liegt UNTER der Innenbox (max 9rem x 3.2rem),
kein Logo beruehrt je die Innenkante; zusammen mit dem Padding (0.5rem)
bleibt immer mehr Abstand zur Kachelkante als der Border-Radius. */
.smd-logo-grid img {
max-width: 9rem;
max-height: 3.2rem;
width: auto;
height: auto;
display: block;
}
/* Logos in Kacheln tragen NIE einen eigenen Radius - den bringt die Kachel mit.
Notwendig, weil .entry-content img (weiter oben) allen Bildern im
Seiteninhalt 10px Radius gibt. Bei den transparenten PNGs faellt das nicht
auf, bei zertifikat-swiss-made.jpeg aber sehr wohl: das ist ein JPEG ohne
Alphakanal, dessen schwarzer Rahmen bis an die Dateikante laeuft, und der
Radius schneidet dessen Ecken sichtbar ab. Selektor mit .entry-content davor,
damit er die dortige Regel schlaegt (0,2,1 gegen 0,1,1) und nicht bloss von
der Reihenfolge im Stylesheet abhaengt. */
.entry-content .smd-logo-grid img { border-radius: 0; }
/* Optischer Ausgleich pro Logo ueber die Hoehe: vollflaechige Marken kleiner
als Schriftlogos, damit alle Kacheln aus der Distanz gleich praesent wirken.
Selektor mit .smd-logo-grid davor -> schlaegt die Basisregel (Spezifitaet). */
.smd-logo-grid .smd-logo-tile__img--teams { max-height: 3.2rem; } /* Banner 4.5:1 -> Breite bindet, 137x30px */
.smd-logo-grid .smd-logo-tile__img--wetransfer { max-height: 3rem; } /* fette Wortmarke, 101x48px */
.smd-logo-grid .smd-logo-tile__img--sms { max-height: 3.2rem; } /* kompakt, 67x51px, 2.4px Luft zur Innenbox */
.smd-logo-grid .smd-logo-tile__img--sds { max-height: 2.9rem; } /* breite Wortmarke, 122x46px */
.smd-logo-grid .smd-logo-tile__img--label { max-height: 2.6rem; max-width: 2.6rem; } /* vollflaechig rot -> stark gedeckelt, 39x42px */
.smd-logo-grid .smd-logo-tile__img--rmc { max-height: 3.1rem; } /* Wortmarke 2.8:1, 139x50px */
.smd-logo-grid .smd-logo-tile__img--wb { max-height: 3.2rem; } /* duenne Wortmarke -> Breite bindet, 144x38px */
/* ---- Footer-Kontext: EINE Kachelhoehe (3rem) fuer ALLE Sektionen ----
Support/Datenaustausch behalten 10.5rem Breite (eine Kachel pro Zeile),
die Zertifikate laufen ueber --s mit 7rem Breite (zwei pro Zeile).
Der Groessenausgleich passiert ueber die Logo-Deckel, nicht die Kachel.
Padding 0.4rem (6.4px) > Border-Radius 6px -> Radius schneidet nie. */
.site-footer .smd-logo-tile { height: 3rem; padding: 0.4rem; }
/* ALLE Footer-Logos gleich hoch (1.9rem = 30px), auch die Zertifikate -
die seitliche Luft in der Kachel darf pro Logo variieren. */
.site-footer .smd-logo-grid img { max-width: 8.75rem; max-height: 1.9rem; }
/* ---- Zertifikate-Mass (--zert) ----------------------------------------------
Zweck: die Kleinschrift auf den drei Labels muss lesbar sein. Bei 1.9rem
Logohoehe (Stand vor diesem Mass) war sie es nicht.
Aufteilung: Swiss Label und swiss made software teilen EIN gemeinsames Mass
(das breitere der beiden), swiss digital services bekommt eine breitere
Kachel - seine Wortmarke ist einzeilig und 3.15:1 lang, ihr Limit ist die
Breite, nicht die Hoehe. Damit fluchtet Reihe 1 buendig und Reihe 2 traegt
die lange Marke. Bewusst KEINE logobreiten Kacheln: shrink-to-fit war hier
schon einmal im Einsatz und erzeugte ausgefranste rechte Kanten (siehe den
Systemkommentar weiter oben).
flex statt fester Grid-Spuren, weil die dritte Kachel breiter ist als die
ersten zwei - mit repeat(auto-fill, X) waeren alle Spuren gleich breit. Die
Kachel selbst bleibt display:grid, der SVG-Flex-Kollaps betrifft also nur
Kachel-Kinder und hier ohnehin keine SVGs (alle drei Labels sind PNG/JPEG).
flex: 0 0 auto, damit die festen Breiten nicht schrumpfen.
Die dritte Kachel wird ueber :last-child adressiert, damit das Markup an
beiden Stellen unangetastet bleibt. WICHTIG: Die Breite sitzt am FLEX-ITEM,
nicht an der Kachel - das Markup unterscheidet sich naemlich. Im Footer ist
die Kachel selbst direktes Kind des Grids, im Seiteninhalt steckt sie in
einem . Haengt die Breite an .smd-logo-tile:last-child, ist im
Seiteninhalt JEDE Kachel letztes Kind ihres und alle drei werden breit.
Darum > * und > *:last-child.
ACHTUNG: kommt ein viertes Label dazu, erbt das die breite Kachel - dann
stattdessen eine eigene Klasse am Element setzen. */
.smd-logo-grid--zert { display: flex; flex-wrap: wrap; }
.smd-logo-grid--zert > * { flex: 0 0 8.75rem; } /* 140px, Innenbox 100px: breitestes Logo der
Reihe 1 ist swiss made software mit 94px Box
(Deckel 4.6rem), plus 3px Luft je Seite. Bei
8.25rem wuchs die Kachel auf 134px, weil der
Inhalt breiter war als die Flex-Basis - dann
fluchtet Reihe 1 nicht mehr. */
.smd-logo-grid--zert > *:last-child { flex-basis: 14.75rem; } /* 236px, Innenbox 196px */
.smd-logo-grid--zert .smd-logo-tile {
width: auto; /* fuellt das Flex-Item */
height: 6rem; /* 96px, Innenbox 92 x 80px */
padding: 0.5rem 1.25rem;
}
.smd-logo-grid.smd-logo-grid--zert img { max-width: 12rem; max-height: 4.2rem; }
/* swiss-made-software-2.png bringt seit dem Tausch auf die offizielle Datei einen
transparenten Rand von 8% mit (Farbe = 86.3% der Boxhoehe). Bei gleichem
Deckel waere das sichtbare Logo dadurch 14% kleiner als vorher. Eigener,
hoeherer Deckel gleicht das aus - dasselbe Prinzip wie beim optischen
Ausgleich der uebrigen Logos weiter oben. 4.6rem = 73.6px Box -> 63.5px
sichtbare Farbe, 3.2px Luft zur Innenbox (wie beim rmc-Logo).
Doppelklasse am Grid ist noetig: mit nur .smd-logo-grid--zert davor kommt der
Selektor auf (0,2,0) und verliert gegen die Sammelregel eine Zeile hoeher,
die (0,2,1) hat. */
.smd-logo-grid.smd-logo-grid--zert .smd-logo-tile__img--sms { max-height: 4.6rem; }
/* ---- Footer-Kontext: dasselbe Prinzip, kleineres Mass -----------------------
Immer 2-plus-1 (zwei Kacheln in Reihe 1, die dritte linksbuendig darunter),
aber die Kachelbreite haengt vom Breakpoint ab, weil die Footer-Spalte ihre
Breite wechselt: unter 40rem eine Spalte (volle Wrap-Breite, ~358px bei
390px Viewport), ab 40rem zwei Spalten, ab 64rem vier Spalten mit nur 235px.
Grundzustand (bis 63.99rem): alle drei Kacheln gleich breit, halbe Zeile
minus halber Gap (Gap 0.6rem). Reihe 1 fuellt die Spalte damit exakt aus und
die Aufteilung bleibt von 320px bis 1023px stabil, ohne feste Pixelbreite.
Vorher stand die dritte Kachel auf 100%: auf Desktop richtig (235px), auf
Mobile aber dreimal so breit wie die zwei darueber.
Bildbreite ueber max-width: 100% an die Kachel gebunden - das loest gegen die
Innenbox auf und verhindert, dass die einzeilige Wortmarke von swiss digital
services (3.146:1) bei schmalen Kacheln ueberlaeuft. Sie wird dadurch
breitengebunden: 161px bei 390px Viewport, 126px bei 320px. */
.site-footer .smd-logo-grid--zert > *,
.site-footer .smd-logo-grid--zert > *:last-child { flex-basis: calc(50% - 0.3rem); }
.site-footer .smd-logo-grid--zert .smd-logo-tile { height: 5rem; padding: 0.4rem; }
.site-footer .smd-logo-grid.smd-logo-grid--zert img { max-width: 100%; max-height: 3.4rem; }
/* Ab 64rem ist die Footer-Spalte 235px schmal: zwei Kacheln a 7rem plus 9.6px
Gap = 233.6px passen genau, die dritte nimmt die volle Zeile und traegt damit
die lange Wortmarke in 171x54px. Bei halber Zeile waeren es nur 99px Innenbox
und 31px Logohoehe - dort ist die Kleinschrift nicht mehr lesbar. */
@media (min-width: 64rem) {
.site-footer .smd-logo-grid--zert > * { flex-basis: 7rem; }
.site-footer .smd-logo-grid--zert > *:last-child { flex-basis: 100%; }
.site-footer .smd-logo-grid.smd-logo-grid--zert img { max-width: 11rem; }
}
/* Ausgleich fuer den eingebauten Rand, siehe oben. 3.8rem = 60.8px Box ->
52.5px sichtbare Farbe, 3.2px Luft zur Innenbox. Doppelklasse aus demselben
Spezifitaetsgrund wie oben. */
.site-footer .smd-logo-grid.smd-logo-grid--zert .smd-logo-tile__img--sms { max-height: 3.8rem; }
/* Sicherheitsnetz fuer sehr schmale Viewports (<384px): zwei Spalten erzwingen
(nie 3 Kacheln einzeln untereinander), Kacheln werden minimal fluide, aber
nie breiter als das Grundmass; Hoehe und Gap bleiben fest. Bild-Breitendeckel
mit runter, damit breite Logos die schmalere Kachel nicht sprengen. */
@media (max-width: 24rem) {
.smd-logo-grid { grid-template-columns: repeat(2, minmax(0, 10.5rem)); }
.smd-logo-tile { width: auto; }
.smd-logo-grid img { max-width: 6.9rem; }
/* Zertifikate: KEINE flex-basis-Ueberschreibung hier. Die Kachelbreite kommt
aus dem Grundzustand (halbe Zeile minus halber Gap) und ist damit auch bei
320px korrekt; feste 7rem wuerden das wieder umstossen.
Breitendeckel fuer den Seiteninhalt runter, damit die lange Wortmarke die
schmalere Kachel nicht sprengt (im Footer bindet ohnehin max-width: 100%). */
.smd-logo-grid--zert .smd-logo-tile { padding: 0.4rem; }
.smd-logo-grid.smd-logo-grid--zert img { max-width: 10.5rem; }
}
/* Spalte 4: Bewertungswald - selbstgebaute Karte (volle Dark/Light-Kontrolle),
ersetzt das ReviewForest-Embed. Icons lokal in assets/icons (fix-farbig, passen beidem). */
.footer-rating { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.footer-rating__card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.55rem;
width: 100%;
max-width: 22rem;
padding: var(--space-3);
border-radius: 16px;
background: var(--bg-raise); /* Dark: dunkle Surface zum Footer passend */
border: 1px solid var(--line);
}
html[data-mode="light"] .footer-rating__card {
background: #fff; /* Light: helle Surface, KEIN dunkler Kasten */
border-color: var(--line-strong); /* dezenter, sichtbarer Border auf hell */
}
.footer-rating__glogo { display: block; width: 28px; height: 28px; }
/* Zahl + Sterne bzw. Zahl + Baum in einer Zeile */
.footer-rating__score { display: flex; align-items: center; gap: 0.6rem; }
.footer-rating__num {
font-family: var(--font-display);
font-weight: 700;
font-size: 2rem;
line-height: 1;
color: var(--ink); /* Headline-Font, kraeftig, adaptiert Dark/Light */
font-variant-numeric: tabular-nums;
}
.footer-rating__tree { display: block; width: 24px; height: 24px; }
/* Sterne: graue Basis + goldener Overlay, partieller Stern via overflow-Breite. */
.footer-rating__stars {
position: relative;
display: inline-block;
color: var(--line-strong); /* leere Sterne dezent (adaptiert) */
font-size: 1.05rem;
letter-spacing: 0.12em;
line-height: 1;
white-space: nowrap;
}
.footer-rating__stars-on {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
color: #FBBC04; /* Gold in beiden Modi */
white-space: nowrap;
}
.footer-rating__text {
font-size: 0.85rem;
color: var(--ink-soft);
line-height: 1.45;
margin: 0;
}
/* Links gut lesbar in BEIDEN Modi (Brand-Orange + unterstrichen, nie schwarz auf weiss). */
.footer-rating__link { color: var(--accent-2); text-decoration: underline; }
.footer-rating__link:hover { color: var(--accent); }
.footer-rating__brand {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.9rem;
color: var(--ink-soft);
}
.footer-rating__brand img { display: block; width: 18px; height: 18px; }
/* Button im Outline-Stil (wie Original): adaptiert ueber Tokens - Dark heller Border/Text,
Light dunkler Border/Text. Hover dezent in Brand-Orange. */
.footer-rating__button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.35rem;
padding: 0.7rem 1.4rem;
border-radius: 999px;
border: 1px solid var(--line-strong);
background: transparent;
color: var(--ink);
font-family: var(--font-display);
font-size: 0.92rem;
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.footer-rating__button img { display: block; width: 18px; height: 18px; }
.footer-rating__button:hover { border-color: var(--accent); color: var(--accent); background: rgba(255, 68, 56, 0.06); }
/* Bottom-Bar: Copyright, Rechtslinks, Social-Icons */
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-2) var(--space-3);
padding-block: var(--space-3);
font-size: 0.85rem;
color: var(--ink-faint);
}
.site-footer__copy { margin: 0; }
.site-footer__legal {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1rem;
list-style: none;
margin: 0;
padding: 0;
}
.site-footer__legal a {
color: var(--ink-soft);
font-size: 0.82rem;
}
.site-footer__legal a:hover { color: var(--ink); }
.site-footer__socials {
display: flex;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.site-footer__socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
border: 1px solid var(--line-strong);
color: var(--ink-soft);
transition: background 0.25s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Punkt 6: kein Hochrutschen mehr (transform entfernt), Icons bleiben an
Position. Beim Hover Orange-Rot-Gradient als Fuellung (wie Telefon/E-Mail),
Icon weiss darauf. Alle vier Icons identisch. */
.site-footer__socials a:hover,
.site-footer__socials a:focus-visible {
background: var(--accent-grad);
border-color: transparent;
color: #fff;
}
/* --------------------------------------------------------------------------
16. Pagination, Suche, Kommentare
-------------------------------------------------------------------------- */
.pagination {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding-block: var(--space-4);
}
.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
aspect-ratio: 1; /* Absicherung: der Inhalt (Zahl) treibt die Hoehe nicht */
padding: 0; /* kein asymmetrisches Padding mehr -> exakt rund statt oval */
font-family: var(--font-display);
border: 1px solid var(--line);
border-radius: 50%;
text-decoration: none;
}
.pagination .page-numbers.current {
background: var(--accent-grad);
color: #fff;
border-color: transparent;
}
/* Prev/Next tragen Text (paginate_links default "« Previous"/"Next »") und die "..."-Dots
-> keine feste Kreisgroesse (sonst abgeschnitten): Auto-Breite (Pille bzw. randlos). */
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
width: auto;
aspect-ratio: auto;
padding: 0 1rem;
border-radius: 99px;
}
.pagination .page-numbers.dots {
width: auto;
aspect-ratio: auto;
border: 0;
}
.search-form { display: flex; gap: 0.5rem; max-width: 30rem; }
.search-form input[type="search"] { flex: 1; }
.comments-area {
max-width: var(--measure);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--line);
/* Abstand zum Footer-CTA: auf Blog-Einzelbeitraegen ist die comments-area
das letzte Element vor dem CTA und uebernimmt dieselbe Rolle wie das
padding-bottom von .entry-content auf den uebrigen Inhaltsseiten
(gleicher Wert var(--space-5), sonst klebte der Senden-Button an der
CTA-Sektion). Seiten ohne Kommentarbereich sind nicht betroffen. */
padding-bottom: var(--space-5);
}
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.comment-meta { font-size: 0.875rem; color: var(--ink-faint); }
/* --------------------------------------------------------------------------
17. 404 mit Glitch
-------------------------------------------------------------------------- */
.error-404 {
text-align: center;
padding-block: clamp(5rem, 16vh, 10rem);
}
.glitch {
position: relative;
display: inline-block;
font-family: var(--font-display);
font-size: clamp(5rem, 18vw, 12rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
margin-bottom: var(--space-2);
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
inset: 0;
opacity: 0.85;
}
.glitch::before {
color: var(--accent);
animation: glitch-shift 2.4s steps(2, end) infinite;
clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%);
}
.glitch::after {
color: var(--accent-2);
animation: glitch-shift 1.9s steps(2, end) infinite reverse;
clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
}
@keyframes glitch-shift {
0%, 86% { transform: translate(0, 0); }
88% { transform: translate(-6px, 2px); }
92% { transform: translate(5px, -2px); }
96% { transform: translate(-3px, 1px); }
100% { transform: translate(0, 0); }
}
/* --------------------------------------------------------------------------
18. Terminal-Fenster (AI-Workshops, Shortcode smd_terminal)
-------------------------------------------------------------------------- */
.smd-terminal {
background: #0c0c10;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
max-width: 46rem;
margin: var(--space-3) 0;
}
.smd-terminal__bar {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.smd-terminal__dot {
width: 11px;
height: 11px;
border-radius: 50%;
}
.smd-terminal__dot:nth-child(1) { background: #ff5f57; }
.smd-terminal__dot:nth-child(2) { background: #febc2e; }
.smd-terminal__dot:nth-child(3) { background: #28c840; }
.smd-terminal__title {
margin-left: 0.5rem;
font-family: var(--font-mono);
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.45);
}
.smd-terminal__body {
padding: 1.25rem;
font-family: var(--font-mono);
font-size: 0.875rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.9);
min-height: 14rem;
white-space: pre-wrap;
word-break: break-word;
margin: 0;
}
.smd-terminal__line {
position: relative;
padding-left: 0.85rem;
}
/* $-Befehle im Orange-Gradient des Themes */
.smd-terminal__line.is-prompt {
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 600;
}
/* >-Ausgaben fast weiss, #-Kommentare gedimmt grau */
.smd-terminal__line.is-output { color: rgba(255, 255, 255, 0.92); }
.smd-terminal__line.is-comment { color: rgba(255, 255, 255, 0.42); }
/* Aktive (gerade getippte) Zeile: feiner oranger Balken links (Theme-Akzent) */
.smd-terminal__line.is-active::before {
content: "";
position: absolute;
left: 0;
top: 0.18em;
bottom: 0.18em;
width: 2px;
border-radius: 2px;
background: var(--accent-grad);
}
.smd-terminal__cursor {
display: inline-block;
width: 0.5em;
height: 1.05em;
margin-left: 0.04em;
background: rgba(255, 255, 255, 0.85);
vertical-align: text-bottom;
animation: cursor-blink 1s steps(1, end) infinite;
}
@keyframes cursor-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* Light Mode: wie die Signature-Karten der anderen Leistungsseiten (.sig-card):
heller Kartenhintergrund, weisse Titelleiste, dunkle Schrift. Die $-Zeilen und
der aktive Balken bleiben im Akzent-Verlauf (Light-Tokens), Dark Mode unverändert. */
html[data-mode="light"] .smd-terminal {
background: var(--bg-soft);
border-color: var(--line);
box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
html[data-mode="light"] .smd-terminal__bar {
background: var(--bg-raise);
border-bottom-color: var(--line);
}
html[data-mode="light"] .smd-terminal__title { color: var(--ink-faint); }
html[data-mode="light"] .smd-terminal__body { color: var(--ink); }
html[data-mode="light"] .smd-terminal__line.is-output { color: var(--ink); }
html[data-mode="light"] .smd-terminal__line.is-comment { color: var(--ink-soft); }
html[data-mode="light"] .smd-terminal__cursor { background: var(--ink); }
@media (prefers-reduced-motion: reduce) {
.smd-terminal__cursor { animation: none; }
}
/* --------------------------------------------------------------------------
19. Konami-Partikel
-------------------------------------------------------------------------- */
.smd-particle {
position: fixed;
top: -3vh;
width: 8px;
height: 8px;
border-radius: 2px;
z-index: 2000;
pointer-events: none;
animation: particle-fall var(--dur, 2.5s) linear forwards;
}
@keyframes particle-fall {
to {
transform: translateY(110vh) rotate(540deg);
opacity: 0.2;
}
}
/* --------------------------------------------------------------------------
20. Landingpage (page-landing.php)
-------------------------------------------------------------------------- */
body.lp main { position: relative; }
.button--big { font-size: 1.1rem; }
.lp-header { padding-block: var(--space-2); }
.lp-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.lp-header__logo { height: 2.6rem; width: auto; }
/* Logo-Wechsel auch auf der Landingpage */
.lp-header__logo--light { display: none; }
html[data-mode="light"] .lp-header__logo--dark { display: none; }
html[data-mode="light"] .lp-header__logo--light { display: block; }
.lp-header__tel { font-weight: 600; text-decoration: none; font-family: var(--font-display); }
.lp-header__tel-label { color: var(--ink-faint); font-weight: 400; }
@media (max-width: 40rem) {
.lp-header__tel-label { display: none; }
}
.lp-hero {
position: relative;
padding-block: clamp(4rem, 12vh, 8rem) var(--space-4);
overflow: clip;
}
.lp-hero__title {
font-size: clamp(2.6rem, 6.5vw, 4.75rem);
line-height: 1;
max-width: 20ch;
animation: lp-rise 0.6s var(--ease-out) both;
}
.lp-hero__lead {
font-size: clamp(1.1rem, 1.9vw, 1.35rem);
color: var(--ink-soft);
max-width: var(--measure);
margin-bottom: var(--space-3);
animation: lp-rise 0.6s var(--ease-out) 0.1s both;
}
.lp-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
animation: lp-rise 0.6s var(--ease-out) 0.2s both;
}
.lp-hero__tel { font-weight: 600; font-family: var(--font-display); }
@keyframes lp-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
.lp-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.lp .grid > * {
background: var(--glass-bg);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.5rem, 3vw, 2rem);
}
.lp .grid h3 { margin-bottom: 0.4rem; }
.lp .grid p { color: var(--ink-soft); margin: 0; }
.lp-band {
border-block: 1px solid var(--line);
padding-block: var(--space-4);
background: var(--bg-soft);
}
.lp-band__facts {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2) clamp(2rem, 6vw, 5rem);
list-style: none;
margin: 0 0 var(--space-3);
padding: 0;
text-align: center;
}
.lp-band__facts strong {
display: block;
font-family: var(--font-display);
font-size: 2rem;
letter-spacing: -0.02em;
}
.lp-band__facts span { color: var(--ink-faint); font-size: 0.9rem; }
.lp-band__proof {
display: grid;
gap: var(--space-2);
grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
.lp-band__proof { grid-template-columns: repeat(3, 1fr); }
}
.lp-band__item { margin: 0; }
.lp-band__item img {
border-radius: var(--radius-s);
border: 1px solid var(--line);
width: 100%;
height: auto;
}
.lp-band__item figcaption {
font-size: 0.85rem;
color: var(--ink-faint);
margin-top: 0.4rem;
}
.lp-steps {
display: grid;
gap: var(--space-3);
grid-template-columns: 1fr;
grid-auto-rows: 1fr; /* Karten auf gleicher Höhe */
list-style: none;
counter-reset: lp-step;
margin: var(--space-3) 0 0;
padding: 0;
}
@media (min-width: 48rem) {
.lp-steps { grid-template-columns: repeat(3, 1fr); }
}
.lp-steps li {
display: flex;
flex-direction: column;
}
.lp-steps li {
counter-increment: lp-step;
padding: var(--space-3);
background: var(--glass-bg);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.lp-steps li::before {
content: counter(lp-step, decimal-leading-zero);
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.6rem;
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: var(--space-1);
}
.lp-steps strong {
display: block;
font-family: var(--font-display);
margin-bottom: 0.3rem;
}
.lp-steps p { color: var(--ink-soft); margin: 0; }
.lp-section--form .lp-form {
max-width: 38rem;
margin-inline: auto;
background: var(--glass-bg);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.75rem, 4vw, 3rem);
}
.lp-form__tel { color: var(--ink-faint); margin-top: var(--space-2); }
.lp-form__tel a { font-weight: 700; }
.lp-section--cta { padding-block: var(--space-5) var(--space-6); }
.lp-footer {
border-top: 1px solid var(--line);
padding-block: var(--space-3);
font-size: 0.875rem;
color: var(--ink-faint);
}
.lp-footer__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-2);
}
.lp-footer ul {
display: flex;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
}
.lp-footer a { text-decoration: none; }
/* --------------------------------------------------------------------------
21. v1.2 Specials
-------------------------------------------------------------------------- */
/* Fix: 404-Headline darf auf grossen Screens nicht über den Viewport laufen */
.error-404 h1 {
font-size: clamp(1.9rem, 4.5vw, 3.25rem);
max-width: 24ch;
margin-inline: auto;
overflow-wrap: break-word;
}
.glitch { max-width: 100%; overflow-wrap: normal; }
/* Hero: Wort-für-Wort-Reveal mit Maskierung und Blur-to-Sharp
(JS teilt die Headline in .word-Spans, ~80ms versetzt) */
.hero__title .word {
display: inline-block;
opacity: 0;
filter: blur(9px);
clip-path: inset(-20% -8% 100% -8%);
transform: translateY(0.45em);
animation: word-in 0.75s var(--ease-out) forwards;
animation-delay: calc(var(--w, 0) * 80ms);
}
@keyframes word-in {
60% { clip-path: inset(-20% -8% -50% -8%); }
to {
opacity: 1;
filter: blur(0);
clip-path: inset(-20% -8% -50% -8%);
transform: none;
}
}
/* "in der Ostschweiz." steht als eigene, statische Zeile unter dem Wechselwort
und ist damit von dessen Breiten-/Slide-Animation entkoppelt (kein Mitwandern,
kein Glitch). */
.hero__post {
display: block;
}
/* Festes Hero-Wort ("Begleiter"): oranges Gradient-Wort (.grad-word). Es fadet
per splitWords gestaffelt mit den uebrigen Woertern rein; danach wandert
EINMAL ein weicher Shimmer hindurch (::after-Lichtband, an die Wortform
geclippt) und blendet aus -> ruhiges Gradient-Wort bleibt. Kein Layout-
Einfluss, kein Sprung. */
.hero__word {
position: relative;
}
/* Mobile/iOS: -webkit-background-clip: text beschneidet die Unterlaenge (g) des
Gradient-Worts an der Zeilenbox. Etwas Polster unten gibt dem g Raum; die
gleich grosse negative Marge gleicht es in der Zeile wieder aus -> keine
Verschiebung der anderen Zeilen / des Layouts. */
@media (max-width: 48rem) {
.hero__word {
padding-bottom: 0.18em;
margin-bottom: -0.18em;
}
}
html.js .hero__word::after {
content: attr(data-text);
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.9) 50%, transparent 62%);
background-size: 240% 100%;
background-position: 130% 0;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: 0;
/* Start erst nach dem Reinfaden aller Woerter (--wn = Gesamtwortzahl, via JS). */
animation: hero-word-shimmer 1.6s var(--ease-out) forwards;
animation-delay: calc(var(--wn, 9) * 80ms + 0.5s);
}
@keyframes hero-word-shimmer {
0% { background-position: 130% 0; opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { background-position: -30% 0; opacity: 0; }
}
/* Reduced Motion: kein Shimmer, ruhiges Gradient-Wort steht statisch. */
@media (prefers-reduced-motion: reduce) {
.hero__word::after { display: none; }
}
/* Punkt am Satzende: erscheint als Wort, danach Gradient-Glow-Puls als
Abschluss der Lade-Animation (--wn = Gesamtzahl der Wörter, via JS) */
html.js .hero__title .hero__dot.word {
animation: word-in 0.75s var(--ease-out) forwards, dot-pulse 1s ease-out 1;
animation-delay: calc(var(--w, 0) * 80ms), calc(var(--wn, 9) * 80ms + 0.55s);
}
@keyframes dot-pulse {
0% { text-shadow: 0 0 0 rgba(255, 68, 56, 0); transform: scale(1); }
35% { text-shadow: 0 0 22px rgba(255, 68, 56, 0.95), 0 0 46px rgba(255, 122, 41, 0.6); transform: scale(1.3); }
100% { text-shadow: 0 0 0 rgba(255, 68, 56, 0); transform: scale(1); }
}
/* Zahlen-Counter: tabellarische Ziffern verhindern Zittern beim Scramble */
.hero__facts strong,
.lp-band__facts strong {
font-variant-numeric: tabular-nums;
}
/* Projekt-Cards: leuchtender Gradient-Border folgt dem Mauszeiger */
.projekt-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: radial-gradient(260px circle at var(--px, 50%) var(--py, 50%), var(--accent), var(--accent-2) 40%, transparent 70%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
z-index: 2;
}
.projekt-card:hover::before { opacity: 1; }
/* Leistungs-Icons: Linien zeichnen sich beim Reinscrollen (pathLength=1) */
.card__icon {
width: 2.5rem;
height: 2.5rem;
color: var(--ink);
margin-bottom: var(--space-1);
}
.card__icon :is(path, circle, rect, line, polyline) {
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 1.4s var(--ease-out) 0.2s;
}
html.js .reveal.is-in .card__icon :is(path, circle, rect, line, polyline),
html:not(.js) .card__icon :is(path, circle, rect, line, polyline) {
stroke-dashoffset: 0;
}
/* Wiederverwendbarer, dezenter Text-Glitch (sparsam einsetzen) */
.glitch-text { position: relative; }
.glitch-text::before,
.glitch-text::after {
content: attr(data-text);
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
.glitch-text::before {
color: var(--accent);
animation: glitch-blip 4.5s steps(1, end) infinite;
}
.glitch-text::after {
color: var(--accent-2);
animation: glitch-blip 4.5s steps(1, end) infinite;
animation-delay: 0.08s;
}
@keyframes glitch-blip {
0%, 91%, 100% { opacity: 0; transform: none; }
92% { opacity: 0.65; transform: translate(3px, -2px); }
94% { opacity: 0.5; transform: translate(-3px, 1px); }
96% { opacity: 0; }
}
/* Cursor-Glow: dezenter Schein, folgt dem Zeiger (nur Desktop + Dark Mode) */
.cursor-glow {
position: fixed;
left: 0;
top: 0;
width: 36rem;
height: 36rem;
margin: -18rem 0 0 -18rem;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 68, 56, 0.07) 0%, rgba(255, 122, 41, 0.04) 35%, transparent 65%);
mix-blend-mode: screen;
pointer-events: none;
z-index: 3;
will-change: transform;
}
html[data-mode="light"] .cursor-glow { display: none; }
@media (pointer: coarse) {
.cursor-glow { display: none; }
}
/* Kontaktformular im Conversational-Stil: Lückentext in riesiger Schrift,
Felder inline mit Akzent-Unterstreichung statt Box-Rahmen */
.smd-convo {
font-family: var(--font-display);
font-size: clamp(1.55rem, 3vw, 2.8rem);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.02em;
max-width: 100%;
}
.smd-convo p {
margin-bottom: 0.18em;
}
/* Hält Feld + Satzzeichen (z. B. den Schluss-Punkt) zusammen, damit kein
einsamer Punkt in eine eigene Zeile fällt. */
.smd-convo__nb { white-space: nowrap; }
.smd-convo .smd-convo__input {
display: inline-block;
width: auto;
max-width: 100%;
font: inherit;
color: var(--ink);
background: transparent;
border: 0;
border-radius: 0;
padding: 0 0.08em 0.06em;
border-bottom: 3px solid var(--line-strong);
background-image: var(--accent-grad);
background-repeat: no-repeat;
background-size: 0% 3px;
background-position: 0 100%;
transition: background-size 0.4s var(--ease-out), border-color 0.2s ease, filter 0.3s ease;
field-sizing: content;
min-width: 5ch;
box-shadow: none;
}
.smd-convo__input--name { width: 9ch; }
.smd-convo__input--firma { width: 11ch; }
.smd-convo__input--email { width: 26ch; } /* volle E-Mail-Adresse sichtbar */
.smd-convo__input--tel { width: 18ch; } /* komplette Telefonnummer sichtbar */
/* Freitext: mehrzeilig wachsend, gleicher Inline-Stil (JS wächst mit).
inline-block (statt block), damit der Schluss-Punkt direkt am Feld bleibt
und nicht in eine eigene Zeile fällt. */
.smd-convo .smd-convo__input--nachricht {
display: inline-block;
vertical-align: bottom;
/* Spuerbar groesser: breiter + mehrzeilig (Platz fuer mehrere Zeilen). Das JS
laesst es beim Tippen weiter wachsen; min-height ist nur die Untergrenze. */
width: min(42ch, 92%);
min-height: 4em;
resize: none;
overflow: hidden;
line-height: 1.3;
}
/* Beim Tippen und wenn gefüllt: Unterstreichung leuchtet im Gradient */
.smd-convo .smd-convo__input:focus,
.smd-convo .smd-convo__input:not(:placeholder-shown) {
outline: none;
border-bottom-color: transparent;
background-size: 100% 3px;
filter: drop-shadow(0 10px 14px rgba(255, 68, 56, 0.35));
}
.smd-convo .smd-convo__input::placeholder {
color: var(--ink-faint);
font-weight: 400;
opacity: 1;
}
/* Inline-Validierung: erst nach Interaktion rot */
.smd-convo .smd-convo__input:user-invalid {
border-bottom-color: var(--accent);
background-size: 0% 3px;
}
/* Dropdown im Satz */
.smd-convo__select-wrap {
display: inline-block;
position: relative;
}
.smd-convo .smd-convo__input--select {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
padding-right: 1.1em;
color: var(--accent);
field-sizing: content;
}
.smd-convo .smd-convo__input--select:invalid { color: var(--ink-faint); font-weight: 400; }
.smd-convo .smd-convo__input--select option {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 400;
color: initial;
}
.smd-convo__select-wrap::after {
content: "";
position: absolute;
right: 0.25em;
top: 50%;
width: 0.32em;
height: 0.32em;
border-right: 3px solid var(--accent);
border-bottom: 3px solid var(--accent);
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
.smd-convo button[type="submit"] {
margin-top: var(--space-3);
font-size: 1.15rem;
}
.smd-convo .form-note {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0;
margin-top: var(--space-2);
}
@media (max-width: 40rem) {
.smd-convo .smd-convo__input { min-width: 4ch; }
}
/* Formular-Status (echter Versand per wp_mail) */
.smd-form-success,
.smd-form-error {
padding: var(--space-2) var(--space-3);
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--glass-bg);
}
.smd-form-success { border-color: rgba(61, 220, 132, 0.5); }
.smd-form-error { border-color: var(--accent); font-family: var(--font-sans); font-size: 1rem; font-weight: 400; }
/* Kategorie-Filter (Referenzen) */
.filter-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: var(--space-3);
}
.filter-pills__pill {
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
padding: 0.5rem 1.1rem;
border-radius: 99px;
border: 1px solid var(--line-strong);
background: var(--glass-bg);
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.filter-pills__pill:hover {
border-color: var(--ink);
color: var(--ink);
}
.filter-pills__pill.is-active {
background: var(--accent-grad);
color: #fff;
border-color: transparent;
box-shadow: var(--glow);
}
/* Projekt-Cards: ganzer Bereich klickbar, Fokus sichtbar */
.projekt-card { cursor: pointer; }
/* Kontaktformular: floatende Labels */
.form-field--float { position: relative; margin-bottom: var(--space-2); }
.form-field--float label {
position: absolute;
left: 1rem;
top: 1.05rem;
margin: 0;
font-size: 1rem;
font-weight: 500;
color: var(--ink-faint);
pointer-events: none;
transition: top 0.25s var(--ease-out), font-size 0.25s var(--ease-out), color 0.2s ease;
}
.form-field--float :is(input, textarea) {
padding-top: 1.55rem;
padding-bottom: 0.5rem;
}
.form-field--float :is(input, textarea):focus + label,
.form-field--float :is(input, textarea):not(:placeholder-shown) + label {
top: 0.45rem;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
}
/* Kontaktformular: Submit-Button mit Erfolgs-Morph */
.smd-kontaktform button[type="submit"] {
position: relative;
min-width: 13rem;
transition: transform 0.25s var(--ease-out), background 0.4s ease, box-shadow 0.4s ease, filter 0.2s ease;
}
.smd-kontaktform .btn-label { transition: opacity 0.25s ease; }
.smd-kontaktform .btn-check {
position: absolute;
inset: 0;
margin: auto;
width: 1.5rem;
height: 1.5rem;
opacity: 0;
transition: opacity 0.2s ease 0.15s;
}
.smd-kontaktform .btn-check path {
fill: none;
stroke: #fff;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.smd-kontaktform button.is-success {
background: linear-gradient(120deg, #1f9d57, #3ddc84);
box-shadow: 0 0 28px rgba(61, 220, 132, 0.4);
}
.smd-kontaktform button.is-success .btn-label { opacity: 0; }
.smd-kontaktform button.is-success .btn-check { opacity: 1; }
.smd-kontaktform button.is-success .btn-check path {
transition: stroke-dashoffset 0.5s var(--ease-out) 0.2s;
stroke-dashoffset: 0;
}
/* Front-Flow: Container für die scroll-gezeichnete Linie.
Layering von hinten nach vorn: Sektions-Hintergründe und Orbs,
darüber die Linie, ZUOBERST der Inhalt (Cards, Bilder, CTA). Die
Linie verschwindet hinter jeder Card und taucht am Rand wieder auf. */
.front-flow { position: relative; }
.front-flow .section > .wrap {
position: relative;
z-index: 2;
}
/* Sektions-Kontrast: abwechselnd tiefschwarz und leicht aufgehellt */
.section--raise {
background: var(--bg-soft);
border-block: 1px solid var(--line);
}
/* Scroll-Linie: stroke-dashoffset hängt am Scroll-Progress (JS, rAF) */
.scroll-path {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1; /* über Sektions-Hintergrund, unter dem Inhalt (.wrap z=2) */
display: none;
}
@media (min-width: 64rem) {
.scroll-path { display: block; }
}
/* Mobile: die dekorative Scroll-Fortschrittslinie explizit aus - sie ist ein
Desktop-Element und lief auf schmalen Screens senkrecht durch die Stat-
Ziffern (1000+, 12, 1). Desktop (>=64rem) bleibt unveraendert. */
@media (max-width: 47.98rem) {
.scroll-path { display: none; }
}
.scroll-path svg {
width: 100%;
height: 100%;
display: block;
}
.scroll-path__line {
fill: none;
stroke: url(#smd-line-grad);
stroke-width: 2;
/* Befund 08.08.2026: Mit non-scaling-stroke rechnet der Browser nicht nur die
Strichstärke, sondern auch das Dash-Muster im Geräteraum statt in
Benutzereinheiten. Der gezeichnete Teil der Linie fiel dadurch zu kurz aus
und endete weit oberhalb der Stelle, die stroke-dashoffset vorgibt. Im
Browser einzeln gegengeprüft: Maske aus half nicht, Filter aus half nicht,
vector-effect aus brachte die Linie zurück. Der viewBox-Massstab ist 1:1
(viewBox = offsetWidth × offsetHeight, SVG auf 100 %), die Strichstärke
bleibt damit bei 2 px. */
vector-effect: none;
opacity: 0.75;
filter: drop-shadow(0 0 6px rgba(255, 68, 56, 0.8));
}
/* Im Light Mode wirkt die Linie sonst zu hart */
html[data-mode="light"] .scroll-path__line {
opacity: 0.4;
filter: drop-shadow(0 0 4px rgba(214, 40, 32, 0.35));
}
html[data-mode="light"] .scroll-path__dot.is-lit {
box-shadow: 0 0 10px rgba(214, 40, 32, 0.55), 0 0 24px rgba(232, 89, 12, 0.3);
}
.scroll-path__dot {
position: absolute;
width: 13px;
height: 13px;
margin: -7px 0 0 -7px;
border-radius: 50%;
background: var(--bg-raise);
border: 1px solid var(--line-strong);
transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s var(--ease-out);
}
.scroll-path__dot.is-lit {
background: var(--accent-grad);
border-color: transparent;
box-shadow: 0 0 16px rgba(255, 68, 56, 0.9), 0 0 40px rgba(255, 122, 41, 0.5);
transform: scale(1.3);
}
/* Schwebende Glow-Orbs hinter der Glass-Ebene */
.orbs {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: 0.4;
animation: orb-float 16s ease-in-out infinite alternate;
will-change: transform;
}
.orb--1 {
width: 26rem;
height: 26rem;
background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
top: -8rem;
right: -6rem;
}
.orb--2 {
width: 22rem;
height: 22rem;
background: radial-gradient(circle, var(--accent-2) 0%, transparent 65%);
bottom: -7rem;
left: -5rem;
animation-delay: -8s;
}
html[data-mode="light"] .orb { opacity: 0.16; }
@keyframes orb-float {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-3rem, 2.5rem) scale(1.14); }
}
/* Mehr Glass: innerer Schein auf Karten */
.card,
.lp .grid > *,
.lp-steps li,
.projekt-facts,
.lp-section--form .lp-form {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* Gradient-Highlight in Sektions-Headlines (JS umhüllt das letzte Wort) */
.grad-word {
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Sanfter Atem-Glow auf den orange hervorgehobenen End-Woertern der Section-
Headlines / Unterseiten-H1 / Footer-CTA. Zentral fuer alle, ruhig (~2.6s),
nur optisch (filter) -> kein Layout-Einfluss, kein Sprung. Hero-Wort/-Dot
sind bewusst NICHT enthalten (haben ihren eigenen Shimmer). */
.section-head__title .grad-word,
.page-header h1 .grad-word,
.footer-cta__title .grad-word {
animation: accent-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes accent-glow-pulse {
0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 122, 41, 0)); }
50% { filter: brightness(1.18) drop-shadow(0 0 10px rgba(255, 122, 41, 0.45)); }
}
@media (prefers-reduced-motion: reduce) {
.section-head__title .grad-word,
.page-header h1 .grad-word,
.footer-cta__title .grad-word { animation: none; }
}
/* Über-mich-Seite: Intro mit Portrait, asymmetrische Galerie, Badges */
.smd-intro-grid {
display: grid;
gap: var(--space-3);
grid-template-columns: 1fr;
align-items: center;
margin-bottom: var(--space-4);
}
@media (min-width: 48rem) {
.smd-intro-grid { grid-template-columns: 1.1fr 0.9fr; }
}
/* Über-uns: grosses Hero-Bild oben + Zickzack-Sektionen darunter. Die Bilder
laufen im NATÜRLICHEN Seitenverhältnis (height:auto), werden also gross und
vollständig gezeigt und nie oben/unten beschnitten. */
.ueber-hero {
margin: 0 0 var(--space-4);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.ueber-hero img,
.smd-zickzack__bild img {
display: block;
width: 100%;
height: auto;
}
.smd-zickzack {
display: grid;
gap: var(--space-3);
grid-template-columns: 1fr;
align-items: center;
margin-block: var(--space-5);
}
.smd-zickzack__bild {
margin: 0;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.smd-zickzack__text > :first-child { margin-top: 0; }
.smd-zickzack__text > :last-child { margin-bottom: 0; }
.smd-zickzack__text p { color: var(--ink-soft); }
@media (min-width: 48rem) {
.smd-zickzack {
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
/* Bild rechts, Text links bei jeder zweiten Sektion. */
.smd-zickzack--flip .smd-zickzack__bild { order: 2; }
}
/* Einheitliche Bild-Behandlung: abgerundete Ecken, feiner Gradient-Border,
Schatten und eine leichte Einfärbung, damit helle Fotos (weisse
Studio-Hintergründe) nicht aus dem Dark Theme fallen. */
.smd-frame,
.smd-gallery__item,
.smd-team__media {
position: relative;
margin: 0;
border-radius: var(--radius);
overflow: hidden;
background: var(--glass-bg);
box-shadow: var(--shadow);
}
.smd-frame img,
.smd-gallery__item img,
.smd-team__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.92) contrast(1.04);
transition: transform 0.7s var(--ease-out);
}
/* Einfärbung: warmer Akzent oben, dunkler Verlauf unten Richtung Theme */
.smd-frame::before,
.smd-gallery__item::before,
.smd-team__media::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(165deg, rgba(255, 68, 56, 0.09), transparent 42%, rgba(10, 10, 12, 0.3));
pointer-events: none;
}
/* Feiner Gradient-Rahmen (gleiche Masken-Technik wie .card::before) */
.smd-frame::after,
.smd-gallery__item::after,
.smd-team__media::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
padding: 1px;
background: var(--glass-border);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
html[data-mode="light"] .smd-frame::before,
html[data-mode="light"] .smd-gallery__item::before,
html[data-mode="light"] .smd-team__media::before {
background: linear-gradient(165deg, rgba(214, 40, 32, 0.05), transparent 45%, rgba(19, 19, 18, 0.08));
}
.smd-frame:hover img,
.smd-gallery__item:hover img {
transform: scale(1.05);
}
.entry-content .smd-gallery {
display: grid;
gap: var(--space-2);
grid-template-columns: 1fr;
margin-block: var(--space-3);
}
@media (min-width: 48rem) {
.entry-content .smd-gallery {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 16rem;
}
.smd-gallery__item--wide { grid-column: span 2; }
.smd-gallery__item--tall { grid-row: span 2; }
}
/* Galerie und Intro laufen über die volle Breite ihres Containers
(im Flow also über den ganzen Wrap, nicht nur die Lesespalte) */
.entry-content .smd-gallery,
.entry-content .smd-intro-grid {
width: 100%;
}
/* Team: Portrait-Cards. Sauberes Bild ohne Text-Overlay und ohne dunklen
Verlauf, das ganze Gesicht bleibt sichtbar (object-position oben). Name,
Rolle und optionale Kurzbeschreibung stehen als eigener Textblock unter
dem Bild. Karten richten sich nach ihrer Inhaltshöhe (align-items: start),
damit kurze Karten nicht unnötig gestreckt werden. */
.entry-content .smd-team {
display: grid;
gap: var(--space-3) var(--space-2);
grid-template-columns: 1fr;
/* stretch (statt start): in der mehrspaltigen Ansicht werden die Karten einer
Reihe gleich hoch -> mit flex + margin-top:auto starten die Kontaktbloecke
buendig. Einspaltig (Mobile) ist jede Reihe = eine Karte, also kein
kuenstlicher Leerraum. */
align-items: stretch;
/* Mehr Luft nach unten -> klare Trennung zur "Zahlen"-Sektion. */
margin-block: var(--space-3) clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 40rem) {
.entry-content .smd-team { grid-template-columns: repeat(2, 1fr); }
.entry-content .smd-team--3 { grid-template-columns: repeat(3, 1fr); }
}
.smd-team__card {
position: relative;
margin: 0;
/* Flex-Column, damit die Caption die Resthoehe fuellt und der Kontaktblock
per margin-top:auto an den Karten-Boden rutscht (gleiche Hoehe -> buendig). */
display: flex;
flex-direction: column;
}
.smd-team__media {
aspect-ratio: 4 / 5;
}
/* Bild bleibt frei: der dunkle Tönungs-Verlauf (für Text-Overlays) entfällt
bei Team-Karten, der feine Rahmen (::after) bleibt. */
.smd-team__media::before { display: none; }
.smd-team__media img {
object-position: 50% 18%;
}
.smd-team__card:hover .smd-team__media img { transform: scale(1.05); }
.smd-team__caption {
padding: var(--space-2) 0.25rem 0;
/* fuellt die Resthoehe unter dem Bild; Inhalt als Flex-Column, damit
.smd-team__kontakt per margin-top:auto unten andocken kann. */
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.smd-team__caption strong {
display: block;
font-family: var(--font-display);
font-size: clamp(1.15rem, 2.2vw, 1.4rem);
letter-spacing: -0.02em;
color: #fff; /* Name in klarem Weiss */
}
.smd-team__caption > span {
display: block;
font-size: 0.92rem;
color: var(--ink-faint);
}
/* Rollenbezeichnung (span direkt nach dem Namen): gedaempftes Grau (wie die
Beschreibung, eine Spur heller), damit der weisse Name dominiert. Nicht orange. */
.smd-team__caption strong + span {
color: var(--ink-soft);
}
/* Light Mode: Name wieder dunkel (weiss waere auf hellem Grund unsichtbar). */
html[data-mode="light"] .smd-team__caption strong {
color: var(--ink);
}
/* E-Mail in den Team-Karten: gleiche Darstellung wie die Footer-E-Mail über
die wiederverwendete Klasse .u-link (orange Ruhe-/Hover-Unterstreichung) und
den "E:"-Präfix. Hier nur Layout/Abstände + oranger Akzent-Text, damit die
Karten-Hierarchie (Rolle darüber, Beschreibung darunter) erhalten bleibt. */
/* Kontaktblock (E-Mail + Telefon) als Abschluss der Karte, UNTER dem Text.
Jede Zeile ein Link in Weiss (gleiche Variable wie der Footer-Link, var(--ink)
-> Dark/Light adaptiv); Hover-Gradient + Unterstrich aus der globalen
tel:/mailto:-Regel. Hoehere Spezifitaet als die graue .smd-team__caption > span,
damit der Link nicht grau wird. Naila ohne E-Mail/Telefon -> Block wird gar
nicht gerendert (keine Luecke). */
.smd-team__kontakt {
margin-top: auto; /* dockt buendig am Karten-Boden an (gleiche Hoehe -> Kontaktbloecke auf einer Linie) */
padding-top: var(--space-2); /* min. klarer Abstand zum Bio-Text (margin-top ist jetzt auto) */
/* Flex-Column + flex-start: E:/T: bleiben untereinander, aber der Unterstrich
(.u-link) ist nur so breit wie der Text, nicht volle Spaltenbreite. */
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 0.9rem;
line-height: 1.6;
}
.smd-team__caption .smd-team__kontakt a {
color: var(--ink);
display: inline-block; /* Unterstrich endet am Text, exakt wie im Footer */
}
.smd-team__bio {
margin: 0.6rem 0 0;
font-size: 0.95rem;
line-height: 1.55;
color: var(--ink-soft);
}
/* Mitglied 3 (Naila, das lebende Doge-Meme): bewusst KINDISCHER Doge-Stilbruch
als Gag, NUR diese Karte, NUR auf Hover-Geräten. Mehrere grelle Comic-Sans-
Meme-Wörter sind über das Bild gestreut (liegen IM Bildbereich, daher nie
über Name/Rolle/Text), poppen beim Hover gestaffelt auf und blenden bei
Maus weg wieder aus. Auf Mobile komplett ausgeblendet. */
.smd-team__doge {
display: none;
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
}
.smd-team__doge-w {
position: absolute;
/* Gebuendeltes Comic Neue zuerst -> konsistente Doge-Optik auf allen
Plattformen (auch Android). System-Comic-Fonts als Fallback waehrend des
Ladens / falls nicht verfuegbar, sauberer Sans-Abschluss statt cursive. */
font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Marker Felt", sans-serif;
font-weight: 700;
font-size: 1.2rem;
white-space: nowrap;
color: #fff;
text-shadow: 1.5px 1.5px 0 rgba(0, 0, 0, 0.6), 0 0 7px rgba(0, 0, 0, 0.4);
opacity: 0;
transform: rotate(var(--rot, 0deg)) scale(0.5);
transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.6, 0.64, 1);
}
/* Position, Farbe, Grösse, Drehung und gestaffelter Delay je Wort. Bewusst
"schlampig" gestreut, variierende Grössen, volle Doge-Palette. "wow" ist
der grosse, prominente Anker (Signatur des Formats). */
/* Basis = Desktop: Woerter deutlich groesser, damit sie zum grossen Bild passen.
Mobile wird weiter unten per @media (max-width: 48rem) gesetzt (unveraendert).
Positionen (top/left/right), Farben und Rotationen bleiben exakt gleich. */
/* Desktop-Groessen (Basis): dezenter als zuvor, damit das Naila-Bild nicht
ueberdominiert; Bildrahmen bleibt = wie Shane/Beatrix (proportional).
Mobile wird weiter unten per @media (max-width: 48rem) gesetzt (unveraendert). */
.smd-team__doge-w--1 { top: 5%; left: 3%; color: #ffe600; --rot: -11deg; font-size: 2rem; transition-delay: 0s; }
.smd-team__doge-w--2 { top: 14%; right: 4%; color: #ff2bd6; --rot: 9deg; font-size: 1.7rem; transition-delay: 0.08s; }
.smd-team__doge-w--3 { top: 44%; left: 26%; color: #19a8ff; --rot: -7deg; font-size: 3.6rem; font-weight: 800; transition-delay: 0.12s; }
.smd-team__doge-w--4 { bottom: 24%; left: 5%; color: #ff2d2d; --rot: 13deg; font-size: 2.15rem; transition-delay: 0.18s; }
.smd-team__doge-w--5 { top: 32%; right: 4%; color: #4dff1f; --rot: -14deg; font-size: 1.75rem; transition-delay: 0.24s; }
.smd-team__doge-w--6 { bottom: 7%; right: 7%; color: #00e6ff; --rot: 7deg; font-size: 2.3rem; transition-delay: 0.3s; }
/* Mobile: Doge-Woerter deutlich groesser (~1.7x), damit der Gag auch auf dem
Handy knallt. Nur die Schriftgroesse skaliert hoch - Positionen, Farben,
Rotationen und der Effekt bleiben exakt gleich. */
@media (max-width: 48rem) {
.smd-team__doge-w--1 { font-size: 2.3rem; }
.smd-team__doge-w--2 { font-size: 1.95rem; }
.smd-team__doge-w--3 { font-size: 4.25rem; }
.smd-team__doge-w--4 { font-size: 2.45rem; }
.smd-team__doge-w--5 { font-size: 2rem; }
.smd-team__doge-w--6 { font-size: 2.65rem; }
}
@media (hover: hover) and (pointer: fine) {
.smd-team__doge { display: block; }
.smd-team__card--doge { transition: transform 0.3s ease; }
.smd-team__card--doge:hover { transform: rotate(1.5deg); }
.smd-team__card--doge:hover .smd-team__doge-w {
opacity: 1;
transform: rotate(var(--rot, 0deg)) scale(1);
}
}
/* Touch/ohne Hover: kein :hover moeglich. Ein Tap auf die Karte togglet
.is-doge-shown (JS) -> die Woerter faden gestaffelt ein/aus (verstecktes
Easter Egg, gleicher Reveal wie Hover am Desktop). */
@media (hover: none), (pointer: coarse) {
.smd-team__doge { display: block; }
.smd-team__card--doge.is-doge-shown .smd-team__doge-w {
opacity: 1;
transform: rotate(var(--rot, 0deg)) scale(1);
}
}
/* Reduced Motion: keine Bewegung/kein Kippen, aber die Wörter dürfen statisch
erscheinen. */
@media (prefers-reduced-motion: reduce) {
.smd-team__card--doge:hover { transform: none; }
.smd-team__doge-w {
transition: none;
transform: rotate(var(--rot, 0deg)) scale(1);
}
}
.smd-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-block: var(--space-3);
}
.smd-badges img {
height: 6.5rem;
width: auto;
border-radius: var(--radius-s);
background: #fff;
padding: 0.6rem;
border: 1px solid var(--line);
}
/* Mitglied-bei-/Zertifikate-Leiste (Ueber-mich): nutzt das einheitliche
Logo-Kachelsystem .smd-logo-grid / .smd-logo-tile (siehe Footer-Bereich,
"Einheitliches Logo-Kachelsystem"). Kein eigenes CSS mehr noetig. */
/* Footer: SMD-Wortmarke zeichnet sich als SVG-Pfad */
/* Wortmarke sitzt in der Kontakt-Spalte, nicht mehr als eigene Zeile */
.site-footer__wordmark svg {
width: 8.5rem;
height: auto;
display: block;
margin-bottom: var(--space-2);
overflow: visible;
}
.site-footer__wordmark text {
font-family: var(--font-display);
font-size: 64px;
font-weight: 700;
letter-spacing: -0.02em;
}
/* Ebene 1: Outline zeichnet sich (stroke-dashoffset) */
.site-footer__wordmark .wm-stroke {
fill: none;
stroke: var(--ink);
stroke-width: 1.1;
stroke-dasharray: 620;
stroke-dashoffset: 620;
}
html.js .site-footer__wordmark.is-in .wm-stroke {
transition: stroke-dashoffset 2s var(--ease-out);
stroke-dashoffset: 0;
}
/* Ebene 2: Füllung läuft nach dem Zeichnen von links nach rechts ein */
.site-footer__wordmark .wm-fill {
fill: var(--ink);
clip-path: inset(-10% 100% -10% 0);
}
html.js .site-footer__wordmark.is-in .wm-fill {
transition: clip-path 1.1s var(--ease-out) 1.6s;
clip-path: inset(-10% 0 -10% 0);
}
/* Ebene 3: sanfter Rot-Orange-Schimmer, läuft alle paar Sekunden durch */
.site-footer__wordmark .wm-shimmer {
fill: url(#smd-wm-grad);
opacity: 0;
-webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 50%, transparent 65%);
mask-image: linear-gradient(100deg, transparent 35%, #000 50%, transparent 65%);
-webkit-mask-size: 250% 100%;
mask-size: 250% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
html.js .site-footer__wordmark.is-in .wm-shimmer {
animation: wm-shimmer 5.5s linear 3.2s infinite;
}
@keyframes wm-shimmer {
0% {
-webkit-mask-position: 130% 0;
mask-position: 130% 0;
opacity: 0;
}
6% { opacity: 0.95; }
24% { opacity: 0.95; }
30%, 100% {
-webkit-mask-position: -90% 0;
mask-position: -90% 0;
opacity: 0;
}
}
/* Hover: kurzer Glow-Puls */
.site-footer__wordmark:hover svg {
animation: wm-glow 0.7s ease-out;
}
@keyframes wm-glow {
35% { filter: drop-shadow(0 0 18px rgba(255, 68, 56, 0.85)) drop-shadow(0 0 36px rgba(255, 122, 41, 0.4)); }
100% { filter: none; }
}
/* Ohne JS und bei Reduced Motion: statisch gefüllt */
html:not(.js) .site-footer__wordmark .wm-stroke { stroke-dashoffset: 0; }
html:not(.js) .site-footer__wordmark .wm-fill { clip-path: none; }
@media (prefers-reduced-motion: reduce) {
.site-footer__wordmark .wm-stroke { stroke-dashoffset: 0; }
.site-footer__wordmark .wm-fill { clip-path: none; }
.site-footer__wordmark .wm-shimmer { animation: none !important; }
}
/* --------------------------------------------------------------------------
22. Utility, Druck, Reduced Motion
-------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
@media print {
.site-header, .site-footer, .cta-banner, .nav-toggle,
.mode-toggle, .scroll-progress, .marquee { display: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
html.js .reveal { opacity: 1; transform: none; }
.marquee__track { animation: none; }
.hero__bg { transform: none; }
}
/* --------------------------------------------------------------------------
23. Unterseiten-Design-System: Inhalts-Fluss mit Breakouts, Custom-Listen,
Punkte-Cards, Pull-Quote, Stats-Zeile. Ziel: Unterseiten sprechen dieselbe
Sprache wie die Startseite.
-------------------------------------------------------------------------- */
/* Inhalts-Fluss: Textblöcke auf lesbarer Breite (linksbündig wie der
Page-Header, nutzt den Grossteil des Wraps), gestalterische Blöcke
(Galerie, Team, Stats, Punkte-Cards, Terminal, Karte, FAQ) laufen über
die volle Wrap-Breite */
.entry-content--flow { max-width: none; }
.entry-content--flow > * { max-width: var(--measure-wide); }
.entry-content--flow > .smd-gallery,
.entry-content--flow > .smd-intro-grid,
.entry-content--flow > .ueber-hero,
.entry-content--flow > .smd-zickzack,
.entry-content--flow > .smd-team,
.entry-content--flow > .smd-stats,
.entry-content--flow > .smd-points,
.entry-content--flow > .smd-terminal,
.entry-content--flow > .smd-map,
.entry-content--flow > .smd-faq,
.entry-content--flow > .grid { max-width: none; }
/* Listen: Gradient-Punkt statt Standard-Bullet, mehr Luft */
.entry-content ul:not([class]) {
list-style: none;
padding-left: 0;
}
.entry-content ul:not([class]) > li {
position: relative;
padding-left: 1.9rem;
margin-bottom: 0.85rem;
}
.entry-content ul:not([class]) > li::before {
content: "";
position: absolute;
left: 0.2rem;
top: 0.62em;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--accent-grad);
box-shadow: 0 0 10px rgba(255, 68, 56, 0.5);
}
html[data-mode="light"] .entry-content ul:not([class]) > li::before { box-shadow: none; }
/* Gutenberg-/klassische Listen mit eigenem Marker (z. B. ul.wp-block-list):
Bullet im Theme-Orange. ::marker faerbt nur den Marker, der Text behaelt seine
Farbe (weiss in Dark, dunkel in Light). Gradient auf ::marker ist nicht
zuverlaessig, daher kraeftiges Theme-Orange als Vollton. Nur Beitragsinhalt. */
.entry-content ul li::marker { color: var(--accent); }
/* Nummerierte Listen: Gradient-Zahlen im Display-Font (wie lp-steps) */
.entry-content ol:not([class]) {
list-style: none;
padding-left: 0;
counter-reset: smd-ol;
}
.entry-content ol:not([class]) > li {
position: relative;
padding-left: 2.9rem;
margin-bottom: 1rem;
counter-increment: smd-ol;
}
.entry-content ol:not([class]) > li::before {
content: counter(smd-ol, decimal-leading-zero);
position: absolute;
left: 0;
top: 0.12em;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15rem;
letter-spacing: 0.02em;
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Punkte-Cards: Begriffe wie "Persönlich" als kleine Glass-Cards mit
Gradient-Punkt statt langer Aufzählung (ul class="smd-points") */
.entry-content .smd-points {
display: grid;
gap: var(--space-2);
grid-template-columns: 1fr;
align-items: stretch; /* Karten einer Reihe garantiert gleich hoch */
list-style: none;
padding: 0;
margin-block: var(--space-3);
}
@media (min-width: 48rem) {
.entry-content .smd-points { grid-template-columns: repeat(2, 1fr); }
}
.entry-content .smd-points > li {
position: relative;
height: 100%; /* füllt die Grid-Zelle -> alle Karten gleich hoch */
padding: 1.3rem 1.4rem 1.3rem 2.9rem;
background: var(--glass-bg);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
font-size: 0.98rem;
color: var(--ink-soft);
}
.entry-content .smd-points > li::before {
content: "";
position: absolute;
left: 1.25rem;
top: 1.78rem;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--accent-grad);
box-shadow: 0 0 10px rgba(255, 68, 56, 0.5);
}
html[data-mode="light"] .entry-content .smd-points > li::before { box-shadow: none; }
.entry-content .smd-points > li > strong:first-child {
display: block;
font-family: var(--font-display);
font-size: 1.08rem;
color: var(--ink);
margin-bottom: 0.25rem;
}
/* Pull-Quote: grosse Aussage im Display-Font mit Gradient-Balken */
.entry-content blockquote {
position: relative;
margin: var(--space-4) 0;
padding: 0.4rem 0 0.4rem var(--space-3);
border-left: 0;
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.015em;
color: var(--ink);
}
.entry-content blockquote::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
border-radius: 2px;
background: var(--accent-grad);
box-shadow: 0 0 14px rgba(255, 68, 56, 0.45);
}
.entry-content blockquote p { margin-bottom: 0; }
.entry-content blockquote cite {
display: block;
margin-top: var(--space-1);
font-family: var(--font-sans);
font-size: 0.92rem;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
color: var(--ink-faint);
}
/* Stats-Zeile: Kennzahlen wie in der Hero (Scramble via data-scramble) */
.smd-stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) clamp(2rem, 6vw, 5rem);
/* margin-bottom EXAKT wie .smd-team (Vorgaenger der "Zahlen"-Ueberschrift),
damit der Abstand ueber "Mitglied bei" = Abstand ueber "Zahlen". Vorher
var(--space-4) (2.5rem) -> jetzt derselbe clamp wie .smd-team. */
margin-block: var(--space-3) clamp(2.5rem, 6vw, 4.5rem);
padding: var(--space-2) 0 0;
border-top: 1px solid var(--line);
list-style: none;
}
.smd-stats > li { padding: 0; }
.smd-stats strong {
display: block;
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
font-variant-numeric: tabular-nums;
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.smd-stats span {
color: var(--ink-faint);
font-size: 0.9rem;
}
/* Konkreter-Nutzen-Section (nur Leistungsseiten, .section--tight): die global
asymmetrische .smd-stats-Polsterung (grosser unterer Rand fuer die
Ueber-mich-Seite) liess die Zahlen zu weit oben sitzen. Hier unterer Rand
weg -> Inhalt sitzt vertikal mittig in der symmetrisch gepolsterten Section. */
.section--tight .smd-stats { margin-block: var(--space-3) 0; }
/* Schnuppern-Sektion (Über uns, Shortcode [smd_schnuppern], Markup in
template-parts/schnuppern.php): bewusster Nachwuchs-Block als Abschluss der
Seite, direkt vor dem CTA. Ein Band über die volle Fensterbreite: Der
Hintergrund wird per border-image nach links und rechts bis an die
Fensterränder verlängert. Das zählt nur als gemalte Fläche, nicht als
scrollbarer Inhalt, also kein seitliches Scrollen. Der Inhalt bleibt im Raster
der Seite. Rechts ein echter Screenshot der Challenge im schlichten
Tablet-Rahmen, der oben aus dem Band ragt; auf dem Handy steht er über dem
Text. Keine eigenen Animationen (Einblenden macht theme.js, hier ohne
Verschieben, siehe Regeln am Ende dieses Abschnitts). Als letzter Block
im Inhalt schliesst das Band ohne Abstand und ohne Linie direkt an den CTA an
(Regeln am Ende dieses Abschnitts). */
.entry-content--flow > .smd-schnuppern { max-width: none; }
.smd-schnuppern {
--sn-band: var(--bg-raise);
--sn-rahmen: #050506;
--sn-kante: rgba(255, 255, 255, 0.16);
--sn-polster: clamp(2.5rem, 6vw, 5rem); /* Innenabstand des Bands oben und unten */
--sn-ueberstand: clamp(1.75rem, 4.5vw, 4.5rem); /* so weit ragt das Tablet oben aus dem Band */
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"geraet"
"text";
row-gap: var(--space-4);
/* Oben: Abstand nach «Zertifikate» plus der Überstand des Tablets */
margin: calc(var(--space-5) + var(--sn-ueberstand)) 0 0;
padding-block: var(--sn-polster);
border-image: conic-gradient(var(--sn-band) 0 0) fill 0//0 100vw;
}
/* Light: warmes Band, Tablet bleibt ein dunkles Gerät */
html[data-mode="light"] .smd-schnuppern {
--sn-band: var(--bg-soft);
--sn-rahmen: #161615;
--sn-kante: rgba(19, 19, 18, 0.5);
}
/* Tablet: ragt um --sn-ueberstand über die Oberkante des Bands */
.smd-schnuppern__geraet {
grid-area: geraet;
margin: calc(-1 * (var(--sn-polster) + var(--sn-ueberstand))) 0 0;
}
/* Rahmen: Das Bild trägt ihn selbst (Padding + Hintergrund), der Browser rundet
den Bildschirm konzentrisch. Rand 1.8 % der Breite, Rundung 4.4 % der Breite,
senkrecht auf das Bildformat 1280 x 819 umgerechnet. Doppelte Klasse schlägt
.entry-content img (Rundung var(--radius)). */
.smd-schnuppern .smd-schnuppern__bild {
width: 100%;
height: auto;
padding: 1.8%;
border-radius: 4.4% / 6.74%;
background: var(--sn-rahmen);
box-shadow: 0 0 0 1px var(--sn-kante);
}
.smd-schnuppern__text { grid-area: text; }
/* Überschrift wie alle h2 der Seite, nur ohne oberen Abstand. Doppelte Klasse,
weil .entry-content h2 sonst den oberen Abstand zurückholt. */
.smd-schnuppern .smd-schnuppern__titel { margin: 0 0 var(--space-2); }
.smd-schnuppern__satz {
max-width: 34rem;
margin: 0;
text-wrap: pretty;
}
.smd-schnuppern__aktion { margin: var(--space-3) 0 0; }
/* Nur ausserhalb der deutschen Fassung: das Spiel gibt es nur auf Deutsch */
.smd-schnuppern__hinweis {
margin: var(--space-2) 0 0;
font-size: 0.88rem;
line-height: 1.5;
color: var(--ink-soft);
}
/* Die drei Fakten als eine kompakte Zeile. Der Trennpunkt sitzt jeweils VOR
einem Fakt in dessen linkem Innenabstand; die Liste ist um diese Breite nach
links verschoben und dort per clip-path abgeschnitten. Beginnt ein Fakt eine
neue Zeile, fällt sein Punkt in den abgeschnittenen Rand. So steht bei jeder
Breite nie ein Punkt am Anfang oder am Ende einer Zeile. Der Schnitt liegt
0.25rem vor dem Text, damit die Kantenglättung des ersten Buchstabens bleibt. */
.smd-schnuppern__fakten {
--sn-trenner: 1.3rem;
display: flex;
flex-wrap: wrap;
row-gap: 0.15rem;
margin: var(--space-3) 0 0 calc(-1 * var(--sn-trenner));
padding: 0;
list-style: none;
clip-path: inset(0 0 0 calc(var(--sn-trenner) - 0.25rem));
font-size: 0.88rem;
line-height: 1.5;
color: var(--ink-soft);
}
.smd-schnuppern__fakten > li {
position: relative;
margin: 0;
padding-left: var(--sn-trenner);
}
/* Zweite content-Zeile mit leerem Alternativtext: Screenreader lesen den Punkt
nicht mit. Browser ohne diese Schreibweise nehmen die erste Zeile. */
.smd-schnuppern__fakten > li::before {
content: "\00B7";
content: "\00B7" / "";
position: absolute;
left: 0;
width: var(--sn-trenner);
text-align: center;
color: var(--ink-faint);
}
/* Dezenter Textlink: Unterstreichung kommt vom Link-Muster der Seite */
.smd-schnuppern__eltern {
margin: var(--space-1) 0 0;
font-size: 0.88rem;
}
.smd-schnuppern__eltern a { color: var(--ink-soft); }
.smd-schnuppern__eltern a:hover { color: var(--accent); }
/* Ab Laptop-Breite: Text links, grösseres Tablet rechts, oben aus dem Band.
Das Tablet wächst nach rechts über das Inhaltsraster hinaus ins Band, bis
höchstens 7.5rem und immer mindestens 1rem vor dem Fensterrand
((100cqw - 100vw) / 2 = Abstand vom Inhalt zum Fensterrand, negativ). So
entsteht nie seitliches Scrollen. */
@media (min-width: 62rem) {
.smd-schnuppern {
container-type: inline-size;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
grid-template-areas: "text geraet";
column-gap: clamp(2.5rem, 5vw, 5rem);
align-items: center;
}
.smd-schnuppern__geraet {
align-self: start;
margin-right: max(-7.5rem, calc((100cqw - 100vw) / 2 + 1rem));
}
}
/* Als letzter Block der Seite schliesst das Band direkt an den CTA an: kein
Seitenabstand unter dem Inhalt und keine Trennlinie über dem Footer. Greift
nur, wenn das Band wirklich der letzte Block ist; andere Seiten unberührt. */
.entry-content:has(> .smd-schnuppern:last-child) { padding-bottom: 0; }
body:has(.entry-content > .smd-schnuppern:last-child) .site-footer { border-top: 0; }
/* Einblenden nur über die Deckkraft (wie .hero__facts): theme.js schiebt Blöcke
beim Erscheinen 26 px hoch, die Unterkante des Bands ragte dabei kurz in den
CTA. */
html.js .smd-schnuppern.reveal,
html.js .smd-schnuppern.reveal.is-in { transform: none; }
/* CTA-Sektion am Seitenende der Unterseiten */
.page-cta { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
/* Sektionsnummern: einmaliges, subtiles Gradient-Aufglühen, sobald die
Zahl in den Viewport scrollt (JS setzt .is-passed, einmal pro Laden).
::after liegt deckungsgleich über der Outline-Zahl. */
.section-head[data-index]::after {
content: attr(data-index);
position: absolute;
top: -0.55em;
right: 0;
font-family: var(--font-display);
font-size: clamp(5rem, 12vw, 10rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: 0;
pointer-events: none;
z-index: -1;
}
html.js .section-head.is-passed[data-index]::after {
animation: index-glow 1.6s var(--ease-out) 1;
}
@keyframes index-glow {
0% { opacity: 0; }
35% { opacity: 0.85; filter: drop-shadow(0 0 18px rgba(255, 68, 56, 0.55)); }
100% { opacity: 0; filter: drop-shadow(0 0 0 rgba(255, 68, 56, 0)); }
}
@media (prefers-reduced-motion: reduce) {
html.js .section-head.is-passed[data-index]::after { animation: none; }
}
/* --------------------------------------------------------------------------
24. Leistungsseiten: zweispaltiger Hero mit Signature-Element,
Card-Grid, Ablauf-Strip, FAQ-Accordion
-------------------------------------------------------------------------- */
.page-header--leistung { padding-bottom: clamp(2.5rem, 6vh, 4.5rem); }
/* Leistungs-Typografie: bewusst kontrastreiche Groessenspruenge. Sehr
grosser Titel, deutlich abgesetzter Lead, grosse Kennzahlen. */
.page-header--leistung h1 {
/* Oberer clamp-Wert von 6rem -> 4.5rem reduziert, damit auch laengere
Titel (z. B. KI-Workshops) auf Desktop einzeilig bleiben. Mobile (3rem)
und Skalierung (7vw) unveraendert. */
font-size: clamp(3rem, 7vw, 4.5rem);
line-height: 0.98;
max-width: 16ch;
}
.page-header--leistung .page-header__lead {
font-size: clamp(1.3rem, 2.5vw, 1.9rem);
line-height: 1.4;
color: var(--ink);
max-width: 32ch;
}
.page-header__grid {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 64rem) {
.page-header__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.page-header__aside { min-width: 0; }
/* Card-Grid "Das bekommst du": 2x2 ab Tablet. Gleiche Kartenhoehe kommt jetzt
zentral von der .card-Komponente (height: 100%); hier nur noch der
Leistungs-spezifische Mindest-Boden + Typo. */
.leistung-grid .card {
min-height: 14rem;
}
/* Sektion "Das baue ich fuer dich": optisch vom Nutzen-Block ("Das bekommst du")
abgesetzt durch dezente Trennlinie + eigener Abstand; Icons im Orange-Akzent
(Card-Icons nutzen stroke: currentColor). */
.leistung-baue {
border-top: 1px solid var(--line);
}
/* Abstand baue -> Folge-Section: die globale .section-Polsterung (unten + oben)
addiert sich hier zu ~17rem. Gezielt nur fuer die baue-Section und die direkt
folgende auf ein stimmiges Mass reduziert; globale .section bleibt unberuehrt. */
.leistung-baue { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.leistung-baue + .section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.leistung-grid--baue .card__icon { color: var(--accent); }
/* Alle vier Baue-Cards EXAKT gleich hoch: gleiche Grid-Reihenhoehen via
grid-auto-rows: 1fr (kein min-height-Hack); .card hat height:100% -> fuellt
die Zelle restlos. Auf Mobile (eine Spalte) ist jede Card ohnehin gleich
aufgebaut. Premium-Hover identisch auf allen vier: Anheben (.card:hover) +
feine Border im Orange-Akzent. */
.leistung-grid--baue { grid-auto-rows: 1fr; }
.leistung-grid--baue .card:hover { border-color: var(--accent); }
.leistung-grid .card h3 { font-size: 1.2rem; }
.leistung-grid .card p { font-size: 1.05rem; line-height: 1.6; }
/* Aufzaehlung in einer Leistungs-Karte: gleicher Textstil wie die Card-Absaetze,
orange Marker (Theme-Akzent). */
.card__list {
margin: 0;
padding-left: 1.2rem;
font-size: 1.05rem;
line-height: 1.55;
}
.card__list li { margin-block: 0.35rem; }
.card__list li::marker { color: var(--accent); }
/* Typische Situationen: Praxisbeispiele mit Gradient-Balken links */
.leistung-situationen {
display: grid;
gap: var(--space-2);
grid-template-columns: 1fr;
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 48rem) {
.leistung-situationen { grid-template-columns: repeat(2, 1fr); }
}
.leistung-situationen li {
position: relative;
padding: 1.2rem 1.4rem 1.2rem 1.9rem;
background: var(--glass-bg);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
font-size: 1.08rem;
line-height: 1.5;
color: var(--ink-soft);
}
.leistung-situationen li::before {
content: "";
position: absolute;
left: 0;
/* Strich an die volle Kartenhöhe gebunden (li ist position:relative):
top/bottom 0 statt fester Einrückung -> oben und unten bündig, gleich
hoch bei jeder Karte unabhängig von der Textmenge. */
top: 0;
bottom: 0;
width: 3px;
border-radius: var(--radius) 0 0 var(--radius);
background: var(--accent-grad);
}
/* Ablauf-Strip: 3 Schritte mit Outline-Zahlen, verbunden durch eine
Fortschrittslinie, an der entlang ein oranger Glow von 01 nach 03 wandert.
Die Linien-Geometrie (Start, Länge, Höhe der Zahlen) wird per JS gemessen
und über Custom Properties gesetzt; CSS rendert nur. */
.ablauf-strip {
position: relative;
display: grid;
gap: var(--space-3);
grid-template-columns: 1fr;
list-style: none;
margin: 0;
padding: 0;
counter-reset: none;
--ablauf-progress: 0;
}
@media (min-width: 48rem) {
.ablauf-strip { grid-template-columns: repeat(3, 1fr); }
}
/* Zweite Dreierreihe (Config-Schluessel ablauf_2, z.B. Webdesign): Abstand
zwischen den Reihen exakt wie der Grid-gap innerhalb einer Reihe. Jede Reihe
ist ein eigenes , die Linien-Vermessung in theme.js laeuft pro Strip. */
.ablauf-strip + .ablauf-strip {
margin-top: var(--space-3);
}
/* Verbindungslinie (::before = Grundlinie, ::after = wandernder Glow).
Default = horizontal (Desktop). Geometrie aus den per JS gesetzten Vars. */
.ablauf-strip::before,
.ablauf-strip::after {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
left: var(--ablauf-line-start, 0);
top: calc(var(--ablauf-line-top, 2rem) - 1px);
height: 2px;
border-radius: 2px;
}
/* Graue Grundschiene ausblenden: nur die orange Linie (::after) + wandernder Glow sollen
sichtbar sein. display:none entfernt sie in BEIDEN Modi (vertikal erbt es, kein
display-Override); die orange ::after-Linie/Maske bleibt unberuehrt. */
.ablauf-strip::before {
display: none;
}
.ablauf-strip::after {
width: calc(var(--ablauf-line-length, 100%) * var(--ablauf-progress, 0));
background: linear-gradient(90deg, rgba(255, 68, 56, 0) 0%, var(--accent) 55%, var(--accent-2) 100%);
box-shadow: 0 0 10px 1px rgba(255, 68, 56, 0.55), 0 0 22px 2px rgba(255, 122, 41, 0.3);
transition: width 0.25s linear, height 0.25s linear;
/* Weg B: die Linie wird an den Ziffer-Positionen weich UNTERBROCHEN (Maske vom JS in
measure() berechnet) statt mit einem Block verdeckt -> Linie nur in den Luecken
zwischen den Zahlen sichtbar, KEIN Block der als Rechteck durchscheinen koennte. Im
Vertikal-Modus (Mobile) setzt das JS die Maske auf none -> dort unveraendert. */
-webkit-mask-image: var(--ablauf-line-mask, none);
mask-image: var(--ablauf-line-mask, none);
}
/* Vertikale Variante (Mobile): JS setzt .is-vertical, Linie läuft als
Schiene links neben den eingerückten Inhalten von oben nach unten. */
.ablauf-strip.is-vertical::before,
.ablauf-strip.is-vertical::after {
left: 0.6rem;
top: var(--ablauf-line-start, 0);
width: 2px;
height: var(--ablauf-line-length, 100%);
}
.ablauf-strip.is-vertical::after {
height: calc(var(--ablauf-line-length, 100%) * var(--ablauf-progress, 0));
background: linear-gradient(180deg, rgba(255, 68, 56, 0) 0%, var(--accent) 55%, var(--accent-2) 100%);
}
.ablauf-strip.is-vertical li {
padding-left: 2.2rem;
}
.ablauf-strip li {
position: relative;
z-index: 1;
padding-top: 0.6rem;
}
.ablauf-strip__num {
position: relative;
display: inline-block;
font-family: var(--font-display);
font-size: clamp(3rem, 6vw, 4.5rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
/* Einzel-Layer: solide, dezent gefuellte Zahl (inaktiv). Kein Hohlraum, kein
Hintergrund-Block (--bg-soft), kein zweiter ::after-Layer, kein text-stroke ->
keine harten Kanten, kein dunkles Viereck; auf jeder Breite + beiden Modi sauber. */
color: var(--ink-faint);
margin-bottom: 0.1rem;
transition: color 0.4s var(--ease-out), text-shadow 0.4s var(--ease-out);
}
/* Aktiv: sobald der wandernde Glow die Zahl erreicht (.is-lit), faerbt sie sich mit
dem Orange-Gradient und gluht auf - alles auf EINEM Layer (kein ::after). */
html.js .ablauf-strip li.is-lit .ablauf-strip__num {
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* Glow per text-shadow (glyphenbasiert) statt filter:drop-shadow: Letzteres rendert
auf mobile WebKit zusammen mit background-clip:text als helles Rechteck (Box statt
Glyphen). text-shadow folgt den Ziffern -> gleicher Glow, kein Kasten, Desktop+Mobile. */
text-shadow: 0 0 14px rgba(255, 68, 56, 0.55), 0 0 30px rgba(255, 122, 41, 0.3);
}
/* Dritter Zustand "vorbei": der Glow ist durch (erledigt) -> dezent ausgegraut, deutlich
zurueckhaltender als der Noch-nicht-Zustand (--ink-faint), in Richtung der dezenten
section-head-Nummer (--line-strong). Faellt per Basis-transition (color) sanft zurueck. */
html.js .ablauf-strip li.is-past .ablauf-strip__num {
color: var(--line-strong);
}
.ablauf-strip strong {
display: block;
font-family: var(--font-display);
font-size: 1.15rem;
margin-bottom: 0.35rem;
}
.ablauf-strip p {
color: var(--ink-soft);
font-size: 0.98rem;
margin: 0;
}
/* Reduced Motion: statische Grundlinie, kein wandernder Glow, kein Fade,
alle Schritte sofort sichtbar (JS überspringt Progress + is-lit). */
@media (prefers-reduced-motion: reduce) {
.ablauf-strip::after { display: none; }
.ablauf-strip__num { transition: none; }
}
/* FAQ-Accordion: details/summary mit Gradient-Indikator beim Öffnen */
.smd-faq {
max-width: var(--measure);
display: grid;
gap: var(--space-2);
}
.smd-faq details {
position: relative;
background: var(--glass-bg);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
overflow: clip;
}
.smd-faq details::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent-grad);
opacity: 0;
transition: opacity 0.3s ease;
}
.smd-faq details[open]::before { opacity: 1; }
.smd-faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: 1.1rem 1.4rem;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.05rem;
}
.smd-faq summary::-webkit-details-marker { display: none; }
.smd-faq summary::after {
content: "+";
flex: 0 0 auto;
font-size: 1.4rem;
line-height: 1;
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transition: transform 0.3s var(--ease-out);
}
.smd-faq details[open] summary::after { transform: rotate(45deg); }
.smd-faq__antwort {
padding: 0 1.4rem 1.2rem;
color: var(--ink-soft);
}
.smd-faq__antwort p { margin: 0; }
/* --------------------------------------------------------------------------
25. Signature-Elemente: interaktive Karten im Terminal-Stil, eine pro
Leistung. Animation startet beim Scroll-Eintritt (JS setzt .is-on auf
[data-sig], genau einmal), Reduced Motion zeigt den Endzustand.
-------------------------------------------------------------------------- */
.sig-card {
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
overflow: hidden;
font-family: var(--font-mono);
}
.sig-card__bar {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--line);
background: var(--bg-raise);
}
.sig-card__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--line-strong);
}
.sig-card__dot:nth-child(1) { background: #ff5f57; }
.sig-card__dot:nth-child(2) { background: #febc2e; }
.sig-card__dot:nth-child(3) { background: #28c840; }
.sig-card__title,
.sig-card__url {
margin-left: 0.5rem;
font-size: 0.78rem;
color: var(--ink-faint);
letter-spacing: 0.04em;
}
.sig-card__url {
flex: 1;
text-align: center;
background: var(--glass-bg);
border: 1px solid var(--line);
border-radius: 99px;
padding: 0.15rem 0.8rem;
margin-right: 2rem;
}
.sig-card__body { padding: clamp(1rem, 2vw, 1.5rem); }
/* Gemeinsame Choreografie: Bausteine blenden gestaffelt ein */
.sig-card [data-sig-step] { opacity: 0; transform: translateY(8px); }
html.js .sig-card.is-on [data-sig-step],
html:not(.js) .sig-card [data-sig-step] {
opacity: 1;
transform: none;
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
/* --- Google Ads: Mini-Dashboard --- */
.sig-ads__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 1rem;
}
.sig-ads__stat {
background: var(--glass-bg);
border: 1px solid var(--line);
border-radius: var(--radius-s);
padding: 0.6rem 0.75rem;
}
.sig-ads__stat strong {
display: block;
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.6vw, 1.35rem);
font-weight: 700;
font-variant-numeric: tabular-nums;
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.sig-ads__stat span { font-size: 0.68rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.sig-ads__chart { width: 100%; height: 56px; margin-bottom: 1rem; display: block; }
.sig-ads__line {
fill: none;
stroke: url(#smd-line-grad), var(--accent);
stroke: var(--accent);
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
filter: drop-shadow(0 0 6px rgba(255, 68, 56, 0.6));
}
html.js .sig-ads.is-on .sig-ads__line,
html:not(.js) .sig-ads__line {
transition: stroke-dashoffset 1.6s var(--ease-out) 0.3s;
stroke-dashoffset: 0;
}
.sig-ads__serp { display: grid; gap: 0.55rem; }
.sig-ads__search {
height: 1.9rem;
border: 1px solid var(--line-strong);
border-radius: 99px;
position: relative;
}
.sig-ads__search span {
position: absolute;
left: 0.9rem;
top: 50%;
transform: translateY(-50%);
width: 38%;
height: 6px;
border-radius: 3px;
background: var(--line-strong);
}
.sig-ads__result {
border: 1px solid var(--line);
border-radius: var(--radius-s);
padding: 0.55rem 0.75rem;
display: grid;
gap: 0.35rem;
}
.sig-ads__result strong { display: block; height: 8px; width: 62%; border-radius: 4px; background: var(--line-strong); }
.sig-ads__result span { display: block; height: 6px; width: 84%; border-radius: 3px; background: var(--line); }
.sig-ads__result--ad {
position: relative;
border-color: rgba(255, 68, 56, 0.55);
background: rgba(255, 68, 56, 0.07);
opacity: 0;
transform: translateY(-6px);
}
html.js .sig-ads.is-on .sig-ads__result--ad,
html:not(.js) .sig-ads__result--ad {
transition: opacity 0.5s var(--ease-out) 1.5s, transform 0.5s var(--ease-out) 1.5s;
opacity: 1;
transform: none;
}
.sig-ads__result--ad em {
position: absolute;
top: 0.45rem;
right: 0.6rem;
font-style: normal;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.08em;
padding: 0.1rem 0.4rem;
border-radius: 3px;
color: #fff;
background: var(--accent-grad);
}
.sig-ads__result--ad strong { background: rgba(255, 122, 41, 0.6); }
.sig-ads__result--ad span { background: rgba(255, 122, 41, 0.3); }
/* --- Webdesign: lebendes Browser-Mockup (Aufbau-Fade + Dauer-Loops) --- */
/* Body = Bühne für Shimmer/Glow; clippt den wandernden Lichtstreifen. */
.sig-browser .sig-card__body {
position: relative;
overflow: hidden;
}
.sig-browser__hero {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
margin-bottom: 1.1rem;
}
/* Weicher Akzent-Glow hinter Hero/CTA (pulsiert im Loop). */
.sig-browser__hero::before {
content: "";
position: absolute;
left: -8%;
top: -25%;
width: 65%;
height: 170%;
z-index: 0;
pointer-events: none;
background: radial-gradient(closest-side, rgba(255, 68, 56, 0.22), transparent 72%);
filter: blur(6px);
opacity: 0.4;
}
.sig-browser__line,
.sig-browser__cta { position: relative; z-index: 1; }
.sig-browser__line {
display: block;
height: 0.7rem;
border-radius: 4px;
background: var(--line-strong);
opacity: 0;
}
.sig-browser__line--1 { width: 62%; }
.sig-browser__line--2 { width: 42%; }
.sig-browser__cta {
margin-top: 0.45rem;
padding: 0.5rem 0.95rem;
border-radius: 8px;
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
background: var(--accent-grad);
box-shadow: 0 6px 18px rgba(255, 68, 56, 0.28);
opacity: 0;
}
.sig-browser__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.7rem;
}
.sig-browser__card {
height: 3.2rem;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--bg-raise);
opacity: 0;
}
/* Wandernder Shimmer-Streifen (diagonal, über alle Elemente). */
.sig-browser__shimmer {
position: absolute;
top: 0;
bottom: 0;
left: -45%;
width: 45%;
z-index: 2;
pointer-events: none;
background: linear-gradient(100deg, transparent, rgba(255, 122, 41, 0.12) 45%, rgba(255, 255, 255, 0.08) 55%, transparent);
transform: skewX(-12deg);
opacity: 0;
}
/* Einstieg: Bausteine blenden gestaffelt ein (einmal, .is-on / no-JS). */
html.js .sig-browser.is-on .sig-browser__line,
html.js .sig-browser.is-on .sig-browser__cta,
html.js .sig-browser.is-on .sig-browser__card,
html:not(.js) .sig-browser__line,
html:not(.js) .sig-browser__cta,
html:not(.js) .sig-browser__card {
opacity: 1;
transition: opacity 0.55s var(--ease-out);
}
html.js .sig-browser.is-on .sig-browser__line--1 { transition-delay: 0.1s; }
html.js .sig-browser.is-on .sig-browser__line--2 { transition-delay: 0.22s; }
html.js .sig-browser.is-on .sig-browser__cta { transition-delay: 0.4s; }
html.js .sig-browser.is-on .sig-browser__card:nth-child(1) { transition-delay: 0.6s; }
html.js .sig-browser.is-on .sig-browser__card:nth-child(2) { transition-delay: 0.72s; }
html.js .sig-browser.is-on .sig-browser__card:nth-child(3) { transition-delay: 0.84s; }
/* Dauer-Loops: starten nach dem Aufbau, laufen endlos und ruhig. */
html.js .sig-browser.is-on .sig-browser__cta {
animation: sig-cta-pulse 2.4s ease-in-out 1s infinite;
}
html.js .sig-browser.is-on .sig-browser__hero::before {
animation: sig-glow 4s ease-in-out 1s infinite;
}
html.js .sig-browser.is-on .sig-browser__shimmer {
opacity: 1;
animation: sig-shimmer 5s ease-in-out 1.3s infinite;
}
html.js .sig-browser.is-on .sig-browser__card {
animation: sig-card-lift 3.6s ease-in-out infinite;
}
html.js .sig-browser.is-on .sig-browser__card:nth-child(1) { animation-delay: 1.2s; }
html.js .sig-browser.is-on .sig-browser__card:nth-child(2) { animation-delay: 1.7s; }
html.js .sig-browser.is-on .sig-browser__card:nth-child(3) { animation-delay: 2.2s; }
@keyframes sig-cta-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(255, 68, 56, 0.28); }
50% { transform: scale(1.045); box-shadow: 0 9px 26px rgba(255, 68, 56, 0.5), 0 0 0 4px rgba(255, 68, 56, 0.08); }
}
@keyframes sig-glow {
0%, 100% { opacity: 0.35; }
50% { opacity: 0.7; }
}
@keyframes sig-shimmer {
0% { transform: translateX(0) skewX(-12deg); }
100% { transform: translateX(360%) skewX(-12deg); }
}
@keyframes sig-card-lift {
0%, 100% { transform: translateY(0); border-color: var(--line); }
50% { transform: translateY(-5px); border-color: rgba(255, 122, 41, 0.35); }
}
/* Reduced Motion: keine Loops, Mockup steht statisch im Endzustand. */
@media (prefers-reduced-motion: reduce) {
.sig-browser__cta,
.sig-browser__card,
.sig-browser__shimmer,
.sig-browser__hero::before { animation: none !important; }
.sig-browser__line,
.sig-browser__cta,
.sig-browser__card { transition: none !important; }
.sig-browser__shimmer { opacity: 0; }
.sig-browser__hero::before { opacity: 0.4; }
}
/* --- Hosting: Status-Panel --- */
.sig-status__row {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.65rem 0;
border-bottom: 1px solid var(--line);
font-size: 0.9rem;
}
.sig-status__row strong { font-family: var(--font-display); letter-spacing: 0.01em; }
.sig-status__label {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-faint);
flex: 1;
}
.sig-status__pulse {
width: 11px;
height: 11px;
border-radius: 50%;
background: #28c840;
box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.5);
}
html.js .sig-status.is-on .sig-status__pulse {
animation: sig-pulse 2s ease-out infinite;
}
@keyframes sig-pulse {
0% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.5); }
70% { box-shadow: 0 0 0 9px rgba(40, 200, 64, 0); }
100% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0); }
}
.sig-status__uptime {
font-family: var(--font-display);
font-size: 1.3rem;
font-variant-numeric: tabular-nums;
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.sig-status__backups { padding-top: 0.8rem; }
.sig-status__nights {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.45rem;
margin-top: 0.6rem;
}
.sig-status__nights i {
position: relative;
height: 2.2rem;
border-radius: 4px;
background: var(--glass-bg);
border: 1px solid var(--line);
overflow: hidden;
}
.sig-status__nights i::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 0%;
background: var(--accent-grad);
opacity: 0.85;
transition: height 0.45s var(--ease-out);
}
html.js .sig-status.is-on .sig-status__nights i::after,
html:not(.js) .sig-status__nights i::after { height: 100%; }
html.js .sig-status.is-on .sig-status__nights i:nth-child(1)::after { transition-delay: 0.3s; }
html.js .sig-status.is-on .sig-status__nights i:nth-child(2)::after { transition-delay: 0.55s; }
html.js .sig-status.is-on .sig-status__nights i:nth-child(3)::after { transition-delay: 0.8s; }
html.js .sig-status.is-on .sig-status__nights i:nth-child(4)::after { transition-delay: 1.05s; }
html.js .sig-status.is-on .sig-status__nights i:nth-child(5)::after { transition-delay: 1.3s; }
html.js .sig-status.is-on .sig-status__nights i:nth-child(6)::after { transition-delay: 1.55s; }
html.js .sig-status.is-on .sig-status__nights i:nth-child(7)::after { transition-delay: 1.8s; }
/* --- IT-Support: Chat tippt sich selbst --- */
.sig-chat__msg {
max-width: 85%;
padding: 0.6rem 0.85rem;
border-radius: var(--radius);
font-size: 0.88rem;
line-height: 1.45;
margin-bottom: 0.6rem;
font-family: var(--font-sans);
opacity: 0;
transform: translateY(8px);
}
html.js .sig-chat.is-on .sig-chat__msg,
html:not(.js) .sig-chat__msg {
opacity: 1;
transform: none;
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.sig-chat__msg--in {
background: var(--glass-bg);
border: 1px solid var(--line);
border-bottom-left-radius: 4px;
}
.sig-chat__msg--out {
margin-left: auto;
background: linear-gradient(135deg, rgba(255, 68, 56, 0.22), rgba(255, 122, 41, 0.14));
border: 1px solid rgba(255, 122, 41, 0.35);
border-bottom-right-radius: 4px;
}
html.js .sig-chat.is-on .sig-chat__msg--in { transition-delay: 0.15s; }
html.js .sig-chat.is-on .sig-chat__msg--typing { transition-delay: 0.7s; }
html.js .sig-chat.is-on .sig-chat__msg--out:nth-of-type(3) { transition-delay: 1.5s; }
html.js .sig-chat.is-on .sig-chat__msg--out:nth-of-type(4) { transition-delay: 2.3s; }
/* Tipp-Indikator: erscheint und verschwindet wieder */
.sig-chat__msg--typing {
display: inline-flex;
gap: 0.3rem;
align-items: center;
background: var(--glass-bg);
border: 1px solid var(--line);
border-bottom-left-radius: 4px;
}
html.js .sig-chat.is-on .sig-chat__msg--typing {
animation: sig-typing-out 0.3s ease 1.5s forwards;
}
@keyframes sig-typing-out {
to { opacity: 0; height: 0; padding-block: 0; margin-bottom: 0; border-width: 0; }
}
.sig-chat__msg--typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ink-faint);
}
html.js .sig-chat.is-on .sig-chat__msg--typing span { animation: sig-dot 1s ease-in-out infinite; }
.sig-chat__msg--typing span:nth-child(2) { animation-delay: 0.15s !important; }
.sig-chat__msg--typing span:nth-child(3) { animation-delay: 0.3s !important; }
@keyframes sig-dot {
0%, 100% { transform: translateY(0); opacity: 0.5; }
50% { transform: translateY(-3px); opacity: 1; }
}
.sig-chat__done {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.82rem;
letter-spacing: 0.03em;
color: #28c840;
opacity: 0;
}
html.js .sig-chat.is-on .sig-chat__done,
html:not(.js) .sig-chat__done {
opacity: 1;
transition: opacity 0.5s ease 3s;
}
/* --- Grafikdesign: Brand-Sheet --- */
.sig-brand__mark {
width: 4rem;
height: 4rem;
border-radius: var(--radius);
background: var(--accent-grad);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
opacity: 0;
transform: scale(0.8);
}
html.js .sig-brand.is-on .sig-brand__mark,
html:not(.js) .sig-brand__mark {
opacity: 1;
transform: none;
transition: opacity 0.5s var(--ease-out) 0.1s, transform 0.5s var(--ease-out) 0.1s;
}
.sig-brand__mark span {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 700;
color: #fff;
}
.sig-brand__type { margin-bottom: 1rem; opacity: 0; }
html.js .sig-brand.is-on .sig-brand__type,
html:not(.js) .sig-brand__type {
opacity: 1;
transition: opacity 0.5s ease 0.5s;
}
.sig-brand__type strong { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.sig-brand__type span { font-size: 0.85rem; color: var(--ink-faint); }
.sig-brand__swatches { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.sig-brand__swatches i {
width: 2rem;
height: 2rem;
border-radius: 6px;
border: 1px solid var(--line);
transform: scale(0);
}
html.js .sig-brand.is-on .sig-brand__swatches i,
html:not(.js) .sig-brand__swatches i {
transform: none;
transition: transform 0.4s var(--ease-out);
}
html.js .sig-brand.is-on .sig-brand__swatches i:nth-child(1) { transition-delay: 0.7s; }
html.js .sig-brand.is-on .sig-brand__swatches i:nth-child(2) { transition-delay: 0.8s; }
html.js .sig-brand.is-on .sig-brand__swatches i:nth-child(3) { transition-delay: 0.9s; }
html.js .sig-brand.is-on .sig-brand__swatches i:nth-child(4) { transition-delay: 1s; }
html.js .sig-brand.is-on .sig-brand__swatches i:nth-child(5) { transition-delay: 1.1s; }
.sig-brand__swatches i:nth-child(1) { background: #ff4438; }
.sig-brand__swatches i:nth-child(2) { background: #ff7a29; }
.sig-brand__swatches i:nth-child(3) { background: #f4f4f1; }
.sig-brand__swatches i:nth-child(4) { background: #82827d; }
.sig-brand__swatches i:nth-child(5) { background: #17171b; }
.sig-brand__rows { display: grid; gap: 0.5rem; }
.sig-brand__rows b {
display: block;
height: 7px;
border-radius: 4px;
background: var(--line);
width: 0;
}
html.js .sig-brand.is-on .sig-brand__rows b,
html:not(.js) .sig-brand__rows b { width: 100%; transition: width 0.7s var(--ease-out) 1.2s; }
html.js .sig-brand.is-on .sig-brand__rows b:nth-child(2) { width: 70%; transition-delay: 1.35s; }
html:not(.js) .sig-brand__rows b:nth-child(2) { width: 70%; }
@media (prefers-reduced-motion: reduce) {
.sig-card [data-sig-step],
.sig-ads__result--ad,
.sig-browser__line,
.sig-browser__cta,
.sig-browser__card,
.sig-chat__msg,
.sig-chat__done,
.sig-brand__mark,
.sig-brand__type {
opacity: 1 !important;
transform: none !important;
}
.sig-ads__line { stroke-dashoffset: 0 !important; }
.sig-status__nights i::after { height: 100% !important; }
.sig-brand__swatches i { transform: none !important; }
.sig-brand__rows b { width: 100% !important; }
.sig-status__pulse, .sig-chat__msg--typing { animation: none !important; }
}
/* --------------------------------------------------------------------------
26. Kontaktseite: lazy geladene Google Map (Dark-Filter), Fussnote
-------------------------------------------------------------------------- */
.smd-map {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-soft);
border: 1px solid var(--line);
box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
margin-block: var(--space-3);
}
.smd-map__hinweis {
color: var(--ink-faint);
font-size: 0.9rem;
margin: 0;
}
.smd-map__link { margin: 0; font-size: 0.9rem; }
.smd-map.is-loaded .smd-map__hinweis { display: none; }
.smd-map.is-loaded .smd-map__link {
position: absolute;
right: 0.75rem;
bottom: 0.75rem;
z-index: 1;
background: var(--bg-raise);
border: 1px solid var(--line);
border-radius: 99px;
padding: 0.3rem 0.9rem;
font-size: 0.8rem;
}
.smd-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Dunkler Kartenstil: Embed wird im Dark Mode per Filter eingefärbt
(kein API-Key nötig, Light Mode zeigt die Karte normal) */
html[data-mode="dark"] .smd-map iframe {
filter: invert(0.92) hue-rotate(180deg) saturate(0.4) brightness(0.95) contrast(0.92);
}
/* --------------------------------------------------------------------------
Öffnungszeiten-Block (Kontakt): Tag links / Zeit rechts, feine Trennlinien,
Heute-Zeile mit Akzentbalken + Gradient-Zeit, Live-Status-Punkt (JS).
-------------------------------------------------------------------------- */
.smd-hours {
max-width: 26rem;
margin: var(--space-1) 0 var(--space-2);
}
/* Status-Only-Variante (z. B. Footer unter den Oeffnungszeiten): nur der
Live-Status-Indikator, kompakt, ohne Zeilen. */
/* Footer-Status sitzt zwischen Oeffnungszeiten-Header und Tabelle. Abstand unten
= var(--space-2), exakt wie der Abstand Header -> Pill (h4 margin-bottom), damit
die Pill oben/unten gleich viel Luft hat. Variable -> Desktop + mobil konsistent. */
.smd-hours--status-only { margin: 0 0 var(--space-2); max-width: none; }
.smd-hours--status-only .smd-hours__status { margin: 0; }
/* Status als prominente Pill - gilt fuer JEDE .smd-hours__status (Footer UND
Kontaktseite, damit beide identisch aussehen). Die Box-Grundstile (Rahmen,
Rundung, Padding, Fallback-Tint, Punktgroesse) liegen in der allgemeinen
.smd-hours__status- bzw. .smd-hours__dot-Regel weiter unten; hier nur die
statusabhaengigen Tints (.is-open/.is-lunch/.is-closed vom JS), allgemein. */
.smd-hours__status.is-open {
background: rgba(61, 220, 132, 0.13);
border-color: rgba(61, 220, 132, 0.32);
}
.smd-hours__status.is-lunch {
background: rgba(232, 89, 12, 0.15);
border-color: rgba(232, 89, 12, 0.34);
}
.smd-hours__status.is-closed {
background: rgba(255, 82, 71, 0.13);
border-color: rgba(255, 82, 71, 0.32);
}
.smd-hours__status {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.85rem;
/* Pill-Grundstil - gilt im Footer UND auf der Kontaktseite: Box mit Rahmen,
Rundung, Padding, neutralem Fallback-Tint; die Tints je Status stehen oben. */
padding: 0.4rem 0.85rem;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(127, 127, 127, 0.12);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink);
}
/* Bis das JS den Status gesetzt hat, bleibt er versteckt (kein leerer Status
ohne JS); die explizite Regel schlaegt das inline-flex oben. */
.smd-hours__status[hidden] { display: none; }
.smd-hours__dot {
flex: 0 0 auto;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--ink-faint);
}
.smd-hours__status.is-open { color: var(--ink); }
.smd-hours__status.is-open .smd-hours__dot {
background: #3ddc84;
animation: smd-hours-pulse 2.4s ease-out infinite;
}
/* Geschlossen: klares Signalrot statt grau, in Helligkeit/Saettigung gleichwertig zum
gruenen Offen-Dot (#3ddc84). Greift an beiden Stellen (Kontakt-Aside + Footer). */
.smd-hours__status.is-closed .smd-hours__dot { background: #ff5247; }
/* Mittagspause (Ampel-Mitte): Brand-Orange, pulsiert wie gruen (temporaerer Zustand,
nicht hart zu) statt statisch wie rot. Eigene Keyframe wegen oranger Halo-Farbe. */
.smd-hours__status.is-lunch { color: var(--ink); }
.smd-hours__status.is-lunch .smd-hours__dot {
background: var(--accent-2);
animation: smd-hours-pulse-orange 2.4s ease-out infinite;
}
@keyframes smd-hours-pulse {
0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.45); }
70% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); }
100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}
@keyframes smd-hours-pulse-orange {
0% { box-shadow: 0 0 0 0 rgba(255, 122, 41, 0.45); }
70% { box-shadow: 0 0 0 7px rgba(255, 122, 41, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 122, 41, 0); }
}
.smd-hours__list {
list-style: none;
margin: 0;
padding: 0;
/* Einheitliche Komponenten-Groesse fuer Labels und Zeiten - gilt auf der
Kontaktseite UND im Footer, passend zur 0.95rem-Status-Pill. */
font-size: 0.95rem;
}
.smd-hours__row {
position: relative;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.25rem;
padding: 0.55rem 0 0.55rem 0.95rem;
border-bottom: 1px solid var(--line);
}
.smd-hours__row:last-child { border-bottom: 0; }
/* Neutraler Komponenten-Look (Kontaktseite UND Footer identisch): Tag dezent
in der Markenfarbe, Zeit in normaler Textfarbe. Der fruehere Heute-Akzent
(oranger Balken + Gradient-Zeit via .is-today) ist komplett entfernt - er
machte im Footer die ganze Zeile knallorange und wirkte wie ein Fehler. */
.smd-hours__day { font-weight: 600; color: var(--accent); white-space: nowrap; }
/* Keine tabular-nums: Gleichbreiten-Ziffern bringen bei rechtsbuendigen
Zeiten und nur einer Zahlenzeile nichts, machen die Zeile aber ~20px
breiter - genau die Breite, die der Mo-Fr-Zeit in der Footer-Spalte
fuer die Einzeiligkeit fehlte. */
.smd-hours__time {
color: var(--ink);
text-align: right;
}
/* Ein Zeitfenster bricht nie in sich um; schmale Kontexte (Footer-Spalte,
Mobile) brechen sauber ZWISCHEN den Fenstern. */
.smd-hours__win { white-space: nowrap; }
/* Kontaktseite: Oeffnungszeiten-Liste in dieselbe gerahmte Box wie die
Footer-Oeffnungszeiten (Commit 46d8531): Border/Radius/Surface, mode-aware.
Dezente Zeilen-Trennlinien kommen bereits aus .smd-hours__row (border-bottom,
letzte Zeile ohne). Scoped auf die Kontakt-Info-Spalte. */
.kontakt-grid__info .smd-hours__list {
background: var(--bg-raise);
border: 1px solid var(--line);
border-radius: 16px;
}
html[data-mode="light"] .kontakt-grid__info .smd-hours__list {
background: #fff;
border-color: var(--line-strong);
}
/* Innenabstand wie im Footer (0.6rem 0.95rem) -> Tag/Zeit kleben nicht am Rand.
Farben (Tag orange, Zeit weiss) kommen jetzt aus der Basis-Komponente;
die frueheren Neutralisierungs-Regeln fuer den Heute-Akzent sind mit dem
Akzent selbst entfallen. */
.kontakt-grid__info .smd-hours__row { padding: 0.6rem 0.95rem; }
@media (prefers-reduced-motion: reduce) {
.smd-hours__status.is-open .smd-hours__dot,
.smd-hours__status.is-lunch .smd-hours__dot { animation: none; }
}
.smd-fussnote {
margin-top: var(--space-3);
padding-top: var(--space-2);
border-top: 1px solid var(--line);
font-size: 0.85rem;
color: var(--ink-faint);
}
/* --------------------------------------------------------------------------
27. Preloader: SMD-Berg zeichnet sich, glüht im Gradient, Wipe nach oben.
Nur sichtbar mit html.preload (erster Besuch pro Session, setzt das
Inline-Head-Script; Reduced Motion überspringt komplett). Die gesamte
Timeline ist CSS-getrieben und endet hart nach 1.2s, unabhängig davon,
ob die Seite fertig geladen hat.
-------------------------------------------------------------------------- */
.smd-preloader { display: none; }
html.preload .smd-preloader {
display: flex;
position: fixed;
inset: 0;
z-index: 100010;
align-items: center;
justify-content: center;
background: var(--bg);
animation: pre-wipe 0.35s cubic-bezier(0.7, 0, 0.3, 1) 0.85s forwards;
pointer-events: none;
}
html.preload .smd-preloader svg {
width: clamp(76px, 11vw, 120px);
overflow: visible;
}
.smd-preloader path {
fill: none;
stroke: url(#smd-pre-grad);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
html.preload .smd-preloader path {
animation:
pre-draw 0.8s cubic-bezier(0.45, 0, 0.2, 1) forwards,
pre-glow 0.4s ease 0.7s;
}
@keyframes pre-draw {
to { stroke-dashoffset: 0; }
}
@keyframes pre-glow {
50% { filter: drop-shadow(0 0 16px rgba(255, 68, 56, 0.95)) drop-shadow(0 0 36px rgba(255, 122, 41, 0.5)); }
}
@keyframes pre-wipe {
to { transform: translateY(-101%); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
html.preload .smd-preloader { display: none; }
}
/* --------------------------------------------------------------------------
28. Referenz-Detailseite (single-projekt.php): Zickzack, Galerie,
Projektziel, Akkordeons, CTA, Lightbox
-------------------------------------------------------------------------- */
/* Zickzack: Text und Bild abwechselnd, mobil gestapelt (Bild zuerst) */
.projekt-zickzack {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
margin-block: clamp(2.5rem, 6vw, 4.5rem);
}
/* Einheitlicher Sektionsrhythmus: gleicher Abstand zwischen ALLEN Bloecken
(gleicher Token-Rhythmus wie auf der Ueber-uns-Seite, kein Mix aus
section--tight / nacktem wrap / eigenen Margins mehr). */
.projekt-block { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.zickzack-row {
display: grid;
gap: var(--space-3);
grid-template-columns: 1fr;
align-items: center;
}
.zickzack-row__media {
margin: 0;
justify-self: center;
width: 100%;
max-width: 34rem; /* Hochformat-Mockups bleiben gefasst und zentriert statt die
halbe Spaltenbreite zu fuellen -> ausgewogen, kein Leerraum-Loch. */
}
/* Zickzack-Bild: volle Proportion, nie beschnitten. Lightbox-Link als Block
(sonst inline -> Baseline-Gap unter dem Bild -> gefasste Figure unten hoeher
als das Bild, untere Rundung verschwindet). height:auto setzt das geerbte
.smd-frame img (height:100% + object-fit:cover) ausser Kraft -> Bild fuellt
die Figure voll aus, Rundung rundum. */
.zickzack-row__media a { display: block; }
.zickzack-row__media img { width: 100%; height: auto; display: block; }
.zickzack-row__text p {
font-size: clamp(1.05rem, 1.4vw, 1.15rem); /* EINE einheitliche Fliesstextgroesse */
line-height: 1.7;
color: var(--ink-soft);
margin: 0;
}
@media (min-width: 48rem) {
.zickzack-row {
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 4vw, 3.5rem);
}
/* Standard: Bild links, Text rechts */
.zickzack-row__media { order: 1; }
.zickzack-row__text { order: 2; }
/* Flip: Text links, Bild rechts */
.zickzack-row--flip .zickzack-row__media { order: 2; }
.zickzack-row--flip .zickzack-row__text { order: 1; }
}
/* Adaptive Galerie: Layout nach Bildanzahl. Bilder IMMER volle Proportion,
nie beschnitten (kein aspect-ratio, kein object-fit: cover). Rundung + Schatten
kommen von .smd-frame. */
.projekt-galerie__item { margin: 0; }
.projekt-galerie__item a { display: block; }
.projekt-galerie__item img { width: 100%; height: auto; display: block; }
/* 1 Bild: gross + zentriert, nicht ueber native Groesse hochskaliert. */
.projekt-galerie--single { display: flex; justify-content: center; }
.projekt-galerie--single .projekt-galerie__item { width: 100%; max-width: 52rem; }
/* 2-3 Bilder: Reihe nebeneinander, gleiche Gaps + Rundung. */
.projekt-galerie--row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(1rem, 2.5vw, 1.75rem); }
.projekt-galerie--row .projekt-galerie__item { flex: 1 1 16rem; }
/* 4+ Bilder: Masonry per CSS columns -> respektiert die natuerliche Bildhoehe,
schneidet nichts ab. Desktop 3 / Tablet 2 / Mobile 1 Spalten. */
.projekt-galerie--masonry { columns: 3; column-gap: clamp(1rem, 2.5vw, 1.75rem); }
.projekt-galerie--masonry .projekt-galerie__item {
break-inside: avoid;
margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}
@media (max-width: 64rem) { .projekt-galerie--masonry { columns: 2; } }
@media (max-width: 40rem) { .projekt-galerie--masonry { columns: 1; } }
/* Projektziel-Block: linksbuendig, gleiche Fliesstextgroesse + Body-Font wie der
Rest (nicht mehr zentriert, nicht mehr Display-Font, nicht mehr ink-voll). */
.projekt-ziel {
max-width: var(--measure-wide);
}
.projekt-ziel p {
font-size: clamp(1.05rem, 1.4vw, 1.15rem);
line-height: 1.7;
color: var(--ink-soft);
margin: 0;
}
/* Akkordeons der Referenz: Label:Wert-Listen. Linksbuendig auf derselben
Spaltenbreite wie Projektziel und Abschluss (kein margin-inline: auto,
sonst rutschen die Boxen gegenueber der Textspalte nach rechts). */
.projekt-akkordeons {
max-width: var(--measure-wide);
}
/* Fette Auszeichnungen im Projekt-Content (Feature-Labels im Zickzack,
Akkordeon-Labels) hell statt im ink-soft der Absaetze. */
.projekt-single strong { color: var(--ink); }
.projekt-akkordeons__liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
.projekt-akkordeons__liste li {
position: relative;
padding-left: 1.4rem;
color: var(--ink-soft);
line-height: 1.5;
}
.projekt-akkordeons__liste li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent-grad);
}
.projekt-akkordeons__liste strong { color: var(--ink); font-weight: 600; }
/* Abschluss-/Dankestext */
.projekt-abschluss {
max-width: var(--measure-wide);
margin: 0; /* linksbuendig; Abstand kommt vom .projekt-block-Rhythmus */
font-size: clamp(1.05rem, 1.4vw, 1.15rem); /* einheitliche Fliesstextgroesse */
line-height: 1.7;
color: var(--ink-soft);
}
/* CTA-Leiste */
.projekt-cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: center;
padding-block: clamp(1.5rem, 4vw, 2.5rem);
}
.post-navigation--projekt {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-2);
border-top: 1px solid var(--line);
padding-block: var(--space-3); /* oben zur Trennlinie = unten zum Footer */
font-family: var(--font-display);
font-size: 0.92rem;
}
/* Drei strikt gleich breite Zonen (Prev links, "Alle Referenzen" zentriert,
Next rechts): flex-basis 0 + min-width 0 -> lange Titel dehnen ihre Zone
nicht, sondern brechen innerhalb um; die Mitte bleibt exakt Spaltenachse. */
.post-navigation--projekt > div { flex: 1 1 0; min-width: 0; overflow-wrap: break-word; }
.post-navigation--projekt > div:nth-child(2) { text-align: center; }
.post-navigation--projekt > div:nth-child(3) { text-align: right; }
/* Mobil untereinander; leere Slots raus, damit der gap keine Luecken stapelt. */
@media (max-width: 40rem) {
.post-navigation--projekt { flex-direction: column; }
.post-navigation--projekt > div,
.post-navigation--projekt > div:nth-child(2),
.post-navigation--projekt > div:nth-child(3) { flex: none; text-align: left; }
.post-navigation--projekt > div:empty { display: none; }
}
.post-navigation--projekt a { text-decoration: none; }
/* Lightbox: leichtgewichtig, ohne Library (JS in theme.js) */
.smd-lightbox-overlay {
position: fixed;
inset: 0;
z-index: 100050;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 3rem);
background: rgba(5, 5, 7, 0.92);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.smd-lightbox-overlay.is-open { opacity: 1; visibility: visible; }
.smd-lightbox-overlay img {
max-width: 100%;
max-height: 100%;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.smd-lightbox-overlay__close {
position: absolute;
top: 1.25rem;
right: 1.5rem;
width: 2.75rem;
height: 2.75rem;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease;
}
.smd-lightbox-overlay__close:hover { background: var(--accent); }
/* Galerie-Slideshow: Pfeil-Buttons links/rechts + Zaehler. Aktive Steuerung im
Orange-Akzent. Bei nur EINEM Bild werden die Pfeile gar nicht erst gerendert. */
.smd-lightbox-overlay__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 3rem;
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 1.9rem;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease;
z-index: 2;
}
.smd-lightbox-overlay__nav:hover,
.smd-lightbox-overlay__nav:focus-visible { background: var(--accent); outline: none; }
/* Beide Pfeile symmetrisch + ausreichend Abstand zum jeweiligen Viewport-Rand,
damit beide Kreise vollstaendig sichtbar sind (rechter lief vorher raus). */
.smd-lightbox-overlay__nav--prev { left: var(--space-3); }
.smd-lightbox-overlay__nav--next { right: var(--space-3); }
/* Chevron als zentriertes SVG (garantiert mittig im viewBox, spiegelsymmetrisch)
statt Text-Glyph mit asymmetrischem Whitespace. */
.smd-lightbox-overlay__nav svg { width: 1.4rem; height: 1.4rem; display: block; }
.smd-lightbox-overlay__count {
position: absolute;
bottom: clamp(0.75rem, 3vw, 1.5rem);
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.82);
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.05em;
}
@media (prefers-reduced-motion: reduce) {
.smd-lightbox-overlay { transition: none; }
}
/* --------------------------------------------------------------------------
Scroll-to-Top: global (footer.php), fixiert unten rechts. Erscheint ab ~400px
Scroll, sanft ein-/ausgeblendet; Klick scrollt smooth nach oben (JS).
-------------------------------------------------------------------------- */
.smd-totop {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
z-index: 90; /* ueber Inhalten, unter dem offenen Mobile-Menue (z-index 100002) */
width: 3rem; /* 48px Touch-Target (>= 44px) */
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--accent-grad);
color: #fff;
box-shadow: var(--glow), 0 8px 22px rgba(0, 0, 0, 0.22);
cursor: pointer;
opacity: 0;
transform: translateY(0.6rem);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s var(--ease-out), filter 0.25s ease, box-shadow 0.25s ease;
}
.smd-totop svg { width: 1.25rem; height: 1.25rem; display: block; }
/* Sichtbar, sobald weit genug gescrollt (JS toggelt .is-visible). */
.smd-totop.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.smd-totop:hover {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow: var(--glow-strong), 0 10px 26px rgba(0, 0, 0, 0.28);
}
.smd-totop:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
/* Nie ueber dem offenen Mobile-Menue. */
body.nav-open .smd-totop { opacity: 0; pointer-events: none; }
/* Light Mode: kraeftigerer Schatten fuer sauberen Kontrast auf hellem Grund. */
html[data-mode="light"] .smd-totop {
box-shadow: 0 8px 22px rgba(214, 40, 32, 0.32), 0 6px 16px rgba(0, 0, 0, 0.12);
}
/* reduced-motion: hart ein-/ausblenden, keine Bewegung. */
@media (prefers-reduced-motion: reduce) {
.smd-totop { transition: none; transform: none; }
.smd-totop.is-visible { transform: none; }
.smd-totop:hover { transform: none; }
}
/* --------------------------------------------------------------------------
Kontaktseite: zweispaltiges Layout (Formular links ~60%, Info rechts ~40%).
-------------------------------------------------------------------------- */
.kontakt-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 5vw, 3.5rem);
margin-top: clamp(1.5rem, 4vw, 3rem);
/* Abstand zur Footer-CTA: gleicher Standard wie die Inhaltsseiten
(.entry-content padding-bottom = var(--space-5)) -> Trennlinie symmetrisch.
Vorher: kein margin-bottom (Inhalt klebte an der CTA-Sektion). */
margin-bottom: var(--space-5);
}
@media (min-width: 60rem) {
.kontakt-grid { grid-template-columns: 3fr 2fr; align-items: start; }
}
.kontakt-grid__heading { margin: 0 0 0.85rem; }
.kontakt-grid__info .kontakt-grid__heading:not(:first-child) { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.kontakt-info__address { font-style: normal; color: var(--ink-soft); line-height: 1.7; margin: 0 0 0.75rem; }
.kontakt-info__links { line-height: 1.9; margin: 0; }
/* Begleittexte auf der Kontaktseite (gedaempft, Body-Lesegroesse, gleicher Token-
Rhythmus). --note ist die knappe Variante unter den Oeffnungszeiten. */
.kontakt-grid__text { color: var(--ink-soft); line-height: 1.7; max-width: var(--measure); margin: 0 0 var(--space-2); }
.kontakt-grid__text--note { font-size: 0.95rem; margin: var(--space-1) 0 0; }
/* Standort-Karte (Google Maps Embed, keyless via ?output=embed): fuegt sich ins
Dark Design (Card-Radius + dezenter Rahmen), volle Spaltenbreite, lazy geladen. */
.kontakt-map {
display: block;
width: 100%;
height: clamp(17.5rem, 40vw, 22.5rem);
margin-top: var(--space-3);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: filter 0.3s ease; /* sanfter Wechsel beim Theme-Toggle */
}
/* Dunkler Kartenstil im Dark Mode per CSS-Filter (kein API-Key; ein Google-Embed laesst
sich Cross-Origin nicht direkt umfaerben). Light Mode (data-mode="light") zeigt die
Karte normal. Wiederhergestellt aus Commit 3f263c4 (damals .smd-map iframe), an den
Theme-Toggle (html[data-mode]) gehaengt -> laeuft synchron zum Rest der Seite. */
html[data-mode="dark"] .kontakt-map {
filter: invert(0.92) hue-rotate(180deg) saturate(0.4) brightness(0.95) contrast(0.92);
}
/* --------------------------------------------------------------------------
Gravity Forms ans Theme angeglichen. Hohe Spezifitaet + gezielte !important,
da GF eigene, spezifische Defaults (u. a. grellweisse Felder) mitbringt.
Dark Mode: dunkle Felder, heller Text. Light Mode: helle Felder, dunkler Text.
-------------------------------------------------------------------------- */
/* Feld-Surface: leicht erhabener Ton, klar ueber dem Seitenhintergrund (#0a0a0c).
Solide Farbe (kein Gradient-Image), damit der Select-Pfeil sie nicht ueberschreibt;
die Glas-Tiefe kommt aus box-shadow (inset Highlight + Innenschatten). */
.gform_wrapper { --gf-field-bg: #1c1c22; }
html[data-mode="light"] .gform_wrapper { --gf-field-bg: #ffffff; }
/* Mehr vertikale Luft zwischen den Feldzeilen, damit das Formular atmet. */
/* Abstaende auf dem NATIVEN GF-Grid (Feldbreiten kommen aus dem Backend via
gfield--width-half/-full). Kein eigenes starres Spalten-Grid -> jede Zeile bekommt
ihre eigene Hoehe, kein Loch. gap = vertikal | horizontal ueber die --space-Skala. */
.gform_wrapper .gform_fields { gap: clamp(1rem, 2.2vw, 1.25rem) clamp(1rem, 2.5vw, 1.5rem) !important; }
/* Nur der Grid-Gap steuert den vertikalen Abstand ZWISCHEN den Zeilen; GF-Feld-Margins
neutralisieren, damit sich nichts addiert (Label-zu-Input-Abstand bleibt davon unberuehrt). */
.gform_wrapper .gform_fields > .gfield { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Labels: --font-sans, klare Groesse/Gewicht, Luft zum Feld; (erforderlich) dezent. */
.gform_wrapper .gfield_label {
display: block;
font-family: var(--font-sans);
font-size: 0.92rem;
font-weight: 600;
color: var(--ink) !important; /* GF-Default ist dunkelblau -> hart auf hellen Token */
margin-bottom: var(--space-1);
}
.gform_wrapper .gfield_required { color: var(--accent-2) !important; font-weight: 400; margin-left: 0.15rem; }
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
width: 100%;
background: var(--gf-field-bg) !important;
color: var(--ink) !important;
border: 1px solid var(--line-strong) !important;
border-radius: var(--radius) !important;
padding: 0.95rem 1.15rem !important;
font-family: inherit;
font-size: 1rem;
line-height: 1.4;
/* Glossy: feine helle Innenkante oben + sanfter Innenschatten unten (vertikaler
Glas-Sheen) + weicher Aussenschatten -> 3D-Tiefe statt flach. */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -10px 14px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
/* Nachricht-Textarea: volle Breite (siehe Grid), angenehm hoch, vertikal vergroesserbar. */
.gform_wrapper textarea { min-height: 6rem; resize: vertical; }
.gform_wrapper ::placeholder { color: var(--ink-faint) !important; opacity: 1; }
/* Browser-Autofill (Chrome) faerbt einzelne Felder sonst roetlich/violett und uneinheitlich
-> auf dieselbe Feld-Surface (#1c1c22) zwingen, Text in --ink. Im Fokus zusaetzlich der
Orange-Ring, damit der eine Fokus-Stil erhalten bleibt. */
.gform_wrapper :is(input, textarea, select):-webkit-autofill {
-webkit-text-fill-color: var(--ink) !important;
-webkit-box-shadow: inset 0 0 0 100px #1c1c22 !important;
caret-color: var(--ink);
}
.gform_wrapper :is(input, textarea, select):-webkit-autofill:focus {
-webkit-box-shadow: inset 0 0 0 100px #20202a, 0 0 0 3px rgba(255, 68, 56, 0.18), 0 0 22px rgba(255, 68, 56, 0.22) !important;
}
/* Fokus: Orange-Akzent (Rahmen + Glow), beide Modes gleich. */
/* EIN Fokus-Zustand, nur Orange. Der blaue Doppel-Ring kam von Browser-/GF-Default-
:focus (outline + GF-Theme-box-shadow); hier hart neutralisiert (outline:none
!important + Orange-box-shadow !important, inkl. :focus-visible). */
.gform_wrapper :is(input, textarea, select):focus,
.gform_wrapper :is(input, textarea, select):focus-visible {
outline: none !important;
border-color: var(--accent) !important;
background: #20202a !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 3px rgba(255, 68, 56, 0.18), 0 0 22px rgba(255, 68, 56, 0.22) !important;
}
/* Kein zweiter (blauer) Ring vom GF-/Browser-Fokus auf Feld-Wrapper. */
.gform_wrapper .gfield:focus-within,
.gform_wrapper .ginput_container:focus-within { box-shadow: none !important; outline: none !important; }
/* Select dunkel inkl. sichtbarem Pfeil (appearance:none + eigener Pfeil). */
.gform_wrapper select {
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
background-position: right 1.3rem center, right 1rem center;
background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
background-repeat: no-repeat;
padding-right: 2.6rem !important;
color: var(--ink) !important; /* gewaehlte Option muss hell auf dunklem Feld sein */
-webkit-text-fill-color: var(--ink) !important; /* WebKit rendert Select-Text ueber text-fill-color, nicht color -> sonst unsichtbar */
}
.gform_wrapper select option { background: #fff !important; color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; }
/* Sicherheits-Override mit hoeherer Spezifitaet, falls GF (Orbital) den Select-Text dunkel
setzt: gewaehlter Wert im geschlossenen Select hart hell (--ink), Surface wie die Felder. */
.gform_wrapper .gfield select,
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container_select select {
color: var(--ink) !important;
-webkit-text-fill-color: var(--ink) !important;
background-color: var(--gf-field-bg) !important;
}
/* Maximale Spezifitaet (ID schlaegt jede Klassen-/GF-Regel): der gewaehlte Wert im
geschlossenen Select MUSS sichtbar sein. Token --ink adaptiert Dark (hell) / Light (dunkel).
Gegen mogliche Verstecker: text-fill, opacity, text-indent, font-size hart gesetzt. */
.gform_wrapper select,
.gform_wrapper select.gfield_select,
.gform_wrapper select.large,
.gform_wrapper select#input_9 {
-webkit-appearance: none !important;
appearance: none !important;
color: #fff !important; /* Holzhammer: Dark = weiss, hartkodiert (kein var()) */
-webkit-text-fill-color: #fff !important;
opacity: 1 !important;
text-indent: 0 !important;
font-size: 1rem !important;
}
/* Light Mode: dunkler Select-Text, hart. */
html[data-mode="light"] .gform_wrapper select,
html[data-mode="light"] .gform_wrapper select.gfield_select,
html[data-mode="light"] .gform_wrapper select.large,
html[data-mode="light"] .gform_wrapper select#input_9 {
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
}
/* Geschlossenes Select zeigte keinen Text (Landingpage, «Anliegen», 28.09.2026): GF
(Orbital) fixiert die Feldhoehe auf --gf-ctrl-size (38 px) und die line-height auf
denselben Wert, das Feld-Padding oben/unten (je 0.95rem) liess nur rund 8 px Platz.
Textfelder zentriert Chrome trotzdem, das eigene Select (appearance: none) nicht.
Darum beim Select kein vertikales Padding, der Text sitzt ueber die line-height
mittig; die Hoehe bleibt gleich wie bei den Textfeldern. */
.gform_wrapper select {
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: calc(var(--gf-ctrl-size, 38px) - 2px) !important;
}
/* Auswahlfelder: dezenter Pfeil rechts, derselbe Winkel wie beim Menuepunkt «Leistungen»
(.main-nav .menu-item-has-children > a::after). Ein Select kann kein ::after tragen,
darum sitzt der Winkel am GF-Container. Die Verlaufs-Dreiecke der Select-Regel weiter
oben kamen nie an: Die Feld-Regel setzt background als Kurzform mit !important und
nimmt damit auch das Hintergrundbild weg. Ruhe: --ink-soft, Fokus: Akzent wie der Rahmen. */
.gform_wrapper .ginput_container_select { position: relative; }
.gform_wrapper .ginput_container_select::after {
content: "";
position: absolute;
top: 50%;
right: 1.15rem;
width: 0.45em;
height: 0.45em;
border-right: 2px solid var(--ink-soft);
border-bottom: 2px solid var(--ink-soft);
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
transition: border-color 0.2s ease;
}
.gform_wrapper .ginput_container_select:focus-within::after { border-color: var(--accent); }
/* WICHTIG: Falls GF "Enhanced UI" (Chosen) aktiv ist, ersetzt es das native