/* Iséou – Markenschicht über dem übernommenen Layout von luna-femtech.com
   Wird in jeder Seite NACH dem eingebetteten <style> geladen und
   überschreibt dessen Farben, Schriften und Kopfbereich.

   Stand 27.10.2026: an die App angeglichen. Verbindlich ist die
   Vault-Notiz „Iséou Design-Übergabe App Kalender + Tagesblatt
   (2026-10-26)“, vor allem Abschnitt 7 „Farbrollen in der ganzen App“
   und Abschnitt 6 „Dark Mode“. Kurzfassung:
   - Nur Archivo, Schnitte 400 und 900. Nichts kursiv. Playfair Display
     nur in der Wortmarke ISÉOU (liegt als SVG vor, wird nicht geladen).
   - Text auf hellen Flächen immer Bordeaux, ohne Deckkraft und ohne
     abgestufte Textfarben. Auf Bordeaux: Creme, Akzente Flieder/Limette.
   - Seite flach Creme, Karten Weiß ohne Rand und Schatten, höchstens
     eine Bordeaux-Kopfkarte pro Seite. Kleine Flächen Creme.
   - Flieder nie als große Fläche, Koralle nur für Blutung (auf der
     Website gar nicht), Limette sparsam. Keine Verläufe, keine Schatten.
   - Tippbare Elemente mindestens 44 px hoch.
   - Dunkelmodus folgt der Geräteeinstellung: dunkles Bordeaux statt
     Schwarz, Text Creme, Primärfarbe wird Flieder.
   Archivo hat kein Griechisch/Kyrillisch: el/bg fallen pro Zeichen auf
   die Systemschrift zurück (system-ui). */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Farbrollen (Werte wie in der App) ───────────────────────────── */
:root {
  color-scheme: light dark;
  /* Markenfarben */
  --bordeaux: #4A1210; --flieder: #E39BE0; --koralle: #E06A4E;
  --limette: #DDF59A; --creme: #F8F1E9;
  /* Rollen, hell */
  --seite: #F8F1E9;        /* Seitengrund, flach */
  --karte: #FFFFFF;        /* Karten, Tabellen, Eingabefelder */
  --klein: #F8F1E9;        /* Chips, Info-Boxen, Tabellenkopf */
  --linie: #EFE3D6;        /* Trennlinien, Rand ungewählter Chip */
  --linie-stark: #D9C6BC;  /* Rand von Eingabefeldern */
  --text: #4A1210;         /* jeder Text, jedes Icon */
  --platzhalter: #7A4E4A;  /* nur Platzhalter in Eingabefeldern */
  --primaer: #4A1210;      /* Primär-Button, gewählter Zustand */
  --auf-primaer: #F8F1E9;
  --hero: #4A1210;         /* die eine Bordeaux-Kopfkarte */
  --hero-rand: #4A1210;
  --fokus: #4A1210;
  /* Variablen des alten Layouts auf die Rollen gelegt */
  --bg: var(--seite); --bg-glow: var(--klein); --surface: var(--karte);
  --ink: var(--text); --ink-soft: var(--text); --line: var(--linie);
  --accent: var(--text); --accent-deep: var(--text);
  --shadow: none;
  --schrift: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media screen and (prefers-color-scheme: dark) {
  :root {
    --seite: #1F0A09; --karte: #2E1210; --klein: #3A1916;
    --linie: #4A2420; --linie-stark: #8A5A52;
    --text: #F8F1E9; --platzhalter: #C9AFA6;
    --primaer: #E39BE0; --auf-primaer: #4A1210;
    --hero: #4A1210; --hero-rand: #E39BE0;
    --fokus: #F8F1E9;
  }
}

/* ── Grundlage ─────────────────────────────────────────────────── */
html { font-optical-sizing: auto; background: var(--seite); }
body {
  font-family: var(--schrift) !important;
  background: var(--seite) !important;
  color: var(--text) !important;
  font-weight: 400;
}
::selection { background: var(--limette) !important; color: var(--bordeaux) !important; }
:focus-visible { outline: 2.5px solid var(--fokus) !important; outline-offset: 3px !important; }

/* Text: eine Farbe, volle Deckkraft. */
p, li, td, th, dd, dt, span, small, label, figcaption, blockquote, summary,
.intro, .stand, .legend, .lead, .meta, .made-in-eu, .tagline, .back,
footer, footer *, nav, nav * { color: var(--text) !important; }
p, li, td, th, span, small, .intro, .stand, .legend, .meta, .made-in-eu,
.tagline, .back, footer, footer *, nav.langs, nav.social a, .lt-caret,
em.na, h1, h2, h3 { opacity: 1 !important; }

/* Nichts kursiv. */
em, i, cite, dfn, var, address, .tagline, summary, td em.na, .retained,
h1 em, h2 em, ul.features li b, .faq summary {
  font-style: normal !important;
}

/* Nur zwei Schnitte: 900 für Überschriften und Hervorhebungen, 400 sonst. */
h1, h2, h3, h4, h5, h6, summary, .faq summary, thead th, th,
td:first-child, strong, b, ul.features li b, .status h3, .antwort h3,
.pdflink a, .store-cta a, button, .lang-panel-header h2, .deleted, .retained {
  font-family: var(--schrift) !important;
  font-weight: 900 !important;
  font-variation-settings: normal !important;
}
.tagline, .claim, .frueher, .made-in-eu, .stand, .intro, .legend, .meta,
td em.na, input, select, textarea, .lang-grid button:not([aria-current="true"]) {
  font-weight: 400 !important;
}
h1, h2, h3 { letter-spacing: -0.01em !important; color: var(--text) !important; }
h1 { line-height: 1.05; }
h2, h3 { line-height: 1.15; }
h1 em, h2 em { color: inherit !important; }

/* Links: Text-Farbe, unterstrichen; kein Farbwechsel, kein Verlauf. */
a { color: var(--text) !important; text-decoration-color: currentColor; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
main a:hover, .wrap p a:hover, .wrap li a:hover, .wrap td a:hover { background: none !important; }

hr { border: 0 !important; border-top: 1px solid var(--linie) !important; }

/* ── Karten: weiß, ohne Rand und Schatten ─────────────────────── */
.faq details, .tablewrap, ul.features li, .privacy-card, .status,
.antwort, .lang-panel, .cookie-banner {
  background: var(--karte) !important;
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}
.status { background-image: none !important; }
.status h3, .status p { color: var(--text) !important; }
ul.features li:hover { box-shadow: none !important; transform: none !important; }
ul.features li .cipher { background: var(--klein) !important; color: var(--text) !important; }
.cookie-banner { border: 2px solid var(--linie-stark) !important; }
#lang-overlay { background: rgba(31, 10, 9, 0.55) !important; }
.lang-panel { border-radius: 28px !important; }

/* Tabellen (Faktenblatt, Vergleich, Ratgeber) */
th, td { border-bottom: 1px solid var(--linie) !important; }
thead th {
  background: var(--klein) !important;
  border-bottom: 2px solid var(--text) !important;
}
.src-ind, .src-own {
  display: inline-block; border-radius: 13px !important; padding: 2px 10px !important;
  font-weight: 900 !important; opacity: 1 !important;
}
.src-ind { background: var(--limette) !important; color: var(--bordeaux) !important; }
.src-own { background: var(--klein) !important; color: var(--text) !important; border: 2px solid var(--linie) !important; }
.hinweis { border-left: 3px solid var(--text) !important; }

/* ── Buttons und Chips ─────────────────────────────────────────── */
.store-cta a, .contact-form button, .cookie-banner button {
  background: var(--primaer) !important; color: var(--auf-primaer) !important;
  border: 2px solid var(--primaer) !important; border-radius: 999px !important;
  min-height: 48px; box-shadow: none !important;
}
.store-cta a:hover, .contact-form button:hover, .cookie-banner button:hover {
  background: var(--klein) !important; color: var(--text) !important; border-color: var(--text) !important;
}
/* Inhalte von Buttons erben die Button-Schrift (sonst greift die Textregel oben). */
.store-cta a *, .contact-form button *, .cookie-banner button *,
.lang-grid button[aria-current="true"] *, .src-ind * { color: inherit !important; }
.pdflink a {
  background: var(--karte) !important; color: var(--text) !important;
  border: 2px solid var(--text) !important; border-radius: 999px !important;
  min-height: 48px; text-decoration: none !important;
}
.pdflink a:hover { background: var(--klein) !important; }

.lang-trigger, .lang-select {
  background: var(--karte) !important; color: var(--text) !important;
  border: 2px solid var(--linie) !important; border-radius: 22px !important;
  min-height: 44px; box-shadow: none !important;
}
.lang-grid button {
  background: var(--klein) !important; color: var(--text) !important;
  border: 2px solid var(--linie) !important; border-radius: 22px !important;
  min-height: 44px; box-shadow: none !important;
}
.lang-grid button:hover:not(:disabled) { border-color: var(--text) !important; background: var(--klein) !important; }
.lang-grid button[aria-current="true"] {
  background: var(--primaer) !important; color: var(--auf-primaer) !important;
  border-color: var(--primaer) !important; font-weight: 900 !important;
}

/* Eingabefelder wie in der App: Rand 2 linie-stark, Radius 14, keine Schatten. */
.contact-form input[type=text], .contact-form input[type=email],
.contact-form select, .contact-form textarea {
  background: var(--karte) !important; color: var(--text) !important;
  border: 2px solid var(--linie-stark) !important; border-radius: 14px !important;
  min-height: 48px; font-size: 16px !important; box-shadow: none !important;
}
.contact-form ::placeholder { color: var(--platzhalter) !important; opacity: 1; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--text) !important; box-shadow: none !important;
}
.contact-form .form-msg, .contact-form .form-msg.err { color: var(--text) !important; }
.contact-form .form-msg.err { font-weight: 900 !important; }

/* ── Kopf der Startseiten und Sicherheitsseiten: Bordeaux-Kachel ── */
.wrap > header.hero { grid-column: voll !important; }
header.hero {
  background: var(--hero) !important;
  color: var(--creme);
  border: 1px solid var(--hero-rand);
  border-radius: 28px;
  padding: 36px 24px 42px !important;
  margin: 6px 0 0;
  text-align: center;
}
header.hero, header.hero p, header.hero span, header.hero h1:not(.wortmarke),
header.hero .tagline, header.hero .made-in-eu { color: var(--creme) !important; }
header.hero :focus-visible { outline-color: var(--creme) !important; }
header.hero .frueher {
  display: inline-block; margin: 0 0 24px; padding: 4px 14px;
  border: 1px solid rgba(248, 241, 233, 0.25); border-radius: 999px;
  color: var(--flieder) !important; font-size: 0.8rem; line-height: 1.5;
}
header.hero .bluete { display: block; width: 84px; height: 84px; margin: 0 auto 22px; }
header.hero h1.wortmarke { margin: 0 auto 20px !important; line-height: 0; }
header.hero h1.wortmarke img { width: min(340px, 74%); height: auto; }
header.hero .claim {
  margin: 0 0 24px; color: var(--flieder) !important;
  font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase;
}
header.hero h1 em { color: var(--limette) !important; }
header.hero .tagline { font-size: 1.15rem !important; letter-spacing: 0 !important; }
header.hero .made-in-eu { border-color: rgba(248, 241, 233, 0.25) !important; background: none !important; }
header.hero a, header.hero .security-link a {
  color: var(--creme) !important; border-bottom: 0 !important;
  text-decoration: underline !important; text-decoration-color: var(--flieder) !important;
  text-underline-offset: 4px; font-weight: 900;
}
header.hero a:hover { text-decoration-thickness: 2px !important; }

/* ── Markenleiste der Unterseiten ─────────────────────────────── */
.markenleiste { background: var(--hero); color: var(--creme); border-bottom: 1px solid var(--hero-rand); }
.markenleiste .ml-innen {
  max-width: 1040px; margin: 0 auto; padding: 12px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 18px; flex-wrap: wrap;
}
.markenleiste .ml-marke { display: inline-block; line-height: 0; }
.markenleiste .ml-marke img { height: 26px; width: auto; }
.markenleiste .ml-marke:focus-visible { outline-color: var(--creme) !important; }
.markenleiste .frueher { color: var(--flieder) !important; font-size: 0.8rem; }

/* ── Fußzeile ──────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--linie) !important; }
footer nav a { border-bottom: 1px solid var(--linie) !important; text-decoration: none !important; }
footer nav a:hover { border-bottom-color: var(--text) !important; }

@media (max-width: 480px) {
  header.hero { border-radius: 24px; padding: 30px 18px 34px !important; }
  .markenleiste .ml-innen { padding: 10px 16px; }
}

/* ── Druck: unverändert hell ───────────────────────────────────── */
@media print {
  /* Druck immer hell, Text Bordeaux (wie die Wortmarke im Druck). */
  :root { --seite: #fff; --karte: #fff; --klein: #fff; --text: #4A1210; --linie: #bbb; }
  /* Kalendervorlage: Tageszahlen kräftig, Monatsnamen ruhig zum Hineinschreiben. */
  .vorlage tbody th { font-weight: 400 !important; }
  body { background: #fff !important; }
  .markenleiste { background: none !important; border: 0 !important; }
  .markenleiste .frueher { display: none; }
  .markenleiste .ml-marke img { content: url("/assets/iseou-wortmarke-bordeaux.svg"); height: 18px; }
  header.hero { background: none !important; color: #000 !important; padding: 0 !important; border: 0 !important; }
  header.hero .frueher, header.hero .bluete { display: none !important; }
  header.hero h1.wortmarke img { content: url("/assets/iseou-wortmarke-bordeaux.svg"); width: 160px; }
  header.hero * { color: #000 !important; }
  /* Druckvorlage Periodenkalender: nur Titel und Tabellen aufs Blatt. */
  body.mit-vorlage .markenleiste { display: none !important; }
}