/* ============================================================
   home.css — tssysteme.de Startseite (Cyber-Lab, Dark-only)
   Prefix: hp-  ·  reuses :root tokens from style.css
   ============================================================ */

:root {
    /* Mapping auf bestehende Tokens + Erweiterungen (Cyber-Lab) */
    --hp-bg:            var(--anthrazit, #1F1F1F);
    --hp-bg-elev:       #242424;
    --hp-surface:       var(--anthrazit-hell, #2a2a2a);
    --hp-surface-2:     #313131;
    --hp-border:        #3A3A3A;
    --hp-border-strong: #4A4A4A;

    --hp-text:          var(--weiss, #F4F4F4);
    --hp-text-muted:    #B8BDC2;
    --hp-text-faint:    #8A9097;

    --hp-cyan:          var(--akzent, #00C2CB);
    --hp-cyan-weak:     rgba(0, 194, 203, .14);
    --hp-headline:      var(--headline, #4FE3EA);

    --hp-warn:          #F0B429;

    --hp-r-md:          10px;
    --hp-r-lg:          16px;
    --hp-r-pill:        999px;

    --hp-shadow-2:      0 6px 24px rgba(0, 0, 0, .45);
    --hp-glow:          0 0 0 1px var(--hp-cyan-weak), 0 0 24px -6px rgba(0, 194, 203, .45);
    --hp-glow-strong:   0 0 0 1px rgba(0, 194, 203, .35), 0 0 36px -4px rgba(0, 194, 203, .6);
    --hp-ring:          0 0 0 3px rgba(79, 227, 234, .5);

    --hp-section-py:    clamp(3.5rem, 8vw, 7rem);
    --hp-ease:          cubic-bezier(.16, 1, .3, 1);
    --hp-dur:           .28s;

    --hp-mono:          ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- generische Section-Bausteine ---------- */
.hp-section { padding: var(--hp-section-py) 0; background: var(--hp-bg); }
.hp-section--elev { background: var(--hp-bg-elev); }

.hp-section__head { max-width: 760px; margin: 0 auto clamp(2rem, 5vw, 3.5rem); text-align: center; }
.hp-section__cta { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

.hp-h2 {
    color: var(--hp-headline);
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: .6em;
}
.hp-h3 {
    color: var(--hp-headline);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .5em;
}
.hp-lead { color: var(--hp-text-muted); font-size: clamp(1.05rem, 1.4vw, 1.25rem); margin: 0 auto; }
.hp-eyebrow {
    color: var(--hp-cyan);
    font-family: var(--hp-mono);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
    margin-bottom: 1rem;
}

/* ---------- Buttons ---------- */
.hp-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; padding: .8rem 1.4rem;
    border-radius: var(--hp-r-md);
    font-weight: 600; font-size: 1rem; line-height: 1;
    cursor: pointer; text-decoration: none;
    transition: transform var(--hp-dur) var(--hp-ease), box-shadow var(--hp-dur) var(--hp-ease), background-color var(--hp-dur) var(--hp-ease), color var(--hp-dur) var(--hp-ease), border-color var(--hp-dur) var(--hp-ease);
}
.hp-btn:focus-visible { outline: none; box-shadow: var(--hp-ring); }
.hp-btn--primary { background: var(--hp-cyan); color: #0B1416; }
.hp-btn--primary:hover { color: #0B1416; box-shadow: var(--hp-glow-strong); filter: brightness(1.06); }
.hp-btn--ghost { background: transparent; color: var(--hp-text); border: 1px solid var(--hp-border-strong); }
.hp-btn--ghost:hover { border-color: var(--hp-cyan); color: var(--hp-headline); box-shadow: var(--hp-glow); }
.hp-btn--wa { background: #25D366; color: #0B1416; }
.hp-btn--wa:hover { color: #0B1416; filter: brightness(1.06); box-shadow: 0 6px 20px rgba(37, 211, 102, .4); }

/* ---------- Card ---------- */
.hp-card {
    position: relative;
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-r-lg);
    padding: 1.5rem;
    box-shadow: var(--hp-shadow-2);
    transition: transform var(--hp-dur) var(--hp-ease), box-shadow var(--hp-dur) var(--hp-ease), border-color var(--hp-dur) var(--hp-ease);
}
.hp-card:hover { transform: translateY(-2px); border-color: var(--hp-cyan); box-shadow: var(--hp-glow); }
.hp-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; margin-bottom: 1rem;
    border-radius: var(--hp-r-md);
    background: var(--hp-cyan-weak);
    color: var(--hp-cyan);
    font-size: 1.35rem;
}
.hp-card__title { color: var(--hp-headline); font-size: 1.2rem; font-weight: 600; margin-bottom: .5rem; line-height: 1.25; }
.hp-card__text { color: var(--hp-text-muted); margin: 0; }

/* ---------- Grids ---------- */
.hp-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.hp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hp-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ============================================================ HERO */
.hp-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 11vw, 8rem) 0 clamp(3rem, 7vw, 5rem);
    background:
        radial-gradient(circle at 72% 28%, rgba(0, 194, 203, .12) 0%, transparent 52%),
        linear-gradient(135deg, var(--hp-bg) 0%, #16242a 50%, var(--hp-bg) 100%);
}
.hp-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .55; pointer-events: none; }
.hp-hero__inner { position: relative; z-index: 1; text-align: center; }
.hp-hero__h1 {
    color: var(--hp-text);
    font-size: clamp(2.2rem, 4.5vw, 4rem);
    font-weight: 700; line-height: 1.1;
    margin-bottom: .5em;
}
.hp-hero__sub { color: var(--hp-text-muted); font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-width: 760px; margin: 0 auto 2.5rem; }

.hp-hero__paths { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.6rem); max-width: 880px; margin: 0 auto; text-align: left; }
.hp-path { display: flex; flex-direction: column; }
.hp-path .hp-btn { margin-top: auto; align-self: flex-start; }
.hp-path--fahrzeug { border-top: 2px solid var(--hp-cyan); }
.hp-path--it { border-top: 2px solid var(--tech-blau, #2E89B8); }
.hp-path--it .hp-card__icon { color: var(--tech-blau, #2E89B8); background: rgba(46, 137, 184, .16); }
.hp-path__micro { color: var(--hp-text-faint); font-size: .85rem; font-family: var(--hp-mono); margin: .9rem 0 0; }

/* ============================================================ TRUST / TECH BAR */
.hp-trust {
    background: var(--hp-bg-elev);
    padding: clamp(2.75rem, 6vw, 4.5rem) 0;
    border-top: 1px solid var(--hp-border);
    border-bottom: 1px solid var(--hp-border);
}
.hp-trust__head { text-align: center; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); }
.hp-trust__head .hp-eyebrow { margin-bottom: 0; font-size: .9rem; }

.hp-trust__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.6rem);
    align-items: stretch;
    max-width: 820px;
    margin-inline: auto;
}
.hp-trust__card { display: flex; flex-direction: column; }
.hp-trust__card-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .35rem; }
.hp-trust__card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; flex: 0 0 auto;
    border-radius: var(--hp-r-md);
    background: var(--hp-cyan-weak);
    color: var(--hp-cyan);
    font-size: 1.1rem;
}
.hp-trust__card-title { color: var(--hp-headline); font-size: 1.05rem; font-weight: 600; margin: 0; line-height: 1.2; }
.hp-trust__card-note { color: var(--hp-text-faint); font-size: .85rem; margin: 0 0 1rem; }
.hp-trust__card .hp-chips { margin-top: auto; }

/* Chips (Pills) */
.hp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; }
.hp-chip {
    display: inline-flex; align-items: center;
    border: 1px solid var(--hp-border); border-radius: var(--hp-r-pill);
    color: var(--hp-text-muted); padding: .32rem .8rem; font-size: .85rem;
    font-family: var(--hp-mono);
    transition: border-color var(--hp-dur) var(--hp-ease), color var(--hp-dur) var(--hp-ease), box-shadow var(--hp-dur) var(--hp-ease);
}
.hp-chip:hover { border-color: var(--hp-cyan); color: var(--hp-headline); box-shadow: var(--hp-glow); }

/* ============================================================ STATS */
.hp-stats { padding: var(--hp-section-py) 0; background: var(--hp-bg); }
.hp-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); text-align: center; }
.hp-stat__value { color: var(--hp-headline); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; line-height: 1; font-family: var(--hp-mono); }
.hp-stat__affix { color: var(--hp-cyan); }
.hp-stat__label { color: var(--hp-text-muted); margin-top: .6rem; font-size: 1rem; }

/* ============================================================ STEPS (Methode + Prozess) */
.hp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.hp-steps--flow { grid-template-columns: repeat(3, 1fr); }
.hp-steps--num { grid-template-columns: repeat(4, 1fr); }
.hp-step { padding-top: 2.25rem; }
.hp-step__num {
    position: absolute; top: -.9rem; left: 1.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--hp-cyan); color: #0B1416; font-weight: 700;
    font-family: var(--hp-mono); box-shadow: var(--hp-glow);
}
/* Verbinder-Pfeile (Desktop) */
.hp-steps--flow .hp-step:not(:last-child)::after,
.hp-steps--num .hp-step:not(:last-child)::after {
    content: '→';
    position: absolute; right: -1.05rem; top: 50%; transform: translateY(-50%);
    color: var(--hp-cyan); font-size: 1.4rem; z-index: 2;
}
.hp-method__micro { text-align: center; margin-top: 2rem; color: var(--hp-headline); font-family: var(--hp-mono); }
.hp-method__micro i { color: var(--hp-cyan); margin-right: .4rem; }

/* ============================================================ CHECKLIST */
.hp-checklist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.hp-checklist--cols { grid-template-columns: repeat(3, 1fr); }
.hp-checklist li { display: flex; gap: .65rem; align-items: flex-start; color: var(--hp-text-muted); }
.hp-checklist i { color: var(--hp-cyan); margin-top: .25rem; flex: 0 0 auto; }

/* ============================================================ DEEP-DIVE + TERMINAL */
.hp-deepdive__layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.hp-deepdive__text .hp-h2 { text-align: left; }

.hp-terminal {
    background: var(--hp-surface);
    border: 1px solid var(--hp-cyan-weak);
    border-radius: var(--hp-r-lg);
    box-shadow: var(--hp-glow);
    overflow: hidden;
}
.hp-terminal__bar {
    display: flex; align-items: center; gap: .45rem;
    padding: .65rem .9rem;
    background: var(--hp-surface-2);
    border-bottom: 1px solid var(--hp-border);
}
.hp-terminal__dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--hp-border-strong); }
.hp-terminal__dot:nth-child(1) { background: #FF6166; }
.hp-terminal__dot:nth-child(2) { background: var(--hp-warn); }
.hp-terminal__dot:nth-child(3) { background: #30B96A; }
.hp-terminal__path { margin-left: .6rem; color: var(--hp-text-faint); font-family: var(--hp-mono); font-size: .82rem; }
.hp-terminal__body {
    margin: 0; padding: 1.1rem 1.2rem;
    font-family: var(--hp-mono); font-size: .9rem; line-height: 1.7;
    color: var(--hp-text); white-space: pre-wrap; word-break: break-word;
}
.hp-tl { display: block; }
.hp-tl--out, .hp-tl--ok { color: var(--hp-text-muted); }
.hp-tl--ok { color: #30B96A; }
.hp-tl__prompt { color: var(--hp-cyan); }

/* ============================================================ MID-PAGE BAND */
.hp-band {
    background: var(--hp-bg-elev);
    border-top: 1px solid var(--hp-cyan-weak);
    border-bottom: 1px solid var(--hp-cyan-weak);
    box-shadow: inset 0 1px 0 rgba(0, 194, 203, .25), inset 0 -1px 0 rgba(0, 194, 203, .25);
    padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.hp-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.hp-band__copy { flex: 1 1 360px; }
.hp-band__copy .hp-h3 { margin-bottom: .35em; }
.hp-band__copy p { color: var(--hp-text-muted); margin: 0; }
.hp-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ============================================================ NOTICE / DISCLAIMER */
.hp-notice {
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    background: var(--hp-bg-elev);
    border: 1px solid var(--hp-warn);
    border-left-width: 4px;
    border-radius: var(--hp-r-md);
    padding: 1.1rem 1.25rem;
}
.hp-notice__eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    color: var(--hp-warn); font-family: var(--hp-mono);
    text-transform: uppercase; letter-spacing: .06em; font-size: .8rem;
    margin-bottom: .5rem;
}
.hp-notice__text { color: var(--hp-text); margin: 0; font-size: .95rem; }
.hp-disclaimer-ref { color: var(--hp-warn); text-decoration: underline; text-underline-offset: 2px; }
.hp-disclaimer-ref:hover { color: var(--hp-warn); filter: brightness(1.15); }

/* ============================================================ SELF-HOSTED BLOCK */
.hp-selfhosted {
    margin-top: clamp(2rem, 4vw, 3rem);
    background: var(--hp-surface-2);
    border: 1px solid var(--hp-cyan-weak);
    border-radius: var(--hp-r-lg);
    box-shadow: var(--hp-glow);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
}
.hp-selfhosted__copy .hp-h3 i { color: var(--hp-cyan); margin-right: .5rem; }
.hp-selfhosted__copy p { color: var(--hp-text-muted); margin: 0; }
.hp-selfhosted .hp-checklist { margin-top: 0; }
.hp-selfhosted .hp-checklist--cols { grid-template-columns: 1fr; }

/* ============================================================ FAQ ACCORDION */
.hp-faq__inner { max-width: 820px; margin: 0 auto; }
.hp-accordion { display: grid; gap: .75rem; }
.hp-accordion__item {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-r-md);
    overflow: hidden;
}
.hp-accordion__item[open] { border-color: var(--hp-cyan); box-shadow: var(--hp-glow); }
.hp-accordion__summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.25rem; cursor: pointer; list-style: none;
    color: var(--hp-text); font-weight: 600; font-size: 1.05rem;
}
.hp-accordion__summary::-webkit-details-marker { display: none; }
.hp-accordion__summary:focus-visible { outline: none; box-shadow: var(--hp-ring); border-radius: var(--hp-r-md); }
.hp-accordion__chevron { color: var(--hp-cyan); flex: 0 0 auto; transition: transform var(--hp-dur) var(--hp-ease); }
.hp-accordion__item[open] .hp-accordion__chevron { transform: rotate(180deg); }
.hp-accordion__panel { padding: 0 1.25rem 1.25rem; color: var(--hp-text-muted); }
.hp-accordion__panel p { margin: 0; }
.hp-accordion__panel .hp-notice { margin-top: 1rem; }

/* ============================================================ CONTACT TEASER */
.hp-contact__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.hp-contact__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.75rem 0 1.25rem; }
.hp-contact__nap { color: var(--hp-text-muted); font-size: .95rem; }
.hp-contact__nap a { color: var(--hp-headline); }
.hp-contact__note { color: var(--hp-text-faint); }

/* ============================================================ REVIEWS (Gerüst, in v1 inaktiv) */
.hp-review__text { color: var(--hp-text-muted); font-style: italic; }
.hp-review__author { color: var(--hp-text-faint); font-family: var(--hp-mono); font-size: .85rem; margin: 0; }

/* ============================================================ SPEZIAL-LEISTUNGEN (Sub-Page-Feinheiten) */
/* Hero ohne Dual-Path: etwas kompakter, gleiches Cyber-Lab-Styling */
.hp-hero--page { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.hp-hero__intro {
    color: var(--hp-text-muted);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    max-width: 820px;
    margin: 1.75rem auto 0;
}
/* Kategorie-Eyebrow: Icon vor dem Label im Mono-Eyebrow-Stil */
.hp-cat .hp-eyebrow i { margin-right: .35rem; color: var(--hp-cyan); }
/* Zentraler Disclaimer als eigene, schmale Section (kein doppelter top-margin der hp-notice) */
.hp-disclaimer-section { padding-top: 0; }
.hp-disclaimer-section__inner { max-width: 880px; margin-inline: auto; }
.hp-disclaimer-section .hp-notice { margin-top: 0; }
/* Abschluss-CTA-Band: zentriert, falls nur eine Copy-Spalte */
.hp-band--cta .hp-band__copy .hp-h3 { color: var(--hp-headline); }

/* ============================================================ KONTAKT-SEITE (Form)
   2-spaltig: links Info-Karten + Trust, rechts Formular-Panel.
   Form-Markup stammt vom Grav-Form-Plugin (.form-group, .buttons,
   input/textarea/select, checkbox). Wir stylen es hp-konform.
   ============================================================ */
.hp-contactpage__layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

/* ----- linke Spalte: Info-Karten ----- */
.hp-contactpage__info { display: grid; gap: clamp(1rem, 2vw, 1.25rem); }
.hp-infocard { padding: 1.25rem 1.5rem; }
.hp-infocard .hp-card__icon { width: 2.6rem; height: 2.6rem; margin-bottom: .75rem; font-size: 1.2rem; }
.hp-infocard .hp-card__title { font-size: 1.05rem; margin-bottom: .35rem; }
.hp-infocard__link { color: var(--hp-headline); font-weight: 600; text-decoration: none; }
.hp-infocard__link:hover { color: var(--hp-cyan); text-decoration: underline; text-underline-offset: 2px; }
.hp-infocard--wa { border-top: 2px solid #25D366; }
.hp-infocard--wa .hp-card__icon { color: #25D366; background: rgba(37, 211, 102, .16); }
.hp-infocard--wa:hover { border-color: #25D366; box-shadow: 0 0 0 1px rgba(37, 211, 102, .2), 0 0 24px -6px rgba(37, 211, 102, .5); }
.hp-infocard--wa .hp-infocard__link { color: #2ee06e; }
.hp-infocard--wa .hp-infocard__link:hover { color: #5dff7d; }

/* ----- Trust-Hinweise ----- */
.hp-infotrust { border-top: 2px solid var(--hp-cyan); }
.hp-infotrust__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.hp-infotrust__list li { display: flex; align-items: flex-start; gap: .65rem; color: var(--hp-text-muted); font-size: .95rem; }
.hp-infotrust__list i { color: var(--hp-cyan); margin-top: .2rem; flex: 0 0 auto; width: 1.1rem; text-align: center; }

/* ----- rechte Spalte: Formular-Panel ----- */
.hp-formpanel { padding: clamp(1.5rem, 3vw, 2.25rem); }
.hp-formpanel__title {
    margin-bottom: 1.5rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--hp-border);
}
.hp-formpanel form { margin: 0; }

/* Field-Gruppen */
.hp-formpanel .form-group { margin-bottom: 1.25rem; }
.hp-formpanel .form-group:last-of-type { margin-bottom: 0; }

/* Labels */
.hp-formpanel label {
    display: block;
    margin-bottom: .5rem;
    color: var(--hp-text);
    font-weight: 600;
    font-size: .95rem;
}

/* Inputs / Textarea / Select */
.hp-formpanel input[type="text"],
.hp-formpanel input[type="email"],
.hp-formpanel input[type="tel"],
.hp-formpanel input[type="url"],
.hp-formpanel input[type="number"],
.hp-formpanel textarea,
.hp-formpanel select {
    width: 100%;
    padding: .8rem .9rem;
    background: var(--hp-surface-2);
    border: 1px solid var(--hp-border-strong);
    border-radius: var(--hp-r-md);
    color: var(--hp-text);
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color var(--hp-dur) var(--hp-ease), box-shadow var(--hp-dur) var(--hp-ease);
}
.hp-formpanel textarea { resize: vertical; min-height: 8rem; }

.hp-formpanel input::placeholder,
.hp-formpanel textarea::placeholder { color: var(--hp-text-faint); opacity: 1; }

/* Cyan-Focus-Ring (WCAG: deutlich sichtbar, kein outline:none ohne Ersatz) */
.hp-formpanel input:focus,
.hp-formpanel textarea:focus,
.hp-formpanel select:focus {
    outline: none;
    border-color: var(--hp-cyan);
    box-shadow: var(--hp-ring);
}

/* Select: eigener Chevron, Optionen dunkel */
.hp-formpanel select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300C2CB' d='M6 8 1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
}
.hp-formpanel select option { background: var(--hp-surface); color: var(--hp-text); }

/* Display-Feld (Datenschutz-Hinweistext) */
.hp-formpanel .form-display,
.hp-formpanel .form-field-display { color: var(--hp-text-muted); font-size: .9rem; line-height: 1.6; }
.hp-formpanel .form-display a,
.hp-formpanel .form-field-display a { color: var(--hp-headline); text-decoration: underline; text-underline-offset: 2px; }
.hp-formpanel .form-display a:hover,
.hp-formpanel .form-field-display a:hover { color: var(--hp-cyan); }

/* Checkbox (Pflicht-Einwilligung) */
.hp-formpanel .checkbox,
.hp-formpanel .form-input-wrapper.checkboxes label,
.hp-formpanel label.checkbox {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-weight: 400;
    font-size: .95rem;
    color: var(--hp-text-muted);
    cursor: pointer;
    margin-bottom: 0;
}
.hp-formpanel input[type="checkbox"],
.hp-formpanel input[type="radio"] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .1rem;
    accent-color: var(--hp-cyan);
    cursor: pointer;
}
.hp-formpanel input[type="checkbox"]:focus-visible,
.hp-formpanel input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: var(--hp-ring);
    border-radius: 4px;
}

/* Submit-Button als hp-btn--primary, volle Breite */
.hp-formpanel .buttons { margin-top: 1.5rem; }
.hp-formpanel button,
.hp-formpanel .button,
.hp-formpanel input[type="submit"],
.hp-formpanel .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 48px;
    padding: .9rem 1.4rem;
    border: none;
    border-radius: var(--hp-r-md);
    background: var(--hp-cyan);
    color: #0B1416;
    font: inherit;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: filter var(--hp-dur) var(--hp-ease), box-shadow var(--hp-dur) var(--hp-ease);
}
.hp-formpanel button:hover,
.hp-formpanel .button:hover,
.hp-formpanel input[type="submit"]:hover,
.hp-formpanel .cta-button:hover { filter: brightness(1.06); box-shadow: var(--hp-glow-strong); }
.hp-formpanel button:focus-visible,
.hp-formpanel .button:focus-visible,
.hp-formpanel input[type="submit"]:focus-visible,
.hp-formpanel .cta-button:focus-visible { outline: none; box-shadow: var(--hp-ring); }

/* Fehler-/Erfolg-Meldungen des Form-Plugins */
.hp-formpanel .form-messages { margin-bottom: 1.25rem; }
.hp-formpanel .form-message,
.hp-formpanel .notice { padding: .8rem 1rem; border-radius: var(--hp-r-md); font-size: .95rem; }
.hp-formpanel .form-message.error,
.hp-formpanel .notice.error,
.hp-formpanel .form-errors { color: #ffb3b3; background: rgba(255, 97, 102, .12); border: 1px solid #FF6166; }
.hp-formpanel .form-message.success,
.hp-formpanel .notice.success { color: #9bf0bf; background: rgba(48, 185, 106, .12); border: 1px solid #30B96A; }

/* ============================================================ SCROLL-REVEAL */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--hp-ease), transform .6s var(--hp-ease); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ============================================================ RESPONSIVE */
@media (max-width: 900px) {
    .hp-grid--3 { grid-template-columns: 1fr 1fr; }
    .hp-trust__grid { grid-template-columns: 1fr; }
    .hp-steps--num { grid-template-columns: 1fr 1fr; }
    .hp-deepdive__layout { grid-template-columns: 1fr; }
    .hp-selfhosted { grid-template-columns: 1fr; }
    /* Kontaktseite: Form unter die Info-Spalte, Info-Karten 2-spaltig */
    .hp-contactpage__layout { grid-template-columns: 1fr; }
    .hp-contactpage__info { grid-template-columns: 1fr 1fr; }
    .hp-infotrust { grid-column: 1 / -1; }
    /* Pfeile in 2-Spalten-Layouts ausblenden (sonst falsch positioniert) */
    .hp-steps--num .hp-step::after { display: none; }
}

@media (max-width: 640px) {
    .hp-hero__paths { grid-template-columns: 1fr; }
    .hp-grid--2, .hp-grid--3 { grid-template-columns: 1fr; }
    .hp-trust__grid { grid-template-columns: 1fr; }
    .hp-steps--flow, .hp-steps--num { grid-template-columns: 1fr; }
    .hp-stats__grid { grid-template-columns: 1fr; gap: 2rem; }
    .hp-checklist--cols { grid-template-columns: 1fr; }
    .hp-contactpage__info { grid-template-columns: 1fr; }
    .hp-infotrust { grid-column: auto; }
    /* vertikaler Flow: Pfeile nach unten zeigen lassen */
    .hp-steps--flow .hp-step::after,
    .hp-steps--num .hp-step::after {
        content: '↓'; right: auto; left: 50%; top: auto; bottom: -1.2rem; transform: translateX(-50%);
    }
    .hp-steps .hp-step:last-child::after { display: none; }
    .hp-band__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .hp-card, .hp-btn, .hp-accordion__chevron, .hp-chip { transition: none; }
    html.js .reveal { opacity: 1; transform: none; transition: none; }
    .hp-hero__canvas { display: none; }
    .hp-card:hover { transform: none; }
}

/* ============================================================ PROSE (Impressum/Datenschutz/Danke) */
.hp-prose { max-width: 820px; margin-inline: auto; color: var(--hp-text-muted); line-height: 1.75; }
.hp-prose > :first-child { margin-top: 0; }
.hp-prose h1, .hp-prose h2, .hp-prose h3, .hp-prose h4 { color: var(--hp-headline); line-height: 1.25; }
.hp-prose h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin: 2.2rem 0 .7rem; }
.hp-prose h3 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
.hp-prose h4 { font-size: 1.05rem; margin: 1.3rem 0 .4rem; color: var(--hp-text); }
.hp-prose p { margin: 0 0 1rem; }
.hp-prose a { color: var(--hp-cyan); text-decoration: underline; text-underline-offset: 2px; }
.hp-prose a:hover { color: var(--hp-headline); }
.hp-prose ul, .hp-prose ol { margin: 0 0 1rem 1.3rem; padding: 0; }
.hp-prose li { margin-bottom: .45rem; }
.hp-prose strong { color: var(--hp-text); }
.hp-prose hr { border: none; border-top: 1px solid var(--hp-border); margin: 2rem 0; }
.hp-prose code { font-family: var(--hp-mono); background: var(--hp-surface-2); padding: .1em .4em; border-radius: 4px; font-size: .9em; }