/* ==========================================================================
   IKS Website 2.0 – neuer Kopf auf den Unterseiten (seit 01.11.2026)
   Wird NACH css/main.css geladen und überschreibt dessen alte Kopf-Regeln.
   Abstände passend zur weißen Fläche von main.css (20 / 30 / 56 px).
   ========================================================================== */

.site-header {
	--pad: 20px;
	position: sticky; top: 0; left: auto; z-index: 50;
	width: auto; height: auto; background: #fff;
	padding: 16px var(--pad) 14px;
	display: flex; align-items: center; justify-content: space-between;
	font-family: "Times New Roman", Times, serif;
}
.site-header a, .mobile-nav a { color: #111; }
.site-header .brand { display: flex; align-items: center; gap: 22px; text-decoration: none; }
.site-header .brand img { width: 120px; height: auto; margin: 0; position: static; }
.site-header .brand-title { display: none; font-weight: bold; line-height: 20px; }
.site-header .header-tools { display: none; }
.site-header .main-nav { display: none; }

/* main.css stylt alle <nav>-Elemente als altes Klappmenü – hier zurücksetzen */
.site-header nav.main-nav, nav.mobile-nav {
	position: static; top: auto; left: auto; width: auto; padding: 0;
	background: none; z-index: auto !important;
}
.site-header ul, .mobile-nav ul { list-style: none; margin: 0; padding: 0; }

/* Knöpfe */
.site-header .btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 22px; line-height: 1;
	background: #111; color: #fff; text-decoration: none; font-size: 17px; border: 1px solid #111;
}
.site-header .btn:hover { background: #fff; color: #111; }
.site-header .btn-light { background: #f7f7f5; color: #111; border-color: #f7f7f5; }
.site-header .btn-light:hover { background: #111; color: #fff; border-color: #111; }
.site-header .text-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 17px; padding: 0 10px; }
.site-header .header-mail { display: none; }

/* Menüsymbol */
.site-header .menu-toggle {
	appearance: none; border: 0; background: none; padding: 10px; margin-right: -10px;
	cursor: pointer; display: flex; flex-direction: column; gap: 6px;
}
.site-header .menu-toggle span { display: block; width: 32px; height: 3px; background: #111; transition: transform .2s, opacity .2s; }
.menu-open .site-header .menu-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-open .site-header .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .site-header .menu-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Handy-Menü */
nav.mobile-nav {
	display: none; background: #f7f7f5; padding: 18px 20px 26px;
	position: sticky; top: 80px; z-index: 49 !important;
	max-height: calc(100vh - 80px); overflow-y: auto;
	font-family: "Times New Roman", Times, serif;
}
.menu-open nav.mobile-nav { display: block; }
.mobile-nav .mn-main a { display: block; font-size: 26px; line-height: 1.5; text-decoration: none; }
.mobile-nav .mn-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid #000; }
.mobile-nav .mn-meta a { display: block; font-size: 18px; line-height: 1.75; }

/* Farben der Menüpunkte – wie bisher */
.c-news:hover, .c-news.cur             { color: #a227d6 !important; }
.c-films:hover, .c-films.cur           { color: #8ecd54 !important; }
.c-exhibition:hover, .c-exhibition.cur { color: #f99a63 !important; }
.c-services:hover, .c-services.cur     { color: #46a82c !important; }
.c-institute:hover, .c-institute.cur   { color: #ed4ba6 !important; }
.c-archive:hover, .c-archive.cur       { color: #4fc5e2 !important; }
.c-editions:hover, .c-editions.cur     { color: #0e6cb8 !important; }
.c-contact:hover, .c-contact.cur       { color: #bc2729 !important; }
.c-newsletter:hover, .c-newsletter.cur { color: #4ea65b !important; }
.c-language:hover                      { color: #ff0000 !important; }
.c-iksphoto:hover                      { color: #c9a800 !important; }

/* Inhalt beginnt direkt unter dem Kopf (main.css hatte 110 px Platz für den alten festen Kopf) */
@media (max-width: 699px) {
	.mobile-nav ~ #content { padding-top: 16px !important; }
	#social_top { display: none; }   /* war unsichtbar, nahm aber oben Platz weg */
}

/* ab 700 px */
@media (min-width: 700px) {
	.site-header { --pad: 30px; padding: 34px var(--pad) 22px; }
	.site-header .brand img { width: auto; }
	nav.mobile-nav { top: 113px; max-height: calc(100vh - 113px); padding-left: 30px; padding-right: 30px; }
	.mobile-nav ~ #content { padding-top: 10px; }
}

/* ab 850 px – volles Menü wie auf der Startseite */
@media (min-width: 850px) {
	.site-header {
		--pad: 56px; position: relative; display: grid;
		grid-template-columns: 1fr auto; grid-template-areas: "brand tools" "nav nav";
		align-items: start; padding: 50px var(--pad) 0;
	}
	.site-header .brand { grid-area: brand; }
	.site-header .brand-title { display: block; }
	.site-header .header-tools {
		grid-area: tools; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
		gap: 8px 12px; max-width: 460px; margin-top: 6px;
	}
	.site-header .header-mail { display: block; flex: 0 0 100%; text-align: right; font-size: 15px; }
	.site-header .menu-toggle, nav.mobile-nav, .menu-open nav.mobile-nav { display: none; }
	.site-header nav.main-nav { grid-area: nav; display: block; margin-top: 30px; padding-bottom: 22px; }
	.site-header .main-nav ul { display: flex; flex-wrap: wrap; gap: 6px 24px; }
	.site-header .main-nav a { font-size: 19px; text-decoration: none; padding: 6px 0; display: inline-block; }
	.site-header .main-nav a.cur { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
	.mobile-nav ~ #content { padding-top: 14px; }
}

@media (min-width: 1050px) {
	.site-header .main-nav a { font-size: 22px; }
	.site-header .main-nav ul { gap: 6px 30px; }
}