/*
Theme Name: GeneratePress Child
Theme URI: https://imp-eventproduction.com/
Description: Child Theme fuer IMP Event Production. Enthaelt die Templates und Felder fuer den Projekte-Bereich.
Author: Ruben Amon
Author URI: https://ruben-amon.de/
Template: generatepress
Version: 1.0.0
Text Domain: imp-child
*/

/* ==========================================================================
   Design-Tokens
   Identisch zu den bestehenden Leistungsseiten, damit Template-gebaute und
   blockgebaute Seiten nicht auseinanderlaufen.
   ========================================================================== */

:root {
	/* Grund, Flaechen, Linien — Werte aus dem Designsystem "IMP Prototyp v2" */
	--imp-bg: #0a0a0c;
	--imp-bg-alt: #070709;
	--imp-surface: #101014;
	--imp-surface-2: #16161b;
	--imp-surface-3: #1e1e24;

	--imp-text: #f4f4f6;
	--imp-text-muted: #a2a2ac;
	--imp-text-dim: #83838d;

	/* Ein Gold, gedeckt. Kein Gelb, kein Orange, kein Verlauf mehr. */
	--imp-gold: #c9992f;
	--imp-accent: #c9992f;
	--imp-accent-hell: #e8bb62;
	--imp-accent-ink: #12100a;
	/* Bleibt als Name erhalten, damit alte Stellen nicht brechen: jetzt flach. */
	--imp-grad: #c9992f;

	--imp-border: #1e1e24;
	--imp-border-strong: #2a2a31;
	--imp-border-hell: #3a3a43;

	/* Schrift */
	--imp-font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--imp-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Raster */
	--imp-maxw: 1240px;
	--imp-pad-x: 32px;
	--imp-sec-pad: clamp(88px, 10vw, 160px);
	--imp-sec-pad-sm: 80px;

	/* Keine Rundungen, keine Schatten. Der Entwurf kennt beides nicht. */
	--imp-radius: 0;
	--imp-radius-sm: 0;
	--imp-radius-pill: 999px;
	--imp-shadow: none;
	--imp-shadow-sm: none;
}

/* ==========================================================================
   Grundtypografie
   Open Sans fuer Lauftext und Ueberschriften, IBM Plex Mono fuer Labels,
   Zahlen und Zeilen, die wie technische Angaben wirken sollen.
   Ueberschriften sind bewusst leicht: 300 fuer H1, 500 fuer H2.
   ========================================================================== */

body,
.site,
.main-navigation a,
button,
input,
textarea,
select {
	font-family: var(--imp-font);
}

body {
	background: var(--imp-bg);
	color: var(--imp-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--imp-font);
	color: var(--imp-text);
	letter-spacing: -.02em;
	text-wrap: pretty;
}

/* Der Rahmen, den jeder Bereich nutzt. Steht auch in projekte.css;
   hier, damit der Fuss ihn auf jeder Seite hat. */
.imp-wrap {
	max-width: var(--imp-maxw);
	margin-inline: auto;
	padding-inline: var(--imp-pad-x);
	width: 100%;
}

::selection {
	background: var(--imp-accent);
	color: var(--imp-accent-ink);
}

/* Kopfzeile: bleibt beim Scrollen stehen, leicht durchscheinend */
.site-header,
#masthead {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(10, 10, 12, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--imp-border);
}

/* Hauptmenue in Mono, Versalien, wie im Entwurf. Der aktive Punkt in Gold. */
.main-navigation .main-nav > ul > li > a {
	font-family: var(--imp-mono);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--imp-text-muted);
	transition: color .2s ease;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a,
.main-navigation .main-nav > ul > li.current-menu-parent > a {
	color: var(--imp-accent-hell);
}

.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
	color: var(--imp-gold);
}

/* Untermenue: Flaeche mit Rahmen, Eintraege in Open Sans */
.main-navigation ul ul {
	background: var(--imp-surface);
	border: 1px solid var(--imp-border-strong);
	box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
	padding: 8px 0;
	min-width: 320px;
}

.main-navigation ul ul li a {
	font-family: var(--imp-font);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--imp-text);
	padding: 13px 24px;
	transition: color .2s ease, background .2s ease;
}

.main-navigation ul ul li:first-child a {
	font-weight: 500;
	border-bottom: 1px solid var(--imp-border);
}

.main-navigation ul ul li a:hover,
.main-navigation ul ul li.current-menu-item a {
	color: var(--imp-accent);
	background: var(--imp-surface-2);
}

/* "Anfrage" rechts neben dem Menue, umrandet */
.menu-bar-items {
	align-items: center;
}

.imp-kopf-anfrage {
	display: inline-block;
	margin-left: 24px;
	border: 1px solid var(--imp-gold);
	color: var(--imp-gold);
	font-family: var(--imp-mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 14px 22px;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.imp-kopf-anfrage:hover,
.imp-kopf-anfrage:focus {
	background: var(--imp-gold);
	color: var(--imp-accent-ink);
}

@media (max-width: 768px) {

	.imp-kopf-anfrage {
		margin-left: 12px;
		padding: 12px 16px;
		font-size: 10px;
	}
}

/* ==========================================================================
   Fuss: vier Spalten, darunter die Zeile mit Jahr und Rechtslinks
   ========================================================================== */

.imp-fuss {
	background: var(--imp-bg-alt);
	border-top: 1px solid var(--imp-border);
	color: var(--imp-text-muted);
}

.imp-fuss__spalten {
	padding-block: 72px 48px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 48px;
}

.imp-fuss__logo {
	height: 48px;
	width: auto;
	display: block;
}

.imp-fuss__marke p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--imp-text-muted);
	margin: 20px 0 0;
	max-width: 32ch;
}

.imp-fuss__h {
	display: block;
	font-family: var(--imp-mono);
	font-size: 10px;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--imp-text-dim);
}

.imp-fuss__liste {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.imp-fuss__liste a,
.imp-fuss__adresse a {
	font-size: 15px;
	line-height: 1.3;
	color: var(--imp-text-muted);
	text-decoration: none;
	transition: color .2s ease;
}

.imp-fuss__liste a:hover,
.imp-fuss__adresse a:hover {
	color: var(--imp-accent);
}

.imp-fuss__adresse {
	font-style: normal;
	font-size: 15px;
	line-height: 1.8;
	color: var(--imp-text-muted);
	margin: 20px 0 0;
}

.imp-fuss__sozial {
	margin-top: 20px;
	grid-auto-flow: column;
	justify-content: start;
	gap: 20px;
}

.imp-fuss__zeile {
	border-top: 1px solid var(--imp-border);
}

.imp-fuss__zeile-inner {
	padding-block: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	font-family: var(--imp-mono);
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--imp-text-dim);
}

.imp-fuss__zeile a {
	color: inherit;
	text-decoration: none;
}

.imp-fuss__zeile a:hover {
	color: var(--imp-accent);
}


@media (max-width: 1100px) {
	:root {
		--imp-sec-pad: 72px;
	}
}

@media (max-width: 768px) {
	:root {
		--imp-sec-pad: 56px;
	}
}

/* ==========================================================================
   Mobiles Slideout-Menü: Pfeil neben den Text
   GeneratePress rendert den Aufklapp-Pfeil als <span class="dropdown-menu-toggle">
   INNERHALB des Menü-Links, mit display:block. Ein Blockelement bricht immer
   in die nächste Zeile, egal wie viel Platz daneben wäre. Bei einem langen
   Eintrag wie "Veranstaltungstechnik" entsteht dadurch eine leere Zeile mit
   einsamem Pfeil darunter.
   Lösung: den Link zur Flex-Zeile machen, Text links, Pfeil rechts.
   ========================================================================== */

#generate-slideout-menu .menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-right: 20px;
}

#generate-slideout-menu .dropdown-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	/* Grössere Tippfläche, ohne die Zeilenhöhe zu verändern */
	min-width: 44px;
	min-height: 44px;
	margin-right: -12px;
}

#generate-slideout-menu .dropdown-menu-toggle .gp-icon {
	display: inline-flex;
}

/* Breiteres Slideout und grössere Tippfläche für den Aufklapp-Pfeil.
   Vorher: 265px auf einem 375px-Display, also 71 Prozent. Der Pfeil sass
   dadurch weit links vom Displayrand und war mit dem Daumen schlecht zu
   treffen. Jetzt 88 Prozent der Breite, gedeckelt auf 400px, damit es auf
   Tablets nicht ins Absurde läuft. */

#generate-slideout-menu {
	width: min(88vw, 400px);
}

/* Der Pfeil bekommt eine sichtbar abgesetzte Fläche, damit erkennbar ist,
   dass er ein eigener Schalter ist und nicht Teil des Links. */
#generate-slideout-menu .dropdown-menu-toggle {
	min-width: 56px;
	min-height: 56px;
	margin-right: -14px;
	border-left: 1px solid rgba(255, 255, 255, .12);
	transition: background-color .2s ease;
}

#generate-slideout-menu .dropdown-menu-toggle:hover,
#generate-slideout-menu .dropdown-menu-toggle:focus-visible {
	background-color: rgba(255, 255, 255, .06);
}

#generate-slideout-menu .dropdown-menu-toggle .gp-icon svg {
	width: 1.15em;
	height: 1.15em;
}