/* Rodenkirchen.de – Vorschaltseite (Design „Rheinufer“, ohne externe Ressourcen) */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  --bg: #FFFFFF; --surface: #F3F6F1; --border: #E2E6E1; --text: #18232E; --muted: #4D5964;
  --primary: #155EA8; --primary-dark: #0E4377; --on-primary: #FFFFFF; --accent: #F4B740;
  --blue-soft: #EAF2FB; --green-soft: #EAF5EE; --yellow-soft: #FFF4DC; --red-soft: #FCECE6; --teal-soft: #E3F3F6; --purple-soft: #F1ECFA;
  --radius: 12px; --radius-lg: 20px; --radius-xl: 24px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10171E; --surface: #18222C; --border: #2B3742; --text: #E8EDF1; --muted: #A9B5BF;
    --primary: #6FA8E8; --primary-dark: #9CC4F0; --on-primary: #0B1620;
    --blue-soft: #1B2D40; --green-soft: #18302A; --yellow-soft: #33290F; --red-soft: #3A221B; --teal-soft: #15313A; --purple-soft: #2A2340;
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.55; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--primary); text-underline-offset: 2px; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.015em; line-height: 1.12; }
p { margin: 0; }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .wrap { padding-inline: 24px; } }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; background: var(--bg); padding: .5rem 1rem; z-index: 10; }

/* Hero */
.hero { position: relative; min-height: min(88vh, 760px); display: flex; flex-direction: column; color: #fff; isolation: isolate; overflow: hidden; }
.hero__img { position: absolute; inset: 0; z-index: -2; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,22,34,.55) 0%, rgba(10,22,34,.25) 35%, rgba(10,22,34,.55) 70%, rgba(10,22,34,.88) 100%); }
.hero__bar { display: flex; align-items: center; justify-content: space-between; padding-block: 20px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; }
.brand img { width: 40px; height: 40px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.brand .tld { color: #9CC4F0; }
.hero__bar a.mail { color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; padding: .45rem .9rem; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; }
.hero__bar a.mail:hover { background: rgba(255,255,255,.12); }
.hero > .wrap { width: 100%; }
.hero__body { margin-top: auto; padding-block: 48px 56px; }
.hero__body > * { max-width: 780px; }
.pill { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); padding: .35rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600; margin-bottom: 1rem; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(244,183,64,.7); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(244,183,64,.6); } 70% { box-shadow: 0 0 0 10px rgba(244,183,64,0); } 100% { box-shadow: 0 0 0 0 rgba(244,183,64,0); } }
@media (prefers-reduced-motion: reduce) { .pill .dot { animation: none; } }
.hero h1 { font-size: clamp(2.1rem, 1.3rem + 4vw, 4rem); text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lead { margin-top: 1rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); max-width: 620px; color: rgba(255,255,255,.92); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .7rem 1.25rem; border-radius: var(--radius); font-weight: 800; text-decoration: none; font-size: 1rem; }
.btn-accent { background: var(--accent); color: #18232E; }
.btn-accent:hover { background: #F7C766; }
.btn-ghost { color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-dark); }

/* Abschnitte */
section.block { padding-block: 64px; }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: .5rem; }
.block h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); max-width: 720px; }
.block .intro { color: var(--muted); margin-top: .75rem; max-width: 680px; font-size: 1.1rem; }
.features { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 32px; padding: 0; list-style: none; }
@media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.feature { background: var(--surface); border-radius: var(--radius-lg); padding: 20px; display: flex; gap: 14px; align-items: flex-start; }
.feature__icon { flex: none; width: 46px; height: 46px; border-radius: var(--radius); display: grid; place-items: center; }
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.08rem; font-weight: 800; }
.feature p { color: var(--muted); font-size: .95rem; margin-top: .2rem; }
.i-blue { background: var(--blue-soft); color: var(--primary); } .i-green { background: var(--green-soft); color: #2F7A4F; }
.i-yellow { background: var(--yellow-soft); color: #7A4E00; } .i-red { background: var(--red-soft); color: #A33A1C; }
.i-teal { background: var(--teal-soft); color: #0E6E8C; } .i-purple { background: var(--purple-soft); color: #5B3FA0; }
@media (prefers-color-scheme: dark) { .i-green { color: #6CC08F; } .i-yellow { color: #F2C46B; } .i-red { color: #F08A6E; } .i-teal { color: #6CC3DE; } .i-purple { color: #C2B2F0; } }

.veedel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding: 0; list-style: none; }
.veedel li { padding: .45rem 1rem; border: 1px solid var(--border); border-radius: 999px; font-weight: 600; font-size: .95rem; background: var(--bg); }

.join { background: var(--primary); color: #fff; border-radius: var(--radius-xl); padding: clamp(24px, 4vw, 48px); display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) { .join { grid-template-columns: 1.4fr 1fr; } }
@media (prefers-color-scheme: dark) { .join { background: #1B3A5C; } }
.join h2 { color: #fff; }
.join p { color: #DCE9F7; margin-top: .75rem; }
.join ul { margin: 1rem 0 0; padding-left: 1.2rem; color: #DCE9F7; }
.join ul li { margin-bottom: .25rem; }
.join__box { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-lg); padding: 20px; }
.join__box strong { display: block; font-size: 1.1rem; }
.join__box .btn { margin-top: 1rem; width: 100%; }
.join__box small { display: block; margin-top: .6rem; color: #C8DBF0; }

footer { border-top: 1px solid var(--border); padding-block: 28px 40px; color: var(--muted); font-size: .95rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--muted); }

/* Rechtstexte */
.legal { padding-block: 32px 64px; max-width: 760px; }
.legal h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); margin-bottom: 1rem; }
.legal h2 { font-size: 1.2rem; margin-top: 1.75rem; margin-bottom: .4rem; }
.legal p, .legal li { color: var(--text); }
.legal p + p { margin-top: .6rem; }
.topbar { border-bottom: 1px solid var(--border); }
.topbar .wrap { padding-block: 16px; }
.topbar .brand { color: var(--text); }
.topbar .brand .tld { color: var(--primary); }
.topbar .brand img { filter: none; }