/* Stadtseiten. Bewusst schlank und getrennt von der Startseite:
   Deren Stil steht komplett inline in index.html und waere hier 60 KB
   Ballast — auf 35 Seiten. Die Farben sind dieselben. */
:root{
  --papier:#fffdf8; --flaeche:#fff; --ink:#242936; --leise:#5c626e;
  --linie:#e4ddd0; --gelb:#ffc928; --koralle:#d43f2c; --teal:#0b8088;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--papier); color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal)}
h1,h2{letter-spacing:-.8px;line-height:1.12;text-wrap:balance;margin:0}
h1{font-size:clamp(30px,5.4vw,46px);font-weight:900}
h2{font-size:clamp(20px,2.8vw,26px);font-weight:850;margin-bottom:10px}

.k-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 22px;border-bottom:2px solid var(--ink);background:var(--flaeche);
  flex-wrap:wrap;
}
/* Auch Marke und Brotkrumen sind Ziele: 44px hoch, sonst trifft der
   Daumen daneben (dieselbe Regel wie in der App, Audit 25.08.2026). */
.k-marke{display:inline-flex;align-items:center;min-height:44px;
  font-weight:900;letter-spacing:-.5px;font-size:18px;color:var(--ink);text-decoration:none}
.k-marke span{color:var(--koralle)}
/* 44px Mindesthoehe an jedem Bedienelement — dieselbe Regel wie in der
   App (Audit 25.08.2026). */
.k-cta{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  background:var(--ink);color:#fff;border-radius:999px;font-weight:800;
  font-size:14px;text-decoration:none;
}
.k-brot{padding:14px 22px 0;font-size:13.5px;color:var(--leise)}
.k-brot a{display:inline-flex;align-items:center;min-height:44px;color:var(--leise)}
.k-brot{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.k-brot [aria-current]{color:var(--ink);font-weight:700}

.k-seite{max-width:820px;margin:0 auto;padding:18px 22px 70px;display:grid;gap:26px}
.k-lead{font-size:18px;color:var(--leise);margin:0;max-width:62ch}

.k-tasten{display:flex;gap:12px;flex-wrap:wrap}
.k-knopf{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 22px;border-radius:14px;background:var(--gelb);color:var(--ink);
  font-weight:850;text-decoration:none;border:2px solid var(--ink);
  box-shadow:3px 4px 0 var(--ink);
}
.k-knopf.zweit{background:var(--flaeche)}
.k-knopf:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}

.k-ehrlich{
  margin:0;background:#fff3cf;border:2px solid var(--ink);border-radius:14px;
  padding:14px 16px;font-size:15px;
}
.k-block{margin:0}
.k-block p{margin:0 0 10px;color:var(--leise);max-width:66ch}
.k-block p:last-child{margin-bottom:0}
.k-block p > a{display:inline-flex;align-items:center;min-height:44px}

.k-viertel,.k-nachbarn,.k-staedte{list-style:none;margin:0;padding:0}
.k-viertel{display:flex;flex-wrap:wrap;gap:8px}
.k-viertel li{
  border:1.5px solid var(--linie);border-radius:999px;padding:7px 14px;
  background:var(--flaeche);font-size:14px;font-weight:600;
}
.k-nachbarn{display:grid;gap:8px;margin-bottom:12px}
.k-nachbarn li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.k-nachbarn a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.k-nachbarn small{color:var(--leise);font-size:13px;font-variant-numeric:tabular-nums}

.k-staedte{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px}
.k-staedte a{
  display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:64px;
  border:2px solid var(--ink);border-radius:14px;background:var(--flaeche);
  padding:10px 14px;text-decoration:none;color:var(--ink);
  box-shadow:3px 4px 0 var(--ink);
}
.k-staedte b{font-size:16px;font-weight:850}
.k-staedte small{color:var(--leise);font-size:12.5px}

.k-zahlen{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.k-zahl{
  border:2px solid var(--ink);border-radius:14px;background:var(--flaeche);
  padding:10px 16px;box-shadow:3px 4px 0 var(--ink);min-width:150px;
}
.k-zahl b{display:block;font-size:19px;font-weight:900;font-variant-numeric:tabular-nums}
.k-zahl span{display:block;font-size:12.5px;color:var(--leise);margin-top:1px}
.k-fussnote{font-size:13px;color:var(--leise);font-style:italic}
.k-schritte{margin:0;padding-left:22px;display:grid;gap:8px;color:var(--leise)}
.k-schritte b{color:var(--ink)}

.k-faq{margin:0}
.k-faq dt{font-weight:800;margin-top:14px}
.k-faq dt:first-child{margin-top:0}
.k-faq dd{margin:4px 0 0;color:var(--leise);max-width:66ch}

.k-fuss{
  border-top:2px solid var(--ink);padding:18px 22px;display:flex;gap:20px;
  flex-wrap:wrap;background:var(--flaeche);
}
.k-fuss a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}

a:focus-visible,.k-knopf:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

@media(max-width:560px){
  .k-seite{padding:16px 16px 56px}
  .k-kopf,.k-brot,.k-fuss{padding-left:16px;padding-right:16px}
  .k-knopf{width:100%}
}