/*  Projekt-Gestaltung: Panto — Furniture Landing Page.
 *
 *  Umsetzung des Figma-Designs „Panto" auf der mabu:bricks-Grundgestaltung.
 *  Farben (#e58411 / #1e1e1e / #ffffff) kommen aus den Website-Einstellungen;
 *  hier stehen nur die Dinge, die das Design anders will als das Fundament.
 */

:root {
  --rundung: 1.25rem;          /* Panto rundet großzügig (20px) */
  --breite: 80rem;             /* 1280px Satzspiegel wie im Entwurf */
}

/* Panto-Detailfarbe: Produktnamen und Preise sind Tiefblau, kein Schwarz. */
.produkt-name, .produkt-preis { color: #0d1b39; }
.produkt-plus { background: #0d1b39; }

/* ---- Kopf über dem Titelbild -------------------------------------------
   Nur wenn die Seite mit einem Titelbild beginnt (Klasse kopf-ueber-bild,
   kommt vom Server), legt sich der Kopf transparent darüber und wird weiß.
   Auf allen anderen Seiten gilt der normale, lesbare Kopf der
   Grundgestaltung — weiße Schrift auf weißem Grund gibt es nicht. */

.kopf.kopf-ueber-bild {
  position: absolute; left: 0; right: 0; top: 0;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}
/* "Versteckt sich, erscheint beim Hochscrollen": dafür muss der Kopf
   fixiert sein — ein absoluter scrollt weg und kommt nie wieder. Unterwegs
   bekommt er dunklen Grund, damit die weiße Schrift lesbar bleibt. */
.kopf.kopf-ueber-bild.kopf-verhalten-einblenden {
  position: fixed;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.kopf.kopf-ueber-bild.kopf-unterwegs { background: rgba(30, 30, 30, 0.96); }
.kopf-ueber-bild .marke,
.kopf-ueber-bild .navigation a { color: #fff; }
.kopf-ueber-bild .navigation a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.kopf-ueber-bild .menue-knopf span { background: #fff; }
.nav-zweig > a::after { opacity: 0.8; }

/* Das mobile Ausklappmenü braucht wieder Grund unter den weißen Zeilen. */
@media (max-width: 46rem) {
  .kopf-ueber-bild .navigation { background: rgba(30, 30, 30, 0.96); border-bottom: 0; }
  .kopf-ueber-bild .navigation a { border-color: rgba(255, 255, 255, 0.16); }
}
/* Das Unterseiten-Aufklappmenü ebenso. */
.kopf-ueber-bild .unter-menue { background: rgba(30, 30, 30, 0.96); border-color: rgba(255, 255, 255, 0.16); }
.kopf-ueber-bild .unter-menue a { border-color: rgba(255, 255, 255, 0.16); }

/* ---- Titelbereich: riesige zentrierte Zeile wie im Entwurf (80px) ------ */

.hero h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 5rem); letter-spacing: -0.01em; }
.hero .gross { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.4rem); }

/* ---- Große Abschnitts-Überschriften (42px, fester Satz) ---------------- */

h2, .einzel-gross { font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.6rem); }

/* ---- Knöpfe als Pillen ------------------------------------------------- */

.knopf { border-radius: 999px; padding: 0.85rem 1.9rem; }

/* ---- Bilder runden wie die Karten -------------------------------------- */

.einzel-bild img { border-radius: var(--rundung); }

/* ---- Fußzeile: Spaltentitel in Orange, ruhige Linkliste ---------------- */

.fuss-raster h3, .fuss-raster h4 { color: var(--akzent); font-size: 1.02rem; font-weight: 500; margin-bottom: 0.9rem; }
/* Die Marke in der ersten Spalte: groß und dunkel wie im Kopf. */
.fuss-raster .fliesstext strong { font-size: 1.5rem; letter-spacing: 0.01em; }
.fuss-raster .fliesstext a {
  color: var(--text); opacity: 0.8; text-decoration: none;
}
.fuss-raster .fliesstext a:hover { opacity: 1; color: var(--akzent); }
.fuss-raster .fliesstext p { margin-bottom: 0.55em; }