/*
Theme Name: WhatsApp-Spy 2026
Theme URI: https://www.whatsapp-spy.de/
Author: ArNi Solutions
Description: Eigenstaendiges, leichtgewichtiges Theme fuer whatsapp-spy.de. Ohne Pagebuilder
und ohne CSS-Framework: ein Stylesheet, eine kleine JS-Datei, selbst gehostete
Schriften (DSGVO). Aufgebaut auf CSS Custom Properties und CSS Grid.
Version: 1.35.1
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wsp
*/
/* ==========================================================================
1. Schriften — selbst gehostet, damit keine Verbindung zu Google entsteht
========================================================================== */
@font-face {
font-family: "Inter";
src: url("assets/fonts/inter-latin.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Caveat";
src: url("assets/fonts/caveat-latin.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
2. Design-Tokens
========================================================================== */
:root {
/* Gruen-Palette, abgeleitet aus dem Entwurf */
--wsp-green: #45dd8b;
--wsp-green-hover: #35c97a;
--wsp-green-deep: #0f7a47;
--wsp-green-soft: #d8f6e5;
--wsp-green-softer: #eaf9f1;
/* Dunkler Hero-Bereich */
--wsp-dark: #0a1f16;
--wsp-dark-2: #0f2c20;
--wsp-dark-3: #143a2a;
/* Text */
--wsp-ink: #0c2a1d;
--wsp-body: #40554b;
--wsp-muted: #6b8177;
--wsp-on-dark: #ffffff;
--wsp-on-dark-muted: #b9cec4;
/* Flaechen */
--wsp-bg: #ffffff;
--wsp-bg-soft: #f3f8f5;
--wsp-border: #e2ece7;
--wsp-border-dark: rgba(255, 255, 255, 0.16);
/* Masse */
--wsp-radius-sm: 10px;
--wsp-radius: 16px;
--wsp-radius-lg: 24px;
--wsp-radius-xl: 32px;
--wsp-radius-pill: 999px;
--wsp-container: 1240px;
--wsp-gutter: clamp(1.25rem, 4vw, 2.5rem);
--wsp-shadow-sm: 0 2px 8px rgba(12, 42, 29, 0.06);
--wsp-shadow: 0 12px 32px rgba(12, 42, 29, 0.08);
--wsp-shadow-lg: 0 28px 70px rgba(12, 42, 29, 0.16);
--wsp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--wsp-font-hand: "Caveat", "Segoe Script", cursive;
}
/* ==========================================================================
3. Basis
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
body {
margin: 0;
background: var(--wsp-bg);
color: var(--wsp-body);
font-family: var(--wsp-font);
font-size: 1.0625rem;
line-height: 1.65;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/*
* Schaltflaechen erben die Schrift nicht von selbst — ohne diese Zeile nimmt
* der Browser seine eigene Formularschrift, und die ist je nach System sogar
* eine Serifenschrift. Aufgefallen ist das an den App-Namen im Abschnitt
* „Spy Funktionen im Überblick": Das Skript baut die Kacheln zu Schaltflaechen
* um, seither stand der Name dort in der Systemschrift statt in Inter.
* Einzelne Komponenten setzen weiter unten weiterhin ihr eigenes font: inherit —
* das ist jetzt doppelt, schadet aber nichts.
*/
button {
font: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 0.5em;
color: var(--wsp-ink);
font-weight: 800;
line-height: 1.14;
letter-spacing: -0.028em;
text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.9vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
h4 { font-size: 1.125rem; }
p {
margin: 0 0 1.15em;
}
a {
color: var(--wsp-green-deep);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover {
color: var(--wsp-ink);
}
img {
max-width: 100%;
height: auto;
display: block;
}
figure {
margin: 0;
}
ul,
ol {
padding-left: 1.25em;
}
/* Sichtbarer Fokus fuer Tastaturbedienung */
:focus-visible {
outline: 3px solid var(--wsp-green);
outline-offset: 3px;
border-radius: 4px;
}
.wsp-screen-reader-text,
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.wsp-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
background: var(--wsp-green);
color: var(--wsp-ink);
padding: 0.75rem 1.25rem;
border-radius: 0 0 var(--wsp-radius-sm) 0;
font-weight: 700;
}
.wsp-skip-link:focus {
left: 0;
}
/* ==========================================================================
4. Layout
========================================================================== */
.wsp-container {
width: 100%;
max-width: var(--wsp-container);
margin-inline: auto;
padding-inline: var(--wsp-gutter);
}
.wsp-section {
padding-block: clamp(3.5rem, 7vw, 6rem);
}
.wsp-section--soft {
background: var(--wsp-bg-soft);
}
.wsp-eyebrow {
display: block;
margin: 0 0 1rem;
color: var(--wsp-green-deep);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.wsp-hero .wsp-eyebrow {
color: var(--wsp-green);
}
/* Der gruene Schlusspunkt der Headline aus dem Entwurf */
.wsp-dot {
color: var(--wsp-green);
}
.wsp-lead {
font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
line-height: 1.62;
max-width: 34em;
}
/* ==========================================================================
5. Buttons
========================================================================== */
.wsp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.95rem 1.7rem;
border: 2px solid transparent;
border-radius: var(--wsp-radius-pill);
font: inherit;
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color 0.18s ease, color 0.18s ease,
border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.wsp-btn:hover {
transform: translateY(-2px);
}
.wsp-btn svg {
flex: none;
width: 1.05em;
height: 1.05em;
}
.wsp-btn--primary {
background: var(--wsp-green);
color: #06231a;
box-shadow: 0 8px 24px rgba(69, 221, 139, 0.32);
}
.wsp-btn--primary:hover {
background: var(--wsp-green-hover);
color: #06231a;
box-shadow: 0 12px 30px rgba(69, 221, 139, 0.42);
}
/* Outline-Variante auf dunklem Grund */
.wsp-btn--ghost {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.32);
}
.wsp-btn--ghost:hover {
color: #fff;
border-color: var(--wsp-green);
background: rgba(69, 221, 139, 0.1);
}
.wsp-btn--sm {
padding: 0.7rem 1.3rem;
font-size: 0.9375rem;
}
/* ==========================================================================
6. Kopfbereich
========================================================================== */
/*
* Fest statt absolut: Beides nimmt den Kopf aus dem Fluss, er liegt also
* unveraendert ueber dem Hero — aber fixed bleibt beim Scrollen stehen. Der
* Wechsel kostet keine Zeile Layout an anderer Stelle.
*/
.wsp-header {
position: fixed;
inset: 0 0 auto;
z-index: 60;
padding-block: 1.35rem;
transition: background 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
}
/*
* Sobald der einleitende Block durchgescrollt ist, wechselt der Kopf: auf den
* Startseiten vom Durchsichtigen ins Helle, auf Unterseiten kommen zum schon
* hellen Balken Transparenz, Unschaerfe und ein Schatten dazu. Die Klasse
* setzt assets/js/nav.js — siehe dort, was je Seite beobachtet wird.
*/
.wsp-header.is-stuck {
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--wsp-border);
box-shadow: 0 6px 24px rgba(12, 42, 29, 0.06);
padding-block: 0.9rem;
}
/*
* Auf Unterseiten steht der Kopf von Anfang an auf hellem Grund. Hier bewusst
* sticky und nicht fixed: sticky nimmt Platz im Fluss ein, der Inhalt beginnt
* also darunter statt dahinter — auf den Startseiten ist genau das umgekehrt
* gewollt. is-stuck bleibt deshalb aus dieser Regel heraus.
*/
.wsp-header--solid {
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--wsp-border);
padding-block: 0.9rem;
}
.wsp-header__inner {
display: flex;
align-items: center;
gap: 1.5rem;
}
.wsp-brand {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
font-weight: 800;
font-size: 1.3rem;
letter-spacing: -0.03em;
color: #fff;
flex: none;
}
.wsp-header--solid .wsp-brand,
.wsp-header.is-stuck .wsp-brand {
color: var(--wsp-ink);
}
.wsp-brand__mark {
width: 42px;
height: 42px;
flex: none;
}
.wsp-brand__accent {
color: var(--wsp-green);
}
.wsp-nav {
margin-left: auto;
}
.wsp-nav ul {
display: flex;
align-items: center;
gap: clamp(1rem, 2.2vw, 2rem);
margin: 0;
padding: 0;
list-style: none;
}
.wsp-nav a {
color: rgba(255, 255, 255, 0.88);
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: color 0.16s ease;
}
.wsp-nav a:hover,
.wsp-nav .current-menu-item > a {
color: var(--wsp-green);
}
.wsp-header--solid .wsp-nav a,
.wsp-header.is-stuck .wsp-nav a {
color: var(--wsp-body);
}
.wsp-header--solid .wsp-nav a:hover,
.wsp-header--solid .wsp-nav .current-menu-item > a,
.wsp-header.is-stuck .wsp-nav a:hover,
.wsp-header.is-stuck .wsp-nav .current-menu-item > a {
color: var(--wsp-green-deep);
}
.wsp-header__cta {
flex: none;
}
/* Sprachumschalter
*
* Geschlossen steht nur die Flagge der aktiven Sprache im Kopf; ein Klick
* klappt die uebrigen darunter auf. Die Flagge traegt eigene Farben und
* funktioniert deshalb ueber dem durchsichtigen wie ueber dem weissen Kopf.
*
* Ohne Skript gibt es kein Aufklappen. Dort ist die Flagge ein gewoehnlicher
* Link auf die andere Sprache — ein Klick fuehrt also direkt hinueber statt
* ins Leere, und fuer die Tastatur oeffnet sich die Liste zusaetzlich beim
* Fokus.
*/
.wsp-lang {
position: relative;
display: inline-flex;
flex: none;
}
.wsp-lang__current {
display: grid;
place-items: center;
padding: 0.3rem;
border-radius: 7px;
/* Sonst setzt die Zeilenhoehe unter dem SVG einen Streifen Luft. */
line-height: 0;
cursor: pointer;
}
.wsp-lang svg {
display: block;
width: 22px;
height: 16.5px;
border-radius: 2px;
/* Weisse und gelbe Flaggenanteile zerfliessen sonst mit dem Untergrund. */
box-shadow: 0 0 0 1px rgba(10, 31, 22, 0.28);
}
.wsp-lang__current:hover,
.wsp-lang__current:focus-visible {
background: rgba(255, 255, 255, 0.18);
}
.wsp-header--solid .wsp-lang__current:hover,
.wsp-header--solid .wsp-lang__current:focus-visible,
.wsp-header.is-stuck .wsp-lang__current:hover,
.wsp-header.is-stuck .wsp-lang__current:focus-visible {
background: var(--wsp-bg-soft);
}
/* --- Die aufgeklappte Liste ---------------------------------------------- */
.wsp-lang__list {
display: none;
position: absolute;
top: calc(100% + 0.45rem);
/* Rechtsbuendig, sonst laeuft die Liste am rechten Rand aus dem Bild. */
right: 0;
z-index: 60;
margin: 0;
padding: 0.3rem;
list-style: none;
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-sm);
box-shadow: var(--wsp-shadow-lg);
}
.wsp-lang.is-open .wsp-lang__list {
display: block;
}
/*
* Ohne Skript wird is-open nie gesetzt. Damit die Liste dort per Tastatur
* erreichbar bleibt, oeffnet der Fokus sie — aber nur ohne Skript, sonst
* klappte sie schon beim Antabben auf, statt erst beim Klick.
*/
html:not(.wsp-js) .wsp-lang:focus-within .wsp-lang__list {
display: block;
}
.wsp-lang__list a {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.75rem 0.4rem 0.5rem;
border-radius: 6px;
color: var(--wsp-ink);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.wsp-lang__list a:hover,
.wsp-lang__list a:focus-visible {
background: var(--wsp-bg-soft);
color: var(--wsp-green-deep);
}
/* Menuknopf — nur mobil sichtbar */
.wsp-navtoggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-left: auto;
padding: 0;
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--wsp-border-dark);
border-radius: 12px;
color: #fff;
cursor: pointer;
}
.wsp-header--solid .wsp-navtoggle,
.wsp-header.is-stuck .wsp-navtoggle {
background: var(--wsp-bg-soft);
border-color: var(--wsp-border);
color: var(--wsp-ink);
}
.wsp-navtoggle svg {
width: 22px;
height: 22px;
}
.wsp-navtoggle__close {
display: none;
}
.wsp-navtoggle[aria-expanded="true"] .wsp-navtoggle__open {
display: none;
}
.wsp-navtoggle[aria-expanded="true"] .wsp-navtoggle__close {
display: block;
}
/* ==========================================================================
7. Hero
========================================================================== */
.wsp-hero {
position: relative;
/* nicht "hidden": das Telefon ragt bewusst unten heraus */
overflow: clip;
background:
radial-gradient(70% 55% at 78% 18%, rgba(69, 221, 139, 0.16), transparent 62%),
radial-gradient(50% 45% at 8% 88%, rgba(69, 221, 139, 0.08), transparent 60%),
linear-gradient(158deg, var(--wsp-dark-3) 0%, var(--wsp-dark-2) 42%, var(--wsp-dark) 100%);
color: var(--wsp-on-dark);
padding-top: clamp(7rem, 12vw, 9.5rem);
padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
/* Grosses, sehr blasses WhatsApp-Zeichen im Hintergrund */
.wsp-hero__watermark {
position: absolute;
right: -4%;
top: 34%;
width: min(46vw, 620px);
color: rgba(255, 255, 255, 0.028);
pointer-events: none;
z-index: 0;
}
.wsp-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.wsp-hero h1 {
color: #fff;
margin-bottom: 1.1rem;
/* Der reale Seitentitel ist laenger als im Entwurf; kleinere Obergrenze
haelt die Zeilenzahl und damit die Hoehe des Hero im Rahmen. */
font-size: clamp(2.2rem, 4.2vw, 2.7rem);
letter-spacing: -0.035em;
text-wrap: balance;
}
.wsp-hero h1 .wsp-hero__line2 {
display: block;
color: var(--wsp-green);
}
.wsp-hero__lead {
color: var(--wsp-on-dark-muted);
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
max-width: 32em;
margin-bottom: 1.9rem;
}
/* Check-Liste, zweispaltig wie im Entwurf */
.wsp-checks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.85rem 1.75rem;
margin: 0 0 2.1rem;
padding: 0;
list-style: none;
}
.wsp-checks li {
display: flex;
align-items: center;
gap: 0.7rem;
color: rgba(255, 255, 255, 0.94);
font-size: 0.98rem;
font-weight: 500;
}
.wsp-checks svg {
flex: none;
width: 22px;
height: 22px;
color: var(--wsp-green);
}
.wsp-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
margin-bottom: 2.6rem;
}
/* Vertrauens-Zeile unter den Buttons */
.wsp-trust {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem 1.75rem;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--wsp-border-dark);
padding-top: 1.75rem;
}
.wsp-trust li {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
line-height: 1.35;
color: rgba(255, 255, 255, 0.86);
}
.wsp-trust svg {
flex: none;
width: 30px;
height: 30px;
color: rgba(255, 255, 255, 0.75);
}
/* Handschriftliche Notizen */
.wsp-hand {
font-family: var(--wsp-font-hand);
font-size: clamp(1.1rem, 1.7vw, 1.45rem);
line-height: 1.28;
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
}
.wsp-hero__note {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 0.5rem;
max-width: 15rem;
pointer-events: none;
}
.wsp-hero__note--top {
top: 4%;
right: 0;
text-align: left;
}
.wsp-hero__note--bottom {
bottom: 8%;
right: 1%;
flex-direction: column;
align-items: flex-end;
text-align: right;
}
.wsp-hero__note svg {
flex: none;
color: rgba(255, 255, 255, 0.75);
}
.wsp-hero__underline {
width: 128px;
height: 12px;
color: var(--wsp-green);
}
/* ==========================================================================
8. Smartphone — vollstaendig in CSS/HTML, kein Bild
========================================================================== */
.wsp-phone-wrap {
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
min-height: 100%;
}
.wsp-phone {
position: relative;
z-index: 2;
width: min(330px, 78vw);
aspect-ratio: 330 / 660;
margin-bottom: clamp(-5rem, -4vw, -3rem);
padding: 11px;
background: linear-gradient(160deg, #4a5854, #23302b 30%, #161f1c 70%, #38443f);
border-radius: 46px;
box-shadow: var(--wsp-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.wsp-phone__screen {
position: relative;
height: 100%;
overflow: hidden;
background: #0b1512;
border-radius: 36px;
display: flex;
flex-direction: column;
color: #fff;
font-size: 0.78rem;
}
/* Dynamic Island */
.wsp-phone__island {
position: absolute;
top: 9px;
left: 50%;
transform: translateX(-50%);
width: 88px;
height: 26px;
background: #050b09;
border-radius: 999px;
z-index: 4;
}
.wsp-phone__status {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.15rem 0.2rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.wsp-phone__status svg {
width: 15px;
height: 15px;
opacity: 0.95;
}
.wsp-phone__statusicons {
display: inline-flex;
align-items: center;
gap: 4px;
}
.wsp-phone__titlebar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1.15rem 0.55rem;
}
.wsp-phone__title {
font-size: 1.08rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.wsp-phone__search {
margin: 0 1.15rem 0.7rem;
padding: 0.42rem 0.7rem;
display: flex;
align-items: center;
gap: 0.45rem;
background: rgba(255, 255, 255, 0.09);
border-radius: 999px;
color: rgba(255, 255, 255, 0.5);
font-size: 0.72rem;
}
.wsp-phone__search svg {
width: 13px;
height: 13px;
}
.wsp-phone__tabs {
display: flex;
gap: 1.15rem;
padding: 0 1.15rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.wsp-phone__tab {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding-bottom: 0.55rem;
}
.wsp-phone__tab--active {
color: var(--wsp-green);
box-shadow: inset 0 -2px 0 var(--wsp-green);
}
.wsp-phone__badge {
display: inline-grid;
place-items: center;
min-width: 15px;
height: 15px;
padding: 0 4px;
background: var(--wsp-green);
color: #06231a;
border-radius: 999px;
font-size: 0.58rem;
font-weight: 800;
}
.wsp-phone__chats {
flex: 1;
overflow: hidden;
margin: 0;
padding: 0.15rem 0 0;
list-style: none;
}
.wsp-chat {
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 0.6rem;
align-items: center;
padding: 0.5rem 1.15rem;
}
.wsp-chat__avatar {
width: 34px;
height: 34px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.72rem;
font-weight: 700;
color: #06231a;
background: linear-gradient(150deg, var(--wsp-green), #2aa568);
overflow: hidden;
}
.wsp-chat__avatar--muted {
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.75);
}
.wsp-chat__avatar svg {
width: 19px;
height: 19px;
}
.wsp-chat__name {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wsp-chat__msg {
display: flex;
align-items: center;
gap: 0.25rem;
color: rgba(255, 255, 255, 0.52);
font-size: 0.72rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wsp-chat__msg svg {
flex: none;
width: 11px;
height: 11px;
}
.wsp-chat__meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
color: rgba(255, 255, 255, 0.42);
font-size: 0.63rem;
white-space: nowrap;
}
/* Unterer Rand des Screens weich auslaufen lassen */
.wsp-phone__fade {
position: absolute;
inset: auto 0 0;
height: 72px;
background: linear-gradient(to bottom, transparent, #0b1512);
pointer-events: none;
}
/* ==========================================================================
9. Funktions-Karten
========================================================================== */
.wsp-featurebar {
background: #fff;
padding-block: clamp(2.75rem, 5vw, 3.75rem);
}
.wsp-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.wsp-feature {
display: grid;
grid-template-columns: 52px 1fr;
gap: 0.9rem;
align-items: start;
}
.wsp-feature__icon {
width: 52px;
height: 52px;
display: grid;
place-items: center;
background: var(--wsp-green-soft);
border-radius: 15px;
color: var(--wsp-green-deep);
}
.wsp-feature__icon svg {
width: 25px;
height: 25px;
}
.wsp-feature h3 {
margin: 0.15rem 0 0.35rem;
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: -0.015em;
}
.wsp-feature p {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--wsp-muted);
}
/* ==========================================================================
10. Split-Sektion mit Bild, Zitat und Zielgruppen
========================================================================== */
.wsp-split {
position: relative;
background:
radial-gradient(60% 60% at 80% 30%, rgba(69, 221, 139, 0.09), transparent 65%),
var(--wsp-bg-soft);
padding-block: 0;
overflow: hidden;
}
.wsp-split__inner {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) minmax(0, 0.78fr);
gap: clamp(1.75rem, 3.5vw, 3rem);
align-items: center;
}
/* Das Bild reicht links bis an den Rand, wie im Entwurf */
.wsp-split__media {
position: relative;
align-self: stretch;
min-height: 420px;
margin-left: calc(-1 * var(--wsp-gutter));
border-radius: 0 var(--wsp-radius-xl) var(--wsp-radius-xl) 0;
overflow: hidden;
}
.wsp-split__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.wsp-quote {
position: absolute;
left: clamp(1rem, 2vw, 1.5rem);
bottom: clamp(1rem, 2vw, 1.5rem);
right: clamp(1rem, 2vw, 2.5rem);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(6px);
border-radius: var(--wsp-radius);
box-shadow: var(--wsp-shadow);
padding: 1rem 1.15rem;
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--wsp-ink);
}
.wsp-quote p {
margin: 0 0 0.5rem;
}
.wsp-quote cite {
color: var(--wsp-muted);
font-size: 0.8rem;
font-style: normal;
}
.wsp-split__body {
padding-block: clamp(3rem, 6vw, 4.5rem);
}
.wsp-split__body h2 {
margin-bottom: 1rem;
}
/* Zielgruppen-Karten rechts */
.wsp-audience {
display: grid;
gap: 0.9rem;
}
.wsp-audience__item {
display: grid;
grid-template-columns: 46px 1fr;
gap: 0.85rem;
align-items: start;
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
padding: 1rem 1.15rem;
box-shadow: var(--wsp-shadow-sm);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wsp-audience__item:hover {
transform: translateY(-3px);
box-shadow: var(--wsp-shadow);
}
.wsp-audience__icon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
background: var(--wsp-green-softer);
border-radius: 13px;
color: var(--wsp-green-deep);
}
.wsp-audience__icon svg {
width: 23px;
height: 23px;
}
.wsp-audience h3 {
margin: 0 0 0.2rem;
font-size: 1rem;
font-weight: 700;
}
.wsp-audience p {
margin: 0;
font-size: 0.86rem;
line-height: 1.45;
color: var(--wsp-muted);
}
/* ==========================================================================
11. Weitere Startseiten-Bausteine
========================================================================== */
/* Messenger-Logos */
/* Nummerierte Schritte */
.wsp-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(1.25rem, 3vw, 2rem);
margin: 0;
padding: 0;
list-style: none;
counter-reset: wsp-step;
}
.wsp-steps li {
position: relative;
counter-increment: wsp-step;
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
padding: 2.4rem 1.35rem 1.35rem;
}
.wsp-steps li::before {
content: counter(wsp-step);
position: absolute;
top: 1.2rem;
left: 1.35rem;
width: 30px;
height: 30px;
display: grid;
place-items: center;
background: var(--wsp-green);
color: #06231a;
border-radius: 50%;
font-size: 0.85rem;
font-weight: 800;
}
.wsp-steps h3 {
font-size: 1.05rem;
margin-bottom: 0.35rem;
}
.wsp-steps p {
margin: 0;
font-size: 0.9rem;
color: var(--wsp-muted);
}
/* Zentrierter Sektionskopf */
.wsp-sectionhead {
max-width: 46rem;
margin: 0 auto clamp(2rem, 4vw, 3rem);
text-align: center;
}
.wsp-sectionhead .wsp-lead {
margin-inline: auto;
}
/*
* Der Messenger-Abschnitt traegt den laengsten Abschnittskopf der Seite: eine
* zweiteilige Ueberschrift und drei Saetze Vorspann. Bei den allgemeinen 46rem
* brach die Ueberschrift auf zwei Zeilen und der Vorspann auf sieben — 344
* Pixel, bevor das erste Messenger-Symbol kommt.
*
* Die Breite ist aus der Symbolreihe abgeleitet: eine Kachel misst 94,7 Pixel,
* der Abstand 30,4 — acht Kacheln waeren zusammen 970 Pixel breit. Genau so
* weit laeuft jetzt der Vorspann, ohne dass eine achte Kachel dazukommt; die
* Reihe bleibt bei sechs. Der Kopf steht damit bei 173 statt 344 Pixeln.
*
* Der Preis dafuer sind 96 Zeichen je Zeile — mehr, als fuer Fliesstext
* angenehm ist. Fuer drei Saetze Vorspann vertretbar, fuer laengeren Text
* nicht. Deshalb die Bindung an .wsp-section--mint, die es nur an dieser
* einen Stelle gibt; kein anderer Abschnittskopf erbt das.
*
* Auf schmalen Geraeten greift die Breite ohnehin nicht, dort begrenzt der
* Container.
*/
.wsp-section--mint .wsp-sectionhead {
max-width: 60.75rem;
}
.wsp-section--mint .wsp-sectionhead h2 {
font-size: clamp(1.75rem, 2.8vw, 2.4rem);
}
.wsp-section--mint .wsp-sectionhead .wsp-lead {
font-size: 1.0625rem;
max-width: 57em;
}
/* Abschliessender Aufruf */
.wsp-cta {
position: relative;
overflow: hidden;
background:
radial-gradient(60% 70% at 85% 20%, rgba(69, 221, 139, 0.18), transparent 60%),
linear-gradient(150deg, var(--wsp-dark-3), var(--wsp-dark));
color: #fff;
border-radius: var(--wsp-radius-xl);
padding: clamp(2.5rem, 5vw, 3.75rem);
text-align: center;
}
.wsp-cta h2 {
color: #fff;
margin-bottom: 0.75rem;
}
.wsp-cta p {
color: var(--wsp-on-dark-muted);
max-width: 40em;
margin-inline: auto;
margin-bottom: 1.75rem;
}
/* ==========================================================================
12. Fussbereich
========================================================================== */
.wsp-footer {
background: #fff;
border-top: 1px solid var(--wsp-border);
padding-block: clamp(2rem, 4vw, 2.75rem);
}
.wsp-footer__top {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem 2rem;
}
.wsp-footer .wsp-brand {
color: var(--wsp-ink);
font-size: 1.2rem;
}
.wsp-footer__nav ul {
display: flex;
flex-wrap: wrap;
gap: 0.85rem 1.6rem;
margin: 0;
padding: 0;
list-style: none;
}
.wsp-footer__nav a {
color: var(--wsp-body);
font-size: 0.92rem;
text-decoration: none;
}
.wsp-footer__nav a:hover {
color: var(--wsp-green-deep);
text-decoration: underline;
}
.wsp-social {
display: flex;
gap: 0.6rem;
margin: 0;
padding: 0;
list-style: none;
margin-left: auto;
}
.wsp-social a {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--wsp-ink);
color: #fff;
transition: background-color 0.16s ease, transform 0.16s ease;
}
.wsp-social a:hover {
background: var(--wsp-green-deep);
transform: translateY(-2px);
}
.wsp-social svg {
width: 18px;
height: 18px;
}
.wsp-footer__hand {
/*
* Nach ganz rechts schieben. Das „margin-left: auto" lag bisher nur auf
* der Liste der sozialen Netzwerke — die ist aber leer, solange im
* Customizer nichts hinterlegt ist, und dann stand die Zeile direkt
* hinter der Navigation statt am Rand.
*/
margin-left: auto;
color: var(--wsp-muted);
text-align: right;
line-height: 1.25;
}
.wsp-footer__hand svg {
display: block;
margin-left: auto;
color: var(--wsp-green);
width: 118px;
height: 11px;
}
.wsp-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.75rem;
margin-top: 1.75rem;
padding-top: 1.35rem;
border-top: 1px solid var(--wsp-border);
color: var(--wsp-muted);
font-size: 0.83rem;
}
.wsp-footer__bottom p {
margin: 0;
}
/*
* Haftungsausschluss. Zurueckhaltend gesetzt, aber bewusst lesbar:
* der Hinweis auf die Informationspflicht ist rechtlich relevant.
*/
.wsp-disclaimer {
margin-top: 2rem;
padding: 1.15rem 1.35rem;
background: var(--wsp-bg-soft);
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
}
.wsp-disclaimer h2 {
margin: 0 0 0.4rem;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0;
}
.wsp-disclaimer p {
margin: 0;
font-size: 0.85rem;
line-height: 1.55;
color: var(--wsp-muted);
}
/* ==========================================================================
13. Innenseiten und WordPress-Inhalte
========================================================================== */
.wsp-pagehead {
background:
radial-gradient(60% 70% at 78% 10%, rgba(69, 221, 139, 0.13), transparent 62%),
linear-gradient(150deg, var(--wsp-dark-3), var(--wsp-dark));
color: #fff;
padding-block: clamp(3rem, 6vw, 4.5rem);
}
.wsp-pagehead h1 {
color: #fff;
margin-bottom: 0.5rem;
}
.wsp-pagehead p {
color: var(--wsp-on-dark-muted);
margin: 0;
max-width: 42em;
}
/* Brotkrumen */
.wsp-breadcrumb {
margin-bottom: 0.85rem;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.62);
}
.wsp-breadcrumb a {
color: rgba(255, 255, 255, 0.82);
text-decoration: none;
}
.wsp-breadcrumb a:hover {
color: var(--wsp-green);
text-decoration: underline;
}
.wsp-content {
max-width: 74ch;
font-size: 1.0625rem;
}
.wsp-content--wide {
max-width: none;
}
/*
* Seiten ohne Seitenleiste: der Inhalt steht mittig statt links am Rand.
* Etwas breiter als das reine Lesemass, weil auf diesen Seiten vor allem
* Tabellen und Kartenraster stehen, die von der Breite profitieren.
*/
.wsp-content--centered {
/*
* Zwei Obergrenzen, und die zweite ist der eigentliche Punkt: Die
* Vergleichstabellen tragen eine Mindestbreite von 32 rem. Diese
* Mindestbreite schiebt die gesamte Inhaltsspalte auf — auf einem
* Telefon lief die Seite dadurch seitlich ueber, Ueberschriften waren
* angeschnitten und die Paketkarten standen nebeneinander statt
* untereinander. Das „overflow-x: auto" am Tabellenrahmen genuegt dafuer
* nicht. Der Deckel am Sichtfenster haelt die Spalte im Rahmen; die
* Tabellen scrollen dann fuer sich.
*/
max-width: min(1000px, calc(100vw - 2 * var(--wsp-gutter)));
margin-inline: auto;
}
.wsp-content h2 {
margin-top: 2.2em;
font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.wsp-content h3 {
margin-top: 1.8em;
}
.wsp-content > *:first-child {
margin-top: 0;
}
.wsp-content img {
border-radius: var(--wsp-radius);
margin-block: 1.5rem;
}
.wsp-content figcaption {
margin-top: 0.5rem;
font-size: 0.85rem;
color: var(--wsp-muted);
}
.wsp-content ul,
.wsp-content ol {
padding-left: 1.35em;
}
/*
* Die Bausteine bringen eigene Aufzaehlungszeichen und Abstaende mit; der
* Einzug gewoehnlicher Listen schiebt sie nur nach rechts. Bei den
* Kennzahlen standen die Karten dadurch sichtbar eingerueckt gegenueber dem
* Fliesstext daneben. Die Regel muss an .wsp-content haengen, weil
* „.wsp-content ul" mit (0,1,1) spezifischer ist als die Klasse allein.
*/
.wsp-content .wsp-c-list,
.wsp-content .wsp-c-stats,
.wsp-content .wsp-c-steps {
padding-left: 0;
}
.wsp-content li {
margin-bottom: 0.4em;
}
.wsp-content blockquote {
margin: 1.75rem 0;
padding: 1.1rem 1.4rem;
background: var(--wsp-bg-soft);
border-left: 4px solid var(--wsp-green);
border-radius: 0 var(--wsp-radius-sm) var(--wsp-radius-sm) 0;
}
.wsp-content blockquote p:last-child {
margin-bottom: 0;
}
.wsp-content table {
width: 100%;
border-collapse: collapse;
margin-block: 1.5rem;
font-size: 0.95rem;
}
.wsp-content th,
.wsp-content td {
padding: 0.7rem 0.85rem;
border: 1px solid var(--wsp-border);
text-align: left;
}
.wsp-content th {
background: var(--wsp-bg-soft);
font-weight: 700;
color: var(--wsp-ink);
}
.wsp-content :is(iframe, video, embed, object) {
max-width: 100%;
border-radius: var(--wsp-radius);
}
/* WordPress-Standardklassen */
.alignleft {
float: left;
margin: 0.4rem 1.5rem 1rem 0;
}
.alignright {
float: right;
margin: 0.4rem 0 1rem 1.5rem;
}
.aligncenter {
margin-inline: auto;
}
.alignwide,
.alignfull {
max-width: none;
}
.wp-caption {
max-width: 100%;
}
.wsp-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(2rem, 4vw, 3.5rem);
}
.wsp-layout--sidebar {
grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
}
.wsp-sidebar {
font-size: 0.95rem;
}
.wsp-widget {
background: var(--wsp-bg-soft);
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
padding: 1.25rem 1.4rem;
margin-bottom: 1.25rem;
}
.wsp-widget h2,
.wsp-widget .widget-title {
font-size: 1rem;
margin-bottom: 0.75rem;
}
.wsp-widget ul {
margin: 0;
padding-left: 1.1em;
}
/* Kindseiten-Navigation */
.wsp-childnav {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--wsp-border);
}
.wsp-childnav ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0.85rem;
margin: 0;
padding: 0;
list-style: none;
}
.wsp-childnav a {
display: block;
padding: 0.9rem 1.1rem;
background: var(--wsp-bg-soft);
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-sm);
text-decoration: none;
color: var(--wsp-ink);
font-weight: 600;
font-size: 0.95rem;
}
.wsp-childnav a:hover {
border-color: var(--wsp-green);
background: #fff;
}
/* Formulare */
.wsp-content :is(input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="search"], input[type="number"], textarea, select) {
width: 100%;
max-width: 100%;
padding: 0.75rem 0.9rem;
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-sm);
font: inherit;
font-size: 1rem;
color: var(--wsp-ink);
}
.wsp-content :is(input, textarea, select):focus {
border-color: var(--wsp-green);
outline: 2px solid rgba(69, 221, 139, 0.3);
outline-offset: 1px;
}
.wsp-content textarea {
min-height: 160px;
resize: vertical;
}
.wsp-content :is(input[type="submit"], button[type="submit"]) {
width: auto;
padding: 0.9rem 1.7rem;
background: var(--wsp-green);
color: #06231a;
border: 0;
border-radius: var(--wsp-radius-pill);
font-weight: 700;
font-size: 1rem;
cursor: pointer;
}
.wsp-content :is(input[type="submit"], button[type="submit"]):hover {
background: var(--wsp-green-hover);
}
/* 404 */
.wsp-404 {
text-align: center;
padding-block: clamp(3.5rem, 8vw, 6rem);
}
.wsp-404__code {
font-size: clamp(4rem, 12vw, 8rem);
font-weight: 800;
line-height: 1;
color: var(--wsp-green);
letter-spacing: -0.05em;
}
/* ==========================================================================
13b. Aus dem Betheme-Builder uebernommene Inhalte
Diese Bausteine lagen zuvor in Builder-Metafeldern und wurden in
regulaeres post_content ueberfuehrt.
========================================================================== */
.wsp-mfn-image img {
border-radius: var(--wsp-radius);
}
/* Funktionslisten mit Symbol-Ueberschrift */
.wsp-mfn-list {
background: var(--wsp-bg-soft);
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
padding: 1.15rem 1.35rem;
margin-bottom: 1rem;
}
.wsp-mfn-list h3 {
margin: 0 0 0.5rem;
font-size: 1.05rem;
}
.wsp-mfn-list ul {
margin: 0;
padding-left: 1.15em;
}
.wsp-mfn-list li {
margin-bottom: 0.25em;
}
/*
* In den Ursprungsdaten markiert die Klasse „not" nicht enthaltene
* Leistungen. Das bleibt erhalten, damit die Pakete korrekt abgebildet sind.
*/
.wsp-content li.not {
color: var(--wsp-muted);
text-decoration: line-through;
text-decoration-color: var(--wsp-border);
}
/* Info-Kacheln */
.wsp-mfn-box {
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
padding: 1.15rem 1.35rem;
margin-bottom: 1rem;
box-shadow: var(--wsp-shadow-sm);
}
.wsp-mfn-box img {
width: auto;
max-height: 90px;
margin: 0 0 0.75rem;
border-radius: var(--wsp-radius-sm);
}
.wsp-mfn-box h3 {
margin: 0 0 0.35rem;
font-size: 1.05rem;
}
.wsp-mfn-box p {
margin: 0;
font-size: 0.95rem;
color: var(--wsp-body);
}
/* Preis-Karten */
.wsp-mfn-price {
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-lg);
padding: 1.5rem;
margin-bottom: 1.25rem;
box-shadow: var(--wsp-shadow-sm);
}
.wsp-mfn-price.is-featured {
border-color: var(--wsp-green);
box-shadow: var(--wsp-shadow);
}
.wsp-mfn-price h3 {
margin: 0 0 0.15rem;
font-size: 1.2rem;
}
.wsp-mfn-price__sub {
margin: 0 0 0.75rem;
color: var(--wsp-muted);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.wsp-mfn-price__amount {
margin: 0 0 1rem;
font-size: 1.9rem;
line-height: 1.1;
color: var(--wsp-ink);
letter-spacing: -0.03em;
}
.wsp-mfn-price__amount span {
display: block;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0;
color: var(--wsp-muted);
}
.wsp-mfn-price ul {
margin: 0 0 1.25rem;
padding-left: 1.15em;
font-size: 0.92rem;
}
/* Mehrere Preis-Karten nebeneinander */
.wsp-content .wsp-mfn-price + .wsp-mfn-price {
margin-top: 0;
}
@media (min-width: 720px) {
.wsp-pricegrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
}
.wsp-pricegrid .wsp-mfn-price {
margin-bottom: 0;
}
}
/* Kontaktformular */
.wsp-form {
background: var(--wsp-bg-soft);
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-lg);
padding: clamp(1.25rem, 3vw, 2rem);
}
.wsp-form h2 {
margin-top: 0;
font-size: 1.35rem;
}
.wsp-form__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0 1.25rem;
}
.wsp-field {
margin-bottom: 1.1rem;
}
.wsp-field label {
display: block;
margin-bottom: 0.3rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--wsp-ink);
}
.wsp-field__error {
display: block;
margin-top: 0.3rem;
color: #b3261e;
font-size: 0.85rem;
font-weight: 500;
}
.wsp-field input[aria-invalid="true"],
.wsp-field textarea[aria-invalid="true"],
.wsp-field select[aria-invalid="true"] {
border-color: #b3261e;
}
.wsp-form__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.wsp-form__hint {
margin: 0;
font-size: 0.85rem;
color: var(--wsp-muted);
}
/* Honigtopf — fuer Menschen unsichtbar, fuer Bots erreichbar */
.wsp-hp {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.wsp-formnote {
padding: 1rem 1.25rem;
border-radius: var(--wsp-radius);
margin-bottom: 1.25rem;
font-size: 0.95rem;
}
.wsp-formnote--ok {
background: var(--wsp-green-soft);
border: 1px solid var(--wsp-green);
color: #0b3d25;
}
.wsp-formnote--error {
background: #fdecea;
border: 1px solid #f0b4ae;
color: #8c1d18;
}
/* Suchformular */
.wsp-searchform {
display: flex;
gap: 0.5rem;
}
.wsp-searchform input[type="search"] {
flex: 1;
min-width: 0;
padding: 0.75rem 0.9rem;
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-pill);
font: inherit;
font-size: 1rem;
color: var(--wsp-ink);
}
.wsp-searchform input[type="search"]:focus {
border-color: var(--wsp-green);
}
.wsp-searchform .wsp-btn {
flex: none;
}
/* Blaettern */
.wsp-content .pagination,
.navigation.pagination {
margin-top: 2.5rem;
}
.nav-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.nav-links .page-numbers {
display: inline-grid;
place-items: center;
min-width: 42px;
height: 42px;
padding: 0 0.75rem;
background: var(--wsp-bg-soft);
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-sm);
text-decoration: none;
color: var(--wsp-ink);
font-weight: 600;
}
.nav-links .page-numbers.current {
background: var(--wsp-green);
border-color: var(--wsp-green);
color: #06231a;
}
/* ==========================================================================
14. Responsiv
========================================================================== */
@media (max-width: 1100px) {
.wsp-split__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.wsp-split__media {
grid-row: span 2;
}
.wsp-hero__note--top {
display: none;
}
.wsp-trust {
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
}
@media (max-width: 980px) {
.wsp-hero__inner {
grid-template-columns: minmax(0, 1fr);
text-align: left;
}
.wsp-hero__lead,
.wsp-checks {
max-width: none;
}
.wsp-phone-wrap {
margin-top: 2.5rem;
}
.wsp-phone {
margin-bottom: -2rem;
}
.wsp-hero__note {
display: none;
}
.wsp-hero__watermark {
top: 55%;
right: -18%;
}
.wsp-layout--sidebar {
grid-template-columns: minmax(0, 1fr);
}
}
/*
* Zwischen dem Umbruch auf das Aufklappmenue (860) und dem vollen
* Platzangebot passte die Kopfleiste nicht: Logo, vier Menuepunkte,
* Sprachwahl und Schaltflaeche standen zusammen rund 90 Pixel ueber den Rand.
* Hier ruecken sie enger zusammen, statt die Schaltflaeche zu opfern — sie
* ist der wichtigste Verweis der Seite.
*/
@media (max-width: 1000px) {
.wsp-header__inner {
gap: 0.9rem;
}
.wsp-nav ul {
gap: 1rem;
}
.wsp-nav a {
font-size: 0.9rem;
}
.wsp-header__cta .wsp-btn--sm {
padding: 0.6rem 0.95rem;
font-size: 0.88rem;
}
.wsp-header__cta .wsp-btn svg {
display: none;
}
}
@media (max-width: 860px) {
/* Navigation klappt zu einem Panel auf */
.wsp-navtoggle {
display: inline-flex;
}
.wsp-nav {
position: absolute;
top: calc(100% + 0.5rem);
left: var(--wsp-gutter);
right: var(--wsp-gutter);
display: none;
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
box-shadow: var(--wsp-shadow-lg);
padding: 0.75rem;
}
.wsp-nav.is-open {
display: block;
}
.wsp-nav ul {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.wsp-nav li + li {
border-top: 1px solid var(--wsp-border);
}
.wsp-nav a,
.wsp-header--solid .wsp-nav a,
.wsp-header.is-stuck .wsp-nav a {
display: block;
padding: 0.8rem 0.75rem;
color: var(--wsp-ink);
font-size: 1rem;
font-weight: 600;
}
.wsp-header__cta {
display: none;
}
.wsp-split__inner {
grid-template-columns: minmax(0, 1fr);
}
.wsp-split__media {
min-height: 320px;
margin-inline: calc(-1 * var(--wsp-gutter));
border-radius: 0;
}
.wsp-split__body {
padding-bottom: 1rem;
}
.wsp-footer__top {
flex-direction: column;
align-items: flex-start;
}
.wsp-social {
margin-left: 0;
}
.wsp-footer__hand {
margin-left: 0;
text-align: left;
}
.wsp-footer__hand svg {
margin-left: 0;
}
}
@media (max-width: 560px) {
/*
* Auf schmalen Geraeten teilen sich Logo, Menuknopf und Sprachwahl eine
* Zeile. Ohne diese Anpassung wird die Sprachwahl rechts abgeschnitten.
*/
.wsp-header__inner {
gap: 0.6rem;
}
.wsp-brand {
font-size: 1.05rem;
gap: 0.45rem;
min-width: 0;
}
.wsp-brand__mark {
width: 34px;
height: 34px;
}
.wsp-navtoggle {
width: 40px;
height: 40px;
}
.wsp-lang svg {
width: 20px;
height: 15px;
}
.wsp-hero__actions .wsp-btn {
width: 100%;
}
.wsp-feature {
grid-template-columns: 46px 1fr;
}
.wsp-quote {
position: static;
margin: 0.75rem var(--wsp-gutter) 1rem;
}
.wsp-split__media {
min-height: 0;
display: block;
}
.wsp-split__media img {
position: static;
height: 260px;
}
}
/* ==========================================================================
15. Druck
========================================================================== */
@media print {
.wsp-header,
.wsp-footer,
.wsp-phone-wrap,
.wsp-hero__actions,
.wsp-cta {
display: none !important;
}
.wsp-hero,
.wsp-pagehead {
background: none !important;
color: #000 !important;
}
.wsp-hero h1,
.wsp-pagehead h1 {
color: #000 !important;
}
}
/* ==========================================================================
16. Inhalts-Komponenten
Wiederverwendbare Bausteine fuer den redaktionellen Bereich. Alle Klassen
tragen das Praefix .wsp-c- und funktionieren innerhalb von .wsp-content.
========================================================================== */
/* --- Einleitung ---------------------------------------------------------- */
.wsp-c-intro {
font-size: clamp(1.1rem, 1.8vw, 1.28rem);
line-height: 1.6;
color: var(--wsp-ink);
font-weight: 500;
margin-bottom: 2rem;
}
/* --- Abschnitts-Kopf ----------------------------------------------------- */
.wsp-c-head {
margin-bottom: 1.75rem;
}
.wsp-c-head > *:last-child {
margin-bottom: 0;
}
.wsp-c-head--center {
text-align: center;
max-width: 46rem;
margin-inline: auto;
}
/* --- Raster -------------------------------------------------------------- */
.wsp-c-grid {
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
margin-block: 2rem;
}
.wsp-c-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wsp-c-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.wsp-c-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* --- Karte --------------------------------------------------------------- */
.wsp-c-card {
display: flex;
flex-direction: column;
gap: 0.6rem;
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-lg);
padding: clamp(1.15rem, 2vw, 1.5rem);
box-shadow: var(--wsp-shadow-sm);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/*
* Anklickbare Karte.
*
* Bewusst NICHT als um die ganze Karte: Blockelemente in einem
* ueberstehen wpautop nicht — WordPress setzt dann ein verwaistes
* hinter das oeffnende Tag und der Browser zerlegt den Link. Stattdessen
* traegt die Ueberschrift den Link, dessen ::after die gesamte Karte
* ueberdeckt. Semantik und Bedienung bleiben gleich, das Markup ist gueltig.
*/
.wsp-c-card--link {
position: relative;
}
.wsp-c-card--link h3 a,
.wsp-c-card--link h4 a {
color: inherit;
text-decoration: none;
}
.wsp-c-card--link h3 a::after,
.wsp-c-card--link h4 a::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.wsp-c-card--link:hover {
transform: translateY(-3px);
box-shadow: var(--wsp-shadow);
border-color: var(--wsp-green);
}
/* Fokus sichtbar machen — der Link selbst ist nur die Ueberschrift */
.wsp-c-card--link:focus-within {
outline: 3px solid var(--wsp-green);
outline-offset: 3px;
}
.wsp-c-card--link h3 a:focus-visible,
.wsp-c-card--link h4 a:focus-visible {
outline: none;
}
.wsp-c-card__icon {
width: 46px;
height: 46px;
flex: none;
display: grid;
place-items: center;
background: var(--wsp-green-soft);
color: var(--wsp-green-deep);
border-radius: 13px;
}
.wsp-c-card__icon svg {
width: 23px;
height: 23px;
}
/*
* Symbol ohne Inline-SVG:
* Die Auswahl deckt die im Inhalt gebrauchten Motive ab.
*/
.wsp-c-card__icon[data-icon]::before {
content: "";
width: 23px;
height: 23px;
background: 50% / 23px no-repeat;
}
.wsp-c-card__icon[data-icon="message"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a47' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12c0 4.1-3.8 7.4-8.5 7.4-1 0-2-.2-2.9-.4L4.5 20.5l1.4-4a7 7 0 0 1-2.4-5.2C3.5 7.3 7.3 4 12 4s8.5 3.3 8.5 8Z'/%3E%3C/svg%3E");
}
.wsp-c-card__icon[data-icon="media"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a47' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2.6'/%3E%3Ccircle cx='8.6' cy='9.8' r='1.6'/%3E%3Cpath d='m4.5 16.5 4.2-4a1.8 1.8 0 0 1 2.5 0l4 3.9'/%3E%3C/svg%3E");
}
.wsp-c-card__icon[data-icon="call"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a47' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 4.5h3l1.5 3.7-1.9 1.4a11.6 11.6 0 0 0 5.6 5.6l1.4-1.9 3.7 1.5v3c0 1-.8 1.8-1.8 1.7A15.8 15.8 0 0 1 4.5 6.3c-.1-1 .7-1.8 1.7-1.8Z'/%3E%3C/svg%3E");
}
.wsp-c-card__icon[data-icon="location"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a47' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 10.4c0 5-7 11-7 11s-7-6-7-11a7 7 0 0 1 14 0Z'/%3E%3Ccircle cx='12' cy='10.2' r='2.6'/%3E%3C/svg%3E");
}
.wsp-c-card__icon[data-icon="devices"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a47' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='4.5' width='12.5' height='12' rx='2'/%3E%3Crect x='16.4' y='8.6' width='5' height='11' rx='1.6'/%3E%3C/svg%3E");
}
.wsp-c-card__icon[data-icon="family"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a47' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.4' cy='8' r='2.7'/%3E%3Ccircle cx='16.4' cy='9.4' r='2.2'/%3E%3Cpath d='M3.6 18.6a4.9 4.9 0 0 1 9.7 0M14.8 14.4a4.3 4.3 0 0 1 5.7 4.2'/%3E%3C/svg%3E");
}
.wsp-c-card__icon[data-icon="shield"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a47' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 5.8v5.4c0 4.3 2.9 8.2 7 9.4 4.1-1.2 7-5.1 7-9.4V5.8Z'/%3E%3Cpath d='m9.2 12 2 2 3.6-3.8'/%3E%3C/svg%3E");
}
.wsp-c-card__icon[data-icon="clock"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a47' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.3l3.4 2'/%3E%3C/svg%3E");
}
.wsp-c-card__icon[data-icon="lock"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a47' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10' width='15' height='10.5' rx='2.6'/%3E%3Cpath d='M8.2 10V7.4a3.8 3.8 0 0 1 7.6 0V10'/%3E%3C/svg%3E");
}
.wsp-c-card h3,
.wsp-c-card h4 {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.015em;
}
.wsp-c-card p {
margin: 0;
font-size: 0.95rem;
line-height: 1.55;
color: var(--wsp-muted);
}
.wsp-c-card p + p {
margin-top: 0.5rem;
}
/* Karte mit Pfeil als Hinweis auf einen Link */
/* Schaltflaechen in Karten nehmen die volle Breite ein — im Raster wirken
die Pakete dadurch gleichwertig und die Flaeche ist leichter zu treffen. */
.wsp-c-card .wsp-btn {
width: 100%;
margin-top: auto;
}
.wsp-c-card__more {
margin-top: auto;
padding-top: 0.6rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--wsp-green-deep);
font-size: 0.92rem;
font-weight: 700;
}
.wsp-c-card__more svg {
width: 1em;
height: 1em;
transition: transform 0.18s ease;
}
.wsp-c-card--link:hover .wsp-c-card__more svg {
transform: translateX(3px);
}
/* --- Hinweisboxen -------------------------------------------------------- */
/*
* Das Symbol kommt aus CSS, damit im Seiteninhalt kein Inline-SVG noetig ist:
*
*/
.wsp-c-note {
display: grid;
grid-template-columns: 26px 1fr;
gap: 0.9rem;
margin-block: 1.75rem;
padding: 1.1rem 1.35rem;
border-radius: var(--wsp-radius);
border: 1px solid var(--wsp-border);
border-left-width: 4px;
background: var(--wsp-bg-soft);
font-size: 0.96rem;
line-height: 1.6;
}
.wsp-c-note::before {
content: "";
width: 26px;
height: 26px;
margin-top: 0.05rem;
background: 50% / 24px no-repeat;
}
.wsp-c-note > *:first-child { margin-top: 0; }
.wsp-c-note > *:last-child { margin-bottom: 0; }
.wsp-c-note > div > *:first-child { margin-top: 0; }
.wsp-c-note > div > *:last-child { margin-bottom: 0; }
.wsp-c-note strong:first-child {
display: block;
margin-bottom: 0.2rem;
color: var(--wsp-ink);
}
/* Sachhinweis */
.wsp-c-note--info {
border-color: #cfe3f5;
border-left-color: #3a7ca8;
background: #f2f8fd;
}
.wsp-c-note--info::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a7ca8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.8v.4'/%3E%3C/svg%3E");
}
/* Tipp / Empfehlung */
.wsp-c-note--tip {
border-color: var(--wsp-green-soft);
border-left-color: var(--wsp-green);
background: var(--wsp-green-softer);
}
.wsp-c-note--tip::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a47' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.5.4.8 1 .8 1.6v.6h5.6v-.6c0-.6.3-1.2.8-1.6A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");
}
/* Warnung / rechtlicher Hinweis */
.wsp-c-note--warn {
border-color: #f6dfae;
border-left-color: #d99b21;
background: #fdf7ea;
}
.wsp-c-note--warn::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8730d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5 2.8 20h18.4Z'/%3E%3Cpath d='M12 10v4M12 17.2v.3'/%3E%3C/svg%3E");
}
/* --- Schritt-fuer-Schritt ------------------------------------------------ */
.wsp-c-steps {
list-style: none;
counter-reset: wsp-c-step;
margin-block: 2rem;
padding: 0;
display: grid;
gap: 0.9rem;
}
.wsp-c-steps > li {
counter-increment: wsp-c-step;
display: grid;
grid-template-columns: 40px 1fr;
gap: 1rem;
align-items: start;
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
padding: 1.1rem 1.3rem;
}
.wsp-c-steps > li::before {
content: counter(wsp-c-step);
width: 40px;
height: 40px;
display: grid;
place-items: center;
background: var(--wsp-green);
color: #06231a;
border-radius: 50%;
font-size: 0.98rem;
font-weight: 800;
}
.wsp-c-steps h3 {
margin: 0 0 0.25rem;
font-size: 1.05rem;
}
.wsp-c-steps p {
margin: 0;
font-size: 0.95rem;
color: var(--wsp-muted);
}
/* --- Merkmalslisten ------------------------------------------------------ */
.wsp-c-list {
list-style: none;
margin-block: 1.5rem;
padding: 0;
display: grid;
gap: 0.55rem;
}
.wsp-c-list--2 {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 0.55rem 1.75rem;
}
/*
* Das Haken-Symbol liegt absolut, der Text bleibt normaler Fliesstext.
* Mit "display: grid" auf dem wuerde jedes Kind zu einer eigenen
* Rasterzelle — ein Eintrag wie "GPS-Standort, Standortverlauf"
* zerfiele dann in mehrere Zeilen, die sich ueberlagern.
*/
.wsp-c-list > li {
position: relative;
padding-left: 1.95rem;
font-size: 0.98rem;
line-height: 1.5;
min-height: 1.5rem;
}
.wsp-c-list > li::before {
content: "";
position: absolute;
left: 0;
top: 0.08em;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--wsp-green-soft) 50% / 13px no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a47' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
/* Gegenteil: nicht enthalten */
.wsp-c-list > li.is-off {
color: var(--wsp-muted);
}
.wsp-c-list > li.is-off::before {
background: #f0f2f1 50% / 11px no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9a92' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
/* Links in Merkmalslisten sollen den Zeilenfluss nicht sprengen */
.wsp-c-list > li a {
overflow-wrap: anywhere;
}
/* --- Kennzahlen ---------------------------------------------------------- */
.wsp-c-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
margin-block: 2rem;
padding: 0;
list-style: none;
}
.wsp-c-stats > li {
background: var(--wsp-bg-soft);
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
padding: 1.15rem 1.25rem;
text-align: center;
}
.wsp-c-stats b {
display: block;
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.1;
color: var(--wsp-ink);
letter-spacing: -0.03em;
}
.wsp-c-stats span {
display: block;
margin-top: 0.25rem;
font-size: 0.87rem;
color: var(--wsp-muted);
}
/* --- Fragen und Antworten ------------------------------------------------ */
.wsp-c-faq {
margin-block: 2rem;
display: grid;
gap: 0.7rem;
}
.wsp-c-faq details {
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
overflow: hidden;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.wsp-c-faq details[open] {
border-color: var(--wsp-green);
box-shadow: var(--wsp-shadow-sm);
}
.wsp-c-faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.3rem;
cursor: pointer;
font-weight: 700;
font-size: 1.02rem;
color: var(--wsp-ink);
line-height: 1.45;
list-style: none;
}
.wsp-c-faq summary::-webkit-details-marker { display: none; }
.wsp-c-faq summary::after {
content: "";
flex: none;
width: 20px;
height: 20px;
background: 50% / 20px no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a47' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
transition: transform 0.2s ease;
}
.wsp-c-faq details[open] summary::after {
transform: rotate(180deg);
}
.wsp-c-faq summary:hover {
background: var(--wsp-green-softer);
}
.wsp-c-faq__body {
padding: 0 1.3rem 1.2rem;
font-size: 0.97rem;
line-height: 1.65;
color: var(--wsp-body);
}
.wsp-c-faq__body > *:first-child { margin-top: 0; }
.wsp-c-faq__body > *:last-child { margin-bottom: 0; }
/* --- Vergleichstabelle --------------------------------------------------- */
.wsp-c-tablewrap {
margin-block: 2rem;
overflow-x: auto;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
-webkit-overflow-scrolling: touch;
}
.wsp-c-tablewrap table {
width: 100%;
margin: 0;
border-collapse: collapse;
border: 0;
font-size: 0.95rem;
min-width: 32rem;
}
.wsp-c-tablewrap th,
.wsp-c-tablewrap td {
padding: 0.85rem 1rem;
border: 0;
border-bottom: 1px solid var(--wsp-border);
text-align: left;
vertical-align: top;
}
.wsp-c-tablewrap thead th {
background: var(--wsp-ink);
color: #fff;
font-weight: 700;
letter-spacing: -0.01em;
white-space: nowrap;
}
.wsp-c-tablewrap tbody tr:last-child th,
.wsp-c-tablewrap tbody tr:last-child td {
border-bottom: 0;
}
.wsp-c-tablewrap tbody tr:nth-child(even) {
background: var(--wsp-bg-soft);
}
.wsp-c-tablewrap tbody th {
font-weight: 600;
color: var(--wsp-ink);
}
/* Ja/Nein-Spalten der Vergleichstabelle.
Das Symbol kommt aus CSS; der Sinn steht als verborgener Text im Markup,
damit Screenreader und Suchmaschinen ihn weiterhin erfassen. */
.wsp-c-tablewrap td.is-yes,
.wsp-c-tablewrap td.is-no {
text-align: center;
width: 6.5rem;
white-space: nowrap;
}
/*
* Als Blockelement zentriert statt ueber vertical-align: der erklaerende
* Text daneben ist absolut positioniert, die Zelle enthaelt also nur dieses
* Symbol.
*/
.wsp-c-tablewrap td.is-yes::before,
.wsp-c-tablewrap td.is-no::before {
content: "";
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background-repeat: no-repeat;
background-position: 50%;
background-size: 32px 32px;
}
.wsp-c-tablewrap td.is-yes::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 12.5 5.5 5.5L20.5 6.5'/%3E%3C/svg%3E");
}
.wsp-c-tablewrap td.is-no::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3b3ac' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
/* Hervorgehobene Zeile: die guenstigste Laufzeit.
Muss den Zebrastreifen ueberschreiben, deshalb dieselbe Spezifitaet und
weiter unten im Stylesheet. */
.wsp-c-tablewrap tbody tr.is-featured > th,
.wsp-c-tablewrap tbody tr.is-featured > td {
background: var(--wsp-green-softer);
box-shadow: inset 0 0 0 1px rgba(69, 221, 139, 0.35);
}
.wsp-c-tablewrap tbody tr.is-featured > th {
position: relative;
box-shadow: inset 3px 0 0 var(--wsp-green), inset 0 0 0 1px rgba(69, 221, 139, 0.35);
}
/* Hervorgehobene Spalte */
.wsp-c-tablewrap th.is-featured,
.wsp-c-tablewrap td.is-featured {
background: var(--wsp-green-softer);
}
.wsp-c-tablewrap thead th.is-featured {
background: var(--wsp-green-deep);
}
/* --- Handlungsaufruf im Textfluss ---------------------------------------- */
.wsp-c-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
margin-block: 2.25rem;
padding: clamp(1.35rem, 3vw, 2rem);
border-radius: var(--wsp-radius-lg);
background:
radial-gradient(70% 120% at 88% 15%, rgba(69, 221, 139, 0.2), transparent 62%),
linear-gradient(140deg, var(--wsp-dark-3), var(--wsp-dark));
color: #fff;
}
.wsp-c-cta__text {
flex: 1 1 18rem;
}
.wsp-c-cta h2,
.wsp-c-cta h3 {
margin: 0 0 0.35rem;
color: #fff;
font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}
.wsp-c-cta p {
margin: 0;
color: var(--wsp-on-dark-muted);
font-size: 0.97rem;
}
.wsp-c-cta .wsp-btn {
flex: none;
}
/* --- Vertrauens-Zeile ---------------------------------------------------- */
.wsp-c-trust {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 1.1rem;
margin-block: 2rem;
padding: 0;
list-style: none;
}
.wsp-c-trust > li {
display: grid;
grid-template-columns: 34px 1fr;
gap: 0.75rem;
align-items: center;
font-size: 0.93rem;
line-height: 1.4;
color: var(--wsp-body);
}
.wsp-c-trust svg {
width: 34px;
height: 34px;
color: var(--wsp-green-deep);
}
.wsp-c-trust strong {
display: block;
color: var(--wsp-ink);
}
/* --- Interne Weiterfuehrung ---------------------------------------------- */
.wsp-c-next {
margin-block: 2.5rem;
padding-top: 1.75rem;
border-top: 1px solid var(--wsp-border);
}
.wsp-c-next h2 {
font-size: 1.25rem;
margin-bottom: 1rem;
}
/* --- Bild mit Text ------------------------------------------------------- */
.wsp-c-media {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: center;
margin-block: 2.5rem;
}
.wsp-c-media img {
border-radius: var(--wsp-radius-lg);
width: 100%;
}
.wsp-c-media__body > *:first-child { margin-top: 0; }
.wsp-c-media__body > *:last-child { margin-bottom: 0; }
.wsp-c-media--flip .wsp-c-media__media { order: 2; }
/* --- Abschnittstrenner --------------------------------------------------- */
.wsp-c-section {
margin-block: clamp(2.5rem, 5vw, 4rem);
}
.wsp-c-section--soft {
background: var(--wsp-bg-soft);
border-radius: var(--wsp-radius-xl);
padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.wsp-c-section > *:first-child { margin-top: 0; }
.wsp-c-section > *:last-child { margin-bottom: 0; }
/* --- Formularzusatz: Einwilligung ---------------------------------------- */
.wsp-field--check label {
display: grid;
grid-template-columns: 22px 1fr;
gap: 0.65rem;
align-items: start;
font-weight: 400;
font-size: 0.92rem;
line-height: 1.5;
color: var(--wsp-body);
cursor: pointer;
}
.wsp-field--check input[type="checkbox"] {
width: 20px;
height: 20px;
margin-top: 0.12rem;
accent-color: var(--wsp-green-deep);
cursor: pointer;
}
/* --- Responsiv ----------------------------------------------------------- */
@media (max-width: 720px) {
.wsp-c-media,
.wsp-c-media--flip {
grid-template-columns: minmax(0, 1fr);
}
.wsp-c-media--flip .wsp-c-media__media { order: 0; }
.wsp-c-cta {
flex-direction: column;
align-items: flex-start;
}
.wsp-c-cta .wsp-btn {
width: 100%;
}
.wsp-c-steps > li {
grid-template-columns: 34px 1fr;
gap: 0.8rem;
padding: 1rem;
}
.wsp-c-steps > li::before {
width: 34px;
height: 34px;
font-size: 0.9rem;
}
.wsp-c-note {
grid-template-columns: 24px 1fr;
gap: 0.7rem;
padding: 1rem 1.1rem;
}
.wsp-c-note svg { width: 20px; height: 20px; }
}
/* ==========================================================================
17. Illustrationen
Das fertige Bild und der Platzhalter, solange keines hinterlegt ist.
Der Platzhalter erscheint ausschliesslich fuer angemeldete Redakteure.
========================================================================== */
.wsp-c-illu {
margin-block: clamp(2rem, 4vw, 3rem);
}
.wsp-c-illu img {
width: 100%;
height: auto;
border-radius: var(--wsp-radius-lg);
}
.wsp-c-illu figcaption {
margin-top: 0.75rem;
font-size: 0.88rem;
line-height: 1.5;
color: var(--wsp-muted);
text-align: center;
}
/* --- Bild neben Inhalt --------------------------------------------------- */
/*
* Auf breiten Schirmen steht die Illustration neben dem zugehoerigen Inhalt
* statt darueber, jede Spalte zur Haelfte. Darunter greift nichts davon: die
* Spalten laufen wieder untereinander, weil nebeneinander auf dem Telefon
* beide Seiten zu schmal wuerden.
*/
@media (min-width: 900px) {
.wsp-c-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.75rem, 3.5vw, 3rem);
align-items: center;
margin-block: clamp(2rem, 4vw, 3rem);
}
/*
* Neben den Aufklappern wird oben ausgerichtet. Mittig gesetzt wuerde das
* Bild bei jeder geoeffneten Frage ein Stueck nach unten wandern.
*/
.wsp-c-split--top {
align-items: start;
}
/*
* Die Bausteine bringen eigene Aussenabstaende mit. Zwischen zwei Spalten
* erzeugen die nur schiefe Oberkanten.
*/
.wsp-c-split > *,
.wsp-c-split .wsp-c-illu {
margin-block: 0;
}
/* Im halb so breiten Feld stehen die Kennzahlen untereinander. */
.wsp-c-split .wsp-c-stats {
grid-template-columns: 1fr;
}
}
/* --- Platzhalter --------------------------------------------------------- */
.wsp-c-illu--todo {
border: 2px dashed var(--wsp-green);
border-radius: var(--wsp-radius-lg);
background: var(--wsp-green-softer);
padding: 1rem;
}
.wsp-c-illu__frame {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 100%;
padding: 1.5rem;
border-radius: var(--wsp-radius);
background:
repeating-linear-gradient(
-45deg,
rgba(15, 122, 71, 0.05) 0 10px,
transparent 10px 20px
),
#fff;
text-align: center;
}
.wsp-c-illu__file {
margin: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.95rem;
font-weight: 700;
color: var(--wsp-green-deep);
overflow-wrap: anywhere;
}
.wsp-c-illu__hint {
margin: 0;
max-width: 34rem;
font-size: 0.85rem;
line-height: 1.5;
color: var(--wsp-muted);
}
/* Aufklappbarer Bildauftrag */
.wsp-c-illu__prompt {
margin-top: 0.9rem;
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
overflow: hidden;
}
.wsp-c-illu__prompt summary {
padding: 0.7rem 1rem;
cursor: pointer;
font-size: 0.9rem;
font-weight: 700;
color: var(--wsp-ink);
list-style: none;
}
.wsp-c-illu__prompt summary::-webkit-details-marker {
display: none;
}
.wsp-c-illu__prompt summary::before {
content: "＋ ";
color: var(--wsp-green-deep);
}
.wsp-c-illu__prompt[open] summary::before {
content: "− ";
}
.wsp-c-illu__prompt summary:hover {
background: var(--wsp-green-softer);
}
.wsp-c-illu__prompt pre {
margin: 0;
padding: 0 1rem 1rem;
/* Umbruch statt Scrollbalken: der Text soll zum Markieren vollstaendig
sichtbar sein. */
white-space: pre-wrap;
overflow-wrap: anywhere;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.82rem;
line-height: 1.6;
color: var(--wsp-body);
user-select: all;
}
@media (max-width: 560px) {
.wsp-c-illu__frame {
padding: 1.1rem 0.8rem;
}
.wsp-c-illu__prompt pre {
font-size: 0.78rem;
}
}
/* ==========================================================================
18. Ratgeber
Uebersicht, Themenseiten, Einzelbeitrag und die Bausteine, die im
Beitragstext vorkommen. Zwei Sprachen, dieselben Klassen.
========================================================================== */
/* --- Kopf der Uebersicht ------------------------------------------------- */
.wsp-cattabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.6rem;
}
.wsp-cattabs__item {
display: inline-block;
padding: 0.45rem 0.95rem;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-pill);
background: #fff;
color: var(--wsp-body);
font-size: 0.88rem;
font-weight: 500;
text-decoration: none;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wsp-cattabs__item:hover,
.wsp-cattabs__item:focus-visible {
border-color: var(--wsp-green);
color: var(--wsp-ink);
}
.wsp-cattabs__item.is-active {
background: var(--wsp-ink);
border-color: var(--wsp-ink);
color: #fff;
}
/* --- Angaben am Beitrag -------------------------------------------------- */
.wsp-postmeta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 0.7rem;
font-size: 0.82rem;
color: var(--wsp-muted);
}
.wsp-postmeta__sep {
color: var(--wsp-muted);
opacity: 0.45;
}
.wsp-tag {
display: inline-block;
padding: 0.2rem 0.65rem;
border-radius: var(--wsp-radius-pill);
background: var(--wsp-green-soft);
color: var(--wsp-green-deep);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
}
a.wsp-tag:hover,
a.wsp-tag:focus-visible {
background: var(--wsp-green);
color: var(--wsp-dark);
}
/* --- Vorschaukarten ------------------------------------------------------ */
.wsp-postgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.wsp-postcard {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-lg);
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.wsp-postcard:hover {
border-color: var(--wsp-green);
box-shadow: var(--wsp-shadow);
transform: translateY(-2px);
}
/*
* Die Klickflaeche liegt als Ueberzug ueber der ganzen Karte, der Link selbst
* sitzt aber in der Ueberschrift. Ein um Blockelemente ueberlebt wpautop
* nicht — daraus wurden auf dieser Website schon einmal zerlegte Karten.
*/
.wsp-postcard__title a::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.wsp-postcard:focus-within {
outline: 3px solid var(--wsp-green);
outline-offset: 3px;
}
.wsp-postcard__media {
border-bottom: 1px solid var(--wsp-border);
}
/*
* Die Illustrationen sind oben und unten auf das Motiv beschnitten und
* deshalb unterschiedlich hoch — von 1600x434 bis 1600x869. Ein fester
* Ausschnitt („cover") wuerde bei den flachen Motiven die Haelfte abschneiden.
* Sie werden daher vollstaendig in ein einheitliches Feld eingepasst; die
* weiche Flaeche dahinter fuellt den Rest.
*/
.wsp-postcard__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: contain;
padding: 0.8rem 1rem;
}
.wsp-postcard__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 1.3rem 1.4rem 1.5rem;
}
.wsp-postcard__title {
margin: 0 0 0.5rem;
font-size: 1.12rem;
line-height: 1.3;
letter-spacing: -0.015em;
}
.wsp-postcard__title a {
color: var(--wsp-ink);
text-decoration: none;
}
.wsp-postcard__body p {
margin: 0 0 1rem;
font-size: 0.92rem;
line-height: 1.6;
color: var(--wsp-body);
}
.wsp-postcard .wsp-c-card__more {
margin-top: auto;
}
/* Hervorgehobener Beitrag: quer statt hochkant. */
.wsp-postcard--featured {
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 820px) {
.wsp-postcard--featured {
display: grid;
grid-template-columns: 1.15fr 1fr;
align-items: stretch;
}
.wsp-postcard--featured .wsp-postcard__media {
border-bottom: 0;
border-right: 1px solid var(--wsp-border);
}
.wsp-postcard--featured .wsp-postcard__media img {
height: 100%;
aspect-ratio: auto;
padding: clamp(1.25rem, 2.5vw, 2rem);
}
.wsp-postcard--featured .wsp-postcard__body {
justify-content: center;
padding: clamp(1.6rem, 3vw, 2.4rem);
}
.wsp-postcard--featured .wsp-postcard__title {
font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}
.wsp-postcard--featured .wsp-postcard__body p {
font-size: 1rem;
}
}
/* --- Blaetterwerk -------------------------------------------------------- */
.wsp-pagination {
margin-top: clamp(2rem, 4vw, 3rem);
}
.wsp-pagination .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.45rem;
}
.wsp-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.6rem;
height: 2.6rem;
padding: 0 0.8rem;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-sm);
background: #fff;
color: var(--wsp-body);
font-size: 0.92rem;
font-weight: 500;
text-decoration: none;
}
.wsp-pagination a.page-numbers:hover,
.wsp-pagination a.page-numbers:focus-visible {
border-color: var(--wsp-green);
color: var(--wsp-ink);
}
.wsp-pagination .page-numbers.current {
background: var(--wsp-ink);
border-color: var(--wsp-ink);
color: #fff;
}
.wsp-pagination .page-numbers.dots {
border-color: transparent;
background: none;
}
/* --- Kopf des Beitrags --------------------------------------------------- */
.wsp-posthead__inner {
display: grid;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
}
@media (min-width: 900px) {
.wsp-posthead__inner {
grid-template-columns: 1.3fr 1fr;
}
}
.wsp-posthead__tag {
margin: 0 0 0.9rem;
}
.wsp-posthead__lead {
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 1.1rem !important;
}
.wsp-posthead .wsp-postmeta {
margin: 0;
color: rgba(255, 255, 255, 0.6);
}
.wsp-posthead .wsp-postmeta__sep {
color: rgba(255, 255, 255, 0.35);
opacity: 1;
}
.wsp-posthead__media img {
display: block;
width: 100%;
height: auto;
border-radius: var(--wsp-radius-lg);
}
/* --- Zweispaltiger Beitrag ----------------------------------------------- */
.wsp-post__layout {
display: grid;
/*
* Ohne minmax(0, …) bekommt die Spalte die Breite ihres breitesten
* Inhalts. Die Vergleichstabellen im Beitrag sind breiter als ein
* Telefonschirm — die Seite lief dadurch seitlich ueber.
*/
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.wsp-post__card {
min-width: 0;
}
/*
* Die Sprungmarken stehen im Markup vor dem Text: auf dem Telefon gehoert ein
* Inhaltsverzeichnis nach oben, und fuer Screenreader ist es als Wegweiser
* vor dem Artikel richtig aufgehoben. Auf breiten Schirmen rutscht es per
* Raster in die rechte Spalte und bleibt beim Scrollen stehen.
*/
@media (min-width: 1000px) {
.wsp-post__layout {
grid-template-columns: minmax(0, 1fr) 320px;
align-items: start;
}
.wsp-post__card {
grid-column: 1;
grid-row: 1;
}
.wsp-post__aside {
grid-column: 2;
grid-row: 1;
position: sticky;
top: 6rem;
}
.wsp-post__aside .wsp-c-toc ol {
max-height: calc(100vh - 18rem);
overflow-y: auto;
}
}
.wsp-post__card {
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-lg);
padding: clamp(1.4rem, 4vw, 3rem);
}
/* Die Anker duerfen nicht unter der stehenden Kopfleiste landen. */
.wsp-postbody h2,
.wsp-postbody h3 {
scroll-margin-top: 6rem;
}
/* Initial im ersten Absatz — ein rein redaktionelles Signal fuer den Anfang. */
.wsp-postbody > p:first-child::first-letter {
float: left;
margin: 0.06em 0.1em 0 0;
font-size: 3.1em;
line-height: 0.8;
font-weight: 700;
color: var(--wsp-green-deep);
}
/* --- Sprungmarken in der Seitenspalte ------------------------------------ */
.wsp-post__aside .wsp-c-toc {
margin-block: 0;
background: #fff;
}
.wsp-c-toc a.is-active {
color: var(--wsp-ink);
font-weight: 600;
border-bottom-color: var(--wsp-green);
}
.wsp-c-toc li:has(a.is-active)::before {
background: var(--wsp-green);
color: var(--wsp-dark);
}
/* --- Teilen -------------------------------------------------------------- */
.wsp-share {
margin-top: 1.1rem;
padding: 1.1rem 1.3rem 1.2rem;
background: #fff;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
}
.wsp-share__title {
margin: 0 0 0.75rem;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wsp-muted);
}
.wsp-share ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.wsp-share__link {
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--wsp-border);
border-radius: 50%;
background: var(--wsp-bg-soft);
color: var(--wsp-ink);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wsp-share__link svg {
width: 18px;
height: 18px;
}
.wsp-share__link:hover,
.wsp-share__link:focus-visible {
background: var(--wsp-green);
border-color: var(--wsp-green);
color: var(--wsp-dark);
}
.wsp-share__link.is-done {
background: var(--wsp-green);
border-color: var(--wsp-green);
color: var(--wsp-dark);
}
.wsp-post__foot {
margin-top: clamp(2rem, 4vw, 3rem);
padding-top: 1.2rem;
border-top: 1px solid var(--wsp-border);
font-size: 0.85rem;
color: var(--wsp-muted);
}
.wsp-post__foot p {
margin: 0;
}
/* --- Vor und zurueck ----------------------------------------------------- */
.wsp-postnav__inner {
display: grid;
gap: 1rem;
}
@media (min-width: 720px) {
.wsp-postnav__inner {
grid-template-columns: 1fr 1fr;
}
}
.wsp-postnav__item {
display: block;
padding: 1.1rem 1.3rem;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
background: #fff;
text-decoration: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.wsp-postnav__item:hover,
.wsp-postnav__item:focus-visible {
border-color: var(--wsp-green);
box-shadow: var(--wsp-shadow-sm);
}
.wsp-postnav__item span {
display: block;
margin-bottom: 0.25rem;
font-size: 0.78rem;
color: var(--wsp-muted);
}
.wsp-postnav__item strong {
display: block;
color: var(--wsp-ink);
font-size: 0.98rem;
line-height: 1.35;
}
.wsp-postnav__item--next {
text-align: right;
}
/* --- Bausteine im Beitragstext ------------------------------------------- */
.wsp-c-toc {
margin-block: clamp(1.75rem, 3vw, 2.5rem);
padding: 1.3rem 1.5rem 1.4rem;
background: var(--wsp-bg-soft);
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius);
}
.wsp-c-toc__title {
margin: 0 0 0.7rem;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wsp-muted);
}
.wsp-c-toc ol {
margin: 0;
padding: 0;
list-style: none;
counter-reset: wsp-toc;
display: grid;
gap: 0.42rem;
}
.wsp-c-toc li {
counter-increment: wsp-toc;
padding-left: 1.85rem;
position: relative;
font-size: 0.95rem;
line-height: 1.45;
}
.wsp-c-toc li::before {
content: counter(wsp-toc);
position: absolute;
left: 0;
top: 0.05em;
width: 1.35rem;
height: 1.35rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--wsp-green-soft);
color: var(--wsp-green-deep);
font-size: 0.72rem;
font-weight: 700;
}
.wsp-c-toc a {
color: var(--wsp-body);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.wsp-c-toc a:hover,
.wsp-c-toc a:focus-visible {
color: var(--wsp-ink);
border-bottom-color: var(--wsp-green);
}
.wsp-c-quote {
margin-block: clamp(1.75rem, 3vw, 2.5rem);
padding: 0.2rem 0 0.2rem 1.4rem;
border-left: 4px solid var(--wsp-green);
font-size: 1.12rem;
line-height: 1.55;
color: var(--wsp-ink);
}
.wsp-c-quote p {
margin: 0 0 0.6rem;
}
.wsp-c-quote cite {
display: block;
font-size: 0.86rem;
font-style: normal;
color: var(--wsp-muted);
}
.wsp-c-fact {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 1.1rem;
margin-block: clamp(1.75rem, 3vw, 2.5rem);
padding: 1.25rem 1.5rem;
background: var(--wsp-dark);
border-radius: var(--wsp-radius);
color: #fff;
}
.wsp-c-fact b {
font-size: clamp(1.7rem, 4vw, 2.3rem);
line-height: 1;
color: var(--wsp-green);
letter-spacing: -0.03em;
}
.wsp-c-fact span {
font-size: 0.97rem;
line-height: 1.5;
color: var(--wsp-on-dark-muted);
}
@media (max-width: 560px) {
.wsp-c-fact {
grid-template-columns: 1fr;
gap: 0.5rem;
}
}
/* ==========================================================================
19. Preisanzeige in den Paketkarten
Der Monatspreis auf Jahresbasis ist der Anker; der Monatstarif steht als
Vergleichswert daneben. So wird aus „ab 59,99 €" ein Betrag, den man
einordnen kann.
========================================================================== */
.wsp-price {
margin: 0.1rem 0 0.2rem;
}
.wsp-price__main {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.3rem;
margin: 0;
}
.wsp-price__from {
font-size: 0.95rem;
color: var(--wsp-muted);
}
.wsp-price__amount {
font-size: clamp(2.1rem, 4.5vw, 2.7rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.035em;
color: var(--wsp-ink);
}
.wsp-price__unit {
font-size: 1rem;
font-weight: 600;
color: var(--wsp-body);
}
.wsp-price__save {
display: inline-block;
margin: 0.75rem 0 0;
padding: 0.28rem 0.75rem;
border-radius: var(--wsp-radius-pill);
background: var(--wsp-green-soft);
color: var(--wsp-green-deep);
font-size: 0.82rem;
font-weight: 600;
}
.wsp-price__save s {
color: var(--wsp-muted);
font-weight: 500;
text-decoration-thickness: 1px;
}
.wsp-price__note {
margin: 0.6rem 0 0;
font-size: 0.8rem;
line-height: 1.45;
color: var(--wsp-muted);
}
/* --- Produktbilder in Karten und im Textfluss ---------------------------- */
.wsp-c-card .wsp-c-illu {
margin: 0 0 0.9rem;
}
.wsp-c-card .wsp-c-illu img {
aspect-ratio: 4 / 3;
object-fit: contain;
}
/*
* Solange kein Produktbild hinterlegt ist, traegt die Karte ihr Symbol.
* Kommt das Bild dazu, waeren beide zusammen zu viel.
*/
.wsp-c-card:has(.wsp-c-illu) .wsp-c-card__icon {
display: none;
}
.wsp-c-media__media .wsp-c-illu {
margin: 0;
}
/* --- Paketkarte ---------------------------------------------------------- */
/*
* Zwei Produktvarianten, die auf einen Blick unterscheidbar sein muessen.
*
* Die Regeln haengen an .wsp-plan statt nur an der eigenen Klasse: die
* Kartenbasis setzt ueber „.wsp-c-card h3" und „.wsp-c-card p" bereits
* Groesse, Abstand und Farbe, und das ist mit (0,1,1) spezifischer als eine
* einzelne Klasse.
* Deshalb steht der Variantenname gross und ganz oben — vor dem Bild. Zuvor
* lag er klein darunter, sodass man erst an einer grossen Abbildung vorbei
* musste, bevor klar wurde, worum es geht.
*/
.wsp-plan {
position: relative;
gap: 0;
padding: clamp(1.5rem, 3vw, 2.1rem);
}
.wsp-plan:hover {
transform: none;
}
/* Die empfohlene Variante bekommt Rahmen, Tiefe und eine Auszeichnung. */
.wsp-plan--featured {
border-color: var(--wsp-green-deep);
box-shadow: var(--wsp-shadow);
}
.wsp-plan .wsp-plan__badge {
position: absolute;
top: clamp(1.5rem, 3vw, 2.1rem);
right: clamp(1.5rem, 3vw, 2.1rem);
margin: 0;
padding: 0.3rem 0.85rem;
border-radius: var(--wsp-radius-pill);
background: var(--wsp-green-deep);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.wsp-plan .wsp-plan__eyebrow {
margin: 0 0 0.4rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wsp-green-deep);
}
.wsp-plan .wsp-plan__name {
margin: 0 0 0.6rem;
font-size: clamp(1.8rem, 3.4vw, 2.25rem);
line-height: 1;
letter-spacing: -0.035em;
color: var(--wsp-ink);
}
/* Der Markenname ordnet sich der Variante unter — gesucht wird die Variante. */
.wsp-plan .wsp-plan__name span {
display: block;
margin-bottom: 0.2rem;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
color: var(--wsp-muted);
}
.wsp-plan .wsp-plan__claim {
margin: 0 0 1.2rem;
font-size: 0.97rem;
line-height: 1.5;
color: var(--wsp-body);
}
/*
* Feste Bildhoehe statt Seitenverhaeltnis: beide Karten sollen exakt gleich
* hohe Abbildungen tragen, und das Bild darf die Karte nicht dominieren.
*/
.wsp-plan .wsp-c-illu {
margin: 0 0 1.3rem;
}
.wsp-plan .wsp-c-illu img {
width: 100%;
height: 185px;
aspect-ratio: auto;
object-fit: contain;
}
.wsp-plan .wsp-price {
margin: 0 0 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--wsp-border);
}
.wsp-plan .wsp-c-list {
margin: 0;
}
.wsp-plan .wsp-plan__note {
margin: 1rem 0 1.3rem;
font-size: 0.8rem;
color: var(--wsp-muted);
}
.wsp-plan .wsp-plan__cta {
margin-top: auto;
}
/* ==========================================================================
20. Hero auf schmalen Geraeten
Der Hero ist auf dem Telefon einspaltig und dadurch lang. Die Abstaende
stammen aus dem zweispaltigen Entwurf und wirken dort zu grosszuegig —
allein zwischen den Bloecken lagen rund 330 Pixel. Hier sind sie gestrafft,
ohne dass die Bloecke zusammenkleben.
========================================================================== */
@media (max-width: 720px) {
.wsp-hero {
/* Oben bleibt genug, damit die feste Kopfleiste nicht drueberliegt. */
padding-top: 5.5rem;
padding-bottom: 1.5rem;
}
.wsp-hero__inner {
gap: 1.25rem;
}
.wsp-hero__lead {
margin-bottom: 1.25rem;
}
.wsp-checks {
margin-bottom: 1.35rem;
}
.wsp-hero__actions {
margin-bottom: 1.5rem;
}
.wsp-trust {
padding-top: 1.1rem;
}
.wsp-phone-wrap {
margin-top: 1.25rem;
}
}
/* ==========================================================================
21. Bedienbare Produktdemo im Hero
Das Smartphone aus Abschnitt 8 wird hier zur Demo erweitert: Chatliste,
Verlauf und ein Auswertungsfenster. Animiert wird nur mit transform und
opacity — alles andere wuerde ein Umbrechen ausloesen.
========================================================================== */
/* --- Buehne fuer die zwei Ansichten -------------------------------------- */
.wsp-phone__stage {
position: relative;
flex: 1;
overflow: hidden;
}
.wsp-phone__view {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
background: #0b1512;
}
/* Ohne JavaScript bleibt die Uebersicht schlicht stehen. */
.wsp-phone.is-live .wsp-phone__view {
transition: transform 0.26s ease, opacity 0.26s ease;
will-change: transform;
}
.wsp-phone__view--thread {
transform: translateX(100%);
}
.wsp-phone.is-thread .wsp-phone__view--list {
transform: translateX(-24%);
opacity: 0.25;
}
.wsp-phone.is-thread .wsp-phone__view--thread {
transform: translateX(0);
}
/* --- Chatzeile als Schaltflaeche ----------------------------------------- */
.wsp-phone__row {
list-style: none;
}
.wsp-phone.is-live button.wsp-chat {
width: 100%;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
.wsp-phone.is-live button.wsp-chat:hover,
.wsp-phone.is-live button.wsp-chat:focus-visible {
background: rgba(255, 255, 255, 0.07);
}
.wsp-phone.is-live button.wsp-chat:active {
background: rgba(255, 255, 255, 0.12);
}
.wsp-chat__body {
min-width: 0;
}
/* Auffaellige Vorschauen — der eigentliche Koeder der Demo. */
.wsp-chat__msg.is-alert {
color: #ff9d8a;
}
.wsp-chat__msg.is-deleted,
.wsp-chat__msg.is-voice {
font-style: italic;
}
.wsp-chat__msg.is-link {
color: var(--wsp-green);
}
/* --- Verlauf im Telefon --------------------------------------------------- */
.wsp-thread__bar {
display: grid;
grid-template-columns: 26px 30px 1fr;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.9rem 0.6rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.wsp-thread__back {
display: grid;
place-items: center;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: #fff;
cursor: pointer;
}
.wsp-thread__back svg {
width: 17px;
height: 17px;
}
.wsp-thread__back:hover,
.wsp-thread__back:focus-visible {
background: rgba(255, 255, 255, 0.12);
}
.wsp-thread__bar .wsp-chat__avatar {
width: 30px;
height: 30px;
font-size: 0.68rem;
}
.wsp-thread__who {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.wsp-thread__who strong {
font-size: 0.8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wsp-thread__who span {
font-size: 0.62rem;
color: rgba(255, 255, 255, 0.45);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wsp-thread__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.75rem 0.9rem 3rem;
overflow-y: auto;
}
/* --- Sprechblasen --------------------------------------------------------- */
.wsp-bubble {
position: relative;
display: block;
max-width: 82%;
padding: 0.42rem 0.6rem 0.5rem;
border: 0;
border-radius: 12px;
font: inherit;
font-size: 0.72rem;
line-height: 1.4;
text-align: left;
color: #fff;
}
.wsp-bubble--in {
align-self: flex-start;
background: rgba(255, 255, 255, 0.1);
border-bottom-left-radius: 4px;
}
.wsp-bubble--out {
align-self: flex-end;
background: #10603f;
border-bottom-right-radius: 4px;
}
.wsp-bubble__text {
display: block;
}
.wsp-bubble__time {
display: block;
margin-top: 2px;
font-size: 0.58rem;
color: rgba(255, 255, 255, 0.45);
}
.wsp-bubble.is-deleted .wsp-bubble__text,
.wsp-bubble.is-voice .wsp-bubble__text {
font-style: italic;
opacity: 0.75;
}
.wsp-bubble.is-link .wsp-bubble__text {
color: var(--wsp-green);
word-break: break-all;
}
/* Die markierte Nachricht ist anklickbar und zeigt das auch. */
button.wsp-bubble.is-mark {
cursor: pointer;
padding-right: 1.9rem;
background: rgba(255, 157, 138, 0.16);
box-shadow: 0 0 0 1px rgba(255, 157, 138, 0.45);
transition: background 0.15s ease, box-shadow 0.15s ease;
}
button.wsp-bubble.is-mark:hover,
button.wsp-bubble.is-mark:focus-visible {
background: rgba(255, 157, 138, 0.26);
box-shadow: 0 0 0 1px rgba(255, 157, 138, 0.75);
}
.wsp-bubble__cue {
position: absolute;
top: 50%;
right: 0.45rem;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(255, 157, 138, 0.9);
color: #2b0f09;
}
.wsp-bubble__cue svg {
width: 11px;
height: 11px;
}
.wsp-phone.is-live .wsp-bubble__cue {
animation: wsp-puls 2.4s ease-in-out infinite;
}
@keyframes wsp-puls {
0%, 70%, 100% { transform: translateY(-50%) scale(1); }
80% { transform: translateY(-50%) scale(1.18); }
}
/* --- Auswertungsfenster --------------------------------------------------- */
.wsp-win[hidden] {
display: none;
}
.wsp-win {
position: fixed;
inset: 0;
z-index: 120;
display: grid;
place-items: center;
padding: clamp(0.75rem, 3vw, 2rem);
}
.wsp-win__backdrop {
position: absolute;
inset: 0;
background: rgba(6, 20, 15, 0.62);
opacity: 0;
transition: opacity 0.24s ease;
}
.wsp-win.is-open .wsp-win__backdrop {
opacity: 1;
}
.wsp-win__frame {
position: relative;
width: min(940px, 100%);
display: flex;
flex-direction: column;
overflow: hidden;
background: #f6faf8;
border-radius: 14px;
box-shadow: 0 40px 90px rgba(4, 16, 11, 0.55);
/*
* Der Ursprung liegt rechts unten — dort steht das Telefon. Das Fenster
* wirkt dadurch, als klappe es aus dem Geraet auf.
*/
transform-origin: 85% 80%;
transform: scale(0.92) translateY(12px);
opacity: 0;
transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.2s ease;
}
.wsp-win.is-open .wsp-win__frame {
transform: none;
opacity: 1;
}
/* Fensterleiste im Stil eines Browsers */
.wsp-win__bar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.8rem;
background: linear-gradient(#eef3f0, #e4ebe7);
border-bottom: 1px solid #d5e0da;
}
.wsp-win__dots {
display: inline-flex;
gap: 6px;
padding-left: 0.15rem;
}
.wsp-win__dots i {
width: 11px;
height: 11px;
border-radius: 50%;
background: #d7d7d7;
}
.wsp-win__dots i:nth-child(1) { background: #ff5f57; }
.wsp-win__dots i:nth-child(2) { background: #febc2e; }
.wsp-win__dots i:nth-child(3) { background: #28c840; }
.wsp-win__addr {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.28rem 0.9rem;
background: #fff;
border: 1px solid #dbe4df;
border-radius: 999px;
font-size: 0.76rem;
color: var(--wsp-muted);
}
.wsp-win__addr svg {
width: 12px;
height: 12px;
flex: none;
}
.wsp-win__close {
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--wsp-body);
cursor: pointer;
}
.wsp-win__close:hover,
.wsp-win__close:focus-visible {
background: rgba(12, 42, 29, 0.1);
color: var(--wsp-ink);
}
.wsp-win__close svg {
width: 16px;
height: 16px;
}
/* Inhalt: 16:9, Seitenspalte plus Verlauf */
.wsp-win__body {
display: grid;
grid-template-columns: 210px minmax(0, 1fr);
aspect-ratio: 16 / 9;
min-height: 0;
}
.wsp-win__side {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1rem 0.85rem;
background: #edf3ef;
border-right: 1px solid #dde6e1;
/* Zwoelf Eintraege passen nicht in jede Fensterhoehe. */
overflow-y: auto;
min-height: 0;
}
.wsp-win__sidehead {
margin: 0 0 0.35rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--wsp-muted);
}
.wsp-win__sidelist {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.15rem;
}
.wsp-win__sideitem {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.42rem 0.55rem;
border-radius: 8px;
font-size: 0.78rem;
color: var(--wsp-body);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wsp-win__sideitem.is-active {
background: #fff;
font-weight: 600;
color: var(--wsp-ink);
box-shadow: var(--wsp-shadow-sm);
}
.wsp-win__sidedot {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--wsp-border);
}
.wsp-win__sidedot.is-alert { background: #e2593f; }
.wsp-win__sidedot.is-deleted { background: #d99b1f; }
.wsp-win__sidedot.is-link { background: var(--wsp-green-deep); }
.wsp-win__sidedot.is-voice { background: #7aa6c2; }
.wsp-win__main {
display: flex;
flex-direction: column;
min-height: 0;
background: #fff;
}
.wsp-win__head {
padding: 0.9rem 1.2rem 0.75rem;
border-bottom: 1px solid var(--wsp-border);
}
.wsp-win__name {
margin: 0;
font-size: 1.05rem;
letter-spacing: -0.02em;
color: var(--wsp-ink);
}
.wsp-win__sub {
margin: 0.15rem 0 0;
font-size: 0.78rem;
color: var(--wsp-muted);
}
.wsp-win__chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0.6rem 0 0;
padding: 0;
list-style: none;
}
.wsp-win__chips li {
padding: 0.18rem 0.6rem;
border-radius: 999px;
background: var(--wsp-green-soft);
color: var(--wsp-green-deep);
font-size: 0.7rem;
font-weight: 600;
}
.wsp-win__thread {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem 1.2rem;
overflow-y: auto;
}
.wsp-wbubble {
max-width: 78%;
padding: 0.5rem 0.75rem 0.55rem;
border-radius: 12px;
font-size: 0.82rem;
line-height: 1.45;
}
.wsp-wbubble--in {
align-self: flex-start;
background: var(--wsp-bg-soft);
border: 1px solid var(--wsp-border);
border-bottom-left-radius: 4px;
color: var(--wsp-ink);
}
.wsp-wbubble--out {
align-self: flex-end;
background: var(--wsp-green-soft);
border-bottom-right-radius: 4px;
color: var(--wsp-ink);
}
.wsp-wbubble time {
display: block;
margin-top: 3px;
font-size: 0.66rem;
color: var(--wsp-muted);
}
.wsp-wbubble.is-deleted span {
font-style: italic;
color: var(--wsp-muted);
}
.wsp-wbubble.is-link span {
color: var(--wsp-green-deep);
word-break: break-all;
}
/* Die Nachricht, wegen der das Fenster geoeffnet wurde. */
.wsp-wbubble.is-mark {
background: #fff2ee;
border: 1px solid #f0b7a6;
box-shadow: 0 0 0 3px rgba(226, 89, 63, 0.12);
}
/* --- Bedienbare Seitenspalte im Fenster ---------------------------------- */
.wsp-win__sidelist li {
list-style: none;
}
button.wsp-win__sideitem {
width: 100%;
border: 0;
background: none;
font: inherit;
text-align: left;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
button.wsp-win__sideitem:hover,
button.wsp-win__sideitem:focus-visible {
background: #fff;
color: var(--wsp-ink);
}
/* Beim Wechsel kurz abblenden, damit der Sprung nicht hart wirkt. */
.wsp-win__main {
transition: opacity 0.18s ease;
}
.wsp-win__main.is-swap {
opacity: 0.3;
}
.wsp-win__chips[hidden] {
display: none;
}
/* Der rote Punkt schliesst — das erwartet man von einem Fenster. */
.wsp-win__dots i:first-child {
cursor: pointer;
}
/* Seitliches Scrollen der Seite unterbinden, solange das Fenster offen ist. */
.wsp-win-open {
overflow: hidden;
}
/* --- Schmale Schirme ------------------------------------------------------ */
@media (max-width: 720px) {
.wsp-win {
place-items: end center;
padding: 0;
}
.wsp-win__frame {
width: 100%;
max-height: 88vh;
border-radius: 16px 16px 0 0;
transform-origin: 50% 100%;
transform: translateY(28px);
}
/*
* Das feste Seitenverhaeltnis wuerde auf dem Telefon entweder winzig oder
* zu hoch — hier zaehlt die Lesbarkeit des Verlaufs.
*/
.wsp-win__body {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
aspect-ratio: auto;
max-height: calc(88vh - 46px);
}
/*
* Die Kontaktliste bleibt bedienbar, wandert aber als waagerechte Leiste
* ueber den Verlauf. Ausblenden waere einfacher gewesen — dann fehlte auf
* dem Telefon aber die Moeglichkeit, den Chat zu wechseln.
*/
.wsp-win__side {
flex-direction: row;
gap: 0;
padding: 0.55rem 0.7rem;
border-right: 0;
border-bottom: 1px solid #dde6e1;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.wsp-win__sidehead {
display: none;
}
.wsp-win__sidelist {
display: flex;
gap: 0.4rem;
}
.wsp-win__sidelist li {
flex: none;
}
button.wsp-win__sideitem {
width: auto;
padding: 0.32rem 0.7rem;
border: 1px solid var(--wsp-border);
border-radius: 999px;
background: #fff;
font-size: 0.75rem;
white-space: nowrap;
}
button.wsp-win__sideitem.is-active {
border-color: var(--wsp-green-deep);
box-shadow: none;
}
}
@media (prefers-reduced-motion: reduce) {
.wsp-phone.is-live .wsp-phone__view,
.wsp-win__frame,
.wsp-win__backdrop {
transition: none;
}
.wsp-phone.is-live .wsp-bubble__cue {
animation: none;
}
.wsp-win__main {
transition: none;
}
}
/* ==========================================================================
22. Messenger-Auswahl
Nur die App-Symbole, ohne Geraete- oder Betriebssystem-Anmutung. Der Klick
oeffnet das Fenster aus Abschnitt 21, hier mit drei Ebenen: Messenger,
Kontakte, Verlauf — wie in einem Mailprogramm.
========================================================================== */
/*
* Heller Abschnitt im Gruenton der Website. Er hebt die App-Symbole vom
* uebrigen Weiss ab, ohne den Bereich so schwer zu machen wie der Hero.
*/
.wsp-section--mint {
background:
radial-gradient(58% 58% at 16% 12%, rgba(69, 221, 139, 0.26), transparent 62%),
radial-gradient(52% 52% at 86% 88%, rgba(15, 122, 71, 0.14), transparent 64%),
linear-gradient(160deg, #e8f6ef, #f2f8f5 58%, #e4f3ec);
}
.wsp-appgrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: clamp(0.9rem, 2.4vw, 1.9rem);
width: min(720px, 100%);
margin: clamp(2.25rem, 5vw, 3.5rem) auto 0;
padding: 0;
list-style: none;
}
.wsp-appgrid__row {
list-style: none;
}
.wsp-appgrid__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0;
border: 0;
background: none;
text-align: center;
}
.wsp-appgrid.is-live button.wsp-appgrid__item {
cursor: pointer;
}
/*
* Die Symbole sind randlos quadratisch aufbereitet; hier kommen nur die
* gerundete Ecke und ein leichter Rahmen samt Schatten dazu. Beides liegt
* bewusst knapp unter der Wahrnehmungsschwelle: Es soll die Kacheln vom
* hellen Grund abheben wie auf einem Geraet, nicht als Rahmen auffallen.
*/
.wsp-appgrid__icon {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
border: 1px solid rgba(12, 42, 29, 0.08);
border-radius: 23%;
box-shadow:
0 1px 2px rgba(12, 42, 29, 0.10),
0 6px 14px rgba(12, 42, 29, 0.12);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/*
* Der Name unter dem Symbol, wie auf einem Startbildschirm. Zwei Zeilen sind
* erlaubt — abgeschnittene Namen sind auf einer Seite, die zeigen soll, was
* unterstuetzt wird, das schlechtere Ergebnis. Die feste Mindesthoehe haelt
* die Reihen trotzdem auf einer Linie.
*/
/*
* Bewusst nicht die Hausschrift: Geraete beschriften ihre Symbole mit der
* Systemschrift, und eine breit laufende Groteske mit hoher x-Hoehe bleibt in
* dieser Groesse lesbarer als Inter. Verdana laeuft dafuer recht luftig — die
* leichte negative Laufweite nimmt das zurueck, ohne die Buchstaben zu
* verkleben. Tahoma ist die engere Schwester und springt ein, wo Verdana
* fehlt; DejaVu Sans ist der uebliche Ersatz auf Linux und Android.
*/
.wsp-appgrid__name {
display: block;
min-height: 2.6em;
font-family: Verdana, Tahoma, "DejaVu Sans", Geneva, sans-serif;
font-size: clamp(0.68rem, 1.5vw, 0.75rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.03em;
color: var(--wsp-ink);
overflow-wrap: anywhere;
}
.wsp-appgrid.is-live button.wsp-appgrid__item:hover .wsp-appgrid__icon,
.wsp-appgrid.is-live button.wsp-appgrid__item:focus-visible .wsp-appgrid__icon {
box-shadow:
0 2px 4px rgba(12, 42, 29, 0.12),
0 12px 24px rgba(12, 42, 29, 0.18);
}
.wsp-appgrid.is-live button.wsp-appgrid__item:hover .wsp-appgrid__icon,
.wsp-appgrid.is-live button.wsp-appgrid__item:focus-visible .wsp-appgrid__icon {
transform: scale(1.08);
}
.wsp-appgrid.is-live button.wsp-appgrid__item:active .wsp-appgrid__icon {
transform: scale(0.97);
}
/*
* Der Fokusrahmen sitzt am Symbol, nicht an der ganzen Kachel. Um Symbol und
* Name herum umschloss er viel Leerraum und wirkte wie ein zweiter Kasten;
* am Symbol folgt er dessen Rundung und zeigt genau das an, was angeklickt
* wird.
*/
.wsp-appgrid.is-live button.wsp-appgrid__item:focus-visible {
outline: none;
}
.wsp-appgrid.is-live button.wsp-appgrid__item:focus-visible .wsp-appgrid__icon {
outline: 3px solid var(--wsp-green);
outline-offset: 4px;
}
/* --- Fenster mit drei Ebenen ---------------------------------------------- */
.wsp-win--three .wsp-win__body {
grid-template-columns: 168px 232px minmax(0, 1fr);
}
.wsp-win__side--mid {
background: #fff;
border-right: 1px solid #dde6e1;
}
.wsp-win__sidelogo {
flex: none;
width: 20px;
height: 20px;
object-fit: cover;
border-radius: 26%;
}
.wsp-win__sidebadge {
margin-left: auto;
display: grid;
place-items: center;
min-width: 17px;
height: 17px;
padding: 0 5px;
border-radius: 999px;
background: #ff3b30;
color: #fff;
font-size: 10px;
font-weight: 700;
}
#wsp-appwin .wsp-win__sideitem {
gap: 0.55rem;
}
/* --- Kontaktliste --------------------------------------------------------- */
.wsp-win__people {
display: grid;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.wsp-win__people li {
list-style: none;
}
.wsp-win__person {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.55rem;
width: 100%;
padding: 0.55rem 0.6rem;
border: 0;
border-radius: 9px;
background: none;
font: inherit;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
.wsp-win__person:hover,
.wsp-win__person:focus-visible {
background: var(--wsp-bg-soft);
}
.wsp-win__person.is-active {
background: var(--wsp-green-soft);
}
.wsp-win__personav {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--wsp-green-soft);
color: var(--wsp-green-deep);
font-size: 0.78rem;
font-weight: 700;
}
.wsp-win__person.is-alert .wsp-win__personav {
background: #ffe3dc;
color: #b23a20;
}
.wsp-win__person.is-active .wsp-win__personav {
background: #fff;
}
.wsp-win__personbody {
min-width: 0;
}
.wsp-win__personname {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--wsp-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wsp-win__personprev {
display: block;
font-size: 0.75rem;
color: var(--wsp-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wsp-win__person.is-alert .wsp-win__personprev {
color: #c0442a;
}
.wsp-win__personmeta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
font-size: 0.68rem;
color: var(--wsp-muted);
white-space: nowrap;
}
/* --- Zurueck zwischen den Ebenen ------------------------------------------ */
.wsp-win__paneback,
.wsp-win__backline {
display: none;
}
.wsp-win__paneback {
width: 24px;
height: 24px;
margin-right: 0.35rem;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--wsp-bg-soft);
color: var(--wsp-ink);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
.wsp-win__sidehead {
display: flex;
align-items: center;
}
/* --- Schmale Schirme: eine Ebene nach der anderen ------------------------- */
@media (max-width: 860px) {
.wsp-win--three .wsp-win__body {
grid-template-columns: minmax(0, 1fr);
}
/*
* Statt drei Spalten wird durchgeklickt. Welche Ebene sichtbar ist, steht
* in data-step; das Skript setzt es, das CSS wertet es aus.
*/
.wsp-win--three .wsp-win__side,
.wsp-win--three .wsp-win__side--mid,
.wsp-win--three .wsp-win__main {
display: none;
}
.wsp-win--three[data-step="apps"] .wsp-win__side {
display: flex;
border-right: 0;
}
.wsp-win--three[data-step="contacts"] .wsp-win__side--mid {
display: flex;
flex-direction: column;
border-right: 0;
}
.wsp-win--three[data-step="thread"] .wsp-win__main {
display: flex;
}
.wsp-win--three .wsp-win__paneback,
.wsp-win--three .wsp-win__backline {
display: inline-flex;
}
.wsp-win__backline {
margin: 0 0 0.4rem;
}
}
@media (max-width: 560px) {
.wsp-appgrid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
.wsp-appgrid__icon,
.wsp-win__person {
transition: none;
}
}
/* ==========================================================================
23. Anwendungsfaelle als Slider
Vier Folien direkt unter dem Hero, je zur Haelfte Bild und Inhalt. Sie
ersetzen die frueheren vier Funktionskacheln: Statt einer Funktionsliste
steht dort jetzt der Anlass, aus dem heraus Eltern suchen.
Alle Folien liegen im selben Rasterfeld uebereinander. Damit ist die
Hoehe die der laengsten Folie und beim Wechsel springt nichts.
========================================================================== */
.wsp-cases {
padding-block: clamp(2.5rem, 6vw, 4.5rem);
background:
radial-gradient(60% 70% at 8% 0%, rgba(69, 221, 139, 0.13), transparent 60%),
linear-gradient(180deg, #ffffff, var(--wsp-bg-soft));
border-block: 1px solid var(--wsp-border);
overflow: clip;
}
/* --- Die Spur ------------------------------------------------------------ */
/*
* Ohne JavaScript steht hier genau eine Folie, die uebrigen tragen das
* hidden-Attribut. Erst is-live stapelt sie; vorher waere ein Raster mit
* einem einzigen Feld ueberfluessig.
*/
.wsp-cases.is-live .wsp-cases__track {
display: grid;
grid-template-areas: "folie";
}
.wsp-cases.is-live .wsp-case {
grid-area: folie;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}
.wsp-cases.is-live .wsp-case.is-current {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
}
/* --- Eine Folie ---------------------------------------------------------- */
.wsp-case {
display: grid;
gap: clamp(1.5rem, 3.5vw, 3rem);
align-items: center;
}
@media (min-width: 900px) {
.wsp-case {
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
}
/* --- Bildseite ----------------------------------------------------------- */
.wsp-case__media {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--wsp-radius-xl);
overflow: hidden;
box-shadow: var(--wsp-shadow-lg);
background: var(--wsp-green-softer);
}
.wsp-case__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/*
* Die Einblendungen nennen das Ergebnis, nicht die Funktion. Sie sind rein
* dekorativ — der gleiche Inhalt steht als Text daneben.
*/
.wsp-case__mark {
position: absolute;
display: inline-flex;
align-items: center;
gap: 0.5rem;
max-width: calc(100% - 2.5rem);
padding: 0.55rem 0.9rem;
border-radius: var(--wsp-radius-pill);
background: rgba(255, 255, 255, 0.92);
box-shadow: var(--wsp-shadow);
font-size: 0.82rem;
font-weight: 700;
line-height: 1.2;
color: var(--wsp-ink);
backdrop-filter: blur(6px);
}
.wsp-case__mark svg {
width: 16px;
height: 16px;
flex: none;
color: var(--wsp-green-deep);
}
.wsp-case__mark--1 {
top: clamp(0.9rem, 2.5vw, 1.5rem);
left: clamp(0.9rem, 2.5vw, 1.5rem);
}
.wsp-case__mark--2 {
right: clamp(0.9rem, 2.5vw, 1.5rem);
bottom: clamp(0.9rem, 2.5vw, 1.5rem);
background: rgba(10, 31, 22, 0.86);
color: #fff;
}
.wsp-case__mark--2 svg {
color: var(--wsp-green);
}
/* --- Platzhalter, solange kein Bild hinterlegt ist ----------------------- */
/*
* Fuer Besucher eine gestaltete Flaeche im Markenton, damit die Folie nicht
* halb leer wirkt. Der Bildauftrag darunter erscheint nur fuer angemeldete
* Redakteure — siehe inc/slider.php.
*/
.wsp-case__todo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
width: 100%;
height: 100%;
padding: clamp(1.25rem, 3vw, 2rem);
text-align: center;
background:
radial-gradient(70% 70% at 30% 20%, rgba(69, 221, 139, 0.35), transparent 65%),
radial-gradient(60% 60% at 85% 90%, rgba(15, 122, 71, 0.22), transparent 62%),
linear-gradient(150deg, #e9f8f0, #dff4e9 55%, #cfeddf);
overflow-y: auto;
}
.wsp-case__todoicon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 84px;
height: 84px;
flex: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.75);
box-shadow: var(--wsp-shadow-sm);
}
/* Zwei ruhige Ringe — ohne sie waere die Flaeche schlicht leer. */
.wsp-case__todoicon::before,
.wsp-case__todoicon::after {
content: "";
position: absolute;
border-radius: 50%;
border: 1px solid rgba(15, 122, 71, 0.16);
}
.wsp-case__todoicon::before {
inset: -24px;
}
.wsp-case__todoicon::after {
inset: -52px;
border-color: rgba(15, 122, 71, 0.09);
}
.wsp-case__todoicon svg {
width: 38px;
height: 38px;
color: var(--wsp-green-deep);
}
.wsp-case__todobody {
width: 100%;
max-width: 32rem;
}
.wsp-case__todohead {
margin: 0;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--wsp-green-deep);
}
.wsp-case__todotext {
margin: 0.35rem 0 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--wsp-ink);
}
.wsp-case__todofile {
margin: 0.3rem 0 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.8rem;
color: var(--wsp-muted);
}
.wsp-case__todo .wsp-c-illu__prompt {
text-align: left;
}
/*
* In der Redakteursansicht zaehlt der Bildauftrag, nicht die Deko — die
* Einblendungen wuerden sonst ueber dem Text liegen.
*/
.wsp-case__media:has(.wsp-case__todobody) .wsp-case__mark {
display: none;
}
/* --- Inhaltsseite -------------------------------------------------------- */
.wsp-case__eyebrow {
margin: 0 0 0.6rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wsp-green-deep);
}
.wsp-case__title {
margin: 0;
font-size: clamp(1.65rem, 3.4vw, 2.5rem);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--wsp-ink);
}
.wsp-case__text {
margin: 0.85rem 0 0;
max-width: 34rem;
font-size: clamp(1rem, 1.1vw, 1.08rem);
line-height: 1.65;
color: var(--wsp-body);
}
.wsp-case__points {
margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.9rem;
}
.wsp-case__points li {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.wsp-case__pointicon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: none;
border-radius: 12px;
background: #fff;
border: 1px solid var(--wsp-border);
box-shadow: var(--wsp-shadow-sm);
}
.wsp-case__pointicon svg {
width: 20px;
height: 20px;
color: var(--wsp-green-deep);
}
/* min-width verhindert, dass ein langer Begriff die Zeile aufdrueckt. */
.wsp-case__pointbody {
min-width: 0;
padding-top: 0.15rem;
font-size: 0.95rem;
line-height: 1.5;
color: var(--wsp-body);
}
.wsp-case__pointbody strong {
display: block;
color: var(--wsp-ink);
}
.wsp-case__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: clamp(1.4rem, 3vw, 2rem);
}
/*
* Der Geisterknopf ist fuer den dunklen Hero gemacht — weisse Schrift auf
* weissem Rand. Hier steht er auf hellem Grund und braucht die umgekehrte
* Fassung, sonst ist er praktisch unsichtbar.
*/
.wsp-case__actions .wsp-btn--ghost {
background: #fff;
color: var(--wsp-ink);
border-color: var(--wsp-border);
}
.wsp-case__actions .wsp-btn--ghost:hover {
color: var(--wsp-ink);
border-color: var(--wsp-green);
background: var(--wsp-green-softer);
}
/* --- Bedienelemente ------------------------------------------------------ */
.wsp-cases__nav {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.wsp-cases__arrow,
.wsp-cases__pause {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: none;
padding: 0;
border: 1px solid var(--wsp-border);
border-radius: 50%;
background: #fff;
color: var(--wsp-ink);
box-shadow: var(--wsp-shadow-sm);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.wsp-cases__arrow:hover,
.wsp-cases__pause:hover {
background: var(--wsp-green-softer);
border-color: var(--wsp-green);
}
.wsp-cases__arrow:active {
transform: scale(0.94);
}
.wsp-cases__arrow svg,
.wsp-cases__pause svg {
width: 22px;
height: 22px;
}
/* Der Knopf zeigt, was er tut: pausiert das Dreieck, laufend die zwei Balken. */
.wsp-cases__pause .wsp-cases__play {
display: none;
}
.wsp-cases__pause.is-paused .wsp-cases__play {
display: block;
}
.wsp-cases__pause.is-paused .wsp-cases__bar {
display: none;
}
.wsp-cases__dots {
display: flex;
align-items: center;
gap: 0.4rem;
margin-inline: 0.25rem;
}
.wsp-cases__dot {
position: relative;
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: var(--wsp-radius-pill);
background: rgba(12, 42, 29, 0.18);
cursor: pointer;
overflow: hidden;
transition: width 0.3s ease, background 0.3s ease;
}
.wsp-cases__dot:hover {
background: rgba(12, 42, 29, 0.34);
}
/*
* Die laufende Folie wird zum Balken und laeuft sichtbar ab. Das ersetzt eine
* eigene Fortschrittsleiste und sagt zugleich, wie lange es noch dauert.
*/
.wsp-cases__dot.is-on {
width: 46px;
background: rgba(12, 42, 29, 0.14);
}
.wsp-cases__dot.is-on::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 100%;
border-radius: inherit;
background: var(--wsp-green-deep);
transform-origin: left center;
animation: wsp-case-run 7s linear forwards;
}
/* Angehalten steht der Balken still und bleibt als Markierung stehen. */
.wsp-cases.is-paused .wsp-cases__dot.is-on::after {
animation: none;
transform: none;
}
@keyframes wsp-case-run {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* --- Breite Schirme ------------------------------------------------------ */
/*
* Das Bild fuellt die volle Hoehe der Folie. Mit fester Seitenlaenge blieb es
* deutlich niedriger als die Textspalte daneben — die Haelften waren gleich
* breit, aber sichtbar ungleich schwer. Weil alle vier Folien im selben
* Rasterfeld liegen, ist die Hoehe zugleich auf jeder Folie dieselbe: beim
* Wechsel wandert keine Kante.
*
* Der Block steht bewusst hinter den Grundregeln — sonst gewaenne das spaeter
* notierte aspect-ratio bei gleicher Spezifitaet.
*/
@media (min-width: 900px) {
.wsp-case__media {
aspect-ratio: auto;
min-height: 26rem;
}
.wsp-case__body {
align-self: center;
padding-block: 0.5rem;
}
}
/* --- Schmale Geraete ----------------------------------------------------- */
@media (max-width: 899px) {
.wsp-case__media {
aspect-ratio: 16 / 11;
}
.wsp-case__title {
font-size: clamp(1.5rem, 6.5vw, 2rem);
}
.wsp-case__actions .wsp-btn {
flex: 1 1 12rem;
justify-content: center;
}
}
@media (max-width: 560px) {
.wsp-case__mark--2 {
display: none;
}
/* Nebeneinander bricht die zweite Beschriftung um; untereinander nicht. */
.wsp-case__actions .wsp-btn {
flex: 1 1 100%;
}
.wsp-case__todoicon {
width: 64px;
height: 64px;
}
.wsp-case__todoicon svg {
width: 30px;
height: 30px;
}
}
@media (prefers-reduced-motion: reduce) {
.wsp-cases.is-live .wsp-case,
.wsp-cases.is-live .wsp-case.is-current {
transition: none;
}
.wsp-cases__dot.is-on::after {
animation: none;
transform: none;
}
.wsp-cases__arrow,
.wsp-cases__pause,
.wsp-cases__dot {
transition: none;
}
}
/* ==========================================================================
24. Kompatibilitaet
Zwei Betriebssystem-Tafeln mit Geraetesilhouetten, darunter die kleine
Geraetepruefung, drei Belege und der Fliesstext. Die Silhouetten sind
vollstaendig in CSS gebaut — sie tragen keine Information, nur Koerper.
========================================================================== */
.wsp-compat {
padding-block: clamp(3rem, 7vw, 5.5rem);
background:
radial-gradient(46% 40% at 88% 4%, rgba(69, 221, 139, 0.18), transparent 62%),
radial-gradient(40% 34% at 6% 96%, rgba(15, 122, 71, 0.10), transparent 64%),
linear-gradient(180deg, #ffffff, var(--wsp-bg-soft));
border-block: 1px solid var(--wsp-border);
}
/* --- Die beiden Tafeln --------------------------------------------------- */
.wsp-compat__wall {
display: grid;
gap: clamp(1.25rem, 2.5vw, 2rem);
margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
.wsp-compat__wall {
grid-template-columns: 1fr 1fr;
}
}
.wsp-compat__os {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-xl);
background: #fff;
box-shadow: var(--wsp-shadow);
overflow: hidden;
}
/* --- Geraetesilhouetten -------------------------------------------------- */
.wsp-compat__devices {
display: flex;
align-items: flex-end;
justify-content: center;
gap: clamp(0.6rem, 1.6vw, 1.1rem);
height: clamp(120px, 17vw, 168px);
padding-top: 1.75rem;
background:
radial-gradient(70% 100% at 50% 0%, rgba(69, 221, 139, 0.20), transparent 70%),
linear-gradient(180deg, var(--wsp-green-softer), #ffffff);
}
.wsp-dev {
position: relative;
display: block;
width: var(--dev-w);
height: var(--dev-h);
border-radius: calc(var(--dev-w) / 5.5);
background: linear-gradient(155deg, #17342a, #0a1f16 55%, #12291f);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.25) inset,
0 10px 26px rgba(12, 42, 29, 0.28);
transform: translateY(var(--dev-y, 0));
}
/*
* Der Bildschirm. Die kleine Insel oben macht die Form erst als Telefon
* erkennbar — ohne sie liest man nur ein abgerundetes Rechteck. Der Rahmen
* ist bewusst breit: bei vier Pixeln blieb vom dunklen Gehaeuse so wenig
* uebrig, dass die Silhouetten wie duenne Umrisse wirkten statt wie Geraete.
*/
.wsp-dev i {
position: absolute;
inset: 6px 6px 7px;
border-radius: calc(var(--dev-w) / 8);
background: linear-gradient(165deg, #cfeddf, #a6ddc3 58%, #7fd0ad);
overflow: hidden;
}
/* Der Lichtstreifen ueber dem Bildschirm nimmt der Flaeche das Pappige. */
.wsp-dev i::after {
content: "";
position: absolute;
inset: 0 55% 40% -10%;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.55), transparent 70%);
transform: rotate(-8deg);
}
.wsp-dev i::before {
content: "";
position: absolute;
top: 5px;
left: 50%;
width: 34%;
height: 5px;
border-radius: 999px;
background: #0a1f16;
transform: translateX(-50%);
opacity: 0.55;
}
.wsp-dev--sm { --dev-w: 42px; --dev-h: 84px; --dev-y: -6px; }
.wsp-dev--md { --dev-w: 50px; --dev-h: 100px; --dev-y: -2px; }
.wsp-dev--lg { --dev-w: 62px; --dev-h: 126px; }
/* Auf der Android-Tafel bekommen die Geraete den Markenton — zwei identische
Reihen wuerden die Tafeln sonst verwechselbar machen. */
.wsp-compat__os--android .wsp-dev {
background: linear-gradient(155deg, #1f7a52, #0f7a47 55%, #146b45);
}
.wsp-compat__os--android .wsp-compat__devices {
background:
radial-gradient(70% 100% at 50% 0%, rgba(15, 122, 71, 0.18), transparent 70%),
linear-gradient(180deg, #e6f6ee, #ffffff);
}
/* --- Inhalt der Tafel ---------------------------------------------------- */
.wsp-compat__osbody {
display: flex;
flex-direction: column;
flex: 1;
padding: clamp(1.4rem, 3vw, 2.1rem);
}
.wsp-compat__kicker {
margin: 0 0 0.35rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wsp-green-deep);
}
.wsp-compat__os h3 {
margin: 0 0 0.6rem;
font-size: clamp(1.4rem, 2.4vw, 1.75rem);
}
.wsp-compat__ostext {
margin: 0 0 1.2rem;
font-size: 0.98rem;
line-height: 1.6;
color: var(--wsp-body);
}
.wsp-compat__badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 1.4rem;
padding: 0;
list-style: none;
}
.wsp-compat__badges li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.75rem;
border-radius: var(--wsp-radius-pill);
background: var(--wsp-green-softer);
font-size: 0.82rem;
font-weight: 700;
line-height: 1.25;
color: var(--wsp-green-deep);
}
.wsp-compat__badges svg {
width: 15px;
height: 15px;
flex: none;
}
.wsp-compat__chipshead {
margin: 0 0 0.6rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wsp-muted);
}
/*
* Auf breiten Schirmen umbrechen die Kacheln, auf schmalen werden sie
* waagerecht verschiebbar — die Geste, die dort erwartet wird, ganz ohne
* Skript. Das Einrasten haelt sie dabei an sauberen Kanten.
*/
.wsp-compat__chips {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0 0 1.1rem;
padding: 0;
list-style: none;
}
.wsp-compat__chips li {
padding: 0.45rem 0.8rem;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-sm);
background: #fff;
box-shadow: var(--wsp-shadow-sm);
font-size: 0.86rem;
font-weight: 600;
color: var(--wsp-ink);
white-space: nowrap;
transition: transform 0.18s ease, border-color 0.18s ease;
}
.wsp-compat__chips li:hover {
transform: translateY(-2px);
border-color: var(--wsp-green);
}
.wsp-compat__note {
margin: auto 0 0;
padding-top: 0.4rem;
font-size: 0.84rem;
line-height: 1.55;
color: var(--wsp-muted);
}
/* --- Geraetepruefung ----------------------------------------------------- */
.wsp-finder {
margin-top: clamp(1.5rem, 3vw, 2.5rem);
padding: clamp(1.5rem, 3.5vw, 2.5rem);
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-xl);
background: #fff;
box-shadow: var(--wsp-shadow);
}
.wsp-finder__head h3 {
margin: 0 0 0.35rem;
font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}
.wsp-finder__head p {
margin: 0 0 1.6rem;
font-size: 0.92rem;
color: var(--wsp-muted);
}
.wsp-finder__body {
display: grid;
gap: clamp(1.1rem, 2.4vw, 1.75rem);
}
@media (min-width: 860px) {
.wsp-finder__body {
grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
align-items: start;
}
}
.wsp-finder__step {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
/*
* Die feste Mindesthoehe haelt die drei Auswahlfelder auf einer Linie. Ohne
* sie rutscht das Feld unter einer zweizeiligen Beschriftung — im Deutschen
* trifft das „Version des Betriebssystems" — eine Zeile tiefer als die
* anderen beiden.
*/
.wsp-finder__step legend,
.wsp-finder__step label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 0.5rem;
padding: 0;
font-size: 0.86rem;
font-weight: 700;
line-height: 1.3;
color: var(--wsp-ink);
}
/* Untereinander gestapelt braucht es die Reserve nicht — sie waere nur Luft. */
@media (min-width: 620px) {
.wsp-finder__step legend,
.wsp-finder__step label {
min-height: 2.6em;
}
}
/* Die Nummer macht aus vier Feldern eine Reihenfolge. */
.wsp-finder__num {
display: grid;
place-items: center;
width: 22px;
height: 22px;
flex: none;
border-radius: 50%;
background: var(--wsp-green-softer);
font-size: 0.72rem;
font-weight: 800;
color: var(--wsp-green-deep);
}
.wsp-finder__osgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
.wsp-finder__os {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 0.9rem;
border: 2px solid var(--wsp-border);
border-radius: var(--wsp-radius);
background: #fff;
text-align: left;
cursor: pointer;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.wsp-finder__os:hover {
border-color: var(--wsp-green);
transform: translateY(-2px);
}
.wsp-finder__os.is-on {
border-color: var(--wsp-green-deep);
background: var(--wsp-green-softer);
}
.wsp-finder__osicon svg {
width: 24px;
height: 24px;
color: var(--wsp-green-deep);
}
.wsp-finder__osname {
font-size: 0.95rem;
font-weight: 700;
color: var(--wsp-ink);
}
.wsp-finder__oshint {
font-size: 0.78rem;
line-height: 1.35;
color: var(--wsp-muted);
}
.wsp-finder__selects {
display: grid;
gap: 0.9rem;
}
@media (min-width: 620px) {
.wsp-finder__selects {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.wsp-finder select {
width: 100%;
padding: 0.7rem 2.2rem 0.7rem 0.85rem;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-sm);
background: #fff;
background-image:
linear-gradient(45deg, transparent 50%, var(--wsp-green-deep) 50%),
linear-gradient(135deg, var(--wsp-green-deep) 50%, transparent 50%);
background-position: right 1.05rem center, right 0.75rem center;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
font-size: 0.95rem;
color: var(--wsp-ink);
appearance: none;
cursor: pointer;
transition: border-color 0.18s ease;
}
.wsp-finder select:hover:not(:disabled) {
border-color: var(--wsp-green);
}
.wsp-finder select:disabled {
background-color: var(--wsp-bg-soft);
color: var(--wsp-muted);
cursor: not-allowed;
opacity: 1;
}
/* --- Ergebnis ------------------------------------------------------------ */
.wsp-finder__result {
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
padding: clamp(1.1rem, 2.4vw, 1.6rem);
border: 1px solid var(--wsp-green);
border-radius: var(--wsp-radius-lg);
background: linear-gradient(160deg, var(--wsp-green-softer), #ffffff 70%);
}
.wsp-finder__result.is-in {
animation: wsp-finder-in 0.35s ease both;
}
@keyframes wsp-finder-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.wsp-finder__verdict {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.wsp-finder__mark {
display: grid;
place-items: center;
width: 36px;
height: 36px;
flex: none;
border-radius: 50%;
background: var(--wsp-green-deep);
color: #fff;
font-size: 1.1rem;
font-weight: 800;
line-height: 1;
}
.wsp-finder__verdict.is-no .wsp-finder__mark {
background: #b3261e;
}
.wsp-finder__verdicttitle {
margin: 0;
font-size: 1.15rem;
font-weight: 800;
color: var(--wsp-ink);
}
.wsp-finder__verdicttext {
margin: 0.2rem 0 0;
font-size: 0.95rem;
line-height: 1.55;
color: var(--wsp-body);
}
.wsp-finder__method {
margin: 1.1rem 0 0;
font-size: 0.95rem;
font-weight: 700;
color: var(--wsp-ink);
}
.wsp-finder__method span {
display: block;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wsp-muted);
}
.wsp-finder__needshead {
margin: 1.1rem 0 0.5rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wsp-muted);
}
.wsp-finder__needs {
display: grid;
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.92rem;
line-height: 1.5;
color: var(--wsp-body);
}
.wsp-finder__needs li {
position: relative;
padding-left: 1.5rem;
}
.wsp-finder__needs li::before {
content: "✓";
position: absolute;
left: 0;
font-weight: 800;
color: var(--wsp-green-deep);
}
.wsp-finder__extra {
display: grid;
gap: 0.2rem;
margin-top: 1.1rem;
padding: 0.85rem 1rem;
border-radius: var(--wsp-radius-sm);
background: #fff;
border: 1px dashed var(--wsp-green);
font-size: 0.9rem;
line-height: 1.5;
color: var(--wsp-body);
}
.wsp-finder__extra strong {
color: var(--wsp-ink);
}
.wsp-finder__hint {
margin: 0.9rem 0 0;
font-size: 0.88rem;
color: var(--wsp-muted);
}
.wsp-finder__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.3rem;
}
.wsp-finder__actions .wsp-btn--ghost {
background: #fff;
color: var(--wsp-ink);
border-color: var(--wsp-border);
}
.wsp-finder__actions .wsp-btn--ghost:hover {
color: var(--wsp-ink);
border-color: var(--wsp-green);
background: var(--wsp-green-softer);
}
.wsp-finder__caveat {
margin: 1.1rem 0 0;
font-size: 0.84rem;
line-height: 1.55;
color: var(--wsp-muted);
}
/* --- Drei Belege --------------------------------------------------------- */
.wsp-compat__facts {
display: grid;
gap: clamp(0.9rem, 2vw, 1.4rem);
margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 760px) {
.wsp-compat__facts {
grid-template-columns: repeat(3, 1fr);
}
}
.wsp-compat__facts li {
display: grid;
gap: 0.3rem;
padding: clamp(1.1rem, 2.2vw, 1.5rem);
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-lg);
background: #fff;
box-shadow: var(--wsp-shadow-sm);
}
.wsp-compat__facts strong {
font-size: 1.02rem;
color: var(--wsp-ink);
}
.wsp-compat__facts li > span:last-child {
font-size: 0.9rem;
line-height: 1.5;
color: var(--wsp-body);
}
.wsp-compat__facticon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 0.5rem;
border-radius: 12px;
background: var(--wsp-green-softer);
}
.wsp-compat__facticon svg {
width: 21px;
height: 21px;
color: var(--wsp-green-deep);
}
/* --- Fliesstext ---------------------------------------------------------- */
.wsp-compat__seo {
display: grid;
gap: clamp(1.25rem, 2.5vw, 2rem);
margin-top: clamp(2rem, 4vw, 3rem);
padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
border-top: 1px solid var(--wsp-border);
}
@media (min-width: 860px) {
.wsp-compat__seo {
grid-template-columns: repeat(3, 1fr);
}
}
.wsp-compat__seoitem h3 {
margin: 0 0 0.5rem;
font-size: 1.05rem;
letter-spacing: -0.01em;
}
.wsp-compat__seoitem p {
margin: 0;
font-size: 0.92rem;
line-height: 1.65;
color: var(--wsp-body);
}
/* --- Einblenden beim Scrollen -------------------------------------------- */
/*
* Nur wirksam, wenn das Skript laeuft: is-reveal setzt es am Wurzelelement.
* Ohne diese Bedingung blieben die Bloecke bei abgeschaltetem JavaScript
* unsichtbar.
*/
.wsp-js [data-wsp-reveal] {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.wsp-js [data-wsp-reveal].is-in {
opacity: 1;
transform: none;
}
/* --- Schmale Geraete ----------------------------------------------------- */
@media (max-width: 620px) {
/*
* Waagerecht verschiebbar statt vierzeilig gestapelt. Die Reihe laeuft
* dabei bis an den Kartenrand — endet sie vorher, sieht die angeschnittene
* Kachel nach Fehler aus statt nach „hier geht es weiter".
*/
.wsp-compat__chips {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
margin-inline: calc(-1 * clamp(1.4rem, 3vw, 2.1rem));
padding-inline: clamp(1.4rem, 3vw, 2.1rem);
padding-bottom: 0.5rem;
scrollbar-width: thin;
}
.wsp-compat__chips li {
scroll-snap-align: start;
flex: none;
}
.wsp-finder__osgrid {
grid-template-columns: 1fr;
}
.wsp-finder__actions .wsp-btn {
flex: 1 1 100%;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.wsp-js [data-wsp-reveal],
.wsp-compat__chips li,
.wsp-finder__os,
.wsp-finder select {
transition: none;
}
.wsp-finder__result.is-in {
animation: none;
}
}
/* ==========================================================================
25. Kompatibilitaet: kurze Fassung und Unterseite
Die Startseite traegt seit September 2026 nur noch den Zweizeiler mit den
beiden Plattformzeichen; alles Ausfuehrliche steht auf /kompatibilitaet/.
Die Bausteine aus Abschnitt 24 (Tafeln, Pruefung, Belege, Fliesstext)
werden dort weiterverwendet.
========================================================================== */
/* --- Kurze Fassung auf der Startseite ------------------------------------ */
.wsp-compact {
padding-block: clamp(2.75rem, 6vw, 4.5rem);
background:
radial-gradient(44% 40% at 90% 6%, rgba(69, 221, 139, 0.16), transparent 62%),
linear-gradient(180deg, #ffffff, var(--wsp-bg-soft));
border-block: 1px solid var(--wsp-border);
}
.wsp-compact__inner {
display: grid;
gap: clamp(1.75rem, 4vw, 3rem);
align-items: center;
}
@media (min-width: 900px) {
.wsp-compact__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
}
.wsp-compact__text h2 {
margin: 0 0 0.6rem;
font-size: clamp(1.75rem, 3.4vw, 2.6rem);
}
.wsp-compact__text .wsp-lead {
margin: 0 0 clamp(1.4rem, 3vw, 2rem);
max-width: 32rem;
}
/* --- Die beiden Plattformkarten ------------------------------------------ */
/*
* Zwei Karten nebeneinander, auch auf dem Telefon: Nebeneinander gestellt
* lesen sich Apfel und Roboter als „beides geht". Untereinander waere daraus
* eine Liste geworden, die man erst zu Ende scrollen muss.
*/
.wsp-compact__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(0.75rem, 2vw, 1.25rem);
}
.wsp-oscard {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: clamp(1.1rem, 2.6vw, 1.75rem) clamp(0.85rem, 2vw, 1.5rem) clamp(1.25rem, 2.6vw, 1.75rem);
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-xl);
background: #fff;
box-shadow: var(--wsp-shadow);
text-align: center;
overflow: hidden;
}
/*
* Das Plattformzeichen ist der Kern der Karte — gross, mittig und in der
* Markenfarbe. Es muss die Aussage allein tragen koennen, auch wenn niemand
* die Zeile darunter liest. Bis September 2026 standen darueber noch drei
* Geraetesilhouetten; ohne sie hat das Zeichen den Platz, den es verdient.
*/
.wsp-oscard__brand {
position: relative;
display: grid;
place-items: center;
width: clamp(92px, 17vw, 124px);
height: clamp(92px, 17vw, 124px);
margin: 0 0 0.85rem;
border-radius: 50%;
background: var(--wsp-green-softer);
box-shadow: 0 0 0 10px rgba(69, 221, 139, 0.09);
}
.wsp-oscard__brand svg {
width: clamp(50px, 9.5vw, 68px);
height: clamp(50px, 9.5vw, 68px);
color: var(--wsp-dark);
}
.wsp-oscard--android .wsp-oscard__brand svg {
color: var(--wsp-green-deep);
}
.wsp-oscard h3 {
margin: 0;
font-size: clamp(1.1rem, 2.2vw, 1.4rem);
}
.wsp-oscard > p {
margin: 0 0 0.4rem;
font-size: 0.88rem;
line-height: 1.5;
color: var(--wsp-body);
}
.wsp-oscard__checks {
display: grid;
gap: 0.3rem;
margin: auto 0 0;
padding: 0;
list-style: none;
}
/*
* Der Haken sitzt an der ersten Zeile, nicht in der Mitte: Bei zweizeiligem
* Text stand er sonst frei zwischen den Zeilen und wirkte verloren.
*/
.wsp-oscard__checks li {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.35rem;
font-size: 0.82rem;
font-weight: 700;
line-height: 1.35;
text-align: left;
color: var(--wsp-green-deep);
}
.wsp-oscard__checks svg {
width: 15px;
height: 15px;
margin-top: 0.12em;
flex: none;
}
/* Ein leises Anheben beim Zeigen, mehr braucht es hier nicht. */
.wsp-oscard {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wsp-oscard:hover {
transform: translateY(-4px);
box-shadow: var(--wsp-shadow-lg);
}
/* --- Kopf der Unterseite -------------------------------------------------- */
/*
* Die Brotkrume ist fuer den dunklen Seitenkopf gemacht — weiss auf dunkel.
* Dieser Kopf ist hell, also die Farben umdrehen. Ohne das stand sie nahezu
* unsichtbar auf dem Mintverlauf.
*/
.wsp-compathero .wsp-breadcrumb {
color: var(--wsp-muted);
}
.wsp-compathero .wsp-breadcrumb a {
color: var(--wsp-green-deep);
}
.wsp-compathero {
padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
background:
radial-gradient(50% 46% at 88% 0%, rgba(69, 221, 139, 0.20), transparent 62%),
linear-gradient(180deg, var(--wsp-green-softer), #ffffff 78%);
}
.wsp-compathero__inner {
display: grid;
gap: clamp(1.75rem, 4vw, 3rem);
align-items: center;
margin-top: clamp(1rem, 2.5vw, 1.75rem);
}
@media (min-width: 900px) {
.wsp-compathero__inner {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
/* Im Quelltext stehen die Zeichen vor dem Text — hier zurueck nach rechts. */
.wsp-compathero__text { order: 1; }
.wsp-compathero__marks { order: 2; }
}
.wsp-compathero h1 {
margin: 0.35rem 0 0.7rem;
font-size: clamp(2rem, 4.4vw, 3.1rem);
}
.wsp-compathero .wsp-lead {
margin: 0;
max-width: 40rem;
}
.wsp-compathero__badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: clamp(1.1rem, 2.4vw, 1.6rem) 0 0;
padding: 0;
list-style: none;
}
.wsp-compathero__badges li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.42rem 0.8rem;
border-radius: var(--wsp-radius-pill);
background: #fff;
border: 1px solid var(--wsp-border);
box-shadow: var(--wsp-shadow-sm);
font-size: 0.83rem;
font-weight: 700;
color: var(--wsp-ink);
}
.wsp-compathero__badges svg {
width: 15px;
height: 15px;
flex: none;
color: var(--wsp-green-deep);
}
.wsp-compathero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-top: clamp(1.4rem, 3vw, 2rem);
}
.wsp-compathero__actions .wsp-btn--ghost {
background: #fff;
color: var(--wsp-ink);
border-color: var(--wsp-border);
}
.wsp-compathero__actions .wsp-btn--ghost:hover {
color: var(--wsp-ink);
border-color: var(--wsp-green);
background: var(--wsp-green-softer);
}
/* --- Die beiden Zeichen als Bildmarke ------------------------------------ */
.wsp-compathero__marks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(0.75rem, 2vw, 1.25rem);
}
.wsp-osmark {
position: relative;
display: grid;
justify-items: center;
gap: 0.6rem;
padding: clamp(1.25rem, 3vw, 2rem) 0.75rem;
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-xl);
background: #fff;
box-shadow: var(--wsp-shadow);
}
.wsp-osmark > svg {
width: clamp(48px, 9vw, 72px);
height: clamp(48px, 9vw, 72px);
color: var(--wsp-dark);
}
.wsp-osmark--android > svg {
color: var(--wsp-green-deep);
}
.wsp-osmark b {
font-size: clamp(0.9rem, 1.8vw, 1.05rem);
color: var(--wsp-ink);
}
/* Der Haken sitzt als Plakette an der Ecke — das Ja zur Plattform. */
.wsp-osmark i {
position: absolute;
top: -10px;
right: -10px;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--wsp-green-deep);
box-shadow: var(--wsp-shadow-sm);
}
.wsp-osmark i svg {
width: 20px;
height: 20px;
color: #fff;
}
/* --- Die Unterseite selbst ----------------------------------------------- */
/* Auf der Unterseite traegt der Kopf schon Hintergrund und Kante. */
.wsp-compat--page {
padding-block: clamp(2.5rem, 5vw, 4rem);
background: none;
border-top: 0;
}
.wsp-compat__h2 {
margin: clamp(2.5rem, 5vw, 4rem) 0 0.5rem;
font-size: clamp(1.5rem, 2.8vw, 2.1rem);
scroll-margin-top: 6rem;
}
.wsp-compat--page > .wsp-container > .wsp-compat__h2:first-child {
margin-top: 0;
}
.wsp-compat__h2lead {
margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
max-width: 46rem;
font-size: 1rem;
line-height: 1.6;
color: var(--wsp-body);
}
.wsp-compat--page .wsp-compat__wall,
.wsp-compat--page .wsp-finder {
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* Das Plattformzeichen ueber den Silhouetten der Tafel. */
.wsp-compat__osmark {
position: absolute;
top: clamp(0.75rem, 2vw, 1.1rem);
right: clamp(0.9rem, 2.4vw, 1.5rem);
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: #fff;
box-shadow: var(--wsp-shadow-sm);
}
.wsp-compat__osmark svg {
width: 26px;
height: 26px;
color: var(--wsp-dark);
}
.wsp-compat__os--android .wsp-compat__osmark svg {
color: var(--wsp-green-deep);
}
.wsp-compat__devices {
position: relative;
}
/* --- Die drei Einrichtungswege ------------------------------------------- */
.wsp-methods {
display: grid;
gap: clamp(0.9rem, 2vw, 1.4rem);
}
@media (min-width: 860px) {
.wsp-methods {
grid-template-columns: repeat(3, 1fr);
}
}
.wsp-method {
display: flex;
flex-direction: column;
padding: clamp(1.25rem, 2.6vw, 1.75rem);
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-lg);
background: #fff;
box-shadow: var(--wsp-shadow-sm);
}
.wsp-method__icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
margin-bottom: 0.85rem;
border-radius: 13px;
background: var(--wsp-green-softer);
}
.wsp-method__icon svg {
width: 24px;
height: 24px;
color: var(--wsp-dark);
}
.wsp-method--android .wsp-method__icon svg {
color: var(--wsp-green-deep);
}
.wsp-method h3 {
margin: 0 0 0.35rem;
font-size: 1.1rem;
}
.wsp-method__os {
display: inline-block;
margin: 0 0 0.7rem;
padding: 0.28rem 0.65rem;
border-radius: var(--wsp-radius-pill);
background: var(--wsp-green-softer);
font-size: 0.78rem;
font-weight: 800;
color: var(--wsp-green-deep);
align-self: flex-start;
}
.wsp-method__text {
margin: 0 0 1rem;
font-size: 0.92rem;
line-height: 1.55;
color: var(--wsp-body);
}
.wsp-method__needshead {
margin: auto 0 0.5rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wsp-muted);
}
.wsp-method__needs {
display: grid;
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.88rem;
line-height: 1.5;
color: var(--wsp-body);
}
.wsp-method__needs li {
position: relative;
padding-left: 1.45rem;
}
.wsp-method__needs li::before {
content: "✓";
position: absolute;
left: 0;
font-weight: 800;
color: var(--wsp-green-deep);
}
/* --- Fragen und Abschluss ------------------------------------------------ */
.wsp-compat__faq {
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
max-width: 52rem;
}
.wsp-compat__extra {
margin-top: clamp(2rem, 4vw, 3rem);
}
.wsp-compat__cta {
margin-top: clamp(2.5rem, 5vw, 4rem);
padding: clamp(1.75rem, 4vw, 3rem);
border-radius: var(--wsp-radius-xl);
background:
radial-gradient(60% 90% at 12% 0%, rgba(69, 221, 139, 0.22), transparent 62%),
linear-gradient(150deg, var(--wsp-dark), var(--wsp-dark-3));
text-align: center;
color: var(--wsp-on-dark);
}
.wsp-compat__cta h2 {
margin: 0 0 0.5rem;
color: #fff;
font-size: clamp(1.5rem, 3vw, 2.2rem);
}
.wsp-compat__cta p {
margin: 0 auto;
max-width: 42rem;
color: var(--wsp-on-dark-muted);
}
.wsp-compat__ctaactions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.65rem;
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* --- Schmale Geraete ----------------------------------------------------- */
@media (max-width: 620px) {
/*
* Die Zeichen bleiben nebeneinander — sie sind die Aussage. Nur der
* Innenabstand geht zurueck, damit beide Karten aufs Telefon passen.
*/
.wsp-oscard {
padding-inline: 0.7rem;
}
.wsp-oscard > p {
font-size: 0.82rem;
}
.wsp-oscard__checks li {
font-size: 0.76rem;
}
.wsp-compathero__actions .wsp-btn,
.wsp-compat__ctaactions .wsp-btn {
flex: 1 1 100%;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.wsp-oscard {
transition: none;
}
}
/* ==========================================================================
26. Erst ansehen, dann entscheiden
Links Inhalt und Handlungsaufruf, rechts ein Browserfenster mit dem
Screenshot der echten Demo, davor eine Telefonvorschau. Der Abschnitt ist
dunkel gehalten — er soll sich vom hellen Rest der Startseite abheben und
als eigener Moment lesen, nicht als weiterer Absatz.
========================================================================== */
.wsp-demo {
position: relative;
padding-block: clamp(3rem, 7vw, 5.5rem);
background:
radial-gradient(46% 52% at 78% 8%, rgba(69, 221, 139, 0.20), transparent 62%),
radial-gradient(38% 40% at 4% 92%, rgba(69, 221, 139, 0.10), transparent 64%),
linear-gradient(155deg, var(--wsp-dark), var(--wsp-dark-2) 55%, var(--wsp-dark-3));
color: var(--wsp-on-dark);
overflow: clip;
}
.wsp-demo__inner {
display: grid;
gap: clamp(2rem, 5vw, 3.5rem);
align-items: center;
}
@media (min-width: 980px) {
.wsp-demo__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
}
/* --- Inhalt --------------------------------------------------------------- */
.wsp-demo .wsp-eyebrow {
color: var(--wsp-green);
}
.wsp-demo h2 {
margin: 0.4rem 0 0.7rem;
color: #fff;
font-size: clamp(1.8rem, 3.6vw, 2.7rem);
}
.wsp-demo .wsp-lead {
margin: 0;
max-width: 34rem;
color: var(--wsp-on-dark-muted);
}
.wsp-demo__cards {
display: grid;
gap: 0.7rem;
margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
padding: 0;
list-style: none;
}
.wsp-demo__cards li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 0.15rem 0.85rem;
padding: 0.9rem 1.1rem;
border: 1px solid var(--wsp-border-dark);
border-radius: var(--wsp-radius);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(4px);
}
.wsp-demo__cardicon {
grid-row: span 2;
align-self: start;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: rgba(69, 221, 139, 0.16);
}
.wsp-demo__cardicon svg {
width: 19px;
height: 19px;
color: var(--wsp-green);
}
.wsp-demo__cards strong {
font-size: 0.98rem;
color: #fff;
}
.wsp-demo__cards li > span:last-child {
font-size: 0.88rem;
line-height: 1.5;
color: var(--wsp-on-dark-muted);
}
.wsp-demo__actions {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
margin-top: clamp(1.4rem, 3vw, 2rem);
}
/* Der Hauptknopf ist der einzige Grund, warum es diesen Abschnitt gibt. */
.wsp-btn--lg {
padding: 1.05rem 1.9rem;
font-size: 1.02rem;
}
/* --- Das Fenster ---------------------------------------------------------- */
.wsp-demo__media {
position: relative;
/* Platz fuer die Telefonvorschau, die unten links heraussteht. */
padding: 0 0 clamp(1.5rem, 4vw, 3rem) clamp(0rem, 4vw, 3.5rem);
}
.wsp-demo__frame {
border-radius: var(--wsp-radius-lg);
background: #f4f8f6;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.10),
0 34px 80px rgba(0, 0, 0, 0.45);
overflow: hidden;
}
.wsp-demo__bar {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.85rem;
background: linear-gradient(180deg, #eef3f0, #e2eae6);
border-bottom: 1px solid #d5e0da;
}
.wsp-demo__dots {
display: inline-flex;
gap: 6px;
flex: none;
}
.wsp-demo__dots i {
width: 11px;
height: 11px;
border-radius: 50%;
background: #ff5f57;
}
.wsp-demo__dots i:nth-child(2) { background: #febc2e; }
.wsp-demo__dots i:nth-child(3) { background: #28c840; }
/* Die Adresszeile nennt das echte Ziel des Knopfes daneben. */
.wsp-demo__addr {
flex: 1;
padding: 0.24rem 0.7rem;
border-radius: var(--wsp-radius-pill);
background: #fff;
font-size: 0.76rem;
color: var(--wsp-muted);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wsp-demo__screen {
position: relative;
aspect-ratio: 1400 / 1073;
background: #fff;
}
.wsp-demo__shot {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* --- Plakette, Telefon und Einblendungen ---------------------------------- */
.wsp-demo__badge {
position: absolute;
top: -0.85rem;
right: clamp(0.75rem, 3vw, 2rem);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.95rem;
border-radius: var(--wsp-radius-pill);
background: var(--wsp-green);
box-shadow: 0 8px 22px rgba(69, 221, 139, 0.35);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wsp-dark);
}
/* Der blinkende Punkt sagt „laeuft gerade" ohne ein Wort. */
.wsp-demo__badge i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--wsp-dark);
animation: wsp-demo-puls 2s ease-in-out infinite;
}
@keyframes wsp-demo-puls {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.8); }
}
.wsp-demo__phone {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
width: clamp(96px, 15%, 168px);
border-radius: clamp(12px, 2.4vw, 22px);
border: 3px solid #0a1f16;
background: #0a1f16;
box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.wsp-demo__phoneshot {
display: block;
width: 100%;
height: auto;
}
.wsp-demo__mark {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.85rem;
border-radius: var(--wsp-radius-pill);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
font-size: 0.78rem;
font-weight: 700;
line-height: 1.2;
color: var(--wsp-ink);
white-space: nowrap;
}
.wsp-demo__mark svg {
width: 15px;
height: 15px;
flex: none;
color: var(--wsp-green-deep);
}
.wsp-demo__mark--1 { left: -0.75rem; top: 22%; }
.wsp-demo__mark--2 { right: -1rem; top: 52%; }
.wsp-demo__mark--3 { right: 8%; bottom: -0.6rem; }
/* Ein leises Anheben beim Zeigen. */
.wsp-demo__frame,
.wsp-demo__phone {
transition: transform 0.4s ease;
}
.wsp-demo__media:hover .wsp-demo__frame {
transform: translateY(-4px);
}
.wsp-demo__media:hover .wsp-demo__phone {
transform: translateY(-8px);
}
/* --- Schmale Geraete ------------------------------------------------------ */
@media (max-width: 979px) {
.wsp-demo__media {
padding-left: clamp(2rem, 8vw, 4rem);
}
}
@media (max-width: 620px) {
/*
* Auf dem Telefon fliegen die seitlichen Einblendungen raus: Sie ragen
* sonst ueber den Rand und stossen an den Bildschirmrand.
*/
.wsp-demo__mark--1,
.wsp-demo__mark--2 {
display: none;
}
.wsp-demo__mark--3 {
right: auto;
left: 50%;
transform: translateX(-50%);
}
.wsp-demo__actions .wsp-btn {
flex: 1 1 100%;
justify-content: center;
}
.wsp-demo__addr {
font-size: 0.7rem;
}
}
@media (prefers-reduced-motion: reduce) {
.wsp-demo__badge i {
animation: none;
}
.wsp-demo__frame,
.wsp-demo__phone {
transition: none;
}
}
/* ==========================================================================
27. Neueste Ratgeberbeitraege
Bewusst ohne Beitragsbilder: Reihen statt Karten, getragen von Typografie,
einem Themensymbol und einer feinen Linie. Der Abschnitt steht im
Seiteninhalt und muss sich deshalb gegen die Regeln aus Abschnitt 16
behaupten — daher die Zuruecksetzungen gleich zu Beginn.
========================================================================== */
.wsp-reads {
margin-block: clamp(2.5rem, 5vw, 4rem);
padding: clamp(1.75rem, 4vw, 3rem);
border: 1px solid var(--wsp-border);
border-radius: var(--wsp-radius-xl);
background:
radial-gradient(52% 44% at 92% 4%, rgba(69, 221, 139, 0.14), transparent 62%),
linear-gradient(180deg, #ffffff, var(--wsp-bg-soft));
}
/* Die Liste im Inhaltsbereich traegt sonst Aufzaehlungspunkte und Einzug. */
.wsp-content .wsp-reads__list,
.wsp-reads__list {
margin: 0;
padding-left: 0;
list-style: none;
}
.wsp-reads__head {
max-width: 44rem;
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.wsp-content .wsp-reads h2,
.wsp-reads__head h2 {
margin: 0.35rem 0 0.6rem;
font-size: clamp(1.5rem, 2.9vw, 2.15rem);
}
.wsp-content .wsp-reads__lead,
.wsp-reads__lead {
margin: 0;
font-size: 1.02rem;
line-height: 1.6;
color: var(--wsp-body);
}
/* --- Die Reihen ----------------------------------------------------------- */
.wsp-reads__list {
display: grid;
column-gap: clamp(1.5rem, 3vw, 2.75rem);
}
@media (min-width: 900px) {
.wsp-reads__list {
grid-template-columns: 1fr 1fr;
}
/*
* Bleibt eine Reihe uebrig, laeuft sie ueber beide Spalten. Sonst stuende
* am Ende eine einzelne Kachel und die Liste sieht aus, als fehle etwas.
*/
.wsp-reads__item:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
.wsp-reads__item {
position: relative;
border-top: 1px solid var(--wsp-border);
}
/* In der ersten Zeile keine Linie — sie waere eine Kante ohne Gegenstueck. */
.wsp-reads__item:first-child {
border-top: 0;
}
@media (min-width: 900px) {
.wsp-reads__item:nth-child(2) {
border-top: 0;
}
}
.wsp-reads__item article {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.25rem 1rem;
padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(0.75rem, 1.6vw, 1.1rem);
border-radius: var(--wsp-radius);
transition: background 0.22s ease, transform 0.22s ease;
}
/*
* Die Hervorhebung liegt hinter der Reihe und ist etwas breiter als der Text.
* Ein Rahmen waere zu laut fuer eine Liste, in der sechs Reihen untereinander
* stehen.
*/
.wsp-reads__item:hover article,
.wsp-reads__item:has(a:focus-visible) article {
background: #fff;
box-shadow: var(--wsp-shadow-sm);
transform: translateY(-2px);
}
.wsp-reads__icon {
align-self: center;
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-top: 0.1rem;
border-radius: 13px;
background: var(--wsp-green-softer);
transition: background 0.22s ease;
}
.wsp-reads__icon svg {
width: 21px;
height: 21px;
color: var(--wsp-green-deep);
}
.wsp-reads__item:hover .wsp-reads__icon {
background: var(--wsp-green);
}
.wsp-reads__badge {
display: inline-block;
margin-bottom: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: var(--wsp-radius-pill);
background: rgba(15, 122, 71, 0.09);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--wsp-green-deep);
}
.wsp-content .wsp-reads__title,
.wsp-reads__title {
margin: 0;
font-size: clamp(1.05rem, 1.9vw, 1.2rem);
line-height: 1.3;
letter-spacing: -0.01em;
}
.wsp-reads__title a {
color: var(--wsp-ink);
text-decoration: none;
transition: color 0.22s ease;
}
/*
* Der Verweis deckt die ganze Reihe ab. Damit ist die Flaeche anklickbar,
* ohne dass im Markup drei Verweise auf dasselbe Ziel stehen — fuer die
* Tastatur bleibt es ein Sprungziel je Beitrag.
*/
.wsp-reads__title a::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--wsp-radius);
}
.wsp-reads__item:hover .wsp-reads__title a {
color: var(--wsp-green-deep);
}
.wsp-reads__title a:focus-visible {
outline: none;
}
/* Der Fokus zeigt sich an der Reihe, weil der Verweis sie ganz ausfuellt. */
.wsp-reads__item:has(a:focus-visible) article {
outline: 3px solid var(--wsp-green);
outline-offset: 2px;
}
/* --- Abschluss ------------------------------------------------------------ */
.wsp-content .wsp-reads__all,
.wsp-reads__all {
margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
border-top: 1px solid var(--wsp-border);
text-align: center;
}
.wsp-reads__all .wsp-btn--ghost {
background: #fff;
color: var(--wsp-ink);
border-color: var(--wsp-border);
}
.wsp-reads__all .wsp-btn--ghost:hover {
color: var(--wsp-ink);
border-color: var(--wsp-green);
background: var(--wsp-green-softer);
}
/* --- Schmale Geraete ------------------------------------------------------ */
@media (max-width: 560px) {
.wsp-reads {
padding-inline: clamp(0.9rem, 4vw, 1.5rem);
}
.wsp-reads__item article {
padding-inline: 0.4rem;
}
/* Auf dem Telefon steht das Symbol ueber dem Text, nicht daneben. */
.wsp-reads__item article {
grid-template-columns: 1fr;
}
.wsp-reads__icon {
margin-bottom: 0.5rem;
}
.wsp-reads__all .wsp-btn {
width: 100%;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.wsp-reads__item article,
.wsp-reads__icon,
.wsp-reads__title a {
transition: none;
}
.wsp-reads__item:hover article {
transform: none;
}
}