.cs-kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--cs-abstand-2);
  height: var(--cs-kopf-hoehe);
  padding: 0 var(--cs-abstand-2);
  background: linear-gradient(#4a4a4a, #2e2e2e);
  border-bottom: 3px solid var(--cs-gruen-hell);
}

.cs-kopf__menue {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: var(--cs-ziel);
  height: var(--cs-ziel);
  padding: 0 12px;
  border: 0;
  border-radius: var(--cs-radius);
  background: rgba(255,255,255,.14);
  cursor: pointer;
  flex: none;
}
.cs-kopf__menue span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

.cs-kopf__titel {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--cs-schrift-normal);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Die Hausschrift bringt nur vier Schnitte mit: 100, 300, 500 und 900.
   Vorher stand "city" auf 300 und "seg" auf 900 - das extremste moegliche
   Paar, und 300 ist bei 17px auf dunklem Grund zu duenn zum Lesen.
   Jetzt 500 gegen 900: der Unterschied bleibt deutlich sichtbar, beide
   Haelften sind aber lesbar. Ein sanfteres Paar gaebe es nur als 300/500 -
   dann bliebe "city" wieder duenn. */
/* :link und :visited muessen mitgenannt werden. screen.css:32 setzt
   a:visited { color: #000 } - Spezifitaet (0,1,1) und damit STAERKER als
   .cs-kopf__marke (0,1,0). Sobald jemand /startseite einmal besucht hatte,
   wurde das "city" schwarz auf dunkelgrauem Grund; das "seg" blieb gruen,
   weil es eine eigene Regel hat. Mit a.cs-kopf__marke:visited (0,2,1)
   gewinnt wieder das Weiss.
   ACHTUNG: derselbe Fallstrick trifft JEDEN neuen Verweis im Admin, der
   seine Farbe per Klasse setzt. */
.cs-kopf__marke,
a.cs-kopf__marke:link,
a.cs-kopf__marke:visited {
  flex: none;
  font-family: var(--cs-schrift-marke);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -.2px;
  color: #fff;
}
.cs-kopf__marke b {
  font-weight: 900;
  color: var(--cs-gruen-hell);
}

/* Als Verweis auf die Startseite muss die Marke ein vollwertiges Klickziel
   sein - 44px hoch, ohne Unterstreichung. */
a.cs-kopf__marke {
  display: inline-flex;
  align-items: center;
  min-height: var(--cs-ziel);
  padding: 0 var(--cs-abstand-2);
  border-radius: var(--cs-radius);
  text-decoration: none;
}
a.cs-kopf__marke:hover { background: rgba(255,255,255,.12); }

/* Uebergangszustand: Die Benutzerzeile steht vorlaeufig unter der Leiste.
   Sie entfaellt in Aufgabe 6, sobald das Menue "Abmelden" traegt. */
.cs-benutzerzeile {
  display: flex;
  justify-content: flex-end;
  gap: var(--cs-abstand-2);
  padding: var(--cs-abstand-2) var(--cs-abstand-3);
  font-size: var(--cs-schrift-klein);
  background: var(--cs-flaeche);
  border-bottom: 1px solid var(--cs-linie);
}

/* ---- Seitengeruest eindaemmen -------------------------------------------
   Ziel: Die SEITE scrollt nie seitlich. Breite Tabellen scrollen in ihrem
   eigenen Container. Das ersetzt die Kartenansicht nicht - dreizehn Spalten
   bleiben auf dem Handy unhandlich - beseitigt aber das Weglaufen der Seite. */

/* Innenabstand des Inhaltsbereichs.
   Im Bestand hatte .cs-inhalt (#contentCell) KEINEN Abstand - der Inhalt klebte
   auf jeder Seite links und rechts am Rand. Vom Betreiber gemeldet am
   2026-08-17. Vorher setzte nur die Kachel-Startseite ihren Abstand selbst;
   dieser Sonderfall ist damit entfallen.
   box-sizing, damit der Abstand die Breite nicht ueber 100% treibt. */
.cs-neu .cs-inhalt {
  box-sizing: border-box;
  padding: var(--cs-abstand-3) var(--cs-abstand-3) var(--cs-abstand-5);
}
@media (min-width: 1025px) {
  .cs-neu .cs-inhalt {
    padding: var(--cs-abstand-4) var(--cs-abstand-4) var(--cs-abstand-5);
  }
}

/* Die Kette vom Inhaltsbereich abwaerts darf schrumpfen.
   #contentCell berechnet sich aus unklarer Quelle zu display:table-cell;
   das hebt die Zeile hier auf. */
.cs-neu #contentCell {
  display: block;
  min-width: 0;
  max-width: 100%;
}
.cs-neu #contentContainer,
.cs-neu #contentContent {
  min-width: 0;
  max-width: 100%;
}

/* Flex-Kinder schrumpfen sonst nicht unter ihre Inhaltsbreite:
   min-width hat bei Flex-Items den Vorgabewert auto, nicht 0. */
.cs-neu #contentContent > * {
  min-width: 0;
  max-width: 100%;
}

/* Die Tabellen selbst scrollen in sich. */
.cs-neu .resultContainer,
.cs-neu .filterContainer,
.cs-neu .ttc {
  overflow-x: auto;
  max-width: 100%;
}

/* ---- Filter einklappen ---------------------------------------------------
   Der Filterblock ist auf /meine-touren 216px hoch; die erste Karte begann
   dadurch erst bei y=451 von 844 sichtbaren Pixeln. Auf schmalen Geraeten
   startet er deshalb eingeklappt. Breit bleibt alles wie bisher. */
.cs-filter-schalter {
  display: none;
  align-items: center;
  gap: var(--cs-abstand-2);
  width: 100%;
  min-height: var(--cs-ziel);
  margin-bottom: var(--cs-abstand-2);
  padding: 0 var(--cs-abstand-3);
  border: 1px solid var(--cs-linie);
  border-radius: var(--cs-radius);
  background: var(--cs-flaeche);
  font-size: var(--cs-schrift-normal);
  cursor: pointer;
  text-align: left;
}
.cs-filter-schalter::after {
  content: "▾";
  margin-left: auto;
  color: var(--cs-text-leise);
}
.cs-filter-schalter[aria-expanded="true"]::after { content: "▴"; }

@media (max-width: 880px) {
  .cs-filter-schalter { display: flex; }
  form.cs-filter-zu .filterContainer { display: none; }
}

/* Suchen/Zuruecksetzen am Ende des Filterbereichs statt darueber. */
.cs-filter-aktionen {
  display: flex;
  flex-wrap: wrap;
  /* Rechtsbuendig: der Ausloeser sitzt unten RECHTS im Filter, dort wo der
     Blick nach dem Ausfuellen der letzten Zeile ohnehin endet. */
  justify-content: flex-end;
  gap: var(--cs-abstand-2);
  padding: var(--cs-abstand-3) 0 var(--cs-abstand-1);
}