/* ==========================================================
   CSS VARIABLEN & REGELN FÜR DYNAMISCHES HUE-THEMING
   ========================================================== */
:root {
  /* Universelle Grundfarben */
  --color-black: #000000;
  --color-white: #ffffff;
  
  /* Dynamische Farbpalette basierend auf --main-hue */
  --primary-deep:     hsl(var(--main-hue), 40%, 17%);     /* Für Überschriften, Footer-Hintergrund, Header-Text, Menu 1 */
  --primary-darker:   hsl(var(--main-hue), 40%, 13%);     /* Für Fußzeilen-Rand */
  --primary:          hsl(var(--main-hue), 35%, 25%);     /* Für Buttons, aktive Rahmen, H2-Verläufe, Menu 3 */
  --primary-hover:    hsl(var(--main-hue), 32%, 35%);     /* Für Button-Hover, Untertitel, Menu 5 */
  --primary-light:    hsl(var(--main-hue), 30%, 45%);     /* Für Link-Hover, Menu 7 */
  
  /* Menü Farbverlauf Stufen (#menu1 bis #menu8) abgeleitet */
  --menu-1: hsl(var(--main-hue), 40%, 17%);
  --menu-2: hsl(var(--main-hue), 38%, 20%);
  --menu-3: hsl(var(--main-hue), 35%, 25%);
  --menu-4: hsl(var(--main-hue), 34%, 30%);
  --menu-5: hsl(var(--main-hue), 32%, 35%);
  --menu-6: hsl(var(--main-hue), 31%, 40%);
  --menu-7: hsl(var(--main-hue), 30%, 45%);
  --menu-8: hsl(var(--main-hue), 28%, 50%);
  
  /* Hintergründe & Eingabefelder im passenden Farb-Ton */
  --bg-page:          hsl(var(--main-hue), 25%, 93%);     /* Seitenhintergrund */
  --bg-card:          hsl(var(--main-hue), 0%, 100%);     /* Reines Weiß für Inhaltsbereiche */
  --bg-input:         hsl(var(--main-hue), 20%, 82%);     /* Satterer Hintergrund für Header und Sidebar (#navi) */
  --bg-code:          hsl(var(--main-hue), 30%, 92%);     /* Für Code-Blöcke */
  
  /* Textfarben (vollständig dynamisch abgeleitet) */
  --text-main:        hsl(var(--main-hue), 30%, 20%);
  --text-muted:       hsl(var(--main-hue), 20%, 42%);
  --text-nav:         hsl(var(--main-hue), 40%, 17%);
  --text-footer:      hsl(var(--main-hue), 20%, 85%);
  --text-footer-hover:hsl(var(--main-hue), 30%, 75%);
  --text-on-primary:  #ffffff;

  /* Rahmen & Borders */
  --border-container: hsl(var(--main-hue), 20%, 68%);     /* Edler, sichtbarer Rahmen um den gesamten Seitenbereich */
  --border-color:     hsl(var(--main-hue), 20%, 75%);
  --border-light:     hsl(var(--main-hue), 20%, 85%);
  --border-navi:      hsl(var(--main-hue), 20%, 75%);      
  
  /* Markierungen & Feedback */
  --bg-mark:          hsl(var(--main-hue), 70%, 85%);

  --alert-success-text: #155724;
  --alert-success-bg:   #d4edda;
  --alert-success-border: #c3e6cb;
  
  --alert-error-text:   #721c24;
  --alert-error-bg:     #f8d7da;
  --alert-error-border: #f5c6cb;
  
  /* Typografie */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media print {
	div#kopfzeile,
	div#navi,
	div#fusszeile { 
		display: none; 
	}
}

/* Base resets & typography */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 15px 0;
	background: var(--bg-page);
	font-family: var(--font-main);
	color: var(--text-main);
	line-height: 1.6;
}

/* Haupt-Container mit klarem Außenrahmen und feinem Schatten */
#seitenbereich, .container {
	width: 1000px;
	background-color: var(--color-white);
	margin: 0 auto;
	border: 2px solid var(--border-container);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
	display: grid;
	grid-template-columns: 220px 1fr;
	grid-template-rows: auto auto auto;
	position: relative;
	overflow: hidden;
}

/* ==========================================================
   HEADER, TITEL & MENÜ (Größere Hauptüberschrift)
   ========================================================== */

#kopfzeile, header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-column: 1 / -1;
    grid-row: 1;
    height: 130px; /* Erhöht von 110px auf 130px */
    width: 100%;
    background-color: var(--bg-input);
    border-bottom: 1px solid var(--border-navi);
    position: relative;
    box-sizing: border-box;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: hidden;
}

#ueberschrift {
    width: 100%;
    height: 90px; /* Angepasst auf 90px (zusammen mit 40px Menü = 130px Gesamthöhe) */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Header-Überschrift */
#kopfzeile h2, 
#ueberschrift h2, 
header h2 {
    margin: 0;
    text-align: center;
    font-weight: 700;
    font-size: 2.3em; 
    color: var(--primary-deep);
    letter-spacing: -0.5px;
    width: 100%;
    height: 90px; /* Muss exakt mit #ueberschrift übereinstimmen */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================
   INHALTS-ÜBERSCHRIFT (Bewusst kleiner als der Header)
   ========================================================== */

#inhalte h2 {
    margin: 20px 0 10px 0;
    text-align: center; /* Bei Bedarf auf left stellen */
    font-weight: 700;
    font-size: 1.4em; /* Kleiner als die Header-Überschrift */
    color: var(--primary-deep);
    letter-spacing: -0.5px;
    width: auto;
    height: auto;
    display: block;
}

header p {
    text-align: center;
    color: var(--primary-deep);
    font-size: 0.95rem;
    margin: 0;
}

#menu, nav {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 40px !important;
    background-color: var(--primary-deep);
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    box-shadow: none;
}

nav ul {
    list-style: none;
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
}

nav li {
    flex: 1;
    min-width: auto;
    height: 100%;
    margin: 0;
}

#menu a.linklevel1, nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-white) !important;
    background: transparent;
    border: none;
    border-radius: 0;
    text-decoration: none;
    transition: filter 0.2s ease;
    padding: 0;
}

#menu a.linklevel1:hover, nav a:hover {
    filter: brightness(1.15);
    text-decoration: underline;
    background: transparent;
    color: var(--color-white) !important;
    border: none;
}

#menu1, #menu2, #menu3, #menu4, #menu5, #menu6, #menu7, #menu8 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    flex: 1 !important;
    width: auto !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#menu1 { background-color: var(--menu-1); }
#menu2 { background-color: var(--menu-2); }
#menu3 { background-color: var(--menu-3); }
#menu4 { background-color: var(--menu-4); }
#menu5 { background-color: var(--menu-5); }
#menu6 { background-color: var(--menu-6); }
#menu7 { background-color: var(--menu-7); }
#menu8 { background-color: var(--menu-8); }

/* Seitliche Navigation */
#navi {
	grid-column: 1;
	grid-row: 2;
	background-color: var(--bg-input);
	min-height: 650px;
	padding: 25px 12px;
	border-right: 1px solid var(--border-navi);
}

#navi ul.hauptpunkt {
	list-style: none;
	margin: 0;
	padding: 0;
}

#navi a.linklevel1 {
    display: block;
    text-decoration: none;
    margin-bottom: 6px;
    color: var(--text-nav);
}

#navi a.linklevel1:hover {
    color: var(--color-white);
}

#navi li.hauptpunkt,
#navi li.last {
	width: 100%;
	background-color: var(--color-white);
	color: var(--text-nav);
	border: 1px solid var(--border-light);
	border-radius: 8px;
	padding: 10px 16px;
}

#navi li.hauptpunkt:hover,
#navi li.last:hover {
	background-color: var(--primary);
	color: var(--color-white);
	border-color: var(--primary);
	padding-left: 22px;
}

/* Hauptinhaltsbereich & Grid Layout */
.layout-grid {
	display: contents;
}

main {
	grid-column: 2;
	grid-row: 2;
	background-color: var(--color-white);
	padding: 35px 45px;
	min-height: 650px;
	font-size: 16px;
	color: var(--text-main);
	text-align: left;
}

aside {
	grid-column: 2;
	grid-row: 2;
}

section, aside:not(#navi) {
	background: var(--bg-card);
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	border: none;
}

#titelleiste {
	margin-top: 0;
	margin-bottom: 30px;
}

h1 {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
	margin: 0 auto;
	padding: 12px 24px;
	width: 100%;
	max-width: 500px;
	border: none;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	text-align: center;
	color: var(--color-white);
	font-weight: 600;
	font-size: 1.35em;
}

h3, h4, h5, h6 { color: var(--text-main); margin: 20px 0 10px 0; }
hr { border: 0; border-top: 2px dashed var(--border-color); margin: 25px 0; }

/* Inhaltselement korrigiert mit fester Grid-Zuweisung Spalte 2 / Reihe 2 */
#inhalte {
    grid-column: 2;
    grid-row: 2;
    background-color: var(--color-white);
    padding: 30px 40px;
    min-height: 650px;
}

#inhalte p, 
#inhalte span,
#inhalte td,
main p {
	color: var(--text-muted);
	margin: 6px 0;
	line-height: 1.5;
	font-size: 0.95em;
	text-align: justify;
	font-weight: 600;
}

#inhalte p.buch-titel, main p.buch-titel {
	font-size: 1.8em;
	font-weight: 700;
	color: var(--primary-deep);
	margin-top: 0;
	margin-bottom: 4px;
	line-height: 1.25;
}

#inhalte p.buch-untertitel, main p.buch-untertitel {
	font-size: 1.3em;
	font-weight: 600;
	color: var(--primary-hover);
	margin-top: 0;
	margin-bottom: 16px;
	line-height: 1.35;
}

img.bild1 {
	float: left;
	margin: 5px 25px 15px 0;
	padding: 3px;
	background-color: var(--color-white);
	border: 4px solid var(--primary);
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, border-color 0.3s ease;
}

img.bild1:hover {
	transform: scale(1.02);
	border-color: var(--primary-hover);
}

/* ==========================================================
   TABELLEN-DESIGN (Exakter Blockquote-Hintergrund via --bg-page)
   ========================================================== */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px 0;
    background-color: var(--bg-page) !important;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* Zellen-Innenabstand & feine Trennlinien */
table th, 
table td {
    padding: 12px 15px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

/* Äußersten rechten Rand der Zellen entfernen */
table th:last-child, 
table td:last-child {
    border-right: none;
}

/* Tabellenkopf in einer etwas helleren/freundlicheren Variante */
table thead th,
table thead td {
    background-color: var(--primary-hover) !important;
    color: var(--color-white) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}

/* Tabellenkörper: Zwingend den Blockquote-Hintergrund (--bg-page) erzwingen */
table tbody td {
    background-color: var(--bg-page) !important;
    color: var(--text-main) !important;
}

/* Letzte Zeile im Body schließt unten ohne Rand ab */
table tbody tr:last-child td {
    border-bottom: none;
}

/* --- Link-Level 1: Normaler Textlink (angepasst an Farb-Variable) --- */
#inhalte a.linklevel1,
main a.linklevel1 {
	color: var(--primary);
	text-decoration: underline;
	font-weight: 600;
}

#inhalte a.linklevel1:hover,
main a.linklevel1:hover {
	color: var(--primary-deep);
	text-decoration: none;
}

/* --- Link-Level 2: Button-Stil (unverändert) --- */
#inhalte a.linklevel2,
main a.linklevel2 {
	display: inline-block;
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
	color: var(--color-white);
	border: 1px solid var(--primary);
	border-radius: 6px;
	padding: 4px 12px;
	margin: 2px 3px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#inhalte a.linklevel2:hover,
main a.linklevel2:hover {
	background: var(--bg-input);
	color: var(--primary-deep);
	border-color: var(--border-color);
	text-decoration: none;
}

code, kbd, samp {
	font-family: 'Consolas', monospace;
	background: var(--bg-code);
	color: var(--primary-hover);
	padding: 3px 6px;
	border-radius: 4px;
	font-size: 0.9em;
	border: 1px solid var(--border-light);
}

mark { background: var(--bg-mark); color: #000; padding: 0 4px; border-radius: 3px; }

blockquote {
	border-left: 5px solid var(--primary);
	background: var(--bg-page);
	padding: 15px 20px;
	font-style: italic;
	margin: 20px 0;
	border-radius: 0 8px 8px 0;
	color: var(--text-muted);
}

fieldset {
	border: 1px solid var(--border-color);
	padding: 25px;
	margin-bottom: 20px;
	border-radius: 8px;
	background: var(--bg-page);
}

legend {
	font-weight: bold;
	color: var(--primary);
	padding: 0 10px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 4px;
}

label { font-weight: 600; display: block; margin-bottom: 6px; color: var(--text-main); }

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
	width: 100%;
	max-width: 500px;
	background-color: var(--bg-input);
	color: var(--text-main);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 10px 12px;
	font-family: var(--font-main);
	font-size: 1.0rem;
	margin-bottom: 15px;
	transition: all 0.2s ease-in-out;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--primary);
	background-color: var(--color-white);
	box-shadow: 0 0 0 3px var(--bg-code);
}

button,
input[type="submit"],
input[type="reset"] {
	background-color: var(--primary);
	color: var(--text-on-primary);
	border: 1px solid var(--primary);
	border-radius: 6px;
	padding: 10px 20px;
	font-family: var(--font-main);
	font-size: 1.0rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

button:hover,
input[type="submit"]:hover {
	background-color: var(--primary-hover);
}

button[type="reset"] {
	background: var(--bg-code);
	color: var(--text-main);
	border: 1px solid var(--border-color);
}

/* --- TASCHWEI CMS: PHP-Generator Erweiterungen --- */
.cms-container { 
    background: var(--bg-card); 
    padding: 20px; 
    border-radius: 8px; 
    border: 1px solid var(--border-light); 
    margin-bottom: 25px; 
}
.cms-container textarea { 
    width: 100%; 
    height: 220px; 
    font-family: monospace; 
    padding: 10px; 
    border: 1px solid var(--border-light); 
    border-radius: 4px; 
    background: var(--bg-page); 
    color: var(--text-main); 
    box-sizing: border-box; 
    resize: vertical; 
}
.cms-container label { 
    display: block; 
    font-weight: bold; 
    margin-bottom: 8px; 
    color: var(--primary-deep); 
}
.cms-input { 
    width: 100%; 
    padding: 8px; 
    margin-bottom: 15px; 
    border: 1px solid var(--border-light); 
    border-radius: 4px; 
    background: var(--bg-page); 
    color: var(--text-main); 
    box-sizing: border-box; 
}
.menu-row { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 10px; 
    align-items: center; 
}
.menu-row input { 
    margin-bottom: 0 !important; 
}
.button-group { 
    display: flex; 
    gap: 15px; 
    margin-top: 15px; 
}
.cms-btn { 
    flex: 1; 
    background: var(--bg-page); 
    color: var(--primary-deep); 
    border: 1px solid var(--border-light); 
    padding: 12px 20px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: bold; 
    text-align: center; 
    box-sizing: border-box; 
    font-size: 0.95rem; 
}
.cms-btn:hover { 
    background: var(--primary); 
    color: #fff; 
    border-color: var(--primary); 
}
.cms-btn-save { 
    background: var(--primary); 
    color: #fff; 
    border-color: var(--primary); 
}
.cms-btn-save:hover { 
    opacity: 0.9; 
}
.btn-plus { 
    background: var(--primary); 
    color: #fff; 
    border: none; 
    padding: 8px 12px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: bold; 
}
.btn-delete { 
    background: #d9534f; 
    color: #fff; 
    border: none; 
    padding: 8px 12px; 
    border-radius: 4px; 
    cursor: pointer; 
}
.farb-menu-box {
    background: var(--bg-card); 
    padding: 8px 10px; 
    text-align: center; 
    border: 1px solid var(--border-light); 
    border-radius: 8px; 
    font-size: 0.85rem; 
    margin-bottom: 15px;
}
.farb-menu-box a {
    margin: 0 3px; 
    text-decoration: none; 
    color: var(--primary);
}

.vorschau-container-wrap {
    width: 100%;
    overflow: hidden;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 2px dashed #b0b0b0;
    background: #f9f9f9;
    padding: 10px;
    box-sizing: border-box;
}

.vorschau-innen {
    transform: scale(0.75);
    transform-origin: top left;
    width: 100% !important;
    max-width: none !important;
    margin-bottom: -25% !important;
}

/* Fußzeile */
#fusszeile, footer {
	grid-column: 1 / -1;
	grid-row: 3;
	background-color: var(--primary-deep);
	text-align: center;
	color: var(--text-footer);
	border-top: 1px solid var(--primary-darker);
	padding: 16px;
	font-size: 0.85em;
	border-radius: 0;
	margin-top: 0;
}

#fusszeile p, footer p {
	display: block;
	color: var(--text-footer);
	margin: 0;
}

#fusszeile a.linklevel1, footer a {
	color: var(--color-white);
	text-decoration: none;
	font-weight: 500;
	background: none;
	border: none;
	padding: 0;
	box-shadow: none;
}

#fusszeile a.linklevel1:hover, footer a:hover {
	color: var(--text-footer-hover);
	text-decoration: underline;
	background: none;
}

/* ==========================================================
   ISOLATION FÜR DIE LIVE-VORSCHAU IM TASCHWEI CMS
   Verhindert, dass CMS-Button-Styles in das Vorschau-Menü bluten
   ========================================================== */

.vorschau-innen #navi a.linklevel1 {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: var(--text-nav) !important;
    text-decoration: none !important;
}

/* Hover-Status für die Vorschau erzwingen */
.vorschau-innen #navi li.hauptpunkt:hover a.linklevel1,
.vorschau-innen #navi li.last:hover a.linklevel1 {
    color: var(--color-white) !important;
}

/* Entspricht exakt dem Verhalten aus test6.php: Brauner Hintergrund = Weiße Schrift */
#navi li.hauptpunkt:hover,
#navi li.last:hover,
#navi li.hauptpunkt.active,
#navi li.last.active,
#navi li.hauptpunkt.current,
#navi li.last.current {
    background-color: var(--primary) !important;
    color: var(--color-white) !important;
    border-color: var(--primary) !important;
}

/* Erzwingt die weiße Schriftfarbe auch für den Link darin im aktiven/Hover-Zustand */
#navi li.hauptpunkt:hover a.linklevel1,
#navi li.last:hover a.linklevel1,
#navi li.hauptpunkt.active a.linklevel1,
#navi li.last.active a.linklevel1,
#navi li.hauptpunkt.current a.linklevel1,
#navi li.last.current a.linklevel1 {
    color: var(--color-white) !important;
}