/* Mittelrhein Webseiten – Stylesheet
   Mobile zuerst (375 px), dann ab 760 px (Tablet) und ab 1040 px (Desktop).
   Dunkelblau ist die Hauptfarbe. Gold nur als Akzent: Buttons mit dunkler Schrift,
   Pilotangebot, Linien. Nie goldene Schrift auf Weiß. */

:root {
  --navy: #1D2A4D;        /* Hauptfarbe: Text, Footer, Flächen */
  --navy-soft: #4A5578;   /* Nebentext, Kontrast ca. 7:1 auf Weiß */
  --gold: #D89B00;        /* Akzent */
  --gold-hover: #E8AA0E;
  --gold-tint: #FBF3DC;   /* Hintergrund Pilotangebot */
  --bg: #FFFFFF;
  --bg-alt: #F4F6F9;      /* leicht blaustichiges Grau für Wechselabschnitte */
  --line: #DCE1EA;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --wrap: 68rem;
  --gutter: 1rem;
  color-scheme: light;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--navy);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible { outline-color: var(--gold); }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--navy); color: #fff; padding: 0.6rem 1rem; border-radius: 8px;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 0.75rem; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.7rem 1.2rem; border-radius: 999px;
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.btn svg { width: 1.15rem; height: 1.15rem; flex: none; }
.btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.btn-outline { background: var(--bg); color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: #2B3B66; border-color: #2B3B66; }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.75rem;
}
.brand { display: block; flex: none; }
.brand img { height: 36px; width: auto; }
.main-nav { display: none; }
.header-call { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: 0.9375rem; }
@media (max-width: 359px) {
  .brand img { height: 30px; }
  .header-call { padding-inline: 0.75rem; }
}

/* ---------- Einstieg + Pilotangebot ---------- */
.top { padding-block: 1.5rem 0.5rem; display: grid; gap: 1.25rem; }
.hero h1 { font-size: 1.75rem; line-height: 1.18; }
.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-top: 1.25rem; }
.hero-actions .btn { padding-inline: 0.75rem; white-space: nowrap; }
/* sehr schmale Handys: Symbole weglassen, damit „Jetzt anrufen“ in eine Zeile passt */
@media (max-width: 399px) {
  .hero-actions .btn svg { display: none; }
}
.hero-note { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--navy-soft); }

.pilot {
  position: relative; overflow: hidden;
  background: var(--gold-tint);
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1.4rem;
}
.tag {
  display: inline-block;
  background: var(--gold); color: var(--navy);
  font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px;
}
.pilot h2 { font-size: 1.375rem; margin-top: 0.75rem; }
.pilot h2 .regular { display: block; font-size: 1rem; font-weight: 600; color: var(--navy-soft); margin-top: 0.25rem; letter-spacing: 0; }
.pilot-lead { margin-top: 0.6rem; }
.pilot-list { list-style: none; margin-top: 0.9rem; display: grid; gap: 0.45rem; }
.pilot-list li { display: flex; gap: 0.6rem; align-items: baseline; }
.pilot-list li::before {
  content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--navy); transform: translateY(-0.1rem);
}
.pilot-note { margin-top: 0.9rem; font-size: 0.9375rem; color: var(--navy-soft); }
.pilot-actions { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; position: relative; z-index: 1; }
.pilot-mark {
  position: absolute; right: -12px; bottom: -14px; width: 150px; opacity: 0.16; pointer-events: none;
}

/* ---------- Abschnitte ---------- */
.section { padding-block: 3.5rem; }
.section.alt { background: var(--bg-alt); }
.section-head { max-width: 42rem; margin-bottom: 2rem; }
.section-head h2 { font-size: 1.625rem; }
/* dezentes Liniensymbol über jeder Abschnitts-Überschrift */
.section-head h2::before {
  content: ""; display: block; width: 2.25rem; height: 1.1rem; margin-bottom: 0.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 18'%3E%3Cpolyline points='3,15 10,3 18,11 26,3 33,15' fill='none' stroke='%23D89B00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}
.section-head p { margin-top: 0.75rem; color: var(--navy-soft); }

/* ---------- Ablauf ---------- */
.steps { list-style: none; display: grid; gap: 1.75rem; counter-reset: step; }
.steps li { position: relative; padding-left: 3.4rem; counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.1rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: #fff; font-weight: 700;
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1.2rem - 1px); top: 2.6rem; bottom: -1.5rem;
  width: 2px; background: var(--gold);
}
.steps h3 { font-size: 1.125rem; }
.steps p { margin-top: 0.35rem; color: var(--navy-soft); }

/* ---------- Pakete ---------- */
.plans { display: grid; gap: 1.25rem; }
.plan {
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 1rem;
}
.plan-featured { border: 2px solid var(--navy); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.plan h3 { font-size: 1.25rem; }
.plan-for { color: var(--navy-soft); font-size: 0.9375rem; }
.price { font-size: 2.25rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.price small { font-size: 1rem; font-weight: 600; color: var(--navy-soft); letter-spacing: 0; }
.checks { list-style: none; display: grid; gap: 0.5rem; }
.checks li { position: relative; padding-left: 1.6rem; }
.checks li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.42em;
  width: 0.45rem; height: 0.8rem;
  border-right: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy);
  transform: rotate(45deg);
}
.checks li.plus-intro { padding-left: 0; font-weight: 700; }
.checks li.plus-intro::before { display: none; }
.plan .btn { margin-top: auto; align-self: flex-start; }

.extras { display: grid; gap: 1.25rem; margin-top: 1.5rem; align-items: start; }
.box { border-radius: 16px; padding: 1.4rem 1.25rem; }
.box h3 { font-size: 1.125rem; }
.box p, .box ul { margin-top: 0.6rem; }
.box-plain { background: var(--bg); border: 1px dashed var(--navy-soft); }
.box-care { background: var(--navy); color: #fff; }
.box-care .care-price { font-size: 1.75rem; font-weight: 800; margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
.box-care .care-price small { font-size: 1rem; font-weight: 600; }
.box-care .checks li::before { border-color: var(--gold); }
.box-care .muted { color: #D5DAE6; font-size: 0.9375rem; }
.box-care .care-price + .muted { margin-top: 0.1rem; }
.price-note { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--navy-soft); max-width: 44rem; }

/* ---------- Arbeitsproben ---------- */
.demos { display: grid; gap: 1.25rem; }
.demo {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  text-decoration: none; color: var(--navy);
  transition: border-color 0.15s;
}
.demo:hover { border-color: var(--navy); }
.demo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); }
.demo-body { padding: 1rem 1.25rem 1.25rem; display: grid; gap: 0.4rem; }
.demo-badge {
  justify-self: start;
  background: var(--navy); color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.6rem; border-radius: 999px;
}
.demo h3 { font-size: 1.125rem; }
.demo p { color: var(--navy-soft); font-size: 0.9375rem; }
.demo .more { font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; }
.demos-note { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--navy-soft); }

/* ---------- Über mich ---------- */
.about { display: grid; gap: 2rem; }
.about-text { display: grid; gap: 1rem; max-width: 40rem; }
.facts { list-style: none; border-top: 1px solid var(--line); }
.facts li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; border-bottom: 1px solid var(--line); }
.facts span:first-child { color: var(--navy-soft); }
.facts span:last-child { font-weight: 700; text-align: right; }

/* ---------- FAQ ---------- */
.faq { max-width: 46rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1rem 2.5rem 1rem 0; font-weight: 700; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%;
  width: 0.6rem; height: 0.6rem;
  border-right: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy);
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq .answer { padding-bottom: 1.25rem; display: grid; gap: 0.6rem; }

/* ---------- Kontakt ---------- */
.contact { display: grid; gap: 2rem; }
.contact-list { list-style: none; display: grid; gap: 0.75rem; }
.contact-item {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.25rem; padding: 0.85rem 1rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; color: var(--navy);
  transition: border-color 0.15s;
}
.contact-item:hover { border-color: var(--navy); }
.contact-icon {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy);
}
.contact-icon svg { width: 1.3rem; height: 1.3rem; }
.contact-text { min-width: 0; display: grid; }
.contact-label { font-size: 0.8125rem; color: var(--navy-soft); }
.contact-value { font-weight: 700; overflow-wrap: anywhere; }
.contact-info { display: grid; gap: 1rem; margin-top: 1.25rem; }
.contact-info h3 { font-size: 1rem; }
.contact-info p { color: var(--navy-soft); margin-top: 0.2rem; }
.region { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; }
.region svg { width: 100%; max-width: 22rem; height: auto; margin-inline: auto; display: block; }
.region figcaption { font-size: 0.875rem; color: var(--navy-soft); margin-top: 0.5rem; text-align: center; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--navy); color: #fff;
  border-top: 4px solid var(--gold);
  padding-block: 2.25rem 2.5rem;
}
.site-footer .wrap { position: relative; display: grid; gap: 1.25rem; }
.footer-logo img { height: 64px; width: auto; margin-left: -12px; }
.footer-meta { color: #D5DAE6; font-size: 0.9375rem; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer-links a { color: #fff; }
.footer-mark { position: absolute; right: -40px; bottom: -30px; width: 260px; opacity: 0.07; pointer-events: none; }

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.legal { padding-block: 2.5rem 3.5rem; }
.legal-inner { max-width: 44rem; }
.legal h1 { font-size: 1.75rem; }
.legal h2 { font-size: 1.25rem; margin-top: 2rem; }
.legal h3 { font-size: 1.0625rem; margin-top: 1.25rem; }
.legal p, .legal ul { margin-top: 0.6rem; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: 0.3rem; }
.legal .stand { margin-top: 2rem; color: var(--navy-soft); font-size: 0.9375rem; }
.back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.5rem; font-weight: 700; }

/* ================= Tablet ================= */
@media (min-width: 760px) {
  :root { --gutter: 1.5rem; }
  .top { padding-block: 2.5rem 1rem; gap: 1.5rem; }
  .hero h1 { font-size: 2.375rem; }
  .hero-actions { display: flex; flex-wrap: wrap; }
  .section { padding-block: 4.5rem; }
  .section-head h2 { font-size: 2rem; }
  .pilot { padding: 1.75rem; }
  .pilot h2 { font-size: 1.625rem; }
  .extras { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  .about { grid-template-columns: 1.4fr 1fr; align-items: start; gap: 3rem; }
}

/* ================= Desktop ================= */
@media (min-width: 1040px) {
  :root { --gutter: 2rem; }
  .brand img { height: 44px; }
  .site-header .wrap { min-height: 4.5rem; }
  .main-nav { display: block; }
  .main-nav ul { list-style: none; display: flex; gap: 1.5rem; }
  .main-nav a { text-decoration: none; font-weight: 600; font-size: 0.9375rem; color: var(--navy); padding-block: 0.4rem; border-bottom: 2px solid transparent; }
  .main-nav a:hover { border-bottom-color: var(--gold); }
  .top { grid-template-columns: 1.2fr 0.8fr; gap: 3.5rem; align-items: center; padding-block: 4rem 3rem; }
  .hero h1 { font-size: 2.75rem; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .steps li { padding-left: 0; padding-top: 3.4rem; }
  .steps li::before { top: 0; }
  .steps li:not(:last-child)::after { left: 3rem; right: -1.5rem; top: 1.2rem; bottom: auto; width: auto; height: 2px; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .demos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}