/*
Theme Name: RechnerHub
Description: Maximal schlichtes Rechner-Portal-Theme im Google-Stil – große Suchleiste, bunte Kategorie-Kacheln, schnelle Rechner-Seiten. Gehört zum Plugin „Rechner Engine".
Version: 1.0.9
Author: Alex + Claude
Text Domain: rechnerhub
*/

:root{
  --blue:#4285F4; --red:#EA4335; --yellow:#FBBC05; --green:#34A853;
  --ink:#202124; --muted:#5f6368; --line:#dadce0; --bg:#ffffff;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.6;}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; height:auto;}

/* Header */
.site-header{display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; border-bottom:1px solid var(--line);}
.logo{font-size:1.35rem; font-weight:700; letter-spacing:-.02em; text-decoration:none;}
.logo:hover{text-decoration:none;}
.logo .l1,.biglogo .l1{color:var(--blue);} .logo .l2,.biglogo .l2{color:var(--red);}
.logo .l3,.biglogo .l3{color:var(--yellow);} .logo .l4,.biglogo .l4{color:var(--green);}
.header-nav a{margin-left:16px; color:var(--muted); font-size:.9rem;}

/* Hero (Startseite) */
.hero{max-width:640px; margin:0 auto; padding:56px 20px 26px; text-align:center;}
.hero .biglogo{font-size:clamp(2.4rem,8vw,3.6rem); font-weight:700; letter-spacing:-.03em; margin:0 0 6px;}
.hero .hero-h1{font-size:1.15rem; font-weight:600; color:var(--ink); margin:0 0 8px; line-height:1.35;}
.hero p.claim{color:var(--muted); margin:0 0 26px;}
.grid-h{max-width:980px; margin:22px auto 0; padding:0 16px; font-size:1rem; color:var(--muted); font-weight:600; text-align:center;}
.searchwrap{position:relative; max-width:560px; margin:0 auto;}
.searchwrap input{width:100%; padding:16px 54px 16px 24px; font-size:1.05rem;
  border:1px solid var(--line); border-radius:999px; outline:none;
  box-shadow:0 1px 6px rgba(32,33,36,.15); transition:box-shadow .15s;}
.searchwrap input:focus{box-shadow:0 2px 12px rgba(32,33,36,.25);}
.searchwrap .lens{position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:1.2rem; color:var(--muted);}

/* Featured-Reihe (Startseite) */
.featured{max-width:980px; margin:0 auto; padding:8px 16px 0;}
.featured-h{font-size:1rem; color:var(--muted); font-weight:600; margin:0 0 12px; text-align:center;}
.featured-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px;}
.fcard{position:relative; display:flex; flex-direction:column; gap:4px; background:#fff;
  border:1px solid var(--line); border-radius:18px; padding:18px 16px 16px; color:var(--ink);
  overflow:hidden; box-shadow:0 1px 4px rgba(32,33,36,.08); transition:.15s;}
.fcard:hover{text-decoration:none; transform:translateY(-3px); box-shadow:0 6px 18px rgba(32,33,36,.16);}
.fcard::before{content:""; position:absolute; top:0; left:0; right:0; height:5px;}
.fcard[data-cat="geld"]::before{background:var(--blue);}
.fcard[data-cat="gesundheit"]::before{background:var(--green);}
.fcard[data-cat="mathe"]::before{background:var(--red);}
.fcard[data-cat="alltag"]::before{background:var(--yellow);}
.fcard[data-cat="fun"]::before{background:#A142F4;}
.fcard .fem{font-size:1.9rem; line-height:1;}
.fcard .ft{font-weight:700; font-size:1rem; margin:4px 0 0; line-height:1.3;}
.fcard .fd{color:var(--muted); font-size:.8rem; line-height:1.4;}
@media(max-width:520px){.featured-row{grid-template-columns:repeat(2,1fr);}}

/* Interne SEO-Verlinkung unter Rechnern */
.re-internal{max-width:760px; margin:26px auto 0; padding:16px 18px; border:1px solid var(--line);
  border-radius:14px; background:#f8f9fb;}
.re-internal p{margin:0 0 8px; font-size:.92rem; color:var(--ink);}
.re-internal p:last-child{margin-bottom:0; color:var(--muted);}
.re-internal a{color:var(--blue);}

/* Kategorie-Chips */
.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:18px 16px 6px;}
.chip{border:1px solid var(--line); background:#fff; border-radius:999px;
  padding:8px 16px; font-size:.88rem; cursor:pointer; color:var(--muted); transition:.15s;}
.chip:hover{border-color:var(--muted);}
.chip.active{color:#fff; border-color:transparent;}
.chip.active[data-cat="alle"]{background:var(--ink);}
.chip.active[data-cat="geld"]{background:var(--blue);}
.chip.active[data-cat="gesundheit"]{background:var(--green);}
.chip.active[data-cat="mathe"]{background:var(--red);}
.chip.active[data-cat="alltag"]{background:var(--yellow); color:var(--ink);}
.chip.active[data-cat="fun"]{background:#A142F4;}

/* Kachel-Grid */
.tilegrid{max-width:980px; margin:0 auto; padding:18px 16px 70px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px;}
.tile{display:block; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:16px 14px; transition:.15s; color:var(--ink); position:relative; overflow:hidden;}
.tile:hover{text-decoration:none; transform:translateY(-2px); box-shadow:0 3px 12px rgba(32,33,36,.14);}
.tile::before{content:""; position:absolute; top:0; left:0; right:0; height:4px;}
.tile[data-cat="geld"]::before{background:var(--blue);}
.tile[data-cat="gesundheit"]::before{background:var(--green);}
.tile[data-cat="mathe"]::before{background:var(--red);}
.tile[data-cat="alltag"]::before{background:var(--yellow);}
.tile[data-cat="fun"]::before{background:#A142F4;}
.tile .em{font-size:1.5rem;}
.tile .t{font-weight:600; font-size:.92rem; margin:6px 0 0; line-height:1.3;}
.tile .d{color:var(--muted); font-size:.76rem; margin-top:3px;}
.tile .draft{font-size:.7rem; color:#b06f00;}
.nohits{display:none; text-align:center; color:var(--muted); padding:30px 0;}

/* Rechner-Seite */
.content{max-width:760px; margin:0 auto; padding:30px 18px 70px;}
.content h1{font-size:1.7rem; letter-spacing:-.02em; margin:0 0 6px;}
.crumbs{font-size:.82rem; color:var(--muted); margin-bottom:20px;}
.crumbs a{color:var(--blue);} .crumbs span{color:var(--ink);}
.content .entry{margin-top:26px;}
.related{max-width:760px; margin:0 auto; padding:0 18px 60px;}
.related h2{font-size:1.05rem; color:var(--muted);}
.related .tilegrid{padding:10px 0 0;}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:22px; text-align:center;
  color:var(--muted); font-size:.82rem;}
.site-footer a{color:var(--muted); margin:0 8px;}

/* Nach-oben-Button */
.rh-top{position:fixed; right:18px; bottom:18px; width:46px; height:46px; border:none; border-radius:50%;
  background:var(--blue); color:#fff; font-size:24px; line-height:46px; text-align:center; cursor:pointer;
  box-shadow:0 3px 14px rgba(32,33,36,.30); opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s, transform .25s, visibility .25s; z-index:9998; padding:0;}
.rh-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.rh-top:hover{filter:brightness(.95);}
@media(max-width:520px){.rh-top{right:14px; bottom:14px; width:42px; height:42px; line-height:42px; font-size:22px;}}

@media(max-width:520px){
  .tilegrid{grid-template-columns:repeat(2,1fr);}
  .header-nav{display:none;}
}