/* dns.legal Domains – Oberfläche (ohne Build-Schritt) */
/* Granit und Lagune. Alle Farben der Oberflaeche stehen hier und nur hier.
   Wer eine Farbe braucht, nimmt eine dieser Marken. Fest eingetragene Werte in den
   Ansichten sind der Grund, warum frueher jede Seite etwas anders aussah. */
:root {
  --bg: #f2f4f4; --surface: #fbfcfc; --ink: #1b2529; --muted: #6a747a; --line: #dfe4e4; --line-strong: #c6cfcf;
  --navy: #333e44; --navy-2: #44525a; --accent: #0a6e70; --accent-2: #0e9c9c; --accent-soft: #def0ef;
  --red: #a83a2e; --red-soft: #faebe8;
  --green: #2e7a5e; --green-soft: #e3f2ec; --gray-soft: #edf0f0;
  /* Vier Farben, mehr nicht. Granit ist die Schrift, Lagune ist alles zum Anklicken,
     Sand traegt das Wertige (Gutachten, Premium, Zahlen), Flieder das Besondere
     (Treuhand, Ratenkauf, Auktion). Die Pastelltoene sind Flaechen, nie Knopffarben:
     darauf steht immer der dunklere eigene Ton. */
  --granit-tief: #1b2529; --granit: #333e44; --granit-hell: #55646b;
  --lagune: #0e9c9c; --lagune-tief: #0a6e70; --lagune-hell: #2cc7c2; --lagune-zart: #def0ef;
  --sand: #f3e7cf; --sand-zart: #faf4e8; --sand-rand: #e6d4b2; --sand-ink: #8a6a2a; --sand-tief: #6d521f;
  --flieder: #e8e1f1; --flieder-zart: #f5f1fa; --flieder-rand: #d6cbe6; --flieder-ink: #6b4a63; --flieder-tief: #533a4d;
  --papier: #f2f4f4; --kreide: #eaefef;
  /* Altnamen, damit kein Blatt bricht. Blau gab es nie wirklich, es war das Lagune. */
  --gold: var(--sand-ink); --amber: var(--sand-ink); --amber-soft: var(--sand);
  --blue: var(--flieder-ink); --blue-soft: var(--flieder);
  --radius: 10px; --shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 var(--font); color: var(--ink); background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6em; color: var(--navy); }
h1 { font-size: 1.75rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.08rem; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--mono); font-size: .9em; }
code { background: var(--gray-soft); padding: .1em .35em; border-radius: 4px; word-break: break-all; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
img { max-width: 100%; height: auto; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.container-narrow { max-width: 760px; }
.container-xs { max-width: 440px; }

/* Kopfzeile */
.topbar { background: var(--navy); color: #fff; }
/* Die Menuezeile bricht als Ganzes um, nicht mitten im Menue.
   Vorher umbrach das Menue in sich, sobald die Beschriftungen laenger wurden, also in
   Spanisch und Portugiesisch frueher als in Deutsch. Die Zeile wurde dadurch zweizeilig
   und das Zeichen stand links daneben auf halber Hoehe, als haette es sich verlaufen.
   Jetzt haelt das Menue mit min-width zusammen: passt es nicht mehr neben Zeichen und
   rechte Seite, rutscht es geschlossen in eine zweite Zeile und sieht gewollt aus.
   Das braucht keine Schwelle in Pixeln und gilt damit in jeder Sprache von selbst. */
.topbar .container { display: flex; align-items: center; gap: 10px 14px; min-height: 60px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.brand { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; }
.brand:hover { text-decoration: none; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 3px rgba(13,148,136,.3); }
/* Markenzeichen statt Punkt und Name, sobald in den Einstellungen eines gewaehlt ist */
.marke { display: block; height: 30px; width: auto; }
.marke-zeichen { height: 30px; }
@media (max-width: 760px) { .marke { height: 26px; } }
.nav { display: flex; gap: 2px; flex-wrap: nowrap; flex: 1 1 auto; min-width: max-content; }
.nav a { color: #c6cfcf; padding: 8px 9px; border-radius: 6px; font-size: .9rem; white-space: nowrap; }
.nav a:hover, .nav a.active { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.nav-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
/* Auf dem Handy: Menü zum Aufklappen statt gestapelter Punkte */
.nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px;
  background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #dfe6e6; transition: transform .2s, opacity .2s; }
/* Die Schwelle liegt bei 1000 statt 760 Pixeln.
   Bis dahin steht die Kopfzeile zweizeilig: Zeichen und Menue oben, Sprache und Anmeldung
   rechts darunter. Darunter reicht der Platz auch dafuer nicht mehr, dann stuende das
   Zeichen allein in einer eigenen Zeile und darunter zwei weitere. Statt dieser drei Zeilen
   lieber das Klappmenue. Gemessen: drei Zeilen begannen in Deutsch bei 860, in Spanisch bei
   940 Pixeln, also deckt 1000 jede Sprache ab. */
@media (max-width: 1000px) {
  .topbar .container { min-height: 58px; }
  .nav-toggle { display: flex; }
  .topbar .nav, .topbar .nav-right { display: none; }
  .topbar.nav-open .nav, .topbar.nav-open .nav-right { display: flex; flex-direction: column; align-items: stretch; width: 100%; flex: none; gap: 2px; }
  .topbar.nav-open .nav { padding-top: 6px; border-top: 1px solid rgba(255,255,255,.1); }
  .topbar.nav-open .nav a { padding: 11px 8px; font-size: 1rem; }
  .topbar.nav-open .nav-right { padding: 8px 0 14px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .topbar.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topbar.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .topbar.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
.nav-right a, .nav-right button.linklike { color: #dfe6e6; }
.bell { position: relative; }
.bell .count { position: absolute; top: -6px; right: -10px; background: var(--gold); color: #fff; font-size: 11px; border-radius: 10px; padding: 0 5px; }
.subnav { background: #fff; border-bottom: 1px solid var(--line); }
.subnav .container { display: flex; flex-wrap: wrap; gap: 0 2px; }
.subnav a { padding: 12px 12px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-size: .93rem; }
.subnav a.active { color: var(--navy); border-bottom-color: var(--accent); font-weight: 600; }
.subnav a:hover { text-decoration: none; color: var(--navy); }
.adminbar { background: #3b0d0d; }

main { padding: 28px 0 60px; min-height: 60vh; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); margin-top: 4px; }

footer.site { border-top: 1px solid var(--line); background: #fff; color: var(--muted); font-size: .9rem; padding: 24px 0; }
footer.site .container { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; }
footer.site a { color: var(--muted); }

/* Karten & Raster */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.card.flush { padding: 0; }
.card.flush > .card-head { padding: 16px 20px 0; }
.card.highlight { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.card.danger { border-color: #f5c2c2; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.layout-side { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 960px) { .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .layout-side { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } h1 { font-size: 1.45rem; } }

.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .label { color: var(--muted); font-size: .85rem; }
.stat .value { font-size: 1.6rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.stat a.value { display: block; }
/* Eine Kachel, in der etwas offen liegt, steht auf Sand. Null bleibt weiss. */
.stat.offen { background: var(--sand-zart); border-color: var(--sand-rand); }
.stat.offen .value, .stat.offen a.value { color: var(--sand-tief); }
.stat.offen .label { color: var(--sand-ink); }
/* Kachelgruppen bekommen eine leise Ueberschrift, damit neun Zahlen nicht als Haufen dastehen. */
.statgruppe { margin: 0 0 6px; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 8px;
  padding: 9px 16px; font: 600 .93rem/1.2 var(--font); cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: #0a6e70; }
.btn-navy { background: var(--navy); color: #fff; } .btn-navy:hover { background: var(--navy-2); }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line-strong); } .btn-secondary:hover { background: var(--gray-soft); }
.btn-danger { background: var(--red); color: #fff; } .btn-danger:hover { background: #a83a2e; }
/* Umrissknopf fuer die dunkle Kopfzeile. Der Adminzugang soll auf der Startseite
   laut sein, dort ist er das Angebot. Auf den uebrigen Seiten, vor allem auf der
   Kaeuferseite, war er der lauteste Punkt und damit lauter als das, was der
   Besucher dort tun soll (Rueckmeldung vom 22.10.2026). */
.btn-rand { background: transparent; color: #dfe6e6 !important; border-color: rgba(226,232,240,.45); }
.btn-rand:hover { background: rgba(255,255,255,.08); border-color: rgba(226,232,240,.8); }
.btn-ghost { background: transparent; color: var(--accent); padding-left: 6px; padding-right: 6px; }
.btn-sm { padding: 6px 10px; font-size: .85rem; }
.btn-lg { padding: 13px 22px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
form.inline { display: inline; }

/* Formulare */
.field { margin-bottom: 14px; }
.field label, .label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 5px; color: #2b3338; }
.field .hint, .hint { color: var(--muted); font-size: .84rem; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], input[type=tel], input[type=file], select, textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 11px; font: inherit; color: var(--ink); background: #fff; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { min-height: 96px; resize: vertical; }
textarea.code { font-family: var(--mono); font-size: .85rem; min-height: 320px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin-bottom: 10px; }
.check input { margin-top: 4px; }
.error, .field .error { color: var(--red); font-size: .85rem; margin-top: 4px; }
.input-group { display: flex; } .input-group input { border-radius: 8px 0 0 8px; } .input-group .suffix { border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 8px 8px 0; padding: 9px 11px; background: var(--gray-soft); color: var(--muted); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

/* Meldungen */
.alert { border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid; }
.alert-success { background: var(--green-soft); border-color: #bfe5cc; color: #14532d; }
.alert-error { background: var(--red-soft); border-color: #f5c2c2; color: var(--red); }
.alert-warning { background: var(--sand); border-color: var(--sand-rand); color: var(--sand-tief); }
.alert-info { background: var(--flieder); border-color: var(--flieder-rand); color: var(--flieder-tief); }
.alert ul { margin: 4px 0 0 18px; padding: 0; }

/* Plaketten */
.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-blue { background: var(--blue-soft); color: var(--blue); }
.badge-gray { background: var(--gray-soft); color: #4b5563; }
.badge-navy { background: var(--navy); color: #fff; }
.badge-sand { background: var(--sand); color: var(--sand-ink); }
.badge-flieder { background: var(--flieder); color: var(--flieder-ink); }

/* Tabellen */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-weight: 600; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fafbfc; white-space: nowrap; }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: #fbfcfd; }
.table .num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { color: var(--muted); padding: 28px; text-align: center; }

/* Schlüssel/Wert-Liste */
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
dl.kv dt { color: var(--muted); font-size: .9rem; }
dl.kv dd { margin: 0; font-weight: 500; word-break: break-word; }
@media (max-width: 640px) { dl.kv { grid-template-columns: 1fr; gap: 2px; } dl.kv dd { margin-bottom: 8px; } }

.muted { color: var(--muted); } .small { font-size: .86rem; } .strong { font-weight: 700; } .right { text-align: right; } .center { text-align: center; }
.nowrap { white-space: nowrap; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt { margin-top: 16px; } .mb { margin-bottom: 16px; }
.big-money { font-size: 1.9rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.tabs a { padding: 9px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: var(--navy); border-color: var(--accent); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--navy); }

/* Fortschritt Treuhand */
.steps { display: flex; gap: 0; margin: 4px 0 18px; counter-reset: step; overflow-x: auto; }
.steps li { list-style: none; flex: 1; min-width: 110px; position: relative; text-align: center; font-size: .8rem; color: var(--muted); padding-top: 34px; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-strong); line-height: 22px; font-weight: 700; color: var(--muted); z-index: 1; }
.steps li::after { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--line-strong); }
.steps li:first-child::after { display: none; }
.steps li.done { color: var(--green); } .steps li.done::before { content: "✓"; background: var(--green); border-color: var(--green); color: #fff; }
.steps li.done::after, .steps li.current::after { background: var(--green); }
.steps li.current { color: var(--navy); font-weight: 700; } .steps li.current::before { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.steps { padding: 0; }

/* Verlauf */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 14px 22px; border-left: 2px solid var(--line); margin-left: 6px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
.timeline li:last-child { border-left-color: transparent; }
.timeline .when { color: var(--muted); font-size: .8rem; }

/* Nachrichten */
.messages { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.msg { background: var(--gray-soft); border-radius: 10px; padding: 10px 12px; max-width: 85%; }
.msg.mine { background: var(--accent-soft); align-self: flex-end; }
.msg.admin { background: #fff7e0; border: 1px solid #f1dfa6; }
.msg.internal { background: #fdf2f8; border: 1px dashed #e9a8cc; }
.msg .meta { font-size: .78rem; color: var(--muted); margin-bottom: 3px; }
.msg .body { white-space: pre-wrap; }

/* Marktplatz */
.hero { background: linear-gradient(135deg, var(--navy) 0%, #13406b 60%, #0f5f60 100%); color: #fff; padding: 64px 0 56px; }
.hero h1 { color: #fff; font-size: 2.4rem; max-width: 760px; }
.hero p { color: #d7e3ef; font-size: 1.12rem; max-width: 680px; }
.hero form { display: flex; gap: 8px; max-width: 640px; margin-top: 22px; }
.hero input { padding: 13px 14px; font-size: 1.02rem; border: 0; }
@media (max-width: 640px) { .hero { padding: 40px 0; } .hero h1 { font-size: 1.7rem; } .hero form { flex-direction: column; } }
.domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
/* Laufzeile „Neu im Angebot": die Karten wandern gleichmäßig von rechts nach links.
   Der Streifen besteht aus zwei gleichen Hälften und wandert genau eine Hälfte weit, deshalb
   wirkt der Lauf endlos. Beim Zeigen mit der Maus oder beim Antippen bleibt er stehen. */
.dmarquee { position: relative; overflow: hidden; margin-bottom: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.dmarquee-track { display: flex; width: max-content; padding: 4px 0;
  -webkit-animation: dmarquee var(--speed, 60s) linear infinite;
  animation: dmarquee var(--speed, 60s) linear infinite; }
.dmarquee-half { display: flex; gap: 14px; padding-right: 14px; }
.dmarquee-rep { display: flex; gap: 14px; }
.dmarquee:hover .dmarquee-track, .dmarquee:focus-within .dmarquee-track,
.dmarquee.paused .dmarquee-track { -webkit-animation-play-state: paused; animation-play-state: paused; }
.dmarquee-item { flex: 0 0 250px; width: 250px; display: flex; }
.dmarquee-item .domain-card { width: 100%; }
@-webkit-keyframes dmarquee { from { -webkit-transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-50%, 0, 0); } }
@keyframes dmarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
/* Blättern statt Laufen: mit „Bewegung reduzieren" im Betriebssystem von Anfang an, sonst sobald
   jemand einen der Pfeile drückt. Dann steht das Band, und man schiebt es per Pfeil oder Wischen. */
.dmarquee.manual { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  -webkit-mask-image: none; mask-image: none; }
.dmarquee.manual::-webkit-scrollbar { display: none; }
.dmarquee.manual .dmarquee-track { -webkit-animation: none; animation: none; transform: none; }
.dmarquee.manual .dmarquee-half[inert], .dmarquee.manual .dmarquee-rep:not(:first-child) { display: none; }
.dmarquee.manual .dmarquee-item { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  .dmarquee { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .dmarquee::-webkit-scrollbar { display: none; }
  .dmarquee-track { -webkit-animation: none; animation: none; }
  .dmarquee-half[inert], .dmarquee-rep:not(:first-child) { display: none; }
  .dmarquee-item { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .dmarquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); }
  .dmarquee-item { flex-basis: 220px; width: 220px; }
}
.domain-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.domain-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(15,118,110,.08); text-decoration: none; }
.domain-card .name { font-weight: 700; font-size: 1.08rem; color: var(--navy); word-break: break-all; }
.domain-card .price { font-weight: 700; color: var(--accent); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin-bottom: 0; min-width: 130px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.feature .icon { font-size: 1.5rem; }
.flow { counter-reset: flow; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; padding: 0; }
.flow li { list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 18px 58px; position: relative; }
.flow li::before { counter-increment: flow; content: counter(flow); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center; }

/* Balkendiagramm Besuche */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; border-bottom: 1px solid var(--line); }
.bars span { flex: 1; background: var(--accent-2); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.bars span:hover { opacity: 1; }

/* Paginierung */
.pagination { display: flex; gap: 4px; flex-wrap: wrap; margin: 16px 0 0; padding: 0; list-style: none; }
.pagination a, .pagination span { display: block; padding: 6px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-size: .9rem; }
.pagination .active span { background: var(--navy); color: #fff; border-color: var(--navy); }
.pagination .disabled span { color: #c0c4cc; }

.log { background: #141b1f; color: #d1e4ff; font-family: var(--mono); font-size: .82rem; border-radius: 8px; padding: 14px; white-space: pre-wrap; max-height: 460px; overflow: auto; }
.copy { cursor: pointer; }
.qr { background: #fff; padding: 10px; display: inline-block; border: 1px solid var(--line); border-radius: 8px; }
.codes { columns: 2; font-family: var(--mono); }
.dnsbox { background: var(--gray-soft); border-radius: 8px; padding: 12px 14px; font-family: var(--mono); font-size: .88rem; }
.step-status { display: inline-block; width: 18px; }
details.box { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; background: #fff; margin-bottom: 12px; }
details.box summary { cursor: pointer; font-weight: 600; }
.prose { line-height: 1.7; } .prose h2 { margin-top: 1.6em; } .prose ul { padding-left: 1.3em; }

/* Portfolios, Tags, Sammelaktionen */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid var(--line); border-radius:99px; background:#fff; color:var(--ink); font-size:.88rem; }
.chip:hover { text-decoration:none; border-color: var(--line-strong); }
.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--navy); font-weight:600; }
.chip.sm { padding:1px 8px; font-size:.8rem; margin: 0 4px 3px 0; }
.swatch { width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; }
.tag { display:inline-block; font-size:.8rem; color:#44525a; background: var(--gray-soft); border-radius:6px; padding:0 6px; margin: 0 4px 3px 0; }
.tag:hover { text-decoration:none; background:#dfe6e6; }
.bulkbar { padding: 14px 18px; background: #fbfcfd; }
.bulkbar .field { margin-bottom: 4px; }
.placeholders code { margin: 0 3px 3px 0; display:inline-block; }

/* Statistik */
.kpis { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpis .stat .value { font-size: 1.45rem; }
.kpis .stat .hint { color: var(--muted); font-size: .78rem; }
.chart { width:100%; height: 220px; display:block; }
.chart .h { fill: var(--accent); } .chart .b { fill: #c6cfcf; } .chart .grid { stroke: var(--line); stroke-width: 1; }
.chart text { font: 11px var(--font); fill: var(--muted); }
.legend { display:flex; gap:16px; font-size:.82rem; color:var(--muted); margin-top:6px; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.statgrid { display:grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 0 20px; }
.meter { position:relative; }
.meter .fill { position:absolute; left:0; top:3px; bottom:3px; background: var(--accent-soft); border-radius:4px; z-index:0; }
.meter span { position:relative; z-index:1; }
.table td.trunc { max-width: 340px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.table.compact td, .table.compact th { padding-top: 6px; padding-bottom: 6px; }
.flag { font-size: 1.05em; margin-right: 4px; }
.testmode { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 16px; border-radius:var(--radius); margin-bottom:18px; font-size:.93rem; }
.testmode.on { background: var(--blue-soft); border:1px solid #c7d7fe; }
.testmode.off { background: var(--green-soft); border:1px solid #bfe3cb; }
.bigaction { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Auktionen & Ratenkauf */
.mt-s{margin-top:8px}
.auction-box .big-money{margin:2px 0 6px}
.countdown.ending strong,.countdown.ending [data-countdown-text]{color:#c0392b}
.lease-box{border:1px solid var(--line,#e3e8ef);border-radius:10px;padding:12px 14px;background:rgba(103,134,161,.06)}
.sep{text-align:center;margin:14px 0 8px}
.option-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.option-grid label{display:block;border:1px solid var(--line,#e3e8ef);border-radius:10px;padding:10px 12px;cursor:pointer}
.option-grid input{margin-right:6px}
.option-grid label:has(input:checked){border-color:var(--accent,#0b7a75);box-shadow:0 0 0 2px rgba(11,122,117,.15)}
.card-tag{position:absolute;top:10px;right:10px}
.plan-table td,.plan-table th{white-space:nowrap}
.admin-version{margin-left:auto;align-self:center;font-size:.78rem;font-weight:700;color:#0a6e70;background:#faebe8;border:1px solid #f3cdc7;border-radius:99px;padding:3px 10px;white-space:nowrap}

.lang-sel{background:transparent;color:#dfe6e6;border:1px solid rgba(226,232,240,.35);border-radius:8px;padding:4px 6px;font-size:.8rem;width:auto;max-width:9.5rem}
.lang-sel option{color:#1b2529}

/* v1.13.2: Untermenü bricht um statt abgeschnitten zu werden; Version im Kopf */
.subnav a { padding: 10px 11px; }
@media (max-width: 760px) { .subnav .container { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } }
.top-version{font-size:.72rem;font-weight:700;color:#f3cdc7;border:1px solid rgba(254,202,202,.45);border-radius:99px;padding:2px 8px;white-space:nowrap;margin-left:-8px}
.top-version:hover{text-decoration:none;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.staffbar{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:calc(100vw - 32px);
  background:#101a33;color:#c6cfcf;font-size:.86rem;padding:8px 12px;border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.35)}
.staffbar .sb-tag{color:#94a3b8;font-weight:600;letter-spacing:.02em;padding-right:4px}
.staffbar .sb-name{color:#fff;font-weight:700;padding-right:4px}
.staffbar a,.staffbar .linklike{color:#dfe6e6;text-decoration:none;border:1px solid #33415580;border-radius:9px;padding:5px 10px;background:#1e293b80;
  font-size:.82rem;font-weight:600;line-height:1.2;cursor:pointer}
.staffbar a:hover,.staffbar .linklike:hover{background:#44525a;border-color:#44525a;text-decoration:none}
.staffbar form.inline{display:inline-flex;margin:0}
.staffbar select{background:#1e293b;color:#dfe6e6;border:1px solid #44525a;border-radius:9px;padding:5px 8px;font-size:.82rem;font-weight:600}
.staffbar.sb-min{padding:6px 10px}
.staffbar .sb-hide{border:0;background:none;color:#6a747a;padding:2px 4px;font-size:1rem}
@media(max-width:700px){.staffbar{left:8px;right:8px;bottom:8px;font-size:.8rem;gap:6px}}
@media print{.staffbar{display:none}}
.imp-bar{background:#e8d5a6;color:#422006;border-bottom:2px solid #d97706;font-size:.9rem;position:sticky;top:0;z-index:50}
.imp-bar .container{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
/* v1.15: Seiten „Für Käufer“ / „Für Verkäufer“ */
.guide-hero{background:linear-gradient(135deg,var(--navy) 0%,#1e3a5f 100%);color:#fff;border-radius:18px;padding:40px 36px;margin:8px 0 26px}
.guide-hero.seller{background:linear-gradient(135deg,#0f3d3a 0%,var(--navy) 100%)}
.guide-hero h1{color:#fff;font-size:2rem;line-height:1.15;margin:.2em 0 .4em;max-width:780px}
.guide-kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;font-weight:700;color:#7fd9d4;margin:0}
.guide-lead{color:#d6e2ef;font-size:1.08rem;max-width:720px}
.guide-hero .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.guide-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:10px}
.guide-way{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 18px 14px;position:relative}
.guide-way h3{margin:.3em 0 .35em}.guide-way p{margin:0;color:var(--muted);font-size:.93rem}
.gw-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800}
.guide-h2{margin-top:34px}
.guide-grid{margin-top:22px}
.guide-card h3{margin-top:0}
.guide-list{margin:0;padding-left:1.1em}.guide-list li{margin:.35em 0;line-height:1.45}
.guide-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:8px}
.guide-facts div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.guide-facts b{display:block;font-size:1.6rem;color:var(--navy)}.guide-facts span{color:var(--muted);font-size:.9rem}
.guide-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.gp-price{font-size:1.5rem;font-weight:800;color:var(--navy);margin:.2em 0}.gp-price small{font-size:.9rem;color:var(--muted)}
.guide-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px;border-left:4px solid var(--accent)}
.guide-cta h3{margin:0 0 .2em}
@media(max-width:640px){.guide-hero{padding:26px 20px}.guide-hero h1{font-size:1.5rem}}
/* v1.15: Startseite mit Kacheln */
.home-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 18px}
.home-facts div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.home-facts b{display:block;font-size:1.55rem;color:var(--navy);line-height:1.2}.home-facts span{color:var(--muted);font-size:.9rem}
.home-aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:34px}
.home-aud-card{display:block;border-radius:18px;padding:26px 26px 22px;color:#fff;background:linear-gradient(135deg,var(--navy),#1e3a5f);transition:transform .15s,box-shadow .15s}
.home-aud-card.seller{background:linear-gradient(135deg,#0f3d3a,var(--navy))}
.home-aud-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,23,42,.18)}
.home-aud-card h2{color:#fff;margin:.3em 0 .5em;font-size:1.35rem}
.home-aud-card ul{margin:0 0 14px;padding-left:1.1em;color:#d6e2ef}.home-aud-card li{margin:.25em 0}
.home-aud-more{font-weight:700;color:#7fd9d4}
.home-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.home-tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.home-tile h3{margin:.55em 0 .3em;font-size:1.02rem}.home-tile p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.45}
.ht-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#e6f4f1;color:#0a6e70}
.home-tile.t1 .ht-ic{background:#e4f1f0;color:#0e9c9c}.home-tile.t2 .ht-ic{background:#fbf2e2;color:#8a6418}.home-tile.t3 .ht-ic{background:#eef5f5;color:#0a6e70}
@media(max-width:760px){.home-aud{grid-template-columns:1fr}}
/* v1.17: Vergleich */
.cmp-card{margin-bottom:16px}
.cmp-table th,.cmp-table td{font-size:.88rem;vertical-align:top;min-width:120px}
.cmp-table tbody th{font-weight:600;color:var(--navy);min-width:150px}
.cmp-table .cmp-us{background:#e6f4f1;color:#0f5132;font-weight:600;min-width:190px}
.cmp-table thead .cmp-us{background:#0a6e70;color:#fff}
.cmp-table tbody th{text-transform:none;letter-spacing:0;font-size:.9rem}
@media(max-width:700px){
 .cmp-table thead{display:none}
 .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table th,.cmp-table td{display:block;width:100%;min-width:0}
 .cmp-table tr{border-bottom:1px solid var(--line);padding:10px 14px}
 .cmp-table tbody th{padding:0 0 6px;border:0;background:none}
 .cmp-table td{padding:3px 0;border:0;display:flex;gap:10px;justify-content:space-between}
 .cmp-table td::before{content:attr(data-label);color:var(--muted);font-weight:600;flex:0 0 42%}
 .cmp-table td.cmp-us{background:#e6f4f1;border-radius:8px;padding:6px 8px;margin-bottom:4px}
 .cmp-table td.cmp-us::before{color:#0f5132}
}
.slogan{display:inline-block;background:rgba(125,211,199,.14);border:1px solid rgba(125,211,199,.4);color:#bdf0e7;border-radius:99px;padding:6px 14px;font-size:.92rem;font-weight:600;margin:0 0 14px}
.guide-hero .slogan{margin:4px 0 18px}
.hero p.slogan,.guide-hero p.slogan{max-width:none;font-size:.95rem;line-height:1.4}
/* v1.17.1: Fußzeile in Spalten */
footer.site{padding:0;background:var(--navy);color:#b8c6d8;border-top:0;margin-top:48px}
footer.site a{color:#d6e2ef}
footer.site a:hover{color:#fff;text-decoration:none}
footer.site .ft-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:28px;padding-top:40px;padding-bottom:28px}
.ft-logo{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:1.1rem;color:#fff!important}
.ft-logo .dot{width:10px;height:10px;border-radius:50%;background:var(--accent-2)}
.ft-slogan{margin:.8em 0;color:#9fb3c8;font-size:.9rem;max-width:320px;line-height:1.45}
.ft-contact{display:flex;flex-direction:column;gap:4px;font-size:.9rem;margin:0}
.ft-col h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;margin:4px 0 12px}
.ft-col ul{list-style:none;margin:0;padding:0}.ft-col li{margin:0 0 8px;font-size:.92rem}
footer.site .ft-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;padding-bottom:20px;font-size:.82rem;color:#8ea3ba}
.ft-sep{color:rgba(255,255,255,.28)}
.ft-langs{margin-left:auto;display:inline-flex;gap:8px;align-items:center}
.ft-langs a[aria-current]{color:#7fd9d4;font-weight:700}
@media(max-width:860px){footer.site .ft-grid{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
@media(max-width:480px){footer.site .ft-grid{grid-template-columns:1fr}.ft-langs{margin-left:0}}
@media(max-width:480px){footer.site .ft-bottom>.ft-sep{display:none}footer.site .ft-bottom{flex-direction:column;align-items:flex-start}}

/* Zahlungslogos: helle Kacheln, damit sie auch auf der dunklen Fußzeile lesbar bleiben */
.paylogos{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.paylogos ul{display:flex;align-items:center;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.paylogos li{margin:0}
.paylogos li::before{content:none}
.paylogos li{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:7px;width:70px;height:40px;display:flex;align-items:center;justify-content:center}
.paylogos img{display:block;max-height:24px;max-width:56px;width:auto;height:auto;object-fit:contain}
.paylogos-t{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.paylogos-ft{max-width:1180px;margin:0 auto;padding:18px 20px 0}
footer.site .paylogos-t{color:#b8c6d8}
@media(max-width:480px){.paylogos li{width:60px;height:36px}.paylogos img{max-height:21px;max-width:48px}}

/* Domainbewertung */
.apr-head{max-width:760px;margin:0 auto 26px;text-align:center}
.apr-head h1{margin:0 0 8px}
/* Das Suchfeld sitzt jetzt im gemeinsamen Seitenkopf, also runde Formen wie dort. */
.apr-form{display:flex;gap:10px;margin:18px 0 10px;flex-wrap:wrap;max-width:720px}
.apr-form input{flex:1 1 260px;font-size:1.15rem;padding:15px 20px;border:1.5px solid var(--line-strong);border-radius:999px;background:#fff}
.apr-form .btn{border-radius:999px;padding-left:28px;padding-right:28px}
.apr-form input:focus{outline:none;border-color:var(--accent)}
.apr-result{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:18px;align-items:start;margin-bottom:18px}
.apr-score{text-align:center}
.apr-name{font-size:1.25rem;font-weight:800;color:var(--navy);word-break:break-all;margin-bottom:4px}
/* Der Name der Kennzahl gehoert ueber den Ring, nicht nur in den Fliesstext darunter. */
.apr-marke{margin:0 0 12px;font:700 .74rem/1 var(--font-b,inherit);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.apr-ring{--deg:0deg;--tone:#2e7a5e;width:168px;height:168px;margin:0 auto;border-radius:50%;
  background:conic-gradient(var(--tone) var(--deg), #e6ecf3 0);display:flex;align-items:center;justify-content:center}
.apr-ring-in{width:128px;height:128px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.apr-ring-in b{font-size:2.9rem;color:var(--navy);font-weight:800}
.apr-ring-in span{font-size:.78rem;color:var(--muted);margin-top:4px}
.apr-grade{margin:12px 0 0;font-weight:700;color:var(--navy);line-height:1.45}
.apr-range{margin:18px 0 0;padding:14px;border-radius:12px;background:var(--soft,#f3f6f9);display:flex;flex-direction:column;gap:4px}
.apr-range-t{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.apr-range strong{font-size:1.35rem;color:var(--navy)}
.apr-crowd h2{margin-bottom:.4em}
.apr-crowd-form{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;margin-top:12px}
.apr-crowd-in{position:relative;flex:1;min-width:180px;max-width:320px}
.apr-crowd-in input{width:100%;padding:12px 34px 12px 14px;font-size:1.05rem;border:1px solid var(--line-strong);border-radius:10px}
.apr-crowd-in span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600}
.apr-crowd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.apr-crowd-stats div{background:var(--accent-soft);border-radius:12px;padding:14px 16px}
.apr-crowd-stats b{display:block;color:var(--navy);font-size:1.15rem}.apr-crowd-stats span{font-size:.82rem;color:var(--muted)}
.apr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.apr-known{background:#eef8f1;border:1px solid #bfe3cd}
.apr-known strong{color:#2e7a5e}
.dscore{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--soft,#f3f6f9);font-size:.88rem;text-decoration:none;color:inherit}
.dscore b{font-size:1.05rem;color:var(--navy)}
.dscore .g{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font-weight:700;font-size:.78rem;background:#a83a2e}
.dscore .gA{background:#2e7a5e}.dscore .gB{background:#2f8f6f}.dscore .gC{background:#8a7340}.dscore .gD{background:#b8703a}
.dscore small{color:var(--muted)}
.apr-conf{margin-top:16px;text-align:left}
.apr-conf-t{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);margin-bottom:5px}
.apr-bar{height:8px;border-radius:99px;background:#e6ecf3;overflow:hidden}
.apr-bar i{display:block;height:100%;border-radius:99px;background:var(--navy)}
.apr-bar-good i{background:#2e7a5e}.apr-bar-mid i{background:#c99a2e}.apr-bar-weak i{background:#c26a55}
.apr-list{list-style:none;padding:0;margin:14px 0 0}
.apr-list>li{padding:11px 0;border-top:1px solid var(--line)}
.apr-list>li::before{content:none}
.apr-f-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.apr-f-label{font-weight:700;color:var(--navy)}
.apr-f-pts{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.88rem;white-space:nowrap}
.apr-f-note{font-size:.88rem;color:var(--muted);margin-top:6px}
.apr-after{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.apr-how{max-width:900px;margin:0 auto}
.apr-how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:14px 0}
.apr-how-grid div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.apr-how-grid b{display:block;color:var(--navy);margin-bottom:4px}
.apr-how-grid span{font-size:.9rem;color:var(--muted)}
/* Einstieg auf der Startseite */
.apr-teaser{background:linear-gradient(180deg,#fff,#f4f7fa);border:1px solid var(--line);border-radius:16px;padding:26px;margin:28px 0;text-align:center}
.apr-teaser h2{margin:0 0 6px}
.apr-teaser .apr-form{max-width:620px;margin-left:auto;margin-right:auto}
@media(max-width:880px){.apr-result,.apr-after{grid-template-columns:1fr}}
.apr-band{margin:14px 0 0;display:flex;flex-direction:column;gap:5px;align-items:center}
.apr-band strong{font-size:1.05rem;color:var(--navy)}
.apr-scale{position:relative;width:100%;height:8px;border-radius:99px;background:#e6ecf3;margin-top:4px}
.apr-scale i{position:absolute;top:0;height:100%;border-radius:99px;background:#c3d2e2}
.apr-scale b{position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;background:var(--navy);margin-left:-1px}
.apr-crowd-form[hidden]{display:none}
/* Texteditor für Inhaltsseiten */
.ed{border:1px solid var(--line-strong);border-radius:10px;background:#fff;overflow:hidden}
.ed-bar{display:flex;flex-wrap:wrap;gap:2px;padding:6px;border-bottom:1px solid var(--line);background:var(--gray-soft,#f7fafa)}
.ed-bar button{border:0;background:transparent;border-radius:6px;padding:6px 10px;font:inherit;font-size:.9rem;cursor:pointer;color:var(--ink)}
.ed-bar button:hover{background:#e5e7eb}.ed-bar button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
.ed-bar .sep{width:1px;background:var(--line);margin:4px 4px}
.ed-area{min-height:360px;max-height:70vh;overflow:auto;padding:16px 18px;outline:0;line-height:1.6}
.ed-area h2{font-size:1.35rem;margin:1em 0 .4em}.ed-area h3{font-size:1.12rem;margin:1em 0 .4em}.ed-area p{margin:0 0 .8em}
.ed-area img{max-width:100%;height:auto}.ed-area table{border-collapse:collapse}.ed-area td,.ed-area th{border:1px solid var(--line);padding:4px 8px}
.ed textarea{display:none;border:0;border-radius:0;min-height:360px;width:100%;font:13px/1.5 ui-monospace,Menlo,monospace;padding:14px}
.ed.ed-html textarea{display:block}.ed.ed-html .ed-area{display:none}

.apr-report-link{margin:4px 0 10px;font-weight:600}
.apr-report-link a{text-decoration:none}
.apr-report-link a:hover{text-decoration:underline}
.stat.vit { border-left: 4px solid #c6cfcf; }
.stat.vit-good { border-left-color: #2e7a5e; } .stat.vit-good .value { color: #15803d; }
.stat.vit-needs { border-left-color: #d97706; } .stat.vit-needs .value { color: #8a6418; }
.stat.vit-poor { border-left-color: #a83a2e; } .stat.vit-poor .value { color: #b91c1c; }

.hx-speed{display:flex;gap:.5em;align-items:center;margin-top:14px;font-size:.92rem;opacity:.9}.hx-speed svg{width:18px;height:18px;flex:none;fill:#1f9d55}
.vit-pill{display:inline-block;padding:.15em .6em;border-radius:20px;font-size:.8rem;font-weight:600;background:#eef2f7;margin:.2em .2em 0 0}.vit-pill.vit-good{background:#dff5e7;color:#16713a}.vit-pill.vit-needs{background:#fff1d6;color:#8a5a00}.vit-pill.vit-poor{background:#fde2e0;color:#a2261b}

/* Button-Effekt überall (wie „Jump to recipe“): beim Darüberfahren wird der Knopf durchsichtig, Rahmen und Schrift
   leuchten in der Farbe des Knopfs, mit leichtem Schein und Anheben. Der Rahmen liegt innen, nichts verrutscht. */
.btn { --fx: var(--accent); transition: transform .25s, box-shadow .25s, background-color .25s, color .25s, border-color .25s; }
.btn-navy { --fx: var(--navy); } .btn-danger { --fx: var(--red); }
.btn:not([disabled]):hover, .btn:not([disabled]):focus-visible { background: transparent !important; color: var(--fx) !important; border-color: transparent !important;
    box-shadow: inset 0 0 0 1.5px var(--fx), 0 10px 26px -12px var(--fx) !important; transform: translateY(-2px); text-decoration: none; }
.btn:not([disabled]):hover *, .btn:not([disabled]):focus-visible * { color: inherit; fill: currentColor; }
.btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:focus-visible { transform: none; } }
.topbar .btn, footer.site .btn { --fx: #fff; }
/* Hinweis Website erstellen (Konto) */
.card.web-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;border-left:4px solid var(--accent)}
.card.web-cta h2{margin:0 0 4px}.card.web-cta p{margin:0}.card.web-cta .btn{flex:none}
@media (max-width:640px){.card.web-cta{flex-direction:column;align-items:flex-start}}

/* Konfetti nach einer verbindlichen Handlung (Angebot, Auftrag) */
.kf{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9999}
.kf i{position:absolute;top:-24px;border-radius:2px;opacity:.95;animation-name:kf-a;animation-timing-function:cubic-bezier(.25,.6,.4,1);animation-fill-mode:forwards}
.kf i.kf-b{animation-name:kf-b}
@keyframes kf-a{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(106vh) rotate(680deg);opacity:.7}}
@keyframes kf-b{0%{transform:translateY(0) translateX(0) rotate(0)}50%{transform:translateY(50vh) translateX(40px) rotate(260deg)}100%{transform:translateY(106vh) translateX(-30px) rotate(560deg);opacity:.7}}
@media (prefers-reduced-motion: reduce){.kf{display:none}}


/* Anwendungsvideos: Posterbild zuerst, geladen wird erst beim Start */
.filme{margin:38px 0}
.filme h2{margin:0 0 .25em}
.filme-vor{color:var(--muted);margin:0 0 20px;max-width:64ch}
/* Eine Spalte, volle Breite: die Aufnahme ist 1280 breit, kleiner wird die Schrift unlesbar */
.filme-reihe{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);max-width:1040px;margin:0 auto}
.film{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.film video{width:100%;height:auto;display:block;background:var(--navy);aspect-ratio:16/10;object-fit:cover}
.film figcaption{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px}
.film figcaption b{color:var(--navy);font-size:1.02rem}
.film figcaption span{color:var(--muted);font-size:.92rem}
.film .film-dauer{font-family:var(--mono);font-size:.82rem;color:var(--accent)}

/* Vergleich: Kurzfassung in der eigenen Spalte */
.cmp-table td.cmp-us .vgl-kurz { display: block; font-weight: 700; margin-bottom: 2px; }