1685 lines
46 KiB
CSS
1685 lines
46 KiB
CSS
/* ============================================
|
|
HANDYANSICHT - MOBILE OPTIMIERUNG WRAPPER
|
|
Alle Mobile-Optimierungen nur in dieser Datei!
|
|
============================================ */
|
|
|
|
/* Basis-Wrapper Styles */
|
|
.handy-ansicht {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.handy-ansicht__container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
.handy-ansicht__content {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ============================================
|
|
MOBILE OPTIMIERUNGEN (nur < 768px)
|
|
============================================ */
|
|
|
|
@media (max-width: 767px) {
|
|
/* === BASIS-OPTIMIERUNGEN === */
|
|
.handy-ansicht {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
.handy-ansicht__content * {
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.handy-ansicht__content img,
|
|
.handy-ansicht__content video,
|
|
.handy-ansicht__content iframe,
|
|
.handy-ansicht__content embed,
|
|
.handy-ansicht__content object {
|
|
max-width: 100% !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
/* Verhindere horizontales Scrollen */
|
|
.handy-ansicht * {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* === TOUCH-OPTIMIERTE INTERAKTIVE ELEMENTE === */
|
|
|
|
/* Buttons - Mindestgröße 48px für Touch, aber proportional kleiner */
|
|
.handy-ansicht button,
|
|
.handy-ansicht [role="button"]:not(input),
|
|
.handy-ansicht [onclick],
|
|
.handy-ansicht [tabindex="0"]:not(input):not(textarea) {
|
|
min-height: 44px !important;
|
|
min-width: 44px !important;
|
|
padding: clamp(0.625rem, 2vw, 0.875rem) clamp(0.875rem, 3vw, 1rem) !important;
|
|
font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
|
|
touch-action: manipulation;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
}
|
|
|
|
/* Links - Mindestgröße 44px */
|
|
.handy-ansicht a {
|
|
min-height: 44px !important;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.5rem !important;
|
|
touch-action: manipulation;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Input-Felder - 48px Höhe, 16px Schrift (verhindert iOS-Zoom) */
|
|
.handy-ansicht input[type="text"],
|
|
.handy-ansicht input[type="email"],
|
|
.handy-ansicht input[type="tel"],
|
|
.handy-ansicht input[type="password"],
|
|
.handy-ansicht input[type="number"],
|
|
.handy-ansicht input[type="search"],
|
|
.handy-ansicht input[type="url"],
|
|
.handy-ansicht input[type="date"],
|
|
.handy-ansicht input[type="time"],
|
|
.handy-ansicht textarea,
|
|
.handy-ansicht select {
|
|
min-height: 48px !important;
|
|
font-size: 16px !important;
|
|
padding: 0.875rem !important;
|
|
width: 100% !important;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* Checkboxen und Radio-Buttons größer */
|
|
.handy-ansicht input[type="checkbox"],
|
|
.handy-ansicht input[type="radio"] {
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
min-width: 20px !important;
|
|
min-height: 20px !important;
|
|
min-height: 44px !important;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* Labels für Touch-Targets */
|
|
.handy-ansicht label {
|
|
min-height: 44px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem 0 !important;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* === LAYOUT-OPTIMIERUNGEN === */
|
|
|
|
/* Grid-Layouts zu 1 Spalte */
|
|
.handy-ansicht [class*="grid"] {
|
|
grid-template-columns: 1fr !important;
|
|
gap: 1rem !important;
|
|
}
|
|
|
|
/* Flex-Layouts optimieren */
|
|
.handy-ansicht [class*="flex"] {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Sections - Reduzierte Paddings */
|
|
.handy-ansicht section,
|
|
.handy-ansicht [class*="section"] {
|
|
padding: clamp(2rem, 5vw, 2.5rem) clamp(0.75rem, 3vw, 1rem) !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
width: 100% !important;
|
|
max-width: 100vw !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Container max-width anpassen */
|
|
.handy-ansicht [class*="max-w"] {
|
|
max-width: 100% !important;
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
|
|
/* Abstände zwischen Elementen */
|
|
.handy-ansicht [class*="gap"] {
|
|
gap: clamp(0.5rem, 2vw, 0.75rem) !important;
|
|
}
|
|
|
|
.handy-ansicht [class*="space-y"] > * + * {
|
|
margin-top: clamp(0.75rem, 2.5vw, 1rem) !important;
|
|
}
|
|
|
|
/* Margin Bottom für bessere Lesbarkeit */
|
|
.handy-ansicht p + p {
|
|
margin-top: clamp(0.75rem, 2vw, 1rem) !important;
|
|
}
|
|
|
|
/* === TYPOGRAFIE-OPTIMIERUNGEN === */
|
|
/* Responsive Schriftgrößen mit clamp() - skaliert automatisch */
|
|
|
|
.handy-ansicht h1 {
|
|
font-size: clamp(1.5rem, 5vw, 1.75rem) !important;
|
|
line-height: 1.2 !important;
|
|
margin-bottom: 1rem !important;
|
|
word-wrap: break-word !important;
|
|
overflow-wrap: break-word !important;
|
|
hyphens: auto !important;
|
|
}
|
|
|
|
.handy-ansicht h2 {
|
|
font-size: clamp(1.25rem, 4.5vw, 1.5rem) !important;
|
|
line-height: 1.3 !important;
|
|
margin-bottom: 0.875rem !important;
|
|
word-wrap: break-word !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
.handy-ansicht h3 {
|
|
font-size: clamp(1.125rem, 4vw, 1.25rem) !important;
|
|
line-height: 1.4 !important;
|
|
margin-bottom: 0.75rem !important;
|
|
word-wrap: break-word !important;
|
|
}
|
|
|
|
.handy-ansicht h4 {
|
|
font-size: clamp(1rem, 3.5vw, 1.125rem) !important;
|
|
line-height: 1.4 !important;
|
|
word-wrap: break-word !important;
|
|
}
|
|
|
|
.handy-ansicht h5 {
|
|
font-size: clamp(0.875rem, 3vw, 1rem) !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
.handy-ansicht h6 {
|
|
font-size: clamp(0.75rem, 2.5vw, 0.875rem) !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
.handy-ansicht p {
|
|
font-size: clamp(0.9375rem, 2.5vw, 1rem) !important;
|
|
line-height: 1.6 !important;
|
|
word-wrap: break-word !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
.handy-ansicht li {
|
|
font-size: clamp(0.9375rem, 2.5vw, 1rem) !important;
|
|
line-height: 1.6 !important;
|
|
word-wrap: break-word !important;
|
|
}
|
|
|
|
/* === UI-KOMPONENTEN === */
|
|
|
|
/* Cards */
|
|
.handy-ansicht [class*="card"],
|
|
.handy-ansicht [class*="Card"] {
|
|
padding: 1rem !important;
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
|
|
/* Forms */
|
|
.handy-ansicht form {
|
|
width: 100%;
|
|
}
|
|
|
|
.handy-ansicht form > * {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Navigation / PillNav */
|
|
.handy-ansicht nav,
|
|
.handy-ansicht [role="navigation"],
|
|
.handy-ansicht [class*="pill-nav"],
|
|
.handy-ansicht [class*="PillNav"] {
|
|
padding: 0.5rem 0.25rem !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Modals / Dialogs */
|
|
.handy-ansicht [role="dialog"],
|
|
.handy-ansicht [class*="dialog"],
|
|
.handy-ansicht [class*="Dialog"],
|
|
.handy-ansicht [class*="modal"],
|
|
.handy-ansicht [class*="Modal"] {
|
|
width: 95vw !important;
|
|
max-width: 95vw !important;
|
|
margin: 1rem auto !important;
|
|
padding: 1rem !important;
|
|
}
|
|
|
|
/* Dropdowns / Select-Menüs */
|
|
.handy-ansicht [role="menu"],
|
|
.handy-ansicht [role="listbox"] {
|
|
max-height: 50vh !important;
|
|
overflow-y: auto !important;
|
|
-webkit-overflow-scrolling: touch !important;
|
|
}
|
|
|
|
.handy-ansicht [role="menuitem"],
|
|
.handy-ansicht [role="option"] {
|
|
min-height: 44px !important;
|
|
padding: 0.75rem 1rem !important;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* Drawer / Sheet */
|
|
.handy-ansicht [class*="drawer"],
|
|
.handy-ansicht [class*="Drawer"],
|
|
.handy-ansicht [class*="sheet"],
|
|
.handy-ansicht [class*="Sheet"] {
|
|
max-width: 100vw !important;
|
|
}
|
|
|
|
/* Tooltips / Popover */
|
|
.handy-ansicht [data-radix-popper-content-wrapper],
|
|
.handy-ansicht [role="tooltip"] {
|
|
max-width: 90vw !important;
|
|
font-size: 0.875rem !important;
|
|
}
|
|
|
|
/* Badges - Proportional kleiner */
|
|
.handy-ansicht [class*="badge"],
|
|
.handy-ansicht [class*="Badge"] {
|
|
padding: clamp(0.25rem, 1.5vw, 0.375rem) clamp(0.5rem, 2.5vw, 0.75rem) !important;
|
|
font-size: clamp(0.6875rem, 2vw, 0.75rem) !important;
|
|
min-height: clamp(28px, 8vw, 32px) !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
white-space: nowrap !important;
|
|
border-radius: clamp(0.375rem, 2vw, 0.5rem) !important;
|
|
}
|
|
|
|
/* Icons - Mindestgrößen */
|
|
.handy-ansicht svg {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.handy-ansicht button svg,
|
|
.handy-ansicht a svg {
|
|
width: 1.25rem !important;
|
|
height: 1.25rem !important;
|
|
}
|
|
|
|
/* Accordion / Collapsible */
|
|
.handy-ansicht [class*="accordion"],
|
|
.handy-ansicht [class*="Accordion"],
|
|
.handy-ansicht [class*="collapsible"],
|
|
.handy-ansicht [class*="Collapsible"] button {
|
|
min-height: 48px !important;
|
|
padding: 1rem !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Tabs */
|
|
.handy-ansicht [role="tablist"] {
|
|
display: flex !important;
|
|
overflow-x: auto !important;
|
|
-webkit-overflow-scrolling: touch !important;
|
|
scrollbar-width: none !important;
|
|
-ms-overflow-style: none !important;
|
|
}
|
|
|
|
.handy-ansicht [role="tablist"]::-webkit-scrollbar {
|
|
display: none !important;
|
|
}
|
|
|
|
.handy-ansicht [role="tab"] {
|
|
min-height: 48px !important;
|
|
min-width: 80px !important;
|
|
padding: 0.75rem 1rem !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
/* === SPEZIELLE KOMPONENTEN === */
|
|
|
|
/* Hero-Section */
|
|
.handy-ansicht [id="hero"],
|
|
.handy-ansicht [class*="hero"] {
|
|
padding: 5rem 1rem 3rem !important;
|
|
min-height: auto !important;
|
|
}
|
|
|
|
/* Footer */
|
|
.handy-ansicht footer {
|
|
padding: 2rem 1rem !important;
|
|
}
|
|
|
|
.handy-ansicht footer [class*="grid"] {
|
|
grid-template-columns: 1fr !important;
|
|
gap: 2rem !important;
|
|
}
|
|
|
|
/* Fixed Position Elemente */
|
|
.handy-ansicht [class*="fixed"] {
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
width: 100% !important;
|
|
max-width: 100vw !important;
|
|
}
|
|
|
|
/* Video / iframe responsive */
|
|
.handy-ansicht iframe,
|
|
.handy-ansicht embed,
|
|
.handy-ansicht object {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
/* Toast / Notifications */
|
|
.handy-ansicht [class*="toast"],
|
|
.handy-ansicht [class*="Toast"],
|
|
.handy-ansicht [class*="notification"] {
|
|
min-width: auto !important;
|
|
width: calc(100vw - 2rem) !important;
|
|
max-width: 400px !important;
|
|
margin: 0.5rem !important;
|
|
padding: 1rem !important;
|
|
}
|
|
|
|
/* Calendar / Date Picker */
|
|
.handy-ansicht [class*="calendar"],
|
|
.handy-ansicht [class*="Calendar"],
|
|
.handy-ansicht [class*="date-picker"] {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.handy-ansicht [class*="calendar"] button,
|
|
.handy-ansicht [class*="Calendar"] button {
|
|
min-height: 44px !important;
|
|
min-width: 44px !important;
|
|
}
|
|
|
|
/* Tables zu Cards auf Mobile */
|
|
.handy-ansicht table {
|
|
display: block;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
width: 100%;
|
|
}
|
|
|
|
.handy-ansicht thead {
|
|
display: none;
|
|
}
|
|
|
|
.handy-ansicht tbody {
|
|
display: block;
|
|
}
|
|
|
|
.handy-ansicht tr {
|
|
display: block;
|
|
margin-bottom: 1rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.handy-ansicht td {
|
|
display: block;
|
|
text-align: right;
|
|
padding: 0.5rem;
|
|
border: none;
|
|
}
|
|
|
|
.handy-ansicht td::before {
|
|
content: attr(data-label) ": ";
|
|
float: left;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Slider / Range Input */
|
|
.handy-ansicht input[type="range"] {
|
|
height: 8px !important;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.handy-ansicht input[type="range"]::-webkit-slider-thumb {
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.handy-ansicht input[type="range"]::-moz-range-thumb {
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
cursor: pointer;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* Scroll-Container */
|
|
.handy-ansicht [class*="scroll"],
|
|
.handy-ansicht [class*="Scroll"] {
|
|
-webkit-overflow-scrolling: touch !important;
|
|
overscroll-behavior: contain !important;
|
|
}
|
|
|
|
/* Progress Bars */
|
|
.handy-ansicht [role="progressbar"],
|
|
.handy-ansicht [class*="progress"],
|
|
.handy-ansicht [class*="Progress"] {
|
|
height: 8px !important;
|
|
min-height: 8px !important;
|
|
}
|
|
|
|
/* List Items */
|
|
.handy-ansicht li {
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
/* Code Blocks */
|
|
.handy-ansicht pre,
|
|
.handy-ansicht code {
|
|
font-size: 0.875rem !important;
|
|
overflow-x: auto !important;
|
|
-webkit-overflow-scrolling: touch !important;
|
|
}
|
|
|
|
/* Skeleton / Loading */
|
|
.handy-ansicht [class*="skeleton"],
|
|
.handy-ansicht [class*="Skeleton"] {
|
|
min-height: 20px !important;
|
|
}
|
|
|
|
/* Spacing zwischen Elementen */
|
|
.handy-ansicht > * + * {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.handy-ansicht section + section {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
/* ============================================
|
|
SPEZIFISCHE MOBILE-OPTIMIERUNGEN FÜR HAUPTSEITE
|
|
============================================ */
|
|
|
|
/* Hero-Section - Überschrift verkleinern */
|
|
.handy-ansicht [id="hero"] h1,
|
|
.handy-ansicht [class*="hero"] h1 {
|
|
font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
|
|
line-height: 1.2 !important;
|
|
margin-bottom: 1.5rem !important;
|
|
padding: 0 0.5rem !important;
|
|
}
|
|
|
|
.handy-ansicht [id="hero"] h1 span,
|
|
.handy-ansicht [class*="hero"] h1 span {
|
|
display: block;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Hero-Section Container - Padding anpassen */
|
|
.handy-ansicht [id="hero"] > div[class*="relative"][class*="z-20"],
|
|
.handy-ansicht [id="hero"] > div:last-child,
|
|
.handy-ansicht [id="hero"] > *:last-child {
|
|
padding-top: 5rem !important;
|
|
padding-bottom: 2rem !important;
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
|
|
/* Hero-Section selbst - Höhe anpassen */
|
|
.handy-ansicht [id="hero"],
|
|
.handy-ansicht [id="hero"][class*="h-screen"] {
|
|
min-height: auto !important;
|
|
height: auto !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
padding-bottom: 2rem !important;
|
|
}
|
|
|
|
/* Container für die Buttons - Wrap in 2-3 Zeilen */
|
|
.handy-ansicht [id="hero"] .flex.flex-wrap,
|
|
.handy-ansicht [class*="hero"] .flex.flex-wrap,
|
|
.handy-ansicht [id="hero"] .flex:has(span[class*="rounded-full"]) {
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
gap: 0.4rem 0.3rem !important;
|
|
margin-bottom: 2rem !important;
|
|
margin-top: 1.5rem !important;
|
|
max-width: 100% !important;
|
|
flex-wrap: wrap !important;
|
|
padding: 0 0.5rem !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Buttons (Strategieberatung, UX/UI Design, etc.) - Text passt exakt */
|
|
.handy-ansicht [id="hero"] .flex.flex-wrap > span,
|
|
.handy-ansicht [id="hero"] span[class*="rounded-full"],
|
|
.handy-ansicht [class*="hero"] span[class*="rounded-full"],
|
|
.handy-ansicht [id="hero"] .flex > span[class*="rounded-full"] {
|
|
font-size: clamp(0.7rem, 2.5vw, 0.8rem) !important;
|
|
padding: 0.4rem 0.6rem !important;
|
|
margin: 0 !important;
|
|
white-space: nowrap !important;
|
|
text-align: center !important;
|
|
line-height: 1.2 !important;
|
|
min-height: auto !important;
|
|
height: auto !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
flex: 0 1 auto !important; /* Größe basierend auf Inhalt */
|
|
width: auto !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
border-radius: 9999px !important;
|
|
overflow: visible !important; /* Text soll sichtbar sein */
|
|
text-overflow: clip !important;
|
|
}
|
|
|
|
/* Falls Buttons zu breit sind, erst dann umbrechen oder kleiner werden */
|
|
@media (max-width: 360px) {
|
|
.handy-ansicht [id="hero"] span[class*="rounded-full"] {
|
|
font-size: 0.65rem !important;
|
|
padding: 0.3rem 0.5rem !important;
|
|
}
|
|
}
|
|
|
|
/* CTA-Button Container - Zentriert, vollbreit */
|
|
.handy-ansicht [id="hero"] .flex.flex-col,
|
|
.handy-ansicht [id="hero"] .flex[class*="flex-col"] {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
padding: 0 1rem !important;
|
|
margin: 0 auto !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
/* CTA-Button - Vollbreit, mittig, mit Rundungen */
|
|
.handy-ansicht [id="hero"] button:has(svg),
|
|
.handy-ansicht [id="hero"] button[class*="rounded-full"]:has(svg),
|
|
.handy-ansicht [id="hero"] .flex[class*="flex-col"] > button,
|
|
.handy-ansicht [class*="hero"] button[class*="rounded-full"]:has(svg) {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin: 0 auto !important;
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
padding: clamp(0.875rem, 3vw, 1rem) clamp(1.25rem, 4vw, 1.5rem) !important;
|
|
border-radius: 9999px !important;
|
|
font-size: clamp(0.875rem, 3vw, 0.9375rem) !important;
|
|
font-weight: 600 !important;
|
|
min-height: clamp(48px, 12vw, 56px) !important;
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
}
|
|
|
|
/* Icons im CTA-Button */
|
|
.handy-ansicht [id="hero"] button svg,
|
|
.handy-ansicht [class*="hero"] button svg {
|
|
width: 1.25rem !important;
|
|
height: 1.25rem !important;
|
|
flex-shrink: 0 !important;
|
|
margin-right: 0.75rem !important;
|
|
}
|
|
|
|
/* LogoLoop / Partner Logos - Unter CTA, zentriert untereinander */
|
|
.handy-ansicht [id="hero"] .logo-loop-container,
|
|
.handy-ansicht [id="hero"] [class*="logo-loop-container"],
|
|
.handy-ansicht .logo-loop-container {
|
|
margin-top: 2.5rem !important;
|
|
margin-bottom: 1rem !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
padding: 0 1rem !important;
|
|
}
|
|
|
|
.handy-ansicht .logo-loop-inner,
|
|
.handy-ansicht [class*="logo-loop-inner"] {
|
|
height: 110px !important;
|
|
max-height: 110px !important;
|
|
width: 100% !important;
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
padding-bottom: 1rem !important;
|
|
}
|
|
|
|
/* LogoLoop SVG/Logos kleiner auf Mobile */
|
|
.handy-ansicht .logo-loop-container svg,
|
|
.handy-ansicht [class*="logo-loop"] svg {
|
|
max-width: 80px !important;
|
|
max-height: 80px !important;
|
|
}
|
|
|
|
/* Navigation - Mobile zusammenklappbar, schmaler */
|
|
.handy-ansicht [class*="fixed"][class*="z-40"][class*="top"] {
|
|
top: 0.5rem !important; /* ⭐ Abstand von oben - ÄNDERE HIER */
|
|
left: 1rem !important; /* ⭐ Abstand links - ÄNDERE HIER für Breite */
|
|
right: 1rem !important; /* ⭐ Abstand rechts - ÄNDERE HIER für Breite */
|
|
padding-left: 0.25rem !important;
|
|
padding-right: 0.25rem !important;
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
max-width: calc(100% - 2rem) !important;
|
|
}
|
|
|
|
/* GlassSurface Größe - HIER DIE GRÖSSE ÄNDERN */
|
|
.handy-ansicht .glass-surface,
|
|
.handy-ansicht [class*="glass-surface"],
|
|
.handy-ansicht [class*="GlassSurface"] {
|
|
min-height: 10px !important; /* Kompakter - ÄNDERE DIESEN WERT FÜR DIE HÖHE */
|
|
padding: 0.375rem 1rem !important; /* Weniger Padding oben/unten = kompakter */
|
|
height: auto !important;
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* PillNav - Kompakt auf Mobile, Logo sichtbar, Menu versteckt */
|
|
.handy-ansicht [class*="pill-nav-container"] {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.handy-ansicht .pill-nav-items,
|
|
.handy-ansicht [class*="pill-nav-items"] {
|
|
display: none !important;
|
|
}
|
|
|
|
.handy-ansicht .pill-logo {
|
|
display: flex !important;
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
min-width: 40px !important;
|
|
min-height: 40px !important;
|
|
}
|
|
|
|
.handy-ansicht .pill-logo img {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
/* Kontakt-Button in Nav verstecken auf Mobile */
|
|
.handy-ansicht [class*="hidden"][class*="md:block"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Navigation Container schmaler */
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] > div {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Glass Navbar gezielt ausblenden (nur die fixe Top-Bar) und GooeyNav einblenden */
|
|
.handy-ansicht .fixed.left-0.right-0.z-40,
|
|
.handy-ansicht .fixed.left-0.right-0.z-40 .glass-surface,
|
|
.handy-ansicht .fixed.left-0.right-0.z-40 [class*="glass-surface"],
|
|
.handy-ansicht .fixed.left-0.right-0.z-40 [class*="GlassSurface"] {
|
|
display: none !important;
|
|
}
|
|
|
|
.handy-ansicht__nav-wrapper {
|
|
position: fixed; /* Fixed statt Sticky für sicheren Halt */
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
z-index: 100;
|
|
padding: 1rem 0.75rem 0.5rem;
|
|
background: transparent !important;
|
|
pointer-events: none; /* Klicks gehen durch leere Bereiche durch */
|
|
}
|
|
|
|
.gooey-nav-container {
|
|
pointer-events: auto; /* Buttons wieder klickbar machen */
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Platzhalter für Content, damit er nicht hinter der Fixed Nav verschwindet */
|
|
.handy-ansicht__content {
|
|
padding-top: 0; /* Nav ist transparent, Content darf dahinter scrollen */
|
|
}
|
|
|
|
/* GooeyNav Styles (nur Mobile) - Original Snippet angepasst für Mobile */
|
|
:root {
|
|
--linear-ease: linear(
|
|
0, 0.068, 0.19 2.7%, 0.804 8.1%, 1.037, 1.199 13.2%, 1.245, 1.27 15.8%,
|
|
1.274, 1.272 17.4%, 1.249 19.1%, 0.996 28%, 0.949, 0.928 33.3%, 0.926,
|
|
0.933 36.8%, 1.001 45.6%, 1.013, 1.019 50.8%, 1.018 54.4%, 1 63.1%,
|
|
0.995 68%, 1.001 85%, 1
|
|
);
|
|
}
|
|
|
|
.gooey-nav-container {
|
|
position: relative;
|
|
width: 100%;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.gooey-nav-container nav {
|
|
display: flex;
|
|
position: relative;
|
|
transform: translate3d(0, 0, 0.01px);
|
|
width: 100%;
|
|
justify-content: center;
|
|
padding: 0 0.5rem; /* Kleiner Abstand zum Rand */
|
|
}
|
|
|
|
.gooey-nav-container nav ul {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 0.35rem;
|
|
list-style: none;
|
|
padding: 0.5rem 0.5rem;
|
|
margin: 0;
|
|
position: relative;
|
|
z-index: 50; /* Z-Index hoch setzen damit es über dem Overlay ist */
|
|
color: white;
|
|
text-shadow: 0 1px 1px hsl(205deg 30% 10% / 0.2);
|
|
justify-content: space-between;
|
|
width: 94%;
|
|
max-width: 400px;
|
|
|
|
/* Glass Bar Container Styles (wie PC Ansicht) */
|
|
background: rgba(255, 255, 255, 0.15) !important;
|
|
backdrop-filter: blur(12px) !important;
|
|
-webkit-backdrop-filter: blur(12px) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.25) !important;
|
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1) !important;
|
|
border-radius: 9999px !important;
|
|
|
|
overflow-x: visible; /* Wichtig für Shadow/Glow */
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.gooey-nav-container nav ul::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.gooey-nav-container nav ul li {
|
|
border-radius: 9999px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
|
|
box-shadow: 0 0 0.5px 1.5px transparent;
|
|
color: white;
|
|
flex: 1 1 0px; /* Erzwingt exakt gleiche Breite für alle */
|
|
width: 0; /* Wichtig für flex: 1 Verteilung */
|
|
min-width: 0; /* Überschreibt fit-content, damit Text die Breite nicht diktiert */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0; /* Padding im Link */
|
|
margin: 0;
|
|
}
|
|
|
|
.gooey-nav-container nav ul li a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem 0.25rem; /* Weniger seitliches Padding */
|
|
font-size: clamp(0.75rem, 2.5vw, 0.9rem); /* Standardgröße etwas kleiner als vorher */
|
|
font-weight: 600; /* Dickerer Text für bessere Lesbarkeit */
|
|
white-space: nowrap;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden; /* Text abschneiden falls zu lang */
|
|
text-overflow: ellipsis;
|
|
transition: font-size 0.3s ease;
|
|
}
|
|
|
|
/* Logo Image Styles */
|
|
.nav-logo-img {
|
|
height: 24px; /* Fixe Höhe für Logo */
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* Logo Item Specifics */
|
|
.gooey-nav-container nav ul li.nav-item-menu {
|
|
flex: 0 0 40px;
|
|
min-width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.2); /* Hellerer Hintergrund für Ball-Look */
|
|
border-radius: 50%; /* Sicherstellen dass es ein Kreis ist */
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.gooey-nav-container nav ul li.nav-item-menu a {
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
}
|
|
|
|
/* Overlay Menu */
|
|
.mobile-menu-items {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0; /* Full screen overlay */
|
|
background: rgba(0, 0, 0, 0.6); /* Dim background */
|
|
backdrop-filter: blur(4px);
|
|
padding: 7rem 1rem 2rem; /* ⭐ MEHR PLATZ OBEN: Von 5rem auf 7rem erhöht */
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 1rem;
|
|
z-index: -1; /* Hinter der Nav-Bar */
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.mobile-menu-items.open {
|
|
display: flex;
|
|
animation: fadeIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
.mobile-menu-items ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
max-width: 300px; /* Nicht zu breit */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.mobile-menu-items li {
|
|
/* Base style */
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 9999px;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
color: white;
|
|
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
cursor: pointer;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
transform: translateX(100vw);
|
|
opacity: 0;
|
|
animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
}
|
|
|
|
/* Feld-zu-Feld Farbverlauf (Branding Farben) */
|
|
.mobile-menu-items li:nth-child(1) {
|
|
background: #819067;
|
|
animation-delay: 0.1s;
|
|
}
|
|
.mobile-menu-items li:nth-child(2) {
|
|
background: #819067;
|
|
animation-delay: 0.15s;
|
|
}
|
|
.mobile-menu-items li:nth-child(3) {
|
|
background: #819067;
|
|
animation-delay: 0.2s;
|
|
}
|
|
.mobile-menu-items li:nth-child(4) {
|
|
background: #819067;
|
|
animation-delay: 0.25s;
|
|
}
|
|
|
|
.mobile-menu-items li:active {
|
|
transform: scale(0.96) translateX(0);
|
|
filter: brightness(1.1); /* Beim Klicken etwas aufhellen */
|
|
}
|
|
|
|
/* Grüne Felder mit Verlauf - Cleanup duplicate block */
|
|
/* (Dieser Block wurde entfernt, da er oben integriert ist) */
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(100vw); /* Start außerhalb */
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* Verstecke Gooey Effekte für den neuen Modus */
|
|
.gooey-nav-container .effect {
|
|
display: none !important;
|
|
}
|
|
|
|
.gooey-nav-container nav ul li:focus-within:has(:focus-visible) {
|
|
box-shadow: 0 0 0.5px 1.5px white;
|
|
}
|
|
|
|
.gooey-nav-container nav ul li::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 10px;
|
|
background: white;
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
transition: all 0.3s ease;
|
|
z-index: -1;
|
|
}
|
|
|
|
.gooey-nav-container nav ul li.active {
|
|
color: black;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.gooey-nav-container nav ul li.active::after {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.gooey-nav-container .effect {
|
|
display: none !important; /* Gooey-Effekt deaktiviert, da "shitty"/uneven */
|
|
}
|
|
|
|
/* Aktiver State - einfacher weißer Hintergrund-Pill */
|
|
.gooey-nav-container nav ul li.active {
|
|
color: #0f172a; /* Dunkler Text für Kontrast */
|
|
text-shadow: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.gooey-nav-container nav ul li::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 9999px;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
z-index: -1;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.gooey-nav-container nav ul li.active::after {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* Inaktive Items */
|
|
.gooey-nav-container nav ul li:not(.active) {
|
|
background: rgba(0, 0, 0, 0.2); /* Leichter Hintergrund für Lesbarkeit */
|
|
backdrop-filter: blur(4px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@keyframes pill {
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.particle,
|
|
.point {
|
|
display: block;
|
|
opacity: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 100%;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.particle {
|
|
--time: 5s;
|
|
position: absolute;
|
|
top: calc(50% - 8px);
|
|
left: calc(50% - 8px);
|
|
animation: particle calc(var(--time)) ease 1 -350ms;
|
|
}
|
|
|
|
.point {
|
|
background: var(--color);
|
|
opacity: 1;
|
|
animation: point calc(var(--time)) ease 1 -350ms;
|
|
}
|
|
|
|
@keyframes particle {
|
|
0% {
|
|
transform: rotate(0deg) translate(calc(var(--start-x)), calc(var(--start-y)));
|
|
opacity: 1;
|
|
animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
|
|
}
|
|
|
|
70% {
|
|
transform: rotate(calc(var(--rotate) * 0.5)) translate(calc(var(--end-x) * 1.2), calc(var(--end-y) * 1.2));
|
|
opacity: 1;
|
|
animation-timing-function: ease;
|
|
}
|
|
|
|
85% {
|
|
transform: rotate(calc(var(--rotate) * 0.66)) translate(calc(var(--end-x)), calc(var(--end-y)));
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * 0.5), calc(var(--end-y) * 0.5));
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes point {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
|
|
}
|
|
|
|
25% {
|
|
transform: scale(calc(var(--scale) * 0.25));
|
|
}
|
|
|
|
38% {
|
|
opacity: 1;
|
|
}
|
|
|
|
65% {
|
|
transform: scale(var(--scale));
|
|
opacity: 1;
|
|
animation-timing-function: ease;
|
|
}
|
|
|
|
85% {
|
|
transform: scale(var(--scale));
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
GLASSURFACE & NAVIGATION - KOMPLETT STEUERBAR
|
|
Höhere Spezifität überschreibt alles!
|
|
Alle Werte mit ⭐ können angepasst werden
|
|
============================================ */
|
|
|
|
/* GLASSURFACE HÖHE & PADDING (überschreibt inline styles!) */
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] .glass-surface[style],
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] [class*="glass-surface"][style],
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] .glass-surface.glass-surface--svg {
|
|
min-height: 50px !important; /* ⭐ GLASSURFACE HÖHE - ÄNDERE HIER (40px, 50px, 60px, 70px) */
|
|
padding-top: 0.375rem !important; /* ⭐ Padding oben - ÄNDERE HIER */
|
|
padding-bottom: 0.375rem !important; /* ⭐ Padding unten - ÄNDERE HIER */
|
|
padding-left: 1rem !important; /* ⭐ Padding links - ÄNDERE HIER */
|
|
padding-right: 1rem !important; /* ⭐ Padding rechts - ÄNDERE HIER */
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* PILL NAV CONTAINER - Abstand zwischen Elementen */
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] [class*="pill-nav-container"],
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] .pill-nav-container {
|
|
gap: 0.5rem !important; /* ⭐ Abstand Logo ↔ Menu Button - ÄNDERE HIER */
|
|
}
|
|
|
|
/* LOGO - BREITE & HÖHE */
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] .pill-logo,
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] [class*="pill-logo"] {
|
|
width: 40px !important; /* ⭐ LOGO BREITE - ÄNDERE HIER (30px, 35px, 40px, 45px) */
|
|
height: 40px !important; /* ⭐ LOGO HÖHE - ÄNDERE HIER (30px, 35px, 40px, 45px) */
|
|
min-width: 40px !important;
|
|
min-height: 40px !important;
|
|
max-width: 40px !important;
|
|
max-height: 40px !important;
|
|
padding: 6px !important; /* ⭐ Logo Padding - ÄNDERE HIER */
|
|
}
|
|
|
|
/* LOGO BILD */
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] .pill-logo img {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
object-fit: contain !important;
|
|
}
|
|
|
|
/* MENU BUTTON (Hamburger) - BREITE & HÖHE */
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] .mobile-menu-button,
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] [class*="mobile-menu-button"],
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] .pill-nav > button:last-child,
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] button[aria-label*="menu" i] {
|
|
width: 40px !important; /* ⭐ MENU BUTTON BREITE - ÄNDERE HIER (35px, 40px, 45px) */
|
|
height: 40px !important; /* ⭐ MENU BUTTON HÖHE - ÄNDERE HIER (35px, 40px, 45px) */
|
|
min-width: 40px !important;
|
|
min-height: 40px !important;
|
|
max-width: 40px !important;
|
|
max-height: 40px !important;
|
|
padding: 8px !important; /* ⭐ Button Padding - ÄNDERE HIER */
|
|
}
|
|
|
|
/* HAMBURGER ICON (SVG) */
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] .mobile-menu-button svg,
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] [class*="mobile-menu-button"] svg {
|
|
width: 20px !important; /* ⭐ ICON BREITE - ÄNDERE HIER */
|
|
height: 20px !important; /* ⭐ ICON HÖHE - ÄNDERE HIER */
|
|
}
|
|
|
|
/* Footer - Unten mit Icon, kompakt */
|
|
.handy-ansicht footer {
|
|
position: relative !important;
|
|
padding: 2rem 1rem 3rem !important;
|
|
margin-top: auto !important;
|
|
margin-bottom: 0 !important;
|
|
border-top-width: 1px !important;
|
|
}
|
|
|
|
.handy-ansicht footer [class*="grid"] {
|
|
grid-template-columns: 1fr !important;
|
|
gap: 1.5rem !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
.handy-ansicht footer h4 {
|
|
font-size: 1rem !important;
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
|
|
.handy-ansicht footer ul {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
align-items: center !important;
|
|
gap: 0.5rem !important;
|
|
}
|
|
|
|
.handy-ansicht footer li {
|
|
width: 100% !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* Hero-Section Video/Background - Mobile optimiert */
|
|
.handy-ansicht [id="hero"] video,
|
|
.handy-ansicht [id="hero"] [class*="absolute"][class*="inset-0"] {
|
|
object-fit: cover !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
/* Sections allgemein - Abstände optimieren */
|
|
.handy-ansicht section {
|
|
margin-bottom: 1.5rem !important;
|
|
padding-top: 3rem !important;
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
|
|
/* Rounded corners für Sections reduzieren */
|
|
.handy-ansicht section[class*="rounded"] {
|
|
border-radius: 1.5rem !important;
|
|
margin-left: 0.5rem !important;
|
|
margin-right: 0.5rem !important;
|
|
}
|
|
|
|
/* About Section - Text nicht mehrspaltig */
|
|
.handy-ansicht section[class*="columnCount"],
|
|
.handy-ansicht [style*="column-count"] {
|
|
column-count: 1 !important;
|
|
column-gap: 0 !important;
|
|
}
|
|
|
|
/* Cookie Button Position */
|
|
.handy-ansicht button[class*="fixed"][class*="bottom"] {
|
|
bottom: 1rem !important;
|
|
left: 1rem !important;
|
|
width: 3rem !important;
|
|
height: 3rem !important;
|
|
min-width: 3rem !important;
|
|
min-height: 3rem !important;
|
|
}
|
|
|
|
/* Verhindere Overlaps */
|
|
.handy-ansicht * {
|
|
max-width: 100vw !important;
|
|
}
|
|
|
|
/* Zentrierung für wichtige Elemente */
|
|
.handy-ansicht [class*="text-center"],
|
|
.handy-ansicht [style*="text-align: center"] {
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* Flex-Center auf Mobile */
|
|
.handy-ansicht [class*="flex"][class*="items-center"],
|
|
.handy-ansicht [class*="flex"][class*="justify-center"] {
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
/* Mobile-Menü Popover optimieren */
|
|
.handy-ansicht .mobile-menu-popover {
|
|
left: 0.5rem !important;
|
|
right: 0.5rem !important;
|
|
max-width: calc(100vw - 1rem) !important;
|
|
}
|
|
|
|
/* Mobile-Menü Links */
|
|
.handy-ansicht .mobile-menu-link {
|
|
min-height: 48px !important;
|
|
padding: 1rem !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* Services/About/Process Sections - Kompakt */
|
|
.handy-ansicht section[id*="about"],
|
|
.handy-ansicht section[id*="services"],
|
|
.handy-ansicht section[id*="process"],
|
|
.handy-ansicht section[id*="references"] {
|
|
padding-top: 3rem !important;
|
|
padding-bottom: 3rem !important;
|
|
}
|
|
|
|
/* SpinningNumbers kleiner auf Mobile */
|
|
.handy-ansicht [class*="spinning-number"],
|
|
.handy-ansicht .spinning-number {
|
|
min-height: 250px !important;
|
|
font-size: 0.7em !important;
|
|
}
|
|
|
|
/* Timeline kompakt */
|
|
.handy-ansicht [class*="timeline"] {
|
|
padding: 1rem !important;
|
|
}
|
|
|
|
/* HoverEffect Cards - Mobile Stack */
|
|
.handy-ansicht [class*="hover-effect"],
|
|
.handy-ansicht [class*="HoverEffect"] {
|
|
grid-template-columns: 1fr !important;
|
|
gap: 1rem !important;
|
|
}
|
|
|
|
/* BackgroundBeams reduzieren */
|
|
.handy-ansicht [class*="background-beams"],
|
|
.handy-ansicht [class*="BackgroundBeams"] {
|
|
opacity: 0.5 !important;
|
|
}
|
|
|
|
/* HeroScrollDemo kompakt */
|
|
.handy-ansicht [class*="container-scroll"] {
|
|
height: auto !important;
|
|
min-height: auto !important;
|
|
padding: 1rem !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
OPTIMIERUNG FÜR SEHR KLEINE GERÄTE (max-width: 480px)
|
|
iPhone SE, kleine Android-Geräte
|
|
============================================ */
|
|
|
|
@media (max-width: 480px) {
|
|
/* === EXTRA KOMPAKTE TYPOGRAFIE === */
|
|
|
|
.handy-ansicht h1 {
|
|
font-size: clamp(1.375rem, 6vw, 1.625rem) !important;
|
|
line-height: 1.15 !important;
|
|
margin-bottom: 0.875rem !important;
|
|
padding: 0 0.5rem !important;
|
|
}
|
|
|
|
.handy-ansicht h2 {
|
|
font-size: clamp(1.125rem, 5vw, 1.375rem) !important;
|
|
line-height: 1.2 !important;
|
|
margin-bottom: 0.75rem !important;
|
|
}
|
|
|
|
.handy-ansicht h3 {
|
|
font-size: clamp(1rem, 4vw, 1.125rem) !important;
|
|
line-height: 1.3 !important;
|
|
}
|
|
|
|
.handy-ansicht p {
|
|
font-size: clamp(0.875rem, 3vw, 0.9375rem) !important;
|
|
line-height: 1.5 !important;
|
|
}
|
|
|
|
/* === KOMPAKTE BUTTONS & BADGES === */
|
|
|
|
.handy-ansicht button,
|
|
.handy-ansicht [role="button"]:not(input) {
|
|
min-height: 42px !important;
|
|
min-width: 42px !important;
|
|
padding: 0.625rem 0.875rem !important;
|
|
font-size: clamp(0.8125rem, 3vw, 0.9375rem) !important;
|
|
}
|
|
|
|
.handy-ansicht [class*="badge"],
|
|
.handy-ansicht [class*="Badge"] {
|
|
padding: 0.25rem 0.5rem !important;
|
|
font-size: clamp(0.625rem, 2.5vw, 0.6875rem) !important;
|
|
min-height: 26px !important;
|
|
}
|
|
|
|
/* === HERO SECTION - EXTRA KOMPAKT === */
|
|
|
|
.handy-ansicht [id="hero"],
|
|
.handy-ansicht [class*="hero"] {
|
|
padding: 4rem 0.75rem 2.5rem !important;
|
|
}
|
|
|
|
.handy-ansicht [id="hero"] h1 {
|
|
font-size: clamp(1.25rem, 7vw, 1.5rem) !important;
|
|
margin-bottom: 1rem !important;
|
|
padding: 0 0.25rem !important;
|
|
}
|
|
|
|
/* Hero Buttons (Strategieberatung, etc.) - Extra kompakt */
|
|
.handy-ansicht [id="hero"] span[class*="rounded-full"] {
|
|
font-size: clamp(0.625rem, 3vw, 0.75rem) !important;
|
|
padding: 0.375rem 0.625rem !important;
|
|
min-height: 32px !important;
|
|
flex: 0 1 100% !important; /* 1 Button pro Zeile auf sehr kleinen Screens */
|
|
max-width: 100% !important;
|
|
min-width: 100% !important;
|
|
}
|
|
|
|
/* CTA Button - Extra kompakt */
|
|
.handy-ansicht [id="hero"] button[class*="rounded-full"]:has(svg),
|
|
.handy-ansicht [id="hero"] button:has(svg) {
|
|
padding: 0.875rem 1.25rem !important;
|
|
font-size: clamp(0.875rem, 3.5vw, 0.9375rem) !important;
|
|
min-height: 48px !important;
|
|
}
|
|
|
|
/* === NAVIGATION - EXTRA SCHMAL === */
|
|
|
|
.handy-ansicht [class*="fixed"][class*="z-40"][class*="top"] {
|
|
left: 0.5rem !important;
|
|
right: 0.5rem !important;
|
|
top: 0.375rem !important;
|
|
max-width: calc(100% - 1rem) !important;
|
|
}
|
|
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] .glass-surface[style],
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] [class*="glass-surface"][style] {
|
|
min-height: 44px !important;
|
|
padding-top: 0.25rem !important;
|
|
padding-bottom: 0.25rem !important;
|
|
padding-left: 0.75rem !important;
|
|
padding-right: 0.75rem !important;
|
|
}
|
|
|
|
/* Logo & Menu Button - Kleiner */
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] .pill-logo {
|
|
width: 36px !important;
|
|
height: 36px !important;
|
|
min-width: 36px !important;
|
|
min-height: 36px !important;
|
|
max-width: 36px !important;
|
|
max-height: 36px !important;
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] .mobile-menu-button,
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] button[aria-label*="menu" i] {
|
|
width: 36px !important;
|
|
height: 36px !important;
|
|
min-width: 36px !important;
|
|
min-height: 36px !important;
|
|
padding: 6px !important;
|
|
}
|
|
|
|
.handy-ansicht [class*="fixed"][class*="z-40"] .mobile-menu-button svg {
|
|
width: 18px !important;
|
|
height: 18px !important;
|
|
}
|
|
|
|
/* === SECTIONS - REDUZIERTE ABSTÄNDE === */
|
|
|
|
.handy-ansicht section {
|
|
padding-top: 2.5rem !important;
|
|
padding-bottom: 2.5rem !important;
|
|
padding-left: 0.75rem !important;
|
|
padding-right: 0.75rem !important;
|
|
}
|
|
|
|
/* === ICONS - KOMPAKT & ZENTRIERT === */
|
|
|
|
.handy-ansicht svg {
|
|
min-width: 14px !important;
|
|
min-height: 14px !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.handy-ansicht button svg,
|
|
.handy-ansicht a svg {
|
|
width: clamp(1rem, 4vw, 1.125rem) !important;
|
|
height: clamp(1rem, 4vw, 1.125rem) !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
/* === CONTAINER & SPACING === */
|
|
|
|
.handy-ansicht [class*="max-w"] {
|
|
padding-left: 0.75rem !important;
|
|
padding-right: 0.75rem !important;
|
|
}
|
|
|
|
.handy-ansicht [class*="gap"] {
|
|
gap: 0.5rem !important;
|
|
}
|
|
|
|
.handy-ansicht [class*="space-y"] > * + * {
|
|
margin-top: 0.75rem !important;
|
|
}
|
|
|
|
/* === CARDS & CONTAINERS === */
|
|
|
|
.handy-ansicht [class*="card"],
|
|
.handy-ansicht [class*="Card"] {
|
|
padding: 0.875rem !important;
|
|
margin-bottom: 0.875rem !important;
|
|
border-radius: clamp(0.75rem, 3vw, 1rem) !important;
|
|
}
|
|
|
|
/* === FORMS === */
|
|
|
|
.handy-ansicht input[type="text"],
|
|
.handy-ansicht input[type="email"],
|
|
.handy-ansicht textarea,
|
|
.handy-ansicht select {
|
|
min-height: 44px !important;
|
|
padding: 0.75rem !important;
|
|
font-size: 16px !important; /* Wichtig: verhindert iOS-Zoom */
|
|
}
|
|
|
|
/* === FOOTER - KOMPAKT === */
|
|
|
|
.handy-ansicht footer {
|
|
padding: 1.5rem 0.75rem 2rem !important;
|
|
}
|
|
|
|
.handy-ansicht footer h4 {
|
|
font-size: clamp(0.9375rem, 3vw, 1rem) !important;
|
|
margin-bottom: 0.75rem !important;
|
|
}
|
|
|
|
/* === MODALS & POPOVERS === */
|
|
|
|
.handy-ansicht [role="dialog"],
|
|
.handy-ansicht [class*="modal"],
|
|
.handy-ansicht [class*="Modal"] {
|
|
width: calc(100vw - 1rem) !important;
|
|
max-width: calc(100vw - 1rem) !important;
|
|
margin: 0.5rem auto !important;
|
|
padding: 0.875rem !important;
|
|
}
|
|
|
|
.handy-ansicht .mobile-menu-popover {
|
|
left: 0.25rem !important;
|
|
right: 0.25rem !important;
|
|
max-width: calc(100vw - 0.5rem) !important;
|
|
}
|
|
|
|
/* === TABLES === */
|
|
|
|
.handy-ansicht tr {
|
|
margin-bottom: 0.75rem !important;
|
|
padding: 0.625rem !important;
|
|
}
|
|
|
|
.handy-ansicht td {
|
|
padding: 0.375rem !important;
|
|
font-size: clamp(0.8125rem, 3vw, 0.875rem) !important;
|
|
}
|
|
|
|
/* === LOGO LOOP / PARTNER LOGOS === */
|
|
|
|
.handy-ansicht .logo-loop-container {
|
|
margin-top: 2rem !important;
|
|
padding: 0 0.75rem !important;
|
|
}
|
|
|
|
.handy-ansicht .logo-loop-inner {
|
|
height: 90px !important;
|
|
max-height: 90px !important;
|
|
}
|
|
|
|
.handy-ansicht .logo-loop-container svg {
|
|
max-width: 60px !important;
|
|
max-height: 60px !important;
|
|
}
|
|
|
|
/* === VERHINDERE HORIZONTALES SCROLLEN === */
|
|
|
|
.handy-ansicht * {
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* === ROUNDED ELEMENTS - PROPORTIONAL KLEINER === */
|
|
|
|
.handy-ansicht [class*="rounded-full"] {
|
|
border-radius: 9999px !important; /* Behält runde Form */
|
|
padding: clamp(0.375rem, 2vw, 0.5rem) clamp(0.625rem, 3vw, 0.75rem) !important;
|
|
}
|
|
|
|
.handy-ansicht [class*="rounded-lg"],
|
|
.handy-ansicht [class*="rounded-xl"] {
|
|
border-radius: clamp(0.5rem, 2vw, 0.75rem) !important;
|
|
}
|
|
|
|
/* === ZENTRIERUNG VERBESSERN === */
|
|
|
|
.handy-ansicht [class*="flex"][class*="items-center"] {
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.handy-ansicht [class*="text-center"] {
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* === TOUCH TARGETS - OPTIMIERT === */
|
|
|
|
.handy-ansicht a,
|
|
.handy-ansicht [role="menuitem"],
|
|
.handy-ansicht [role="option"] {
|
|
min-height: 42px !important;
|
|
padding: 0.5rem !important;
|
|
}
|
|
|
|
/* === ACCORDION & TABS === */
|
|
|
|
.handy-ansicht [class*="accordion"] button,
|
|
.handy-ansicht [role="tab"] {
|
|
min-height: 44px !important;
|
|
padding: 0.75rem !important;
|
|
font-size: clamp(0.8125rem, 3vw, 0.9375rem) !important;
|
|
}
|
|
|
|
/* === PROGRESS BARS === */
|
|
|
|
.handy-ansicht [role="progressbar"],
|
|
.handy-ansicht [class*="progress"] {
|
|
height: 6px !important;
|
|
min-height: 6px !important;
|
|
}
|
|
|
|
/* === SPINNING NUMBERS === */
|
|
|
|
.handy-ansicht [class*="spinning-number"] {
|
|
min-height: 200px !important;
|
|
font-size: 0.6em !important;
|
|
}
|
|
|
|
/* === BACKGROUND ELEMENTS === */
|
|
|
|
.handy-ansicht [class*="background-beams"] {
|
|
opacity: 0.3 !important; /* Weniger aufdringlich auf kleinen Screens */
|
|
}
|
|
}
|
|
|
|
/* Desktop - Wrapper transparent (nur für Struktur) */
|
|
@media (min-width: 768px) {
|
|
.handy-ansicht {
|
|
display: block;
|
|
}
|
|
|
|
.handy-ansicht__container {
|
|
display: block;
|
|
}
|
|
|
|
.handy-ansicht__content {
|
|
display: block;
|
|
}
|
|
}
|
|
|