/* ============================================================
   domains2.css — die Domain-Seite im Stil der Startseite v15.
   Angelegt 2026-09-28 (MacBook Air von Fabio). Auftrag Fabio: «neue
   Domain Seite im style der startseite mit Darkmode».

   AUFBAU
   domains.html laedt start2.css (Marken --s15-* hell/dunkel, Grund,
   Knoepfe, Abschnitte, DNS-Attrappe, Schluss, Fusszeile) und start2.js
   (Hell/Dunkel-Schalter in der Kopfzeile, Einblenden). Diese Datei
   bringt nur, was die Domain-Seite allein hat: Adresszeile, Ergebnis,
   Preistabelle, Umzug, Guthaben.

   WAS HIER GESTALTET WIRD, SCHREIBEN ANDERE
   #dmResult fuellt domains.js, #dmChips/#dmTabs/#dmRows fuellt
   domain-preise.js — beide unveraendert (Pruefung, Vorschlaege, Umzug,
   Preise aus der Datenbank). Die Klassennamen unten (dm-…, dmv-…)
   kommen deshalb von dort und duerfen hier nicht umbenannt werden.

   RAENDER VON BEDIENELEMENTEN: 3:1 (Standard §4.5) — Adresszeile,
   Reiter und Umriss-Knoepfe nehmen --s15-feld-rand, nicht --s15-chip.
   ============================================================ */

:root{
  /* Gruen und Orange als TEXT brauchen mehr als die Flaechenfarben: das
     Apple-Gruen der Punkte (#30d158) hat 2.0:1 auf Weiss, --s15-new (#b64400)
     auf seiner eigenen Tönung 4.27:1 (gerechnet 28.09.2026). */
  --d15-gruen-text:#1a7f37;
  --d15-warn-text:#933800;
}
:root[data-theme="dark"]{
  --d15-gruen-text:#30d158;
  --d15-warn-text:#ff9f0a;
}

/* ── Grund ──────────────────────────────────────────────────── */
body.d15-seite{
  background:var(--s15-bg);
  color:var(--s15-text);
  -moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
  font-synthesis:none;
  overflow-x:clip;
  transition:background .5s,color .5s;
}

/* ── Aufmacher mit Adresszeile ──────────────────────────────── */
/* Der Aufmacher fuellt den ersten Bildschirm, der graue Preisabschnitt kommt
   erst beim Scrollen (Fabrizio, 05.10.2026: «das sollte komplett nur Domain
   oben sein mit dem Weiss und dann erst beim Runterscrollen kommt der zweite
   Bereich»). Vorher endete er bei 1440x900 auf 822 px; 78 px Grau standen im
   Bild, bei 1920x1080 waren es 235 px.
   Hoehe = Fenster minus Kopfzeile (--kz-h-voll 64 px + 1 px Linie, kopfzeile.css).
   svh ist am Telefon die Hoehe mit sichtbaren Leisten: der Aufmacher ist dort
   nie hoeher als das, was man sieht, und springt beim Scrollen nicht (dvh
   wuerde mitwachsen). Die vh-Zeile davor gilt fuer Browser ohne svh.
   border-box, weil start2.css in .s15 alles auf content-box stellt — sonst
   kaeme das Polster noch obendrauf. Der Inhalt steht mittig; das untere Polster
   ist groesser als das obere, er sitzt also leicht ueber der Mitte. Wird er
   hoeher als das Fenster (kleiner Schirm, Suchergebnis), waechst der Aufmacher. */
.d15-held{
  position:relative;overflow:hidden;
  box-sizing:border-box;
  min-height:calc(100vh - var(--kz-h-voll, 64px) - 1px);
  min-height:calc(100svh - var(--kz-h-voll, 64px) - 1px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,9vh,110px) 22px clamp(80px,9vw,128px);
  text-align:center;
}
/* Als Flex-Kind mit `margin:0 auto` wuerde der Innenteil nur so breit wie sein
   Inhalt — die Adresszeile schrumpfte so von 760 auf 660 px (gemessen 05.10.).
   Volle Breite wie vorher; max-width und margin zentrieren weiter. */
.d15-held > .d15-held__innen{width:100%;}
.d15-held__schein{
  position:absolute;left:50%;top:64%;
  width:min(1100px,110vw);height:62%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,var(--s15-glow),transparent);
  filter:blur(30px);pointer-events:none;
}
.d15-held__innen{
  position:relative;max-width:900px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
}
.d15-held__titel{
  margin:12px 0 0;
  font-size:clamp(44px,6.4vw,88px);line-height:1.02;
  font-weight:600;letter-spacing:-0.034em;text-wrap:balance;
}
.d15-held__text{
  margin:22px auto 0;max-width:660px;
  font-size:clamp(17px,1.5vw,21px);line-height:1.45;
  color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:pretty;
}

/* Die Adresszeile. Das Feld ist durchsichtig; unter ihm liegt ein Spiegel
   mit demselben Text (unsichtbar) und dahinter der graue Endungs-Vorschlag.
   So steht «.ch» immer genau hinter dem letzten Buchstaben (domains2.js). */
.s15 form.d15-adresse{
  box-sizing:border-box;position:relative;z-index:1;
  margin-top:clamp(28px,4vh,44px);width:100%;max-width:760px;
  display:flex;align-items:center;gap:12px;
  height:72px;padding:0 8px 0 26px;
  border-radius:980px;background:var(--s15-card);
  box-shadow:0 0 0 1px var(--s15-feld-rand),0 24px 60px rgba(0,0,0,.10);
  text-align:left;transition:box-shadow .2s ease;
}
.s15 form.d15-adresse:focus-within{
  box-shadow:0 0 0 2px var(--s15-link),0 24px 60px rgba(0,0,0,.10);
}
.d15-adresse__schloss{flex:none;color:var(--s15-text3);}
.d15-adresse__feld{position:relative;flex:1;min-width:0;height:100%;}
.s15 .d15-adresse__feld input,
.d15-adresse__spiegel{
  font-family:inherit;font-size:clamp(20px,2.3vw,28px);
  font-weight:500;letter-spacing:-0.02em;
}
.s15 .d15-adresse__feld input{
  box-sizing:border-box;position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;border:0;background:none;outline:none;
  color:var(--s15-text);
}
.d15-adresse__spiegel{
  position:absolute;left:0;top:0;bottom:0;max-width:100%;
  display:flex;align-items:center;overflow:hidden;
  white-space:pre;pointer-events:none;
}
.d15-adresse__name{color:transparent;}
.d15-adresse__endung{color:var(--s15-text3);}
.d15-adresse__endung[hidden]{display:none;}
.d15-adresse__knopf{
  flex:none;height:56px;padding:0 28px;border:0;border-radius:980px;
  background:var(--s15-cta);color:#fff;font:inherit;font-size:17px;cursor:pointer;
  transition:background-color .2s ease;
}
.d15-adresse__knopf:hover{background:var(--s15-ctah);}

.d15-held__unten{
  width:100%;max-width:760px;margin-top:22px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.d15-hinweis{margin:0;max-width:600px;font-size:15px;line-height:1.5;color:var(--s15-text2);text-wrap:pretty;}
.d15-hinweis b{color:var(--s15-text);font-weight:600;}

/* Chips der beliebten Endungen (domain-preise.js) */
.dm-chips{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:32px;}
.dm-chip-label{font-size:13px;color:var(--s15-text3);margin-right:2px;}
.dm-chip{
  display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:980px;
  box-shadow:inset 0 0 0 1px var(--s15-chip);
  font-size:13px;color:var(--s15-text2);font-variant-numeric:tabular-nums;
}
.dm-chip b{color:var(--s15-text);font-weight:600;}
.s15 a.dm-chip-mehr{font-size:13px;font-weight:500;padding:6px 4px;}

/* ── Ergebnis (domains.js) ──────────────────────────────────── */
#dmResult{position:relative;z-index:1;width:100%;max-width:760px;text-align:left;}
#dmResult:not(:empty){margin-top:16px;}
#dmResult .dm-result,
#dmResult .dmv{
  background:var(--s15-card);border-radius:24px;overflow:hidden;
  box-shadow:0 0 0 1px var(--s15-line),0 24px 60px rgba(0,0,0,.08);
}
#dmResult .dm-result{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 22px;
}
#dmResult .dm-dom,
#dmResult .dmv-name{
  font-size:17px;font-weight:600;letter-spacing:-0.01em;color:var(--s15-text);
  overflow-wrap:anywhere;
}
#dmResult .dmv-row:not(.dmv-frei) .dmv-name{color:var(--s15-text2);}
/* Der Zustand steht als erstes Wort in der Zeile darunter («frei», «belegt» …);
   der Punkt davor ist der aus der Startseite: gruen = frei, grau = sonst. */
#dmResult .dm-sub{
  display:flex;align-items:center;gap:7px;margin-top:4px;
  font-size:14px;line-height:1.4;color:var(--s15-text2);
}
#dmResult .dm-sub::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--s15-text3);
}
#dmResult .dmv-frei .dm-sub::before,
#dmResult .dm-result:has([data-vorgang="kauf"]) .dm-sub::before{background:#30d158;}
#dmResult .dm-result > .dm-sub:only-child{margin-top:0;}
#dmResult .dm-result > .dm-sub:only-child::before{animation:s15-puls 1s ease-in-out infinite;}

/* Neutral («vergeben») als Umriss: grau auf --s15-card2 waren 4.15:1,
   grau auf der Kartenflaeche sind es 4.70:1. */
#dmResult .dm-badge{
  flex:none;font-size:13px;font-weight:500;padding:5px 12px;border-radius:980px;
  background:transparent;box-shadow:inset 0 0 0 1px var(--s15-line);color:var(--s15-text2);
}
#dmResult .dm-ok{background:color-mix(in srgb,#30d158 16%,transparent);box-shadow:none;color:var(--d15-gruen-text);}
#dmResult .dm-warn{background:color-mix(in srgb,var(--s15-new) 12%,transparent);box-shadow:none;color:var(--d15-warn-text);}
#dmResult .dmv-warte{animation:s15-puls 1s ease-in-out infinite;}

/* Knoepfe aus domains.js tragen .btn aus site.css (eckig, schwarz) —
   hier werden sie zu den Pillen der Startseite. */
#dmResult .btn{
  flex:none;min-height:0;border:0;border-radius:980px;padding:9px 18px;
  font:500 14px/1.2 var(--tq-ui);white-space:nowrap;cursor:pointer;
  transition:background-color .2s ease,box-shadow .2s ease;
}
#dmResult .btn-primary{background:var(--s15-cta);color:#fff;}
#dmResult .btn-primary:hover{background:var(--s15-ctah);color:#fff;}
#dmResult .btn-soft{background:transparent;color:var(--s15-text);box-shadow:inset 0 0 0 1px var(--s15-feld-rand);}
#dmResult .btn-soft:hover{box-shadow:inset 0 0 0 1px var(--s15-text);}
#dmResult .btn-sm{padding:8px 16px;font-size:13.5px;}

#dmResult .dmv-kopf{
  margin:0;padding:16px 22px;font-size:14px;line-height:1.5;color:var(--s15-text2);
  border-bottom:1px solid var(--s15-line);
}
#dmResult .dmv-kopf b{color:var(--s15-text);font-weight:600;}
#dmResult .dmv-note,
#dmResult .dmv-note b{color:var(--d15-warn-text);}
#dmResult .dmv-liste{list-style:none;margin:0;padding:0;}
#dmResult .dmv-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px;}
#dmResult .dmv-row + .dmv-row{border-top:1px solid var(--s15-line);}
#dmResult .dmv-blaettern{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-top:1px solid var(--s15-line);
}
#dmResult .dmv-stand{font-size:13px;color:var(--s15-text2);font-variant-numeric:tabular-nums;}
#dmResult .dmv-zurueck,
#dmResult .dmv-weiter{
  border:0;border-radius:980px;padding:8px 16px;background:transparent;
  box-shadow:inset 0 0 0 1px var(--s15-feld-rand);
  font:500 13.5px/1.2 var(--tq-ui);color:var(--s15-link);cursor:pointer;
}
#dmResult .dmv-zurueck:hover,
#dmResult .dmv-weiter:hover{box-shadow:inset 0 0 0 1px var(--s15-link);}
#dmResult .dmv-zurueck[disabled],
#dmResult .dmv-weiter[disabled]{color:var(--s15-text3);box-shadow:none;cursor:default;}

/* ── Preise ─────────────────────────────────────────────────── */
.d15-preise{
  margin-top:clamp(36px,5vw,56px);
  background:var(--s15-tile);border-radius:32px;padding:clamp(22px,4vw,48px);
}
.dm-tabs{display:flex;gap:8px;flex-wrap:wrap;min-height:38px;}
.dm-tab{
  height:38px;padding:0 18px;border:0;border-radius:980px;background:transparent;
  box-shadow:inset 0 0 0 1px var(--s15-feld-rand);
  color:var(--s15-text);font:inherit;font-size:14px;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.dm-tab:hover{box-shadow:inset 0 0 0 1px var(--s15-text);}
.dm-tab.ist-an{background:var(--s15-inv);color:var(--s15-invtext);box-shadow:none;}
.d15-tabelle{margin-top:28px;}
.dm-row,
.dm-kopfzeile{
  display:grid;grid-template-columns:minmax(0,1.8fr) repeat(3,minmax(0,1fr)) 88px;
  gap:24px;align-items:center;
}
.dm-kopfzeile{padding:0 0 12px;border-bottom:1px solid var(--s15-line);font-size:13px;color:var(--s15-text3);}
.dm-kopfzeile span:nth-child(2),
.dm-kopfzeile span:nth-child(3),
.dm-kopfzeile span:nth-child(4){text-align:right;}
.dm-row{padding:16px 0;border-bottom:1px solid var(--s15-line);}
.dm-row:last-child{border-bottom:0;}
.dm-row-tld{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;min-width:0;}
.dm-tld{font-size:22px;font-weight:600;letter-spacing:-0.02em;color:var(--s15-text);}
.dm-note{font-size:14px;line-height:1.4;color:var(--s15-text3);}
.dm-zahl{text-align:right;font-size:17px;font-variant-numeric:tabular-nums;color:var(--s15-text);}
.dm-zahl-schwach{color:var(--s15-text2);}
.dm-zahl-aus{font-size:14px;font-style:italic;color:var(--s15-text3);}
.s15 a.dm-row-cta{text-align:right;font-size:15px;}
.dm-leer{margin:0;padding:22px 0;font-size:15px;color:var(--s15-text2);}
/* «Alle» sind 204 Zeilen — sie rollen in der Kachel statt der Seite. */
.dm-rows-lang{max-height:640px;overflow-y:auto;overscroll-behavior:contain;}
.d15-fussnote{margin:22px 0 0;max-width:760px;font-size:15px;line-height:1.55;color:var(--s15-text2);}
.d15-fussnote b{color:var(--s15-text);font-weight:600;}

/* ── Umzug ──────────────────────────────────────────────────── */
/* Die Ueberschrift bekommt mehr Breite als der Text darunter — in 760 px
   stand «gratis.» allein auf der dritten Zeile. */
.s15-kopf.d15-kopf-breit{max-width:1000px;}
.d15-kopf-breit .s15-lead{max-width:760px;}
.d15-gratis{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:760px;}
.d15-gratis li{
  font-size:15px;font-weight:600;padding:7px 14px;border-radius:980px;
  background:var(--s15-card);color:var(--s15-text);
}
.d15-schritte{
  list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;
}
.d15-schritt{background:var(--s15-card);border-radius:28px;padding:clamp(26px,3vw,36px);}
.d15-schritt__nr{display:block;font-size:48px;font-weight:600;letter-spacing:-0.04em;line-height:1;color:var(--s15-muted);}
.d15-schritt__titel{margin:18px 0 0;font-size:21px;font-weight:600;letter-spacing:-0.012em;}
.d15-schritt__text{margin:8px 0 0;font-size:17px;line-height:1.45;color:var(--s15-text2);}
.d15-achtung{
  margin:32px 0 0;max-width:760px;padding:2px 0 2px 20px;
  border-left:3px solid var(--s15-new);
  font-size:17px;line-height:1.5;color:var(--s15-text2);
}
.d15-achtung b{color:var(--s15-text);font-weight:600;}

/* ── DNS (Liste neben der Attrappe) ─────────────────────────── */
.d15-liste{margin-top:28px;display:flex;flex-direction:column;max-width:520px;font-size:17px;line-height:1.4;}
.d15-liste__zeile{padding:13px 0;border-top:1px solid var(--s15-line);}
.d15-liste__zeile--ende{border-bottom:1px solid var(--s15-line);}

/* ── Guthaben ───────────────────────────────────────────────── */
.d15-guthaben{max-width:880px;margin:0 auto;text-align:center;}
.d15-guthaben__titel{
  margin:12px 0 0;font-size:clamp(42px,6.4vw,88px);line-height:1.02;
  font-weight:600;letter-spacing:-0.034em;text-wrap:balance;
}
.d15-guthaben__text{margin:26px auto 0;max-width:680px;font-size:19px;line-height:1.5;color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:pretty;}
.d15-guthaben__knoepfe{margin-top:32px;display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap;}

/* ── Schmal ─────────────────────────────────────────────────── */
@media (max-width:640px){
  .s15 form.d15-adresse{height:60px;padding:0 6px 0 18px;gap:10px;}
  .s15 .d15-adresse__feld input,
  .d15-adresse__spiegel{font-size:20px;}
  .d15-adresse__knopf{height:48px;padding:0 18px;font-size:16px;}

  /* Tabelle bricht in Bloecke um; die Spaltentitel kommen aus data-kopf. */
  .dm-kopfzeile{display:none;}
  .dm-row{grid-template-columns:1fr;gap:0;padding:16px 0;}
  .dm-row-tld{margin-bottom:8px;}
  .dm-zahl{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;text-align:left;}
  .dm-zahl::before{content:attr(data-kopf);font-size:14px;font-style:normal;color:var(--s15-text3);}
  .s15 a.dm-row-cta{text-align:left;padding-top:10px;}
  .dm-rows-lang{max-height:560px;}
}
@media (max-width:420px){
  .d15-adresse__schloss{display:none;}
}

/* ── Quin-Begruessung wartet, solange sie die Adresszeile verdeckt ──
   Die Blase (quin.js, 1.4 s nach dem Laden) steht unten rechts. Bei 1280x720
   lag sie halb ueber «Pruefen». domains2.js setzt `d15-gruss-wartet`, solange
   sie die Adresszeile oder das Ergebnis ueberdecken wuerde, und nimmt die
   Klasse weg, sobald dort Platz ist. visibility statt display: die Blase
   behaelt ihre Lage und laesst sich weiter messen. quin.css und quin.js bleiben
   unberuehrt; die Blase ist nur zurueckgehalten, nicht weggeklickt — die
   30 Tage Ruhe beginnen erst, wenn man sie wirklich schliesst. */
body.d15-seite .qn-gruss{transition:opacity .3s ease,visibility 0s linear 0s;}
body.d15-seite.d15-gruss-wartet .qn-gruss{
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
@media (prefers-reduced-motion:reduce){
  body.d15-seite .qn-gruss,
  body.d15-seite.d15-gruss-wartet .qn-gruss{transition:none;}
}