/* Startseite, Runde 27: editorial statt SaaS. Wenige Elemente, grosse Ideen, starke
   Bilder, dramatische Massstabswechsel. Der Auftrag steht in .design/onagero-web/DESIGN_BRIEF.md. */
.vf-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gross27 { font: 700 clamp(44px, 6.4vw, 104px)/.96 var(--display); font-stretch: 104%; letter-spacing: -.045em; margin: 0; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; }

/* ---------------- 1 Kopf: Bauen, was fehlt ---------------- */
.h27 { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 78% 40%, #E9F2D6 0%, var(--papier) 58%); }
.h27-bahn { max-width: 1440px; margin: 0 auto; padding: clamp(40px, 6vw, 90px) var(--rand) clamp(40px, 5vw, 70px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: center; min-height: min(88vh, 900px); }
.h27 h1 { font: 700 clamp(64px, 9.6vw, 156px)/.9 var(--display); font-stretch: 104%; letter-spacing: -.05em; margin: 0; hyphens: manual; -webkit-hyphens: manual; }
.h27-satz { margin: 28px 0 0; max-width: 30ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--tinte-2); }
.h27-feld { margin: 30px 0 0; max-width: 460px; display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 18px; background: #fff; border: 1px solid var(--linie); border-radius: 18px;
  box-shadow: 0 24px 50px -36px rgba(16, 44, 29, .5); transition: border-color .2s, box-shadow .2s; }
.h27-feld:focus-within { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(128, 181, 7, .22), 0 24px 50px -36px rgba(16, 44, 29, .5); }
.h27-feld textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: none; resize: none; overflow: hidden; font: 400 17px/1.4 var(--text); color: var(--tinte); padding: 9px 0; max-height: 7.2em; }
.h27-feld textarea::placeholder { color: var(--tinte-3); }
.h27-feld button { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--lime); color: #fff; display: grid; place-items: center; cursor: pointer; }
.h27-feld button svg { width: 20px; height: 20px; }
.h27-feld button:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
.h27-tasten { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.h27-leise { color: var(--tinte-2); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

/* Die Welt: was aus je einem Satz werden kann, um die Figur herum. */
.h27-welt { position: relative; height: clamp(520px, 44vw, 720px); }
.w-teil { position: absolute; margin: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -40px rgba(16, 44, 29, .55);
  transition: transform .9s cubic-bezier(.2, .75, .2, 1), opacity .6s ease, filter .6s ease, box-shadow .6s ease; transform: translate(0, 0) scale(var(--s, 1)) rotate(var(--r, 0deg));
  opacity: .9; filter: saturate(.8); z-index: 1; }
.w-teil figcaption { position: absolute; left: 12px; bottom: 12px; font: 600 13px/1 var(--text); color: var(--tinte); background: rgba(255, 255, 255, .92); border-radius: 99px; padding: 7px 11px;
  opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.w-teil img { display: block; width: 100%; height: auto; }
.w-maengel    { left: 0;   top: 4%;  width: 46%; --r: -2.5deg; }
.w-code       { left: 54%; top: 0;   width: 44%; --r: 2deg; }
.w-kennzahlen { left: 50%; top: 60%; width: 48%; --r: 1.5deg; }
.w-stueck     { left: 4%;  top: 64%; width: 38%; --r: -1.5deg; }
.w-vorlage    { left: 32%; top: 34%; width: 34%; --r: .5deg; opacity: .55; z-index: 0; }
.w-karte { padding: 16px 18px 20px; }
.w-titel { margin: 0 0 10px; font: 500 12.5px/1 var(--mono); color: var(--tinte-3); }
.w-code { background: #13201A; }
.w-code .w-titel { color: rgba(255, 255, 255, .55); }
.w-code pre { margin: 0; font: 400 12.5px/1.6 var(--mono); color: #DDE7E1; white-space: pre-wrap; }
.w-code .k { color: #A6D65A; } .w-code .s { color: #E9C58E; } .w-code .z { color: #8FC7E8; }
.w-liste table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.w-liste td { padding: 7px 0; border-top: 1px solid var(--linie-2); } .w-liste td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinte-2); }
/* Aktiv: ein Ergebnis tritt nach vorn, die anderen treten zurueck */
.h27-welt.spielt .w-teil { opacity: .32; filter: saturate(.4) blur(1px); }
.h27-welt.spielt .w-teil.an { opacity: 1; filter: none; z-index: 3; --s: 1.08; box-shadow: 0 0 0 3px var(--lime), 0 40px 80px -40px rgba(16, 44, 29, .6); }
.h27-welt .w-teil.an figcaption { opacity: 1; transform: none; }
.h27-welt.leer .w-teil { opacity: .18; filter: saturate(.3) blur(2px); }
/* Die Figur des Produkts steht gross in der Mitte der Welt */
.h27-figur { position: absolute; left: 30%; top: 22%; width: 40%; height: 56%; z-index: 2; pointer-events: none; }
.h27-figur .lima-buehne { position: absolute; inset: 0; background: none; border: 0; }
.h27-bitte { position: absolute; left: 50%; top: 14%; z-index: 4; translate: -50% 0; margin: 0; max-width: min(360px, 80%); font: 500 16px/1.4 var(--text); color: var(--tinte);
  background: var(--lime-hell); border: 1px solid rgba(128, 181, 7, .45); border-radius: 18px 18px 6px 18px; padding: 11px 15px; box-shadow: 0 18px 40px -28px rgba(16, 44, 29, .55);
  opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.h27-bitte.da { opacity: 1; transform: none; }
.h27-antwort { position: absolute; left: 50%; bottom: 8%; z-index: 5; translate: -50% 0; width: min(420px, 92%); background: #fff; border-radius: 20px; padding: 18px 20px 20px;
  box-shadow: 0 30px 70px -40px rgba(16, 44, 29, .6); }
.h27-antwort[hidden] { display: none; }
.h27-antwort p { margin: 0 34px 14px 0; color: var(--tinte-2); font-size: 16px; line-height: 1.5; }
.h27-zu { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linie); background: #fff; color: var(--tinte-2); display: grid; place-items: center; cursor: pointer; }
.h27-zu svg { width: 15px; height: 15px; }
.h27-beispiel { position: absolute; right: 0; bottom: -4px; font: 500 12px/1 var(--mono); color: var(--tinte-3); }

/* ---------------- 2 und 8: ein Foto ueber die ganze Breite, ein Satz ---------------- */
.bild-abschnitt { position: relative; min-height: min(86vh, 820px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: var(--nacht); }
.bild-abschnitt > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w27::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 18, 14, .78) 0%, rgba(10, 18, 14, .42) 42%, rgba(10, 18, 14, 0) 70%); }
.w27-text { position: relative; z-index: 1; max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 var(--rand) clamp(48px, 7vw, 110px); }
.w27-text h2 { font: 700 clamp(46px, 6.6vw, 108px)/.95 var(--display); font-stretch: 104%; letter-spacing: -.045em; max-width: 11ch; color: #fff; hyphens: manual; }
.w27-text p { margin: 22px 0 0; max-width: 36ch; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.45; color: rgba(255, 255, 255, .88); }
.s27 { align-items: center; }
.s27::after { background: linear-gradient(270deg, rgba(10, 18, 14, .82) 0%, rgba(10, 18, 14, .5) 40%, rgba(10, 18, 14, 0) 70%); }
.s27 .w27-text { display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding-bottom: 0; }
.s27 .w27-text h2 { max-width: 14ch; }
.s27 .tasten { margin-top: 28px; }
.s27 .taste-voll { background: var(--lime); color: var(--nacht); }
.s27 .taste-voll .ring { color: var(--nacht); }

/* ---------------- 3 Ergebnisse: eine grosse Collage ---------------- */
.c27 { padding: clamp(80px, 11vw, 170px) 0 clamp(60px, 8vw, 120px); background: #fff; }
.c27-satz { margin: 26px 0 0; max-width: 34ch; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; color: var(--tinte-2); }
.c27-collage { position: relative; margin-top: clamp(40px, 6vw, 80px); height: clamp(640px, 64vw, 980px); }
.c27-teil { position: absolute; margin: 0; width: 44%; transition: transform .5s cubic-bezier(.2, .75, .2, 1); }
.c27-teil img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 40px 80px -50px rgba(16, 44, 29, .6); border: 1px solid var(--linie-2); }
.c27-teil figcaption { margin-top: 14px; display: grid; gap: 4px; max-width: 34ch; }
.c27-teil b { font: 700 clamp(28px, 3vw, 46px)/1 var(--display); letter-spacing: -.03em; color: var(--tinte); }
.c27-teil span { font-size: 16px; line-height: 1.45; color: var(--tinte-2); }
.c27-1 { left: 0; top: 0; width: 50%; transform: rotate(-1.2deg); z-index: 2; }
.c27-2 { left: 56%; top: 4%; width: 40%; transform: rotate(1deg); z-index: 1; }
.c27-3 { left: 38%; top: 38%; width: 46%; transform: rotate(-.6deg); z-index: 3; }
.c27-4 { left: 2%; top: 60%; width: 34%; transform: rotate(1.4deg); z-index: 2; }
.c27-5 { left: 70%; top: 66%; width: 30%; transform: rotate(-1.6deg); z-index: 4; }
.c27-teil:hover { transform: rotate(0) scale(1.02); z-index: 6; }
.c27-fuss { margin: 30px 0 0; font-size: 14px; color: var(--tinte-3); }

/* ---------------- 4 Das ist bereits ein Programm ---------------- */
.k27 { padding: clamp(80px, 11vw, 170px) 0; }
.k27-satz { margin: 26px 0 0; max-width: 40ch; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; color: var(--tinte-2); }
.k27-bild { margin: clamp(48px, 7vw, 90px) 0 0; }
.k27-kette { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; justify-content: center; }
.k27-kette li { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; padding: 0 4px; position: relative;
  transition: flex-grow .9s cubic-bezier(.2, .75, .2, 1), opacity .6s ease, transform .6s ease, padding .9s ease; }
.k27-kette li + li::before { content: ''; position: absolute; left: -10px; top: 42px; width: 20px; height: 2px; background: var(--tinte-3); opacity: .5; }
.k27-zeichen { width: 84px; height: 84px; border-radius: 24px; background: #fff; border: 1px solid var(--linie-2); display: grid; place-items: center; color: var(--tinte-2);
  box-shadow: 0 20px 40px -32px rgba(16, 44, 29, .5); transition: transform .6s ease, background .6s ease, color .6s ease; }
.k27-zeichen svg { width: 40px; height: 40px; }
.k27-kette b { font: 600 15px/1.25 var(--text); color: var(--tinte); overflow-wrap: anywhere; }
.k27-kette small { font-size: 13px; color: var(--tinte-3); }
.k27-weg .k27-zeichen { background: #FFF7EE; color: #A4431E; border-color: #F2D9C4; }
.k27-neu { flex-grow: 0; opacity: 0; transform: scale(.6); padding: 0; overflow: hidden; }
.k27-neu .k27-zeichen { background: var(--nacht); color: var(--lime); border-color: var(--nacht); width: 110px; height: 110px; border-radius: 32px; }
.k27-neu .k27-zeichen svg { width: 52px; height: 52px; }
/* Klar: die Mechanik faellt weg, Onagero steht an ihrer Stelle */
.k27-bild.klar .k27-weg { flex-grow: 0; opacity: 0; transform: scale(.4); padding: 0; overflow: hidden; }
.k27-bild.klar .k27-neu { flex-grow: 1.6; opacity: 1; transform: none; padding: 0 4px; }
.k27-bild.klar .k27-bleibt .k27-zeichen { transform: scale(1.12); }
.k27-bild figcaption { margin-top: 30px; text-align: center; }
.k27-nochmal { font: 500 14px/1 var(--text); color: var(--tinte-2); background: none; border: 1px solid var(--linie); border-radius: 99px; padding: 10px 16px; cursor: pointer; }
.k27-nochmal:hover { color: var(--tinte); border-color: var(--tinte-3); }
.k27-pointe { margin: clamp(60px, 8vw, 110px) 0 0; text-align: center; font: 700 clamp(38px, 5vw, 80px)/1 var(--display); letter-spacing: -.04em; color: var(--tinte); }
.k27-zahlen { margin: 40px auto 0; max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; font-size: 14.5px; line-height: 1.5; color: var(--tinte-2); }
.k27-zahlen b { display: block; font: 700 36px/1 var(--display); letter-spacing: -.03em; color: var(--tinte); margin-bottom: 6px; }
.k27-zahlen a { color: var(--tinte-3); }

/* ---------------- 5 Lernen. Bauen. Analysieren. ---------------- */
.f27 { background: #fff; }
.f27-reihe { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); min-height: min(72vh, 720px); }
.f27-um { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
.f27-um .f27-bild { order: 2; }
.f27-bild { position: relative; overflow: hidden; }
.f27-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f27-text { align-self: center; padding: clamp(40px, 6vw, 96px); max-width: 640px; }
.f27-text h3 { margin: 0; font: 700 clamp(56px, 7.4vw, 124px)/.9 var(--display); font-stretch: 104%; letter-spacing: -.05em; color: var(--tinte); }
.f27-text p { margin: 24px 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--tinte-2); }
.f27-text ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.f27-text li { font: 600 17px/1.35 var(--text); color: var(--tinte); }
.f27-text li a { color: var(--tinte); text-decoration: none; border-bottom: 2px solid rgba(128, 181, 7, .6); }
.f27-text li a:hover { border-bottom-color: var(--lime); }
.f27-abteilungen { margin: 0; padding: 28px var(--rand) 40px; text-align: center; font-size: 15px; color: var(--tinte-3); }
.f27-abteilungen a { color: var(--tinte-2); margin: 0 8px; }

/* ---------------- 6 Onagero kennt dein Unternehmen ---------------- */
.d27 { background: radial-gradient(90% 70% at 30% 50%, #1B3326 0%, var(--nacht) 70%); color: #fff; padding: clamp(80px, 11vw, 170px) 0; overflow: hidden; }
.d27-rahmen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.d27-welt { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; }
.d27-welt svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.d27-welt line { stroke: rgba(128, 181, 7, .5); stroke-width: .35; stroke-dasharray: 1.2 1.4; animation: d27-fluss 3s linear infinite; }
@keyframes d27-fluss { to { stroke-dashoffset: -10; } }
.d27-quelle { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; white-space: nowrap; font: 500 14px/1 var(--mono); color: #E3EAE6;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 99px; padding: 10px 14px; backdrop-filter: blur(4px); }
.d27-kern { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(128, 181, 7, .5) 0%, rgba(128, 181, 7, 0) 70%); }
.d27-kern::after { content: ''; position: absolute; inset: 26%; border-radius: 50%; border: 9px solid var(--lime); border-right-color: transparent; }
.d27 .gross27 { color: #fff; }
.d27 dl { margin: 40px 0 0; display: grid; gap: 26px; }
.d27 dt { font: 700 clamp(24px, 2.4vw, 34px)/1.1 var(--display); letter-spacing: -.02em; color: #fff; }
.d27 dd { margin: 6px 0 0; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.d27-fuss { margin: 36px 0 0; font-size: 15px; color: var(--lime); }

/* ---------------- 7 Vertrauen: kompakt, ohne Kaesten ---------------- */
.v27 { padding: clamp(70px, 9vw, 130px) 0; }
.v27 h2 { font: 700 clamp(34px, 3.8vw, 58px)/1.02 var(--display); letter-spacing: -.035em; max-width: 18ch; margin: 0; }
.v27 ul { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
.v27 li { display: grid; gap: 8px; align-content: start; }
.v27 li svg { width: 34px; height: 34px; color: var(--lime-tief); }
.v27 li b { font: 700 20px/1.2 var(--display); letter-spacing: -.01em; color: var(--tinte); margin-top: 6px; }
.v27 li span { font-size: 16px; line-height: 1.5; color: var(--tinte-2); }
.v27-mehr { margin: 34px 0 0; } .v27-mehr a { color: var(--tinte); font-weight: 600; }

/* ---------------- Telefon ---------------- */
@media (max-width: 900px) {
  .h27-bahn { grid-template-columns: 1fr; min-height: 0; padding-top: 36px; gap: 36px; }
  .h27 h1 { font-size: clamp(58px, 17vw, 90px); }
  .h27-welt { height: 470px; margin: 0 -8px; }
  .w-maengel { left: 0; top: 2%; width: 62%; }
  .w-code { left: 40%; top: 0; width: 60%; }
  .w-kennzahlen { left: 36%; top: 64%; width: 64%; }
  .w-stueck { left: 0; top: 66%; width: 52%; }
  .w-vorlage { left: 22%; top: 36%; width: 56%; }
  .w-code pre { font-size: 10px; }
  .w-liste table { font-size: 11px; }
  .h27-figur { left: 22%; width: 56%; top: 24%; height: 52%; }
  .h27-bitte { top: 6%; font-size: 14.5px; }
  .bild-abschnitt { min-height: 640px; }
  .bild-abschnitt > img { object-position: 70% center; }
  .w27::after { background: linear-gradient(0deg, rgba(10, 18, 14, .86) 0%, rgba(10, 18, 14, .4) 55%, rgba(10, 18, 14, .1) 100%); }
  .s27::after { background: linear-gradient(0deg, rgba(10, 18, 14, .86) 0%, rgba(10, 18, 14, .4) 55%, rgba(10, 18, 14, .1) 100%); }
  .s27 { align-items: flex-end; } .s27 .w27-text { align-items: flex-start; text-align: left; padding-bottom: 56px; }
  .s27 > img { object-position: 30% center; }
  .c27-collage { height: auto; display: grid; gap: 44px; }
  .c27-teil { position: relative; left: auto !important; top: auto !important; width: 100% !important; }
  .c27-teil:nth-child(even) { width: 88% !important; margin-left: 12%; }
  .k27-kette { flex-direction: column; align-items: stretch; gap: 16px; }
  .k27-kette li { display: grid; grid-template-columns: 64px 1fr; justify-items: start; text-align: left; align-items: center; column-gap: 14px; row-gap: 2px; max-height: 90px;
    transition: max-height .9s ease, opacity .6s ease, transform .6s ease; }
  .k27-kette li + li::before { left: 31px; top: -12px; width: 2px; height: 10px; }
  .k27-kette li .k27-zeichen { grid-row: span 2; width: 64px; height: 64px; border-radius: 18px; }
  .k27-kette li .k27-zeichen svg { width: 30px; height: 30px; }
  .k27-neu { max-height: 0 !important; }
  .k27-bild.klar .k27-weg { max-height: 0; margin: -8px 0; }
  .k27-bild.klar .k27-neu { max-height: 110px !important; }
  .k27-neu .k27-zeichen { width: 64px !important; height: 64px !important; border-radius: 18px !important; }
  .k27-zahlen { grid-template-columns: 1fr; }
  .f27-reihe, .f27-um { grid-template-columns: 1fr; min-height: 0; }
  .f27-bild { aspect-ratio: 4 / 3; } .f27-um .f27-bild { order: 0; }
  .f27-text { padding: 32px var(--rand) 56px; }
  .d27-rahmen { grid-template-columns: 1fr; }
  .d27-welt { max-width: 420px; margin: 0 auto; }
  .d27-quelle { font-size: 11.5px; padding: 8px 10px; }
  .v27 ul { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}
@media (max-width: 520px) { .v27 ul { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .w-teil, .k27-kette li, .c27-teil { transition: none; }
  .d27-welt line { animation: none; }
}

/* ---------------- Nachbesserung nach den Aufnahmen ---------------- */
/* Eine aeltere Regel setzt #daten hell; der dunkle Abschnitt braucht die hoehere Stelle. */
section.d27#daten { background: radial-gradient(90% 70% at 30% 50%, #1B3326 0%, var(--nacht) 70%); }
/* Die Figur ist so gross, wie ihr Raum breit ist: der Raum wird groesser. */
.h27-figur { left: 18%; width: 64%; top: 12%; height: 76%; }
.h27-bitte { top: 3%; }
/* "Analysieren." passt in seine Spalte */
.f27-reihe { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
.f27-um { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); }
.f27-text { padding: clamp(32px, 4.5vw, 72px); }
.f27-text h3 { font-size: clamp(52px, 5.8vw, 96px); }
/* Die Collage bekommt Hoehe, damit keine Beschriftung auf der naechsten liegt */
.c27-collage { height: clamp(780px, 78vw, 1140px); }
.c27-2 { top: 2%; } .c27-3 { top: 33%; } .c27-4 { top: 60%; } .c27-5 { top: 63%; }
@media (max-width: 900px) {
  .h27-figur { left: 14%; width: 72%; top: 18%; height: 64%; }
  .c27-collage { height: auto; }
}
@media (max-width: 900px) { .f27-reihe, .f27-um { grid-template-columns: 1fr; } }

/* ================= Runde 28: wer davor sitzt ================= */
/* Kopf: oben Versprechen und Feld, darunter eine Szene von links nach rechts */
.h27-bahn { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 0; align-items: end; padding-bottom: 20px; }
.h27-rechts { padding-bottom: 14px; }
.h27-satz { margin-top: 0; }
.sz { position: relative; max-width: 1440px; margin: 0 auto; padding: 10px var(--rand) clamp(50px, 6vw, 90px); display: grid;
  grid-template-columns: minmax(0, 26fr) minmax(0, 8fr) minmax(0, 20fr) minmax(0, 8fr) minmax(0, 38fr); align-items: center; }
.sz-spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sz-kopf { margin: 0; font: 600 14px/1 var(--text); color: var(--tinte-3); }
.sz-leute, .sz-werke { position: relative; }
.sz-leute { aspect-ratio: 4 / 5; }
.sz-person { position: absolute; inset: 0; margin: 0; border-radius: 22px; overflow: hidden; opacity: 0; transition: opacity .7s ease; }
.sz-person img { width: 100%; height: 100%; object-fit: cover; }
.sz-person figcaption { position: absolute; left: 12px; top: 12px; font: 600 13px/1 var(--text); color: var(--tinte); background: rgba(255, 255, 255, .92); border-radius: 99px; padding: 7px 11px; }
.sz-person.an { opacity: 1; }
.sz-bitte { position: absolute; left: 8%; right: -18%; bottom: 7%; z-index: 3; margin: 0; font: 500 17px/1.4 var(--text); color: var(--tinte); background: var(--lime-hell);
  border: 1px solid rgba(128, 181, 7, .45); border-radius: 18px 18px 18px 6px; padding: 12px 16px; box-shadow: 0 20px 40px -26px rgba(16, 44, 29, .6);
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.sz-bitte.da { opacity: 1; transform: none; }
.sz-weg { height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, var(--tinte-3) 0 6px, transparent 6px 12px); opacity: .25; transition: opacity .4s ease; }
.sz-weg.an { opacity: 1; background: repeating-linear-gradient(90deg, var(--lime) 0 8px, transparent 8px 14px); animation: sz-fluss .6s linear infinite; }
@keyframes sz-fluss { to { background-position: 14px 0; } }
.sz-mitte .h27-figur { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 1; }
.sz-werke { aspect-ratio: 16 / 11; }
.sz-werk { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; opacity: 0; transform: translateX(24px) scale(.96);
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .75, .2, 1); }
.sz-werk.an { opacity: 1; transform: none; }
.sz-werk > img, .sz-werk > .w-karte { width: 100%; border-radius: 16px; box-shadow: 0 0 0 3px var(--lime), 0 40px 80px -46px rgba(16, 44, 29, .6); background: #fff; }
.sz-werk > img { height: auto; display: block; }
.sz-werk figcaption { position: absolute; left: 14px; bottom: -34px; font: 600 15px/1 var(--text); color: var(--lime-tief); }
.sz .h27-antwort { position: absolute; inset: 0; translate: none; left: 0; bottom: auto; width: auto; display: flex; flex-direction: column; justify-content: center; }
.sz .h27-antwort[hidden] { display: none; }
.sz .h27-beispiel { right: var(--rand); bottom: 18px; }
.sz.leer .sz-person, .sz.leer .sz-werk { opacity: 0; }
.sz.leer .sz-leute { background: #fff; border-radius: 22px; border: 1px dashed var(--linie); }
.sz.leer .sz-leute::before { content: 'Du'; position: absolute; left: 50%; top: 40%; translate: -50% -50%; font: 700 64px/1 var(--display); color: var(--linie); }

/* So arbeitest du mit Onagero: die Buehne des Produkts, gross */
.a27 { padding: clamp(80px, 11vw, 170px) 0; background: #fff; }
.a27-satz { margin: 26px 0 0; max-width: 40ch; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; color: var(--tinte-2); }
.a27-buehne { margin-top: clamp(36px, 5vw, 64px); }
.a27-buehne .vf-pane { height: clamp(560px, 46vw, 680px); }
.a27-fuss { margin: 34px auto 0; max-width: 34ch; text-align: center; font: 700 clamp(24px, 2.4vw, 36px)/1.2 var(--display); letter-spacing: -.02em; color: var(--tinte); }

/* Excel-Kette: ein Durcheinander, das sich aufraeumt */
.x27 { padding: clamp(80px, 11vw, 170px) 0; overflow: hidden; }
.x27-satz { margin: 26px 0 0; font: 700 clamp(24px, 2.6vw, 38px)/1.15 var(--display); letter-spacing: -.02em; color: var(--lime-tief); max-width: 30ch; }
.x27-bild { position: relative; margin: clamp(40px, 6vw, 80px) 0 0; height: clamp(520px, 50vw, 740px); }
.x27-ding { position: absolute; transition: transform 1.1s cubic-bezier(.6, 0, .3, 1), opacity .8s ease; box-shadow: 0 30px 60px -40px rgba(16, 44, 29, .6); }
.x27-blatt { left: 4%; top: 6%; width: 52%; transform: rotate(-3deg); border-radius: 10px; overflow: hidden; z-index: 2; }
.x27-blatt img { display: block; width: 100%; height: auto; }
.x27-mail { left: 48%; top: 2%; width: 34%; transform: rotate(4deg); background: #fff; border-radius: 12px; padding: 16px 18px; font-size: 14px; line-height: 1.45; color: var(--tinte-2); z-index: 3; border: 1px solid var(--linie-2); }
.x27-mail p { margin: 0; } .x27-kopf { font-weight: 700; color: var(--tinte) !important; margin-bottom: 8px !important; }
.x27-mail2 { left: 58%; top: 42%; width: 32%; transform: rotate(-2.5deg); z-index: 4; }
.x27-zettel { left: 26%; top: 58%; width: 190px; transform: rotate(6deg); background: #FFE98A; padding: 18px; font: 700 17px/1.3 var(--text); color: #6B4E00; border-radius: 3px; z-index: 5; }
.x27-datei { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--linie-2); border-radius: 10px; padding: 10px 14px; font: 500 14px/1 var(--mono); color: var(--tinte-2); z-index: 6; }
.x27-datei i { width: 14px; height: 17px; border-radius: 2px 5px 2px 2px; background: #217346; }
.d1 { left: 2%; top: 70%; transform: rotate(-7deg); } .d2 { left: 44%; top: 78%; transform: rotate(3deg); } .d3 { left: 80%; top: 22%; transform: rotate(8deg); } .d4 { left: 70%; top: 84%; transform: rotate(-4deg); }
.x27-ziel { position: absolute; left: 50%; top: 50%; width: min(760px, 70%); translate: -50% -50%; opacity: 0; transform: scale(.85); transition: opacity .9s ease .5s, transform 1.1s cubic-bezier(.2, .75, .2, 1) .5s; z-index: 1; }
.x27-ziel img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 0 0 3px var(--lime), 0 50px 90px -50px rgba(16, 44, 29, .6); }
.x27-ziel p { margin: 18px 0 0; text-align: center; font-size: 17px; color: var(--tinte-2); }
/* Aufgeraeumt: alles fliegt aus dem Bild, das Programm bleibt */
.x27-bild.klar .x27-ding { opacity: 0; }
.x27-bild.klar .x27-blatt { transform: translate(-60%, -20%) rotate(-12deg); }
.x27-bild.klar .x27-mail { transform: translate(70%, -40%) rotate(14deg); }
.x27-bild.klar .x27-mail2 { transform: translate(80%, 30%) rotate(-10deg); }
.x27-bild.klar .x27-zettel { transform: translate(-40%, 80%) rotate(30deg); }
.x27-bild.klar .d1 { transform: translate(-120%, 60%) rotate(-30deg); } .x27-bild.klar .d2 { transform: translate(0, 160%) rotate(20deg); }
.x27-bild.klar .d3 { transform: translate(140%, -80%) rotate(40deg); } .x27-bild.klar .d4 { transform: translate(120%, 120%) rotate(-20deg); }
.x27-bild.klar .x27-ziel { opacity: 1; transform: none; z-index: 7; }
.x27-bild figcaption { position: absolute; left: 50%; bottom: -54px; translate: -50% 0; }

/* Routine und Entscheidung: zwei Listen, die Philosophie in grosser Schrift */
.r27 { padding: clamp(80px, 11vw, 170px) 0; background: #fff; }
.r27-zwei { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 4vw, 60px); align-items: center; }
.r27-kopf { margin: 0 0 18px; font: 600 16px/1 var(--text); color: var(--tinte-3); }
.r27-seite ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.r27-seite li { font: 700 clamp(30px, 3.4vw, 54px)/1.1 var(--display); letter-spacing: -.03em; color: var(--tinte-3); }
.r27-mensch { text-align: right; } .r27-mensch li { color: var(--tinte); }
.r27-mitte { display: grid; justify-items: center; gap: 12px; text-align: center; }
.r27-mitte svg { width: clamp(70px, 8vw, 120px); height: auto; }
.r27-mitte p { margin: 0; font: 600 16px/1.3 var(--text); color: var(--tinte-2); max-width: 12ch; }

/* Das Zeichen im dunklen Kern ist das Zeichen der Kopfleiste */
.d27-kern::after { content: none; }
.d27-kern svg { position: absolute; inset: 22%; width: 56%; height: 56%; }

@media (max-width: 900px) {
  .h27-bahn { grid-template-columns: 1fr; gap: 22px; }
  .sz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 18px 14px; padding-top: 0; }
  .sz-links { grid-column: 1; grid-row: 1; } .sz-mitte { grid-column: 2; grid-row: 1; align-self: end; }
  .sz-rechts { grid-column: 1 / -1; grid-row: 2; }
  .sz-weg { display: none; }
  .sz-bitte { left: 4%; right: -90%; bottom: -8%; font-size: 14.5px; }
  .sz-werk figcaption { bottom: -28px; }
  .sz .h27-beispiel { bottom: 8px; }
  .a27-buehne .vf-pane { height: auto; }
  .x27-bild { height: 560px; }
  .x27-blatt { width: 86%; left: 2%; } .x27-mail { left: 30%; width: 70%; top: 30%; } .x27-mail2 { left: 6%; top: 56%; width: 70%; }
  .x27-zettel { left: 52%; top: 74%; width: 150px; font-size: 14px; }
  .d1 { top: 88%; } .d2 { left: 40%; top: 92%; } .d3 { left: 50%; top: 2%; } .d4 { display: none; }
  .x27-ziel { width: 94%; }
  .r27-zwei { grid-template-columns: 1fr 1fr; } .r27-mitte { grid-column: 1 / -1; grid-row: 2; }
  .r27-seite li { font-size: 24px; }
}
.x27-bild { margin-bottom: 90px; }
.sz { grid-template-columns: minmax(0, 24fr) minmax(0, 6fr) minmax(0, 24fr) minmax(0, 6fr) minmax(0, 36fr); }
/* Die Breitenregel oben gilt nur am Schreibtisch; auf dem Telefon bleibt die Szene zweispaltig. */
@media (max-width: 900px) {
  .sz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sz-bitte { right: -80%; bottom: 6%; }
}
@media (max-width: 900px) { .sz-mitte { align-self: start; } }

/* ================= Runde 29 ================= */
/* Ergebnisse: fuenf Arten, fuenf Bildsprachen, auf einem Raster, das nicht nach Karten aussieht */
.e28 { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px); align-items: start; }
.e28-teil { margin: 0; position: relative; display: flex; flex-direction: column; gap: 14px; }
.e28-teil > figcaption { order: -1; font: 700 clamp(30px, 3.2vw, 52px)/1 var(--display); letter-spacing: -.035em; color: var(--tinte); }
.e28-app { grid-column: 1 / span 7; }
.e28-a   { grid-column: 8 / span 5; margin-top: clamp(40px, 6vw, 110px); }
.e28-an  { grid-column: 1 / span 5; }
.e28-t   { grid-column: 6 / span 4; margin-top: clamp(20px, 4vw, 70px); }
.e28-v   { grid-column: 10 / span 3; margin-top: clamp(60px, 8vw, 140px); }
.e28-app img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--linie-2); box-shadow: 0 40px 80px -50px rgba(16, 44, 29, .6); transform: rotate(-1deg); }
/* Automation: ein Strom, ein Tor, zwei Ausgaenge */
.e28-auto { display: grid; gap: 14px; }
.e28-strom { position: relative; height: 150px; overflow: hidden; border-radius: 18px; background: var(--papier); }
.e28-fall { position: absolute; top: 50%; left: -30%; translate: 0 -50%; display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--mono); color: var(--tinte-2);
  background: #fff; border: 1px solid var(--linie-2); border-radius: 9px; padding: 9px 12px; animation: e28-lauf 2.7s linear infinite; animation-delay: var(--d); }
.e28-fall i { width: 10px; height: 13px; border-radius: 2px; background: var(--stahl); opacity: .7; }
@keyframes e28-lauf { from { left: -30%; } to { left: 110%; } }
.e28-tor { justify-self: center; display: grid; justify-items: center; gap: 4px; padding: 14px 20px; border-radius: 16px; background: var(--nacht); color: #fff; margin-top: -40px; z-index: 1; }
.e28-tor b { font: 700 18px/1 var(--display); color: var(--lime); } .e28-tor span { font-size: 13px; color: rgba(255, 255, 255, .7); }
.e28-ausgang { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; }
.e28-ausgang p { margin: 0; display: grid; gap: 4px; padding: 16px; border-radius: 16px; }
.e28-ausgang b { font: 700 19px/1.1 var(--display); } .e28-ausgang span { font-size: 13.5px; line-height: 1.4; }
.e28-ok { background: var(--lime-hell); color: var(--lime-tief); } .e28-ok span { color: var(--tinte-2); }
.e28-mensch { background: #fff; border: 2px solid var(--stahl); color: var(--stahl); } .e28-mensch span { color: var(--tinte-2); }
/* Analyse: die Kurve des Produkts, mit Quelle */
.e28-analyse { background: #fff; border-radius: 18px; padding: 10px 10px 16px; border: 1px solid var(--linie-2); }
.e28-analyse .lima-knoten { position: relative !important; transform: none !important; width: 100% !important; opacity: 1 !important; }
.e28-quelle { margin: 6px 12px 0; font-size: 13px; color: var(--tinte-3); }
/* Technische Loesung: Plan, eine Zeile Code, Tests */
.e28-technik { background: #13201A; color: #DDE7E1; border-radius: 18px; padding: 18px; display: grid; gap: 14px; }
.e28-plan { width: 100%; height: auto; }
.e28-plan rect { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.4; } .e28-plan rect.an { stroke: var(--lime); stroke-width: 2.2; }
.e28-plan path { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.4; } .e28-plan path.gestr { stroke-dasharray: 4 4; stroke: rgba(255, 255, 255, .3); }
.e28-plan text { fill: #fff; font: 600 11px var(--mono); text-anchor: middle; } .e28-plan text.k { font-weight: 400; font-size: 9px; fill: rgba(255, 255, 255, .6); }
.e28-technik pre { margin: 0; font: 400 12.5px/1.5 var(--mono); color: #A6D65A; white-space: pre-wrap; } .e28-technik pre span { color: rgba(255, 255, 255, .5); }
.e28-technik ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.e28-technik li { display: flex; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 6px; } .e28-technik li b { color: var(--lime); font-weight: 600; }
/* Verstaendnis: ein Dokument mit Anmerkungen am Rand */
.e28-doku { position: relative; }
.e28-doku img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 30px 60px -40px rgba(16, 44, 29, .6); transform: rotate(1.5deg); }
.e28-notiz { position: absolute; display: flex; gap: 8px; align-items: flex-start; max-width: 190px; font: 500 13.5px/1.35 var(--text); color: var(--tinte); background: #FFF6BF; border-radius: 4px; padding: 10px 12px; box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .4); }
.e28-notiz b { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); color: var(--nacht); display: grid; place-items: center; font-size: 12px; }
.n1 { left: -26%; top: 10%; transform: rotate(-3deg); } .n2 { right: -14%; top: 42%; transform: rotate(2deg); } .n3 { left: -18%; bottom: -8%; transform: rotate(-1deg); }

/* Excel: acht verstreute Handgriffe werden zu drei Stufen */
.x28 { position: relative; margin: clamp(40px, 6vw, 80px) 0 70px; }
.x28-wann { margin: 0 0 16px; font: 600 15px/1 var(--text); color: var(--tinte-3); }
.x28-wann .x28-neu { display: none; color: var(--lime-tief); }
.x28-haufen { list-style: none; margin: 0; padding: 0; position: relative; height: clamp(360px, 32vw, 460px); transition: opacity .6s ease .2s; }
.x28-k { position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r)); display: inline-flex; align-items: center; gap: 10px; max-width: 30%;
  font: 600 clamp(14px, 1.3vw, 18px)/1.25 var(--text); color: var(--tinte); background: #fff; border: 1px solid var(--linie-2); border-radius: 14px; padding: 14px 18px;
  box-shadow: 0 24px 50px -36px rgba(16, 44, 29, .6); transition: transform 1s cubic-bezier(.6, 0, .3, 1), opacity .7s ease; }
.x28-k em { flex: none; font: 700 13px/1 var(--mono); color: #fff; background: var(--tinte-3); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; font-style: normal; }
.x28-xls { border-left: 5px solid #217346; } .x28-mail { border-left: 5px solid var(--stahl); } .x28-mensch { border-left: 5px solid #A4431E; background: #FFF7EE; }
.x28-bahn { position: absolute; left: 0; right: 0; top: 50px; display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 10px; opacity: 0; transform: translateY(20px); transition: opacity .8s ease .7s, transform .9s cubic-bezier(.2, .75, .2, 1) .7s; pointer-events: none; }
.x28-stufe { display: grid; gap: 8px; align-content: center; min-height: 190px; padding: 26px 28px; border-radius: 24px; }
.x28-stufe small { font: 600 13px/1 var(--text); text-transform: none; }
.x28-stufe b { font: 700 clamp(22px, 2.2vw, 34px)/1.1 var(--display); letter-spacing: -.02em; }
.x28-stufe span { font-size: 15px; }
.x28-auto { background: var(--lime-hell); color: var(--lime-tief); } .x28-auto b { color: var(--tinte); } .x28-auto span { color: var(--tinte-2); }
.x28-mensch.x28-stufe { background: var(--stahl); color: #fff; border: 0; } .x28-mensch.x28-stufe span { color: rgba(255, 255, 255, .8); }
.x28.klar .x28-haufen { opacity: 0; }
.x28.klar .x28-k { transform: translate(calc(50vw - 100%), 40px) rotate(0) scale(.6); opacity: 0; }
.x28.klar .x28-bahn { opacity: 1; transform: none; pointer-events: auto; }
.x28.klar .x28-heute { display: none; } .x28.klar .x28-neu { display: inline; }
.x28 figcaption { position: absolute; left: 50%; bottom: -56px; translate: -50% 0; }

/* Routine: die Trennung auf einen Blick */
.r27-zwei { grid-template-columns: 1fr 150px 1fr; gap: 0; align-items: stretch; }
.r27-seite { padding: clamp(28px, 4vw, 54px); border-radius: 28px; }
.r27-seite:first-child { background: var(--lime-hell); } .r27-seite:first-child li { color: var(--lime-tief); }
.r27-mensch { background: var(--stahl); } .r27-mensch li { color: #fff; } .r27-mensch .r27-kopf { color: rgba(255, 255, 255, .7); }
.r27-kopf { font: 700 clamp(18px, 1.6vw, 22px)/1 var(--display) !important; letter-spacing: -.01em; }
.r27-mitte { position: relative; align-self: center; }
.r27-mitte::before { content: ''; position: absolute; left: -20px; right: -20px; top: 50%; height: 4px; margin-top: -40px; background: var(--lime); z-index: -1; }

/* Die untere Haelfte ist straffer */
.x27, .r27, .d27 { padding: clamp(64px, 8vw, 120px) 0; }
.v27 { padding: clamp(56px, 7vw, 100px) 0; }

@media (max-width: 900px) {
  .e28 { grid-template-columns: 1fr; gap: 56px; }
  .e28-teil { grid-column: 1 !important; margin-top: 0 !important; }
  .e28-v { padding: 0 8%; }
  .n1 { left: -6%; } .n2 { right: -6%; } .n3 { left: 0; }
  .x28-haufen { height: 600px; }
  .x28-k { max-width: 64%; font-size: 14px; padding: 11px 13px; }
  .x28-k:nth-child(odd) { left: 0; } .x28-k:nth-child(even) { left: 32%; }
  .x28-k:nth-child(1) { top: 0; } .x28-k:nth-child(2) { top: 12%; } .x28-k:nth-child(3) { top: 24%; } .x28-k:nth-child(4) { top: 36%; }
  .x28-k:nth-child(5) { top: 48%; } .x28-k:nth-child(6) { top: 60%; } .x28-k:nth-child(7) { top: 72%; } .x28-k:nth-child(8) { top: 84%; }
  .x28-bahn { grid-template-columns: 1fr; top: 40px; }
  .x28-stufe { min-height: 0; padding: 20px 22px; }
  .r27-zwei { grid-template-columns: 1fr; gap: 0; }
  .r27-mitte { grid-row: 2; grid-column: 1; padding: 18px 0; } .r27-mitte::before { display: none; }
  .r27-mensch { text-align: left; }
}
/* Nachbesserung Runde 29 */
.w-liste table { table-layout: fixed; } .w-liste td { white-space: normal; overflow-wrap: anywhere; } .w-liste td:last-child { width: 40px; }
.sz-werk { overflow: hidden; }
.e28-app { grid-column: 1 / span 7; } .e28-a { grid-column: 8 / span 5; margin-top: clamp(30px, 4vw, 70px); }
.e28-an { grid-column: 1 / span 4; margin-top: 0; } .e28-t { grid-column: 5 / span 4; margin-top: clamp(20px, 3vw, 50px); } .e28-v { grid-column: 9 / span 4; margin-top: clamp(40px, 5vw, 90px); }
.n1 { left: -4%; top: 8%; } .n2 { right: -4%; top: 40%; } .n3 { left: 6%; bottom: -6%; }
.x28-haufen { transition: opacity .6s ease .2s, height .9s ease .4s; }
.x28.klar .x28-haufen { height: 250px; }
@media (max-width: 900px) { .x28.klar .x28-haufen { height: 520px; } }
.e28-teil { min-width: 0; } @media (max-width: 900px) { .e28 { grid-template-columns: minmax(0, 1fr); } }

/* ================= Runde 30 ================= */
/* ---- Kopf: Gespraech links, Figur in der Mitte, rechts veraendert sich die Arbeit ---- */
.h30 .h27-bahn { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; }
.h30 .h27-satz { font: 600 clamp(22px, 2.1vw, 32px)/1.25 var(--display); letter-spacing: -.02em; color: var(--tinte); max-width: 24ch; }
.hz { max-width: 1440px; margin: 0 auto; padding: 20px var(--rand) clamp(50px, 6vw, 90px); display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 16fr) minmax(0, 54fr);
  gap: clamp(12px, 2vw, 28px); align-items: center; position: relative; }
.hz-gespraech { display: grid; gap: 14px; align-content: center; min-height: 380px; }
.hz-leute { position: relative; display: flex; align-items: center; gap: 12px; height: 64px; }
.hz-fall { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .5s ease; }
.hz-fall.an { opacity: 1; }
.hz-wer { display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 10px 24px -14px rgba(0, 0, 0, .5); }
.hz-wer img { width: 100%; height: 100%; object-fit: cover; }
.hz-rolle { margin-left: 78px; font: 600 16px/1 var(--text); color: var(--tinte-2); }
.hz-du { position: absolute; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px dashed var(--linie); display: none; place-items: center; font: 700 20px/1 var(--display); color: var(--tinte-3); }
.hz.leer .hz-du { display: grid; } .hz.leer .hz-fall { opacity: 0; }
.hz-faden { display: flex; flex-direction: column; gap: 10px; min-height: 260px; justify-content: flex-start; }
.hz-blase { margin: 0; max-width: 100%; font: 500 17px/1.4 var(--text); padding: 12px 16px; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.hz-blase.da { opacity: 1; transform: none; }
.hz-du-b { align-self: flex-start; background: var(--lime-hell); border: 1px solid rgba(128, 181, 7, .45); border-radius: 18px 18px 18px 6px; color: var(--tinte); }
.hz-on-b { align-self: flex-end; background: #fff; border-radius: 18px 18px 6px 18px; color: var(--tinte); box-shadow: 0 16px 34px -24px rgba(16, 44, 29, .6); }
.hz-on-b::before { content: 'Onagero'; display: block; font: 600 12px/1 var(--text); color: var(--lime-tief); margin-bottom: 5px; }
.hz-figur .h27-figur { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 1; }
.hz-werk { position: relative; aspect-ratio: 16 / 11; }
.hz-arbeit { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.hz-arbeit.an { opacity: 1; }
.hz-vorher, .hz-nachher { position: absolute; inset: 0; }
.hz-titel { margin: 0 0 10px; font: 600 14px/1 var(--text); color: var(--tinte-3); transition: opacity .4s ease; }
.hz-haufen { position: relative; height: calc(100% - 30px); border-radius: 22px; background: rgba(255, 255, 255, .5); border: 1px dashed var(--linie); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 16px; padding: 20px; }
.hz-ding { transform: rotate(var(--r)) scale(.9); opacity: 0; display: inline-flex; align-items: center; gap: 9px; font: 600 clamp(14px, 1.2vw, 17px)/1.2 var(--text); color: var(--tinte); background: #fff; border-radius: 12px;
  padding: 13px 16px; box-shadow: 0 18px 36px -26px rgba(16, 44, 29, .6); border-left: 5px solid var(--tinte-3); transition: transform .6s cubic-bezier(.2, .75, .2, 1), opacity .4s ease; }
.hz-xls { border-left-color: #217346; } .hz-mail { border-left-color: var(--stahl); } .hz-warten { border-left-color: #A4431E; background: #FFF7EE; }
.hz-zettel { background: #FFE98A; border-left-color: #C9A400; } .hz-foto { border-left-color: #6b7a86; }
.hz-arbeit.sieht .hz-ding { opacity: 1; transform: rotate(var(--r)); }
.hz-arbeit.sieht .hz-ding:nth-child(2) { transition-delay: .15s; } .hz-arbeit.sieht .hz-ding:nth-child(3) { transition-delay: .3s; } .hz-arbeit.sieht .hz-ding:nth-child(4) { transition-delay: .45s; }
.hz-nachher { display: flex; flex-direction: column; justify-content: center; gap: 12px; opacity: 0; transform: scale(.94); transition: opacity .7s ease .3s, transform .9s cubic-bezier(.2, .75, .2, 1) .3s; }
.hz-nachher > img, .hz-nachher > .w-karte { width: 100%; border-radius: 16px; box-shadow: 0 0 0 3px var(--lime), 0 40px 80px -46px rgba(16, 44, 29, .6); background: #fff; }
.hz-nachher > img { height: auto; display: block; }
.hz-nachher figcaption { font: 700 18px/1 var(--display); color: var(--lime-tief); }
.hz-arbeit.fertig .hz-ding { opacity: 0; transform: translate(-40px, 0) scale(.5) rotate(0); transition-delay: 0s !important; }
.hz-arbeit.fertig .hz-titel, .hz-arbeit.fertig .hz-haufen { opacity: 0; transition: opacity .5s ease .2s; }
.hz-arbeit.fertig .hz-nachher { opacity: 1; transform: none; }
.hz .h27-antwort { position: absolute; inset: 0; left: 0; translate: none; bottom: auto; width: auto; display: flex; flex-direction: column; justify-content: center; }
.hz .h27-antwort[hidden] { display: none; }
.hz .h27-beispiel { right: var(--rand); bottom: 18px; }

/* ---- Excel und Entscheidung: acht Handgriffe, eine Frage, drei Ausnahmen ---- */
.x30-bild { position: relative; margin: clamp(40px, 5vw, 70px) 0 80px; }
.x30-schild { margin: 0 0 18px; font: 700 clamp(22px, 2.2vw, 34px)/1.15 var(--display); letter-spacing: -.02em; color: var(--tinte-3); min-height: 1.2em; }
.x30-schild span { display: none; } .x30-s0 { display: inline !important; }
.x30-bild.p1 .x30-s0, .x30-bild.p2 .x30-s0 { display: none !important; }
.x30-bild.p1:not(.p2) .x30-s1 { display: inline; color: var(--tinte); }
.x30-bild.p2 .x30-s2 { display: inline; color: var(--lime-tief); }
.x30-feld { list-style: none; margin: 0; padding: 0; position: relative; height: clamp(560px, 50vw, 700px); }
.t30 { position: absolute; width: 23%; left: var(--x); top: var(--y); transform: rotate(var(--r)) scale(var(--s, 1)); transform-origin: 50% 0;
  transition: left 1s cubic-bezier(.6, 0, .3, 1), top 1s cubic-bezier(.6, 0, .3, 1), transform 1s cubic-bezier(.6, 0, .3, 1), opacity .6s ease, filter .6s ease, width 1s ease; z-index: 1; }
.t30-fenster { position: relative; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--linie-2); box-shadow: 0 26px 50px -32px rgba(16, 44, 29, .55); min-height: 150px; padding-bottom: 12px; }
.t30-was { margin: 10px 0 0; display: flex; align-items: center; gap: 9px; font: 600 clamp(14px, 1.2vw, 17px)/1.2 var(--text); color: var(--tinte); }
.t30-was em { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--tinte); color: #fff; font: 700 12px/1 var(--mono); font-style: normal; display: grid; place-items: center; }
.t30-kopf { margin: 0; padding: 9px 12px; font: 600 12.5px/1.2 var(--mono); color: #fff; background: var(--tinte-2); }
.t30-erp-kopf { background: #34495E; } .t30-xls-kopf { background: #217346; } .t30-mail-kopf { background: var(--stahl); }
.t30-liste { display: grid; gap: 7px; padding: 12px; } .t30-liste i { height: 9px; border-radius: 3px; background: var(--linie-2); } .t30-liste i:nth-child(odd) { width: 80%; }
.t30-knopf { display: inline-block; margin: 0 12px; padding: 6px 10px; border-radius: 7px; background: #34495E; color: #fff; font: 600 12px/1 var(--text); }
.t30-formel { margin: 0; padding: 6px 12px; font: 400 11.5px/1.3 var(--mono); color: var(--tinte-2); border-bottom: 1px solid var(--linie-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t30-gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 8px 10px 0; } .t30-gitter i { height: 11px; background: var(--grund); } .t30-gitter i.an { background: #F7B48A; }
.t30-copy .t30-fenster { display: grid; align-content: center; justify-items: center; gap: 12px; }
.t30-tasten { font: 600 15px/1 var(--text); color: var(--tinte-3); } .t30-tasten kbd { font: 600 16px/1 var(--mono); color: var(--tinte); background: var(--grund); border: 1px solid var(--linie); border-bottom-width: 3px; border-radius: 7px; padding: 7px 10px; margin: 0 4px; }
.t30-an { margin: 8px 12px 0; font-size: 12.5px; color: var(--tinte-3); } .t30-text { margin: 6px 12px 8px; font-size: 13.5px; line-height: 1.4; color: var(--tinte); }
.t30-anhang { margin: 0 12px; display: inline-block; font: 500 11.5px/1 var(--mono); padding: 5px 8px; border-radius: 6px; background: var(--grund); color: var(--tinte-2); }
.t30-hand { margin: 8px 12px 0; font: 600 13px/1.3 var(--text); color: #A4431E; }
.t30-mensch .t30-fenster { box-shadow: 0 0 0 3px #F7B48A, 0 26px 50px -32px rgba(16, 44, 29, .55); }
.t30-jetzt { display: none; }
.t30-fall { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 14px; border-top: 1px solid var(--linie-2); font-size: 14px; }
.t30-fall b { font-size: 15px; } .t30-fall span { grid-column: 1; color: var(--tinte-2); font-size: 13.5px; }
.t30-fall i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 600 13px/1 var(--text); font-style: normal; color: #fff; background: var(--stahl); border-radius: 8px; padding: 8px 11px; transition: background .3s; }
.t30-fall.ok i { background: var(--gruen, #15803d); } .t30-fall.ok i::before { content: '✓ '; }
.t30-rest { margin: 0; padding: 10px 14px; font-size: 13px; color: var(--lime-tief); background: var(--lime-hell); }
/* Heute: durcheinander */
.t30:nth-child(1) { --x: 0%;  --y: 0%;  --r: -3deg; } .t30:nth-child(2) { --x: 25%; --y: 5%;  --r: 2deg; }
.t30:nth-child(3) { --x: 51%; --y: 0%;  --r: -2deg; } .t30:nth-child(4) { --x: 76%; --y: 6%;  --r: 3deg; }
.t30:nth-child(5) { --x: 2%;  --y: 50%; --r: 2deg; } .t30:nth-child(6) { --x: 27%; --y: 54%; --r: -2deg; }
.t30:nth-child(7) { --x: 52%; --y: 49%; --r: 3deg; } .t30:nth-child(8) { --x: 76%; --y: 53%; --r: -2deg; }
/* Die Frage: nur einer braucht einen Menschen */
.x30-bild.p1 .t30:not(.t30-mensch) { opacity: .35; filter: grayscale(1); }
.x30-bild.p1 .t30-mensch { z-index: 3; --s: 1.06; }
.x30-bild.p1 .t30-mensch .t30-fenster { box-shadow: 0 0 0 4px var(--lime), 0 30px 60px -30px rgba(16, 44, 29, .6); }
/* Mit Onagero: die Mechanik faellt in zwei Stapel, die Ausnahmen stehen in der Mitte */
.x30-bild.p2 .t30:not(.t30-mensch) { opacity: .9; filter: none; --s: .72; }
.x30-bild.p2 .t30:not(.t30-mensch) .t30-was { opacity: 0; }
.x30-bild.p2 .t30:nth-child(1) { --x: 0%;  --y: 10%; --r: -4deg; } .x30-bild.p2 .t30:nth-child(2) { --x: 2%;  --y: 14%; --r: -1deg; }
.x30-bild.p2 .t30:nth-child(3) { --x: 4%;  --y: 18%; --r: 2deg; }  .x30-bild.p2 .t30:nth-child(4) { --x: 6%;  --y: 22%; --r: 4deg; }
.x30-bild.p2 .t30:nth-child(6) { --x: 74%; --y: 12%; --r: 3deg; }  .x30-bild.p2 .t30:nth-child(8) { --x: 76%; --y: 18%; --r: -2deg; }
.x30-bild.p2 .t30:nth-child(7) { --x: 36%; --y: 2%; opacity: 0; }
.x30-bild.p2 .t30-mensch { --x: 33%; --y: 0%; --r: 0deg; --s: 1; width: 34%; z-index: 4; }
.x30-bild.p2 .t30-mensch .t30-heute { display: none; } .x30-bild.p2 .t30-mensch .t30-jetzt { display: block; }
.x30-bild.p2 .t30-mensch .t30-was em { background: var(--stahl); }
.x30-stapel { position: absolute; top: 62%; width: 26%; margin: 0; font-size: 15px; line-height: 1.4; color: var(--tinte-2); opacity: 0; transition: opacity .6s ease .8s; }
.x30-stapel b { display: block; font: 700 clamp(20px, 2vw, 28px)/1.1 var(--display); color: var(--lime-tief); margin-bottom: 4px; }
.x30-links { left: 0; } .x30-rechts { right: 0; text-align: right; }
.x30-gebucht { display: inline-block; margin-left: 6px; font: 600 13px/1 var(--text); color: #fff; background: #15803d; border-radius: 99px; padding: 5px 10px; opacity: 0; transition: opacity .4s ease; }
.x30-bild.p2 .x30-stapel { opacity: 1; }
.x30-bild.p3 .x30-gebucht { opacity: 1; }
.x30-bild figcaption { position: absolute; left: 50%; bottom: -60px; translate: -50% 0; }
.x30-pointe { margin-top: 20px; opacity: .25; transition: opacity .8s ease; } .x30.fertig .x30-pointe { opacity: 1; }

/* ---- Kontext: die Dinge der Firma, die Figur, eine Tatsache mit ihrem Stand ---- */
.d30-welt { position: relative; aspect-ratio: 1; width: 100%; max-width: 600px; }
.d30-ding { position: absolute; width: 30%; display: grid; gap: 6px; transition: transform .6s ease, opacity .6s ease; opacity: .7; }
.d30-ding span { font: 500 12.5px/1 var(--mono); color: rgba(255, 255, 255, .6); }
.d30-fenster { background: #fff; border-radius: 10px; overflow: hidden; min-height: 70px; padding-bottom: 8px; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .7); }
.d30-fenster svg { display: block; width: 100%; height: auto; } .d30-fenster svg * { fill: none; stroke: var(--tinte-2); stroke-width: 1.6; }
.d30-kopf { margin: 0; padding: 7px 10px; font: 600 11px/1.2 var(--mono); color: #fff; background: #34495E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d30-xls { background: #217346; }
.d30-text { display: grid; gap: 6px; padding: 10px; } .d30-text i { height: 7px; border-radius: 3px; background: var(--linie-2); } .d30-text i:nth-child(even) { width: 70%; }
.d30-ding.an { opacity: 1; transform: scale(1.08); } .d30-ding.an .d30-fenster { box-shadow: 0 0 0 3px var(--lime), 0 20px 40px -24px rgba(0, 0, 0, .7); }
.d30-erp { left: 0; top: 2%; } .d30-xls-d, .d30-ding.d30-xls { left: 35%; top: 0; } .d30-zeichnung { right: 0; top: 4%; }
.d30-tabelle { left: 0; top: 44%; } .d30-doku { right: 0; top: 42%; } .d30-anlage { left: 35%; top: 72%; }
.d30-figur { position: absolute !important; left: 35%; top: 30%; width: 30% !important; }
.d30-fakt { position: absolute; left: 6%; right: 6%; bottom: -4%; z-index: 5; background: #fff; color: var(--tinte); border-radius: 18px; padding: 16px 20px; display: grid; gap: 4px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.d30-fakt.an { opacity: 1; transform: none; }
.d30-fakt small { font-size: 13px; color: var(--tinte-3); } .d30-fakt b { font: 700 30px/1.05 var(--display); letter-spacing: -.02em; }
.d30-fakt p { margin: 4px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.d30-fakt em { font: 600 13px/1 var(--text); font-style: normal; padding: 5px 10px; border-radius: 99px; background: #E7F5EC; color: #15803d; }
.d30-fakt em::before { content: '✓ '; }
.d30-woher em { background: var(--stahl-hell); color: var(--stahl); } .d30-woher em::before { content: '≈ '; }
.d30-unsicher em { background: #FDEEE6; color: #A4431E; } .d30-unsicher em::before { content: '? '; }
.d30-fakt span { font: 500 13px/1.3 var(--mono); color: var(--tinte-2); }
.d30 dl > div { transition: opacity .4s ease; } .d30 dl.eins > div:not(.an) { opacity: .35; }
.d30-beispiel { margin: 16px 0 0; font: 500 12px/1 var(--mono); color: rgba(255, 255, 255, .45); }

/* ---- Kleinigkeiten: Ergebnisse und Vertrauen besser lesbar ---- */
.e28-ausgang span, .e28-technik li, .e28-quelle { font-size: 15px; } .e28-notiz { font-size: 14.5px; max-width: 210px; } .e28-tor span { font-size: 14px; }
.v27 li b { font-size: 22px; } .v27 li span { font-size: 17px; } .v27 li svg { width: 40px; height: 40px; }

@media (max-width: 900px) {
  .h30 .h27-bahn { grid-template-columns: 1fr; }
  .hz { grid-template-columns: minmax(0, 1fr) 110px; grid-template-rows: auto auto; gap: 14px; }
  .hz-gespraech { grid-column: 1; grid-row: 1; min-height: 300px; }
  .hz-figur { grid-column: 2; grid-row: 1; align-self: start; }
  .hz-werk { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 4 / 3.4; }
  .hz-faden { min-height: 230px; } .hz-blase { font-size: 15px; padding: 10px 13px; }
  .hz-haufen { gap: 10px; padding: 14px; } .hz-ding { font-size: 13.5px; padding: 10px 12px; }
  .x30-feld { height: 1180px; }
  .t30 { width: 47%; }
  .t30:nth-child(odd) { --x: 0%; } .t30:nth-child(even) { --x: 52%; }
  .t30:nth-child(1), .t30:nth-child(2) { --y: 0%; } .t30:nth-child(3), .t30:nth-child(4) { --y: 25%; }
  .t30:nth-child(5), .t30:nth-child(6) { --y: 50%; } .t30:nth-child(7), .t30:nth-child(8) { --y: 75%; }
  .x30-bild.p2 .t30:nth-child(1) { --x: 0%; --y: 0%; } .x30-bild.p2 .t30:nth-child(2) { --x: 4%; --y: 1.5%; } .x30-bild.p2 .t30:nth-child(3) { --x: 8%; --y: 3%; } .x30-bild.p2 .t30:nth-child(4) { --x: 12%; --y: 4.5%; }
  .x30-bild.p2 .t30:nth-child(6) { --x: 44%; --y: 64%; } .x30-bild.p2 .t30:nth-child(8) { --x: 48%; --y: 65.5%; } .x30-bild.p2 .t30:nth-child(7) { --x: 20%; --y: 30%; }
  .x30-bild.p2 .t30-mensch { --x: 0%; --y: 22%; width: 100%; }
  .x30-stapel { width: 48%; font-size: 14px; } .x30-links { top: 14%; left: 52%; } .x30-rechts { top: 66%; right: auto; left: 0; text-align: left; }
  .x30-bild.p2 .x30-feld, .x30-bild.p3 .x30-feld { height: 900px; }
  .d30-welt { max-width: 420px; margin: 0 auto 60px; }
  .d30-ding span { font-size: 11px; } .d30-fakt b { font-size: 24px; } .d30-fakt { bottom: -14%; }
}
.t30-gitter i { background: #EEF1EF; } .t30-tasten kbd { background: #F2F4F3; }
.t30-neu { display: none; } .x30-bild.p2 .t30-mensch .t30-alt { display: none; } .x30-bild.p2 .t30-mensch .t30-neu { display: inline; color: var(--stahl); }
@media (max-width: 900px) { .hz { grid-template-columns: minmax(0, 1fr) 140px; } }