:root {
  color-scheme: light;
  --ink: #17211c;
  --paper: #f3eee7;
  --panel: rgba(255, 250, 244, 0.82);
  --muted: #5f6a67;
  --line: rgba(23, 33, 28, 0.13);
  --line-strong: rgba(23, 33, 28, 0.25);
  --coral: #df725c;
  --coral-dark: #9e483d;
  --signal: #c254a3;
  --success: #587a60;
  --danger: #9b463d;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
}

.app-page {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 12% 4%, rgba(132, 204, 231, 0.28), transparent 27rem),
    radial-gradient(circle at 91% 12%, rgba(240, 166, 211, 0.3), transparent 28rem),
    var(--paper);
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01", "ss02", "cv01";
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.app-page ::selection {
  background: #f0a6d3;
  color: var(--ink);
}

a {
  color: var(--coral-dark);
  text-underline-offset: 0.18em;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.app-header {
  position: fixed;
  z-index: 30;
  top: 26px;
  left: 50%;
  display: flex;
  height: 40px;
  align-items: stretch;
  overflow: hidden;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 244, 0.84);
  box-shadow: 0 14px 45px rgba(107, 73, 55, 0.15), inset 0 1px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(1.25);
  transform: translateX(-50%);
  transition: box-shadow 220ms ease;
}

.app-brand {
  display: inline-flex;
  height: 32px;
  align-items: center;
  gap: 8px;
  padding: 0 11px 0 8px;
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-size: 10px;
  font-weight: 620;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 180ms ease, padding 420ms cubic-bezier(.2, .8, .2, 1);
}

.brand-glyph {
  display: block;
  width: auto;
  height: 19px;
  flex: 0 0 auto;
  transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
}

/* Der Wuerfel kippt beim Hover leicht in die Isometrie hinein. */
.app-brand:hover .brand-glyph,
.admin-brand:hover .brand-glyph,
.site-mark:hover .brand-glyph {
  transform: rotate(-8deg) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .brand-glyph {
    transition: none;
  }

  .app-brand:hover .brand-glyph,
  .admin-brand:hover .brand-glyph,
  .site-mark:hover .brand-glyph {
    transform: none;
  }
}

.app-nav {
  display: flex;
  height: 32px;
  max-width: var(--header-nav-width, 340px);
  align-items: stretch;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transform-origin: left center;
  visibility: visible;
  will-change: max-width, opacity, transform;
  transition:
    max-width 420ms cubic-bezier(.2, .8, .2, 1),
    opacity 180ms ease,
    transform 420ms cubic-bezier(.2, .8, .2, 1),
    visibility 0s;
}

.app-header.is-collapsed .app-nav {
  max-width: 0;
  opacity: 0;
  transform: translateX(-16px) scale(0.96);
  visibility: hidden;
  transition:
    max-width 420ms cubic-bezier(.2, .8, .2, 1),
    opacity 140ms ease,
    transform 420ms cubic-bezier(.2, .8, .2, 1),
    visibility 0s 420ms;
}

/* Messzustand (siehe header.js): kurz ohne Deckel, damit die natürliche Breite
   auch im eingeklappten Header stimmt. Muss nach .is-collapsed stehen, sonst
   gewinnt dessen max-width: 0. Sichtbar wird der Zustand nie — die Klasse wird
   im selben Task wieder entfernt. */
.app-header.is-measuring .app-nav {
  max-width: none;
  transition: none;
}

.app-header.is-collapsed .app-brand {
  padding-right: 10px;
  border-right-color: transparent;
}

.app-nav a {
  display: inline-flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border-left: 1px solid rgba(23, 33, 28, 0.08);
  color: #59645e;
  font-size: 9px;
  font-weight: 580;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}

.app-nav a:hover {
  background: rgba(194, 84, 163, 0.1);
  color: var(--ink);
}

.app-nav > :first-child {
  border-left: 0;
}

.app-nav .app-nav-cta {
  margin-left: 2px;
  border: 0;
  border-radius: 6px;
  background: var(--coral);
  color: #fffaf2;
}

.app-nav .app-nav-cta:hover {
  background: var(--signal);
  color: #fffaf2;
}

.app-header a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.wrap {
  width: min(820px, 100%);
  min-height: calc(100vh - 146px);
  margin: 0 auto;
  padding: 138px 24px 96px;
}

.setup-wrap {
  width: min(1040px, 100%);
}

.auth-wrap {
  width: min(680px, 100%);
}

h1,
h2,
h3,
p {
  text-wrap: pretty;
}

h1 {
  margin: 0;
  font-size: clamp(48px, 8vw, 76px);
  font-weight: 450;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

h1 em {
  color: var(--coral-dark);
  font-family: Iowan Old Style, Baskerville, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.05em;
}

h2 {
  margin: 42px 0 12px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.page-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 19px;
  color: var(--coral-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.page-kicker::before {
  width: 24px;
  height: 1px;
  background: currentColor;
  content: "";
}

p.lead {
  max-width: 680px;
  margin: 24px 0 38px;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
}

.muted,
p.sub {
  color: var(--muted);
  font-size: 13px;
}

p.sub {
  max-width: 660px;
  margin: 9px 0 26px;
}

.card,
.panel {
  margin: 14px 0;
  padding: 21px 23px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 18px 55px rgba(82, 67, 54, 0.08), inset 0 1px rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px) saturate(1.15);
}

.copybox {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 8px 0 4px;
  padding: 8px 8px 8px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 252, 0.62);
}

/* Eingabefeld in der Copybox (Probeanruf auf /signup und /konto): die globale
   Feld-Regel setzt width: 100% und margin-top — beides passt in der Flex-Zeile
   nicht und schöbe das Feld gegenüber dem Button nach unten. Der Typ-Selektor
   muss mit, sonst gewinnt die spätere, gleich spezifische input[type="tel"]. */
.copybox input[type="tel"] {
  min-width: 0;
  flex: 1;
  width: auto;
  margin-top: 0;
}

.copybox code {
  min-width: 0;
  flex: 1;
  align-self: center;
  color: #2b3a33;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}

button,
.btn,
a.copy {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.72);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

button:hover,
.btn:hover,
a.copy:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #fffaf2;
}

button.primary,
button.copy,
.btn.primary,
a.copy.primary {
  border-color: var(--ink);
  background: var(--ink);
  color: #fffaf2;
}

button.primary:hover,
button.copy:hover,
.btn.primary:hover,
a.copy.primary:hover {
  border-color: var(--signal);
  background: var(--signal);
}

button.secondary {
  background: transparent;
}

button:active,
.btn:active,
a.copy:active {
  transform: translateY(1px);
}

button:disabled {
  cursor: wait;
  opacity: 0.55;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
  width: 100%;
  margin-top: 5px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255, 255, 252, 0.72);
  color: var(--ink);
}

label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 400;
}

.field-block {
  display: block;
  width: min(440px, 100%);
}

/* Zustimmungs-Zeile (AGB/Datenschutz beim Signup, Leistungsbeginn im Checkout):
   Kästchen links, Text daneben statt darunter — das label-Grundlayout stellt
   Beschriftungen sonst über das Feld. */
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.consent input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--coral-dark);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}

table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 13px;
}

thead,
tbody {
  width: 100%;
}

th,
td {
  min-width: 90px;
  padding: 11px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pill,
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 252, 0.5);
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.pill::before,
.badge.on::before {
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--coral);
  content: "";
}

.s-done { color: var(--success); }
.s-failed { color: var(--danger); }
.s-live { color: var(--coral-dark); }

.note {
  margin: 14px 0;
  padding: 15px 17px;
  border: 1px solid rgba(158, 72, 61, 0.25);
  border-left: 3px solid var(--coral);
  border-radius: 12px;
  background: rgba(255, 244, 235, 0.72);
  color: #5d3d35;
  font-size: 13px;
}

/* Vorrang-Hinweis auf den englischen Rechtsseiten. Bewusst ruhiger als .note:
   Das ist kein Fehler und keine Warnung, sondern eine Einordnung — die Coral-
   Kante von .note wuerde sie wie ein Problem aussehen lassen. */
.translation-note {
  border-color: var(--line);
  border-left-color: var(--line-strong);
  background: rgba(255, 250, 244, 0.6);
  color: var(--muted);
}

.translation-note a {
  color: var(--coral-dark);
}

.ok {
  color: var(--success);
  font-size: 13px;
  font-weight: 650;
}

/* Beleg-Liste (Kündigungsbestätigung): Feld links, Wert rechts, umbruchfest,
   damit die Seite auch ausgedruckt als Nachweis taugt. */
.kv {
  display: grid;
  margin: 0;
  gap: 2px 18px;
  grid-template-columns: auto 1fr;
  font-size: 14px;
}

.kv dt {
  color: var(--muted);
}

.kv dd {
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

/* Fußzeile: Markenzeichen links, thematisch sortierte Spalten rechts, darunter
   eine schmale Schlusszeile. Alle Links bleiben ausgeklappt sichtbar — der
   Kündigungsbutton muss unmittelbar erreichbar sein, nicht hinter einem
   Aufklapper. */
.site {
  width: min(1040px, calc(100% - 48px));
  margin: 0 auto;
  padding: 44px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.site-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 34px 48px;
}

.site-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.site-mark .brand-glyph {
  height: 22px;
}

.site-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 20px;
}

.site-col {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
}

.site-col h2 {
  margin: 0 0 2px;
  color: var(--ink);
  font: inherit;
  letter-spacing: 0.14em;
}

/* FAQ-Abschnitt (templates/_faq.html). Bewusst schlicht und immer offen statt
   als <details>: Zugeklappter Text zaehlt fuer Suchmaschinen weniger, und die
   Antworten sind kurz genug, dass Aufklappen nichts spart. */
.faq {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.faq > h2 {
  margin: 0 0 22px;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.faq-list {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.faq-item h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.faq-item p {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
}

/* Kartenueberschriften auf der Anlass-Nabe sind Links. Ohne Unterstreichung:
   Sechs mehrzeilige unterstrichene Ueberschriften nebeneinander sind lauter als
   der Inhalt darunter, und die ganze Karte liest sich ohnehin als ein Ziel. Die
   Unterstreichung kommt beim Ueberfahren zurueck, damit die Klickbarkeit nicht
   nur an der Farbe haengt. */
.uc-grid .card h2 a {
  text-decoration: none;
}

.uc-grid .card h2 a:hover,
.uc-grid .card h2 a:focus-visible {
  text-decoration: underline;
}

/* Verwandte Anlaesse am Fuss einer Anlass-Seite. Dieselbe Trennlinie wie ueber
   der FAQ, damit die Seite nicht mit drei verschiedenen Abschnitts-Abstaenden
   endet. Als Liste ohne Punkte: Es sind zwei Links, keine Aufzaehlung. */
.uc-related {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.uc-related h2 {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.uc-related ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ratgeber (templates/guide.html). Lange Fließtexte brauchen andere Werte als
   die kurzen Produktseiten: etwas größere Schrift, mehr Zeilenabstand und vor
   allem eine harte Grenze der Zeilenlänge — 820px Spaltenbreite sind für
   Absätze am Stück zu viel. Die Werte hängen deshalb an eigenen Klassen und
   nicht an `main p`: Sonst überschriebe eine Ratgeber-Regel die Vorspann- und
   Hinweistexte jeder anderen Seite gleich mit. */
.guide-text,
.guide-list li {
  max-width: 68ch;
  color: #435149;
  font-size: 15px;
  line-height: 1.65;
}

.guide-list {
  margin: 0 0 14px;
  padding-left: 21px;
}

.guide-list li {
  margin-bottom: 9px;
}

.guide-list li strong {
  color: var(--ink);
  font-weight: 600;
}

/* Hinweis: die Farbe der Marke als Kante, sonst so ruhig wie der Fließtext.
   Ein voller Kasten würde im Lesefluss stärker ziehen als die Überschriften. */
.guide-note {
  max-width: 68ch;
  margin: 20px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--coral);
  border-radius: 0 14px 14px 0;
  background: var(--panel);
  font-size: 15px;
  line-height: 1.6;
}

/* Stand-Angabe am Textende. Dieselbe Zurückhaltung wie die Fußzeile: Sie ist
   eine Auskunft, kein Teil des Textes. */
.guide-stand {
  margin-top: 36px;
  color: var(--muted);
  font-size: 12px;
}

.site-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.auth-form {
  display: grid;
  gap: 16px;
  padding: 28px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 2px;
}

/* Statuszeile unter den Knoepfen: haelt ihre Zeile schon frei, damit beim
   Einblenden der Meldung nichts springt. Ohne den Absatz-Aussenabstand des
   Browsers, der im Grid der Formularkarte sonst ein Loch reisst. */
.form-status {
  min-height: 1.2em;
  margin: 0;
}

/* .uc-grid ist das Kartenraster der Anlass-Nabe. Es teilt die Geometrie mit den
   Tarifkarten, trägt aber einen eigenen Namen: Anlässe sind keine Tarife, und
   eine Klasse namens .plan-grid auf einer Seite ohne Preise wäre beim nächsten
   Lesen genau eine Irritation zu viel. */
.plan-grid,
.uc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.plan-grid .card,
.uc-grid .card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.plan-grid .card ul {
  flex: 1;
}

.plan-price {
  margin: 0 0 6px;
  color: var(--coral-dark);
  font-size: 31px;
  font-weight: 500;
  letter-spacing: -0.05em;
}

.plan-price .muted {
  margin-left: 4px;
  letter-spacing: normal;
}

/* Der empfohlene naechste Schritt. Bewusst nur Kante und Schatten und kein
   transform: scale() — im auto-fit-Raster verschoebe das die Nachbarkarten
   und bei drei Karten in einer Reihe wackelt dann die ganze Zeile. */
.plan-grid .card.is-featured {
  border: 2px solid var(--coral);
  box-shadow: 0 22px 60px rgba(223, 114, 92, 0.18), inset 0 1px rgba(255, 255, 255, 0.82);
}

/* Der Tarif, der gerade laeuft. Gruen statt coral: Das ist eine Bestaetigung,
   keine Werbung — die Karte soll ruhig wirken und nicht mitbieten. */
.plan-grid .card.is-current {
  border: 2px solid var(--success);
  background: rgba(88, 122, 96, 0.06);
}

/* Kleinerer Tarif als der gebuchte: sichtbar, aber zurueckgenommen. */
.plan-grid .card.is-lower {
  opacity: 0.62;
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(223, 114, 92, 0.16);
  color: var(--coral-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.plan-badge.is-current {
  background: rgba(88, 122, 96, 0.16);
  color: var(--success);
}

/* Auszeichnung auf einer Karte, die nicht die hervorgehobene ist. Neutral statt
   coral: Sonst rufen zwei Marken gleich laut und die Seite hat keine Richtung
   mehr — die Kante der hervorgehobenen Karte soll den Blick fuehren. */
.plan-badge.is-quiet {
  background: rgba(23, 33, 28, 0.06);
  color: var(--muted);
}

/* Was das Upgrade zusaetzlich bringt, direkt unter dem Knopf: der Satz, der die
   Entscheidung traegt. Deshalb in der Akzentfarbe statt in --muted. */
.plan-delta {
  margin: 9px 0 0;
  color: var(--coral-dark);
  font-size: 12px;
  font-weight: 650;
}

.plan-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* Verbrauchsbalken. Auch auf der Preisseite: Ein Kontingent, das sichtbar zur
   Neige geht, ist das ehrlichste Kaufargument, das die Seite hat. */
.meter {
  overflow: hidden;
  height: 6px;
  margin: 10px 0 8px;
  border-radius: 999px;
  background: var(--line);
}

.meter > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--coral);
}

.meter.is-high > span {
  background: var(--danger);
}

/* Statuszeile ueber dem Tarifraster: welcher Tarif laeuft und wie voll er ist. */
.plan-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 18px;
  margin: 14px 0;
  padding: 16px 19px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 250, 244, 0.62);
}

.plan-status-main {
  min-width: 220px;
  flex: 1;
}

/* Das Angebot fuer den naechsten Tarif in der Konto-Karte. Abgesetzte Flaeche
   statt .note: Das ist kein Hinweis auf ein Problem, sondern ein Angebot — mit
   der Coral-Kante von .note laese es sich wie eine Warnung. */
.plan-upsell {
  margin: 16px 0 0;
  padding: 15px 17px;
  border: 1px solid rgba(223, 114, 92, 0.28);
  border-radius: 14px;
  background: rgba(223, 114, 92, 0.07);
}

.plan-status .meter {
  margin-bottom: 0;
}

.site a {
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease;
}

/* Die Fußzeile setzt alles in Versalien — eine E-Mail-Adresse gehört dort
   kleingeschrieben hin, sonst liest sie sich wie ein Rufzeichen. */
.footer-mail {
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Sprachwechsel am Seitenende — der einzige Umschalter der Seite. Die Sprache
   kommt sonst automatisch aus dem Browser; dieser Link ist der Weg, das zu
   ueberstimmen, also unterstrichen statt still. Steht zwischen Copyright und
   Kontaktadresse; die Fusszeile umbricht ohnehin schon (flex-wrap). */
.footer-lang {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site a:hover {
  color: var(--ink);
}

.footer-mark {
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Setup */
.setup-masthead {
  max-width: 820px;
}

.setup-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 38px;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.setup-facts li {
  padding: 16px 18px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.setup-facts li:first-child {
  border-left: 0;
}

.setup-facts span {
  display: block;
  margin-bottom: 3px;
  color: var(--coral-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.setup-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin: 0 0 24px;
  padding-bottom: 3px;
}

.setup-tabs .tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}

.setup-tabs .tab img {
  display: block;
  width: 18px;
  height: 18px;
  box-sizing: content-box;
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 5px;
  background: rgba(255, 250, 244, 0.84);
  object-fit: contain;
}

.setup-tabs .tab.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fffaf2;
}

.tabpanel {
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(82, 67, 54, 0.1), inset 0 1px rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(1.15);
}

.tabpanel[hidden] {
  display: none;
}

.steps {
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  position: relative;
  min-height: 68px;
  margin: 0;
  padding: 0 0 31px 53px;
  color: #435149;
  font-size: 14px;
}

.steps li:last-child {
  padding-bottom: 0;
}

.steps li::before {
  position: absolute;
  top: -4px;
  left: 0;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: #fffaf2;
  content: counter(step, decimal-leading-zero);
  counter-increment: step;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
}

.steps li:not(:last-child)::after {
  position: absolute;
  top: 35px;
  bottom: 5px;
  left: 16px;
  width: 1px;
  background: var(--line);
  content: "";
}

.steps strong {
  color: var(--ink);
}

.setup-note {
  margin: 0 0 28px;
  padding: 18px 20px;
  border: 1px solid rgba(201, 155, 91, 0.3);
  border-radius: 14px;
  background: rgba(255, 245, 213, 0.55);
}

.setup-note p {
  margin: 0 0 10px;
}

.setup-note p:last-of-type {
  margin-bottom: 14px;
}

.setup-copy-group {
  margin-top: 13px;
}

.setup-action {
  margin-top: 14px;
}

.tabpanel > .page-kicker {
  margin-bottom: 12px;
}

.tabpanel > h2 {
  margin-top: 0;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 470;
  letter-spacing: -0.05em;
}

.setup-safety {
  max-width: 760px;
  margin: 25px auto 0;
  text-align: center;
}

details {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

summary {
  cursor: pointer;
}

/* Admin */
.admin-page {
  background:
    radial-gradient(circle at 92% 4%, rgba(240, 166, 211, 0.27), transparent 29rem),
    var(--paper);
}

.admin-layout {
  display: grid;
  width: min(1400px, 100%);
  min-height: 100vh;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 38px;
  margin: 0 auto;
  padding: 22px;
}

.admin-side {
  position: sticky;
  top: 22px;
  height: calc(100vh - 44px);
  padding: 20px 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 250, 244, 0.82);
  box-shadow: 0 24px 70px rgba(82, 67, 54, 0.1), inset 0 1px rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(20px) saturate(1.15);
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 8px 24px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

.admin-brand small {
  display: block;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 6px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.admin-side nav {
  display: grid;
  gap: 4px;
}

.admin-side nav a {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  border-radius: 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 580;
  text-decoration: none;
}

.admin-side nav a::after {
  color: transparent;
  content: "↗";
}

.admin-side nav a:hover {
  background: rgba(194, 84, 163, 0.08);
  color: var(--ink);
}

.admin-side nav a.active {
  background: var(--ink);
  color: #fffaf2;
}

.admin-side nav a.active::after {
  color: var(--coral);
}

.admin-main {
  min-width: 0;
  max-width: 1040px;
  padding: 54px 28px 90px 0;
}

.admin-main h1 {
  font-size: clamp(48px, 6vw, 74px);
}

.admin-main h2 {
  margin-top: 38px;
}

.admin-main .panel {
  border-radius: 18px;
}

.metric {
  color: var(--coral-dark);
  font-size: 46px;
  font-weight: 450;
  letter-spacing: -0.065em;
  line-height: 1;
}

.prompt-editor {
  min-height: 440px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
}

.prompt-preview {
  max-height: 320px;
  overflow: auto;
  margin: 0;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 252, 0.62);
  color: #33423a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  color: var(--ink);
}

.check-row input {
  accent-color: var(--coral);
}

@media (max-width: 760px) {
  .app-header {
    top: 14px;
    width: auto;
    max-width: calc(100% - 20px);
  }

  .brand-name {
    display: none;
  }

  /* Eingeklappt steht ohne Schriftzug nur noch der Wuerfel in der Pille — dann
     muss links wie rechts gleich viel Luft sein. Rechts zaehlt der Trennstrich
     mit (im eingeklappten Header nur transparent, nicht weg), also 7px
     Polsterung + 1px Rahmen gegen 8px links. */
  .app-header.is-collapsed .app-brand {
    padding-right: 7px;
  }

  .app-nav {
    min-width: 0;
    flex: 0 1 auto;
  }

  /* Aufgeklappt darf die Leiste mehr Platz nehmen als der reine Textbedarf.
     Die Polsterung waechst mit der Bildschirmbreite mit, statt fest zu sein:
     eingeloggt steht ein fuenftes Feld ("Konto") in der Nav, und auf Englisch
     ist das der breiteste Fall — mit festen Werten liefe er auf 320px-Geraeten
     ueber die Pille hinaus und die Beschriftungen schoeben sich uebereinander.
     Eingeklappt aendert sich nichts: dort ist die Nav ohnehin auf 0. */
  .app-nav a {
    min-width: 0;
    flex: 1;
    padding: 0 clamp(7px, 3vw, 11px);
    font-size: 8px;
  }

  .app-nav .app-nav-cta {
    flex: 0 0 auto;
    gap: 4px;
    padding-right: clamp(10px, 3.6vw, 14px);
    padding-left: clamp(10px, 3.6vw, 14px);
  }

  .wrap {
    padding: 112px 18px 72px;
  }

  /* Die Anrufliste ist auf dem Handy keine Tabelle mehr. Fuenf Spalten mit je
     90px Mindestbreite brauchen ueber 450px — auf einem 360px-Geraet stehen
     aber nur rund 324px zur Verfuegung. Die Zusammenfassung als letzte Spalte
     lag damit ausserhalb des Bildes und war nur ueber seitliches Scrollen zu
     lesen, also ausgerechnet das Ergebnis des Anrufs. Stattdessen wird jeder
     Anruf eine Karte, in der die Werte untereinander stehen; beschriftet
     werden sie aus data-label (siehe dashboard.html). */
  .calls,
  .calls tbody,
  .calls tr,
  .calls td {
    display: block;
    width: 100%;
  }

  .calls thead {
    display: none;
  }

  .calls tr {
    margin-top: 10px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
  }

  /* justify-items: start ist Pflicht, nicht Geschmack: Rasterzellen dehnen
     sich sonst ueber die ganze Spalte, und die Status-Pille (inline-flex, im
     Raster zu flex blockiert) wuerde als Balken ueber die halbe Karte laufen
     statt als Etikett um ihr Wort. */
  .calls td {
    display: grid;
    min-width: 0;
    align-items: baseline;
    justify-items: start;
    grid-template-columns: 78px 1fr;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 0;
  }

  /* Gleiche Optik wie die entfallene Kopfzeile (siehe th). */
  .calls td::before {
    content: attr(data-label);
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* Die Zusammenfassung ist mehrzeilig — sie bekommt die volle Kartenbreite,
     die Beschriftung rueckt darueber. */
  .calls .call-summary {
    grid-template-columns: 1fr;
    gap: 3px;
    padding-bottom: 0;
  }

  h1 {
    font-size: clamp(43px, 14vw, 62px);
  }

  /* Tarif und Verbrauch untereinander statt nebeneinander — der Knopf rechts
     haette sonst nur noch eine Handbreit und braeche mitten im Wort um. */
  .plan-status {
    flex-direction: column;
    align-items: stretch;
  }

  .setup-facts {
    grid-template-columns: 1fr;
  }

  .setup-facts li,
  .setup-facts li:first-child {
    padding: 11px 4px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .setup-facts li:first-child {
    border-top: 0;
  }

  .tabpanel {
    padding: 25px 18px;
    border-radius: 20px;
  }

  .steps li {
    padding-left: 45px;
  }

  .copybox {
    align-items: stretch;
    flex-direction: column;
    padding: 12px;
  }

  .copybox button {
    width: 100%;
  }

  /* Schmales Fenster: Markenblock über die Spalten, die Spalten selbst zu
     zweit — drei Mono-Spalten brechen sonst mitten im Wort um. */
  .site-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .site-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-base {
    margin-top: 30px;
  }

  .admin-layout {
    display: block;
    padding: 10px;
  }

  .admin-side {
    position: sticky;
    z-index: 20;
    top: 10px;
    width: 100%;
    height: auto;
    padding: 9px;
    border-radius: 16px;
  }

  .admin-brand {
    padding: 2px 5px 10px;
  }

  .admin-side nav {
    display: flex;
    overflow-x: auto;
  }

  .admin-side nav a {
    min-height: 37px;
    flex: 0 0 auto;
    padding: 0 11px;
  }

  .admin-side nav a::after {
    display: none;
  }

  .admin-main {
    padding: 54px 8px 70px;
  }
}

/* Einwilligungs-Banner (Reichweitenmessung) ─────────────────────────────────
   Bewusst kein Overlay und keine Sperre: Impressum, Datenschutz und der
   Kündigungsbutton in der Fußzeile müssen währenddessen erreichbar bleiben.
   Deshalb unten angeheftet, ohne die Seite abzudunkeln. */

.consent-banner {
  position: fixed;
  z-index: 60;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 1px solid var(--line-strong);
  background: rgba(255, 250, 244, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 -12px 34px rgba(23, 33, 28, 0.09);
}

.consent-banner[hidden] {
  display: none;
}

.consent-banner:focus {
  outline: none;
}

.consent-inner {
  display: flex;
  width: min(1040px, 100%);
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  margin: 0 auto;
  padding: 18px 24px;
}

.consent-text p {
  margin: 0;
  max-width: 74ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.consent-headline {
  margin-bottom: 3px !important;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.consent-text a {
  color: var(--ink);
}

/* Beide Schaltflächen sind gleich groß und stehen nebeneinander; hervorgehoben
   ist nur die Zustimmung (bewusste Produktentscheidung, um die Einwilligungs-
   quote zu heben). Das weicht von der DSK-Orientierungshilfe ab, die für
   Ablehnen und Akzeptieren gleichwertige Gestaltung verlangt — wer das
   zurückdreht, löscht schlicht den `[data-consent="granted"]`-Block unten,
   dann tragen wieder beide die Grundform.

   Ausgezeichnet wird über das Attribut statt über eine Klasse `primary` im
   Markup: `data-consent` steuert in consent.js ohnehin schon die Entscheidung,
   damit können Optik und Funktion nicht auseinanderlaufen. */
.consent-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
}

.consent-actions .btn {
  min-width: 122px;
}

.consent-actions .btn[data-consent="granted"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fffaf2;
}

.consent-actions .btn[data-consent="granted"]:hover {
  border-color: var(--signal);
  background: var(--signal);
}

/* Der Widerruf steht als <button> in der Fußzeile, muss dort aber wie die
   Links darüber aussehen — die Grundregel für `button` macht sonst eine Pille
   daraus, und als Rasterfeld zöge sie sich über die ganze Spalte mit mittig
   stehender Beschriftung. */
.site .footer-link {
  min-height: 0;
  justify-content: flex-start;
  justify-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}

.site .footer-link:hover {
  background: none;
  color: var(--ink);
}

@media (max-width: 720px) {
  .consent-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding: 16px 18px 20px;
  }

  .consent-actions .btn {
    flex: 1;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}