|
|
| Zeile 1: |
Zeile 1: |
| /* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ | | /* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ |
| /* ===== Overlay ===== */
| |
| .mw-popup-overlay {
| |
| position: fixed;
| |
| inset: 0;
| |
| background: rgba(0,0,0,0.4);
| |
| z-index: 10000;
| |
| }
| |
|
| |
| /* ===== Modal ===== */
| |
| .mw-popup-modal {
| |
| position: fixed;
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| background: #fff;
| |
| max-width: 96%;
| |
| width: 640px; /* Breiterer Bereich auf Desktop */
| |
| padding: 80px 40px 30px; /* Viel Platz oben für Herz+Logo */
| |
| border-radius: 12px;
| |
| z-index: 10001;
| |
| text-align: center;
| |
| box-shadow: 0 8px 24px rgba(0,0,0,0.35);
| |
| max-height: 94vh;
| |
| overflow-y: auto;
| |
| }
| |
|
| |
| /* ===== Logo + Herz ===== */
| |
| .mw-popup-logo {
| |
| position: relative;
| |
| display: inline-block;
| |
| margin-bottom: 56px; /* Abstand zwischen Logo/Herz und Text */
| |
| z-index: 2;
| |
| }
| |
| .mw-popup-logo img {
| |
| max-width: 150px;
| |
| position: relative;
| |
| z-index: 2;
| |
| }
| |
|
| |
| /* Herz hinter allem */
| |
| .mw-popup-heart {
| |
| position: absolute;
| |
| top: -20px; /* Herz hochziehen */
| |
| left: 50%;
| |
| width: 120px;
| |
| height: 120px;
| |
| background: red;
| |
| transform: translateX(-50%) rotate(-45deg);
| |
| transform-origin: center;
| |
| z-index: 0; /* Hinter Text und Buttons */
| |
| animation: pulse 1.5s infinite;
| |
| }
| |
| .mw-popup-heart::before,
| |
| .mw-popup-heart::after {
| |
| content: "";
| |
| position: absolute;
| |
| width: 120px;
| |
| height: 120px;
| |
| background: red;
| |
| border-radius: 50%;
| |
| }
| |
| .mw-popup-heart::before { top: -60px; left: 0; }
| |
| .mw-popup-heart::after { left: 60px; top: 0; }
| |
|
| |
| /* Puls-Animation */
| |
| @keyframes pulse {
| |
| 0%, 100% { transform: translateX(-50%) rotate(-45deg) scale(1); }
| |
| 50% { transform: translateX(-50%) rotate(-45deg) scale(1.1); }
| |
| }
| |
|
| |
| /* ===== Text & Überschrift (immer vor dem Herz) ===== */
| |
| .mw-popup-modal h2,
| |
| .mw-popup-content,
| |
| .mw-popup-close,
| |
| .mw-popup-wiki-button {
| |
| position: relative;
| |
| z-index: 3;
| |
| }
| |
|
| |
| .mw-popup-modal h2 {
| |
| margin: 8px 0 12px;
| |
| font-size: 1.35em;
| |
| }
| |
| .mw-popup-content p {
| |
| margin: 0.6em 0;
| |
| font-size: 1.08em;
| |
| line-height: 1.55;
| |
| text-align: center;
| |
| }
| |
|
| |
| /* ===== Buttons: gleich breit & responsiv ===== */
| |
| .mw-popup-button-row {
| |
| display: flex;
| |
| justify-content: center;
| |
| gap: 10px;
| |
| margin-top: 1em;
| |
| flex-wrap: wrap; /* mobil umbrechen */
| |
| }
| |
|
| |
| .mw-popup-close,
| |
| .mw-popup-wiki-button {
| |
| flex: 1 1 140px; /* beide gleich breit, min. Breite */
| |
| text-align: center;
| |
| }
| |
|
| |
| .mw-popup-close {
| |
| padding: 10px 16px;
| |
| border: none;
| |
| background: #36c;
| |
| color: #fff;
| |
| border-radius: 6px;
| |
| cursor: pointer;
| |
| font-size: 1em;
| |
| }
| |
| .mw-popup-close:hover { background: #258; }
| |
|
| |
| .mw-popup-wiki-button {
| |
| padding: 10px 16px;
| |
| background: #f60;
| |
| color: #fff;
| |
| border-radius: 6px;
| |
| text-decoration: none;
| |
| font-size: 1em;
| |
| }
| |
| .mw-popup-wiki-button:hover { background: #d85000; }
| |
|
| |
| /* ===== Mobile ===== */
| |
| @media (max-width: 480px) {
| |
| .mw-popup-modal {
| |
| width: calc(100% - 20px);
| |
| padding: 70px 16px 16px;
| |
| }
| |
| .mw-popup-logo img {
| |
| max-width: 150px;
| |
| }
| |
| .mw-popup-heart {
| |
| top: -10px;
| |
| width: 100px;
| |
| height: 100px;
| |
| }
| |
| .mw-popup-heart::before,
| |
| .mw-popup-heart::after {
| |
| width: 100px;
| |
| height: 100px;
| |
| }
| |
| .mw-popup-heart::before { top: -50px; }
| |
| .mw-popup-heart::after { left: 50px; }
| |
| }
| |
|
| |
|
| |
|
| |
| /* ===== Sticky Charity Banner ===== */
| |
| .mw-sticky-banner-active {
| |
| /* Platz für den fixierten Banner schaffen – Höhe muss zum Banner passen */
| |
| --mw-sticky-banner-h: 52px;
| |
| margin-top: var(--mw-sticky-banner-h);
| |
| }
| |
|
| |
| .mw-sticky-banner {
| |
| position: fixed;
| |
| top: 0; left: 0; right: 0;
| |
| background: #980000; /* dunkles Rot */
| |
| color: #fff;
| |
| font: 600 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
| |
| box-shadow: 0 2px 10px rgba(0,0,0,.25);
| |
| }
| |
|
| |
| .mw-sticky-banner__inner {
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| padding: 10px 16px; /* -> Gesamthöhe ~52px */
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 12px;
| |
| }
| |
|
| |
| .mw-sticky-banner__text {
| |
| flex: 1 1 auto;
| |
| white-space: nowrap;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| }
| |
|
| |
| .mw-sticky-banner__btns {
| |
| display: flex;
| |
| gap: 8px;
| |
| flex: 0 0 auto;
| |
| }
| |
|
| |
| .mw-sticky-banner__btn {
| |
| display: inline-block;
| |
| padding: 6px 10px;
| |
| border-radius: 6px;
| |
| text-decoration: none;
| |
| font-weight: 700;
| |
| font-size: 13px;
| |
| line-height: 1;
| |
| }
| |
|
| |
| .mw-sticky-banner__btn--primary {
| |
| background: #ff7a00; /* Orange */
| |
| color: #fff;
| |
| }
| |
| .mw-sticky-banner__btn--primary:hover { background: #e56e00; }
| |
|
| |
| .mw-sticky-banner__btn--secondary {
| |
| background: #ffffff20; /* leichte weiße Tönung */
| |
| color: #fff;
| |
| border: 1px solid #ffffff55;
| |
| }
| |
| .mw-sticky-banner__btn--secondary:hover {
| |
| background: #ffffff30;
| |
| border-color: #ffffff88;
| |
| }
| |
|
| |
| .mw-sticky-banner__close {
| |
| appearance: none;
| |
| border: none;
| |
| background: transparent;
| |
| color: #fff;
| |
| font-size: 20px;
| |
| line-height: 1;
| |
| cursor: pointer;
| |
| padding: 0 4px;
| |
| }
| |
|
| |
| /* ===== Mobile Tweaks ===== */
| |
| @media (max-width: 600px) {
| |
| .mw-sticky-banner-active { --mw-sticky-banner-h: 88px; } /* Banner höher → mehr top margin */
| |
| .mw-sticky-banner__inner {
| |
| flex-wrap: wrap;
| |
| gap: 8px 10px;
| |
| padding: 10px 12px; /* Kompakter */
| |
| }
| |
| .mw-sticky-banner__text {
| |
| flex: 1 1 100%;
| |
| white-space: normal; /* Umbruch erlauben */
| |
| }
| |
| .mw-sticky-banner__btns {
| |
| flex: 1 1 100%;
| |
| justify-content: flex-start;
| |
| }
| |
| .mw-sticky-banner__btn { padding: 8px 12px; }
| |
| .mw-sticky-banner__close { margin-left: auto; }
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| /* --- Layout für die drei Bewertungsboxen --- */ | | /* --- Layout für die drei Bewertungsboxen --- */ |
| Zeile 433: |
Zeile 184: |
| @media (max-width: 480px) { | | @media (max-width: 480px) { |
| .whisky-glass { width: 32px; height: 32px; } | | .whisky-glass { width: 32px; height: 32px; } |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /* Popup & Banner deaktivieren – sicher für <body>. */
| |
|
| |
| /* Popup (Overlay + Modal) ausblenden */
| |
| .mw-popup-overlay,
| |
| .mw-popup-modal {
| |
| display: none !important;
| |
| }
| |
|
| |
| /* Banner selbst ausblenden */
| |
| .mw-sticky-banner {
| |
| display: none !important;
| |
| }
| |
|
| |
| /* WICHTIG: body bleibt sichtbar – nur der zusätzliche Platz weg */
| |
| .mw-sticky-banner-active {
| |
| margin-top: 0 !important;
| |
| } | | } |