/* schnelleStelle.de website — design system (OpenSpec website-studio).
   Derived 1:1 from the THE SLOT CI landingpage (public/the-slot-ci-landingpage.html,
   Corporate Design Handbuch 09/2026). The CSS variable is binding, the hex value only
   serves the visual check. Pages in the Template Studio use these classes only; editors
   do not define colours, fonts or layouts of their own. */

@font-face{font-family:"Titillium Web";font-weight:400;font-style:normal;font-display:swap;
  src:local("Titillium Web"),local("TitilliumWeb-Regular"),url("/website-assets/fonts/titillium-web-latin-400.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-weight:600;font-style:normal;font-display:swap;
  src:local("Titillium Web SemiBold"),local("TitilliumWeb-SemiBold"),url("/website-assets/fonts/titillium-web-latin-600.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-weight:700;font-style:normal;font-display:swap;
  src:local("Titillium Web Bold"),local("TitilliumWeb-Bold"),url("/website-assets/fonts/titillium-web-latin-700.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-weight:900;font-style:normal;font-display:swap;
  src:local("Titillium Web Black"),local("TitilliumWeb-Black"),url("/website-assets/fonts/titillium-web-latin-900.woff2") format("woff2")}
/* Roboto only from the variable file: an installed static Roboto (local()) would be taken for every
   weight from 300 to 700, so light, regular and bold text looked the same. */
@font-face{font-family:"Roboto";font-weight:300 700;font-style:normal;font-display:swap;
  src:url("/website-assets/fonts/roboto-latin-variable.woff2") format("woff2")}

:root{
  --color-primary:#00DD00; --color-primary-dark:#006600; --color-primary-ink:#008A00; --color-primary-neon:#00DD00; --color-primary-muted:#E5F8EB;
  --color-secondary:#0074B2; --color-secondary-dark:#005785; --color-secondary-light:#00A4FF; --color-secondary-muted:#E6F1F7;
  --color-design-light:#1B668E; --color-design:#03314D; --color-design-dark:#02111D;
  --color-surface:#FFFFFF; --color-bg:#FAFAFA; --color-border:#E9EAEB; --color-border-dark:#D5D7DA;
  --color-headline:#000000; --color-text:#414651; --color-text-dark:#2B2F36; --color-text-muted:#6B6F76;
  --radius-sm:6px; --radius-md:8px; --radius-lg:16px; --radius-xl:20px;
  --shadow-sm:0 1px 2px rgba(2,17,29,.05); --shadow-md:0 8px 24px -12px rgba(2,17,29,.18); --shadow-lg:0 32px 64px -28px rgba(2,17,29,.3);
  --shadow-card:0 1px 2px rgba(2,17,29,.05),0 14px 40px -28px rgba(2,17,29,.25);
  --font-head:'Titillium Web','Segoe UI',sans-serif; --font-body:'Roboto','Helvetica Neue',Arial,sans-serif;
  --line:rgba(2,17,29,.09);
  --space-1:32px; --space-2:48px; --space-3:64px; --space-4:96px; --space-5:128px;
  --ease:cubic-bezier(.16,.84,.34,1);
  --header-h:78px;
  --container:1240px;
}

/* ── reset + type scale (Handbuch 03/04) ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;
  font-family:var(--font-body);font-weight:300;font-size:18px;line-height:1.6;
  color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;
  font-feature-settings:'kern' 1;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{font-family:var(--font-head);font-weight:600;letter-spacing:-0.02em;color:var(--color-headline);line-height:1.2;text-wrap:balance}
h1{font-size:48px;line-height:60px}
h2{font-size:36px;line-height:44px}
h3{font-size:22px;line-height:30px}
h4{font-size:18px;line-height:28px}
p{text-wrap:pretty}
b,strong{font-weight:600;color:var(--color-text-dark)}
img,svg,video{max-width:100%;height:auto;display:block}
/* inline icons without a size of their own (zero specificity, components override) */
:where(.ws-body) svg:where([aria-hidden="true"]:not([width])){width:1.15em;height:1.15em;flex:none}
a{color:var(--color-primary-ink);text-decoration:none}
a:hover{color:var(--color-primary-dark)}
:focus-visible{outline:2px solid var(--color-primary-ink);outline-offset:3px;border-radius:4px}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
.ws-sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ws-skip{position:absolute;left:16px;top:-60px;z-index:100;background:#fff;padding:10px 16px;border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
.ws-skip:focus{top:12px}

.ws-display{font-size:60px;line-height:76px}
.ws-pre{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:500;font-size:14px;line-height:22px;
  text-transform:uppercase;letter-spacing:1.8px;color:var(--color-primary-ink);
}
.ws-pre--muted{color:var(--color-text-muted)}
.ws-lead{font-size:22px;line-height:32px;font-weight:300;color:var(--color-text-dark)}
.ws-small{font-size:14px;line-height:20px;color:var(--color-text-muted)}
.ws-accent{color:var(--color-primary-ink)}
.ws-gradient-word{
  background:linear-gradient(90deg,var(--color-primary-neon),var(--color-design-light),var(--color-primary-neon));
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ws-gradient-shift 5s ease-in-out infinite alternate;
}
@keyframes ws-gradient-shift{from{background-position:0% 50%}to{background-position:100% 50%}}

.ws-container{max-width:var(--container);margin:0 auto;padding:0 32px;width:100%}
.ws-center{text-align:center}
.ws-mt-1{margin-top:16px}.ws-mt-2{margin-top:24px}.ws-mt-3{margin-top:40px}

/* ── buttons + pills (Handbuch 06/07) ───────────────────────────────── */
.ws-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:var(--radius-md);
  font-family:var(--font-body);font-weight:500;font-size:17px;line-height:1.2;text-decoration:none;
  border:2px solid transparent;position:relative;overflow:hidden;cursor:pointer;white-space:nowrap;
  transition:filter .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.ws-btn svg{width:18px;height:18px;flex:none}
.ws-btn--sm{min-height:40px;padding:0 18px;font-size:15px}
.ws-btn--primary{background:var(--color-primary);color:var(--color-design-dark)}
.ws-btn--primary:hover{filter:brightness(.94);color:var(--color-design-dark)}
.ws-btn--outline{background:transparent;color:var(--color-primary-ink);border-color:var(--color-primary-ink)}
.ws-btn--outline:hover{background:var(--color-primary-muted);color:var(--color-primary-dark)}
.ws-btn--ghost{background:#fff;color:var(--color-text-dark);border-color:var(--color-border-dark)}
.ws-btn--ghost:hover{border-color:var(--color-text-muted);color:var(--color-text-dark)}
.ws-btn--white{background:#fff;color:var(--color-design)}
.ws-btn--white:hover{color:var(--color-design-dark);filter:brightness(.96)}
.ws-btn--link{min-height:auto;padding:0;border:0;background:none;color:var(--color-primary-ink);font-size:16px}
.ws-btn--link:hover{color:var(--color-primary-dark)}
.ws-btn--link::after{display:none}
.ws-btn::after{
  content:'';position:absolute;top:-20%;left:-40%;width:30%;height:140%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;
}
.ws-btn:hover::after{left:120%}
.ws-btn[disabled],.ws-btn.is-loading{opacity:.7;pointer-events:none}
.ws-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px}
.ws-actions--center{justify-content:center}

.ws-pill{
  display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 12px;border-radius:999px;
  font-size:13px;font-weight:500;letter-spacing:.02em;background:#F1F3F4;color:var(--color-text-dark);line-height:1.3;
}
.ws-pill--primary{background:var(--color-primary-muted);color:var(--color-primary-dark)}
.ws-pill--secondary{background:var(--color-secondary-muted);color:var(--color-secondary-dark)}
.ws-pill i{width:8px;height:8px;border-radius:50%;background:var(--color-primary-neon)}
.ws-pills{display:flex;gap:8px;flex-wrap:wrap}

/* ── header ─────────────────────────────────────────────────────────── */
.ws-header{
  position:sticky;top:0;z-index:60;height:var(--header-h);display:flex;align-items:center;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--color-border);transition:box-shadow .2s var(--ease);
}
.ws-header.is-scrolled{box-shadow:0 8px 24px -18px rgba(2,17,29,.35)}
.ws-header__inner{max-width:var(--container);margin:0 auto;padding:0 32px;width:100%;display:flex;align-items:center;gap:28px}
.ws-logo{display:flex;align-items:center;flex:none}
.ws-logo img{height:40px;width:auto}
.ws-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.ws-nav__item{position:relative}
.ws-nav__link{
  display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:var(--radius-md);
  font-size:15.5px;font-weight:400;color:var(--color-text-dark);background:none;border:0;cursor:pointer;font-family:var(--font-body);
}
.ws-nav__link:hover,.ws-nav__item.is-open > .ws-nav__link,.ws-nav__link[aria-current="page"],.ws-nav__item.is-active > .ws-nav__link{color:var(--color-primary-dark);background:var(--color-primary-muted)}
.ws-nav__link svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.ws-nav__item.is-open > .ws-nav__link svg{transform:rotate(180deg)}
.ws-nav__panel{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);min-width:380px;
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:10px;opacity:0;visibility:hidden;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.ws-nav__item.is-open > .ws-nav__panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.ws-nav__panel a{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:10px 12px;border-radius:12px;color:var(--color-text-dark)}
.ws-nav__panel a:hover{background:var(--color-bg)}
.ws-nav__panel a i{width:36px;height:36px;border-radius:10px;background:var(--color-primary-muted);color:var(--color-primary-ink);display:grid;place-items:center}
.ws-nav__panel a i svg{width:18px;height:18px}
.ws-nav__panel b{display:block;font-weight:500;font-size:15px;color:var(--color-headline)}
.ws-nav__panel span{display:block;font-size:13px;line-height:1.45;color:var(--color-text-muted);margin-top:2px}
.ws-header__actions{display:flex;align-items:center;gap:10px;flex:none}
.ws-header__phone{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--color-text-dark);font-weight:400;padding:0 6px}
.ws-header__phone svg{width:16px;height:16px;color:var(--color-primary-ink)}
.ws-burger{display:none;width:44px;height:44px;border-radius:var(--radius-md);border:1px solid var(--color-border-dark);background:#fff;cursor:pointer;place-items:center;color:var(--color-text-dark)}
.ws-burger svg{width:22px;height:22px}
@media (max-width:1180px){.ws-header__phone{display:none}}
@media (max-width:1040px){
  .ws-burger{display:grid}
  .ws-header__actions{margin-left:auto}
  .ws-nav{
    position:fixed;inset:var(--header-h) 0 0 0;margin:0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;padding:16px 20px 120px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  }
  body.ws-nav-open .ws-nav{opacity:1;visibility:visible;transform:none}
  body.ws-nav-open{overflow:hidden}
  .ws-nav__link{width:100%;justify-content:space-between;height:52px;font-size:17px;padding:0 8px}
  .ws-nav__panel{position:static;transform:none!important;min-width:0;box-shadow:none;border:0;padding:0 0 8px;display:none;opacity:1;visibility:visible}
  .ws-nav__item.is-open > .ws-nav__panel{display:block}
  .ws-header__actions .ws-btn--ghost{display:none}
  .ws-nav__mobile-actions{display:grid!important;gap:10px;margin-top:20px}
}
.ws-nav__mobile-actions{display:none}
@media (max-width:560px){.ws-header__actions .ws-btn--primary{display:none}.ws-logo img{height:34px}}

/* ── breadcrumb ─────────────────────────────────────────────────────── */
.ws-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.ws-breadcrumb a{color:var(--color-text-muted)}
.ws-breadcrumb a:hover{color:var(--color-primary-dark)}
.ws-breadcrumb li{display:inline-flex;align-items:center;gap:6px}
.ws-breadcrumb li + li::before{content:'';width:5px;height:5px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.6;margin-right:4px}
.ws-breadcrumb [aria-current]{color:var(--color-text-dark)}

/* ── hero / stage (Handbuch 09) ─────────────────────────────────────── */
.ws-hero{
  position:relative;isolation:isolate;overflow:hidden;padding:var(--space-3) 0 var(--space-3);
  background:linear-gradient(180deg,#F2FAF3 0%,#FFFFFF 70%);border-bottom:1px solid var(--line);
}
.ws-hero::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(2,17,29,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(2,17,29,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 15% 0%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 15% 0%,#000 10%,transparent 70%);
}
.ws-hero::after{
  content:'';position:absolute;z-index:-1;width:1100px;height:900px;right:-380px;top:-420px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,221,0,.16),rgba(0,138,0,.05) 55%,transparent 72%);
}
.ws-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:56px;align-items:center;margin-top:28px}
.ws-hero--text .ws-hero__grid{grid-template-columns:minmax(0,1fr)}
.ws-hero--text .ws-hero__copy{max-width:860px}
.ws-hero--center{text-align:center}
.ws-hero--center .ws-hero__copy{margin:0 auto}
.ws-hero--center .ws-actions,.ws-hero--center .ws-hero__checks{justify-content:center}
.ws-hero--center .ws-breadcrumb{justify-content:center}
.ws-hero h1{margin:14px 0 18px;max-width:20ch}
.ws-hero--center h1,.ws-hero--text h1{max-width:none}
.ws-hero .ws-lead{max-width:56ch}
.ws-hero--center .ws-lead{margin-left:auto;margin-right:auto}
.ws-kicker{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-primary-ink);font-weight:500}
.ws-kicker::before{content:'';width:28px;height:2px;background:var(--color-primary)}
.ws-hero__checks{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:14px;color:var(--color-text-muted)}
.ws-hero__checks span::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-primary-neon);margin-right:8px;vertical-align:1px}
.ws-hero__media{position:relative}
.ws-hero__media img{width:100%;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);background:#fff}
.ws-hero__media--plain img{box-shadow:none;border-radius:0;background:none}
/* hero photo (5:4) and screenshot in a browser frame; the badge of the former tile stays on top */
.ws-hero__media--photo img{aspect-ratio:5/4;object-fit:cover}
.ws-browser{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:#fff}
.ws-browser::before{
  content:'';display:block;height:34px;border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 20px 17px,#D5D7DA 5px,transparent 5.5px),radial-gradient(circle at 38px 17px,#D5D7DA 5px,transparent 5.5px),radial-gradient(circle at 56px 17px,#D5D7DA 5px,transparent 5.5px),#F4F5F6;
}
.ws-hero__media .ws-browser img{border-radius:0;box-shadow:none}
/* second photo that fades in and out over the first (e.g. Rico Bogen) */
.ws-hero__media .ws-hero__frame img.ws-hero__fade{position:absolute;inset:0;height:100%;opacity:0;animation:ws-kb-2 24s ease-in-out infinite alternate,ws-crossfade 14s ease-in-out infinite}
@keyframes ws-crossfade{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
/* partner logos instead of a picture, and a tile with partner logos */
.ws-hero__media--logos > .ws-logos{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.ws-hero__media--logos{display:flex;flex-direction:column;align-items:center}
.ws-hero__media--logos > .ws-hero-tile__badge{position:relative;left:auto;bottom:auto;margin-top:22px}
.ws-hero-tile--logos{padding:40px}
.ws-hero-tile--logos .ws-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin:0}
.ws-hero-tile--logos .ws-logos li{height:86px;box-shadow:none}
.ws-hero-tile--logos .ws-logos li:last-child:nth-child(odd){grid-column:1 / -1}
.ws-hero-tile--logos .ws-logos img{max-height:58px}
@media (max-width:960px){.ws-hero-tile--logos{padding:26px}.ws-hero-tile--logos .ws-logos li{padding:8px 10px}}
/* wide snippet (a search bar, a row of numbers) floating over the lower edge of the browser frame */
.ws-hero__media .ws-float.ws-float--wide{left:5%;right:auto;top:auto;bottom:-24px;width:90%;max-width:none;border-radius:10px}
.ws-hero__media--contain img{object-fit:contain;max-height:440px;margin:0 auto}
.ws-hero-tile{
  position:relative;aspect-ratio:1/1;max-width:420px;margin-left:auto;border-radius:28px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);display:grid;place-items:center;
}
.ws-hero-tile::before{content:'';position:absolute;inset:22px;border-radius:20px;border:1px dashed rgba(0,138,0,.25)}
.ws-hero-tile svg{width:42%;height:42%;color:var(--color-primary-ink);stroke-width:1.4}
.ws-hero-tile__badge{position:absolute;left:-18px;bottom:36px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);padding:12px 16px;display:flex;gap:10px;align-items:center;font-size:14px;color:var(--color-text-dark);font-weight:500}
.ws-hero-tile__badge i{width:10px;height:10px;border-radius:50%;background:var(--color-primary-neon);box-shadow:0 0 0 4px rgba(0,221,0,.18)}
.ws-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px;margin-top:32px;border-top:1px solid var(--line);max-width:640px}
.ws-facts > div{padding:14px 0;border-bottom:1px solid var(--line)}
.ws-facts dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:4px}
.ws-facts dd{font-family:var(--font-head);font-size:28px;line-height:1.1;font-weight:600;color:var(--color-primary-ink)}
.ws-facts dd small{font-family:var(--font-body);font-size:14px;font-weight:400;color:var(--color-text-muted);margin-left:6px}
.ws-hero--article{padding-bottom:var(--space-2)}
.ws-hero--article h1{font-size:42px;line-height:52px;max-width:26ch}
.ws-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:14px;color:var(--color-text-muted)}
.ws-meta span{display:inline-flex;align-items:center;gap:6px}
.ws-meta svg{width:16px;height:16px}

/* ── sections ───────────────────────────────────────────────────────── */
.ws-section{padding:var(--space-4) 0}
.ws-section--tight{padding:var(--space-3) 0}
.ws-section--white{background:var(--color-surface)}
.ws-section--tint{background:#F2FAF3}
.ws-section--line{border-top:1px solid var(--line)}
.ws-section-head{max-width:68ch;margin:0 auto var(--space-2);text-align:center}
/* a second section head further down in the same section gets the full section spacing (e.g. "Ablauf für Kunden" on jobSHARE-Link) */
.ws-container > .ws-section-head:not(:first-child){margin-top:var(--space-3)}
.ws-section-head h2{margin:10px 0 14px}
.ws-section-head p{color:var(--color-text);font-size:18px}
.ws-section-head--left{text-align:left;margin-left:0}
/* two sections with the same background share one gap; after a different background the full padding stays */
:is(.ws-section:not(.ws-section--white,.ws-section--tint) + .ws-section:not(.ws-section--white,.ws-section--tint),
  .ws-section--white + .ws-section--white,.ws-section--tint + .ws-section--tint):not(.ws-section--line){padding-top:0}

/* ── grids + cards ──────────────────────────────────────────────────── */
.ws-grid{display:grid;gap:20px}
.ws-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ws-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ws-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ws-card{
  position:relative;display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:26px 28px;box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
a.ws-card:hover,.ws-card--link:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(0,138,0,.25)}
.ws-card h3{font-size:20px;line-height:28px;margin-bottom:8px}
.ws-card p{font-size:15.5px;line-height:1.55;color:var(--color-text)}
.ws-card p + p{margin-top:10px}
/* A button or button row at the end of a card sits at its bottom, so the buttons of a row of cards
   line up whatever the text length (OpenSpec website-radio-visual). */
.ws-card > :is(.ws-btn,.ws-actions):last-child{margin-top:auto}
.ws-card > :has(+ :is(.ws-btn,.ws-actions):last-child){margin-bottom:24px}
.ws-card > .ws-btn:last-child{align-self:stretch;justify-content:center}
.ws-card .ws-card__more{margin-top:auto;padding-top:18px;font-size:15px;font-weight:500;color:var(--color-primary-ink);display:inline-flex;align-items:center;gap:6px}
.ws-card__more svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.ws-split__media .ws-card__more{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-weight:500}
.ws-card:hover .ws-card__more svg{transform:translateX(3px)}
.ws-card__media{margin:-26px -28px 20px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow:hidden;background:var(--color-bg);aspect-ratio:16/9}
.ws-card__media img{width:100%;height:100%;object-fit:cover}
.ws-card__media--contain img{object-fit:contain;padding:18px}
.ws-icon{
  width:48px;height:48px;border-radius:12px;background:var(--color-primary-muted);color:var(--color-primary-ink);
  display:grid;place-items:center;margin-bottom:18px;flex:none;
}
.ws-icon svg{width:24px;height:24px}
.ws-icon--lg{width:64px;height:64px;border-radius:16px}
.ws-icon--lg svg{width:30px;height:30px}
/* webinar teaser (events-teaser block, OpenSpec website-event-cards): calendar icon with date
   and start time above the card content; type as in every .ws-card */
.ws-event-card__when{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ws-card .ws-event-card__when{font-size:14px;line-height:20px;color:var(--color-text-muted)}
/* same look as .ws-icon of the cards: rounded square, primary muted, primary ink */
.ws-event-card__icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--color-primary-muted);color:var(--color-primary-ink)}
.ws-event-card__icon svg{width:22px;height:22px}
.ws-event-card .ws-pre + h3{margin-top:10px}
/* case study teaser (OpenSpec website-case-teaser): picture left, text right, the customer logo in
   a white circle on the border between both; below 760 px picture on top, logo on its lower edge */
.ws-case{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--color-surface);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden}
.ws-case__media{min-height:340px;background:var(--color-bg)}
.ws-case__media img{display:block;width:100%;height:100%;object-fit:cover}
.ws-case__logo{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:124px;height:124px;padding:22px;border-radius:50%;background:#fff;box-shadow:var(--shadow-md)}
.ws-case__logo img{width:100%;height:auto;max-height:64px;object-fit:contain}
.ws-case__body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:48px 56px 48px 92px}
.ws-case__body h3{font-size:30px;line-height:38px;margin-bottom:14px}
.ws-case__body p{font-size:16px;line-height:1.7;color:var(--color-text)}
.ws-case__body .ws-card__more{display:inline-flex;align-items:center;gap:6px;margin-top:22px;font-size:16px;font-weight:500;color:var(--color-primary-ink)}
.ws-case__body .ws-card__more:hover svg{transform:translateX(3px)}
@media (max-width:960px){.ws-case__body{padding:36px 32px 36px 80px}.ws-case__body h3{font-size:24px;line-height:31px}}
@media (max-width:760px){
  .ws-case{grid-template-columns:minmax(0,1fr)}
  .ws-case__media{min-height:0;height:220px}
  .ws-case__logo{top:220px;left:28px;transform:translateY(-50%);width:96px;height:96px;padding:16px}
  .ws-case__body{padding:64px 24px 28px}
}
.ws-card--plain{box-shadow:none;background:transparent;border:0;padding:0}
.ws-card--muted{background:var(--color-bg);box-shadow:none}

/* channels (OpenSpec website-phone-frame): brand marks in the light green field of .ws-icon with a
   label below, e.g. where the jobSHARE-Link can be shared; an entry may be a link */
.ws-channels{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:24px}
.ws-channels li,.ws-channels li > a{display:flex;flex-direction:column;align-items:center;gap:8px}
.ws-channels .ws-icon{margin:0}
.ws-channels span:last-child{font-size:14px;line-height:1.3;font-weight:500;color:var(--color-text-dark)}
.ws-channels a:hover .ws-icon{background:var(--color-primary-ink);color:#fff}

/* text/image split */
.ws-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
/* Text next to a stack of cards starts at the top, not centred against it (TASK-1062, webinar pages). */
.ws-split--top,.ws-split:has(> .ws-grid){align-items:start}
.ws-split--reverse .ws-split__media{order:-1}
.ws-split__copy h2{margin:10px 0 16px}
.ws-split__copy h3{margin:22px 0 8px}
.ws-split__copy p{margin-top:12px}
.ws-split__copy .ws-pre + h2{margin-top:10px}
.ws-split__media img{display:block;width:auto;max-width:100%;height:auto;max-height:min(680px,82vh);margin-inline:auto;border-radius:var(--radius-xl)}
.ws-split__media img[src$=".svg"]{max-width:min(100%,220px);margin-inline:0;border-radius:0}
.ws-split__media--card img:not([src$=".svg"]){width:100%}
.ws-split__media--card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-card)}
.ws-split__media--card img{border-radius:12px}
.ws-split__media--plain img{border-radius:0}
/* screenshot in an iPhone frame (OpenSpec website-phone-frame): the media box is the phone body,
   with dynamic island and side buttons; the image is the screen */
.ws-split__media--phone{position:relative;justify-self:center;width:min(100%,330px);margin-inline:auto;padding:12px;border-radius:54px;background:linear-gradient(145deg,#2B2F36,#02111D);box-shadow:0 0 0 1.5px #4B5160 inset,0 0 0 1px rgba(2,17,29,.35),var(--shadow-lg)}
.ws-split__media--phone::before{content:'';position:absolute;z-index:1;top:24px;left:50%;width:31%;height:25px;border-radius:999px;background:#000;transform:translateX(-50%)}
.ws-split__media--phone::after{content:'';position:absolute;top:120px;right:-3px;width:3px;height:64px;border-radius:0 2px 2px 0;background:#2B2F36}
.ws-split__media.ws-split__media--phone img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:9/19.5;object-fit:cover;object-position:top;border-radius:42px;background:#fff}
/* iPhone frame for any screen (OpenSpec website-socialrecruiting-channels): same device as above,
   all measures from the width --w. The screen holds an <img> or <video>. ws-phone--legacy shows
   only the screen of the old mockups (690 × 1078, iPhone with notch, screen 421 × 909 at 133/22),
   so the files stay as they are – their notch is covered by a notch of the frame; videos get their own play button (site.js). */
.ws-phone{--w:330px;position:relative;width:min(100%,var(--w));margin-inline:auto;padding:calc(var(--w) * .0364);border-radius:calc(var(--w) * .164);background:linear-gradient(145deg,#2B2F36,#02111D);box-shadow:0 0 0 1.5px #4B5160 inset,0 0 0 1px rgba(2,17,29,.35),var(--shadow-lg)}
.ws-phone::before{content:'';position:absolute;z-index:3;top:calc(var(--w) * .073);left:50%;width:31%;height:calc(var(--w) * .076);border-radius:999px;background:#000;transform:translateX(-50%)}
.ws-phone::after{content:'';position:absolute;top:calc(var(--w) * .36);right:-3px;width:3px;height:calc(var(--w) * .19);border-radius:0 2px 2px 0;background:#2B2F36}
.ws-phone__screen{position:relative;overflow:hidden;aspect-ratio:9/19.5;border-radius:calc(var(--w) * .127);background:#fff;isolation:isolate}
.ws-phone__screen > :is(img,video){display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:cover;object-position:top;border-radius:0;box-shadow:none;animation:none}
.ws-phone--legacy .ws-phone__screen{aspect-ratio:421/909}
.ws-phone--legacy::before{top:calc(var(--w) * .0364 - 1px);width:43.5%;height:calc(var(--w) * .086);border-radius:0 0 calc(var(--w) * .05) calc(var(--w) * .05)}
.ws-phone--legacy .ws-phone__screen > :is(img,video){position:absolute;left:-31.59%;top:-2.42%;width:163.9%;height:auto;object-fit:fill}
.ws-phone video{cursor:pointer}
.ws-phone__play{position:absolute;z-index:2;inset:0;margin:auto;width:calc(var(--w) * .2);height:calc(var(--w) * .2);min-width:48px;min-height:48px;border:0;border-radius:50%;background:var(--color-primary-neon);color:var(--color-design-dark);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.45);cursor:pointer;transition:opacity .2s,transform .2s}
.ws-phone__play svg{width:44%;height:44%;margin-left:8%}
.ws-phone__play:hover{transform:scale(1.06)}
.ws-phone.is-playing .ws-phone__play{opacity:0;pointer-events:none}
.ws-hero__media--phone{display:flex;justify-content:center}
.ws-hero__media--phone .ws-phone{--w:310px}
/* key-figure card instead of an illustration (OpenSpec website-multiposting-visuals, proposal B) */
.ws-figure{display:flex;flex-direction:column;align-items:flex-start;padding:40px 44px;container-type:inline-size}
.ws-figure .ws-icon{margin-bottom:22px}
.ws-figure__big{font-family:var(--font-head);font-size:min(64px,12cqi);line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--color-headline)}
.ws-figure .ws-lead{margin-top:10px}
@media (max-width:640px){.ws-figure{padding:28px 24px}.ws-figure__big{font-size:min(46px,12cqi)}}

/* check list */
.ws-checks{display:grid;gap:12px;margin-top:20px}
.ws-checks li{position:relative;padding-left:34px;font-size:16.5px;line-height:1.5;color:var(--color-text-dark)}
.ws-checks li::before{
  content:'';position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:var(--color-primary-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008A00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ws-checks--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}

/* process steps */
.ws-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:step}
.ws-steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ws-step{position:relative;padding:26px 24px 24px;border:1px solid var(--line);border-radius:var(--radius-xl);background:#fff;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ws-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
/* step number (OpenSpec website-step-numbers): large filled two-digit number in green, neon bar below */
.ws-step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);display:inline-block;padding-bottom:10px;border-bottom:3px solid var(--color-primary-neon);
  font-family:var(--font-head);font-size:42px;font-weight:700;letter-spacing:-.02em;color:var(--color-primary-ink);line-height:1;
}
.ws-step h3,.ws-step h4{font-size:18px;line-height:26px;margin:14px 0 6px}
.ws-step p{font-size:15px;color:var(--color-text);line-height:1.55}
.ws-step,.ws-card,.ws-box,.ws-checks li{overflow-wrap:break-word;hyphens:auto}
/* long URLs in sources and long compound words in headlines never leave their column */
.ws-prose p,.ws-prose li{overflow-wrap:anywhere}
h1,h2,h3,.ws-display{overflow-wrap:break-word;hyphens:auto}
/* tables scroll sideways on small screens instead of squeezing every column; words are hyphenated, not cut */
main table{display:block;max-width:100%;overflow-x:auto}
main td,main th{min-width:140px;overflow-wrap:break-word;hyphens:auto}
.ws-split__copy .ws-steps,.ws-split__copy .ws-steps--4{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:22px}
.ws-split__copy .ws-step{padding:18px 20px 18px 64px}
.ws-split__copy .ws-step::before{position:absolute;left:20px;top:18px;padding-bottom:4px;border-bottom-width:2px;font-size:24px}
.ws-split__copy .ws-step h3,.ws-split__copy .ws-step h4{margin-top:0}
.ws-step .ws-btn{margin-top:14px}
/* stats ticker */
.ws-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-card);overflow:hidden}
.ws-stat{padding:26px 24px 28px;border-right:1px solid var(--line)}
.ws-stat:last-child{border-right:0}
.ws-stat{container-type:inline-size}
/* Amount and unit stay on one line ("450,00 €"); in narrow tiles the size follows the tile width. */
.ws-stat b{display:block;font-family:var(--font-head);font-size:min(40px,calc(100cqi / 4.3));line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--color-headline);white-space:nowrap}
.ws-stat b small{display:inline;margin:0 0 0 3px;font-size:20px;font-weight:600;color:var(--color-text-muted)}
.ws-stat--accent b{color:var(--color-primary-ink)}
/* KPI band below the hero: numbers count up when they come into view (site.js) */
.ws-kpis .ws-stat b{font-size:46px}
.ws-kpis .ws-stat b small{font-size:22px}
.ws-stat span{display:block;margin-top:10px;font-size:15px;font-weight:500;color:var(--color-text-dark)}
.ws-stat small{display:block;margin-top:4px;font-size:13px;color:var(--color-text-muted)}
/* Years token inside a figure (TASK-1056): looks like the figure, not like the label below it. */
.ws-stat b > [data-ws-years-since],.ws-facts dd > [data-ws-years-since]{display:inline;margin:0;font:inherit;color:inherit;letter-spacing:inherit}

/* quotes + testimonials */
.ws-quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:30px 32px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:18px}
.ws-quote blockquote{font-family:var(--font-head);font-size:21px;line-height:31px;font-weight:400;color:var(--color-text-dark);letter-spacing:-.01em}
.ws-quote blockquote::before{content:'„';color:var(--color-primary-ink);font-weight:700;margin-right:2px}
.ws-quote blockquote::after{content:'“';color:var(--color-primary-ink);font-weight:700;margin-left:2px}
.ws-quote figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:14.5px;color:var(--color-text-muted);margin-top:auto}
.ws-quote figcaption > span{flex:1 1 170px;min-width:0}
.ws-quote figcaption img{width:auto;max-width:120px;max-height:44px;object-fit:contain}
.ws-quote figcaption img.ws-avatar{width:48px;height:48px;max-height:none;border-radius:50%;object-fit:cover}
.ws-quote figcaption b{display:block;color:var(--color-text-dark);font-weight:500}
.ws-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);align-items:start;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;margin:0 -4px;scrollbar-width:thin}
.ws-rail > *{scroll-snap-align:start}
.ws-rail--3{grid-auto-columns:calc((100% - 40px)/3)}
.ws-rail .ws-quote blockquote,.ws-grid .ws-quote blockquote{font-size:18px;line-height:27px}
/* Testimonial slider (OpenSpec website-quote-slider): one quote at a time, logo on top, quote
   (type of .ws-quote) and "Name, Funktion" centred, dots below (site.js builds them; swiping works without JS).
   Same markup as the rail, only the modifier changes. */
.ws-rail--slider{grid-auto-columns:100%;align-items:center;gap:0;padding:0;margin:0;scrollbar-width:none;overscroll-behavior-x:contain}
.ws-rail--slider::-webkit-scrollbar{display:none}
.ws-rail--slider > *{scroll-snap-stop:always}
.ws-rail--slider .ws-quote{display:grid;justify-items:center;gap:0;max-width:960px;margin:0 auto;padding:8px 24px;background:none;border:0;box-shadow:none;text-align:center}
/* quotes placed directly in the rail (no wrapper): full slide width, content centred by padding */
.ws-rail--slider > .ws-quote{max-width:none;padding-inline:max(24px,calc((100% - 912px) / 2))}
.ws-rail--slider .ws-quote figcaption{display:contents}
.ws-rail--slider .ws-quote figcaption img{order:-1;max-width:220px;max-height:96px;margin-bottom:40px}
.ws-rail--slider .ws-quote blockquote{font-size:21px;line-height:31px;text-wrap:pretty}
.ws-rail--slider .ws-quote figcaption > span{flex:none;margin-top:18px}
.ws-rail--slider .ws-quote figcaption b{display:inline}
.ws-rail--slider .ws-quote figcaption b::after{content:', ';font-weight:300;color:var(--color-text-muted)}
.ws-rail--slider .ws-quote figcaption b[data-ws-solo]::after{content:none}
.ws-rail--slider .ws-quote figcaption img.ws-avatar{width:88px;height:88px;max-width:none;max-height:none;margin-bottom:32px}
@media (max-width:640px){.ws-rail--slider .ws-quote blockquote{font-size:19px;line-height:28px}}
/* Pager (site.js): previous / next as round buttons, a dot per page in between – testimonial
   slider and the iPhone rows of Social Recruiting. */
.ws-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:32px}
.ws-rail--slider + .ws-pager{margin-top:40px}
.ws-pager > button{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--color-design-dark);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.ws-pager > button svg{width:20px;height:20px}
.ws-pager > button:hover:not(:disabled){border-color:var(--color-design-dark);background:var(--color-design-dark);color:#fff}
.ws-pager > button:disabled{opacity:.35;cursor:default}
.ws-pager__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.ws-pager__dots button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.ws-pager__dots button::before{content:'';width:8px;height:8px;border-radius:999px;background:var(--line);box-shadow:inset 0 0 0 1px rgba(2,17,29,.18);transition:width .2s,background .2s}
.ws-pager__dots button[aria-current="true"]::before{width:22px;background:var(--color-design-dark);box-shadow:none}
.ws-pager button:focus-visible{outline:3px solid rgba(0,221,0,.45);outline-offset:2px}

/* logo wall */
.ws-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.ws-logos__text{font-family:var(--font-head);font-weight:600;font-size:15px;line-height:1.3;text-align:center;color:var(--color-headline)}
.ws-logos li{display:grid;place-items:center;height:96px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:14px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.ws-logos li:has(> a){padding:0}
.ws-logos li > a{display:grid;place-items:center;width:100%;height:100%;padding:14px 18px;border-radius:inherit}
.ws-logos li:has(> a):hover{border-color:rgba(0,138,0,.3);box-shadow:var(--shadow-sm)}
.ws-logos img{max-height:52px;max-width:100%;width:auto;height:auto;object-fit:contain}
.ws-logos + .ws-faq{max-width:none;margin:28px 0 0}
.ws-logos--mono img{filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.ws-logos--mono li:hover img,.ws-logos--mono a:hover img{filter:none;opacity:1}

/* FAQ */
.ws-faq{max-width:880px;margin:0 auto;display:grid;gap:12px}
.ws-faq details{background:var(--color-surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.ws-faq details:hover{border-color:var(--color-border-dark)}
.ws-faq details[open]{border-color:rgba(0,138,0,.35);box-shadow:0 0 0 4px rgba(0,221,0,.06),var(--shadow-sm)}
.ws-faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 24px;font-family:var(--font-head);font-weight:600;font-size:19px;line-height:27px;letter-spacing:-0.01em;color:var(--color-headline);
}
.ws-faq summary::-webkit-details-marker{display:none}
.ws-faq summary::after{
  content:'';flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--color-primary-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006600' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition:transform .25s var(--ease);
}
.ws-faq details[open] summary::after{transform:rotate(45deg)}
.ws-faq .ws-faq__body{padding:0 24px 22px;font-size:17px;line-height:1.65;color:var(--color-text)}
.ws-faq .ws-faq__body > * + *{margin-top:10px}
.ws-faq .ws-faq__body ul{list-style:disc;padding-left:22px}

/* dark CTA band */
.ws-cta-band{
  position:relative;overflow:hidden;border-radius:28px;padding:var(--space-2) 48px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;background:var(--color-design);color:#fff;
}
.ws-cta-band::after{content:'';position:absolute;width:520px;height:520px;right:-200px;top:-260px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,221,0,.22),transparent 70%)}
.ws-cta-band > *{position:relative;z-index:1}
.ws-cta-band h2{font-size:34px;line-height:42px;color:#fff;margin:6px 0 10px}
.ws-cta-band p{color:rgba(255,255,255,.8);max-width:60ch}
.ws-cta-band .ws-pre{color:rgba(255,255,255,.75)}
.ws-cta-band .ws-actions{margin-top:0;justify-content:flex-end}
.ws-cta-band a:not(.ws-btn){color:#fff;text-decoration:underline;text-underline-offset:3px}

/* box variants (Handbuch 08) */
.ws-box{border-radius:var(--radius-xl);padding:32px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card)}
.ws-box--design{background:var(--color-design);color:rgba(255,255,255,.82);border-color:transparent}
.ws-box--design h2,.ws-box--design h3,.ws-box--design h4,.ws-box--design b,.ws-box--design strong{color:#fff}
.ws-box--design .ws-checks li{color:#fff}
.ws-box--design .ws-pre{color:var(--color-primary-neon)}
.ws-box--design a:not(.ws-btn){color:#fff;text-decoration:underline;text-underline-offset:3px}
.ws-box--tint{background:var(--color-primary-muted);border-color:transparent;box-shadow:none}
.ws-box > img{max-width:min(100%,280px);height:auto;margin-top:18px}
.ws-box--seal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.ws-box--seal > img{width:150px;margin-top:0}

/* packages */
.ws-packages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* Two tiles (monthly offer + individual request, TASK-1054): no empty third column. */
.ws-packages--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;margin-inline:auto}
.ws-package{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;padding:24px;background:#fff;box-shadow:var(--shadow-card)}
.ws-package--featured{border:2px solid var(--color-primary);box-shadow:var(--shadow-md)}
.ws-package .ws-package__tag{position:absolute;top:-13px;left:20px}
.ws-package h3{font-size:20px;line-height:28px}
.ws-package__desc{font-size:14.5px;color:var(--color-text-muted);margin-top:6px}
.ws-package__items{display:grid;gap:0;margin:16px 0 18px;flex:1;align-content:start}
.ws-package__items li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.4;color:var(--color-text-dark)}
.ws-package__items li:last-child{border-bottom:0}
.ws-package__items img{width:34px;height:34px;object-fit:contain}
.ws-package__items span{display:block;font-size:12.5px;color:var(--color-text-muted);margin-top:2px}
/* room between the check list of a package and its price */
/* the list takes the free height: price and button sit at the same height in every card of a row */
.ws-package > .ws-checks{flex:1 0 auto;align-content:start;margin:14px 0 26px}
.ws-package__price{border-top:1px solid var(--line);padding-top:16px;text-align:center}
.ws-package__price s{display:block;font-size:13.5px;color:var(--color-text-muted)}
.ws-package__price b{display:block;font-family:var(--font-head);font-size:34px;line-height:1.15;font-weight:600;color:var(--color-headline);margin-top:2px}
.ws-package__price small{display:block;font-size:12.5px;color:var(--color-text-muted);margin-top:2px}
.ws-package .ws-btn{width:100%;margin-top:16px}
/* Package cards of the homepage (lib/website/package-teaser.ts): portal logos, title, short
   summary, the portals behind „alle Leistungen anzeigen“, price with saving. */
.ws-packages--teaser{gap:24px;align-items:stretch}
.ws-package--teaser{padding:30px 28px 28px;border-radius:var(--radius-xl)}
.ws-package__logos{display:flex;min-height:40px;margin-bottom:20px}
.ws-package__logos img{width:40px;height:40px;margin-left:-9px;padding:5px;border-radius:50%;object-fit:contain;background:#fff;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.ws-package__logos img:first-child{margin-left:0}
.ws-package--teaser h3{font-size:23px;line-height:30px}
.ws-package--teaser .ws-package__note{margin-top:4px;font-size:15px}
.ws-package--teaser > .ws-checks{gap:10px;margin:20px 0 26px}
.ws-package--teaser > .ws-checks li{font-size:15.5px;line-height:1.45}
.ws-package--teaser .ws-checks li span{display:block;margin-top:1px;font-size:13px;color:var(--color-text-muted)}
.ws-package--teaser > .ws-package__summary{flex:1 0 auto;align-content:start;margin:20px 0 18px}
/* „alle Leistungen anzeigen“: grey pill between two thin lines, opens the portals of the package */
.ws-package__more{flex:none;margin-bottom:24px}
.ws-package__more summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;font-size:14.5px;color:var(--color-text-dark)}
.ws-package__more summary::-webkit-details-marker{display:none}
.ws-package__more summary::before,.ws-package__more summary::after{content:'';flex:1;height:1px;background:var(--line)}
.ws-package__toggle{flex:none;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 18px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-bg);font-weight:400;color:var(--color-text-dark);transition:background .2s,border-color .2s}
.ws-package__toggle svg{width:18px;height:18px;transition:transform .2s}
.ws-package__more summary:hover .ws-package__toggle{border-color:var(--color-border-dark);background:var(--color-border)}
.ws-package__more summary:focus-visible{outline:none}
.ws-package__more summary:focus-visible .ws-package__toggle{outline:3px solid rgba(0,221,0,.45);outline-offset:2px}
.ws-package__toggle span:last-of-type,.ws-package__more[open] .ws-package__toggle span:first-of-type{display:none}
.ws-package__more[open] .ws-package__toggle span:last-of-type{display:inline}
.ws-package__more[open] .ws-package__toggle svg{transform:rotate(180deg)}
.ws-package__more > .ws-checks{gap:10px;margin-top:16px}
.ws-package__more > .ws-checks li{font-size:14.5px;line-height:1.45}
.ws-package--teaser .ws-package__price{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:0;border:0;text-align:left}
.ws-package--teaser .ws-package__price b{margin:0;font-size:36px;line-height:1.1}
.ws-package--teaser .ws-package__price s{display:inline;font-size:14.5px}
.ws-package__save{padding:3px 10px;border-radius:999px;background:var(--color-primary-muted);color:var(--color-primary-ink);font-size:13.5px;font-weight:700}
.ws-package--teaser .ws-btn{margin-top:20px}
/* Package of the month: green glow instead of a frame, badge like the comparison (.ws-compare__badge) */
.ws-package--glow{border-color:transparent;box-shadow:0 0 44px -4px rgba(0,221,0,.42)}
.ws-package--glow > .ws-package__logos{margin-top:6px}
/* Dark card next to the package of the month („Lieber individuell?“) */
.ws-package--custom{border-color:var(--color-design-dark);background:var(--color-design-dark);color:#fff}
.ws-package--custom h3,.ws-package--custom .ws-checks li{color:#fff}
.ws-package--custom .ws-package__note{margin-top:8px;color:rgba(255,255,255,.66);line-height:1.5}
.ws-package--custom .ws-checks li::before{background-color:rgba(0,221,0,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300DD00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.ws-package--custom > .ws-checks{flex:1 0 auto;align-content:start}
.ws-package--custom .ws-checks a{color:var(--color-primary-neon);text-decoration:underline;text-underline-offset:2px}
.ws-package--custom .ws-btn{margin-top:auto}
.ws-package__icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;border-radius:12px;background:rgba(255,255,255,.08);color:var(--color-primary-neon)}
.ws-package__icon svg{width:22px;height:22px}

/* contact block */
.ws-contact{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:24px;align-items:stretch}
.ws-advisor{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:32px 28px;border-radius:var(--radius-xl);background:var(--color-design);color:rgba(255,255,255,.82)}
.ws-advisor img{width:148px;height:148px;border-radius:50%;object-fit:cover;background:#fff;border:4px solid rgba(255,255,255,.14)}
.ws-advisor h3{color:#fff;font-size:22px;margin-top:10px}
.ws-advisor .ws-advisor__role{color:var(--color-primary-neon);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.ws-advisor .ws-actions{flex-direction:column;align-items:stretch;width:100%;margin-top:18px;gap:10px}
.ws-advisor .ws-btn{width:100%;flex:0 0 auto}
.ws-advisor__links{display:grid;gap:8px;margin-top:14px;font-size:15.5px}
.ws-advisor__links a{color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ws-advisor__links svg{width:16px;height:16px;color:var(--color-primary-neon)}

/* forms */
.ws-form{display:grid;gap:16px}
.ws-form__fields{display:grid;gap:16px}
.ws-field input[type=checkbox],.ws-field input[type=radio]{width:18px;height:18px;accent-color:var(--color-primary-ink)}
.ws-fieldset{border:0;display:grid;gap:10px}
.ws-fieldset legend{font-size:14px;font-weight:500;color:var(--color-text-dark);margin-bottom:6px}
.ws-form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-card)}
.ws-form-card h2,.ws-form-card h3{margin-bottom:6px}
.ws-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ws-field{display:grid;gap:6px}
.ws-field label,.ws-field .ws-field__label{font-size:14px;font-weight:500;color:var(--color-text-dark)}
.ws-field input:not([type=checkbox]):not([type=radio]),.ws-field select,.ws-field textarea{
  width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--color-border-dark);border-radius:var(--radius-md);
  font:inherit;font-size:16px;font-weight:400;color:var(--color-text-dark);background:#fff;transition:border-color .2s,box-shadow .2s;
}
.ws-field textarea{min-height:130px;resize:vertical}
.ws-field select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23414651' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat;padding-right:40px}
.ws-field input:not([type=checkbox]):not([type=radio]):focus,.ws-field select:focus,.ws-field textarea:focus{outline:none;border-color:var(--color-primary-ink);box-shadow:0 0 0 4px rgba(0,221,0,.12)}
.ws-field input::placeholder,.ws-field textarea::placeholder{color:#9A9DA3}
.ws-check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:14.5px;line-height:1.5;color:var(--color-text)}
.ws-check input{width:20px;height:20px;margin-top:2px;accent-color:var(--color-primary-ink)}
.ws-choices{display:flex;flex-wrap:wrap;gap:10px}
.ws-choices label{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--color-border-dark);border-radius:999px;font-size:14.5px;cursor:pointer;background:#fff}
.ws-choices input{accent-color:var(--color-primary-ink)}
.ws-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.ws-form-status{display:none;padding:14px 16px;border-radius:var(--radius-md);font-size:15px}
.ws-form-status.is-ok{display:block;background:var(--color-primary-muted);color:var(--color-primary-dark)}
.ws-form-status.is-error{display:block;background:#FDECEC;color:#9B1C1C}
.ws-form.is-sent .ws-form__fields{display:none}
.ws-newsletter{display:flex;gap:10px;flex-wrap:wrap}
.ws-newsletter > .ws-field{flex:1 1 240px}
.ws-advisor .ws-pills{justify-content:center;gap:12px}

/* prose (articles, legal pages) */
.ws-prose{font-size:18px;line-height:1.7;color:var(--color-text)}
.ws-prose > * + *{margin-top:18px}
.ws-prose h2{font-size:30px;line-height:38px;margin-top:44px}
.ws-prose h3{font-size:22px;line-height:30px;margin-top:32px}
.ws-prose h4{font-size:18px;margin-top:24px}
.ws-prose a{color:var(--color-primary-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ws-prose ul{list-style:disc;padding-left:24px}
.ws-prose ol{list-style:decimal;padding-left:24px}
.ws-prose li + li{margin-top:6px}
.ws-prose li::marker{color:var(--color-primary-ink)}
.ws-prose blockquote{border-left:3px solid var(--color-primary);padding:6px 0 6px 20px;font-family:var(--font-head);font-size:21px;line-height:31px;color:var(--color-text-dark)}
.ws-prose img{border-radius:var(--radius-lg);margin:28px auto}
.ws-prose figure figcaption{font-size:14px;color:var(--color-text-muted);margin-top:8px;text-align:center}
.ws-prose table{font-size:15.5px;margin-top:22px}
.ws-prose th,.ws-prose td{border-bottom:1px solid var(--color-border);padding:10px 12px;text-align:left;vertical-align:top}
.ws-prose th{font-weight:600;color:var(--color-text-dark);background:var(--color-bg)}
.ws-prose strong{color:var(--color-text-dark)}
.ws-prose--legal{font-size:16px;line-height:1.65}
.ws-prose--legal h2{font-size:24px;line-height:32px;margin-top:36px}
.ws-prose--legal h3{font-size:19px;line-height:27px;margin-top:26px}
.ws-table-wrap{overflow-x:auto}

/* comparison (OpenSpec website-compare): first column the criteria (bold), second our offer as a
   recommended card with a light green glow and a neon badge, third the others as a plain card with
   a light grey shadow. A check before our values, an exclamation mark before the others
   (ws-compare--plain: no icons); all rows alike, lines inset in the cards. Rows are
   display:contents, so all three columns share one row height; the two cards are the absolutely
   positioned ::before/::after of the grid (full height of their column). The header of the
   criteria column stays for screen readers only. */
.ws-compare{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.1fr);column-gap:20px;max-width:1080px;margin:28px auto 0;padding-bottom:36px}
.ws-container > :is(h2,h3):has(+ .ws-compare){max-width:1080px;margin-inline:auto}
.ws-compare::before,.ws-compare::after{content:'';position:absolute;inset:0;z-index:0;border-radius:var(--radius-xl);background:var(--color-surface)}
.ws-compare::before{grid-column:2 / 3;box-shadow:0 0 44px -4px rgba(0,221,0,.42)}
.ws-compare::after{grid-column:3 / 4;box-shadow:0 1px 2px rgba(2,17,29,.06),0 12px 32px -16px rgba(2,17,29,.24)}
.ws-compare__row{display:contents}
.ws-compare__row > *{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-width:0;padding:18px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.45;font-weight:400;color:var(--color-text);overflow-wrap:break-word;hyphens:auto}
.ws-compare__row > :not(:first-child){margin-inline:40px}
.ws-compare__row > :first-child{padding-right:8px;font-weight:600;color:var(--color-text-dark)}
.ws-compare__row:first-child > *{justify-content:center;text-align:center;padding-top:46px;padding-bottom:24px;border-bottom:0;font-family:var(--font-head);font-size:19px;line-height:26px;font-weight:600;color:var(--color-headline)}
.ws-compare__row:first-child > :first-child{font-size:0;line-height:0}
.ws-compare__row + .ws-compare__row > :nth-child(2)::before,
.ws-compare__row + .ws-compare__row > :nth-child(3)::before{content:'';flex:none;width:22px;height:22px;border-radius:50%}
.ws-compare__row + .ws-compare__row > :nth-child(2)::before{
  background:var(--color-primary-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008A00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ws-compare__row + .ws-compare__row > :nth-child(3)::before{
  background:#F1F3F4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6F76' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v9'/%3E%3Cpath d='M12 19h.01'/%3E%3C/svg%3E") center / 13px no-repeat;
}
/* without icons (Active Sourcing) */
.ws-compare--plain .ws-compare__row + .ws-compare__row > :is(:nth-child(2),:nth-child(3))::before{content:none}
.ws-compare__badge,.ws-package__badge{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:5px 16px;border-radius:999px;white-space:nowrap;
  background:var(--color-primary-neon);color:var(--color-design-dark);font-family:var(--font-body);font-size:12.5px;line-height:18px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
}
@media (max-width:760px){
  /* one card per criterion: name on top, our offer left, the others right */
  .ws-compare{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding-bottom:0}
  .ws-compare::before,.ws-compare::after{display:none}
  .ws-compare__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 14px;padding:16px 18px;background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:0 1px 2px rgba(2,17,29,.06),0 12px 32px -18px rgba(2,17,29,.24)}
  .ws-compare__row > *,.ws-compare__row:first-child > *{margin-inline:0;padding:0;border-bottom:0;font-size:15px;align-items:flex-start}
  .ws-compare__row > :not(:first-child){margin-inline:0}
  .ws-compare__row > :first-child{grid-column:1 / -1}
  .ws-compare__row:first-child{background:transparent;box-shadow:none;padding:0 18px;align-items:end}
  .ws-compare__row:first-child > *{line-height:20px;justify-content:flex-start;text-align:left;flex-direction:column;align-items:flex-start;gap:6px;overflow-wrap:break-word}
  /* Spaltenköpfe wie „meine.schnelleStelle.de“ bleiben ein Wort: Schrift folgt der halben Breite */
  .ws-compare{container-type:inline-size}
  .ws-compare__row:first-child > :not(:first-child){font-size:min(15px,calc((100cqi - 50px) / 21.5))}
  .ws-compare__row:first-child > :first-child{display:none}
  .ws-compare__row + .ws-compare__row > :nth-child(2)::before,
  .ws-compare__row + .ws-compare__row > :nth-child(3)::before{width:20px;height:20px;margin-top:1px}
  .ws-compare__badge{position:static;transform:none;order:-1;padding:2px 10px;font-size:11px}
}

/* article layout */
.ws-article{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.ws-article__body{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:44px 52px;box-shadow:var(--shadow-card)}
.ws-aside{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:20px}
.ws-aside h2,.ws-aside h3{font-size:18px;line-height:26px;margin-bottom:12px}
.ws-aside ul{display:grid;gap:4px}
.ws-aside li a{display:block;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--color-text-dark)}
.ws-aside li a:hover{color:var(--color-primary-dark)}
.ws-cover{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);aspect-ratio:16/7;background:var(--color-design);color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;padding:28px 32px;isolation:isolate;
}
.ws-cover::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:40px 40px;
}
.ws-cover::after{content:'';position:absolute;z-index:-1;width:420px;height:420px;right:-120px;top:-180px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,221,0,.28),transparent 70%)}
.ws-cover b{font-family:var(--font-head);font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.01em;max-width:24ch}
/* bold text on dark surfaces: the global b/strong colour (dark grey) would be unreadable there */
:is(.ws-cover,.ws-cta-band,.ws-advisor,.ws-footer) :is(b,strong){color:#fff}
.ws-cover span{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-primary-neon);margin-bottom:8px}
.ws-cover svg{position:absolute;right:28px;top:26px;width:44px;height:44px;color:var(--color-primary-neon);opacity:.9}
.ws-cover--sm{aspect-ratio:16/9;padding:20px 22px}
.ws-cover--sm b{font-size:19px;line-height:25px}
.ws-cover--sm svg{width:30px;height:30px;right:18px;top:16px}

/* post / event / download cards */
.ws-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ws-post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ws-post:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.ws-post .ws-cover{border-radius:0}
.ws-post__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.ws-post__body h3{font-size:18.5px;line-height:26px}
.ws-post__body h3 a{color:var(--color-headline)}
.ws-post__body h3 a::after{content:'';position:absolute;inset:0}
.ws-post{position:relative}
.ws-post__body p{font-size:15px;line-height:1.55;color:var(--color-text)}
.ws-post__meta{font-size:13px;color:var(--color-text-muted);display:flex;gap:12px;flex-wrap:wrap}
.ws-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:28px}
.ws-filter input{flex:1 1 280px;min-height:48px;padding:12px 16px;border:1px solid var(--color-border-dark);border-radius:999px;font:inherit;font-size:16px;background:#fff}
.ws-filter button{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--color-border-dark);background:#fff;font:inherit;font-size:14.5px;cursor:pointer;color:var(--color-text-dark)}
.ws-filter button[aria-pressed="true"]{background:var(--color-primary-muted);border-color:transparent;color:var(--color-primary-dark);font-weight:500}
[data-ws-hidden]{display:none!important}
.ws-more{display:flex;justify-content:center;margin-top:32px}

.ws-event{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:24px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:22px 26px;box-shadow:var(--shadow-card)}
.ws-event__date{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:16px;background:var(--color-primary-muted);color:var(--color-primary-dark);padding:14px 8px;text-align:center}
.ws-event__date b{font-family:var(--font-head);font-size:30px;line-height:1;font-weight:600;color:var(--color-primary-dark)}
.ws-event__date span{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.ws-event h3{font-size:20px;line-height:28px}
.ws-event p{font-size:15px;color:var(--color-text);margin-top:6px}
.ws-event--past{opacity:.72}
.ws-events{display:grid;gap:16px}

.ws-downloads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ws-download{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-card)}
.ws-download .ws-icon{margin:0}
.ws-download h3{font-size:18px;line-height:26px}
.ws-download p{font-size:15px;line-height:1.55}
.ws-download .ws-btn{margin-top:auto;align-self:flex-start}

/* glossary */
.ws-az{display:flex;flex-wrap:wrap;gap:6px;position:sticky;top:calc(var(--header-h) + 8px);z-index:5;background:rgba(250,250,250,.95);backdrop-filter:blur(6px);padding:10px 0;margin-bottom:24px}
.ws-az a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--color-border);background:#fff;font-weight:500;color:var(--color-text-dark);font-size:15px}
.ws-az a:hover{background:var(--color-primary-muted);color:var(--color-primary-dark);border-color:transparent}
.ws-glossary-group{margin-top:36px}
.ws-glossary-group > h2{font-size:30px;margin-bottom:14px;color:var(--color-primary-ink)}
.ws-glossary-group .ws-faq{max-width:none}

/* team */
.ws-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px}
.ws-person{text-align:center}
.ws-person img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-xl);background:#fff;border:1px solid var(--line)}
.ws-person__photo{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--radius-xl);overflow:hidden;background:#fff;border:1px solid var(--line)}
.ws-person__photo img{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.ws-person__photo img + img{opacity:0}
.ws-person:hover .ws-person__photo img + img,.ws-person:focus-within .ws-person__photo img + img{opacity:1}
.ws-person:hover .ws-person__photo img{transform:scale(1.03)}
.ws-person b{display:block;margin-top:12px;font-family:var(--font-head);font-weight:600;font-size:17px;color:var(--color-headline)}
.ws-person span{display:block;font-size:14px;color:var(--color-text-muted)}

/* sticky sub navigation */
.ws-subnav{position:sticky;top:var(--header-h);z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.ws-subnav ul{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:10px 0}
.ws-subnav a{display:block;white-space:nowrap;padding:8px 14px;border-radius:999px;font-size:15px;color:var(--color-text-dark)}
.ws-subnav a:hover,.ws-subnav a.is-active{background:var(--color-primary-muted);color:var(--color-primary-dark)}

/* video / media link card */
.ws-video{position:relative;display:block;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-card);background:var(--color-design)}
.ws-video img{width:100%;opacity:.92;transition:opacity .2s,transform .4s var(--ease)}
.ws-video:hover img{opacity:1;transform:scale(1.02)}
.ws-video span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:var(--color-primary);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.4)}
.ws-video span svg{width:30px;height:30px;color:var(--color-design-dark);margin-left:4px}

/* notice */
.ws-notice{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border-radius:14px;background:var(--color-secondary-muted);color:var(--color-secondary-dark);font-size:15.5px}
.ws-notice svg{width:20px;height:20px;flex:none;margin-top:2px}

/* platform panel (hero visual of the start page, CI LP device style) */
.ws-panel{position:relative;border-radius:20px;border:1px solid rgba(2,17,29,.12);background:linear-gradient(180deg,#FFFFFF,#F4F8F5);box-shadow:var(--shadow-lg);overflow:hidden;transform:perspective(1400px) rotateX(5deg) rotateY(-6deg)}
.ws-panel__bar{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.85)}
.ws-panel__bar i{width:10px;height:10px;border-radius:50%;background:#CBD5E1}
.ws-panel__bar i:nth-child(1){background:#FCA5A5}.ws-panel__bar i:nth-child(2){background:#FCD34D}.ws-panel__bar i:nth-child(3){background:#86EFAC}
.ws-panel__bar span{margin-left:10px;font-size:12px;color:var(--color-text-muted);letter-spacing:.02em}
.ws-panel__rows{display:grid;gap:10px;padding:18px}
.ws-panel__rows li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.ws-panel__rows .ws-icon{width:44px;height:44px;margin:0}
.ws-panel__rows .ws-icon img{width:28px;height:28px;object-fit:contain}
.ws-panel__rows b{display:block;font-family:var(--font-head);font-weight:600;font-size:16px;color:var(--color-headline);line-height:1.3}
.ws-panel__rows small{display:block;font-size:13px;color:var(--color-text-muted);line-height:1.4}
/* Monatsspezial: panel with the package of the month (lib/website/package-teaser.ts monthPanelHtml) */
.ws-panel--month .ws-panel__rows{gap:8px;padding:16px 16px 12px}
.ws-panel--month .ws-panel__rows li{padding:9px 12px}
.ws-panel__total{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;margin:0 16px 16px;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:0 0 32px -6px rgba(0,221,0,.42)}
.ws-panel__total small{flex:1 1 100%;font-size:13px;font-weight:600;color:var(--color-text-dark)}
.ws-panel__total .ws-package__price{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:0;border:0;text-align:left}
.ws-panel__total .ws-package__price b{margin:0;font-size:30px;line-height:1.1}
.ws-panel__total .ws-package__price s{display:inline;font-size:14px}
@media (max-width:960px){.ws-panel{transform:none}}
@media (max-width:520px){.ws-panel__rows li{grid-template-columns:40px minmax(0,1fr)}.ws-panel__rows .ws-pill{grid-column:2}}

/* ── footer ─────────────────────────────────────────────────────────── */
.ws-footer{background:var(--color-design);color:rgba(255,255,255,.74);padding:56px 0 28px;font-size:15px;line-height:1.55}
.ws-footer a{color:rgba(255,255,255,.88);transition:color .2s var(--ease)}
.ws-footer a:hover{color:var(--color-primary-neon)}
.ws-footer h2{font-family:var(--font-body);font-size:12.5px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#fff;margin:0 0 16px}
.ws-footer__newsletter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:32px;align-items:center;padding:28px 32px;margin-bottom:56px;border-radius:var(--radius-xl);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.ws-footer__newsletter .ws-pre{color:var(--color-primary-neon)}
.ws-footer__newsletter h2{font-family:var(--font-head);font-size:26px;line-height:1.2;letter-spacing:-.01em;text-transform:none;font-weight:600;margin:8px 0 6px}
.ws-footer__newsletter p{color:rgba(255,255,255,.74)}
.ws-footer__newsletter .ws-check span{color:rgba(255,255,255,.74)}
.ws-footer__newsletter .ws-check a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ws-footer__newsletter .ws-form-status{color:#fff}
/* centred footer: brand and contact on top, three equal link columns below, chips and legal line centred */
.ws-footer__grid{display:grid;grid-template-columns:repeat(3,minmax(0,220px));justify-content:center;gap:40px 72px;text-align:center}
.ws-footer__brand{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)}
.ws-footer__logo img{height:44px;width:auto}
.ws-footer__brand p{margin-top:16px;max-width:62ch}
.ws-footer__contact{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px;margin-top:20px}
.ws-footer__contact li{display:inline-flex;gap:10px;align-items:flex-start;text-align:left}
.ws-footer__contact svg{width:16px;height:16px;margin-top:3px;color:var(--color-primary-neon)}
.ws-footer nav ul{display:grid;gap:10px}
.ws-footer__social{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:44px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}
.ws-footer__social > span{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.6)}
.ws-footer__social ul{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ws-footer__social a{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);font-size:13.5px;font-weight:500;color:#fff}
.ws-footer__social a:hover{border-color:var(--color-primary-neon);color:var(--color-primary-neon)}
/* brand icons (lib/website/social-icons.ts): round buttons in the outline of the text pills */
.ws-footer__social a.ws-social{justify-content:center;width:42px;height:42px;padding:0;transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.ws-footer__social a.ws-social:hover{transform:translateY(-2px)}
.ws-footer__social a.ws-social svg{width:18px;height:18px}
.ws-footer__social ul:has(.ws-social){gap:10px}
.ws-footer__bottom{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px 24px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;color:rgba(255,255,255,.6)}
.ws-footer__bottom nav{display:flex;gap:6px 20px;flex-wrap:wrap;justify-content:center}
.ws-footer__bottom a{color:rgba(255,255,255,.72)}
.ws-footer__claim svg{display:inline-block;width:14px;height:14px;margin-right:4px;vertical-align:-2px;color:var(--color-primary-neon)}

/* motion like v2.schnellestelle.de (OpenSpec website-layout-studio-editing): the hero rises in on
   load, content slides in from below while scrolling (media from the side, rows staggered by site.js),
   numbers count up. Progressive: without JS everything is visible; off for reduced motion and in the
   Studio preview (.ws-static). */
@keyframes ws-rise{from{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:none}}
@keyframes ws-slide{from{opacity:0;transform:translate3d(40px,0,0)}to{opacity:1;transform:none}}
.ws-hero__copy > *{animation:ws-rise .8s var(--ease) both}
.ws-hero__copy > :nth-child(2){animation-delay:.08s}
.ws-hero__copy > :nth-child(3){animation-delay:.16s}
.ws-hero__copy > :nth-child(4){animation-delay:.24s}
.ws-hero__copy > :nth-child(n+5){animation-delay:.32s}
.ws-hero__media{animation:ws-slide .9s .2s var(--ease) both}
.ws-static .ws-hero__copy > *,.ws-static .ws-hero__media{animation:none}
.ws-js .ws-reveal{opacity:0;transform:translate3d(0,30px,0);transition:opacity .6s ease-out,transform .8s var(--ease);transition-delay:var(--ws-delay,0s)}
.ws-js .ws-reveal--left{transform:translate3d(-30px,0,0)}
.ws-js .ws-reveal--right{transform:translate3d(30px,0,0)}
.ws-js .ws-reveal.is-in{opacity:1;transform:none}
.ws-stat b,.ws-facts dd{font-variant-numeric:tabular-nums}

/* liveliness: large graphics keep moving gently (photos zoom and pan, snippets of screenshots and
   illustrations float, the main buttons pulse, the hero glow drifts); site.js adds depth on mouse move
   (--ws-px/--ws-py) and types example terms into search fields */
@keyframes ws-kb-1{from{transform:scale(1.02)}to{transform:scale(1.1) translate3d(-2%,-1.5%,0)}}
@keyframes ws-kb-2{from{transform:scale(1.1) translate3d(1.5%,0,0)}to{transform:scale(1.02) translate3d(-1%,1%,0)}}
@keyframes ws-kb-3{from{transform:scale(1.04) translate3d(-1.5%,1%,0)}to{transform:scale(1.1) translate3d(1.5%,-1%,0)}}
@keyframes ws-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes ws-pulse{0%{box-shadow:0 0 0 0 rgba(0,221,0,.5)}70%{box-shadow:0 0 0 16px rgba(0,221,0,0)}100%{box-shadow:0 0 0 0 rgba(0,221,0,0)}}
@keyframes ws-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-70px,50px,0) scale(1.08)}}
@keyframes ws-wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}70%{transform:rotate(7deg)}}
.ws-hero::after{animation:ws-drift 28s ease-in-out infinite}
.ws-hero__frame{position:relative;overflow:hidden;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);background:#fff;translate:calc(var(--ws-px,0) * -10px) calc(var(--ws-py,0) * -8px);transition:translate .5s ease-out}
.ws-hero__media .ws-hero__frame img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:0;box-shadow:none;animation:ws-kb-1 24s ease-in-out infinite alternate}
.ws-hero__frame--2 img:not(.ws-hero__fade){animation-name:ws-kb-2}
.ws-hero__frame--3 img:not(.ws-hero__fade){animation-name:ws-kb-3}
.ws-hero__media .ws-browser,.ws-hero__media > .ws-logos{translate:calc(var(--ws-px,0) * -8px) calc(var(--ws-py,0) * -6px);transition:translate .5s ease-out}
.ws-hero__media .ws-float{position:absolute;z-index:2;width:44%;max-width:250px;height:auto;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 22px 44px -14px rgba(2,17,29,.35);animation:ws-float 6.5s ease-in-out infinite;translate:calc(var(--ws-px,0) * 16px) calc(var(--ws-py,0) * 12px);transition:translate .5s ease-out}
.ws-hero__media .ws-float--a{right:-28px;top:14%}
.ws-hero__media .ws-float--b{left:-30px;bottom:12%;animation-delay:-3.2s;animation-duration:7.5s}
.ws-hero-tile__badge{z-index:3;animation:ws-float 7s ease-in-out -2s infinite;translate:calc(var(--ws-px,0) * 14px) calc(var(--ws-py,0) * 10px);transition:translate .5s ease-out}
.ws-hero-tile > svg,.ws-hero-tile > .ws-logos{animation:ws-float 6s ease-in-out infinite}
.ws-hero__media > .ws-logos > li{animation:ws-float 6s ease-in-out infinite}
.ws-hero__media > .ws-logos > li:nth-child(3n+2){animation-delay:-2s}
.ws-hero__media > .ws-logos > li:nth-child(3n){animation-delay:-4s}
.ws-split__media:not(.ws-split__media--card) img,.ws-split__media--card{animation:ws-float 7s ease-in-out infinite}
/* the screen of the iPhone frame stays still (no float inside the device) */
.ws-split__media.ws-split__media--phone img{animation:none}
.ws-hero .ws-actions .ws-btn--primary,.ws-cta-band .ws-btn--primary{animation:ws-pulse 2.8s ease-out infinite}
.ws-card:hover .ws-icon svg,.ws-step:hover .ws-icon svg{animation:ws-wiggle .6s ease}
.ws-filter input[type="search"]:focus{box-shadow:0 0 0 4px rgba(0,221,0,.18)}
.ws-static :is(.ws-hero__frame img,.ws-float,.ws-hero-tile__badge,.ws-hero-tile > svg,.ws-hero-tile > .ws-logos,.ws-logos > li,.ws-split__media img,.ws-split__media--card,.ws-btn--primary){animation:none}
.ws-static .ws-hero::after{animation:none}
@media (prefers-reduced-motion:reduce){
  .ws-hero::after,.ws-hero__frame img,.ws-float,.ws-hero-tile__badge,.ws-hero-tile > svg,.ws-hero-tile > .ws-logos,.ws-hero__media > .ws-logos > li,
  .ws-split__media img,.ws-split__media--card,.ws-btn--primary,.ws-icon svg{animation:none!important}
  .ws-hero__frame,.ws-hero__media .ws-browser,.ws-hero__media > .ws-logos,.ws-float,.ws-hero-tile__badge{translate:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ws-gradient-word{animation:none}
  .ws-hero__copy > *,.ws-hero__media{animation:none}
  .ws-js .ws-reveal{opacity:1;transform:none;transition:none}
  .ws-btn::after{display:none}
  *{transition-duration:0s!important}
}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .ws-footer__grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
  .ws-article{grid-template-columns:minmax(0,1fr)}
  .ws-aside{position:static}
}
@media (max-width:960px){
  :root{--header-h:68px}
  .ws-container,.ws-header__inner{padding:0 20px}
  h1{font-size:36px;line-height:44px}
  h2{font-size:29px;line-height:37px}
  .ws-display{font-size:40px;line-height:48px}
  .ws-lead{font-size:19px;line-height:29px}
  .ws-section{padding:var(--space-3) 0}
  .ws-hero{padding:var(--space-2) 0}
  .ws-hero__grid,.ws-split,.ws-contact{grid-template-columns:minmax(0,1fr);gap:36px}
  .ws-split--reverse .ws-split__media{order:0}
  .ws-hero-tile{max-width:300px;margin:0 auto}
  .ws-hero--article h1{font-size:32px;line-height:40px}
  .ws-grid--3,.ws-grid--4,.ws-steps,.ws-steps--4,.ws-packages,.ws-posts,.ws-downloads{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ws-cta-band{grid-template-columns:minmax(0,1fr);padding:40px 28px;text-align:left}
  .ws-cta-band .ws-actions{justify-content:flex-start}
  .ws-footer__newsletter{grid-template-columns:minmax(0,1fr);gap:20px}
  .ws-box--seal{grid-template-columns:minmax(0,1fr)}
  .ws-article__body{padding:28px 24px}
  .ws-event{grid-template-columns:96px minmax(0,1fr)}
  .ws-event > .ws-btn,.ws-event > .ws-actions{grid-column:1 / -1}
  .ws-rail--3{grid-auto-columns:minmax(280px,80%)}
  .ws-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  body{font-size:17px}
  h1{font-size:32px;line-height:40px}
  .ws-grid--2,.ws-grid--3,.ws-grid--4,.ws-steps,.ws-steps--4,.ws-packages,.ws-posts,.ws-downloads,.ws-form-row,.ws-checks--2{grid-template-columns:minmax(0,1fr)}
  .ws-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .ws-footer__grid > nav:last-child{grid-column:1 / -1}
  .ws-hero__media .ws-float{width:46%}
  .ws-hero__media .ws-float--a{right:-8px;top:10%}
  .ws-hero__media .ws-float--b{left:-8px;bottom:8%}
  .ws-hero__media .ws-float.ws-float--wide{left:4%;width:92%;bottom:-16px}
  .ws-hero__media .ws-hero-tile__badge{left:-6px;bottom:18px}
  .ws-hero__media--logos > .ws-logos{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .ws-hero__media--logos > .ws-logos > li:nth-child(n+7){display:none}
  .ws-footer__contact{flex-direction:column;align-items:center;gap:10px}
  .ws-footer__newsletter{padding:24px 20px}
  .ws-stat{border-right:0;border-bottom:1px solid var(--line)}
  .ws-actions .ws-btn{flex:1 1 100%}
  .ws-cover b{font-size:21px;line-height:27px}
  .ws-form-card{padding:24px 20px}
  .ws-facts{grid-template-columns:minmax(0,1fr)}
  .ws-quote{padding:24px}
  .ws-quote blockquote{font-size:19px;line-height:28px}
}
@media print{
  .ws-header,.ws-footer,.ws-subnav,.ws-cta-band,.ws-contact{display:none}
  body{background:#fff}
}

/* ── Hero typography (TASK-1050, feedback 21.10.2026) ──────────────────────────────────────────
   One calm hierarchy in the hero: headline, lead and fact values in the headline and text colour,
   labels and notes in muted text; green only for the pre-headline and the gradient word. Three text
   sizes instead of six: headline, lead/value (22 px) and small (14 px). */
.ws-hero .ws-kicker{font-size:14px;letter-spacing:.14em}
.ws-hero .ws-facts dt{font-size:14px;letter-spacing:0;text-transform:none;color:var(--color-text-muted);margin-bottom:2px}
.ws-hero .ws-facts dd{font-family:var(--font-head);font-size:22px;line-height:1.3;font-weight:600;color:var(--color-headline)}
.ws-hero .ws-hero__checks{font-size:14px;color:var(--color-text-muted)}
@media (max-width:767px){.ws-hero .ws-facts dd{font-size:19px}}


/* Packages from core (TASK-1061): a one-package slot keeps the grid; note and VAT line on cards. */
.ws-package-slot{display:contents}
.ws-package__note{margin:4px 0 0;font-size:14px;color:var(--color-text-muted)}
[data-ws-package-order] .ws-aside .ws-package{margin-bottom:18px}

/* THE SLOT entry in the hero of the homepage (OpenSpec website-hero-slot-entry): link field and
   button on one surface with a green frame; below the promise, then the alternatives (start
   without a link, Blitz-Anfrage, phone). Stacks on narrow screens. */
.ws-slot-entry{margin-top:28px;max-width:640px;scroll-margin-top:calc(var(--header-h) + 24px)}
.ws-slot-entry__form{position:relative;padding:20px;border:2px solid var(--color-primary);border-radius:var(--radius-lg);background:#fff;
  box-shadow:0 0 0 6px rgba(0,221,0,.10),var(--shadow-md)}
.ws-slot-entry__label{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-family:var(--font-head);font-size:18px;line-height:28px;font-weight:600;color:var(--color-headline)}
.ws-slot-entry__label svg{width:20px;height:20px;color:var(--color-primary-ink)}
.ws-slot-entry__row{display:flex;gap:10px}
.ws-slot-entry__row input{flex:1 1 auto;min-width:0;min-height:52px;padding:12px 16px;border:1px solid var(--color-border-dark);border-radius:var(--radius-md);
  font:inherit;font-size:17px;font-weight:400;color:var(--color-text-dark);background:#fff;transition:border-color .2s,box-shadow .2s}
.ws-slot-entry__row input::placeholder{color:#9A9DA3}
.ws-slot-entry__row input:focus{outline:none;border-color:var(--color-primary-ink);box-shadow:0 0 0 4px rgba(0,221,0,.16)}
.ws-slot-entry__row input[aria-invalid="true"]{border-color:#B42318}
.ws-slot-entry__row .ws-btn{flex:none}
.ws-slot-entry__hint{margin-top:12px;font-size:14px;line-height:1.5;color:var(--color-text-muted)}
.ws-slot-entry__hint b{color:var(--color-text-dark)}
.ws-slot-entry .ws-form-status{margin-top:12px}
.ws-slot-entry__alt{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:14px;line-height:1.5;color:var(--color-text-muted)}
.ws-slot-entry__alt span::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-primary-neon);margin-right:8px;vertical-align:1px}
.ws-slot-entry__alt a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ws-hero--center .ws-slot-entry{margin-left:auto;margin-right:auto}
.ws-hero--center .ws-slot-entry__alt{justify-content:center}
@media (max-width:767px){
  .ws-slot-entry__form{padding:16px}
  .ws-slot-entry__row{flex-direction:column}
  .ws-slot-entry__row .ws-btn{width:100%}
}
/* Slot-Einstieg als dunkles Band (OpenSpec website-slot-band): in einem Titelbereich mit Grafik
   steht er mittig unter Text und Grafik und auf der Grenze zum nächsten Abschnitt (halb darüber,
   halb darin), mit dem Label „Jetzt neu“ oben auf der Kante – Überschrift, Feld und Button,
   Versprechen und Alternativen zentriert. Die Textspalte gibt ihre Kinder dafür ans Raster ab.
   Der Titelbereich schneidet seine Dekoration nur noch oben und seitlich ab. */
.ws-hero:has(> .ws-container > .ws-hero__grid > .ws-hero__media):has(> .ws-container > .ws-hero__grid > .ws-hero__copy > .ws-slot-entry){z-index:1;overflow:visible;overflow-x:clip;clip-path:inset(0 0 -100vh 0);padding-bottom:0}
.ws-hero:has(> .ws-container > .ws-hero__grid > .ws-hero__media):has(> .ws-container > .ws-hero__grid > .ws-hero__copy > .ws-slot-entry) + *{padding-top:calc(var(--space-3) + 150px)}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry){row-gap:0;align-items:start}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) > .ws-hero__copy{display:contents}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) > .ws-hero__copy > *{grid-column:1}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) > .ws-hero__media{grid-column:2;grid-row:1 / span 4;align-self:center}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry{position:relative;grid-column:1 / -1;justify-self:center;width:100%;max-width:920px;margin-top:64px;padding:40px 44px 30px;border-radius:var(--radius-xl);background:radial-gradient(circle 320px at calc(100% - 110px) 40px,rgba(0,221,0,.28),transparent 70%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0 / 40px 40px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0 / 40px 40px,var(--color-design);color:#fff;text-align:center;box-shadow:0 30px 60px -30px rgba(2,17,29,.55);margin-bottom:-140px}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry::before{content:'Jetzt neu';position:absolute;top:0;left:50%;translate:-50% -50%;padding:5px 14px;border-radius:999px;background:var(--color-primary-neon);color:var(--color-design-dark);font-size:12px;line-height:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry__form{padding:0;border:0;background:none;box-shadow:none}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry__label{justify-content:center;margin-bottom:20px;font-size:28px;line-height:36px;color:#fff}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry__label svg{width:26px;height:26px;color:var(--color-primary-neon)}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry__row{text-align:left}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry__row input{min-height:58px;border-color:transparent;font-size:18px}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry__row .ws-btn{min-height:58px;background:var(--color-primary-neon);color:var(--color-design-dark)}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry__hint{margin-top:14px;color:rgba(255,255,255,.72)}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry__hint b{color:var(--color-primary-neon)}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry__alt{justify-content:center;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.72)}
.ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry__alt a{color:#fff}
@media (max-width:960px){
  .ws-hero:has(> .ws-container > .ws-hero__grid > .ws-hero__media):has(> .ws-container > .ws-hero__grid > .ws-hero__copy > .ws-slot-entry){padding-bottom:var(--space-2)}
  .ws-hero:has(> .ws-container > .ws-hero__grid > .ws-hero__media):has(> .ws-container > .ws-hero__grid > .ws-hero__copy > .ws-slot-entry) + *{padding-top:var(--space-3)}
  .ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) > .ws-hero__media{grid-column:1;grid-row:auto;margin-top:36px}
  .ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry{margin-bottom:0;margin-top:44px}
}
@media (max-width:767px){
  .ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry{padding:32px 18px 24px}
  .ws-hero__grid:has(> .ws-hero__media):has(> .ws-hero__copy > .ws-slot-entry) .ws-slot-entry__label{font-size:21px;line-height:29px}
}
/* Advantages next to the text (Social Recruiting): cards with icon and short title in two columns. */
.ws-benefits{align-items:center}
.ws-benefits__title{margin-bottom:16px;font-family:var(--font-head);font-size:20px;line-height:28px;font-weight:600;color:var(--color-headline)}
.ws-benefits .ws-card{padding:24px}
.ws-benefits .ws-card h3{margin-top:14px;font-size:19px;line-height:26px}
.ws-benefits .ws-split__copy .ws-actions{margin-top:28px}
@media (max-width:767px){
  .ws-benefits .ws-grid{gap:12px}
  .ws-benefits .ws-card{display:flex;flex-direction:row;align-items:center;gap:16px;padding:14px 18px}
  .ws-benefits .ws-card .ws-icon{flex:none;margin:0}
  .ws-benefits .ws-card h3{margin:0;font-size:17px;line-height:24px}
}
/* Tabs and channel layout (OpenSpec website-socialrecruiting-channels): one channel at a time
   (site.js); each the same – text, request button and facts on top, the ad formats as a row of
   iPhones below, formats without a screen as a plain list. Without JS all channels stack. */
.ws-tabs__list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 36px}
.ws-tab{display:inline-flex;align-items:center;min-height:44px;padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:15px;line-height:24px;font-weight:600;color:var(--color-text-dark);text-decoration:none;transition:border-color .2s,background .2s,color .2s}
.ws-tab:hover{border-color:var(--color-primary)}
.ws-tab[aria-selected="true"]{border-color:var(--color-design-dark);background:var(--color-design-dark);color:#fff}
.ws-tab:focus-visible{outline:3px solid rgba(0,221,0,.45);outline-offset:2px}
.ws-tabs.is-ready .ws-channel:not(.is-active){display:none}
.ws-tabs:not(.is-ready) .ws-channel + .ws-channel{margin-top:32px}
.ws-channel{padding:44px;border:1px solid var(--line);border-radius:var(--radius-xl);background:#fff;box-shadow:var(--shadow-card);scroll-margin-top:calc(var(--header-h) + 24px)}
.ws-channel__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.ws-channel__copy h3{font-size:32px;line-height:40px}
.ws-channel__copy p{margin-top:14px}
.ws-channel__copy h4{margin-top:22px;font-size:18px}
.ws-channel__copy .ws-checks{margin-top:10px}
.ws-channel__copy .ws-actions{margin-top:26px}
.ws-channel__facts{border-top:1px solid var(--line)}
.ws-channel__facts > div{padding:14px 0;border-bottom:1px solid var(--line)}
.ws-channel__facts dt{margin-bottom:4px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary-ink)}
.ws-channel__facts dd{font-size:15px;line-height:1.55;color:var(--color-text)}
/* Three screens per row over the full width of the channel; more than three get a pager (site.js). */
.ws-phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;margin-top:40px;padding-top:40px;border-top:1px solid var(--line)}
.ws-phones > li{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;container-type:inline-size}
.ws-phones .ws-phone{--w:min(100cqw,300px)}
.ws-phones.is-paged > li.is-off-page{display:none}
.ws-phones > li > b{margin-top:18px;font-family:var(--font-head);font-size:17px;line-height:23px;font-weight:600;color:var(--color-headline)}
.ws-phones > li > span{margin-top:6px;font-size:14px;line-height:1.5;color:var(--color-text-muted)}
/* Ad templates in the iPhone (lib/website/ad-mockups.ts): the same example ad in the layout of each
   portal – one status bar, one type, the portal shows in layout and accent colour (--ad). All
   measures in em of the phone width, so the screens scale with the frame. */
.ws-ad{--ad:#1877F2;--ad-ink:#fff}
.ws-ad--instagram{--ad:#0095F6}
.ws-ad--tiktok{--ad:#FE2C55}
.ws-ad--snapchat{--ad:#FFFC00;--ad-ink:#000}
.ws-ad--linkedin{--ad:#0A66C2}
.ws-ad--xing{--ad:#006567}
.ws-ad--google{--ad:#1A73E8}
.ws-ad--spotify{--ad:#1ED760;--ad-ink:#000}
.ws-ad .ws-phone__screen{display:flex;flex-direction:column;font:400 calc(var(--w) * .036)/1.3 var(--font-body);color:#1C1E21;background:#fff;text-align:left;letter-spacing:0}
.ws-ad .ws-phone__screen :is(img,svg){display:block;max-width:none}
.ws-ad .ws-phone__screen svg{width:1.45em;height:1.45em;flex:none}
:where(.ws-ad) b{font-weight:700;color:inherit}
:where(.ws-ad) em{font-style:normal}
.ws-ad .ws-phone__screen small{display:block;font-size:.82em;color:#65676B}
.ws-ad__status{position:relative;z-index:2;flex:none;display:flex;justify-content:space-between;align-items:center;height:3.6em;padding:.35em 1.9em 0 2.3em;font-size:1em}
.ws-ad__status b{font-size:1.05em;font-weight:600 !important}
.ws-ad .ws-ad__status svg{width:4.6em;height:1em}
.ws-ad__bar{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:.7em;padding:.35em 1em .6em;border-bottom:1px solid #E4E6EB}
.ws-ad__bar > b{flex:1;font-size:1.1em}
.ws-ad__bar--center{justify-content:space-between;border:0}
.ws-ad__wordmark{flex:1;font-size:1.75em !important;line-height:1;letter-spacing:-.03em;color:var(--ad)}
.ws-ad__icons{display:flex;align-items:center;gap:.6em;margin-left:auto;color:inherit}
.ws-ad__fill{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:#E4E6EB;color:#1C1E21}
.ws-ad__fill svg{width:1.3em !important;height:1.3em !important}
.ws-ad__avatar{flex:none;display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;background:var(--color-design-dark);color:var(--color-primary-neon);font:700 .85em/1 var(--font-head);font-style:normal;letter-spacing:-.04em}
.ws-ad__head{display:flex;align-items:center;gap:.6em;padding:.8em 1em .5em}
.ws-ad__head > div{min-width:0;flex:1}
.ws-ad__head b{display:block;font-size:1em}
.ws-ad__head b small{display:inline !important}
.ws-ad__head small{display:flex !important;align-items:center;gap:.25em}
.ws-ad__head small svg{width:1em !important;height:1em !important}
.ws-ad__head .ws-ad__icons{color:#65676B}
.ws-ad__text{padding:0 1em .7em;font-size:.95em}
.ws-ad__media{position:relative;flex:none;overflow:hidden;aspect-ratio:1.91/1;background:#E4E6EB}
.ws-ad__media img{width:100%;height:100%;object-fit:cover;object-position:45% 30%}
.ws-ad__media--square{aspect-ratio:1/1}
.ws-ad__media--square img{object-position:42% 40%}
.ws-ad__link{display:flex;align-items:center;gap:.6em;padding:.7em 1em;background:#F0F2F5}
.ws-ad__link > div{flex:1;min-width:0}
.ws-ad__link b{display:block;font-size:1.02em}
.ws-ad__btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.3em;padding:.55em .9em;border-radius:.45em;background:#E4E6EB;color:#1C1E21;font-weight:700;font-size:.9em;white-space:nowrap}
.ws-ad__btn svg{width:1.1em !important;height:1.1em !important}
.ws-ad__btn--outline{border:1.5px solid var(--ad);background:none;color:var(--ad);border-radius:999px}
.ws-ad__btn--block{position:absolute;z-index:3;left:1em;right:1em;bottom:2.2em;padding:.85em;background:var(--ad);color:var(--ad-ink);border-radius:.5em;box-shadow:0 -1.2em 1.2em #fff}
.ws-ad__btn--google{padding:.6em 1.1em;border-radius:.3em;background:var(--ad);color:#fff;font-weight:500}
.ws-ad__actions{display:flex;justify-content:space-around;padding:.6em .5em;border-top:1px solid #E4E6EB;color:#65676B;font-size:.85em;font-weight:600}
.ws-ad__actions span{display:flex;align-items:center;gap:.35em}
.ws-ad__actions em{font-weight:500}
.ws-ad__actions--counts{justify-content:flex-start;gap:1.6em;padding:.65em 1em;border:0}
.ws-ad__reactions{display:flex;margin-left:auto}
.ws-ad__reactions i{display:grid;place-items:center;width:1.5em;height:1.5em;margin-left:-.3em;border:.12em solid #fff;border-radius:50%;color:#fff}
.ws-ad__reactions svg{width:.85em !important;height:.85em !important;fill:currentColor}
.ws-ad__r-like{background:#1877F2}
.ws-ad__r-love{background:#F33E58}
.ws-ad__tabbar{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:.75em .4em 2.1em;border-top:1px solid #E4E6EB;background:#fff;color:#1C1E21}
.ws-ad__tabbar span{display:flex;flex-direction:column;align-items:center;gap:.25em}
.ws-ad__tabbar svg{width:1.7em !important;height:1.7em !important}
.ws-ad--facebook .ws-ad__tabbar span:first-child{color:var(--ad)}
.ws-ad__tabbar--labels{font-size:.72em;border:0;background:linear-gradient(transparent,#000 35%);color:#B3B3B3}
.ws-ad__tabbar--labels span:first-child{color:#fff}
.ws-ad__tabbar--labels svg{width:2.1em !important;height:2.1em !important}
.ws-ad__ghost{flex:1;margin-top:.6em;border-top:.6em solid #F0F2F5;background:radial-gradient(circle at 2.3em 2.3em,#E4E6EB 1.3em,transparent 1.35em),linear-gradient(#E4E6EB,#E4E6EB) 4.4em 1.5em/40% .7em no-repeat,linear-gradient(#E4E6EB,#E4E6EB) 4.4em 2.6em/25% .6em no-repeat}
/* Facebook / LinkedIn / Xing: grey timeline, the post as a white card */
.ws-ad--facebook .ws-ad__wordmark{font-family:'Helvetica Neue',Arial,sans-serif}
.ws-ad--facebook .ws-ad__bar{border:0}
.ws-ad--facebook .ws-ad__post{border-top:.45em solid #E4E6EB}
.ws-ad--linkedin .ws-phone__screen,.ws-ad--xing .ws-phone__screen{background:#F4F2EE}
.ws-ad--linkedin .ws-ad__post,.ws-ad--xing .ws-ad__post{margin-top:.5em;background:#fff}
.ws-ad--linkedin .ws-ad__link,.ws-ad--xing .ws-ad__link{background:#fff;border-bottom:1px solid #E4E6EB}
.ws-ad--linkedin .ws-ad__ghost,.ws-ad--xing .ws-ad__ghost{border-top-color:#F4F2EE}
.ws-ad--linkedin .ws-ad__post .ws-ad__head .ws-ad__avatar,.ws-ad--xing .ws-ad__post .ws-ad__head .ws-ad__avatar{border-radius:.25em}
.ws-ad--linkedin .ws-ad__link{border:0}
.ws-ad__social{display:flex;align-items:center;gap:.4em;padding:.5em 1em;font-size:.8em;color:#666}
.ws-ad__social .ws-ad__reactions{margin:0 0 0 .3em}
.ws-ad__social > span:last-child{margin-left:auto}
.ws-ad__actions--stacked span{flex-direction:column;gap:.2em;font-size:.85em}
.ws-ad__search{flex:1;display:flex;align-items:center;gap:.4em;padding:.45em .7em;border-radius:.4em;background:#EDF3F8;color:#666;font-size:.9em}
.ws-ad--xing .ws-ad__search{background:#F0F0F0}
.ws-ad--linkedin .ws-ad__bar .ws-ad__avatar{width:2.1em;height:2.1em;font-size:.7em}
/* Instagram */
.ws-ad .ws-ad__logo{width:auto;height:2.1em}
.ws-ad__media--portrait{aspect-ratio:4/5}
.ws-ad__media--portrait img{object-position:41% 40%}
/* CTA strip in a colour from the image (Instagram tints it), here the slate grey of the office */
.ws-ad__strip{display:flex;align-items:center;justify-content:space-between;padding:.7em 1em;background:#3B4A58;color:#fff;font-size:.95em}
.ws-ad--instagram .ws-ad__actions{justify-content:flex-start;gap:1.1em;padding:.7em 1em .4em;border:0;color:#000}
.ws-ad--instagram .ws-ad__actions span:last-child{margin-left:auto}
.ws-ad--instagram .ws-ad__actions svg{width:1.75em;height:1.75em}
.ws-ad--instagram .ws-ad__text{font-size:.92em}
/* Stories (Facebook, Instagram, Snapchat): full-screen photo, light controls */
.ws-ad--story .ws-phone__screen{background:#111;color:#fff}
.ws-ad__full{position:absolute;inset:0}
.ws-ad__full img{width:100%;height:100%;object-fit:cover;object-position:41% 50%}
.ws-ad__full::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.45),transparent 22%,transparent 45%,rgba(0,0,0,.85) 80%)}
.ws-ad__progress{position:relative;z-index:2;display:flex;gap:.3em;padding:0 .8em}
.ws-ad__progress i{flex:1;height:.2em;border-radius:1em;background:rgba(255,255,255,.45)}
.ws-ad__progress i:first-child{background:#fff}
.ws-ad--story .ws-ad__head{position:relative;z-index:2}
.ws-ad--story .ws-ad__head :is(small,.ws-ad__icons){color:rgba(255,255,255,.85)}
.ws-ad__caption{position:relative;z-index:2;margin-top:auto;padding:0 1.2em 1em}
.ws-ad__caption b{display:block;font:700 1.6em/1.15 var(--font-head)}
.ws-ad__caption span{display:block;margin-top:.4em;font-size:.95em;opacity:.92}
.ws-ad__swipe{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.2em;padding-bottom:2.4em}
.ws-ad__swipe b{padding:.5em 1.1em;border-radius:999px;background:#fff;color:#1C1E21;font-size:.9em}
/* Instagram story: the card ends above a black footer with ⌃ and send; text is part of the creative */
.ws-ad--igstory .ws-phone__screen{background:#000}
.ws-ad__card-story{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:0 0 .9em .9em}
.ws-ad__card-story .ws-ad__full::after{background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.3) 30%,transparent 45%,transparent 60%,rgba(0,0,0,.35))}
.ws-ad__progress--one{padding-top:.4em}
.ws-ad__progress--one i{height:.14em}
.ws-ad__creative{position:relative;z-index:2;margin:1.4em 1em 0;font:700 1.75em/1.12 var(--font-head);text-align:center;text-shadow:0 .1em .6em rgba(0,0,0,.35)}
.ws-ad__sticker{position:relative;z-index:2;align-self:center;display:flex;align-items:center;gap:.35em;margin:auto 0 2.6em;padding:.5em .9em;border-radius:.5em;background:#fff;color:#3B4A58;font:600 1.15em/1 var(--font-head);text-transform:uppercase;letter-spacing:.01em}
.ws-ad__sticker svg{width:1.1em !important;height:1.1em !important}
.ws-ad__story-foot{flex:none;display:flex;align-items:center;justify-content:center;position:relative;height:5.6em;padding-bottom:1.6em;color:#fff}
.ws-ad__story-foot .ws-ad__icons{position:absolute;right:1.2em;top:1.3em}
/* Snapchat: brand · Anzeige and headline top left, CTA pill with caret, dark share button */
.ws-ad--snapchat .ws-ad__head b small{color:rgba(255,255,255,.75) !important;font-weight:400}
.ws-ad__snapcta{position:relative;z-index:2;display:flex;gap:.5em;margin-top:auto;padding:0 .8em 2.4em}
.ws-ad__snapcta .ws-ad__btn{flex:1;padding:.8em;border-radius:999px;background:#fff}
.ws-ad__snapcta i{display:grid;place-items:center;width:2.8em;height:2.8em;border-radius:50%;background:rgba(0,0,0,.45);color:#fff}
/* Storytelling: the page after the click, button fixed at the bottom */
.ws-ad--page .ws-ad__bar{border:0}
.ws-ad__media--hero{aspect-ratio:16/9}
.ws-ad__page{flex:1;padding:.9em 1.1em 0}
.ws-ad__title{display:block;font:700 1.45em/1.15 var(--font-head);color:inherit}
.ws-ad__page > small{margin-top:.7em;font-weight:700;color:#1C1E21 !important}
.ws-ad__page ul{margin:.4em 0 .9em;list-style:none}
.ws-ad__page li{position:relative;padding:.18em 0 .18em 1.3em;font-size:.92em}
.ws-ad__page li::before{content:'';position:absolute;left:.15em;top:.62em;width:.55em;height:.3em;border:solid var(--ad);border-width:0 0 .14em .14em;transform:rotate(-45deg)}
.ws-ad__page .ws-ad__media{aspect-ratio:2/1;border-radius:.5em}
.ws-ad--tiktok .ws-ad__btn--block{border-radius:.3em}
/* Google Display (responsive display ads as rendered in Jul 2026): advertiser header, blue button, AdChoices */
.ws-ad__pill{flex:1;height:.7em;margin:0 3em;border-radius:1em;background:#E4E6EB}
.ws-ad__article{flex:1;display:flex;flex-direction:column;gap:.9em;padding:.9em 1em;background:#F1F3F4}
.ws-ad__lines{display:grid;gap:.55em}
.ws-ad__lines i{height:.6em;border-radius:1em;background:#DADCE0}
.ws-ad__lines i:nth-child(4n){width:70%}
.ws-ad--google .ws-ad__head{padding:.6em .8em .5em}
.ws-ad--google .ws-ad__head .ws-ad__avatar{width:2.2em;height:2.2em;font-size:.72em}
.ws-ad--google .ws-ad__head b{font-size:.85em;font-weight:500}
.ws-ad--google .ws-ad__head small{font-size:.75em;color:#5F6368}
.ws-ad__display{position:relative;overflow:hidden;border-radius:.3em;background:#fff;box-shadow:0 .1em .4em rgba(0,0,0,.12)}
.ws-ad__display > .ws-ad__media{margin:0 .8em;border-radius:.5em}
.ws-ad__display-copy{display:flex;flex-direction:column;align-items:center;gap:.4em;padding:.7em .8em .9em;text-align:center}
.ws-ad__display .ws-ad__title{font-size:1.3em;font-weight:400}
.ws-ad__display p{font-size:.8em;color:#5F6368}
.ws-ad__display-row{display:flex;gap:.7em;padding:0 .8em .8em}
.ws-ad__display-row .ws-ad__media{width:42%;border-radius:.4em}
.ws-ad__display-row > div:last-child{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.35em}
.ws-ad__display-row b{font-size:1.05em;font-weight:400}
.ws-ad__display-row p{font-size:.72em}
.ws-ad__display-row .ws-ad__btn--google{font-size:.75em}
.ws-ad__choices{position:absolute;z-index:1;top:0;right:0;display:flex;gap:.1em;padding:.15em .2em;background:rgba(255,255,255,.9);border-bottom-left-radius:.3em}
.ws-ad .ws-ad__choices svg{width:.95em;height:.95em}
.ws-ad__closebar{display:flex;align-items:center;justify-content:space-between;padding:.2em 1em .5em;color:#5F6368}
.ws-ad__inter{position:relative;flex:1;display:flex;flex-direction:column;margin:0 .8em 2.2em;overflow:hidden;border-radius:.5em;background:#fff;box-shadow:0 .2em 1.2em rgba(0,0,0,.18)}
.ws-ad__inter > .ws-ad__media{aspect-ratio:1/1}
.ws-ad__inter-copy{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;padding:1em 1.2em;text-align:center}
.ws-ad__inter-copy p{font-size:.95em;color:#5F6368}
.ws-ad--google-1 .ws-phone__screen{background:#202124;color:#fff}
.ws-ad--google-1 .ws-ad__closebar{color:#BDC1C6}
.ws-ad--google-1 .ws-ad__inter{background:#303134}
.ws-ad--google-1 :is(.ws-ad__inter-copy p,.ws-ad__head small){color:#BDC1C6 !important}
.ws-ad--google-1 .ws-ad__title{font-size:1.75em}
.ws-ad--google-4 .ws-ad__title{font-size:1.6em;font-weight:400}
/* Spotify: display ad between the sections of Search, tab bar of free users */
.ws-ad--spotify .ws-phone__screen{background:#121212;color:#fff}
.ws-ad--spotify small{color:#B3B3B3 !important}
.ws-ad--spotify .ws-ad__bar{border:0}
.ws-ad--spotify .ws-ad__bar > b{font-size:1.5em}
.ws-ad--spotify .ws-ad__bar .ws-ad__avatar{width:2.2em;height:2.2em;font-size:.72em}
.ws-ad--spotify .ws-ad__search{flex:none;margin:0 1em;padding:.7em;background:#fff;color:#121212;font-weight:600;border-radius:.35em}
.ws-ad__spotify{flex:1;padding:.9em 1em 0}
.ws-ad__spotify > small{font-weight:700;color:#fff !important;font-size:1em}
.ws-ad__tiles{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin:.6em 0 .4em}
.ws-ad__tiles span{height:3.4em;padding:.5em .6em;border-radius:.4em;font-weight:700;font-size:.9em}
.ws-ad--spotify .ws-ad__head{padding:.5em 0}
.ws-ad--spotify .ws-ad__head .ws-ad__icons{color:#B3B3B3}
.ws-ad__card{display:flex;gap:.7em;padding:.6em;border-radius:.5em;background:#2A2A2A}
.ws-ad__card .ws-ad__media{width:38%;border-radius:.3em}
.ws-ad__card > div:last-child{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.25em}
.ws-ad__card b{font-size:1.05em}
.ws-ad__card .ws-ad__btn{margin-top:auto;background:rgba(255,255,255,.2);color:#fff;border-radius:999px}
.ws-ad__player{position:absolute;z-index:3;left:.5em;right:.5em;bottom:5.2em;display:flex;align-items:center;gap:.6em;padding:.5em;overflow:hidden;border-radius:.4em;background:#5A3A2E}
.ws-ad__player::after{content:'';position:absolute;left:.5em;bottom:0;width:40%;height:.12em;background:#fff}
.ws-ad__player > i{width:2.4em;height:2.4em;border-radius:.25em;background:linear-gradient(135deg,#E8115B,#8400E7)}
.ws-ad__player > div{flex:1;font-size:.85em}
.ws-formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:32px}
.ws-formats > li{padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--color-bg)}
.ws-formats b{display:block;font-family:var(--font-head);font-size:17px;line-height:23px;color:var(--color-headline)}
.ws-formats span{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--color-text-muted)}
@media (max-width:960px){
  .ws-channel{padding:32px 28px}
  .ws-channel__head{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (max-width:767px){
  .ws-tabs__list{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-inline:-20px;padding:2px 20px 6px;scrollbar-width:none}
  .ws-tabs__list::-webkit-scrollbar{display:none}
  .ws-tab{flex:none}
  .ws-channel{padding:24px 18px}
  .ws-channel__copy h3{font-size:26px;line-height:33px}
  .ws-phones{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-18px;padding:32px 18px 8px;scrollbar-width:thin}
  .ws-phones > li{flex:none;width:200px;scroll-snap-align:center}
  .ws-phones .ws-phone{--w:200px}
  .ws-phones.is-paged > li.is-off-page{display:flex}
  .ws-phones + .ws-pager{display:none}
}
/* Blitz-Anfrage after the job packages: copy left, buttons right (stacked on narrow screens). */
.ws-blitz{align-items:center}
.ws-blitz .ws-actions{margin-top:0;justify-content:flex-end}
@media (max-width:960px){.ws-blitz .ws-actions{justify-content:flex-start}}