/* LingoRhythm · Nachtmodus (live seit 02.11.2026)
   Gilt, sobald <html> data-theme="night" trägt (gesetzt vom Skript lr-theme-js im Plugin Website-Bausteine).
   Idee: warmes Dunkel aus Tinte statt Schwarz, Creme mit Gelbstich als Schrift, Terrakotta und Pfirsich als Licht.
   Alle Farben laufen über die bestehenden Variablen; Seiteninhalte bleiben unverändert.
   Lektionsseiten /lernen/ und Lehrkräfte-Bereich haben eine eigene Datei: plugins/lingorhythm-lektionen/assets/nacht.css. */

[data-theme="night"] {
  color-scheme: dark;

  /* Tailwind-Tokens (Rollen bleiben gleich, nur die Werte wechseln) */
  --tw-color-creme: #1C1917;       /* Seitengrund (Rolle Creme) */
  --tw-color-paper: #28231F;       /* Karten, Kopf, Fuß (Rolle Papier) */
  --tw-color-sand: #3F3732;        /* Linien */
  --tw-color-sand-2: #5A4F48;      /* kräftige Linien, Knopfrand */
  --tw-color-ink: #F7EDD0;         /* Text = Creme mit Gelbstich */
  --tw-color-soft: #D0C2A6;
  --tw-color-muted: #B3A58B;
  --tw-color-terra: #D9824A;       /* Flächen, Balken, h1-Betonung */
  --tw-color-terra-d: #F2B48A;     /* Überschriften */
  --tw-color-terra-t: #F0A273;     /* Links, Endungen */
  --tw-color-terra-tint: #3B2A20;
  --tw-color-olive: #9DAE7C;
  --tw-color-olive-d: #BCCB9C;     /* Etiketten */
  --tw-color-olive-tint: #2C3125;
  --tw-color-peach: #F6A06B;
  --tw-color-peach-tint: #3A2A20;
  --tw-color-rust: #E8876C;
  --tw-color-rust-tint: #3B231E;
  --tw-color-white: #1C1917;       /* Schrift auf Terrakotta-Knöpfen: dunkel statt weiß */
  --tw-shadow-card: 0 18px 40px -24px rgba(0, 0, 0, .75);
  --tw-shadow-pop: 0 22px 48px -20px rgba(0, 0, 0, .8);

  /* alte Kurznamen (Plugins Musik, Cookie, Lektionen, Blog nutzen sie) */
  --ink: var(--tw-color-ink); --soft: var(--tw-color-soft); --muted: var(--tw-color-muted);
  --creme: var(--tw-color-creme); --paper: var(--tw-color-paper); --sand: var(--tw-color-sand);
  --sand2: var(--tw-color-sand-2); --terra: var(--tw-color-terra); --terra-d: var(--tw-color-terra-d);
  --terra-t: var(--tw-color-terra-t); --terra-tint: var(--tw-color-terra-tint); --olive: var(--tw-color-olive);
  --olive-d: var(--tw-color-olive-d); --olive-tint: var(--tw-color-olive-tint); --peach: var(--tw-color-peach);
  --peach-tint: var(--tw-color-peach-tint); --rust: var(--tw-color-rust); --rust-tint: var(--tw-color-rust-tint);

  /* WordPress-Farben aus theme.json (Grund, Text, Überschriften, Links) */
  --wp--preset--color--ink: #F7EDD0;
  --wp--preset--color--soft: #D0C2A6;
  --wp--preset--color--creme: #1C1917;
  --wp--preset--color--paper: #28231F;
  --wp--preset--color--sand: #3F3732;
  --wp--preset--color--terracotta: #D9824A;
  --wp--preset--color--terracotta-dark: #F2B48A;
  --wp--preset--color--terracotta-text: #F0A273;
  --wp--preset--color--terracotta-tint: #3B2A20;
  --wp--preset--color--olive: #9DAE7C;
  --wp--preset--color--olive-dark: #BCCB9C;
  --wp--preset--color--olive-tint: #2C3125;
  --wp--preset--color--peach: #F6A06B;
  --wp--preset--color--peach-tint: #3A2A20;

  /* Apfel und Teller: Stiel und Gabel hell, Teller als dunkles Steingut (Variablen im SVG-Block lrw-defs) */
  --lrw-stem: #D0C2A6;
  --lrw-plate: #3A3431;
  --lrw-plate-rim: #5A4F48;
  --lrw-plate-ring: #4A413B;

  background-color: #1C1917;
  color: #F7EDD0;
}

/* Knöpfe aus dem Block-Editor: dunkle Schrift auf Terrakotta */
[data-theme="night"] .wp-element-button,
[data-theme="night"] .wp-block-button__link { color: #1C1917; }

/* Häkchen und Info-Punkte: Zeichnung hell statt dunkel */
[data-theme="night"] .tick:empty {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='%23BCCB9C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="night"] .tick.info:empty {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='3' r='1.4' fill='%23F0A273'/%3E%3Crect x='5.9' y='5.6' width='2.2' height='6.6' rx='1.1' fill='%23F0A273'/%3E%3C/svg%3E");
}
[data-theme="night"] .lrw-ten input:checked + .box {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='%231C1917' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Umschalter Tag/Nacht (beide Modi) ---------- */
/* Desktop ab 1200 px: runder Knopf im Kopf, vor dem Shop-Knopf (961–1199 px ist der Kopf schon voll) */
.lr-theme {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 2px solid var(--tw-color-sand-2);
  border-radius: 999px;
  background: transparent;
  color: var(--tw-color-terra-t);
  cursor: pointer;
  padding: 0;
  transition: background-color .2s, border-color .2s;
}
.lr-theme svg { width: 20px; height: 20px; }
@media (min-width: 1200px) { .lr-theme { display: inline-flex; } }
@media (hover: hover) { .lr-theme:hover { border-color: var(--tw-color-terra); background: var(--tw-color-terra-tint); } }
[data-theme="night"] .lr-theme { color: var(--tw-color-peach); background: var(--tw-color-terra-tint); border-color: var(--tw-color-terra); }
[data-theme="night"] .lr-theme svg path { fill: currentColor; }

/* Handy: Zeile mit Schalter im Menü (der Kopf ist bei 360 px voll) */
.lr-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 52px;
  margin-top: 4px; padding: 8px 14px;
  border: 0; border-top: 1px solid var(--tw-color-sand);
  border-radius: 0 0 12px 12px;
  background: transparent; color: var(--tw-color-ink);
  font: inherit; font-weight: 800; text-align: left; cursor: pointer;
}
.lr-switch .lbl { display: flex; align-items: center; gap: 10px; }
.lr-switch .lbl svg { width: 20px; height: 20px; color: var(--tw-color-terra-t); flex: none; }
.lr-switch .lbl small { display: block; font-weight: 600; font-size: 13px; color: var(--tw-color-muted); }
.lr-switch .track {
  position: relative; flex: none;
  width: 48px; height: 28px; border-radius: 999px;
  background: var(--tw-color-sand-2);
  transition: background-color .2s;
}
.lr-switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--tw-color-paper);
  transition: transform .25s;
}
.lr-switch[aria-checked="true"] .track { background: var(--tw-color-terra); }
.lr-switch[aria-checked="true"] .track::after { transform: translateX(20px); background: #F7EDD0; }
.lr-switch:focus-visible { outline: 3px solid var(--tw-color-peach); outline-offset: 2px; }
@media (min-width: 961px) { .lr-switch { display: none; } }

/* Fußzeile (alle Breiten): Darstellung Automatisch · Tag · Nacht; „Automatisch“ folgt der Geräte-Einstellung */
.lr-mode { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.lr-mode .k { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tw-color-olive-d); }
.lr-mode .seg { display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 4px; border: 1px solid var(--tw-color-sand); border-radius: 999px; background: var(--tw-color-creme); }
.lr-mode button {
  min-height: 44px; padding: 8px 10px; display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 999px; background: transparent; color: var(--tw-color-soft);
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.lr-mode button svg { width: 16px; height: 16px; flex: none; }
@media (min-width: 561px) { .lr-mode button { padding: 8px 16px; } }
.lr-mode button[aria-pressed="true"] { background: var(--tw-color-paper); color: var(--tw-color-ink); box-shadow: 0 0 0 1px var(--tw-color-sand-2); }
.lr-mode button:focus-visible { outline: 3px solid var(--tw-color-peach); outline-offset: 2px; }
@media (hover: hover) { .lr-mode button:hover { color: var(--tw-color-terra-t); } }

@media (prefers-reduced-motion: reduce) {
  .lr-switch .track, .lr-switch .track::after, .lr-theme { transition: none; }
}

/* ---------- Korrektur (beide Modi): Handy-Menü ragte links aus dem Bild ----------
   .mnav war position:relative, das Panel (300 px) hing rechts am Menü-Knopf und begann bei 390 px Breite links außerhalb.
   Jetzt hängt es rechts am Kopf, 16 px vom Rand (ab 961 px ist .mnav ohnehin ausgeblendet). */
.mnav { position: static; }
.mnav nav { right: max(16px, env(safe-area-inset-right, 0px)); }

/* ---------- Korrektur (beide Modi): Knopf-Kontrast ----------
   Weiße Schrift auf #C67139 hatte nur 3,6 : 1. Tag: etwas tieferes Terrakotta (4,7 : 1). Nacht: hell mit dunkler Schrift (6,0 : 1). */
.btn.pri { background-color: #B35C2C; }
@media (hover: hover) { .btn.pri:hover { background-color: #9A4D24; } }
[data-theme="night"] .btn.pri { background-color: #D9824A; }
@media (hover: hover) { [data-theme="night"] .btn.pri:hover { background-color: #E8955F; } }

/* =====================================================================
   Weitere Bausteine nachts (Nacharbeit 02.11.2026): Musik-Player, Cookie-Banner, Sprachumschalter,
   Formulare, WooCommerce (Shop, Warenkorb, Kasse, Konto), Shop-Layout A, Konto-Kasten, Blog-Grafiken.
   Alles mit html[data-theme="night"] davor, damit es fest eingetragene Farben der Plugins sicher schlägt.
   ===================================================================== */

/* Musik-Player */
html[data-theme="night"] .lrm .lrm-play { color: #1C1917; }
html[data-theme="night"] .lrm, html[data-theme="night"] .lrm-panel { box-shadow: 0 14px 32px -16px rgba(0, 0, 0, .7); }

/* Cookie-Banner (Complianz, eigene Variablen --lr-*) */
html[data-theme="night"] body .cmplz-cookiebanner,
html[data-theme="night"] body #cmplz-manage-consent {
  --lr-ink: #F7EDD0; --lr-soft: #D0C2A6; --lr-muted: #B3A58B; --lr-paper: #28231F; --lr-cream: #1C1917;
  --lr-sand: #3F3732; --lr-sand2: #5A4F48; --lr-terra: #D9824A; --lr-terra-d: #D9824A; --lr-terra-t: #F0A273;
  --lr-tint: #3B2A20; --lr-olive: #9DAE7C; --lr-olive-d: #9DAE7C; --lr-peach: #F6A06B;
  --cmplz_button_accept_text_color: #1C1917; --cmplz_button_deny_text_color: #1C1917;
}
html[data-theme="night"] body .cmplz-cookiebanner.cmplz-cookiebanner { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7) !important; }
html[data-theme="night"] body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover { background: #E8955F !important; border-color: #E8955F !important; }
html[data-theme="night"] body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover { background: #B3C293 !important; border-color: #B3C293 !important; }

/* Schwebender Sprachumschalter (Plugin Language Switcher for Polylang) */
html[data-theme="night"] .lsdp-floating-switcher {
  --bg: #28231F !important; --text: #F7EDD0 !important; --text-hover: #F7EDD0 !important;
  --bg-hover: #3B2A20 !important; --border-color: #3F3732 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}

/* Formulare allgemein (Fluent Forms, SliceWP, WooCommerce, Suche, Probelektion) */
html[data-theme="night"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="image"]),
html[data-theme="night"] select,
html[data-theme="night"] textarea { background-color: #28231F; color: #F7EDD0; border-color: #5A4F48; }
html[data-theme="night"] ::placeholder { color: #B3A58B; opacity: 1; }
html[data-theme="night"] .lrw-form .fluentform .ff-btn-submit { color: #1C1917 !important; }
html[data-theme="night"] pre, html[data-theme="night"] code { background-color: #28231F; color: #F7EDD0; }

/* WooCommerce klassisch */
html[data-theme="night"] .woocommerce-message, html[data-theme="night"] .woocommerce-info,
html[data-theme="night"] .woocommerce-error, html[data-theme="night"] .woocommerce-noreviews { background-color: #28231F; color: #F7EDD0; }
html[data-theme="night"] .woocommerce a.button, html[data-theme="night"] .woocommerce button.button,
html[data-theme="night"] .woocommerce input.button { background-color: #3A3431; color: #F7EDD0; }
html[data-theme="night"] .woocommerce a.button.alt, html[data-theme="night"] .woocommerce button.button.alt { background-color: #D9824A; color: #1C1917; }
html[data-theme="night"] .woocommerce table.shop_table, html[data-theme="night"] .woocommerce table.shop_table th,
html[data-theme="night"] .woocommerce table.shop_table td { border-color: #3F3732; }
html[data-theme="night"] .woocommerce div.product .woocommerce-tabs ul.tabs li { background-color: #28231F; border-color: #3F3732; }
html[data-theme="night"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background-color: #1C1917; }
html[data-theme="night"] .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: #F7EDD0; }
html[data-theme="night"] .select2-container--default .select2-selection--single,
html[data-theme="night"] .select2-dropdown { background-color: #28231F; color: #F7EDD0; border-color: #5A4F48; }
html[data-theme="night"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #F7EDD0; }
html[data-theme="night"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="night"] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: #3B2A20; color: #F7EDD0; }

/* WooCommerce-Blöcke (Warenkorb, Kasse) */
html[data-theme="night"] .wc-block-components-text-input label,
html[data-theme="night"] .wc-block-components-combobox label,
html[data-theme="night"] .wc-blocks-components-select__label { color: #D0C2A6; }
html[data-theme="night"] .wc-blocks-components-select__select,
html[data-theme="night"] .wc-blocks-components-select__container { background-color: #28231F; color: #F7EDD0; }
html[data-theme="night"] .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
html[data-theme="night"] .wc-block-components-radio-control__input { background-color: #28231F; border-color: #5A4F48; }
html[data-theme="night"] .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: #F7EDD0; }
html[data-theme="night"] .wc-block-components-radio-control__input:checked::before { background: #F7EDD0; }
html[data-theme="night"] .wc-block-components-notice-banner { background-color: #28231F; color: #F7EDD0; }
html[data-theme="night"] .wc-block-components-combobox .wc-block-components-combobox-control .components-combobox-control__suggestions-container { background-color: #28231F; color: #F7EDD0; }
html[data-theme="night"] .wc-block-components-panel, html[data-theme="night"] .wc-block-components-totals-wrapper,
html[data-theme="night"] .wc-block-components-order-summary-item { border-color: #3F3732; }

/* Partnerprogramm (SliceWP) */
html[data-theme="night"] .slicewp-card, html[data-theme="night"] .slicewp-card-header,
html[data-theme="night"] .slicewp-list-table th, html[data-theme="night"] .slicewp-list-table td,
html[data-theme="night"] [class*="slicewp-alert"] { background-color: #28231F; color: #F7EDD0; border-color: #3F3732; }

/* Konto-Kasten (Plugin LingoRhythm Konto, Danke-Seite) */
html[data-theme="night"] .lrk-box { background: #3B2A20; border-color: #D9824A; }
html[data-theme="night"] .lrk-box a.lrk-pri { background: #D9824A; color: #1C1917; }
html[data-theme="night"] .lrk-box a.lrk-sec { border-color: #5A4F48; color: #F0A273; }

/* Shop-Layout A (Plugin LingoRhythm Shop-Layout, eigene Variablen auf .lrs) */
html[data-theme="night"] .lrs {
  --ink: #F7EDD0; --ink2: #E3D6BC; --soft: #D0C2A6; --muted: #B3A58B; --creme: #1C1917; --paper: #28231F;
  --sand: #3F3732; --sand2: #5A4F48; --terra: #D9824A; --terra-d: #D9824A; --terra-dd: #E8955F; --terra-t: #F0A273;
  --terra-tint: #3B2A20; --olive: #9DAE7C; --olive-d: #BCCB9C; --olive-tint: #2C3125; --peach: #F6A06B;
  --peach-tint: #3A2A20; --rost: #E8876C; --rost-tint: #3B231E;
}
html[data-theme="night"] .lrs-btn-primary, html[data-theme="night"] .lrs a.lrs-btn-primary, html[data-theme="night"] .lrs a.lrs-btn-primary:hover,
html[data-theme="night"] .lrs-btn-ghost:hover, html[data-theme="night"] .lrs a.lrs-btn-ghost:hover,
html[data-theme="night"] .lrs-add:hover, html[data-theme="night"] .lrs-add.lrs-on,
html[data-theme="night"] .lrs a.lrs-add:hover, html[data-theme="night"] .lrs a.lrs-add.lrs-on,
html[data-theme="night"] .lrs-play, html[data-theme="night"] .lrs-sig-end b, html[data-theme="night"] .lrs-word b { color: #1C1917; }
html[data-theme="night"] .lrs-fb.lrs-bad { color: #E8876C; }
html[data-theme="night"] .lrs-offer { box-shadow: 0 30px 50px -34px rgba(0, 0, 0, .8); }
html[data-theme="night"] .lrs-sig-time .lrs-t { animation-name: lrs-hl-n; }
@keyframes lrs-hl-n { 0%, 30% { background: #D9824A; color: #1C1917; } 34%, 100% { background: transparent; color: #B3A58B; } }

/* Blog-Grafiken ([lrb_figur], Klassen lrb-*): bleiben hell wie ein gedrucktes Kartenblatt (feste Zeichenfarben) */
html[data-theme="night"] .lrb { background: #F5EAD8; color: #201E1D; color-scheme: light; padding: 16px; border-radius: 20px; }
html[data-theme="night"] .wp-block-image.lrb-photo img { border-color: #3F3732; }
html[data-theme="night"] .wp-block-image.lrb-photo figcaption { color: #B3A58B; }