/* Startseite, Stand 11.10.2026: Moduswahl Nische/Trend statt des alten Suchradius-Ausschnitts (die Stufen
   „Gleiche Branche“ und „Angrenzende Branchen“ gibt es in Kernflow nicht mehr) und der Agentur-Abschnitt mit
   Gründerfoto, Dreamdirection und kleineren Abständen. Lädt nach m1.css und preview-changes.css. */

/* ─── Moduswahl: gezeichnet im Stil der App-Leiste, kein Live-Ausschnitt (den Trend-Modus gibt es noch nicht) ─── */
.modi-liste { list-style: none; display: grid; gap: 14px; max-width: 32em; margin: 26px 0 0; padding: 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-2); }
.modi-liste li { position: relative; padding-left: 22px; }
.modi-liste li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.modi-liste b { font-weight: 600; color: var(--ink); }

.modi-liste li.ist-trend::before { background: linear-gradient(135deg, #FFB45C, #FF5A36); }

/* Nachbau des Feed-Kopfs der App (static/ui/seiten.css .kf-hero/.kf-radius): gleiche Fläche, Schriften und Leiste;
   rechts neben „Deine Nische“ der neue Modus Trend in Orange, damit er sich abhebt. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('/app/static/fonts/ibm-plex-mono-600.woff2') format('woff2'); }
.modi { margin: 0; }
.modi-held { padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 38px) 0; border-radius: 24px; color: #fff;
  background: radial-gradient(ellipse at 88% 120%, rgba(122, 92, 255, 0.38), transparent 55%), radial-gradient(ellipse at 8% -40%, rgba(59, 56, 245, 0.42), transparent 62%), var(--ink);
  box-shadow: 0 0 0 1px rgba(13, 15, 22, 0.07), 0 2px 4px rgba(13, 15, 22, 0.05), 0 40px 90px -24px rgba(26, 24, 90, 0.34); }
.modi-kicker { margin: 0 0 10px; font: 600 13px var(--display); color: #B9B0FF; }
.modi-titel { max-width: 16ch; font: 600 clamp(24px, 2.4vw, 32px)/1.12 var(--display); letter-spacing: -0.4px; color: #fff; }
.modi-lead { max-width: 44ch; margin-top: 10px; font-size: 15px; line-height: 1.5; color: #C4C8D5; }
.modi-leiste { margin-top: 26px; padding: 16px 0 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
/* Beide Knöpfe gleich breit (so breit wie der breitere), links bündig wie in der App */
.modi-knoepfe { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; max-width: 100%; }
.modi-gruppe { padding: 6px; border-radius: 16px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); }
.modi-pille { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; border-radius: 10px; color: #E9E7FF; white-space: nowrap; }
.modi-pille.ist-aktiv { background: #fff; color: var(--ink); }
.modi-pille b { font: 600 14.5px var(--display); }
.modi-zahl { margin-left: 18px; font: 600 15px 'IBM Plex Mono', ui-monospace, monospace; }
.modi-symbol { width: 26px; height: 26px; color: #B9B0FF; }
.modi-pille.ist-aktiv .modi-symbol { color: var(--accent); }

/* Trend: Verlaufsrand in Orange, warme Fläche und ein ruhig atmendes Leuchten als Besonderheit */
.modi-gruppe.ist-trend { position: relative; border-color: transparent; background: linear-gradient(rgba(36, 22, 18, 0.92), rgba(36, 22, 18, 0.92)) padding-box, linear-gradient(120deg, #FFB45C, #FF5A36) border-box; box-shadow: 0 0 22px rgba(255, 110, 50, 0.32); }
.ist-trend .modi-pille { color: #FFE9D6; }
.ist-trend .modi-symbol { color: #FF8A3D; }
.ist-trend .modi-zahl { color: #FFB45C; }
@media (prefers-reduced-motion: no-preference) {
  .modi-gruppe.ist-trend { animation: trend-atmen 3.6s ease-in-out infinite; }
}
@keyframes trend-atmen { 0%, 100% { box-shadow: 0 0 16px rgba(255, 110, 50, 0.22); } 50% { box-shadow: 0 0 30px rgba(255, 110, 50, 0.45); } }

/* ─── Agentur: Gründerfoto links unter der Überschrift, Abstände oben und unten deutlich kleiner ─── */
.agentur { padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 104px); }
.agentur-raster { align-items: start; padding-top: clamp(40px, 5vw, 72px); }
.agentur-links { display: grid; gap: clamp(24px, 3vw, 36px); align-content: start; }
.agentur-foto { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 20px; box-shadow: 0 0 0 1px rgba(13, 15, 22, 0.06), 0 30px 70px -28px rgba(26, 24, 90, 0.35); }
.agentur-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.agentur-lead a { color: inherit; text-decoration: underline; text-decoration-color: rgba(59, 56, 245, 0.45); text-underline-offset: 3px; }
.agentur-lead a:hover { color: var(--accent-d); }
.agentur-mehr { display: inline-flex; align-items: center; gap: 6px; margin-top: 26px; font: 500 16px var(--display); color: var(--accent); text-decoration: none; }
.agentur-mehr:hover { color: var(--accent-d); text-decoration: underline; text-underline-offset: 3px; }
.agentur-mehr svg { flex: none; width: 16px; height: 16px; }
.start { padding-top: clamp(56px, 8vw, 112px); }

@media (max-width: 640px) {
  /* Am Handy bleiben beide Modi nebeneinander: Zahl unter den Namen, damit beide Pillen in eine Zeile passen */
  .modi-held { border-radius: 20px; }
  .modi-leiste { margin-top: 22px; }
  .modi-knoepfe { display: grid; grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 10px; }
  .modi-pille { grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; row-gap: 1px; padding: 8px 10px; }
  .modi-symbol { grid-row: 1 / 3; width: 22px; height: 22px; }
  .modi-pille b { font-size: 13.5px; }
  .modi-zahl { margin-left: 0; font-size: 13.5px; }
  .agentur-raster { gap: 28px; }
  .agentur-foto { border-radius: 16px; }
}