/* Roadbook. Farben, Karten und Abstaende kommen aus css/app.css (--rw-*).
   Diese Seite wird am Kuechentisch geplant UND draussen am Laptop gelesen --
   alles Gedaempfte ist hier deshalb eine Stufe heller als sonst in der App. */
.rb-wrap {
    max-width: 56rem;
    /* --rw-muted (#9a866c) liegt auf dem Kartengrund bei ~4,8:1 und faellt bei
       Sonne auf dem Display weg. Diese Stufe liegt bei ~8:1. */
    --rb-dim: #cbbaa2;
}
:root[data-theme="light"] .rb-wrap { --rb-dim: #4a5260; }

.rb-wrap .text-muted { color: var(--rb-dim) !important; }

/* Links tragen die Marke, nicht das Browserblau. */
.rb-wrap a { color: var(--rw-accent); }
.rb-wrap a:hover, .rb-wrap a:focus { color: var(--rw-dot); }
/* Ausser den Reisekarten: dort ist die ganze Karte der Link, der Name bleibt
   Fliesstext und der Rand zeigt an, worauf der Zeiger steht. */
.rb-wrap a.rw-card { color: var(--rw-text); transition: border-color .15s; }
.rb-wrap a.rw-card:hover, .rb-wrap a.rw-card:focus { color: var(--rw-text); border-color: var(--rw-accent); }

/* Bootstrap-Weiss blendet auf dunklem Grund und gehoert nicht zur Marke. */
.rb-wrap .form-control {
    background: var(--rw-inset-bg);
    border: 1px solid var(--rw-border);
    color: var(--rw-text);
}
.rb-wrap .form-control:focus {
    background: var(--rw-inset-bg);
    color: var(--rw-text);
    border-color: var(--rw-accent);
    box-shadow: 0 0 0 .2rem rgba(240,165,0,.25);
}
.rb-wrap .form-control::placeholder { color: var(--rb-dim); opacity: 1; }
.rb-wrap .form-control::file-selector-button {
    background: var(--rw-surface2);
    border: 0; border-right: 1px solid var(--rw-border);
    color: var(--rw-text);
}
.rb-wrap .form-label { color: var(--rw-text); }

/* Fehler bleiben rot -- aber im warmen Rot der Marke (--rw-stop-*). */
.rb-wrap .alert-danger { background: #40201a; border-color: #c23a22; color: #ffd9d0; }

.rb-etappe { margin-bottom: 1.5rem; }

/* Die Quittungszeile ist die Hauptaussage der Seite. Die Zahlen in Akzent. */
.rb-quittung { font-size: 1.05rem; line-height: 1.5; color: var(--rw-text); }
.rb-quittung strong { color: var(--rw-accent); }

/* Hoehenprofil und Abdeckungsband teilen sich die Kilometerachse und muessen
   deshalb exakt gleich breit sein und exakt gleich ausgerichtet bleiben. */
.rb-svg { display: block; width: 100%; height: auto; }
.rb-profil { height: 7rem; }
.rb-band   { height: 1.75rem; margin-top: 0.25rem; border-radius: 4px; overflow: hidden; }

/* Abdeckung auf dem Markenverlauf Gold - Orange - Rost, demselben, aus dem der
   CTA-Knopf gebaut ist (--rw-cta-bg, --rw-stop-bg). Eine Ampel waere doppelt
   falsch: Gruen gehoert nicht zur Marke, und die Stufen unterscheiden sich hier
   in Farbton UND Helligkeit -- damit bleiben sie bei Sonne auf dem Display und
   bei Farbsehschwaeche auseinanderzuhalten, was reines Gruen/Gelb nicht ist.
   Alle drei Stufen sind kraeftig: diese Seite wird auch draussen gelesen. */
.rb-stufe-gut   { fill: #f0a500; }
.rb-stufe-duenn { fill: #d9701c; }
.rb-stufe-leer  { fill: #a33a20; }

/* Die Trennlinien duerfen NICHT mitskaliert werden: das SVG wird mit
   preserveAspectRatio="none" in die Breite gezogen, eine normale Kontur waere
   je nach Fensterbreite mal unsichtbar und mal ein Balken. */
.rb-band rect { stroke: var(--rw-bg); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Das Profil ist Gelaende, nicht Marke -- warmer Sandton (--rw-dot), damit es
   sich vom gesaettigten Amber des Bandes darunter abhebt. */
.rb-profil-flaeche { fill: rgba(224,177,90,.22); }
.rb-profil-linie   { fill: none; stroke: #e0b15a; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.rb-legende { font-size: 0.9rem; color: var(--rb-dim); }

/* Aufklappbares sieht anklickbar aus. */
.rb-wrap details > summary { color: var(--rw-accent); font-size: 0.92rem; cursor: pointer; }
.rb-wrap details > summary:hover, .rb-wrap details > summary:focus { color: var(--rw-dot); }

.rb-orte {
    max-height: 22rem; overflow-y: auto;
    background: var(--rw-inset-bg);
    border: 1px solid var(--rw-border);
    border-radius: 10px;
}
/* Bootstrap-Tabellen sind hell voreingestellt -- auf dieser Seite ein weisser
   Block mitten in der dunklen Karte. */
.rb-orte .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--rw-text);
    --bs-table-border-color: var(--rw-border);
    margin-bottom: 0;
}
.rb-orte td { padding: 0.3rem 0.6rem; font-size: 0.92rem; }
.rb-orte .km { color: var(--rb-dim); text-align: right; white-space: nowrap; }
.rb-orte .ab { color: var(--rb-dim); white-space: nowrap; }
.rb-orte .kat { color: var(--rb-dim); }
.rb-ort-fern .name { color: var(--rb-dim); }

/* Rueckfrage vor dem Loeschen, im Fluss der Seite statt als Systemfenster.
   Ein confirm() haelt die ganze Seite an und ist nicht zu gestalten. */
.rb-frage {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    margin: 0.25rem 0 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--rw-surface2);
    border: 1px solid var(--rw-accent);
    border-radius: 10px;
    font-size: 0.92rem;
    color: var(--rw-text);
}
.rb-frage-knoepfe { display: flex; gap: 0.5rem; margin-left: auto; }
.rb-frage .form-control { max-width: 22rem; }

.rb-upload input[type=file] { max-width: 22rem; }

/* Die Browser-Voreinstellung markiert blau -- auf Amber im Eingabefeld ergibt
   das ein grelles Rot. */
.rb-wrap ::selection { background: var(--rw-accent); color: var(--rw-accent-ink); }

/* Die Karte steht ueber Profil und Band, in derselben Kartenbreite. */
.rb-karte { height: 40rem; border-radius: 10px; overflow: hidden; margin-bottom: .5rem;
            background: var(--rw-inset-bg); border: 1px solid var(--rw-border); }
/* Legende unter der Karte. Der Punkt traegt denselben dunklen Rand wie der
   Kartenpunkt -- er soll als dasselbe Objekt lesbar sein, nicht als Deko. */
.rb-legende { display: flex; flex-wrap: wrap; gap: .35rem .9rem;
              margin: -.2rem 0 .6rem; font-size: .8rem; color: var(--rb-dim); }
.rb-legende:empty { display: none; }
.rb-legende-eintrag { display: inline-flex; align-items: center; gap: .35rem;
                      white-space: nowrap; }
.rb-legende-punkt { width: .55rem; height: .55rem; border-radius: 50%;
                    border: 1px solid #1b1613; flex: 0 0 auto; }
.rb-legende b { font-weight: 600; color: var(--rw-text); }

.rb-karte-wartet { display: flex; align-items: center; justify-content: center;
                   height: 100%; color: var(--rb-dim); font-size: .92rem; }
/* MapLibre bringt eigene helle Bedienelemente mit. */
.rb-karte .maplibregl-ctrl-attrib { font-size: .72rem; }

/* Die Sprechblase am Ort. maplibre-gl.css setzt ihr einen weissen Grund, aber
   KEINE Textfarbe -- der Text erbt damit das helle --rw-text der Seite und
   steht weiss auf weiss. Deshalb hier vollstaendig einfaerben, in den Farben
   der App statt in denen der Bibliothek. */
.rb-karte .maplibregl-popup-content {
    background: var(--rw-surface);
    color: var(--rw-text);
    border: 1px solid var(--rw-accent);
    border-radius: 10px;
    padding: .45rem .7rem;
    font-size: .92rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.rb-karte .maplibregl-popup-close-button { color: var(--rb-dim); font-size: 1.1rem; }
.rb-karte .maplibregl-popup-close-button:hover { color: var(--rw-accent); background: transparent; }

/* Das Zipfelchen ist ein CSS-Dreieck aus Raendern -- je nachdem, wo die Blase
   haengt, traegt ein anderer Rand die Farbe. Alle acht Richtungen abdecken,
   sonst bleibt an manchen Stellen ein weisser Zipfel stehen. */
.rb-karte .maplibregl-popup-anchor-top .maplibregl-popup-tip,
.rb-karte .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.rb-karte .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
    border-bottom-color: var(--rw-accent);
}
.rb-karte .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.rb-karte .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.rb-karte .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
    border-top-color: var(--rw-accent);
}
.rb-karte .maplibregl-popup-anchor-left .maplibregl-popup-tip  { border-right-color: var(--rw-accent); }
.rb-karte .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color:  var(--rw-accent); }