/* Light, friendly theme */
:root{
  --bg:#fafafc;        /* page */
  --fg:#1f2937;        /* text */
  --muted:#6b7280;     /* secondary text */
  --card:#ffffff;      /* surfaces */
  --stroke:#e5e7eb;    /* borders */
  --accent:#2563eb;    /* blue */
  --accent-2:#06b6d4;  /* cyan */
  --radius:16px;
  --shadow:0 8px 24px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html,body{height:100%}

body{margin:0; color:var(--fg); background:var(--bg); font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.5}


img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}

/* Layout */
.wrap{max-width:1080px; margin:0 auto; padding:0 16px}
.header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--stroke)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.logo {
  height: 48px;      /* größer und besser sichtbar */
  width: auto;
  margin-left: 4px;  /* sorgt für minimalen Abstand links */

}


/* QR-Banner – saubere Ränder mobil */
.qr-banner{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:16px 16px;          /* links/rechts Abstand auf kleinen Screens */
}
.qr-banner .wrap{
  padding:16px;              /* Innenabstand für Text */
  text-align:center;
}
.qr-banner .qr-title{
  font-family:"Playfair Display",serif;
  font-size:1.6rem;
  font-weight:700;
  margin:0 0 6px 0;
  color:var(--fg);
}
.qr-banner .qr-body{
  font-family:Inter,system-ui,sans-serif;
  font-size:1.05rem;
  margin:0;
  color:var(--muted);
}

/* Ab Tablet wieder mittig mit Auto-Rand */
@media (min-width:600px){
  .qr-banner{ margin:16px auto; }   /* keine Kantenklebung */
}



.lang-switch {
  display: flex;
  gap: 6px;          /* Buttons enger zusammen */
  margin-left: auto; /* schiebt die Buttons weg vom Logo */
  margin-right: 16px;
}

.lang{display:flex; gap:8px; align-items:center; position:relative}
.lang button{background:#fff; border:1px solid var(--stroke); color:var(--fg); padding:8px 10px; border-radius:999px; display:flex; align-items:center; gap:8px}
.lang button:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.lang-menu{position:absolute; right:0; top:44px; background:var(--card); border:1px solid var(--stroke); border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none; min-width:180px}
.lang-menu.open{display:block}
.lang-menu button{width:100%; text-align:left; border:0; background:transparent; padding:10px 12px; border-radius:10px}
.lang-menu button:hover{background:#f3f4f6}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:8px;top:8px;width:auto;height:auto;background:#fff;border:1px solid var(--stroke);padding:8px 10px;border-radius:8px}

.section{padding:28px 0}
.grid{display:grid; gap:12px}
.grid.cols-2{grid-template-columns:1fr}
.grid.cols-3{grid-template-columns:1fr}

.card{background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}

.hero-lite{padding:48px 0}
.headline{font-family:"Playfair Display",serif; font-size:32px; line-height:1.15; margin:6px 0 10px}
.sub{color:var(--muted)}
.tag{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); color:#374151; background:#fff; font-size:12px; letter-spacing:.2px}

.hero-img{aspect-ratio:16/10; width:100%; object-fit:cover; object-position:center; border-radius:12px}
.hero-visual{position:relative; overflow:hidden}
.chipbar{position:absolute; left:12px; bottom:12px; display:flex; gap:8px; flex-wrap:wrap}
.chip{background:rgba(255,255,255,.9); border:1px solid var(--stroke); padding:6px 10px; border-radius:999px; font-size:12px}

.feature{display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start}
.feature i{height:40px; width:40px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(6,182,212,.12)); border:1px solid var(--stroke)}

.hl{color:#0f172a}
.muted{color:var(--muted)}

.emoji {
  font-style: normal;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.5rem; /* optional für größere Darstellung */
  line-height: 1;
}

.cta-row{display:flex; gap:10px; margin-top:8px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid var(--stroke); background:#fff; font-weight:600}
.btn.primary{background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(6,182,212,.95)); color:#fff; border:0}

.note{font-size:12px; color:var(--muted)}
.footer{padding:28px 0 56px; color:var(--muted); border-top:1px solid var(--stroke); background:#fff4}


.footer-partner {
  text-align: left;
}

.footer-partner-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.footer-gap {
  height: 14px;
}

.footer-partner img {
  height: 42px;
  width: auto;
  opacity: .95;
}

/* Responsive */
@media (min-width:600px){
  .hero-lite{padding:72px 0}
  .headline{font-size:48px}
  .grid.cols-2{grid-template-columns:1.2fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
}

/* Mobile Optimierungen */
@media (max-width:600px){

  .logo {
    height: 40px;
    margin-left: 12px;
  }

  .lang-btn {
    padding: 6px 8px;  /* Buttons kleiner */
    font-size: 14px;
  }
}

  .lang-switch {
    margin-right: 12px; /* Abstand rechts */
  }