/* Lore Lager — „In Arbeit"-Seite. Schriften lokal (kein Google-Aufruf). */
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-VariableFont_wght.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
	--cream: #F3EEE5; --cappuccino: #B7A08C; --taupe: #867568; --sage: #9AAB93; --espresso: #403932;
	--rand: clamp(1.25rem, 5vw, 5.5rem);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
	min-height: 100vh; display: flex; flex-direction: column;
	background: var(--cream); color: var(--espresso);
	font-family: Manrope, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 1.0625rem; line-height: 1.7;
}
a { color: var(--taupe); }
a:hover, a:focus { color: var(--espresso); }

main { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(3rem, 8vh, 6rem) var(--rand) 3rem; }
.logo { width: min(300px, 70vw); height: auto; display: block; }
.claim { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--taupe); margin: 1.75rem 0 0; }
.linie { width: 3rem; height: 1px; background: var(--taupe); opacity: .7; border: 0; margin: 2rem auto; }
h1 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.15; margin: 0; }
.unterzeile { max-width: 34rem; margin: 1.25rem auto 0; }

.bereiche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: min(980px, 100%); margin: clamp(2.5rem, 6vh, 4rem) 0 0; }
.bereich { background: #fff; padding: 1.75rem 1.5rem; text-align: left; }
.bereich h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.6rem; letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.bereich p { margin: .6rem 0 0; font-size: .875rem; }
.bereich .label { color: var(--taupe); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1.8; }

.kontakt { margin-top: clamp(2.5rem, 6vh, 4rem); }
.kontakt .label { color: var(--taupe); font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 .75rem; }
.kontakt p { margin: .25rem 0; }
.kontakt a { color: var(--espresso); text-decoration: none; border-bottom: 1px solid var(--cappuccino); }
.kontakt a:hover { border-bottom-color: var(--espresso); }

footer { padding: 2rem var(--rand) 2.5rem; text-align: center; font-size: .875rem; }
footer hr { border: 0; height: 1px; background: var(--cappuccino); margin: 0 auto 1.75rem; width: min(1720px, 100%); }
footer .marke { font-size: .75rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 .75rem; }
footer p { margin: .4rem 0; }
footer a { color: var(--taupe); text-decoration: none; letter-spacing: .06em; }
footer a:hover, footer a:focus { color: var(--espresso); text-decoration: underline; text-underline-offset: .2em; }

/* Rechtsseiten */
.rechtsseite { align-items: stretch; text-align: left; }
.rechtsseite .inhalt { width: min(760px, 100%); margin: 0 auto; }
.rechtsseite .zurueck { display: inline-block; margin-bottom: 2rem; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.rechtsseite h1 { margin-top: 1.25rem; }
.rechtsseite h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: 1.6rem; line-height: 1.2; margin: 2.25rem 0 .5rem; }
.rechtsseite .linie { margin: 0; }

@media (max-width: 900px) {
	.bereiche { grid-template-columns: 1fr; }
}