/* ─────────────────────────────────────────────
   Mini-CMS – Oberfläche im Corporate Design
   Alle UI-Elemente tragen [data-cms-ui] und werden
   vom Editor selbst nicht als bearbeitbar erkannt.
───────────────────────────────────────────── */

[data-cms-ui], [data-cms-ui] * { box-sizing: border-box; }

/* Bild wird ausgetauscht: altes Bild nicht aufblitzen lassen */
.cms-bild-laedt > img { opacity: 0 !important; }

/* Inhalt erst zeigen, wenn Texte, Kopien und Ausblendungen angewendet sind
   (Sicherung im Seitenkopf: spätestens nach 1,5 s sichtbar) */
.cms-warten #inhalt { visibility: hidden; }

/* Ausgeblendete Elemente: für Besucher weg, im Bearbeitungsmodus blass sichtbar */
body:not(.cms-editing) .cms-aus,
body:not(.cms-editing) .cms-aus-nav { display: none !important; }
body.cms-editing .cms-aus { opacity: .38; outline: 2px dashed #c0453b; outline-offset: 3px; }
body.cms-editing .cms-gewaehlt { outline: 2px solid #d29c46 !important; outline-offset: 3px; }
body.cms-editing .cms-aus.cms-gewaehlt { opacity: .6; }

/* ── Dialog (Login / Einrichtung) – Styleguide 6.6 ─────────── */
.cms-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  font-family: 'Inter','Segoe UI',Calibri,Arial,sans-serif; color: #1a2333;
}
.cms-dialog {
  background: #fff; border-radius: 14px; width: min(420px, 100%);
  box-shadow: 0 8px 40px rgba(0,0,0,.25); overflow: hidden;
}
.cms-dialog-kopf {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  background: #f3f5f8; border-bottom: 1px solid #dce1e8;
}
.cms-marke { width: 42px; height: 46px; flex-shrink: 0; }
.cms-dialog-titel { font-family: 'Raleway','Segoe UI',Calibri,Arial,sans-serif; font-weight: 600; font-size: 1.05rem; color: #0d2138; }
.cms-dialog-sub { font-size: .8rem; color: #3d5070; margin-top: 2px; }
.cms-dialog-inhalt { padding: 20px 22px 24px; }
.cms-dialog label { display: block; font-size: .8rem; font-weight: 600; color: #0d2138; margin: 14px 0 6px; }
.cms-dialog label:first-child { margin-top: 0; }
.cms-opt { font-weight: 400; color: #3d5070; }
.cms-feld {
  width: 100%; border: 1.5px solid #7a8699; border-radius: 8px; padding: 9px 11px;
  font: inherit; font-size: .92rem; color: #1a2333; background: #fff; outline: none; transition: border-color .2s;
}
.cms-feld:focus { border-color: #0d2138; }
.cms-fehler { color: #c0453b; font-size: .84rem; margin-top: 12px; min-height: 1.2em; }
.cms-fehler.gut { color: #1f6e4a; }

/* Dialog „Mailversand“ */
.cms-dialog-breit { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.cms-reihe { display: grid; grid-template-columns: minmax(0,1fr) 92px; gap: 12px; }
.cms-reihe label { margin-top: 0; }
.cms-hinweis { font-size: .84rem; line-height: 1.45; padding: 10px 12px; border-radius: 8px; background: #f3f5f8; color: #3d5070; margin: 0 0 16px; }
.cms-hinweis.ok { background: rgba(46,158,107,.1); color: #1f6e4a; }
.cms-hinweis.offen { background: rgba(217,154,43,.13); color: #7a5414; }
.cms-knopfpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.cms-knopfpaar .cms-btn { padding: 10px 12px; }
.cms-btn:disabled { opacity: .55; cursor: default; filter: none; transform: none; }

/* ── Schaltflächen ─────────────────────────────────────────── */
.cms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer;
  font-family: 'Inter','Segoe UI',Calibri,Arial,sans-serif; font-size: .85rem; font-weight: 600; line-height: 1.3;
  transition: filter .15s, transform .1s, background .15s; white-space: nowrap;
}
.cms-btn:hover { filter: brightness(1.1); }
.cms-btn:active { transform: scale(.97); }
.cms-btn-primaer { background: #d29c46; color: #0d2138; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.cms-btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.3); }
.cms-btn-hell { background: #fff; color: #0d2138; border: 1.5px solid #7a8699; }
.cms-btn-hell:hover { filter: none; border-color: #0d2138; background: rgba(13,33,56,.05); }
.cms-voll { width: 100%; margin-top: 16px; padding: 11px 16px; font-size: .92rem; }
.cms-btn:focus-visible, .cms-schalter:focus-visible, .cms-rund:focus-visible,
.cms-bild-werkzeug button:focus-visible { outline: 2px solid #e9bc6d; outline-offset: 2px; }

/* ── Werkzeugleiste unten ──────────────────────────────────── */
.cms-leiste {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 99999; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 24px);
  background: linear-gradient(135deg,#0d2138 0%,#081726 100%); color: #fff;
  padding: 10px 12px 10px 18px; border-radius: 14px; border: 1px solid rgba(210,156,70,.45);
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  font-family: 'Inter','Segoe UI',Calibri,Arial,sans-serif; font-size: .85rem;
}
.cms-status { font-size: .8rem; color: rgba(255,255,255,.75); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.cms-punkt { color: #e9bc6d; font-weight: 600; }
.cms-punkt::before { content: "•"; margin-right: 6px; }
.cms-schalter {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
  background: none; border: none; color: #fff; font: inherit; font-weight: 600; padding: 4px 6px; border-radius: 8px;
}
.cms-switch { width: 36px; height: 20px; border-radius: 20px; background: #3d5070; position: relative; transition: background .15s; }
.cms-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.cms-leiste.aktiv .cms-switch { background: #d29c46; }
.cms-leiste.aktiv .cms-switch::after { transform: translateX(16px); }
.cms-btn[hidden] { display: none; }

/* ── Texte im Bearbeitungsmodus ────────────────────────────── */
body.cms-editing [data-cms-editable]:hover {
  outline: 1.5px dashed #3d5070; outline-offset: 3px; cursor: text; border-radius: 3px;
}
body.cms-editing [data-cms-editable][contenteditable="true"]:focus {
  outline: 2px solid #0d2138; outline-offset: 3px; background: rgba(13,33,56,.04);
}
.dunkel body.cms-editing [data-cms-editable]:hover,
body.cms-editing .dunkel [data-cms-editable]:hover { outline-color: rgba(255,255,255,.6); }
body.cms-editing .dunkel [data-cms-editable][contenteditable="true"]:focus { outline-color: #d29c46; background: rgba(255,255,255,.06); }
/* Platz für die Werkzeugleiste im dunklen Fußbereich statt weißer Fläche unter der Seite */
body.cms-angemeldet .fuss { padding-bottom: 96px; }

/* ── Bildrahmen im Bearbeitungsmodus ───────────────────────── */
.cms-bild-bearbeitbar { outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .15s; }
.cms-bild-bearbeitbar:hover { outline-color: #0d2138; }
.dunkel .cms-bild-bearbeitbar:hover { outline-color: #d29c46; }
.cms-bild-werkzeug {
  position: absolute; left: 10px; top: 10px; right: 10px; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 6px; opacity: 0; transition: opacity .15s; pointer-events: none;
}
.cms-bild-bearbeitbar:hover .cms-bild-werkzeug,
.cms-bild-bearbeitbar:focus-within .cms-bild-werkzeug { opacity: 1; pointer-events: auto; }
@media (hover: none) { .cms-bild-werkzeug { opacity: 1; pointer-events: auto; } }
.cms-bild-werkzeug button {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 11px; border-radius: 8px; border: none;
  background: rgba(13,33,56,.92); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25);
  font: 600 .78rem/1.2 'Inter','Segoe UI',Calibri,Arial,sans-serif; transition: background .15s;
}
.cms-bild-werkzeug button:hover { background: #081726; }
.cms-bild-werkzeug svg, .cms-rund svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cms-bild-klein .cms-bild-werkzeug { left: 6px; top: 6px; right: 6px; gap: 4px; }
.cms-bild-klein .cms-bild-werkzeug button { padding: 6px; }
.cms-bild-klein .cms-bild-werkzeug button span { display: none; }

.cms-bild-bearbeitbar.cms-ablage { outline: 3px dashed #d29c46; }
.cms-bild-bearbeitbar.cms-ablage::after {
  content: "Bild hier ablegen"; position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(13,33,56,.6); color: #fff; font: 600 .95rem 'Inter','Segoe UI',Calibri,Arial,sans-serif;
}
.cms-bild-hochladen::after {
  content: ""; position: absolute; z-index: 6; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; border: 4px solid rgba(255,255,255,.35); border-top-color: #fff; animation: cms-dreh .8s linear infinite;
}
.cms-bild-hochladen > img { filter: brightness(.6); }
@keyframes cms-dreh { to { transform: rotate(360deg); } }

/* ── Zuschnitt aktiv ───────────────────────────────────────── */
.cms-zuschnitt { outline: 3px solid #d29c46 !important; outline-offset: 3px; cursor: grab; touch-action: none; }
.cms-zuschnitt.cms-zieht { cursor: grabbing; }
.cms-zuschnitt > img { transition: none !important; }
.cms-zuschnitt .cms-bild-werkzeug { display: none; }
.cms-zuschnitt::before { /* Drittel-Raster als Orientierung */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.333% - .5px), rgba(255,255,255,.55) calc(33.333% - .5px), rgba(255,255,255,.55) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.55) calc(66.666% - .5px), rgba(255,255,255,.55) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), rgba(255,255,255,.55) calc(33.333% - .5px), rgba(255,255,255,.55) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.55) calc(66.666% - .5px), rgba(255,255,255,.55) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
.cms-zuschnitt-hinweis {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 5; pointer-events: none;
  background: rgba(26,35,51,.88); color: #fff; padding: 7px 14px; border-radius: 40px; white-space: nowrap;
  font: 500 .78rem/1.3 'Inter','Segoe UI',Calibri,Arial,sans-serif; transition: opacity .2s; max-width: calc(100% - 20px);
  overflow: hidden; text-overflow: ellipsis;
}
.cms-zuschnitt-hinweis.weg { opacity: 0; }
.cms-bild-klein .cms-zuschnitt-hinweis { display: none; }
body.cms-zuschnitt-aktiv .cms-leiste { visibility: hidden; }

.cms-zuschnitt-feld {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 100001;
  width: min(560px, calc(100vw - 24px));
  background: linear-gradient(135deg,#0d2138 0%,#081726 100%); color: #fff;
  border-radius: 14px; border: 1px solid rgba(210,156,70,.45); box-shadow: 0 8px 32px rgba(0,0,0,.3);
  padding: 14px 16px; display: grid; gap: 12px;
  font-family: 'Inter','Segoe UI',Calibri,Arial,sans-serif; font-size: .85rem;
}
.cms-zf-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cms-zf-titel { font-family: 'Raleway','Segoe UI',Calibri,Arial,sans-serif; font-weight: 600; font-size: .95rem; margin-right: auto; }
.cms-zf-zoom { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; }
.cms-zf-zoom input[type=range] { flex: 1; accent-color: #d29c46; min-width: 80px; }
.cms-zf-wert { min-width: 3.6em; text-align: right; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.85); }
.cms-rund {
  width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.cms-rund:hover { background: rgba(255,255,255,.2); }
.cms-zf-alt { display: flex; align-items: center; gap: 10px; width: 100%; }
.cms-zf-alt span { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.8); white-space: nowrap; }
.cms-zf-alt .cms-feld { background: #101822; border-color: #3d5070; color: #dce1e8; padding: 7px 10px; font-size: .85rem; }
.cms-zf-alt .cms-feld:focus { border-color: #d29c46; }
.cms-zf-alt .cms-feld::placeholder { color: #9aa6b8; }
.cms-zf-knoepfe { gap: 8px; }
.cms-zf-luecke { flex: 1; }
@media (max-width: 540px) {
  .cms-zf-alt { flex-direction: column; align-items: stretch; gap: 6px; }
  .cms-zf-luecke { display: none; }
  .cms-zf-knoepfe .cms-btn { flex: 1 1 auto; }
}

/* ── Rückmeldung (Styleguide 6.7) ──────────────────────────── */
.cms-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(4px);
  background: #1a2333; color: #fff; padding: 10px 20px; border-radius: 40px;
  font-family: 'Inter','Segoe UI',Calibri,Arial,sans-serif; font-size: .85rem; font-weight: 500;
  z-index: 100002; box-shadow: 0 8px 32px rgba(0,0,0,.18); max-width: calc(100vw - 32px); text-align: center;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.cms-toast.sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); }
.cms-toast.fehler { background: #c0453b; }
body.cms-zuschnitt-aktiv .cms-toast { bottom: 200px; }

/* ── Bausteinleiste: Element ausblenden, einblenden, kopieren ─ */
.cms-baustein {
  position: fixed; z-index: 99998; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap;
  max-width: calc(100vw - 16px);
  background: linear-gradient(135deg,#0d2138 0%,#081726 100%); color: #fff;
  border: 1px solid rgba(210,156,70,.45); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.28);
  padding: 6px 6px 6px 10px;
  font-family: 'Inter','Segoe UI',Calibri,Arial,sans-serif; font-size: .78rem; line-height: 1.2;
}
.cms-baustein[hidden] { display: none; }
.cms-bs-pfad { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.cms-bs-stufe {
  background: none; border: none; color: rgba(255,255,255,.7); font: inherit; cursor: pointer;
  padding: 4px 6px; border-radius: 6px;
}
.cms-bs-stufe:hover { background: rgba(255,255,255,.1); color: #fff; }
.cms-bs-stufe.aktiv { color: #e9bc6d; font-weight: 600; }
.cms-bs-trenner { color: rgba(255,255,255,.4); }
.cms-bs-aktionen { display: flex; align-items: center; gap: 4px; }
.cms-bs-aktionen button {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 7px; padding: 5px 9px; font: 600 .76rem/1.2 'Inter','Segoe UI',Calibri,Arial,sans-serif;
  transition: background .15s;
}
.cms-bs-aktionen button:hover { background: rgba(255,255,255,.22); }
.cms-bs-aktionen .cms-bs-gefahr:hover { background: #c0453b; border-color: #c0453b; }
.cms-bs-aktionen .cms-bs-zu { padding: 5px; background: none; border-color: transparent; }
.cms-bs-aktionen svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cms-baustein button:focus-visible { outline: 2px solid #e9bc6d; outline-offset: 1px; }
body.cms-zuschnitt-aktiv .cms-baustein { display: none; }

@media (max-width: 540px) {
  .cms-leiste { left: 8px; right: 8px; transform: none; max-width: none; gap: 6px; padding: 8px; }
  .cms-leiste .cms-status { display: none; }
  .cms-leiste .cms-btn { padding: 7px 10px; }
}