/* ───────────────────────────────────────────────────────────── umrax Bestpreis-Landingpage Ein Ziel: Booking-Screenshot per WhatsApp schicken. Brand-Tokens 1:1 von umrax.de übernommen. Layout-Maße bewusst in rem/em/%/px/clamp, NIE ch/ex (ch hängt an der aktiven Schrift, dadurch springt das Layout während der Webfont noch lädt). ───────────────────────────────────────────────────────────── */ /* ── Schriften, selbst gehostet (kein Google-CDN, DSGVO) ───────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('hotels-fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('hotels-fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('hotels-fonts/inter-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('hotels-fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('hotels-fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('hotels-fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2'); } :root { --gold: #b8924a; --gold-light: #f0d089; --gold-deep: #c69b48; --wa: #25d366; --bg: #0a0a0b; --bg-card: #111116; --ink: #ffffff; --ink-mute: rgba(255, 255, 255, 0.62); --ink-faint: rgba(255, 255, 255, 0.4); --line: rgba(255, 255, 255, 0.12); /* Warm getönte Haarlinie. Neutrales Weiß lässt jede dunkle Seite nach Standard-UI aussehen, dieser Ton bindet die Linien an das Gold der Marke, ohne selbst aufzufallen. */ --rule: rgba(184, 146, 74, 0.22); --font-serif: 'Cormorant Garamond', ui-serif, Georgia, serif; --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --wrap: 68rem; --pad: 1.25rem; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } /* Wer mit der Tastatur navigiert, muss sehen wo er steht. Gold statt des blauen Browser-Standards, damit es zur Seite gehört. */ :focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .serif { font-family: var(--font-serif); } .gold { color: var(--gold); } /* ── Sanftes Einblenden beim Scrollen ────────────────────────────── Versteckt wird NUR, wenn JavaScript läuft (html.js wird inline im gesetzt). Ohne JS, bei einem Skript-Fehler oder wenn ein Werbeblocker dazwischenfunkt, ist die Seite trotzdem komplett lesbar, statt unter dem Hero leer zu bleiben. */ .js .rise { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .js .rise.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .rise { opacity: 1; transform: none; transition: none; } } /* ───────────────────────────────────────────────────────────── HERO, der ganze erste Bildschirm ───────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* 18.09. (Mehdi): Die Seite hat jetzt das feste Kopfmenue wie die anderen Unterseiten. Der Hero raeumt dessen Hoehe oben frei, sonst liegt das Menue auf der Logo-Pille. Gleiche Werte wie im Hero der anderen Unterseiten: 81 px auf dem Handy, 77 px ab 640. */ padding: calc(2.2rem + 81px) 0 2.4rem; overflow: hidden; } @media (min-width: 640px) { .hero { padding-top: calc(2.2rem + 77px); } } .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; filter: saturate(0.6); } /* Zwei Schichten: ein warmer Schein hinter der Überschrift, darüber ein Verlauf, der nach unten in den Seitenhintergrund läuft. Der Text braucht den dunklen Kern, die Minarette sollen am Rand aber noch erkennbar sein. */ .hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 40%, rgba(10, 10, 11, 0.82) 0%, rgba(10, 10, 11, 0.45) 55%, transparent 100%), radial-gradient(78% 52% at 50% 36%, rgba(184, 146, 74, 0.18), transparent 72%), linear-gradient(180deg, rgba(10, 10, 11, 0.55) 0%, rgba(10, 10, 11, 0.62) 52%, var(--bg) 100%); } .hero-inner { position: relative; z-index: 1; width: 100%; } /* Logo-Pill, identisch zur Sektion auf umrax.de */ .logo-pill { display: inline-flex; align-items: flex-start; gap: 0.125rem; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 9999px; padding: 0.55rem 1.25rem 0.6rem; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(4px); } .logo-pill img { height: 1.15rem; width: auto; } .logo-pill sup { font-size: 0.5rem; line-height: 1; color: rgba(255, 255, 255, 0.75); margin-top: 0.06rem; } /* Die Überschrift ist bewusst lang (Muhammeds Wortlaut). Damit sie mit dem größeren Duell zusammen auf einen Handy-Bildschirm passt, ist sie eine Spur kleiner als vorher. max-width in em, NICHT in ch: ch hängt an der geladenen Schrift, dadurch bräche die Zeilenzahl während des Ladens um. */ .hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 6.3vw, 3.05rem); line-height: 1.14; letter-spacing: -0.01em; margin: 1.1rem auto 0; max-width: 19em; text-wrap: balance; } .hero h1 strong { font-weight: 700; } .hero-sub { margin: 0.75rem auto 0; max-width: 34rem; font-size: clamp(0.9rem, 3.3vw, 1.15rem); line-height: 1.5; color: var(--ink-mute); } .hero-sub strong { color: var(--ink); font-weight: 600; } /* ───────────────────────────────────────────────────────────── PREIS-DUELL IM HERO Aufbau wie die Bestpreis-Sektion auf umrax.de: zwei Karten, Goldmedaille dazwischen, links durchgestrichen, rechts Gold. Bewusst kompakt gehalten, damit auf dem Handy Überschrift, Duell UND Knopf zusammen auf den ersten Bildschirm passen. ───────────────────────────────────────────────────────────── */ /* Auf dem Handy stehen die beiden Karten UNTEREINANDER, nicht nebeneinander. Muhammed wollte den Vergleich größer. Nebeneinander bliebe bei 390 px pro Karte nur gut 160 px übrig, dann bricht der Hotelname um und die große Preiszahl läuft unter die VS-Medaille. Untereinander ist jede Karte doppelt so breit, der Preis darf groß sein und die Medaille sitzt sauber im Spalt. Ab 48rem wieder nebeneinander, dort ist Platz genug. */ .duell { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.4rem; max-width: 26rem; margin: 1rem auto 0; text-align: left; } .duell-card { border-radius: 1rem; border: 1px solid var(--line); background: rgba(17, 17, 22, 0.82); backdrop-filter: blur(8px); padding: 0.75rem 0.95rem 0.8rem; } .duell-src { margin: 0; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } /* Name/Meta links, Preis rechts auf gleicher Höhe statt auf eigener Zeile darunter — macht die Karte flacher, der Platz rechts war ungenutzt. */ .duell-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.4rem; } .duell-info { min-width: 0; } .duell-hotel { margin: 0; font-family: var(--font-serif); font-size: 1.08rem; font-weight: 700; line-height: 1.22; } /* Stadt-Marke am Hotelnamen, damit sofort klar ist, ob Mekka oder Medina. Bewusst schwarz und klein, sie darf dem Preis keine Aufmerksamkeit klauen. */ .duell-city { display: inline-block; vertical-align: 0.12em; margin-left: 0.35rem; border-radius: 0.3rem; background: #000; padding: 0.14rem 0.4rem; font-family: var(--font-sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; color: #fff; } .duell-meta { margin: 0.2rem 0 0; font-size: 0.7rem; color: rgba(255, 255, 255, 0.45); } .duell-price { flex: none; margin: 0; font-family: var(--font-serif); font-size: clamp(1.45rem, 6.4vw, 2.1rem); font-weight: 700; line-height: 1; text-align: right; font-variant-numeric: lining-nums tabular-nums; } .duell-tag { display: inline-block; margin-top: 0.5rem; border-radius: 9999px; border: 1px solid var(--line); padding: 0.22rem 0.55rem; font-size: 0.6rem; line-height: 1.3; color: rgba(255, 255, 255, 0.55); } .duell-them .duell-price { color: rgba(255, 255, 255, 0.68); text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, 0.8); text-decoration-thickness: 2px; } .duell-us { border-color: rgba(184, 146, 74, 0.6); background: linear-gradient(180deg, rgba(184, 146, 74, 0.36) 0%, rgba(13, 13, 16, 0.94) 100%); box-shadow: 0 1.2rem 3rem -1.5rem rgba(184, 146, 74, 0.75); } .duell-us .duell-src, .duell-us .duell-price { color: var(--gold); } .duell-us .duell-tag { border-color: rgba(184, 146, 74, 0.45); color: #d8b478; } .duell-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 2.7rem; height: 2.7rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); color: #0a0a0b; font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; box-shadow: 0 0.5rem 1.4rem -0.3rem rgba(184, 146, 74, 0.9), 0 0 0 0.22rem rgba(10, 10, 11, 0.85); } .duell-note { margin: 0.5rem auto 0; font-size: 0.68rem; color: var(--ink-faint); } .hero-cta { margin-top: 1rem; } /* Kurze Handy-Bildschirme (z. B. 360×780, iPhone 11 Pro mit 812). Der Hero soll auch dort auf EINEN Schirm passen, also fällt hier das Unwichtigste weg: die Fußnote unter dem Duell, dazu etwas kleinere Überschrift und weniger Luft. Nur unter 820 px Höhe und nur auf dem Handy, damit große Geräte unberührt bleiben. */ @media (max-height: 820px) and (max-width: 30rem) { .hero { padding: 1.5rem 0 1.4rem; } .hero h1 { font-size: clamp(1.42rem, 5.8vw, 3.05rem); margin-top: 0.7rem; } .duell-note { display: none; } } .trust-line { margin: 0.8rem auto 0; font-size: 0.83rem; color: var(--ink-faint); } .scroll-cue { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 1; color: rgba(255, 255, 255, 0.35); animation: cue 2.4s ease-in-out infinite; } @keyframes cue { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 0.4rem); } } @media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } } /* ── WhatsApp-Button ───────────────────────────────────────────── */ .wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; background: var(--wa); color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: 9999px; padding: 1rem 1.6rem; min-height: 3.5rem; box-shadow: 0 1rem 2.5rem -0.75rem rgba(37, 211, 102, 0.75); transition: transform 0.25s ease, box-shadow 0.25s ease; } .wa-btn:hover { transform: translateY(-2px); box-shadow: 0 1.4rem 3.2rem -0.75rem rgba(37, 211, 102, 0.95); } .wa-btn svg { width: 1.25rem; height: 1.25rem; flex: none; } /* ───────────────────────────────────────────────────────────── Sektionen ───────────────────────────────────────────────────────────── */ section { padding: 3.5rem 0; } .eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0; } h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.4rem, 7.1vw, 2.5rem); line-height: 1.2; margin: 0.6rem 0 0; text-wrap: balance; } .sec-head { text-align: center; max-width: 36rem; margin: 0 auto 2.25rem; } .sec-head p.lead { margin: 0.9rem 0 0; color: var(--ink-mute); } /* ───────────────────────────────────────────────────────────── ECHTE FÄLLE — das Herzstück der Seite. Auf dem Handy gestapelt (Hotel oben, Preise darunter), ab Tablet eine Zeile pro Fall mit den Preisen rechts. Das liest sich wie eine Liste und nicht wie sechs einzelne Werbekacheln. ───────────────────────────────────────────────────────────── */ .cases { display: grid; gap: 0.75rem; max-width: 52rem; margin: 0 auto; } .case { border: 1px solid var(--rule); border-radius: 1rem; background: rgba(255, 255, 255, 0.025); padding: 1.1rem 1.15rem; display: grid; gap: 0.9rem; transition: border-color 0.25s ease, background-color 0.25s ease; } @media (hover: hover) { .case:hover { border-color: rgba(184, 146, 74, 0.45); background: rgba(184, 146, 74, 0.045); } } /* Erst 3 Fälle direkt sichtbar (Mehdi, WhatsApp 22.08.), der Rest steckt hier drin, bis der Aufklapp-Button geklickt wird. Skript entfernt dann diese Klasse, .case greift wieder normal. */ .case-extra { display: none; } /* ── Aufklapp-Button "Noch mehr echte Beispiele" ──────────────────── Bewusst zurückhaltend (Umriss statt Fläche), das ist eine sekundäre Handlung, der grüne WhatsApp-Knopf soll der einzige auffällige bleiben. */ .cases-toggle { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin: 0.1rem auto 0; background: transparent; color: var(--gold-light); font-family: inherit; font-weight: 600; font-size: 0.92rem; border: 1px solid var(--rule); border-radius: 9999px; padding: 0.85rem 1.7rem; cursor: pointer; transition: border-color 0.25s ease, background-color 0.25s ease; } @media (hover: hover) { .cases-toggle:hover { border-color: rgba(184, 146, 74, 0.55); background: rgba(184, 146, 74, 0.08); } } .cases-toggle svg { width: 1rem; height: 1rem; flex: none; } .cases-toggle[hidden] { display: none; } /* Hotelfoto, wenn wir eins von genau diesem Haus haben. ⚠️ NIE ein fremdes Hotelfoto unter einen echten Hotelnamen setzen. Fälle ohne eigenes Foto rendern einfach ohne Bild, das Layout verträgt beides. Vorhanden ist bisher nur das Anjum Makkah. */ .case-foto { border-radius: 0.7rem; overflow: hidden; border: 1px solid var(--rule); margin-bottom: 0.9rem; line-height: 0; } .case-foto img { width: 100%; height: 8.5rem; object-fit: cover; } .case h3 { margin: 0; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; } /* Sterne bewusst leise: der Hotelname führt, die Klassifizierung ist Beiwerk. Vorher zogen sie durch volles Gold zu viel Blick. */ .case h3 .stars { /* 15.09.: Die Sterne standen allein auf einer zweiten Zeile. Sie gehoeren zum Namen, deshalb haengen sie mit einem geschuetzten Abstand daran und brechen nicht um. */ white-space: nowrap; font-size: 0.62rem; color: rgba(184, 146, 74, 0.75); vertical-align: 0.22em; margin-left: 0.3rem; letter-spacing: 0.06em; } .case-meta { margin: 0.3rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink-mute); } /* Der Zusatzgewinn: besseres Zimmer, bessere Lage. */ .case-plus { margin: 0.5rem 0 0; font-size: 0.82rem; line-height: 1.5; color: #d8b478; } .case-plus::before { content: '+ '; font-weight: 700; } /* Einschränkung, die den Vergleich ehrlich hält. Bewusst unauffällig, aber lesbar. Nicht entfernen, ohne den Fall selbst zu prüfen. */ .case-hint { margin: 0.5rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--ink-faint); } /* ── Der Beleg ─────────────────────────────────────────────────── Jeder Fall ist eine echte Subtraktion, gesetzt wie in einem Kassenbuch: Buchungspreis, minus unser Preis, Goldlinie, Ergebnis. Das ist genau die Behauptung der Seite, nur als Rechnung, die jeder in zwei Sekunden nachprüfen kann. Ein durchgestrichener Preis wäre die Geste eines Rabattaufklebers, die Rechnung ist die Geste eines Belegs. Ihr habt echte Zahlen, also zeigt die Seite sie auch als Zahlen. ─────────────────────────────────────────────────────────────── */ .calc { margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); display: grid; gap: 0.28rem; min-width: 11.5rem; } .calc-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1.25rem; } .calc dt { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); } .calc dd { margin: 0; font-family: var(--font-serif); font-weight: 700; line-height: 1; /* Ohne diese Zeile haben Cormorants Ziffern unterschiedliche Breiten (die 1 misst 33 px, die 4 misst 49 px). Dann fluchtet in einer Preisliste nichts. Mit lining + tabular sind alle Ziffern exakt gleich breit und die Beträge stehen sauber untereinander. */ font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; } .calc .minus { margin-right: 0.15em; color: rgba(255, 255, 255, 0.4); } /* Zeile 1: der Preis, den der Kunde gefunden hat. */ .calc-them dd { font-size: 1.1rem; color: rgba(255, 255, 255, 0.6); } /* Zeile 2: unser Preis. Bewusst NICHT die größte Zahl im Block. Der größte, hellste Betrag wäre sonst der, den der Kunde zahlt, und eine Seite über Ersparnis würde ihren Blickfang auf den Zahlbetrag legen. Die Rechnung soll im Ergebnis gipfeln. */ .calc-us dt { color: var(--gold); } .calc-us dd { font-size: 1.3rem; color: var(--gold); } /* Zeile 3: das Ergebnis, über einem Rechenstrich in Gold. Bewusst NICHT grün: Grün ist auf dieser Seite ausschließlich die Farbe der Handlung. Sechs grüne Pillen würden den einen grünen Knopf entwerten, den die ganze Seite verkauft. */ .calc-result { margin-top: 0.15rem; padding-top: 0.45rem; border-top: 1.5px solid rgba(184, 146, 74, 0.55); } .calc-result dt { color: rgba(240, 208, 137, 0.85); } .calc-result dd { font-size: 1.95rem; color: var(--gold-light); } .note { margin: 0.9rem auto 0; text-align: center; font-size: 0.72rem; color: var(--ink-faint); } /* ───────────────────────────────────────────────────────────── ECHTE CHAT-SCREENSHOTS Jeder Screenshot steckt in einem Handy-Rahmen, gleiche Optik wie das Handy in "So läuft's". Damit ist auf einen Blick klar, dass das echte Chats vom Telefon sind, und alle Karten sind exakt gleich groß, egal wie hoch der Screenshot selbst ist. ⚠️ Deshalb sind ALLE Bilder im Handy-Hochformat aufbereitet (Seitenverhältnis 0,48 bis 0,54). Ein Querformat-Screenshot passt hier NICHT hinein, er würde entweder zerschnitten oder ließe den Rahmen leer. Der Chat ist unten angeschnitten, das ist Absicht: so sieht man, dass das Gespräch weitergeht. ───────────────────────────────────────────────────────────── */ .chat-hint { margin: 0.9rem auto 0; font-size: 0.74rem; color: var(--ink-faint); } .chatrail-wrap { position: relative; margin-top: 1.7rem; } .chatrail { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; /* Muss zur Einrückung der Zeile passen. Ohne das schnappt der Browser die erste Karte an den Behälterrand, die Einrückung verschwindet und der Punkt springt beim Laden auf Karte 2. */ scroll-padding-left: var(--pad); scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Die Zeile blendet an beiden Rändern aus, statt hart abzuschneiden. Das ist der ruhigste Hinweis darauf, dass es seitlich weitergeht. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5rem, #000 calc(100% - 3.5rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3.5rem, #000 calc(100% - 3.5rem), transparent 100%); } .chatrail::-webkit-scrollbar { display: none; } .chatrail-track { display: flex; gap: 1.1rem; align-items: flex-start; margin: 0; padding: 0.4rem var(--pad) 0.6rem; list-style: none; } .chatrail-track > li { flex: 0 0 auto; scroll-snap-align: start; width: 63vw; max-width: 15rem; } .chatphone { margin: 0; } /* Der Rahmen selbst ist der Knopf. Ein Tipp öffnet den Screenshot groß. */ .chatphone-shell { position: relative; display: block; width: 100%; padding: 0.45rem; border: 0; border-radius: 1.9rem; background: linear-gradient(160deg, #2a2a2e 0%, #1a1a1e 40%, #111114 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 2px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.95); cursor: zoom-in; transition: transform 0.25s ease, box-shadow 0.25s ease; } @media (hover: hover) { .chatphone-shell:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(184, 146, 74, 0.5), 0 0 0 2px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2rem 3.5rem -1rem rgba(0, 0, 0, 0.95); } } /* Die Seitentasten des großen Handys sitzen auf feste rem-Werte. Hier ist das Gerät kleiner, deshalb eigene, prozentuale Positionen. */ .chatphone-shell .phone-btn-l1 { top: 18%; height: 6%; } .chatphone-shell .phone-btn-l2 { top: 27%; height: 11%; } .chatphone-shell .phone-btn-r { top: 24%; height: 13%; } .chatphone-screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 1 / 2; border-radius: 1.5rem; overflow: hidden; /* Farbe der WhatsApp-Hintergrundtapete, aus den Screenshots abgelesen. Dadurch geht die Statusleiste oben nahtlos in den Chat über. */ background: #f4f1e9; } /* Statusleiste: bewusst LEER. Uhrzeit und Akkustand wären erfunden. */ .chatphone-bar { position: relative; flex: none; height: 1.4rem; background: #f4f1e9; } .chatphone-shell .phone-island { top: 0.28rem; width: 3.4rem; height: 0.85rem; border-radius: 0.6rem; } .chatphone-screen img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top center; } /* Ein Chat, der kürzer ist als der Handy-Bildschirm. Der wird ganz gezeigt und der Rest bleibt Hintergrundtapete, statt ihn seitlich zu beschneiden und dabei Text abzuschneiden. */ .chatphone-screen img.is-kurz { object-fit: contain; background: #f4f1e9; } /* Weicher Abschluss unten: der Chat läuft aus dem Bild, statt abgehackt zu enden. Sagt ohne Worte "hier geht es weiter". */ .chatphone-more { position: absolute; left: 0; right: 0; bottom: 0; height: 3.2rem; background: linear-gradient(180deg, rgba(244, 241, 233, 0) 0%, rgba(244, 241, 233, 0.85) 65%, #f4f1e9 100%); pointer-events: none; } .chatphone-home { display: block; height: 0.85rem; margin: 0.15rem auto 0; width: 4.5rem; border-radius: 2px; background: linear-gradient(180deg, transparent 40%, rgba(255, 255, 255, 0.28) 40%, rgba(255, 255, 255, 0.28) 65%, transparent 65%); } .chat-cap { margin: 0.7rem 0.15rem 0; font-size: 0.76rem; line-height: 1.45; color: var(--ink-mute); } .chat-cap b { color: var(--gold-light); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; } /* Pfeile: nur wo es einen Mauszeiger gibt. Auf dem Handy wischt man. */ .rail-nav { display: none; } @media (hover: hover) and (min-width: 48rem) { .rail-nav { position: absolute; top: 45%; z-index: 3; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid var(--line); border-radius: 9999px; background: rgba(17, 17, 22, 0.92); color: #fff; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .rail-nav:hover { border-color: rgba(184, 146, 74, 0.6); background: rgba(26, 26, 32, 0.96); } .rail-nav[hidden] { display: none; } .rail-prev { left: 0.4rem; } .rail-next { right: 0.4rem; } } /* Punkte: sagen auf einen Blick, wie viele Chats es sind. */ .rail-dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 1.1rem; } .rail-dots span { width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.22); transition: width 0.25s ease, background 0.25s ease; } .rail-dots span.on { width: 1.3rem; background: var(--gold); } /* Großansicht. Liegt still im Hintergrund, bis jemand ein Bild antippt. */ .shotbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; background: rgba(6, 6, 8, 0.94); backdrop-filter: blur(6px); cursor: zoom-out; } .shotbox[hidden] { display: none; } .shotbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 0.7rem; box-shadow: 0 2rem 5rem -1rem rgba(0, 0, 0, 0.9); } .shotbox-close { position: absolute; top: 0.7rem; right: 0.9rem; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line); border-radius: 9999px; background: rgba(20, 20, 24, 0.9); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; } /* ── So läuft's: Schritte + Handy ──────────────────────────────── */ .flow { display: grid; gap: 2.5rem; align-items: center; } .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 30rem; margin-inline: auto; } .steps li { display: flex; gap: 0.9rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 0.9rem; padding: 0.9rem 1rem; background: rgba(255, 255, 255, 0.025); } .steps .num { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; color: #0a0a0b; background: linear-gradient(135deg, var(--gold-light), var(--gold)); } .steps b { display: block; font-size: 0.95rem; font-weight: 600; } .steps span.txt { display: block; font-size: 0.85rem; color: var(--ink-mute); margin-top: 0.15rem; } /* Handy-Mockup, übernommen von umrax.de */ .phone-wrap { display: flex; justify-content: center; } .phone-shell { position: relative; width: min(20rem, 88vw); background: linear-gradient(160deg, #2a2a2e 0%, #1a1a1e 40%, #111114 100%); border-radius: 3rem; padding: 0.75rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 2px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2.5rem 5rem -1.25rem rgba(0, 0, 0, 0.95); } .phone-btn-l { position: absolute; left: -3px; width: 3px; background: linear-gradient(180deg, #3a3a3e, #2a2a2e); border-radius: 2px 0 0 2px; } .phone-btn-l1 { top: 5.6rem; height: 1.5rem; } .phone-btn-l2 { top: 7.9rem; height: 2.9rem; } .phone-btn-l3 { top: 11.4rem; height: 2.9rem; } .phone-btn-r { position: absolute; right: -3px; top: 8.1rem; width: 3px; height: 3.9rem; background: linear-gradient(180deg, #3a3a3e, #2a2a2e); border-radius: 0 2px 2px 0; } .phone-screen { position: relative; background: #0b141a; border-radius: 2.4rem; overflow: hidden; } .phone-island { position: absolute; top: 0.55rem; left: 50%; transform: translateX(-50%); width: 5.6rem; height: 1.6rem; background: #000; border-radius: 1.1rem; z-index: 10; } .phone-home { height: 1.5rem; display: flex; align-items: center; justify-content: center; background: #0b141a; } .phone-home::after { content: ''; display: block; width: 6.25rem; height: 4px; background: rgba(255, 255, 255, 0.25); border-radius: 2px; } .wa-status { display: flex; align-items: center; justify-content: space-between; background: #202c33; padding: 2.5rem 1.1rem 0.25rem; font-size: 0.68rem; font-weight: 600; } .wa-head { display: flex; align-items: center; gap: 0.6rem; background: #202c33; padding: 0.25rem 0.7rem 0.6rem; } .wa-avatar { width: 2rem; height: 2rem; flex: none; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); color: #0a0a0b; } .wa-head .nm { font-size: 0.82rem; font-weight: 600; margin: 0; } .wa-head .on { font-size: 0.66rem; color: #8696a0; margin: 0; } .wa-chat { background-color: #0b141a; background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 0); background-size: 20px 20px; padding: 0.75rem 0.7rem 1rem; display: grid; gap: 0.5rem; } .bubble { max-width: 88%; border-radius: 1rem; padding: 0.5rem 0.7rem; font-size: 0.75rem; line-height: 1.4; color: #e9edef; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .bubble.me { justify-self: end; background: #005c4b; border-top-right-radius: 0.15rem; } .bubble.them { justify-self: start; background: #202c33; border-top-left-radius: 0.15rem; } .bubble .who { font-size: 0.66rem; font-weight: 700; color: var(--gold); margin: 0 0 0.25rem; } .bubble .time { display: block; text-align: right; font-size: 0.6rem; color: #8696a0; margin-top: 0.25rem; } /* Die weiße Karte im Chat steht für den weitergeleiteten Screenshot. Bewusst OHNE Hotelfoto: wir haben kein eigenes Bild vom Ancyra, und ein fremdes Foto unter einen echten Hotelnamen zu setzen wäre falsch. */ .shot { border-radius: 0.6rem; overflow: hidden; background: #fff; color: #171717; padding: 0.5rem 0.6rem 0.55rem; margin-bottom: 0.35rem; } .shot .nm { font-size: 0.72rem; font-weight: 700; margin: 0; } .shot .sub { font-size: 0.62rem; color: #737373; margin: 0.12rem 0 0; } .shot .pr { font-size: 0.85rem; font-weight: 700; margin: 0.25rem 0 0; } .quote { border-radius: 0.5rem; background: rgba(0, 0, 0, 0.25); padding: 0.4rem 0.55rem; margin-top: 0.5rem; } .quote .r { display: flex; align-items: center; justify-content: space-between; font-size: 0.68rem; color: #8696a0; font-variant-numeric: lining-nums tabular-nums; } .quote .r.win { font-size: 0.72rem; font-weight: 700; color: var(--gold); margin-top: 0.1rem; } /* Eigener Name statt .save, sonst würde die runde Ersparnis-Pille aus den Fall-Karten hier mit hineinregieren. */ .quote .save-line { margin: 0.35rem 0 0; padding-top: 0.3rem; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.68rem; font-weight: 600; color: var(--wa); } /* ── FAQ ───────────────────────────────────────────────────────── */ .faq { max-width: 42rem; margin: 0 auto; display: grid; gap: 0.6rem; } .faq details { border: 1px solid var(--line); border-radius: 0.9rem; background: rgba(255, 255, 255, 0.025); overflow: hidden; } .faq summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.15rem; font-weight: 600; font-size: 0.98rem; position: relative; min-height: 3.5rem; display: flex; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; position: absolute; right: 1.15rem; top: 50%; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: translateY(-70%) rotate(45deg); transition: transform 0.25s ease; } .faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); } .faq .answer { padding: 0 1.15rem 1.1rem; margin: 0; font-size: 0.92rem; color: var(--ink-mute); } /* ── Schluss-CTA ───────────────────────────────────────────────── */ .final { text-align: center; padding-bottom: 4rem; } .final .wa-btn { margin-top: 1.75rem; } /* ── Footer ────────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--line); padding: 1.75rem 0 6.5rem; text-align: center; font-size: 0.8rem; color: var(--ink-faint); } footer a { color: rgba(255, 255, 255, 0.62); text-decoration: none; margin: 0 0.5rem; } footer a:hover { color: var(--gold); } /* ── Fixe WhatsApp-Leiste, erscheint erst nach dem Hero ────────── */ .sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 0.7rem var(--pad) calc(0.7rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(10, 10, 11, 0) 0%, rgba(10, 10, 11, 0.94) 38%); transform: translateY(120%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .sticky-bar.show { transform: none; pointer-events: auto; } .sticky-bar .wa-btn { /* display:flex statt inline-flex, sonst greift margin:auto nicht und der Knopf klebt auf dem Tablet am linken Rand. */ display: flex; width: 100%; max-width: 26rem; margin: 0 auto; } /* ───────────────────────────────────────────────────────────── Ab Tablet ───────────────────────────────────────────────────────────── */ @media (min-width: 48rem) { :root { --pad: 2rem; } section { padding: 4.5rem 0; } .logo-pill { padding: 0.7rem 1.6rem 0.75rem; } .logo-pill img { height: 1.6rem; } .logo-pill sup { font-size: 0.62rem; } /* Ab hier ist jeder Fall EINE Zeile: Hotel links, Preise rechts. Sechs solcher Zeilen liest man in wenigen Sekunden durch, sechs gestapelte Kacheln nicht. */ .case { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; padding: 1.35rem 1.5rem; } /* Auf dem Handy steht das Foto als Banner über dem Text, ab hier als Vorschaubild daneben. Ein Banner würde die Zeile auf die doppelte Höhe der übrigen Fälle aufblasen und die ruhige Liste zerreißen. */ .case-main { display: flex; align-items: center; gap: 1.25rem; } .case-foto { flex: none; width: 9.5rem; margin-bottom: 0; } .case-foto img { height: 6rem; } .duell { grid-template-columns: 1fr 1fr; max-width: 42rem; gap: 1.1rem; } .duell-card { padding: 1.4rem 1.4rem 1.5rem; } /* Luft zur Medaille hin, sonst läuft die große Preiszahl darunter. */ .duell-them { padding-right: 2.9rem; } .duell-us { padding-left: 2.9rem; } /* Ab hier ist die Karte breit genug für den großen Preis daneben, UND breit genug, dass Name+Preis nebeneinander eng würden — deshalb bleibt der Preis hier wie vorher unter Name/Meta, nur das Handy bekommt das neue Preis-rechts-Layout aus der mobilen Ansicht. */ .duell-row { flex-direction: column; align-items: flex-start; gap: 0; } .duell-hotel { font-size: 1.35rem; } .duell-city { font-size: 0.66rem; } .duell-meta { font-size: 0.78rem; } .duell-price { margin-top: 0.7rem; text-align: left; font-size: 2.9rem; } .duell-tag { font-size: 0.68rem; padding: 0.28rem 0.7rem; } .duell-badge { width: 3.3rem; height: 3.3rem; font-size: 1.15rem; } .duell-note { font-size: 0.76rem; } .chatrail { scroll-padding-left: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))); } .chatrail-track { padding-inline: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))); gap: 1.4rem; } .chatrail-track > li { width: 14rem; max-width: none; } /* Der Beleg wandert nach rechts und braucht dort keine Trennlinie mehr nach oben, die Spalte trennt schon. Der Rechenstrich über dem Ergebnis bleibt, er ist Teil der Rechnung. */ .calc { padding-top: 0; border-top: 0; padding-left: 2rem; border-left: 1px solid var(--rule); } } @media (min-width: 62rem) { .flow { grid-template-columns: 1fr minmax(0, 21rem); gap: 3.5rem; } .steps { margin-inline: 0; /* Füllt die linke Spalte aus, sonst klafft eine Lücke zum Handy daneben. */ max-width: none; } .chatrail-track > li { width: 15rem; } /* Auf dem Desktop ist der Hero-Button immer in Reichweite, die fixe Leiste würde dort nur Inhalt verdecken. */ .sticky-bar { display: none; } footer { padding-bottom: 2.5rem; } } /* ───────────────────────────────────────────────────────────── HOTEL-MATRIX — Medina/Mekka nebeneinander, Jeddah darunter. Auf dem Handy gestapelt (Medina, dann Mekka), ab Tablet zwei Spalten nebeneinander. Einheiten bewusst rem/%, keine ch/ex. ───────────────────────────────────────────────────────────── */ #hotelmatrix { padding-top: 4rem; padding-bottom: 4rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .hm-cities { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 48rem) { .hm-cities { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } .hm-city, .hm-jeddah { border: 1px solid rgba(255, 255, 255, 0.1); background: var(--bg-card); border-radius: 1.25rem; padding: 1.5rem 1.25rem; } @media (min-width: 48rem) { .hm-city, .hm-jeddah { padding: 2rem 1.75rem; } } .hm-jeddah { margin-top: 2rem; } @media (min-width: 48rem) { .hm-jeddah { margin-top: 2.5rem; } } .hm-city-title { margin: 0 0 1.25rem; font-family: var(--font-serif, inherit); font-size: 1.4rem; font-weight: 700; color: var(--gold-light); } .hm-tier { padding: 0.9rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .hm-tier:first-of-type { border-top: none; padding-top: 0; } .hm-tier-label { margin: 0 0 0.35rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); } .hm-tier-list { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--ink-mute); } /* ───────────────────────────────────────────────────────────── HOTELFINDER — Suchleisten-Optik, Mehdi-Vorlage 26.08. Reine Optik ohne echtes Such-Backend (siehe Kommentar im .astro), "Hotels finden" springt zur Hotel-Matrix. Handy: Felder gestapelt, ab Tablet eine Zeile. ───────────────────────────────────────────────────────────── */ #hotelfinder { position: relative; overflow: hidden; padding: 3.5rem 0; } .hf-bg { position: absolute; inset: 0; z-index: 0; } .hf-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; } .hf-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, 0.7) 0%, rgba(10, 10, 11, 0.88) 60%, var(--bg) 100%); } .hf-inner { position: relative; z-index: 1; text-align: center; } .hf-trust { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; color: var(--gold-light); } .hf-title { margin: 0 0 2rem; font-family: var(--font-serif, inherit); font-size: 1.9rem; font-weight: 700; line-height: 1.15; color: var(--ink); } @media (min-width: 30rem) { .hf-title { font-size: 2.4rem; } } .hf-gold { color: var(--gold-light); } .hf-form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 30rem; margin: 0 auto; border-radius: 1.5rem; border: 1px solid var(--line); background: rgba(17, 17, 22, 0.82); backdrop-filter: blur(8px); padding: 1.1rem; text-align: left; } @media (min-width: 62rem) { .hf-form { flex-direction: row; align-items: stretch; max-width: none; padding: 0.6rem; } } .hf-field { display: flex; flex-direction: column; gap: 0.3rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); padding: 0.6rem 0.85rem; } @media (min-width: 62rem) { .hf-field { flex: 1; border: none; background: none; padding: 0.5rem 1rem; } .hf-field + .hf-field { border-left: 1px solid var(--line); } } .hf-field-label { font-size: 0.66rem; font-weight: 600; color: var(--ink-faint); } .hf-field-value { position: relative; display: flex; align-items: center; gap: 0.5rem; color: var(--ink); } .hf-field-value svg:first-child { flex-shrink: 0; color: var(--gold); } .hf-field-placeholder { flex: 1; font-size: 0.88rem; color: var(--ink-mute); } /* CustomSelect (dd-*, siehe components/CustomSelect.astro) in die Suchleiste einpassen: der eigene Trigger-Rahmen/Hintergrund fliegt raus, damit er wie reiner Text in der Reihe sitzt statt wie eine zweite Box; das aufklappende Menü bleibt das themed CustomSelect-Menü (kein System-Dropdown mehr), das übernimmt automatisch Farbe/Form. */ .hf-dd { flex: 1; min-width: 0; } .hf-dd .dd-trigger { border: none; background: none; padding: 0.1rem 1.2rem 0.1rem 0; border-radius: 0; } /* 18.09. (Handy-Durchlauf): Die Regel oben hat nicht gegriffen. Der Baustein bringt .dd[data-dd-theme="dark"] .dd-trigger mit, das ist spezifischer, deshalb stand um "Mekka oder Medina" und "2 Gaeste · 1 Zimmer" ein eckiger Kasten mit eigenem dunklen Grund, waehrend "Check-in bis Check-out" keinen hatte. Gemessen: 1px solid rgba(255,255,255,0.15) auf #171717. Diese Regel ist spezifischer als die des Bausteins. Dazu 44 px Tippflaeche, vorher waren die Felder 23 px hoch. */ .dd.hf-dd[data-dd-theme='dark'] .dd-trigger { border: none; background: none; border-radius: 0; padding: 0.1rem 1.2rem 0.1rem 0; display: flex; align-items: center; min-height: 44px; } @media (min-width: 62rem) { .dd.hf-dd[data-dd-theme='dark'] .dd-trigger { min-height: 0; } } /* Das Datumsfeld ist reiner Text, damit es genauso hoch ist wie die zwei Auswahlfelder. */ .hf-field-placeholder { display: flex; align-items: center; min-height: 44px; } @media (min-width: 62rem) { .hf-field-placeholder { min-height: 0; } } .hf-dd .dd-trigger .dd-label { font-size: 0.88rem; color: var(--ink); } .hf-dd .dd-trigger .dd-label.dd-placeholder { color: var(--ink); } .hf-dd .dd-trigger .dd-chevron { color: var(--ink-faint); } .hf-cta { display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.9rem; background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); color: #14140f; font-size: 0.92rem; font-weight: 700; padding: 0.85rem 1.4rem; text-decoration: none; transition: filter 0.2s ease; } .hf-cta:hover { filter: brightness(1.08); } @media (min-width: 62rem) { .hf-cta { flex-shrink: 0; } }