/*!
 * Bootstrap Slim-Bundle (Customized for uweknott.de / parafilm.de)
 * Beinhaltet: Reboot, Grid (Container, Row, Col), Flex-Utilities, Spacing & Forms.
 * Entfernt: Modals, Tooltips, Popover, Carousel, Scrollspy, komplexe Navs.
 */

/* Basis-Konfiguration: Definiert Bootstrap-Farben und verbindet globale Variablen (--font-sans) mit dem Framework. */
:root {
  --bs-blue: #0d6efd; --bs-indigo: #6610f2; --bs-purple: #6f42c1; --bs-pink: #d63384; --bs-red: #dc3545;
  --bs-orange: #fd7e14; --bs-yellow: #ffc107; --bs-green: #198754; --bs-teal: #20c997; --bs-cyan: #0dcaf0;
  --bs-black: #000; --bs-white: #fff; --bs-gray: #6c757d; --bs-primary: #0d6efd; --bs-secondary: #6c757d;
  --bs-body-font-family: var(--font-sans); --bs-body-font-size: 1rem; --bs-body-line-height: 1.5;
  --bs-body-color: #fafafa; --bs-body-bg: #000;
}

/* REBOOT & RESET */
/* Box-Sizing Fix: Sorgt dafür, dass Padding und Border in die Breite eines Elements eingerechnet werden. */
*, ::after, ::before { box-sizing: border-box; }

/* Basis-HTML Einstellungen: Verhindert Text-Skalierung auf Mobile und entfernt Tap-Highlight-Farbe. */
html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

/* Body-Reset: Setzt Margin auf 0 und übernimmt globale Schrift-Einstellungen. */
body { margin: 0; font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); font-weight: 400; line-height: var(--bs-body-line-height); color: var(--bs-body-color); text-align: var(--bs-body-text-align); background-color: var(--bs-body-bg); }

/* Typografie-Reset: Definiert Abstände und Farben für Überschriften. */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; color: var(--heading-color); }
p { margin-top: 0; margin-bottom: 1rem; }
ul { margin-top: 0; margin-bottom: 1rem; }

/* Link-Styling: Nutzt die globale Akzentfarbe. */
a { color: var(--accent-color); text-decoration: none; }
a:hover { color: #15bb62; }
img { vertical-align: middle; }

/* GRID SYSTEM (Zentral für dein Layout) */
/* Container: Zentriert Inhalte und definiert seitliche Abstände (Gutters). */
.container, .container-fluid, .container-xl { width: 100%; padding-right: var(--bs-gutter-x, .75rem); padding-left: var(--bs-gutter-x, .75rem); margin-right: auto; margin-left: auto; }

/* Breakpoints: Legt die maximale Breite des Containers fest. */
@media (min-width: 1200px) { .container-xl, .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* Row: Flex-Container für Spalten. Gleicht Container-Padding durch negative Margins aus. */
.row { display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--bs-row-gap, 0)); margin-right: calc(-.5 * var(--bs-gutter-x, 1.5rem)); margin-left: calc(-.5 * var(--bs-gutter-x, 1.5rem)); }

/* Grid-Items: Basis-Eigenschaften für alle Spalten innerhalb einer Row. */
.row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); margin-top: var(--bs-row-gap, 0); }

/* Spalten-Logik: */
/* Volle Breite (Mobile First Standard). */
.col-12 { flex: 0 0 auto; width: 100%; }

/* Tablet (md): 50% Breite (2-spaltig). */
@media (min-width: 768px) { .col-md-6 { flex: 0 0 auto; width: 50%; } }

/* Desktop (lg): Verschiedene Spaltenaufteilungen (1/3, ca. 60%, 2/3, 3/4). */
@media (min-width: 992px) {
  .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
}

/* FLEX & DISPLAY UTILITIES */
/* Helferklassen für Display-Eigenschaften (wichtig für Layout-Steuerung). */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }

/* Versteckt Elemente auf Screens unter 1200px (z.B. Desktop-Nav). */
@media (max-width: 1199px) { .d-xl-none { display: none !important; } }

/* Flexbox-Ausrichtung: Horizontal und Vertikal. */
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; }

/* SPACING (Marge & Padding) */
/* Abstands-Helfer: mt (margin-top), mb (margin-bottom), pt (padding-top), px (padding horizontal). */
.mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: 1rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-3 { padding-top: 1rem !important; }
.px-1 { padding-right: .25rem !important; padding-left: .25rem !important; }
.gy-4 { --bs-row-gap: 1.5rem; } /* Vertical Gap im Grid */

/* TEXT UTILITIES */
/* Textausrichtung und Farbe. */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-light { color: #f8f9fa !important; }

/* FORMS (Für dein Kontaktformular und Prompt-Feld) */
/* Basis-Styling für Inputs: Dunkler Hintergrund, weißer Text, subtiler Border. */
.form-control {
  display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5;
  color: #fff; background-color: #1a1a1a; border: 1px solid #333; border-radius: .375rem; transition: border-color .15s ease-in-out;
}
/* Fokus-Effekt: Färbt Border in Akzentfarbe. */
.form-control:focus { border-color: var(--accent-color); outline: 0; background-color: #222; }

/* BUTTON BASIS */
/* Standard-Button-Reset: Transparent, Pointer-Cursor, sanfte Transition. */
.btn {
  display: inline-block; font-weight: 400; line-height: 1.5; text-align: center; vertical-align: middle;
  cursor: pointer; user-select: none; background-color: transparent; border: 1px solid transparent;
  padding: .375rem .75rem; font-size: 1rem; border-radius: .375rem; transition: all .3s ease;
}

/* Versteckt den Hamburger auf Desktops (größer als 1200px) */
/* Sicherstellung, dass mobile Elemente auf großen Screens nicht sichtbar sind. */
@media (min-width: 1200px) {
  .mobile-nav-toggle {
    display: none !important;
  }
}