/* CuC Baumeister GmbH — eigene Stylesheet, kein externer CDN.
   Nachbildung der im HTML benutzten Tailwind-Klassen mit Tailwind-Standardwerten.
   Lesbar, editierbar, ohne Build-Tool. */

/* ============================================================
   1. Reset + CSS Custom Properties
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; line-height: 1.5; }

body {
  margin: 0;
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #1f2937;
  background: #fff;
  line-height: 1.5;
}

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

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:root {
  --cuc-teal:       #19a8b3;
  --cuc-teal-dark:  #0e7c84;
  --cuc-teal-light: #e6f5f6;
}

/* Custom-Klassen */
.mono           { font-family: "JetBrains Mono", "SF Mono", Consolas, monospace; }
.text-cuc       { color: var(--cuc-teal); }
.text-cuc-dark  { color: var(--cuc-teal-dark); }
.bg-cuc         { background-color: var(--cuc-teal); }
.bg-cuc-dark    { background-color: var(--cuc-teal-dark); }
.bg-cuc-light   { background-color: var(--cuc-teal-light); }
.border-cuc     { border-color: var(--cuc-teal); }
.gradient-teal  { background: linear-gradient(135deg, var(--cuc-teal) 0%, var(--cuc-teal-dark) 100%); }
.terminal       { background: #0d1117; border: 1px solid #1f2937; }

/* ============================================================
   2. Layout: display, position, flex, grid
   ============================================================ */

.hidden       { display: none; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.grid         { display: grid; }

.flex-wrap        { flex-wrap: wrap; }
.items-center     { align-items: center; }
.items-start      { align-items: start; }
.justify-between  { justify-content: space-between; }
.justify-center   { justify-content: center; }

.sticky { position: sticky; }
.top-0  { top: 0; }
.z-50   { z-index: 50; }

.overflow-x-auto { overflow-x: auto; }
.backdrop-blur   { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.transition      { transition: all 150ms ease-in-out; }

/* ============================================================
   3. Sizing
   ============================================================ */

.w-3       { width: 0.75rem; }
.w-12      { width: 3rem; }
.w-full    { width: 100%; }

.h-1   { height: 0.25rem; }
.h-3   { height: 0.75rem; }
.h-10  { height: 2.5rem; }
.h-12  { height: 3rem; }
.h-14  { height: 3.5rem; }

.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ============================================================
   4. Spacing — margin
   ============================================================ */

.mt-3  { margin-top: 0.75rem; }
.mt-10 { margin-top: 2.5rem; }

.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }

.ml-3 { margin-left: 0.75rem; }

/* ============================================================
   5. Spacing — padding
   ============================================================ */

.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem;    padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px-8 { padding-left: 2rem;    padding-right: 2rem; }

.py-1  { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2  { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4  { padding-top: 1rem;    padding-bottom: 1rem; }
.py-8  { padding-top: 2rem;    padding-bottom: 2rem; }
.py-12 { padding-top: 3rem;    padding-bottom: 3rem; }
.py-20 { padding-top: 5rem;    padding-bottom: 5rem; }
.py-24 { padding-top: 6rem;    padding-bottom: 6rem; }

.pb-3 { padding-bottom: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pt-6 { padding-top: 1.5rem; }

/* ============================================================
   6. Grid + Flex Spacing
   ============================================================ */

.gap-1   { gap: 0.25rem; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-12  { gap: 3rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-y-4  { row-gap: 1rem; }

/* ============================================================
   7. Typography
   ============================================================ */

.text-xs  { font-size: 0.75rem;  line-height: 1rem; }
.text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl  { font-size: 1.25rem;  line-height: 1.75rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem;  line-height: 2.5rem; }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

.tracking-tight  { letter-spacing: -0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

.uppercase   { text-transform: uppercase; }
.italic      { font-style: italic; }
.text-center { text-align: center; }

/* ============================================================
   8. Colors — Background
   ============================================================ */

.bg-white       { background-color: #fff; }
.bg-gray-50     { background-color: #f9fafb; }
.bg-gray-900    { background-color: #111827; }

.bg-white\/10      { background-color: rgba(255, 255, 255, 0.1); }
.bg-red-500\/60    { background-color: rgba(239, 68, 68, 0.6); }
.bg-yellow-500\/60 { background-color: rgba(234, 179, 8, 0.6); }
.bg-green-500\/60  { background-color: rgba(34, 197, 94, 0.6); }

/* ============================================================
   9. Colors — Text
   ============================================================ */

.text-white     { color: #fff; }
.text-gray-300  { color: #d1d5db; }
.text-gray-400  { color: #9ca3af; }
.text-gray-500  { color: #6b7280; }
.text-gray-600  { color: #4b5563; }
.text-gray-700  { color: #374151; }
.text-gray-800  { color: #1f2937; }
.text-gray-900  { color: #111827; }
.text-sky-400     { color: #38bdf8; }
.text-emerald-400 { color: #34d399; }

.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/90 { color: rgba(255, 255, 255, 0.9); }

/* ============================================================
   10. Borders + Radius
   ============================================================ */

.border    { border-width: 1px; border-style: solid; border-color: #e5e7eb; }
.border-2  { border-width: 2px; border-style: solid; border-color: #e5e7eb; }
.border-b  { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e5e7eb; }
.border-l  { border-left-width: 1px; border-left-style: solid; border-left-color: #e5e7eb; }
.border-t  { border-top-width: 1px; border-top-style: solid; border-top-color: #e5e7eb; }
.border-t-4 { border-top-width: 4px; border-top-style: solid; border-top-color: #e5e7eb; }

.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-800 { border-color: #1f2937; }
.border-white    { border-color: #fff; }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }

.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* ============================================================
   11. Shadows
   ============================================================ */

.shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-md  { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* ============================================================
   12. Hover-States
   ============================================================ */

.hover\:bg-cuc-dark:hover    { background-color: var(--cuc-teal-dark); }
.hover\:bg-cuc-light:hover   { background-color: var(--cuc-teal-light); }
.hover\:bg-gray-100:hover    { background-color: #f3f4f6; }
.hover\:bg-white:hover       { background-color: #fff; }
.hover\:text-cuc:hover       { color: var(--cuc-teal); }
.hover\:text-cuc-dark:hover  { color: var(--cuc-teal-dark); }
.hover\:text-white:hover     { color: #fff; }
.hover\:underline:hover      { text-decoration: underline; }
.hover\:shadow-md:hover      { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }

/* ============================================================
   13. Responsive — Breakpoint md (>=768px)
   ============================================================ */

@media (min-width: 768px) {
  .md\:hidden    { display: none; }
  .md\:block     { display: block; }
  .md\:flex      { display: flex; }

  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }

  .md\:py-28    { padding-top: 7rem; padding-bottom: 7rem; }

  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl { font-size: 3rem;    line-height: 1; }
  .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
}

/* ============================================================
   14. Default-Grid-Verhalten — alle grids ohne explizite cols
   bekommen 1 Spalte (wird durch md:grid-cols-* ueberschrieben)
   ============================================================ */

.grid:not([class*="grid-cols-"]) { grid-template-columns: 1fr; }

/* Ergaenzungen 2026-06-12: im Original-Subset fehlende, aber von den Seiten verwendete Utilities */
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.p-4 { padding: 1rem; }
.ml-6 { margin-left: 1.5rem; }
.list-disc { list-style-type: disc; }
.border-l-4 { border-left-width: 4px; border-left-style: solid; }