/* rc-com.de — Nachbau der bisherigen WordPress/Divi-Seite als statisches HTML.
   Schriften liegen lokal in /fonts (kein Abruf bei Google). Wer eine fremde
   Schrift, ein Skript oder einen Dienst einbindet, ergaenzt in derselben
   Aenderung datenschutz/index.html. */

@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/titillium-400.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/titillium-600.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/playfair-700-normal.woff2") format("woff2"); }

:root {
  --blau: #3A5AA1;
  --blau-dunkel: #24386a;
  --gelb: #F9B700;
  --text: #333;
  --grau: #666;
  --linie: #e5e5e5;
  --weiss: #fff;
  --breite: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--weiss);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }
a { color: var(--blau); }
a:hover { color: var(--blau-dunkel); }
img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 20px; }

/* Kopf */
.kopf { background: var(--weiss); box-shadow: 0 1px 0 rgba(0,0,0,.08); position: relative; z-index: 2; }
.kopf .container { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.kopf .logo img { width: 51px; height: 60px; }
.kopf nav a { font-weight: 600; font-size: 15px; text-decoration: none; color: var(--blau); }
.kopf nav a:hover { text-decoration: underline; }

/* Startseite: Bühne */
.buehne {
  position: relative;
  color: var(--weiss);
  background-color: #2b3550;
  background-image:
    linear-gradient(90deg, rgba(36,56,106,.78) 0%, rgba(36,56,106,.35) 60%, rgba(36,56,106,.15) 100%),
    image-set(url("/img/header.webp") type("image/webp"), url("/img/header.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  min-height: calc(100vh - 80px - 70px);
  display: flex;
  align-items: center;
  padding: 80px 0;
}
/* Fallback fuer Browser ohne image-set() */
@supports not (background-image: image-set(url("a.webp") type("image/webp"))) {
  .buehne { background-image: linear-gradient(90deg, rgba(36,56,106,.78) 0%, rgba(36,56,106,.35) 60%, rgba(36,56,106,.15) 100%), url("/img/header.jpg"); }
}
.buehne h1 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 1.15;
  margin: 0 0 .6em;
  max-width: 18ch;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.buehne blockquote { margin: 0 0 2.2em; font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-style: italic; line-height: 1.55; }
.buehne blockquote p { margin: 0 0 1em; }
.buehne blockquote footer { font-style: italic; }
.knopf {
  display: inline-block;
  background: var(--weiss);
  color: var(--blau-dunkel);
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.knopf:hover, .knopf:focus-visible { color: var(--blau-dunkel); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }

/* Rechtstexte */
.recht { padding: 56px 0 72px; }
.recht .container { max-width: 800px; }
.recht h1 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.2; color: var(--blau-dunkel); margin: 0 0 .4em; hyphens: auto; overflow-wrap: break-word; }
.recht .einleitung { color: var(--grau); margin-top: 0; }
.recht h2 { font-size: 1.25rem; font-weight: 600; color: var(--blau-dunkel); margin: 2.2em 0 .5em; line-height: 1.35; }
.recht p, .recht ul, .recht address { margin: 0 0 1em; }
.recht address { font-style: normal; }
.recht ul { padding-left: 1.3em; }
.recht li { margin-bottom: .3em; }
.recht .stand { color: var(--grau); font-size: .9rem; }
.recht .kasten { background: #f4f6fb; border-left: 4px solid var(--blau); padding: 16px 20px; margin: 1.5em 0; }
.recht .kasten ul { margin: 0; }

/* easyRechtssicher-Widgets (Impressum, Datenschutz): rendern im Shadow-DOM,
   nehmen aber diese Variablen an. Die Schrift ist oben per @font-face lokal. */
[id^="easyrecht-"] {
  --er-font-family: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --er-text-color: var(--text);
  --er-link-color: var(--blau);
  --er-heading-color: var(--blau-dunkel);
  --er-font-size: 17px;
  min-height: 300px;
}

/* Fuss */
.fuss { border-top: 1px solid var(--linie); padding: 22px 0; text-align: center; font-size: 14px; color: var(--grau); }
.fuss p { margin: .2em 0; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .kopf .container { height: 68px; }
  .kopf .logo img { width: 43px; height: 51px; }
  .buehne { padding: 56px 0; min-height: calc(100vh - 68px - 90px); }
}
@media (prefers-reduced-motion: reduce) { .knopf { transition: none; } }