/* Trendfokus — Magazin-Stil. Leitfarbe pro Ausgabe: --leit im überschreiben. */ :root{ color-scheme:light; --leit:#e5432a; --leit-tief:#b3301b; --papier:#f5efe4; --papier2:#ece4d5; --weiss:#fffdf8; --tinte:#11262e; --tinte2:#34505a; --mut:#76878b; --linie:#d9cfbd; --fluss:#1b6e8e; --alpen:#2f8a52; --teal:#0f7f73; --violett:#6a45b0; --ocker:#d9a21b; --braun:#8a5733; --serif:"Didot","Bodoni 72","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;padding:0} body{background:var(--papier);color:var(--tinte);font:17px/1.62 var(--sans);-webkit-font-smoothing:antialiased} a{color:inherit} img,svg{display:block;max-width:100%} .innen{max-width:1120px;margin:0 auto;padding:0 28px} /* Kopf */ .kopf{background:var(--papier);border-bottom:2px solid var(--tinte)} .kopf .innen{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:16px;padding-bottom:14px} .marke{font:700 30px/1 var(--serif);letter-spacing:-.01em;text-decoration:none;color:var(--tinte)} .marke i{font-style:italic;color:var(--leit)} .nav{display:flex;gap:22px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .nav a{text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent} .nav a:hover,.nav a[aria-current]{border-bottom-color:var(--leit)} /* Titel */ .cover{background:var(--leit);color:var(--papier);overflow:hidden} .cover .innen{display:grid;grid-template-columns:1.25fr .9fr;gap:36px;align-items:center;padding-top:56px;padding-bottom:56px} .ausgabe{font-size:12.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;display:flex;gap:14px;flex-wrap:wrap;align-items:center} .ausgabe b{background:var(--tinte);color:var(--papier);padding:6px 11px;letter-spacing:.16em} .cover h1{font:700 clamp(2.5rem,5.6vw,5rem)/1.02 var(--serif);letter-spacing:-.02em;margin:26px 0 24px} .cover h1 em{font-style:italic;color:var(--tinte)} .cover .lead{font-size:19px;line-height:1.5;max-width:34em;margin:0} .cover .von{margin-top:26px;font-size:13px;letter-spacing:.06em;opacity:.92} .cover svg{width:100%;height:auto} /* Inhaltsleiste */ .inhalt{background:var(--tinte);color:var(--papier)} .inhalt .innen{display:flex;flex-wrap:wrap;gap:6px 26px;padding-top:15px;padding-bottom:15px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .inhalt a{text-decoration:none;opacity:.85} .inhalt a:hover{opacity:1;color:var(--ocker)} .inhalt a span{color:var(--ocker);margin-right:6px;font-family:var(--serif);font-style:italic;letter-spacing:0;text-transform:none;font-size:15px} /* Zahl der Woche */ .zahl .innen{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:center;padding-top:72px;padding-bottom:64px} .etikett{font-size:12.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--leit)} .zahl .gross{font:700 clamp(6rem,17vw,13rem)/.86 var(--serif);letter-spacing:-.04em;margin:12px 0 18px;color:var(--tinte)} .zahl .gross sup{font-size:.38em;vertical-align:top;position:relative;top:.18em;margin-left:.06em;color:var(--leit)} .zahl p{font-size:21px;line-height:1.45;max-width:26em;margin:0} .zahl figcaption{font-size:12.5px;color:var(--mut);margin-top:10px;line-height:1.4} .zahl figure{margin:0} .frist-balken{grid-column:1/-1;border-top:2px solid var(--tinte);padding-top:16px} .frist-balken .zeile{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:14px;font-weight:700;margin-bottom:10px} .frist-balken .zeile span:last-child{color:var(--leit);font-variant-numeric:tabular-nums} .balken{height:14px;background:var(--papier2);position:relative} .balken i{position:absolute;inset:0 auto 0 0;width:0;background:var(--leit);transition:width .9s ease} /* Rubrik-Kopf */ .rubrik{padding-top:64px} .rubrik-kopf{display:flex;align-items:flex-end;gap:20px;border-bottom:2px solid currentColor;padding-bottom:12px;margin-bottom:8px} .rubrik-kopf .nr{font:italic 700 64px/.8 var(--serif);color:var(--c,var(--leit))} .rubrik-kopf h2{font:700 clamp(1.7rem,3.4vw,2.6rem)/1 var(--serif);margin:0;letter-spacing:-.015em} .rubrik-kopf .unter{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-align:right} /* Meldung */ .story{display:grid;grid-template-columns:200px 1fr;gap:36px;padding:34px 0;border-bottom:1px solid var(--linie)} .story:last-child{border-bottom:0} .story .rand{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c,var(--leit))} .story .rand small{display:block;margin-top:8px;color:var(--mut);font-weight:700;letter-spacing:.08em} .story .rand .form{width:64px;height:64px;margin-top:20px;background:var(--c,var(--leit))} .story .rand .form.kreis{border-radius:50%} .story .rand .form.halb{border-radius:64px 64px 0 0;height:32px} .story .rand .form.viertel{border-radius:0 64px 0 0} .story .rand .form.raute{transform:rotate(45deg) scale(.72)} .story h3{font:700 clamp(1.5rem,2.6vw,2.05rem)/1.14 var(--serif);letter-spacing:-.012em;margin:0 0 14px} .story p{margin:0 0 14px;color:var(--tinte2);max-width:40em} .story p b{color:var(--tinte)} .num{font-weight:800;color:var(--tinte);font-variant-numeric:tabular-nums} .heisst{margin-top:18px;padding:18px 22px;background:var(--weiss);border-left:6px solid var(--c,var(--leit));max-width:44em} .heisst b:first-child{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--c,var(--leit));margin-bottom:6px} .heisst p{margin:0;color:var(--tinte);font-size:16.5px} /* Farbflächen-Feature */ .flaeche{background:var(--bg,var(--teal));color:var(--papier);margin-top:64px} .flaeche .innen{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-top:64px;padding-bottom:64px} .flaeche .etikett{color:var(--ocker)} .flaeche h3{font:700 clamp(1.9rem,3.6vw,3rem)/1.06 var(--serif);margin:14px 0 18px;letter-spacing:-.015em} .flaeche p{margin:0 0 14px;opacity:.95} .flaeche .heisst{background:rgba(0,0,0,.2);border-left-color:var(--ocker)} .flaeche .heisst b:first-child{color:var(--ocker)} .flaeche .heisst p{color:var(--papier)} .chart-titel{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px} .bar{display:grid;grid-template-columns:150px 1fr 64px;gap:12px;align-items:center;margin-bottom:11px;font-size:14.5px;font-weight:700} .bar .spur{height:26px;background:rgba(255,255,255,.14)} .bar .spur i{display:block;height:100%;width:calc(var(--v)/var(--max,33)*100%);min-width:3px;background:var(--papier)} .bar.top .spur i{background:var(--ocker)} .bar .w{text-align:right;font:700 20px/1 var(--serif);font-variant-numeric:tabular-nums} .chart-fuss{font-size:12.5px;opacity:.8;margin-top:14px;line-height:1.45} /* Salon: Farbe, Form, Mode, Kunst */ .salon{background:var(--tinte);color:var(--papier);margin-top:64px;padding:72px 0} .salon .rubrik-kopf{border-color:var(--papier)} .salon .rubrik-kopf .unter{color:#9fb2b7} .salon-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:32px} .karte{background:#183640;display:flex;flex-direction:column} .karte .bild{aspect-ratio:16/8;overflow:hidden} .karte .bild svg{width:100%;height:100%} .karte .text{padding:26px 28px 30px} .karte .etikett{color:var(--c)} .karte h3{font:700 clamp(1.45rem,2.3vw,1.9rem)/1.14 var(--serif);margin:10px 0 12px} .karte p{margin:0 0 12px;color:#d5dfe0;font-size:16px} .karte p.mut{color:var(--papier);font-weight:600;border-top:1px solid #3a5963;padding-top:12px;margin:14px 0 0} /* Mutmacher */ .mut-block{background:var(--alpen);color:var(--papier)} .mut-block .innen{padding-top:72px;padding-bottom:72px;display:grid;grid-template-columns:200px 1fr;gap:36px} .mut-block .etikett{color:var(--tinte)} .mut-block blockquote{margin:0;font:italic 700 clamp(1.8rem,3.8vw,3.1rem)/1.14 var(--serif);letter-spacing:-.012em} .mut-block p{max-width:40em;margin:22px 0 0;font-size:18px} /* Fristen */ .fristen{list-style:none;margin:30px 0 0;padding:0;border-left:3px solid var(--tinte)} .fristen li{position:relative;display:grid;grid-template-columns:190px 1fr;gap:20px;padding:0 0 26px 30px;align-items:baseline} .fristen li:before{content:"";position:absolute;left:-10px;top:8px;width:17px;height:17px;border-radius:50%;background:var(--leit);border:3px solid var(--papier)} .fristen li.vorbei:before{background:var(--mut)} .fristen .d{font:700 27px/1 var(--serif);font-variant-numeric:tabular-nums} .fristen li.vorbei .d{color:var(--mut);text-decoration:line-through} /* Drei Dinge */ .drei{background:var(--ocker);color:var(--tinte)} .drei .innen{padding-top:68px;padding-bottom:68px} .drei h2{font:700 clamp(2rem,4.4vw,3.4rem)/1.04 var(--serif);margin:10px 0 36px;letter-spacing:-.015em} .drei .etikett{color:var(--tinte)} .drei ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:d} .drei li{counter-increment:d;border-top:3px solid var(--tinte);padding-top:14px;font-size:16px} .drei li:before{content:counter(d);display:block;font:italic 700 76px/.95 var(--serif);margin-bottom:10px} .drei li b{display:block;font-size:18.5px;line-height:1.3;margin-bottom:8px} /* Quellen & Fuß */ .quellen{padding:48px 0 12px} .quellen summary{cursor:pointer;font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase} .quellen ol{columns:2;column-gap:44px;font-size:13.5px;color:var(--tinte2);padding-left:20px;margin:18px 0 0} .quellen li{margin-bottom:6px;break-inside:avoid} .fuss{background:var(--tinte);color:#c9d5d7;margin-top:48px;font-size:14px} .fuss .innen{padding-top:44px;padding-bottom:44px;display:grid;grid-template-columns:1.5fr 1fr;gap:40px} .fuss .marke{color:var(--papier);font-size:26px;display:inline-block;margin-bottom:12px} .fuss nav{display:flex;flex-direction:column;gap:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12.5px} .fuss nav a{text-decoration:none} .fuss nav a:hover{color:var(--ocker)} .fuss p{margin:0 0 10px;max-width:46em;line-height:1.55} /* Textseiten: Impressum, Datenschutz, Archiv */ .seiten-kopf{background:var(--leit);color:var(--papier)} .seiten-kopf .innen{padding-top:56px;padding-bottom:48px} .seiten-kopf h1{font:700 clamp(2.6rem,6vw,4.6rem)/1 var(--serif);margin:12px 0 0;letter-spacing:-.02em} .seiten-kopf .etikett{color:var(--tinte)} .prosa{max-width:760px;padding-top:48px;padding-bottom:24px} .prosa h2{font:700 27px/1.2 var(--serif);margin:40px 0 10px} .prosa p,.prosa li{color:var(--tinte2)} .prosa address{font-style:normal;background:var(--weiss);border-left:6px solid var(--leit);padding:18px 22px;line-height:1.7;color:var(--tinte)} mark{background:#ffe27a;color:var(--tinte);padding:1px 5px} .hefte{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px} .heft{display:block;text-decoration:none;background:var(--h,var(--leit));color:var(--papier);padding:24px 24px 28px;min-height:270px;transition:transform .15s} .heft:hover{transform:translateY(-4px)} .heft .n{font:italic 700 66px/1 var(--serif)} .heft .dat{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin:6px 0 16px} .heft .t{font:700 20px/1.2 var(--serif)} @media(max-width:860px){ .cover .innen,.zahl .innen,.flaeche .innen,.fuss .innen{grid-template-columns:1fr} .cover .kunst{max-width:340px} .zahl figure{max-width:260px} .story,.mut-block .innen{grid-template-columns:1fr;gap:14px} .story .rand .form{display:none} .salon-raster,.drei ol{grid-template-columns:1fr} .quellen ol{columns:1} .rubrik-kopf .unter{display:none} .fristen li{grid-template-columns:1fr;gap:4px} } @media(max-width:540px){ .innen{padding:0 18px} body{font-size:16px} .nav{gap:14px;font-size:11.5px} .bar{grid-template-columns:104px 1fr 52px;font-size:13px} .rubrik-kopf .nr{font-size:46px} } /* Bilder */ .karte .bild img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)} .nachweis{font-size:11.5px;line-height:1.4;color:var(--mut);margin-top:10px} .karte .nachweis{color:#8fa4aa;margin:14px 0 0} .bild-woche{margin-top:72px;background:var(--papier2)} .bild-woche .innen{display:grid;grid-template-columns:1.55fr 1fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:64px} .bild-woche figure{margin:0} .bild-woche img{width:100%;height:auto;box-shadow:14px 14px 0 var(--tinte)} .bild-woche h3{font:700 clamp(1.9rem,3.4vw,2.9rem)/1.06 var(--serif);margin:12px 0 16px;letter-spacing:-.015em} .bild-woche p{margin:0 0 14px;color:var(--tinte2)} .bild-woche p.mut{color:var(--tinte);font-weight:600;border-top:2px solid var(--tinte);padding-top:14px} @media(max-width:860px){.bild-woche .innen{grid-template-columns:1fr}.bild-woche img{box-shadow:8px 8px 0 var(--tinte)}} .bild-woche + .salon{margin-top:0} /* Oben platziertes Bild der Woche */ .inhalt + .bild-woche{margin-top:0} .story .weiter{margin:16px 0 0;font-size:14.5px;font-weight:700} .story .weiter a{color:var(--c,var(--leit));text-decoration:none;border-bottom:2px solid currentColor} /* In eigener Sache — dezent */ .eigen{display:grid;grid-template-columns:190px 1fr auto;gap:28px;align-items:center;margin-top:44px;padding:20px 26px;border:1px solid var(--linie);background:var(--weiss)} .eigen .logo img{width:100%;height:auto} .eigen .logo.klein{width:44px;color:var(--ocker)} .eigen p{margin:0;font-size:15px;line-height:1.5;color:var(--tinte2)} .eigen .marker{display:block;font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:4px} .eigen .hin{font-size:13px;font-weight:800;letter-spacing:.08em;text-decoration:none;white-space:nowrap;border-bottom:2px solid var(--leit);padding-bottom:2px} .eigen.dunkel{grid-template-columns:44px 1fr auto;background:transparent;border-color:#3a5963;margin-top:32px} .eigen.dunkel p{color:#c4d1d3} .eigen.dunkel .marker{color:#8fa4aa} .eigen.dunkel .hin{border-bottom-color:var(--ocker)} .fuss .traeger{display:block;margin-bottom:14px;text-transform:none;letter-spacing:0} .fuss .traeger{width:150px;opacity:.95} .fuss .traeger img{width:100%;height:auto} .fuss .mehr{margin-top:12px;font-weight:400;letter-spacing:0;text-transform:none;font-size:13.5px;line-height:1.6;color:#9fb2b7} .fuss .mehr a{text-decoration:underline} @media(max-width:860px){.eigen,.eigen.dunkel{grid-template-columns:1fr;gap:12px}.eigen .logo{max-width:170px}} /* Trendbild — Galerie */ .seiten-kopf h1 i{font-style:italic;color:var(--tinte)} .seiten-kopf .unterzeile{font-size:20px;line-height:1.45;max-width:30em;margin:18px 0 0} .galerie{padding-top:72px;padding-bottom:24px} .werk{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:96px} .werk.haupt{grid-template-columns:1.6fr 1fr} .werk:nth-of-type(even) figure{order:2} .werk figure{margin:0} .werk img{width:100%;height:auto;max-height:80vh;object-fit:contain;object-position:left;filter:drop-shadow(14px 14px 0 var(--h,var(--leit)))} .werk:nth-of-type(even) img{object-position:right} .werk .etikett{color:var(--h,var(--leit))} .werk h2{font:700 clamp(1.8rem,3.2vw,2.8rem)/1.08 var(--serif);letter-spacing:-.015em;margin:12px 0 16px} .werk p{margin:0 0 14px;color:var(--tinte2)} .werk .zur{display:inline-block;margin-top:8px;font-size:13px;font-weight:800;letter-spacing:.08em;text-decoration:none;border-bottom:2px solid var(--h,var(--leit));padding-bottom:2px} @media(max-width:860px){.werk,.werk.haupt{grid-template-columns:1fr;gap:20px;margin-bottom:64px}.werk:nth-of-type(even) figure{order:0}.werk img{filter:drop-shadow(8px 8px 0 var(--h,var(--leit)))}} /* Netz & Gespräch: Meme, Social-Media-Trend, Buch-Impuls */ .netz{background:var(--violett);color:var(--papier);padding:72px 0} .netz .rubrik-kopf{border-color:var(--papier)} .netz .rubrik-kopf .unter{color:#d4c6f0} .netz-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:36px} .netz .etikett{color:var(--ocker)} .netz h3{font:700 clamp(1.4rem,2.1vw,1.75rem)/1.15 var(--serif);margin:0 0 12px} .netz p{margin:0 0 12px;font-size:16px;color:#ebe4f7} .netz p.mut{color:var(--papier);font-weight:600;border-top:1px solid rgba(255,255,255,.3);padding-top:12px} .netz .nachweis{color:#cdbdec} .meme{margin:16px 0 20px;background:var(--tinte);padding:22px 20px;display:flex;flex-direction:column;gap:2px;font:900 clamp(1.9rem,3vw,2.6rem)/1 Impact,"Arial Black","Helvetica Neue",sans-serif;text-transform:uppercase;letter-spacing:.01em;color:#fff;-webkit-text-stroke:1px #000;transform:rotate(-1.5deg)} .meme span:last-child{color:var(--ocker)} .meme.klein{background:var(--ocker);color:var(--tinte);-webkit-text-stroke:0;transform:rotate(1.5deg)} .meme.klein span:last-child{color:var(--papier)} .netz blockquote{margin:16px 0 20px;padding:22px 20px;background:var(--papier);color:var(--tinte);font:700 19px/1.4 "Courier New",Courier,monospace} @media(max-width:860px){.netz-raster{grid-template-columns:1fr;gap:48px}} /* Bild der Woche im Hochformat */ .bild-woche.hoch .innen{grid-template-columns:1fr 1.15fr} .bild-woche.hoch img{max-height:760px;width:auto;max-width:100%} .werk.haupt.hoch{grid-template-columns:1fr 1.15fr} /* Meme als eigene Animation (bewegt sich wie ein GIF, ist aber selbst gebaut) */ .meme-film{margin:16px 0 20px;position:relative;overflow:hidden;transform:rotate(-1.5deg)} .meme-film svg{width:100%;height:auto;display:block} .meme-film figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:900 clamp(1.3rem,2vw,1.7rem)/1 Impact,"Arial Black","Helvetica Neue",sans-serif;text-transform:uppercase;color:#fff;-webkit-text-stroke:1px #000;letter-spacing:.02em} .meme-film figcaption span:last-child{color:var(--ocker)} .netz .weiter{margin:12px 0 0;font-size:14px;font-weight:700} .netz .weiter a{color:var(--ocker);text-decoration:none;border-bottom:2px solid currentColor} .jim-lauf{animation:jim-lauf 9s linear infinite} .jim-wackel{transform-box:fill-box;transform-origin:50% 100%;animation:jim-wackel .5s ease-in-out infinite alternate} .jim-bein{transform-box:fill-box;transform-origin:50% 0} .jim-bein.a{animation:jim-bein .5s ease-in-out infinite alternate} .jim-bein.b{animation:jim-bein .5s ease-in-out infinite alternate-reverse} .jim-schwanz{transform-box:fill-box;transform-origin:100% 50%;animation:jim-schwanz 1s ease-in-out infinite alternate} @keyframes jim-lauf{from{transform:translateX(-120px)}to{transform:translateX(400px)}} @keyframes jim-wackel{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(3deg) translateY(-2px)}} @keyframes jim-bein{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}} @keyframes jim-schwanz{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}} @media(prefers-reduced-motion:reduce){.jim-lauf{animation:none;transform:translateX(120px)}.jim-wackel,.jim-bein,.jim-schwanz{animation:none}} /* Profile */ .sozial{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center} .sozial a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:15px;color:var(--tinte);border:2px solid var(--tinte);padding:9px 15px;transition:.15s} .sozial a:hover{background:var(--tinte);color:var(--papier);--icon-bg:var(--tinte)} .sozial a.web{background:var(--leit);border-color:var(--leit);color:var(--papier)} .sozial a.web:hover{background:var(--tinte);border-color:var(--tinte)} .fuss .sozial.klein{gap:14px;margin:0 0 16px} .fuss .sozial.klein a{border:0;padding:0;color:var(--papier);opacity:.85} .fuss .sozial.klein a:hover{background:none;color:var(--ocker);opacity:1} .fuss .marke i{color:var(--ocker)} .prosa address + .sozial{margin-top:16px}