/* ============================================================
   Jan Bibian Karlsruhe — modern static site
   ============================================================ */

:root {
  --green: #1e7a3f;
  --green-dark: #155c2f;
  --green-light: #e6f2ea;
  --red: #c8102e;
  --red-dark: #9d0c24;
  --ink: #1c2430;
  --ink-soft: #4a5568;
  --paper: #ffffff;
  --bg: #f6f8f7;
  --line: #e2e8e4;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(28, 36, 48, 0.08);
  --shadow-sm: 0 2px 10px rgba(28, 36, 48, 0.06);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }

/* 1160 statt 1120px. Gemessen: die Kopfzeile braucht in der
   bulgarischen Fassung 275,7px fuer Logo und Namen, 727,9px fuer die
   Navigation, 85px fuer die Sprachwahl und zweimal 16px Abstand -
   zusammen 1120,6px. Bei 1120px fehlte also nicht einmal ein ganzer
   Pixel, und "Карлсруе" verschwand hinter den Auslassungspunkten.
   Mit 1160px bleiben 39,3px Luft (deutsch: 63,5px). */
.container {
  width: min(1160px, 100% - 2.5rem);
  margin-inline: auto;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0;
}

/* flex-shrink: 0 - der Vereinsname wird NICHT gequetscht. Vorher durfte
   .brand schrumpfen (min-width: 0), und weil .brand-sub ellipsis hat,
   fiel dabei zuerst der Ort weg: aus "… дружество · Карлсруе" wurde
   "… дружество · Карл…". Gemessen schrumpfte .brand von 275,7px auf
   65,5px, waehrend der Untertitel unveraendert 222,5px breit blieb -
   der Ueberschuss verschwand hinter den Auslassungspunkten.
   Weicht die Kopfzeile aus, dann bei der Navigation, nicht beim Namen. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  flex: 0 0 auto;
}
.brand:hover { color: var(--ink); }

.brand-logo { flex: 0 0 auto; width: 42px; height: 42px; object-fit: contain; }

/* Name und Untertitel sind BLOECKE - sie brechen die Zeile selbst.
   Frueher trennte ein <br> die beiden; das brachte eine zusaetzliche
   Zeilenhoehe mit, der Textblock wurde 58,5px hoch (Logo: 42px) und
   ragte oben wie unten darueber hinaus. Ohne das <br> sind es 34px,
   und die Mitten von Logo und Text liegen exakt aufeinander. */
.brand-text { display: flex; flex-direction: column; justify-content: center;
              line-height: 1.2; }
.brand-name { display: block; font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
/* Kein ellipsis mehr: der Untertitel steht ganz da oder gar nicht. Auf
   schmalen Geraeten blendet ihn die Regel unten (Zeile ~560) ohnehin
   aus - ein halber Ortsname ist schlechter als kein Untertitel. */
.brand-sub { display: block; font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap; }

.site-nav { margin-left: auto; }

.site-nav ul {
  display: flex;
  gap: 0.2rem;
  list-style: none;
  align-items: center;
}

.site-nav a {
  display: block;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}

.site-nav a:hover { color: var(--green-dark); background: var(--green-light); }
.site-nav a.active { color: var(--green-dark); background: var(--green-light); }

.lang-switch {
  display: flex;
  gap: 0.25rem;
  margin-left: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem;
  background: var(--paper);
}

.lang-btn {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
}

.lang-btn.active { background: var(--green); color: #fff; }

.nav-toggle {
  display: none;
  margin-left: auto;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  position: relative;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -7px; left: 0; right: 0; }
.nav-toggle span::after { top: 7px; left: 0; right: 0; }

.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Flag ribbon ---------- */

.flag-ribbon {
  height: 4px;
  background: linear-gradient(90deg,
    #ffffff 0 33.3%,
    var(--green) 33.3% 66.6%,
    var(--red) 66.6% 100%);
}

/* ---------- Hero ---------- */

.hero {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(30, 122, 63, 0.16), transparent 60%),
    radial-gradient(800px 420px at -10% 110%, rgba(200, 16, 46, 0.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
  padding: 4.5rem 0 4rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: center;
}

.overline {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.8rem;
}

.hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.hero .lead {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 34rem;
  margin-bottom: 1.8rem;
}

.hero-art { display: flex; justify-content: center; }

.hero-logo-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.4rem 2.2rem;
  display: grid;
  place-items: center;
}
.hero-logo-card img { width: 100%; max-width: 380px; height: auto; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-dark); color: #fff; }

.btn-outline { border: 2px solid var(--green); color: var(--green-dark); }
.btn-outline:hover { background: var(--green-light); }

.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); color: #fff; }

/* ---------- Sections ---------- */

.section { padding: 3.8rem 0; }
.section.alt { background: var(--paper); border-block: 1px solid var(--line); }

.section-head { max-width: 46rem; margin-bottom: 2.2rem; }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.6rem; letter-spacing: -0.01em; }
.section-head p { color: var(--ink-soft); }

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.3rem;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--green-light);
  color: var(--green-dark);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.card-icon svg { width: 24px; height: 24px; }

.card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); font-size: 0.94rem; flex: 1; }

.card-link {
  margin-top: 1rem;
  font-weight: 700;
  font-size: 0.9rem;
}
.card-link::after { content: " →"; }

/* ---------- Info / fact boxes ---------- */

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.3rem;
}

.fact {
  background: var(--paper);
  border-left: 4px solid var(--green);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-sm);
}
.fact.red { border-left-color: var(--red); }
.fact h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin-bottom: 0.35rem; }
.fact p { font-weight: 600; }
.fact small { display: block; font-weight: 400; color: var(--ink-soft); }

/* ---------- Prose pages ---------- */

.page-hero {
  background:
    radial-gradient(900px 380px at 90% -20%, rgba(30, 122, 63, 0.14), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--bg));
  padding: 3.2rem 0 2.6rem;
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin-bottom: 0.6rem; letter-spacing: -0.01em; }
.page-hero .lead { color: var(--ink-soft); max-width: 44rem; font-size: 1.05rem; }

.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: center;
}
.page-art { display: flex; align-items: center; }
.page-art svg, .page-art img { width: 200px; height: auto; }
@media (max-width: 760px) { .page-art { display: none; } }

/* Folk embroidery (shevitsa) divider */
.shevitsa {
  height: 16px;
  background-image: url("../img/shevitsa.svg");
  background-repeat: repeat-x;
  background-size: auto 16px;
  opacity: 0.85;
}

.prose { max-width: 50rem; }
.prose h2 { margin: 2.2rem 0 0.7rem; font-size: 1.4rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.6rem 0 0.5rem; font-size: 1.1rem; }
.prose p { margin-bottom: 1rem; color: var(--ink-soft); }
.prose p strong { color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 1rem 1.3rem; color: var(--ink-soft); }
.prose li { margin-bottom: 0.4rem; }
.prose li::marker { color: var(--green); }

.note {
  background: var(--green-light);
  border: 1px solid #cbe4d4;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  color: var(--green-dark);
  font-size: 0.95rem;
  margin: 1.4rem 0;
}

/* ---------- Schedule table ---------- */

.table-wrap { overflow-x: auto; margin: 1.2rem 0; }

table.schedule {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  min-width: 480px;
}

.schedule th, .schedule td {
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.schedule th { background: var(--green); color: #fff; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; }
.schedule tr:last-child td { border-bottom: 0; }
.schedule td:first-child { font-weight: 600; }

/* ---------- News ---------- */

.news-list { display: grid; gap: 1.2rem; max-width: 50rem; }

.news-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow-sm);
}

.news-date {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.3rem;
}

.news-item h3 { margin-bottom: 0.4rem; }
.news-item p { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Documents ---------- */

.doc-list { display: grid; gap: 1rem; max-width: 50rem; }

.doc-item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-sm);
}

.doc-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fdecef;
  color: var(--red);
  display: grid;
  place-items: center;
}
.doc-icon svg { width: 22px; height: 22px; }

.doc-item h3 { font-size: 1rem; }
.doc-item p { font-size: 0.88rem; color: var(--ink-soft); }
.doc-item .btn { margin-left: auto; padding: 0.5rem 1.1rem; font-size: 0.85rem; flex: 0 0 auto; }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.3rem;
  align-items: stretch;
}

.contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
}

.contact-card h3 { margin-bottom: 0.8rem; font-size: 1.05rem; }
.contact-card address { font-style: normal; color: var(--ink-soft); }
.contact-card p { color: var(--ink-soft); }
.contact-card a { font-weight: 600; }
.contact-row { display: flex; gap: 0.6rem; margin-bottom: 0.5rem; align-items: baseline; }
.contact-row .label { font-weight: 700; color: var(--ink); min-width: 5.5rem; font-size: 0.9rem; }

/* ---------- Galerie ---------- */
/* Zwei Raster: die Alben auf der Uebersicht und die Bilder im Album.
   Beide nehmen die Masse der Angebotskarten auf (auto-fit, 1,3rem
   Abstand, --radius), damit die Galerie nicht wie ein Fremdkoerper
   zwischen den uebrigen Seiten steht. */

/* auto-FILL, nicht auto-fit: bei auto-fit zieht sich ein einzelnes Album
   ueber die volle Breite und das Titelbild wird zum Banner. auto-fill
   laesst die leeren Spalten stehen, die Kachel behaelt ihre Groesse.
   Deckel bei 320px, damit zwei, drei Kacheln nicht unnoetig gross
   werden. */
.album-raster,
.bild-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 320px));
  gap: 1.3rem;
}

.album-kachel {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.album-kachel:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--ink); }

.album-kachel img { width: 100%; height: 190px; object-fit: cover; }

/* Platzhalter, solange ein Album noch kein Bild hat - ohne ihn saehe
   die Kachel wie ein Fehler aus. */
.album-leer {
  height: 190px;
  display: grid;
  place-items: center;
  background: var(--green-light);
  font-size: 2.4rem;
}

.album-text { display: block; padding: 1rem 1.2rem 1.2rem; }
.album-text strong { display: block; font-size: 1.02rem; }
.album-text small { display: block; color: var(--ink-soft); font-size: 0.82rem; }

.bild-kachel {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.bild-kachel img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.bild-kachel:hover img { transform: scale(1.04); }
.bild-kachel figcaption {
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.hinweis-leer {
  padding: 2rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- Kontaktformular ---------- */
/* Diese Regeln fehlten: das Formular (templates/kontakt.html.twig) kam
   mit kf-Klassen, zu denen es keinen einzigen Stil gab. Der Browser
   zeigte deshalb seine nackten Vorgaben - Beschriftungen neben den
   Feldern, unterschiedlich grosse Kaesten und, am schlimmsten, den
   sichtbaren Honigtopf. */

/* position: relative haelt den Honigtopf drin: er liegt absolut bei
   left:-9999px, und ohne diesen Bezugspunkt richtete er sich an der
   Seite aus - was je nach Schreibrichtung eine Bildlaufleiste
   erzeugen kann. */
.kontakt-form { max-width: 44rem; margin-top: 1.6rem; position: relative; }

.kf-zeile { display: flex; gap: 1rem; }
.kf-zeile > .kf-feld { flex: 1 1 0; min-width: 0; }

/* Beschriftung UEBER dem Feld: die Namen sind in beiden Sprachen
   unterschiedlich lang, nebeneinander stehen die Felder dann versetzt. */
.kf-feld { display: block; margin-bottom: 1rem; }
.kf-feld > span {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.kf-pflicht { color: var(--red); font-weight: 700; }

.kf-eingabe {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kf-eingabe:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-light);
}
textarea.kf-eingabe { resize: vertical; min-height: 9rem; line-height: 1.6; }

/* Honigtopf. NICHT display:none - manche Roboter ueberspringen genau
   das und lassen das Feld dann leer, womit der Schutz wirkungslos
   waere. Stattdessen aus dem Bild schieben: fuer Menschen unsichtbar,
   fuer ein Skript aber ein ganz normales Feld. */
.kf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kf-datenschutz {
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.kf-meldung {
  display: none;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  background: #fdecef;
  border: 1px solid var(--red);
  color: var(--red-dark);
  font-size: 0.9rem;
}
.kf-meldung.on { display: block; }

.kf-danke {
  max-width: 44rem;
  margin-top: 1.6rem;
  padding: 1.6rem;
  border-radius: var(--radius);
  background: var(--green-light);
  border: 1px solid var(--green);
}
.kf-danke p { color: var(--ink); }
.kf-danke p + p { margin-top: 0.4rem; color: var(--ink-soft); }

.kontakt-form button[disabled] { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 560px) {
  .kf-zeile { flex-direction: column; gap: 0; }
}

/* ---------- CTA band ---------- */

.cta-band {
  background: linear-gradient(120deg, var(--green-dark), var(--green));
  color: #fff;
  border-radius: var(--radius);
  padding: 2.6rem 2.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  box-shadow: var(--shadow);
}
.cta-band h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.cta-band p { opacity: 0.92; max-width: 34rem; }
.cta-band .btn { background: #fff; color: var(--green-dark); margin-left: auto; }
.cta-band .btn:hover { background: var(--green-light); }
.cta-band p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cta-band p a:hover { color: var(--green-light); }

/* ---------- Footer ---------- */

.site-footer {
  background: #17211b;
  color: #cfd8d2;
  margin-top: 4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 2.5rem;
  padding: 3rem 0 2rem;
}

.site-footer h3 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.9rem;
}

.site-footer p { font-size: 0.92rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: #cfd8d2; font-size: 0.92rem; }
.site-footer a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: space-between;
  font-size: 0.85rem;
}
.footer-bottom nav { display: flex; gap: 1.2rem; }

/* ---------- Bibliothekskatalog ---------- */

.katalog-suche { max-width: 34rem; margin-bottom: 1.4rem; }

.katalog-suche label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.4rem;
}

.katalog-suche input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.katalog-suche input:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: transparent;
}

.katalog-treffer {
  margin-top: 0.5rem;
  min-height: 1.2em;          /* haelt den Platz frei, sonst springt die Tabelle */
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.katalog-rahmen { overflow-x: auto; }

table.katalog {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  min-width: 640px;
}

.katalog th, .katalog td {
  text-align: left;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.katalog th {
  position: sticky;              /* der Kopf bleibt beim Blaettern stehen */
  top: 0;
  background: var(--green);
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.katalog td:first-child { font-weight: 600; }
.katalog .num { text-align: right; white-space: nowrap; }
.katalog tr:last-child td { border-bottom: 0; }
.katalog tbody tr:nth-child(even) { background: var(--bg); }
/* Ausgeblendete Treffer. Die Zeile bleibt im HTML stehen - beim
   Loeschen des Suchworts ist sie sofort wieder da, ohne Neuaufbau. */
.katalog tr[hidden] { display: none; }

.katalog-fuss {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* 1160 statt 860px. Seit .brand nicht mehr schrumpft, braucht die
   Kopfzeile mit waagerechter Navigation 1130px - darunter lief sie
   ueber. Gemessen passt sie mit dem Menueknopf bis hinunter zu 600px
   spielend. Der Umbruchpunkt liegt deshalb dort, wo der Platz
   tatsaechlich ausgeht, und nicht 300px zu spaet. */
@media (max-width: 1159px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    margin-left: 0;
  }
  .nav-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; padding: 0.8rem 1.2rem; gap: 0.1rem; }
  .site-nav a { padding: 0.7rem 0.8rem; font-size: 1rem; }
  .lang-switch { margin-left: auto; }
  .doc-item { flex-wrap: wrap; }
  .doc-item .btn { margin-left: 0; }
}

@media (max-width: 560px) {
  /* Auf dem Telefon bleiben Titel, Autor und Anzahl. Verlag, Jahr und
     Seitenzahl entfallen - sie sind zum Wiederfinden eines Buches im
     Regal nicht noetig, und sechs Spalten zwaengen den Titel sonst in
     zwei Zeichen pro Zeile. Gesucht wird weiterhin ueber alle Angaben,
     auch ueber die ausgeblendeten. */
  .katalog th:nth-child(3), .katalog td:nth-child(3),
  .katalog th:nth-child(4), .katalog td:nth-child(4),
  .katalog th:nth-child(5), .katalog td:nth-child(5) { display: none; }
  table.katalog { min-width: 0; }

  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .brand-sub { display: none; }
  .cta-band { padding: 2rem 1.5rem; }
  .cta-band .btn { margin-left: 0; }
}