/* Optik der Webseite: Auszug aus Entwurf D (Webseite-mike-schoenfeld, entwurf-d/assets/tokens.css und style.css).
   Hell wie die Webseite, dunkel nach der Systemeinstellung mit den Dunkelwerten der Tokens.
   Schrift Inter nur, wenn installiert: die Schriftdateien sind binär und passen nicht in den Start-Stack. */
:root {
  color-scheme: light;
  --weiss: #FFFFFF; --flaeche: #F7F5F0; --petrol-hell: #E6F0F2;
  --petrol: #0F4C5C; --petrol-dunkel: #0A3843; --kupfer: #B0602A;
  --text: #1B1B1B; --text-lead: #333333; --grau: #5F6668; --linie: #D5DDE0;
  --auf-petrol: #FFFFFF;
  --sans: Inter,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --breite: 1200px; --radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --weiss: #0D1F25; --flaeche: #12292F; --petrol-hell: #163A44;
    --petrol: #6CBCCB; --petrol-dunkel: #8ACBD7; --kupfer: #D98C55;
    --text: #EEF4F4; --text-lead: #E2EAEB; --grau: #A6B7BB; --linie: #28434B;
    --auf-petrol: #07191E;
  }
}
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--weiss);
  color: var(--text); font: 400 18px/1.6 var(--sans); text-rendering: optimizeLegibility; }
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 32px; box-sizing: border-box; width: 100%; }
.kopf { border-bottom: 1px solid var(--linie); background: var(--weiss); }
.kopf .wrap { display: flex; align-items: center; min-height: 84px; }
.marke { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); min-height: 44px; }
.marke .zeichen { width: 44px; height: 44px; flex: none; }
.z-rahmen { fill: none; stroke: var(--petrol); stroke-width: 2.2; }
.zeichen text { font-family: "Segoe UI", Inter, sans-serif; font-weight: 600; }
.z-m { font-size: 64px; letter-spacing: -4px; fill: var(--text); }
.z-s { font-size: 56px; fill: var(--petrol); stroke: var(--weiss); stroke-width: 7; paint-order: stroke; stroke-linejoin: round; }
.marke .name { display: block; font-weight: 600; font-size: 1.12rem; line-height: 1.15; letter-spacing: -.01em; }
.marke .unter { display: block; font-size: 12.5px; color: var(--grau); line-height: 1.35; margin-top: 2px; }
.seitenkopf { flex: 1; padding-top: clamp(48px,7vw,88px); padding-bottom: clamp(24px,4vw,40px); }
.etikett { display: block; font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--kupfer); margin: 0 0 14px; }
h1 { font-weight: 600; margin: 0; max-width: 15em; font-size: clamp(2.2rem,5vw,4rem); line-height: 1.04; letter-spacing: -.032em; }
.lead { font-size: 1.2rem; line-height: 1.6; color: var(--text-lead); max-width: 38em; margin: 22px 0 32px; }
.knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--radius);
  text-decoration: none; font: 600 16px/1.2 var(--sans); border: 1px solid var(--petrol); background: var(--petrol);
  color: var(--auf-petrol); transition: background .2s; }
.knopf:hover { background: var(--petrol-dunkel); }
.knopf .pfeil { transition: transform .2s; }
.knopf:hover .pfeil { transform: translateX(3px); }
.klein { font-size: 15px; color: var(--grau); }
.fuss { border-top: 1px solid var(--linie); padding: 32px 0; font-size: 15px; color: var(--grau); }
.fuss .wrap { display: flex; gap: 24px; }
.fuss a { color: var(--text); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.fuss a:hover { color: var(--petrol); text-decoration: underline; }
/* Rechtsseiten (Impressum, Datenschutz): Hinweis Entwurf, Fließtext */
.entwurf { border: 1px solid var(--kupfer); color: var(--kupfer); border-radius: var(--radius); padding: 12px 16px;
  font-weight: 600; margin: 0 0 28px; max-width: 44em; }
.recht h1 { font-size: clamp(1.8rem,4vw,2.6rem); }
.recht h2 { font-size: 1.2rem; line-height: 1.3; margin: 32px 0 8px; }
.recht p { max-width: 44em; margin: 0 0 14px; }
/* schmal wie die Webseite (style.css, max-width 760px); am Ende, damit es die Regeln oben überschreibt */
@media (max-width: 760px) { .wrap { padding-left: 16px; padding-right: 16px; } .marke .unter { display: none; } }
/* Rechtsseiten in der Optik der Hauptseite (eigener Yopass-Build): Werte aus eigenbau/anpassen.py,
   Theme emerald (hell) und dim (dunkel), Rahmen 10px; Aufbau nach App.tsx und Navbar.tsx von Yopass
   (Fläche base-200, Karte base-100 mit Rand base-300, Kopf base-100/80, Fuß base-100/50) */
.ansicht {
  --b100: #F7F5F0; --b200: #EFEBE3; --b300: #D5DDE0; --bc: #1B1B1B; --pr: #0F4C5C;
  --rand-karte: 10px; --schatten: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  background: var(--b200); color: var(--bc); font: 400 16px/1.6 var(--sans);
}
@media (prefers-color-scheme: dark) {
  .ansicht { --b100: #0D1F25; --b200: #12292F; --b300: #28434B; --bc: #EEF4F4; --pr: #6CBCCB; }
}
.ansicht .kopf { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--b300);
  background: color-mix(in srgb, var(--b100) 80%, transparent); }
.ansicht .leiste { max-width: 64rem; margin: 0 auto; padding: 0 16px; height: 64px; display: flex; align-items: center; }
.ansicht .marke { gap: 8px; padding: 4px 8px; border-radius: 6px; min-height: 0; min-width: 0;
  font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -.025em; color: var(--bc); }
.ansicht .marke:hover { color: var(--pr); background: var(--b200); }
.ansicht .marke img { height: 32px; width: auto; flex: none; }
.ansicht .marke span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ansicht .seite { flex: 1; width: 100%; max-width: 48rem; margin: 0 auto; padding: 48px 16px; box-sizing: border-box; }
.karte { background: var(--b100); border: 1px solid var(--b300); border-radius: var(--rand-karte);
  box-shadow: var(--schatten); padding: 24px; min-width: 0; overflow-wrap: break-word; }
.zurueck { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 12px; color: var(--pr);
  font-weight: 500; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.zurueck::before { content: "←"; margin-right: 6px; text-decoration: none; }
.zurueck:hover { text-decoration-style: solid; }
.ansicht .recht h1 { font-size: 1.875rem; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; max-width: none; margin: 0 0 16px; }
.ansicht .recht h2 { font-size: 1.125rem; }
.ansicht .entwurf { font-size: 15px; }
.ansicht .fuss { border-top: 1px solid var(--b300); background: color-mix(in srgb, var(--b100) 50%, transparent);
  padding: 32px 16px; font-size: 14px; line-height: 20px; color: color-mix(in srgb, var(--bc) 70%, transparent); }
.ansicht .fuss .zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.ansicht .fuss a, .ansicht .fuss .technik { display: inline-flex; align-items: center; min-height: 44px; color: color-mix(in srgb, var(--bc) 70%, transparent);
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.ansicht .fuss a:hover { color: var(--pr); text-decoration-style: solid; }
.ansicht .fuss .technik { color: var(--pr); font-weight: 500; }
.ansicht .fuss .punkt { color: color-mix(in srgb, var(--bc) 40%, transparent); }
@media (min-width: 640px) { .ansicht .seite { padding: 64px 16px; } .karte { padding: 40px; }
  .ansicht .marke { gap: 12px; } }
/* Geheimnis anfordern (anfrage*.html): Felder und Ergebnis, eine Spalte */
.anfrage, .ergebnis { display: flex; flex-direction: column; gap: 10px; max-width: 38em; margin: 0 0 24px; }
.anfrage label, .ergebnis label { font-weight: 600; margin-top: 8px; }
.anfrage textarea, .anfrage select, .ergebnis textarea { font: 400 16px/1.5 var(--sans); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 12px;
  min-height: 44px; box-sizing: border-box; width: 100%; }
.ergebnis textarea { font-family: ui-monospace, Consolas, monospace; font-size: 14px; word-break: break-all; }
.anfrage .knopf, .ergebnis .knopf { align-self: flex-start; cursor: pointer; }
.knopf.zweit { background: transparent; color: var(--petrol); min-height: 44px; }
.knopf[disabled] { opacity: .6; cursor: wait; }
.meldung { font-weight: 600; min-height: 1.6em; }
[hidden] { display: none !important; }