/* Ende jeder eigenen Fallstudie (27.10.2026): eine Karte wie die Branchenkarten (.dt-nc),
   links die Logos der anderen Fallstudien als klickbare weisse Kacheln auf einem Raster,
   rechts Kicker, Titel, Text und «Jetzt starten». Eingesetzt von build/referenzen.py
   (fallstudien_weiter) für {{fallstudien-weiter}}. Die Karte ist immer hell, auch auf
   dunklen Seiten wie Spitch: Farben und Schrift sind hier ausdrücklich gesetzt. */

.fw { padding: clamp(3rem, 7vw, 5.5rem) 0 0; text-align: left; }
.fw__karte { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  max-width: var(--container-max, 84rem); margin: 0 auto; padding: clamp(1rem, 2vw, 1.4rem) clamp(1rem, 3vw, 3rem) clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2vw, 1.4rem);
  border-radius: 28px; background: #fff; color: #131a2b; font-family: var(--font-body);
  box-shadow: 0 0 0 1px rgba(15, 30, 60, .08), 0 0 0 4px rgba(0, 186, 235, .14), 0 40px 80px -40px rgba(15, 30, 60, .35); }

/* Logos auf einem Raster wie auf den Branchenkarten */
.fw__logos { position: relative; min-width: 0; padding: clamp(1rem, 2.4vw, 1.6rem); border-radius: 18px; background: #f3f5f8; box-shadow: inset 0 0 0 1px rgba(15, 30, 60, .07); overflow: hidden; }
.fw__raster { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, transparent calc(25% - .5px), rgba(15, 30, 60, .08) 0, rgba(15, 30, 60, .08) calc(25% + .5px), transparent 0),
    linear-gradient(transparent calc(50% - .5px), rgba(15, 30, 60, .08) 0, rgba(15, 30, 60, .08) calc(50% + .5px), transparent 0);
  -webkit-mask-image: radial-gradient(80% 90% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(80% 90% at 50% 50%, #000 40%, transparent 100%); }
.fw__kacheln { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.fw-logo { display: flex; align-items: center; justify-content: center; min-width: 0; height: 5.2rem; padding: 0 1rem; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 30, 60, .06), 0 10px 24px -14px rgba(15, 30, 60, .35); text-decoration: none !important;
  transition: transform .25s ease, box-shadow .25s ease; }
.fw-logo img { display: block; max-width: 100%; max-height: 2rem; width: auto; height: auto; object-fit: contain; }
.fw-logo:hover { transform: translateY(-3px); box-shadow: 0 0 0 1.5px #00baeb, 0 18px 30px -14px rgba(15, 30, 60, .4); }
.fw-logo:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #015ea5; }
.fw-logo--alle { gap: .4rem; background: #131a2b; color: #fff !important; font: 600 .9rem/1.2 var(--font-display); }
.fw-logo--alle svg { width: 14px; height: 14px; }
.fw-logo--alle:hover { box-shadow: 0 0 0 1.5px #00baeb, 0 18px 30px -14px rgba(15, 30, 60, .5); }

/* Text und Knopf */
.fw__text { min-width: 0; padding: clamp(.5rem, 2vw, 1.5rem) 0; }
.fw__kicker { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem !important; font: 700 .78rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #015ea5; }
.fw__nr { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem; border-radius: 8px; background: rgba(0, 186, 235, .14); color: #015ea5; letter-spacing: 0; }
.fw .fw__text h2 { margin: 0; max-width: 16ch; font: 700 clamp(1.8rem, 3.2vw, 2.7rem)/1.08 var(--font-display); letter-spacing: -.035em; color: #131a2b; }
.fw__lede { margin: 1rem 0 0 !important; max-width: 34rem; font-size: 1.02rem; line-height: 1.55; color: #5b6475; }
.fw__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1.6rem; }
.fw__knopf { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .8rem 1.4rem; border-radius: 999px; background: #fff; color: #131a2b !important;
  font: 600 .98rem/1 var(--font-display); text-decoration: none !important; box-shadow: inset 0 0 0 1px rgba(15, 30, 60, .16); transition: box-shadow .2s ease, transform .2s ease; }
.fw__knopf svg { width: 15px; height: 15px; }
.fw__knopf:hover { box-shadow: inset 0 0 0 1.5px #131a2b; transform: translateY(-1px); }
.fw__knopf:focus-visible, .fw__link:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #015ea5; border-radius: 999px; }
.fw__link { color: #015ea5 !important; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(1, 94, 165, .35); padding-bottom: 2px; }
.fw__link:hover { border-color: #015ea5; }

@media (max-width: 1100px) { .fw__kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fw-logo { height: 4.4rem; } }
@media (max-width: 900px) {
  .fw__karte { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .fw__text { padding: .5rem .5rem 1rem; }
}
@media (max-width: 420px) { .fw__kacheln { gap: .5rem; } .fw-logo { height: 3.8rem; padding: 0 .6rem; } .fw-logo img { max-height: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .fw-logo, .fw__knopf { transition: none; } }
.fw__lede, .fw .fw__text h2 { hyphens: none; -webkit-hyphens: none; }

/* Werkzeuge mit Logo im Fliesstext ({{tech:name}}, build/referenzen.py, 27.10.2026). Eine kleine
   weisse Marke, damit jedes Logo auf hellen und dunklen Seiten gleich lesbar ist. */
.tech { display: inline-flex; align-items: center; gap: .32em; padding: .08em .45em .08em .3em; margin: 0 .05em; border-radius: .45em;
  background: #fff; color: #131a2b; font-weight: 600; line-height: 1.25; white-space: nowrap; vertical-align: .05em;
  box-shadow: 0 0 0 1px rgba(15, 30, 60, .1), 0 4px 10px -6px rgba(15, 30, 60, .35); }
.tech img { display: block; width: 1em; height: 1em; object-fit: contain; flex: 0 0 auto; }
/* Seitenregeln wie «.sd-ueber__liste span» färbten die Marke grau auf Weiss: höhere Spezifität (27.10.2026) */
.tech.tech.tech { color: #131a2b; flex: none; }
.tech.tech.tech--wort img { width: auto; height: .82em; max-width: 6em; }

/* Akquire-Fallstudien ({{akquire-weiter}}, 29.10.2026): acht andere Fälle und «Alle Fallstudien»,
   also neun Kacheln in drei Spalten. */
.fw--ak .fw__kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .fw--ak .fw__kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .fw--ak .fw-logo { height: 3.4rem; padding: 0 .5rem; } .fw--ak .fw-logo--alle { font-size: .78rem; text-align: center; } }
.fw--ak .fw__raster { background-image:
    linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(15, 30, 60, .08) 0, rgba(15, 30, 60, .08) calc(33.33% + .5px), transparent 0, transparent calc(66.66% - .5px), rgba(15, 30, 60, .08) 0, rgba(15, 30, 60, .08) calc(66.66% + .5px), transparent 0),
    linear-gradient(transparent calc(33.33% - .5px), rgba(15, 30, 60, .08) 0, rgba(15, 30, 60, .08) calc(33.33% + .5px), transparent 0, transparent calc(66.66% - .5px), rgba(15, 30, 60, .08) 0, rgba(15, 30, 60, .08) calc(66.66% + .5px), transparent 0); }
/* Akquire: die Zahl der Fälle wächst (29.10.2026), die Reihen dann ohne waagrechte Linien */
.fw--ak .fw__raster { background-image: linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(15, 30, 60, .08) 0, rgba(15, 30, 60, .08) calc(33.33% + .5px), transparent 0, transparent calc(66.66% - .5px), rgba(15, 30, 60, .08) 0, rgba(15, 30, 60, .08) calc(66.66% + .5px), transparent 0); }