/* ═══════════════════════════════════════════════════════════════════════
   ZEYNAH — die drei Formularseiten                          04.09.2026
   ───────────────────────────────────────────────────────────────────────
   Für `/kontakt`, `/bedarf` und `/anbieter`.

   WARUM ES DIESE DATEI GIBT
   `partner.html` trug am 02.09. genau dieses Gerüst inline im <head> —
   Kopfleiste, Kachelraster, Formularfelder. Drei weitere Seiten mit
   demselben Aufbau hätten daraus vier Kopien gemacht, und die vierte
   wäre nach dem ersten Fix von den anderen abgewichen. Eine Datei,
   vier Seiten.

   KEINE EIGENEN FARBEN. Jeder Wert kommt aus `zeynah-grundlage.css`
   (Farbgesetz 13.08.2026: kein Schwarz, kein Weiß, kein Braun, kein
   Grau als Fläche, kein Violett). Wer hier einen Farbwert direkt
   hinschreibt, taucht in keiner Stilblatt-Suche auf und wird beim
   nächsten Bandwechsel falsch — genau so ist am 07.08. creme Schrift
   auf cremer Fläche entstanden.

   `schaufenster.css` wird von diesen Seiten bewusst NICHT geladen —
   sonst bricht `abschnitteZaehlen()` ab und die Bänder bleiben
   ungefärbt.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kopfleiste ────────────────────────────────────────────────────────
   `nav:not(#zy-nav)`, weil die Grundlage ihre Pfeilleiste als zweites
   <nav id="zy-nav"> in den Body hängt. Übernommen aus partner.html. */
nav:not(#zy-nav) {
	position: sticky; top: 0; z-index: 60;
	background: rgba(var(--zy-tief-rgb), .82);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	backdrop-filter: blur(18px) saturate(1.2);
	border-bottom: 1px solid var(--zy-rand-4);
}
nav:not(#zy-nav) .nav-inner {
	max-width: 1240px; margin: 0 auto; padding: .6rem 1.2rem;
	display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.nav-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.nav-logo img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.nav-logo span { display: flex; flex-direction: column; line-height: 1.15; }
.nav-name { font: 700 .95rem/1.15 'DM Sans', system-ui, sans-serif; color: var(--zy-creme); }
.nav-sub  { font: 500 .68rem/1.2 'IBM Plex Mono', ui-monospace, monospace;
            letter-spacing: .08em; color: var(--zy-schwach); opacity: .82; }
.nav-spacer { flex: 1 1 auto; }

/* ── Kachelraster ─────────────────────────────────────────────────── */
.zf-raster {
	display: grid; gap: 16px; margin-top: 26px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.zf-kachel { padding: 1.5rem 1.6rem; }
.zf-kachel h3 { font-size: 1.08rem; margin: 0 0 .55rem; }
.zf-kachel p  { font-size: .95rem; line-height: 1.62; margin: 0 0 .5rem; }
.zf-kachel p:last-child { margin-bottom: 0; }
.zf-kachel a  { font-weight: 600; }
.zf-kachel .zy-knopf { margin-top: .9rem; }
.zf-leise { opacity: .78; font-size: .88rem !important; }
.zf-zahl {
	font: 600 .74rem/1 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .14em; opacity: .72; margin: 0 0 .5rem; display: block;
}

/* ── Wegeleiste (Knopfreihe) ──────────────────────────────────────── */
.zf-wege {
	display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem;
}

/* ── Der Stand-Hinweis unter dem Hero ─────────────────────────────────
   Sagt, wie weit ein Bereich wirklich ist. Er steht bewusst im Hero und
   nicht im Kleingedruckten: wer Pilot liest, bevor er das Formular
   ausfüllt, ist danach nicht enttäuscht. */
.zf-stand {
	margin-top: 1.4rem; padding: .85rem 1.15rem;
	border-left: 3px solid var(--zy-blau-hell);
	background: rgba(var(--zy-tief-2-rgb), .58);
	border-radius: 0 12px 12px 0;
	font-size: .92rem; line-height: 1.68;
	max-width: 46rem;
}

/* ── Formular ─────────────────────────────────────────────────────── */
.zy-form { max-width: 34rem; margin: 1.8rem auto 0; }
.zy-form input,
.zy-form select,
.zy-form textarea {
	width: 100%; padding: .85rem 1.1rem; margin-bottom: .9rem;
	border-radius: 12px; border: 1.5px solid var(--zy-rand-4);
	background: var(--zy-creme-2); color: var(--zy-text-tief);
	font: 400 .95rem/1.4 'DM Sans', system-ui, sans-serif; outline: none;
	transition: border-color .25s ease;
}
.zy-form input:focus,
.zy-form select:focus,
.zy-form textarea:focus { border-color: var(--zy-blau); }
.zy-form textarea { min-height: 7rem; resize: vertical; }
.zy-form .zy-knopf { width: 100%; justify-content: center; }
.zf-recht {
	margin-top: 1rem; font-size: .82rem; line-height: 1.6; opacity: .82;
	text-align: center;
}
.zf-recht a { text-decoration: underline; }

/* Auf dunklem Band bekommt die Erklärzeile die helle Blauschrift, auf
   hellem die dunkle — sonst steht sie einmal von beiden zu leise da. */
.zy-band.zy-dunkel .zf-recht a { color: var(--zy-blau-hell); }
.zy-band:not(.zy-dunkel) .zf-recht a { color: var(--zy-blau-t); }

/* ── Handy ────────────────────────────────────────────────────────────
   360 px ist das Maß, an dem gemessen wird (Samsung), nicht 1564 px. */
@media (max-width: 560px) {
	.nav-sub { display: none; }
	/* Gemessen am 04.09.2026 im 360-px-Rahmen: der Knopf in der
	   Kopfleiste war 30 px hoch. 44 px ist das uebliche Mindestmass
	   fuer ein Tippziel — darunter trifft ein Daumen daneben. */
	nav:not(#zy-nav) .zy-knopf { min-height: 44px; align-items: center; }
	.zf-raster { grid-template-columns: 1fr; }
	.zf-wege .zy-knopf { width: 100%; justify-content: center; }
}