/* ============================================================
   digitalantrieb / 13 - FIGUREN

   Die Unterseiten waren reiner Text. Das liest sich gut und
   zeigt nichts. Hier kommen Bilder dazu - aber keine Fotos.

   ------------------------------------------------------------
   WARUM GEZEICHNET UND NICHT FOTOGRAFIERT
   ------------------------------------------------------------
   Drei Gruende, in dieser Reihenfolge:

   1. KEINE FREMDEN ANFRAGEN. Diese Figuren sind HTML und CSS.
      Es gibt keine Datei zu laden, also auch keinen fremden
      Server, der eine IP-Adresse mitbekommt.
   2. KEINE LIZENZFRAGE. Nichts davon gehoert jemand anderem.
      Keine Nutzungsrechte, keine abgebildeten Personen, keine
      Bildnachweise.
   3. SIE ZEIGEN DIE SACHE SELBST. Ein Stockfoto von einem
      Laptop erklaert nichts ueber Local SEO. Ein nachgebauter
      Kartenausschnitt schon. Ein Bild, das den Gegenstand
      zeigt, ist einem Symbolbild immer ueberlegen.

   Nebenbei wiegt das alles zusammen weniger als ein einziges
   Foto: rund 9 KB CSS statt 200 KB JPEG.

   ------------------------------------------------------------
   ZUR BEWEGUNG
   ------------------------------------------------------------
   Jede Figur hat eine kleine Eigenbewegung, die etwas AUSSAGT:
   der Balken fuellt sich, weil Ladezeit vergeht; die Eintraege
   im Kartenausschnitt kommen nacheinander, weil Google sie
   nacheinander ausliefert. Bewegung ohne Aussage ist hier
   keine drin.

   Alles laeuft erst, wenn die Figur im Bild ist (siehe
   scripts/reveal-lite.js), und gar nicht bei reduzierter
   Bewegung.
   ============================================================ */

.figur {
  margin: var(--stack-3) 0 var(--stack-4);
  max-width: 42rem;
}
.figur--breit { max-width: none; }

.figur__bu {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--on-stage-2);
  margin-top: var(--stack-2);
  max-width: 38rem;
}
.figur__bu b { color: var(--chalk); }

/* ------------------------------------------------------------
   1. SUCHERGEBNIS

   Nachgebaut, nicht abfotografiert: Ein Bildschirmfoto von
   Google waere fremdes Material und in sechs Monaten veraltet.
   ------------------------------------------------------------ */
.serp {
  border: var(--hair) solid var(--rule);
  background: var(--surface);
  padding: var(--stack-2);
}

.serp__feld {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-round);
  padding: 0.6rem 1rem;
  background: var(--stage);
  font-family: var(--font-text);
  font-size: var(--t-sm);
  color: var(--chalk);
  margin-bottom: var(--stack-2);
}
.serp__feld svg { width: 16px; height: 16px; flex: none; color: var(--on-stage-2); }

/* Der Schreib-Effekt: die Suchanfrage tippt sich selbst. Sie
   steht als echter Text im Markup und wird per clip sichtbar
   gemacht - so liest ein Screenreader die ganze Anfrage, auch
   wenn das Auge sie erst entstehen sieht. */
.serp__wort {
  white-space: nowrap;
  overflow: hidden;
}
.is-sichtbar .serp__wort {
  animation: tippen 1.6s steps(28, end) 0.2s both;
}
@keyframes tippen { from { max-width: 0; } to { max-width: 22rem; } }

.serp__treffer { display: grid; gap: 0.85rem; }

.treffer {
  padding: 0.7rem 0.85rem;
  border: var(--hair) solid transparent;
  border-radius: var(--r-1);
}
.treffer__url { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--on-stage-2); }
.treffer__titel { font-size: 1rem; color: #8AB4F8; margin: 0.15rem 0 0.2rem; }
.treffer__text { font-size: var(--t-sm); color: var(--on-stage-2); line-height: 1.45; }

/* Der eigene Treffer hebt sich ab. Ohne Erklaerung waere das
   Angeberei, deshalb steht die Marke daneben. */
.treffer--du {
  border-color: var(--signal);
  background: color-mix(in srgb, var(--signal) 7%, transparent);
  position: relative;
}
.treffer--du::after {
  content: "Ihre Seite";
  position: absolute;
  top: -0.6rem; right: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--signal);
  padding: 0.12rem 0.5rem;
}

.is-sichtbar .serp__treffer > * { animation: auftauchen 0.5s var(--e-out) both; }
.is-sichtbar .serp__treffer > :nth-child(1) { animation-delay: 1.7s; }
.is-sichtbar .serp__treffer > :nth-child(2) { animation-delay: 1.85s; }
.is-sichtbar .serp__treffer > :nth-child(3) { animation-delay: 2.0s; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------
   2. KARTENAUSSCHNITT

   Die drei Plaetze, um die es bei Local SEO geht. Die Karte
   ist ein CSS-Verlauf mit Strassenraster, kein Kartendienst:
   eine eingebettete Karte waere genau die fremde Anfrage, die
   diese Seite vermeidet.
   ------------------------------------------------------------ */
.pack { border: var(--hair) solid var(--rule); background: var(--surface); overflow: hidden; }

.pack__karte {
  height: 8.5rem;
  position: relative;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, color-mix(in srgb, var(--chalk) 7%, transparent) 38px 40px),
    repeating-linear-gradient(0deg,  transparent 0 30px, color-mix(in srgb, var(--chalk) 7%, transparent) 30px 32px),
    color-mix(in srgb, var(--chalk) 3%, var(--stage));
  border-bottom: var(--hair) solid var(--rule);
}
/* Eine diagonale Ausfallstrasse, damit das Raster nicht wie
   Millimeterpapier wirkt. */
.pack__karte::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 46%, color-mix(in srgb, var(--chalk) 10%, transparent) 46% 49%, transparent 49%);
}

.pack__nadel {
  position: absolute;
  width: 13px; height: 13px;
  border-radius: 50% 50% 50% 0;
  background: var(--signal);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
}
.pack__nadel--1 { left: 22%; top: 38%; }
.pack__nadel--2 { left: 52%; top: 24%; }
.pack__nadel--3 { left: 71%; top: 58%; }
.is-sichtbar .pack__nadel { animation: nadel 0.45s var(--e-out) both; }
.is-sichtbar .pack__nadel--1 { animation-delay: 0.25s; }
.is-sichtbar .pack__nadel--2 { animation-delay: 0.4s; }
.is-sichtbar .pack__nadel--3 { animation-delay: 0.55s; }
@keyframes nadel { from { transform: rotate(-45deg) scale(0); } 60% { transform: rotate(-45deg) scale(1.25); } to { transform: rotate(-45deg) scale(1); } }

.pack__liste { display: grid; }
.pack__eintrag {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  padding: 0.75rem var(--stack-2);
  border-bottom: var(--hair) solid var(--rule);
}
.pack__eintrag:last-child { border-bottom: 0; }
.pack__nr { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--signal); }
.pack__name { color: var(--chalk); font-size: 0.9375rem; }
.pack__meta { grid-column: 2 / -1; font-size: var(--t-sm); color: var(--on-stage-2); }
.pack__sterne { color: var(--signal); font-size: var(--t-sm); letter-spacing: 0.08em; white-space: nowrap; }

.is-sichtbar .pack__eintrag { animation: auftauchen 0.45s var(--e-out) both; }
.is-sichtbar .pack__eintrag:nth-child(1) { animation-delay: 0.3s; }
.is-sichtbar .pack__eintrag:nth-child(2) { animation-delay: 0.45s; }
.is-sichtbar .pack__eintrag:nth-child(3) { animation-delay: 0.6s; }

/* ------------------------------------------------------------
   3. LADEZEIT

   Zwei Balken, die tatsaechlich unterschiedlich lange
   brauchen. Die Dauer der Animation IST die Aussage: der eine
   ist nach 1,8 Sekunden fertig, der andere nach 4,6.
   ------------------------------------------------------------ */
.tempo { display: grid; gap: var(--stack-2); }
.tempo__zeile { display: grid; gap: 0.4rem; }
.tempo__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--t-sm); }
.tempo__kopf b { color: var(--chalk); }
.tempo__kopf span { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--on-stage-2); }
.tempo__bahn { height: 10px; background: var(--surface-2); border: var(--hair) solid var(--rule); overflow: hidden; }
.tempo__fuellung { height: 100%; width: 0; background: var(--signal); }
.tempo__fuellung--lahm { background: color-mix(in srgb, var(--chalk) 30%, transparent); }
.is-sichtbar .tempo__fuellung { animation: fuellen 1.8s linear 0.2s both; }
.is-sichtbar .tempo__fuellung--lahm { animation-duration: 4.6s; }
@keyframes fuellen { from { width: 0; } to { width: 100%; } }

/* ------------------------------------------------------------
   4. UMZUG

   Alte Adressen links, neue rechts, Pfeile dazwischen. Das ist
   der ganze Inhalt eines Weiterleitungsplans - und die eine
   Sache, die beim Relaunch am haeufigsten vergessen wird.
   ------------------------------------------------------------ */
.umzug { display: grid; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--t-sm); }
.umzug__zeile {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem;
  align-items: center;
  border: var(--hair) solid var(--rule);
  background: var(--surface);
  padding: 0.6rem 0.75rem;
}
.umzug__alt { color: var(--on-stage-2); text-decoration: line-through; overflow: hidden; text-overflow: ellipsis; }
.umzug__neu { color: var(--chalk); overflow: hidden; text-overflow: ellipsis; }
.umzug__pfeil { color: var(--signal); font-size: var(--t-meta); letter-spacing: var(--track-meta); white-space: nowrap; }
.umzug__zeile--tot .umzug__neu { color: #E0574A; }
.umzug__zeile--tot .umzug__pfeil { color: #E0574A; }

.is-sichtbar .umzug__zeile { animation: auftauchen 0.45s var(--e-out) both; }
.is-sichtbar .umzug__zeile:nth-child(1) { animation-delay: 0.1s; }
.is-sichtbar .umzug__zeile:nth-child(2) { animation-delay: 0.22s; }
.is-sichtbar .umzug__zeile:nth-child(3) { animation-delay: 0.34s; }
.is-sichtbar .umzug__zeile:nth-child(4) { animation-delay: 0.46s; }

@media (max-width: 34rem) {
  .umzug__zeile { grid-template-columns: 1fr; gap: 0.2rem; }
  .umzug__pfeil { font-size: 0.6rem; }
}

/* ------------------------------------------------------------
   5. SEITENAUFBAU

   Ein Stapel Bloecke, der zeigt, was auf einer Seite
   uebereinanderliegt. Links eine Seite, rechts mehrere.
   ------------------------------------------------------------ */
.aufbau { display: grid; gap: var(--stack-2); }
@media (min-width: 44rem) { .aufbau { grid-template-columns: 1fr 1fr; } }

.aufbau__saeule { border: var(--hair) solid var(--rule); background: var(--surface); padding: var(--stack-2); }
.aufbau__titel {
  font-family: var(--font-mono); font-size: var(--t-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--on-stage-2); margin-bottom: 0.75rem;
}
.aufbau__block {
  border: var(--hair) solid var(--rule);
  background: var(--stage);
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.4rem;
  font-size: var(--t-sm);
  color: var(--on-stage-2);
  display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline;
}
.aufbau__block:last-child { margin-bottom: 0; }
.aufbau__block b { color: var(--chalk); font-weight: 500; }
.aufbau__block em { font-family: var(--font-mono); font-size: var(--t-meta); font-style: normal; color: var(--signal); }
.aufbau__block--leer { border-style: dashed; opacity: 0.55; }

.is-sichtbar .aufbau__block { animation: auftauchen 0.4s var(--e-out) both; }
.is-sichtbar .aufbau__block:nth-child(2) { animation-delay: 0.08s; }
.is-sichtbar .aufbau__block:nth-child(3) { animation-delay: 0.16s; }
.is-sichtbar .aufbau__block:nth-child(4) { animation-delay: 0.24s; }
.is-sichtbar .aufbau__block:nth-child(5) { animation-delay: 0.32s; }
.is-sichtbar .aufbau__block:nth-child(6) { animation-delay: 0.40s; }

/* ------------------------------------------------------------
   6. BEFUND

   Die Maengelliste aus dem Audit, nach Schwere sortiert. Der
   Punkt links traegt die Farbe, das Wort daneben die Bedeutung:
   Farbe allein waere fuer Farbfehlsichtige keine Information.
   ------------------------------------------------------------ */
.befund { border-top: var(--hair) solid var(--rule); }
.befund__zeile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: var(--hair) solid var(--rule);
  font-size: var(--t-sm);
}
.befund__punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.befund__punkt--hoch { background: #E0574A; }
.befund__punkt--mittel { background: var(--signal); }
.befund__punkt--klein { background: #7A8B84; }
.befund__text { color: var(--chalk); }
.befund__grad {
  font-family: var(--font-mono); font-size: var(--t-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--on-stage-2); white-space: nowrap;
}

.is-sichtbar .befund__zeile { animation: auftauchen 0.4s var(--e-out) both; }
.is-sichtbar .befund__zeile:nth-child(1) { animation-delay: 0.05s; }
.is-sichtbar .befund__zeile:nth-child(2) { animation-delay: 0.14s; }
.is-sichtbar .befund__zeile:nth-child(3) { animation-delay: 0.23s; }
.is-sichtbar .befund__zeile:nth-child(4) { animation-delay: 0.32s; }
.is-sichtbar .befund__zeile:nth-child(5) { animation-delay: 0.41s; }

/* ------------------------------------------------------------
   7. ZAHL, DIE HOCHLAEUFT
   ------------------------------------------------------------ */
.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: var(--hair) solid var(--rule);
  margin: var(--stack-3) 0 var(--stack-4);
}
.zahl { background: var(--stage); padding: var(--stack-2); }
.zahl b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1;
  letter-spacing: var(--track-lg);
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.zahl span { display: block; font-size: var(--t-sm); color: var(--on-stage-2); margin-top: 0.4rem; line-height: 1.4; }

/* ------------------------------------------------------------
   FOTOS

   Wo ein Foto mehr sagt als eine Zeichnung, steht eins - aus
   assets/img, also vom eigenen Server.
   ------------------------------------------------------------ */
.foto {
  margin: var(--stack-3) 0 var(--stack-4);
  border: var(--hair) solid var(--rule);
  overflow: hidden;
  background: var(--surface);
}
.foto img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) sepia(0.3) hue-rotate(185deg) saturate(1.6) brightness(1.15);
  transform: scale(1.04);
  transition: transform 1.2s var(--e-out), filter 1.2s var(--e-out);
}
.foto.is-sichtbar img { transform: scale(1); }

/* ------------------------------------------------------------
   REDUZIERTE BEWEGUNG

   Alles steht sofort und vollstaendig. Die Figuren sind keine
   Dekoration: Wer keine Bewegung will, muss trotzdem den
   Kartenausschnitt und die Balken sehen.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .is-sichtbar .serp__wort,
  .is-sichtbar .serp__treffer > *,
  .is-sichtbar .pack__nadel,
  .is-sichtbar .pack__eintrag,
  .is-sichtbar .tempo__fuellung,
  .is-sichtbar .umzug__zeile,
  .is-sichtbar .aufbau__block,
  .is-sichtbar .befund__zeile {
    animation: none !important;
  }
  .serp__wort { max-width: none; }
  .pack__nadel { transform: rotate(-45deg) scale(1); }
  .tempo__fuellung { width: 100%; }
  .foto img { transform: none; transition: none; }
}