/* ==========================================================================
   Schwarzwald Immobilien — layout.css
   Header · Navigation · Hero · Seitenkopf · Footer · Sticky-CTA
   ========================================================================== */

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.site-header.is-stuck {
  background: rgba(250, 248, 244, .9);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  color: var(--ink);
  border-bottom-color: var(--stone);
  box-shadow: 0 1px 24px rgba(13, 26, 20, .05);
}

.header-inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex: none;
  margin-right: auto;
}
.logo-mark { flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1.08; }
.logo-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.logo-sub {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .6;
  white-space: nowrap;
}

/* „Schwarzwald Immobilien“ ist lang — auf schmalen Displays Platz schaffen,
   damit der Schriftzug nicht mit dem Burger-Menü kollidiert. */
@media (max-width: 420px) {
  .logo { gap: .5rem; }
  .logo-mark svg { width: 28px; height: 28px; }
  .logo-name { font-size: .95rem; }
  .logo-sub { display: none; }
}
@media (max-width: 340px) {
  .logo-name { font-size: .88rem; }
}

/* Ankernavigation */
.nav { display: none; }

@media (min-width: 1000px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, .2rem + 1.5vw, 2rem);
  }
  .nav a {
    position: relative;
    font-size: var(--fs-sm);
    font-weight: 500;
    padding-block: .35rem;
    opacity: .82;
    transition: opacity .2s var(--ease);
  }
  .nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .nav a:hover { opacity: 1; }
  .nav a:hover::after { transform: scaleX(1); }
}

.header-actions { display: flex; align-items: center; gap: .6rem; flex: none; }

/* Auf dem Handy KEIN Button im Header — er würde neben Logo und Burger
   nicht mehr passen. Die Aktion steht im Hero und in der fixierten
   Leiste unten. Höhere Spezifität, damit .btn ihn nicht sichtbar macht. */
.header-actions .header-cta { display: none; }
@media (min-width: 900px) { .header-actions .header-cta { display: inline-flex; } }

/* Instagram-Kachel im Header — der Account ist die Visitenkarte */
.header-ig {
  display: none;
  align-items: center;
  gap: .45rem;
  padding: .45rem .8rem;
  border-radius: 100px;
  border: 1px solid currentColor;
  font-size: var(--fs-xs);
  font-weight: 600;
  opacity: .8;
  transition: opacity .2s var(--ease), background .3s var(--ease),
              color .3s var(--ease), border-color .3s var(--ease);
}
@media (min-width: 1140px) { .header-ig { display: inline-flex; } }
.header-ig svg { flex: none; }
.header-ig:hover {
  opacity: 1;
  background: var(--ig-gradient);
  border-color: transparent;
  color: #fff;
}

/* Burger */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  flex: none;
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }

.nav-toggle span {
  display: block;
  width: 21px; height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobiles Overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--night);
  color: var(--ivory);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1000px) { .nav-overlay { display: none; } }

.nav-overlay ul { display: flex; flex-direction: column; }
.nav-overlay li { border-bottom: 1px solid var(--on-dark-line); }
.nav-overlay li a {
  display: block;
  padding: 1rem 0;
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.025em;
}
.nav-overlay .btn { margin-top: 1.75rem; }

.nav-overlay-contact {
  margin-top: auto;
  padding-top: 2rem;
  display: grid;
  gap: .45rem;
  font-size: var(--fs-sm);
  color: var(--on-dark-dim);
}
.nav-overlay-contact a { display: inline-flex; align-items: center; gap: .5rem; }

body.nav-open { overflow: hidden; }

/* --- Hero ---------------------------------------------------------------- */

/* Das Foto steht als eigenes Panel neben dem Text, nicht ganzflächig
   dahinter. Zwei Gründe: die Quelle hat nur 800 x 800 Pixel und wirkt über
   die volle Breite gezogen sichtbar weich, und Text über einem Foto braucht
   eine Abdunkelung, die genau die Gesichter verschattet, auf die es hier
   ankommt. So bleiben Dennis und Christian mittig, hell und scharf, und die
   Überschrift liegt nicht mehr auf dem Text des Deutsche-Bank-Schilds. */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--night);
  color: var(--ivory);
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem));
  padding-bottom: clamp(3rem, 1.5rem + 5vw, 5.5rem);
  overflow: hidden;
}
@media (min-width: 900px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: min(92svh, 940px);
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 68% 55% at 76% 6%,  rgba(31, 102, 71, .58), transparent 64%),
    radial-gradient(ellipse 62% 55% at 4% 94%,  rgba(193, 154, 75, .15), transparent 62%);
}

/* Auf dem Handy: Botschaft, Aktionen, dann das Foto. Mit dem Foto vor den
   Aktionen lag der Bewertungs-Button auf einem 390 x 820er Display erst bei
   900 Pixeln, also unter der Falz. So sind Überschrift, Button und
   Vertrauenszeile sofort da, und vom Foto ragt der obere Teil mit dem
   Deutsche-Bank-Schild und den beiden Gesichtern schon ins Bild. */
.hero-grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  width: 100%;
}
.hero-copy { order: 1; }
.hero-cta  { order: 2; }
.hero-shot { order: 3; }

@media (min-width: 900px) {
  .hero-grid {
    /* Früher .8fr für das hochformatige Portrait. Das Gruppenbild liegt quer
       und braucht Breite, damit die sechs Gesichter nicht zu klein werden;
       die Textspalte ist ohnehin auf 34rem begrenzt und verliert nichts. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "copy shot"
      "cta  shot";
    align-items: center;
    column-gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
    row-gap: 0;
  }
  .hero-copy { grid-area: copy; }
  .hero-cta  { grid-area: cta; }
  .hero-shot { grid-area: shot; margin-left: auto; }
}

.hero-copy { max-width: 34rem; }

/* Bildpanel. Seit dem Wechsel auf das Gruppenbild im Querformat etwas breiter
   als zuvor (460 px): bei sechs Personen nebeneinander braucht jedes Gesicht
   Platz. Bis 540 px zeigt der Browser das 760-px-Bild ohne Vergrößerung, auf
   Retina das 1520er. */
.hero-shot {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 540px;
}
.hero-shot img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 34px 64px -26px rgba(0, 0, 0, .8);
}
/* Feine helle Kante, damit sich das Panel vom dunklen Grund löst */
.hero-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(250, 248, 244, .18);
  pointer-events: none;
}

.hero h1 { font-size: var(--fs-hero); margin-bottom: 1.35rem; }
/* Auf Mobil fließt die Überschrift frei — der feste Umbruch ist
   für die breitere Desktop-Darstellung gesetzt. */
@media (max-width: 620px) { .hero h1 br { display: none; } }
.hero h1 em { font-style: normal; color: var(--moss); }
.hero .lead { color: var(--on-dark); max-width: 44ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.hero-actions .btn { flex: 1 1 auto; min-width: 0; }
@media (min-width: 560px) { .hero-actions .btn { flex: 0 0 auto; } }
@media (min-width: 900px) { .hero-actions { margin-top: 2.25rem; } }

/* Vertrauenszeile */
.trustline {
  margin-top: clamp(2.25rem, 1.2rem + 3vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--on-dark-line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem clamp(1.25rem, .5rem + 2vw, 2.5rem);
  font-size: var(--fs-sm);
  color: var(--on-dark-dim);
}
.trustline-item { display: inline-flex; align-items: baseline; gap: .45rem; }
.trustline-item strong {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ivory);
  letter-spacing: -0.02em;
}

/* --- Seitenkopf (Unterseiten) -------------------------------------------- */

.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--night);
  color: var(--ivory);
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 5vw, 4.5rem));
  padding-bottom: clamp(2.25rem, 1rem + 4vw, 3.75rem);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 70% 80% at 85% 15%, rgba(31, 102, 71, .45), transparent 65%);
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--gold);
}
.page-hero h1 { margin-bottom: 1rem; }
.page-hero .lead { color: var(--on-dark); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-xs);
  color: var(--on-dark-dim);
  margin-bottom: 1.5rem;
}
.crumbs a:hover { color: var(--ivory); }

/* --- Sticky-CTA (nur Mobil) ---------------------------------------------- */

.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: flex;
  gap: .5rem;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 248, 244, .94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--stone);
  transform: translateY(110%);
  transition: transform .35s var(--ease-out);
}
.sticky-cta.is-shown { transform: none; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

.sticky-cta .btn { flex: 1; }
.sticky-cta .btn--icon {
  flex: 0 0 48px;
  padding-inline: 0;
}

/* Auf Mobil Platz für die Leiste schaffen */
@media (max-width: 899px) {
  body.has-stickybar .site-footer { padding-bottom: calc(2rem + var(--stickybar-h)); }
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--night);
  color: var(--on-dark-dim);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem;
  font-size: var(--fs-sm);
}

.footer-top {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  padding-bottom: clamp(2rem, 1.2rem + 3vw, 3rem);
  border-bottom: 1px solid var(--on-dark-line);
}
/* Vier Spalten seit den Themenseiten: Marke, Seite, Themen, Kontakt. Die
   Themenspalte trägt die längsten Linktexte („Immobilienbewertung Freiburg")
   und bekommt deshalb etwas mehr Raum als die reine Sprungmarken-Spalte. */
@media (min-width: 720px) { .footer-top { grid-template-columns: 1.3fr .8fr 1.1fr 1.1fr; } }

/* Auf dem Handy stehen die Linkspalten nebeneinander. Untereinander
   wären es fünfzehn Zeilen reine Navigation. */
@media (max-width: 719px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .footer-brand { grid-column: 1 / -1; }
}

.footer-brand .logo { margin-right: 0; margin-bottom: 1.1rem; color: var(--ivory); }
.footer-brand p { max-width: 36ch; }

.footer-col h3 {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 1rem;
}
.footer-col li + li { margin-top: .3rem; }
/* Mindestens 24 px hoch: Navigationsziele, die nicht im Fließtext stehen,
   müssen nach WCAG 2.5.8 treffbar sein. Ohne Polsterung waren es 20 px. */
.footer-col a {
  display: inline-block;
  padding-block: .25rem;
  transition: color .2s var(--ease);
}
.footer-col a:hover { color: var(--ivory); }

/* --- Kontaktspalte der Fußzeile -----------------------------------------
   Vorher eine Liste aus vier gleich aussehenden Einträgen: Adresse, Nummer
   und zwei Namen standen ohne Rangfolge untereinander, und zu welcher
   Person eine Nummer gehört, war nicht ablesbar. Jetzt oben Standort und
   Büronummer, darunter je ein abgesetzter Block pro Person.
------------------------------------------------------------------------ */

.footer-kontakt .fk-zeile {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  line-height: 1.5;
}
.footer-kontakt .fk-zeile + .fk-zeile { margin-top: .15rem; }
/* Das Symbol sitzt an der ersten Textzeile, nicht mittig zum ganzen Block */
.footer-kontakt .fk-zeile svg { flex: none; margin-top: .42rem; opacity: .45; }
/* Lange E-Mail-Adressen dürfen die schmale Spalte nicht sprengen */
.footer-kontakt .fk-zeile a { word-break: break-word; }

.footer-kontakt .fk-label {
  color: rgba(250, 248, 244, .45);
  margin-right: .45rem;
}

.footer-kontakt .fk-person {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--on-dark-line);
}
.footer-kontakt .fk-name {
  color: var(--ivory);
  font-weight: 600;
  margin-bottom: .2rem;
}

.footer-bottom {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: rgba(250, 248, 244, .45);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-legal a { display: inline-block; padding-block: .25rem; }
.footer-legal a:hover { color: var(--ivory); }

.footer-note {
  margin-top: 1.25rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(250, 248, 244, .38);
  max-width: 76ch;
}