/* Studio SaySay: ein Stylesheet fuer alle Seiten.

   Jede Seite bindet diese Datei per <link> ein. Was nur eine einzelne Seite
   braucht, steht dort in einem kleinen <style>-Block (Elektrolyte, Hangover).
   deploy.py haengt beim Bauen ?v=<Pruefsumme> an die Adresse. Nach einer
   Aenderung laden Besucher die Datei deshalb sofort neu, obwohl der Server
   sie ein Jahr lang zwischenspeichern laesst. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Kopfzeile */
.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid #e6e6e6;
}

.bar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.mark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #000;
  text-decoration: none;
}

.bar-links { display: flex; gap: 20px; }

.bar-links a {
  font-size: 14px;
  color: #6b6b6b;
  text-decoration: none;
}

.bar-links a:hover { color: #000; }

/* Fußzeile */
.foot {
  border-top: 1px solid #e6e6e6;
  margin-top: 72px;
}

.foot-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 24px 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14px;
  color: #6b6b6b;
}

.foot nav { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.foot a { color: #6b6b6b; text-decoration: none; }
.foot a:hover { color: #000; }

a:focus-visible,
.card:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Logo und Icons */
.bar-inner, .foot-inner { align-items: center; }

.mark { display: inline-flex; align-items: center; }
.mark img { height: 48px; width: auto; display: block; }

.bar-links a, .foot nav a { display: inline-flex; align-items: center; }

.bar-links img,
.foot nav img {
  display: block;
  height: 20px;
  width: auto;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.bar-links a:hover img,
.foot nav a:hover img,
.bar-links a:focus-visible img,
.foot nav a:focus-visible img { opacity: 1; }

.foot-logo { height: 28px; width: auto; display: block; opacity: 0.55; }


/* ---------------------------------------------------------- Startseite */

/* Aufmacher */
#tassen { padding-top: 40px; }

.grid-hinweis {
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid #000;
  font-size: 16px;
  letter-spacing: -0.01em;
}

/* Abschluss: Text, dann zwei Videos */
.intro {
  padding: 96px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 20px;
}

.intro-text { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .intro {
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 28px;
    align-items: start;
  }
  .intro-text { grid-column: auto; }
}

.intro h1 {
  margin: 0;
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  font-weight: 700;
}

.intro p {
  margin: 20px 0 0;
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.5;
  color: #4a4a4a;
  letter-spacing: -0.01em;
}

.intro-link { margin-top: 18px; }

.intro-link a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.intro-link a:hover { text-decoration-thickness: 2px; }

.clip { margin: 0; }

.clip video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #f0f0f0;
}

.clip figcaption {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.clip figcaption a { color: #000; text-decoration: none; }
.clip figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 24px;
  padding-top: 40px;
}

@media (min-width: 560px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px)  { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card { display: block; text-decoration: none; color: #000; }

.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f0f0f0;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 22px;
  overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease;
}

.card:hover .tile,
.card:focus-visible .tile { background: #000; color: #fff; }

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.15s ease;
}

.card:hover .tile img { opacity: 0.88; }

.tile-text {
  text-align: center;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-weight: 700;
  hyphens: auto;
  overflow-wrap: break-word;
}

.size-m  { font-size: clamp(1.5rem, 2.7vw, 2.05rem); }
.size-s  { font-size: clamp(1.25rem, 2.1vw, 1.65rem); }
.size-xs { font-size: clamp(1.05rem, 1.7vw, 1.3rem); }

.tile-text .line2 {
  display: block;
  margin-top: 0.55em;
  font-size: 0.52em;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}


/* ------------------------------------------------------ Produktseiten */

.produkt {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 900px) {
  .produkt {
    grid-template-columns: 1fr 2fr;
    gap: 56px;
    align-items: start;
  }
}

.medien { display: grid; gap: 12px; }

.medien video,
.medien img,
.bild img {
  width: 100%;
  /* ohne height:auto wuerden die width/height-Attribute die aspect-ratio aushebeln */
  height: auto;
  display: block;
  /* Grau der Produktfotos, dadurch kein sichtbarer Rand beim Laden */
  background: var(--grund, #e7e8e6);
}

.medien video { aspect-ratio: 9 / 16; object-fit: contain; }
.medien video.quadrat { aspect-ratio: 1 / 1; object-fit: cover; }
.medien img { aspect-ratio: 1 / 1; object-fit: cover; }

.produkt-text > p,
.produkt-text > h2,
.produkt-text > h3 { max-width: 62ch; }

.produkt-text h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 700;
}

/* .produkt-text p ist spezifischer als .lead und wuerde sonst gewinnen */
.produkt-text .lead {
  margin: 20px 0 0;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

.produkt-text h2 {
  margin: 44px 0 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.produkt-text p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: #1a1a1a; }

/* Bilder im Fliesstext */
.bild { margin: 24px 0 0; max-width: 62ch; }
.bild figcaption,
.farben figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: #6b6b6b;
}

/* Farben als Slider: immer ein Bild, darunter Punkte in den Tassenfarben.
   Ohne Skript bleibt es wischbar, die Punkte erscheinen erst mit Skript. */
.slider { margin: 20px 0 0; max-width: 62ch; }

.farben {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

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

.farben li {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.farben figure { margin: 0; }

.slider-punkte {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

.slider-punkte[hidden] { display: none; }

/* 24 px Trefferflaeche, damit die Punkte auch mit dem Daumen gut sitzen */
.slider-punkte button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 50%;
  background: var(--farbe);
  cursor: pointer;
}

.slider-punkte button[aria-current="true"] { outline: 2px solid #000; outline-offset: 3px; }

.slider-punkte button:focus-visible,
.farben:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

.farben img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  background: #e7e8e6;
}

.daten {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e6e6e6;
  font-size: 15px;
  color: #4a4a4a;
}

.produkt-text .preis {
  margin: 28px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #000;
}

.produkt-text .preis-hinweis { margin: 6px 0 0; font-size: 14px; color: #6b6b6b; }

.kaufen {
  display: inline-block;
  margin-top: 14px;
  padding: 16px 28px;
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.kaufen:hover { opacity: 0.8; }

.weiter {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid #e6e6e6;
  font-size: 16px;
}

.weiter a { color: #000; text-underline-offset: 3px; }

.produkt-text .translation {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #6b6b6b;
}

/* zweite Farbvariante: Video und Foto nebeneinander */
.zweier {
  margin: 24px 0 0;
  max-width: 62ch;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.zweier video,
.zweier img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--grund, #e7e8e6);
}

.zweier figcaption {
  grid-column: 1 / -1;
  font-size: 14px;
  color: #6b6b6b;
}

.kaufen-gruppe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kaufen-gruppe .kaufen { margin-top: 0; }

.produkt-text code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: #f2f2f2;
  padding: 1px 4px;
}


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

.page { padding: 72px 0 0; max-width: 66ch; }

.page h1 {
  margin: 0 0 40px;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.page h2 {
  margin: 44px 0 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.page p, .page li { font-size: 16px; line-height: 1.6; color: #1a1a1a; }
.page p + p { margin-top: 14px; }
.page ul { margin: 12px 0 0; padding-left: 20px; }
.page li { margin-bottom: 6px; }
.page a { color: #000; text-underline-offset: 3px; }

/* dort etwas mehr Abstand zur Fusszeile */
main:has(.page) + .foot { margin-top: 96px; }


/* -------------------------------------------------- KI-Kennzeichnung */

/* Kennzeichnung: Die Produktbilder sind mit KI erstellt. Als Overlay statt
   in der Datei, damit der Kreis auf jeder Bildgroesse gleich klein bleibt. */
.ki { position: relative; display: block; }

.ki::after,
.tile:has(img)::after {
  content: "AI";
  content: "AI" / "Mit KI erstellt";
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  color: #000;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

/* Englische Seiten: dieselbe Kennzeichnung, englisch vorgelesen */
:lang(en) .ki::after,
:lang(en) .tile:has(img)::after { content: "AI" / "Made with AI"; }

/* Bei Videos sitzt der Kreis oben, unten liegt die Steuerleiste */
.ki-oben::after { top: 6px; bottom: auto; }

/* KI-Kreis ausgeblendet. Wieder einschalten: python3 _werkzeug/ki-kreis.py an */
.ki::after,
.tile:has(img)::after { display: none; }