/* Styling für die statischen Seiten (Anleitung, Impressum, Datenschutz).
   Die App selbst nutzt style.css – hier bewusst getrennt, damit sich beide
   nicht gegenseitig in die Quere kommen. */

:root{
  --primary:#6366F1; --primary-dark:#4F46E5; --primary-light:#EEF2FF;
  --surface:#fff; --surface-2:#F8F9FA; --border:#E5E7EB;
  --text:#111827; --text-muted:#6B7280;
  --available:#16A34A; --unavailable:#DC2626;
  --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--surface-2); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}

header.top{background:var(--surface); border-bottom:1px solid var(--border)}
header.top .wrap{display:flex; align-items:center; gap:12px; padding-top:14px; padding-bottom:14px}
.logo{
  width:36px; height:36px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,#6366F1,#4F46E5); color:#fff;
  font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center;
}
.brand{font-weight:800; color:var(--primary-dark); font-size:19px; letter-spacing:-.3px}
.top-cta{margin-left:auto; font-size:15px; font-weight:600; color:var(--primary-dark); text-decoration:none}
.top-cta:hover{text-decoration:underline}

h1{font-size:clamp(28px,5vw,40px); line-height:1.2; letter-spacing:-.7px; margin:44px 0 14px}
.lead{font-size:19px; color:var(--text-muted); margin:0 0 8px}
h2{font-size:clamp(22px,3.4vw,28px); line-height:1.28; letter-spacing:-.4px; margin:52px 0 12px}
h3{font-size:18px; margin:32px 0 8px}
p{margin:0 0 16px}
a{color:var(--primary-dark)}
ul,ol{margin:0 0 16px; padding-left:22px}
li{margin-bottom:6px}
address{font-style:normal; margin-bottom:16px}
hr{border:0; border-top:1px solid var(--border); margin:40px 0}

figure{margin:22px 0 30px}
figure img{
  width:100%; height:auto; display:block;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); box-shadow:0 4px 20px rgba(0,0,0,.08);
}
figure img.narrow{max-width:330px; margin:0 auto}
figcaption{font-size:14px; color:var(--text-muted); text-align:center; margin-top:10px}

.step{display:flex; gap:16px; align-items:flex-start; margin-top:52px}
.step-num{
  flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--primary-light); color:var(--primary-dark);
  font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:4px;
}
.step h2{margin:0 0 6px}

.note{
  background:var(--primary-light); border-left:3px solid var(--primary);
  border-radius:0 var(--radius) var(--radius) 0; padding:14px 18px; margin:22px 0;
}
.note p:last-child{margin-bottom:0}

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 20px; margin:18px 0;
}
.card p:last-child{margin-bottom:0}

.cycle{list-style:none; padding:0; margin:16px 0 22px}
.cycle li{display:flex; align-items:center; gap:10px; padding:7px 0}
.dot{width:14px; height:14px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.08)}
.dot.g{background:var(--available)} .dot.r{background:var(--unavailable)} .dot.n{background:#E5E7EB}

.table-scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; margin:18px 0; font-size:15px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top}
th{background:var(--surface); font-weight:600}

details{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:10px}
summary{cursor:pointer; padding:14px 18px; font-weight:600; list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; float:right; color:var(--text-muted); font-weight:400; font-size:20px; line-height:1}
details[open] summary::after{content:'–'}
details .body{padding:0 18px 16px; color:var(--text-muted)}
details .body p:last-child{margin-bottom:0}

.cta{
  display:block; text-align:center; background:var(--primary); color:#fff;
  font-weight:700; font-size:17px; text-decoration:none;
  padding:16px 24px; border-radius:var(--radius); margin:40px 0 10px;
}
.cta:hover{background:var(--primary-dark)}

footer{border-top:1px solid var(--border); margin-top:56px; padding:26px 0 40px; color:var(--text-muted); font-size:14px}
footer a{color:var(--text-muted)}
footer nav{display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:10px}