/* CO Ortsseite - Sektion 01 Kopf und 02 Einstieg. Werte aus dem Entwurf. */

/* ==================== 01 Kopf ==================== */
.co-ok {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(28px, 4vh, 48px);
  padding: clamp(110px, 16vh, 160px) var(--co-rand) clamp(40px, 6vh, 64px);
  background: var(--co-sand, #F4ECE5);
  color: var(--co-tinte, #1B1A19);
}

.co-ok__rand {
  position: absolute;
  left: clamp(6px, 1.4vw, 22px); top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--co-ton, #C9AE9B); white-space: nowrap;
  pointer-events: none;
  /* Etwas fetter: Bei dieser Groesse und Laufweite wirkt Gewicht 300 auf
     Sand fast wie ein Schatten. */
  font-weight: 600;
}

.co-ok__kopf {
  display: grid;
  /* Rechts mehr Platz: Der Absatz soll nicht in eine Saeule gepresst werden.
     Erst unter 900 Pixeln klappt es untereinander. */
  /* Der Ortsname braucht weniger Platz, als seine Schriftgroesse vermuten
     laesst - der Text daneben mehr. */
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
@media (max-width: 900px) {
  .co-ok__kopf { grid-template-columns: minmax(0, 1fr); }
}

.co-ok__name { min-width: 0; }
.co-ok__schreib {
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: clamp(30px, 3.6vw, 52px);
  color: var(--co-akzent, #8C6F5C); line-height: 1;
}
/* Ortsnamen sind unterschiedlich lang - von "Haan" bis "Moenchengladbach".
   Deshalb Umbruch erlaubt statt fester Groesse. */
.co-ok__h1 {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400;
  font-size: clamp(40px, 6.6vw, 112px);
  line-height: .92; letter-spacing: -.035em;
  margin: 6px 0 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.co-ok__rechts {
  display: flex; flex-direction: column; gap: 18px;
  /* Deutlich breiter: Bei 46 Zeichen lief der Absatz ueber zwoelf Zeilen. */
  /* Keine eigene Grenze mehr: Die Spalte des Rasters gibt das Mass vor. */
  max-width: none; width: 100%; justify-self: stretch;
  padding-bottom: clamp(6px, 1.2vw, 18px);
}
.co-ok__satz {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(19px, 1.7vw, 26px); line-height: 1.4;
  margin: 0; text-wrap: pretty;
}
.co-ok__aktionen { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.co-ok__knopf {
  display: inline-block;
  background: var(--co-tinte, #1B1A19);
  color: var(--co-sand, #F4ECE5);
  padding: 15px 28px;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap; text-decoration: none;
  transition: background .3s ease;
}
.co-ok__knopf:hover { background: var(--co-akzent, #8C6F5C); color: var(--co-sand, #F4ECE5); }
.co-ok__link {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  color: inherit; text-decoration: none; white-space: nowrap;
  transition: color .3s ease;
}
.co-ok__link:hover { color: var(--co-akzent, #8C6F5C); }

/* Zwei Querformate nebeneinander statt eines breiten Streifens.
   Ein einzelnes Bild ueber die volle Breite musste in der Hoehe begrenzt werden
   und wurde dadurch auf Kinoformat beschnitten - die Bilder verloren ihre Form.
   Nebeneinander fuellen zwei 3:2-Bilder dieselbe Breite und bleiben ganz. */
/* Zwei gleich grosse Querformate mit feiner Linie dazwischen. Die Fassung mit
   einem dominanten und einem schmalen Bild schnitt das zweite Motiv zu stark an -
   gleichberechtigt wirken beide Hochzeiten, und keines verliert seine Form. */
.co-ok__bilder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--co-ton, #C9AE9B);
}
.co-ok__bilder--1 { grid-template-columns: minmax(0, 1fr); }

.co-ok__bild {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--co-sand-warm, #EADBCF);
}
.co-ok__bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Verlauf, damit die Bildunterschrift auf jedem Motiv traegt. */
.co-ok__bild::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(27,26,25,0) 58%, rgba(27,26,25,.5) 100%);
}
.co-ok__bu {
  position: absolute; z-index: 2;
  left: clamp(14px, 2vw, 28px); bottom: clamp(12px, 2vw, 24px);
  display: flex; gap: 18px; align-items: baseline;
  color: var(--co-sand, #F4ECE5);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.co-ok__paar {
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: clamp(22px, 2.2vw, 32px); line-height: 1;
}
.co-ok__meta {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .9;
}

@media (max-width: 760px) {
  /* Untereinander statt nebeneinander - zwei halbe Querformate waeren auf dem
     Handy zu klein, um etwas zu erkennen. */
  .co-ok__bilder { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .co-oloc__kopf { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .co-ok { padding-top: clamp(90px, 12vh, 130px); }
  .co-ok__rechts { justify-self: start; }
  .co-ok__rand { display: none; }
}

/* ==================== 01 Einstieg ====================
   Tafel links, Bild rechts auf Kartenhoehe. Beide Spalten enden buendig -
   ein Bild mit festem 3:2 haette neben der langen Tafel Luft gelassen. */

.co-oe { padding: var(--co-sektion) var(--co-rand); color: var(--co-tinte, #1B1A19); }
.co-oe__innen {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
}

.co-oe__tafel {
  position: relative;
  padding: clamp(64px, 6.5vw, 96px) clamp(28px, 3.5vw, 52px) clamp(28px, 3.5vw, 52px);
  background: var(--co-karte-grund, #F4ECE5);
  outline: 1px solid var(--co-ton, #C9AE9B);
  outline-offset: -14px;
  display: flex; flex-direction: column; justify-content: center;
}
/* Die Karte ist immer die jeweils andere Sandfarbe als ihr Untergrund. */
.co-zebra-a { --co-karte-grund: #EADBCF; }
.co-zebra-b { --co-karte-grund: #F4ECE5; }

.co-oe__nummer {
  position: absolute;
  top: -.3em; left: clamp(20px, 3vw, 40px);
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(56px, 6.4vw, 104px); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--co-akzent, #8C6F5C);
  background: var(--co-zebra-grund, #F4ECE5);
  padding: 0 10px;
}
.co-oe__kicker {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C);
}
.co-oe__titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(27px, 3.2vw, 46px);
  line-height: 1.1; margin: 12px 0 22px; text-wrap: balance;
}
.co-oe__text {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: clamp(15px, 1.15vw, 16px); line-height: 1.85; font-weight: 300;
  color: var(--co-tinte-2, #3D3835); margin: 0 0 12px; text-wrap: pretty;
}
.co-oe__text:last-of-type { margin-bottom: 0; }
.co-oe__zahlen {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--co-ton, #C9AE9B);
}
.co-oe__zahl { font-family: var(--co-serif, 'Gilda Display', serif); font-size: 30px; line-height: 1; }
.co-oe__label {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C); margin-top: 6px;
}

.co-oe__bild {
  position: relative; min-height: 420px; overflow: hidden;
  background: var(--co-karte-grund, #F4ECE5);
}
.co-oe__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==================== 03 Reportagen vom Ort ==================== */
.co-orep {
  position: relative;
  padding: var(--co-sektion) 0;
  color: var(--co-tinte, #1B1A19);
}
.co-orep__rand {
  position: absolute; right: clamp(6px, 1.4vw, 22px); top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--co-ton, #C9AE9B); white-space: nowrap; pointer-events: none;
  /* Etwas fetter: Bei dieser Groesse und Laufweite wirkt Gewicht 300 auf
     Sand fast wie ein Schatten. */
  font-weight: 600;
}
.co-orep { padding: var(--co-sektion) var(--co-rand); }
.co-orep__kopf {
  max-width: 1200px; margin: 0 auto var(--co-kopf);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
}
.co-orep__nummer {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(40px, 4.6vw, 68px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--co-akzent, #8C6F5C);
}
.co-orep__titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(30px, 4vw, 60px);
  line-height: 1.05; margin: 8px 0 0;
}
.co-orep__link {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  color: inherit; text-decoration: none; white-space: nowrap;
  transition: color .3s ease;
}
.co-orep__link:hover { color: var(--co-akzent, #8C6F5C); }

.co-orep__reihe {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(86vw, 560px);
  gap: clamp(14px, 2vw, 28px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: none; cursor: grab; user-select: none;
}
/* Wenige Karten: gleiche Kartengroesse wie im Schiebestreifen, nur linksbuendig
   statt gedehnt.

   Vorher fuellten ein oder zwei Karten die ganze Breite - eine einzelne Reportage
   wurde dadurch riesig und sah anders aus als dieselbe Karte auf einer Seite mit
   vier Reportagen. Eine Karte soll aber immer gleich gross sein, egal wie viele
   daneben stehen. */
.co-orep__reihe.is-raster {
  grid-auto-flow: column;
  grid-auto-columns: min(86vw, 560px);
  justify-content: start;
  overflow-x: auto; cursor: default;
  gap: clamp(16px, 2.4vw, 32px);
  padding-bottom: 0;
}
.co-orep__reihe::-webkit-scrollbar { display: none; }
.co-orep__reihe:active { cursor: grabbing; }

.co-orep__karte {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px;
  color: inherit; text-decoration: none;
}
.co-orep__bild {
  position: relative; display: block;
  aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--co-sand-warm, #EADBCF);
  transition: transform .5s ease;
}
.co-orep__karte:hover .co-orep__bild { transform: translateY(-6px); }
.co-orep__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.co-orep__zeile {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
}
.co-orep__paar { font-family: var(--co-schreib, 'Alex Brush', cursive); font-size: clamp(26px, 2.6vw, 34px); line-height: 1; }
.co-orep__meta {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C);
}
.co-orep__leer {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--co-rand);
  font-family: var(--co-sans, 'Manrope', sans-serif);
  color: var(--co-akzent, #8C6F5C);
}

/* ==================== Gemeinsamer Kopf der Ortssektionen ==================== */
.co-os { position: relative; padding: var(--co-sektion) var(--co-rand); color: var(--co-tinte, #1B1A19); }
.co-os__kopf {
  max-width: 1200px; margin: 0 auto var(--co-kopf);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
}
.co-os__nummer {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(40px, 4.6vw, 68px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--co-akzent, #8C6F5C);
}
.co-os__titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(30px, 4vw, 58px);
  line-height: 1.05; margin: 8px 0 0; text-wrap: balance;
}
.co-os__link {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  color: inherit; text-decoration: none; white-space: nowrap;
  transition: color .3s ease;
}
.co-os__link:hover { color: var(--co-akzent, #8C6F5C); }

/* ==================== 04 Locations ====================
   Nach dem Entwurf: Ziffer ueber zweizeiliger Ueberschrift, Absatz rechts.
   Karten mit Bild im Passepartout - das Bild sitzt eingerueckt in der Karte,
   nicht buendig an der Kante. */

.co-oloc { position: relative; padding: var(--co-sektion) var(--co-rand); color: var(--co-tinte, #1B1A19); }

.co-oloc__kopf {
  max-width: 1200px; margin: 0 auto var(--co-kopf);
  display: grid;
  /* Die Ueberschrift bekommt mehr Platz als der Absatz - sonst bricht sie
     unnoetig frueh um. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.co-oloc__nummer {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(44px, 5vw, 76px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--co-akzent, #8C6F5C);
}
/* Kein overflow-wrap: anywhere - das trennt mitten im Wort. Stattdessen darf
   die Schrift kleiner werden, und sehr lange Woerter werden sauber getrennt. */
.co-oloc__titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 62px);
  line-height: 1.02; letter-spacing: -.02em;
  margin: 10px 0 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.co-oloc__text {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.8; font-weight: 300;
  color: var(--co-tinte-2, #3D3835);
  margin: 0 0 8px; max-width: 46ch; text-wrap: pretty;
}

/* Locationkarten: feste Breite statt gedehnter Spalten.

   Gleiche Ueberlegung wie bei den Reportagen. auto-fill statt auto-fit haelt die
   Spaltenbreite auch dann, wenn nur eine Karte da ist - die uebrigen Spalten
   bleiben leer, statt die vorhandene zu dehnen. */
.co-oloc__raster {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  align-items: stretch;
  justify-content: start;
}

.co-oloc__karte {
  display: flex; flex-direction: column;
  background: var(--co-karte, #EADBCF);
  transition: transform .5s ease, box-shadow .5s ease;
}
.co-oloc__karte:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -36px rgba(27,26,25,.45); }

/* Passepartout: Das Bild sitzt eingerueckt, mit feiner Linie darum.
   Bewusst schmal - ein breiter Rand nimmt dem Bild die Flaeche und laesst die
   Karte nach Rahmen aussehen statt nach Fotografie. */
.co-oloc__rahmen {
  display: block;
  padding: clamp(9px, .9vw, 13px) clamp(9px, .9vw, 13px) 0;
}
.co-oloc__bild {
  position: relative; display: block;
  aspect-ratio: 3 / 2; overflow: hidden;
  background: rgba(27,26,25,.06);
  outline: 1px solid rgba(27,26,25,.12);
  outline-offset: -1px;
}
.co-oloc__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.co-oloc__karte:hover .co-oloc__bild img { transform: scale(1.04); }

.co-oloc__inhalt {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(18px, 2vw, 26px);
  flex: 1;
}
.co-oloc__name {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.12; margin: 0; text-wrap: balance;
}
.co-oloc__satz {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 15px; line-height: 1.75; font-weight: 300;
  color: var(--co-tinte-2, #3D3835); margin: 0; text-wrap: pretty;
}
.co-oloc__link {
  margin-top: auto; align-self: flex-start;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: border-color .3s ease;
}
.co-oloc__link:hover { border-bottom-color: currentColor; }

/* Die letzte Karte traegt keinen Inhalt, sondern den Weg weiter. */
.co-oloc__karte--uebersicht {
  background: transparent;
  outline: 1px solid var(--co-ton, #C9AE9B);
  outline-offset: -1px;
}
.co-oloc__karte--uebersicht:hover { transform: none; box-shadow: none; }
.co-oloc__karte--uebersicht .co-oloc__inhalt { justify-content: center; }
.co-oloc__schreib {
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: clamp(30px, 2.8vw, 40px); line-height: 1;
  color: var(--co-akzent, #8C6F5C);
}

/* ==================== 04 Bestandstext ====================
   Linke Spalte bleibt stehen, rechts die Kapitel mit Umrissziffer in der
   Randspalte. Die Ziffer steht ausserhalb der Textbreite - dadurch bleibt die
   Zeilenlaenge bei 62 Zeichen, und die Gliederung ist trotzdem sichtbar. */

.co-otext {
  position: relative;
  padding: var(--co-sektion) var(--co-rand);
  border-top: 1px solid var(--co-ton, #C9AE9B);
  color: var(--co-tinte, #1B1A19);
}
.co-otext__rand {
  position: absolute; right: clamp(6px, 1.4vw, 22px); top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--co-ton, #C9AE9B); white-space: nowrap; pointer-events: none;
  /* Etwas fetter: Bei dieser Groesse und Laufweite wirkt Gewicht 300 auf
     Sand fast wie ein Schatten. */
  font-weight: 600;
}
.co-otext__innen {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

/* ---- Linke Spalte ---- */
.co-otext__seite {
  position: sticky; top: 88px; align-self: start;
  display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 28px);
}
.co-otext__nummer {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(36px, 3.6vw, 54px); line-height: 1.1;
  color: transparent; -webkit-text-stroke: 1px var(--co-akzent, #8C6F5C);
}
.co-otext__schreib {
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: clamp(24px, 2vw, 30px); line-height: 1;
  color: var(--co-akzent, #8C6F5C); margin-top: 4px;
}
/* Zurueckgenommen: Ziffer, Handschrift und Ueberschrift stehen uebereinander -
   in voller Groesse fuellen die drei zusammen die halbe Spalte, bevor ein Wort
   Inhalt kommt. */
.co-otext__titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(25px, 2.6vw, 38px);
  line-height: 1.1; margin: 6px 0 0; text-wrap: balance; hyphens: auto;
}
.co-otext__einordnung {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: clamp(15px, 1.15vw, 16px); line-height: 1.8; font-weight: 300;
  color: var(--co-tinte-2, #3D3835); margin: 0; max-width: 40ch;
}

.co-otext__leiste {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--co-tinte, #1B1A19);
}
.co-otext__leiste-kopf {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C); padding: 14px 0 4px;
}
.co-otext__eintrag {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px; align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--co-ton, #C9AE9B);
  color: var(--co-tinte-3, #5B5451);
  text-decoration: none;
  transition: color .3s ease, padding-left .3s ease;
}
.co-otext__eintrag:hover { color: var(--co-akzent, #8C6F5C); padding-left: 6px; }
.co-otext__eintrag.is-an { color: var(--co-tinte, #1B1A19); }
.co-otext__zahl {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: 14px; color: var(--co-akzent, #8C6F5C);
}
.co-otext__wort {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: 17px; line-height: 1.35;
}
.co-otext__pfeil { font-size: 10px; color: var(--co-ton, #C9AE9B); }

.co-otext__wege {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
}
.co-otext__wege a {
  border-bottom: 1px solid var(--co-tinte, #1B1A19); padding-bottom: 3px;
  color: inherit; text-decoration: none;
  transition: color .3s ease, border-color .3s ease;
}
.co-otext__wege a:hover { color: var(--co-akzent, #8C6F5C); border-color: var(--co-akzent, #8C6F5C); }

/* ---- Textspalte ---- */
.co-otext__text {
  display: flex; flex-direction: column;
  gap: clamp(36px, 4.4vw, 64px);
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: clamp(16px, 1.2vw, 17px); line-height: 1.85; font-weight: 300;
  color: var(--co-tinte-2, #3D3835);
}

/* Vorab: abgesetzter Block mit Passepartout, erster Absatz in Serif. */
.co-otext__vorab {
  padding: clamp(24px, 3vw, 44px);
  outline: 1px solid var(--co-ton, #C9AE9B);
  outline-offset: -12px;
  display: flex; flex-direction: column; gap: 14px;
}
.co-otext__vorab-kopf {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C);
}
.co-otext__vorab p { margin: 0; }
.co-otext__vorab-titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2; margin: 2px 0 0;
  color: var(--co-tinte, #1B1A19); text-wrap: balance;
}

/* Kapitel: Ziffer links in der Randspalte, Text rechts. */
.co-otext__kapitel {
  display: grid;
  grid-template-columns: minmax(72px, 110px) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  padding-top: clamp(28px, 3.4vw, 48px);
  border-top: 1px solid var(--co-ton, #C9AE9B);
  scroll-margin-top: 110px;
}
.co-otext__knummer {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(34px, 4vw, 60px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--co-akzent, #8C6F5C);
}
.co-otext__kinhalt {
  max-width: 62ch;
  display: flex; flex-direction: column; gap: 16px;
}
.co-otext__kinhalt p { margin: 0; }
.co-otext__h3 {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.2; margin: 0; color: var(--co-tinte, #1B1A19);
}
/* Zwischenueberschrift und folgender Absatz gehoeren zusammen - deshalb der
   negative Abstand nach unten. */
.co-otext__h4 {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(18px, 1.7vw, 21px);
  margin: 8px 0 -6px; color: var(--co-tinte, #1B1A19);
  display: flex; gap: 12px; align-items: center;
}
.co-otext__h4 span {
  flex: 0 0 auto; width: 18px; height: 1px;
  background: var(--co-akzent, #8C6F5C);
}

.co-otext__punkte {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--co-ton, #C9AE9B);
}
.co-otext__punkte li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--co-ton, #C9AE9B);
  font-size: 15px; line-height: 1.6;
}
.co-otext__pnr { font-family: var(--co-serif, 'Gilda Display', serif); color: var(--co-akzent, #8C6F5C); }

.co-otext__bild {
  position: relative; margin: 8px 0;
  aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--co-sand-warm, #EADBCF);
}
.co-otext__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Der Satz steht jetzt auf Flaeche statt in einer Linie - er soll den Lesefluss
   anhalten, nicht nur unterbrechen. */
.co-otext__zitat {
  margin: 8px 0 0; padding: clamp(22px, 2.6vw, 34px);
  border: 0; border-left: 0 !important;
  background: var(--co-zitat-grund, #EADBCF);
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(19px, 1.8vw, 26px); line-height: 1.4;
  color: var(--co-tinte, #1B1A19); text-wrap: pretty;
}
.co-zebra-a { --co-zitat-grund: #EADBCF; }
.co-zebra-b { --co-zitat-grund: #F4ECE5; }
.co-otext__zitat footer {
  border: 0; padding: 0;
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: 28px; color: var(--co-akzent, #8C6F5C);
  margin-top: 12px;
}

@media (max-width: 980px) {
  .co-otext__innen { grid-template-columns: minmax(0, 1fr); }
  .co-otext__seite { position: static; }
  .co-otext__kapitel { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ==================== 05 Fotospots ====================
   Nach dem Entwurf: links Ziffer, Ueberschrift, Beschreibung und ein Paarbild -
   rechts die nummerierte Liste. Die linke Spalte bleibt beim Lesen stehen. */

.co-ospot { padding: var(--co-sektion) var(--co-rand); color: var(--co-tinte, #1B1A19); }
.co-ospot__innen {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.co-ospot__seite { position: sticky; top: 96px; }
.co-ospot__nummer {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(44px, 5vw, 72px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--co-akzent, #8C6F5C);
}
.co-ospot__titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.05; margin: 8px 0 18px; text-wrap: balance;
}
.co-ospot__text {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: clamp(15px, 1.15vw, 16px); line-height: 1.8; font-weight: 300;
  color: var(--co-tinte-2, #3D3835);
  margin: 0 0 28px; max-width: 44ch; text-wrap: pretty;
}
.co-ospot__bild {
  position: relative; margin: 0;
  aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--co-sand, #F4ECE5);
}
.co-ospot__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.co-ospot__liste {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column;
  /* Kraeftigere Oberkante - die Liste traegt die Sektion jetzt allein. */
  border-top: 1px solid var(--co-akzent, #8C6F5C);
}
.co-ospot__eintrag {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--co-ton, #C9AE9B);
}
.co-ospot__nr {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: 18px; line-height: 1.4;
  color: var(--co-akzent, #8C6F5C);
}
.co-ospot__name {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: 22px; line-height: 1.2;
}
.co-ospot__satz {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 14px; line-height: 1.7; font-weight: 300;
  color: var(--co-tinte-2, #3D3835);
  margin: 6px 0 0; text-wrap: pretty;
}
.co-ospot__zeit {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C); margin: 8px 0 0;
}

@media (max-width: 900px) {
  .co-ospot__seite { position: static; }
}

/* ==================== 07 Standesamt und Trauorte ====================
   Bis zwei Eintraege: breite Karten mit Bild. Ab drei: schmale Karten ohne. */

.co-otrau { padding: var(--co-sektion) var(--co-rand); color: var(--co-tinte, #1B1A19); }
.co-otrau__innen {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.co-otrau__nummer {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(44px, 5vw, 72px); line-height: 1.1;
  color: transparent; -webkit-text-stroke: 1px var(--co-akzent, #8C6F5C);
}
.co-otrau__titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.05; margin: 4px 0 18px; text-wrap: balance;
}
.co-otrau__text {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: clamp(15px, 1.15vw, 16px); line-height: 1.8; font-weight: 300;
  color: var(--co-tinte-2, #3D3835);
  margin: 0; max-width: 40ch; text-wrap: pretty;
}

.co-otrau__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.co-otrau__karte {
  padding: clamp(20px, 2.4vw, 30px);
  outline: 1px solid var(--co-ton, #C9AE9B);
  outline-offset: -10px;
  display: flex; flex-direction: column; gap: 10px;
}
.co-otrau__inhalt { display: flex; flex-direction: column; gap: 10px; }

/* Breite Fassung: Karte auf Flaeche, Inhalt und Bild nebeneinander. */
.co-otrau__raster--breit { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.co-otrau__raster--breit .co-otrau__karte {
  background: var(--co-karte-grund, #F4ECE5);
  padding: clamp(24px, 2.8vw, 36px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px; align-items: center;
}
.co-otrau__bild {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--co-sand-warm, #EADBCF);
}
.co-otrau__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.co-otrau__art {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C);
}
.co-otrau__name {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.2; margin: 0;
}
.co-otrau__satz {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 14px; line-height: 1.7; font-weight: 300;
  color: var(--co-tinte-2, #3D3835); margin: 0; text-wrap: pretty;
}
.co-otrau__adresse {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 12px; line-height: 1.6;
  color: var(--co-tinte-3, #5B5451); margin: 0;
}

@media (max-width: 900px) {
  .co-otext__koerper { grid-template-columns: minmax(0, 1fr); }
  .co-otext__leiste { position: static; }
}

/* Hinweis unter der Reportagenreihe. Die Reihe scrollt ohne sichtbaren Balken -
   ohne diesen Hinweis bleibt unbemerkt, dass es weitergeht. */
.co-orep__hinweis {
  max-width: 1200px; margin: 14px auto 0;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--co-ton, #C9AE9B);
}

/* Aufzaehlung im Bestandstext - nummeriert wie im Entwurf. */
.co-otext__punkte {
  margin: 4px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--co-ton, #C9AE9B);
}
.co-otext__punkte li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--co-ton, #C9AE9B);
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 15px; line-height: 1.6; font-weight: 300;
  color: var(--co-tinte-2, #3D3835);
}
.co-otext__pnr { font-family: var(--co-serif, 'Gilda Display', serif); color: var(--co-akzent, #8C6F5C); }

/* Weiterfuehrende Wege am Textende. */
.co-otext__wege {
  display: flex; gap: 22px; flex-wrap: wrap; padding-top: 8px;
}
.co-otext__wege a {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid var(--co-tinte, #1B1A19); padding-bottom: 3px;
  color: inherit; text-decoration: none;
  transition: color .3s ease, border-color .3s ease;
}
.co-otext__wege a:hover { color: var(--co-akzent, #8C6F5C); border-color: var(--co-akzent, #8C6F5C); }

/* ==================== Locationseite ====================
   Kopf und Einschaetzung nutzen die Bausteine der Ortsseite - gleiche Seitenart,
   gleiche Sprache. Eigene Regeln nur, wo es Unterschiede gibt. */

.co-lok__zurueck {
  display: inline-block;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C); text-decoration: none;
  margin-bottom: 14px;
  transition: color .3s ease;
}
.co-lok__zurueck:hover { color: var(--co-tinte, #1B1A19); }
/* Locationnamen sind laenger als Ortsnamen - „Schloss Benrath Orangerie“
   gegen „Haan“. Deshalb kleiner und mit Umbruch. */
.co-lok__h1 {
  font-size: clamp(38px, 6.2vw, 118px);
  text-wrap: balance;
}

/* ---- 01 Eckdaten ---- */
.co-eck { padding: var(--co-sektion) var(--co-rand); color: var(--co-tinte, #1B1A19); }
.co-eck__innen { max-width: 1200px; margin: 0 auto; }
.co-eck__kopf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(24px, 3.4vw, 48px);
}
.co-eck__nummer {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(44px, 5vw, 72px); line-height: 1.1;
  color: transparent; -webkit-text-stroke: 1px var(--co-akzent, #8C6F5C);
}
.co-eck__titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.05; margin: 4px 0 0;
}
.co-eck__text {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: clamp(15px, 1.15vw, 16px); line-height: 1.8; font-weight: 300;
  color: var(--co-tinte-2, #3D3835); margin: 0; max-width: 46ch;
}
/* Automatisch umbrechend statt fester Spaltenzahl: Eine Location mit vier
   gepflegten Feldern soll keine halbleere Reihe erzeugen. */
/* Die Karten sollen in einer Zeile stehen, solange sie lesbar bleiben.

   auto-fit mit 220px bricht bei sechs Karten schon frueh um und laesst dann eine
   allein in der zweiten Zeile stehen. Deshalb richtet sich die Spaltenzahl hier
   nach der tatsaechlichen Anzahl: bis sechs Karten eine Zeile, darueber wieder
   umbrechend. Die Mindestbreite faellt mit der Anzahl, weil sechs schmale Karten
   besser aussehen als fuenf plus eine. */
.co-eck__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}
.co-eck__raster:has(.co-eck__karte:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.co-eck__raster:has(.co-eck__karte:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.co-eck__raster:has(.co-eck__karte:nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.co-eck__raster:has(.co-eck__karte:nth-child(7)) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* Ab vier Karten wird es enger: Innenabstand und Schrift ziehen mit, damit
   „Diepensieper Weg 6, Ratingen“ nicht in vier Zeilen bricht. */
.co-eck__raster:has(.co-eck__karte:nth-child(5)) .co-eck__karte {
  padding: clamp(18px, 1.8vw, 24px) clamp(16px, 1.6vw, 20px);
  outline-offset: -7px;
}
.co-eck__raster:has(.co-eck__karte:nth-child(5)) .co-eck__wert { font-size: clamp(16px, 1.3vw, 19px); }
.co-eck__raster:has(.co-eck__karte:nth-child(5)) .co-eck__wert--gross { font-size: clamp(20px, 1.7vw, 25px); }
.co-eck__raster:has(.co-eck__karte:nth-child(5)) .co-eck__symbol { width: 22px; height: 22px; }
.co-eck__raster:has(.co-eck__karte:nth-child(5)) .co-eck__label { font-size: 9px; letter-spacing: .16em; }

@media (max-width: 1100px) {
  .co-eck__raster,
  .co-eck__raster:has(.co-eck__karte:nth-child(4)),
  .co-eck__raster:has(.co-eck__karte:nth-child(5)),
  .co-eck__raster:has(.co-eck__karte:nth-child(6)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .co-eck__raster,
  .co-eck__raster:has(.co-eck__karte:nth-child(4)),
  .co-eck__raster:has(.co-eck__karte:nth-child(5)),
  .co-eck__raster:has(.co-eck__karte:nth-child(6)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Karte mit Symbol: Die feine Linie sitzt eingerueckt wie bei den anderen
   Karten der Seite, das Symbol steht darueber und teilt die Strichstaerke mit
   den Passepartout-Linien. */
.co-eck__karte {
  position: relative;
  background: var(--co-karte-grund, #F4ECE5);
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 26px) clamp(24px, 2.4vw, 30px);
  display: flex; flex-direction: column; gap: 10px;
  outline: 1px solid var(--co-karte-kante, rgba(27,26,25,.10));
  outline-offset: -9px;
  transition: transform .45s ease, outline-color .45s ease;
}
.co-eck__karte:hover {
  transform: translateY(-4px);
  outline-color: var(--co-ton, #C9AE9B);
}
.co-eck__symbol {
  width: 26px; height: 26px;
  color: var(--co-akzent, #8C6F5C);
  margin-bottom: 2px;
  opacity: .85;
  transition: opacity .45s ease, transform .45s ease;
}
.co-eck__karte:hover .co-eck__symbol { opacity: 1; transform: translateY(-2px); }

.co-eck__label {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C);
}
.co-eck__wert {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(19px, 1.7vw, 22px); line-height: 1.25;
  margin-top: auto;
}
.co-eck__wert--gross { font-size: clamp(26px, 2.4vw, 32px); line-height: 1; }

/* ---- 02 Einschaetzung ---- */
.co-eins__zahlen { display: flex; gap: 28px; flex-wrap: wrap; }
.co-eins__zahl { font-family: var(--co-serif, 'Gilda Display', serif); font-size: 30px; line-height: 1; }
.co-eins__label {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C); margin-top: 6px;
}

/* Die Einschaetzung erbt vom Ortstext auch dessen Randwort-Regel. Hier steht
   keines - ohne diese Zeile bliebe der Platz dafuer trotzdem reserviert und die
   erste Kapitelzeile saesse tiefer als die Nummer daneben. */
.co-eins .co-otext__rand { display: none; }
.co-eins .co-otext__kapitel:first-child { padding-top: 0; border-top: 0; }

/* ==================== 06 Karte ====================
   Statische Tafel statt eingebetteter Karte: Eine Google-Karte braeuchte eine
   Einwilligung und laedt fremde Skripte auf jeder Locationseite. Adresse plus
   ein Knopf, der die Route in der Karten-App des Besuchers oeffnet, leistet
   dasselbe - ohne Dialog und ohne Datenabfluss. */

.co-kart { padding: var(--co-sektion) var(--co-rand); color: var(--co-tinte, #1B1A19); }
.co-kart__innen { max-width: 1200px; margin: 0 auto; }
.co-kart__kopf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(24px, 3.4vw, 48px);
}
.co-kart__nummer {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(44px, 5vw, 72px); line-height: 1.1;
  color: transparent; -webkit-text-stroke: 1px var(--co-akzent, #8C6F5C);
}
.co-kart__titel {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-weight: 400; font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.05; margin: 4px 0 0;
}
.co-kart__text {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: clamp(15px, 1.15vw, 16px); line-height: 1.8; font-weight: 300;
  color: var(--co-tinte-2, #3D3835); margin: 0; max-width: 46ch;
}

.co-kart__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(14px, 2vw, 24px);
  align-items: stretch;
}
.co-kart__tafel {
  background: var(--co-karte-grund, #F4ECE5);
  padding: clamp(28px, 3.5vw, 48px);
  display: grid; grid-template-rows: auto auto 1fr auto;
  gap: clamp(20px, 2.4vw, 30px);
  outline: 1px solid var(--co-karte-kante, rgba(27,26,25,.10));
  outline-offset: -10px;
}

/* Die Karte ist ein Bild, kein eingebetteter Dienst - ein Klick fuehrt zur
   Route in der Karten-App des Besuchers. */
.co-kart__karte {
  position: relative; display: block;
  overflow: hidden;
  background: var(--co-sand-warm, #EADBCF);
  min-height: 320px;
}
.co-kart__karte img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.55) contrast(.95);
  transition: filter .5s ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.co-kart__karte:hover img { filter: saturate(.8); transform: scale(1.03); }
.co-kart__lupe {
  position: absolute; left: 18px; bottom: 18px;
  background: var(--co-tinte, #1B1A19); color: var(--co-sand, #F4ECE5);
  padding: 11px 18px;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  transition: background .3s ease;
}
.co-kart__karte:hover .co-kart__lupe { background: var(--co-akzent, #8C6F5C); }
.co-kart__label {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--co-akzent, #8C6F5C);
}
.co-kart__adresse {
  font-family: var(--co-serif, 'Gilda Display', serif);
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3;
  margin-top: 8px;
}
.co-kart__anfahrt {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 15px; line-height: 1.75; font-weight: 300;
  color: var(--co-tinte-2, #3D3835); margin: 8px 0 0; text-wrap: pretty;
}
.co-kart__wege {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--co-ton, #C9AE9B);
}
.co-kart__knopf {
  display: inline-block;
  background: var(--co-tinte, #1B1A19); color: var(--co-sand, #F4ECE5);
  padding: 15px 28px;
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  text-decoration: none;
  transition: background .3s ease;
}
.co-kart__knopf:hover { background: var(--co-akzent, #8C6F5C); }
.co-kart__link {
  font-family: var(--co-sans, 'Manrope', sans-serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: color .3s ease;
}
.co-kart__link:hover { color: var(--co-akzent, #8C6F5C); }

/* H1 in zwei Zeilen: Handschrift klein, Ortsname gross. Fuer die Suchmaschine
   eine Ueberschrift, fuer das Auge zwei Ebenen. */
.co-ok__h1 { display: block; }
.co-ok__h1-klein {
  display: block;
  font-family: var(--co-schreib, 'Alex Brush', cursive);
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1; letter-spacing: 0;
  color: var(--co-akzent, #8C6F5C);
  font-weight: 400;
}
.co-ok__h1-gross { display: block; margin-top: 6px; }