/* Aingel Variante 13 – Funktionen der Plattform als Tabs im großen Modul der ersten Sektion
   Owner 13.10.: „beim linken Block kannst du den Platz nutzen, um mehr vielleicht Tabs darin einzufügen mit
   verschiedenen Features …, vielleicht auch mit einer Art Autoplay zum nächsten Feature.“
   Oben die Bereiche als Tabs (die Linie im aktiven Tab füllt sich in der Zeit, dann kommt der nächste), darunter ein
   kleines Fenster der Plattform, unten der Text – im selben Format wie in den anderen Modulen. Texte und Fenster aller
   Bereiche liegen je übereinander in einer Zelle: das Modul ändert beim Wechsel nie seine Höhe, der Rahmen des Agenten
   (js/hero.js) bleibt, wo er ist. Der Raum ist in beiden Modi dunkel – hier gelten nur die dunklen Tokens. */

.modul.modul--funktionen {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "tabs tabs" "bild bild" "text platz";
}

/* ---------- Tabs ---------- */
.funktionen__leiste { grid-area: tabs; min-width: 0; }
.funktionen__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.funktionen__tab {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 7px 10px 8px; border-radius: var(--r-pille); overflow: hidden;
  font: 500 13px/1 var(--schrift); color: var(--text-leise);
  background: transparent; border: 1px solid var(--linie); cursor: pointer;
  transition: color .25s var(--kurve), border-color .25s var(--kurve), background-color .25s var(--kurve);
}
@media (hover: hover) { .funktionen__tab:hover { color: var(--text); border-color: var(--geruest); } }
.funktionen__tab[aria-selected='true'] {
  color: var(--text); border-color: color-mix(in srgb, var(--glas) 50%, var(--linie));
  background: color-mix(in srgb, var(--glas) 12%, transparent);
}
.funktionen__tab:focus-visible { outline-offset: 2px; border-radius: var(--r-pille); }
/* Der Lauf: eine feine Linie am unteren Rand des aktiven Tabs füllt sich bis zum Wechsel (js: animationend) */
.funktionen__lauf { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: var(--r-pille); background: color-mix(in srgb, var(--glas) 20%, transparent); opacity: 0; transition: opacity .3s var(--kurve); }
.funktionen__lauf::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--glas); transform-origin: left; transform: scaleX(0); }
.ist-auto [aria-selected='true'] .funktionen__lauf { opacity: 1; }
.ist-auto [aria-selected='true'] .funktionen__lauf::after { animation: funktionen-lauf var(--takt, 6s) linear forwards; }
.ist-angehalten [aria-selected='true'] .funktionen__lauf::after { animation-play-state: paused; }
@keyframes funktionen-lauf { to { transform: scaleX(1); } }

/* ---------- Das Fenster der Plattform je Bereich ---------- */
/* Spalten mit minmax(0, 1fr): die Fenster nehmen die Breite des Moduls an, ihr Inhalt drückt sie nie breiter */
.funktionen__bild { grid-area: bild; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; }
.fenster {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow: hidden;
  border-radius: var(--r-m); border: 1px solid var(--linie);
  background: linear-gradient(180deg, color-mix(in srgb, var(--flaeche-hoch) 92%, transparent), color-mix(in srgb, var(--flaeche) 80%, transparent));
  transition: opacity .45s var(--kurve), transform .55s var(--kurve), visibility 0s;
}
.js .fenster:not(.ist-aktiv) { opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0) scale(.985); transition: opacity .25s var(--kurve), transform .3s var(--kurve), visibility 0s .3s; }
.fenster__kopf { display: flex; align-items: center; gap: 6px; padding: 11px 52px 11px 14px; border-bottom: 1px solid var(--linie); font: 400 11.5px/1 var(--mono); letter-spacing: .04em; color: var(--text-leise); white-space: nowrap; }
.fenster__kopf i { width: 7px; height: 7px; border-radius: 50%; background: var(--geruest); flex: none; }
.fenster__kopf span { min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; }
/* Das Fenster ist so hoch, wie das Modul Platz lässt: je Bereich wächst ein Teil mit (Spalten, Beiträge, Säulen,
   die Seite), der Rest steht oben – wie in der echten Plattform */
.fenster__inhalt { position: relative; min-height: 0; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
/* Ansichten eines Bereichs (Board, Liste, Kalender …) als kleiner Umschalter – zeigt, was es dort gibt */
.fenster__ansichten { justify-self: start; display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pille); border: 1px solid var(--linie); background: color-mix(in srgb, var(--flaeche) 80%, transparent); }
.fenster__ansichten span { padding: 6px 10px; border-radius: var(--r-pille); font: 400 11px/1 var(--mono); color: var(--text-leise); white-space: nowrap; }
.fenster__ansichten .ist-an { color: var(--text); background: color-mix(in srgb, var(--text) 11%, transparent); }
/* Platzhalter-Zeilen, Avatare und kleine Marken – nur Andeutung, kein echter Inhalt */
.fenster em { display: block; height: 7px; border-radius: var(--r-pille); background: color-mix(in srgb, var(--text) 16%, transparent); }
.fenster em.kurz { width: 58%; }
.fenster .avatar { width: 22px; height: 22px; border-radius: 50%; flex: none; background: linear-gradient(135deg, color-mix(in srgb, var(--text) 26%, transparent), color-mix(in srgb, var(--text) 8%, transparent)); }
.fenster__marke {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--r-pille); white-space: nowrap;
  font: 500 11px/1.2 var(--mono); color: var(--text-leise); border: 1px solid var(--linie);
}
.fenster__marke[data-rolle] { color: var(--glas); border-color: color-mix(in srgb, var(--glas) 40%, transparent); background: color-mix(in srgb, var(--glas) 10%, transparent); }
.fenster__marke--du { color: var(--glas-du); border-color: color-mix(in srgb, var(--glas-du) 50%, transparent); background: color-mix(in srgb, var(--glas-du) 10%, transparent); }
.fenster__marke--du::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--glas-du); }

/* Aufgaben: ein Board mit drei Spalten; Agenten arbeiten an drei Karten, eine wartet auf euch, eine ist geprüft */
.brett { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
.brett__spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.brett__spalte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; min-width: 0; padding: 10px 8px; border-radius: var(--r-s); background: color-mix(in srgb, var(--flaeche-tief) 70%, transparent); }
.brett__spalte b { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; color: var(--text-leise); margin-bottom: 2px; }
.karte { position: relative; display: grid; gap: 7px; padding: 11px 11px 12px; border-radius: var(--r-s); border: 1px solid var(--linie); background: color-mix(in srgb, var(--flaeche) 85%, transparent); }
.karte--agent { border-color: color-mix(in srgb, var(--glas) 34%, var(--linie)); }
.karte--agent::before { content: ''; position: absolute; right: 9px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--glas); }
.karte--agent em:first-child { width: 78%; }
.karte__lauf { display: block; height: 3px; border-radius: var(--r-pille); background: color-mix(in srgb, var(--glas) 18%, transparent); overflow: hidden; text-decoration: none; }
.karte__lauf::after { content: ''; display: block; height: 100%; width: 100%; background: var(--glas); transform-origin: left; transform: scaleX(.35); transition: transform 2.6s var(--kurve) .5s; }
.fenster.ist-aktiv .karte__lauf::after { transform: scaleX(.86); }
.karte--du, .karte--fertig { border-color: color-mix(in srgb, var(--glas, var(--glas-du)) 40%, var(--linie)); }
.karte--du .fenster__marke, .karte--fertig .fenster__marke { justify-self: start; margin-top: 2px; }

/* Kunden: die Pipeline in vier Stufen, darunter die Kontakte mit ihrer Stufe */
.pipeline { gap: 8px; align-content: space-between; }
.pipeline__stufen { display: flex; gap: 4px; margin-bottom: 4px; }
.pipeline__stufen span { flex: var(--w) 1 0; display: grid; gap: 6px; font: 400 10.5px/1 var(--mono); color: var(--text-leise); }
.pipeline__stufen span::after { content: ''; height: 8px; border-radius: var(--r-pille); background: color-mix(in srgb, var(--glas) 70%, transparent); }
.pipeline .zeile, .rechnungen .zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 7px 10px; border-radius: var(--r-s); border: 1px solid var(--linie); background: color-mix(in srgb, var(--flaeche) 70%, transparent); }

/* Marketing: drei Beiträge der Kampagne (Bild, Karussell, Reel) und die Woche, in der sie erscheinen */
.kampagne { grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; }
.kampagne__posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.post {
  position: relative; display: grid; align-content: end; gap: 7px; min-height: 112px; padding: 10px; border-radius: var(--r-s); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--glas) 30%, var(--linie));
  background: radial-gradient(circle at 70% 28%, color-mix(in srgb, var(--glas) 46%, transparent) 0 22%, transparent 23%), linear-gradient(160deg, color-mix(in srgb, var(--glas) 20%, var(--flaeche)), var(--flaeche));
}
.post i { position: absolute; left: 10px; top: 10px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--glas) 70%, transparent); }
.post em { width: 70%; }
.post--reel i { left: 50%; top: 40%; width: 0; height: 0; border: 0; border-radius: 0; border-left: 15px solid color-mix(in srgb, var(--glas) 85%, transparent); border-block: 10px solid transparent; translate: -35% -50%; }
.post__punkte { position: absolute; left: 10px; top: 12px; width: 26px; height: 6px; background: radial-gradient(circle, color-mix(in srgb, var(--glas) 85%, transparent) 2.4px, transparent 3px) 0 0 / 9px 6px repeat-x; }
.kampagne__plan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kampagne__plan span { position: relative; display: grid; place-items: center; padding: 8px 0 14px; border-radius: var(--r-s); border: 1px solid var(--linie); font: 400 11px/1 var(--mono); color: var(--text-leise); }
.kampagne__plan .ist-geplant { color: var(--text); border-color: color-mix(in srgb, var(--glas) 36%, var(--linie)); }
.kampagne__plan .ist-geplant::after { content: ''; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--glas); }

/* Finanzen: Umsatz als Säulen, darunter Rechnungen, Belege und das Paket für den Steuerberater */
.rechnungen { gap: 8px; grid-template-rows: minmax(64px, 1fr); align-content: stretch; }
.saeulen { display: flex; align-items: flex-end; gap: 8px; min-height: 64px; padding: 0 2px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--linie); }
.saeulen i { flex: 1; height: calc(var(--h) * 100%); border-radius: var(--r-s) var(--r-s) 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--glas-code) 70%, transparent), color-mix(in srgb, var(--glas-code) 22%, transparent)); transform-origin: bottom; }
.rechnungen .zeile b { font: 500 11px/1 var(--mono); color: var(--text-leise); }

/* Team: der Schichtplan der Woche, eine Person im Urlaub */
.plan { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
.plan__raster { display: grid; grid-template-columns: 26px repeat(5, minmax(0, 1fr)); gap: 9px 6px; align-items: center; align-content: space-evenly; }
.plan__raster > b { font: 400 11px/1 var(--mono); color: var(--text-leise); text-align: center; padding-bottom: 2px; }
.plan__raster .avatar { grid-column: 1; }
.schicht { grid-column: var(--a) / var(--b); height: 24px; border-radius: var(--r-s); background: color-mix(in srgb, var(--glas) 22%, transparent); border: 1px solid color-mix(in srgb, var(--glas) 45%, transparent); transform-origin: left; }
.schicht--frei { display: grid; place-items: center; font: 400 10.5px/1 var(--mono); color: var(--text-leise); background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--text) 7%, transparent) 5px 10px); border: 1px dashed var(--geruest); }

/* Website: eine Seite mit Terminbuchung und den Besuchern der Woche */
.web { grid-template-rows: minmax(0, 1fr); align-content: stretch; }
.web__seite { display: grid; gap: 9px; align-content: center; padding: 18px 16px; border-radius: var(--r-s); background: linear-gradient(120deg, color-mix(in srgb, var(--glas-code) 14%, var(--flaeche)), color-mix(in srgb, var(--glas-text) 12%, var(--flaeche))); border: 1px solid var(--linie); }
.web__seite em:first-child { width: 64%; height: 10px; background: color-mix(in srgb, var(--text) 30%, transparent); }
.web__knopf { width: 86px; height: 22px; margin-top: 4px; border-radius: var(--r-pille); background: color-mix(in srgb, var(--glas-code) 80%, transparent); }
.web__statistik { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 14px; margin-top: 2px; }
.web__titel { font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--text-leise); }
.web__zeiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.web__zeiten span { display: grid; place-items: center; padding: 9px 0; border-radius: var(--r-s); border: 1px solid var(--linie); font: 400 11.5px/1 var(--mono); color: var(--text-leise); transition: color .4s var(--kurve) .9s, border-color .4s var(--kurve) .9s, background-color .4s var(--kurve) .9s; }
.fenster.ist-aktiv .web__zeiten .ist-gewaehlt { color: var(--grund); border-color: var(--glas-code); background: var(--glas-code); }
.web__besuch { display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.web__besuch i { flex: 1; height: calc(var(--h) * 100%); border-radius: var(--r-s) var(--r-s) 0 0; background: color-mix(in srgb, var(--glas-pruefung) 55%, transparent); transform-origin: bottom; }

/* Beim Wechsel (.ist-gewechselt, js) baut sich das Fenster leise auf: Zeilen, Säulen und Schichten nacheinander.
   Das erste Fenster steht gleich fertig da. */
.ist-gewechselt .fenster.ist-aktiv :is(.karte, .zeile, .post, .web__zeiten span) { animation: fenster-rein .55s var(--kurve) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
.ist-gewechselt .fenster.ist-aktiv .pipeline__stufen span { animation: fenster-rein .55s var(--kurve) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
.ist-gewechselt .fenster.ist-aktiv :is(.saeulen i, .web__besuch i) { animation: fenster-hoch .7s var(--kurve) both; animation-delay: calc(var(--i, 0) * 70ms + 100ms); }
.ist-gewechselt .fenster.ist-aktiv .schicht { animation: fenster-breit .7s var(--kurve) both; animation-delay: calc(var(--i, 0) * 90ms + 160ms); }
@keyframes fenster-rein { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
@keyframes fenster-hoch { from { transform: scaleY(.1); opacity: .3; } }
@keyframes fenster-breit { from { transform: scaleX(.12); opacity: .3; } }

/* Anhalten / Fortsetzen des Wechsels – oben rechts im Fenster */
.funktionen__pause {
  position: absolute; z-index: 2; top: 5px; right: 8px; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text-leise); cursor: pointer;
  transition: color .2s var(--kurve), border-color .2s var(--kurve);
}
.funktionen__pause::before { content: ''; width: 7px; height: 9px; border-inline: 2px solid currentColor; }
.funktionen__pause[aria-pressed='true']::before { width: 0; height: 0; border: 0; border-left: 8px solid currentColor; border-block: 5px solid transparent; margin-left: 2px; }
@media (hover: hover) { .funktionen__pause:hover { color: var(--text); border-color: var(--glas); } }

/* ---------- Texte: alle Bereiche übereinander, nur der aktive ist zu sehen ---------- */
.funktionen__tafeln { display: grid; grid-template-columns: minmax(0, 1fr); }
.funktion { display: grid; gap: 10px; align-content: start; justify-items: start; transition: opacity .45s var(--kurve) .08s, transform .5s var(--kurve) .08s, visibility 0s; }
/* übereinander nur mit JavaScript – ohne stehen alle sechs Bereiche lesbar untereinander */
.js .funktion { grid-area: 1 / 1; }
.js .funktion:not(.ist-aktiv) { opacity: 0; visibility: hidden; transform: translate3d(0, 6px, 0); transition: opacity .2s var(--kurve), transform .2s var(--kurve), visibility 0s .2s; }

/* ---------- Mit JavaScript: Tabs und Fenster erscheinen, wenn der Agent das Modul gebaut hat ---------- */
.js .modul--funktionen .funktionen__leiste, .js .modul--funktionen .funktionen__bild { opacity: 0; transition: opacity .5s var(--kurve); }
.js .modul--funktionen.ist-fest .funktionen__leiste { opacity: 1; transition-delay: .1s; }
.js .modul--funktionen.ist-fest .funktionen__bild { opacity: 1; transition-delay: .2s; }

/* ---------- Ohne JavaScript: alle Bereiche als Text untereinander, das erste Fenster als Bild ---------- */
.no-js .funktionen__leiste, .no-js .funktionen__pause { display: none; }
.no-js .fenster:not(:first-child) { display: none; }
.no-js .funktion + .funktion { margin-top: 18px; }

/* Tablet: das Modul ist schmaler – die Tabs dürfen umbrechen (flex-wrap), das Fenster bleibt.
   Telefon: Tabs oben in zwei Reihen, dann der Text mit dem Platz des Agenten, darunter das Fenster */
@media (max-width: 860px) {
  .modul.modul--funktionen { grid-template-rows: auto auto auto; grid-template-areas: "tabs tabs" "text platz" "bild bild"; }
  .funktionen__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .funktionen__tab { min-height: 34px; padding: 6px 4px 8px; font-size: 13px; }
  .funktionen__lauf { left: 10px; right: 10px; }
  /* das Fenster so hoch wie sein Inhalt – alle Fenster liegen übereinander, also bleibt die Höhe beim Wechsel gleich */
  .fenster__inhalt { padding: 12px; gap: 10px; }
  .fenster__kopf { padding: 10px 44px 10px 12px; letter-spacing: 0; }
  .fenster__kopf span { margin-left: 4px; }
  .funktionen__pause { top: 4px; right: 6px; }
  /* Am Telefon zeigt das Board nur „In Arbeit“ und „Freigabe“ – dort passiert, worum es geht */
  .brett__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .brett__spalte:first-child { display: none; }
  .brett__spalte { padding: 8px 6px; }
  .brett__spalte b { font-size: 10px; }
  .karte { padding: 8px; }
  .fenster__marke { font-size: 10px; padding: 3px 7px; }
  .fenster__ansichten span { padding: 5px 8px; font-size: 10.5px; }
  .fenster__ansichten span:nth-child(4) { display: none; }
  .post { min-height: 92px; }
}

/* ---------- Weniger Bewegung: langsamer Wechsel, Fenster blenden nur über ---------- */
@media (prefers-reduced-motion: reduce) {
  .fenster, .funktion { transform: none !important; }
  .ist-gewechselt .fenster.ist-aktiv :is(.karte, .zeile, .post, .web__zeiten span, .pipeline__stufen span, .saeulen i, .web__besuch i, .schicht) { animation-name: fenster-blende; }
  @keyframes fenster-blende { from { opacity: 0; } }
  .karte__lauf::after { transition-duration: 1.2s; }
}