/* =====================================================================
   Ranya Barber Salon
   Farbwerte stammen vom Barberpole selbst, nicht von einer Flagge.
   Formensprache: rund. Die Kapsel ist das Leitmotiv, weil der Pole ein
   Zylinder ist. Keine scharfe Ecke auf der ganzen Seite.
   Vollstaendige Herleitung: ../../../DESIGN-DNA.md
   ===================================================================== */

@font-face {
  font-family: 'Alfa Slab One';
  src: url('../fonts/alfaslabone-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/worksans-latin.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  /* --- Farbe, Kontrast in Klammern --- */
  --porzellan:   #FAF7F2;   /* Grund, Emailleweiss */
  --porzellan-2: #F0EBE3;   /* zweite Flaeche */
  --tinte:       #0E1626;   /* Text (16,9:1 auf Porzellan) */
  --gedeckt:     #5A6472;   /* Nebentext (5,6:1) */
  --rot:         #BE1E2D;   /* Akzent auf hell (5,8:1) */
  --rot-hell:    #EC5560;   /* Akzent auf dunkel (4,95:1 auf Tiefblau) */
  --blau:        #123C7A;   /* zweiter Akzent auf hell (10,1:1) */
  --blau-tief:   #0B1B33;   /* dunkle Flaeche */
  --chrom:       #C3CBD6;   /* Metall auf dunkel (10,5:1) */
  --chrom-d:     #6E7A8A;   /* Metallkante auf hell (4,1:1) */

  /* --- Form: rund, weil der Pole rund ist --- */
  --r-pille: 999px;
  --r-karte: 26px;
  --r-klein: 14px;

  /* --- Bewegung: wuchtig, eine Kurve fuer alles --- */
  --e-wow:  cubic-bezier(.16, 1, .3, 1);
  --t-rein: .7s;
  --t-lang: 1.1s;
  --weg:    34px;

  --kopf-h: 64px;
  --wrap: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--porzellan);
  color: var(--tinte);
  font: 400 1rem/1.65 'Work Sans', system-ui, sans-serif;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, .wortmarke__name, .fuss__marke {
  font-family: 'Alfa Slab One', Georgia, serif;
  font-weight: 400; line-height: 1.06; text-wrap: balance; margin: 0;
}
h1 { font-size: clamp(2.4rem, 9.5vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 6.2vw, 2.6rem); }
h3 { font-size: clamp(1.02rem, 3.4vw, 1.24rem); line-height: 1.25; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--rot); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; border-radius: var(--r-klein); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.15rem; }
.tel-nr, .p-p, .z-t { font-variant-numeric: tabular-nums; }
section[id], h2 { scroll-margin-top: calc(var(--kopf-h) + 18px); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 80;
  background: var(--tinte); color: var(--porzellan);
  padding: .85rem 1.3rem; text-decoration: none;
}
.skip:focus { left: 0; }

/* =====================================================================
   LEITMOTIV: das gewickelte Streifenband
   Ein einziges Muster, ueberall wiederverwendet. Kachelgroesse 56 px,
   Animationsdistanz exakt 56 px, deshalb ist die Schleife nahtlos.
   ===================================================================== */
@keyframes streifen-quer { from { background-position: 0 0; } to { background-position: -56px 0; } }
@keyframes streifen-hoch { from { background-position: 0 0; } to { background-position: 0 -40px; } }

.band {
  height: 12px; border-radius: var(--r-pille); overflow: hidden;
  background-image: repeating-linear-gradient(
    115deg,
    var(--rot)  0 14px,
    #ffffff    14px 28px,
    var(--blau) 28px 42px,
    #ffffff    42px 56px);
  background-size: 56px 56px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinte) 14%, transparent);
}
.js .band { animation: streifen-quer 2.4s linear infinite; }

/* Trenner zwischen den Sektionen */
.trenner { display: flex; align-items: center; gap: .7rem; margin: 1.1rem 0 1.7rem; }
.trenner .band { flex: 0 0 132px; }
.trenner__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--chrom-d); flex: none; }

/* =====================================================================
   STREIFEN-WISCH als Sektionswechsel
   Sitzt an der Grenze vom dunklen Laden-Abschnitt zu den hellen Preisen.
   Die Spur ist dunkel wie der Abschnitt darueber, das Band wischt beim
   Scrollen von links darueber.
   Beschnitten wird per clip-path, NICHT per scaleX. Eine Skalierung
   wuerde das Streifenmuster mitstauchen und die Streifen stuenden fast
   senkrecht statt schraeg.
   ===================================================================== */
.wisch {
  position: relative; overflow: hidden;
  height: 34px; background: var(--blau-tief);
}
.wisch__fuell {
  position: absolute; inset: 0;
  height: 100%; border-radius: 0; flex: none;
  clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0);
}
@media (min-width: 900px) { .wisch { height: 46px; } }

/* =====================================================================
   FALLBLATT-UHRZEITEN
   Die Zeiten rollen gestaffelt in Position, wie eine alte Anzeigetafel.
   Die Rolle laeuft in einem eigenen Kind, damit sie nicht mit der
   Enthuellung der Liste um dieselbe transform streitet.
   ===================================================================== */
.blatt { display: inline-block; overflow: hidden; vertical-align: bottom; }
.blatt > span { display: block; transform-origin: top center; }
.js .fallblatt.r .blatt > span { opacity: 0; transform: translateY(-100%) rotateX(-88deg); }
.js .fallblatt.r.an .blatt > span {
  animation: fallblatt .62s var(--e-wow) both;
  animation-delay: calc(var(--i, 0) * .09s);
}
@keyframes fallblatt {
  0%   { transform: translateY(-100%) rotateX(-88deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* =====================================================================
   Scroll-Fortschritt als senkrechter Pole am Bildschirmrand
   ===================================================================== */
.fortschritt {
  position: fixed; left: 0; top: 0; bottom: 0; width: 6px; z-index: 60;
  background: color-mix(in srgb, var(--tinte) 8%, transparent);
  pointer-events: none;
}
.fortschritt__fuell {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transform-origin: top center; transform: scaleY(var(--fortschritt, 0));
  background-image: repeating-linear-gradient(
    160deg,
    var(--rot)  0 10px,
    #ffffff    10px 20px,
    var(--blau) 20px 30px,
    #ffffff    30px 40px);
  background-size: 40px 40px;
}
.js .fortschritt__fuell { animation: streifen-hoch 2.6s linear infinite; }
@media (max-width: 899px) { .fortschritt { width: 4px; } }

/* =====================================================================
   DER BARBERPOLE
   Oldschool-Wandmodell. Reines CSS, kein Bild, keine Bibliothek.

   Die nahtlose Drehung: die Streifen sind waagerechte Streifen mit der
   Periode 4 x --s, das ganze Feld ist geschert, dadurch werden sie
   diagonal. Geschoben wird um GENAU eine Periode. Weil eine senkrechte
   Verschiebung durch skewY hindurch eine senkrechte Verschiebung bleibt,
   trifft das Muster exakt wieder auf sich selbst. Keine Sprungstelle.
   ===================================================================== */
.pole {
  --pole-h: 330px;
  --pole-b: 84px;
  --s: 14px;                      /* Streifenbreite, Periode = 4 x --s = 56px */
  width: var(--pole-b);
  height: var(--pole-h);
  position: relative;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  filter: drop-shadow(0 18px 22px rgba(11, 27, 51, .28));
}

/* Wandhalterung hinter dem Ganzen */
.pole__halter {
  position: absolute; left: 50%; top: 12%; bottom: 12%;
  width: calc(var(--pole-b) * .30); margin-left: calc(var(--pole-b) * -.62);
  border-radius: var(--r-pille);
  background: linear-gradient(90deg, #2A3342 0%, #566173 42%, #1B2430 100%);
}
.pole__halter::before,
.pole__halter::after {
  content: ''; position: absolute; left: -38%; width: 176%; height: 12px;
  border-radius: var(--r-pille);
  background: linear-gradient(90deg, #232B38, #6B7686 45%, #1B2430);
}
.pole__halter::before { top: 8%; }
.pole__halter::after  { bottom: 8%; }

/* Haube oben und Fuss unten, gedrehtes Metall */
.pole__kappe {
  position: relative; z-index: 2;
  height: calc(var(--pole-b) * .46);
  border-radius: 46% 46% 30% 30% / 62% 62% 26% 26%;
  background:
    linear-gradient(90deg, #10161F 0%, #3C4655 22%, #8A94A3 40%,
                    #C9D1DC 50%, #7C8695 62%, #2B3340 82%, #0C1119 100%);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.45);
}
.pole__kappe::after {                     /* Zierring */
  content: ''; position: absolute; left: -6%; right: -6%; bottom: -6px; height: 12px;
  border-radius: var(--r-pille);
  background: linear-gradient(90deg, #0C1119, #99A3B2 48%, #10161F);
}
.pole__kappe--fuss { border-radius: 30% 30% 46% 46% / 26% 26% 62% 62%; }
.pole__kappe--fuss::after { top: -6px; bottom: auto; }

/* Spitze oben und unten, rund gehalten statt spitz */
.pole__spitze {
  position: absolute; left: 50%; width: calc(var(--pole-b) * .22);
  height: calc(var(--pole-b) * .22); margin-left: calc(var(--pole-b) * -.11);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: radial-gradient(circle at 34% 30%, #D5DCE6 0%, #6C7788 46%, #131A24 100%);
  z-index: 3;
}
.pole__spitze--oben  { top: calc(var(--pole-b) * -.16); }
.pole__spitze--unten { bottom: calc(var(--pole-b) * -.16); }

/* Der Glaszylinder */
.pole__glas {
  position: relative; z-index: 1; overflow: hidden;
  border-radius: calc(var(--pole-b) * .16) / calc(var(--pole-b) * .10);
  background: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(11,27,51,.35);
}
.pole__streifen {
  position: absolute; inset: -80% -60%;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--rot)  0 var(--s),
    #ffffff     var(--s)  calc(var(--s) * 2),
    var(--blau) calc(var(--s) * 2) calc(var(--s) * 3),
    #ffffff     calc(var(--s) * 3) calc(var(--s) * 4));
  transform: skewY(-24deg);
}
.js .pole__streifen { animation: pole-lauf 2.6s linear infinite; }

/* Der Lauf startet erst, wenn der Pole in der Halterung haengt.
   Bis dahin steht er still. Die Klasse laeuft setzt main.js. */
.js .pole-huelle:not(.laeuft) .pole__streifen { animation-play-state: paused; }
@keyframes pole-lauf {
  from { transform: skewY(-24deg) translateY(0); }
  to   { transform: skewY(-24deg) translateY(calc(var(--s) * -4)); }
}

/* Rundung des Zylinders: Abdunklung an beiden Raendern, ein Glanzlicht
   links der Mitte. Ohne diese Ebene sieht der Pole flach und billig aus. */
.pole__glas::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(6,10,18,.58) 0%,
      rgba(6,10,18,.16) 14%,
      rgba(255,255,255,.62) 30%,
      rgba(255,255,255,.10) 42%,
      rgba(6,10,18,.06) 60%,
      rgba(6,10,18,.30) 84%,
      rgba(6,10,18,.62) 100%);
}

/* Leuchten, damit er auf hellem wie dunklem Grund traegt */
.pole__schein {
  position: absolute; inset: -14% -46%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--rot) 26%, transparent) 0%,
    transparent 100%);
  z-index: 0; pointer-events: none;
}

@media (min-width: 900px) {
  .pole { --pole-h: 460px; --pole-b: 104px; }
}

/* ---------------- Kopfleiste ---------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--porzellan) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--chrom-d) 34%, transparent);
}
.kopf__in { min-height: var(--kopf-h); display: flex; align-items: center; gap: 1rem; }
.wortmarke {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--tinte);
  min-height: 44px; padding: .4rem 0; margin-right: auto;
}
.wortmarke__name { display: block; font-size: 1.2rem; line-height: 1; }
.wortmarke__zusatz {
  display: block; font-size: .64rem; text-transform: uppercase;
  letter-spacing: .17em; margin-right: -.17em;
  color: var(--gedeckt); margin-top: .2rem;
}
.knav { display: none; }
.kopf .kopf__tel { display: none; }
@media (min-width: 900px) {
  .knav { display: flex; gap: .15rem; }
  .knav a {
    display: flex; align-items: center; min-height: 44px; padding: 0 .8rem;
    color: var(--tinte); text-decoration: none; font-size: .92rem;
    border-radius: var(--r-pille);
    transition: color .2s var(--e-wow), background-color .2s var(--e-wow);
  }
  .knav a:hover { color: var(--rot); background: color-mix(in srgb, var(--rot) 9%, transparent); }
  .kopf .kopf__tel { display: inline-flex; }
}

/* ---------------- Knoepfe, Kapselform ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 54px; min-width: 44px; padding: .85rem 1.6rem;
  font: 600 1rem/1 'Work Sans', system-ui, sans-serif;
  text-decoration: none; border: 2px solid transparent;
  border-radius: var(--r-pille);
  transition: background-color .2s var(--e-wow), color .2s var(--e-wow),
              border-color .2s var(--e-wow), transform .18s var(--e-wow),
              box-shadow .2s var(--e-wow);
}
.btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn--voll {
  background: var(--rot); color: #ffffff;
  box-shadow: 0 5px 0 0 color-mix(in srgb, var(--rot) 52%, #000000);
}
.btn--voll:hover { background: color-mix(in srgb, var(--rot) 88%, #000000); }
.btn--voll:active { transform: translateY(4px); box-shadow: 0 1px 0 0 color-mix(in srgb, var(--rot) 52%, #000000); }
.btn--rand { color: var(--blau); border-color: var(--blau); }
.btn--rand:hover { background: var(--blau); color: #ffffff; }
.btn--rand:active { transform: translateY(2px); }
.btn--klein { min-height: 44px; padding: .5rem 1rem; font-size: .92rem; }
.tun { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Magnetischer Knopf, nur Zeigergeraete. Der Versatz kommt aus dem Skript. */
@media (hover: hover) and (pointer: fine) {
  .magnet { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); }
}

/* ---------------- Bilder: rund, Kreismaske statt gerader Kante ------- */
.bild { margin: 0; }
.bild__clip { display: block; overflow: hidden; border-radius: var(--r-karte); }
.bild img { width: 100%; }
.bild--kreis .bild__clip { border-radius: 50%; aspect-ratio: 1; }
.bild--kreis img { height: 100%; object-fit: cover; }
.bild--rahmen .bild__clip { box-shadow: 0 0 0 1px color-mix(in srgb, var(--chrom-d) 50%, transparent); }

/* ---------------- Hero ---------------- */
.hero { padding: 2.4rem 0 3rem; }
.hero__in { display: grid; gap: 2.6rem; }
/* Siegel, bewusst klein: der Pole ist der Blickfang, nicht das Logo */
.medaille { width: 74px; height: 74px; margin-bottom: 1.05rem; }
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .18em;
  margin-right: -.18em; color: var(--blau); margin-bottom: 1rem;
  background: color-mix(in srgb, var(--blau) 10%, transparent);
  padding: .48rem 1rem; border-radius: var(--r-pille);
}
.lead {
  font-size: clamp(1.02rem, 3.8vw, 1.18rem);
  max-width: 36ch; color: var(--gedeckt); text-wrap: pretty;
}
.hero .tun { margin: 1.8rem 0 1.1rem; }
.hero__adr { font-size: .92rem; color: var(--gedeckt); }
.hero__buehne { display: grid; gap: 1.6rem; justify-items: center; align-content: center; }

@media (min-width: 900px) {
  .hero { padding: 4rem 0 5rem; }
  .hero__in { grid-template-columns: 1fr minmax(0, 400px); gap: 3.2rem; align-items: center; }
  .medaille { width: 84px; height: 84px; }
}

/* ---------------- Abschnitte ---------------- */
.abs { padding: 3.2rem 0; }
.abs--hell { background: var(--porzellan-2); }
@media (min-width: 700px) { .abs { padding: 4.6rem 0; } }
.hint { color: var(--gedeckt); font-size: .93rem; text-wrap: pretty; }
.zwei { display: grid; gap: 2.4rem; }
@media (min-width: 900px) {
  .zwei { grid-template-columns: 1fr minmax(0, 420px); gap: 3rem; align-items: center; }
}

/* ---------------- Leistungen: Karten mit Kipp-Effekt ---------------- */
.leist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.leist li {
  background: var(--porzellan); border-radius: var(--r-karte);
  padding: 1.7rem 1.4rem 1.8rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chrom-d) 34%, transparent),
              0 14px 30px -22px color-mix(in srgb, var(--tinte) 60%, transparent);
}
.leist h3 { margin: .9rem 0 .45rem; }
.leist p { color: var(--gedeckt); font-size: .95rem; text-wrap: pretty; }
.ikon {
  width: 34px; height: 34px; fill: none; stroke: var(--rot);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .kipp { transition: transform .3s var(--e-wow), box-shadow .3s var(--e-wow); }
  .kipp:hover {
    transform: perspective(760px) rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg)) translateY(-5px);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rot) 40%, transparent),
                0 28px 46px -26px color-mix(in srgb, var(--tinte) 70%, transparent);
  }
}
@media (min-width: 620px) { .leist { grid-template-columns: 1fr 1fr; gap: 1.2rem; } }
@media (min-width: 960px) { .leist { grid-template-columns: repeat(4, 1fr); } }

/* ---------------- Der Laden: dunkle Flaeche, Fotos als Kreise ------- */
.laden { background: var(--blau-tief); color: var(--porzellan); padding: 3.2rem 0 3.6rem; }
.laden h2 { color: #ffffff; }
.laden .trenner__punkt { background: var(--chrom); }
.laden__kopf { display: grid; gap: 1rem; margin-bottom: 2.2rem; }
.laden__kopf p {
  color: color-mix(in srgb, var(--porzellan) 84%, transparent);
  max-width: 44ch; text-wrap: pretty;
}
.kreise { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
/* Die Layout-Regeln muessen auf dem Drift-Wrapper sitzen, denn ER ist das
   Rasterkind. Auf der Figur darin wirkt grid-column nicht. */
.kreise .gross { grid-column: 1 / -1; max-width: 62%; margin: 0 auto; }
@media (min-width: 700px) { .laden { padding: 4.6rem 0 5rem; } }
@media (min-width: 900px) {
  .laden__kopf { grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: end; }
  .kreise { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; align-items: center; }
  .kreise .gross { grid-column: auto; max-width: none; }
}

/* ---------------- Preise ---------------- */
.pblock { max-width: 44rem; }
.pk {
  display: inline-block; margin: 2.2rem 0 .7rem; color: #ffffff; background: var(--blau);
  font-size: clamp(1.05rem, 3.8vw, 1.3rem); padding: .42rem 1.25rem .52rem;
  border-radius: var(--r-pille);
}
.pk:first-of-type { margin-top: 1.4rem; }
.preise { list-style: none; margin: 0; padding: 0; }
/* Keine Fuehrungslinie zwischen Leistung und Preis.
   Die alte Punktlinie hing per align-self an der UNTERKANTE der Zeile.
   Sobald ein Name umbrach, rutschte sie auf die zweite Zeile, waehrend
   der Preis an der ersten klebte, und bei langen Namen blieb nur ein
   Stummel uebrig. Die Preisspalte ist rechtsbuendig und rot, sie braucht
   keine Fuehrung. align-items: baseline haelt den Preis auch bei
   mehrzeiligen Namen auf Hoehe der ERSTEN Zeile. */
.preise li {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: .68rem .8rem; gap: 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--gedeckt) 20%, transparent);
  border-radius: var(--r-pille);
  transition: background-color .18s var(--e-wow);
}
.preise li:hover { background: color-mix(in srgb, var(--rot) 7%, transparent); }
.p-n { flex: 1 1 auto; text-wrap: pretty; }
.p-p { flex: none; font-weight: 600; color: var(--rot); white-space: nowrap; }

/* ---------------- Oeffnungszeiten ---------------- */
.zeiten { list-style: none; margin: 0 0 1.3rem; padding: 0; max-width: 27rem; }
.zeiten li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .62rem 1rem; border-radius: var(--r-pille);
}
.zeiten li + li { margin-top: .18rem; }
.zeiten .heute { font-weight: 600; color: #ffffff; background: var(--rot); }

/* ---------------- Anfahrt und Karte ---------------- */
.adr { font-size: 1.05rem; line-height: 1.8; }
.karte { margin: 1.6rem 0 1.8rem; max-width: 520px; }
.karte__rahmen {
  position: relative; padding: 8px; background: var(--porzellan-2);
  border-radius: var(--r-karte);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chrom-d) 45%, transparent);
}
.karte__rahmen img { border-radius: calc(var(--r-karte) - 8px); }
.karte__pin {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  background: var(--rot); border: 3px solid #ffffff; border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot) 35%, transparent);
}
.js .karte__pin { animation: pin-puls 2.8s var(--e-wow) infinite; }
@keyframes pin-puls {
  0%, 68%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot) 35%, transparent); }
  34%           { box-shadow: 0 0 0 13px color-mix(in srgb, var(--rot) 0%, transparent); }
}
.karte figcaption { margin-top: .6rem; font-size: .82rem; color: var(--gedeckt); }

/* ---------------- Fusszeile ---------------- */
/* =====================================================================
   FUSSZEILE
   Streifenkante als Abschluss, die Medaille sitzt als Siegel darauf,
   halb im Porzellan, halb im Tiefblau. Damit verschwindet die harte
   Naht zwischen hell und dunkel und das Logo hat einen Platz, der
   begruendet ist statt dekorativ.
   Der helle Streifen gehoert zur Fusszeile, nicht zum Abschnitt
   darueber. Sonst saesse das Siegel auf fremdem Inhalt.
   ===================================================================== */
.fuss {
  background: var(--blau-tief);
  color: color-mix(in srgb, var(--porzellan) 88%, transparent);
  font-size: .95rem;
  padding: 0 0 2.6rem;
}

.fuss__kante {
  position: relative;
  height: 66px;                      /* haelfte des Siegels plus Luft */
  background: var(--porzellan);
}
.abs--hell + .fuss .fuss__kante { background: var(--porzellan-2); }
.fuss__kante .band {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 12px; border-radius: 0; flex: none;
}
.fuss__siegel {
  position: absolute; left: 50%; bottom: 0;
  width: 104px; height: 104px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  /* Ring in Chrom, damit das Siegel gegen beide Untergruende steht */
  box-shadow: 0 0 0 3px var(--chrom-d), 0 10px 22px rgba(0, 0, 0, .38);
}

.fuss__in {
  display: grid; gap: 2rem;
  padding-top: 4.2rem;               /* unter dem Siegel durch */
}
.fuss__marke { font-size: 1.3rem; color: #ffffff; margin-bottom: .5rem; }
.fuss__claim { color: var(--chrom); margin-bottom: .3rem; }
.fuss__klein { color: var(--chrom-d); font-size: .88rem; }
.fuss__label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .17em;
  margin-right: -.17em;              /* Restluft hinter dem letzten Buchstaben */
  color: var(--chrom-d); margin-bottom: .5rem;
}
/* E-Mail bewusst NICHT rot: zwei rote Unterstreichungen uebereinander
   sahen aus wie unformatiertes HTML.
   Unterstreichung per text-decoration, NICHT per border-bottom. Der Link
   ist 44 px hoch, ein Rahmen saesse dann am Boden dieser Flaeche und
   wirkte wie ein Trennstrich statt wie eine Unterstreichung. */
.fuss__mail {
  color: var(--chrom);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--chrom) 45%, transparent);
  text-underline-offset: 4px;
}
.fuss__mail:hover { color: #ffffff; text-decoration-color: currentColor; }

/* Umrissknopf auf dunklem Grund: --blau erreicht auf --blau-tief nur
   1,6:1 und ist dort unlesbar. Auf der Fusszeile traegt Chrom. */
.fuss .btn--rand { color: var(--chrom); border-color: var(--chrom-d); }
.fuss .btn--rand:hover { background: var(--chrom); color: var(--blau-tief); }

.fuss__tun { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.fuss__tun .btn { width: 100%; max-width: 340px; }
.fuss__nav { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: .5rem; }
.fuss__nav a { color: var(--rot-hell); }
.fuss__in a { min-height: 44px; display: inline-flex; align-items: center; }
.fuss__in p a.fuss__mail { min-height: 44px; }

@media (min-width: 900px) {
  .fuss { padding-bottom: 3rem; }
  .fuss__kante { height: 76px; }
  .fuss__siegel { width: 120px; height: 120px; }
  .fuss__in {
    grid-template-columns: 1.25fr 1fr minmax(0, 340px);
    gap: 2.6rem; padding-top: 4.6rem; align-items: start;
  }
}

/* ---------------- Feste Rufleiste, nur schmal ---------------- */
.rufleiste { display: none; }
@media (max-width: 899px) {
  body { padding-bottom: 88px; }
  .rufleiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; gap: .6rem; padding: .65rem .8rem;
    background: color-mix(in srgb, var(--porzellan) 95%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid color-mix(in srgb, var(--chrom-d) 34%, transparent);
  }
  .rufleiste .btn { flex: 1 1 auto; }
  .rufleiste .btn--rand { flex: 0 0 34%; }
}

/* ---------------- Rechtsseiten ---------------- */
.recht .wrap { max-width: 46rem; }
.recht h1 { font-size: clamp(2rem, 7vw, 2.8rem); }
.recht h2 {
  font-size: clamp(1.1rem, 4vw, 1.3rem); color: var(--blau);
  margin: 2.1rem 0 .6rem; text-wrap: initial;
}
.recht p, .recht li { max-width: 42rem; }
.recht ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.recht li { margin-bottom: .35rem; }
.recht .todo {
  background: color-mix(in srgb, var(--rot) 8%, var(--porzellan));
  border-left: 4px solid var(--rot); border-radius: var(--r-klein);
  padding: .85rem 1.1rem; font-size: .92rem; color: var(--gedeckt);
}
.recht .zurueck { margin-top: 2.4rem; }

/* ---------------- Galerie und Lightbox ---------------- */
.gal__git { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .gal__git { grid-template-columns: repeat(3, 1fr); } }
.gal__b { padding: 0; border: 0; background: none; cursor: pointer; display: block; width: 100%; }
.gal__b img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-karte); }
.lb {
  position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, var(--blau-tief) 92%, transparent);
  display: grid; place-items: center; padding: 1rem;
  opacity: 0; transition: opacity .18s var(--e-wow);
}
.lb.offen { opacity: 1; }
.lb__bild { max-width: 100%; max-height: 84vh; border-radius: var(--r-karte); }
.lb button {
  position: absolute; background: none; border: 0; color: #ffffff;
  font-size: 2.4rem; line-height: 1; cursor: pointer; min-width: 48px; min-height: 48px;
  border-radius: 50%;
}
.lb__zu { top: .6rem; right: .8rem; }
.lb__vor { left: .4rem; }
.lb__nach { right: .4rem; }

/* =====================================================================
   Bewegung. Startzustaende haengen an .js, gesetzt im <head>.
   Ohne JavaScript ist die Seite vollstaendig sichtbar.
   ===================================================================== */
.js .r { opacity: 0; transform: translateY(var(--weg)); }
.js .r.an {
  opacity: 1; transform: none;
  transition: opacity .5s var(--e-wow) var(--d, 0s),
              transform var(--t-rein) var(--e-wow) var(--d, 0s);
}

/* Titel buchstabenweise: kippt aus der Tiefe herein */
.buchstabe { display: inline-block; }
.js .h-split.r { opacity: 1; transform: none; }
.js .h-split.r .buchstabe { opacity: 0; transform: translateY(.42em) rotateX(-72deg); }
.js .h-split.r.an .buchstabe {
  opacity: 1; transform: none;
  transition: opacity .42s var(--e-wow) calc(var(--i, 0) * .034s),
              transform .78s var(--e-wow) calc(var(--i, 0) * .034s);
}

/* =====================================================================
   Pole schwingt in die Halterung ein, federt zweimal aus und beginnt
   erst danach zu drehen.
   Die Huelle traegt die Bewegung, der Pole selbst bleibt unangetastet.
   Wuerde beides auf demselben Element liegen, wuerde die spezifischere
   Regel die andere still ueberschreiben.
   ===================================================================== */
.pole-huelle { transform-origin: top center; }
.js .pole-huelle.r { opacity: 0; transform: none; }
.js .pole-huelle.r.an {
  opacity: 1;
  animation: pole-rein 1.15s var(--e-wow) both;
}
@keyframes pole-rein {
  0%   { transform: translateY(-130px) rotate(-14deg); opacity: 0; }
  55%  { transform: translateY(0) rotate(6deg); opacity: 1; }
  75%  { transform: rotate(-3deg); }
  90%  { transform: rotate(1.2deg); }
  100% { transform: none; }
}

/* =====================================================================
   Siegel haengt an zwei Ketten und pendelt aus.
   ===================================================================== */
.medaille { transform-origin: top center; }
.js .medaille.r { opacity: 0; transform: translateY(-34px) rotate(-11deg); }
.js .medaille.r.an {
  opacity: 1;
  animation: siegel-pendel 2.1s var(--e-wow) both var(--d, 0s);
}
@keyframes siegel-pendel {
  0%   { transform: translateY(-34px) rotate(-11deg); opacity: 0; }
  30%  { transform: translateY(0) rotate(9deg); opacity: 1; }
  52%  { transform: rotate(-5.5deg); }
  70%  { transform: rotate(3deg); }
  85%  { transform: rotate(-1.4deg); }
  100% { transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .js .medaille.an:hover { animation: siegel-stups .6s var(--e-wow); }
}
@keyframes siegel-stups {
  0% { transform: none; } 35% { transform: rotate(4deg); }
  70% { transform: rotate(-2deg); } 100% { transform: none; }
}

/* alte Fassung, ersetzt durch das Pendeln oben */
/* (ersetzt) */

/* Streifenband zieht sich auf */
.js .trenner.r { opacity: 1; transform: none; }
.js .trenner.r .band { transform: scaleX(0); transform-origin: left center; }
.js .trenner.r.an .band { transform: none; transition: transform .6s var(--e-wow) var(--d, 0s); }

/* Bilder: Kreismaske oeffnet sich.
   Die Maske sitzt auf dem KIND .bild__clip, nie auf dem beobachteten .bild.
   Ein auf null geclipptes Element meldet dem IntersectionObserver null
   Sichtbarkeit und wuerde nie aufgehen. */
.js .bild.r { opacity: 1; transform: none; }
.js .bild.r .bild__clip { clip-path: circle(0% at 50% 50%); }
.js .bild.r img { transform: scale(1.12); }
.js .bild.r.an .bild__clip {
  clip-path: circle(78% at 50% 50%);
  transition: clip-path var(--t-lang) var(--e-wow) var(--d, 0s);
}
.js .bild.r.an img { transform: none; transition: transform 1.3s var(--e-wow) var(--d, 0s); }

/* Gegenlaeufiger Drift der Kreise, nur Zeigergeraete.
   Der Wrapper besitzt translate, das Bild besitzt scale. Getrennte
   Elemente, damit sich nicht zwei Systeme um dieselbe transform streiten.
   Genau dieser Fehler hat den Parallax der Vorgaengerfassung stillgelegt. */
@media (hover: hover) and (pointer: fine) {
  .kreise .drift { transform: translate3d(0, var(--drift, 0px), 0); will-change: transform; }
}

/* Rufleiste: Ausgang kuerzer und flacher als Eingang */
@media (max-width: 899px) {
  .js .rufleiste { transform: translateY(115%); transition: transform .36s var(--e-wow); }
  .js .rufleiste.sichtbar { transform: none; }
  .js .rufleiste:not(.sichtbar) { transition-duration: .22s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .r, .js .r.an, .js .medaille.r, .js .trenner.r .band,
  .js .h-split.r .buchstabe, .js .bild.r .bild__clip, .js .bild.r img {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; transition: none !important;
  }
  .js .band, .js .fuss__kante .band, .js .wisch__fuell,
  .js .fortschritt__fuell, .js .karte__pin,
  .js .pole__streifen { animation: none !important; }
  .js .pole-huelle.r, .js .pole-huelle.r.an,
  .js .medaille.r, .js .medaille.r.an, .js .medaille.an:hover {
    animation: none !important; transform: none !important; opacity: 1 !important;
  }
  .js .fallblatt.r .blatt > span, .js .fallblatt.r.an .blatt > span {
    animation: none !important; transform: none !important; opacity: 1 !important;
  }
  .wisch__fuell { clip-path: none !important; }
  .js .rufleiste { transform: none !important; transition: none !important; }
  .kreise .drift { transform: none !important; }
  .kipp:hover { transform: none !important; }
  .magnet { transform: none !important; }
}

/* --- Meisterbetrieb-Siegel ------------------------------------------------
   Variante "Kontur": nur Umriss in Tinte, keine Flaeche. Kontrast 16,9:1 auf
   Porzellan. Faellt durch Praezision auf, nicht durch Farbe. Signalrot als
   Flaeche wirkte bei dieser Groesse wie ein Rabattaufkleber. */
.meister {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 20px;
  margin: 0 0 .9rem;
  border: 1.5px solid var(--tinte);
  border-radius: var(--r-pille);
  color: var(--tinte);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.15;
  -webkit-font-smoothing: antialiased;
}
.meister b {
  font-family: 'Alfa Slab One', Georgia, serif;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .01em;
  text-transform: none;
}
.meister i { width: 1px; height: 16px; background: currentColor; opacity: .35; flex: none; }
.fuss .meister { border-color: var(--porzellan); color: var(--porzellan); }

/* --- Instagram und TikTok -------------------------------------------------
   Nur Verweise, kein eingebetteter Feed. Ein Widget wuerde ein fremdes Skript
   laden und damit ein Einwilligungsbanner noetig machen. Die Zeichen sind
   stilisierte Einfarb-Formen, kein Nachbau der Markenlogos. */
.kopf__soc {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--gedeckt);
  transition: color .24s var(--e-wow);
}
.kopf__soc svg { width: 19px; height: 19px; }
@media (min-width: 900px) { .kopf__soc { display: inline-flex; } }

.fuss__soc { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 .9rem; }
.soc {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; color: var(--porzellan); text-decoration: none;
  transition: color .24s var(--e-wow);
}
.soc svg { width: 20px; height: 20px; flex: none; color: var(--chrom); }
.soc span { display: flex; flex-direction: column; line-height: 1.15; }
.soc b { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.soc small { font-size: 11px; opacity: .72; }

@media (hover: hover) and (pointer: fine) {
  .kopf__soc:hover { color: var(--blau); }
  .soc:hover { color: var(--chrom); }
}