:root{ --blue:#202782; --blue-2:#2A317A; --blue-deep:#1B2170; --cream:#FEFDF9; --pink:#F88DA7; --pink-soft:#F6A9BD; --pink-edge:#d97490; --ink:#20233A; /* --pink is a surface colour: as TEXT on cream it only reaches 2.2:1 (WCAG AA needs 4.5). --pink-ink is the same hue darkened to 4.7:1 and is used for pink text on cream only. Every pink surface (buttons, blobs, badges, underlines) keeps --pink unchanged. To revert to the lighter pink everywhere: set --pink-ink to #F88DA7. */ --pink-ink:#C2456D; /* Night sky (20:00–06:00) — pure shades of --blue #202782, same hue (236°), from deepest overhead to the lightest glow near the horizon. */ --night-1:#0E1233; --night-2:#151A55; --night-3:#1B2170; --night-4:#202782; --night-5:#3A42A8; --night-6:#6E77D8; /* hero wave colours — swapped wholesale by .hero.night */ --blob-1:rgba(248,141,167,.18); /* back wash */ --blob-2:rgba(246,169,189,.26); /* mid wash */ --blob-3:rgba(32,39,130,.10); /* top-right lobe */ --blob-4:rgba(254,253,249,.55); /* foreground ribbon */ --wave-back:rgba(248,141,167,.45);/* wave behind the closing cream wave */ --muted-blue:#C9CBE4; --muted-ink:#6E7080; --line-cream:#E7E4D8; --line-blue:#4A4F9A; /* Sand — die warme Markierungsfläche im Untermenü. Eine Stufe dunkler als --line-cream, damit sie sich vom Cremeweiß der Karte abhebt, ohne dass die Schrift darauf leiden würde: Brand Blue erreicht 10,8:1. */ --sand:#F3EEE1; --display:"Literata",Georgia,serif; --body:"Jost",system-ui,-apple-system,sans-serif; --t-xs:.78rem; --t-sm:.9rem; --t-base:1.05rem; --t-lg:1.31rem; --t-xl:1.64rem; --t-2xl:2.05rem; --t-3xl:2.7rem; --t-4xl:3.6rem; --t-5xl:4.6rem; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px; --maxw:1120px; } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:120px} body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body); font-size:var(--t-base);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased; overflow-x:hidden} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)} a{color:inherit} img{max-width:100%} /* German compounds are long — never let one word push the page sideways */ p,h1,h2,h3,h4,li,span,label,a,td{overflow-wrap:break-word} .eyebrow{font-family:var(--body);font-size:var(--t-sm);letter-spacing:.28em;text-transform:uppercase;font-weight:500; overflow-wrap:anywhere;color:var(--pink-ink)} h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.01em;font-optical-sizing:auto} em{font-style:italic;color:var(--pink-ink)} /* on blue surfaces the light pink has plenty of contrast — use it there */ .on-blue .eyebrow,.on-blue em{color:var(--pink)} :focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:4px} /* skip link (matches the live site's "Zum Inhalt springen") */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--pink);color:var(--blue); font-family:var(--display);padding:.7em 1.2em;border-radius:0 0 8px 0} .skip:focus{left:0} /* ——— BUTTONS ——— */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--display); font-size:var(--t-base);letter-spacing:.16em;padding:.85em 1.8em;cursor:pointer; text-decoration:none;border:1px solid transparent;border-radius:6px; transition:transform .12s ease,box-shadow .12s ease,background .18s ease,color .18s ease} /* Raised Pink — primary on cream */ .btn-raised{background:var(--pink);color:var(--blue); box-shadow:0 4px 0 0 var(--pink-edge),0 12px 24px rgba(248,141,167,.4)} .btn-raised:hover{transform:translateY(2px);box-shadow:0 2px 0 0 var(--pink-edge),0 8px 16px rgba(248,141,167,.35)} .btn-raised:active{transform:translateY(4px);box-shadow:0 0 0 0 var(--pink-edge),0 4px 10px rgba(248,141,167,.3)} /* Raised Blue — primary on pink / blue backgrounds */ .btn-raised-blue{background:var(--blue);color:var(--cream); box-shadow:0 4px 0 0 var(--blue-deep),0 12px 24px rgba(27,33,112,.35)} .btn-raised-blue:hover{transform:translateY(2px);box-shadow:0 2px 0 0 var(--blue-deep),0 8px 16px rgba(27,33,112,.3)} .btn-raised-blue:active{transform:translateY(4px);box-shadow:0 0 0 0 var(--blue-deep),0 4px 10px rgba(27,33,112,.25)} /* on blue surfaces the raised button turns pink again */ .on-blue .btn-raised{background:var(--pink);color:var(--blue); box-shadow:0 4px 0 0 var(--pink-edge),0 12px 24px rgba(0,0,0,.22)} .on-blue .btn-raised:hover{transform:translateY(2px);box-shadow:0 2px 0 0 var(--pink-edge),0 8px 16px rgba(0,0,0,.2)} .on-blue .btn-raised:active{transform:translateY(4px);box-shadow:0 0 0 0 var(--pink-edge),0 4px 10px rgba(0,0,0,.18)} /* Ghost — secondary, italic serif with pink underline */ .btn-ghost{font-family:var(--display);font-style:italic;font-size:var(--t-lg);letter-spacing:.02em; color:var(--blue);text-decoration:none;border-bottom:2px solid var(--pink);padding-bottom:2px; transition:color .18s,border-color .18s} .btn-ghost:hover{color:var(--pink)} .on-blue .btn-ghost{color:var(--cream)} .on-blue .btn-ghost:hover{color:var(--pink)} /* ——— NAV (Variant 3: blue utility band + cream main row) ——— */ .nav{position:sticky;top:0;z-index:80;transition:transform .3s ease} .nav.hide{transform:translateY(-100%)} .nav .util{background:var(--blue);color:var(--cream)} .nav .util .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:40px} .nav .util .contact{font-size:.8rem;letter-spacing:.01em;color:var(--pink-soft);white-space:nowrap} .nav .util .contact a{text-decoration:none;color:inherit} .nav .util .contact a:hover{color:var(--cream)} .nav .main{background:rgba(254,253,249,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-cream)} .nav .main .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:70px} .logo{font-family:var(--display);font-weight:400;font-size:var(--t-xl);letter-spacing:-.01em; text-decoration:none;white-space:nowrap;line-height:1;color:var(--blue)} .logo small{display:block;font-family:var(--body);font-weight:400;font-size:.5rem;letter-spacing:.34em; text-transform:uppercase;color:var(--muted-ink);margin-top:3px} .nav .links{display:flex;gap:20px;align-items:center} .nav .links a{font-size:.96rem;text-decoration:none;letter-spacing:.01em;color:var(--ink); position:relative;padding:2px 0;cursor:pointer} .nav .links a:hover{color:var(--pink)} .toggle{display:inline-flex;border:1px solid var(--cream);border-radius:2px;overflow:hidden} .toggle button{font-family:var(--display);font-size:.9rem;letter-spacing:.05em;padding:.28em .7em; background:transparent;color:var(--cream);border:0;border-right:1px solid rgba(254,253,249,.35); cursor:pointer;transition:.15s} .toggle button:last-child{border-right:0} .toggle button.active,.toggle button:hover{background:var(--cream);color:var(--blue)} /* CTA — Outline-Fill (reserved for the nav) */ .nav .links a.nav-cta{position:relative;font-family:var(--display);letter-spacing:.18em;font-size:.86rem; text-transform:lowercase;color:var(--blue);background:transparent;border:2px solid var(--blue); padding:.55em 1.3em;border-radius:4px;text-decoration:none;white-space:nowrap;overflow:hidden; z-index:0;transition:color .25s,border-color .25s} .nav .links a.nav-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink); transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1)} .nav .links a.nav-cta:hover{color:var(--blue);border-color:var(--pink)} .nav .links a.nav-cta:hover::before{transform:scaleX(1)} /* Bücher dropdown */ .navwrap{position:relative} .navwrap>a.has::after{content:"▾";font-size:.7em;margin-left:5px;color:var(--muted-ink)} /* Der Abstand zum Menüpunkt steckt jetzt im UNTERMENÜ, nicht zwischen beiden. Vorher lagen 12px margin-top dazwischen: auf dem Weg nach unten berührte der Zeiger kurz weder Menüpunkt noch Untermenü, .navwrap:hover wurde falsch und das Untermenü schloss sich, bevor man es erreichen konnte. Die 12px sind deshalb in die Unterkante des Menüpunkts gewandert (padding). Optisch steht das Untermenü genau so weit unter dem Text wie zuvor — aber der Zwischenraum gehört zum Trefferbereich, es gibt keine tote Zone mehr. Bewusst kein unsichtbares Brücken-Element über dem Spalt: das läge über der Unterkante des Menüpunkts und würde dort Klicks abfangen. */ .navwrap>a.has{padding-top:12px;padding-bottom:12px} .dropdown{position:absolute;top:100%;left:0;margin-top:0;display:none; background:var(--cream);border:1px solid var(--line-cream);border-radius:8px; box-shadow:0 14px 30px rgba(32,39,130,.14);padding:8px;min-width:210px;z-index:90} .navwrap:hover .dropdown,.navwrap:focus-within .dropdown{display:block} .dropdown a{display:block;padding:8px 12px;border-radius:5px;font-size:.9rem;color:var(--ink)} /* Höher gewichtet als .nav .links a:hover — sonst gewinnt dort das Rosa des Hauptmenüs und färbt auch die Untermenüpunkte. Auf der sandfarbenen Fläche käme Brand Rose auf 1,9:1 und wäre praktisch unlesbar; Brand Blue erreicht 10,8:1. Der Fokuszustand ist bewusst derselbe wie der Hover — wer mit der Tastatur navigiert, soll dieselbe Markierung sehen. */ .nav .links .dropdown a:hover, .nav .links .dropdown a:focus-visible{background:var(--sand);color:var(--blue)} .burger{display:none;font-size:1.5rem;background:none;border:0;cursor:pointer;color:var(--blue); order:-1;margin-right:var(--s2);line-height:1;padding:4px 6px} /* mobile drawer */ .mobile-menu{display:none;background:var(--cream);border-bottom:1px solid var(--line-cream); box-shadow:0 18px 34px rgba(32,39,130,.12)} .mobile-menu.open{display:block;max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain} .mobile-menu .wrap{padding-top:var(--s3);padding-bottom:var(--s4)} .mobile-menu a{display:block;text-decoration:none;color:var(--ink);font-size:1.06rem; padding:.62em 0;border-bottom:1px solid var(--line-cream)} .mobile-menu a:last-child{border-bottom:0} .mobile-menu a.sub{padding-left:var(--s3);font-size:.94rem;color:var(--muted-ink)} .mobile-menu a:hover{color:var(--pink)} .mobile-menu .m-contact{margin-top:var(--s3);font-size:.9rem;color:var(--muted-ink)} /* ——— ENTRANCE (typewriter) ——— */ .entrance{position:fixed;inset:0;z-index:200;background:var(--cream); display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--s3); transition:opacity .8s ease,visibility .8s ease} .entrance.done{opacity:0;visibility:hidden} .tw-eyebrow{font-family:var(--body);font-weight:500;font-size:clamp(.8rem,2.4vw,1rem); letter-spacing:.28em;text-transform:uppercase;color:var(--pink-ink);min-height:1.4em; white-space:nowrap;overflow:hidden} .tw-line{font-family:var(--display);font-weight:300;color:var(--blue); font-size:clamp(2.4rem,9vw,5rem);line-height:1;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;position:relative;min-height:1em} .tw-eyebrow .caret,.tw-line .caret{display:inline-block;width:.06em;background:var(--pink); vertical-align:baseline;height:1em;transform:translateY(.12em);animation:blink 1s steps(1) infinite} .tw-line .caret{width:.045em;height:.92em} @keyframes blink{50%{opacity:0}} /* the underline sweeps out from the centre via scaleX, not width — animating width relayouts the flex column on every frame; a transform is composited */ .tw-underline{width:min(46vw,440px);height:5px;background:var(--pink);border-radius:3px;margin-top:2px; transform:scaleX(0);transform-origin:center; transition:transform .5s cubic-bezier(.4,0,.2,1)} .entrance.underline .tw-underline{transform:scaleX(1)} .entrance-skip{position:absolute;bottom:var(--s5);font-family:var(--body);font-size:.76rem; letter-spacing:.22em;text-transform:uppercase;color:var(--muted-ink);background:none;border:0; cursor:pointer;transition:color .18s} .entrance-skip:hover{color:var(--pink)} /* while the entrance runs, the page behind must not scroll */ body.entrance-active{overflow:hidden} /* ——— HERO ——— */ .hero{background:var(--cream);color:var(--ink);position:relative;overflow:hidden; padding:var(--s7) 0 var(--s8);min-height:88vh;display:flex;align-items:flex-start} /* ——— the wave that closes the hero ——————————————————————————————— No fade, no engineered end-point: a wave in the cream of the section below simply rolls along the bottom edge. Because its fill IS the page background, the hero has no boundary to hide — and it works the same by day and by night, only the colour of the wave behind it changes. */ .hero-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:1;pointer-events:none; height:clamp(96px,15vh,190px)} .hero-wave svg{width:100%;height:100%;display:block} .hero-wave .w-back{fill:var(--wave-back)} .hero-wave .w-front{fill:var(--cream)} .blob-field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .blob-field svg{width:100%;height:100%;display:block} .blob-field g{transform-box:view-box;transform-origin:center} /* the four waves read their colour from a token, so day and night are one swap */ .blob-field .b1{fill:var(--blob-1)} .blob-field .b2{fill:var(--blob-2)} .blob-field .b3{fill:var(--blob-3)} .blob-field .b4{fill:var(--blob-4)} /* stars — only ever visible at night */ .blob-field .stars circle{fill:var(--cream);opacity:0;transition:opacity .8s ease} .hero.night .blob-field .stars circle{opacity:var(--star-o,.7); animation:twinkle var(--star-dur,5s) ease-in-out var(--star-delay,0s) infinite} @keyframes twinkle{0%,100%{opacity:var(--star-o,.7)}50%{opacity:calc(var(--star-o,.7) * .25)}} .blob-field .drift{animation:drift 26s ease-in-out infinite} .blob-field .drift-2{animation:drift2 34s ease-in-out infinite} .blob-field .drift-3{animation:drift3 30s ease-in-out infinite} @keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2.5%,2%) scale(1.06)}} @keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-2.5%) scale(1.05)}} @keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2%,-3%) scale(1.08)}} .hero .wrap{position:relative;z-index:2;width:100%} .hero-inner{max-width:760px;padding-bottom:var(--s8)} .hero-eyebrow{font-family:var(--body);font-size:var(--t-sm);letter-spacing:.28em; text-transform:uppercase;color:var(--pink-ink);margin:0 0 var(--s3);font-weight:500} .hero h1{font-size:clamp(2.6rem,8vw,5rem);line-height:1;letter-spacing:-.02em; margin:0 0 var(--s4);max-width:15ch;color:var(--blue)} .hero p.lead{max-width:52ch;color:var(--muted-ink);font-size:var(--t-lg);margin:0 0 var(--s5);line-height:1.5} .hero-actions{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap} .cta-split{display:inline-flex;align-items:center;gap:.6em;text-decoration:none; font-family:var(--display);font-size:var(--t-lg);letter-spacing:.03em;color:var(--blue); background:var(--pink);padding:.85em 1.7em;border-radius:6px; box-shadow:0 4px 0 0 var(--pink-edge),0 12px 24px rgba(248,141,167,.4); transition:transform .12s ease,box-shadow .12s ease} .cta-split:hover{transform:translateY(2px);box-shadow:0 2px 0 0 var(--pink-edge),0 8px 16px rgba(248,141,167,.35)} .cta-split:active{transform:translateY(4px);box-shadow:0 0 0 0 var(--pink-edge),0 4px 10px rgba(248,141,167,.3)} .cta-split .label{white-space:nowrap} .cta-split .arrow{display:flex;align-items:center;font-size:1.15em;transition:transform .18s ease} .cta-split:hover .arrow{transform:translateX(3px)} /* ——— NIGHT SKY (20:00–06:00 local time) ——————————————————————————— The hero turns into a night sky: the same four waves, recoloured to shades of --blue, darkest overhead and lightest towards the horizon, with a quiet starfield above. Text lightens to match; the hero then meets the cream section below on a clean edge — the usual blue/cream alternation. Force it for review with ?night (or ?day) in the URL. */ .hero,.hero .hero-eyebrow,.hero h1,.hero p.lead,.hero .btn-ghost{ transition:background-color 1.2s ease,color 1.2s ease,border-color 1.2s ease} .hero.night{background:var(--night-1);color:var(--cream)} .hero.night{ --blob-1:rgba(32,39,130,.72); /* back wash — mid sky */ --blob-2:rgba(42,49,122,.85); /* mid wash */ --blob-3:rgba(110,119,216,.20); /* top-right lobe — moon glow */ --blob-4:rgba(143,150,228,.5); /* foreground ribbon — moonlit haze */ --wave-back:rgba(58,66,168,.6); /* wave behind the closing cream one */ } .hero.night .hero-eyebrow{color:var(--pink)} .hero.night h1{color:var(--cream)} .hero.night h1 em{color:var(--pink)} .hero.night p.lead{color:var(--muted-blue)} .hero.night .btn-ghost{color:var(--cream);border-bottom-color:var(--pink)} .hero.night .btn-ghost:hover{color:var(--pink)} /* hero staggered entrance after the typewriter */ .hero .stagger>*{opacity:0;transform:translateY(20px)} .hero.revealed .stagger>*{opacity:1;transform:none; transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} .hero.revealed .stagger>*:nth-child(1){transition-delay:.05s} .hero.revealed .stagger>*:nth-child(2){transition-delay:.16s} .hero.revealed .stagger>*:nth-child(3){transition-delay:.27s} .hero.revealed .stagger>*:nth-child(4){transition-delay:.38s} /* ——— generic section ——— */ section{padding:var(--s8) 0} .sec-head{max-width:64ch;margin-bottom:var(--s6)} .sec-head .eyebrow{margin:0 0 var(--s2);color:var(--pink-ink)} .on-blue .sec-head .eyebrow{color:var(--pink)} .sec-head h2{font-size:var(--t-3xl);margin:0;color:var(--blue)} .on-blue .sec-head h2{color:var(--cream)} .sec-head p{color:var(--muted-ink);margin:var(--s2) 0 0;font-size:var(--t-lg)} .on-blue .sec-head p{color:var(--muted-blue)} .sec-center{text-align:center;margin-left:auto;margin-right:auto} /* ——— reveal on scroll ——— */ .reveal{opacity:0;transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} /* ——— LEVEL 1 · New Arrivals: horizontal rail with candy cards ——— */ .scroller-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap} .scroll-ctrls{display:flex;gap:var(--s2)} .scroll-ctrls button{width:52px;height:52px;border-radius:50%;border:1px solid var(--blue); background:var(--cream);color:var(--blue);font-size:1.3rem;cursor:pointer; transition:transform .18s ease,background .18s ease,color .18s ease; display:flex;align-items:center;justify-content:center} .scroll-ctrls button:hover{background:var(--blue);color:var(--cream);transform:translateY(-2px)} .scroll-ctrls button:disabled{opacity:.35;cursor:default;transform:none;background:var(--cream);color:var(--blue)} /* on blue the same buttons invert, otherwise the hover state would fill them with the section's own background colour and they would disappear */ .on-blue .scroll-ctrls button{border-color:var(--cream);background:transparent;color:var(--cream)} .on-blue .scroll-ctrls button:hover{background:var(--cream);color:var(--blue)} .on-blue .scroll-ctrls button:disabled{opacity:.3;background:transparent;color:var(--cream)} /* inside a row label they sit next to a smaller heading */ .row-head .scroll-ctrls{margin-left:auto} .row-head .scroll-ctrls button{width:44px;height:44px;font-size:1.1rem} /* Full-bleed rail: runs past the right edge so it reads as "there is more". The left inset is PADDING, not a spacer element — a spacer sits before the first card and the flex `gap` then pushed that card one gap further right, so it no longer lined up with the section heading (128px vs 104px). */ .rail{display:flex;gap:var(--s4);overflow-x:auto;overflow-y:hidden; width:100vw;max-width:100vw;position:relative;left:50%;margin-left:-50vw; /* Kopfraum über den Karten. Nicht weiter verkleinern: overflow-y:hidden schneidet alles ab, was nach oben hinausragt, und beim Überfahren hebt sich die Karte 8px, der Schatten reicht rund 28px hinauf, dazu die Ruhedrehung — zusammen etwa 45px. 48px ist die Untergrenze. */ padding:48px 0 90px var(--rail-pad,var(--s3)); scroll-padding-left:var(--rail-pad,var(--s3)); /* Beide Achsen erlauben. pan-x allein war eine Falle: die Angabe ist eine Whitelist, und ohne pan-y sperrt der Browser jedes vertikale Wischen, das auf dem Rail beginnt — die Seite liess sich über den Büchern nicht mehr scrollen. Mit beiden Achsen entscheidet der Browser anhand der Wischrichtung: quer scrollt das Rail, hoch/runter die Seite. */ touch-action:pan-x pan-y pinch-zoom;overscroll-behavior-x:contain; scrollbar-width:none;-webkit-overflow-scrolling:touch} /* no scroll-snap: snap points are measured on the ROTATED card box, which knocked the rail ~19px off rest and broke the alignment with the heading */ .rail::after{content:"";flex:0 0 var(--rail-pad,var(--s3));height:1px} @media(min-width:1168px){.rail{--rail-pad:calc((100vw - var(--maxw))/2 + var(--s3))}} .rail::-webkit-scrollbar{display:none} @media(hover:hover) and (pointer:fine){ .rail{cursor:grab} .rail.dragging{cursor:grabbing;scroll-behavior:auto} .rail.dragging *{user-select:none} .rail.dragging .bcard{pointer-events:none} } .rail:focus-visible{outline:2px solid var(--pink);outline-offset:-6px;border-radius:8px} /* ——— Fuß unter dem Rail ——————————————————————————————————————————— Der Weg zur Übersichtsseite. Steht im Satzspiegel, während das Rail darüber randlos läuft — der Button richtet sich damit an der linken Textkante der Sektion aus, nicht an der ersten Karte. */ .rail-foot{margin:0} /* ——— Raster statt Rail ———————————————————————————————————————————— Dieselben Karten, nur ohne waagrechtes Scrollen: für die Übersichtsseite, auf der alles auf einen Blick stehen soll. Zwei Dinge müssen zurückgenommen werden, die nur fürs Rail gelten: die feste Kartenbreite (flex:0 0 296px) und die Snap-Ausrichtung. Farbe und Neigung bleiben — die Farbe steht inline an jeder Karte, die Neigung kommt aus :nth-child und zählt im Raster genauso. Kein Kopfraum nötig: das Raster hat kein overflow:hidden, die angehobene Karte wird also nirgends beschnitten. */ /* Die Übersichtsseite: Kopf und Raster gehören zusammen, deshalb trägt nur der Kopf den Abstand nach oben und nur das Raster den nach unten. */ .books-page{padding-bottom:0} .books-page-grid{padding-top:var(--s5)} /* Auf der Übersichtsseite ist der Sektionstitel die H1 der Seite. Er soll aussehen wie ein Sektionstitel, nicht wie die Hero-Überschrift. */ .sec-head h1{font-size:var(--t-3xl);margin:0;color:var(--blue);line-height:1.1} .book-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(4,minmax(0,1fr))} .book-grid .bcard{flex:none;max-width:none;width:100%;scroll-snap-align:none} @media(max-width:1120px){.book-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:860px){.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.book-grid{grid-template-columns:1fr;gap:var(--s3)}} .bcard{scroll-snap-align:start;flex:0 0 296px;max-width:296px;border-radius:22px; padding:14px 14px 38px;display:flex;flex-direction:column;gap:12px;position:relative; background:rgb(var(--card-rgb));perspective:1000px; transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease; box-shadow:0 10px 26px rgba(var(--card-rgb),.34);transform:rotate(var(--rot,0deg))} .bcard:nth-child(odd){--rot:-2deg} .bcard:nth-child(even){--rot:2.2deg} .bcard:nth-child(3n){--rot:-1.2deg} .bcard:hover,.bcard:focus-within{transform:rotate(0deg) translateY(-8px); box-shadow:0 26px 54px rgba(var(--card-rgb),.55),0 6px 16px rgba(var(--card-rgb),.38)} /* 3D cover-open — Level 1 only */ .bcard .cover{transform-origin:left center;backface-visibility:hidden; transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease} .bcard:hover .cover,.bcard:focus-within .cover{transform:rotateY(-42deg);box-shadow:14px 10px 34px rgba(0,0,0,.28)} .bcard .under{position:absolute;inset:14px 14px auto 14px;aspect-ratio:3/4; max-height:min(46vh,340px);border-radius:15px;z-index:0;overflow:hidden; display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px; background:linear-gradient(135deg,rgb(var(--card-rgb)),rgba(0,0,0,.32)); opacity:0;transition:opacity .3s ease} .bcard:hover .under,.bcard:focus-within .under{opacity:1;transition-delay:.14s} .bcard .under span{font-family:var(--display);font-style:italic;color:var(--cream); font-size:.95rem;letter-spacing:.01em;opacity:.92} .bcard>.tags,.bcard>h3,.bcard>.by,.bcard>.desc{position:relative;z-index:1} .bcard>.cover{position:relative;z-index:2} /* the WHOLE card is the link. One anchor stretched over the card keeps a single tab stop and one clear link text; the "weiterlesen" chip below is the visual affordance only, so there is no nested-anchor / double-focus problem. */ .bcard .card-link{position:absolute;inset:0;z-index:4;border-radius:22px} .bcard .card-link:focus-visible{outline:3px solid var(--cream);outline-offset:-5px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* "weiterlesen" sliding up from the bottom edge — Level 1 only */ .bcard .reveal-cta{position:absolute;left:14px;bottom:-2px;z-index:3; display:inline-flex;align-items:center;gap:.5em;border-radius:6px; font-family:var(--display);font-size:.88rem;letter-spacing:.04em;color:var(--blue); background:var(--pink);padding:.6em 1em; box-shadow:0 4px 0 0 var(--pink-edge),0 10px 22px rgba(var(--card-rgb),.55); transform:translateY(120%);opacity:0; transition:transform .38s cubic-bezier(.2,.8,.25,1),opacity .24s ease,box-shadow .16s ease} .bcard:hover .reveal-cta,.bcard:focus-within .reveal-cta{transform:translateY(38%);opacity:1; box-shadow:0 2px 0 0 var(--pink-edge),0 6px 14px rgba(var(--card-rgb),.5)} .bcard .reveal-cta .label{white-space:nowrap} .bcard .reveal-cta .arrow{display:flex;align-items:center;transition:transform .18s ease} .bcard:hover .reveal-cta .arrow,.bcard:focus-within .reveal-cta .arrow{transform:translateX(3px)} /* shared cover treatment: the real cover rests ON the candy colour, never cropped — book proportions vary too much for object-fit:cover */ .cover{position:relative;border-radius:15px;overflow:hidden;aspect-ratio:3/4; max-height:min(46vh,340px);display:flex;align-items:center;justify-content:center; padding:var(--s2);background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(0,0,0,.14)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} .cover img{width:auto;height:100%;max-width:100%;object-fit:contain;display:block;border-radius:3px; filter:drop-shadow(0 10px 18px rgba(0,0,0,.34))} .cover .ph{font-family:var(--display);font-style:italic;font-size:var(--t-lg); text-align:center;line-height:1.1;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)} .badge{position:absolute;top:10px;right:10px;z-index:2;min-width:34px;height:34px;padding:0 9px; border-radius:100px;background:var(--cream);color:var(--blue); display:flex;align-items:center;justify-content:center; font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.06em; box-shadow:0 4px 12px rgba(0,0,0,.2)} .bcard .tags{display:flex;flex-wrap:wrap;gap:6px} .bcard .tag{font-family:var(--body);font-weight:600;font-size:.68rem;letter-spacing:.02em; padding:.32em .75em;border-radius:100px;color:var(--blue);background:var(--cream)} /* Die Sprache stand bis August 2026 als rundes Abzeichen auf dem Cover. Dort lag sie auf der Buchtypografie und drehte beim Aufklappen mit weg — als erster Chip über dem Titel ist sie ruhiger zu lesen und gehört sichtbar zu Genre und Empfehlung. Etwas weiter gesperrt: zwei Großbuchstaben wirken in der Laufweite der Genre-Chips gedrungen. */ .bcard .tag-lang{letter-spacing:.08em} .bcard h3{font-size:1.44rem;line-height:1.06;margin:0;color:var(--blue)} .bcard .by{font-size:.8rem;font-weight:400;color:var(--blue);opacity:.72;margin:-6px 0 0} .bcard .desc{font-family:var(--display);font-style:italic;font-size:.9rem;font-weight:400; line-height:1.35;color:var(--blue);opacity:.88;margin:0 0 auto} /* ——— LEVEL 2 · secondary book rows (Favoriten, Kundenempfehlungen) ——— */ /* Team- und Kundenempfehlungen sind EINE Sektion — semantisch gehören sie zusammen, deshalb eine Dachüberschrift und zwei beschriftete Reihen statt zweier Sektionen mit Trennlinie. Die Fläche ist blau: davor liegt „Über uns" auf Creme, und zwei Creme-Flächen hintereinander verschwimmen zu einem Block. */ .bookrow{background:var(--blue);color:var(--cream)} /* Beschriftung einer Reihe innerhalb der Sektion — leiser als eine sec-head */ .row-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap; margin:0 0 var(--s4);padding-bottom:var(--s2);border-bottom:1px solid var(--line-blue)} .row-head h3{font-family:var(--display);font-weight:300;font-size:var(--t-xl); color:var(--cream);margin:0;letter-spacing:-.01em} .row-head p{font-family:var(--body);font-size:var(--t-sm);color:var(--pink-soft);margin:0} /* Level-2 rails: same full-bleed/drag mechanics as New Arrivals, but compact cards, a flatter shadow and no 3D — the volume stays below Level 1. */ .rail--compact{padding:26px 0 40px var(--rail-pad,var(--s3));gap:var(--s3);align-items:flex-start} .rail--compact .scard{flex:0 0 230px;max-width:230px;scroll-snap-align:start} /* Luft zwischen den beiden Reihen, ohne sie zu trennen */ .rail + .row-head{margin-top:var(--s6)} /* auf Blau brauchen die Karten etwas mehr Schattentiefe, um zu schweben */ .bookrow .scard{box-shadow:0 10px 26px rgba(0,0,0,.28)} .bookrow .scard:hover,.bookrow .scard:focus-visible{ box-shadow:0 22px 44px rgba(0,0,0,.36),0 8px 18px rgba(var(--card-rgb),.4)} .scard{position:relative;border-radius:16px;padding:12px;text-decoration:none; background:rgb(var(--card-rgb));display:flex;flex-direction:column;gap:10px; box-shadow:0 8px 20px rgba(var(--card-rgb),.32);transform:rotate(var(--rot,0deg)); transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease} .scard:hover,.scard:focus-visible{transform:rotate(0) translateY(-6px); box-shadow:0 18px 38px rgba(var(--card-rgb),.46)} .scard:nth-child(odd){--rot:-1.4deg} .scard:nth-child(even){--rot:1.4deg} .scard .cover{aspect-ratio:3/4;border-radius:10px;padding:12px;max-height:none} .scard .badge{top:8px;right:8px;min-width:30px;height:30px;font-size:.62rem} .scard .pills{display:flex;flex-wrap:wrap;gap:5px} .scard .pill{font-family:var(--body);font-weight:600;font-size:.66rem;letter-spacing:.01em;color:var(--blue); background:var(--cream);border-radius:100px;padding:.28em .7em} .scard h3{font-family:var(--display);font-weight:400;font-size:1.12rem;color:var(--blue);margin:0;line-height:1.1} .scard .author{font-size:.78rem;color:var(--blue);opacity:.72;margin:-6px 0 0} .scard .qt{font-family:var(--display);font-style:italic;font-size:.88rem;color:var(--blue);margin:0; background:var(--cream);border-radius:10px;padding:9px 11px;line-height:1.35} .scard .heart-tag{display:inline-flex;align-items:center;gap:.4em;font-family:var(--body);font-weight:600; font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);opacity:.75} .scard .heart-tag::before{content:"♥";color:var(--cream);opacity:1;font-size:1.15em} /* ——— language department panels (blue) ——— */ .lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)} .lang-panel{display:flex;flex-direction:column;gap:var(--s1);text-decoration:none;color:var(--cream); background:rgba(255,255,255,.05);border:1px solid var(--line-blue);border-radius:14px; padding:var(--s4);transition:transform .2s ease,background .2s ease,border-color .2s ease} .lang-panel:hover{transform:translateY(-6px);background:rgba(248,141,167,.1);border-color:var(--pink)} .lang-code{font-family:var(--body);font-weight:600;font-size:.8rem;letter-spacing:.16em; color:var(--pink-soft);margin-bottom:var(--s2)} .lang-panel h3{font-family:var(--display);font-weight:300;font-size:var(--t-2xl);margin:0;color:var(--cream)} .lang-count{color:var(--muted-blue);font-size:var(--t-sm);margin:0} .lang-go{margin-top:auto;padding-top:var(--s3);font-family:var(--display);font-style:italic;font-size:var(--t-lg);color:var(--pink)} .lang-panel:hover .lang-go{color:var(--cream)} /* ——— ÜBER UNS ——— */ .about{background:var(--cream)} .about .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:center} .about-lede{font-family:var(--display);font-weight:300;font-size:var(--t-3xl);line-height:1.1; margin:0 0 var(--s4);color:var(--blue);letter-spacing:-.01em} .about-body p{color:var(--muted-ink);font-size:var(--t-base);line-height:1.6;margin:0 0 var(--s3);max-width:52ch} .about-figure{position:relative;margin:0} .about-figure::before{content:"";position:absolute;inset:-14px -14px auto auto;width:120px;height:120px; border-radius:24px;background:var(--pink-soft);opacity:.5;z-index:-1;transform:rotate(-8deg)} /* ——— Slideshow —————————————————————————————————————————————————— Fester 4:3-Rahmen, weil die Bilder von 0,75 (hochkant) bis 1,43 reichen — ohne festen Rahmen springt das Layout bei jedem Wechsel. Die Bilder liegen übereinander und blenden über, das vermeidet jeden Umbruch. */ .slideshow{position:relative;border-radius:20px;overflow:hidden;background:var(--cream); box-shadow:0 24px 60px rgba(32,39,130,.16);transform:rotate(1.5deg)} .slide-track{position:relative;aspect-ratio:4/3} .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; opacity:0;transition:opacity .7s ease;pointer-events:none} .slide.is-active{opacity:1} /* Die Zeichnung ist heller als die Fotos und verträgt keinen Beschnitt am Rand */ .slide.contain{object-fit:contain;background:var(--cream)} /* Steuerung sitzt unten, nicht mittig über dem Motiv — beim Zitat-Foto verdeckten mittige Pfeile den Text. Ein zarter Verlauf hält beides auf hellen Fotos lesbar. */ .slide-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;height:74px;pointer-events:none; background:linear-gradient(0deg,rgba(18,22,60,.45),rgba(18,22,60,0))} .slide-nav{position:absolute;bottom:14px;z-index:3; width:38px;height:38px;border-radius:50%;border:0;cursor:pointer; background:rgba(254,253,249,.92);color:var(--blue);font-size:1rem;line-height:1; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.22);transition:background .18s,transform .18s} .slide-nav:hover{background:var(--cream);transform:scale(1.08)} .slide-nav.prev{right:60px} .slide-nav.next{right:14px} .slide-dots{position:absolute;left:16px;bottom:24px;z-index:3;display:flex;gap:7px} .slide-dots button{width:9px;height:9px;padding:0;border:0;border-radius:100px;cursor:pointer; background:rgba(254,253,249,.65);box-shadow:0 1px 4px rgba(0,0,0,.35); transition:width .22s ease,background .22s ease} .slide-dots button:hover{background:var(--cream)} .slide-dots button[aria-current="true"]{width:24px;background:var(--pink)} @media(max-width:640px){ .slide-nav{width:34px;height:34px;font-size:.94rem;bottom:12px} .slide-nav.prev{right:52px}.slide-nav.next{right:12px} .slide-dots{left:12px;bottom:21px} } /* real distinction: Buchhandlung des Jahres 2025 */ .award{display:inline-flex;align-items:center;gap:var(--s3);margin-top:var(--s4); background:#fff;border:1px solid var(--line-cream);border-radius:100px;padding:10px 22px 10px 12px; box-shadow:0 10px 26px rgba(32,39,130,.1);text-decoration:none} .award img{width:44px;height:auto;display:block} .award .t{font-family:var(--display);font-size:1rem;color:var(--blue);line-height:1.2} .award .s{font-family:var(--body);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; color:var(--muted-ink);display:block;margin-top:2px} /* ——— EVENTS (blue, multi-event) ——— */ .events{background:var(--blue);color:var(--cream)} .ev-list{display:flex;flex-direction:column;gap:var(--s3)} .ev{display:grid;gap:var(--s4);align-items:center; grid-template-columns:88px auto 1fr auto; grid-template-areas:"date poster info lang"; text-decoration:none;color:var(--cream);background:rgba(255,255,255,.05); border:1px solid var(--line-blue);border-radius:18px;padding:var(--s3) var(--s4) var(--s3) var(--s3); transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease} .ev:hover{transform:translateY(-4px);background:rgba(248,141,167,.1);border-color:var(--pink); box-shadow:0 18px 38px rgba(0,0,0,.22)} .ev-date{grid-area:date;text-align:center;border-right:1px solid var(--line-blue);padding-right:var(--s3); align-self:stretch;display:flex;flex-direction:column;justify-content:center} .ev-day{font-family:var(--display);font-size:var(--t-3xl);line-height:1;color:var(--pink)} .ev-month{font-family:var(--body);font-weight:500;font-size:.7rem;letter-spacing:.18em; text-transform:uppercase;color:var(--muted-blue);margin-top:6px} .ev-info{grid-area:info} .ev-lang{grid-area:lang} /* ——— adaptive poster slot ——————————————————————————————————————— Event artwork arrives in every format: 3:1 web banners, A4 portrait flyers, square social tiles. Instead of forcing one crop, the slot takes the picture's OWN proportions from --poster-ar, so nothing is ever cut off. --poster-ar is authored inline and corrected from the real file by JS. · upright / square (ar < 1.8) → fixed-height thumbnail beside the text · wide banner (ar ≥ 1.8) → full-width band above the text Events with no artwork simply carry .poster-none. */ .ev-poster{grid-area:poster;margin:0;border-radius:12px;overflow:hidden;background:var(--blue-deep); box-shadow:0 10px 22px rgba(0,0,0,.3); aspect-ratio:var(--poster-ar,1);height:clamp(96px,10vw,132px);width:auto} .ev-poster img{width:100%;height:100%;object-fit:cover;display:block} /* wide banner: spans the whole card, text moves underneath */ .ev.poster-wide{grid-template-columns:88px 1fr auto; grid-template-areas:"poster poster poster" "date info lang";row-gap:var(--s4)} .ev.poster-wide .ev-poster{width:100%;height:auto;max-width:100%} /* no artwork: the poster column collapses */ .ev.poster-none{grid-template-columns:88px 1fr auto;grid-template-areas:"date info lang"} .ev-type{font-family:var(--body);font-weight:500;font-size:.72rem;letter-spacing:.22em; text-transform:uppercase;color:var(--pink);margin:0 0 6px} .ev-title{font-family:var(--display);font-weight:300;font-size:var(--t-xl);line-height:1.15; margin:0;color:var(--cream)} .ev-meta{font-size:.86rem;color:var(--pink-soft);margin:8px 0 0} .ev-desc{font-size:.9rem;color:var(--muted-blue);margin:6px 0 0;max-width:60ch} .ev-lang{flex:0 0 auto;min-width:38px;height:38px;padding:0 11px;border-radius:100px;justify-self:end; background:var(--cream);color:var(--blue);display:flex;align-items:center;justify-content:center; font-family:var(--body);font-weight:600;font-size:.74rem;letter-spacing:.06em} .ev-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s3); flex-wrap:wrap;margin-top:var(--s5)} .ev-note{font-size:.86rem;color:var(--muted-blue);margin:0} /* ——— STEPS (So bestellen Sie) ——— */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)} .step .n{font-family:var(--display);font-style:italic;font-size:var(--t-5xl);color:var(--pink-soft);line-height:.9} .step h3{font-size:var(--t-lg);margin:var(--s3) 0 .3em;color:var(--cream)} .step p{font-size:var(--t-sm);color:var(--muted-blue);margin:0} .step strong{color:var(--cream);font-weight:400} /* ——— FORMS ——— */ .formcard{margin-top:var(--s7);background:rgba(255,255,255,.05);border:1px solid var(--line-blue); border-radius:20px;padding:var(--s5);max-width:760px} .formcard h3{font-size:var(--t-2xl);margin:0 0 var(--s2);color:var(--cream)} .formcard p.hint{color:var(--muted-blue);margin:0 0 var(--s4);font-size:var(--t-sm);max-width:56ch} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s3)} .field label{font-family:var(--body);font-weight:500;font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--pink-soft)} .field input,.field textarea{font-family:var(--body);font-size:var(--t-base);font-weight:300; color:var(--cream);background:rgba(255,255,255,.08);border:1px solid var(--line-blue); border-radius:8px;padding:.8em 1em;width:100%} .field textarea{min-height:130px;resize:vertical} .field input::placeholder,.field textarea::placeholder{color:rgba(201,203,228,.62)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--pink);background:rgba(255,255,255,.12)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} .form-note{margin:var(--s3) 0 0;font-size:.84rem;color:var(--muted-blue)} .form-note a{color:var(--pink)} .form-status{margin:var(--s3) 0 0;font-family:var(--display);font-style:italic;color:var(--pink); font-size:var(--t-base);min-height:1.5em} /* ——— CTA band ——— */ .cta-band{background:var(--pink);color:var(--blue);text-align:center;padding:var(--s6) 0} .cta-band h2{font-size:var(--t-3xl);margin:0 0 var(--s2);color:var(--blue)} .cta-band h2 em{color:var(--cream);font-style:italic} .cta-band p{max-width:52ch;margin:0 auto var(--s4);color:var(--blue);opacity:.82} /* ——— BENEFITS ——— */ .benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)} .benefit{text-align:center} .benefit .num{font-family:var(--display);font-style:italic;font-size:var(--t-2xl);color:var(--pink-ink); line-height:1;display:block;margin-bottom:var(--s2)} .benefit h3{font-size:var(--t-lg);margin:0 0 .3em;color:var(--blue)} .benefit p{font-size:var(--t-sm);color:var(--muted-ink);margin:0} /* ——— BÜCHERABO ——— */ .abo .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s7);align-items:center} .abo-lede{font-family:var(--display);font-size:var(--t-3xl);line-height:1.1;margin:0 0 var(--s3);color:var(--blue)} .abo-text p:not(.eyebrow){color:var(--muted-ink);margin:0 0 var(--s3);max-width:46ch} .abo-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} .abo-card{border-radius:18px;padding:var(--s4);background:rgb(var(--card-rgb)); box-shadow:0 12px 30px rgba(var(--card-rgb),.4);transform:rotate(var(--rot,0deg)); transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease} .abo-card:nth-child(odd){--rot:-1.5deg} .abo-card:nth-child(even){--rot:1.5deg} .abo-card:hover{transform:rotate(0) translateY(-6px);box-shadow:0 22px 44px rgba(var(--card-rgb),.5)} .abo-card h3{font-size:var(--t-lg);margin:0 0 var(--s2);color:var(--blue)} .abo-price{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid rgba(32,39,130,.16)} .abo-price b{font-family:var(--display);font-weight:400;font-size:1.24rem;color:var(--blue)} .abo-price span{font-size:.76rem;color:var(--blue);opacity:.72} /* ——— Bücherabo, zweite Fassung ———————————————————————————————————— Der längere Text braucht drei Dinge, die die kurze Fassung nicht hat: Zwischenüberschriften, eine Frageliste und eine Textspalte, die höher sein darf als die Karten daneben. */ /* Die Karten stehen sonst mittig zur Textspalte — bei doppelter Texthöhe schwebten sie in der Mitte, weit weg von der Überschrift, zu der sie gehören. Oben ausgerichtet bleiben sie im Blickfeld. */ .abo--lang .wrap{align-items:start} .abo-h{ font-family:var(--display);font-weight:300;font-size:var(--t-xl); color:var(--blue);margin:var(--s5) 0 var(--s2);letter-spacing:-.01em; } .abo-h + p{margin-top:0} /* Die Fragen sind Zwischenschritte, keine Abschnittstitel — deshalb in der Grundschrift und nur durch Gewicht abgesetzt, nicht durch Größe. */ .abo-fragen h4{ font-family:var(--body);font-weight:500;font-size:var(--t-base); color:var(--ink);margin:var(--s3) 0 var(--s1); } .abo-fragen h4:first-child{margin-top:0} .abo-fragen ul{ margin:0 0 var(--s2);padding:0;list-style:none; color:var(--muted-ink);max-width:46ch; } .abo-fragen li{position:relative;padding-left:1.1em;margin:.25em 0} /* Rosa Punkt statt Aufzählungszeichen — dieselbe Akzentfarbe wie die Trennlinien der Preistafel, nur kleiner. */ .abo-fragen li::before{ content:"";position:absolute;left:0;top:.62em; width:5px;height:5px;border-radius:50%;background:var(--pink); } .abo-fragen p{margin:0 0 var(--s2)} .abo-hinweis{font-size:var(--t-sm)} @media(max-width:900px){ .abo-h{margin-top:var(--s4)} } /* ——— NEWSLETTER ——— */ .newsletter{background:var(--blue);color:var(--cream);position:relative;overflow:hidden} .newsletter::before{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px; border-radius:50%;background:rgba(248,141,167,.14)} .newsletter::after{content:"";position:absolute;left:-60px;bottom:-100px;width:280px;height:280px; border-radius:50%;background:rgba(248,141,167,.08)} .newsletter .wrap{position:relative;z-index:1;max-width:760px;text-align:center;margin-inline:auto} .newsletter h2{font-size:var(--t-3xl);color:var(--cream);margin:0 0 var(--s3)} .newsletter p.nl-lead{color:var(--muted-blue);font-size:var(--t-base);line-height:1.6; max-width:56ch;margin:0 auto var(--s5)} .nl-form{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;align-items:flex-end} .nl-form .field{flex:1 1 180px;min-width:0;margin-bottom:0;text-align:left} .nl-form .btn{flex:0 0 auto} /* ——— KONTAKT ——— */ .contact-sec{background:var(--cream)} .contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s6)} .contact-item{border-top:2px solid var(--pink);padding-top:var(--s3)} .contact-item .c-label{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--muted-ink);margin:0 0 var(--s2)} .contact-item a,.contact-item p{font-family:var(--display);font-size:var(--t-lg);color:var(--blue); text-decoration:none;margin:0;line-height:1.3;display:block} .contact-item a:hover{color:var(--pink)} .contact-social{display:flex;gap:var(--s3);margin-top:var(--s6);align-items:center;flex-wrap:wrap} .contact-social a{font-family:var(--body);font-size:var(--t-sm);letter-spacing:.04em;color:var(--blue); text-decoration:none;border-bottom:2px solid var(--pink);padding-bottom:2px;transition:.18s} .contact-social a:hover{color:var(--pink)} /* ——— FOOTER ——— */ footer{background:var(--blue);color:var(--muted-blue);padding:var(--s7) 0 var(--s4)} .f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--s5)} footer h4{font-family:var(--body);font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase; color:var(--cream);margin:0 0 var(--s3)} footer a{display:block;color:var(--muted-blue);text-decoration:none;font-size:var(--t-sm);margin-bottom:.5em} footer a:hover{color:var(--pink)} .f-logo{font-family:var(--display);font-size:var(--t-2xl);color:var(--cream)} .f-base{border-top:1px solid var(--line-blue);margin-top:var(--s6);padding-top:var(--s3); display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);font-size:var(--t-xs)} .f-legal a{display:inline;color:var(--muted-blue);text-decoration:none;margin:0} .f-legal a:hover{color:var(--pink)} /* ——— reduced motion ——— */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} .hero .stagger>*{opacity:1;transform:none} .blob-field .drift,.blob-field .drift-2,.blob-field .drift-3{animation:none} .blob-field animate{display:none} /* the closing wave stays, it just stops rolling */ .hero-wave animate{display:none} /* the night sky stays, it just stops twinkling */ .hero.night .blob-field .stars circle{animation:none} .hero,.hero .hero-eyebrow,.hero h1,.hero p.lead,.hero .btn-ghost{transition:none} .entrance{display:none} .bcard,.bcard .cover,.bcard .under,.bcard .reveal-cta,.scard,.ev,.abo-card{transition:none} /* Slideshow: kein Überblenden, kein automatischer Wechsel (siehe Skript) */ .slide{transition:none} .bcard:hover .cover,.bcard:focus-within .cover{transform:none} .bcard .under{display:none} .bcard .reveal-cta{transform:translateY(38%);opacity:1} } /* ——— responsive ——— */ @media(max-width:1120px){.hero h1{max-width:13ch}} @media(max-width:1080px){ .nav .links a:not(.nav-cta){display:none} .nav .links .navwrap{display:none} .burger{display:inline-flex} } @media(max-width:960px){ /* tablet: the wide banner still spans, upright/square posters stay beside the text rather than leaving a half-empty row */ .ev{grid-template-columns:76px auto 1fr auto;gap:var(--s3)} .ev.poster-wide{grid-template-columns:76px 1fr auto;row-gap:var(--s3); grid-template-areas:"poster poster poster" "date info lang"} .ev.poster-none{grid-template-columns:76px 1fr auto;grid-template-areas:"date info lang"} .ev-poster{height:clamp(104px,15vw,140px)} } @media(max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} .f-grid{grid-template-columns:1fr 1fr} .about .wrap,.abo .wrap{grid-template-columns:1fr;gap:var(--s5)} .about-figure{order:-1;max-width:520px} .contact-grid{grid-template-columns:1fr 1fr} .benefits{grid-template-columns:1fr 1fr;gap:var(--s4)} .lang-grid{grid-template-columns:1fr} } @media(max-width:640px){ :root{--t-5xl:2.9rem;--t-4xl:2.4rem;--t-3xl:1.9rem;--t-2xl:1.7rem;--s8:72px;--s7:56px} .eyebrow{letter-spacing:.18em} .bcard{flex-basis:78vw;max-width:78vw} .scroll-ctrls{display:none} .f-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr;gap:var(--s3)} .step{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:0 var(--s3);text-align:left} .step .n{grid-row:1/3;line-height:1;align-self:start} .step h3{margin:0 0 .3em} .contact-grid{grid-template-columns:1fr} .rail--compact .scard{flex-basis:62vw;max-width:62vw} .abo-cards{grid-template-columns:1fr} .about-lede,.abo-lede{font-size:var(--t-2xl)} .hero{min-height:auto;display:block} .hero-inner{padding-bottom:var(--s6)} .cta-split{font-size:var(--t-base)} .nav .util .contact{display:none} .nav .util .wrap{justify-content:center;padding:0 16px} .nav .main .wrap{gap:12px;padding:0 16px} .nav .links a.nav-cta{letter-spacing:.06em;padding:.55em .85em;font-size:.76rem} .logo{font-size:1.2rem} .logo small{letter-spacing:.24em;font-size:.46rem} .formcard{padding:var(--s4)} .field-row{grid-template-columns:1fr} /* phone: every format moves above the text; the banner fills the width, upright and square posters keep their own size so nothing is letterboxed */ .ev,.ev.poster-wide{grid-template-columns:64px 1fr;row-gap:var(--s3);padding:var(--s3); grid-template-areas:"poster poster" "date info" "lang lang"} .ev.poster-none{grid-template-columns:64px 1fr;grid-template-areas:"date info" "lang lang"} .ev-poster{height:clamp(150px,42vw,220px)} .ev.poster-wide .ev-poster{width:100%;height:auto} .ev-lang{justify-self:start} .ev-day{font-size:var(--t-2xl)} .nl-form{flex-direction:column;align-items:stretch} .nl-form .btn{align-self:center} } @media(max-width:400px){ .benefits{grid-template-columns:1fr} .eyebrow{letter-spacing:.12em} .f-logo{font-size:1.7rem} .logo{font-size:1.05rem} .logo small{letter-spacing:.18em} .nav .links a.nav-cta{padding:.5em .7em;font-size:.68rem;letter-spacing:.03em} .nav .main .wrap{padding:0 12px;gap:8px} .burger{margin-right:4px;font-size:1.35rem} .award{padding:8px 16px 8px 8px;gap:var(--s2)} } /* without JS there is no typewriter and no reveal — show everything at once */ .entrance{display:none} body.entrance-active{overflow:visible} .hero .stagger>*{opacity:1;transform:none} .reveal{opacity:1;transform:none} /* ═══════════════════════════════════════════════════════════════════════════ Ergänzungen der WordPress-Fassung --------------------------------------------------------------------------- Nur das, was erst durch WordPress dazukommt: die Grundtypografie gegen zwei fremde Stylesheets behaupten, Sprachlinks statt Knöpfe, Formular­rückmeldungen, der Redaktionshinweis an offenen Bereichen. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 0 · Grundtypografie zurückholen ─────────────────────────────────────── Zwei Stylesheets greifen in WordPress in dieselben Elemente: hello-elementor/reset.css body{font-family:-apple-system,…;font-weight:400} h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500} Elementor-Kit .elementor-kit-7{font-family:"Roboto"} Die Regeln des Entwurfs sind reine Elementselektoren (body, h1,h2,h3) und damit gleich stark wie Hellos — wer später kommt, gewinnt. Und gegen die Kit-Klasse (0,1,0) verliert `body` ohnehin. Deshalb hier dieselben Werte noch einmal, aber unter .bhl-page. Das ist 0,1,0 für den Rumpf und 0,1,1 für die Überschriften — stark genug, ohne irgendwo !important zu brauchen. Die Werte stammen unverändert aus dem Entwurf; ändert sich dort etwas, gehört es auch hierher. Zusätzlich lädt das Theme sein Stylesheet erst nach den beiden anderen (siehe inc/assets.php) — Reihenfolge und Spezifität zusammen. */ .bhl-page{ background:var(--cream); color:var(--ink); font-family:var(--body); font-size:var(--t-base); font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* Die Serifenschrift der Überschriften — der eigentliche Befund. */ .bhl-page h1, .bhl-page h2, .bhl-page h3{ font-family:var(--display); font-weight:300; letter-spacing:-.01em; font-optical-sizing:auto; } /* h4–h6 nutzt der Entwurf nicht als Titel; sie sollen wie Fließtext aussehen und nicht mit Hellos Gewicht 500 herausstechen. */ .bhl-page h4, .bhl-page h5, .bhl-page h6{ font-family:var(--body); font-weight:500; } /* Hello setzt Formularelemente auf font-family:inherit und Knöpfe auf 400. */ .bhl-page input, .bhl-page textarea, .bhl-page select{ font-family:var(--body); font-weight:300; } .bhl-page .btn, .bhl-page .btn-raised, .bhl-page .cta-split, .bhl-page .btn-ghost{ font-family:var(--display); font-weight:300; } .bhl-page .eyebrow, .bhl-page .hero-eyebrow{ font-family:var(--body); font-weight:500; } /* Betonung: Hello rührt nicht an, das Kit aber setzt die Schriftfamilie auf dem Rumpf — ohne diese Zeile erbt eine kursive Stelle in einer Überschrift die falsche Schrift. */ .bhl-page em{ font-family:inherit; font-style:italic; } /* Der Umschalter gibt aus, die Vorlage stylte