/* ==================================================================
   Blechhotel – Stylesheet
   Handgeschrieben, kein Build-Schritt, keine externen Verbindungen.
   Farben und Abstände stehen als Variablen ganz oben.
   ================================================================== */

:root {
  /* Farben */
  --nacht:       #17140D;
  --tiefblech:   #221D12;
  --porzellan:   #F6F0E0;
  --messing:     #C08B3E;
  --messinghell: #E3C38A;
  --stahl:       #8C8574;
  --scsblau:     #1F5FA9;
  --signalgruen: #3F9D6B;
  --signalrot:   #C4533F;

  /* Schriften – die WOFF2-Dateien in assets/fonts/ sind optional,
     ohne sie greift die Systemschrift und die Seite bleibt sauber. */
  --display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Maße */
  --breite: 78rem;
  --rand: 1.5rem;
  --radius: 1rem;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--porzellan);
  color: var(--nacht);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 1rem; z-index: 100;
  background: var(--nacht); color: var(--porzellan);
  padding: .9rem 1.5rem; border-radius: 999px; text-decoration: none;
  font-family: var(--display); font-weight: 600;
}
.skip-link:focus { left: 1rem; }

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding-inline: var(--rand);
}

/* ---------------- Typografie-Bausteine ---------------- */
.augenbraue {
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--messing);
}
.augenbraue--blau { color: var(--scsblau); }
.augenbraue--hell { color: var(--stahl); }

.titel-gross {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05;
}
.titel-mittel {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.08;
}
.blei { font-size: 1.1rem; line-height: 1.75; }

/* ---------------- Knöpfe ---------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.knopf--messing { background: var(--messing); color: var(--nacht); }
.knopf--messing:hover { background: var(--messinghell); }
.knopf--dunkel { background: var(--nacht); color: var(--porzellan); }
.knopf--dunkel:hover { background: var(--messing); color: var(--nacht); }
.knopf--hell { background: #fff; color: var(--scsblau); }
.knopf--hell:hover { background: var(--nacht); color: #fff; }
.knopf--rand { border-color: rgba(246,240,224,.35); color: var(--porzellan); }
.knopf--rand:hover { background: var(--porzellan); color: var(--nacht); }
.knopf--rand-dunkel { border-color: rgba(23,20,13,.25); color: var(--nacht); }
.knopf--rand-dunkel:hover { background: var(--nacht); color: var(--porzellan); }
.knopf--voll { width: 100%; }
.knopf[disabled] { opacity: .6; cursor: not-allowed; }

/* ---------------- Signature: Schlüsselanhänger ---------------- */
.keytag {
  position: relative;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .95rem .5rem 1.9rem;
  border: 1px solid rgba(192,139,62,.45);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(227,195,138,.16), rgba(192,139,62,.06));
  font-family: var(--display);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--messinghell);
}
.keytag::before {
  content: ""; position: absolute; left: .72rem; top: 50%;
  transform: translateY(-50%);
  width: .62rem; height: .62rem; border-radius: 999px;
  border: 2px solid var(--messing);
}
.keytag--scs {
  border-color: rgba(31,95,169,.55);
  background: linear-gradient(135deg, rgba(31,95,169,.22), rgba(31,95,169,.06));
  color: #fff;
}
.keytag--scs::before { border-color: var(--scsblau); }
.keytag--dunkel { color: var(--nacht); }

/* ---------------- Topbar ---------------- */
.topbar {
  background: var(--nacht);
  color: var(--stahl);
  font-family: var(--display);
  font-size: .69rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.topbar .huelle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .65rem;
}
.topbar a { color: var(--porzellan); text-decoration: none; }
.topbar a:hover { color: var(--messinghell); }
@media (max-width: 640px) { .topbar { display: none; } }

/* ---------------- Kopf / Navigation ---------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,240,224,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(23,20,13,.1);
  transition: box-shadow .3s ease;
}
.kopf--geschattet { box-shadow: 0 10px 30px rgba(23,20,13,.08); }

.kopf__reihe {
  display: flex; align-items: center; justify-content: space-between;
  height: 74px;
}
@media (min-width: 1024px) { .kopf__reihe { height: 86px; } }

.logo { display: flex; align-items: center; gap: .875rem; text-decoration: none; }
.logo__mark {
  width: 46px; height: 46px;
  flex-shrink: 0;
  object-fit: contain;
}
@media (min-width: 1024px) { .logo__mark { width: 52px; height: 52px; } }
.logo__name {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.35rem; line-height: 1; letter-spacing: -.02em;
}
.logo__zusatz {
  display: block; margin-top: .28rem;
  font-family: var(--display); font-size: .625rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--stahl);
  transition: color .25s ease;
}
.logo:hover .logo__zusatz { color: var(--scsblau); }

.nav { display: none; align-items: center; gap: 2.25rem; }
@media (min-width: 1024px) { .nav { display: flex; } }
.nav a {
  font-family: var(--display); font-size: .9rem; font-weight: 500;
  text-decoration: none; transition: color .2s ease;
}
.nav a:hover { color: var(--messing); }
.nav .knopf { padding: .8rem 1.5rem; font-size: .9rem; }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -.5rem;
  background: none; border: 0; border-radius: .5rem; cursor: pointer;
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger__box { position: relative; display: block; width: 24px; height: 14px; }
.burger__strich {
  position: absolute; left: 0; display: block;
  width: 24px; height: 2px; background: var(--nacht);
  transition: transform .3s ease, opacity .2s ease;
}
.burger__strich:nth-child(1) { top: 0; }
.burger__strich:nth-child(2) { top: 6px; }
.burger__strich:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__strich:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__strich:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__strich:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobilmenu {
  display: none;
  border-top: 1px solid rgba(23,20,13,.1);
  background: var(--porzellan);
}
.mobilmenu.ist-offen { display: block; }
@media (min-width: 1024px) { .mobilmenu.ist-offen { display: none; } }
.mobilmenu nav { display: flex; flex-direction: column; padding-block: 1.5rem; }
.mobilmenu a {
  padding-block: 1rem;
  font-family: var(--display); font-size: 1.15rem; font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(23,20,13,.1);
}
.mobilmenu .knopf { margin-top: 1.5rem; border-bottom: 0; }
.mobilmenu__extern {
  margin-top: 1rem; text-align: center; border-bottom: 0;
  font-size: .72rem !important; letter-spacing: .22em;
  text-transform: uppercase; color: var(--stahl);
}

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 86vh;
  overflow: hidden;
  background: linear-gradient(135deg, #17140D 0%, #2b2417 55%, #17140D 100%);
}
@media (min-width: 1024px) { .hero { min-height: 92vh; } }
.hero__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--nacht) 0%, rgba(23,20,13,.78) 45%, rgba(23,20,13,.35) 100%);
}
.hero__inhalt {
  position: relative; width: 100%;
  padding-top: 9rem; padding-bottom: 4rem;
  color: var(--porzellan);
}
@media (min-width: 1024px) {
  .hero__inhalt { padding-top: 12rem; padding-bottom: 6rem; }
}
.hero__text { max-width: 48rem; }
.hero h1 { margin-top: 2rem; }
.hero__unter {
  margin-top: 2rem; max-width: 42rem;
  font-size: 1.15rem; line-height: 1.7;
  color: rgba(246,240,224,.8);
}
.hero__unter strong { color: var(--messinghell); }
.hero__knoepfe { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 520px) {
  .hero__knoepfe { flex-direction: column; }
  .hero__knoepfe .knopf { width: 100%; }
}

.fakten { position: absolute; bottom: 0; left: 0; right: 0; }
@media (max-width: 860px) { .fakten { display: none; } }
.fakten ul {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--display); font-size: .69rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(246,240,224,.75);
}
.fakten li { padding: 1.25rem 1rem; }
.fakten li + li { border-left: 1px solid rgba(255,255,255,.1); }

/* ---------------- Abschnitte ---------------- */
.block { padding-block: 6rem; }
@media (min-width: 1024px) { .block { padding-block: 9rem; } }
.block--dunkel { background: var(--nacht); color: var(--porzellan); }
.block--knapp { padding-block: 6rem; }
@media (min-width: 1024px) { .block--knapp { padding-block: 8rem; } }

.raster-konzept { display: grid; gap: 3.5rem; align-items: start; }
@media (min-width: 1024px) {
  .raster-konzept { grid-template-columns: 5fr 7fr; gap: 5rem; }
}

.markenpaar { margin-top: 2.5rem; display: flex; align-items: center; gap: 1.25rem; }
.markenpaar__feld {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: .625rem;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
}
.markenpaar__feld--scs { background: var(--scsblau); color: #fff; }
.markenpaar__feld--bh { background: var(--nacht); color: var(--messinghell); }
.markenpaar__label {
  margin-top: .5rem; text-align: center;
  font-family: var(--display); font-size: .625rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--stahl);
}
.markenpaar__mal { font-size: 1.5rem; color: var(--stahl); }

.textlink {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 2.5rem; padding-bottom: .25rem;
  font-family: var(--display); font-size: .95rem; font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--messing);
  transition: color .25s ease;
}
.textlink:hover { color: var(--messing); }

.fliesstext { display: grid; gap: 1.5rem; font-size: 1.1rem; line-height: 1.75; color: rgba(23,20,13,.8); }
.fliesstext strong { color: var(--nacht); }

.teilung {
  margin-top: 3rem;
  display: grid; gap: 1px;
  background: rgba(23,20,13,.1);
  border-radius: .75rem; overflow: hidden;
}
@media (min-width: 600px) { .teilung { grid-template-columns: 1fr 1fr; } }
.teilung > div { background: var(--porzellan); padding: 2rem; }
.teilung ul { margin-top: 1.25rem; display: grid; gap: .75rem; font-size: .95rem; color: rgba(23,20,13,.75); }
.teilung li { display: flex; gap: .75rem; }
.strich-blau { color: var(--scsblau); }
.strich-messing { color: var(--messing); }

/* ---------------- Leistungen ---------------- */
.kacheln {
  margin-top: 4rem;
  display: grid; gap: 1.5rem;
}
@media (min-width: 860px) { .kacheln { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.kachel {
  background: var(--tiefblech);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s ease;
}
.kachel:hover { border-color: rgba(192,139,62,.4); }
.kachel--scs:hover { border-color: rgba(31,95,169,.5); }
.kachel__bild {
  aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(135deg, #17140D 0%, #2b2417 55%, #17140D 100%);
}
.kachel__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s ease;
}
.kachel:hover .kachel__bild img { transform: scale(1.04); }
.kachel__text { padding: 2rem; }
.kachel h3 { margin-top: 1.25rem; font-size: 1.5rem; }
.kachel__lead { margin-top: 1rem; font-size: .95rem; line-height: 1.7; color: rgba(246,240,224,.7); }
.kachel ul { margin-top: 1.5rem; display: grid; gap: .625rem; font-size: .88rem; color: rgba(246,240,224,.6); }
.kachel li { display: flex; gap: .75rem; }
.kachel__quelle {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--display); font-size: .625rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--stahl);
}

/* ---------------- Ablauf ---------------- */
.raster-ablauf { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .raster-ablauf { grid-template-columns: 4fr 8fr; } }
.schritte {
  display: grid; gap: 1px;
  background: rgba(23,20,13,.1);
  border-radius: .75rem; overflow: hidden;
}
@media (min-width: 600px) { .schritte { grid-template-columns: 1fr 1fr; } }
.schritte li { background: var(--porzellan); padding: 2rem; }
.schritte__nr { font-family: var(--display); font-weight: 700; font-size: .9rem; color: var(--messing); }
.schritte h3 { margin-top: .75rem; font-size: 1.25rem; font-weight: 600; }
.schritte p { margin-top: .75rem; font-size: .95rem; line-height: 1.7; color: rgba(23,20,13,.7); }

/* ---------------- Co-Branding-Band ---------------- */
.band { background: var(--scsblau); color: #fff; }
.band .huelle {
  display: flex; flex-direction: column; gap: 2rem;
  padding-block: 3.5rem;
}
@media (min-width: 860px) {
  .band .huelle { flex-direction: row; align-items: center; justify-content: space-between; }
}
.band__label { font-family: var(--display); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.band__name { margin-top: .75rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem,3vw,2.25rem); letter-spacing: -.02em; }
.band__text { margin-top: .75rem; max-width: 44rem; color: rgba(255,255,255,.8); line-height: 1.7; }
.band .knopf { flex-shrink: 0; }

/* ---------------- Kontakt ---------------- */
.raster-kontakt { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .raster-kontakt { grid-template-columns: 1fr 1fr; gap: 5rem; } }

.daten { margin-top: 3rem; display: grid; gap: 2rem; }
.daten dt { font-family: var(--display); font-size: .69rem; letter-spacing: .22em; text-transform: uppercase; color: var(--stahl); }
.daten dd { margin: .5rem 0 0; font-size: 1.15rem; line-height: 1.6; color: rgba(23,20,13,.85); }
.daten dd a { font-family: var(--display); font-weight: 600; text-decoration: none; }
.daten dd a:hover { color: var(--messing); }

.formularkarte {
  background: var(--nacht); color: var(--porzellan);
  border-radius: var(--radius);
  padding: 2rem;
}
@media (min-width: 1024px) { .formularkarte { padding: 2.75rem; } }

.formular { display: grid; gap: 1.5rem; }
.formular__paar { display: grid; gap: 1.5rem; }
@media (min-width: 560px) { .formular__paar { grid-template-columns: 1fr 1fr; } }

.feld-label {
  display: block; margin-bottom: .5rem;
  font-family: var(--display); font-size: .69rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--stahl);
}
.feld {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.25);
  padding: .75rem 0;
  color: var(--porzellan);
  font-family: var(--body); font-size: 1rem;
  transition: border-color .25s ease;
}
.feld::placeholder { color: rgba(255,255,255,.25); }
.feld:focus { outline: none; border-bottom-color: var(--messing); }
.feld:focus-visible { outline: 2px solid var(--messing); outline-offset: 4px; }
.feld[aria-invalid="true"] { border-bottom-color: var(--signalrot); }
select.feld { background: var(--nacht); }
textarea.feld { resize: vertical; min-height: 7rem; }

.feld-fehler { margin-top: .5rem; font-size: .78rem; color: var(--signalrot); }

.zustimmung { display: flex; align-items: flex-start; gap: .75rem; font-size: .9rem; line-height: 1.6; color: rgba(246,240,224,.65); }
.zustimmung input { margin-top: .3rem; width: 1rem; height: 1rem; accent-color: var(--messing); flex-shrink: 0; }
.zustimmung a { color: inherit; }
.zustimmung a:hover { color: var(--messinghell); }

.formular__hinweis { text-align: center; font-size: .78rem; color: rgba(246,240,224,.45); }

.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung {
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  border-radius: .75rem;
  font-size: .92rem; line-height: 1.6;
}
.meldung--ok { background: rgba(63,157,107,.15); color: #7fd3a6; }
.meldung--fehler { background: rgba(196,83,63,.15); color: #e8967f; }

/* ---------------- Fuß ---------------- */
.fuss { background: var(--nacht); color: var(--porzellan); padding-top: 5rem; padding-bottom: 2.5rem; }
.fuss__raster { display: grid; gap: 3rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) { .fuss__raster { grid-template-columns: 5fr 3fr 4fr; } }
.fuss__claim { margin-top: 1.5rem; max-width: 24rem; color: rgba(246,240,224,.6); line-height: 1.7; }
.fuss__spalte p:first-child {
  font-family: var(--display); font-size: .69rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--stahl);
}
.fuss__spalte ul { margin-top: 1.25rem; display: grid; gap: .75rem; color: rgba(246,240,224,.7); }
.fuss__spalte a { text-decoration: none; }
.fuss__spalte a:hover { color: var(--messinghell); }
.fuss__spalte li.gedimmt { color: rgba(246,240,224,.5); }

.rueckverweis {
  display: block; padding: 2rem;
  border: 1px solid rgba(31,95,169,.5);
  background: rgba(31,95,169,.1);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color .25s ease;
}
.rueckverweis:hover { background: rgba(31,95,169,.2); }
@media (min-width: 768px) {
  .rueckverweis { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
}
.rueckverweis__name { margin-top: .75rem; font-family: var(--display); font-weight: 700; font-size: 1.5rem; }
.rueckverweis__text { margin-top: .5rem; color: rgba(246,240,224,.65); }
.rueckverweis__pfeil {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.5rem; flex-shrink: 0;
  font-family: var(--display); font-weight: 600; color: var(--messinghell);
  transition: transform .25s ease;
}
@media (min-width: 768px) { .rueckverweis__pfeil { margin-top: 0; } }
.rueckverweis:hover .rueckverweis__pfeil { transform: translateX(4px); }

.fuss__leiste {
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  font-size: .88rem; color: rgba(246,240,224,.45);
}
@media (min-width: 640px) { .fuss__leiste { flex-direction: row; justify-content: space-between; } }
.fuss__leiste nav { display: flex; gap: 1.75rem; }
.fuss__leiste a { text-decoration: none; }
.fuss__leiste a:hover { color: var(--messinghell); }

/* ---------------- Rechtstexte ---------------- */
.rechtstext { max-width: 46rem; margin: 0 auto; padding-block: 5rem; }
.rechtstext h1 { margin-top: 1.25rem; font-size: clamp(2.2rem,5vw,3rem); }
.rechtstext h2 { margin-top: 2.75rem; margin-bottom: .85rem; font-size: 1.35rem; }
.rechtstext p, .rechtstext li { line-height: 1.75; color: rgba(23,20,13,.78); }
.rechtstext p + p { margin-top: 1rem; }
.rechtstext ul { list-style: disc; padding-left: 1.4rem; margin-top: .6rem; display: grid; gap: .35rem; }
.rechtstext a { color: var(--scsblau); }
.rechtstext__kasten {
  margin-top: 2.5rem; padding: 1.25rem;
  background: rgba(23,20,13,.05);
  border-radius: .75rem; font-size: .88rem;
}

.schmalseite { padding-block: 7rem; }
@media (min-width: 1024px) { .schmalseite { padding-block: 10rem; } }
.schmalseite__inhalt { max-width: 40rem; }
.schmalseite h1 { margin-top: 2rem; }
.schmalseite p { margin-top: 2rem; font-size: 1.15rem; line-height: 1.75; color: rgba(23,20,13,.7); }
.schmalseite__knoepfe { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------------- Bewegung ---------------- */
.zeigen { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.zeigen.ist-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zeigen { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------- Hilfsklassen ---------------- */
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.eng { max-width: 44rem; }


/* ---------------- Logo-Varianten ---------------- */
.logo--gross .logo__mark { width: 64px; height: 64px; }
.logo__wortmarke { width: 190px; height: auto; }

/* Wortmarke im Logo ist Teil der Grafik – der Textzug daneben
   bleibt für Screenreader und als Fallback erhalten. */
.marke-bild { display: block; width: 100%; max-width: 260px; height: auto; }