/* Faktura-Hilfe – in den Standardfarben von KreativVolt:
   Teal #03BEBC · Gelb #FCC240 · Navy #091C3A */
:root {
  --hh-teal: #03BEBC; --hh-teal-dunkel: #028F8D; --hh-teal-hell: #E4F8F7;
  --hh-gelb: #FCC240; --hh-gelb-hell: #FFF6DB;
  --hh-navy: #091C3A; --hh-navy-2: #1B3560; --hh-text: #263248; --hh-grau: #66758C; --hh-linie: #E2E8EF; --hh-grund: #F4F7FA;
  --hh-radius: 14px;
}

/* ── Hilfe-Knopf in der Navigation ─────────────────────────────────────── */
.hh-navknopf { position: relative; }
.hh-navknopf .bi { font-size: 1rem; }

/* ── Hero mit Suche ─────────────────────────────────────────────────────── */
.hh-seite { background: var(--hh-grund); min-height: 60vh; padding-bottom: 3rem; color: var(--hh-text); }
.hh-hero { background:
    radial-gradient(900px 300px at 85% -20%, rgba(0,189,181,.45), transparent 60%),
    radial-gradient(600px 260px at 5% 120%, rgba(245,183,49,.25), transparent 60%),
    linear-gradient(135deg, #091C3A 0%, #1B3560 100%);
  color: #fff; padding: 3.2rem 1rem 3.6rem; text-align: center; }
.hh-hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.01em; margin: 0 0 .4rem; }
.hh-hero h1 span { color: var(--hh-gelb); }
.hh-hero p { color: rgba(255,255,255,.82); margin: 0 auto 1.6rem; max-width: 620px; font-size: 1.05rem; }
.hh-suchfeld { position: relative; max-width: 680px; margin: 0 auto; }
.hh-suchfeld input { width: 100%; border: 0; border-radius: 999px; padding: 1rem 1.4rem 1rem 3.2rem; font-size: 1.05rem; box-shadow: 0 10px 30px rgba(10,20,40,.35); outline: none; color: var(--hh-navy); }
.hh-suchfeld input:focus { box-shadow: 0 10px 30px rgba(10,20,40,.35), 0 0 0 4px rgba(0,189,181,.5); }
.hh-suchfeld > .bi-search { position: absolute; left: 1.3rem; top: 50%; transform: translateY(-50%); color: var(--hh-teal-dunkel); font-size: 1.15rem; pointer-events: none; }
.hh-vorschlaege { margin-top: 1rem; font-size: .88rem; color: rgba(255,255,255,.75); }
.hh-vorschlaege a { color: #fff; background: rgba(255,255,255,.14); border-radius: 999px; padding: .2rem .8rem; margin: .15rem .15rem; display: inline-block; text-decoration: none; transition: background .15s; }
.hh-vorschlaege a:hover { background: rgba(245,183,49,.9); color: var(--hh-navy); }
.hh-live { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border-radius: 16px; box-shadow: 0 18px 40px rgba(10,20,40,.3); text-align: left; overflow: hidden; z-index: 20; }
.hh-live a { display: block; padding: .75rem 1.2rem; color: var(--hh-text); text-decoration: none; border-bottom: 1px solid var(--hh-linie); }
.hh-live a:last-child { border: 0; }
.hh-live a:hover, .hh-live a.aktiv { background: var(--hh-teal-hell); }
.hh-live .hh-t { font-weight: 700; color: var(--hh-navy); }
.hh-live .hh-k { font-size: .85rem; color: var(--hh-grau); }
.hh-live .hh-leer { padding: 1rem 1.2rem; color: var(--hh-grau); }

/* ── Bereiche / Karten ─────────────────────────────────────────────────── */
.hh-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1rem; }
.hh-abschnitt { margin-top: 2.4rem; }
.hh-abschnitt > h2 { font-size: 1.25rem; font-weight: 800; color: var(--hh-navy); margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.hh-abschnitt > h2::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--hh-gelb), transparent); border-radius: 2px; }
.hh-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.hh-karte { background: #fff; border: 1px solid var(--hh-linie); border-radius: var(--hh-radius); padding: 1.2rem 1.3rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .35rem; transition: transform .15s, box-shadow .15s, border-color .15s; }
.hh-karte:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(26,43,74,.12); border-color: var(--hh-teal); color: inherit; }
.hh-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--hh-teal-hell); color: var(--hh-teal-dunkel); font-size: 1.35rem; margin-bottom: .35rem; }
.hh-karte h3 { font-size: 1.05rem; font-weight: 800; color: var(--hh-navy); margin: 0; }
.hh-karte p { margin: 0; color: var(--hh-grau); font-size: .92rem; }
.hh-karte .hh-meta { margin-top: auto; padding-top: .5rem; font-size: .8rem; color: var(--hh-teal-dunkel); font-weight: 600; }
.hh-tourkarte .hh-icon { background: var(--hh-gelb-hell); color: #B27A00; }
.hh-tourkarte .hh-play { color: #B27A00; }
.hh-listenkarte { background: #fff; border: 1px solid var(--hh-linie); border-radius: var(--hh-radius); padding: 1rem 1.2rem; }
.hh-listenkarte h3 { font-size: 1rem; font-weight: 800; color: var(--hh-navy); display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; }
.hh-listenkarte h3 .bi { color: var(--hh-teal-dunkel); }
.hh-listenkarte ul { list-style: none; margin: 0; padding: 0; }
.hh-listenkarte li a { display: block; padding: .38rem 0; color: var(--hh-text); text-decoration: none; border-bottom: 1px dashed var(--hh-linie); font-size: .93rem; }
.hh-listenkarte li:last-child a { border: 0; }
.hh-listenkarte li a:hover { color: var(--hh-teal-dunkel); padding-left: .25rem; }
.hh-listenkarte li a { transition: padding .12s, color .12s; }

/* ── Knoepfe ───────────────────────────────────────────────────────────── */
.hh-btn { display: inline-flex; align-items: center; border: 0; border-radius: 10px; padding: .6rem 1.1rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: filter .15s, transform .1s; }
.hh-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.hh-btn-tour { background: var(--hh-teal); color: var(--hh-navy); box-shadow: 0 6px 16px rgba(0,189,181,.35); }
.hh-btn-hell { background: #fff; color: var(--hh-navy); border: 1px solid var(--hh-linie); }

/* ── Artikel ───────────────────────────────────────────────────────────── */
.hh-artikel-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: 2rem; max-width: 1280px; margin: 0 auto; padding: 1.5rem 1rem 0; align-items: start; }
.hh-nav, .hh-toc { position: sticky; top: 1rem; font-size: .9rem; }
.hh-nav h4, .hh-toc h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--hh-grau); margin: 0 0 .6rem; font-weight: 800; }
.hh-nav a, .hh-toc a { display: block; padding: .38rem .7rem; border-radius: 8px; color: var(--hh-text); text-decoration: none; border-left: 3px solid transparent; }
.hh-nav a:hover, .hh-toc a:hover { background: #fff; }
.hh-nav a.aktiv { background: #fff; border-left-color: var(--hh-teal); font-weight: 700; color: var(--hh-navy); box-shadow: 0 1px 3px rgba(26,43,74,.08); }
.hh-toc a.aktiv { border-left-color: var(--hh-gelb); font-weight: 700; color: var(--hh-navy); }
.hh-brot { font-size: .85rem; color: var(--hh-grau); margin-bottom: .6rem; }
.hh-brot a { color: var(--hh-teal-dunkel); text-decoration: none; font-weight: 600; }
.hh-text { background: #fff; border: 1px solid var(--hh-linie); border-radius: 18px; padding: 2.2rem 2.6rem 2.4rem; box-shadow: 0 4px 18px rgba(26,43,74,.05); line-height: 1.7; font-size: 1.02rem; max-width: 820px; }
.hh-text h1 { font-size: 2rem; font-weight: 800; color: var(--hh-navy); letter-spacing: -.01em; margin: 0 0 .5rem; line-height: 1.2; }
.hh-lead { font-size: 1.12rem; color: var(--hh-grau); margin-bottom: 1.2rem; }
.hh-meta-zeile { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; font-size: .82rem; }
.hh-pille { background: var(--hh-teal-hell); color: var(--hh-teal-dunkel); border-radius: 999px; padding: .2rem .75rem; font-weight: 700; }
.hh-pille.gelb { background: var(--hh-gelb-hell); color: #946400; }
.hh-text h2 { font-size: 1.35rem; font-weight: 800; color: var(--hh-navy); margin: 2.2rem 0 .7rem; padding-top: .4rem; scroll-margin-top: 1rem; }
.hh-text h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--hh-gelb); margin-right: .6rem; vertical-align: .08em; }
.hh-text h3 { font-size: 1.08rem; font-weight: 800; color: var(--hh-navy-2); margin: 1.6rem 0 .5rem; scroll-margin-top: 1rem; }
.hh-text p { margin: 0 0 1rem; }
.hh-text ul, .hh-text ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.hh-text li { margin-bottom: .4rem; }
.hh-text ol { counter-reset: schritt; list-style: none; padding-left: 0; }
.hh-text ol > li { counter-increment: schritt; position: relative; padding-left: 2.6rem; margin-bottom: .7rem; }
.hh-text ol > li::before { content: counter(schritt); position: absolute; left: 0; top: .05rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--hh-navy); color: #fff; font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.hh-text a { color: var(--hh-teal-dunkel); font-weight: 600; }
kbd.hh-knopf { background: var(--hh-navy); color: #fff; border-radius: 6px; padding: .08rem .5rem; font-size: .84em; font-family: inherit; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.hh-bild { margin: 1.4rem 0 1.6rem; }
.hh-bild a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--hh-linie); box-shadow: 0 10px 30px rgba(26,43,74,.14); cursor: zoom-in; background: #fff; }
.hh-bild img { display: block; width: 100%; height: auto; }
.hh-bild figcaption { text-align: center; color: var(--hh-grau); font-size: .86rem; margin-top: .55rem; }
.hh-kasten { display: flex; gap: .8rem; padding: .95rem 1.1rem; border-radius: 12px; margin: 1.2rem 0; font-size: .96rem; line-height: 1.55; }
.hh-kasten > .bi { font-size: 1.25rem; margin-top: .1rem; }
.hh-kasten-tipp { background: var(--hh-teal-hell); border-left: 4px solid var(--hh-teal); } .hh-kasten-tipp > .bi { color: var(--hh-teal-dunkel); }
.hh-kasten-hinweis { background: #EAF1FB; border-left: 4px solid #4A7BC8; } .hh-kasten-hinweis > .bi { color: #2F5FA8; }
.hh-kasten-achtung { background: var(--hh-gelb-hell); border-left: 4px solid var(--hh-gelb); } .hh-kasten-achtung > .bi { color: #B27A00; }
.hh-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--hh-linie); }
.hh-blatt { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.hh-blatt a { flex: 1 1 220px; background: var(--hh-grund); border: 1px solid var(--hh-linie); border-radius: 12px; padding: .8rem 1rem; text-decoration: none; color: var(--hh-navy); font-weight: 700; }
.hh-blatt a small { display: block; color: var(--hh-grau); font-weight: 500; }
.hh-blatt a:hover { border-color: var(--hh-teal); background: #fff; }
.hh-blatt a.weiter { text-align: right; }
.hh-bewerte { font-size: .9rem; color: var(--hh-grau); display: flex; align-items: center; gap: .5rem; }
.hh-bewerte button { border: 1px solid var(--hh-linie); background: #fff; border-radius: 999px; padding: .25rem .9rem; cursor: pointer; font-weight: 600; color: var(--hh-navy); }
.hh-bewerte button:hover { border-color: var(--hh-teal); background: var(--hh-teal-hell); }
@media (max-width: 1100px) { .hh-artikel-grid { grid-template-columns: 220px minmax(0, 1fr); } .hh-toc { display: none; } }
@media (max-width: 800px) { .hh-artikel-grid { grid-template-columns: 1fr; } .hh-nav { position: static; } .hh-text { padding: 1.4rem 1.2rem; } }

/* ── Suchergebnisse ────────────────────────────────────────────────────── */
.hh-treffer { background: #fff; border: 1px solid var(--hh-linie); border-radius: var(--hh-radius); padding: 1rem 1.3rem; margin-bottom: .8rem; display: block; text-decoration: none; color: inherit; }
.hh-treffer:hover { border-color: var(--hh-teal); box-shadow: 0 8px 22px rgba(26,43,74,.1); color: inherit; }
.hh-treffer h3 { font-size: 1.05rem; font-weight: 800; color: var(--hh-navy); margin: 0 0 .2rem; }
.hh-treffer p { margin: 0; color: var(--hh-grau); font-size: .92rem; }
.hh-treffer .hh-pille { font-size: .72rem; }

/* ── Seitenleiste (Drawer) ─────────────────────────────────────────────── */
.hh-drawer { width: 430px !important; max-width: 100vw; border-left: 0 !important; box-shadow: -18px 0 50px rgba(10,20,40,.25); background: var(--hh-grund); }
.hh-drawer-kopf { background: linear-gradient(135deg, #091C3A, #1B3560); color: #fff; padding: 1.1rem 1.2rem 1.2rem; position: relative; }
.hh-drawer-kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--hh-teal), var(--hh-gelb)); }
.hh-drawer-titel { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 1.1rem; margin-bottom: .8rem; }
.hh-drawer-titel .bi-life-preserver { color: var(--hh-gelb); margin-right: .5rem; }
.hh-drawer-titel button { background: rgba(255,255,255,.14); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 50%; }
.hh-drawer-titel button:hover { background: rgba(255,255,255,.28); }
.hh-drawer .hh-suchfeld input { padding: .75rem 1rem .75rem 2.8rem; font-size: .98rem; box-shadow: none; }
.hh-drawer .hh-suchfeld > .bi-search { left: 1rem; }
.hh-drawer-body { padding: 1rem 1.2rem 1.4rem; overflow-y: auto; flex: 1; }
.hh-drawer h6 { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--hh-grau); font-weight: 800; margin: 1.2rem 0 .55rem; }
.hh-drawer h6:first-child { margin-top: .2rem; }
.hh-eintrag { display: flex; gap: .7rem; align-items: flex-start; background: #fff; border: 1px solid var(--hh-linie); border-radius: 12px; padding: .7rem .85rem; margin-bottom: .5rem; text-decoration: none; color: var(--hh-text); width: 100%; text-align: left; cursor: pointer; transition: border-color .12s, transform .12s; }
.hh-eintrag:hover { border-color: var(--hh-teal); transform: translateX(2px); color: var(--hh-text); }
.hh-eintrag .hh-i { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--hh-teal-hell); color: var(--hh-teal-dunkel); }
.hh-eintrag.tour .hh-i { background: var(--hh-gelb-hell); color: #B27A00; }
.hh-eintrag .hh-t { font-weight: 700; color: var(--hh-navy); line-height: 1.25; }
.hh-eintrag .hh-k { font-size: .82rem; color: var(--hh-grau); margin-top: .1rem; }
.hh-antwort { background: #fff; border: 1px solid var(--hh-teal); border-radius: 12px; padding: .9rem 1rem; margin-bottom: .8rem; font-size: .93rem; line-height: 1.55; }
.hh-antwort .hh-ki { font-size: .72rem; font-weight: 800; color: var(--hh-teal-dunkel); text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: .3rem; }
.hh-drawer-fuss { border-top: 1px solid var(--hh-linie); padding: .8rem 1.2rem; background: #fff; display: flex; justify-content: space-between; align-items: center; font-size: .85rem; }
.hh-drawer-fuss a { color: var(--hh-teal-dunkel); font-weight: 700; text-decoration: none; }
/* Rueckmeldung an die Entwickler: gut sichtbarer Knopf unten in der Hilfe-Leiste */
.hh-rueck { display: flex; align-items: center; gap: .8rem; margin: 0; padding: .75rem 1.2rem; background: var(--hh-teal-hell, #E6F8F7); border-top: 1px solid var(--hh-linie); color: var(--hh-navy); text-decoration: none; }
.hh-rueck:hover { background: #D3F1EF; color: var(--hh-navy); }
.hh-rueck > .bi-chat-heart { font-size: 1.5rem; color: var(--hh-teal-dunkel); }
.hh-rueck > span { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.hh-rueck small { color: var(--hh-grau, #5b6475); font-size: .78rem; }
.hh-leer { color: var(--hh-grau); font-size: .9rem; padding: .3rem 0; }

/* ── Gefuehrte Tour ────────────────────────────────────────────────────── */
.hh-tour-sperre { position: fixed; inset: 0; z-index: 2000; background: transparent; }
.hh-tour-spot { position: fixed; z-index: 2001; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(18,30,54,.7), 0 0 0 4px var(--hh-teal), 0 0 26px 6px rgba(0,189,181,.55); transition: all .35s cubic-bezier(.4,.1,.2,1); animation: hhPuls 2s ease-in-out infinite; }
.hh-tour-spot.mitte { box-shadow: 0 0 0 9999px rgba(18,30,54,.7); animation: none; width: 0; height: 0; left: 50%; top: 50%; }
@keyframes hhPuls { 0%, 100% { box-shadow: 0 0 0 9999px rgba(18,30,54,.7), 0 0 0 4px var(--hh-teal), 0 0 22px 4px rgba(0,189,181,.45); } 50% { box-shadow: 0 0 0 9999px rgba(18,30,54,.7), 0 0 0 6px var(--hh-gelb), 0 0 34px 10px rgba(245,183,49,.5); } }
.hh-tour-ziel { outline: 3px solid var(--hh-teal) !important; outline-offset: -2px; background: rgba(0,189,181,.28) !important; color: #fff !important; border-radius: 8px; }
.hh-tour-pop { position: fixed; z-index: 2002; width: 360px; max-width: calc(100vw - 24px); background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(8,16,32,.5); overflow: visible; color: var(--hh-text); animation: hhRein .3s ease; }
@keyframes hhRein { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.hh-tour-pop::before { content: ""; display: block; height: 5px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, var(--hh-teal), var(--hh-gelb)); }
.hh-tour-pfeil { position: absolute; width: 16px; height: 16px; background: #fff; transform: rotate(45deg); }
.hh-tour-inhalt { padding: 1rem 1.2rem 1.1rem; }
.hh-tour-schritt { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hh-teal-dunkel); display: flex; justify-content: space-between; align-items: center; }
.hh-tour-schritt button { background: none; border: 0; color: var(--hh-grau); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.hh-tour-pop h5 { font-size: 1.12rem; font-weight: 800; color: var(--hh-navy); margin: .35rem 0 .4rem; }
.hh-tour-pop p { margin: 0; font-size: .95rem; line-height: 1.55; }
.hh-tour-punkte { display: flex; gap: 5px; margin: .9rem 0 .8rem; }
.hh-tour-punkte i { flex: 1; height: 4px; border-radius: 3px; background: var(--hh-linie); }
.hh-tour-punkte i.fertig { background: var(--hh-teal); } .hh-tour-punkte i.jetzt { background: var(--hh-gelb); }
.hh-tour-knoepfe { display: flex; justify-content: space-between; gap: .5rem; }
.hh-tour-knoepfe button { border: 0; border-radius: 10px; padding: .5rem 1rem; font-weight: 700; cursor: pointer; }
.hh-tour-zurueck { background: var(--hh-grund); color: var(--hh-navy); }
.hh-tour-weiter { background: var(--hh-teal); color: var(--hh-navy); box-shadow: 0 5px 14px rgba(0,189,181,.35); margin-left: auto; }
.hh-tour-weiter:hover { filter: brightness(1.07); }

/* ── Bildzoom ──────────────────────────────────────────────────────────── */
.hh-box { position: fixed; inset: 0; z-index: 2100; background: rgba(12,22,42,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; animation: hhRein .2s ease; }
.hh-box img { max-width: min(1400px, 94vw); max-height: 82vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.6); background: #fff; }
.hh-box div { color: #fff; margin-top: 1rem; font-size: .95rem; }

@media print { .hh-nav, .hh-toc, .hh-fuss, .hh-hero, .hh-btn-tour { display: none !important; } .hh-text { border: 0; box-shadow: none; } }

/* ── Tabellen und Feld-Status (Feld-Lexikon) ── */
.hh-tabelle { margin: 1.2rem 0 1.6rem; overflow-x: auto; border: 1px solid var(--hh-linie); border-radius: 12px; background: #fff; }
.hh-tabelle table { width: 100%; border-collapse: collapse; font-size: .94rem; line-height: 1.5; }
.hh-tabelle th { text-align: left; background: #F2F5F9; color: #091C3A; font-weight: 700; padding: .6rem .8rem; border-bottom: 1px solid var(--hh-linie); white-space: nowrap; }
.hh-tabelle td { padding: .6rem .8rem; border-bottom: 1px solid #EDF0F4; vertical-align: top; }
.hh-tabelle tbody tr:last-child td { border-bottom: 0; }
.hh-tabelle td:first-child { font-weight: 600; white-space: nowrap; }
.hh-status { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.hh-status-wirkt { background: #DDF3E4; color: #14612F; border-color: #B7E3C6; }
.hh-status-anzeige { background: #E8EEF6; color: #34506F; border-color: #CAD6E4; }
.hh-status-folgt { background: #FFF1CC; color: #7A5200; border-color: #F2D98A; }
@media (max-width: 700px) { .hh-tabelle td:first-child { white-space: normal; } }

/* Feld-Lexikon (4 Spalten): feste Breiten, damit die Wirkung genug Platz hat */
.hh-t4 { table-layout: fixed; }
.hh-t4 th:nth-child(1), .hh-t4 td:nth-child(1) { width: 21%; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: auto; font-size: .88rem; }
.hh-t4 th:nth-child(2), .hh-t4 td:nth-child(2) { width: 24%; }
.hh-t4 th:nth-child(4), .hh-t4 td:nth-child(4) { width: 14%; }
.hh-t4 td { font-size: .9rem; overflow-wrap: anywhere; }
.hh-t4 td:nth-child(2) { color: #3a4658; }
.hh-t4 th { white-space: normal; }
.hh-tabelle .hh-knopf { font-size: .78rem; }

/* ── Vorgefuehrte Handgriffe und automatisches Abspielen der Rundgaenge ─────────────────────────────── */
.hh-cursor { position: fixed; z-index: 2005; width: 30px; height: 30px; margin: -3px 0 0 -3px; pointer-events: none; transition: left .75s cubic-bezier(.45,.05,.25,1), top .75s cubic-bezier(.45,.05,.25,1); filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.hh-cursor .hh-ring { position: absolute; left: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--hh-gelb); opacity: 0; transform: scale(.3); }
.hh-cursor.klick svg { transform: scale(.86) translate(1px, 1px); transition: transform .12s; }
.hh-cursor.klick .hh-ring { animation: hhKlick .45s ease-out; }
@keyframes hhKlick { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(2); } }
.hh-tour-auto { background: var(--hh-gelb-hell, #fff3cd); color: #8a5a00; display: inline-flex; align-items: center; gap: .25rem; }
.hh-tour-auto.an { background: var(--hh-gelb); color: var(--hh-navy); }
.hh-tour-lauf { height: 4px; border-radius: 3px; background: var(--hh-linie); margin-top: .8rem; overflow: hidden; }
.hh-tour-lauf i { display: block; height: 100%; width: 0; background: var(--hh-teal); }
.hh-tour-knoepfe { align-items: center; }

/* ── Hilfe-Chat (unten rechts): Fragen schreiben oder sprechen, Antworten aus der Hilfe, auf Wunsch vorlesen ──────────── */
/* Abstand unten = Hoehe des Footers (Logo, Version, Uhr) plus Luft: der Knopf darf den Footer nie verdecken */
:root { --hhc-unten: 120px; }
.hhc-knopf { position: fixed; right: 20px; bottom: var(--hhc-unten); z-index: 1060; display: inline-flex; align-items: center; gap: .5rem; border: 0; border-radius: 999px; padding: .75rem 1.15rem; background: linear-gradient(135deg, var(--hh-teal), #00A39C); color: var(--hh-navy); font-weight: 800; font-size: .98rem; box-shadow: 0 10px 28px rgba(0,60,70,.38); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.hhc-knopf:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,60,70,.45); }
.hhc-knopf .bi { font-size: 1.25rem; }
.hhc-knopf.offen { display: none; }
.hhc-panel { position: fixed; right: 20px; bottom: var(--hhc-unten); z-index: 1061; width: 392px; max-width: calc(100vw - 24px); height: min(640px, calc(100vh - var(--hhc-unten) - 20px)); background: #fff; border-radius: 20px; box-shadow: 0 24px 70px rgba(8,16,32,.5); display: flex; flex-direction: column; overflow: hidden; color: var(--hh-text); animation: hhRein .22s ease; }
.hhc-panel[hidden] { display: none; }
.hhc-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 1rem; background: linear-gradient(135deg, #091C3A, #1B3560); color: #fff; }
.hhc-titel { display: flex; align-items: center; gap: .7rem; }
.hhc-titel > .bi { font-size: 1.6rem; color: var(--hh-gelb); }
.hhc-titel b { display: block; line-height: 1.1; }
.hhc-titel small { display: block; opacity: .75; font-size: .76rem; }
.hhc-kopfknoepfe { display: flex; gap: .2rem; }
.hhc-ik { border: 0; background: transparent; color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; }
.hhc-ik:hover { background: rgba(255,255,255,.16); }
.hhc-ik.an { background: var(--hh-gelb); color: var(--hh-navy); }
.hhc-verlauf { position: relative; flex: 1; overflow-y: auto; padding: 1rem .9rem; background: var(--hh-grund); display: flex; flex-direction: column; gap: .6rem; }
.hhc-z { max-width: 92%; padding: .65rem .85rem; border-radius: 16px; font-size: .93rem; line-height: 1.5; word-wrap: break-word; }
.hhc-u { align-self: flex-end; background: var(--hh-teal); color: var(--hh-navy); border-bottom-right-radius: 5px; font-weight: 600; }
.hhc-b { align-self: flex-start; background: #fff; border: 1px solid var(--hh-linie); border-bottom-left-radius: 5px; box-shadow: 0 1px 3px rgba(20,40,70,.06); }
.hhc-quelle { font-size: .74rem; color: var(--hh-teal-dunkel); margin-bottom: .35rem; }
.hhc-text p { margin: 0 0 .45rem; } .hhc-text ul, .hhc-text ol { margin: 0 0 .45rem 1.1rem; padding: 0; } .hhc-text li { margin-bottom: .2rem; }
.hhc-text > :last-child { margin-bottom: 0; }
.hhc-text .hh-knopf { font-size: .8rem; }
.hhc-text .hh-kasten, .hhc-text .hh-bild, .hhc-text .hh-tabelle { font-size: .85rem; }
.hhc-aktionen, .hhc-weitere { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; align-items: center; font-size: .8rem; color: var(--hh-grau); }
.hhc-akt, .hhc-chip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--hh-linie); background: #fff; color: var(--hh-navy); border-radius: 999px; padding: .25rem .7rem; font-size: .8rem; font-weight: 600; text-decoration: none; cursor: pointer; text-align: left; }
.hhc-akt:hover, .hhc-chip:hover { border-color: var(--hh-teal); background: var(--hh-teal-hell); color: var(--hh-navy); }
.hhc-akt-tour { background: var(--hh-gelb-hell); border-color: #F0D58A; }
.hhc-akt.an { background: var(--hh-gelb); }
.hhc-feedback { margin-top: .55rem; font-size: .78rem; color: var(--hh-grau); }
.hhc-feedback button { border: 0; background: transparent; font-size: 1rem; padding: 0 .25rem; cursor: pointer; }
.hhc-tipp { display: flex; gap: 4px; padding: .8rem 1rem; }
.hhc-tipp span { width: 7px; height: 7px; border-radius: 50%; background: var(--hh-teal); animation: hhcTipp 1s infinite ease-in-out; }
.hhc-tipp span:nth-child(2) { animation-delay: .15s; } .hhc-tipp span:nth-child(3) { animation-delay: .3s; }
@keyframes hhcTipp { 0%, 80%, 100% { transform: scale(.5); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
.hhc-eingabe { display: flex; gap: .4rem; padding: .7rem .8rem .5rem; background: #fff; border-top: 1px solid var(--hh-linie); align-items: center; }
.hhc-eingabe input { flex: 1; min-width: 0; border: 1px solid var(--hh-linie); border-radius: 999px; padding: .6rem 1rem; font-size: .95rem; outline: none; }
.hhc-eingabe input:focus { border-color: var(--hh-teal); box-shadow: 0 0 0 3px rgba(0,189,181,.25); }
.hhc-mik, .hhc-senden { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.05rem; }
.hhc-mik { background: var(--hh-grund); color: var(--hh-navy); }
.hhc-mik:hover { background: var(--hh-teal-hell); }
.hhc-mik.an { background: #D93C4B; color: #fff; animation: hhcMik 1.1s infinite; }
@keyframes hhcMik { 0% { box-shadow: 0 0 0 0 rgba(217,60,75,.55); } 100% { box-shadow: 0 0 0 14px rgba(217,60,75,0); } }
.hhc-senden { background: var(--hh-teal); color: var(--hh-navy); }
.hhc-senden:hover { filter: brightness(1.07); }
.hhc-hinweis { padding: 0 1rem .6rem; font-size: .68rem; color: var(--hh-grau); background: #fff; }
@media (max-width: 520px) { .hhc-panel { right: 8px; bottom: 8px; height: calc(100vh - 16px); } .hhc-knopf span { display: none; } .hhc-knopf { padding: .85rem; } }
@media print { .hhc-knopf, .hhc-panel { display: none !important; } }
.hhc-akt-ziel { background: var(--hh-teal-hell); border-color: #9ADFDB; }
.hhc-akt-gross { background: var(--hh-teal); border-color: var(--hh-teal); color: var(--hh-navy); font-size: .88rem; padding: .4rem .95rem; box-shadow: 0 4px 12px rgba(0,189,181,.35); }
.hhc-akt-gross:hover { filter: brightness(1.06); background: var(--hh-teal); }

/* Fuss des Chat-Fensters: Support-Link */
.hhc-fuss { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem 1rem .7rem; background: #fff; border-top: 1px solid var(--hh-linie); font-size: .8rem; }
.hhc-support { color: var(--hh-teal-dunkel); font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.hhc-support:hover { text-decoration: underline; }
.hhc-hinweis-klein { color: var(--hh-grau, #5b6475); font-size: .68rem; }