/* ─────────────────────────────────────────────────────────────
   MAULBEERKEIM ACADEMY — Markenschicht über basis.css

   basis.css ist die Technik, die Schrift und die Bewegung von
   TRAGKRAFT, 1:1 übernommen. Beide Seiten sollen gleich gebaut
   sein und gleich klingen.

   Unterschiedlich ist hier nur zweierlei:

   1. Farbe    Pflaume und Altrosa statt Terrakotta
   2. Rhythmus mehr Luft, größere Radien, ruhigere Bewegung

   TRAGKRAFT ist ein Kurs mit festem Termin, eng getaktet und
   sportlich. Maulbeerkeim begleitet über Monate, darum hier
   langsamer und luftiger.
   ───────────────────────────────────────────────────────────── */

@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}

/* ── 1. Farbe ───────────────────────────────────────────────── */
:root{
  --grund:#100B0F;
  --flaeche:#1C151A;
  --flaeche-hoch:#251C23;
  --kante:rgba(243,216,218,.09);
  --kante-hell:rgba(243,216,218,.2);

  --creme:#F6EEE6;
  --text:#CFC2C5;
  --grau:#A2939A;
  --grau-tief:#5A4A52;

  /* Altrosa übernimmt die Rolle des Akzents. Gleiche Variablennamen
     wie bei TRAGKRAFT, damit das gesamte Basis-CSS unverändert läuft. */
  --licht:#E4BCC1;
  --licht-hell:#F3D8DA;
  --licht-tief:#C98F99;
  --licht-rgb:228,188,193;
  --auf-licht:#3A1321;

  --beere:#8E3E5C;
  --gold:#DCAE7E;
  --moos:#C98F99;

  --gold-hell:#FFE9B8;
  --gold-satt:#E8B45C;
  --rosegold:#E9A48F;
  /* Mehr Spanne im Verlauf: von sattem Gold über Roségold zurück ins
     helle Champagner. Vorher lagen die Töne zu dicht beieinander und
     die Hervorhebung ging im Creme unter. */
  --verlauf:linear-gradient(100deg,#C97A52 0%,#D88460 24%,#E49060 46%,#F0C0B4 72%,#F7DCCB 100%);

/* ── 2. Schrift: dieselbe wie bei TRAGKRAFT ─────────────────── */
  --titel:"Bricolage Grotesque","Figtree","Helvetica Neue",Arial,sans-serif;
  --schrift:"Figtree","Helvetica Neue",Arial,sans-serif;

/* ── 3. Rhythmus: größere Radien, breiterer Bund ────────────── */
  --rund:28px;
  --rund-klein:18px;
  --bund:clamp(1.5rem,6vw,5rem);
}


/* Hervorhebung: kursiv, mit dem Verlauf Gold nach Rosé.
   Die Wörter im Auftakt sind eigene Boxen, darum liegt der Verlauf
   dort auf jedem Wort, sonst klippt background-clip ins Leere. */
.glanz{color:var(--licht);filter:drop-shadow(0 0 22px rgba(216,132,96,.26))}
.glanz,.glanz .w{background-image:var(--verlauf);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;padding-bottom:.04em}
.glanz .w{color:var(--licht)}
@supports not (background-clip:text){ .glanz,.glanz .w{-webkit-text-fill-color:currentColor} }

.knopf-licht{background-image:linear-gradient(140deg,#F7E3BC 0%,#EFC3A5 38%,#E3A493 72%,#F2D3B4 100%);
  color:#3A1321;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 30px rgba(227,164,147,.28)}
.knopf-licht:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 38px rgba(227,164,147,.4)}

/* ── 3. Rhythmus: mehr Luft zwischen und in den Abschnitten ─── */
.feld{padding:clamp(4.5rem,9vw,7.5rem) 0}
.kopf-block{gap:1.3rem;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.text{line-height:1.75}

/* ── 3. Rhythmus: ruhigere Bewegung ─────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  /* Länger und sanfter als bei TRAGKRAFT, ohne Drehung und mit
     weniger Unschärfe. Die Wörter kommen enger als Gruppe. */
  .wortweise .w{animation-duration:1.15s;animation-delay:calc(.3s + var(--w,0) * 38ms)}
  @keyframes wort{from{opacity:0;transform:translateY(.4em);filter:blur(3px)}
    to{opacity:1;transform:none;filter:none}}

  .zeig{transform:translateY(1.4rem);
    transition:opacity .75s var(--weich),transform .75s var(--weich);
    transition-delay:calc(var(--i,0) * 75ms)}
}

/* ── Auftakt: Licht steigt von unten, wie bei TRAGKRAFT ────────
   Gleicher Aufbau, nur in Pflaume und Altrosa statt Terrakotta. */
.auftakt{background:
  /* ganz unten ein warmer Kern, wie ein Licht hinter der Seite */
  radial-gradient(42% 20% at 50% 116%,rgba(255,201,140,.34),transparent 66%),
  radial-gradient(60% 26% at 50% 114%,rgba(232,164,143,.34),transparent 68%),
  radial-gradient(92% 38% at 50% 122%,rgba(124,40,74,.62),transparent 70%),
  /* Der Verlauf läuft am Ende wieder zum Grundton zurück, sonst
     bleibt an der Abschnittskante eine sichtbare Linie stehen. */
  linear-gradient(180deg,#0B080A 0%,#0E0A0D 44%,#1A1018 68%,#331328 86%,#2A1020 95%,#130A11 100%)}

/* Der warme Schein läuft nach unten in den Seitengrund aus, sonst
   steht an der Kante zur nächsten Sektion eine harte Linie.
   Gelöst wie bei TRAGKRAFT. */
.auftakt{position:relative}
.auftakt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;
  pointer-events:none;z-index:0;
  background:linear-gradient(rgba(16,11,15,0),var(--grund))}
.auftakt > *{position:relative;z-index:1}

/* ── Auftakt: Text links, Videokarte rechts ─────────────────── */
.auftakt-in{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:center;text-align:left}
@media(min-width:62rem){ .auftakt-in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)} }
.auftakt-text{display:flex;flex-direction:column;align-items:flex-start}
.auftakt .text{margin:1.6rem 0 0;max-width:31rem}
.auftakt .tatreihe{justify-content:flex-start;margin-top:2rem}

/* Die Videokarte ersetzt das breite Hero-Bild von TRAGKRAFT. */
.auftakt .hero-bild{margin:0;max-width:none;aspect-ratio:16/9}
@media(max-width:40rem){
  .auftakt .hero-bild{aspect-ratio:4/3}
}
/* Vickys Standbild ist hell, darum ein Schleier unter der Beschriftung.
   Liegt unter dem Startknopf (z-index 1) und unter dem iframe (2). */
.auftakt .video-feld::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to top,rgba(16,11,15,.8) 0%,rgba(16,11,15,.3) 45%,transparent 72%)}
.auftakt .video-klein{color:var(--creme);opacity:.9}

.video-unter{display:flex;align-items:center;gap:.7rem;margin-top:1rem;font-size:.875rem;color:var(--grau)}
.video-unter img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.video-unter strong{color:var(--creme);font-weight:600}

/* ── Abschnittsköpfe mittig ─────────────────────────────────── */

/* ── Phasen-Karten ──────────────────────────────────────────── */
.phasen{display:grid;gap:1.4rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:40rem){ .phasen{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:62rem){ .phasen{grid-template-columns:repeat(3,minmax(0,1fr))} }
.phase{position:relative;display:flex;flex-direction:column;border-radius:var(--rund);overflow:hidden;
  text-decoration:none;background:var(--flaeche-hoch);box-shadow:inset 0 0 0 1px var(--kante);
  transition:transform .6s var(--weich),box-shadow .6s var(--weich)}

.phase-bild{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--flaeche)}
.phase-bild img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--weich)}
.phase:hover .phase-bild img{transform:scale(1.03)}
.phase-nr{position:absolute;left:1rem;top:1rem;z-index:1;padding:.3rem .75rem;border-radius:999px;
  font-size:.78rem;font-weight:600;color:var(--creme);background:rgba(16,11,15,.62);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--kante-hell)}
.phase-body{display:flex;flex-direction:column;flex:1;gap:.7rem;padding:1.3rem 1.5rem 1.6rem}
.phase-body h3{font-family:var(--titel);font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.12}
.phase-body p{flex:1;font-size:.9688rem;line-height:1.65;color:var(--text)}
.phase-link{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.9063rem;color:var(--licht)}
.phase-link svg{width:1.1em;height:.9em;transition:transform .4s var(--weich)}
.phase:hover .phase-link svg{transform:translateX(3px)}

/* ── Rechtlicher Hinweis: ruhig, abgesetzt, kein Alarm ──────── */
.hinweis-feld{padding:clamp(2.5rem,5vw,4rem) 0 clamp(3.5rem,7vw,5.5rem)}
.hinweis-nein{display:grid;gap:.6rem;grid-template-columns:1fr}
@media(min-width:40rem){ .hinweis-nein{grid-template-columns:repeat(2,1fr)} }
.hinweis-nein li{display:flex;gap:.65rem;align-items:baseline;font-size:.9375rem;color:var(--text)}
.hinweis-nein li::before{content:"";flex:none;width:.7rem;height:1px;background:var(--grau-tief);transform:translateY(-.3rem)}

/* ── Wortmarke ──────────────────────────────────────────────── */
.marke-wort{font-family:var(--titel);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:.9375rem;line-height:1.1;color:var(--creme)}
.marke-wort b{font-weight:600;color:var(--licht)}


/* ═════════════════════════════════════════════════════════════
   Nachtrag: weichere Übergänge, Kachel-Effekte, knapper Hinweis
   ═════════════════════════════════════════════════════════════ */

/* Der Grund bleibt schlicht, wie bei TRAGKRAFT. Das Licht kommt
   aus dem Auftakt und aus den Bauteilen selbst. */


/* ── Zwei-Ton-Überschriften wie bei TRAGKRAFT ─────────────────── */
.titel .zwei{color:var(--grau);display:block}
.auftakt h1 .zwei{color:var(--licht-hell)}

/* ── Kachel-Effekte ───────────────────────────────────────────── */
.phase{isolation:isolate}
/* Ein weicher Rosé-Schein wandert beim Zeigen über die Karte. */
.phase::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .6s var(--weich);
  background:radial-gradient(70% 45% at 50% 0%,rgba(var(--licht-rgb),.16),transparent 70%)}
.phase:hover::after,.phase:focus-visible::after{opacity:1}
/* Das Bild bekommt einen Verlauf nach unten, damit der Text ruhig anschließt. */
.phase-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(37,28,35,.85) 100%)}
.phase-bild img{filter:saturate(.92) brightness(.94);
  transition:transform .9s var(--weich),filter .6s var(--weich)}
.phase:hover .phase-bild img{filter:saturate(1) brightness(1)}
.phase-nr{transition:transform .5s var(--weich),background .4s}
.phase:hover .phase-nr{transform:translateY(-2px);background:rgba(16,11,15,.78)}

/* Der Pfeil im Link bekommt eine mitlaufende Linie. */
.phase-link{position:relative;align-self:flex-start;padding-bottom:.25rem}
.phase-link::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--verlauf);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--weich)}
.phase:hover .phase-link::before{transform:scaleX(1)}

/* TRAGKRAFT in seinen eigenen Farben, damit man sieht:
   das ist eine andere Marke. */
.tk{font-family:var(--schrift);font-weight:700;font-size:1.12em;letter-spacing:.14em;
  white-space:nowrap;color:#FAEBE1;-webkit-text-fill-color:#FAEBE1}
.tk span{color:#F29A7C;-webkit-text-fill-color:#F29A7C}

/* ── Rechtlicher Hinweis: eine Zeile, Rest aufklappbar ────────── */
.hinweis{display:flex;gap:1.1rem;align-items:flex-start;max-width:52rem;margin:0 auto;
  padding:1.4rem 1.6rem;border-radius:var(--rund-klein);
  background:linear-gradient(180deg,rgba(243,216,218,.05),rgba(243,216,218,.02));
  box-shadow:inset 0 0 0 1px var(--kante)}
.hinweis-zeichen{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
  color:var(--licht-tief);background:rgba(var(--licht-rgb),.1)}
.hinweis-zeichen svg{width:1.05rem;height:1.05rem}
.hinweis-text{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.hinweis p{margin:0;font-size:.875rem;line-height:1.65;color:var(--grau)}
.hinweis strong{color:var(--text);font-weight:600}
.hinweis-mehr summary{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  font-size:.8125rem;font-weight:600;color:var(--licht-tief);list-style:none;
  padding:.15rem 0;transition:color .25s}
.hinweis-mehr summary::-webkit-details-marker{display:none}
.hinweis-mehr summary::after{content:"";width:.42rem;height:.42rem;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .3s var(--weich)}
.hinweis-mehr[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.hinweis-mehr summary:hover{color:var(--licht)}
.hinweis-inhalt{display:flex;flex-direction:column;gap:.7rem;padding-top:.7rem}
@media (prefers-reduced-motion:no-preference){
  .hinweis-mehr[open] .hinweis-inhalt{animation:aufklappen .45s var(--weich)}
  @keyframes aufklappen{from{opacity:0;transform:translateY(-.4rem)}to{opacity:1;transform:none}}
}
/* Die Aufzählung stand vorher in zwei ungleich breiten Spalten und
   lief rechts ausgefranst aus. Jetzt zwei gleich breite Spalten,
   die Striche sitzen untereinander. */
.hinweis-nein{display:grid;grid-template-columns:1fr;gap:.4rem 1.8rem}
@media(min-width:40rem){ .hinweis-nein{grid-template-columns:repeat(2,minmax(0,1fr))} }
.hinweis-nein li{display:flex;gap:.55rem;font-size:.875rem;line-height:1.5;color:var(--grau)}

/* ═════════════════════════════════════════════════════════════
   Logo: schwebt leise, blüht beim Zeigen auf
   Nachgebaut von maulbeerkeim.com. Die Zellen wachsen nacheinander
   von innen nach außen, der Ring bekommt einen Goldschimmer.
   ═════════════════════════════════════════════════════════════ */
.logo-defs{position:absolute;width:0;height:0;overflow:hidden}
/* ── Das Zeichen der Marke ──────────────────────────────────────
   Seit dem Wechsel auf das Bild gibt es keine einzelnen Zellen mehr,
   die nacheinander aufgehen können. Geblieben ist das ruhige Leuchten
   beim Darüberfahren, dazu ein leichtes Wachsen. */
.logo-figur{display:block;object-fit:contain;
  transition:filter .5s ease,transform .5s cubic-bezier(.2,.8,.3,1)}
.marke-figur.logo-figur{height:48px;width:48px;flex:none}
@media(max-width:51.99rem){ .marke-figur.logo-figur{height:38px;width:38px} }
.fuss-figur.logo-figur{width:74px;height:74px}
.marke:hover .logo-figur,.fuss-logo:hover .logo-figur,
.marke:focus-visible .logo-figur,.fuss-logo:focus-visible .logo-figur{
  transform:scale(1.06);filter:drop-shadow(0 0 18px rgba(242,217,168,.5))}


  transition:transform .5s var(--weich)}

/* Die Zelle in der Mitte geht zuletzt auf, etwas weiter als die anderen. */
/* Tastatur soll dasselbe sehen wie die Maus. */

@media (prefers-reduced-motion:no-preference){
  .logo-figur{animation:logoSchweben 7s ease-in-out infinite}
  @keyframes logoSchweben{0%,100%{transform:translateY(0) rotate(0deg)}
    33%{transform:translateY(-3px) rotate(.5deg)}
    66%{transform:translateY(2px) rotate(-.4deg)}}
  /* Versetzt starten, damit Kopf und Fuß nicht im Gleichschritt schweben. */
  .kopf .logo-figur{animation-duration:8s;animation-delay:-2s}
  .menue .logo-figur{animation-duration:7.5s;animation-delay:-1s}
  .fuss .logo-figur{animation-duration:9s;animation-delay:-3s}
}

/* ── Fußzeile: zwei Spalten untereinander ────────────────────── */
.fuss-nav{display:flex;flex-wrap:wrap;justify-content:center;
  gap:2.2rem clamp(2rem,6vw,4.5rem)}
.fuss-spalte{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.fuss-spalte a{overflow-wrap:anywhere}
.fuss-tk{display:inline-flex;align-items:center}
.fuss-tk .tk{font-size:1rem}
/* Unter 26rem blendet basis.css die Markenzeile aus. Im Kopf ist das
   richtig, in der Fußzeile ist genug Platz. */
@media(max-width:26rem){ .fuss-logo .marke-zeile{display:block} }

/* ═════════════════════════════════════════════════════════════
   Runde vier: Lichtstreifen, blinkende Punkte, Stapelkarten
   Vorbild fora.so, übersetzt in die Maulbeerkeim-Farben.
   ═════════════════════════════════════════════════════════════ */

/* ── Umlaufender Lichtstreifen ─────────────────────────────────
   Ein Kegelverlauf dreht sich, eine Maske schneidet die Mitte
   heraus, übrig bleibt ein 1 px Rand. Ohne @property dreht sich
   nichts, der Rand steht dann einfach still. */
@property --winkel{syntax:'<angle>';initial-value:0deg;inherits:false}
.leuchtrand{position:relative}
.leuchtrand::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;
  padding:1px;pointer-events:none;
  background:conic-gradient(from var(--winkel),
    #B98B57 0deg,
    #E6AE9B 48deg,
    #F6E0B4 96deg,
    #FFF3D8 132deg,
    #E9C39A 168deg,
    #C98F99 214deg,
    #F2D6B8 256deg,
    #FFF6E2 292deg,
    #D9AB7A 330deg,
    #B98B57 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.55;transition:opacity .45s var(--weich)}
@media (prefers-reduced-motion:no-preference){
  .leuchtrand::before{animation:umlauf 14s linear infinite}
  @keyframes umlauf{to{--winkel:360deg}}
}
/* Beim Zeigen wird der Rand heller, nicht erst sichtbar. */
.phase:hover::before,.phase:focus-visible::before,
.knopf-licht:hover::before,.knopf-licht:focus-visible::before{opacity:1}
.auftakt .hero-bild.leuchtrand::before{opacity:.85;animation-duration:20s}
.knopf-licht::before{opacity:.75}

/* Kacheln: Rahmen steht fest, nur Schein und Hub bewegen sich.
   Vorher wanderte die 1-px-Kante mit dem transform auf halbe
   Pixel, das sah aus wie Zittern. */
.phase{box-shadow:inset 0 0 0 1px var(--kante);transition:transform .6s var(--weich);
  will-change:transform;backface-visibility:hidden}
.phase:hover{transform:translateY(-3px)}
.phase::after{z-index:2}

/* ── Blinkender Punkt im Etikett ──────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .pill::before{animation:punktschlag 2.6s ease-in-out infinite}
  @keyframes punktschlag{
    0%,100%{opacity:.45;box-shadow:0 0 0 0 rgba(var(--licht-rgb),.5)}
    50%{opacity:1;box-shadow:0 0 0 4px rgba(var(--licht-rgb),0)}}
}

/* ── Karteikarten, die übereinander fahren ────────────────────
   Auf dem Telefon stehen die vier Kacheln ohnehin untereinander.
   Jede bleibt kurz stehen, die nächste schiebt sich darüber. */
@media(max-width:47.99rem){
  .phasen{display:block}
  .phase{position:sticky;margin-bottom:1.4rem}
  .phase:nth-child(1){top:calc(var(--kopf-h) + .5rem)}
  .phase:nth-child(2){top:calc(var(--kopf-h) + 1.4rem)}
  .phase:nth-child(3){top:calc(var(--kopf-h) + 2.3rem)}
  /* Der Hub beim Zeigen stört im Stapel. */
  .phase:hover{transform:none}
}

/* ── Leichter Scroll-Versatz an der Videokarte ────────────────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .auftakt .hero-bild{animation:versatz linear both;animation-timeline:view();
      animation-range:entry 20% exit 90%}
    @keyframes versatz{from{transform:translateY(14px)}to{transform:translateY(-14px)}}
  }
}


/* ── Stempel auf KI-generierten Bildern ───────────────────────── */
.ki-stempel{position:absolute;right:.6rem;bottom:.6rem;z-index:1;
  padding:.16rem .42rem;border-radius:999px;
  font-size:.5625rem;font-weight:600;letter-spacing:.03em;
  color:rgba(246,238,230,.66);background:rgba(16,11,15,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(243,216,218,.16)}

/* ── Text auf den Kacheln markierbar machen ───────────────────
   Die ganze Kachel ist ein Link, darum zieht der Browser sie
   beim Markieren als Verknüpfung. Das schalten wir für den
   Textkörper ab. */
.phase-body{user-select:text;-webkit-user-select:text}
.phase img,.phase-bild{-webkit-user-drag:none;user-select:none}

/* ── Naht zwischen Bild und Textkörper ─────────────────────────
   Beim Zeigen wandert die Kachel um 3 px und das Bild zoomt. Die
   Kante zwischen beiden lag dann auf halben Pixeln und flimmerte.
   Eigene Ebene fürs Bild, und der Textkörper überlappt um 1 px. */
.phase-bild{transform:translateZ(0);backface-visibility:hidden}
.phase-bild img{backface-visibility:hidden;will-change:transform}
.phase-body{position:relative;z-index:1;margin-top:-1px;padding-top:calc(1.3rem + 1px);
  background:var(--flaeche-hoch)}

/* ═════════════════════════════════════════════════════════════
   Das Band „Danach": TRAGKRAFT steht nicht gleichrangig neben den
   drei Phasen, sondern abgesetzt darunter. Bild links, Text rechts.
   ═════════════════════════════════════════════════════════════ */
.danach{position:relative;display:grid;grid-template-columns:1fr;
  margin-top:clamp(2.5rem,5vw,4rem);border-radius:var(--rund);overflow:hidden;
  text-decoration:none;background:var(--flaeche);
  box-shadow:inset 0 0 0 1px var(--kante);
  transition:transform .6s var(--weich);will-change:transform;backface-visibility:hidden}
@media(min-width:56rem){ .danach{grid-template-columns:26rem 1fr} }
.danach:hover{transform:translateY(-3px)}

/* Feine Trennung nach oben, damit klar ist: hier fängt etwas Neues an. */
.danach::after{content:"";position:absolute;left:8%;right:8%;top:-1px;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(var(--licht-rgb),.35),transparent)}

.danach-bild{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--flaeche-hoch);
  transform:translateZ(0);backface-visibility:hidden}
@media(min-width:56rem){ .danach-bild{aspect-ratio:auto;height:100%;min-height:17rem} }
.danach-bild img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) brightness(.94);
  transition:transform .9s var(--weich),filter .6s var(--weich);
  backface-visibility:hidden;will-change:transform}
.danach:hover .danach-bild img{transform:scale(1.03);filter:saturate(1) brightness(1)}
/* Rechts weich in die Fläche auslaufen lassen. */
@media(min-width:56rem){
  .danach-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,transparent 55%,var(--flaeche) 100%)}
}
@media(max-width:55.99rem){
  .danach-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 55%,var(--flaeche) 100%)}
}

.danach-text{position:relative;z-index:1;display:flex;flex-direction:column;
  gap:.9rem;justify-content:center;padding:clamp(1.6rem,4vw,2.8rem);
  user-select:text;-webkit-user-select:text}
.danach-etikett{font-family:var(--titel);font-size:clamp(1.9rem,3.4vw,2.6rem);
  line-height:1.05;color:var(--creme)}
.danach-satz{font-size:1rem;line-height:1.7;color:var(--text);max-width:42rem}
/* Die Wortmarke darf hier größer stehen als in der Kachel. */
.danach-satz .tk{font-size:1.2em}
.danach-link{display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;
  position:relative;padding-bottom:.25rem;margin-top:.3rem;
  font-weight:600;font-size:.9375rem;color:var(--licht)}
.danach-link svg{width:1em;height:1em;transition:transform .4s var(--weich)}
.danach:hover .danach-link svg{transform:translate(2px,-2px)}
.danach-link::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--verlauf);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--weich)}
.danach:hover .danach-link::before{transform:scaleX(1)}
.danach img{-webkit-user-drag:none}

/* ── Abspiel-Knopf im Roségold der Marke ──────────────────────
   Der Randabstand aus basis.css schob das Dreieck nach rechts.
   Das neue Dreieck hat seinen Schwerpunkt schon bei x=12, darum
   steht es ohne Versatz mittig. */
.video-knauf{background-image:linear-gradient(140deg,#F7E3BC 0%,#EFC3A5 40%,#E3A493 75%,#F2D3B4 100%);
  color:#3A1321;box-shadow:0 10px 40px rgba(227,164,147,.42),inset 0 1px 0 rgba(255,255,255,.5)}
.video-knauf svg{margin-left:0}

/* ── Einwilligungshinweis unter der Videokarte ─────────────────
   Stand vorher im Startknopf und wurde auf dem Telefon ausgeblendet.
   Dort fehlte er also genau dann, wenn jemand ihn braucht. */
.video-halt{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.video-einwilligung{margin:0 auto;max-width:52rem;font-size:.8125rem;line-height:1.5;
  color:var(--grau);text-align:center}
.video-feld[data-stand="frei"] + .video-einwilligung,
.video-feld[data-stand="laeuft"] + .video-einwilligung{display:none}

/* Die Spalte mit Adresse und sozialen Netzen im Fuß. Sie war beim Umbau
   verloren gegangen, in der bisherigen Fassung stand sie dort. */
.fuss-titel{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--licht-hell);margin-bottom:.2rem}

/* Kurzfassung des Hinweises auf den Unterseiten. Die ausführliche
   Fassung mit Aufklapper steht auf der Startseite. */
.hinweis-kurzform{padding:0 0 clamp(2.5rem,5vw,4rem)}
.hinweis-knapp{max-width:52rem;margin:0 auto;padding:1rem 1.3rem;
  border-radius:var(--rund-klein);background:rgba(243,216,218,.04);
  box-shadow:inset 0 0 0 1px var(--kante);
  font-size:.8125rem;line-height:1.65;color:var(--grau)}
.hinweis-knapp strong{color:var(--text);font-weight:600}
.hinweis-knapp a{color:var(--licht-tief);white-space:nowrap}

/* TRAGKRAFT in der Navigation: in Versalien und in den eigenen Farben,
   damit sofort klar ist, dass es kein Menüpunkt dieser Seite ist,
   sondern die Überleitung zur Schwesterseite. */
.menu-tk{display:inline-flex;align-items:center}
.menu-tk .tk{font-size:.9em}
.menu-tk:hover .tk{color:#FFF6EF;-webkit-text-fill-color:#FFF6EF}
.menu-tk:hover .tk span{color:#FFB497;-webkit-text-fill-color:#FFB497}