/* ============================================================
   Janssen und Janssen – Rechtsanwälte und Notar
   Stylesheet "Modern"
   ------------------------------------------------------------
   Aufbau dieser Datei (mit Strg+F zum Abschnitt springen):
     1. Design-Tokens (Farben, Abstände)   -> ":root"
     2. Grundlagen (Body, Typografie)
     3. Layout-Helfer (Container, Grids)
     4. Kopfbereich / Navigation           -> "HEADER"
     5. Hero (großes Bild auf Startseite)  -> "HERO"
     6. Bausteine (Karten, Buttons, Boxen) -> "BAUSTEINE"
     7. Karte / Anfahrt                    -> "KARTE"
     8. Footer                             -> "FOOTER"
     9. Responsive (Tablet/Handy)          -> "RESPONSIVE"

   Farben und Abstände sind ganz oben als Variablen definiert.
   Wer das Erscheinungsbild ändern will, ändert am besten dort –
   die Werte wirken sich dann auf die ganze Seite aus.
   ============================================================ */

/* -------------------- 1. DESIGN-TOKENS -------------------- */

:root {
  /* Markenfarben, direkt aus dem Logo abgeleitet */
  --navy: #1b2a6b;
  --navy-deep: #131c48;
  --navy-ink: #0d1330;
  --green: #1c8a45;
  --green-deep: #14682f;

  /* Neutrale Töne – hell, luftig, mit einem Hauch Wärme */
  --white: #ffffff;
  --surface: #f6f7fb;   /* leicht getönte Sektionen */
  --line: #e2e5ee;      /* dünne Trennlinien */
  --ink: #1a1d26;       /* Fließtext */
  --ink-soft: #565c6d;  /* Nebentext, Labels */

  /* Typografie: bewusst nur System-Schriften.
     Keine Google Fonts – die würden beim Laden die IP-Adresse
     der Besucher an Google übertragen (DSGVO-Thema). */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Abstände */
  --space-section: 6rem;   /* vertikaler Abstand zwischen Sektionen */
  --radius: 14px;
  --radius-sm: 8px;

  --shadow-sm: 0 1px 3px rgba(19, 28, 72, 0.06),
               0 4px 16px rgba(19, 28, 72, 0.05);
  --shadow-md: 0 8px 30px rgba(19, 28, 72, 0.10);

  --max-width: 1140px;
  --header-height: 84px;
}

/* -------------------- 2. GRUNDLAGEN -------------------- */

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

html {
  scroll-behavior: smooth;
  /* Verhindert, dass Sprungmarken (#impressum) unter dem
     fixierten Kopfbereich verschwinden. */
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--navy-deep);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  font-weight: 700;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p {
  margin: 0 0 1.15rem;
}

a {
  color: var(--navy);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--green);
}

/* Sichtbarer Fokusrahmen für Tastatur-Bedienung (Barrierefreiheit) */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 3px;
}

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

ul {
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.5rem;
}

/* -------------------- 3. LAYOUT-HELFER -------------------- */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Standard-Abstand einer Seitensektion */
.section {
  padding: var(--space-section) 0;
}

.section--tight {
  padding: 3.5rem 0;
}

/* Leicht getönter Hintergrund, um Sektionen optisch zu trennen */
.section--surface {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Kleines grünes Label über einer Überschrift ("Eyebrow") */
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.75rem;
}

/* Begrenzt die Zeilenlänge von Fließtext auf gut lesbares Maß */
.prose {
  max-width: 68ch;
}

.lead {
  font-size: 1.2rem;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* Zwei Spalten: Text neben Bild */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Karten-Raster – die Kacheln sind immer gleich hoch,
   unabhängig davon, wie viel Text drinsteht. */
.grid {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* -------------------- 4. HEADER -------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

.brand img {
  height: 52px;
  width: auto;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav li {
  margin: 0;
}

.main-nav a {
  display: block;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-sm);
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--navy-deep);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.main-nav a:hover {
  background: var(--surface);
  color: var(--navy);
}

/* Aktive Seite wird dezent grün hinterlegt */
.main-nav a[aria-current="page"] {
  color: var(--green-deep);
  background: rgba(28, 138, 69, 0.09);
}

/* Der Hamburger-Button erscheint erst auf schmalen Bildschirmen */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy-deep);
  cursor: pointer;
}

/* -------------------- 5. HERO -------------------- */

.hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  overflow: hidden;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bildausschnitt: zeigt den Giebel mit dem Schriftzug
     "Alte Meierei" und schneidet den unteren Rand ab. */
  object-position: center 38%;
}

/* Dunkler Verlauf über dem Foto, damit die weiße Schrift
   in jedem Fall gut lesbar bleibt. */
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Zwei übereinanderliegende Verläufe:
     - der erste dunkelt von unten nach oben ab (Textbereich)
     - der zweite legt einen gleichmäßigen Schleier über das
       ganze Bild, damit auch der Schriftzug am Gebäude die
       weiße Überschrift nicht stört. */
  background:
    linear-gradient(
      to top,
      rgba(13, 19, 48, 0.94) 0%,
      rgba(13, 19, 48, 0.82) 34%,
      rgba(13, 19, 48, 0.55) 68%,
      rgba(13, 19, 48, 0.42) 100%
    ),
    linear-gradient(
      to right,
      rgba(13, 19, 48, 0.55) 0%,
      rgba(13, 19, 48, 0.25) 60%,
      rgba(13, 19, 48, 0.15) 100%
    );
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: 3.5rem 0 4rem;
  max-width: 40rem;
}

.hero h1 {
  color: var(--white);
  margin-bottom: 0.75rem;
}

.hero__tagline {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Kleinerer Kopfbereich für die Unterseiten (ohne Foto) */
.page-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 3.5rem 0 3rem;
}

.page-head p {
  margin-bottom: 0;
}

/* -------------------- 6. BAUSTEINE -------------------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 650;
  background: var(--green);
  color: var(--white);
  border: 2px solid var(--green);
  transition: background 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease;
}

.button:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--white);
  transform: translateY(-1px);
}

/* Zweitrangiger Button – nur Rahmen, kein Vollton */
.button--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.button--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--white);
  color: var(--white);
}

/* Variante für helle Hintergründe */
.button--outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

.button--outline:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  /* Flex sorgt dafür, dass gleich hohe Karten den Inhalt
     sauber untereinander stapeln. */
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card--hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card h3 {
  margin-bottom: 0.25rem;
}

.card .role {
  color: var(--green-deep);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

/* Definitionsliste für Kontaktdaten in den Team-Karten */
.data-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.25rem;
  font-size: 0.975rem;
}

.data-list dt {
  color: var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
}

.data-list dd {
  margin: 0;
}

/* Hervorgehobener Hinweiskasten (z.B. Checkliste Kaufvertrag) */
.callout {
  background: var(--surface);
  border-left: 4px solid var(--green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}

.callout > :last-child {
  margin-bottom: 0;
}

/* Kompakte Info-Zeile, z.B. Bürozeiten */
.fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  padding: 1.1rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.fact strong {
  color: var(--navy-deep);
}

/* Rechtstexte: etwas kleiner und ruhiger gesetzt */
.legal {
  font-size: 0.975rem;
}

.legal h3 {
  margin-top: 2.25rem;
  font-size: 1.1rem;
}

.legal h3:first-child {
  margin-top: 0;
}

/* Sprungmarken-Ziel nicht unter den Header rutschen lassen */
[id] {
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

/* Sanftes Einblenden beim Scrollen (per JS aktiviert).
   Ohne JavaScript bleibt alles normal sichtbar. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Nutzer, die reduzierte Bewegung eingestellt haben,
   bekommen keine Animationen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .button:hover, .card--hover:hover { transform: none; }
}

/* -------------------- 7. KARTE -------------------- */

.map {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

/* Platzhalter, der VOR dem Laden der Google-Karte angezeigt wird.
   Erst per Klick wird die Karte nachgeladen – so werden ohne
   Zustimmung keine Daten an Google übertragen (DSGVO). */
.map__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  min-height: 360px;
  padding: 2rem;
}

.map__placeholder p {
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
}

.map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* -------------------- 8. FOOTER -------------------- */

.site-footer {
  background: var(--navy-ink);
  color: #cbd2e6;
  padding: 4rem 0 1.75rem;
  font-size: 0.975rem;
}

.site-footer h4 {
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.site-footer a {
  color: #cbd2e6;
}

.site-footer a:hover {
  color: var(--white);
}

.site-footer p {
  margin-bottom: 1rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
}

.footer-brand img {
  height: 46px;
  width: auto;
  background: var(--white);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: #9aa3bd;
}

.footer-bottom a {
  color: #9aa3bd;
}

.footer-bottom nav {
  display: flex;
  gap: 1.25rem;
}

/* -------------------- 9. RESPONSIVE -------------------- */

/* Tablet */
@media (max-width: 900px) {
  :root {
    --space-section: 4rem;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .grid--3 {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* Ab hier wird die Navigation zum Klappmenü.
   Der Wert ist so gewählt, dass die Menüpunkte in einer Zeile
   Platz haben, solange sie nebeneinander stehen. Wer weitere
   Menüpunkte ergänzt, sollte diesen Wert erhöhen. */
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Navigation klappt unter dem Header auf */
  .main-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 0.75rem 1.5rem 1.25rem;
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  .main-nav a {
    padding: 0.85rem 0.75rem;
    font-size: 1.05rem;
  }
}

/* Handy */
@media (max-width: 720px) {
  .grid--2,
  .grid--3 {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 0;
  }

  .hero__content {
    padding: 5rem 0 2.5rem;
  }

  .hero__tagline {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
  }

  /* Beide Buttons untereinander, volle Breite – bequem zu tippen */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .card {
    padding: 1.5rem;
  }

  .data-list {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .data-list dd {
    margin-bottom: 0.6rem;
  }
}