/* Ortskarte auf den Ortsseiten.
   Der Uebersichtsplan ist selbst gezeichnet und laedt nichts nach. Erst der
   Klick auf den Knopf holt die Karte von OpenStreetMap. */

.svc-karte{margin:1.6rem 0 2rem;padding:0}
.svc-karte-rahmen{position:relative;border-radius:var(--r-md);overflow:hidden;
  background:var(--base-2);border:1px solid var(--grey-light)}
.svc-karte-bild{display:block;width:100%;height:auto}

/* Farben des Plans, aus den Marken-Variablen */
.svc-karte .k-grund{fill:var(--base-2)}
.svc-karte .k-ort{fill:var(--grey)}
.svc-karte .k-weg{stroke:var(--brown-light);stroke-width:1.5;stroke-dasharray:5 4;opacity:.75}
.svc-karte .k-sitz{fill:var(--brown)}
.svc-karte .k-hier-hof{fill:var(--green);opacity:.28}
.svc-karte .k-hier{fill:var(--green-deep)}
.svc-karte .k-nord path,.svc-karte .k-massstab path{fill:var(--ink);stroke:var(--ink);
  stroke-width:1;opacity:.55}
.svc-karte .k-massstab path{fill:none}
.svc-karte text{font-family:var(--font-body);fill:var(--text)}
.svc-karte .k-beschr-hier{font-size:16px;font-weight:700;fill:var(--ink)}
.svc-karte .k-beschr-sitz{font-size:13px;font-weight:600;fill:var(--brown)}
.svc-karte .k-weg-text{font-size:12px;fill:var(--text)}
.svc-karte .k-nord-text{font-size:12px;font-weight:700;fill:var(--ink);opacity:.55}
.svc-karte .k-massstab-text{font-size:11px;opacity:.75}

/* Der Ladebereich steht UNTER dem Plan, nicht darueber.
   Ein ueberlagertes Feld verdeckte je nach Lage genau den Ort, um den es auf
   der Seite geht - bei Bad Saarow war der Markierungspunkt nicht mehr zu
   sehen. */
.svc-karte-laden{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin-top:.7rem;padding:.85rem 1rem;border-radius:var(--r-md);
  background:var(--base-2);border:1px solid var(--grey-light)}
/* Zwei Klassen tief, weil .svc-article p dieselbe Spezifitaet hat und
   spaeter in der Kaskade steht: dieses Stylesheet wird vor dem Inline-Block
   der Seite eingebunden. Sonst gewinnt dessen margin-bottom. */
.svc-karte .svc-karte-laden p{margin:0;flex:1 1 20ch;font-size:.78rem;
  line-height:1.45;color:var(--text)}
.svc-karte-laden .btn{flex:0 0 auto}

.svc-karte iframe{display:block;width:100%;height:380px;border:0}
.svc-karte figcaption{margin-top:.6rem;font-size:.82rem;line-height:1.5;color:var(--text)}
.svc-karte figcaption a{color:var(--brown);text-decoration:underline}

@media (max-width:600px){
  .svc-karte iframe{height:300px}
  .svc-karte-laden{flex-direction:column;align-items:stretch;text-align:center}
  /* flex-basis gilt in der Spaltenrichtung fuer die HOEHE. Die 20ch, die
     oben die Mindestbreite neben dem Knopf sichern, wurden hier zu 149 px
     Mindesthoehe fuer drei Zeilen Text - ein leeres Feld unter dem Hinweis. */
  .svc-karte .svc-karte-laden p{flex:0 1 auto;font-size:.74rem}
  /* Der Plan skaliert auf rund die halbe Breite - seine Schrift also auch.
     Ohne diese Anhebung steht die Beschriftung auf dem Handy bei etwa 8 px. */
  .svc-karte .k-beschr-hier{font-size:23px}
  .svc-karte .k-beschr-sitz{font-size:19px}
  .svc-karte .k-weg-text{font-size:18px}
  .svc-karte .k-nord-text{font-size:17px}
  .svc-karte .k-massstab-text{font-size:16px}
  .svc-karte .k-ort{r:4}
}