/*
 * RenditeRitter – proportionale Desktop-Skalierung
 * ------------------------------------------------
 * Ziel: Auf kleineren Desktop-/Notebook-Viewports bleibt die bestehende Optik
 * vollständig erhalten, wird aber als Ganzes kompakter. Dadurch skalieren
 * Typografie, Karten, Buttons, Icons, Abstände, Tabellen und Modale im selben
 * Verhältnis. Die vorhandene Mobilansicht (<= 900px) bleibt unangetastet.
 *
 * Diese Datei wird ausschließlich im öffentlichen Bereich geladen; der
 * Adminbereich ist bewusst ausgeschlossen.
 */
:root{--rr-desktop-scale:1;--rr-desktop-width:100%}

@media (min-width:901px) and (max-width:1799px),
       (min-width:901px) and (max-height:999px){
  :root{--rr-desktop-scale:.88;--rr-desktop-width:113.637%}
}

@media (min-width:901px) and (max-width:1599px),
       (min-width:901px) and (max-height:879px){
  :root{--rr-desktop-scale:.83;--rr-desktop-width:120.482%}
}

@media (min-width:901px) and (max-width:1399px),
       (min-width:901px) and (max-height:779px){
  :root{--rr-desktop-scale:.79;--rr-desktop-width:126.583%}
}

@media (min-width:901px){
  html{
    overflow-x:hidden;
  }
  body{
    /* CSS zoom skaliert nicht nur Schrift, sondern die komplette öffentliche
       Oberfläche proportional. Die Gegenbreite hält die nutzbare Browserbreite
       nach der Skalierung bei 100 %. */
    zoom:var(--rr-desktop-scale);
    width:var(--rr-desktop-width);
    /* Die durch die Gegenbreite entstehende Zusatzfläche wird gleichmäßig
       links und rechts verteilt. So bleibt die komplette skalierte Seite
       im sichtbaren Browserbereich zentriert, statt nach rechts überzulaufen. */
    margin-left:calc((100% - var(--rr-desktop-width)) / 2);
    margin-right:calc((100% - var(--rr-desktop-width)) / 2);
  }
}

/*
 * Desktop-Modale innerhalb der global gezoomten Oberfläche
 * ---------------------------------------------------------
 * Viewport-Einheiten (vh/dvh) werden durch CSS zoom ebenfalls verkleinert.
 * Ohne Ausgleich bekommen Modale auf kleineren Desktop-Displays deshalb nur
 * ca. 70–80 % der tatsächlich sichtbaren Browserhöhe. Die folgenden Regeln
 * geben allen öffentlichen Modal-Overlays wieder die volle sichtbare Höhe und
 * den großen Modal-Shells den vorgesehenen Platz. Typografie und Inhalte
 * bleiben weiterhin mit dem restlichen Projekt proportional skaliert.
 */
@media (min-width:901px){
  :root{--rr-desktop-inverse:1}

  /* Vollbild-Overlays: die Höhe gegen den Body-Zoom kompensieren. */
  .etf-modal,
  .anfrage-modal,
  .vm-anspar-modal,
  .vm-ausz-modal,
  .rr-av-modal,
  .rr-consult-modal,
  .rr-advisor-finder-modal,
  .rr-login-modal,
  .rr-admin-modal,
  .rr-modal-backdrop,
  .rr-public-startyear-modal,
  .berechnung-v2,
  .rr-print-choice-modal,
  .rr-procon-modal,
  #consentOverlay,
  #loadingModal,
  #rrInvalidSimulationModal{
    height:calc(100vh * var(--rr-desktop-inverse));
    min-height:calc(100vh * var(--rr-desktop-inverse));
    box-sizing:border-box;
  }

  /* Große Dialoge dürfen den real sichtbaren Desktop-Viewport ausnutzen. */
  .vm-ausz-box,
  .vm-anspar-box,
  .rr-av-modal-box,
  .anfrage-modal-box,
  .rr-login-box,
  .rr-admin-box,
  .rr-print-choice-box,
  .rr-procon-shell,
  .berechnung-v2-box,
  .etf-modal-content{
    max-height:calc((100vh * var(--rr-desktop-inverse)) - 36px);
  }

  /* Die großen Auszahlungs-/Ansparmodale haben teilweise eine feste vh-Höhe.
     Auch diese wird auf die tatsächlich verfügbare Browserhöhe bezogen. */
  .vm-ausz-box,
  .vm-anspar-box,
  .rr-av-modal-box{
    height:min(calc((100vh * var(--rr-desktop-inverse)) - 36px), 900px);
  }
}

@media (min-width:901px) and (max-width:1799px),
       (min-width:901px) and (max-height:999px){
  :root{--rr-desktop-inverse:1.13637}
}
@media (min-width:901px) and (max-width:1599px),
       (min-width:901px) and (max-height:879px){
  :root{--rr-desktop-inverse:1.20482}
}
@media (min-width:901px) and (max-width:1399px),
       (min-width:901px) and (max-height:779px){
  :root{--rr-desktop-inverse:1.26583}
}

/*
 * Kleine Desktop-/Notebook-Viewports: klassische Modale, Inhalt kompakter.
 * -----------------------------------------------------------------------
 * Die Dialogfläche bleibt sichtbar als Modal (Außenabstand, Rundung,
 * abgedunkelter Hintergrund). Nur der komplette Dialog INKLUSIVE Inhalt wird
 * auf knappen Desktop-Viewports zusätzlich proportional verkleinert. Breite
 * und Höhe werden gegen diesen inneren Zoom kompensiert, damit der Dialog
 * trotzdem den verfügbaren Platz nutzt. Die Mobilregeln <= 900px bleiben
 * davon unberührt.
 */
@media (min-width:901px) and (max-width:1599px),
       (min-width:901px) and (max-height:879px){
  :root{--rr-modal-compact-scale:.88}

  .etf-modal,
  .anfrage-modal,
  .vm-anspar-modal,
  .vm-ausz-modal,
  .rr-av-modal,
  .rr-consult-modal,
  .rr-advisor-finder-modal,
  .rr-login-modal,
  .rr-admin-modal,
  .rr-modal-backdrop,
  .rr-public-startyear-modal,
  .berechnung-v2,
  .rr-print-choice-modal,
  .rr-procon-modal,
  .modal-overlay,
  #consentOverlay,
  #loadingModal,
  #rrInvalidSimulationModal{
    width:calc(100vw * var(--rr-desktop-inverse)) !important;
    height:calc(100vh * var(--rr-desktop-inverse)) !important;
    min-width:0 !important;
    min-height:0 !important;
    inset:0 auto auto 0 !important;
    margin:0 !important;
    padding:24px !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
  }

  .vm-ausz-box,
  .vm-anspar-box,
  .rr-av-modal-box,
  .anfrage-modal-box,
  .rr-login-box,
  .rr-admin-box,
  .rr-print-choice-box,
  .rr-procon-shell,
  .berechnung-v2-box,
  .etf-modal-content,
  .rr-consult-modal-card,
  .rr-modal-card,
  .modal-box{
    /* Der Dialog bleibt optisch ein Modal. Der zusätzliche Zoom verkleinert
       Typografie, Karten, Tabellen, Grafiken, Icons und Abstände gemeinsam. */
    zoom:var(--rr-modal-compact-scale);
    width:min(calc(94vw * var(--rr-desktop-inverse) / var(--rr-modal-compact-scale)), 1780px) !important;
    max-width:calc(94vw * var(--rr-desktop-inverse) / var(--rr-modal-compact-scale)) !important;
    height:auto !important;
    max-height:calc((94vh * var(--rr-desktop-inverse)) / var(--rr-modal-compact-scale)) !important;
    min-height:0 !important;
    margin:auto !important;
    border-radius:28px !important;
    box-sizing:border-box !important;
  }

  .vm-ausz-box,
  .vm-anspar-box,
  .rr-av-modal-box{
    height:calc((94vh * var(--rr-desktop-inverse)) / var(--rr-modal-compact-scale)) !important;
    overflow:hidden !important;
  }
}

/* Auf besonders niedrigen Desktopfenstern wird nur der Modalinhalt noch eine
   Stufe kompakter; die Seite selbst behält ihre bestehende Skalierung. */
@media (min-width:901px) and (max-height:749px){
  :root{--rr-modal-compact-scale:.80}
}


/*
 * Kontakt- und Ansprechpartnerauswahl: kompletter Dialog scrollt
 * --------------------------------------------------------------
 * Bei diesen beiden Dialogen soll auf knappen Desktop-Viewports nicht eine
 * innere Karte abgeschnitten werden. Die Hintergrundseite bleibt gesperrt;
 * stattdessen übernimmt das feste Overlay selbst den vertikalen Scroll.
 * Dadurch sitzt die Scrollbar am rechten Browserrand und bewegt den kompletten
 * Dialog inklusive Kopf, Eingabefeldern, Ergebnissen und Senden-Button.
 */
@media (min-width:901px){
  .anfrage-modal,
  .rr-advisor-finder-modal{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    align-items:flex-start !important;
    justify-content:center !important;
  }

  .anfrage-modal-box,
  .rr-advisor-finder-box{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin-top:20px !important;
    margin-bottom:20px !important;
  }

  /* Das Kontaktfenster darf seinen vollständigen Inhalt behalten. Das bereits
     vorhandene overflow:hidden dient nur der Rundung des weißen Dialogs und
     beschneidet ohne max-height keinen Formularinhalt mehr. */
  .anfrage-modal-box{
    overflow:hidden !important;
  }

  .rr-advisor-finder-box{
    overflow:visible !important;
  }
}

@media (min-width:901px) and (max-width:1599px),
       (min-width:901px) and (max-height:879px){
  .anfrage-modal-box,
  .rr-advisor-finder-box{
    /* Bei der kompakten Desktopdarstellung bleibt das Modal selbst ein Dialog;
       nur seine natürliche Gesamthöhe darf über den Viewport hinausgehen und
       wird dann vom Overlay gescrollt. */
    max-height:none !important;
    height:auto !important;
  }

  .rr-advisor-finder-box{
    zoom:var(--rr-modal-compact-scale);
    width:min(calc(760px / var(--rr-modal-compact-scale)), calc(94vw * var(--rr-desktop-inverse) / var(--rr-modal-compact-scale))) !important;
    max-width:calc(94vw * var(--rr-desktop-inverse) / var(--rr-modal-compact-scale)) !important;
  }
}

/* ========================================================================
 * Kontakt + Ansprechpartner – Scrollverhalten Desktop (2026-10-07)
 * ========================================================================
 * Kontakt: Dialog bleibt fest im Viewport; nur der Inhaltsbereich scrollt.
 * Ansprechpartner: keine innere Scrollbox. Das Overlay selbst übernimmt den
 * kompletten vertikalen Scroll, sodass die Scrollbar am Browserrand sitzt und
 * Kopf, Formular und Treffer gemeinsam bewegt werden.
 */
@media (min-width:901px){
  /* Kontaktmodal: Header sichtbar lassen, Inhalt innerhalb des Dialogs scrollen. */
  #AnfrageModal{
    overflow:hidden !important;
    align-items:center !important;
    justify-content:center !important;
  }
  #AnfrageModal > .anfrage-modal-box{
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    max-height:calc((94vh * var(--rr-desktop-inverse)) / var(--rr-modal-compact-scale, 1)) !important;
    overflow:hidden !important;
    margin:auto !important;
  }
  #AnfrageModal .anfrage-modal-header{
    flex:0 0 auto !important;
  }
  #AnfrageModal .anfrage-modal-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }

  /* Ansprechpartner-Finder: der komplette Dialog läuft unter EINER Scrollbar
     am rechten Rand des Overlays. Keine Scrollbegrenzung am weißen Kasten. */
  #rrAdvisorFinderModal{
    display:none;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    bottom:auto !important;
    width:calc(100vw * var(--rr-desktop-inverse)) !important;
    height:calc(100vh * var(--rr-desktop-inverse)) !important;
    min-height:calc(100vh * var(--rr-desktop-inverse)) !important;
    padding:28px !important;
    box-sizing:border-box !important;
    overflow-y:scroll !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    align-items:initial !important;
    justify-content:initial !important;
  }
  #rrAdvisorFinderModal.is-open{display:block !important;}
  #rrAdvisorFinderModal > .rr-advisor-finder-box{
    /* Kein zweiter Zoom: Der Finder sitzt bereits in der global skalierten
       Seite. So bleibt seine reale Scrollhöhe für das Overlay korrekt. */
    zoom:1 !important;
    width:min(760px, calc(94vw * var(--rr-desktop-inverse))) !important;
    max-width:calc(94vw * var(--rr-desktop-inverse)) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    margin:20px auto !important;
    box-sizing:border-box !important;
  }
}

/* ========================================================================
 * Analyse + Ansprechpartner – fester Kopf, scrollbarerer Inhalt (2026-10-07)
 * ======================================================================== */
@media (min-width:901px){
  /* Portfolioanalyse: Modal bleibt im Viewport. Nur der Bereich unterhalb
     von Überschrift/Beschreibung/X scrollt. */
  #AnalyseModal{
    overflow:hidden !important;
    align-items:center !important;
    justify-content:center !important;
  }
  #AnalyseModal > .anfrage-modal-box{
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    max-height:calc((94vh * var(--rr-desktop-inverse)) / var(--rr-modal-compact-scale, 1)) !important;
    margin:auto !important;
    overflow:hidden !important;
  }
  #AnalyseModal .anfrage-modal-header{flex:0 0 auto !important;}
  #AnalyseModal .analyse-v2-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }

  /* Ansprechpartner: gleicher Aufbau. Die Treffer vergrößern nicht mehr den
     Dialog über den Bildschirmrand hinaus, sondern nur den Scrollinhalt. */
  #rrAdvisorFinderModal{
    display:none !important;
    position:fixed !important;
    inset:0 !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    padding:28px !important;
    overflow:hidden !important;
    align-items:center !important;
    justify-content:center !important;
  }
  #rrAdvisorFinderModal.is-open{display:flex !important;}
  #rrAdvisorFinderModal > .rr-advisor-finder-box{
    zoom:var(--rr-modal-compact-scale, 1) !important;
    width:min(calc(760px / var(--rr-modal-compact-scale, 1)), calc(94vw * var(--rr-desktop-inverse) / var(--rr-modal-compact-scale, 1))) !important;
    max-width:calc(94vw * var(--rr-desktop-inverse) / var(--rr-modal-compact-scale, 1)) !important;
    height:auto !important;
    max-height:calc((92vh * var(--rr-desktop-inverse)) / var(--rr-modal-compact-scale, 1)) !important;
    min-height:0 !important;
    margin:auto !important;
    padding:0 !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }
  #rrAdvisorFinderModal .rr-advisor-finder-header{
    position:relative;
    flex:0 0 auto;
    padding:30px 30px 0;
  }
  #rrAdvisorFinderModal .rr-advisor-finder-body{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    padding:0 30px 30px;
  }
  #rrAdvisorFinderModal .rr-advisor-finder-close{right:22px;top:15px;}
}

/* Ansprechpartner-Finder: Inhaltsbereich wie bei den übrigen RenditeRitter-Modalen */
@media (min-width:901px){
  #rrAdvisorFinderModal > .rr-advisor-finder-box{
    background:#fff !important;
  }
  #rrAdvisorFinderModal .rr-advisor-finder-header{
    background:#fff !important;
  }
  #rrAdvisorFinderModal .rr-advisor-finder-body{
    background:#f8fafc !important;
    border-top:1px solid #e2e8f0 !important;
    padding-top:24px !important;
  }
}

/* ========================================================================
 * Kleine System-/Meldungsmodale – responsive Absicherung (2026-10-07)
 * ========================================================================
 * Diese Dialoge sollen durch die globale Desktop-Skalierung niemals auf die
 * Breite eines großen Inhaltsmodals gezogen werden. Sie bleiben kompakte
 * Meldungsfenster und sind auch bei geringer Höhe vollständig bedienbar.
 */
@media (min-width:901px){
  /* Ladefenster: bewusst kompakt. Der generische .modal-box-Selektor aus der
     Inhaltsmodal-Skalierung darf hier nicht greifen. */
  #loadingModal > .loading-box{
    zoom:1 !important;
    width:min(420px, calc(100% - 48px)) !important;
    max-width:420px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100% - 48px) !important;
    margin:auto !important;
    padding:35px !important;
    border-radius:22px !important;
    overflow:auto !important;
    box-sizing:border-box !important;
  }

  /* Zentrale Fehler-, Hinweis-, Portfolio- und Startjahrmeldungen. */
  .rr-modal-backdrop > .rr-modal-card{
    zoom:1 !important;
    width:min(680px, calc(100% - 48px)) !important;
    max-width:680px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100% - 48px) !important;
    margin:auto !important;
    border-radius:26px !important;
    overflow:hidden !important;
  }
  .rr-modal-backdrop > .rr-modal-card .rr-modal-body{
    min-height:0 !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }

  /* Kleine Bestätigungsdialoge im Beratermodus. */
  .rr-consult-modal > .rr-consult-modal-card{
    zoom:1 !important;
    width:min(520px, calc(100% - 48px)) !important;
    max-width:520px !important;
    height:auto !important;
    max-height:calc(100% - 48px) !important;
    overflow:auto !important;
    margin:auto !important;
  }

  /* Ungültige/abgelaufene Simulation. */
  #rrInvalidSimulationModal > .rr-invalid-card{
    width:min(560px, calc(100% - 48px)) !important;
    max-width:560px !important;
    max-height:calc(100% - 48px) !important;
    overflow:auto !important;
    margin:auto !important;
    box-sizing:border-box !important;
  }

  /* Datenschutz ist inhaltlich länger, bleibt aber sicher innerhalb des
     sichtbaren Bereichs und scrollt im Dialog. */
  #consentOverlay > #consentModal{
    width:min(760px, calc(100% - 48px)) !important;
    max-width:760px !important;
    max-height:calc(100% - 48px) !important;
    overflow-y:auto !important;
    margin:auto !important;
    box-sizing:border-box !important;
  }
}

/* Mobil: kleine Meldungen bleiben als kompakte Dialoge erkennbar und werden
   nicht durch die allgemeine Vollbildregel für große Inhaltsmodale aufgeblasen. */
@media (max-width:900px){
  #loadingModal{padding:12px !important;align-items:center !important;justify-content:center !important;}
  #loadingModal > .loading-box{
    width:min(420px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    height:auto !important;
    max-height:calc(100dvh - 24px) !important;
    margin:auto !important;
    padding:24px 20px !important;
    border-radius:20px !important;
    overflow:auto !important;
  }

  .rr-modal-backdrop{padding:12px !important;align-items:center !important;justify-content:center !important;}
  .rr-modal-backdrop > .rr-modal-card{
    width:min(680px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    height:auto !important;
    max-height:calc(100dvh - 24px) !important;
    margin:auto !important;
    border-radius:20px !important;
    overflow:hidden !important;
  }
  .rr-modal-backdrop > .rr-modal-card .rr-modal-body{min-height:0 !important;overflow-y:auto !important;}

  .rr-consult-modal{padding:12px !important;}
  .rr-consult-modal > .rr-consult-modal-card{
    width:min(520px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100dvh - 24px) !important;
    overflow:auto !important;
    margin:auto !important;
    box-sizing:border-box !important;
  }

  #rrInvalidSimulationModal{padding:12px !important;}
  #rrInvalidSimulationModal > .rr-invalid-card{
    width:calc(100vw - 24px) !important;
    max-width:560px !important;
    max-height:calc(100dvh - 24px) !important;
    overflow:auto !important;
    margin:auto !important;
  }
}