/* ------------------------------------------------------------------
   loewert.com — Dachmarke

   Eigenes Stylesheet, mit Absicht getrennt von stil.css. Die Startseite
   ist das Haus, die Produktseiten sind die Zimmer: Jedes Produkt darf
   nach seiner Zielgruppe aussehen, das Haus bleibt davon unberührt.
   Solange sich beide eine Datei teilten, zog jede Änderung am Haus die
   Verkaufsseite mit.

   Nur ein Erscheinungsbild, dunkel und warm. Eine Hausmarke, die
   verschieden aussehende Produkte tragen soll, braucht einen Grund,
   der sich nicht mit der Tageszeit des Betrachters ändert — deshalb
   steht hier kein prefers-color-scheme.

   Palette:  Grund #0b0908 · Text #f7f3ee (18,1:1) · Neben #b8aa9c (8,4:1)
             Gold #e8ac4f (7,9:1) für Schrift · Glut #d9482a für Flächen
   Gold und Glut sind nicht austauschbar: Glut auf dem Grund kommt nur
   auf 3,7:1 und ist als Schrift zu schwach, Weiß auf Glut dagegen auf
   5,0:1 und damit für Knöpfe in Ordnung.
   ------------------------------------------------------------------ */

:root {
  --grund:        #0b0908;
  --grund-tief:   #070505;
  --erhoben:      #17130f;
  --kante:        #2c241e;
  --kante-hell:   #3d332a;

  --text:         #f7f3ee;
  --neben:        #b8aa9c;
  --leise:        #82746a;   /* nur für Beiwerk, nie für Fließtext */

  --gold:         #e8ac4f;
  --glut:         #d9482a;
  --glut-dunkel:  #b93a20;

  --sans: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --spalte: 78rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

.spalte {
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 60rem) { .spalte { padding-inline: 3rem; } }

a { color: inherit; }

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

.marke-klein {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise);
}

/* ==================================================================
   Kopf — die Wortmarke ist die Ligatur, kein Zeichen daneben
   ================================================================== */

.kopf {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 6;
  padding-block: 1.6rem;
}

.kopf .spalte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.wortmarke {
  text-decoration: none;
  font-weight: 300;
  font-size: 1.45rem;
  letter-spacing: -0.005em;
  line-height: 1;
  display: inline-block;
  color: var(--text);
}
.wortmarke svg { vertical-align: -0.03em; }

.navi {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  font-size: 0.9rem;
}
.navi a {
  text-decoration: none;
  color: var(--neben);
  transition: color .18s;
  display: inline-block;
  min-height: 44px;
  padding-block: 0.7rem;
}
.navi a:hover { color: var(--text); }
.navi .rahmen {
  border: 1px solid var(--kante-hell);
  padding: 0.55rem 1.4rem;
  color: var(--text);
  min-height: 44px;
  transition: border-color .18s, color .18s;
}
.navi .rahmen:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 52rem) {
  .navi a:not(.rahmen) { display: none; }
}

/* ==================================================================
   Bühne
   ================================================================== */

.buehne {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--grund-tief);
}

/* Ebene 1 — das Licht. Eine Lampe über einer Werkbank, kein Tageslicht. */
.licht {
  position: absolute;
  inset: -12%;
  z-index: 0;
  background:
    radial-gradient(26% 34% at 74% 12%, rgba(255,216,162,.34), transparent 66%),
    radial-gradient(56% 64% at 72% 20%, rgba(196,118,52,.18), transparent 72%),
    radial-gradient(110% 92% at 10% 100%, rgba(0,0,0,.94), transparent 56%),
    linear-gradient(180deg, #150f0b 0%, #0a0706 58%, #060404 100%);
  animation: schwelen 26s ease-in-out infinite alternate;
}
/* Eine Lampe an einem Kabel steht nie ganz still. Der Weg ist so klein,
   dass man ihn nicht sieht, sondern nur merkt. */
@keyframes schwelen {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-1.6%, 1.1%, 0) scale(1.045); }
}

/* Ebene 2 — der Gegenstand im Licht: die Ligatur, groß, und nur dort
   sichtbar, wo die Lampe hinreicht. Die Maske macht die Arbeit; ohne
   sie stünde ein Wasserzeichen im Dunkeln herum. */
.motiv {
  position: absolute;
  z-index: 1;
  top: 7%;
  right: 1%;
  width: min(46vw, 620px);
  color: var(--gold);
  opacity: .24;
  -webkit-mask-image: radial-gradient(74% 96% at 38% 16%, #000 0%, rgba(0,0,0,.45) 52%, transparent 84%);
  mask-image: radial-gradient(74% 96% at 38% 16%, #000 0%, rgba(0,0,0,.45) 52%, transparent 84%);
  animation: schwelen 26s ease-in-out infinite alternate;
}
.motiv svg { display: block; width: 100%; height: auto; }
/* Sobald das Feld malt, nimmt sich die gezeichnete Fassung zurück. Sie
   verschwindet nicht: Fällt die Leinwand irgendwo aus, steht das Zeichen
   noch da und die Bühne ist trotzdem vollständig. */
.motiv.zurueck { opacity: .1; transition: opacity 1.4s ease; }

/* Ebene 2b — das Feld. Kein Bild, sondern ein Programm; siehe feld.js. */
.feld {
  position: absolute;
  inset: 0;
  /* Pflicht bei <canvas>: inset streckt ein ersetztes Element nicht,
     ohne diese beiden Zeilen bleibt es auf seinen 300 x 150 stehen. */
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
  -webkit-mask-image: radial-gradient(60% 66% at 72% 24%, #000 0%, rgba(0,0,0,.55) 54%, transparent 88%);
  mask-image: radial-gradient(60% 66% at 72% 24%, #000 0%, rgba(0,0,0,.55) 54%, transparent 88%);
}
.feld.an { opacity: 1; }

/* Ebene 3 — Dunst und Korn vor allem anderen. */
.dunst {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,.75), transparent 60%),
    linear-gradient(90deg, rgba(6,4,4,.7) 0%, transparent 38%);
}
.dunst::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

.buehne-inhalt {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-block: 7.5rem 2.2rem;
}
/* Ohne diese Zeile schrumpft die Spalte als Flex-Kind auf ihren Inhalt
   und wandert durch margin-inline:auto in die Mitte. */
.buehne-inhalt > .spalte { width: 100%; }

.schlagzeile {
  font-size: clamp(2.3rem, 5.9vw, 4.5rem);
  font-weight: 250;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 1.6rem;
  max-width: 19ch;
  text-wrap: balance;
}
.schlagzeile em { font-style: normal; font-weight: 350; color: var(--gold); }

.anriss {
  color: var(--neben);
  font-size: 1.05rem;
  max-width: 46ch;
  margin: 0 0 2rem;
}

.strichlink {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--text);
  min-height: 44px;
}
.strichlink i {
  display: block;
  width: 3.5rem;
  height: 1px;
  background: var(--gold);
  transition: width .25s ease;
}
.strichlink:hover i { width: 5.5rem; }

/* Der Auftritt. Ein einziger geordneter Vorgang beim Laden, danach ist
   Ruhe. Verstreute Effekte wirken unruhig, eine Reihenfolge wirkt wie
   Absicht. */
.auftritt > * { animation: heben .75s cubic-bezier(.2,.7,.3,1) both; }
.auftritt > :nth-child(1) { animation-delay: .05s; }
.auftritt > :nth-child(2) { animation-delay: .17s; }
.auftritt > :nth-child(3) { animation-delay: .32s; }
.auftritt > :nth-child(4) { animation-delay: .44s; }
.streifen { animation: heben .8s cubic-bezier(.2,.7,.3,1) .56s both; }

@keyframes heben {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ==================================================================
   Kachelstreifen am Fuß der Bühne
   ================================================================== */

.streifen {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  border-top: 1px solid var(--kante);
  background: rgba(7, 5, 5, .62);
  backdrop-filter: blur(14px);
}
@media (max-width: 56rem) { .streifen { grid-template-columns: 1fr; } }

.kachel {
  display: block;
  text-decoration: none;
  padding: 1.4rem 1.5rem 1.5rem;
  border-left: 1px solid var(--kante);
  position: relative;
  transition: background .22s;
}
.kachel:first-child { border-left: 0; }
/* Der Lichtstrich oben zeigt, welche Kachel gemeint ist — dieselbe
   Aussage wie die Aufhellung, nur auch dann lesbar, wenn jemand Farben
   schlecht unterscheidet. */
.kachel::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.kachel.offen::before,
.kachel:hover::before,
.kachel:focus-visible::before { transform: scaleX(1); }
@media (max-width: 56rem) {
  .kachel { border-left: 0; border-top: 1px solid var(--kante); }
  .kachel:first-child { border-top: 0; }
}

.kachel .art {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise);
  display: block;
  margin-bottom: 0.7rem;
}
.kachel h3 { margin: 0; font-size: 1.05rem; font-weight: 450; letter-spacing: -0.01em; }
.kachel p { margin: 0.7rem 0 0; color: var(--neben); font-size: 0.92rem; max-width: 42ch; }
.kachel .fuss {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-top: 1.1rem;
  font-size: 0.9rem;
}
.kachel .fuss b { font-weight: 500; font-size: 1.15rem; }
.kachel .fuss em { font-style: normal; color: var(--leise); }
.kachel .fuss span { color: var(--gold); }

.kachel.offen { background: var(--erhoben); }
.kachel.hinweis { color: var(--neben); }
.kachel.hinweis:hover { background: none; }

/* ==================================================================
   Unter der Bühne
   ================================================================== */

.abschnitt { padding-block: clamp(4rem, 9vw, 8rem); }
.abschnitt + .abschnitt { border-top: 1px solid var(--kante); }

.ueberschrift {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 280;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 1.4rem;
  max-width: 20ch;
  text-wrap: balance;
}

.fliess { color: var(--neben); max-width: 56ch; margin: 0 0 1rem; }
.fliess strong { color: var(--text); font-weight: 450; }

/* Drei Belege nebeneinander, zwei bei mittlerer Breite, einer auf dem
   Telefon. auto-fit statt fester Spaltenzahl, damit ein vierter Beleg
   spaeter nichts umbaut. */
.grundsaetze {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: 2.5rem;
}

.grundsatz h3 {
  margin: 0 0 .6rem;
  font-size: 1.05rem;
  font-weight: 450;
  letter-spacing: -0.01em;
}
.grundsatz p { margin: 0; color: var(--neben); max-width: 44ch; }

/* Die Regel steht oben, das Beispiel darunter und leiser. Das Beispiel
   gehoert immer dem gerade aktuellen Produkt und wird ausgetauscht,
   sobald etwas erscheint, das kein Vordruck ist. */
.grundsatz .beispiel {
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--kante);
  color: var(--leise);
  font-size: .88rem;
}

/* Beim Scrollen einblenden — einmal, dann nie wieder. Ohne JavaScript
   bleibt alles sichtbar, deshalb hängt die Regel an .js. */
.js .enthuellen { opacity: 0; transform: translate3d(0, 22px, 0); }
.js .enthuellen.da {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}

/* ==================================================================
   Fuß
   ================================================================== */

.fussleiste {
  border-top: 1px solid var(--kante);
  background: var(--grund-tief);
  padding-block: 3.5rem 3rem;
}
.fussleiste .spalte { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.fussleiste p { margin: 0 0 .4rem; color: var(--neben); font-size: .92rem; }
.fussleiste a {
  color: var(--neben);
  display: inline-block;
  min-height: 44px;
  padding-block: 0.6rem;
  padding-inline-end: 0.5rem;
}
.fussleiste a:hover { color: var(--text); }

/* Wer Bewegung abgestellt hat, bekommt dieselbe Seite ohne jede. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .enthuellen { opacity: 1; transform: none; }
  .kachel::before { transform: scaleX(1); }
}