/* ARVON. Farbwerte stehen ausschließlich in tokens.json; tokens.css wird generiert.
   Status und Schätzung bleiben als Text/Herleitung erkennbar, Zahlen sind Nachtblau. */
:root,body.app-design{
  --bg:var(--arvon-paper);--surface:var(--arvon-white);--surface-2:var(--arvon-flaeche);--elev:var(--arvon-white);
  --ink:var(--arvon-night);--ink-2:var(--arvon-night);--muted:var(--arvon-muted);--faint:var(--arvon-muted);
  --line:var(--arvon-linie);--line-2:color-mix(in srgb,var(--arvon-linie) 55%,var(--arvon-white));
  --bereich:var(--arvon-night);--bereich-tief:var(--arvon-night);--bereich-glanz:var(--arvon-muted);--bereich-licht:var(--surface-2);
  --navy:var(--arvon-night);--navy-2:var(--arvon-night);--navy-soft:var(--surface-2);--teal:var(--arvon-night);
  --akzent:var(--arvon-night);--onakzent:var(--arvon-white);--brand-gold:var(--arvon-sand);
  --pos:var(--arvon-night);--neg:var(--arvon-night);--warn:var(--arvon-night);--est:var(--arvon-night);
  --pos-bg:var(--surface-2);--neg-bg:var(--surface-2);--warn-bg:var(--surface-2);--est-bg:var(--surface-2);--est-line:var(--line);
  --karte-bg:var(--arvon-paper);--karte-land-1:var(--arvon-white);--karte-land-2:var(--surface-2);--karte-linie:var(--arvon-linie);--karte-label:var(--arvon-muted);
  --sh:0 4px 18px rgb(var(--arvon-night-rgb) / .035);--sh-2:0 16px 42px rgb(var(--arvon-night-rgb) / .08);
}
body.app-design:has(#tabs button[data-v].on),
body.app-design :is(#v-kunden,#v-kundenmodus,#v-db,#v-karte,#v-daten,.tabs-in button){
  --bereich:var(--arvon-night);--bereich-tief:var(--arvon-night);--bereich-glanz:var(--arvon-muted);--bereich-licht:var(--surface-2);
  --navy:var(--arvon-night);--navy-2:var(--arvon-night);--teal:var(--arvon-night);
}
body.app-design,body.app-design .wrap,body.app-design .view{background-color:var(--arvon-paper)}
.arvon-lockup{display:flex;align-items:center;gap:12px;line-height:1}
.arvon-lockup img{display:block;width:42px;height:42px;flex:none}
.arvon-lockup img.arvon-wordmark{width:142px;height:auto}
.splash-wordmark{margin:0 0 24px;line-height:1}
.splash-wordmark img{display:block;width:250px;max-width:70vw;height:auto}
.splash-promise{max-width:32ch;margin:18px 0 0;color:var(--arvon-sand);font-size:16px;line-height:1.6}
.splash-caption{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--arvon-sand);margin:18px 0 0}
body.app-design .splash-overlay{background:var(--arvon-night)}
.splash-scrim{background:none;pointer-events:none}
.splash-scrim::after{display:none}
.splash-content{max-width:560px}
.splash-logo{width:112px;height:112px;padding:0;border-radius:0;background:none;box-shadow:none;margin-bottom:16px;animation:none}
.splash-gruss{background:none;border:0;padding:0;font-size:18px;font-weight:500;backdrop-filter:none;animation:none;color:var(--arvon-white)}
.splash-content .btn.primary{background:var(--arvon-sand);color:var(--arvon-night);box-shadow:none;border-radius:12px;margin-top:32px;animation:none;min-height:54px;font-weight:650}
.splash-content .btn.primary:hover{background:var(--arvon-white)}
/* Anmelden steht auf derselben dunklen Fläche wie der Splash und braucht
   deshalb dieselbe helle Schaltfläche (23.09.2026). Vorher trug er die
   normale Primärfarbe -- nachtblau auf nachtblau, praktisch unsichtbar;
   im Nutzerdurchlauf war nicht erkennbar, dass es ein Knopf ist. */
#anmeldung .btn.primary{background:var(--arvon-sand);color:var(--arvon-night);box-shadow:none;
  border:0;border-radius:12px;min-height:54px;font-weight:650}
#anmeldung .btn.primary:hover{background:var(--arvon-white)}
body.app-design #startArbeitszentrale::before{inset:0 0 50px;background:var(--arvon-night);mask-image:none}
body.app-design #startArbeitszentrale::after{display:none}
body.app-design #v-start .start-banner{height:auto;min-height:246px}
body.app-design #v-start .start-banner-text{align-items:flex-start;text-align:left;max-width:700px;margin:auto;padding:calc(26px + env(safe-area-inset-top)) 32px 24px}
body.app-design #v-start .arvon-lockup{margin-bottom:28px}
body.app-design #v-start .start-banner-gruss{color:var(--arvon-sand);text-shadow:none;font-size:13px;margin-top:10px}
body.app-design #v-start .start-banner-h{color:var(--arvon-white);font-weight:550;font-size:clamp(28px,4vw,38px);letter-spacing:-1px;text-shadow:none;margin-top:5px}
body.app-design #v-start .home-status{background:var(--arvon-white);border:1px solid var(--line-2);border-radius:16px;backdrop-filter:none;box-shadow:none}
body.app-design #v-start .home-status-count{background:var(--arvon-night);color:var(--arvon-white);box-shadow:none;border-radius:12px}
body.app-design #v-start .home-summary{border-radius:20px;border:1px solid var(--line-2);box-shadow:var(--sh)}
body.app-design #v-start .home-summary-footer{background:var(--arvon-paper)}
body.app-design #v-start .home-primary{background:var(--arvon-night);color:var(--arvon-white);border-radius:12px;border:0;box-shadow:none}
body.app-design #v-start .home-service-list button{border-radius:12px;box-shadow:none;font-size:12px;background:var(--arvon-white)}
body.app-design #v-start .home-service-list button[data-home-new]{background:var(--surface-2);border-color:var(--line);color:var(--arvon-night)}
body.app-design :is(#v-kunden,#v-kundenmodus,#v-db,#v-karte,#v-daten) :is(.obj-hero,.app-page-heading){background:var(--arvon-night)}
body.app-design .obj-hero::after,body.app-design .app-page-heading::after{background:url('mark.svg') right -20px center/240px no-repeat;opacity:.06}
body.app-design .app-eyebrow{color:var(--arvon-sand)}
body.app-design :is(.ocard,.card,.setup-box,.expose-box){border-radius:20px}
body.app-design .obj-leiste{border-radius:18px}
body.app-design .ocard-grid{border-radius:14px}
body.app-design nav.tabs{border-radius:20px 20px 0 0!important;box-shadow:0 -4px 24px rgb(var(--arvon-night-rgb) / .04);background:var(--arvon-white)}
body.app-design .tabs-in button{border-radius:14px}
body.app-design .tabs-in button.on,body.app-design .tabs-in button.on:not([data-v="start"]){background:var(--arvon-night);color:var(--arvon-white);box-shadow:none}
body.app-design .btn.primary{background:var(--arvon-night);border-color:var(--arvon-night);color:var(--arvon-white);box-shadow:none}
body.app-design :is(#v-kunden,#v-kundenmodus,#v-db,#v-karte,#v-daten) .btn.primary{background:var(--arvon-night);border-color:var(--arvon-night)}
body.app-design .btn.primary:hover,body.app-design #v-start .home-primary:hover{background:var(--arvon-objects)}
/* Keine bewertenden Zahlenfarben; die Bedeutung steht ausdrücklich im Text. */
body.app-design :is(.pos,.neg,.warn,.est,.tnum,.num,.val,.wert,.betrag,.ocard-preis,.start-expose-preis,.kpi-v,.kpi-value,input[type="number"]){color:var(--arvon-night)}
body.app-design :is(.flag,.badge,.chip,.tag,.pill,.cnt){color:var(--arvon-night);background:var(--surface-2);border-color:var(--line)}
body.app-design :is(h2,h3,h4){color:var(--arvon-night)}
body.app-design :is(.obj-hero,.app-page-heading) :is(h1,h2,h3){color:var(--arvon-white)}
body.app-design :is(.inp,.kprog-item) input{color:var(--arvon-night)}
@media(max-width:599px){
  body.app-design #v-start .start-banner{height:236px}
  body.app-design #v-start .start-banner-text{padding-left:24px;padding-right:24px}
  body.app-design #v-start .arvon-lockup{margin-bottom:24px}
  body.app-design #v-start .home-summary-footer{flex-wrap:wrap}
}
@media print{.arvon-lockup{color:var(--arvon-night)}.arvon-lockup img{background:var(--arvon-night);border-radius:4px}}
/* Der Verlauf gehört zur ganzen Startansicht. Keine endende Farbfläche am Banner. */
body.app-design #v-start{
  background-color:var(--arvon-paper);
  background-image:url("galaxy.svg"),linear-gradient(180deg,
    var(--arvon-night) 0px,
    color-mix(in srgb,var(--arvon-night) 96%,var(--arvon-sand)) 170px,
    color-mix(in srgb,var(--arvon-night) 78%,var(--arvon-sand)) 300px,
    color-mix(in srgb,var(--arvon-night) 35%,var(--arvon-sand)) 440px,
    var(--arvon-sand) 580px,
    color-mix(in srgb,var(--arvon-sand) 42%,var(--arvon-paper)) 740px,
    var(--arvon-paper) 940px);
  background-size:auto 650px,100% 100%;
  background-position:center -110px,center top;
  background-repeat:no-repeat;
  min-height:100%;
}
body.app-design #startArbeitszentrale::before,
body.app-design #startArbeitszentrale::after{display:none;background:none;mask-image:none}
body.app-design #v-start .start-banner,
body.app-design #v-start #startArbeitszentrale{background:transparent}
body.app-design #v-start .home-services{padding-top:26px}
body.app-design #v-start .home-services h2{color:var(--arvon-night)}
/* Bereichstöne dienen der Orientierung. Zahlen und Hauptaktionen bleiben Nachtblau. */
body.app-design[data-arvon-tab="start"]:has(#tabs button.on){--bereich:var(--arvon-night)}
body.app-design[data-arvon-tab="objekte"]:has(#tabs button.on){--bereich:var(--arvon-objects)}
body.app-design[data-arvon-tab="kunden"]:has(#tabs button.on){--bereich:var(--arvon-customers)}
body.app-design[data-arvon-tab="auswertung"]:has(#tabs button.on){--bereich:var(--arvon-analysis)}
body.app-design[data-arvon-tab="daten"]:has(#tabs button.on){--bereich:var(--arvon-muted)}
body.app-design[data-arvon-tab] :is(#v-kunden,#v-kundenmodus,#v-db,#v-karte,#v-daten,#v-auswertung){--bereich:inherit;--bereich-tief:var(--arvon-night);--bereich-licht:color-mix(in srgb,var(--bereich) 10%,var(--arvon-white));--bereich-glanz:var(--bereich)}
body.app-design[data-arvon-tab] :is(.obj-hero,.app-page-heading){background:linear-gradient(135deg,var(--arvon-night),color-mix(in srgb,var(--arvon-night) 62%,var(--bereich)));border-top:3px solid var(--bereich)}
body.app-design[data-arvon-tab] :is(.obj-hero,.app-page-heading)::before{display:none}
body.app-design[data-arvon-tab] .app-eyebrow{color:var(--arvon-sand)}
body.app-design[data-arvon-tab] :is(.obj-hero,.app-page-heading) :is(h1,h2){color:var(--arvon-white)}
body.app-design .tabs-in button[data-v="start"]{--tab-accent:var(--arvon-night)}
body.app-design .tabs-in button[data-v="objekte"]{--tab-accent:var(--arvon-objects)}
body.app-design .tabs-in button[data-v="kunden"]{--tab-accent:var(--arvon-customers)}
body.app-design .tabs-in button[data-v="auswertung"]{--tab-accent:var(--arvon-analysis);--home-nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3v18h17M8 16v-4M13 16V8M18 16V5'/%3E%3C/svg%3E")}
body.app-design .tabs-in button[data-v="daten"]{--tab-accent:var(--arvon-muted)}
body.app-design .tabs-in button.on,body.app-design .tabs-in button.on:not([data-v="start"]){background:color-mix(in srgb,var(--tab-accent) 12%,var(--arvon-white));color:var(--arvon-night);box-shadow:inset 0 -3px var(--tab-accent)}
body.app-design .tabs-in button.on .nav-icon{color:var(--tab-accent)}
/* Schrittanzeige: eine Farbe statt der Bereichsfarbe (22.09.2026, Wunsch
   Pascal). Vorher wechselte sie mit dem Reiter -- im Kundenreiter Gold, im
   Auswertungsreiter Grün. Jetzt überall Nachtblau. Der Fortschritt bleibt
   an gefüllt gegen hell erkennbar, nur die Farbe steht fest.
   --bereich wird hier für die Anzeige neu gesetzt, damit die Regeln
   darunter unverändert bleiben können. */
body.app-design .kprog{--bereich:var(--arvon-night);--navy:var(--arvon-night);--navy-2:var(--arvon-night);
  --navy-soft:color-mix(in srgb,var(--arvon-night) 10%,var(--arvon-white))}
body.app-design .kprog-circ{background:color-mix(in srgb,var(--arvon-night) 5%,var(--arvon-white))}
/* Auch die noch offene Verbindungslinie: sie war sandfarben und blieb als
   einziger warmer Ton in der sonst nachtblauen Anzeige stehen. */
body.app-design .kprog-step + .kprog-step::before{background:color-mix(in srgb,var(--arvon-night) 12%,var(--arvon-white))}
body.app-design .kprog-step.done::before,
body.app-design .kprog-step.here::before{background:var(--arvon-night)}
body.app-design .kprog-step.here .kprog-circ{background:var(--bereich);border-color:var(--bereich)}
body.app-design .kprog-step.done .kprog-circ{background:color-mix(in srgb,var(--bereich) 12%,var(--arvon-white));border-color:var(--line);color:var(--arvon-night)}
body.app-design .kprog-step.done .kprog-ico{background:var(--arvon-night)}
body.app-design .tabs-in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;overflow:visible}
body.app-design .tabs-in button{min-width:0;min-height:56px;padding:7px 2px}
body.app-design .tabs-in .nav-label{font-size:10px;white-space:nowrap;letter-spacing:-.15px}
body.app-design .tabs-in .cnt{display:none}
body.app-design #v-auswertung{padding:0 22px 110px}
body.app-design #v-auswertung .app-page-heading{padding-top:calc(56px + env(safe-area-inset-top));padding-bottom:48px;min-height:210px}
.arvon-analysis-list{max-width:950px;margin:24px auto}
.arvon-analysis-card,.arvon-analysis-empty{padding:24px;margin-bottom:18px;background:var(--arvon-white)}
.arvon-analysis-card h2{font-size:18px;margin-bottom:14px}
.arvon-analysis-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;border:0;border-top:1px solid var(--line-2);padding:16px 0;background:transparent;color:var(--arvon-night);text-align:left}
.arvon-analysis-row small{display:block;margin-top:4px;color:var(--arvon-muted)}
.arvon-analysis-row>span:last-child{color:var(--arvon-analysis);font-size:22px}
.arvon-analysis-empty p{color:var(--arvon-muted);max-width:52ch}
@media(max-width:599px){body.app-design #v-auswertung{padding-left:16px;padding-right:16px}.arvon-analysis-card,.arvon-analysis-empty{padding:20px}body.app-design .tabs-in{gap:2px;padding-left:10px;padding-right:10px}}
/* Ergebnisfläche in Nachtblau mit weißer Schrift (Wunsch Pascal, 22.09.2026).
   Bis v164 war sie sandfarben mit nachtblauer Zahl. Die Vorgabe „Zahlen sind
   Nachtblau" gilt unverändert für alle hellen Flächen; auf der dunklen
   Ergebnisfläche dreht sich nur das Paar um, die Palette bleibt dieselbe.
   .report-amount steht deshalb nicht mehr in der Nachtblau-Liste darunter --
   es kommt ausschließlich in dieser Fläche vor. */
body.app-design .report-hero{background:var(--arvon-night);color:var(--arvon-white)}
body.app-design .report-hero :is(h3,.report-amount,.report-eyebrow,.report-location,p){color:var(--arvon-white)}
body.app-design :is(.kr-v,.cash-label strong,.report-balance strong,.report-mini strong,.customer-report td){color:var(--arvon-night)}
body.app-design .wealth-label{fill:var(--arvon-night)}
body.app-design .wealth-equity{stroke:var(--arvon-night);stroke-dasharray:2 5}
body.app-design .wealth-legend .loan::before{background:repeating-linear-gradient(90deg,var(--arvon-night) 0 4px,transparent 4px 6px)}
body.app-design .wealth-legend .equity::before{background:repeating-linear-gradient(90deg,var(--arvon-night) 0 2px,transparent 2px 4px)}

/* Begruessung auf der Startseite in ARVON-Sand: die allgemeine Regel fuer
   Ueberschriften (body.app-design :is(h2,h3,h4){color:Nachtblau}) traf auch die
   Begruessung und machte sie auf dem nachtblauen Startbild fast unsichtbar. */
body.app-design .splash-gruss{color:var(--arvon-sand)}
/* Navigationsleiste am Handy wieder wie in der Fassung, die Pascal kannte:
   flache, eckige Leiste ueber die volle Breite, die einfach unten aufliegt.
   Runde Ecken, Schatten und der freigehaltene Streifen der iPhone-Systemzone
   liessen sie darueber schweben. Die Leiste ist 66px hoch, sitzt auf bottom:0
   und laesst unten nichts frei (--safe-pad:0). Der Grund hinter der App hat
   unten dieselbe Farbe, damit dort auch bei abweichender Anzeigehoehe kein
   heller Streifen sichtbar wird. Die Kopfzeile bleibt davon unberuehrt. */
@media(max-width:899px){
  html{background:var(--arvon-white)}
  body.app-design{--nav-h:66px;--safe-pad:0px;--nav-unten:90px}
  /* Die Leiste reicht 90px ueber die untere Kante des Anzeigebereichs hinaus.
     Sichtbar bleibt davon nichts, solange der Anzeigebereich bis zum
     Bildschirmrand geht. Endet er frueher (iPhone-Systemzone, Anzeigeleisten),
     fuellt die Leiste den Rest mit ihrer eigenen Farbe, statt einen hellen
     Streifen stehen zu lassen. Die Beschriftung bleibt an derselben Stelle,
     weil der Ueberstand reiner Innenabstand ist. */
  body.app-design nav.tabs{border-radius:0!important;box-shadow:none;
    border-top:1px solid var(--line);
    bottom:calc(-1 * var(--nav-unten))!important;
    height:calc(var(--nav-h) + var(--nav-unten))!important;
    padding-bottom:var(--nav-unten)!important}
  body.app-design .tabs-in{padding:8px 8px 14px;gap:2px}
  body.app-design .tabs-in button{min-height:44px;padding:2px 1px}
  /* Die aeusseren Beschriftungen ("Start", "Einstellungen") liefen bis an den
     Bildschirmrand und wurden dort angeschnitten: bei 393px blieben je Spalte
     nur 68px, "Einstellungen" braucht auf dem iPhone etwa genauso viel.
     Schmalerer Aussenabstand, kleinerer Spaltenabstand und eine mit der
     Bildschirmbreite mitwachsende Schrift geben jeder Beschriftung Luft. */
  body.app-design .tabs-in .nav-label{font-size:clamp(8.5px,2.45vw,10px);
    letter-spacing:-.2px;max-width:100%}
}

/* Objektfenster: die Ueberschrift steht auf dem Objektfoto und war je nach Bild
   kaum lesbar (die allgemeine Regel fuer Ueberschriften faerbt sie nachtblau,
   das Foto darunter ist beliebig hell). Titel und Objektart sitzen deshalb
   jetzt in einer abgerundeten, hellen Flaeche, die den Kontrast unabhaengig
   vom Bild sicherstellt. Wunsch von Pascal, 09.09.2026. */
body.app-design .expose-bild .titel{
  left:14px;right:14px;bottom:26px;padding:14px 18px;
  border-radius:20px;background:rgb(var(--arvon-white-rgb) / .93);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgb(var(--arvon-night-rgb) / .18);
  color:var(--arvon-night)}
body.app-design .expose-bild .titel h2{color:var(--arvon-night);text-shadow:none}
body.app-design .expose-bild .titel .ort{color:var(--arvon-muted)}

/* Navigationsleiste bleibt in jedem Reiter gleich. Der aktive Knopf wurde
   bisher im Bereichston eingefaerbt (Objekte blau, Kundenakte braun,
   Auswertung gruen, Einstellungen grau) und die Leiste wirkte dadurch bei
   jedem Antippen anders. Ueberbleibsel der Bereichsfarben, die auf den
   Seitenkoepfen weiter gelten. In der Leiste jetzt durchgehend Nachtblau.
   Wunsch von Pascal, 09.09.2026. */
body.app-design .tabs-in button{--tab-accent:var(--arvon-night)}
body.app-design .tabs-in button.on,
body.app-design .tabs-in button.on:not([data-v="start"]){
  background:color-mix(in srgb,var(--arvon-night) 12%,var(--arvon-white));
  color:var(--arvon-night);box-shadow:inset 0 -3px var(--arvon-night)}
body.app-design .tabs-in button.on .nav-icon{color:var(--arvon-night)}
/* Die aeusseren Knoepfe sollen nicht in der abgerundeten Bildschirmecke
   verschwinden: die Knopfreihe rueckt seitlich ein und bleibt mittig. Die
   Beschriftungen wachsen mit der Breite mit, deshalb bleibt trotzdem Reserve. */
@media(max-width:899px){
  body.app-design .tabs-in{padding-left:16px;padding-right:16px}
}

/* Weicher Uebergang in den Bereichen, wie auf der Startseite: der Seitenkopf
   endete bisher mit einer harten Kante zum hellen Inhalt. Der Verlauf gehoert
   jetzt zur ganzen Ansicht, oben der Bereichston, darunter ueber Sand ins
   Papierweiss. Der Kopf selbst ist durchsichtig und sitzt in diesem Verlauf.
   Wunsch von Pascal, 09.09.2026. */
body.app-design[data-arvon-tab] :is(#v-db,#v-kunden,#v-kundenmodus,#v-karte,#v-auswertung,#v-daten){
  background-color:var(--arvon-paper);
  background-image:linear-gradient(180deg,
    var(--arvon-night) 0px,
    color-mix(in srgb,var(--arvon-night) 90%,var(--bereich)) 150px,
    color-mix(in srgb,var(--arvon-night) 62%,var(--bereich)) 250px,
    color-mix(in srgb,var(--arvon-night) 30%,var(--arvon-sand)) 360px,
    var(--arvon-sand) 470px,
    color-mix(in srgb,var(--arvon-sand) 42%,var(--arvon-paper)) 620px,
    var(--arvon-paper) 800px);
  background-repeat:no-repeat;
  min-height:100%}
/* Die Liste der Ansichts-IDs muss hier stehen: die aeltere Regel weiter oben
   (Zeile 50) faerbt den Kopf ueber genau diese IDs nachtblau und wiegt sonst
   schwerer als eine Regel ohne IDs. Ohne sie bliebe die harte Kante. */
body.app-design[data-arvon-tab] :is(#v-db,#v-kunden,#v-kundenmodus,#v-karte,#v-auswertung,#v-daten) :is(.obj-hero,.app-page-heading){
  background:transparent;border-top:0}

/* Auf der Karte bleibt das Monatsergebnis sichtbar; Hintergründe öffnen sich bei Bedarf. */
.vorschlaege{color:var(--arvon-night)}
.vorschlaege #vorschlaegeTitel{margin:0 0 8px;letter-spacing:-.025em}
.vorschlag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px;align-items:start}
.vorschlag-karte{padding:20px;border:1px solid var(--arvon-linie);border-radius:22px;background:var(--arvon-paper);color:var(--arvon-night);overflow-wrap:anywhere;min-width:0}
.vorschlag-kopf{display:flex;align-items:flex-start;gap:10px}
.vorschlag-karte h3{margin:0;font-size:17px;line-height:1.4;letter-spacing:-.02em}
.vorschlag-rang{display:grid;place-items:center;flex:0 0 24px;height:24px;margin-top:1px;border-radius:50%;background:var(--arvon-white);font-size:12px;font-weight:600;color:var(--arvon-night)}
.vorschlag-karte .vorschlag-meta{margin:10px 0 20px;font-size:12px;line-height:1.6;color:var(--arvon-night)}
.vorschlag-ergebnis{display:flex;flex-direction:column;gap:3px;margin-bottom:18px}
.vorschlag-ergebnis>span{font-size:12px}.vorschlag-ergebnis strong{font-size:30px;line-height:1.2;font-weight:650;letter-spacing:-.04em;color:var(--arvon-night);font-variant-numeric:tabular-nums}.vorschlag-ergebnis small{font-size:11px;color:var(--arvon-night)}
.vorschlag-aktionen .btn{width:100%;min-height:44px;white-space:normal}
.vorschlaege :is(.vorschlag-details,.vorschlag-filter)>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;list-style:none;cursor:pointer;font-size:13px;font-weight:550;color:var(--arvon-night)}
.vorschlaege summary::-webkit-details-marker{display:none}
.vorschlaege :is(.vorschlag-details,.vorschlag-filter)>summary:after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 5px 4px 0;flex-shrink:0}
.vorschlaege :is(.vorschlag-details,.vorschlag-filter)[open]>summary:after{transform:rotate(225deg);margin-bottom:0}
.vorschlaege summary:focus-visible{outline:2px solid var(--arvon-night);outline-offset:3px;border-radius:6px}
.vorschlag-karte .vorschlag-details{margin-top:10px;border-top:1px solid var(--arvon-linie)}
.vorschlag-details-inhalt{padding:4px 0 8px;font-size:13px;line-height:1.6}
.vorschlag-details-inhalt h4{font-size:13px;margin:8px 0}.vorschlag-details-inhalt p{margin:8px 0 16px}.vorschlag-details-inhalt dl{margin:16px 0 0}.vorschlag-details-inhalt dt{font-size:12px}.vorschlag-details-inhalt dd{margin:2px 0 12px;font-size:19px;font-weight:600;color:var(--arvon-night)}
.vorschlag-filter{margin:0 0 16px}.vorschlag-filter>summary{width:fit-content;gap:14px!important}.vorschlag-filter-inhalt{padding:12px 0}.vorschlag-filter-aktionen{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.vorschlag-methode{margin:16px 0 0;border-bottom:1px solid var(--arvon-linie)}
.vorschlag-leer{padding:20px 0;font-size:14px;line-height:1.6}

/* Startbildschirm: Schrift weiß (v182, Wunsch Pascal). Die Wortmarke bleibt das
   SVG und wird per Filter weiß; das Bildzeichen bleibt sandfarben. */
#splash .splash-wordmark img{filter:brightness(0) invert(1)}
body #splash .splash-gruss,#splash .splash-promise,#splash .splash-caption,#splash .splash-name :is(label,p){color:var(--arvon-white)}

/* Kurzes Markenintro: Logo und Wortmarke bewegen sich als eine Einheit. */
#splash .splash-content{animation:arvonIntro .9s cubic-bezier(.22,1,.36,1) both}
#splash .splash-wordmark{margin-bottom:0}
@keyframes arvonIntro{
  from{opacity:0;transform:translateY(12px) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  #splash .splash-content{animation:none}
  #splash{transition:none}
}

/* Die Wortmarke sitzt unabhängig von der Höhe des Logos in der Bildschirmmitte. */
#splash .splash-content{position:absolute;inset:0;max-width:none;padding:0}
#splash .splash-wordmark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}
#splash .splash-logo{position:absolute;left:50%;bottom:calc(50% + min(250px,70vw) * .122549 + 16px);transform:translateX(-50%);margin:0}
body.app-design #splash .splash-scrim{
  background:url("galaxy.svg") center/cover no-repeat;
  opacity:.72;animation:arvonGalaxy 2.8s ease-out both;
}
@keyframes arvonGalaxy{from{opacity:0;transform:scale(1.035)}to{opacity:.72;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){body.app-design #splash .splash-scrim{animation:none}}

/* Beim federnden Herunterziehen wird der Grund des Scrollbereichs sichtbar.
   Oben setzt er den Nachtblau-Kopf fort, unten die helle Navigationszone.
   Die vorhandenen, deckenden Ansichten behalten ihr eigenes Aussehen. */
@media screen and (max-width:1023px){
  html,body.app-design{background:linear-gradient(to bottom,var(--arvon-night) 0 50%,var(--arvon-white) 50% 100%)}
  body.app-design .wrap{background:linear-gradient(to bottom,var(--arvon-night) 0 50%,var(--arvon-paper) 50% 100%)}
}