/* weltkarte.org – Stylesheet
   Design: klassisches Atlasblatt. Tinte auf Kartenpapier, Ozeanblau, Atlasrot. */

:root{
  --tinte:#182a3e;        /* Kartentinte */
  --tinte-hell:#3d5266;
  --papier:#fcfbf7;       /* Kartenpapier */
  --papier-tief:#f3f0e7;
  --meer:#d8e7ef;         /* Ozean */
  --meer-tief:#b9d4e3;
  --rot:#b5372a;          /* Atlasrot */
  --grau:#5c6b7a;         /* Meridiangrau */
  --linie:#ddd7c9;        /* Blattlinien */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--tinte);
  background:var(--papier);
}

.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}
.wrap-schmal{max-width:48rem}

h1,h2,h3{font-family:var(--serif);line-height:1.2;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.5vw,3rem);margin:.4em 0 .4em}
h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:2.2em 0 .6em}
h3{font-size:1.15rem;margin:1.4em 0 .4em}
p{margin:.7em 0}
a{color:var(--tinte);text-decoration-color:var(--rot);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--rot)}
:focus-visible{outline:2px solid var(--rot);outline-offset:2px;border-radius:2px}

/* Eyebrow im Stil einer Blattnummer / Koordinate */
.koordinate{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grau);
  display:block;
  margin-bottom:.4rem;
}

/* ── Kopf ─────────────────────────────── */
.kopf{
  background:var(--papier);
  border-bottom:2px solid var(--tinte);
  position:relative;
}
.kopf-innen{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-top:.8rem;padding-bottom:.8rem}
.marke{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--serif);font-size:1.3rem;font-weight:700;
  text-decoration:none;letter-spacing:-.01em;
}
.marke svg{display:block}
.marke .tld{color:var(--rot)}
.nav{margin-left:auto;display:flex;gap:.25rem;flex-wrap:wrap}
.nav a{
  text-decoration:none;font-size:.95rem;padding:.35rem .65rem;border-radius:3px;
}
.nav a:hover{background:var(--papier-tief)}
.nav a[aria-current="page"]{background:var(--tinte);color:var(--papier)}

/* ── Hero / Titelzeile ────────────────── */
.titel{
  padding:2.2rem 0 1.4rem;
  background:
    repeating-linear-gradient(to right,transparent 0 119px,rgba(24,42,62,.06) 119px 120px),
    repeating-linear-gradient(to bottom,transparent 0 119px,rgba(24,42,62,.06) 119px 120px),
    var(--papier);
}
.titel .lead{max-width:46rem;font-size:1.1rem;color:var(--tinte-hell);margin-top:.2rem}

/* ── Karte (Leaflet-Fassade) ──────────── */
.karte{
  position:relative;
  height:min(62vh,560px);
  min-height:340px;
  background:
    repeating-linear-gradient(to right,transparent 0 89px,rgba(24,42,62,.08) 89px 90px),
    repeating-linear-gradient(to bottom,transparent 0 89px,rgba(24,42,62,.08) 89px 90px),
    var(--meer);
  border:2px solid var(--tinte);
  border-radius:4px;
  overflow:hidden;
}
.karte-voll{height:calc(100vh - 3.6rem);min-height:420px;border:0;border-radius:0}
.karte-hinweis{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.85rem;letter-spacing:.1em;color:var(--tinte-hell);
  text-transform:uppercase;
}
.karte.sw .leaflet-tile{filter:grayscale(1) contrast(1.05)}
.karte-rand{margin-top:1.2rem}
.karte-quelle{font-size:.8rem;color:var(--grau);margin-top:.4rem}

/* ── Kartenverzeichnis (Signatur-Element) ── */
.verzeichnis{
  display:grid;gap:1px;background:var(--linie);
  border:1px solid var(--linie);
  grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));
  margin:1.2rem 0;
}
.blatt{
  background:var(--papier);padding:1.1rem 1.15rem 1.2rem;
  text-decoration:none;display:block;position:relative;
}
.blatt:hover{background:var(--meer)}
.blatt strong{font-family:var(--serif);font-size:1.12rem;font-weight:600;display:block;margin-bottom:.25rem}
.blatt span{font-size:.9rem;color:var(--tinte-hell);line-height:1.45;display:block}
.blatt::after{
  content:"→";position:absolute;top:1rem;right:1rem;color:var(--rot);
  opacity:0;transition:opacity .15s;
}
.blatt:hover::after{opacity:1}

/* ── Linklisten (Länder etc.) ─────────── */
.linkliste{
  columns:3;column-gap:2.5rem;
  padding:0;margin:.8rem 0 1.6rem;list-style:none;
}
.linkliste li{break-inside:avoid;padding:.22rem 0;border-bottom:1px solid var(--papier-tief)}
.linkliste a{text-decoration:none}
.linkliste a:hover{text-decoration:underline;text-decoration-color:var(--rot)}
@media (max-width:56rem){.linkliste{columns:2}}
@media (max-width:34rem){.linkliste{columns:1}}

/* ── Tabellen ─────────────────────────── */
table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.98rem}
th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--linie)}
th{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);font-weight:600}
tr:hover td{background:var(--papier-tief)}

/* ── FAQ ──────────────────────────────── */
.faq details{border-bottom:1px solid var(--linie);padding:.6rem 0}
.faq summary{font-family:var(--serif);font-weight:600;font-size:1.05rem;cursor:pointer}
.faq summary::marker{color:var(--rot)}

/* ── Buttons ──────────────────────────── */
.knopf{
  display:inline-block;background:var(--tinte);color:var(--papier);
  padding:.55rem 1.1rem;border-radius:3px;border:0;font:inherit;font-size:.95rem;
  text-decoration:none;cursor:pointer;
}
.knopf:hover{background:var(--rot);color:var(--papier)}
.knopf-leicht{background:transparent;color:var(--tinte);border:1.5px solid var(--tinte)}
.knopf-leicht:hover{background:var(--tinte);color:var(--papier)}
.knopfzeile{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}

/* ── Inhalt / Abschnitte ──────────────── */
main{padding-bottom:3rem}
.abschnitt{margin-top:2.5rem}
.hinweis{
  border-left:3px solid var(--rot);background:var(--papier-tief);
  padding:.7rem 1rem;margin:1.2rem 0;font-size:.98rem;
}
ul.klar{padding-left:1.2rem}
ul.klar li{margin:.3rem 0}

/* ── Fuß ──────────────────────────────── */
.fuss{
  border-top:2px solid var(--tinte);
  background:var(--papier-tief);
  margin-top:3rem;padding:2.2rem 0 2.6rem;
  font-size:.93rem;
}
.fuss-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.6rem}
.fuss h2{font-size:.78rem;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grau);margin:0 0 .6rem}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{padding:.16rem 0}
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline;text-decoration-color:var(--rot)}
.fuss-unten{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--linie);color:var(--grau);display:flex;gap:1.2rem;flex-wrap:wrap}

/* ── Drucken ──────────────────────────── */
@media print{
  .kopf,.fuss,.knopfzeile,.nav{display:none!important}
  .karte{height:24cm;border:1px solid #000}
  body{background:#fff}
}