/* Starter »Hero-Video«. Nur logische Properties (inline/block), damit dir="rtl" ohne Umbau trägt. */

:root {
  /* Markenfarben: Werte aus BRAND.md (CSS-Block unter »Farben«) übernehmen. */
  --farbe-primaer: #14453D;
  --farbe-akzent: #E8B22A;
  --farbe-neutral-hell: #F3F1EA;
  --farbe-neutral-dunkel: #1F2320;

  /* Schriften: Familien aus BRAND.md davorsetzen und die Dateien lokal einbinden. */
  --schrift-titel: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052, ui-serif, Georgia, serif;
  --schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  --rand: clamp(1.25rem, 5vw, 4rem);
  /* Höhe des Logos im Kopf; die Breite folgt aus width/height am <img>. */
  --logo-hoehe: clamp(2.5rem, 6vw, 3.5rem);
  --breite: 76rem;
  /* Eine gemeinsame Textspalte: alle Bereiche beginnen an derselben Kante. */
  --spalte: max(var(--rand), calc((100% - var(--breite)) / 2));
  color-scheme: light;
}

/* Die Serifen oben haben keine arabischen oder hebräischen Glyphen. */
[dir="rtl"] {
  --schrift-titel: var(--schrift-text);
}

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

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--farbe-neutral-hell);
  color: var(--farbe-neutral-dunkel);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

a,
button {
  color: inherit;
}

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

.sprunglink {
  position: absolute;
  inset-inline-start: var(--rand);
  inset-block-start: -10rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--farbe-neutral-dunkel);
  color: var(--farbe-neutral-hell);
}

.sprunglink:focus-visible {
  inset-block-start: 1rem;
}

.medien-hinweis {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline: var(--rand);
  z-index: 20;
  padding: 0.75rem 1rem;
  background: var(--farbe-akzent);
  color: var(--farbe-neutral-dunkel);
  font-weight: 600;
}

.knopf {
  display: inline-block;
  padding: 0.85rem 1.4rem;
  background: var(--farbe-akzent);
  color: var(--farbe-neutral-dunkel);
  font-weight: 650;
  text-decoration: none;
  border-radius: 999px;
}

.knopf:hover {
  background: var(--farbe-neutral-hell);
}

/* Logo oben am Anfang des Kopfs. Der Kopf hält darüber Platz frei, damit ein langer Titel nie darunter rutscht. */
.logo {
  position: absolute;
  inset-block-start: var(--rand);
  inset-inline-start: var(--spalte);
  inline-size: auto;
  block-size: var(--logo-hoehe);
}

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

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem;
  min-block-size: 100vh;
  min-block-size: 100svh;
  padding-block: calc(var(--rand) * 2 + var(--logo-hoehe)) var(--rand);
  padding-inline: var(--spalte);
  color: var(--farbe-neutral-hell);
  background: var(--farbe-neutral-dunkel);
  isolation: isolate;
  overflow: hidden;
}

/* Über hellen Stellen im Video bleibt das Logo so erkennbar, dieselbe Absicht wie die Abdunklung unten. */
.hero .logo {
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.5));
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Abdunklung nur dort, wo Text über dem Video steht — für Kontrast, nicht als Schmuck. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.2) 55%, rgb(0 0 0 / 0) 80%);
}

.hero__inhalt {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  max-inline-size: 46rem;
}

.hero__titel {
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.hero__text {
  max-inline-size: 36ch;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.45;
}

.hero__pause {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
  color: var(--farbe-neutral-hell);
  cursor: pointer;
}

.hero__pause svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: currentColor;
}

.hero__pause[aria-pressed="false"] .symbol-play,
.hero__pause[aria-pressed="true"] .symbol-pause {
  display: none;
}

/* Inhalt ---------------------------------------------------------------- */

main > section {
  padding-block: clamp(4rem, 10vw, 8rem);
  padding-inline: var(--spalte);
}

main h2 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
}

.angebot {
  display: grid;
  gap: 2.5rem;
}

.angebot__kopf {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.angebot__kopf p {
  max-inline-size: 32ch;
  font-size: 1.25rem;
}

.angebot__liste {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.angebot__liste li {
  display: grid;
  gap: 0.5rem;
  padding-block: 1.75rem;
  border-block-start: 2px solid var(--farbe-primaer);
}

.angebot__liste h3 {
  font-size: 1.625rem;
  color: var(--farbe-primaer);
}

.angebot__liste p {
  max-inline-size: 60ch;
}

@media (min-width: 900px) {
  .angebot {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }
}

.ueber {
  display: grid;
  gap: 1.5rem;
}

.ueber__leitsatz {
  max-inline-size: 22ch;
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.15;
  color: var(--farbe-primaer);
}

.ueber__text {
  max-inline-size: 60ch;
}

.kontakt {
  display: grid;
  gap: 1.25rem;
  background: var(--farbe-primaer);
  color: var(--farbe-neutral-hell);
}

.kontakt h2 {
  font-size: clamp(3rem, 8vw, 6rem);
}

.kontakt p {
  max-inline-size: 60ch;
  font-size: 1.25rem;
}

.fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 2rem;
  padding-inline: var(--spalte);
  background: var(--farbe-neutral-dunkel);
  color: var(--farbe-neutral-hell);
  font-size: 0.9375rem;
}

/* Unterseiten aus _gemeinsam: Impressum, Datenschutz, 404 ---------------- */

.seitenkopf {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 1rem;
  padding-block: calc(var(--rand) * 2 + var(--logo-hoehe)) var(--rand);
  padding-inline: var(--spalte);
  background: var(--farbe-primaer);
  color: var(--farbe-neutral-hell);
}

main.seitenkopf {
  min-block-size: 80vh;
  min-block-size: 80svh;
}

.seitenkopf h1 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  hyphens: auto;
  overflow-wrap: anywhere;
}

.seitenkopf p {
  max-inline-size: 60ch;
  font-size: 1.25rem;
}

.rechtstext {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  padding-block: clamp(3rem, 8vw, 6rem);
  padding-inline: var(--spalte);
}

.rechtstext > * {
  max-inline-size: 70ch;
}

.rechtstext h2 {
  margin-block-start: 1.5rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.rechtstext h2:first-child {
  margin-block-start: 0;
}


/* --- Marke: Zeichen plus Wortmarke ------------------------------------- */
/* Die Wortmarke uebernimmt die Position, die der Starter dem Logo gegeben hat. */
.marke {
  position: absolute;
  inset-block-start: var(--rand);
  inset-inline-start: var(--spalte);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

/* Im Markenblock steht das Zeichen wieder im Fluss, sonst springt es nach oben links. */
.marke .logo {
  position: static;
  inset: auto;
}

/* Auf den Unterseiten gibt es keinen Hero: Die Marke laeuft dort im normalen Fluss mit. */
.rechtstext-kopf .marke,
body:not(:has(.hero)) .marke {
  position: static;
  inset: auto;
  margin-block-end: 1rem;
}

.wortmarke {
  font-family: var(--schrift-titel);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
}

/* --- Knopfzeile: Haupt- und Zweitknopf nebeneinander -------------------- */
.knopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

/* Zweitknopf: Umriss statt Flaeche, damit der Hauptknopf der Hauptknopf bleibt. */
.knopf--zweit {
  background: transparent;
  color: var(--farbe-neutral-hell);
  box-shadow: inset 0 0 0 2px currentColor;
}

.knopf--zweit:hover {
  background: var(--farbe-neutral-hell);
  color: var(--farbe-neutral-dunkel);
}

/* Auf hellen Flaechen braucht der Zweitknopf die dunkle Schrift. */
.kontakt .knopf--zweit,
.angebot .knopf--zweit {
  color: var(--farbe-neutral-dunkel);
}

/* --- Links: je nach Untergrund die kontraststarke Variante -------------- */
/* Heller Grund (Kalk): dunkles Ocker, die textsichere Variante des Akzents. */
main a {
  color: #8A6010;
}

/* Dunkler Grund (Waldgruen bzw. Graphit): Gold, dort ist Ocker unlesbar. */
.kontakt a:not(.knopf),
.fuss a:not(.knopf) {
  color: var(--farbe-akzent);
}


/* --- Startseite: Markenkachel ------------------------------------------- */
/* Das farbige Logo ist Waldgruen auf transparent und wuerde ueber den dunklen
   Stellen des Videos verschwinden, der weisse Schriftzug ueber den hellen.
   Die Kachel in Kalk traegt beides und bleibt bei jedem Videobild lesbar. */
.hero .marke {
  padding: 0.4rem 0.9rem 0.4rem 0.6rem;
  border-radius: 0.6rem;
  background: var(--farbe-neutral-hell);
}

.hero .marke .logo {
  filter: none;
}

.hero .marke .wortmarke {
  color: var(--farbe-primaer);
  text-shadow: none;
}