/* ==========================================================================
   beautybar. · haare.parfum — Ingolstadt
   Stylesheet. Schriften lokal eingebunden, keine externen Anfragen.
   ========================================================================== */

/* --- Schriften (lokal, /fonts) ------------------------------------------ */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- Farbwelt & Tokens ---------------------------------------------------
   Die Palette ist aus den Salonfotos gezogen: warmes Bone, das Schwarz des
   Logos – dazu ein weiches Flieder als einziger Akzent. */

:root {
  --bone:       #f7f3ed;
  --bone-2:     #efe9e0;
  --bone-3:     #e4dccf;

  --ink:        #17140f;
  /* ink-3 trägt die Fußzeilen-Zeile in 0.85rem. Der frühere Wert #857b6e kam
     auf Bone nur auf 3.76:1 und verfehlte die AA-Schwelle für Kleintext. */
  --ink-2:      #524b42;
  --ink-3:      #6f665a;   /* 5.10:1 auf Bone, 5.64:1 auf Weiß */

  /* lilac trägt Kleintext (Kicker, Marken-Label, Links). Maßgeblich ist nicht
     der Kontrast auf der nackten Fläche, sondern auf dem hellsten Flieder-
     Bloom, der darunter liegen kann – der frühere Wert #7d6291 hielt 4.72:1
     auf Bone, fiel unter einem Bloom aber auf 4.14:1 und im Hero (Bloom plus
     ::before-Schein) auf 3.60:1. Dieser Ton ist bei gleichem Farbwinkel (274.5°)
     und gleicher Sättigung 4 % dunkler und hält auch im schlechtesten Fall AA:

         nackt         5.38:1 (Bone)  ·  5.95:1 (Weiß)
         Hero-Schein   4.59:1
         Parfum-Bloom  4.72:1

     Wer diesen Ton aufhellt, muss die Deckkraft der Blooms in index.html
     mit absenken. lilac-2 ist rein dekorativ (Zierlinien, Rauten),
     lilac-3 trägt Haarlinien und Flächen. */
  --lilac:      #735a85;
  --lilac-2:    #b49bc6;
  --lilac-3:    #e8dff0;

  --line:       #ded5c7;
  --line-lilac: #e0d3ea;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Times New Roman", serif;

  --wrap:  44rem;
  --wide:  70rem;
  --pad:   clamp(1.25rem, 4vw, 2.5rem);

  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset & Basis ------------------------------------------------------- */

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

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

/* Sanftes Scrollen nur, wenn das Betriebssystem keine reduzierte Bewegung
   verlangt. Ungeschützt löst der Sprung zum Seitenanfang bei empfindlichen
   Menschen Schwindel aus – alle übrigen Animationen sind bereits gestaffelt. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.13rem, 1.02rem + 0.42vw, 1.32rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* height:auto ist Pflicht: die width/height-Attribute im HTML wirken als
   Presentational Hints. Ohne diese Zeile erbt z. B. das Logo die 1704px
   aus dem Attribut und reißt eine leere Fläche auf. */
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--lilac-2);
  color: var(--ink);
}

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

/* Sprungmarke: unsichtbar, bis sie den Fokus bekommt. Wer mit der Tastatur
   navigiert, überspringt damit die Kopfzeile; für alle anderen ändert sich
   am Erscheinungsbild nichts. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -150%);
  padding: 0.7rem 1.4rem;
  background: var(--bone);
  border: 1px solid var(--lilac);
  border-bottom-color: var(--lilac);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lilac);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* --- Typografie ---------------------------------------------------------- */

h1, h2, h3 {
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.15rem);
}

h3 {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
}

p {
  max-width: 36em;
}

.kicker {
  font-family: var(--sans);
  font-size: clamp(0.62rem, 0.58rem + 0.16vw, 0.7rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--lilac);
  text-indent: 0.34em; /* gleicht die Spationierung des letzten Zeichens aus */
}

.lead {
  font-size: 1.1em;
  font-style: italic;
  color: var(--ink-2);
}

em {
  font-style: italic;
}

a {
  color: var(--lilac);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--lilac) 35%, transparent);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

a:hover,
a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--lilac);
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.wrap--wide {
  max-width: var(--wide);
}

section {
  padding-block: clamp(4.5rem, 11vw, 8.5rem);
}

.center {
  text-align: center;
}

.center p,
.center .lead {
  margin-inline: auto;
}

/* Zierlinie: Haarlinie · Messingraute · Haarlinie */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 1.7rem auto 2.6rem;
  max-width: 14rem;
}

.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--lilac-2));
}

.ornament::after {
  background: linear-gradient(to left, transparent, var(--lilac-2));
}

.ornament .gem {
  width: 5px;
  height: 5px;
  flex: none;
  transform: rotate(45deg);
  background: var(--lilac);
}

/* --- Bildbausteine ------------------------------------------------------- */

.media {
  overflow: hidden;
  background: var(--bone-2);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bildausschnitt pro Bild feinjustierbar via --object-pos */
  object-position: var(--object-pos, center);
}

/* Randlose Bildbahn über die volle Breite */
.band {
  height: clamp(19rem, 62vh, 40rem);
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 0.85rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Kopfzeile ------------------------------------------------------------ */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem var(--pad);
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(-101%);
  /* visibility nimmt die beiden Links aus der Tab-Reihenfolge, solange die
     Kopfzeile über der Kante steht. Ohne diese Zeile landen die ersten beiden
     Tab-Schritte auf unsichtbaren Zielen – der Fokusrahmen ist dann nirgends
     zu sehen. visibility ist animierbar und schaltet erst am Ende des
     Übergangs, das Einfahren bleibt deshalb weich. */
  visibility: hidden;
  transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
}

.site-header.is-visible {
  transform: none;
  visibility: visible;
  transition: transform 0.45s var(--ease), visibility 0s;
}

.site-header a {
  border-bottom: none;
}

.site-header__logo img {
  width: clamp(6.5rem, 15vw, 8.5rem);
  aspect-ratio: 4.3448;
}

.site-header__tel {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.site-header__tel:hover,
.site-header__tel:focus-visible {
  color: var(--lilac);
}

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

.hero {
  position: relative;
  max-width: 58rem; /* mehr Bühne als der Fließtext-Satzspiegel */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 6rem 7rem;
  overflow: hidden;
}

/* Weicher Lichtschein hinter dem Schriftzug – ersetzt nichts, trägt nur Tiefe */
.hero::before {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  width: min(130vw, 68rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    closest-side,
    rgba(180, 155, 198, 0.22),
    rgba(180, 155, 198, 0.07) 55%,
    transparent 72%
  );
  pointer-events: none;
}

/* Die Bloom-Ebene ist ausgenommen: sie liegt absolut hinter dem Inhalt
   und darf weder mitscrollen noch die Auftritts-Animation erben. */
.hero > *:not(.bloom-layer) {
  position: relative;
}

/* Die Wort-Bild-Marke ist zugleich die H1 der Seite –
   der Alt-Text des Bildes liefert die Überschrift. */
.hero__logo {
  width: min(84vw, 44rem);
  margin-block: 1.7rem 2.1rem;
}

.hero__logo img {
  width: 100%;
}

.hero__subtitle {
  max-width: 26em;
  margin-inline: auto;
  font-size: clamp(1.18rem, 1.05rem + 0.55vw, 1.45rem);
  font-style: italic;
  color: var(--ink-2);
}

/* --- Der Salon: Text und Bild im Wechsel ----------------------------------
   Der Abschnitt folgt unmittelbar auf den Hero. Der schließt bereits mit
   reichlich Luft ab – der Kopfabstand fällt hier deshalb deutlich kürzer aus
   als die übliche Sektionsluft, sonst klafft eine leere Bahn dazwischen. */

.salon {
  position: relative;
  padding-block-start: clamp(1.5rem, 4vw, 3rem);
}

.split {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--portrait {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.split__media {
  aspect-ratio: 3 / 2;
}

.split--portrait .split__media {
  aspect-ratio: 3 / 4;
}

.split__body p + p {
  margin-top: 1.15rem;
}

/* Leistungen – bewusst ohne Preise, als ruhige Aufzählung mit Haarlinien */
.services {
  list-style: none;
  max-width: 24rem;
}

.services li {
  padding: 0.85rem 0 0.85rem 1.6rem;
  position: relative;
  border-bottom: 1px solid var(--line);
  font-size: 1.08em;
  letter-spacing: 0.035em;
}

.services li:last-child {
  border-bottom: none;
}

.services li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.45em;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--lilac-2);
}

/* Partnermarke innerhalb einer Leistung: bleibt Fließtext, bekommt aber
   etwas mehr Laufweite – so liest sie sich als Name, nicht als Zusatz. */
.services__brand {
  letter-spacing: 0.11em;
}

/* --- Parfümerie: helle Bühne ----------------------------------------------
   Der Abschnitt setzt sich nicht mehr über eine dunkle Fläche ab, sondern
   über reines Weiß gegen das wärmere Bone ringsum. Nach oben grenzt ihn
   die randlose Bildbahn ab, nach unten eine auslaufende Flieder-Haarlinie
   mit Raute – das trennt leiser als ein Farbblock. */

.parfum {
  position: relative;
  background: #fff;
}

.parfum::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--lilac-2) 18%,
    var(--lilac-2) 82%,
    transparent
  );
  pointer-events: none;
}

/* Die Raute sitzt mittig auf der Trennlinie und nimmt das Motiv der
   Zierlinien auf. Bewusst ohne eigenen Hintergrund: ein weißes Kästchen
   liefe sonst in das Bone unterhalb der Kante hinein. */
.parfum__seam {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, 50%) rotate(45deg);
  background: var(--lilac-2);
  pointer-events: none;
}

/* Flieder-Bloom: weiche Lichtflecken im Hintergrund – im Hero, hinter dem
   Angebot und auf der weißen Parfümerie-Fläche. Größe, Lage, Deckkraft und
   Drift würfelt das Skript bei jedem Aufbau neu und lässt dabei jedes Bild
   aus; die Flecken halten zusätzlich Abstand voneinander, damit sie sich
   nicht zu hellen Nestern ballen. Die Bloom-Ebene liegt immer hinter dem
   Inhalt. Ohne JavaScript bleiben die Flächen schlicht. */

.bloom-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bloom {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(180, 155, 198, 0.3),
    rgba(180, 155, 198, 0.12) 52%,
    rgba(180, 155, 198, 0) 74%
  );
}

/* Sehr langsame Drift über eine halbe Minute. Weg, Ziel-Skalierung, Dauer und
   Startversatz liefert das Skript pro Fleck – der negative Delay setzt jeden
   an eine andere Stelle seiner Bahn, sonst atmet die Fläche im Gleichtakt. */
@media (prefers-reduced-motion: no-preference) {
  .bloom {
    animation: bloom-drift var(--bloom-time, 24s) ease-in-out
               var(--bloom-delay, 0s) infinite alternate;
  }

  @keyframes bloom-drift {
    to {
      transform: translate3d(var(--dx, 0), var(--dy, 0), 0)
                 scale(var(--bloom-scale, 1.08));
    }
  }
}

.parfum > .wrap,
.salon > .wrap {
  position: relative;
  z-index: 1;
}

.parfum__lead-media {
  margin: clamp(3rem, 7vw, 4.75rem) auto;
  aspect-ratio: 3 / 2;
}

@media (min-width: 52rem) {
  .parfum__lead-media {
    aspect-ratio: 16 / 9;
  }
}

/* --- Markenverzeichnis ----------------------------------------------------
   Reine Typografie – so ist die Liste sofort lieferfähig. Liegt später ein
   Markenlogo als Datei vor, genügt ein <img class="brand__logo"> in der
   Zeile; der Name rückt dann automatisch in die Bildbeschreibung. */

.brands {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: clamp(2.75rem, 6vw, 4rem);
}

.brand-group__label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lilac);
  text-indent: 0.3em;
  margin-bottom: 0.25rem;
}

.brand-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 40rem) {
  .brand-list { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 64rem) {
  .brand-list { grid-template-columns: repeat(4, 1fr); }
}

/* Die Trennlinien sitzen auf den Zellen. Geht eine Zeile nicht auf, entsteht
   ein angeschnittener Strich – deshalb bekommen Gruppen, deren Eintragszahl
   nicht zu jeder Spaltenzahl passt, hier ihre eigene Aufteilung.
   Stehen bewusst nach den Media Queries oben: gleiche Spezifität, spätere Regel. */
.brand-list--single {
  grid-template-columns: 1fr;
}

/* Vier Einträge: bei drei Spalten bliebe einer allein übrig */
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .brand-list--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  padding: 1.1rem 0.75rem;
  border-top: 1px solid var(--line-lilac);
  text-align: center;
}

.brand__name {
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.2rem);
  letter-spacing: 0.055em;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}

.brand:hover .brand__name {
  color: var(--lilac);
}

/* Markenlogo, sobald vorhanden: ersetzt den gesetzten Namen */
.brand__logo {
  width: auto;
  max-width: 100%;
  max-height: 2.5rem;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.3s var(--ease);
}

.brand:hover .brand__logo {
  opacity: 1;
}

.brand:has(.brand__logo) .brand__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Schlusszeile des Markenverzeichnisses. Sie sitzt als letzte Zelle unter der
   Tafel – gleiche Haarlinie, gleiche Mitte – und macht so ohne Zusatzkasten
   sichtbar, dass die Liste ein Auszug ist. */
.brands__more {
  max-width: none;
  padding-top: clamp(1.9rem, 4vw, 2.6rem);
  border-top: 1px solid var(--line-lilac);
  text-align: center;
}

.brands__more-lead {
  display: block;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.95rem);
  font-style: italic;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--lilac);
}

.brands__more-note {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.95em;
  color: var(--ink-2);
}

.parfum__note {
  margin: clamp(2.75rem, 6vw, 4rem) auto 0;
  text-align: center;
  font-style: italic;
}

/* --- Duft-Galerie ---------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 1.6vw, 1.1rem);
  margin-top: clamp(3rem, 7vw, 4.75rem);
}

@media (min-width: 52rem) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

.gallery .media {
  aspect-ratio: 3 / 2;
}

.gallery img {
  transition: transform 0.9s var(--ease);
}

@media (hover: hover) {
  .gallery .media:hover img {
    transform: scale(1.045);
  }
}

/* --- Öffnungszeiten & Kontakt ----------------------------------------------- */

.duo {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3rem);
  max-width: var(--wide);
  margin-inline: auto;
  padding: clamp(4.5rem, 11vw, 8.5rem) var(--pad);
}

@media (min-width: 60rem) {
  .duo {
    grid-template-columns: 1fr 1fr;
  }
}

.panel {
  padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22));
  text-align: center;
}

.hours {
  width: 100%;
  max-width: 24rem;
  margin: 2.4rem auto 0;
  border-collapse: collapse;
  font-size: 1.02em;
}

.hours th,
.hours td {
  padding: 0.55rem 0.25rem;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}

.hours tr:last-child th,
.hours tr:last-child td {
  border-bottom: none;
}

.hours th {
  text-align: left;
}

.hours td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.hours .closed td {
  font-style: italic;
  color: var(--lilac);
}

.contact address {
  font-style: normal;
  margin-top: 2.2rem;
  line-height: 2;
}

.contact .place {
  font-size: 1.12em;
}

.contact .tel,
.contact .mail {
  display: inline-block;
  margin-top: 1rem;
  font-size: 1.28em;
  letter-spacing: 0.05em;
}

/* Kleiner Nachsatz unter Tabelle oder Anschrift – in beiden Tafeln gleich */
.panel .note {
  margin: 1.5rem auto 0;
  font-style: italic;
  color: var(--ink-2);
  font-size: 0.95em;
}

/* --- Signatur ---------------------------------------------------------------- */

.signature {
  text-align: center;
}

.signature p {
  max-width: 31em;
  margin-inline: auto;
}

.signature__signoff {
  display: block;
  margin-top: 2rem;
  font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.4rem);
  font-style: italic;
  color: var(--lilac);
}

/* --- Fußzeile ------------------------------------------------------------------ */

/* Die Fußzeile bleibt im Bone der Seite und trennt sich – wie die Parfümerie –
   nur über eine auslaufende Flieder-Haarlinie ab. */
footer {
  position: relative;
  background: var(--bone);
  color: var(--ink-2);
  padding-block: clamp(3rem, 6vw, 4.25rem);
  text-align: center;
  font-size: 0.95rem;
}

footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--lilac-2) 18%,
    var(--lilac-2) 82%,
    transparent
  );
  pointer-events: none;
}

footer .footer__seam {
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--lilac-2);
  pointer-events: none;
}

/* Wortmarke ohne Claim: "haare.parfum" wäre auf dieser Größe nur noch ein Fleck */
.footer__logo {
  width: 10.5rem;
  aspect-ratio: 4.3448;
  margin: 0 auto 2rem;
}

.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
  padding-bottom: 0.2rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: none; /* Instagram-Handles werden kleingeschrieben */
  color: var(--ink-2);
  border-bottom-color: transparent;
}

.footer__social svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

.footer__social:hover,
.footer__social:focus-visible {
  color: var(--lilac);
  border-bottom-color: var(--lilac);
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1rem;
}

footer a {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom-color: transparent;
}

footer a:hover,
footer a:focus-visible {
  color: var(--lilac);
  border-bottom-color: var(--lilac);
}

.footer__note {
  max-width: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* --- Rechtsseiten (Impressum & Datenschutz) --------------------------------------- */

.legal-header {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 3.75rem) var(--pad) 0;
}

.legal-header a {
  display: inline-block;
  border-bottom: none;
}

.legal-header img {
  width: clamp(9rem, 26vw, 13rem);
  aspect-ratio: 4.1408;
}

main.legal {
  padding-block: clamp(2.5rem, 6vw, 3.5rem) clamp(4rem, 9vw, 6rem);
}

main.legal .wrap {
  max-width: 40rem;
}

main.legal h1 {
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.7rem);
  text-align: center;
  margin-bottom: 0.5rem;
}

main.legal .lead {
  text-align: center;
  margin-bottom: 0;
}

main.legal h2 {
  font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.5rem);
  font-weight: 600;
  margin-top: 2.6rem;
  margin-bottom: 0.55rem;
}

main.legal p,
main.legal ul {
  margin-bottom: 1rem;
  max-width: none;
}

main.legal ul {
  padding-left: 1.3rem;
}

main.legal li {
  margin-bottom: 0.35rem;
}

main.legal address {
  font-style: normal;
  line-height: 1.9;
  margin-bottom: 1rem;
}

/* Vom Betreiber auszufüllende Stellen */
.fill-in {
  background: var(--lilac-3);
  color: #5b4569;
  padding: 0.05em 0.32em;
  border-radius: 2px;
}

.back-link {
  display: inline-block;
  margin-top: 2.4rem;
}

/* --- Handyansicht -------------------------------------------------------------------
   Greift ausschließlich unterhalb von 48rem – die Web-/Desktop-Ansicht bleibt
   unberührt. Zwei Ziele: der Hero gibt Höhe ab, damit die erste Bildbahn schon
   anreißt statt komplett unter der Kante zu liegen; und die Bahnen zeigen mehr
   Bild statt eines schmalen Ausschnitts. */

@media (max-width: 47.99rem) {
  .hero {
    min-height: 76svh;
    padding-block: 4.5rem 2.75rem;
  }

  .hero__logo {
    margin-block: 1.35rem 1.55rem;
  }

  .hero .ornament {
    margin: 1.2rem auto 1.8rem;
  }

  /* Die Mailadresse ist deutlich länger als die Telefonnummer und stünde in
     deren Schriftgrad auf schmalen Displays über den Rand der Tafel hinaus. */
  .contact .mail {
    font-size: 1.02em;
    letter-spacing: 0.02em;
  }

  /* Beide Bahnen sind Querformate (3:2). Auf einem Hochformat-Display
     schneidet eine feste Höhe sie links und rechts stark an; über das
     Seitenverhältnis bleibt fast das ganze Bild stehen. */
  .band {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* --- Bewegung ---------------------------------------------------------------------
   Nur aktiv, wenn JavaScript läuft (html.js). Ohne Skript bleibt alles sichtbar. */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(1.35rem);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }

  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  .hero > *:not(.bloom-layer) {
    animation: rise 1.1s var(--ease) backwards;
  }

  .hero .kicker       { animation-delay: 0.1s; }
  .hero__logo         { animation-delay: 0.28s; }
  .hero .ornament     { animation-delay: 0.52s; }
  .hero__subtitle     { animation-delay: 0.66s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(1.1rem); }
  }
}

/* --- Druck ------------------------------------------------------------------------- */

@media print {
  /* Noch nicht eingeblendete Abschnitte müssen im Druck sichtbar sein –
     sonst druckt eine ungescrollte Seite leere Flächen. */
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .site-header,
  .gallery,
  .band,
  .split__media,
  .parfum__lead-media,
  .footer__logo,
  .parfum__seam,
  .footer__seam,
  .bloom-layer,
  .hero::before,
  .parfum::after,
  footer::before {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .parfum,
  footer {
    background: #fff;
    color: #000;
  }

  /* Der Flieder-Akzent verliert im Graustufendruck seinen Kontrast –
     auf Papier laufen die Akzenttexte deshalb in Schwarz. */
  .kicker,
  .brand-group__label,
  .brand__name,
  .signature__signoff,
  footer a,
  .footer__note {
    color: #000;
  }

  .brand {
    border-top-color: #ccc;
  }

  section,
  .duo {
    padding-block: 1.2rem;
    break-inside: avoid;
  }

  .hero {
    min-height: 0;
    padding-block: 0 1.5rem;
  }

  a {
    color: #000;
    border: none;
  }
}