/*
Theme Name: VeloraMagazin
Theme URI: https://veloramagazin.de
Author: VeloraMagazin
Description: Deutschsprachiges Magazin-Theme für Wissen, Nachrichten und Geschichten. Zentriertes Logo, Magazin-Mosaik, eigene Kartenstile pro Rubrik, Werbeplätze, Hell- und Dunkelmodus.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: veloramagazin
*/
:root{--bg:#faf6ef;--surface:#fff;--ink:#1b1416;--muted:#6f6468;--line:#e6dccd;--accent:#7a1f3d;--gold:#b8893b;--dark:#2a0f1a;--c1:#5a4a50;--c2:#1b1416;--hf:'Playfair Display',Georgia,'Times New Roman',serif;--bf:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root{--bg:#150d10;--surface:#201519;--ink:#f3ebe2;--muted:#b3a5a8;--line:#3a2a30;--accent:#e0809c;--gold:#d9ad5f;--dark:#0e0709}}
.c-nachrichten{--c1:#1f3d6b;--c2:#0b1526}.c-unterhaltung{--c1:#b8893b;--c2:#4a300e}.c-wirtschaft{--c1:#1f5a3d;--c2:#0b2318}.c-biografien{--c1:#7a1f3d;--c2:#2a0f1a}.c-prominente{--c1:#3d2a6b;--c2:#150d2a}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--bf);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--hf)}
.screen-reader-text{position:absolute;left:-9999px}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.brand{text-align:center;padding:30px 20px 20px}
.brand .custom-logo{max-height:80px;width:auto}
.tagline{font:italic 500 15px var(--hf);color:var(--muted);margin-top:12px}
header.main{background:var(--bg)}
.navbox{border-top:3px solid var(--ink);border-bottom:1px solid var(--line)}
.navbox::before{content:"";display:block;border-top:1px solid var(--gold);margin-top:3px}
nav ul{display:flex;justify-content:center;gap:4px;overflow-x:auto;padding:0 10px;margin:0;list-style:none}
nav a{display:block;white-space:nowrap;padding:14px 18px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
nav a:hover{color:var(--accent)}
nav .current-menu-item>a,nav .current-menu-parent>a,nav .current-post-ancestor>a,nav .current-category-ancestor>a,nav .on{background:var(--ink);color:var(--bg)}
.th{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:4px;background-image:repeating-linear-gradient(45deg,#ffffff0f 0 2px,transparent 2px 16px),linear-gradient(150deg,var(--c1),var(--c2))}
.th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mosaic{display:grid;grid-template-columns:1fr 2fr 1fr;grid-template-rows:210px 210px;gap:6px;margin-top:26px}
.mosaic .t:nth-child(1){grid-area:1/1}.mosaic .t:nth-child(2){grid-area:2/1}
.mosaic .t:nth-child(3){grid-area:1/2/3/3}
.mosaic .t:nth-child(4){grid-area:1/3}.mosaic .t:nth-child(5){grid-area:2/3}
.t{position:relative;display:flex;align-items:flex-end;padding:20px;color:#fff;overflow:hidden;border-radius:4px;transition:.25s;background:var(--c2)}
.t::after,.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,#000b)}
.t>.th,.poster>.th{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.t:hover{filter:brightness(1.12)}
.t>div,.poster>div{position:relative;z-index:1}
.t .tag{background:var(--gold);color:#1b1416;padding:2px 9px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;display:inline-block;margin-bottom:8px}
.t h3{font-size:17px;line-height:1.3;margin:0}
.t.big h3{font-size:clamp(22px,3vw,32px)}
h2.sec{font:700 26px var(--hf);margin:46px 0 18px;display:flex;align-items:center;gap:14px}
h2.sec::before{content:"";width:8px;height:26px;background:var(--accent)}
h2.sec::after{content:"";flex:1;height:1px;background:var(--line)}
h2.sec a{order:3;font:600 12px var(--bf);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.layout{display:grid;grid-template-columns:2fr 1fr;gap:36px;margin-top:10px}
.row{display:grid;grid-template-columns:230px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.row:first-child{padding-top:0}
.tag2{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
.row h3,.lc h3,.hr h3{font-size:20px;line-height:1.3;margin:4px 0 6px}
.row p{margin:0;color:var(--muted);font-size:14px}
.meta{margin-top:8px;font-size:12px;color:var(--muted)}
.side{background:var(--surface);border:1px solid var(--line);padding:22px;border-radius:6px;align-self:start}
.side h4{font:700 20px var(--hf);margin:0 0 14px}
.pop{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.pop b{font:800 30px/1 var(--hf);color:var(--gold)}
.pop span{font-weight:600;font-size:14px;line-height:1.4}
.cats a{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);font-size:14px;font-weight:500}
.cats a:hover{color:var(--accent)}
.band{background:#0b0809;margin-top:46px;padding:6px 0 54px;color:#f3ebe2}
.band h2.sec::after{background:#ffffff22}.band h2.sec a{color:var(--gold)}
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:start}
.poster{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;display:flex;align-items:flex-end;padding:14px;color:#fff;border:1px solid #ffffff22;transition:.25s;background:var(--c2)}
.poster:hover{transform:translateY(-6px)}
.poster .tag2{color:var(--gold);font-size:10px}
.poster h3{font-size:15px;line-height:1.3;margin:4px 0 0}
.lc,.sc{display:block;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:.2s}
.lc:hover,.sc:hover{transform:translateY(-4px);box-shadow:0 12px 26px #0002}
.lc .b,.sc .b{padding:16px}
.sc h3{font-size:17px;line-height:1.3;margin:4px 0 6px}
.hr{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:6px;align-items:start}
.hr:hover h3,.lc:hover h3,.sc:hover h3,.mini:hover h3,.ic:hover h3{color:var(--accent)}
.ic{display:block}.ic .tag2{display:block;margin-top:10px}.ic h3{font-size:17px;line-height:1.3;margin:4px 0 0}
.th.nc{aspect-ratio:auto!important;border-radius:4px;background:none}
.th.nc img{position:static!important;width:100%;height:auto!important;display:block}
.th.nc.empty{aspect-ratio:16/9!important;background-image:repeating-linear-gradient(45deg,#ffffff0f 0 2px,transparent 2px 16px),linear-gradient(150deg,var(--c1),var(--c2))}
.lc .th.nc,.sc .th.nc{border-radius:0}
.hr .th.nc.empty,.mini .th.nc.empty{aspect-ratio:1!important}
.art{display:grid;grid-template-columns:minmax(0,2fr) 1fr;gap:40px;padding:36px 0 0}
.post h1{font:700 clamp(26px,4vw,36px)/1.25 var(--bf);margin:8px 0 10px}
.post .th{margin:20px 0}
.entry-content{font-family:var(--bf);font-size:17px;line-height:1.8;overflow-wrap:anywhere}
.entry-content p{margin:0 0 16px}
.entry-content h2{font:600 22px/1.3 var(--bf);margin:30px 0 8px}
.entry-content h3{font:600 19px/1.3 var(--bf);margin:24px 0 8px}
.entry-content a{color:var(--accent);text-decoration:underline}
.entry-content ul,.entry-content ol{margin:0 0 16px;padding-left:24px}
.entry-content blockquote{margin:20px 0;padding:6px 20px;border-left:4px solid var(--gold);color:var(--muted)}
.entry-content figure{margin:20px 0}.entry-content figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.entry-content table{border-collapse:collapse;width:100%;margin-bottom:16px}.entry-content td,.entry-content th{border:1px solid var(--line);padding:8px}
.entry-content pre{overflow:auto;background:var(--surface);padding:14px;border:1px solid var(--line);border-radius:6px}
.alignleft{float:left;margin:0 20px 10px 0}.alignright{float:right;margin:0 0 10px 20px}.aligncenter{display:block;margin:0 auto}
.tags{margin:20px 0;font-size:13px}.tags a{display:inline-block;border:1px solid var(--line);padding:3px 12px;border-radius:999px;margin:0 6px 6px 0}
.post-navigation .nav-links{display:flex;justify-content:space-between;gap:20px;margin:30px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-weight:600;font-size:14px}
.mini{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.mini h3{font:600 14px/1.4 var(--bf);margin:2px 0 0}
.wm-page{max-width:760px;margin:0 auto;padding:56px 20px}
.wm-page h1{font:800 clamp(30px,5vw,46px)/1.15 var(--hf);margin:0 0 8px}
.wm-page .entry-content h2{font:700 22px var(--hf);margin:30px 0 6px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:18px}
.desc{color:var(--muted);margin:-6px 0 20px}
.empty{padding:40px 0;color:var(--muted)}
.notice{padding:12px 16px;border-radius:6px;margin:18px 0;border:1px solid var(--line);background:var(--surface)}
form.cf{display:grid;gap:14px;margin-top:24px}
input,textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit}
button,.button,input[type=submit]{background:var(--accent);color:#fff;border:0;padding:13px 26px;border-radius:4px;font-weight:600;cursor:pointer;width:auto}
.hp{position:absolute;left:-9999px}
.sf{display:flex;gap:8px;margin:16px 0}
.pagination .nav-links{display:flex;gap:8px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.page-numbers{padding:8px 14px;border:1px solid var(--line);border-radius:4px;font-size:14px}
.page-numbers.current{background:var(--ink);color:var(--bg)}
.clist{list-style:none;padding:0}.clist li{padding:14px 0;border-top:1px solid var(--line)}footer.site{margin-top:70px;background:var(--dark);color:#f3ebe2;padding:44px 0 26px}
footer.site .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
footer.site h4{margin:0 0 10px;color:var(--gold);font:600 12px var(--bf);letter-spacing:.2em;text-transform:uppercase}
footer.site a{display:block;opacity:.8;padding:3px 0;font-size:14px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site footer.site .ad{margin:26px auto;text-align:center;max-width:100%;overflow:hidden}
.ad-label{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ad iframe,.ad img,.ad ins{max-width:100%}
.adbox{border:2px dashed var(--gold);border-radius:6px;padding:26px 14px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.adbox b{color:var(--ink)}
@media(max-width:900px){.mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto}.mosaic .t{grid-area:auto!important;min-height:150px}.mosaic .t:nth-child(3){grid-column:1/3;min-height:220px;order:-1}.layout,.art{grid-template-columns:1fr}.g6{grid-template-columns:repeat(3,1fr)}.g4,.g3{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:1fr}footer.site .wrap{grid-template-columns:1fr}}
@media(max-width:560px){.row{grid-template-columns:110px 1fr}.row p{display:none}.row h3{font-size:16px}.g6{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}.mosaic{grid-template-columns:1fr}.mosaic .t:nth-child(3){grid-column:auto}.hr{grid-template-columns:90px 1fr}}
.logo{display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1;color:var(--ink)}
.logo .lv{font:800 clamp(34px,9vw,76px)/1 var(--bf);letter-spacing:.04em;color:var(--ink)}
.logo .lm{background:var(--accent);color:var(--bg);font:700 clamp(16px,4vw,34px)/1 var(--bf);letter-spacing:.16em;padding:.42em .25em .42em .55em}
footer .logo .lv{font-size:34px;color:#f3ebe2}
footer .logo .lm{font-size:15px;background:var(--gold);color:#1b1416}
footer.site a.logo{display:inline-flex;opacity:1;padding:0}
footer.site .logo{gap:10px}
footer.site .logo .lv{font-size:38px}
footer.site .logo .lm{font-size:16px}
footer.site p{color:#f3ebe2}
footer.site .copy{max-width:1160px;margin:34px auto 0;padding:22px 20px 0;border-top:1px solid #ffffff22;text-align:center;opacity:.7;font-size:13px}
.row{grid-template-columns:300px 1fr;gap:24px;padding:22px 0}
.row h3{font-size:24px;margin:6px 0 8px}
.row p{font-size:15px}
@media(max-width:560px){.row{grid-template-columns:130px 1fr;gap:14px;padding:16px 0}.row h3{font-size:17px;margin:4px 0}}
.entry-content .mail{font-size:22px;font-weight:600;margin:6px 0 10px}
.entry-content .mail a{text-decoration:none;border-bottom:2px solid var(--gold)}
.entry-content strong{font-weight:600}