/* =========================================================
   Schuhe Sarny
   Warmes Neutralgrau als Grundton, das Rot stammt pixelgenau
   aus dem Firmenlogo (#a02829). Ein Akzent (Rot), eine
   Radius-Stufe, durchgehend heller Auftritt.

   Die Farben stehen alle hier oben. Wer eine andere Variante
   zum Standard machen will, tauscht die Werte aus dem
   gewuenschten Block weiter unten mit denen hier und benennt
   die Bloecke um. Am uebrigen Stylesheet aendert sich nichts,
   es greift ausschliesslich ueber diese Variablen zu.
   ========================================================= */

:root {
  color-scheme: light;

  /* Marke */
  --paper: #e9e7e2;
  --paper-soft: #f2f0ec;
  --paper-bright: #fbfaf8;
  --paper-deep: #d8d4cc;
  --red: #a02829;
  --red-dark: #7b1d1e;

  /* Schrift */
  --ink: #1b1a18;
  --ink-soft: #56534d;
  /* Blasseste Schrift, auf allen Papiertönen noch über 4,5 : 1 */
  --ink-faint: #625e58;

  /* Linien und Flächen */
  --line: rgba(24, 22, 19, 0.14);
  --line-strong: rgba(24, 22, 19, 0.28);
  --surface: var(--paper-bright);
  --surface-alt: var(--paper-soft);

  /* Schatten, neutral getönt, Licht von oben */
  --shadow-sm: 0 1px 0 rgba(40, 38, 34, 0.08), 0 4px 12px rgba(40, 38, 34, 0.07);
  --shadow-md: 0 2px 0 rgba(40, 38, 34, 0.08), 0 14px 34px rgba(40, 38, 34, 0.1);
  --shadow-lg: 0 3px 0 rgba(40, 38, 34, 0.1), 0 28px 64px rgba(40, 38, 34, 0.14);

  /* Zustände. Grün ist kein zweiter Akzent, es steht nur für
     "jetzt geöffnet", als Punkt und Text im Öffnungsstatus. */
  --status-offen: #1f6a4b;

  /* Dunkler Grund der Fotoschau, damit die Fotos nicht mit dem
     Papier konkurrieren */
  --nacht: #12100e;
  --nacht-text: #f3f1ed;

  /* Steppnaht: die blasse Naht und der bereits genähte Teil */
  --naht: var(--line-strong);
  --naht-rot: var(--red);

  /* Eine Radius-Stufe für die ganze Seite */
  --radius: 4px;

  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Karla", "Segoe UI", system-ui, sans-serif;

  /* Schriftstufen. "Schild" sind die Zeilen, die ihr Feld füllen
     wie ein gemaltes Ladenschild, ihre Größe rechnet sich aus der
     Satzbreite (siehe .schild-zeile). */
  --titel: clamp(2.3rem, 5vw, 4.8rem);
  --plakat: clamp(2.6rem, 6vw, 6rem);

  /* Bewegung: eine Familie aus drei Kurven.
     an       Ankommen: Einblendungen, Hover, Knöpfe
     wechsel  Zustandswechsel: Rollladen, Tür, Vorhang, Flug
     schritt  ein Fußabdruck setzt auf */
  --ease-an: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-wechsel: cubic-bezier(0.7, 0, 0.24, 1);
  --ease-schritt: cubic-bezier(0.33, 1, 0.68, 1);
  --dauer-kurz: 0.2s;
  --dauer-mittel: 0.45s;
  --dauer-lang: 0.9s;

  --container: 1320px;
  --step: clamp(4rem, 7vw, 7.5rem);

  /* Höhe der haftenden Kopfzeile und der Steppnaht darunter. Sprunglinks
     zu den Filialen landen genau unter beiden. */
  --kopf: 76px;
  --naht-hoehe: 30px;

  --z-header: 20;
  --z-grain: 30;
  --z-skip: 60;
}

/* =========================================================
   Farbvarianten zum Vergleich

   Standard ist das Grau oben. Zum Vergleich:

     ?design=creme   die warme Sandfarbe der ersten Fassung
     ?design=blau    helles Blaugrau mit Marineblau als Schrift
     ?design=grau    zurueck zum Standard

   Es werden nur Farbwerte getauscht, an Layout und Schrift aendert
   sich nichts. Das Rot bleibt in allen Varianten gleich, es kommt
   aus dem Logo.
   ========================================================= */

/* Das warme Creme der ersten Fassung. Sandiger, naeher am Papier
   eines alten Familienbetriebs. */
:root[data-design="creme"] {
  --paper: #f4e9d3;
  --paper-soft: #f9f1de;
  --paper-bright: #fdf9f0;
  --paper-deep: #ead9b8;

  --ink: #241b14;
  --ink-soft: #5f5140;
  --ink-faint: #655847;

  --line: rgba(23, 19, 14, 0.16);
  --line-strong: rgba(23, 19, 14, 0.3);

  --shadow-sm: 0 1px 0 rgba(93, 66, 20, 0.1), 0 4px 12px rgba(93, 66, 20, 0.08);
  --shadow-md: 0 2px 0 rgba(93, 66, 20, 0.1), 0 14px 34px rgba(93, 66, 20, 0.12);
  --shadow-lg: 0 3px 0 rgba(93, 66, 20, 0.12), 0 28px 64px rgba(93, 66, 20, 0.16);
}

/* Helles Blaugrau mit tiefem Marineblau als Schriftfarbe. Rot und
   Blau ist eine alte, ruhige Paarung, das Rot sticht staerker
   heraus als auf Sand. */
:root[data-design="blau"] {
  --paper: #dfe7ef;
  --paper-soft: #ecf1f6;
  --paper-bright: #f9fbfd;
  --paper-deep: #c7d4e1;

  --ink: #16202b;
  --ink-soft: #4a5765;
  --ink-faint: #566270;

  --line: rgba(20, 30, 42, 0.14);
  --line-strong: rgba(20, 30, 42, 0.28);

  --shadow-sm: 0 1px 0 rgba(22, 38, 56, 0.08), 0 4px 12px rgba(22, 38, 56, 0.08);
  --shadow-md: 0 2px 0 rgba(22, 38, 56, 0.08), 0 14px 34px rgba(22, 38, 56, 0.12);
  --shadow-lg: 0 3px 0 rgba(22, 38, 56, 0.1), 0 28px 64px rgba(22, 38, 56, 0.16);
}

* {
  box-sizing: border-box;
}

/* Der Rand für die Bildlaufleiste bleibt immer reserviert. Sonst
   springt die Seite seitlich, wenn die Fotoschau das Scrollen sperrt. */
html {
  scroll-padding-top: calc(var(--kopf) + 20px);
  scrollbar-gutter: stable;
}

/* Weich gescrollt wird erst nach dem Laden, die Klasse setzt
   script.js. Beim Aufruf mit Sprungmarke (#filiale-villach) würde der
   Browser sonst auch die erste Fahrt weich machen, und ScrollTrigger
   hielte sie beim ersten Neuberechnen an: Die Seite bliebe oben. */
html.weich {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  background-color: var(--paper);
}

/* Papierkorn, fixiert und ohne Zeigerereignisse, damit
   scrollende Flächen nicht dauernd neu gezeichnet werden */
body::after {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  content: "";
  opacity: 0.42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
}

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

/* picture ist von Haus aus inline und würde sonst eine
   Grundlinienlücke unter dem Bild erzeugen */
picture {
  display: block;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.container {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2.2rem);
}

.section {
  padding-block: var(--step);
}

/* Leichte Tonabstufung, damit die Abschnitte einen Rhythmus
   bekommen, ohne aus der Papierfamilie zu fallen */
.section-tinted {
  background: var(--paper-soft);
  border-block: 1px solid var(--line);
}

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

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
}

h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

p {
  margin: 0 0 1em;
  max-width: 65ch;
  text-wrap: pretty;
}

.lede {
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.6;
}

/* Sparsam eingesetzt: höchstens drei auf der ganzen Seite */
.kicker {
  display: block;
  margin-bottom: 14px;
  color: var(--red);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.section-head {
  max-width: 58ch;
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
}

.section-head p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
}

/* ---------- Kopfbereich ---------- */

/* Oberhalb des Fensters versteckt und zusätzlich durchsichtig: Das
   neue iOS-Safari zeigt beim Scrollen auch den Bereich unter der
   Statusleiste, dort stand sonst ein roter Fleck. Durchsichtig bleibt
   der Link mit der Tastatur erreichbar. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-skip);
  padding: 12px 18px;
  color: var(--paper-bright);
  font-weight: 700;
  background: var(--red);
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-160%);
  transition: transform 0.24s var(--ease-an), opacity 0.24s;
}

.skip-link:focus {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ---------- Kontaktzeile ---------- */

.topbar {
  background: var(--paper-soft);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}

.topbar a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  transition: color 0.2s;
}

.topbar a:hover {
  color: var(--red);
}

.topbar svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.topbar-kontakt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  align-items: center;
}

.topbar-phone {
  font-variant-numeric: tabular-nums;
}

.topbar-social {
  display: flex;
  gap: 4px;
}

.topbar-social a {
  padding: 6px;
}

.topbar-social svg {
  width: 16px;
  height: 16px;
}

/* ---------- Seite "Über uns" ---------- */

.story-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

/* Doppelte Klasse, sonst setzt die spätere .schild-Regel den Abstand
   wieder auf null */
.story-intro .story-titel {
  margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
}

/* Die 119 wie auf der Startseite: breit, rot, drei Ziffern Platz */
.story-figure {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.story-figure strong {
  display: block;
  min-width: 3ch;
  color: var(--red);
  font-family: var(--font-display);
  font-size: clamp(5rem, 10vw, 9rem);
  font-stretch: 125%;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.8;
}

.story-figure span {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

/* Chronik: eine Steppnaht wie in der Kopfzeile der Startseite. Beim
   Scrollen wird sie rot genäht, über die Scroll-Zeitleiste des
   Browsers, ohne Skript. Die Stationen markiert die Fußspur aus dem
   Logo. Browser ohne Scroll-Zeitleiste zeigen die Naht fertig genäht. */
.chronik {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  margin: 0;
  padding: 0 0 0 clamp(2.6rem, 6vw, 5.5rem);
  list-style: none;
}

.chronik::before,
.chronik::after {
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: clamp(0.75rem, 2vw, 1.9rem);
  width: 2px;
  content: "";
}

.chronik::before {
  background: repeating-linear-gradient(180deg, var(--naht) 0 7px, transparent 7px 12px);
}

/* Der genähte Teil, etwas dicker wie ein roter Zwirn */
.chronik::after {
  width: 3px;
  margin-left: -0.5px;
  background: repeating-linear-gradient(180deg, var(--naht-rot) 0 7px, transparent 7px 12px);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .chronik::after {
      animation: linie-waechst linear both;
      animation-timeline: view();
      animation-range: cover 8% cover 78%;
    }

    @keyframes linie-waechst {
      from {
        clip-path: inset(0 0 100% 0);
      }
      to {
        clip-path: inset(0);
      }
    }
  }
}

.station {
  position: relative;
}

/* Fußabdruck als Wegmarke auf der Linie */
.station::before {
  position: absolute;
  top: 0.35rem;
  left: calc(clamp(0.75rem, 2vw, 1.9rem) - clamp(2.6rem, 6vw, 5.5rem) - 13px);
  width: 28px;
  height: 29px;
  content: "";
  opacity: 0.85;
  background: url("assets/fussabdruck-links.png") center / contain no-repeat;
  transform: rotate(96deg);
}

.station:nth-child(even)::before {
  background-image: url("assets/fussabdruck-rechts.png");
  transform: rotate(88deg);
}

/* Die Jahreszahlen stehen groß und breit, wie Hausnummern */
.station-jahr {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--red);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  font-stretch: 125%;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.station-text h2 {
  margin-bottom: 0.6rem;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.station-text p {
  max-width: 58ch;
  color: var(--ink-soft);
}

/* fit-content, damit der Rahmen bei der kleinen historischen
   Aufnahme nicht über das Bild hinausragt */
.station-bild {
  max-width: min(100%, 460px);
  margin: 1.4rem 0 0;
  overflow: hidden;
  background: var(--paper-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* Die historische Aufnahme liegt nur in 226 px Breite vor. Der Rahmen
   bekommt genau diese Breite, damit das Bild weder hochgerechnet wird
   noch ein leerer Streifen daneben stehen bleibt. */
.station-bild-klein {
  max-width: 226px;
}

/* Ohne height: auto bliebe die Höhe aus dem height-Attribut stehen,
   während max-width die Breite kappt, und das Foto würde gestaucht */
.station-bild img {
  width: 100%;
  height: auto;
}


.station-bild figcaption {
  padding: 10px 14px;
  color: var(--ink-soft);
  font-size: 0.86rem;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.station-heute .station-jahr {
  color: var(--ink);
}

.station-heute .button {
  margin-top: 1.4rem;
}

/* Markierung am Seitenanfang: braucht eine messbare Höhe, sonst
   meldet der IntersectionObserver nie einen Wechsel */
[data-header-sentinel] {
  display: block;
  height: 1px;
  margin-bottom: -1px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.nav-shell {
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

/* Auf den Unterseiten steht die Wortmarke sofort im Kopf. Auf der
   Startseite steht sie groß im Aufmacher, dort rückt sie hier erst
   nach, wenn die Kopfzeile haftet. Der Platz bleibt reserviert, damit
   die Navigation nicht springt. */
.brand-nachruecken {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dauer-kurz), transform var(--dauer-kurz), visibility var(--dauer-kurz);
}

.site-header.is-stuck .brand-nachruecken {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* Ohne Skript meldet niemand is-stuck. Dann steht das Logo einfach da,
   das regelt ein noscript-Block im Kopf der Startseite. */
.brand img {
  width: auto;
  height: 54px;
  transition: transform 0.24s var(--ease-an);
}

.brand:hover img {
  transform: scale(1.02);
}

.nav-links {
  display: flex;
  gap: clamp(0.2rem, 1vw, 0.6rem);
  align-items: center;
}

.nav-links a {
  position: relative;
  padding: 8px 10px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s;
}

.nav-links a::after {
  position: absolute;
  right: 10px;
  bottom: 2px;
  left: 10px;
  height: 2px;
  content: "";
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.26s var(--ease-an);
}

.nav-links a:hover,
.nav-links a.is-current {
  color: var(--ink);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.is-current::after {
  transform: scaleX(1);
}

/* ---------- Wegmarke: Steppnaht ----------
   Solange man durch die fünf Filialen scrollt, hängt unter der
   Kopfzeile eine Naht wie an einem Schuh. Der rote Faden zeigt, wie
   weit man ist, die Stationen springen direkt zu einer Filiale. Die
   Naht ist in fünf gleiche Stücke geteilt, eines je Filiale, jeder
   Ortsname steht mittig über seinem Stück.

   Der Streifen liegt absolut unter der Kopfzeile und verschiebt
   nichts. Ohne Skript bleibt er verborgen. */

.steppnaht {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: var(--naht-hoehe);
  visibility: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dauer-kurz), transform var(--dauer-mittel) var(--ease-an),
    visibility var(--dauer-kurz);
}

.steppnaht.ist-aktiv {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.steppnaht-bahn {
  position: relative;
  height: var(--naht-hoehe);
}

/* Blasse Naht und genähter Faden liegen übereinander. Der Faden ist
   etwas dicker, wie ein roter Zwirn auf der Vorstichlinie. */
.steppnaht-faden,
.steppnaht-genaeht {
  position: absolute;
  right: 0;
  left: 0;
  background: repeating-linear-gradient(90deg, var(--naht) 0 7px, transparent 7px 12px);
}

.steppnaht-faden {
  bottom: 5px;
  height: 2px;
}

.steppnaht-genaeht {
  top: -0.5px;
  height: 3px;
  background-image: repeating-linear-gradient(90deg, var(--naht-rot) 0 7px, transparent 7px 12px);
  clip-path: inset(0 100% 0 0);
}

.steppnaht-stationen {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steppnaht-stationen a {
  display: block;
  overflow: hidden;
  padding-top: 5px;
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dauer-kurz);
}

.steppnaht-stationen a:hover,
.steppnaht-stationen .ist-hier a {
  color: var(--ink);
}

.steppnaht-stationen a:hover {
  color: var(--red);
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: var(--ink);
  transition: transform 0.24s;
}

.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* ---------- Schaltflächen ---------- */

.button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.18s var(--ease-an), background 0.2s, color 0.2s,
    border-color 0.2s, box-shadow 0.2s;
}

.button svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
}

.button-primary {
  color: var(--paper-bright);
  background: var(--red);
  box-shadow: var(--shadow-sm);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.button-secondary {
  color: var(--ink);
  background: transparent;
  border-color: var(--line-strong);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  color: var(--red);
  border-color: var(--red);
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(1px) scale(0.99);
}

/* ---------- Schild ----------
   Große Schrift steht wie ein gemaltes Ladenschild: Jede Zeile füllt
   die volle Breite ihres Feldes, wie "SCHUHE Sarny" über der Tür in
   Lavamünd. Die Breitenachse der Archivo gleicht die Wortlängen aus:
   Lange Zeilen werden schmal gesetzt, kurze breit, so stehen alle
   Zeilen etwa gleich groß.

   Je Zeile stehen im HTML zwei gemessene Werte: --em ist die Breite
   der Zeile in em bei der Breite --wdth. Daraus rechnet sich die
   Schriftgröße: Feldbreite (100cqi) geteilt durch --em. Das ist
   reines CSS, es springt nichts, wenn die Schrift nachlädt, weil die
   Zeilenhöhe nur an der Größe hängt. Ein halbes Prozent Luft fängt
   Rundungen ab. Für breite Schirme gibt es
   eigene Werte (--em-breit, --wdth-breit), dort stehen manche Zeilen
   zusammen, die schmal zwei sind (.schild-teil).

   Neu messen, wenn sich ein Text ändert: im Browser die Zeile im
   echten Satz ausmessen (Range über den Inhalt, Breite durch
   Schriftgröße). Eine Messung außerhalb der Seite fällt ein bis zwei
   Prozent zu schmal aus, dann stößt die Zeile an den Rand. */

.schild {
  overflow-x: clip;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.88;
  text-transform: uppercase;
  container-type: inline-size;
}

.schild-zeile,
.schild-teil {
  --e: var(--em);
  --w: var(--wdth, 100%);
  display: block;
  font-size: calc(100cqi / (var(--e) * 1.005));
  font-stretch: var(--w);
  white-space: nowrap;
}

.schild-rot {
  color: var(--red);
}

@media (min-width: 701px) {
  .schild-zeile {
    --e: var(--em-breit, var(--em));
    --w: var(--wdth-breit, var(--wdth, 100%));
  }

  .schild-teil {
    display: inline;
    font-size: inherit;
    font-stretch: inherit;
  }
}

/* Nur für Screenreader und Suchmaschinen sichtbar */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- ★ Aufmacher ----------
   Links das Logo und der Claim, rechts die Fassade, darunter die
   Ortszeile aus dem Logo mit dem Status jeder Filiale. Auf dem
   Telefon steht die Ortszeile gleich unter dem Claim, damit der
   Status von Villach ohne Scrollen zu sehen ist. */

.aufmacher {
  position: relative;
  overflow: clip;
  padding-block: clamp(1.4rem, 3vw, 2.6rem) calc(var(--step) + 2rem);
}

.aufmacher-raster {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}

.aufmacher-titel {
  grid-column: 1 / 9;
  grid-row: 1;
  margin: 0;
}

/* Freigestellte Wortmarke, steht ohne Kasten im Papier */
.aufmacher-logo {
  width: min(100%, 580px);
  height: auto;
}

.aufmacher-claim {
  display: block;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.fassade {
  grid-column: 9 / 13;
  grid-row: 1;
  margin: 0;
}

.ortszeile {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: clamp(0.4rem, 1.4vw, 1.2rem);
}

/* ---------- Fassaden ----------
   Die Außenansichten liegen übereinander. Die gezeigte ist offen, die
   anderen sind von oben her zu (clip-path). Beim Wechsel geht die
   neue wie ein Rollladen von unten nach oben auf und liegt dabei über
   der alten. Die alten 800-px-Bilder erscheinen nie breiter als
   560 CSS-px. Deutschlandsberg zeigt ein Innenfoto, das Außenfoto ist
   für diese Größe zu grob. */

.fassade-rahmen {
  position: relative;
  overflow: hidden;
  max-width: 560px;
  aspect-ratio: 3 / 2;
  background: var(--paper-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.fassade-bild {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dauer-lang) var(--ease-wechsel);
}

.fassade-bild.ist-offen {
  clip-path: inset(0);
}

.fassade-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fassade-unterschrift {
  max-width: 560px;
  min-height: 2.6em;
  padding-top: 10px;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* ---------- Ortszeile ----------
   Die Ortszeile aus dem Logo, als Links zu den Filialen, mit dem
   Status von jetzt. Die rote Marke oben steht über dem Ort, dessen
   Fassade gerade zu sehen ist. */

.ortszeile ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.ortszeile li {
  position: relative;
}

.ortszeile li + li {
  border-left: 1px solid var(--line);
}

.ortszeile li::before {
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dauer-mittel) var(--ease-an);
}

.ortszeile li.ist-gezeigt::before {
  transform: scaleX(1);
}

.ortszeile li > a {
  display: grid;
  gap: 4px;
  padding: 14px clamp(0.6rem, 1.2vw, 1.1rem) 12px;
}

/* Der erste Ort steht bündig mit dem Claim darüber */
.ortszeile li:first-child > a {
  padding-left: 0;
}

.ort-name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  transition: color var(--dauer-kurz);
}

.ortszeile li > a:hover .ort-name,
.ortszeile li > a:focus-visible .ort-name {
  color: var(--red);
}

/* Der Platz für den Status ist reserviert, damit nichts springt,
   wenn das Skript ihn einträgt */
.ort-status {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  min-height: 2.6em;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.ort-status:not(:empty)::before {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 0.4em;
  content: "";
  background: currentColor;
  border-radius: 50%;
}

/* Zweite Zeile: wann die Filiale wieder aufsperrt */
.ort-status .status-zusatz {
  display: block;
  font-weight: 500;
}

.ort-status.is-open {
  color: var(--status-offen);
}

.ort-status.is-soon {
  color: var(--red);
}

/* Schmaler: Claim über die volle Breite, darunter die Ortszeile als
   Liste, dann die Fassade. Die Reihenfolge ist dieselbe wie im HTML,
   also auch beim Vorlesen und mit der Tabulatortaste. */
@media (max-width: 1020px) {
  .aufmacher-titel,
  .ortszeile,
  .fassade {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ortszeile {
    margin-top: 0;
  }

  .ortszeile ul {
    grid-template-columns: 1fr;
  }

  .ortszeile li + li {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .ortszeile li > a {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 46px;
    padding: 8px 0;
  }

  .ort-status {
    justify-content: flex-end;
    min-height: 1.3em;
    text-align: right;
  }

  /* Die rote Marke steht in der Liste links neben dem Ort */
  .ortszeile li::before {
    top: 10px;
    right: auto;
    bottom: 10px;
    left: calc(-1 * clamp(0.6rem, 2vw, 1.1rem));
    width: 3px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
  }

  .ortszeile li.ist-gezeigt::before {
    transform: scaleY(1);
  }
}

/* Telefon: Der Status steht unter dem Ort, rechts ein Pfeil. Ein Tipp
   klappt darunter "Anrufen" und "Route planen" dieser Filiale auf
   (Wunsch von Herrn Sarny, 30. Oktober 2026). Die Klappe baut das
   Skript, ohne Skript bleibt der Ort ein Link zur Filiale. */
@media (max-width: 700px) {
  .ortszeile li > a {
    gap: 3px 12px;
    padding: 12px 0;
  }

  .ort-status {
    grid-column: 1;
    justify-content: flex-start;
    text-align: left;
  }

  /* Beide Angaben in einer Zeile: "Jetzt geschlossen · öffnet morgen" */
  .ort-status .status-zusatz {
    display: inline;
  }

  .ort-status .status-zusatz::before {
    content: "· ";
  }

  .has-js .ortszeile li > a::after {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    content: "";
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(-45deg);
    transition: transform var(--dauer-kurz) var(--ease-an);
  }

  .has-js .ortszeile li > a[aria-expanded="true"]::after {
    transform: rotate(-135deg);
  }

  .ortszeile li > a[aria-expanded="true"] .ort-name {
    color: var(--red);
  }

  .ort-klappe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: 14px;
  }

  .ort-klappe[hidden] {
    display: none;
  }

  .ort-klappe .button {
    min-height: 46px;
    padding: 0 12px;
  }
}

/* ---------- Fußspur ----------
   Die Abdrücke sind aus dem Firmenlogo freigestellt. Sie liegen als
   leise Spur am unteren Rand des Aufmachers. Bei Bewegung stehen
   zuerst nur zwei, bewegung.js setzt die übrigen mit dem Scrollen,
   Schritt für Schritt hinunter zu den Filialen. */

.spur {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: clamp(100px, 16vh, 170px);
  pointer-events: none;
}

.spur span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: clamp(34px, 3.8vw, 60px);
  aspect-ratio: 208 / 216;
  opacity: 0.15;
  background: url("assets/fussabdruck-links.png") center / contain no-repeat;
  transform: translate(-50%, -50%) rotate(calc(96deg + var(--r)));
  scale: var(--s, 1);
}

.spur span:nth-child(even) {
  background-image: url("assets/fussabdruck-rechts.png");
}

.hat-bewegung .aufmacher .spur span:nth-child(n + 3) {
  opacity: 0;
}

/* Fotos behalten ihr Seitenverhältnis, nichts wird beschnitten */
.photo {
  margin: 0;
  overflow: hidden;
  background: var(--paper-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.photo img {
  width: 100%;
  height: auto;
}

/* ---------- Über uns, Kurzfassung ----------
   Die Geschichte hat ihre eigene Seite. Hier nur der Kern, die
   Eckdaten und die Zahl der Jahre. */

.haus-raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.haus-text h2 {
  max-width: 15ch;
  font-size: var(--titel);
}

.haus-text p {
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
}

.eckdaten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1rem, 2vw, 2rem);
  margin: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-top: 1px solid var(--line-strong);
}

.eckdaten div {
  padding-top: 14px;
}

.eckdaten dt {
  margin-bottom: 4px;
  color: var(--ink-faint);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eckdaten dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  font-weight: 600;
  line-height: 1.3;
}

.haus-zahl {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  justify-items: start;
}

/* Die 119 in Plakatgröße, breit und rot. Die Mindestbreite von drei
   Ziffern hält den Platz, während sie hochzählt: So rückt nichts. */
.about-count {
  display: grid;
  gap: 10px;
  margin: 0;
}

.about-count strong {
  display: block;
  min-width: 3ch;
  color: var(--red);
  font-family: var(--font-display);
  font-size: clamp(6rem, 15vw, 14rem);
  font-stretch: 125%;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.8;
}

.about-count span {
  max-width: 26ch;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* Die historische Aufnahme liegt nur in 226 px Breite vor. Der
   Rahmen bekommt genau diese Breite, damit sie nie hochgerechnet wird. */
.about-figure {
  max-width: 226px;
  margin: 0;
}

.about-figure .photo {
  display: block;
  box-shadow: var(--shadow-md);
}

.about-figure figcaption {
  padding-top: 10px;
  color: var(--ink-faint);
  font-size: 0.84rem;
}

/* ---------- Markenbänder ----------
   Zwei Laufbänder: oben die drei Hauptmarken als Logos, im
   Markenabschnitt die vollständige Liste als Schrift. Beide bestehen
   aus zwei identischen Hälften, die Verschiebung um genau 50 Prozent
   ergibt die nahtlose Schleife. Deshalb kein gap, sondern Innenabstand
   an den Elementen: sonst stimmt die Naht nicht. */

/* Sitzt über dem Aufmacher und bleibt im Raster der übrigen
   Abschnitte, statt über die volle Fensterbreite zu laufen */
/* Eigener, etwas dunklerer Grund. Ohne ihn schweben die Logos im
   Papier; mit ihm liegen sie auf einer Flaeche und bekommen Halt.
   Etwas schmaler als früher, damit der Aufmacher Höhe behält. */
.markenband {
  padding-block: clamp(0.35rem, 0.8vw, 0.6rem);
  background: var(--paper-deep);
  border-block: 1px solid var(--line);
}

.markenband .marquee {
  padding-block: 0.3rem;
}

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: laufband 34s linear infinite;
}

.marquee-track > li {
  flex: none;
  padding-inline: clamp(1.4rem, 3vw, 3rem);
}

/* Anhalten, solange jemand hinschaut oder mit der Tastatur navigiert */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

@keyframes laufband {
  to {
    transform: translateX(-50%);
  }
}

/* Jede Marke bringt ein anderes Seitenverhaeltnis mit: Rieker ist fast
   quadratisch, der Skechers-Schriftzug elfmal so breit wie hoch. Ueber
   eine einheitliche Hoehe geriete er riesig. Deshalb bekommt jede Marke
   ihr eigenes Mass, abgestimmt aufs Auge: Alle sollen ungefaehr gleich
   schwer wirken, keine soll das Band anfuehren. Skechers wird ueber die
   Breite bemessen, die anderen ueber die Hoehe. */
.markenband .marke {
  width: auto;
  object-fit: contain;
}

.markenband .marke-rieker {
  height: clamp(46px, 5vw, 64px);
}

.markenband .marke-remonte {
  height: clamp(20px, 2.1vw, 28px);
}

.markenband .marke-skechers {
  width: clamp(100px, 10.5vw, 146px);
  height: auto;
}

.markenband .marke-crocs {
  height: clamp(16px, 1.8vw, 23px);
}

.markenband .marke-hickersberger {
  height: clamp(29px, 3.2vw, 42px);
}

.markenband .marke-gabor {
  height: clamp(15px, 1.6vw, 21px);
}

/* ---------- Marken ----------
   Die sechs Logos in einem ruhigen Raster, getrennt von feinen Linien
   wie Fächer in einem Regal. Jede Marke bekommt ihr eigenes Maß, aufs
   Auge abgestimmt wie im Logo-Band, nur größer: Alle sollen ungefähr
   gleich schwer wirken. */

.marken-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.marken-logos li {
  display: grid;
  min-height: clamp(130px, 15vw, 210px);
  padding: clamp(1.2rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
  place-items: center;
}

.marken-logos li:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--line);
}

.marken-logos picture {
  display: contents;
}

.marken-logos img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.marken-logos .marke-rieker {
  height: clamp(72px, 8vw, 116px);
}

.marken-logos .marke-remonte {
  height: clamp(30px, 3.2vw, 46px);
}

.marken-logos .marke-skechers {
  width: clamp(170px, 19vw, 270px);
  height: auto;
}

.marken-logos .marke-crocs {
  height: clamp(26px, 3vw, 42px);
}

.marken-logos .marke-hickersberger {
  height: clamp(45px, 5vw, 72px);
}

.marken-logos .marke-gabor {
  height: clamp(24px, 2.6vw, 36px);
}

@media (max-width: 700px) {
  .marken-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marken-logos li:not(:nth-child(3n + 1)) {
    border-left: 0;
  }

  .marken-logos li:nth-child(even) {
    border-left: 1px solid var(--line);
  }
}

/* ---------- Sortiment als Aushang ---------- */

.aushang {
  border-top: 2px solid var(--ink);
}

.aushang-zeile {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0.6rem clamp(1.5rem, 4vw, 4rem);
  align-items: baseline;
  padding-block: clamp(1.2rem, 2.6vw, 2.2rem);
  border-bottom: 1px solid var(--line-strong);
}

.aushang h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  letter-spacing: -0.02em;
}

.aushang p {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.14rem);
}

@media (max-width: 700px) {
  .aushang-zeile {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .marquee-track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    animation: none;
  }

  /* Die zweite Hälfte ist nur für die Schleife da */
  .marquee-track > li[aria-hidden="true"] {
    display: none;
  }
}

/* ---------- Standorte ----------
   Jede Filiale ist ein Blatt im normalen Lauf der Seite: links der Ort
   als Schild und alle Angaben, rechts ein Foto im Hochformat. Status,
   Zeiten, Adresse, Telefon und Route stehen immer im Bild.

   Nichts haftet und nichts scrollt im Bild. Früher blieb die Szene beim
   Scrollen stehen und ließ Foto um Foto aufgehen, bevor die Seite
   weiterlief. Das irritierte, die Seite läuft jetzt immer als Ganzes. */

.standorte {
  padding-bottom: 0;
}

.filiale {
  position: relative;
  /* Sprunglinks landen unter Kopfzeile und Naht (scroll-padding-top
     von html ist Kopfzeile plus 20 px) */
  scroll-margin-top: calc(var(--naht-hoehe) - 20px);
  border-top: 1px solid var(--line);
}

.filiale-buehne {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 4rem);
}

.filiale-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.filiale-zeile {
  margin: 0;
  color: var(--red);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.filiale-name {
  display: block;
  align-self: stretch;
  margin: 0 0 4px;
}

.filiale-vorname {
  display: block;
  margin-bottom: 0.2em;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0;
}

.filiale-name .schild {
  display: block;
}

.open-status {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 7px 12px;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.open-status::before {
  width: 8px;
  height: 8px;
  content: "";
  background: currentColor;
  border-radius: 50%;
}

.open-status.is-open {
  color: var(--status-offen);
  border-color: color-mix(in srgb, var(--status-offen) 40%, transparent);
}

.open-status.is-soon {
  color: var(--red);
  border-color: var(--red);
}

/* Wann die Filiale wieder aufsperrt. Hier hinter dem Status, in der
   Ortszeile des Aufmachers in einer eigenen Zeile (siehe .ort-status). */
.open-status .status-zusatz::before {
  content: " · ";
}

.location-facts {
  align-self: stretch;
  max-width: 34rem;
  margin: 0;
  font-size: 0.95rem;
}

.location-facts div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}

.location-facts dt {
  color: var(--ink-faint);
  font-weight: 600;
}

.location-facts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.location-facts dd a {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.location-facts a:hover {
  color: var(--red);
  text-decoration-color: currentColor;
}

.filiale-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  margin-top: 6px;
}

.knopf-zahl {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.knopf-zahl:not(:empty)::before {
  content: "· ";
}

/* Karte anzeigen: ein schlichter Textknopf mit Dreieck */
.karte-knopf {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: 0;
}

.karte-knopf::before {
  width: 0;
  height: 0;
  content: "";
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  transition: transform var(--dauer-kurz);
}

.karte-knopf[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.karte-knopf:hover {
  color: var(--red);
}

/* ---------- Foto der Filiale ----------
   Der Rahmen zeigt ein Foto und ist ein Knopf: Er öffnet die Fotoschau
   mit allen Fotos der Filiale, beim gezeigten zuerst. Der Name
   "Bildfolge" stammt aus der Zeit, als hier beim Scrollen mehrere Fotos
   aufgingen. */

.filiale-bilder {
  min-width: 0;
}

.bildfolge-halter {
  position: relative;
  width: min(100%, 520px);
  margin-left: auto;
}

.bildfolge {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  color: inherit;
  cursor: zoom-in;
  background: var(--paper-deep);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.bildfolge:focus-visible {
  outline-offset: 4px;
}

.bildfolge picture {
  position: absolute;
  inset: 0;
}

.bildfolge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lavamünd hat nur Bilder in 800 px, im Querformat. Der Rahmen bleibt
   deshalb quer und nie breiter als 640 CSS-px. */
.filiale-klein .bildfolge-halter {
  width: min(100%, 640px);
}

.filiale-klein .bildfolge {
  aspect-ratio: 3 / 2;
}

/* Fotozahl auf dem Rahmen. Den Inhalt setzt das Skript, ohne Skript
   gibt es keine Fotoschau und damit auch keinen Hinweis. */
.foto-zahl {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 7px 11px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  background: rgba(20, 18, 16, 0.86);
  border-radius: var(--radius);
  transition: background var(--dauer-kurz);
}

.foto-zahl:empty {
  display: none;
}

.foto-zahl svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.bildfolge:hover .foto-zahl,
.bildfolge:focus-visible .foto-zahl {
  background: var(--red);
}

/* Karte: liegt über den Fotos, lädt erst auf Klick. Fünf Einbettungen
   beim Seitenaufruf wären langsam und würden ungefragt Daten an
   Google senden. */
.map-frame {
  overflow: hidden;
  background: var(--paper-deep);
  border-radius: var(--radius);
}

/* Die Karte geht wie die Fotos als Rollladen von unten auf. Zu ist sie
   unsichtbar, damit Tastatur und Screenreader sie überspringen. */
.karte {
  position: absolute;
  inset: 0;
  z-index: 3;
  visibility: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dauer-lang) var(--ease-wechsel), visibility 0s linear var(--dauer-lang);
}

.karte.ist-offen {
  visibility: visible;
  clip-path: inset(0);
  transition: clip-path var(--dauer-lang) var(--ease-wechsel), visibility 0s;
}

.karte-zu {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
  background: var(--paper-bright);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  place-items: center;
  transition: color var(--dauer-kurz), border-color var(--dauer-kurz);
}

.karte-zu:hover {
  color: var(--red);
  border-color: var(--red);
}

.karte-zu svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Telefon und Tablet ----------
   Senkrecht: Schild, Angaben, dann das Foto über die volle Breite. */
@media (max-width: 1023px) {
  .filiale-buehne {
    grid-template-columns: 1fr;
  }

  .bildfolge-halter,
  .filiale-klein .bildfolge-halter {
    width: min(100%, 560px);
    margin-left: 0;
  }

  .bildfolge {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- Neuigkeiten ---------- */

.news-grid {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}

/* Die Einbettungen liegen direkt auf dem Papier, ohne Schatten und
   ohne Kasten im Kasten. Die Mindesthöhen entsprechen dem, was die
   Beiträge am Ende brauchen (Facebook 640 px plus Rand, Instagram rund
   640 px). Sonst wüchsen sie nach dem Laden, alles darunter rückte
   nach unten, und ein Sprung auf #galerie oder #kontakt landete zu
   weit oben. */
.news-embed {
  min-height: 670px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Schneidet die Kopfzeile des Plugins ab, die Höhe setzt script.js
   (FACEBOOK_KOPF muss dort zu diesem Wert passen) */
.fb-beschnitt {
  overflow: hidden;
}

.fb-beschnitt .fb-page {
  display: block;
  margin-top: -76px;
}

/* Das Seiten-Plugin von Meta rendert höchstens 500 px breit */
.news-embed .fb-page,
.news-embed .fb-page span,
.news-embed iframe {
  max-width: 100% !important;
}

.embed-skeleton {
  display: grid;
  gap: 12px;
}

.embed-skeleton span {
  display: block;
  height: 16px;
  background: linear-gradient(90deg, var(--paper-deep), var(--surface-alt), var(--paper-deep));
  background-size: 200% 100%;
  border-radius: 2px;
  animation: shimmer 1.5s linear infinite;
}

.embed-skeleton span:first-child {
  height: 220px;
}

.embed-skeleton span:nth-child(3) {
  width: 60%;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.embed-fallback {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: 24px;
}

.embed-fallback p {
  margin: 0;
  color: var(--ink-soft);
}

.news-block > h3 {
  margin: 0 0 clamp(0.8rem, 1.4vw, 1.1rem);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
}

.instagram-feed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}

/* Die Starthöhe gilt, bis der Beitrag seine eigene Höhe meldet */
.instagram-feed iframe {
  width: 100%;
  min-height: 640px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.instagram-feed .embed-fallback {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Profil-Links und Anrufhinweis als schlichte Zeilen */
.news-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0 clamp(1.4rem, 3vw, 2.4rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line-strong);
}

.social-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px 6px 22px 5px;
  border-bottom: 1px solid var(--line);
}

.social-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 12%, transparent);
  transition: background var(--dauer-kurz), box-shadow var(--dauer-kurz), transform var(--dauer-kurz) var(--ease-an);
}

.social-icon svg {
  width: 23px;
  height: 23px;
  fill: var(--paper-bright);
}

.social-card:hover .social-icon,
.social-card:focus-visible .social-icon {
  background: var(--red-dark);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--red) 16%, transparent);
  transform: scale(1.04);
}

.social-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.social-text strong {
  font-family: var(--font-display);
  font-size: 1.12rem;
  transition: color var(--dauer-kurz);
}

.social-arrow {
  width: 20px;
  height: 20px;
  fill: var(--ink-faint);
  transition: fill var(--dauer-kurz), transform var(--dauer-kurz) var(--ease-an);
}

.social-card:hover strong,
.social-card:focus-visible strong {
  color: var(--red);
}

.social-card:hover .social-arrow,
.social-card:focus-visible .social-arrow {
  fill: var(--red);
  transform: translate(2px, -2px);
}

.news-call {
  padding: 18px 0 18px 18px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--red);
}

.news-call strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.news-call p {
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- Galerie ----------
   Ein versetzter Satz wie in einer Zeitschrift: zwölf Spalten, jede
   Kachel mit eigenem Platz, Hoch- und Querformate im Wechsel, manche
   etwas tiefer gesetzt. Kein Raster gleicher Kacheln. Das Lavamünder
   Bild hat nur 800 px und bekommt den kleinsten Platz. */

.gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3.4rem) clamp(1rem, 2vw, 2rem);
  align-items: start;
}

.g-a { grid-column: 1 / 8; }
.g-b { grid-column: 9 / 13; margin-top: 18%; }
.g-c { grid-column: 1 / 5; }
.g-d { grid-column: 5 / 10; margin-top: 12%; }
.g-e { grid-column: 10 / 13; align-self: end; }
.g-f { grid-column: 2 / 8; }
.g-g { grid-column: 9 / 13; margin-top: -10%; }
.g-h { grid-column: 1 / 7; }
.g-i { grid-column: 7 / 13; margin-top: 8%; }

.galerie-kachel {
  display: block;
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  background: none;
  border: 0;
}

.galerie-kachel picture {
  overflow: hidden;
  background: var(--paper-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.galerie-kachel img {
  width: 100%;
  height: auto;
}

/* Der Ort steht unter dem Foto, klein und gesperrt */
.galerie-ort {
  position: static;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0 0;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: none;
  transition: color var(--dauer-kurz);
}

.galerie-ort::before {
  width: 18px;
  height: 1px;
  content: "";
  background: currentColor;
}

.galerie-kachel:hover .galerie-ort,
.galerie-kachel:focus-visible .galerie-ort {
  color: var(--red);
}

.galerie-kachel:focus-visible {
  outline-offset: 6px;
}

/* Einblendung als kurzer Rollladen, einmal beim Eintreten. Die
   Verzögerung setzt script.js an der Kachel, das Foto erbt sie. */
.has-js .galerie-kachel.reveal {
  opacity: 1;
  transform: none;
}

.has-js .galerie-kachel.reveal picture {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s var(--ease-wechsel);
  transition-delay: inherit;
}

.has-js .galerie-kachel.reveal.is-visible picture {
  clip-path: inset(0);
}

@media (max-width: 1020px) {
  .gallery > * {
    grid-column: span 6;
    margin-top: 0;
  }

  .gallery .g-e {
    align-self: start;
  }
}

@media (max-width: 700px) {
  .gallery > * {
    grid-column: 1 / -1;
  }
}

/* ---------- Finale ----------
   Der Schlusssatz steht als Schild, darunter zwei große Knöpfe. */

.finale {
  position: relative;
  overflow: clip;
  border-top: 1px solid var(--line);
}

.finale-titel {
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.finale-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button-gross {
  min-height: 64px;
  padding: 0 28px;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
}

.button-gross svg {
  width: 20px;
  height: 20px;
}

.finale-adresse {
  margin: 1.4rem 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
}

.finale-filialen {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.finale-filialen a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: color var(--dauer-kurz), text-decoration-color var(--dauer-kurz);
}

.finale-filialen a:hover,
.finale-filialen a:focus-visible {
  color: var(--red);
  text-decoration-color: currentColor;
}

/* Der Schluss steht ohne Bild und nicht breiter als
   nötig */
.finale-kurz .finale-text {
  max-width: 900px;
}

/* Die Spur läuft unten rechts aus, hinter dem Text. Bei Bewegung
   erscheint sie Schritt für Schritt. */
.finale > .container {
  position: relative;
  z-index: 1;
}

.finale-spur {
  right: clamp(1.5rem, 5vw, 5rem);
  bottom: clamp(1.2rem, 3vw, 2.4rem);
  left: auto;
  width: min(46vw, 640px);
  height: clamp(90px, 12vw, 150px);
}

.hat-bewegung .finale-spur span {
  opacity: 0;
}

@media (max-width: 1020px) {
  .finale-spur {
    display: none;
  }
}

/* Schmal stehen die Knöpfe untereinander */
@media (max-width: 700px) {
  .finale-knoepfe {
    flex-direction: column;
    align-items: stretch;
  }
}

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

/* Der Fuß bleibt im Papierton der Seite, nur eine Spur heller
   und mit einer klaren Linie abgesetzt */
.footer {
  color: var(--ink);
  background: var(--paper-soft);
  border-top: 1px solid var(--line-strong);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: start;
  padding-block: clamp(2.4rem, 4vw, 3.4rem);
}

.footer-logo {
  width: auto;
  height: 72px;
}

.footer address {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-style: normal;
  line-height: 1.7;
}

.footer address a:hover {
  color: var(--red);
  text-decoration: underline;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.footer-social a:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}

.footer-social svg {
  width: 20px;
  height: 20px;
  fill: var(--ink);
  transition: fill 0.2s;
}

.footer-social a:hover svg {
  fill: var(--red);
}

.footer-bottom {
  border-top: 1px solid var(--line);
}

.footer-bottom div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  padding-block: 16px;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

/* Die Ortszeile im Fuß steht wie die Stationen der Steppnaht */
.footer-orte {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-legal {
  display: flex;
  gap: 16px;
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--red);
  border-bottom-color: currentColor;
}

/* ---------- Impressum und Datenschutz ---------- */

.section-head h1 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
}

/* Fliesstext bleibt schmal, sonst wird er unlesbar breit */
.rechtstext {
  max-width: 68ch;
}

.rechtstext h2 {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.rechtstext h2:first-child {
  margin-top: 0;
}

.rechtstext p {
  color: var(--ink-soft);
}

.rechtsdaten {
  display: grid;
  gap: 10px;
  margin: 0;
}

.rechtsdaten > div {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: 4px 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.rechtsdaten dt {
  font-weight: 600;
}

.rechtsdaten dd {
  margin: 0;
  color: var(--ink-soft);
}

/* Noch offene Angaben. Faellt absichtlich auf, damit nichts davon
   unbemerkt online geht. */
.offen {
  padding: 1px 6px;
  color: var(--red-dark);
  font-size: 0.92em;
  background: rgba(160, 40, 41, 0.1);
  border: 1px dashed var(--red);
  border-radius: var(--radius);
}

.rechtstext-fuss {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

@media (max-width: 700px) {
  .rechtsdaten > div {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fotoschau ----------
   Vollbild auf dunklem Grund, damit die Fotos wirken und nicht mit
   dem hellen Seitenton konkurrieren. Das Band rastet per Scroll-Snap
   ein, so wischt es sich auf dem Telefon wie jede Bildergalerie.
   Kleine Bestandsfotos werden nicht hochgerechnet, sie stehen in
   ihrer eigenen Größe in der Mitte. */

/* Solange die Fotoschau offen ist, bleibt die Seite dahinter stehen */
html:has(.fotoschau[open]) {
  overflow: hidden;
}

.fotoschau {
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(12px, 2vw, 22px);
  overflow: hidden;
  color: var(--nacht-text);
  background: var(--nacht);
  border: 0;
}

/* Erst im geöffneten Zustand ein Raster, sonst hebelt display die
   Unsichtbarkeit des geschlossenen Dialogs aus */
.fotoschau[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(10px, 1.6vw, 16px);
  animation: fotoschau-auf 0.3s var(--ease-an);
}

.fotoschau::backdrop {
  background: rgba(12, 10, 8, 0.6);
}

@keyframes fotoschau-auf {
  from {
    opacity: 0;
  }
}

/* Fliegt ein Foto, blendet der Browser den dunklen Grund selbst über.
   Die eigene Einblendung fällt dann weg, und die Kopfzeile fliegt
   nicht als eigene Ebene mit. */
.im-flug .fotoschau[open] {
  animation: none;
}

.im-flug .site-header {
  view-transition-name: none;
}

::view-transition-group(fotoschau-flug) {
  animation-duration: var(--dauer-mittel);
  animation-timing-function: var(--ease-wechsel);
}

/* Quelle und Ziel haben verschiedene Zuschnitte (Rahmen im
   Hochformat, Vollbild im ganzen Format). Beide füllen deshalb die
   fliegende Fläche und werden beschnitten, statt sich zu verzerren. */
::view-transition-image-pair(fotoschau-flug) {
  overflow: clip;
  border-radius: var(--radius);
}

::view-transition-old(fotoschau-flug),
::view-transition-new(fotoschau-flug) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation-duration: var(--dauer-mittel);
}

html.im-flug::view-transition-old(root),
html.im-flug::view-transition-new(root) {
  animation-duration: var(--dauer-mittel);
}

.fotoschau-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: clamp(12px, 2vw, 22px);
  align-items: center;
}

.fotoschau-kopf h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.fotoschau-adresse {
  margin: 3px 0 0;
  color: rgba(243, 241, 237, 0.62);
  font-size: 0.88rem;
}

.fotoschau-zaehler {
  margin: 0;
  color: rgba(243, 241, 237, 0.75);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.fotoschau-zu,
.fotoschau-pfeil {
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  place-items: center;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}

.fotoschau-zu:hover,
.fotoschau-pfeil:hover:not(:disabled) {
  background: var(--red);
  border-color: var(--red);
}

.fotoschau-zu svg,
.fotoschau-pfeil svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.fotoschau-buehne {
  position: relative;
  min-height: 0;
}

.fotoschau-band {
  position: absolute;
  inset: 0;
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  list-style: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.fotoschau-band::-webkit-scrollbar {
  display: none;
}

/* Jede Folie eine Bandbreite und ein eigener Größencontainer: Prozent
   greifen in der gestreckten Folie nicht verlässlich, cqw und cqh
   messen dagegen genau die Fläche, die dem Foto zur Verfügung steht. */
.fotoschau-band > li {
  display: grid;
  flex: 0 0 100%;
  place-items: center;
  padding-inline: 64px;
  container-type: size;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.fotoschau-band picture {
  display: contents;
}

.fotoschau-band img {
  width: auto;
  height: auto;
  max-width: 100cqw;
  max-height: 100cqh;
  border-radius: var(--radius);
}

.fotoschau-pfeil {
  position: absolute;
  top: 50%;
  z-index: 1;
  translate: 0 -50%;
}

.fotoschau-pfeil:disabled {
  cursor: default;
  opacity: 0.25;
}

.fotoschau-zurueck {
  left: 0;
}

.fotoschau-weiter {
  right: 0;
}

.fotoschau-text {
  min-height: 1.5em;
  margin: 0 auto;
  color: rgba(243, 241, 237, 0.82);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

/* Vorschauleiste. Die automatischen Außenabstände zentrieren sie,
   solange sie in die Breite passt, und geben beim Überlaufen den
   Anfang frei. Der Innenabstand hält Platz für den Fokusrahmen. */
.fotoschau-leiste {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.fotoschau-leiste::-webkit-scrollbar {
  display: none;
}

.fotoschau-leiste > :first-child {
  margin-left: auto;
}

.fotoschau-leiste > :last-child {
  margin-right: auto;
}

.fotoschau-daumen {
  flex: none;
  width: 64px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-radius: var(--radius);
  opacity: 0.5;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: opacity 0.2s, outline-color 0.2s;
}

.fotoschau-daumen:hover {
  opacity: 0.85;
}

.fotoschau-daumen[aria-current="true"] {
  opacity: 1;
  outline-color: var(--red);
}

.fotoschau-daumen:focus-visible {
  opacity: 1;
  outline: 3px solid #fff;
}

.fotoschau-daumen picture,
.fotoschau-daumen img {
  width: 100%;
  height: 100%;
}

.fotoschau-daumen img {
  object-fit: cover;
}

@media (max-width: 700px) {
  /* Auf dem Telefon bekommt das Foto die volle Breite, die Pfeile
     liegen halbdurchsichtig darüber. Gewischt wird ohnehin. */
  .fotoschau-band > li {
    padding-inline: 0;
  }

  .fotoschau-pfeil {
    width: 40px;
    height: 40px;
    background: rgba(16, 14, 12, 0.55);
  }

  .fotoschau-zurueck {
    left: 6px;
  }

  .fotoschau-weiter {
    right: 6px;
  }

  .fotoschau-adresse {
    font-size: 0.82rem;
  }

  .fotoschau-daumen {
    width: 52px;
    height: 52px;
  }
}

/* ---------- Seitenwechsel ----------
   Zwischen den Seiten blendet der Browser über, ohne Skript: Die
   Kopfzeile bleibt stehen, der Inhalt geht mit einem kleinen Schritt
   nach oben ab und kommt von unten. Die Farbvariante bleibt, weil sie
   für die ganze Sitzung gilt. Browser ohne Unterstützung
   wechseln wie gewohnt. Die Regeln für den Inhalt gelten nicht, wenn
   in der Fotoschau ein Foto fliegt (im-flug). */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .site-header {
    view-transition-name: kopf;
  }

  /* Hinter den überblendenden Seiten liegt Papier, nicht Weiß */
  ::view-transition {
    background-color: var(--paper);
  }

  /* Nacheinander statt übereinander: Die alte Seite geht rasch ab,
     die neue kommt kurz danach. So mischen sich keine Texte. */
  html:not(.im-flug)::view-transition-old(root) {
    animation: seite-geht 0.2s var(--ease-wechsel) both;
  }

  html:not(.im-flug)::view-transition-new(root) {
    animation: seite-kommt var(--dauer-mittel) var(--ease-an) 0.12s both;
  }

  @keyframes seite-geht {
    to {
      opacity: 0;
      transform: translateY(-2vh);
    }
  }

  @keyframes seite-kommt {
    from {
      opacity: 0;
      transform: translateY(2vh);
    }
  }
}

/* ---------- Bewegung ---------- */

/* Einblenden beim Eintreten in den Sichtbereich.
   Zweck: Reihenfolge sichtbar machen, nicht dekorieren.
   Nur aktiv, wenn das Skript läuft: ohne JavaScript bleibt der
   Inhalt sichtbar, statt dauerhaft auf opacity 0 zu stehen. */
.has-js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-an), transform 0.6s var(--ease-an);
}

.has-js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Am großen Bildschirm steigen die Überschriften Zeile für Zeile aus
   einer Kante, Kicker und Text kommen leicht versetzt dazu. Der Block
   selbst bewegt sich dann nicht. Die Zeilen und ihre Verzögerungen
   setzt script.js beim Eintreten, danach steht wieder einfacher Text
   da. Auf dem Telefon bleibt es beim schlichten Einblenden. */
@media (min-width: 701px) {
  .hat-bewegung.has-js .reveal.mit-zeilen {
    opacity: 1;
    transform: none;
  }

  .hat-bewegung.has-js .mit-zeilen:not(.is-visible) > h2 {
    opacity: 0;
  }

  .hat-bewegung.has-js .mit-zeilen > :not(h2) {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease-an), transform 0.6s var(--ease-an);
  }

  .hat-bewegung.has-js .mit-zeilen.is-visible > :not(h2) {
    opacity: 1;
    transform: none;
  }

  /* Die Maske reicht etwas über die Zeile hinaus, damit Unterlängen und
     Umlaute am Ende nicht beschnitten sind. Die Ränder gleichen das aus. */
  .mit-zeilen .zeile {
    display: block;
    overflow: hidden;
    padding-block: 0.08em 0.14em;
    margin-block: -0.08em -0.14em;
  }

  .mit-zeilen .zeile > span {
    display: block;
    transform: translateY(115%);
    transition: transform 0.9s var(--ease-an);
  }

  .mit-zeilen.is-visible .zeile > span {
    transform: none;
  }
}

/* ---------- Filialen beim Eintreten ----------
   Am großen Bildschirm, einmal je Filiale: Der Ortsname steigt aus einer
   Kante, das Foto geht als Rollladen von unten auf, Status, Angaben und
   Knöpfe folgen gestaffelt. Nichts haftet und nichts hängt am Scrollen,
   die Seite läuft immer als Ganzes (Wunsch von Herrn Sarny). Die Klasse
   ist-da setzt script.js (has-js: nur wenn es läuft), dort wird auch der Ortsname in schild-innen
   gefasst. Auf dem Telefon und bei Bewegungsverzicht steht alles da. */
@media (min-width: 701px) {
  .hat-bewegung.has-js .filiale .schild-zeile {
    overflow: hidden;
    /* Platz für die Pünktchen über Ä und Ü, ohne das Layout zu verschieben */
    padding-top: 0.16em;
    margin-top: -0.16em;
  }

  /* Bis script.js den Namen in schild-innen gefasst hat, nicht aufblitzen */
  .hat-bewegung.has-js .filiale:not(.ist-da) .schild-zeile {
    opacity: 0;
  }

  .hat-bewegung.has-js .filiale .schild-innen {
    display: block;
    transform: translateY(105%);
    transition: transform 1.1s var(--ease-an) 0.12s;
  }

  .hat-bewegung.has-js .filiale-zeile,
  .hat-bewegung.has-js .filiale-vorname,
  .hat-bewegung.has-js .filiale .open-status,
  .hat-bewegung.has-js .filiale .location-facts > div,
  .hat-bewegung.has-js .filiale-knoepfe {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease-an), transform 0.6s var(--ease-an);
  }

  .hat-bewegung.has-js .filiale-vorname {
    transition-delay: 60ms;
  }

  .hat-bewegung.has-js .filiale .open-status {
    transition-delay: 340ms;
  }

  .hat-bewegung.has-js .filiale .location-facts > div:nth-child(1) { transition-delay: 400ms; }
  .hat-bewegung.has-js .filiale .location-facts > div:nth-child(2) { transition-delay: 450ms; }
  .hat-bewegung.has-js .filiale .location-facts > div:nth-child(3) { transition-delay: 500ms; }
  .hat-bewegung.has-js .filiale .location-facts > div:nth-child(4) { transition-delay: 550ms; }

  .hat-bewegung.has-js .filiale-knoepfe {
    transition-delay: 620ms;
  }

  /* Der Rahmen samt Schatten geht auf. Am Ende reicht die Maske über
     den Schatten (--shadow-lg) hinaus, er bleibt ganz sichtbar. */
  .hat-bewegung.has-js .filiale .bildfolge {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1s var(--ease-wechsel) 0.1s;
  }

  .hat-bewegung.has-js .filiale .bildfolge img {
    transform: scale(1.08);
    transition: transform 1.6s var(--ease-an) 0.1s;
  }

  .hat-bewegung.has-js .filiale.ist-da .schild-innen,
  .hat-bewegung.has-js .filiale.ist-da .filiale-zeile,
  .hat-bewegung.has-js .filiale.ist-da .filiale-vorname,
  .hat-bewegung.has-js .filiale.ist-da .open-status,
  .hat-bewegung.has-js .filiale.ist-da .location-facts > div,
  .hat-bewegung.has-js .filiale.ist-da .filiale-knoepfe,
  .hat-bewegung.has-js .filiale.ist-da .bildfolge img {
    opacity: 1;
    transform: none;
  }

  .hat-bewegung.has-js .filiale.ist-da .bildfolge {
    clip-path: inset(-60px -90px -120px -90px);
  }
}

/* ---------- Ab Tablet ---------- */

@media (max-width: 1020px) {
  .nav-toggle {
    display: block;
    order: 3;
  }

  .nav-links {
    position: absolute;
    top: calc(100% + 6px);
    right: clamp(1rem, 3vw, 2.2rem);
    display: grid;
    width: min(300px, calc(100vw - 2rem));
    padding: 10px;
    visibility: hidden;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }

  .nav-links.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .nav-links a {
    padding: 12px 14px;
  }

  .nav-links a::after {
    display: none;
  }

  .haus-raster,
  .story-intro-grid,
  .news-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

}

/* ---------- Ab Telefon ---------- */

@media (max-width: 700px) {
  body {
    font-size: 16px;
  }

  /* Einspaltig rückt das Foto nach unten, dort läge die Spur darunter.
     Auf kleinen Schirmen bleibt der Aufmacher deshalb ruhig. */
  .aufmacher .spur {
    display: none;
  }

  .aufmacher {
    padding-bottom: clamp(2.5rem, 9vw, 4rem);
  }

  /* Keine Steppnaht auf dem Telefon, siehe "Telefon: ruhiger" */
  :root {
    --kopf: 66px;
    --naht-hoehe: 0px;
  }

  .nav-shell {
    height: 66px;
  }

  .brand img {
    height: 38px;
  }

  .eckdaten {
    grid-template-columns: 1fr;
  }

  .eckdaten div + div {
    padding-top: 10px;
  }

  .button {
    width: 100%;
  }
}

/* ---------- Telefon: ruhiger ----------
   Auf dem Telefon wirkte die große Inszenierung zu laut (Rückmeldung
   von Moritz am 25. September 2026). Bis 700 px Breite deshalb:
   - unter dem Logo kein Claim, das Logo reicht
   - keine Steppnaht unter der Kopfzeile, keine wandernde rote Marke
     in der Ortszeile (die Fassade steht dort ohnehin weiter unten)
   - die Schildzeilen werden normale Überschriften: Satzschreibung,
     normale Breite, eine ruhige Größe
   - keine Scroll-Effekte: Tür und Galerie stehen einfach da
   Desktop und Tablet bleiben unverändert. */

@media (max-width: 700px) {
  .aufmacher-claim,
  .steppnaht,
  .ortszeile li::before {
    display: none;
  }

  .schild {
    font-size: clamp(1.9rem, 8.4vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
    text-transform: none;
    text-wrap: balance;
  }

  .schild .schild-zeile,
  .schild .schild-teil {
    display: inline;
    font-size: inherit;
    font-stretch: 100%;
    white-space: normal;
  }

  .about-count strong,
  .story-figure strong {
    font-size: 4.5rem;
  }

  .has-js .galerie-kachel.reveal picture {
    clip-path: none;
    transition: none;
  }
}

/* ---------- Telefon: kürzer ----------
   Die Seite war am Telefon rund 19 Bildschirme lang, allein die
   Filialen 6,6 und die Galerie 4,5. Deshalb bis 700 px:
   - weniger Luft zwischen den Abschnitten
   - Filialen kompakt: Foto quer statt hoch, engere Abstände, kein
     Knopf "Fotos ansehen" (das Foto selbst öffnet die Fotoschau und
     trägt die Fotozahl), Route und Karte nebeneinander
   - Galerie als waagrecht wischbare Reihe; die angeschnittene nächste
     Kachel zeigt, dass es weitergeht
   - Neuigkeiten: niedrigere Facebook-Chronik, ein Instagram-Beitrag
     (siehe script.js) */

@media (max-width: 700px) {
  :root {
    --step: 3rem;
  }

  .filiale-buehne {
    gap: 1.1rem;
    padding-block: 1.6rem;
  }

  .filiale-text {
    gap: 10px;
  }

  .location-facts div {
    padding: 3px 0;
  }

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

  /* Die offene Karte braucht mehr Höhe als das quere Foto */
  .karte-offen .bildfolge {
    aspect-ratio: 1 / 1;
  }

  .filiale-knoepfe {
    margin-top: 2px;
  }

  .filiale-knoepfe .button {
    width: auto;
  }

  .filiale-knoepfe .button-secondary {
    display: none;
  }

  .gallery {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * clamp(1rem, 3vw, 2.2rem));
    padding-inline: clamp(1rem, 3vw, 2.2rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: clamp(1rem, 3vw, 2.2rem);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .gallery::-webkit-scrollbar {
    display: none;
  }

  .gallery > * {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }

  .galerie-kachel picture {
    aspect-ratio: 4 / 5;
  }

  .galerie-kachel img {
    height: 100%;
    object-fit: cover;
  }

  .news-embed {
    min-height: 510px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.weich {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .has-js .reveal {
    opacity: 1;
    transform: none;
  }
}