/* =====================================================================
   ByteStore – Stylesheet (style.css)
   ---------------------------------------------------------------------
   Aufbau dieser Datei:
    1.  Farben und Maße als CSS-Variablen (hell + dunkel)
    2.  Grundeinstellungen (Reset, Schriften)
    3.  Hilfsklassen (Container, nur für Screenreader …)
    4.  Buttons und Formular-Grundelemente
    5.  Header (Logo, Navigation, Suche, Warenkorb)
    6.  Footer
    7.  Abschnitte der Startseite (Hero, Kategorien, Vorteile, Teaser)
    8.  Produktkarten und Raster
    9.  Übersichtsseiten (Filter, Sortierung, PC-Pakete)
   10.  Produktseite
   11.  Warenkorb und Kasse
   12.  Kontakt, Über uns, Rechtstexte, Konfigurator
   13.  Hinweis-Meldung (Toast)

   „Mobile first“: Die Grundregeln gelten für das Handy. Mit
   @media (min-width: …) werden sie für Tablet und Desktop erweitert.
   ===================================================================== */


/* =====================================================================
   0. SCHRIFTEN
   Die Schriften liegen lokal im Ordner css/fonts/ (keine Verbindung zu
   Google oder anderen Anbietern – siehe Datenschutzerklärung).
   Space Grotesk und Inter stehen unter der SIL Open Font License
   (css/fonts/OFL-*.txt). Je Schrift gibt es zwei Dateien: „latin“ für
   die normalen Buchstaben und „latin-ext“ für Sonderzeichen.
   ===================================================================== */
/* Inter – latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  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;
}
/* Inter – latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  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;
}
/* Space Grotesk – latin-ext */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-ext.woff2") format("woff2");
  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;
}
/* Space Grotesk – latin */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
  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;
}


/* =====================================================================
   1. FARBEN UND MASSE
   ===================================================================== */
:root {
  /* Grundfarben – helles Design (Standard) */
  --farbe-hintergrund: #FFFFFF;
  --farbe-flaeche: #F4F6F8;          /* Karten, Kästen, Footer */
  --farbe-flaeche-2: #E9EDF1;        /* etwas dunklere Fläche, z. B. Bild-Hintergrund */
  --farbe-text: #0B0F14;
  --farbe-text-leise: #5B6673;       /* Nebentexte; Kontrast 5,8 : 1 auf Weiß */
  --farbe-rand: #DCE1E7;

  /* Akzentfarbe Mintgrün */
  --farbe-akzent: #1FD6A0;           /* Buttons, Flächen, Markierungen */
  --farbe-akzent-hover: #19BF8E;
  --farbe-auf-akzent: #0B0F14;       /* Text AUF mintgrünen Buttons (Kontrast 10 : 1) */
  /* Mintgrün als TEXT auf Weiß hätte nur einen Kontrast von 1,9 : 1 und
     wäre schlecht lesbar. Für Preise und Links im hellen Bereich nehmen
     wir deshalb ein dunkleres Mint (Kontrast 5,3 : 1). */
  --farbe-akzent-text: #067A5B;
  --farbe-akzent-zart: #E3FAF3;      /* sehr helles Mint für Hintergründe */

  /* Statusfarben */
  --farbe-erfolg: #067A5B;
  --farbe-warnung: #8A5A00;
  --farbe-fehler: #B42318;
  --farbe-fehler-zart: #FDECEA;

  /* Fokus-Rahmen (Tastaturbedienung) */
  --farbe-fokus: #067A5B;

  /* Leuchteffekt – im hellen Design aus */
  --leuchten: none;
  --leuchten-text: none;

  /* Schriften */
  --schrift-titel: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  --schrift-text: "Inter", "Segoe UI", Arial, sans-serif;

  /* Maße */
  --radius-klein: 8px;
  --radius: 14px;
  --radius-gross: 24px;
  --radius-pixel: 25%;               /* abgerundetes Quadrat wie das grüne Pixel im Logo */
  --schatten: 0 1px 2px rgba(11, 15, 20, 0.06), 0 8px 24px rgba(11, 15, 20, 0.06);
  --container-breite: 1240px;
  --abstand-abschnitt: clamp(3rem, 6vw, 5.5rem);
  --kopf-hoehe: 72px;
}

/* Dunkles Design für den Gaming-Bereich.
   Wir ändern nur die Variablen – alle Bausteine passen sich automatisch an. */
.dunkel {
  --farbe-hintergrund: #0B0F14;
  --farbe-flaeche: #151B23;
  --farbe-flaeche-2: #1D2530;
  --farbe-text: #FFFFFF;
  --farbe-text-leise: #9AA6B2;       /* Kontrast 7 : 1 auf #151B23 */
  --farbe-rand: #273140;
  --farbe-akzent-text: #1FD6A0;      /* auf Dunkel ist Mint gut lesbar (9 : 1) */
  --farbe-akzent-zart: rgba(31, 214, 160, 0.10);
  --farbe-erfolg: #1FD6A0;
  --farbe-warnung: #F5C26B;
  --farbe-fehler: #FF8A80;
  --farbe-fehler-zart: rgba(255, 138, 128, 0.12);
  --farbe-fokus: #1FD6A0;
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  /* dezentes Leuchten für Buttons und Preise */
  --leuchten: 0 0 0 1px rgba(31, 214, 160, 0.35), 0 0 22px rgba(31, 214, 160, 0.35);
  --leuchten-text: 0 0 14px rgba(31, 214, 160, 0.45);
  color-scheme: dark;                /* dunkle Scrollbalken und Formularfelder */
}


/* =====================================================================
   2. GRUNDEINSTELLUNGEN
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); /* Sprungziele nicht unter dem Header */
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;                           /* Footer bleibt auch bei wenig Inhalt unten */
}

/* Überschriften orientieren sich am Logo-Schriftzug:
   Space Grotesk, eher kräftig als fett, eng gesetzt */
h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

/* Elemente mit dem Attribut „hidden“ sind IMMER unsichtbar – auch wenn eine
   Klasse (z. B. .meldung mit display: flex) etwas anderes sagt. Ohne diese
   Regel war die leere Fehlerbox über den Formularen als roter Balken sichtbar. */
[hidden] {
  display: none !important;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--farbe-akzent-text);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--farbe-text);
}

ul, ol {
  padding-left: 1.25rem;
}

/* Sichtbarer Fokus-Rahmen für die Tastaturbedienung */
:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Wer in den Systemeinstellungen „weniger Bewegung“ wählt, bekommt keine Animationen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

/* Platzhalter für Symbole (<span data-icon="…">) dürfen in Flex-Zeilen
   nicht zusammengedrückt werden, sonst wird das Symbol bei langen Texten winzig */
[data-icon] {
  display: inline-flex;
  flex-shrink: 0;
}


/* =====================================================================
   3. HILFSKLASSEN
   ===================================================================== */

/* Spalten in Rastern dürfen schmaler werden als ihr Inhalt.
   Ohne diese Regel ragte z. B. die Kasse am Handy über den Bildschirmrand. */
.shop-layout > *,
.kasse-layout > *,
.zweispaltig > *,
.produkt > *,
.hero__raster > * {
  min-width: 0;
}
.container {
  width: 100%;
  max-width: var(--container-breite);
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 640px) {
  .container { padding-inline: 24px; }
}

/* Unsichtbar, aber für Screenreader lesbar */
.nur-screenreader {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* „Zum Inhalt springen“ – erscheint nur bei Tastatur-Fokus */
.sprunglink {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  font-weight: 600;
  border-radius: var(--radius-klein);
}

.sprunglink:focus {
  top: 12px;
}

.abschnitt {
  padding-block: var(--abstand-abschnitt);
}

.abschnitt--flaeche {
  background: var(--farbe-flaeche);
}

.abschnitt--ohne-oben {
  padding-top: 0;
}

.abschnitt--wenig-oben {
  padding-top: 2rem;
}

.abschnitt__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.abschnitt__kopf h2 {
  margin: 0;
}

.abschnitt__kopf p {
  margin: 0.4rem 0 0;
  color: var(--farbe-text-leise);
}

/* Kleine Überzeile über Überschriften */
.ueberzeile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-family: var(--schrift-titel);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
}

/* Das grüne „Pixel“ aus dem Logo als Gestaltungselement */
.ueberzeile::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-pixel);
  background: var(--farbe-akzent);
  box-shadow: var(--leuchten);
}

.text-leise {
  color: var(--farbe-text-leise);
}

/* Kleine Hilfsklassen für Abstände und Ausrichtung */
.abstand-oben { margin-top: 1.25rem; }
.ohne-abstand-oben { margin-top: 0; }
.text-klein { font-size: 0.875rem; }
.text-mittig { text-align: center; }
.text-links { text-align: left; }
.buttons-mittig { justify-content: center; }

.link-pfeil {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: none;
}

.link-pfeil:hover {
  text-decoration: underline;
}

/* Brotkrümel-Navigation */
.brotkruemel ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: var(--farbe-text-leise);
}

.brotkruemel li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--farbe-rand);
}

.brotkruemel a {
  color: var(--farbe-text-leise);
}

.brotkruemel a:hover {
  color: var(--farbe-text);
}


/* =====================================================================
   4. BUTTONS UND FORMULARE
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;                  /* groß genug für Finger (mind. 44 px) */
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--schrift-titel);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s, color 0.15s;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primaer {
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  box-shadow: var(--leuchten);
}

.btn--primaer:hover {
  background: var(--farbe-akzent-hover);
  color: var(--farbe-auf-akzent);
}

/* Dunkler Button (z. B. „Gaming“ auf heller Fläche) */
.btn--dunkel {
  background: #0B0F14;
  color: #FFFFFF;
}

.btn--dunkel:hover {
  background: #232B36;
  color: #FFFFFF;
}

/* Umrandeter Button */
.btn--rand {
  background: transparent;
  border-color: var(--farbe-text);
  color: var(--farbe-text);
}

.btn--rand:hover {
  background: var(--farbe-text);
  color: var(--farbe-hintergrund);
}

.btn--klein {
  min-height: 44px;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
}

.btn--breit {
  width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--farbe-flaeche-2);
  color: var(--farbe-text-leise);
  box-shadow: none;
  cursor: not-allowed;
}

/* Reiner Text-Button (z. B. „Entfernen“) */
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
  color: var(--farbe-text-leise);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: var(--radius-klein);
}

.text-button:hover {
  color: var(--farbe-fehler);
}

/* Formularfelder */
.feld {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.feld label,
.feld__label {
  font-weight: 600;
  font-size: 0.95rem;
}

.pflicht {
  color: var(--farbe-fehler);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input::placeholder,
textarea::placeholder {
  color: var(--farbe-text-leise);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--farbe-text-leise);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--farbe-akzent-text);
  box-shadow: 0 0 0 3px rgba(31, 214, 160, 0.35);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

/* Fehlerhafte Eingabe */
[aria-invalid="true"] {
  border-color: var(--farbe-fehler) !important;
  background: var(--farbe-fehler-zart);
}

.feld__fehler {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--farbe-fehler);
  font-size: 0.9rem;
  font-weight: 500;
}

.feld__fehler:empty {
  display: none;
}

.feld__hilfe {
  margin: 0;
  font-size: 0.85rem;
  color: var(--farbe-text-leise);
}

/* Checkbox und Radio-Button mit Text */
.auswahl {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  font-weight: 400;
}

.auswahl input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--farbe-akzent-text);
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  min-width: 0;
}

legend {
  padding: 0;
  margin-bottom: 1rem;
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  font-weight: 700;
}

.formular-raster {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 640px) {
  .formular-raster { grid-template-columns: 1fr 1fr; }
  .formular-raster .feld--breit { grid-column: 1 / -1; }
}

/* Mengenauswahl mit − und + */
.menge {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--farbe-rand);
  border-radius: 999px;
  background: var(--farbe-hintergrund);
}

.menge button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--farbe-text);
  cursor: pointer;
}

.menge button:hover:not(:disabled) {
  background: var(--farbe-flaeche);
}

.menge button:disabled {
  color: var(--farbe-rand);
  cursor: not-allowed;
}

.menge input {
  width: 3.25rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}

.menge input::-webkit-outer-spin-button,
.menge input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Kasten mit Rahmen */
.kasten {
  background: var(--farbe-flaeche);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.kasten--rand {
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-rand);
}

/* Meldungsbox (Fehlerübersicht, Info) */
.meldung {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-klein);
  border-left: 4px solid var(--farbe-akzent);
  background: var(--farbe-akzent-zart);
}

.meldung p:last-child,
.meldung ul:last-child {
  margin-bottom: 0;
}

.meldung--fehler {
  border-left-color: var(--farbe-fehler);
  background: var(--farbe-fehler-zart);
}

.meldung--fehler a {
  color: var(--farbe-fehler);
}


/* =====================================================================
   5. HEADER
   ===================================================================== */
.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--farbe-hintergrund);
  border-bottom: 1px solid var(--farbe-rand);
}

/* Raster am Handy:
   Zeile 1: Logo | Warenkorb | Menü-Button
   Zeile 2: Suchfeld
   Zeile 3: Navigation (nur sichtbar, wenn das Menü offen ist) */
.kopf__zeile {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "logo   warenkorb menue"
    "suche  suche     suche"
    "nav    nav       nav";
  align-items: center;
  gap: 0.75rem 0.5rem;
  padding-block: 0.75rem;
}

.kopf__logo {
  grid-area: logo;
  display: inline-flex;
  width: max-content;
  border-radius: 4px;
}

.logo {
  width: 140px;
  height: auto;
}

/* Logo-Wechsel: im hellen Design das dunkle Logo, im dunklen das weiße */
.logo--fuer-dunkel { display: none; }
.dunkel .logo--fuer-hell { display: none; }
.dunkel .logo--fuer-dunkel { display: block; }

/* Navigation */
.hauptnav {
  grid-area: nav;
  display: none;                      /* am Handy erst nach Klick auf den Menü-Button */
}

.hauptnav--offen {
  display: block;
}

.hauptnav ul {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.5rem;
}

.hauptnav a {
  display: block;
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid var(--farbe-rand);
  color: var(--farbe-text);
  font-family: var(--schrift-titel);
  font-weight: 600;
  text-decoration: none;
}

.hauptnav a:hover {
  color: var(--farbe-akzent-text);
}

.hauptnav a[aria-current="page"] {
  color: var(--farbe-akzent-text);
}

/* Menü-Button (Hamburger) */
.menue-button {
  grid-area: menue;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--farbe-rand);
  border-radius: 50%;
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  cursor: pointer;
}

.menue-button .icon {
  width: 22px;
  height: 22px;
}

.menue-button__zu { display: none; }
.menue-button[aria-expanded="true"] .menue-button__auf { display: none; }
.menue-button[aria-expanded="true"] .menue-button__zu { display: block; }

/* Suche */
.suche {
  grid-area: suche;
  position: relative;
}

.suche__symbol {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--farbe-text-leise);
  pointer-events: none;
}

.suche__feld {
  padding-left: 2.75rem !important;
  border-radius: 999px !important;
  background: var(--farbe-flaeche) !important;
  border-color: transparent !important;
}

.suche__feld:focus-visible {
  border-color: var(--farbe-akzent-text) !important;
}

.suche__ergebnisse {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 120;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.5rem;
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.suche__ergebnisse ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.suche__treffer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: var(--radius-klein);
  color: var(--farbe-text);
  text-decoration: none;
}

.suche__treffer:hover,
.suche__treffer:focus-visible {
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}

.suche__treffer img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche-2);
}

.suche__name {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.suche__name small {
  display: block;
  font-weight: 400;
  color: var(--farbe-text-leise);
}

.suche__preis {
  font-family: var(--schrift-titel);
  font-weight: 700;
  color: var(--farbe-akzent-text);
  white-space: nowrap;
}

.suche__leer,
.suche__mehr {
  margin: 0;
  padding: 0.75rem;
  color: var(--farbe-text-leise);
  font-size: 0.9rem;
}

/* Warenkorb-Symbol */
.kopf__warenkorb {
  grid-area: warenkorb;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 0.85rem;
  border-radius: 999px;
  color: var(--farbe-text);
  font-weight: 600;
  text-decoration: none;
}

.kopf__warenkorb:hover {
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}

.kopf__warenkorb .icon {
  width: 24px;
  height: 24px;
}

.kopf__warenkorb-text {
  display: none;
}

.zaehler {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: var(--leuchten);
}

.zaehler--leer {
  background: var(--farbe-flaeche-2);
  color: var(--farbe-text-leise);
  box-shadow: none;
}

/* Desktop: alles in einer Zeile, Menü-Button ausgeblendet */
@media (min-width: 1024px) {
  .kopf__zeile {
    grid-template-columns: auto 1fr minmax(180px, 300px) auto;
    grid-template-areas: "logo nav suche warenkorb";
    gap: 1.25rem;
    min-height: var(--kopf-hoehe);
    padding-block: 0.5rem;
  }

  .menue-button {
    display: none;
  }

  .hauptnav {
    display: block;
  }

  .hauptnav ul {
    display: flex;
    gap: 0.25rem;
    padding: 0;
  }

  .hauptnav a {
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: 999px;
    font-size: 0.95rem;
    white-space: nowrap;               /* Menüpunkte nie umbrechen */
  }

  .hauptnav a:hover {
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
  }

  .hauptnav a[aria-current="page"] {
    background: var(--farbe-akzent-zart);
    color: var(--farbe-akzent-text);
  }

  .kopf__warenkorb-text {
    display: inline;
  }

  .logo {
    width: 160px;
  }
}

/* Kleinere Desktops: Wort „Warenkorb“ ausblenden, das Symbol bleibt */
@media (min-width: 1024px) and (max-width: 1179px) {
  .kopf__warenkorb-text {
    display: none;
  }
}


/* =====================================================================
   6. FOOTER
   ===================================================================== */
.fuss {
  margin-top: auto;
  padding-block: 3.5rem 2rem;
  background: var(--farbe-flaeche);
  border-top: 1px solid var(--farbe-rand);
  font-size: 0.95rem;
}

.fuss__raster {
  display: grid;
  gap: 2rem;
}

@media (min-width: 640px) {
  .fuss__raster { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 3rem; }
}

.fuss__marke .logo {
  margin-bottom: 1rem;
}

.fuss__slogan {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.1rem;
}

.fuss__marke p:last-child {
  color: var(--farbe-text-leise);
}

.fuss__titel {
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
}

.fuss__spalte ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fuss__spalte li {
  margin-bottom: 0.25rem;
}

.fuss__spalte a {
  display: inline-block;
  padding-block: 0.2rem;
  color: var(--farbe-text);
  text-decoration: none;
}

.fuss__spalte a:hover {
  color: var(--farbe-akzent-text);
  text-decoration: underline;
}

.fuss address {
  font-style: normal;
  margin-bottom: 1rem;
}

.fuss__zeiten li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--farbe-text-leise);
  font-size: 0.9rem;
}

.fuss__zahlung {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--farbe-rand);
}

.zahlarten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zahlart {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  background: var(--farbe-hintergrund);
  font-size: 0.85rem;
  font-weight: 600;
}

.fuss__widerruf {
  margin: 2rem 0 0;
}

/* Übungsfirmen-Hinweis: gut sichtbar */
.uebungsfirma-hinweis {
  margin: 2rem 0 1rem;
  padding: 1rem 1.25rem;
  border: 1.5px dashed var(--farbe-akzent-text);
  border-radius: var(--radius-klein);
  background: var(--farbe-hintergrund);
}

.fuss__copyright {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: 0.875rem;
}


/* =====================================================================
   7. STARTSEITE
   ===================================================================== */

/* ---------- Hero-Banner ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(circle at 85% 20%, rgba(31, 214, 160, 0.18), transparent 40%),
    var(--farbe-hintergrund);
}

.hero__raster {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .hero__raster { grid-template-columns: 1.05fr 1fr; }
}

.hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  margin-bottom: 1.25rem;
}

/* Hervorhebung „Highscore“ – mintgrüner Balken HINTER dem Text,
   die Schrift selbst bleibt dunkel und damit gut lesbar */
.markiert {
  background: linear-gradient(transparent 62%, var(--farbe-akzent) 62%, var(--farbe-akzent) 92%, transparent 92%);
  padding-inline: 0.1em;
}

.hero__text {
  max-width: 34rem;
  font-size: 1.15rem;
  color: var(--farbe-text-leise);
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}




/* Bildbereich: eine helle Office-Kachel und eine dunkle Gaming-Kachel */
.hero__bild {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.hero-kachel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 260px;
  padding: 1.5rem;
  border-radius: var(--radius-gross);
}

.hero-kachel .icon {
  width: 64px;
  height: 64px;
}

.hero-kachel strong {
  display: block;
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
}

.hero-kachel span {
  font-size: 0.95rem;
}

.hero-kachel--office {
  background: var(--farbe-flaeche);
  color: #0B0F14;
  border: 1px solid var(--farbe-rand);
}

.hero-kachel--office .icon {
  color: #067A5B;
}

.hero-kachel--gaming {
  margin-top: 2.5rem;
  background: #0B0F14;
  color: #FFFFFF;
  box-shadow: 0 0 40px rgba(31, 214, 160, 0.25);
}

.hero-kachel--gaming .icon {
  color: #1FD6A0;
  filter: drop-shadow(0 0 10px rgba(31, 214, 160, 0.6));
}

.hero-kachel--gaming span {
  color: #9AA6B2;
}

/* ---------- Kategorien ---------- */
.kategorien {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .kategorien { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

@media (min-width: 1024px) {
  .kategorien { grid-template-columns: repeat(5, 1fr); }
}

.kategorie {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-rand);
  color: var(--farbe-text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.kategorie:hover {
  border-color: var(--farbe-akzent);
  transform: translateY(-2px);
  box-shadow: var(--schatten);
  color: var(--farbe-text);
}

.kategorie__symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--farbe-akzent-zart);
  color: var(--farbe-akzent-text);
}

.kategorie__symbol .icon {
  width: 26px;
  height: 26px;
}

.kategorie strong {
  font-family: var(--schrift-titel);
  font-size: 1.05rem;
}

.kategorie small {
  display: block;
  color: var(--farbe-text-leise);
}

/* Gaming-Kategorien als dunkle Kacheln */
.kategorie--gaming {
  background: #0B0F14;
  border-color: #0B0F14;
  color: #FFFFFF;
}

.kategorie--gaming:hover {
  color: #FFFFFF;
  border-color: #1FD6A0;
  box-shadow: 0 0 24px rgba(31, 214, 160, 0.3);
}

.kategorie--gaming .kategorie__symbol {
  background: rgba(31, 214, 160, 0.12);
  color: #1FD6A0;
}

.kategorie--gaming small {
  color: #9AA6B2;
}

/* ---------- Vorteile ---------- */
.vorteile {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .vorteile { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.vorteil {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

/* Auf grauen Abschnitten werden Kacheln weiß, damit sie sich abheben */
.abschnitt--flaeche .vorteil,
.abschnitt--flaeche .infokachel,
.abschnitt--flaeche .wert {
  background: var(--farbe-hintergrund);
}

.vorteil__symbol {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
}

.vorteil h3 {
  margin-bottom: 0.3rem;
}

.vorteil p {
  margin: 0;
  color: var(--farbe-text-leise);
}

/* ---------- Konfigurator-Teaser (dunkler Kasten) ---------- */
.teaser {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius-gross);
  background:
    radial-gradient(circle at 90% 10%, rgba(31, 214, 160, 0.22), transparent 45%),
    var(--farbe-hintergrund);
  color: var(--farbe-text);
  overflow: hidden;
}

@media (min-width: 900px) {
  .teaser { grid-template-columns: 1.2fr 1fr; }
}

.teaser p {
  color: var(--farbe-text-leise);
  max-width: 36rem;
}

.teaser__teile {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.teaser__teile li {
  display: grid;
  place-items: center;
  gap: 0.4rem;
  aspect-ratio: 1;
  padding: 0.5rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  color: var(--farbe-akzent-text);
  font-size: 0.7rem;
  text-align: center;
}

.teaser__teile li span {
  color: var(--farbe-text-leise);
}

.teaser__teile .icon {
  width: 28px;
  height: 28px;
  filter: drop-shadow(var(--leuchten-text));
}


/* =====================================================================
   8. PRODUKTKARTEN
   ===================================================================== */
.produktraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}

@media (min-width: 640px) {
  .produktraster { gap: 1.5rem; }
}

.produktkarte {
  position: relative;                /* für den Link über die ganze Karte */
  display: flex;
  flex-direction: column;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-hintergrund);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.produktkarte:hover {
  border-color: var(--farbe-akzent);
  box-shadow: var(--schatten);
  transform: translateY(-2px);
}

.dunkel .produktkarte {
  background: var(--farbe-flaeche);
}

.dunkel .produktkarte:hover {
  box-shadow: 0 0 0 1px rgba(31, 214, 160, 0.4), 0 0 28px rgba(31, 214, 160, 0.18);
}

.produktkarte__bild {
  aspect-ratio: 1;
  background: var(--farbe-flaeche);
}

.dunkel .produktkarte__bild {
  background: var(--farbe-flaeche-2);
}

.produktkarte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.produktkarte__inhalt {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.1rem 1.25rem;
}

.produktkarte__kategorie {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
}

.produktkarte__name {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

.produktkarte__name a {
  color: var(--farbe-text);
  text-decoration: none;
}

/* Der Link wird mit ::after über die gesamte Karte gelegt */
.produktkarte__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.produktkarte__name a:focus-visible {
  outline: none;
}

.produktkarte:has(.produktkarte__name a:focus-visible) {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
}

.produktkarte__text {
  flex: 1;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--farbe-text-leise);
}

.produktkarte__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Der Button liegt ÜBER dem Karten-Link, damit er klickbar bleibt */
.produktkarte__fuss .btn {
  position: relative;
  z-index: 2;
}

/* Preis */
.preis {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--farbe-akzent-text);
  text-shadow: var(--leuchten-text);
  white-space: nowrap;
}

/* Lagerstand mit farbigem Punkt */
.lager {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
}

.lager::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
}

.lager--ok    { color: var(--farbe-erfolg); }
.lager--knapp { color: var(--farbe-warnung); }
.lager--leer  { color: var(--farbe-fehler); }

.leer-hinweis {
  grid-column: 1 / -1;
  padding: 3rem 1.5rem;
  border: 1.5px dashed var(--farbe-rand);
  border-radius: var(--radius);
  text-align: center;
  color: var(--farbe-text-leise);
}


/* =====================================================================
   9. ÜBERSICHTSSEITEN (Office / Gaming)
   ===================================================================== */
.seitentitel {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--farbe-flaeche);
}

.dunkel .seitentitel {
  background:
    radial-gradient(circle at 80% 0%, rgba(31, 214, 160, 0.18), transparent 45%),
    var(--farbe-hintergrund);
}

.seitentitel h1 {
  margin-bottom: 0.5rem;
}

.seitentitel p {
  max-width: 40rem;
  margin: 0;
  font-size: 1.1rem;
  color: var(--farbe-text-leise);
}

.shop-layout {
  display: grid;
  gap: 1.5rem;
  padding-block: 2rem var(--abstand-abschnitt);
}

@media (min-width: 1024px) {
  .shop-layout { grid-template-columns: 260px 1fr; gap: 2.5rem; }
}

/* Filter-Spalte */
.filter__umschalter {
  width: 100%;
}

@media (min-width: 1024px) {
  .filter__umschalter { display: none; }
}

.filter__inhalt {
  margin-top: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

@media (min-width: 1024px) {
  /* Auf dem Desktop ist der Filter immer sichtbar */
  .filter__inhalt[hidden] { display: block !important; }
  .filter__inhalt {
    position: sticky;
    top: calc(var(--kopf-hoehe) + 1.5rem);
    margin-top: 0;
  }
}

.filter__gruppe {
  margin-bottom: 1.5rem;
}

.filter__gruppe legend {
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.filter__gruppe .auswahl {
  padding-block: 0.3rem;
}

.filter__anzahl {
  margin-left: auto;
  color: var(--farbe-text-leise);
  font-size: 0.85rem;
}

.filter__preise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.filter__preise label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--farbe-text-leise);
}

.filter__preise input {
  margin-top: 0.25rem;
}

/* Leiste über dem Raster: Anzahl + Sortierung */
.werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.werkzeugleiste p {
  margin: 0;
  color: var(--farbe-text-leise);
}

.sortierung {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sortierung label {
  font-weight: 600;
  white-space: nowrap;
}

.sortierung select {
  width: auto;
}

/* ---------- Gaming-PC-Pakete ---------- */
.pakete {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .pakete { grid-template-columns: repeat(3, 1fr); }
}

.paket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-gross);
  background: var(--farbe-flaeche);
}

/* Das empfohlene Paket leuchtet */
.paket--empfohlen {
  border-color: var(--farbe-akzent);
  box-shadow: var(--leuchten);
}

.paket__abzeichen {
  position: absolute;
  top: -0.85rem;
  left: 1.75rem;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  font-size: 0.8rem;
  font-weight: 700;
}

.paket__stufe {
  margin: 0 0 0.25rem;
  font-family: var(--schrift-titel);
  font-size: 2rem;
  font-weight: 700;
}

.paket__stufe span {
  color: var(--farbe-akzent-text);
  text-shadow: var(--leuchten-text);
}

.paket__bild {
  margin: 1rem 0;
  border-radius: var(--radius);
  background: var(--farbe-flaeche-2);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

.paket__daten {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  flex: 1;
}

.paket__daten li {
  display: flex;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--farbe-rand);
  font-size: 0.95rem;
}

.paket__daten .icon {
  color: var(--farbe-akzent-text);
  margin-top: 0.2rem;
  width: 1.1em;
  height: 1.1em;
}

.paket__preis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.paket__preis .preis {
  font-size: 1.75rem;
}

.paket__preis small {
  color: var(--farbe-text-leise);
}

.paket__buttons {
  display: grid;
  gap: 0.6rem;
}


/* =====================================================================
   10. PRODUKTSEITE
   ===================================================================== */
.produkt {
  display: grid;
  gap: 2rem;
  padding-block: 0 var(--abstand-abschnitt);
}

#produktseite {
  padding-top: 1.5rem;
}

@media (min-width: 900px) {
  .produkt { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
}

.produkt__bild {
  border-radius: var(--radius-gross);
  background: var(--farbe-flaeche);
  overflow: hidden;
}

@media (min-width: 900px) {
  .produkt__bild { position: sticky; top: calc(var(--kopf-hoehe) + 1.5rem); }
}

.produkt__bild img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.produkt__artikelnummer {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--farbe-text-leise);
}

.produkt h1 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  margin-bottom: 0.75rem;
}

.produkt__kurz {
  font-size: 1.1rem;
  color: var(--farbe-text-leise);
}

.produkt__kaufbox {
  margin-block: 1.5rem 2rem;
  padding: 1.5rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

.produkt__kaufbox .preis {
  font-size: 2.25rem;
}

.produkt__steuer {
  margin: 0.15rem 0 1rem;
  font-size: 0.875rem;
  color: var(--farbe-text-leise);
}

.produkt__kaufen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1.25rem;
}

.produkt__kaufen .feld {
  margin: 0;
}

.produkt__kaufen .btn {
  flex: 1;
  min-width: 200px;
}

.produkt__vorteile {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--farbe-rand);
  font-size: 0.9rem;
}

.produkt__vorteile li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.produkt__vorteile .icon {
  color: var(--farbe-akzent-text);
}

.produkt__abschnitt {
  margin-top: 2rem;
}

.produkt__abschnitt h2 {
  font-size: 1.4rem;
}

/* Tabelle „Technische Daten“ */
.datentabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.datentabelle th,
.datentabelle td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--farbe-rand);
}

.datentabelle th {
  width: 40%;
  font-weight: 600;
  color: var(--farbe-text-leise);
}

.datentabelle tbody tr:nth-child(odd) {
  background: var(--farbe-flaeche);
}

.datentabelle caption {
  text-align: left;
}

/* Liste der Komponenten (PC-Pakete) */
.komponentenliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.komponentenliste li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--farbe-rand);
  font-size: 0.95rem;
}

.komponentenliste small {
  display: block;
  color: var(--farbe-text-leise);
}

.nicht-gefunden {
  padding-block: var(--abstand-abschnitt);
  text-align: center;
}


/* =====================================================================
   11. WARENKORB UND KASSE
   ===================================================================== */
.kasse-layout {
  display: grid;
  gap: 2rem;
  padding-block: 2rem var(--abstand-abschnitt);
}

@media (min-width: 1024px) {
  .kasse-layout { grid-template-columns: 1fr 380px; gap: 3rem; align-items: start; }
}

/* Warenkorb-Position */
.positionen {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--farbe-rand);
}

.position {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--farbe-rand);
}

@media (min-width: 640px) {
  .position {
    grid-template-columns: 112px 1fr auto;
    align-items: center;
  }
}

.position__bild {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  object-fit: cover;
}

.position__name {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

.position__name a {
  color: var(--farbe-text);
  text-decoration: none;
}

.position__name a:hover {
  text-decoration: underline;
}

.position__info {
  margin: 0;
  font-size: 0.875rem;
  color: var(--farbe-text-leise);
}

.position__komponenten {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--farbe-text-leise);
}

.position__steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .position__steuerung {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
  }
}

.position__summe {
  margin: 0;
  margin-left: auto;
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
  font-weight: 700;
}

@media (min-width: 640px) {
  .position__summe { margin-left: 0; }
}

/* Summenbox rechts */
.summen {
  position: sticky;
  top: calc(var(--kopf-hoehe) + 1.5rem);
}

.summen h2 {
  font-size: 1.35rem;
}

.summen__tabelle {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
}

.summen__tabelle th,
.summen__tabelle td {
  padding: 0.45rem 0;
  font-weight: 400;
  text-align: left;
}

.summen__tabelle td {
  text-align: right;
  white-space: nowrap;
}

.summen__gesamt th,
.summen__gesamt td {
  padding-top: 0.9rem;
  border-top: 1px solid var(--farbe-rand);
  font-family: var(--schrift-titel);
  font-size: 1.3rem;
  font-weight: 700;
}

.summen__gesamt td {
  color: var(--farbe-akzent-text);
}

.summen__mwst th,
.summen__mwst td {
  padding-top: 0;
  font-size: 0.875rem;
  color: var(--farbe-text-leise);
}

.gratisversand {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-klein);
  background: var(--farbe-akzent-zart);
  font-size: 0.9rem;
}

.fortschritt {
  height: 6px;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: var(--farbe-rand);
  overflow: hidden;
}

.fortschritt span {
  display: block;
  height: 100%;
  background: var(--farbe-akzent);
}

.leerer-warenkorb {
  padding: 3rem 1.5rem;
  text-align: center;
}

.leerer-warenkorb .icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  color: var(--farbe-text-leise);
}

/* Kasse: Fortschrittsanzeige der Schritte */
.schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--farbe-text-leise);
}

.schritte li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.schritte li span {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--farbe-rand);
  font-weight: 700;
  font-size: 0.8rem;
}

.schritte [aria-current="step"] {
  color: var(--farbe-text);
  font-weight: 600;
}

.schritte [aria-current="step"] span,
.schritte .erledigt span {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
}

.formularblock {
  margin-bottom: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
}

.formularblock fieldset {
  margin: 0;
}

/* Auswahlkarten (Versand- und Zahlungsart) */
.auswahlkarten {
  display: grid;
  gap: 0.75rem;
}

.auswahlkarte {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.auswahlkarte:hover {
  border-color: var(--farbe-text-leise);
}

.auswahlkarte:has(input:checked) {
  border-color: var(--farbe-akzent-text);
  background: var(--farbe-akzent-zart);
}

.auswahlkarte input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--farbe-akzent-text);
}

.auswahlkarte__text {
  flex: 1;
}

.auswahlkarte__text strong {
  display: block;
}

.auswahlkarte__text small {
  color: var(--farbe-text-leise);
}

.auswahlkarte__preis {
  font-weight: 700;
  white-space: nowrap;
}

.auswahlkarte > .icon {
  color: var(--farbe-text-leise);
}

/* Bestellübersicht in der Kasse */
.bestellliste {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.bestellliste li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--farbe-rand);
  font-size: 0.95rem;
}

.bestellliste small {
  display: block;
  color: var(--farbe-text-leise);
}

/* Bestellbestätigung */
.bestaetigung {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--abstand-abschnitt);
  text-align: center;
}

.bestaetigung__symbol {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  box-shadow: 0 0 0 10px var(--farbe-akzent-zart);
}

.bestaetigung__symbol .icon {
  width: 40px;
  height: 40px;
}

.bestellnummer {
  display: inline-block;
  margin: 0.5rem 0 1.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.bestaetigung__details {
  display: grid;
  gap: 1rem;
  margin-block: 2rem;
  text-align: left;
}

@media (min-width: 640px) {
  .bestaetigung__details { grid-template-columns: 1fr 1fr; }
}

.bestaetigung__details h2,
.bestaetigung__untertitel {
  font-size: 1.05rem;
}

.bestaetigung__details p {
  margin: 0;
}


/* =====================================================================
   12. KONTAKT, ÜBER UNS, RECHTSTEXTE, KONFIGURATOR
   ===================================================================== */
.zweispaltig {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .zweispaltig { grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
}

.kontaktliste {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.kontaktliste li {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.kontaktliste .icon {
  margin-top: 0.2rem;
  color: var(--farbe-akzent-text);
}

.zeiten-tabelle {
  width: 100%;
  border-collapse: collapse;
}

.zeiten-tabelle th,
.zeiten-tabelle td {
  padding: 0.5rem 0;
  text-align: left;
  border-bottom: 1px solid var(--farbe-rand);
  font-weight: 400;
}

.zeiten-tabelle td {
  text-align: right;
}

/* FAQ (aufklappbar mit <details>) */
.faq {
  max-width: 860px;
}

.faq details {
  border-bottom: 1px solid var(--farbe-rand);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 1.1rem 0;
  font-family: var(--schrift-titel);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Plus-Zeichen, das sich beim Öffnen zum Minus dreht */
.faq summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--farbe-flaeche);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.2s;
}

.faq details[open] summary::after {
  content: "−";
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
}

.faq details > div {
  padding-bottom: 1.25rem;
  color: var(--farbe-text-leise);
}

.infokacheln {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .infokacheln { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.infokachel {
  padding: 1.75rem;
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

.infokachel .vorteil__symbol {
  margin-bottom: 1rem;
}

.infokachel p:last-child,
.infokachel ul:last-child {
  margin-bottom: 0;
}

.infokachel ul {
  color: var(--farbe-text-leise);
}

.formular-erfolg {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

/* Über uns: Zeitleiste */
.zeitleiste {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.75rem;
  border-left: 2px solid var(--farbe-rand);
}

.zeitleiste li {
  position: relative;
  padding-bottom: 1.75rem;
}

.zeitleiste li::before {
  content: "";
  position: absolute;
  left: calc(-1.75rem - 7px);
  top: 0.35rem;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pixel);
  background: var(--farbe-akzent);
}

.zeitleiste strong {
  display: block;
  font-family: var(--schrift-titel);
  font-size: 1.1rem;
}

.zeitleiste p {
  margin: 0.25rem 0 0;
  color: var(--farbe-text-leise);
}

.werte {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .werte { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (min-width: 1024px) {
  .werte { grid-template-columns: repeat(4, 1fr); }
}

.wert {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

.wert .icon {
  width: 32px;
  height: 32px;
  margin-bottom: 1rem;
  color: var(--farbe-akzent-text);
}

.wert p {
  margin: 0;
  color: var(--farbe-text-leise);
}

.team {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .team { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .team { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

.person {
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-hintergrund);
  text-align: center;
}

/* Platzhalter für Fotos: Initialen im Kreis */
.person__bild {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: #0B0F14;
  color: #FFFFFF;
  font-family: var(--schrift-titel);
  font-size: 2rem;
  font-weight: 700;
  position: relative;
}

.person__bild::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pixel);
  background: #1FD6A0;
}

.person h3 {
  margin-bottom: 0.25rem;
}

.person__rolle {
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: var(--farbe-akzent-text);
}

.person p:last-child {
  margin: 0;
  font-size: 0.9rem;
  color: var(--farbe-text-leise);
}

/* Über uns: Vorschau des Logo-Symbols auf hellem und dunklem Grund */
.logo-vorschau {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.logo-vorschau__kachel {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-gross);
  background: var(--farbe-flaeche);
}

.logo-vorschau__kachel.dunkel {
  background: var(--farbe-hintergrund);
  box-shadow: 0 0 40px rgba(31, 214, 160, 0.2);
}

.logo-vorschau__kachel img {
  width: 55%;
}

/* Rechtstexte (Impressum, AGB, Datenschutz) */
.rechtstext {
  max-width: 820px;
  padding-block: 2rem var(--abstand-abschnitt);
}

.rechtstext h2 {
  margin-top: 2.5rem;
  font-size: 1.4rem;
}

.rechtstext h3 {
  margin-top: 1.5rem;
  font-size: 1.1rem;
}

.rechtstext dl {
  display: grid;
  gap: 0.25rem 1.5rem;
  margin: 0 0 1.5rem;
}

@media (min-width: 640px) {
  .rechtstext dl { grid-template-columns: 220px 1fr; }
}

.rechtstext dt {
  font-weight: 600;
}

.rechtstext dd {
  margin: 0 0 0.5rem;
  color: var(--farbe-text-leise);
}

.rechtstext .uebungsfirma-hinweis {
  margin-top: 0;
  font-size: 1.05rem;
}

.inhaltsverzeichnis {
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

.inhaltsverzeichnis h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.inhaltsverzeichnis ol {
  margin: 0;
  columns: 2 220px;
}

/* nummerierte Absätze in AGB und Datenschutz */
.rechtstext ol li,
.rechtstext ul li {
  margin-bottom: 0.5rem;
}

.inhaltsverzeichnis ol li {
  margin-bottom: 0.15rem;
}

/* Breite Tabellen (z. B. Datenschutz) am Handy seitlich scrollbar */
.tabelle-scroll {
  overflow-x: auto;
}

.datentabelle--spalten th {
  width: auto;
}

.datentabelle--spalten thead th {
  color: var(--farbe-text);
  border-bottom: 2px solid var(--farbe-rand);
}

/* kleinere Legende, z. B. im Widerrufsformular */
legend.legende-klein {
  margin-bottom: 0.6rem;
  font-family: var(--schrift-text);
  font-size: 0.95rem;
  font-weight: 600;
}

.musterformular {
  padding: 1.5rem;
  border: 1.5px dashed var(--farbe-rand);
  border-radius: var(--radius);
}

/* Konfigurator-Platzhalter */
.bald {
  position: relative;
  padding-block: clamp(4rem, 10vw, 8rem);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(31, 214, 160, 0.22), transparent 55%),
    var(--farbe-hintergrund);
  overflow: hidden;
}

.bald__symbol {
  width: 96px;
  height: 96px;
  margin: 0 auto 1.5rem;
  filter: drop-shadow(0 0 24px rgba(31, 214, 160, 0.35));
}

.bald__abzeichen {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: 0.35rem 1rem;
  border: 1px solid var(--farbe-akzent);
  border-radius: 999px;
  color: var(--farbe-akzent-text);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--leuchten);
}

.bald h1 {
  max-width: 14ch;
  margin-inline: auto;
}

.bald p {
  max-width: 38rem;
  margin-inline: auto;
  font-size: 1.15rem;
  color: var(--farbe-text-leise);
}

.bald .hero__buttons {
  justify-content: center;
}

.schrittfolge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: schritt;
}

.schrittfolge li {
  counter-increment: schritt;
  padding: 1.25rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

.schrittfolge li::before {
  content: "Schritt " counter(schritt);
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
}

.schrittfolge .icon {
  width: 30px;
  height: 30px;
  margin-bottom: 0.6rem;
  color: var(--farbe-akzent-text);
  filter: drop-shadow(var(--leuchten-text));
}

.schrittfolge strong {
  font-family: var(--schrift-titel);
}


/* =====================================================================
   13. HINWEIS-MELDUNG (TOAST)
   ===================================================================== */
.hinweis {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: calc(100% - 32px);
  max-width: 460px;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: #0B0F14;
  color: #FFFFFF;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, 150%);
  opacity: 0;
  transition: transform 0.25s, opacity 0.25s;
  pointer-events: none;
}

.dunkel .hinweis {
  background: #FFFFFF;
  color: #0B0F14;
}

.hinweis--sichtbar {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.hinweis .icon {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 50%;
  background: #1FD6A0;
  color: #0B0F14;
}

.hinweis--fehler .icon {
  background: #FF8A80;
}

.hinweis p {
  margin: 0;
  font-size: 0.95rem;
}

.hinweis a {
  margin-left: 0.35rem;
  color: inherit;
  font-weight: 600;
}