/* ==========================================================================
   MARTINO — „Hier entsteht ein Onlineshop“ (server/bald.js)
   Vor der Eröffnung die einzige Seite des Shops. Im Design der Startseite:
   Preschls Foto über die ganze Fläche, die Schrift links unten auf einem
   Verlauf aus Schwarz (von links und von unten), der die Lesbarkeit trägt,
   nicht das Foto; Titel in Playfair, Logo wie im Kopf, Farben der Werkstatt
   (--w-… in css/build.css, hier ohne build.css, darum als Werte).
   Keine Bewegung: Die Seite antwortet auf nichts, also bewegt sich nichts.
   ========================================================================== */
:root {
  --b-ink: #0B0B0C;
  --b-cream: #ECE9E2;
  --b-rosso-text: #E5484D;
  --b-rand: clamp(22px, 5vw, 64px);
}

html, body { margin: 0; height: 100%; }
body {
  background: var(--b-ink);
  color: var(--b-cream);
  font-family: 'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.bald__flaeche {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;             /* sonst zieht die Fläche das Logo auf volle Breite */
  padding: var(--b-rand);
  overflow: hidden;
}

.bald__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}
/* Der Verlauf: von unten und von links ins Schwarz. Er liegt unter der
   Schrift, nicht als Schleier über dem ganzen Foto. */
.bald__flaeche::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(11, 11, 12, .94) 0%, rgba(11, 11, 12, .62) 30%, rgba(11, 11, 12, 0) 62%),
    linear-gradient(to right, rgba(11, 11, 12, .78) 0%, rgba(11, 11, 12, 0) 55%);
}

.bald__logo { display: block; height: 28px; width: auto; }
@media (min-width: 768px) { .bald__logo { height: 32px; } }

.bald__text { max-width: 60rem; }

.bald__titel {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(52px, 8.4vw, 132px);
  line-height: .98;
  letter-spacing: -.022em;
  max-width: 8.2em;
  text-wrap: balance;
}

.bald__recht {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 14px;
  font-weight: 500;
}
.bald__recht a {
  color: rgba(236, 233, 226, .78);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.bald__recht a:hover { color: var(--b-cream); border-bottom-color: var(--b-rosso-text); }
.bald__recht a:focus-visible {
  outline: 2px solid var(--b-cream);
  outline-offset: 4px;
  color: var(--b-cream);
}

@media (max-width: 600px) {
  .bald__foto { object-position: 38% 30%; }
  .bald__titel { font-size: clamp(40px, 12vw, 60px); }
}

@media (prefers-reduced-motion: reduce) {
  .bald__recht a { transition: none; }
}