/* Menni Art System von mikehillebrand.com — Schwarz, ein Neon-Akzent, gestapelte Sticker-Headlines, handschriftliches Overlay, geschwungene Linie, schwebende Pillen-Navigation. Farbwelt: Alabaster #F2EFE7 als Grund, Murrey #8B004A als Akzent. */ :root{ --schwarz: #F2EFE7; /* Alabaster - der Grund der ganzen Seite */ --schwarz-2: #E8E2D5; --neon: #8B004A; /* Murrey - der Akzent, ruhiger als Neon */ --weiss: #1D1419; /* Schrift auf hellem Grund */ --grau: #6E5C64; --linie: rgba(29,20,25,.16); --ease: cubic-bezier(.19,1,.22,1); --circ: cubic-bezier(.075,.82,.165,1); --rand: clamp(1.1rem, 3.5vw, 3rem); --breit: 1360px; --tropfenmaske: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2046%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200h240v4H0zM11.8%2C3C11.8%2C14.305500000000002%2012.556000000000001%2C26.01%2012.975999999999999%2C26.01A3.024%2C3.024%200%201%200%2019.024%2C26.01C19.444%2C26.01%2020.2%2C14.305500000000002%2020.2%2C3ZM38%2C3C38%2C5.5825000000000005%2038.54%2C10.15%2038.84%2C10.15A2.16%2C2.16%200%201%200%2043.16%2C10.15C43.46%2C10.15%2044%2C5.5825000000000005%2044%2C3ZM63%2C3C63%2C19.9375%2063.9%2C36.25%2064.4%2C36.25A3.5999999999999996%2C3.5999999999999996%200%201%200%2071.6%2C36.25C72.1%2C36.25%2073%2C19.9375%2073%2C3ZM89.6%2C3C89.6%2C3.6960000000000006%2090.032%2C6.720000000000001%2090.272%2C6.720000000000001A1.728%2C1.728%200%201%200%2093.728%2C6.720000000000001C93.968%2C6.720000000000001%2094.4%2C3.6960000000000006%2094.4%2C3ZM114.4%2C3C114.4%2C11.319%20115.048%2C20.58%20115.408%2C20.58A2.592%2C2.592%200%201%200%20120.592%2C20.58C120.952%2C20.58%20121.6%2C11.319%20121.6%2C3ZM143.4%2C3C143.4%2C17.396500000000003%20144.228%2C31.630000000000003%20144.688%2C31.630000000000003A3.312%2C3.312%200%201%200%20151.312%2C31.630000000000003C151.772%2C31.630000000000003%20152.6%2C17.396500000000003%20152.6%2C3ZM173.4%2C3C173.4%2C4.691500000000001%20173.868%2C8.530000000000001%20174.128%2C8.530000000000001A1.8719999999999999%2C1.8719999999999999%200%201%200%20177.872%2C8.530000000000001C178.132%2C8.530000000000001%20178.6%2C4.691500000000001%20178.6%2C3ZM196%2C3C196%2C13.31%20196.72%2C24.2%20197.12%2C24.2A2.88%2C2.88%200%201%200%20202.88%2C24.2C203.28%2C24.2%20204%2C13.31%20204%2C3ZM220.8%2C3C220.8%2C7.128000000000001%20221.376%2C12.96%20221.696%2C12.96A2.304%2C2.304%200%201%200%20226.304%2C12.96C226.624%2C12.96%20227.2%2C7.128000000000001%20227.2%2C3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); } /* Der helle Look ist inzwischen der Standard (siehe :root). Die Klasse body.hell bleibt bestehen, damit die Seiten sie weiter setzen duerfen. */ *,*::before,*::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth } body{ margin:0; background:var(--schwarz); color:var(--weiss); font-family:Archivo, system-ui, sans-serif; font-variation-settings:"wdth" 100,"wght" 380; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip; /* NICHT hidden: das macht den Body zum Scroll-Container und schneidet den Fuss ab */ padding-bottom:6rem; /* Platz für die schwebende Navigation */ } img,video,canvas,svg{ display:block; max-width:100% } h1,h2,h3,h4,p,figure,ul,ol,dl,blockquote{ margin:0 } ul{ list-style:none; padding:0 } a{ color:inherit; text-decoration:none } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer } ::selection{ background:var(--neon); color:var(--schwarz) } :focus-visible{ outline:2px solid var(--neon); outline-offset:4px } /* ---------- Typo ---------- */ .mikro{ font-size:clamp(.6rem,.55rem + .12vw,.7rem); letter-spacing:.22em; text-transform:uppercase; font-variation-settings:"wdth" 78,"wght" 640; color:var(--grau); } .mikro--neon{ color:var(--neon) } /* Sticker-Stapel: das Kernelement */ .sticker{ display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; z-index:2; /* Platz, damit die Farbnasen nicht in den Folgetext laufen */ padding-bottom:clamp(1.1rem, 4.6vw, 3.8rem); } .sticker--links{ align-items:flex-start; text-align:left } .sticker > span:not(.schrift):not(.kante){ display:inline-block; position:relative; font-variation-settings:"wdth" 66,"wght" 800; font-size:clamp(2.6rem, 11vw, 9rem); line-height:.9; letter-spacing:-.03em; text-transform:uppercase; background:var(--neon); color:var(--schwarz); padding:.1em .17em .04em; margin-top:-.1em; border-radius:.05em; white-space:nowrap; } .sticker--klein > span:not(.schrift):not(.kante){ font-size:clamp(2.1rem, 7.5vw, 5.2rem) } .sticker--klein{ padding-bottom:clamp(.9rem, 3.2vw, 2.2rem) } .neonflaeche .sticker > span:not(.schrift):not(.kante){ background:var(--schwarz); color:var(--neon) } /* Losung — Marker-Schrift als eigene Zeile, in Neon statt Weiß */ .losung{ font-family:"Permanent Marker", cursive; color:var(--neon); line-height:1.05; transform:rotate(-3deg); display:inline-block; font-size:clamp(1.4rem, 1rem + 2vw, 2.6rem); margin-top:1rem; } .neonflaeche .losung{ color:var(--schwarz) } .gross{ font-size:clamp(1rem,.9rem + .5vw,1.3rem); line-height:1.45; text-transform:uppercase; letter-spacing:.02em; font-variation-settings:"wdth" 96,"wght" 420; max-width:52ch; } .fliess{ color:var(--grau); max-width:62ch; font-size:clamp(1rem,.95rem + .25vw,1.1rem) } .fliess + .fliess{ margin-top:1em } .fliess strong{ color:var(--weiss); font-variation-settings:"wght" 640 } .h-m{ font-variation-settings:"wdth" 74,"wght" 760; font-size:clamp(1.6rem,1.2rem + 1.8vw,2.6rem); text-transform:uppercase; letter-spacing:-.02em; line-height:1; } .h-s{ font-variation-settings:"wdth" 82,"wght" 700; font-size:clamp(1.05rem,.95rem + .5vw,1.35rem); text-transform:uppercase; letter-spacing:-.01em; line-height:1.1; } /* ---------- Layout ---------- */ .bahn{ width:min(100% - 2*var(--rand), var(--breit)); margin-inline:auto } .abschnitt{ padding-block:clamp(3.5rem,9vw,8rem); position:relative } .abschnitt--eng{ padding-block:clamp(2.5rem,5vw,4.5rem); position:relative } .mitte{ text-align:center; display:grid; justify-items:center; gap:1.5rem } .neonflaeche{ background:var(--neon); color:var(--schwarz) } .neonflaeche .mikro{ color:rgba(242,239,231,.72) } .neonflaeche .fliess{ color:rgba(242,239,231,.82) } .neonflaeche .schrift{ color:var(--schwarz) } /* ---------- Auftakt ---------- */ .auftakt{ position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(3.5rem,10vw,7rem) clamp(3rem,7vw,5.5rem); display:grid; align-content:center; } .auftakt > canvas.linie{ position:absolute; inset:0; width:100%; height:100%; z-index:0 } .auftakt .bahn{ position:relative; z-index:2 } /* ---------- Bildkarten, gekippt ---------- */ .karten{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(1.25rem,3vw,2.75rem); margin-top:clamp(2.5rem,5vw,4rem); } .karte{ position:relative; width:clamp(8.5rem,19vw,16rem); background:var(--schwarz-2); transition:transform .9s var(--circ); } .karte:nth-child(1){ transform:rotate(-5deg) } .karte:nth-child(2){ transform:rotate(2.5deg) translateY(-1.5rem) } .karte:nth-child(3){ transform:rotate(-1.5deg) translateY(1rem) } .karte:nth-child(4){ transform:rotate(4deg) } .karte:hover{ transform:rotate(0deg) translateY(-.5rem) } .karte:hover .karte__bild img{ transform:scale(1.06) } .karte figcaption{ position:absolute; left:0; bottom:0; z-index:2; background:var(--neon); color:var(--schwarz); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; font-variation-settings:"wdth" 78,"wght" 700; padding:.35em .7em .25em; } /* ---------- Pillen-Knopf mit Etikettenwechsel ---------- */ .knopf{ position:relative; display:inline-flex; align-items:center; justify-content:center; height:2.9rem; padding:0 1.6rem; border-radius:999px; overflow:hidden; isolation:isolate; color:var(--weiss); } .knopf__grund{ position:absolute; inset:0; border-radius:inherit; z-index:-1; border:1.5px solid currentColor; background:transparent; transition:transform .75s var(--circ), background-color .75s var(--circ); } .knopf:hover .knopf__grund{ transform:scale(1.06) } .knopf--voll{ color:var(--schwarz) } .knopf--voll .knopf__grund{ background:var(--neon); border-color:var(--neon) } .neonflaeche .knopf{ color:var(--schwarz) } .knopf__etikett{ display:grid; line-height:1.1 } .knopf__etikett > span{ grid-area:1/1; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-variation-settings:"wdth" 74,"wght" 700; transition:transform .75s var(--circ), opacity .75s var(--circ), font-variation-settings .75s var(--circ), letter-spacing .75s var(--circ); } .knopf__etikett > span + span{ transform:translateY(120%); opacity:0 } .knopf:hover .knopf__etikett > span:first-child{ transform:translateY(-120%); opacity:0 } .knopf:hover .knopf__etikett > span + span{ transform:none; opacity:1; font-variation-settings:"wdth" 100,"wght" 700; letter-spacing:.08em; } .knopfreihe{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center } /* ---------- Schwebende Navigation ---------- */ .leiste{ position:fixed; left:50%; bottom:clamp(1.1rem,3vw,2rem); z-index:80; transform:translateX(-50%); display:flex; align-items:center; gap:.6rem; background:var(--neon); color:var(--schwarz); border-radius:999px; padding:.45rem .55rem .45rem 1.05rem; max-width:calc(100vw - 2*var(--rand)); transition:background-color .5s var(--ease), color .5s var(--ease); } /* Kleckse: gespritzte Tropfen rings um die Pille. */ .leiste::before,.leiste::after{ content:""; position:absolute; z-index:-1; pointer-events:none; background-repeat:no-repeat; transition:background-image .5s var(--ease); } .leiste::before{ left:-1.9rem; right:-1.9rem; top:-1.1rem; height:1.3rem; background-image: radial-gradient(.30rem .30rem at 14% 78%, var(--neon) 99%, transparent 100%), radial-gradient(.16rem .16rem at 27% 34%, var(--neon) 99%, transparent 100%), radial-gradient(.10rem .10rem at 38% 8%, var(--neon) 99%, transparent 100%), radial-gradient(.22rem .22rem at 63% 60%, var(--neon) 99%, transparent 100%), radial-gradient(.13rem .13rem at 79% 22%, var(--neon) 99%, transparent 100%), radial-gradient(.26rem .26rem at 91% 80%, var(--neon) 99%, transparent 100%); } .leiste::after{ left:.6rem; right:.6rem; bottom:-.85rem; height:1rem; background:var(--neon); -webkit-mask:var(--tropfenmaske) repeat-x 0 0 / auto 100%; mask:var(--tropfenmaske) repeat-x 0 0 / auto 100%; } /* Über einer Neonfläche dreht sich alles um. */ .leiste--invers{ background:var(--schwarz); color:var(--neon) } .leiste--invers::before{ background-image: radial-gradient(.30rem .30rem at 14% 78%, var(--schwarz) 99%, transparent 100%), radial-gradient(.16rem .16rem at 27% 34%, var(--schwarz) 99%, transparent 100%), radial-gradient(.10rem .10rem at 38% 8%, var(--schwarz) 99%, transparent 100%), radial-gradient(.22rem .22rem at 63% 60%, var(--schwarz) 99%, transparent 100%), radial-gradient(.13rem .13rem at 79% 22%, var(--schwarz) 99%, transparent 100%), radial-gradient(.26rem .26rem at 91% 80%, var(--schwarz) 99%, transparent 100%); } .leiste--invers::after{ background-image: radial-gradient(.13rem .42rem at 20% 8%, var(--schwarz) 99%, transparent 100%), radial-gradient(.24rem .24rem at 33% 62%, var(--schwarz) 99%, transparent 100%), radial-gradient(.10rem .28rem at 52% 6%, var(--schwarz) 99%, transparent 100%), radial-gradient(.17rem .17rem at 71% 48%, var(--schwarz) 99%, transparent 100%), radial-gradient(.11rem .34rem at 85% 10%, var(--schwarz) 99%, transparent 100%); } .leiste__marke{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; font-variation-settings:"wdth" 74,"wght" 700; white-space:nowrap; } .leiste__marke b{ font-variation-settings:"wght" 850 } .leiste__marke{ transition:opacity .3s var(--ease) } a.leiste__marke:hover{ opacity:.62 } a.leiste__marke:focus-visible{ outline-offset:6px } .leiste__schalter{ width:2.1rem; height:2.1rem; border-radius:999px; background:var(--schwarz); color:var(--neon); display:grid; place-items:center; flex:0 0 auto; transition:background-color .5s var(--ease), color .5s var(--ease); } .leiste--invers .leiste__schalter{ background:var(--neon); color:var(--schwarz) } .leiste__schalter i{ display:block; width:13px; height:2px; background:currentColor; position:relative } .leiste__schalter i::before,.leiste__schalter i::after{ content:""; position:absolute; left:0; width:13px; height:2px; background:currentColor } .leiste__schalter i::before{ top:-4px } .leiste__schalter i::after{ top:4px } .leiste__punkt{ width:.45rem; height:.45rem; border-radius:999px; background:currentColor; flex:0 0 auto; opacity:.55 } .menue{ position:fixed; inset:0; z-index:90; display:none; background:var(--schwarz); padding:var(--rand) } .menue[open]{ display:grid; align-content:safe center; justify-items:center; gap:.15rem; overflow-y:auto; overscroll-behavior:contain; padding-block:calc(var(--rand) + 3rem); /* Platz fuer den Schliessen-Knopf */ } .menue a{ font-variation-settings:"wdth" 70,"wght" 780; font-size:clamp(1.8rem,7.5vw,4.2rem); text-transform:uppercase; letter-spacing:-.02em; line-height:1.05; transition:color .3s var(--ease); } .menue a:hover,.menue a[aria-current="page"]{ color:var(--neon) } @media (max-height:820px){ .menue a{ font-size:clamp(1.4rem,5vw,2.6rem) } .menue__logo{ width:min(14rem,38vw) } } /* Niedrige Fenster: die Navigation geht vor, das Logo weicht. */ @media (max-height:680px){ .menue a{ font-size:clamp(1.15rem,4vw,1.9rem) } .menue__logo{ display:none } } .menue__logo{ display:block; width:min(19rem,46vw); margin-bottom:clamp(.8rem,2.4vh,1.6rem); transition:opacity .3s var(--ease); } .menue__logo img{ display:block; width:100%; height:auto } .menue__logo:hover{ opacity:.75 } @media (max-height:560px){ .menue__logo{ width:min(18rem,44vw); margin-bottom:.7rem } } .menue__zu{ position:absolute; top:var(--rand); right:var(--rand); width:2.6rem; height:2.6rem; border-radius:999px; background:var(--neon); color:var(--schwarz); font-size:1.3rem; display:grid; place-items:center; } /* ---------- Disziplinen ---------- */ .felder{ display:grid; gap:1px; background:var(--linie); border-block:1px solid var(--linie) } @media (min-width:700px){ .felder{ grid-template-columns:repeat(2,1fr) } } @media (min-width:1080px){ .felder{ grid-template-columns:repeat(4,1fr) } } .feld{ background:var(--schwarz); padding:1.75rem 1.4rem 2rem; display:flex; flex-direction:column; gap:.7rem; min-height:15rem; text-align:left; transition:background-color .6s var(--ease); } .feld:hover{ background:var(--schwarz-2) } .feld__zahl{ color:var(--neon); font-variation-settings:"wdth" 74,"wght" 780; font-size:1.6rem; line-height:1 } .feld p{ color:var(--grau); font-size:.96rem; margin-top:auto } /* ---------- Werke ---------- */ .werke{ display:grid; gap:clamp(3rem,7vw,6.5rem) clamp(2rem,4.5vw,4rem); text-align:left } @media (min-width:640px){ .werke{ grid-template-columns:repeat(2,1fr) } } @media (min-width:1080px){ .werke{ grid-template-columns:repeat(3,1fr) } } .werk{ display:block; text-align:left; width:100%; padding:0 } .werk__bild{ position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--schwarz-2) } .werk__bild img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease) } .werk__bild::after{ content:""; position:absolute; inset:0; border:2px solid var(--neon); opacity:0; transition:opacity .5s var(--ease); pointer-events:none; } .werk:hover .werk__bild img,.werk:focus-visible .werk__bild img{ transform:scale(1.05) } .werk:hover .werk__bild::after,.werk:focus-visible .werk__bild::after{ opacity:1 } .werk__zahl{ position:absolute; left:0; top:0; z-index:2; background:var(--neon); color:var(--schwarz); font-size:.6rem; letter-spacing:.16em; font-variant-numeric:tabular-nums; font-variation-settings:"wdth" 78,"wght" 700; padding:.35em .7em .25em; } .werk__fuss{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-top:.7rem } .werk__fuss span:last-child{ font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; font-variation-settings:"wdth" 78,"wght" 640; color:var(--grau); white-space:nowrap; } /* Kacheln steigen beim Scrollen von unten herein und legen sich gerade. */ .werk{ transform:translateY(var(--drift,0px)) rotate(var(--neigung,0deg)); will-change:transform; } /* ---------- Leuchtkasten ---------- */ .kasten{ position:fixed; inset:0; z-index:100; display:none; background:rgba(20,14,18,.96); padding:clamp(.75rem,2.5vw,1.75rem) } .kasten[open]{ display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:1rem } .kasten__kopf{ display:flex; align-items:center; justify-content:space-between; gap:1rem } .kasten__kopf .h-s{ background:var(--neon); color:var(--schwarz); padding:.2em .5em .1em } /* Absolut positioniert, weil max-height:100% gegen einen Grid-Track mit height:auto nicht aufloest - das Bild lief sonst ueber die Fussleiste. */ .kasten__buehne{ position:relative; min-height:0 } .kasten__buehne img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; } .kasten__fuss{ display:flex; align-items:center; justify-content:center; gap:1rem } .kasten__fuss button{ border:1px solid var(--linie); border-radius:999px; padding:.55rem 1.2rem; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; font-variation-settings:"wdth" 78,"wght" 700; transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); } .kasten__fuss button:hover{ background:var(--neon); color:var(--schwarz); border-color:var(--neon) } .kasten__zaehler{ font-size:.62rem; letter-spacing:.18em; color:var(--grau); font-variant-numeric:tabular-nums } .kasten__zu{ width:2.4rem; height:2.4rem; border-radius:999px; background:var(--neon); color:var(--schwarz); font-size:1.2rem; display:grid; place-items:center } /* ---------- Notizzettel ---------- */ .zettel{ border:1px solid var(--neon); border-left-width:3px; padding:1.2rem 1.4rem; max-width:62ch; text-align:left; } .zettel b{ display:block; margin-bottom:.35rem; color:var(--neon); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; font-variation-settings:"wdth" 78,"wght" 750; } .zettel p{ color:var(--grau); font-size:.96rem } .neonflaeche .zettel{ border-color:var(--schwarz) } .neonflaeche .zettel b{ color:var(--schwarz) } .neonflaeche .zettel p{ color:rgba(242,239,231,.82) } /* ---------- Formular ---------- */ .formular{ display:grid; gap:1rem; max-width:34rem; width:100%; text-align:left } .formular label{ display:grid; gap:.4rem; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; font-variation-settings:"wdth" 78,"wght" 700; color:var(--grau); } .formular input,.formular textarea{ font:inherit; color:var(--weiss); background:var(--schwarz-2); border:1px solid var(--linie); border-radius:2px; padding:.8rem .9rem; transition:border-color .4s var(--ease); } .formular input:focus,.formular textarea:focus{ border-color:var(--neon); outline:none } .formular textarea{ min-height:9rem; resize:vertical } .formular .zustimmung{ display:flex; gap:.65rem; align-items:flex-start; color:var(--grau); text-transform:none; letter-spacing:0; font-size:.92rem; font-variation-settings:"wdth" 100,"wght" 380; } .formular .zustimmung input{ width:1.1rem; height:1.1rem; margin-top:.25rem; flex:0 0 auto; accent-color:var(--neon) } .formular .zustimmung a{ color:var(--neon); text-decoration:underline } /* ---------- Kontaktdaten ---------- */ .daten{ display:grid; gap:1.4rem; text-align:left } .daten div{ display:grid; gap:.25rem } .daten dt{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; font-variation-settings:"wdth" 78,"wght" 700; color:var(--neon) } .daten dd{ margin:0 } .daten a:hover{ color:var(--neon) } /* ---------- Rechtstexte ---------- */ .recht{ max-width:70ch; text-align:left } .recht h2{ margin-top:2.5rem; font-size:1.3rem; text-transform:uppercase; font-variation-settings:"wdth" 78,"wght" 760 } .recht h3{ margin-top:1.75rem; font-size:.95rem; text-transform:uppercase; font-variation-settings:"wdth" 84,"wght" 700; color:var(--neon) } .recht p{ margin-top:.85rem; color:var(--grau) } .recht address{ font-style:normal; margin-top:.85rem; color:var(--grau) } /* ---------- Fuß ---------- */ .fuss{ border-top:1px solid var(--linie); padding-block:clamp(2.5rem,6vw,4rem); text-align:left } .fuss__raster{ display:grid; gap:2rem } @media (min-width:760px){ .fuss__raster{ grid-template-columns:1.4fr 1fr 1fr } } .fuss a:hover{ color:var(--neon) } .fuss ul{ display:grid; gap:.5rem; color:var(--grau); font-size:.95rem } .fuss__unten{ display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between; margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--linie); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grau); } /* ---------- Bewegung ---------- */ .sticker.los > span:not(.kante){ animation:setzen .8s var(--circ) both } .sticker.los > span:not(.kante):nth-of-type(2){ animation-delay:.1s } .sticker.los > span:not(.kante):nth-of-type(3){ animation-delay:.2s } .sticker.los > span:not(.kante):nth-of-type(4){ animation-delay:.3s } .sticker.los .schrift{ animation:kritzeln .7s var(--ease) .45s both } @keyframes setzen{ from{ transform:translateY(14%) scaleY(.9); opacity:0 } to { transform:none; opacity:1 } } @keyframes kritzeln{ from{ transform:translate(-50%,-50%) rotate(-6deg) scale(.86); opacity:0 } to { transform:translate(-50%,-50%) rotate(-6deg) scale(1); opacity:1 } } /* translate statt transform — sonst überschreibt es den Einflug der Kacheln */ .warte{ opacity:0; translate:0 22px } .warte.da{ opacity:1; translate:0 0; transition:opacity .8s var(--ease), translate .8s var(--ease) } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *,*::before,*::after{ animation:none !important; transition:none !important } .warte{ opacity:1 !important; translate:0 0 !important } } /* ========================================================== Graffiti Farbnasen unter den Stickern, Sprühkorn über den Flächen, gerissene Schablonenkante. Alles CSS, keine Bilddateien. ========================================================== */ .sticker > span:not(.schrift):not(.kante){ overflow:visible } /* Nur die unterste Zeile tropft sichtbar heraus. */ /* Sprühkorn über den Abschnitten. */ .abschnitt::before,.abschnitt--eng::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; background-image: radial-gradient(circle at 17% 23%, rgba(139,0,74,.06) 0 .8px, transparent 1.6px), radial-gradient(circle at 68% 71%, rgba(139,0,74,.05) 0 .7px, transparent 1.4px), radial-gradient(circle at 41% 88%, rgba(29,20,25,.04) 0 .6px, transparent 1.2px); background-size:37px 41px, 53px 47px, 29px 31px; } .neonflaeche::before{ background-image: radial-gradient(circle at 17% 23%, rgba(5,5,5,.07) 0 .8px, transparent 1.6px), radial-gradient(circle at 68% 71%, rgba(5,5,5,.06) 0 .7px, transparent 1.4px); } .abschnitt > *,.abschnitt--eng > *{ position:relative; z-index:1 } /* Gerissene Schablonenkante an der Neonfläche. */ .neonflaeche{ clip-path:polygon( 0 1.1%, 7% 0, 15% .9%, 23% .2%, 34% 1.2%, 45% .3%, 56% 1.1%, 67% .2%, 78% 1.0%, 88% .3%, 96% 1.1%, 100% .4%, 100% 100%, 0 100%); } /* ---------- Farbnasen unter den Stickern ---------- Derselbe Tropfen-Trenner wie an den Sektionskanten, vom Skript unter die unterste Zeile gehaengt. Er laeuft heraus, sobald der Sticker sitzt. */ .kante--sticker{ top:100%; --drip-color:var(--neon) } .kante--sticker .kante__tropfen{ transition:transform .95s var(--circ) .38s; } .sticker.los .kante--sticker{ --fluss:.34 } /* Auf Neonflaechen ist der Sticker schwarz, also tropft er schwarz. */ .neonflaeche .kante--sticker{ --drip-color:var(--schwarz) } /* Bildhülle der Auftaktkarten: das Kippen bleibt, die Tropfen laufen heraus. */ .karte{ overflow:visible } .karte__bild{ position:relative; display:block; overflow:hidden; width:100%; aspect-ratio:3/4; } .karte__bild img,.karte__bild video{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); } .karte__bild::after{ content:""; position:absolute; inset:0; border:2px solid var(--neon); opacity:0; transition:opacity .5s var(--ease); pointer-events:none; } .karte:hover .karte__bild::after{ opacity:1 } /* ---------- Sprühfleck hinter den Bildern ---------- Grafik von Mike. Oben verankert, beim Scrollen wird sie gedehnt — dadurch laufen die Farbnasen nach unten aus. */ .spray{ position:absolute; left:-6%; right:-6%; top:-3%; bottom:-15%; z-index:0; pointer-events:none; opacity:.8; background:url("../grafik/spray.png") no-repeat center / 100% 100%; /* Maske läuft beim Scrollen nach unten auf — die Nasen wachsen mit. */ --fluss:60%; -webkit-mask:linear-gradient(#000 0 0) no-repeat 0 0 / 100% var(--fluss); mask:linear-gradient(#000 0 0) no-repeat 0 0 / 100% var(--fluss); will-change:mask-size; } .werk,.karte{ position:relative } .werk__bild,.karte__bild{ position:relative; z-index:1 } .werk__fuss{ position:relative; z-index:1 } .karte figcaption{ z-index:3 } /* Jeder zweite Fleck steht auf dem Kopf, damit sich das Muster nicht wiederholt. */ .werk:nth-child(2n) .spray{ transform:scaleX(-1) } .werk:nth-child(3n) .spray{ opacity:.75 } @media (prefers-reduced-motion:reduce){ .spray{ --fluss:100% !important } .werk{ transform:none !important } .karte{ transform:rotate(var(--kipp,0deg)) !important } } /* Bildunterschriften als schwarze Sticker — sie liegen auf dem Sprühfleck. */ .werk__fuss{ align-items:center; gap:.5rem; padding-top:.55rem } .werk__fuss .h-s{ background:var(--schwarz); color:var(--weiss); padding:.22em .55em .12em; display:inline-block; } .werk__fuss span:last-child{ background:var(--schwarz); color:var(--grau); padding:.35em .55em .25em; display:inline-block; } .karte figcaption{ box-shadow:0 0 0 3px var(--schwarz) } .karte{ transform:translateY(var(--drift,0px)) rotate(calc(var(--kipp,0deg) + var(--neigung,0deg))) } .karte:nth-child(1){ --kipp:-5deg } .karte:nth-child(2){ --kipp:2.5deg } .karte:nth-child(3){ --kipp:-1.5deg } .karte:nth-child(4){ --kipp:4deg } .karte:hover{ transform:rotate(0deg) translateY(calc(var(--drift,0px) - .5rem)) } /* Auftaktkarten: einmaliger Einflug beim Laden, versetzt. */ .karte{ animation:kartenflug .95s var(--circ) both } .karte:nth-child(1){ animation-delay:.10s } .karte:nth-child(2){ animation-delay:.20s } .karte:nth-child(3){ animation-delay:.30s } .karte:nth-child(4){ animation-delay:.40s } @keyframes kartenflug{ from{ translate:0 150px; opacity:0 } to { translate:0 0; opacity:1 } } @media (prefers-reduced-motion:reduce){ .karte{ animation:none !important; translate:0 0 !important; opacity:1 !important } } /* ========================================================== Wand — festgesetzte Bühne, die Bilder steigen beim Scrollen auf. Aufbau wie auf mikehillebrand.com: hohe Spur, darin klebende Bühne, vier Haufen aus kleinen Bildern, Titel mittig darüber. ========================================================== */ .wand{ height:380svh; position:relative } .wand-buehne{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:var(--rand) var(--rand) calc(var(--rand) + 5rem); } .wand-raster{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,3vw,64px); width:min(100%,var(--breit)); align-items:end; } .haufen{ display:flex; flex-direction:column; gap:.9rem; align-items:center; width:100% } .haufen__bilder{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(3px,.5vw,8px); width:100% } .haufen__bilder img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; will-change:transform, opacity; } .haufen h3{ color:var(--neon); text-align:center; font-variation-settings:"wdth" 80,"wght" 720; font-size:clamp(.7rem,.6rem + .5vw,1rem); text-transform:uppercase; letter-spacing:.06em; } .wand-titel{ position:absolute; inset:0; z-index:3; pointer-events:none; display:flex; align-items:center; justify-content:center; padding-bottom:5rem; } @media (max-width:900px){ .wand{ height:320svh } .wand-raster{ grid-template-columns:repeat(2,1fr); gap:clamp(12px,4vw,28px) } .haufen:nth-child(n+5){ display:none } } @media (prefers-reduced-motion:reduce){ .wand{ height:auto } .wand-buehne{ position:static; height:auto; padding-block:clamp(3rem,8vw,6rem) } .haufen__bilder img{ transform:none !important; opacity:1 !important } } /* ========================================================== Spruch — klebende Neonfläche, Objekte fliegen links und rechts daran vorbei nach oben. Aufbau wie .claim auf mikehillebrand.com. ========================================================== */ .spruch{ position:relative; height:420svh; background:var(--neon); color:var(--schwarz); z-index:1 } .spruch-buehne{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--neon); display:grid; place-items:center; } .spruch-wort{ position:relative; z-index:3; text-align:center; pointer-events:none } .spruch-wort span{ display:block; font-variation-settings:"wdth" 62,"wght" 820; font-size:clamp(3.2rem,15vw,13rem); line-height:.82; letter-spacing:-.035em; text-transform:uppercase; color:var(--schwarz); } .spruch-quelle{ position:absolute; left:0; right:0; bottom:clamp(4.5rem,9vw,7rem); z-index:4; text-align:center; color:rgba(5,5,5,.62); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; font-variation-settings:"wdth" 78,"wght" 700; } .spruch-objekte{ position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden } .spruch-objekte img{ position:absolute; top:0; left:var(--x,10%); width:var(--w,16vw); height:auto; border-radius:2px; will-change:transform; filter:drop-shadow(0 24px 34px rgba(5,5,5,.34)); } @media (max-width:900px){ .spruch{ height:340svh } .spruch-objekte img{ width:calc(var(--w,16vw) * 1.6) } } @media (prefers-reduced-motion:reduce){ .spruch{ height:auto } .spruch-buehne{ position:static; height:auto; padding-block:clamp(3.5rem,9vw,7rem) } .spruch-objekte{ display:none } } /* Die Linie läuft auch hinter dem Menü-Overlay. */ .menue > canvas.linie{ position:absolute; inset:0; width:100%; height:100%; z-index:0 } .menue a{ position:relative; z-index:2 } .menue__zu{ z-index:4 } /* ---------- Fragen und Antworten ---------- */ .fragen{ max-width:78ch; margin-inline:auto; border-top:1px solid var(--linie) } .frage{ border-bottom:1px solid var(--linie) } .frage summary{ list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:1rem; padding:1.25rem .25rem; font-variation-settings:"wdth" 84,"wght" 700; font-size:clamp(1rem,.95rem + .5vw,1.3rem); line-height:1.25; transition:color .3s var(--ease); } .frage summary::-webkit-details-marker{ display:none } .frage summary::after{ content:"+"; margin-left:auto; flex:0 0 auto; color:var(--neon); font-size:1.5rem; line-height:1; transition:transform .35s var(--ease); } .frage[open] summary::after{ transform:rotate(45deg) } .frage summary:hover{ color:var(--neon) } .frage p{ color:var(--grau); padding:0 3rem 1.5rem .25rem; max-width:68ch } /* ---------- Mobil: Wand und Spruch anders aufbauen ---------- Vier Haufen nebeneinander ergeben auf 375 px Bilder von 52 px Breite — darauf ist nichts zu erkennen. Auf dem Handy daher zwei Haufen untereinander, jeder mit voller Breite. */ @media (max-width:700px){ .wand{ height:300svh } .wand-buehne{ padding-inline:var(--rand) } .wand-raster{ grid-template-columns:1fr; gap:clamp(18px,5vw,32px); align-items:center } .haufen:nth-child(n+3){ display:none } .haufen__bilder{ gap:6px } .wand-titel{ padding-bottom:0 } .wand-titel .sticker > span:not(.schrift):not(.kante){ font-size:clamp(2rem,11vw,3rem) } .spruch{ height:280svh } .spruch-objekte img{ width:calc(var(--w,16vw) * 2.4) } .spruch-wort span{ font-size:clamp(2.6rem,17vw,5rem) } .spruch-quelle{ bottom:6.5rem } } /* ========================================================== KI-Kennzeichnung nach Art. 50 AI Act Sichtbare Marke im Bild plus maschinenlesbares IPTC DigitalSourceType in der Datei selbst. Das Zeichen ist die Content-Credentials-Marke (C2PA), der einzige verbreitete offene Standard für Herkunftsangaben. ========================================================== */ .ki{ position:absolute; right:.4rem; bottom:.4rem; z-index:4; display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .42rem .22rem .3rem; border-radius:2px; background:rgba(5,5,5,.72); color:var(--weiss); backdrop-filter:blur(3px); font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:"wdth" 82,"wght" 700; line-height:1; pointer-events:auto; cursor:help; } .ki svg{ width:.85rem; height:.85rem; flex:0 0 auto } .ki--gross{ font-size:.62rem; padding:.32rem .55rem .32rem .4rem } .ki--gross svg{ width:1.05rem; height:1.05rem } .karte .ki,.werk .ki{ right:.35rem; bottom:.35rem } @media (max-width:700px){ .ki span{ display:none } .ki{ padding:.28rem } } /* Erläuterung unter Bildstrecken */ .ki-zeile{ display:flex; align-items:center; gap:.5rem; justify-content:center; color:var(--grau); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-variation-settings:"wdth" 84,"wght" 620; margin-top:1.5rem; } .ki-zeile svg{ width:1rem; height:1rem; color:var(--neon) } /* Fußzeile: zwei Zeilen, mittig */ .fuss__unten{ flex-direction:column; align-items:center; text-align:center; gap:.6rem } .fuss__credits{ color:var(--grau) } .fuss__credits a{ color:var(--weiss) } .fuss__credits a:hover{ color:var(--neon) } .fuss__credits span[aria-label]{ color:var(--neon); font-size:1.1em; letter-spacing:0 } .fuss__recht a:hover{ color:var(--neon) } /* Herz in den Credits schlägt — zwei Schläge, dann Pause, wie ein Puls. */ .fuss__credits span[aria-label]{ display:inline-block; transform-origin:center; animation:puls 2.4s ease-in-out infinite; } @keyframes puls{ 0%,58%,100%{ transform:scale(1) } 8% { transform:scale(1.28) } 16% { transform:scale(1) } 24% { transform:scale(1.18) } 32% { transform:scale(1) } } @media (prefers-reduced-motion:reduce){ .fuss__credits span[aria-label]{ animation:none } } /* Über gelben Flächen: schwarze Pille, gelbe Schrift, gelber Knopf. */ .leiste--invers{ background:var(--schwarz); color:var(--neon) } .leiste--invers .leiste__marke b{ color:var(--neon) } .leiste--invers .leiste__schalter{ background:var(--neon); color:var(--schwarz) } .leiste--invers .leiste__punkt{ background:var(--neon); opacity:.7 } /* ---------- Schieber zur Bestätigung ---------- Vorbild: steppenwolf.mikehillebrand.com. Der Griff wird nach rechts gezogen, erst dann gibt der Server ein gültiges Token frei. */ .schieber{ user-select:none; touch-action:pan-y; display:grid; gap:.45rem } .schieber__bahn{ position:relative; height:3.25rem; display:flex; align-items:center; border:1px solid var(--linie); background:var(--schwarz-2); overflow:hidden; } .schieber__fuellung{ position:absolute; inset:0 auto 0 0; width:0; pointer-events:none; background:color-mix(in srgb, var(--neon) 16%, transparent); } .schieber__text,.schieber__fertig{ position:absolute; left:50%; transform:translateX(-50%); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; font-variation-settings:"wdth" 80,"wght" 700; pointer-events:none; white-space:nowrap; transition:opacity .2s var(--ease); } .schieber__text{ color:var(--grau) } .schieber__fertig{ color:var(--neon); opacity:0 } .schieber__griff{ position:relative; z-index:2; width:3.25rem; height:3.25rem; flex:0 0 3.25rem; background:var(--neon); color:var(--schwarz); cursor:grab; display:grid; place-items:center; transition:background-color .2s var(--ease); } .schieber__griff:active{ cursor:grabbing } .schieber__griff svg{ width:1.1rem; height:1.1rem } .schieber.zieht .schieber__griff{ transition:none } .schieber.fertig .schieber__bahn{ border-color:var(--neon) } .schieber.fertig .schieber__griff{ background:var(--weiss); cursor:default } .schieber.fertig .schieber__text{ opacity:0 } .schieber.fertig .schieber__fertig{ opacity:1 } .formular button[disabled]{ opacity:.4; cursor:not-allowed } .formular button[disabled]:hover .knopf__grund{ transform:none } .honigtopf{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; } .meldung{ padding:1rem 1.2rem; border-left:3px solid var(--neon); background:var(--schwarz-2); max-width:34rem } .meldung[hidden]{ display:none } .meldung--fehler{ border-color:var(--blush,#C4756A) } /* Zahnrad zur Verwaltung — dezent im Fuß, dreht langsam, beim Hover schneller. */ .fuss__zahnrad{ display:inline-block; vertical-align:-2px; color:var(--grau); opacity:.55; transition:opacity .2s var(--ease), color .2s var(--ease); } .fuss__zahnrad svg{ display:inline-block; animation:zahnrad 7s linear infinite } .fuss__zahnrad:hover{ opacity:1; color:var(--neon) } .fuss__zahnrad:hover svg{ animation-duration:1.6s } @keyframes zahnrad{ to{ transform:rotate(360deg) } } @media (prefers-reduced-motion:reduce){ .fuss__zahnrad svg{ animation:none } } /* ---------- Arbeitsmaterial ---------- */ .material{ display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie) } @media (min-width:700px){ .material{ grid-template-columns:repeat(2,1fr) } } @media (min-width:1080px){ .material{ grid-template-columns:repeat(3,1fr) } } .blatt{ display:grid; gap:.55rem; align-content:start; background:var(--schwarz); padding:1.6rem 1.4rem 1.8rem; min-height:12rem; transition:background-color .5s var(--ease); } .blatt:hover{ background:var(--schwarz-2) } .blatt__art{ justify-self:start; background:var(--neon); color:var(--schwarz); font-size:.58rem; letter-spacing:.18em; font-variation-settings:"wdth" 78,"wght" 700; padding:.35em .7em .25em; } .blatt__titel{ font-variation-settings:"wdth" 82,"wght" 700; font-size:clamp(1.05rem,.95rem + .5vw,1.35rem); text-transform:uppercase; letter-spacing:-.01em; line-height:1.1; } .blatt__text{ color:var(--grau); font-size:.95rem } .blatt__fuss{ margin-top:auto; padding-top:.6rem; color:var(--neon); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; font-variation-settings:"wdth" 78,"wght" 640; } /* ---------- Tropfende Kanten ---------- An jeder Grenze zwischen Schwarz und Neon laeuft die Farbe der oberen Flaeche nach unten aus. Das Trenner-SVG liegt als