/* ==========================================================================
   FASYS-PLANUNG GmbH — Stylesheet
   Farbwelt abgeleitet aus dem Firmenlogo (Bordeaux / Silber / Blauviolett)
   ========================================================================== */

:root {
  /* Seite ist immer hell — verhindert die automatische
     Dunkelschaltung von Android-Browsern */
  color-scheme: light only;

  --bordeaux: #96173f;
  --bordeaux-dark: #7a1234;
  --violet: #3a3f7a;
  --ink: #16181c;
  --slate: #3d434a;
  --line: #e3e5e8;
  --mist: #f5f6f7;
  --paper: #ffffff;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: #ffffff;
  color-scheme: light only;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--bordeaux); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}

/* --- Grundraster ---------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3rem, 8vw, 6.5rem); background-color: var(--paper); }
.section--mist { background-color: var(--mist); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* --- Typografie ----------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 .6em;
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.08;
}

h1 { font-size: clamp(2.25rem, 6.5vw, 4.25rem); }
h2 { font-size: clamp(1.75rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.25; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.08rem, 2.1vw, 1.4rem);
  line-height: 1.5;
  color: #2a2e33;
  max-width: 46ch;
}

.eyebrow {
  display: block;
  margin-bottom: 1.1rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--violet);
}

.measure { max-width: 62ch; }
.muted { color: var(--slate); }

/* --- Signatur: Schrankenband (Motiv aus dem Logo) ------------------------- */
.barrier {
  height: 7px;
  border: 0;
  margin: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--bordeaux) 0 14px,
    #ffffff 14px 28px
  );
  background-color: var(--bordeaux);
}

.barrier--short { width: 92px; margin-bottom: 2rem; }
.barrier--slim { height: 5px; }

/* --- Sprunglink ----------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .85rem 1.4rem;
  background: var(--bordeaux);
  color: #fff;
  font-weight: 700;
}
.skip:focus { left: 0; text-decoration: none; }

/* --- Kopfbereich ---------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 124px;
}

.brand { display: flex; align-items: center; gap: .9rem; }
.brand img { height: 92px; width: auto; }
.brand:hover { text-decoration: none; }

.brand__fallback {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--bordeaux);
}

.nav { display: flex; align-items: center; gap: 2.25rem; }

.nav a {
  color: var(--ink);
  font-size: .98rem;
  font-weight: 600;
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { text-decoration: none; border-bottom-color: var(--bordeaux); }
.nav a[aria-current="page"] { border-bottom-color: var(--bordeaux); }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  margin-inline: auto;
  content: "";
}
.nav-toggle span::before { transform: translateY(-7px); }
.nav-toggle span::after  { transform: translateY(5px); }

/* --- Hero ----------------------------------------------------------------- */
.hero { background-color: var(--paper); padding-block: clamp(2.75rem, 9vw, 7rem) clamp(2.25rem, 7vw, 5rem); }
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: 1.6rem; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2.5rem;
  margin-top: 2.6rem;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #2a2e33;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  min-height: 50px;
  padding: .95rem 1.9rem;
  border: 2px solid var(--bordeaux);
  font-size: .98rem;
  font-weight: 700;
  color: var(--bordeaux);
  background: transparent;
  transition: background-color .18s ease, color .18s ease;
}
.btn:hover { background: var(--bordeaux); color: #fff; text-decoration: none; }

.btn--solid { background: var(--bordeaux); color: #fff; }
.btn--solid:hover { background: var(--bordeaux-dark); border-color: var(--bordeaux-dark); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

/* --- Leistungs-Akkordeon (nummerierte Projektfolge) ----------------------- */
.stack { border-top: 1px solid var(--line); }

.item { border-bottom: 1px solid var(--line); }

.item__head {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  width: 100%;
  padding: 1.6rem 0;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.item__num {
  flex: 0 0 auto;
  min-width: 2.4ch;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.item__title {
  flex: 1 1 auto;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.015em;
}

.item__chev {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  color: var(--bordeaux);
  transition: transform .25s ease;
}
.item[open] .item__chev,
.item__head[aria-expanded="true"] .item__chev { transform: rotate(180deg); }

.item__body {
  display: none;
  padding: 0 0 2rem;
  max-width: 68ch;
  color: #2f343a;
}
.item__body ul { margin: .8rem 0 0; padding-left: 1.1rem; }
.item__body li { margin-bottom: .35rem; }
.item__head[aria-expanded="true"] + .item__body { display: block; }

.item__head:hover .item__title { color: var(--bordeaux); }

/* --- Textspalten ---------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.cards {
  background-color: var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.card {
  background-color: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.card h3 { margin-bottom: .5rem; }
.card p { font-size: 1rem; color: #2f343a; }

/* --- Fakten --------------------------------------------------------------- */
.facts { border-top: 1px solid var(--line); }

.fact {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: .25rem 2rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}
.fact dt { font-weight: 800; }
.fact dd { margin: 0; color: #2f343a; }

/* --- Kontakt -------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}

.contact-block h3 { font-size: 1.05rem; }
.contact-block p { color: #2f343a; }
.contact-block a { font-weight: 600; }

/* --- CTA-Band ------------------------------------------------------------- */
.cta {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.cta h2 { color: #fff; max-width: 20ch; }
.cta p { color: #ccd1d8; max-width: 52ch; }
.cta .btn { border-color: #fff; color: #fff; }
.cta .btn:hover { background: #fff; color: var(--ink); }

/* --- Fußbereich ----------------------------------------------------------- */
.footer {
  background: var(--mist);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 1rem;
  color: #3d434a;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.footer strong { color: var(--ink); display: block; margin-bottom: .5rem; }
.footer a { color: #3d434a; }
.footer a:hover { color: var(--bordeaux); }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
}

/* --- Rechtstexte ---------------------------------------------------------- */
.legal { max-width: 70ch; }
.legal h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); margin-top: 2.5rem; }
.legal h3 { font-size: 1.1rem; margin-top: 1.8rem; }
.legal p, .legal li { color: #2f343a; }

/* --- Reduzierte Bewegung -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- Mobil ---------------------------------------------------------------- */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .fact { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: .5rem var(--gutter) 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }
  .nav.is-open { display: flex; }
  .nav a {
    width: 100%;
    padding: 1rem 0;
    font-size: 1.1rem;
    min-height: 52px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a[aria-current="page"] {
    border-bottom-color: var(--line);
    color: var(--bordeaux);
  }
  .topbar__inner { position: relative; min-height: 104px; }
  .brand img { height: 76px; }
}

/* --- Feinschliff kleine Displays ------------------------------------------ */
@media (max-width: 560px) {
  body { font-size: 1.0625rem; line-height: 1.6; }

  h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .hero h1 { max-width: none; }
  .lead { max-width: none; }

  /* Buttons über die volle Breite — sicher zu treffen */
  .btn-row { flex-direction: column; gap: .75rem; }
  .btn-row .btn { width: 100%; text-align: center; padding-inline: 1rem; }

  /* Kennzahlen unter dem Hero untereinander statt gequetscht */
  .hero__meta {
    flex-direction: column;
    gap: .45rem;
    margin-top: 2rem;
    font-size: .8125rem;
    letter-spacing: .04em;
  }

  /* Akkordeon: Nummer über den Titel, mehr Platz für den Text */
  .item__head {
    align-items: flex-start;
    gap: .9rem;
    padding: 1.35rem 0;
  }
  .item__num { padding-top: .2rem; font-size: .9rem; color: var(--bordeaux); }
  .item__title { font-size: 1.1rem; line-height: 1.3; }
  .item__chev { margin-top: .15rem; }
  .item__body { padding-bottom: 1.6rem; }

  /* Fakten: Bezeichnung und Wert als Block */
  .fact { padding: 1.1rem 0; gap: .15rem; }
  .fact dt { font-size: .9rem; letter-spacing: .01em; }

  /* Karten und Kontaktblöcke gestapelt mit klarer Trennung */
  .cards { grid-template-columns: 1fr; }
  .contact-grid { gap: 1.75rem; }

  /* Fußbereich */
  .footer__grid { gap: 1.5rem; }
  .footer__legal { gap: .5rem 1.25rem; margin-top: 2rem; }

  /* Logo an schmale Displays anpassen */
  .topbar__inner { min-height: 88px; }
  .brand img { height: 60px; }

  /* Schrankenband dezenter auf kleinem Display */
  .barrier--slim { height: 4px; }
  .barrier--short { width: 76px; margin-bottom: 1.5rem; }
}

/* Lange Wörter (Bauüberwachung, Genehmigungsplanung) nicht überlaufen lassen */
h1, h2, h3, .item__title { overflow-wrap: break-word; hyphens: auto; }



/* ==========================================================================
   Dunkelmodus abfangen
   Manche Browser (vor allem auf Android) schalten Seiten automatisch dunkel
   und machen dabei Text unlesbar. Hier wird die helle Palette erzwungen.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light only;
    --paper: #ffffff;
    --mist: #f5f6f7;
    --ink: #16181c;
    --line: #e3e5e8;
  }
  html, body { background-color: #ffffff; color: #16181c; }
  .topbar, .section, .hero, .card, .cards > .card { background-color: #ffffff; }
  .section--mist, .footer { background-color: #f5f6f7; }
  .cards { background-color: #e3e5e8; }
  h1, h2, h3, h4, .item__title, .item__num, .fact dt, .footer strong { color: #16181c; }
  p, li, .item__body, .fact dd, .card p, .contact-block p, .legal p, .legal li { color: #2f343a; }
  .lead { color: #2a2e33; }
  .eyebrow { color: #3a3f7a; }
  a { color: #96173f; }
  .footer, .footer a { color: #3d434a; }
  .btn { color: #96173f; background-color: transparent; border-color: #96173f; }
  .btn--solid, .btn--solid:hover { color: #ffffff; background-color: #96173f; }
  .cta { background-color: #16181c; }
  .cta h2 { color: #ffffff; }
  .cta p { color: #ccd1d8; }
  .cta .btn { color: #ffffff; border-color: #ffffff; background-color: transparent; }
  .skip { background-color: #96173f; color: #ffffff; }
}