/* Team Beauty Hair - Stylesheet
   Hausfarben und Schriften laut Logo-Kit (Homepage/Logo/assets/LIESMICH.md).
   Formsystem: Schaltflaechen = Pille, Bilder und Karten = 4px, Eingaben = 4px.
   Alle Farben stehen in :root. Beim Nachziehen des Logos nur diesen Block anfassen. */

:root {
  color-scheme: light;   /* Die Seite gibt es bewusst nur in Sand, auch auf Geraeten im Dunkelmodus */
  --sand: #e5daca;
  --sand-hell: #f1eae0;
  --tinte: #2e2a26;
  --tinte-weich: #605851;   /* aufgehellte Hausfarbe waere auf Sand unter AA */
  --gold: #8a6e4b;          /* Hausgold, nur fuer Linien, Punkte und Symbole */
  --gold-text: #69543a;     /* dieselbe Farbe abgedunkelt, damit Text auf Sand AA erfuellt */
  --gold-linie: #c7b295;
  --salbei: #cbd6c6;
  --flaeche: #f6f1e9;
  --linie: #ddd2c2;

  --knopf-grund: #cbd6c6;   /* derselbe Salbeiton wie der Zitat-Abschnitt */
  --knopf-schrift: #16211d;
  --knopf-kante: #5a6a53;   /* die helle Fuellung allein haette gegen Sand nur 1,09 zu 1,
                               die dunklere Kante macht den Knopf als Form erkennbar */

  --radius: 4px;
  --breite: 1180px;
  --uebergang: 300ms cubic-bezier(0.16, 1, 0.3, 1);
}


@font-face {
  font-family: "Jost";
  src: url("schriften/jost.woff2") format("woff2");
  font-weight: 300 500;
  font-display: swap;
}

@font-face {
  font-family: "Pinyon Script";
  src: url("schriften/pinyon-script.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--tinte);
  font-family: "Jost", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: "Jost", system-ui, sans-serif; font-weight: 400; margin: 0; line-height: 1.2; }

p { margin: 0; max-width: 62ch; text-wrap: pretty; }

/* Kurze Textblöcke gleichmäßig umbrechen lassen.

   Warum balance und nicht nur pretty: pretty beherrscht Safari erst in sehr neuen
   Fassungen, auf den meisten iPhones passiert damit nichts, waehrend Chrome es
   anwendet. Dieselbe Seite bricht dann auf iPhone und Android unterschiedlich um.
   balance koennen alle aktuellen Browser, und es verteilt die Zeilen gleichmaessig,
   statt nur ein einzelnes Wort in der letzten Zeile zu vermeiden. */
h1, h2, h3,
.frage summary,
.kennzahl__label,
.steckbrief__rolle,
.aufmacher__text,
.gruppe__text,
.zeiten__hinweis,
.preis-hinweise p,
.zeitstrahl p,
.zitat blockquote,
.salon__text p,
.lauftext {
  text-wrap: balance;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

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

section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* Schriftzug wie im Logo: Versalien in Jost, Name in Pinyon Script */

.wortmarke { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; text-decoration: none; }
.wortmarke__team { font-size: 0.6em; letter-spacing: 0.42em; text-indent: 0.42em; color: var(--tinte); }
.wortmarke__name { font-family: "Pinyon Script", cursive; font-size: 1.9em; color: var(--tinte); margin-top: 0.1em; white-space: nowrap; }

/* Abschnittsmarke: Versalien mit Goldlinie, Motiv von der Visitenkarte */

.marke-linie {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 1rem;
}

.marke-linie::after { content: ""; flex: 1; height: 1px; background: var(--gold-linie); }

h2 {
  font-family: "Pinyon Script", cursive;
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  padding-bottom: 0.1em;   /* Platz fuer die Unterlaengen der Schreibschrift */
}

/* Die Aufmacher-Ueberschrift bleibt in Jost: Sie ist die Hauptaussage der Seite
   und muss auf einen Blick lesbar sein, nicht schoen. */
.aufmacher h1 { font-family: "Jost", system-ui, sans-serif; }

.lauftext { color: var(--tinte-weich); }

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

.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--flaeche) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}

.kopf__reihe { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 72px; }

.kopf .wortmarke { font-size: 1rem; }

.nav { display: flex; gap: 1.6rem; }

.nav a {
  text-decoration: none;
  color: var(--tinte-weich);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--uebergang);
}

.nav a:hover { color: var(--gold-text); }

.kopf__rechts { display: flex; align-items: center; gap: 1rem; }

/* Mobilmenue ohne JavaScript */

.mobilmenue { display: none; }
.mobilmenue > summary { list-style: none; cursor: pointer; display: flex; align-items: center; padding: 0.4rem; }
.mobilmenue > summary::-webkit-details-marker { display: none; }
.mobilmenue svg { width: 26px; height: 26px; }
.mobilmenue[open] .mobilmenue__auf { display: none; }
.mobilmenue__zu { display: none; }
.mobilmenue[open] .mobilmenue__zu { display: block; }

.mobilmenue__blatt {
  position: absolute;
  left: 0;
  right: 0;
  top: 72px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  padding: 0.5rem 1.25rem 1.5rem;
  display: grid;
}

.mobilmenue__blatt a {
  text-decoration: none;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linie);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9375rem;
}

/* ---------- Schaltflaechen ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-family: "Jost", sans-serif;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--uebergang), background var(--uebergang), border-color var(--uebergang), color var(--uebergang);
}

.knopf--voll { background: var(--knopf-grund); color: var(--knopf-schrift); border-color: var(--knopf-kante); }
.knopf--voll:hover { filter: brightness(0.93); }

.knopf--rand { border-color: var(--gold-linie); color: var(--tinte); }
.knopf--rand:hover { border-color: var(--gold); color: var(--gold-text); }

.knopf--klein { padding: 0.55rem 1.15rem; font-size: 0.875rem; }
.knopf:active { transform: translateY(1px); }
.knopf svg { width: 17px; height: 17px; flex: none; }

/* ---------- Aufmacher ---------- */

.aufmacher { background: var(--sand); padding-block: clamp(3rem, 7vw, 5rem) 0; }

.aufmacher__gitter { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

.aufmacher__vorspann {
  font-family: "Pinyon Script", cursive;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1;
  color: var(--gold-text);
  margin-bottom: 0.35rem;
  padding-bottom: 0.12em;   /* Platz fuer die Unterlaengen der Schreibschrift */
}

.aufmacher h1 { font-size: clamp(2.4rem, 5.6vw, 3.9rem); font-weight: 300; letter-spacing: -0.015em; }

.aufmacher__text { margin-top: 1.4rem; color: var(--tinte); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }
.aufmacher__knoepfe { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.aufmacher__bild { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; height: min(52vh, 460px); margin-inline-start: auto; }
.aufmacher__bild img { width: 100%; height: 100%; object-fit: cover; }

/* Durchlaufendes Bilderband, flach gehalten */

.band {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  overflow-x: auto;          /* am Handy wischbar */
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
}

.band::-webkit-scrollbar { display: none; }
.band__spur { display: flex; width: max-content; }
.band__spur > * { width: clamp(180px, 22vw, 260px); aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; flex: none; margin-inline-end: 0.75rem; }
.band__spur img { width: 100%; height: 100%; object-fit: cover; }





/* ---------- Zeiten und Kontakt ---------- */

.zeiten__gitter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.zeiten__hinweis { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); color: var(--tinte-weich); max-width: none; }
.tage { display: grid; margin-top: 1.5rem; }
.tage__reihe { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.5rem; }
.tage__reihe + .tage__reihe { border-top: 1px solid var(--linie); }
.tage__tag { color: var(--tinte-weich); }
.tage__zeit { font-variant-numeric: tabular-nums; }
.tage__reihe--zu .tage__zeit { color: var(--tinte-weich); }

.kontaktliste { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1.5rem; }
.kontaktliste a { text-decoration: none; }
.kontaktliste a:hover { color: var(--gold-text); }
.kontaktliste__zeile { display: flex; gap: 0.85rem; align-items: flex-start; }
.kontaktliste__zeile svg { width: 19px; height: 19px; flex: none; color: var(--gold); margin-top: 4px; }
.kontaktliste__label { display: block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-weich); }

/* ---------- Leistungen und Preise ---------- */

.leistungen { background: var(--sand); }
.zitat { background: var(--salbei); }

.gruppen { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }

.gruppe h3 { font-size: 0.8125rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-text); }
.gruppe h3::after { content: ""; display: block; width: 44px; height: 1px; background: var(--gold-linie); margin-top: 0.7rem; }
.gruppe__text { margin-top: 0.9rem; color: var(--tinte-weich); font-size: 0.9375rem; }
.gruppe__posten { margin-top: 1.1rem; display: grid; }

.posten { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding-block: 0.6rem; }
.posten + .posten { border-top: 1px solid var(--linie); }
.posten__preis { color: var(--gold-text); font-variant-numeric: tabular-nums; white-space: nowrap; }

.preis-hinweise { margin-top: 2.5rem; display: grid; gap: 0.4rem; color: var(--tinte-weich); font-size: 0.875rem; }

/* ---------- Salon und Historie ---------- */

.salon__gitter { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.salon__bild { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.salon__bild img { width: 100%; height: 100%; object-fit: cover; }
.salon__text { display: grid; gap: 1.1rem; color: var(--tinte-weich); }
.salon__text p:first-child { color: var(--tinte); font-size: 1.1875rem; }

.historie { background: var(--sand); }
.zeitstrahl { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; position: relative; }
.station { position: relative; padding-top: 1.75rem; }
.station::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--gold-linie); }
.station::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 999px; background: var(--gold); }
.station__jahr { font-size: 1.5rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.station__text { margin-top: 0.4rem; color: var(--tinte-weich); font-size: 0.9375rem; }

/* ---------- Kennzahlen ---------- */

.kennzahlen__gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; text-align: center; }
.kennzahl__zahl { position: relative; display: inline-block; font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 300; color: var(--gold); line-height: 1; }
.kennzahl__wert { font-variant-numeric: tabular-nums; }
.kennzahl__vorsatz { position: absolute; right: 100%; bottom: 0.12em; margin-right: 0.22em; font-size: 0.4em; letter-spacing: 0.06em; white-space: nowrap; color: var(--tinte-weich); }
.kennzahl__label { margin-top: 0.6rem; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte-weich); }

/* ---------- Team ---------- */

.team { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--linie); }
.team__titel { font-family: "Pinyon Script", cursive; font-size: 1.9rem; font-weight: 400; padding-bottom: 0.08em; }
.steckbriefe { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.75rem; }
.steckbrief__bild { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; margin-bottom: 1.1rem; }
.steckbrief__bild img { width: 100%; height: 100%; object-fit: cover; }
.steckbrief h3 { font-size: 1.25rem; font-weight: 400; }
.steckbrief__rolle { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); margin-top: 0.25rem; }
.steckbrief__text { margin-top: 0.75rem; color: var(--tinte-weich); font-size: 0.9375rem; }

/* ---------- Partner ---------- */

.partner { background: var(--sand); }
.partner__reihe { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 4.5rem); }
.partner__reihe img {
  width: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: multiply;   /* laesst den weissen Kasten des Wella-Logos verschwinden */
}

/* Optisch angleichen: Die Marken haben unterschiedlich viel Luft in der Datei,
   gleiche Pixelhoehe wuerde sie deshalb unterschiedlich gross wirken lassen. */
.partner__reihe a { display: block; line-height: 0; transition: opacity var(--uebergang); }
.partner__reihe a:hover { opacity: 0.72; }
.partner__reihe img[src*="maria-nila"] { height: 64px; }
.partner__reihe img[src*="wella"] { height: 58px; }
.partner__reihe img[src*="olaplex"] { height: 30px; max-width: 180px; }

/* Keine Deckkraft auf den Logos: sie wuerde eine eigene Ebene erzeugen und den
   Multiply-Modus aushebeln, dann bliebe Wellas weisser Kasten sichtbar. */
.partner__name { font-size: 1.375rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte-weich); }

/* Logo in der Kopfzeile, Kleinfassung ohne "EST. 1989".
   Helle Fassung auf dunklem Grund, dunkle auf hellem. */

.kopf__logo { display: flex; align-items: center; }
.kopf__logo img { height: 52px; width: auto; }

/* ---------- Haeufige Fragen ---------- */

.fragen__liste { margin-top: 2.5rem; max-width: 46rem; }
.frage { border-top: 1px solid var(--linie); }
.frage:last-of-type { border-bottom: 1px solid var(--linie); }

.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.15rem;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  transition: color var(--uebergang);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--gold-text); }
.frage summary svg { width: 18px; height: 18px; flex: none; color: var(--gold); transition: transform var(--uebergang); }
.frage[open] summary svg { transform: rotate(180deg); }
.frage__antwort { padding-bottom: 1.25rem; color: var(--tinte-weich); }

/* ---------- Zitat, einziger Salbei-Abschnitt der Seite ---------- */

.zitat { text-align: center; }
.zitat blockquote { margin: 0; font-family: "Pinyon Script", cursive; font-size: clamp(1.9rem, 4.5vw, 2.9rem); line-height: 1.35; color: var(--tinte); max-width: 22ch; margin-inline: auto; padding-bottom: 0.1em; }
.zitat__quelle { margin-top: 1.5rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); }
.zitat__zier { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2rem; }
.zitat__zier::before, .zitat__zier::after { content: ""; width: clamp(40px, 12vw, 110px); height: 1px; background: var(--gold-linie); }
.zitat__zier svg { width: 20px; height: 20px; color: var(--gold); }

/* ---------- Anfahrt ---------- */

.anfahrt__gitter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.anschrift { font-style: normal; font-size: 1.125rem; line-height: 1.75; margin-block: 1.25rem 1.75rem; }

.karte { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand); }
.karte iframe { width: 100%; height: 100%; border: 0; display: block; }

.karte__schutz {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.9rem;
  justify-items: center;
  text-align: center;
  padding: 1.5rem;
  background: var(--sand);
  color: var(--tinte-weich);
  font-size: 0.875rem;
}

.karte__schutz svg { width: 26px; height: 26px; color: var(--gold); }

/* ---------- Fusszeile ---------- */

.fuss { background: var(--sand); border-top: 1px solid var(--linie); padding-block: 2.5rem 1.5rem; font-size: 0.9375rem; }
.fuss__gitter { display: grid; grid-template-columns: 1.2fr 1.1fr 1fr; gap: 2rem; align-items: start; }
.fuss .wortmarke { font-size: 1.5rem; align-items: flex-start; margin-bottom: 0.9rem; }
.fuss h3 { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.9rem; font-weight: 400; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; color: var(--tinte-weich); }
.fuss a { text-decoration: none; color: var(--tinte-weich); transition: color var(--uebergang); }
/* Kontaktzeilen mit denselben Symbolen wie oben im Abschnitt */
.fuss__kontakt li { display: flex; align-items: center; gap: 0.6rem; }
.fuss__kontakt svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
/* Zeitzeilen: Tage links, Zeit rechts, damit die Spalte ruhig bleibt */
.fuss__zeiten li { display: flex; justify-content: space-between; gap: 1rem; }
.fuss__zeiten li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fuss a:hover { color: var(--gold-text); }
.fuss__unten { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; color: var(--tinte-weich); font-size: 0.8125rem; }

/* ---------- Bildplatzhalter ---------- */

.platzhalter {
  display: grid;
  place-content: center;
  gap: 0.3rem;
  text-align: center;
  height: 100%;
  padding: 1rem;
  background: repeating-linear-gradient(135deg, var(--sand) 0 14px, var(--sand-hell) 14px 28px);
  border: 1px dashed var(--gold-linie);
  border-radius: var(--radius);
  color: var(--tinte-weich);
  font-size: 0.75rem;
}

.platzhalter strong { font-weight: 500; color: var(--tinte); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.6875rem; }

/* ---------- Rechtsseiten ---------- */

.recht { max-width: 68ch; }
.recht h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 300; margin-bottom: 2rem; }
/* Auf Impressum und Datenschutz zaehlt Lesbarkeit, nicht Schmuck: Diese Ueberschriften
   sind klein und in Versalien gesetzt, in der Schreibschrift waeren sie unlesbar.
   Deshalb hier ausdruecklich zurueck auf Jost. */
.recht h2 {
  font-family: "Jost", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0;
  line-height: 1.3;
}
.recht p, .recht li { color: var(--tinte-weich); }
.recht ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.recht mark { background: var(--sand); color: var(--tinte); padding: 0 0.3em; }

/* ---------- Fokus ---------- */

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Einblenden beim Scrollen ----------
   Grundzustand ist sichtbar. Erst wenn das Skript die Klasse 'js' setzt, wird ausgeblendet
   und beim Hereinscrollen wieder eingeblendet. Ohne JavaScript ist alles da. */

.js .einblenden {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.js .einblenden.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .einblenden { opacity: 1; transform: none; transition: none; }
}

/* ---------- Mobil ---------- */

@media (max-width: 900px) {
  .aufmacher__gitter,
  .kontaktliste { grid-template-columns: 1fr; }
  .zeiten__gitter,
  .gruppen,
  .salon__gitter,
  .anfahrt__gitter { grid-template-columns: 1fr; }

  .aufmacher__bild { aspect-ratio: 4 / 3; height: auto; margin-inline-start: 0; }
  .salon__bild { aspect-ratio: 4 / 3; order: -1; }
  .fuss__gitter { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .nav { display: none; }
  .mobilmenue { display: block; }
  .kopf__logo img { height: 42px; }
  .kopf__rechts { gap: 0.5rem; }
  .fuss__gitter { grid-template-columns: 1fr; }
  .aufmacher__knoepfe .knopf { flex: 1 1 auto; justify-content: center; }
  .band__spur > * { width: 150px; }
}