/* ============================================================
   Shiftora Modulseiten
   Setzt auf home.css auf und uebernimmt dessen Sprache: warmes Weiss,
   echte Tiefe, Manrope in grossem Schnitt, ein Radius von 14.
   Neu ist hier nur, was eine Modulseite braucht und die Startseite
   nicht hat: Modulkopf, Gegenueberstellung, Ablauf, Faelle, App-Band.

   Die eigene Farbe des Moduls kommt als --c auf <body>. Alles, was
   faerbt, liest sie von dort - dadurch sieht Fleet anders aus als
   Finance, ohne dass es zehn Stylesheets braucht.

   Reihenfolge beachten: Basisregeln zuerst, Umbrueche am Ende. Steht
   ein @media davor, gewinnt die spaetere Basisregel und der Umbruch
   laeuft ins Leere.
   ============================================================ */

body{--c:var(--accent)}

/* Flaechiger Farbanteil des Moduls, hell genug fuer Text darauf.

   --c-text ist die Modulfarbe, so weit abgedunkelt, dass auch die
   hellste davon (Logistics, #C48F1E) als 12-px-Text noch 5:1 erreicht.
   Die reine Modulfarbe kam auf 2,5:1 und war damit fuer kleinen Text
   unbrauchbar - sichtbar erst, wenn man nachmisst, nicht beim Ansehen. */
body{--c-weich:color-mix(in srgb,var(--c) 9%,transparent);
     --c-linie:color-mix(in srgb,var(--c) 26%,transparent);
     --c-text:color-mix(in srgb,var(--c) 62%,#000);
     --c-tief:color-mix(in srgb,var(--c) 76%,#000)}

/* ---------- Brotkrume ---------- */
.krume{padding-top:calc(68px + 26px);font-size:.86rem;color:var(--soft)}
.krume ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.krume li{display:flex;align-items:center;gap:8px}
.krume li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-2)}
.krume a{transition:color .2s}
.krume a:hover{color:var(--c)}
.krume [aria-current]{color:var(--ink);font-weight:600}

/* ---------- Modulkopf ----------
   Zwei Spalten: links die Ansage, rechts eine Karte mit Gewicht.
   Der Farbschleier oben nimmt die Modulfarbe auf, damit sich die
   Seite schon vor dem ersten Wort von der Nachbarseite unterscheidet. */
.mhero{position:relative;overflow:hidden;padding:clamp(30px,4vh,52px) 0 clamp(48px,6vh,84px)}
.mhero::before{content:"";position:absolute;inset:-40% -10% auto;height:78%;pointer-events:none;
  background:radial-gradient(58% 58% at 28% 0%,color-mix(in srgb,var(--c) 13%,transparent),transparent 72%)}
.mhero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.82fr);
  gap:clamp(32px,4.5vw,72px);align-items:center}

.mtag{display:inline-flex;align-items:center;gap:10px;font-size:.79rem;font-weight:700;color:var(--c-text);
  letter-spacing:.02em;background:var(--c-weich);border-radius:99px;padding:7px 14px 7px 8px}
.mtag img{width:22px;height:22px;border-radius:6px}
.mtag i{font-style:normal;color:var(--soft);font-weight:600}

.mhero h1{margin-top:22px;font-size:clamp(2.5rem,4.9vw,4.15rem);letter-spacing:-.05em;line-height:1}
.mhero .lede{margin-top:22px;max-width:46ch;font-size:clamp(1.04rem,1.3vw,1.2rem);color:var(--soft);line-height:1.55}
.mhero-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:32px}
.mhero-act .btn-solid{background:var(--ink)}
.mhero-act .btn-solid::before{background:var(--c)}

/* Die Karte rechts: satte Flaeche, spuerbarer Schatten. */
.mkarte{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-3);padding:28px;
  border-top:3px solid var(--c)}
.mkarte-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.mkarte-top img{width:46px;height:46px;border-radius:12px}
.mkarte-top b{font-size:1.06rem;letter-spacing:-.035em;font-weight:800}
.mkarte-top span{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--soft)}
.mkarte p{font-size:.96rem;color:var(--soft);line-height:1.6}
.mkarte ul{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.mkarte li{font-size:.78rem;font-weight:650;color:var(--c-text);background:var(--c-weich);
  padding:6px 11px;border-radius:8px}

/* ---------- Abschnittskopf ---------- */
.mhead{max-width:none;margin-bottom:clamp(28px,3.4vw,46px)}
.mhead .tag{display:inline-flex;align-items:center;gap:8px;font-size:.79rem;font-weight:700;color:var(--c-text);
  margin-bottom:16px;letter-spacing:.02em}
.mhead .tag::before{content:"";width:20px;height:1.6px;background:var(--c);border-radius:2px}
.mhead h2{max-width:20ch;font-size:clamp(1.85rem,3.4vw,2.85rem);letter-spacing:-.045em}
.mhead .sub{margin-top:16px;max-width:58ch}

/* ---------- Gegenueberstellung ---------- */
.gegen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)}
.gegen > div{border-radius:var(--r);padding:clamp(24px,2.6vw,34px)}
.gegen h3{font-size:1.08rem;letter-spacing:-.03em;margin-bottom:20px}
.gegen ul{display:grid;gap:13px}
.gegen li{position:relative;padding-left:30px;font-size:.96rem;line-height:1.55}
.gegen li::before{position:absolute;left:0;top:.05em;width:19px;height:19px;border-radius:6px;
  display:grid;place-items:center;font-size:.72rem;font-weight:800}

.gegen .vorher{background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.gegen .vorher li{color:var(--soft)}
.gegen .vorher li::before{content:"–";background:rgba(12,14,18,.07);color:var(--mute)}

.gegen .nachher{background:var(--card);box-shadow:var(--sh-2);border-top:3px solid var(--c)}
.gegen .nachher li{color:var(--ink-2)}
.gegen .nachher li::before{content:"✓";background:var(--c-weich);color:var(--c-text)}

/* ---------- Bereiche ---------- */
.brs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.br{position:relative;background:var(--card);border-radius:var(--r);padding:26px;box-shadow:var(--sh-1);
  transition:transform .35s var(--e),box-shadow .35s var(--e)}
.br::after{content:"";position:absolute;left:26px;right:26px;top:0;height:2px;border-radius:0 0 2px 2px;
  background:var(--c);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--e-out)}
.br:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.br:hover::after{transform:scaleX(1)}
.br b{display:block;font-size:1.05rem;font-weight:800;letter-spacing:-.032em;margin-bottom:9px}
.br p{font-size:.94rem;color:var(--soft);line-height:1.6}
.br .nr{position:absolute;top:22px;right:24px;font-size:.74rem;font-weight:700;color:var(--soft)}

/* ---------- Ablauf ----------
   Grosse Ziffern statt Aufzaehlungspunkte: der Weg soll aussehen wie
   ein Weg und nicht wie eine weitere Liste. */
.schritte{display:grid;gap:clamp(20px,2.4vw,30px);max-width:900px}
.schritt{position:relative;display:grid;grid-template-columns:clamp(58px,6vw,84px) minmax(0,1fr);
  gap:clamp(18px,2vw,30px);align-items:start;padding-bottom:clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--line)}
.schritt:last-child{border-bottom:0;padding-bottom:0}
.schritt .z{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;letter-spacing:-.06em;line-height:.85;
  color:var(--c-text);font-variant-numeric:tabular-nums}
.schritt b{display:block;font-size:1.12rem;font-weight:800;letter-spacing:-.035em;margin-bottom:9px}
.schritt p{font-size:1rem;color:var(--soft);line-height:1.65;max-width:60ch}

/* ---------- Zweispaltiger Textblock ----------
   Ueberschrift links, Text rechts. Einspaltig blieb rechts eine tote
   Flaeche stehen, und die Seite sah aus wie eine Vorlage, in die jemand
   Text gegossen hat. */
.zwei{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
  gap:clamp(26px,4vw,76px);align-items:start}
.zwei .mhead{margin-bottom:0;position:sticky;top:96px}
.zwei .mhead h2{max-width:14ch;font-size:clamp(1.7rem,2.9vw,2.5rem)}

/* ---------- Fliesstext ---------- */
.flies{max-width:64ch;display:grid;gap:20px}
.flies p{font-size:clamp(1.02rem,1.2vw,1.13rem);line-height:1.7;color:var(--ink-2)}
.flies a{color:var(--c);font-weight:650;box-shadow:inset 0 -1px 0 var(--c-linie);transition:box-shadow .2s}
.flies a:hover{box-shadow:inset 0 -2px 0 var(--c)}
.flies strong{font-weight:750;color:var(--ink)}

/* ---------- Faelle ---------- */
.faelle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.fall{position:relative;padding:20px 22px 20px 40px;background:var(--card);border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s var(--e)}
.fall::before{content:"";position:absolute;left:22px;top:27px;width:8px;height:8px;border-radius:3px;background:var(--c)}
.fall:hover{box-shadow:inset 0 0 0 1px var(--c-linie)}
.fall b{display:block;font-size:.99rem;font-weight:750;letter-spacing:-.028em;margin-bottom:5px}
.fall span{font-size:.9rem;color:var(--soft);line-height:1.55}

/* ---------- App-Band ---------- */
.app-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(28px,4vw,60px);align-items:center;background:var(--card);border-radius:var(--r);
  box-shadow:var(--sh-2);padding:clamp(28px,3.4vw,48px)}
.app-band .flies{max-width:56ch}
.stores{display:grid;gap:12px}
.store{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:var(--r-sm);
  background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.store svg{flex:none;color:var(--ink)}
.store b{display:block;font-size:.95rem;font-weight:750;letter-spacing:-.028em}
.store span{font-size:.83rem;color:var(--soft)}

/* ---------- Weiter zu den Modulen ---------- */
.weiter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.weiter a{position:relative;display:flex;align-items:center;gap:14px;padding:18px 20px;
  background:var(--card);border-radius:var(--r-sm);box-shadow:var(--sh-1);
  transition:transform .3s var(--e),box-shadow .3s var(--e)}
.weiter a:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.weiter img{width:30px;height:30px;border-radius:8px;flex:none}
.weiter b{display:block;font-size:.97rem;font-weight:750;letter-spacing:-.03em}
.weiter span{font-size:.84rem;color:var(--soft);line-height:1.45}
.weiter svg{margin-left:auto;flex:none;color:var(--soft);transition:transform .3s var(--e-out),color .3s}
.weiter a:hover svg{transform:translateX(3px);color:var(--w,var(--accent))}

/* ---------- Fragen ----------
   Uebernimmt .q und .faq aus home.css, faerbt nur das Zeichen um.
   Im zweispaltigen Block darf die Kartenbreite nicht mehr begrenzt
   sein, sonst bleibt rechts wieder eine tote Flaeche. */
.q.open .pm{background:var(--c)}
.zwei .faq{margin-top:0;max-width:none}

/* ---------- Abschluss ---------- */
.mcta .btn-solid::before{background:var(--c)}
.mcta h2 em{color:color-mix(in srgb,var(--c) 55%,#fff)}

/* ---------- Umbrueche ---------- */
@media (max-width:1080px){
  .mhero-in{grid-template-columns:1fr;gap:38px}
  .mkarte{max-width:520px}
  .brs,.faelle,.weiter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-band{grid-template-columns:1fr;gap:30px}
}
@media (max-width:900px){
  .zwei{grid-template-columns:1fr;gap:24px}
  .zwei .mhead{position:static}
}
@media (max-width:820px){
  .gegen{grid-template-columns:1fr}
  .krume{padding-top:calc(68px + 18px)}
}
@media (max-width:640px){
  .brs,.faelle,.weiter{grid-template-columns:1fr}
  .mhero h1{font-size:clamp(2.1rem,8.5vw,2.7rem)}
  .schritt{grid-template-columns:1fr;gap:8px}
  .schritt .z{font-size:2rem}
}