/* === Nahweb · Karte, Fahrzeit-Finder und «Jerome hier» (Erklärungen: _werkzeuge/css-erklaert.md) === */

/* === r13 Nah «Wir kommen zu Ihnen» (README «Fahrzeiten») === */
.nah-karte { position: relative; overflow: hidden; border-radius: var(--radius-gross); background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten-gross); }
.nah-karte-papier { padding: 8px 6px 0; background-color: var(--papier); }
html:is(.bereit, .js-notfall, :not(.js)) .nah-karte-papier { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)' opacity='.1'/%3E%3C/svg%3E"); }
.strasse { width: 100%; height: auto; overflow: visible; }
.strasse-platz { aspect-ratio: 600 / 500; }
.strasse-platz > .strasse, .strasse-ersatz, .strasse-ersatz img { display: block; width: 100%; height: 100%; }
.js:not(.js-notfall) .strasse-platz:not(.ohne-svg) .strasse-ersatz { display: none; }
.strasse .s-strich { fill: none; stroke: var(--graphit); stroke-width: var(--strich); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.strasse .s-strasse { stroke-opacity: .82; }
.strasse .s-massstab { stroke-opacity: .7; }
.strasse .s-kreis { stroke-opacity: .7; stroke-width: 1.1px; }
.strasse .s-massstab-text { font: 600 12px/1 var(--text); fill: var(--stein); letter-spacing: .02em; }
.strasse .s-farbe { fill: var(--pinsel); }
.strasse .s-borste { fill: none; stroke-width: 1.1px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.strasse .s-borste-d { stroke: rgba(150, 34, 8, .32); }
.strasse .s-borste-h { stroke: rgba(255, 214, 196, .42); }
.strasse .s-franse { fill: none; stroke: var(--pinsel); stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-opacity: .85; }
.strasse .s-punkt { fill: var(--graphit); }
.strasse .s-name-handy { display: none; }
.strasse :is(.s-name, .s-name-handy) { font: 550 13.5px/1 var(--text); fill: var(--tinte-2); paint-order: stroke; stroke: var(--papier); stroke-width: 4px; stroke-linejoin: round; }
.strasse .s-rang-1 .s-name { font: 700 18px/1 var(--titel); fill: var(--tinte); letter-spacing: -.01em; }
.strasse .s-heim-punkt { fill: var(--orange); stroke: var(--papier); stroke-width: 3px; }
.strasse .s-heim-name { font: 700 18px/1 var(--titel); fill: var(--tinte); letter-spacing: -.01em; paint-order: stroke; stroke: var(--papier); stroke-width: 5px; stroke-linejoin: round; }
.strasse .s-zeit { font: 650 13px/1 var(--text); fill: var(--orange-text); letter-spacing: .01em; paint-order: stroke; stroke: var(--papier); stroke-width: 4px; }
.strasse .s-notiz { font-family: var(--notiz); font-weight: 560; font-size: 23px; fill: var(--rotstift); }
.strasse .s-pfeil { fill: none; stroke: var(--rotstift); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.strasse .ist-gewaehlt .s-punkt { fill: var(--tinte); stroke: var(--papier); stroke-width: 1.4px; }
.strasse .ist-gewaehlt :is(.s-name, .s-name-handy) { fill: var(--tinte); font-weight: 700; }
.strasse .ist-gewaehlt .s-kreis { stroke: var(--rotstift); stroke-opacity: 1; stroke-width: 1.8px; }
.strasse .s-tupfer { pointer-events: none; }
.strasse .weicht .s-name { visibility: hidden; }
.strasse .s-tupfer-farbe { fill: none; stroke: var(--pinsel); stroke-width: 10px; stroke-linecap: round; }
.strasse .s-tupfer .s-borste { stroke-width: 1px; }
@media (max-width: 599px) {
  .strasse .s-name { font-size: 20px; stroke-width: 5px; }
  .strasse .s-rang-1 .s-name, .strasse .s-heim-name { font-size: 26px; }
  .strasse .s-zeit { font-size: 26px; stroke-width: 6px; }
  .strasse .s-zeiten .s-zeit:first-child { transform: translateY(9px); }
  .strasse .s-massstab-text { font-size: 24px; }
  .strasse .s-notiz { font-size: 40px; transform: translateY(8px); }
  .strasse .s-rang-2:not(.ist-gewaehlt), .strasse .s-rang-2 .s-name { display: none; }
  .strasse .s-rang-2.ist-gewaehlt .s-name-handy, .strasse .s-neu.ist-gewaehlt .s-name { display: inline; font-size: 22px; font-weight: 700; fill: var(--tinte); stroke-width: 6px; }
  .strasse .s-tupfer { transform: scale(1.5); transform-box: fill-box; transform-origin: center; }
}
@media (max-width: 379px) {
  .strasse .s-zeit { font-size: 30px; }
  .strasse .s-zeiten .s-zeit:first-child { transform: translateY(13px); }
  .strasse .s-massstab-text { font-size: 28px; }
  .strasse .s-notiz { font-size: 42px; }
}

.nah-finder { padding: 18px 20px 10px; border-top: 1px solid var(--linie); }
.nah-titel { font-family: var(--titel); font-weight: 700; font-size: 23px; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.nah-satz { margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--tinte-2); }
.nah-suche { margin-top: 14px; }
.nah-label { display: block; margin-bottom: 7px; font-size: 15.5px; font-weight: 650; line-height: 1.3; }
.nah-label-zusatz { display: block; margin-top: 1px; font-size: 14px; font-weight: 500; color: var(--stein); }
.nah-zeile { display: flex; gap: 8px; }
.nah-zeile input {
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px;
  border: 1.5px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--papier);
  font-size: 17px; font-weight: 500; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dauer-hover) var(--ease-aus), background-color var(--dauer-hover) var(--ease-aus);
}
.nah-zeile input::placeholder { color: #8C8579; opacity: 1; }
.nah-zeile input::-webkit-calendar-picker-indicator { display: none !important; }
@media (hover: hover) { .nah-zeile input:hover { border-color: rgba(21, 19, 15, .38); } }
.nah-zeile input:focus { border-color: var(--tinte); background: var(--weiss); }
.nah-knopf { flex: none; min-width: 96px; height: 52px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--tinte); color: var(--papier); font-size: 16px; font-weight: 650; }
@media (hover: hover) { .nah-knopf:hover { background: #2C2924; } }
.nah-antwort { margin-top: 14px; font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.nah-antwort:empty { margin: 0; }
.nah-antwort strong { font-family: var(--titel); font-weight: 700; font-size: 1.3em; letter-spacing: -.015em; }
.nah-antwort a { font-weight: 600; white-space: nowrap; }
.nah-quelle { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--stein); }
.nah-quelle a { color: inherit; }
.nah-alle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15.5px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
@media (hover: hover) { .nah-alle:hover { color: var(--orange-text); } }
.nah-pfeil { flex: none; width: 16px; height: 16px; }
@media (min-width: 1024px) {
  .nah-finder { padding: 26px 30px 18px; }
  .nah-titel { font-size: 27px; }
  .nah-satz { margin-top: 6px; }
  .nah-suche { margin-top: 18px; }
  .nah-quelle { margin-top: 16px; }
}
.kaputt-fahrzeit .nah-suche { display: none !important; }
@media (max-width: 599px) {
  .nah-karte-papier { padding-top: 4px; }
  .nah-finder { padding-top: 16px; }
  .nah-suche { margin-top: 10px; }
  .nah-label { margin-bottom: 5px; }
  .nah-quelle { margin-top: 10px; }
}
@media (max-width: 359px) {
  .nah-finder { padding-inline: 18px; }
  .nah-knopf { min-width: 0; padding: 0 16px; }
}

@media (forced-colors: active) {
  .nah-karte { border-color: CanvasText; }
  .nah-karte svg * { forced-color-adjust: none; }
  .strasse :is(.s-strich, .s-pfeil) { stroke: CanvasText; }
  .strasse :is(.s-farbe, .s-heim-punkt) { fill: Highlight; }
  .strasse :is(.s-franse, .s-tupfer-farbe) { stroke: Highlight; }
  .strasse .s-borste { display: none; }
  .strasse .s-punkt, .strasse .ist-gewaehlt .s-punkt { fill: CanvasText; stroke: Canvas; }
  .strasse .ist-gewaehlt .s-kreis { stroke: CanvasText; }
  .strasse :is(.s-name, .s-name-handy, .s-heim-name, .s-zeit, .s-massstab-text) { fill: CanvasText !important; stroke: Canvas !important; paint-order: stroke; }
  .strasse .s-notiz { fill: CanvasText; }
  .strasse .s-heim-punkt { stroke: Canvas; }
  .nah-zeile input { border-color: ButtonText; }
  .nah-knopf { border: 2px solid ButtonText; }
}
@media print {
  .nah-suche, .nah-alle { display: none !important; }
  .nah-karte { box-shadow: none; border-color: #999999; break-inside: avoid; }
  .nah-karte-papier { background: none !important; }
  .strasse .s-farbe { fill: #BBBBBB; }
  .strasse :is(.s-borste, .s-franse, .s-tupfer) { display: none; }
  .strasse :is(.s-zeit, .s-notiz, .s-name, .s-heim-name) { fill: #000000; }
  .strasse :is(.s-pfeil, .ist-gewaehlt .s-kreis) { stroke: #000000; }
  .strasse .s-heim-punkt { fill: #000000; }
}
/* === Ende r13 Nah === */

/* === r13 Abschluss «Jerome hier» (README «Jerome hier») === */
.jerome { margin-top: 26px; max-width: 34rem; }
.jerome-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.jerome-bild { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--papier); color: var(--tinte); font: 700 15px/1 var(--titel); letter-spacing: .02em; }
.jerome-wer { font: 600 14px/1.35 var(--text); color: var(--nacht-text); }
.jerome-wer strong { display: block; font: 700 17px/1.3 var(--titel); letter-spacing: -.01em; color: var(--papier); }
.jerome-blasen { display: grid; gap: 8px; justify-items: start; padding-left: 56px; }
.jerome-blase { max-width: 100%; padding: 12px 18px 13px; border-radius: 20px; background: var(--papier); color: var(--tinte); font: 500 17px/1.45 var(--text); text-wrap: pretty; }
.jerome-blase:first-child { border-top-left-radius: 6px; }
.jerome .hat-name { font-weight: 700; }
.jerome-blase, .formular-titel { overflow-wrap: break-word; }
#h-anfrage[tabindex="-1"]:focus { outline: none; }
@media (max-width: 599px) {
  .jerome { margin-top: 14px; } .jerome-kopf { margin-bottom: 8px; } .jerome-bild { width: 40px; height: 40px; font-size: 14px; }
  .jerome-blasen { gap: 5px; padding-left: 0; } .jerome-blase { padding: 8px 14px 9px; font-size: 16px; line-height: 1.38; }
  .jerome + .kontakt-knoepfe { margin-top: 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .jerome-blase { transition: opacity 320ms var(--ease-aus), translate 420ms var(--ease-expo); }
  .js .jerome:not(.ist-da) .jerome-blase { opacity: 0; translate: 0 8px; }
  .js .jerome.ist-da .jerome-blase:nth-child(2) { transition-delay: 450ms; }
  .js .jerome.ist-da .jerome-blase:nth-child(3) { transition-delay: 900ms; }
  .js .jerome.ist-da .jerome-blase:nth-child(4) { transition-delay: 1350ms; }
  .springt .jerome .jerome-blase { transition-duration: 200ms !important; transition-delay: 0s !important; }
  .jerome.sofort .jerome-blase { transition: none !important; }
}
.js-notfall .jerome-blase { opacity: 1 !important; translate: none !important; }
@media (forced-colors: active) { .jerome-blase, .jerome-bild { border: 1px solid CanvasText; } }
@media print { .jerome-blase { opacity: 1 !important; translate: none !important; padding: 0; background: none; } .jerome-blasen { padding-left: 0; } }
/* === Ende r13 Abschluss === */