/* 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; }

  /* Nach dem Absenden steht kein Formular mehr neben der Abschnittsueberschrift.
     Bliebe das zweispaltige Raster, saesse die Bestaetigung rechts und links
     blieben rund 400 Pixel leer. */
  section.nur-bestaetigung { grid-template-columns: minmax(0, 1fr); }
  section.nur-bestaetigung > * { grid-column: 1; }
}

/* 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: 4px 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}

/* Die echte Ankreuzfläche bleibt bedienbar und für Hilfstechnik sichtbar,
   nur unsichtbar gestellt. Gezeichnet wird das Kästchen daneben.
   Breite und Höhe stehen weiter unten hinter den .feld-Regeln, sonst
   gewinnen deren width 100 Prozent bei gleicher Spezifität. */
.haken input {
  position: absolute;
  opacity: 0;
  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[aria-invalid="true"]) .kasten { border-color: #f0a3a3; }

/* Der Bezugspunkt fuer das absolut gesetzte Ankreuzfeld. Ohne ihn bezoege sich
   dessen Breite auf den Seitenblock. */
.haken { position: relative; }

.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; }

/* Muss NACH .feld input stehen: gleiche Spezifitaet, die spaetere Regel gewinnt.
   Sonst erbt das unsichtbare Ankreuzfeld width 100 Prozent, wird so breit wie die
   Seite und schiebt den Abschnitt horizontal ueber den Rand. */
.haken input { width: 22px; height: 22px; padding: 0; }

.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) {
  /* Gedreht: Weiter und Absenden stehen oben, Zurueck darunter. Damit liegt
     der Weg nach vorn zuerst im Blick, und der seltener gebrauchte Rueckweg
     stoert ihn nicht. Der Preis ist bekannt und bewusst in Kauf genommen:
     Die Tab- und Vorlesereihenfolge bleibt Zurueck, dann Weiter, weicht
     also von der Sehreihenfolge ab. Wer das je zurueckdreht, findet hier
     den Grund. */
  .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); }

/* Bestaetigung nach dem Absenden. Sie tritt an die Stelle des Formulars,
   deshalb ein eigener Kasten und nicht die schmale Meldungszeile. */

.danke {
  padding: 34px 30px;
  border: 1px solid rgba(0, 175, 170, 0.38);
  border-radius: var(--radius-klein);
  background: rgba(0, 110, 105, 0.14);
}

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

.danke-haken {
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--highlight);
  color: var(--schwarz);
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
}

.danke h2 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: var(--spur);
}

.danke p {
  margin: 0 0 12px;
  max-width: 54ch;
  font-size: 16px;
  color: var(--gedaempft);
}

.danke p:last-child { margin-bottom: 0; }
.danke .danke-mail { color: var(--offwhite); overflow-wrap: anywhere; }

.danke .danke-fuss {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
  font-size: 14px;
  color: var(--leise);
}

@media (max-width: 639px) {
  .danke { padding: 26px 20px; }
  .danke h2 { font-size: 22px; }
}

/* 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; }
}

/* Die Beschreibung der Adresse steht zwischen Ueberschrift und Preisband.
   Sie traegt den einzigen Text, der sich je Domain unterscheidet, deshalb
   ruhig gesetzt und nicht als Werbezeile. */
.adresse-beschreibung {
  max-width: 62ch;
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(229, 237, 232, .72);
}
@media (max-width: 640px) {
  .adresse-beschreibung { font-size: 16px; }
}