/* TrueWagyu Basis
 *
 * Enthaelt design/handoff/tokens/base.css, die lokalen Schriften und die
 * Umschaltregeln fuer Dark Mode. Nichts Seitenspezifisches - Layout,
 * Header, Footer und Komponenten kommen in spaeteren Paketen.
 */

/* ================= Schriften =================
 * Lokal, keine CDN-Einbindung (DSGVO). Subset "latin" - deckt DE und EN ab.
 * Beide Familien dienen als plattformunabhaengiger Ersatz fuer die
 * Systemschriften des Prototyps (Impact bzw. Noteworthy).
 */
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/anton-latin-400-normal.woff2) format('woff2');
}
@font-face{
  font-family:'Patrick Hand';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/patrick-hand-latin-400-normal.woff2) format('woff2');
}

/* ================= tokens/base.css ================= */
body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg)}
/* Kein Kasten um den Seitenkoerper. Die Referenz setzt hier max-width:1440px
 * plus 1px Rahmen-Schatten (README-Abschnitt Layout), das schneidet auf
 * breiten Schirmen aber hart auf Weiss ab. Stattdessen laufen die Farbbaender
 * - Topbar, Header, Hero, Footer - bis an den Fensterrand, und nur ihr Inhalt
 * bleibt im Kasten: .shell (1140) bzw. .uspin (1440). */
body{margin:0;-webkit-font-smoothing:antialiased}
/* NOVA setzt in clear.css `#main-wrapper{background:#ffffff}` - fest, ohne
 * Dark-Mode-Fassung. Im dunklen Modus lag dadurch der gesamte Inhaltsbereich
 * zwischen Hero und Footer auf Weiss, mit fast weisser Schrift darauf. Den
 * Hintergrund liefert der body; <main> bleibt durchsichtig. */
main#main-wrapper{background:transparent}

/* scroll-padding-top haelt Ankerziele unter der fixierten Leiste hervor
 * (Hero-Button "Warum True Wagyu" springt auf #fakten). Wert aus der Referenz. */
html{background:var(--color-bg);scroll-behavior:smooth;scroll-padding-top:150px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
a{color:var(--color-link)}
a:hover{color:var(--color-link-hover)}
::selection{background:var(--sky-300);color:var(--navy-900)}

/* ================= Dark Mode: Asset-Paare =================
 * Bildpaare hell/dunkel bekommen .lightonly bzw. .darkonly.
 */
.darkonly{display:none}
[data-theme="dark"] .darkonly{display:block}
[data-theme="dark"] .lightonly{display:none}

/* ================= Floating Labels (NOVA .label-slide) =================
 * NOVA setzt das Label hart auf `background:$white`
 * (NOVA/themes/base/sass/components/_forms.scss, Zeile 13 und 14): Die weisse
 * Flaeche maskiert den Feldrand hinter dem Text. Im Dunkelmodus standen
 * dadurch weisse Kaesten ueber jedem Feld.
 *
 * Die Maske gehoert an die Flaeche darunter, nicht an Weiss. Feld und Karte
 * tragen beide --color-surface (hell #ffffff, dunkel #182746), das Token
 * trifft damit in beiden Modi. Steht global und nicht pro Seite, weil
 * dieselbe Komponente auf Kontakt, Kasse, Login und Newsletter laeuft.
 */
.label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label,
.label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label:after{background:var(--color-surface)}
.label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label{color:var(--navy-800)}
[data-theme="dark"] .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label{color:var(--navy-100)}

/* ================= Lucide-Icons =================
 * Sprite: images/icons/lucide.svg, stroke-width 2,25 ist dort gesetzt.
 * Verwendung:
 *   <svg class="ic" aria-hidden="true"><use href="…/images/icons/lucide.svg#search"></use></svg>
 */
/* ================= sr-only =================
 * Text, das nur fuer Screenreader/Crawler da ist - fuer H1s, deren
 * sichtbare Lettering-Flaeche eine Pixelgrafik bleibt (Design-Regel:
 * Bubble-/Headline-Lettering nie als Font nachbauen).
 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  /* Schriftart mitgeben, obwohl nichts davon zu sehen ist: NOVA gibt h1
     Montserrat, und die H1 der Startseite besteht ausschliesslich aus einem
     .sr-only-Span. Der Browser hat dafuer 83 KiB Schrift geladen - fuer Text,
     den nur der Screenreader kennt. Es war das einzige Montserrat-Element im
     ganzen Shop (gemessen ueber zehn Seitentypen am 08.09.2026). */
  font-family:var(--font-body)}

.ic{width:26px;height:26px}
.ic22{width:22px;height:22px}
.ic18{width:18px;height:18px}
.ic14{width:14px;height:14px}
.ic10{width:10px;height:10px}