/* =========================================================================
   s14 — Anfrage-Baustein und gekürzte Galerie

   Zwei Dinge in einer Datei, weil sie zusammen auftreten: Die gekürzte
   Galerie schafft erst den Platz, an dem der Anfrage-Baustein sichtbar wird.
   Wer 43 Bilder untereinander sieht, scrollt an allem darunter vorbei.

   Geladen wird die Datei, wo der Baustein vorkommt (inc/anfrage.php): unter
   jedem Magazinbeitrag, auf jeder Modellseite und ueberall dort, wo
   [s14_anfrage] von Hand gesetzt ist. Die Galerie-Regeln kosten nichts, wenn
   keine Galerie da ist.
   ====================================================================== */

/* -------------------------------------------------------------------------
   Anfrage-Baustein

   ZUR SCHREIBWEISE: Die Beschriftungen der dunklen Ansprache-Flaeche stehen
   als `.s14-anfrage .s14-anfrage__…` und nicht als einzelne Klasse.

   Das ist kein Schoenheitsfehler, sondern noetig. Auf der Modellseite gilt
   `.s14-ms-artikel p { color: #2c3e4f }` aus s14-base.css. Dieser Selektor
   wiegt Klasse plus Element und schlaegt damit eine einzelne Klasse — die
   drei Absaetze im navyfarbenen Feld standen deshalb in Dunkelblau auf
   Dunkelblau und waren praktisch unlesbar (gemessen am 26.08.2026:
   #2c3e4f auf #1d3247).

   Zwei Klassen wiegen schwerer als Klasse plus Element. Das genuegt, und es
   bleibt ohne `!important` — wer spaeter etwas ueberschreiben will, kann das
   weiterhin auf normalem Weg.
   ---------------------------------------------------------------------- */

.s14-anfrage {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	margin: 2.5rem 0;
	border: 1px solid #dfe4e8;
	border-radius: 10px;
	background: #fff;
}

.s14-anfrage__ansprache {
	flex: 0 0 236px;
	min-width: 200px;
	padding: 26px 24px;
	background: #1d3247;
}

.s14-anfrage .s14-anfrage__augen {
	margin: 0 0 10px;
	color: #cfe0d8;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.s14-anfrage .s14-anfrage__titel {
	margin: 0 0 12px;
	color: #fff;
	font-family: Kanit, system-ui, sans-serif;
	font-size: 21px;
	font-style: italic;
	font-weight: 700;
	line-height: 1.25;
}

.s14-anfrage .s14-anfrage__text {
	margin: 0;
	color: #c3d0dc;
	font-size: 13.5px;
	line-height: 1.6;
}

.s14-anfrage__formular {
	flex: 1;
	min-width: 260px;
	padding: 22px 24px;
}

.s14-anfrage__paar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 9px;
}

.s14-anfrage__feld { display: block; margin-bottom: 9px; }

.s14-anfrage .s14-anfrage__marke {
	display: block;
	margin-bottom: 4px;
	color: #4a6178;
	font-size: 12.5px;
	font-weight: 600;
}

/*
 * box-sizing muss hier ausdrücklich stehen.
 *
 * Das Theme setzt es nicht global, und die Vorgabe des Browsers ist
 * content-box: Padding und Rahmen kommen dann zur Breite hinzu. Bei
 * `width: 100%` wird jedes Feld dadurch 26 Pixel breiter als seine Spalte —
 * gemessen am 25.08.2026: 235 statt 208 Pixel. Die beiden Felder oben
 * überlappten sich, und das rechte ragte einen Pixel über die Karte hinaus.
 */
.s14-anfrage__feld input,
.s14-anfrage__feld textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #dfe4e8;
	border-radius: 4px;
	background: #f6f7f8;
	color: #10171f;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
}

.s14-anfrage__feld textarea { resize: vertical; min-height: 84px; }

.s14-anfrage__feld input:focus,
.s14-anfrage__feld textarea:focus {
	outline: 2px solid #1d3247;
	outline-offset: 1px;
	background: #fff;
}

.s14-anfrage .s14-anfrage__einwilligung {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0 16px;
	color: #4a6178;
	font-size: 12px;
	line-height: 1.45;
}

.s14-anfrage__einwilligung input {
	box-sizing: border-box;
	margin: 2px 0 0;
	flex: 0 0 auto;
}

/* Der Hausverlauf, wie ihn die übrigen Knöpfe tragen. */
.s14-anfrage .s14-anfrage__knopf {
	padding: 11px 26px;
	border: 0;
	border-radius: 4px;
	background: linear-gradient(180deg, #e0241b 0%, #c41e16 100%);
	color: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

/* Der Honigtopf muss für Roboter erreichbar bleiben — deshalb aus dem Bild
   geschoben statt display:none. Ein verstecktes Feld, das gar nicht existiert,
   wird auch nicht ausgefüllt, und dann fängt die Falle nichts. */
.s14-anfrage__topf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
	.s14-anfrage .s14-anfrage__knopf:hover { background: linear-gradient(180deg, #e8352c 0%, #d0231a 100%); }
}

/* -------------------------------------------------------------------------
   Auf Modellseiten

   Gemessen am 26.08.2026 an /modelle/e30/: Der Fließtext der Modellseite
   steht in 740 Pixeln, der Abschnitt selbst ist 1020 Pixel breit. Über die
   volle Spaltenbreite gezogen stünde das Formular 280 Pixel weiter aus als
   jeder Absatz darüber — es wirkte auseinandergezogen, und die
   Ansprache-Fläche links würde zum schmalen Streifen neben einem sehr
   breiten Formular.

   Unter einem Magazinbeitrag steht der Baustein rund 60 Pixel breiter als
   der Text. Genau dieses Verhältnis bekommt er hier: 800 zu 740. Links
   bündig, weil die ganze Spalte links bündig läuft.

   Der eigene Aussenabstand entfällt — den Abstand zu den Nachbarabschnitten
   setzt bereits `.s14-ms-artikel > section + section` in s14-base.css.
   ---------------------------------------------------------------------- */

.s14-ms-anfrage .s14-anfrage {
	max-width: 800px;
	margin: 0;
}

/* -------------------------------------------------------------------------
   Gekürzte Galerie

   Gekürzt wird über die Höhe, nicht über das Ausblenden einzelner Zeilen:
   Die Kachelgalerie rechnet die Breiten je Zeile aus, und die Vier-Pixel-Fuge
   zwischen den Zeilen kommt aus einer Regel innerhalb der Galerie. Wer dort
   Knoten verschiebt, verliert beides.
   ---------------------------------------------------------------------- */

.s14-galkurz .tiled-gallery__gallery {
	overflow: hidden;
	transition: max-height .65s ease;
}

/* Trägerfläche für das Overlay — die Kachel selbst bleibt unberührt. */
.s14-galkurz__wirt { position: relative; }

.s14-galkurz__mehr {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: rgba(10, 12, 16, .62);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}

.s14-galkurz__mehr b {
	font-family: Kanit, system-ui, sans-serif;
	font-size: 34px;
	font-style: italic;
	font-weight: 800;
	line-height: 1;
}

.s14-galkurz__mehr small {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
}

.s14-galkurz__mehr:focus-visible { outline: 3px solid #e0241b; outline-offset: -3px; }

@media (hover: hover) and (pointer: fine) {
	.s14-galkurz__mehr:hover { background: rgba(10, 12, 16, .72); }
}

@media (prefers-reduced-motion: reduce) {
	.s14-galkurz .tiled-gallery__gallery { transition: none; }
}