/* Leaflet 1.9.4, (c) Vladimir Agafonkin, BSD-2-Clause.
   Lokal statt vom CDN: haelt die Content-Security-Policy eng, die Karte
   laeuft auch bei CDN-Ausfall, und niemand Drittes sieht die Besucher.
   Nicht von Hand aendern — Quelle ist src/fremd/leaflet.css; nur die
   drei Bildverweise sind angepasst, weil unsere Bilder flach liegen. */
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(images-layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images-layers.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(images-marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

/* ── Schriften ─────────────────────────────────────────────────────────────
   Anton und Inter werden vom eigenen Server ausgeliefert, nicht von Google.

   Das ist kein Geschmack: eine eingebundene Schrift von fonts.googleapis.com
   uebermittelt bei jedem Seitenaufruf die IP-Adresse der Besucherin an Google,
   und das muesste in der Datenschutzerklaerung stehen. altumio.ch macht es
   aus demselben Grund selbst. Nebenbei faellt eine fremde Verbindung weg,
   die Seite wird schneller, und die Content-Security-Policy bleibt eng.

   Latin und Latin-Extended genuegen fuer Deutsch, Franzoesisch, Italienisch
   und Schweizer Ortsnamen. Kyrillisch, Griechisch und Vietnamesisch liefert
   Google mit; hier waeren sie totes Gewicht.

   Die Unicode-Bereiche stammen unveraendert aus Googles eigenem Stylesheet:
   so laedt der Browser die Extended-Datei nur, wenn ein Zeichen daraus
   wirklich vorkommt.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ── Grundlagen ────────────────────────────────────────────────────────────
   Gestaltung «Emailschild», angelehnt an alte Schweizer Emailschilder.
   Abgenommene Palette aus dem Alpha-Stand, unverändert übernommen.

   Kein Dunkelmodus: warmes Creme und automatisches Nachtschwarz vertragen
   sich nicht. Das ist eine Entscheidung, kein Versäumnis.
   ------------------------------------------------------------------------ */

/* ── hidden heisst hidden ──────────────────────────────────────────────────
   Der Browser gibt einem Element mit hidden-Attribut nur ein «display: none»
   aus seinem eigenen Stylesheet mit — und jede Klassenregel schlaegt das.
   «.treffer { display: flex }» reichte, damit eine geschlossene Ortsliste
   sichtbar blieb und jeden Tipp abfing; im Redaktionsbereich war es der
   Loeschknopf einer Tour.

   Beide Male stand im Code das Richtige, beide Male meldeten die Pruefungen
   brav «hidden: true», und beide Male sah Michael etwas anderes auf dem
   Schirm. Darum hier einmal fuer alle, und mit !important: hidden ist eine
   Zusage der Plattform, keine Gestaltungsfrage. Wer ein Element sichtbar
   braucht, nimmt das Attribut weg.

   pruefung/versteckt.js haelt das nach.
   ------------------------------------------------------------------------ */

[hidden] {
  display: none !important;
}

/* Web oder App. src/app-bruecke.js setzt html.in-app, sobald die Seite in
   der App laeuft. In der App darf kein Weg zu einem Kauf ausserhalb des
   App Store sichtbar sein (Apple 3.1.3, Google Play Payments); im Web
   gibt es umgekehrt nichts, was nur die App kann. */
html.in-app .nur-web,
html:not(.in-app) .nur-app {
  display: none !important;
}

:root {
  /* Flächen */
  --papier: #f7f2e8;
  --vertieft: #efe7d8;
  --flaeche: #fffdf8;

  /* Schrift */
  --tinte: #1f1b18;
  --gedaempft: #6e6459;
  /* Fliesstext in Karten und Antworten. Dunkler als --gedaempft: die
     Zielgruppe ist zu einem guten Teil über fünfzig, und 15 px in hellem Grau
     las sich mühsam. */
  --lesetext: #4a423a;

  /* Marke */
  --rot: #c1272d;
  --rot-dunkel: #9e1f24;
  --rot-schwach: rgba(193, 39, 45, 0.08);

  /* Linien */
  --linie: rgba(31, 27, 24, 0.13);
  --linie-zart: rgba(31, 27, 24, 0.07);

  /* Zustände */
  --gut: #2f7d4f;
  --warnung: #9a6b12;

  /* Schatten */
  --schatten: 0 1px 2px rgba(31, 27, 24, 0.05), 0 4px 14px rgba(31, 27, 24, 0.07);
  --schatten-gross: 0 2px 6px rgba(31, 27, 24, 0.07),
    0 16px 40px rgba(31, 27, 24, 0.12);

  /* Radien */
  --r: 8px;
  --r-gross: 12px;
  --r-pille: 999px;

  /* Abstände — eine Leiter, keine willkürlichen Zahlen */
  --a1: 4px;
  --a2: 8px;
  --a3: 12px;
  --a4: 16px;
  --a5: 24px;
  --a6: 32px;
  --a7: 48px;
  --a8: 64px;
  --a9: 96px;

  --uebergang: cubic-bezier(0.2, 0.8, 0.3, 1);

  /* Plakatschrift nur für Wortmarke und Überschriften. Fliesstext und Zahlen
     bleiben in Inter — sonst leidet die Lesbarkeit und die Ziffern verlieren
     ihre feste Breite. */
  --plakat: "Anton", "Arial Narrow", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Höhe der klebenden Kopfzeile. Wird beim Scrollen kleiner; alles, was
     darunter Platz braucht, rechnet damit statt mit einer festen Zahl. */
  --kopfhoehe: 56px;

  --breite: 1180px;
}

/* Bänder. Im Alpha-Stand schoben sich Leaflets Ebenen über die Kopfzeile,
   weil sie im Wurzelkontext landeten. Die Karte wird darum später bei 0
   eingesperrt; hier steht, wer worüber liegt. */
:root {
  --b-karte: 0;
  --b-treffer: 70;
  --b-kopf: 200;
  --b-menu: 210;
  /* Die Navigationsansicht hat kein eigenes Band: sie liegt mit
     calc(var(--b-menu) + 1) ueber Kopfzeile und Menue (4-seiten.css). */
  --b-dialog: 1000;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--plakat);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(30px, 7vw, 52px);
}
h2 {
  font-size: clamp(23px, 4.6vw, 34px);
}
h3 {
  font-size: clamp(17px, 2.4vw, 20px);
  font-family: var(--text);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Kein Knopf bekommt die Textfarbe des Browsers. Safari auf dem iPhone
   malt Knopftext ohne eigene Farbe systemblau, Chromium schwarz; darum sah
   es keine Playwright-Probe. Zweimal passiert: am 13.9.2026 die
   Fahrzeugknöpfe (damals einzeln gefärbt), am 25.9.2026 im Sichttest aus
   echtem Safari die Chips im Fahrt-Menü und «Ost/Süd/West» im Planer.
   Diese Zeile ist die Wurzel, nicht noch ein Einzelfall. Bewacht von
   pruefung/quellen.js.
   Dasselbe gilt für die Schrift (27.9.2026): «Menü» auf dem Navigationsknopf
   stand in der Knopfschrift des Browsers, in WebKit ohne Systemschrift
   sogar mit Serifen, weil .navrund keine eigene setzt. */
button {
  color: inherit;
  font-family: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  max-width: 100%;
}

/* Sichtbarer Fokus. Die Seite muss mit der Tastatur bedienbar bleiben — das
   kostet nichts und fällt sonst erst auf, wenn es zu spät ist. */
:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Sprung an den Inhalt, für Tastatur und Vorlesegeräte. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--b-dialog);
  background: var(--rot);
  color: #fff;
  padding: var(--a3) var(--a4);
  border-radius: 0 0 var(--r) 0;
  font-weight: 600;
}
.skip:focus {
  left: 0;
}

.wrap {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--a4);
}

@media (min-width: 620px) {
  .wrap {
    padding: 0 var(--a5);
  }
}

/* Bewegung abschalten, wenn das System danach fragt. Gilt auch für das
   weiche Scrollen — sonst springt die Seite gegen den Wunsch des Nutzers. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Hülle: Banner, Kopfzeile, Menü, Fuss ─────────────────────────────────
   Handy zuerst. Alles hier gilt für den kleinen Schirm; die Umbrüche bauen
   nach oben aus, nicht umgekehrt.
   ------------------------------------------------------------------------ */

/* ── Hinweisbanner ─────────────────────────────────────────────────────── */

.banner {
  background: var(--tinte);
  color: #f4efe6;
  font-size: 13px;
  line-height: 1.45;
  padding: var(--a2) 0;
}
.banner b {
  color: #fff;
  font-weight: 600;
}
.banner b::after {
  content: " · ";
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}
.banner span {
  color: rgba(244, 239, 230, 0.78);
}

/* ── Wortmarke ─────────────────────────────────────────────────────────────
   Die rote Platte mit weisser Innenlinie IST das Logo. Kein Kästchen mit
   Initialen — das war der Baustein, den man nimmt, wenn man kein Logo hat,
   und wurde als solcher erkannt und zurückgewiesen. */

.marke {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: var(--rot);
  color: #fff;
  font-family: var(--plakat);
  font-size: 16px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  padding: 8px 13px 7px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px var(--rot), inset 0 0 0 3.5px rgba(255, 255, 255, 0.94);
  transition: background 0.16s var(--uebergang);
}
a.marke:hover {
  background: var(--rot-dunkel);
}
.marke .tr {
  opacity: 0.55;
  margin: 0 0.28em;
  font-weight: 400;
}
/* Die kleine Fassung fuer die Fusszeile.
   «color» steht hier, obwohl «.marke» es schon setzt: die Hilfsklasse
   «.klein» aus 3-bausteine.css setzt ihrerseits color:var(--gedaempft), hat
   dieselbe Spezifitaet und laedt spaeter. Ergebnis war Grau auf Rot mit
   einem Kontrast von 1,01:1 — die Wortmarke war auf JEDER Seite unlesbar,
   und niemandem fiel es auf, weil beide Regeln fuer sich richtig sind.
   «.marke.klein» ist 0-2-0 und gewinnt unabhaengig von der Reihenfolge. */
.marke.klein {
  font-size: 14px;
  padding: 7px 11px 6px;
  color: #fff;
}

/* ── Kopfzeile ─────────────────────────────────────────────────────────────
   Der offene Punkt aus dem Alpha-Stand: dort war sie auf dem Handy 181 px
   hoch und klebte — ein Fünftel des Schirms, dauerhaft weg. Jetzt trägt sie
   auf dem Handy eine einzige Zeile von 56 px und schrumpft beim Scrollen auf
   48. Navigation, Sprachen und Konto liegen im Menü. */

.kopf {
  position: sticky;
  top: 0;
  z-index: var(--b-kopf);
  background: rgba(247, 242, 232, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linie);
  transition: box-shadow 0.2s var(--uebergang);
}
.kopf.geschrumpft {
  --kopfhoehe: 48px;
  box-shadow: 0 1px 12px rgba(31, 27, 24, 0.09);
}

.kopfreihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a3);
  height: var(--kopfhoehe);
  transition: height 0.2s var(--uebergang);
}
.kopf.geschrumpft .marke {
  font-size: 14.5px;
  padding: 6px 11px 5px;
}

/* ── Menüknopf (nur Handy) ─────────────────────────────────────────────── */

.menuknopf {
  display: none;
  flex-direction: column;
  justify-content: center;
  /* Ausdruecklich strecken, und das ist kein Geschmack (20.9.2026).
     Die drei Balken sind LEERE span — ihre Breite kommt allein daher,
     dass sie auf die Inhaltsbreite des Knopfs gestreckt werden. Chrome
     gibt einem <button> in seinem eigenen Stylesheet aber
     «align-items: center», und wo diese Vorgabe greift, fallen leere
     Balken auf 0 px zusammen: der Knopf liegt dann 44x44 an der
     richtigen Stelle, ist treffbar, und man sieht nichts.
     Gemessen in der Android-Webansicht der App (Chrome 140): Balken
     0x2 — im lokalen Chromium 151 dagegen 24x2. Eine Vorgabe, die je
     nach Engine greift oder nicht, wird hingeschrieben. */
  align-items: stretch;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0 10px;
  border: 0;
  background: none;
  cursor: pointer;
}
.menuknopf span {
  display: block;
  height: 2px;
  background: var(--tinte);
  border-radius: 2px;
  transition: transform 0.2s var(--uebergang), opacity 0.15s var(--uebergang);
}
.menuknopf[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menuknopf[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menuknopf[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Menü ──────────────────────────────────────────────────────────────── */

.menu {
  display: flex;
  align-items: center;
  gap: var(--a5);
  flex: 1;
  justify-content: space-between;
  margin-left: var(--a5);
}

nav.haupt {
  display: flex;
  gap: var(--a1);
}

/* --nx ist die waagrechte Polsterung. Der Strich der aktuellen Seite zieht sie
   wieder ab, damit er genau so breit ist wie das Wort und nicht wie der Knopf.
   Kein inset-Schatten: der sässe am Rand der Polsterung, und die runden Ecken
   bögen seine Enden hoch. */
nav.haupt a {
  --nx: 13px;
  position: relative;
  padding: 8px var(--nx);
  border-radius: var(--r);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gedaempft);
  transition: 0.15s var(--uebergang);
}
nav.haupt a:hover {
  background: var(--vertieft);
  color: var(--tinte);
}
nav.haupt a.on {
  color: var(--tinte);
  font-weight: 600;
}
nav.haupt a.on::after {
  content: "";
  position: absolute;
  left: var(--nx);
  right: var(--nx);
  bottom: 4px;
  height: 2px;
  background: var(--rot);
}

/* «Für Gruppen» (3.10.2026): ein Untermenü im Hauptmenü. Der Kopf sieht
   aus wie die übrigen Einträge, dazu ein kleiner Winkel. Am Rechner klappt
   darunter ein Feld auf; auf dem Handy siehe die Regeln unter 860 px. */
.untermenu {
  position: relative;
}
.untermenu > summary {
  --nx: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px var(--nx);
  border-radius: var(--r);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gedaempft);
  cursor: pointer;
  list-style: none;
  transition: 0.15s var(--uebergang);
}
/* Einzeilig: bricht der Kopf um, wird das Klappfeld doppelt so hoch, und
   weil die Einträge der Leiste gestreckt werden, werden es alle mit. So am
   3.10.2026 bei 960 px gemessen. */
.untermenu > summary {
  white-space: nowrap;
}
nav.haupt {
  align-items: center;
}
/* Sechs Einträge statt fünf: die Leiste wird etwas schmaler gesetzt, damit
   Konto und Abo neben ihr Platz behalten. Ohne Obergrenze: der Inhalt der
   Kopfzeile ist auf --breite begrenzt, ab rund 1180 px wird sie also nicht
   mehr breiter. Eine Abfrage «bis 1400 px» liess bei 1500 px auf FR und IT
   den Abo-Knopf aus der Kopfzeile ragen (gemessen 3.10.2026). Unter 860 px
   klappt das Menü ohnehin ein, dort gelten die Regeln weiter unten. */
nav.haupt a,
.untermenu > summary {
  --nx: 8px;
  font-size: 14px;
}
.untermenu > summary::-webkit-details-marker {
  display: none;
}
/* Der Winkel als gedrehtes Rechteck mit zwei Rändern, wie das Häkchen
   anderswo; kein Zierzeichen. */
.untermenu > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s var(--uebergang);
}
.untermenu[open] > summary::after {
  transform: translateY(1px) rotate(-135deg);
}
.untermenu > summary:hover,
.untermenu[open] > summary {
  background: var(--vertieft);
  color: var(--tinte);
}
.untermenuinhalt {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--b-menu);
  min-width: 230px;
  display: flex;
  flex-direction: column;
  padding: var(--a2);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten-gross);
}
nav.haupt .untermenuinhalt a {
  color: var(--tinte);
  white-space: nowrap;
}

.kopfrechts {
  display: flex;
  align-items: center;
  /* Umbrechen erlaubt: «Il mio conto» neben «Abo» und drei Sprachkuerzeln
     sprengte die italienische Kopfzeile bei 860 px um 25 px. Eine Kopfzeile,
     die nur auf Deutsch passt, ist keine dreisprachige Seite. */
  flex-wrap: wrap;
  gap: var(--a2) var(--a3);
}

.sprachen {
  display: flex;
  gap: 2px;
  font-size: 12.5px;
  font-weight: 600;
}
.sprachen a,
.sprachen b {
  padding: 6px 8px;
  border-radius: 5px;
  color: var(--gedaempft);
}
.sprachen b {
  color: var(--rot);
  background: var(--rot-schwach);
}
.sprachen a:hover {
  background: var(--vertieft);
}

/* ── Umbruch: unter 1180 px wird das Menü aufklappbar ──────────────────────
   Bis zum 3.10.2026 lag die Grenze bei 860 px. Mit dem sechsten Eintrag
   «Für Gruppen» passte die Leiste samt Sprachen, Konto und Abo erst ab
   rund 1180 px in eine Zeile; darunter brach der Abo-Knopf aus der
   Kopfzeile (auf FR und IT schon vorher). Michaels Wahl: Menüknopf bis
   1180 px, auch auf dem Tablet.
   Nur wenn JavaScript läuft (html.js). Ohne JavaScript bliebe es sonst
   unerreichbar — dann steht es offen unter der Kopfzeile, das ist hässlicher
   als nötig, aber bedienbar. Bedienbar schlägt hübsch. */

@media (max-width: 1179px) {
  .js .menuknopf {
    display: flex;
  }

  .menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: var(--b-menu);
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--a2) var(--a4) var(--a4);
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten-gross);
  }
  .js .menu {
    display: none;
  }
  .js .menu.offen {
    display: flex;
  }

  nav.haupt {
    flex-direction: column;
    gap: 0;
    /* Volle Zeilenbreite: die Leiste oben zentriert ihre Einträge
       (align-items: center), im Handymenü sind sie zeilenbreit. */
    align-items: stretch;
  }
  /* Volle Zeilenbreite und 48 px hoch: auf dem Handy wird mit dem Daumen
     getippt, nicht mit dem Mauszeiger. */
  nav.haupt a {
    --nx: 0px;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0;
    /* Im Menü schwarze Tinte statt Grau — grau gesetzte Einträge wirken
       inaktiv, und im aufgeklappten Menü ist keiner davon inaktiv. */
    color: var(--tinte);
    font-size: 17px;
    border-bottom: 1px solid var(--linie-zart);
    border-radius: 0;
  }
  nav.haupt a:hover {
    background: none;
  }
  nav.haupt a.on::after {
    left: 0;
    right: auto;
    width: 22px;
    bottom: 8px;
  }
  /* «Für Gruppen» im Handymenü: dieselbe Zeile wie die anderen Einträge,
     aufgeklappt ein eingerückter Block darunter, kein schwebendes Feld. */
  .untermenu > summary {
    --nx: 0px;
    min-height: 48px;
    padding: 0;
    justify-content: space-between;
    color: var(--tinte);
    font-size: 17px;
    border-bottom: 1px solid var(--linie-zart);
    border-radius: 0;
  }
  .untermenu > summary:hover,
  .untermenu[open] > summary {
    background: none;
  }
  .untermenuinhalt {
    position: static;
    min-width: 0;
    padding: 0 0 0 var(--a4);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  nav.haupt .untermenuinhalt a {
    font-size: 16px;
    white-space: normal;
  }

  .kopfrechts {
    justify-content: space-between;
    margin-top: var(--a4);
  }
}

/* ── Fuss ──────────────────────────────────────────────────────────────── */

.fuss {
  margin-top: var(--a9);
  padding: var(--a7) 0 var(--a6);
  background: var(--vertieft);
  border-top: 1px solid var(--linie);
  font-size: 14.5px;
}

.fussgitter {
  display: grid;
  gap: var(--a6);
  grid-template-columns: 1fr;
}

.fuss h2 {
  font-family: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gedaempft);
  margin-bottom: var(--a3);
}
.fuss li + li {
  margin-top: 0;
}
/* Volle Zeilenhöhe statt 17 px: Impressum, Datenschutz und die Sprachwahl
   waren auf dem Handy kaum zu treffen. */
.fuss li a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--gedaempft);
}
.fuss a:hover {
  color: var(--rot);
}

.quellen {
  margin-top: var(--a4);
  font-size: 13px;
  line-height: 1.5;
  color: var(--gedaempft);
  max-width: 34ch;
}

.fusssprachen {
  display: flex;
  gap: var(--a2);
}
.fusssprachen li + li {
  margin-top: 0;
}
/* Mindestens 44 px breit. Am Galaxy A16 (26.9.2026) gemessen: «IT» war
   13 px breit, «FR» 18, dicht nebeneinander. Die Hoehe von 40 px half
   nichts, wenn der Finger das Nachbarwort trifft. */
.fusssprachen a,
.fusssprachen b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 44px;
}
.fusssprachen b {
  color: var(--rot);
}

@media (min-width: 620px) {
  .fussgitter {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 860px) {
  .fussgitter {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--a5);
  }
}

/* ── Die Bildmarke in der Fusszeile ──────────────────────────────────────
   Neben der Wortmarke, nicht statt ihr. Sie ist dekorativ: die Wortmarke
   daneben traegt den Namen, also bekommt das Bild alt="" und bleibt fuer
   Screenreader stumm. Zwei Namen fuer denselben Inhalt sind dort Laerm. */
.fussmarkezeile {
  display: flex;
  align-items: center;
  gap: var(--a3);
  margin-bottom: var(--a3);
}
.bildmarke {
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
}

/* App-Store-Abzeichen (seit 4.10.2026). Apples Vorgaben: unverändert,
   mindestens 40 px hoch, Freiraum rundherum. */
.app-abzeichen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  line-height: 0;
}
.app-abzeichen img {
  display: block;
  height: 40px;
  width: auto;
}
/* Googles PNG: 53 px mit eingebautem Rand ergeben 40 px Flaeche. */
.app-abzeichen .play img {
  height: 53px;
  margin: -6.5px 0;
}
.aufmacher-app {
  margin-top: 20px;
}
.fussgitter h2.nur-web {
  margin-top: 24px;
}

/* ── Bausteine ─────────────────────────────────────────────────────────────
   Knöpfe, Karten, Abschnitte. Was hier steht, wird auf mehreren Seiten
   gebraucht; was nur eine Seite betrifft, gehört in 4-seiten.css.
   ------------------------------------------------------------------------ */

/* ── Knöpfe ────────────────────────────────────────────────────────────────
   Mindestens 44 px hoch, auch in der kleinen Fassung. Das ist die Grösse, die
   ein Daumen zuverlässig trifft. */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a2);
  min-height: 46px;
  padding: 0 var(--a5);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--flaeche);
  color: var(--tinte);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: 0.15s var(--uebergang);
}
.knopf:hover {
  border-color: rgba(31, 27, 24, 0.24);
  background: #fff;
}

.knopf.rot {
  background: var(--rot);
  border-color: var(--rot);
  color: #fff;
}
.knopf.rot:hover {
  background: var(--rot-dunkel);
  border-color: var(--rot-dunkel);
}

/* «schlicht» ist keine eigene Stufe mehr — nur noch etwas knapper.
 *
 * Sie war einmal als dritte Stufe gedacht: kein Rahmen, keine Flaeche,
 * gedaempfte Schrift. Michael hat am 6.9.2026 in drei Anlaeufen gezeigt,
 * warum das nicht traegt:
 *
 *   1. «Die Buttons haben keinen echten Rahmen.» — `border-color:
 *      transparent` liess sieben Bedienelemente wie Beschriftungen
 *      aussehen, und was aussieht wie Text, wird nicht angetippt.
 *   2. «Wieso sind alle Knoepfe weiss und diese nun Hintergrund
 *      Webseite?» — nur den Rahmen zurueckzugeben genuegte nicht;
 *      gerahmte Knoepfe in zwei Fuellungen sehen nach Versehen aus.
 *   3. Und der Kern: gedaempfte Schrift heisst ueberall GESPERRT.
 *      Gemessen auf der laufenden Seite stand es genau verkehrt herum —
 *      «Mein Standort» war aktiv und sah gesperrt aus, «GPX laden» war
 *      gesperrt und sah aktiv aus.
 *
 * Die Rangfolge traegt der rote Knopf, nicht ein Grauton. Ein Knopf ist
 * schwarz auf hell; gesperrt ist er, wenn `[disabled]` ihn abblendet. Zwei
 * Zustaende, zwei eindeutige Bilder. `schlicht` behaelt allein die knappere
 * Polsterung, damit Nebenwege in einer Reihe weniger Platz brauchen. */
.knopf.schlicht {
  padding: 0 var(--a4);
}

/* `.klein` heisst an zwei Stellen etwas anderes.
 *
 * Als Textklasse setzt sie gedaempfte Schrift, als Knopf-Abwandlung nur
 * eine kleinere Bauhoehe. Ein Knopf mit `klein` erbte darum das Grau der
 * Textklasse — bei gleicher Spezifitaet gewinnt die spaeter notierte
 * Regel. Gemessen am 6.9.2026 an «Mein Standort»: er stand als einziger
 * Knopf im Planer noch grau da, nachdem alle anderen bereits schwarz
 * waren, und sah damit gesperrt aus, obwohl er aktiv ist.
 *
 * Die Farbe steht hier deshalb ausdruecklich. `.knopf.klein` ist zwei
 * Klassen und schlaegt `.klein` aus einer. */
.knopf.klein {
  color: var(--tinte);
  min-height: 40px;
  padding: 0 var(--a4);
  font-size: 13.5px;
}

/* Und der rote KLEINE Knopf traegt weisse Schrift.
 *
 * `.knopf.rot` setzt color:#fff, `.knopf.klein` setzt color:var(--tinte).
 * Beide sind zwei Klassen, also gleich stark, und die spaetere gewinnt -
 * seit dem Tag, an dem die Zeile darueber eingefuegt wurde. Getroffen hat
 * es ausgerechnet «Abo loesen» in der Kopfzeile: dunkle Schrift auf Rot,
 * Kontrast 2,93 : 1 gemessen, auf JEDER Seite und in jeder Sprache. Der
 * Knopf, der Geld bringt.
 *
 * Gefunden vom UI/UX-Audit am 11.9.2026. Drei Klassen schlagen zwei.
 */
.knopf.klein.rot {
  color: #fff;
}

.knopf[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Auf dem Handy stehen Knöpfe übereinander und füllen die Breite — nebeneinander
   werden sie zu schmal zum Treffen. */
.knopfreihe {
  display: flex;
  flex-direction: column;
  gap: var(--a3);
}
.knopfreihe .knopf {
  width: 100%;
}
@media (min-width: 620px) {
  .knopfreihe {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .knopfreihe .knopf {
    width: auto;
  }
}

/* ── Abschnitte ────────────────────────────────────────────────────────── */

.abschnitt {
  padding: var(--a7) 0;
}
.abschnitt.vertieft {
  background: var(--vertieft);
  border-block: 1px solid var(--linie-zart);
}

@media (min-width: 860px) {
  .abschnitt {
    padding: var(--a8) 0;
  }
}

.abschnittkopf {
  max-width: 62ch;
  margin-bottom: var(--a6);
}
.abschnittkopf p {
  margin-top: var(--a3);
  color: var(--gedaempft);
  font-size: 17px;
}

/* Kleine Überschrift über der grossen — ordnet ein, ohne zu schreien. */
.ueberschrift {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: var(--a3);
}

/* ── Karten ────────────────────────────────────────────────────────────── */

.karten {
  display: grid;
  gap: var(--a4);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .karten {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1080px) {
  .karten.vier {
    grid-template-columns: repeat(4, 1fr);
  }
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: var(--a5);
  box-shadow: var(--schatten);
}
.karte h3 {
  margin-bottom: var(--a2);
}
.karte p {
  color: var(--lesetext);
  font-size: 16.5px;
}

/* Die Zahl der Karte — bewusst in Plakatschrift, als Blickanker. */
.karte .zahl {
  display: block;
  font-family: var(--plakat);
  font-size: 34px;
  color: var(--rot);
  line-height: 1;
  margin-bottom: var(--a3);
}

/* ── Listen mit Haken ──────────────────────────────────────────────────── */

.hakenliste li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--a2);
  font-size: 16.5px;
}
.hakenliste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--gut);
  border-bottom: 2px solid var(--gut);
  transform: rotate(-45deg);
}
.hakenliste.gedaempftliste li::before {
  border-color: var(--gedaempft);
}

/* ── Frage und Antwort ─────────────────────────────────────────────────── */

.fa {
  border-top: 1px solid var(--linie);
}
.fa > div {
  padding: var(--a5) 0;
  border-bottom: 1px solid var(--linie);
}
.fa h3 {
  margin-bottom: var(--a2);
}
.fa p {
  color: var(--lesetext);
  font-size: 16.5px;
  max-width: 68ch;
}

/* ── Hinweiskasten ─────────────────────────────────────────────────────── */

/* Kein farbiger Seitenstreifen. Michael am 26.9.2026: «diese grässlichen
   KI-Slop-Kasten mit seitlicher farbiger Markierung … überall raus». Der
   Zustand steckt in Rahmen und Fläche rundum; quellen.js bewacht das. */
.hinweis {
  border: 1px solid rgba(154, 107, 18, 0.3);
  background: rgba(154, 107, 18, 0.06);
  padding: var(--a4) var(--a5);
  border-radius: var(--r);
  font-size: 16px;
  color: var(--lesetext);
}

/* Abstand als Klasse statt als style-Attribut. Inline-CSS bricht an der
   Content-Security-Policy — und wer dann die Policy lockert, statt die Klasse
   zu schreiben, hat sie ganz aufgegeben. */
.abstand-oben {
  margin-top: var(--a4);
}

.klein {
  font-size: 13.5px;
  color: var(--gedaempft);
}

/* Der Kopf des Roadbooks. Am Bildschirm hat er nichts zu suchen, dort steht
   die Frage "Wohin soll die Ausfahrt gehen?" ueber der Seite. Sichtbar wird
   er erst im Druck, siehe stil/5-druck.css. */
.druckkopf {
  display: none;
}

/* ── Einzelne Seiten ───────────────────────────────────────────────────────
   Was nur eine Seite betrifft. Alles Mehrfachgebrauchte gehört in
   3-bausteine.css.
   ------------------------------------------------------------------------ */

/* ── Aufmacher ─────────────────────────────────────────────────────────── */

.aufmacher {
  padding: var(--a7) 0 var(--a6);
  background: linear-gradient(180deg, var(--flaeche), var(--papier));
  border-bottom: 1px solid var(--linie-zart);
}
.aufmacher .wrap {
  max-width: 900px;
}
.aufmacher p {
  margin-top: var(--a4);
  font-size: clamp(16px, 2.3vw, 19px);
  color: var(--gedaempft);
  max-width: 56ch;
}
.aufmacher .knopfreihe {
  margin-top: var(--a6);
}

@media (min-width: 860px) {
  .aufmacher {
    padding: var(--a9) 0 var(--a8);
  }
}

/* ── Planen · Fahren · Teilen ─────────────────────────────────────────────
   Drei echte Bildschirmbilder in Handyform. Untereinander auf dem Handy,
   nebeneinander ab 860 px. */
.schritte {
  display: grid;
  gap: var(--a7);
}
.schritt {
  display: grid;
  grid-template-columns: minmax(0, 150px) 1fr;
  gap: var(--a5);
  align-items: center;
}
/* Auf dem Handy das Bild ÜBER den Text: neben dem Text war es 150 px
   breit, der Bildtext darin 2,7 px (UI/UX-Durchsicht 27.9.2026). */
@media (max-width: 620px) {
  .schritt {
    grid-template-columns: 1fr;
    gap: var(--a4);
  }
  .schritt-bild {
    width: min(260px, 72%);
  }
}
.schritt-bild {
  margin: 0;
}
/* Alle drei im selben Handyformat. Das Teilbild ist 9:16 und damit
   breiter als die beiden Aufnahmen; es steht zentriert im Rahmen, statt
   dass eine Seite beschnitten wird (links steht der Name der Fahrt,
   rechts der QR-Code). */
.schritt-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 780 / 1688;
  object-fit: contain;
  border-radius: 18px;
  border: 6px solid var(--tinte);
  box-shadow: var(--schatten-gross);
  background: var(--papier);
}
.schritt-preis {
  display: inline-block;
  margin-left: var(--a2);
  padding: 3px 10px;
  border-radius: var(--r-pille);
  background: var(--vertieft);
  color: var(--tinte);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.schritt-preis.gratis {
  background: var(--rot-schwach);
  color: var(--rot-dunkel);
}
.schritt .knopf {
  white-space: nowrap;
}
.schritte-preis {
  margin-top: var(--a6);
  font-weight: 600;
}
.schritte-preis a {
  color: var(--rot);
}
/* «Für Gruppen» (3.10.2026): Text und die echte WhatsApp-Vorschau eines
   Tourenlinks. Auf dem Handy untereinander, Bild unter dem Text; ab 860 px
   nebeneinander. Das Bild trägt Rahmen und Schatten wie eine Karte, damit
   es als Vorschau lesbar ist und nicht als Schmuckbild. */
.gruppenblock {
  display: grid;
  gap: var(--a5);
  margin-top: var(--a8);
  padding-top: var(--a7);
  border-top: 1px solid var(--linie);
}
.gruppentext h2 {
  margin-top: 0;
}
.gruppentext p {
  max-width: 34em;
}
.gruppenbild {
  margin: 0;
  max-width: 420px;
}
.gruppenbild img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten-gross);
  background: var(--flaeche);
}
@media (min-width: 860px) {
  .gruppenblock {
    grid-template-columns: 1fr 420px;
    align-items: center;
  }
}
.schritt-nr {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rot);
  color: #fff;
  font-family: var(--plakat);
  font-size: 20px;
}
.schritt h3 {
  margin: var(--a2) 0 0;
  font-family: var(--plakat);
  font-weight: 400;
  font-size: 30px;
}
.schritt p {
  margin: var(--a2) 0 var(--a4);
  color: var(--lesetext);
}
@media (min-width: 860px) {
  .schritte {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--a6);
  }
  .schritt {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .schritt-bild {
    max-width: 240px;
  }
}

/* ── Preise ────────────────────────────────────────────────────────────────
   Drei Angebote nebeneinander erst ab 860 px. Darunter untereinander — drei
   Preisspalten auf einem Handy nebeneinander liest niemand. */

/* Nur in der App: Abo-Hinweis und «Kaeufe wiederherstellen» unter den
   Preiskarten, siehe src/seiten/preise.js. */
.appkauf {
  margin-top: var(--a4);
  text-align: center;
}
.appkauf .knopf {
  margin-top: var(--a3);
}

.preisgitter {
  display: grid;
  gap: var(--a4);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px) {
  .preisgitter {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--a5);
  }
}

.preis {
  position: relative;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: var(--a5);
  box-shadow: var(--schatten);
  display: flex;
  flex-direction: column;
  gap: var(--a4);
}
.preis.hervor {
  border-color: var(--rot);
  box-shadow: var(--schatten-gross);
}

.preis .marke-empfohlen {
  position: absolute;
  top: -11px;
  left: var(--a5);
  background: var(--rot);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pille);
}

.preis h3 {
  font-family: var(--plakat);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.preis .betrag {
  display: flex;
  align-items: baseline;
  gap: var(--a2);
}
.preis .betrag b {
  font-family: var(--plakat);
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
}
.preis .betrag span {
  font-size: 14px;
  color: var(--gedaempft);
}
.preis > p {
  color: var(--gedaempft);
  font-size: 15px;
}
.preis .knopf {
  margin-top: auto;
}

.leistungen {
  display: grid;
  gap: var(--a6);
  grid-template-columns: 1fr;
  margin-top: var(--a7);
}
@media (min-width: 860px) {
  .leistungen {
    grid-template-columns: 3fr 2fr;
    gap: var(--a7);
  }
}

/* ── Schaubilder auf der Preisseite ─────────────────────────────────────
   Michael am 5.9.2026: «Damit auch jemand sieht, was er bei Premium alles
   bekommt.» Sechs Häkchen erklären niemandem, was ein Roadbook ist.

   Die Bilder sind echte Bildschirmfotos aus der laufenden Seite (siehe
   werkzeug/schaubilder.js) und bringen ihre Masse als Attribut mit — ohne
   die springt der Text weg, sobald das erste Bild eintrifft.
   ---------------------------------------------------------------------- */

.schaukopf {
  max-width: 56ch;
  margin: 0 auto var(--a7);
  text-align: center;
}
.schaukopf p {
  margin-top: var(--a3);
  color: var(--gedaempft);
  font-size: clamp(16px, 2.2vw, 18px);
}

.schaustuecke {
  display: grid;
  gap: var(--a8);
}

.schaustueck {
  display: grid;
  gap: var(--a5);
  align-items: center;
}

/* Erst ab 860 px nebeneinander — darunter liest sich Bild über Text
   besser als zwei zu schmale Spalten. */
@media (min-width: 860px) {
  .schaustueck {
    grid-template-columns: 3fr 2fr;
    gap: var(--a7);
  }
  /* Abwechselnd links und rechts. Das ist keine Zierde: drei gleich
     gebaute Blöcke untereinander liest niemand bis zum dritten. */
  .schaustueck:nth-child(even) .schaubild {
    order: 2;
  }
  /* Und die Spalten mit umdrehen. Ohne das behielt der Text die breite
     3fr-Spalte, waehrend das Bildschirmfoto in die schmale rutschte — vier
     Zeilen Text auf voller Breite neben einem gestauchten Bild. */
  .schaustueck:nth-child(even) {
    grid-template-columns: 2fr 3fr;
  }
  /* Das Blatt ist hochkant und braucht darum eine schmalere Spalte. Stand
     es in derselben 3fr-Spalte wie die beiden Bildschirmfotos, blieb links
     und rechts davon eine Handbreit Luft und der Text stand allein am
     rechten Rand. */
  .schaustueck.blattstueck {
    grid-template-columns: minmax(0, 520px) 1fr;
  }
}

.schaubild {
  margin: 0;
}
.schaubild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-gross);
  border: 1px solid var(--linie);
  background: var(--flaeche);
  box-shadow: var(--schatten-gross);
}

/* Das Roadbook ist ein Blatt Papier und soll auch so aussehen: kaum
   gerundet, heller Grund, deutlicher Schatten. Ein A4-Blatt mit
   12-px-Radius sieht aus wie eine Kachel. */
.schaubild.blatt img {
  border-radius: 3px;
  border-color: rgba(31, 27, 24, 0.18);
  box-shadow: 0 10px 34px rgba(31, 27, 24, 0.18);
  /* Ein volles Blatt ist hochkant; ohne Deckel wuerde es auf einem breiten
     Schirm die ganze Spaltenhoehe fuellen. 520 px sind gross genug, dass
     Titel, Werte und Wegpunkte lesbar bleiben. */
  max-width: 520px;
  margin: 0 auto;
}

/* Die Handyaufnahme des Navigators ist hochkant. In voller Spaltenbreite
   wäre sie auf dem Handy höher als der Schirm; 280 px zeigen sie so gross,
   wie sie auf dem eigenen Gerät aussieht. Am Rechner kommt das
   Querformat, und dort gilt der Deckel nicht. */
@media (max-width: 700px) {
  .schaubild.hochkant img {
    max-width: 280px;
    margin: 0 auto;
  }
}

.schautext h3 {
  font-size: clamp(20px, 3vw, 25px);
  margin-bottom: var(--a3);
}
.schautext p {
  color: var(--gedaempft);
  max-width: 46ch;
}
.schautext h2 {
  margin: var(--a2) 0 var(--a3);
}
.schautext .knopfreihe {
  margin-top: var(--a5);
}

/* ── Rechtstexte ───────────────────────────────────────────────────────── */

.fliesstext {
  max-width: 68ch;
}
.fliesstext h2 {
  margin-top: var(--a6);
  margin-bottom: var(--a3);
}
.fliesstext h2:first-child {
  margin-top: 0;
}
.fliesstext p {
  margin-bottom: var(--a3);
  color: var(--gedaempft);
}
.fliesstext dt {
  font-weight: 600;
  margin-top: var(--a4);
}
.fliesstext dd {
  margin: 0;
  color: var(--gedaempft);
}

/* ── Zahlentabelle auf den Wissensseiten ────────────────────────────────
   Die gemessenen Umwege sind das Einzige auf dieser Seite, das es sonst
   nirgends gibt. Sie sollen aussehen wie Messwerte und nicht wie Werbung:
   Zahlen rechtsbuendig, gleich breite Ziffern, sonst nichts.

   Der Rahmen scrollt fuer sich. Eine Tabelle, die den Seitenkoerper quer
   scrollen laesst, ist auf dem Handy schlimmer als eine, die man schiebt.
   ---------------------------------------------------------------------- */

.tabellenrahmen {
  max-width: 68ch;
  margin: var(--a5) 0;
  overflow-x: auto;
}

table.zahlen {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
table.zahlen caption {
  caption-side: bottom;
  padding-top: var(--a3);
  font-size: 13px;
  color: var(--gedaempft);
  text-align: left;
}
table.zahlen th,
table.zahlen td {
  padding: var(--a3) var(--a4) var(--a3) 0;
  border-bottom: 1px solid var(--linie);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.zahlen thead th {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gedaempft);
  font-weight: 600;
}
/* Die erste Spalte ist Text und keine Zahl. */
table.zahlen th[scope="row"],
table.zahlen thead th:first-child {
  text-align: left;
  font-weight: 600;
  white-space: normal;
}
table.zahlen tbody b {
  color: var(--rot-dunkel);
}

.quellenliste {
  max-width: 68ch;
  margin: 0;
  padding-left: var(--a5);
  color: var(--gedaempft);
  font-size: 14.5px;
  line-height: 1.6;
}
.quellenliste li {
  margin-bottom: var(--a2);
}

/* ── Seite nicht gefunden ──────────────────────────────────────────────── */

.leer {
  padding: var(--a9) 0;
  text-align: center;
}
.leer p {
  margin: var(--a4) auto var(--a6);
  max-width: 44ch;
  color: var(--gedaempft);
}

/* Gratis und Vollzugang als echter Vergleich.

   Vorher trugen beide Listen dieselben grünen Haken — beim Überfliegen wirkten
   sie wie eine einzige Leistungsliste, obwohl die eine sagt «hast du» und die
   andere «hast du nicht». Genau dort kippt das Modell «planen frei, mitnehmen
   kostet». Jetzt sind sie zwei Kästen, und der bezahlte trägt den roten Rand. */
.leistungen > div {
  border-radius: var(--r-gross);
  padding: var(--a5);
  border: 1px solid var(--linie);
}
.leistungen .frei {
  background: var(--vertieft);
}
.leistungen .kostet {
  background: var(--flaeche);
  border-color: var(--rot);
  box-shadow: var(--schatten);
}
.leistungen h2 {
  font-size: clamp(19px, 3vw, 23px);
}

@media (min-width: 860px) {
  /* Gleiche Breite: ein Vergleich, bei dem eine Spalte anderthalbmal so breit
     ist, vergleicht nichts. */
  .leistungen {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Kontoseiten ───────────────────────────────────────────────────────────
   Anmelden, registrieren, bestätigen, Passwort. Eine schmale Karte, mittig —
   hier soll nichts ablenken, es gibt genau eine Sache zu tun. */

.kontokarte {
  max-width: 420px;
  margin: 0 auto;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: var(--a6) var(--a5);
  box-shadow: var(--schatten);
}
.kontokarte h1 {
  font-size: clamp(26px, 5vw, 34px);
  margin-bottom: var(--a4);
}
.kontokarte .einleitung {
  color: var(--lesetext);
  font-size: 16px;
  margin-bottom: var(--a5);
}

@media (min-width: 620px) {
  .kontokarte {
    padding: var(--a7) var(--a6);
  }
}

/* ── Felder ────────────────────────────────────────────────────────────────
   Beschriftung über dem Feld, nicht darin. Ein Platzhaltertext verschwindet
   beim Tippen — und dann weiss niemand mehr, was in das Feld gehört. */

.feld {
  display: block;
  margin-bottom: var(--a4);
}
.feld > span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.feld input {
  width: 100%;
  /* 16 px ist die Grenze, ab der iOS beim Antippen nicht mehr hineinzoomt.
     Darunter springt die Seite, und der Rest des Formulars ist weg. */
  font: inherit;
  font-size: 16px;
  min-height: 48px;
  padding: 0 var(--a3);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--papier);
  color: var(--tinte);
}
/* Fokus im Feld: dunkler Rand statt roter Umrandung. Michael am 19.9.2026
   zum Suchfeld «Wohin?»: «Rote Umrandung KI-Slop». Rot bleibt Knoepfen und
   Fehlern vorbehalten. Sichtbar bleibt der Fokus trotzdem. */
.feld input:focus,
.feld input:focus-visible {
  outline: none;
  border-color: var(--tinte);
  box-shadow: inset 0 0 0 1px var(--tinte);
  background: #fff;
}
.feld small {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--gedaempft);
  line-height: 1.45;
}

.knopf.breit {
  width: 100%;
}

/* ── Meldungen ─────────────────────────────────────────────────────────── */

.meldung {
  margin-bottom: var(--a4);
  padding: var(--a3) var(--a4);
  border-radius: var(--r);
  font-size: 15px;
  line-height: 1.5;
  /* Rahmen rundum statt Seitenstreifen, siehe .hinweis in 3-bausteine.css. */
  border: 1px solid var(--linie);
  background: var(--flaeche);
}
.meldung.schlecht {
  border-color: rgba(193, 39, 45, 0.3);
  background: var(--rot-schwach);
  color: var(--tinte);
}
.meldung.gut {
  border-color: rgba(47, 125, 79, 0.3);
  background: rgba(47, 125, 79, 0.07);
  color: var(--tinte);
}

/* ── Google und Apple ──────────────────────────────────────────────────── */

.trenner {
  display: flex;
  align-items: center;
  gap: var(--a3);
  margin: var(--a5) 0;
  color: var(--gedaempft);
  font-size: 13px;
}
.trenner::before,
.trenner::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
}

.fremdanmeldung {
  display: grid;
  gap: var(--a2);
}
.knopf.fremd {
  width: 100%;
}
/* Ausgegraut, solange der Server sie nicht bedient. Ein Knopf, der nichts
   tut, ist ehrlicher als keiner — er sagt, was noch kommt. */
.knopf.fremd[disabled] {
  opacity: 0.4;
}

.kontofuss {
  margin-top: var(--a4);
  text-align: center;
  font-size: 14.5px;
  color: var(--gedaempft);
}
.kontofuss a {
  color: var(--rot);
  font-weight: 600;
}
.kontofuss a:hover {
  text-decoration: underline;
}

/* ── Planer ────────────────────────────────────────────────────────────────
   Suchband zuoberst wie beim Fahrplan, darunter Karte und Seitenspalte. Auf
   dem Handy steht alles untereinander, die Karte zuerst — dorthin schaut man
   als Erstes. */

.suchband {
  background: var(--vertieft);
  border-bottom: 1px solid var(--linie);
  padding: var(--a5) 0;
}
.sbkopf {
  display: flex;
  flex-direction: column;
  gap: var(--a3);
  margin-bottom: var(--a5);
}
.sbkopf h1 {
  font-size: clamp(26px, 5.5vw, 40px);
}
.sbkopf p {
  margin-top: var(--a2);
  color: var(--lesetext);
  max-width: 60ch;
}
@media (min-width: 860px) {
  .sbkopf {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.planzeile {
  display: grid;
  gap: var(--a3);
  grid-template-columns: 1fr;
}

/* Beschriftung und «Mein Standort» in einer Zeile.
   baseline und nicht center: sonst sitzt die Beschriftung optisch zu hoch
   neben dem hoeheren Knopf. */
.lblzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a3);
}
.lblzeile .lbl {
  margin: 0;
}
.lblzeile .knopf {
  flex: none;
}
/* Zwei Umbruchpunkte statt einem, weil das Suchband seit den
   Zwischenstopps vier Dinge tragen muss: Von, Zwischenstopps, Nach und die
   Knoepfe. Alles vier nebeneinander braucht mehr als 860 px — dort lief die
   Zeile um 24 px ueber. */
@media (min-width: 860px) {
  .planzeile {
    /* Von und Nach nebeneinander; Zwischenstopps und Knoepfe je ueber die
       ganze Breite darunter. */
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
  #zwischenstopps,
  .planknoepfe {
    grid-column: 1 / -1;
  }
}

/* 1200 und nicht 1080.
   Die vierspaltige Zeile passte bei 1080 px nicht hinein: gemessen am
   5.9.2026 ragte «Route berechnen» hinaus und erzeugte Querscrollen — bei
   1080 px um 56 Pixel, bis 1186 px hinauf. Genau der Fehler, den der
   Kommentar weiter oben fuer 860 px beschreibt; er ist mit dem Layout einen
   Umbruchpunkt nach oben gewandert. */
@media (min-width: 1200px) {
  .planzeile {
    grid-template-columns: 1fr auto 1fr auto;
  }
  #zwischenstopps,
  .planknoepfe {
    grid-column: auto;
  }
  /* Solange es keinen Zwischenstopp gibt, bleibt die Spalte LEER im Raster —
     bewusst kein display:none. display:none naehme das Element aus dem Grid;
     Von, Nach und die Knoepfe rutschten dann je eine Spalte nach links, und
     die Knoepfe landeten in einer 1fr-Spalte statt in der vierten auto-Spalte.
     Die drei Knoepfe brauchen aber ihre natuerliche Breite (~470 px), die eine
     1fr-Spalte am 1180er .wrap nicht hergibt (nur ~427 px) — «Route berechnen»
     lief dadurch bei 1080 px um 56 px rechts aus dem Suchband. Leer und im
     Raster ist die auto-Spalte 0 px breit, also ebenso unsichtbar. */
  #zwischenstopps:empty {
    padding: 0;
  }

  /* Ab dem ZWEITEN Zwischenstopp bricht das Nebeneinander zusammen.
     Michael hatte am 5.9.2026 fünf davon: sie stapelten sich in ihrer
     Spalte zu einem hohen Block, und weil die Felder unten ausgerichtet
     sind, rutschten «Von» und «Nach» darunter. Auf dem Bildschirm stand
     die Reihenfolge dann Zwischenstopp, Zwischenstopp, …, Von, Nach —
     genau verkehrt herum zur Fahrt. Auf dem Handy war alles richtig, weil
     dort ohnehin alles untereinander steht.

     Sobald ein Zwischenstopp da ist, gilt darum auch hier: alles
     untereinander, in der Reihenfolge der Route. Die Klasse setzt
     src/planer.js beim Zeichnen der Zwischenstopps. */
  .planzeile.mitstopps {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .planzeile.mitstopps .planknoepfe {
    justify-content: flex-start;
  }
}

/* ── Zwischenstopps ──────────────────────────────────────────────────────
   Ueber die Karte gingen sie schon; im Suchband eintippen zu koennen war
   Michaels Wunsch — auf dem Handy ist ein Tipp auf die richtige Stelle der
   Karte muehsam, ein Ortsname getippt dagegen nicht. */

#zwischenstopps {
  display: flex;
  flex-direction: column;
  gap: var(--a3);
}
.zwischenfeld {
  display: flex;
  align-items: flex-end;
  gap: var(--a2);
  flex-wrap: wrap;
}
.zwischenfeld .lbl {
  flex: 1 1 100%;
}
.zwischenfeld .ortinp {
  flex: 1;
}
/* Volle 48 px Trefferflaeche: ein × von 16 px trifft mit Handschuhen
   niemand. */
.zwischenweg {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--flaeche);
  color: var(--gedaempft);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.zwischenweg:hover {
  border-color: var(--rot);
  color: var(--rot-dunkel);
}

.planknoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2);
  align-items: end;
}
.planknoepfe .knopf {
  flex: 1;
}
@media (min-width: 860px) {
  .planknoepfe .knopf {
    flex: 0 0 auto;
  }
}

.ortfeld .lbl {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}
.ortinp {
  position: relative;
  display: block;
}
.ortinp input {
  width: 100%;
  font: inherit;
  /* 16 px, sonst zoomt iOS beim Antippen in die Seite hinein. */
  font-size: 16px;
  min-height: 48px;
  padding: 0 var(--a3);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--flaeche);
  color: var(--tinte);
}
.ortinp input:focus,
.ortinp input:focus-visible {
  outline: none;
  border-color: var(--tinte);
  box-shadow: inset 0 0 0 1px var(--tinte);
}

/* Trefferliste ueber der Karte, aber unter der Kopfzeile — siehe Baender.

   ACHTUNG, teuer bezahlt: «display: flex» hier hebelt das hidden-Attribut
   aus. Der Browser gibt [hidden] nur ein «display: none» aus dem eigenen
   Stylesheet mit, und jede Klassenregel schlaegt das. Die Liste war dadurch
   sichtbar und fing Tipps ab, obwohl das Skript sie laengst geschlossen
   hatte — auf dem Handy lagen zwei Listen uebereinander ueber einer fertig
   gerechneten Route.

   Gesucht wurde der Fehler zweimal im JavaScript, weil jede Pruefung
   «element.hidden» abfragte und brav «true» bekam. Gefunden hat ihn erst
   Playwright mit dem Satz «subtree intercepts pointer events».

   Behoben ist er nicht hier, sondern einmal fuer alle in 1-grund.css. */
.treffer {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--b-treffer);
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: var(--schatten-gross);
  overflow: hidden;
}
.treffer button {
  text-align: left;
  padding: var(--a3);
  min-height: 46px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--tinte);
  cursor: pointer;
  border-bottom: 1px solid var(--linie-zart);
}
.treffer button:last-child {
  border-bottom: 0;
}
.treffer button:hover {
  background: var(--vertieft);
}
/* Im Blatt «Wohin?» steht die Trefferliste im Fluss, nicht schwebend. Das
   Blatt ist mit offener Tastatur nur so hoch wie sein Inhalt; eine
   schwebende Liste zaehlte dabei nicht mit und wurde unten abgeschnitten
   (Sichtbild 19.9.2026, zweiter Treffer fehlte). */
.navblatt .treffer {
  position: static;
  margin-top: 4px;
  box-shadow: none;
}
.treffer-leer {
  padding: var(--a3);
  font-size: 14px;
  color: var(--gedaempft);
}

.fahrzeugwahl {
  display: grid;
  /* Zwei Fahrzeuge seit dem 13.9.2026 (Töffli 30, Begleitfahrzeug). Mit drei
     Spalten blieb rechts eine leere Spalte stehen. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--a2);
  margin-top: var(--a4);
}
/* Die Farbe steht ausdruecklich da, am Knopf UND am Titel. Ohne sie erbt
   <b> die Knopffarbe des Browsers, und Safari auf dem iPhone malt
   Knopftext blau: Michaels Bildschirmfotos vom 13.9.2026 zeigten
   «Töffli 30» und «Begleitfahrzeug» blau auf /navigation.html. Chromium
   nimmt Schwarz, darum hat es keine Pruefung gesehen. Bewacht von Fall 26
   und 27 in pruefung/navigation.js, auch fuer /planer.html. */
.fahrzeug {
  padding: var(--a3) var(--a2);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
  cursor: pointer;
  text-align: center;
  min-height: 56px;
  transition: 0.15s var(--uebergang);
}
.fahrzeug b {
  display: block;
  font-size: 14.5px;
  color: var(--tinte);
}
.fahrzeug span {
  display: block;
  font-size: 11.5px;
  color: var(--gedaempft);
  margin-top: 2px;
}
.fahrzeug.gewaehlt {
  border-color: var(--rot);
  background: var(--rot-schwach);
  box-shadow: inset 0 0 0 1px var(--rot);
}

.schalter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2);
  margin-top: var(--a4);
}
.chip {
  padding: 9px var(--a4);
  min-height: 40px;
  border: 1px solid var(--linie);
  border-radius: var(--r-pille);
  background: var(--flaeche);
  /* Ausdruecklich, nicht nur geerbt: am Chip ausgewertet folgt --tinte
     der Nachtansicht (.nav-nacht belegt sie hell). Ohne Farbe stand der
     Text in Safari systemblau und in der Nachtansicht dunkel auf dunklem
     Menue (beides im Sichttest vom 25.9.2026). */
  color: var(--tinte);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: 0.15s var(--uebergang);
}
.chip.an {
  border-color: var(--rot);
  background: var(--rot-schwach);
  color: var(--rot-dunkel);
  font-weight: 600;
}

/* ── Karte ─────────────────────────────────────────────────────────────────
   z-index:0 und isolation:isolate NICHT entfernen. Ohne sie landen Leaflets
   interne Ebenen im Wurzelkontext und schieben sich beim Scrollen ueber die
   klebende Kopfzeile — Kartenflaechen liegen bei 400, Leaflets Zoomknoepfe
   bei 1000. */
.mapbox {
  position: relative;
  z-index: var(--b-karte);
  isolation: isolate;
  border-radius: var(--r-gross);
  overflow: hidden;
  border: 1px solid var(--linie);
}
#karte {
  height: 58vh;
  min-height: 320px;
  background: var(--vertieft);
}
@media (min-width: 860px) {
  #karte {
    height: 62vh;
  }
}

.kartenknoepfe {
  position: absolute;
  left: var(--a3);
  bottom: var(--a3);
  z-index: 500;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.mapchip {
  padding: 7px 11px;
  border: 1px solid var(--linie);
  border-radius: var(--r-pille);
  background: rgba(255, 253, 248, 0.94);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.mapchip.an {
  background: var(--rot);
  border-color: var(--rot);
  color: #fff;
  font-weight: 600;
}

.mapnote {
  margin-top: var(--a3);
  font-size: 13.5px;
  color: var(--gedaempft);
}

/* Eigene Wegpunktmarken statt Leaflets Nadel — die braeuchte Bilddateien. */
.wpmarke {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rot);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.wpmarke.ende {
  background: var(--tinte);
}

/* ── Navigations-Seite (/navigation.html) ─────────────────────────────────
   Seit dem 15.9.2026 ohne Einstiegsseite: Zuletzt-Zeile, Lade-Knoepfe und
   Vorschau stehen im Blatt «Wohin?» (weiter unten bei .navblatt). Die
   Regeln hier gelten den Teilen, die aus der alten Seite mitgekommen sind. */
/* Eine Zeile statt Titel + Zeile + Knopf (Michael am 13.9.2026, «ist viel
   zu gross» — der Kasten nahm auf dem iPhone ein Sechstel des Schirms).
   .kasten.navseite-zuletzt statt nur .navseite-zuletzt: zwei Klassen
   schlagen die eine von .kasten (4-seiten.css, weiter unten) unabhaengig
   von der Reihenfolge im Stylesheet. */
.kasten.navseite-zuletzt {
  padding: var(--a2) var(--a3);
}
.navseite-zuletzt {
  margin-bottom: var(--a4);
}
.navseite-zuletztzeile {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--a2);
  font-weight: 600;
}
/* Titel und Knopf behalten ihre Breite, das Ziel bekommt den Rest und
   schneidet einen langen Namen mit Auslassungspunkten ab, statt in eine
   zweite Zeile umzubrechen — dafuer muss die Zeile selbst NICHT umbrechen
   (flex-wrap: nowrap oben) und jedes Kind ausser dem Ziel NICHT schrumpfen. */
.navseite-zuletztzeile > * {
  flex: none;
  min-width: 0;
}
.navseite-zuletzttitel {
  font-size: 12px;
  font-weight: 600;
  color: var(--gedaempft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.navseite-zuletztziel {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ── Laden: zwei Knoepfe, je eine Liste zum Aufklappen ────────────────────
   Nebeneinander, gleich breit; steht nur einer da, fuellt er die Zeile. Der
   Winkel rechts ist gezeichnet, kein Zierzeichen (CLAUDE.md, «KI-Slop»). */
.navseite-ladeknoepfe {
  display: flex;
  gap: var(--a3);
}
/* Innen 12 statt 16 px: bei 390 px sind die Knoepfe je 173 px breit, und
   «Deine Ausfahrten» brach auf dem iPhone-Foto mit 16 px auf zwei Zeilen um,
   «Fertige Touren» daneben nicht. */
.navseite-ladeknopf {
  flex: 1 1 0;
  min-width: 0;
  justify-content: space-between;
  gap: var(--a2);
  padding: var(--a2) var(--a3);
  line-height: 1.2;
  text-align: left;
}
.navseite-ladeknopf::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s var(--uebergang);
}
.navseite-ladeknopf[aria-expanded="true"] {
  border-color: var(--rot);
  background: var(--rot-schwach);
  box-shadow: inset 0 0 0 1px var(--rot);
}
.navseite-ladeknopf[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(225deg);
}
.navseite-klappe {
  margin-top: var(--a2);
  padding: 0 var(--a4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
}
.navseite-klappehinweis {
  padding: var(--a3) 0;
}
.navseite-laden > .leerhinweis {
  margin-top: var(--a2);
}

.navseite-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.navseite-liste > li:not(:first-child) {
  border-top: 1px solid var(--linie);
}
/* Die ganze Zeile ist ein Knopf, kein separates «Laden» daneben.
   font:inherit/text-align:left heben die Knopf-Grundform auf; die Farbe
   steht ausdruecklich da, aus demselben Grund wie bei .fahrzeug. */
.navseite-listenzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--a1) var(--a3);
  width: 100%;
  min-height: 44px;
  padding: var(--a3) 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  color: var(--tinte);
  cursor: pointer;
}
.navseite-listenzeile > b {
  flex: 1 1 14ch;
  min-width: 0;
  color: var(--tinte);
}
.navseite-listenzeile > span {
  color: var(--gedaempft);
  font-size: 14px;
}
.navseite-listenzeile:disabled {
  opacity: 0.6;
  cursor: default;
}
.navseite-liste .meldung {
  margin: 0 0 var(--a3);
}

/* ── Seitenspalte ──────────────────────────────────────────────────────── */

/* minmax(0, 1fr) und NICHT 1fr: eine 1fr-Spur traegt ein stillschweigendes
   auto-Minimum (min-content). Die Karte friert nach dem Rechnen auf ihrer
   damaligen Breite ein — Leaflet reflowt eine verkleinerte Ansicht nicht von
   selbst —, und dieses Minimum liess die Spur dann nicht mehr auf die
   verfuegbare Breite schrumpfen. Bei 360 px lief die Seite dadurch um 15 px
   ueber. minmax(0, 1fr) nimmt das Minimum weg, die Karte wird beschnitten
   statt den Umbruch zu sprengen. min-width:0 auf dem Grid-Kind allein
   genuegt nicht — das Minimum sitzt an der Spur.

   Von lucid-jackson (Commit 6872b58, PR #28) uebernommen. Nur diese zwei
   Zeilen: der Zweig traegt erzeugte public/-Dateien aus einem aelteren
   Stand, darunter public/touren.html, das es seit dem 5.9.2026 nicht mehr
   gibt.

   align-items: start — NEU am 6.9.2026, Live-Fund von Michael: der
   Aufzeichnen-Knopf war live unerreichbar. Ohne diese Zeile ist
   align-items "normal", was fuer ein Grid-Kind wie "stretch" wirkt: jedes
   Kind wird auf die Hoehe seiner Zeilenspur gedehnt, und diese Spur wird
   aus dem GROESSTEN Kind der Zeile berechnet. planspalte (ein
   flex-Kasten, overflow:visible) waechst laufend, wenn Skripte nach dem
   ersten Aufbau weitere Kaesten einblenden (Ergebnis, Paesse, das
   Aufzeichnen/Teilen-Panel) — bei minmax(0, 1fr) und einspaltigem Umbruch
   liegt sie dabei allein in ihrer eigenen Zeile, ihr GROESSTES Kind ist
   sie selbst. Blieb die von einem Layout-Engine einmal berechnete
   Zeilenhoehe nach einer solchen spaeteren, asynchronen Aenderung stehen
   (gemessen: 348 px, live, obwohl der Inhalt weit darueber hinausragte),
   malte overflow:visible den Rest zwar sichtbar aus, aber AUSSERHALB der
   Grid-Spur — und ausserhalb der Grid-Spur zaehlt nicht zur Dokumenthoehe:
   die Seite hoerte auf zu scrollen, bevor der Knopf erreichbar war.
   align-items:start nimmt die Spur ganz aus der Rechnung: jedes Kind
   bekommt die Hoehe seines EIGENEN Inhalts, unabhaengig von der Zeile und
   unabhaengig davon, wann sich dieser Inhalt aendert. Betrifft nur die
   BLOCK-Achse (Hoehe) — minmax(0, 1fr) bleibt fuer die INLINE-Achse
   (Breite, lucids Fix oben) unangetastet. */
.planlayout {
  display: grid;
  gap: var(--a5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1080px) {
  .planlayout {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

.planspalte {
  display: flex;
  flex-direction: column;
  gap: var(--a4);
}
.kasten {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: var(--a4);
}
.kasten h2 {
  font-size: 17px;
  font-family: var(--text);
  font-weight: 600;
  margin-bottom: var(--a3);
}

.werte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a2);
  text-align: center;
}
.werte b {
  display: block;
  font-family: var(--plakat);
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 400;
  line-height: 1.1;
}
.werte span {
  display: block;
  font-size: 11.5px;
  color: var(--gedaempft);
  margin-top: 2px;
}
.tanknote {
  margin-top: var(--a3);
  padding-top: var(--a3);
  border-top: 1px solid var(--linie-zart);
  font-size: 13.5px;
  color: var(--lesetext);
}

.wpliste {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: wp;
}
.wpliste li {
  display: flex;
  align-items: center;
  gap: var(--a2);
  min-height: 42px;
  border-bottom: 1px solid var(--linie-zart);
  counter-increment: wp;
}
.wpliste li:last-child {
  border-bottom: 0;
}
.wpliste li::before {
  content: counter(wp);
  flex: 0 0 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rot);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.wpname {
  flex: 1;
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wpweg {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--gedaempft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--r);
}
.wpweg:hover {
  background: var(--rot-schwach);
  color: var(--rot);
}
.leerhinweis {
  font-size: 13.5px;
  color: var(--gedaempft);
}

/* ── Hoehenprofil ──────────────────────────────────────────────────────── */

.hoehenprofil {
  margin-top: var(--a5);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: var(--a4);
}
.hoehenprofil h2 {
  font-family: var(--text);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: var(--a3);
}
.profil {
  position: relative;
}
.profil canvas {
  display: block;
  width: 100%;
  height: 150px;
}

/* ── Tourenbibliothek ──────────────────────────────────────────────────────
   Bis zum 27.9.2026 standen die Touren als Zeilen untereinander, Vorbild
   Fahrplan. Michael: «marketingtechnisch ein völliger Albtraum». Wer eine
   Tour aussucht, vergleicht keine Zahlen, er sieht ein Bild und will hin.
   Seither Fotokarten in vier Reihen; die Zahlen stehen klein darunter. */

.filterband {
  display: flex;
  flex-direction: column;
  gap: var(--a3);
}
.filtergruppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a2);
}
.filterlabel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gedaempft);
  min-width: 72px;
}

.tourenkopf .knopfreihe {
  margin-top: 0;
}
/* Filter und «Selbst planen» nebeneinander statt zwei volle Balken
   untereinander: die erste Karte stand sonst erst bei y=430. */
.tourenknoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--a2);
}
.tourengratis {
  margin-top: var(--a2);
  font-size: 15px;
  color: var(--lesetext);
}
.tourengratis a {
  color: var(--rot);
  font-weight: 600;
}
.tourenkopf .chip {
  min-height: 44px;
}
.tourenkopf .filterband {
  margin-top: var(--a4);
}

.tourreihen {
  /* Derselbe Seitenrand wie .wrap: das Band laeuft bis an den Schirmrand
     und holt ihn als Innenabstand zurueck. */
  --rand: var(--a4);
  display: flex;
  flex-direction: column;
  gap: var(--a7);
}
@media (min-width: 620px) {
  .tourreihen {
    --rand: var(--a5);
  }
}
.tourreihe-kopf h2 {
  margin: 0;
}
.tourreihe-kopf p {
  margin: 4px 0 var(--a4);
  color: var(--gedaempft);
}

/* Auf dem Handy wischt man eine Reihe seitlich durch. Die nächste Karte
   ragt sichtbar herein: so sieht man, dass es weitergeht, ohne Pfeil. Das
   Band läuft bis an den Schirmrand, die erste Karte bleibt an der Spalte. */
.tourreihe-band {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: var(--a4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand);
  margin-inline: calc(-1 * var(--rand));
  padding: 2px var(--rand) var(--a3);
  scrollbar-width: none;
}
.tourreihe-band::-webkit-scrollbar {
  display: none;
}

.tourkarte {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  overflow: hidden;
  box-shadow: var(--schatten);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s var(--uebergang), box-shadow 0.15s var(--uebergang);
}
.tourkarte:hover {
  transform: translateY(-2px);
  box-shadow: var(--schatten-gross);
}
.tourkarte:focus-visible {
  outline: 3px solid var(--rot);
  /* Nach innen: das Band hat oben nur 2 px Luft, ein Rahmen nach aussen
     wurde dort angeschnitten (UI/UX-Durchsicht 27.9.2026). */
  outline-offset: -3px;
}
.tourkarte-bild {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--vertieft);
}
/* Absolut in den Rahmen gelegt: eine Prozenthoehe im Kind eines
   aspect-ratio-Kastens loest der Browser nicht auf, und die Bilder standen
   in ihrer eigenen Hoehe da (am Rechner gemessen, 27.9.2026). */
.tourkarte-bild img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tourkarte .tourtext {
  padding: var(--a3) var(--a4) 0;
}
.tourtext b {
  display: block;
  font-size: 18px;
  font-weight: 600;
}
/* Zwei Zeilen Anriss genügen auf einer Karte; der ganze Text steht auf
   der Tourseite. */
.tourteaser {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 4px;
  font-size: 15px;
  color: var(--lesetext);
}
.tourkarte .tourwerte-klein {
  margin-top: auto;
  padding: var(--a3) var(--a4) var(--a4);
}
.tourkarte-nachweis {
  display: block;
  margin-top: calc(-1 * var(--a3));
  padding: 0 var(--a4) var(--a3);
  font-size: 11px;
  color: var(--gedaempft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tourwerte-klein {
  display: flex;
  gap: var(--a5);
}
.tourwerte-klein > span {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.tourwerte-klein b {
  font-family: var(--plakat);
  font-size: 19px;
  font-weight: 400;
}
.tourwerte-klein em {
  font-style: normal;
  font-size: 12px;
  color: var(--gedaempft);
}

@media (min-width: 860px) {
  /* Am grossen Schirm kein Wischen: drei Karten nebeneinander, die Reihe
     bricht um. */
  .tourreihe-band {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding: 2px 0 0;
  }
  .filterband {
    gap: var(--a2);
  }
}

/* «kurz, aber steil» — berechnet, nicht eingetragen. */
.marke-steil {
  display: inline-block;
  margin-left: var(--a2);
  padding: 2px 8px;
  border-radius: var(--r-pille);
  background: var(--rot-schwach);
  color: var(--rot-dunkel);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.marke-hinweis {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pille);
  background: rgba(154, 107, 18, 0.1);
  color: var(--warnung);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
}
.marken {
  margin-top: var(--a3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2);
}

/* ── Einzeltour ────────────────────────────────────────────────────────── */

.tourwerte {
  margin-bottom: var(--a5);
}
.quellennote {
  margin-top: var(--a3);
  padding-top: var(--a3);
  border-top: 1px solid var(--linie-zart);
  font-size: 13px;
  color: var(--gedaempft);
  text-align: center;
}

#tourKarte {
  height: 48vh;
  min-height: 280px;
  background: var(--vertieft);
}

.etappen {
  margin-top: var(--a6);
  display: flex;
  flex-direction: column;
  gap: var(--a5);
}
.etappe {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: var(--a5);
}
.etappe h2 {
  font-family: var(--text);
  font-size: clamp(17px, 3vw, 21px);
  font-weight: 600;
}
.etappe h3 {
  margin-top: var(--a4);
  margin-bottom: var(--a2);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.etappekm {
  margin-top: 4px;
  font-size: 14px;
  color: var(--gedaempft);
}

/* Tourinhalt (TODO 22): Text, Bilder, Empfehlungen je Etappe. */
.etappetext {
  margin-top: var(--a3);
  display: flex;
  flex-direction: column;
  gap: var(--a2);
  max-width: 68ch;
}
.nurdeutsch {
  font-size: 13px;
  color: var(--gedaempft);
}
.tourbilder {
  margin-top: var(--a4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--a3);
}
.tourbild {
  margin: 0;
}
/* Jedes Bild in seinem eigenen Format, nie hochgerechnet (4.10.2026).
   Bis dahin stand hier aspect-ratio: 4 / 3 mit object-fit: cover. Ein
   breites Bild wurde dafuer auf die Hoehe des Rahmens aufgeblasen: das
   Untersee-Panorama (1200 x 178) auf das 4,6-fache, Laufenburg auf das
   2,2-fache. Michael: «hier ist das Bild scheisse». Jetzt bestimmt die
   Breite die Groesse; ist ein Bild hoch, schneidet max-height oben und
   unten ab, und das verkleinert nur. */
.tourbild img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--vertieft);
}
.tourbild figcaption {
  margin-top: 4px;
  font-size: 12px;
  color: var(--gedaempft);
}
.tourbild figcaption a {
  text-decoration: underline;
}
/* Das Titelbild steht breit über den Zahlen. Höchstens 60 % der
   Schirmhöhe, damit es auf dem Handy nicht den halben Schirm nimmt; wie
   oben ohne festes Format, damit ein breites Bild nicht aufgeblasen wird. */
.titelbild {
  margin-bottom: var(--a5);
}
.titelbild img {
  max-height: 60vh;
  border-radius: var(--r-gross);
}
.empfehlungen {
  display: flex;
  flex-direction: column;
  gap: var(--a2);
}
.empfehlungen b {
  font-weight: 600;
}

/* Navigation zwischen den Touren: oben zurück zur Liste, unten die
   Nachbarn als zwei Kacheln. Auch auf dem Handy nebeneinander, die
   Kachel ist die Tippfläche (mindestens 44 px hoch). */
.tourzurueck {
  margin: 0 0 var(--a2);
  font-size: 15px;
}
.tourzurueck a {
  color: var(--gedaempft);
  text-decoration: none;
  display: inline-block;
  padding: 10px 0;
}
.tournachbarn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--a3);
  margin-top: var(--a5);
}
.tournachbar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding: var(--a3);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  color: var(--tinte);
  text-decoration: none;
}
.tournachbar.nachher {
  text-align: right;
  grid-column: 2;
}
.tournachbar small {
  color: var(--gedaempft);
  font-size: 13px;
}
.tournachbar b {
  font-weight: 600;
  color: var(--rot);
}

/* Uebernachtung: nur Ortschaft und Suchlinks. Der Hinweis darunter sagt
   ausdruecklich, dass wir keine Betriebe erfinden. */
.nachtkasten {
  margin-top: var(--a5);
  padding: var(--a4);
  background: var(--vertieft);
  border-radius: var(--r);
}
.nachtkasten h3 {
  margin-top: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  color: var(--tinte);
}
.nachtkasten p {
  font-size: 14.5px;
  color: var(--lesetext);
  margin-bottom: var(--a3);
}
.nachtnote {
  margin-top: var(--a3);
  margin-bottom: 0;
  font-size: 12.5px;
  color: var(--gedaempft);
}

/* ── Paesse auf der Route ──────────────────────────────────────────────────
   Der Unterschied zwischen amtlicher Auskunft und Erfahrungswert muss sichtbar
   sein — sonst liest jemand «Juni bis Oktober» als «heute offen» und steht im
   Mai vor einer geschlossenen Schranke. */

.paesseliste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.paesseliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--a2);
  padding: 7px 0;
  border-bottom: 1px solid var(--linie-zart);
  font-size: 14px;
}
.paesseliste li:last-child {
  border-bottom: 0;
}
/* Eine Verkehrsmeldung: fette Kopfzeile, darunter der amtliche Wortlaut.
   Die Meldung bricht auf eine eigene Zeile — sie ist ein ganzer Satz und
   kein Etikett. */
.paesseliste li > b {
  flex: 1 1 100%;
  font-weight: 600;
}
.paesseliste li > b.warnung {
  color: var(--rot-dunkel);
}
.paesseliste li > small {
  flex: 1 1 100%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gedaempft);
}

.passname {
  flex: 1;
  font-weight: 600;
}
.passhoehe {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--gedaempft);
  font-variant-numeric: tabular-nums;
}
.passzustand {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--r-pille);
}
/* Amtlich und redaktionell: klare Aussage, farbig. */
.passzustand.offen {
  background: rgba(47, 125, 79, 0.12);
  color: var(--gut);
  font-weight: 600;
}
.passzustand.zu {
  background: var(--rot-schwach);
  color: var(--rot-dunkel);
  font-weight: 600;
}
/* Erfahrungswert: bewusst blass und ohne Farbe — er sagt nichts ueber heute. */
.passzustand.erfahrung {
  /* Der Erfahrungswert ist ein ganzer Satz, keine Pille — er bekommt eine
     eigene Zeile, statt Name und Hoehe zu zerdruecken. */
  flex: 0 0 100%;
  padding-left: 0;
  background: transparent;
  color: var(--gedaempft);
  font-weight: 400;
}
.passnote {
  margin-top: var(--a3);
  padding-top: var(--a3);
  border-top: 1px solid var(--linie-zart);
  font-size: 12.5px;
  color: var(--gedaempft);
  line-height: 1.5;
}

/* Der Stand einer Passmeldung. Eigene Zeile unter der Pille: «offen» ohne
   Datum sieht nach heute aus, auch wenn die Meldung drei Wochen alt ist. */
.passstand {
  flex: 0 0 100%;
  font-size: 12.5px;
  color: var(--gedaempft);
}

/* Vorspann und Stand in den Rechtstexten. Ein Datum am Ende ist bei einer
   Datenschutzerklaerung kein Zierrat: daran erkennt man, ob sie zu dem passt,
   was die Seite heute tut. */
.fliesstext .vorspann {
  font-size: 17px;
  color: var(--tinte);
}
.fliesstext .stand {
  margin-top: var(--a5);
  padding-top: var(--a3);
  border-top: 1px solid var(--linie-zart);
  font-size: 13.5px;
  color: var(--gedaempft);
}

/* Der Hinweis auf AGB und Datenschutz beim Anlegen eines Kontos. Klein, aber
   nicht versteckt: heller als der Fliesstext waere er kaum lesbar, und ein
   Hinweis, den niemand liest, ist keiner. */
.einwilligung {
  margin-top: var(--a4);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gedaempft);
  text-align: center;
}
.einwilligung a {
  color: var(--rot-dunkel);
}

/* Die Kaesten der Kontoseite brauchen Luft dazwischen.
   Michael am 7.9.2026: «Abstände stimmen nicht.» Nachgemessen waren es
   0 px zwischen ALLEN fuenf Kaesten — sie stiessen aneinander, getrennt
   nur durch zwei aufeinanderliegende 1-px-Kanten. Es gab schlicht keine
   Regel dafuer; was wie ein unregelmaessiger Abstand aussah, waren die
   verschieden hohen Innenraender der Kaesten.

   Der Abstand steht hier am Behaelter, nicht als margin am Kasten: ein
   margin am letzten Kind schoebe den Seitenfuss weg, und ein neuer Kasten
   in der Mitte muesste daran denken. */
#kontoInhalt {
  display: flex;
  flex-direction: column;
  gap: var(--a4);
}

/* Der Zugangskasten auf der Kontoseite.
   Er steht zuoberst und traegt eine Marke mit dem Namen des Abos — beim
   Ueberfliegen soll ein Blick genuegen: welches, und wie lange noch. */
.zugangkasten .kastenkopf {
  margin-bottom: var(--a2);
}

/* ── Die Listen der Kontoseite ───────────────────────────────────────────
   Vorher liehen sie sich .redliste/.redzeile aus dem Redaktionsbereich.
   Das war der Grund fuer Michaels zweiten Befund am 7.9.2026 — die
   aufgezeichnete Fahrt sah aus wie ein Datensatz in einer Verwaltungsmaske,
   nicht wie etwas, das ihm gehoert. Die Redaktionsform bleibt, wo sie
   hingehoert; die Kontoseite bekommt eine eigene.

   Der Unterschied, der die Zeile ruhig macht: Text und Knoepfe liegen
   NICHT mehr im selben Flexfluss. Vorher wanderten fuenf Knoepfe zwischen
   die Textstuecke und brachen an beliebiger Stelle um — daher die zerrupfte
   zweite Zeile im Bildschirmfoto. Jetzt links der Text, rechts eine eigene
   Knopfgruppe, die als Ganzes umbricht. */
.kontoliste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kontoliste > li {
  border-top: 1px solid var(--linie-zart);
  padding: var(--a3) 0;
}
.kontoliste > li:first-child {
  border-top: 0;
  padding-top: 0;
}
.kontoliste > li:last-child {
  padding-bottom: 0;
}

.kontozeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--a1) var(--a3);
}
/* Der Name nimmt die Zeile ein und schiebt die Knopfgruppe nach rechts;
   auf schmalem Schirm faellt sie unter ihn statt ihn zu zerquetschen. */
.kontozeile > b {
  flex: 1 1 14ch;
  min-width: 0;
}
.kontozeile > .klein {
  color: var(--gedaempft);
}
.kontoknoepfe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--a2);
  margin-left: auto;
}
.kontoknoepfe .knopf {
  min-height: 40px;
  padding: 0 var(--a3);
  font-size: 14px;
}
/* Unter 620 px stehen Text und Knoepfe untereinander. margin-left:auto
   wuerde die Gruppe sonst an den rechten Rand kleben, waehrend der Text
   links beginnt — das las sich wie zwei zusammenhanglose Bloecke. */
@media (max-width: 620px) {
  .kontozeile > b {
    flex: 1 1 100%;
  }
  .kontoknoepfe {
    margin-left: 0;
    margin-top: var(--a1);
  }
}
.zugangmarke {
  display: inline-block;
  padding: 5px 11px 4px;
  border-radius: var(--r-pille);
  background: var(--rot);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
/* Kein Zugang: dieselbe Form, aber ohne Signalfarbe. Rot hiesse hier
   «Achtung», und es ist keine Warnung — nur ein Zustand. */
.zugangmarke.aus {
  background: var(--vertieft);
  color: var(--gedaempft);
  border: 1px solid var(--linie);
}
#zugangDetail {
  margin-top: var(--a2);
}

/* Der Kasten fuers Kontoschliessen. Er sieht anders aus als die anderen,
   weil das, was darin passiert, anders ist: endgueltig. */
.gefahrkasten {
  border-color: var(--rot);
  background: var(--rot-schwach);
}
.gefahrkasten h2 {
  color: var(--rot-dunkel);
}

/* ── Zweiter Faktor ──────────────────────────────────────────────────────
   Der QR-Code steht auf Weiss, unabhaengig vom Papierton: Kamera-Apps
   erkennen ihn sonst schlechter, und das PNG bringt seinen weissen Rand
   ohnehin mit. Feste Kante, damit die Seite beim Laden nicht springt. */
.totpqr {
  display: block;
  width: 264px;
  height: 264px;
  max-width: 100%;
  margin: var(--a4) 0;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--r);
}

/* Der Schluessel zum Abtippen und die Notfallcodes: beides wird von Hand
   uebertragen. Dicktengleiche Schrift, damit 0 und O sich unterscheiden. */
.totpschluessel {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  padding: var(--a3);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--papier);
  color: var(--tinte);
  /* Er wird abgetippt oder herauskopiert; ein Klick markiert ihn ganz. */
  user-select: all;
  /* Umbrechen darf er ueberall — 32 Zeichen passen auf einem 390-px-Schirm
     in keine Zeile, und abgeschnitten waere er wertlos. */
  overflow-wrap: anywhere;
}

.notfallliste {
  list-style: none;
  margin: var(--a4) 0;
  padding: var(--a4);
  background: var(--vertieft);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr));
  gap: var(--a2) var(--a4);
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 15px;
  letter-spacing: 0.06em;
  /* Sie werden abgeschrieben oder herauskopiert — Auswahl erlauben, auch
     wenn anderswo auf der Seite nichts markierbar sein muss. */
  user-select: all;
}

/* Hinweise zur Route, die man der Linie nicht ansieht: ein Autoverlad mit
   Fahrplan, oder ein Umweg, weil die kurze Strecke fuer das Fahrzeug
   gesperrt ist. Beide sind wichtiger als die Kilometerzahl darueber. */
.wegnote {
  margin-top: var(--a3);
  padding-top: var(--a3);
  border-top: 1px solid var(--linie-zart);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gedaempft);
}
.wegnote.warnung {
  color: var(--rot-dunkel);
}

/* ── Die Karte fuers Papier ────────────────────────────────────────────────
   Ein zweites Kartenfeld, das immer Druckmass hat: 688 x 321 Bildpunkte,
   also A4 hoch minus 14 mm Rand je Seite bei 96 dpi und die 85 mm aus
   stil/5-druck.css.

   Warum ueberhaupt eine zweite Karte? Weil die erste beim Druckbefehl zu
   spaet kommt. Die Bildschirmkarte auf Druckmass umzustellen bedeutet einen
   anderen Ausschnitt und damit andere Kacheln — und die muessen erst
   geladen werden. Beim Klick auf «Drucken» laesst sich darauf warten, beim
   Druckbefehl des Browsers nicht: «beforeprint» laeuft synchron, und
   unmittelbar danach zeichnet der Browser die Vorschau. Michaels Ausdruck
   vom Handy enthielt darum am 4.9.2026 keine einzige Kartenkachel, obwohl
   der Bildschirm eine vollstaendige Karte zeigte.

   Diese hier steht von Anfang an auf Druckmass und laedt ihre Kacheln,
   sobald eine Route berechnet ist. Wenn gedruckt wird, ist sie fertig.

   Sie liegt ausserhalb des Sichtfelds statt auf display:none — Leaflet
   zeichnet in einen Kasten ohne Ausdehnung nicht hinein. */
.druckkarte {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 688px;
  height: 321px;
}

/* Der Fahrtag steht bei den Schaltern: er gehoert zu den Vorgaben der Route,
   nicht zu den Wegpunkten. Auf dem Handy darf er umbrechen. */
.tagwahl {
  display: inline-flex;
  align-items: center;
  gap: var(--a2);
  font-size: 0.9rem;
  color: var(--gedaempft);
}
.tagwahl input {
  font: inherit;
  color: var(--tinte);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  padding: 0.35rem 0.5rem;
}

/* ── Rundtour ──────────────────────────────────────────────────────────────
   Eine eigene Zeile unter der Fahrzeugwahl: Laenge, Himmelsrichtung, Knopf.
   Auf dem Handy bricht sie um, statt sich zusammenzuquetschen — ein
   Zahlenfeld von zwei Zentimetern Breite bedient niemand. */
.rundband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a3);
  margin-top: var(--a4);
  padding-top: var(--a4);
  border-top: 1px solid var(--linie);
}
/* Meldung und Vorschlaege stehen seit 26.9.2026 direkt unter dem Band,
   nicht mehr unter der Karte. Ohne Abstand klebte der Kasten am Knopf. */
#rundMeldung,
#rundKasten {
  margin-top: var(--a3);
}
.rundtitel {
  font-weight: 600;
  color: var(--tinte);
}
.rundfeld {
  display: inline-flex;
  align-items: center;
  gap: var(--a2);
  font-size: 0.9rem;
  color: var(--gedaempft);
}
.rundfeld input {
  width: 5.5rem;
  font: inherit;
  color: var(--tinte);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  padding: 0.35rem 0.5rem;
}
.rundrichtung {
  display: inline-flex;
  gap: var(--a2);
  flex-wrap: wrap;
}

/* Die Vorschlagsliste. Jeder Eintrag traegt Zahlen, Orte und einen Knopf —
   auf dem Handy untereinander. */
.rundliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--a3);
}
.rundliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--a2) var(--a3);
  padding-bottom: var(--a3);
  border-bottom: 1px solid var(--linie);
}
.rundliste li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.rundliste b {
  font-size: 1.05rem;
}
.rundueber {
  color: var(--gedaempft);
  font-size: 0.9rem;
  flex: 1 1 8rem;
}

/* ── Mehrtagestouren ───────────────────────────────────────────────────────
   Eine Liste von Tagen, je mit Werten, Etappenziel und Übernachtungen. */
.tageliste {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tag;
}
.tageliste li {
  padding: var(--a3) 0;
  border-bottom: 1px solid var(--linie);
}
.tageliste li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.tageliste b {
  display: inline-block;
  margin-right: var(--a3);
}
.tagewerte {
  color: var(--tinte);
}
.tageziel {
  display: block;
  color: var(--gedaempft);
  font-size: 0.92rem;
  margin-top: 0.15rem;
}
.tagenacht {
  margin-top: var(--a2);
  font-size: 0.9rem;
  color: var(--gedaempft);
}
.nachttitel {
  display: block;
  font-weight: 600;
  color: var(--tinte);
  margin-bottom: 0.15rem;
}
.nachtliste {
  list-style: none;
  margin: 0 0 var(--a2);
  padding: 0;
}
.nachtliste li {
  padding: 0.1rem 0;
  border: 0;
}
.nachtweit {
  color: var(--gedaempft);
}
.nachtsuche {
  margin: 0;
}

/* «ÜN» in der Wegpunktliste: aus einem Zwischenpunkt wird ein Etappenziel.
   Klein, aber mit genug Fläche für einen Finger. */
.nachtKnopf {
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--gedaempft);
  background: var(--vertieft);
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  padding: 0.3rem 0.45rem;
  min-height: 1.9rem;
  cursor: pointer;
}
.nachtKnopf.an {
  color: var(--flaeche);
  background: var(--rot);
  border-color: var(--rot);
}

/* Wegpunkte umsortieren. Pfeile statt Ziehen: in einer scrollenden Liste
   ist ein Ziehvorgang auf dem Handy kaum zu treffen, ein Knopf immer.
   Mindestens 1,9 rem hoch, damit ein Finger ihn trifft. */
.wpschieb {
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--gedaempft);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  padding: 0.3rem 0.45rem;
  min-height: 1.9rem;
  cursor: pointer;
}
.wpschieb:hover:not(:disabled) {
  color: var(--tinte);
  background: var(--vertieft);
}
.wpschieb:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ── Kontaktformular ──────────────────────────────────────────────────────
   Auf der Hilfeseite, seit dem 5.9.2026 anstelle der offenen Mailadresse. */

.kontaktform {
  max-width: 34rem;
}

/* Der Honigtopf.
   NICHT display:none und NICHT [hidden]: manche Bots lesen beides und lassen
   das Feld dann in Ruhe. Stattdessen aus dem Sichtfeld geschoben — ein
   Mensch sieht es nie, und weil es dort keinen Platz belegt, kann es auch
   keinen Tipp abfangen. Genau das war am 2.9.2026 die Falle bei der
   Ortsliste: sie war laut Modell verborgen und lag trotzdem über dem
   halben Suchband. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kontakthinweis {
  margin: var(--a3) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gedaempft);
}

/* Nach dem Absenden ersetzt die Danksagung das Formular. Ein leeres Formular
   daneben lädt zum zweiten Versuch ein, obwohl der erste geklappt hat. */
.kontaktdank {
  max-width: 34rem;
  padding: var(--a4);
  border: 1px solid rgba(47, 125, 79, 0.3);
  background: rgba(47, 125, 79, 0.07);
  border-radius: var(--r);
}
.kontaktdank b {
  display: block;
  font-size: 17px;
  margin-bottom: 4px;
}
.kontaktdank p {
  margin: 0;
  color: var(--gedaempft);
  line-height: 1.5;
}

/* ── Die Bezahlschranke auf der Tourseite ────────────────────────────────
   Ein Kasten, den man liest — keine Lücke, die man sich zusammenreimt.
   Die erste Etappe steht vollständig darüber; hier steht, was fehlt und
   warum. */

.schranke {
  margin-top: var(--a5);
  padding: var(--a5) var(--a4);
  background: var(--vertieft);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--rot);
  border-radius: var(--r);
  text-align: center;
}
.schranke h2 {
  margin: 0 0 var(--a2);
}
.schranke p {
  margin: 0 auto var(--a4);
  max-width: 46ch;
  color: var(--gedaempft);
  line-height: 1.55;
}
.schranke .knopfreihe {
  justify-content: center;
  margin-bottom: 0;
}

/* ── Die Navigationsansicht ────────────────────────────────────────────────
   Volle Flaeche des Bildschirms. Entscheid 15.9.2026 (Fahransicht): waehrend
   der Fahrt steht keine Kopfzeile der Webseite; html.nav-aktiv blendet sie
   aus, navigator.js setzt die Klasse beim Start und nimmt sie beim Beenden
   weg. Aufbau als Flex-Spalte statt frei positionierter Kaesten: die
   Manoeverkarte und die Restanzeige liegen als eigene Zeilen UEBER der
   Karte, nicht als absolut positionierte Overlays mit geschaetzten
   Pixel-Abstaenden — robuster gegenueber unterschiedlichen Bildschirmgroessen,
   ohne Playwright-Screenshots von einem echten Geraet gegenzupruefen.

   Bewusst NICHT umgesetzt: die Kartendrehung in Fahrtrichtung (Spec 3.2).
   Das uebliche Verfahren dafuer ist ein deutlich ueberdimensionierter,
   gedrehter Leaflet-Container (sonst zeigen sich beim Drehen leere Ecken) —
   das haette Leaflets interne Pixel-Rechnung (Kachel-Nachladen, spaeter
   Bedienung) und das Kachel-Budget (CLAUDE.md: 150 Kacheln) angefasst, ohne
   sich an einem echten Geraet gegenpruefen zu lassen, und ohne
   Zwischen-Review in dieser Sitzung. Das ist der in der Spezifikation
   ausdruecklich erlaubte Rueckfall "Norden oben, Pfeil dreht": die Karte
   bleibt nordorientiert, aber der Positionspfeil auf der Karte (.navmarker)
   zeigt die echte Fahrtrichtung. */

#navAnsicht {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Ueber dem aufgeklappten Seitenmenue (--b-menu), unter Dialogen
     (--b-dialog 1000): ein Dialog muss auch waehrend der Fahrt obenauf
     liegen. */
  z-index: calc(var(--b-menu) + 1);
  /* Vollbild bis an die Kante. Notch und Home-Leiste (env(safe-area-inset-*))
     halten seit dem 15.9.2026 die Platte, die Infozeile und die Knoepfe
     selbst frei, nicht diese Flaeche: alle Kinder liegen absolut, und die
     Karte reicht so bis an den Rand. */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  /* Explizit, nicht nur geerbt: body{color:var(--tinte)} berechnet seine
     Schriftfarbe EINMAL mit dem Wert, der zu diesem Zeitpunkt gilt — ein
     tiefer im Baum neu belegtes --tinte (siehe .nav-nacht unten) faerbt
     eine schon vererbte color NICHT nachtraeglich um. Ohne diese Zeile blieb
     "3,3 km" in der Manoeverkarte in der Nachtansicht dunkel auf dunklem
     Grund und war schlicht nicht zu lesen — gefunden im Sichttest, nicht am
     Code angesehen. */
  color: var(--tinte);
}
/* visibility statt display: die Kopfzeile behaelt ihren Platz im Fluss der
   Seite, nach dem Beenden springt darunter nichts. Das Seitenmenue liegt in
   der Kopfzeile und verschwindet mit ihr. */
html.nav-aktiv .kopf {
  visibility: hidden;
}

/* Zustand «bereit» (Navigations-Seite, 15.9.2026): Karte und Knoepfe, aber
   keine Fuehrung. Platte, Infozeile und Tempolimit kommen erst mit «Los». */
#navAnsicht.nav-bereit #navManoeverkarte,
#navAnsicht.nav-bereit #navInfoZeile,
#navAnsicht.nav-bereit #navLimitBox {
  display: none;
}
/* Ohne Fuehrung gibt es nichts zu ueberblicken und nichts zu beenden
   (Spezifikation 1 nennt fuer «bereit» nur Zentrieren). Zentrieren selbst
   zeigt folgenSetzen() erst, wenn die Karte nicht mehr folgt. */
#navAnsicht.nav-bereit #navUebersichtKnopf,
#navAnsicht.nav-bereit #navStopp {
  display: none;
}
/* «Anhalten» haelt eine Fuehrung an; in «bereit» gibt es keine. Eine leere
   Quellennennung wuerde als grauer Strich ueber dem Blatt stehen. */
#navAnsicht.nav-bereit #navMenue .navsteuerreihe:has(#navPauseKnopf),
.navkartenquelle:empty {
  display: none;
}

/* Blatt «Wohin?» (15.9.2026, docs/specs/2026-09-15-navigation-wohin-blatt.md
   Abschnitt 2): unten ueber der Karte, drei Hoehen, nur im Zustand
   «bereit». z-index 12 wie Platte und Infozeile: ueber den Knoepfen (11),
   unter dem Menue (13), damit ein offenes Menue nie unter dem Blatt liegt. */
.navblatt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  transition: height 0.2s var(--uebergang);
}
#navAnsicht:not(.nav-bereit) .navblatt {
  display: none;
}
.navblatt[data-stufe="klein"] {
  height: calc(96px + env(safe-area-inset-bottom));
}
.navblatt[data-stufe="mittel"] {
  height: 50%;
}
/* Nie mehr als 85 %: oben bleibt ein Streifen Karte, ein Tipp darauf
   schliesst das Blatt (Spezifikation 2). */
.navblatt[data-stufe="gross"] {
  height: 85%;
}
/* Sprung auf «gross» beim Beruehren des Suchfelds (src/nav-blatt.js,
   sofortGross): ohne Uebergang, sonst liegt das Feld beim Fokus noch unten
   und iOS schiebt die Ansicht hoch. */
.navblatt.navblatt-sprung {
  transition: none;
}
/* Tastatur offen (15.9.2026 abends, src/nav-blatt.js): das Blatt steht auf
   der Oberkante der Tastatur und ist hoechstens so hoch wie der sichtbare
   Ausschnitt minus Safe-Area oben. Sonst schob iOS das Suchfeld unter die
   Notch. Die Home-Leiste liegt dann unter der Tastatur, darum kein Rand
   unten. Nur im Hochformat; die Spalte im Querformat bleibt, wie sie ist. */
@media (orientation: portrait), (min-height: 561px) {
  .navblatt.navblatt-tastatur,
  .navblatt.navblatt-tastatur[data-stufe] {
    bottom: var(--navblatt-unten, 0px);
    /* So hoch wie der Inhalt, hoechstens bis unter die Notch. Das Feld
       steht damit knapp ueber der Tastatur, darueber bleibt Karte fuer die
       Treffernadel sichtbar (Michael 19.9.2026: «etwas weiter unten»). */
    height: auto;
    max-height: var(--navblatt-max, 85%);
    padding-bottom: 0;
    transition: none;
  }
}
html.navblatt-tastatur,
html.navblatt-tastatur body {
  overflow: hidden;
}
/* Misst env(safe-area-inset-top) fuer src/nav-blatt.js. */
.navblatt-safeprobe {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: env(safe-area-inset-top);
  visibility: hidden;
  pointer-events: none;
}
.navblattgriff {
  flex: 0 0 auto;
  width: 100%;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Der Zug am Griff gehoert dem Blatt, nicht dem Scrollen der Seite. */
  touch-action: none;
}
.navblattstrich {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: var(--gedaempft);
  opacity: 0.5;
}
.navblattinhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--a4) var(--a3);
}
/* Im Hochformat stehen die Knoepfe unten, die Quellennennung und die
   Meldungen ueber dem kleinen Blatt, mit denselben Abstaenden wie ueber
   der Infozeile waehrend der Fahrt. */
#navAnsicht.nav-bereit #navLinksUnten,
#navAnsicht.nav-bereit #navKarteKnoepfe {
  bottom: calc(96px + 28px + env(safe-area-inset-bottom));
}
#navAnsicht.nav-bereit .navkartenquelle {
  bottom: calc(96px + 4px + env(safe-area-inset-bottom));
}
#navAnsicht.nav-bereit #navKarteBanner {
  bottom: calc(96px + 116px + env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: reduce) {
  .navblatt {
    transition: none;
  }
}

/* Tourenlink /t/<kennung> (18.9.2026): die Karte des Gasts an der Stelle
   des Blatts «Wohin?». Dieselbe Flaeche (.navblatt), aber eine feste Hoehe
   ohne Stufen und ohne Griff: es gibt nur diese eine Tour. Die Knoepfe
   unten auf der Karte stehen darum ueber DIESER Hoehe, nicht ueber den
   96 px des kleinen Blatts. */
.tlkarte {
  height: calc(var(--tlkarte-hoehe) + env(safe-area-inset-bottom));
}
body[data-gast] {
  /* 18.9.2026: 164px. Aufgabe 5 (18.9.2026) legt den Hinweisstreifen
     #tlPromo dazu, darum mehr Platz. 3.10.2026: 318px fuer Eckzeile,
     Tageswahl und Zahlen. Was darueber hinausgeht («Mehr zur Tour», die
     Werbezeile), scrollt in der Karte (.tlinhalt). */
  --tlkarte-hoehe: 318px;
}
/* Nach «Losfahren» steht der Haftungskasten in der Karte. Er soll ganz zu
   sehen sein, ohne dass jemand in der Karte scrollen muss. */
.tlkarte:has(#navHaftungKasten:not([hidden])) {
  height: auto;
  max-height: 85%;
}
.tlinhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--a3) var(--a4);
}
.tlueber {
  margin: 0;
  font-size: 13.5px;
  color: var(--gedaempft);
}
.tlname {
  margin: 0 0 var(--a2);
  font-size: 22px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tlkarte .leerhinweis,
.tlkarte .meldung {
  margin: 0 0 var(--a2);
}
/* Ausbau 3.10.2026: Eckzeile (Datum, Zeit, Treffpunkt), Tageswahl und die
   Zahlen des Tags, zwischen Tourname und «Losfahren». */
.tleck {
  margin: 0 0 var(--a2);
  font-weight: 600;
  font-size: 15px;
}
.tltage {
  display: flex;
  gap: var(--a2);
  overflow-x: auto;
  margin: 0 calc(-1 * var(--a4)) var(--a2);
  padding: 0 var(--a4) 2px;
  scrollbar-width: none;
}
.tltage::-webkit-scrollbar {
  display: none;
}
.tltag {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 var(--a3);
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.tltag[aria-pressed="true"] {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--flaeche);
}
.tlzahlen {
  margin: 0 0 var(--a2);
  color: var(--gedaempft);
  font-size: 14px;
}
.tlmehr {
  margin-top: var(--a3);
}
.tlmehr summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}
.tlunter {
  margin: var(--a2) 0 2px;
  font-size: 13px;
  color: var(--gedaempft);
}
.tlnotiz {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.tlhalte {
  margin: 0;
  padding-left: 1.4em;
}
.tlhalte li {
  padding: 2px 0;
}
/* Kontoseite, Link-Formular: die Wegpunkte mit Haekchen «Tag endet hier».
   Eine Zeile je Punkt, Name und Hinweis getrennt; auf dem Handy rutscht
   der Hinweis unter den Namen statt an ihn zu kleben. */
.tltagewahl {
  margin: var(--a3) 0;
}
.tltagewahl summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}
.tlpunkte {
  margin: 0 0 var(--a2);
  padding-left: 1.6em;
}
.tlpunkte li {
  padding: 4px 0;
}
.tlpunkte label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--a2);
  min-height: 36px;
  cursor: pointer;
}
.tlpunkte label .klein {
  color: var(--gedaempft);
}
.tlstart {
  display: block;
  margin-bottom: 4px;
  color: var(--gedaempft);
  font-weight: 400;
}
.tlqr {
  margin-top: var(--a3);
}
.tlqr img {
  display: block;
  width: 220px;
  height: 220px;
  margin-bottom: var(--a2);
  image-rendering: pixelated;
  background: #fff;
}
#tlLos {
  width: 100%;
  min-height: 52px;
}
/* «Losfahren» geht ueber #navKnopf, der Knopf selbst bleibt unsichtbar.
   Der Haftungskasten darunter ist sichtbar, wenn er gebraucht wird. */
.tlkarte #navKnopf {
  display: none;
}
.tlkarte .kasten {
  margin: var(--a3) 0 0;
}
/* Das Fahrzeug der Ausfahrt ist fest (src/navigator.js sperrt den Knopf).
   Er bleibt lesbar, nur ohne Zeiger. */
.navpille:disabled {
  opacity: 1;
  cursor: default;
}

/* Aufgabe 5, Korrektur (18.9.2026, progress.md-Ruling): die Spezifikation
   (Abschnitt 5) verbietet nur das MENUE DER WEBSEITE (Planer, Touren,
   Konto) — das gibt es hier ohnehin nicht, siehe zusatz.gastKarte statt
   zusatz.blatt in src/seiten/nav-ansicht.js. Das Navigator-Menue selbst
   bleibt fuer den Gast vollstaendig: Anhalten, Kartenwahl, Nacht,
   Sperrungen und Paesse, Limit-Hinweis, Beenden. Entfernt wird nur die
   Zeile «Aufzeichnen» — ein Gast ohne Konto hat nichts, wohin er eine
   Fahrt sichern koennte (src/seiten/nav-ansicht.js traegt der Zeile dafuer
   die id #navAufzeichnenReihe). Eine fruehere Fassung blendete hier das
   ganze Menue aus und ersetzte die Nachtansicht durch einen eigenen Knopf
   (#navNachtKnopf) — das widersprach der Spec (versteckte u. a. die
   sicherheitsrelevanten Sperrungen/Paesse) und ist zurueckgenommen. */
body[data-gast] #navAufzeichnenReihe {
  display: none;
}

/* Hinweisstreifen (Aufgabe 5, 18.9.2026): ruhig, nur im Zustand «bereit»
   vor «Losfahren». Verschwindet mit der ganzen Karte, sobald die Fuehrung
   startet (#navAnsicht:not(.nav-bereit) .navblatt weiter oben) — und
   schon eine Zeile davor, sobald die Haftung zu bestaetigen ist: die
   Karte soll dort nicht ueberladen wirken. */
.tlpromo {
  margin-top: var(--a3);
  padding-top: var(--a3);
  border-top: 1px solid var(--linie);
}
.tlkarte:has(#navHaftungKasten:not([hidden])) .tlpromo {
  display: none;
}
.tlpromotitel {
  margin: 0 0 2px;
  font-weight: 600;
  font-size: 14.5px;
}
.tlpromozeile {
  margin: 0 0 var(--a3);
  color: var(--gedaempft);
  font-size: 13px;
}
/* Nur im Hochformat: im Querformat ist die Karte eine Spalte links, und
   die Knoepfe stehen wieder unten (Abfrage wie beim Blatt, Gegenteil der
   Querformat-Abfrage weiter unten). */
@media (orientation: portrait), (min-height: 561px) {
  body[data-gast] #navAnsicht.nav-bereit #navLinksUnten,
  body[data-gast] #navAnsicht.nav-bereit #navKarteKnoepfe {
    bottom: calc(var(--tlkarte-hoehe) + 28px + env(safe-area-inset-bottom));
  }
  body[data-gast] #navAnsicht.nav-bereit .navkartenquelle {
    bottom: calc(var(--tlkarte-hoehe) + 4px + env(safe-area-inset-bottom));
  }
  body[data-gast] #navAnsicht.nav-bereit #navKarteBanner {
    bottom: calc(var(--tlkarte-hoehe) + 116px + env(safe-area-inset-bottom));
  }
}

/* Inhalt des Blatts (15.9.2026). Das Suchfeld steht zuoberst und passt in
   die kleine Stufe (96 px: Griff 28, Feld 48). */
.navwohinfeld {
  margin-bottom: var(--a3);
}
/* In der kleinen Stufe nur das Suchfeld. Sonst ragte der obere Rand der
   naechsten Zeile (Zuletzt oder Lade-Knopf) unten ins Blatt, im Foto vom
   15.9.2026 gesehen. Nur im Hochformat: im Querformat ist das Blatt eine
   Spalte und immer ganz offen, egal was in data-stufe steht. Die Abfrage
   ist das Gegenteil der Querformat-Abfrage weiter unten. Die
   Standort-Meldung bleibt stehen; mit ihr zieht src/navigation.js das
   Blatt auf mittel. */
@media (orientation: portrait), (min-height: 561px) {
  .navblatt[data-stufe="klein"] #navWohin > :not(.navwohinfeld):not(#navseiteStandortMeldung) {
    display: none;
  }
}
#navBlatt .meldung {
  margin: 0 0 var(--a3);
}
#navBlatt .navseite-zuletzt {
  margin-bottom: var(--a3);
}
.navvorschauziel {
  font-weight: 700;
  margin: 0 0 var(--a2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#navVorschau .fahrzeugwahl {
  margin: var(--a3) 0;
}
.navzwischen {
  display: flex;
  flex-direction: column;
  gap: var(--a2);
  margin-bottom: var(--a3);
}
.navzwischen #zwischenstopps:empty {
  display: none;
}
.navvorschauknoepfe {
  display: flex;
  gap: var(--a2);
  margin-top: var(--a3);
}
.navvorschauknoepfe .knopf {
  flex: 1 1 0;
  min-height: 52px;
}
/* «Los» geht ueber #navKnopf (Zugang, Haftung, Start in navigator.js). Der
   Knopf selbst und «Fahrt aufzeichnen» sind hier nicht zu sehen;
   Haftungskasten und Zugangsmeldung darunter schon. */
#navBlatt #navKnopf,
#navBlatt #fahrtKnopf {
  display: none;
}
#navseiteStart > .kasten,
#navseiteStart > .meldung {
  margin: var(--a3) 0 0;
}
/* Seitenlinks im Menue (Planer, Touren, Konto, Webseite; seit 15.9.2026
   abends statt «Zur Webseite» allein). Nur im Zustand «bereit»: waehrend
   der Fahrt verliesse ein Link die laufende Fuehrung. Als Chips in einer
   umbrechenden Reihe, 44 px hoch wie die uebrigen Menueknoepfe. */
.navseitenlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.navseitenlinks .chip {
  display: inline-flex;
  align-items: center;
  color: var(--tinte);
  text-decoration: none;
}
#navAnsicht:not(.nav-bereit) #navSeitenLinks {
  display: none;
}
/* Nur fuer Screenreader: die Seite braucht eine Ueberschrift, sichtbar ist
   aber nur die Karte. */
.nurvorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#navManoeverkarte {
  /* Seit dem 15.9.2026 ein Kind von #navAnsicht, oben ueber der vollen
     Karte. Das obere Innenmass nimmt die Notch mit, die Platte deckt sie. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: var(--a4);
  padding: calc(var(--a3) + env(safe-area-inset-top)) calc(var(--a4) + env(safe-area-inset-right))
    var(--a3) calc(var(--a4) + env(safe-area-inset-left));
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  /* Der Schatten haelt sie optisch von der Kartenflaeche darunter ab. */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.navpfeil {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  transition: transform 0.2s var(--uebergang);
}
.navpfeil::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: -22px 0 0 -18px;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 28px solid var(--rot);
}
.navpfeil[data-gruppe="rechts"] {
  transform: rotate(90deg);
}
.navpfeil[data-gruppe="links"] {
  transform: rotate(-90deg);
}
.navpfeil[data-gruppe="wenden"] {
  transform: rotate(180deg);
}
/* Verlad/Faehre zeigt keine Richtung — ein einfacher CSS-Rumpf statt eines
   Richtungspfeils, kein Dingbat, keine Grafik. */
.navpfeil[data-gruppe="verlad"]::after {
  display: none;
}
.navpfeil[data-gruppe="verlad"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 18px;
  margin: -9px 0 0 -19px;
  background: var(--rot);
  clip-path: polygon(8% 0, 92% 0, 100% 70%, 78% 100%, 22% 100%, 0 70%);
}

.navmanoevertext {
  min-width: 0;
  flex: 1 1 auto;
}
.navmanoevertext b {
  display: block;
  font-family: var(--plakat);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.1;
}
.navmanoevertext span {
  /* Max. zwei Zeilen mit Ellipsis (Auftrag Etappe 1) statt einer einzigen
     abgeschnittenen Zeile — ein langer Strassenname ("Hauptstrasse Richtung
     Flueelen") blieb sonst nach wenigen Worten stumm abgeschnitten. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 2px;
  font-size: 15px;
  color: var(--gedaempft);
  overflow: hidden;
}

/* ── Fahransicht (15.9.2026): runde Knoepfe, Infozeile, Menue ─────────────
   Volle Karte, Knoepfe an den Raendern, ein kleines Menue statt des Blatts.
   --manoeverhoehe und --infohoehe misst navigator.js' randHoehenMessen() am
   Bildschirm, damit die Knoepfe unter der Platte und ueber der Zeile
   sitzen, auch wenn der Manoevertext zweizeilig wird. */
#navInfoZeile {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  display: flex;
  gap: var(--a3);
  /* center statt baseline seit dem X (15.9.2026 abends): der runde Knopf
     hat keine Textgrundlinie, die Zahlen sollen mittig daneben stehen. */
  align-items: center;
  /* Eine Zeile: Ankunft und Rest bleiben ganz, die Strasse kuerzt sich
     (Sichttest 15.9.2026: umgebrochen war die Zeile 77 statt ~40 px hoch). */
  flex-wrap: nowrap;
  white-space: nowrap;
  padding: var(--a2) calc(var(--a4) + env(safe-area-inset-right)) calc(var(--a2) + env(safe-area-inset-bottom))
    calc(var(--a4) + env(safe-area-inset-left));
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  font-size: 15px;
}
.navrund {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tinte);
  color: var(--papier);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.navrund svg {
  width: 26px;
  height: 26px;
}
/* Der Menueknopf traegt sein Wort nur, solange nicht gefahren wird.
   Begruendung im Markup (src/seiten/nav-ansicht.js). */
.navrundwort {
  display: none;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
#navAnsicht.nav-bereit #navMenueKnopf {
  width: auto;
  border-radius: 26px;
  padding: 0 18px 0 14px;
  gap: 8px;
}
#navAnsicht.nav-bereit .navrundwort {
  display: inline;
}
#navStummKnopf .navstumm {
  display: none;
}
#navStummKnopf[aria-pressed="true"] .navstumm {
  display: inline;
}
#navStummKnopf[aria-pressed="true"] .navlaut {
  display: none;
}
.navpille {
  min-height: 48px;
  max-width: calc(100vw - 120px);
  padding: 0 var(--a4);
  border-radius: 24px;
  border: 0;
  background: var(--tinte);
  color: var(--papier);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
#navMenueKnopf {
  position: absolute;
  left: calc(var(--a4) + env(safe-area-inset-left));
  top: calc(var(--manoeverhoehe, 96px) + var(--a3));
  z-index: 11;
}
#navRechtsOben {
  position: absolute;
  right: calc(var(--a4) + env(safe-area-inset-right));
  top: calc(var(--manoeverhoehe, 96px) + var(--a3));
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--a2);
}
/* Die Kartenquelle liegt knapp ueber der Infozeile; die Knoepfe darueber
   halten 28 px Abstand, damit sie sie nicht verdecken. */
#navLinksUnten {
  position: absolute;
  left: calc(var(--a4) + env(safe-area-inset-left));
  bottom: calc(var(--infohoehe, 44px) + 28px);
  z-index: 11;
  display: flex;
  align-items: center;
  gap: var(--a2);
  pointer-events: none;
}
#navTempoRund {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--tinte);
  color: var(--papier);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}
#navTempoRund b {
  font-family: var(--plakat);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
}
/* TODO 16h: Zahl (b) und Einheit (span) sind getrennte Textknoten. */
#navTempoRund .navtempoeinheit {
  font-size: 11px;
  opacity: 0.8;
}
/* Neben dem Menueknopf, nicht darunter (Spezifikation «kleine Karte neben
   dem Knopf»): so bleibt am Handy die Kartenmitte frei, auch wenn das Menue
   seine volle Hoehe braucht. Links 16 + 52 + 8 px. */
#navMenue {
  position: absolute;
  left: calc(76px + env(safe-area-inset-left));
  top: calc(var(--manoeverhoehe, 96px) + var(--a3));
  z-index: 13;
  width: min(360px, calc(100% - 92px));
  /* Hoechstens ein Drittel der Schirmhoehe (Spezifikation): der Rest bleibt
     Karte, und ein Tipp darauf schliesst das Menue. */
  max-height: 33vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Wisch-Gesten im Menue duerfen die Karte darunter nicht mitbewegen. */
  touch-action: pan-y;
  box-sizing: border-box;
  padding: var(--a3);
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Kompakt (Sichttest 15.9.2026, 390x844): mit untereinander gestapelten
   Chips blieben im Drittel nur «Anhalten» und «Karte» sichtbar. Jetzt
   stehen die Chips in umbrechenden Reihen, und Anhalten, Karte und Nacht
   passen ohne Scrollen hinein. 44 px bleibt die Fingerregel. */
#navMenue .chip {
  min-height: 44px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.2;
}
.navmenuetitel {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.2;
  color: var(--gedaempft);
}

/* ── Meldungen auf der Karte (Etappe 1) ────────────────────────────────────
   Pause-Status und Fahrt-Meldung schweben auf der Karte, unabhaengig vom
   Menue sichtbar, dafuer eigens eingefaerbt: .meldung.schlecht traegt nur
   8% Deckkraft (--rot-schwach) und waere auf einer Kartenkachel statt dem
   cremigen --papier praktisch unsichtbar. */
#navKarteBanner {
  position: absolute;
  left: var(--a4);
  right: var(--a4);
  /* Ueber dem runden Tempo (76 px, 28 px ueber der Infozeile): auf
     Michaels iPhone-Foto vom 6.9.2026 lag der Akku-Hinweis sonst genau auf
     den unteren Knoepfen. */
  bottom: calc(var(--infohoehe, 44px) + 116px);
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--a2);
  pointer-events: none;
}
#navPauseStatus,
#navFahrtMeldung {
  margin: 0;
  max-width: 380px;
  padding: 6px 14px;
  border-radius: var(--r-pille);
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}
#navFahrtMeldung {
  background: rgba(193, 39, 45, 0.88);
}

/* ── Quellennennung auf der Karte (Etappe 1) ───────────────────────────────
   Seit dem 15.9.2026 mittig knapp ueber der Infozeile: links sitzt das
   Tempo, rechts Zentrieren/Uebersicht, beide 28 px hoeher. */
.navkartenquelle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--infohoehe, 44px) + 4px);
  z-index: 10;
  max-width: 55%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 8px;
  border-radius: var(--r-pille);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  pointer-events: none;
}

/* ── Tempolimit-Schild (Task 6) ─────────────────────────────────────────────
   Ein Verkehrszeichen-Nachbild, reines CSS: weiss/rot/schwarz FEST
   verdrahtet (kein var(--…)) — ein echtes Tempolimit-Schild aendert seine
   Farbe nachts nicht, das waere hier falsch. Erscheint nur mit einem Wert
   aus "limits". Liegt seit dem 15.9.2026 im Fluss von #navLinksUnten, neben
   dem runden Tempo. */
#navLimitBox {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
/* Fahransicht 15.9.2026: 64 statt 46 px, nur beim Begleitfahrzeug
   (navigator.js limitAktualisieren), der Hinweistext daneben ist weg. */
#navLimitSchild {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #c1272d;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
#navLimitSchild span {
  font-family: var(--plakat);
  font-weight: 400;
  font-size: 26px;
  color: #1a1a1a;
}

/* Die Karte fuellt die ganze Ansicht; alles andere schwebt darauf. */
#navKarteAussen {
  position: absolute;
  inset: 0;
  z-index: var(--b-karte);
  isolation: isolate;
}
#navKarte {
  position: absolute;
  inset: 0;
}

/* Follow-Modus (Task 3): unten RECHTS ein Knopf, der zwischen Uebersicht
   und Zentrieren wechselt (folgenSetzen() blendet je einen aus).
   pointer-events:none auf dem Container haelt die leere Flaeche daneben aus
   der Kartenbedienung heraus. */
#navKarteKnoepfe {
  position: absolute;
  right: calc(var(--a4) + env(safe-area-inset-right));
  bottom: calc(var(--infohoehe, 44px) + 28px);
  z-index: 11;
  pointer-events: none;
}
#navKarteKnoepfe .navpille {
  pointer-events: auto;
}

/* Aktuelle Strasse (Task 6), rechts in der Infozeile: leer bleibt leer,
   :empty blendet sie aus, statt eine leere Stelle zu zeigen. */
#navStrasse {
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
  color: var(--gedaempft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#navStrasse:empty {
  display: none;
}
.navnachtwahl {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
}

/* ── Sperrungen/Baustellen und Paesse im Menue (Navigator-Ausbau Etappe 2,
   Task 3) ──────────────────────────────────────────────────────────────
   Eigene Trennlinie, gedaempfter Ton; .paesseliste/.passname/.passhoehe/
   .passzustand/.passstand/.passnote sind dieselben Klassen wie auf der
   Planer-Seite (siehe oben), nicht neu erfunden. */
.navumgebung {
  border-top: 1px solid var(--linie);
  padding-top: var(--a3);
  font-size: 0.9em;
  color: var(--gedaempft);
}
.navumgebung .navmenuetitel {
  margin: 0 0 var(--a1) 0;
  font-weight: 600;
  color: var(--tinte);
}
.navblattabschnitt + .navblattabschnitt {
  margin-top: var(--a3);
}
#navUmgebungTeilabdeckung.passnote {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-bottom: var(--a3);
}

/* ── Stumm/Pause, Kartenumschalter (Task 7) ───────────────────────────────
   Pause/Stumm sind haeufig gebrauchte Hauptbedienelemente waehrend der
   Fahrt und bekommen darum volle Breite je Haelfte (grosse Tippflaeche) —
   anders als die leichten Umschalt-Chips (Ebene/Nacht), die zentriert und
   in ihrer eigenen Breite bleiben. */
.navsteuerreihe {
  display: flex;
  gap: var(--a2);
}
.navsteuerreihe .chip {
  flex: 1 1 0;
  text-align: center;
}
.navebenewahl {
  display: flex;
  /* Linksbuendig statt zentriert (15.9.2026): zentriert standen die Chips
     einzeln untereinander und kosteten die halbe Menuehoehe. */
  justify-content: flex-start;
  gap: 6px;
  /* Umbrechen statt ueberlaufen: in einem schmalen Menue passen die drei
     Kartenknoepfe nicht nebeneinander. Auf Michaels Bild vom 8.9.2026 hing
     «swisstopo farbig» bei x = -15 px ausserhalb des Schirms, als die Reihe
     noch zentriert war und nicht umbrach. */
  flex-wrap: wrap;
}

/* ── Ankunft (Fahransicht 15.9.2026) ──────────────────────────────────────
   Am Ziel bleibt die Ansicht offen; diese Karte liegt mittig darüber, bis
   «Beenden» sie schliesst. #navAnsicht ist position:fixed und damit der
   Bezugsrahmen. */
#navZielKarte {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  min-width: 240px;
  padding: var(--a4);
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.navzieltitel {
  font-family: var(--plakat);
  font-size: 28px;
  margin: 0 0 var(--a2);
}
#navZielKarte .knopf { margin-top: var(--a3); width: 100%; }

/* ── X zum Beenden (15.9.2026 abends) ─────────────────────────────────────
   Links in der Infozeile, neben der Ankunft, wie bei Google Maps. Heller
   als die schwebenden Knoepfe: es ist kein Fahrknopf. 48 px Fingermass;
   die Zeile wird damit hoeher, und --infohoehe (randHoehenMessen) hebt
   Tempo und Zentrieren entsprechend mit. */
.navx {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background: var(--vertieft);
  color: var(--tinte);
  border: 1px solid var(--linie);
  box-shadow: none;
}
.navx svg {
  width: 22px;
  height: 22px;
}
/* Rueckfrage: wie die Ziel-Karte mittig ueber der Karte, darunter laeuft
   die Fahrt weiter. */
#navBeendenFrage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  box-sizing: border-box;
  width: min(320px, calc(100% - 32px));
  padding: var(--a4);
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.navfragetext {
  margin: 0 0 var(--a3);
  font-size: 18px;
  font-weight: 700;
}
.navfrageknoepfe {
  display: flex;
  gap: var(--a2);
}
.navfrageknoepfe .knopf {
  flex: 1 1 0;
  min-height: 48px;
  padding: 0 var(--a3);
}

/* ── Ziel aendern unterwegs (Wohin-Blatt Etappe 2, 27.9.2026) ────────────
   Direkt unter der Manoeverplatte, wie das Menue: die naechste Abbiegung
   bleibt sichtbar, und die Tastatur nimmt die untere Haelfte, Feld und
   Treffer bleiben darueber. Wird es zu hoch, scrollt die Karte in sich. */
#navZielDialog {
  position: absolute;
  left: 50%;
  top: calc(var(--manoeverhoehe, 96px) + var(--a3));
  transform: translateX(-50%);
  z-index: 20;
  box-sizing: border-box;
  width: min(360px, calc(100% - 32px));
  max-height: calc(100% - var(--manoeverhoehe, 96px) - 2 * var(--a3));
  overflow-y: auto;
  padding: var(--a4);
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
#navZielDialog .navfragetext {
  text-align: center;
}
#navZielDialog .navzielfeld {
  margin-bottom: 0;
}
/* Im Fluss statt schwebend, wie im Blatt «Wohin?»: eine schwebende Liste
   zaehlte nicht zur Hoehe und wuerde unten abgeschnitten. */
#navZielDialog .treffer {
  position: static;
  margin-top: 4px;
  box-shadow: none;
}
.navzielstatus {
  margin: var(--a3) 0 0;
  font-size: 15px;
  text-align: center;
  color: var(--gedaempft);
}
.navzielstatus.schlecht {
  color: var(--rot);
  font-weight: 600;
}
#navZielWahl {
  margin-top: var(--a3);
}
#navZielAbbrechenKnopf {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: var(--a3);
}
/* Der Gast darf nur Punkte seiner Tour rechnen, der Server wiese jeden
   anderen Ort mit 403 ab. In «bereit» faellt die ganze Reihe mit
   «Anhalten» weg (weiter oben), dort ist das Blatt «Wohin?» da. */
body[data-gast] #navZielKnopf {
  display: none;
}

/* ── Querformat: Spalte links, Karte rechts (Fahransicht 15.9.2026) ───────
   Michael, 15.9.2026: «Route mittig, zwei Drittel Tafeln». Links eine
   schmale Spalte mit Manoeverplatte oben und Infozeile unten, rechts die
   Karte als EIGENER Bereich (#navKarteAussen beginnt rechts der Spalte).
   So liegt der Pfeil in der Mitte der Kartenflaeche, also rechts der
   Schirmmitte, ohne Padding an MapLibre. Die runden Knoepfe sind Kinder
   von #navKarteAussen und sitzen damit an den Raendern der Kartenflaeche
   wie im Hochformat; nur ihr Abstand zu Platte und Zeile faellt weg, weil
   die beiden nicht mehr ueber der Karte liegen.

   Die Kartengroesse folgt ohne eigenen Beobachter: MapLibre beobachtet
   seinen Container selbst (ResizeObserver, trackResize), Leaflet reagiert
   auf die Fenstergroesse, und Padding und Anker misst der vorhandene
   resize/orientationchange-Weg (kameraAnkerNeuMessen) neu.

   Herkunft: am 8.9.2026 war «QuerFormat geht gar nicht» (Karte ein 238 px
   Streifen); der zweite Anlauf liess Platte und Fahrdaten links UEBER der
   ganzen Karte schweben, der Pfeil blieb dabei in der Schirmmitte unter der
   Platte. max-height 560px an der Hoehe grenzt auf ein gedrehtes Telefon
   ein; ein Tablet im Querformat bleibt beim Hochformat-Aufbau. */
@media (orientation: landscape) and (max-height: 560px) {
  #navAnsicht {
    --navspalte: calc(max(220px, min(25vw, 280px)) + env(safe-area-inset-left));
  }
  #navKarteAussen {
    left: var(--navspalte);
  }
  #navManoeverkarte,
  #navInfoZeile {
    right: auto;
    width: var(--navspalte);
    box-sizing: border-box;
    border-right: 1px solid var(--linie);
    padding-right: var(--a4);
  }
  /* Die Platte fuellt die Spalte bis zur Infozeile: kein Kartenstreifen
     darunter. Pfeil ueber dem Text, damit der Text die ganze Spaltenbreite
     bekommt. */
  #navManoeverkarte {
    bottom: var(--infohoehe, 60px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--a2);
    border-bottom: 0;
    box-shadow: none;
  }
  #navManoeverkarte .navmanoevertext span {
    -webkit-line-clamp: 4;
  }
  /* Spalte: das X links, Ankunft, Rest und Strasse rechts davon
     untereinander (seit dem X vom 15.9.2026 abends ein Raster statt einer
     Flex-Spalte, sonst stuende das X ueber der Ankunft). */
  #navInfoZeile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--a3);
    row-gap: 2px;
    align-items: center;
  }
  /* Umbrechen statt ueberlaufen. Die Spalte ist 220 px schmal, und
     «encore environ 70,0 km» ist breiter: gemessen am 20.9.2026 reichten
     die Buchstaben bis 243 px, also 7 px unter den Tempo-Kreis (ab 236).
     Im Hochformat bleibt nowrap — dort ist die Zeile breit, und ein
     Umbruch machte sie nur hoeher. Bewacht von
     pruefung/nav-querformat.js. */
  #navInfoZeile > span {
    grid-column: 2;
    white-space: normal;
  }
  #navBeendenX {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  #navStrasse {
    flex: 0 0 auto;
    max-width: 100%;
    text-align: left;
  }
  /* Rueckfrage mittig ueber der Kartenflaeche rechts, nicht ueber der
     Spaltengrenze. */
  #navBeendenFrage,
  #navZielDialog {
    left: calc(var(--navspalte) + (100% - var(--navspalte)) / 2);
  }
  /* Quer steht die Platte in der Spalte links, oben ist Karte. */
  #navZielDialog {
    top: calc(var(--a3) + env(safe-area-inset-top));
    max-height: calc(100% - 2 * var(--a3) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  #navMenueKnopf,
  #navRechtsOben {
    top: calc(var(--a3) + env(safe-area-inset-top));
  }
  #navMenueKnopf,
  #navLinksUnten {
    left: var(--a4);
  }
  #navLinksUnten,
  #navKarteKnoepfe {
    bottom: calc(28px + env(safe-area-inset-bottom));
  }
  .navkartenquelle {
    bottom: calc(4px + env(safe-area-inset-bottom));
  }
  #navKarteBanner {
    bottom: calc(116px + env(safe-area-inset-bottom));
  }
  /* Neben dem Menueknopf wie im Hochformat. Ein Drittel von 390 px waeren
     130 px, darin passt nicht einmal «Anhalten» samt Kartenwahl; das Menue
     darf hier die Hoehe der Kartenflaeche nutzen und scrollt. Rechts davon
     bleibt die Karte frei. */
  #navMenue {
    left: 76px;
    top: calc(var(--a3) + env(safe-area-inset-top));
    max-height: calc(100% - 2 * var(--a3) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  /* Blatt «Wohin?» im Querformat: die linke Spalte, immer ganz offen. Die
     Stufen wirken hier nicht, der Griff hat darum nichts zu tun. Die
     Knoepfe liegen in der Karte rechts und stehen wieder unten. */
  .navblatt,
  .navblatt[data-stufe] {
    top: 0;
    right: auto;
    width: var(--navspalte);
    height: auto;
    border-radius: 0;
    border-right: 1px solid var(--linie);
    box-shadow: none;
    padding-top: env(safe-area-inset-top);
    padding-right: 0;
  }
  .navblattgriff {
    display: none;
  }
  .navblattinhalt {
    padding-top: var(--a3);
  }
  /* «Zuletzt geplant» in der 220 px schmalen Spalte: in einer Zeile
     schnitt die Spalte den Knopf «Laden» ab, und fuer das Ziel blieb kein
     Platz (Foto 15.9.2026, 844x390). Der Titel steht darum allein oben,
     Ziel und Knopf teilen sich die zweite Zeile. */
  #navBlatt .navseite-zuletztzeile {
    flex-wrap: wrap;
  }
  #navBlatt .navseite-zuletzttitel {
    flex-basis: 100%;
  }
  #navAnsicht.nav-bereit #navLinksUnten,
  #navAnsicht.nav-bereit #navKarteKnoepfe {
    bottom: calc(28px + env(safe-area-inset-bottom));
  }
  #navAnsicht.nav-bereit .navkartenquelle {
    bottom: calc(4px + env(safe-area-inset-bottom));
  }
  #navAnsicht.nav-bereit #navKarteBanner {
    bottom: calc(116px + env(safe-area-inset-bottom));
  }
}

/* ── Positionsmarke auf der Karte ──────────────────────────────────────────
   Derselbe CSS-Dreieck-Ansatz wie die Manoeverkarte, klein und gedreht nach
   dem gerechneten Kurs (navigator.js) — die einzige sichtbare Fahrtrichtung,
   solange die Karte selbst nordorientiert bleibt (siehe oben). */
/* Nadel fuer den ersten Treffer der Ortssuche (navigator.js,
   trefferZeigen): ein roter Punkt mit weissem Rand, ohne Zierzeichen. */
.navtreffer {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rot);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  pointer-events: none;
}
.navmarker {
  width: 26px;
  height: 26px;
  position: relative;
}

/* ── Fester Anker (Smooth-Follow, 7.9.2026) ────────────────────────────────
   Im Follow-Modus (MapLibre-Pfad) STEHT dieses Dreieck fest auf dem
   Bildschirm — die Karte gleitet darunter durch (navigator.js' Kamera-
   Schleife). Derselbe Umriss wie .navmarker (::after-Dreieck, oben), aber
   selbst positioniert statt von einer Kartenbibliothek verwaltet: die
   ID-Regel ueberschreibt position:relative mit position:absolute (hoehere
   Spezifitaet als die Klasse). Pixelposition und Drehung kommen als EIN
   transform von navigator.js (translate fuer den Ankerpunkt, rotate fuer
   den Kurs). pointer-events:none — ein Drag auf der Karte darf nicht am
   Pfeil selbst haengen bleiben. */
#navAnkerPfeil {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  pointer-events: none;
}
.navmarker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: -12px 0 0 -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 15px solid var(--rot);
}

/* ── Nachtansicht — NUR innerhalb des Navigators ───────────────────────────
   Der Markenentscheid "kein Dunkelmodus" gilt fuer den Rest der Seite
   unveraendert weiter (CLAUDE.md); das hier ist Blendschutz in einer
   Ausnahme, keine Gestaltungsvariante. Eigene, lokale Variablen — nichts
   ausserhalb von .nav-nacht liest sie. Kachel-Filter statt eigener
   Dunkelkarten-Quelle: es gibt keine selbstbetriebene (Spec 3, bewusste
   Begrenzung 1) — gilt seit der Fix-Welle 7.9.2026 nur noch fuer den
   Leaflet-Rueckfall unten; MapLibre dunkelt seither ueber Raster-Paint-
   Eigenschaften ab (siehe naechster Kommentar). */
.nav-nacht {
  --papier: #15130f;
  --flaeche: #1f1c17;
  /* 15.9.2026 nachgetragen: fehlte, und das X der Infozeile (.navx) lag
     bei Nacht als heller Strich auf hellem --vertieft — unsichtbar. */
  --vertieft: #2a2620;
  --tinte: #ece6da;
  --gedaempft: #a49a89;
  --linie: rgba(236, 230, 218, 0.16);
  --linie-zart: rgba(236, 230, 218, 0.1);
  /* 25.9.2026 nachgetragen: der gewaehlte Chip (.chip.an) stand nachts
     dunkelrot auf dunkelrot, weil beide Werte fuer den hellen Grund
     gedacht sind. Gefunden auf dem Nachtfoto der Farbprobe. */
  --rot-schwach: rgba(193, 39, 45, 0.22);
  --rot-dunkel: #f3a3a6;
}
.nav-nacht .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.8);
}
/* Fix-Welle 7.9.2026 (Michaels erste echte Fahrt): hier stand bis dahin
   dieselbe Filter-Regel wie oben, auch fuer .maplibregl-canvas — auf dem
   iPhone blieb die Karte damit bei Nacht-AN hell, obwohl Klasse,
   aria-pressed und die nav-nacht-Umschaltung selbst nachweislich griffen
   (unter Chromium UND WebKit gemessen). Ursache: iOS Safari laesst
   CSS-Filter auf 3D-transformierten Ebenen fallen, und MapLibres Canvas
   sitzt in genau so einem Transform-Container — der Filter wurde auf dem
   iPhone schlicht nie gezeichnet. Die Abdunklung sitzt seither in
   src/navigator.js (karteMlNachtAnwenden(), Raster-Paint-Eigenschaften
   statt CSS), wirkungsvoll unabhaengig von jeder Transform-Kette. Diese
   Regel entfaellt darum ersatzlos; der Positionspfeil (.navmarker, ein
   DOM-Element ueber dem Canvas) war davon nie betroffen. */

@media (prefers-reduced-motion: reduce) {
  .navpfeil {
    transition: none !important;
  }
}

/* ── Übernachtung am Etappenziel ────────────────────────────────────────
   Bis zum 9.9.2026 war das Fliesstext mit einem Textlink am Ende. Wer
   abends ein Dach sucht, soll auf einen Blick sehen WO und für WELCHE
   Nacht — und der Weg dorthin soll ein Knopf sein, kein Wort im Satz. */
.nachtkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--a2);
  margin-bottom: var(--a2);
}
.nachtkopf b {
  color: var(--tinte);
  font-size: 1.02rem;
}
.nachtwann {
  color: var(--gedaempft);
  font-size: 0.88rem;
}
.nachtknopf {
  min-height: 42px;
  font-size: 14px;
  width: 100%;
}

/* Der Werbemerker. Klein, aber lesbar — eine Kennzeichnung, die man suchen
   muss, ist keine. Er sitzt IM Knopf, damit er beim Umbruch nicht von ihm
   wegwandert. */
.werbemerker {
  display: inline-block;
  margin-left: var(--a2);
  padding: 0.08rem 0.36rem;
  border: 1px solid var(--linie);
  border-radius: 3px;
  background: var(--vertieft);
  color: var(--gedaempft);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nachtpartner {
  margin: var(--a2) 0 0;
  color: var(--gedaempft);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* ── Die Bildmarke im Aufmacher ──────────────────────────────────────────
   Neben der Schlagzeile, nicht darüber: die Wortmarke sitzt in der
   Kopfzeile, und zwei Marken übereinander im selben Blickfeld schwächen
   beide. Nebeneinander liest sich das eine als Name, das andere als Bild.

   Unter 620 px rückt sie über den Text und wird kleiner: auf dem Handy
   steht die Schlagzeile sonst in einer Spalte von zwei Wörtern. */
.aufmachermitmarke {
  display: flex;
  align-items: center;
  gap: var(--a6, 24px);
}
.aufmachermitmarke > div {
  min-width: 0;
}
.marke-aufmacher,
.marke-gross {
  flex: 0 0 auto;
  border-radius: 50%;
}

@media (max-width: 620px) {
  .aufmachermitmarke {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--a4);
  }
  .marke-aufmacher {
    width: 84px;
    height: 84px;
  }
  .marke-gross {
    width: 120px;
    height: 120px;
  }
}

/* ── Die beiden Patch-Entwürfe ───────────────────────────────────────────
   Zwei Spalten, unter 620 px eine. Die Bilder sind quadratisch und tragen
   width/height im Markup, damit die Seite beim Laden nicht springt. */
.entwuerfe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a6, 32px);
}
.entwuerfe figure {
  margin: 0;
}
.entwuerfe img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
  background: var(--flaeche);
}
.entwuerfe figcaption {
  margin-top: var(--a3);
  font-size: 0.92rem;
  line-height: 1.5;
}
.entwuerfe figcaption b {
  display: block;
  color: var(--tinte);
}
.entwuerfe figcaption span {
  color: var(--gedaempft);
}

@media (max-width: 620px) {
  .entwuerfe {
    grid-template-columns: 1fr;
    gap: var(--a5, 24px);
  }
}

/* ── Das Tourfoto auf der Über-uns-Seite ──────────────────────────────────
   Ein Band über die volle Spaltenbreite. Breite und Höhe stehen im Markup,
   damit beim Laden nichts springt; hier wird nur noch skaliert. */
.tourbild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius, 6px);
}

/* ── Der Planer arbeitet ──────────────────────────────────────────────

   Die Regeln hier waren immer richtig. Nachgemessen am 13.9.2026 (TODO 11b):
   die Messung vom 11.9.2026 «alle vier Zustaende gleich» kam aus dem
   eingebauten Browser-Fenster, das verborgen lief und fuer den bestehenden
   Knoten einen eingefrorenen Stil zurueckgab. Echt falsch war etwas
   anderes: vier Fehleraufrufe in planer.js gaben kein false mit und
   landeten darum hier, im grauen Fortschrittsstil.
   pruefung/meldung.js fragt Stil UND Bildschirmpixel.
   Zwei Zustaende, die es bis zum 11.9.2026 nicht gab: die Meldung «wird
   gerechnet» trug den Fehlerstil, und am Knopf war gar nichts zu sehen.
   Beides gefunden vom UI/UX-Audit. */
.meldung.arbeitet {
  border-color: rgba(31, 27, 24, 0.24);
  background: var(--vertieft);
  color: var(--gedaempft);
}

/* Der Knopf bleibt bedienbar und zeigt, dass er laeuft. Kein Blinken:
   prefers-reduced-motion gilt auch hier, und ein ruhiges Abdunkeln
   sagt dasselbe. */
.knopf[aria-busy="true"] {
  opacity: 0.72;
  cursor: progress;
}

/* ── Der mit den Pfeiltasten gewaehlte Treffer ────────────────────────
   Ohne sichtbare Hervorhebung waere die Tastaturbedienung nur fuer einen
   Screenreader da - wer sieht und trotzdem die Tastatur benutzt, saehe
   nichts. Beides gehoert zusammen. */
.treffer button[aria-selected="true"] {
  background: var(--vertieft);
  outline: 2px solid var(--rot);
  outline-offset: -2px;
}

/* ── Der Kurzlink einer geteilten Fahrt ───────────────────────────────
   Er steht sichtbar in der Knopfreihe, nicht hinter einem Kopierknopf
   allein: wer ihn abtippen oder von Hand markieren will, soll ihn sehen.
   Bis zum 12.9.2026 stand dort nur das Wort «geteilt», und die
   oeffentliche Seite war fuer niemanden erreichbar. */
.teillink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.teillink a {
  /* Eine 16-Zeichen-Kennung bricht sonst die Knopfreihe auf dem Handy
     auseinander. Umbrechen darf sie, ueberlaufen nicht. */
  overflow-wrap: anywhere;
  color: var(--rot);
}

/* ── Tourenlink für Teilnehmer auf der Kontoseite (Aufgabe 6) ──────────
   Der Kasten klappt unter der Ausfahrt auf, in voller Breite: Datumsfeld
   und Adresse passten nicht in die Knopfreihe, schon gar nicht auf dem
   Handy. */
.tlanlegen {
  margin-top: var(--a3);
  padding: var(--a3);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--vertieft);
}
.tlanlegen .feld {
  max-width: 22rem;
  margin-bottom: var(--a3);
}
.tlanlegen .knopfreihe {
  margin: 0;
}
.tlanlegen .meldung {
  margin: var(--a3) 0 0;
}
.tladresse {
  margin-top: var(--a3);
}
.tladresse input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  min-height: 48px;
  padding: 0 var(--a3);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--flaeche);
  color: var(--tinte);
}
.tladresse .knopfreihe {
  margin: var(--a2) 0 0;
}
.kontoknoepfe a.teillink {
  overflow-wrap: anywhere;
  color: var(--rot);
}

/* ── Druck ─────────────────────────────────────────────────────────────────
   Das Roadbook zum Einstecken.

   Bewusst eine Druckansicht statt einer PDF-Bibliothek: sie funktioniert auf
   jedem Geraet, haelt die Content-Security-Policy eng und liefert ueber «Als
   PDF sichern» dieselbe Datei — ohne 300 KB Fremdcode, der gepflegt werden
   muesste.

   Fuer die Zielgruppe ist das Blatt oft wichtiger als jede App: es
   funktioniert bei Regen, bei leerem Akku und mit Handschuhen.
   ------------------------------------------------------------------------ */

@media print {
  /* Alles weg, was auf Papier nichts verloren hat. */
  .banner,
  .kopf,
  .fuss,
  .skip,
  .kartenknoepfe,
  .filterband,
  .knopfreihe,
  .schalter,
  .fahrzeugwahl,
  .planzeile,
  .meldung,
  .nachtnote,
  #tourKnoepfe,
  .leaflet-control-container,
  /* Bedienoberflaeche. Sie stand am 2.9.2026 auf dem Ausdruck: die Frage
     "Wohin soll die Ausfahrt gehen?", die Anleitung zum Eintippen, "Oder
     fertige Tour waehlen", der Hinweis zum Kartentipp und die Meldung ueber
     gespeicherte Kartenausschnitte. Auf Papier ist nichts davon bedienbar
     und alles davon Ballast. */
  .suchband,
  .mapnote,
  .planknoepfe,
  .leerhinweis,
  .mapchip,
  #offlineNote,
  /* Das Kreuz zum Entfernen eines Wegpunkts: auf Papier nicht bedienbar. */
  .wpliste button {
    display: none !important;
  }

  /* Auf Papier tauschen die beiden Karten die Rollen: die Bildschirmkarte
     mit ihren Bedienelementen verschwindet, die vorbereitete tritt an ihre
     Stelle. Sie steht dann im Textfluss statt daneben. */
  .mapbox {
    display: none !important;
  }
  .druckkarte {
    /* «relative», nicht «static»: Leaflet positioniert Kacheln und
       Linienebene absolut INNERHALB des Kartenfelds. Nimmt man dem Feld
       seine Positionierung, beziehen sie sich auf den naechsten
       positionierten Vorfahren, und alles sitzt um einen festen Betrag
       daneben — am 4.9.2026 ragte die Route dadurch zehn Pixel oben heraus.
       Aus dem Sichtfeld geholt wird das Feld hier ueber «left», nicht ueber
       die Positionsart. */
    position: relative !important;
    left: auto !important;
    top: auto !important;
    /* Feste Breite statt 100 %: das Feld wurde am Bildschirm mit genau
       diesen Massen gezeichnet, und Leaflet hat den Ausschnitt dafuer
       gerechnet. Wuerde es hier gedehnt oder gestaucht, saesse der
       Ausschnitt daneben — und auf einem Handy waeren 100 % nicht die
       Blattbreite, sondern 390 Pixel. 688 px sind bei 96 dpi genau A4 hoch
       minus 14 mm Rand je Seite. */
    width: 688px !important;
    max-width: none !important;
    height: 85mm !important;
    border: 0.4pt solid #999;
    break-inside: avoid;
    margin-bottom: 4mm;
  }

  /* Umgekehrt: der Kopf, den es nur auf Papier gibt. */
  .druckkopf {
    display: block !important;
    margin-bottom: 4mm;
  }
  .druckkopf .druckstrecke {
    font-size: 19pt;
    margin: 0 0 1mm;
  }
  .druckkopf p {
    margin: 0;
    font-size: 9.5pt;
    color: #444;
  }

  @page {
    size: A4 portrait;
    margin: 16mm 14mm;
  }

  html,
  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  .wrap {
    max-width: none;
    padding: 0;
  }

  .abschnitt,
  .aufmacher {
    padding: 0;
    background: none;
    border: 0;
  }

  h1 {
    font-size: 20pt;
    margin-bottom: 2mm;
  }
  h2 {
    font-size: 13pt;
  }

  /* Karten und Kaesten flach: Schatten und Rahmen kosten nur Toner. */
  .kasten,
  .etappe,
  .nachtkasten,
  .tourwerte,
  .hoehenprofil {
    background: none;
    border: 0;
    border-top: 0.4pt solid #999;
    border-radius: 0;
    padding: 3mm 0 0;
    box-shadow: none;
    /* Eine Etappe soll nicht ueber den Seitenrand zerrissen werden. */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .etappen {
    gap: 5mm;
  }

  .werte {
    display: flex;
    gap: 10mm;
    text-align: left;
  }
  .werte b {
    font-size: 14pt;
  }

  /* Karte und Hoehenprofil mitdrucken — sie sind der halbe Sinn des Blatts. */
  .mapbox {
    border: 0.4pt solid #999;
    break-inside: avoid;
  }
  #karte,
  #tourKarte {
    height: 85mm !important;
    min-height: 0 !important;
  }
  .profil canvas {
    height: 40mm !important;
  }

  /* Adressen ausschreiben: auf Papier nuetzt ein Link nichts, dessen Ziel
     man nicht sieht. */
  .nachtkasten a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }

  /* Herkunft aufs Blatt: wer es unterwegs findet, soll wissen woher. */
  .etappen::after {
    content: "mofamaps.ch  ·  Karten © swisstopo  ·  Routen über OpenStreetMap";
    display: block;
    margin-top: 6mm;
    padding-top: 2mm;
    border-top: 0.4pt solid #999;
    font-size: 8pt;
    color: #555;
  }
}

/* ── Redaktionsbereich ─────────────────────────────────────────────────────
   Ein Arbeitsbereich, keine Schaufensterseite: dichter gesetzt als der Rest,
   dafuer ohne Zierrat. Die Palette bleibt dieselbe — es ist dieselbe Marke,
   auch wenn sie nur eine Person sieht.

   Getrennte Datei, weil sie auf genau einer Seite gebraucht wird und den
   Rest des Stylesheets sonst nur laenger macht. */

.redreiter {
  display: flex;
  gap: var(--a2);
  margin-bottom: var(--a4);
  flex-wrap: wrap;
}

.kastenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a3);
  flex-wrap: wrap;
  margin-bottom: var(--a3);
}
.kastenkopf h2 {
  margin: 0;
}

.redliste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.redliste > li {
  border-bottom: 1px solid var(--linie-zart);
  padding: var(--a3) 0;
}
.redliste > li:last-child {
  border-bottom: 0;
}

.redzeile {
  display: flex;
  align-items: center;
  gap: var(--a2) var(--a3);
  flex-wrap: wrap;
}
.redzeile > b {
  flex: 1 1 12ch;
}
/* Die Knoepfe rutschen auf dem Handy unter den Namen, statt ihn auf zwei
   Zeichen zu quetschen. */
.redzeile .knopf {
  min-height: 40px;
  padding: 0 var(--a3);
  font-size: 14px;
}

/* Zustandsmarken. Der Unterschied zwischen «selbst geprueft» und «kein
   aktueller Stand» muss auch hier sichtbar sein — wer im Redaktionsbereich
   die Uebersicht verliert, traegt draussen Falsches ein. */
.redmarke {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--r-pille);
  background: var(--vertieft);
  color: var(--gedaempft);
}
.redmarke.warn {
  background: var(--rot-schwach);
  color: var(--rot-dunkel);
}
.redmarke.amtlich,
.redmarke.redaktion {
  background: rgba(47, 125, 79, 0.12);
  color: var(--gut);
  font-weight: 600;
}

/* ── Formular ─────────────────────────────────────────────────────────── */

.feldreihe {
  display: flex;
  gap: var(--a3);
  flex-wrap: wrap;
}
.feldreihe > .feld {
  flex: 1 1 14ch;
}
.feldreihe > .feld.schmal {
  flex: 0 1 9ch;
}

.feld select,
.feld textarea {
  width: 100%;
  font: inherit;
  /* Wie bei den Eingabefeldern: unter 16 px zoomt iOS beim Antippen hinein. */
  font-size: 16px;
  padding: var(--a2) var(--a3);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--papier);
  color: var(--tinte);
}
.feld select {
  min-height: 48px;
}
.feld textarea {
  line-height: 1.5;
  resize: vertical;
}
.feld select:focus,
.feld textarea:focus {
  outline: 2px solid var(--rot);
  outline-offset: 1px;
  background: #fff;
}

fieldset.feld {
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: var(--a3);
}
fieldset.feld legend {
  font-size: 14px;
  font-weight: 600;
  padding: 0 6px;
}

.ankreuzreihe {
  display: flex;
  gap: var(--a3);
  flex-wrap: wrap;
}
.ankreuz {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Volle 44 px Trefferflaeche: ein Kaestchen von 16 px trifft auf dem Handy
     niemand zuverlaessig. */
  min-height: 44px;
  font-size: 15px;
}
.ankreuz input {
  width: 20px;
  height: 20px;
  min-height: 0;
}

.etappe {
  margin-bottom: var(--a4);
  background: var(--vertieft);
}
.unterblock {
  margin-top: var(--a3);
  padding-top: var(--a3);
  border-top: 1px solid var(--linie-zart);
}
.unterblock > b {
  display: block;
  margin-bottom: 6px;
}
.unterblock input,
.unterblock textarea {
  margin-top: 6px;
}

/* Loeschen sieht anders aus als Speichern. Beide gleich zu gestalten waere
   die Einladung, im Vorbeigehen achtzehn Touren zu verlieren. */
.knopf.gefahr {
  border-color: var(--rot);
  color: var(--rot-dunkel);
  background: transparent;
}
.knopf.gefahr:hover {
  background: var(--rot-schwach);
}

.aufmacher.schmal {
  padding-bottom: var(--a4);
}

@media (max-width: 620px) {
  .feldreihe > .feld,
  .feldreihe > .feld.schmal {
    flex: 1 1 100%;
  }
}

/* ── Nachrichten aus dem Kontaktformular ─────────────────────────────────
   Der Text stammt von aussen und kann alles sein: eine Zeile, dreissig
   Zeilen, oder ein Wort von zweihundert Zeichen ohne Leerstelle. Darum
   pre-wrap für die Absätze und ein Umbruch, der auch mitten im Wort greift —
   sonst schiebt eine einzige Zeile die ganze Liste in die Breite. */

.rednachricht {
  margin: var(--a3) 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.redklein {
  font-size: 13px;
  color: var(--gedaempft);
}

.redknoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2);
}

/* ── Verwaltung ──────────────────────────────────────────────────────────
   Teilt die Liste und die Knopfreihen mit der Redaktion; hier stehen nur
   die Ergänzungen. */

.vwsuche {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--a3);
  margin-bottom: var(--a4);
}
.vwsuche .feld {
  flex: 1 1 18rem;
  margin-bottom: 0;
}
.vwsuche .knopfreihe {
  margin-bottom: 0;
}

.vwmarken {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Der Zustand als Form, nicht nur als Wort: was Aufmerksamkeit braucht,
   soll auf einen Blick auffallen. */
.vwmarke {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--vertieft);
  color: var(--gedaempft);
  white-space: nowrap;
}
.vw-lebenszeit {
  background: rgba(47, 125, 79, 0.12);
  color: var(--gut);
}
.vw-abo {
  background: rgba(47, 125, 79, 0.08);
  color: var(--gut);
}
/* Gekuendigt, aber noch laufend: der Kunde zahlt nicht mehr und hat noch
   Zugang. Weder gruen noch rot — beides waere gelogen. */
.vw-gekuendigt {
  background: rgba(193, 39, 45, 0.08);
  color: var(--gedaempft);
}
.vw-abgelaufen,
.vw-entzogen,
.vw-warn {
  background: var(--rot-schwach);
  color: var(--rot);
}
.vw-recht {
  background: rgba(31, 27, 24, 0.08);
  color: var(--tinte);
}

/* Warum jemand einen Lebenszeit-Zugang hat. */
.vwnotiz {
  margin: var(--a2) 0 var(--a3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gedaempft);
  overflow-wrap: anywhere;
}

/* ── Inhalt (Redaktionsmaske Tourinhalt, 30.9.2026) ──────────────────────
   Rahmen rundum, keine Seitenstreifen. Auf dem Handy einspaltig, ab 860 px
   stehen die drei Sprachen nebeneinander und das Bild neben seinen
   Feldern. */

.redinhalt {
  margin-top: var(--a5);
}
.redinhalt-etappe {
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: var(--a3);
  margin: var(--a3) 0;
  background: var(--flaeche);
}
.redinhalt-etappe > summary {
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.redinhalt-etappe h3,
.redinhalt-etappe h4 {
  margin: var(--a4) 0 var(--a2);
}
.redinhalt-etappe > h3:first-child {
  margin-top: 0;
}
.redinhalt-sprachen {
  display: grid;
  gap: var(--a2);
}
.redinhalt-sprachen .feld input,
.redinhalt-sprachen .feld textarea {
  width: 100%;
  box-sizing: border-box;
}
.redinhalt-zaehler {
  display: block;
  margin-top: var(--a1);
  color: var(--gedaempft);
}
.redinhalt-zaehler:empty {
  display: none;
}
.feldreihe > .redinhalt-platz {
  flex: 0 1 18ch;
  min-width: 14ch;
}
.redinhalt-zaehler.zuviel {
  color: var(--rot);
  font-weight: 600;
}
.redinhalt-ort,
.redinhalt-bild {
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: var(--a3);
  margin: var(--a3) 0;
  background: var(--papier);
}
.redinhalt-lage {
  position: relative;
  min-width: 0;
}
.redinhalt-lage input {
  width: 100%;
  box-sizing: border-box;
}
.redinhalt-lagetext {
  display: block;
  margin-top: var(--a1);
}
.redinhalt-treffer {
  list-style: none;
  margin: var(--a1) 0 0;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--flaeche);
  max-height: 240px;
  overflow: auto;
}
.redinhalt-treffer > li {
  padding: 0;
}
.redinhalt-treffer > li.klein {
  padding: var(--a2) var(--a3);
}
.redinhalt-treffer .knopf {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border-radius: 0;
}
.redinhalt-knoepfe {
  display: flex;
  gap: var(--a2);
  flex-wrap: wrap;
  margin-top: var(--a2);
}
.redinhalt-bild {
  display: grid;
  gap: var(--a3);
}
.redinhalt-bild img {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--r);
}
.redinhalt-bildfelder {
  min-width: 0;
}
/* Stärker als der Fokusrahmen der Felder: das abgewiesene Feld hat
   nach dem Sprung den Fokus und soll trotzdem rot bleiben. */
.redinhalt .feld .redinhalt-fehler,
.redinhalt .feld .redinhalt-fehler:focus,
.redinhalt .redinhalt-fehler {
  border: 2px solid var(--rot);
  outline: 3px solid var(--rot-schwach);
  outline-offset: 0;
  background: #fff5f4;
}
.redinhalt-fehlertext {
  display: block;
  margin-top: var(--a1);
  color: var(--rot-dunkel);
  font-weight: 600;
  font-size: 14px;
}
.redinhalt-meldung {
  margin: var(--a2) 0 0;
  font-weight: 600;
}
.redinhalt-meldung.gut {
  color: var(--gut);
}
.redinhalt-meldung.schlecht {
  color: var(--rot-dunkel);
}

@media (min-width: 860px) {
  .redinhalt-sprachen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .redinhalt-bild {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
  }
}