/* ==========================================================================
   Bayaz Strafrecht – Stylesheet
   Reines CSS, keine externen Abhängigkeiten. Schrift lokal eingebunden.
   ========================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License, siehe fonts/OFL-*.txt) ----------
   Playfair Display: Überschriften, Startseite, Buttons, Logo
   Lato: Fließtexte, Navigation, Fußzeile */
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design-Tokens ---------- */
:root {
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Lato", "Helvetica Neue", Arial, sans-serif;

  --ink: #1d1b19;
  --ink-soft: #3a3632;
  --muted: #6b635b;
  --paper: #f4efe9;
  --paper-strong: #ebe4dc;
  --line: #d6ccc1;
  --light: #f6f2ec;
  --button: rgba(244, 239, 233, 0.94);

  --text-xs: clamp(0.78rem, 0.76rem + 0.12vw, 0.86rem);
  --text-sm: clamp(0.94rem, 0.9rem + 0.18vw, 1.02rem);
  --text-base: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  --text-md: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --text-lg: clamp(1.4rem, 1.25rem + 0.7vw, 1.8rem);
  --text-xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3.25rem);

  --track-wide: 0.14em;
  --track: 0.05em;

  --radius: 6px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 46rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  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;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1.1rem;
  font-size: var(--text-sm);
  letter-spacing: var(--track);
  color: var(--ink);
  background: var(--light);
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus {
  transform: none;
}

/* ==========================================================================
   Startseite
   ========================================================================== */
.home {
  position: relative;
  overflow-x: clip; /* Sicherung gegen horizontales Scrollen */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--light);
  background: #2b2723;
}

/* Vollflächiges Hintergrundfoto */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
/* weiche Unschärfe auf der Textseite (wie in der Vorlage) */
.backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 62%);
  mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 62%);
}
/* Abdunklung für ausreichenden Kontrast */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(18, 16, 14, 0.72) 0%, rgba(18, 16, 14, 0.35) 12%, rgba(18, 16, 14, 0) 26%),
    linear-gradient(90deg,
      rgba(18, 16, 14, 0.74) 0%,
      rgba(18, 16, 14, 0.62) 38%,
      rgba(18, 16, 14, 0.22) 60%,
      rgba(18, 16, 14, 0) 74%);
}

.home-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 8vh, 6rem) var(--gutter) clamp(2rem, 5vh, 3rem);
  padding-left: clamp(1.25rem, 16vw, 14rem);
}

.intro {
  width: 100%;
  max-width: 32rem;
  font-family: var(--font-serif);
  animation: rise 1.1s var(--ease) both;
}

.intro__title {
  margin: 0 0 clamp(2rem, 6vh, 3.75rem);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.intro__title span {
  display: block;
}
@media (min-width: 600px) {
  .intro__title span {
    white-space: nowrap;
  }
}

.intro__lead {
  margin: 0 0 clamp(1.5rem, 4vh, 2.25rem);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  max-width: 20.5em;
}

.intro__address {
  margin: clamp(1.5rem, 3.5vh, 2rem) 0 0;
  font-style: normal;
}
.intro__address a {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--text-md);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.intro__address a:hover .intro__address-text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.intro__address-sep {
  margin-inline: 0.15em;
  opacity: 0.7;
}
.intro__address img {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
}

/* Kontakt-Schaltflächen */
.contact-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-list a {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
  min-height: 4.25rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--button);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.contact-list a:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.55);
}
.contact-list a:focus-visible {
  outline: 2px solid var(--light);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.contact-list__icon {
  display: grid;
  place-items: center;
  align-self: stretch;
  margin-block: 0.85rem;
  border-right: 1px solid rgba(29, 27, 25, 0.45);
}
.contact-list__icon img {
  width: 1.75rem;
  height: 1.75rem;
}
.contact-list__label {
  padding: 0.75rem 1rem 0.75rem clamp(1.25rem, 3vw, 2.25rem);
  font-family: var(--font-serif);
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.1rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #141210;
}

/* Tooltips für die Kontakt-Buttons – nur bei Maus und breitem Fenster.
   Sie stehen rechts neben dem Button über dem Foto und verdecken keinen
   Inhalt. In schmaleren Fenstern entfallen sie, weil sie dort Inhalt
   verdecken würden (WCAG 1.4.13).
   Der Text steckt in data-tooltip; „/ ""“ blendet ihn für Screenreader aus,
   da die Information dort bereits im Linktext steht. */
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .contact-list a[data-tooltip] {
    position: relative;
  }
  .contact-list a[data-tooltip]::after,
  .contact-list a[data-tooltip]::before {
    position: absolute;
    top: 50%;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
  }
  .contact-list a[data-tooltip]::after {
    content: attr(data-tooltip);
    content: attr(data-tooltip) / "";
    /* Der transparente linke Rand überbrückt die Lücke zum Button: Die Maus
       kann auf den Tooltip wechseln, ohne dass er verschwindet. */
    left: 100%;
    border-left: 0.9rem solid transparent;
    background-clip: padding-box;
    transform: translate(-4px, -50%);
    padding: 0.5rem 0.85rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--light);
    background-color: var(--ink);
    border-radius: 4px;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
  }
  /* kleiner Pfeil */
  .contact-list a[data-tooltip]::before {
    content: "";
    left: calc(100% + 0.9rem - 5px);
    transform: translate(-4px, -50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--ink);
  }
  .contact-list a[data-tooltip]:hover::after,
  .contact-list a[data-tooltip]:hover::before,
  .contact-list a[data-tooltip]:focus-visible::after,
  .contact-list a[data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.15s;
  }
  .contact-list a[data-tooltip]:hover::after,
  .contact-list a[data-tooltip]:focus-visible::after {
    pointer-events: auto;
    transform: translate(0, -50%);
  }
  .contact-list a[data-tooltip]:hover::before,
  .contact-list a[data-tooltip]:focus-visible::before {
    transform: translate(0, -50%) rotate(45deg);
  }
}

/* Fußzeile Startseite */
.home-footer {
  position: relative;
  z-index: 1;
  padding: 1.25rem var(--gutter) 1.75rem;
  padding-left: clamp(1.25rem, 16vw, 14rem);
}

/* gemeinsame Fußzeilen-Navigation */
.legal-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.legal-nav a {
  display: inline-block;
  padding-block: 0.4rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.legal-nav a:hover,
.legal-nav a[aria-current="page"] {
  border-bottom-color: currentColor;
}
.legal-nav__copy {
  opacity: 0.85;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Smartphone / Hochformat: kompakter Inhalt am unteren Rand, damit alles
   auf einen Blick sichtbar ist. Das Foto bleibt exakt wie am Desktop
   angeordnet (gleicher Ausschnitt, keine Verschiebung, kein Zoom). */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1024px) {
  .backdrop::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 65%);
    mask-image: linear-gradient(180deg, transparent 40%, #000 65%);
  }
  .backdrop::after {
    background: linear-gradient(180deg,
      rgba(18, 16, 14, 0.08) 0%,
      rgba(18, 16, 14, 0.12) 30%,
      rgba(18, 16, 14, 0.6) 60%,
      rgba(18, 16, 14, 0.92) 100%);
  }

  /* Abdunklung wandert mit dem Textblock – unabhängig von der Displayhöhe */
  .intro {
    position: relative;
  }
  .intro::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -7rem;
    bottom: -100vh; /* reicht bis zur Fußzeile, Überstand schneidet .home-main ab */
    left: calc(-1 * var(--gutter));
    width: 100vw;
    background: linear-gradient(180deg,
      rgba(18, 16, 14, 0) 0,
      rgba(18, 16, 14, 0.78) 6rem,
      rgba(18, 16, 14, 0.88) 100%);
    pointer-events: none;
  }
  .home-main {
    overflow: clip;
  }

  /* zusätzliche Abdunklung, die beim Scrollen eingeblendet wird
     (nur auf sehr kleinen Displays, auf denen die Seite noch scrollt) */
  .home::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(18, 16, 14, 0.82);
    opacity: 0;
  }

  .home-main {
    align-items: flex-end;
    padding: 2rem var(--gutter) 0.5rem;
  }
  .intro__title {
    margin-bottom: 1.1rem;
  }
  .intro {
    max-width: 36rem;
  }
  .intro__lead {
    margin-bottom: 1rem;
  }
  .intro__address {
    margin-top: 1rem;
  }
  .intro__address a {
    font-size: clamp(1.02rem, 0.95rem + 0.5vw, 1.25rem);
    gap: 0.75rem;
  }
  .intro__title,
  .intro__lead,
  .intro__address {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  }
  .contact-list {
    gap: 0.5rem;
  }
  .contact-list a {
    min-height: clamp(3.5rem, 3rem + 1.6vw, 4.25rem);
  }
  .contact-list__icon {
    margin-block: 0.7rem;
  }
  .home-footer {
    padding: 0.5rem var(--gutter) 0.9rem;
    background: rgba(18, 16, 14, 0.88); /* nahtlos an die Abdunklung des Textblocks */
  }
  .legal-nav ul {
    gap: 0 1.1rem;
  }
}

/* Tablet hochkant: Inhalt größer und mittig im Bereich unter dem Türschild
   (das Schild endet bei ca. einem Drittel der Höhe) */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  .home-main {
    align-items: center;
    padding-top: 33svh;
    padding-bottom: 1rem;
  }
  .intro {
    max-width: 40rem;
  }
  .intro__title {
    margin-bottom: 1.75rem;
    font-size: clamp(2.4rem, 1rem + 4vw, 3.5rem);
  }
  .intro__lead {
    margin-bottom: 1.5rem;
  }
  .intro__address {
    margin-top: 1.5rem;
  }
  .contact-list {
    gap: 0.7rem;
  }
  .home-footer {
    padding-bottom: 1.25rem;
  }
}

/* Tablet quer und kleine Desktops: Textspalte nimmt mehr Breite ein,
   daher reicht die Abdunklung weiter nach rechts */
@media (min-width: 761px) and (max-width: 1280px) and (orientation: landscape) {
  .backdrop::after {
    background:
      linear-gradient(0deg, rgba(18, 16, 14, 0.72) 0%, rgba(18, 16, 14, 0.35) 12%, rgba(18, 16, 14, 0) 26%),
      linear-gradient(90deg,
        rgba(18, 16, 14, 0.74) 0%,
        rgba(18, 16, 14, 0.64) 48%,
        rgba(18, 16, 14, 0.34) 66%,
        rgba(18, 16, 14, 0.04) 80%);
  }
  .home-main,
  .home-footer {
    padding-left: 10vw;
  }
}

/* volle Abdunklung nach der Hälfte der Scrollstrecke */
@keyframes shade-in {
  0% {
    opacity: 0;
  }
  50%,
  100% {
    opacity: 1;
  }
}

@supports (animation-timeline: scroll()) {
  @media (max-width: 760px), (orientation: portrait) and (max-width: 1024px) {
    @media (prefers-reduced-motion: no-preference) {
      .home::after {
        animation: shade-in linear both;
        animation-timeline: scroll(root);
      }
    }
  }
}

/* Ohne Scroll-Animation (ältere Browser, reduzierte Bewegung): etwas dunklere Grundfläche */
@supports not (animation-timeline: scroll()) {
  @media (max-width: 760px), (orientation: portrait) and (max-width: 1024px) {
    .home::after {
      opacity: 0.35;
    }
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px),
       (prefers-reduced-motion: reduce) and (orientation: portrait) and (max-width: 1024px) {
  .home::after {
    opacity: 0.35;
  }
}

@media (max-width: 400px) {
  .contact-list a {
    grid-template-columns: 3.75rem 1fr;
  }
  .contact-list__label {
    letter-spacing: 0.1em;
    padding-left: 1rem;
  }
}

/* ==========================================================================
   Unterseiten (Impressum, Datenschutz)
   ========================================================================== */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.site-header {
  color: var(--light);
  background: var(--ink);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem var(--gutter);
}

.brand {
  font-family: var(--font-serif);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-decoration: none;
}
.brand__name {
  font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  margin-right: -0.16em;
}
.brand__sub {
  margin-top: 0.45rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  margin-right: -0.32em;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
}
.back-link:hover {
  border-bottom-color: currentColor;
}

.content {
  flex: 1;
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter) clamp(3.5rem, 8vw, 6rem);
}

/* Typografie für redaktionelle Inhalte */
.prose {
  color: var(--ink-soft);
  /* lange deutsche Wörter (z. B. „Verbraucherstreitbeilegung“) sauber trennen */
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: break-word;
}
.prose > * + * {
  margin-top: 1em;
}
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
}
.prose h1 {
  margin: 0;
  font-size: var(--text-2xl);
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.prose h1 + .prose__intro,
.prose .prose__intro {
  margin-top: 1.25rem;
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}
.prose h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-top: 1.75rem;
  background: var(--ink);
}
.prose h2 {
  margin-top: 3.25rem;
  padding-top: 2rem;
  font-size: var(--text-xl);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--line);
}
.prose h3 {
  margin-top: 2.25rem;
  font-size: var(--text-lg);
}
.prose h4 {
  margin-top: 1.75rem;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.prose h5,
.prose h6 {
  margin-top: 1.5rem;
  font-size: var(--text-base);
  font-weight: 600;
}
.prose h2 + *,
.prose h3 + *,
.prose h4 + *,
.prose h5 + *,
.prose h6 + * {
  margin-top: 0.6em;
}
.prose p,
.prose ul,
.prose ol,
.prose dl,
.prose address {
  margin-bottom: 0;
}
.prose address {
  font-style: normal;
}
.prose ul,
.prose ol {
  padding-left: 1.4em;
}
.prose li + li {
  margin-top: 0.35em;
}
.prose li::marker {
  color: var(--muted);
}
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--muted);
  overflow-wrap: anywhere;
  transition: text-decoration-color 0.2s var(--ease);
}
.prose a:hover {
  text-decoration-color: currentColor;
}
.prose strong {
  font-weight: 700;
  color: var(--ink);
}
.prose dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1.5rem;
}
.prose dt {
  font-weight: 700;
  color: var(--ink);
}
.prose dd {
  margin: 0;
}
.prose blockquote {
  margin-inline: 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  font-style: italic;
  border-left: 1px solid var(--ink);
}
.prose hr {
  margin-block: 2.5rem;
  border: 0;
  border-top: 1px solid var(--line);
}
.prose .note {
  padding: 1.25rem 1.5rem;
  font-size: var(--text-sm);
  background: var(--paper-strong);
  border-radius: var(--radius);
}
.prose .meta {
  margin-top: 3rem;
  font-size: var(--text-xs);
  color: var(--muted);
}

@media (max-width: 520px) {
  .prose dl {
    grid-template-columns: 1fr;
  }
  .prose dd + dt {
    margin-top: 0.6rem;
  }
}

.site-footer {
  color: var(--light);
  background: var(--ink);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.75rem var(--gutter);
}
.site-footer .sep {
  margin-inline: 0.35em;
  opacity: 0.6;
}
.site-footer address {
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  opacity: 0.9;
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Hoher Kontrast (Windows) ---------- */
@media (forced-colors: active) {
  .contact-list a {
    border: 1px solid ButtonText;
  }
  .backdrop {
    display: none;
  }
}

/* ---------- Druck ---------- */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .backdrop {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  .content {
    padding: 0;
    max-width: none;
  }
  .prose a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}

.contact-list abbr {
  text-decoration: none;
}

/* ==========================================================================
   Cookie-Einstellungen (Link-Optik für Buttons)
   ========================================================================== */
.legal-nav__button,
.prose__inline-button {
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.legal-nav__button {
  display: inline-block;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.legal-nav__button:hover {
  border-bottom-color: currentColor;
}
.prose__inline-button {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--muted);
}
.prose__inline-button:hover {
  text-decoration-color: currentColor;
}

/* ==========================================================================
   Cookie Consent (vanilla-cookieconsent) im Bayaz-Look
   ========================================================================== */
#cc-main {
  --cc-font-family: var(--font-sans);
  --cc-modal-border-radius: var(--radius);
  --cc-btn-border-radius: var(--radius);
  --cc-modal-margin: 1.25rem;
  --cc-bg: var(--paper);
  --cc-primary-color: var(--ink);
  --cc-secondary-color: var(--ink-soft);
  --cc-link-color: var(--ink);
  --cc-separator-border-color: var(--line);
  --cc-footer-bg: var(--paper-strong);
  --cc-footer-color: var(--ink-soft);
  --cc-footer-border-color: var(--line);
  --cc-btn-primary-bg: var(--ink);
  --cc-btn-primary-color: var(--light);
  --cc-btn-primary-border-color: var(--ink);
  --cc-btn-primary-hover-bg: #3a3632;
  --cc-btn-primary-hover-color: var(--light);
  --cc-btn-primary-hover-border-color: #3a3632;
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--ink);
  --cc-btn-secondary-border-color: var(--ink);
  --cc-btn-secondary-hover-bg: var(--paper-strong);
  --cc-btn-secondary-hover-color: var(--ink);
  --cc-btn-secondary-hover-border-color: var(--ink);
  --cc-toggle-on-bg: var(--ink);
  --cc-toggle-off-bg: #9a9086;
  --cc-toggle-readonly-bg: #c9bfb4;
  --cc-toggle-on-knob-bg: var(--paper);
  --cc-toggle-off-knob-bg: var(--paper);
  --cc-toggle-readonly-knob-bg: var(--paper);
  --cc-cookie-category-block-bg: var(--paper-strong);
  --cc-cookie-category-block-border: var(--line);
  --cc-cookie-category-block-hover-bg: #e3dbd1;
  --cc-cookie-category-block-hover-border: var(--line);
  --cc-overlay-bg: rgba(18, 16, 14, 0.6);
  font-variant-numeric: lining-nums;
}
#cc-main .cm,
#cc-main .pm {
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -24px rgba(18, 16, 14, 0.55);
}
#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title {
  font-family: var(--font-serif);
}
#cc-main .cm__title,
#cc-main .pm__title {
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
#cc-main .cm__desc,
#cc-main .pm__section-desc {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.55;
}
#cc-main .pm__section-title {
  font-size: 1rem;
  font-weight: 600;
}
#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#cc-main .pm__badge {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--light);
  background: var(--ink);
}
#cc-main .cm__footer a,
#cc-main .pm__section a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
#cc-main :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
#cc-main .pm__btn {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
#cc-main .cm__footer,
#cc-main .cm__link-group {
  font-size: 0.88rem;
}

/* ==========================================================================
   Smartphone: Foto steht oben fest (breiter Ausschnitt), der Inhalt scrollt
   mit großzügigen Abständen darüber. Beim Hochscrollen dunkelt das Foto ab.
   ========================================================================== */
@media (max-width: 760px) {
  .home {
    background: #1a1714;
  }
  .backdrop {
    bottom: auto;
    height: 52svh;
  }
  /* Ausschnitt weiter nach rechts: mehr Wand und Türschild */
  .backdrop img {
    object-position: 88% 50%;
  }
  .backdrop::before {
    display: none;
  }
  /* weicher Übergang vom Foto in den dunklen Hintergrund */
  .backdrop::after {
    background: linear-gradient(180deg,
      rgba(26, 23, 20, 0.05) 0%,
      rgba(26, 23, 20, 0) 40%,
      rgba(26, 23, 20, 0.75) 80%,
      #1a1714 100%);
  }
  /* Abdunklung des Fotos beim Scrollen */
  .home::after {
    bottom: auto;
    height: 52svh;
    background: rgba(26, 23, 20, 0.85); /* gleicher Ton wie der Seitenhintergrund – keine Kante */
  }
  .intro::before {
    display: none;
  }

  .home-main {
    align-items: flex-start;
    padding: 44svh var(--gutter) 2.5rem;
    overflow: visible;
  }
  .intro__title {
    margin-bottom: 1.75rem;
  }
  .intro__lead {
    margin-bottom: 2rem;
  }
  .intro__address {
    margin-top: 2rem;
  }
  .contact-list {
    gap: 0.85rem;
  }
  .contact-list a {
    min-height: 4rem;
  }
  .contact-list__icon {
    margin-block: 0.85rem;
  }
  .home-footer {
    padding: 2rem var(--gutter) 2.25rem;
    background: none;
    border-top: 1px solid rgba(244, 239, 233, 0.12);
  }
  /* Fußnavigation untereinander, Copyright mit etwas Abstand darunter */
  .legal-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .legal-nav a,
  .legal-nav__button {
    padding-block: 0.55rem; /* größere Tippfläche */
  }
  .legal-nav__copy {
    margin-top: 2rem;
  }
}

/* Abdunklung erreicht ihr Maximum nach rund einem Drittel Bildschirmhöhe Scrollweg */
@supports (animation-timeline: scroll()) {
  @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .home::after {
      animation: shade-in-phone linear both;
      animation-timeline: scroll(root);
      animation-range: 0 32svh;
    }
  }
}
@keyframes shade-in-phone {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}