/* 5euro-fund.de – im Stil von räuchermeister.com (Ulfs Wunsch 2026-11-01):
   dunkles Schiefergrau, leuchtendes Türkis, Pink als Zweitfarbe, Menü als Knopfleiste im Kopf. */
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #0f172a; --kopf: #1e293b; --card: #1e293b; --card-tief: #020617; --tabs: rgba(51,65,85,.8);
  --line: #334155; --line-cyan: rgba(6,182,212,.3);
  --ink: #ecfeff; --ink-muted: #94a3b8; --text: #cbd5e1;
  --cyan: #22d3ee; --cyan-hell: #a5f3fc; --cyan-btn: #06b6d4; --on-cyan: #0f172a;
  --pink: #e879f9;
  --glow: 0 0 10px rgba(6,182,212,.5); --glow-btn: 0 0 15px rgba(6,182,212,.5);
  --warn: #fcd34d; --warn-bg: rgba(120,53,15,.35); --warn-line: rgba(252,211,77,.3);
  --font: "Space Grotesk", system-ui, "Segoe UI", sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f8fafc; --kopf: #ffffff; --card: #ffffff; --card-tief: #f1f5f9; --tabs: #e2e8f0;
    --line: #cbd5e1; --line-cyan: rgba(15,118,110,.3);
    --ink: #0f172a; --ink-muted: #475569; --text: #1e293b;
    --cyan: #0f766e; --cyan-hell: #115e59; --cyan-btn: #0f766e; --on-cyan: #ffffff;
    --pink: #a21caf;
    --glow: none; --glow-btn: 0 4px 12px rgba(15,118,110,.25);
    --warn: #78350f; --warn-bg: #fef3c7; --warn-line: #fcd34d;
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 18px; line-height: 1.6; }
.wrap { max-width: 1040px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
h1, h2, h3 { font-weight: 700; text-wrap: balance; margin: 0; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
h2 { font-size: clamp(24px, 4vw, 32px); }
h3 { font-size: 20px; }
p { margin: 0; max-width: 66ch; }
a { color: var(--cyan); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Kopf wie beim Räuchermeister */
.kopf { background: var(--kopf); border-bottom: 1px solid var(--line-cyan); box-shadow: 0 4px 30px rgba(6,182,212,.15);
  padding: clamp(24px, 5vw, 46px) 16px clamp(22px, 4vw, 36px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--cyan); text-decoration: none; font-weight: 700;
  font-size: clamp(30px, 6vw, 50px); letter-spacing: -0.02em; text-shadow: var(--glow); }
.logo img { width: clamp(38px, 6vw, 52px); height: auto; filter: drop-shadow(0 0 10px rgba(6,182,212,.7)); }
.logo b { font-weight: 700; }
.logo b span { color: var(--pink); }
.tagline { color: var(--cyan-hell); font-weight: 700; font-size: clamp(15px, 2.2vw, 19px); max-width: 40ch; line-height: 1.5; }
h1.tagline { letter-spacing: 0; }
.tabs { margin-top: 12px; width: 100%; max-width: 980px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  background: var(--tabs); border: 1px solid var(--line-cyan); border-radius: 12px; padding: 6px; box-shadow: 0 0 15px rgba(6,182,212,.1); }
.tabs a { color: var(--cyan); opacity: .75; text-decoration: none; font-weight: 700; font-size: 15px; padding: 9px 18px; border-radius: 9px; white-space: nowrap; }
.tabs a:hover { opacity: 1; background: rgba(6,182,212,.12); }
.tabs a[aria-current="page"] { opacity: 1; background: var(--cyan-btn); color: var(--on-cyan); box-shadow: var(--glow-btn); }
@media (max-width: 640px) {
  .tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { font-size: 14px; padding: 7px 14px; }
}

.btn { display: inline-block; background: var(--cyan-btn); color: var(--on-cyan); font-weight: 700; text-decoration: none;
  padding: 12px 24px; border-radius: 12px; box-shadow: var(--glow-btn); transition: filter .15s, transform .15s; }
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* Inhalt */
main { padding-block: 28px 24px; }
.intro { display: flex; flex-direction: column; gap: 18px; padding-bottom: 8px; }
.intro p { font-size: 19px; }
.intro .btn { align-self: flex-start; }
.notice { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); border-radius: 12px; padding: 14px 18px; font-size: 16px; max-width: none; }
section { padding-block: 32px; display: flex; flex-direction: column; gap: 20px; }
section > h2 { color: var(--cyan); text-shadow: var(--glow); }
.label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pink); }

/* Bereichs-Rahmen wie beim Räuchermeister (bg-slate-900/40, rounded-3xl) */
.panel { background: rgba(15,23,42,.4); border: 1px solid rgba(30,41,59,.8); border-radius: 24px; padding: clamp(18px, 3vw, 32px);
  margin-block: 28px; box-shadow: 0 10px 15px rgba(0,0,0,.25); }
.panel-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.panel-kopf h2 { color: var(--ink); }
.zaehler { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--ink-muted); border: 1px solid #334155; border-radius: 6px; padding: 3px 8px; }
@media (prefers-color-scheme: light) {
  .panel { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 6px 18px rgba(15,23,42,.06); }
  .zaehler { border-color: #cbd5e1; }
}

/* Kacheln wie die Rezept-Kacheln beim Räuchermeister: hoch, Bild oben, Text unten, Infoleiste.
   Die Kacheln bleiben auch im hellen Modus dunkel – wie Fotos mit dunklem Verlauf. */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 18px; }
.kachel { position: relative; height: 420px; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  background: #0f172a; border: 1px solid rgba(6,182,212,.3); box-shadow: 0 4px 6px rgba(0,0,0,.25); text-decoration: none; color: #ecfeff;
  isolation: isolate; transition: border-color .3s, box-shadow .3s; }
.kachel:hover { border-color: #22d3ee; box-shadow: 0 0 24px rgba(6,182,212,.25); }
.kachel-bild { position: absolute; inset: 0; z-index: -1; display: grid; place-items: start center; padding-top: 70px;
  background: radial-gradient(circle at 50% 32%, var(--art-a) 0%, var(--art-b) 45%, #020617 100%); transition: transform .7s; }
.kachel:hover .kachel-bild { transform: scale(1.1); }
.kachel-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #000 0%, rgba(2,6,23,.8) 45%, rgba(15,23,42,.3) 100%); opacity: .95; }
.ic-gross { width: 150px; height: 150px; color: var(--art-ic); stroke-width: 1.4; filter: drop-shadow(0 0 18px var(--art-ic)); opacity: .9; }
.art-kueche   { --art-a: #0e7490; --art-b: #083344; --art-ic: #67e8f9; }
.art-haushalt { --art-a: #1d4ed8; --art-b: #172554; --art-ic: #93c5fd; }
.art-angeln   { --art-a: #047857; --art-b: #022c22; --art-ic: #6ee7b7; }
.art-geschenke{ --art-a: #a21caf; --art-b: #3b0764; --art-ic: #f0abfc; }
.art-ratgeber { --art-a: #b45309; --art-b: #431407; --art-ic: #fcd34d; }
.kachel-oben { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 16px; }
.badges { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; background: rgba(2,6,23,.9); backdrop-filter: blur(12px); border: 1px solid rgba(6,182,212,.5);
  border-radius: 6px; color: #a5f3fc; font-size: 12px; font-weight: 700; box-shadow: 0 4px 6px rgba(0,0,0,.3); }
.badge-tag { border-color: #334155; color: #22d3ee; text-shadow: 0 0 5px rgba(34,211,238,.6); }
.ecke { font-family: ui-monospace, Consolas, monospace; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 3px 7px; border-radius: 4px;
  background: rgba(8,51,68,.9); border: 1px solid rgba(34,211,238,.5); color: #67e8f9; }
.kachel-unten { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.kachel-unten h3 { font-size: 24px; font-weight: 800; color: #fff; line-height: 1.15; text-shadow: 0 4px 10px #000; transition: color .3s; }
.kachel:hover h3 { color: #67e8f9; }
.kachel-unten p { color: #cbd5e1; font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.infoleiste { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 11px 12px; border-radius: 12px;
  background: rgba(2,6,23,.6); backdrop-filter: blur(12px); border: 1px solid rgba(51,65,85,.8); box-shadow: 0 4px 6px rgba(0,0,0,.3);
  font-size: 14px; font-weight: 700; color: #cffafe; }
.infoleiste span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.ic-k { width: 17px; height: 17px; flex: none; color: #22d3ee; }

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 70ch; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.6rem 1fr; gap: 12px; align-items: start; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px;
  background: var(--card-tief); border: 1px solid var(--line-cyan); color: var(--cyan); font-weight: 700; }
.steps b { display: block; color: var(--ink); }
.steps span { color: var(--ink-muted); font-size: 16px; }

article.text { max-width: 70ch; display: flex; flex-direction: column; gap: 18px; padding-bottom: 32px; }
article.text h1 { font-size: clamp(30px, 5vw, 42px); }
article.text h2 { font-size: 23px; margin-top: 14px; }
article.text ul, article.text ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
article.text .meta { color: var(--ink-muted); font-size: 15px; }
article.text .box { background: var(--card-tief); border: 1px solid var(--line-cyan); border-radius: 14px; padding: 16px 18px; }

/* Fundstück-Listen */
.fund { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; color: #ecfeff;
  background: linear-gradient(to top, #000, #0f172a 70%); border: 1px solid rgba(6,182,212,.3); box-shadow: 0 4px 6px rgba(0,0,0,.25);
  transition: border-color .3s, box-shadow .3s; }
.fund:hover { border-color: #22d3ee; box-shadow: 0 0 24px rgba(6,182,212,.2); }
.fund-oben { display: flex; justify-content: space-between; align-items: center; }
article.text .fund h2 { margin-top: 4px; font-size: 24px; font-weight: 800; color: #fff; }
.fund p { color: #cbd5e1; }
.infoleiste-text { grid-template-columns: auto 1fr; align-items: start; font-weight: 400; font-size: 15px; color: #cbd5e1; }
.infoleiste-text b { color: #cffafe; }
.infoleiste-text .ic-k { margin-top: 3px; color: #fcd34d; }
.fund-knopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.btn.amazon { padding: 10px 20px; font-size: 16px; }
.werbung { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

footer { background: var(--card-tief); border-top: 1px solid var(--line); margin-top: 24px; padding: 28px 0 40px; color: var(--ink-muted); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; }
footer a { color: var(--ink-muted); }
footer a:hover { color: var(--cyan); }