/*
Theme Name: SW-Comnizept
Theme URI: https://sw-comnizept.de
Description: Child-Theme auf GeneratePress für den Relaunch von sw-comnizept.de.
Author: SW-Comnizept GmbH & Co. KG
Template: generatepress
Version: 0.2
Text Domain: swcomnizept
*/

/* ==========================================================================
   1 · Schriften (lokal, kein externer Aufruf)
   ========================================================================== */
@font-face{
  font-family:"Archivo";
  src:url("schriften/archivo-var.woff2") format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("schriften/sourcesans3-var.woff2") format("woff2-variations");
  font-weight:200 900; font-style:normal; font-display:swap;
}

/* ==========================================================================
   2 · Gestaltungswerte
   ========================================================================== */
:root{
  --rot:#B40218;
  --rot-tief:#8A0213;
  --rot-hell:#E8394F;      /* auf dunklem Grund */
  --nacht:#130A0D;
  --nacht-2:#1F1216;
  --kohle:#2A1F22;
  --hell:#F8F5F5;
  --hell-2:#F1EBEC;
  --weiss:#FFFFFF;
  --linie:#E7DFE1;
  --linie-2:#D3C7CA;
  /* Rahmen von Bedienelementen brauchen 3:1 gegen den Untergrund (WCAG 1.4.11).
     Die hellen Linien oben sind dekorativ und dafür zu schwach. */
  --bedienrand:#8A7F83;
  --text:#211A1C;
  --leise:#6C6165;
  --leise-dunkel:rgba(255,255,255,.68);
  --petrol:#0E5C5F;
  --petrol-hell:#E2F0F0;
  --bernstein:#8A6100;
  --bernstein-hell:#FBF1DE;
  /* WhatsApp-Grün, abgedunkelt: das Original hält weiße Schrift nicht auf 4,5:1. */
  --whatsapp:#137A43;
  --whatsapp-tief:#0F6135;
  --whatsapp-hell:#5FD08A;
  /* Sternform für die Bewertungen – als Maske, damit die Farbe im CSS bleibt. */
  --stern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E");

  --titel:"Archivo","Segoe UI",system-ui,sans-serif;
  --fliess:"Source Sans 3","Segoe UI",system-ui,sans-serif;

  --breite:1240px;
  --luft:clamp(56px,6vw,96px);
  --r-klein:8px;
  --r:14px;
  --r-gross:22px;

  --schatten-1:0 1px 2px rgba(19,10,13,.05), 0 4px 12px -6px rgba(19,10,13,.12);
  --schatten-2:0 2px 4px rgba(19,10,13,.06), 0 18px 40px -22px rgba(19,10,13,.35);
  --schatten-rot:0 18px 40px -20px rgba(180,2,24,.55);
}

/* GeneratePress färbt Knöpfe und Akzente über eigene Variablen – hier auf unser Rot gestellt. */
body{--accent:#B40218;--accent-hover:#8A0213}

*,*::before,*::after{box-sizing:border-box}

body{
  font-family:var(--fliess);
  color:var(--text);
  font-size:17.5px;
  line-height:1.65;
  background:var(--weiss);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--titel);
  color:var(--nacht);
  letter-spacing:-.025em;
  line-height:1.1;
  text-wrap:balance;
  text-transform:none;
  margin:0;
}
h1{font-size:clamp(34px,5vw,56px);font-weight:700;letter-spacing:-.035em}
h2{font-size:clamp(26px,3.6vw,40px);font-weight:700;letter-spacing:-.03em}
h3{font-size:clamp(19px,2.1vw,23px);font-weight:600}
h4{font-size:17px;font-weight:600}
p{margin:0}
a{color:var(--rot-tief);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--rot)}
:focus-visible{outline:2px solid var(--rot);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto}
.eng{max-width:66ch}

/* ==========================================================================
   2b · Sprunglink – erste Station für alle, die mit der Tastatur bedienen
   ========================================================================== */
.sw-sprunglink{
  position:absolute;left:12px;top:-100px;z-index:2000;
  background:var(--rot);color:#fff !important;
  padding:12px 20px;border-radius:0 0 var(--r-klein) var(--r-klein);
  font-weight:600;text-decoration:none;
  transition:top .15s ease;
}
.sw-sprunglink:focus{top:0}

/* Für Screenreader vorhanden, optisch nicht – hält die Überschriftenfolge lückenlos. */
.sw-nurlesbar{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ==========================================================================
   3 · Kopfleiste
   ========================================================================== */
.sw-topbar{
  background:var(--nacht);
  color:rgba(255,255,255,.9);
  font-size:13.5px;
  line-height:1.4;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sw-topbar__inner{
  max-width:var(--breite);margin:0 auto;padding:8px 26px;
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;
}
.sw-topbar a{color:inherit;text-decoration:none}
.sw-topbar a:hover{color:#fff;text-decoration:underline}
.sw-topbar__tel{display:flex;flex-wrap:wrap;gap:4px 26px}
.sw-topbar__ort{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 9px}
.sw-topbar__ort b{font-weight:600;color:#fff}
.sw-topbar__ort .tel{font-variant-numeric:tabular-nums}
.sw-topbar__rechts{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center}
.sw-offen{display:inline-flex;align-items:center;gap:7px;color:var(--leise-dunkel);font-size:13px}
.sw-offen::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:#48D18A;box-shadow:0 0 0 3px rgba(72,209,138,.2);
}
.sw-offen.ist-zu::before{background:#8A7F82;box-shadow:none}

/* ==========================================================================
   4 · Header und Navigation
   ========================================================================== */
.site-header{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie);
  padding-block:12px;
  position:sticky;top:0;z-index:100;
}
/* Der Kopfbereich richtet sich nach diesem Stylesheet, nicht nach den
   GeneratePress-Einstellungen: die schreiben je nach Installation eine eigene
   Logobreite und eine große Polsterung vor, was die Zeile auseinanderreißt. */
.site-header .inside-header{
  padding:0 26px !important;
  display:flex;align-items:center;gap:22px;flex-wrap:nowrap;
}
.site-logo{margin-right:22px;flex:none}
.site-logo img,
.site-header .header-image{max-width:210px;width:auto !important;height:auto}
@media(max-width:768px){
  .site-header .inside-header{padding:0 18px !important;flex-wrap:wrap}
  .site-logo img,.site-header .header-image{max-width:170px}
}
.site-branding .main-title,.site-branding .site-description{display:none}

/* Der Umschalter samt Lupe gehört auf schmale Bildschirme. Auf dem Rechner
   steht die Suche im Shop, nicht im Kopf. GeneratePress blendet ihn oberhalb
   von 768 px nicht selbst aus, deshalb hier ausdrücklich. */
@media(min-width:769px){
  .site-header .mobile-menu-control-wrapper,
  .site-header #mobile-menu-control-wrapper{display:none !important}

  /* Die Lupe von GeneratePress sitzt neben dem Menü und drückt es in eine
     zweite Zeile. Die Suche steht im Shop, wo sie gebraucht wird – dort als
     richtiges Feld statt als Symbol. */
  .main-navigation .menu-bar-items,
  .main-navigation li.search-item{display:none !important}
  .main-navigation .inside-navigation{flex-wrap:nowrap}
}

.main-navigation{background:transparent}
.main-navigation .main-nav ul li a{
  font-family:var(--fliess);
  font-size:15px;font-weight:600;color:var(--text);
  padding-left:11px;padding-right:11px;
  transition:color .15s ease;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a{color:var(--rot)}
@media(min-width:1025px){
  .main-navigation .main-nav > ul{flex-wrap:nowrap}
  .main-navigation .main-nav > ul > li{flex:none}
  .main-navigation .main-nav > ul > li > a{white-space:nowrap;position:relative}
  .main-navigation .main-nav > ul > li.current-menu-item > a::after,
  .main-navigation .main-nav > ul > li.current-menu-ancestor > a::after{
    content:"";position:absolute;left:11px;right:11px;bottom:6px;height:2px;background:var(--rot);border-radius:2px;
  }
}
.main-navigation .main-nav ul ul{
  width:auto;min-width:248px;
  border:1px solid var(--linie);
  border-radius:var(--r-klein);
  box-shadow:var(--schatten-2);
  overflow:hidden;
  background:#fff;
}
.main-navigation .main-nav ul ul li a{font-size:14.5px;font-weight:500;padding:11px 18px}
.main-navigation .main-nav ul ul li a:hover{background:var(--hell)}

.main-navigation .main-nav ul li.menue-cta > a{
  background:var(--rot);color:#fff;
  border-radius:var(--r-klein);
  margin:8px 0 8px 14px;padding:10px 18px;line-height:1.2;
  box-shadow:var(--schatten-rot);
  transition:transform .15s ease,background .15s ease;
}
.main-navigation .main-nav ul li.menue-cta > a:hover{background:var(--rot-tief);color:#fff;transform:translateY(-1px)}
.main-navigation .main-nav ul li.menue-cta > a::after{display:none}

/* ==========================================================================
   5 · Sektionsgerüst
   ========================================================================== */
.sw-sektion{padding-block:var(--luft);position:relative}
.sw-sektion--hell{background:var(--hell)}
.sw-sektion--dunkel{background:var(--nacht);color:rgba(255,255,255,.82)}
.sw-sektion--dunkel h2,.sw-sektion--dunkel h3,.sw-sektion--dunkel h4{color:#fff}
.sw-sektion--schmal{padding-block:clamp(34px,3.6vw,52px)}

/* WordPress schiebt in jede Gruppe einen zusätzlichen Innencontainer, weil
   GeneratePress kein Block-Theme ist. Für unsere eigenen Gruppen darf der keine
   eigene Box sein – sonst greift kein Gitter, weil die Kacheln eine Ebene zu
   tief liegen. Im Editor gibt es den Container nicht; die Regel läuft dort
   einfach ins Leere. */
.wp-block-group[class*="sw-"] > .wp-block-group__inner-container{
  display:contents;
}

/* volle Breite; die Begrenzung macht allein .sw-innen. */
.sw-sektion,.sw-hero{max-width:none;width:100%}
.sw-innen{max-width:var(--breite);width:100%;margin-inline:auto;padding-inline:26px}

.sw-kopf{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:flex-end;justify-content:space-between;margin-bottom:34px}
.sw-kopf h2{margin:0}
.sw-kopf p{color:var(--leise);max-width:56ch;margin-top:10px}
.sw-kopf__text{min-width:0}
.sw-kopf__link{margin:0}
.sw-kopf--mitte{justify-content:center;text-align:center}
.sw-kopf--mitte .sw-augenbraue{justify-content:center}
.sw-kopf--mitte p{margin-inline:auto}
.sw-sektion--dunkel .sw-kopf p{color:var(--leise-dunkel)}

.sw-augenbraue{
  font-family:var(--fliess);font-size:13px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rot);
  margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.sw-augenbraue::before{content:"";width:22px;height:2px;background:var(--rot);border-radius:2px;flex:none}
.sw-sektion--dunkel .sw-augenbraue,.sw-hero--dunkel .sw-augenbraue{color:var(--rot-hell)}
.sw-sektion--dunkel .sw-augenbraue::before,.sw-hero--dunkel .sw-augenbraue::before{background:var(--rot-hell)}

.sw-raster{display:grid;gap:22px}
.sw-raster--2{grid-template-columns:repeat(2,1fr)}
.sw-raster--3{grid-template-columns:repeat(3,1fr)}
.sw-raster--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.sw-raster--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){.sw-raster--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.sw-raster--2,.sw-raster--3,.sw-raster--4{grid-template-columns:1fr}}

/* ==========================================================================
   6 · Aufmacher
   ========================================================================== */
.sw-hero{position:relative;overflow:hidden}

.sw-hero--dunkel{
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(232,57,79,.30), transparent 62%),
    radial-gradient(700px 400px at 8% 110%, rgba(180,2,24,.20), transparent 60%),
    linear-gradient(170deg,#1F1216 0%,#130A0D 60%);
  color:#fff;
  padding-block:clamp(52px,6.5vw,96px);
}
.sw-hero--dunkel > *{position:relative;z-index:1}
.sw-hero--dunkel h1{color:#fff}
.sw-hero--dunkel .sw-hero__text{color:rgba(255,255,255,.78)}

.sw-hero--seite{
  background:
    radial-gradient(680px 320px at 88% -30%, rgba(180,2,24,.12), transparent 65%),
    linear-gradient(180deg,var(--weiss) 0%,var(--hell) 100%);
  padding-block:clamp(44px,5vw,74px);
  border-bottom:1px solid var(--linie);
}

.wp-block-columns.sw-hero__raster{
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(30px,4vw,60px);align-items:center;margin-bottom:0;
}
.wp-block-columns.sw-hero__raster > .wp-block-column{flex-basis:auto !important;min-width:0}
@media(max-width:940px){.wp-block-columns.sw-hero__raster{grid-template-columns:1fr}}
.sw-hero .sw-innen > .wp-block-columns{margin-bottom:0}
.sw-hero__text{font-size:19.5px;color:var(--leise);max-width:48ch;margin:18px 0 30px}
.sw-hero h1{margin:0}

/* Das Bild bestimmt seine Form selbst – so wird kein Motiv angeschnitten. */
/* Auch als Bild-Block aus dem Editor: der bringt eigene Abstände mit. */
figure.wp-block-image.sw-hero__bild,
.sw-hero__bild{
  border-radius:var(--r-gross);overflow:hidden;margin:0;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.1);
}
.sw-hero--seite .sw-hero__bild{border-color:var(--linie);box-shadow:0 30px 60px -34px rgba(19,10,13,.5)}
.sw-hero__bild img{width:100%;height:auto;display:block}

/* Grafisches Motiv statt Stockfoto */
.sw-motiv{
  border-radius:var(--r-gross);overflow:hidden;
  border:1px solid var(--linie);
  aspect-ratio:4/3;
  box-shadow:0 30px 60px -38px rgba(19,10,13,.4);
}
.sw-motiv--dunkel{border-color:rgba(255,255,255,.1)}
.sw-motiv svg{display:block;width:100%;height:100%}
.sw-hero__platzhalter{
  aspect-ratio:4/3;border-radius:var(--r-gross);
  background:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 10px),
    linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:flex-end;padding:18px;
}
.sw-hero--seite .sw-hero__platzhalter{
  background:
    repeating-linear-gradient(-45deg,rgba(19,10,13,.05) 0 2px,transparent 2px 10px),
    var(--hell-2);
  border-color:var(--linie);
}
.sw-hero__platzhalter span{
  background:rgba(19,10,13,.78);color:#fff;font-size:13px;padding:6px 12px;border-radius:6px;
}

/* schwebende Belegchips im Aufmacher */
.sw-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sw-chip{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.86);
  border-radius:100px;padding:7px 15px;font-size:14px;font-weight:500;
  backdrop-filter:blur(6px);
}
.sw-chips > *{margin:0}
/* Das Symbol kommt als .sw-zeichen dazu – im Chip aber ohne eigene Kachel. */
.sw-chip .sw-zeichen{
  width:auto;height:auto;border:0;background:none;border-radius:0;
  margin:0;display:inline-flex;color:inherit;
}
.sw-chip svg{width:16px;height:16px;flex:none;color:var(--rot-hell)}
.sw-hero--seite .sw-chip{background:var(--weiss);border-color:var(--linie);color:var(--text);box-shadow:var(--schatten-1)}
.sw-hero--seite .sw-chip svg{color:var(--rot)}

/* ==========================================================================
   7 · Knöpfe
   ========================================================================== */
.sw-knopf,
.wp-block-button .wp-block-button__link,
.wp-block-button__link{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--rot) !important;color:#fff !important;
  font-family:var(--fliess);font-weight:600;font-size:16.5px;
  padding:13px 24px;border-radius:var(--r-klein);
  text-decoration:none;border:1px solid var(--rot);
  box-shadow:var(--schatten-rot);
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.sw-knopf:hover,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button__link:hover{
  background:var(--rot-tief);border-color:var(--rot-tief);color:#fff !important;
  transform:translateY(-2px);
}
.sw-knopf svg{width:18px;height:18px}

a.sw-knopf--leise,
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.sw-knopf--leise > .wp-block-button__link{
  background:transparent !important;color:var(--text) !important;
  border:1px solid var(--bedienrand) !important;box-shadow:none !important;
}
a.sw-knopf--leise:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.sw-knopf--leise > .wp-block-button__link:hover{
  background:var(--hell) !important;color:var(--text) !important;border-color:var(--linie-2) !important;
}
/* Auf dunklem Grund muss der leise Knopf hell werden – sonst steht dunkle
   Schrift auf dunkler Fläche. Gilt für beide Schreibweisen: den einfachen Link
   und den Knopf-Block aus dem Editor. */
.sw-hero--dunkel a.sw-knopf--leise,
.sw-hero--dunkel .wp-block-button.sw-knopf--leise > .wp-block-button__link,
.sw-sektion--dunkel a.sw-knopf--leise,
.sw-sektion--dunkel .wp-block-button.sw-knopf--leise > .wp-block-button__link,
.sw-band a.sw-knopf--leise,
.sw-band .wp-block-button.sw-knopf--leise > .wp-block-button__link,
.sw-produkt a.sw-knopf--leise,
.sw-produkt .wp-block-button.sw-knopf--leise > .wp-block-button__link{
  color:#fff !important;border-color:rgba(255,255,255,.28) !important;background:rgba(255,255,255,.05) !important;
}
.sw-hero--dunkel a.sw-knopf--leise:hover,
.sw-hero--dunkel .wp-block-button.sw-knopf--leise > .wp-block-button__link:hover,
.sw-sektion--dunkel a.sw-knopf--leise:hover,
.sw-sektion--dunkel .wp-block-button.sw-knopf--leise > .wp-block-button__link:hover,
.sw-band a.sw-knopf--leise:hover,
.sw-band .wp-block-button.sw-knopf--leise > .wp-block-button__link:hover,
.sw-produkt .wp-block-button.sw-knopf--leise > .wp-block-button__link:hover{
  background:rgba(255,255,255,.13) !important;color:#fff !important;
}
.sw-knopfreihe,.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}

.sw-pfeil{
  font-weight:600;color:var(--rot-tief);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.sw-pfeil::after{content:"→";transition:transform .15s ease}
.sw-pfeil:hover::after{transform:translateX(4px)}
.sw-sektion--dunkel .sw-pfeil,.sw-hero--dunkel .sw-pfeil{color:var(--rot-hell)}

/* ==========================================================================
   8 · Zahlenband
   ========================================================================== */
.sw-zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:820px){.sw-zahlen{grid-template-columns:repeat(2,1fr)}}
.sw-zahl__wert{
  display:block;font-family:var(--titel);font-weight:700;
  font-size:clamp(30px,3.6vw,42px);line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:#fff;
}
.sw-zahl__text{display:block;margin-top:10px;font-size:14.5px;color:var(--leise-dunkel);line-height:1.45}
.sw-sektion--hell .sw-zahl__wert,.sw-sektion:not(.sw-sektion--dunkel) .sw-zahl__wert{color:var(--nacht)}
.sw-sektion:not(.sw-sektion--dunkel) .sw-zahl__text{color:var(--leise)}

/* ==========================================================================
   9 · Zwei-Wege-Weiche
   ========================================================================== */
.sw-wege{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:880px){.sw-wege{grid-template-columns:1fr}}
/* Den roten Balken über der Karte gab es hier einmal – er war reine Zierde und
   unterschied die beiden Karten nicht voneinander. Die farbige Augenbraue
   („Für Unternehmen“ / „Für Privatkunden“) macht das besser. */
.sw-weg{
  background:linear-gradient(180deg,var(--weiss),#FCFAFA);
  border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:clamp(28px,3vw,40px);
  box-shadow:var(--schatten-1);
  position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.sw-weg:hover{transform:translateY(-3px);box-shadow:var(--schatten-2)}
.sw-weg h2{font-size:clamp(23px,2.6vw,29px);margin-bottom:12px}
.sw-weg > p{color:var(--leise);margin-bottom:22px}
.sw-weg ul{list-style:none;margin:0 0 26px;padding:0}
.sw-weg li{
  padding:11px 0 11px 30px;border-bottom:1px solid var(--linie);
  position:relative;font-size:16.5px;
}
.sw-weg li:last-child{border-bottom:0}
.sw-weg li::before{
  content:"";position:absolute;left:2px;top:18px;
  width:8px;height:8px;border-right:2px solid var(--rot);border-bottom:2px solid var(--rot);
  transform:rotate(-45deg);
}
.sw-weg li b{font-weight:600}
.sw-weg li .sw-preis{color:var(--leise);font-size:15px}
.sw-weg__link{margin:0}

/* ==========================================================================
   10 · Kacheln mit Zeichen
   ========================================================================== */
.sw-kachel{
  background:var(--weiss);
  border:1px solid var(--linie);border-radius:var(--r);
  padding:26px 26px 28px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.sw-kachel:hover{transform:translateY(-3px);box-shadow:var(--schatten-2);border-color:var(--linie-2)}
.sw-kachel h3{margin:0;font-size:19px}
.sw-kachel p{margin:0;color:var(--leise);font-size:16px}
.sw-kachel .sw-preis{
  margin-top:auto;padding-top:14px;
  font-family:var(--titel);font-weight:700;font-size:18px;color:var(--nacht);
  font-variant-numeric:tabular-nums;
}
.sw-kachel .sw-preis small{font-family:var(--fliess);font-weight:400;font-size:14px;color:var(--leise)}
.sw-sektion--dunkel .sw-kachel{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);
}
.sw-sektion--dunkel .sw-kachel p{color:var(--leise-dunkel)}
.sw-sektion--dunkel .sw-kachel .sw-preis{color:#fff}

.sw-zeichen{
  width:46px;height:46px;border-radius:12px;flex:none;
  display:grid;place-items:center;margin-bottom:6px;
  background:linear-gradient(150deg,rgba(180,2,24,.14),rgba(180,2,24,.05));
  border:1px solid rgba(180,2,24,.18);
  color:var(--rot);
}
.sw-zeichen svg{width:23px;height:23px}
.sw-sektion--dunkel .sw-zeichen{
  background:linear-gradient(150deg,rgba(232,57,79,.22),rgba(232,57,79,.06));
  border-color:rgba(232,57,79,.3);color:var(--rot-hell);
}

/* ==========================================================================
   11 · Produktkarten (eigene Software)
   ========================================================================== */
.sw-produkt{
  background:#1C1216;
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r);
  padding:clamp(26px,2.6vw,32px);
  color:rgba(255,255,255,.74);
  display:flex;flex-direction:column;
  transition:border-color .2s ease,background .2s ease;
}
.sw-produkt:hover{border-color:rgba(255,255,255,.2);background:#22161B}
.sw-produkt h3{color:#fff;font-size:20px;margin:0 0 10px;min-height:2.2em}
.sw-produkt > p{margin:0 0 22px;font-size:16px}
.sw-produkt ul{margin:0 0 22px;padding:0;list-style:none}
.sw-produkt li{
  padding:7px 0 7px 26px;position:relative;font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sw-produkt li:last-child{border-bottom:0}
.sw-produkt li::before{
  content:"";position:absolute;left:2px;top:15px;
  width:7px;height:7px;border-right:2px solid var(--rot-hell);border-bottom:2px solid var(--rot-hell);
  transform:rotate(-45deg);
}
.sw-produkt .sw-fuss{margin-top:auto;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.sw-marke{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sw-marke__text{min-width:0}
.sw-marke__name,.sw-marke__zusatz{margin:0}
.sw-marke__zeichen{width:46px;height:46px;flex:none}
/* AnyDNS gehört nicht zur Comni-Familie und bekommt ein eigenes Zeichen. */
.sw-marke__zeichen--anydns{
  display:grid;place-items:center;border-radius:13px;
  background:#fff;color:var(--rot);
}
.sw-marke__zeichen--anydns svg{width:26px;height:26px}
.sw-marke__name{
  font-family:var(--titel);font-weight:700;font-size:22px;
  letter-spacing:-.025em;color:#fff;display:block;line-height:1.1;
}
.sw-marke__name em{font-style:normal;color:var(--rot-hell)}
.sw-marke__zusatz{
  display:block;font-family:var(--fliess);font-size:12.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:4px;
}

/* Preisblock: immer gleicher Aufbau, immer am unteren Rand der Karte. */
.sw-produkt__preis{
  margin:auto 0 20px;padding:16px 18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-klein);
}
.sw-produkt__preis-wert{
  display:block;margin:0;
  font-family:var(--titel);font-size:25px;font-weight:700;color:#fff;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1;
}
.sw-produkt__preis-zusatz{
  display:block;margin:6px 0 0;
  font-size:14.5px;color:var(--leise-dunkel);line-height:1.4;min-height:2.8em;
}

.sw-merker{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 13px;border-radius:100px;margin-bottom:18px;
}
.sw-merker::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.sw-merker--eigen{background:rgba(72,209,138,.14);color:#5FD08A;border:1px solid rgba(72,209,138,.3)}
.sw-merker--pilot{background:rgba(232,177,57,.14);color:#E8B139;border:1px solid rgba(232,177,57,.3)}
.sw-merker--neu{background:rgba(232,57,79,.16);color:var(--rot-hell);border:1px solid rgba(232,57,79,.34)}
.sw-sektion:not(.sw-sektion--dunkel) .sw-kachel .sw-merker--eigen{background:var(--petrol-hell);color:var(--petrol);border-color:transparent}

/* ==========================================================================
   12 · Tarif- und Preistafeln
   ========================================================================== */
.sw-tarife{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.sw-tarife{grid-template-columns:1fr}}
.sw-tarif{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:30px 28px 32px;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.sw-tarif:hover{transform:translateY(-3px);box-shadow:var(--schatten-2)}
.sw-tarif--betont{border-color:var(--rot);box-shadow:var(--schatten-2);position:relative}
.sw-tarif--betont::before{
  content:"Meistgewählt";position:absolute;top:-13px;left:28px;
  background:var(--rot);color:#fff;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 13px;border-radius:100px;
}
/* Bei einer Gegenüberstellung ist die hervorgehobene Karte nicht der
   „meistgewählte Tarif“ – die Sprechblase muss dort weg. */
.sw-tarif--vergleich::before{content:none}
.sw-tarif h3{margin:0 0 6px;font-size:21px}
.sw-tarif__unter{color:var(--leise);font-size:15.5px;margin-bottom:20px}
.sw-tarif__preis{
  font-family:var(--titel);font-weight:700;font-size:34px;letter-spacing:-.035em;
  color:var(--nacht);line-height:1;font-variant-numeric:tabular-nums;
}
.sw-tarif__preis small{display:block;font-family:var(--fliess);font-weight:400;font-size:14.5px;color:var(--leise);letter-spacing:0;margin-top:8px}
.sw-tarif ul{list-style:none;margin:22px 0 26px;padding:0}
.sw-tarif li{
  padding:9px 0 9px 28px;position:relative;font-size:16px;
  border-bottom:1px solid var(--linie);color:var(--text);
}
.sw-tarif li:last-child{border-bottom:0}
.sw-tarif li::before{
  content:"";position:absolute;left:3px;top:16px;
  width:8px;height:8px;border-right:2px solid var(--petrol);border-bottom:2px solid var(--petrol);
  transform:rotate(-45deg);
}
.sw-tarif li.ohne::before{
  border:0;background:var(--linie-2);width:9px;height:2px;transform:none;top:20px;
}
.sw-tarif li.ohne{color:var(--leise)}
.sw-tarif .sw-fuss{margin-top:auto}

/* Preisliste (Dienstleistungen) */
.sw-preisliste{display:grid;gap:0;border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;background:var(--weiss)}
.sw-preiszeile{
  display:grid;grid-template-columns:1fr auto;gap:18px 26px;
  padding:20px 24px;border-bottom:1px solid var(--linie);align-items:start;
}
.sw-preiszeile:last-child{border-bottom:0}
.sw-preiszeile:nth-child(odd){background:#FDFCFC}
.sw-preiszeile h3{font-size:18px;margin:0 0 5px}
.sw-preiszeile p{color:var(--leise);font-size:15.5px;margin:0;max-width:74ch}
.sw-preiszeile__text{min-width:0}
.sw-preiszeile .preis{
  font-family:var(--titel);font-weight:700;font-size:21px;color:var(--nacht);
  white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
@media(max-width:640px){
  .sw-preiszeile{grid-template-columns:1fr;gap:8px}
  .sw-preiszeile .preis{font-size:19px}
}

/* ==========================================================================
   12a · Markenkarten (eigene Dienste)
   ========================================================================== */
.sw-marke-karte{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  padding:28px 28px 30px;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.sw-marke-karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-2);border-color:var(--linie-2)}
.sw-marke-karte__kopf{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sw-marke-karte__kopf .sw-katzeichen,
.sw-marke-karte__kopf .sw-zeichen{margin-bottom:0}
.sw-marke-karte__text{min-width:0}
.sw-marke-karte__name,.sw-marke-karte__zusatz{margin:0}
.sw-marke-karte__name{
  display:block;font-family:var(--titel);font-weight:700;font-size:21px;
  letter-spacing:-.025em;color:var(--nacht);line-height:1.1;
}
.sw-marke-karte__name em{font-style:normal;color:var(--rot)}
.sw-marke-karte__zusatz{
  display:block;font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:lowercase;color:var(--leise);margin-top:5px;
}
.sw-marke-karte > p{color:var(--leise);margin:0 0 18px;font-size:16px}
.sw-marke-karte ul{list-style:none;margin:0 0 18px;padding:0}
.sw-marke-karte li{
  padding:8px 0 8px 26px;position:relative;font-size:15.5px;
  border-bottom:1px solid var(--linie);
}
.sw-marke-karte li:last-child{border-bottom:0}
.sw-marke-karte li::before{
  content:"";position:absolute;left:3px;top:16px;
  width:7px;height:7px;border-right:2px solid var(--rot);border-bottom:2px solid var(--rot);
  transform:rotate(-45deg);
}
.sw-marke-karte__fuer{font-size:15.5px;color:var(--leise);margin:0 0 20px}
.sw-marke-karte__fuer strong{color:var(--text)}
.sw-marke-karte .sw-fuss{margin-top:auto}

/* ==========================================================================
   12b · Imagefilm
   ========================================================================== */
figure.wp-block-video.sw-video,
.sw-video{
  margin:0;border-radius:var(--r-gross);overflow:hidden;
  border:1px solid var(--linie);background:var(--nacht);
  box-shadow:0 40px 80px -44px rgba(19,10,13,.55);
  max-width:960px;margin-inline:auto;
}
.sw-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--nacht);object-fit:cover}

/* ==========================================================================
   12b2 · Google-Bewertungen
   ========================================================================== */
.sw-bewertungen__kopf{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 22px;margin-bottom:30px;
}
.sw-bewertungen__note{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sw-bewertungen__note b{font-family:var(--titel);font-size:24px;font-weight:700;color:var(--nacht);letter-spacing:-.02em}
.sw-bewertungen__note span{color:var(--leise);font-size:15.5px}

/* Sterne aus reinem CSS – kein Bild, keine Schrift von außen. */
.sw-sterne{display:inline-flex;gap:3px}
.sw-sterne > span{
  width:19px;height:19px;flex:none;
  background:var(--linie-2);
  -webkit-mask:var(--stern) center/contain no-repeat;
          mask:var(--stern) center/contain no-repeat;
}
.sw-sterne > span.voll{background:#E8A33D}
.sw-sterne > span.halb{background:linear-gradient(90deg,#E8A33D 50%,var(--linie-2) 50%)}

.sw-stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media(max-width:1000px){.sw-stimmen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.sw-stimmen{grid-template-columns:1fr}}
.sw-stimme{
  margin:0;background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--r);padding:22px 24px 24px;
  display:flex;flex-direction:column;gap:12px;
}
.sw-stimme__kopf{display:flex;align-items:center;gap:12px}
.sw-stimme__kuerzel{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--hell-2);object-fit:cover;
  display:grid;place-items:center;
  font-family:var(--titel);font-weight:700;color:var(--leise);
}
.sw-stimme__kopf b{display:block;font-size:15.5px;color:var(--text)}
.sw-stimme__kopf span{display:block;font-size:13.5px;color:var(--leise)}
.sw-stimme blockquote{
  margin:0;padding:0;border:0;font-size:15.5px;line-height:1.6;color:var(--text);
}
.sw-bewertungen__fuss{
  margin:26px auto 0;max-width:70ch;text-align:center;
  font-size:14.5px;color:var(--leise);line-height:1.55;
}

/* ==========================================================================
   12c · Stellenanzeigen
   ========================================================================== */
/* Ohne roten Oberkantenbalken: Der hätte an den abgerundeten Ecken gerade
   geendet, und die rote Art-Angabe darüber ist der bessere Farbakzent. */
.sw-stelle{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  padding:26px 26px 28px;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.sw-stelle:hover{transform:translateY(-3px);box-shadow:var(--schatten-2)}
.sw-stelle__art{
  display:inline-block;align-self:flex-start;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rot);margin-bottom:10px;
}
.sw-stelle h3{margin:0 0 10px;font-size:19px}
.sw-stelle p{margin:0 0 22px;color:var(--leise);font-size:16px}
.sw-stelle .sw-fuss{margin-top:auto}
/* Die Stellenkarte bekommt ihr Symbol über den Block – es steht vor der Art. */
.sw-stelle .sw-zeichen{margin-bottom:14px}

/* Einzelnes Symbol als Blickfang über einer Überschrift. */
.sw-symbolfeld{margin-bottom:16px}
.sw-symbolfeld .sw-zeichen{margin-bottom:0}

/* Verweis auf eine Datei zum Herunterladen. Format und Größe stehen im
   Knopftext, damit niemand ungefragt drei Megabyte lädt. */
.sw-download{
  background:var(--hell);border:1px solid var(--linie);border-radius:var(--r);
  padding:30px 32px 32px;max-width:70ch;
}
.sw-download h2{margin:0 0 10px;font-size:23px}
.sw-download p{color:var(--leise);margin:0 0 22px}
.sw-download .sw-zeichen{margin-bottom:16px}

/* ==========================================================================
   13 · Auszeichnungen
   ========================================================================== */
/* Laufband: die Siegel ziehen langsam durch, damit die Fläche klein bleibt. */
.sw-laufband{
  position:relative;overflow:hidden;
  padding-block:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.sw-laufband__spur{
  display:flex;align-items:flex-end;gap:clamp(34px,4vw,64px);
  width:max-content;
  animation:sw-laufband var(--dauer,40s) linear infinite;
}
.sw-laufband:hover .sw-laufband__spur,
.sw-laufband:focus-within .sw-laufband__spur{animation-play-state:paused}
@keyframes sw-laufband{ to { transform:translateX(-50%) } }

.sw-laufband__stueck{
  margin:0;flex:none;width:150px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
}
.sw-laufband__stueck img{
  height:104px;width:auto;object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(19,10,13,.14));
}
.sw-laufband__stueck figcaption b{
  display:block;font-family:var(--titel);font-size:13.5px;font-weight:600;
  color:var(--nacht);line-height:1.25;
}
.sw-laufband__stueck figcaption span{
  display:block;font-size:12.5px;color:var(--leise);margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.sw-laufband__fuss{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline;justify-content:center;
  margin-top:26px;
}
.sw-laufband__fuss b{font-family:var(--titel);font-size:17px;font-weight:600;color:var(--nacht)}

/* Ohne Animation: Band zum Wischen statt Bewegung. */
@media(prefers-reduced-motion:reduce){
  .sw-laufband{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .sw-laufband__spur{animation:none}
}

.sw-jahrgang + .sw-jahrgang{margin-top:44px}
.sw-jahrgang__jahr{
  font-family:var(--titel);font-size:20px;font-weight:700;color:var(--rot);
  margin:0 0 22px;padding-bottom:10px;border-bottom:1px solid var(--linie);
  font-variant-numeric:tabular-nums;
}

.sw-siegel{
  display:grid;grid-template-columns:repeat(4,1fr);gap:34px 24px;align-items:end;
}
@media(max-width:1080px){.sw-siegel{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.sw-siegel{grid-template-columns:repeat(2,1fr)}}
.sw-siegel__karte{
  margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
}
.sw-siegel__karte img{
  height:150px;width:auto;object-fit:contain;
  filter:drop-shadow(0 12px 24px rgba(19,10,13,.16));
  transition:transform .2s ease;
}
.sw-siegel__karte:hover img{transform:translateY(-4px)}
.sw-siegel__karte figcaption b{
  display:block;font-family:var(--titel);font-size:15px;font-weight:600;color:var(--nacht);line-height:1.25;
}
.sw-siegel__karte figcaption span{
  display:block;font-size:13.5px;color:var(--leise);margin-top:5px;line-height:1.4;
}
.sw-sektion--dunkel .sw-siegel__karte figcaption b{color:#fff}
.sw-sektion--dunkel .sw-siegel__karte figcaption span{color:var(--leise-dunkel)}

/* ==========================================================================
   14 · Standorte
   ========================================================================== */
/* Feste Zonen, damit Telefonnummer, Status und Link in beiden Karten
   auf derselben Höhe stehen – auch wenn ein Standort samstags öffnet. */
.sw-standort{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:30px 30px 32px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;height:100%;
}
.sw-standort h3{margin:0 0 4px;font-size:22px}
.sw-standort .adresse{color:var(--leise);margin-bottom:18px;min-height:3em}
.sw-standort dl{
  display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0 0 20px;font-size:16px;
  min-height:3.4em;align-content:start;
}
.sw-standort dt{color:var(--leise)}
.sw-standort dd{margin:0;font-variant-numeric:tabular-nums}
.sw-standort .sw-tel{
  font-family:var(--titel);font-weight:700;font-size:21px;color:var(--nacht);
  text-decoration:none;display:block;margin-bottom:10px;letter-spacing:-.02em;
}
.sw-standort .sw-tel:hover{color:var(--rot)}
.sw-standort .sw-offen{margin-bottom:18px;color:var(--leise)}
.sw-standort .sw-pfeil{margin-top:auto}
.sw-standort br{display:none}

/* ==========================================================================
   15 · Aktionsband
   ========================================================================== */
.sw-band{
  background:
    radial-gradient(700px 300px at 82% 0%, rgba(232,57,79,.28), transparent 62%),
    linear-gradient(160deg,#1F1216,#130A0D);
  border-radius:var(--r-gross);
  padding:clamp(30px,4vw,52px);
  color:rgba(255,255,255,.8);
  display:grid;grid-template-columns:1.4fr auto;gap:26px 40px;align-items:center;
}
@media(max-width:860px){.sw-band{grid-template-columns:1fr}}
.sw-band h2{color:#fff;margin-bottom:10px}
.sw-band p{max-width:62ch;margin:0}
.sw-band__text > *{margin-block:0}
/* Bei drei Knöpfen sollen die umbrechen, statt die Überschrift zu quetschen. */
.sw-band .wp-block-buttons{margin:0;max-width:380px;justify-content:flex-end}
@media(max-width:860px){.sw-band .wp-block-buttons{max-width:none;justify-content:flex-start}}

/* ==========================================================================
   16 · Chronik und Team
   ========================================================================== */
/* Zweispaltig: füllt erst die linke, dann die rechte Spalte – bleibt chronologisch lesbar. */
.sw-chronik{columns:2;column-gap:clamp(30px,4vw,60px)}
@media(max-width:820px){.sw-chronik{columns:1}}
/* Die senkrechte Linie ist die Achse des Zeitstrahls, kein Zierstreifen –
   sie trägt die Jahrespunkte. Als eigenes Element statt als Rahmen, damit
   klar ist, dass sie zur Zeichnung gehört. */
.sw-jahr{
  position:relative;break-inside:avoid;
  padding:0 0 26px 26px;
}
.sw-jahr::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--linie);
}
.sw-jahr::before{
  content:"";position:absolute;left:-5px;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--weiss);border:3px solid var(--rot);z-index:1;
}
.sw-jahr__zahl{font-family:var(--titel);font-size:20px;font-weight:700;color:var(--nacht);display:block;margin:0 0 4px;font-variant-numeric:tabular-nums;line-height:1}
.sw-jahr p{color:var(--leise);font-size:16px;margin:0}

/* Foto links, Text rechts: kleine runde Porträts gleichen aus, dass die
   Aufnahmen unterschiedlich nah und unterschiedlich hell sind. */
.sw-person{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  display:flex;align-items:flex-start;gap:20px;padding:24px 26px 26px;
}
.sw-person__bild,
figure.wp-block-image.sw-person__bild{
  width:112px;height:112px;flex:none;margin:0;
  border-radius:50%;overflow:hidden;
  background:var(--hell-2);border:1px solid var(--linie);
}
.sw-person__bild img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.sw-person__bild--text{
  display:grid;place-items:center;
  font-family:var(--titel);font-weight:700;font-size:26px;color:var(--leise);
}
.sw-person__text{min-width:0;display:flex;flex-direction:column;gap:2px}
@media(max-width:520px){
  .sw-person{flex-direction:column;gap:12px}
}
.sw-person__name{font-family:var(--titel);font-size:18px;font-weight:600;color:var(--text);margin:0}
.sw-person .rolle{color:var(--rot);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0}
.sw-person p{color:var(--leise);font-size:15.5px;margin:6px 0 0}
.sw-person__text > p:first-child,.sw-person .rolle{margin-top:0}

/* ==========================================================================
   17 · Textseiten (Recht, lange Fließtexte)
   ========================================================================== */
.sw-text{max-width:78ch}
/* Steht der Text allein auf der Seite, gehört er in die Mitte – sonst klebt
   eine schmale Spalte links und rechts daneben bleibt die Seite leer. */
.sw-text--mitte{margin-inline:auto}

/* Langer Rechtstext: Text links in lesbarer Breite, Verzeichnis rechts. */
.sw-recht{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(30px,4vw,64px);align-items:start}
@media(max-width:1000px){.sw-recht{grid-template-columns:1fr}}
.sw-recht__inhalt{
  position:sticky;top:104px;
  border:1px solid var(--linie);border-radius:var(--r);
  background:var(--weiss);padding:22px 24px 24px;
  max-height:calc(100vh - 140px);overflow-y:auto;
  /* Verhindert, dass das Scrollen im Kasten auf die Seite überspringt. */
  overscroll-behavior:contain;
}
@media(max-width:1000px){
  .sw-recht__inhalt{position:static;max-height:none;order:-1}
}
.sw-recht__inhalt b{
  display:block;font-family:var(--titel);font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--leise);
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--linie);
}
.sw-recht__inhalt ol{list-style:none;margin:0;padding:0;counter-reset:abschnitt}
.sw-recht__inhalt li{counter-increment:abschnitt;margin-bottom:2px}
.sw-recht__inhalt a{
  display:flex;gap:10px;
  padding:7px 0;font-size:15px;line-height:1.4;
  color:var(--text);text-decoration:none;
}
.sw-recht__inhalt a::before{
  content:counter(abschnitt) ".";
  color:var(--leise);font-variant-numeric:tabular-nums;flex:none;
}
.sw-recht__inhalt a:hover{color:var(--rot)}
/* Beim Springen nicht unter der Kopfzeile landen */
.sw-text h2[id]{scroll-margin-top:110px}
.sw-text h2{font-size:26px;margin:44px 0 14px;padding-top:14px;border-top:1px solid var(--linie)}
.sw-text h2:first-child{margin-top:0;padding-top:0;border-top:0}
.sw-text h3{font-size:20px;margin:30px 0 8px}
.sw-text h4{font-size:17px;margin:22px 0 6px;color:var(--text)}
.sw-text p{margin-bottom:14px}
.sw-text ul,.sw-text ol{margin:0 0 18px;padding-left:24px;color:var(--text)}
.sw-text li{margin-bottom:6px}
.sw-text strong{font-weight:600}

/* ==========================================================================
   17a · Formulare
   ========================================================================== */
/* Formular schmal halten – daneben steht, was sonst unter dem Formular
   verlorenginge: Alternativen und Hinweise. */
.sw-formularseite{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(30px,4vw,64px);align-items:start;
}
@media(max-width:1000px){.sw-formularseite{grid-template-columns:1fr}}
.sw-formularseite__spalte{position:sticky;top:104px;display:grid;gap:18px}
@media(max-width:1000px){.sw-formularseite__spalte{position:static}}
.sw-infokasten{
  border:1px solid var(--linie);border-radius:var(--r);
  background:var(--weiss);padding:22px 24px 24px;
}
.sw-infokasten b{
  display:block;font-family:var(--titel);font-size:16.5px;font-weight:600;
  color:var(--nacht);margin-bottom:10px;
}
.sw-infokasten p{color:var(--leise);font-size:15.5px;margin:0 0 10px}
.sw-infokasten p:last-child{margin-bottom:0}

/* WhatsApp: bewusst ein normaler Link auf wa.me, kein eingebundenes Widget –
   so wird erst beim Klick etwas an Meta übertragen. Grün nur als Andeutung,
   damit der Knopf nicht mit unserem roten Hauptknopf konkurriert. */
.sw-knopf--whatsapp{
  background:var(--whatsapp) !important;color:#fff !important;border-color:transparent !important;
  gap:9px;
}
.sw-knopf--whatsapp:hover{background:var(--whatsapp-tief) !important}
.sw-knopf--whatsapp svg{width:19px;height:19px;flex:none}
/* Fußzeile: als Knopf, damit er zwischen den Textlinks nicht untergeht. */
.sw-whatsapp{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--whatsapp);color:#fff;text-decoration:none;font-weight:600;
  border-radius:100px;padding:9px 17px;font-size:15px;
  transition:background .18s ease;
}
.sw-whatsapp svg{width:19px;height:19px;flex:none}
.sw-whatsapp:hover{background:var(--whatsapp-tief);color:#fff}

/* Warenkorb in der Kopfleiste – mit Anzahl, damit man sieht, dass etwas drin
   ist, ohne die Seite zu wechseln. */
.sw-warenkorb{
  display:inline-flex;align-items:center;gap:7px;
  color:rgba(255,255,255,.9) !important;font-weight:600;
}
.sw-warenkorb:hover{color:#fff !important}
.sw-warenkorb svg{width:16px;height:16px;flex:none}
.sw-warenkorb__zahl{
  min-width:19px;height:19px;padding:0 5px;border-radius:100px;
  background:rgba(255,255,255,.18);color:#fff;
  font-size:11.5px;font-weight:700;line-height:19px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.sw-warenkorb.ist-gefuellt .sw-warenkorb__zahl{background:var(--rot)}
@media(max-width:900px){.sw-warenkorb__wort{display:none}}

/* Kopfleiste: grüner Punkt mit Wort, sichtbar ohne zu schreien. */
.sw-topbar__whatsapp{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--whatsapp-hell) !important;font-weight:700;
}
.sw-topbar__whatsapp svg{width:15px;height:15px;flex:none}
.sw-topbar__whatsapp:hover{color:#fff !important}

/* Schwebender Knopf auf jeder Seite. Rechts unten, damit er der Fußzeile und
   dem Inhalt nicht im Weg steht. */
.sw-whatsapp-schweber{
  position:fixed;right:22px;bottom:22px;z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--whatsapp);color:#fff;text-decoration:none;
  font-family:var(--fliess);font-weight:600;font-size:15.5px;
  border-radius:100px;padding:14px 20px;
  box-shadow:0 14px 30px -10px rgba(19,10,13,.45);
  transition:background .18s ease,transform .18s ease;
}
.sw-whatsapp-schweber:hover{background:var(--whatsapp-tief);color:#fff;transform:translateY(-2px)}
.sw-whatsapp-schweber:focus-visible{outline:3px solid var(--nacht);outline-offset:3px}
.sw-whatsapp-schweber svg{width:23px;height:23px;flex:none}
@media(max-width:760px){
  /* Nur noch das Zeichen – der Text bleibt für Screenreader erhalten. */
  .sw-whatsapp-schweber{right:14px;bottom:14px;padding:15px;border-radius:50%}
  .sw-whatsapp-schweber__text{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
}
@media(print){.sw-whatsapp-schweber{display:none}}

.sw-formular{max-width:680px}
.sw-formular fieldset{
  border:1px solid var(--linie);border-radius:var(--r);
  background:var(--weiss);
  padding:26px 28px 28px;margin:0 0 24px;
}
.sw-formular legend{
  font-family:var(--titel);font-size:18px;font-weight:600;color:var(--nacht);
  padding:0 10px;margin-left:-10px;
}
.sw-feld{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}
.sw-feld:last-child{margin-bottom:0}
.sw-feld > label{font-weight:600;font-size:16px;color:var(--text)}
.sw-feld input[type="text"],
.sw-feld input[type="email"],
.sw-feld input[type="tel"],
.sw-feld input[type="date"],
.sw-feld textarea,
.sw-feld select{width:100%;max-width:100%}
.sw-feld textarea{resize:vertical;min-height:88px;line-height:1.6}

/* Auswahlgruppen: jede Möglichkeit in eine eigene Zeile. */
.sw-feld label:has(input[type="radio"]),
.sw-feld label:has(input[type="checkbox"]){
  display:flex;align-items:flex-start;gap:11px;
  font-weight:400;font-size:16.5px;line-height:1.5;
  padding:11px 14px;border:1px solid var(--linie);border-radius:var(--r-klein);
  cursor:pointer;
}
.sw-feld label:has(input[type="radio"]):hover,
.sw-feld label:has(input[type="checkbox"]):hover{background:var(--hell)}
.sw-feld label:has(input:checked){border-color:var(--rot);background:var(--hell)}
.sw-feld input[type="radio"],
.sw-feld input[type="checkbox"]{margin:2px 0 0;width:18px;height:18px;accent-color:var(--rot);flex:none}

.sw-feldhinweis{font-size:14.5px;color:var(--leise);line-height:1.5}
.sw-pflicht{
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rot);margin-left:8px;
}
/* ==========================================================================
   Formulare aus dem Auftragssystem
   ==========================================================================
   Die Statusabfrage und der Ersatzteilfinder kommen als PHP-Snippet in die
   Seite. Ihr Markup stammt aus der Zeit vor diesem Theme und bringt alte
   Bootstrap-Klassen mit. Wir fassen den Code nicht an, sondern geben seinen
   Klassen hier ein Aussehen, das zum Rest passt. */
.sw-fremdformular{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  padding:clamp(24px,3vw,34px);
}
.sw-fremdformular .lead{
  display:block;font-weight:600;font-size:16px;color:var(--text);margin-bottom:7px;
}
.sw-fremdformular h4{font-size:16px;font-weight:600;margin:0 0 20px}
.sw-fremdformular input[type="text"],
.sw-fremdformular input[type="password"],
.sw-fremdformular select{width:100%;max-width:420px;margin-bottom:4px}
.sw-fremdformular input[type="submit"]{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--rot);color:#fff;border:0;border-radius:100px;
  padding:13px 26px;font-family:var(--fliess);font-weight:600;font-size:16px;
  cursor:pointer;transition:background .18s ease;
}
.sw-fremdformular input[type="submit"]:hover{background:var(--rot-tief)}
/* Das Raster der alten Vorlage: zwei Spalten, sonst nichts. */
.sw-fremdformular .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 34px}
/* Steht in einer Reihe nur eine Spalte (so beim Auftragsdetail), nimmt sie die
   ganze Breite. Sonst bricht der Bemerkungstext auf halber Zeile um, obwohl
   daneben nichts steht. */
.sw-fremdformular .row > [class*="col-"]:only-child{grid-column:1 / -1}
@media(max-width:760px){.sw-fremdformular .row{grid-template-columns:1fr}}
.sw-fremdformular .well{padding:0;margin:0 0 26px;background:none;border:0}
.sw-fremdformular .container{width:auto;max-width:none;padding:0}
.sw-fremdformular h1{font-size:20px;margin:0 0 12px}
.sw-fremdformular table{width:100%;border-collapse:collapse;margin-bottom:18px}
.sw-fremdformular th,.sw-fremdformular td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie);font-size:15.5px;
}

/* ==========================================================================
   Domainprüfung
   ========================================================================== */
.sw-domaincheck{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  padding:clamp(24px,3vw,34px);max-width:820px;
}
.sw-domaincheck__eingabe{display:flex;gap:10px;flex-wrap:wrap}
.sw-domaincheck__eingabe input[type="text"]{flex:1 1 240px;min-width:0}
.sw-domaincheck__eingabe .sw-knopf{flex:none;border:0;cursor:pointer;font-family:var(--fliess)}

.sw-domaincheck__endungen{
  border:0;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px;
}
.sw-domaincheck__endungen legend{
  float:left;width:100%;margin-bottom:8px;padding:0;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);
}
.sw-domaincheck__endungen label{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--bedienrand);border-radius:100px;
  padding:7px 15px;font-size:15px;cursor:pointer;
}
.sw-domaincheck__endungen label:has(input:checked){border-color:var(--rot);background:var(--hell)}
.sw-domaincheck__endungen input{width:16px;height:16px;accent-color:var(--rot);margin:0}

.sw-domaincheck__liste{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px}
.sw-domaincheck__liste:empty{margin:0}
.sw-domainzeile{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
  padding:13px 16px;border-radius:var(--r-klein);
  background:var(--hell);border:1px solid var(--linie);
}
.sw-domainzeile__name{font-family:var(--titel);font-weight:600;font-size:17px;color:var(--nacht)}
.sw-domainzeile__stand{font-size:15.5px;color:var(--leise);margin-right:auto}
.sw-domainzeile__hinweis{flex:1 0 100%;font-size:14px;color:var(--leise);line-height:1.5}
.sw-domainzeile--frei{background:var(--petrol-hell);border-color:rgba(14,92,95,.22)}
.sw-domainzeile--frei .sw-domainzeile__stand{color:var(--petrol);font-weight:600}
.sw-domainzeile--vergeben .sw-domainzeile__stand{color:var(--text)}
.sw-domainzeile--laeuft .sw-domainzeile__stand{opacity:.6}
.sw-knopf--klein{padding:8px 16px;font-size:14.5px}
.sw-domaincheck__fuss{margin:20px 0 0;max-width:68ch}

/* Kompakte Fassung auf der Artikelseite einer Domain */
.sw-domaincheck--artikel{padding:22px 24px 24px;margin:0 0 26px;max-width:none}
.sw-domaincheck__weg{border:0;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.sw-domaincheck__weg legend{
  float:left;width:100%;padding:0;margin-bottom:9px;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);
}
.sw-domaincheck__weg label{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--bedienrand);border-radius:100px;
  padding:8px 16px;font-size:15px;cursor:pointer;
}
.sw-domaincheck__weg label:has(input:checked){border-color:var(--rot);background:var(--hell)}
.sw-domaincheck__weg input{width:16px;height:16px;accent-color:var(--rot);margin:0;flex:none}

.sw-domaincheck--artikel .sw-domaincheck__eingabe{align-items:center}
/* Nur das Feld in der Prüfzeile wächst. Ohne diese Eingrenzung erwischte die
   Regel auch die Felder darunter – und weil deren Kasten eine Spalte ist,
   wurde aus der Breitenangabe eine Höhe von 160 Pixeln. */
.sw-domaincheck--artikel .sw-domaincheck__eingabe > input[type="text"]{flex:1 1 160px;min-width:0}
/* .sw-feld ist ein Flex-Kasten – der schlägt sonst das hidden-Attribut. */
.sw-feld[hidden]{display:none !important}
.sw-domaincheck__endung{
  font-family:var(--titel);font-weight:600;font-size:17px;color:var(--leise);flex:none;
}
.sw-domaincheck__ergebnis{margin:16px 0 0;font-size:15.5px;line-height:1.55}
.sw-domaincheck__ergebnis:empty{margin:0}
.sw-domaincheck__ergebnis.ist-frei{color:var(--petrol);font-weight:600}
.sw-domaincheck__ergebnis.ist-vergeben{color:var(--text);font-weight:600}
.sw-domaincheck__ergebnis.ist-laeuft,
.sw-domaincheck__ergebnis.ist-unklar{color:var(--leise)}
.sw-domaincheck__zusatz{display:block;font-weight:400;color:var(--leise);margin-top:4px}

.sw-formular__fuss{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.sw-formular__fuss .sw-feldhinweis{max-width:62ch}
.sw-formular button.sw-knopf{border:0;cursor:pointer;font-family:var(--fliess)}

/* Angabe und Wert nebeneinander – für Impressum und ähnliche Aufstellungen. */
/* Angabe und Wert – im Editor eine ganz normale Tabelle, vorne eine ruhige
   Liste. Die alte <dl>-Schreibweise bleibt der Vollständigkeit halber gültig. */
.sw-angaben,
figure.wp-block-table.sw-angaben{
  margin:0 0 34px;
  border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;
  background:var(--weiss);
}
.sw-angaben table{width:100%;border-collapse:collapse}
.sw-angaben th,
.sw-angaben dt{
  width:min(240px,34%);
  padding:16px 20px;background:var(--hell);text-align:left;vertical-align:top;
  font-weight:600;color:var(--text);font-size:16px;
  border-bottom:1px solid var(--linie);
}
.sw-angaben td,
.sw-angaben dd{
  margin:0;padding:16px 22px;vertical-align:top;
  border-bottom:1px solid var(--linie);font-size:16.5px;
}
.sw-angaben tr:last-child th,
.sw-angaben tr:last-child td{border-bottom:0}
.sw-angaben dt:nth-last-of-type(1),
.sw-angaben dd:nth-last-of-type(1){border-bottom:0}
@media(max-width:600px){
  .sw-angaben table,.sw-angaben tbody,.sw-angaben tr,.sw-angaben th,.sw-angaben td{display:block;width:auto}
  .sw-angaben th{border-bottom:0;padding-bottom:4px}
  .sw-angaben td{padding-top:4px}
}
@media(max-width:640px){
  .sw-angaben{grid-template-columns:1fr}
  .sw-angaben dt{border-bottom:0;padding-bottom:4px}
  .sw-angaben dd{padding-top:4px}
}
.sw-klein{font-size:14.5px;color:var(--leise);line-height:1.6}

.sw-hinweis{
  border-left:3px solid var(--rot);background:var(--hell);
  padding:18px 22px;border-radius:0 var(--r-klein) var(--r-klein) 0;
  color:var(--text);font-size:16.5px;
}
.sw-hinweis--gut{border-left-color:var(--petrol);background:var(--petrol-hell)}

/* ==========================================================================
   17b · Onlineshop
   ========================================================================== */
.woocommerce .site-content,
.woocommerce-page .site-content{padding-block:30px var(--luft)}
.woocommerce .site-main,
.woocommerce-page .site-main{max-width:var(--breite);margin-inline:auto;padding-inline:26px}
/* GeneratePress gibt dem Artikel zusätzlich Innenabstand – auf Shop-Seiten weg. */
.woocommerce .inside-article,
.woocommerce-page .inside-article,
.woocommerce .entry-content,
.woocommerce-page .entry-content{padding-top:0;margin-top:0}
.woocommerce .entry-header,
.woocommerce-page .entry-header{margin-bottom:0}

.woocommerce .woocommerce-breadcrumb{font-size:14px;color:var(--leise);margin-bottom:14px}
.woocommerce .page-title,
.woocommerce .woocommerce-products-header__title{font-family:var(--titel);font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.03em;margin-bottom:12px}
.woocommerce .term-description{max-width:66ch;color:var(--leise);font-size:17.5px;margin-bottom:30px}
.woocommerce .woocommerce-result-count{color:var(--leise);font-size:15px}
.woocommerce .woocommerce-ordering select,
.woocommerce .quantity .qty,
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],
input[type="number"],input[type="password"],input[type="date"],input[type="url"],
select,textarea{
  border:1px solid var(--bedienrand);border-radius:var(--r-klein);
  padding:10px 12px;font-family:var(--fliess);font-size:16px;color:var(--text);background:var(--weiss);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rot);outline-offset:1px;border-color:var(--rot)}

/* Produktliste */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:26px 0 0}
@media(max-width:1080px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.woocommerce ul.products{grid-template-columns:1fr}}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{
  width:auto !important;margin:0 !important;float:none !important;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  padding:0 0 22px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.woocommerce ul.products li.product:hover{transform:translateY(-3px);box-shadow:var(--schatten-2);border-color:var(--linie-2)}
.woocommerce ul.products li.product a img{
  margin:0 0 16px;aspect-ratio:4/3;object-fit:contain;background:var(--hell);
  padding:18px;border-bottom:1px solid var(--linie);
}
.woocommerce ul.products li.product .sw-produktkat,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .sw-lager,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .star-rating{margin-inline:20px}
.woocommerce ul.products li.product .sw-produktkat{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--leise);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--titel) !important;font-size:17px !important;font-weight:600;color:var(--nacht);
  padding:6px 0 8px !important;line-height:1.3;
}
.woocommerce ul.products li.product .price{
  font-family:var(--titel);font-weight:700;font-size:20px;color:var(--nacht) !important;
  display:block;margin-bottom:4px;
}
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol{font-size:.8em}
.woocommerce ul.products li.product .button{
  margin-top:14px;align-self:flex-start;
  background:var(--rot) !important;color:#fff !important;border-radius:var(--r-klein);
  font-family:var(--fliess);font-weight:600;font-size:15px;padding:10px 18px;
}
.woocommerce ul.products li.product .button:hover{background:var(--rot-tief) !important}

/* Filterleiste mit den Unterkategorien */
.sw-filter{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:22px 0 4px;padding-top:20px;border-top:1px solid var(--linie);
}
.sw-filter__titel{
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--leise);margin-right:6px;
}
.sw-filter__chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--weiss);border:1px solid var(--bedienrand);
  border-radius:100px;padding:8px 16px;
  font-size:15px;font-weight:600;color:var(--text);text-decoration:none;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.sw-filter__chip em{font-style:normal;font-weight:400;color:var(--leise);font-size:.85em;font-variant-numeric:tabular-nums}
.sw-filter__chip:hover{border-color:var(--linie-2);background:var(--hell);color:var(--text)}
.sw-filter__chip.ist-aktiv{background:var(--nacht);border-color:var(--nacht);color:#fff}
.sw-filter__chip.ist-aktiv em{color:rgba(255,255,255,.6)}

/* Verfügbarkeit */
.sw-lager{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;margin-top:2px;
}
.sw-lager::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:currentColor}
.sw-lager--da{color:var(--petrol)}
.sw-lager--bestellbar{color:var(--bernstein)}
.sw-lager--weg{color:var(--leise)}

/* Kategorien als eigener Block über der Artikelliste */
/* Über Produktsuche und Preisfilter stehen Überschriften – für Vorleseprogramme
   richtig so, im Bild sollen es aber Feldbeschriftungen sein und keine
   Schlagzeilen. Die rote Farbe kommt aus einem <mark> der alten Seite. */
/* Kein „>“: WooCommerce schiebt beim Laden per JavaScript noch einen eigenen
   Container zwischen Block und Überschrift. */
.woocommerce .entry-content .gb-headline-text,
.wp-block-woocommerce-filter-wrapper h2,
.wp-block-woocommerce-product-search h2{
  font-family:var(--fliess) !important;
  font-size:13px !important;font-weight:700 !important;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--leise) !important;
  margin:0 0 10px !important;line-height:1.4 !important;
}
.woocommerce .entry-content .gb-headline-text mark,
.wp-block-woocommerce-filter-wrapper h2 mark{
  background:none !important;color:inherit !important;
}

.sw-shopkats{margin:8px 0 0}
.sw-shopkats__titel{
  font-family:var(--titel);font-size:22px;font-weight:600;letter-spacing:-.02em;
  margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--linie);
}
.sw-shopkats__titel--zweit{margin-top:46px}
.sw-shopkats__raster{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1080px){.sw-shopkats__raster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sw-shopkats__raster{grid-template-columns:1fr}}
.sw-shopkat{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  padding:24px 22px 26px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.sw-shopkat:hover{transform:translateY(-3px);box-shadow:var(--schatten-2);border-color:var(--linie-2)}
.sw-shopkat__bild{display:block;margin-bottom:16px;border-radius:var(--r-klein);overflow:hidden;background:var(--hell)}
/* height:auto ist Pflicht: die Bilder bringen ein height-Attribut mit, und
   ohne diese Zeile gewinnt das gegen aspect-ratio – dann sind die Kacheln
   unterschiedlich hoch. */
.sw-shopkat__bild img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}

/* Motivgrafik als Kachelbild: derselbe Verlauf mit Punktraster und Signet wie
   in den Seitenköpfen, nur flacher geschnitten. */
.sw-shopkat__motiv{display:block;margin-bottom:16px}
.sw-shopkat__motiv .sw-motiv{
  aspect-ratio:16/10;
  border-radius:var(--r-klein);
  box-shadow:none;
  border-color:var(--linie);
}
.sw-shopkat__name{
  font-family:var(--titel);font-size:18px;font-weight:600;color:var(--nacht);
  line-height:1.25;margin-bottom:8px;
}
.sw-shopkat__name em{font-style:normal;font-weight:400;color:var(--leise);font-size:.82em}
.sw-shopkat__mehr{margin-top:auto;padding-top:16px;color:var(--rot-tief);font-weight:600;font-size:15px}
/* Verweist auf die Tarifseite statt in den Katalog */
.sw-shopkat--hinweis{background:linear-gradient(180deg,var(--weiss),var(--hell));border-style:dashed}

/* Kategorie-Kacheln (falls WooCommerce sie doch selbst ausgibt) */
.woocommerce ul.products li.product-category{padding:0}
.woocommerce ul.products li.product-category a{display:flex;flex-direction:column;height:100%;padding:26px 24px 28px;text-decoration:none}
.woocommerce ul.products li.product-category img{
  aspect-ratio:16/10;object-fit:cover;padding:0;border-radius:var(--r-klein);
  margin:0 0 16px !important;border:0;
}
.sw-katzeichen{
  width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(150deg,rgba(180,2,24,.13),rgba(180,2,24,.05));
  border:1px solid rgba(180,2,24,.18);color:var(--rot);
}
.sw-katzeichen svg{width:24px;height:24px}
.woocommerce ul.products li.product-category h2{
  font-family:var(--titel) !important;font-size:19px !important;font-weight:600;
  color:var(--nacht);padding:0 !important;margin:0 0 8px;line-height:1.25;
}
.woocommerce ul.products li.product-category mark{
  background:transparent;color:var(--leise);font-weight:400;font-size:.85em;
}
.sw-kattext{color:var(--leise);font-size:15px;margin:0;line-height:1.5}
.woocommerce ul.products li.product-category a::after{
  content:"Ansehen →";margin-top:auto;padding-top:16px;
  color:var(--rot-tief);font-weight:600;font-size:15px;
}

/* Produktseite */
.woocommerce div.product .product_title{font-family:var(--titel);font-size:clamp(26px,3.2vw,36px);font-weight:700;letter-spacing:-.03em;margin-bottom:12px}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--titel);font-weight:700;font-size:30px;color:var(--nacht);letter-spacing:-.03em;
}
.woocommerce div.product .woocommerce-product-details__short-description{font-size:17.5px;color:var(--ink-2, var(--text));max-width:60ch;margin-bottom:18px}
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button{
  background:var(--rot) !important;color:#fff !important;
  border-radius:var(--r-klein);font-family:var(--fliess);font-weight:600;font-size:16.5px;padding:13px 26px;
  box-shadow:var(--schatten-rot);
}
.woocommerce div.product form.cart .button:hover{background:var(--rot-tief) !important}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding-left:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border-radius:var(--r-klein) var(--r-klein) 0 0;background:var(--hell);border-color:var(--linie)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--weiss)}
.woocommerce div.product .woocommerce-tabs .panel h2{font-family:var(--titel);font-size:22px;margin-bottom:12px}
.woocommerce div.product .woocommerce-tabs .panel p{margin-bottom:12px}
.woocommerce div.product .woocommerce-tabs .panel ul{padding-left:22px;margin-bottom:14px}
.woocommerce div.product .woocommerce-tabs .panel li{margin-bottom:5px}
.woocommerce .quantity .qty{border:1px solid var(--linie);border-radius:var(--r-klein);padding:10px}
.woocommerce div.product .stock{display:none}

/* --------------------------------------------------------------------------
   Warenkorb, Kasse und Kundenkonto

   Diese Seiten legt WooCommerce selbst an; sie tragen deshalb noch die
   Überschriften und Knöpfe aus den GeneratePress-Einstellungen. Hier kommen
   sie in dieselbe Form wie der Rest der Website.
   -------------------------------------------------------------------------- */

/* Die Shop-Seiten haben keinen Seitenkopf wie unsere übrigen Seiten – dort
   beginnt der Inhalt sonst unmittelbar unter der Navigation. */
.woocommerce-page .inside-article,
.woocommerce-cart .inside-article,
.woocommerce-checkout .inside-article,
.woocommerce-account .inside-article{
  /* Seitlich bleibt Luft: ohne sie klebt der Inhalt auf dem Telefon am Rand. */
  padding:clamp(34px,4.5vw,64px) 26px clamp(40px,5vw,72px) !important;
}
@media(max-width:600px){
  .woocommerce-page .inside-article,
  .woocommerce-cart .inside-article,
  .woocommerce-checkout .inside-article,
  .woocommerce-account .inside-article{padding-inline:18px !important}
}

/* Seitentitel: rot und unterstrichen war die alte Vorgabe. */
.woocommerce-cart .entry-header h1,
.woocommerce-checkout .entry-header h1,
.woocommerce-account .entry-header h1,
.woocommerce-page .page-header h1,
.woocommerce-page .entry-title,
.woocommerce-page h1.entry-title,
.woocommerce-checkout h1,
.woocommerce-cart h1{
  font-family:var(--titel);font-size:clamp(30px,4vw,42px);font-weight:700;
  letter-spacing:-.035em;line-height:1.1;
  color:var(--nacht) !important;
  border:0;padding:0;margin:0 0 26px;text-transform:none;
}

/* Knöpfe – alle Schreibweisen, die WooCommerce und seine Blöcke verwenden. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .wc-block-components-button,
.wc-block-components-button:not(.is-link){
  background:var(--rot) !important;color:#fff !important;
  border:0 !important;border-radius:100px !important;
  font-family:var(--fliess) !important;font-weight:600 !important;font-size:16px !important;
  padding:13px 26px !important;line-height:1.3 !important;
  text-transform:none !important;
  transition:background .18s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .wc-block-components-button:hover,
.wc-block-components-button:not(.is-link):hover{background:var(--rot-tief) !important;color:#fff !important}

/* Der zurückhaltende Knopf – „Zurück zum Shop“, „Warenkorb aktualisieren“. */
.woocommerce .return-to-shop .button,
.woocommerce button[name="update_cart"],
.woocommerce .actions .button:not(.alt){
  background:transparent !important;color:var(--text) !important;
  border:1px solid var(--bedienrand) !important;
}
.woocommerce .return-to-shop .button:hover,
.woocommerce button[name="update_cart"]:hover,
.woocommerce .actions .button:not(.alt):hover{background:var(--hell) !important;color:var(--text) !important}
.woocommerce button[name="update_cart"]:disabled{opacity:.45}

/* Meldungen */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews{
  background:var(--hell);border:1px solid var(--linie);border-top:0;
  border-radius:var(--r-klein);
  padding:16px 20px;margin:0 0 26px;
  color:var(--text);font-size:16px;line-height:1.55;
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before{position:static;margin:0;color:var(--rot)}
.woocommerce-message{background:var(--petrol-hell);border-color:rgba(14,92,95,.22)}
.woocommerce-message::before{color:var(--petrol)}
.woocommerce-error{background:#FDF0F1;border-color:rgba(180,2,24,.22)}
.woocommerce-info .button,
.woocommerce-message .button{margin-left:auto}

/* Tabellen in Warenkorb und Konto */
.woocommerce table.shop_table{
  border:1px solid var(--linie);border-radius:var(--r);border-collapse:separate;
  border-spacing:0;overflow:hidden;background:var(--weiss);
}
.woocommerce table.shop_table th{
  background:var(--hell);border-bottom:1px solid var(--linie);
  font-family:var(--fliess);font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--leise);
  padding:14px 18px;
}
.woocommerce table.shop_table td{border-top:0;border-bottom:1px solid var(--linie);padding:18px}
.woocommerce table.shop_table tr:last-child td{border-bottom:0}
.woocommerce table.shop_table .product-name a{color:var(--text);font-weight:600;text-decoration:none}
.woocommerce table.shop_table .product-name a:hover{color:var(--rot)}
.woocommerce table.shop_table img{width:56px;border-radius:var(--r-klein);border:1px solid var(--linie)}
.woocommerce a.remove{
  color:var(--leise) !important;font-weight:400;
  width:26px;height:26px;line-height:24px;
}
.woocommerce a.remove:hover{background:var(--rot) !important;color:#fff !important}

/* Warenkorb: Artikel links, Summe rechts daneben. WooCommerce stellt die
   Summe sonst unter die Tabelle – dann steht links eine große leere Fläche. */
.woocommerce-cart .woocommerce{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(290px,360px);
  gap:clamp(24px,3vw,44px);
  align-items:start;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper{grid-column:1 / -1}
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals{width:auto;float:none;margin:0}
.woocommerce-cart .cart-collaterals .cross-sells{grid-column:1 / -1;width:auto;float:none}
@media(max-width:900px){
  .woocommerce-cart .woocommerce{grid-template-columns:1fr}
}

/* Die Tabelle hat sechs Spalten, zwei davon fast leer – die dürfen schmal sein. */
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th{padding:14px 16px}
.woocommerce-cart table.cart td.product-remove{width:46px;padding-inline:14px 0;text-align:center}
.woocommerce-cart table.cart td.product-thumbnail{width:84px;padding-inline:12px 0}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal,
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-subtotal{text-align:right;white-space:nowrap}
.woocommerce-cart table.cart td.product-quantity{width:110px}
.woocommerce-cart table.cart td.product-subtotal{font-weight:600;color:var(--nacht)}
.woocommerce-cart table.cart th.product-remove,
.woocommerce-cart table.cart th.product-thumbnail{width:auto}

/* Gutscheinzeile: Feld und Knopf gleich hoch, nicht über die ganze Breite. */
.woocommerce-cart table.cart td.actions{padding:16px;background:var(--hell)}
.woocommerce-cart table.cart td.actions .coupon{
  display:flex;gap:10px;align-items:stretch;float:none;
}
.woocommerce-cart table.cart td.actions .coupon .input-text{
  flex:1 1 auto;width:auto;min-width:190px;max-width:none;margin:0;
}
.woocommerce-cart table.cart td.actions .coupon .button{white-space:nowrap;padding:12px 20px !important}
.woocommerce-cart table.cart td.actions > .button{float:right;padding:12px 20px !important}
@media(max-width:640px){
  .woocommerce-cart table.cart td.actions .coupon{flex-wrap:wrap}
  .woocommerce-cart table.cart td.actions > .button{float:none;width:100%;margin-top:12px}
}

/* Summen */
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-account h2,
.woocommerce .cart-collaterals h2{
  font-family:var(--titel);font-size:22px;font-weight:600;letter-spacing:-.02em;
  margin:0 0 16px;text-transform:none;
}
.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th{padding:14px 18px}
.woocommerce .order-total .amount{font-family:var(--titel);font-size:21px;font-weight:700;color:var(--nacht)}
.woocommerce-cart .wc-proceed-to-checkout{padding:18px 0 0}

/* Gutscheinfeld und Kasse */
.woocommerce .coupon .input-text{max-width:220px}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register{
  border:1px solid var(--linie) !important;border-radius:var(--r) !important;
  background:var(--weiss);padding:26px 28px !important;margin:0 0 26px !important;
}
.woocommerce-checkout h3{font-family:var(--titel);font-size:20px;font-weight:600;margin:0 0 16px;text-transform:none}
.woocommerce form .form-row label{font-weight:600;font-size:15.5px;color:var(--text);margin-bottom:6px}
.woocommerce form .form-row .required{color:var(--rot);text-decoration:none}
/* Das Bemerkungsfeld war zwei Zeilen hoch, daneben stand eine leere Spalte. */
.woocommerce-checkout #order_comments,
.woocommerce-checkout .woocommerce-additional-fields textarea{
  min-height:190px;line-height:1.6;resize:vertical;
}
.woocommerce-checkout #payment{background:var(--hell);border-radius:var(--r);border:1px solid var(--linie)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--linie);padding:20px}
.woocommerce-checkout #payment div.form-row{padding:20px}

/* Kundenkonto */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:11px 16px;border-radius:var(--r-klein);
  color:var(--text);text-decoration:none;font-weight:600;font-size:15.5px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:var(--hell)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--rot);color:#fff}

/* ==========================================================================
   18 · Zusammenspiel mit dem Block-Editor
   ========================================================================== */
.page .site-content,.page .content-area,.page .site-main{padding:0;margin:0;max-width:none}
.page .inside-article{padding:0}
.page .entry-content{max-width:none;padding:0;margin:0}
.page .entry-content > .wp-block-group{margin-block:0}
.page .entry-content > .wp-block-group + .wp-block-group{margin-top:0}
.sw-sektion > .sw-innen,.sw-hero > .sw-innen{margin-block:0}
.entry-content .sw-innen > *:first-child{margin-top:0}
.entry-content .sw-innen > *:last-child{margin-bottom:0}
.sw-innen > * + *{margin-top:24px}
.sw-innen > .sw-kopf + *{margin-top:0}
.sw-sektion .wp-block-columns{gap:clamp(26px,3.4vw,52px);margin-bottom:0}

/* ==========================================================================
   19 · Bewegung
   ========================================================================== */
.sw-auf{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.sw-auf.ist-da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .sw-auf{opacity:1;transform:none}
}

/* ==========================================================================
   20 · Footer
   ========================================================================== */
.site-footer{background:var(--nacht);color:rgba(255,255,255,.72)}
.sw-footer{padding-block:60px 0}
.sw-footer__raster{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
@media(max-width:900px){.sw-footer__raster{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sw-footer__raster{grid-template-columns:1fr}}
.sw-footer b{display:block;font-family:var(--titel);font-size:15.5px;color:#fff;margin-bottom:14px}
.sw-footer p,.sw-footer li{color:rgba(255,255,255,.68);font-size:15.5px;line-height:1.75}
.sw-footer ul{list-style:none;margin:0;padding:0}
.sw-footer a{color:rgba(255,255,255,.8);text-decoration:none}
.sw-footer a:hover{color:#fff;text-decoration:underline}
.sw-footer__ort{margin-bottom:16px}
.sw-footer__ort strong{color:#fff}
/* Kündigungsschaltfläche – gut sichtbar, nicht in der Kleinschrift versteckt. */
.sw-kuendigen{
  margin-top:48px;padding:24px 26px;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  background:rgba(255,255,255,.04);
  display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;
}
.sw-kuendigen b{display:block;font-family:var(--titel);font-size:17px;color:#fff;margin-bottom:6px}
.sw-kuendigen span{display:block;color:rgba(255,255,255,.7);font-size:15.5px;max-width:62ch}
.sw-knopf--kuendigen{
  background:transparent !important;color:#fff !important;
  border:1px solid rgba(255,255,255,.5) !important;box-shadow:none !important;flex:none;
}
.sw-knopf--kuendigen:hover{background:rgba(255,255,255,.12) !important;border-color:#fff !important}

.sw-rechtszeile{
  margin-top:34px;border-top:1px solid rgba(255,255,255,.12);
  padding-block:18px 26px;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-size:14px;color:rgba(255,255,255,.55);
}
.sw-rechtszeile ul{display:flex;flex-wrap:wrap;gap:8px 20px}
.site-info{display:none}

/* ==========================================================================
   Tinten- und Tonerfinder
   ========================================================================== */
.sw-tintenfinder{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  padding:clamp(24px,3vw,34px);max-width:900px;
}

/* Umschalter zwischen den beiden Suchrichtungen */
.sw-tintenfinder__wahl{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.sw-tintenfinder__wahl button{
  border:1px solid var(--bedienrand);border-radius:100px;background:none;
  padding:9px 18px;font:inherit;font-size:15px;color:var(--text);cursor:pointer;
}
.sw-tintenfinder__wahl button[aria-selected="true"]{
  border-color:var(--rot);background:var(--hell);font-weight:600;
}

/* Die beiden Eingabefelder nebeneinander, solange Platz ist */
.sw-tintenfinder__eingaben{display:grid;gap:0 22px;grid-template-columns:1fr}
@media (min-width:640px){
  .sw-tintenfinder__eingaben{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
}

/* Vorschlagsliste unter dem Modellfeld */
.sw-tintenfinder__vorschlaege{
  list-style:none;margin:8px 0 0;padding:6px;
  max-height:260px;overflow-y:auto;
  border:1px solid var(--linie);border-radius:var(--r-klein);background:var(--weiss);
}
.sw-tintenfinder__vorschlaege button{
  display:block;width:100%;text-align:left;
  border:0;background:none;font:inherit;font-size:15.5px;color:var(--text);
  padding:8px 11px;border-radius:6px;cursor:pointer;
}
.sw-tintenfinder__vorschlaege button:hover,
.sw-tintenfinder__vorschlaege button:focus-visible{background:var(--hell)}

/* Ergebnisse */
.sw-tintenfinder__ergebnis{margin-top:26px}
.sw-tintenfinder__ergebnis:empty{margin-top:0}
.sw-tintenfinder__ergebnis[data-laedt]{opacity:.55}
.sw-tintenfinder__titel{font-size:clamp(20px,2.2vw,24px);margin:0 0 6px}
.sw-tintenfinder__meldung{
  margin:0;padding:16px 18px;border-radius:var(--r-klein);
  background:var(--hell);color:var(--text);font-size:16px;
}

.sw-tintenfinder__liste{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.sw-tintenfinder__treffer{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  padding:13px 17px;border-radius:var(--r-klein);
  background:var(--hell);border:1px solid var(--linie);
}
.sw-tintenfinder__text{flex:1 1 300px;min-width:0}
.sw-tintenfinder__trefferkopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.sw-tintenfinder__name{font-family:var(--titel);font-weight:600;font-size:17px;color:var(--nacht)}
.sw-tintenfinder__angaben{margin:5px 0 0;font-size:15px;color:var(--leise);line-height:1.55}

/* Kennzeichnung: bestätigt oder nur aus dem Altbestand */
.sw-tintenfinder__marke{
  font-size:13px;letter-spacing:.02em;color:var(--leise);
  border:1px solid var(--linie-2);border-radius:100px;padding:3px 10px;
}
.sw-tintenfinder__marke--gut{
  color:var(--petrol);border-color:rgba(14,92,95,.3);background:var(--petrol-hell);font-weight:600;
}

.sw-tintenfinder__aktion{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px;
  flex:0 1 auto;margin-left:auto;
}
.sw-tintenfinder__preis{font-weight:600;font-size:16.5px;color:var(--nacht);white-space:nowrap}
.sw-tintenfinder__aktion .sw-tintenfinder__angaben{margin:0;text-align:right}
.sw-tintenfinder__fuss{margin:22px 0 0;max-width:68ch}

/* Zweitrangiger Knopf: gleiche Form, ohne Füllung */
.sw-knopf--leer{
  background:none !important;color:var(--rot) !important;
  border:1px solid var(--rot) !important;
}
.sw-knopf--leer:hover{background:var(--hell) !important}

/* Kompakte Fassung oben auf der Kategorieseite */
.sw-tintenfinder-einstieg{
  margin:0 0 34px;padding:clamp(20px,2.6vw,28px);
  background:var(--hell);border-radius:var(--r);
}
.sw-tintenfinder-einstieg > h2{font-size:clamp(19px,2.1vw,23px);margin:0 0 4px}
.sw-tintenfinder-einstieg > p{margin:0 0 18px;color:var(--leise)}
.sw-tintenfinder--kompakt{padding:20px 22px;max-width:none}
.sw-tintenfinder--kompakt .sw-tintenfinder__fuss{display:none}

/* Passende Geräte auf der Artikelseite */
.sw-passendegeraete__gruppe{margin:0 0 16px}
.sw-passendegeraete__gruppe h3{
  font-size:15px;margin:0 0 4px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--leise);
}
.sw-passendegeraete__gruppe p{margin:0;line-height:1.65}
.sw-tintenfinder__mehr{
  padding:9px 11px;font-size:14px;color:var(--leise);border-top:1px solid var(--linie);
}
.sw-tintenfinder__geraete{flex:1 0 100%;border-top:1px solid var(--linie);padding-top:10px}
.sw-tintenfinder__aufklapp{
  border:0;background:none;padding:0;font:inherit;font-size:15px;
  color:var(--rot);cursor:pointer;text-align:left;
}
.sw-tintenfinder__aufklapp::before{content:"▸ ";display:inline-block;transition:transform .15s}
.sw-tintenfinder__aufklapp[aria-expanded="true"]::before{content:"▾ "}
.sw-tintenfinder__geraete p{margin:9px 0 0;font-size:15px;line-height:1.6;color:var(--leise)}
.sw-tintenfinder__geraete strong{color:var(--text)}

/* Farbkreis am Treffer – Palette aus dem ursprünglichen Tintenfinder */
.sw-farbpunkt{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  border:1px solid #bbb;background:#ddd;
}
.sw-farbpunkt--schwarz{background:#161616;border-color:#161616}
.sw-farbpunkt--cyan{background:#00A8D9;border-color:#0089B4}
.sw-farbpunkt--magenta{background:#D60072;border-color:#AD005C}
.sw-farbpunkt--gelb{background:#FFD600;border-color:#D0B100}
.sw-farbpunkt--grau{background:#8D8D8D;border-color:#757575}
.sw-farbpunkt--multi{
  background:conic-gradient(#00A8D9 0 33%,#D60072 33% 66%,#FFD600 66% 100%);
  border-color:#B0B0B0;
}
.sw-farbpunkt--rot{background:#D0342C;border-color:#A82A24}
.sw-farbpunkt--blau{background:#1F6FD0;border-color:#17569F}
.sw-farbpunkt--gruen{background:#2E9E4F;border-color:#24793D}
.sw-farbpunkt--weiss{background:#FFF;border-color:#B5B5B5}
.sw-farbpunkt--ohne{background:#ECECEC}

/* Der Verweis unter dem kompakten Finder stand zu dicht am Kasten */
.sw-tintenfinder-einstieg > p:last-child{margin:18px 0 0}

/* Endungsliste: 26 Kästchen brauchen etwas Ordnung */
.sw-domaincheck__legendzusatz{
  display:block;margin-top:3px;
  font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--leise);
}
.sw-domaincheck__weitere{margin:18px 0 0}

/* ==========================================================================
   Aneinanderstoßende Abschnitte mit gleichem Grund
   ==========================================================================
   Jeder Abschnitt bringt oben und unten Abstand mit. Wo sich Hell und Weiß
   abwechseln, markiert die Farbkante den Schnitt und beide Abstände zusammen
   ergeben den gewollten Rhythmus. Folgen aber zwei Abschnitte derselben Farbe
   aufeinander, fehlt die Kante – dann steht dort die doppelte Höhe leerer
   Fläche, und die Seite wirkt auseinandergerissen. In dem Fall zählt nur der
   Abstand des oberen Abschnitts. */
.sw-sektion--hell + .sw-sektion--hell,
.sw-sektion--dunkel + .sw-sektion--dunkel,
.sw-sektion:not(.sw-sektion--hell):not(.sw-sektion--dunkel)
  + .sw-sektion:not(.sw-sektion--hell):not(.sw-sektion--dunkel){
  padding-top:0;
}

/* Endungsauswahl auf der Artikelseite (Hosting-Pakete mit freier Wahl) */
.sw-domaincheck__endungwahl{
  flex:0 0 auto;width:auto;min-width:112px;
  font-family:var(--titel);font-weight:600;color:var(--nacht);
}
.sw-domaincheck__enthalten{
  margin:0 0 18px;padding:11px 14px;
  background:var(--petrol-hell);border-radius:var(--r-klein);
  color:var(--text);
}
.sw-domaincheck__enthalten strong{color:var(--petrol)}

/* Leerer Warenkorb braucht keine Null am Symbol */
.sw-warenkorb:not(.ist-gefuellt) .sw-warenkorb__zahl{display:none}

/* ==========================================================================
   Formulare: Meldungen und Spamfalle
   ========================================================================== */

/* Für Menschen unsichtbar, für automatische Ausfüller nicht. Kein display:none
   und kein hidden – manche Programme überspringen genau das. */
.sw-formular__falle{
  position:absolute !important;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.sw-formular__fehler{
  margin:0 0 24px;padding:18px 22px;border-radius:var(--r-klein);
  background:#FBECEE;border:1px solid rgba(180,2,24,.28);color:var(--text);
}
.sw-formular__fehler b{display:block;margin-bottom:8px;color:var(--rot)}
.sw-formular__fehler ul{margin:0;padding-left:20px;line-height:1.65}
.sw-formular__fehler p{margin:10px 0 0;font-size:15px;color:var(--leise)}

.sw-formular__dank{
  padding:clamp(24px,3vw,34px);border-radius:var(--r);
  background:var(--petrol-hell);border:1px solid rgba(14,92,95,.22);
}
.sw-formular__dank h2{margin:0 0 8px;color:var(--petrol);font-size:clamp(20px,2.2vw,25px)}
.sw-formular__dank p{margin:0 0 10px;line-height:1.65}
.sw-formular__dank p:last-child{margin-bottom:0}

/* ==========================================================================
   Alte Widgets aus dem Auftragssystem lesbar machen
   ==========================================================================
   Ersatzteilfinder und Auftragsstatus kommen als PHP-Schnipsel aus dem
   Auftragssystem. Ihr HTML stammt aus einer Bootstrap-Zeit: Feldbeschriftungen
   als <h4>, Ergebnisse als <h3> mit <font color>, sieben <h1> auf einer Seite.
   Umschreiben können wir es hier nicht – die Suche hängt an genau diesen
   Feldnamen. Also fassen wir es und geben ihm die Form des übrigen Hauses. */

/* Beschriftungen sind Beschriftungen, keine Überschriften. */
.sw-fremdformular h4{
  font-family:var(--fliess);font-size:16px;font-weight:600;
  color:var(--text);margin:0 0 6px;line-height:1.4;
}
.sw-fremdformular h4 + h4{margin-top:20px}
.sw-fremdformular h4 select,
.sw-fremdformular h4 input{margin-top:6px;font-weight:400}

/* Ergebnisse als Karten statt als lose Zeilen */
.sw-fremdformular h3{
  font-family:var(--titel);font-size:18px;font-weight:600;
  color:var(--nacht);margin:26px 0 4px;
}
.sw-fremdformular h3.Preisanzeige{
  display:inline-block;font-size:23px;color:var(--nacht);margin:14px 12px 0 0;
}
.sw-fremdformular hr{
  border:0;border-top:1px solid var(--linie);margin:22px 0 0;
}

/* Die eingebrannten Farben des Altbestands auf unsere Palette holen.
   Grün und Rot bleiben unterscheidbar, aber nicht mehr grell. */
.sw-fremdformular font[color="#008000"]{color:var(--petrol) !important}
.sw-fremdformular font[color="#FF0000"]{color:var(--rot) !important}
.sw-fremdformular font{font-weight:600}

/* Die sieben <h1> des Auftragsstatus sind Abschnittstitel, keine Seitentitel. */
.sw-fremdformular h1{
  font-family:var(--titel);font-size:19px;font-weight:600;
  color:var(--nacht);margin:0 0 10px;
}
.sw-fremdformular h1 + p,
.sw-fremdformular .lead + p{margin-top:0}

/* Die alten Symbolbilder von 2013: kleiner, aber nicht versteckt – dahinter
   stecken Hinweise (Wartungsvertrag, offene Rechnung) und der Abmelde-Knopf. */
.sw-fremdformular img[src*=".png"]{
  width:30px;height:30px;object-fit:contain;
  margin:0 8px 16px 0;vertical-align:middle;
}
.sw-fremdformular a img[src*=".png"]{transition:transform .15s ease}
.sw-fremdformular a:hover img[src*=".png"]{transform:scale(1.12)}

/* Der Suchknopf des Ersatzteilfinders trug eine eigene Klasse. */
.sw-fremdformular .buttonneu,
.sw-fremdformular .button{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--rot);color:#fff;border:0;border-radius:100px;
  padding:12px 24px;font-family:var(--fliess);font-weight:600;font-size:16px;
  cursor:pointer;margin-top:8px;
}
.sw-fremdformular .buttonneu:hover,
.sw-fremdformular .button:hover{background:var(--rot-tief)}

/* Domainprüfung auf der Artikelseite: nicht über die halbe Seite ziehen */
.sw-domaincheck--artikel{max-width:640px}

/* ==========================================================================
   Ersatzteil- und Preisfinder
   ========================================================================== */
.sw-ersatzteile{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  padding:clamp(24px,3vw,34px);max-width:900px;
}
.sw-ersatzteile__eingaben{display:grid;gap:0 22px;grid-template-columns:1fr}
@media (min-width:720px){
  .sw-ersatzteile__eingaben{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.sw-ersatzteile__ergebnis{margin-top:26px}
.sw-ersatzteile__ergebnis:empty{margin-top:0}
.sw-ersatzteile__titel{font-size:clamp(19px,2.1vw,23px);margin:0 0 6px}
.sw-ersatzteile__meldung{
  margin:0;padding:16px 18px;border-radius:var(--r-klein);
  background:var(--hell);font-size:16px;
}
.sw-ersatzteile__angaben{margin:4px 0 0;font-size:15px;color:var(--leise)}

.sw-ersatzteile__liste{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.sw-ersatzteile__treffer{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  padding:14px 17px;border-radius:var(--r-klein);
  background:var(--hell);border:1px solid var(--linie);
}
.sw-ersatzteile__text{flex:1 1 260px;min-width:0}
/* Als Block, damit die Lager-Markierung IMMER darunter steht – auch bei
   Teilen ohne Beschreibungstext. Sonst rutscht sie neben den Namen. */
.sw-ersatzteile__name{
  display:block;
  font-family:var(--titel);font-weight:600;font-size:17px;color:var(--nacht);
}

/* Lagerstand: unterscheidbar, aber nicht grell wie im Altbestand */
.sw-ersatzteile__lager{
  display:inline-block;margin-top:7px;
  font-size:13px;padding:3px 10px;border-radius:100px;
  color:var(--leise);border:1px solid var(--linie-2);
}
.sw-ersatzteile__lager.ist-da{
  color:var(--petrol);border-color:rgba(14,92,95,.3);background:var(--petrol-hell);font-weight:600;
}

.sw-ersatzteile__preis{
  flex:0 0 auto;margin-left:auto;text-align:right;
  display:flex;flex-direction:column;gap:2px;
}
.sw-ersatzteile__betrag{
  font-family:var(--titel);font-weight:600;font-size:21px;color:var(--nacht);white-space:nowrap;
}
.sw-ersatzteile__zusatz{font-size:13.5px;color:var(--leise)}
.sw-ersatzteile__fuss{margin:22px 0 0;max-width:68ch}

@media (max-width:520px){
  .sw-ersatzteile__preis{margin-left:0;text-align:left;flex-direction:row;align-items:baseline;gap:8px}
}

/* ==========================================================================
   Kopfzeile: Menü im mittleren Bereich enger stellen
   ==========================================================================
   Sieben Menüpunkte, Logo und der Rückruf-Knopf brauchen zusammen rund
   1.275 px. Auf Bildschirmen zwischen dem Umschaltpunkt zum Klappmenü und
   etwa 1.400 px schob das die Seite waagerecht aus dem Fenster – und
   waagerechtes Scrollen ist auf einer Webseite immer ein Fehler.
   Deshalb hier weniger Luft statt Überlauf. */
@media (min-width:769px) and (max-width:1400px){
  .main-navigation .main-nav ul li a{
    padding-left:11px;padding-right:11px;font-size:15.5px;
  }
  .site-header .header-image{max-width:170px}
}

@media (min-width:769px) and (max-width:1240px){
  .main-navigation .main-nav ul li a{
    padding-left:6px;padding-right:6px;font-size:15px;
  }
  /* Der Rückruf-Knopf darf schmaler werden, aber nicht verschwinden. */
  .main-navigation .main-nav ul li.sw-kopfknopf > a,
  .main-navigation .main-nav ul li:last-child > a{
    padding-left:12px;padding-right:12px;
  }
  .site-header .header-image{max-width:148px}
}

/* Letzte Sicherung, kein Ersatz für die Regeln darüber: Sollte doch einmal
   etwas überstehen, soll die Seite nicht seitlich wandern. Wer hier einen
   Überlauf vermutet, prüft mit abgeschaltetem overflow nach. */
body{overflow-x:hidden}

/* Auftragsstatus: Feinschliff am Altbestand
   ------------------------------------------------------------------------
   Das Auftragssystem färbt in Überschriften das zweite Wort rot ein
   (<mark class="has-inline-color">). Mitten im Wort wirkt das wie ein Fehler –
   die Überschrift bekommt eine Farbe. */
.sw-fremdformular h1 mark,
.sw-fremdformular h1 .has-inline-color,
.sw-fremdformular h2 mark{
  background:none !important;color:inherit !important;
}

/* Aus dem Kreuz wird ein Haken (siehe functions.php). */
.sw-fremdformular .sw-haken{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;margin-right:8px;flex:none;
  border-radius:50%;background:var(--petrol-hell);color:var(--petrol);
  font-size:12px;font-weight:700;line-height:1;vertical-align:-3px;
}

/* Die Zeilen sind mit <br> gebaut, nicht als Liste. Etwas mehr Zeilenhöhe
   macht daraus wenigstens eine lesbare Aufzählung. */
.sw-fremdformular p{line-height:1.75;margin:0 0 14px}
.sw-fremdformular p:last-child{margin-bottom:0}
.sw-fremdformular br + br{line-height:0.6}

/* Bezeichnung und Wert: die fett gesetzten Bezeichner etwas ruhiger. */
.sw-fremdformular b{font-weight:600;color:var(--nacht)}

/* Lange Kennungen (TeamViewer-IDs, Seriennummern) dürfen umbrechen, statt
   die Spalte aufzuziehen. */
.sw-fremdformular{overflow-wrap:anywhere}

/* Zweite Zeile der Abschlussmeldung: eigene Zeile, ruhiger als die erste. */
.sw-fremdformular .sw-status__folge{
  display:block;margin-top:6px;
  font-family:var(--fliess);font-size:16.5px;font-weight:400;
  color:var(--leise);
}

/* ==========================================================================
   Produktkästen mit Kurzbeschreibung
   ==========================================================================
   Auf Kategorieseiten wie „Restposten“ oder „Angebote“ steht in vielen Kästen
   ein längerer Text. Bei vier Spalten blieben davon 29 Zeichen je Zeile –
   angenehm zu lesen sind 45 bis 75. Dazu fehlte der Kurzbeschreibung als
   einziger Zeile die seitliche Polsterung, sie klebte am Kastenrand.

   Deshalb: drei Spalten statt vier, gleiche Einrückung wie alles andere im
   Kasten, und der Text auf vier Zeilen begrenzt. Es ist eine KURZbeschreibung –
   wer mehr wissen will, öffnet den Artikel. So werden die Kästen wieder
   ähnlich hoch und die Preise stehen auf einer Linie. */
@media(min-width:1081px){
  .woocommerce ul.products{grid-template-columns:repeat(3,1fr)}
}

.woocommerce ul.products li.product .woocommerce-product-details__short-description{
  margin:10px 20px 0;
  font-size:15px;line-height:1.6;color:var(--leise);
  /* Vier Zeilen, dann Auslassungszeichen. */
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;
}
.woocommerce ul.products li.product .woocommerce-product-details__short-description p{
  margin:0;
}
/* Aufzählungen in der Kurzbeschreibung nicht mit Einzug doppelt verschieben. */
.woocommerce ul.products li.product .woocommerce-product-details__short-description ul{
  margin:0;padding-left:18px;
}

/* Produktkasten: die letzten Ausreißer
   ------------------------------------------------------------------------
   „inkl. MwSt.“ und „zzgl. Versandkosten“ kommen von Germanized und standen
   als einzige Zeilen am Kastenrand statt auf der Fluchtlinie. Der Knopf
   ebenso. */
.woocommerce ul.products li.product .wc-gzd-additional-info,
.woocommerce ul.products li.product .button{
  margin-inline:20px;
}
.woocommerce ul.products li.product .wc-gzd-additional-info{
  font-size:13.5px;color:var(--leise);margin-top:4px;margin-bottom:0;
}

/* Aufzählungen in der Kurzbeschreibung hatten Einzug, aber keine Punkte –
   dadurch stand ein Kasten scheinbar schief neben seinen Nachbarn.
   In einem Produktkasten reichen schlichte Zeilen. */
.woocommerce ul.products li.product .woocommerce-product-details__short-description ul{
  list-style:none;padding-left:0;margin:0;
}

/* Der Preis schiebt sich nach unten, damit er in einer Reihe bei allen
   Kästen auf derselben Linie steht – unabhängig davon, wie lang Titel oder
   Beschreibung ausfallen. */
.woocommerce ul.products li.product .price{
  margin-top:auto;padding-top:12px;
}

/* Der Knopf braucht !important, weil GeneratePress' eigene WooCommerce-Vorlage
   NACH dieser Datei geladen wird und die Ränder sonst zurücksetzt. */
.woocommerce ul.products li.product .button{margin-inline:20px !important}

/* Titel auf zwei Zeilen festlegen.
   Ohne das schwanken die Titelblöcke zwischen 36 und 80 Pixeln, und dann
   können auch die Preise darunter nicht auf einer Linie stehen – egal wie
   man sie schiebt. Zwei Zeilen reichen für den Produktnamen; wer mehr
   braucht, öffnet den Artikel. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(2 * 1.3em + 14px);
}

/* Warenkorb und Kasse: der Feinschliff nach der Reihenfolgekorrektur
   ------------------------------------------------------------------------
   Die Summentabelle war breiter als ihre Spalte, weil der eigene Rahmen zur
   Breite dazukam. */
.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout #order_review table.shop_table{
  width:100%;box-sizing:border-box;
}
.woocommerce .cart_totals table.shop_table th{
  width:38%;vertical-align:top;
}

/* Hausfarbe für die Bedienelemente in den Shop-Formularen.
   Bewusst NICHT über .woocommerce-checkout (die Klasse steht am body und
   träfe damit auch das Cookie-Banner), sondern über die Formulare selbst.
   Größe wird hier nicht gesetzt – die kommt weiter unten dort, wo die
   Elemente auch selbst gezeichnet werden. */
form.checkout input[type="radio"],
form.checkout input[type="checkbox"],
form.woocommerce-cart-form input[type="checkbox"],
.cart_totals input[type="radio"],
#payment input[type="radio"],
.woocommerce-account form input[type="checkbox"]{
  accent-color:var(--rot);
}

/* Versandarten als Liste mit Luft, nicht als gedrängter Block. */
.woocommerce .cart_totals .woocommerce-shipping-methods,
.woocommerce-checkout #shipping_method{
  list-style:none;margin:0;padding:0;
}
.woocommerce .cart_totals .woocommerce-shipping-methods li,
.woocommerce-checkout #shipping_method li{
  display:flex;align-items:baseline;gap:9px;margin:0 0 8px;
}
.woocommerce .cart_totals .woocommerce-shipping-methods li:last-child,
.woocommerce-checkout #shipping_method li:last-child{margin-bottom:0}
.woocommerce .cart_totals .woocommerce-shipping-methods label,
.woocommerce-checkout #shipping_method label{font-size:15.5px;line-height:1.45}

/* „Warenkorb aktualisieren“ ist bis zu einer Änderung abgeschaltet. Das darf
   man sehen – aber als ruhiger Zweitknopf, nicht als kaputter Hauptknopf. */
.woocommerce button[name="update_cart"]{
  border:1px solid var(--bedienrand);border-radius:100px;
  background:none;color:var(--text);font-weight:600;
}
.woocommerce button[name="update_cart"]:not(:disabled):hover{
  border-color:var(--rot);color:var(--rot);
}

/* Die Bestellübersicht in der Kasse wie den Warenkorb behandeln. */
.woocommerce-checkout #order_review{
  border:1px solid var(--linie);border-radius:var(--r);
  background:var(--weiss);padding:clamp(20px,2.4vw,28px);
}
.woocommerce-checkout #order_review table.shop_table{border:0;border-radius:0}
.woocommerce-checkout #payment{background:none;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom:1px solid var(--linie);padding:0 0 18px;margin:0 0 18px;
}
.woocommerce-checkout #payment ul.payment_methods li{
  list-style:none;margin:0 0 10px;
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--hell);border-radius:var(--r-klein);font-size:15px;
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #place_order{width:100%;padding:15px 24px !important;font-size:17px}

/* Die Summentabelle richtet sich sonst nach ihrem längsten Inhalt und wächst
   aus der Spalte heraus – „Abholung in Neubeckum · Kaiser-Wilhelm-Straße 14“
   allein ist breiter als der Platz. Feste Spaltenaufteilung, Text bricht um. */
.woocommerce .cart_totals table.shop_table{table-layout:fixed}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{
  /* break-word statt anywhere: bricht nur, wenn es sein muss, und dann mit
     Silbentrennung – sonst stand dort „Versandkostenpausc / hale“. */
  overflow-wrap:break-word;hyphens:auto;
}

/* Hinweis für später: Ein zweispaltiges Kassenlayout (Formular links,
   Übersicht rechts) wurde versucht und wieder entfernt. Diese Kasse läuft
   über ein mehrstufiges Verfahren mit eigener Struktur; ein aufgezwungenes
   Raster schiebt dort die Rechnungsdaten in die falsche Spalte und lässt
   links eine leere Fläche. Wer es erneut versucht, muss die Schritte des
   Verfahrens berücksichtigen, nicht nur form.checkout. */

/* Eingabefelder auf Formularbreite, nicht auf Textbreite. */
.woocommerce-checkout .form-row{margin:0 0 16px}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-container{width:100%}

/* ==========================================================================
   Mehrstufige Kasse (Germanized Pro)
   ==========================================================================
   Die Kasse läuft in drei Schritten. Ein aufgezwungenes Zweispaltenraster
   verträgt sie nicht (siehe Hinweis weiter oben) – Luft und eine gemeinsame
   Fluchtlinie schon. */

/* Zahlungsarten: Die Überschrift stand links neben den Zeilen statt über
   ihnen. Beide bekommen dieselbe Fluchtlinie. */
.woocommerce-checkout #payment{padding:0}
.woocommerce-checkout #payment > h3,
.woocommerce-checkout .woocommerce-checkout-payment > h3{
  margin:0 0 14px;padding-inline:4px;
}

.woocommerce-checkout #payment ul.payment_methods{
  border:0;padding:0;margin:0 0 22px;
}
.woocommerce-checkout #payment ul.payment_methods li{
  list-style:none;margin:0 0 8px;padding:0;
  border:1px solid var(--linie);border-radius:var(--r-klein);
  background:var(--weiss);
  transition:border-color .15s ease,background .15s ease;
}
.woocommerce-checkout #payment ul.payment_methods li:hover{border-color:var(--linie-2)}
.woocommerce-checkout #payment ul.payment_methods li > label{
  display:flex;align-items:center;gap:11px;
  padding:15px 18px;margin:0;cursor:pointer;
  font-size:16px;font-weight:500;
}
.woocommerce-checkout #payment ul.payment_methods li > label img{
  margin-left:auto;max-height:26px;width:auto;
}
/* Die gewählte Zahlungsart hervorheben – sonst sieht man in einer langen
   Liste nicht, worauf man geklickt hat. */
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked){
  border-color:var(--rot);background:var(--hell);
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) > label{font-weight:600}

/* Der Erklärtext unter der gewählten Zahlungsart gehört sichtbar dazu. */
.woocommerce-checkout #payment div.payment_box{
  margin:0;padding:0 18px 16px;background:none;
  font-size:15px;color:var(--leise);
}

/* Schrittleiste und Fußzeile der Schritte */
.woocommerce-checkout .step-nav{margin:0 0 26px}
.woocommerce-checkout .prev-step-button,
.woocommerce-checkout a.prev-step-button{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--bedienrand);border-radius:100px;
  padding:12px 22px;text-decoration:none;
  font-family:var(--fliess);font-weight:600;font-size:16px;
  color:var(--text);background:none;
  transition:border-color .15s ease,color .15s ease;
}
.woocommerce-checkout .prev-step-button:hover{border-color:var(--rot);color:var(--rot)}
/* „Zurück" und „Weiter" gehören auf eine Zeile, mit Abstand dazwischen. */
.woocommerce-checkout .step-footer,
.woocommerce-checkout .multistep-footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding-top:20px;
}
@media(max-width:560px){
  .woocommerce-checkout .step-footer,
  .woocommerce-checkout .multistep-footer{flex-direction:column-reverse;align-items:stretch}
  .woocommerce-checkout .prev-step-button{justify-content:center}
}

/* Auswahlknöpfe und Kästchen selbst zeichnen
   ------------------------------------------------------------------------
   accent-color färbt zwar, aber jeder Browser zeichnet Form und Größe anders.

   WICHTIG zur Auswahl der Elemente: Die Klasse .woocommerce-checkout steht am
   <body>. Ein Selektor wie „.woocommerce-checkout input[type=checkbox]" trifft
   deshalb JEDES Kästchen der Seite – auch die Schalter im Cookie-Banner. Hier
   werden ausschließlich die Formulare benannt, um die es geht. */
/* Zwei Vorsichtsmaßnahmen, beide teuer gelernt:
   1. KEIN !important auf display – WooCommerce bringt ein eigenes AGB-Kästchen
      (name="terms") mit, das Germanized ausblendet und durch „legal" ersetzt.
      Mit !important wurde es wieder sichtbar und schwebte ohne Beschriftung
      mitten in der Bestellübersicht.
   2. name="terms" ist zusätzlich ausgenommen, damit das auch dann gilt, wenn
      es einmal anders versteckt wird. */
form.checkout input[type="radio"],
form.checkout input[type="checkbox"]:not([name="terms"]),
form.woocommerce-cart-form input[type="checkbox"],
.cart_totals input[type="radio"],
.woocommerce-account form input[type="checkbox"],
#payment input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  display:inline-grid;place-content:center;
  width:19px;height:19px;flex:none;margin:0;
  border:2px solid var(--bedienrand);background:var(--weiss);
  cursor:pointer;transition:border-color .15s ease;vertical-align:-4px;
}
form.checkout input[type="radio"],
.cart_totals input[type="radio"],
#payment input[type="radio"]{border-radius:50%}
form.checkout input[type="checkbox"],
form.woocommerce-cart-form input[type="checkbox"],
.woocommerce-account form input[type="checkbox"]{border-radius:5px}

form.checkout input[type="radio"]:hover,
form.checkout input[type="checkbox"]:hover,
.cart_totals input[type="radio"]:hover,
#payment input[type="radio"]:hover,
.woocommerce-account form input[type="checkbox"]:hover{border-color:var(--rot)}

form.checkout input[type="radio"]::before,
.cart_totals input[type="radio"]::before,
#payment input[type="radio"]::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--rot);transform:scale(0);transition:transform .12s ease;
}
form.checkout input[type="radio"]:checked,
.cart_totals input[type="radio"]:checked,
#payment input[type="radio"]:checked{border-color:var(--rot)}
form.checkout input[type="radio"]:checked::before,
.cart_totals input[type="radio"]:checked::before,
#payment input[type="radio"]:checked::before{transform:scale(1)}

form.checkout input[type="checkbox"]::before,
form.woocommerce-cart-form input[type="checkbox"]::before,
.woocommerce-account form input[type="checkbox"]::before{
  content:"";width:11px;height:11px;transform:scale(0);
  transition:transform .12s ease;background:var(--rot);
  clip-path:polygon(14% 44%,0 59%,39% 100%,100% 22%,84% 7%,39% 68%);
}
form.checkout input[type="checkbox"]:checked,
form.woocommerce-cart-form input[type="checkbox"]:checked,
.woocommerce-account form input[type="checkbox"]:checked{border-color:var(--rot)}
form.checkout input[type="checkbox"]:checked::before,
form.woocommerce-cart-form input[type="checkbox"]:checked::before,
.woocommerce-account form input[type="checkbox"]:checked::before{transform:scale(1)}

form.checkout input[type="radio"]:focus-visible,
form.checkout input[type="checkbox"]:focus-visible,
.cart_totals input[type="radio"]:focus-visible,
#payment input[type="radio"]:focus-visible,
.woocommerce-account form input[type="checkbox"]:focus-visible{
  outline:2px solid var(--rot);outline-offset:2px;
}

/* Die Vorlage der mehrstufigen Kasse setzt
   `.woocommerce-multistep-checkout form.checkout #order_review{padding-left:0}` –
   drei Klassen plus ID. Dagegen kommt eine einfachere Regel nicht an, egal in
   welcher Reihenfolge geladen wird. Deshalb hier dieselbe Bauform plus body:
   Überschrift, Zahlungszeilen und der Zurück-Knopf klebten sonst am Kartenrand. */
body.woocommerce-multistep-checkout form.checkout #order_review{
  padding:clamp(20px,2.4vw,28px);
}

/* Kästchen-Beschriftungen in der Kasse einheitlich
   ------------------------------------------------------------------------
   „Ein Konto erstellen?" steht in einer Formularzeile, „Lieferung an eine
   andere Adresse?" in einer h3 – WooCommerce macht daraus eine Überschrift.
   Für den Kunden sind das zwei gleichrangige Kästchen zum Ankreuzen; sie
   sollen deshalb auch gleich aussehen und nicht in zwei Schriftgrößen. */
form.checkout .woocommerce-form__label-for-checkbox,
form.checkout label.checkbox{
  display:flex;align-items:center;gap:11px;
  margin:0;font-size:16px;font-weight:600;line-height:1.45;
  color:var(--text);cursor:pointer;
}
/* Die umgebende Überschrift bringt sonst ihre eigene Größe und Abstände mit. */
form.checkout h3:has(.woocommerce-form__label-for-checkbox){
  margin:0;font-size:inherit;font-weight:inherit;
}
form.checkout .create-account,
form.checkout .woocommerce-shipping-fields > h3{
  margin:0 0 14px;padding:0;
}
/* Der Hinweistext unter „Ein Konto erstellen?" gehört eingerückt zum Kästchen. */
form.checkout .create-account > p:not(:first-child){
  margin:8px 0 0 30px;font-size:15px;color:var(--leise);
}

/* WooCommerce setzt `.woocommerce form .form-row label.checkbox{display:inline}`
   – drei Klassen, also spezifischer als die Regel oben. Ergebnis waren zwei
   untereinanderstehende Kästchen mit 3 px Versatz. Gleiche Bauform, ein Glied
   mehr. */
.woocommerce form.checkout .form-row label.checkbox,
.woocommerce-page form.checkout .form-row label.checkbox{
  display:flex;align-items:center;gap:11px;
}

/* Die h3 um „Lieferung an eine andere Adresse?" trägt 3 px linke Polsterung
   aus dem WooCommerce-Formularraster. Gegenüber dem Kästchen darüber ergab
   das einen sichtbaren Versatz von genau diesen 3 px. */
.woocommerce form.checkout .woocommerce-shipping-fields > h3,
.woocommerce-page form.checkout .woocommerce-shipping-fields > h3{
  padding:0;margin:0 0 14px;
}

/* Angleichung der beiden Kästchenzeilen in Schritt 1.
   ------------------------------------------------------------------------
   „Ein Konto erstellen?" sitzt in einer .form-row, „Lieferung an eine andere
   Adresse?" in einer h3. WooCommerce gibt allen Formularzeilen 3 px seitliche
   Polsterung – Beschriftungen und Eingabefelder beginnen dadurch bei 72.

   Erster Versuch war, diese 3 px bei beiden zu entfernen. Dann fluchteten die
   Kästchen zwar miteinander, standen aber 3 px links von allen anderen Zeilen
   und guckten sichtbar heraus. Richtig ist die andere Richtung: Die h3 bekommt
   dieselbe Polsterung wie eine Formularzeile. */
.woocommerce form.checkout .woocommerce-shipping-fields > h3{
  padding:0 3px !important;margin:0 0 14px;
}
.woocommerce form.checkout .form-row.create-account{
  padding-left:3px !important;padding-right:3px !important;
}

/* Die Beschriftung selbst bringt in einer der beiden Zeilen noch einen
   eigenen Rand mit. Der Abstand zum Kästchen kommt aus dem gap der Zeile,
   nicht aus dem Text. */
.woocommerce form.checkout label.checkbox > span{
  margin:0 !important;padding:0 !important;
}

/* Und der letzte Unterschied: WooCommerce gibt Kästchen innerhalb einer
   .form-row 8 px rechten Rand mit (`.woocommerce form .form-row
   input.input-checkbox`). Der Abstand zur Beschriftung kommt bei uns aus dem
   gap der Zeile – sonst steht der Text um genau diese 8 px versetzt. */
.woocommerce form.checkout .form-row input.input-checkbox,
.woocommerce-page form.checkout .form-row input.input-checkbox{
  margin:0;
}

/* ==========================================================================
   Kasse, Schritt 3: Bestellüberblick
   ==========================================================================
   Rechnungsdetails, Zahlungsart und Lieferadresse stehen dort mit lauter
   Nullabständen untereinander – „bearbeiten" klebt jeweils an der nächsten
   Überschrift, und man liest drei Blöcke als einen. */
form.checkout #order_review h4{
  font-family:var(--titel);font-size:17px;font-weight:600;color:var(--nacht);
  margin:28px 0 8px;padding-top:22px;
  border-top:1px solid var(--linie);
}
/* Kein :first-of-type – jede Überschrift steckt in einem eigenen Behälter
   und wäre dort „die erste". Die Linie unter „Deine Bestellung" liest sich
   als Trennung des Titels vom Inhalt und stört nicht. */
/* Die Angaben darunter kursiv, wie WooCommerce sie liefert – nur mit Luft. */
form.checkout #order_review h4 + p,
form.checkout #order_review .wc-gzdp-payment-gateway{
  margin:0;line-height:1.65;
}

/* „bearbeiten" ist eine Nebenhandlung – klein, aber anklickbar groß genug. */
form.checkout a.edit.step-trigger{
  display:inline-block;margin-top:10px;padding:4px 0;
  font-size:14.5px;font-weight:600;color:var(--rot);text-decoration:none;
}
form.checkout a.edit.step-trigger:hover{text-decoration:underline}
form.checkout #order_review p:has(> a.edit.step-trigger){margin:0}

/* Die AGB-Zeile braucht Abstand nach oben.
   Die Trennlinie NUR hier – der umgebende Platzhalter bekam sie vorher auch,
   dadurch standen zwei Linien dicht übereinander. */
form.checkout .legal.checkbox-legal{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--linie);
}
form.checkout .wc-gzd-checkbox-placeholder{border-top:0;padding-top:0;margin-top:0}

/* Auch hier gewinnt sonst `.woocommerce form .form-row label.checkbox{display:inline}`
   – und ohne flex greift der Abstand zwischen Kästchen und Text nicht. */
.woocommerce form.checkout .form-row.checkbox-legal label.checkbox,
.woocommerce-page form.checkout .form-row.checkbox-legal label.checkbox{
  display:flex;align-items:flex-start;gap:11px;
  font-size:15.5px;line-height:1.55;font-weight:400;
}
.woocommerce form.checkout .form-row.checkbox-legal input.input-checkbox{
  margin:2px 0 0;
}

/* Germanized setzt `#order_review .wc-gzd-checkbox-placeholder p.form-row
   label{display:inline}` – mit einer ID, gegen die keine klassenbasierte Regel
   ankommt. Deshalb hier dieselbe Wurzel plus zwei Glieder: kein !important
   nötig, nur dieselbe Bauform.
   Ohne flex greift der Abstand zwischen Kästchen und AGB-Text nicht. */
#order_review .wc-gzd-checkbox-placeholder p.form-row.checkbox-legal label.checkbox{
  display:flex;align-items:flex-start;gap:11px;
  font-size:15.5px;line-height:1.55;font-weight:400;
}
#order_review .wc-gzd-checkbox-placeholder p.form-row.checkbox-legal input.input-checkbox{
  margin:2px 0 0;
}