/* === Variablen === */
:root { --swiss-red: #ff0000; }

/* === Base === */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #111827; /* text-gray-900 */
  background: #fff;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Utilities (nur was gebraucht wird) === */
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

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

.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-16 { margin-top: 4rem; }

.p-4 { padding: 1rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; }
.text-3xl { font-size: 1.875rem; }
.md\:text-4xl { font-size: 2.25rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-gray-700 { color: #374151; }
.text-white { color: #fff; }
.bg-swiss-red { background: var(--swiss-red); }
.bg-white { background: #fff; }

.rounded-lg { border-radius: .5rem; }
.rounded-xl { border-radius: .75rem; }
.rounded-2xl { border-radius: 1rem; }

.border { border: 1px solid #e5e7eb; }
.border-b { border-bottom: 1px solid #e5e7eb; }
.border-t { border-top: 1px solid #e5e7eb; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.05); }

.w-28 { width: 7rem; }
.h-28 { height: 7rem; }
.object-cover { object-fit: cover; }
.min-w-0 { min-width: 0; }
.shrink-0 { flex-shrink: 0; }

.space-y-10 > * + * { margin-top: 2.5rem; }

/* 3-Zeilen-Textkürzung */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === Responsive für md: auf <900px einkolumnig === */
@media (max-width: 900px){
  .md\:grid-cols-2 { grid-template-columns: 1fr; }
  .md\:text-4xl { font-size: 2rem; }
}

/* ===================================================== */
/* ===============   COCA: SIDEBAR LAYOUT   ============ */
/* ===================================================== */

/* Layout: Sidebar links, Inhalt rechts */
.coca-layout {
  display: grid;
  grid-template-columns: 260px 1fr;  /* Sidebar 260px */
  align-items: stretch;              /* Sidebar-Balken bis Seitenende */
  min-height: 100vh;
}

/* Sidebar-Hintergrund; NICHT sticky – so bleibt der Balken durchgehend */
.coca-sidebar {
  background: var(--swiss-red);
  color: #fff;
  position: relative;
  min-height: 100%;
  z-index: 1;
}

/* Nur der INHALT der Sidebar klebt oben */
.coca-sidebar-inner {
  position: sticky;
  top: 0;
  padding: 20px;
}

/* Logo – Desktop füllt Sidebarbreite (abzgl. Padding).
   Mobile größer, linksbündig. */
.coca-logo-wrap { display: block; }
.coca-logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  max-height: 140px;   /* Desktop-Deckel; bei Bedarf anpassen */
}

/* Menü links unter dem Logo */
.coca-menu { margin-top: 16px; }
.coca-menu ul { list-style: none; margin: 0; padding: 0; }
.coca-menu li + li { margin-top: 8px; }
.coca-menu a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.35;
  padding: 6px 0;
}
.coca-menu a:hover { text-decoration: underline; }
.coca-menu a.is-active { font-weight: 700; }

/* Inhalt rechts mit Lesemargen */
.coca-content { padding: 40px 60px; }

/* Footer-Optik bleibt wie gehabt (über .container etc.) */

/* ====== Mobile ====== */
@media (max-width: 900px){
  .coca-layout { grid-template-columns: 1fr; }
  .coca-sidebar { position: relative; min-height: auto; }
  .coca-sidebar-inner { position: static; padding: 16px 20px; }
  .coca-logo { max-height: none; height: 80px; width: auto; } /* größer & linksbündig */
  .coca-content { padding: 20px; }
}


/* === Roter Balken über die volle Seitenhöhe (Desktop) === */
.coca-layout { position: relative; }
.coca-layout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;     /* reicht automatisch bis Seitenende */
  left: 0;
  width: 260px;  /* Breite deiner Sidebar-Spalte */
  background: var(--swiss-red);
  z-index: 0;
}

/* Sidebar-Hintergrund transparent – Inhalt liegt über dem Balken */
.coca-sidebar {
  background: transparent !important;
  position: relative;
  z-index: 1;
}
.coca-content { position: relative; z-index: 1; } /* Sicherheit, falls was überlappt */

/* Mobile: Balken nicht vollflächig (sonst wäre ganze Seite rot).
   Stattdessen bekommt die Sidebar oben wieder ihren roten Hintergrund. */
@media (max-width: 900px) {
  .coca-layout::before { display: none; }
  .coca-sidebar { background: var(--swiss-red) !important; }
}