:root{
  --red:#E6301B;
  --bg:#ffffff;
  --light:#e9e9e9;
  --text:#111;
  --radius-lg:18px;
  --radius-pill:9999px;
  --space:16px;
  font-size:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Merriweather Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#fff;
  color:var(--text);
}

/* ---------- Header ---------- */
.hero{
  position: relative;
  background:var(--red);
  color:#fff;
  padding: clamp(28px, 8vh, 64px) var(--space) calc(12px + env(safe-area-inset-top));
  text-align:center;
}
.brand{
  margin:0;
  font-size: clamp(24px, 5.8vw, 34px);
  font-weight:700;
  letter-spacing: .5px;
}
.brand .tld{
  font-size:.55em;
  font-weight:700;
}

/* ---------- Code-Formular (weißer Block) ---------- */
.code-section{
  background:#fff;
  padding: 20px var(--space) 24px;
  display:grid;
  place-items:center;
}
.code-form{
  width:100%;
  max-width: 520px;
  display:grid;
  gap:12px;
}
.code-form input{
  height:56px;
  border:1px solid #ddd;
  border-radius: var(--radius-pill);
  padding:0 20px;
  font-size:1.05rem;
  outline:none;
  text-align: center;
}
.code-form input::placeholder{color:#606060}
.code-form button{
  height:56px;
  border:0;
  border-radius: var(--radius-lg);
  background:#e1e1e1;
  font-size:1.1rem;
  font-weight:600;
  color:#111;
}

.code-info{
  font-size: 0.8rem;
  font-weight: normal;
  margin-bottom: -0.5rem;
  text-align: center;
}

/* ---------- Promo (grauer Block) ---------- */
.promo{
  background:var(--light);
  padding: 28px var(--space) 40px;
  display:grid;
  justify-items:center;
  row-gap:22px;
}
.cover{
  margin:0;
  width:100%;
  max-width: 520px;
  display:grid;
  justify-items:center;
}
.cover img{
  width: 75%;
  max-width: 360px;
  height:auto;
  border-radius:10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
}

.download-form{
  width:100%;
  max-width:520px;
}

.download-btn{
  display:inline-block;
  width:100%;
  text-align:center;
  background:var(--red);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:1.1rem;
  padding:16px 20px;
  border-radius: var(--radius-lg);
  border:0;
  cursor:pointer;
}

/* ---------- Footer ---------- */
.site-footer{
  background:#fff;
  padding: 18px var(--space) calc(18px + env(safe-area-inset-bottom));
  text-align:center;
}
.site-footer a{
  color:#000;
  text-decoration:none;
}

/* A11y: Screenreader-only Label */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* =======================================================
   Burger-Menü (bereit, aber standardmäßig ausgeblendet)
   Zum Aktivieren: Klasse "is-hidden" bei .nav-toggle,
   #mobileNav und .nav-backdrop entfernen.
   ======================================================= */
.is-hidden{ display:none !important; }

/* Button (Hamburger) */
.nav-toggle{
  position:absolute;
  left:12px;
  top: calc(12px + env(safe-area-inset-top));
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.15);
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle .bars,
.nav-close .bars{
  position:relative;
  width:22px;height:2px;background:#fff;border-radius:2px;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-close .bars::before,
.nav-close .bars::after{
  content:"";
  position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:2px;
}
.nav-toggle .bars::before{ transform: translateY(-7px); }
.nav-toggle .bars::after{  transform: translateY(7px); }

/* Offcanvas */
.mobile-nav{
  position:fixed; z-index:1001;
  top:0; left:0; bottom:0; width:min(85vw, 340px);
  background:#fff; color:#111;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transform: translateX(-100%);
  transition: transform .25s ease;
  will-change: transform;
}
/* nur falls später via :target verwendet wird */
#mobileNav:target{ transform: translateX(0); }

.nav-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background:var(--red); color:#fff;
}
.nav-title{ font-weight:700; }
.nav-close{
  display:inline-flex; width:44px;height:44px; align-items:center; justify-content:center;
  text-decoration:none;
}
.nav-list{ list-style:none; margin:8px 0 0; padding:0; }
.nav-list li{ border-bottom:1px solid #eee; }
.nav-list a{
  display:block; padding:14px 16px;
  color:#111; text-decoration:none;
}
.nav-list a:active{ background:#f4f4f4; }

/* Backdrop */
.nav-backdrop{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
/* sichtbar in Kombination mit :target (wenn is-hidden entfernt ist) */
#mobileNav:target ~ .nav-backdrop{
  opacity:1; pointer-events:auto;
}

/* ===== Kontakt/Impressum ===== */
.legal-section{
  background:#fff;
  padding: 20px var(--space) 40px;
  display:grid;
  place-items:center;
}

.legal-card{
  width: 90vw;              /* ca. 90% der Viewport-Breite */
  max-width: 720px;         /* optionaler Deckel */
  background:#fff;
  border:1px solid #eee;
  border-radius: var(--radius-lg);
  padding: 18px;
  color: var(--text);
  text-align: left;         /* linksbündig */
  font-weight: 400;         /* regulärer Schnitt */
  line-height: 1.55;
}

.legal-card h2{
  margin: 6px 0 10px;
  font-size: 1.25rem;
}

.legal-card h3{
  margin: 18px 0 8px;
  font-size: 1.05rem;
}

.back-link{
  display:inline-block;
  margin-bottom: 8px;
  text-decoration:none;
  font-weight:700;
  color: var(--red);
}

.legal-card a{
  color: var(--red);
  text-decoration: none;
}
.legal-card a:active{ opacity:.9; }

/* (Burger-Menü bleibt über .is-hidden vollständig ausgeblendet) */

/* ===== Info-Block unter dem Download-Button ===== */
.book-info{
  width:100%;
  max-width:520px;
  display:grid;
  gap:10px;
  justify-items:center;
}

.book-blurb{
  margin:0;
  font-size:0.98rem;
  line-height:1.55;
  color:#1a1a1a;
  text-align:center;
}

.topic-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  list-style:none;
  padding:0;
  margin:0;
}

.topic-tags li{
  padding:6px 12px;
  border-radius: var(--radius-pill);
  background:#fff;
  border:1px solid #e3e3e3;
  font-size:0.9rem;
}

/* Pfeile um den Download-Text, zeigen nach innen */
.download-btn{
  display: inline-flex;           /* zentrierte Anordnung inkl. Pfeile */
  align-items: center;
  justify-content: center;
  gap: 10px;                      /* Abstand zwischen Pfeilen und Text */
}

.download-btn::before{
  content: "→";
  font-weight: 700;
}

.download-btn::after{
  content: "←";
  font-weight: 700;
}

/* ---------- Admin (Grundlayout & Accordion) ---------- */
header.adminbar{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  padding:12px 24px;
  background:var(--red);
  color:#fff;
}
header.adminbar a{
  color:#fff;
  text-decoration:none;
}
.container{
  max-width:1100px;
  margin:0 auto;
  padding:24px;
}
.accordion{
  margin:18px 0;
}
details{
  background:#fff;
  border:1px solid #eaeaea;
  border-radius:8px;
  margin:12px 0;
  overflow:hidden;
}
summary{
  cursor:pointer;
  padding:14px 16px;
  font-weight:600;
  list-style:none;
}
summary::-webkit-details-marker{
  display:none;
}
.panel{
  padding:0 16px 16px;
}

/* ---------- Admin: Tabellen ---------- */
.table-wrap{
  overflow:auto;
}
table{
  width:100%;
  border-collapse:collapse;
}
/* Admin: einheitliche Spaltenbreiten über alle Tabellen (3 Spalten) */
.accordion table{
  table-layout:fixed;
}
.accordion table th,
.accordion table td{
  overflow-wrap:anywhere;
}
.accordion table th:nth-child(1),
.accordion table td:nth-child(1){
  width:50%;
}
.accordion table th:nth-child(2),
.accordion table td:nth-child(2){
  width:15%;
}
.accordion table th:nth-child(3),
.accordion table td:nth-child(3){
  width:35%;
}
th,td{
  padding:10px 8px;
  border-bottom:1px solid #eee;
  text-align:left;
}
th{
  font-size:.9rem;
  color:#555;
}
.muted{
  color:#666;
  font-weight:400;
}
.count{
  opacity:.7;
  font-weight:500;
}

/* ---------- Admin: Login-Karte ---------- */
.login-card{
  max-width:420px;
  margin:8vh auto;
  padding:24px;
  border:1px solid #e5e5e5;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.login-card h1{
  font-size:1.25rem;
  margin:0 0 12px;
}
.login-card label{
  display:block;
  margin:.5rem 0 .25rem;
}
.login-card input{
  width:100%;
  padding:.6rem 1rem;
  border:1px solid #ccc;
  border-radius:6px;
  font:inherit;
}
.login-card button{
  margin-top:12px;
  padding:.6rem .9rem;
  border:0;
  border-radius:6px;
  background:#111;
  color:#fff;
  cursor:pointer;
}
.login-card .err{
  color:#b00020;
  margin-top:8px;
}