/* ==========================================================
   Hessen-Server.de, Theme "hessen": Abschnitte der Startseite
   (nur auf der Startseite geladen, header.tpl). Gewählt von Alex
   am 18.10.2026 aus dem Katalog "Abschnitte": Pakete C, Vorteile A,
   Updates A, Vertrauen A, Domainpreise A, Abschluss A.
   Farben, Schrift und Knöpfe kommen aus custom.css (Präfix hs-).
   ========================================================== */

/* Startseite ohne Nexus-Rand: Abschnitte gehen über die volle Breite */
#main-body.hs-main-start { padding: 0; background: var(--hs-nebel); }
#main-body.hs-main-start .primary-content { padding: 0; }
:root { --hs-unter-bruecke: var(--hs-nebel); }
.hs-abschnitt { scroll-margin-top: 40px; }

/* ---------- Pakete: Wähler ---------- */
.hs-pakete { padding: clamp(84px, 8vw, 120px) 0 clamp(72px, 8vw, 112px); background: var(--hs-nebel); }
.hs-pakete-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: 0 clamp(32px, 5vw, 80px); align-items: start; }
.hs-pakete-links { grid-column: 1; grid-row: 1; }
.hs-pakete-detail { grid-column: 2; grid-row: 1 / span 2; }
.hs-pakete-fussnote { grid-column: 1; grid-row: 2; margin-top: 20px; font-size: 14px; color: var(--hs-grau); }
.hs-pakete-titel { max-width: 14ch; font-size: clamp(32px, 3.6vw, 50px); font-weight: 750; line-height: 1.06; letter-spacing: -0.03em; }
.hs-pakete-unter { margin-top: 14px; color: var(--hs-grau); }
.hs-pakete-laufzeit { display: flex; gap: 4px; margin-top: 28px; padding: 4px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--hs-linie); }
.hs-pakete-laufzeit label { position: relative; flex: 1; margin: 0; }
.hs-pakete-laufzeit span { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 10px; font-weight: 650; color: var(--hs-grau); cursor: pointer; transition: background-color .2s, color .2s; }
.hs-pakete-laufzeit label:hover span { color: var(--hs-tinte); }
.hs-pakete-laufzeit input:checked + span { background: var(--hs-tinte); color: #fff; }
.hs-pakete-laufzeit input:focus-visible + span { outline: 2px solid var(--hs-blau); outline-offset: 2px; }
/* Alex: Spar-Hinweis zentriert unter dem Umschalter */
.hs-pakete-spar { margin-top: 10px; font-size: 14.5px; color: var(--hs-grau); text-align: center; }
.hs-pakete-spar b { color: var(--hs-gruen); }
.hs-pakete-wahl { display: grid; gap: 10px; margin-top: 16px; }
.hs-pakete-option { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 16px; margin: 0; padding: 18px 20px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hs-linie); cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.hs-pakete-option:hover { background: #fff; }
.hs-pakete-option:has(input:checked) { background: #fff; box-shadow: inset 0 0 0 2px var(--hs-blau), 0 18px 30px -24px rgba(11,31,68,.45); }
.hs-pakete-option:has(input:focus-visible) { outline: 2px solid var(--hs-blau); outline-offset: 3px; }
.hs-pakete-kreis { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hs-rand); transition: box-shadow .2s; }
.hs-pakete-option:has(input:checked) .hs-pakete-kreis { box-shadow: inset 0 0 0 7px var(--hs-blau); }
.hs-pakete-optname { font-size: 22px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; }
.hs-pakete-optkurz { grid-column: 2; font-size: 14.5px; color: var(--hs-grau); }
.hs-pakete-optpreis { grid-column: 3; grid-row: 1 / span 2; font-weight: 650; text-align: right; white-space: nowrap; }
.hs-pakete-knapp { display: none; }

.hs-pakete-detail { border-radius: 26px; background: var(--hs-blau); color: #fff; }
.hs-pakete-detail article { padding: clamp(28px, 4vw, 56px); }
.hs-pakete-detail article[hidden] { display: none; }
.hs-pakete-detail h3 { font-size: clamp(30px, 3vw, 40px); font-weight: 750; line-height: 1.1; letter-spacing: -0.025em; }
.hs-pakete-zeile { max-width: 34ch; margin-top: 6px; color: var(--hs-hell); }
.hs-pakete-preis { margin-top: 26px; }
.hs-pakete-betrag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-weight: 600; color: var(--hs-hell); }
.hs-pakete-betrag b { font-family: var(--hs-display); font-size: clamp(46px, 5vw, 68px); font-weight: 750; line-height: 1; letter-spacing: -0.035em; color: #fff; white-space: nowrap; }
.hs-pakete-neben { margin-top: 8px; font-size: 15px; color: var(--hs-hell); }
.hs-pakete-ersparnis { margin-top: 10px; font-size: 14.5px; color: var(--hs-hell); }
/* Bei Jährlich: Ersparnis grün mit Haken auf weißem Schild (Grün direkt auf Blau hätte zu wenig Kontrast) */
.hs-pakete[data-hs-zyklus="jaehrlich"] .hs-pakete-ersparnis { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 9px; background: #fff; font-size: 15px; font-weight: 700; color: var(--hs-gruen); }
.hs-pakete[data-hs-zyklus="jaehrlich"] .hs-pakete-ersparnis::before { content: ""; flex: none; width: 5px; height: 10px; margin: -3px 2px 0 3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Alex: Kennzahlen zentriert, Zahl über der Beschreibung */
.hs-pakete-werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.hs-pakete-werte div { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; }
.hs-pakete-werte dt { font-size: 14.5px; font-weight: 400; color: var(--hs-hell); }
.hs-pakete-werte dd { margin: 0; font-family: var(--hs-display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 750; line-height: 1.1; letter-spacing: -0.02em; }
.hs-pakete-extra { margin-top: 26px; }
.hs-pakete-extra h4 { font-size: 15px; font-weight: 650; color: var(--hs-hell); }
.hs-pakete-extra ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 10px 24px; margin-top: 12px; }
.hs-pakete-extra li { display: flex; gap: 10px; }
.hs-pakete-extra .hs-i { width: 18px; height: 18px; margin-top: 3px; }
.hs-pakete-bald { color: var(--hs-hell); }
.hs-pakete-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 34px; }
.hs-pakete-aktion p { font-size: 14.5px; color: var(--hs-hell); }
.hs-pakete[data-hs-zyklus="monatlich"] [data-nur="jaehrlich"], .hs-pakete[data-hs-zyklus="jaehrlich"] [data-nur="monatlich"] { display: none; }
@media (max-width: 960px) {
    .hs-pakete-raster { grid-template-columns: 1fr; grid-template-rows: none; }
    .hs-pakete-links, .hs-pakete-detail, .hs-pakete-fussnote { grid-column: 1; grid-row: auto; }
    .hs-pakete-detail { margin-top: 20px; }
    .hs-pakete-titel { max-width: 20ch; }
    .hs-pakete-wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .hs-pakete-option { grid-template-columns: 1fr; gap: 2px; padding: 14px 14px 12px; text-align: left; }
    .hs-pakete-kreis, .hs-pakete-optkurz { display: none; }
    .hs-pakete-optname { font-size: 19px; }
    .hs-pakete-optpreis { grid-column: 1; grid-row: auto; font-size: 15px; font-weight: 600; text-align: left; color: var(--hs-grau); }
    .hs-pakete-lang { display: none; }
    .hs-pakete-knapp { display: inline; }
}
@media (max-width: 640px) {
    .hs-pakete-werte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
    .hs-pakete-aktion .hs-knopf { width: 100%; }
    .hs-pakete-detail { border-radius: 20px; }
}

/* ---------- Vorteile: Raster ---------- */
.hs-vorteile { padding: clamp(84px, 9vw, 136px) 0; background: #fff; }
.hs-vorteile-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px clamp(40px, 6vw, 104px); align-items: start; }
.hs-vorteile-kopf { position: sticky; top: 170px; }
.hs-vorteile-kopf h2 { max-width: 10ch; font-size: clamp(34px, 3.8vw, 54px); font-weight: 750; line-height: 1.04; letter-spacing: -0.03em; }
.hs-vorteile-kopf p { max-width: 26ch; margin-top: 20px; font-size: 19px; line-height: 1.5; color: var(--hs-grau); }
.hs-vorteile-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px clamp(32px, 4vw, 56px); }
.hs-vorteile-liste li { position: relative; padding-top: 26px; border-top: 1px solid var(--hs-linie); }
.hs-vorteile-liste li::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: var(--hs-blau); }
.hs-vorteile-liste .hs-i { width: 28px; height: 28px; color: var(--hs-blau); stroke-width: 1.6; }
.hs-vorteile-liste h3 { margin-top: 18px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.hs-vorteile-liste p { max-width: 40ch; margin-top: 8px; font-size: 16.5px; color: var(--hs-grau); }
@media (max-width: 900px) {
    .hs-vorteile-raster { grid-template-columns: 1fr; }
    .hs-vorteile-kopf { position: static; }
    .hs-vorteile-kopf h2 { max-width: 16ch; }
    .hs-vorteile-kopf p { max-width: 36ch; }
}
@media (max-width: 640px) {
    .hs-vorteile-liste { grid-template-columns: 1fr; gap: 40px; }
    .hs-vorteile-kopf p { font-size: 18px; }
}

/* ---------- Hero und Updates (Lieferung 21.10.2026: js/hessen-hero.js, js/hessen-updates.js) ----------
   Die Skripte bringen ihre Stile selbst mit (Präfixe hsx- und hus-, als <style> im head) und nennen die
   Schriften ohne "Variable"; die beiden Namen zeigen hier auf dieselben Dateien wie in custom.css. */
@font-face { font-family: "Red Hat Display"; font-style: normal; font-display: swap; font-weight: 300 900; src: url(../fonts/red-hat-display-latin-wght-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Red Hat Text"; font-style: normal; font-display: swap; font-weight: 300 700; src: url(../fonts/red-hat-text-latin-wght-normal.woff2) format("woff2-variations"); }

/* Kopf über dem Hero: oben durchsichtig, damit die Grafik bis an den Rand läuft; beim Scrollen weiß wie
   überall, bei offenem Handymenü blau wie bisher */
.hs-kopf.hs-kopf-start { background: transparent; }
.hs-gescrollt .hs-kopf.hs-kopf-start { background: #fff; }
html.hs-menue-offen:not(.hs-gescrollt) .hs-kopf.hs-kopf-start { background: var(--hs-blau); }

/* Hero: rückt unter den Kopf (80 px, schmal 68 px). Die Höhe steht fest, weil das Skript den Text in eine
   absolut gesetzte Ebene legt; --hsx-h liest es selbst (.hsx-host). Unter 768 px schaltet es aufs Handy um;
   unter 390 px wird der Hero etwas höher, damit der Text nicht an die Domainsuche stößt (320 px: 547 px).
   Passt zu Überschriftzeilen bis etwa 20 Zeichen; bei neuen Texten mit startseite-held-check.js und HS_ERSATZ
   nachmessen. */
.hs-start-held { --hsx-h: 693px; position: relative; min-height: var(--hsx-h); margin-top: -80px; background: var(--hs-blau); color: #fff; }
@media (max-width: 860px) { .hs-start-held { margin-top: -68px; } }
@media (max-width: 767px) { .hs-start-held { --hsx-h: max(512px, calc(707px - 50vw)); } }

/* Text beider Bausteine am Raster der Seite (wie .hs-rahmen: Logo, Domainsuche, Abschnitte) statt an ihrem eigenen
   (1218 px, Rand 24 bzw. 20 px); die Grafik rechnen die Skripte danach selbst aus. Mit "section" eine Stufe
   stärker als ihre Handy-Regeln, die später im head stehen. */
section.hs-start-held .hsx .hsx-inner, section.hs-start-updates .hus .hus-wrap { max-width: 1280px; padding-left: clamp(16px, 4vw, 56px); padding-right: clamp(16px, 4vw, 56px); }

/* Update-Sektion: Farbe aus der Lieferung, Höhe wächst mit dem Inhalt. Die Mindesthöhe hält den Platz, bis das
   Skript die Sektion gebaut hat, und liegt unter der gebauten Höhe (gemessen 21.10.2026), sonst bliebe unten
   ein Streifen. */
.hs-start-updates { position: relative; min-height: 880px; background: #0c3c9c; color: #fff; }
@media (max-width: 1079px) { .hs-start-updates { min-height: 1300px; } }

/* Fehlerhinweis in Schritt 3 (em.st, setzt das Skript ein; sichtbar, solange der Schritt "held" ist) steht im selben
   Rasterfeld wie der Schrittsatz und ersetzt ihn, statt darunter Platz zu nehmen. Das Feld ist immer so hoch wie der
   längere der beiden Texte, die Sektion behält ihre Höhe (vorher sprang sie um 44 bis 63 px; Alex 23.10.2026).
   Nummer, Linie und Balken sind absolut gesetzt und keine Rasterzellen. Prüfung: updates-hoehe-check.js. */
section.hs-start-updates .hus-steps li { display: grid; grid-template-columns: minmax(0, 1fr); }
section.hs-start-updates .hus-steps li > span, section.hs-start-updates .hus-steps li > .st { grid-area: 2 / 1; align-self: start; }
section.hs-start-updates .hus-steps li > .st { display: block; visibility: hidden; }
section.hs-start-updates .hus-steps li.held > .st { visibility: visible; }
section.hs-start-updates .hus-steps li.held > span { visibility: hidden; }

/* Bis das Skript den Text übernimmt, steht er unsichtbar und ohne Höhe an seinem Platz, damit sich beim Start
   nichts verschiebt. Lädt das Skript nicht, klappt er nach 3 s auf (ohne JavaScript sofort: noscript in
   header.tpl setzt die Verzögerung auf 0). Nach der Übernahme greifen diese Regeln nicht mehr. */
@keyframes hs-start-zeigen { to { opacity: 1; max-height: 3000px; padding-top: 150px; padding-bottom: 170px; } }
.hs-start-held > [data-hs-copy], .hs-start-updates > [data-hs-copy] { max-width: 1218px; max-height: 0; margin: 0 auto; padding: 0 24px; overflow: hidden; opacity: 0; font-size: 18px; animation: hs-start-zeigen 0s 3s forwards; }
.hs-start-held > [data-hs-copy] a, .hs-start-updates > [data-hs-copy] a { color: #fff; text-decoration: underline; }

/* ---------- Vertrauen: drei Zusagen ---------- */
.hs-vertrauen { padding: clamp(80px, 8vw, 120px) 0; background: var(--hs-nebel); }
.hs-vertrauen h2 { font-size: clamp(28px, 2.8vw, 40px); font-weight: 750; line-height: 1.1; letter-spacing: -0.025em; }
.hs-vertrauen-block { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--hs-linie), 0 40px 70px -52px rgba(11,31,68,.5); }
.hs-vertrauen-block li { padding: clamp(28px, 3vw, 44px) clamp(22px, 2.6vw, 40px); }
.hs-vertrauen-block li + li { border-left: 1px solid var(--hs-linie); }
.hs-vertrauen-symbol { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--hs-zart); color: var(--hs-blau); }
.hs-vertrauen-symbol .hs-i { width: 26px; height: 26px; }
.hs-vertrauen-block h3 { margin-top: 22px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.hs-vertrauen-block p { max-width: 34ch; margin-top: 8px; font-size: 16.5px; color: var(--hs-grau); }
@media (max-width: 860px) {
    .hs-vertrauen-block { grid-template-columns: 1fr; }
    .hs-vertrauen-block li + li { border-left: 0; border-top: 1px solid var(--hs-linie); }
}

/* ---------- Domainpreise: Endungen groß ---------- */
.hs-domains { padding: clamp(84px, 9vw, 136px) 0; background: #fff; }
.hs-domains-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.hs-domains-kopf h2 { font-size: clamp(32px, 3.6vw, 50px); font-weight: 750; line-height: 1.05; letter-spacing: -0.03em; }
.hs-domains-kopf p { max-width: 44ch; margin-top: 12px; color: var(--hs-grau); }
.hs-domains-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hs-domains-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 4vw, 56px); border-top: 2px solid var(--hs-tinte); }
.hs-domains-liste li { position: relative; padding: clamp(26px, 3vw, 40px) clamp(16px, 2vw, 32px) 8px; }
.hs-domains-liste li:first-child { padding-left: 0; }
.hs-domains-liste li + li { border-left: 1px solid var(--hs-linie); }
.hs-domains-endung { font-size: clamp(54px, 6vw, 92px); font-weight: 750; line-height: .95; letter-spacing: -0.045em; color: var(--hs-tinte); }
.hs-domains-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--hs-grau); }
.hs-domains-preis b { font-family: var(--hs-display); font-size: 28px; font-weight: 750; letter-spacing: -0.02em; color: var(--hs-tinte); white-space: nowrap; }
.hs-domains-verl { margin-top: 6px; font-size: 15px; color: var(--hs-grau); }
.hs-domains-verl-anders { font-weight: 650; color: var(--hs-tief); }
.hs-domains-angebot { display: inline-block; margin-top: 12px; padding: 2px 9px; border-radius: 7px; background: var(--hs-zart); color: var(--hs-tief); font-size: 13.5px; font-weight: 650; }
.hs-domains-gratis { display: flex; align-items: flex-start; gap: 12px; margin-top: clamp(36px, 4vw, 52px); padding-top: 22px; border-top: 1px solid var(--hs-linie); font-size: 16px; color: var(--hs-grau); }
.hs-domains-gratis .hs-i { width: 22px; height: 22px; margin-top: 1px; color: var(--hs-blau); }
@media (max-width: 860px) {
    .hs-domains-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hs-domains-liste li { padding: 26px 16px 22px; }
    .hs-domains-liste li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .hs-domains-liste li:nth-child(n+3) { border-top: 1px solid var(--hs-linie); }
}
@media (max-width: 640px) {
    .hs-domains-aktion { width: 100%; }
    .hs-domains-aktion .hs-knopf { flex: 1; }
    .hs-domains-endung { font-size: 46px; }
    .hs-domains-preis b { font-size: 24px; }
}

/* ---------- Abschluss: Schlussfläche ---------- */
.hs-abschluss { padding: clamp(96px, 10vw, 152px) 0; background: var(--hs-blau); color: #fff; text-align: center; }
.hs-abschluss h2 { max-width: 15ch; margin: 0 auto; font-size: clamp(38px, 5.4vw, 80px); font-weight: 750; line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.hs-abschluss p { max-width: 44ch; margin: 26px auto 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--hs-hell); }
.hs-abschluss-aktion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; margin-top: 40px; }
.hs-abschluss-aktion .hs-knopf { min-height: 54px; padding: 0 28px; font-size: 17px; }
@media (max-width: 640px) {
    .hs-abschluss { text-align: left; }
    .hs-abschluss h2, .hs-abschluss p { margin-left: 0; }
    .hs-abschluss-aktion { justify-content: flex-start; }
    .hs-abschluss-aktion .hs-knopf { width: 100%; }
}