/* ============================================================
   RICHTWERT CALCULATOR – immoengine Design
   Extends landing.css + vpi-calculator.css design tokens
   for richtwert calculator subpage
   ============================================================ */

/* --- Tab Navigation --- */
.ie-rw-tabs {
    display: flex;
    gap: 0;
    background: var(--ie-white);
    border-radius: var(--ie-radius-lg) var(--ie-radius-lg) 0 0;
    overflow-x: auto;
    border: 1px solid var(--ie-gray-200);
    border-bottom: 2px solid var(--ie-gray-200);
    -webkit-overflow-scrolling: touch;
}

.ie-rw-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-family: var(--ie-font);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ie-gray-500);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: var(--ie-transition);
    white-space: nowrap;
    position: relative;
    margin-bottom: -2px;
}

.ie-rw-tab:hover {
    color: var(--ie-gray-700);
    background: var(--ie-gray-50);
}

.ie-rw-tab.active {
    color: var(--ie-red);
    border-bottom-color: var(--ie-red);
    background: rgba(242, 13, 13, 0.03);
    font-weight: 700;
}

.ie-rw-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ie-rw-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--ie-white);
    background: var(--ie-red);
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

/* --- Tab Content --- */
.ie-rw-content {
    display: none;
    padding: 32px 0 0;
    animation: ieRwFadeIn 0.3s ease;
}

.ie-rw-content.active {
    display: block;
}

@keyframes ieRwFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Richtwerte Cards Grid (Aktuelle Richtwerte) --- */
.ie-rw-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.ie-rw-card {
    background: var(--ie-white);
    border: 1px solid var(--ie-gray-200);
    border-radius: var(--ie-radius);
    padding: 20px 22px;
    transition: var(--ie-transition);
    cursor: default;
}

.ie-rw-card:hover {
    box-shadow: var(--ie-shadow);
    border-color: var(--ie-gray-300);
    transform: translateY(-2px);
}

.ie-rw-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ie-rw-card-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ie-dark);
}

.ie-rw-badge-highest {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ie-red);
    background: rgba(242, 13, 13, 0.08);
    border-radius: 99px;
}

.ie-rw-badge-lowest {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ie-gray-600);
    background: var(--ie-gray-100);
    border-radius: 99px;
}

.ie-rw-card-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--ie-red);
    letter-spacing: -0.02em;
}

.ie-rw-card-unit {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ie-gray-500);
    margin-left: 2px;
}

/* --- Scope Box (Anwendungsbereich) --- */
.ie-rw-scope-box {
    background: var(--ie-gray-50);
    border: 1px solid var(--ie-gray-200);
    border-radius: var(--ie-radius);
    padding: 24px 28px;
}

.ie-rw-scope-box h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ie-dark);
    margin-bottom: 14px;
}

.ie-rw-scope-box h4 svg {
    color: var(--ie-red);
}

.ie-rw-scope-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ie-rw-scope-box li {
    position: relative;
    padding: 6px 0 6px 20px;
    font-size: 0.88rem;
    color: var(--ie-gray-700);
    line-height: 1.5;
}

.ie-rw-scope-box li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--ie-red);
    font-weight: 700;
}

.ie-rw-scope-box li strong {
    color: var(--ie-dark);
}

/* --- Historical Controls --- */
.ie-rw-historical-controls {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.ie-rw-historical-notes {
    margin-top: 20px;
    padding: 16px 20px;
    background: var(--ie-gray-50);
    border-radius: var(--ie-radius-sm);
    border: 1px solid var(--ie-gray-100);
}

.ie-rw-historical-notes p {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ie-gray-600);
    margin-bottom: 6px;
}

.ie-rw-historical-notes ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ie-rw-historical-notes li {
    font-size: 0.78rem;
    color: var(--ie-gray-500);
    padding: 2px 0 2px 16px;
    position: relative;
    line-height: 1.5;
}

.ie-rw-historical-notes li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--ie-gray-400);
}

/* --- Footer --- */
.ie-rw-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 28px;
    background: var(--ie-gray-50);
    border-top: 1px solid var(--ie-gray-200);
    border-radius: 0 0 var(--ie-radius-lg) var(--ie-radius-lg);
    margin-top: 32px;
    font-size: 0.78rem;
    color: var(--ie-gray-500);
}

.ie-rw-footer strong {
    font-weight: 700;
    color: var(--ie-gray-600);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .ie-rw-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ie-rw-tabs {
        border-radius: var(--ie-radius) var(--ie-radius) 0 0;
    }

    .ie-rw-tab {
        padding: 12px 16px;
        font-size: 0.82rem;
    }

    .ie-rw-tab svg {
        display: none;
    }

    .ie-rw-content {
        padding: 24px 0 0;
    }

    .ie-rw-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ie-rw-card {
        padding: 16px 18px;
    }

    .ie-rw-card-value {
        font-size: 1.3rem;
    }

    .ie-rw-scope-box {
        padding: 18px 20px;
    }

    .ie-rw-historical-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .ie-rw-footer {
        flex-direction: column;
        text-align: center;
    }

    .ie-calc-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .ie-rw-tab {
        padding: 10px 12px;
        font-size: 0.78rem;
    }
}

/* --- IE Mietzins Accordion & Checkboxes --- */
.ie-accordion {
    border: 1px solid var(--ie-gray-200);
    border-radius: var(--ie-radius);
    margin-bottom: 12px;
    background: var(--ie-white);
    overflow: hidden;
    transition: var(--ie-transition);
}

.ie-accordion.open {
    border-color: var(--ie-red);
    box-shadow: 0 4px 12px rgba(242, 13, 13, 0.08);
}

.ie-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: var(--ie-transition);
}

.ie-accordion-header:hover {
    background: var(--ie-gray-50);
}

.ie-accordion.open .ie-accordion-header {
    background: rgba(242, 13, 13, 0.03);
    border-bottom: 1px solid rgba(242, 13, 13, 0.1);
}

.ie-accordion-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ie-dark);
}

.ie-accordion-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ie-accordion-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ie-gray-500);
    background: var(--ie-gray-100);
    padding: 2px 8px;
    border-radius: 99px;
}

.ie-accordion.open .ie-accordion-count {
    color: var(--ie-red);
    background: rgba(242, 13, 13, 0.1);
}

.ie-accordion-icon {
    font-size: 0.8rem;
    color: var(--ie-gray-400);
    transition: transform 0.3s;
}

.ie-accordion.open .ie-accordion-icon {
    transform: rotate(180deg);
    color: var(--ie-red);
}

.ie-accordion-content {
    display: none;
    padding: 12px;
}

.ie-accordion.open .ie-accordion-content {
    display: block;
    animation: ieRwFadeIn 0.3s ease;
}

.ie-checkbox-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 6px;
    border-radius: var(--ie-radius-sm);
    background: var(--ie-gray-50);
    border: 1px solid var(--ie-gray-100);
    cursor: pointer;
    transition: var(--ie-transition);
}

.ie-checkbox-row:last-child {
    margin-bottom: 0;
}

.ie-checkbox-row:hover {
    background: var(--ie-white);
    border-color: var(--ie-gray-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.ie-checkbox-row.selected {
    background: rgba(242, 13, 13, 0.03);
    border-color: rgba(242, 13, 13, 0.3);
}

.ie-checkbox-label {
    font-size: 0.88rem;
    color: var(--ie-dark);
    font-weight: 500;
}

.ie-checkbox-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ie-checkbox-value {
    font-size: 0.85rem;
    font-weight: 700;
}

.ie-checkbox-value.positive {
    color: var(--ie-green);
}

.ie-checkbox-value.negative {
    color: var(--ie-red);
}

.ie-checkbox-input {
    width: 20px;
    height: 20px;
    accent-color: var(--ie-red);
    cursor: pointer;
}

.ie-mz-result {
    background: var(--ie-white);
    border: 2px solid var(--ie-red);
    border-radius: var(--ie-radius-lg);
    box-shadow: 0 10px 30px rgba(242, 13, 13, 0.08);
    position: sticky;
    top: 24px;
}

.ie-mz-result-header {
    text-align: center;
    padding: 24px 24px 20px;
    background: rgba(242, 13, 13, 0.02);
    border-bottom: 1px solid rgba(242, 13, 13, 0.1);
    border-radius: calc(var(--ie-radius-lg) - 2px) calc(var(--ie-radius-lg) - 2px) 0 0;
}

.ie-mz-result-total {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--ie-red);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 8px 0 4px;
}

.ie-mz-result-body {
    padding: 20px 24px;
}

.ie-mz-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.88rem;
    color: var(--ie-gray-600);
}

.ie-mz-result-row.total {
    border-top: 1px solid var(--ie-gray-200);
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
    color: var(--ie-dark);
}

/* ============================================================
   BUNDESLAND NAVIGATION CHIPS
   ============================================================ */
.ie-bl-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 24px 0 8px;
    justify-content: center;
}

.ie-bl-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--ie-white);
    border: 1px solid var(--ie-gray-200);
    border-radius: 99px;
    font-family: var(--ie-font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ie-gray-700);
    text-decoration: none;
    transition: var(--ie-transition);
    white-space: nowrap;
}

.ie-bl-chip:hover {
    border-color: var(--ie-red);
    color: var(--ie-red);
    box-shadow: 0 4px 12px rgba(242, 13, 13, 0.08);
    transform: translateY(-1px);
}

.ie-bl-chip.active {
    background: var(--ie-red);
    border-color: var(--ie-red);
    color: var(--ie-white);
    box-shadow: 0 4px 16px rgba(242, 13, 13, 0.2);
}

.ie-bl-chip.active .ie-bl-chip-value {
    color: rgba(255, 255, 255, 0.85);
}

.ie-bl-chip-value {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ie-gray-400);
}

/* Active card in grid */
.ie-rw-card-active {
    border-color: var(--ie-red) !important;
    box-shadow: 0 4px 16px rgba(242, 13, 13, 0.1) !important;
}

/* Bundesland content from WP editor */
.ie-bl-content {
    background: var(--ie-white);
    border: 1px solid var(--ie-gray-200);
    border-radius: var(--ie-radius-lg);
    padding: 32px 40px;
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--ie-gray-700);
}

.ie-bl-content h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ie-dark);
    margin: 28px 0 12px;
}

.ie-bl-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ie-dark);
    margin: 20px 0 10px;
}

.ie-bl-content p {
    margin-bottom: 16px;
}

.ie-bl-content ul,
.ie-bl-content ol {
    padding-left: 24px;
    margin-bottom: 16px;
}

.ie-bl-content li {
    margin-bottom: 6px;
}

.ie-bl-content strong {
    color: var(--ie-dark);
}

@media (max-width: 768px) {
    .ie-bl-nav {
        gap: 6px;
    }

    .ie-bl-chip {
        padding: 8px 14px;
        font-size: 0.78rem;
    }

    .ie-bl-chip-value {
        display: none;
    }

    .ie-bl-content {
        padding: 24px 20px;
    }
}
/* ============================================================
   KLICKBARKEIT DER BUNDESLAND-KACHELN UND -CHIPS  (06.08.2026)
   ============================================================
   Befund T. Lainer beim Durchsehen auf TEST: "man erkennt nicht, dass die
   Kacheln klickbar sind."

   Ursache war eindeutig: .ie-rw-card trug cursor: default - das Stylesheet
   sagte dem Browser also ausdruecklich, dass die Kachel nicht anklickbar ist,
   obwohl das Markup ein <a> ist. Dazu fehlte jede Andeutung eines Ziels.

   Geaendert wird nur, was als Link ausgezeichnet ist (a.ie-rw-card). Die
   Kacheln der Mobil-Ersatzliste auf der Startseite sind keine Links und
   bleiben unveraendert.
   ============================================================ */

a.ie-rw-card {
    cursor: pointer;
    position: relative;
    padding-right: 40px;
}

/* Pfeil als Zielhinweis - ruhend zurueckhaltend, beim Ueberfahren deutlich */
a.ie-rw-card::after {
    content: "›";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ie-gray-300);
    transition: var(--ie-transition);
}

a.ie-rw-card:hover {
    border-color: var(--ie-red);
    box-shadow: 0 4px 16px rgba(242, 13, 13, 0.10);
}

a.ie-rw-card:hover::after {
    color: var(--ie-red);
    right: 13px;
}

a.ie-rw-card:hover .ie-rw-card-name {
    color: var(--ie-red);
}

/* Tastaturbedienung sichtbar machen */
a.ie-rw-card:focus-visible,
.ie-bl-chip:focus-visible {
    outline: 2px solid var(--ie-red);
    outline-offset: 2px;
}

/* Die Chips lasen sich im Ruhezustand wie Etiketten. Ein leichter Farbton
   und ein spuerbarerer Hover machen sie als Schaltflaeche erkennbar. */
.ie-bl-chip {
    cursor: pointer;
    background: var(--ie-gray-50, #F8F9FA);
}

.ie-bl-chip:hover {
    background: var(--ie-white);
    border-color: var(--ie-red);
    color: var(--ie-red);
    box-shadow: 0 4px 12px rgba(242, 13, 13, 0.12);
    transform: translateY(-2px);
}

.ie-bl-chip:hover .ie-bl-chip-value {
    color: var(--ie-red);
}

/* Nachschaerfung 06.08.2026: Die Chips lasen sich als ausgegraut, also
   inaktiv. Gemessen: Wert in #AAA auf #F9F9F9 - rund 2,3:1 Kontrast und damit
   deutlich unter den geforderten 4,5:1. Genau so sieht in Oberflaechen ein
   DEAKTIVIERTES Element aus; kein Wunder, dass niemand darauf klickt.
   Dazu ein kleiner Pfeil als Hinweis, dass dahinter eine eigene Seite liegt. */

.ie-bl-chip {
    border-color: var(--ie-gray-300, #D4D4D4);
    padding-right: 14px;
}

.ie-bl-chip-value {
    color: var(--ie-gray-700, #4A4A4A);
}

.ie-bl-chip::after {
    content: "›";
    margin-left: 2px;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--ie-gray-400, #AAA);
    transition: var(--ie-transition);
}

.ie-bl-chip:hover::after {
    color: var(--ie-red);
    transform: translateX(2px);
}

/* Der aktive Chip zeigt die eigene Seite an - dort kein Zielhinweis. */
.ie-bl-chip.active::after {
    display: none;
}

/* Kennzeichnung der gerade geoeffneten Landesseite (06.08.2026).
   Stand vorher inline im Template und in Rot - also in derselben Farbe wie das
   Abzeichen fuer den hoechsten Richtwert, was zwei verschiedene Aussagen
   gleich aussehen liess. Gruen trennt "das ist Ihre Seite" sichtbar von
   "das ist der hoechste Wert".
   Textton #166534 statt #16A34A: Der hellere Ton kaeme auf rund 3,4:1 Kontrast
   und damit unter die geforderten 4,5:1. Beide Toene verwendet das Theme
   bereits. */
.ie-rw-badge-current {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #166534;
    background: rgba(22, 163, 74, 0.10);
    border-radius: 99px;
}

/* Die aktive Kachel trug denselben roten Rahmen wie der Hover-Zustand jeder
   anderen Kachel - "das ist Ihre Seite" und "hier koennen Sie hin" sahen also
   gleich aus. Zusammen mit dem gruenen Abzeichen jetzt durchgehend gruen. */
.ie-rw-card-active {
    border-color: #16A34A !important;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.12) !important;
}

/* Die aktive Kachel fuehrt auf die Seite, auf der man schon ist - kein
   Zielpfeil, kein roter Hover. */
a.ie-rw-card.ie-rw-card-active::after {
    display: none;
}

a.ie-rw-card.ie-rw-card-active:hover .ie-rw-card-name {
    color: inherit;
}

/* Zwei Kennzeichnungen koennen zusammentreffen - etwa Vorarlberg, wo die
   aktuelle Seite zugleich den hoechsten Richtwert traegt. Der Sammler haelt
   sie nebeneinander und laesst sie bei schmalen Kacheln umbrechen. */
.ie-rw-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}

/* ==========================================================================
   GRUENDERZEITVIERTEL
   Der Abschnitt, der jede Landesseite von den acht anderen unterscheidet.
   Bewusst ruhig gehalten: Er traegt Lesetext, keine Bedienelemente, und soll
   den Rechner darueber nicht ueberstrahlen.
   ========================================================================== */
.ie-gz-titel {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ie-dark);
    margin-bottom: 12px;
}

.ie-gz-intro {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ie-gray-700);
    max-width: 68ch;          /* Lesbare Zeilenlaenge, sonst laeuft der
                                 Absatz auf breiten Schirmen zu weit. */
    margin-bottom: 26px;
}

/* Hoechstens zwei Spalten. Mit auto-fill ergaben sich auf breiten Schirmen
   fuenf Spalten zu je 360 Pixeln - fuer Fliesstext zu schmal, die Saetze
   brachen nach drei bis vier Woertern um. */
.ie-gz-liste {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.ie-gz-karte {
    background: var(--ie-white);
    border: 1px solid var(--ie-gray-200);
    border-left: 3px solid var(--ie-red);
    border-radius: var(--ie-radius);
    padding: 18px 20px;
}

.ie-gz-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ie-dark);
    margin: 0 0 8px;
    line-height: 1.35;
}

/* Die Stadt steht in derselben Ueberschrift wie der Viertelname - beides
   zusammen ist der Begriff, nach dem gesucht wird ("Herz-Jesu-Viertel Graz").
   Optisch tritt sie zurueck, im Markup bleibt sie Teil des H3. */
.ie-gz-stadt {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ie-gray-500);
    letter-spacing: 0.02em;
    margin-top: 3px;
}

.ie-gz-text {
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--ie-gray-700);
    margin: 0;
}

.ie-gz-quelle {
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--ie-gray-500);
    max-width: 68ch;
    margin-top: 22px;
}

@media (max-width: 900px) {
    .ie-gz-liste {
        grid-template-columns: 1fr;
    }
}