/* Störung melden + Kontakt aufnehmen (Michael WA-Voice 21.10.2026). Eine Quelle für alle Seiten: /assets/hh-kontakt.js */
:root{--hhk-red:#b3261e;--hhk-red-deep:#8c1d17;--hhk-red-soft:#fcefed;--hhk-wa:#25d366;--hhk-tg:#26a5e4;--hhk-zoom:#0b5cff}

/* Kopfzeile: zwei Knöpfe rechts */
.nav .navlinks{margin-left:auto}
.nav-hilfe{display:flex;align-items:center;gap:10px}
.nav-hilfe a{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;font:600 13px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.nav-hilfe svg{width:16px;height:16px;flex:none}
.nav-hilfe .nav-stoerung{background:var(--hhk-red);color:#fff;border:1px solid var(--hhk-red)}
.nav-hilfe .nav-stoerung:hover{background:var(--hhk-red-deep);border-color:var(--hhk-red-deep)}
.nav-hilfe .nav-kontakt{background:#fff;color:var(--deep);border:1px solid #cfa989}
.nav-hilfe .nav-kontakt:hover{border-color:var(--deep);color:var(--ink)}
.nav-hilfe a[aria-current]{box-shadow:0 0 0 3px #b3261e22}
@media(max-width:760px){
  .nav{height:auto;flex-wrap:wrap;row-gap:10px;padding-top:12px;padding-bottom:12px}
  .nav-hilfe{order:3;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .nav-hilfe a{justify-content:center;height:40px;font-size:13px}
  .chapter,.es-hilfe,section[id],[id^="schritt-"]{scroll-margin-top:150px}
}

/* Bausteine */
.hhk-panel{background:#fff;border:1px solid var(--hair);border-radius:6px;box-shadow:0 10px 30px #221e1a0d;overflow:hidden}
.hhk-head{display:flex;gap:16px;align-items:flex-start;padding:24px 26px 20px;border-bottom:1px solid var(--hair)}
.hhk-head .hhk-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.hhk-head .hhk-ic svg{width:22px;height:22px}
.hhk-head h3{font:500 26px/1.2 var(--serif);color:var(--ink);margin:2px 0 6px}
.hhk-head p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.hhk-outage .hhk-head{background:var(--hhk-red-soft);border-bottom-color:#efcfcb;box-shadow:inset 4px 0 0 var(--hhk-red)}
.hhk-outage .hhk-ic{background:var(--hhk-red);color:#fff}
.hhk-outage .hhk-eyebrow{color:var(--hhk-red)}
.hhk-contact .hhk-head{background:var(--soft);box-shadow:inset 4px 0 0 var(--copper)}
.hhk-contact .hhk-ic{background:var(--copper);color:#fff}
.hhk-eyebrow{font:600 11.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--deep)}
.hhk-body{padding:8px 26px 24px}
.hhk-group{margin-top:18px}
.hhk-label{display:inline-flex;align-items:center;gap:7px;font:600 11.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;padding:5px 11px 5px 8px;border-radius:999px;background:#f3eee7}
.hhk-label svg{width:15px;height:15px;flex:none}
/* Gruppen farblich: Chat grün, Persönlich kupfer, E-Mail schiefer */
.hhk-g-chat .hhk-label{background:#e6f6ec;color:#17693a}
.hhk-g-person .hhk-label{background:#fbeee1;color:#8f5222}
.hhk-g-post .hhk-label{background:#edf0f4;color:#3d4a5c}
/* Rückruf: Verfügbarkeit (Michael 21.10.: Icons, übersichtlich, farblich abheben) */
.hhk-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:2px 0 1px;padding:3px 9px;border-radius:999px;font:600 12.5px/1.3 var(--sans);white-space:nowrap}
.hhk-badge i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.hhk-badge.hhk-jetzt{background:#e3f4e8;color:#17693a}
.hhk-badge.hhk-jetzt i{box-shadow:0 0 0 3px #17693a26;animation:hhk-puls 2s ease-in-out infinite}
.hhk-badge.hhk-vormerken{background:#fdf0da;color:#8a5300}
.hhk-badge.hhk-termin{background:#e3ebff;color:#0a45c2}
@keyframes hhk-puls{50%{box-shadow:0 0 0 5px #17693a0d}}
@media(prefers-reduced-motion:reduce){.hhk-badge.hhk-jetzt i{animation:none}}
.hhk-zeiten{display:flex;align-items:flex-start;gap:7px;margin:9px 2px 0;font-size:13px;line-height:1.45;color:var(--muted)}
.hhk-zeiten svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--copper)}
.hhk-status{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:6px;font-size:14px;line-height:1.5}
.hhk-status svg{width:22px;height:22px;flex:none;margin-top:1px}
.hhk-status b{display:block;font-weight:600}
.hhk-status.hhk-jetzt{background:#eef8f1;border:1px solid #bfe3cb;color:#1e4d2e}
.hhk-status.hhk-vormerken{background:#fff6e8;border:1px solid #f1d3a2;color:#5c3a00}
.hhk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.hhk-grid.hhk-one{grid-template-columns:minmax(0,1fr)}
/* Zwei Spalten nur, wenn der Kasten breit genug ist (Gut zu wissen bei 768 px war zu eng) */
.hhk-panel,.hhk-kompakt{container-type:inline-size}
@container (max-width:560px){.hhk-grid{grid-template-columns:minmax(0,1fr)}}
.hhk-btn{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border-radius:6px;border:1.5px solid var(--hair);background:#fff;color:var(--ink);text-decoration:none;font:inherit;text-align:left;cursor:pointer;width:100%;transition:transform .12s,box-shadow .15s,border-color .15s,background .15s}
.hhk-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px #221e1a14}
.hhk-btn:focus-visible{outline:3px solid #b26a3055;outline-offset:2px}
.hhk-logo{flex:none;width:34px;height:34px;display:grid;place-items:center}
.hhk-logo svg{width:30px;height:30px}
.hhk-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hhk-txt b{font:600 16px/1.25 var(--sans);overflow-wrap:break-word}
.hhk-mail .hhk-txt b{font-size:15.5px}
.hhk-txt small{font-size:13px;line-height:1.35;color:var(--muted)}
.hhk-arrow{flex:none;color:var(--muted);font-size:18px;line-height:1}
.hhk-wa{background:#effcf4;border-color:#9fe6bb}.hhk-wa:hover{border-color:var(--hhk-wa)}.hhk-wa svg{fill:var(--hhk-wa)}
.hhk-tg{background:#eef8fd;border-color:#a6d8f2}.hhk-tg:hover{border-color:var(--hhk-tg)}.hhk-tg svg{fill:var(--hhk-tg)}
.hhk-zoom{background:#eff4ff;border-color:#b3c9ff}.hhk-zoom:hover{border-color:var(--hhk-zoom)}
.hhk-zoom .hhk-logo{width:62px}.hhk-zoom .hhk-logo svg{width:62px;height:15px;fill:var(--hhk-zoom)}
.hhk-call{background:#fbf5ee;border-color:#e5cdb4}.hhk-call:hover{border-color:var(--copper)}.hhk-call svg{fill:none;stroke:var(--copper);stroke-width:1.8}
.hhk-mail{background:#fff}.hhk-mail:hover{border-color:var(--deep)}.hhk-mail svg{fill:none;stroke:var(--deep);stroke-width:1.6}
.hhk-outage .hhk-mail svg{stroke:var(--hhk-red)}
.hhk-hint{margin:18px 0 0;font-size:14px;color:var(--muted)}
.hhk-hint a{color:var(--deep)}
@media(max-width:600px){.hhk-head .hhk-ic{width:36px;height:36px}.hhk-head .hhk-ic svg{width:18px;height:18px}.hhk-grid{grid-template-columns:minmax(0,1fr)}.hhk-btn{gap:12px;padding:12px 14px}.hhk-mail .hhk-txt b{font-size:14.5px}.hhk-head{padding:20px 18px 16px}.hhk-body{padding:4px 18px 20px}.hhk-head h3{font-size:23px}}

/* Kompakt: nur Knöpfe, ohne Kopf (in Texten) */
.hhk-kompakt{margin-top:16px}
.hhk-kompakt .hhk-group:first-child{margin-top:0}

/* Einzelne Auslöser im Text */
.hhk-cta{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.hhk-cta a{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;font:600 14.5px/1 var(--sans);text-decoration:none}
.hhk-cta svg{width:17px;height:17px}
.hhk-cta .hhk-cta-stoerung{background:var(--hhk-red);color:#fff}
.hhk-cta .hhk-cta-stoerung:hover{background:var(--hhk-red-deep)}
.hhk-cta .hhk-cta-kontakt{background:#fff;color:var(--deep);border:1px solid #cfa989}
.hhk-cta .hhk-cta-kontakt:hover{border-color:var(--deep)}

/* Fenster beim Klick in der Kopfzeile */
.hhk-dialog{border:0;padding:0;margin:auto;background:transparent;width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:visible}
.hhk-dialog::backdrop{background:#221e1a73;backdrop-filter:blur(2px)}
.hhk-dialog .hhk-panel{max-height:calc(100vh - 48px);overflow:auto}
.hhk-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:#ffffffd9;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;z-index:2}
.hhk-close:hover{background:#fff}
@media(max-width:600px){.hhk-dialog{width:100vw;max-width:100vw;margin:auto 0 0;max-height:92vh}.hhk-dialog .hhk-panel{border-radius:14px 14px 0 0;max-height:92vh}}

/* Rückruf-Formular */
.hhk-form{margin-top:14px;display:grid;gap:12px}
.hhk-form label{display:block;font-size:13.5px;font-weight:600;margin:0 0 5px;color:var(--ink)}
.hhk-form input[type=text],.hhk-form input[type=tel],.hhk-form textarea{width:100%;box-sizing:border-box;border:1px solid #d8cfc2;border-radius:4px;padding:11px 12px;font:15px/1.4 var(--sans);background:#fff;color:var(--ink)}
.hhk-form textarea{min-height:96px;resize:vertical}
.hhk-form .hhk-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.hhk-form .hhk-two{grid-template-columns:1fr}}
.hhk-notice{background:var(--soft);border-radius:4px;padding:12px 14px;font-size:13.5px;line-height:1.5}
.hhk-ack{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:400!important}
.hhk-ack input{margin-top:3px}
.hhk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hhk-submit{height:48px;border:0;border-radius:999px;background:var(--copper);color:#fff;font:600 15px/1 var(--sans);cursor:pointer}
.hhk-outage .hhk-submit{background:var(--hhk-red)}
.hhk-submit[disabled]{opacity:.6;cursor:wait}
.hhk-back{border:0;background:none;color:var(--deep);font:500 14px/1 var(--sans);padding:0;cursor:pointer;margin-top:14px}
.hhk-err{color:var(--hhk-red);font-size:14px}
.hhk-done{padding:10px 0 4px}
.hhk-done h4{font:500 22px/1.3 var(--serif);margin:10px 0 8px}
.hhk-done-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e3f4e8;color:#17693a;font:700 20px/1 var(--sans);margin-top:12px}

/* Kontaktseite */
.hhk-page{padding:56px 0 80px}
.hhk-page .hhk-intro{max-width:720px;margin:0 0 34px}
.hhk-page h1{font:500 clamp(34px,4.6vw,52px)/1.12 var(--serif);margin:12px 0 14px;color:var(--ink)}
.hhk-page .hhk-intro p{font-size:18px;color:var(--muted);margin:0}
.hhk-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.hhk-cols>div{scroll-margin-top:110px}
@media(max-width:900px){.hhk-cols{grid-template-columns:1fr}.hhk-cols>div{scroll-margin-top:150px}}
.hhk-cols .hhk-grid{grid-template-columns:minmax(0,1fr)}
.hhk-ziel{animation:hhk-flash 1.6s ease-out 1}
@keyframes hhk-flash{0%{box-shadow:0 0 0 0 #b26a3000}25%{box-shadow:0 0 0 6px #b26a3033}100%{box-shadow:0 10px 30px #221e1a0d}}