/**
 * @project:   Rent Room Germany
 *
 * The parts of this site the theme has no class for.
 *
 * `main.css` is taken over from the One Way Dubai theme as a COMPILED file — this installation
 * cannot rebuild it, so a class that is not already in it cannot be added. Everything the theme
 * does have is used as it is; everything else is written here, as plain rules under one prefix, so
 * the two never argue about which owns a selector.
 *
 * Every directional value is a LOGICAL one: `padding-inline-start`, not `padding-left`;
 * `border-inline-start`, not `border-left`. That is what makes the Arabic pages mirror themselves
 * from the `dir` attribute alone, with no second stylesheet for this file and nothing to keep in
 * step. `rtl.css` exists only for the compiled theme, which was written before that was an option.
 *
 * The values are the theme's own, named once at the top so a colour is stated in one place.
 *
 * @author     Fabian Bitter (fabian@bitter.de)
 * @copyright  (C) 2026 Fabian Bitter (www.bitter.de)
 */

/**
 * A word that cannot fit its column breaks instead of pushing the page sideways.
 *
 * Stated once, on the body, because the two things this site is made of both produce such words.
 * German compounds them by design — "Mietschuldenfreiheitsbescheinigung" is one word and it does
 * not fit a three-column layout on a tablet, which cost the English home page 43 pixels of
 * horizontal scroll. And classifieds prose is typed without spaces after commas, so
 * "Bett,Sofa,Tisch,Kühlschrank,Schrank." reaches the line breaker as one forty-character word.
 *
 * It was a list of specific classes first, and that was the wrong shape: the text comes from
 * strangers, so the next long word will appear somewhere that is not on the list. `break-word` only
 * acts when a word cannot fit at all, so ordinary text is untouched.
 *
 * Element boxes do not reveal this — a paragraph keeps its width while its text spills out of it,
 * so a check that measures elements finds nothing and only the document's scrollWidth shows it.
 */
body {
    overflow-wrap: break-word;
}

/**
 * The gold, stated once.
 *
 * `--rrg-brand` is the gold of the logo's roof taken down in lightness until white text on it
 * clears the 4.5:1 the rest of the site is built to: the logo's own mid gold, #c89030, carries
 * white at 2.8:1 and would fail every filled button and the whole footer band. Same hue, same
 * saturation, measured 5.0:1.
 *
 * Everything else gold on this site is this value or a mix of it with white, so there is no second
 * place to change when the tone changes. The green it replaced came from One Way Dubai and was
 * never this brand's.
 *
 * The last two are the taken-over theme's own variables. `main.css` declares them on `:root` as
 * that green; this file is loaded after it, so restating them here is what turns the compiled
 * theme gold without editing a file this installation cannot rebuild.
 */
:root {
    --rrg-brand: #93671a;
    --rrg-heading: #071c1f;
    --rrg-muted: #5c727d;
    --rrg-hairline: #e5eaee;
    --rrg-surface: #f7f9fa;
    --rrg-field-height: 3.125rem;

    --main-color: var(--rrg-brand);
    --secondary-color: var(--rrg-brand);
}

/**
 * Where the theme wrote the green out as a number instead of reading its own variable.
 *
 * `main.css` is a compiled Tailwind build, so every `bg-secondary-color` in the markup became a
 * rule with `rgb(0 115 47)` in it — the variable above governs the theme's components but not these
 * twelve utility classes, which is why the footer band stayed green after it was changed. Restated
 * here, selector for selector, at the same specificity: this file is loaded second, so it wins.
 *
 * None of them is combined with a `bg-opacity` utility anywhere in the markup, so the value is the
 * colour itself rather than the theme's channel-plus-opacity construction.
 */
.bg-secondary-color,
.hover\:bg-secondary-color:hover,
.group:hover .group-hover\:bg-secondary-color,
.before\:bg-secondary-color::before,
.after\:bg-secondary-color::after {
    background-color: var(--rrg-brand);
}

.text-secondary-color,
.hover\:text-secondary-color:hover,
.group:hover .group-hover\:text-secondary-color,
.group\/nested:hover .group-hover\/nested\:text-secondary-color,
.after\:text-secondary-color::after {
    color: var(--rrg-brand);
}

.border-secondary-color,
.hover\:border-secondary-color:hover,
.focus\:border-secondary-color:focus {
    border-color: var(--rrg-brand);
}

/**
 * The theme paints the current menu entry with its green as a literal, past every variable.
 * One rule, one override.
 */
.active,
.active:hover {
    color: var(--rrg-brand) !important;
}

.rrg-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
}

.rrg-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--rrg-brand);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.rrg-link:hover {
    color: var(--rrg-heading);
}

/* ------------------------------------------------------------------ language */

.rrg-langs {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-inline-start: 1.25rem;
}

.rrg-lang {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rrg-muted);
    white-space: nowrap;
}

.rrg-lang:hover {
    color: var(--rrg-heading);
}

.rrg-lang--current {
    color: var(--rrg-brand);
}

/* On the narrow drawer the switch stands on its own line above the fold-out menu. */
.mobile-menu .rrg-langs {
    padding-inline-start: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rrg-hairline);
}

/* --------------------------------------------------------------------- home */

.rrg-hero {
    background-color: var(--rrg-surface);
}

.rrg-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.875rem;
}

@media (min-width: 768px) {
    .rrg-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.rrg-steps__item {
    padding: 1.875rem;
    background: var(--rrg-surface);
}

.rrg-steps__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--rrg-brand);
    border-radius: 100%;
}

.rrg-steps__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rrg-heading);
}

.rrg-steps__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--rrg-muted);
}

.rrg-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.875rem;
}

.rrg-cities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.rrg-cities__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    color: var(--rrg-heading);
    background: var(--rrg-surface);
    border: 1px solid transparent;
}

.rrg-cities__item:hover {
    border-color: var(--rrg-brand);
}

.rrg-cities__item .rrg-icon {
    color: var(--rrg-brand);
}

.rrg-cities__name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}

.rrg-cities__count {
    color: var(--rrg-muted);
}

/* --------------------------------------------------------------------- list */

.rrg-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    color: var(--rrg-heading);
}

@media (min-width: 992px) {
    .rrg-list {
        grid-template-columns: 17rem minmax(0, 1fr);
        gap: 3.75rem;
    }
}

.rrg-list__filters {
    min-width: 0;
}

.rrg-list__filters-title {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rrg-heading);
}

/* The name of the filters doubles as the control that folds them out, but only where they are
   folded away — which is where they stand above the offers instead of beside them. */
.rrg-list__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.875rem 0;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rrg-heading);
    text-align: start;
    background: none;
    border: 0;
    border-top: 1px solid var(--rrg-hairline);
    border-bottom: 1px solid var(--rrg-hairline);
    cursor: pointer;
}

.rrg-list__toggle[aria-expanded="true"] .rrg-icon {
    transform: rotate(180deg);
}

@media (max-width: 991px) {
    .rrg-list__filters-title {
        display: none;
    }

    html.js .rrg-list__fields {
        display: none;
        padding-top: 1.5rem;
    }

    html.js .rrg-list__fields--open {
        display: block;
    }
}

@media (min-width: 992px) {
    .rrg-list__toggle {
        display: none;
    }
}

.rrg-list__field {
    margin-bottom: 1.5rem;
}

.rrg-list__field > label,
.rrg-list__field-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rrg-muted);
}

/* The two ends of a range say which end they are, above their own field: a placeholder that had to
   say it instead would not fit the half width. */
.rrg-list__end > label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rrg-muted);
}

.rrg-list select,
.rrg-list input[type="search"] {
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--rrg-field-height);
    padding: 0 0.875rem;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rrg-heading);
    background-color: #fff;
    border: 1px solid var(--rrg-hairline);
    border-radius: 0;
    outline: none;
    appearance: none;
}

/* The arrow the browser would draw is taken away with the appearance above, so it is drawn here, in
   the same outline the rest of the page uses. */
.rrg-list select {
    padding-inline-end: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c727d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.125rem 1.125rem;
}

[dir="rtl"] .rrg-list select {
    background-position: left 0.75rem center;
}

.rrg-list select:focus,
.rrg-list input[type="search"]:focus {
    border-color: var(--rrg-brand);
}

.rrg-list__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.rrg-list__apply {
    display: block;
    width: 100%;
    height: var(--rrg-field-height);
    font: inherit;
    font-size: 1rem;
    color: #fff;
    background-color: var(--rrg-brand);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

/* With scripting the list follows every setting on its own, so the button has nothing left to do
   and would only ask to be pressed for nothing. */
html.js .rrg-list__apply {
    display: none;
}

.rrg-list__reset {
    display: inline-block;
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rrg-muted);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.rrg-list__reset:hover {
    color: var(--rrg-heading);
}

.rrg-list__main {
    min-width: 0;
}

.rrg-list__main--busy {
    opacity: 0.5;
}

.rrg-list__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-bottom: 0.875rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--rrg-hairline);
}

.rrg-list__count {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rrg-muted);
}

.rrg-list__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.75rem;
}

.rrg-list__sort {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.rrg-list__sort-label {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rrg-muted);
    white-space: nowrap;
}

.rrg-list__sort select {
    width: auto;
    min-width: 12rem;
    height: 2.5rem;
}

/* On a phone the sort control, its label and the two view buttons do not fit on one line, and a
   12 rem select is what pushes the last of them off the screen. Narrow it and let the row wrap. */
@media (max-width: 575px) {
    .rrg-list__sort {
        flex: 1 1 100%;
    }

    .rrg-list__sort select {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.rrg-list__views {
    display: flex;
    gap: 1.25rem;
}

.rrg-list__view {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0 0.375rem;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rrg-muted);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.rrg-list__view:hover {
    color: var(--rrg-heading);
}

.rrg-list__view--current {
    color: var(--rrg-heading);
    border-bottom-color: var(--rrg-brand);
}

.rrg-list__empty {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--rrg-muted);
}

.rrg-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--rrg-hairline);
}

.rrg-list__row:first-child {
    padding-top: 0;
}

@media (min-width: 576px) {
    .rrg-list__row {
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: 1.75rem;
    }
}

@media (min-width: 1200px) {
    .rrg-list__row {
        grid-template-columns: 17rem minmax(0, 1fr) auto;
        gap: 2.25rem;
    }
}

.rrg-list__row-image,
.rrg-list__card-image {
    position: relative;
    display: block;
    background: var(--rrg-surface);
}

/* The photo keeps its own height instead of stretching to whatever the text beside it needs. A
   grid item fills its row by default, which on a long listing leaves a band of empty background
   under the picture. */
.rrg-list__row-image {
    align-self: start;
}

.rrg-list__row-image img,
.rrg-list__card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* Der Zoom passiert im Bild, nicht am Kasten: `overflow: hidden` am Elternteil schneidet das
       Mehr an Bild ab, sodass das Raster ruhig bleibt und sich nur der Ausschnitt ändert. */
    transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.rrg-list__row-image,
.rrg-list__card-image {
    overflow: hidden;
}

.rrg-list__row-image:hover img,
.rrg-list__card-image:hover img {
    transform: scale(1.06);
}

/* Wer eine ruhige Oberfläche eingestellt hat, bekommt keine Bewegung. */
@media (prefers-reduced-motion: reduce) {
    .rrg-list__row-image img,
    .rrg-list__card-image img {
        transition: none;
    }

    .rrg-list__row-image:hover img,
    .rrg-list__card-image:hover img {
        transform: none;
    }
}

/* Which portal an offer came from, said on the photo. It is the answer to "is this real?", and it
   is the first question somebody looking at an aggregator asks. */
.rrg-badge {
    position: absolute;
    inset-block-start: 0.625rem;
    inset-inline-start: 0.625rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--rrg-heading);
    background: rgba(255, 255, 255, 0.92);
}

.rrg-list__row-body {
    min-width: 0;
}

.rrg-list__row-title,
.rrg-list__card-title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rrg-heading);
}

.rrg-list__row-title a,
.rrg-list__card-title a {
    color: inherit;
}

/* The pointer marks the name of an offer with a rule under it, not with a colour: a title that
   turns green on the way past reads as a warning. */
.rrg-list__row-title a:hover,
.rrg-list__card-title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.rrg-list__place {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rrg-muted);
}

.rrg-list__place .rrg-icon {
    color: var(--rrg-brand);
}

.rrg-list__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rrg-heading);
}

.rrg-list__fact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.rrg-list__fact .rrg-icon {
    color: var(--rrg-muted);
}

.rrg-list__excerpt {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--rrg-muted);
}

/* Moved to a single rule on `body` — see the top of this file. */

.rrg-list__row-price {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rrg-heading);
    white-space: nowrap;
}

.rrg-list__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.875rem;
}

@media (min-width: 576px) {
    .rrg-list__grid--3,
    .rrg-list__grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .rrg-list__grid--3,
    .rrg-list__grid--4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1400px) {
    .rrg-list__grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.rrg-list__card {
    min-width: 0;
}

.rrg-list__card-image {
    margin-bottom: 1rem;
}

.rrg-list__price {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rrg-heading);
}

.rrg-list__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin-top: 2.5rem;
}

.rrg-list__page {
    display: inline-block;
    padding-bottom: 0.25rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rrg-muted);
    border-bottom: 2px solid transparent;
}

.rrg-list__page:hover {
    color: var(--rrg-heading);
}

.rrg-list__page--current {
    color: var(--rrg-heading);
    border-bottom-color: var(--rrg-brand);
}

.rrg-list__gap {
    color: var(--rrg-muted);
}

/* ------------------------------------------------------------------- detail */

.rrg-price {
    margin: 0.75rem 0 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rrg-brand);
}

.rrg-prose p {
    margin-bottom: 1rem;
}

.rrg-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0.75rem 1.875rem 1.5rem;
}

@media (min-width: 768px) {
    .rrg-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
    }
}

.rrg-facts__row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rrg-hairline);
}

.rrg-facts__label {
    flex: 0 0 auto;
    min-width: 8.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rrg-muted);
}

.rrg-facts__value {
    min-width: 0;
    color: var(--rrg-heading);
}

.rrg-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.625rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rrg-features__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rrg-heading);
}

.rrg-features__item .rrg-icon {
    color: var(--rrg-brand);
}

.rrg-address {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    color: var(--rrg-heading);
}

.rrg-address .rrg-icon {
    color: var(--rrg-brand);
}

/* The line carries `dir="ltr"` in the markup, because a German street with a house number and a
   postcode is read left to right whatever surrounds it. That attribute settles the order INSIDE the
   line; it says nothing about where the line sits, so on a mirrored page it stayed against the left
   edge while every paragraph around it began on the right. Pushing the flex row to its end puts it
   back on the reader's side without touching the order of the words in it. Arabic only: in German
   and English the line already starts where the text does. */
[dir="rtl"] .rrg-address {
    justify-content: flex-end;
}

.rrg-note {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--rrg-muted);
}

/* --------------------------------------------------------------------- form */

/* The label is read out but not drawn: the field says what it is through its placeholder, which is
   the theme's own pattern, and a screen reader still gets a real label rather than a guess. */
.rrg-form__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.rrg-form__error {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    color: #b3261e;
}

.rrg-form__error--box {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: #fdeceb;
}

.rrg-form__success {
    padding: 1rem 1.25rem;
    color: var(--rrg-heading);
    background: color-mix(in srgb, var(--rrg-brand) 12%, #fff);
    border-inline-start: 3px solid var(--rrg-brand);
}

/**
 * The honeypot field.
 *
 * Hidden the way a screen-reader-only label is hidden — clipped to a point — rather than with
 * `display: none`, because a bot that skips undisplayed inputs would skip the trap as well.
 *
 * It is NOT parked off-canvas with `left: -9999px`, which is the usual recipe. In a right-to-left
 * document that is not off-canvas at all: the page's scrollable area grows to reach it, and every
 * Arabic page ends up ten thousand pixels wide with a horizontal scrollbar. Clipping in place has
 * the same effect on a bot and no effect on the layout, in either direction.
 */
.rrg-form__trap {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.rrg-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rrg-contact li {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--rrg-hairline);
}

.rrg-contact i {
    margin-inline-end: 0.625rem;
}

/* -------------------------------------------------------------------- legal */

.rrg-legal__title {
    margin: 2rem 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rrg-heading);
}

.rrg-legal__text {
    margin: 0 0 0.75rem;
    line-height: 1.8;
    color: var(--rrg-muted);
}


/* ------------------------------------------------------------------ spacing */

/**
 * The handful of utilities this site's own pages need and the compiled theme does not carry.
 *
 * `main.css` was built for the pages the Dubai site has, so it contains the utility classes those
 * pages happened to use and no others. A class that is not in it is not a smaller version of
 * itself — it does nothing at all, silently, and the page comes out with no padding where the
 * markup plainly asked for some.
 *
 * These carry the `rrg-` prefix rather than extending the theme's naming, so it stays obvious which
 * stylesheet owns which class and a future theme rebuild cannot quietly redefine one of them.
 */
.rrg-section {
    padding-block: 3.75rem;
}

/* Der erste Abschnitt unter dem Seitenkopf trägt oben gar keinen eigenen Abstand mehr: das Band
   mit Titel und Brotkrumen endet schon mit seinen eigenen 1.875rem, und ein zweiter Abstand
   darunter riss die Lücke auf, die auf der Angebotsseite nie da war. Damit stehen Über uns,
   Kontakt, die Liste und ein Angebot alle im selben Abstand unter der Krümelspur. */
.rrg-section--after-hero {
    padding-block-start: 0;
}

/* Überschrift und Vorsatz eines Abschnitts stehen mittig, die Spalten darunter nicht: das ist ein
   Kopf über einer Reihe, kein zentrierter Abschnitt. Der Vorsatz hat eine eigene Höchstbreite,
   also braucht er neben der Textausrichtung auch die Blockmitte. */
.rrg-section--center-head > .rrg-heading,
.rrg-section--center-head > .rrg-lead--intro {
    text-align: center;
}

.rrg-section--center-head > .rrg-lead--intro {
    margin-inline: auto;
}

/* Ein Satz unter einer Zwischenüberschrift, bevor die Kästen kommen. Ohne ihn hängen sie direkt
   an der Zeile und die Überschrift wirkt wie eine Beschriftung statt wie ein Anfang. */
.rrg-lead--intro {
    max-width: 44rem;
    margin-bottom: 2.25rem;
}

.rrg-hero__inner {
    padding-block: 3.75rem;
}

@media (min-width: 992px) {
    .rrg-hero__inner {
        padding-block: 6.25rem;
    }
}

.rrg-hero__title {
    font-size: 1.875rem;
}

@media (min-width: 576px) {
    .rrg-hero__title {
        font-size: 2.25rem;
    }
}

@media (min-width: 992px) {
    .rrg-hero__title {
        font-size: 3rem;
    }
}

/* The line length prose is comfortable at. Wider than this and the eye loses the next line. */
.rrg-measure {
    max-width: 54rem;
}

.rrg-my-lg {
    margin-block: 2.5rem;
}

.rrg-mb-lg {
    margin-bottom: 2.5rem;
}

/* ================================================================== identity */

/**
 * The header logo is sized by HEIGHT, not width.
 *
 * The theme sets `.logo { width: 183px }`, which was right for a mark three times as wide as it is
 * tall. Ours is a wordmark on two lines, RENT ROOM over GERMANY between two rules, and at a fixed
 * width it would decide the height of the header, so the header would grow every time the logo is
 * redrawn.
 *
 * The height dropped from 52px to 34px when the emblem left the mark. The old file was a lockup
 * whose ring stood taller than the lettering, so 52px of image height carried about 24px of
 * lettering. The wordmark alone fills its file, and 34px of it renders the same lettering at the
 * same weight beside the navigation. The header itself does not move: its 114px come from the
 * navigation, not from the logo.
 */
.logo {
    width: auto;
    height: 34px;
}

.rrg-footer__intro .logo {
    height: 36px;
    margin-bottom: 1.25rem;
}

.rrg-footer__intro p {
    max-width: 46rem;
}

/* ------------------------------------------------------------------- flags */

/**
 * The language switch.
 *
 * A `<details>` element: the flag of the current language plus a chevron is the `<summary>`, the
 * list of languages is the panel. The browser owns the open state, so there is no class to keep in
 * step and no way for the markup and a script to disagree about whether it is open.
 */
.rrg-langs {
    position: relative;
    margin-inline-start: 1rem;
}

.rrg-langs__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    cursor: pointer;
    list-style: none;
    /* Stays transparent in every state, hover included. A hairline that fades in under the pointer
       is chrome the flag does not need, and the open state is already told by the panel below and
       by the chevron turning over. The border is declared rather than dropped so that its 1px
       cannot move the row. */
    border: 1px solid transparent;
}

/* Both spellings are needed: WebKit draws the triangle through a pseudo-element of its own. */
.rrg-langs__toggle::-webkit-details-marker {
    display: none;
}

.rrg-langs__toggle::marker {
    content: "";
}

/* The name of the current language is announced but not drawn in the bar: there is no room beside
   the navigation, and the flag with the chevron already says that something opens here. */
.rrg-langs__name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.rrg-langs__chevron {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--rrg-muted);
    transition: transform 0.2s ease;
}

.rrg-langs[open] .rrg-langs__chevron {
    transform: rotate(180deg);
}

.rrg-langs__panel {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    /* Hangs from the end edge of the trigger, which is the right in English and the left in Arabic
       — so it opens inwards rather than off the side of the window. */
    inset-inline-end: 0;
    z-index: 60;
    min-width: 12rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--rrg-hairline);
    box-shadow: 0 12px 32px rgba(7, 28, 31, 0.12);
}

.rrg-langs__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--rrg-muted);
    white-space: nowrap;
}

.rrg-langs__item:hover {
    color: var(--rrg-heading);
    background: var(--rrg-surface);
}

.rrg-langs__item--current {
    font-weight: 700;
    color: var(--rrg-heading);
}

.rrg-flag {
    display: block;
    width: 26px;
    height: 13px;
    flex: 0 0 auto;
    /* A flag with white in it needs an edge, or it dissolves into the white panel. */
    outline: 1px solid rgba(7, 28, 31, 0.18);
}

.rrg-langs__item .rrg-flag {
    width: 30px;
    height: 15px;
}

/* In the drawer there is no room to hang a panel over anything, so it pushes the menu down instead
   of floating above it. */
.mobile-menu .rrg-langs {
    display: block;
    margin-inline-start: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rrg-hairline);
}

.mobile-menu .rrg-langs__toggle {
    padding-inline-start: 0;
}

.mobile-menu .rrg-langs__panel {
    position: static;
    min-width: 0;
    padding-inline: 0;
    border: 0;
    box-shadow: none;
}

/* =================================================================== pieces */

/* The call to action band: the sentence on one side, the button on the other.
 *
 * It used to forbid the sentence to wrap and leave no column gap, which works only as long as the
 * sentence is short. The German headline is the longest of the three and ran straight into the
 * button below 1100px, with no space between the question mark and the white edge. So the wrap is
 * allowed again, and the gap is stated: the headline takes a second line when the row gets tight
 * instead of pushing against the button. The row gap is what the stacked layout needs below the
 * breakpoint, the column gap is the distance asked for here. */
.rrg-cta {
    gap: 30px 2.5rem;
}

.rrg-button {
    display: inline-block;
    padding: 1rem 2.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--rrg-brand);
    border: 1px solid var(--rrg-brand);
    transition: background 0.25s ease, color 0.25s ease;
}

.rrg-button:hover {
    color: #fff;
    background: var(--rrg-heading);
    border-color: var(--rrg-heading);
}

.rrg-button--ghost {
    color: var(--rrg-heading);
    background: transparent;
    border-color: rgba(7, 28, 31, 0.25);
}

.rrg-button--ghost:hover {
    color: #fff;
}

.rrg-heading {
    margin: 0 0 1rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rrg-heading);
}

@media (min-width: 768px) {
    .rrg-heading {
        font-size: 2rem;
    }
}

/* `--accent` bleibt als Klasse bestehen, damit die Templates nicht angefasst werden müssen, trägt
   aber keinen Balken mehr: ein grüner Strich an jeder Überschrift ist Dekoration ohne Aussage. */
.rrg-heading--accent {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.rrg-lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--rrg-muted);
}

.rrg-lead--large {
    max-width: 60rem;
    margin-bottom: 2.5rem;
    font-size: 1.25rem;
    line-height: 1.7;
    font-weight: 600;
}

.rrg-section--muted {
    background: var(--rrg-surface);
}

/* ===================================================================== hero */

/**
 * The hero carries a photograph from the newest offer, darkened enough for white type to sit on it.
 *
 * A stock image would have to be chosen, licensed and then quietly age; this one is already on our
 * own server, changes by itself with every import, and shows the market rather than an idea of it.
 * `--plain` is the fallback for an empty index, where there is no photograph to use.
 */
.rrg-hero {
    position: relative;
    background-color: var(--rrg-heading);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.rrg-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(4, 18, 20, 0.92) 0%, rgba(4, 18, 20, 0.72) 45%, rgba(4, 18, 20, 0.35) 100%);
}

[dir="rtl"] .rrg-hero::after {
    background: linear-gradient(260deg, rgba(4, 18, 20, 0.92) 0%, rgba(4, 18, 20, 0.72) 45%, rgba(4, 18, 20, 0.35) 100%);
}

.rrg-hero--plain {
    background-image: linear-gradient(120deg, #071c1f 0%, color-mix(in srgb, var(--rrg-brand) 45%, #071c1f) 100%);
}

.rrg-hero__inner {
    position: relative;
    z-index: 1;
    padding-block: 4.5rem;
}

@media (min-width: 992px) {
    .rrg-hero__inner {
        padding-block: 7.5rem;
    }
}

.rrg-hero__panel {
    max-width: 44rem;
}

.rrg-hero__eyebrow {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--rrg-brand) 45%, #fff);
}

.rrg-hero__title {
    margin: 0 0 1.25rem;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.18;
    color: #fff;
}

@media (min-width: 576px) {
    .rrg-hero__title {
        font-size: 2.6rem;
    }
}

@media (min-width: 992px) {
    .rrg-hero__title {
        font-size: 3.25rem;
    }
}

.rrg-hero__text {
    margin: 0 0 2rem;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.85);
}

.rrg-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
}

.rrg-hero__actions .rrg-button--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}

.rrg-hero__actions .rrg-button--ghost:hover {
    color: var(--rrg-heading);
    background: #fff;
    border-color: #fff;
}

/* ============================================================ home sections */

.rrg-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .rrg-split {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 4rem;
    }
}

.rrg-assurance {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rrg-assurance__title {
    margin-bottom: 1rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--rrg-heading);
}

.rrg-assurance__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0;
    line-height: 1.6;
    color: var(--rrg-heading);
    border-bottom: 1px solid var(--rrg-hairline);
}

.rrg-assurance__item .rrg-icon {
    margin-top: 0.25rem;
    color: var(--rrg-brand);
}

.rrg-pillars {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .rrg-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .rrg-pillars {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.rrg-pillars__item {
    padding: 1.75rem;
    background: var(--rrg-surface);
}

.rrg-pillars__title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--rrg-heading);
}

.rrg-pillars__text {
    margin: 0;
    line-height: 1.8;
    color: var(--rrg-muted);
}

/* Prose in two columns where the page is wide enough, so a full-width page does not become a
   full-width LINE — past about ninety characters the eye loses its place returning. */
.rrg-prose-columns p {
    margin: 0 0 1.25rem;
    line-height: 1.9;
    color: var(--rrg-muted);
}

/* Die Spalten enden unterschiedlich hoch, deshalb steht der Abstand hier und nicht an der
   folgenden Überschrift — sonst klebt sie an der längeren der beiden Spalten. */
.rrg-prose-columns {
    margin-bottom: 2rem;
}

@media (min-width: 992px) {
    .rrg-prose-columns {
        column-count: 2;
        column-gap: 3.5rem;
    }

    .rrg-prose-columns p {
        break-inside: avoid;
    }
}

/* ================================================================== contact */

.rrg-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .rrg-contact-layout {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: 4rem;
        align-items: start;
    }
}

.rrg-contact-layout__intro .rrg-lead {
    margin-bottom: 2rem;
}

/* Beside an apartment the form is a column; on the contact page it is the page, so the short fields
   pair up and it stops looking like a questionnaire. */
.rrg-form--wide .rrg-form__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1rem;
}

@media (min-width: 576px) {
    .rrg-form--wide .rrg-form__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================== long titles */

/**
 * A portal title is as often one token as it is a sentence.
 *
 * Kleinanzeigen ad 3507465914 is called "Helle 3-ZimmerWhg/Balkon/Fussbodenheizung/ab01.11.2026" —
 * sixty characters with nowhere to break. A word that cannot break sets the minimum width of the
 * box it is in, and a grid item's minimum width is its content by default: the heading did not
 * overflow, it made its own column wider than its track and laid itself over the enquiry form in
 * the next one, so "Wir helfen Ihnen zu dieser Wohnung" was no longer readable.
 *
 * `anywhere` rather than `break-word` is the whole point: only `anywhere` is counted into the
 * minimum width, so the column can be narrow again. `min-width: 0` on the two columns says the
 * same thing from the other side and keeps a future long word inside its track.
 *
 * This does not shrink any type. A title that has spaces in it wraps on them as before; a word
 * that has no break gets one rather than a neighbour.
 */
.rrg-title,
.rrg-list__card-title,
.rrg-list__row-title {
    overflow-wrap: anywhere;
}

.rrg-detail__column {
    min-width: 0;
}

/**
 * The trail carries the same title, so it carries the same word.
 *
 * The trail is a flex row, and a flex item is at least as wide as its longest word unless it is
 * told otherwise: at 390 pixels the last crumb measured 351 and made the whole document 522 wide,
 * which is a page a visitor has to push sideways to read. Measured on the apartment page on
 * 09.09.2026, before and after.
 */
/**
 * The trail carries the same title, so it carries the same word.
 *
 * The trail is a flex row, and a flex item is at least as wide as its longest word unless it is
 * told otherwise: at 390 pixels the last crumb measured 351 and made the whole document 522 wide,
 * which is a page a visitor has to push sideways to read.
 *
 * Only the LAST crumb gets this, and that is the whole rule. It is the only one carrying the
 * offer's title, and it is the only one that should give way when the row is tight. Giving it to
 * every crumb was tried and is worse in both directions: `overflow-wrap` alone breaks "Wohnungen"
 * into "Wohn / ungen", and `min-width: 0` alone lets that word shrink below itself and run under
 * its neighbour. Measured on the apartment page at 390 pixels on 09.09.2026.
 */
.rrg-crumb-current {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ================================================================== listing */

/**
 * The photo strip on an apartment page is capped in height.
 *
 * Swiper sizes its slides from the image, and a portrait photograph from a phone would otherwise
 * push the strip past a full screen — the visitor scrolls through one picture before reaching a
 * single fact about the flat.
 */
.rrg-gallery .swiper-slide img {
    max-height: 560px;
    object-fit: cover;
}

/**
 * The two arrows on the photo strip.
 *
 * The theme starts the strip with autoplay and without navigation, so the only way to reach the
 * second photograph was to wait for it or to guess that it can be dragged. A visitor who does
 * neither reads the page believing there is one picture of the flat.
 *
 * They are shown only with scripting, because that is the only state in which they do anything:
 * without it the strip is a stack of photographs and the arrows would be two buttons that answer
 * nothing.
 *
 * Quiet on purpose, and the same quiet as the rest of the site: a white disc, one hairline, the
 * heading colour for the chevron. No shadow, no gradient, nothing that grows or moves under the
 * pointer — hover darkens the line and the mark, and that is all. `inset-inline` rather than
 * left/right so the pair swaps itself round on the Arabic pages, where the strip runs the other
 * way. 2.75rem is a thumb on a phone, which is where this is most needed.
 */
.rrg-gallery__arrow {
    display: none;
}

html.js .rrg-gallery__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--rrg-hairline);
    border-radius: 50%;
    background: #fff;
    color: var(--rrg-heading);
    cursor: pointer;
}

.rrg-gallery__arrow--prev {
    inset-inline-start: 1rem;
}

.rrg-gallery__arrow--next {
    inset-inline-end: 1rem;
}

.rrg-gallery__arrow:hover,
.rrg-gallery__arrow:focus-visible {
    border-color: var(--rrg-heading);
}

.rrg-gallery__chevron {
    width: 1.25rem;
    height: 1.25rem;
}

/* The chevron points along the reading direction, so on the Arabic pages both are mirrored. */
[dir="rtl"] .rrg-gallery__chevron {
    transform: scaleX(-1);
}

.rrg-help p {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--rrg-muted);
}

/* =================================================================== filter */

/**
 * The filters follow the page down.
 *
 * `align-self: start` is what makes it work at all: a grid item stretches to the row height by
 * default, and an element as tall as its row can never move within it.
 *
 * The header of this site is not sticky, it scrolls away, so nothing stands above the column once
 * it has come to rest. `top` is therefore not a clearance for anything, it is the whole distance
 * the column keeps to the top edge, and one rem is all of it: the column is meant to dock at the
 * top, not to float a header's height below it. `max-height` carries the same rem plus the 1.5rem
 * the column ends above the bottom edge.
 */
@media (min-width: 992px) {
    .rrg-list__filters {
        position: sticky;
        top: 1rem;
        align-self: start;
        max-height: calc(100vh - 2.5rem);
        overflow-y: auto;
        /* The scrollbar appears only when the filters are longer than the screen; the padding keeps
           it off the fields when it does. */
        padding-inline-end: 0.5rem;
    }
}

/* ============================================================ infinite list */

.rrg-list__sentinel {
    height: 1px;
}

.rrg-list__status {
    margin: 2rem 0 0;
    text-align: center;
    font-size: 1rem;
    color: var(--rrg-muted);
}

/* With scripting the list grows as it is scrolled, so the numbered pages have nothing left to do.
   They stay in the markup — they are where the script reads the next address from, and they are
   what a visitor without scripting uses. */
html.js .rrg-list--infinite:not(.rrg-list--paged) .rrg-list__pages {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}