/* Domain-Verkauf.
   Gestaltungskonstanten dieses Auftrags, bewusst festgelegt:
   Palette: Schwarz als Grund, Offwhite als Text, Petrol als Akzent, das IMAGETOWN-Highlight nur fuer Preise und Akzente.
   Typo: system-ui, ein Blickanker je Bildschirm, linksbuendig, keine Versalien.
   Struktur: flache Sektionen mit Haarlinien und Weissraum. Keine Karten, keine
   Fuellflaechen, keine Verlaeufe. Eine Box muss ihren Rahmen verdienen, das tun
   hier nur Eingabefelder und Schaltflaechen.
   Rhythmus: 8er-System, eng in Gruppen, weit zwischen Sektionen. */

:root {
  /* IMAGETOWN-Palette: Schwarz, Petrol-Reihe, Highlight fuer Preise und Akzente.
     Highlight #00afaa erreicht 7.7:1 auf Schwarz und traegt auch kleinen Text,
     Petrol #006e69 erreicht 3.4:1 und bleibt Flaechen und UI-Elementen vorbehalten. */
  --schwarz: #000000;
  --offwhite: #e5ede8;
  --petrol-dunkel: #003c3c;
  --petrol: #006e69;
  --highlight: #00afaa;

  /* Kontrast auf schwarzem Grund, gegen WCAG AA gerechnet:
     0.56 ergibt 5.6:1 fuer kleinen Text, 0.40 ergibt 3.1:1 fuer Bedienelemente.
     Rein dekorative Haarlinien duerfen darunter liegen. */
  --linie: rgba(229, 237, 232, 0.16);
  --linie-stark: rgba(229, 237, 232, 0.40);
  --linie-eingabe: rgba(229, 237, 232, 0.40);
  --gedaempft: rgba(229, 237, 232, 0.68);
  --leise: rgba(229, 237, 232, 0.56);

  --radius-klein: 12px;
  --spur: -0.035em;
  --schrift: system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;

  --abstand-sektion: 96px;
  --abstand-sektion-innen: 40px;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut gewinnt gegen jede display-Regel. Ohne diese Zeile
   ueberstimmt .knopf mit inline-flex das Attribut, und verborgene Schaltflaechen
   bleiben sichtbar. Genau das war der Fehler mit dem Absenden-Knopf. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--schwarz);
  color: var(--offwhite);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.huelle {
  width: 100%;
  padding: 0 clamp(24px, 7vw, 128px);
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
}

/* Kopf: nur der Sprachumschalter, die Domain selbst ist die erste Aussage */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
}

.marke {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gedaempft);
}

.sprache {
  font-size: 14px;
  color: var(--gedaempft);
  text-decoration: none;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  padding: 8px 18px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: border-color 0.2s, color 0.2s;
}

.sprache:hover { color: var(--offwhite); border-color: var(--offwhite); }

/* Hero: Domain, Preis, Handlung. Linksbuendig, ohne Behaelter. */

.hero { padding-top: clamp(56px, 10vh, 120px); }

.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--gedaempft);
}

.abzeichen::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--highlight);
}

h1 {
  margin: 0;
  font-size: clamp(44px, 9vw, 128px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: var(--spur);
  overflow-wrap: anywhere;
}

.preisband {
  margin-top: clamp(40px, 7vh, 72px);
  padding: 28px 0 0;
  border-top: 1px solid var(--linie);
  display: grid;
  gap: 24px;
}

@media (min-width: 900px) {
  .preisband {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.preis-label {
  margin: 0;
  font-size: 15px;
  color: var(--leise);
}

.preis {
  margin: 2px 0 0;
  font-size: clamp(34px, 6vw, 48px);
  font-weight: 700;
  letter-spacing: var(--spur);
  line-height: 1.1;
  color: var(--highlight);
}

.preis-zusatz {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--leise);
}

/* Muss lesbar sein, nicht versteckt: die Beschränkung auf Unternehmen trägt nur,
   wenn sie dort steht, wo die Entscheidung fällt. */
.preis-b2b {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--gedaempft);
}

.mindestgebot {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--gedaempft);
}

/* Schaltflaechen: Pillen als Markenzeichen, sonst nichts Rundes */

.knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 900px) {
  .preisband .knoepfe { justify-content: flex-end; }
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}

.knopf-voll { background: var(--offwhite); color: var(--schwarz); }
.knopf-voll:hover { background: #ffffff; }

.knopf-leer {
  background: transparent;
  border-color: var(--linie-stark);
  color: var(--offwhite);
}

.knopf-leer:hover { border-color: var(--offwhite); }

.knopf:disabled { opacity: 0.55; cursor: default; }

@media (max-width: 639px) {
  .knoepfe .knopf,
  .schaltleiste .knopf { width: 100%; }
}

/* Sektionen: Haarlinie oben, viel Luft, keine Behaelter */

section {
  margin-top: var(--abstand-sektion);
  border-top: 1px solid var(--linie);
  padding-top: var(--abstand-sektion-innen);
}

h2 {
  margin: 0 0 32px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Auf grossen Flaechen wandert der Titel in eine eigene linke Spalte,
   der Inhalt steht rechts. Das traegt die volle Breite, ohne sie zu fuellen. */
@media (min-width: 960px) {
  section {
    display: grid;
    grid-template-columns: clamp(220px, 26vw, 360px) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 96px);
    align-items: start;
  }
  section > h2 { grid-column: 1; margin: 0; }
  section > *:not(h2) { grid-column: 2; }
}

/* Zeilen: das Grundmuster fuer Ablauf und Verkaeuferangaben.
   Desktop zweispaltig (Titel links, Text rechts), mobil untereinander. */

.zeilen { display: grid; }

/* Schrittzeile: die Nummer steht in einer eigenen schmalen Spalte, Titel und
   Text daneben buendig untereinander. Nichts bricht unter die Nummer um. */
.zeile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--linie);
}

.zeile:first-child { border-top: 0; padding-top: 0; }

.zeile .nr {
  color: var(--highlight);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.zeile h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.zeile p {
  margin: 0;
  font-size: 15px;
  color: var(--gedaempft);
  max-width: 62ch;
}

/* Paket: eine Zeile, Preis rechts, kein Kasten */

.paket {
  display: grid;
  gap: 20px 40px;
}

.paket-info h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.paket-info p {
  margin: 0;
  font-size: 15px;
  color: var(--gedaempft);
  max-width: 36em;
}

.paket-preis {
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: var(--spur);
  color: var(--highlight);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .paket { grid-template-columns: 1fr auto; align-items: start; }
  .paket-aktion { text-align: right; }
}

@media (max-width: 639px) {
  .paket-aktion .knopf { width: 100%; }
}

/* Formular: flach, nur die Eingabefelder tragen Rahmen.
   Volle Seitenbreite waere hier unbedienbar, das Formular behaelt ein Arbeitsmass
   und bleibt links an der Kante. */

#anfrageformular { max-width: 760px; }

.schrittzaehler {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--leise);
}

.fortschritt {
  height: 2px;
  margin-bottom: 32px;
  background: rgba(229, 237, 232, 0.1);
  overflow: hidden;
}

.fortschritt span {
  display: block;
  height: 100%;
  width: 25%;
  /* der Markenverlauf, sparsam an genau einer Stelle */
  background: linear-gradient(90deg, var(--highlight), var(--petrol));
  transition: width 0.35s ease;
}

.schritt { margin: 0; padding: 0; border: 0; min-width: 0; }

.schritt legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.schritt-text {
  margin: 0 0 32px;
  font-size: 15px;
  color: var(--gedaempft);
  max-width: 60ch;
}

.wahl { display: grid; gap: 10px; margin-top: 20px; }

.wahl-knopf {
  display: block;
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid var(--linie-eingabe);
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--offwhite);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.wahl-knopf:hover { border-color: var(--offwhite); }

.wahl-knopf.gewaehlt {
  border-color: var(--highlight);
  background: rgba(0, 175, 170, 0.08);
}

.wahl-knopf strong { display: block; font-size: 16px; font-weight: 600; }

.wahl-knopf span {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--gedaempft);
}

.feld { margin-bottom: 28px; }

.feld label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
}

.feld .optional { font-weight: 400; color: var(--leise); }

/* Bestätigungshaken.
   Muss .feld label schlagen, sonst gewinnt dessen display block und der Text
   rutscht unter das Kästchen. Das Kästchen selbst ist eigengezeichnet, weil
   die Browservorgabe im dunklen Layout fremd wirkt. */
.feld label.haken {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 18px 20px;
  border: 1.5px solid var(--linie-eingabe);
  border-radius: var(--radius-klein);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.haken:hover { border-color: var(--offwhite); }

/* Die echte Ankreuzfläche bleibt bedienbar und für Hilfstechnik sichtbar,
   nur unsichtbar gestellt. Gezeichnet wird das Kästchen daneben. */
.haken input {
  position: absolute;
  opacity: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
}

.haken .kasten {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--linie-eingabe);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, border-color 0.2s;
}

/* Das Häkchen selbst, gezeichnet statt als Zeichen gesetzt */
.haken .kasten::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--schwarz);
  border-bottom: 2px solid var(--schwarz);
  transform: rotate(-45deg) scale(0.6);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

.haken:hover .kasten { border-color: var(--offwhite); }

.haken input:checked ~ .kasten {
  background: var(--highlight);
  border-color: var(--highlight);
}

.haken input:checked ~ .kasten::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.haken input:focus-visible ~ .kasten {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
}

.haken input:checked ~ .text { color: var(--offwhite); }
.haken .text { color: var(--gedaempft); }

.haken:has(input:checked) { border-color: var(--highlight); background: rgba(0, 175, 170, 0.06); }
.haken:has(input[aria-invalid="true"]) { border-color: #f0a3a3; }
.haken:has(input[aria-invalid="true"]) .kasten { border-color: #f0a3a3; }

.feld input,
.feld textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--linie-eingabe);
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--offwhite);
  font-family: inherit;
  font-size: 16px;
  transition: border-color 0.2s;
}

.feld input:hover,
.feld textarea:hover { border-color: var(--linie-stark); }

.feld input:focus-visible,
.feld textarea:focus-visible { border-color: var(--offwhite); outline-offset: 1px; }

.feld input::placeholder,
.feld textarea::placeholder { color: rgba(229, 237, 232, 0.32); }

.feld textarea { min-height: 118px; resize: vertical; }

.feld-hinweis { margin: 7px 0 0; font-size: 13px; color: var(--leise); }

.feld-fehler { margin: 7px 0 0; font-size: 13px; color: #f0a3a3; }

.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"] { border-color: #f0a3a3; }

.zwei-spalten { display: grid; gap: 0 24px; grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .zwei-spalten { grid-template-columns: 1fr 1fr; }
  .strasse-zeile { grid-template-columns: 1fr 140px; }
}

/* Honigtopf, fuer Menschen unsichtbar */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rechtszeile { margin: 4px 0 0; font-size: 13px; color: var(--leise); }
.rechtszeile a { color: var(--gedaempft); }

.schaltleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

@media (max-width: 639px) {
  .schaltleiste { flex-direction: column-reverse; }
}

.meldung {
  margin-top: 20px;
  padding: 16px 0 0;
  border-top: 1px solid var(--linie);
  font-size: 15px;
}

.meldung-gut { border-top-color: rgba(0, 110, 105, 0.7); }
.meldung-schlecht { border-top-color: rgba(240, 163, 163, 0.6); }
.meldung h3 { margin: 0 0 6px; font-size: 17px; }
.meldung p { margin: 0; color: var(--gedaempft); }

/* FAQ */

details { border-top: 1px solid var(--linie); }
details:first-of-type { border-top: 0; }

details summary {
  cursor: pointer;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

details summary::-webkit-details-marker { display: none; }

details summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--leise);
  line-height: 1;
  flex-shrink: 0;
}

details[open] summary::after { content: "\2212"; }

details p {
  margin: 0;
  padding: 0 0 18px;
  font-size: 15px;
  color: var(--gedaempft);
  max-width: 66ch;
}

/* Weitere Domains: Name links, Preis rechts, Haarlinien */

.domain-liste { display: grid; }

.domain-liste a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--linie);
  font-size: 16px;
  text-decoration: none;
  color: var(--offwhite);
}

.domain-liste a:first-child { border-top: 0; padding-top: 0; }

.domain-liste .dl-name { overflow-wrap: anywhere; }
.domain-liste a:hover .dl-name { text-decoration: underline; text-underline-offset: 3px; }

.domain-liste .dl-preis {
  color: var(--highlight);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Fuss */

footer.huelle {
  margin-top: var(--abstand-sektion);
  padding-top: 28px;
  padding-bottom: 40px;
  border-top: 1px solid var(--linie);
  font-size: 14px;
  color: var(--leise);
}

/* Kompakter Fuss: eine gedaempfte Rechtszeile, darunter Copyright links
   und die beiden Links rechts auf einer Zeile. */
.fuss-rechtstext {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--leise);
  max-width: 90ch;
  line-height: 1.6;
}

.fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.fuss-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

.fuss-links a {
  color: var(--gedaempft);
  text-decoration: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.fuss-links a:hover { color: var(--offwhite); text-decoration: underline; text-underline-offset: 3px; }

.copyright {
  margin: 0;
  font-size: 14px;
  color: var(--leise);
}

/* Rechtsseiten */

.rechtstext { padding-top: 56px; }
.rechtstext h1 { font-size: clamp(30px, 5vw, 40px); }
.rechtstext h2 { margin-top: 40px; font-size: 21px; }
.rechtstext p, .rechtstext li { color: var(--gedaempft); font-size: 16px; max-width: 66ch; }
.rechtstext a { color: var(--offwhite); }
.rechtstext ul { padding-left: 20px; }

/* Enge Bildschirme: Rhythmus verdichten */

@media (max-width: 639px) {
  :root {
    --abstand-sektion: 64px;
    --abstand-sektion-innen: 32px;
  }
  .hero { padding-top: 48px; }
}