|
|
| Zeile 185: |
Zeile 185: |
| .whisky-glass { width: 32px; height: 32px; } | | .whisky-glass { width: 32px; height: 32px; } |
| } | | } |
|
| |
|
| |
| /* ===== Overlay & Modal ===== */
| |
| .mw-popup-overlay {
| |
| position: fixed;
| |
| inset: 0;
| |
| background: rgba(0,0,0,0.45);
| |
| z-index: 10000;
| |
| }
| |
| .mw-popup-modal {
| |
| position: fixed;
| |
| top: 50%; left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| background: #fff;
| |
| max-width: 96%;
| |
| width: 640px;
| |
| padding: 20px 24px 24px;
| |
| border-radius: 12px;
| |
| z-index: 10001;
| |
| text-align: center;
| |
| box-shadow: 0 10px 28px rgba(0,0,0,0.35);
| |
| max-height: 94vh;
| |
| overflow-y: auto;
| |
| }
| |
|
| |
| /* ===== Fireworks Canvas Bereich (oben) ===== */
| |
| /* ===== Overlay & Modal ===== */
| |
| .mw-popup-overlay {
| |
| position: fixed;
| |
| inset: 0;
| |
| background: rgba(0,0,0,0.45);
| |
| z-index: 10000;
| |
| }
| |
|
| |
| .mw-popup-modal {
| |
| position: fixed;
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| background: #fff;
| |
| max-width: 96%;
| |
| width: 720px;
| |
| padding: 24px 28px 34px;
| |
| border-radius: 14px;
| |
| z-index: 10001;
| |
| text-align: center;
| |
| box-shadow: 0 10px 28px rgba(0,0,0,0.35);
| |
| max-height: 94vh;
| |
| overflow-y: auto;
| |
| }
| |
|
| |
| /* Overlay & Modal (verwende deine bestehende Popup-Optik gern weiter) */
| |
| .mw-popup-overlay {
| |
| position: fixed;
| |
| inset: 0;
| |
| background: rgba(0,0,0,0.45);
| |
| z-index: 10000;
| |
| }
| |
| .mw-popup-modal {
| |
| position: fixed;
| |
| top: 50%; left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| background: #fff;
| |
| max-width: 96%;
| |
| width: 760px;
| |
| padding: 20px 24px 26px;
| |
| border-radius: 14px;
| |
| z-index: 10001;
| |
| text-align: center;
| |
| box-shadow: 0 10px 28px rgba(0,0,0,0.35);
| |
| max-height: 94vh;
| |
| overflow-y: auto;
| |
| }
| |
|
| |
| /* Whisky-Canvas Bühne */
| |
| .mw-fw-canvas-wrap {
| |
| position: relative;
| |
| height: 260px;
| |
| margin: -8px -8px 14px;
| |
| border-radius: 10px;
| |
| overflow: hidden;
| |
| background: radial-gradient(ellipse at center, #0b1c38 0%, #061025 60%, #03060d 100%);
| |
| box-shadow: inset 0 0 30px rgba(0,0,0,0.65);
| |
| }
| |
| .mw-fw-canvas { display:block; width:100%; height:100%; }
| |
|
| |
| /* Headline & Intro */
| |
| .mw-popup-modal h2 {
| |
| margin: 8px 0 6px;
| |
| font-size: 1.35em;
| |
| }
| |
| .mw-popup-content p {
| |
| margin: 0.5em 0;
| |
| font-size: 1.06em;
| |
| line-height: 1.5;
| |
| }
| |
|
| |
| /* Kartenlayout für die zwei Abfüllungen */
| |
| .mw-wnews-cards {
| |
| margin-top: 10px;
| |
| display: grid;
| |
| grid-template-columns: 1fr 1fr;
| |
| gap: 12px;
| |
| }
| |
| .mw-wnews-card {
| |
| display: grid;
| |
| grid-template-rows: auto auto;
| |
| background: #f8f9fa;
| |
| border: 1px solid #e3e6e8;
| |
| border-radius: 10px;
| |
| text-decoration: none;
| |
| color: inherit;
| |
| overflow: hidden;
| |
| transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
| |
| }
| |
| .mw-wnews-card:hover {
| |
| transform: translateY(-2px);
| |
| box-shadow: 0 8px 18px rgba(0,0,0,.12);
| |
| border-color: #d5dadd;
| |
| }
| |
| .mw-wnews-thumb img {
| |
| display:block;
| |
| width:100%;
| |
| height: 220px;
| |
| object-fit: cover;
| |
| }
| |
| .mw-wnews-meta {
| |
| padding: 10px 12px;
| |
| display:flex;
| |
| flex-direction:column;
| |
| gap: 6px;
| |
| }
| |
| .mw-wnews-title {
| |
| font-weight: 700;
| |
| font-size: 1.02em;
| |
| }
| |
| .mw-wnews-cta {
| |
| color: #36c;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| /* Button-Reihe */
| |
| .mw-popup-button-row {
| |
| display:flex; justify-content:center; gap:10px; margin-top: 12px; flex-wrap: wrap;
| |
| }
| |
| .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; }
| |
|
| |
| /* Mobil */
| |
| @media (max-width: 640px) {
| |
| .mw-popup-modal { width: calc(100% - 20px); padding: 16px; }
| |
| .mw-fw-canvas-wrap { height: 220px; margin: -6px -6px 10px; }
| |
| .mw-wnews-cards { grid-template-columns: 1fr; }
| |
| .mw-wnews-thumb img { height: 200px; }
| |
| }
| |
|
| |
|
| |
|
|
| |
|
| Zeile 623: |
Zeile 459: |
| a:hover { color: #1c4d7d !important; } | | a:hover { color: #1c4d7d !important; } |
| img { filter: none !important; } | | img { filter: none !important; } |
| }
| |
|
| |
|
| |
|
| |
| /* Slàinte-Text styling + Animation */
| |
| .mw-slainte-toast {
| |
| font: 700 clamp(20px, 4.2vw, 36px) / 1.15 "Segoe UI", Roboto, Arial, sans-serif;
| |
| color: #fff;
| |
| background: linear-gradient(0deg, #ffc76a, #ffffff);
| |
| -webkit-background-clip: text;
| |
| background-clip: text;
| |
| -webkit-text-fill-color: transparent;
| |
| text-shadow: 0 0 18px rgba(255,200,120,0.35);
| |
| margin: 6px 0 2px;
| |
| opacity: 0;
| |
| transform: translateY(8px) scale(0.98);
| |
| animation: toast-in 900ms ease-out forwards, toast-glow 3.5s ease-in-out 900ms infinite;
| |
| }
| |
|
| |
| @keyframes toast-in {
| |
| 0% { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(2px); }
| |
| 60% { opacity: 1; transform: translateY(0) scale(1.00); filter: blur(0); }
| |
| 100% { opacity: 1; transform: translateY(0) scale(1.00); }
| |
| }
| |
| @keyframes toast-glow {
| |
| 0%,100% { text-shadow: 0 0 12px rgba(255,200,120,0.25), 0 0 0 rgba(255,255,255,0); }
| |
| 50% { text-shadow: 0 0 22px rgba(255,200,120,0.5), 0 0 6px rgba(255,255,255,0.25); }
| |
| }
| |
|
| |
| /* Bewegung reduzieren respektieren */
| |
| @media (prefers-reduced-motion: reduce) {
| |
| .mw-slainte-toast { animation: none; opacity: 1; transform: none; }
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
| /* ==== Mobile-Fix: Bild vollständig anzeigen ==== */
| |
| @media (max-width: 640px) {
| |
| /* Einspaltig hast du bereits – hier die Bilddarstellung */
| |
| .mw-wnews-thumb {
| |
| background: #000; /* schwarzer Rand falls Seitenverhältnis abweicht */
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
|
| |
| /* Vorher war: height: 200/220px + object-fit: cover */
| |
| .mw-wnews-thumb img {
| |
| width: 100%;
| |
| height: auto !important; /* fixe Höhe überschreiben */
| |
| max-height: 60vh; /* nicht höher als 60% der Bildschirmhöhe */
| |
| object-fit: contain !important; /* ganzes Bild zeigen, ohne Beschnitt */
| |
| }
| |
| } | | } |