/* ============================================================
   Webhosting-Seite (webhosting.html). Baut auf style.css auf und
   bringt nur mit, was dort fehlt. Bewusst zurueckhaltend: eine
   Akzentfarbe, duenne Linien, keine Verlaeufe, keine Symbole.
   ============================================================ */

.wh-seite {
    --wh-text: #111827;
    --wh-leise: #4b5563;
    --wh-linie: #e5e7eb;
    --wh-flaeche: #f9fafb;
    --wh-akzent: #1d4ed8;
    --wh-akzent-dunkel: #1e40af;
    --primary-color: #1d4ed8;
    --primary-dark: #1e40af;
    background: #fff;
    color: var(--wh-text);
}

.wh-seite .navbar { background: #fff; border-bottom: 1px solid var(--wh-linie); }
.wh-seite .navbar.scrolled { box-shadow: none; }
.nav-link-aktiv { color: var(--wh-akzent); }

.wh-seite h1,
.wh-seite h2 { letter-spacing: -0.01em; }

/* ── Kopf ──────────────────────────────────────────────────── */
.wh-kopf {
    padding: 9.5rem 0 3rem;
    background: var(--wh-flaeche);
    border-bottom: 1px solid var(--wh-linie);
}

.wh-pfad {
    font-size: 0.875rem;
    color: var(--wh-leise);
    margin-bottom: 1rem;
}

.wh-pfad a { color: var(--wh-leise); text-decoration: none; }
.wh-pfad a:hover { color: var(--wh-akzent); }
.wh-pfad span { margin: 0 0.4rem; }

.wh-kopf h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;
}

.wh-einleitung {
    max-width: 680px;
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--wh-leise);
}

/* ── Pakete ────────────────────────────────────────────────── */
.wh-pakete-bereich { padding: 3.5rem 0 4rem; }

.wh-pakete {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--wh-linie);
    border-radius: 8px;
    overflow: hidden;
}

.wh-paket {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem 1.75rem;
    background: #fff;
}

.wh-paket + .wh-paket { border-left: 1px solid var(--wh-linie); }

.wh-empfohlen { box-shadow: inset 0 3px 0 var(--wh-akzent); }

.wh-markierung {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wh-akzent);
}

.wh-paket h2 {
    font-size: 1.25rem;
    font-weight: 700;
}

.wh-fuer {
    margin-top: 0.25rem;
    color: var(--wh-leise);
    font-size: 0.95rem;
    min-height: 2.8em;
}

.wh-preis {
    margin: 1.25rem 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--wh-linie);
    color: var(--wh-leise);
    font-size: 0.95rem;
}

.wh-preis span {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--wh-text);
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.wh-alles {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.wh-liste {
    list-style: none;
    margin-bottom: 1.75rem;
    flex: 1;
}

.wh-liste li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.4rem;
    font-size: 0.95rem;
}

/* Ein schlichter Haken aus zwei Linien statt eines Symbols. */
.wh-liste li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.75rem;
    width: 0.7rem;
    height: 0.38rem;
    border-left: 2px solid var(--wh-akzent);
    border-bottom: 2px solid var(--wh-akzent);
    transform: rotate(-45deg);
}

/* Domain-Zusatz bei Basic und Fortgeschritten, direkt ueber dem Knopf. */
.wh-zusatz {
    margin: -0.75rem 0 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wh-leise);
}

/* Individuell hebt sich dunkel ab: kein Paket, sondern ein Gespraech. */
.wh-individuell {
    background: #1f2937;
    color: #fff;
}

.wh-individuell .wh-fuer,
.wh-individuell .wh-preis { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.15); }
.wh-individuell .wh-preis span { color: #fff; }
.wh-individuell .wh-liste li::before { border-color: #93c5fd; }

/* ── Knoepfe ───────────────────────────────────────────────── */
.wh-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0.65rem 1.25rem;
    background: #fff;
    border: 1px solid var(--wh-akzent);
    border-radius: 6px;
    color: var(--wh-akzent);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wh-knopf:hover { background: #eff6ff; }

.wh-knopf-voll { background: var(--wh-akzent); color: #fff; }

.wh-knopf-hell { background: #fff; border-color: #fff; color: #1f2937; }
.wh-knopf-hell:hover { background: #e5e7eb; }
.wh-knopf-voll:hover { background: var(--wh-akzent-dunkel); }

.wh-knopf:focus-visible {
    outline: 3px solid #bfdbfe;
    outline-offset: 2px;
}

.wh-fussnote {
    margin-top: 1rem;
    color: var(--wh-leise);
    font-size: 0.85rem;
}

/* ── Vergleich ─────────────────────────────────────────────── */
.wh-vergleich {
    padding: 4rem 0;
    background: var(--wh-flaeche);
    border-top: 1px solid var(--wh-linie);
}

.wh-vergleich h2,
.wh-kontakt h2 {
    font-size: 1.6rem;
    font-weight: 700;
}

.wh-tabelle-rahmen {
    margin-top: 1.5rem;
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--wh-linie);
    border-radius: 8px;
}

.wh-tabelle {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.wh-tabelle th,
.wh-tabelle td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wh-linie);
    text-align: center;
}

.wh-tabelle tbody tr:last-child th,
.wh-tabelle tbody tr:last-child td { border-bottom: none; }

.wh-tabelle th[scope="row"],
.wh-tabelle thead th:first-child {
    text-align: left;
    font-weight: 500;
}

.wh-tabelle thead th {
    background: var(--wh-flaeche);
    font-weight: 700;
}

.wh-tabelle td { white-space: nowrap; }
/* Haken und Strich statt Wort; das Wort bleibt fuer Vorleseprogramme. */
.wh-tabelle td.ja span,
.wh-tabelle td.nein span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.wh-tabelle td.ja::before {
    content: "";
    display: inline-block;
    width: 0.8rem;
    height: 0.42rem;
    border-left: 2px solid var(--wh-akzent);
    border-bottom: 2px solid var(--wh-akzent);
    transform: translateY(-0.2rem) rotate(-45deg);
}

.wh-tabelle td.nein::before {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 2px;
    background: #d1d5db;
    vertical-align: middle;
}

/* ── Kontakt ───────────────────────────────────────────────── */
.wh-kontakt {
    padding: 3.5rem 0;
    border-top: 1px solid var(--wh-linie);
}

.wh-kontakt-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.wh-kontakt p { margin-top: 0.4rem; color: var(--wh-leise); }
.wh-kontakt .wh-knopf { width: auto; min-width: 200px; }

/* ── Dialog ────────────────────────────────────────────────── */
.wh-dialog {
    --bk-farbe: var(--wh-akzent);
    --bk-farbe-hell: #eff6ff;
    --bk-text: #111827;
    --bk-leise: #4b5563;
    --bk-rand: #d1d5db;
    --bk-rand-stark: #9ca3af;

    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(17, 24, 39, 0.55);
}

.wh-dialog[hidden] { display: none; }
.wh-dialog [hidden] { display: none !important; }

.wh-dialog-karte {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    color: var(--bk-text);
}

.wh-dialog-karte h2 {
    font-size: 1.4rem;
    font-weight: 700;
    padding-right: 2.5rem;
}

.wh-dialog-paket {
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wh-akzent);
}

.wh-dialog-text {
    margin-top: 0.5rem;
    color: var(--bk-leise);
    font-size: 0.95rem;
    line-height: 1.6;
}

.wh-dialog .bk-feld:first-child { margin-top: 1.25rem; }
.wh-dialog .bk-feld { margin-top: 1.1rem; }
.wh-dialog .bk-label { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.35rem; }
.wh-dialog .bk-eingabe {
    min-height: 46px;
    font-size: 1rem;
    border-width: 1px;
    border-radius: 6px;
}
.wh-dialog .bk-eingabe:focus { outline-width: 2px; }
.wh-dialog textarea.bk-eingabe { min-height: 110px; }

.wh-zeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.wh-zeile .bk-feld:first-child,
.wh-zeile .bk-feld { margin-top: 1.25rem; }

.wh-domain {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--bk-rand);
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
}

.wh-domain:has(input:checked) {
    border-color: var(--bk-farbe);
    background: var(--bk-farbe-hell);
}

.wh-domain input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--bk-farbe);
    flex-shrink: 0;
}

.wh-honig {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.wh-dialog #wh-meldung { margin-top: 1rem; font-size: 0.95rem; }

.wh-senden { margin-top: 1.5rem; }
.wh-dialog .wh-knopf:disabled { opacity: 0.6; cursor: wait; }

.wh-kleingedruckt {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--bk-leise);
}

.wh-kleingedruckt a,
.wh-dialog-text a { color: var(--wh-akzent); }

.wh-fertig h2 { outline: none; }
.wh-fertig .wh-knopf { margin-top: 1.5rem; }

/* ── Schmal ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .wh-pakete { grid-template-columns: repeat(2, 1fr); }
    .wh-paket + .wh-paket { border-left: none; }
    .wh-paket:nth-child(even) { border-left: 1px solid var(--wh-linie); }
    .wh-paket:nth-child(n+3) { border-top: 1px solid var(--wh-linie); }
}

@media (max-width: 640px) {
    .wh-kopf { padding: 7.5rem 0 2.25rem; }
    .wh-kopf h1 { font-size: 2rem; }
    .wh-pakete { grid-template-columns: 1fr; }
    .wh-paket:nth-child(even) { border-left: none; }
    .wh-paket + .wh-paket { border-top: 1px solid var(--wh-linie); }
    .wh-fuer { min-height: 0; }
    .wh-kontakt-zeile { flex-direction: column; align-items: stretch; }
    .wh-kontakt .wh-knopf { width: 100%; }
    .wh-zeile { grid-template-columns: 1fr; gap: 0; }
    .wh-dialog { padding: 0.5rem; align-items: flex-end; }
    .wh-dialog-karte { padding: 1.5rem 1.25rem; max-height: calc(100dvh - 1rem); }
}