/*
  Die oeffentliche Website (Startseite, Unterseiten, Teilnehmende Laeden).

  Eine Datei statt eines <style>-Blocks je Vorlage: Alle Seiten brauchen
  dieselben Regeln, und kopierte Regeln laufen auseinander.

  AUSSEHEN SEIT 16.09.2026: modern, klar, "SaaS-Look" (Vorgabe). Eine
  Schrift (Geist) statt Serif fuer Ueberschriften: Das laedt auch zwei
  Schriftdateien weniger. Die Markenfarbe bleibt das Burgunderrot, dazu
  ein warmes Gold als Akzent. Alles unter .ws, damit die Grundregeln aus
  snackpot.css (Portal) die Website nicht umfaerben und umgekehrt.
*/

/* Grundregeln, die bis 16.09.2026 aus snackpot.css kamen. Die Website laedt
   die Portal-Datei nicht mehr (base.html, Block portal_css). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, p { margin: 0; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid #8b1e1e; outline-offset: 2px; }
/* Auf den dunklen Flaechen haette der rote Ring keine 3:1 (WCAG 1.4.11). */
.ws-hero :focus-visible, .ws-kontakt-kasten :focus-visible, .ws-preis-rechts :focus-visible { outline-color: #ffd9a8; }

.ws {
  --ws-rot: #8b1e1e;
  --ws-rot-tief: #5a1212;
  --ws-rot-nacht: #1d0b0b;
  --ws-rot-hauch: #fbeeee;
  --ws-gold: #e3b25c;
  --ws-gold-tief: #7d5a1e;
  --ws-tinte: #16120f;
  --ws-tinte-2: #524b44;
  --ws-tinte-3: #6b635a;
  --ws-weiss: #ffffff;
  --ws-hell: #faf8f5;
  --ws-rand: #ebe5dc;
  --ws-rand-2: #ddd5c9;
  --ws-radius: 20px;
  --ws-schatten: 0 1px 2px rgba(22,18,15,.04), 0 8px 24px -12px rgba(22,18,15,.12);
  --ws-schatten-hoch: 0 2px 4px rgba(22,18,15,.05), 0 24px 48px -20px rgba(22,18,15,.25);
  --ws-breite: 1160px;

  background: var(--ws-weiss);
  color: var(--ws-tinte);
  font-family: 'Geist', 'Geist Ersatz', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.ws h1, .ws h2, .ws h3 {
  font-family: 'Geist', 'Geist Ersatz', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: inherit;
}
.ws a { color: var(--ws-rot); }
.ws img { max-width: 100%; height: auto; }

/* ---------- Navigation ---------- */
.ws-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(22,18,15,.07);
}
.ws-nav-innen {
  max-width: var(--ws-breite); margin: 0 auto; padding: 0.7rem 1.5rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.ws-marke {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em;
  color: var(--ws-tinte) !important; text-decoration: none !important;
}
.ws-marke-punkt {
  width: 1.55rem; height: 1.55rem; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, var(--ws-rot) 0%, #c2412d 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  display: grid; place-items: center;
}
.ws-marke-punkt svg { width: 0.95rem; height: 0.95rem; color: #fff; }
.ws-nav-links { display: flex; gap: 0.25rem; align-items: center; margin-left: 0.5rem; }
.ws-nav-links a {
  white-space: nowrap;
  color: var(--ws-tinte-2); text-decoration: none; font-size: 0.93rem; font-weight: 500;
  padding: 0.45rem 0.7rem; border-radius: 8px; transition: color .15s, background .15s;
}
.ws-nav-links a:hover { color: var(--ws-tinte); background: var(--ws-hell); text-decoration: none; }
.ws-nav-knoepfe { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; }
.ws-menue { display: none; margin-left: auto; position: relative; }
.ws-menue summary {
  list-style: none; cursor: pointer; width: 2.75rem; height: 2.75rem; border-radius: 10px;
  display: grid; place-items: center; border: 1px solid var(--ws-rand); background: #fff;
}
.ws-menue summary::-webkit-details-marker { display: none; }
.ws-menue summary svg { width: 1.25rem; height: 1.25rem; }
.ws-menue-blatt {
  position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(18rem, calc(100vw - 2rem));
  background: #fff; border: 1px solid var(--ws-rand); border-radius: 16px; box-shadow: var(--ws-schatten-hoch);
  padding: 0.5rem; display: grid; gap: 0.1rem;
}
.ws-menue-blatt a { min-height: 44px; display: flex; align-items: center; padding: 0.55rem 0.85rem; border-radius: 10px; color: var(--ws-tinte); text-decoration: none; font-weight: 500; }
.ws-menue-blatt a:hover { background: var(--ws-hell); text-decoration: none; }
.ws-menue-blatt .ws-knopf { justify-content: center; margin-top: 0.3rem; }

/* ---------- Knoepfe ---------- */
.ws-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.8rem 1.35rem; border-radius: 12px; font-weight: 600; font-size: 0.98rem;
  line-height: 1.2; text-decoration: none !important; cursor: pointer; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.ws-knopf svg { width: 1.05rem; height: 1.05rem; flex: none; transition: transform .18s ease; }
.ws-knopf:hover svg { transform: translateX(2px); }
.ws-knopf-klein { padding: 0.55rem 0.95rem; font-size: 0.9rem; border-radius: 10px; }
.ws-knopf-rot { background: var(--ws-rot); color: #fff !important; box-shadow: 0 6px 16px -8px rgba(139,30,30,.7); }
.ws-knopf-rot:hover { background: var(--ws-rot-tief); transform: translateY(-1px); }
.ws-knopf-weiss { background: #fff; color: var(--ws-tinte) !important; box-shadow: 0 10px 30px -12px rgba(0,0,0,.55); }
.ws-knopf-weiss:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(0,0,0,.6); }
.ws-knopf-glas { background: rgba(255,255,255,.08); color: #fff !important; border-color: rgba(255,255,255,.22); }
.ws-knopf-glas:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.ws-knopf-rand { background: #fff; color: var(--ws-tinte) !important; border-color: var(--ws-rand-2); }
.ws-knopf-rand:hover { border-color: var(--ws-tinte-3); transform: translateY(-1px); }
.ws-knopf-leise { background: transparent; color: var(--ws-tinte-2) !important; }
.ws-knopf-leise:hover { color: var(--ws-tinte) !important; background: var(--ws-hell); }

/* ---------- Abschnitte ---------- */
.ws-section { max-width: var(--ws-breite); margin: 0 auto; padding: 5.5rem 1.5rem; }
.ws-band { background: var(--ws-hell); border-top: 1px solid var(--ws-rand); border-bottom: 1px solid var(--ws-rand); }
.ws-band > .ws-section { padding-top: 5rem; padding-bottom: 5rem; }
.ws-kopfzeile { max-width: 46rem; margin: 0 0 2.8rem; }
.ws-kopfzeile-mitte { margin-left: auto; margin-right: auto; text-align: center; }
.ws-eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ws-rot); background: var(--ws-rot-hauch); border: 1px solid #f3d9d9;
  padding: 0.28rem 0.7rem; border-radius: 999px; margin-bottom: 1rem;
}
.ws-eyebrow a { color: inherit; text-decoration: none; }
.ws-section h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.12; margin: 0 0 0.9rem; }
.ws-lead { color: var(--ws-tinte-2); font-size: 1.12rem; line-height: 1.65; margin: 0; }
.ws-inline { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Sprungziele nicht unter der klebenden Navigation verstecken. Die alten
   Anker (landing.html) sind leere Spans am Anfang ihres Abschnitts. */
.ws-section, .ws-kontakt, .ws-anker, [id] { scroll-margin-top: 5rem; }
.ws-anker { display: block; height: 0; }

/* Fliesstext der Unterseiten */
.ws-text { max-width: 46rem; }
.ws-text p, .ws-text li { color: var(--ws-tinte-2); line-height: 1.75; font-size: 1.05rem; }
.ws-text h2 { font-size: clamp(1.55rem, 2.6vw, 2rem); margin: 3rem 0 0.8rem; }
.ws-text h2:first-child { margin-top: 0; }
.ws-text h3 { font-size: 1.2rem; margin: 2rem 0 0.4rem; color: var(--ws-tinte); }
.ws-text ul { padding-left: 1.2rem; }
.ws-text strong { color: var(--ws-tinte); }
.ws-text a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Bilder im Fliesstext: feste Masse im HTML (width/height), damit nichts springt. */
.ws-bild { margin: 1.5rem 0 2rem; max-width: 22rem; }
.ws-bild img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--ws-rand); box-shadow: var(--ws-schatten); background: #fff; }
.ws-bild figcaption { margin-top: 0.6rem; font-size: 0.88rem; color: var(--ws-tinte-3); line-height: 1.5; }
/* Vergleichstabelle; auf dem Handy waagerecht scrollbar statt gequetscht. */
.ws-tabelle-rahmen { overflow-x: auto; margin: 1.2rem 0 1.5rem; border: 1px solid var(--ws-rand); border-radius: 14px; }
.ws-tabelle { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.95rem; }
.ws-tabelle th, .ws-tabelle td { padding: 0.75rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ws-rand); color: var(--ws-tinte-2); line-height: 1.5; }
.ws-tabelle thead th { background: var(--ws-hell); color: var(--ws-tinte); font-weight: 600; }
.ws-tabelle tbody th { color: var(--ws-tinte); font-weight: 600; width: 22%; }
.ws-tabelle td:last-child { color: var(--ws-tinte); font-weight: 500; background: #fdf7f7; }
.ws-tabelle tr:last-child th, .ws-tabelle tr:last-child td { border-bottom: 0; }

/* ---------- Hero ---------- */
.ws-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 85% 0%, #7a1c1c 0%, transparent 55%),
              radial-gradient(90% 80% at 0% 100%, #4a1010 0%, transparent 60%),
              var(--ws-rot-nacht);
  color: #fff;
}
/* Feines Raster, zur Mitte hin ausgeblendet: der "Tech"-Grund. */
.ws-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
}
/* Ein warmer Lichtschein wandert langsam. Nur transform: rechnet die Grafikkarte. */
.ws-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 60vmax; height: 60vmax; left: -15vmax; top: -30vmax;
  background: radial-gradient(circle, rgba(227,178,92,.24) 0%, rgba(227,178,92,0) 60%);
  animation: ws-schein 16s ease-in-out infinite alternate;
}
@keyframes ws-schein {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(55vmax,22vmax) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { .ws-hero::after { animation: none; } }

.ws-hero-inner {
  max-width: var(--ws-breite); margin: 0 auto; padding: 5rem 1.5rem 3.5rem;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3.5rem; align-items: center;
}
.ws-hero-klein .ws-hero-inner { grid-template-columns: minmax(0, 1fr); max-width: 52rem; padding: 4.5rem 1.5rem 4rem; }
.ws-hero .ws-eyebrow { color: #ffd9a8; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.ws-hero .ws-eyebrow i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.2); }
.ws-hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.3rem); line-height: 1.02; margin: 0 0 1.3rem; letter-spacing: -0.035em;
}
.ws-hero-klein h1 { font-size: clamp(2.2rem, 4.8vw, 3.4rem); }
/* Sicherheitsnetz: Ein zu langes Wort bricht um, statt abgeschnitten zu werden. */
.ws-hero h1 { overflow-wrap: break-word; }
.ws-verlauf {
  background: linear-gradient(92deg, #ffd9a8 0%, var(--ws-gold) 45%, #ff9f7a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ws-hero p.ws-unterzeile { font-size: 1.16rem; line-height: 1.65; color: rgba(255,255,255,.8); margin: 0 0 2rem; max-width: 36rem; }
.ws-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.ws-vorteilszeile {
  list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem;
  color: rgba(255,255,255,.72); font-size: 0.9rem;
}
.ws-vorteilszeile li { display: inline-flex; align-items: center; gap: 0.4rem; }
.ws-vorteilszeile svg { width: 1rem; height: 1rem; color: #4ade80; }
.ws-preiszeile { margin: 0.9rem 0 0; font-size: 0.86rem; color: rgba(255,255,255,.6); }

/* Live-Zahlen */
.ws-zahlen-rahmen { max-width: var(--ws-breite); margin: 0 auto; padding: 0 1.5rem 3.5rem; }
.ws-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem; }
.ws-zahl {
  display: flex; gap: 0.9rem; align-items: center; padding: 1.1rem 1.25rem; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ws-zahl-symbol {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center;
  background: rgba(227,178,92,.14); color: var(--ws-gold);
}
.ws-zahl-symbol svg { width: 1.3rem; height: 1.3rem; }
.ws-zahl strong { display: block; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ws-zahl span { display: block; margin-top: 0.2rem; font-size: 0.84rem; color: rgba(255,255,255,.72); line-height: 1.4; }
.ws-zahlen-fuss { margin: 0.8rem 0 0; font-size: 0.8rem; color: rgba(255,255,255,.62); }
.ws-zahl .ws-zahl-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }

/* ---------- Handy mit der echten Beispiel-Speisekarte ---------- */
.ws-handy-buehne { position: relative; display: grid; justify-items: center; }
.ws-handy-buehne::before {
  content: ""; position: absolute; inset: 8% 5%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,178,92,.35), rgba(227,178,92,0) 70%); filter: blur(10px);
}
.ws-handy {
  /* Innenbreite des Schirms / 390 px Handybreite der Karte. Fest
     ausgerechnet: Laenge durch Laenge in calc() koennen nicht alle Browser. */
  --ws-handy-b: 300px; --ws-handy-skala: 0.7179;
  position: relative; width: var(--ws-handy-b); aspect-ratio: 390 / 800; max-width: 100%;
  border-radius: 44px; padding: 10px; background: linear-gradient(145deg, #2b2522, #0e0b0a);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.8);
  animation: ws-schweben 7s ease-in-out infinite;
}
@keyframes ws-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .ws-handy { animation: none; } }
.ws-handy-schirm { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #fff; color: #1c1a16; }
.ws-handy-schirm::before {
  content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 88px; height: 24px; border-radius: 999px; background: #0e0b0a; pointer-events: none;
}
/* Die echte Karte wird in Handybreite (390 px) gerendert und verkleinert. */
.ws-handy iframe {
  position: absolute; top: 0; left: 0; border: 0;
  width: calc(100% / var(--ws-handy-skala)); height: calc(100% / var(--ws-handy-skala));
  transform-origin: 0 0; transform: scale(var(--ws-handy-skala));
  background: #fff;
}
.ws-handy-platzhalter {
  position: absolute; inset: 0; display: flex; flex-direction: column; color: #1c1a16; background: #fffdf9;
  transition: opacity .4s ease;
}
.ws-handy.ist-geladen .ws-handy-platzhalter { opacity: 0; pointer-events: none; }
.ws-handy.ist-geladen, .ws-handy.ist-geladen .ws-handy-zeilen i { animation: none; }
.ws-handy-kopf { background: linear-gradient(160deg, #3b2a22, #1c1512); color: #fff; padding: 2.4rem 1rem 1rem; }
.ws-handy-kopf b { display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.ws-handy-kopf small { opacity: .75; font-size: 0.72rem; }
.ws-handy-zeilen { padding: 0.9rem; display: grid; gap: 0.6rem; }
.ws-handy-zeilen i { display: block; height: 0.7rem; border-radius: 6px; background: linear-gradient(90deg, #efe9e0, #f7f3ee, #efe9e0); background-size: 200% 100%; animation: ws-schimmer 1.4s linear infinite; }
.ws-handy-zeilen i:nth-child(3n) { width: 60%; }
.ws-handy-zeilen i:nth-child(3n+2) { width: 85%; }
@keyframes ws-schimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ws-handy-zeilen i { animation: none; } }
.ws-handy-unterschrift {
  margin-top: 1.1rem; display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; justify-content: center;
  font-size: 0.85rem; color: rgba(255,255,255,.72);
}
.ws-handy-unterschrift a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ws-echt-marke {
  display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.78rem; color: #fff;
  background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.35); padding: 0.2rem 0.6rem; border-radius: 999px;
}
.ws-echt-marke i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #4ade80; }

/* Gezeichnete Karte, wenn es kein Beispiel gibt */
.ws-attrappe .ws-handy-liste { padding: 0.8rem 0.95rem; display: grid; gap: 0.6rem; }
.ws-attrappe .ws-handy-sprachen { display: flex; gap: 0.3rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid #eee4d3; font-size: 0.7rem; }
.ws-attrappe .ws-handy-sprachen span { padding: 0.15rem 0.45rem; border-radius: 999px; background: #f3ebdc; }
.ws-attrappe .ws-handy-sprachen span.ist-aktiv { background: var(--ws-rot); color: #fff; }
.ws-attrappe .ws-handy-kat { font-size: 0.62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ws-gold-tief); margin-top: 0.3rem; }
.ws-attrappe .ws-handy-gericht { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; line-height: 1.3; }
.ws-attrappe .ws-handy-gericht i { display: block; font-style: normal; color: #7a7466; font-size: 0.68rem; }
.ws-attrappe .ws-handy-gericht b { white-space: nowrap; }

/* ---------- Beispiel: was die echte Karte kann ---------- */
.ws-funktionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ws-funktion { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1.1rem; border-radius: 16px; background: #fff; border: 1px solid var(--ws-rand); }
.ws-funktion h3 { font-size: 1rem; margin: 0 0 0.2rem; letter-spacing: -0.01em; }
.ws-funktion p { margin: 0; color: var(--ws-tinte-2); font-size: 0.93rem; line-height: 1.55; }

/* ---------- Symbole in Kacheln ---------- */
.ws-symbol {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center;
  color: var(--ws-rot); background: var(--ws-rot-hauch); border: 1px solid #f3d9d9;
}
.ws-symbol svg { width: 1.25rem; height: 1.25rem; }

/* ---------- Schritte ---------- */
.ws-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; counter-reset: schritt; }
.ws-schritt {
  position: relative; background: #fff; border: 1px solid var(--ws-rand); border-radius: var(--ws-radius);
  padding: 1.6rem 1.5rem 1.5rem; box-shadow: var(--ws-schatten);
}
.ws-schritt-nr {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; margin-bottom: 1rem;
  font-weight: 700; font-size: 0.95rem; color: #fff; background: linear-gradient(135deg, var(--ws-rot), #c2412d);
}
.ws-schritt h3 { font-size: 1.15rem; margin: 0 0 0.35rem; }
.ws-schritt p { color: var(--ws-tinte-2); line-height: 1.6; margin: 0; font-size: 0.97rem; }

/* ---------- Kacheln ---------- */
.ws-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ws-kachel {
  background: #fff; border: 1px solid var(--ws-rand); border-radius: var(--ws-radius); padding: 1.4rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ws-kachel:hover { transform: translateY(-3px); border-color: var(--ws-rand-2); box-shadow: var(--ws-schatten-hoch); }
.ws-kachel .ws-symbol { margin-bottom: 1rem; }
.ws-kachel h3 { font-size: 1.05rem; margin: 0 0 0.35rem; letter-spacing: -0.015em; }
.ws-kachel p { color: var(--ws-tinte-2); line-height: 1.58; margin: 0; font-size: 0.94rem; }

/* ---------- Admin-Bereich ---------- */
.ws-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.ws-kernsatz { font-size: clamp(1.2rem, 2.2vw, 1.4rem); line-height: 1.45; color: var(--ws-tinte); font-weight: 600; margin: 0 0 1.5rem; letter-spacing: -0.01em; }
.ws-haken { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 0.7rem; }
.ws-haken li { position: relative; padding-left: 2rem; line-height: 1.5; color: var(--ws-tinte-2); }
.ws-haken li strong { color: var(--ws-tinte); }
.ws-haken li::before {
  content: ""; position: absolute; left: 0; top: 0.15rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--ws-rot-hauch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b1e1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}
.ws-bald {
  display: flex; gap: 0.9rem; align-items: center; margin-top: 1.6rem; padding: 0.95rem 1.1rem; border-radius: 16px;
  background: #fff; border: 1px dashed var(--ws-rand-2);
}
.ws-bald-marke {
  flex: none; font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--ws-gold-tief); border-radius: 999px; padding: 0.22rem 0.65rem;
}
.ws-bald p { margin: 0; color: var(--ws-tinte-2); line-height: 1.5; font-size: 0.95rem; }
.ws-bald strong { color: var(--ws-tinte); }

.ws-admin {
  background: #fff; border: 1px solid var(--ws-rand); border-radius: 18px; overflow: hidden;
  box-shadow: var(--ws-schatten-hoch); font-size: 0.82rem;
}
.ws-admin-leiste { display: flex; gap: 0.4rem; align-items: center; padding: 0.7rem 0.9rem; background: var(--ws-hell); border-bottom: 1px solid var(--ws-rand); }
.ws-admin-leiste i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #e3dbcf; }
.ws-admin-leiste i:nth-child(1) { background: #f28b82; }
.ws-admin-leiste i:nth-child(2) { background: #f6c26b; }
.ws-admin-leiste i:nth-child(3) { background: #7fd49a; }
.ws-admin-rumpf { display: grid; grid-template-columns: 9rem minmax(0, 1fr); min-height: 17rem; }
.ws-admin-nav { background: var(--ws-hell); border-right: 1px solid var(--ws-rand); padding: 0.8rem 0.6rem; display: grid; gap: 0.2rem; align-content: start; }
.ws-admin-nav span { padding: 0.42rem 0.6rem; border-radius: 8px; color: var(--ws-tinte-2); font-weight: 500; }
.ws-admin-nav span.ist-aktiv { background: #fff; color: var(--ws-rot); font-weight: 600; box-shadow: 0 1px 3px rgba(22,18,15,.08); }
.ws-admin-inhalt { padding: 1rem; display: grid; gap: 0.55rem; align-content: start; }
.ws-admin-titel { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.2rem; }
.ws-admin-titel b { font-size: 0.95rem; }
.ws-admin-titel span { font-size: 0.72rem; color: #15803d; background: #dcfce7; padding: 0.15rem 0.5rem; border-radius: 999px; font-weight: 600; }
.ws-admin-zeile { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border: 1px solid var(--ws-rand); border-radius: 10px; }
.ws-admin-zeile b { font-weight: 600; }
.ws-admin-preis { font-variant-numeric: tabular-nums; font-weight: 600; background: var(--ws-hell); border: 1px solid var(--ws-rand); border-radius: 7px; padding: 0.12rem 0.45rem; }
.ws-admin-farben { display: flex; gap: 0.4rem; margin-top: 0.3rem; align-items: center; color: var(--ws-tinte-2); }
.ws-admin-farben i { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ws-rand-2); }

/* ---------- Sprachen, Branchen ---------- */
.ws-sprachen, .ws-branchen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ws-sprachen span, .ws-branchen span {
  background: #fff; border: 1px solid var(--ws-rand); border-radius: 999px; padding: 0.4rem 0.95rem; font-size: 0.93rem; color: var(--ws-tinte-2);
}

/* ---------- Teilnehmende Laeden ---------- */
.ws-laeden { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: stretch; }
.ws-laeden-liste { display: grid; gap: 0.7rem; align-content: start; }
.ws-laden {
  display: flex; gap: 0.9rem; align-items: center; justify-content: space-between; padding: 1rem 1.1rem;
  background: #fff; border: 1px solid var(--ws-rand); border-radius: 16px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ws-laden:hover, .ws-laden.ist-aktiv { border-color: var(--ws-rot); box-shadow: var(--ws-schatten); }
.ws-laden h3 { font-size: 1.02rem; margin: 0; letter-spacing: -0.01em; }
.ws-laden p { margin: 0.1rem 0 0; font-size: 0.88rem; color: var(--ws-tinte-3); }
.ws-laden p svg { width: 0.85rem; height: 0.85rem; vertical-align: -2px; margin-right: 0.25rem; }
.ws-laden .ws-knopf { flex: none; }
.ws-ort { font-size: 1.1rem !important; margin: 0.6rem 0 0 !important; color: var(--ws-tinte-3); letter-spacing: -0.01em; }
.ws-ort:first-child { margin-top: 0 !important; }
/* Nur fuer Screenreader und Suchmaschinen sichtbar. */
.ws-unsichtbar { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ws-karte {
  min-height: 26rem; border-radius: var(--ws-radius); overflow: hidden; border: 1px solid var(--ws-rand);
  background: #e9e4dc; box-shadow: var(--ws-schatten); position: relative;
}
.ws-karte-hinweis { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ws-tinte-3); font-size: 0.9rem; }
.ws-karte .leaflet-popup-content { font-family: 'Geist', system-ui, sans-serif; }
.ws-karte .leaflet-popup-content strong { display: block; font-size: 0.98rem; margin-bottom: 0.15rem; }
.ws-karte .leaflet-popup-content a { font-weight: 600; }
.ws-laeden-seite .ws-karte { min-height: 34rem; }

/* ---------- Preis ---------- */
.ws-preis {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); overflow: hidden;
  background: #fff; border-radius: 24px; border: 1px solid var(--ws-rand); box-shadow: var(--ws-schatten-hoch);
}
.ws-preis-links { padding: 2.4rem; }
.ws-preis-links h3 { font-size: 1.5rem; margin: 0 0 1.2rem; }
.ws-preis-rechts {
  position: relative; color: #fff; padding: 2.4rem; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem;
  background: radial-gradient(120% 100% at 100% 0%, #7a1c1c 0%, transparent 60%), var(--ws-rot-nacht);
}
.ws-betrag { font-size: clamp(3rem, 6vw, 3.8rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.ws-einheit { color: rgba(255,255,255,.72); font-size: 0.95rem; }
.ws-test-marke {
  align-self: flex-start; margin-top: 1rem; font-weight: 600; font-size: 0.85rem; color: #bbf7d0;
  background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.3); padding: 0.25rem 0.7rem; border-radius: 999px;
}
.ws-preis-rechts .ws-knopf { margin-top: 1.2rem; }
.ws-preis-fuss { font-size: 0.84rem; color: rgba(255,255,255,.62); margin: 0.7rem 0 0; line-height: 1.5; }

.ws-selbst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.ws-selbst > div { background: #fff; border: 1px solid var(--ws-rand); border-radius: 16px; padding: 1.1rem 1.2rem; }
.ws-selbst-nr {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-bottom: 0.55rem;
  font-size: 0.8rem; font-weight: 700; color: var(--ws-rot); background: var(--ws-rot-hauch); border-radius: 8px;
}
.ws-selbst strong { display: block; font-size: 1rem; }
.ws-selbst p { margin: 0.3rem 0 0; font-size: 0.92rem; color: var(--ws-tinte-2); line-height: 1.5; }
.ws-selbst a { color: inherit; }

/* ---------- Fragen ---------- */
.ws-faq { display: grid; gap: 0.6rem; max-width: 52rem; }
.ws-kopfzeile-mitte + .ws-faq { margin: 0 auto; }
.ws-faq details { background: #fff; border: 1px solid var(--ws-rand); border-radius: 14px; padding: 0 1.25rem; transition: border-color .15s ease, box-shadow .15s ease; }
.ws-faq details[open] { border-color: var(--ws-rand-2); box-shadow: var(--ws-schatten); }
.ws-faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-weight: 600; color: var(--ws-tinte); line-height: 1.45;
}
.ws-faq summary::-webkit-details-marker { display: none; }
.ws-faq summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 0.6rem; height: 0.6rem; margin-top: -0.4rem;
  border-right: 2px solid var(--ws-tinte-3); border-bottom: 2px solid var(--ws-tinte-3); transform: rotate(45deg);
  transition: transform .2s ease;
}
.ws-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -0.1rem; }
.ws-faq details p { margin: 0 0 1.15rem; color: var(--ws-tinte-2); line-height: 1.7; }

/* ---------- Weiterlesen ---------- */
.ws-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.ws-links a {
  display: block; background: #fff; border: 1px solid var(--ws-rand); border-radius: 16px; padding: 1.2rem 1.3rem;
  text-decoration: none; color: var(--ws-tinte); font-weight: 600; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ws-links a:hover { border-color: var(--ws-rand-2); transform: translateY(-2px); box-shadow: var(--ws-schatten); text-decoration: none; }
.ws-links a::after { content: " \2192"; color: var(--ws-rot); }
.ws-links small { display: block; font-weight: 400; color: var(--ws-tinte-2); margin-top: 0.3rem; line-height: 1.5; font-size: 0.9rem; }

/* ---------- Kontakt ---------- */
.ws-kontakt { padding: 0 1.5rem 5rem; }
.ws-kontakt-kasten {
  max-width: var(--ws-breite); margin: 0 auto; border-radius: 28px; padding: 3.5rem 2rem; text-align: center; color: #fff;
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 120% at 50% 0%, #7a1c1c 0%, transparent 65%), var(--ws-rot-nacht);
}
.ws-kontakt-kasten::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
.ws-kontakt h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin: 0 0 0.8rem; color: #fff; }
.ws-kontakt p { color: rgba(255,255,255,.78); font-size: 1.08rem; margin: 0 auto 2rem; max-width: 36rem; line-height: 1.6; }
.ws-kontakt .ws-cta { justify-content: center; }

/* ---------- Fuss ---------- */
.ws-fuss { border-top: 1px solid var(--ws-rand); background: var(--ws-hell); }
.ws-fuss-innen {
  max-width: var(--ws-breite); margin: 0 auto; padding: 3.5rem 1.5rem 2rem;
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem;
}
.ws-fuss p { color: var(--ws-tinte-2); font-size: 0.92rem; line-height: 1.6; margin: 0.8rem 0 0; max-width: 20rem; }
.ws-fuss .ws-fuss-titel { font-size: 0.82rem; max-width: none; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ws-tinte-3); margin: 0 0 0.9rem; font-weight: 600; }
.ws-fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ws-fuss a { color: var(--ws-tinte-2); text-decoration: none; font-size: 0.93rem; }
.ws-fuss li a { display: inline-block; padding: 0.3rem 0; }
.ws-fuss a:hover { color: var(--ws-tinte); text-decoration: underline; }
.ws-fuss-unten {
  max-width: var(--ws-breite); margin: 0 auto; padding: 1.2rem 1.5rem 2rem; border-top: 1px solid var(--ws-rand);
  color: var(--ws-tinte-3); font-size: 0.85rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ---------- Bewegung beim Hereinscrollen ----------
   Reines CSS (scroll-driven animations), kein Skript: Der Inhalt ist immer
   sichtbar, auch wenn ein Skript nicht laeuft oder der Browser das nicht
   kann. Vorher blendete ein Skript ein, und in einem Fenster im Hintergrund
   blieb die Seite leer, bis jemand scrollte. */
@keyframes ws-auftauchen { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ws-kopfzeile, .ws-schritt, .ws-kachel, .ws-funktion, .ws-preis, .ws-admin,
    .ws-faq details, .ws-links a, .ws-laden, .ws-selbst > div {
      animation: ws-auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
  }
}

/* ---------- Mobil ---------- */
/* Sechs Links und zwei Knoepfe passen erst ab gut 1080 px in eine Zeile;
   darunter uebernimmt das Menue, statt dass die Links umbrechen. */
@media (max-width: 1080px) {
  .ws-nav-links { display: none; }
  .ws-menue { display: block; margin-left: 0; }
}
@media (max-width: 1000px) {
  .ws-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-funktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-fuss-innen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  /* Kein Unschaerfe-Filter auf dem Handy: Er wird bei jedem Bild neu
     berechnet, und darunter laeuft die Animation des Kopfes. */
  .ws-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.97); }
  .ws-hero::after { animation: none; }
  .ws-nav-links, .ws-nav-knoepfe .ws-knopf-rot { display: none; }
  .ws-menue { display: block; margin-left: 0; }
  .ws-nav-knoepfe { gap: 0.4rem; }
  .ws-hero-inner, .ws-zwei, .ws-preis, .ws-laeden { grid-template-columns: minmax(0, 1fr); }
  .ws-hero-inner { padding: 3.2rem 1.25rem 2.5rem; gap: 2.5rem; }
  .ws-section { padding: 3.8rem 1.25rem; }
  .ws-band > .ws-section { padding-top: 3.6rem; padding-bottom: 3.6rem; }
  .ws-schritte, .ws-selbst { grid-template-columns: minmax(0, 1fr); }
  .ws-zwei { gap: 2.5rem; }
  .ws-admin-rumpf { grid-template-columns: minmax(0, 1fr); }
  /* Die Reiter der Attrappe als waagerechte Leiste statt gar nicht: Sie
     tragen die Botschaft (Farben, QR-Code, Einstellungen). */
  .ws-admin-nav { display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: 0.74rem; border-right: 0; border-bottom: 1px solid var(--ws-rand); }
  .ws-karte { min-height: 20rem; }
  .ws-preis-links, .ws-preis-rechts { padding: 1.8rem; }
  .ws-zahlen-rahmen { padding: 0 1.25rem 2.5rem; }
}
@media (max-width: 560px) {
  .ws-kacheln, .ws-funktionen { grid-template-columns: minmax(0, 1fr); }
  .ws-fuss-innen { grid-template-columns: minmax(0, 1fr); }
  .ws-handy { --ws-handy-b: 270px; --ws-handy-skala: 0.641; }
  .ws-laden { flex-wrap: wrap; }
  .ws-cta .ws-knopf { flex: 1 1 auto; }
}

/* ---------- Rechtliches (Impressum, Datenschutz; seit 18.09.2026) ---------- */
.ws-hero-recht .ws-hero-inner { padding-bottom: 3rem; }
/* "Datenschutzerklärung" ist ein Wort mit 20 Buchstaben und passte bei
   375 px nicht in die Zeile; der Rand der Hero-Flaeche schnitt es ab. */
.ws-hero-recht h1 { font-size: clamp(1.75rem, 7.2vw, 3.4rem); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.ws-recht h2 { font-size: clamp(1.2rem, 2vw, 1.4rem); margin: 2.2rem 0 0.6rem; }
.ws-recht p, .ws-recht li { font-size: 1rem; line-height: 1.7; }
.ws-recht li { margin-bottom: 0.6rem; }
.ws-recht-hinweis {
  margin: 0 0 2rem; padding: 1rem 1.2rem; border-radius: 12px;
  background: #fbeeee; border: 1px solid #f3d9d9; color: #7a1b1b; line-height: 1.6;
}
.ws-recht-fuss { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--ws-linie, #ebe5dc); font-size: 0.95rem; }