/* ============================================================
   Fanseite · fan.css
   Liegt ueber der style.css der SLAPP-Seite und aendert daran nichts.
   Hier steht nur, was es auf der Shopseite nicht gibt:
   1 Akzentfarbe der Person · 2 Kaufknoepfe als Links
   3 Signature Piece · 4 Teaser auf die anderen Stuecke · 5 Kleinkram
   ============================================================ */

/* ---------- 1 Akzent ----------
   Die Handabdruecke sind der einzige Farbakzent der Seite. Ihre Farbe kommt
   aus dem Shirt der Person, nicht aus einer Palette. Die Abdruecke, die in
   der style.css ein eigenes --farbe gesetzt bekommen, bleiben wie sie sind:
   sie sind die bunten Spritzer vom Shirt und sollen bunt bleiben. */
:root {
  --hand: #bcf022;
  /* Fuer kleine Flaechen: der Akzent nur dann, wenn er auf Weiss ueberhaupt
     zu sehen ist. Acid Green hat gegen Weiss keinen Kontrast, ein 13 px
     kleiner Abdruck darin sieht aus wie ein Fehler. bauen.py rechnet das
     Kontrastverhaeltnis aus und setzt hier entweder die Farbe oder Schwarz. */
  --akzent-klein: #0b0b0b;
}

/* ---------- 2 Kaufknoepfe sind Links, keine Schaltflaechen ----------
   Auf dieser Seite wird nichts in einen Warenkorb gelegt, jeder Knopf fuehrt
   in den Shop. Als <a> fehlen gegenueber <button> nur Zentrierung und die
   fehlende Unterstreichung. */
a.bestellen, a.stueck__knopf, .kopf__nav a.knopf-klein {
  text-align: center; text-decoration: none;
}
a.bestellen { box-sizing: border-box; }
.bestellen--mitte { max-width: 460px; margin-inline: auto; }

/* Der Hinweis unter einem Kaufknopf gehoert zum Knopf, nicht zum Abstand
   danach. Ohne das haengt er mitten in der Luft. */
.bestellen + .hinweis { margin-top: 12px; }
.final .hinweis { text-align: center; }

/* Das Statement im schwarzen Band ist .gross.zwei und darf nicht umbrechen.
   Die Vorgabe aus der style.css (clamp(2.6rem, 10.5vw, 9.5rem)) ist auf
   "Slapped." mit 8 Zeichen gerechnet. Zehn Zeichen laufen damit bei 320 und
   360 px aus dem Kasten, nachgemessen 336 px Inhalt in 320 px Fenster.
   Diese Werte tragen 10 Zeichen bis hinunter zu 320 px. */
.band .gross.zwei { font-size: clamp(2.2rem, 10.8vw, 9.5rem); }

/* ---------- 2b Bezugsrahmen fuer die Handabdruecke ----------
   Die Abdruecke sind position: absolute. Ihren Bezugsrahmen setzt die
   style.css namentlich: `.hero, #story, #look, #clips, #stuecke, #people,
   .custom, #bestellen { position: relative }`. Diese Seite hat eigene
   Abschnittsnamen, also greift die Regel dort nicht, und die Abdruecke
   haengen sich an den Seitenkoerper: sie rutschen ans Seitenende und
   ziehen die Seite um mehrere tausend Pixel auf. Nachgemessen, die Seite
   war 10.950 statt 6.500 Pixel hoch.
   Jeder neue Abschnitt mit einem Abdruck gehoert in diese beiden Zeilen. */
#shirt, #drop, #kaufen { position: relative; }
#shirt > *:not(.hand), #drop > *:not(.hand),
#kaufen > *:not(.hand) { position: relative; z-index: 1; }

/* ---------- 3 Signature Piece ----------
   Das Stueck der Person, einmal gross. Bild links, Text rechts, auf dem
   Handy untereinander. Das Gitter ist absichtlich anders herum gewichtet
   als im Hero, damit die beiden Abschnitte sich nicht doppeln. */
.signatur__name {
  margin-bottom: clamp(26px, 4vw, 48px);
  font-size: clamp(2.3rem, 7.2vw, 6rem);
}
.signatur__nr {
  display: block; margin-bottom: 10px;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--grau);
  line-height: 1.4; letter-spacing: 0.22em;
}

.signatur__gitter {
  display: grid; gap: clamp(28px, 4.5vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.signatur__bild { max-height: min(60vh, 620px); justify-self: center; }
.signatur__text { max-width: 620px; }

.merkmale {
  margin: clamp(22px, 3vw, 30px) 0 0; padding: 0; list-style: none;
  display: grid; gap: 10px;
}
.merkmale li {
  position: relative; padding-left: 26px;
  font-size: 0.95rem; color: var(--grau);
}
/* Kein Punkt und kein Haken aus einer Icon-Schrift: ein kleiner Abdruck in
   der Akzentfarbe, dieselbe Maske wie die grossen Haende. */
.merkmale li::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 13px; height: 15px; background: var(--akzent-klein);
  -webkit-mask-image: url('haende/hand-1.webp'); mask-image: url('haende/hand-1.webp');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  transform: rotate(-9deg);
}

.signatur__preis {
  margin: clamp(26px, 3.4vw, 36px) 0 0;
  font-weight: 800; font-stretch: 108%; letter-spacing: -0.03em;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1;
}

/* ---------- 4 Teaser auf die anderen Stuecke ----------
   Zwei Karten statt der drei im Shop, deshalb ein eigenes Gitter. Alles
   andere erben sie von .stueck aus der style.css, damit die Karten auf
   beiden Seiten identisch aussehen. */
.teaser__gitter {
  display: grid; gap: clamp(22px, 3vw, 44px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(32px, 4vw, 56px);
}
.teaser .stueck__text { margin-bottom: 0; }
.teaser .stueck__knopf { margin-top: auto; }
/* .stueck ist ein Flex-Stapel; damit der Knopf unten buendig sitzt, muss der
   Inhalt den Rest der Hoehe bekommen. */
.teaser .stueck__inhalt { padding-top: clamp(14px, 2vw, 20px); }

/* ---------- 5 Kleinkram ---------- */
/* In der style.css verschwindet ab 860 px die komplette Navigation, weil dort
   der Warenkorbknopf ein <button> ist und uebrig bleibt. Hier ist der Weg in
   den Shop ein <a> und wuerde mit verschwinden. Er muss bleiben, sonst kommt
   man vom Handy aus dem Kopf heraus nirgendwo hin. */
@media (max-width: 860px) {
  .kopf__nav a.knopf-klein {
    display: inline-flex; align-items: center;
    padding: 12px 18px; letter-spacing: 0.14em;
  }
}

/* Die Wortmarke ersetzt das Logo im Kopf: die Seite gehoert der Person,
   das SLAPP-Logo steht dafuer unten im Fuss und fuehrt in den Shop. */
.wortmarke { color: inherit; }
.wortmarke:hover { opacity: .55; }

.schluss__logo { height: 96px; width: auto; }
.schluss__claim {
  margin-top: clamp(16px, 2vw, 24px);
  font-size: clamp(1.6rem, 3.6vw, 3rem);
}

/* Auf der Shopseite blendet das drehende Shirt diesen Abdruck aus, hier gibt
   es kein Shirt in der Ueberschrift. Er darf also bleiben.

   Die Groesse ist nachgemessen, nicht geschaetzt: eine Zeile belegt rund
   0,66 x Zeichenzahl x Schriftgroesse an Breite (Archivo 800, Versalien).
   Zur Verfuegung stehen 0,9 x Fensterbreite, bei 320 px nur 280 px.
   Bei 11 Zeichen passt damit 11,2vw, bei 2,1rem Untergrenze und 9,5rem oben.
   .zwei verbietet den Umbruch, deshalb MUSS das passen, sonst laeuft die
   Zeile rechts aus dem Bild. bauen.py rechnet es bei jedem Bau nach. */
.hero h1.zwei {
  margin-bottom: clamp(30px, 5vw, 60px);
  font-size: clamp(2.1rem, 11.2vw, 9.5rem);
}

@media (max-width: 980px) {
  .signatur__gitter { grid-template-columns: minmax(0, 1fr); }
  .signatur__bild { max-height: 62vh; }
  .signatur__text { max-width: none; }
}

@media (max-width: 680px) {
  .teaser__gitter { grid-template-columns: minmax(0, 1fr); }
  .schluss__logo { height: 72px; }
}

/* Solange das Porträt fehlt, steht die Story allein und läuft nicht über die volle Breite */
.story__gitter--ohne-bild { grid-template-columns: minmax(0, 1fr); max-width: 760px; }