/* === Basis-Struktur === */
  .pane-transition{
    position:relative;
    background:none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    overflow:visible;
    color:#111;
    -webkit-tap-highlight-color: transparent;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif
  }
  .pane-world{
    position:relative;
    padding-top:clamp(2rem, 5vw, 6rem);
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: calc(1rem + env(safe-area-inset-right));
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    height:auto;
    clip-path:none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    background:linear-gradient(0deg,#ffffff,#ffffff);
    opacity:1;
    pointer-events:all;
    width:100%;            /* statt 100vw -> kein horizontaler Overflow */
    transition:background-color .25s ease,color .25s ease;
    z-index:15
  }
  .pane-wrap{
    text-align:center;
    width:100%;
    max-width:min(1200px, 92vw);
    margin-inline:auto;
    padding:0; /* Außen-Padding kommt über .pane-world (Safe-Area) */
  }

  /* ===== Headline & Subline im Aurora-Stil ===== */
  .pane-wrap .pane-title{
    margin: .2rem 0 .6rem;
    text-align:center;
    width:100%;
    display:block;
    font-weight:900;
    letter-spacing:-.02em;
    color:inherit;
    font-size: clamp(2rem, 1.6rem + 2.2vw, 3rem);
    line-height: 1.12;
    text-wrap: balance;
  }
  .pane-wrap .pane-subtitle{
    position: relative;
    color:#0f1729;
    max-width: 62rem;
    margin: 0 auto 2.2rem;
    line-height: 1.78;
    font-size: clamp(1.06rem, 1rem + .6vw, 1.22rem);
    letter-spacing: .004em;
    text-wrap: pretty;
    padding: 1.1rem 1.2rem 1.1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(15,23,41,.06), rgba(15,23,41,.03));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.05);
  }
  :root[data-theme="dark"] .pane-wrap .pane-subtitle{
    color:#fff;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.35);
  }

  /* === Karten-Layout (Basis) === */
  .flow-rail{
    display:grid;                 /* grid als Basis – flexibel */
    grid-template-columns: 1fr;   /* mobile: 1 Spalte */
    gap:clamp(.8rem, 2.5vw, 1rem);
    align-items:stretch;
    justify-items:stretch;
    z-index:15;
    width:100%;
  }

  /* Tablet: 2 Spalten */
  @media (min-width: 601px) and (max-width: 1024px){
    .flow-rail{
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Desktop: Flex-„Kästchen“-Modus via .is-enhanced (unten) */
  @media (min-width: 1025px){
    .flow-rail{
      display:flex;
      gap:1rem;
      justify-content:stretch;
      align-items:stretch;
    }
  }

  .flow-card{
    position:relative;
    border-radius:20px;
    border:1px solid rgba(70,70,70,.15);
    padding:clamp(1.2rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.6rem);
    box-shadow:0 0 0 rgba(0,0,0,0);
    overflow:hidden;
    cursor:pointer;
    --dur:0s;
    height:var(--tile-h,auto);
    min-width:0;                 /* wichtig gegen Überlauf */
    isolation:isolate;           /* für ::after Blend sauber */
  }
  .flow-card.is-growing{ --dur:8s; }
  .flow-card.is-open{ flex:1 1 auto }

  .card-core{
    position:relative;
    z-index:2;
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:.75rem;
    min-width:0;                 /* verhindert Überlauf */
    height:100%;
    overflow-wrap:anywhere;      /* bricht lange Wörter */
  }

  /* h3 – wie Aurora .aether-card h3 */
  .flow-card h3{
    font-size: clamp(1.2rem, 1rem + 1.1vw, 1.9rem);
    color:#fff;
    font-weight:800;
    margin:.1rem 0 .5rem;
    line-height:1.2;
    letter-spacing:-.01em;
    text-shadow:0 1px 2px rgba(0,0,0,.25);
    text-wrap: balance;
  }

  /* p – wie Aurora .copy */
  .flow-card p{
    color: rgba(255,255,255,.96);
    font-weight: 690;
    letter-spacing: -.002em;
    font-size: clamp(1rem, .96rem + .4vw, 1.16rem);
    line-height: 1.7;
    text-wrap: pretty;
    hyphens: auto;
    max-width: 62ch;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
    margin: 0;
  }
  .flow-card .details p{ margin-top:.35rem; }

  .card-num{ font-size:1.4rem;font-weight:900;display:block;margin-bottom:.6rem;color:#fff }

  /* === große Zahl (visueller Akzent) === */
  .card-num-giant{
    position:absolute;right:.6rem;bottom:.6rem;
    font-weight:900;letter-spacing:-.03em;line-height:1;
    font-size:clamp(2.2rem, 10vh, 8rem);
    color:rgba(255,255,255,.18);
    pointer-events:none;z-index:1;white-space:nowrap;text-align:right;
    transform:rotate(-90deg);
    transform-origin:bottom right;
    transition:opacity .35s ease,transform .35s ease;
    mix-blend-mode:soft-light;
  }
  /* auf kleinen Screens ausblenden – spart Platz */
  @media (max-width: 600px){
    .card-num-giant{ display:none; }
  }

  /* === Gradients === */
  .flow-rail .flow-card:nth-child(1){ background:linear-gradient(135deg,#17133b,#17009b,#24225f);background-size:600% 600%;color:#fff }
  .flow-rail .flow-card:nth-child(2){ background:linear-gradient(135deg,#0d0d0d,#000e5c,#0d0d0d);background-size:300% 300%;color:#fff }
    .flow-rail .flow-card:nth-child(3){ background:linear-gradient(135deg,#000000,#0d003b,#000000);background-size:300% 300%;color:#fff }
  .flow-rail .flow-card:nth-child(4){ background:linear-gradient(135deg,#ff5100,hwb(340 0% 0%),#ff5100);background-size:400% 400%;color:#fff }
  .flow-rail .flow-card:nth-child(5){ background:linear-gradient(135deg,#0d0d0d,#000,#0d0d0d);background-size:300% 300%;color:#fff }

  .flow-card[role="button"]:focus-visible{ outline:3px solid rgba(255,255,255,.6);outline-offset:4px }
  :root[data-theme="light"] .flow-card[role="button"]:focus-visible{ outline:3px solid rgba(0,0,0,.35) }

  /* === JS-Modus – Kästchen/Expand nur ab Desktop === */
  @media (min-width: 1025px){
    #flowhub.is-enhanced .flow-card{ flex:0 0 clamp(140px,14vw,220px);transition:flex var(--dur) ease }
    #flowhub.is-enhanced .flow-card.is-open{ flex:1 1 auto }

    #flowhub.is-enhanced .flow-card:not(.is-open) .card-num,
    #flowhub.is-enhanced .flow-card:not(.is-open) h3,
    #flowhub.is-enhanced .flow-card:not(.is-open) p,
    #flowhub.is-enhanced .flow-card:not(.is-open) .details{
      height:0;opacity:0;overflow:hidden;visibility:hidden
    }
    #flowhub.is-enhanced .flow-card.is-open .card-num,
    #flowhub.is-enhanced .flow-card.is-open h3,
    #flowhub.is-enhanced .flow-card.is-open p,
    #flowhub.is-enhanced .flow-card.is-open .details{
      height:auto;opacity:1;visibility:visible;transition:opacity .35s ease .1s
    }

    /* große Zahl per ::after nur auf Desktop */
    #flowhub.is-enhanced .flow-card::after{
      content:attr(data-stage);
      position:absolute;right:1rem;bottom:10rem;
      transform:rotate(-90deg);
      transform-origin:bottom right;
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Roboto Mono",monospace;
      font-weight:900;
      font-size:clamp(3rem,12vh,8rem);
      line-height:1;
      color:rgba(255,255,255,.4);
      white-space:nowrap;
      pointer-events:none;
      z-index:3;
      opacity:1;
      transition:opacity .25s ease;
      mix-blend-mode:soft-light;
    }
    #flowhub.is-enhanced .flow-card.is-open::after{ opacity:0 }
  }

  /* === Fallback ohne JS (immer grid, kein Kästchen) === */
  #flowhub:not(.is-enhanced) .flow-card{
    flex:1 1 320px !important;
    height:auto !important;
    --tile-h:auto !important;
    transition:none !important;
  }
  #flowhub:not(.is-enhanced) .flow-card .card-core{
    clip-path:none !important;
    min-width:0;
  }
  #flowhub:not(.is-enhanced) .flow-card .card-num,
  #flowhub:not(.is-enhanced) .flow-card h3,
  #flowhub:not(.is-enhanced) .flow-card p,
  #flowhub:not(.is-enhanced) .flow-card .details{
    height:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:visible !important;
  }
  #flowhub:not(.is-enhanced) .flow-card::after{ display:none !important }

  /* === Feintuning Responsiv === */
  /* kleine Landscape-Displays: etwas kompakter */
  @media (max-height: 520px) and (max-width: 900px){
    .pane-world{ padding-top:1.2rem; }
    .pane-wrap .pane-subtitle{ margin-bottom:1.2rem; }
    .flow-card{ padding:1rem; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }
  /* verstecke Inhalte der Karten erst, wenn .booted aktiv ist */
#flowhub.is-enhanced.booted .flow-card:not(.is-open) .card-num,
#flowhub.is-enhanced.booted .flow-card:not(.is-open) h3,
#flowhub.is-enhanced.booted .flow-card:not(.is-open) p,
#flowhub.is-enhanced.booted .flow-card:not(.is-open) .details{
  height:0;
  opacity:0;
  overflow:hidden;
  visibility:hidden;
}
/* ===============================
   FLOWHUB — Dark Mode
   Hintergrund immer #000 + Titel/Subline anpassen
   =============================== */

:root[data-theme="dark"] #flowhub .pane-world{
  background: #000 !important;
  color: #fff !important;
}

/* Überschrift */
:root[data-theme="dark"] #flowhub .pane-wrap .pane-title{
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

/* Subline (Glas-Look auf Schwarz) */
:root[data-theme="dark"] #flowhub .pane-wrap .pane-subtitle{
  color: #e8eeff !important;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 8px rgba(0,0,0,.45) !important;
}

/* Optional: System-Dark bei data-theme="auto" */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #flowhub .pane-world{
    background: #000 !important;
    color: #fff !important;
  }
  :root[data-theme="auto"] #flowhub .pane-wrap .pane-title{
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  }
  :root[data-theme="auto"] #flowhub .pane-wrap .pane-subtitle{
    color: #e8eeff !important;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      0 2px 8px rgba(0,0,0,.45) !important;
  }
}
:root[data-theme="dark"] #flowhub .flow-card{
  border: 1px solid rgba(255,255,255,0.35) !important;
}

@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #flowhub .flow-card{
    border: 1px solid rgba(255,255,255,0.35) !important;
  }
}

/* 1) Unteren Sicherheitsabstand als Variable einführen */
.flow-card{
  /* NEU */
  --card-bottom-safe: 2.25rem;               /* Grundabstand unten */
  padding-top: clamp(1.2rem, 2.5vw, 2rem);
  padding-right: clamp(1rem, 2vw, 1.6rem);
  /* NEU: padding-bottom inkl. Sicherheitsabstand */
  padding-bottom: calc(clamp(1.2rem, 2.5vw, 2rem) + var(--card-bottom-safe));
  padding-left: clamp(1rem, 2vw, 1.6rem);
}

/* 2) Im Desktop-/Enhanced-Modus etwas mehr Luft, 
      weil ::after / .card-num-giant dort eine Rolle spielen kann */
@media (min-width: 1025px){
  #flowhub.is-enhanced .flow-card{
    --card-bottom-safe: 3.5rem;              /* mehr Freiraum unten */
  }
  /* Optional: wenn eine Karte offen ist, minimal kompakter */
  #flowhub.is-enhanced .flow-card.is-open{
    --card-bottom-safe: 2.75rem;
  }
}

/* 3) Kleinigkeit: kein zusätzlicher “letzter Rand” in Details */
.flow-card .details:last-child{ margin-bottom: 0; }

/* === FLOWHUB: Stage bei 1600px deckeln + fester Außenabstand === */
#flowhub {
  --flow-stage: 1300px;     /* maximale Bühnenbreite */
  --flow-gutter: 2rem;      /* Außenabstand je Seite */
}

/* Außenabstand der Sektion (respektiert Safe-Area) */
#flowhub .pane-world{
  padding-left:  max(var(--flow-gutter), calc(1rem + env(safe-area-inset-left)));
  padding-right: max(var(--flow-gutter), calc(1rem + env(safe-area-inset-right)));
}

/* Bühne zentrieren + bei 1600px klemmen (überschreibt die 1200px aus .pane-wrap) */
#flowhub .pane-wrap{
  max-width: var(--flow-stage) !important;
  width: 100%;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/* Desktop-„Kästchen“-Modus: Rail selbst nicht darüber hinausziehen */
@media (min-width:1025px){
  #flowhub .flow-rail{
    max-width: var(--flow-stage);
    margin-inline: auto;
  }
}

/* Sicherheitsnetz: kein horizontales Scrollen durch Subpixel */
#flowhub .pane-world,
#flowhub .pane-wrap{ overflow-x: clip; }

/* === FLOWHUB – Mobile Ansicht (breit wie Aurora, kurze Texte) === */
@media (max-width: 699.98px){
  /* Gutter wie bei Aurora */
  #flowhub {
    --flow-mobile-gutter: clamp(14px, 4vw, 20px);
  }

  /* Bühne nutzt volle Breite, keine schmale 92vw-Klemme */
  #flowhub .pane-wrap{
    max-width: none !important;
    width: 100% !important;
    padding-inline: 0 !important;
  }

  /* Einspaltig, etwas engerer Abstand */
  #flowhub .flow-rail{
    grid-template-columns: 1fr !important;
    gap: .9rem !important;
    justify-items: stretch !important;
  }

  /* Karten: so breit wie Aurora (quasi full-bleed, aber mit sicherem Gutter) */
  #flowhub .flow-card{
    width: calc(100% - var(--flow-mobile-gutter) * 2) !important;
    margin-inline: auto !important;
    border-radius: 16px !important;

    /* kompakter, aber mit Bodenluft (du nutzt --card-bottom-safe schon) */
    padding: 14px 16px calc(16px + var(--card-bottom-safe)) 16px !important;

    /* Hintergründe nicht „zu groß“ wirken lassen */
    background-size: 300% 300% !important;
    background-position: 55% 50% !important;

    /* keine Kästchen-/Expand-Mechanik mobil */
    flex: 0 0 auto !important;
    height: auto !important;
  }

  /* Headline der Karte knapper */
  #flowhub .flow-card h3{
    margin: 0 0 .25rem !important;
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
  }

  /* Mobile-Snippet einblenden … */
  #flowhub .flow-card .m-snippet{
    display: block !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    letter-spacing: .002em !important;
    color: rgba(255,255,255,.98) !important;
    margin: 0 !important;
    text-wrap: pretty;
  }

  /* … und die langen Texte mobil ausblenden */
  #flowhub .flow-card > .card-core > p:not(.m-snippet),
  #flowhub .flow-card .details{
    display: none !important;
  }

  /* optisch ruhigere Gradients pro Karte (optional feinjustieren) */
  #flowhub .flow-rail .flow-card:nth-child(1){ background-size: 340% 340% !important; background-position: 50% 55% !important;     background: linear-gradient(270deg, #030053, #0a0091, #090087);}
  #flowhub .flow-rail .flow-card:nth-child(2){ background-size: 1200% 100% !important; background-position: 100% 100% !important;  background: linear-gradient(200deg, #ff5100, #ff006a, #ff6600); }
  #flowhub .flow-rail .flow-card:nth-child(3){ background-size: 200% 150% !important; background-position: 50% 100% !important; }
  #flowhub .flow-rail .flow-card:nth-child(4){ background-size: 550% 400% !important; background-position: 152% 152% !important; }
  #flowhub .flow-rail .flow-card:nth-child(5){ background-size: 300% 300% !important; background-position: 50% 55% !important; }

  /* Riesen-Zahl mobil verstecken (Platz sparen) */
  #flowhub .card-num-giant{ display:none !important; }

  /* Sicherheitsnetz: nichts ragt seitlich raus */
  #flowhub .pane-world,
  #flowhub .pane-wrap{ overflow-x: clip !important; }
}

/* === FLOWHUB – Mobile: Karten breiter, kleiner Außenrand === */
@media (max-width: 699.98px){
  /* Außenabstand der Section straffen (respect Safe-Area) */
  #flowhub .pane-world{
    padding-left:  max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  /* Bühne darf volle Breite nutzen */
  #flowhub .pane-wrap{
    max-width: 100% !important;
  }

  /* Grid enger zusammenrücken */
  #flowhub .flow-rail{
    gap: .75rem !important;
  }

  /* Karten kompakter & breiter */
  #flowhub .flow-card{
    width: 100% !important;
    margin-inline: 0 !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
  }

  /* Optional: „nahezu edge-to-edge“ Look aktivieren:
     Setz data-edge auf dem Section-Tag: <section id="flowhub" data-edge>
  */
  #flowhub[data-edge] .pane-world{
    padding-left:  max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }
}

/* Tablet-Kurztexte (leicht gekürzt, aber nicht so kurz wie mobile) */
@media (min-width:700px) and (max-width:1240px){
  #flowhub .flow-card .t-snippet{
    display:block !important;
    font-size:1.05rem !important;
    line-height:1.6 !important;
    font-weight:700 !important;
    color:rgba(255,255,255,.96) !important;
    margin:0 !important;
  }
  #flowhub .flow-card > .card-core > p:not(.t-snippet),
  #flowhub .flow-card .details,
  #flowhub .flow-card .m-snippet{
    display:none !important;
  }
}

/* Tablet-Sonderfall: Wenn die letzte Karte alleine in der letzten Reihe steht
   (also bei 2-Spalten-Grid + ungerader Anzahl), soll sie die volle Breite einnehmen
   und unten rechts ein Bild zeigen. */
@media (min-width:700px) and (max-width:1024px){
  /* volle Breite nur, wenn die Gesamtzahl ungerade ist -> last + nth-child(odd) */
  #flowhub .flow-rail > .flow-card:last-child:nth-child(odd){
    grid-column: 1 / -1;                      /* über beide Spalten */
    position: relative;                        /* Anker für ::after-Bild */
    --solo-img-w: clamp(140px, 26vw, 220px);   /* Bildbreite */
    /* rechts Platz fürs Bild schaffen */
    padding-right: calc(clamp(1rem, 2vw, 1.6rem) + var(--solo-img-w) + 12px);
  }

  /* Bild unten rechts einblenden (nur wenn alleine & in diesem Breakpoint) */
  #flowhub .flow-rail > .flow-card:last-child:nth-child(odd)::after{
    content: "";
    position: absolute;
    right: clamp(10px, 2vw, 18px);
    bottom: var(--card-bottom-safe, 2.25rem);
    width: var(--solo-img-w);
    aspect-ratio: 1 / 1;                       /* quadratisch; gerne anpassen */
    background: var(--solo-img, none) center / contain no-repeat;
    opacity: .98;
    pointer-events: none;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.25));
  }
}

/* === FLOWHUB — Aurora-Gutter wie in .aurora-sheet ===================== */
/* Basis: 1rem Seitenabstand; ab Desktop (≥1025px) 2rem – safe-area aware */
#flowhub {
  --aurora-gutter: 1rem;            /* wie .aurora-sheet mobil/tablet */
  --flow-stage:  1500px;            /* Bühne/Maxbreite für Inhalte */
}
@media (min-width:1025px){
  #flowhub { --aurora-gutter: 2rem; }
}

/* Außenabstand der Section (respektiert Safe-Area) */
#flowhub .pane-world{
  padding-left:  max(var(--aurora-gutter), env(safe-area-inset-left));
  padding-right: max(var(--aurora-gutter), env(safe-area-inset-right));
}

/* Bühne zentrieren und mit gleichem „optischen Rand“ klemmen */
#flowhub .pane-wrap{
  width: 100%;
  margin-inline: auto;
  max-width: min(var(--flow-stage), calc(100% - var(--aurora-gutter) * 2));
  padding-inline: 0; /* Außenabstand kommt von .pane-world */
}

/* Flex/Grid-Rail soll nicht über die Bühne hinausragen */
#flowhub .flow-rail{
  max-width: min(var(--flow-stage), calc(100% - var(--aurora-gutter) * 2));
  margin-inline: auto;
}

/* Mobile: nichts über den Rand schieben, aber Aurora-Gutter beibehalten */
@media (max-width:699.98px){
  #flowhub .pane-wrap{ max-width: none; } /* volle Breite, Klemme über .pane-world */
  #flowhub .flow-rail{
    max-width: none;               /* Rail darf volle Breite nutzen */
    width: 100%;
  }
}
/* === FLOWHUB – Mobile Korrektur: Karten nicht am Rand abschneiden === */
@media (max-width: 699.98px){

  /* 1) Standard: immer mit sicherem Außenrand (Gutter) */
  #flowhub {
    --flow-mobile-gutter: clamp(14px, 4vw, 20px);
  }

  /* Bühne/Wrap: Rand geben und nichts hart wegschneiden */
  #flowhub .pane-world{
    padding-left:  max(var(--flow-mobile-gutter), env(safe-area-inset-left)) !important;
    padding-right: max(var(--flow-mobile-gutter), env(safe-area-inset-right)) !important;
    overflow-x: visible !important;   /* statt clip – sonst schneidet es */
  }
  #flowhub .pane-wrap{
    max-width: none !important;
    width: 100% !important;
    padding-inline: 0 !important;
    overflow-x: visible !important;   /* Fokus-/Shadow-Ränder sichtbar lassen */
  }

  /* Rail nutzt volle Breite innerhalb der Bühne */
  #flowhub .flow-rail{
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
    gap: .9rem !important;
    margin-inline: 0 !important;
  }

  /* Karten: Breite = 100% minus Gutter der Bühne (sauber zentriert) */
  #flowhub .flow-card{
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: calc(100% - var(--flow-mobile-gutter) * 2) !important;
    margin-inline: auto !important;
    border-radius: 16px !important;

    /* kompakte Innenabstände + zusätzlicher „Boden-Safe“ bleibt erhalten */
    padding: 14px 16px calc(16px + var(--card-bottom-safe)) 16px !important;

    /* Hintergründe etwas ruhiger auf klein */
    background-size: 300% 300% !important;
    background-position: 55% 50% !important;
  }

  /* 2) Optionaler Edge-to-edge-Modus:
     Wenn du <section id="flowhub" data-edge> setzt, gehen Karten bewusst nahezu bis zum Rand,
     aber wir respektieren weiterhin die Safe-Areas. */
  #flowhub[data-edge] .pane-world{
    padding-left:  max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }
  #flowhub[data-edge] .flow-card{
    width: 100% !important;
    margin-inline: 0 !important;
  }
}
/* === FLOWHUB – Mobile: Unterüberschrift so breit wie eine Karte === */
@media (max-width: 699.98px){
  #flowhub {
    --flow-mobile-gutter: clamp(14px, 4vw, 20px);
  }

  /* Unterüberschrift (pane-subtitle) begrenzen wie Karte */
  #flowhub .pane-wrap .pane-subtitle{
    box-sizing: border-box !important;
    max-width: calc(100% - var(--flow-mobile-gutter) * 2) !important;
    margin-inline: auto !important;      /* zentrieren */
    padding-inline: 1rem !important;     /* etwas Luft im Inneren */
    border-radius: 14px !important;

    /* behält deinen Aurora-Look */
    background: linear-gradient(180deg, rgba(15,23,41,.06), rgba(15,23,41,.03)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.05) !important;
  }

  /* Dark Mode angleichen */
  :root[data-theme="dark"] #flowhub .pane-wrap .pane-subtitle{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
    box-shadow: inset 0 1px 0 rgba(0,0,0,.6), 0 2px 8px rgba(255,255,255,.05) !important;
  }
}
/* === Galerie-Footer: Icon dauerhaft schwarz (auch auf iOS) === */
.footer-action svg {
  stroke: #000 !important;            /* Linien-Icons (z. B. Lucide, Feather) */
  fill: none !important;              /* sicherstellen, dass nichts überlagert */
  -webkit-text-fill-color: #000 !important; /* iOS-Fallback */
  opacity: 1 !important;
}

/* Optional: falls du Solid-Icons oder FontAwesome nutzt */
.footer-action svg path {
  fill: #000 !important;
  stroke: #000 !important;
}

/* Dark Mode – nur wenn du wirklich schwarz beibehalten willst */
:root[data-theme="dark"] .footer-action svg,
:root[data-theme="dark"] .footer-action svg path {
  stroke: #000 !important;
  fill: #000 !important;
}
/* === MOBILE WIDER CARDS (sanft) =============================== */
@media (max-width: 699.98px){
  /* 1) Weniger Außenrand = Karten wirken breiter */
  #flowhub{
    /* vorher: clamp(14px, 4vw, 20px) */
    --flow-mobile-gutter: clamp(10px, 3vw, 16px) !important;
  }

  /* 2) Bühne übernimmt den kleineren Gutter */
  #flowhub .pane-world{
    padding-left:  max(var(--flow-mobile-gutter), env(safe-area-inset-left)) !important;
    padding-right: max(var(--flow-mobile-gutter), env(safe-area-inset-right)) !important;
  }

  /* 3) Kartenbreite neu auf Basis des kleineren Gutters berechnen */
  #flowhub .flow-card{
    width: calc(100% - var(--flow-mobile-gutter) * 2) !important;
    margin-inline: auto !important;
  }

  /* 4) Subline (falls vorhanden) an Kartenbreite anpassen */
  #flowhub .pane-wrap .pane-subtitle{
    max-width: calc(100% - var(--flow-mobile-gutter) * 2) !important;
  }
}
/* === FLOWHUB – Mobile Timeline (links neben den Karten) – hübsch + linearer Tracker === */
@media (max-width: 699.98px){
  /* Basis: Platz für Timeline links */
  #flowhub .flow-rail{
    position: relative;
    padding-left: 64px;                 /* mehr Luft links */
    --tl-x: 26px;                       /* X-Position der Timeline im Rail */
    --tracker-y: 0px;                   /* wird via JS gesetzt */
    --tl-line: rgba(0,0,0,.25);
    --tl-tick: rgba(0,0,0,.4);
    --tl-bg: #fff;
    --tl-dot: #000;
  }

  /* Vertikale Linie mit weichem Verlauf (oben/unten leicht ausgeblendet) */
  #flowhub .flow-rail::before{
    content:"";
    position: absolute;
    left: var(--tl-x);
    top: 0; bottom: 0;
    width: 3px;
    border-radius: 3px;
    background:
      linear-gradient(to bottom, transparent 0%, var(--tl-line) 10%, var(--tl-line) 90%, transparent 100%);
    z-index: 1;
  }

  /* kleine Ticks zwischen den Karten (rein optisch) */
  #flowhub .flow-card{
    position: relative;
  }
  #flowhub .flow-card::before{
    /* horizontaler Connector von Karte zur Timeline (mittig zur Karte) */
    content:"";
    position: absolute;
    left: calc(var(--tl-x) + 3px);      /* direkt rechts neben der Linie */
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 2px;
    background: var(--tl-tick);
    border-radius: 2px;
    z-index: 2;
    pointer-events: none;
  }
  #flowhub .flow-card::after{
    /* kleines statisches Knubbelchen am Ende des Connectors (optional) */
    content:"";
    position: absolute;
    left: calc(var(--tl-x) - 7px);
    top: 50%;
    transform: translate(-50%,-50%);
    width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--tl-dot);
    outline: 2px solid var(--tl-bg);    /* Halo für Kontrast */
    z-index: 2;
    pointer-events: none;
    opacity: .7;
  }

  /* Der bewegte Tracker-Punkt auf der Timeline */
  #flowhub .flow-rail::after{
    content:"";
    position: absolute;
    left: var(--tl-x);
    top: var(--tracker-y);
    transform: translate(-50%,-50%);
    width: 16px; height: 16px;
    border-radius: 999px;
    background: var(--tl-dot);
    outline: 4px solid var(--tl-bg);    /* sauberer Ring statt border (ausschnittsicher) */
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
    z-index: 3;
    transition: top .10s linear;        /* leicht geglättet; entferne für 1:1 scroll */
    pointer-events: none;
  }

  /* Spacing zwischen Karten etwas großzügiger, damit die Mittellinie wirkt */
  #flowhub .flow-card + .flow-card{ margin-top: 24px; }

  /* Dark Mode */
  :root[data-theme="dark"] #flowhub .flow-rail{
    --tl-line: rgba(255,255,255,.35);
    --tl-tick: rgba(255,255,255,.55);
    --tl-bg: #0b0b0b;
    --tl-dot: #fff;
  }

  /* Motion-Respect */
  @media (prefers-reduced-motion: reduce){
    #flowhub .flow-rail::after{ transition: none; }
  }
}
/* Mobile: horizontaler Balken je Karte entfernen */
@media (max-width: 699.98px){
  #flowhub .flow-card::before{
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}


/* ==== FLOWHUB – Mobile Card Polish (≤700px) ============================ */
@media (max-width: 699.98px){
  #flowhub{
    /* feiner Gutter + Farben als Tokens */
    --flow-mobile-gutter: clamp(12px, 3.6vw, 18px);
    --card-radius: 16px;
    --card-bg-glass-light: rgba(255,255,255,.08);
    --card-bg-glass-dark:  rgba(255,255,255,.04);
    --card-border: rgba(255,255,255,.22);
    --card-shadow: 0 6px 16px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.15) inset;
    --ink: rgba(255,255,255,.96);
    --ink-dim: rgba(255,255,255,.82);
  }
  :root[data-theme="light"] #flowhub{
    --card-bg-glass-light: rgba(15,23,41,.06);
    --card-bg-glass-dark:  rgba(15,23,41,.03);
    --card-border: rgba(15,23,41,.10);
    --card-shadow: 0 8px 22px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.65) inset;
    --ink: #10141f;
    --ink-dim: rgba(16,20,31,.8);
  }

  /* Bühne: links Platz für Timeline, aber sanfter Außenrand */
  #flowhub .pane-world{
    padding-left:  max(var(--flow-mobile-gutter), env(safe-area-inset-left)) !important;
    padding-right: max(var(--flow-mobile-gutter), env(safe-area-inset-right)) !important;
  }

  /* Rail: Timeline-Gasse links, engeres Grid */
  #flowhub .flow-rail{
    position: relative;
    padding-left: 64px;             /* Platz für Timeline/Kreis */
    gap: .85rem !important;
  }

  /* === Card Surface – Layered Glass + ruhiger Verlauf ================= */
  #flowhub .flow-card{
    box-sizing: border-box !important;
    width: calc(100% - var(--flow-mobile-gutter) * 2) !important;
    margin-inline: auto !important;

    border-radius: var(--card-radius) !important;
    padding: 14px 16px calc(16px + var(--card-bottom-safe, 2.25rem)) 16px !important;

    /* ruhiger machen, Eigenverlauf bleibt als Basis */
    background-size: 280% 280% !important;
    background-position: 55% 52% !important;

    /* dezenter Glas-Layer oben drauf */
    position: relative;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    isolation: isolate;
    will-change: transform;
    transform: translateZ(0); /* fix subtle blur on iOS */
  }
  /* Soft glass + grain overlay */
  #flowhub .flow-card::before{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    background:
      /* zarter Verlauffilm */
      linear-gradient(180deg, var(--card-bg-glass-light), var(--card-bg-glass-dark)),
      /* feine Körnung (Base64 1x1 noise oder system noise fallback) */
      radial-gradient(100% 100% at 0% 0%, rgba(255,255,255,.08) 0, transparent 60%),
      radial-gradient(120% 140% at 100% 0%, rgba(0,0,0,.08) 0, transparent 60%);
    mix-blend-mode: soft-light;
    pointer-events:none;
    z-index:1;
  }

  /* Tap/Focus States – professionell & zurückhaltend */
  #flowhub .flow-card[role="button"]{ touch-action: manipulation; }
  #flowhub .flow-card:active{
    transform: translateY(1px);
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
  }
  #flowhub .flow-card[role="button"]:focus-visible{
    outline: 2px solid rgba(255,255,255,.6);
    outline-offset: 3px;
  }
  :root[data-theme="light"] #flowhub .flow-card[role="button"]:focus-visible{
    outline-color: rgba(0,0,0,.35);
  }

  /* === Typografie – kompakt, hochwertig =============================== */
  #flowhub .flow-card .card-core{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: .55rem;  /* enger, aber luftiger als vorher */
  }

  #flowhub .flow-card .card-num{
    margin: 0 0 .35rem;
    color: var(--ink-dim);
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .02em;
    opacity: .9;
  }

  #flowhub .flow-card h3{
    margin: 0 0 .28rem !important;
    font-size: clamp(1.08rem, 1rem + .9vw, 1.32rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -.01em !important;
    color: var(--ink) !important;
    text-shadow: none !important;     /* cleaner Look */
  }

  /* kurze, kräftige Copy mobil */
  #flowhub .flow-card .m-snippet{
    display: block !important;
    margin: 0 !important;
    color: var(--ink) !important;
    font-weight: 700 !important;
    font-size: clamp(.98rem, .95rem + .35vw, 1.08rem) !important;
    line-height: 1.5 !important;
    letter-spacing: .003em !important;
    text-wrap: pretty;
  }
  /* lange Texte & Details mobil ausblenden */
  #flowhub .flow-card > .card-core > p:not(.m-snippet),
  #flowhub .flow-card .details{
    display: none !important;
  }

  /* große Zahl mobil aus: Platz sparen */
  #flowhub .card-num-giant{ display:none !important; }

  /* === Timeline-Optik links – ruhiger & kontrastklar =================== */
  #flowhub .flow-rail{
    --tl-x: 26px;
    --tracker-y: 0px;
    --tl-line: rgba(0,0,0,.2);
    --tl-dot:  rgba(0,0,0,.9);
    --tl-bg:   #fff;
  }
  :root[data-theme="dark"] #flowhub .flow-rail{
    --tl-line: rgba(255,255,255,.28);
    --tl-dot:  #fff;
    --tl-bg:   #0b0b0b;
  }
  #flowhub .flow-rail::before{
    content:"";
    position:absolute; left: var(--tl-x); top:0; bottom:0;
    width: 2px; border-radius: 2px;
    background: linear-gradient(to bottom, transparent 0%, var(--tl-line) 12%, var(--tl-line) 88%, transparent 100%);
    z-index:0;
  }
  #flowhub .flow-rail::after{
    content:"";
    position:absolute; left: var(--tl-x); top: var(--tracker-y);
    transform: translate(-50%,-50%);
    width: 14px; height: 14px; border-radius: 999px;
    background: var(--tl-dot);
    outline: 4px solid var(--tl-bg);
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
    z-index: 2;
  }

  /* Karten optisch an Timeline anbinden (dezenter Tick) */
  #flowhub .flow-card::after{
    content:"";
    position:absolute;
    left: calc(var(--tl-x) + 3px);
    top: 50%; transform: translateY(-50%);
    width: 16px; height: 2px; border-radius: 2px;
    background: color-mix(in oklab, var(--tl-dot) 50%, transparent);
    opacity: .55;
    pointer-events: none;
    z-index: 1;
  }

  /* Zwischenräume minimal größer, damit die Timeline atmen kann */
  #flowhub .flow-card + .flow-card{ margin-top: 18px; }
}

/* ==== Dark-Mode Feinschliff für mobile Cards ========================= */
@media (max-width: 699.98px){
  :root[data-theme="dark"] #flowhub .flow-card{
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.12) inset;
  }
  :root[data-theme="dark"] #flowhub .flow-card::before{
    background:
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
      radial-gradient(100% 100% at 0% 0%, rgba(255,255,255,.05) 0, transparent 60%),
      radial-gradient(120% 140% at 100% 0%, rgba(0,0,0,.25) 0, transparent 60%);
  }
}

/* Motion-Respect */
@media (prefers-reduced-motion: reduce){
  #flowhub .flow-card{ transition: none !important; }
}

/* === FLOWHUB – Cards: immer weiße Schrift + schöne Outline ================= */

/* 1) Typo in Karten immer weiß (alle Breakpoints) */
#flowhub .flow-card,
#flowhub .flow-card h3,
#flowhub .flow-card p,
#flowhub .flow-card .m-snippet,
#flowhub .flow-card .t-snippet,
#flowhub .flow-card .card-num,
#flowhub .flow-card .details,
#flowhub .flow-card a,
#flowhub .flow-card a:visited{
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.18); /* subtiler Kontrast auf hellen Gradients */
}

/* 2) Edle Border: innerer „Glass“-Stroke + äußere Kontur (ohne Extra-Markup) */
#flowhub .flow-card{
  border: 1px solid transparent !important;           /* echte Border übernimmt die Radius-Kontur */
  box-shadow:
    /* äußerer weicher Ring / Lift */
    0 8px 22px rgba(0,0,0,.18),
    /* dezente Außenkontur */
    0 0 0 1px rgba(255,255,255,.08),
    /* feiner Innen-Stroke (wirkt wie polierte Kante) */
    inset 0 0 0 1px rgba(255,255,255,.22) !important;
  backdrop-filter: saturate(1.05);                     /* minimal satter, wirkt „teurer“ */
}

/* 3) Overlay veredeln: dein ::before bleibt, bekommt aber eine präzisere Kante */
#flowhub .flow-card::before{
  /* bestehende Hintergründe aus deiner CSS bleiben,
     wir ergänzen nur eine saubere Innenkante über outline */
  outline: 1px solid rgba(255,255,255,.14);
  outline-offset: -1px;                /* sitzt exakt auf der Innenkante */
  border-radius: inherit;
}

/* 4) Interaktion – Border reagiert subtil auf Hover/Active/Focus */
#flowhub .flow-card:hover{
  box-shadow:
    0 10px 26px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.26) !important;
}
#flowhub .flow-card:active{
  transform: translateY(1px);
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.30) !important;
}

/* Tastaturfokus — klare, aber elegante Kontur */
#flowhub .flow-card[role="button"]:focus-visible{
  outline: 2px solid rgba(255,255,255,.75) !important;
  outline-offset: 3px !important;
}

@media (max-width: 699.98px) {
  #flowhub .pane-world {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}
/* ================================
   FLOWHUB – Mobile Cards: deutlich cleaner
   ================================ */
@media (max-width: 699.98px){

  /* Timeline & Deko auf Mobile ausblenden – Fokus nur auf Karten */
  #flowhub .flow-rail::before,
  #flowhub .flow-rail::after,
  #flowhub .flow-card::before,
  #flowhub .flow-card::after{
    content: none !important;
    display: none !important;
  }

  /* Rail: einfache, saubere Spalte */
  #flowhub .flow-rail{
    padding-left: 0 !important;
    margin-inline: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    justify-items: stretch !important;
  }

  /* Karten: wie hochwertige „Steps“ – ruhiger, klarer Block */
  #flowhub .flow-card{
    position: relative;
    box-sizing: border-box !important;

    width: 100% !important;
    margin-inline: 0 !important;

    border-radius: 18px !important;
    padding: 1.1rem 1.2rem 1.2rem !important;

    /* ruhiger Hintergrund mit subtiler Tiefe */
    background-size: 260% 260% !important;
    background-position: 50% 52% !important;
    border: 1px solid rgba(148,163,184,.45) !important;
    box-shadow:
      0 10px 26px rgba(15,23,42,.45),
      0 1px 0 rgba(255,255,255,.12) inset !important;

    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: .85rem;
    align-items: flex-start;

    transform: translateZ(0);
  }

  /* Step-Nummer links als kleines Label */
  #flowhub .flow-card .card-num{
    margin: 0;
    align-self: flex-start;
    padding: .22rem .55rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(15,23,42,.98);
    background: rgba(248, 250, 252, 0);
    text-shadow: none;
    white-space: nowrap;
  }

  /* Text-Block rechts: Nummer + Titel + Kurztext sauber gestapelt */
  #flowhub .flow-card .card-core{
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: .3rem;
  }

  /* Titel: an CTA-Style angelehnt, aber mobile-tauglich */
  #flowhub .flow-card h3{
    margin: 0 !important;
    font-size: clamp(1.08rem, 1rem + .9vw, 1.3rem) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
    text-align: left !important;
  }

  /* Kurztext (m-snippet) als Hauptcopy auf Mobile */
  #flowhub .flow-card .m-snippet{
    display: block !important;
    margin: 0 !important;
    font-size: .98rem !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    letter-spacing: .002em !important;
    text-align: left !important;
    text-wrap: pretty;
  }

  /* Lange Texte & Details ausblenden – Mobile braucht Fokus */
  #flowhub .flow-card > .card-core > p:not(.m-snippet),
  #flowhub .flow-card .details{
    display: none !important;
  }

  /* Riesige dekorative Zahl mobil weg */
  #flowhub .card-num-giant{
    display: none !important;
  }

  /* Tap-Feedback dezent */
  #flowhub .flow-card[role="button"]{ touch-action: manipulation; }
  #flowhub .flow-card:active{
    transform: translateY(1px);
    box-shadow:
      0 6px 18px rgba(15,23,42,.4),
      0 1px 0 rgba(255,255,255,.08) inset !important;
  }
}
/* ============================
   FLOWHUB – Mobile Cards (≤700px)
   Nummer + Text schöner
   ============================ */
@media (max-width: 699.98px){

  /* Rail: simple Spalte, kein Extra-Padding links */
  #flowhub .flow-rail{
    padding-left: 0 !important;
    margin-inline: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    justify-items: stretch !important;
  }

  /* Karte: „Step Card“ Layout */
  #flowhub .flow-card{
    position: relative;
    box-sizing: border-box !important;

    width: 100% !important;
    margin-inline: 0 !important;

    border-radius: 18px !important;
    padding: 1rem 1.1rem 1.1rem !important;

    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: .85rem;
    align-items: flex-start;

    /* ruhiger Hintergrund + saubere Kante */
    background-size: 260% 260% !important;
    background-position: 50% 52% !important;
    border: 1px solid rgba(148,163,184,.55) !important;
    box-shadow:
      0 10px 26px rgba(15,23,42,.45),
      0 1px 0 rgba(255,255,255,.12) inset !important;

    transform: translateZ(0);
  }

  /* Nummer oben links als Badge */
  #flowhub .flow-card .card-num{
    margin: 0;
    align-self: flex-start;

    padding: .24rem .7rem;
    border-radius: 999px;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;

    color: #0f172a;
    background: rgba(248,250,252,.96);
    text-shadow: none;
    white-space: nowrap;
  }

  /* Dark Mode Badge anpassen */
  :root[data-theme="dark"] #flowhub .flow-card .card-num{
    color: #e5edff;
    background: rgba(15,23,42,.86);
  }

  /* Text-Block rechts: Titel + Kurztext */
  #flowhub .flow-card .card-core{
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: .3rem;
  }

  /* Titel: kompakt, gut lesbar */
  #flowhub .flow-card h3{
    margin: 0 !important;
    font-size: clamp(1.06rem, 1rem + .9vw, 1.3rem) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
  }

  /* Kurztext (m-snippet) als Hauptcopy auf Mobile */
  #flowhub .flow-card .m-snippet{
    display: block !important;
    margin: 0 !important;
    font-size: .97rem !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    letter-spacing: .002em !important;
    text-align: left !important;
    text-wrap: pretty;
  }

  /* lange Texte & Details ausblenden – Fokus auf Kurztext */
  #flowhub .flow-card > .card-core > p:not(.m-snippet),
  #flowhub .flow-card .details{
    display: none !important;
  }

  /* große dekorative Zahl mobil ausblenden */
  #flowhub .card-num-giant{
    display: none !important;
  }

  /* Tap-Feedback dezent */
  #flowhub .flow-card[role="button"]{ touch-action: manipulation; }
  #flowhub .flow-card:active{
    transform: translateY(1px);
    box-shadow:
      0 6px 18px rgba(15,23,42,.4),
      0 1px 0 rgba(255,255,255,.08) inset !important;
  }
}
/* ==========================================
   FLOWHUB – Mobile (≤700px) clean & full content
   ========================================== */
@media (max-width: 699.98px){

  /* Rail: eine saubere Spalte */
  #flowhub .flow-rail{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-inline: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
    justify-items: stretch !important;
  }

  /* Alle Deko-Timelines mobil ausblenden – stört nur */
  #flowhub .flow-rail::before,
  #flowhub .flow-rail::after,
  #flowhub .flow-card::before,
  #flowhub .flow-card::after{
    content: none !important;
    display: none !important;
  }

  /* Karte: Zahl + kompletter Text, nichts wird versteckt */
  #flowhub .flow-card{
    box-sizing: border-box !important;
    width: 100% !important;
    margin-inline: 0 !important;

    border-radius: 18px !important;
    padding: 1rem 1.1rem 1.2rem !important;

    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-auto-rows: auto;
    column-gap: .75rem;
    row-gap: .4rem;
    align-items: flex-start;

    /* ruhiger Hintergrund mit Tiefe */
    background-size: 260% 260% !important;
    background-position: 50% 50% !important;
    border: 1px solid rgba(148,163,184,.45) !important;
    box-shadow:
      0 10px 24px rgba(15,23,42,.35),
      0 1px 0 rgba(255,255,255,.10) inset !important;

    transform: translateZ(0);
  }

  /* Inhalt: volle Breite nutzen, nichts clippen */
  #flowhub .flow-card .card-core{
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
    display: block !important;
  }

  /* Zahl oben links als kleines, ruhiges Label */
  #flowhub .flow-card .card-num{
    grid-column: 1;
    grid-row: 1;

    margin: 0;
    padding: .22rem .65rem;
    border-radius: 999px;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;

    background: rgba(15,23,42,.08);
    color: #0f172a;
    text-shadow: none;
    white-space: nowrap;
  }

  :root[data-theme="dark"] #flowhub .flow-card .card-num{
    background: rgba(15,23,42,.85);
    color: #e5edff;
  }

  /* Titel rechts neben der Zahl */
  #flowhub .flow-card h3{
    margin: 0 0 .35rem !important;
    font-size: clamp(1.06rem, 1rem + .9vw, 1.3rem) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
  }

  /* WICHTIG: alle Inhalte wieder sichtbar machen */
  #flowhub .flow-card p,
  #flowhub .flow-card .details{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Fließtext-Styling (gilt für alle p in der Karte) */
  #flowhub .flow-card p{
    margin: 0 0 .4rem !important;
    font-size: .96rem !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
    letter-spacing: .002em !important;
    text-align: left !important;
    text-wrap: pretty;
  }

  /* Details-Block als eigener Abschnitt darunter */
  #flowhub .flow-card .details{
    margin-top: .2rem !important;
  }

  /* Letztes Element ohne zusätzlichen Bottom-Space */
  #flowhub .flow-card .details:last-child,
  #flowhub .flow-card p:last-child{
    margin-bottom: 0 !important;
  }

  /* Große dekorative Zahl – darf weg, ist kein Inhalt */
  #flowhub .card-num-giant{
    display: none !important;
  }

  /* Tap-Feedback dezent */
  #flowhub .flow-card[role="button"]{ touch-action: manipulation; }
  #flowhub .flow-card:active{
    transform: translateY(1px);
    box-shadow:
      0 6px 18px rgba(15,23,42,.4),
      0 1px 0 rgba(255,255,255,.08) inset !important;
  }
}
/* === Mobile: Zahl komplett ausblenden ======================= */
@media (max-width: 699.98px){
.card-num{
    display: none !important;
  }
}
/* ==========================================
   FLOWHUB – Mobile (≤700px)
   Text-Layout in der Karte aufräumen
   ========================================== */
@media (max-width: 699.98px){

  /* Karte innen nicht mehr als Grid, sondern simpler Block */
  #flowhub .flow-card{
    display: block !important;
    padding: 1rem 1.1rem 1.2rem !important;
  }

  /* Inhalt sauber vertikal stapeln */
  #flowhub .flow-card .card-core{
    margin-top: .45rem;                 /* kleine Luft unter Zahl (falls sichtbar) */
    display: flex !important;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
  }

  /* Zahl (falls du sie wieder einblendest) – oben, eigene Zeile */
  #flowhub .flow-card .card-num{
    margin: 0 0 .25rem !important;
  }

  /* Titel direkt unter/ neben der Zahl, linksbündig */
  #flowhub .flow-card h3{
    margin: 0 0 .2rem !important;
    text-align: left !important;
  }

  /* Alle Texte: einheitlich, nichts wird gekürzt */
  #flowhub .flow-card p{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;

    margin: 0 0 .35rem !important;
    text-align: left !important;
    text-wrap: pretty;
  }

  /* Details-Block am Ende, leicht abgesetzt */
  #flowhub .flow-card .details{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;

    margin-top: .25rem !important;
  }

  /* letztes Element ohne extra Bottom-Gap */
  #flowhub .flow-card .details:last-child,
  #flowhub .flow-card p:last-child{
    margin-bottom: 0 !important;
  }
}
/* Mobile: Karten-Hintergründe wie Desktop skalieren */
@media (max-width: 699.98px){
  #flowhub .flow-rail .flow-card:nth-child(1){
    background: linear-gradient(135deg,#17133b,#17009b,#24225f) !important;
    background-size: 600% 600% !important;
    background-position: 0% 0% !important;
  }
  #flowhub .flow-rail .flow-card:nth-child(2){
    background: linear-gradient(135deg,#000013,#000f66,#0d0d0d) !important;
    background-size: 300% 300% !important;
    background-position: 0% 0% !important;
  }
  #flowhub .flow-rail .flow-card:nth-child(3){
    background: linear-gradient(135deg,#07000e,#130157,#1c0f33) !important;
    background-size: 300% 300% !important;
    background-position: 0% 0% !important;
  }
  #flowhub .flow-rail .flow-card:nth-child(4){
    background: linear-gradient(135deg,#000000,hwb(251 0% 75%),#000000) !important;
    background-size: 400% 400% !important;
    background-position: 0% 0% !important;
  }
  #flowhub .flow-rail .flow-card:nth-child(5){
    background: linear-gradient(135deg,#0d0d0d,#000,#0d0d0d) !important;
    background-size: 300% 300% !important;
    background-position: 0% 0% !important;
  }
}
/* Flowhub auf Smartphones komplett ausblenden */
@media (max-width: 699.98px){
  #flowhub {
    display: none !important;
  }
}