/* Kunden-Stylesheet (Beispielkunde "Muster GmbH").
   Dient dem K9-Test: dieselbe Datei wird von der Website UND von der
   Puck-Leinwand geladen. */
:root {
  --farbe-akzent: #b4531f;
  --farbe-text: #232323;
  --farbe-hell: #f5f0ea;
  --schrift: Georgia, "Times New Roman", serif;
  --inhaltsbreite: 1140px;

  /* Marken-Farbtokens des Kunden (T1: Titel nutzt Token 4, keine Freifarbe). */
  --theme-farbe-1: #232323;
  --theme-farbe-2: #6b4423;
  --theme-farbe-3: #8a5a2b;
  --theme-farbe-4: #b4531f;
  --theme-farbe-5: #d97b3f;
  --theme-farbe-6: #2f5d4f;
  --theme-farbe-7: #3f6b5d;
  --theme-farbe-8: #5a5045;
}
body { margin: 0; font-family: var(--schrift); color: var(--farbe-text); }
.abschnitt { width: 100%; }
.abschnitt__innen {
  max-width: var(--inhaltsbreite);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.baustein-titel { font-size: 2rem; margin: 0 0 .5rem; line-height: 1.2; }
.baustein-text { font-size: 1.05rem; line-height: 1.6; }
.baustein-text a { color: var(--farbe-akzent); }
.baustein-absatz { font-size: 1.05rem; line-height: 1.6; }
.baustein-absatz a { color: var(--farbe-akzent); }
.baustein-bild img { display: block; max-width: 100%; height: auto; }
.aufklapp { border: 1px solid var(--farbe-akzent); border-radius: 8px; padding: .75rem 1rem; margin-top: 1rem; }
.aufklapp > summary { cursor: pointer; font-weight: 700; color: var(--farbe-akzent); }
.aufklapp.offen { background: var(--farbe-hell); }
.aufklapp__inhalt a { color: var(--farbe-akzent); }

/* Spalten (T1/T2: Verhaeltnis kommt aus data-verhaeltnis am Wrapper).
   KEIN flex-wrap hier: die Breiten summieren sich inkl. gap auf > 100%,
   das wuerde sonst schon auf Desktop-Breite umbrechen (Fund beim
   Screenshot-Beleg). Umbruch passiert bewusst nur in der Mobil-Regel unten. */
.spalten { display: flex; gap: 2rem; width: 100%; }
.spalte { min-width: 0; }
.spalte-links, .spalte-rechts, .spalte-dritte { display: flex; flex-direction: column; gap: 1rem; }

.baustein-checkliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.baustein-checkliste li { display: flex; align-items: flex-start; gap: .5rem; }
.baustein-checkliste .icon-check { color: var(--farbe-akzent); flex: none; margin-top: .2em; }

.baustein-button {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--farbe-akzent); color: #fff; text-decoration: none;
  padding: .7rem 1.3rem; border-radius: 6px; font-weight: 600; width: fit-content;
}
.baustein-button .icon-pfeil { color: #fff; }

@media (max-width: 700px) {
  .abschnitt__innen { padding-left: 1rem; padding-right: 1rem; }
  .spalten { flex-direction: column; }
  .spalte { flex-basis: 100% !important; }
}

/* Leiste der Uebungs-Vorschau (gehoert nicht zum Kundendesign). */
.vorschauleiste {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center;
  justify-content: space-between;
  background: #1f2a37; color: #fff;
  font: 14px/1.4 system-ui, sans-serif;
  padding: .6rem 1rem;
}
.vorschauleiste a { color: #ffd9a8; }

/* BEHELF FUER VP1 — gehoert NICHT ins Produkt.
   Ein Baustein, der versehentlich NEBEN einem Abschnitt statt darin landet
   (per Ziehen moeglich, Befund der Bedienprobe), stuende sonst ohne Seitenrand
   buendig an der Fensterkante. Hier wird er wenigstens in der Inhaltsbreite
   gehalten, damit ein unbeaufsichtigter Bedientest nicht an einer Optik
   scheitert, deren Ursache wir kennen.
   WARUM NUR BEHELF: Das kaschiert ungueltige DATEN mit Darstellung. Die
   richtige Loesung steht schon im Plan (§5, Adapter als einzige
   Beruehrungsflaeche) und im Kommentar in src/puck.config.tsx: Der Adapter
   packt verirrte Bausteine BEIM SPEICHERN in einen Abschnitt ein. Diese
   Regel gehoert mit der Adapter-Umsetzung in P3b ersatzlos entfernt und darf
   in KEIN Kundenprojekt kopiert werden (AGENTS.md: keine site-spezifische
   CSS ausserhalb der Tokens).
   Diese Datei ist das Stylesheet des erfundenen Beispielkunden im Spike —
   sie wird nirgendwohin ausgeliefert. */
main > .baustein-titel,
main > .baustein-absatz,
main > .baustein-bild,
main > .baustein-checkliste,
main > .baustein-button,
main > .baustein-text,
main > .aufklapp,
main > .spalten,
main > div > .baustein-titel,
main > div > .baustein-absatz,
main > div > .baustein-bild,
main > div > .baustein-checkliste,
main > div > .baustein-button,
main > div > .baustein-text,
main > div > .aufklapp,
main > div > .spalten {
  max-width: var(--inhaltsbreite);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}