/*
Theme Name: IHHF
Description: Custom light magazine theme for ihhf.de — Online Spielautomaten Magazin. Static-preview-faithful build.
Version: 1.0
Author: IHHF
*/
/* ============================================================
   IHHF  -  helles, freundliches Design (am Logo orientiert)
   Orange #ff6600 + Hellblau #7ac9ed auf Weiss, runde Formen
   ============================================================ */
:root{
  --bg:#ffffff; --bg-soft:#f4f8fb; --bg-soft2:#eef4f9; --panel:#ffffff;
  --line:#e4eaf0; --line-soft:#eef2f6;
  --ink:#293039; --mid:#5b636f; --dim:#8b929d;
  --orange:#ff6600; --orange-dk:#e25800; --orange-soft:#fff1e8;
  --blue:#7ac9ed; --blue-dk:#2f93c8; --blue-soft:#eaf6fd;
  --good:#2bb673; --warn:#f3a712; --bad:#e8604c;
  --shadow:0 4px 18px rgba(41,48,57,.07);
  --shadow-h:0 10px 28px rgba(41,48,57,.13);
  --r:16px; --r-sm:11px;
  --disp:'Nunito',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--orange);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{left:0}

/* header */
header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;min-height:72px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:40px;width:auto}
.nav .links{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.nav .links a{font-size:15px;color:var(--mid);text-decoration:none;font-weight:600;padding:10px 14px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center}
.nav .links a:hover{color:var(--orange-dk);background:var(--orange-soft)}

/* section titles (schlicht, keine Nummern) */
.section-title{font-family:var(--disp);font-weight:800;font-size:26px;margin:48px 0 18px;color:var(--ink);letter-spacing:-.01em}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;min-height:48px;padding:12px 24px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--disp);font-weight:700;font-size:15px;text-decoration:none;transition:transform .12s,box-shadow .2s,background .2s}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 16px rgba(255,102,0,.25)}
.btn-primary:hover{background:var(--orange-dk);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-dk)}

/* HERO (hell, zweispaltig) */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;margin-top:30px;
  background:linear-gradient(135deg,var(--orange-soft),var(--blue-soft));border:1px solid var(--line);border-radius:22px;padding:40px}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(28px,4.4vw,44px);line-height:1.08;margin:.1em 0 .35em;letter-spacing:-.02em}
.hero p.lede{color:var(--mid);font-size:18px;max-width:46ch;margin:0 0 22px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .hero-art{border-radius:16px;aspect-ratio:3/2;background-size:cover;background-position:center;-webkit-mask-image:radial-gradient(125% 135% at 50% 42%,#000 58%,transparent 100%);mask-image:radial-gradient(125% 135% at 50% 42%,#000 58%,transparent 100%)}

/* cockpit grid */
.cockpit{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.widget{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.widget h3{font-family:var(--disp);font-weight:800;font-size:19px;margin:0 0 4px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.widget .tag{font-size:11px;letter-spacing:.02em;padding:3px 9px;border-radius:999px;background:var(--blue-soft);color:var(--blue-dk);font-weight:700}
.widget .hint{color:var(--dim);font-size:13.5px;margin:2px 0 16px}

/* quiz of day + persona opts */
.q-card .q-text{font-weight:700;font-size:17px;margin:6px 0 14px;font-family:var(--disp)}
.q-opts{display:flex;flex-direction:column;gap:9px}
.q-opts button{text-align:left;background:var(--bg-soft);border:1.5px solid var(--line);color:var(--ink);padding:12px 14px;border-radius:12px;cursor:pointer;font-size:14.5px;min-height:46px;font-family:var(--body);transition:border-color .15s,background .15s}
.q-opts button:hover{border-color:var(--orange);background:var(--orange-soft)}
.q-opts button.correct{border-color:var(--good);background:rgba(43,182,115,.1);color:#1d7a4e}
.q-opts button.wrong{border-color:var(--bad);background:rgba(232,96,76,.1);color:#b23a2a}
.q-feedback{margin-top:12px;font-size:14px;color:var(--mid);min-height:20px}
.q-progress{font-size:12px;color:var(--dim);margin-top:10px}

/* radar */
.radar .prov{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:15px}
.radar .prov:last-child{border:0}
.dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.dot.g{background:var(--good)}.dot.y{background:var(--warn)}.dot.r{background:var(--bad)}
.radar .meta{margin-left:auto;font-size:12.5px;color:var(--dim)}

/* myth */
.myth .stmt{font-size:16.5px;font-weight:700;font-family:var(--disp);min-height:54px;margin:6px 0 14px;color:var(--ink)}
.myth .ans{display:flex;gap:10px}.myth .ans button{flex:1}
.myth .reveal{margin-top:14px;font-size:14px;color:var(--mid);display:none;background:var(--bg-soft);border-radius:12px;padding:13px 15px}
.myth .reveal.show{display:block}
.myth .reveal b{color:var(--orange-dk)}

/* quiz teaser widget */
.teaser-widget{display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,var(--orange-soft),var(--blue-soft))}

/* story teaser */
.story-teaser{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);box-shadow:var(--shadow);transition:box-shadow .2s,transform .15s}
.story-teaser:hover{box-shadow:var(--shadow-h);transform:translateY(-2px)}
.story-teaser .txt{padding:34px}
.story-teaser .txt h3{font-family:var(--disp);font-size:27px;font-weight:800;margin:0 0 .4em;line-height:1.12}
.story-teaser .txt h3 a{text-decoration:none;color:var(--ink)}
.story-teaser .txt h3 a:hover{color:var(--orange-dk)}
.story-teaser .img{background-size:cover;background-position:center;min-height:240px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .15s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.card .ph{aspect-ratio:3/2;background-size:cover;background-position:center;background-color:var(--bg-soft)}
.card .body{padding:18px 18px 20px}
.card h3{font-family:var(--disp);font-size:19px;font-weight:800;line-height:1.22;margin:0 0 7px;color:var(--ink)}
.card:hover h3{color:var(--orange-dk)}
.card .ex{color:var(--mid);font-size:14px}

/* scrollytelling */
.tl{position:relative;max-width:760px;margin:26px auto;padding-left:40px}
.tl::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:3px;background:linear-gradient(var(--orange),var(--blue))}
.tl-step{position:relative;padding:16px 0 46px;opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}
.tl-step.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.tl-step{opacity:1;transform:none;transition:none}}
.tl-step::before{content:"";position:absolute;left:-33px;top:22px;width:18px;height:18px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px var(--orange-soft)}
.tl-year{font-family:var(--disp);font-weight:800;color:var(--orange-dk);font-size:15px}
.tl-step h2{font-family:var(--disp);font-size:25px;font-weight:800;margin:.1em 0 .4em;line-height:1.14;color:var(--ink)}
.tl-step .tl-img{border-radius:14px;overflow:hidden;margin:14px 0;border:1px solid var(--line);box-shadow:var(--shadow)}
.tl-step .tl-img img{width:100%;height:auto}
.module{background:var(--blue-soft);border:1px solid #cfe9f8;border-left:4px solid var(--blue);border-radius:12px;padding:18px;margin:16px 0}
.module .mh{font-family:var(--disp);font-weight:800;font-size:12.5px;letter-spacing:.02em;color:var(--blue-dk);margin-bottom:8px}

/* article */
.article{max-width:740px;margin:0 auto}
.article p{font-size:17px;color:#3a414b;margin:1.1em 0}
.article h2{font-family:var(--disp);font-weight:800;font-size:25px;margin:1.5em 0 .4em;color:var(--ink)}
.article a{color:var(--blue-dk);text-decoration:underline;text-underline-offset:2px}
.article a:hover{color:var(--orange-dk)}
.article blockquote{border-left:4px solid var(--orange);margin:1.5em 0;padding:8px 20px;color:var(--mid);font-style:italic;font-size:19px;background:var(--orange-soft);border-radius:0 12px 12px 0}
.reading{position:fixed;top:0;left:0;height:3px;background:var(--orange);width:0;z-index:300}

/* flip cards */
.flips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.flip{perspective:900px;height:118px;cursor:pointer}
.flip-in{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.flip.on .flip-in{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;backface-visibility:hidden;border-radius:13px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;padding:12px}
.flip .f{background:var(--orange-soft);font-family:var(--disp);font-weight:800;font-size:16px;color:var(--orange-dk)}
.flip .b{background:#fff;transform:rotateY(180deg);font-size:12.5px;color:var(--mid)}
@media (prefers-reduced-motion:reduce){.flip-in{transition:none}}

/* article + sidebar layout */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;margin-top:30px}
.article-layout .article{max-width:none;margin:0;min-width:0}
.rail{position:sticky;top:90px;display:flex;flex-direction:column;gap:18px}
.rail-box{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.rail-box h4{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--blue-dk);margin:0 0 12px}
.rail-box a{display:block;color:var(--ink);text-decoration:none;font-weight:600;font-size:14.5px;padding:8px 0;border-bottom:1px solid var(--line-soft);line-height:1.35}
.rail-box a:last-child{border-bottom:0}
.rail-box a:hover{color:var(--orange-dk)}
.rail-box.help{background:var(--blue-soft);border-color:#cfe9f8}
.rail-box.help p{margin:0;font-size:13px;color:var(--mid)}
.rail-box.help b{color:var(--blue-dk)}

/* crumbs */
.crumbs{font-size:13px;color:var(--dim);margin:26px 0 4px}
.crumbs a{color:var(--blue-dk);text-decoration:none}
.crumbs a:hover{color:var(--orange-dk)}

/* archive banner */
.archive-banner{display:flex;gap:14px;align-items:flex-start;background:var(--orange-soft);border:1px solid #ffd9bf;border-left:4px solid var(--orange);border-radius:12px;padding:15px 18px;margin:0 0 26px;font-size:14px;color:var(--mid);line-height:1.55}
.archive-banner .ab-tag{flex:0 0 auto;background:var(--orange);color:#fff;font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.03em;padding:5px 10px;border-radius:999px;text-transform:uppercase}
.archive-banner strong{color:var(--orange-dk)}
.archive-banner a{color:var(--blue-dk)}

/* article hero image (soft fade into white, no hard box) */
.art-hero{margin:6px 0 22px;-webkit-mask-image:radial-gradient(120% 130% at 50% 40%,#000 60%,transparent 100%);mask-image:radial-gradient(120% 130% at 50% 40%,#000 60%,transparent 100%)}
.art-hero img{width:100%;height:auto;border-radius:18px}
.article h1{font-family:var(--disp);font-weight:800;font-size:clamp(26px,4vw,38px);line-height:1.12;letter-spacing:-.02em;margin:.1em 0 .35em}
.article h1,.article h2,.article h3{overflow-wrap:break-word;hyphens:auto}
.article .meta-line{color:var(--dim);font-size:13.5px;margin:0 0 8px;font-weight:600}
.article ul,.article ol{font-size:17px;color:#3a414b;padding-left:1.2em;margin:1.1em 0}
.article li{margin:.4em 0}

/* category page */
.cat-head{background:linear-gradient(135deg,var(--orange-soft),var(--blue-soft));border:1px solid var(--line);border-radius:22px;padding:34px 38px;margin-top:30px}
.cat-head h1{font-family:var(--disp);font-weight:800;font-size:clamp(26px,4vw,38px);margin:0 0 .3em;letter-spacing:-.02em}
.cat-head p{color:var(--mid);font-size:17px;max-width:60ch;margin:0}
.cat-group-title{font-family:var(--disp);font-weight:800;font-size:20px;margin:40px 0 16px;color:var(--ink);display:flex;align-items:center;gap:10px}
.cat-group-title .pill{font-size:11px;letter-spacing:.02em;padding:4px 11px;border-radius:999px;background:var(--blue-soft);color:var(--blue-dk);font-weight:700}

/* data table (PBN article value block) */
.data-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.data-table th,.data-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.data-table thead th{background:var(--bg-soft);font-family:var(--disp);font-weight:800;color:var(--ink);font-size:13.5px}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table td:first-child{font-weight:700;color:var(--ink)}
.table-scroll{overflow-x:auto}

/* steps list */
.steps{counter-reset:step;list-style:none;padding:0;margin:20px 0}
.steps li{position:relative;padding:4px 0 16px 46px;font-size:16px;color:#3a414b}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;font-family:var(--disp);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.steps li b{color:var(--ink)}

/* tip grid */
.tips{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0}
.tip{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.tip h4{font-family:var(--disp);font-weight:800;font-size:15.5px;margin:0 0 5px;color:var(--orange-dk)}
.tip p{margin:0;font-size:14px;color:var(--mid)}

/* button amber alias */
.btn-amber{background:var(--orange);color:#fff;box-shadow:0 6px 16px rgba(255,102,0,.25)}
.btn-amber:hover{background:var(--orange-dk);transform:translateY(-2px)}

/* hilfe box */
.help-box{background:var(--blue-soft);border:1px solid #cfe9f8;border-radius:12px;padding:15px 17px;font-size:13.5px;color:var(--mid);margin:22px 0}
.help-box b{color:var(--blue-dk)}

/* footer */
footer.site{margin-top:60px;background:var(--bg-soft);border-top:1px solid var(--line);padding:40px 0 30px;color:var(--mid);font-size:14.5px}
footer .cols{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
footer a{color:var(--mid);text-decoration:none;display:block;padding:5px 0}
footer a:hover{color:var(--orange-dk)}
footer h4{font-family:var(--disp);font-weight:800;color:var(--ink);font-size:15px;margin:0 0 8px}
footer .legal{margin-top:24px;border-top:1px solid var(--line);padding-top:16px;font-size:12.5px;color:var(--dim)}

/* responsive */
@media (max-width:880px){
  .hero{grid-template-columns:1fr;padding:30px}
  .story-teaser{grid-template-columns:1fr}.story-teaser .img{min-height:180px;order:-1}
  .cards{grid-template-columns:repeat(2,1fr)}
  .article-layout{grid-template-columns:minmax(0,1fr);gap:30px}
  .rail{position:static;flex-direction:row;flex-wrap:wrap}
  .rail-box{flex:1 1 260px}
}
@media (max-width:600px){
  .cockpit{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .nav{min-height:0;padding:12px 0;gap:8px}
  .tips{grid-template-columns:1fr}
  .rail{flex-direction:column}
}