/* ============================================================
   LevelUp Tracker – Unterseiten

   Gemeinsame Hülle für Kontakt, Impressum, Datenschutz, AGB und
   Widerruf. Die Verkaufsseite bringt ihr CSS selbst mit; hier
   stehen nur die Bausteine, die alle Textseiten teilen.
   Farben und Schriften sind identisch zur Verkaufsseite.
   ============================================================ */

:root{
  --ink:#1f2933; --body:#4a545e; --muted:#8d949c;
  --blau:#2f6fa8; --blau-hover:#245a8c; --blau-hell:#6fa8dc; --blau-zart:#e6f0fa;
  --gruen:#5f9c46; --creme:#fdf7f0; --line:#e7e3dc;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--body);
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--blau)}
h1,h2,h3{font-family:'Montserrat',sans-serif; font-weight:800; color:var(--ink); line-height:1.15; margin:0}
h1{font-size:34px}
h2{font-size:22px; margin-top:34px}
h3{font-size:17px; margin-top:24px}
.innen{max-width:720px; margin:0 auto; padding:0 20px}

/* ---------- Kopf ---------- */
.kopf{border-bottom:1px solid var(--line); background:#fff}
.kopf .innen{display:flex; align-items:center; justify-content:space-between; padding:14px 20px}
.logo{font-family:'Montserrat',sans-serif; font-weight:800; font-size:21px;
      color:var(--ink); text-decoration:none; letter-spacing:-.02em}
.logo span{color:var(--blau)}
.zurueck{font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px;
         color:var(--blau); text-decoration:none; white-space:nowrap}

/* ---------- Inhalt ---------- */
.inhalt{max-width:720px; margin:0 auto; padding:42px 20px 60px}
.unter{font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px;
       letter-spacing:.14em; text-transform:uppercase; color:var(--blau); margin:10px 0 22px}
.inhalt p{margin:0 0 16px}
.inhalt ul{margin:0 0 16px; padding-left:22px}
.inhalt li{margin-bottom:8px}

.karte{background:var(--creme); border:1px solid var(--line); border-radius:14px; padding:18px 20px}
.karte p{margin:0}

/* ---------- Formular ---------- */
.formular{margin-top:26px}
.feld{margin-bottom:18px}
.feld label{display:block; font-family:'Montserrat',sans-serif; font-weight:700;
            font-size:14px; color:var(--ink); margin-bottom:6px}
.feld input,.feld textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:13px 14px;
}
.feld textarea{min-height:150px; resize:vertical}
.feld input:focus,.feld textarea:focus{
  outline:none; border-color:var(--blau); box-shadow:0 0 0 3px var(--blau-zart);
}
.btn{
  display:block; width:100%; border:0; cursor:pointer;
  background:var(--blau); color:#fff;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px;
  padding:16px 20px; border-radius:12px;
  box-shadow:0 10px 24px rgba(47,111,168,.28); transition:background .12s;
}
.btn:hover{background:var(--blau-hover)}
.btn:disabled{opacity:.6; cursor:default}
.hinweis{margin:14px 0 0; font-size:15px; min-height:1.2em}
.hinweis.ok{color:var(--gruen); font-weight:700}
.hinweis.fehler{color:#b0563f; font-weight:700}

/* ---------- Fuß ---------- */
.footer{border-top:1px solid var(--line); padding:30px 0; text-align:center;
        font-size:13.5px; color:var(--muted)}
.footer a{color:var(--muted); text-decoration:none; margin:0 8px; line-height:2.2; display:inline-block}
.footer a:hover{color:var(--ink)}

@media(min-width:760px){
  h1{font-size:40px}
  .btn{width:auto; padding:16px 44px}
}