/* Gemeinsames Stylesheet fuer alle Sprachfassungen und den Blog.
   Farbwelt in Anlehnung an RE/MAX: Blau als Struktur, Rot als Akzent,
   viel Weiss. Die Hexwerte sind Naeherungen - falls das Buero ein
   Markenhandbuch hat, dort die exakten Werte uebernehmen. */

:root {
	--bg:        #ffffff;
	--surface:   #f5f7fa;
	--fg:        #10203a;
	--muted:     #55637a;
	--line:      #dbe2ec;

	--blue:      #003da5;
	--blue-soft: #eef3fb;
	--red:       #dc1c2e;

	--accent:    var(--red);
	--accent-fg: #ffffff;

	--note:      #8a6d3b;
	--note-bg:   #fdf6e3;

	--bar:       3.5rem;   /* Hoehe der klebenden Kopfzeile */
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg:        #0d1421;
		--surface:   #141d2e;
		--fg:        #e7ecf5;
		--muted:     #97a3b8;
		--line:      #253148;

		--blue:      #6c9ae8;
		--blue-soft: #16233a;
		--red:       #f04455;

		--note:      #d9b978;
		--note-bg:   #2a2419;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
	line-height: 1.65;
	font-size: 17px;
}
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }
section { padding: 4.5rem 0; }
/* Damit die klebende Kopfzeile das Sprungziel nicht verdeckt */
section[id], article[id] { scroll-margin-top: calc(var(--bar) + 0.5rem); }
h1, h2, h3 { font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin: 0 0 0.75rem; color: var(--blue); }
h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }
p { margin: 0 0 1rem; }
a { color: var(--blue); }

/* Markenband oben - Rot/Weiss/Blau als Anklang an den Ballon */
.brandbar { display: flex; height: 5px; }
.brandbar i { flex: 1; }
.brandbar i:nth-child(1) { background: var(--red); }
.brandbar i:nth-child(2) { background: #ffffff; }
.brandbar i:nth-child(3) { background: var(--blue); }

/* --- Kopfzeile mit Menue ------------------------------------------- */
.topbar {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
.topbar .wrap {
	display: flex;
	align-items: center;
	gap: 1rem 1.25rem;
	min-height: var(--bar);
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
	flex-wrap: wrap;
}
.sitename {
	font-weight: 700;
	color: var(--fg);
	text-decoration: none;
	white-space: nowrap;
}
/* Das Menue bricht um, statt seitlich wegzuscrollen: auf dem Handy
   sieht man sonst nicht, dass hinter "Aktuelles" noch etwas kommt. */
.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.1rem;
	flex: 1 1 18rem;
}
.menu a {
	color: var(--fg);
	text-decoration: none;
	font-size: 0.95rem;
	white-space: nowrap;
	padding: 0.25rem 0;
	border-bottom: 2px solid transparent;
}
.menu a:hover { border-bottom-color: var(--red); }
.menu a[aria-current="page"] { border-bottom-color: var(--red); color: var(--blue); }

.langs { display: flex; gap: 0.35rem; margin-left: auto; }
.langs a {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	text-decoration: none;
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 0.2rem 0.45rem;
}
.langs a[aria-current="true"] {
	background: var(--blue);
	border-color: var(--blue);
	color: #ffffff;
}

/* Schmale Geraete: das Menue bekommt eine eigene Zeile unterhalb von
   Name und Sprachumschalter. Ohne das rutscht der Umschalter als dritte
   Zeile unter das Menue und die klebende Kopfzeile wird unnoetig hoch.
   Geloest ueber `order`, nicht ueber umgebaute Markierung - im Quelltext
   steht das Menue weiter vor dem Umschalter, die Tabulatorfolge bleibt
   also in jeder Breite dieselbe.

   Die Sprungziele brauchen dann mehr Abstand nach oben, weil die
   Kopfzeile hier zwei- bis dreizeilig ist und var(--bar) nur die
   einzeilige Hoehe beschreibt. */
@media (max-width: 45.9375rem) {
	.topbar .wrap { gap: 0.55rem 0.75rem; }
	.menu { order: 3; flex-basis: 100%; }
	section[id], article[id] { scroll-margin-top: 9.5rem; }
}

/* --- Hero ---------------------------------------------------------- */
.hero { background: var(--blue-soft); border-bottom: 1px solid var(--line); }
.hero .wrap { padding-top: 4.5rem; padding-bottom: 4.5rem; }
/* Brotkrumen auf den Ortsseiten. Steht ueber der H1 und nimmt den Platz
   der .eyebrow ein, die es dort nicht gibt. */
.crumbs {
	font-size: 0.8rem;
	color: var(--muted);
	margin-bottom: 1rem;
}
.crumbs a { text-decoration: none; }
.crumbs span { color: var(--fg); font-weight: 600; }

.hero h1 {
	font-size: clamp(2rem, 5.5vw, 3.1rem);
	margin: 0 0 1rem;
	max-width: 20ch;
	color: var(--fg);
}
.hero .lead { font-size: 1.15rem; color: var(--muted); max-width: 46ch; margin-bottom: 2rem; }
.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--red);
	margin-bottom: 1rem;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.btn {
	display: inline-block;
	background: var(--accent);
	color: var(--accent-fg);
	text-decoration: none;
	padding: 0.85rem 1.6rem;
	border-radius: 3px;
	font-weight: 600;
}
.btn-ghost {
	background: transparent;
	color: var(--blue);
	border: 2px solid var(--blue);
	padding: 0.72rem 1.5rem;
}
.hero .trust { margin-top: 2rem; font-size: 0.9rem; color: var(--muted); }

/* --- Karten -------------------------------------------------------- */
.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
	background: var(--bg);
	border: 1px solid var(--line);
	border-top: 3px solid var(--blue);
	border-radius: 3px;
	padding: 1.5rem;
}
.card p:last-child { margin-bottom: 0; }
.card .num {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--red);
	display: block;
	line-height: 1;
	margin-bottom: 0.5rem;
}
.intro { color: var(--muted); max-width: 55ch; margin-bottom: 2.5rem; }

/* --- Portraet ------------------------------------------------------ */
.about { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 46rem) { .about { grid-template-columns: 15rem 1fr; } }
.portrait {
	margin: 0;
	max-width: 15rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid var(--blue);
	border-radius: 3px;
	overflow: hidden;
}
/* Kein Zuschnitt - das Bild wird vollstaendig gezeigt. */
.portrait img {
	width: 100%;
	height: auto;
	display: block;
	background: #ffffff;
}
.portrait figcaption {
	font-size: 0.8rem;
	color: var(--muted);
	padding: 0.6rem 0.8rem;
	border-top: 1px solid var(--line);
}

/* --- Kontakt ------------------------------------------------------- */
.contact { background: var(--blue-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.direct dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 1.2rem; }
.direct dt:first-of-type { margin-top: 0; }
.direct dd { margin: 0.15rem 0 0; font-size: 1.05rem; }
.direct a { text-decoration: none; }
.direct .big { font-size: 1.3rem; font-weight: 700; }

/* --- Blog ---------------------------------------------------------- */
.entries { display: grid; gap: 3rem; }
.entry { border-top: 1px solid var(--line); padding-top: 2.5rem; }
.entry:first-child { border-top: 0; padding-top: 0; }
.entry time {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--red);
}
.entry h2 { margin: 0.35rem 0 0.9rem; color: var(--fg); font-size: clamp(1.3rem, 3vw, 1.7rem); }
.entry figure { margin: 0 0 1.25rem; }
.entry figure img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--surface);
}
.entry figcaption { font-size: 0.8rem; color: var(--muted); margin-top: 0.5rem; }
.entry p:last-child { margin-bottom: 0; }
.empty {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 2rem;
	color: var(--muted);
}
.empty p:last-child { margin-bottom: 0; }

/* --- Recht --------------------------------------------------------- */
.legal { font-size: 0.88rem; color: var(--muted); }
.legal-cols { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .legal-cols { grid-template-columns: 1fr 1fr; } }
.legal h3 { font-size: 1rem; color: var(--fg); }
/* Zwischenueberschrift im Rechtsblock — h3 in der spanischen Fassung,
   h4 in den uebersetzten Spalten, deshalb ueber die Klasse angesprochen. */
.legal-sub {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--fg);
	margin: 1.8rem 0 0.4rem;
}
.prevalence {
	background: var(--note-bg);
	color: var(--note);
	border-left: 4px solid var(--red);
	padding: 1rem 1.2rem;
	margin-bottom: 2.5rem;
	font-size: 0.88rem;
}
.prevalence p:last-child { margin-bottom: 0; }
.legal dl { margin: 0; }
.legal dt { font-weight: 600; color: var(--fg); margin-top: 0.8rem; }
.legal dd { margin: 0; }

footer {
	padding: 2.5rem 0;
	font-size: 0.85rem;
	color: var(--muted);
	background: var(--surface);
	border-top: 1px solid var(--line);
}
footer p { margin: 0; }
/* Von den RE/MAX-Markenstandards vorgeschrieben, sobald ein Werbemittel
   die Kontaktdaten einer Associate traegt - also auf jeder Seite hier.
   Steht in der Sprache der Seite; das ist kein Rechtstext, fuer den die
   spanische Fassung massgeblich waere. */
footer .independent {
	margin-top: 0.7rem;
	font-size: 0.78rem;
}
/* Nachweis der technischen Umsetzung. Steht bewusst unter dem
   Markenhinweis und nicht im Aviso legal: Art. 10 LSSI benennt die
   Anbieterin der Dienstleistung, nicht den Dienstleister dahinter. */
footer .credit {
	margin-top: 0.35rem;
	font-size: 0.78rem;
	opacity: 0.85;
}

/* --- Sprachweiche -------------------------------------------------- */
.picker {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem;
}
.picker .cta-row { justify-content: center; }