/* ═══════════════════════════════════════════════════════════════
 * HOHL.ROCKS – PORTFOLIO-LOOPS
 * Jede Projektkarte zeigt in 6 Sekunden, was das Projekt tut:
 * drei Takte zu je 2 s, schematisch, ohne Bild- oder Videodatei.
 * Gehört zu js/portfolio-loops.js (pausiert Loops außerhalb des
 * Sichtfelds). Ohne Umbau entfernbar: diese Datei, das Skript und
 * die .pl-loop-Blöcke in index.html löschen.
 *
 * Grundregel: Die Grundstile zeigen das Endbild (Takt 3). Bei
 * prefers-reduced-motion bleibt genau dieses Bild stehen.
 * ═══════════════════════════════════════════════════════════════ */

.pl-loop {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0 0 1.1rem;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(0, 26, 104, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

/* Der Live-Punkt der Karte sitzt über der Loop-Ecke */
.portfolio-card .portfolio-card-status {
  z-index: 1;
}

/* Alle Teile laufen im selben 6-s-Takt */
.pl-loop * {
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

/* Außerhalb des Sichtfelds oder im Hintergrund-Tab: anhalten */
.pl-loop.pl-aus * {
  animation-play-state: paused;
}

/* Die ganze Bühne blendet am Ende aus und am Anfang ein */
.pl-buehne {
  position: absolute;
  inset: 0;
  padding: 14px 16px;
  animation-name: pl-buehne;
}

@keyframes pl-buehne {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}

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

/* ───────────────────────────────────────────────────────────────
 * achtung.live – sensible Daten vor dem Senden erkennen
 * Takt 1: IBAN tippt sich ein. Takt 2: rot markiert, Kategorie.
 * Takt 3: durch [IBAN] ersetzt, "Keine sensiblen Daten erkannt."
 * Begriffe aus achtung-live-frontend (index.html, locales/en.json).
 * ─────────────────────────────────────────────────────────────── */

.pl-achtung .pl-nachricht {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pl-achtung .pl-zeile {
  display: block;
  color: rgba(255, 255, 255, 0.6);
}

.pl-achtung .pl-iban {
  position: relative;
  display: inline-block;
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  white-space: nowrap;
}

.pl-achtung .pl-iban-roh {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 4px;
  opacity: 0;
  animation-name: pl-iban-roh;
  animation-timing-function: steps(28, end);
}

@keyframes pl-iban-roh {
  0%   { opacity: 1; clip-path: inset(0 100% 0 0); background: transparent; }
  5%   { opacity: 1; clip-path: inset(0 100% 0 0); background: transparent; }
  30%  { opacity: 1; clip-path: inset(0 0 0 0); background: transparent; }
  36%  { opacity: 1; clip-path: inset(0 0 0 0); background: rgba(239, 68, 68, 0.35); }
  64%  { opacity: 1; clip-path: inset(0 0 0 0); background: rgba(239, 68, 68, 0.35); }
  68%  { opacity: 0; clip-path: inset(0 0 0 0); background: rgba(239, 68, 68, 0.35); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); background: transparent; }
}

.pl-achtung .pl-iban-neu {
  position: absolute;
  left: 0;
  top: 0;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(74, 222, 128, 0.18);
  color: #fff;
  animation-name: pl-einblenden-spaet;
}

.pl-achtung .pl-kategorie {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.22);
  border: 1px solid rgba(239, 68, 68, 0.55);
  color: #fecaca;
  font-size: 11px;
  opacity: 0;
  animation-name: pl-kategorie;
}

@keyframes pl-kategorie {
  0%, 34% { opacity: 0; transform: translateY(4px); }
  38%     { opacity: 1; transform: translateY(0); }
  64%     { opacity: 1; transform: translateY(0); }
  68%     { opacity: 0; transform: translateY(0); }
  100%    { opacity: 0; }
}

.pl-achtung .pl-ok {
  position: absolute;
  left: 16px;
  bottom: 16px;
  color: #bbf7d0;
  font-size: 11.5px;
  animation-name: pl-einblenden-spaet;
}

.pl-achtung .pl-ok-haken {
  color: #4ade80;
  font-weight: 700;
  margin-right: 4px;
}

/* Takt 3: erscheint bei 4 s und bleibt bis zum Ausblenden */
@keyframes pl-einblenden-spaet {
  0%, 66% { opacity: 0; }
  70%     { opacity: 1; }
  100%    { opacity: 1; }
}

/* ───────────────────────────────────────────────────────────────
 * nah.jetzt – die Notfall-App, die sich an die Panik anpasst
 * Im Look der Seite (hell, Blau-Türkis). Texte von der Startseite
 * (Stand 2026-09-23, Screenshots von Wolf): "Erkennt Panik über
 * Sensorik und vereinfacht die UI automatisch: größere Buttons,
 * weniger Optionen, beruhigende Führung." "112-Notruf" und
 * "Herzstillstand" (eines der 20 Szenarien) stehen dort ebenfalls.
 * Takt 1: normale Oberfläche, viele kleine Optionen.
 * Takt 2: "Panik erkannt". Takt 3: zwei große Buttons.
 * ─────────────────────────────────────────────────────────────── */

.pl-nah .pl-buehne {
  display: grid;
  grid-template-columns: 78px 1fr;
  column-gap: 12px;
  align-items: center;
  background: #f5f8fc;
  color: #1e293b;
}

.pl-nah .pl-handy {
  position: relative;
  height: 118px;
  padding: 8px 6px;
  border-radius: 10px;
  border: 2px solid #1e293b;
  background: #fff;
}

/* Normale Oberfläche: sechs kleine Optionen */
.pl-nah .pl-optionen {
  display: grid;
  gap: 4px;
  animation-name: pl-nah-optionen;
}

.pl-nah .pl-optionen > i {
  height: 9px;
  border-radius: 2px;
  background: #e2e8f0;
}

@keyframes pl-nah-optionen {
  0%, 60% { opacity: 1; }
  66%, 100% { opacity: 0; }
}

.pl-nah .pl-optionen {
  opacity: 0;
}

/* Vereinfachte Oberfläche: zwei große Buttons */
.pl-nah .pl-gross {
  position: absolute;
  inset: 8px 6px;
  display: grid;
  gap: 6px;
  animation-name: pl-einblenden-spaet;
}

.pl-nah .pl-gross > span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #fff;
  padding: 0 3px;
  font-size: 8.5px;
  font-weight: 800;
  text-align: center;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.pl-nah .pl-gross > span:first-child { background: #dc2626; }
.pl-nah .pl-gross > span:last-child  { background: linear-gradient(135deg, #2563eb, #0d9488); }

/* Sensorik: ein Puls um das Handy, solange Panik erkannt wird */
.pl-nah .pl-handy::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  border: 2px solid #0d9488;
  opacity: 0;
  animation-name: pl-nah-puls;
}

@keyframes pl-nah-puls {
  0%, 32% { opacity: 0; transform: scale(1); }
  38%     { opacity: 0.9; transform: scale(1); }
  48%     { opacity: 0; transform: scale(1.08); }
  50%     { opacity: 0.9; transform: scale(1); }
  60%     { opacity: 0; transform: scale(1.08); }
  100%    { opacity: 0; }
}

.pl-nah .pl-nah-text {
  display: grid;
  gap: 6px;
}

.pl-nah .pl-nah-titel {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.pl-nah .pl-nah-titel em {
  font-style: normal;
  background: linear-gradient(90deg, #2563eb, #0d9488);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pl-nah .pl-nah-panik {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ccfbf1;
  color: #0f766e;
  font-size: 9.5px;
  font-weight: 700;
  animation-name: pl-einblenden-mitte-nah;
}

@keyframes pl-einblenden-mitte-nah {
  0%, 34% { opacity: 0; }
  38%     { opacity: 1; }
  100%    { opacity: 1; }
}

.pl-nah .pl-nah-folge {
  font-size: 9.5px;
  line-height: 1.4;
  color: #475569;
  animation-name: pl-einblenden-spaet;
}

/* ───────────────────────────────────────────────────────────────
 * nichts-geschenkt.de – das Denkatelier
 * Im Look der Seite (Creme, Rot, Serife). Texte von der Startseite
 * (Stand 2026-09-23, Screenshot von Wolf).
 * Takt 1: "Wo fängst du an?" und die drei Einstiege.
 * Takt 2: der erste Einstieg wird gewählt.
 * Takt 3: "Erst du, dann die KI."
 * ─────────────────────────────────────────────────────────────── */

.pl-geschenkt .pl-buehne {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #f2eadf;
  color: #1a1a1a;
}

.pl-geschenkt .pl-frage-wo {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b635a;
  margin-bottom: 2px;
}

.pl-geschenkt .pl-einstieg {
  padding: 4px 8px;
  border: 1.5px solid #1a1a1a;
  box-shadow: 2px 2px 0 #1a1a1a;
  background: #fbf7f0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation-name: pl-einstieg;
}

.pl-geschenkt .pl-einstieg:nth-of-type(3) { animation-name: pl-einstieg-2; }
.pl-geschenkt .pl-einstieg:nth-of-type(4) { animation-name: pl-einstieg-3; }

@keyframes pl-einstieg   { 0%, 5%  { opacity: 0; transform: translateY(4px); } 10%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes pl-einstieg-2 { 0%, 10% { opacity: 0; transform: translateY(4px); } 15%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes pl-einstieg-3 { 0%, 15% { opacity: 0; transform: translateY(4px); } 20%, 100% { opacity: 1; transform: translateY(0); } }

/* Die Wahl: der erste Einstieg färbt sich rot */
.pl-geschenkt .pl-einstieg.pl-gewaehlt {
  background: #9b1b1e;
  color: #fff;
  animation-name: pl-einstieg, pl-gewaehlt;
}

@keyframes pl-gewaehlt {
  0%, 36% { background: #fbf7f0; color: #1a1a1a; }
  40%     { background: #9b1b1e; color: #fff; }
  100%    { background: #9b1b1e; color: #fff; }
}

.pl-geschenkt .pl-pfeil {
  color: #9b1b1e;
}

.pl-geschenkt .pl-gewaehlt .pl-pfeil {
  color: #fff;
  animation-name: pl-pfeil-weiss;
}

@keyframes pl-pfeil-weiss {
  0%, 36% { color: #9b1b1e; }
  40%, 100% { color: #fff; }
}

.pl-geschenkt .pl-prinzip {
  margin-top: auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
  animation-name: pl-einblenden-spaet;
}

/* ───────────────────────────────────────────────────────────────
 * kerstingeffert.de – Webdesign
 * Hier ist das Design selbst das Produkt, deshalb ein echtes Bild:
 * images/loop-kerstingeffert.jpg, oberer Teil der Startseite, aus
 * dem Repo kerstin-press-site lokal gerendert (2026-09-23).
 * Takt 1: graue Platzhalterblöcke. Takt 2: die echte Seite.
 * Takt 3: langsamer Schwenk nach unten. Einverständnis von Kerstin
 * Geffert liegt vor (Wolf, 2026-09-23).
 * ─────────────────────────────────────────────────────────────── */

.pl-kerstin .pl-buehne {
  padding: 0;
}

.pl-kerstin .pl-skizze {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  grid-template-rows: 22% 1fr;
  gap: 8px;
  padding: 10px;
  background: #f4f4f4;
  opacity: 0;
  animation-name: pl-skizze;
}

.pl-kerstin .pl-skizze > i {
  border-radius: 4px;
  background: #d9d9d9;
}

.pl-kerstin .pl-skizze > i:first-child {
  grid-column: 1 / -1;
  width: 50%;
  justify-self: center;
  background: #e3e3e3;
}

@keyframes pl-skizze {
  0%, 26% { opacity: 1; }
  34%     { opacity: 0; }
  100%    { opacity: 0; }
}

.pl-kerstin .pl-seite-bild {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  transform: translateY(-28%);
  animation-name: pl-seite-schwenk;
  animation-timing-function: ease-in-out;
}

@keyframes pl-seite-schwenk {
  0%, 38% { transform: translateY(0); }
  88%     { transform: translateY(-28%); }
  100%    { transform: translateY(-28%); }
}

/* ───────────────────────────────────────────────────────────────
 * ki-sicherheit.jetzt – der KI-Check-Report
 * Im Look der Seite (Navy-Kopf, weiß, Serife). Texte wörtlich von
 * der Startseite (Stand 2026-09-23, Screenshot von Wolf); die
 * Häkchen-Zeilen sind die Satzanfänge der echten Punkte.
 * Kein TÜV-Prüfzeichen, kein Logo – nur Text.
 * Takt 1: "Zertifiziert. Dokumentiert. KI-konform."
 * Takt 2: drei Häkchen. Takt 3: "Jetzt KI-Check starten →".
 * ─────────────────────────────────────────────────────────────── */

.pl-kis .pl-buehne {
  padding: 0;
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-rows: 20px 1fr auto;
  column-gap: 10px;
  background: #fff;
  color: #0f1b35;
}

.pl-kis .pl-kis-kopf {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #14213d;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
}

.pl-kis .pl-kis-titel {
  align-self: center;
  padding-left: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.pl-kis .pl-kis-titel > span {
  display: block;
  animation-name: pl-einstieg;
}

.pl-kis .pl-kis-titel > span:nth-child(2) { animation-name: pl-einstieg-2; }
.pl-kis .pl-kis-titel > span:nth-child(3) { animation-name: pl-einstieg-3; }

.pl-kis .pl-kis-punkte {
  align-self: center;
  display: grid;
  gap: 5px;
  padding-right: 10px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
}

.pl-kis .pl-kis-punkt {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  animation-name: pl-punkt;
}

.pl-kis .pl-kis-punkt:nth-child(2) { animation-name: pl-punkt-2; }
.pl-kis .pl-kis-punkt:nth-child(3) { animation-name: pl-punkt-3; }

.pl-kis .pl-kis-punkt::before {
  content: "✓";
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e6eef9;
  color: #1d4ed8;
  font-size: 8.5px;
  line-height: 13px;
  text-align: center;
}

@keyframes pl-punkt   { 0%, 34% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes pl-punkt-2 { 0%, 42% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes pl-punkt-3 { 0%, 50% { opacity: 0; } 54%, 100% { opacity: 1; } }

.pl-kis .pl-kis-knopf {
  grid-column: 1 / -1;
  margin: 0 12px 10px;
  padding: 5px 0;
  border-radius: 5px;
  background: #14213d;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  animation-name: pl-einblenden-spaet;
}

/* ───────────────────────────────────────────────────────────────
 * art-radar.berlin – tagesaktuelle Kunstszene
 * Im Look der Seite (weiß/hellgrau, Rot, Versalien). Echte Einträge
 * vom 2026-09-23 (Screenshot von Wolf) als Platzhalter für das Projekt;
 * ein Klick auf die Karte öffnet die Seite mit den aktuellen Terminen.
 * Takt 1: drei Eröffnungen erscheinen. Takt 2: die erste wird
 * markiert. Takt 3: "Dein Samstag – Wir planen deine Galerie-Route."
 * ─────────────────────────────────────────────────────────────── */

.pl-art .pl-buehne {
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #f2f2f2;
  color: #111;
}

.pl-art .pl-art-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background: #fff;
  border-bottom: 2px solid #111;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #d7141a;
}

.pl-art .pl-art-liste {
  display: grid;
  gap: 3px;
  padding: 5px 10px 5px;
}

.pl-art .pl-art-eintrag {
  padding: 2px 7px;
  border-left: 2px solid transparent;
  background: #fff;
  animation-name: pl-einstieg;
}

.pl-art .pl-art-eintrag:nth-child(2) { animation-name: pl-einstieg-2; }
.pl-art .pl-art-eintrag:nth-child(3) { animation-name: pl-einstieg-3; }

/* Die erste Eröffnung wird markiert */
.pl-art .pl-art-eintrag.pl-art-wahl {
  border-left-color: #d7141a;
  animation-name: pl-einstieg, pl-art-wahl;
}

@keyframes pl-art-wahl {
  0%, 36% { border-left-color: transparent; }
  40%, 100% { border-left-color: #d7141a; }
}

.pl-art .pl-art-ort {
  display: block;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #d7141a;
}

.pl-art .pl-art-titel {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-art .pl-art-samstag {
  margin: auto 10px 7px;
  padding: 4px 7px;
  border-left: 3px solid #d7141a;
  background: #fff;
  font-size: 9px;
  animation-name: pl-einblenden-spaet;
}

.pl-art .pl-art-samstag strong {
  color: #d7141a;
  letter-spacing: 0.06em;
  margin-right: 4px;
}