/* Coffee Explorer (Kaffee-Finder) – Explorer Coffee. Farben und Schriften wie im Startseiten-Entwurf. */
.kf {
  --kf-creme: #f9f7f5;
  --kf-papier: #ffffff;
  --kf-espresso: #1e1611;
  --kf-text: #404040;
  --kf-leise: #6f6a66;
  --kf-terra: #8a5a34;
  --kf-terra-hell: #f1e7dd;
  --kf-linie: #e4ddd6;
  --kf-display: "Vollkorn", Georgia, "Times New Roman", serif;
  --kf-body: "Lato", Arial, sans-serif;
  font-family: var(--kf-body);
  color: var(--kf-text);
  max-width: 880px;
  margin: 0 auto;
}
.kf * { box-sizing: border-box; }

.kf-schritte { list-style: none; display: flex; align-items: center; gap: 8px; padding: 0; margin: 0 0 32px; flex-wrap: wrap; }
.kf-schritte li { display: flex; align-items: center; gap: 8px; }
.kf button { margin: 0; }
.kf-schritte li:not(:last-child)::after { content: ""; width: 32px; height: 1px; background: var(--kf-linie); }
.kf-schritte button:not(.kf-ziel) { box-sizing: border-box; flex: none; width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; border-radius: 50%; border: 1px solid var(--kf-linie); background: var(--kf-papier); color: var(--kf-leise); font: 700 14px/1 var(--kf-body); cursor: pointer; }
.kf-schritte button:not(.kf-ziel):hover { border-color: var(--kf-terra); }
.kf-schritte .uebersprungen button:not(.kf-ziel) { background: var(--kf-linie); border-color: var(--kf-linie); color: #a8a19b; cursor: not-allowed; }
.kf-schritte .fertig button:not(.kf-ziel) { background: var(--kf-terra-hell); border-color: var(--kf-terra); color: var(--kf-terra); }
.kf-schritte .aktiv button:not(.kf-ziel) { background: var(--kf-espresso); border-color: var(--kf-espresso); color: var(--kf-creme); }
@media (max-width: 480px) { .kf-schritte { gap: 4px; } .kf-schritte li { gap: 4px; } .kf-schritte li:not(:last-child)::after { width: 8px; } .kf-schritte button:not(.kf-ziel) { width: 30px; height: 30px; } }
/* Kursiv: echte Vollkorn Italic (assets/fonts/vollkorn/Vollkorn-Italic-latin-wght.woff2, OFL), nichts künstlich schräg gestellt. */
.kf-ziel { background: none; border: 0; padding: 4px 2px; cursor: pointer; font: italic 600 17px/1 var(--kf-display); color: var(--kf-leise); }
.kf-ziel:hover { color: var(--kf-terra); text-decoration: underline; }
.kf-ziel:focus-visible { outline: 2px solid var(--kf-terra); outline-offset: 2px; }
.kf-schritte .aktiv .kf-ziel { color: var(--kf-terra); }

.kf-dach { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kf-terra); }
.kf-frage__titel { margin: 0 0 8px; font: 600 clamp(28px, 4.5vw, 40px)/1.15 var(--kf-display); color: var(--kf-espresso); text-wrap: balance; }
.kf-frage__hinweis { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: var(--kf-leise); max-width: 60ch; }

.kf-optionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.kf-option { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 18px 20px; border: 1px solid var(--kf-linie); border-radius: 10px; background: var(--kf-papier); cursor: pointer; font-family: var(--kf-body); transition: border-color .15s, transform .15s; }
.kf-option strong { font: 600 20px/1.2 var(--kf-display); color: var(--kf-espresso); }
.kf-option span { font-size: 14px; color: var(--kf-leise); }
.kf-option:hover { border-color: var(--kf-terra); transform: translateY(-1px); }
.kf-option:focus-visible, .kf-schritte button:focus-visible, .kf-link:focus-visible, .kf-knopf:focus-visible { outline: 2px solid var(--kf-terra); outline-offset: 2px; }
.kf-option.gewaehlt { border-color: var(--kf-terra); box-shadow: inset 0 0 0 1px var(--kf-terra); background: var(--kf-terra-hell); }
.kf-option--neutral { background: transparent; border-style: dashed; }

.kf-fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--kf-linie); }
.kf-zaehler { margin: 0; font-size: 14px; color: var(--kf-leise); font-variant-numeric: tabular-nums; }
.kf-zaehler strong { color: var(--kf-espresso); }
.kf-link { background: none; border: 0; padding: 4px 0; font: 700 15px var(--kf-body); color: var(--kf-terra); cursor: pointer; }
.kf-link:hover { text-decoration: underline; }

.kf-karte { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--kf-linie); border-radius: 12px; background: var(--kf-papier); min-width: 0; }
.kf-karte h3 { margin: 0; font: 600 26px/1.15 var(--kf-display); color: var(--kf-espresso); }
.kf-karte--top { padding: clamp(24px, 4vw, 40px); background: var(--kf-espresso); border-color: var(--kf-espresso); color: #e9e2db; }
.kf-karte--top h3 { font-size: clamp(34px, 5vw, 48px); color: #fff; }
.kf-karte--top .kf-dach { color: #d9a77c; }
.kf-karte__marken { display: flex; gap: 6px; flex-wrap: wrap; }
.kf-karte__marken span { font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; background: var(--kf-terra-hell); color: var(--kf-terra); }
.kf-karte--top .kf-karte__marken span { background: rgba(255,255,255,.1); color: #f1d9c3; }
.kf-karte__herkunft { margin: 0; font-size: 14px; color: var(--kf-leise); }
.kf-karte--top .kf-karte__herkunft { color: #b9ada3; }
.kf-karte__profil { margin: 0; font: italic 400 18px/1.5 var(--kf-display); }
.kf-karte--top .kf-karte__profil { font-size: 21px; max-width: 46ch; }
.kf-karte__warum, .kf-karte__tipp { margin: 0; font-size: 15px; line-height: 1.55; }
.kf-karte__kauf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.kf-preis { font: 700 20px var(--kf-body); color: var(--kf-espresso); font-variant-numeric: tabular-nums; }
.kf-karte--top .kf-preis { color: #fff; }
.kf-preis small { display: block; font-size: 12px; font-weight: 400; color: var(--kf-leise); }
.kf-knopf { display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--kf-terra); color: #fff; font-weight: 700; text-decoration: none; }
.kf-knopf:hover { background: #74482a; }

.kf-int { display: inline-flex; align-items: center; gap: 3px; color: var(--kf-terra); }
.kf-int__label { margin-right: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kf-int i { width: 18px; height: 6px; border-radius: 3px; background: currentColor; opacity: .22; }
.kf-int i.an { opacity: 1; }
.kf-karte--top .kf-int { color: #d9a77c; }
.kf-int__zahl { margin-left: 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.kf-alternativen__titel { margin: 36px 0 14px; font: 600 24px/1.2 var(--kf-display); color: var(--kf-espresso); }
.kf-alternativen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.kf-rest { margin: 20px 0 0; font-size: 15px; line-height: 1.6; }
.kf-rest a { color: var(--kf-terra); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .kf-option { transition: none; } .kf-option:hover { transform: none; } }

.kf-antworten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; }
.kf-antworten__label { font-size: 14px; color: var(--kf-leise); margin-right: 4px; }
.kf-chip { margin: 0; padding: 6px 12px; line-height: 1.3; border: 1px solid var(--kf-linie); border-radius: 999px; background: var(--kf-papier); font: 700 13px var(--kf-body); color: var(--kf-espresso); cursor: pointer; }
.kf-chip::after { content: " ✎"; color: var(--kf-terra); font-weight: 400; }
.kf-chip:hover { border-color: var(--kf-terra); }
.kf-chip:focus-visible { outline: 2px solid var(--kf-terra); outline-offset: 2px; }
.kf-chip--offen { border-style: dashed; color: var(--kf-leise); font-weight: 400; }

.kf-option--mehrfach { position: relative; padding-right: 48px; }
.kf-option--mehrfach::after { content: ""; position: absolute; top: 18px; right: 18px; width: 18px; height: 18px; border: 1.5px solid var(--kf-linie); border-radius: 4px; background: var(--kf-papier); }
.kf-option--mehrfach.gewaehlt::after { content: "✓"; border-color: var(--kf-terra); background: var(--kf-terra); color: #fff; font: 700 13px/18px var(--kf-body); text-align: center; }
.kf-knopf--weiter { border: 0; cursor: pointer; font-family: var(--kf-body); font-size: 15px; }

.kf-schontipp { margin-top: 40px; padding: clamp(20px, 3vw, 32px); border-radius: 14px; background: var(--kf-terra-hell); border: 1px solid var(--kf-terra); }
.kf-schontipp .kf-alternativen__titel { margin-top: 0; }
.kf-schontipp .kf-frage__hinweis { margin-bottom: 18px; }

/* Vollkorn: Versalziffern in Überschriften (sonst sieht "No1" wie "NoI" aus). Am Ende, damit die font-Kurzschreibweise es nicht zurücksetzt. */
.kf h2, .kf h3 { font-variant-numeric: lining-nums; }

/* Einbau im Theme (11/2026): Seitenkopf, Produktbild, Preis aus WooCommerce, Prüfliste für Admins */
.page-kaffee-finder { display: flow-root; background: #fff; }
.kf-seitentitel { margin: 0 0 32px; text-transform: none; }
.kf-band { padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 8vw, 96px); background: #f9f7f5; }
.kf-kopf { max-width: 880px; margin: 0 auto 28px; text-align: left; font-family: "Lato", Arial, sans-serif; }
.kf-kopf .kf-dach { color: #8a5a34; }
.kf-kopf__titel { margin: 0 0 12px; font-family: "Vollkorn", Georgia, serif; font-weight: 600; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.12; text-transform: none; color: #404040; text-wrap: balance; }
.kf-kopf__text { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: #6f6a66; max-width: 60ch; }
.kf-kopf__text p { margin: 0; }
.kf-karte { position: relative; }
.kf-karte__bild { display: block; align-self: flex-start; width: 96px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #f1e7dd; }
.kf-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kf-karte--top.kf-karte--bild { display: grid; grid-template-columns: 1fr minmax(160px, 240px); column-gap: 32px; align-items: start; }
.kf-karte--top.kf-karte--bild > * { grid-column: 1; }
.kf-karte--top .kf-karte__bild { grid-column: 2; grid-row: 1 / span 8; width: 100%; border-radius: 12px; background: #2b211b; }
.kf-karte--top .kf-karte__kauf { margin-top: 8px; }
.kf-karte--top .kf-preis small { color: #b9ada3; }
@media (max-width: 640px) {
  .kf-karte--top.kf-karte--bild { display: flex; }
  .kf-karte--top .kf-karte__bild { width: 140px; }
}
.kf-knopf, .kf-knopf:visited { color: #fff; }
.kf-pruefliste { max-width: 880px; margin: 0 auto 24px; padding: 12px 16px; border: 1px dashed #8a5a34; border-radius: 8px; background: #fff; font-size: 14px; }
.kf-pruefliste ul { margin: 6px 0 0; padding-left: 20px; }
/* Theme setzt h2/h3 in Versalien: im Finder normale Schreibweise */
.kf h2, .kf h3, .kf h4 { text-transform: none; letter-spacing: normal; }

/* Hover: das Theme setzt für jedes button:hover Blauschwarz mit weißer Schrift (!important); im Finder gelten eigene Zustände */
.kf :where(button):not(.kf-knopf):hover { background: none !important; color: inherit !important; }
.kf .kf-knopf:hover { background: #74482a !important; color: #fff !important; }
.kf .kf-option:hover { background: var(--kf-papier) !important; border-color: var(--kf-terra); color: var(--kf-text) !important; }
.kf .kf-option.gewaehlt:hover { background: var(--kf-terra-hell) !important; }
.kf .kf-schritte button:not(.kf-ziel):hover { background: var(--kf-papier) !important; border-color: var(--kf-terra); color: var(--kf-terra) !important; }
.kf .kf-schritte .fertig button:not(.kf-ziel):hover { background: var(--kf-terra-hell) !important; }
.kf .kf-schritte .aktiv button:not(.kf-ziel):hover { background: var(--kf-espresso) !important; border-color: var(--kf-espresso); color: var(--kf-creme) !important; }
.kf .kf-schritte .uebersprungen button:not(.kf-ziel):hover { background: var(--kf-linie) !important; border-color: var(--kf-linie); color: #a8a19b !important; }
.kf .kf-ziel:hover, .kf .kf-link:hover { color: var(--kf-terra) !important; }

/* Geschmacks-Schilder auf den Ergebniskarten: Farben aus dem Shop (--ec-taste-*, sass/explorer/_taste-colors.scss) */
.kf-karte__noten { display: flex; gap: 6px; flex-wrap: wrap; }
.kf-note { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: #fff; background: var(--ec-taste-neutral, #333447); }
.kf-note--schoko { background: var(--ec-taste-kakao, #633826); }
.kf-note--fruchtig { background: var(--ec-taste-steinobst, #c13828); }
.kf-note--wuerzig { background: var(--ec-taste-gewuerze, #933311); }
.kf-note--mild { background: var(--ec-taste-sanft, #e6d5bc); color: var(--ec-taste-sanft-text, #15161f); box-shadow: inset 0 0 0 1px var(--ec-taste-sanft-border, #cdb89a); }
.kf-note--aroma { background: var(--ec-taste-blueten, #7251bc); }
.kf-note--fass { background: var(--ec-taste-roestig, #494c49); }

/* „Noch unentschlossen?“ am Ende des Ergebnisses; Text und Links kommen aus der Seite (Gruppe mit Klasse kf-unentschlossen) */
.kf-unentschlossen-box { margin-top: 36px; padding: clamp(22px, 3.5vw, 34px); border-radius: 14px; background: var(--kf-terra-hell); border: 1px solid var(--kf-linie); }
.kf-unentschlossen-box > *:first-child { margin-top: 0; }
.kf-unentschlossen-box > *:last-child { margin-bottom: 0; }
.kf-unentschlossen-box h2, .kf-unentschlossen-box h3 { margin: 0 0 8px; font: 600 24px/1.2 var(--kf-display); color: var(--kf-espresso); text-transform: none; }
.kf-unentschlossen-box p { margin: 0 0 14px; line-height: 1.6; }
.kf-unentschlossen-box .wp-block-buttons { gap: 12px; }
.kf-unentschlossen-box .wp-block-button__link { margin: 0; padding: 12px 22px; border-radius: 999px; background: var(--kf-terra); color: #fff; font-weight: 700; text-decoration: none; }
.kf-unentschlossen-box .wp-block-button__link:hover { background: #74482a; color: #fff; }
.kf-unentschlossen-box .is-style-outline .wp-block-button__link { background: transparent; border: 2px solid var(--kf-terra); padding: 10px 20px; color: var(--kf-terra); }

/* Kopf: Kurzhinweis unter der Einleitung */
.kf-kopf__text p { margin: 0 0 8px; }
.kf-kopf__text .kf-kurz { font: 700 12px/1.3 "Lato Bold", "Lato", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8a5a34; }

/* Begleittext und FAQ unter dem Finder (aus dem Seiteninhalt nach dem Block „Mehr“) */
.kf-unten { padding: clamp(32px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); background: #fff; }
.kf-unten .entry-content { max-width: 880px; margin: 0 auto !important; }
.kf-unten h2 { margin: 0 0 14px; font: 600 clamp(1.5rem, 3vw, 2rem)/1.15 "Vollkorn", Georgia, serif; text-transform: none; color: #404040; }
.kf-unten h3 { margin: 24px 0 8px; font: 600 1.25rem/1.25 "Vollkorn", Georgia, serif; text-transform: none; color: #404040; }
.kf-unten p { line-height: 1.7; }
.kf-unten .wp-block-details { margin: 0 0 10px; padding: 14px 18px; border: 1px solid #e4ddd6; border-radius: 10px; }
.kf-unten .wp-block-details summary { cursor: pointer; font-weight: 700; }
.kf-unten .wp-block-details[open] summary { margin-bottom: 8px; }
.kf-karte--top .kf-note { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }

/* Link „So funktioniert der Finder“ im Kurzhinweis und Sprungziel unter dem Finder (Abstand zur festen Navigation) */
.kf-kopf__text .kf-kurz a { color: #8a5a34; text-decoration: underline; text-underline-offset: 3px; }
.kf-kopf__text .kf-kurz a:hover { color: #1e1611; }
#so-funktioniert { scroll-margin-top: calc(var(--ec-nav-h, 72px) + 1.5rem); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Kopf: Einleitung und Link unter der H1 (weißer Bereich), Kurzhinweis unter der H2 (Farbbereich) */
.kf-einleitung { max-width: 60ch; margin: -12px 0 0; padding-bottom: 36px; }
.kf-einleitung p { margin: 0 0 12px; font-size: 17px; line-height: 1.65; color: #6f6a66; }
.kf-einleitung .kf-sprung { margin: 0; }
.kf-einleitung .kf-sprung a { font: 700 13px/1.3 "Lato Bold", "Lato", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8a5a34; text-decoration: none; }
.kf-einleitung .kf-sprung a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kf-seitenkopf .kf-seitentitel { margin-bottom: 14px; }
.kf-kopf .kf-kurz { margin: 0; font: 700 12px/1.3 "Lato Bold", "Lato", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8a5a34; }
.kf-kopf .kf-kurz a { color: #8a5a34; text-decoration: underline; text-underline-offset: 3px; }
.kf-kopf .kf-kurz a:hover { color: #1e1611; }

/* Fokus auf die Frage: Der Finder steht als weiße Karte auf dem Cremebereich, die H2 darüber ist ruhiger */
.kf-kopf__titel { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 6px; }
.kf-kopf { margin-bottom: 22px; }
.kf { padding: clamp(22px, 4vw, 44px); background: #fff; border: 1px solid var(--kf-linie); border-radius: 18px; box-shadow: 0 8px 28px rgba(30, 22, 17, .06); }
.kf-option { background: var(--kf-creme); }
.kf-option:hover { background: var(--kf-papier) !important; }
.kf .kf-option:hover { background: var(--kf-papier) !important; }
.kf .kf-option.gewaehlt:hover { background: var(--kf-terra-hell) !important; }
.kf-karte:not(.kf-karte--top) { background: var(--kf-creme); }
.kf-frage__titel { margin-bottom: 10px; }
.kf-dach { margin-bottom: 6px; }