/* ==========================================================================
   Schriften — lokal ausgeliefert, keine Verbindung zu Google
   --------------------------------------------------------------------------
   Lora und Source Sans 3 stehen unter der SIL Open Font License 1.1.
   Die Lizenztexte liegen als OFL-Lora.txt und OFL-SourceSans3.txt neben den
   Schriftdateien in assets/fonts/ — die Lizenz verlangt, dass sie bei der
   Weitergabe der Schriften mitgeliefert werden. Die Schriftnamen duerfen
   nicht geaendert werden (Reserved Font Name).

   Source Sans 3 ist als variable Schrift eingebunden: eine Datei deckt alle
   Gewichte von 200 bis 900 ab. Von Lora wird nur der Schnitt SemiBold
   gebraucht, deshalb liegt er als statische Datei bei.
   Alle drei Dateien sind auf den lateinischen Zeichenvorrat reduziert.
   ========================================================================== */

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3.woff2") format("woff2-variations"),
       url("../fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-italic.woff2") format("woff2-variations"),
       url("../fonts/source-sans-3-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Hans-Loga.de — Stylesheet
   Farbwelt: Petrol / Salbei / Sand — ruhig, medizinisch, vertrauenswürdig
   ========================================================================== */

:root {
  --petrol-900: #0d3b39;
  --petrol-800: #12504d;
  --petrol-700: #186764;
  --petrol-600: #22807c;
  --sage-400:   #7fb3ac;
  --sage-200:   #c3ded9;
  --sage-100:   #e2f0ed;
  --sand-100:   #f7f3ec;
  --sand-200:   #ece4d6;
  --sand-300:   #ddd0ba;
  --ink:        #23292b;
  --ink-soft:   #4d5658;
  --muted:      #77807f;
  --white:      #ffffff;
  --line:       #e3dfd7;

  --accent:     #b8794a;

  --maxw: 1140px;
  --maxw-text: 720px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(13, 59, 57, .06), 0 2px 8px rgba(13, 59, 57, .05);
  --shadow-md: 0 4px 12px rgba(13, 59, 57, .08), 0 12px 32px rgba(13, 59, 57, .07);

  --font-head: "Lora", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------- Reset -- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

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

a { color: var(--petrol-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--petrol-600); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.22;
  color: var(--petrol-900);
  margin: 0 0 .6em;
  letter-spacing: -.005em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4rem); }
h4 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 700; }

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

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: var(--sage-200); color: var(--petrol-900); }

/* ------------------------------------------------------------- Layout -- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.wrap--text { max-width: var(--maxw-text); }

.section { padding-block: clamp(3rem, 6vw, 5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--sand { background: var(--sand-100); }
.section--sage { background: var(--sage-100); }
.section--dark { background: var(--petrol-900); color: var(--sand-100); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark a { color: var(--sage-200); }

.grid { display: grid; gap: 28px; }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 560px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }

.split { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--narrow-left { grid-template-columns: 5fr 7fr; }
  .split--narrow-right { grid-template-columns: 7fr 5fr; }
}
.split--top { align-items: start; }

.lede {
  font-size: clamp(1.1rem, 1.02rem + .35vw, 1.28rem);
  line-height: 1.62;
  color: var(--ink-soft);
}

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--petrol-600);
  margin-bottom: .9rem;
}
.section--dark .eyebrow { color: var(--sage-400); }

.center { text-align: center; }
.center .lede { margin-inline: auto; max-width: 62ch; }

/* ------------------------------------------------------------ Buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .78em 1.5em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--petrol-800); color: var(--white); }
.btn--primary:hover { background: var(--petrol-700); color: var(--white); }

.btn--ghost { border-color: var(--sage-400); color: var(--petrol-800); background: transparent; }
.btn--ghost:hover { background: var(--sage-100); color: var(--petrol-900); }

.btn--light { background: var(--white); color: var(--petrol-900); }
.btn--light:hover { background: var(--sand-100); color: var(--petrol-900); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.8rem; }
.center .btn-row { justify-content: center; }

/* --------------------------------------------------------- Kopfbereich -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark {
  flex: none;
  height: 44px;
  width: auto;
  /* Das Logo trennt sich optisch schon durch die Wellenlinie vom Text,
     deshalb hier kein zusaetzlicher Abstand ueber .brand gap hinaus. */
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--font-head);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--petrol-900);
}
.brand__role {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Navigation */

.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; }

@media (min-width: 980px) {
  .nav { display: block; }
  .nav > ul { display: flex; align-items: center; gap: 4px; }
  .nav a {
    display: block;
    padding: .55em .85em;
    border-radius: var(--radius-sm);
    font-size: .98rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
  }
  .nav a:hover { background: var(--sage-100); color: var(--petrol-900); }
  .nav a[aria-current="page"],
  .nav .is-active > a { color: var(--petrol-800); background: var(--sage-100); }

  .nav .has-sub { position: relative; }
  .nav .has-sub > a::after {
    content: "";
    display: inline-block;
    width: .42em; height: .42em;
    margin-left: .5em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .nav .sub {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    padding: 8px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .nav .has-sub:hover .sub,
  .nav .has-sub:focus-within .sub {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .nav .sub a { font-weight: 500; }
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--petrol-800); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 980px) { .nav-toggle { display: none; } }

/* Mobile Navigation */

.nav-mobile {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--white);
  padding: 12px 0 22px;
}
.nav-mobile.is-open { display: block; }
@media (min-width: 980px) { .nav-mobile { display: none !important; } }

.nav-mobile ul { list-style: none; margin: 0; padding: 0; }
.nav-mobile a {
  display: block;
  padding: .7em 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav-mobile a[aria-current="page"] { color: var(--petrol-700); }
.nav-mobile .sub a {
  padding-left: 1.1em;
  font-weight: 500;
  font-size: .98rem;
  color: var(--ink-soft);
}

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

.hero {
  position: relative;
  background: linear-gradient(160deg, var(--sage-100) 0%, var(--sand-100) 62%, var(--sand-200) 100%);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -12%; top: -30%;
  width: 60vw; height: 60vw;
  max-width: 720px; max-height: 720px;
  background: radial-gradient(circle closest-side at 50% 50%,
              rgba(127,179,172,.42), rgba(127,179,172,0) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.2rem, 7vw, 6rem);
}
.hero h1 { margin-bottom: .45em; }
.hero .lede { max-width: 54ch; }

.hero--page { background: linear-gradient(160deg, var(--sage-100), var(--sand-100)); }
.hero--page::after { content: none; }
.hero--page .hero__inner { padding-block: clamp(2.4rem, 5vw, 3.8rem); }

/* Brotkrumen */

.crumbs {
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.crumbs a { color: var(--petrol-700); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-current] { color: var(--ink-soft); }
.crumbs .sep { margin-inline: .45em; opacity: .6; }

/* --------------------------------------------------------------- Cards -- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card__media { background: var(--sage-100); aspect-ratio: 4 / 3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Freigestelltes Bild (transparenter Hintergrund) in einer Karte: ganz sichtbar */
.card__media--cutout { background: var(--white); }
.card__media--cutout img { object-fit: contain; padding: 5% 0; }
.card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .45em; }
.card__body p { color: var(--ink-soft); font-size: .98rem; }
.card__more {
  margin-top: auto;
  padding-top: 1rem;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  color: var(--petrol-700);
}
.card__more::after { content: " →"; }

a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sage-200); }

/* Infoboxen */

.note {
  border-left: 3px solid var(--sage-400);
  background: var(--sage-100);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px;
  margin: 1.8rem 0;
  font-size: .98rem;
}
.note--todo {
  border-left-color: var(--accent);
  background: #fbf3ec;
}
.note strong { color: var(--petrol-900); }
.note--todo strong { color: #8a5527; }

/* --------------------------------------------------------------- Daten -- */

.datatable { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: 1rem; }
.datatable th, .datatable td {
  text-align: left;
  padding: .7em 1em .7em 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.datatable th { font-weight: 600; color: var(--petrol-800); width: 40%; }
@media (min-width: 620px) { .datatable th { width: 30%; } }

/* Zeitstrahl Lebenslauf */

.timeline { position: relative; margin: 2rem 0 0; padding: 0; list-style: none; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--sage-200), var(--sand-300));
}
@media (min-width: 760px) { .timeline::before { left: 143px; } }

.timeline > li { position: relative; padding: 0 0 1.9rem 34px; }
@media (min-width: 760px) { .timeline > li { padding-left: 176px; } }

.timeline > li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--sage-400);
}
@media (min-width: 760px) { .timeline > li::before { left: 136px; } }

.timeline__years {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  color: var(--petrol-600);
  letter-spacing: .01em;
  margin-bottom: .2rem;
}
@media (min-width: 760px) {
  .timeline__years {
    position: absolute;
    left: 0; top: 4px;
    width: 120px;
    text-align: right;
    margin-bottom: 0;
  }
}
.timeline__title { font-weight: 600; color: var(--ink); }
.timeline__detail { margin: .35rem 0 0; color: var(--ink-soft); font-size: .97rem; }
.timeline__sub { margin: .4rem 0 0; padding: 0 0 0 1.2em; list-style: disc; color: var(--ink-soft); font-size: .97rem; }
.timeline__sub li { padding: 0 0 .15rem; }

/* Schlagwortliste */

.taglist { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0 0; padding: 0; list-style: none; }
.taglist li {
  background: var(--sage-100);
  border: 1px solid var(--sage-200);
  color: var(--petrol-800);
  border-radius: 999px;
  padding: .35em .95em;
  font-size: .9rem;
}

/* Untereinander stehende Liste (z. B. Lehrgänge) */
.stacklist { margin: 1rem 0 0; padding: 0; list-style: none; }
.stacklist li {
  padding: .6em 0 .6em 1.4em;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.stacklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage-200);
}

/* ------------------------------------------------------------ Akkordeon -- */

.accordion { border-top: 1px solid var(--line); margin: 2rem 0; }

.accordion details {
  border-bottom: 1px solid var(--line);
}
.accordion summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 1.15em 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem);
  font-weight: 600;
  color: var(--petrol-900);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  margin-top: .42em;
  width: .6em; height: .6em;
  border-right: 2px solid var(--sage-400);
  border-bottom: 2px solid var(--sage-400);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.accordion details[open] summary::after { transform: rotate(-135deg); }
.accordion summary:hover { color: var(--petrol-600); }
.accordion__content { padding: 0 0 1.8rem; max-width: 74ch; }
.accordion__content > :first-child { margin-top: 0; }

/* Warnhinweis-Listen (Tips) */

.advice { margin: 0 0 1.6rem; padding: 0; list-style: none; }
.advice > li {
  position: relative;
  padding: 0 0 .7rem 1.6em;
  color: var(--ink-soft);
}
.advice > li::before {
  content: "";
  position: absolute;
  left: .1em; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage-400);
}

.advice-block { margin-bottom: 2rem; }
.advice-block h4 {
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--petrol-800);
  margin-bottom: .3em;
}
.advice-block__why {
  font-style: italic;
  color: var(--muted);
  font-size: .95rem;
  margin-bottom: .8em;
}

/* --------------------------------------------------------------- Bilder -- */

.figure { margin: 0; }
.figure img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.figure figcaption {
  margin-top: .7rem;
  font-size: .88rem;
  color: var(--muted);
}

/* Etwas schmaler und an die rechte Spaltenkante gerueckt. Zusammen mit
   .split--top schliesst die Oberkante des Bildes buendig mit der Oberkante
   der Textspalte daneben ab. */
.figure--inset { max-width: 86%; margin-left: auto; }

/* Einspaltig (unter 860px) wieder volle Breite, sonst steht das Bild
   verloren am rechten Rand. */
@media (max-width: 859px) {
  .figure--inset { max-width: 100%; margin-left: 0; }
}

/* Freigestellte Bilder (transparenter Hintergrund): kein Rahmen, begrenzte Höhe */
.figure--cutout { text-align: center; }
.figure--cutout img {
  width: auto;
  max-width: 100%;
  max-height: 520px;
  border: 0;
  border-radius: 0;
}

/* Zwei freigestellte Figuren nebeneinander (Mann und Frau) */
.figure-pair {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(8px, 2vw, 20px);
}
/* Breiten im Verhältnis der Bildformate (543:675), damit beide gleich hoch stehen */
.figure-pair picture { display: block; min-width: 0; }
.figure-pair picture:nth-child(1) { flex: 543 1 0; }
.figure-pair picture:nth-child(2) { flex: 675 1 0; }
.figure-pair img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
}

.portrait {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--sage-100);
}
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Galerie */

.gallery { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--sage-100);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery a:hover img { transform: scale(1.02); box-shadow: var(--shadow-md); }
.gallery figcaption { margin-top: .5rem; font-size: .85rem; color: var(--muted); }

.gallery-group { margin-bottom: 3rem; }
.gallery-group > h3 { margin-bottom: 1.2rem; }

.gallery a { display: block; cursor: zoom-in; border-radius: var(--radius-sm); }
.gallery a:focus-visible { outline: 3px solid var(--petrol-600); outline-offset: 3px; }

/* ------------------------------------------------------ Bildbetrachter -- */

html.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 18, 18, .95);
  color: #fff;
  overflow: hidden;
}
.lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.lightbox::backdrop { background: transparent; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  min-height: 64px;
}
.lightbox__count { font-size: .95rem; letter-spacing: .04em; color: rgba(255, 255, 255, .82); }

.lightbox__stage {
  margin: 0;
  padding: 0 64px 18px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  width: auto;
  height: auto;
  min-height: 0;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .45);
  transition: opacity .18s ease;
}
.lightbox__img.is-loading { opacity: .25; }
.lightbox__caption {
  max-width: 62ch;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}

.lightbox__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .26); }
.lightbox__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lightbox__btn[hidden] { display: none; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__prev { left: 10px; }
.lightbox__next { right: 10px; }

@media (max-width: 640px) {
  .lightbox__stage { padding-inline: 8px; }
  .lightbox__nav { top: auto; bottom: 14px; transform: none; }
  .lightbox__prev { left: 14px; }
  .lightbox__next { right: 14px; }
  .lightbox__img { max-height: calc(100dvh - 210px); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__img, .lightbox__btn { transition: none; }
}

/* ------------------------------------------------------------ Formular -- */

.form { display: grid; gap: 18px; margin-top: 1.6rem; }
@media (min-width: 620px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-weight: 600; font-size: .95rem; color: var(--petrol-800); }
.field input, .field textarea, .field select {
  font: inherit;
  font-size: 1rem;
  padding: .72em .9em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--sand-300);
  border-radius: var(--radius-sm);
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--sage-400);
  box-shadow: 0 0 0 3px var(--sage-100);
}
.field textarea { min-height: 150px; resize: vertical; }
.field__hint { font-size: .85rem; color: var(--muted); }

.checkbox { display: flex; gap: .7em; align-items: flex-start; font-size: .93rem; color: var(--ink-soft); }
.checkbox input { width: auto; margin-top: .28em; flex: none; }

/* Kontaktdaten-Liste */

.contact-list { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.contact-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list .contact-list__icon {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sage-100);
  color: var(--petrol-700);
}
.contact-list__label {
  display: block;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-list__value { font-weight: 600; color: var(--ink); }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Fuss -- */

.site-footer {
  background: var(--petrol-900);
  color: var(--sage-200);
  padding-block: clamp(2.6rem, 5vw, 3.6rem) 2rem;
  font-size: .96rem;
}
.site-footer h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer a { color: var(--sage-200); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: .28rem 0; }
.site-footer__brand { max-width: 34ch; }
.site-footer__brand p { color: rgba(226, 240, 237, .78); font-size: .95rem; }

.site-footer__grid { display: grid; gap: 34px; }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }

.site-footer__bottom {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(226, 240, 237, .18);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  font-size: .88rem;
  color: rgba(226, 240, 237, .68);
}
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 22px; }

/* --------------------------------------------------------- Hilfsklassen -- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--petrol-800);
  color: var(--white);
  padding: .7em 1.2em;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: var(--white); }

:focus-visible {
  outline: 3px solid var(--sage-400);
  outline-offset: 2px;
  border-radius: 3px;
}

.stack > * + * { margin-top: 1.1em; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.small { font-size: .9rem; }
.muted { color: var(--muted); }

.source-note {
  margin-top: 1.6rem;
  font-size: .87rem;
  color: var(--muted);
  font-style: italic;
}

/* Referenzliste (Literatur) */

.reflist { margin: 0; padding: 0; list-style: none; font-size: .9rem; color: var(--ink-soft); }
.reflist li { padding: .3rem 0; border-bottom: 1px dotted var(--line); }
.reflist li:last-child { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .btn-row, .hero::after { display: none !important; }
  body { font-size: 11pt; }
  .section { padding-block: 1rem; }
}