/* Dinkelfrei Styles (moved from index.html) */
:root{
  --brand-dark:#244747; /* primär */
  --brand-mid:#688f8f;  /* sekundär */
  --brand-light:#96a4a4;/* akzent */
  --bg-1:#0f2222;       /* dunkler Verlaufston für hero */
  --bg-2:#1b3a3a;       /* etwas heller */
  --glass: rgba(255,255,255,0.08);
  --glass-strong: rgba(255,255,255,0.14);
  --text:#e9f3f3;
  --muted:#cfe3e3;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#183535;background:#f6fbfb}
a{color:var(--brand-mid);text-decoration:none}
a:hover{color:var(--brand-dark)}

/* ===== NAVBAR (Glass) ===== */
.nav-wrap{position:sticky;top:0;z-index:50;backdrop-filter:saturate(150%) blur(10px);background:rgba(246,251,251,0.7);border-bottom:1px solid rgba(104,143,143,0.25)}
.nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--brand-dark);letter-spacing:0.2px}
.brand-logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--brand-mid),var(--brand-light));box-shadow:var(--shadow);display:grid;place-items:center;color:white;font-weight:800}
.brand-logo img{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block}
.brand small{font-weight:600;color:#4b6e6e}
.nav-links{display:none;gap:18px;position:absolute;top:100%;left:0;right:0;background:rgba(246,251,251,0.95);backdrop-filter:blur(8px);border-bottom:1px solid rgba(104,143,143,0.25);padding:10px 12px;flex-direction:column}
.nav-links a{font-weight:600;color:#1a3535;padding:12px;border-radius:12px;appearance:none;-webkit-appearance:none}
.nav *:focus,.nav *:focus-visible,.nav *:active{outline:none !important;box-shadow:none !important}
.nav a,.nav a:focus,.nav a:active,.nav a:focus-visible{outline:none !important;box-shadow:none !important;border:none !important}
.nav-links a{appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent}
.nav-links a:focus,.nav-links a:focus-visible,.nav-links a:active{outline:none !important;box-shadow:none !important}
.nav-links a::-moz-focus-inner{border:0}
.nav-links a.active, .nav-links a:hover{background:rgba(104,143,143,0.12)}
.nav-cta{display:none}
.btn{display:inline-block;padding:10px 16px;border-radius:14px;font-weight:700;box-shadow:var(--shadow);transition:transform .08s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--brand-mid),var(--brand-dark));color:white}
.btn-ghost{background:rgba(104,143,143,0.12);color:var(--brand-dark)}
.menu-btn{border:0;background:transparent;font-weight:800;color:var(--brand-dark);font-size:24px;line-height:1;display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px}
.menu-btn::after{content:'Menü';font-size:12px;font-weight:700;color:#2a4f4f;letter-spacing:.2px;opacity:.9}

/* Mobile nav open state */
.nav-links.open{display:flex}

@media (min-width:900px){
  .nav{position:static}
  .nav-links{display:flex;position:static;background:transparent;border:0;padding:0;flex-direction:row}
  .nav-cta{display:block}
  .menu-btn{display:none}
}


/* ===== HERO (Glass + Gradient) ===== */
.hero{position:relative;isolation:isolate;background:linear-gradient(135deg,var(--bg-1),var(--bg-2));color:var(--text);overflow:hidden}
.hero .hero-wrap{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:28px 18px 32px}
.hero .hero-mini{font-size:0.98rem;opacity:.9;max-width:48ch;margin-top:6px}
.hero-wrap{display:grid;gap:10px}
.hero h1{font-size:clamp(28px,5vw,48px);line-height:1.05;margin:0;color:#f0fbfb}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .hero h1{
    background:linear-gradient(180deg,#ffffff 0%, var(--brand-light) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}
.hero p{max-width:720px;color:var(--muted);font-size:clamp(17px,2.4vw,19px);margin:4px 0 0}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.hero-card{margin-top:22px;backdrop-filter:blur(14px);background:var(--glass);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius);padding:16px 16px 8px;display:flex;gap:14px;flex-wrap:wrap}
.hero-card .chip{padding:8px 12px;border-radius:999px;background:var(--glass-strong);color:var(--muted);font-weight:600;border:1px solid rgba(255,255,255,0.18)}
/* Hero Card Heading and inner content */
.hero-card-title{margin:12px 0 6px;color:#e9f9f8;font-size:clamp(18px,2.6vw,22px)}
.hero .hero-card{flex-direction:column}
.hero .hero-card .card{background:transparent;border:0;box-shadow:none;padding:0}
.hero .hero-card .card .tag{background:var(--glass-strong);border:1px solid rgba(255,255,255,0.18)}
/* Deko-Bubbles */
.b1,.b2,.b3{position:absolute;inset:auto;filter:blur(50px);opacity:.35;border-radius:999px}
.b1{width:380px;height:380px;background:#5aa3a3;top:-40px;right:-120px}
.b2{width:260px;height:260px;background:#89c7c7;bottom:-80px;left:10%}
.b3{width:190px;height:190px;background:#3f7d7d;top:20%;left:-80px}

/* ===== SECTIONS ===== */
.container{max-width:1100px;margin:0 auto;padding:56px 18px}
#saeulen.container{padding-top:24px;padding-bottom:40px}
#downloads.container{padding-top:28px}
#tips.container{padding-top:18px}
.grid-3{display:grid;gap:18px}
@media(min-width:700px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* Ensure spacing between stacked grid rows (e.g., between Subway and Vapiano, Tele Pizza and KFC) */
.pillars-box .grid-3 + .grid-3{margin-top:18px}

.card{background:#ffffff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.card h3{margin:0 0 6px;color:var(--brand-dark)}
.card p{color:#335e5e;margin:0}

.pillars .card{position:relative;overflow:hidden}
.card .tag{position:absolute;top:14px;right:14px;background:rgba(104,143,143,.12);border:1px solid rgba(104,143,143,.28);color:var(--brand-dark);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}

/* Glassy wrapper for pillars section on white background */
.pillars-box{
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,251,251,0.95));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(104,143,143,0.22);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}
.pillars-box .card{background:transparent;border:0;box-shadow:none}
.pillars-box .card .tag{background:rgba(104,143,143,.12);border:1px solid rgba(104,143,143,.28)}

.cta-band{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

/* ===== Feature Rows ===== */
.feature{display:grid;gap:18px;align-items:center}
@media(min-width:900px){.feature{grid-template-columns:1.1fr .9fr}}
.feature .ill{background:linear-gradient(135deg,#e6f1f1,#f8fcfc);border-radius:20px;box-shadow:var(--shadow);min-height:220px;display:grid;place-items:center;padding:16px}
.ill .glass{backdrop-filter:blur(10px);background:rgba(150,164,164,0.12);border:1px solid rgba(150,164,164,0.4);border-radius:16px;padding:14px 16px;display:flex;gap:10px;flex-wrap:wrap}
.glass span{padding:8px 12px;border-radius:999px;background:rgba(104,143,143,0.12);color:#1a3535;font-weight:700;border:1px dashed rgba(104,143,143,0.35)}

/* ===== Newsletter ===== */
.nl{position:relative;background:radial-gradient(1200px 600px at 20% -20%, rgba(104,143,143,.18), transparent), #f5fbfb;border:1px solid rgba(104,143,143,.25);border-radius:24px;box-shadow:var(--shadow);padding:22px}
.nl h3{padding-right:64px; margin:0 0 10px !important; line-height:1.2}
.nl .tag{position:absolute;top:14px;right:14px;background:rgba(104,143,143,.12);border:1px solid rgba(104,143,143,.28);color:var(--brand-dark);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}
.nl form{display:grid;gap:10px;grid-template-columns:1fr auto}
.nl input{border:1px solid rgba(104,143,143,0.35);border-radius:12px;padding:12px 14px;font-size:16px;outline:none}

/* ===== Footer ===== */
footer{border-top:1px solid rgba(104,143,143,0.25);background:#f4fbfb}
.foot{max-width:1100px;margin:0 auto;padding:28px 18px;display:grid;gap:10px;align-items:center}
@media(min-width:800px){.foot{grid-template-columns:1fr auto}}

/* ===== Protein Deals: table simplification & mobile fit ===== */
/* Remove Beschreibung/Vorteil (2) and Preis/100 g (4) columns */
.pillars-box table th:nth-child(2),
.pillars-box table td:nth-child(2),
.pillars-box table th:nth-child(4),
.pillars-box table td:nth-child(4){
  display:none;
}

/* Slightly smaller font for all tables on this page; tighten spacing */
.pillars-box table{font-size:0.84rem !important}
.pillars-box table thead tr th,
.pillars-box table tbody tr td{padding:3px 5px}

/* Extra compaction on small screens */
@media (max-width:560px){
  .pillars-box table{font-size:0.80rem !important}
}