/*
 * fx15_kontakt_stoerer — Ansprechpartner-Box mit Offen/Geschlossen-Status.
 *
 * Farben, Schriftgroessen und Laufweiten kommen ausschliesslich als Tokens aus
 * project.css. Hier stehen nur Raster, Abstaende und Zustaende dieses Moduls.
 *
 * Das Raster hat vier Bereiche (Portraet, Text, Person, Aktionen), die desktop
 * und mobil unterschiedlich platziert werden. Deshalb ueberall explizite
 * grid-column/grid-row-Angaben statt Autoplatzierung — die Quelltextreihenfolge
 * ist die des Desktops, mobil wandert die Person nach oben neben das Portraet.
 */

/*
 * Der harte Versatz-Schatten ragt 12px nach rechts und unten aus der Box. Ohne
 * Ausgleich schneidet ihn der Seitenrand ab. .fx-band setzt padding-inline,
 * diese Regel gewinnt ueber die hoehere Spezifitaet.
 */
section.fx15_kontakt_stoerer { padding-right: calc(var(--fx-gutter) + 12px); }

/* ---------- Box ---------- */

section.fx15_kontakt_stoerer .fx15_box {
	display: grid;
	/* minmax(0, 1fr): 1fr waere minmax(auto, 1fr) und wuerde von einer langen
	   Ueberschrift ohne Trennmoeglichkeit gesprengt. */
	grid-template-columns: 280px minmax(0, 1fr) 440px;
	grid-template-rows: minmax(0, 1fr) auto;
	background: var(--fx-white);
	border: 1px solid var(--fx-navy);
	box-shadow: var(--fx-versatz);
}

section.fx15_kontakt_stoerer .fx15_portrait { grid-column: 1; grid-row: 1 / 3; }
section.fx15_kontakt_stoerer .fx15_text     { grid-column: 2; grid-row: 1; }
section.fx15_kontakt_stoerer .fx15_person   { grid-column: 2; grid-row: 2; }
section.fx15_kontakt_stoerer .fx15_aktionen { grid-column: 3; grid-row: 1 / 3; }

/* Fehlt ein Bereich, ruecken die uebrigen nach — sonst bliebe eine leere Spalte. */
section.fx15_kontakt_stoerer .fx15_box--ohne-portrait { grid-template-columns: minmax(0, 1fr) 440px; }
section.fx15_kontakt_stoerer .fx15_box--ohne-portrait .fx15_text,
section.fx15_kontakt_stoerer .fx15_box--ohne-portrait .fx15_person { grid-column: 1; }
section.fx15_kontakt_stoerer .fx15_box--ohne-portrait .fx15_aktionen { grid-column: 2; }

section.fx15_kontakt_stoerer .fx15_box--ohne-aktionen { grid-template-columns: 280px minmax(0, 1fr); }
section.fx15_kontakt_stoerer .fx15_box--ohne-portrait.fx15_box--ohne-aktionen { grid-template-columns: minmax(0, 1fr); }

section.fx15_kontakt_stoerer .fx15_box--ohne-person .fx15_text { grid-row: 1 / 3; }
section.fx15_kontakt_stoerer .fx15_box--ohne-text .fx15_person { grid-row: 1 / 3; }

/* ---------- Portraet ---------- */

section.fx15_kontakt_stoerer .fx15_portrait {
	position: relative;
	/* Der Entwurfswert 340px, zusaetzlich an der Bildschirmhoehe gedeckelt:
	   auf einem 1440x750-Laptop ist die Hoehe die knappe Groesse. */
	min-height: min(340px, var(--fx-buehne-mittel));
	background: var(--fx-tint);
	overflow: hidden;
}

section.fx15_kontakt_stoerer .fx15_portrait_bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Sprossenlinie: weisse 3px-Linie bei 50%, das Fensterkreuz-Motiv. */
section.fx15_kontakt_stoerer .fx15_sprosse {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--fx-glare-55);
	pointer-events: none;
}

section.fx15_kontakt_stoerer .fx15_portrait_marke {
	position: absolute;
	left: 0;
	top: 0;
	padding: 9px 14px;
	background: var(--fx-overlay);
	color: var(--fx-white);
}

/* ---------- Textspalte ---------- */

section.fx15_kontakt_stoerer .fx15_text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 44px 48px 0;
	min-width: 0;
}

/* Ohne Person traegt die Textspalte den unteren Innenabstand selbst. */
section.fx15_kontakt_stoerer .fx15_box--ohne-person .fx15_text { padding-bottom: 44px; }

section.fx15_kontakt_stoerer .fx15_topline { margin: 0 0 14px; }

section.fx15_kontakt_stoerer .fx15_titel {
	margin: 0;
	font-size: var(--fx-fs-h2-stoerer);
	line-height: 1.04;
}

section.fx15_kontakt_stoerer .fx15_absatz {
	margin: 18px 0 0;
	color: var(--fx-text);
}

/* ---------- Status-Zeile ---------- */

section.fx15_kontakt_stoerer .fx15_status {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	font: 700 var(--fx-fs-label)/1.2 var(--font-body);
	letter-spacing: var(--fx-ls-versal);
	text-transform: uppercase;
	color: var(--fx-navy);
}

/*
 * Muss die display:flex-Regel schlagen, solange das JS die Zeile noch nicht
 * freigegeben hat — sonst zeigte die Seite kurz beide Statustexte.
 */
section.fx15_kontakt_stoerer .fx15_status[hidden],
section.fx15_kontakt_stoerer .fx15_status_text[hidden] { display: none; }

section.fx15_kontakt_stoerer .fx15_status_punkt {
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	background: var(--fx-line-form);
}

section.fx15_kontakt_stoerer .fx15_status--offen .fx15_status_punkt { background: var(--fx-offen); }

/* Die mobile Fassung steht neben dem Portraet und ist oberhalb 991px stumm. */
section.fx15_kontakt_stoerer .fx15_status--mobil { display: none; }

/* ---------- Person ---------- */

section.fx15_kontakt_stoerer .fx15_person {
	padding: 28px 48px 44px;
	min-width: 0;
}

/* Nur ein Status ohne Name und Rolle ergaebe desktop eine Linie ohne Inhalt. */
section.fx15_kontakt_stoerer .fx15_person--nur-status { display: none; }

section.fx15_kontakt_stoerer .fx15_person_inhalt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 14px;
	padding-top: 22px;
	border-top: 1px solid var(--fx-line);
}

section.fx15_kontakt_stoerer .fx15_name {
	/* Kein eigenes Groessen-Token fuer den Namen vorhanden — --fx-fs-btn-klein
	   trifft die mobile Vorgabe genau und liegt desktop 1px darunter. */
	font: 800 var(--fx-fs-btn-klein)/1.2 var(--font-heading);
	color: var(--fx-navy);
	overflow-wrap: anywhere;
}

section.fx15_kontakt_stoerer .fx15_rolle { color: var(--fx-azure); }

/* ---------- Aktionen ---------- */

section.fx15_kontakt_stoerer .fx15_aktionen {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	border-left: 1px solid var(--fx-navy);
	min-width: 0;
}

section.fx15_kontakt_stoerer .fx15_anruf {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 36px 40px;
	background: var(--fx-navy);
	text-decoration: none;
	transition: background-color .18s ease;
}

section.fx15_kontakt_stoerer .fx15_anruf:hover,
section.fx15_kontakt_stoerer .fx15_anruf:focus-visible { background: var(--fx-navy-hover); }

section.fx15_kontakt_stoerer .fx15_anruf_label {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 700 var(--fx-fs-label)/1 var(--font-body);
	letter-spacing: var(--fx-ls-button);
	text-transform: uppercase;
	color: var(--fx-ice);
}

/* project.css faerbt das Telefon-Icon azurblau — auf dem dunklen Block zu schwach. */
section.fx15_kontakt_stoerer .fx15_anruf_label .fx-icon { stroke: var(--fx-ice); }

section.fx15_kontakt_stoerer .fx15_anruf_nummer {
	font: 800 var(--fx-fs-tel-gross)/1 var(--font-heading);
	color: var(--fx-white);
	overflow-wrap: anywhere;
}

section.fx15_kontakt_stoerer .fx15_anruf_zeiten {
	/* --fx-fs-nav ist der einzige feste 16px-Wert und wird mobil nicht kleiner. */
	font: 500 var(--fx-fs-nav)/1.4 var(--font-body);
	color: var(--fx-mist);
}

section.fx15_kontakt_stoerer .fx15_termin {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 40px;
	min-height: 44px;
	background: var(--fx-white);
	color: var(--fx-azure);
	text-decoration: none;
	transition: background-color .18s ease;
}

section.fx15_kontakt_stoerer .fx15_termin:hover,
section.fx15_kontakt_stoerer .fx15_termin:focus-visible { background: var(--fx-tint); }

section.fx15_kontakt_stoerer .fx15_termin_inhalt { min-width: 0; }

section.fx15_kontakt_stoerer .fx15_termin_label {
	display: block;
	margin-bottom: 10px;
	font: 700 var(--fx-fs-label)/1 var(--font-body);
	letter-spacing: var(--fx-ls-button);
	text-transform: uppercase;
	color: var(--fx-azure);
}

section.fx15_kontakt_stoerer .fx15_termin_text {
	display: block;
	font: 700 var(--fx-fs-tel-klein)/1.2 var(--font-heading);
	color: var(--fx-navy);
	overflow-wrap: anywhere;
}

section.fx15_kontakt_stoerer .fx15_termin .fx-icon { color: var(--fx-azure); }

/* ---------- Zwischenbreite 992–1199 ---------- */

/*
 * Portraet (280) plus Aktionen (440) lassen hier nur 150–400px fuer die
 * Textspalte — die Ueberschrift stand fuenfzeilig, der Absatz ein Wort pro
 * Zeile. Die Aktionen wandern deshalb als Leiste unter Portraet und Text,
 * Anruf und Termin nebeneinander. Die Textspalte bekommt die volle Restbreite.
 */
@media (min-width: 992px) and (max-width: 1199px) {
	section.fx15_kontakt_stoerer .fx15_box,
	section.fx15_kontakt_stoerer .fx15_box--ohne-aktionen {
		grid-template-columns: 280px minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto auto;
	}
	section.fx15_kontakt_stoerer .fx15_box--ohne-portrait,
	section.fx15_kontakt_stoerer .fx15_box--ohne-portrait.fx15_box--ohne-aktionen {
		grid-template-columns: minmax(0, 1fr);
	}

	section.fx15_kontakt_stoerer .fx15_aktionen,
	section.fx15_kontakt_stoerer .fx15_box--ohne-portrait .fx15_aktionen {
		grid-column: 1 / -1;
		grid-row: 3;
		/* Spaltenzahl folgt den vorhandenen Kindern: fehlt Anruf oder Termin,
		   fuellt der verbleibende Block die ganze Leiste. */
		grid-template-rows: auto;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		border-left: 0;
		border-top: 1px solid var(--fx-navy);
	}
}

/* ---------- Mobil ---------- */

@media (max-width: 991px) {
	section.fx15_kontakt_stoerer { padding-right: calc(var(--fx-gutter) + 6px); }

	section.fx15_kontakt_stoerer .fx15_box {
		grid-template-columns: 104px minmax(0, 1fr);
		grid-template-rows: auto;
		box-shadow: var(--fx-versatz-klein);
	}

	/* Kopf aus Portraet und Person, darunter Text, Anruf, Termin. */
	section.fx15_kontakt_stoerer .fx15_portrait { grid-column: 1; grid-row: 1; }
	section.fx15_kontakt_stoerer .fx15_person   { grid-column: 2; grid-row: 1; }
	section.fx15_kontakt_stoerer .fx15_text     { grid-column: 1 / -1; grid-row: 2; }
	section.fx15_kontakt_stoerer .fx15_aktionen { grid-column: 1 / -1; grid-row: 3; }

	section.fx15_kontakt_stoerer .fx15_box--ohne-portrait { grid-template-columns: minmax(0, 1fr); }
	section.fx15_kontakt_stoerer .fx15_box--ohne-portrait .fx15_person { grid-column: 1 / -1; }
	section.fx15_kontakt_stoerer .fx15_box--ohne-person .fx15_portrait,
	section.fx15_kontakt_stoerer .fx15_box--ohne-person .fx15_text { grid-column: 1 / -1; }
	section.fx15_kontakt_stoerer .fx15_box--ohne-person .fx15_text { grid-row: 2; }

	section.fx15_kontakt_stoerer .fx15_portrait {
		height: 124px;
		min-height: 0;
		border-bottom: 1px solid var(--fx-line);
	}
	section.fx15_kontakt_stoerer .fx15_sprosse,
	section.fx15_kontakt_stoerer .fx15_portrait_marke { display: none; }

	section.fx15_kontakt_stoerer .fx15_person {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 8px;
		padding: 14px 16px;
		border-bottom: 1px solid var(--fx-line);
	}
	section.fx15_kontakt_stoerer .fx15_person--nur-status { display: flex; }

	/* Mobil steht die Person im Kopf — ohne Trennlinie und ohne Zusatzabstand. */
	section.fx15_kontakt_stoerer .fx15_person_inhalt {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding-top: 0;
		border-top: 0;
	}

	section.fx15_kontakt_stoerer .fx15_status { margin: 0; }
	section.fx15_kontakt_stoerer .fx15_status--desktop { display: none; }
	section.fx15_kontakt_stoerer .fx15_status--mobil { display: flex; }
	section.fx15_kontakt_stoerer .fx15_status[hidden] { display: none; }

	section.fx15_kontakt_stoerer .fx15_text {
		padding: 24px 20px 22px;
		justify-content: flex-start;
	}
	section.fx15_kontakt_stoerer .fx15_box--ohne-person .fx15_text { padding-bottom: 22px; }
	section.fx15_kontakt_stoerer .fx15_titel { line-height: 1.06; }
	section.fx15_kontakt_stoerer .fx15_absatz { margin-top: 12px; }

	section.fx15_kontakt_stoerer .fx15_aktionen {
		grid-template-rows: auto;
		border-left: 0;
	}

	section.fx15_kontakt_stoerer .fx15_anruf { gap: 10px; padding: 20px; }
	section.fx15_kontakt_stoerer .fx15_anruf_label .fx-icon { width: 14px; height: 14px; }

	section.fx15_kontakt_stoerer .fx15_termin {
		padding: 20px;
		min-height: 48px;
	}
	section.fx15_kontakt_stoerer .fx15_termin_label { margin-bottom: 8px; }
	section.fx15_kontakt_stoerer .fx15_termin .fx-icon { width: 20px; height: 20px; }
}

/* Unter 360px bleibt neben einem 104px-Portraet zu wenig fuer Name und Rolle. */
@media (max-width: 359px) {
	section.fx15_kontakt_stoerer .fx15_box { grid-template-columns: 84px minmax(0, 1fr); }
	section.fx15_kontakt_stoerer .fx15_portrait { height: 108px; }
	section.fx15_kontakt_stoerer .fx15_person { padding: 12px 12px; gap: 6px; }
	section.fx15_kontakt_stoerer .fx15_text { padding: 20px 16px 18px; }
	section.fx15_kontakt_stoerer .fx15_anruf,
	section.fx15_kontakt_stoerer .fx15_termin { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	section.fx15_kontakt_stoerer .fx15_anruf,
	section.fx15_kontakt_stoerer .fx15_termin { transition: none; }
}