/* ── Editor-Bereich ─────────────────────────────────── */

.seite-header {
	border-bottom: 1px solid rgb(200, 200, 200);
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.seite-header h2 {
	font-size: 20px;
	color: rgb(0, 80, 155);
	font-weight: normal;
	margin-bottom: 6px;
}

.seite-meta-zeile {
	display: flex;
	gap: 20px;
	font-size: 11px;
	color: rgb(145, 145, 145);
	flex-wrap: wrap;
}

.seite-meta-zeile span { white-space: nowrap; }
.seite-meta-zeile strong { color: rgb(95, 95, 95); }

.seite-header-zeile {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
}

.seite-header-zeile h2 { margin-bottom: 0; flex: 0 1 auto; }
.seite-header-zeile .seite-meta-zeile { flex: 0 1 auto; justify-content: flex-end; }


/* ── Status-Badges ──────────────────────────────────── */

.badge {
	display: inline-block;
	padding: 2px 7px;
	font-size: 10px;
	border-radius: 2px;
}
.badge-online   { background-color: rgb(135, 215, 145);  color: rgb(15, 75, 15); }
.badge-modified { background-color: rgb(105, 145, 225);  color: rgb(0, 40, 95); }
.badge-cms      { background-color: rgb(105, 145, 225);  color: rgb(0, 40, 95); }
.badge-offline  { background-color: rgb(215, 135, 135);  color: rgb(75, 0, 0); }

/* ── Editor Toolbar (im seite-header) ───────────────── */

.editor-toolbar {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	align-items: center;
}

.editor-toolbar .btn-save {
	padding: 5px 16px;
	background-color: rgb(145, 215, 165);
	color: rgb(15, 55, 15);
	border: 1px solid rgb(115, 195, 135);
	cursor: pointer;
	font-size: 12px;
}
.editor-toolbar .btn-save:hover { background-color: rgb(125, 205, 145); }

.editor-toolbar .btn-online {
	padding: 5px 16px;
	background-color: rgb(105, 145, 225);
	color: rgb(0, 40, 95);
	border: 1px solid rgb(65, 115, 205);
	cursor: pointer;
	font-size: 12px;
}
.editor-toolbar .btn-online:hover { background-color: rgb(85, 130, 215); }

.editor-toolbar .speichern-info {
	font-size: 11px;
	color: rgb(95, 155, 95);
	display: none;
}

/* ── Textarea ───────────────────────────────────────── */

.editor-textarea {
	width: 100%;
	min-height: 420px;
	background-color: rgb(227, 227, 227);
	color: rgb(45, 45, 45);
	border: 1px solid rgb(185, 185, 185);
	padding: 12px;
	font-family: "Courier New", monospace;
	font-size: 12px;
	line-height: 1.6;
	resize: vertical;
	box-sizing: border-box;
}

.editor-textarea:focus {
	outline: none;
	border-color: rgb(55, 115, 195);
}

/* ── CKEditor Wrapper ───────────────────────────────── */

.content-editor-wrap { display: block; }
.content-editor-wrap.versteckt { display: none; }

/* CKEditor soll die volle Breite nutzen */
.content-editor-wrap .cke { width: 100% !important; }

/* ── Meta-Editor ────────────────────────────────────── */

.meta-editor-wrap { display: none; }
.meta-editor-wrap.aktiv { display: block; }

.meta-label {
	font-size: 11px;
	color: rgb(135, 135, 135);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* ── Vorschau ───────────────────────────────────────── */

.vorschau-inhalt {
	background-color: rgb(5, 5, 5);
	color: rgb(225, 225, 225);
	padding: 20px 24px;
	line-height: 1.7;
	font-size: 14px;
	border: 1px solid rgb(195, 195, 195);
}

.vorschau-inhalt h1,
.vorschau-inhalt h2,
.vorschau-inhalt h3 { margin: 14px 0 8px; }
.vorschau-inhalt p  { margin-bottom: 10px; }
.vorschau-inhalt ul { margin-left: 20px; margin-bottom: 10px; }
.vorschau-inhalt img { max-width: 100%; height: auto; }

/* ── PageEinstellungen ──────────────────────────────── */

.einstellungen-wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.eins-sprache-block {
	border: 1px solid rgb(200, 200, 200);
	margin-bottom: 16px;
	padding: 0;
}

.eins-sprache-titel {
	font-size: 12px;
	font-weight: bold;
	color: rgb(35, 55, 95);
	background-color: rgb(200, 200, 215);
	padding: 6px 12px;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.eins-zeile {
	display: flex;
	align-items: flex-start;
	border-bottom: 1px solid rgb(205, 205, 205);
	padding: 8px 0;
}

.eins-zeile:last-child { border-bottom: none; }

.eins-label {
	width: 180px;
	flex-shrink: 0;
	font-size: 11px;
	color: rgb(125, 125, 125);
	padding: 6px 12px 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.eins-wert {
	flex: 1;
	padding: 4px 12px 4px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.eins-input {
	background-color: rgb(227, 227, 227);
	border: 1px solid rgb(185, 185, 185);
	color: rgb(45, 45, 45);
	padding: 5px 8px;
	font-size: 12px;
	flex: 1;
	min-width: 160px;
}

.eins-input-sm { flex: 0 0 180px; min-width: 0; }

.eins-input:focus {
	outline: none;
	border-color: rgb(55, 115, 195);
}

.eins-select {
	background-color: rgb(227, 227, 227);
	border: 1px solid rgb(185, 185, 185);
	color: rgb(45, 45, 45);
	padding: 5px 8px;
	font-size: 12px;
}

.btn-eins {
	padding: 4px 12px;
	background-color: rgb(185, 185, 205);
	color: rgb(15, 35, 75);
	border: 1px solid rgb(135, 135, 175);
	cursor: pointer;
	font-size: 11px;
	white-space: nowrap;
}
.btn-eins:hover { background-color: rgb(165, 165, 195); }

.btn-online-schalten {
	background-color: rgb(175, 225, 185);
	color: rgb(15, 95, 15);
	border-color: rgb(135, 205, 145);
}
.btn-online-schalten:hover { background-color: rgb(155, 215, 165); }

.btn-offline {
	background-color: rgb(225, 165, 165);
	color: rgb(75, 0, 0);
	border-color: rgb(205, 125, 125);
}
.btn-offline:hover { background-color: rgb(215, 145, 145); }

.eins-urlslug {
	display: block;
	width: 100%;
	font-size: 11px;
	color: rgb(115, 155, 115);
	font-family: monospace;
	padding: 2px 0;
	word-break: break-all;
}

.eins-kinder {
	list-style: none;
	padding: 0;
	margin: 0;
}
.eins-kinder li { padding: 2px 0; }
.eins-kinder a  { color: rgb(25, 85, 155); font-size: 12px; text-decoration: none; }
.eins-kinder a:hover { text-decoration: underline; }

/* ── Lade-Indikator ─────────────────────────────────── */

.lade-info {
	color: rgb(135, 135, 135);
	font-size: 13px;
	padding: 30px 0;
}

/* ══════════════════════════════════════════════════════
   Webtool — Panel auf Eigenschaftenseite (kompakt, integriert)
   ══════════════════════════════════════════════════════ */

.wt-panel {
	padding: 0;
	background: none;
	border: none;
	margin: 0;
}

.wt-panel-titel {
	margin: 12px 0 6px 0;
	font-size: 11px;
	color: rgb(125, 125, 125);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0 12px;
}

.wt-panel-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 4px 12px 8px;
	border-bottom: 1px solid rgb(205, 205, 205);
}

.wt-panel-info {
	flex: 1;
	font-size: 12px;
	color: rgb(50, 55, 65);
	min-width: 240px;
}

.wt-panel-info strong {
	color: rgb(30, 35, 45);
}

.wt-panel-meta {
	color: rgb(115, 115, 125);
	font-size: 11px;
}

.wt-panel-aktionen {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════
   Webtool — Eigene Konfig-Seite (ersetzt Content-Area)
   ══════════════════════════════════════════════════════ */

.wt-konfig-kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 2px solid rgb(125, 145, 185);
}

.wt-konfig-kopf-text { flex: 1; }

.wt-konfig-sub {
	font-size: 11px;
	color: rgb(85, 95, 115);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 4px;
}

.wt-konfig-kopf h2 {
	margin: 0;
	font-size: 22px;
	color: rgb(10, 20, 35);
	font-weight: 500;
}

.wt-konfig-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.wt-konfig-abschnitt {
	background-color: rgb(221, 223, 231);
	border: 1px solid rgb(187, 192, 205);
	border-radius: 5px;
	padding: 16px 18px;
}

.wt-konfig-abschnitt h3 {
	margin: 0 0 14px 0;
	font-size: 13px;
	color: rgb(15, 35, 75);
	text-transform: uppercase;
	letter-spacing: 1px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgb(193, 198, 210);
}

.wt-konfig-fuss {
	display: flex;
	justify-content: flex-end;
	padding: 16px 0 8px;
	margin-top: 8px;
	border-top: 1px solid rgb(193, 198, 210);
}

.wt-konfig-fuss .btn-eins {
	padding: 8px 18px;
	font-size: 12px;
}

/* Grid-Layout für Detail-Zeilen in Konfig-Abschnitten */
.wt-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wt-row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 12px;
	align-items: flex-start;
	padding: 6px 0;
}

.wt-row-label {
	font-size: 11px;
	color: rgb(95, 100, 115);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding-top: 7px;
}

.wt-row-wert {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.wt-row-hinweis {
	flex-basis: 100%;
	color: rgb(105, 110, 125);
	font-size: 11px;
}

.wt-absenderfeld {
	font-size: 12px;
	color: rgb(55, 60, 75);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wt-row-aktion {
	padding-top: 8px;
}

.wt-save-info {
	font-size: 12px;
	margin-left: 10px;
}

.wt-radio, .wt-check {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: rgb(45, 45, 55);
	margin-right: 8px;
}

/* Felder-Liste */
.wt-felder .wt-feld-kopf {
	display: grid;
	grid-template-columns: 2fr 1.4fr 80px 110px 90px 110px;
	gap: 6px;
	padding: 4px 0;
	font-size: 10px;
	color: rgb(115, 115, 125);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.wt-feld {
	display: grid;
	grid-template-columns: 2fr 1.4fr 80px 110px 90px 110px;
	gap: 6px;
	padding: 6px 0;
	border-top: 1px solid rgb(205, 205, 215);
	align-items: center;
}

.wt-f-optionen {
	grid-column: 1 / -1;
	display: flex;
	gap: 8px;
	padding: 4px 0 4px 4px;
	align-items: center;
}

.wt-f-optionen label {
	font-size: 11px;
	color: rgb(95, 95, 105);
}

.wt-f-optionen code {
	background: none;
	color: rgb(55, 55, 75);
}

.wt-f-aktionen {
	display: flex;
	gap: 4px;
	justify-content: flex-end;
}

/* Sprach-Register */
.wt-sprach-register {
	display: flex;
	gap: 4px;
	margin-bottom: 10px;
	border-bottom: 1px solid rgb(185, 185, 200);
}

.wt-sprach-btn {
	padding: 5px 14px;
	background-color: rgb(215, 215, 225);
	color: rgb(95, 95, 105);
	border: 1px solid rgb(185, 185, 200);
	border-bottom: none;
	cursor: pointer;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.wt-sprach-btn.aktiv {
	background-color: rgb(225, 225, 231);
	color: rgb(15, 35, 75);
	border-color: rgb(135, 135, 175);
}

/* Sprach-Body */
.wt-t-zeile {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 8px;
	margin-bottom: 6px;
	align-items: flex-start;
}

.wt-t-zeile label {
	font-size: 11px;
	color: rgb(115, 115, 125);
	padding-top: 6px;
}

.wt-t-input {
	width: 100%;
	box-sizing: border-box;
	flex: none;
}

.wt-t-formular,
.wt-ft-block {
	background-color: rgb(221, 221, 227);
	padding: 10px;
	border: 1px solid rgb(200, 200, 210);
	border-radius: 3px;
	margin-bottom: 10px;
}

.wt-ft-head {
	font-size: 11px;
	color: rgb(25, 45, 85);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.wt-ft-head small {
	color: rgb(115, 115, 125);
	font-weight: normal;
	text-transform: none;
	letter-spacing: 0;
}

.wt-ft-opts {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wt-ft-opt {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 8px;
	align-items: center;
}

.wt-ft-opt code {
	font-size: 11px;
	color: rgb(55, 55, 75);
}

/* Löschen-Block am Ende der Seiten-Eigenschaften */
.eins-loeschen {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid rgb(120, 60, 60);
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.eins-loeschen-hinweis {
	font-size: 11px;
	color: rgb(140, 120, 120);
}