/* ═══════════════════════════════════════════════════════════ */
/*  stylesheet.css – Structural framework                    */
/*  Uses variables from globals.css (Single Source of Truth)  */
/*  Generated by website-prototype-generator                 */
/*                                                           */
/*  REGELN:                                                  */
/*  - Jede Section MUSS .section nutzen                      */
/*  - Content MUSS in .container eingebettet sein            */
/*  - Buttons NUR über .btn + Variante                       */
/*  - Typografie NUR über definierte Klassen/Heading-Tags    */
/*  - KEINE Inline-Styles, KEINE harten Pixelwerte          */
/* ═══════════════════════════════════════════════════════════ */

@import "tailwindcss";

/* ── Base Resets ───────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  color: var(--color-foreground);
  background-color: var(--color-background);
  line-height: var(--text-base-line-height);
  font-size: var(--text-base);
}

/* ── Section & Container (PFLICHT-Bausteine) ────── */
/*  Jede Seite MUSS aus <section class="section"> bestehen.  */
/*  Innerhalb jeder Section MUSS ein <div class="container"> */
/*  den Content umschließen.                                 */

.section {
  position: relative;
  width: 100%;
  padding-block: var(--spacing-section);
}

.section--sm {
  padding-block: var(--spacing-2xl);
}

.section--lg {
  padding-block: var(--spacing-5xl);
}

.section--hero {
  padding-block: var(--spacing-5xl) var(--spacing-section);
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.section--flush {
  padding-block: 0;
}

.container {
  width: 100%;
  max-width: var(--spacing-container);
  margin-inline: auto;
  padding-inline: var(--spacing-container-padding);
}

.container--narrow {
  max-width: 48rem;
}

.container--wide {
  max-width: 90rem;
}

/* ── Headings (Typography System) ─────────────────── */
/*  Headlines MÜSSEN über HTML-Tags (h1–h6) oder     */
/*  .heading-* Klassen gestylt werden.                */
/*  VERBOTEN: style={{ fontSize: ... }} oder harte px */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  color: var(--color-foreground);
}

h1, .heading-1 {
  font-size: var(--text-5xl);
  line-height: var(--text-5xl-line-height);
  letter-spacing: var(--text-5xl-letter-spacing);
}

h2, .heading-2 {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl-line-height);
  letter-spacing: var(--text-4xl-letter-spacing);
}

h3, .heading-3 {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-line-height);
  letter-spacing: var(--text-3xl-letter-spacing);
}

h4, .heading-4 {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-line-height);
  letter-spacing: var(--text-2xl-letter-spacing);
}

h5, .heading-5 {
  font-size: var(--text-xl);
  line-height: var(--text-xl-line-height);
  letter-spacing: var(--text-xl-letter-spacing);
}

h6, .heading-6 {
  font-size: var(--text-lg);
  line-height: var(--text-lg-line-height);
  letter-spacing: var(--text-lg-letter-spacing);
}

/* ── Body Text Utilities ───────────────────────────── */

.text-xs   { font-size: var(--text-xs);   line-height: var(--text-xs-line-height); }
.text-sm   { font-size: var(--text-sm);   line-height: var(--text-sm-line-height); }
.text-base { font-size: var(--text-base); line-height: var(--text-base-line-height); }
.text-lg   { font-size: var(--text-lg);   line-height: var(--text-lg-line-height); }
.text-xl   { font-size: var(--text-xl);   line-height: var(--text-xl-line-height); }

.text-muted {
  color: var(--color-muted-foreground);
}

.lead {
  font-size: var(--text-xl);
  line-height: var(--text-xl-line-height);
  color: var(--color-muted-foreground);
}

/* ── Button System (EINZIGER erlaubter Weg) ──────── */
/*  Buttons MÜSSEN eine der folgenden Klassen nutzen: */
/*  .btn-primary  – Hauptaktion (CTA)                 */
/*  .btn-secondary – Sekundäraktion                   */
/*  .btn-outline  – Umrandeter Button                 */
/*  .btn-ghost    – Textartig, minimal                */
/*  VERBOTEN: Eigene bg/text-Kombinationen auf <button> */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--text-base-line-height);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-background);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  filter: brightness(0.9);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-background);
  border-color: var(--color-secondary);
}

.btn-secondary:hover {
  filter: brightness(0.9);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-background);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-foreground);
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: var(--color-muted);
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--text-sm);
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--text-lg);
}

/* ── Card Component ─────────────────────────────── */

.card {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

/* ── Links ───────────────────────────────────────── */

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ── Images ──────────────────────────────────────── */

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

/* ── Focus ───────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Selection ──────────────────────────────────── */

::selection {
  background-color: var(--color-primary);
  color: var(--color-background);
}

/* ── Spacing Utilities ──────────────────────────── */

.stack-xs > * + * { margin-top: var(--spacing-xs); }
.stack-sm > * + * { margin-top: var(--spacing-sm); }
.stack-md > * + * { margin-top: var(--spacing-md); }
.stack-lg > * + * { margin-top: var(--spacing-lg); }
.stack-xl > * + * { margin-top: var(--spacing-xl); }
.stack-2xl > * + * { margin-top: var(--spacing-2xl); }

/* ── Divider ───────────────────────────────────── */

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--spacing-2xl);
}