/*
 * Block: Stoerer
 *
 * Figma: weisse Leiste 1320 x 93, Icon 75x57 bei x=16, Text ab x=111,
 * Button rechtsbuendig. Der Block steht im Entwurf auf einem gelben Band,
 * deshalb ist die Leiste selbst weiss und hat keinen eigenen Aussenabstand
 * nach oben.
 */

/*
 * Kein eigener Aussenabstand - den vergibt base.css, Abschnitt 6b.
 * Der Stoerer sitzt dort bewusst dichter unter dem Band darueber.
 */

.dc-stoerer__leiste {
	display: flex;
	align-items: center;
	gap: var(--dc-abstand-element);
	min-height: 93px;   /* Figma */
	/*
	 * INNENABSTAND OBEN UND UNTEN (DC-63).
	 *
	 * Hier stand nur padding-inline. Bei einer einzelnen Zeile faellt das
	 * nicht auf - die Mindesthoehe von 93 sorgt dann fuer Luft. Sobald der
	 * Text mehrere Zeilen hat, klebte er oben und unten an der Kante.
	 *
	 * Nachgemessen im Entwurf (Ueber_uns_Lernen_foschen_weiterdenken,
	 * 3005:588): Der Kasten liegt bei y=140 und ist 174 hoch, der Text
	 * beginnt bei 167 und endet bei 288. Das sind 27 oben und 26 unten.
	 */
	padding-block: 27px 26px;   /* Figma 3005:588 */
	padding-inline: 16px;
	background-color: var(--dc-weiss);
}

.dc-stoerer__icon {
	display: block;
	width: 75px;    /* Figma */
	height: auto;
	flex-shrink: 0;
}

/*
 * Der Inhalt nimmt den Platz zwischen Icon und Button ein und schiebt den
 * Button dadurch an den rechten Rand.
 */
.dc-stoerer__inhalt {
	flex: 1;
}

/*
 * Zwei Schnitte, weil der Entwurf beide zeigt: Auf den Muster-Seiten ist
 * der ganze Satz fett, auf "Diversity Management" nur das Praefix ("Ziel:",
 * "Das Ergebnis:") und der Rest laeuft normal weiter.
 */
.dc-stoerer__text {
	margin: 0;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
	font-weight: var(--dc-gewicht-bold);
}

.dc-stoerer--ton-normal .dc-stoerer__text {
	font-weight: var(--dc-gewicht-book);
}

/*
 * Weiterfuehrende Links (Figma: News-Detail).
 * Aufzaehlungspunkte wie im Entwurf, Einzug knapp gehalten.
 */
.dc-stoerer__liste {
	margin: 4px 0 0;
	padding-inline-start: 1.5em;
	list-style: disc;
	font-size: var(--dc-fs-text);
	line-height: var(--dc-lh-text);
}

.dc-stoerer__liste a {
	color: var(--dc-schwarz);
	text-decoration: underline;
}

.dc-stoerer .dc-btn {
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * Kleine Bildschirme
 *
 * Nebeneinander bleibt fuer Icon, Satz und Button kein Platz. Gestapelt
 * bleibt die Reihenfolge Icon, Text, Button erhalten.
 * --------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

	.dc-stoerer__leiste {
		align-items: flex-start;
		flex-direction: column;
		gap: 16px;
		padding: 20px 16px;
	}

	.dc-stoerer__icon {
		width: 56px;
	}

	.dc-stoerer__inhalt {
		flex: none;
	}
}

/* ---------------------------------------------------------------------------
 * Zwei Breiten
 *
 * "voll" ist der Normalfall: Die Leiste laeuft ueber die ganze
 * Containerbreite (Figma Muster_Keynote 1600:677, 1320 x 93).
 *
 * "text" setzt sie auf die Breite der beiden Textspalten daneben und
 * buendig mit ihnen - so steht sie unter "Themen und Inhalte" (1158:1618)
 * und unter "Unser didaktischer Ansatz" (1323:671): 873 breit, beginnend
 * bei 447, also mit der linken Titelspalte davor.
 * --------------------------------------------------------------------------- */

.dc-stoerer--text .dc-stoerer__leiste {
	max-width: 873px;   /* Figma */
	margin-inline-start: auto;
}

@media (max-width: 991.98px) {

	/* Gestapelt gibt es keine Titelspalte mehr, vor der sie zurueckweichen
	   muesste - die Leiste nimmt die ganze Breite. */
	.dc-stoerer--text .dc-stoerer__leiste {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
 * Ausfuehrung "beitrag": links ausgerichtet und hoeher
 *
 * Auf der News-Detailseite (Figma 1264:1301) steht ueber dem Stoerer keine
 * Titelspalte, sondern der Fliesstext - er beginnt an derselben Kante wie
 * dieser, bei x=300. Das "margin-inline-start: auto" von "--text" schoebe
 * ihn dagegen nach rechts; nachgemessen sass er bei 747 statt 300.
 *
 * Die Mindesthoehe ist dort 116 statt 93: Der Entwurf setzt 27 Innenabstand
 * oben, 60 Text (drei Zeilen) und 29 unten. Die 93 der Muster-Seiten gelten
 * fuer die einzeilige Ausfuehrung mit Button.
 *
 * Immer zusammen mit "--text" verwenden - die Breite von 873 kommt von dort.
 * --------------------------------------------------------------------------- */

.dc-stoerer--beitrag .dc-stoerer__leiste {
	margin-inline-start: 0;
	min-height: 116px;   /* Figma 1264:1301 */
}

/* ---------------------------------------------------------------------------
 * Abstand nach einem Textabschnitt: 40, nicht 60
 *
 * base.css setzt 60 fuer jeden Stoerer. Der Wert stammt von
 * Muster_Keynote_Individuell_zugeschnitten_stoerer (3001:1394) - dort steht
 * aber eine Ueberschrift im selben Rahmen ueber dem Kasten, und die haelt
 * 60 Abstand.
 *
 * Folgt der Stoerer auf einen Textabschnitt, sind es im Entwurf durchgehend
 * 40: Ueber_uns (3005:588) Text bis 100, Kasten ab 140;
 * Agentur_und_Meldestelle (3004:2351) dreimal dasselbe - 640/680, 1233/1273,
 * 1896/1936.
 *
 * Zwei Klassen, damit die Regel die aus base.css sticht: Block-CSS laedt
 * vor base.css, bei gleicher Spezifitaet gewaenne dort die 60.
 * --------------------------------------------------------------------------- */

main section.dc-zweispaltig + section.dc-stoerer {
	margin-block-start: 40px;   /* Figma 3005:588, 3004:2351 */
}


/* ---------------------------------------------------------------------------
 * Schmale Schirme: der Knopf nimmt die ganze Breite (DC-77)
 *
 * Der Kunde: "Im responsive Design rutscht der gelbe Button der CTAs nach
 * links. Ich glaube, die meisten Menschen nutzen die rechte Hand - dann muss
 * der Button nach rechts, gerade bei groesser werdenden Handys."
 *
 * Links oder rechts ist beides falsch: Auf einem 390 breiten Schirm ist ein
 * 196 breiter Knopf an einer der beiden Kanten fuer die jeweils andere Hand
 * schlecht erreichbar. Ueber die volle Breite ist er mit beiden Daumen zu
 * treffen, und die Frage stellt sich nicht mehr. Das ist auf Handys auch die
 * uebliche Form.
 * --------------------------------------------------------------------------- */

/*
 * Der Knopf ueber die volle Breite steht jetzt in assets/css/base.css und
 * gilt fuer JEDEN Knopf (DC-77) - hier stand die Regel zuerst, nur fuer
 * den Stoerer. Der Kunde am 13.09.2026: "laesst sich das auf alle Buttons
 * vererben?"
 */