/* ============================================================================= EUROPEAN THEME PARKS — COLORFUL, MOBILE-FIRST UI Light Mode default; Dark Mode optional via .dark-mode on ========================================================================== */ /* Design System */ :root{ /* Brand + vivid accents */ --primary-50:#eef2ff; --primary-100:#e0e7ff; --primary-400:#818cf8; --primary-500:#667eea; --primary-600:#5a67d8; --primary-700:#4c51bf; --accent-pink:#ec4899; --accent-purple:#a855f7; --accent-cyan:#06b6d4; --accent-lime:#84cc16; --accent-amber:#f59e0b; --accent-red:#ef4444; --accent-green:#10b981; --accent-blue:#3b82f6; /* Soft tints for readable colorful backgrounds */ --tint-green:#d1fae5; --tint-blue:#dbeafe; --tint-amber:#fef3c7; --tint-red:#fee2e2; --tint-cyan:#cffafe; --tint-purple:#ede9fe; --tint-pink:#fce7f3; --tint-lime:#ecfccb; /* Gray scale */ --gray-50:#f4f4f4; --gray-100:#ffffff26; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#0050d1; --gray-800:#1f2937; --gray-900:#111827; /* Dark mode */ --dark-bg:#000000; --dark-surface:#0f0f0f; --dark-layer:#1f2937; --dark-border:#334155; --dark-text:#ffffff; --dark-text-2:#94a3b8; /* Radii, shadows, spacing */ --r-sm:.375rem; --r-md:.5rem; --r-lg:.75rem; --r-xl:1rem; --r-2xl:1.25rem; --r-3xl:1.75rem; --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow-md:0 4px 8px rgba(0,0,0,.08); --shadow-lg:0 12px 22px rgba(0,0,0,.12); --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem; --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; /* Motion + touch */ --transition:200ms ease; --touch:44px; /* WCAG comfortable target */ --touch-sm:36px; } /* Reset / base */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth} body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--gray-800);background:linear-gradient(135deg,var(--primary-500) 0%,var(--primary-700) 100%);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} h1,h2,h3,h4,p,ul,ol{margin:0} ul,ol{list-style:none;padding:0} a{text-decoration:none;color:inherit} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} img{display:block;max-width:100%;height:auto} /* Container */ .container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--s-4)} @media (min-width:768px){.container{padding:0 var(--s-6)}} @media (min-width:1024px){.container{padding:0 var(--s-8)}} /* Header */ .header{background:linear-gradient(135deg,var(--primary-600),var(--primary-700));color:#fff;padding:var(--s-4) 0;position:sticky;top:0;z-index:20;box-shadow:var(--shadow-md)} .header-content{display:flex;flex-direction:column;gap:var(--s-4);align-items:center;text-align:center} .header-main{width:100%} .header-title{font-weight:800;font-size:1.75rem;margin-bottom:.375rem;background:linear-gradient(45deg,#fff,#e2e8f0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .header-subtitle{font-size:.98rem;opacity:.95} .header-controls{display:flex;flex-direction:column;gap:var(--s-3);width:100%} .control-buttons{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:center} @media (min-width:768px){ .header{padding:var(--s-6) 0} .header-content{flex-direction:row;justify-content:space-between;text-align:left} .header-title{font-size:2.5rem} .header-controls{width:auto;align-items:flex-end} } /* Form Controls */ .park-selector,.form-control{min-height:var(--touch);border-radius:var(--r-lg);font-size:.95rem} .park-selector{width:100%;max-width:300px;padding:var(--s-3) var(--s-4);border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.95);color:var(--gray-800);transition:all var(--transition)} .park-selector:hover{background:#fff;border-color:rgba(255,255,255,.45)} .park-selector:focus{outline:none;border-color:var(--primary-100);box-shadow:0 0 0 3px rgba(255,255,255,.18)} .form-control{padding:var(--s-3) var(--s-4);border:2px solid var(--gray-300);background:#fff;transition:border-color var(--transition)} .form-control:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100)} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:var(--s-3) var(--s-5);border-radius:var(--r-lg);font-weight:700;font-size:.9rem;line-height:1;min-height:var(--touch);border:2px solid transparent;transition:all var(--transition);white-space:nowrap} .btn--primary{background:var(--primary-500);color:#fff} .btn--primary:hover{background:var(--primary-600);transform:translateY(-1px);box-shadow:var(--shadow-md)} .btn--secondary{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)} .btn--secondary:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35)} .btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .btn--outline:hover{background:rgba(255,255,255,.12)} .btn--ghost{background:var(--gray-100);color:var(--gray-700)} .btn--ghost:hover{background:var(--gray-200)} .btn--small{padding:.5rem .9rem;min-height:var(--touch-sm);font-size:.85rem} /* Main */ .main{background:var(--gray-50);min-height:calc(100vh - 120px);padding:var(--s-4) 0} @media (min-width:768px){.main{padding:var(--s-8) 0}} /* Park info */ .park-info{background:#fff;border-radius:var(--r-3xl);padding:var(--s-6);margin-bottom:var(--s-6);text-align:center;box-shadow:var(--shadow-md)} .park-info h2{font-weight:800;font-size:1.6rem;color:var(--gray-800)} .park-stats{display:flex;gap:var(--s-5);justify-content:center;margin-top:var(--s-5);flex-wrap:wrap} .stat{text-align:center;min-width:90px} .stat-label{display:block;font-size:.82rem;color:var(--gray-500);font-weight:600} .stat-value{display:block;font-weight:800;color:var(--primary-600);font-size:1.35rem} /* Controls panel */ .controls-panel{background:#fff;border-radius:var(--r-2xl);padding:var(--s-4);margin-bottom:var(--s-6);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--s-4)} .controls-group{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap} .control-label{font-weight:800;color:var(--gray-700);font-size:.9rem} /* Attractions grid — auto-fit + minmax + mobile landscape 2-up fallback */ .attractions-grid { display: grid; gap: var(--s-4); margin: var(--s-6) 0; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); } @media (orientation: landscape) and (min-width: 568px) and (max-width: 915px) { .attractions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Force 2 columns on phones in landscape if space allows */ @media (orientation:landscape) and (min-width:568px) and (max-width:915px){ .attractions-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Wider breakpoints naturally increase columns via auto-fit */ /* Attraction cards */ .attraction-card{ background:#fff;border-radius:var(--r-2xl);padding:var(--s-5);box-shadow:var(--shadow-sm); transition:transform var(--transition),box-shadow var(--transition),background var(--transition); border-left:4px solid var(--gray-200);position:relative;overflow:hidden } .attraction-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)} .attraction-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--gray-200);transition:background var(--transition)} /* Colorful readable tints per wait level */ .wait-none{border-left-color:var(--accent-green);background:linear-gradient(180deg,var(--tint-green),#fff)} .wait-none::before{background:var(--accent-green)} .wait-low{border-left-color:var(--accent-cyan);background:linear-gradient(180deg,var(--tint-cyan),#fff)} .wait-low::before{background:var(--accent-cyan)} .wait-medium{border-left-color:var(--accent-amber);background:linear-gradient(180deg,var(--tint-amber),#fff)} .wait-medium::before{background:var(--accent-amber)} .wait-high{border-left-color:var(--accent-red);background:linear-gradient(180deg,var(--tint-red),#fff)} .wait-high::before{background:var(--accent-red)} .wait-very-high{border-left-color:#dc2626;background:linear-gradient(180deg,#ffe4e6,#fff)} .wait-very-high::before{background:#dc2626} .closed{opacity:.8;border-left-color:var(--gray-400)} .closed::before{background:var(--gray-400)} /* Pinned / Hidden */ .attraction-pinned{border-left-color:var(--primary-500)!important;background:linear-gradient(180deg,var(--primary-100),#fff);box-shadow:0 10px 24px rgba(102,126,234,.18)} .attraction-pinned::before{background:linear-gradient(90deg,var(--primary-500),var(--primary-600));height:4px} .attraction-pinned::after{content:"📌";position:absolute;top:var(--s-3);right:var(--s-3);font-size:.85rem;opacity:.8} .attraction-hidden{opacity:.6;background:linear-gradient(180deg,var(--gray-100),#fff);border-left-color:var(--gray-400)!important;filter:grayscale(18%)} .attraction-hidden::before{background:var(--gray-400)!important} .attraction-hidden .attraction-name{text-decoration:line-through;color:var(--gray-600)} .attraction-hidden::after{content:"👁️‍🗨️";position:absolute;top:var(--s-3);right:var(--s-3);font-size:.85rem;opacity:.9} /* Card content */ .attraction-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3);margin-bottom:var(--s-4)} .attraction-name{font-weight:900;color:var(--gray-800);line-height:1.25;font-size:1.125rem} @media (min-width:480px){.attraction-name{font-size:1.25rem}} @media (min-width:768px){.attraction-name{font-size:1.35rem}} .attraction-actions{display:flex;gap:.25rem;flex-shrink:0} .action-btn{display:flex;align-items:center;justify-content:center;width:var(--touch-sm);height:var(--touch-sm);border-radius:var(--r-md);background:transparent;color:var(--gray-400);transition:all var(--transition)} .action-btn:hover{background:var(--gray-100);color:var(--gray-600);transform:scale(1.06)} .action-btn.active{background:var(--primary-500);color:#fff;box-shadow:var(--shadow-sm)} .action-btn.active:hover{background:var(--primary-600)} .action-btn.unhide-btn{background:var(--accent-green);color:#fff} .action-btn.unhide-btn:hover{background:#059669} .attraction-content{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4)} .wait-info{text-align:center;flex:1} .wait-time{font-weight:900;margin-bottom:.25rem;font-size:1.6rem} @media (min-width:768px){.wait-time{font-size:2rem}} .wait-none .wait-time{color:var(--accent-green)} .wait-low .wait-time{color:var(--accent-cyan)} .wait-medium .wait-time{color:var(--accent-amber)} .wait-high .wait-time{color:var(--accent-red)} .wait-very-high .wait-time{color:#dc2626} .closed .wait-time{color:var(--gray-500)} .wait-trend{font-size:1.05rem;height:1.35rem} .attraction-details{text-align:right;flex-shrink:0} .attraction-area{color:var(--gray-500);font-size:.85rem;font-weight:700;margin-bottom:.25rem} .attraction-status{font-size:.78rem;font-weight:800;padding:.25rem .5rem;border-radius:999px;white-space:nowrap} .attraction-status.open{background:var(--tint-green);color:var(--accent-green)} .attraction-status.closed{background:var(--gray-100);color:var(--gray-500)} /* Loading / empty */ .loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s-12);background:#fff;border-radius:var(--r-3xl);box-shadow:var(--shadow-md);margin:var(--s-6) 0} .spinner{width:48px;height:48px;border:4px solid var(--gray-200);border-left-color:var(--primary-500);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--s-4)} @keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} .empty-state{text-align:center;padding:var(--s-12) var(--s-8);background:#fff;border-radius:var(--r-3xl);box-shadow:var(--shadow-md)} .empty-icon{font-size:3rem;margin-bottom:var(--s-4)} .empty-state h3{font-weight:900;font-size:1.25rem;color:var(--gray-700);margin-bottom:.25rem} .empty-state p{color:var(--gray-500);max-width:44ch;margin:0 auto} /* Park selection callout */ .park-selection-state{text-align:center;padding:var(--s-10) var(--s-6);background:#fff;border-radius:var(--r-3xl);box-shadow:var(--shadow-md);max-width:640px;margin:0 auto;grid-column:1 / -1} .selection-icon{font-size:3.25rem;margin-bottom:var(--s-5);animation:bounce 2s infinite} @keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-8px)}60%{transform:translateY(-4px)}} .park-selection-state h3{font-size:1.5rem;font-weight:900;color:var(--gray-800);margin-bottom:var(--s-3)} .park-selection-state p{font-size:1rem;color:var(--gray-600);margin-bottom:var(--s-6)} /* Modal */ .modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;align-items:center;justify-content:center;padding:var(--s-4);backdrop-filter:blur(4px)} .modal-content{background:#fff;border-radius:var(--r-3xl);max-width:680px;width:100%;max-height:90vh;overflow:hidden;box-shadow:var(--shadow-lg)} .modal-header{padding:var(--s-6);border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:center} .modal-header h3{font-weight:900;font-size:1.25rem;color:var(--gray-800)} .modal-close{width:var(--touch-sm);height:var(--touch-sm);display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);background:var(--gray-100);color:var(--gray-600);transition:all var(--transition)} .modal-close:hover{background:var(--gray-200);color:var(--gray-800)} .modal-body{padding:var(--s-6);max-height:60vh;overflow:auto} /* Statistics / chart controls */ .statistics-info{margin-top:var(--s-6)} .stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4);margin-bottom:var(--s-5)} @media (min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}} .stat-item{text-align:center;padding:var(--s-4);background:var(--gray-50);border-radius:var(--r-xl);border:1px solid var(--gray-200)} .stat-item .stat-value{font-weight:900;color:var(--primary-600);display:block;font-size:1.4rem;margin-bottom:.2rem} .stat-item .stat-label{font-size:.82rem;color:var(--gray-500);font-weight:700} .stats-note{text-align:center;color:var(--gray-500);font-size:.9rem;font-style:italic;margin-top:var(--s-4)} .chart-controls{margin:var(--s-6) 0;padding:var(--s-5);background:var(--gray-50);border-radius:var(--r-2xl);border-left:4px solid var(--primary-500)} .chart-controls h4{margin-bottom:var(--s-3);color:var(--gray-700);font-weight:800;font-size:1rem} .toggle-buttons{display:flex;flex-direction:column;gap:.65rem} .chart-toggle{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:var(--r-lg);border:1px solid transparent;min-height:var(--touch);transition:background var(--transition),border var(--transition)} .chart-toggle:hover{background:#fff;border-color:var(--gray-200)} .chart-toggle input[type="checkbox"]{width:1rem;height:1rem;accent-color:var(--primary-500);cursor:pointer} .toggle-label{font-weight:800;flex:1;font-size:.95rem} .toggle-label.today{color:var(--accent-blue)} .toggle-label.yesterday{color:var(--accent-amber)} .toggle-label.last-week{color:var(--accent-green)} .chart-toggle input:disabled + .toggle-label{color:var(--gray-400);font-style:italic;opacity:.7} .chart-toggle input:disabled{opacity:.4;cursor:not-allowed} #statisticsChart{max-height:380px;min-height:260px;margin:var(--s-5) 0;background:#fff;border-radius:var(--r-xl);padding:var(--s-4);box-shadow:var(--shadow-sm)} @media (max-width:480px){#statisticsChart{max-height:420px;min-height:300px}} /* Settings */ .setting-group{margin-bottom:var(--s-5)} .setting-label{display:flex;align-items:center;gap:.75rem;font-weight:800;color:var(--gray-700);cursor:pointer;padding:.75rem;border-radius:var(--r-lg);min-height:var(--touch);transition:background var(--transition)} .setting-label:hover{background:var(--gray-50)} .setting-label input[type="checkbox"]{width:1rem;height:1rem;accent-color:var(--primary-500)} .notification-info{margin-top:var(--s-3);padding:var(--s-4);background:var(--primary-100);border-radius:var(--r-lg);border-left:4px solid var(--primary-500)} /* Toasts */ .toast{position:fixed;top:var(--s-4);right:var(--s-4);padding:var(--s-4) var(--s-6);border-radius:var(--r-xl);color:#fff;font-weight:800;z-index:60;animation:slideIn .3s ease;max-width:90vw} .toast--success{background:var(--accent-green)}.toast--error{background:var(--accent-red)}.toast--info{background:var(--accent-blue)} @keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}} /* Footer */ #attribution-footer{background:var(--gray-100);border-top:1px solid var(--gray-200);padding:var(--s-4) 0;margin-top:var(--s-8);text-align:center;font-size:.9rem;color:var(--primary-100)} #attribution-footer a{color:var(--accent-amber)}#attribution-footer a:hover{text-decoration:underline} /* Dark mode (opt-in via .dark-mode on body) */ .dark-mode{background:linear-gradient(135deg,var(--dark-bg),var(--dark-surface)) !important;color:var(--dark-text)!important} .dark-mode .main{background:var(--dark-bg)!important} .dark-mode .header{background:linear-gradient(135deg,var(--dark-layer),var(--dark-bg))!important} .dark-mode .attraction-card,.dark-mode .park-info,.dark-mode .controls-panel,.dark-mode .modal-content,.dark-mode .loading-spinner,.dark-mode .empty-state,.dark-mode .park-selection-state{background:var(--dark-surface)!important;color:var(--dark-text)!important;border-color:var(--dark-border)!important} .dark-mode .attraction-name,.dark-mode .modal-header h3,.dark-mode .park-info h2{color:var(--dark-text)!important} .dark-mode .attraction-area,.dark-mode .control-label,.dark-mode .stat-item .stat-label,.dark-mode .stats-note{color:var(--dark-text-2)!important} .dark-mode .stat-item{background:var(--dark-bg)!important;border-color:var(--dark-border)!important} .dark-mode #statisticsChart{background:var(--dark-layer)!important;border:1px solid var(--dark-border)!important} .dark-mode .chart-controls{background:var(--dark-bg)!important;border-left-color:var(--primary-500)!important} .dark-mode .chart-toggle:hover{background:var(--dark-layer)!important;border-color:var(--dark-border)!important} .dark-mode .toggle-label.today{color:#93c5fd!important} .dark-mode .toggle-label.yesterday{color:#fbbf24!important} .dark-mode .toggle-label.last-week{color:#6ee7b7!important} .dark-mode #attribution-footer{background:var(--dark-layer)!important;border-top-color:var(--dark-border)!important;color:var(--dark-text-2)!important} .dark-mode #attribution-footer a{color:#93c5fd!important} /* Compact mobile mode helper */ @media (max-width:480px){ .compact-mode .header{padding:var(--s-3) 0 !important} .compact-mode .header-title{font-size:1.3rem !important} .compact-mode .controls-panel{padding:var(--s-3)!important;margin-bottom:var(--s-4)!important} .compact-mode .park-info{padding:var(--s-4)!important;margin-bottom:var(--s-4)!important} .compact-mode .attraction-card{padding:var(--s-4)!important} .compact-mode .attraction-name{font-size:1.1rem!important} .compact-mode .wait-time{font-size:1.5rem!important} .compact-mode .attraction-area{display:none!important} .action-btn{width:34px;height:34px} } /* Accessibility */ :focus-visible{outline:3px solid var(--primary-500);outline-offset:2px} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important} } /* Spinner + misc */ .loading-message,.no-data-message,.error-message{text-align:center;padding:var(--s-8)} .loading-message p{color:var(--gray-600)}.no-data-message p{margin-bottom:.5rem}.error-message p{color:var(--accent-red);margin-bottom:.5rem} /* === Polishing: saubere Ecken + unten verankerte Wartezeit === */ /* 1) Karte: von Zeile auf Spalte, Content nach unten schieben */ .attraction-card { display: flex; flex-direction: column; min-height: 160px; /* sorgt für genug Raum, damit unten andocken sichtbar bleibt */ position: relative; overflow: hidden; /* clippt interne Pseudo-Elemente an den runden Ecken */ border-left: none !important; /* alte linke Border entfernen */ } /* 2) Linke farbige Leiste als internes Pseudo-Element mit Radius */ .attraction-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; /* etwas kräftiger als 4px für bessere Sichtbarkeit */ background: var(--accent-color, var(--gray-200)); /* wird durch overflow: hidden sauber an die Ecken angepasst */ } /* 3) Obere Linie dezenter, damit Ecken nicht „hart“ wirken */ .attraction-card::before { height: 2px; /* war höher – flacher wirkt ruhiger */ opacity: 0.9; /* Rest (Positionierung) bleibt wie zuvor gesetzt */ } /* 4) Der gesamte Info-Block (Wartezeit + Details) sitzt jetzt unten */ .attraction-content { margin-top: auto; /* schiebt den Block an das Kartenende (unten) */ align-items: flex-end; /* richtet beide Spalten unten aus */ gap: var(--s-3); } /* 5) Typografie: Wartezeit gut lesbar, ohne optisches „Springen“ */ .wait-time { font-size: 1.7rem; /* leicht größer für bessere Lesbarkeit */ line-height: 1; /* verhindert Vertikaldrift in der Zeile */ margin: 0; /* gleicht Browser-Defaults aus */ } /* 6) Farb-Setup über Variable (einheitlich für Leiste & ggf. andere Akzente) */ .wait-none { --accent-color: var(--accent-green); } .wait-low { --accent-color: var(--accent-cyan); } .wait-medium{ --accent-color: var(--accent-amber); } .wait-high { --accent-color: var(--accent-red); } .wait-very-high { --accent-color: #dc2626; } .closed { --accent-color: var(--gray-400); } /* 7) Optional: wenn die obere Zierlinie komplett weg soll */ /* .attraction-card::before { display: none; } */ /* 8) Grid bleibt dynamisch — Landscape-Fallback für 2 Spalten auf Phones */ @media (orientation: landscape) and (min-width: 568px) and (max-width: 915px) { .attractions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 9) Extra-Polish gegen Pixel-Spalten: Kanten glätten bei Bedarf */ .attraction-card, .attraction-card::after { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); /* minimiert 1px-Artefakte bei Rundungen in manchen Engines */ } /* === Polishing: Ecken perfekt + Wartezeit unten verankert === */ /* Karte als Spalte, Inhalt nach unten drücken */ .attraction-card { display: flex; flex-direction: column; min-height: 172px; /* etwas mehr Luft für konsistente Unterkante */ position: relative; overflow: hidden; /* clippt Pseudo-Element sauber am Border-Radius */ border-left: none !important; /* alte seitliche Border abschalten */ background-clip: padding-box; /* vermeidet „Halos“ an den Rundungen */ } /* Farbleiste IN der Karte, mit den runden Ecken „mitgeschnitten“ */ .attraction-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; /* kräftiger für klaren Akzent */ background: var(--accent-color, var(--gray-200)); /* durch overflow:hidden an der Karte werden die Ecken sauber */ pointer-events: none; will-change: transform; } /* Obere Zierlinie dezenter (oder ganz entfernen) */ .attraction-card::before { height: 2px; /* niedriger = ruhigeres Erscheinungsbild */ opacity: .9; /* wer sie ganz entfernen will: display:none; */ } /* Inhalt unten ankern: der komplette Content-Block rutscht nach unten */ .attraction-content { margin-top: auto; /* Flex-Magie: drückt den Block an die Unterkante */ display: flex; align-items: flex-end; /* alles entlang der Unterkante ausrichten */ gap: var(--s-3, .75rem); } /* Wartezeit optisch stabil: kein vertikales „Springen“ */ .wait-info { text-align: right; } .wait-time { font-size: 1.7rem; /* größer, besser lesbar */ line-height: 1; /* verhindert Drift durch Zeilenhöhe */ margin: 0; /* Browserdefaults neutralisieren */ } /* Einheitliche Akzentfarbe (für Leiste und ggf. andere Akzente) */ .wait-none { --accent-color: var(--accent-green); } .wait-low { --accent-color: var(--accent-cyan); } .wait-medium { --accent-color: var(--accent-amber); } .wait-high { --accent-color: var(--accent-red); } .wait-very-high { --accent-color: #dc2626; } .closed { --accent-color: var(--gray-400); } /* Grid dynamisch belassen, aber Phone-Landscape garantiert 2 Spalten */ @media (orientation: landscape) and (min-width: 568px) and (max-width: 915px) { .attractions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); /* verlässlich 2-up */ } } /* Rendering-Feinschliff gegen 1px-Artefakte an Rundungen */ .attraction-card, .attraction-card::after { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); } /* 1) Pseudo-Elemente für die Leiste abschalten */ .attraction-card::before, .attraction-card::after { content: none !important; display: none !important; } /* 2) Karte: runde Ecken + innere Farbleiste via inset box-shadow */ .attraction-card { border-radius: 16px; /* beibehaltener Radius */ overflow: hidden; /* Clip an Radius */ position: relative; /* Drop-Shadow + links innen die Farbleiste; Reihenfolge: drop, dann inset */ box-shadow: 0 8px 22px rgba(0,0,0,.10), inset 6px 0 0 0 var(--accent-color); } /* 3) Konsistent unten: Flex-Spalte + margin-top:auto bleibt aktiv */ .attraction-card { display: flex; flex-direction: column; min-height: 172px; } .attraction-content { margin-top: auto; align-items: flex-end; gap: .75rem; } .wait-time { font-size: 1.7rem; line-height: 1; margin: 0; } /* 4) Akzentfarbe pro Status zentral definieren */ .wait-none { --accent-color: var(--accent-green); } .wait-low { --accent-color: var(--accent-cyan); } .wait-medium { --accent-color: var(--accent-amber); } .wait-high { --accent-color: var(--accent-red); } .wait-very-high { --accent-color: #dc2626; } .closed { --accent-color: var(--gray-400); } /* ===== Compact Mode: dichtere Karten & Steuerung (mobile-first) ===== */ /* 1) Globale Compact-Dichte */ .compact-mode .header { padding-block: .5rem !important; } .compact-mode .header-title { font-size: clamp(1.1rem, 3.5vw, 1.35rem) !important; } .compact-mode .header-subtitle { display: none !important; } .compact-mode .control-buttons { gap: .35rem !important; overflow-x: auto !important; padding-block-end: .2rem !important; } /* 2) Raster kompakter + sicher 2-up im Querformat */ .compact-mode .attractions-grid { gap: .6rem !important; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)) !important; } @media (orientation: landscape) and (min-width: 568px) and (max-width: 915px) { .compact-mode .attractions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* 3) Karten: kleiner, enger, aber lesbar */ .compact-mode .attraction-card { padding: .75rem .9rem !important; min-height: 140px !important; border-radius: 12px !important; box-shadow: 0 6px 14px rgba(0,0,0,.08) !important; } /* Linke Farbleiste über inset box-shadow (saubere Ecken) */ .compact-mode .attraction-card { border-left: none !important; box-shadow: 0 6px 14px rgba(0,0,0,.08), inset 5px 0 0 0 var(--accent-color) !important; } .compact-mode .attraction-card::before, .compact-mode .attraction-card::after { content: none !important; } /* 4) Headerbereich der Karte kompakter */ .compact-mode .attraction-header { gap: .5rem !important; margin-bottom: .5rem !important; } /* 5) Typografie: kompakt + fluid via clamp() */ .compact-mode .attraction-name { font-size: clamp(1.05rem, 3.2vw, 1.25rem) !important; line-height: 1.2 !important; } .compact-mode .wait-time { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; line-height: 1 !important; margin: 0 !important; } /* 6) Wartezeit sicher unten verankert */ .compact-mode .attraction-card { display: flex !important; flex-direction: column !important; } .compact-mode .attraction-content { margin-top: auto !important; align-items: flex-end !important; gap: .5rem !important; } /* 7) Sekundärinfos ausblenden / verkleinern */ .compact-mode .attraction-area { display: none !important; } .compact-mode .attraction-status { font-size: .72rem !important; padding: .2rem .45rem !important; } /* 8) Aktionen und Buttons kompakter, Touch 44px beibehalten */ .compact-mode .action-btn { width: 36px !important; height: 36px !important; font-size: .95rem !important; } /* 9) Steuerungs-Panel dichter */ .compact-mode .controls-panel { padding: .8rem !important; gap: .5rem !important; } .compact-mode .controls-group { gap: .5rem !important; } .compact-mode .form-control, .compact-mode .park-selector { padding-block: .5rem !important; padding-inline: .75rem !important; /* logische Richtungen bleiben korrekt */ } /* 10) Statistikbereich kompakter (optional) */ .compact-mode #statisticsChart { max-height: 320px !important; min-height: 260px !important; padding: .5rem !important; } .compact-mode .chart-controls { padding: .8rem !important; } /* 11) Reduced Motion bleibt respektiert (global vorhanden) */ @media (prefers-reduced-motion: reduce) { .compact-mode * { transition: none !important; animation: none !important; } } /* Wartezeit links unten platzieren (HTML bleibt unverändert) */ .attraction-card { display: flex; flex-direction: column; /* Spalte, damit unten andocken möglich ist */ } .attraction-content { margin-top: auto; /* Block an Kartenboden schieben */ display: flex; align-items: flex-end; /* alles entlang der Unterkante ausrichten */ justify-content: space-between; /* links: Wartezeit, rechts: Details */ gap: .75rem; } /* Wartezeit-Block nach links priorisieren und links ausrichten */ .wait-info { order: -1; /* zuerst in der Zeile = linke Seite */ text-align: left; /* Zahlen/Label linksbündig */ } /* Details (Bereich/Status) stehen rechts und bleiben unten */ .attraction-details { order: 1; text-align: right; } /* Icon-Buttons für Benachrichtigungen (Glocke/Chart etc.) */ .action-btn, .btn--icon { width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-700); box-shadow: 0 2px 6px rgba(0,0,0,.06); transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease; font-size: 0.85rem; } .action-btn:hover, .btn--icon:hover { transform: translateY(-1px); background: var(--gray-200); color: var(--gray-800); } /* Aktiver Benachrichtigungszustand */ .action-btn.notify.is-active { background: var(--primary-500); color: #fff; box-shadow: 0 6px 14px rgba(102,126,234,.28); } .action-btn.notify.is-active:hover { background: var(--primary-600); } /* „Armed“ (Schwelle gesetzt) – grüner Hinweis */ .action-btn.notify.is-armed { background: var(--tint-green); color: var(--accent-green); box-shadow: 0 6px 14px rgba(16,185,129,.22); } .action-btn.notify.is-armed:hover { background: #b7f3d8; color: #0f9e6e; } /* Fokus sichtbar nach Tastatur: gut erkennbare Outline */ .action-btn:focus-visible, .btn--icon:focus-visible { outline: 3px solid var(--primary-500); outline-offset: 2px; } /* Dark Mode Varianten */ .dark-mode .action-btn, .dark-mode .btn--icon { background: var(--dark-bg); color: var(--dark-text-2); box-shadow: 0 2px 6px rgba(0,0,0,.35); } .dark-mode .action-btn:hover, .dark-mode .btn--icon:hover { background: var(--dark-layer); color: var(--dark-text); } .dark-mode .action-btn.notify.is-active { background: var(--primary-600); color: #fff; box-shadow: 0 8px 18px rgba(102,126,234,.35); } .dark-mode .action-btn.notify.is-armed { background: #0f3b2f; color: #7ee2b9; } /* Compact Mode leicht kleiner, aber > 36px */ .compact-mode .action-btn, .compact-mode .btn--icon { width: 40px; height: 40px; border-radius: 10px; } /* Optionaler Text-CTA im Modal zum Setzen der Benachrichtigung */ .btn--notify { background: var(--primary-500); color: #fff; border-radius: 12px; padding: .7rem 1rem; font-weight: 800; } .btn--notify:hover { background: var(--primary-600); } .btn--notify:focus-visible { outline: 3px solid var(--primary-500); outline-offset: 2px; } /* Mobile: Parkauswahl zentrieren */ @media (max-width: 480px) { .header-controls { display: flex; align-items: center; /* vertikal zentrieren */ justify-content: center; /* horizontal zentrieren */ width: 100%; gap: .5rem; text-align: center; } .control-buttons { width: 100%; display: flex; justify-content: center; /* Buttons mittig */ align-items: center; gap: .35rem; } /* Die Select-Box selbst mittig und nicht zu breit */ .park-selector { display: block; margin-inline: auto; /* mittig in der Zeile */ width: min(320px, 100%); } } /* Compact Mode erzwingt die gleiche Zentrierung */ .compact-mode .header-controls { justify-content: center !important; align-items: center !important; } .compact-mode .control-buttons { justify-content: center !important; } .compact-mode .park-selector { margin-inline: auto !important; width: min(300px, 100%) !important; } /* Dekoratives Overlay klickdurchlässig machen */ .attraction-card::before, .attraction-card::after, .attraction-pinned::after, .attraction-hidden::after { pointer-events: none !important; } /* Aktionsleiste überlagert nicht mehr, fängt zuverlässig Klicks */ .attraction-actions { position: relative; z-index: 2; } /* FIX: Icons nie abschneiden, auch bei langen Namen */ .attraction-header { display: flex; align-items: flex-start; gap: 0.4rem; margin-bottom: var(--s-4); min-height: 36px; } .attraction-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; word-break: break-word; font-weight: 900; color: var(--gray-800); font-size: 1.125rem; } @media (min-width: 480px) { .attraction-name { f .attraction-actions { flex-shrink: 0; /* nie schrumpfen */ display: flex; gap: 0.25rem; align-items: flex-start; min-width: 100px; /* genug Platz für alle 4-5 Icons */ } /* Desktop: mehr Platz für Aktionen */ @media (min-width: 768px) { .attraction-actions { min-width: 200px; gap: 0.35rem; } } /* Sehr schmale Screens: Aktionen in zweite Zeile */ @media (max-width: 320px) { .attraction-header { flex-direction: column; gap: 0.75rem; } .attraction-actions { justify-content: flex-end; min-width: auto; } }