/* ───────────────────────────────────────────────────────────── ASCO247 (bis 29.10.2026 ATLAS), Gestaltung „Das leise Instrument“ (seit 14.10.2026) Eine Schrift (Archivo, lokal), Papier und zwei Tinten, Petrol als einziger Akzent. Abschnitte trennt nur der Raum, keine Linien, keine Schatten, keine Verläufe. Jede Kante sitzt auf einer von drei Linien: Rand, Textspalte, rechte Bühne. Die Seite läuft offline. ───────────────────────────────────────────────────────────── */ /* ── Schriften (SIL Open Font License, siehe schriften/OFL-*.txt) ── Überschriften: New York auf Apple-Geräten, sonst Newsreader (lokal). Text: Archivo (lokal). ── */ @font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap; src:url(schriften/newsreader-latin-500-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Newsreader";font-style:italic;font-weight:500;font-display:swap; src:url(schriften/newsreader-latin-500-italic.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC} @font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap; src:url(schriften/newsreader-latin-ext-500-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+A720-A7FF} @font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap; src:url(schriften/archivo-latin-400-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap; src:url(schriften/archivo-latin-600-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Archivo";font-style:italic;font-weight:400;font-display:swap; src:url(schriften/archivo-latin-400-italic.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC} @font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap; src:url(schriften/archivo-latin-ext-400-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+A720-A7FF} @font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap; src:url(schriften/archivo-latin-ext-600-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+A720-A7FF} :root{ /* Papier, zwei Tinten, ein Akzent */ /* Farben „Industrial Power“ (seit 29.10.2026): Hellgrau, Anthrazit, Industrieorange */ --bg:#ECEEF0; /* Hellgrau */ --surface:#F7F8F9; --surface-2:#DEE1E5; --ink:#16191E; --muted:#575E68; --line:#D0D4DA; /* Leiterbahnen, Tabellen, Oberflächen-Ausschnitte */ --accent:#A84D00; /* Orange als Schrift und Strich auf Hell (4,8:1) */ --accent-strong:#8C4000; --accent-gross:#BF5C00; /* kursiver Akzent in großen Titeln (3,7:1, nur ab 24 px) */ --signal:#FF9F1C; /* Industrieorange: Flächen, Knöpfe */ --signal-stark:#F08C00; --on-accent:#20242B; /* Schrift auf Orange: Anthrazit (7,5:1) */ --mark:#FFE6C2; /* Markierung der Fundstelle */ /* dunkle Felder (Bühne, Schaufenster) */ --night:#111317; --night-2:#181B20; --night-3:#22262D; --rahmen:#20242B; /* Anthrazit: Rahmen und dunkle Felder */ --rahmen-2:#2A2F38; --rahmen-tinte:#ECEEF0; --rahmen-leise:#A3AAB4; --rahmen-akzent:#FF9F1C; --night-ink:#EDEEF0; --night-muted:#B1B7BF; --night-accent:#FF9F1C; --night-line:#2E333B; --amber:#8A5A12; --amber-weich:#F4EBD8; --font:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --titel:ui-serif,"New York","Newsreader","Iowan Old Style",Georgia,serif; /* fünf Größen, mehr nicht */ --step-small:clamp(.9375rem,.9rem + .15vw,1rem); /* 15–16 */ --step-body:clamp(1.125rem,1.05rem + .3vw,1.3125rem); /* 18–21 */ --step-lead:clamp(1.375rem,1.15rem + 1vw,2rem); /* 22–32 */ --step-head:clamp(2.25rem,1.4rem + 3.8vw,4.75rem); /* 36–76 */ --step-display:clamp(2.75rem,1rem + 4.6vw,5.25rem); /* 44–84 */ /* Raum */ --rand:clamp(1.25rem,2.2vw,2rem); --spalt:clamp(.75rem,1.4vw,1.5rem); --abschnitt:clamp(5.5rem,3rem + 7vw,10.5rem); --kopf-h:72px; /* Bewegung */ --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.76,0,.24,1); --ease-soft:cubic-bezier(.33,1,.68,1); --t-press:140ms; --t-hover:180ms; --t-ui:240ms; --t-reveal:800ms; } @media (prefers-color-scheme:dark){ :root{ --bg:#121418; --surface:#1A1D22; --surface-2:#22262D; --ink:#ECEEF0; --muted:#A3AAB4; --line:#2D323A; --accent:#FF9F1C; --accent-strong:#FFB54D; --accent-gross:#FF9F1C; --signal:#FF9F1C; --signal-stark:#FFB54D; --on-accent:#20242B; --mark:#3A2A14; --night:#08090B; --night-2:#0F1114; --night-3:#181B20; --amber:#E2B061; --amber-weich:#2A2112; --rahmen:#0B0D10; } } @media (prefers-contrast:more){ :root{--muted:#30343A;--line:#8E939B} } @media (prefers-contrast:more) and (prefers-color-scheme:dark){ :root{--muted:#D3D7DB;--line:#5A646E} } /* ── Grundlagen ───────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:2rem} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font);font-size:var(--step-body);line-height:1.5;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; font-kerning:normal;font-variant-ligatures:common-ligatures; } img,svg,video,canvas{display:block;max-width:100%} img{height:auto} h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0} h1,h2,h3,h4{font-weight:400;text-wrap:balance} h1,h2,.display,.titel,.abschnitt__titel,.verzeichnis__name,.kontaktwege a > span:first-child,.einstieg__claim, .aussage h3,.schritt h3,.referenz__text h2,.zeile-text h2,.kontakt-zeile__satz,.schaufenster__text h3{font-family:var(--font);font-weight:500;letter-spacing:-.035em} .betont{font-family:var(--titel);font-style:italic;font-weight:500;color:var(--accent-gross);letter-spacing:-.01em} p,li,dd{text-wrap:pretty} ul,ol{margin:0;padding:0;list-style:none} a{color:inherit} b,strong{font-weight:600} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} ::selection{background:var(--signal);color:var(--on-accent)} .nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .sprungmarke{position:absolute;left:-999px;top:0;z-index:60;background:var(--signal);color:var(--on-accent);padding:.75rem 1rem;text-decoration:none} .sprungmarke:focus{left:0} /* ── Raster: ein Rand, zwölf Spalten, drei Ankerlinien ────── */ .rand{width:100%;max-width:1760px;margin-inline:auto;padding-inline:var(--rand)} .raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt)} .raster > *{grid-column:1 / -1;min-width:0} /* Ankerlinie B: die Textspalte; Ankerlinie C: die rechte Bühne */ @media (min-width:1100px){ .an-b{grid-column:3 / span 5} .an-b-breit{grid-column:3 / span 8} .an-c{grid-column:8 / span 5} .an-b-c{grid-column:3 / -1} } @media (min-width:760px) and (max-width:1099px){ .an-b,.an-b-breit,.an-b-c{grid-column:2 / span 10} .an-c{grid-column:2 / span 10} } /* ── Schriftgrößen ────────────────────────────────────────── */ .display{font-size:var(--step-display);line-height:1.04;letter-spacing:-.022em} .titel{font-size:var(--step-head);line-height:1.04;letter-spacing:-.02em} .lead{font-size:var(--step-lead);line-height:1.4;letter-spacing:-.005em} .klein{font-size:var(--step-small);line-height:1.45} .leise{color:var(--muted)} .zahl{font-variant-numeric:tabular-nums} .text{display:grid;gap:1em;max-width:62ch} .text p{color:var(--muted)} .text p:first-child,.text .voll{color:var(--ink)} /* ── Knöpfe und Verweise ──────────────────────────────────── */ .knopf{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; min-height:48px;padding:0 1.5rem;border:0;border-radius:999px; background:var(--signal);color:var(--on-accent); font:600 var(--step-body)/1 var(--font);text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer; transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease; } .knopf:active{transform:scale(.97)} .knopf--nacht{background:var(--night-accent);color:var(--night)} .knopf--zwei{background:#FFFFFF;color:#14161A} .knopf--klein{min-height:44px;padding:0 1.1rem;font-size:var(--step-small)} @media (hover:hover) and (pointer:fine){ .knopf:hover{background:var(--signal-stark)} .knopf--zwei:hover{background:var(--surface)} .knopf--nacht:hover{background:#FF9F1C} } .verweis{ color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:.22em; text-decoration-thickness:.07em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent); transition:text-decoration-color var(--t-hover) ease; display:inline-flex;align-items:center;min-height:44px; } @media (hover:hover) and (pointer:fine){.verweis:hover{text-decoration-color:currentColor}} .handlung{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.75rem} /* ── Kopf: Wortmarke, fünf Wörter, eine Handlung ──────────── */ .kopf{position:relative;z-index:30} .kopf__innen{display:flex;align-items:center;gap:2rem;min-height:var(--kopf-h)} .wortmarke{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:600;letter-spacing:.06em;min-height:44px} /* Logo „Typenschild“: ASCO in der Schriftfarbe, 247 auf dem orangen Schild (beide Modi gleich) */ .wortmarke .logo{display:block;width:auto;height:26px;flex:none;overflow:visible} .logo__schild{fill:var(--signal)} .logo__ziffern{fill:var(--on-accent)} .fuss .wortmarke .logo{height:32px} .nav{display:flex;gap:1.6rem;margin-left:auto} .nav a{text-decoration:none;font-size:var(--step-small);min-height:44px;display:inline-flex;align-items:center; text-decoration-thickness:.07em;text-underline-offset:.3em} .nav__kontakt{display:none!important} .nav a[aria-current="page"]{text-decoration:underline} @media (hover:hover) and (pointer:fine){.nav a:hover{text-decoration:underline}} .menue-taste{display:none;margin-left:auto;background:none;border:0;min-height:44px;padding:0 .25rem;font-weight:600;font-size:var(--step-small);cursor:pointer} @media (max-width:900px){ .nav{display:none} .menue-taste{display:inline-flex;align-items:center;margin-left:0} .kopf__aktion{margin-left:auto} .kopf.ist-offen .nav__kontakt{display:inline-flex!important} .kopf.ist-offen .nav{ display:flex;flex-direction:column;gap:0;position:fixed;inset:0;z-index:40; padding:calc(var(--kopf-h) + 1rem) var(--rand) 2rem;background:var(--bg);color:var(--ink); } .kopf.ist-offen .nav a{font-size:var(--step-lead);min-height:56px} .kopf.ist-offen .menue-taste{position:fixed;right:var(--rand);top:14px;z-index:41;color:var(--ink)} .kopf.ist-offen .wortmarke{position:fixed;left:var(--rand);top:14px;z-index:41;color:var(--ink)} } /* ── Abschnitte: getrennt nur durch Raum ──────────────────── */ .abschnitt{padding-block:var(--abschnitt) 0} .abschnitt--nacht{background:var(--night);color:var(--night-ink);padding-block:var(--abschnitt)} .abschnitt--nacht + .abschnitt{padding-top:var(--abschnitt)} .abschnitt__titel{font-size:var(--step-head);line-height:1.04;letter-spacing:-.02em;margin-bottom:clamp(2rem,1.5rem + 2vw,3.5rem);max-width:16ch} /* ── Bühne der Startseite: zwei Töne, Text unten links ────── */ .buehne{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:var(--spalt);min-height:max(640px,calc(100svh - var(--kopf-h)));background:var(--bg);color:var(--ink);max-width:1760px;margin-inline:auto;padding-inline:var(--rand)} .buehne__text{ display:flex;flex-direction:column;justify-content:center;gap:1.5rem; padding:clamp(2rem,1rem + 4vh,5rem) 0; } .buehne__text h1{max-width:none} .buehne__titel{font-size:clamp(2.5rem,1rem + 3.4vw,4.25rem);line-height:1.02} @media (max-width:900px){.buehne__titel .zeile{display:inline}.buehne__titel [data-zeile]{display:inline}.buehne__titel{text-wrap:balance}} .buehne__text p{color:var(--muted);max-width:40ch} .buehne__text .buehne__lead{color:var(--ink);max-width:34ch;margin-top:-.25rem} @media (max-width:560px){.buehne__lead br{display:none}} .buehne__geraet{display:grid;place-items:center;padding-block:clamp(1rem,.5rem + 3vh,3rem)} @media (max-width:900px){ .buehne{grid-template-columns:1fr;min-height:0} .buehne__text{padding-bottom:1rem} .buehne__geraet{padding-top:0} } /* Kopfzeile, die von unten aus ihrer Grundlinie steigt */ .zeilen .zeile{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em} .zeilen [data-zeile]{display:block} @media (prefers-reduced-motion:no-preference){ .js .zeilen [data-zeile]{transform:translateY(105%);animation:zeile-hoch 900ms var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 110ms + 150ms)} .js [data-steigt]{opacity:0;transform:translateY(16px);animation:steigt 700ms var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 90ms + 420ms)} } @keyframes zeile-hoch{to{transform:none}} @keyframes steigt{to{opacity:1;transform:none}} /* ── Abschnitte erscheinen in Leserichtung, einmal ────────── */ @media (prefers-reduced-motion:no-preference){ .js [data-zeigen]{opacity:0;transform:translateY(22px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)} .js [data-zeigen].ist-da{opacity:1;transform:none} .js .blende{clip-path:inset(0 0 100% 0);transition:clip-path 1100ms var(--ease-in-out)} .js .blende img{transform:scale(1.1);transition:transform 1500ms var(--ease-soft)} .js .blende.ist-da{clip-path:inset(0)} .js .blende.ist-da img{transform:none} } /* ── Einstieg: schmale Spalte, viel Grund ─────────────────── */ .einstieg{display:grid;gap:1.1em} @media (min-width:1100px){.einstieg{grid-column:3 / span 7;max-width:780px}} .einstieg p{color:var(--muted)} .einstieg p:first-child{color:var(--ink);font-weight:600} .einstieg p{font-size:var(--step-lead);line-height:1.35;letter-spacing:-.01em} .einstieg p:first-child{font-weight:400} .einstieg__claim{font-size:var(--step-display);line-height:1.02;letter-spacing:-.025em;margin-top:clamp(4rem,3rem + 5vw,8rem)} /* Wörter werden beim Scrollen voll (beide Tönungen bleiben lesbar) */ .js [data-woerter] .wort{color:var(--muted);transition:color 280ms ease} .js [data-woerter] .wort.ist-voll{color:var(--ink)} /* ── Schaufenster: dunkle Reihe, nur die Mitte leuchtet ───── */ .schaufenster{background:var(--surface);color:var(--ink);padding-block:clamp(4rem,3rem + 4vw,7rem);overflow:clip;margin-top:var(--abschnitt)} .schaufenster__kopf{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2rem,1.5rem + 2vw,3rem)} .schaufenster__kopf h2{font-size:var(--step-head);line-height:1.04;letter-spacing:-.02em;max-width:14ch} .schaufenster__tasten{display:flex;gap:.5rem} .schaufenster__tasten button{ width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer; background:var(--surface-2);color:var(--ink);transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out); } .schaufenster__tasten button:active{transform:scale(.94)} .schaufenster__tasten button[disabled]{opacity:.35;cursor:default} .schaufenster__tasten svg{width:20px;height:20px} @media (hover:hover) and (pointer:fine){.schaufenster__tasten button:not([disabled]):hover{background:var(--line)}} .reihe{ display:flex;gap:clamp(1.5rem,4vw,4rem);overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scrollbar-width:none; padding-inline:calc(50vw - min(210px,43vw));padding-block:.5rem 1rem;cursor:grab; } .reihe::-webkit-scrollbar{display:none} .reihe.ist-gezogen{cursor:grabbing;scroll-snap-type:none} .reihe > li{flex:none;scroll-snap-align:center;width:min(420px,86vw);transition:opacity 420ms var(--ease-out),transform 520ms var(--ease-out)} .reihe > li:not(.ist-aktiv){opacity:.38;transform:scale(.94)} .schaufenster__text{margin-top:clamp(1.75rem,1rem + 2vw,2.5rem);min-height:7.5em} @media (min-width:1100px){.schaufenster__text{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt)}} .schaufenster__text > div{grid-column:3 / span 5;max-width:46ch} .schaufenster__text h3{font-size:clamp(1.625rem,1.2rem + 1.6vw,2.25rem);line-height:1.15;margin-bottom:.4rem} .schaufenster__text p{color:var(--muted)} .schaufenster__text .marke-klein{color:var(--accent);font-weight:600;font-size:var(--step-small);margin-top:.5rem} /* ── Gesteuerte Bühne: Aussagen links, Ausschnitt fixiert ─── */ .gesteuert{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt)} .gesteuert__aussagen{grid-column:3 / span 4} .gesteuert__buehne{grid-column:8 / span 5;position:relative} .gesteuert__halter{background:var(--surface-2)!important;position:sticky;top:max(4.5rem,calc(50vh - 300px));height:min(82vh,600px);display:grid;place-items:center;background:var(--surface);padding:clamp(1rem,2vw,2rem)} .zustand .ui{max-width:460px} .gesteuert__titel{font-size:var(--step-head);line-height:1.04;letter-spacing:-.02em;margin-bottom:clamp(1rem,1vw,2rem)} .aussage{min-height:88vh;display:flex;flex-direction:column;justify-content:center;gap:.75rem;padding-block:2rem} .aussage:first-of-type{min-height:60vh;justify-content:flex-start;padding-top:12vh} .aussage h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);line-height:1.15;letter-spacing:-.012em;color:var(--muted);transition:color 360ms ease} .aussage p{color:var(--muted);max-width:40ch} .aussage.ist-aktiv h3{color:var(--ink)} .zustand{position:absolute;inset:clamp(1rem,2vw,2rem);display:grid;place-items:center;opacity:0;transform:translateY(12px);transition:opacity 420ms var(--ease-out),transform 520ms var(--ease-out);pointer-events:none} .zustand.ist-aktiv{opacity:1;transform:none;pointer-events:auto} @media (max-width:1099px){ .gesteuert{display:flex;flex-direction:column;gap:1.25rem} .gesteuert__aussagen,.gesteuert__buehne,.gesteuert__halter{display:contents} .aussage,.aussage:first-of-type{min-height:0;padding:2.5rem 0 0} .aussage h3{font-size:clamp(1.625rem,1.2rem + 1.6vw,2.25rem);color:var(--ink)} .zustand{position:static;opacity:1;transform:none;pointer-events:auto;background:var(--surface);padding:1rem;margin-inline:calc(-1 * var(--rand))} .aussage:nth-child(1){order:1}.zustand:nth-child(1){order:2} .aussage:nth-child(2){order:3}.zustand:nth-child(2){order:4} .aussage:nth-child(3){order:5}.zustand:nth-child(3){order:6} } @media (prefers-reduced-motion:reduce){.zustand{transition:opacity 200ms ease;transform:none}} /* ── Tafel: ein Bedienfeld mit Randnotizen ────────────────── */ .tafel{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);align-items:start} .tafel__feld .ui__schalter{padding:2.1rem 0} .tafel__titel{grid-column:1 / span 4;text-align:right;font-size:clamp(1.75rem,1rem + 1.6vw,2.5rem);line-height:1.1;letter-spacing:-.015em;margin-bottom:2rem;hyphens:manual} .tafel__links,.tafel__rechts{display:grid;gap:clamp(2rem,4vw,4.5rem);padding-top:3rem} .tafel__links{grid-column:1 / span 4;text-align:right;justify-items:end} .tafel__feld{grid-column:5 / span 4;grid-row:1 / span 2} .tafel__rechts{grid-column:9 / span 4} .tafel__titel + .tafel__links{grid-row:2} @media (min-width:1100px){ .tafel.ist-ausgerichtet .tafel__links,.tafel.ist-ausgerichtet .tafel__rechts{position:relative;display:block;padding-top:0} .tafel.ist-ausgerichtet .notiz{position:absolute;left:0;right:0} .tafel.ist-ausgerichtet .tafel__links .notiz{left:auto;right:0} .tafel.ist-ausgerichtet .tafel__links{grid-row:1 / span 2} .tafel.ist-ausgerichtet .tafel__titel{position:absolute;margin:0;width:calc((100% - 11 * var(--spalt)) / 3 + 3 * var(--spalt))} } .notiz{max-width:32ch;border:0;background:none;padding:0;text-align:inherit;cursor:default} .notiz h3{font-size:var(--step-body);font-weight:600;margin-bottom:.3rem} .notiz p{color:var(--muted)} @media (max-width:1099px){ .tafel{display:flex;flex-direction:column} .tafel__feld{order:1}.tafel__rechts{order:2}.tafel__links{order:3} .tafel__titel{text-align:left;margin-bottom:1.5rem} .tafel__feld{margin-bottom:2rem;max-width:420px} .tafel__links,.tafel__rechts{text-align:left;justify-items:start;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0;gap:1.75rem var(--spalt)} .tafel__rechts{margin-top:0} .tafel__links{margin-top:1.75rem} } @media (max-width:560px){.tafel__links,.tafel__rechts{grid-template-columns:1fr}} /* ── Verzeichnis: große Zeilen, Bild erscheint daneben ────── */ .verzeichnis{position:relative;display:grid} .verzeichnis a{display:grid;gap:.35rem;width:60%;padding-block:clamp(.9rem,.6rem + 1vw,1.5rem);text-decoration:none} .verzeichnis__name{font-size:clamp(1.75rem,1.2rem + 2.2vw,3.25rem);line-height:1.08;letter-spacing:-.02em;transition:color var(--t-hover) ease} .verzeichnis__satz{color:var(--muted)} .verzeichnis img,.verzeichnis .illu{position:absolute;right:0;top:0;width:36%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--t-ui) ease;pointer-events:none} .verzeichnis li:first-child img,.verzeichnis li:first-child .illu{opacity:1} .verzeichnis:has(a:hover,a:focus-visible) li img,.verzeichnis:has(a:hover,a:focus-visible) li .illu{opacity:0} .verzeichnis li:has(a:hover,a:focus-visible) img,.verzeichnis li:has(a:hover,a:focus-visible) .illu{opacity:1} @media (hover:hover) and (pointer:fine){.verzeichnis:hover a:not(:hover) .verzeichnis__name{color:var(--muted)}} @media (max-width:900px){ .verzeichnis{gap:2.5rem} .verzeichnis a{width:auto;padding:0} .verzeichnis img,.verzeichnis .illu{position:static;width:100%;height:auto;aspect-ratio:3/2;opacity:1;order:-1;margin-bottom:.5rem} } /* ── Namen in Spalten ─────────────────────────────────────── */ .namen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt)} .namen__titel{grid-column:1 / span 2;font-size:var(--step-lead);line-height:1.25} .namen__spalten{grid-column:3 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem var(--spalt);align-items:start} .namen__spalten li{font-size:var(--step-lead);line-height:1.5} .namen__spalten li:first-child{color:var(--muted)} @media (max-width:1099px){ .namen{display:block} .namen__titel{margin-bottom:1.5rem} .namen__spalten{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem} .namen__spalten li{font-size:var(--step-body)} } /* ── Brief ────────────────────────────────────────────────── */ .brief{max-width:720px;margin-inline:auto;display:grid;gap:1.1em;padding-block:clamp(1rem,.5rem + 3vw,3rem)} .brief__bild{width:56px;height:56px;border-radius:50%;object-fit:cover} .brief p{color:var(--ink);font-size:var(--step-lead);line-height:1.4;letter-spacing:-.01em} .brief .brief__rolle{font-size:var(--step-small);letter-spacing:0} .brief mark{background:var(--mark);color:inherit;padding:0 .12em} .brief p.brief__name{font-style:italic;margin-top:.5em} .brief__rolle{color:var(--muted);font-size:var(--step-small)} /* ── Kontaktzeile ─────────────────────────────────────────── */ .kontakt-zeile{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);align-items:start} .kontakt-zeile__satz{grid-column:1 / span 6;font-size:clamp(1.75rem,1rem + 2vw,2.25rem);line-height:1.15;letter-spacing:-.015em} .kontakt-zeile__bild{grid-column:8 / span 2;aspect-ratio:1;object-fit:cover;width:100%;max-width:220px} .kontakt-zeile__wege{grid-column:10 / span 3;display:grid;gap:.25rem;align-content:start} .kontakt-zeile__wege p:first-child{font-weight:600;margin-bottom:.5rem} @media (max-width:900px){ .kontakt-zeile{grid-template-columns:96px 1fr;gap:1.5rem 1rem} .kontakt-zeile__satz{grid-column:1 / -1} .kontakt-zeile__bild{grid-column:1;max-width:96px} .kontakt-zeile__wege{grid-column:2} } /* ── Fuß: eine leise Zeile ────────────────────────────────── */ .fuss{margin-top:clamp(6rem,4rem + 6vw,10rem)} .fuss__zeile{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem 2rem;align-items:baseline;padding-block:1.5rem 2rem;font-size:var(--step-small)} .fuss__zeile > :first-child{color:var(--muted)} .fuss__mitte{display:flex;flex-wrap:wrap;gap:0 1.5rem;justify-content:center} .fuss__rechts{display:flex;flex-wrap:wrap;gap:0 1.5rem;justify-content:flex-end;color:var(--muted)} .fuss a{text-decoration:none;color:var(--ink);min-height:44px;display:inline-flex;align-items:center} @media (hover:hover) and (pointer:fine){.fuss a:hover{text-decoration:underline;text-underline-offset:.25em}} @media (max-width:760px){ .fuss{margin-top:20svh} .fuss__zeile{grid-template-columns:1fr;gap:.25rem} .fuss__mitte,.fuss__rechts{justify-content:flex-start} } /* ── Unterseiten ──────────────────────────────────────────── */ .seitenkopf{padding-top:clamp(5rem,3rem + 8vh,10rem)} .seitenkopf h1{font-size:clamp(2.125rem,.9rem + 5vw,5.25rem);line-height:1.02;letter-spacing:-.035em} .seitenkopf h1 .zeile{display:block} .seitenkopf .lead{margin-top:clamp(1.25rem,1rem + 1vw,2rem);max-width:36ch;color:var(--muted)} .seitenkopf .handlung{margin-top:2rem} /* Zeilen für längeren Text: Titel auf B, Text auf C */ .zeile-text{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:1rem;align-items:start} .zeile-text + .zeile-text{margin-top:clamp(4.5rem,3rem + 5vw,8rem)} .zeile-text__kopf p{font-size:var(--step-lead);line-height:1.3;letter-spacing:-.01em} .zeile-text > h2,.zeile-text > .zeile-text__kopf{grid-column:3 / span 4} .zeile-text > h2,.zeile-text__kopf h2{font-size:clamp(1.875rem,1.2rem + 2.4vw,3.25rem);line-height:1.08;letter-spacing:-.018em} .zeile-text__kopf{display:grid;gap:1rem;align-content:start} .zeile-text__kopf p{color:var(--muted)} .zeile-text > .zeile-text__rumpf{grid-column:8 / span 5;display:grid;gap:1.1em} .zeile-text__rumpf > p{color:var(--muted)} .zeile-text__rumpf > p:first-child{color:var(--ink)} @media (max-width:1099px){ .zeile-text > h2,.zeile-text > .zeile-text__kopf,.zeile-text > .zeile-text__rumpf{grid-column:1 / -1} } @media (min-width:760px) and (max-width:1099px){ .zeile-text > h2,.zeile-text > .zeile-text__kopf,.zeile-text > .zeile-text__rumpf{grid-column:2 / span 10} } /* Listen ohne Zeichen: Lücke statt Linie, fettes Stichwort */ .liste{display:grid;gap:1.1rem} .liste li{color:var(--muted)} .liste b{color:var(--ink)} .liste--gross{gap:.6rem} .liste--gross li{font-size:var(--step-lead);line-height:1.3;letter-spacing:-.01em;color:var(--ink)} .stichworte{display:flex;flex-wrap:wrap;gap:.5rem} .stichworte li{background:var(--surface);padding:.4rem .7rem;font-size:var(--step-small);color:var(--ink)} .unterzeile{font-size:var(--step-small);font-weight:600;color:var(--muted);margin-top:.75rem} /* Bilder: eckig, ohne Rahmen und Schatten */ .bild img{width:100%} .bild figcaption{margin-top:.6rem;font-size:var(--step-small);color:var(--muted)} .bild--breit{grid-column:3 / -1} @media (max-width:1099px){.bild--breit{grid-column:1 / -1}} .bild--21-9 img{aspect-ratio:21/9;object-fit:cover} .bild--3-2 img{aspect-ratio:3/2;object-fit:cover} .bild--4-5 img{aspect-ratio:4/5;object-fit:cover} @media (max-width:620px){.bild--21-9 img{aspect-ratio:4/3}} @media (prefers-color-scheme:dark){.bild img,.kontakt-zeile__bild,.brief__bild{filter:brightness(.9)}} /* Hinweis: eine Tonstufe statt Rahmen */ .hinweis{background:var(--surface);padding:1.1rem 1.25rem;color:var(--muted)} .hinweis b{color:var(--ink)} /* Schritte: Reihenfolge durch Position, nicht durch Nummern */ .schritte{display:grid;gap:clamp(2.5rem,2rem + 2vw,4rem)} .schritt{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:.5rem} .schritt h3{grid-column:3 / span 4;font-size:clamp(1.875rem,1.2rem + 2.4vw,3.25rem);line-height:1.08;letter-spacing:-.018em} .schritt > div{grid-column:8 / span 5;display:grid;gap:.4rem} .schritt p{color:var(--muted)} .schritt .dauer{color:var(--ink);font-weight:600;font-size:var(--step-small)} @media (max-width:1099px){.schritt h3,.schritt > div{grid-column:1 / -1}} /* Tabelle: hier dürfen Linien sein */ .tabelle-huelle{overflow-x:auto} .tabelle{width:100%;border-collapse:collapse;font-size:var(--step-body);min-width:620px;font-variant-numeric:tabular-nums} .tabelle th,.tabelle td{text-align:left;padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--line);vertical-align:top} .tabelle th{font-size:var(--step-small);font-weight:600;color:var(--muted)} .tabelle td{color:var(--muted)} .tabelle td:first-child{color:var(--ink);font-weight:600} /* Referenzen: Bildschirm links, Text rechts */ .referenz{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:1.5rem;align-items:start} .referenz + .referenz{margin-top:clamp(4.5rem,3rem + 5vw,8rem)} .referenz__bild{grid-column:1 / span 6} .referenz__bild img{width:100%;background:var(--surface)} .referenz__text{grid-column:8 / span 5;display:grid;gap:1em} .referenz__text h2{font-size:clamp(1.875rem,1.2rem + 2.4vw,3.25rem);line-height:1.08;letter-spacing:-.018em} .referenz__text > p{color:var(--muted)} @media (max-width:1099px){.referenz__bild,.referenz__text{grid-column:1 / -1}} /* Vorschlagszeile auf der Seite für einen Kunden */ .vorschlag{font-size:var(--step-small);color:var(--muted);padding-block:.75rem;background:var(--mark);border:0} .vorschlag b{color:var(--ink)} .vorschlag .rand{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;justify-content:space-between} .seite--vorschlag .buehne{min-height:max(620px,calc(100svh - 7rem))} /* Fragen und Antworten: nebeneinander statt aufklappen */ .fragen{display:grid;gap:clamp(2rem,1.5rem + 2vw,3rem)} .fragen > div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:.5rem} .fragen dt{grid-column:3 / span 4;font-size:var(--step-lead);line-height:1.3;letter-spacing:-.005em} .fragen dd{grid-column:8 / span 5;color:var(--muted)} @media (max-width:1099px){.fragen dt,.fragen dd{grid-column:1 / -1}} @media (min-width:760px) and (max-width:1099px){.fragen dt,.fragen dd{grid-column:2 / span 10}} /* Schluss jeder Unterseite: eine Einladung, ein Knopf */ .schluss{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:1.25rem} .schluss > *{grid-column:3 / span 7} .schluss h2{font-size:var(--step-head);line-height:1.04;letter-spacing:-.02em;max-width:16ch} .schluss p{color:var(--muted);max-width:44ch} @media (max-width:1099px){.schluss > *{grid-column:1 / -1}} @media (min-width:760px) and (max-width:1099px){.schluss > *{grid-column:2 / span 10}} /* Belege: Prüfpunkt, Ergebnis, Folge */ .beleg-ja{color:var(--accent);font-weight:600} .beleg-teils{color:var(--amber);font-weight:600} .beleg-nein{color:#A3392C;font-weight:600} @media (prefers-color-scheme:dark){.beleg-nein{color:#F08A7A}} /* Abschnitt mit Raster */ .abschnitt > .rand.raster > .an-b-c + .an-b-c{margin-top:2rem} /* Kontaktwege: große Zeilen zum Antippen */ .kontaktwege{display:grid} .kontaktwege a{display:grid;gap:.25rem;padding-block:clamp(1rem,.75rem + 1vw,1.6rem);text-decoration:none} .kontaktwege a > span:first-child{font-size:clamp(1.875rem,1.2rem + 2.4vw,3.25rem);line-height:1.08;letter-spacing:-.018em;transition:color var(--t-hover) ease} @media (hover:hover) and (pointer:fine){.kontaktwege:hover a:not(:hover) > span:first-child{color:var(--muted)}} /* Testfälle: große Knöpfe, die direkt in die Vorschau führen */ .testfaelle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem} .testfall{ border-radius:var(--rund-gross);display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem 1rem;min-height:96px; padding:1.1rem 1.25rem;background:var(--surface);color:var(--ink);text-decoration:none; transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out); } .testfall:active{transform:scale(.985)} .testfall b{font-weight:600;letter-spacing:-.01em;font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);line-height:1.15} .testfall span{grid-column:1;color:var(--muted);font-size:var(--step-small)} .testfall i{grid-column:2;grid-row:1 / span 2;font-style:normal;font-weight:600;font-size:var(--step-small);background:var(--signal);color:var(--on-accent);min-height:44px;padding:0 1rem;display:inline-flex;align-items:center;border-radius:999px} @media (hover:hover) and (pointer:fine){.testfall:hover{background:var(--surface-2)}} @media (max-width:760px){.testfaelle{grid-template-columns:1fr}} /* Kontakt ohne Hürde: vorbereitete E-Mails als Knöpfe */ .kontaktknoepfe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem} .kontaktknoepfe .testfall i{background:var(--surface-2);color:var(--ink)} .kontaktknoepfe .testfall:first-child i{background:var(--signal);color:var(--on-accent)} @media (max-width:1000px){.kontaktknoepfe{grid-template-columns:1fr}} /* Ansprechpartner auf der Kontaktseite */ .ansprechpartner{display:flex;align-items:center;gap:1rem;margin-top:2rem} .ansprechpartner img{width:64px;height:64px;border-radius:50%;object-fit:cover} .ansprechpartner figcaption{display:grid;line-height:1.3} .ansprechpartner span{color:var(--muted);font-size:var(--step-small)} /* Kennzeichnung im Bild statt darunter (etwa „Symbolbild“) */ .bild--plakette{position:relative} .bild--plakette figcaption{position:absolute;left:.75rem;bottom:.75rem;margin:0;background:rgba(20,22,26,.96);color:#FFFFFF;border-radius:999px;padding:.3rem .75rem;font-size:13px;line-height:1.3} /* Rechtstexte */ .recht{display:grid;gap:1rem;max-width:62ch} .recht h2{font-size:var(--step-lead);margin-top:1.5rem} .recht p{color:var(--muted)} .recht dl{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.5rem} .recht dt{color:var(--muted)} @media (max-width:560px){.recht dl{grid-template-columns:1fr}.recht dd{margin-bottom:.5rem}} /* ── Schaubild „Nichts verlässt das Haus“ ─────────────────── */ .schaubild{ --sb-karte:#F8F9FA;--sb-kachel:#FFFFFF;--sb-feld:#FFF3E2;--sb-weich:#FFE6C2;--sb-strich:#FFBE66;--sb-gestrichelt:#B9BEC6;--sb-leiste:#EEF0F2; background:var(--sb-karte);border-radius:28px;padding:clamp(1.1rem,.8rem + 1.2vw,1.9rem); box-shadow:0 36px 70px -48px rgba(20,22,26,.38),0 0 0 1px rgba(20,22,26,.04); /* taste-skill-ignore: schwebende Karte nach Entwurf von Alex */ } @media (prefers-color-scheme:dark){ .schaubild{--sb-karte:var(--surface);--sb-kachel:var(--surface-2);--sb-feld:#262B33;--sb-weich:#3A2A14;--sb-strich:#C76A0A;--sb-gestrichelt:#434952;--sb-leiste:var(--surface-2)} } .schaubild svg{display:block;width:100%;height:auto;max-width:860px;margin-inline:auto;overflow:visible} .schaubild text{font-family:var(--font);text-anchor:middle} .schaubild .s-links{text-anchor:start} .schaubild .s-kachel{fill:var(--sb-kachel)} .schaubild .s-kachel--akzent{fill:var(--sb-weich);stroke:var(--sb-strich);stroke-width:1.5} .schaubild .s-feld{fill:var(--sb-feld)} .schaubild .s-feld--akzent{fill:var(--signal)} .schaubild .s-feld--still{fill:var(--sb-feld)} .schaubild .s-glyph,.schaubild .s-wand-glyph,.schaubild .s-wolke-glyph{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .schaubild .s-glyph{stroke:var(--accent)} .schaubild .s-glyph--hell{stroke:var(--on-accent)} .schaubild .s-marke{fill:var(--accent);font-size:14px;font-weight:600;letter-spacing:.08em;text-anchor:start} .schaubild .s-titel{fill:var(--ink);font-size:15.5px;font-weight:600} .schaubild .s-unter{fill:var(--muted);font-size:12.5px} .schaubild .s-weg{fill:none;stroke:var(--accent);stroke-width:1.6} .schaubild .s-punkt{fill:var(--signal)} .schaubild .s-versuch{fill:none;stroke:var(--sb-gestrichelt);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:5 5} .schaubild .s-wand{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round} .schaubild .s-wand-ring{fill:var(--sb-kachel);filter:drop-shadow(0 6px 10px rgba(30,35,42,.12))} /* taste-skill-ignore: weißer Ring um das Firewall-Schild nach Entwurf von Alex */ .schaubild .s-wand-feld{fill:var(--sb-weich)} .schaubild .s-wand-glyph{stroke:var(--accent)} .schaubild .s-wand-text{fill:var(--accent);font-size:14px;font-weight:600} .schaubild .s-wand-unter{fill:var(--muted);font-size:12.5px} .schaubild .s-wolke{fill:none;stroke:var(--sb-gestrichelt);stroke-width:1.5;stroke-dasharray:6 6} .schaubild .s-wolke-glyph{stroke:var(--muted)} .schaubild .s-sperre circle{fill:var(--signal)} .schaubild .s-sperre path{fill:none;stroke:var(--on-accent);stroke-width:2;stroke-linecap:round} .schaubild__hoch .s-titel{font-size:16px} .schaubild__hoch .s-unter{font-size:13.5px} .schaubild__legende{display:flex;align-items:center;gap:.9rem;margin-top:clamp(1.25rem,1rem + 1vw,1.75rem);padding:.8rem 1.1rem .8rem .8rem;border-radius:18px;background:var(--sb-leiste);color:var(--muted);font-size:var(--step-small);line-height:1.45;text-align:left} .schaubild__schild{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--sb-kachel);color:var(--accent)} .schaubild__schild svg{width:20px;height:20px} .schaubild .schaubild__hoch{display:none;max-width:380px} @media (max-width:900px){.schaubild .schaubild__quer{display:none}.schaubild .schaubild__hoch{display:block}} /* ───────────────────────────────────────────────────────────── Rahmen nach dem Vorbild „Ledgerly“: dunkles Petrol außen, ein helles Blatt mit runden Ecken, dunkle Felder darin. ───────────────────────────────────────────────────────────── */ body{background:var(--rahmen)} .blatt{background:var(--bg);color:var(--ink);border-radius:clamp(14px,1.6vw,26px);margin:clamp(6px,.7vw,10px);overflow:clip;padding-bottom:var(--abschnitt)} /* Startbereich: zentriert, Leiterbahnen im Hintergrund */ .held{position:relative;padding:clamp(3rem,2rem + 5vw,7rem) var(--rand) clamp(2rem,1rem + 3vw,4rem);isolation:isolate} .held__linien{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none} .held__linien path{fill:none;stroke:var(--line);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} .held__linien rect{fill:var(--bg);stroke:var(--line);stroke-width:1.3} .held__linien circle{fill:var(--line)} .held__mitte{display:grid;justify-items:center;text-align:center;gap:1.25rem;max-width:80rem;margin-inline:auto} .held__titel{font-size:clamp(2.5rem,1rem + 4.4vw,5.5rem);line-height:1.02;letter-spacing:-.045em} .held__titel .zeile{display:block} @media (max-width:760px){.held__titel .zeile,.held__titel [data-zeile]{display:inline}.held__titel{text-wrap:balance}} .held__unter{font-size:var(--step-lead);line-height:1.35;color:var(--muted);max-width:32ch} .held__unter--zwei{max-width:none;text-wrap:balance} .handlung--mitte{justify-content:center} .held__unten{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(3rem,2rem + 5vw,7rem)} .held__satz{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.35;letter-spacing:-.01em;max-width:24ch} .held__satz span{color:var(--muted)} .held__karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;justify-self:end;width:min(100%,460px)} @media (max-width:1000px){ .held__unten{grid-template-columns:1fr;justify-items:center;text-align:center} .held__satz{order:2} .held__karten{justify-self:center;order:3} } /* Der Server als Gegenstand (Tresor, gebürsteter Stahl) */ .tresor{position:relative;display:grid;justify-items:center;gap:1.1rem;padding-top:2.75rem} .tresor__koerper{ width:clamp(150px,14vw,210px);aspect-ratio:1;border-radius:28%;display:grid;place-items:center; background:linear-gradient(150deg,#E8EAEC 0%,#CCD0D5 46%,#A8AEB7 100%); /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */ box-shadow:inset 0 2px 0 rgba(255,255,255,.85),inset 0 -10px 22px rgba(60,70,86,.28),0 34px 50px -26px rgba(20,24,32,.55),0 10px 0 -2px #9098A5; /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */ transform:rotate(-8deg); } .tresor__koerper svg{width:34%;height:auto;transform:rotate(8deg)} .tresor__schatten{width:70%;height:18px;border-radius:50%;background:rgba(20,24,32,.18);filter:blur(10px);margin-top:-6px} .tresor__live{position:absolute;top:0;left:50%;transform:translateX(-62%);display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap; background:#FFFFFF;color:#14161A;border:1px solid var(--line);border-radius:999px;padding:.35rem .75rem;font-size:13px;font-weight:600} /* taste-skill-ignore: Etikett am Tresor */ .tresor__live i{width:7px;height:7px;border-radius:50%;background:#3D8C56;box-shadow:0 0 0 3px rgba(61,140,86,.18)} /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */ @media (prefers-reduced-motion:no-preference){.tresor__live i{animation:kugel-punkt 2.4s infinite}} /* kleine dunkle Programmkarten */ .minikarte{background:var(--rahmen);color:var(--rahmen-tinte);border-radius:14px;padding:.9rem 1rem;display:grid;gap:.35rem;align-content:start;text-align:left;font-size:13.5px;line-height:1.4} .minikarte small{color:var(--rahmen-leise);font-size:12.5px} .minikarte b{font-size:15px;font-weight:600} .minikarte .gross{font-size:34px;line-height:1;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--rahmen-akzent)} .minikarte .chip{justify-self:start;background:rgba(255,159,28,.16);color:var(--rahmen-akzent);border-radius:999px;padding:.2rem .55rem;font-size:12px;font-weight:600} /* dunkle Felder im Blatt */ .feld-dunkel{background:var(--rahmen);color:var(--rahmen-tinte);border-radius:clamp(14px,1.6vw,26px);margin-inline:var(--rand);padding:clamp(3.5rem,2rem + 6vw,8rem) clamp(1.25rem,1rem + 4vw,5rem);position:relative;overflow:hidden} .feld-dunkel .betont{color:var(--rahmen-akzent)} .feld-dunkel .leise,.feld-dunkel p{color:var(--rahmen-leise)} .grosssatz{font-size:clamp(1.875rem,1rem + 3.2vw,4rem);line-height:1.12;letter-spacing:-.035em;text-align:center;max-width:22ch;margin-inline:auto;color:var(--rahmen-tinte)!important} .grosssatz .rest{color:var(--rahmen-leise)} .grosssatz__rest{text-align:center;font-size:var(--step-lead);line-height:1.35;max-width:30ch;margin:1.5rem auto 0;color:var(--rahmen-leise)} .symbolreihe{display:inline-flex;gap:.18em;vertical-align:-.12em;margin-inline:.15em} .symbolreihe i{width:1.05em;height:1.05em;border-radius:.26em;display:inline-grid;place-items:center;background:#DCDEE2;color:var(--rahmen)} .symbolreihe i:nth-child(2){background:var(--rahmen-akzent)} .symbolreihe i:nth-child(3){background:#E4E6E9} .symbolreihe svg{width:.58em;height:.58em} .zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(3rem,2rem + 4vw,6rem) auto 0;max-width:960px;text-align:center} .zahlen > div{padding:.5rem 1rem} .zahlen > div + div{box-shadow:-1px 0 0 rgba(236,238,241,.18)} /* taste-skill-ignore: Trenner der Zahlenreihe */ .zahlen dt{font-size:clamp(2.5rem,1.5rem + 3vw,4.5rem);line-height:1;letter-spacing:-.04em;color:var(--rahmen-tinte);font-variant-numeric:tabular-nums} .zahlen dd{margin-top:.6rem;color:var(--rahmen-leise);font-size:var(--step-small)} @media (max-width:620px){.zahlen{grid-template-columns:1fr;gap:1.5rem}.zahlen > div + div{box-shadow:none}} /* Ausprobieren: Kugel und Testfälle im dunklen Feld */ .feld-dunkel--licht{background: radial-gradient(60% 50% at 85% 10%,rgba(255,159,28,.16),transparent 70%), /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */ radial-gradient(50% 45% at 10% 95%,rgba(236,238,241,.10),transparent 70%),var(--rahmen)} /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */ .probe__kopf{text-align:center;display:grid;gap:.9rem;justify-items:center;margin-bottom:clamp(2rem,1.5rem + 2vw,3.5rem)} .probe__kopf h2{font-size:var(--step-head);line-height:1.02;color:var(--rahmen-tinte)} .probe__kopf p{max-width:40ch;font-size:var(--step-lead);line-height:1.35} .probe__geraet{display:grid;justify-items:center} .probe__geraet .geraet{background:#12151A;box-shadow:inset 0 0 0 1px rgba(255,159,28,.14)} /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */ .probe__unter{text-align:center;color:var(--rahmen-tinte)!important;font-size:var(--step-lead);margin:clamp(3rem,2rem + 3vw,5rem) 0 1.5rem} .feld-dunkel .testfall{background:var(--surface);color:var(--ink)} .feld-dunkel .testfall span{color:var(--muted)} .feld-dunkel .testfaelle{max-width:1100px;margin-inline:auto} /* Einladung am Ende: zentriert, ein Zeichen, zwei Knöpfe */ .einladung{text-align:center;display:grid;justify-items:center;gap:1.25rem;padding-inline:var(--rand)} .einladung__zeichen{width:56px;height:56px;border-radius:16px;background:var(--signal);display:grid;place-items:center} .einladung__zeichen svg{width:28px;height:28px} .einladung h2{font-size:var(--step-head);line-height:1.02;max-width:18ch} .einladung p{color:var(--muted);font-size:var(--step-lead);max-width:34ch} /* Fuß auf dem Rahmen: Spalten und der Name riesig */ .fuss{margin-top:0;color:var(--rahmen-tinte);overflow:hidden} .fuss__oben{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:2rem;padding-block:clamp(3rem,2rem + 3vw,5rem) 2rem} .fuss__oben p{color:var(--rahmen-leise);max-width:30ch;font-size:var(--step-small)} .fuss__oben .fuss__claim{color:var(--rahmen-tinte);font-family:var(--titel);font-style:italic;font-size:var(--step-body);margin-block:.6rem .35rem} .fuss__oben h3{font-size:var(--step-small);font-weight:600;color:var(--rahmen-leise);margin-bottom:.5rem} .fuss__oben ul{display:grid} .fuss a{color:var(--rahmen-tinte)} .fuss__name{font-size:clamp(4.25rem,1.4rem + 15.6vw,18.5rem);line-height:.78;letter-spacing:-.06em;font-weight:600;color:rgba(236,238,241,.08);text-align:center;margin-bottom:-.12em;user-select:none} .fuss__zeile{color:var(--rahmen-leise)} .fuss__zeile > :first-child{color:var(--rahmen-leise)} .fuss__rechts{color:var(--rahmen-leise)} /* Am Handy: eine Spalte, jede Zeile über die ganze Breite und gut zu treffen (wie eine Liste in den iOS-Einstellungen) */ @media (max-width:760px){ .fuss__oben{grid-template-columns:minmax(0,1fr);gap:2.25rem} .fuss__oben h3{margin-bottom:.6rem;padding-left:1.1rem} .fuss__oben ul{padding-inline:1.1rem;border-radius:var(--rund-gross);background:rgba(236,238,241,.06)} .fuss__oben li + li{box-shadow:0 -1px 0 rgba(236,238,241,.1)} /* taste-skill-ignore: Trennlinie der Liste */ .fuss__oben ul a{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;min-height:58px;font-size:1.25rem;line-height:1.25} .fuss__oben ul a::after{content:"";flex:none;width:.45em;height:.45em;margin-right:.2em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.45} } /* ── Kugel im Startbereich ─────────────────────────────────── */ .held__unten{align-items:center} .held__probe{display:grid;justify-items:center;width:min(560px,100%)} .held__probe .geraet{width:100%} @media (max-width:1000px){.held__probe{order:1}.held__satz{order:2}} /* Schloss in der dunklen Fläche */ .tresor--dunkel{margin:0 auto clamp(2.5rem,2rem + 2vw,4rem);width:max-content} .tresor--dunkel .tresor__schatten{background:rgba(0,0,0,.45)} /* ── Scroll-Effekte: seite.js setzt --p von 0 (unten) bis 1 (oben) ── */ .feld-dunkel [data-woerter-tief] .wort{color:var(--rahmen-leise);transition:color 260ms ease} .feld-dunkel [data-woerter-tief] .wort.ist-voll{color:var(--rahmen-tinte)} @media (prefers-reduced-motion:no-preference){ .held__mitte[data-scroll-weg]{transform:translateY(calc(var(--w,0) * -46px));opacity:calc(1 - var(--w,0) * .4)} .held__probe[data-scroll]{transform:translateY(calc((1 - var(--p,1)) * 28px))} .tresor--dunkel[data-scroll]{transform:rotate(calc((var(--p,.5) - .5) * 16deg)) translateY(calc((.5 - var(--p,.5)) * 30px))} } /* ── Leises Pulsieren wie im Vorbild ───────────────────────── Lichtpulse auf den Leiterbahnen, schwebender Server, Live-Punkt, Lichtschleier in den dunklen Feldern. Pausiert außerhalb des Sichtfelds (seite.js setzt .ist-sichtbar) und steht bei reduzierter Bewegung still. */ .held__linien .puls{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:70 930;stroke-dashoffset:1000;opacity:0} .satin{position:absolute;pointer-events:none;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0} .satin--a{width:46%;height:60%;right:-8%;top:-18%;background:rgba(255,159,28,.22)} .satin--b{width:40%;height:50%;left:-10%;bottom:-20%;background:rgba(236,238,241,.14)} .satin--c{width:38%;height:55%;left:-6%;bottom:-25%;background:rgba(255,159,28,.14)} .feld-dunkel > :not(.satin){position:relative;z-index:1} @media (prefers-reduced-motion:no-preference){ .held__linien .puls{opacity:.75;animation:puls-lauf var(--d,6s) linear infinite;animation-delay:var(--v,0s)} .tresor__koerper{animation:schweben 6s ease-in-out infinite} .tresor__schatten{animation:schatten 6s ease-in-out infinite} .tresor__live i{animation:ping 2s ease infinite} .satin--a{animation:satin-a 18s ease-in-out infinite alternate} .satin--b{animation:satin-b 14s ease-in-out infinite alternate} .satin--c{animation:satin-b 16s ease-in-out infinite alternate} .held:not(.ist-sichtbar) .puls,.held:not(.ist-sichtbar) .tresor__koerper,.held:not(.ist-sichtbar) .tresor__schatten, .held:not(.ist-sichtbar) .pdf *,.held:not(.ist-sichtbar) .minikarte, .feld-dunkel:not(.ist-sichtbar) .satin{animation-play-state:paused} } @keyframes puls-lauf{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}} @keyframes schweben{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(-6.5deg)}} @keyframes schatten{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.7}} @keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,140,86,.55)}80%,100%{box-shadow:0 0 0 7px rgba(61,140,86,0)}} /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */ @keyframes satin-a{from{transform:translate(0,0) scale(1)}to{transform:translate(-30px,18px) scale(1.08)}} @keyframes satin-b{from{transform:translate(0,0) scaleX(1)}to{transform:translate(14px,-12px) scaleX(1.15)}} /* ── Hover: ruhig, eine Antwort pro Element, nur mit Maus ──── */ .testfall,.minikarte,.referenz__bild img,.reihe > li .ui,.verzeichnis img,.knopf{will-change:auto} .testfall i{transition:background-color var(--t-hover) ease,transform var(--t-hover) var(--ease-out)} .minikarte{transition:transform var(--t-ui) var(--ease-out)} .referenz__bild{overflow:hidden;border-radius:10px} .referenz__bild img{transition:transform 700ms var(--ease-soft)} .reihe > li .ui{transition:transform var(--t-ui) var(--ease-out)} @media (hover:hover) and (pointer:fine){ .knopf:hover{transform:translateY(-1px)} .knopf:active{transform:translateY(0) scale(.97)} .testfall:hover{transform:translateY(-3px)} .testfall:hover i{transform:translateX(3px)} .minikarte:hover{transform:translateY(-3px)} .referenz:hover .referenz__bild img{transform:scale(1.025)} .reihe > li.ist-aktiv:hover .ui{transform:translateY(-4px)} .kugel__beispiele button:hover{transform:translateY(-1px)} .fuss a:hover{color:#FFFFFF} .tresor:hover .tresor__koerper{animation-duration:3s} } @media (prefers-reduced-motion:reduce){ .knopf:hover,.testfall:hover,.minikarte:hover,.reihe > li.ist-aktiv:hover .ui{transform:none} .referenz:hover .referenz__bild img{transform:none} } /* ── Alles rund: wenig Ecken ─────────────────────────────────── */ :root{--rund-gross:clamp(18px,1.4vw,26px);--rund-mittel:16px;--rund-klein:12px} .bild img,.referenz__bild,.referenz__bild img,.kontakt-zeile__bild,.verzeichnis img{border-radius:var(--rund-gross)} .js .blende{border-radius:var(--rund-gross)} @media (prefers-reduced-motion:no-preference){ .js .blende{clip-path:inset(0 0 100% 0 round var(--rund-gross))} .js .blende.ist-da{clip-path:inset(0 round var(--rund-gross))} } .blende{overflow:hidden} .tabelle-huelle{background:var(--surface);border-radius:var(--rund-gross);padding:.5rem 1.5rem} .tabelle tr:last-child td{border-bottom:0} .hinweis{border-radius:var(--rund-mittel)} .stichworte li{border-radius:999px;padding:.4rem .85rem} .gesteuert__halter{border-radius:var(--rund-gross)} .zustand .ui,.ui{border-radius:var(--rund-mittel)} .minikarte{border-radius:var(--rund-mittel)} .vorschlag{border-radius:var(--rund-klein) var(--rund-klein) 0 0} .testfall i{border-radius:999px} .notiz{border-radius:var(--rund-klein)} .kontaktwege a{border-radius:var(--rund-mittel);padding-inline:.25rem} .kugel__zitat,.ui__zitat,.ui__brief,.ui__spieler{border-radius:var(--rund-klein)} @media (max-width:1099px){.zustand{border-radius:var(--rund-gross);margin-inline:0}} /* ───────────────────────────────────────────────────────────── Scroll-Filme (assets/effekte.js) ───────────────────────────────────────────────────────────── */ .seitenfortschritt{position:fixed;left:0;top:0;width:100%;height:3px;background:#FF9F1C;transform:scaleX(0);transform-origin:0 50%;z-index:80;pointer-events:none} /* Schaufenster: feste Bühne, senkrecht scrollen blättert waagrecht */ .schaufenster__spur{display:none;justify-content:center;gap:0;margin-top:clamp(.5rem,1.5vh,1.25rem)} .schaufenster__spur button{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer} .schaufenster__spur i{position:relative;display:block;height:8px;width:calc(8px + var(--f,0) * 26px);border-radius:999px;background:var(--line);overflow:hidden} .schaufenster__spur i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--signal);opacity:var(--f,0)} .ist-gepinnt.schaufenster{height:calc(100vh + (var(--n,7) - 1) * 70vh);height:calc(100svh + (var(--n,7) - 1) * 70vh);padding-block:0} .ist-gepinnt .schaufenster__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center} /* taste-skill-ignore: 100vh nur als Rückfall vor 100svh */ .ist-gepinnt .schaufenster__kopf{margin-bottom:clamp(1rem,3vh,2.5rem)} .ist-gepinnt .schaufenster__spur{display:flex} .ist-gepinnt .reihe{position:relative;width:max-content;overflow:visible;scroll-snap-type:none;padding:0;margin:0;cursor:default;will-change:transform} .ist-gepinnt .reihe > li{transition:none;scroll-snap-align:none;will-change:transform,opacity} .ist-gepinnt .schaufenster__text{display:grid;margin-top:clamp(1rem,3vh,2rem);min-height:0} .ist-gepinnt .schaufenster__text > div{grid-row:1;grid-column:1 / -1;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .45s ease,transform .6s var(--ease-out),visibility 0s linear .45s;pointer-events:none} .ist-gepinnt .schaufenster__text > div.ist-aktiv{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s} /* Gepinnt: Überschrift, aktive Tafel und Text auf einer Mittelachse */ .ist-gepinnt .schaufenster__kopf{display:grid;grid-template-columns:1fr auto 1fr;align-items:end} .ist-gepinnt .schaufenster__kopf h2{grid-column:2;max-width:none;text-align:center} .ist-gepinnt .schaufenster__tasten{grid-column:3;justify-self:end} .ist-gepinnt .schaufenster__text > div{grid-column:1 / -1;max-width:none;justify-self:center;text-align:center} .ist-gepinnt .schaufenster__text p:not(.marke-klein){max-width:58ch;margin-inline:auto} @media (max-width:767px){.ist-gepinnt .schaufenster__kopf{grid-template-columns:1fr auto}.ist-gepinnt .schaufenster__kopf h2{grid-column:1;text-align:left}.ist-gepinnt .schaufenster__tasten{grid-column:2}.ist-gepinnt .schaufenster__text > div{text-align:left;justify-self:stretch}.ist-gepinnt .schaufenster__text p:not(.marke-klein){margin-inline:0}} @media (max-height:780px){.ist-gepinnt .schaufenster__kopf h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem)}.ist-gepinnt .schaufenster__kopf{margin-bottom:.75rem}.ist-gepinnt .schaufenster__text{margin-top:.75rem}.ist-gepinnt .schaufenster__spur{margin-top:.25rem}} /* Antwort-Film: Frage tippen, Dokumente lesen, Antwort mit Fundstelle */ .film .ui{max-width:540px} @media (min-width:1100px){.gesteuert__halter{top:max(4.5rem,calc(50vh - 330px));height:min(84vh,660px);transform:perspective(1600px) rotateX(calc((1 - var(--ein,1)) * 16deg)) scale(calc(.88 + var(--ein,1) * .12));transform-origin:50% 100%;opacity:calc(.3 + var(--ein,1) * .7)}} .gesteuert__spur{position:absolute;left:1.5rem;right:1.5rem;bottom:1rem;height:3px;border-radius:999px;background:rgba(20,22,26,.1);overflow:hidden;z-index:2} .gesteuert__spur::after{content:"";position:absolute;inset:0;background:var(--signal);transform:scaleX(var(--p,0));transform-origin:0 50%} .film__stufe{display:grid;gap:.45rem} .film__label{font-size:13px;font-weight:600} .film__suche{opacity:calc(.22 + var(--s1,1) * .78);transform:translateY(calc((1 - var(--s1,1)) * 12px))} .film__antwort{opacity:calc(.22 + var(--s2,1) * .78);transform:translateY(calc((1 - var(--s2,1)) * 12px))} .film__eingabe{align-items:flex-start;min-height:4.9em} .film__eingabe .film__text{min-height:2.9em} .film__text::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--ui-akzent);opacity:0} .film.tippt .film__text::after{opacity:1;animation:strich 1s steps(1) infinite} @keyframes strich{50%{opacity:0}} .film .ui__senden{transition:transform .3s var(--ease-out),box-shadow .3s ease} .film.gesendet .ui__senden{transform:scale(1.08);box-shadow:0 0 0 6px rgba(255,159,28,.14)} /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */ .ui__liste.film__treffer li{padding-inline:.6rem;margin-inline:-.6rem;border-radius:10px;transition:background-color .25s ease,opacity .35s ease} .film__urteil{opacity:0;transition:opacity .25s ease} .film__treffer li.ist-gelesen .film__urteil{opacity:1} .film__treffer li.ist-scan{background:var(--ui-flaeche)} .film__treffer li.ist-treffer{background:var(--ui-akzent-weich)} .film__treffer li.ist-treffer .film__urteil{color:var(--ui-akzent);font-weight:600} .film__treffer li.ist-verworfen{opacity:.42} .film__worte .w{display:inline-block;transition:opacity .3s ease,transform .4s var(--ease-out),filter .4s ease} .film__worte .w:not(.ist-da){opacity:0;transform:translateY(5px);filter:blur(3px)} .film__worte sup{opacity:0;transition:opacity .3s ease} .film__worte.ist-fertig sup{opacity:1} .ui__zitat mark.film__mark{background:linear-gradient(var(--ui-mark),var(--ui-mark)) no-repeat 0 0 / calc(var(--m,1) * 100%) 100%} /* taste-skill-ignore: Textmarker, der über die Fundstelle streicht */ @media (max-width:1099px){ .gesteuert .zustand.film{order:9} .gesteuert__spur{display:none} .aussage{min-height:0} } /* Überschriften steigen aus einer Maske */ .hebt{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em} .heb{display:block;transform:translateY(108%);transition:transform 1000ms var(--ease-out)} .hebt-ziel.ist-da .heb{transform:none} /* Dunkle Felder weiten sich, der Name im Fuß steigt auf */ .feld-dunkel{transform:scale(calc(.9 + var(--e,1) * .1));transform-origin:50% 0;border-radius:calc(56px - var(--e,1) * 30px)} .fuss__name{transform:translateY(calc((1 - var(--e,1)) * 40%))} /* Hover: Magnet, Licht unter dem Zeiger, Neigung, Versatz */ .knopf{translate:var(--mx,0) var(--my,0);transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease,translate .35s var(--ease-out)} .feld-dunkel::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--lo,0);transition:opacity .45s ease; background:radial-gradient(520px circle at var(--lx,50%) var(--ly,0),rgba(255,159,28,.13),transparent 62%)} /* taste-skill-ignore: Licht folgt dem Zeiger */ .testfall,.minikarte{position:relative;overflow:hidden} .testfall > *,.minikarte > *{position:relative;z-index:1} .testfall::before,.minikarte::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--lo,0);transition:opacity .35s ease; background:radial-gradient(260px circle at var(--lx,50%) var(--ly,50%),rgba(255,159,28,.12),transparent 65%)} /* taste-skill-ignore */ .minikarte::before{background:radial-gradient(220px circle at var(--lx,50%) var(--ly,50%),rgba(255,159,28,.16),transparent 65%)} /* taste-skill-ignore */ .tresor__neigung{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease-out)} .held__linien{translate:calc(var(--px,0) * -22px) calc(var(--py,0) * -14px);transition:translate .8s var(--ease-out)} @media (prefers-reduced-motion:reduce){ .feld-dunkel{transform:none;border-radius:var(--rund-gross)} .heb{transform:none;transition:none} .knopf{translate:none} } /* ───────────────────────────────────────────────────────────── Oberflächen-Ausschnitte (data-ui): eigene Radien und Linien, so wie die echte Anwendung aussieht. Immer helles Thema. ───────────────────────────────────────────────────────────── */ [data-ui]{ --ui-bg:#FFFFFF;--ui-flaeche:#F0F1F3;--ui-linie:#D9DCE0;--ui-tinte:#15181D;--ui-leise:#555A62; --ui-akzent:#A84D00;--ui-akzent-weich:#FFE6C2;--ui-mark:#FBE7A4;--ui-amber:#8A5A12;--ui-amber-weich:#F6EEDD; font-family:var(--font);color:var(--ui-tinte);font-size:15px;line-height:1.45;text-align:left; } .ui{background:var(--ui-bg);border-radius:14px;border:1px solid var(--ui-linie);overflow:hidden;width:100%} /* taste-skill-ignore: Linie gehört zur Oberfläche (data-ui) */ .ui__leiste{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;background:var(--ui-flaeche);border-bottom:1px solid var(--ui-linie);font-size:14px} /* taste-skill-ignore: Linie gehört zur Oberfläche (data-ui) */ .ui__leiste b{font-weight:600} .ui__chip{display:inline-flex;align-items:center;gap:.35rem;font-size:13px;padding:.2rem .55rem;border-radius:999px;background:var(--ui-akzent-weich);color:var(--ui-akzent);font-weight:600;white-space:nowrap} .ui__chip--amber{background:var(--ui-amber-weich);color:var(--ui-amber)} .ui__chip--grau{background:var(--ui-flaeche);color:var(--ui-leise)} .ui__inhalt{padding:1rem;display:grid;gap:.85rem} .ui__frage{justify-self:end;max-width:85%;background:var(--ui-akzent);color:#fff;padding:.6rem .85rem;border-radius:14px 14px 4px 14px} .ui__antwort{display:grid;gap:.5rem} .ui__antwort sup,.ui sup{font-size:11px;font-weight:600;color:var(--ui-akzent);background:var(--ui-akzent-weich);border-radius:4px;padding:0 .3em;margin-left:.15em;vertical-align:.35em} .ui__fund{display:flex;flex-wrap:wrap;gap:.4rem} .ui__zitat{background:var(--ui-flaeche);border-radius:10px;padding:.75rem .85rem;font-size:14px;color:var(--ui-leise)} .ui__zitat mark{background:var(--ui-mark);color:var(--ui-tinte);padding:0 .1em} .ui__zitat b{color:var(--ui-tinte);display:block;margin-bottom:.25rem;font-size:13px} .ui__liste{display:grid;gap:0} .ui__liste li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--ui-linie)} /* taste-skill-ignore: Linie gehört zur Oberfläche (data-ui) */ .ui__liste li:last-child{border-bottom:0} .ui__liste span{color:var(--ui-leise)} .ui__eingabe{display:flex;align-items:center;gap:.5rem;border:1px solid var(--ui-linie);border-radius:12px;padding:.55rem .6rem .55rem .85rem;color:var(--ui-leise)} /* taste-skill-ignore: Linie gehört zur Oberfläche (data-ui) */ .ui__eingabe > span:first-child{flex:1} .ui__senden{width:30px;height:30px;border-radius:50%;background:var(--ui-akzent);display:grid;place-items:center;color:#fff;flex:none} .ui__senden svg{width:16px;height:16px} .ui__matrix{width:100%;border-collapse:collapse;font-size:14px} .ui__matrix th,.ui__matrix td{padding:.5rem .35rem;border-bottom:1px solid var(--ui-linie);text-align:center} .ui__matrix th:first-child,.ui__matrix td:first-child{text-align:left} .ui__matrix th{font-weight:600;color:var(--ui-leise);font-size:13px} .ui__ja{color:var(--ui-akzent);font-weight:600} .ui__nein{color:#5F656C} .ui__zeit{font-variant-numeric:tabular-nums;color:var(--ui-akzent);font-weight:600;font-size:13px;margin-right:.5rem} .ui__spieler{display:flex;align-items:center;gap:.75rem;background:var(--ui-flaeche);border-radius:10px;padding:.6rem .75rem} .ui__spieler i{width:30px;height:30px;border-radius:50%;background:var(--ui-akzent);display:grid;place-items:center;flex:none} .ui__spieler i::after{content:"";border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px} .ui__spur{flex:1;height:4px;border-radius:2px;background:var(--ui-linie);position:relative} .ui__spur::before{content:"";position:absolute;inset:0 62% 0 0;background:var(--ui-akzent);border-radius:2px} .ui__knopf{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 .9rem;border-radius:9px;background:var(--ui-akzent);color:#fff;font-weight:600;font-size:14px} .ui__knopf--leise{background:var(--ui-flaeche);color:var(--ui-tinte)} .ui__zeilen{display:grid;gap:.5rem} .ui__schalter{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--ui-linie);transition:opacity 280ms ease} /* taste-skill-ignore: Linie gehört zur Oberfläche (data-ui) */ .ui__schalter:last-child{border-bottom:0} .ui__schalter small{display:block;color:var(--ui-leise);font-size:13px} .ui__kipp{width:38px;height:22px;border-radius:999px;background:#C9CDD1;position:relative;flex:none} .ui__kipp::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff} .ui__kipp--an{background:var(--ui-akzent)} .ui__kipp--an::after{left:19px} .ui__gross{font-size:34px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums} .ui__brief{background:#fff;border:1px solid var(--ui-linie);border-radius:8px;padding:1rem;display:grid;gap:.55rem;font-size:14px} /* taste-skill-ignore: Linie gehört zur Oberfläche (data-ui) */ .ui__brief b{font-size:15px} .ui__titel{font-weight:600;font-size:15px} .ui__leise{color:var(--ui-leise)} /* Tafel: Teil im Fokus, Rest tritt zurück */ .tafel__feld[data-fokus] .ui__schalter:not(.ist-fokus){opacity:.3} /* ───────────────────────────────────────────────────────────── Fragekugel (Live-Ausschnitt im Startbereich), nach „AI Thinking Orb & Input“ von 21st.dev, ohne React in reinem JavaScript. ───────────────────────────────────────────────────────────── */ .geraet{width:min(560px,100%);display:grid;gap:.75rem;color:var(--night-ink);border-radius:28px;padding:1.2rem 1.4rem 1rem; background:radial-gradient(70% 42% at 50% 40%,rgba(255,159,28,.07),transparent 72%),#121519} /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */ .geraet__kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:14px;color:var(--night-muted)} .geraet__kopf > span{display:inline-flex;align-items:center;gap:.55rem} .geraet__kopf b{color:var(--night-ink);font-weight:600;font-size:17px;letter-spacing:-.01em} .geraet__keim{width:26px;height:26px;color:var(--night-accent);flex:none} .geraet__art svg{width:18px;height:18px;flex:none} .geraet__fuss{display:flex;justify-content:space-between;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;padding-top:.9rem;border-top:1px solid rgba(236,238,241,.1);font-size:13.5px;color:var(--night-ink)} /* taste-skill-ignore: Trennlinie im Gerät wie im Entwurf */ .geraet__fuss > span{display:inline-flex;align-items:center;gap:.5rem} .geraet__beleg svg{width:20px;height:20px;color:var(--night-accent);flex:none} .geraet__trenn,.geraet__leise{color:var(--night-muted)} .geraet__verbindung i{width:8px;height:8px;border-radius:50%;background:#5DB37C;flex:none} .geraet__verbindung b{font-weight:500;font-variant-numeric:tabular-nums} .kugel{position:relative;height:clamp(560px,74vh,640px);--mitte:37%;--feld:57%;--oCenter:0} .kugel__gruss{position:absolute;left:0;right:0;top:4%;display:grid;justify-items:center;gap:.55rem;text-align:center;pointer-events:none;transition:opacity 280ms ease,transform 420ms var(--ease-out)} .kugel__titel{font:500 clamp(1.75rem,1.2rem + 1.4vw,2.375rem)/1.08 var(--font);letter-spacing:-.035em;color:var(--night-ink)} .kugel__gruss p{font-size:16px;color:var(--night-muted)} .kugel:not([data-phase="ruhe"]) .kugel__gruss{opacity:0;transform:translateY(-10px)} .kugel__halo{position:absolute;left:50%;top:var(--mitte);width:300px;height:300px;transform:translate(-50%,-50%);border-radius:50%; width:200px;height:200px;background:rgba(255,159,28,.16);filter:blur(42px);opacity:var(--oCenter);pointer-events:none} .kugel__mover{position:absolute;left:50%;top:var(--mitte);width:0;height:0;will-change:transform} .kugel__spur{position:absolute;left:0;top:0;width:100px;height:100px;border-radius:50%;background:var(--night-accent);opacity:0;pointer-events:none} .kugel__akteur{ --w:500px;--h:60px;--r:999px;--oPill:1;--oBall:0;--oGreen:0;--oCard:0;--oInput:1;--gs:.55;--hOp:0;--dotS:0;--inScale:1; position:absolute;left:0;top:0;width:var(--w);height:var(--h);border-radius:var(--r);transform:translate(-50%,-50%);overflow:hidden; } .kugel__akteur[data-schuetteln]{animation:kugel-schuetteln 260ms ease} @keyframes kugel-schuetteln{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 5px),-50%)}75%{transform:translate(calc(-50% + 5px),-50%)}} .kugel__flaeche,.kugel__ball,.kugel__gruen,.kugel__karte{position:absolute;inset:0;border-radius:inherit;pointer-events:none} .kugel__flaeche{background:#191D22;box-shadow:inset 0 0 0 1px rgba(236,238,241,.16);opacity:var(--oPill)} /* taste-skill-ignore: Innenkante des Eingabefelds */ .kugel__ball{background:#26323A;box-shadow:inset 0 0 0 1px rgba(255,159,28,.35);opacity:var(--oBall)} /* taste-skill-ignore */ .kugel__gruen{background:var(--night-accent);opacity:var(--oGreen);transform:scale(var(--gs))} .kugel__karte{background:#F3F4F6;opacity:var(--oCard)} .kugel__form{position:absolute;inset:0;display:flex;align-items:center;gap:.5rem;padding:0 .45rem 0 1.4rem;opacity:var(--oInput);transform:scale(var(--inScale))} .kugel__feld{flex:1;min-width:0;min-height:44px;background:none;border:0;outline:0;color:var(--night-ink);font:400 17px/1.2 var(--font);padding:.5rem 0} .kugel__feld::placeholder{color:var(--night-muted)} .kugel__senden{width:46px;height:46px;border-radius:50%;border:0;background:var(--night-accent);color:#20242B;display:grid;place-items:center;cursor:pointer;flex:none;transition:transform var(--t-press) var(--ease-out),opacity var(--t-hover) ease;opacity:.85} .kugel__senden[data-bereit]{opacity:1} .kugel__senden:active{transform:scale(.94)} .kugel__senden svg{width:20px;height:20px} .kugel__form:focus-within{outline:none} .kugel__akteur:has(.kugel__feld:focus-visible) .kugel__flaeche{box-shadow:inset 0 0 0 2px var(--night-accent)} /* taste-skill-ignore */ .kugel__mitte{position:absolute;left:50%;top:var(--mitte);width:0;height:0;pointer-events:none} .kugel__leinwand{position:absolute;left:0;top:0;width:220px;height:220px;max-width:none;transform:translate(-50%,-50%);pointer-events:none} .kugel__puls{position:absolute;left:0;top:0;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;box-shadow:0 0 0 2px var(--night-accent);opacity:0;pointer-events:none} /* taste-skill-ignore: Ring beim Zusammenziehen */ .kugel__antwort{position:absolute;left:0;right:0;top:0;padding:1.1rem 1.15rem;opacity:var(--hOp);color:#15181D;display:grid;align-content:start;gap:.55rem} .kugel__antwort:focus{outline:none} .kugel__kopfzeile{display:flex;align-items:center;gap:.45rem;font-size:13px;font-weight:600;color:#A84D00} .kugel__kopfzeile i{width:8px;height:8px;border-radius:50%;background:#A84D00;transform:scale(var(--dotS))} .kugel__text{font-size:15px;line-height:1.45;color:#15181D} .kugel__text .w{display:inline-block} .kugel__fund{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.1rem} .kugel:not([data-phase="fertig"]) .kugel__fund{pointer-events:none} .kugel__fund button{font:600 13px/1 var(--font);color:#A84D00;background:#FFE6C2;border:0;border-radius:999px;padding:.45rem .7rem;min-height:32px;cursor:pointer} .kugel__fund button[aria-expanded="true"]{background:#A84D00;color:#fff} .kugel__zitat{font-size:13.5px;line-height:1.45;color:#555A62;background:#E8EAEC;border-radius:10px;padding:.65rem .75rem;max-height:9.5em;overflow:auto} .kugel__zitat b{display:block;color:#15181D;font-size:13px;margin-bottom:.2rem} .kugel__zitat mark{background:#FBE7A4;color:#15181D;padding:0 .1em} .kugel__status{position:absolute;left:0;right:0;top:calc(var(--mitte) + 84px);height:24px;display:grid;justify-items:center;font-size:14px;color:var(--night-muted);opacity:var(--sOp,0);transform:translateY(calc(var(--sTy,6) * 1px));pointer-events:none} .kugel__status span{grid-area:1/1;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap} .kugel__status .rein{animation:kugel-rein 300ms var(--ease-out) both} .kugel__status .raus{animation:kugel-raus 240ms ease both} .kugel__punkte i{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin-left:3px;animation:kugel-punkt 1.2s infinite} .kugel__punkte i:nth-child(2){animation-delay:.15s} .kugel__punkte i:nth-child(3){animation-delay:.3s} .kugel__status .fertig{color:var(--night-accent);font-weight:600} @keyframes kugel-rein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes kugel-raus{from{opacity:1}to{opacity:0;transform:translateY(-6px)}} @keyframes kugel-punkt{0%,80%,100%{opacity:.25}40%{opacity:1}} .kugel__beispiele{position:absolute;left:0;right:0;top:calc(var(--feld) + 50px);display:grid;justify-items:center;gap:.9rem;transition:opacity var(--t-ui) ease} .kugel__themen{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;width:100%} .kugel__fragen{display:grid;justify-items:center;gap:.6rem;width:100%} .kugel__beispiele button{font:400 15px/1.2 var(--font);color:var(--night-ink);background:rgba(236,238,241,.03);border:0;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(236,238,241,.16);min-height:44px;cursor:pointer;transition:background-color var(--t-hover) ease,box-shadow var(--t-hover) ease,transform var(--t-press) var(--ease-out)} /* taste-skill-ignore: Umriss-Pillen wie im Entwurf */ .kugel__beispiele .kugel__themen button{font-weight:500;font-size:14.5px;background:none;padding:0 1rem} .kugel__beispiele .kugel__themen button[aria-pressed="true"]{color:#20242B;background:var(--night-accent);box-shadow:none;font-weight:600} .kugel__fragen button{display:inline-flex;align-items:center;gap:.85rem;min-height:48px;padding:0 1.1rem 0 1.35rem;max-width:100%;text-align:left} .kugel__fragen svg{width:18px;height:18px;color:var(--night-accent);flex:none;transition:transform var(--t-hover) var(--ease-out)} .kugel__beispiele button:active{transform:scale(.97)} @media (hover:hover) and (pointer:fine){ .kugel__beispiele button:hover{background:rgba(236,238,241,.07);box-shadow:inset 0 0 0 1px rgba(236,238,241,.26)} /* taste-skill-ignore */ .kugel__beispiele .kugel__themen button[aria-pressed="true"]:hover{background:var(--night-accent);box-shadow:none} .kugel__fragen button:hover svg{transform:translateX(3px)} } .kugel[data-phase]:not([data-phase="ruhe"]) .kugel__beispiele{opacity:0;pointer-events:none} .kugel__neu{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font:600 14px/1 var(--font);color:var(--night-ink);background:none;box-shadow:inset 0 0 0 1px rgba(236,238,241,.2);border:0;border-radius:999px;min-height:44px;padding:0 1.1rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--t-ui) ease} /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */ .kugel[data-phase="fertig"] .kugel__neu{opacity:1;pointer-events:auto} .kugel__still{display:none} /* ohne JavaScript: eine fertige Beispielantwort */ html:not(.js) .kugel{height:auto} html:not(.js) .kugel > :not(.kugel__still){display:none} html:not(.js) .kugel__still{display:block} @media (max-width:900px){ .kugel{height:clamp(540px,70svh,600px);--mitte:36%;--feld:57%} .kugel__themen{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding-inline:2px;scroll-padding-inline:2px} .kugel__themen::-webkit-scrollbar{display:none} .kugel__themen button{flex:none;white-space:nowrap} .kugel__fragen button{font-size:14.5px} } @media (max-width:480px){ .geraet{padding:1rem 1rem .9rem;border-radius:24px} .geraet__kopf b{font-size:16px;white-space:nowrap} .geraet__art,.geraet__trenn,.geraet__leise{display:none} .kugel__fragen button{font-size:14px;padding:0 .9rem 0 1.1rem;gap:.6rem} } /* ───────────────────────────────────────────────────────────── Durchklicken: die echte Vorschau in einem Fenster, Fälle daneben (seite.js steuert das Fenster, die Vorschau meldet ihren Bereich zurück) ───────────────────────────────────────────────────────────── */ .durchklick{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:clamp(1rem,2vw,1.75rem);align-items:start;max-width:1320px;margin-inline:auto} .durchklick__faelle{display:grid;gap:.4rem;position:sticky;top:1.5rem} .fall{ display:grid;grid-template-columns:2.25rem 1fr;column-gap:.85rem;align-items:center;min-height:64px;padding:.7rem 1rem .7rem .7rem; border-radius:20px;background:rgba(236,238,241,.06);color:var(--rahmen-tinte);text-decoration:none; transition:background-color var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out); } .fall:active{transform:scale(.985)} .fall__nr{grid-row:1 / span 2;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:rgba(236,238,241,.1);font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums;transition:background-color var(--t-hover) ease,color var(--t-hover) ease} .fall b{font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;line-height:1.25} .fall > span:last-child{color:var(--rahmen-leise);font-size:.875rem;line-height:1.35} .fall[aria-current="true"]{background:var(--surface);color:var(--ink)} .fall[aria-current="true"] > span:last-child{color:var(--muted)} .fall[aria-current="true"] .fall__nr{background:var(--signal);color:var(--on-accent)} @media (hover:hover) and (pointer:fine){.fall:not([aria-current="true"]):hover{background:rgba(236,238,241,.12)}} .fenster{margin:0;border-radius:24px;background:var(--rahmen);overflow:hidden; box-shadow:inset 0 0 0 1px rgba(236,238,241,.12),0 50px 90px -50px rgba(0,0,0,.7)} /* taste-skill-ignore: Fensterkante */ .fenster__leiste{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:.5rem .6rem .45rem 1rem;color:var(--rahmen-leise);font-size:.8125rem} .fenster__punkte{display:flex;gap:7px} .fenster__punkte i{width:11px;height:11px;border-radius:50%;background:rgba(236,238,241,.2)} .fenster__adresse > span{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:999px;background:rgba(236,238,241,.07);white-space:nowrap} .fenster__adresse i{width:7px;height:7px;border-radius:50%;background:#5DB37C} .fenster__gross{justify-self:end;display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border-radius:999px;color:var(--rahmen-tinte);font-weight:600;text-decoration:none;transition:background-color var(--t-hover) ease} .fenster__gross:hover{background:rgba(236,238,241,.1)} .fenster__inhalt{display:block;width:100%;height:min(82vh,800px);border:0;background:var(--rahmen);color-scheme:normal} .durchklick__hinweis{text-align:center;color:var(--rahmen-leise)!important;font-size:var(--step-small);margin-top:1.5rem} .probe__unter + .durchklick{margin-top:0} /* Knopf „Ausprobieren“ unter den Tafeln der Vitrine */ .probe-link{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;margin-top:0;padding:0 1.2rem;border-radius:999px;background:var(--signal);color:var(--on-accent);font-weight:600;font-size:var(--step-small);text-decoration:none} .probe-link::after{content:"";width:.5rem;height:.5rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:.1rem} .probe-link:active{transform:scale(.97)} @media (max-width:1099px){ .durchklick{grid-template-columns:minmax(0,1fr)} .durchklick__faelle{position:static;display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--rand) * -1);padding-inline:var(--rand);scroll-padding-inline:var(--rand)} .durchklick__faelle::-webkit-scrollbar{display:none} .fall{flex:none;grid-template-columns:auto auto;min-height:48px;padding:.35rem 1.1rem .35rem .35rem;border-radius:999px;column-gap:.6rem} .fall__nr{grid-row:auto;width:2.1rem;height:2.1rem} .fall b{font-size:.975rem;white-space:nowrap} .fall > span:last-child{display:none} .fenster__inhalt{height:min(78svh,760px)} } @media (max-width:560px){ .fenster{border-radius:20px} .fenster__leiste{grid-template-columns:auto 1fr auto;padding-left:.85rem} .fenster__adresse{justify-self:center} } @media (max-width:560px){ /* Handy: das Fenster nutzt fast die ganze Breite des dunklen Feldes */ .feld-dunkel .durchklick .fenster{margin-inline:calc(8px - clamp(1.25rem,1rem + 4vw,5rem))} .feld-dunkel:has(.durchklick){margin-inline:8px} .fenster__gross{padding:0 .8rem} } /* ───────────────────────────────────────────────────────────── Dunkler Satz nach Entwurf vom 15.10.2026: Kopfzeile wie ein Gerät, Etikett, gerader Tresor im pulsierenden Lichthof, Satz mit orangem Schluss, Zahlenreihe mit Trennern ───────────────────────────────────────────────────────────── */ .feld-dunkel--frage{ background:radial-gradient(120% 80% at 50% 0%,#3B3328 0%,transparent 62%),linear-gradient(180deg,#1B1F26,#161A1F); /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */ padding:clamp(6.5rem,4.5rem + 5vw,9rem) clamp(1.25rem,1rem + 4vw,5rem) clamp(3.5rem,2.5rem + 4vw,6rem); } .feld-dunkel > .frage__licht{position:absolute;z-index:0;left:50%;top:clamp(9rem,7rem + 6vw,14rem);width:min(620px,90%);aspect-ratio:1.5;transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(closest-side,rgba(255,159,28,.36),rgba(255,159,28,.12) 55%,transparent);pointer-events:none} /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */ @media (prefers-reduced-motion:no-preference){.feld-dunkel > .frage__licht{animation:lichthof 7s ease-in-out infinite}} @keyframes lichthof{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}} .feld-dunkel > .frage__kopf{position:absolute;z-index:2;left:clamp(1.25rem,3vw,3rem);right:clamp(1.25rem,3vw,3rem);top:clamp(1.25rem,2.6vw,2.5rem);display:flex;justify-content:space-between;align-items:center;gap:1rem} .frage__marke{display:inline-flex;align-items:center;gap:.7rem;font-size:clamp(1.25rem,.95rem + 1vw,2rem);font-weight:500;letter-spacing:-.025em;color:var(--rahmen-tinte)} .frage__zeichen{width:1.55em;height:1.55em;flex:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))} /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */ .frage__lokal{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0 1.15rem;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(236,238,241,.3);font-size:var(--step-small);color:var(--rahmen-tinte);white-space:nowrap} /* taste-skill-ignore: Umriss-Pille wie im Entwurf */ .frage__lokal i{width:9px;height:9px;border-radius:50%;background:var(--night-accent);flex:none} .frage__etikett{display:table;margin:0 auto clamp(1.4rem,1rem + 1.2vw,2rem);padding:.45rem 1.1rem;border-radius:999px;background:#FFE6C2;color:#181C22!important;font-size:var(--step-small);font-weight:500} .feld-dunkel--frage .tresor--dunkel{padding-top:0;margin-bottom:clamp(.5rem,.25rem + 1vw,1.25rem)} .feld-dunkel--frage .tresor__koerper{ width:clamp(132px,11.5vw,184px);border-radius:30%;transform:none; background:linear-gradient(172deg,#EDEEF0 0%,#DDDFE3 52%,#C4C8CE 100%); /* taste-skill-ignore: Lichthof und Verlauf nach Entwurf von Alex */ box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -14px 24px rgba(70,80,96,.2),0 12px 0 -3px #A6ACB6,0 44px 60px -26px rgba(0,0,0,.7); /* taste-skill-ignore: Tiefe nach Entwurf von Alex (Tresor, Gerät, Live-Punkt) */ } .feld-dunkel--frage .tresor__koerper svg{width:30%;transform:none} .feld-dunkel--frage .tresor__schatten{background:rgba(0,0,0,.5)} @keyframes schweben-gerade{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @media (prefers-reduced-motion:no-preference){ .feld-dunkel--frage .tresor__koerper{animation:schweben-gerade 6s ease-in-out infinite} .feld-dunkel--frage .tresor--dunkel[data-scroll]{transform:translateY(calc((.5 - var(--p,.5)) * 24px))} } .feld-dunkel--frage .grosssatz{max-width:none;font-size:clamp(2.125rem,1rem + 3.6vw,4.25rem);line-height:1.08;letter-spacing:-.04em} .feld-dunkel--frage .grosssatz__akzent,.feld-dunkel [data-woerter-tief] .grosssatz__akzent .wort.ist-voll{color:var(--night-accent)} .feld-dunkel [data-woerter-tief] .grosssatz__akzent .wort{color:rgba(255,159,28,.5)} .feld-dunkel--frage .grosssatz__rest{max-width:27ch;margin-top:clamp(1.25rem,1rem + 1vw,1.75rem);color:#CBCFD5;font-size:clamp(1.25rem,1.05rem + .7vw,1.75rem)} .feld-dunkel--frage .zahlen{max-width:880px;margin-top:clamp(2.75rem,2rem + 3vw,4.5rem)} .feld-dunkel--frage .zahlen dt{font-size:clamp(2.5rem,1.6rem + 2.4vw,3.75rem);font-weight:500} .feld-dunkel--frage .zahlen dd{color:var(--rahmen-leise)} @media (max-width:620px){ .feld-dunkel > .frage__kopf{left:.9rem;right:.9rem;gap:.5rem} .frage__marke{font-size:.95rem;white-space:nowrap;gap:.5rem} .frage__zeichen{width:1.35em;height:1.35em} .frage__lokal{font-size:.8125rem;padding:0 .8rem;gap:.45rem} .feld-dunkel--frage .grosssatz{font-size:1.75rem} .feld-dunkel--frage .zahlen{grid-template-columns:repeat(3,minmax(0,1fr));gap:0} .feld-dunkel--frage .zahlen > div{padding:.25rem .35rem} .feld-dunkel--frage .zahlen > div + div{box-shadow:-1px 0 0 rgba(236,238,241,.18)} /* taste-skill-ignore */ .feld-dunkel--frage .zahlen dt{font-size:2.25rem} .feld-dunkel--frage .zahlen dd{font-size:.8125rem;line-height:1.35} } @media (max-width:420px){.frage__privat{display:none}} /* Wo Ihre Daten bleiben: Text links, Schaubild-Karte rechts (Entwurf vom 15.10.2026) */ .datenverbleib{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:clamp(2rem,1.5rem + 2vw,3rem);align-items:center} .datenverbleib__text{grid-column:1 / span 5;display:grid;gap:clamp(1rem,.8rem + .8vw,1.5rem);align-content:center;max-width:34rem} .datenverbleib__text .lead{max-width:28ch} .datenverbleib__text .abschnitt__titel{margin-bottom:0} .datenverbleib__text .datenverbleib__zeilen{max-width:none;white-space:nowrap} @media (max-width:360px){.datenverbleib__text .datenverbleib__zeilen{white-space:normal}} .datenverbleib:has(> .tabelle-huelle){align-items:start} .datenverbleib:has(> .tabelle-huelle) .datenverbleib__text{padding-top:1.25rem} .datenverbleib__bild.tabelle-huelle{border-radius:28px;padding:.5rem clamp(1rem,.8rem + 1vw,1.75rem)} .datenverbleib__bild{grid-column:6 / -1;min-width:0} .merkmale{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;margin-top:.5rem} .merkmale li{display:grid;grid-template-columns:44px auto;column-gap:.75rem;align-items:center} .merkmale__zeichen{grid-row:1 / span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--mark);color:var(--accent)} .merkmale__zeichen svg{width:20px;height:20px} .merkmale b{font-weight:600;font-size:var(--step-small);align-self:end;line-height:1.25} .merkmale li > span:last-child{font-size:.875rem;color:var(--muted);align-self:start;line-height:1.35} @media (max-width:1099px){ .datenverbleib__text,.datenverbleib__bild{grid-column:1 / -1} .datenverbleib__text{max-width:none} } @media (max-width:520px){.merkmale{flex-direction:column}} /* Schwebende PDF-Kachel in den Leiterbahnen des Startbereichs: Daten kommen per PDF herein (Skizze vom 15.10.2026) */ .held__linien .pdf__boden{fill:rgba(24,28,34,.22);stroke:none} .held__linien .pdf__dicke{fill:#B86200;stroke:none} .held__linien .pdf__kachel{fill:url(#pdf-gruen);stroke:none} .held__linien .pdf__glanz{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1} .held__linien .pdf__blatt{fill:#F0F1F3;stroke:none} .held__linien .pdf__falz{fill:none;stroke:#B5BBC3;stroke-width:1.3} .held__linien .pdf__wort{fill:#A84D00;font:600 9.5px var(--font);letter-spacing:.03em;text-anchor:middle} .held__linien .pdf__einflug rect{fill:#FFFFFF;stroke:var(--line);stroke-width:1} .held__linien .pdf__einflug path{fill:none;stroke:var(--accent);stroke-width:1.4} .held__linien .pdf__einflug{opacity:0} .held__linien .pdf__etikett rect{fill:#FFFFFF;stroke:var(--line);stroke-width:1} .held__linien .pdf__etikett circle{fill:#3D8C56} .held__linien .pdf__etikett text{fill:#14161A;font:600 8.5px var(--font)} @keyframes pdf-einflug{ 0%{transform:translate(-82px,-60px) rotate(-16deg) scale(1);opacity:0} 12%{opacity:1} 62%{transform:translate(-6px,-8px) rotate(-8deg) scale(.62);opacity:1} 78%,100%{transform:translate(0,-2px) rotate(-8deg) scale(.3);opacity:0} } @keyframes pdf-annahme{0%,58%,100%{transform:scale(1)}68%{transform:scale(1.045)}} @media (prefers-reduced-motion:no-preference){ .held__linien .pdf__schwebe{animation:schweben-gerade 6s ease-in-out infinite} .held__linien .pdf__annahme{transform-box:fill-box;transform-origin:center;animation:pdf-annahme 4.5s ease-in-out infinite} .held__linien .pdf__boden{transform-box:fill-box;transform-origin:center;animation:schatten 6s ease-in-out infinite} .held__linien .pdf__einflug{transform-box:fill-box;transform-origin:center;animation:pdf-einflug 4.5s var(--ease-out) infinite} .held__linien .pdf__etikett circle{animation:kugel-punkt 2.4s infinite} } @media (max-width:999px){.held__linien .pdf{display:none}} /* Karten rechts im Startbereich im Stil der PDF-Kachel: orange, gekippt, schwebend, weißes Etikett */ .held__karten{grid-template-columns:minmax(0,1fr);gap:1.75rem;align-items:start;padding-top:1rem;width:min(100%,300px)} .held__karten .minikarte{ --kipp:-4deg;overflow:visible;padding:1.55rem 1.1rem 1.15rem;border-radius:22px;color:#20242B; background:linear-gradient(172deg,#FFB54D 0%,#FF9F1C 55%,#EE8A06 100%); /* taste-skill-ignore: orange Kachel wie die PDF-Kachel, Wunsch von Alex */ box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 7px 0 -1px #B86200,0 30px 40px -22px rgba(24,28,34,.5); /* taste-skill-ignore: Kachel mit Kante und Schatten */ transform:rotate(var(--kipp)); } .held__karten .minikarte:nth-child(1):not(:only-child){margin-right:2.5rem} .held__karten .minikarte:nth-child(2){--kipp:4deg;margin-left:2.5rem} .held__karten .minikarte::before{border-radius:inherit} .minikarte > .minikarte__etikett{position:absolute;z-index:2;top:-13px;left:14px;display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:999px; background:#FFFFFF;color:#14161A;font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 0 0 1px rgba(20,22,26,.1)} /* taste-skill-ignore: Etikett wie „PDF-Import“ */ .minikarte__etikett i{width:6px;height:6px;border-radius:50%;background:#3D8C56;flex:none} .held__karten .minikarte b{color:#20242B} .held__karten .minikarte small{color:rgba(32,36,43,.78)} .held__karten .minikarte .gross{color:#20242B;font-size:42px} .held__karten .minikarte .chip{background:#20242B;color:#FFB54D} @keyframes karte-schweben{0%,100%{translate:0 0}50%{translate:0 -8px}} @media (prefers-reduced-motion:no-preference){ .held__karten .minikarte{animation:karte-schweben 6s ease-in-out infinite} .held__karten .minikarte:nth-child(2){animation-delay:-3s} .minikarte__etikett i{animation:kugel-punkt 2.4s infinite} } @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ .held__karten .minikarte:hover{transform:rotate(var(--kipp)) scale(1.03)} } /* Herkunft und „Ausprobieren“ in einer Zeile, damit der Bildtext auch auf niedrigen Bildschirmen in die Bühne passt */ .schaufenster__mehr{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:.75rem} .schaufenster__text .schaufenster__mehr .marke-klein{margin-top:0} .ist-gepinnt .schaufenster__mehr{justify-content:center} @media (max-width:767px){ .ist-gepinnt .schaufenster__mehr{justify-content:flex-start} .ist-gepinnt .schaufenster__text p:not(.marke-klein){font-size:.975rem;line-height:1.45} .ist-gepinnt .schaufenster__mehr .marke-klein{display:none} } /* Verschwiegenheit eingebaut: Schalter bauen sich auf, die Notizen fliegen ein (Wunsch vom 15.10.2026) */ @media (prefers-reduced-motion:no-preference){ .tafel.ist-bereit .ui__schalter{opacity:0;transition:opacity .45s ease calc(var(--i,0) * 220ms)} .tafel.ist-bereit .ui__schalter > span{opacity:0;transform:translateX(-14px);transition:opacity .5s ease calc(var(--i,0) * 220ms + 80ms),transform .6s var(--ease-out) calc(var(--i,0) * 220ms + 80ms)} .tafel.ist-bereit .ui__kipp{transform:scaleX(.25);opacity:0;transform-origin:100% 50%;transition:transform .5s var(--ease-out) calc(var(--i,0) * 220ms + 160ms),opacity .3s ease calc(var(--i,0) * 220ms + 160ms),background-color .3s ease calc(var(--i,0) * 220ms + 560ms)} .tafel.ist-bereit .ui__kipp--an{background:#C9CDD1} .tafel.ist-bereit .ui__kipp::after{transition:left .45s cubic-bezier(.34,1.56,.64,1) calc(var(--i,0) * 220ms + 520ms)} .tafel.ist-bereit .ui__kipp--an::after{left:3px} .tafel.ist-bereit .tafel__links .notiz{opacity:0;transform:translateX(-56px)} .tafel.ist-bereit .tafel__rechts .notiz{opacity:0;transform:translateX(56px)} .tafel.ist-bereit .notiz{transition:opacity .55s ease calc(var(--i,0) * 220ms + 480ms),transform .8s var(--ease-out) calc(var(--i,0) * 220ms + 480ms)} .tafel.ist-gebaut .ui__schalter,.tafel.ist-gebaut .ui__schalter > span,.tafel.ist-gebaut .ui__kipp{opacity:1} .tafel.ist-gebaut .ui__schalter > span{transform:none} .tafel.ist-gebaut .ui__kipp{transform:none} .tafel.ist-gebaut .ui__kipp--an{background:var(--ui-akzent)} .tafel.ist-gebaut .ui__kipp--an::after{left:19px} .tafel.ist-gebaut .tafel__links .notiz,.tafel.ist-gebaut .tafel__rechts .notiz{opacity:1;transform:none} .tafel.ist-fertig .ui__schalter,.tafel.ist-fertig .notiz{transition-delay:0s} } @media (max-width:1099px) and (prefers-reduced-motion:no-preference){ .tafel.ist-bereit .tafel__links .notiz,.tafel.ist-bereit .tafel__rechts .notiz{transform:translateY(24px)} } /* Selbst gezeichnete Illustrationen (vorlage/illustrationen/, über {{illu:name}} eingesetzt) */ .illu{display:block;width:100%;height:auto;border-radius:var(--rund-gross);overflow:hidden; --il-grund:#EBECEE;--il-kachel:#FFFFFF;--il-creme:#ECEEF0;--il-weich:#FFE6C2;--il-weich-dunkel:#FFD49A;--il-stein:#D7DADF;--il-stein-dunkel:#C0C5CC;--il-dicke:#21262E;--il-gruen:#A84D00} @media (prefers-color-scheme:dark){ .illu{--il-grund:var(--surface);--il-kachel:#262A30;--il-creme:#2E333A;--il-weich:#3A2A14;--il-weich-dunkel:#1B1F26;--il-stein:#32363D;--il-stein-dunkel:#4A4F57;--il-dicke:#0F1114} } .illu .g{fill:var(--il-grund)} .illu .k{fill:var(--il-kachel)} .illu .c{fill:var(--il-creme)} .illu .w{fill:var(--il-weich)} .illu .w-dunkel{fill:var(--il-weich-dunkel)} .illu .s{fill:var(--il-stein)} .illu .s-dunkel{fill:var(--il-stein-dunkel)} .illu .a{fill:var(--il-gruen)} .illu .a-pie{fill:var(--il-gruen);opacity:.18} .illu .d{fill:var(--il-dicke)} .illu .hell{fill:#FFFFFF} .illu .glas{fill:var(--il-weich);opacity:.55} .illu .ring{fill:none;stroke:var(--il-stein-dunkel);stroke-width:2.4} .illu .linie{fill:none;stroke:var(--il-stein-dunkel);stroke-width:2;stroke-linecap:round} .illu .l{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .illu .l--strich{stroke-dasharray:2 9} .illu .l--leicht{stroke-width:2;opacity:.55} .illu .l--dick{stroke-width:4.5} .illu .l--lupe{stroke-width:11} .illu .l--griff{stroke-width:15} .illu .lw{fill:none;stroke:#FFFFFF;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .illu .sch{filter:drop-shadow(0 10px 14px rgba(30,35,42,.14))} /* taste-skill-ignore: Tiefe der gezeichneten Kacheln */ .illu .nr circle{fill:var(--il-kachel);stroke:var(--il-stein-dunkel);stroke-width:1.5} .illu .nr text{fill:var(--accent);font:600 12px var(--font);text-anchor:middle} .illu .preis{fill:#FFFFFF;font:600 22px var(--font);text-anchor:middle} .bild--illu{margin:0} @media (prefers-color-scheme:dark){.illu .sch{filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}} /* taste-skill-ignore: Tiefe der gezeichneten Kacheln im Dunkelmodus */ /* Illustrationen in Bewegung: Scroll-Werte aus effekte.js, Anheben beim Zeigen. Ohne Skript oder bei „Bewegung reduzieren“ gilt der fertige Zustand. */ @property --hv{syntax:"";inherits:true;initial-value:0} .illu{--sp:.5;--sf:1} .bild--illu .illu,.referenz__bild .illu{transition:--hv .55s var(--ease-out),scale .6s var(--ease-out)} .verzeichnis .illu{transition:--hv .55s var(--ease-out),opacity var(--t-ui) ease} @media (hover:hover) and (pointer:fine){ .bild--illu:hover .illu,.referenz__bild:hover .illu,.verzeichnis li:hover .illu{--hv:1} .bild--illu:hover .illu{scale:1.015} } @media (prefers-reduced-motion:no-preference){ .illu .par-auf{transform:translateY(calc((.5 - var(--sp)) * 34px))} .illu .par-ab{transform:translateY(calc((var(--sp) - .5) * 26px))} .illu .par-links{transform:translateX(calc((.5 - var(--sp)) * 40px))} .illu .par-rechts{transform:translateX(calc((var(--sp) - .5) * 40px))} .illu .heb{transform:translateY(calc(var(--hv) * -7px))} .illu .heb-viel{transform:translateY(calc(var(--hv) * -12px))} .illu .wachs{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(calc(.2 + var(--sf) * .8))} .illu .wachs-quer{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(calc(.05 + var(--sf) * .95))} .illu .auf{opacity:clamp(0,calc((var(--sf) - var(--ab,.5)) * 7),1)} .illu .pop{transform-box:fill-box;transform-origin:center;transform:scale(clamp(.3,calc((var(--sf) - var(--ab,.5)) * 6 + .3),1));opacity:clamp(0,calc((var(--sf) - var(--ab,.5)) * 7),1)} .illu .landet{transform:translateY(calc((1 - var(--sf)) * var(--hoch,-40px)))} .illu .dreh{transform-box:view-box;transform:rotate(calc(var(--sp) * var(--grad,280deg)))} .illu .wippe{transform-box:view-box;transform:rotate(calc((var(--sp) - .5) * var(--grad,14deg)))} .illu .zeichne{stroke-dasharray:var(--len,600);stroke-dashoffset:calc(var(--len,600) * (1 - var(--sf)))} .illu .blinkt{animation:illu-blinken 2.4s ease-in-out infinite;animation-delay:var(--v,0s)} .illu .dampf{animation:illu-dampf 3s ease-in-out infinite;animation-delay:var(--v,0s)} .illu .tippt{animation:illu-tippen 1.4s ease-in-out infinite;animation-delay:var(--v,0s)} .illu .zieht{animation:illu-ziehen 26s linear infinite alternate} } @keyframes illu-blinken{0%,100%{opacity:1}50%{opacity:.25}} @keyframes illu-dampf{0%{opacity:0;transform:translateY(6px)}40%{opacity:.6}100%{opacity:0;transform:translateY(-10px)}} @keyframes illu-tippen{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}} @keyframes illu-ziehen{from{transform:translateX(-30px)}to{transform:translateX(30px)}} /* Formate der gezeichneten Bilder, Texte darin */ .bild--3-2 .illu,.referenz__bild .illu{aspect-ratio:3/2} .bild--21-9 .illu{aspect-ratio:21/9} @media (max-width:620px){.bild--21-9 .illu{aspect-ratio:4/3}} .referenz__bild .illu{border-radius:var(--rund-gross)} .illu .klein-hell{fill:#FFFFFF;font:600 10px var(--font);text-anchor:middle} .illu .ziffer{fill:#A84D00;font:600 18px var(--font);text-anchor:end;font-variant-numeric:tabular-nums} .illu .euro{fill:#A84D00;font:600 13px var(--font);text-anchor:middle} .illu .para{fill:#FFFFFF;font:500 34px var(--titel);text-anchor:middle} .illu .wolke{fill:none;stroke:var(--il-stein-dunkel);stroke-width:3;stroke-dasharray:9 9} .illu .l--wand{stroke-width:4} .illu .sonne{opacity:.9} .illu .fels{fill:none;stroke:var(--il-stein-dunkel);stroke-width:4;stroke-linecap:round} /* Branchen-Verzeichnis der Startseite: gezeichnetes Bild im ganzen 3:2-Format, mittig zur Liste */ .verzeichnis .illu{height:auto;aspect-ratio:3/2;top:50%;translate:0 -50%} @media (max-width:900px){.verzeichnis .illu{translate:none}} /* ── Zeitrechner (Startseite): Ihre Zahlen, vorsichtig gerechnet ── Links die Regler auf hellem Blatt, rechts das Ergebnis auf dem dunklen Rahmen. Ohne Skript stehen die Beispielwerte da. */ .rechner__kopf{display:grid;justify-items:center;gap:1rem;text-align:center;max-width:900px;margin:0 auto clamp(2.5rem,1.5rem + 3vw,4.5rem)} .rechner__marke{display:inline-flex;align-items:center;gap:.5rem;min-height:36px;padding:0 1rem 0 .8rem;border-radius:999px;background:var(--surface);color:var(--accent);font-size:var(--step-small);font-weight:600;box-shadow:inset 0 0 0 1px var(--line)} .rechner__marke svg{width:18px;height:18px} .rechner__kopf h2{font-size:var(--step-head);line-height:1.02;max-width:16ch} .rechner__kopf > p:last-child{color:var(--muted);font-size:var(--step-lead);line-height:1.35;max-width:34ch} .rechner{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:var(--spalt);align-items:start;max-width:1280px;margin-inline:auto} .rechner__regler{display:grid;gap:clamp(1.75rem,1.2rem + 1.4vw,2.5rem);padding:clamp(1.5rem,1rem + 2.4vw,3.25rem);border-radius:var(--rund-gross);background:var(--surface)} .regler{display:grid;gap:.3rem} .regler__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:600;line-height:1.3;cursor:pointer} .regler__kopf output{min-width:3ch;text-align:right;white-space:nowrap;color:var(--accent);font-size:var(--step-lead);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .regler__hinweis{color:var(--muted);font-size:var(--step-small)} .regler__hinweis b{color:var(--ink);font-variant-numeric:tabular-nums} .regler input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y; --fuell:calc(14px + var(--p,.5) * (100% - 28px))} .regler input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px; background:linear-gradient(90deg,var(--signal) 0 var(--fuell),var(--surface-2) var(--fuell) 100%)} /* taste-skill-ignore: Füllstand des Reglers, kein Schmuckverlauf */ .regler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#FFFFFF; box-shadow:0 0 0 1px rgba(20,22,26,.14),0 3px 10px rgba(20,22,26,.18);transition:transform var(--t-press) var(--ease-out),box-shadow var(--t-hover) ease} /* taste-skill-ignore: der Griff braucht Tiefe zum Greifen */ .regler input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--surface-2)} .regler input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:var(--signal)} .regler input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 1px rgba(20,22,26,.14),0 3px 10px rgba(20,22,26,.18)} /* taste-skill-ignore: der Griff braucht Tiefe zum Greifen */ .regler input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)} .regler input[type=range]:focus-visible{outline:none} .regler input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)} .regler input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)} .annahmen{padding-top:1.25rem;border-top:1px solid var(--line)} .annahmen summary{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;list-style:none;color:var(--accent);font-weight:600;cursor:pointer} .annahmen summary::-webkit-details-marker{display:none} .annahmen summary::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform var(--t-ui) var(--ease-out)} .annahmen[open] summary::after{transform:translateY(.12em) rotate(-135deg)} .annahmen__tabelle{width:100%;margin:.75rem 0 1rem;border-collapse:collapse;font-size:var(--step-small)} .annahmen__tabelle th,.annahmen__tabelle td{padding:.35rem 0;text-align:left;font-weight:400;vertical-align:middle} .annahmen__tabelle thead th{color:var(--muted);font-weight:600} .annahmen__tabelle thead th + th,.annahmen__tabelle td{width:5.5rem;text-align:center} .annahmen__tabelle input{width:4.5rem;min-height:44px;border:0;border-radius:var(--rund-klein);background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line); font:600 var(--step-body)/1 var(--font);font-variant-numeric:tabular-nums;text-align:center;-moz-appearance:textfield;appearance:textfield} .annahmen__tabelle input::-webkit-inner-spin-button,.annahmen__tabelle input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .annahmen > p{color:var(--muted);font-size:var(--step-small)} .rechner__ergebnis{position:sticky;top:clamp(1rem,3vh,2rem);display:grid;gap:1.5rem;padding:clamp(1.75rem,1rem + 2.6vw,3.25rem);border-radius:var(--rund-gross);overflow:hidden;color:var(--rahmen-tinte); background:radial-gradient(70% 55% at 85% 0%,rgba(255,159,28,.18),transparent 70%),var(--rahmen); /* taste-skill-ignore: Lichthof wie im dunklen Satzblock nach Entwurf von Alex */ box-shadow:inset 0 0 0 1px rgba(255,159,28,.12)} /* taste-skill-ignore: Kante im Dunkelmodus */ .ergebnis__etikett{color:var(--rahmen-leise);font-size:var(--step-small);font-weight:600} .ergebnis__zahl{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .3em;margin-top:-.75rem;line-height:.95} .ergebnis__zahl b{font-size:clamp(4.5rem,2.5rem + 6vw,8.5rem);font-weight:500;letter-spacing:-.05em;font-variant-numeric:tabular-nums} .ergebnis__zahl .betont{color:var(--rahmen-akzent);font-size:clamp(1.75rem,1.2rem + 1.6vw,2.75rem)} .ergebnis__drei{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.18fr) minmax(0,1.1fr);margin:0;padding-block:1.25rem;border-block:1px solid rgba(236,238,241,.14)} .ergebnis__drei > div{padding-inline:clamp(.75rem,1.4vw,1.25rem)} .ergebnis__drei > div:first-child{padding-left:0} .ergebnis__drei > div + div{box-shadow:-1px 0 0 rgba(236,238,241,.14)} /* taste-skill-ignore: Trenner der Zahlenreihe */ .ergebnis__drei dt{white-space:nowrap;font-size:clamp(1.5rem,1.1rem + .9vw,2rem);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .ergebnis__drei dd{margin:.35rem 0 0;color:var(--rahmen-leise);font-size:var(--step-small);line-height:1.3} .ergebnis__balken{display:grid;gap:.8rem} .ergebnis__balken li{display:grid;grid-template-columns:9.5rem minmax(0,1fr) 4.25rem;align-items:center;gap:1rem;font-size:var(--step-small)} .ergebnis__balken li > span:first-child{color:var(--rahmen-leise)} .ergebnis__balken b{text-align:right;font-variant-numeric:tabular-nums} .balken{display:block;height:8px;border-radius:999px;background:rgba(236,238,241,.12);overflow:hidden} .balken > span{display:block;width:calc(var(--b,0) * 100%);height:100%;border-radius:inherit;background:var(--rahmen-akzent);transition:width 520ms var(--ease-out)} .ergebnis__satz{color:var(--rahmen-tinte);font-family:var(--titel);font-style:italic;font-weight:500;font-size:var(--step-lead);line-height:1.3;letter-spacing:-.01em} .rechner__ergebnis .knopf{justify-self:start} .ergebnis__fuss{color:var(--rahmen-leise);font-size:var(--step-small)} .rechner__kurz{display:none} .rechner__kurz span,.ohne-umbruch{white-space:nowrap} .vorteile{max-width:1280px;margin:clamp(3rem,2rem + 3vw,5rem) auto 0} .vorteile__titel{margin-bottom:1.5rem;text-align:center;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);font-weight:500;letter-spacing:-.025em} .vorteile__liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spalt)} .vorteile__liste li{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;gap:.5rem;padding:1.5rem;border-radius:var(--rund-gross);background:var(--surface);transition:translate var(--t-ui) var(--ease-out)} .vorteile__liste svg{width:44px;height:44px;margin-bottom:.5rem;padding:10px;border-radius:var(--rund-klein);background:var(--mark);color:var(--accent)} .vorteile__liste b{line-height:1.25} .vorteile__liste span{color:var(--muted);font-size:var(--step-small)} @media (hover:hover) and (pointer:fine){.vorteile__liste li:hover{translate:0 -4px}} @media (max-width:1099px){ .vorteile__liste{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:899px){ .rechner{grid-template-columns:minmax(0,1fr)} .rechner__ergebnis{position:relative;top:auto} .rechner__kurz{position:sticky;bottom:12px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-inline:-.5rem;padding:.4rem .4rem .4rem 1.1rem;border-radius:999px; background:var(--rahmen);color:var(--rahmen-tinte);font-size:var(--step-small);box-shadow:0 8px 24px rgba(16,20,23,.25)} /* taste-skill-ignore: schwebende Leiste über den Reglern */ .rechner__kurz b{font-variant-numeric:tabular-nums} .rechner__kurz a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.1rem;border-radius:999px;background:var(--night-accent);color:var(--night);font-weight:600;text-decoration:none} } @media (max-width:560px){ .vorteile__liste{grid-template-columns:minmax(0,1fr)} .ergebnis__drei{grid-template-columns:minmax(0,1fr);gap:.9rem} .ergebnis__drei > div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:0} .ergebnis__drei > div + div{box-shadow:none} .ergebnis__drei dd{margin:0;text-align:right} .ergebnis__balken li{grid-template-columns:minmax(0,1fr) 3.75rem;gap:.35rem 1rem} .ergebnis__balken li .balken{grid-column:1 / -1;grid-row:2} .regler__kopf{font-size:var(--step-small)} } @media (prefers-reduced-motion:reduce){ .balken > span,.vorteile__liste li,.regler input[type=range]::-webkit-slider-thumb{transition:none} } /* ── Ausprobieren am Handy: alle Fälle als Kacheln, jeder öffnet sich im Vollbild ── Desktop bleibt beim Fenster mit Fällen daneben. */ .fall__zeichen,.durchklick__start,.nur-klein{display:none} @media (min-width:760px) and (max-width:1099px){ /* Tablet: alle Fälle sichtbar statt waagrecht zu wischen */ .durchklick__faelle{flex-wrap:wrap;justify-content:center;overflow:visible;margin-inline:0;padding-inline:0} } @media (max-width:759px){ .nur-gross{display:none} .nur-klein{display:inline} .feld-dunkel:has(.durchklick){padding-inline:14px} .durchklick__faelle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible;margin:0;padding:0} .durchklick .fall{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;min-height:156px;padding:14px 14px 16px;border-radius:22px; background:rgba(236,238,241,.07);color:var(--rahmen-tinte);white-space:normal;-webkit-tap-highlight-color:transparent} .durchklick .fall[aria-current="true"]{background:rgba(236,238,241,.07);color:var(--rahmen-tinte)} .durchklick .fall[aria-current="true"] > span:last-child{color:var(--rahmen-leise)} .durchklick .fall:active{transform:scale(.96);background:rgba(236,238,241,.12)} .fall__zeichen{display:grid;place-items:center;width:46px;height:46px;margin-bottom:.45rem;border-radius:15px;background:rgba(255,159,28,.16);color:var(--rahmen-akzent)} .fall__zeichen svg{width:24px;height:24px} .durchklick .fall__nr,.durchklick .fall[aria-current="true"] .fall__nr{position:absolute;top:12px;right:12px;width:26px;height:26px;background:rgba(236,238,241,.08);color:var(--rahmen-leise);font-size:.75rem} .durchklick .fall b{font-size:1.0625rem;line-height:1.2;white-space:normal} .durchklick .fall > span:last-child{display:block;color:var(--rahmen-leise);font-size:.875rem;line-height:1.3} .durchklick__start{display:flex;width:100%;min-height:54px;margin-top:12px} .durchklick .fenster{display:none} } /* Vollbild: ein einziger App-Bildschirm, kein Fenster im Fenster. Die Vorschau füllt alles, Kopf und Fuß schweben als Glas darüber, der Inhalt scrollt darunter durch. */ html.ist-vollbild-offen{overflow:hidden} .vollbild{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden; background:var(--bg);color:var(--ink)} .vollbild::backdrop{background:rgba(9,11,13,.5)} .vollbild__innen{position:absolute;inset:0} .vollbild__inhalt{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:var(--bg)} .vollbild__kopf,.vollbild__fuss{position:absolute;left:0;right:0;z-index:2; background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(20px);backdrop-filter:saturate(1.6) blur(20px)} .vollbild__kopf{top:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:62px;padding:calc(env(safe-area-inset-top,0px) + 8px) 6px 8px 18px} .vollbild__ort{display:grid;gap:2px;min-width:0} .vollbild__zaehler{color:var(--muted);font-size:.75rem;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums} .vollbild__titel{overflow:hidden;font-size:1.0625rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis} .vollbild__zu{flex:none;min-height:44px;padding:0 1rem;border:0;border-radius:999px;background:none;color:var(--accent);font:600 1.0625rem/1 var(--font);cursor:pointer} .vollbild__fortschritt{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)} .vollbild__fortschritt i{position:absolute;inset:0;background:var(--signal);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-out)} .vollbild__fuss{bottom:0;display:flex;gap:.5rem;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 12px);box-shadow:inset 0 1px 0 var(--line)} /* taste-skill-ignore: Haarlinie über der Glasleiste */ .vollbild__fuss button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;border:0;border-radius:999px;font:600 1rem/1.15 var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent} .vollbild__fuss button:active{transform:scale(.97)} .vollbild__fuss svg{flex:none;width:20px;height:20px} .vollbild__zurueck{flex:none;width:52px;background:var(--surface-2);color:var(--ink)} .vollbild__zurueck:disabled{opacity:.35} .vollbild__weiter{flex:1;min-width:0;padding:0 1.25rem;background:var(--signal);color:var(--on-accent)} .vollbild__weiter span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vollbild__weiter span b{font-weight:600;opacity:.7} /* „So geht's“ als Sprechblase über dem Fuß */ .vollbild__tipp{position:absolute;z-index:3;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 88px);display:flex;align-items:flex-start;gap:.6rem; padding:12px 6px 12px 14px;border-radius:18px;background:var(--rahmen);color:var(--rahmen-tinte);font-size:.9375rem;line-height:1.4; box-shadow:inset 0 0 0 1px rgba(255,159,28,.14),0 18px 40px -14px rgba(0,0,0,.5); /* taste-skill-ignore: schwebende Sprechblase */ opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;transition:opacity .3s ease,transform .5s var(--ease-out)} .vollbild.zeigt-tipp .vollbild__tipp{opacity:1;transform:none;pointer-events:auto} .vollbild__tipp > svg{flex:none;width:18px;height:18px;margin-top:.15em;color:var(--rahmen-akzent)} .vollbild__tipp span{flex:1} .vollbild__tipp button{flex:none;display:grid;place-items:center;width:40px;height:40px;margin:-8px 0;border:0;border-radius:50%;background:none;color:var(--rahmen-leise);cursor:pointer} .vollbild__tipp button svg{width:16px;height:16px} @media (prefers-reduced-motion:reduce){.vollbild__tipp,.vollbild__fortschritt i{transition:none}} @media (prefers-reduced-motion:reduce){.durchklick .fall:active,.vollbild__fuss button:active,.vollbild__zu:active{transform:none}} @media (max-width:759px) and (prefers-reduced-motion:no-preference){ .durchklick__faelle.ist-bereit:not(.ist-gezeigt) .fall{opacity:0} .durchklick__faelle.ist-gezeigt .fall{animation:kachel-auf .6s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 60ms)} } @keyframes kachel-auf{from{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:none}} /* Handy, barrierefrei und mit wenig Text (16.10.2026): Kacheln nur Zeichen und Titel, alle Ziele mindestens 56 px */ @media (max-width:759px){ .durchklick .fall{min-height:128px;justify-content:space-between;gap:.75rem;padding:16px} .durchklick .fall > span:last-child,.durchklick .fall__nr,.durchklick .fall[aria-current="true"] .fall__nr{display:none} .fall__zeichen{width:52px;height:52px;margin:0;border-radius:16px} .fall__zeichen svg{width:26px;height:26px} .durchklick .fall b{font-size:1.125rem;line-height:1.2} .durchklick .fall:focus-visible{outline:3px solid var(--rahmen-akzent);outline-offset:3px} .durchklick__start{min-height:56px} } .vollbild__fuss button{min-height:56px} .vollbild__zurueck{width:56px} .vollbild__weiter{font-size:1.0625rem} .vollbild__zu{min-height:48px;padding:0 1.1rem} .vollbild__tipp button{width:44px;height:44px;margin:-10px -2px -10px 0} .vollbild__tipp{font-size:1rem;bottom:calc(env(safe-area-inset-bottom,0px) + 92px)} .vollbild button:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* Handy: Leisten und Kacheln eine Stufe größer (16.10.2026, „alles recht klein“) */ .vollbild__zaehler{font-size:.875rem} .vollbild__titel{font-size:1.1875rem} .vollbild__zu{font-size:1.125rem} .vollbild__weiter{font-size:1.125rem} .vollbild__tipp{font-size:1.0625rem} .vollbild__kopf{min-height:66px} @media (max-width:759px){ .durchklick .fall b{font-size:1.1875rem} .durchklick__start{font-size:1.125rem} } .vollbild__fuss .vollbild__weiter{font-size:1.125rem} .vollbild__zaehler{font-size:.9375rem} /* Sprechblase oben unter der Kopfleiste: verdeckt unten weder Eingabe noch Knöpfe */ .vollbild__tipp{top:calc(env(safe-area-inset-top,0px) + 76px);bottom:auto;transform:translateY(-14px) scale(.97)} .vollbild.zeigt-tipp .vollbild__tipp{transform:none} /* ───────────────────────────────────────────────────────────── Ausprobieren am Handy als Geschichte (16.10.2026): acht Folien, je eine große Aussage, ein Satz und ein kleines Bild, das die Funktion andeutet. Die volle Vorschau gibt es auf Wunsch („Selbst ausprobieren“). Ohne Bewegung (oder ohne Skript) steht jedes Bild fertig da. ───────────────────────────────────────────────────────────── */ .geschichte{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;color:var(--rahmen-tinte); background:radial-gradient(120% 55% at 50% 0%,#3B3328,transparent 70%),var(--rahmen)} /* taste-skill-ignore: Lichthof wie im dunklen Satzblock */ .geschichte::backdrop{background:rgba(9,11,13,.6)} .gs{display:flex;flex-direction:column;height:100%} .gs__kopf{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 12px) 10px 4px 18px} .gs__striche{flex:1;display:flex;gap:5px} .gs__striche li{flex:1;height:4px;border-radius:2px;overflow:hidden;background:rgba(236,238,241,.22)} .gs__striche i{display:block;height:100%;background:var(--rahmen-tinte);transform:scaleX(0);transform-origin:0 50%} .gs__striche .ist-vorbei i,.gs__striche .ist-jetzt i{transform:none} .gs__zu{flex:none;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:rgba(236,238,241,.12);color:var(--rahmen-tinte);cursor:pointer} .gs__zu svg{width:22px;height:22px} .gs__bahn{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none} .gs__bahn::-webkit-scrollbar{display:none} .gs__folie{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,4svh,32px);padding:8px 20px 8px;overflow-y:auto;scroll-snap-align:center;scroll-snap-stop:always} .gs__titel{font-size:clamp(2rem,1.5rem + 2.4vw,2.5rem);line-height:1.04;font-weight:500;letter-spacing:-.035em;text-wrap:balance} .gs__titel .betont{color:var(--rahmen-akzent)} .gs__text p{margin-top:.65rem;color:var(--rahmen-leise);font-size:1.1875rem;line-height:1.4;text-wrap:pretty} .gs__fuss{display:grid;gap:10px;padding:8px 14px calc(env(safe-area-inset-bottom,0px) + 14px)} .gs__probe{display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;border:0;border-radius:999px;background:rgba(236,238,241,.1);color:var(--rahmen-tinte);font:600 1.0625rem/1 var(--font);cursor:pointer} .gs__probe svg{width:20px;height:20px;color:var(--rahmen-akzent)} .gs__nav{display:flex;gap:10px} .gs__zurueck,.gs__weiter{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:58px;border:0;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent} .gs__zurueck{flex:none;width:58px;background:rgba(236,238,241,.12);color:var(--rahmen-tinte)} .gs__zurueck:disabled{opacity:.3} .gs__weiter{flex:1;background:var(--night-accent);color:var(--night);font:600 1.1875rem/1 var(--font)} .gs__zurueck svg,.gs__weiter svg{width:22px;height:22px} .gs__probe:active,.gs__zurueck:active,.gs__weiter:active,.gs__zu:active{transform:scale(.97)} .geschichte button:focus-visible{outline:3px solid var(--rahmen-akzent);outline-offset:3px} /* Das kleine Bild: helle Karte wie ein Bildschirm, große Schrift */ .gs__bild{position:relative;display:grid;gap:12px;align-content:center;min-height:min(44svh,330px);padding:18px;border-radius:28px;background:var(--bg);color:var(--ink);font-size:1.0625rem;line-height:1.4; box-shadow:inset 0 0 0 1px rgba(255,159,28,.12),0 34px 70px -34px rgba(0,0,0,.7)} /* taste-skill-ignore: Karte schwebt über dem dunklen Grund */ .gs-blase{justify-self:end;max-width:86%;padding:12px 16px;border-radius:20px 20px 6px 20px;background:var(--signal);color:var(--on-accent)} .gs-antwort{position:relative} .gs-karte{display:grid;gap:10px;padding:14px 16px;border-radius:18px;background:var(--surface)} .gs-karte--leer{grid-template-columns:auto 1fr;align-items:center;box-shadow:inset 0 0 0 1.5px var(--line)} /* taste-skill-ignore: leere Antwort als Umriss */ .gs-zeichen{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--mark);color:var(--accent)} .gs-zeichen svg{width:24px;height:24px} .gs-chip{display:inline-flex;align-items:center;gap:.4rem;justify-self:start;padding:5px 12px;border-radius:999px;background:var(--mark);color:var(--accent);font-size:.9375rem;font-weight:600;white-space:nowrap} .gs-chip svg{width:16px;height:16px} .gs-chip--amber{background:var(--amber-weich);color:var(--amber)} .gs-zitat{padding:12px 14px;border-radius:14px;background:var(--surface-2);color:var(--muted);font-size:.9375rem} .gs-streich{color:var(--ink);background:linear-gradient(var(--mark),var(--mark)) no-repeat 0 0 / 100% 100%;padding:0 .1em} /* taste-skill-ignore: Textmarker */ .gs-notiz{justify-self:center;color:var(--muted);font-size:.9375rem;font-weight:600} .gs-klein{display:flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.9375rem;font-weight:600} .gs-klein svg{width:18px;height:18px;color:var(--accent)} .gs-liste{display:grid;gap:8px} .gs-liste li{position:relative;padding-left:20px} .gs-liste li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--signal)} .gs-betreff{font-size:1.1875rem;font-weight:600;letter-spacing:-.01em} .gs-linie{display:block;height:10px;width:var(--b,90%);border-radius:5px;background:var(--surface-2);transform-origin:0 50%} .gs-reihe{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .gs-spieler{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--surface)} .gs-spieler--innen{background:var(--bg)} .gs-play{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--signal);color:var(--on-accent)} .gs-play svg{width:20px;height:20px;margin-left:2px} .gs-welle{flex:1;display:flex;align-items:center;gap:3px;height:34px} .gs-welle i{flex:1;height:30%;border-radius:2px;background:var(--signal);opacity:.55} .gs-welle i:nth-child(3n){height:70%}.gs-welle i:nth-child(4n+1){height:45%}.gs-welle i:nth-child(5n+2){height:90%} .gs-zeit{flex:none;color:var(--muted);font-size:.9375rem;font-variant-numeric:tabular-nums} .gs-abschrift{display:grid;gap:4px} .gs-abschrift li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:8px;padding:8px 10px;border-radius:12px} .gs-abschrift span{color:var(--accent);font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums;padding-top:.1em} .gs-leucht{background:var(--mark)} .gs-schalter{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 0} .gs-schalter + .gs-schalter{border-top:1px solid var(--line);padding-top:12px} .gs-kipp{position:relative;flex:none;width:52px;height:32px;border-radius:999px;background:var(--signal)} .gs-kipp::after{content:"";position:absolute;top:3px;left:23px;width:26px;height:26px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 6px rgba(0,0,0,.25)} /* taste-skill-ignore: Schalterknopf */ .gs-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--surface-2);font-weight:600;text-align:center} .gs-seg span:not(.gs-seg__wahl){position:relative;z-index:1;padding:10px 0} .gs-seg__wahl{position:absolute;top:4px;bottom:4px;left:calc(50% + 0px);width:calc(50% - 4px);border-radius:999px;background:var(--bg);box-shadow:0 2px 8px rgba(0,0,0,.12)} /* taste-skill-ignore: Auswahl im Segment */ .gs-akten{display:grid;gap:6px} .gs-akten li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--surface)} .gs-ak{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--mark);color:var(--accent)} .gs-ak svg,.gs-ok svg,.gs-schloss svg{width:20px;height:20px} .gs-ok{color:var(--accent)} .gs-schloss{color:var(--muted)} .gs-weg{opacity:.4} .gs-zahl{justify-self:center;display:flex;align-items:baseline;gap:.5rem;color:var(--muted);font-weight:600} .gs-zahl b{font-size:2.5rem;line-height:1;color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums} .gs-blaetter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none} .gs-blatt{width:58px;height:76px;border-radius:10px;background:var(--surface);box-shadow:0 10px 24px -10px rgba(0,0,0,.35);opacity:0; /* taste-skill-ignore: Blätter fliegen in die Karte */ background-image:linear-gradient(var(--surface-2),var(--surface-2)),linear-gradient(var(--surface-2),var(--surface-2)),linear-gradient(var(--surface-2),var(--surface-2)); /* taste-skill-ignore: Zeilen auf dem Blatt */ background-size:60% 6px,70% 6px,45% 6px;background-position:10px 14px,10px 28px,10px 42px;background-repeat:no-repeat} .gs-punkte{position:absolute;left:0;top:0;display:flex;gap:6px;padding:16px 18px;border-radius:18px;background:var(--surface);opacity:0} .gs-punkte i{width:9px;height:9px;border-radius:50%;background:var(--muted)} /* Bewegung nur auf der aktiven Folie, jedes Mal von vorn */ @media (prefers-reduced-motion:no-preference){ .gs__striche .ist-jetzt i{animation:gs-strich 3.2s linear backwards} .gs__folie.ist-aktiv .gs-a{animation:gs-auf .55s var(--ease-out) backwards;animation-delay:var(--t,0s)} .gs__folie.ist-aktiv .gs-punkte{animation:gs-denkt 1s ease both;animation-delay:var(--t,0s)} .gs__folie.ist-aktiv .gs-punkte i{animation:gs-hupf .6s ease-in-out infinite} .gs__folie.ist-aktiv .gs-punkte i:nth-child(2){animation-delay:.12s}.gs__folie.ist-aktiv .gs-punkte i:nth-child(3){animation-delay:.24s} .gs__folie.ist-aktiv .gs-puls{animation:gs-puls 1.2s var(--ease-out) backwards;animation-delay:var(--t,0s)} .gs__folie.ist-aktiv .gs-streich{animation:gs-streich .9s var(--ease-out) backwards;animation-delay:var(--t,0s)} .gs__folie.ist-aktiv .gs-blatt{animation:gs-blatt 1.5s var(--ease-out) both;animation-delay:var(--t,0s)} .gs__folie.ist-aktiv .gs-linie{animation:gs-linie .5s var(--ease-out) backwards;animation-delay:var(--t,0s)} .gs__folie.ist-aktiv .gs-welle i{animation:gs-welle 1s ease-in-out infinite alternate} .gs__folie.ist-aktiv .gs-welle i:nth-child(2n){animation-delay:.2s}.gs__folie.ist-aktiv .gs-welle i:nth-child(3n){animation-delay:.45s}.gs__folie.ist-aktiv .gs-welle i:nth-child(5n){animation-delay:.1s} .gs__folie.ist-aktiv .gs-leucht{animation:gs-auf .55s var(--ease-out) backwards,gs-leucht 1s ease backwards;animation-delay:var(--t,0s),calc(var(--t,0s) + .9s)} .gs__folie.ist-aktiv .gs-kipp{animation:gs-kipp-grund .35s ease backwards;animation-delay:var(--t,0s)} .gs__folie.ist-aktiv .gs-kipp::after{animation:gs-kipp .35s var(--ease-out) backwards;animation-delay:var(--t,0s)} .gs__folie.ist-aktiv .gs-seg__wahl{animation:gs-seg .5s var(--ease-out) backwards;animation-delay:var(--t,0s)} .gs__folie.ist-aktiv .gs-weg{animation:gs-weg .6s ease backwards;animation-delay:var(--t,0s)} .gs__folie.ist-aktiv .gs-schloss{animation:gs-auf .45s var(--ease-out) backwards;animation-delay:calc(var(--t,0s) + .4s)} .gs__folie.ist-aktiv .gs__titel,.gs__folie.ist-aktiv .gs__text p{animation:gs-auf .6s var(--ease-out) backwards} .gs__folie.ist-aktiv .gs__text p{animation-delay:.12s} } @keyframes gs-strich{from{transform:scaleX(0)}} @keyframes gs-auf{from{opacity:0;transform:translateY(14px) scale(.97)}} @keyframes gs-denkt{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}} @keyframes gs-hupf{0%,100%{transform:none}50%{transform:translateY(-4px)}} @keyframes gs-puls{0%{box-shadow:0 0 0 0 rgba(255,159,28,.45)}100%{box-shadow:0 0 0 14px rgba(255,159,28,0)}} @keyframes gs-streich{from{background-size:0% 100%}} @keyframes gs-blatt{0%{opacity:0;transform:translateY(-16px) rotate(-6deg)}20%{opacity:1;transform:none}65%{opacity:1;transform:none}100%{opacity:0;transform:translateY(60px) scale(.5)}} @keyframes gs-linie{from{transform:scaleX(0)}} @keyframes gs-welle{from{transform:scaleY(.35)}to{transform:scaleY(1.1)}} @keyframes gs-leucht{from{background-color:transparent}} @keyframes gs-kipp-grund{from{background:var(--surface-2)}} @keyframes gs-kipp{from{left:3px}} @keyframes gs-seg{from{left:4px}} @keyframes gs-weg{from{opacity:1}} @media (max-height:700px){ .gs__bild{min-height:0;padding:14px;gap:10px} .gs__titel{font-size:1.75rem} .gs__text p{font-size:1.0625rem} } /* Die Geschichte liegt im dunklen Abschnitt: dessen Absatzfarbe gilt nicht in der hellen Karte */ .feld-dunkel .geschichte p{color:inherit} .geschichte .gs__text p{color:var(--rahmen-leise)} .geschichte p.gs-blase{color:var(--on-accent)} .geschichte p.gs-notiz,.geschichte p.gs-klein,.geschichte p.gs-zahl,.geschichte p.gs-zitat{color:var(--muted)} .geschichte p.gs-zitat{color:var(--ink)} /* Handy: „Was im Büro läuft“ entfällt (16.10.2026), die Geschichte unter „Ausprobieren“ zeigt dasselbe einfacher */ @media (max-width:759px){#im-buero{display:none}} /* ── Handy: alle acht Abläufe ausgeklappt untereinander (16.10.2026). Jeder spielt seine kleine Animation, sobald er ins Bild scrollt. Am Desktop bleibt das Fenster. ── */ .ablaeufe{display:none} @media (max-width:759px){ .durchklick__faelle,.durchklick__start{display:none} .ablaeufe{display:grid;gap:clamp(48px,9svh,72px);margin-top:8px} .ablaeufe .gs__folie{display:flex;flex-direction:column;justify-content:flex-start;gap:20px;padding:0;overflow:visible;scroll-snap-align:none} .ablaeufe .gs__bild{min-height:0} .ablaeufe .gs__titel{font-size:clamp(1.9rem,1.5rem + 2vw,2.3rem)} } .feld-dunkel .ablaeufe p{color:inherit} .ablaeufe .gs__text p{color:var(--rahmen-leise)} .ablaeufe p.gs-blase{color:var(--on-accent)} .ablaeufe p.gs-notiz,.ablaeufe p.gs-klein,.ablaeufe p.gs-zahl{color:var(--muted)} .ablaeufe p.gs-zitat{color:var(--ink)} /* bis ein Ablauf ins Bild kommt, wartet sein Inhalt unsichtbar (nur mit Skript und Bewegung) */ @media (prefers-reduced-motion:no-preference){ .ablaeufe.ist-bereit .gs__folie:not(.ist-aktiv) .gs__bild > *, .ablaeufe.ist-bereit .gs__folie:not(.ist-aktiv) .gs__text{opacity:0} .ablaeufe.ist-bereit .gs__folie .gs__bild{transition:transform .7s var(--ease-out),opacity .5s ease} .ablaeufe.ist-bereit .gs__folie:not(.ist-aktiv) .gs__bild{transform:translateY(24px) scale(.97);opacity:.6} } /* ── Handy, Gerät oben (16.10.2026): wenig Info, große Schrift. Bleibt: Titel, Kugel, Eingabe, zwei Beispielfragen. Weg: Untertitel, Themen, Fußzeile, Zusatz im Kopf, schwebende Karte. Weg am Handy auch „So entsteht eine Antwort“. ── */ @media (max-width:759px){ .kugel__gruss p,.kugel__themen,.geraet__fuss,.geraet__art,.geraet__trenn,.geraet__leise,.held__karten{display:none} section[aria-labelledby="ablauf-titel"]{display:none} .kugel__titel{font-size:2rem;line-height:1.08} .kugel__fragen{gap:.7rem} .kugel__fragen button{width:100%;justify-content:space-between;min-height:58px;padding:.65rem 1rem .65rem 1.25rem;border-radius:22px;font-size:1.125rem;line-height:1.25} .kugel__fragen svg{width:22px;height:22px} .kugel__kopfzeile{font-size:15px} .kugel__text{font-size:17px;line-height:1.45} .kugel__fund button{font-size:15px;min-height:44px;padding:.5rem .85rem} .kugel__zitat{font-size:15px} .kugel__neu{font-size:16px;min-height:48px;padding:0 1.25rem} } @media (max-width:759px){.geraet__kopf > .geraet__art{display:none}} /* ── Handy: „Verschwiegenheit eingebaut“ größer (19.10.2026). Nur die Einstellungs-Karte, groß wie in iOS; die Erklärungen daneben entfallen, die Kurzinfo steht in jeder Zeile. Die Aufbau-Animation bleibt. ── */ @media (max-width:759px){ .tafel__links,.tafel__rechts{display:none} .tafel__feld{max-width:none;margin-bottom:0} .tafel__feld .ui{border-radius:24px} .tafel__feld .ui__leiste{padding:1rem 1.25rem;font-size:16px} .tafel__feld .ui__leiste b{font-size:18px} .tafel__feld .ui__chip{font-size:15px;padding:.3rem .75rem} .tafel__feld .ui__inhalt{padding:.25rem 1.25rem} .tafel__feld .ui__schalter{gap:1.25rem;padding:1.35rem 0} .tafel__feld .ui__schalter > span{font-size:18px;line-height:1.3} .tafel__feld .ui__schalter small{font-size:15px;margin-top:.2rem} .tafel .ui__kipp{width:52px;height:32px} .tafel .ui__kipp::after{top:3px;left:3px;width:26px;height:26px;box-shadow:0 2px 5px rgba(0,0,0,.2)} /* taste-skill-ignore: Schalterknopf */ .tafel .ui__kipp--an::after,.tafel.ist-gebaut .ui__kipp--an::after{left:23px} } /* ───────────────────────────────────────────────────────────── Startseite für Betriebe (19.10.2026), Gliederung angelehnt an kiberatung.de, Stil wie die übrige Seite: Hellgrau, Anthrazit, Orange, kursiver Akzent, rund, wenig Text. ───────────────────────────────────────────────────────────── */ .kopf-betrieb-huelle{padding-top:clamp(.5rem,1vw,1rem)} .kopf-betrieb{display:grid;justify-items:center;text-align:center;gap:1.25rem} .pille{display:inline-flex;align-items:center;gap:.5rem;min-height:36px;padding:0 1rem 0 .85rem;border-radius:999px;background:rgba(255,159,28,.12);color:var(--rahmen-akzent);font-size:var(--step-small);font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,159,28,.22)} /* taste-skill-ignore: Schild auf dem dunklen Feld */ .pille svg{width:18px;height:18px} .kopf-betrieb__titel{font-size:var(--step-display);line-height:1.02;letter-spacing:-.035em;color:var(--rahmen-tinte);max-width:16ch} .kopf-betrieb__titel .zeile{display:block} .feld-dunkel .kopf-betrieb__satz{max-width:34ch;color:var(--rahmen-leise);font-size:var(--step-lead);line-height:1.35} .kopf-betrieb__zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,780px);margin:clamp(1.25rem,1rem + 2vw,2.5rem) 0 0} .kopf-betrieb__zahlen > div{padding:.25rem 1rem} .kopf-betrieb__zahlen > div + div{box-shadow:-1px 0 0 rgba(236,238,241,.18)} /* taste-skill-ignore: Trenner der Zahlenreihe */ .kopf-betrieb__zahlen dt{color:var(--rahmen-tinte);font-size:clamp(2rem,1.3rem + 2.6vw,3.75rem);line-height:1;letter-spacing:-.04em;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap} .kopf-betrieb__zahlen dd{margin:.55rem 0 0;color:var(--rahmen-leise);font-size:var(--step-small)} .feld-dunkel .kopf-betrieb__fuss{color:var(--rahmen-leise);font-size:var(--step-small)} .kopf-betrieb__fuss a{color:var(--rahmen-akzent);font-weight:600;text-underline-offset:.2em} .abschnitt-mitte{max-width:22ch;margin:0 auto clamp(2rem,1.5rem + 2vw,3.5rem);text-align:center;font-size:var(--step-head);line-height:1.04;letter-spacing:-.03em} .abschnitt-mitte__mehr{display:flex;justify-content:center;margin-top:1.5rem} /* Studienzahlen */ .studien{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spalt);max-width:1280px;margin-inline:auto} .studien li{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:.6rem;padding:clamp(1.25rem,1rem + 1vw,1.75rem);border-radius:var(--rund-gross);background:var(--surface)} .studien__zahl{color:var(--accent);font-size:clamp(2.25rem,1.6rem + 2vw,3.25rem);line-height:1;letter-spacing:-.04em;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} .studien p{font-size:var(--step-body);line-height:1.35} .studien__quelle{align-self:end;color:var(--muted);font-size:var(--step-small);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.2em;min-height:44px;display:inline-flex;align-items:flex-end} .studien__fussnote{max-width:60ch;margin:1.25rem auto 0;text-align:center;color:var(--muted);font-size:var(--step-small)} /* Woran KI scheitert */ .huerden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spalt);max-width:1100px;margin-inline:auto;counter-reset:none} .huerden li{display:grid;align-content:start;gap:.55rem;padding:clamp(1.25rem,1rem + 1.2vw,2rem);border-radius:var(--rund-gross);background:var(--surface)} .huerden__nr{color:var(--accent);font-size:var(--step-small);font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums} .huerden b{font-size:var(--step-lead);line-height:1.2;letter-spacing:-.015em;font-weight:600} .huerden p{display:flex;gap:.55rem;align-items:flex-start;color:var(--muted)} .huerden p svg{flex:none;width:22px;height:22px;margin-top:.15em;color:var(--accent)} .huerden small{color:var(--muted);font-size:var(--step-small);border-top:1px solid var(--line);padding-top:.6rem;margin-top:.2rem} /* Was wir machen: vier Bausteine mit kleinem, bewegtem Bild (Klassen der Abläufe-Folien) */ .bausteine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spalt);max-width:1180px;margin-inline:auto} .bausteine .gs__folie{flex:none;display:flex;flex-direction:column;justify-content:flex-start;gap:20px;padding:16px 16px 24px;overflow:visible;border-radius:30px;background:var(--surface)} .bausteine .gs__bild{min-height:250px;background:var(--bg);box-shadow:none} .bausteine .gs__text{padding-inline:6px} .bausteine .gs__titel{color:var(--ink);font-size:clamp(1.6rem,1.3rem + 1.2vw,2.1rem)} .bausteine .gs__titel .betont{color:var(--accent)} .bausteine .gs__text p{color:var(--muted)} .bausteine p.gs-blase{color:var(--on-accent)} .gs-knopf{justify-self:start;display:inline-flex;align-items:center;min-height:40px;padding:0 1.1rem;border-radius:999px;background:var(--signal);color:var(--on-accent);font-weight:600;font-size:.9375rem} .gs-meldung{justify-self:end;display:flex;align-items:center;gap:.5rem;padding:10px 14px;border-radius:16px;background:var(--surface);font-weight:600;font-size:.9375rem;box-shadow:0 12px 26px -14px rgba(0,0,0,.35)} /* taste-skill-ignore: Benachrichtigung schwebt */ .gs-meldung svg{width:18px;height:18px;color:var(--accent)} /* Vier Schritte */ .schritte4{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spalt);max-width:1180px;margin-inline:auto} .schritte4::before{content:"";position:absolute;top:27px;left:12.5%;right:12.5%;height:2px;background:var(--line)} .schritte4 li{position:relative;display:grid;justify-items:center;gap:.5rem;text-align:center;padding-inline:.5rem} .schritte4__nr{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--signal);color:var(--on-accent);font-size:1.25rem;font-weight:600;box-shadow:0 0 0 8px var(--bg)} /* taste-skill-ignore: Abstand zur Linie */ .schritte4 b{margin-top:.4rem;font-size:var(--step-lead);font-weight:600;letter-spacing:-.015em} .schritte4 p{max-width:24ch;color:var(--muted)} /* Anwendungen */ .anwendungen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spalt);max-width:1280px;margin-inline:auto} .anwendungen li{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:.45rem;padding:clamp(1.1rem,1rem + .6vw,1.5rem);border-radius:var(--rund-gross);background:var(--surface);transition:translate var(--t-ui) var(--ease-out)} .anwendungen svg{width:48px;height:48px;padding:11px;border-radius:15px;background:var(--mark);color:var(--accent);margin-bottom:.35rem} .anwendungen b{font-size:var(--step-body);line-height:1.25} .anwendungen span{color:var(--muted);font-size:var(--step-small)} @media (hover:hover) and (pointer:fine){.anwendungen li:hover,.studien li:hover,.huerden li:hover{translate:0 -4px}} .studien li,.huerden li{transition:translate var(--t-ui) var(--ease-out)} /* Hinweis auf Kanzleien & Praxen */ .kanzlei-hinweis{display:grid;justify-items:center;gap:1.1rem;text-align:center} .kanzlei-hinweis__zeichen{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:var(--rahmen-akzent);color:var(--rahmen)} .kanzlei-hinweis__zeichen svg{width:30px;height:30px} .kanzlei-hinweis h2{max-width:20ch;font-size:var(--step-head);line-height:1.04;letter-spacing:-.03em;color:var(--rahmen-tinte)} .feld-dunkel .kanzlei-hinweis p,.kanzlei-hinweis p{max-width:40ch;font-size:var(--step-lead);line-height:1.35} @media (max-width:1099px){ .studien,.anwendungen{grid-template-columns:repeat(2,minmax(0,1fr))} .schritte4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.5rem} .schritte4::before{display:none} } @media (max-width:759px){ .kopf-betrieb__titel{font-size:clamp(2.6rem,1.6rem + 6vw,3.4rem)} .kopf-betrieb__zahlen{grid-template-columns:minmax(0,1fr);gap:1.25rem} .kopf-betrieb__zahlen > div + div{box-shadow:none} .huerden,.bausteine{grid-template-columns:minmax(0,1fr)} .huerden small{display:none} .schritte4{grid-template-columns:minmax(0,1fr);row-gap:1.75rem} .schritte4 li{grid-template-columns:56px 1fr;justify-items:start;text-align:left;column-gap:1rem;row-gap:.2rem;padding:0} .schritte4__nr{grid-row:span 2} .schritte4 b{margin-top:.6rem} .anwendungen li{grid-template-rows:auto auto;grid-row:auto} .anwendungen span{display:none} .studien li{grid-row:auto;grid-template-rows:auto} .studien p{font-size:var(--step-small)} .abschnitt-mitte{font-size:clamp(2rem,1.4rem + 4vw,2.6rem)} } @media (max-width:420px){ .studien{grid-template-columns:minmax(0,1fr)} } /* Bausteine spielen ihr Bild, sobald sie ins Bild kommen (wie die Abläufe) */ @media (prefers-reduced-motion:no-preference){ .bausteine.ist-bereit .gs__folie:not(.ist-aktiv) .gs__bild > *{opacity:0} } /* ── Startseite für Betriebe, Ausbau 20.10.2026 (Text von Alex) ── */ .ergebnis__pilot{color:var(--rahmen-leise);font-size:var(--step-small)} .ergebnis__pilot b{color:var(--rahmen-tinte);font-variant-numeric:tabular-nums} .problem__liste{display:grid;gap:10px;max-width:780px;margin-inline:auto} .problem__liste li{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border-radius:var(--rund-gross);background:var(--surface);font-size:var(--step-body);line-height:1.35} .problem__liste svg{flex:none;width:44px;height:44px;padding:10px;border-radius:14px;background:var(--amber-weich);color:var(--amber)} .problem__schluss{max-width:34ch;margin:clamp(1.5rem,1rem + 2vw,2.5rem) auto 0;text-align:center;font-size:var(--step-lead);line-height:1.35} .loesungen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spalt);max-width:1280px;margin-inline:auto} .loesungen li{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:.5rem;padding:clamp(1.2rem,1rem + .8vw,1.6rem);border-radius:var(--rund-gross);background:var(--surface);transition:translate var(--t-ui) var(--ease-out)} .loesungen svg{width:50px;height:50px;padding:12px;border-radius:16px;background:var(--mark);color:var(--accent);margin-bottom:.35rem} .loesungen b{font-size:var(--step-body);line-height:1.25} .loesungen span{color:var(--muted);font-size:var(--step-small);line-height:1.45} /* Über uns: die vier Säulen, Anfangsbuchstaben ergeben ASCO */ .saeule__buchstabe{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:var(--signal);color:var(--on-accent);font:600 1.5rem/1 var(--font);font-style:normal;margin-bottom:.35rem} @media (hover:hover) and (pointer:fine){.loesungen li:hover,.berufe__karte:hover{translate:0 -4px}} .ansatz{display:grid;justify-items:center;gap:clamp(1.5rem,1rem + 2vw,2.5rem)} .ansatz h2{max-width:20ch;text-align:center;font-size:var(--step-head);line-height:1.04;letter-spacing:-.03em;color:var(--rahmen-tinte)} .ansatz__liste{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--spalt);width:100%;max-width:1200px} .ansatz__liste li{display:grid;align-content:start;gap:.45rem;padding:1.25rem;border-radius:22px;background:rgba(236,238,241,.06)} .ansatz__liste svg{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--rahmen-akzent);color:var(--rahmen)} .ansatz__liste b{color:var(--rahmen-tinte);font-size:var(--step-body);line-height:1.25} .feld-dunkel .ansatz__liste span{color:var(--rahmen-leise);font-size:var(--step-small);line-height:1.45} .feld-dunkel .ansatz__schluss{max-width:44ch;text-align:center;color:var(--rahmen-tinte);font-size:var(--step-lead);line-height:1.35} .zielgruppen__liste{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin-inline:auto} .zielgruppen__liste li{display:inline-flex;align-items:center;min-height:48px;padding:0 1.25rem;border-radius:999px;background:var(--surface);font-weight:600;box-shadow:inset 0 0 0 1px var(--line)} /* taste-skill-ignore: Umriss der Auswahl */ .zielgruppen__satz{max-width:52ch;margin:1.5rem auto 0;text-align:center;color:var(--muted)} .knopf--rand{box-shadow:inset 0 0 0 1px var(--line)} /* taste-skill-ignore: Rand für den hellen Knopf auf Stein */ .faq{display:grid;gap:10px;max-width:820px;margin-inline:auto} .faq details{border-radius:var(--rund-gross);background:var(--surface)} .faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:64px;padding:1rem 1.25rem;list-style:none;cursor:pointer;font-size:var(--step-body);font-weight:600} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";flex:none;width:.6em;height:.6em;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-.15em) rotate(45deg);transition:transform var(--t-ui) var(--ease-out)} .faq details[open] summary::after{transform:translateY(.15em) rotate(-135deg)} .faq details p{padding:0 1.25rem 1.25rem;color:var(--muted);max-width:62ch} .faq summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--rund-gross)} .berufe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spalt);max-width:1100px;margin-inline:auto} .berufe__karte{display:grid;align-content:start;gap:.6rem;padding:clamp(1.5rem,1rem + 2vw,2.5rem);border-radius:var(--rund-gross);background:var(--rahmen);color:var(--rahmen-tinte);text-decoration:none;transition:translate var(--t-ui) var(--ease-out)} .berufe__zeichen{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;background:var(--rahmen-akzent);color:var(--rahmen);margin-bottom:.4rem} .berufe__zeichen svg{width:28px;height:28px} .berufe__karte b{font-size:var(--step-lead);letter-spacing:-.015em} .berufe__karte > span:not(.berufe__zeichen):not(.berufe__mehr){color:var(--rahmen-leise)} .berufe__mehr{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;color:var(--rahmen-akzent);font-weight:600} .berufe__mehr::after{content:"";width:.5rem;height:.5rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)} .berufe__karte:focus-visible{outline:3px solid var(--accent);outline-offset:3px} @media (max-width:1099px){ .loesungen{grid-template-columns:repeat(2,minmax(0,1fr))} .ansatz__liste{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:759px){ .loesungen,.berufe,.ansatz__liste{grid-template-columns:minmax(0,1fr)} .loesungen li{grid-template-columns:50px minmax(0,1fr);grid-template-rows:auto auto;grid-row:auto;column-gap:1rem;row-gap:.2rem;align-items:start} .loesungen svg,.saeule__buchstabe{grid-row:span 2;margin:0} .loesungen span{font-size:1rem} .problem__liste li{font-size:1.0625rem} .zielgruppen__liste li{min-height:44px;font-size:1rem} } /* ── Arztpraxen (20.10.2026): eigenes Angebot, Dashboard mit Beispieldaten ── */ .feld-dunkel .arzt__einleitung{max-width:52ch;color:var(--rahmen-leise);font-size:var(--step-body)} .praxis{max-width:1100px;margin-inline:auto;padding:clamp(1rem,.8rem + 1vw,1.5rem);border-radius:30px;background:var(--rahmen);color:var(--rahmen-tinte); box-shadow:inset 0 0 0 1px rgba(255,159,28,.12)} /* taste-skill-ignore: Innenkante, der Schwebeschatten liegt auf .schwebe */ .praxis__kopf{display:flex;align-items:center;gap:.75rem;padding:.25rem .5rem 1rem} .praxis__kopf b{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--step-body)} .praxis__kopf b svg{width:22px;height:22px;color:var(--rahmen-akzent)} .praxis__monat{margin-left:auto;color:var(--rahmen-leise);font-size:var(--step-small)} .praxis__schild{display:inline-flex;align-items:center;min-height:28px;padding:0 .7rem;border-radius:999px;background:rgba(236,238,241,.1);color:var(--rahmen-leise);font-size:.8125rem;font-weight:600} .praxis__raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .praxis__kachel{display:grid;align-content:start;gap:.35rem;padding:1.1rem 1.2rem;border-radius:20px;background:rgba(236,238,241,.06)} .praxis__kachel--gross{grid-column:span 2;grid-row:span 2} .praxis__kachel--breit{grid-column:span 2} .praxis__kachel--frei{background:rgba(255,159,28,.14)} .praxis__etikett{color:var(--rahmen-leise);font-size:var(--step-small);font-weight:600} .praxis__zahl{color:var(--rahmen-tinte);font-size:clamp(2rem,1.5rem + 1.6vw,3rem);line-height:1;letter-spacing:-.04em;font-weight:600;font-variant-numeric:tabular-nums} .praxis__kachel--gross .praxis__zahl{font-size:clamp(2.6rem,1.8rem + 2.6vw,4.25rem)} .praxis__klein{color:var(--rahmen-leise);font-size:var(--step-small)} .praxis__teile{display:flex;gap:4px;height:12px;margin-top:auto;border-radius:999px;overflow:hidden} .praxis__teil{width:var(--w);border-radius:999px;transition:width .9s var(--ease-out)} .praxis__teil--ok{background:var(--rahmen-akzent)} .praxis__teil--offen{background:#E2B061} .praxis__legende{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;color:var(--rahmen-leise);font-size:var(--step-small)} .praxis__legende b{color:var(--rahmen-tinte);font-variant-numeric:tabular-nums} .praxis__punkt{display:inline-block;width:10px;height:10px;margin-right:.4rem;border-radius:50%} .praxis__punkt--ok{background:var(--rahmen-akzent)}.praxis__punkt--offen{background:#E2B061} .praxis__balken{display:grid;gap:.6rem;margin-top:.3rem} .praxis__balken li{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 3rem;align-items:center;gap:.75rem;font-size:var(--step-small)} .praxis__balken span{color:var(--rahmen-leise)} .praxis__balken i{display:block;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--rahmen-akzent) 0 var(--w),rgba(236,238,241,.1) var(--w) 100%)} /* taste-skill-ignore: Füllstand */ .praxis__balken b{text-align:right;font-variant-numeric:tabular-nums} .praxis__kurve{width:100%;height:80px;margin-top:.4rem} .praxis__flaeche{fill:rgba(255,159,28,.14)} .praxis__linie{fill:none;stroke:var(--rahmen-akzent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease-out)} .praxis__hinweis{max-width:64ch;margin:1rem auto 0;text-align:center;color:var(--muted);font-size:var(--step-small)} @media (prefers-reduced-motion:no-preference){ .praxis.ist-bereit:not(.ist-da) .praxis__teil{width:0} .praxis.ist-bereit:not(.ist-da) .praxis__balken i{--w:0%!important} .praxis.ist-bereit:not(.ist-da) .praxis__linie{stroke-dashoffset:1} .praxis.ist-bereit:not(.ist-da) .praxis__kachel{opacity:0;transform:translateY(14px)} .praxis.ist-bereit .praxis__kachel{transition:opacity .5s ease,transform .6s var(--ease-out);transition-delay:calc(var(--n,0) * 70ms)} } .arzt-loesungen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spalt);max-width:1280px;margin-inline:auto} .arzt-karte{display:grid;align-content:start;gap:.7rem;padding:clamp(1.3rem,1rem + 1vw,1.9rem);border-radius:var(--rund-gross);background:var(--surface)} .arzt-karte__zeichen{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:var(--mark);color:var(--accent)} .arzt-karte__zeichen svg{width:26px;height:26px} .arzt-karte h3{font-size:var(--step-lead);line-height:1.2;letter-spacing:-.015em;font-weight:600} .arzt-karte > p{color:var(--muted)} .arzt-karte__mehr summary{display:none} .arzt-karte__mehr ul{display:grid;gap:.45rem;padding-top:.25rem} .arzt-karte__mehr li{position:relative;padding-left:1.4rem;font-size:var(--step-small);line-height:1.4} .arzt-karte__mehr li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--signal)} .arzt-karte .arzt-karte__vorteil{margin-top:.3rem;padding:.8rem 1rem;border-radius:16px;background:var(--mark);color:var(--ink);font-size:var(--step-small);line-height:1.45} .arzt-karte .arzt-karte__grenze{color:var(--muted);font-size:.875rem;font-style:italic} .arzt-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spalt);max-width:1180px} .arzt-zwei__karte{display:grid;align-content:start;gap:.9rem;padding:clamp(1.5rem,1rem + 2vw,2.5rem);border-radius:var(--rund-gross);background:var(--surface)} .arzt-zwei__karte h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);line-height:1.08;letter-spacing:-.03em} .arzt-zwei__karte p{color:var(--muted)} .arzt-zwei__karte--dunkel{background:var(--rahmen);color:var(--rahmen-tinte)} .arzt-zwei__karte--dunkel h2{color:var(--rahmen-tinte)} .arzt-zwei__karte--dunkel .betont{color:var(--rahmen-akzent)} .arzt-zwei__karte--dunkel p{color:var(--rahmen-leise)} .arzt-zwei__karte--dunkel .arzt-karte__zeichen{background:var(--rahmen-akzent);color:var(--rahmen)} .schritte4--fuenf{grid-template-columns:repeat(5,minmax(0,1fr))} .schritte4--fuenf::before{left:10%;right:10%} .einladung__zeichen svg{color:var(--on-accent)} .arzt__kleingedruckt{max-width:70ch!important;margin-top:1rem;color:var(--muted);font-size:var(--step-small)!important} @media (max-width:1099px){ .arzt-loesungen{grid-template-columns:repeat(2,minmax(0,1fr))} .schritte4--fuenf{grid-template-columns:repeat(2,minmax(0,1fr))} .praxis__raster{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:759px){ .arzt-loesungen,.arzt-zwei{grid-template-columns:minmax(0,1fr)} .arzt-karte__mehr summary{display:flex;align-items:center;gap:.5rem;min-height:44px;color:var(--accent);font-weight:600;list-style:none;cursor:pointer} .arzt-karte__mehr summary::-webkit-details-marker{display:none} .arzt-karte__mehr summary::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg)} .arzt-karte__mehr[open] summary::after{transform:translateY(.1em) rotate(-135deg)} .arzt-karte__mehr li{font-size:1rem} .schritte4--fuenf{grid-template-columns:minmax(0,1fr)} .praxis{border-radius:24px;padding:.75rem} .praxis__raster{grid-template-columns:repeat(2,minmax(0,1fr))} .praxis__kachel{padding:.9rem 1rem} .praxis__kachel--gross,.praxis__kachel--breit{grid-column:1 / -1;grid-row:auto} .praxis__balken li{grid-template-columns:6.5rem minmax(0,1fr) 2.8rem} .praxis__monat{display:none} } /* Dashboard: Kurve in der großen Kachel; Preisschild als Reiter über der Karte (Beträge auf einer Linie) */ .praxis__kachel--gross{align-content:stretch;grid-template-rows:auto auto auto auto 1fr auto} .praxis__etikett--unten{margin-top:.8rem} .praxis__kachel--gross .praxis__kurve{align-self:end;height:96px} .praxis__kopf b{white-space:nowrap} /* Gleiche Linie: Beschreibungen beginnen auf einer Höhe, auch wenn ein Titel zwei Zeilen hat */ .schritte4 li{grid-template-rows:subgrid;grid-row:span 3;align-content:start} .schritte4 b{align-self:start} .ansatz__liste li{grid-template-rows:subgrid;grid-row:span 3} @media (max-width:759px){ .schritte4 li{grid-template-rows:auto auto;grid-row:auto} .ansatz__liste li{grid-template-rows:none;grid-row:auto} } /* Arzt-Karten: Titel, Einleitung, Funktionen und Vorteil je Reihe auf einer Linie */ .arzt-karte{grid-template-rows:subgrid;grid-row:span 6} @media (max-width:759px){.arzt-karte{grid-template-rows:none;grid-row:auto}} .zielgruppen__liste li{justify-content:center;text-align:center;padding-block:.4rem} /* Angebot statt Preisliste */ .angebot{display:grid;justify-items:center} .angebot .abschnitt-mitte{margin-bottom:1.25rem} .angebot__satz{max-width:44ch;text-align:center;color:var(--muted);font-size:var(--step-lead);line-height:1.45} .angebot__punkte{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:clamp(1.5rem,1rem + 1.5vw,2.25rem) 0} .angebot__punkte li{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.4rem 1.25rem .4rem .55rem;border-radius:999px;background:var(--surface);font-weight:600;box-shadow:inset 0 0 0 1px var(--line)} /* taste-skill-ignore: Umriss wie Zielgruppen */ .angebot__punkte svg{flex:none;width:32px;height:32px;padding:7px;border-radius:50%;background:var(--signal);color:var(--on-accent)} @media (max-width:759px){ .angebot__punkte{flex-direction:column;align-items:stretch;width:100%;max-width:400px} .angebot__punkte li{min-height:56px} } .angebot .abschnitt-mitte em{display:block} .praxis__schild{font-size:.875rem} /* Handy: „Ihr Unternehmen“ in einer Zeile, der kursive Teil darf zweizeilig werden */ @media (max-width:759px){.kopf-betrieb__titel{font-size:calc(5vw + 15.5px)}} /* Squircles: Ecken zwischen Kreis und Rundrechteck (Superellipse n = 5), wie bei Apple. Safari kennt corner-shape noch nicht, deshalb eine 9-teilige Maske. Die Ecke reicht 1,6-mal so weit wie der Radius. */ .problem__liste li,.vorteile__liste li,.studien li,.loesungen li,.faq details,.berufe__karte, .feld-dunkel,.rechner__ergebnis,.rechner__regler,.arzt-karte,.arzt-zwei__karte,.praxis__kachel, .fall,.gesteuert__halter,.illu{--sq:var(--rund-gross)} .ansatz__liste li{--sq:22px} .loesungen svg,.arzt-karte__zeichen{--sq:16px} .praxis{--sq:30px} .geraet{--sq:28px} .arzt-karte__vorteil{--sq:16px} .ui{--sq:14px} @supports (-webkit-mask-box-image:url(squircle.svg) 50 fill / 10px stretch){ :is(.problem__liste li,.vorteile__liste li,.studien li,.loesungen li,.ansatz__liste li,.faq details,.berufe__karte, .feld-dunkel,.rechner__ergebnis,.rechner__regler,.arzt-karte,.arzt-zwei__karte,.praxis,.praxis__kachel,.arzt-karte__vorteil, .fall,.geraet,.gesteuert__halter,.ui,.illu,.loesungen svg,.arzt-karte__zeichen){ -webkit-mask-box-image:url(squircle.svg) 50 fill / calc(var(--sq) * 1.6) stretch; } } /* Schwebeschatten als Filter auf der Hülle, damit die Squircle-Maske ihn nicht abschneidet; er folgt der Squircle-Form */ .schwebe{filter:drop-shadow(0 34px 34px rgba(0,0,0,.24))} @media (max-width:759px){.rechner > .rechner__regler{-webkit-mask-box-image:none}} /* die schwebende Ergebnisleiste ragt seitlich über das Formular */ /* Greifbar beim Scrollen: Produktbilder kippen beim Hereinscrollen aus der Schräge in die Fläche, als würde man sie in die Hand nehmen. Reine CSS-Scroll-Animation, nur ohne „Bewegung reduzieren“. */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ .schwebe,.rechner{perspective:1800px} .praxis,.rechner__ergebnis{transform-origin:50% 100%;animation:greifen linear both;animation-timeline:view();animation-range:cover 0% cover 45vh} .geraet{transform-origin:50% 0;animation:weggleiten linear both;animation-timeline:view();animation-range:exit 0% exit 100%} } } @keyframes greifen{from{rotate:x 18deg;scale:.9;translate:0 70px;opacity:.55}to{rotate:x 0deg;scale:1;translate:0 0;opacity:1}} @keyframes weggleiten{to{rotate:x -12deg;scale:.92;translate:0 -40px;opacity:.35}} /* Eine Idee pro Scroll: Der Problem-Abschnitt bleibt stehen, die fünf Punkte und der Schlusssatz erscheinen nacheinander einzeln und groß. Ohne Unterstützung bleibt es die normale Liste. */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()) and (view-timeline-name:--problem){ .problem{height:calc(6 * 55svh + 100svh);view-timeline:--problem block} .problem__buehne{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:center;justify-items:center;padding-block:clamp(4rem,10svh,7rem) clamp(2rem,6svh,4rem)} .problem__buehne > .abschnitt-mitte{margin-bottom:0;opacity:1;translate:none} .problem__liste{display:grid;place-items:center;width:100%;max-width:900px;grid-area:2/1} .problem__liste li,.problem__buehne > .problem__schluss{grid-area:1/1;animation:eine-idee linear both;animation-timeline:--problem; animation-range:contain calc(var(--i) * 100% / 6) contain calc((var(--i) + 1) * 100% / 6)} .problem__liste li{flex-direction:column;justify-content:center;gap:1.25rem;width:min(100%,640px);padding:clamp(2rem,1.5rem + 3vw,3.5rem);text-align:center;font-size:clamp(1.375rem,1.1rem + 1.4vw,2.125rem);line-height:1.2;letter-spacing:-.015em;font-weight:600} .problem__liste li svg{width:72px;height:72px;padding:18px;border-radius:22px} .problem__buehne > .problem__schluss{--i:5;grid-area:2/1;align-self:center;margin:0;max-width:24ch;font-size:clamp(1.5rem,1.2rem + 1.6vw,2.5rem);font-weight:600;letter-spacing:-.02em} .problem__buehne > .problem__schluss{animation-name:letzte-idee} } } @keyframes eine-idee{0%{opacity:0;translate:0 60px;scale:.94}22%,78%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 -60px;scale:.96}} @keyframes letzte-idee{0%{opacity:0;translate:0 60px;scale:.94}30%,100%{opacity:1;translate:0 0;scale:1}} .kopf-betrieb__titel{max-width:24ch} /* ── 247-Bühne (Startseite, ganz oben, seit 29.10.2026): der Leitsatz als Film ───────────── Grundform: sechs Szenen ruhig untereinander (ohne Skript, bei „Bewegung reduzieren“). Mit .ist-aktiv (effekte.js) steht die Bühne, der Scrollweg spielt die Szenen nacheinander ab. Das Skript schreibt je Szene --o (Deckkraft) und --s (Fortschritt), dazu --tag (Uhr), --woche (Tage) und --wort (Name); die Ziffern 24 und 7 fliegen per translate/scale. */ .b247{--o:1;--s:1;padding-top:clamp(.5rem,1vw,1rem)} .b247__flaeche{position:relative;margin-inline:var(--rand);border-radius:clamp(14px,1.6vw,26px);overflow:hidden;color:var(--rahmen-tinte); background:radial-gradient(60% 55% at 50% 42%,rgba(255,159,28,.12),transparent 72%),var(--rahmen); /* taste-skill-ignore: Lichthof hinter der 247 */ display:grid;gap:clamp(5rem,3rem + 6vw,9rem);padding:clamp(3.5rem,2rem + 6vw,8rem) clamp(1.25rem,1rem + 4vw,5rem)} .b247__szene{--tag:1;--woche:1;--wort:1;position:relative;z-index:1;display:grid;justify-items:center;align-content:center;text-align:center;gap:clamp(.9rem,.6rem + .8vw,1.4rem)} .b247__etikett{font-size:var(--step-small);font-weight:600;letter-spacing:.02em;color:var(--rahmen-akzent)} .b247__zahl{display:flex;justify-content:center;font-size:min(calc(1rem + 30vw),42svh);font-weight:600;line-height:.8;letter-spacing:-.065em;color:var(--signal); text-shadow:0 0 .22em rgba(255,159,28,.28);font-variant-numeric:lining-nums;margin-block:.04em} /* taste-skill-ignore: Leuchten der 247 */ .b247__24,.b247__7{display:block} .b247__titel{font-size:var(--step-head);line-height:1.04;max-width:18ch;color:var(--rahmen-tinte)} .b247__unter{font-size:var(--step-lead);line-height:1.3;color:var(--rahmen-leise);max-width:42ch;text-wrap:balance} .b247__hinweis,.b247__weiter{display:none} /* 2 · 24 Stunden: Zifferblatt mit Tagesbogen, Uhrzeit, Beispiel einer Nacht */ .b247__szene--tag{--licht:.6} .b247__szene--tag::before{content:"";position:absolute;inset:-10%;z-index:-1;pointer-events:none;opacity:var(--licht); background:radial-gradient(45% 55% at 32% 45%,rgba(255,159,28,.22),transparent 70%)} /* taste-skill-ignore: Tageslicht folgt der Uhrzeit */ .b247__uhr{position:relative;width:min(100%,clamp(240px,30vw,430px));aspect-ratio:1;display:grid;place-items:center} .b247__zifferblatt{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .b247__ring{fill:none;stroke:rgba(236,238,241,.12);stroke-width:2} .b247__striche line{stroke:rgba(236,238,241,.34);stroke-width:1.6;stroke-linecap:round} .b247__striche .lang{stroke:rgba(236,238,241,.72);stroke-width:2.4} .b247__stunden text{fill:var(--rahmen-leise);font:600 11px var(--font);text-anchor:middle} .b247__bogen{fill:none;stroke:var(--signal);stroke-width:6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--tag) * 100);opacity:clamp(0,calc(var(--tag) * 60),1)} .b247__zeiger{transform-origin:110px 110px;transform:rotate(calc(var(--tag) * 360deg))} .b247__zeiger circle{fill:var(--signal);filter:drop-shadow(0 0 6px rgba(255,159,28,.85))} .b247__ziel{display:block;font-weight:600;line-height:.8;letter-spacing:-.065em;color:var(--signal);font-variant-numeric:lining-nums} .b247__ziel--24{font-size:clamp(4.25rem,1rem + 7.5vw,8.5rem);translate:-.03em -.06em} .b247__uhrzeit{position:absolute;left:50%;top:65%;translate:-50% 0;padding:.45rem .85rem;border-radius:999px;background:rgba(236,238,241,.08); font:600 var(--step-small)/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--rahmen-tinte)} .b247__text{display:grid;gap:.9rem;justify-items:inherit;max-width:34rem} .b247__satz{font-size:var(--step-head);line-height:1.04;letter-spacing:-.03em;color:var(--rahmen-tinte)} .b247__klein{margin-top:.6rem;font-size:var(--step-small);color:var(--rahmen-leise)} .b247__protokoll{display:grid;gap:.5rem;width:100%;max-width:30rem;text-align:left} .b247__protokoll li,.b247__protokoll-zeile{display:flex;align-items:baseline;gap:.8rem;padding:.65rem .95rem;border-radius:14px;background:rgba(236,238,241,.06);font-size:var(--step-small);line-height:1.35;color:var(--rahmen-tinte)} .b247__protokoll li{--an:clamp(0,calc((var(--tag) - var(--t)) * 40),1);opacity:var(--an);translate:0 calc((1 - var(--an)) * 14px)} .b247__protokoll time,.b247__protokoll-zeile time{flex:none;font-weight:600;font-variant-numeric:tabular-nums;color:var(--rahmen-akzent)} @media (min-width:900px){ .b247__szene--tag{grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-items:start;align-items:center;column-gap:clamp(2rem,5vw,6rem);text-align:left} .b247__szene--tag .b247__uhr{justify-self:end} } /* 3 · 7 Tage: Montag bis Sonntag leuchten nacheinander, das Wochenende eigens */ .b247__woche-kopf{display:flex;align-items:center;justify-content:center;gap:clamp(1.25rem,3.5vw,3.5rem);text-align:left} .b247__woche-kopf > div{display:grid;gap:.5rem} .b247__ziel--7{font-size:clamp(7rem,2rem + 13vw,14rem)} .b247__tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(.35rem,1vw,.9rem);width:min(100%,880px);margin-top:clamp(1rem,2.5vw,2.5rem)} .b247__tage li{--an:clamp(0,calc(var(--woche) * 7 - var(--i)),1);display:grid;gap:.6rem;justify-items:center} .b247__tage b{font-size:var(--step-body);font-weight:600;color:var(--rahmen-leise)} .b247__tage .ist-wochenende b{color:var(--rahmen-akzent)} .b247__tage i{position:relative;display:block;width:100%;height:clamp(64px,11svh,140px);border-radius:14px;overflow:hidden;background:rgba(236,238,241,.08)} .b247__tage .ist-wochenende i{box-shadow:inset 0 0 0 2px rgba(255,159,28,.6)} /* taste-skill-ignore: Rahmen markiert das Wochenende */ .b247__tage i::after{content:"";position:absolute;inset:0;background:var(--signal);transform-origin:50% 100%;scale:1 var(--an)} .b247__protokoll-zeile{opacity:clamp(0,calc((var(--woche) - .93) * 30),1)} /* 4 · Der Name: aus A S C O werden vier Felder, am Ende steht das Logo */ .b247__name{display:grid;gap:clamp(.35rem,1.1vw,.9rem);width:min(100%,760px);text-align:left} .b247__name li{--an:clamp(0,calc(var(--wort) * 4 - var(--i)),1);display:grid;grid-template-columns:clamp(2.8rem,5.5vw,5.25rem) minmax(0,1fr);align-items:center;gap:clamp(.75rem,2vw,1.5rem)} .b247__name b{font-size:clamp(2.6rem,1.5rem + 3.8vw,5.25rem);line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--signal)} .b247__name li > span{display:grid;gap:.1rem;clip-path:inset(0 calc((1 - var(--an)) * 100%) 0 0);opacity:calc(.25 + var(--an) * .75)} .b247__name li > span > span{font-size:clamp(1.7rem,1rem + 2.4vw,3.1rem);line-height:1.05;font-weight:500;letter-spacing:-.03em;color:var(--rahmen-tinte)} .b247__name small{font-size:var(--step-small);color:var(--rahmen-leise)} .b247__logo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1.1rem;margin-top:clamp(.75rem,2vw,1.75rem);color:var(--rahmen-tinte);opacity:clamp(0,calc((var(--wort) - .9) * 12),1)} .b247__logo .logo{display:block;width:auto;height:clamp(30px,3.6vw,48px)} .b247__logo span{font-size:var(--step-body);color:var(--rahmen-leise)} /* 5 · Botschaft und 6 · Haltung: Zeile für Zeile */ .b247__zeilen{display:grid;gap:.06em;font-size:clamp(2.4rem,1.2rem + 4.8vw,5.75rem);line-height:1.02;letter-spacing:-.04em;color:var(--rahmen-tinte)} .b247__werte{display:grid;gap:clamp(.4rem,1.2vw,1rem);font-size:clamp(1.85rem,1rem + 3.2vw,4rem);line-height:1.06;letter-spacing:-.035em;font-weight:500;color:var(--rahmen-tinte)} .b247__zeilen > span,.b247__werte li{--an:clamp(0,calc(var(--s) * 4.2 - var(--i) * 1.1),1);display:block;opacity:var(--an);translate:0 calc((1 - var(--an)) * .35em)} /* Mit Skript: die Bühne steht, die Szenen liegen übereinander */ .b247.ist-aktiv{height:760svh;padding-top:0} .b247.ist-aktiv .b247__buehne{position:sticky;top:0;height:100svh;padding-block:clamp(.5rem,1vw,1rem)} .b247.ist-aktiv .b247__flaeche{display:block;height:100%;padding:0} .b247.ist-aktiv .b247__szene{--o:0;position:absolute;inset:0;padding:clamp(3.5rem,8svh,6.5rem) clamp(1.25rem,1rem + 4vw,5rem);opacity:var(--o);pointer-events:none} .b247.ist-aktiv .b247__szene--start{opacity:1;--o:1} .b247.ist-aktiv .b247__szene--start > :not(.b247__zahl){opacity:var(--o)} .b247.ist-aktiv .b247__ziel{opacity:0} .b247.ist-aktiv .b247__24,.b247.ist-aktiv .b247__7{transform-origin:50% 50%} .b247.ist-aktiv .b247__hinweis{display:block;margin-top:clamp(.25rem,2.5svh,1.75rem);font-size:var(--step-small);color:var(--rahmen-leise)} .b247__hinweis span::after{content:"";display:block;width:2px;height:30px;margin:.55rem auto 0;border-radius:2px;background:linear-gradient(var(--signal),transparent); transform-origin:50% 0;animation:b247-hinweis 1.9s var(--ease-in-out) infinite} /* taste-skill-ignore: Laufstrich zeigt die Scrollrichtung */ @keyframes b247-hinweis{0%{scale:1 0;opacity:1}55%{scale:1 1;opacity:1}100%{scale:1 1;opacity:0}} .b247.ist-aktiv .b247__weiter{display:inline-flex;align-items:center;justify-content:center;position:absolute;z-index:3;right:clamp(.9rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.6rem); min-height:44px;padding:0 1.1rem;border-radius:999px;background:rgba(236,238,241,.1);color:var(--rahmen-tinte);font-size:var(--step-small);font-weight:600;text-decoration:none;transition:background var(--t-hover) var(--ease-out)} @media (hover:hover) and (pointer:fine){.b247.ist-aktiv .b247__weiter:hover{background:rgba(236,238,241,.18)}} .b247__weiter:focus-visible{outline:2px solid var(--signal);outline-offset:3px} @media (max-width:759px){ .b247__zahl{font-size:min(calc(1rem + 40vw),40svh)} .b247__uhr{width:min(66vw,300px)} .b247__ziel--24{font-size:clamp(3.6rem,14vw,5rem)} .b247__satz{font-size:clamp(2rem,1.3rem + 3.6vw,2.6rem)} .b247__protokoll li,.b247__protokoll-zeile{padding:.5rem .8rem;font-size:.9375rem} .b247.ist-aktiv .b247__szene--tag{gap:.7rem} .b247.ist-aktiv .b247__protokoll li:nth-child(n+4){display:none} .b247__woche-kopf{gap:1rem} .b247__tage b{font-size:.9375rem} }