/* ============================================================
   MOCKUP T1 — Städte-Hub (Hamburg als erste Instanz), 2026-09-23
   Vorlage für den Generator. Abgeleitet aus web/index.html
   (Vorbild, design-vorbild.md) und dem Geschwister-Mockup
   2026-09-23-spot-seite-alsterschwaene.voll.html.

   Gesetz: nur Tokens aus web/tokens/*.css, kein Roh-Hex.
   Ein Breakpoint-Satz 390 → 768 → 1100/1440.
   Register: Referenz/Verteiler. Ein Akzent (Kobalt). Elf
   Kategorie-Farben erscheinen NUR als Punkt oder Ring, nie als
   Textfarbe (Token-Gesetz colors.css: -text ist nur gegen Weiß
   AA-belegt, auf -soft fallen 7 von 11 durch).
   ============================================================ */

:root { --wrap: 1120px; }

body { background: var(--white); color: var(--ink-900); }

/* Karo-Hintergrund der Startseite, sehr leise, hinter dem Kopf */


.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

/* ---------- Brotkrume ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  font: 500 13px var(--font-mono); color: var(--ink-500); padding-top: 4px; }
.crumbs a, .crumbs span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.crumbs a { color: var(--ink-500); text-decoration: none; }
.crumbs a:hover { color: var(--ink-900); }
.crumbs span[aria-hidden] { color: var(--ink-300); }

/* ---------- 1 Kopf: asymmetrischer Split ---------- */
.hero { padding-block: 6px 12px; }
.hero .eyebrow { margin: 0 0 14px; }
.hero h1 {
  font-size: clamp(2.05rem, 5.6vw, 3.35rem); line-height: 1.04;
  letter-spacing: var(--tracking-display); margin: 0 0 26px; max-width: 26ch;
}
.hbody { display: grid; gap: 26px; }
.answer { font-size: 17.5px; line-height: 1.6; color: var(--ink-700); margin: 0; max-width: 54ch; }
.hcta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.nums { display: grid; grid-template-columns: repeat(3, auto); gap: 30px;
  margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--ink-100); }
.nums div { margin: 0; }
.nums dt { font: 700 clamp(1.7rem, 6vw, 2.3rem) var(--font-display);
  letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.nums dd { margin: 7px 0 0; font-size: 13px; line-height: 1.3; color: var(--ink-500); max-width: 14ch; }
.hfig { margin: 0; }
.hfig img { width: 100%; height: auto; display: block; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); background: var(--ink-050); }
.hfig figcaption { margin-top: 10px; font: 500 12.5px var(--font-mono); color: var(--ink-500); }

/* ---------- Sektionsrahmen ---------- */
.sec { padding-block: 60px; }
.band { background: var(--canvas); }
.sec h2 { font-size: clamp(1.55rem, 3.6vw, 2.35rem); letter-spacing: var(--tracking-display); margin: 0 0 12px; }
.sec .lead { font-size: 16.5px; line-height: 1.6; color: var(--ink-500); max-width: 62ch; margin: 0 0 30px; }
.sec .lead.wide { max-width: 68ch; color: var(--ink-700); font-size: 17px; }
.red { font: 600 12px var(--font-mono); letter-spacing: .06em; color: var(--amber-text);
  background: var(--c-arch-soft); padding: 2px 7px; border-radius: var(--radius-xs); white-space: nowrap; }
.more { margin: 26px 0 0; }
.more a { font: 600 15px var(--font-display); color: var(--brand-text); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; }
.more a:hover { text-decoration: underline; }

/* ---------- 2 Was machen: nummerierte Zeilenliste (kein Kartenraster) ---------- */
.doit { list-style: none; counter-reset: d; margin: 0; padding: 0;
  border-top: 1px solid var(--ink-100); }
.doit li { counter-increment: d; border-bottom: 1px solid var(--ink-100); }
.doit a { display: grid; grid-template-columns: 34px minmax(0,1fr); column-gap: 14px; row-gap: 0; align-items: baseline;
  padding: 18px 0; text-decoration: none; color: inherit; }
.doit a::before { content: counter(d, decimal-leading-zero);
  font: 600 12.5px var(--font-mono); color: var(--ink-500); letter-spacing: .06em; }
.doit b { font: 700 17px var(--font-display); display: block; grid-column: 2; }
.doit span { display: block; grid-column: 2; margin-top: 5px; font-size: 15px; line-height: 1.5; color: var(--ink-500); max-width: 60ch; }
.doit .plainrow { display: grid; grid-template-columns: 34px minmax(0,1fr); column-gap: 14px;
  align-items: baseline; padding: 18px 0; }
.doit .plainrow b, .doit .plainrow span { grid-column: 2; }
.doit li:has(.plainrow) { counter-increment: d; }
.doit .plainrow::before { content: counter(d, decimal-leading-zero); grid-column: 1;
  font: 600 12.5px var(--font-mono); color: var(--ink-500); letter-spacing: .06em; }
.doit a:hover b { color: var(--brand-text); }

/* ---------- 3 Karte ---------- */
.mapfig { margin: 0; }
.mapfig img { width: 100%; height: auto; display: block; aspect-ratio: 16/10; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--radius-lg); border: 1px solid var(--ink-100); background: var(--canvas); }
.mapfig figcaption { margin-top: 10px; font: 500 12.5px var(--font-mono); color: var(--ink-500); }

/* ---------- 4 Orte-Raster ---------- */
.ogrid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ocard { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--ink-100);
  background: var(--white); text-decoration: none; color: var(--ink-900); display: block;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.ocard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--ink-900); }
.ocard img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--ink-050); }
.ob { padding: 16px 18px 20px; }
.okat { display: inline-block;
  font: 600 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-500); }
.ocard h3 { font-size: 19px; margin: 9px 0 3px; letter-spacing: var(--tracking-display); }
.oarea { display: block; font: 600 13px var(--font-display); color: var(--ink-500); }
.ob p { margin: 11px 0 0; font-size: 14.5px; line-height: 1.52; color: var(--ink-500); }
.caesura { grid-column: 1 / -1; margin: 12px 0; padding-top: 20px; border-top: 1px solid var(--ink-200);
  font: 500 15px var(--font-body); color: var(--ink-500); font-style: italic; }

/* ---------- 5 Stadtteile: Textblöcke, kein Bild ---------- */
.areas { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink-200); }
.area { padding: 18px 0 14px; border-bottom: 1px solid var(--ink-200); }
.area h3 { font-size: 18px; margin: 0; display: inline; }
.acount { font: 600 12px var(--font-mono); letter-spacing: .1em; color: var(--brand-text); margin-left: 10px; }
.area p { margin: 9px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink-500); }
.area .atext { line-height: 1.55; color: var(--ink-700); max-width: 46ch; }
.area a { color: var(--ink-700); text-decoration: none; border-bottom: 1px solid var(--ink-200); }
.area a:hover { color: var(--brand-text); border-color: var(--brand); }

/* ---------- 6 Linsen: kompakte Kacheln ---------- */
.lenses { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lens { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 11px;
  min-height: 54px; padding: 0 15px; border: 1px solid var(--ink-100); border-radius: var(--radius-md);
  text-decoration: none; color: var(--ink-900); background: var(--white); }
.lens:hover { border-color: var(--brand); color: var(--ink-900); }
.lens i { width: 10px; height: 10px; border-radius: var(--radius-pill); }
.lens b { font: 600 14.5px var(--font-display); }
.lenses > .lens:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
.lens em { font: 600 13px var(--font-mono); font-style: normal; color: var(--ink-500);
  font-variant-numeric: tabular-nums; }

/* ---------- 7 Tagespläne / 10 Gruppen / 13 Städte: Textzeile statt Hüllen ---------- */
.planline { margin: 4px 0 0; font: 600 16px var(--font-display); line-height: 2.1; color: var(--ink-300); }
.planline a { color: var(--brand-text); text-decoration: none;
  border-bottom: 1.5px solid var(--blue-100); padding: 6px 0; }
.planline a:hover { border-color: var(--brand); }
.agolink { font: 600 14.5px var(--font-display); color: var(--brand-text); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; }
.agolink:hover { text-decoration: underline; }
/* ---------- (alte Plan-Karten, nicht mehr verwendet) ---------- */
.plans { display: grid; gap: 10px; }
.plan { display: grid; grid-template-columns: 1fr; row-gap: 5px; align-items: start;
  padding: 16px 18px; border: 1.5px solid var(--ink-200); border-radius: var(--radius-md);
  text-decoration: none; color: inherit; }
.plan:hover { border-color: var(--brand); color: inherit; }
.plan b { font: 700 16px var(--font-display); }
.plan span { grid-column: 1; font-size: 13.5px; color: var(--ink-500); }
.plan em { font-style: normal; font-size: 12.5px; color: var(--ink-500); }

/* ---------- 8 Tabelle ---------- */
.swipe { margin: -18px 0 14px; font: 600 12px var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-500); }
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sec table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; }
.sec thead th { text-align: left; font: 600 11px var(--font-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-500); padding: 0 14px 12px 0; border-bottom: 1.5px solid var(--ink-200); }
.sec tbody th { text-align: left; font: 700 15px var(--font-display); padding: 14px 14px 14px 0; }
.sec tbody th a { color: var(--ink-900); text-decoration: none; }
.sec tbody th a:hover { color: var(--brand-text); }
.sec tbody td { padding: 14px 14px 14px 0; color: var(--ink-500); vertical-align: top; }
.sec tbody tr + tr th, .sec tbody tr + tr td { border-top: 1px solid var(--ink-100); }

/* ---------- 9 Dunkles Kapitel (wie web/index.html) ---------- */
.dark { background: var(--slate-900); color: var(--text-on-dark); padding-block: 64px; margin-top: 20px; }
.dgrid { display: grid; gap: 34px; }
.dark h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); margin: 0 0 22px; letter-spacing: var(--tracking-display); }
.steps { list-style: none; counter-reset: s; margin: 0 0 28px; padding: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 13px; row-gap: 0;
  padding: 14px 0; border-top: 1px solid var(--slate-700); }
.steps li::before { content: counter(s); font: 700 13px var(--font-mono); color: var(--blue-300); padding-top: 3px; }
.steps b { font: 700 16.5px var(--font-display); display: block; grid-column: 2; }
.steps span { display: block; grid-column: 2; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--text-on-dark-muted); }
.dark .note { margin: 14px 0 0; font: 500 11.5px var(--font-mono); color: var(--text-on-dark-muted); }
.dframes { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; max-width: 260px; }
.dframes .f2 { display: none; }
.dframes img { width: 100%; height: auto; display: block; border-radius: var(--radius-md);
  border: 1px solid var(--slate-700); box-shadow: 0 18px 40px rgba(0,0,0,.45); }

/* ---------- 11 Geschichten: Text-Karten ohne Bild ---------- */
.stories { display: grid; grid-template-columns: 1fr; gap: 10px; }
.story { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 18px 20px; background: var(--white); border: 1px solid var(--ink-100);
  border-radius: var(--radius-md); text-decoration: none; color: inherit; }
.story:hover { border-color: var(--brand); color: inherit; }
.story b { font: 700 17px var(--font-display); }
.story span { font: 500 12.5px var(--font-mono); color: var(--ink-500); white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* ---------- 12 FAQ ---------- */
.faq details { border-top: 1px solid var(--ink-100); }
.faq details:last-child { border-bottom: 1px solid var(--ink-100); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  gap: 14px; align-items: center; min-height: 56px; font: 600 16px var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand-text); font: 400 21px var(--font-display); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.58; color: var(--ink-700); max-width: 66ch; }

/* ---------- 13 Nachbarstadt + Quellen ---------- */
.citycard { display: inline-flex; align-items: baseline; gap: 14px; padding: 18px 24px;
  border: 1.5px solid var(--ink-200); border-radius: var(--radius-md); text-decoration: none; color: inherit; }
.citycard:hover { border-color: var(--brand); color: inherit; }
.citycard b { font: 700 19px var(--font-display); }
.citycard span { font: 600 13px var(--font-mono); color: var(--ink-500); }
.sources { margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--ink-100);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-500); max-width: 78ch; }

/* ---------- Fußzeile ---------- */
.fhead { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 52px; }
.fhead img { border-radius: var(--radius-md); }
.fhead b { display: block; font: 700 clamp(22px, 3vw, 34px) var(--font-display); letter-spacing: -.01em; }
.fhead span { display: block; color: var(--text-on-dark-muted); font-size: 15px; }
.fcta { margin-left: auto; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.fcta .pill { justify-content: center; }
.fcta .pill:first-child { background: var(--white); color: var(--ink-900) !important; }
.fblurb { color: var(--text-on-dark-muted); font-size: 14.5px; max-width: 280px; margin: 0; }

/* ---------- Fokus ---------- */
a:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-xs); }

/* ============================ 768 ============================ */
@media (min-width: 768px) {
  .sec { padding-block: 76px; }
  .hero { padding-block: 18px 30px; }
  .hbody { grid-template-columns: 1.05fr .95fr; align-items: start; gap: 40px; }
  .nums { grid-template-columns: repeat(3, 1fr); }
  .ogrid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .areas { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .area { border-bottom: 1px solid var(--ink-200); }
  .lenses { grid-template-columns: repeat(3, 1fr); }
  .lenses > .lens:last-child:nth-child(2n+1) { grid-column: auto; }
  .plans { grid-template-columns: 1fr 1fr; }
  .stories { grid-template-columns: repeat(3, 1fr); }
  .story { flex-direction: column; gap: 8px; }
  .story span { white-space: normal; }
  .dgrid { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 44px; }
  .sec table { min-width: 0; }
  .swipe { display: none; }
  .dframes { grid-template-columns: 1fr 1fr; max-width: none; }
  .dframes .f2 { display: block; }
}

/* ============================ 1100 ============================ */
@media (min-width: 1100px) {
  .sec { padding-block: 80px; }
  .hbody { gap: 64px; }
  .ogrid { grid-template-columns: repeat(3, 1fr); }
  .lenses { grid-template-columns: repeat(4, 1fr); }
  .plans { grid-template-columns: repeat(4, 1fr); }
  .plan em { margin-top: 4px; }
  .doit { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; border-top: 0; }
  .doit li { border-top: 1px solid var(--ink-100); border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ocard { transition: none; }
  .ocard:hover { transform: none; }
}