/* =============================================================
   marcus-belz.de — Layout und Abschnitte
   Muster: Twenty-Seventeen-Front-Page (feste Hintergrundbilder,
   darüber gleitende Textbereiche) in der Gestaltung von DI²
   (sections.css aus dem Skill di2-design).

   Regel: kein transform, filter, will-change oder overflow:hidden
   auf html, body oder .panel-image — sonst fällt
   background-attachment: fixed still aus.
   ============================================================= */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--topbar-h);
  background: #fff;
}

body {
  margin: 0;
  background: #fff;
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ── Skip-Link ────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  background: #fff;
  color: var(--di-navy);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* ── Topbar (Muster: public-nav.tsx von di2) ─────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  background: var(--di-navy);
  border-bottom: 1px solid var(--di-slate-800);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 100%;
}
.wordmark { margin-right: auto; }

/* Profil-Icons LinkedIn und Xing (wie im Header von sql.marcus-belz.de) */
.social { display: flex; gap: var(--space-1); }
.social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--di-slate-400);
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.social a:hover { color: #fff; background: var(--di-slate-800); }
.social svg { width: 18px; height: 18px; }
.wordmark {
  color: var(--di-white);
  font-size: 17px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: #fff; }
.wordmark sup { font-size: 0.65em; color: var(--di-cyan); margin-left: 2px; }

.topnav { display: flex; gap: var(--space-7); }
.topnav a {
  color: var(--di-slate-400);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}
.topnav a:hover { color: #fff; }
.topnav + .social { padding-left: var(--space-4); border-left: 1px solid var(--di-slate-800); }

/* Mobil-Menü ohne JS: <details> */
.menu { display: none; position: relative; }
.menu summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--di-slate-300);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--di-slate-800); color: #fff; }
.menu .icon-close { display: none; }
.menu[open] .icon-open { display: none; }
.menu[open] .icon-close { display: block; }
.menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.menu nav a {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--di-navy);
  font-size: 15px;
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.menu nav a:hover { background: var(--di-slate-100); }

/* ── Bild-Abschnitte (feste Hintergründe) ─────────────────── */
.panel-image {
  position: relative;
  height: 100svh;
  max-height: 1200px;
  background-color: var(--di-slate-100);
  background-image: var(--bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* leichter Navy-Verlauf am unteren Rand wie beim Theme */
.panel-image::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 33%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.25));
}
.panel-image--hero        { --bg: url("../img/hero-1600.webp"); }
.panel-image--ueber-mich  { --bg: url("../img/ueber-mich-1600.webp"); }
.panel-image--kontakt     { --bg: url("../img/kontakt-1600.webp"); }

/* Bild-Abschnitt als Link: Klick öffnet die Zeichnung in voller Größe (neuer Tab).
   Kein transform auf dem Link selbst, sonst fällt background-attachment: fixed aus. */
a.panel-image { display: block; cursor: zoom-in; }

/* Vollbild-Symbol unten links: im Bild-Abschnitt als Hinweis (span), im Hero als eigener Link */
.image-hint {
  position: absolute;
  left: var(--space-6);
  bottom: calc(var(--footer-h) + var(--space-4));
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--di-navy);
  box-shadow: var(--shadow-sm);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.image-hint svg { width: 18px; height: 18px; }
a.panel-image:hover .image-hint,
.image-hint--link:hover,
.image-hint--link:focus-visible {
  background: #fff;
  color: var(--di-blue);
  box-shadow: var(--shadow-md);
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  display: grid;
  align-items: end;
  min-height: calc(100svh - var(--topbar-h));
  height: auto;
}
.hero-inner { width: 100%; position: relative; z-index: 1; }
.hero-card {
  max-width: 640px;
  margin-block: var(--space-16);
  padding: var(--space-8);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.hero-card h1 {
  margin: 0 0 var(--space-4);
  font-size: clamp(2rem, 4.5vw, var(--text-6xl));
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero-card .lead { margin: 0; }
.lead {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--di-slate-700);
}
.hl {
  font-style: normal;
  color: var(--di-blue);
  background: linear-gradient(transparent 65%, var(--di-blue-100) 65%);
  padding: 0 0.1em;
}

.scroll-down {
  position: absolute;
  right: var(--space-6);
  bottom: calc(var(--footer-h) + var(--space-4));
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--di-navy);
  box-shadow: var(--shadow-md);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.scroll-down:hover {
  color: var(--di-blue);
  transform: translateY(2px);
  box-shadow: var(--shadow-lg);
}
.scroll-down svg { width: 20px; height: 20px; }

/* ── Text-Panels (Muster: .di-section / .di-section-band) ─── */
.panel {
  position: relative;
  padding: 72px 0;
  background: #fff;
}
.panel--band {
  background: var(--di-slate-100);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.panel-grid--flip .panel-text { order: 2; }
.panel-text { max-width: 520px; }
.panel-single { max-width: 720px; }

.di-kicker { display: block; margin-bottom: 10px; line-height: 1; }
.panel h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-5xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.panel p {
  margin: 0 0 var(--space-5);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--di-slate-700);
}
.panel p:last-of-type { margin-bottom: var(--space-7); }
.panel-single p:last-child { margin-bottom: 0; }

/* ── Buttons (Muster: .di-btn aus sections.css) ───────────── */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 18px;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn--primary {
  background: var(--di-blue);
  color: var(--di-white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--di-blue-700);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn--secondary {
  background: #fff;
  color: var(--di-navy);
  border-color: var(--di-slate-300);
}
.btn--secondary:hover { background: var(--di-slate-100); color: var(--di-navy); }

/* ── Footer (Muster: public-footer.tsx von di2) ───────────────
   Immer sichtbar: sticky am unteren Rand, der Inhalt scrollt darunter durch.
   Elemente am unteren Bildrand (Pfeil, Vollbild-Symbole) rücken um --footer-h hoch. */
.footer {
  position: sticky;
  bottom: 0;
  z-index: 40;
  min-height: var(--footer-h);
  display: flex;
  align-items: center;
  background: var(--di-navy);
  border-top: 1px solid var(--di-slate-800);
  color: var(--di-slate-400);
  font-size: var(--text-xs);
  padding: var(--space-2) 0 calc(var(--space-2) + env(safe-area-inset-bottom));
}
.footer .container { width: 100%; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.footer a { color: var(--di-slate-400); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer nav a + a::before { content: "·"; margin: 0 var(--space-2); color: var(--di-slate-600); }

/* ── Rechtsseiten ─────────────────────────────────────────── */
.page { padding: var(--space-12) 0 var(--space-20); }
.page-inner { max-width: 760px; }
.page h1 { margin: 0 0 var(--space-2); font-size: var(--text-4xl); letter-spacing: -0.02em; }
.page .stand { margin: 0 0 var(--space-8); color: var(--color-fg-muted); font-size: var(--text-sm); }
.page h2 { margin: var(--space-10) 0 var(--space-3); font-size: var(--text-2xl); letter-spacing: -0.02em; }
.page h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-lg); }
.page p, .page li { font-size: var(--text-base); line-height: 1.65; color: var(--di-slate-700); }
.page p { margin: 0 0 var(--space-4); }
.page ul { padding-left: 1.2em; margin: 0 0 var(--space-4); }
.page li { margin-bottom: var(--space-1); }
.page address { font-style: normal; margin: 0 0 var(--space-4); line-height: 1.65; color: var(--di-slate-700); }
.page .toc {
  margin: 0 0 var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--di-slate-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.page .toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: var(--space-6); }
.page .toc li { font-size: var(--text-sm); margin-bottom: 2px; }
.page .toc a { text-decoration: none; }
.page .toc a:hover { text-decoration: underline; }
.page .note {
  padding: var(--space-3) var(--space-4);
  background: var(--di-cyan-50);
  border: 1px solid var(--di-cyan-100);
  border-radius: var(--radius-lg);
  color: var(--di-cyan-700);
  font-size: var(--text-sm);
}

/* ── 404 ──────────────────────────────────────────────────── */
.notfound { min-height: calc(100svh - var(--topbar-h) - var(--footer-h)); display: grid; align-items: center; }
.notfound .page-inner { max-width: 640px; }
.notfound .links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ── Responsiv ────────────────────────────────────────────── */
@media (max-width: 1120px) {
  .panel h2 { font-size: var(--text-3xl); }
  .panel-grid { gap: var(--space-8); }
}

@media (max-width: 768px) {
  .topnav { display: none; }
  .topnav + .social { padding-left: 0; border-left: 0; }
  .menu { display: block; }
  .panel-image {
    background-attachment: scroll;
    height: 60svh;
    max-height: 640px;
  }
  .panel-image--hero        { --bg: url("../img/hero-960.webp"); }
  .panel-image--ueber-mich  { --bg: url("../img/ueber-mich-960.webp"); }
  .panel-image--kontakt     { --bg: url("../img/kontakt-960.webp"); }
  .hero { min-height: calc(100svh - var(--topbar-h)); max-height: none; }
  .hero-card { margin-block: var(--space-12) 72px; padding: var(--space-6); }
  .panel { padding: 56px 0; }
  .panel-grid { grid-template-columns: 1fr; }
  .panel-grid--flip .panel-text { order: 0; }
  .footer-inner { justify-content: center; text-align: center; }
  .page .toc ol { columns: 1; }
}

/* iOS und Touch-Geräte kennen kein background-attachment: fixed */
@media (hover: none), (pointer: coarse) {
  .panel-image { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel-image { background-attachment: scroll; }
  .scroll-down, .btn, .topnav a { transition: none; }
  .scroll-down:hover { transform: none; }
}