/* ═══════════════════════════════════════════════════════════════════════════
   EUROSTOFF — theme.css
   Markenschicht über dem SSI Endoskeleton. base.css bleibt unberührt.

   GESTALTUNGSIDEE
   Die alte Seite war weiß mit rotem Akzent (EUROSTOFF in Rot) und dem Foto der
   Möbelbezugsstoffe als Kopfbild. Das bleibt: weißer Grund, Rot als einzige
   Markenfarbe, Foto im Kopfbereich der Startseite.

   KONTRAST
   Das Rot des Bestands (#ff0000) erreicht auf Weiß nur 4,0:1 und ist als
   Text oder Knopf knapp unter der Grenze (WCAG AA verlangt 4,5:1). Deshalb
   etwas tiefer: #c40000 = 6,3:1 auf Weiß, weiße Schrift darauf ebenfalls 6,3:1.
   Im dunklen Farbschema dient ein hellerer Partner (#ff6b6b).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. MARKEN-TOKENS (überschreiben base.css und colors/red.css) ───────── */
:root {
  --primary:         #c40000;
  --primary-dark:    #8f0000;
  --primary-light:   #e03a3a;
  --primary-rgb:     196, 0, 0;

  --bg:              #ffffff;
  --bg-alt:          #f6f3f3;
  --bg-dark:         #2a2626;

  --text:            #2f2b2b;
  --text-muted:      #595454;
  --text-light:      #433f3f;
  --text-on-primary: #ffffff;
  --heading:         #1f1b1b;

  --border:          rgba(31, 27, 27, 0.14);
  --card-bg:         #ffffff;
  --shadow:          rgba(31, 27, 27, 0.10);
  --focus:           #1a6bff;
}

/* ─── 2. DUNKLES FARBSCHEMA ──────────────────────────────────────────────── */
/* shared.js hängt einen Umschalter an und folgt der Systemeinstellung. */
html[data-theme="dark"] {
  --bg:              #161414;
  --bg-alt:          #201d1d;
  --bg-dark:         #0e0c0c;
  --text:            #e9e6e6;
  --text-muted:      #b5b0b0;
  --text-light:      #d0cccc;
  --heading:         #ffffff;
  --card-bg:         #201d1d;
  --border:          rgba(255, 255, 255, 0.16);
  --primary:         #ff6b6b;
  --primary-dark:    #ff9a9a;
  --primary-light:   #ff8a8a;
  --primary-rgb:     255, 107, 107;
  --text-on-primary: #1a0000;
}

/* ─── 3. TYPOGRAFIE ──────────────────────────────────────────────────────── */
h1, h2, h3, h4,
.hero-title,
.section-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.section-title { text-wrap: balance; }

/* Überschriften in Markenrot – wie der Schriftzug am Geschäft */
.section-title,
.section-title a { color: var(--primary); }

/* Sprungziele nicht unter die fixe Navigation rutschen lassen */
[id] { scroll-margin-top: calc(var(--nav-height) + 1rem); }

/* Text-Links im Inhalt: Farbe plus Unterstreichung, nie Farbe allein */
.section-text a,
.section-lead a,
.mehr-links a,
.adressblock a,
.karte-hinweis a,
.section-title a {
  text-underline-offset: 0.2em;
}

.align-start { align-items: start; }

/* ─── 4. NAVIGATION ──────────────────────────────────────────────────────── */
/* Ohne Logo-Bild steht die Wortmarke wie auf der alten Seite in Rot. */
.nav-logo { min-height: 2.75rem; display: inline-flex; align-items: center; }

.nav-logo,
.nav-logo strong,
.footer-logo strong {
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-logo,
.nav-logo:hover,
.nav-logo strong { color: var(--primary); }

.nav-links a { font-size: var(--fs-sm); }

/* ─── 5. HERO (Startseite) ───────────────────────────────────────────────── */
/* Das Kopfbild der alten Seite: aufgerollte Möbelbezugsstoffe. */
.hero-bg--stoffe {
  background-image: url("img/kopf-bezugsstoffe.webp");
  background-position: center;
}

/* Dunkler Schleier, damit weiße Schrift auf dem bunten Muster lesbar bleibt */
.hero--banner .hero-bg::after {
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.66) 100%);
}

.hero--banner .hero-title {
  color: #ffffff;
  text-wrap: balance;
  text-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.45);
}

/* Zweiter Knopf im Kopfbild: das Baukasten-Muster kennt nur hero--image,
   hier steht der Knopf aber auf dem Foto, also weiße Schrift und weißer Rand */
.hero--banner .btn-outline,
.hero--banner .btn-secondary,
.hero--banner .btn-ghost {
  border-color: rgba(255, 255, 255, 0.75);
  color: #ffffff;
}

.hero--banner .btn-outline:hover,
.hero--banner .btn-secondary:hover,
.hero--banner .btn-ghost:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* ─── 6. START, KREMS, KONTAKT ───────────────────────────────────────────── */
.bildlink { display: block; }

.bildlink img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.adressblock {
  font-style: normal;
  font-size: var(--fs-md);
  line-height: 1.85;
  padding: var(--space-xl);
  background: var(--bg-alt);
  border-left: 0.3rem solid var(--primary);
  border-radius: var(--radius-sm);
  color: var(--text);
}

.adressblock strong {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--fs-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--heading);
}

.adressblock a { color: var(--primary); }

.zeiten-titel {
  margin: var(--space-xl) 0 var(--space-sm);
  font-size: var(--fs-lg);
}

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

.zeiten th,
.zeiten td {
  padding: 0.55rem 0.75rem 0.55rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-base);
}

.zeiten th { white-space: nowrap; color: var(--heading); font-weight: 700; }

.mehr-links { text-align: center; font-size: var(--fs-sm); }

.mehr-links a { color: var(--text-muted); }

/* Galerie: Vorschaubilder sind 640 px breit, das große Bild lädt erst in der Lightbox */
.gallery-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 40rem) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

.gallery-item img:focus-visible {
  outline: 0.1875rem solid var(--focus);
  outline-offset: 0.125rem;
}

/* ─── 7. KARTE (Zwei-Klick-Lösung) ───────────────────────────────────────── */
.karte {
  position: relative;
  margin: 0 0 var(--space-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  overflow: hidden;
  /* Höhe vorab festlegen, damit beim Nachladen nichts springt */
  aspect-ratio: 16 / 9;
}

.karte-bild,
.karte-rahmen {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.karte-bild { object-fit: cover; }

.karte-laden {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  white-space: nowrap;
  min-height: 2.75rem;
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--primary);
  color: var(--text-on-primary);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
  transition: background 0.2s;
}

.karte-laden:hover { background: var(--primary-dark); }

.karte-laden:focus-visible {
  outline: 0.1875rem solid var(--focus);
  outline-offset: 0.125rem;
}

.karte-hinweis {
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-muted);
}

.karte-hinweis a { color: var(--heading); }

/* ─── 8. SORTIMENT ───────────────────────────────────────────────────────── */
.sprungnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.sprungnav a { text-transform: uppercase; letter-spacing: 0.08em; }

.preistabelle {
  width: 100%;
  max-width: 38rem;
  margin: var(--space-lg) auto 0;
  border-collapse: collapse;
  border-top: 3px solid var(--primary);
  border-bottom: 3px solid var(--primary);
}

.preistabelle td {
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--text);
}

.preistabelle tbody tr:last-child td { border-bottom: none; }

.preistabelle td:last-child {
  width: 1%;
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

.preistabelle tbody tr:nth-child(even) { background: var(--bg-alt); }
.preistabelle tbody tr:hover { background: var(--border); }

.rabatt-text {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--heading);
}

.rabatt {
  max-width: 26rem;
  margin: var(--space-lg) auto 0;
}

.rabatt div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-md);
}

.rabatt dt { color: var(--text); }

.rabatt dd { margin: 0; font-weight: 700; color: var(--primary); }

/* Rabattleiste auf der Startseite: groß und gleich unter dem Hero */
.banner-strip a.banner-grid { color: inherit; text-decoration: none; }
.banner-strip .banner-item { padding: var(--space-lg); }
.banner-strip .banner-val { font-size: var(--fs-3xl); }
.banner-strip .banner-label { font-size: var(--fs-sm); font-weight: 700; color: var(--heading); }
.banner-strip a.banner-grid:hover .banner-item { background: var(--bg); }

/* Hingucker „Neues Sortiment" auf der Startseite: rote Fläche mit
   wanderndem Lichtstreifen, leicht pulsierender Schaltfläche */
#neu-sortiment {
  position: relative;
  display: block;
  overflow: hidden;
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius, 0);
  transition: transform 0.3s;
}
#neu-sortiment::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: neu-glanz 4.5s ease-in-out infinite;
  pointer-events: none;
}
#neu-sortiment .section-tag,
#neu-sortiment .section-title,
#neu-sortiment .section-lead { color: #fff; margin-left: auto; margin-right: auto; }
#neu-sortiment .section-tag { opacity: 0.85; letter-spacing: 0.2em; }
#neu-sortiment .btn {
  margin-top: var(--space-md);
  background: #fff;
  color: var(--primary);
  border-color: #fff;
  animation: neu-puls 2.4s ease-in-out infinite;
}
#neu-sortiment:hover { transform: translateY(-3px); }
@keyframes neu-glanz { 0% { left: -60%; } 60%, 100% { left: 130%; } }
@keyframes neu-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  #neu-sortiment::after, #neu-sortiment .btn { animation: none; }
  #neu-sortiment:hover { transform: none; }
}

/* ─── 9. RECHTSTEXTE ─────────────────────────────────────────────────────── */
/* Impressum und Datenschutz werden gelesen, nicht überflogen — deshalb
   engere Zeilenlänge, mehr Durchschuss, klare Zwischenüberschriften. */
.rechtstext { max-width: 44rem; }

.rechtstext h2 {
  font-size: var(--fs-md);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.rechtstext p,
.rechtstext li,
.rechtstext dd,
.rechtstext dt {
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--text-muted);
  max-width: 68ch;
}

.rechtstext .section-lead { color: var(--text-light); font-size: var(--fs-md); }

.rechtstext ul { padding-left: 1.1rem; margin-bottom: var(--space-md); }

.rechtstext li { margin-bottom: var(--space-sm); }

.rechtstext strong { color: var(--text); }

.rechtstext a { color: var(--heading); text-underline-offset: 0.2em; }

.rechtstext-stand { margin-top: var(--space-2xl); font-size: var(--fs-xs); color: var(--text-muted); }

.pflichtangaben dt { color: var(--text); font-weight: 700; margin-top: var(--space-md); }

.pflichtangaben dd { margin: 0; }

/* Offener Punkt, der vor dem Livegang zu klären ist — sichtbar und
   unübersehbar, aber nicht als Fehlermeldung gestaltet. */
.angabe-fehlt {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border: 2px dashed var(--primary);
  border-radius: var(--radius-sm);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--heading);
  font-weight: 600;
}

/* ─── 10. FUSSZEILE ──────────────────────────────────────────────────────── */
.site-footer { background: var(--bg-dark); }

.site-footer .footer-logo strong { color: #ffffff; }

/* Spaltenüberschriften: helleres Rot, damit sie auf dem dunklen Fuß lesbar bleiben (≥ 4,5:1) */
.site-footer .footer-col h4 { color: #ff9b9b; }

/* Im dunklen Farbschema ist der Knopfgrund hell: dunkle Schrift statt Weiß */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .karte-laden {
  color: var(--text-on-primary);
}

/* Sprunglink: im dunklen Schema ist sein Grund hellblau, dafür braucht er dunkle Schrift */
html[data-theme="dark"] .skip-link { color: #0b1020; }