/* =========================
   Reset & Tokens
   ========================= */
* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg-dark:#222;
  --bg-mid:#333;
  --text:#333;
  --text-inv:#fff;
  --border:rgba(255,255,255,.15);
  --border-strong:rgba(255,255,255,.25);
  --accent:#ff9800;
  --success:#4caf50;
}

html { scroll-behavior:smooth; }
body {
  font-family:Arial, sans-serif;
  line-height:1.6;
  color:var(--text);
  background:#fff;
}

.visually-hidden{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* =========================
   Header / Nav
   ========================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  display:flex;                      /* <— neu */
  align-items:center;
  gap:1rem;
  padding:.75rem 1rem;
  background:var(--bg-dark);
  color:var(--text-inv);
}

/* Toggle + Hamburger */
.nav-toggle{ position:absolute; left:-9999px; }
.hamburger{
  display:inline-flex; flex-direction:column; justify-content:center;
  gap:5px; width:36px; height:36px; cursor:pointer;
  border-radius:8px; padding:6px; border:1px solid var(--border);
}
.hamburger span{
  display:block; height:2px; width:100%; background:var(--text-inv);
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle:checked + label.hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle:checked + label.hamburger span:nth-child(2){ opacity:0; }
.nav-toggle:checked + label.hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Header Actions */
.actions{ display:flex; align-items:center; gap:.5rem; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--border); background:transparent; cursor:pointer;
}
.icon-btn svg{ fill:var(--text-inv); }
.icon-btn:hover{ background:rgba(255,255,255,.08); }
.language{
  appearance:none; background:var(--bg-mid); color:var(--text-inv);
  border:1px solid var(--border); border-radius:8px; padding:.4rem .6rem;
}

/* Header Links */
/* Navigation in die Mitte zentrieren */
.main-nav{ flex:1; }                 /* nimmt die Mitte ein */
.main-nav ul{
  list-style:none;
  display:flex;
  gap:1.25rem;
  justify-content:center;            /* <— zentriert die Links */
  flex-wrap:wrap;
}
.main-nav a{
  color:var(--text-inv);
  text-decoration:none;
  padding:.5rem .6rem;
  border-radius:8px;
}
.main-nav a:hover{ background:rgba(255,255,255,.08); }

/* Rechte Seite an den Rand drücken */
.actions{
  margin-left:auto;                  /* <— alles rechtsbündig */
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* Hamburger & CTA bleiben links wie im DOM */
.hamburger{
  display:inline-flex;
  flex:0 0 auto;
}

/* Drawer (mobil) */
.drawer-nav{
  display:none;
  position:absolute; left:0; right:0; top:60px;
  background:var(--bg-dark);
  border-top:1px solid rgba(255,255,255,.1);
}
.drawer-nav ul{ list-style:none; display:flex; flex-direction:column; padding:.5rem; }
.drawer-nav a{ color:var(--text-inv); padding:.9rem 1rem; border-radius:8px; display:block; }
.drawer-nav a:hover{ background:rgba(255,255,255,.08); }
.nav-toggle:checked ~ .drawer-nav{ display:block; }

/* Breakpoint: auf kleineren Screens Hauptnav ausblenden, nur Drawer */
@media (max-width: 960px){
  .main-nav{ display:none; }
}

/* =========================
   Buttons (global)
   ========================= */
.btn-primary{
  display:inline-block; padding:.6rem 1rem;
  background:var(--accent); color:#fff; border-radius:8px; text-decoration:none;
}
.btn-primary:hover{ filter:brightness(.95); }

.btn-secondary{
  display:inline-block; padding:.5rem .9rem; border-radius:8px;
  border:1px solid #d4d7dc; color:#111; text-decoration:none; background:#fff;
}
.btn-secondary:hover{ background:#f7f7f7; }

.btn-cta{ padding:.45rem .9rem; font-size:.9rem; line-height:1; border-radius:8px; }
.btn.btn-sm{ padding:.4rem .7rem; border-radius:8px; }


.hero-banner {
  background: linear-gradient(135deg, #004d40, #00251a); /* dunkles Grün/Blau passend zum Logo */
  color: white;
  text-align: center;
  padding: 4rem 1rem;
  margin-bottom: 2rem;
}

.hero-logo {
  max-width: 320px;
  margin-bottom: 1rem;
}

.hero-slogan {
  font-size: 1.4rem;
  margin-bottom: 2rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.hero-cta {
  font-size: 1.2rem;
  padding: 0.8rem 2rem;
}

.hidden {
  display: none !important;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #888;
}

.avatar-dot {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: currentColor;
  display: block;
}

/* =========================
   Landing Sections
   ========================= */

/* Wrapper & Cards */
.section-wrap{ max-width:1200px; margin:0 auto; padding:2rem 1rem; }
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; }
.card img{ display:block; width:100%; height:auto; }

/* ----- BLOG ----- */
.blog{ background:#fff; }
.blog .section-wrap{ display:grid; gap:1.25rem; }
.blog h2{ font-size:1.6rem; }
.blog-list{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1rem;
}
.blog-card{ display:grid; grid-template-rows:auto 1fr; }
.blog-card img{ width:100%; height:160px; object-fit:cover; display:block; }
@media (min-width:900px){ .blog-card img{ height:200px; } }
.blog-card .body{ padding:1rem; }
.blog-card .meta{ display:flex; gap:.6rem; flex-wrap:wrap; font-size:.85rem; opacity:.75; margin:.25rem 0; }
.blog-card h3{ font-size:1.15rem; line-height:1.3; margin:.25rem 0 .5rem; }
.blog-card p{ font-size:.95rem; color:#444; }
.blog-card .readmore{ display:inline-block; margin-top:.5rem; color:var(--accent); }

/* ----- PROJEKTE ----- */
.projects{ background:#fafafa; border-top:1px solid #eee; border-bottom:1px solid #eee; }
.projects .section-wrap{ display:grid; gap:1.25rem; }
.projects h2{ font-size:1.6rem; }
.project-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1rem;
}
.project-card{ border-radius:12px; border:1px solid #e5e7eb; background:#fff; overflow:hidden; }
.project-cover{ width:100%; height:180px; object-fit:cover; display:block; background:#f3f4f6; }
.project-body{ padding:.75rem 1rem; display:grid; gap:.45rem; }
.project-title{ font-size:1rem; margin:0; }
.project-desc{ font-size:.95rem; color:#444; margin:0; }
.project-meta{ display:flex; gap:.75rem; align-items:center; font-size:.9rem; opacity:.85; }
.badge{
  display:inline-block; padding:.15rem .55rem; border:1px solid #e2e8f0;
  border-radius:999px; font-size:.78rem; line-height:1; background:#f8fafc;
}

/* ----- PROMO ----- */
.promo{ background:#ffe8c2; }
.promo .section-wrap{ display:grid; }
.promo-box{
  display:flex; flex-direction:column; gap:.6rem; padding:1.25rem;
  border:1px dashed #f5b96a; border-radius:12px; background:#fff7e9;
}
.promo-box h3{ font-size:1.25rem; }
.promo-box .btn-primary{ align-self:start; }

/* ----- BELIEBTE DANKESCHÖNS ----- */
.rewards-popular{ background:#fff; }
.rewards-popular .section-wrap{ display:grid; gap:1.25rem; }
.reward-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1rem;
}
.reward-card{ border-radius:12px; border:1px solid #e5e7eb; background:#fff; overflow:hidden; }
.reward-card img{ width:100%; height:160px; object-fit:cover; display:block; }
.reward-card h3{ font-size:1rem; margin:.6rem .75rem 0; }
.reward-card p{ font-size:.9rem; opacity:.8; margin:.25rem .75rem .9rem; }

/* ----- INFO / STORY ----- */
.about-platform{ background:#f5f7f9; border-top:1px solid #e6eaef; }
.about-platform .section-wrap{
  display:grid; grid-template-columns:1.1fr .9fr; gap:1.25rem;
}
.info-box{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1.25rem; }
.info-box h2{ font-size:1.4rem; margin:0 0 .5rem; }
.info-box p{ color:#444; margin:0 0 .75rem; }

/* ----- NEWSLETTER ----- */
.newsletter{ background:#10d07a; color:#0c2a1b; }
.newsletter .section-wrap{ display:grid; gap:.75rem; }
.newsletter h2{ color:#0c2a1b; }
.newsletter form{ display:flex; gap:.5rem; flex-wrap:wrap; }
.newsletter input[type="email"]{
  flex:1 1 260px; padding:.6rem .75rem; border-radius:8px; border:1px solid rgba(0,0,0,.1);
}
.newsletter .privacy{ font-size:.85rem; opacity:.8; }

/* (Optional) Classic Hero – falls genutzt */
.hero{
  text-align:center; padding:4rem 2rem;
  background:linear-gradient(to right,#4facfe,#00f2fe);
  color:var(--text-inv);
}
.hero h1{ font-size:2.5rem; margin-bottom:1rem; }

/* Loader/Status */
.skeleton{ padding:1rem; opacity:.7; font-style:italic; }
.error{ color:#b91c1c; }

/* =========================
   Responsive Tweaks
   ========================= */
@media (max-width:960px){
  .about-platform .section-wrap{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .blog-list{ grid-template-columns:1fr; }
}

/* =========================
   Footer
   ========================= */
.site-footer{
  background:#0f1f26; color:#eaf3f6; margin-top:3rem; font-size:.9rem;
}
.site-footer a{ color:#eaf3f6; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

.footer-wrap{
  max-width:1200px; margin:0 auto; padding:1.25rem 1rem;
  display:grid; gap:1.25rem;
}

/* Top */
.footer-top{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.75rem; text-align:center;
}
.footer-claim{ font-size:1rem; font-weight:600; opacity:.95; }
.footer-social{ display:flex; justify-content:center; gap:.5rem; }
.footer-social .social{
  width:70px; height:70px; display:grid; place-items:center;
  background:#15303a; border-radius:50%; border:1px solid #204450; overflow:hidden;
}
.footer-social .social img,
.footer-social .social svg{
  width:60px; height:60px; display:block; object-fit:contain; fill:#eaf3f6;
}

/* Stats */
.footer-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem;
}
.stat{
  text-align:center; background:#132930; border:1px solid #204450;
  border-radius:12px; padding:.6rem;
}
.stat-num{ font-size:1.05rem; font-weight:800; letter-spacing:.2px; }
.stat-label{ font-size:.85rem; opacity:.85; }

/* Linkspalten */
.footer-links{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem;
}
.footer-links h4{ font-size:.95rem; margin:0 0 .4rem; }
.footer-links ul{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.footer-links a{ opacity:.95; }

/* Payments */
.footer-payments{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.pay-head{ margin:0; font-weight:600; }
.pay-logos{
  list-style:none; display:flex; gap:.4rem; margin:0; padding:0; flex-wrap:wrap;
}
.pay-logos li{
  background:#132930; border:1px solid #204450; border-radius:10px;
  padding:.32rem .5rem; font-size:.85rem;
}

/* Bottom */
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  border-top:1px solid #204450; padding-top:.5rem; margin-top:.25rem; flex-wrap:wrap; font-size:.85rem;
}
.footer-bottom .legal{ display:flex; gap:.75rem; flex-wrap:wrap; }
.footer-bottom .copy{ margin:0; opacity:.9; }

/* Footer Responsive */
@media (max-width:960px){
  .footer-stats{ grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); }
  .footer-links{ grid-template-columns:repeat(2,1fr); }
  .footer-wrap{ padding:1rem .75rem; gap:1rem; }
}
@media (max-width:560px){
  .footer-links{ grid-template-columns:1fr; }
  .footer-claim{ font-size:.95rem; }
  .footer-bottom{ font-size:.8rem; }
}



/* public/css/styles.css */
@import url("./tokens.css");
@import url("./layout.css");
@import url("./sections.css"); /* auf Auth-Seiten weglassen */
@import url("./auth.css");     /* nur auf Login/Register */