/* ════════════════════════════════════════════════════════════════
   cultivAIte · Angebote-Seite (Router) — LIVE (Ansatz F2)
   Getrimmt: nur was die Live-Seite braucht. Vollständige Variantensammlung
   (Prototypen A–F) liegt in css/angebote.css.
   Scope: body.ang.ang-fdrv.ang-f2 · Motion: data-motion="6".
   Nur transform/opacity animiert. Reduced-Motion = statisch.
   ════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Söhne Mono';
  src:url('../fonts/soehne-mono-web-buch.woff2') format('woff2'),
      url('../fonts/soehne-mono-web-buch.woff') format('woff');
  font-weight:400; font-display:swap;
}

/* ── Scope-Tokens ─────────────────────────────────────────────── */
body.ang{
  --blue:#0000FE; --ink:#1A1A1A; --paper:#FBFAF9; --paper-pure:#FFFFFF;
  --bone:#EDEAE7; --graphite:#46484B; --silver:#9799A0;
  --yellow:#EFF746; --blue-wash:#ACC1FF;
  --font-serif:'Flecha M', Georgia, serif;
  --font-sans:'Söhne', -apple-system, sans-serif;
  --font-wide:'Söhne Breit','Söhne',sans-serif;
  --font-mono:'Söhne Mono', ui-monospace, monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  background:var(--paper);
}
.ang-main{color:var(--ink); font-family:var(--font-sans);}

/* ── Seitenkopf ───────────────────────────────────────────────── */
.ang-head{padding:64px 0 8px;}
.ang-head__inner{max-width:1180px; margin:0 auto; padding:0 28px;}
.ang-eyebrow{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--silver); margin:0 0 16px;}
.ang-h1{font-family:var(--font-serif); font-weight:400; font-size:clamp(2.4rem,6.2vw,4.6rem); line-height:1.0; letter-spacing:-.02em; margin:0 0 20px;}

/* ── Bausteine ────────────────────────────────────────────────── */
.ang-task{margin:0;}
.ang-task__break{color:var(--graphite);}
.ang-role{color:var(--silver); font-size:.95rem; line-height:1.45; margin:0;}
.ang-prod-name{font-family:var(--font-wide); font-weight:700; text-transform:uppercase; line-height:.96; letter-spacing:-.015em; color:var(--ink);}
.ang-prod-name .dot{color:var(--blue);}

/* ── Buttons ──────────────────────────────────────────────────── */
.ang-btn{display:inline-block; font-family:var(--font-sans); font-weight:600; font-size:.95rem; padding:13px 26px; border:1.5px solid var(--ink); color:var(--ink); text-decoration:none; transition:transform .12s var(--ease), background .12s var(--ease), color .12s var(--ease);}
.ang-btn:hover{background:var(--ink); color:var(--paper-pure); transform:translateY(-1px);}
.ang-btn--primary{background:var(--blue); border-color:var(--blue); color:#fff;}
.ang-btn--primary:hover{background:var(--ink); border-color:var(--ink);}

/* ── Abschluss-CTA ────────────────────────────────────────────── */
.ang-cta{margin-top:40px; border-top:1px solid rgba(26,26,26,.14);}
.ang-cta__inner{max-width:1180px; margin:0 auto; padding:64px 28px 80px; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:20px 56px; align-items:center;}
.ang-cta__eyebrow{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--silver); margin:0 0 12px;}
.ang-cta__h{font-family:var(--font-serif); font-weight:400; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.05; margin:0;}
.ang-cta__text{font-size:1.08rem; line-height:1.55; color:var(--graphite); margin:0 0 22px; max-width:52ch;}

/* ── Reveal-Scaffold (ab Stufe 3; darunter sofort) ────────────── */
.ang-reveal{opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease); transition-delay:calc(var(--i, 0) * 70ms);}
.ang-reveal.is-in{opacity:1; transform:none;}
body[data-motion="1"] .ang-reveal,
body[data-motion="2"] .ang-reveal{opacity:1; transform:none;}

/* ── Ambiente: atmender Haupt-CTA (Stufe 5+) ──────────────────── */
body[data-motion="5"] .ang-cta .ang-btn--primary,
body[data-motion="6"] .ang-cta .ang-btn--primary{animation:angBreath 3.8s ease-in-out 1s infinite;}
@keyframes angBreath{0%,100%{transform:none;}50%{transform:scale(1.03);}}

/* ── F-Basis (Aufgabe führt, Produktname klein, Marker) ───────── */
.ang-fdrv{--paper2:#F4F1ED;}
.ang-fdrv .ang-stage{display:block; text-decoration:none; color:inherit;}
.ang-fdrv .ang-task{display:block; font-family:var(--font-serif); font-weight:400; letter-spacing:-.01em; line-height:1.06; color:var(--ink);}
.ang-fdrv .ang-task__break{color:var(--graphite);}
.ang-fdrv .ang-task .nm{background-image:linear-gradient(to top, var(--yellow) 0 22%, transparent 22%);}
.ang-fdrv .ang-prod-name{display:block; color:var(--ink); transition:color .18s var(--ease);}
.ang-fdrv .ang-prod-name .dot{color:var(--blue);}
.ang-fdrv .ang-stage:hover .ang-prod-name{color:var(--blue);}
.ang-fdrv .ang-role{display:block; color:var(--graphite); line-height:1.45;}
.ang-fdrv .ang-go{display:inline-flex; align-items:center; gap:9px; margin-top:18px; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); border-bottom:2px solid var(--blue-wash); padding-bottom:5px; transition:border-color .18s var(--ease);}
.ang-fdrv .ang-go__arrow{transition:transform .2s var(--ease);}
.ang-fdrv .ang-stage:hover .ang-go{border-color:var(--blue);}
.ang-fdrv .ang-stage:hover .ang-go__arrow{transform:translateX(5px);}
.ang-fdrv .ang-h1__break{display:block; color:var(--graphite);}
.ang-fdrv .ang-sect--ich{background:var(--paper);}
.ang-fdrv .ang-sect--team{background:var(--paper2);}
.ang-fdrv .ang-sect--org{background:var(--bone);}
.ang-fdrv .ang-segment{max-width:1180px; margin:0 auto; padding:72px 28px 16px;}
.ang-fdrv .ang-segment__meta{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); margin:0 0 8px;}
.ang-fdrv .ang-segment__title{font-family:var(--font-wide); font-weight:700; text-transform:uppercase; font-size:clamp(1.2rem,2.6vw,1.9rem); letter-spacing:.01em; color:var(--ink); margin:0;}
.ang-fdrv .ang-stage + .ang-stage,
.ang-fdrv .ang-segment + .ang-stage{border-top:1px solid rgba(26,26,26,.1);}

/* ── F2 · Spalten: Name | Thumbnail | Aufgabe | Rolle+Weg ──────── */
.ang-f2 .ang-stage__inner{max-width:1180px; margin:0 auto; padding:34px 28px; display:grid; grid-template-columns:155px minmax(0,200px) minmax(0,1fr) minmax(0,220px); gap:14px 34px; align-items:start;}
.ang-f2 .ang-thumb{grid-column:1; grid-row:1 / span 2; align-self:center; width:155px; height:155px; object-fit:cover; display:block;}
.ang-f2 .ang-prod-name{grid-column:2; grid-row:1; font-size:clamp(1.1rem,1.45vw,1.45rem); padding-top:6px; overflow-wrap:break-word; hyphens:auto;}
.ang-f2 .ang-task{grid-column:3; grid-row:1 / span 2; align-self:start; font-size:clamp(1.2rem,2.35vw,1.98rem); line-height:1.12; max-width:23ch;}
.ang-f2 .ang-role{grid-column:4; grid-row:1; padding-top:8px; font-size:.95rem;}
.ang-f2 .ang-go{grid-column:4; grid-row:2; align-self:start; margin-top:8px;}

/* ── Responsive ───────────────────────────────────────────────── */
/* Breakpoint bewusst auf 1000 statt 820: im Bereich 821–1000px kollabiert
   sonst die Aufgaben-Spalte (1fr) der 4-Spalten-Stage auf ~157px (eingequetscht
   zwischen Produktname 200px und Rolle 220px) — u. a. iPad-Hochformat (~834px).
   1000 deckt sich zudem mit dem Nav-Umbruch (Burger ≤1000). Desktop >1000 unberührt. */
@media (max-width:1000px){
  .ang-cta__inner{grid-template-columns:1fr;}
  /* Variante B — Aufgabe führt: Thumbnail (kleiner, weniger wichtig) NEBEN dem
     Wunsch-Statement; Produktname als kräftige eigene Zeile darunter, dann
     Rolle + CTA über die volle Breite. */
  .ang-f2 .ang-stage__inner{grid-template-columns:115px 1fr; gap:10px 16px; align-items:start;}
  .ang-f2 .ang-thumb{grid-column:1; grid-row:1; order:0; align-self:start; width:115px; height:115px; margin:0;}
  /* text-wrap:balance gleicht die Zeilen der schmalen Spalte aus → keine isolierten
     langen Wörter (z. B. „Wissensvorsprung", „aufstellen"); ZAB etwas erhöht. */
  .ang-f2 .ang-task{grid-column:2; grid-row:1; align-self:start; margin:0; max-width:none; line-height:1.28; text-wrap:balance;}
  .ang-f2 .ang-prod-name{grid-column:1 / -1; grid-row:2; padding-top:0; margin-top:8px; font-size:clamp(1.3rem,4.6vw,1.7rem);}
  .ang-f2 .ang-role{grid-column:1 / -1; grid-row:3; padding-top:0; margin-top:2px;}
  .ang-f2 .ang-go{grid-column:1 / -1; grid-row:4; margin-top:14px;}
}

/* ── Mobile-Feintuning ────────────────────────────────────────── */
@media (max-width:600px){
  /* H1 bricht mobil auf mehrere Zeilen um; lh:1.0 (Desktop-Display) klebt dann
     zu eng. Etwas Luft, ohne die Wirkung zu verlieren. Desktop unberührt. */
  .ang-h1{line-height:1.07;}
}

/* ── Globaler Clamp: Reduced-Motion = statisch ────────────────── */
@media (prefers-reduced-motion:reduce){
  body.ang .ang-reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  body.ang *{animation:none !important;}
}