/* Box-Modell anpassen */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
    --system-color: #990000;
    --system-light: #eee;
	--system-medium: #aaa;
    --system-dark: #555; /* Für Menü-Trennung */
    --border-width: 3px; /* Für Fokus/Hover-Rand */
}

html {
    scroll-padding-top: 12em;
    scroll-behavior: smooth;
}

body {
    margin: 0; 
    padding: 0 .5em 0 .5em;
	font-family:sans-serif;
}

main, .footer-content, #crumbs-container {
	max-width:800px;
	margin: 0 auto;
	padding: 1em 0 0 0;
	}
	
main {
	counter-reset: fn;
	/* 'fn' ist der Name des Zählers (Footnote) */
	}
	
#crumbs-container {
	margin-top:2em;
}

/* Defs für Überschriften + Wrapper */
#intro-wrapper {
	margin-top:4em;
	margin-bottom:3em;
}

h1 {
	font-weight:normal;
	color:var(--system-dark);
	font-size:180%;
}
.subtitle {
	font-weight:bold;
}

h2 {
	font-weight:normal;
	font-size:140%;
	margin:3em 0 1em 0;
}

h3 {
	font-weight:normal;
	font-size:120%;
}



/* 1. Footer-Rahmen (Volle Breite, sanfte Trennung) */
.static-footer {
    border-top: 3px solid var(--system-color); /* Akzent-Linie in #990000 */
    padding: 3em 1em 1em 1em; /* Vertikaler Abstand und leichter horizontaler Puffer */
}

/* 2. Zentrierung des Inhalts (800px) */
.footer-content {
    /* Muss dieselbe max-width wie <main> haben */
    max-width: 800px; 
    margin: 0 auto;
}

/* 3. Spalten-Layout mit Flexbox (Für PC-Ansicht) */
.footer-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap; /* responsive */
}

/* 4. Spalten-Styling */
.footer-col {
    flex-basis: 30%; /* Jede Spalte ca. ein Drittel */
}

.footer-col h3 {
    color: var(--system-color); /* Überschriften in Systemfarbe */
    font-size: 1.1em;
    margin-top: 0;
    border-bottom: 1px solid #ccc; /* Dezente Trennlinie */
    padding-bottom: 0.5em;
}

/* 5. Listen und Copyright */
.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col a {
    color: #333;
    text-decoration: none;
    line-height: 1.8; /* Mehr Luft im Menü */
}

.copyright-note {
    font-size: 0.85em;
    margin-top:.5em;
}
.social-copyright {
    text-align:right;
}

.projects-nav {
    text-align:center;
}


/* Optional: Die Footer-Links wieder auf die Systemfarbe setzen */
.footer-nav a {
    color: var(--system-color); 
    text-decoration: none;
}

/* Text-Links in Systemfarbe */
a {
    color: var(--system-color);
    text-decoration: underline;
}

a cite {
	font-style:normal;
}

q {
    font-style: normal; /* Deaktiviert Kursivschrift */
    quotes:none;
}

.extern:after {
    content: "\2197"; /* = Pfeil NE */
    display: inline-block;
    margin-left: 0em; 
    font-size: .8em;
    vertical-align: top;
}

.extern {
    padding-right: 0; 
}

/* hover / focus Links im Text */
a:hover, a:focus {
	    text-decoration: none; 
	}
a:focus {
    /* 2. BARRIEREFREIHEIT: Deutlicher Fokus-Indikator */
    outline: none; /* Browser-Outline entfernen */
    box-shadow: 0 0 0 2px var(--system-color); 
}

/* Verstecktes Element (für Checkbox und Screenreader-Text) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    /* Fallback für alte Browser */
    clip: rect(0, 0, 0, 0); 
    /* CSS3 */
    clip-path: inset(50%); 
    border: 0;
    /* Kein Umbruch wenn das Element fokussiert wird */
    white-space: nowrap;
}

/* ####################################################### */
/* ## 1. mobile: Hamburger-Menü neben Überschrift ## */
/* ####################################################### */
header {
    background-color: var(--system-color);
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    flex-wrap: wrap; 
	
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
}

header .site-name {
	color:white;
	
	margin: 0;
	padding: 1em 1em 1em .5em;
	flex-shrink: 1;
}

header .site-name-title {
	font-family:serif;
    font-size: 1.8em;
	}

header .site-name-subtitle {
	font-size:.5em;
	display: none; /* Untertitel standardmäßig (Mobile-First) unsichtbar */
	}

/* --- nav + toggle (Mobile) --- */
nav {
    flex-shrink: 0; 
	padding-right: 1em; /* Abstand zum rechten Rand */
}

/* Label-Toggle-Button (muss sichtbar sein) */
#menu-toggle {
    display: block; 
    background: none;
    border: 1px solid white;
    color: white;
    font-size: 24px;
    padding: 5px 10px;
    cursor: pointer;
    line-height: 1;
}

/* Das Menü (Die UL) muss standardmäßig ausgeblendet sein */
#main-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; 
    flex-direction: column; 
    width: 100%; 
    order: 1; 
    /* --- Z-INDEX UND POSITIONIERUNG --- */
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    background-color: var(--system-light);
}

/* Listenelement, um vertikalen Abstand zu schaffen */
#main-menu-list li {
    margin-bottom: var(--border-width);
}

/* Logik: Wenn Checkbox gecheckt, Menü anzeigen */
#menu-state:checked ~ #main-menu-list {
    display: flex;
    border-top: 1px solid var(--system-dark);
}

/* Link-Styling für Menüpunkte (Normalzustand) */
#main-menu-list li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--system-color);
    background-color: var(--system-light);
    
    /* RESERVIERUNG: Transparenten Rand in 3px Dicke setzen */
    border: var(--border-width) solid transparent; 
    border-bottom: var(--border-width) solid #000; /* Die optische Trennlinie am unteren Rand beibehalten */
}

/* Hover-Zustand (Invertiert) */
#main-menu-list li a:hover {
    background-color: var(--system-color);
	color: white; /* Weiß */
    /* WICHTIG: Die 1px Trennlinie durch den Hover-Rand ersetzen, falls nötig */
    border-bottom: var(--border-width) solid var(--system-color);
}

/* Bilder auf Display begrenzen */
img {
	max-width:100%;
	height:auto;
	border:1px solid black;
}

/* ####################################################### */
/* ## 2. DESKTOP: Menüleiste unter Überschrift            ## */
/* ####################################################### */
@media (min-width: 768px) {
    
header {
        padding-bottom: 0;
    }
	
	/* --- Banner-Text auf 800px begrenzen und zentrieren --- */
header .site-name {
        /* Gleiche Maximalbreite wie main */
		color:white;
        width: 800px;
        /* Zentrierung des Blocks */
        margin-left: auto;
        margin-right: auto;
        padding: 1em 1em 1em 1em; 
		text-align:center;
    }
    
header .site-name-subtitle {
	display: block; /* Untertitel für PC sichtbar */
	}
	
    /* --- Hamburger-Toggle ausblenden --- */
    #menu-toggle {
        display: none;
    }

    /* --- Menü horizontal anzeigen --- */
nav, #main-menu-list, #menu-state:checked ~ #main-menu-list {
		display: flex; 
        flex-direction: row;
        width: 100%;
        border-top: none;
        order: 0;
        position: static; 
        top: auto;
        z-index: auto;
		}
	
nav {
        padding-right: 0; /* Für PC kein rechter Abstand */
}
	
#main-menu-list {
        /* volle Breite für PC */
        width: 100%; 
        justify-content: center;
		background-color: var(--system-light);
    }
        
    #main-menu-list li {
        margin-right: 3px; /* Horizontaler Puffer */
        margin-bottom: 0;
    }

    /* Die Listenelemente horizontal anordnen */
    #main-menu-list li a {
        /* WICHTIG: Nur den 3px transparenten Rahmen behalten */
        border: var(--border-width) solid transparent; 
        padding: 10px 15px;
    }
	
/* NEU: Spezifischer Hover-Style für Desktop, um das Springen zu verhindern */
    #main-menu-list li a:hover {
        /* Farben invertieren */
        
        color: white; 
        
        /* WICHTIG: Den transparenten 3px Rand durch einen roten 3px Rand ersetzen */
		border: var(--border-width) solid var(--system-color);
    }
	
}

/* ####################################################### */
/* ## 3. FOKUS-REGELN (Müssen ZULETZT stehen!)           ## */
/* ####################################################### */

/* --- Focus für den Hamburger-Toggle --- */
#menu-toggle:focus {
    outline: none; /* Browser-Outline entfernen */
    /* Setzt einen kontrastreichen Rahmen in der Markenfarbe (oder Weiß für besten Kontrast) */
    box-shadow: 0 0 0 3px white; 
    outline-offset: 2px;
}

/* --- Focus für die Menülinks (Überschreibt Hover, wenn beides aktiv) --- */
#main-menu-list li a:focus {
    /* Farben zurückgesetzt auf Rot auf Hellgrau (Kontrast!) */
    background-color: var(--system-light);
    color: var(--system-color);
    
    /* Setzt den roten 3px Rand (der Platz ist bereits durch Margin/Border reserviert) */
    border: var(--border-width) solid var(--system-color);
    
    outline: none; /* Entfernt Browser-Outline */
}

/* Zitate und Bilder */

/* erst einmal alles zurücksetzen */
figure blockquote, figcaption {
    margin: 0;
    padding: 0;
}

figure {
		margin:2em auto;
}

figcaption {
	text-align:left;
	padding:.5em;
	font-size:.8em;
}

.fig-quote figcaption {
	font-size:100%;
	padding:0;
	margin:.5em 0 0 0;
	text-align:right;
    margin-left:30%;
	}

/* zentriertes Bild */
.fig-block {
	margin:2em 0;
	text-align:left;
}
.fig-float-left {
	margin:0 1em 1em 0;
	float:left;
}
.fig-float-right {
	margin:0 0 1em 1em;
	float:right;
}
.fig-left-out-float {
	margin:2em 1em 2em 0em;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.fig-right-out-float {
	margin:2em 1em 2em 0em;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.fig-left-out {
	float:left;
	margin:2em 0 2em -22em;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.fig-right-out {
	float:right;
	margin:2em -15em 2em 2em;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Zitate haben border-left zur Hervorhebung und größeren Abstand zum Text */
.fig-quote {
	margin:2em 1em 2em 1em;
	padding-left: .5em;
	border-left: .2em solid var(--system-medium);
}


.gotop {
	display:block;
	max-width:800px;
	margin:0 auto;
	padding:3em 0 3em 0;
}

/* fact-check-box */
.fact-checkbox {
	margin-bottom:3em;
}

.fact-check-box {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 3em;
	padding:1.5em;
	background-color: #fafafa;
}

/* --- 1. Rotes X (Widerlegung/Behauptung) --- */
.claim-label::before_invalid {
    content: "❌"; /* Unicode-Zeichen für das rote X (U+274C) */
    color: #CC0000;  /* Optional: Stellt sicher, dass das Zeichen rot ist */
    margin-right: 10px;
    font-weight: bold;
}


.claim-label::before {
    content: "\274C"; 
    /* Ein leicht helleres, wärmeres Braun als #8b4513 */
    color: #a0522d; /* Beispiel: Sienna */ 
    margin-right: 10px;
    font-weight: bold;
}

/* --- 2. Grüner Haken (Fakt/Widerlegung) --- */
.fact-label::before {
    content: "✅"; /* Unicode-Zeichen für den grünen Haken (U+2705) */
    color: #008000; /* Optional: Stellt sicher, dass das Zeichen grün ist */
    margin-right: 10px;
}

/* Stil-Anpassungen, z.B. für den Kasten selbst, können hier folgen */
.claim-label {
    background-color:#f5deb3; /* #fff8dc Hellorange für die Behauptung */
    color: #8b4513;
    padding: 5px 10px;
	font-weight: bold;
	letter-spacing:1px;
}

.fact-label {
    background-color: #f0fff0; /* Hellgrüner Hintergrund für den Fakt */
    color: #006400;
    padding: 5px 10px;
	font-weight: bold;
	letter-spacing:1px;
}

.claim-text, .fact-text {
	margin-top: 1em;
}


/* Styling des a-Tags (.fn-ref) selbst */
.fn-ref {
    text-decoration: none; 
    color: inherit; /* Farbe vom Elternelement erben */
    outline: none;    
    display: inline;
	}
/*
.fn-ref, .fn-ref a, .footnotes-list li {}
*/	

/* Das Pseudo-Element, das die Zahl generiert und anzeigt */
.fn-ref::before {
    /* 1. Inkrementieren (z.B. von 0 auf 1) */
    counter-increment: fn;    
    /* 2. Den neuen Wert in Klammern anzeigen */
    content: '[' counter(fn) ']'; 
    /* 3. Hochstellen */
    vertical-align: super;
    font-size: 0.9em; /* Verkleinert die hochgestellte Zahl */
    line-height: 1;
    position: relative;
    top: -.050em;
}

.article-end-meta {
    max-width: 800px; 
    margin: 0 auto; /* Zentriert den 800px Block */
    display: flex; /* Aktiviert flexible Ausrichtung */
    justify-content: space-between; /* Schiebt die Kinder an die Ränder */
    padding: 6em 0 1em 0; /* Kleiner Puffer zum Footer */
}

/* .nav-links {} */
/* Optional: Stil für Metadaten, um sie dezent zu halten */
.metadata {
    font-size: 0.9em;
    color: var(--system-dark);
    text-align:right;
}
p {
	margin:0 0 .5em 0;
	line-height:1.3;
}


.footnotes-area {
    margin-top:5em;
}

.footnotes-area h2 {
    margin-top:1em
}

.footnotes-area:before {
    content: ""; /* Muss gesetzt werden */
    display: block;
    width: 150px; /* gewünschte Länge */
    height: 2px; /* Dicke der Linie */
    background-color: var(--system-medium); /* Mittleres Grau (#aaa) */
    margin: 0; /* Abstand oben, kein Abstand rechts/links, Abstand unten */
}
.footnotes-area dt {
	font-weight:bold;
	margin-top:1em;
}

.footnotes-area dd {
	margin-top:.5em;
}
.first-char {
    font-size:140%;
    font-weight:bold;
    margin-top:2em;
    margin-bottom:1em;
}
.revisionistisch {
    font-size:80%;
    font-weight:bold;
    color:var(--system-color);
    }

/* für Zitat in Zitat */
.quote-indent {
    margin-left:1.5em;
    margin-top:1em;
    margin-bottom:1em;
}