/* 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;
}

: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;
  --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;
}

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;
}
.marke.klein {
  font-size: 14px;
  padding: 7px 11px 6px;
}

/* ── 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;
  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);
}

.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 860 px wird das Menü aufklappbar ───────────────────────
   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: 859px) {
  .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 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;
  }

  .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;
}
.fusssprachen b {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.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);
  }
}

/* ── 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);
}

.knopf.schlicht {
  background: none;
  border-color: transparent;
  color: var(--gedaempft);
  padding: 0 var(--a3);
}
.knopf.schlicht:hover {
  background: var(--vertieft);
  color: var(--tinte);
}

.knopf.klein {
  min-height: 40px;
  padding: 0 var(--a4);
  font-size: 13.5px;
}

.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 ─────────────────────────────────────────────────────── */

.hinweis {
  border-left: 3px solid var(--warnung);
  background: rgba(154, 107, 18, 0.06);
  padding: var(--a4) var(--a5);
  border-radius: 0 var(--r) var(--r) 0;
  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);
  }
}

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

.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);
  }
}

/* ── 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);
}

/* ── 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);
}
.feld input:focus {
  outline: 2px solid var(--rot);
  outline-offset: 1px;
  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;
  border-left: 3px solid;
}
.meldung.schlecht {
  border-color: var(--rot);
  background: var(--rot-schwach);
  color: var(--tinte);
}
.meldung.gut {
  border-color: var(--gut);
  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;
}
/* 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;
  }
}

@media (min-width: 1080px) {
  .planzeile {
    grid-template-columns: 1fr auto 1fr auto;
  }
  #zwischenstopps,
  .planknoepfe {
    grid-column: auto;
  }
  /* Die Spalte verschwindet, solange es keinen Zwischenstopp gibt. */
  #zwischenstopps:empty {
    display: none;
  }

  /* 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;
  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 {
  outline: 2px solid var(--rot);
  outline-offset: 1px;
}

/* 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);
}
.treffer-leer {
  padding: var(--a3);
  font-size: 14px;
  color: var(--gedaempft);
}

.fahrzeugwahl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--a2);
  margin-top: var(--a4);
}
.fahrzeug {
  padding: var(--a3) var(--a2);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--flaeche);
  font: inherit;
  cursor: pointer;
  text-align: center;
  min-height: 56px;
  transition: 0.15s var(--uebergang);
}
.fahrzeug b {
  display: block;
  font-size: 14.5px;
}
.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);
  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);
}

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

.planlayout {
  display: grid;
  gap: var(--a5);
  grid-template-columns: 1fr;
}
@media (min-width: 1080px) {
  .planlayout {
    grid-template-columns: 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 ──────────────────────────────────────────────────────
   Touren als scanbare Zeilen statt als Kacheln — Vorbild ist der Fahrplan:
   wer eine Tour sucht, vergleicht Zahlen, und dafuer muessen sie
   untereinander stehen. */

.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;
}

.tourliste {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linie);
}
.tourzeile {
  display: flex;
  flex-direction: column;
  gap: var(--a3);
  padding: var(--a4) 0;
  border-bottom: 1px solid var(--linie);
  transition: background 0.15s var(--uebergang);
}
.tourzeile:hover {
  background: var(--flaeche);
}
.tourtext b {
  display: block;
  font-size: 18px;
  font-weight: 600;
}
.tourteaser {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: var(--lesetext);
  max-width: 68ch;
}

.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) {
  .tourzeile {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--a5);
  }
  .tourwerte-klein {
    flex: 0 0 auto;
  }
  .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);
}

/* 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;
}
.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);
}

/* 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);
}

/* 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);
}
.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;
}

/* ── 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 h1 {
    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: "toeffliroute.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%;
  }
}