/* ========================================================== 3D-WUNSCHMANUFAKTUR PREMIUM BLUE-STEEL HEADER ========================================================== */ .site-header{ position:sticky; top:18px; left:0; z-index:1000; width:min(var(--page-width),98%); height:96px; margin:0 auto; padding:0 34px; border-radius:24px; background:rgba(10,18,28,.48); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(255,255,255,.10); box-shadow: 0 18px 45px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08); } .header-body{ position:relative; width:100%; height:96px; } /* .header-surface{ position:absolute; padding-left:170px; inset:0; overflow:hidden; border-radius:28px; background: linear-gradient( 180deg, rgba(42,48,58,.18) 0%, rgba(22,28,36,.62) 18%, rgba(18,24,34,.66) 100% ); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.08); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.22); z-index:2; } /* .header-glass{ position:relative; height:100%; border-radius:28px; background:rgba(18,24,34,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08); box-shadow: 0 8px 18px rgba(0,0,0,.18), 0 34px 55px rgba(0,0,0,.28); } .header-glass::before{ content:""; position:absolute; inset:2px; border-radius:26px; pointer-events:none; border-top:1px solid rgba(255,255,255,.16); border-left:1px solid rgba(255,255,255,.05); border-right:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(0,0,0,.20); } .header-glass::after{ content:""; position:absolute; left:10px; right:10px; bottom:-8px; height:18px; border-radius:0 0 28px 28px; background: linear-gradient( rgba(0,0,0,.22), rgba(0,0,0,0) ); filter:blur(10px); pointer-events:none; } /* .header-edge{ position:absolute; left:8px; right:8px; top:8px; bottom:-8px; z-index:1; border-radius:22px; background: linear-gradient( 180deg, rgba(70,78,88,.55) 0%, rgba(42,48,58,.82) 18%, rgba(22,26,34,.96) 55%, rgba(8,10,14,1) 100% ), repeating-linear-gradient( 90deg, rgba(255,255,255,.020) 0px, rgba(255,255,255,.020) 1px, transparent 1px, transparent 4px ); */ background-blend-mode:screen; filter: contrast(108%) brightness(.96); border-left:1px solid rgba(255,255,255,.04); border-right:1px solid rgba(255,255,255,.04); border-bottom:1px solid rgba(0,0,0,.55); box-shadow: 0 8px 14px rgba(0,0,0,.18), 0 26px 36px rgba(0,0,0,.30); } /* ========================================================== INNER ========================================================== */ .header-inner{ width:100%; height:100%; padding:0 34px; display:flex; align-items:center; justify-content:space-between; } .header-shadow{ display:none; } /* ========================================================== BRAND ========================================================== */ .header-brand { position: absolute; left: 24px; /* oder dein feingetunter Wert */ /* NEUER ANSATZ: Das Element startet oben bündig und wird über das transform um 150px nach unten gedrückt. */ top: 0 !important; transform: translateX(-117px) translateY(22px) scale(1.25)!important; display: flex; align-items: center; text-decoration: none; gap: 50px !important; } .header-brand-text{ display:flex; flex-direction:column; justify-content:center; position:relative; top:8px; } /* ========================================================== LOGO ========================================================== */ img.header-logo{ width:145px; height:auto; flex-shrink:0; } /* ========================================================== MARKENNAME ========================================================== */ /* ========================================================== NEUER SEPARATER TEXT-BLOCK (BLEIBT OBEN ZENTRIERT) ========================================================== */ .header-title { position: absolute !important; /* Berechneter Startwert: Ursprüngliches left (24px) + Logobreite (145px) + dein Wunsch-Gap (z.B. 20px) */ left: 129px !important; top: 50% !important; transform: translateY(-50%) !important; /* Immer perfekt vertikal mittig im Balken */ display: flex; flex-direction: column; justify-content: center; transition: all 0.5s ease !important; /* Fließt smooth beim Einklappen mit */ } .header-name{ line-height:1; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-family: "Inter", Arial, sans-serif; font-size: 2.35rem; font-weight: 800; line-height: 1; letter-spacing: .045em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 2px 0 rgba(180,195,205,.20), 0 3px 3px rgba(0,0,0,.55), 0 8px 12px rgba(0,0,0,.35); } .header-claim{ margin-top:6px; font-size:.82rem; letter-spacing:.34em; } /* ========================================================== NAVIGATION (ZWEI UNABHAENGIGE ZEILEN STATT GETEILTEM GRID) Vorher: repeat(4,auto)-Grid, bei dem sich Spalte 1-4 ihre Breite ZWISCHEN beiden Zeilen teilen mussten (Spaltenbreite = breitester Eintrag ueber beide Zeilen). Bei kurzen Woertern unten (FAQ, Kontakt) in derselben Spalte wie lange Woerter oben (Lithophanie, Materialien) hat justify-items:end die kurzen Woerter dadurch weit nach rechts in ihre viel zu breite Spalte gedrueckt - sichtbar als "zerrissene" untere Zeile. Jetzt hat jede Zeile ihre eigene, nur von ihrem eigenen Inhalt abhaengige Breite; der gewollte Versatz zwischen den Zeilen bleibt erhalten, sitzt aber auf der Zeile statt auf jedem Link einzeln. ========================================================== */ .header-nav { position: absolute !important; right: 24px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; flex-direction: column; align-items: flex-end; /* jede Zeile bleibt rechtsbuendig, wie vorher justify-items:end */ gap: 8px; /* Abstand zwischen den beiden Zeilen, wie vorher "gap: 8px 28px" (Zeilenanteil) */ } .header-nav-row { display: flex; gap: 28px; /* Abstand zwischen Links einer Zeile, wie vorher "gap: 8px 28px" (Spaltenanteil) */ } .header-nav a { font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap; position: relative; padding: 4px 0; color: #ffffff; text-decoration: none; /* transition NUR auf bestimmte Eigenschaften, um Layout-Sprünge zu verhindern */ transition: transform 0.22s ease, color 0.22s ease, text-shadow 0.22s ease; } /* ========================================================== STABILER VERSATZ (RUHEPOSITIONEN) - jetzt pro Zeile, nicht pro Link ========================================================== */ .header-nav-row-1 { transform: translateX(-80px); } /* Obere Zeile - dein Wunschwert nach links */ .header-nav-row-2 { transform: translateX(50px); } /* Untere Zeile - dein Wunschwert nach rechts */ /* ========================================================== HOVER-EFFEKT - der X-Versatz kommt jetzt automatisch von der Elternzeile, hier nur noch der Y-Nudge + Farbe noetig ========================================================== */ .header-nav a:hover { transform: translateY(-1px); color: #a7eb27; text-shadow: 0 0 8px rgba(142,207,22,.25); } /* ========================================================== UNTERSTREICHUNG (GRÜNER STRICH) ========================================================== */ .header-nav a::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 0; height: 2px; background: #8ECF16; transform: translateX(-50%); box-shadow: 0 0 7px rgba(142,207,22,.7); transition: width .22s ease; } .header-nav a:hover::after { width: 100%; } /* ========================================================== NIETEN / SCHRAUBEN ========================================================== */ /* .header-rivet { position: absolute; z-index: 10; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.7); background: radial-gradient( circle at 35% 30%, #d5e1e8 0%, #8297a5 18%, #435968 42%, #182b39 72%, #07131c 100% ); box-shadow: 0 2px 4px rgba(0,0,0,.75), inset 1px 1px 1px rgba(255,255,255,.45); } .header-rivet::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 1px; background: rgba(5,12,17,.8); transform: rotate(-22deg); } .header-rivet--tl { top: 14px; left: 18px; } .header-rivet--tr { top: 14px; right: 18px; } .header-rivet--bl { bottom: 14px; left: 18px; } .header-rivet--br { bottom: 14px; right: 18px; } */ /* ========================================================== RESPONSIVE LOGO-ANPASSUNG FÜR TABLETS & MOBIL - COORD-FIX ========================================================= */ /* 1. Für mittlere Bildschirme und Tablets (z.B. iPads) */ @media (max-width: 1200px) { .header-brand { transform: translateX(-67px) translateY(22px) scale(1.1) !important; } .header-title { left: 135px !important; } } /* 2. Für Smartphones und kleine Bildschirme */ @media (max-width: 900px) { .header-brand { position: relative !important; left: 0 !important; top: 0 !important; transform: none !important; margin: 10px auto !important; width: auto !important; } img.header-logo { width: 90px !important; height: auto !important; } .header-title { position: relative !important; left: 0 !important; top: 0 !important; transform: none !important; margin: 5px auto !important; align-items: center !important; } .header-name { font-size: 1.35rem !important; } } /* Die eigentliche Nav-Umgruppierung (3/2/3-Grid) und das Hochziehen neben das Logo stehen weiter unten in einem einzigen zusammenhängenden Mobile-Block. */ /* ========================================================== DYNAMISCHE VERKLEINERUNG (RECHTS 50%) - UPDATE ========================================================== */ .site-header { transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important; } .site-header.is-shrunk { width: 55% !important; max-width: 55% !important; margin-left: auto !important; margin-right: 2% !important; } /* Verhalten des Textes im eingeklappten Zustand ganz unten ergänzen */ .site-header.is-shrunk .header-title { left: 110px !important; /* Rückt im 50%-Modus näher nach links, weil das Logo schrumpft */ transform: translateY(-50%) scale(0.8) !important; /* Schrumpft dezent mit */ transform-origin: left center !important; } /* Im geschrumpften Zustand die Schriftgröße und Abstände dezent reduzieren */ .site-header.is-shrunk .header-nav a { font-size: 0.95rem !important; letter-spacing: .05em !important; } .site-header.is-shrunk .header-nav { gap: 16px !important; right: 0 !important; } /* Logo und Titel mitskalieren */ .site-header.is-shrunk .header-brand { display: block !important; /* Macht das Element empfänglich für Layout-Verschiebungen */ left: 0 !important; /* Setzt den linken Startpunkt auf die Kante */ /* Radikaler Zug nach links: Zieht das Logo über den Rand hinaus. Erhöhe diesen Wert (z.B. -40px oder -50px), falls es noch weiter nach links soll! */ margin-left: -30px !important; top: 50% !important; transform: translateY(-50%) scale(0.75) !important; transform-origin: left center !important; transition: all 0.5s ease !important; } @media (max-width: 900px) { .site-header.is-shrunk { width: min(var(--page-width), 96%) !important; max-width: none !important; margin: 0 auto !important; } } /* Verhindert Logo-Kollision im funktionierenden, eingeklappten Zustand */ .site-header.is-shrunk .header-nav { right: 20px !important; gap: 16px !important; } .site-header.is-shrunk .header-nav a { font-size: 0.95rem !important; } /* ========================================================== FEINTUNING LOGO IM EINGEKLAPPTEN ZUSTAND ========================================================== */ .site-header.is-shrunk .header-brand { /* Holt das Logo wieder an die richtige Position links */ left: 10px !important; /* Zwingt das Logo vertikal wieder exakt in die Mitte der Leiste (hebt top: 0 auf) */ top: 50% !important; /* WICHTIG: Das translateY(120px/150px) wird hier genullt und durch die normale Zentrierung (-50%) sowie die 75%-Skalierung ersetzt! */ transform: translateY(-50%) scale(0.75) !important; transform-origin: left center !important; transition: all 0.5s ease !important; } /* Falls der Text immer noch zu nah an die Menüpunkte rückt: Schriftgröße dezent reduzieren */ .site-header.is-shrunk .header-name { font-size: 1.8rem !important; /* Vorher 2.35rem */ } .site-header.is-shrunk .header-claim { font-size: 0.7rem !important; /* Vorher .82rem */ letter-spacing: .25em !important; /* Etwas kompakterer Zeichenabstand */ } /* ========================================================== MOBILE HEADER & NAVIGATION (< 900px) Ersetzt die bisherigen fünf Einzel-Fixes durch einen zusammenhängenden Aufbau. Kernprinzip: .header-nav verlässt auf Mobile die absolute Positionierung (das war der Desktop-Trick für die einzeilige Nav) und wird ein normaler Block im Textfluss. Die 8 Links werden per CSS Grid in 3 Zeilen gruppiert - 3 / 2 / 3 -, ohne dass am PHP/HTML irgendetwas geändert werden muss: - .header-nav-row-1/-2 bekommen "display:contents" - dadurch verschwinden die beiden Wrapper-DIVs optisch, ihre -Kinder werden direkte Grid-Elemente von .header-nav. - Grid-Basis sind 6 Spalten. Ein 3er-Zeile-Link bekommt 2 von 6 Spalten (3 x 2 = 6, füllt die Zeile exakt), ein 2er-Zeile-Link bekommt 3 von 6 Spalten (2 x 3 = 6). Weil jede Zeile die volle Breite exakt ausfüllt, bricht das Grid automatisch nach dem jeweils gewünschten Link um - unabhängig von Bildschirmbreite, ganz ohne Breiten-Ratespiel wie in den bisherigen Fixes. Zusätzlicher Effekt: weil nie mehr als 3 Links in einer Zeile stehen (statt bisher 4), ist auch bei normaler Schriftgröße genug Platz für "Lithophanie"/"Ideenschmiede" - die radikalen Mini-Schriftgrößen (8.5px/10px) der alten Fixes sind nicht mehr nötig. ========================================================== */ :root { /* Grobe Schätzung der mobilen Headerhöhe (eine Zeile: Logo + 3-zeiliges Menü daneben). Bitte am Handy prüfen und hier nachjustieren, falls der Content oben etwas ab- oder zu viel Luft hat. */ --mobile-header-height: 140px; } @media (max-width: 900px) { /* ---- Grundgerüst: Header bleibt oben fix, darf aber in der Höhe frei wachsen statt auf 96px gepresst zu werden ---- */ .site-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 16px !important; transform: none !important; transition: none !important; z-index: 99999 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important; } .site-header.is-shrunk { width: 100% !important; max-width: 100% !important; margin: 0 !important; } body { padding-top: var(--mobile-header-height) !important; } .header-body, .header-inner { height: auto !important; min-height: 96px !important; } /* ---- Logo und Menü jetzt in EINER Zeile: Logo links, Menü rechts (statt Logo oben, Menü darunter) ---- */ .header-inner { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 8px 0 !important; gap: 10px !important; } /* Kein Auto-Centering mehr fürs Logo - es soll strikt links bleiben, das Menü übernimmt die rechte Seite */ .header-brand { margin: 6px 0 !important; flex-shrink: 0 !important; } /* Der Markenname-Text daneben passt auf Mobile nicht mehr neben Logo + Menü in eine Zeile - das Logo trägt die Marke bereits visuell, daher blenden wir den Text hier aus. */ .header-title { display: none !important; } /* ---- Logo/Titel: im eingeklappten Zustand keine Sonderrolle mehr auf Mobile (kein Verschieben/Skalieren) ---- */ .site-header.is-shrunk .header-brand, .site-header.is-shrunk .header-title { transform: none !important; } @media (max-width: 500px) { .site-header { position: fixed !important; top: 50px !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 16px !important; transform: none !important; transition: none !important; z-index: 99999 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important; } .header-nav, .site-header.is-shrunk .header-nav { position: absolute !important; left: auto !important; top: 45px !important; display: grid !important; grid-template-columns: repeat(6, 1fr) !important; align-items: center !important; width: auto !important; max-width: 70% !important; margin-left: auto !important; column-gap: 4px !important; row-gap: 6px !important; padding: 2px 0 !important; } .header-nav-row-1, .header-nav-row-2 { display: contents; } /* Zeile 1: Ablauf, Werkbank, Lithophanie - je 2 von 6 Spalten */ .header-nav-row-1 a:nth-child(1), .header-nav-row-1 a:nth-child(2), .header-nav-row-1 a:nth-child(3) { grid-column: span 2; } /* Zeile 2: Materialien (4. Link, Zeile 1) + Ideenschmiede (1. Link, Zeile 2) - je 3 von 6 Spalten */ .header-nav-row-1 a:nth-child(4), .header-nav-row-2 a:nth-child(1) { grid-column: span 3; } /* Zeile 3: Galerie, FAQ, Kontakt - je 2 von 6 Spalten */ .header-nav-row-2 a:nth-child(2), .header-nav-row-2 a:nth-child(3), .header-nav-row-2 a:nth-child(4) { grid-column: span 2; } /* Da die Nav jetzt nur noch 70% der Zeile (minus Logo) zur Verfügung hat statt vorher der vollen Breite, ist pro Link weniger Platz - Schrift etwas kleiner, dafür mit Ellipsis als Sicherheitsnetz, falls es bei einem sehr schmalen Gerät doch mal eng wird (kein hartes Abschneiden mehr wie bei den alten Fixes, sondern ein "..."). */ .header-nav a, .site-header.is-shrunk .header-nav a { font-size: clamp(0.66rem, 2.6vw, 0.85rem) !important; letter-spacing: normal !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; justify-self: center !important; width: 100% !important; padding: 3px 1px !important; } } /* Verhindert, dass Android/iOS die Schrift im WebView automatisch vergrößert und Layouts dadurch verschiebt */ html, body { -webkit-text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }