/* ════════════════════════════════════════════════════════════════ cultivAIte · Angebote-Seite (Router) — 5 Ansätze A–E Ein Inhaltsgerüst · fünf konzeptionell verschiedene Treatments. Scope: body.ang + Varianten-Klasse .ang-a … .ang-e Lädt NACH style.css. Motion: data-motion="1".."6" am . Leitplanke: nur transform/opacity animieren (kein Filter über bewegten Flächen → kein WebKit-Black-Tile). Reduced-Motion = Stufe 1. ════════════════════════════════════════════════════════════════ */ @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; } @font-face{ font-family:'Flecha M'; src:url('../fonts/FlechaM-MediumItalic.woff2') format('woff2'), url('../fonts/FlechaM-MediumItalic.woff') format('woff'); font-weight:500; font-style:italic; font-display:swap; } /* ── Scope-Tokens (gespiegelt aus .aisq) ──────────────────────── */ 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; --font-script:'La Belle Aurore', cursive; --ease:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.34,1.3,.5,1); background:var(--paper); } .ang-main{color:var(--ink); font-family:var(--font-sans);} .ang-wrap{max-width:1180px; margin:0 auto; padding:0 28px;} /* ── Seitenkopf (geteilt) ─────────────────────────────────────── */ .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;} .ang-sub{font-size:1.12rem; line-height:1.55; color:var(--graphite); max-width:58ch; margin:0;} .ang-sub em{font-style:normal; color:var(--ink); font-weight:600;} /* ── Reichweiten-Gruppe (geteilt, dezent) ─────────────────────── */ .ang-group{padding:18px 0;} .ang-group__head{display:flex; align-items:baseline; gap:16px; margin:0 0 22px; flex-wrap:wrap;} .ang-group__label{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--silver); margin:0;} .ang-group__rule{flex:1 1 60px; height:1px; background:rgba(26,26,26,.14); align-self:center;} /* ── Format-Tag (geteilt) ─────────────────────────────────────── */ .ang-tag{ display:inline-block; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px 2px; border:1px solid currentColor; border-radius:999px; white-space:nowrap; } .ang-tag--offen{color:var(--blue);} .ang-tag--anfrage{color:var(--silver);} /* ── Aufgaben-Satz Bausteine (geteilt) ────────────────────────── */ .ang-task{margin:0;} .ang-task__wish{} /* erste Hälfte: der Wunsch */ .ang-task__break{color:var(--graphite);}/* nach dem Gedankenstrich: der Preis */ .ang-role{color:var(--silver); font-size:.95rem; line-height:1.45; margin:0;} .ang-prod{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--blue);} .ang-prod__arrow{transition:transform .18s var(--ease);} /* ── Buttons (geteilt) ────────────────────────────────────────── */ .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 (geteilt) ──────────────────────────────────── */ .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 sichtbar) ───── */ .ang-reveal{opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease);} .ang-reveal.is-in{opacity:1; transform:none;} body[data-motion="1"] .ang-reveal, body[data-motion="2"] .ang-reveal{opacity:1; transform:none;} /* Gestaffelter Eintritt: Stagger über CSS-Variable --i */ .ang-reveal{transition-delay:calc(var(--i, 0) * 70ms);} /* ── 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);}} /* ── Keyframes (geteilt) ──────────────────────────────────────── */ @keyframes angDraw{to{stroke-dashoffset:0;}} @keyframes angNodeGlow{0%{box-shadow:0 0 0 0 rgba(0,0,254,.32);}70%{box-shadow:0 0 0 13px rgba(0,0,254,0);}100%{box-shadow:0 0 0 0 rgba(0,0,254,0);}} @keyframes angRing{0%{opacity:.6; transform:scale(.97);}100%{opacity:0; transform:scale(1.03);}} /* ════════════════════════════════════════════════════════════════ A · REGISTER — editoriales Inhaltsverzeichnis (Stufe 3) Reine Typografie, nummerierte Liste, maximale Zurückhaltung. ════════════════════════════════════════════════════════════════ */ .ang-a .ang-group{padding:8px 0 6px;} .ang-a .ang-row{ display:grid; grid-template-columns:54px 1fr; gap:8px 24px; align-items:start; padding:30px 0; border-top:1px solid rgba(26,26,26,.16); text-decoration:none; color:inherit; } .ang-a .ang-row:last-child{border-bottom:1px solid rgba(26,26,26,.16);} .ang-a .ang-num{grid-column:1; grid-row:1 / span 2; font-family:var(--font-mono); font-size:.82rem; color:var(--silver); padding-top:12px;} .ang-a .ang-task{grid-column:2; font-family:var(--font-serif); font-weight:400; font-size:clamp(1.45rem,3vw,2.35rem); line-height:1.12; letter-spacing:-.01em;} .ang-a .ang-task__break{color:var(--graphite);} .ang-a .ang-foot{grid-column:2; display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; margin-top:14px;} .ang-a .ang-role{flex:1 1 280px;} .ang-a .ang-prod{font-size:.98rem;} .ang-a .ang-prod__name{border-bottom:2px solid transparent; transition:border-color .15s var(--ease);} .ang-a .ang-row:hover .ang-prod__name{border-color:var(--yellow);} .ang-a .ang-row:hover .ang-prod__arrow{transform:translateX(4px);} /* ════════════════════════════════════════════════════════════════ B · REICHWEITEN-ACHSE — Kontinuum persönlich→Team→Organisation Vertikale Achse + Nodes; Reichweite „weitet sich" (Reach-Bar). Motion 4+: Node-Glühpuls beim Eintritt, Gleiten via Spring-Easing. ════════════════════════════════════════════════════════════════ */ .ang-b .ang-axis{position:relative; margin-top:14px;} .ang-b .ang-station{position:relative; padding:0 0 46px 64px;} .ang-b .ang-station::before{ /* Achsensegment */ content:""; position:absolute; left:18px; top:10px; bottom:-10px; width:2px; background:var(--blue-wash); } .ang-b .ang-station:last-child::before{ background:linear-gradient(var(--blue-wash), transparent); } .ang-b .ang-node{ position:absolute; left:9px; top:5px; width:20px; height:20px; border-radius:50%; background:var(--paper); border:2.5px solid var(--blue); z-index:1; } .ang-b .ang-station__head{display:flex; align-items:center; gap:14px; margin:0 0 6px; flex-wrap:wrap;} .ang-b .ang-station__label{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); margin:0;} .ang-b .ang-reach{display:flex; align-items:center; gap:8px; margin:0 0 22px;} .ang-b .ang-reach__bar{height:4px; background:var(--blue); border-radius:2px;} .ang-b .ang-station--ich .ang-reach__bar{width:90px;} .ang-b .ang-station--team .ang-reach__bar{width:190px;} .ang-b .ang-station--org .ang-reach__bar{width:320px; max-width:64%;} .ang-b .ang-reach__note{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--silver);} .ang-b .ang-cards{display:grid; gap:16px; grid-template-columns:repeat(3,1fr);} .ang-b .ang-station--team .ang-cards{grid-template-columns:minmax(0,2fr) minmax(0,1fr);} .ang-b .ang-station--team .ang-cards > .ang-spacer{border:none;} .ang-b .ang-station--org .ang-cards{grid-template-columns:repeat(2,1fr);} .ang-b .ang-card{ border:1.5px solid rgba(26,26,26,.22); background:var(--paper-pure); padding:22px; border-radius:2px; display:flex; flex-direction:column; gap:14px; transition:border-color .18s var(--ease), transform .18s var(--ease); } .ang-b .ang-card:hover{border-color:var(--blue); transform:translateY(-2px);} .ang-b .ang-spacer{visibility:hidden;} .ang-b .ang-task{font-size:1.12rem; line-height:1.35; font-weight:600;} .ang-b .ang-task__wish{font-weight:600;} .ang-b .ang-task__break{font-weight:400; color:var(--graphite);} .ang-b .ang-card__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;} .ang-b .ang-prod{font-size:.95rem;} .ang-b .ang-card:hover .ang-prod__arrow{transform:translateX(4px);} .ang-b .ang-reveal{transition-timing-function:var(--ease-spring);} /* Node-Glühpuls ab Stufe 4 (Verbindung/Empfang) */ body[data-motion="4"] .ang-b .ang-reveal.is-in .ang-node, body[data-motion="5"] .ang-b .ang-reveal.is-in .ang-node, body[data-motion="6"] .ang-b .ang-reveal.is-in .ang-node{animation:angNodeGlow 1.3s var(--ease) .15s 2;} /* ════════════════════════════════════════════════════════════════ C · STANDORT-TRIAGE — interaktiver Situations-Filter Pills setzen data-filter am Container; nicht-passende Karten treten zurück, passende leuchten (Stufe 4+). Default „alle" = alles sichtbar. ════════════════════════════════════════════════════════════════ */ .ang-c .ang-pills{display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 8px;} .ang-c .ang-pill{ font-family:var(--font-sans); font-weight:600; font-size:.9rem; padding:10px 18px; border:1.5px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink); cursor:pointer; transition:transform .12s var(--ease), background .14s var(--ease), color .14s var(--ease); } .ang-c .ang-pill:hover{transform:translateY(-1px);} .ang-c .ang-pill:active{transform:translateY(0) scale(.97);} .ang-c .ang-pill[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff;} .ang-c .ang-pills__hint{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; color:var(--silver); align-self:center; margin-left:4px;} .ang-c .ang-group__label{transition:opacity .3s var(--ease);} .ang-c .ang-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;} .ang-c .ang-card{ position:relative; border:1.5px solid var(--ink); background:var(--paper-pure); padding:24px; border-radius:2px; box-shadow:5px 5px 0 -1px var(--blue-wash); display:flex; flex-direction:column; gap:14px; transition:opacity .35s var(--ease), transform .35s var(--ease), box-shadow .2s var(--ease); } .ang-c .ang-task{font-size:1.12rem; line-height:1.35;} .ang-c .ang-task__wish{font-weight:600;} .ang-c .ang-card__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;} .ang-c .ang-card:hover{transform:translateY(-2px); box-shadow:8px 8px 0 -1px var(--blue-wash);} .ang-c .ang-card:hover .ang-prod__arrow{transform:translateX(4px);} /* Filter-Zustände: gedimmt vs. hervorgehoben */ .ang-c[data-filter="ich"] .ang-card:not([data-reach="ich"]), .ang-c[data-filter="team"] .ang-card:not([data-reach="team"]), .ang-c[data-filter="org"] .ang-card:not([data-reach="org"]){ opacity:.34; transform:scale(.99); box-shadow:none; } .ang-c[data-filter="ich"] .ang-group:not([data-reach="ich"]) .ang-group__label, .ang-c[data-filter="team"] .ang-group:not([data-reach="team"]) .ang-group__label, .ang-c[data-filter="org"] .ang-group:not([data-reach="org"]) .ang-group__label{opacity:.4;} /* Empfang-Ring bei Treffer (Stufe 4+) */ .ang-c .ang-card.is-hit::after{content:""; position:absolute; inset:-2px; border:2px solid var(--blue); border-radius:2px; opacity:0; pointer-events:none;} body[data-motion="4"] .ang-c .ang-card.is-hit::after, body[data-motion="5"] .ang-c .ang-card.is-hit::after, body[data-motion="6"] .ang-c .ang-card.is-hit::after{animation:angRing 1.1s var(--ease) 1;} /* ════════════════════════════════════════════════════════════════ D · SPANNUNGS-KARTEN — der Gedankenstrich als Signatur-Scharnier Wunsch (Serif) · handgezeichneter Strich · Preis (Serif-Kursiv). Motion 6: Strich zeichnet sich beim Reveal selbst (Selbst-Zeichnen). ════════════════════════════════════════════════════════════════ */ .ang-d .ang-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;} .ang-d .ang-group--team .ang-grid, .ang-d .ang-group--org .ang-grid{grid-template-columns:repeat(2,1fr);} .ang-d .ang-card{ border:1.5px solid var(--ink); background:var(--paper-pure); padding:28px 26px; border-radius:2px; box-shadow:6px 6px 0 -1px var(--blue-wash); display:flex; flex-direction:column; gap:2px; transition:opacity .5s var(--ease), transform .3s var(--ease), box-shadow .18s var(--ease); } .ang-d .ang-card__top{display:flex; justify-content:space-between; align-items:center; margin:0 0 16px;} .ang-d .ang-card__no{font-family:var(--font-mono); font-size:.72rem; color:var(--silver);} .ang-d .ang-task__wish{display:block; font-family:var(--font-serif); font-weight:400; font-size:1.5rem; line-height:1.12; letter-spacing:-.01em; color:var(--ink);} .ang-d .ang-hinge{display:block; width:64%; height:13px; margin:12px 0 10px;} .ang-d .ang-hinge path{stroke:var(--blue); stroke-width:5; fill:none; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:0;} .ang-d .ang-task__break{display:block; font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:1.12rem; line-height:1.28; color:var(--graphite);} .ang-d .ang-card__foot{margin-top:22px; padding-top:16px; border-top:1px solid rgba(26,26,26,.14); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;} .ang-d .ang-role{flex:1 1 100%; margin:0 0 10px;} /* Motion 6: Selbst-Zeichnen + Hover-Choreografie */ body[data-motion="6"] .ang-d .ang-hinge path{stroke-dashoffset:100;} body[data-motion="6"] .ang-d .ang-reveal.is-in .ang-hinge path{animation:angDraw .9s var(--ease) .2s forwards;} body[data-motion="6"] .ang-d .ang-card:hover{transform:translate(-2px,-2px); box-shadow:9px 9px 0 -1px var(--blue);} body[data-motion="6"] .ang-d .ang-card:hover .ang-prod__arrow{transform:translateX(4px);} /* ════════════════════════════════════════════════════════════════ E · BÜHNENFOLGE — sequenzielle Voll-Momente, Reichweite als Bogen Drei Sektionen (paper / bone / ink). Je Angebot ein eigener Auftritt. Motion 5: Eintritts-Reveal je Bühne + Ambiente. ════════════════════════════════════════════════════════════════ */ .ang-e .ang-sect{padding:8px 0;} .ang-e .ang-sect--ich{background:var(--paper);} .ang-e .ang-sect--team{background:var(--bone);} .ang-e .ang-sect--org{background:var(--ink); color:var(--paper);} .ang-e .ang-sect__head{max-width:1180px; margin:0 auto; padding:56px 28px 8px; display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;} .ang-e .ang-sect__label{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--silver); margin:0;} .ang-e .ang-sect--org .ang-sect__label{color:var(--blue-wash);} .ang-e .ang-stage{border-top:1px solid rgba(26,26,26,.12);} .ang-e .ang-sect--org .ang-stage{border-top-color:rgba(255,255,255,.14);} .ang-e .ang-sect__head + .ang-stage{border-top:none;} .ang-e .ang-stage__inner{max-width:1180px; margin:0 auto; padding:48px 28px; display:grid; grid-template-columns:96px 1fr minmax(0,260px); gap:20px 40px; align-items:start;} .ang-e .ang-num{font-family:var(--font-serif); font-size:3.2rem; line-height:1; color:var(--blue-wash);} .ang-e .ang-sect--org .ang-num{color:var(--blue-wash);} .ang-e .ang-task{font-family:var(--font-serif); font-weight:400; font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1.1; letter-spacing:-.015em;} .ang-e .ang-task__break{color:var(--graphite);} .ang-e .ang-sect--org .ang-task__break{color:var(--blue-wash);} .ang-e .ang-aside{display:flex; flex-direction:column; gap:14px; padding-top:8px;} .ang-e .ang-role{font-size:1rem;} .ang-e .ang-sect--org .ang-role{color:var(--blue-wash);} .ang-e .ang-prod{font-size:1.05rem;} .ang-e .ang-sect--org .ang-prod{color:#fff;} .ang-e .ang-sect--org .ang-prod__name{border-bottom:2px solid var(--blue-wash);} .ang-e .ang-stage:hover .ang-prod__arrow{transform:translateX(4px);} .ang-e .ang-sect--org .ang-tag--anfrage{color:var(--blue-wash);} /* ── Draftbar (Dev-Werkzeug: Ansatz + Motion umschalten) ──────── */ .ang-draftbar{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:90; display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; max-width:94vw; background:var(--ink); border-radius:999px; padding:7px 10px; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); } .ang-draftbar__label{font-family:var(--font-mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--silver); padding:0 4px;} .ang-draftbar__sep{width:1px; height:18px; background:rgba(255,255,255,.2); margin:0 4px;} .ang-draftbar a, .ang-draftbar button{ font-family:var(--font-mono); font-size:.68rem; color:#fff; text-decoration:none; background:transparent; border:none; border-radius:999px; padding:6px 10px; cursor:pointer; line-height:1; white-space:nowrap; } .ang-draftbar a:hover, .ang-draftbar button:hover{background:rgba(255,255,255,.12);} .ang-draftbar a.is-current{background:var(--yellow); color:var(--ink);} .ang-draftbar button.is-current{background:var(--blue); color:#fff;} .ang-draftbar__motion{display:flex; gap:2px;} /* ════════════════════════════════════════════════════════════════ E-DERIVATE (E2/E3/E4) — Name-geführt, ohne Tags/Nummern, mutiger. Gemeinsame Basis .ang-edrv · Default-Motion 6. Produktname als Anker (wie .aq-product: Söhne Breit 700 uppercase + Punkt). ════════════════════════════════════════════════════════════════ */ .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);} .ang-edrv .ang-stage{display:block; text-decoration:none; color:inherit;} .ang-edrv .ang-prod-name{display:block; transition:color .18s var(--ease), transform .2s var(--ease);} .ang-edrv .ang-task{display:block;} .ang-edrv .ang-task__break{color:var(--graphite);} .ang-edrv .ang-role{display:block; color:var(--silver);} .ang-edrv .ang-go{display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue);} .ang-edrv .ang-go__arrow{transition:transform .2s var(--ease);} .ang-edrv .ang-stage:hover .ang-go__arrow{transform:translateX(5px);} /* Reichweiten-Sektionen als Farbbogen */ .ang-edrv .ang-sect--ich{background:var(--paper);} .ang-edrv .ang-sect--team{background:var(--bone);} .ang-edrv .ang-sect--org{background:var(--ink); color:var(--paper);} .ang-edrv .ang-sect--org .ang-prod-name{color:#fff;} .ang-edrv .ang-sect--org .ang-task__break{color:var(--blue-wash);} .ang-edrv .ang-sect--org .ang-role{color:var(--blue-wash);} .ang-edrv .ang-sect--org .ang-go{color:var(--blue-wash);} /* ── E2 · Namensführung — aufgeräumt, Name führt ──────────────── */ .ang-e2 .ang-segment{max-width:1180px; margin:0 auto; padding:84px 28px 14px;} .ang-e2 .ang-segment__meta{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--silver); margin:0 0 10px;} .ang-e2 .ang-sect--org .ang-segment__meta{color:var(--blue-wash);} .ang-e2 .ang-segment__title{font-family:var(--font-serif); font-weight:400; font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1; letter-spacing:-.02em; margin:0;} .ang-e2 .ang-stage{border-top:1px solid rgba(26,26,26,.14);} .ang-e2 .ang-sect--org .ang-stage{border-top-color:rgba(255,255,255,.16);} .ang-e2 .ang-stage__inner{max-width:1180px; margin:0 auto; padding:44px 28px; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:8px 56px; align-items:start;} .ang-e2 .ang-prod-name{grid-column:1; grid-row:1; font-size:clamp(2rem,4.4vw,3.2rem); margin:0 0 14px;} .ang-e2 .ang-task{grid-column:1; grid-row:2; font-family:var(--font-serif); font-size:clamp(1.25rem,2.1vw,1.6rem); line-height:1.18; letter-spacing:-.01em; max-width:30ch;} .ang-e2 .ang-role{grid-column:2; grid-row:1; padding-top:10px; font-size:1rem;} .ang-e2 .ang-go{grid-column:2; grid-row:2; align-self:start;} .ang-e2 .ang-stage:hover .ang-prod-name{color:var(--blue);} .ang-e2 .ang-sect--org .ang-stage:hover .ang-prod-name{color:var(--blue-wash);} /* ── E3 · Großplakat — riesiger Name, gelber Marker, Farbblöcke ── */ .ang-e3 .ang-segment{max-width:1320px; margin:0 auto; padding:92px 28px 8px;} .ang-e3 .ang-segment__meta{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--silver); margin:0 0 12px;} .ang-e3 .ang-sect--org .ang-segment__meta{color:var(--blue-wash);} .ang-e3 .ang-segment__title{font-family:var(--font-wide); font-weight:700; text-transform:uppercase; font-size:clamp(1.5rem,3.4vw,2.4rem); letter-spacing:-.01em; margin:0; color:var(--blue);} .ang-e3 .ang-sect--org .ang-segment__title{color:var(--blue-wash);} .ang-e3 .ang-stage{border-top:1px solid rgba(26,26,26,.12);} .ang-e3 .ang-sect--org .ang-stage{border-top-color:rgba(255,255,255,.14);} .ang-e3 .ang-stage__inner{max-width:1320px; margin:0 auto; padding:40px 28px 58px;} .ang-e3 .ang-prod-name{font-size:clamp(2.7rem,8.6vw,6.4rem); margin:0 0 24px;} .ang-e3 .ang-prod-name .nm{background-image:linear-gradient(to top, var(--yellow) 0 28%, transparent 28%);} .ang-e3 .ang-task{font-family:var(--font-serif); font-size:clamp(1.45rem,2.7vw,2.2rem); line-height:1.1; letter-spacing:-.01em; max-width:22ch;} .ang-e3 .ang-role{margin-top:20px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--silver);} .ang-e3 .ang-sect--org .ang-role{color:var(--blue-wash);} .ang-e3 .ang-stage:hover .ang-prod-name{transform:translateX(8px);} /* ── E4 · Directory — straffe Index-Liste NAME — Aufgabe ──────── */ .ang-e4 .ang-segment{max-width:1180px; margin:0 auto; padding:66px 28px 12px; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;} .ang-e4 .ang-segment__title{font-family:var(--font-wide); font-weight:700; text-transform:uppercase; font-size:clamp(1.1rem,2.2vw,1.55rem); letter-spacing:.02em; margin:0; color:var(--ink);} .ang-e4 .ang-sect--org .ang-segment__title{color:#fff;} .ang-e4 .ang-segment__meta{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--silver); margin:0;} .ang-e4 .ang-sect--org .ang-segment__meta{color:var(--blue-wash);} .ang-e4 .ang-stage{border-top:1px solid rgba(26,26,26,.18);} .ang-e4 .ang-sect--org .ang-stage{border-top-color:rgba(255,255,255,.16);} .ang-e4 .ang-sect .ang-stage:last-child{border-bottom:1px solid rgba(26,26,26,.18);} .ang-e4 .ang-sect--org .ang-stage:last-child{border-bottom-color:rgba(255,255,255,.16);} .ang-e4 .ang-stage__inner{max-width:1180px; margin:0 auto; padding:26px 28px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr) auto; gap:6px 40px; align-items:baseline; transition:background .2s var(--ease);} .ang-e4 .ang-stage:hover .ang-stage__inner{background:rgba(0,0,254,.04);} .ang-e4 .ang-sect--org .ang-stage:hover .ang-stage__inner{background:rgba(255,255,255,.06);} .ang-e4 .ang-prod-name{grid-column:1; grid-row:1; font-size:clamp(1.5rem,2.8vw,2.3rem);} .ang-e4 .ang-role{grid-column:1; grid-row:2; font-size:.85rem; margin-top:6px;} .ang-e4 .ang-task{grid-column:2; grid-row:1 / span 2; align-self:center; font-family:var(--font-serif); font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.22;} .ang-e4 .ang-go{grid-column:3; grid-row:1 / span 2; align-self:center; margin-top:0;} .ang-e4 .ang-stage:hover .ang-prod-name{color:var(--blue);} .ang-e4 .ang-sect--org .ang-stage:hover .ang-prod-name{color:var(--blue-wash);} /* Derivate · Responsive */ @media (max-width:820px){ .ang-e2 .ang-stage__inner{grid-template-columns:1fr; gap:6px;} .ang-e2 .ang-role{grid-column:1; grid-row:auto; padding-top:4px;} .ang-e2 .ang-task,.ang-e2 .ang-go,.ang-e2 .ang-prod-name{grid-column:1; grid-row:auto;} .ang-e4 .ang-stage__inner{grid-template-columns:1fr; gap:4px;} .ang-e4 .ang-task{grid-column:1; grid-row:auto; align-self:start; margin-top:10px;} .ang-e4 .ang-role{grid-column:1; grid-row:auto;} .ang-e4 .ang-go{grid-column:1; grid-row:auto; align-self:start; margin-top:12px;} .ang-e3 .ang-prod-name{font-size:clamp(2.2rem,12vw,3.6rem);} } /* ════════════════════════════════════════════════════════════════ F-DERIVATE (F1/F2/F3) — Aufgabe führt GROSS, Produktname klein darunter. E3-Ästhetik (gelber Marker) auf die AUFGABE übertragen. Sanfter Reichweiten-Tonwert statt Hell/Dunkel → ausgewogenere Einheiten. Collins-Intro: Statement-H1. Default-Motion 6. ════════════════════════════════════════════════════════════════ */ .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);} /* Intro · Collins-Statement */ .ang-fdrv .ang-h1__break{display:block; color:var(--graphite);} /* Sanfter Reichweiten-Tonwert (kein Dunkelblock) */ .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);} /* ── F1 · Vorhaben gestapelt ──────────────────────────────────── */ .ang-f1 .ang-stage__inner{max-width:1080px; margin:0 auto; padding:42px 28px 50px;} .ang-f1 .ang-task{font-size:clamp(2rem,5vw,4.3rem); margin:0 0 20px; max-width:20ch;} .ang-f1 .ang-prod-name{font-size:clamp(1.3rem,2vw,1.9rem); margin:0 0 8px;} .ang-f1 .ang-role{max-width:48ch; font-size:1.02rem;} /* ── F2 · E-Spalten (Name | Aufgabe | Rolle+Weg) ──────────────── */ .ang-f2 .ang-stage__inner{max-width:1180px; margin:0 auto; padding:38px 28px; display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr) minmax(0,220px); gap:16px 44px; align-items:start;} .ang-f2 .ang-task{grid-column:2; grid-row:1 / span 2; font-size:clamp(1.5rem,2.9vw,2.45rem); line-height:1.1; max-width:23ch;} .ang-f2 .ang-prod-name{grid-column:1; grid-row:1; font-size:clamp(1.15rem,1.5vw,1.5rem); padding-top:6px;} .ang-f2 .ang-role{grid-column:3; grid-row:1; padding-top:8px; font-size:.95rem;} .ang-f2 .ang-go{grid-column:3; grid-row:2; align-self:start; margin-top:8px;} /* ── F3 · Aufgabe | Meta (asymmetrisch) ───────────────────────── */ .ang-f3 .ang-stage__inner{max-width:1180px; margin:0 auto; padding:44px 28px; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:14px 56px; align-items:start;} .ang-f3 .ang-task{grid-column:1; grid-row:1 / span 3; font-size:clamp(1.9rem,4.2vw,3.6rem); line-height:1.06; max-width:18ch;} .ang-f3 .ang-prod-name{grid-column:2; grid-row:1; font-size:clamp(1.2rem,1.7vw,1.6rem); margin:0 0 4px; padding-top:8px;} .ang-f3 .ang-role{grid-column:2; grid-row:2; font-size:1rem; margin:0;} .ang-f3 .ang-go{grid-column:2; grid-row:3; align-self:start; margin-top:12px;} /* Derivate-F · Responsive */ @media (max-width:820px){ .ang-f2 .ang-stage__inner,.ang-f3 .ang-stage__inner{grid-template-columns:1fr; gap:6px;} .ang-f2 .ang-task,.ang-f3 .ang-task{grid-column:1; grid-row:auto; margin-bottom:8px;} .ang-f2 .ang-prod-name,.ang-f3 .ang-prod-name{grid-column:1; grid-row:auto; padding-top:0;} .ang-f2 .ang-role,.ang-f3 .ang-role{grid-column:1; grid-row:auto; padding-top:0;} .ang-f2 .ang-go,.ang-f3 .ang-go{grid-column:1; grid-row:auto;} .ang-f1 .ang-task{font-size:clamp(1.8rem,8vw,3rem);} } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width:820px){ .ang-cta__inner{grid-template-columns:1fr;} .ang-b .ang-cards, .ang-b .ang-station--team .ang-cards, .ang-b .ang-station--org .ang-cards, .ang-c .ang-grid, .ang-d .ang-grid, .ang-d .ang-group--team .ang-grid, .ang-d .ang-group--org .ang-grid{grid-template-columns:1fr;} .ang-b .ang-spacer{display:none;} .ang-e .ang-stage__inner{grid-template-columns:1fr; gap:14px;} .ang-e .ang-num{font-size:2.4rem;} .ang-a .ang-row{grid-template-columns:40px 1fr;} } /* ── Globaler Clamp: Reduced-Motion = Stufe 1 ─────────────────── */ @media (prefers-reduced-motion:reduce){ body.ang .ang-reveal{opacity:1 !important; transform:none !important; transition:none !important;} body.ang *{animation:none !important;} body.ang .ang-d .ang-hinge path{stroke-dashoffset:0 !important;} }