/* Ein Stylesheet, keine Schriftdateien, kein JavaScript.
   Systemschriften laden sofort und kosten keinen Fremdzugriff.

   Gestaltung: Domainnamen sind Zeichenketten und das Produkt — sie stehen
   in Monospace, gross. Der Fliesstext bleibt Systemsans. Eine Farbe:
   Berliner Blau. Die Marke ist der Bindestrich mit Trema (siehe logo.svg). */

:root {
  color-scheme: light dark;
  --papier: #f4f5f2;
  --flaeche: #ffffff;
  --tinte: #101a2c;
  --gedaempft: #5a6478;
  --linie: #d9dde3;
  --blau: #143f8a;
  --blau-tief: #0e2f68;
  --blau-hell: #e6ecf7;
  --breite: 62rem;
  --lesebreite: 40rem;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Noto Sans Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0d1321;
    --flaeche: #141c2e;
    --tinte: #e8ebf1;
    --gedaempft: #9aa5bb;
    --linie: #26304a;
    --blau: #8eb0ff;
    --blau-tief: #b3c8ff;
    --blau-hell: #182446;
  }
}

* { box-sizing: border-box; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; border-radius: 2px; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
  background: var(--papier);
  color: var(--tinte);
  font: 1.0625rem/1.6 var(--sans);
}

main, .kopf, .fuss { max-width: var(--breite); margin: 0 auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
main { padding-block: 2.5rem 5rem; }

a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--blau-tief); text-decoration-thickness: 2px; }

h1 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.08; margin: 0 0 1rem; letter-spacing: -.025em; font-weight: 750; }
h2 { font-size: 1.35rem; line-height: 1.25; margin: 2.75rem 0 .75rem; letter-spacing: -.015em; font-weight: 700; }
h3 { font-size: 1.1rem; margin: 1.75rem 0 .4rem; }
p { margin: 0 0 1rem; }
.lead { font-size: 1.2rem; line-height: 1.5; color: var(--gedaempft); max-width: 36rem; }
.mono { font-family: var(--mono); }

/* Kopf und Fuss */
.kopf {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  align-items: center; justify-content: space-between;
  padding-block: 1.1rem;
}
.marke {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: 1.05rem; font-weight: 600;
  color: var(--tinte); text-decoration: none; letter-spacing: -.02em;
}
.marke svg { width: 1.6rem; height: 1.6rem; flex: none; }
.marke:hover { color: var(--blau); }
.kopf nav { display: flex; gap: 1.5rem; }
.kopf nav a { color: var(--tinte); text-decoration: none; font-weight: 500; font-size: .98rem; }
.kopf nav a:hover, .kopf nav a[aria-current] { color: var(--blau); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }

.fuss {
  border-top: 1px solid var(--linie); padding-block: 1.75rem 2.75rem;
  color: var(--gedaempft); font-size: .9rem;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; align-items: center;
}
.fuss p { margin: 0; }
.fuss nav { display: flex; gap: 1.25rem; }
.fuss a { color: var(--gedaempft); }
.fuss a:hover { color: var(--blau); }

/* Startseite: ein blaues Feld als einziger lauter Moment der Seite.
   Die Marke steht gross und halb hinter dem Rand, wie ein Stempel. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin: .5rem 0 2.5rem; padding: clamp(2rem, 5vw, 3.5rem);
  background: #143f8a; color: #f4f5f2; border-radius: 20px;
}
.hero h1 { max-width: 20ch; color: #fff; }
.hero .lead { color: #d8e1f5; max-width: 34rem; }
.hero-marke {
  position: absolute; right: -2rem; bottom: -2.5rem; z-index: -1;
  width: clamp(11rem, 26vw, 16rem); height: auto; opacity: .16;
}
.hero-zeile { display: flex; flex-wrap: wrap; gap: .5rem 2rem; color: #d8e1f5; font-size: .95rem; margin: 2rem 0 0; }
.hero-zeile span { display: inline-flex; align-items: center; gap: .5rem; }

.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2.75rem; }
.abschnitt-kopf h2 { margin: 0; }
.abschnitt-kopf p { margin: 0; color: var(--gedaempft); font-size: .95rem; }

/* Preisliste: eine Zeile je Domain, der Name traegt die Zeile */
.preisliste { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--linie); }
.preisliste li { border-bottom: 1px solid var(--linie); }
.angebot {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: .25rem 1.75rem; align-items: baseline;
  padding: 1.05rem .75rem; margin-inline: -.75rem;
  color: var(--tinte); text-decoration: none; border-radius: 10px;
}
.angebot:hover { background: var(--blau-hell); color: var(--tinte); }
.angebot-name { font-family: var(--mono); font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.angebot:hover .angebot-name { color: var(--blau); }
.angebot-kat { font-size: .85rem; color: var(--gedaempft); display: block; margin-top: .15rem; }
.angebot-ziel { font-size: .95rem; color: var(--gedaempft); line-height: 1.45; }
.angebot-preis { font-family: var(--mono); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.angebot-preis small { font-family: var(--sans); font-size: .75rem; font-weight: 500; color: var(--gedaempft); margin-left: .3rem; }

.weiter { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; }
.knopf-leise {
  display: inline-block; padding: .6rem 1.1rem; border: 1.5px solid var(--linie); border-radius: 999px;
  color: var(--tinte); text-decoration: none; font-weight: 550; font-size: .95rem; background: var(--flaeche);
}
.knopf-leise:hover { border-color: var(--blau); color: var(--blau); }

.schlicht { list-style: none; margin: 0; padding: 0; }
.schlicht li { margin-bottom: .5rem; }

/* Ratgeberliste */
.artikelliste { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.artikelliste li { padding: 1.25rem 1.35rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; }
.artikelliste h2 { margin: 0 0 .45rem; font-size: 1.1rem; line-height: 1.3; }
.artikelliste h2 a { color: var(--tinte); text-decoration: none; }
.artikelliste h2 a:hover { color: var(--blau); text-decoration: underline; }
.artikelliste p { margin: 0; color: var(--gedaempft); font-size: .92rem; line-height: 1.5; }

.kruemel { font-size: .9rem; margin-bottom: 1.25rem; color: var(--gedaempft); }
.kruemel a { color: var(--gedaempft); }
.datum { font-size: .875rem; color: var(--gedaempft); margin-top: -.25rem; }

/* Verkaufsseite: Text links, Preisschild rechts */
.verkauf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); gap: 2rem 4rem; align-items: start; }
.verkauf > .kruemel { grid-column: 1 / -1; margin-bottom: 0; }
.verkauf h1 { font-family: var(--mono); font-weight: 650; letter-spacing: -.035em; overflow-wrap: anywhere; font-size: clamp(2rem, 5vw, 3.4rem); }
.verkauf-text { min-width: 0; }
.preisschild {
  position: sticky; top: 1.25rem;
  padding: 1.5rem; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 14px;
  box-shadow: 0 1px 0 var(--linie);
}
.preisschild .preis { margin: 0 0 1.1rem; font-family: var(--mono); font-size: 2.1rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.preisschild .preis span { display: block; font-family: var(--sans); font-size: .9rem; font-weight: 400; letter-spacing: 0; color: var(--gedaempft); margin-top: .35rem; }
.kaufknopf {
  display: block; text-align: center; padding: .85rem 1.4rem;
  font-weight: 650; font-size: 1.05rem;
  color: #fff; background: var(--blau); border-radius: 10px; text-decoration: none;
}
.kaufknopf:hover { background: var(--blau-tief); color: #fff; }
@media (prefers-color-scheme: dark) { .kaufknopf, .kaufknopf:hover { color: #0d1321; } }
.kaufhinweis { margin: 1rem 0 0; font-size: .875rem; color: var(--gedaempft); line-height: 1.5; }

.fakten {
  display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.5rem;
  margin: 2rem 0; padding: 0; font-size: .97rem;
}
.fakten dt { color: var(--gedaempft); }
.fakten dd { margin: 0; }

/* Fliesstext */
.text { max-width: var(--lesebreite); }
.text.schmal { max-width: 30rem; }
/* Der Adminbereich und der Katalog zeigen breite Tabellen. */
.text.breit { max-width: none; }
.text ul, .text ol { padding-left: 1.2rem; }
.text li { margin-bottom: .45rem; }
.text > p, .text li { font-size: 1.0625rem; }
code {
  font-family: var(--mono); font-size: .9em; padding: .1em .35em;
  background: var(--blau-hell); border-radius: 4px;
}
.fehler {
  padding: .8rem 1rem; background: var(--blau-hell);
  border-left: 3px solid var(--blau); border-radius: 6px;
}

.hinweiskasten {
  margin-top: 3.5rem; padding: 1.5rem; max-width: var(--lesebreite);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px;
}
.hinweiskasten h2 { margin-top: 0; font-size: 1.1rem; }
.hinweiskasten li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hinweiskasten li a { font-family: var(--mono); font-weight: 600; color: var(--blau); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.hinweiskasten li a:hover { color: var(--blau-tief); text-decoration-thickness: 2.5px; }
/* Domainnamen im Fliesstext: sichtbar als Link, direkt zur Verkaufsseite */
.domainlink { text-decoration: none; }
.domainlink code { color: var(--blau); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.domainlink:hover code { background: var(--blau); color: #fff; }
.hinweiskasten li span { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--gedaempft); }

/* Zugeklappte Themen: vorhanden, verlinkt, aber nicht praegend */
.diskret { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.diskret summary { cursor: pointer; color: var(--gedaempft); font-size: .95rem; }
.diskret summary:hover { color: var(--blau); }
.diskret[open] summary { margin-bottom: 1rem; }

/* Tabellen duerfen als einzige seitlich scrollen */
.tabelle { overflow-x: auto; margin: 1.25rem 0 2rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-weight: 600; color: var(--gedaempft); white-space: nowrap; font-size: .85rem; }
td:first-child a { font-family: var(--mono); font-weight: 600; text-decoration: none; }
td:first-child a:hover { text-decoration: underline; }
.breit td:nth-child(2) { min-width: 18rem; }
.preiszelle { white-space: nowrap; font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.preiszelle small { font-family: var(--sans); color: var(--gedaempft); font-weight: 400; }

@media (max-width: 48rem) {
  .verkauf { grid-template-columns: 1fr; }
  .preisschild { position: static; }
  .angebot { grid-template-columns: minmax(0, 1fr) auto; }
  .angebot-ziel { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  .hero-marke { display: none; }
  .kopf nav { gap: 1rem; }
  .fakten { grid-template-columns: 1fr; gap: .15rem; }
  .fakten dd { margin-bottom: .7rem; }
  .angebot-name { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: no-preference) {
  a, .angebot, .knopf-leise, .kaufknopf { transition: color .12s, background-color .12s, border-color .12s; }
}