/* Auto-Text-Inflation auf echten Mobilgeraeten (Chrome/WebKit blaehen Text in breiten Block-Containern automatisch auf) unterbinden — sonst ist z.B. der Modal-Titel auf dem S22 viel groesser als die gesetzte font-size. Greift nur gegen das ungewollte Aufblasen, aendert keine explizit gesetzten Groessen. In der DevTools-Emulation unsichtbar (nur auf echten Touch-Geraeten aktiv). */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (orientation: landscape) { } @media (orientation: portrait) { } /* Smartphones hochkant (Portrait) bis iPhone SE, Galaxy S Mini @media (max-width: 480px) { } */ :root { --bg: rgba(0, 71, 76, 0.2); --bg-lightblack: rgba(0, 0, 0, 0.8); --bg-green: rgba(0, 71, 76, 1); --fc-today-bg-color: #0e2648 !important; --main: #f5a623 !important; --main_connect: #f5a623af !important; --white: #fff !important; --darkgreen: #004f51 !important; --darkblue: #0a0f24 !important; --darkGray: #1F1F1F !important; --darkViolet: #181432 !important; --lightViolet: #2c203f !important; --darkRose: #88545d !important; --middleRose: #683347 !important; --lightRose: #88545d !important; --test: #1f2336 !important; /* --lightBlue: #0e2648 !important; */ --lightred: #eb5543 !important; --darkred: #781b10 !important; --darkyellow: #dbbc0d !important; --grey: #2f3742 !important; --border: 3px; --font-xxl: 2rem !important; --font-xl: 1.5rem !important; --font-lg: 1.25rem !important; --font-sm: 1rem !important; --font-md: 0.75rem !important; --lineheight: 25px; } /* Default: Desktop sichtbar, Mobile versteckt */ .desktop_view { display: block; } .mobile_view { display: none; } /* Mobile Breakpoint (< 992px) - aktiviert Mobile-Ansicht */ @media (max-width: 991px) { .desktop_view { display: none !important; } .desktop_view:has(.guest-page-layout) { display: block !important; } .mobile_view { display: block !important; } /* Desktop Navigation verstecken */ .navigation { display: none !important; } /* Basis-Schriftgroesse mobil auf 14px angleichen (wie jd-mail). Partner stand ohne diese Regel auf Browser-Default 16px -> alle rem-Werte ~14% groesser, u.a. der Dashboard-Header 8px hoeher als bei Mail. 14px bringt die gesamte Mobile-UI auf denselben Massstab wie Mail. */ html, body { font-size: 14px; scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* alte Edge/IE */ } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; /* Chrome/Safari */ width: 0 !important; height: 0 !important; } /* Detail-Modal: der Header-Strich (span.border-span direkt unter dem Titel) soll weiter vom Titel weg. Der Strich hat Inline-Style margin-top:1rem — mit !important auf 1.75rem erhoehen. Gilt im gesamten Mobil/Tablet-Bereich (<=991px), da die 768px-Regel bei 769-991px nicht greift und dort nur der Inline-Wert wirkt. */ .lazy-nl-modal .border-span, [id^="getNewsletterData"] .border-span { margin-top: 1.75rem !important; } /* Header-Toggle-Label "Öffentlich" (oben links) 1:1 an den "Spamtest"-Toggle angleichen. Betrifft ALLE Modals mit so einem Header-Toggle (Detail-Modal getNewsletterData UND Bearbeiten-Modal setNewsletterPage) — daher .modal als Anker, nicht nur getNewsletterData/.lazy-nl-modal. 1) font-size 0.92rem (Inline 1rem/16px war groesser als Spamtest 0.92rem). */ .modal .switch-button.position-absolute > label { font-size: 0.92rem !important; } /* 2) Im disabled-Fall liegt opacity:0.5 (inline) auf dem GANZEN Container -> das Label wirkte blass/kleiner als der voll deckende Spamtest. opacity vom Container nehmen und NUR auf den Schalter (.switch-outer) legen: Label voll deckend (= wie Spamtest), Toggle sieht weiter deaktiviert aus. */ .modal .switch-button.position-absolute.disabled-toggle { opacity: 1 !important; } .modal .switch-button.position-absolute.disabled-toggle > .switch-outer { opacity: 0.5 !important; } } /* Smartphones quer + große Smartphones (iPhone 14 Pro Max, Galaxy S24 Ultra) */ @media (max-width: 768px) { /* iOS-sicher: Dokument scrollt NICHT, innerer Container (.div_light_mobile) scrollt. Ohne das bricht position:fixed;bottom:0 auf iOS Safari bei langen Seiten (Adressleisten-Collapse verschiebt den Layout-Viewport -> Nav wandert mit). */ html, body { height: 100vh !important; /* Fallback aelteres iOS */ height: 100dvh !important; /* modernes iOS: stabile Viewport-Hoehe */ min-height: 0 !important; overflow: hidden !important; /* KEIN Dokument-Scroll -> fixed bleibt stabil */ overflow-x: hidden !important; margin: 0 !important; /* Page-Scrollbalken ausblenden (Scroll-Funktion bleibt) */ scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* alte Edge/IE */ } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; /* Chrome/Safari */ width: 0 !important; height: 0 !important; } .mc_a_row { top: 3rem; left: 0rem; padding: 1rem; width: 100%; /* height: 31rem !important; */ /* Background-Override ENTFERNT: der alte linear-gradient + bg_poly.svg ueberdeckte den schoenen SVG-data-URI-Polygon-Hintergrund aus styles.css (Desktop) mit einem durchscheinenden alten CI-Bild. Jetzt greift mobil derselbe Modal-Hintergrund wie auf Desktop / wie bei jd-mail. */ } .box_histroy_count { background-color: var(--darkblue) !important; min-height: 5rem; min-width: 5rem; border: solid 1px var(--darkgreen); border-radius: var(--border); overflow-y: auto; overflow-x: hidden; padding: 0.5rem !important; margin-top: 1rem; background-image: linear-gradient(rgba(10, 15, 36, 0.7), rgba(10, 15, 36, 0.4)), /* dunkler Overlay */ url('../svg/bg_poly.svg'); background-size: cover; background-position: center; background-repeat: no-repeat; } } @media (hover: none) and (pointer: coarse) { button { padding: 1rem 2rem; } } .choose-adspace { position: fixed; top: 0; left: 0; width: 100%; /* volle Breite */ z-index: 9999; /* damit es über allem liegt */ } .navigation-mobile { position: fixed; bottom: 0; left: 0; width: 100%; /* volle Breite */ min-height: 1rem; /* Höhe */ background-color: var(--darkblue); z-index:9999; /* damit es über allem liegt */ } .newsletter-carusell-row{ position: relative; background-color: var(--darkblue); border-radius: var(--border); border: 2px solid var(--darkgreen); height: 25rem !important; width: 100%; background-image: linear-gradient(rgba(10, 15, 36, 0.7), rgba(10, 15, 36, 0.4)), /* dunkler Overlay */ url('../svg/bg_poly_new.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* ============================================================================= MOBILE MODAL STYLES Fullscreen Modals auf Mobile Geräten ============================================================================= */ @media (max-width: 768px) { .modal { padding: 0 !important; } .modal-dialog, .modal-dialog.modal-hcenter { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; height: 100% !important; transform: none !important; overflow-y: auto !important; } .modal-content { position: relative !important; border-radius: 0 !important; border: none !important; min-height: 100vh; width: 100% !important; max-width: 100% !important; overflow-y: auto !important; } .mc_a, .mc_a_row { position: relative !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 3rem 1.25rem 4rem 1.25rem !important; transform: none !important; border-radius: 0 !important; overflow-y: auto !important; min-height: 100vh; scrollbar-width: none; -ms-overflow-style: none; } .mc_a::-webkit-scrollbar, .mc_a_row::-webkit-scrollbar, .modal::-webkit-scrollbar, .modal-dialog::-webkit-scrollbar { display: none; } .modal, .modal-dialog { scrollbar-width: none; -ms-overflow-style: none; } /* Modal Header zentriert */ .modal-header-wrapper { position: relative; z-index: 10; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding-right: 0 !important; } .modal-header-wrapper h2, .modal-header-wrapper .header-style { width: 100% !important; text-align: center !important; } /* Border-Span volle Breite */ .mc_a .border-span, .mc_a_row .border-span { width: 100%; margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } /* Formulare im Modal volle Breite */ .mc_a form, .mc_a_row form { width: 100% !important; max-width: 100% !important; } /* Alle Row und Col Elemente im Modal */ .mc_a .row:not(.blacklist-entry-content):not(.blacklist-header-row), .mc_a_row .row:not(.blacklist-entry-content):not(.blacklist-header-row) { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; flex-direction: column !important; gap: 0.5rem !important; } .mc_a .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions), .mc_a_row .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions), .mc_a .row:not(.blacklist-header-row):not(.blacklist-entry-content) > [class*="col-"]:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions), .mc_a_row .row:not(.blacklist-header-row):not(.blacklist-entry-content) > [class*="col-"]:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions) { width: 100% !important; max-width: 100% !important; flex: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* Blacklist Header Row */ .mc_a .blacklist-header-row, .mc_a_row .blacklist-header-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.5rem !important; padding: 0 0.5rem !important; } .mc_a .blacklist-header-row > [class*="col-"], .mc_a_row .blacklist-header-row > [class*="col-"] { padding: 0 !important; font-size: 0.75rem !important; color: rgba(255, 255, 255, 0.6) !important; } .mc_a .blacklist-header-row > .col-3, .mc_a_row .blacklist-header-row > .col-3 { flex: 1 !important; max-width: none !important; width: auto !important; text-align: left !important; } .mc_a .blacklist-header-row > .col-7, .mc_a_row .blacklist-header-row > .col-7 { flex: 0 0 auto !important; max-width: none !important; width: auto !important; } .mc_a .blacklist-header-row > .col-2, .mc_a_row .blacklist-header-row > .col-2 { flex: 0 0 36px !important; max-width: none !important; width: 36px !important; } /* Blacklist Einträge: Row als Flex-Row statt Column */ .mc_a .blacklist-entry-content, .mc_a_row .blacklist-entry-content { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; gap: 0.5rem !important; padding: 0 0.5rem !important; } .mc_a .blacklist-entry-value, .mc_a_row .blacklist-entry-value { flex: 1 !important; min-width: 0 !important; max-width: none !important; font-size: 0.8rem !important; word-break: break-all !important; text-align: left !important; padding: 0 !important; } .mc_a .blacklist-entry-date, .mc_a_row .blacklist-entry-date { flex: 0 0 auto !important; width: auto !important; max-width: none !important; font-size: 0.75rem !important; color: rgba(255, 255, 255, 0.6) !important; padding: 0 !important; } .mc_a .blacklist-entry-actions, .mc_a_row .blacklist-entry-actions { flex: 0 0 auto !important; width: 36px !important; max-width: none !important; padding: 0 !important; } /* Blacklist Delete Button - wie X-Button */ .blacklist-delete-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; background: #0a0f24 !important; border: none !important; border-radius: 3px !important; color: #fff !important; font-size: 0.85rem !important; padding: 0 !important; margin-right: 1rem !important; cursor: pointer !important; } .blacklist-delete-btn:hover, .blacklist-delete-btn:active { border-color: #f44336 !important; color: #f44336 !important; } /* Form-Elemente volle Breite */ .mc_a .form-select, .mc_a_row .form-select, .mc_a select, .mc_a_row select, .mc_a .input-basic, .mc_a_row .input-basic, .mc_a input[type="text"], .mc_a_row input[type="text"], .mc_a input[type="date"], .mc_a_row input[type="date"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Einheitliche Abstände zwischen Formular-Elementen */ .mc_a .row, .mc_a_row .row { margin-top: 0 !important; margin-bottom: 0.75rem !important; } .mc_a .row:last-child, .mc_a_row .row:last-child { margin-bottom: 0 !important; } /* Header-Style auf Mobile */ .mc_a .header-style, .mc_a_row .header-style { font-size: 1.25rem !important; letter-spacing: 0.15rem !important; } /* Kampagnen-Detail-Modal-Titel (Lazy-Modal): so gross wie die Tab-Schrift (0.8rem) — auf echten Touch-Geraeten wirkte 1.25rem (+ Font-Boosting) viel zu gross. Fett + letter-spacing bleibt, damit er als Ueberschrift lesbar ist. */ .lazy-nl-modal h2.header-style { font-size: 0.8rem !important; } /* Submit Button Abstand */ .mc_a .btn_main, .mc_a_row .btn_main { margin-top: 0.75rem !important; width: 100% !important; } /* ============================================================================= MOBILE CLOSE BUTTON für Modals ============================================================================= */ .modal-close-mobile { display: flex !important; position: fixed; top: 0.75rem; right: 1.5rem; width: 36px; height: 36px; align-items: center; justify-content: center; background: rgba(10, 15, 36, 0.8); border: 1px solid #88545d; border-radius: 3px; color: #fff; font-size: 1rem; cursor: pointer; z-index: 9999; padding: 0; } .modal-close-mobile:hover, .modal-close-mobile:active { background: rgba(136, 84, 93, 0.5); border-color: #fff; } /* ============================================================================= NEWSLETTER MODAL: Upload-Buttons + Sub-Tabs Fix ============================================================================= */ /* Upload-Buttons: nicht mehr absolute, zentriert als eigene Zeile */ .mc_a .nav-tabs .nav-item.position-absolute, .mc_a_row .nav-tabs .nav-item.position-absolute { position: static !important; top: auto !important; right: auto !important; width: 100% !important; margin-bottom: 0.5rem; display: flex !important; justify-content: center !important; flex-wrap: wrap; } /* Upload-Button Labels kleiner */ .mc_a .custom-file label, .mc_a_row .custom-file label { font-size: 0.75rem !important; padding: 0.3rem 0.5rem !important; } /* Nav-Tabs auf Mobile: mehrzeilig (Profil hat 4 Tabs, Editor-Modals 5+) */ .mc_a .nav-tabs, .mc_a_row .nav-tabs { flex-wrap: wrap !important; font-size: 0.8rem !important; margin-bottom: 0.5rem !important; } /* "Öffentlich"-Toggle im Detail-Modal: auf Desktop absolut oben rechts (Inline top:2rem;right:2rem). Auf Mobile oben LINKS auf Hoehe des X-Buttons (top:8px;right:8px) als Gegenstueck zum X. Switch oben, Label "Öffentlich" klein DARUNTER (column) — daneben wuerde es den zentrierten Titel ueberlappen, deshalb gestapelt und schmal gehalten. */ .lazy-nl-modal form > .switch-button.position-absolute { position: absolute !important; top: 0.8rem !important; left: 0.875rem !important; right: auto !important; margin: 0 !important; flex-direction: column !important; align-items: center !important; gap: 0.15rem !important; z-index: 6 !important; } /* "Öffentlich"-Label (form > switch-button im Modal-Header): war 0.6rem (winzig). Auf 0.92rem = exakt wie der Spamtest-Toggle. (User-Wunsch: 1:1 wie Spamtest.) */ .lazy-nl-modal form > .switch-button.position-absolute > label { display: block !important; font-size: 0.92rem !important; line-height: 1 !important; white-space: nowrap !important; } /* Header-Trennstrich (.border-span): liegt im flex-column-Container und kollabiert dort auf 0 (height wird zur schrumpfbaren Main-Size) -> der rosé Strich war unsichtbar. flex-shrink:0 + min-height fixen das. margin-top 1.75rem = Abstand zum Titel (User wollte den Strich weiter vom Titel weg). Konsistent mit der 991px-Regel oben. */ .lazy-nl-modal .border-span { flex-shrink: 0 !important; min-height: 2px !important; margin-top: 1.75rem !important; } /* Blacklisten-Tab: Pills NICHT als 4-Spalten-Grid (Namen brechen um / werden abgeschnitten), sondern 1 Item pro Zeile ueber volle Breite, linksbuendig als Card mit Check-Icon links. (Inline-width wurde im Markup entfernt, daher greift dieses width:100% jetzt.) */ [id^="blacklists"] .bl-update-item { width: 100% !important; text-align: left !important; padding: 0.7rem 0.75rem 0.7rem 2rem !important; margin: 0 !important; background: color-mix(in srgb, var(--darkblue) 75%, transparent) !important; border-radius: var(--border) !important; box-sizing: border-box !important; } [id^="blacklists"] .bl-update-item .fa-check { left: 0.7rem !important; } /* ── Zielgruppe-Tab: kompaktes Layout (User-Wunsch 27.06.) ────────────────── Anders als die uebrigen Form-Reihen sollen die Zielgruppe-Reihen NICHT gestapelt werden, sondern eng am Desktop bleiben: - Alter: Geschlecht / von / bis / Minus in EINER Zeile, Plus drunter. - PLZ: von / bis / Minus in EINER Zeile, Plus drunter. - Toggle: PLZ-Bereiche + Bundeslaender in EINER Zeile. - Bundeslaender: ein Bundesland pro Zeile. Die generische .mc_a .row (flex-wrap) wuerde alles stapeln -> hier per flex-wrap:nowrap + schmaleren Spalten zurueckgeholt. */ /* WICHTIG zur Spezifitaet: Die generische Regel oben .mc_a .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions) hat width:100% + flex:none mit Spezifitaet (0,5,0). Um sie hier zu schlagen, muessen die folgenden .col-Regeln MINDESTENS (0,5,0) erreichen -> deshalb .mc_a/.mc_a_row davor + dieselbe :not()-Kette anhaengen (das [id^=..]-Attribut + .row geben zusaetzliches Gewicht). Sonst bleiben die Spalten bei width:100% und stapeln trotz flex-wrap:nowrap. */ /* Alters-Range-Reihen: 4 Elemente nebeneinander (Geschlecht/von/bis/Minus). Gilt fuer Edit-Tab (ageRangesTg) UND Erstellen-Modal (ageRangesSet). flex-direction:row MUSS gesetzt werden (mit :not()-Kette fuer Spezifitaet), sonst gewinnt die generische .mc_a .row:not()...{flex-direction:column} und stapelt die Felder trotz nowrap. */ .mc_a [id^="ageRanges"] > .row:not(.blacklist-entry-content):not(.blacklist-header-row), .mc_a_row [id^="ageRanges"] > .row:not(.blacklist-entry-content):not(.blacklist-header-row) { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; gap: 0.3rem !important; margin-bottom: 0.3rem !important; } .mc_a [id^="ageRanges"] > .row > .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions), .mc_a_row [id^="ageRanges"] > .row > .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions) { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; padding: 0 !important; } /* Dritte .col (Bis-Input + Minus): Bis fuellt, Minus bleibt schmal rechts. */ .mc_a [id^="ageRanges"] > .row > .col:nth-child(3), .mc_a_row [id^="ageRanges"] > .row > .col:nth-child(3) { display: flex !important; align-items: center !important; gap: 0.3rem !important; } .mc_a [id^="ageRanges"] > .row > .col:nth-child(3) > div, .mc_a_row [id^="ageRanges"] > .row > .col:nth-child(3) > div { flex: 1 1 0 !important; min-width: 0 !important; } /* PLZ-Range-Reihen: von / bis / Minus nebeneinander (Markup: 2 .col + Minus direkt als Row-Kind). */ .mc_a [id^="plzRanges"] > .row:not(.blacklist-entry-content):not(.blacklist-header-row), .mc_a_row [id^="plzRanges"] > .row:not(.blacklist-entry-content):not(.blacklist-header-row) { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; gap: 0.3rem !important; margin-bottom: 0.3rem !important; } .mc_a [id^="plzRanges"] > .row > .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions), .mc_a_row [id^="plzRanges"] > .row > .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions) { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; padding: 0 !important; } /* Minus-Buttons (Alter + PLZ) + die Plus-Buttons: quadratisch 40x40, Icon mittig. Die Buttons tragen padding:16px 32px + die Icons haben Inline- margin-Hacks (margin-top/left) zur Pseudo-Zentrierung -> beides neutralisieren, sonst ragt das Icon raus (scrollWidth>clientWidth-Falle). flex:0 0 40px haelt sie schmal, damit die Eingabefelder den Platz bekommen. */ [id^="ageRanges"] .remove-age-row, [id^="plzRanges"] .remove-plz-row, [id^="addAgeRange"], [id^="addPlzRange"] { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } [id^="ageRanges"] .remove-age-row > i, [id^="plzRanges"] .remove-plz-row > i, [id^="addAgeRange"] > i, [id^="addPlzRange"] > i { margin: 0 !important; } /* In den schmalen Von/Bis-Feldern die Icons (User / Location-Pin) ausblenden — auf 375px ueberlappen sie sonst mit der Zahl/dem Placeholder. */ [id^="ageRanges"] .col .fa-user, [id^="plzRanges"] .col .fa-location-dot { display: none !important; } /* Toggle-Zeile PLZ-Bereiche + Bundeslaender: nebeneinander statt gestapelt. Die zwei Toggle-Buttons liegen je in einer .col einer .row -> Eltern-.row ueber :has() greifen und auf nowrap zwingen. */ .mc_a .row:has(> .col > [id^="plzToggle"]):not(.blacklist-entry-content):not(.blacklist-header-row), .mc_a_row .row:has(> .col > [id^="plzToggle"]):not(.blacklist-entry-content):not(.blacklist-header-row) { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.3rem !important; } .mc_a .row:has(> .col > [id^="plzToggle"]) > .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions), .mc_a_row .row:has(> .col > [id^="plzToggle"]) > .col:not(.blacklist-entry-value):not(.blacklist-entry-date):not(.blacklist-entry-actions) { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; padding: 0 !important; } /* Bundeslaender-Chips: ein Bundesland pro Zeile (statt 4 nebeneinander). Die Breite liegt jetzt in der Klasse .bl-pill-w (styles.css: calc(25%)) statt inline am Chip -> hier per Media-Query auf 100% ueberschreibbar. */ .bl-pill-w { width: 100% !important; } /* CSV-Button (Zielgruppe-Tab) oben rechts in die Ecke, auf Hoehe der "Zielgruppe hinzufuegen"-Checkbox. Die Checkbox-Zeile ist das ERSTE Element im Tab-Pane (margin-top:0.5rem, Checkbox --size:28px), die CSV-Zeile sitzt im targetContainer direkt darunter. CSV absolut an den oberen rechten Rand des Panes setzen, auf top:0.5rem (= Checkbox-Zeilen-Oberkante). Der Pane bekommt position:relative. */ [id^="targetgroup"].tab-pane { position: relative !important; } /* Edit-Tab (targetContainerTg): CSV-Button absolut oben rechts auf Checkbox- Hoehe (dort ist die Ecke frei). */ [id^="targetContainerTg"] .plz-csv-row { position: absolute !important; top: -0.5rem !important; right: 0 !important; margin-bottom: 0 !important; z-index: 2 !important; } /* Erstellen-Modal (targetContentSet*): CSV-Zeile bleibt IM FLUSS (oben rechts waere die Modal-Ecke, da sitzt schon der ×-Button) — nur die Button-GROESSE an den Edit-Tab angleichen, an natuerlicher Stelle (in der Zielgruppe-Box). */ [id^="targetContentSet"] .plz-csv-row { justify-content: flex-end !important; } /* CSV-Button selbst auf Checkbox-Hoehe (32px) + Referenz-Breite (3.5rem), mittig. Gilt fuer Edit-Tab UND Erstellen-Modal -> identische Groesse. */ [id^="targetContainerTg"] .plz-csv-row .plz-csv-label, [id^="targetContainerSet"] .plz-csv-row .plz-csv-label, [id^="targetContentSet"] .plz-csv-row .plz-csv-label { height: 32px !important; min-width: 3.5rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; font-size: 0.9rem !important; } /* Tab-Leisten im Detail-Modal (Haupt-Leiste mit 17 Tabs UND die inneren Sub-Leisten: WM-Leiste, HTML/TEXT/Details/Ranking/Spamtest): NICHT umbrechen, sondern einzeilig horizontal scrollbar. Der angeschnittene letzte Tab gibt den Scroll-Hinweis. Scrollbar versteckt (Projekt-Standard). */ .lazy-nl-modal ul.nav-tabs, .m-as-modal ul.nav-tabs, [id^="setNewsletter"] ul.nav-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Flex-Container nimmt die Hoehe der list-item-Kinder nicht automatisch an (kollabiert sonst auf ~1px) -> min-height erzwingen. */ min-height: 42px !important; align-items: flex-start !important; } /* Leisten mit eingebetteten Upload-Buttons (.nav-item.position-absolute, z.B. HTML/TEXT/Details/Ranking/Spamtest): die Upload-Buttons (HTML/Bilder hochladen) als eigene Zeile OBEN positionieren, damit die echten Tabs darunter einzeilig scrollen koennen. WICHTIG: Upload absolut relativ zum DIREKTEN ul-Eltern (der NICHT scrollt) — NICHT zur scrollenden ul, sonst scrollen die Upload-Buttons mit. Gilt fuer initial gerenderte WM (ul direkt in .tab-pane) UND neu per "+" hinzugefuegte WM (ul liegt dann in .row/.tab-pane-content). Die ul bleibt static + padding-top schafft den Platz fuer die Upload-Zeile. */ .lazy-nl-modal :is(.tab-pane, .row, .tab-pane-content):has(> ul.nav-tabs > .nav-item.position-absolute), [id^="setNewsletter"] :is(.tab-pane, .row, .tab-pane-content):has(> ul.nav-tabs > .nav-item.position-absolute) { position: relative !important; } .lazy-nl-modal ul.nav-tabs:has(.nav-item.position-absolute), [id^="setNewsletter"] ul.nav-tabs:has(.nav-item.position-absolute) { position: static !important; /* margin-top:0 — die ul hat sonst mt-1, dadurch saesse die absolut oben positionierte Upload-Zeile relativ zum ul-Border zu hoch (zu grosse Luecke zu den Tabs). padding-top schafft genau den Platz fuer die Upload-Zeile (~35px hoch) + ~8px Abstand zu den Tabs. */ margin-top: 0 !important; padding-top: 2.7rem !important; } .lazy-nl-modal ul.nav-tabs > .nav-item.position-absolute, [id^="setNewsletter"] ul.nav-tabs > .nav-item.position-absolute { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.5rem !important; margin: 0 !important; } /* Nur die Haupt-Leiste (direktes Kind von .mc_a_row/.mc_a) braucht Abstand zum Header-Strich; die inneren Sub-Leisten nicht. */ .lazy-nl-modal .mc_a_row > ul.nav-tabs, .lazy-nl-modal .mc_a > ul.nav-tabs, .m-as-modal .mc_a_row > ul.nav-tabs, .m-as-modal .mc_a > ul.nav-tabs { margin-top: 0.5rem !important; } .lazy-nl-modal ul.nav-tabs::-webkit-scrollbar, .m-as-modal ul.nav-tabs::-webkit-scrollbar, [id^="setNewsletter"] ul.nav-tabs::-webkit-scrollbar { display: none; } /* Echte Tabs (nicht die Upload-nav-item) nicht schrumpfen lassen. */ .lazy-nl-modal ul.nav-tabs > li:not(.position-absolute), .m-as-modal ul.nav-tabs > li:not(.position-absolute), [id^="setNewsletter"] ul.nav-tabs > li:not(.position-absolute) { flex: 0 0 auto !important; } .lazy-nl-modal ul.nav-tabs > li > .nav-link, .m-as-modal ul.nav-tabs > li > .nav-link, [id^="setNewsletter"] ul.nav-tabs > li > .nav-link { white-space: nowrap !important; } /* Tab-Content: kein festes padding-left */ .mc_a .tab-content, .mc_a_row .tab-content { padding-left: 0 !important; padding-right: 0 !important; } /* Row im Tab-Content: kein festes padding-left */ .mc_a .tab-pane .row, .mc_a_row .tab-pane .row, .mc_a .tab-pane-content .row, .mc_a_row .tab-pane-content .row { padding-left: 0 !important; padding-right: 0 !important; } /* TEXT-Textarea: volle Breite statt 91rem */ .mc_a .textarea, .mc_a_row .textarea, .mc_a textarea.textarea, .mc_a_row textarea.textarea { width: 100% !important; max-width: 100% !important; height: 20rem !important; box-sizing: border-box !important; margin-left: 0 !important; } /* TinyMCE Editor: volle Breite + Parent-Container */ .mc_a .d-flex.justify-content-center:has(.tox-tinymce), .mc_a_row .d-flex.justify-content-center:has(.tox-tinymce) { width: 100% !important; } .mc_a .tox-tinymce, .mc_a_row .tox-tinymce { width: 100% !important; max-width: 100% !important; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important; } /* Link/Bild-Container: volle Breite */ .mc_a .link-container, .mc_a_row .link-container, .mc_a .image-container, .mc_a_row .image-container { max-width: 100% !important; margin-left: 0 !important; } /* Negative margins entfernen */ .mc_a .d-flex.justify-content-center textarea, .mc_a_row .d-flex.justify-content-center textarea { margin-left: 0 !important; } /* Parameterliste + Dynamische Inhalte: 2 pro Reihe statt 4 */ .mc_a .copy-wrapper, .mc_a_row .copy-wrapper { width: calc(50% - 0.25rem) !important; } /* Öffentlich-Toggle auf Mobile: rechts, 40% kleiner, scrollt mit */ .mc_a .checkbox-wrapper-8.position-absolute, .mc_a_row .checkbox-wrapper-8.position-absolute { position: relative !important; top: auto !important; left: auto !important; right: auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0.3rem !important; margin-bottom: 0.5rem; transform: scale(0.6); transform-origin: right center; } /* Details-Wrapper Margins */ .mc_a .details-wrapper .col, .mc_a_row .details-wrapper .col, .mc_a .details-wrapper- .col, .mc_a_row .details-wrapper- .col { margin-left: 0 !important; } /* WM Tab Namen kleiner */ .mc_a .editTabName, .mc_a_row .editTabName { font-size: 0.85rem !important; } /* DYNAMIC: Gap zwischen Alle-Zeile und Bedingungen angleichen (0.5rem statt 0.75rem) */ .mc_a .tab-pane > .row, .mc_a_row .tab-pane > .row { margin-bottom: 0.5rem !important; } /* Tab-Pane: TinyMCE-Abstand zu Tabs auf 0.5rem (mt-1 + JS margin entfernen) */ .mc_a .tab-pane > .d-flex.mt-1, .mc_a_row .tab-pane > .d-flex.mt-1 { margin-top: 0 !important; } .mc_a .tab-pane .tox-tinymce, .mc_a_row .tab-pane .tox-tinymce { margin-top: 0 !important; } /* DYNAMIC: Von/Bis Labels vor Wochentag-Selects */ [class*="day-col-1"]::before, [class*="day-col-2"]::before { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.25rem; text-align: center; } [class*="day-col-1"]::before { content: "Von"; } [class*="day-col-2"]::before { content: "Bis"; } /* ============================================================================= DYNAMIC: Bedingungs-Zeilen - Minus-Button neben Select statt ueberlappend ============================================================================= */ .mc_a .container-fluid.position-relative:has(.removeButton), .mc_a_row .container-fluid.position-relative:has(.removeButton) { display: flex !important; align-items: flex-start !important; gap: 0.5rem !important; padding-right: 0 !important; margin-top: 0.5rem !important; margin-bottom: 0 !important; } .mc_a .container-fluid.position-relative:has(.removeButton) > .row, .mc_a_row .container-fluid.position-relative:has(.removeButton) > .row { width: 100% !important; flex: 1 !important; min-width: 0 !important; margin-bottom: 0 !important; } .mc_a .container-fluid.position-relative:has(.removeButton) > .position-absolute, .mc_a_row .container-fluid.position-relative:has(.removeButton) > .position-absolute { position: relative !important; right: auto !important; top: auto !important; flex-shrink: 0 !important; margin-top: 0.25rem; } } /* Desktop: Close-Button versteckt */ .modal-close-mobile { display: none; } /* ======================================== GUEST PAGE - ALLGEMEIN (alle Breakpoints) ======================================== */ /* * Problem 1: .div_light_desktop > * setzt z-index: 1 auf .guest-page-layout. * Dadurch liegt der gesamte Gast-Inhalt unter Bootstrap-Backdrop (z-index: 1040/1050). * Fix: .guest-page-layout auf z-index: 2000 anheben → über jedem Backdrop. */ .guest-page-layout { position: relative !important; z-index: 2000 !important; } /* * Problem 2: Breakpoint-Regeln in styles.css setzen transform: translateX(-50%) * auf .mc_a bei 992–1399px (ohne !important). Unser Media-Query-Override hat * nur left und width, nicht transform. → Modal-Content verschiebt sich ~45vw nach * links, Tabs landen off-screen und sind unklickbar. * Fix: transform: none !important für alle .guest-modal .mc_a. */ .guest-modal .mc_a { left: 0 !important; width: 100% !important; transform: none !important; } /* ======================================== GUEST PAGE - DESKTOP ======================================== */ /* ≥ 1200px: Zwei-Spalten Layout — Sidetext 35%, Modal 65% */ @media (min-width: 1200px) { .guest-page-layout { display: flex; align-items: flex-start; min-height: 100vh; } .guest-sidetext-col { width: 25%; flex-shrink: 0; padding: 2rem 1rem; } .guest-sidetext-col .guest-sidetext { position: relative !important; top: auto !important; left: auto !important; right: auto !important; max-width: none !important; } .guest-modal-col { width: 75%; position: relative; } .guest-modal-col .guest-modal { position: relative !important; display: block !important; } .guest-modal-col .guest-modal .mc_a { left: 0 !important; width: 100% !important; } .guest-modal-col .guest-modal .modal-dialog { max-width: calc(100% - 2rem); width: calc(100% - 2rem); margin: 1.75rem 1rem; } } /* 992px–1199px: Sidetext ausblenden, Modal 100% */ @media (min-width: 992px) and (max-width: 1199px) { .guest-sidetext-col { display: none; } .guest-modal-col { width: 100% !important; } .guest-modal { position: relative !important; display: block !important; width: 100%; } .guest-modal .mc_a { left: 0 !important; width: 100% !important; } .guest-modal .modal-dialog { max-width: 100%; width: 100%; margin: 1rem; } } /* < 992px: Sidetext ausblenden, Modal fullwidth */ @media (max-width: 991px) { .guest-sidetext-col { display: none; } .guest-modal { position: relative !important; display: block !important; width: 100%; } .guest-modal .mc_a { left: 0 !important; width: 100% !important; } .guest-modal .modal-dialog { max-width: 100%; width: 100%; margin: 0; } } /* ======================================== GUEST PAGE - MOBILE ======================================== */ @media (max-width: 768px) { /* Fullscreen Modal */ .guest-modal .modal-dialog { margin: 0; max-width: 100%; width: 100%; } .guest-modal .modal-content { border-radius: 0; min-height: 100vh; padding: 1rem 1rem 4rem 1rem; } /* 7 Tabs horizontal scrollbar */ .guest-modal .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .guest-modal .nav-tabs::-webkit-scrollbar { display: none; } .guest-modal .nav-tabs .nav-link { white-space: nowrap; font-size: 0.75rem; padding: 0.35rem 0.6rem; } /* Textareas responsive */ .guest-modal textarea.textarea { width: 100% !important; min-height: 15rem !important; box-sizing: border-box; } /* Info Icon + Panel */ .guest-info-toggle { top: 0.5rem !important; left: 0.5rem !important; } .guest-info-panel { top: 3.5rem !important; left: 0.5rem !important; max-width: calc(100vw - 1rem) !important; } /* Titel-Abstand: .mc_a/.mc_a_row erzwingt in diesem Breakpoint padding-top:3rem via !important (generische Modal-Kopf-Polsterung fuer ALLE Modals) — fuer den Gastzugang/Report zu groß gegen den Titel. Auf 1rem reduziert, border-span oben/unten ebenfalls 1rem, damit alle drei Abstaende (oben->Titel, Titel->Trenner, Trenner->Tabs) gleich UND tatsaechlich 1rem sind (User-Korrektur 14.07.: erstes Angleichen an die 3rem war zu groß). */ .guest-modal .modal-content { padding-top: 1rem !important; } .guest-modal .border-span { margin-top: 1rem !important; margin-bottom: 1rem !important; } } /* ============================================================================= 4.1 LOGIN MOBILE (m-login-*) — eingefuehrt 2026-05-20 Strikt getrennt vom Desktop-Login. Eigenes Markup im mobile_content-Block, eigene Klassen. Doku: [[UI Mobile#🟡 Login-Seite]] ============================================================================= */ @media (max-width: 991px) { /* Vollbild-Container, vertikal zentriert, ohne top:Xrem-Hacks */ .m-login-screen { min-height: 100dvh; min-height: 100vh; /* Fallback fuer alte iOS */ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem; box-sizing: border-box; position: relative; z-index: 2; } /* Logo-Block */ .m-login-logo { width: 100%; max-width: 22rem; margin-bottom: 2.5rem; display: flex; justify-content: center; } .m-login-logo img { width: 60%; max-width: 12rem; height: auto; display: block; } /* Form-Container */ .m-login-form { width: 100%; max-width: 22rem; display: flex; flex-direction: column; gap: 0.85rem; } /* Remember-Me-Zeile */ .m-remember { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; cursor: pointer; user-select: none; } .m-remember-text { color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; } /* Animierte Checkbox (Reuse Pattern aus Desktop, mobil-tauglich) */ .m-checkbox { position: relative; width: 26px; height: 26px; display: inline-flex; flex-shrink: 0; } .m-checkbox input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; } .m-checkbox svg { width: 100%; height: 100%; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 6px; padding: 3px; background: rgba(255, 255, 255, 0.04); box-sizing: border-box; transition: all 0.18s ease; } .m-checkbox svg path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.25s ease; } .m-checkbox input:checked + svg { border-color: var(--darkRose); background: var(--darkRose); } .m-checkbox input:checked + svg path { stroke-dashoffset: 0; } /* Inputs: input-basic-Look (analog Dashboard-Header-Selector) var(--darkblue) Background, transparent Border, box-shadow inset+drop !important noetig, weil globales .input-basic in styles.css mit !important arbeitet */ .m-input { width: 100% !important; height: 48px !important; padding: 0 1rem !important; font-size: 16px !important; color: var(--white) !important; background-color: var(--darkblue) !important; border: 1px solid transparent !important; border-radius: var(--border) !important; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important; box-sizing: border-box; -webkit-appearance: none; appearance: none; transition: border-color 0.15s ease; } .m-input:focus { outline: none; border-color: var(--darkRose) !important; } .m-input::placeholder { color: var(--white); opacity: 1; } /* Buttons (Primary, Secondary, Link) — 48px Hoehe, voll-breit, untereinander, kein Border */ .m-btn { width: 100%; height: 48px; padding: 0 1rem; font-size: 1rem; font-weight: 500; color: var(--white); border-radius: var(--border); border: none; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; -webkit-tap-highlight-color: transparent; } .m-btn:active { transform: scale(0.98); } .m-btn-primary { background: var(--darkRose); } .m-btn-primary:hover { background: var(--lightRose); } .m-btn-secondary { background: color-mix(in srgb, var(--darkblue) 75%, transparent); color: var(--white); } .m-btn-secondary:hover { background: var(--darkblue); } .m-btn-link { width: 100%; margin-top: 0.35rem; padding: 0.5rem; background: none; border: none; color: var(--white); font-size: 0.9rem; text-align: center; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; } .m-btn-link:hover { color: var(--darkRose); } /* Loading-Overlay Mobile (kleiner als Desktop) */ .m-login-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 99999; justify-content: center; align-items: center; flex-direction: column; } .m-login-overlay.is-active { display: flex; } .m-login-overlay-inner { text-align: center; color: #fff; } .m-login-overlay img { width: 120px; height: auto; animation: bounce 1.875s ease-in-out infinite; margin-bottom: 24px; } .m-login-overlay h3 { margin: 0 0 16px; font-size: 1.1rem; font-weight: 400; opacity: 0.9; } .m-login-overlay-progress { width: 160px; height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; overflow: hidden; margin: 0.75rem auto 0; } .m-login-overlay-progress > div { width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--darkRose), transparent); animation: loading 2.5s ease-in-out infinite; border-radius: 2px; } } /* ============================================================================= 4.2 DASHBOARD MOBILE (m-dash-*) — eingefuehrt 2026-05-20 Eigenes Mobile-Body-Markup statt geteilter dash-*-Klassen. Doku: [[UI Mobile#🟡 Dashboard]] ============================================================================= */ @media (max-width: 991px) { .m-dash { padding: 0.75rem; padding-bottom: 6rem; /* Platz fuer Bottom-Nav */ } /* Sektion — gleicher Abstand zwischen Sections wie zwischen Cards in einem Grid (0.6rem) */ .m-dash-section { margin-bottom: 0.6rem; } .m-dash-section:last-child { margin-bottom: 0; } .m-dash-section-title { /* !important noetig — globales h2 in styles.css setzt margin-bottom: 0 !important Margins kompakt damit zwischen Sections gleicher Abstand wie zwischen Cards (0.6rem) */ margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0.6rem !important; margin-left: 0.15rem !important; font-size: 0.8rem !important; font-weight: 600; color: var(--white); text-transform: uppercase; letter-spacing: 0.7px; display: flex; align-items: center; gap: 0.5rem; } .m-dash-section-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.5rem; border-radius: 1rem; background: var(--darkRose); color: var(--white); font-size: 0.7rem; font-weight: 700; text-transform: none; letter-spacing: 0; } /* KPI Grid */ .m-dash-kpi-grid { display: grid; gap: 0.6rem; } .m-dash-kpi-grid-2 { grid-template-columns: 1fr 1fr; } /* KPI Card — analog Desktop (.dash-kpi-card): Label oben + Wert mitte, alles zentriert Markup ist → column-reverse zeigt Label zuerst (oben), Value danach CI-konform: var(--darkblue) 75% transparent, KEIN Border, KEIN Shadow */ .m-dash-kpi-card { background: color-mix(in srgb, var(--darkblue) 75%, transparent); border: none; border-radius: var(--border); padding: 0.75rem 0.75rem; box-shadow: none; display: flex; flex-direction: column-reverse; /* Label oben, Value mitte/unten */ align-items: center; /* horizontal zentriert */ justify-content: center; /* vertikal zentriert */ text-align: center; min-height: 4.2rem; position: relative; overflow: hidden; transition: background-color 0.2s ease; } .m-dash-kpi-card:hover { background: var(--darkblue); } /* compact-Klasse bleibt aus Markup-Gruenden, ist aber jetzt identisch zur normalen Card */ .m-dash-kpi-card-compact { min-height: 4.2rem; padding: 0.75rem 0.75rem; } .m-dash-kpi-card-wide { grid-column: span 2; } /* KPI-Icons komplett ausgeblendet — User-Feedback 2026-05-20 */ .m-dash-kpi-icon { display: none !important; } .m-dash-kpi-value { font-size: 1.25rem; font-weight: 700; color: var(--white); line-height: 1; display: flex; align-items: baseline; justify-content: center; gap: 0.2rem; margin-top: 0.4rem; /* Abstand zum Label oben (column-reverse: Label "vor" Value) */ } .m-dash-kpi-unit { font-size: 0.75em; font-weight: 500; color: rgba(255, 255, 255, 0.6); margin-left: 0.1rem; } .m-dash-kpi-label { font-size: 0.78rem; color: var(--white); /* analog Desktop: Label weiss, nicht hellgrau */ margin: 0; } /* Top 3 */ .m-dash-top3 { background: color-mix(in srgb, var(--darkblue) 88%, transparent); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--border); overflow: hidden; } .m-dash-top3-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .m-dash-top3-row:last-child { border-bottom: none; } .m-dash-top3-rank { font-size: 1.5rem; line-height: 1; flex-shrink: 0; } .m-dash-top3-info { flex: 1; min-width: 0; } .m-dash-top3-name { color: var(--white); font-weight: 500; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-dash-top3-meta { margin-top: 0.25rem; display: flex; gap: 1rem; color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; } .m-dash-top3-meta i { margin-right: 0.3rem; color: rgba(255, 255, 255, 0.4); } /* Generische Listen (Freigaben / Anfragen) */ .m-dash-list { background: color-mix(in srgb, var(--darkblue) 88%, transparent); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--border); overflow: hidden; } .m-dash-list-item { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .m-dash-list-item:last-child { border-bottom: none; } .m-dash-list-item-title { color: var(--white); font-weight: 500; font-size: 0.95rem; } .m-dash-list-item-meta { margin-top: 0.25rem; color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; } /* Empty-State (CI-konform: weiss, NICHT grau — [[UI Listen-Patterns]]) */ .m-dash-empty { padding: 1.25rem 1rem; text-align: center; color: var(--white); font-size: 0.85rem; background: color-mix(in srgb, var(--darkblue) 88%, transparent); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--border); } /* Chart-Karte — CI-konform analog KPI-Cards (75% transparent, KEIN Border) */ .m-dash-chart-card { background: color-mix(in srgb, var(--darkblue) 75%, transparent); border: none; border-radius: var(--border); padding: 0.85rem 0.75rem 1rem; } .m-dash-chart-canvas-wrap { position: relative; width: 100%; height: 260px; } .m-dash-chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; } /* Top 3 Card — CI-konform: 75% transparent, KEIN Border, KEIN Shadow (wie KPI-Cards) */ .m-dash-top3-card { background: color-mix(in srgb, var(--darkblue) 75%, transparent); border: none; border-radius: var(--border); overflow: hidden; } .m-dash-top3-toolbar { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; } /* Period-Dropdown im input-basic-Look (analog Header-Selector / dash-mobile-selector) */ .m-dash-top3-period { width: 100%; height: 40px; padding: 0.5rem 0.75rem; padding-right: 2.25rem; background-color: var(--darkblue); border: 1px solid transparent; border-radius: var(--border); color: var(--white); font-size: 0.9rem; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; } .m-dash-top3-period:focus { outline: none; border-color: var(--darkRose); } .m-dash-top3-period option { background: var(--darkblue); color: var(--white); } .m-dash-top3-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; } .m-dash-top3-tab { height: 40px; padding: 0 0.75rem; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--border); color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; } .m-dash-top3-tab:active { transform: scale(0.98); } .m-dash-top3-tab.active { background: var(--darkRose); border-color: var(--darkRose); color: var(--white); font-weight: 500; } .m-dash-top3-list { /* Container fuer die Items */ } .m-dash-top3-item { padding: 0.85rem 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .m-dash-top3-item:first-child { padding-top: 0.5rem; /* enger an Toolbar dran */ } .m-dash-top3-item:last-child { border-bottom: none; } .m-dash-top3-head { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: center; margin-bottom: 0.55rem; } .m-dash-top3-medal { font-size: 1.35rem; line-height: 1; } .m-dash-top3-name { color: var(--white); font-weight: 500; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-dash-top3-start { color: var(--white); font-size: 0.78rem; white-space: nowrap; } .m-dash-top3-stats { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0.4rem; } .m-dash-top3-stat { text-align: center; background: rgba(0, 0, 0, 0.2); border-radius: var(--border); padding: 0.5rem 0.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Label oben, Wert unten — analog KPI-Cards */ .m-dash-top3-stat-lbl { display: block; order: 1; color: var(--white); font-size: 0.7rem; margin-bottom: 0.25rem; } .m-dash-top3-stat-val { display: block; order: 2; color: var(--white); font-weight: 700; font-size: 1rem; line-height: 1; } /* === Widget-Sections (Anfragen + Freigaben) — full-width, voll interaktiv === */ /* Container im KPI-Card-Look (75% transparent darkblue, kein Border) */ .m-dash-widget-section .m-dash-widget-body { background: color-mix(in srgb, var(--darkblue) 75%, transparent); border: none; border-radius: var(--border); padding: 0.6rem; } /* Items: Flex-Column — Status-Icon, Inputs, Action-Row (alles zentriert) */ .m-dash-widget-section .accordion-item { background: rgba(0, 0, 0, 0.18) !important; border: 1px solid rgba(255, 255, 255, 0.04) !important; border-radius: var(--border) !important; padding: 0.5rem !important; margin-bottom: 0.4rem !important; } .m-dash-widget-section .accordion-item:last-child { margin-bottom: 0 !important; } /* container-fluid → Flex-Column + Wrap, KEIN absolutes Layout im Mobile */ .m-dash-widget-section .accordion-item .container-fluid { display: flex !important; flex-flow: row wrap !important; align-items: center !important; justify-content: center !important; gap: 0.3rem !important; padding: 0 !important; position: static !important; } /* Status-Icon (Freigaben) als eigene volle Zeile oben, zentriert */ .m-dash-widget-section .accordion-item .container-fluid > .position-absolute:not(.btn_add):not(.btn_delete) { position: static !important; transform: none !important; top: auto !important; left: auto !important; right: auto !important; flex: 0 0 100% !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0.5rem 0 0 0 !important; padding: 0 !important; font-size: 1.1rem; order: 0; } .m-dash-widget-section .accordion-item .container-fluid > .position-absolute:not(.btn_add):not(.btn_delete) > i { margin: 0 auto !important; display: inline-block; } /* Inputs: alle in EINER Reihe (Kampagne | Werbefläche | Alias / Volume / Payout) */ .m-dash-widget-section .accordion-item .col-lg-1, .m-dash-widget-section .accordion-item .col-lg-2, .m-dash-widget-section .accordion-item .col-lg-3, .m-dash-widget-section .accordion-item .col-lg-4, .m-dash-widget-section .accordion-item .col-lg-5, .m-dash-widget-section .accordion-item .col-lg-6 { flex: 1 1 0 !important; display: block !important; width: auto !important; vertical-align: initial !important; margin: 0 !important; order: 1; min-width: 0; } .m-dash-widget-section .accordion-item .px-1 { padding-left: 0 !important; padding-right: 0 !important; } /* Inputs Look */ .m-dash-widget-section .accordion-item .form-control { background: rgba(0, 0, 0, 0.15) !important; border: 1px solid transparent !important; color: var(--white) !important; font-size: 0.85rem !important; height: 2.1rem !important; padding: 0.25rem 0.5rem !important; box-shadow: none !important; text-align: center !important; } .m-dash-widget-section .accordion-item .form-control[readonly][disabled] { opacity: 1; cursor: default; } /* Action-Buttons: aus absoluter Position raus, als zentrierte Button-Row in EIGENER Zeile (order:2) */ .m-dash-widget-section .accordion-item .btn_add, .m-dash-widget-section .accordion-item .btn_delete, .m-dash-widget-section .accordion-item .container-fluid > button { position: static !important; transform: none !important; right: auto !important; top: auto !important; width: 2.2rem !important; height: 2.2rem !important; min-width: 2.2rem !important; flex: 0 0 auto !important; margin: 0 !important; order: 2; } /* "Spacer" vor dem ersten Button: full-width Zeilenumbruch erzwingen, damit alle Buttons in EIGENER Reihe stehen */ .m-dash-widget-section .accordion-item .container-fluid > button:first-of-type { margin-left: 0 !important; } .m-dash-widget-section .accordion-item .container-fluid::before { content: ''; flex: 0 0 100%; height: 0; order: 1; } /* Empty-State */ .m-dash-widget-section .dash-adv-empty { padding: 1rem 0.5rem; text-align: center; color: var(--white); font-size: 0.85rem; } } /* ============================================================================= 4.3 SUBNAV — Mobile Top-Nav für Unterseiten (m-subnav-*) Partner-Variante: Akzent var(--darkRose). Aufbau analog Mail (Doku in [[UI Mobile Dashboard#🔴 Subnav-Pattern m-subnav]]). ============================================================================= */ @media (max-width: 991px) { body.has-subnav .mobile-icons-bar { display: none !important; } body.has-subnav .mobile-content-wrapper { padding-top: 0 !important; } .m-subnav { position: fixed; top: 0; left: 0; right: 0; padding: 0.75rem; background-color: var(--darkblue); z-index: 9998; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .m-subnav-row { display: flex; gap: 0.5rem; align-items: center; } .m-subnav-row + .m-subnav-row { margin-top: 0.5rem; } .m-subnav-title { flex: 1; min-width: 0; /* darf schrumpfen — sonst drückt langer Text die Icons raus */ white-space: nowrap; /* NIE umbrechen: Subnav-Höhe bleibt geräteunabhängig konstant (Listen-margin-top rechnet mit fester Höhe, Gotcha #13) */ overflow: hidden; text-overflow: ellipsis; /* langer Zusatz (AdSpace-/Kundenname) wird mit … gekappt */ font-size: 1rem; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; } /* Aktuell ausgewählter Kunde/Werbefläche neben dem Titel (klein, grau, mit Mittelpunkt-Trenner) — wie bei jd-mail. */ .m-subnav-subtitle { display: inline; margin-left: 0.5rem; font-size: 0.7rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, 0.6); white-space: nowrap; } /* Header-Icon-Buttons (Anfragen/Glocke/Profil): Anfragen+Glocke sind
, Profil ist