/* schornsteinfegerinnung-potsdam.de – styles.css
   Grundgerüst: Funktionalität + Tokens. Farbtokens/Typo/Hero = @designer.
   Werte unten sind neutrale Platzhalter und werden im Design-Konzept ersetzt. */

/* ---------- Schriften (lokal, kein CDN) ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design-Tokens ---------- */
/* Palette: Anthrazit (Handwerk, Zylinder) + warmes Messing (Knöpfe/Emblem)
   auf warmem Off-White. Kontraste WCAG AA geprüft. */
:root {
  --color-bg: #f5f2ec;            /* warmes Off-White (Studio-Weiß des Hero-Bilds) */
  --color-surface: #ffffff;
  --color-text: #2b2b2e;          /* Anthrazit */
  --color-muted: #63615c;
  --color-accent: #9c6b1f;        /* warmes Messing (4.5:1 auf Off-White) */
  --color-accent-strong: #7c5316; /* Hover/Dark-Variante */
  --color-accent-soft: #ecdfc6;   /* helles Messing (Nav-Hover) */
  --color-slate: #5c6469;         /* Altsite-Grau (Sidebar) – Band Header/Footer */
  --color-slate-light: #666e73;   /* etwas hellere Slate-Variante – nur Verbände-Band (4.6:1 mit --color-on-slate, AA) */
  --color-on-slate: #f5f2ec;      /* Off-White auf Slate (5.4:1 AA) */
  --color-brass: #9c6b1f;         /* Messing – nur als Akzentlinie, nie als Text auf Slate (1.3:1) */
  --color-dark: #232326;          /* Header-Fußzeile / dunkle Bänder */
  --color-border: #e2ddd2;
  --color-focus: #9c6b1f;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);

  --space-unit: 1rem;
  --space-xs: calc(var(--space-unit) * 0.5);
  --space-sm: var(--space-unit);
  --space-md: calc(var(--space-unit) * 1.75);
  --space-lg: calc(var(--space-unit) * 2.5);
  --space-xl: calc(var(--space-unit) * 4);

  --container-max: 1100px;
  --header-height: 64px;

  --radius-sm: 6px;
  --radius-md: 12px;

  --transition-base: 200ms ease;
  --transition-fade: 600ms ease;
}

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

html { scroll-behavior: smooth; }

/* ---------- Typografie ---------- */
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.65;
  font-size: 1.0625rem;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-dark);
  font-weight: 500;
  margin: 0 0 var(--space-sm);
}
h1 { font-size: clamp(1.75rem, 4vw, 2.55rem); overflow-wrap: break-word; }
h2 { font-size: clamp(1.28rem, 2.6vw, 1.68rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.22rem); font-weight: 500; }
p { margin: 0 0 var(--space-sm); }
strong { font-weight: 500; color: var(--color-dark); }

/* Sektions-Überzeile: kleines Messing-Label über h2 */
.section-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-xs);
}

/* Sektionen als Karten: Fläche, weicher Schatten, kein Rahmen */
main > section,
main > article {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(35, 35, 38, 0.05), 0 6px 18px rgba(35, 35, 38, 0.05);
  padding: var(--space-lg);
  margin: 0 0 var(--space-md);
}

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

a { color: var(--color-accent); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
  top: 0;
  padding: 0.75rem 1.25rem;
  background: var(--color-accent);
  color: #fff;
}

/* ---------- Sticky Header & Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-slate);
  box-shadow: 0 2px 8px rgba(15, 17, 20, 0.22);
}
/* Header-Inhalt auf derselben Kante wie main (Logo/Text bündig zur Section darunter) */
.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  min-height: var(--header-height);
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-on-slate);
  min-width: 0;
}
.brand img { border-radius: var(--radius-sm); }
.brand-name { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.site-nav { flex-shrink: 0; }
.site-nav ul {
  display: flex;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: block;
  white-space: nowrap;
  padding: 0.5rem 0.65rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  color: var(--color-on-slate);
  font-weight: 500;
  transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.site-nav a:hover,
.site-nav a:focus-visible {
  background-color: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
/* Aktiver Punkt: Messing 2px-Unterstrich (Text bleibt Off-White, AA) */
.site-nav a[aria-current="page"],
.site-nav a[aria-current="true"],
.site-nav a[aria-current="location"] {
  background-color: transparent;
  color: var(--color-on-slate);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--color-brass);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  color: var(--color-on-slate);
  font-family: inherit;
  font-size: 1rem;
}

@media (max-width: 720px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-block; }
  /* Logo reicht auf schmalen Screens — langer Markenname kollidiert mit dem Toggle */
  .brand-name { display: none; }
  .site-nav.is-open {
    display: block;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-slate);
    box-shadow: 0 4px 12px rgba(15, 17, 20, 0.25);
  }
  .site-nav.is-open ul { flex-direction: column; }
}

/* ---------- Layout ---------- */
main {
  display: block;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

/* ---------- Hero: h1 volle Breite, Lead + Bild im Grid darunter ---------- */
.hero {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(35, 35, 38, 0.05), 0 8px 24px rgba(35, 35, 38, 0.07);
  padding: var(--space-lg);
  margin: 0 0 var(--space-md);
}
.hero h1 { margin: 0 0 var(--space-sm); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.hero-lead {
  font-size: 1.15rem;
  color: var(--color-muted);
  margin: 0;
}
.hero-subtitle { font-size: 1.1rem; color: var(--color-muted); margin: 0 0 var(--space-xs); }
.hero-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
}
.hero-img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 6px rgba(35, 35, 38, 0.08), 0 14px 32px rgba(35, 35, 38, 0.12);
}
/* Handwerks-Logo im Hero: verlinkter Partner-Badge unter dem Lead-Text */
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-partner {
  display: inline-block;
  margin-top: var(--space-md);
  border-radius: var(--radius-sm);
  line-height: 0;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    filter var(--transition-base);
}
.hero-partner img {
  display: block;
  width: 176px;
  height: auto;
  border-radius: var(--radius-sm);
}
/* Mouseover/Fokus: Logo hebt sich und leuchtet leicht auf */
.hero-partner:hover,
.hero-partner:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(35, 35, 38, 0.16);
  filter: brightness(1.06) saturate(1.04);
}
@media (max-width: 860px) {
  .hero { padding: var(--space-md); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
}

/* ---------- FadeIn (IntersectionObserver + CSS-Transitionen) ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--transition-fade),
    transform var(--transition-fade);
}
.fade-in.is-visible {
  opacity: 1;
  transform: none;
}
/* Reduzierte Bewegung: Animation aus. */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Lightbox (one <dialog> per data-gallery group) ---------- */
.lightbox-gallery { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.lightbox-gallery a[data-lightbox] img {
  display: block;
  cursor: zoom-in;
  border-radius: var(--radius-md);
}

.lightbox {
  border: none;
  background: rgba(15, 17, 20, 0.92);
  color: #fff;
  width: auto;
  max-width: 92vw;
  max-height: 90vh;
  padding: 0;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.6); }

.lightbox-figure { margin: 0; }
.lightbox-img {
  max-width: 90vw;
  max-height: 82vh;
  cursor: zoom-out;
  border-radius: var(--radius-md);
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }

.lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--color-slate);
  color: var(--color-on-slate);
}
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
}
.site-footer nav ul {
  display: flex;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Footer-Links Off-White (AA); Messing nur als Hover-Akzentlinie, nie als Text auf Slate */
.site-footer a { text-decoration: none; color: var(--color-on-slate); }
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-on-slate);
  text-decoration: underline;
  text-decoration-color: var(--color-brass);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.site-footer p.footer-copy { margin: 0; color: var(--color-on-slate); font-size: 0.9rem; }

/* ---------- Scroll-to-top ---------- */
.scroll-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  visibility: hidden;
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility var(--transition-base);
}
.scroll-top.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* ---------- Inhalte (Texte = @user/@writer, 1:1) ---------- */
h1, h2, h3 {
  font-family: var(--font-heading);
}
address { font-style: normal; line-height: 1.7; }
ul.contact-list { margin: var(--space-sm) 0; padding-left: 1.2rem; }
/* Kontakt-Liste: Zeile hebt sich beim Hover mit Messing-Kante an */
ul.contact-list li {
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}
ul.contact-list li:hover,
ul.contact-list li:focus-within {
  background-color: rgba(156, 107, 31, 0.06);
  box-shadow: inset 3px 0 0 var(--color-accent);
  transform: translateX(3px);
}

/* Vorteile-Liste: Icon-Badge vor jedem Punkt */
ul.vorteile-list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
ul.vorteile-list li {
  position: relative;
  padding: 0.32rem 0.6rem 0.32rem 2.55rem;
  margin-left: -0.6rem;
  border-radius: var(--radius-sm);
  line-height: 1.5;
  transition:
    background-color var(--transition-base),
    transform var(--transition-base);
}
ul.vorteile-list li::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.34em;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c5316' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.85rem;
  transition:
    background-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}
/* Hover/Fokus je Listenpunkt: warmer Messing-Tint, leichtes Nudge, Badge füllt sich */
ul.vorteile-list li:hover,
ul.vorteile-list li:focus-within {
  background-color: rgba(156, 107, 31, 0.07);
  transform: translateX(4px);
}
ul.vorteile-list li:hover::before,
ul.vorteile-list li:focus-within::before {
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 3px rgba(156, 107, 31, 0.18);
  transform: scale(1.08);
}

/* Verbände: Link-Kacheln */
ul.verbaende-list {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm);
}
ul.verbaende-list li { margin: 0; }
ul.verbaende-list a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  height: 100%;
  padding: var(--space-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base);
}
ul.verbaende-list a:hover,
ul.verbaende-list a:focus-visible {
  box-shadow: 0 6px 18px rgba(35, 35, 38, 0.10);
  transform: translateY(-2px);
}
.verband-name { font-weight: 700; color: var(--color-dark); }
.verband-url { font-size: 0.9rem; color: var(--color-accent); }

/* ---------- Verbände-Sektion als dunkles Band (Rhythmusbrecher) ---------- */
/* Generische weiße Karten-Regel wird für diese Sektion zurückgenommen. */
main > section#verbaende,
main > article#verbaende {
  background: var(--color-slate-light);
  color: var(--color-on-slate);
}
section#verbaende .section-eyebrow { color: var(--color-on-slate); }
section#verbaende h2 { color: var(--color-on-slate); }
/* Link-Kacheln: dunkle Fläche statt weißer Karten – Messing nur als Akzentlinie */
section#verbaende ul.verbaende-list a {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-on-slate);
}
section#verbaende ul.verbaende-list a:hover,
section#verbaende ul.verbaende-list a:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 2px var(--color-brass);
  transform: translateY(-2px);
}
section#verbaende .verband-name { color: var(--color-on-slate); }
section#verbaende .verband-url { color: var(--color-on-slate); font-size: 0.9rem; }

/* Ansprechpartner */
.people-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.person {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.person:hover,
.person:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(35, 35, 38, 0.10);
}
.person h4 { margin: 0 0 var(--space-xs); }
.person address { margin: 0 0 var(--space-xs); }
.person p { margin: 0; }
@media (max-width: 720px) {
  .people-grid { grid-template-columns: 1fr; }
}

/* Reduzierte Bewegung: alle neuen Hover-Bewegungen aus, Farb-/Schattenwechsel bleiben */
@media (prefers-reduced-motion: reduce) {
  ul.vorteile-list li,
  ul.vorteile-list li::before,
  ul.contact-list li,
  ul.verbaende-list a,
  .person {
    transition-property: background-color, box-shadow, color;
  }
  ul.vorteile-list li:hover,
  ul.vorteile-list li:focus-within,
  ul.vorteile-list li:hover::before,
  ul.vorteile-list li:focus-within::before,
  ul.contact-list li:hover,
  ul.contact-list li:focus-within,
  ul.verbaende-list a:hover,
  ul.verbaende-list a:focus-visible,
  .person:hover,
  .person:focus-within {
    transform: none;
  }
  .hero-partner { transition-property: box-shadow, filter; }
  .hero-partner:hover,
  .hero-partner:focus-visible {
    transform: none;
  }
}