/* Wolken Online – Grundgestaltung
   Papier kühl-grau wie bedeckter Himmel, Tinte dunkelschiefer, ein Atlas-Blau für Verweise.
   Lateinische Wolkennamen stehen kursiv – wie in der botanischen und meteorologischen Nomenklatur. */

@font-face { font-family: "Source Serif"; src: url(fonts/source-serif-4-latin-opsz-normal.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif"; src: url(fonts/source-serif-4-latin-ext-opsz-normal.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif"; src: url(fonts/source-serif-4-latin-opsz-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif"; src: url(fonts/source-serif-4-latin-ext-opsz-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #eef0ee;
  --paper-2: #e3e7e6;
  --ink: #18212a;
  --slate: #56626d;
  --rule: #c8cfd2;
  --link: #24507a;
  --link-hover: #13324f;
  --serif: "Source Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --row-h: 240px;
  --wrap: 1280px;
  --gap: clamp(1rem, 3vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--serif); font-optical-sizing: auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: 1.45rem; }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: #fff; padding: .5rem 1rem; z-index: 10; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); }
.narrow { max-width: 760px; }
.page-pad { padding-top: 2.5rem; padding-bottom: 4rem; }
.prose { max-width: 66ch; }
.prose p { hyphens: auto; }
.muted { color: var(--slate); }

/* Lateinische Namen und Kurzschreibweise */
.latin { font-style: italic; }
.code { font-family: var(--sans); font-size: .78em; color: var(--slate); letter-spacing: .02em; font-style: normal; white-space: nowrap; }

/* Kopf */
.site-head { border-bottom: 1px solid var(--rule); background: var(--paper); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 64px; flex-wrap: wrap; }
.wordmark { font-size: 1.35rem; font-weight: 600; color: var(--ink); text-decoration: none; font-style: italic; letter-spacing: -.01em; }
.site-head nav { display: flex; align-items: center; gap: 1.4rem; font-family: var(--sans); font-size: .95rem; }
.site-head nav > a { color: var(--ink); text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; }
.site-head nav > a:hover { border-bottom-color: var(--rule); }
.site-head nav > a[aria-current] { border-bottom-color: var(--ink); }
.head-search input { font: inherit; font-size: .9rem; width: 11rem; padding: .35rem .6rem; border: 1px solid var(--rule); background: #fff; border-radius: 3px; color: var(--ink); }

/* Fuß */
.site-foot { border-top: 1px solid var(--rule); margin-top: 3rem; font-family: var(--sans); font-size: .85rem; color: var(--slate); }
.foot-row { display: flex; justify-content: space-between; gap: 2rem; padding-top: 1.5rem; padding-bottom: 2rem; flex-wrap: wrap; }
.foot-row p { max-width: 70ch; margin: 0; }
.foot-row a { margin-right: 1rem; color: var(--slate); }

/* Startseite */
.hero { background: #0f151b; }
.hero-img img { width: 100%; max-height: min(78vh, 900px); object-fit: cover; }
.hero.small .hero-img { display: flex; justify-content: center; padding-top: 2rem; }
.hero.small .hero-img img { width: auto; max-width: 100%; max-height: 70vh; }
.hero-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 2rem; padding-top: 1.1rem; padding-bottom: 1.3rem; color: #dfe5e8; }
.hero-label .specimen { margin: 0; }
.hero-label .big { font-size: clamp(1.6rem, 3vw, 2.3rem); color: #fff; text-decoration: none; }
.hero-label .code { color: #9aa8b2; margin-left: .6rem; font-size: 1rem; }
.hero-label .meta { margin: 0; font-family: var(--sans); font-size: .9rem; color: #aab6be; }

.intro { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 3rem var(--gap); padding-top: 3.5rem; padding-bottom: 1rem; align-items: start; }
.intro-text h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

.levels { margin: 0; }
.levels figcaption h2 { font-size: 1.2rem; margin-bottom: .2rem; }
.levels figcaption p { font-family: var(--sans); font-size: .85rem; color: var(--slate); }
.levels-grid { display: grid; grid-template-columns: 5.5rem repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 10px; margin-top: 1rem; }
.axis { grid-column: 1; font-family: var(--sans); font-size: .85rem; font-weight: 600; border-top: 2px solid var(--ink); padding-top: .4rem; }
.axis small { display: block; font-weight: 400; color: var(--slate); font-size: .78rem; }
.r1 { grid-row: 1; } .r2 { grid-row: 2; } .r3 { grid-row: 3; } .r23 { grid-row: 2 / 4; } .r123 { grid-row: 1 / 4; }
.c1 { grid-column: 2; } .c2 { grid-column: 3; } .c3 { grid-column: 4; } .c4 { grid-column: 5; } .c5 { grid-column: 6; }
.genus { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); border-top: 1px solid var(--rule); padding-top: .4rem; }
.genus img, .genus .noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); }
.genus.r23 img, .genus.r123 img { flex: 1; aspect-ratio: auto; min-height: 0; height: 100%; }
.genus .g-name { margin-top: .35rem; font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.genus .g-de { font-family: var(--sans); font-size: .76rem; color: var(--slate); line-height: 1.3; }
.genus:hover .g-name .latin { text-decoration: underline; text-underline-offset: .18em; }

.block { padding-top: 2.5rem; }
.block-h { font-size: 1.2rem; border-top: 2px solid var(--ink); padding-top: .5rem; margin-bottom: 1rem; }

/* Galerie: Zeilen mit natürlichem Seitenverhältnis */
.gallery { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 10px; }
.gallery::after { content: ""; flex-grow: 1000000; }
.gallery li { flex-grow: calc(var(--r) * 100); flex-basis: calc(var(--r) * var(--row-h)); max-width: calc(var(--r) * var(--row-h) * 1.7); }
.gallery a { display: block; text-decoration: none; color: var(--ink); }
.gallery img { width: 100%; aspect-ratio: var(--r); object-fit: cover; background: var(--paper-2); }
.gallery a:hover img { filter: brightness(1.06); }
.gallery .cap { display: block; padding-top: .35rem; font-size: .95rem; line-height: 1.25; }
.gallery a:hover .latin { text-decoration: underline; text-underline-offset: .18em; }
.gallery .more { font-family: var(--sans); font-size: .75rem; color: var(--slate); }
.gallery .where { display: block; font-family: var(--sans); font-size: .76rem; color: var(--slate); min-height: 1.2em; }

/* Atlas */
.atlas-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; margin-bottom: 1.5rem; }
.atlas-head h1 { margin: 0; }
.atlas-head .count { margin: 0; font-family: var(--sans); color: var(--slate); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; }
.chips a { display: inline-block; padding: .25rem .7rem; border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; color: var(--ink); background: #fff; font-size: .95rem; }
.chips a:hover { background: var(--paper-2); }
.chips .reset { border-color: transparent; background: none; font-family: var(--sans); font-size: .85rem; color: var(--link); text-decoration: underline; }
.atlas-body { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--gap); align-items: start; }
.filters summary { display: none; }
.filter-search label { display: block; font-family: var(--sans); font-size: .8rem; color: var(--slate); margin-bottom: .25rem; }
.filter-search input { width: 100%; font: inherit; font-size: .95rem; padding: .4rem .55rem; border: 1px solid var(--rule); background: #fff; border-radius: 3px; }
.facet { border-top: 1px solid var(--rule); margin-top: 1rem; padding-top: .6rem; }
.facet h2 { font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--slate); margin: 0 0 .35rem; }
.facet ul { list-style: none; margin: 0; padding: 0; max-height: 19rem; overflow: auto; }
.facet li a { display: flex; justify-content: space-between; gap: .5rem; padding: .12rem .35rem; margin: 0 -.35rem; border-radius: 3px; text-decoration: none; color: var(--ink); font-size: .98rem; }
.facet li a:hover { background: var(--paper-2); }
.facet li a[aria-current] { background: var(--ink); color: #fff; }
.facet li a[aria-current] .n { color: #c9d2d8; }
.facet .n, .combos .n { font-family: var(--sans); font-size: .78rem; color: var(--slate); font-variant-numeric: tabular-nums; }
.facet .years { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .9rem; }
.facet .years a { font-family: var(--sans); font-size: .88rem; }
.facet .people a { font-size: .93rem; }
.pager { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 2.5rem; font-family: var(--sans); font-size: .95rem; }
.empty { font-size: 1.1rem; }

/* Fotoseite */
.photo-full { margin: 0; background: #0f151b; display: flex; justify-content: center; }
.photo-full img { max-height: 82vh; width: auto; }
.photo-info { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head head" "cls facts" "desc facts"; gap: 0 var(--gap); padding-top: 2rem; }
.photo-head { grid-area: head; }
.photo-head h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); max-width: 30ch; }
.classification { grid-area: cls; margin-bottom: 1.5rem; }
.layer { border-top: 1px solid var(--rule); padding: .7rem 0 .6rem; }
.layer:first-child { border-top: 2px solid var(--ink); }
.layer .specimen { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .15rem; }
.layer .specimen a { text-decoration: none; color: var(--ink); }
.layer .specimen a:hover { text-decoration: underline; }
.layer .code { font-size: .95rem; margin-left: .3rem; }
.layer .kinds { font-family: var(--sans); font-size: .82rem; color: var(--slate); margin: 0; }
.phen { font-family: var(--sans); font-size: .9rem; border-top: 1px solid var(--rule); padding-top: .6rem; }
.facts { grid-area: facts; margin: 0; border-top: 2px solid var(--ink); align-self: start; }
.facts div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-family: var(--sans); font-size: .85rem; color: var(--slate); padding-top: .15rem; }
.facts dd { margin: 0; }
.description { grid-area: desc; }
.notice { font-family: var(--sans); background: #fff3c4; padding: .5rem .8rem; display: inline-block; }
.edit { font-family: var(--sans); font-size: .9rem; }

/* Lexikon */
.lex-head { margin-bottom: 1.5rem; }
.lex-toc { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-family: var(--sans); font-size: .92rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: .6rem 0; margin-bottom: 2rem; position: sticky; top: 0; background: var(--paper); z-index: 2; }
.lex-section { margin-bottom: 3rem; scroll-margin-top: 4rem; }
.lex-section h2 { font-size: 1.7rem; margin-bottom: .2rem; }
.lex-sub { font-family: var(--sans); font-size: .9rem; color: var(--slate); max-width: 70ch; }
.lex-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0 2rem; }
.lex-list li { border-top: 1px solid var(--rule); padding: .65rem 0 .8rem; }
.lex-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; text-decoration: none; color: var(--ink); }
.lex-list a:hover .lex-name { text-decoration: underline; text-underline-offset: .18em; }
.lex-name { font-size: 1.2rem; }
.lex-n { font-family: var(--sans); font-size: .78rem; color: var(--slate); white-space: nowrap; }
.lex-list p { font-size: .93rem; color: #3b4651; margin: .2rem 0 0; line-height: 1.45; }
.lex-list li.zero .lex-name { color: var(--slate); }

.term-head .crumbs { font-family: var(--sans); font-size: .88rem; color: var(--slate); margin-bottom: .6rem; }
.term-head h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 500; margin-bottom: .1rem; }
.term-head h1 .code { font-size: 1.2rem; vertical-align: middle; }
.term-de { font-family: var(--sans); color: var(--slate); }
.term-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); margin-top: 1.5rem; }
.term-body .prose p:first-child { font-size: 1.15rem; line-height: 1.6; }
.combos { border-top: 2px solid var(--ink); padding-top: .6rem; }
.combos h2 { font-size: 1.05rem; }
.combos p { margin: 0 0 .7rem; line-height: 1.8; }
.combo-k { display: block; font-family: var(--sans); font-size: .8rem; color: var(--slate); }
.combos a.latin, .combos span.latin { margin-right: .15rem; }
.combos .n { margin-right: .7rem; }

/* Kleine Bildschirme */
@media (max-width: 960px) {
  .intro { grid-template-columns: 1fr; }
  .atlas-body { grid-template-columns: 1fr; }
  .filters { border: 1px solid var(--rule); background: #fff; padding: .2rem .9rem .8rem; border-radius: 4px; }
  .filters summary { display: block; cursor: pointer; font-family: var(--sans); font-weight: 600; padding: .5rem 0; }
  .filters .facet ul { max-height: 12rem; }
  .photo-info { grid-template-columns: 1fr; grid-template-areas: "head" "cls" "facts" "desc"; }
  .facts { margin-bottom: 1.5rem; }
  .term-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --row-h: 115px; }
  .head-search input { width: 8rem; }
  .site-head nav { gap: 1rem; }
  .levels-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .levels-grid .axis { display: none; }
  .levels-grid .genus { grid-column: auto; grid-row: auto; }
  .genus.r23 img, .genus.r123 img { aspect-ratio: 4 / 3; height: auto; flex: none; }
  .gallery .cap { font-size: .85rem; }
  .facts div { grid-template-columns: 6.5rem 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }