/*
Theme Name: VIP Sticker
Theme URI: https://vip-nummer.info/
Description: Sticker-Pop-Design für vip-nummer.info – Fallblatt-Schaufenster mit Besten-Algorithmus, SIM-Karten-Katalog mit Suche, Filtern und Sortierung, „Neu eingetroffen“-Seitenleiste. Nummern kommen live aus WooCommerce.
Author: vip-nummer.info
Version: 1.0.0
Requires PHP: 7.4
Text Domain: vip-sticker
*/

/* ── Token-System ─────────────────────────────────────────── */
:root{
  --koralle:      #FE6B3F;   /* 4,6:1 gegen Tinte – AA für Knopftext */
  --koralle-tief: #C23A0F;   /* AA-sicher auf hellem Grund */
  --cyan:         #3AD7ED;
  --cyan-blass:   #D9F6FB;
  --papier:       #F1FBFD;
  --tinte:        #16324F;
  --tinte-soft:   #46627E;
  --tinte-blass:  #BFD4E4;
  --tinte-linie:  #2C4A68;
  --hinweis:      #A8C6DB;
  --balken-leer:  #D9E4ED;
  --chip-gold:    #F7D774;
  --weiss:        #FFFFFF;
  --linie:        2px solid var(--tinte);
  --wurf:         6px 6px 0 var(--tinte);        /* harter Sticker-Schatten */
  --wurf-klein:   3px 3px 0 var(--tinte);
  --radius:       18px;
  --radius-l:     26px;
  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-mono:    "Azeret Mono", "Courier New", monospace;
  --font-body:    "Instrument Sans", "Segoe UI", sans-serif;
  --abschnitt:    clamp(4.5rem, 9vw, 7.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; } /* hidden-Attribut muss auch gegen display:flex der Karten gewinnen */
html{ scroll-behavior:smooth; scroll-padding-top:6rem; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--tinte);
  background:
    radial-gradient(circle at 12% 8%,  rgba(58,215,237,.14), transparent 34%),
    radial-gradient(circle at 88% 90%, rgba(254,107,63,.10), transparent 34%),
    var(--papier);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--koralle-tief); }
:focus-visible{ outline:3px solid var(--koralle-tief); outline-offset:3px; border-radius:4px; }

.huelle{ width:min(1160px, 100% - 2.5rem); margin-inline:auto; }

.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:99;
  background:var(--tinte); color:var(--weiss);
  padding:.6rem 1.1rem; border-radius:0 0 12px 12px;
  font-weight:600; text-decoration:none; transition:top .15s;
}
.skip-link:focus{ top:0; }

/* ── Typo-Rollen ──────────────────────────────────────────── */
h1,h2,h3{ font-family:var(--font-display); line-height:1.08; margin:0; letter-spacing:-.01em; }
h1{ font-size:clamp(2.4rem, 6vw, 4.2rem); font-weight:800; }
h2{ font-size:clamp(1.8rem, 4vw, 2.7rem); font-weight:800; }
h3{ font-size:1.25rem; font-weight:700; }
.vorspann{
  display:inline-block;
  font-family:var(--font-mono); font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--koralle-tief);
  margin-bottom:.9rem;
}
.untertitel{ font-size:clamp(1.05rem, 2vw, 1.2rem); color:var(--tinte-soft); max-width:38rem; }

/* ── Buttons ──────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  padding:.85rem 1.6rem;
  border:var(--linie); border-radius:999px;
  box-shadow:var(--wurf-klein);
  cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.knopf:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--tinte); }
.knopf:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--tinte); }
.knopf--koralle{ background:var(--koralle); color:var(--tinte); }
.knopf--tinte{ background:var(--tinte); color:var(--weiss); }
.knopf--geist{ background:var(--weiss); color:var(--tinte); }
.knopf[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }
/* Auf dunklen Flächen: Cyan-Schatten und Cyan-Fokus, sonst unsichtbar */
.tafel .knopf, .scout__box .knopf{ box-shadow:3px 3px 0 var(--cyan); }
.tafel .knopf:hover, .scout__box .knopf:hover{ box-shadow:1px 1px 0 var(--cyan); }
.tafel .knopf:active, .scout__box .knopf:active{ box-shadow:0 0 0 var(--cyan); }
.tafel :focus-visible, .scout__box :focus-visible, .fuss :focus-visible{ outline-color:var(--cyan); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ── Kopfzeile ────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:50;
  background:var(--weiss);
  border-bottom:var(--linie);
}
.kopf__zeile{
  display:flex; align-items:center; gap:1.4rem;
  padding-block:.7rem;
}
.marke{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--tinte);
  margin-right:auto;
}
.marke img{ width:52px; height:52px; }
.marke b{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:-.01em; }
.marke small{ display:block; font-size:.72rem; color:var(--tinte-soft); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.kopf nav{ display:flex; align-items:center; gap:1.4rem; }
.kopf nav a:not(.knopf){
  color:var(--tinte); text-decoration:none; font-weight:600; font-size:.98rem;
  border-bottom:2px solid transparent; padding-block:.2rem;
}
.kopf nav a:not(.knopf):hover{ border-bottom-color:var(--koralle); }
.kopf .knopf{ padding:.55rem 1.2rem; font-size:.95rem; }
.warenkorb__zahl{
  display:inline-grid; place-items:center;
  min-width:1.5rem; height:1.5rem; padding-inline:.3rem;
  background:var(--tinte); color:var(--weiss);
  border-radius:999px;
  font-family:var(--font-mono); font-size:.78rem; font-weight:700;
}
.burger{ display:none; }

@media (max-width: 860px){
  .burger{
    display:inline-grid; place-items:center;
    width:46px; height:46px;
    background:var(--weiss); border:var(--linie); border-radius:12px;
    cursor:pointer;
  }
  .burger svg{ width:22px; height:22px; }
  .kopf nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--weiss); border-bottom:var(--linie);
    padding:.6rem 1.25rem 1.2rem;
  }
  .kopf nav.offen{ display:flex; }
  .kopf nav a:not(.knopf){ padding:.8rem .2rem; border-bottom:1px solid var(--cyan-blass); }
  .kopf nav .knopf{ margin-top:1rem; justify-content:center; }
}

/* ── Held: Fallblatt-Anzeige ──────────────────────────────── */
.held{ padding-block:var(--abschnitt) calc(var(--abschnitt) * .8); text-align:center; }
.held h1{ max-width:17ch; margin-inline:auto; }
.held h1 em{
  font-style:normal; color:var(--koralle-tief);
  text-decoration:underline; text-decoration-color:var(--cyan); text-decoration-thickness:6px; text-underline-offset:6px;
}
.held .untertitel{ margin:1.2rem auto 0; }

.tafel{
  margin:3rem auto 0;
  max-width:920px;
  background:var(--tinte);
  border-radius:var(--radius-l);
  border:var(--linie);
  box-shadow:var(--wurf);
  padding:clamp(1.2rem, 3.5vw, 2.4rem);
  position:relative;
}
.tafel__etikett{
  position:absolute; top:-1.1rem; left:50%; translate:-50% 0;
  background:var(--cyan); color:var(--tinte);
  font-family:var(--font-mono); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.12em;
  padding:.35rem 1rem; border:var(--linie); border-radius:999px;
  white-space:nowrap;
}
.tafel__nummer{
  display:flex; flex-wrap:wrap; justify-content:center;
  column-gap:clamp(.5rem,1.8vw,1.1rem); row-gap:.5rem;   /* Gruppen-Abstand – gilt nicht am Zeilenanfang */
  font-family:var(--font-mono);
}
.tafel__gruppe{ display:flex; gap:clamp(.25rem,.9vw,.5rem); }
.fb-zelle{
  width:clamp(2rem, 5.4vw, 3.4rem);
  height:clamp(2.8rem, 7.6vw, 4.8rem);
  background:var(--weiss);
  border-radius:10px;
  overflow:hidden;
  position:relative;
  box-shadow:inset 0 -3px 0 rgba(22,50,79,.18);
}
.fb-zelle::after{ /* Fallblatt-Trennlinie */
  content:""; position:absolute; left:0; right:0; top:50%;
  border-top:1px solid rgba(22,50,79,.22);
}
.fb-streifen{
  display:flex; flex-direction:column;
  transition:transform 1.4s cubic-bezier(.22,1,.36,1);
}
.fb-streifen span{
  height:clamp(2.8rem, 7.6vw, 4.8rem);
  display:grid; place-items:center;
  font-size:clamp(1.5rem, 4vw, 2.6rem); font-weight:800; color:var(--tinte);
}
@media (max-width:480px){
  .fb-zelle{ width:clamp(1.1rem, 5vw, 3.4rem); }
  .fb-zelle, .fb-streifen span{ height:2.4rem; }
  .fb-streifen span{ font-size:1.05rem; }
}
.tafel__fuss{
  margin-top:1.6rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1rem 2rem;
  color:var(--weiss);
}
.tafel__muster{ text-align:left; }
.tafel__muster b{ font-family:var(--font-display); font-size:1.15rem; display:block; }
.tafel__muster span{ font-size:.9rem; color:var(--cyan); font-weight:600; }
.siegel{
  position:relative;
  width:108px; height:108px;
  display:grid; place-items:center;
  color:var(--tinte);
  flex-shrink:0;
}
.siegel svg{ position:absolute; inset:0; width:100%; height:100%; }
.siegel b{
  position:relative; font-family:var(--font-display); font-weight:800; font-size:1.25rem;
  rotate:-7deg;
}
.tafel .knopf{ margin-block:.3rem; }
.tafel__hinweis{
  width:100%; margin:0; font-size:.85rem; color:var(--hinweis);
}

/* ── Vertrauens-Leiste ────────────────────────────────────── */
.vertrauen{ border-block:var(--linie); background:var(--weiss); }
.vertrauen ul{
  list-style:none; margin:0; padding:1rem 0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.6rem 2.6rem;
}
.vertrauen li{
  display:flex; align-items:center; gap:.55rem;
  font-weight:600; font-size:.95rem;
}
.vertrauen li::before{
  content:"✓";
  display:inline-grid; place-items:center;
  width:1.35rem; height:1.35rem;
  background:var(--cyan); border:2px solid var(--tinte); border-radius:50%;
  font-size:.75rem; font-weight:800;
}

/* ── Katalog ──────────────────────────────────────────────── */
.katalog{ padding-block:var(--abschnitt); }
.katalog__kopf{ max-width:44rem; }
.katalog__breit{ width:min(1400px, 100% - 2.5rem); margin-inline:auto; } /* Katalog + Seitenleiste dürfen breiter als der Rest */
.katalog__layout{
  display:grid; gap:2.4rem;
  align-items:start;
}
@media (min-width: 1000px){
  .katalog__layout{ grid-template-columns:minmax(0,1fr) 300px; }
  .seitenleiste{ position:sticky; top:6.5rem; }
}
/* Handy & Tablet: Seitenleiste als kompakte Wisch-Leiste über dem Katalog */
@media (max-width: 999px){
  .seitenleiste{ order:-1; }
  .seitenleiste ul{
    display:flex; gap:.4rem;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding:.6rem;
  }
  .seitenleiste li{ flex:0 0 auto; scroll-snap-align:start; }
  .seitenleiste li + li{ border-top:0; }
  .seitenleiste button{
    border:2px dashed var(--cyan-blass); border-radius:12px;
    padding:.55rem .85rem;
  }
  .seitenleiste button:hover{ border-color:var(--cyan); }
  .seitenleiste button b{ font-size:.95rem; white-space:nowrap; }
  .seitenleiste__meta{ white-space:nowrap; }
  .seitenleiste__kopf{ padding:.85rem 1.1rem .7rem; }
  .seitenleiste__kopf p{ font-size:.8rem; }
}
.filterleiste{ margin:2rem 0 2.4rem; display:grid; gap:.8rem; }
.suche{ position:relative; max-width:34rem; }
.suche svg{
  position:absolute; left:1.05rem; top:50%; translate:0 -50%;
  width:18px; height:18px; pointer-events:none; color:var(--tinte-soft);
}
.suche input{
  width:100%;
  font-family:var(--font-mono); font-weight:700; font-size:.95rem;
  padding:.8rem 1.1rem .8rem 2.7rem;
  border:var(--linie); border-radius:999px;
  background:var(--weiss); color:var(--tinte);
}
.suche input::placeholder{ color:var(--tinte-soft); font-weight:600; }
.filter{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin:0;
  padding:0; list-style:none;
}
.filter-meta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 1.5rem;
  border-top:2px dashed var(--cyan-blass); padding-top:.9rem;
}
.filter-anzahl{ margin:0; font-family:var(--font-mono); font-weight:700; font-size:.9rem; }
.sortier{ display:flex; align-items:center; gap:.55rem; font-size:.9rem; font-weight:600; color:var(--tinte-soft); }
.sortier select{
  font-family:var(--font-mono); font-weight:700; font-size:.88rem;
  padding:.45rem .7rem;
  border:var(--linie); border-radius:12px;
  background:var(--weiss); color:var(--tinte); cursor:pointer;
}
.filter button{
  font-family:var(--font-mono); font-weight:700; font-size:.88rem;
  padding:.5rem 1.05rem;
  background:var(--weiss); color:var(--tinte);
  border:var(--linie); border-radius:999px;
  cursor:pointer;
}
.filter button[aria-pressed="true"]{
  background:var(--tinte); color:var(--weiss);
  box-shadow:var(--wurf-klein);
}
.filter button:hover{ background:var(--cyan-blass); }
.filter button[aria-pressed="true"]:hover{ background:var(--tinte); }

.gitter{
  display:grid; gap:1.8rem;
  grid-template-columns:repeat(auto-fill, minmax(min(300px,100%), 1fr));
}
.karte{
  position:relative;
  background:var(--weiss);
  border:var(--linie);
  border-radius:var(--radius);
  border-top-right-radius:0;
  box-shadow:var(--wurf);
  padding:1.5rem 1.5rem 1.4rem;
  display:flex; flex-direction:column; gap:.9rem;
}
.karte::before{ /* SIM-Ecke */
  content:"";
  position:absolute; top:-2px; right:-2px;
  width:36px; height:36px;
  background:var(--cyan-blass);
  border-left:var(--linie); border-bottom:var(--linie);
  border-bottom-left-radius:16px;
  border-top-right-radius:2px;
}
.karte__kopf{ display:flex; align-items:center; gap:.35rem .6rem; flex-wrap:wrap; }
.chip{ flex-shrink:0; }   /* SIM-Kontaktchip */
.chip rect{ fill:var(--chip-gold); }
.karte__muster{
  font-family:var(--font-mono); font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--koralle-tief);
  white-space:nowrap;
}
.karte__nummer{
  font-family:var(--font-mono); font-weight:800;
  font-size:clamp(1.35rem, 2.6vw, 1.6rem);
  letter-spacing:.02em;
  margin:0;
}
.karte__nummer small{ font-size:1em; font-weight:800; color:inherit; margin-right:.35em; }
.merk{
  display:flex; align-items:flex-end; gap:.5rem;
  font-size:.82rem; font-weight:600; color:var(--tinte-soft);
}
.merk__balken{ display:flex; align-items:flex-end; gap:3px; height:18px; }
.merk__balken i{
  width:5px; border-radius:2px 2px 0 0;
  background:var(--balken-leer);
}
.merk__balken i:nth-child(1){ height:6px; }
.merk__balken i:nth-child(2){ height:9px; }
.merk__balken i:nth-child(3){ height:12px; }
.merk__balken i:nth-child(4){ height:15px; }
.merk__balken i:nth-child(5){ height:18px; }
.merk[data-stufe="1"] i:nth-child(-n+1),
.merk[data-stufe="2"] i:nth-child(-n+2),
.merk[data-stufe="3"] i:nth-child(-n+3),
.merk[data-stufe="4"] i:nth-child(-n+4),
.merk[data-stufe="5"] i:nth-child(-n+5){ background:var(--koralle); }
.karte__kopf .tier{ margin-right:1rem; } /* Platz für die SIM-Ecke */
.tier{
  margin-left:auto; align-self:center;
  font-family:var(--font-mono); font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  padding:.16rem .55rem;
  border:2px solid var(--tinte); border-radius:999px;
  color:var(--tinte); white-space:nowrap;
}
.tier--luxus{ background:var(--koralle); }
.tier--super{ background:var(--cyan); }
.karte__fuss{
  margin-top:auto; padding-top:1rem;
  border-top:2px dashed var(--cyan-blass);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.7rem 1rem;
}
.karte__preis{ font-family:var(--font-display); font-weight:800; font-size:1.45rem; margin:0; }
.karte__preis small{ display:block; font-family:var(--font-body); font-weight:500; font-size:.72rem; color:var(--tinte-soft); }
.karte .knopf{ font-size:.88rem; padding:.6rem 1.05rem; white-space:nowrap; }
.katalog__leer{
  display:none;
  border:2px dashed var(--tinte-soft); border-radius:var(--radius);
  padding:2.5rem; text-align:center; color:var(--tinte-soft);
}
.katalog__leer.zeigen{ display:block; }
.mehr-knopf{ margin:2.2rem auto 0; display:flex; }

/* ── Seitenleiste: Neu eingetroffen ───────────────────────── */
.seitenleiste{
  background:var(--weiss);
  border:var(--linie); border-radius:var(--radius);
  box-shadow:var(--wurf);
  overflow:hidden;
}
.seitenleiste__kopf{
  background:var(--cyan);
  border-bottom:var(--linie);
  padding:1rem 1.2rem .8rem;
}
.seitenleiste__kopf .vorspann{ color:var(--tinte); margin-bottom:.15rem; }
.seitenleiste__kopf p{ margin:0; font-size:.85rem; font-weight:600; color:var(--tinte); }
.seitenleiste ul{ list-style:none; margin:0; padding:.4rem; }
.seitenleiste li + li{ border-top:2px dashed var(--cyan-blass); }
.seitenleiste button{
  width:100%; text-align:left;
  background:none; border:0; cursor:pointer;
  font:inherit; color:var(--tinte);
  padding:.7rem .8rem;
  border-radius:10px;
  display:grid; gap:.15rem;
}
.seitenleiste button:hover{ background:var(--cyan-blass); }
.seitenleiste button b{
  font-family:var(--font-mono); font-weight:800; font-size:1.02rem; letter-spacing:.02em;
}
.seitenleiste button b small{ font-size:1em; color:inherit; margin-right:.3em; }
.seitenleiste__meta{ font-size:.8rem; font-weight:600; color:var(--tinte-soft); }

/* ── Ablauf ───────────────────────────────────────────────── */
.ablauf{ background:var(--weiss); border-block:var(--linie); padding-block:var(--abschnitt); }
.ablauf ol{
  list-style:none; counter-reset:schritt;
  margin:3rem 0 0; padding:0;
  display:grid; gap:2.2rem;
  grid-template-columns:repeat(auto-fit, minmax(min(260px,100%), 1fr));
}
.ablauf li{ counter-increment:schritt; position:relative; }
.ablauf li::before{
  content:counter(schritt);
  position:absolute; top:0; left:0;
  width:3.4rem; height:3.4rem;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1.5rem;
  background:var(--cyan); border:var(--linie); border-radius:50%;
  box-shadow:var(--wurf-klein);
}
.ablauf li h3{ margin:0 0 .8rem 4.4rem; min-height:3.4rem; display:flex; align-items:center; }
.ablauf li p{ margin:0; color:var(--tinte-soft); }

/* ── Scout-Band ───────────────────────────────────────────── */
.scout{ padding-block:var(--abschnitt); }
.scout__box{
  background:var(--tinte); color:var(--weiss);
  border:var(--linie); border-radius:var(--radius-l);
  box-shadow:var(--wurf);
  padding:clamp(2rem,5vw,3.5rem);
  display:flex; flex-wrap:wrap; align-items:center; gap:2rem;
}
.scout__text{ flex:1 1 26rem; }
.scout__text h2{ color:var(--weiss); }
.scout__text p{ color:var(--tinte-blass); max-width:34rem; }
.scout__text .vorspann{ color:var(--cyan); }
.scout .siegel{ width:158px; height:158px; color:var(--tinte); }
.scout .siegel b{ font-size:.82rem; text-align:center; line-height:1.2; max-width:70%; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq{ padding-block:0 var(--abschnitt); }
.faq__liste{ max-width:46rem; margin-top:2.4rem; }
.faq details{
  background:var(--weiss);
  border:var(--linie); border-radius:14px;
  margin-bottom:.9rem;
  overflow:hidden;
}
.faq details[open]{ box-shadow:var(--wurf-klein); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 1.3rem;
  font-weight:700; font-size:1.02rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  font-family:var(--font-mono); font-size:1.3rem; font-weight:700;
  color:var(--koralle-tief);
  transition:rotate .15s;
}
.faq details[open] summary::after{ rotate:45deg; }
.faq details p{ margin:0; padding:0 1.3rem 1.2rem; color:var(--tinte-soft); }

/* ── Fußzeile ─────────────────────────────────────────────── */
.fuss{ background:var(--tinte); color:var(--tinte-blass); padding-block:3.5rem 2rem; }
.fuss a{ color:var(--weiss); text-decoration-color:var(--cyan); }
.fuss__oben{
  display:flex; flex-wrap:wrap; gap:2.5rem 4rem;
  padding-bottom:2.5rem; border-bottom:1px solid var(--tinte-linie);
}
.fuss__marke{ flex:1 1 16rem; }
.fuss__marke img{ width:64px; height:64px; margin-bottom:.8rem; }
.fuss__marke b{ color:var(--weiss); font-family:var(--font-display); font-size:1.15rem; }
.fuss__marke p{ margin:.3rem 0 0; font-size:.92rem; max-width:24rem; }
.fuss nav{ display:flex; gap:4rem; flex-wrap:wrap; }
.fuss nav h3{ color:var(--weiss); font-size:.95rem; margin-bottom:.9rem; }
.fuss nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.95rem; }
.fuss__unten{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1.6rem; font-size:.85rem;
}
.zahlarten{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0; }
.zahlarten li{
  border:1px solid var(--tinte-linie); border-radius:8px;
  padding:.25rem .7rem; font-size:.78rem; font-weight:600; color:var(--weiss);
}

/* ── Unterseiten (Rechtliches, Kontakt, WooCommerce-Seiten) ── */
.seite{ padding-block:3.5rem 5rem; }
.seite--schmal .seite__inhalt{ max-width:46rem; }
.seite h1{ font-size:clamp(2rem,5vw,2.8rem); margin-bottom:1.5rem; }
.seite__inhalt h2{ font-size:1.3rem; margin:2.2rem 0 .6rem; }
.seite__inhalt h3{ font-size:1.1rem; margin:1.6rem 0 .4rem; }
.seite__inhalt p, .seite__inhalt li{ color:var(--tinte-soft); }
.seite__inhalt ul, .seite__inhalt ol{ padding-left:1.4rem; }

/* WooCommerce-Grundlagen im Sticker-Look */
.seite .woocommerce table.shop_table{
  width:100%; border-collapse:collapse;
  background:var(--weiss); border:var(--linie); border-radius:14px;
}
.seite .woocommerce table.shop_table th,
.seite .woocommerce table.shop_table td{
  padding:.8rem 1rem; border-bottom:2px dashed var(--cyan-blass); text-align:left;
}
.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce button[type="submit"], .woocommerce #place_order{
  font-family:var(--font-display); font-weight:800;
  background:var(--koralle); color:var(--tinte);
  border:var(--linie); border-radius:999px;
  padding:.7rem 1.4rem; cursor:pointer;
  box-shadow:var(--wurf-klein);
}
.woocommerce .button:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--tinte); }
.woocommerce input.input-text, .woocommerce textarea, .woocommerce select,
.woocommerce .qty{
  font:inherit; color:var(--tinte);
  padding:.6rem .8rem;
  border:var(--linie); border-radius:10px;
  background:var(--weiss);
}
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  list-style:none;
  background:var(--weiss); border:var(--linie); border-radius:14px;
  box-shadow:var(--wurf-klein);
  padding:1rem 1.3rem; margin:0 0 1.5rem;
}
.woocommerce-error{ border-color:var(--koralle-tief); }