/* ══════════════════════════════════════════════════════════════════════════
   Fußpflege Kifel — Wegweiser, Grenzfälle, Abgrenzung, Experten-Zitat

   Eigene Datei, damit stil.css unangetastet bleibt.

   Aufbau nach dem Muster der LILIVA-Seite: ein ruhiges Bildraster, je Kachel
   Bild – Nummer – Titel – Rolle – zwei, drei Zeilen. Die erste Fassung war
   eine Wand aus 27 Textpillen; Christians Urteil: zu unübersichtlich.

   KEINE Warnfarben. Die Fassung mit Terrakotta-Kasten und Warndreieck ist am
   26.08. wieder herausgeflogen: »das soll deutlich lockerer sein, wir wollen
   keine Kunden abwerben«. Wer in den Melde-Fall läuft, wird um einen Anruf
   gebeten, nicht gewarnt — deshalb Gold wie überall sonst.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Dritte Goldstufe. --gold-text (#8A6E38) reicht auf der weissen Creme
     (4,6 : 1), fällt auf der getönten Fläche --creme-2 aber auf 4,24 : 1
     durch. Gemessen, nicht geschätzt: dieser Ton misst dort 4,93 : 1. */
  --gold-tief:    #7E6431;
}

/* ══ Der Wegweiser: ein Kasten, drei Schritte ══════════════════════════

   Aufbau wie der Barriere-Check auf der LILIVA-Seite: alles in einem
   zentrierten Kasten, die Schritte werden per hidden getauscht. Die erste
   Fassung zeigte alle Fragen gleichzeitig als Textpillen — Christians Urteil:
   viel zu unübersichtlich.
   ══════════════════════════════════════════════════════════════════════ */

.wgc-kasten {
  max-width: 52rem;
  margin-inline: auto;
  background: var(--creme);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: clamp(2rem, 4.4vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  /* Feste Mindesthöhe, sonst springt der Kasten bei jedem Schrittwechsel */
  min-height: 27rem;
  display: grid;
  align-items: center;
}
/* Blasser Goldschein oben rechts — dieselbe Idee wie der Aqua-Schein bei LILIVA */
.wgc-kasten::before {
  content: "";
  position: absolute; inset: -38% -18% auto auto;
  width: 26rem; height: 26rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(193,161,103,.20) 0%, transparent 68%);
  pointer-events: none;
}
.wgc-schritt { position: relative; z-index: 1; }
.wgc-schritt .mono { margin: 0 0 1.1rem; }
.wgc-schritt h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); margin-bottom: 1.1rem; }

.wgc-vorspann {
  margin: 0 auto 2rem;
  max-width: 46ch;
  color: var(--tinte-leise);
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  line-height: 1.65;
}
.wgc-pfeil {
  width: 15px; height: 15px; margin-left: .55rem;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
#wgc-start { display: inline-flex; align-items: center; }

/* ── Fragenkopf mit Fortschritt ────────────────────────────────────── */
.wgc-kopf { margin-bottom: 2rem; }
.wgc-zaehler {
  display: block;
  font: 400 .68rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: .9rem;
}
.wgc-zaehler b { color: var(--gold-tief); font-weight: 400; }
.wgc-schiene {
  display: block; width: min(18rem, 70%); height: 2px;
  margin-inline: auto;
  background: var(--linie-stark); border-radius: 2px; overflow: hidden;
}
.wgc-schiene i {
  display: block; height: 100%; width: 25%;
  background: var(--gold); border-radius: 2px;
  transition: width .5s var(--weich);
}

#wgc-frage {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15;
  max-width: 22ch; margin: 0 auto 2rem;
}

/* ── Die Antworten ─────────────────────────────────────────────────── */
.wgc-antworten { display: grid; gap: .65rem; max-width: 34rem; margin-inline: auto; }

.wgc-antwort {
  width: 100%; text-align: left;
  min-height: 44px;
  padding: 1rem 1.3rem;
  background: var(--creme-2);
  border: 1px solid var(--linie);
  border-radius: 10px;
  font: inherit; font-size: .97rem; line-height: 1.45;
  color: var(--tinte-leise);
  display: flex; align-items: center; gap: .95rem;
  cursor: pointer;
  transition: border-color .3s var(--weich), background .3s var(--weich),
              transform .3s var(--auf), color .3s var(--weich);
}
.wgc-antwort:hover {
  border-color: var(--gold); background: var(--creme);
  color: var(--tinte); transform: translateX(3px);
}
.wgc-antwort:active { transform: translateX(3px) translateY(1px); }
.wgc-punkt {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--linie-stark);
  transition: background .3s var(--weich), transform .3s var(--auf);
}
.wgc-antwort:hover .wgc-punkt { background: var(--gold); transform: scale(1.35); }
.wgc-antwort:focus-visible { outline: 2px solid var(--espresso); outline-offset: 2px; }

.wgc-zurueck {
  margin-top: 1.6rem;
  border: 0; background: none; padding: .5rem 1rem;
  min-height: 44px;
  font: inherit; font-size: .88rem;
  color: var(--tinte-leise);
  text-decoration: underline; text-decoration-color: var(--linie-stark);
  text-underline-offset: 4px;
  cursor: pointer;
}
.wgc-zurueck:hover { color: var(--tinte); text-decoration-color: var(--gold); }

/* ── Das Ergebnis ──────────────────────────────────────────────────── */
.wgc-erg { text-align: center; }
.wgc-erg + .wgc-erg {
  margin-top: 2.2rem; padding-top: 2.2rem; border-top: 1px solid var(--linie);
}

.wgc-erg-bild {
  border-radius: 14px; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--creme-3);
  /* Über die volle Kastenbreite füllt das Bild allein den Bildschirm und
     drückt Preis und Knopf unter die Falz. */
  max-width: 32rem;
  margin: 0 auto 1.6rem;
}
.wgc-erg-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wgc-marke {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 400 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-tief);
  margin: 0 0 .9rem;
}
.wgc-marke svg { width: 15px; height: 15px; flex: none; }

.wgc-erg h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin: 0 0 .7rem;
}
.wgc-preis {
  display: flex; align-items: baseline; justify-content: center; gap: .8rem;
  margin: 0 0 1.2rem;
}
.wgc-preis b { font: 400 1.75rem/1 var(--serif); color: var(--gold-text); }
.wgc-preis span {
  font: 400 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinte-leise);
}
.wgc-text { margin: 0 auto 1.2rem; max-width: 52ch; color: var(--tinte-leise); }
.wgc-text b { color: var(--tinte); font-weight: 600; }

.wgc-weil {
  margin: 0 auto 1.2rem; max-width: 52ch;
  font-size: .9rem; color: var(--tinte-leise);
}
.wgc-weil b { color: var(--tinte); font-weight: 500; }

.wgc-zusatz {
  margin: 0 auto 1.2rem; max-width: 52ch;
  background: var(--creme-2);
  border-radius: 10px;
  padding: .9rem 1.2rem;
  font-size: .92rem; color: var(--tinte-leise);
  text-align: left;
}
.wgc-zusatz b { color: var(--tinte); font-weight: 600; }

.wgc-liste {
  margin: 0 auto 1.2rem; padding: 0; list-style: none;
  max-width: 52ch; text-align: left;
  display: grid; gap: .8rem;
}
.wgc-liste li {
  position: relative; padding-left: 1.3rem;
  font-size: .95rem; color: var(--tinte-leise);
}
.wgc-liste li::before {
  content: ""; position: absolute; left: 0; top: .55rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
}
.wgc-liste b { color: var(--tinte); font-weight: 600; }

.wgc-knoepfe {
  display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center;
  margin-top: 1.6rem;
}

/* Die Melde-Fassung ist bewusst KEIN Alarm: Gold wie überall sonst, keine
   Terrakotta-Warnfläche. Wer hier landet, soll anrufen, nicht erschrecken. */
.wgc-erg.ist-melden .wgc-marke { color: var(--gold-tief); }
.wgc-erg.ist-melden .wgc-liste li { padding: .1rem 0 .1rem 1.3rem; }

.wgc-fuss {
  margin: 1.1rem auto 0; max-width: 46ch;
  font-size: .85rem; color: var(--tinte-leise);
}

/* Symbole in den Knöpfen (Telefon, WhatsApp) auf eine Größe bringen */
.wgc-knoepfe .knopf svg { width: 16px; height: 16px; margin-right: .5rem; flex: none; }
.wgc-knoepfe .knopf { display: inline-flex; align-items: center; }
.wgc-knoepfe .knopf svg:not([fill="none"]) { fill: currentColor; }

/* ══ Das Zitat von Olesja mit dem WhatsApp-Weg ═════════════════════════ */

.experte {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 62rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: start;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--creme);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
}
.experte-bild {
  flex: none;
  width: clamp(64px, 9vw, 92px); height: clamp(64px, 9vw, 92px);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--linie-stark);
  background: var(--creme-3);
}
.experte-bild img { width: 100%; height: 100%; object-fit: cover; }
.experte-zitat {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.42;
  margin: 0 0 1rem; text-wrap: pretty;
}
.experte-zitat::before { content: "„"; color: var(--gold-tief); }
.experte-zitat::after  { content: "“"; color: var(--gold-tief); }
.experte-name { font: 400 .68rem/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinte-leise); margin: 0 0 1.2rem; }
.experte-name b { display: block; color: var(--tinte); font-weight: 400; letter-spacing: .1em; }
.experte-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.experte-klein { font-size: .85rem; color: var(--tinte-leise); margin: .8rem 0 0; }

/* WhatsApp-Grün eine Stufe dunkler als das Markengrün: mit cremefarbener
   Schrift misst #1F8A4C nur 4,2 : 1, #1A7A43 dagegen 5,15 : 1. */
.knopf-wa { --k-schrift: var(--creme); border-color: #1A7A43; background: #1A7A43; color: var(--creme); }
.knopf-wa::before { background: var(--espresso); }
.knopf-wa:hover { color: var(--creme); border-color: var(--espresso); }
.knopf-wa svg { width: 16px; height: 16px; fill: currentColor; margin-right: .5rem; }

@media (max-width: 40rem) { .experte { grid-template-columns: 1fr; } }

/* ══ Abgrenzung bei den Preisen ════════════════════════════════════════ */

/* Eigener, breiterer Kasten neben der schmalen Textspalte. Kein transform:
   die Auftauch-Regel [data-auf].da setzt transform:none und würde jede
   Verschiebung wieder aufheben. */
.breiter { max-width: 64rem; margin-inline: auto; }

.grenze {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.6rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 46rem) { .grenze { grid-template-columns: 1fr; } }

.grenze-feld {
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: clamp(1.3rem, 3vw, 1.8rem);
  background: var(--creme);
}
/* Dieselbe Spalte, nur ohne Alarmton: sandfarben statt Terrakotta. */
.grenze-feld.ist-melden { border-color: var(--linie-stark); background: var(--creme-2); }
.grenze-feld.ist-melden .wg-liste li::before { background: var(--gold); }
.grenze-feld h3 {
  font-family: var(--grotesk); font-weight: 600; font-size: 1.05rem; letter-spacing: 0;
  margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem;
}
.grenze-feld h3 svg { width: 17px; height: 17px; flex: none; }
.grenze-feld > p { font-size: .9rem; color: var(--tinte-leise); margin: 0 0 1.1rem; }
.grenze-feld .wg-liste li { font-size: .92rem; }

.ab-erklaerung {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--linie);
  padding-top: clamp(1.3rem, 3vw, 1.8rem);
  display: grid; gap: .9rem;
}
.ab-erklaerung h3 {
  font-family: var(--grotesk); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; margin: 0;
}
.ab-erklaerung p { margin: 0; color: var(--tinte-leise); max-width: 64ch; }
.ab-marke {
  display: inline-block;
  font: 400 .95rem/1 var(--serif);
  color: var(--gold-text);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: .3rem .7rem;
  margin-right: .4rem;
}

/* Die Regeln für .hinweis a und .abs-creme .mono standen bis zum 27.08.2026
   hier. Sie gelten für die ganze Website, nicht nur für den Wegweiser, und
   sind deshalb nach stil.css umgezogen. Seiten, die nur stil.css laden,
   hatten sie sonst nicht — und die Kleinzeile fiel dort mit 4,24 : 1 durch. */