/* Mutlantik — Website.
   Baut auf basis.css auf. */

/* ------------------------------------------------------------------ Banner */

.banner {
  display: flex;
  align-items: center;
  gap: var(--r4);
  padding: 11px var(--r5);
  font-size: 14.5px;
  font-weight: 520;
  color: var(--pergament);
  background: var(--messing);
}
.banner-messing { background: var(--messing); }
.banner-siegel  { background: var(--siegel); }
.banner-forst   { background: var(--forst); }

.banner-inhalt { flex: 1 1 auto; text-align: center; }
.banner-inhalt a { text-decoration: underline; text-underline-offset: 3px; }

.banner-zu {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  font-size: 21px;
  line-height: 1;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s, background .15s;
}
.banner-zu:hover { opacity: 1; background: rgba(0,0,0,.12); }

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

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background .25s var(--ruhig), box-shadow .25s var(--ruhig);
}

/* Kein backdrop-filter: das erzeugt einen neuen Bezugsrahmen und zerlegt
   darüberliegende Overlays. */
.kopf.fest {
  /* Voll deckend: bei 96 Prozent scheinen grosse Zahlen und Ueberschriften
     dahinter durch und die Kopfzeile wirkt schmutzig. */
  background: var(--pergament);
  box-shadow: 0 1px 0 var(--linie), 0 8px 24px -18px rgba(36, 26, 16, .5);
}

.hat-hero .kopf:not(.fest) .kopf-logo,
.hat-hero .kopf:not(.fest) .kopf-menue a,
.hat-hero .kopf:not(.fest) .kopf-korb { color: var(--tinte); }

.kopf-bahn {
  display: flex;
  align-items: center;
  gap: var(--r5);
  width: 100%;
  max-width: var(--bahn-weit);
  margin-inline: auto;
  padding: var(--r3) var(--r5);
  min-height: 68px;
}
@media (min-width: 700px) { .kopf-bahn { padding-inline: var(--r7); } }

.kopf-marke { flex: 0 0 auto; }
.kopf-logo { width: 150px; height: auto; color: var(--tinte); }
@media (min-width: 700px) { .kopf-logo { width: 178px; } }

.kopf-menue {
  display: none;
  gap: var(--r6);
  margin-inline: auto;
}
@media (min-width: 900px) { .kopf-menue { display: flex; } }

.kopf-menue a {
  position: relative;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--tinte);
  padding-block: 4px;
}
.kopf-menue a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--messing);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ruhig);
}
.kopf-menue a:hover::after, .kopf-menue a.aktiv::after { transform: scaleX(1); }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--r3); }
@media (min-width: 900px) { .kopf-rechts { margin-left: 0; } }

.kopf-korb {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  color: var(--tinte);
}
.kopf-korb svg { width: 23px; height: 23px; }

.kopf-korb-zahl {
  position: absolute;
  top: 4px; right: 3px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  font-family: var(--grotesk);
  font-size: 11px;
  font-weight: 640;
  line-height: 18px;
  text-align: center;
  color: var(--pergament);
  background: var(--messing);
  border-radius: 999px;
}

.kopf-schalter {
  display: grid;
  place-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 900px) { .kopf-schalter { display: none; } }
.kopf-schalter span {
  display: block;
  width: 22px; height: 1.6px;
  background: var(--tinte);
  transition: transform .25s var(--ruhig), opacity .2s;
}
.kopf-schalter[aria-expanded="true"] span:first-child { transform: translateY(3.8px) rotate(45deg); }
.kopf-schalter[aria-expanded="true"] span:last-child  { transform: translateY(-3.8px) rotate(-45deg); }

/* --------------------------------------------------------------- Mobilmenü */

.mobilmenue {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 60;
  width: min(88vw, 400px);
  padding: var(--r8) var(--r6) var(--r6);
  background: var(--pergament);
  border-left: 1px solid var(--linie);
  transform: translateX(100%);
  transition: transform .3s var(--ruhig);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobilmenue.offen { transform: none; }

body.menue-offen { overflow: hidden; }

.mobilmenue nav { display: flex; flex-direction: column; }
.mobilmenue nav a {
  padding: var(--r4) 0;
  font-family: var(--serif);
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--linie);
  min-height: 56px;
  display: flex;
  align-items: center;
}
.mobilmenue nav a:hover { color: var(--messing); }

.mobilmenue-fuss {
  margin-top: auto;
  padding-top: var(--r6);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: var(--muted);
}
.mobilmenue-fuss a { min-height: 44px; display: flex; align-items: center; }

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

.hero {
  position: relative;
  min-height: min(92svh, 900px);
  /* Unter die Kopfzeile geschoben, bis an den oberen Rand. Die Hoehe setzt das
     Skript, sie haengt an Logo und Schrift; ohne Skript gilt die Desktop-Hoehe. */
  margin-top: calc(-1 * var(--kopf-hoehe, 88px));
  padding-top: var(--kopf-hoehe, 88px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Der Film traegt den Kopf. Eine sehr langsame Fahrt darauf, damit auch die
   Standbild-Sekunde vor dem Laden nicht tot wirkt. */
.hero-film {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.hero-film video {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: drift 72s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: scale(1.035) translate3d(-1.1%, -0.7%, 0); }
  to   { transform: scale(1.035) translate3d( 1.1%,  0.7%, 0); }
}

.hero-schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Der Film ist dunkel und von einer Kerze beleuchtet. Der Schleier verstaerkt
     dieses Licht, statt es zu ueberdecken: dunkel an den Raendern, offen in der
     Mitte, und unten der Uebergang ins Pergament der naechsten Flaeche. */
  background:
    radial-gradient(62% 52% at 50% 44%,
      rgba(12, 8, 4, .12) 0%, rgba(12, 8, 4, .52) 62%, rgba(12, 8, 4, .78) 100%),
    linear-gradient(180deg,
      rgba(12, 8, 4, .55) 0%, rgba(12, 8, 4, .1) 22%,
      rgba(12, 8, 4, .2) 72%, var(--pergament) 100%);
}

/* Heller Satz auf dunklem Kopf */
.hero-dunkel h1 { color: var(--pergament); text-shadow: 0 2px 40px rgba(12, 8, 4, .7); }
.hero-dunkel .hero-medaillon { color: var(--pergament); opacity: .95; }
.hero-dunkel .hero-unterzeile { color: var(--messing-hell); }
.hero-dunkel .hero-claim {
  color: rgba(238, 228, 210, .9);
  text-shadow: 0 1px 22px rgba(12, 8, 4, .8);
}
.hero-dunkel .hero-hinweis { color: var(--messing-hell); }
.hero-dunkel .textlink { color: var(--messing-hell); }

.hero-mitte {
  text-align: center;
  padding: var(--r8) var(--r5);
  max-width: 900px;
}

.hero-medaillon {
  width: clamp(88px, 12vw, 148px);
  margin: 0 auto var(--r5);
  color: var(--tinte);
  opacity: .9;
}

.hero h1 { margin-bottom: var(--r2); }

.hero-unterzeile {
  font-family: var(--grotesk);
  font-size: clamp(.82rem, 1.4vw, 1rem);
  font-weight: 560;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--messing);
  margin-bottom: var(--r6);
}

.hero-claim {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  color: var(--muted);
  margin-bottom: var(--r7);
}

.hero-wege {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--r6);
  flex-wrap: wrap;
}

.hero-hinweis {
  position: absolute;
  bottom: var(--r6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.kompass {
  width: 44px; height: 44px;
  color: var(--messing);
  opacity: .62;
  animation: einpendeln 2.6s var(--ruhig) 1 both, atmen 6s ease-in-out 2.6s infinite;
}

/* Die Nadel pendelt sich beim Laden einmal ein und ruht danach. */
@keyframes einpendeln {
  0%   { transform: rotate(-38deg); opacity: 0; }
  35%  { transform: rotate(14deg);  opacity: .62; }
  60%  { transform: rotate(-6deg); }
  80%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg);  opacity: .62; }
}
@keyframes atmen {
  0%, 100% { opacity: .62; }
  50%      { opacity: .34; }
}

/* -------------------------------------------------------------- Abschnitte */

.abschnitt-kopf { max-width: 62ch; margin-bottom: var(--r8); }
.abschnitt-kopf h2 { margin-bottom: var(--r4); }

.abschnitt-wege {
  display: flex;
  align-items: center;
  gap: var(--r6);
  flex-wrap: wrap;
  margin-top: var(--r7);
}
.zentriert .abschnitt-wege { justify-content: center; }

.klein-hinweis { font-size: 14.5px; color: var(--muted); margin-top: var(--r5); }

/* ------------------------------------------------------------------ Kachel */

.kachel { display: block; }

.kachel-bild {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  overflow: hidden;
  border-radius: 3px;

  /* Ein Passepartout. Antiquitaeten muessen ganz zu sehen sein — ein
     angeschnittenes Gemaelde kann niemand kaufen. Deshalb steht das Bild hier
     vollstaendig im Rahmen statt ihn formatfuellend auszufuellen.
     Der Grund ist fast weiss, nicht Creme: die Fotos sind vor weisser Wand
     aufgenommen, und auf Creme laege ihr Hintergrund als helles Rechteck auf. */
  background: #FCFBF8;
  box-shadow: inset 0 0 0 1px var(--linie);
  padding: var(--r4);
}
.kachel-bild img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .6s var(--ruhig);
}
.kachel:hover .kachel-bild img { transform: scale(1.035); }

.kachel.ist-verkauft .kachel-bild img { filter: saturate(.42) brightness(1.04); }

.kachel-siegel {
  position: absolute;
  top: var(--r3); left: var(--r3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  z-index: 2;
}

.kachel-text { padding-top: var(--r4); }

.kachel-titel {
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.25;
  margin-bottom: 4px;
  transition: color .2s;
}
.kachel:hover .kachel-titel { color: var(--messing); }

.kachel-unter {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 6px;
}

.kachel-preis { font-size: 1.16rem; margin: 0; }
.kachel-streich {
  margin-right: 8px;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-size: .86em;
}
.kachel-weg { color: var(--siegel); font-family: var(--grotesk); font-size: .82em;
  font-weight: 560; letter-spacing: .05em; text-transform: uppercase; }

/* -------------------------------------------------------------- Kategorien */

/* Wie Produktkacheln im Apple Store: helle, weich gerundete Karten, das Stück in
   einem eigenen Feld, der Name klar darunter. Sieben Spalten auf breiten
   Schirmen — vierzehn Kategorien ergeben so zwei volle Reihen. */

.kategorien {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}
@media (min-width: 640px)  { .kategorien { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .kategorien { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .kategorien { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .kategorien { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.kategorie {
  display: block;
  min-width: 0;
  color: var(--tinte);
  -webkit-tap-highlight-color: transparent;
}

.kategorie-karte {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .86);
  box-shadow:
    0 0 0 1px rgba(36, 26, 16, .05),
    0 1px 2px rgba(36, 26, 16, .05),
    0 10px 28px -14px rgba(36, 26, 16, .22);
  transition:
    transform .45s cubic-bezier(.2, .8, .2, 1),
    box-shadow .45s cubic-bezier(.2, .8, .2, 1);
}

.kategorie-bild {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 15px;
  background: #F2EEE7;
  /* overflow:hidden allein verliert die Rundung, sobald das Bild beim Hover
     skaliert und die Karte sich hebt — clip-path schneidet in jedem Fall */
  clip-path: inset(0 round 15px);
}
.kategorie-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.kategorie-fuss {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 6px 6px 8px;
}
.kategorie-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.kategorie-name {
  font-family: var(--grotesk);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.kategorie-zahl {
  margin-top: 2px;
  font-family: var(--grotesk);
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.kategorie-pfeil {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(36, 26, 16, .06);
  color: var(--tinte);
  transition: background .3s ease, color .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.kategorie-pfeil svg { width: 14px; height: 14px; }

/* Hover hebt die Karte — Bedienfeedback an einem Link, keine Deko am Zeiger */
@media (hover: hover) {
  .kategorie:hover .kategorie-karte {
    transform: translateY(-5px);
    box-shadow:
      0 0 0 1px rgba(36, 26, 16, .05),
      0 2px 4px rgba(36, 26, 16, .05),
      0 22px 40px -16px rgba(36, 26, 16, .32);
  }
  .kategorie:hover .kategorie-bild img { transform: scale(1.06); }
  .kategorie:hover .kategorie-pfeil {
    background: var(--messing);
    color: #fff;
    transform: translateX(2px);
  }
}

/* Beim Drücken gibt die Karte sofort nach */
.kategorie:active .kategorie-karte {
  transform: scale(.97);
  transition-duration: .1s;
}

.kategorie:focus-visible { outline: none; }
.kategorie:focus-visible .kategorie-karte {
  box-shadow: 0 0 0 3px var(--pergament), 0 0 0 5px var(--messing);
}

@media (max-width: 639px) {
  .kategorie-karte { padding: 6px; border-radius: 18px; }
  .kategorie-bild { border-radius: 13px; clip-path: inset(0 round 13px); }
  .kategorie-fuss { padding: 10px 4px 4px 6px; }
  .kategorie-name { font-size: 14.5px; }
  .kategorie-pfeil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kategorie-karte, .kategorie-bild img, .kategorie-pfeil { transition: none; }
  .kategorie:hover .kategorie-karte { transform: none; }
  .kategorie:hover .kategorie-bild img { transform: none; }
}
/* ------------------------------------------------------------- Bänder */

.ankauf-band {
  background:
    linear-gradient(180deg, rgba(251,247,239,.4), rgba(228, 213, 183, .45) 45%, rgba(251,247,239,.4));
}
.ankauf-inhalt { max-width: 66ch; }

.laden-band { background: transparent; }

.laden-raster {
  display: grid;
  gap: var(--r8);
  align-items: start;
}
@media (min-width: 900px) {
  .laden-raster { grid-template-columns: 1.15fr .85fr; gap: var(--r10); }
}

.laden-adresse {
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.75;
  margin-top: var(--r5);
}

.laden-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--r4);
  font-size: 14.5px;
  font-weight: 540;
}
.laden-status .punkt { width: 8px; height: 8px; border-radius: 50%; }
.laden-status.offen { color: var(--forst); }
.laden-status.offen .punkt { background: var(--forst); animation: pulsen 2.6s ease-in-out infinite; }
.laden-status.zu { color: var(--muted); }
.laden-status.zu .punkt { background: var(--muted); }

@keyframes pulsen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 70, 32, .38); }
  70%      { box-shadow: 0 0 0 7px rgba(30, 70, 32, 0); }
}

.laden-zeiten dl { margin: 0; }
.zeit-zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--r4);
  padding: 11px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 15.5px;
}
.zeit-zeile:last-child { border-bottom: 0; }
.zeit-zeile dt { font-weight: 540; }
.zeit-zeile dd { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }

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

.fuss { padding-block: var(--r9) var(--r6); }

.fuss-raster {
  display: grid;
  gap: var(--r7);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
@media (min-width: 900px) {
  .fuss-raster { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--r8); }
}

.fuss h4 {
  font-family: var(--grotesk);
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--messing-hell);
  margin-bottom: var(--r4);
}

.fuss-logo { width: 210px; color: var(--pergament); margin-bottom: var(--r5); }
.fuss-marke p { color: rgba(232, 220, 198, .72); max-width: 34ch; font-size: 15px; }

.fuss address { font-style: normal; line-height: 1.85; font-size: 15px; }
.fuss address a:hover { text-decoration: underline; text-underline-offset: 3px; }

.fuss-zeiten { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--r4);
  margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.fuss-zeiten dt { font-weight: 560; }
.fuss-zeiten dd { margin: 0; color: rgba(232, 220, 198, .74); }

.fuss-liste { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 2; }
.fuss-liste a:hover { text-decoration: underline; text-underline-offset: 3px; }

.fuss-schluss {
  margin-top: var(--r8);
  padding-top: var(--r5);
  border-top: 1px solid rgba(232, 220, 198, .16);
  font-size: 13.5px;
  color: rgba(232, 220, 198, .58);
}
.fuss-schluss p { margin-bottom: 5px; }
.fuss-schluss p:last-child { margin-bottom: 0; }