/* markuslanz.de — Nachbau des bisherigen Auftritts (Theme „Stockholm“), ohne Framework.
   Maße und Farben sind am 25.09.2026 an der alten Seite gemessen (Chrome, 1440 px und 390 px). */

:root {
  --text: #6e6e6e;        /* Fließtext */
  --dunkel: #181818;      /* Überschriften, Links */
  --grau: #808080;
  --tief: #333333;
  --fuss: #333333;        /* Footer-Fläche */
  --fuss-link: #a2a2a2;
  --kontakt: #a5a5a5;
  --menu: #6e6e6e;
  --behaelter: 1100px;
  --kopf: 110px;
  --kopf-klein: 70px;
  --poppins: 'Poppins', sans-serif;
  --roboto: 'Roboto', sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 300 15px/23px var(--roboto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, picture { display: block; max-width: 100%; height: auto; }
a { color: var(--dunkel); text-decoration: none; transition: color .15s ease-out; }
p { margin: 0; line-height: 29px; }
strong { font-weight: 400; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; color: var(--dunkel); }
h3 { font: 400 24px/41px var(--poppins); }
h4 { font: 300 17px/33px var(--roboto); }
h4 strong { font-weight: 400; }
h6 { font: 400 15px/23.57px var(--poppins); text-transform: capitalize; }
.grau { color: var(--grau); }
.dunkel { color: var(--tief); }

.behaelter { width: var(--behaelter); max-width: 100%; margin: 0 auto; }
@media (max-width: 1200px) { :root { --behaelter: 950px; } }
@media (max-width: 1000px) { :root { --behaelter: 768px; } }
@media (max-width: 768px)  { :root { --behaelter: 600px; } }
@media (max-width: 600px)  { :root { --behaelter: 420px; } }
@media (max-width: 480px)  { :root { --behaelter: 300px; } }

/* ---------- Kopfzeile ---------- */
.kopf { position: relative; z-index: 100; height: var(--kopf); background: #fff; }
.kopf--transparent { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
.kopf__innen { height: 100%; display: flex; align-items: stretch; justify-content: space-between; padding: 0 45px; }
.kopf__logo { width: 233px; }
.kopf__menu ul { display: flex; margin: 0; padding: 0; list-style: none; }
.kopf__menu a {
  display: block; padding: 0 16px;
  font: 500 15px/var(--kopf) var(--poppins); text-transform: capitalize;
  color: var(--menu);
}
.kopf__menu a span { display: inline-block; line-height: 21px; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.kopf--transparent .kopf__menu a { color: #fff; }
.kopf__menu a:hover { color: var(--dunkel); }
.kopf--transparent .kopf__menu a:hover { color: #fff; opacity: .8; }
.kopf__burger { display: none; }

/* Sticky: nach dem Scrollen weiß, 70 px hoch, graue Links */
.kopf.ist-fest {
  position: fixed; top: 0; left: 0; right: 0; height: var(--kopf-klein); background: #fff;
  animation: kopf-rein .3s ease-out;
}
.kopf.ist-fest .kopf__menu a { color: var(--menu); line-height: var(--kopf-klein); }
.kopf.ist-fest .kopf__menu a.ist-aktiv span { border-bottom-color: currentColor; }
.kopf.ist-fest .kopf__menu a:hover { opacity: 1; color: var(--dunkel); }
@keyframes kopf-rein { from { transform: translateY(-100%); } to { transform: none; } }
/* Platzhalter, damit auf Unterseiten nichts springt, wenn die Kopfzeile fest wird */
.unterseite.kopf-fest main { padding-top: var(--kopf); }

.mobilmenu { display: none; }

/* Tablet (bis 1000 px): Kopfzeile 100 px, kleines Menüsymbol links.
   Handy (bis 420 px): Symbol rechts oben, Startbild rückt unter die Kopfzeile (wie live). */
@media (max-width: 1000px) {
  .kopf, .kopf--transparent { position: relative; height: auto; background: #fff; }
  .kopf.ist-fest { position: relative; animation: none; height: auto; }
  .unterseite.kopf-fest main { padding-top: 0; }
  .kopf__innen { height: 100px; padding: 0 45px; align-items: center; }
  .kopf__menu { display: none; }
  .kopf__logo { display: none; }
  .kopf__burger {
    display: block; order: -1; padding: 0; border: 0; background: none; line-height: 0;
    color: #5d5d5d; cursor: pointer;
  }
  .kopf__burger svg { width: 12px; height: 10.5px; }
  .mobilmenu { display: block; padding: 0 15px; background: #fff; }
  .mobilmenu[hidden] { display: none; }
  .mobilmenu ul { margin: 0; padding: 0; list-style: none; }
  .mobilmenu li { border-bottom: 1px solid #fff; }
  .mobilmenu li:last-child { border-bottom: 0; }
  .mobilmenu a {
    display: block; padding: 9px 0;
    font: 400 14px/17px var(--poppins); text-transform: capitalize; color: #212121;
  }
}
@media (max-width: 420px) {
  .kopf__innen { height: 100px; padding: 0 35px 0 15px; align-items: flex-start; justify-content: flex-end; }
  .kopf__burger { order: 0; margin-top: 16px; }
  .kopf__burger svg { width: 21px; height: 18.4px; margin-top: 3px; }
  .kopf:has(.mobilmenu:not([hidden])) .kopf__innen { height: 60px; }
  .start .kopf__innen { height: 62.5px; }
}

/* ---------- Startseite ---------- */
.abschnitt { text-align: center; }
.spalte { width: calc(var(--behaelter) * .88); max-width: 100%; margin: 0 auto; }

/* Bildwechsel (ersetzt Slider Revolution: Überblenden 300 ms, 9 s Standzeit) */
.slider { position: relative; width: 100%; aspect-ratio: 1920 / 1110; overflow: hidden; background: #fff; }
.slider__bild { position: absolute; inset: 0; opacity: 0; transition: opacity .3s linear; }
.slider__bild.ist-aktiv { opacity: 1; z-index: 1; }
.slider__bild picture, .slider__bild picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.slider__unterschrift {
  position: absolute; left: 50%; top: 25.6%; width: 46.33%; height: auto; transform: translateX(-50%);
}
.slider__punkte { position: absolute; z-index: 2; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 6px; }
@media (max-width: 1000px) { .slider__punkte { bottom: 15px; } }
.slider__punkt {
  width: 16px; height: 16px; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.slider__punkt.ist-aktiv, .slider__punkt:hover { background: #fff; }
.slider:not(.ist-bereit) .slider__punkte { visibility: hidden; }

.abschnitt--intro { padding: 107px 0 85px; }
.abschnitt--intro h1 {
  font: 600 65px/85.3px var(--roboto); letter-spacing: 4px; color: #000; text-transform: capitalize;
}
.intro__text { margin-top: 14.5px; }
@media (max-width: 420px) {
  .abschnitt--intro h1 { font-size: 38px; line-height: 49.9px; }
  .abschnitt--intro h3 { font-size: 12px; }
  .intro__text { margin-top: 5px; }
}

.abschnitt--titel { padding: 107px 0 83px; }

.abschnitt--aktuelles { padding-bottom: 119px; }
.abschnitt--aktuelles .spalte { width: var(--behaelter); }
.eintrag p strong { font-weight: 400; }
.eintrag + .eintrag { margin-top: 102px; }
.eintrag--termin + .eintrag { margin-top: 48px; }
.eintrag__logo { display: block; width: 103px; margin: 0 auto 12px; }
.eintrag__logo--eng { margin-bottom: 0; }
.eintrag .abstand-oben { margin-top: 12px; }
.eintrag.ist-abgelaufen { display: none; }

.abschnitt--projekte { padding: 107px 0 83px; }
.abschnitt--projekte h3 { margin-bottom: 32px; }
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: 1px; }
@media (max-width: 600px)  { .kacheln { grid-template-columns: 1fr; } }
.kachel a { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.kachel picture, .kachel img { width: 100%; height: 100%; object-fit: cover; }
.kachel__schleier {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 20px 15px; background: rgba(255, 255, 255, .9); opacity: 0; transition: opacity .3s ease-out;
}
.kachel a:hover .kachel__schleier, .kachel a:focus-visible .kachel__schleier { opacity: 1; }
.kachel__titel { display: block; margin-bottom: 5px; font: 400 18px/33px var(--poppins); color: var(--dunkel); text-transform: capitalize; }
.kachel__kategorie { font: 400 15px/23.57px var(--roboto); color: var(--text); }

.abschnitt--vortraege { padding: 107px 0 83px; }
.abschnitt--vortraege > .spalte:first-child h3 { margin-bottom: 32px; }
.vortraege__text { width: var(--behaelter); margin-top: 50.5px; }
.vortraege__text h4, .vortraege__text h4 span { color: #000; }
.vortraege__text h4 + h4 { margin-bottom: 50px; }
.vortraege__text h4.vortraege__trailer { margin-bottom: 0; }
.video { width: var(--behaelter); max-width: 100%; margin: 0 auto; }
.video { position: relative; }
.video video { width: 100%; max-width: 1060px; height: auto; aspect-ratio: 1060 / 596; background: #000; object-fit: cover; }
.video__start {
  position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; padding: 0;
  border: 0; background: none; color: #fff; cursor: pointer; opacity: .85; transition: opacity .2s;
}
.video__start:hover, .video__start:focus-visible { opacity: 1; }
.video__start svg { width: 100%; height: 100%; }
.video.laeuft .video__start { display: none; }
.video__rahmen { position: relative; max-width: 1060px; }

.abschnitt--kontakt { padding-top: 107px; }
.abschnitt--kontakt h3 { margin-bottom: 32px; }
.kontakt { display: grid; grid-template-columns: calc(50% - 15px) calc(50% + 15px); background: var(--kontakt); text-align: right; padding-top: 16px; }
.kontakt__spalte picture img { width: 100%; }
.kontakt__text { padding: 61px 15px 0 0; color: #000; }
.kontakt__text p { font-size: 18px; font-weight: 400; }
.kontakt__text strong { font-weight: 700; }
.kontakt__text p.mail { font-size: 28px; }
.kontakt__text p.mail a { color: #000; text-decoration: underline; }
@media (max-width: 767px) {
  .kontakt { grid-template-columns: 1fr; }
  .kontakt__spalte:empty { display: none; }
}

/* Abschnittsabstände auf dem Handy (bis 420 px) — an der alten Seite bei 390 px gemessen */
@media (max-width: 420px) {
  .abschnitt--intro { padding: 31px 0 80px; }
  .abschnitt--titel { padding: 31px 0 7.5px; }
  .abschnitt--aktuelles { padding-bottom: 121.5px; }
  .abschnitt--projekte { padding: 31px 0 85px; }
  .abschnitt--vortraege { padding: 31px 0 83px; }
  .abschnitt--kontakt { padding-top: 31px; }
}

/* ---------- Footer ---------- */
.fuss__oben {
  background: var(--fuss) url('../medien/unterschrift.png') no-repeat center 80px / 200px auto;
  padding: 230px 0 76px; color: #fff;
}
.fuss__spalten { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding-left: 8px; }
.fuss__spalten > div { min-height: 58px; }
.fuss__spalten a { color: var(--fuss-link); font-weight: 300; }
.fuss__spalten a:hover { color: #fff; }
@media (max-width: 600px) {
  .fuss__spalten { grid-template-columns: 1fr; row-gap: 25px; padding-left: 0; }
  .fuss__spalten > div:first-child, .fuss__spalten > div:last-child { min-height: 0; }
}
.fuss__unten { background: var(--fuss); height: 101px; }
@media (max-width: 600px) { .fuss__unten { height: 41px; } }
.fuss__linie { height: 1px; background: #fff; }

/* ---------- Galerieseite ---------- */
/* Umbrüche wie live gemessen: Innenabstand 0/35/30/25 px, zweispaltiger Kopf ab 601 px,
   Raster 3 Spalten ab 769 px, 2 Spalten ab 600 px, darunter 1 Spalte; Abstand 2 % der
   Behälterbreite, bis 600 px Zeilenabstand 4 %. */
.seite-projekt main { padding-top: 22px; }
.projekt { --innen: 0px; --luecke: calc(var(--behaelter) * .02); }
.projekt__kopf { display: grid; grid-template-columns: 75% 25%; padding: 46px var(--innen) 26px; }
.projekt__text { padding-right: 20px; }
.projekt__text h2 { font: 400 32px/38.4px var(--poppins); margin-bottom: 23px; }
.projekt__text p { margin-bottom: 29px; }
.projekt__angaben { padding-left: 20px; padding-top: 60px; min-height: 360px; }
.projekt__text--breit p { margin-left: -15px; margin-right: -15px; }
.projekt__text--breit p:last-child { margin-bottom: 21px; }
.projekt__text--breit h2 { margin-bottom: 24px; }
.angabe { margin-bottom: 20px; }
.angabe h6 { margin-bottom: 4px; }
.angabe p { margin-bottom: 29px; }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--luecke); padding-bottom: var(--luecke); }
.galerie__bild { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.galerie__bild::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .9); opacity: 0; transition: opacity .3s ease-out; }
.galerie__bild:hover::after, .galerie__bild:focus-visible::after { opacity: 1; }
.galerie__bild picture, .galerie__bild img { width: 100%; height: 100%; object-fit: cover; }
.projekt__navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 40px 0 50px; }
.projekt__navigation > div { display: flex; line-height: 0; }
.projekt__navigation a { display: inline-flex; align-items: center; height: 33px; color: #a6a6a6; }
.projekt__navigation a:hover { color: var(--dunkel); }
.projekt__prev { justify-self: start; }
.projekt__next { justify-self: end; }
.projekt__raster svg { width: 20px; height: 20px; }
.projekt__prev svg, .projekt__next svg { width: 38px; height: 38px; }

@media (max-width: 1200px) { .projekt { --innen: 35px; } .projekt__kopf { padding-top: 39px; } }
@media (max-width: 1000px) { .seite-projekt main { padding-top: 32px; } }
@media (max-width: 768px) {
  .projekt { --innen: 30px; }
  .projekt__kopf { padding-top: 26px; }
  .projekt__text h2 { font-size: 30px; line-height: 36px; margin-bottom: 20px; }
  .projekt__text h2 span { font-size: 20.4px; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .projekt { --innen: 25px; }
  .projekt__kopf { grid-template-columns: 1fr; padding-top: 21px; padding-bottom: 21px; }
  .projekt__text { padding-right: 0; }
  .projekt__text h2 { font-size: 26px; line-height: 19.8px; margin-bottom: 23px; }
  .projekt__text h2 span { font-size: 15.6px; }
  .projekt__angaben { padding-left: 0; min-height: 360px; }
  .projekt__text--breit p { margin-right: -35px; }
  .galerie { row-gap: calc(var(--behaelter) * .04); padding-bottom: calc(var(--behaelter) * .04); }
}
@media (max-width: 599px) { .galerie { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .projekt__text h2 { font-size: 22px; }
  .projekt__text h2 span { font-size: 13.2px; }
}

/* ---------- Übersicht /projekte/ (Theme-Archiv) ---------- */
.seite-archiv main, .seite-rechtstext main { padding-top: 44px; }
.beitrag { margin-bottom: 50px; }
.beitrag__bild img { width: 100%; }
.beitrag__text { padding: 48px 51px 46px; text-align: left; }
.beitrag__info { display: inline-block; font: italic 300 14px/14px var(--roboto); color: var(--dunkel); }
.beitrag__zeit, .beitrag__kategorie { margin-right: 10px; padding-right: 10px; }
.beitrag__kategorie::before, .beitrag__autor::before { content: '/'; }
/* Schrägstriche sitzen live mittig zwischen den Angaben (nachgemessen 1440/390 px) */
.beitrag__kategorie::before { margin: 0 10px 0 -11px; }
.beitrag__autor { margin-left: -10px; }
.beitrag__autor::before { margin-right: 14px; }
.beitrag__text h2 { font: 400 32px/38.4px var(--poppins); margin: 28px 0 32px; }
.beitrag__text h2 a { color: var(--dunkel); }
.beitrag__auszug { margin-bottom: 15px; }
@media (max-width: 420px) {
  .beitrag__info { line-height: 21px; }
  .beitrag__zeit, .beitrag__kategorie { margin-right: 6px; padding-right: 6px; }
  .beitrag__kategorie::before { margin: 0 6px 0 -7px; }
  .beitrag__autor { margin-left: -6px; }
  .beitrag__autor::before { margin-right: 10px; }
  .beitrag__text h2 { font-size: 22px; line-height: 14.3px; margin: 12px 0 15px; }
  .beitrag__text h2 a { font-size: 11px; }
}

/* ---------- Rechtstexte ---------- */
.seite-rechtstext main { padding-bottom: 100px; }
.rechtstext { text-align: left; }
.rechtstext h1 { font: 700 64px/84px var(--roboto); letter-spacing: .0625em; text-transform: uppercase; color: #5d5d5d; hyphens: manual; }
/* Live stand die H1 fest auf 64 px und ragte unter 1000 px über den Rand (seitliches Scrollen) — hier passt sie in den Behälter;
   „Datenschutz­erklärung“ trennt nur dort, wo auch 28 px nicht reichen (Handy). */
@media (max-width: 1000px) { .rechtstext h1 { font-size: 50px; line-height: 66px; } }
@media (max-width: 768px)  { .rechtstext h1 { font-size: 40px; line-height: 52px; } }
@media (max-width: 600px)  { .rechtstext h1 { font-size: 28px; line-height: 37px; } }
.rechtstext h2 { font: 400 32px/38.4px var(--poppins); margin-bottom: 8px; }
.rechtstext h3 { font: 400 24px/41px var(--poppins); }
.rechtstext p { margin-bottom: 15px; }
.rechtstext--impressum p { margin-bottom: 29px; }
.rechtstext--impressum p:last-child { margin-bottom: 0; }
.rechtstext .abstand-32 { height: 32px; }
.rechtstext ul { margin: 0 0 29px; padding: 0; list-style: disc inside; }
.rechtstext li { line-height: 29px; }
.rechtstext a { color: var(--dunkel); overflow-wrap: anywhere; } /* lange Adressen (IONOS-AVV) umbrechen statt über den Rand */
@media (max-width: 420px) { .rechtstext h2 { font-size: 22px; line-height: 26.4px; } }

/* ---------- Großansicht (PhotoSwipe) ---------- */
.pswp__bildunterschrift {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 60px 16px;
  font: 300 15px/23px var(--roboto); color: #fff; text-align: center;
}
.pswp__bildunterschrift:empty { display: none; }

:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 2px; }
.kopf--transparent:not(.ist-fest) :focus-visible { outline-color: #fff; }