/* Datei: /css/site.css  – Frontend Styles (Light, Rot/Schwarz/Weiß) */

/* ===================== Variablen ===================== */
:root{
  --bg:#ffffff;
  --fg:#1b1b1b;
  --muted:#666;
  --accent:#e31b1b;
  --line:#e6e6e6;
  --maxw:1280px;

  /* Header-Subtitel-Farbe */
  --header-sub:#fff;

  /* Content */
  --content-bg:#ffffff;
  --content-line:#e6e6e6;
  --content-muted:#666;
  --content-accent:#e31b1b;

  /* Seitenrandbilder (optional; kannst du leer lassen) */
  --side-bg-left: url("/backend/img/side-left.jpg");
  --side-bg-right: url("/backend/img/side-right.jpg");
  --side-bg-color: #f6f6f6;
}

/* ===================== Base / Layout ===================== */
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font:14px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  height:100%;
}

.site-wrap{
  max-width:var(--maxw);
  margin:0 auto;
  background:#fff;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position: relative;
  z-index: 1; /* über Side-Backgrounds */
}

/* Optionale Seitenränder mit Bildern */
body{ background: var(--side-bg-color); }
body::before, body::after{
  content:"";
  position: fixed;
  top:0; height:100vh; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-position:center center; background-size:cover;
}
body::before{
  left:0; width:calc((100vw - var(--maxw)) / 2);
  background-image: var(--side-bg-left);
  background-position:left center;
}
body::after{
  right:0; width:calc((100vw - var(--maxw)) / 2);
  background-image: var(--side-bg-right);
  background-position:right center;
}
@media (max-width: 1280px){
  body::before, body::after{ display:none; }
}

/* ===================== Header (Frontend nutzt gleiche Struktur) ===================== */
.admin-header{
  height:150px;
  background: url("/backend/img/header-bg.svg") center/cover no-repeat #fff;
  display:flex; align-items:center; border-bottom:1px solid var(--line);
}
.admin-header .inner{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand-logo{ width:auto; height:150px; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; }
.brand-title{ font-size:35px; font-weight:700; letter-spacing:.5px; margin:0; }
.brand-sub{ font-size:18px; font-weight:700; color:var(--header-sub); }

@media (max-width: 720px){
  .admin-header{ height:auto; padding:12px 0; }
  .brand-logo{ height:80px; }
  .brand-title{ font-size:24px; }
  .brand-sub{ font-size:14px; }
}

/* ===================== TOP-NAV (Frontend) ===================== */
/* Nutzt deine Klasse: .article-topnav-sub */
.article-topnav-sub{
  margin:12px 0 20px;
  border-bottom:1px solid var(--line);
  text-align:left;
  background:#fff;
}
.article-topnav-sub ul{
  list-style:none;
  display:flex; justify-content:flex-start; align-items:flex-end; flex-wrap:wrap;
  gap:10px; padding:0; margin:0;
}
.article-topnav-sub a{
  display:inline-block;
  padding:8px 12px;
  color:var(--fg);
  text-decoration:none;
  border:1px solid transparent;
  border-radius:4px;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.article-topnav-sub a:hover{
  border-color:var(--accent);
  background: rgba(227,27,27,.08);
  text-decoration:none;
}
.article-topnav-sub a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.article-topnav-sub a.active{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}
.article-topnav-sub a.active:hover{
  border-color:var(--accent);
  background:#c41010;
}

/* ===================== Content ===================== */
.content{
  background: var(--content-bg);
  border: 1px solid var(--content-line);
  border-radius: 8px;
  box-shadow: 0 1px 10px rgba(0,0,0,.05);
  padding: 18px;
  margin: 16px 20px 24px;
}
.content-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:14px; border-bottom:1px solid var(--content-line); padding-bottom:10px;
}
.content-title{ font-size:22px; font-weight:700; margin:0; }
.content-actions{ display:flex; gap:10px; }

.content-body{ display:block; }

/* Karten (falls du Content in Cards darstellen willst) */
.card{
  border:1px solid var(--content-line);
  border-radius:8px; background:#fff;
}
.card > .card-head{ padding:10px 12px; border-bottom:1px solid var(--content-line); font-weight:600; }
.card > .card-body{ padding:12px; }

/* =========================================================
   Content-Blöcke 1–3: flach, minimal, CI: Rot/Schwarz/Weiß
   ========================================================= */

/* Hilfsvariablen (falls nicht vorhanden) */
:root{
  --gm-red: #d6001c;
  --gm-line: #e9e9e9;
  --gm-grey: #f5f5f5;
}

/* Grundlayout */
.content-body{
  display:flex;
  flex-direction:column;
  gap:28px;             /* gleichmäßige Abstände zwischen den Blöcken */
}

/* Einheitlicher Block-Rahmen (ohne „Box“-Optik) */
.content-body .page-block,
.content-body details.collapsible{
  background:#fff;      /* Basis: weiß – wird unten für 1/3 überschrieben */
  border:1px solid var(--gm-line);
  border-left:none;
  border-right:none;
  padding:28px 36px;
  position:relative;
}

/* —————————————————————————————
   Block 1 (hellgrau, Titel links)
   ————————————————————————————— */
.content-body > :nth-of-type(1){
  background: #fff;
}
.content-body > :nth-of-type(1)::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width:1px; background:var(--gm-red);   /* roter Streifen links */
}
.content-body > :nth-of-type(1) h3,
.content-body > :nth-of-type(1) summary{
  text-align:left;
}

/* —————————————————————————————
   Block 2 (weiß, Titel rechts)
   ————————————————————————————— */
.content-body > :nth-of-type(2){
  background:var(--gm-grey);
}
.content-body > :nth-of-type(2)::after{
  content:"";
  position:absolute; inset:0 0 0 auto;
  width:1px; background:var(--gm-red);   /* roter Streifen rechts */
}
.content-body > :nth-of-type(2) h3,
.content-body > :nth-of-type(2) summary{
  text-align:right;
}

/* —————————————————————————————
   Block 3 (hellgrau, Titel links)
   ————————————————————————————— */
.content-body > :nth-of-type(3){
  background: #fff;
}
.content-body > :nth-of-type(3)::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width:1px; background:var(--gm-red);   /* roter Streifen links */
}
.content-body > :nth-of-type(3) h3,
.content-body > :nth-of-type(3) summary{
  text-align:left;
}

/* Details-Body einheitlich paddings */
details.collapsible > summary{ cursor:pointer; list-style:none; }
details.collapsible .collapsible-body{ margin-top:12px; }

/* Feine Linie oben/unten für klare Gliederung */
.content-body > * + *{ border-top:1px solid var(--gm-line); }

/* Responsive */
@media (max-width: 820px){
  .content-body .page-block,
  .content-body details.collapsible{ padding:22px 20px; }
}

/* Tabellen */
.table{
  width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--content-line);
}
.table th, .table td{
  padding:8px 10px; border-bottom:1px solid var(--content-line); text-align:left;
}
.table thead th{ background:#fafafa; font-weight:600; }
.table tr:hover td{ background:#fff6f6; }

/* Hinweise / Alerts */
.notice{
  border:1px solid var(--content-line); border-left:4px solid var(--content-accent);
  background:#fffafa; padding:10px 12px; border-radius:6px; color:var(--content-muted);
}

/* Buttons/Links im Content */
button, .btn{
  display:inline-block; padding:8px 12px; border-radius:6px;
  border:1px solid var(--content-accent);
  background: var(--content-accent); color:#fff; text-decoration:none; cursor:pointer;
}
button:hover, .btn:hover{ background:#c41010; border-color:#c41010; }
.btn-outline{
  background:#fff; color:var(--content-accent); border-color:var(--content-accent);
}
.btn-outline:hover{ background:#ffeaea; }

/* Collapsible-Abschnitte (für content2/content3) */
.collapsible{
  border:1px solid var(--content-line); border-radius:8px; background:#fff; margin-top:12px;
}
.collapsible > summary{
  cursor:pointer; list-style:none; padding:10px 12px;
  border-bottom:1px solid var(--content-line); font-weight:600;
}
.collapsible[open] > summary{ background:#fff6f6; }
.collapsible .collapsible-body{ padding:12px; }

/* ===================== Footer ===================== */
.admin-footer{
  background: url("/backend/img/footer-bg.svg") center/cover no-repeat #fff;
  border-top:1px solid var(--line);
  margin-top:auto;
}
.admin-footer .inner{
  padding:18px 20px; display:flex; align-items:center; justify-content:space-between;
  min-height:70px;
}
.footer-left,.footer-right{ font-size:13px; color:var(--muted); }

/* ===================== Responsive Helpers ===================== */
@media (max-width: 960px){
  .content{ margin: 12px 12px 20px; padding:14px; }
  .content-title{ font-size:20px; }
  .brand-title{ font-size:22px; }
}

@media (max-width: 600px){
  .content-header{ flex-direction:column; align-items:flex-start; gap:8px; }
  .content-actions{ width:100%; flex-wrap:wrap; }
  .article-topnav-sub ul{ gap:6px; }
  .article-topnav-sub a{ padding:6px 10px; }
}

/* ===================== Utility ===================== */
img{ max-width:100%; height:auto; }
hr{ border:0; border-top:1px solid var(--line); margin:16px 0; }

/* Footer-Navigation */
.footer-right { display:flex; align-items:center; }
.footer-nav ul{
  display:flex; gap:12px; list-style:none; padding:0; margin:0;
  flex-wrap:wrap; justify-content:flex-end;
}
.footer-nav li{ position:relative; }
.footer-nav li + li::before{
  content:"·";
  margin-right:12px;
  color:var(--muted);
}
.footer-nav a{
  color:var(--muted); text-decoration:none;
  transition: color .15s ease;
}
.footer-nav a:hover{ color:var(--content-accent); }
@media (max-width: 600px){
  .footer-nav ul{ gap:8px; }
  .footer-nav li + li::before{ margin-right:8px; }
}

/* ======================  DIV-BASED GRIDS  ====================== */
.grid{
  display: grid !important;
  gap: clamp(12px, 2vw, 20px) !important;
}
.grid > .col{
  min-width: 0;     /* erlaubt flexiblen Inhalt */
}

/* Spaltenkombis */
.grid.cols-1-1     { grid-template-columns: 1fr 1fr !important; }
.grid.cols-1-1-1   { grid-template-columns: 1fr 1fr 1fr !important; }
.grid.cols-2-1     { grid-template-columns: 2fr 1fr !important; }
.grid.cols-1-2     { grid-template-columns: 1fr 2fr !important; }

/* Mobil: 1 Spalte */
@media (max-width: 820px){
  .grid{ grid-template-columns: 1fr !important; }
}

/* ======================  UL-COMPAT (falls genutzt)  ====================== */
ul.grid{
  display: grid !important;
  gap: clamp(12px, 2vw, 20px) !important;
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
ul.grid > li{
  margin: 0 !important;
  padding: 0 !important;
}
ul.grid.grid-1-1    { grid-template-columns: 1fr 1fr !important; }
ul.grid.grid-1-1-1  { grid-template-columns: 1fr 1fr 1fr !important; }
ul.grid.grid-2-1    { grid-template-columns: 2fr 1fr !important; }
ul.grid.grid-1-2    { grid-template-columns: 1fr 2fr !important; }
@media (max-width: 820px){
  ul.grid{ grid-template-columns: 1fr !important; }
}

/* ===== Div-Grids robust machen ===== */

/* Basis */
.page-block .grid{
  display: grid !important;
  gap: clamp(12px, 2vw, 20px) !important;
  align-items: start;
}

/* Spaltenvarianten (mit minmax-Fix gegen Overflows) */
.page-block .grid.cols-1-1     { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.page-block .grid.cols-1-1-1   { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
.page-block .grid.cols-2-1     { grid-template-columns: minmax(0,2fr) minmax(0,1fr) !important; }
.page-block .grid.cols-1-2     { grid-template-columns: minmax(0,1fr) minmax(0,2fr) !important; }

/* Spaltenelemente */
.page-block .grid > .col{
  min-width: 0;   /* erlaubt Zeilenumbruch in schmalen Spalten */
}

/* In-Grid-Headlines immer links (überschreibt Block-2-Rechtsausrichtung) */
.content-body > :nth-of-type(2) .grid h3{
  text-align: left !important;
}

/* Fallback für sehr alte Browser (kein Grid) */
@supports not (display: grid){
  .page-block .grid{ display:flex !important; gap: 20px; flex-wrap: wrap; }
  .page-block .grid.cols-1-1-1 > .col{ flex: 1 1 calc(33.333% - 20px); }
  .page-block .grid.cols-1-1   > .col{ flex: 1 1 calc(50% - 20px); }
  .page-block .grid.cols-2-1   > .col:nth-child(1){ flex: 2 1 0; }
  .page-block .grid.cols-2-1   > .col:nth-child(2){ flex: 1 1 0; }
  .page-block .grid.cols-1-2   > .col:nth-child(1){ flex: 1 1 0; }
  .page-block .grid.cols-1-2   > .col:nth-child(2){ flex: 2 1 0; }
}
/* ===== sichtbare Spalten: Rahmen + leichter Schatten ===== */

/* DIV-Variante */
.page-block .grid > .col {
  background: #fff;
  border: 1px solid #e3e3e3;      /* hellgrau */
  border-radius: 0;                /* keine Rundungen */
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  padding: 16px;
}

/* UL-Variante kompatibel halten */
.page-block ul.grid > li {
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  padding: 16px;
}

/* Optional: leichte Hover-Betonung im Frontend */
.page-block .grid > .col:hover,
.page-block ul.grid > li:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
/* Gleich hohe Spalten je Zeile erzwingen */
.page-block .grid{
  align-items: stretch !important; /* statt start */
}

/* Optional: Inhalt hübsch verteilen und Rand mitwachsen lassen */
.page-block .grid > .col,
.page-block ul.grid > li{
  display: flex;               /* Inhalt vertikal innerhalb der Box */
  flex-direction: column;
}

/* Falls du unten Button/Link „klebst“ */
.page-block .grid > .col > *:last-child,
.page-block ul.grid > li > *:last-child{
  margin-top: auto;            /* schiebt letztes Element nach unten */
}

/* ===== Borderless-Variante (keine Border, kein Shadow) ===== */

/* DIV-Variante */
.page-block .grid.grid--flat > .col {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important; /* oder #fff, wenn du weiße Flächen willst */
  padding: 16px; /* Abstand behalten – bei Bedarf auf 0 setzen */
}

/* UL-Variante */
.page-block ul.grid.grid--flat > li {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 16px;
}

/* Gleich hohe Spalten bleiben aktiv (aus vorheriger Lösung) */
.page-block .grid { align-items: stretch !important; }
.page-block .grid > .col,
.page-block ul.grid > li { display:flex; flex-direction:column; }
.page-block .grid > .col > *:last-child,
.page-block ul.grid > li > *:last-child { margin-top:auto; }

/* === Mobile: unter 820px IMMER 1 Spalte, egal welches Grid === */
@media (max-width: 820px){
  /* DIV-Grids */
  .grid,
  .grid.cols-1-1,
  .grid.cols-1-1-1,
  .grid.cols-2-1,
  .grid.cols-1-2,
  .page-block .grid,
  .page-block .grid.cols-1-1,
  .page-block .grid.cols-1-1-1,
  .page-block .grid.cols-2-1,
  .page-block .grid.cols-1-2 {
    grid-template-columns: 1fr !important;
  }

  /* UL-Grids */
  ul.grid,
  ul.grid.grid-1-1,
  ul.grid.grid-1-1-1,
  ul.grid.grid-2-1,
  ul.grid.grid-1-2,
  .page-block ul.grid,
  .page-block ul.grid.grid-1-1,
  .page-block ul.grid.grid-1-1-1,
  .page-block ul.grid.grid-2-1,
  .page-block ul.grid.grid-1-2 {
    grid-template-columns: 1fr !important;
  }
}

/* Kontakt-Form Feinschliff */
.gm-kontakt fieldset{border:1px solid var(--content-line);border-radius:8px;background:#fff;margin-bottom:14px}
.gm-kontakt legend{padding:0 6px;font-weight:700}
.gm-kontakt p{margin:10px 0}
.gm-kontakt input,.gm-kontakt textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:6px;font:inherit}
.gm-kontakt input:focus,.gm-kontakt textarea:focus{outline:2px solid rgba(227,27,27,.25);border-color:#e31b1b}
.gm-kontakt .actions{margin-top:12px}

/* ===== Social Rail – seitlich “hängend” (keine Strukturänderung nötig) ===== */
.social-rail{
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  margin: 0; padding: 0; list-style: none;
}
.social-rail li{ margin: 0 0 8px 0; }
.social-rail li:last-child{ margin-bottom: 0; }

/* Link-Stil als hängender Button */
.social-rail .sr{
  display: inline-block;
  background: #e31b1b;           /* Rot deiner Seite */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px 8px 40px;     /* Platz links für Icon */
  border: 1px solid #b91313;      /* dunkleres Rot */
  border-radius: 0 6px 6px 0;
  box-shadow: 2px 2px 6px rgba(0,0,0,.25);
  transform: translateX(-6px);    /* leicht “hängend” aus dem Rand */
  transition: transform .15s ease, background .15s ease;
  white-space: nowrap;
}
.social-rail .sr:hover{ transform: translateX(0); background:#c41010; }

/* Icon per ::before – keine zusätzlichen Spans nötig */
.social-rail .sr::before{
  content: "";
  position: absolute;
  margin-left: -28px;             /* sitzt im linken Polster */
  width: 20px; height: 20px;
  top: 50%; transform: translateY(-50%);
  background: #fff;               /* Füllfarbe für das Mask-Icon */
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}

/* Position/Optik wie gehabt … (deine bestehenden Social-Rail-Regeln bleiben) */

/* Nur die Icon-Zuordnung via ::before */
.social-rail .sr::before{
  content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; background:none;
  -webkit-mask-size:contain; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat;
          mask-size:contain;         mask-position:center;         mask-repeat:no-repeat;
}

/* ===== Social Rail (seitlich hängend, responsive) ===== */
.social-rail{
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 1000; margin: 0; padding: 0; list-style: none;
}
.social-rail li{ margin: 0 0 8px 0; }
.social-rail li:last-child{ margin-bottom: 0; }

.social-rail .sr{
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: #fff; font-weight: 600; white-space: nowrap;
  background: #e31b1b; border: 1px solid #b91313;
  border-radius: 0 6px 6px 0;
  box-shadow: 2px 2px 6px rgba(0,0,0,.25);
  padding: 8px 12px 8px 8px;
  transform: translateX(-6px);
  transition: transform .15s ease, background .15s ease;
}
.social-rail .sr:hover{ transform: translateX(0); background: #c41010; }

/* ECHTES ICON (SVG-Datei) */
.social-rail .sr-ico{
  width: 22px; height: 22px; display: block;
  background: #fff; border-radius: 50%; padding: 4px; /* weißer Kreis hinter dem SVG */
}
.social-rail .sr-label{ line-height: 1; }

/* Mobil: unten links als Reihe, Labels ausblenden (nur Icons) */
@media (max-width: 700px){
  .social-rail{
    left: 12px; bottom: 12px; top: auto; transform: none;
    display: flex; gap: 8px;
  }
  .social-rail li{ margin: 0; }
  .social-rail .sr{
    border-radius: 6px; padding: 8px;
  }
  .social-rail .sr-label{ display: none; }
}