/* === Base / Reset (aus deiner style.css übernommen & gestrafft) === */
html {
  font-family: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #f8f9fa; /* dezenter Hintergrund, überall gleich */
  color: #0f172a;      /* gut lesbarer Body-Text */
}
img { max-width: 100%; height: auto; display: block; }
/* Tabellen-Basis */
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 700; vertical-align: middle; }
.card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* === Ende Base / Reset === */


/* === CSS-Variablen (belassen, falls du Akzentfarbe nutzen willst) === */
:root {
  --brand: #1f6feb;
  --muted: #64748b;
  --ring-track: #eef2fb;
  --main-color: #ffd633; /* historisch, falls noch genutzt */
}


/* === Typografie & Abstände === */
h1, h2, h3, .title {
  font-family: "Barlow Condensed", "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.2px;
}
html, body { font-feature-settings: "lnum" 1; } /* lining numerals */


/* Ein einfacher, responsiver Wrapper (falls gebraucht) */
.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 16px;
  margin: 0 auto;
}


/* === Formulare & Buttons (neutral gehalten) === */
label { font-size: .95rem; color: #0f172a; }

input[type="text"], input[type="search"], input[type="email"],
input[type="number"], select, textarea {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid #dce3ee;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #0f172a;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, .15);
}

button, .btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  border-radius: 10px;
  border: 1px solid #dce3ee;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
}
button:hover, .btn:hover { background: #f3f6fb; }
button.primary, .btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
button.primary:hover, .btn.primary:hover {
  filter: brightness(1.05);
}

/* Schmale Formularlayouts */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media (min-width: 700px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
  .form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
}


/* === Tabellen – moderate Optik, nicht zu dominant === */
.table {
  width: 100%;
  border: 1px solid #e8eef7;
  border-radius: 12px;
  overflow: hidden; /* Rundung für den Rahmen */
  background: #fff;
}
.table thead th {
  background: #f6f9fe;
  color: #334155;
  font-size: .95rem;
  padding: .75rem .9rem;
  border-bottom: 1px solid #e8eef7;
}
.table tbody td {
  padding: .7rem .9rem;
  border-bottom: 1px solid #eef3fb;
  color: #0f172a;
}
.table tr:hover td { background: #fafcff; }

/* Historische gelbe Tabellenoptik falls noch irgendwo benötigt:
   .table--accent thead th { background: var(--main-color); color: #fff; }
*/


/* === Utilities === */
.center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.text-center { text-align: center; }
.hide-mobile { display: none !important; }
@media (min-width: 781px) { .hide-mobile { display: initial !important; } }

.two-line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* auf 2 Zeilen clampen */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Einfache Grid-Utility (falls gebraucht, ersetzt das alte .grid*) */
.grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(12, 1fr);
}
.col-12 { grid-column: span 12; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }
@media (max-width: 900px) {
  .col-md-12 { grid-column: span 12; }
  .col-md-6  { grid-column: span 6; }
  .col-md-4  { grid-column: span 4; }
}

/* Abstand nach Topbar, wenn Seiten KEINE eigene Layout-Logik haben
   (unsere UseCase-Seiten haben eigenes Layout, also meist nicht nötig) */
.page-pad {
  padding: 26px 16px;
}


/* === Mobile Feinschliff === */
@media (max-width: 780px) {
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.15rem; }
  .container { padding: 0 12px; }
}


/* ====== Lokale Barlow-Fonts einbinden (TTF) ====== */
@font-face{
  font-family:"Barlow";
  src:url("/fonts/Barlow/Barlow-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url("/fonts/Barlow/Barlow-Medium.ttf") format("truetype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url("/fonts/Barlow/Barlow-SemiBold.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url("/fonts/Barlow/Barlow-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}

/* (optional) Italics, falls du Kursiv wirklich brauchst
@font-face{ font-family:"Barlow"; src:url("/fonts/Barlow/Barlow-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
*/

/* Condensed für Headlines */
@font-face{
  font-family:"Barlow Condensed";
  src:url("/fonts/Barlow_Condensed/BarlowCondensed-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow Condensed";
  src:url("/fonts/Barlow_Condensed/BarlowCondensed-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}


/* —— Schrift global durchsetzen —— */
html, body {
  font-family:"Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif !important;
}
h1, h2, h3, .title {
  font-family:"Barlow Condensed","Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing:.2px;
}