/* Leiste mit Mail, Telefon und CTA fuer Seiten OHNE v2-baulig.css (Impressum, Datenschutz). Wortgleiche Kopie der Abschnitte aus v2-baulig.css ("23. DIE ZWEI WEGE" und "HANDY: FESTE CTA-LEISTE"), damit die Leiste auf jeder Seite gleich aussieht und nie fehlt. Aenderungen bitte in beiden Dateien. (26.09.2026) */ :root { --v2-gold: #9B7C34; --v2-gold-hell: #C2A05A; --v2-tusche: #000000; --v2-creme: #EDE1CA; } /* ══════════════════════════════════════════════════════════════════════ 23. DIE ZWEI WEGE UNTEN LINKS ══════════════════════════════════════════════════════════════════════ Gegenstueck zum Pfeil nach oben, der unten rechts sitzt (`art-top`, fixed, 48x48, z-index 100). Dieselben Masse, dieselbe Hoehe, andere Ecke - damit liest sich das Paar als eine Leiste und nicht als zwei Einfaelle. Gold, weil hier gehandelt wird: es ist dieselbe Farbe wie an den Knoepfen. Dezent im Umriss, gefuellt erst beim Ueberfahren. */ .kamui-wege { position: fixed; left: 32px; bottom: 32px; z-index: 100; display: flex; gap: 12px; transition: opacity 0.35s ease, transform 0.35s ease; } /* In der Fusszeile ausblenden: dort steht das Kamui-Logo seit heute unten links, und "es darf nichts ueberschneiden". Mailadresse und Kontaktseite stehen dort ohnehin ausgeschrieben. */ .kamui-wege[data-weg="ja"] { opacity: 0; transform: translateY(12px); pointer-events: none; } /* ── Groesse und Fassung ─────────────────────────────────────────── Franky, 25.08. abends: "Mail und Telefon Zeichen muss groesser sein und besser zu sehen und hochwertiger." Drei getrennte Sachen, deshalb drei Massnahmen: GROESSER 48 auf 58 Pixel, das Zeichen darin von 21 auf 25. Der Pfeil nach oben unten rechts geht mit: die beiden Ecken sind als Paar gebaut ("dieselbe Bauart, nur gespiegelt"), eine Ecke allein zu vergroessern haette sie gegeneinander verstellt. BESSER ZU SEHEN Der Grund lag auf 0.55 Deckung und der Umriss auf 0.55 Gold. Ueber einem hellen Bild - dem Kaliber, der Lichthalle - verschwand beides fast. Jetzt 0.78 Grund, 0.85 Umriss, dazu ein weicher Schlagschatten nach aussen. Der Schatten macht die Arbeit, die auf dunklem Grund der Umriss macht: er loest das Zeichen vom Bild. HOCHWERTIGER Ein zweiter, haarfeiner Ring innen, ein Millimeter vom Rand. Das ist die Fassung einer Uhrenluenette und dieselbe Sprache wie das Kaliberbild im Auftakt. Dazu eine duennere Strichstaerke im Zeichen selbst (1.25 statt 1.4, siehe kontakt.js): bei 25 Pixeln wirkt ein fetter Strich billig, ein feiner teuer. Farben bleiben Gold und Tusche. Keine vierte Farbe. */ .kamui-wege__zeichen { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(194, 160, 90, 0.85); background: rgba(0,0,0, 0.78); backdrop-filter: blur(12px); color: var(--v2-gold-hell); text-decoration: none; /* Innen die zweite Fassung, aussen die Ablösung vom Bild. */ box-shadow: inset 0 0 0 1px rgba(237, 225, 202, 0.12), 0 8px 28px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .kamui-wege__zeichen svg { width: 25px; height: 25px; display: block; } .kamui-wege__zeichen:hover, .kamui-wege__zeichen:focus-visible { background: var(--v2-gold); border-color: var(--v2-gold); color: #FFFFFF; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(237, 225, 202, 0.28), 0 12px 34px rgba(0, 0, 0, 0.55); } /* Der Pfeil nach oben ist die andere Haelfte desselben Paares. Das Theme setzt ihn auf 3rem mit 1px --primary und schwarzem Grund. Hier bekommt er dieselbe Groesse, dieselbe Fassung und denselben Schatten, damit die zwei unteren Ecken zusammengehoeren. */ .art-top.brxe-button { width: 58px; height: 58px; border-color: rgba(194, 160, 90, 0.85); box-shadow: inset 0 0 0 1px rgba(237, 225, 202, 0.12), 0 8px 28px rgba(0, 0, 0, 0.5); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .art-top.brxe-button svg { width: 25px; height: 25px; } .art-top.brxe-button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(237, 225, 202, 0.28), 0 12px 34px rgba(0, 0, 0, 0.55); } /* Auf schmalen Geraeten ruecken beide Ecken enger an den Rand, sonst stehen vier Zeichen auf 390px Breite zu dicht beieinander. Sie bleiben aber deutlich groesser als vorher: 50 statt 42. */ @media (max-width: 640px) { .kamui-wege { left: 18px; bottom: 18px; gap: 10px; } .kamui-wege__zeichen { width: 50px; height: 50px; } .kamui-wege__zeichen svg { width: 22px; height: 22px; } .art-top.brxe-button { width: 50px; height: 50px; } .art-top.brxe-button svg { width: 22px; height: 22px; } } /* ══ HANDY: FESTE CTA-LEISTE (26.09.2026) ═══════════════════════════ Franky (iPhone-Screenshots): "Der Call to Action muss auch immer durchgehend sichtbar sein" und "der Hero schneidet den Button ab". Vorher: drei einzelne Kreise (Mail, Telefon, Pfeil nach oben), die auf Text lagen, und im Hero ein Knopf, den Safaris untere Leiste anschnitt. Jetzt eine ruhige Fussleiste wie in einer App: Glasgrund, feine Goldkante oben, links Mail und Telefon, rechts der Knopf ueber die restliche Breite. Sie steht immer: ueber der Fusszeile, beim Seitenwechsel und auch bei offenem Menue. Der Pfeil nach oben entfaellt auf dem Handy: dafuer gibt es das Antippen der Uhrzeit. */ .kamui-wege__cta { display: none; } @media (max-width: 767px) { .kamui-wege, .kamui-wege[data-weg="ja"], html[data-ecken-weg] .kamui-wege { left: 0 !important; right: 0 !important; bottom: 0 !important; gap: 10px !important; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, 0.84); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-top: 1px solid rgba(194, 160, 90, 0.28); /* Ueber allem: der Fusszeile (lag vorher darueber, gemessen 26.09.: ab dem Fuss war die Leiste verdeckt), dem Seitenwechsel-Schleier (8500) und dem offenen Menue (Kopf 9000). "Darf nie weggehen." */ z-index: 9100 !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .kamui-wege__zeichen { width: 46px !important; height: 46px !important; flex: 0 0 46px; box-shadow: inset 0 0 0 1px rgba(237, 225, 202, 0.1) !important; background: rgba(0, 0, 0, 0.6); } .kamui-wege__zeichen svg { width: 20px !important; height: 20px !important; } .kamui-wege__cta { display: inline-flex; flex: 1 1 auto; min-width: 0; height: 46px; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid rgba(155, 124, 52, 0.9); border-radius: 5px; background: rgba(194, 160, 90, 0.1); color: #C2A05A; font-family: "Nunito Sans", system-ui, sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color 0.3s ease, color 0.3s ease; } .kamui-wege__cta:active, .kamui-wege__cta:focus-visible { background: #C2A05A; color: #000; } .art-top.brxe-button { display: none !important; } /* Platz unter dem Seitenende, damit die Leiste nichts verdeckt. */ body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; } /* Der Knopf im Startseiten-Hero ist jetzt doppelt (die Leiste traegt ihn durchgehend) und wurde von Safari angeschnitten: weg damit, ebenso der Scroll-Hinweis, der an derselben Stelle stand. */ html[data-kamui-cta] .kamui-hero__tat, html[data-kamui-cta] .kamui-hero__hinweis { display: none !important; } } /* Nur diese Datei (Impressum, Datenschutz): dort ist der Seitengrund hellgrau (244), er schien durch die 84-Prozent-Leiste und machte sie grau. Deckend schwarz, wie sie auf den anderen Seiten wirkt. */ @media (max-width: 767px) { .kamui-wege, .kamui-wege[data-weg="ja"] { background: #000 !important; } .kamui-wege__zeichen { background: #000 !important; } } /* Leiste beim Scrollen nach unten weg, beim Stehenbleiben zurueck (leiste.js). Hoehere Spezifitaet als die "immer sichtbar"-Regel oben. */ @media (max-width: 767px) { html body .kamui-wege.kamui-wege { transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.32s ease !important; will-change: transform; } html[data-leiste-weg] body .kamui-wege.kamui-wege { transform: translateY(110%) !important; opacity: 0 !important; pointer-events: none !important; } /* Offenes Menue: Leiste bleibt stehen, auch wenn zuletzt gescrollt wurde. */ html[data-leiste-weg] body.no-scroll .kamui-wege.kamui-wege { transform: none !important; opacity: 1 !important; pointer-events: auto !important; } }