/* Theme-tmp-Pattern-CSS (Plugin-portabel) — nur Theme-Prefix-Klassen */

/*
Theme Name:   Textil im Profil — Kadence Child
Theme URI:    https://textilmitprofil.de
Description:  Schwester-Theme zum gklickt-Universum für Julias Atelier-Marke "Textil im Profil". Helle Cream-Bühne mit rotem Logo-Akzent, Hand-Stitching-Borders und Sparkle-Bokeh als Diamantpainting-Anker. Verbindet sich übers Universum durch EB Garamond + Gold + dezente Glas-Logik.
Author:       Julia Marstaller
Author URI:   https://textilmitprofil.de
Template:     kadence
Version:      0.7.1
License:      GPL-2.0-or-later
Text Domain:  textilmitprofil
Update URI:   textilmitprofil.de
*/

/* ─── Eyebrow mit Faden-Symbol ─── */

.tmp-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--tmp-gold-deep);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tmp-eyebrow::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 11 Q5 4 12 6' stroke='%23C8252C' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='6' r='1.2' fill='%23C8252C'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ─── Brand-Logo (Inline-Approximation) ─── */

.tmp-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--tmp-ink);
  line-height: 1;
  text-decoration: none;
}

.tmp-logo .b-t { color: var(--tmp-red); font-size: 1.4em; font-weight: 600; transform: translateY(-0.05em); display: inline-block; }

.tmp-logo .b-mit { font-family: 'Jost', sans-serif; font-style: normal; font-size: 0.45em; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tmp-ink-soft); margin: 0 0.4em; align-self: center; }

.tmp-logo .b-l { color: var(--tmp-red); display: inline-block; transform: rotate(-12deg); }

.tmp-logo .b-thread {
  display: inline-block;
  width: 0.7em; height: 0.7em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20 Q12 8 20 4' stroke='%23C8252C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M16 4 L20 4 L20 8' stroke='%23C8252C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  margin-left: 0.1em;
}

/* ─── Sparkle-Bokeh — Diamantpainting-Schimmer (deutlicher sichtbar) ─── */

.tmp-sparkle,
.wp-block-group.tmp-sparkle {
  position: relative;
  overflow: hidden;
}

.tmp-sparkle::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle 5px at 8% 12%, rgba(200, 37, 44, 0.55), transparent 70%),
    radial-gradient(circle 4px at 82% 18%, rgba(201, 168, 76, 0.7), transparent 70%),
    radial-gradient(circle 6px at 28% 72%, rgba(200, 37, 44, 0.5), transparent 70%),
    radial-gradient(circle 4px at 92% 82%, rgba(201, 168, 76, 0.6), transparent 70%),
    radial-gradient(circle 4px at 48% 32%, rgba(200, 37, 44, 0.4), transparent 70%),
    radial-gradient(circle 5px at 65% 60%, rgba(201, 168, 76, 0.5), transparent 70%),
    radial-gradient(circle 3px at 18% 45%, rgba(201, 168, 76, 0.55), transparent 70%),
    radial-gradient(circle 4px at 75% 90%, rgba(200, 37, 44, 0.45), transparent 70%);
  background-size: 320px 320px;
  opacity: 1;
  animation: tmp-sparkle-shimmer 14s linear infinite;
  z-index: 0;
}

@keyframes tmp-sparkle-shimmer {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 320px 320px, -320px 320px, 320px -320px, -320px -320px, 160px 160px, -160px 160px, 160px -160px, -160px -160px; }
}

.tmp-sparkle > * { position: relative; z-index: 1; }

/* ─── Glass-Karten mit Hand-Stitching-Border (klar sichtbar) ─── */

.tmp-glass,
.wp-block-group.tmp-glass {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 2px dashed rgba(200, 37, 44, 0.45) !important;
  border-radius: 14px !important;
  padding: 2rem 2.5rem !important;
  box-shadow: 0 20px 50px -20px rgba(45, 36, 34, 0.25), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Dashed Border auch auf Cover-Cards (Categories) */

.tmp-cat-card.wp-block-cover {
  border: 2px dashed rgba(200, 37, 44, 0.5) !important;
  border-radius: 14px !important;
  overflow: hidden;
}

/* Hero-Bild bekommt Hand-Stitching-Rahmen */

.tmp-hero .tmp-hero__image,
.tmp-hero .wp-block-image.tmp-hero__image {
  position: relative;
}

.tmp-hero .tmp-hero__image::after,
.tmp-hero .wp-block-image.tmp-hero__image::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px dashed rgba(200, 37, 44, 0.4);
  border-radius: 18px;
  pointer-events: none;
}

/* ─── Glass mit Hand-Stitching-Border ─── */

.tmp-glass {
  background: var(--tmp-glass-bg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1.5px dashed rgba(200, 37, 44, 0.35);
  border-radius: 12px;
  box-shadow: var(--tmp-glass-shadow), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ─── Header ─── */

/* ─── Hero ─── */

.tmp-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.25rem 4rem;
  overflow: hidden;
  background: var(--tmp-cream);
  text-align: center;
}

.tmp-hero > * { width: 100%; max-width: 760px; }

.tmp-hero .wp-block-image { margin: 0 auto 1.5rem; }

.tmp-hero .tmp-hero__logo-img { max-width: 480px; width: 100%; }

.tmp-hero .tmp-hero__logo-img img { width: 100%; height: auto; }

.tmp-hero .wp-block-image.tmp-hero__image { max-width: 320px; aspect-ratio: 4/5; margin-top: 2rem; }

.tmp-hero .wp-block-image.tmp-hero__image img { object-fit: cover; height: 100%; border-radius: 12px; }

.tmp-hero h1 { margin: 1rem 0; }

.tmp-hero h1 em { color: var(--tmp-red); font-style: italic; }

.tmp-hero .tmp-hero__lead { max-width: 36ch; margin: 0 auto 2rem; font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: clamp(1.05rem, 4vw, 1.3rem); color: var(--tmp-ink-soft); }

.tmp-hero .wp-block-buttons { justify-content: center; }

@media (min-width: 800px) {
  .tmp-hero .wp-block-image.tmp-hero__image { max-width: 400px; }
}

.tmp-hero::before {
  content: ''; position: absolute;
  width: 350px; height: 350px;
  top: -50px; right: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 37, 44, 0.10), transparent 65%);
  filter: blur(50px); pointer-events: none;
}

.tmp-hero::after {
  content: ''; position: absolute;
  width: 280px; height: 280px;
  bottom: -80px; left: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.13), transparent 65%);
  filter: blur(50px); pointer-events: none;
}

.tmp-hero__inner { position: relative; z-index: 1; max-width: 700px; }

.tmp-hero__logo { font-size: clamp(2rem, 8vw, 3rem); margin-bottom: 1.5rem; }

.tmp-hero h1 {
  font-style: italic;
  font-size: clamp(2rem, 8vw, 3.4rem);
  margin: 1rem 0;
  line-height: 1.05;
}

.tmp-hero h1 em {
  color: var(--tmp-red);
  font-style: italic;
  position: relative; display: inline-block;
}

.tmp-hero h1 em::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px;
  background-image: linear-gradient(to right, var(--tmp-red) 50%, transparent 50%);
  background-size: 8px 2px;
}

.tmp-hero__lead {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  color: var(--tmp-ink-soft);
  max-width: 36ch; margin: 0 auto 2rem;
}

.tmp-hero__image {
  position: relative;
  aspect-ratio: 4/5;
  max-width: 320px;
  margin: 1.5rem auto 0;
  background-size: cover; background-position: center;
  border-radius: 12px;
  box-shadow: 0 30px 60px -20px rgba(45, 36, 34, 0.32);
}

.tmp-hero__image::after {
  content: ''; position: absolute; inset: -8px;
  border: 1.5px dashed rgba(200, 37, 44, 0.4);
  border-radius: 18px; pointer-events: none;
}

/* ─── Categories ─── */

.tmp-cat-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}

.tmp-cat-card {
  position: relative; aspect-ratio: 1/1;
  border-radius: 10px; overflow: hidden;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 16px -4px rgba(45, 36, 34, 0.16);
  transition: transform 0.4s, box-shadow 0.4s;
}

.tmp-cat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -8px rgba(45, 36, 34, 0.32); }

.tmp-cat-card .tmp-cat-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.5s;
}

.tmp-cat-card:hover .tmp-cat-img { transform: scale(1.04); }

.tmp-cat-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(45, 36, 34, 0.6) 0%, transparent 60%);
}

.tmp-cat-card .tmp-cat-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem 1.25rem;
  color: var(--tmp-cream);
  font-family: 'EB Garamond', serif;
  font-style: italic; font-size: 1.25rem;
  z-index: 1;
}

.tmp-cat-card .tmp-cat-sub {
  display: block; font-family: 'Jost', sans-serif; font-style: normal;
  font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
  opacity: 0.85; margin-top: 4px; color: var(--tmp-gold);
}

/* ─── Galerie ─── */

.tmp-gallery {
  max-width: 1300px; margin: 0 auto;
  column-count: 2; column-gap: 0.75rem;
}

.tmp-gallery figure {
  break-inside: avoid;
  margin: 0 0 0.75rem 0;
  position: relative; overflow: hidden;
  border-radius: 8px; cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(45, 36, 34, 0.18);
}

.tmp-gallery img { width: 100%; display: block; transition: filter 0.6s, transform 0.6s; }

.tmp-gallery figcaption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0.85rem 1rem;
  color: var(--tmp-cream);
  font-family: 'EB Garamond', serif;
  font-style: italic; font-size: 0.95rem;
  background: linear-gradient(to top, rgba(45, 36, 34, 0.75), transparent);
  opacity: 0; transition: opacity 0.4s;
}

.tmp-gallery figure:hover img { transform: scale(1.04); }

.tmp-gallery figure:hover figcaption { opacity: 1; }

/* ─── Buttons ─── */

.tmp-btn,
.wp-block-button.is-style-tmp-pill .wp-block-button__link {
  display: inline-block;
  padding: 0.85rem 2.25rem;
  background: var(--tmp-red);
  color: var(--tmp-cream);
  text-decoration: none;
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem; letter-spacing: 2.5px;
  text-transform: uppercase; font-weight: 600;
  border-radius: 50px; border: none;
  transition: all 0.3s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 8px 20px -8px rgba(200, 37, 44, 0.45);
}

.tmp-btn:hover,
.wp-block-button.is-style-tmp-pill .wp-block-button__link:hover {
  transform: translateY(-2px);
  background: var(--tmp-red-deep);
  box-shadow: 0 14px 28px -8px rgba(200, 37, 44, 0.55);
}

.tmp-btn--ghost {
  background: transparent;
  color: var(--tmp-red);
  border: 1.5px dashed rgba(200, 37, 44, 0.55);
  box-shadow: none;
}

.tmp-btn--ghost:hover {
  background: var(--tmp-red);
  color: var(--tmp-cream);
  border-style: solid;
}

/* ─── Footer Universum-Hinweis ─── */

.tmp-universum-link {
  text-align: center;
  padding: 1.5rem 0;
  margin: 0;
  border-top: 1.5px dashed rgba(200, 37, 44, 0.3);
}

.tmp-universum-link a {
  font-family: 'EB Garamond', serif !important;
  font-style: italic;
  font-size: 1rem;
  color: var(--tmp-ink-mute) !important;
  text-decoration: none !important;
  letter-spacing: 0.5px;
  transition: color 0.4s, opacity 0.4s;
  opacity: 0.8;
}

.tmp-universum-link a:hover { color: var(--tmp-gold-deep) !important; opacity: 1; }

.tmp-universum-link a::before { content: '↗ '; opacity: 0.6; }

/* ─── Responsive ─── */

@media (min-width: 800px) {
  .tmp-hero { padding: 7rem 2.5rem 5rem; }
  .tmp-hero__image { max-width: 400px; margin-top: 2.5rem; }
  .tmp-cat-grid { grid-template-columns: repeat(4, 1fr); }
  .tmp-gallery { column-count: 4; column-gap: 1rem; }
}

/* ════════════════════════════════════════════════════════════════
   SPIELEREI-HELPER — universell auf jeden Block anwendbar
   Im Editor: Block wählen → Sidebar → Erweitert → "Zusätzliche CSS-Klasse"
   Verfügbare Klassen:
   · spielerei-sparkle      — Diamantpainting-Schimmer (Theme-Farben)
   · spielerei-focus        — Linsen-Fokus-Pull beim Laden (Bilder)
   · spielerei-shimmer      — Glanz-Streifen wandert einmalig durch
   · spielerei-glow         — sanftes pulsierendes Aura
   · spielerei-fade-up      — Fade-In von unten beim Scrollen
   ════════════════════════════════════════════════════════════════ */

/* Reduzierte Bewegung: Animationen pausieren wenn der Nutzer reduce-motion will */

/* ════════════════════════════════════════════════════════════════
   SO FUNKTIONIERT ES — Kreis-Fluss (7 Schritte rund angeordnet)
   Schritte = wp:group mit class tmp-schritt + tmp-schritt--1..--7
   Bilder = normale wp:image-Blöcke (austauschbar im Backend)
   ════════════════════════════════════════════════════════════════ */

.tmp-kreis-fluss {
  --tmp-bahn:       720px;
  --tmp-schritt-sz: 130px;
  position: relative;
  width: 100%;
  max-width: var(--tmp-bahn);
  aspect-ratio: 1 / 1;
  margin: 40px auto 0;
  display: block !important;
}

/* Naht als CSS-Background — handgezeichnete SVG-Datei */

.tmp-kreis-fluss::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/img/naht-kreis.svg') center/contain no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* Zentrum: Logo-Slot (austauschbar im Editor) */

.tmp-kreis-fluss .tmp-kreis-zentrum {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36%;
  aspect-ratio: 1 / 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  z-index: 2;
  margin: 0 !important;
}

.tmp-kreis-fluss .tmp-kreis-zentrum .wp-block-image,
.tmp-kreis-fluss .tmp-kreis-zentrum .wp-block-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.tmp-kreis-fluss .tmp-kreis-zentrum p {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--tmp-ink-soft);
  margin: 0;
  line-height: 1.4;
}

/* Schritt-Karten — Position via Modifier-Klasse --1..--7 */

.tmp-kreis-fluss .tmp-schritt {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--tmp-schritt-sz);
  height: var(--tmp-schritt-sz);
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3;
  transition: transform 0.4s ease;
}

.tmp-kreis-fluss .tmp-schritt > * { margin: 0; }

/* Position-Modifier: Winkel auf der Bahn */

.tmp-schritt--1 { --tmp-angle:   -90deg; }

.tmp-schritt--2 { --tmp-angle: -38.57deg; }

.tmp-schritt--3 { --tmp-angle:  12.86deg; }

.tmp-schritt--4 { --tmp-angle:  64.29deg; }

.tmp-schritt--5 { --tmp-angle: 115.71deg; }

.tmp-schritt--6 { --tmp-angle: 167.14deg; }

.tmp-schritt--7 { --tmp-angle: 218.57deg; }

.tmp-kreis-fluss .tmp-schritt {
  transform:
    translate(-50%, -50%)
    rotate(var(--tmp-angle))
    translate(calc(var(--tmp-bahn) / 2 - var(--tmp-schritt-sz) / 2))
    rotate(calc(-1 * var(--tmp-angle)));
}

/* Image-Block innerhalb der Schritt-Group wird zum Kreis */

.tmp-kreis-fluss .tmp-schritt .wp-block-image {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tmp-cream-soft);
  box-shadow:
    0 0 0 5px var(--tmp-cream),
    0 0 0 6px var(--tmp-gold),
    0 14px 30px -14px rgba(45, 36, 34, 0.35);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.tmp-kreis-fluss .tmp-schritt .wp-block-image,
.tmp-kreis-fluss .tmp-schritt .wp-block-image figure {
  width: 100%; height: 100%;
}

.tmp-kreis-fluss .tmp-schritt .wp-block-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* Label unterhalb (oder oberhalb, je nach Position auf Bahn) */

.tmp-kreis-fluss .tmp-schritt .tmp-schritt-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  font-family: 'Jost', sans-serif;
  pointer-events: none;
}

/* Unten/seitlich: Label unter dem Kreis */

.tmp-schritt--3 .tmp-schritt-label,
.tmp-schritt--4 .tmp-schritt-label,
.tmp-schritt--5 .tmp-schritt-label {
  top: calc(100% + 8px);
}

/* Oben/seitlich-oben: Label über dem Kreis */

.tmp-schritt--1 .tmp-schritt-label,
.tmp-schritt--2 .tmp-schritt-label,
.tmp-schritt--6 .tmp-schritt-label,
.tmp-schritt--7 .tmp-schritt-label {
  bottom: calc(100% + 8px);
}

.tmp-schritt-nr {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--tmp-red);
  color: var(--tmp-cream);
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
  margin-right: 6px;
  vertical-align: middle;
}

.tmp-schritt-titel {
  font-style: italic;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 17px;
  color: var(--tmp-ink);
  vertical-align: middle;
  font-weight: 500;
}

/* Hover: Bild leicht vergrößern + Gold→Rot */

@media (hover: hover) {
  .tmp-kreis-fluss .tmp-schritt:hover .wp-block-image {
    transform: scale(1.08);
    box-shadow:
      0 0 0 5px var(--tmp-cream),
      0 0 0 6px var(--tmp-red),
      0 18px 36px -14px rgba(45, 36, 34, 0.45);
  }
  /* Beschreibungstext bei Hover als Tooltip nahe dem Schritt */
  .tmp-kreis-fluss .tmp-schritt .tmp-schritt-text {
    position: absolute;
    top: 50%; left: calc(100% + 12px);
    transform: translateY(-50%);
    width: 220px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid var(--tmp-cream-deep);
    border-radius: 4px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tmp-ink-soft);
    box-shadow: 0 14px 30px -14px rgba(45, 36, 34, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 10;
    white-space: normal;
    text-align: left;
    margin: 0;
  }
  /* Tooltip auf linker Seite für Schritte links der Bahn */
  .tmp-schritt--5 .tmp-schritt-text,
  .tmp-schritt--6 .tmp-schritt-text,
  .tmp-schritt--7 .tmp-schritt-text {
    left: auto;
    right: calc(100% + 12px);
  }
  .tmp-kreis-fluss .tmp-schritt:hover .tmp-schritt-text {
    opacity: 1;
  }
}

/* Beschreibungstext standardmäßig versteckt (auch ohne Hover-Capability) */

.tmp-kreis-fluss .tmp-schritt .tmp-schritt-text {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ─── Mobile (≤760px): vertikale Anordnung mit alternierendem Versatz ─── */

@media (max-width: 760px) {
  .tmp-kreis-fluss {
    aspect-ratio: auto !important;
    max-width: 520px;
    padding: 10px 0;
    display: flex !important;
    flex-direction: column;
    gap: 28px;
  }
  .tmp-kreis-fluss::before { display: none; }
  .tmp-kreis-fluss .tmp-kreis-zentrum {
    position: static;
    transform: none;
    width: auto;
    max-width: 200px;
    aspect-ratio: auto;
    margin: 0 auto 30px !important;
    order: -1;
  }
  .tmp-kreis-fluss .tmp-schritt {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .tmp-kreis-fluss .tmp-schritt:nth-child(even of .tmp-schritt) {
    flex-direction: row-reverse;
  }
  .tmp-kreis-fluss .tmp-schritt .wp-block-image {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
  }
  .tmp-kreis-fluss .tmp-schritt .tmp-schritt-label {
    position: static;
    transform: none;
    white-space: normal;
    text-align: left;
    flex: 1;
  }
  .tmp-kreis-fluss .tmp-schritt:nth-child(even of .tmp-schritt) .tmp-schritt-label {
    text-align: right;
  }
  .tmp-schritt-titel { display: block; margin-top: 4px; }
  .tmp-kreis-fluss .tmp-schritt .tmp-schritt-text {
    position: static !important;
    opacity: 1 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    width: auto !important;
    margin-top: 4px !important;
    font-size: 13px !important;
    color: var(--tmp-ink-soft) !important;
  }
  /* Verbindung: dünne vertikale Linie zwischen Schritten */
  .tmp-kreis-fluss .tmp-schritt + .tmp-schritt::before {
    content: '';
    position: absolute;
    top: -32px; left: 50px;
    width: 2px; height: 28px;
    background: linear-gradient(to bottom, transparent, var(--tmp-red) 40%, var(--tmp-red) 60%, transparent);
    opacity: 0.5;
  }
  .tmp-kreis-fluss .tmp-schritt:nth-child(even of .tmp-schritt) + .tmp-schritt::before {
    left: auto; right: 50px;
  }
}

/* Reduce motion */

@media (prefers-reduced-motion: reduce) {
  .tmp-kreis-fluss .tmp-schritt,
  .tmp-kreis-fluss .tmp-schritt .wp-block-image { transition: none; }
}