/* Stylesheet der Postmaster-Kontaktseite - vorher der Inline-<style> in
   index.html.

   ZWEI DINGE NACH JEDER AENDERUNG HIER:

     1. ./csp-hash.sh neu laufen lassen und den integrity-Wert in das
        <link rel="stylesheet"> in index.html eintragen. Stimmt er nicht,
        verwirft der Browser die Datei - die Seite bleibt lesbar, aber
        vollstaendig ungestylt.
     2. Nichts Externes hereinholen. default-src 'none' in
        nginx-headers.conf laesst nur img-src data: durch (Rauschtextur),
        jedes @import und jede fremde url() bleibt still blockiert.        */

:root {
  --bg:        #08090b;
  --text:      #ededf0;
  --dim:       #9b9ba6;
  --faint:     #8a8a95;   /* 5,5:1 auf der Karte - war #64646f mit 3,2:1 */

  --line:        rgba(255,255,255,0.075);
  --line-hi:     rgba(255,255,255,0.14);
  /* Rahmen von Eingabefeldern muessen sich abheben (SC 1.4.11, 3:1),
     Trennlinien und Panelraender duerfen leise bleiben.            */
  --field-line:  rgba(255,255,255,0.34);
  --placeholder: #7f7f8a; /* 4,7:1 - war #4d4d57 mit 2,2:1              */

  --accent:    #e5385c;
  --accent-hi: #f4587a;
  /* Weiss auf dem hellen Akzent ergibt nur 3,2:1. Fuer Flaechen mit
     weisser Schrift deshalb eine dunklere Fassung: 4,5:1 und 5,8:1. */
  --on-accent:    #d63a5e;
  --on-accent-lo: #bf2749;
  --green:     #34d399;
  --red:       #f87171;

  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --r: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- ambient background ---------- */

.glow, .noise, .grid-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.glow {
  z-index: 0;
  background:
    radial-gradient(680px 460px at 12% -8%,  rgba(229,56,92,0.20), transparent 68%),
    radial-gradient(560px 420px at 92% -2%,  rgba(255,122,80,0.12),  transparent 66%),
    radial-gradient(900px 700px at 50% 108%, rgba(229,56,92,0.07), transparent 70%);
}
.grid-lines {
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(760px 460px at 50% -60px, #000 0%, transparent 78%);
          mask-image: radial-gradient(760px 460px at 50% -60px, #000 0%, transparent 78%);
}
.noise {
  z-index: 2;
  opacity: 0.032;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 10vw, 6rem) 1.25rem 5rem;
}

/* ---------- entrance ---------- */

.rise { opacity: 0; transform: translateY(14px); animation: rise 720ms cubic-bezier(.22,.68,.36,1) forwards; }
.d1 { animation-delay: 60ms; }  .d2 { animation-delay: 140ms; }
.d3 { animation-delay: 220ms; } .d4 { animation-delay: 300ms; }
.d5 { animation-delay: 380ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; opacity: 1; transform: none; }
  * { transition: none !important; }
}

/* ---------- hero ---------- */

h1 {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  margin: 0;
  font-size: clamp(2.25rem, 7vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  background: linear-gradient(176deg, #ffffff 12%, #9fa0b4 92%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.logo {
  height: 0.72em;
  width: auto;
  flex: none;
  filter: drop-shadow(0 4px 14px rgba(229,56,92,0.35));
}

.lede {
  margin: 1rem 0 0;
  max-width: 32rem;
  color: var(--dim);
  font-size: 1rem;
}

/* ---------- cards ---------- */

.card {
  position: relative;
  min-width: 0;
  margin-top: 1.25rem;
  padding: 1.375rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  backdrop-filter: blur(10px);
}
.card.menu-open { z-index: 30; }
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
}

@media (min-width: 64rem) {
  .page { max-width: 70rem; }
  .columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
    align-items: start;
  }
  .columns > .col { min-width: 0; }
}

/* echte <h2>, damit ein Screenreader die Seite ueber die
   Ueberschriftenliste durchlaufen kann - deshalb hier gegen
   Fettschrift und Standardabstand des Browsers.           */
.section-label {
  display: block;
  margin: 3rem 0 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--faint);
}

/* ---------- custom dropdown ---------- */

.select { position: relative; }

.trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8125rem 0.9375rem;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.trigger:hover { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.05); }
.trigger[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(229,56,92,0.15);
}
.trigger .name { flex: 1; }
.chev {
  width: 14px; height: 14px;
  flex: none;
  color: var(--faint);
  transition: transform 180ms ease;
}
.trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Ein Rezept fuer alles, was ueber dem Layout schwebt: Auswahlliste,
   Kalender, Uhr, Zeitzonen und die Erklaerungen. Der Hintergrund ist
   absichtlich deckend - darueber liegen Rausch- und Rasterebenen.   */
.menu, .pop, .tip {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  border: 1px solid var(--line-hi);
  border-radius: 10px;
  background: #101116;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.8);
  animation: drop 150ms ease-out;
}
.menu {
  right: 0;
  margin: 0;
  padding: 5px;
  list-style: none;
}
@keyframes drop { from { opacity: 0; transform: translateY(-5px); } }

.menu li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.625rem;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--dim);
  cursor: pointer;
}
.menu li:hover, .zone:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.menu li.active, .zone.active {
  background: rgba(229,56,92,0.18);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent-hi);
}
.menu li[aria-selected="true"],
.zone[aria-selected="true"] { color: var(--text); }

/* alles, was scrollt, sieht gleich aus */
.menu.prose, .tcol > .list, .zone-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.16) transparent;
}
.menu.prose::-webkit-scrollbar,
.tcol > .list::-webkit-scrollbar,
.zone-list::-webkit-scrollbar { width: 5px; }
.menu.prose::-webkit-scrollbar-thumb,
.tcol > .list::-webkit-scrollbar-thumb,
.zone-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 3px; }
.menu.prose { max-height: min(20rem, 50vh); }

.menu .group, .zone-group {
  padding: 0.75rem 0.625rem 0.3125rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  cursor: default;
}
.menu .group:not(:first-child),
.zone-group ~ .zone-group {
  margin-top: 0.3125rem;
  border-top: 1px solid var(--line);
}
.menu .group:hover { background: none; }
.menu.prose li { font-family: var(--sans); font-size: 0.8125rem; line-height: 1.4; }
.trigger.prose .name { font-family: var(--sans); font-size: 0.9375rem; white-space: normal; }
.trigger .name.placeholder { color: var(--placeholder); }

#other-wrap { margin-top: 0.5rem; }
.menu li .tick, .zone .tick { width: 13px; height: 13px; flex: none; color: var(--accent-hi); opacity: 0; }
.menu li[aria-selected="true"] .tick,
.zone[aria-selected="true"] .tick { opacity: 1; }

/* ---------- record tiles ---------- */

.records {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.625rem;
  margin-top: 0.875rem;
}
.records > .rec { grid-column: span 12; }
.records > .s5  { grid-column: span 5; }
.records > .s6  { grid-column: span 6; }
.records > .s7  { grid-column: span 7; }

/* Umbruch nach der Breite der Karte, nicht des Fensters:
   zuerst IPv4/IPv6, danach auch die Domain-Kacheln. */
@container (max-width: 40rem) {
  .records > .s5,
  .records > .s7 { grid-column: span 12; }
}
@container (max-width: 25rem) {
  .records > .rec { grid-column: span 12; }
}

/* Rückfallebene für Browser ohne Container Queries */
@media (max-width: 34rem) {
  .records > .rec { grid-column: span 12; }
}

.rec {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.02);
  transition: border-color 140ms ease, background-color 140ms ease;
}
.rec { min-width: 0; }
.rec:hover { border-color: var(--line-hi); background: rgba(255,255,255,0.038); }
/* Eine IPv6-Adresse hat keine Trennstellen - ohne break-all bricht sie
   nicht um, sondern laeuft unter den Kopierknopf.                    */
.rec.wide .v {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-all;
  line-height: 1.35;
}
.rec .body { min-width: 0; flex: 1; }
.rec .k {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  color: var(--faint);
  margin-bottom: 0.1875rem;
}
.rec .v {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}
.copy:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.copy svg { width: 14px; height: 14px; }
.copy.done { color: var(--green); }

.swap { animation: swap 300ms ease-out; }
@keyframes swap { from { opacity: 0.25; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .swap, .menu, .pop, .tip, .err { animation: none; } }

/* ---------- operator rows ---------- */

.rows { margin: 0; }
.rows > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.rows > div:first-child { padding-top: 0; }
.rows dt { font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); padding-top: 0.25rem; }
.rows dd { margin: 0; }
@media (max-width: 30rem) {
  .rows > div { grid-template-columns: 1fr; gap: 0.125rem; }
}

address { font-style: normal; }

a { color: inherit; text-decoration-color: var(--faint); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent-hi); }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* ---------- form ---------- */

.field { margin-bottom: 0.875rem; }
.field label,
.field .label,
.picker-label {
  display: block;
  margin-bottom: 0.375rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--faint);
}

#questions:not(:empty) {
  margin-top: 1.375rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--line);
  animation: rise 420ms cubic-bezier(.22,.68,.36,1) both;
}
@media (prefers-reduced-motion: reduce) { #questions:not(:empty) { animation: none; } }

.field .optional { color: var(--faint); text-transform: none; letter-spacing: 0; }

#questions .about {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  color: var(--dim);
}

.q-head {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 20px;
  margin-bottom: 0.375rem;
}
@media (pointer: coarse) { .q-head { min-height: 24px; } }
.q-head label { margin-bottom: 0; }

.hint-btn {
  flex: none;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--field-line);
  border-radius: 50%;
  background: transparent;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
/* WCAG 2.5.8 verlangt 24px auf Fingergeraeten */
@media (pointer: coarse) { .hint-btn { width: 24px; height: 24px; } }
.hint-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.45); }
/* Hilfe ist neutral - der Akzent bleibt Auswahl und Fokus vorbehalten */
.hint-btn[aria-expanded="true"] {
  color: var(--text);
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.09);
}

/* Optisch verborgen, aber vorlesbar: der Erklaerungstext haengt so als
   echte Beschreibung am Eingabefeld und nicht nur im Panel.        */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Die Erklaerung schwebt ueber dem Layout - sie schiebt kein Feld mehr
   weg und bringt in der Zeile Datum/Zeit/Zone nichts aus dem Lot.
   pointer-events: none, damit sie nie einen Klick abfaengt.        */
.tip {
  z-index: 25;
  padding: 0.5625rem 0.75rem;
  pointer-events: none;
}
.tip p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--dim);
}
.tip::after {
  content: "";
  position: absolute;
  left: var(--caret, 20px);
  top: -5px;
  width: 8px; height: 8px;
  margin-left: -4px;
  transform: rotate(45deg);
  background: #101116;
  border-left: 1px solid var(--line-hi);
  border-top: 1px solid var(--line-hi);
}
.tip.above::after {
  top: auto;
  bottom: -5px;
  border-left: 0; border-top: 0;
  border-right: 1px solid var(--line-hi);
  border-bottom: 1px solid var(--line-hi);
}

.err {
  display: none;
  align-items: center;
  gap: 0.375rem;
  margin: 0.4375rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--red);
  animation: errIn 180ms ease-out;
}
.err.on { display: flex; }
.err svg { width: 13px; height: 13px; flex: none; }
@keyframes errIn { from { opacity: 0; transform: translateY(-3px); } }

.field.invalid input,
.field.invalid textarea {
  border-color: rgba(248,113,113,0.55);
  background-color: rgba(248,113,113,0.045);
}
.field.invalid .trigger {
  border-color: rgba(248,113,113,0.55);
  background: rgba(248,113,113,0.045);
}
.field.invalid input:focus,
.field.invalid textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(248,113,113,0.16);
}

input[type="text"], textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--field-line);
  border-radius: 9px;
  background: rgba(255,255,255,0.025);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:hover, textarea:hover { border-color: rgba(255,255,255,0.45); }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background-color: rgba(255,255,255,0.045);
  box-shadow: 0 0 0 3px rgba(229,56,92,0.16);
}

/* zusammengehoerige Felder nebeneinander; sie brechen um,
   sobald die Spalte zu schmal wird                          */
.field-row { display: flex; flex-wrap: wrap; gap: 0 0.75rem; }
.field-row > .field { flex: 1 1 8.5rem; min-width: 0; }
.field-row > .field.wide { flex: 1 1 12.5rem; }

/* ---------- Datum, Uhrzeit, Zeitzone ----------
   Die Browser-eigenen Kalender, Uhren und Auswahllisten lassen sich
   nicht gestalten, deshalb sind sie hier selbst gebaut - im gleichen
   Dunkel wie der Rest des Formulars.                                */

.picker { position: relative; }

.pick-trig {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  min-height: 2.6875rem;
  border: 1px solid var(--field-line);
  border-radius: 9px;
  background: rgba(255,255,255,0.025);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.pick-trig .name,
.zone span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-trig .name.placeholder { color: var(--placeholder); }
.pick-trig svg { width: 14px; height: 14px; flex: none; color: var(--faint); transition: color 140ms ease, transform 180ms ease; }
.pick-trig:hover { border-color: rgba(255,255,255,0.45); }
.pick-trig:hover svg { color: var(--dim); }
.pick-trig:focus-visible,
.pick-trig[aria-expanded="true"] {
  outline: none;
  border-color: var(--accent);
  background-color: rgba(255,255,255,0.045);
  box-shadow: 0 0 0 3px rgba(229,56,92,0.16);
}
.pick-trig[aria-expanded="true"] svg { color: var(--accent-hi); }
.pick-trig[aria-expanded="true"] .chev { transform: rotate(180deg); }
.field.invalid .pick-trig {
  border-color: rgba(248,113,113,0.55);
  background-color: rgba(248,113,113,0.045);
}

.pop { padding: 0.5rem; }

/* Kalender */
.pop.cal { width: 15.5rem; }
.cal-head {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.4375rem;
}
.cal-head .mon {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text);
}
.step {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.step svg { width: 13px; height: 13px; }
.step:hover, .flat:hover, .ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); }
.step:disabled { opacity: 0.3; cursor: not-allowed; }
.step:disabled:hover { color: var(--dim); border-color: var(--line-hi); background: transparent; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid .wd, .tcol > .ch {
  padding: 0.125rem 0 0.375rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.05em;
  color: var(--faint);
  text-align: center;
}
.day {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.day:hover:not(:disabled) { background: rgba(255,255,255,0.07); color: var(--text); }
.day.out { color: var(--placeholder); }
.day.today { border-color: var(--line-hi); color: var(--text); }
.day.on {
  border-color: transparent;
  background: linear-gradient(180deg, var(--on-accent), var(--on-accent-lo));
  color: #fff;
}
.day:disabled { color: #46464f; cursor: not-allowed; }

/* Uhrzeit */
.pop.clock { width: 11.5rem; }
.cols { display: flex; gap: 0.375rem; }
.tcol { flex: 1; min-width: 0; }
.tcol > .list { max-height: 11.25rem; }
.slot {
  display: block;
  width: 100%;
  padding: 0.3125rem 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.slot:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.slot.on {
  background: linear-gradient(180deg, var(--on-accent), var(--on-accent-lo));
  color: #fff;
}

.pop-foot {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}
.flat {
  flex: 1;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: transparent;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

/* Zeitzonenliste: echte Zonennamen, nach Region gruppiert,
   mit Suchfeld oben - die Liste ist lang.                  */
.pop.zones {
  display: flex;
  flex-direction: column;
  min-width: 100%;
  width: max-content;
  max-width: min(20rem, 82vw);
  max-height: min(21rem, 52vh);
}
.zone-find {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0 0.5rem 0.5rem;
  margin-bottom: 0.375rem;
  border-bottom: 1px solid var(--line);
}
.zone-find svg { width: 13px; height: 13px; flex: none; color: var(--faint); }
.pop.zones input.find {
  width: 100%;
  min-width: 9rem;
  padding: 0.25rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.pop.zones input.find:hover { border: 0; }
.pop.zones input.find:focus {
  outline: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}
/* Unter 16px zoomt iOS Safari beim Antippen ins Feld hinein. Der
   Sprung verschiebt das Sichtfenster und damit die ganze Liste. */
@media (pointer: coarse) {
  .pop.zones input.find { font-size: 1rem; }
}
.zone-list { flex: 1; min-height: 0; }

.zone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4375rem 0.5rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.zone-none {
  padding: 0.75rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--faint);
}

/* nur ohne JavaScript sichtbar */
.fallback-note {
  margin-top: 1.375rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 9px;
  background: rgba(255,255,255,0.02);
}
.fallback-note p { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--dim); }
.fallback-note p:last-of-type { margin-bottom: 0; }
.fallback-note a { color: var(--accent-hi); }
.ns-servers { margin: 1rem 0 0; font-family: var(--mono); font-size: 0.75rem; }
.ns-servers dt { color: var(--text); }
.ns-servers dd { margin: 0.1875rem 0 0.625rem; color: var(--faint); word-break: break-all; }
.ns-servers dd:last-child { margin-bottom: 0; }

.actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.send {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 9px;
  background: linear-gradient(180deg, var(--on-accent), var(--on-accent-lo));
  color: #fff;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(229,56,92,0.9), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.send:hover { filter: brightness(1.09); box-shadow: 0 8px 24px -8px rgba(229,56,92,1); }
.send:active { transform: translateY(1px); }
.send svg { width: 14px; height: 14px; }

.routed { font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); }
.routed b { font-weight: 400; color: var(--dim); }

/* Der Meldebereich bleibt immer im Baum - ein role="status", das erst
   beim Fuellen eingeblendet wird, wird von Screenreadern nicht
   ueberwacht und bleibt stumm. Leer nimmt er keinen Platz ein.       */
#status {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--dim);
}
#status:empty { margin: 0; }
#status.failed { color: var(--red); }

/* ---------- confirmation ---------- */

.success {
  text-align: center;
  padding: 1.25rem 0 0.75rem;
  animation: rise 520ms cubic-bezier(.22,.68,.36,1) both;
}

.check {
  width: 60px; height: 60px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(52,211,153,0.18), transparent 70%);
}
.check svg { width: 56px; height: 56px; color: var(--green); overflow: visible; }
.check .hand-path { display: none; }
/* Die Uebergabe ist kein Erfolg - kein gruener Haken, sondern ein
   ruhiger Hinweis in der Akzentfarbe.                            */
.check.notice { background: radial-gradient(circle at 50% 45%, rgba(229,56,92,0.18), transparent 70%); }
.check.notice svg { color: var(--accent-hi); }
.check.notice .tick-path { display: none; }
.check.notice .hand-path { display: block; }
.check circle {
  stroke-dasharray: 158;
  stroke-dashoffset: 158;
  animation: draw 620ms cubic-bezier(.4,0,.2,1) 80ms forwards;
}
.check path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: draw 340ms cubic-bezier(.4,0,.2,1) 520ms forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.success h2:focus { outline: none; }
.success h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.success p {
  margin: 0.5rem auto 0;
  max-width: 24rem;
  font-size: 0.875rem;
  color: var(--dim);
}
.success p b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--text);
  word-break: break-all;
}

.success .fallback {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: var(--faint);
}
.success .fallback a { color: var(--dim); }

/* Uebergabe von Hand, wenn die Nachricht fuer einen mailto-Link zu lang ist */
.handover { margin: 1.25rem 0 1rem; text-align: left; }
.ho-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.025);
}
.ho-row + .ho-row { margin-top: 0.5rem; }
.ho-k {
  flex: none;
  width: 4rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.ho-v {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text);
  word-break: break-all;
}
#ok-long label.ho-k { display: block; width: auto; margin-bottom: 0.375rem; text-align: left; }
#ok-long textarea {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.5;
  min-height: 0;
  resize: vertical;
}

.ho-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.ho-steps > * {
  flex: 1 1 11rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0;
  text-decoration: none;
}
.ho-steps .num {
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  flex: none;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1;
}
.ghost.done   { color: var(--green); border-color: rgba(52,211,153,0.4); }
.ghost.failed { color: var(--red);   border-color: rgba(248,113,113,0.4); }
.copy.failed  { color: var(--red); }

.ghost {
  margin-top: 1.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-hi);
  border-radius: 9px;
  background: rgba(255,255,255,0.03);
  color: var(--dim);
  font-family: var(--sans);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .success { animation: none; }
  .check circle, .check path { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 30rem) {
  .menu li { padding: 0.6875rem 0.625rem; }
  .actions { gap: 0.625rem; }
  .send { flex: 1; justify-content: center; }
}

@media print {
  .glow, .noise, .grid-lines, form, .select { display: none; }
  body { background: #fff; color: #000; }
  h1 { color: #000; -webkit-text-fill-color: #000; }
  .card, .rec { border-color: #ccc; background: none; }
}

/* Zum Schluss und an einer Stelle: Verstecktes bleibt versteckt, auch
   wenn eine Regel weiter oben ein eigenes display setzt. Genau daran
   hing die Zeitzonenliste einmal dauerhaft offen.                   */
.menu[hidden], .pop[hidden], .tip[hidden], #other-wrap[hidden],
.zone[hidden], .zone-group[hidden], .zone-none[hidden],
.success[hidden], #ok-long[hidden], #ok-short[hidden] { display: none; }