/* ============================================================================
 * DIE HILFE - Knopf, Fragezeichen, Blase und das Handbuch
 * ============================================================================
 * Angelegt am 23.10.2026. Gehört zu module/ol.hilfe.inc.php,
 * media/js/ol-hilfe.js und module/ol/handbuch.php.
 *
 * Eigene Datei und nicht style.css: Die ist 299 KB gross und soll nicht
 * weiterwachsen; die Bereichsdateien wiederum werden daraus erzeugt und
 * dürfen nicht von Hand angefasst werden.
 * ========================================================================= */

/* Nur für Vorleseprogramme. Gab es im Shop noch nicht - der Schalter braucht
   es, weil sein sichtbarer Inhalt nur ein Fragezeichen ist. */
.ol-versteckt {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Die beiden Symbole rechts von der Suche ────────────────────────────────
   Umgebaut am 23.10.2026. Justin: "bitte schön gestalten und nicht so
   unschön." Vorher: das alte FAQ-Bild mit eingebranntem Wort "FAQ", darunter
   "HILFE", daneben ein loser Kreis als Schalter.

   Jetzt zwei Einträge in derselben Bauart wie NEWS. Die Grundgestaltung
   (.util-btn) kommt aus style.css und wird hier nur ergänzt: Der Schalter ist
   ein <button> und braucht deshalb, was ein <a> von Haus aus mitbringt. */
.util-btn-schalter {
    background: none; border: 0; cursor: pointer; font: inherit;
    /* .util-btn setzt Schriftgrösse und Grossbuchstaben - ein button erbt das
       nicht von selbst. */
    font-size: .52rem; letter-spacing: .07em; text-transform: uppercase;
    font-family: inherit;
}

/* Eingeschaltet: Das Symbol leuchtet gold und bekommt einen weichen Schein.
   So sieht man auf jeder Seite auf einen Blick, dass die Erklärungen an sind -
   auch wenn gerade keine Fragezeichen zu sehen sind, weil es für diese Seite
   noch keine gibt. */
.util-btn-schalter[aria-pressed="true"] {
    color: var(--gold-p, #e2ba57);
    background: rgba(184, 145, 42, .22);
}
.util-btn-schalter[aria-pressed="true"] svg {
    filter: drop-shadow(0 0 5px rgba(212, 168, 67, .75));
}
.util-btn-schalter[aria-pressed="true"] .hilfe-wort::after {
    content: " an";
}

/* ── Das Fragezeichen neben einem Element ──────────────────────────────── */
.olh-frage {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin: 0 4px; padding: 0;
    vertical-align: middle; flex: 0 0 auto;
    border: 0; border-radius: 50%; cursor: help;
    font: 700 12px/1 Georgia, serif;
    background: linear-gradient(180deg, #d4a843, #b8912a); color: #2a2010;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.olh-frage:hover { background: linear-gradient(180deg, #e2ba57, #c89c2f); }
.olh-frage:focus-visible { outline: 2px solid #8b1f1f; outline-offset: 2px; }

/* ── Die Blase mit der Erklärung ───────────────────────────────────────── */
.olh-blase {
    position: absolute; z-index: 9500; max-width: min(360px, calc(100vw - 24px));
    padding: 14px 34px 13px 16px; border-radius: 12px;
    background: #fdf8ee; color: #2a2110;
    border: 1px solid rgba(184, 145, 42, .6);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
    font-size: .94rem; line-height: 1.55;
}
.olh-blase-text { margin: 0 0 8px; }
.olh-blase-text:last-child { margin-bottom: 0; }
.olh-blase-mehr {
    display: inline-block; font-weight: 700; text-decoration: none;
    color: #8b1f1f; border-bottom: 1px solid rgba(139, 31, 31, .35);
}
.olh-blase-zu {
    position: absolute; top: 6px; right: 8px; width: 24px; height: 24px;
    border: 0; background: none; cursor: pointer; color: #8a7340;
    font: 400 20px/1 Georgia, serif;
}
.olh-blase-zu:hover { color: #2a2110; }

/* ── Das Handbuch ──────────────────────────────────────────────────────────
   KEIN Hero-Bild. Justin: "Auf der Hilfeseite wird es kein Herobild, damit
   direkt die Suche zu sehen ist, groß und schön und darunter die einzelnen
   Themen-Bereiche der Suche." */
.hb-kopf { padding: 26px 0 6px; text-align: center; }
.hb-h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 4vw, 2.4rem); }
.hb-lead { margin: 0 auto 22px; max-width: 620px; opacity: .85; }

.hb-suche { max-width: 720px; margin: 0 auto 10px; }
.hb-suche form { display: flex; gap: 10px; }
.hb-suche input[type="search"] {
    flex: 1 1 auto; min-width: 0;
    /* 16px, sonst zoomt Safari am iPhone beim Antippen in das Feld hinein. */
    font-size: 16px; padding: 15px 18px; border-radius: 12px;
    border: 2px solid #d4a843; background: #fdf8ee; color: #2a2110;
}
.hb-suche input[type="search"]:focus {
    outline: none; border-color: #b8912a;
    box-shadow: 0 0 0 4px rgba(212, 168, 67, .28);
}
.hb-suche button {
    flex: 0 0 auto; padding: 0 24px; border-radius: 12px; cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .2); font-weight: 700; font-size: 1rem;
    background: linear-gradient(180deg, #d4a843, #b8912a); color: #2a2010;
}
.hb-suche button:hover { background: linear-gradient(180deg, #e2ba57, #c89c2f); }
.hb-suche-hinweis { max-width: 720px; margin: 0 auto 26px; font-size: .88rem; opacity: .7; text-align: center; }

/* Die Themenbereiche als Kacheln. */
.hb-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.hb-kachel {
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 18px 16px; border-radius: 13px; text-decoration: none;
    border: 1px solid rgba(184, 145, 42, .4);
    background: linear-gradient(160deg, rgba(184, 145, 42, .10), rgba(255, 255, 255, .5));
    transition: border-color .15s, transform .15s;
}
.hb-kachel:hover { border-color: #b8912a; transform: translateY(-2px); }
.hb-kachel-symbol { font-size: 1.7rem; line-height: 1; }
.hb-kachel-name { font-family: Georgia, serif; font-size: 1.12rem; font-weight: 700; }
.hb-kachel-kurz { font-size: .9rem; line-height: 1.5; opacity: .85; }
.hb-kachel-zahl { margin-top: 4px; font-size: .82rem; opacity: .65; }

/* Trefferliste und Artikelliste. */
.hb-treffer { list-style: none; margin: 0 0 24px; padding: 0; }
.hb-treffer > li { padding: 12px 0; border-bottom: 1px solid rgba(184, 145, 42, .25); }
.hb-treffer a { font-weight: 700; text-decoration: none; }
.hb-treffer-bereich { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.hb-treffer-kurz { margin: 3px 0 0; font-size: .92rem; opacity: .85; }
.hb-leer { padding: 18px; border-radius: 10px; background: rgba(184, 145, 42, .1); }

@media (max-width: 620px) {
    .hb-suche form { flex-direction: column; }
    .hb-suche button { padding: 13px 24px; }
}

/* ── Ein einzelner Artikel ──────────────────────────────────────────────── */
.hb-artikel-kopf { padding: 18px 0 4px; }
.hb-suche--klein { margin-bottom: 18px; }
.hb-suche--klein input[type="search"] { padding: 11px 14px; border-width: 1px; }
.hb-suche--klein button { padding: 0 18px; font-size: .92rem; }

/* Der Inhalt kommt aus der Pflegeseite. Etwas Luft zwischen den Absätzen und
   lesbare Zwischenüberschriften - mehr soll hier nicht geregelt werden, damit
   eine Erklärung aussieht wie der Rest des Shops. */
.hb-inhalt h2 { margin: 26px 0 8px; font-size: clamp(1.15rem, 2.6vw, 1.5rem); }
.hb-inhalt h3 { margin: 20px 0 6px; font-size: 1.08rem; font-weight: 700; }
.hb-inhalt p { margin: 0 0 12px; }
.hb-inhalt ul, .hb-inhalt ol { margin: 0 0 14px; padding-left: 22px; }
.hb-inhalt li { margin: 0 0 6px; }
.hb-inhalt img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
/* Ein Schritt-für-Schritt-Weg: nummerierte Kreise wie auf der Gutscheinseite. */
.hb-inhalt .hb-weg { counter-reset: hbw; list-style: none; padding: 0; margin: 0 0 16px; }
.hb-inhalt .hb-weg > li {
    position: relative; counter-increment: hbw;
    padding: 0 0 0 44px; margin: 0 0 14px; min-height: 30px;
}
.hb-inhalt .hb-weg > li::before {
    content: counter(hbw); position: absolute; left: 0; top: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
    background: linear-gradient(180deg, #d4a843, #b8912a); color: #2a2010;
}
/* Ein Kasten für "Wo finde ich das?" - die Frage, die Justin als wichtigste
   genannt hat. */
.hb-inhalt .hb-wo {
    margin: 16px 0; padding: 13px 15px 11px; border-radius: 10px;
    border: 1px solid rgba(184, 145, 42, .4);
    background: rgba(184, 145, 42, .10);
}
.hb-inhalt .hb-wo > strong { display: block; margin-bottom: 5px; }

.hb-zurueck { margin: 24px 0 8px; }
.hb-zurueck a { text-decoration: none; font-weight: 700; }