/* Startseite der Plattform: Städte als Karten */
body.portal{height:auto;min-height:100%}
.portal-wrap{max-width:1060px;margin:0 auto;padding:22px 20px 56px}
.portal-head{max-width:640px;margin:10px 0 30px}
.portal-head .brand{font-size:52px;margin-bottom:6px}
.portal-head .tagline{font-size:23px}
.portal-head .subtitle{font-size:17px;max-width:none}
.portal-head .lede{font-size:15.5px;max-width:58ch;margin-top:10px}
.portal-head .hello{margin-top:14px;padding:10px 14px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0;font-size:14.5px}
.cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.city{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--ink);text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease}
.city:hover,.city:focus-visible{transform:translateY(-2px);box-shadow:0 10px 26px rgb(0 0 0 / .12)}
.city img,.city .ph{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--sunk);filter:sepia(.25)}
.city .ph{background:repeating-linear-gradient(135deg,var(--sunk) 0 12px,var(--surface) 12px 24px)}
.city .body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.city .name{font:700 26px/1.1 var(--font-display)}
.city .facts{font-size:13.5px;color:var(--muted)}
.city .me{margin:2px 0 0;font-size:13.5px;font-weight:600;color:var(--mine)}
.city .go{margin-top:6px;font-weight:600;color:var(--accent);font-size:14px}
.portal-foot{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
@media (max-width:560px){.portal-head .brand{font-size:40px}}
@media (prefers-reduced-motion:reduce){.city{transition:none}.city:hover{transform:none}}

/* Stadtwechsel in der Kopfleiste der Karte */
.city-switch{display:inline-flex;align-items:center;gap:6px}
.city-switch select{font:500 12.5px var(--font-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:3px 6px;max-width:180px}

/* Startseite als offenes Buch mit gezeichneter Europakarte */
/* Farben der Startseite: im hellen Farbschema Papierton mit brauner Schrift, im dunklen die Farben der Seite */
body.portal{--portal-bg:#f6d2a3;--portal-ink:#7a5530;background:var(--portal-bg);color:var(--portal-ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body.portal{--portal-bg:var(--bg);--portal-ink:var(--ink)}}
:root[data-theme="dark"] body.portal{--portal-bg:var(--bg);--portal-ink:var(--ink)}
body.portal .portal-head .brand,body.portal .portal-head .tagline,body.portal .portal-head .subtitle,body.portal .portal-head .lede,
body.portal .topbar,body.portal .topbar a,body.portal .invite,body.portal .cities-wrap h2,body.portal .portal-foot{color:var(--portal-ink)}
body.portal .portal-head .tagline{color:var(--accent)}   /* „Die Kunst der Zeit“ im Rotton der Stadtseiten */
body.portal .topbar{border-bottom-color:color-mix(in srgb,var(--portal-ink) 35%,transparent)}
body.portal .portal-head .hello{color:var(--portal-ink);background:color-mix(in srgb,var(--portal-bg) 60%,#fff);border-left-color:var(--portal-ink)}
body.portal .portal-foot{border-top-color:color-mix(in srgb,var(--portal-ink) 35%,transparent)}
body.portal .portal-foot a,body.portal .invite a{color:var(--accent)}
.portal-head{margin-bottom:22px}
.book-stage{position:relative;max-width:1100px;margin:0 auto}
.atlas-book .atlas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .4s ease}
.atlas-book.is-text .atlas{opacity:0;pointer-events:none}
.atlas .drawing{mix-blend-mode:multiply}
.atlas .grat path{fill:none;stroke:#5a3c1e;stroke-opacity:.2;stroke-width:.8;stroke-dasharray:2 5}
.atlas .land .fill{fill:#7a5428;fill-opacity:.11;stroke:#3a2410;stroke-width:1.2;stroke-opacity:.78;stroke-linejoin:round}
.atlas .land .shore{fill:none;stroke:#5a3c1e;stroke-opacity:.1;stroke-width:8;stroke-linejoin:round}
.atlas .rivers path{fill:none;stroke:#3a2410;stroke-opacity:.42;stroke-width:.9;stroke-linecap:round}
.atlas .sea{font:italic 400 14px var(--font-display);fill:#3a2410;fill-opacity:.62;letter-spacing:.18em;text-anchor:middle}
.atlas .rose circle{fill:none;stroke:#3a2410;stroke-opacity:.5}
.atlas .rose path{fill:#3a2410;fill-opacity:.38}
.atlas .rose text{fill:#3a2410;fill-opacity:.7;font:600 13px var(--font-display)}
.atlas .pin{cursor:pointer}
.atlas .pin .hit{fill:transparent}
.atlas .pin .dot{fill:#7a2e1c;stroke:#fbf3e4;stroke-width:1.2}
.atlas .pin .ring{fill:none;stroke:#7a2e1c;stroke-width:1.2;stroke-opacity:.55}
.atlas .pin.mine .ring,.atlas .legend .mine-ring{stroke:#1f5d8a;stroke-opacity:1;stroke-width:2;stroke-dasharray:3 2.2}
.atlas .pin text,.atlas .legend text{font:700 16px var(--font-display);fill:#2b1d0e;paint-order:stroke;stroke:rgb(246 234 210 / .9);stroke-width:3.2px;stroke-linejoin:round}
.atlas .legend text{font-weight:400;font-size:16px}
.atlas .legend .dot{fill:#7a2e1c;stroke:#fbf3e4;stroke-width:1.2}
.atlas .legend .ring{fill:none}
.atlas .pin:hover .dot,.atlas .pin:focus-visible .dot{r:6.5}
.atlas .pin:hover text,.atlas .pin:focus-visible text{fill:#7a2e1c}
.atlas .pin:focus-visible{outline:none}
.atlas .pin:focus-visible .ring{stroke:#7a2e1c;stroke-width:2.4;stroke-opacity:1}
/* Stadtauswahl rechts oben am Buchrand */
.book-pick{position:absolute;top:1.2%;left:50%;transform:translateX(-50%);z-index:2}   /* mittig über den Buchseiten */
.book-pick select{font:600 14px var(--font-display);color:#2b1d0e;background:#efe0c2;border:1px solid #6b4f30;border-radius:6px;padding:6px 30px 6px 12px;
  box-shadow:0 4px 12px rgb(0 0 0 / .35);width:auto;max-width:200px}
/* Lesezeichen „Die Kunst der Zeit“ (öffnet Einleitung und Gedicht): rotes Band, das am äußeren Rand über die rechte Buchseite hängt */
.bookmark{position:absolute;z-index:3;left:82.6%;top:5.6%;width:4.2%;height:40%;padding:0 0 2.2cqw;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,#5e1d12 0%,#9c3424 30%,#b5432f 50%,#9c3424 70%,#5e1d12 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 2cqw),0 100%);
  filter:drop-shadow(0 .25cqw .35cqw rgb(0 0 0 / .45));transition:height .2s ease}
.bookmark .bm-text{display:block;writing-mode:vertical-rl;font:italic 600 1.75cqw/1 var(--font-display);letter-spacing:.04em;color:#fbecd3;white-space:nowrap;text-align:center}
.bookmark:hover,.bookmark:focus-visible{height:42%}
.bookmark:focus-visible{outline:2px solid #fbecd3;outline-offset:-4px}
@media (prefers-reduced-motion:reduce){.bookmark{transition:none}}
.atlas-book .pg.r{width:30.6%}   /* Gedichtseite: rechts Platz für das Lesezeichen */
.invite{max-width:640px;margin:18px auto 34px;text-align:center;font:400 18px/1.5 var(--font-display);color:var(--ink)}
.invite a{color:var(--accent);font-weight:700}
.cities-wrap h2{margin:0 0 14px}
@media (max-width:820px){
  .book-pick{top:.4%;left:50%}
  /* Handy: Band wäre zu schmal für Text – dort ein kleines Schild rechts unten am Buchrand (oben steht mittig die Stadtauswahl) */
  .bookmark{left:auto;right:5%;top:auto;bottom:.6%;width:auto;height:auto;padding:4px 10px;clip-path:none;border-radius:6px;background:#8c2f1f;filter:none;box-shadow:0 4px 12px rgb(0 0 0 / .35)}
  .bookmark .bm-text{writing-mode:horizontal-tb;font-size:13px;letter-spacing:0;font-style:normal}
  .bookmark:hover,.bookmark:focus-visible{height:auto}
  .atlas-book.is-text .bookmark{display:none}
  .book-pick select{font-size:13px;padding:4px 24px 4px 8px;max-width:150px}
  .atlas-book.is-text .book-pick{position:static;transform:none;align-self:center;order:-1}
  .atlas .pin text,.atlas .sea,.atlas .legend,.atlas .rose{display:none}
  .atlas .pin .dot{r:12;stroke-width:3}
  .atlas .pin .ring{r:20;stroke-width:3}
  .atlas .pin .hit{r:34}
}