/* =====================================================================
   ml-consrest.ch – Monika Luzi Conservation & Restauration
   Hausfarben aus dem Logo: Anthrazit #3c3c3b, Gelb #ffd237, Weiss #f6f6f6.
   Schrift: Roboto (Fliesstext), Roboto Condensed (Überschriften) –
   beide selbst gehostet, keine Verbindung zu Google.
   ===================================================================== */

/* ── Schriften ─────────────────────────────────────────────────── */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Gestaltungswerte ──────────────────────────────────────────── */
:root {
  --anthrazit:      #3c3c3b;
  --anthrazit-tief: #2e2e2d;
  --anthrazit-hell: #55554f;
  --gelb:           #ffd237;
  --gelb-tief:      #e0b415;
  --weiss:          #ffffff;
  --papier:         #f6f6f6;
  --papier-warm:    #efeeea;
  --linie:          #dedcd6;
  --text:           #2e2e2d;
  --text-leise:     #6a6a66;
  --text-invers:    #f6f6f6;
  --text-invers-leise: rgba(246, 246, 246, .72);

  --bahn: 1180px;
  --radius: 3px;
  --kopf-hoehe: 92px;
  --sicher-oben: env(safe-area-inset-top, 0px);
  --schatten: 0 10px 30px rgba(46, 46, 45, .10);
  --schatten-tief: 0 20px 50px rgba(46, 46, 45, .18);
  --gang: cubic-bezier(.22, .61, .36, 1);

  --schrift-titel: 'Roboto Condensed', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-text:  'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Grundlagen ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--sicher-oben) + 8px);
  background: var(--anthrazit);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--schrift-text);
  font-weight: 300;
  font-size: clamp(1rem, .97rem + .18vw, 1.09rem);
  line-height: 1.72;
  color: var(--text);
  background: var(--anthrazit);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 500; }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: .005em;
}
h1 { font-size: clamp(2.2rem, 1.5rem + 3.2vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); font-weight: 500; }

p + p { margin-top: 1.1em; }

::selection { background: var(--gelb); color: var(--anthrazit); }

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

.springmarke {
  position: absolute; left: -9999px;
  background: var(--gelb); color: var(--anthrazit);
  padding: .8em 1.4em; z-index: 2000; font-weight: 500;
}
.springmarke:focus { left: 12px; top: 12px; }

/* ── Bahn (Inhaltsbreite) ──────────────────────────────────────── */
.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.bahn--schmal { max-width: 760px; }

/* ── Oberzeile, Lead, Textlink ─────────────────────────────────── */
.oberzeile {
  font-family: var(--schrift-titel);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gelb-tief);
  margin-bottom: 1em;
}
.abschnitt--dunkel .oberzeile,
.hero .oberzeile { color: var(--gelb); }

.lead {
  font-size: clamp(1.06rem, 1rem + .35vw, 1.25rem);
  line-height: 1.62;
  color: var(--text-leise);
}
.abschnitt--dunkel .lead { color: var(--text-invers-leise); }

.textlink {
  color: inherit;
  border-bottom: 1px solid var(--gelb);
  transition: background .2s var(--gang);
}
.textlink:hover { background: rgba(255, 210, 55, .22); }

.hinweis { font-size: .86rem; color: var(--text-leise); }

/* ── Knöpfe ────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--schrift-titel);
  font-size: .95rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .95em 1.7em;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; white-space: nowrap;
  transition: background .25s var(--gang), color .25s var(--gang),
              border-color .25s var(--gang), transform .25s var(--gang);
}
.knopf .icon { transition: transform .3s var(--gang); }
.knopf:hover .icon { transform: translateX(3px); }

.knopf--gelb { background: var(--gelb); color: var(--anthrazit); }
.knopf--gelb:hover { background: var(--gelb-tief); transform: translateY(-2px); }

.knopf--rand { border-color: currentColor; color: inherit; }
.hero .knopf--rand, .abschnitt--dunkel .knopf--rand { color: var(--text-invers); }
.knopf--rand:hover { background: var(--gelb); border-color: var(--gelb); color: var(--anthrazit); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Symbole ───────────────────────────────────────────────────── */
.icon { width: 1.35em; height: 1.35em; fill: currentColor; flex: none; }
.icon--xs    { width: .95em;  height: .95em; }
.icon--sm    { width: 1.15em; height: 1.15em; }
.icon--gross { width: 2.2em;  height: 2.2em; }

/* ── Hinweisbalken ─────────────────────────────────────────────── */
.balken {
  background: var(--gelb); color: var(--anthrazit);
  font-size: .9rem; padding: .55em 0;
}
.balken__innen { display: flex; flex-wrap: wrap; gap: .8em; justify-content: center; align-items: center; }
.balken a { display: inline-flex; align-items: center; gap: .3em; font-weight: 500; border-bottom: 1px solid currentColor; }

/* ── Kopfbereich ───────────────────────────────────────────────── */
.kopfzone { position: fixed; inset: 0 0 auto 0; z-index: 900; padding-top: var(--sicher-oben); }

.kopf {
  height: var(--kopf-hoehe);
  display: flex; align-items: center;
  background: rgba(60, 60, 59, .55);
  border-bottom: 1px solid rgba(246, 246, 246, .12);
  backdrop-filter: blur(8px);
  transition: background .35s var(--gang), height .35s var(--gang), border-color .35s var(--gang);
}
.kopf.ist-gescrollt {
  background: var(--anthrazit);
  border-bottom-color: var(--gelb);
  height: 74px;
}
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }

.marke img { height: 46px; width: auto; transition: height .35s var(--gang); }
.kopf.ist-gescrollt .marke img { height: 38px; }

.nav__liste { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__link {
  display: block; position: relative;
  font-family: var(--schrift-titel);
  font-size: .95rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-invers);
  padding: .6em .95em;
}
.nav__link::after {
  content: ''; position: absolute; left: .95em; right: .95em; bottom: .35em;
  height: 2px; background: var(--gelb);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--gang);
}
.nav__link:hover::after { transform: scaleX(1); }

.nav-knopf {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; background: none; border: 0; cursor: pointer;
}
.nav-knopf span { display: block; height: 2px; width: 26px; background: var(--text-invers); transition: transform .3s var(--gang), opacity .2s; }
.menue-offen .nav-knopf span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menue-offen .nav-knopf span:nth-child(2) { opacity: 0; }
.menue-offen .nav-knopf span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Menü auf kleinen Bildschirmen ─────────────────────────────── */
.mobile-nav {
  position: fixed; inset: 0; z-index: 890;
  background: var(--anthrazit);
  padding: calc(var(--kopf-hoehe) + 40px) clamp(20px, 8vw, 60px) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--text-invers);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__liste { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mobile-nav__liste a {
  display: block; padding: .5em 0;
  font-family: var(--schrift-titel);
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid rgba(246, 246, 246, .12);
}
.mobile-nav__liste a:hover { color: var(--gelb); }
.mobile-nav__fuss { display: flex; flex-direction: column; gap: 12px; padding-top: 30px; }
.mobile-nav__fuss a { display: inline-flex; align-items: center; gap: .6em; color: var(--text-invers-leise); }
.mobile-nav__fuss a:hover { color: var(--gelb); }

/* ── Titelbereich ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex; align-items: flex-end;
  color: var(--text-invers);
  background: var(--anthrazit);
  overflow: hidden;
}
.hero__bild { position: absolute; inset: 0; z-index: 0; }
.hero__bild picture, .hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.hero__schleier {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(46, 46, 45, .75) 0%, rgba(46, 46, 45, .15) 32%, rgba(46, 46, 45, .55) 72%, rgba(46, 46, 45, .95) 100%),
    linear-gradient(90deg, rgba(46, 46, 45, .85) 0%, rgba(46, 46, 45, .25) 62%, rgba(46, 46, 45, 0) 100%);
}
.hero__innen {
  position: relative; z-index: 2;
  padding-top: calc(var(--kopf-hoehe) + 90px);
  padding-bottom: clamp(80px, 12vh, 150px);
  max-width: 900px;
}
.hero__titel { color: var(--weiss); max-width: 16ch; }
.hero__titel::after {
  content: ''; display: block;
  width: 90px; height: 3px; background: var(--gelb);
  margin: clamp(22px, 3vw, 34px) 0;
}
.hero__text { max-width: 60ch; color: rgba(255, 255, 255, .88); margin-bottom: clamp(28px, 4vw, 40px); }

.hero__runter {
  position: absolute; left: 50%; bottom: 26px; z-index: 2;
  transform: translateX(-50%);
  width: 26px; height: 44px;
  border: 2px solid rgba(246, 246, 246, .45); border-radius: 14px;
  display: flex; justify-content: center;
}
.hero__runter span {
  width: 3px; height: 9px; background: var(--gelb); border-radius: 2px; margin-top: 7px;
  animation: tropfen 1.8s var(--gang) infinite;
}
@keyframes tropfen {
  0%   { opacity: 0; transform: translateY(0); }
  35%  { opacity: 1; }
  80%  { opacity: 0; transform: translateY(12px); }
  100% { opacity: 0; }
}

/* ── Abschnitte ────────────────────────────────────────────────── */
.abschnitt { padding: clamp(64px, 9vw, 130px) 0; }
.abschnitt--hell   { background: var(--papier); color: var(--text); }
.abschnitt--dunkel { background: var(--anthrazit); color: var(--text-invers); }
.abschnitt--dunkel h1, .abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: var(--weiss); }

.abschnitt__kopf { max-width: 68ch; margin-bottom: clamp(38px, 5vw, 64px); }
.abschnitt__kopf h2::after {
  content: ''; display: block;
  width: 64px; height: 3px; background: var(--gelb);
  margin: 20px 0 24px;
}

/* ── Einblenden beim Scrollen ──────────────────────────────────── */
.auftritt { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--gang), transform .7s var(--gang); }
.auftritt.sichtbar { opacity: 1; transform: none; }

/* ── Leistungskarten ───────────────────────────────────────────── */
.karten {
  display: grid; gap: clamp(18px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--gelb);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 38px);
  display: flex; flex-direction: column;
  transition: transform .3s var(--gang), box-shadow .3s var(--gang);
}
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
.karte__symbol { color: var(--anthrazit); margin-bottom: 18px; }
.karte h3 { margin-bottom: .2em; }
.karte__zusatz {
  font-family: var(--schrift-titel);
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-leise); margin-bottom: 1em;
}
.karte__text { font-size: .98rem; }
.karte .hakenliste { margin-top: auto; padding-top: 1.4em; }

/* ── Hakenliste ────────────────────────────────────────────────── */
.hakenliste { list-style: none; display: grid; gap: .55em; }
.hakenliste--zwei { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); column-gap: 1.6em; margin-top: 1.8em; }
.hakenliste li { display: flex; align-items: flex-start; gap: .7em; font-size: .95rem; line-height: 1.5; }
.hakenliste .icon { color: var(--gelb-tief); margin-top: .32em; }
.abschnitt--dunkel .hakenliste .icon { color: var(--gelb); }

/* ── Zweispalter (Atelier) ─────────────────────────────────────── */
.zweispalter {
  display: grid; gap: clamp(30px, 5vw, 70px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
}
.zweispalter__bild { position: relative; }
/* Der Ausschnitt hält Hoch- und Querformate im gleichen Rahmen –
   sonst sprengt ein Hochformat die ganze Zeile. */
.zweispalter__bild picture {
  display: block; position: relative; z-index: 1;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--schatten-tief);
  background: var(--anthrazit-hell);
}
.zweispalter__bild img { width: 100%; height: 100%; object-fit: cover; }
.zweispalter__bild::after {
  content: ''; position: absolute; inset: auto -16px -16px auto;
  width: 130px; height: 130px; border: 3px solid var(--gelb); border-radius: var(--radius);
  z-index: 0;
}

/* ── Projektgalerie ────────────────────────────────────────────── */
.galerie {
  display: grid; gap: clamp(20px, 2.6vw, 32px);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.projekt {
  background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s var(--gang), box-shadow .3s var(--gang);
}
.projekt:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
.projekt__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--papier-warm); }
.projekt__bild picture, .projekt__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--gang);
}
.projekt:hover .projekt__bild img { transform: scale(1.04); }
.projekt__text { padding: clamp(20px, 2.4vw, 28px); }
.projekt__meta {
  font-family: var(--schrift-titel);
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-leise); margin: .4em 0 1em;
}
.projekt__text p { font-size: .95rem; }

/* ── Kontakt ───────────────────────────────────────────────────── */
.kontakt {
  display: grid; gap: clamp(34px, 5vw, 70px);
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  align-items: start;
}
.kontaktliste { list-style: none; display: grid; gap: 1.3em; margin-top: 2.2em; }
.kontaktliste li { display: flex; align-items: flex-start; gap: .9em; }
.kontaktliste .icon { color: var(--gelb); margin-top: .28em; }
.kontaktliste a { border-bottom: 1px solid rgba(255, 210, 55, .5); }
.kontaktliste a:hover { color: var(--gelb); }

/* ── Formular ──────────────────────────────────────────────────── */
.formular { display: grid; gap: 16px; }
.feld { display: grid; gap: .4em; }
.feld-paar { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.feld label, .zustimmung span {
  font-size: .88rem; letter-spacing: .02em; color: var(--text-invers-leise);
}
.abschnitt--hell .feld label { color: var(--text-leise); }
.pflicht { color: var(--gelb); }

.formular input[type="text"],
.formular input[type="email"],
.formular input[type="tel"],
.formular textarea {
  font-family: inherit; font-size: 1rem; font-weight: 300; color: var(--text-invers);
  background: rgba(246, 246, 246, .06);
  border: 1px solid rgba(246, 246, 246, .22);
  border-radius: var(--radius);
  padding: .8em 1em;
  width: 100%;
  transition: border-color .25s var(--gang), background .25s var(--gang);
}
.formular textarea { resize: vertical; min-height: 150px; }
.formular input:focus, .formular textarea:focus {
  outline: none; border-color: var(--gelb); background: rgba(246, 246, 246, .1);
}
.formular ::placeholder { color: rgba(246, 246, 246, .4); }

.zustimmung { display: flex; align-items: flex-start; gap: .8em; margin-top: .4em; }
.zustimmung input { margin-top: .35em; accent-color: var(--gelb); width: 1.05em; height: 1.05em; flex: none; }
.zustimmung a { border-bottom: 1px solid var(--gelb); }

.formular__hinweis { font-size: .82rem; color: var(--text-invers-leise); }
.formular .knopf { justify-self: start; margin-top: .4em; }

/* Honigtopf – für Menschen unsichtbar, für Maschinen verlockend */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung {
  border-radius: var(--radius);
  padding: 1em 1.2em; margin-bottom: 20px;
  border-left: 3px solid;
  font-size: .95rem;
}
.meldung--ok     { background: rgba(255, 210, 55, .14); border-color: var(--gelb); color: var(--text-invers); }
.meldung--fehler { background: rgba(214, 92, 60, .16);  border-color: #d65c3c;    color: var(--text-invers); }

/* ── Rechtstexte ───────────────────────────────────────────────── */
.rechtstext { padding-top: calc(var(--kopf-hoehe) + clamp(50px, 8vw, 96px)); }
.rechtstext h1 { margin-bottom: .5em; }
.rechtstext h2 { font-size: clamp(1.2rem, 1.06rem + .6vw, 1.5rem); margin: 2em 0 .6em; }
.rechtstext .knopf { margin-top: 2.6em; }

/* ── Fussbereich ───────────────────────────────────────────────── */
.fuss { background: var(--anthrazit-tief); color: var(--text-invers-leise); padding: clamp(50px, 7vw, 86px) 0 0; }
.fuss__raster {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 2fr);
  padding-bottom: clamp(36px, 5vw, 56px);
}
.fuss__marke img { height: 62px; width: auto; margin-bottom: 20px; }
.fuss__marke p { max-width: 42ch; font-size: .95rem; }
.fuss__spalte h2 {
  font-size: .85rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gelb); margin-bottom: 1.1em;
}
.fuss address { font-style: normal; font-size: .95rem; margin-bottom: 1em; }
.fuss strong { color: var(--text-invers); }
.fuss a:hover { color: var(--gelb); }
.fuss__nav { list-style: none; display: grid; gap: .5em; font-size: .95rem; }

.fuss__unten {
  border-top: 1px solid rgba(246, 246, 246, .12);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: .6em 2em; justify-content: space-between;
  font-size: .85rem;
}
.fuss__unten a { border-bottom: 1px solid rgba(246, 246, 246, .25); }
.fuss__credit { color: rgba(246, 246, 246, .45); }

/* ── Schnellkontakt und Nach-oben ──────────────────────────────── */
.schnellkontakt {
  position: fixed; right: 18px; bottom: 18px; z-index: 800;
  display: flex; flex-direction: column; gap: 10px;
}
.schnellkontakt a {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gelb); color: var(--anthrazit);
  box-shadow: var(--schatten);
  transition: transform .25s var(--gang), background .25s var(--gang);
}
.schnellkontakt a:hover { transform: translateY(-3px); background: var(--gelb-tief); }

.nach-oben {
  position: fixed; left: 18px; bottom: 18px; z-index: 800;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(246, 246, 246, .3);
  background: rgba(60, 60, 59, .85); color: var(--text-invers);
  display: grid; place-items: center; cursor: pointer;
  transition: background .25s var(--gang), transform .25s var(--gang);
}
.nach-oben[hidden] { display: none; }
.nach-oben:hover { background: var(--gelb); color: var(--anthrazit); transform: translateY(-3px); }

/* ── Bildschau für die Projekte ────────────────────────────────── */
.schau {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(30, 30, 29, .95);
  display: grid; place-items: center; gap: 16px;
  grid-template-areas: 'zurueck bild vor' '. text .';
  padding: clamp(16px, 4vw, 50px);
}
.schau[hidden] { display: none; }
.schau__bild { grid-area: bild; max-height: 78vh; }
.schau__bild img { max-height: 78vh; width: auto; object-fit: contain; }
.schau__text { grid-area: text; color: var(--text-invers-leise); text-align: center; font-size: .92rem; }
.schau button {
  background: none; border: 0; color: var(--text-invers); cursor: pointer;
  font-size: 2.4rem; line-height: 1; padding: .2em .5em;
  transition: color .2s var(--gang);
}
.schau button:hover { color: var(--gelb); }
.schau__schliessen { position: absolute; top: 10px; right: 14px; font-size: 2.8rem; }
.schau__blaettern--zurueck { grid-area: zurueck; }
.schau__blaettern--vor     { grid-area: vor; }

/* ── Kleinere Bildschirme ──────────────────────────────────────── */
@media (max-width: 960px) {
  .zweispalter, .kontakt { grid-template-columns: 1fr; }
  .zweispalter__bild::after { display: none; }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
  .fuss__marke { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  :root { --kopf-hoehe: 76px; }
  .nav { display: none; }
  .nav-knopf { display: flex; }
  .hero { align-items: flex-end; min-height: 88svh; }
  .hero__innen { padding-top: calc(var(--kopf-hoehe) + 60px); }
  .hero__runter { display: none; }
  .schau { grid-template-areas: 'bild bild bild' 'zurueck text vor'; }
}

@media (max-width: 560px) {
  .fuss__raster { grid-template-columns: 1fr; }
  .fuss__unten { justify-content: flex-start; }
  .schnellkontakt a { width: 44px; height: 44px; }
}

/* ── Druck ─────────────────────────────────────────────────────── */
@media print {
  .kopfzone, .mobile-nav, .schnellkontakt, .nach-oben, .hero__runter, .formular { display: none !important; }
  body, .abschnitt--dunkel, .fuss { background: #fff !important; color: #000 !important; }
}