ineinander und setzt `margin-top`; ein Innenrand ohne Polster
* fällt aber mit dem des Elternteils zusammen, und alle drei Striche landen
* aufeinander. Verschieben fällt mit nichts zusammen. */
.mean-container a.meanmenu-reveal span { margin-top: 0; border-radius: 2px; }
.mean-container a.meanmenu-reveal span span { position: relative; top: 6px; }
/* Der Nach-oben-Knopf kam in Zomia-Lila und mit einem Zeichen, das es nicht
* mehr gibt: ein leeres Viereck in der Ecke jeder Seite. */
#scrollUp {
right: 30px;
width: 44px;
height: 44px;
line-height: 44px;
font-size: 17px;
border-radius: 12px;
background: var(--rt-blau);
box-shadow: 0 10px 24px rgba(11, 17, 40, 0.28);
}
#scrollUp:hover { background: var(--rt-blau-dunkel); }
/* Die Punkte unter dem Karussell standen untereinander statt nebeneinander:
* owl.carousel baut jeden Punkt als , und `text-align: center` richtet
* keine Blöcke aus. Das `` darin war bereits `inline-block` — der
* Kasten darum herum nicht. */
.rt-bilder .owl-dot { display: inline-block; }
/* Die Häkchenlisten der drei Textabschnitte.
*
* Das Template stellt das Häkchen mit `float: left` neben den Absatz. Ein Float
* ist aber nur so hoch wie er selbst: Ab der dritten Zeile läuft der Text unter
* ihm durch und beginnt wieder ganz links. Auf dem Telefon, wo fast jeder Punkt
* drei Zeilen braucht, sah damit jede Aufzählung aus, als wäre sie eingerückt
* und dann doch nicht. `flex` kennt diesen Bruch nicht.
*
* Warum alle drei Abschnitte in einem Selektor: Dashboard und Teilen kamen
* später dazu und erbten sonst den Float **und** die orangefarbenen Kreise des
* Templates — direkt unter dem Kamera-Abschnitt mit seinen grünen Haken. */
.rt-kamera-bereich .about-content-inner ul,
.rt-dashboard-bereich .about-content-inner ul,
.rt-teilen-bereich .about-content-inner ul { margin: 26px 0 0; padding: 0; }
.rt-kamera-bereich .about-content-inner ul li,
.rt-dashboard-bereich .about-content-inner ul li,
.rt-teilen-bereich .about-content-inner ul li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 0 0 14px;
}
.rt-kamera-bereich .about-content-inner ul li i,
.rt-dashboard-bereich .about-content-inner ul li i,
.rt-teilen-bereich .about-content-inner ul li i {
float: none;
flex: 0 0 auto;
margin: 3px 0 0;
background: var(--rt-gruen-tief);
}
.rt-kamera-bereich .about-content-inner h4,
.rt-dashboard-bereich .about-content-inner h4,
.rt-teilen-bereich .about-content-inner h4 { margin: 0; }
/* Der Kamera-Abschnitt bekam seine Aufzählung in Poppins (style.css, Block
* „Gliederung statt Optik“). Dashboard und Teilen kamen später und blieben in
* Rubik: drei Abschnitte untereinander, zwei Schriften. Hier gleichgezogen. */
.rt-dashboard-bereich .about-content-inner ul li p,
.rt-teilen-bereich .about-content-inner ul li p {
font-family: "Poppins", system-ui, sans-serif;
}
/* =============================================== 7c. Die freiwilligen Zugaben */
.rt-fortschritt {
position: fixed;
left: 0;
top: 0;
z-index: 9999;
width: 100%;
height: 3px;
transform: scaleX(0);
transform-origin: 0 50%;
background: linear-gradient(90deg, var(--rt-blau-hell), var(--rt-gruen));
}
.rt-lupe { display: block; cursor: zoom-in; }
.rt-nurlesen {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.vbox-overlay { background: rgba(11, 17, 40, 0.94) !important; }
/* ================================================================ 8. Schmal */
@media (max-width: 1199px) {
.hero-section-title h1 { font-size: 50px; }
}
@media (max-width: 991px) {
/* Den Namen trägt die Leiste, die meanmenu baut — versteckt wird die zweite
* weiter oben in Abschnitt 7b, dort steht auch, warum mit `!important`. */
.mean-container .mean-bar::before {
content: "Radltracker";
font-family: "Poppins", system-ui, sans-serif;
font-size: 19px;
letter-spacing: -0.3px;
}
/* Hochkant ist der Kopfbereich viel höher als breit. Über die ganze Höhe
* gestreckt bliebe vom Berg ein zufälliger Ausschnitt aus der Mitte übrig,
* mit einem hellen Hang hinter der Überschrift. Stattdessen bekommt die
* Szene ein festes Band am unteren Rand — hoch genug, dass die Kehren und
* die Radfahrer darauf erkennbar bleiben; darüber führt der Kopfbereich die
* Himmelsfarbe fort. Seitlich wird beschnitten, und zwar mittig: Der Berg
* steht in der Mitte der Zeichenfläche, das Tal am Rand darf gehen. */
.hero-section.rt-kopfbild {
background: linear-gradient(180deg, #0b1128 0%, #0d1c4b 100%);
padding-bottom: 150px;
}
.rt-szene { top: auto; bottom: 0; height: clamp(340px, 44vh, 500px); }
.rt-schleier { background: none; }
}
@media (max-width: 991px) {
.hero-section.rt-kopfbild { padding: 130px 0 90px; text-align: center; }
.rt-abzeichen { justify-content: center; }
.hero-description p { margin: 0 auto; }
.rt-buehne { margin-top: 54px; }
.rt-textkopf { padding: 130px 0 70px; }
.rt-merkmal { margin-bottom: 20px; }
.rt-preis { margin-bottom: 26px; }
.rt-zahl { margin-bottom: 20px; }
}
@media (max-width: 575px) {
.hero-section-title h1 { font-size: 38px; }
.rt-preis-betrag { font-size: 34px; }
.rt-band-knopf { margin-top: 24px; }
}
/* ================= Symbole ================= */
/* Symbole. Ersetzt Font Awesome: vier Zeichen statt einer ganzen Familie.
Als Maske über `currentColor`, damit dieselbe Regel auf jedem Grund passt.
`.fa` steht mit in der Liste, weil das Template den alten Kurznamen benutzt
— der Nach-oben-Knopf aus theme.js schreibt ``. */
.fa, .fas, .far {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
background-color: currentColor;
-webkit-mask: var(--rt-symbol) center / contain no-repeat;
mask: var(--rt-symbol) center / contain no-repeat;
}
.fa-check { --rt-symbol: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M4%208.5%20L6.8%2011.3%20L12%204.7%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"); }
.fa-angle-down { --rt-symbol: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M4.2%206.2%20L8%2010%20L11.8%206.2%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"); }
.fa-arrow-right { --rt-symbol: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M2.5%208%20H12.5%20M9%204.5%20L12.5%208%20L9%2011.5%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"); }
.fa-angle-up { --rt-symbol: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M8%2013.5%20V2.5%20M4.5%206%20L8%202.5%20L11.5%206%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"); }