/* =====================================================================
   rio-regalsystem – Corporate Design
   ---------------------------------------------------------------------
   Zentrale Stelle fuer Farben, Schriften, Groessen und Abstaende.
   Angelehnt an den Entwurf der neuen Produktdetailseite (header-footer-pdp).

   Aendern: nur die Werte im Block ":root" anpassen. Sie wirken auf
   - den neuen Kopf und Fuss (rio-chrome.css nutzt diese Werte)
   - alle Inhaltsbereiche mit der Klasse .rio-inhalt
   Seiten ohne .rio-inhalt (altes Tailwind-Layout) bleiben unveraendert.
   ===================================================================== */

/* ---------- Schriften ---------- */
@font-face { font-family: "Rio Inter"; src: url("fonts/Inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Rio Inter"; src: url("fonts/Inter-Italic-var.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

/* ---------- Design-Tokens ---------- */
:root {
  /* Farben */
  --rio-ink: #231f1c;          /* Ueberschriften, dunkle Flaechen (Kopf, Fuss) */
  --rio-ink-deep: #171412;     /* Leiste ganz oben */
  --rio-ink-soft: #4a433d;     /* Fliesstext */
  --rio-muted: #6e665e;        /* Nebentexte, kleine Labels */
  --rio-paper: #f8f6f2;        /* Seitenhintergrund (warmes Weiss) */
  --rio-surface: #ffffff;      /* Karten, Boxen */
  --rio-line: #e4ddd2;         /* Linien, Rahmen */
  --rio-birch: #ecdfc7;        /* Birke hell */
  --rio-birch-dark: #cdb68e;   /* Birke dunkel */
  --rio-red: #cd1719;          /* rio-Rot: Links, Buttons, Akzente */
  --rio-red-dark: #a51213;     /* rio-Rot beim Drueberfahren */
  --rio-ok: #2e7d4f;           /* Bestaetigung */

  /* Schriften */
  --rio-font-head: "Rio Inter", Inter, "Helvetica Neue", Arial, sans-serif;
  --rio-font-body: "Rio Inter", Inter, "Helvetica Neue", Arial, sans-serif;

  /* Schriftgroessen */
  --rio-fs-xs: .78rem;                               /* kleine Labels in Grossbuchstaben */
  --rio-fs-sm: .9rem;                                /* Hinweise, Bildunterschriften */
  --rio-fs-base: 1rem;                               /* Fliesstext */
  --rio-fs-lead: 1.125rem;                           /* Einleitungstext */
  --rio-fs-h4: 1.05rem;                              /* Zeilen in Akkordeons, kleine Titel */
  --rio-fs-h3: 1.25rem;                              /* Zwischentitel */
  --rio-fs-h2: clamp(1.5rem, 1.2rem + 1vw, 2rem);    /* Abschnittstitel */
  --rio-fs-h1: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem);/* Seitentitel */
  --rio-lh-text: 1.7;
  --rio-lh-head: 1.2;
  --rio-tracking-caps: .12em;                        /* Laufweite bei Grossbuchstaben */

  /* Abstaende */
  --rio-space-1: 4px;
  --rio-space-2: 8px;
  --rio-space-3: 12px;
  --rio-space-4: 16px;
  --rio-space-5: 24px;
  --rio-space-6: 32px;
  --rio-space-7: 48px;
  --rio-space-8: 64px;
  --rio-section: clamp(48px, 3vw + 32px, 80px);      /* Abstand zwischen Abschnitten */

  /* Breiten */
  --rio-wrap: 1240px;          /* maximale Inhaltsbreite */
  --rio-wrap-text: 1000px;     /* Breite fuer Textabschnitte */
  --rio-gutter: 16px;          /* Seitenrand */

  /* Form */
  --rio-radius: 3px;
  --rio-shadow: 0 12px 32px rgba(35, 31, 28, .12);
  /* Schichtkante: 12 mm Birke, 6 Lagen – das wiederkehrende Gestaltungselement */
  --rio-ply: repeating-linear-gradient(180deg, var(--rio-birch) 0 1px, var(--rio-birch-dark) 1px 2px);
}
@media (min-width: 768px) { :root { --rio-gutter: 24px; } }


/* =====================================================================
   Inhaltsbereiche (.rio-inhalt)
   Vereinheitlicht die Inhalte aus dem Backend (Inhaltsauswahl), auch wenn
   im Editor alte Tailwind-Klassen wie text-2xl hinterlegt sind.
   ===================================================================== */
.rio-inhalt {
  background: var(--rio-paper);
  color: var(--rio-ink-soft);
  font: 400 var(--rio-fs-base)/var(--rio-lh-text) var(--rio-font-body);
  padding-bottom: var(--rio-section);
  -webkit-font-smoothing: antialiased;
}

/* Abschnitte: gleiche Breite, gleiche Abstaende */
.rio-inhalt .rio-modul { max-width: var(--rio-wrap); margin-inline: auto; padding: var(--rio-section) var(--rio-gutter) 0; }
.rio-inhalt .rio-modul > div { max-width: none; margin: 0; padding: 0; }
.rio-inhalt .rio-modul--einspaltig > div,
.rio-inhalt .rio-modul--zweispaltig > div,
.rio-inhalt .rio-modul--akkordeon > div,
.rio-inhalt .rio-modul--akkordion > div { max-width: var(--rio-wrap-text); margin-inline: auto; }
.rio-inhalt .rio-modul--abstand { display: none; }   /* Abstaende kommen aus --rio-section */
.rio-inhalt .rio-modul--einspaltig:has(h1, h2, p.text-3xl, p.text-4xl, p.text-5xl) + .rio-modul { padding-top: var(--rio-space-5); }
.rio-inhalt .rio-modul--akkordeon + .rio-modul--akkordeon { padding-top: 0; }

/* Text */
.rio-inhalt p,
.rio-inhalt li {
  margin: 0 0 1em; padding: 0;
  font-family: var(--rio-font-body); font-size: var(--rio-fs-base); font-weight: 400; line-height: var(--rio-lh-text);
  color: var(--rio-ink-soft); text-transform: none; letter-spacing: normal;
}
.rio-inhalt p:last-child { margin-bottom: 0; }
.rio-inhalt strong, .rio-inhalt b { font-weight: 700; color: var(--rio-ink); }
.rio-inhalt ul { margin: 0 0 1em; padding-left: 1.2em; list-style: disc; }
.rio-inhalt ol { margin: 0 0 1em; padding-left: 1.4em; list-style: decimal; }
.rio-inhalt li { margin-bottom: .35em; }
.rio-inhalt img { max-width: 100%; height: auto; }

/* Links: nur echte Links sind rot */
.rio-inhalt a:not(.btn) { color: var(--rio-red); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.rio-inhalt a:not(.btn):hover { color: var(--rio-red-dark); }
.rio-inhalt a strong, .rio-inhalt a b { color: inherit; }
.rio-inhalt span[style*="color"] { color: inherit !important; }   /* im Editor eingefaerbter Text */

/* Ueberschriften */
.rio-inhalt h1, .rio-inhalt h2,
.rio-inhalt p.text-3xl, .rio-inhalt p.text-4xl, .rio-inhalt p.text-5xl, .rio-inhalt p.text-6xl {
  margin: 0 0 .6em; padding: 0;
  font-family: var(--rio-font-head); font-size: var(--rio-fs-h2); font-weight: 600; line-height: var(--rio-lh-head);
  letter-spacing: .03em; color: var(--rio-ink);
}
.rio-inhalt h1::before, .rio-inhalt h2::before,
.rio-inhalt p.text-3xl::before, .rio-inhalt p.text-4xl::before, .rio-inhalt p.text-5xl::before, .rio-inhalt p.text-6xl::before {
  content: ""; display: block; width: 36px; height: 6px; margin-bottom: var(--rio-space-4); background: var(--rio-ply);
}
.rio-inhalt [style*="center"]::before { margin-inline: auto; }
.rio-inhalt h3, .rio-inhalt h4, .rio-inhalt .rio-zwischentitel {
  display: block; margin: 0 0 .4em; padding: 0;
  font-family: var(--rio-font-head); font-size: var(--rio-fs-h3); font-weight: 600; line-height: 1.3; color: var(--rio-ink);
}
.rio-inhalt p + p > .rio-zwischentitel:first-child { margin-top: .8em; }

/* Zwei Spalten */
.rio-inhalt .rio-modul--zweispaltig .grid { column-gap: var(--rio-space-7); row-gap: 0; }

/* Drei Spalten */
.rio-inhalt .rio-modul--dreispaltig .grid { column-gap: var(--rio-space-6); row-gap: var(--rio-space-6); }
.rio-inhalt .rio-modul--dreispaltig .space-y-5 > * { margin: 0; }
.rio-inhalt .rio-modul--dreispaltig .space-y-5 > * + * { margin-top: var(--rio-space-3); }
/* ... mit Bild: als Karte (Bild oben, Titel, Liste) */
.rio-inhalt .rio-modul--dreispaltig .space-y-5:has(img) {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--rio-surface); border: 1px solid var(--rio-line); border-radius: var(--rio-radius);
}
.rio-inhalt .rio-modul--dreispaltig .space-y-5:has(img) > * { margin: 0; padding: 0 var(--rio-space-5); }
.rio-inhalt .rio-modul--dreispaltig .space-y-5:has(img) > div:has(img) { order: -1; padding: 0; }
.rio-inhalt .rio-modul--dreispaltig .space-y-5:has(img) > div:first-child:not(:has(img)) { padding-top: var(--rio-space-5); }
.rio-inhalt .rio-modul--dreispaltig .space-y-5:has(img) > div:last-child { padding-bottom: var(--rio-space-5); }
.rio-inhalt .rio-modul--dreispaltig img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .4s; }
.rio-inhalt .rio-modul--dreispaltig a:hover img { transform: scale(1.03); }
.rio-inhalt .rio-modul--dreispaltig div:has(> a > img) { overflow: hidden; }
.rio-inhalt .rio-modul--dreispaltig .space-y-5:has(img) p { text-align: left !important; }
.rio-inhalt .rio-modul--dreispaltig .space-y-5:has(img) p.text-primary-light {
  margin: 0 0 var(--rio-space-2);
  font: 600 var(--rio-fs-h3)/1.2 var(--rio-font-head); letter-spacing: var(--rio-tracking-caps); text-transform: uppercase; color: var(--rio-ink);
}
.rio-inhalt .rio-modul--dreispaltig .space-y-5:has(img) div:last-child p {
  margin: 0; padding: var(--rio-space-2) 0; border-top: 1px solid var(--rio-line);
}

/* Kleine Labels in Grossbuchstaben (im Editor als "text-primary-light uppercase") */
.rio-inhalt p.text-primary-light {
  font: 600 var(--rio-fs-xs)/1.3 var(--rio-font-head); letter-spacing: var(--rio-tracking-caps); text-transform: uppercase; color: var(--rio-muted);
}

/* Akkordeon */
.rio-inhalt .rio-modul--akkordeon article { margin: 0; border-top: 1px solid var(--rio-line); }
.rio-inhalt .rio-modul--akkordeon:not(:has(+ .rio-modul--akkordeon)) article { border-bottom: 1px solid var(--rio-line); }
.rio-inhalt .rio-modul--akkordeon header { align-items: center; gap: var(--rio-space-4); margin: 0; padding: 18px 0; background: none; }
.rio-inhalt .rio-modul--akkordeon header > div:first-child {
  font: 600 var(--rio-fs-h4)/1.35 var(--rio-font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--rio-ink);
}
.rio-inhalt .rio-modul--akkordeon header > div.text-brand-red,
.rio-inhalt .rio-modul--akkordeon header:hover > div:first-child { color: var(--rio-red); }
.rio-inhalt .rio-modul--akkordeon header svg { width: 16px; height: 16px; color: var(--rio-red); }
.rio-inhalt .rio-modul--akkordeon article > div > div { padding: 0 0 var(--rio-space-5); max-width: 72ch; }

@media (max-width: 767px) {
  .rio-inhalt .rio-modul--zweispaltig .grid > * + * { margin-top: 1em; }
}

/* 02.11.2026: Handy – Spaltenabstand nur ab Tablet. Sonst summieren sich die Abstände der 12 Rasterspalten
   (11 x 48 px) zu mehr als der Bildschirmbreite und die Seite lässt sich nach rechts schieben. */
@media (max-width: 767.98px) {
  .rio-inhalt .rio-modul--zweispaltig .grid,
  .rio-inhalt .rio-modul--dreispaltig .grid { column-gap: 0; }
}
/* Lange Wörter in großen Überschriften (z. B. „MÖGLICHKEITEN“) auf dem Handy trennen statt über den Rand laufen lassen */
@media (max-width: 767.98px) {
  h1, h2, h3 { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  .flex > div:has(> input) { min-width: 0; }
}

/* 02.11.2026: Schrift überall Inter (Wunsch Arnd), statt Josefin Sans (Überschriften) und Lato (Text).
   Laufweite wie im Corporate Design (Variante Inter). */
:root { --rio-track-text: -0.011em; --rio-track-display: -0.022em; --rio-track-head: -0.017em; --rio-track-caps: 0.06em; }
body { font-optical-sizing: auto; letter-spacing: var(--rio-track-text); }
h1, h2 { letter-spacing: var(--rio-track-display); }
h3, h4 { letter-spacing: var(--rio-track-head); }
.uppercase, .btn { letter-spacing: var(--rio-track-caps); }
/* Große Überschriften in Großbuchstaben: Inter ist breiter als Josefin, dort keine zusätzliche Sperrung */
h1.uppercase, h2.uppercase, .uppercase.text-3xl, .uppercase.text-4xl, .uppercase.text-5xl, .uppercase.text-6xl { letter-spacing: -0.01em; }
@media (max-width: 767.98px) {
  /* Inter läuft breiter als Josefin: sehr große Überschriften auf dem Handy etwas kleiner */
  h1.text-5xl, h1.text-6xl { font-size: 2.1rem; line-height: 1.15; }
  h1.text-4xl, h2.text-4xl, h2.text-5xl { font-size: 1.85rem; line-height: 1.2; }
  p, li { overflow-wrap: break-word; }
  .text-2xl, .text-3xl { -webkit-hyphens: auto; hyphens: auto; }
}