/*
 * Einstiegsseite von doc.maennchen1.de.
 *
 * Der Farbteil ist aus den Handbuechern uebernommen, damit die Einstiegsseite
 * und die vier Handbuecher wie ein Haus aussehen. Was dort nur fuer Bildschirm-
 * fotos, Lichtbox und den Fassungshinweis gilt, fehlt hier -- auf dieser Seite
 * gibt es nichts davon. Dazu kommen die Teile, die es nur hier gibt: Suchfeld
 * und Kacheln.
 */

:root {
	/* CI */
	--m1-blau: #003b6a;
	--m1-oliv: #96a008;

	/* Abgeleitete Stufen, gleiche Hue */
	--m1-blau-tief: #002440;
	--m1-blau-mittel: #00538f;
	--m1-blau-zart: #e7eff6;

	/* Hilfsfarben */
	--m1-weiss: #ffffff;
	--m1-papier: #f5f7f9;
	--m1-linie: #d6dee6;
	--m1-text: #14212e;
	--m1-text-leise: #5a6875;

	/* Nur fuer die dunkle Darstellung. */
	--m1-blau-hell: #8cbde8;
	--m1-papier-dunkel: #101a24;
	--m1-linie-dunkel: #2a3b4d;
}

/* ── Helle Darstellung ─────────────────────────────────────────────── */

[data-md-color-scheme='default'] {
	--md-primary-fg-color: var(--m1-blau);
	--md-primary-fg-color--light: var(--m1-blau-mittel);
	--md-primary-fg-color--dark: var(--m1-blau-tief);
	--md-primary-bg-color: var(--m1-weiss);

	--md-accent-fg-color: var(--m1-blau-mittel);
	--md-typeset-a-color: var(--m1-blau-mittel);

	--md-default-bg-color: var(--m1-weiss);
	--md-typeset-color: var(--m1-text);

	--md-code-bg-color: var(--m1-papier);
	--md-code-fg-color: var(--m1-text);
}

[data-md-color-scheme='default'] .md-typeset h1,
[data-md-color-scheme='default'] .md-typeset h2,
[data-md-color-scheme='default'] .md-typeset h3 {
	color: var(--m1-blau);
}

/* ── Dunkle Darstellung ────────────────────────────────────────────── */

[data-md-color-scheme='slate'] {
	--md-hue: 210;

	--md-primary-fg-color: var(--m1-blau-tief);
	--md-primary-fg-color--light: var(--m1-blau-mittel);
	--md-primary-fg-color--dark: #001a2e;
	--md-primary-bg-color: var(--m1-weiss);

	--md-accent-fg-color: var(--m1-blau-hell);
	--md-typeset-a-color: var(--m1-blau-hell);

	--md-default-bg-color: var(--m1-papier-dunkel);
	--md-typeset-color: #e4ebf2;
}

[data-md-color-scheme='slate'] .md-typeset h1,
[data-md-color-scheme='slate'] .md-typeset h2,
[data-md-color-scheme='slate'] .md-typeset h3 {
	color: var(--m1-blau-hell);
}

/* ── Suche ueber alle Handbuecher ──────────────────────────────────── */

/*
 * Die Suche ist der Hauptzweck dieser Seite und soll das auch aussehen: ein
 * abgesetzter Block mit eigener Flaeche, grossem Feld und Lupe, nicht ein
 * Eingabefeld, das man fuer ein Formularfeld haelt.
 */
.start-suche { background:var(--m1-blau-zart); border:1px solid var(--m1-linie); border-radius:4px; margin:1.5rem 0 2.2rem; padding:1.1rem 1.2rem 1.2rem; position:relative; }
.start-suche__ueberschrift { color:var(--m1-blau); font-size:0.8rem; font-weight:700; margin:0 0 0.6rem; }

.start-suche__feld { align-items:center; background:var(--md-default-bg-color); border:2px solid var(--m1-linie); border-radius:3px; display:flex; gap:0.6rem; padding:0 0.85rem; transition:border-color 120ms ease-in-out, box-shadow 120ms ease-in-out; }
.start-suche__feld:focus-within { border-color:var(--m1-blau-mittel); box-shadow:0 0 0 3px rgba(0,83,143,0.16); }

.start-suche__lupe { fill:var(--m1-text-leise); flex:none; height:1.25rem; width:1.25rem; }
.start-suche__feld:focus-within .start-suche__lupe { fill:var(--m1-blau-mittel); }

.start-suche__eingabe { -webkit-appearance:none; appearance:none; background:transparent; border:0; color:var(--md-typeset-color); flex:1; font-family:inherit; font-size:0.95rem; padding:0.75rem 0; width:100%; }
.start-suche__eingabe::placeholder { color:var(--m1-text-leise); opacity:1; }
.start-suche__eingabe:focus { outline:none; }

.start-suche__lage { color:var(--m1-text-leise); font-size:0.7rem; margin:0.55rem 0 0; min-height:1em; }

/*
 * Die Trefferliste legt sich ueber die Kacheln, statt sie nach unten zu
 * schieben -- sonst springt die halbe Seite bei jedem Tastendruck.
 */
.start-suche__treffer { background:var(--md-default-bg-color); border:1px solid var(--m1-linie); border-radius:3px; box-shadow:0 6px 20px rgba(0,36,64,0.16); left:1.2rem; max-height:26rem; overflow-y:auto; position:absolute; right:1.2rem; top:calc(100% - 0.5rem); z-index:5; }

.start-suche__treffer-eintrag { border-bottom:1px solid var(--m1-linie); color:inherit; display:block; padding:0.6rem 0.75rem; text-decoration:none; }
.start-suche__treffer-eintrag:last-child { border-bottom:none; }
.start-suche__treffer-eintrag:hover { background:var(--m1-blau-zart); }

/* Mit den Pfeiltasten gewaehlt: der Balken links macht es auf einen Blick klar. */
.start-suche__treffer-eintrag.ist-gewaehlt { background:var(--m1-blau-zart); box-shadow:inset 3px 0 0 var(--m1-blau-mittel); }

.start-suche__kopf { align-items:baseline; display:flex; flex-wrap:wrap; gap:0.5em; }
.start-suche__quelle { background:var(--m1-blau-zart); border-radius:2px; color:var(--m1-blau); flex:none; font-size:0.6rem; font-weight:700; letter-spacing:0.02em; padding:0.1em 0.45em; text-transform:uppercase; }
.start-suche__titel { color:var(--m1-blau-mittel); font-size:0.78rem; font-weight:700; }
.start-suche__auszug { color:var(--m1-text-leise); font-size:0.7rem; line-height:1.5; margin:0.25rem 0 0; }
.start-suche__auszug mark { background:rgba(150,160,8,0.22); color:inherit; padding:0 0.1em; }

[data-md-color-scheme='slate'] .start-suche { background:#16273a; border-color:var(--m1-linie-dunkel); }
[data-md-color-scheme='slate'] .start-suche__ueberschrift { color:var(--m1-blau-hell); }
[data-md-color-scheme='slate'] .start-suche__feld,
[data-md-color-scheme='slate'] .start-suche__treffer { border-color:var(--m1-linie-dunkel); }
[data-md-color-scheme='slate'] .start-suche__treffer-eintrag { border-bottom-color:var(--m1-linie-dunkel); }
[data-md-color-scheme='slate'] .start-suche__treffer-eintrag:hover { background:#1c3049; }
[data-md-color-scheme='slate'] .start-suche__treffer-eintrag.ist-gewaehlt { background:#1c3049; box-shadow:inset 3px 0 0 var(--m1-blau-hell); }
[data-md-color-scheme='slate'] .start-suche__quelle { background:#1c3049; color:var(--m1-blau-hell); }
[data-md-color-scheme='slate'] .start-suche__ueberschrift { color:var(--m1-blau-hell); }

/* ── Kacheln ───────────────────────────────────────────────────────── */

.md-typeset .grid.cards > ul > li { border-color:var(--m1-linie); border-radius:3px; }
.md-typeset .grid.cards > ul > li:hover { border-color:var(--m1-blau-mittel); box-shadow:0 2px 10px rgba(0,36,64,0.10); }
.md-typeset .grid.cards > ul > li > hr { border-color:var(--m1-linie); margin:0.6em 0; }
.md-typeset .grid.cards > ul > li h3 { font-size:0.95rem; margin:0; }
.md-typeset .grid.cards > ul > li h3 a { text-decoration:none; }

[data-md-color-scheme='slate'] .md-typeset .grid.cards > ul > li,
[data-md-color-scheme='slate'] .md-typeset .grid.cards > ul > li > hr { border-color:var(--m1-linie-dunkel); }

/* ── Pflichtangaben im Fuss ────────────────────────────────────────── */

.m1-rechtliches { margin-top:0.3rem; }
.m1-rechtliches a + a::before { content:'·'; margin:0 0.4em; opacity:0.6; }
.md-footer-meta .m1-rechtliches a { color:currentcolor; text-decoration:underline; text-underline-offset:0.2em; }

/* ── Verweise auf den Kacheln ──────────────────────────────────────── */

.md-typeset .grid.cards > ul > li > p:last-child { display:flex; flex-wrap:wrap; gap:0.35rem 1.1rem; margin-bottom:0; }
.md-typeset .start-karte__haupt { font-weight:700; }
.md-typeset .start-karte__neben { color:var(--m1-text-leise); }
.md-typeset .start-karte__neben:hover { color:var(--m1-blau-mittel); }
[data-md-color-scheme='slate'] .md-typeset .start-karte__neben:hover { color:var(--m1-blau-hell); }