/* =========================================================================
   MUSTER BRAIDS & BEAUTY — Frankfurt am Main
   Feuille de style unique. HTML + CSS pur, aucune dépendance, aucun build.

   SYSTÈME 2026 — ce qui a changé et pourquoi
   L'ivoire, le didone et les filets or lisaient « faire-part de mariage ».
   On repart sur un fond charbon profond : la peau, les tresses et les locs
   y ressortent comme dans une vitrine éclairée, et le contraste fait
   immédiatement contemporain.

   Les quatre décisions qui portent le style :
   1. FOND SOMBRE, SURFACES EMPILÉES. Le noir n'est jamais pur (#0C0B0D,
      légèrement chaud) et les cartes remontent par paliers de clarté.
   2. GRANDS RAYONS. 28 px sur les visuels, boutons en gélule. C'est le
      signe le plus immédiat d'une interface d'aujourd'hui.
   3. PROFONDEUR DOUCE. Des ombres très larges et très peu opaques, plus
      un liseré clair à 8 % : la lumière vient d'en haut, jamais un cadre.
   4. CUIVRE CHAUD comme unique accent (#E0A264), lisible en texte comme
      en aplat — 8,8:1 sur le fond.

   Sommaire
   01 Jetons · 02 Base · 03 Typographie · 04 Grille · 05 Accessibilité
   06 En-tête · 07 Boutons · 08 Ouverture · 09 Repères · 10 Plaques
   11 Bande & mosaïque · 12 Panneaux · 13 Prix · 14 Agrandissement :target
   15 Citations · 16 Formulaire · 17 Pages légales · 18 Pied de page
   19 Barre mobile & WhatsApp · 20 Mouvement réduit · 21 Impression
   ========================================================================= */


/* -------------------------------------------------------------------------
   01 · JETONS
   ------------------------------------------------------------------------- */

:root {
  /* Papiers — porcelaine très légèrement rosée, jamais un blanc froid */
  --grund:      #FAF6F9;
  --flaeche:    #FFFFFF;
  --flaeche-2:  #F5EDF4;
  --flaeche-3:  #EBDFEA;

  /* Encres — aubergine, pas noir */
  --text:       #2A1B2E;
  --text-2:     #6B5B70;   /* 5,9:1 sur --grund */
  --text-3:     #9A8CA0;   /* décoratif seulement, jamais porteur de sens */

  /* Accent baie — lisible en texte (6,7:1) comme en aplat (blanc : 7,2:1) */
  --akzent:     #8E3B62;
  --akzent-2:   #B85C86;
  --akzent-weich: rgba(142, 59, 98, 0.10);

  /* Prune, accent secondaire */
  --pflaume:    #7C4A6A;
  --pflaume-2:  #9B5C84;

  /* Lignes et lumière */
  --linie:      rgba(42, 27, 46, 0.14);
  --linie-fein: rgba(42, 27, 46, 0.08);
  --glanz:      rgba(255, 255, 255, 0.9);

  /* Anciens noms conservés : les styles en ligne du HTML s'y réfèrent */
  --elfenbein: var(--text);
  --espresso:  var(--grund);
  --gold:      var(--akzent);
  --rauch-tief: var(--text-2);

  /* Rayons — le marqueur le plus immédiat d'une interface actuelle */
  --radius:       28px;
  --radius-klein: 16px;
  --radius-mini:  10px;

  /* Profondeur — larges et douces, jamais un contour dur */
  --schatten:      0 1px 2px rgba(42,27,46,.06), 0 10px 30px rgba(42,27,46,.09);
  --schatten-hoch: 0 2px 8px rgba(42,27,46,.09), 0 24px 60px rgba(42,27,46,.16);

  /* Polices */
  --schrift-titel: "Instrument Serif", "Iowan Old Style", "Palatino Linotype",
                   Georgia, "Times New Roman", serif;
  --schrift-text:  "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
                   "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Échelle */
  --t-1: 0.78rem;
  --t-2: 0.9rem;
  --t-3: 1.02rem;
  --t-4: 1.15rem;
  --t-5: 1.6rem;
  --t-6: 2.4rem;
  --t-7: 3.2rem;
  --t-8: 4rem;
  --t-9:  clamp(2.75rem, 7.5vw, 5.5rem);
  --t-10: clamp(3rem, 10vw, 8.5rem);

  /* Rythme */
  --abstand: clamp(4.5rem, 9vw, 8rem);
  --rand:    clamp(1.25rem, 4.5vw, 4.5rem);
  --breite:  1500px;
  --kopf:    4.5rem;
  --fuge:    clamp(10px, 1.1vw, 16px);

  --schnell: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --ruhig:   320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --dauer:   320ms;
}


/* -------------------------------------------------------------------------
   02 · BASE
   ------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf) + 1.5rem);
  background: var(--grund);
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: var(--t-3);
  line-height: 1.62;
  letter-spacing: -0.005em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Halo cuivré très large en haut de page — la lumière de la vitrine.
   Fixe, sous le contenu, aucune incidence sur la mise en page. */
body::before {
  content: "";
  position: fixed;
  inset: -30vh 0 auto 0;
  height: 90vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 16% 26%, rgba(184, 92, 134, 0.10) 0%, transparent 70%),
    radial-gradient(52% 50% at 90% 6%, rgba(156, 116, 180, 0.12) 0%, transparent 72%);
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 0; }
::selection { background: var(--akzent); color: #FFFFFF; }


/* -------------------------------------------------------------------------
   03 · TYPOGRAPHIE
   Instrument Serif en affichage, Instrument Sans en texte. Le serif est
   fin et très ouvert : il monte haut sans devenir décoratif.
   ------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
h1 { font-size: var(--t-9); letter-spacing: -0.028em; }
h2 { font-size: clamp(2.1rem, 5vw, var(--t-7)); text-wrap: balance; }
h3 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); letter-spacing: -0.015em; text-wrap: balance; }
h4 { font-size: var(--t-5); }

h1 em, h2 em, .kursiv { font-style: italic; color: var(--akzent); }

p { margin: 0 0 1.1em; max-width: 60ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.vorspann {
  font-size: clamp(var(--t-4), 1.9vw, 1.375rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 38ch;
  letter-spacing: -0.01em;
}

/* Étiquette — en gélule, pas en filet. Une pastille se lit tout de suite
   comme un élément d'interface actuel ; un trait fin faisait « papeterie ». */
.etikett {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--schrift-text);
  font-weight: 500;
  font-size: var(--t-1);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--akzent);
  background: var(--akzent-weich);
  border: 1px solid rgba(224, 162, 100, 0.22);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  margin: 0 0 1.5rem;
}
.etikett::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--akzent);
  flex: none;
}
.etikett--gold { color: var(--akzent); }

.ziffer {
  display: block;
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 0.9;
  color: var(--akzent);
  margin-bottom: 0.6rem;
}

.klein { font-size: var(--t-2); color: var(--text-2); line-height: 1.65; }
.leise { color: var(--text-2); }
strong, b { font-weight: 600; color: var(--text); }

.erstabsatz::first-letter {
  float: left;
  font-family: var(--schrift-titel);
  font-size: 4em;
  line-height: 0.8;
  padding: 0.06em 0.14em 0 0;
  color: var(--akzent);
}


/* -------------------------------------------------------------------------
   04 · GRILLE
   ------------------------------------------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.hero > *, .buehne__unten > *, .versatz > *, .dreier > *, .zweier > *,
.mosaik > li, .streifen > li, .fuss__spalten > *, .formular > *,
.register > * { min-width: 0; }

.abschnitt { padding-block: var(--abstand); }
.abschnitt--eng { padding-block: calc(var(--abstand) * 0.5); }

/* Surface alternée : une strate plus claire, arrondie et détachée du bord */
.wechsel {
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius);
  margin-inline: var(--rand);
  max-width: calc(var(--breite) - 2 * var(--rand));
  margin-block: var(--abstand);
}
.wechsel > .huelle { padding-inline: clamp(1.25rem, 3vw, 3.5rem); }
@media (min-width: 1620px) { .wechsel { margin-inline: auto; } }

/* Registre : l'étiquette longe la marge et suit le défilement */
.register { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .register {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
  }
  .register__spalte .etikett { position: sticky; top: calc(var(--kopf) + 1.5rem); }
}

.versatz { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .versatz { grid-template-columns: 7fr 5fr; align-items: center; }
  .versatz--links { grid-template-columns: 5fr 7fr; }
}

.titel-block { max-width: 20ch; }
.titel-block--weit { max-width: 28ch; }
.filet-oben { border-top: 1px solid var(--linie); padding-top: 1.35rem; }

.dreier { display: grid; gap: var(--fuge); }
@media (min-width: 780px) { .dreier { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zweier { display: grid; gap: var(--fuge); }
@media (min-width: 780px) { .zweier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La note est devenue une CARTE — surface remontée, grand rayon, liseré
   de lumière en haut. C'est le composant qui date le plus vite : un filet
   nu faisait 2012, une carte à ombre dure faisait 2010. Celle-ci est
   plate, arrondie et éclairée par le haut. */
.notiz {
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius-klein);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  overflow: hidden;
  transition: background var(--ruhig), border-color var(--ruhig), transform var(--ruhig);
}
.notiz::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glanz) 30%, var(--glanz) 70%, transparent);
}
.notiz:hover { background: var(--flaeche-2); border-color: var(--linie); }
.notiz h3 { font-size: var(--t-5); margin-bottom: 0.5rem; }

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.liste li {
  padding: 1.25rem clamp(1rem, 2vw, 1.5rem);
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  transition: background var(--ruhig), border-color var(--ruhig);
}
.liste li:first-child { border-radius: var(--radius-klein) var(--radius-klein) 0 0; }
.liste li:last-child  { border-radius: 0 0 var(--radius-klein) var(--radius-klein); }
.liste li:only-child  { border-radius: var(--radius-klein); }
.liste li:hover { background: var(--flaeche-2); border-color: rgba(224,162,100,.28); }


/* -------------------------------------------------------------------------
   05 · ACCESSIBILITÉ
   ------------------------------------------------------------------------- */

.sprung {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 600;
  background: var(--akzent);
  color: #FFFFFF;
  padding: 0.9rem 1.4rem;
  border-radius: 0 0 var(--radius-mini) 0;
  font-size: var(--t-2);
  font-weight: 600;
  text-decoration: none;
}
.sprung:focus { left: 0; }

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

.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* -------------------------------------------------------------------------
   06 · EN-TÊTE — vitré, flottant
   ------------------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 249, 0.78);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--linie-fein);
}
.kopf__innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
  min-height: var(--kopf);
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 2.5rem);
}

.marke { text-decoration: none; display: flex; align-items: baseline; gap: 0.5rem; margin-right: auto; min-width: 0; }
.marke__wort {
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.marke__zusatz {
  font-size: var(--t-1);
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
@media (max-width: 560px) { .marke__zusatz { display: none; } }

.nav ul { list-style: none; display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; }
.nav a {
  display: block;
  text-decoration: none;
  font-size: var(--t-2);
  font-weight: 500;
  color: var(--text-2);
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: color var(--schnell), background var(--schnell);
}
.nav a:hover { color: var(--text); background: var(--flaeche-2); }
/* Page active : une gélule pleine, pas un soulignement */
.nav a[aria-current="page"] { color: var(--akzent); background: var(--akzent-weich); }

/* Le lien de fermeture et le bouton « Menü » n'existent que pour le panneau
   mobile.
   ATTENTION À LA SPÉCIFICITÉ : « .nav__schliessen » (0,1,0) perd contre
   « .nav a » (0,1,1) plus haut, et le lien restait visible sur grand
   écran. D'où le sélecteur descendant ci-dessous, qui passe à 0,2,0. */
.nav .nav__schliessen { display: none; }
.menu-knopf { display: none; }

@media (max-width: 899px) {
  .menu-knopf {
    display: inline-block;
    text-decoration: none;
    font-size: var(--t-2);
    font-weight: 500;
    padding: 0.6rem 1rem;
    border: 1px solid var(--linie);
    border-radius: 999px;
    transition: background var(--schnell);
  }
  .menu-knopf:hover { background: var(--flaeche-2); }

  /* Menu mobile en CSS pur (:target) — aucun JavaScript */
  .nav {
    position: fixed;
    inset: calc(var(--kopf) + 0.5rem) 0.75rem auto 0.75rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten-hoch);
    padding: 0.75rem;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition: opacity var(--ruhig), transform var(--ruhig);
  }
  .nav:target { visibility: visible; opacity: 1; transform: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav a { padding: 0.9rem 1rem; border-radius: var(--radius-mini); font-size: var(--t-3); }
  .nav .nav__schliessen {
    display: block;
    text-align: right;
    text-decoration: none;
    font-size: var(--t-2);
    color: var(--text-2);
    padding: 0.4rem 0.75rem 0.75rem;
  }
  /* « .knopf { display: inline-flex } » est déclaré plus bas, à
     spécificité égale : il l'emportait. On monte donc à 0,2,0. */
  .knopf.kopf__cta { display: none; }
}


/* -------------------------------------------------------------------------
   07 · BOUTONS — gélules
   ------------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: var(--t-2);
  letter-spacing: -0.005em;
  padding: 0.95rem 1.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--akzent);
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(142, 59, 98, 0.24);
  transition: transform var(--schnell), box-shadow var(--ruhig),
              background var(--ruhig);
}
.knopf:hover {
  background: #A44873;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(142, 59, 98, 0.32);
}
.knopf:active { transform: translateY(0); }
.knopf--klein { padding: 0.65rem 1.25rem; font-size: var(--t-1); }

.knopf--linie {
  background: transparent;
  color: var(--text);
  border-color: var(--linie);
  box-shadow: none;
}
.knopf--linie:hover { background: var(--flaeche-2); box-shadow: none; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  font-weight: 500;
  font-size: var(--t-2);
  color: var(--text);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--linie);
  transition: color var(--schnell), border-color var(--schnell), gap var(--schnell);
}
.textlink::after { content: "→"; transition: transform var(--schnell); }
.textlink:hover { color: var(--akzent); border-bottom-color: var(--akzent); }
.textlink:hover::after { transform: translateX(3px); }

.inline-link { color: var(--akzent); text-underline-offset: 0.22em; }
.inline-link:hover { color: var(--text); }


/* -------------------------------------------------------------------------
   08 · OUVERTURE
   ------------------------------------------------------------------------- */

.buehne { padding-top: clamp(2.5rem, 6vw, 5rem); }

.buehne__kopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.buehne__kopfzeile .etikett { margin: 0; }

.buehne__titel {
  font-size: var(--t-10);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 14ch;
  hyphens: manual;
}

.buehne__unten {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .buehne__unten { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); }
}
.buehne__spalte .vorspann { margin-bottom: 2rem; }
.buehne__aktion { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

.buehne__bild { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .buehne__bild { aspect-ratio: 16 / 11; } }

/* Ancien hero, conservé au cas où une page l'utiliserait */
.hero { display: grid; grid-template-columns: 1fr; }
.hero__text { padding: clamp(3rem,8vw,6rem) var(--rand); display: flex; flex-direction: column; justify-content: center; }
.hero__aktion { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 2rem; }
.hero__bild { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 41fr 59fr; align-items: center; }
  .hero__bild { aspect-ratio: 4 / 3; }
}


/* -------------------------------------------------------------------------
   09 · REPÈRES — rangée de gélules
   ------------------------------------------------------------------------- */

.merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.merkmale li {
  font-size: var(--t-2);
  font-weight: 500;
  color: var(--text-2);
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  transition: color var(--schnell), border-color var(--schnell);
}
.merkmale li:hover { color: var(--text); border-color: var(--linie); }


/* -------------------------------------------------------------------------
   10 · IMAGES
   Les emplacements d'images portent de VRAIES images (dossier bilder/).
   Ce sont des SVG légers — un dégradé et un champ de mèches — pensés pour
   être remplacés par des photographies aux mêmes noms de fichier, sans
   toucher au HTML ni au CSS.
   ------------------------------------------------------------------------- */

.bild { margin: 0; overflow: hidden; border-radius: var(--radius); }

/* Les emplacements d'images portent de VRAIES images (dossier bilder/).
   Ce jeu de règles leur donne le même cadre que les plaques : rayon,
   recadrage centré, aucune déformation. Remplacer un .svg par un .jpg
   au même nom ne demande aucune autre modification. */
.bild__medium {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.buehne__bild, .hero__bild, .karte {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.bild img { width: 100%; height: 100%; object-fit: cover; }
.bild--hoch { aspect-ratio: 4 / 5; }
.bild--quer { aspect-ratio: 3 / 2; }
.bild--breit { aspect-ratio: 16 / 9; }
.bild--quadrat { aspect-ratio: 1 / 1; }


/* -------------------------------------------------------------------------
   11 · BANDE & MOSAÏQUE
   ------------------------------------------------------------------------- */

.streifen {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(72vw, 320px);
  gap: var(--fuge);
  margin: 0;
  padding: 0.5rem var(--rand) 1.5rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--rand);
  scrollbar-width: thin;
  scrollbar-color: var(--flaeche-3) transparent;
}
.streifen > li { scroll-snap-align: start; }
.streifen::-webkit-scrollbar { height: 6px; }
.streifen::-webkit-scrollbar-track { background: var(--flaeche); border-radius: 999px; }
.streifen::-webkit-scrollbar-thumb { background: var(--flaeche-3); border-radius: 999px; }
@media (min-width: 1100px) { .streifen { grid-auto-columns: 24rem; } }
@media (min-width: 1620px) {
  .streifen {
    padding-left: calc((100% - var(--breite)) / 2 + var(--rand));
    scroll-padding-left: calc((100% - var(--breite)) / 2 + var(--rand));
  }
}
.streifen__hinweis {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem 2rem; flex-wrap: wrap; margin-top: 0.5rem;
}

.mosaik {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fuge);
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 700px)  { .mosaik { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mosaik { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kachel {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: var(--flaeche-2);
  text-decoration: none;
  color: var(--text);
  transition: transform var(--ruhig), box-shadow var(--ruhig);
}
.kachel:hover, .kachel:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--schatten-hoch);
}
.kachel__medium {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transform: scale(1);
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.kachel:hover .kachel__medium,
.kachel:focus-visible .kachel__medium { transform: scale(1.05); }

/* Légende en gélule vitrée, posée en bas — pas un bandeau plein */
.kachel__legende {
  position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
  z-index: 2;
  background: rgba(42, 27, 46, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #FFFFFF;
  font-size: var(--t-1);
  font-weight: 500;
  line-height: 1.3;
  padding: 0.6rem 1rem;
  transform: translateY(8px);
  opacity: 0;
  transition: transform var(--ruhig), opacity var(--ruhig);
}
.kachel:hover .kachel__legende,
.kachel:focus-visible .kachel__legende { transform: none; opacity: 1; }
@media (hover: none) { .kachel__legende { transform: none; opacity: 1; } }

.kachel--breit { grid-column: span 2; aspect-ratio: 8 / 5; }
@media (min-width: 700px) { .kachel--hoch { grid-row: span 2; aspect-ratio: auto; height: 100%; } }
@media (max-width: 699px) { .kachel--hoch { grid-row: auto; aspect-ratio: 4 / 5; } }
.streifen .kachel--breit, .streifen .kachel--hoch {
  grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; height: auto;
}

/* Filtres — gélules cliquables */
.filter {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  list-style: none;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
}
.filter a {
  display: inline-block;
  text-decoration: none;
  font-size: var(--t-2);
  font-weight: 500;
  color: var(--text-2);
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  border-radius: 999px;
  padding: 0.6rem 1.15rem;
  transition: color var(--schnell), background var(--schnell), border-color var(--schnell);
}
.filter a:hover { color: #FFFFFF; background: var(--akzent); border-color: var(--akzent); }


/* -------------------------------------------------------------------------
   12 · PANNEAUX
   Sur fond sombre, « .dunkel » ne peut plus être un contraste sombre :
   c'est devenu une strate remontée, arrondie, éclairée par le haut.
   ------------------------------------------------------------------------- */

.dunkel {
  position: relative;
  background: var(--flaeche-2);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius);
  margin-inline: var(--rand);
  max-width: calc(var(--breite) - 2 * var(--rand));
  margin-block: var(--abstand);
  overflow: hidden;
}
.dunkel::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glanz) 25%, var(--glanz) 75%, transparent);
}
.dunkel > .huelle { padding-inline: clamp(1.25rem, 3vw, 3.5rem); }
@media (min-width: 1620px) { .dunkel { margin-inline: auto; } }
.dunkel .notiz { background: #FFFFFF; }
.dunkel .notiz:hover { background: var(--flaeche); border-color: var(--linie); }

.dunkel--pflaume { background: linear-gradient(150deg, #F0E2F0, var(--flaeche-2)); }

.appell { text-align: center; }
.appell .etikett { display: inline-flex; }
.appell h2 { max-width: 16ch; margin-inline: auto; font-size: clamp(2.2rem, 5.5vw, 4rem); }
.appell p { margin-inline: auto; }
.appell .knopf { margin-top: 2rem; }


/* -------------------------------------------------------------------------
   13 · PRIX
   Prix et durées toujours affichés — jamais « sur demande ».
   ------------------------------------------------------------------------- */

.preise-huelle {
  width: 100%;
  overflow-x: auto;
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 2rem);
}
.preise { width: 100%; border-collapse: collapse; font-size: var(--t-3); }
.preise caption {
  text-align: left;
  font-size: var(--t-2);
  color: var(--text-2);
  padding-bottom: 1rem;
}
.preise th, .preise td {
  text-align: left;
  padding: 1.15rem 1rem 1.15rem 0;
  border-bottom: 1px solid var(--linie-fein);
  vertical-align: baseline;
}
.preise thead th {
  font-family: var(--schrift-text);
  font-weight: 500;
  font-size: var(--t-1);
  color: var(--text-2);
  border-bottom: 1px solid var(--linie);
  padding-bottom: 0.7rem;
}
.preise tbody th {
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  letter-spacing: -0.015em;
  color: var(--text);
}
.preise .dauer {
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  white-space: nowrap;
  font-size: var(--t-2);
}
.preise .preis {
  font-family: var(--schrift-titel);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  text-align: right;
  padding-right: 0;
  color: var(--akzent);
}
.preise thead th.preis { font-family: var(--schrift-text); font-size: var(--t-1); color: var(--text-2); }
.preise tbody tr { transition: background var(--schnell); }
.preise tbody tr:hover { background: var(--flaeche-2); }

@media (max-width: 560px) {
  .preise thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .preise tr { display: block; border-bottom: 1px solid var(--linie-fein); padding: 1.1rem 0; }
  .preise th, .preise td { display: block; border-bottom: 0; padding: 0; }
  .preise tbody th { margin-bottom: 0.3rem; }
  .preise .dauer::before { content: "Dauer · "; }
  .preise .preis { text-align: left; margin-top: 0.25rem; }
}


/* -------------------------------------------------------------------------
   14 · AGRANDISSEMENT :target — SANS JAVASCRIPT
   « visibility » ne s'interpole jamais : elle bascule à l'ouverture,
   elle est retardée à la fermeture. Sinon un panneau peut rester
   accroché à son état de départ si l'animation est interrompue.
   ------------------------------------------------------------------------- */

.lichtkasten {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(42, 27, 46, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--ruhig);
}
.lichtkasten:target { visibility: visible; opacity: 1; }
.lichtkasten__hintergrund { position: absolute; inset: 0; }

.lichtkasten__inhalt {
  position: relative;
  width: min(100%, 940px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lichtkasten__rahmen {
  height: min(66vh, 106vw);
  aspect-ratio: 4 / 5;
  width: auto;
  max-width: 100%;
  align-self: center;
  overflow: hidden;
  border-radius: var(--radius);
  margin: 0;
}
.lichtkasten__rahmen .platz { min-height: 0; }
.lichtkasten__rahmen .platz__hinweis { display: block; }
.lichtkasten__rahmen img { width: 100%; height: 100%; object-fit: contain; }

.lichtkasten__leiste {
  display: flex; flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
}
.lichtkasten__titel { font-size: var(--t-2); color: var(--text); margin: 0; max-width: none; }
.lichtkasten__nav { display: flex; gap: 0.4rem; }
.lichtkasten__nav a, .lichtkasten__schliessen {
  text-decoration: none;
  font-size: var(--t-1);
  font-weight: 500;
  color: var(--text-2);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  transition: color var(--schnell), background var(--schnell);
}
.lichtkasten__nav a:hover, .lichtkasten__schliessen:hover { color: #FFFFFF; background: var(--akzent); }
.lichtkasten__schliessen { color: var(--text); }

.einwilligung {
  font-size: var(--t-2);
  line-height: 1.65;
  color: var(--text-2);
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius-klein);
  padding: 1.25rem 1.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  max-width: 72ch;
}


/* -------------------------------------------------------------------------
   15 · CITATIONS
   ------------------------------------------------------------------------- */

.stimme {
  margin: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.stimme blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--schrift-titel);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.24;
  letter-spacing: -0.018em;
}
.stimme blockquote p { max-width: none; margin: 0; }
.stimme figcaption { font-size: var(--t-2); color: var(--text-2); }
@media (min-width: 780px) { .stimme--versetzt { margin-top: clamp(1.5rem, 4vw, 3rem); } }


/* -------------------------------------------------------------------------
   16 · FORMULAIRE & CONTACT
   ------------------------------------------------------------------------- */

.formular { display: grid; gap: 1.5rem; max-width: 44rem; }
@media (min-width: 700px) {
  .formular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feld--voll { grid-column: 1 / -1; }
}
.feld { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.feld > label { font-size: var(--t-2); font-weight: 500; color: var(--text-2); }
.feld .pflicht { color: var(--akzent); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
select, textarea {
  font-family: var(--schrift-text);
  font-size: var(--t-3);
  line-height: 1.5;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-mini);
  padding: 0.85rem 1rem;
  width: 100%;
  min-width: 0;
  transition: border-color var(--schnell), background var(--schnell);
}
select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
                    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: right 16px center, right 10px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
textarea { resize: vertical; min-height: 9rem; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:hover, select:hover, textarea:hover { border-color: rgba(255,255,255,.18); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-color: var(--akzent);
  background: var(--flaeche-2);
}

.zustimmung {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius-klein);
  padding: 1.15rem 1.25rem;
}
.zustimmung input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; flex: none;
  accent-color: var(--akzent);
}
.zustimmung label { font-size: var(--t-2); color: var(--text-2); line-height: 1.6; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset legend { padding: 0; font-size: var(--t-2); font-weight: 500; color: var(--text-2); margin-bottom: 0.6rem; }
.radios { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.radios span {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--t-2);
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
}
.radios input { accent-color: var(--akzent); width: 1rem; height: 1rem; }

.daten { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.daten li {
  background: var(--flaeche);
  border: 1px solid var(--linie-fein);
  padding: 1rem 1.25rem;
  display: grid; gap: 0.2rem;
}
.daten li:first-child { border-radius: var(--radius-klein) var(--radius-klein) 0 0; }
.daten li:last-child { border-radius: 0 0 var(--radius-klein) var(--radius-klein); }
.daten .titel { font-size: var(--t-1); font-weight: 500; color: var(--text-2); }

.zeiten { width: 100%; border-collapse: collapse; font-size: var(--t-2); max-width: 26rem; }
.zeiten th, .zeiten td { text-align: left; font-weight: 400; padding: 0.55rem 0; border-bottom: 1px solid var(--linie-fein); }
.zeiten td { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }

.karte { aspect-ratio: 16 / 9; }
@media (max-width: 600px) { .karte { aspect-ratio: 4 / 3; } }


/* -------------------------------------------------------------------------
   17 · PAGES LÉGALES
   ------------------------------------------------------------------------- */

.recht { max-width: 68ch; }
.recht h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-top: 2.5rem; }
.recht h3 { font-size: var(--t-5); margin-top: 1.8rem; }
.recht p, .recht li { font-size: var(--t-2); line-height: 1.75; max-width: none; color: var(--text-2); }
.recht strong { color: var(--text); }
.recht ul { padding-left: 1.15rem; }
.recht li { margin-bottom: 0.4rem; }
.recht address { font-style: normal; }

.ergaenzen {
  background: var(--akzent-weich);
  color: var(--akzent);
  border: 1px solid rgba(224, 162, 100, 0.25);
  border-radius: var(--radius-mini);
  padding: 0.1em 0.5em;
  font-size: 0.95em;
  font-weight: 500;
  overflow-wrap: break-word;
}


/* -------------------------------------------------------------------------
   18 · PIED DE PAGE
   ------------------------------------------------------------------------- */

.fuss {
  background: var(--flaeche-2);
  border-top: 1px solid var(--linie-fein);
  color: var(--text);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  margin-top: var(--abstand);
}
.fuss__spalten { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 800px) { .fuss__spalten { grid-template-columns: 1.4fr 1fr 1fr; } }

.fuss h2 {
  font-family: var(--schrift-titel);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  margin-bottom: 1rem;
  max-width: 14ch;
}
.fuss__titel { font-size: var(--t-1); font-weight: 600; color: var(--akzent); margin: 0 0 1rem; letter-spacing: 0.02em; }
.fuss a { text-decoration: none; transition: color var(--schnell); }
.fuss a:hover { color: var(--akzent); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { padding: 0.35rem 0; font-size: var(--t-2); color: var(--text-2); }
.fuss address { font-style: normal; font-size: var(--t-2); line-height: 1.9; color: var(--text-2); }

.fuss__unten {
  border-top: 1px solid var(--linie-fein);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  display: flex; flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: var(--t-2);
  color: var(--text-2);
}
.fuss__unten nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }


/* -------------------------------------------------------------------------
   19 · BARRE MOBILE & WHATSAPP
   Le bouton de rendez-vous reste atteignable depuis n'importe quel écran.
   Barre flottante, arrondie et détachée du bord — pas un bandeau collé.
   ------------------------------------------------------------------------- */

.leiste { display: none; }
@media (max-width: 899px) {
  .leiste {
    position: fixed;
    left: 0.75rem; right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 150;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid var(--linie);
    border-radius: 999px;
    padding: 0.4rem;
    box-shadow: var(--schatten-hoch);
  }
  .leiste a {
    text-decoration: none; text-align: center;
    padding: 0.8rem 0.75rem;
    font-size: var(--t-2);
    font-weight: 600;
    border-radius: 999px;
    color: var(--text);
  }
  .leiste a:first-child { background: var(--akzent); color: #FFFFFF; }
  body { padding-bottom: 5.5rem; }
}

.wa {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 140;
  display: none;
  text-decoration: none;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 0.8rem 1.35rem;
  font-size: var(--t-2);
  font-weight: 500;
  box-shadow: var(--schatten);
  transition: background var(--schnell), color var(--schnell), transform var(--schnell);
}
.wa:hover { background: var(--akzent); color: #FFFFFF; transform: translateY(-2px); }
@media (min-width: 900px) { .wa { display: inline-block; } }


/* -------------------------------------------------------------------------
   20 · MOUVEMENT RÉDUIT
   ------------------------------------------------------------------------- */

@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;
  }
  .kachel__legende { transform: none; opacity: 1; }
  .kachel:hover, .kachel:focus-visible { transform: none; }
  .kachel:hover .kachel__medium, .kachel:focus-visible .kachel__medium { transform: none; }
  .knopf:hover { transform: none; }
  .streifen { scroll-snap-type: none; }
}


/* -------------------------------------------------------------------------
   21 · IMPRESSION
   Ctrl+P sort la liste des prix proprement, sur fond blanc, sans images.
   ------------------------------------------------------------------------- */

@media print {
  @page { margin: 16mm; }
  html, body { background: #fff !important; color: #000 !important; padding-bottom: 0; }
  body::before { display: none; }

  .kopf, .leiste, .wa, .sprung, .fuss__unten nav,
  .mosaik, .streifen, .platz, .bild, .hero__bild, .buehne__bild, .karte,
  .lichtkasten, .filter, .knopf, .textlink, .menu-knopf {
    display: none !important;
  }

  .abschnitt, .abschnitt--eng { padding-block: 0.6cm; }
  h1 { font-size: 22pt; } h2 { font-size: 16pt; } h3 { font-size: 13pt; }
  h1, h2, h3, h4, strong, .recht strong { color: #000 !important; }
  p, li, .klein, .leise, .vorspann, .recht p, .recht li { max-width: none; color: #000 !important; }

  .dunkel, .wechsel, .fuss, .notiz, .liste li, .stimme,
  .preise-huelle, .einwilligung, .daten li, .zustimmung {
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-inline: 0 !important;
    max-width: none !important;
  }
  .etikett { border: 0; background: none; color: #000 !important; padding: 0; }
  .etikett::before { display: none; }
  .ziffer, .preise .preis { color: #000 !important; }

  .preise { font-size: 10.5pt; }
  .preise th, .preise td { padding: 0.18cm 0.4cm 0.18cm 0; border-bottom: 0.4pt solid #999; }
  .preise thead th { border-bottom: 1pt solid #000; }
  .preise tbody th, .preise .preis { font-size: 12pt; }
  .preise tr { break-inside: avoid; }
  .preise-huelle { overflow: visible; padding: 0; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; }
  .ergaenzen { background: none; border: 0; color: #000 !important; border-bottom: 0.5pt solid #000; }
}