/* ============================================================
   motorradharz.de — eigenes Aussehen, nicht das Theme-Preset.
   Wird nur geladen, wenn diese Datei existiert (lib.php, Dateizeit als Cache-Marke).
   Vorlage fuer die uebrigen 77 Regionen: gleiche Bausteine, eigene Werte je Region.

   Woher die Farben kommen: Der Oberharz steht auf Tonschiefer und Grauwacke, und was
   hier tausend Jahre lang aus dem Berg kam, war Erz. Also Schiefer als Tiefe und das
   Messing der Grubenlampe als Signal — statt des Orange, das auf allen 43 Regio-Domains
   gleich aussieht.
   ============================================================ */

html[data-ms-theme] , :root {
  /* Struktur: gedaempftes Waldgruen. 7,3:1 auf Papier — die Zielgruppe ist 50+. */
  --mr-red:#3d5c46; --mr-red-dark:#2c4433; --mr-red-soft:#e3ece6;
  /* Signal: Grubenlicht-Messing. Dunkel genug, dass weisse Schrift darauf traegt. */
  --mr-2:#a5761f; --mr-2-dark:#7d5814; --mr-2-soft:#f7ecd8;
  --green:var(--mr-red); --green-d:var(--mr-red-dark); --green-soft:var(--mr-red-soft);
  --orange:var(--mr-2); --orange-d:var(--mr-2-dark); --orange-soft:var(--mr-2-soft);
  /* Papier waermer, Tinte in Richtung Schiefer statt neutralem Schwarz. */
  --paper:#faf8f5; --paper-2:#f1ede7; --card:#fffefc;
  --ink:#15171a; --ink-soft:#33383d; --muted:#6f7479;
  --line:#e4ded4; --line-2:#d2c9bb;
  --night:#15171a; --night-2:#1e2126;
}

/* ----- Kopfzeile: warmes Papier statt kaltem Weiss ----- */
.site-head{background:rgba(250,248,245,.92)}

/* ----- Hero: der Farbverlauf zieht nach Schiefer, nicht nach Blaugrau.
   Der Messingstrich unter dem Titel ist das Wiedererkennungszeichen der Seite. ----- */
.hero-media::after{background:linear-gradient(180deg,rgba(21,23,26,.08) 0%,rgba(21,23,26,.32) 44%,rgba(21,23,26,.88) 100%)}
.hero-rule{height:6px;width:112px}
.page-hero{border-bottom-width:6px}

/* Der Ortsname traegt den Titel, nicht die Taetigkeit: "Motorrad fahren" tritt zurueck,
   "IM HARZ" steht gross. Auf einer Regionsseite ist die Region die Nachricht. */
.hero-title{font-size:clamp(38px,6vw,86px);line-height:.94}
.hero-title span{font-size:clamp(58px,11.5vw,168px);line-height:.86;letter-spacing:-.012em;
  margin-top:.04em}

/* ----- Fliesstext etwas offener. Lange Kapitel, aeltere Augen. ----- */
.prose{font-size:20px;line-height:1.78}
.sec-b{font-size:20px;line-height:1.78}

/* ----- Abschnittsmarke: der Balken vor der Ueberschrift wird zum Schlaegel-und-Eisen-Winkel.
   Kein Bild, nur zwei geneigte Striche — das Zeichen des Bergbaus, reduziert. ----- */
.sectitle::before,.sec-h .sec-ic{background:var(--mr-red)}
.sec-h .sec-ic{border-radius:2px;transform:skewX(-8deg)}
.sec-h .sec-ic i{transform:skewX(8deg)}

/* ----- Zeichen im Text. Als Klasse am Absatz gesetzt: <p class="z-berg">…
   Bergbau = Schlaegel und Eisen. Sage = Besen (der, auf dem die Sachsen die fraenkischen
   Wachsoldaten verjagten — belegt in archiv/093 und archiv/101, nicht der aus dem
   Andenkenladen). Wasser = Wellenlinie fuer Teiche, Graeben und Talsperren. ----- */
.z-berg,.z-sage,.z-wasser{position:relative;padding-left:44px}
.z-berg::before,.z-sage::before,.z-wasser::before{
  content:"";position:absolute;left:0;top:.15em;width:28px;height:28px;
  background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.9}
/* Schlaegel und Eisen, gekreuzt */
.z-berg::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5761f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20 L18 6'/%3E%3Cpath d='M20 20 L6 6'/%3E%3Cpath d='M15 3 h6 v4 h-6z' fill='%23a5761f' stroke='none'/%3E%3Cpath d='M3 3 h6 v4 h-6z' fill='%23a5761f' stroke='none' transform='rotate(0)'/%3E%3C/svg%3E")}
/* Besen: Stiel und Bund */
.z-sage::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5761f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M17 3 L9 13'/%3E%3Cpath d='M11 11 L14 14'/%3E%3Cpath d='M9.5 12.5 L3 21'/%3E%3Cpath d='M12 15 L6 21'/%3E%3Cpath d='M6.5 12 L4 15'/%3E%3C/svg%3E")}
/* Wasser: zwei Wellen */
.z-wasser::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5761f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 9c3-3 5 3 8 0s5-3 8 0 4 0 4 0'/%3E%3Cpath d='M2 16c3-3 5 3 8 0s5-3 8 0 4 0 4 0'/%3E%3C/svg%3E")}

/* ----- Die Marken im Zeichenblock: dieselben Zeichnungen wie im Text, nur groesser und auf
   dunklem Grund. Der Block erklaert einmal, wofuer sie stehen. ----- */
.zb-p .m-sage{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8912f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M17 3 L9 13'/%3E%3Cpath d='M11 11 L14 14'/%3E%3Cpath d='M9.5 12.5 L3 21'/%3E%3Cpath d='M12 15 L6 21'/%3E%3Cpath d='M6.5 12 L4 15'/%3E%3C/svg%3E")}
.zb-p .m-berg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8912f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20 L18 6'/%3E%3Cpath d='M20 20 L6 6'/%3E%3Cpath d='M15 3 h6 v4 h-6z' fill='%23c8912f' stroke='none'/%3E%3Cpath d='M3 3 h6 v4 h-6z' fill='%23c8912f' stroke='none'/%3E%3C/svg%3E")}
.zb-p .m-wasser{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8912f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 9c3-3 5 3 8 0s5-3 8 0 4 0 4 0'/%3E%3Cpath d='M2 16c3-3 5 3 8 0s5-3 8 0 4 0 4 0'/%3E%3C/svg%3E")}

/* ----- Faktenmarke: auf Schiefergrund mit Messingzahl, statt weiss auf schwarz.
   Die Zahl ist das Bild — sie soll aus zwei Metern Abstand lesbar sein. ----- */
.fakt{background:var(--night);border-left-color:var(--mr-2)}
.fakt b{color:var(--mr-2)}
.fakt span{color:rgba(255,255,255,.62)}

/* ----- Hoehenschnitt: der Brocken bekommt das Messing, alles andere Waldgruen.
   Der Harz ist ueber genau diesen Umstand definiert — tausend Meter ueber flachem Land. ----- */
.hoehen-b{border-bottom-color:var(--ink)}
.hoehen-s .bar{background:var(--mr-red)}
.hoehen-s.top .bar{background:var(--mr-2)}

/* ----- Sperrungen bleiben rot. Messing waere hier falsch: eine Sperrung ist eine Warnung,
   kein Schmuck. Einzige Stelle auf der Seite, an der Rot vorkommt. ----- */
.st-badge.st-temp{background:#c4361d}
table.sperr th{background:var(--ink)}

/* ----- Tour- und Hotelkacheln: ruhiger Rahmen statt harter Kante ----- */
.tourcard .pic,.hotelcard .pic,.sec-banner,.ms-figure{border-radius:8px}
.hotelcard.feat .pic{outline-color:var(--mr-2)}

/* ----- Fusszeile: derselbe Schiefer wie der Hero, damit die Seite unten zumacht ----- */
.foot{background:var(--night)}