/* Datei: /backend/css/admin.css (light theme) */
:root{
  --bg:#ffffff;           /* primär weiß */
  --fg:#1b1b1b;           /* Text dunkel */
  --muted:#5a5a5a;
  --accent:#e31b1b;       /* rot */
  --line:#dcdcdc;         /* feine Linien */
  --maxw:1280px;
  --header-sub:#ffffff;
}

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

.site-wrap{max-width:var(--maxw);margin:0 auto;background:#fff}

/* Header */
.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}
.brand-sub{font-size:18px;font-weight:700;color:var(--header-sub)}

/* ===================== TOP-NAV (SUB) – LIGHT, ROT/SCHWARZ AKZENTE ===================== */
/* In /backend/css/admin.css einfügen oder ersetzen */

:root{
  --accent: #e31b1b;   /* Rot */
  --fg: #1b1b1b;       /* Text dunkel */
  --muted: #666;
  --line: #dcdcdc;     /* Linien */
}

.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;                 /* bricht sauber um bei wenig Breite */
  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;   /* Grundoptik wie Vorlage */
  border-radius: 4px;               /* leicht modernisiert */
  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); /* dezente Rotfläche */
  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);     /* statt #333 jetzt Akzentfarbe */
  background: var(--accent);
  color: #fff;
}

.article-topnav-sub a.active:hover{
  border-color: var(--accent);
  background: #c41010;             /* dunklerer Rotton beim Hover */
}

/* Hauptinhalt */
.admin-content{padding:20px}

/* Footer – variable Höhe, gleiche Optik */
.admin-footer{
  background: url("/backend/img/footer-bg.svg") center/cover no-repeat;
}
.admin-footer .inner{
  padding:18px 20px; display:flex; align-items:center; justify-content:space-between;
  min-height:70px;   /* variabel, nur Unterkante sichern */
}
.footer-left,.footer-right{opacity:.9;font-size:13px}

/* Content */
.admin-content{padding:20px}

/* Footer */
.admin-footer{
  background: url("/backend/img/footer-bg.svg") center/cover no-repeat #fff;
  border-top:1px solid var(--line);
}
.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)}

/* Vollhöhe für Flex-Layout */
html, body { height: 100%; }

/* Wrapper als Flex-Column über die volle Höhe */
.site-wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;        /* oder 100svh für Mobile: min-height: 100svh; */
  display: flex;
  flex-direction: column;
}

/* Hauptbereich wächst, schiebt Footer nach unten */
.admin-content{
  padding: 20px;
  flex: 1 0 auto;           /* WICHTIG: nimmt Resthöhe ein */
}

/* Footer klebt unten */
.admin-footer{
  background: url("/backend/img/footer-bg.svg") center/cover no-repeat #fff;
  border-top: 1px solid var(--line);
  margin-top: auto;         /* WICHTIG: Footer ans Ende */
}
.admin-footer .inner{
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
}
:root{
  --maxw: 1280px;
  --side-bg-left: url("/backend/img/side-left.jpg");
  --side-bg-right: url("/backend/img/side-right.jpg");
  --side-bg-color: #f6f6f6; /* Fallback-Farbe für Ränder */
}

/* Seitenhintergrund (Fallbackfarbe) */
body{ background: var(--side-bg-color); }

/* Side-Backgrounds nur in den Randbereichen außerhalb der 1280px */
body::before,
body::after{
  content:"";
  position: fixed;          /* bleibt beim Scrollen stehen */
  top:0; height:100vh;
  z-index: 0;               /* hinter allem */
  pointer-events:none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;   /* oder 'contain', je nach Motiv */
}

/* Linke Seite */
body::before{
  left: 0;
  width: calc((100vw - var(--maxw)) / 2);
  background-image: var(--side-bg-left);
  background-position: left center;   /* ← hier geändert */
  background-repeat: no-repeat;
  background-size: cover;
}

/* Rechte Seite */
body::after{
  right: 0;
  width: calc((100vw - var(--maxw)) / 2);
  background-image: var(--side-bg-right);
  background-position: right center;  /* ← hier geändert */
  background-repeat: no-repeat;
  background-size: cover;
}

/* Der zentrale Wrapper muss vor den Side-Images liegen */
.site-wrap{ position: relative; z-index: 1; }

/* Auf kleineren Screens (<= max-Breite) Ränder ausblenden */
@media (max-width: 1280px){
  body::before, body::after{ display:none; }
}

/* ===================== CONTENT-BEREICH ===================== */
/* In /backend/css/admin.css ans Ende einfügen */

:root{
  --content-bg:#ffffff;
  --content-line:#e6e6e6;
  --content-muted:#666;
  --content-accent:#e31b1b;
}

/* Haupt-Wrapper im <main> */
.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 0 24px;
}

/* Kopfzeile im Content (Titel + Aktionen) */
.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:20px; font-weight:700; margin:0;
}
.content-actions{ display:flex; gap:10px; }

/* Content-Body */
.content-body{ display:block; }

/* Grid-Helfer */
.content-grid{
  display:grid; gap:14px;
  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: 960px){
  .col-6,.col-4,.col-3{ grid-column: span 12; }
}

/* Karten */
.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;
}

/* Tabellen clean */
.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; /* leichter Rot-Hauch */
}

/* Formulare */
.form-row{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.form-row > label{ display:block; font-weight:600; }
input[type="text"], input[type="password"], input[type="email"], select{
  padding:8px 10px; border:1px solid var(--content-line); border-radius:6px; min-width:240px;
}
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;
}

/* Hinweise */
.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);
}

/* ===================== FIELDSETS & LEGENDS (LIGHT, ROT/SCHWARZ) ===================== */
/* In /backend/css/admin.css ergänzen */

:root{
  --fs-bg:#ffffff;
  --fs-line:#e6e6e6;
  --fs-accent:#e31b1b;
  --fs-muted:#666;
  --fs-radius:8px;
}

/* Basis */
fieldset{
  margin:16px 0;
  padding:14px 14px 16px;
  border:1px solid var(--fs-line);
  border-left:4px solid var(--fs-line);
  border-radius: var(--fs-radius);
  background: var(--fs-bg);
}
legend{
  padding:0 8px;
  font-weight:700;
  color: var(--fs-accent);
}

/* Kopfzeile optisch absetzen */
fieldset > legend{
  position: relative;
}
fieldset > legend::after{
  content:"";
  position:absolute; left:8px; right:8px; bottom:-6px;
  height:1px; background: var(--fs-line);
}

/* Inhalt */
.fs-row{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:10px;
}
.fs-col{ flex:1 1 240px; min-width:240px; }
.fs-col label{ display:block; font-weight:600; margin-bottom:6px; color: var(--fs-muted); }

.fs-inline{
  display:flex; align-items:center; gap:10px;
}

/* Inputs */
fieldset input[type="text"],
fieldset input[type="password"],
fieldset input[type="email"],
fieldset select,
fieldset textarea{
  width:95%;
  padding:8px 10px;
  border:1px solid var(--fs-line);
  border-radius:6px;
  background:#fff; color:#1b1b1b;
}
fieldset textarea{ min-height:110px; resize:vertical; }

/* States */
.is-error{ border-color:#b00000 !important; }
.is-error + .help{ color:#b00000; }
.is-disabled{ opacity:.6; pointer-events:none; }

/* Hinweise */
.help{ font-size:12px; color:var(--fs-muted); margin-top:6px; }

/* Aktionen im Fieldset */
.fs-actions{ display:flex; gap:10px; margin-top:12px; }
.fs-actions .btn{ padding:8px 12px; border-radius:6px; border:1px solid var(--fs-accent); background:var(--fs-accent); color:#fff; }
.fs-actions .btn:hover{ background:#c41010; border-color:#c41010; }
.fs-actions .btn-outline{ background:#fff; color:var(--fs-accent); }
.fs-actions .btn-outline:hover{ background:#ffeaea; }

/* Collapsible-Blöcke im Editor */
.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; }

.textarea-lg{ min-height:260px; }   /* große Felder */
.textarea-xl{ min-height:360px; }   /* sehr groß für Inhalt 1 */

textarea[name="meta_description"]{
  min-height:80px;
  resize:vertical;
}