/* ================================================================ Vamora Bar · Site-Styles (auf Basis web-design-kit) Marken-Tokens + Hero + Sektions-Layouts + Formular + Footer ================================================================ */ :root{ /* Vamora Bar · ruhig-elegant (Sand / Taupe / Sandgold / Dunkelbraun) Farbrichtung "Sand" (Variante B, 2026-08-06): auf Lus Rueckmeldung hin vom Rose ins Beige verschoben. Waerme bleibt, Rose nur noch angedeutet. Aeltere Rose-Werte fuer den Fall der Faelle: --surface:#FBF1EA --surface-2:#FFE7D8 --card:#FFF7F0 --card-top:#FFFCF8 --card-bottom:#F6E3D4 --blush:#EBBAAF/235,186,175 --line:#E8D6C7 --on-dark:#F3E8DE --on-dark-mute:#C2B4A8 --header-bg:rgba(251,241,234,.88) Hero-Textfarben davor: #FDF6EF, #F6EDE5, #F3E8DE Branding-Paket (quellen/, Vamora-Kundenpaket/) am 10.08.2026 nachgezogen: Creme steht dort jetzt auf #FAF5EC, aus Blush wurde Sandgold #DCB08A. */ --surface:#FAF5EC; --surface-2:#F4E9D9; --ink:#504842; --footer:#2E2823; --card:#FFFBF4; --card-top:#FFFEFA; --card-bottom:#F1E7D5; --text:#4A423C; --text-strong:#3A332E; --text-mute:#84756A; --text-label:#84756A; --on-dark:#F2E9DC; --on-dark-mute:#C3B7A6; --accent:#84756A; --accent-2:#6E6156; --accent-rgb:132,117,106; --shadow-rgb:80,72,66; --blush:#DCB08A; --blush-rgb:220,176,138; --line:#E6DAC6; --line-soft:rgba(132,117,106,.14); /* Signalfarbe "Glut", entschieden am 11.08.2026 (Till). Vorgeschichte an einem Tag: erst Waldboden #3A4527, ein gedecktes Gruen. Till: zu leise, ein Event-Auftritt braucht Lautstaerke. Danach eine Achse von Aperol-Orange zu Pink, in linearem Licht gemischt. Glut ist der Ton mit einem Viertel Pink: liest sich als warmes Rot statt als Orange (Lu mag kein Orange) und hat mit 4,2 mehr Kontrast auf Sand als reines Aperol (3,9). DREI Stufen, und die dritte ist keine Kosmetik: ein lauter Ton hat auf dem Sand nur gut 4 Kontrast (Waldboden hatte 9,4). Fuer grosse Schrift reicht das, fuer Kicker in Kleinschrift nicht. Die haben deshalb eine eigene, abgedunkelte Stufe. Ohne sie muesste man den ganzen Ton abdunkeln, und damit waere er wieder leise. --signal 4,2 auf Sand grosse Schrift auf hellem Grund --signal-hell 3,8 auf Dunkel Akzente auf dunklem Grund und auf Bildern --signal-tief 5,1 auf Sand Kleinschrift auf hellem Grund Herleitung, verworfene Toene und die Kontrasttabelle: ../_prototyp/vergleich-laut/ und website/_vorschau/farben-laut.css STAND 13.08.2026, nach mehreren Runden am Bild. Zwei Toene, getrennt nach Untergrund, KEINE Groessenstufen mehr: hell --signal Glut #D44335 4,16 auf Sand dunkel --ziegel Ziegel #DC5540 2,31 auf Dunkelbraun Der Weg dahin, damit niemand die Runden nochmal dreht: Auf Dunkel war Glut Till "zu rot" und der alte Lachs "zu coral", Ziegel sitzt dazwischen. Danach lief testweise Ziegel auch auf hell, fuer eine einzige Marken- Signalfarbe. Till: "der Glut-Ton war besser auf den hellen Flaechen", Kommando zurueck. Ziegel ist auf Sand naemlich heller und damit flauer (3,57 gegen 4,16), was auf Dunkel der Gewinn und auf Hell der Verlust ist. Die Groessenstufe fuer Kleinschrift ist ersatzlos weg: die abgedunkelte Stufe war Till "einfach zu rot, wir wollen keine Warnfarbe". Kicker laufen deshalb auf demselben Ton wie die Headline, auf hell also 4,16 statt 5,05. Reste bleiben als Token fuer den Rueckweg: --signal-tief, --signal-hell, --glut-warm. */ --signal:#D44335; --ziegel:#DC5540; --signal-hell:#FF8873; --signal-tief:#BD3B2F; /* Signal als Zahlen-Tripel, fuer Flaechen mit Deckkraft (Schein, Chips). */ --signal-rgb:212,67,53; --font-head:"Marcellus",Georgia,serif; --font-body:"Montserrat",-apple-system,sans-serif; /* Display-Schrift NUR fuer h1 und h2. Gloock ist sehr fett und plakativ, auf der mittleren Ebene (h3, Kartentitel, Preise, Zahlen) wuerde sie erschlagen. Dort bleibt Marcellus, deshalb zwei getrennte Tokens statt einem. */ --font-display:"Gloock",Georgia,serif; --font-logo:"Cinzel",Georgia,serif; --display-case:none; --display-tracking:.2px; --display-weight:400; --radius-pill:999px; --radius-card:18px; --container:1320px; --pad:clamp(1.25rem,5vw,4rem); --header-bg:rgba(250,245,236,.88); --header-logo-h:52px; } /* ══════════════════════════════════════════════════════════════════════════ MARKE · Stufe 0 des Editorial-Einbaus (11.08.2026) Nur Farbe und Schrift, kein einziges Layout angefasst. Wirkt trotzdem auf allen 17 Seiten. Plan: ~/Desktop/Jarvis/projects/vamora-editorial-einbau.md ══════════════════════════════════════════════════════════════════════════ */ /* ── Hauptknopf (13.08.2026) ──────────────────────────────────────────────── Die Farbe haengt an vier Tokens, nicht an 41 Stellen im HTML: umschalten heisst --knopf, --knopf-text, --knopf-hover und --knopf-glow aendern. Weil Tokens kaskadieren, kann eine dunkle Sektion sie ueberschreiben, falls hell und dunkel doch verschiedene Knopftoene bekommen sollen. Verlauf an diesem Tag, damit die Runden nachvollziehbar bleiben: Erst stand der Knopf im Kit-Zustand (--ink). Dann in der Signalfarbe, weil er auf dunklen Sektionen im Grund verschwand und Till die Signalfarbe am Anfrage-Einstieg gefiel. Jetzt zurueck auf --ink: das Rot war ihm zu laut, und die Akzentwoerter auf Dunkel tragen die Signalfarbe schon. ACHTUNG, bekannte Schwaeche dieses Zustands: auf einer dunklen Sektion hat die Knopf-Flaeche gegen den Grund 1,00 Kontrast, der Knopf verschwindet dort bis auf Rand und Schrift. Schwarz (#141210) waere derselbe Charakter und kaeme auf 2,09, das steht noch zur Entscheidung. */ :root{--knopf:var(--ink);--knopf-text:var(--surface);--knopf-hover:var(--accent); --knopf-glow:var(--accent-rgb)} .btn{background-color:var(--knopf); border-color:rgba(255,255,255,.2);color:var(--knopf-text)} .btn:hover{background-color:var(--knopf-hover); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 30px rgba(var(--knopf-glow),.34),0 2px 8px rgba(var(--knopf-glow),.22)} /* Auf dunklem Grund braucht der Umriss etwas mehr Hilfe. */ .section--dark .btn,.footer .btn,.funnelpop .btn{border-color:rgba(255,255,255,.26)} /* Der Knopf im Kopf ist derselbe Weg in den Funnel und traegt deshalb dieselbe Farbe, sonst haette die Seite zwei verschiedene Hauptknoepfe. Gilt auch fuer den Eintrag im mobilen Klappmenue. */ .nav-cta,.site-header__nav a.site-header__nav-cta{ background-color:var(--knopf);color:var(--knopf-text);border-color:rgba(255,255,255,.2)} .nav-cta:hover{background-color:var(--knopf-hover); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 7px 18px rgba(var(--knopf-glow),.3)} /* Grosse Headlines laufen in Gloock. Die Schrift steht enger und tiefer als Marcellus, deshalb muessen Zeilenhoehe und Laufweite nachgezogen werden, sonst reissen die Zeilen auseinander. */ .h-display,.h-section{ font-family:var(--font-display); font-weight:400; line-height:.92; letter-spacing:-.014em; } /* ── Grosse Headlines (Till, 11.08.2026) ─────────────────────────────────── Vorher lief die Sektions-Headline auf clamp(30px,3.6vw,50px), also 50px bei 1440px Fenster. Der Prototyp, an dem wir Schrift und Farbe ausgesucht haben, lief auf 96px, und genau deshalb wirkte auf der echten Seite jede Farbe leiser: sie lag auf halb so viel Flaeche. Lautstaerke ist Farbe mal Flaeche. ABER die Groesse darf nicht am Fenster haengen, sondern muss an der SPALTE haengen. Auf dieser Seite stehen Headlines in sehr unterschiedlich breiten Containern: im Sektionskopf sind es 992px, in einer Split-Spalte nur 509px. Mit einer reinen vw-Regel brach "Warum Matcha neben dem Kaffee steht" in fuenf Zeilen, weil 96px in eine halb so breite Spalte gezwungen wurden. Deshalb Container Queries: die Schrift misst sich an ihrem Container (cqi), nicht am Fenster. Gleiche Zeilenlaenge ueberall, ohne pro Stelle eine Sonderregel zu schreiben. Die vw-Fassung bleibt als Rueckfall stehen, falls ein Browser die Einheit nicht kennt. Die Hero-Ebene bleibt eine Stufe darueber, sonst kippt die Rangfolge. */ .h-section{font-size:clamp(2.1rem,5.2vw,3.6rem)} .h-display{font-size:clamp(2.4rem,6vw,4.4rem)} @supports (container-type: inline-size){ /* Jede Stelle, an der eine Headline in einer eigenen Spalte sitzt, wird zum Messpunkt. Ohne diese Zeile misst cqi am naechsten Vorfahren, und das waere wieder die volle Seitenbreite. */ .section-head,.split-body,.ed__head,.aufbau-grid > div,.hero-inner{container-type:inline-size} /* 9,2cqi ergibt rund 20 Zeichen pro Zeile: 91px im breiten Sektionskopf, 56px in der schmalen Split-Spalte. Beides sind zwei bis drei Zeilen. */ .h-section{font-size:clamp(2.1rem,9.2cqi,6rem)} .h-display{font-size:clamp(2.4rem,10cqi,6.6rem)} } /* Der Kicker waechst leicht mit, sonst haengt er wie eine Fussnote unter der nun doppelt so grossen Zeile. */ .eyebrow{font-size:.76rem;letter-spacing:.26em} /* Die Hero-Headline bekommt Gloock unten an ihrer eigenen Regel (.hero h1), nicht hier. Sonst gewinnt die spaetere Regel und die Schrift bleibt sitzen. */ /* Akzentwoerter in der Signalfarbe. WICHTIG: kit.css setzt .ac auf --accent, und das ist Vamoras Taupe. Ohne diese Zeile bleibt jedes Akzentwort graubraun und sieht auf Sand wie ausgegraut aus. */ .ac{color:var(--signal)} /* Auf dunklem Grund traegt der satte Ton nicht, er versinkt im Braun. Dort laeuft die aufgehellte Stufe. UMSCHALTER: bis zum 11.08.2026 standen die Akzentwoerter auf dunklem Grund im Sandgold (Variante A), seitdem im Gruen (Variante B, Till entschieden). Damit A jederzeit wieder sichtbar ist, ohne 18 Stellen im HTML anzufassen, haengt die Farbe an EINEM Token. Zurueckschalten heisst: am das Attribut data-akzent="sandgold" setzen, sonst nichts. */ /* 13.08.2026, Till: will den dunklen Glut-Ton auf Dunkel mit eigenen Augen sehen, statt es an der Messzahl zu glauben. Deshalb steht der Umschalter jetzt auf --signal, demselben Ton wie auf hellen Flaechen. Messwert dazu, damit die Zahl neben der Anschauung steht: Glut auf dem Dunkelbraun hat 1,98 Kontrast (grosse Schrift braucht 3,0, Kleinschrift 4,5), der Kicker in Kleinschrift ist damit deutlich unter der Schwelle. Zweite Runde am 13.08.: Glut auf Dunkel war Till "zu rot", der alte Lachs "zu coral". Beides zeigt in dieselbe Richtung: gesucht ist ein Ton, der heller als Glut steht (damit lesbarer) und dabei WENIGER Rosa hat als Lachs. Rosa entsteht, wenn Blau nahe an Gruen liegt; zieht man Blau weiter herunter, kippt der Ton ins Kupfer-Orange statt ins Coral. Genau das ist --glut-warm: Blau liegt 44 Punkte unter Gruen (Lachs nur 21), und der Kontrast steigt trotzdem von 1,98 auf 3,06. ENTSCHIEDEN am 13.08. nach Sichtvergleich der sechs Stufen: --ziegel. Till hat Kupfer gesehen und die Stufe darunter gewaehlt, also naeher am Glut, aber ohne dessen Haerte. Messwert dazu, bewusst so genommen: 2,31 auf dem Dunkelbraun, unter der Schwelle von 3,0 fuer grosse Schrift. Die Anschauung schlaegt hier die Norm, Till erkennt es auf seinen Geraeten gut. Wenn spaeter Zweifel kommen (Handy in der Sonne, Rot-Gruen-Schwaeche), sind --glut-warm (3,06) und --blush (4,53) einen Wechsel entfernt. NACHTRAG selber Tag: Ziegel lief kurz auch auf hell, als einzige Marken- Signalfarbe. Zurueckgenommen auf Tills Wort, auf hell steht wieder Glut. Ziegel ist damit der Ton NUR fuer dunkle Flaechen und lebt als eigener Token in der Farbtabelle oben, nicht hier, damit die Farbe an einer Stelle steht. Alle Stufen bleiben als Umschalter am erreichbar: data-akzent="kupfer" | "glut" | "lachs" | "sandgold". */ :root{--glut-warm:#E5794D;--akzent-dunkel:var(--ziegel)} [data-akzent="kupfer"]{--akzent-dunkel:var(--glut-warm)} [data-akzent="glut"]{--akzent-dunkel:var(--signal)} [data-akzent="lachs"]{--akzent-dunkel:var(--signal-hell)} [data-akzent="sandgold"]{--akzent-dunkel:var(--blush)} .section--dark .ac,.hero .ac,.hero h1 em{color:var(--akzent-dunkel)} /* Der Kicker ueber der Headline traegt dieselbe Farbe. Bliebe er im alten Taupe stehen, saehe er neben der gruenen Headline vergessen aus. Die vorangestellte Nummer bleibt bewusst gedaempft, sie ist Ordnung, kein Signal. */ /* 13.08.2026, Till: die abgedunkelte Stufe war ihm "einfach zu rot", eine Warnfarbe soll die Seite nicht haben. Also laeuft ab jetzt AUCH die Kleinschrift auf Ziegel, es gibt nur noch eine Signalfarbe. Preis, bewusst in Kauf genommen: Ziegel kommt auf Sand auf 3,57, noetig waeren fuer Kleinschrift 4,5. Die tiefe Stufe bleibt als Token bestehen, der Weg zurueck ist eine Zeile. */ .eyebrow{color:var(--signal)} /* Auf dunklem Grund am selben Umschalter wie das Akzentwort, sonst stuenden Kicker und Headline in Variante A in zwei verschiedenen Farben. */ .section--dark .eyebrow{color:var(--akzent-dunkel)} .section--dark .eyebrow .num{color:var(--on-dark-mute)} html,body{overflow-x:clip} html{scroll-behavior:smooth} /* Der Header liegt fest oben, deshalb brauchen alle Sprungziele Abstand. */ section[id]{scroll-margin-top:96px} /* ── Unbestaetigte Zahlen ── Bis 10.08.2026 trug jede von Lu noch nicht bestaetigte Zahl die Klasse .tbd: gestrichelte Unterlinie plus Tooltip "Noch nicht bestaetigt". Das war eine interne Arbeitsmarkierung und stand auf der Live-Seite (Besucher lasen im Tooltip, dass die Preise vom Wettbewerb abgeleitet sind). Markierung und Styles sind deshalb raus, die Zahlen selbst blieben unveraendert. Herleitung und Status der Zahlen weiterhin: ../offene-zahlen.md */ /* ── Bildfläche ohne Bild ── Steht überall dort, wo später ein echtes Foto hinkommt. Bewusst KEIN erzeugtes Bild, weil zu viele davon hintereinander den Auftritt billig wirken lassen (Till, 06.08.2026). Motivtext kommt aus ../foto-briefing.md. */ .imgslot{position:relative;display:flex;flex-direction:column;justify-content:flex-end; border:1px dashed rgba(var(--accent-rgb),.45);border-radius:var(--radius-card); background:linear-gradient(180deg,var(--card-top),var(--card-bottom)); padding:1.4rem;min-height:220px;overflow:hidden} .imgslot__label{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-label)} .imgslot__motiv{margin-top:.5rem;font-size:.92rem;line-height:1.55;color:var(--text-mute)} .imgslot::before{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%); width:46px;height:34px;border:1.6px solid rgba(var(--accent-rgb),.35);border-radius:5px} .imgslot::after{content:"";position:absolute;left:50%;top:44%;transform:translate(-2px,2px); width:11px;height:11px;border-radius:50%;background:rgba(var(--blush-rgb),.55)} .section--dark .imgslot{border-color:rgba(242,233,220,.32);background:rgba(242,233,220,.05)} .section--dark .imgslot__label,.section--dark .imgslot__motiv{color:var(--on-dark-mute)} /* ── Header-Feinschliff (Komponente kommt aus kit.css) ── */ .site-header__nav a{font-family:var(--font-body)} /* Untermenü unter "Anlässe": fuehrt zu den fuenf Anlass-Seiten (06.08.2026). Liegt bewusst hier und nicht in kit.css, damit die Kit-Komponente sauber bleibt. */ .nav-sub{position:relative;display:flex;align-items:center} .nav-sub__menu{ position:absolute;top:100%;left:6px;z-index:40;min-width:230px; display:flex;flex-direction:column;padding:8px; background:var(--surface);border:1px solid var(--line);border-radius:14px; box-shadow:0 24px 46px -20px rgba(var(--shadow-rgb),.34); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .26s ease,transform .26s ease,visibility .26s; } .nav-sub:hover .nav-sub__menu, .nav-sub:focus-within .nav-sub__menu{opacity:1;visibility:visible;transform:translateY(0)} .nav-sub__menu a{ padding:10px 12px;border-radius:9px;text-transform:none;letter-spacing:.02em; font-size:.82rem;font-weight:500;color:var(--text);white-space:nowrap; } .nav-sub__menu a:hover{background:var(--surface-2);color:var(--text-strong)} .nav-sub__menu a[aria-current="page"]{color:var(--accent);font-weight:600} /* Steht die aktive Seite im Klappmenue, faerbt sich auch der Punkt darueber ein, damit genau eine Spalte in der Leiste markiert ist. */ .nav-sub:has(.nav-sub__menu a[aria-current="page"]) > a{color:var(--accent)} @media(max-width:960px){ /* Im aufgeklappten Menue steht die Liste offen darunter, eingerueckt. */ .nav-sub{display:block} .nav-sub > a{display:block;padding:15px 2px;border-bottom:1px solid var(--line-soft)} .nav-sub__menu{ position:static;opacity:1;visibility:visible;transform:none;min-width:0; background:none;border:none;box-shadow:none;padding:2px 0 2px 14px; } .nav-sub__menu a{padding:11px 2px;border-bottom:1px solid var(--line-soft);border-radius:0;font-size:.8rem} } .site-header__logo{align-items:center;gap:13px} .site-header__mark{height:46px;width:auto;display:block} .site-header__type{font-family:var(--font-logo);font-weight:500;font-size:1.16rem; letter-spacing:.3em;color:var(--text-strong);line-height:1} .site-header__type-sub{display:block;font-size:.5em;letter-spacing:.62em; color:var(--text-mute);margin-top:5px} /* ── Hero (Start + Unterseiten) ── */ .hero{position:relative;min-height:calc(100vh - 79px);display:flex;align-items:flex-end;overflow:hidden} .hero--sub{min-height:min(62vh,560px)} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:88% 62%} .hero-scrim{position:absolute;inset:0;z-index:1; background: linear-gradient(100deg,rgba(46,40,35,.72) 0%,rgba(46,40,35,.38) 40%,rgba(46,40,35,0) 66%), linear-gradient(180deg,rgba(80,72,66,.16) 0%,rgba(80,72,66,0) 34%,rgba(46,40,35,.28) 68%,rgba(46,40,35,.74) 100%)} .hero h1,.hero-sub{text-shadow:0 2px 28px rgba(46,40,35,.35)} .hero-inner{position:relative;z-index:2;padding-bottom:clamp(3rem,7vh,5.5rem)} .hero-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.68rem;letter-spacing:.34em; text-transform:uppercase;color:#F2E9DC;font-weight:600} .hero-eyebrow::before{content:"";width:34px;height:1px;background:var(--blush)} /* Display-Schrift Gloock (11.08.2026). Sie steht tiefer und traegt mehr Flaeche als Marcellus, deshalb engere Zeile und leicht negative Laufweite. */ .hero h1{font-family:var(--font-display);font-weight:400;color:#FDF8F0; font-size:clamp(2.8rem,5.6vw,4.9rem);line-height:.98;letter-spacing:-.012em; margin:.9rem 0 1.1rem;max-width:14ch} /* Der Unterseiten-Hero muss mitwachsen, seit die Sektions-Headlines gross laufen. Sonst ist die Ueberschrift der Seite kleiner als jede Zwischen- ueberschrift darunter, und die Rangfolge kippt. */ .hero--sub h1{font-size:clamp(2.4rem,7vw,5.8rem);max-width:16ch} /* Farbe kommt aus dem Umschalter oben (Variante A Sandgold / B Gruen). */ .hero h1 em{font-style:normal;color:var(--akzent-dunkel)} .hero-sub{color:rgba(253,248,240,.94);font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.65; max-width:34rem;margin:0 0 1.9rem} .hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center} .hero-note{display:flex;align-items:center;gap:.55rem;margin-top:1.6rem; font-size:.82rem;color:rgba(242,233,220,.85);letter-spacing:.02em} .hero-note .pulse{width:8px;height:8px;border-radius:50%;background:var(--blush);flex:0 0 auto; box-shadow:0 0 0 0 rgba(var(--blush-rgb),.6);animation:pulse 2.4s infinite} /* Hero liegt auf dunklem Bild: Ghost-Button wie in dunklen Sektionen behandeln */ .hero .btn-ghost{ color:var(--on-dark); background-color:rgba(255,255,255,.08); background-image:linear-gradient(to bottom,rgba(255,255,255,.16),rgba(255,255,255,.02) 50%,rgba(0,0,0,.06)); border:1px solid rgba(255,255,255,.32); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.2),0 6px 18px rgba(0,0,0,.24); } .hero .btn-ghost:hover{border-color:rgba(255,255,255,.55);background-color:rgba(255,255,255,.14)} /* Status-Pill im Hero: sagt sofort, dass Vamora gerade entsteht */ .status-pill{display:inline-flex;align-items:center;gap:.6rem; background:rgba(46,40,35,.5);border:1px solid rgba(242,233,220,.28); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); padding:9px 17px 9px 14px;border-radius:999px; font-size:.72rem;letter-spacing:.08em;color:#F6F0E6;font-weight:500} .status-pill .pulse{width:8px;height:8px;border-radius:50%;background:var(--blush);flex:0 0 auto; box-shadow:0 0 0 0 rgba(var(--blush-rgb),.6);animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--blush-rgb),.55)}70%{box-shadow:0 0 0 9px rgba(var(--blush-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--blush-rgb),0)}} .hero-visual-tag{position:absolute;right:clamp(1rem,3vw,2.4rem);bottom:1.1rem;z-index:2; font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,233,220,.55)} /* ── Hero mit echtem Foto + Verlauf (Startseite, seit 10.08.2026) ─────────── Aufbau wie im KOYO-Hero: das Motiv liegt vollflaechig im Hintergrund und ist nach rechts geschoben, darueber ein horizontaler Scrim, der links deckend ist (Ueberschrift lesbar) und nach rechts aufklart (Anhaenger sichtbar). Bei KOYO ist der Scrim cremefarben, hier dunkelbraun, weil der Hero heller Text auf dunklem Grund ist. */ /* Fuer Screenreader und Suchmaschinen da, visuell nicht (Hero-H1). */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .hero--marke .hero-bg{background:linear-gradient(168deg,#4A423B 0%,#3A322C 46%,#2E2823 100%)} /* Lus Teaser-Poster rechts im Hero, per mask-image in die Markenflaeche ausblendend (ein CSS-Scrim koennte das Bild nur abdunkeln und liesse eine Kante stehen). Unten buendig verankert: der Signoff "VAMORA BAR / more than a bar." darf nie angeschnitten werden, beschnitten wird allein die Hofdecke oben. Ueber die Hero-Hoehe hinaus skaliert (height:122%), damit das Poster Praesenz behaelt statt als schmaler Streifen zu stehen. */ /* Groesse aus der Hero-Hoehe abgeleitet (height + aspect-ratio): das Poster bleibt beim Breiterziehen des Fensters unveraendert stehen, statt mit- zuwachsen — genau das wollte Till (10.08.). Rechts ein Freiraum, damit es nicht am Rand klebt, sondern Richtung Mitte rueckt. */ .hero-poster{position:absolute;right:clamp(1.5rem,5vw,6rem);bottom:0; height:127%;aspect-ratio:1086/1448;margin:0;z-index:1; -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.72) 4%,#000 12%,#000 88%,rgba(0,0,0,.72) 96%,transparent 100%); mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.72) 4%,#000 12%,#000 88%,rgba(0,0,0,.72) 96%,transparent 100%)} .hero-poster img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block} /* Textblock unten links wie im bisherigen Hero (Till, 10.08.): Position vom alten Layout, Schriftgrad als Mittelmass zwischen dem alten (4,9rem) und der kleinen Split-Fassung (4,1rem). Dieselben Werte gelten in der Vergleichs- variante, damit dort nur das Bildkonzept den Unterschied macht. */ /* Text mittig zur Hero-Hoehe, Schriftgrad bleibt wie in der Vergleichsvariante (Till, 10.08.). */ .hero--marke{align-items:center} .hero--marke .hero-inner{padding-bottom:0} .hero--marke .hero-grid{grid-template-columns:minmax(0,1fr);align-items:center} .hero--marke .hero-grid>div{max-width:min(40rem,50%)} /* Milchige Glasflaeche ueber der GANZEN linken Hero-Seite (keine Karte, Till 10.08.): gleiches Rezept wie die Liquid-Glass-Buttons im Kit (Blur + Saturate, Innenlicht an der Oberkante). Sie liegt ueber dem Poster und wird per mask-image nach rechts ausgeblendet, sodass das Bild hinter dem Glas durchschimmert und die Seite Tiefe bekommt. */ .hero-glasflaeche{ position:absolute;top:0;bottom:0;left:0;width:64%;z-index:2;pointer-events:none; background:linear-gradient(105deg,rgba(253,248,240,.13) 0%,rgba(253,248,240,.07) 46%,rgba(253,248,240,.02) 78%,rgba(253,248,240,0) 100%); -webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.16); -webkit-mask-image:linear-gradient(to right,#000 0%,#000 52%,rgba(0,0,0,.55) 78%,transparent 100%); mask-image:linear-gradient(to right,#000 0%,#000 52%,rgba(0,0,0,.55) 78%,transparent 100%)} /* Text ueber dem Glas. */ .hero--marke .hero-inner{z-index:3} .hero--startseite h1{font-size:clamp(2.7rem,4.9vw,4.5rem)} .hero--startseite .hero-sub{font-size:clamp(1.04rem,1.3vw,1.14rem);max-width:31rem} /* Status-Block im Start-Hero (12.08.2026, Go-Live-Plan): beantwortet die Buchbarkeits-Frage im ersten Viewport und traegt den Vormerkungs-CTA. */ .hero-status{margin-top:2rem;display:flex;flex-direction:column;gap:1.15rem;align-items:flex-start} /* Der Start-Hero liegt auf der dunklen Markenflaeche: heller Text noetig, var(--text-strong) war dort unsichtbar (QA-Fund 12.08.). */ .hero-status p{font-size:clamp(.95rem,1.15vw,1.03rem);line-height:1.6;color:var(--on-dark-mute);max-width:29rem} .hero-status p strong{color:var(--on-dark)} .hero-status p strong{font-weight:600} .hero-status p a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent)} .hero-status p a:hover{color:var(--accent)} /* Die rechte Spalte war 4fr, solange sie leer war. Seit das echte Foto darin liegt, bekommt sie mehr Gewicht, sonst geht das Bild neben der Ueberschrift unter (Till, 10.08.2026). */ .hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,4vw,3.4rem);align-items:end} /* ── Live-Band: Instagram/TikTok direkt unter dem Einstieg ── */ .livestrip{background:var(--surface);border-bottom:1px solid var(--line)} .livestrip__inner{display:flex;align-items:center;justify-content:space-between; gap:1.4rem 2rem;flex-wrap:wrap;padding-block:20px} .livestrip__text{display:flex;align-items:center;gap:.7rem; font-size:1rem;line-height:1.5;color:var(--text-strong);font-weight:500} .livestrip__text .pulse{width:9px;height:9px;border-radius:50%;background:var(--blush);flex:0 0 auto; box-shadow:0 0 0 0 rgba(var(--blush-rgb),.6);animation:pulse 2.4s infinite} .livestrip__links{display:flex;gap:.7rem;flex-wrap:wrap} .social-btn{display:inline-flex;align-items:center;gap:.7rem; background:linear-gradient(180deg,var(--card-top) 0%,var(--card) 55%,var(--card-bottom) 100%); border:1px solid var(--line);border-radius:var(--radius-pill);padding:10px 20px 10px 15px; color:var(--text-strong); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(var(--shadow-rgb),.05), 0 10px 20px -14px rgba(var(--shadow-rgb),.28); transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .4s ease} .social-btn:hover{transform:translateY(-3px);border-color:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 32px -16px rgba(var(--shadow-rgb),.4)} .social-btn svg{width:22px;height:22px;flex:0 0 auto;color:var(--text-strong)} .social-btn span{display:flex;flex-direction:column;line-height:1.25} .social-btn strong{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase; color:var(--text-mute);font-weight:600} .social-btn span{font-size:.94rem;font-weight:500} /* Social-Handles im aufgeklappten Mobil-Menue */ .site-header__nav-social{display:none} /* ── Sektions-Bausteine ── */ /* Seit die Headlines gross laufen (11.08.2026) darf der Kopf nicht mehr bei 46rem enden: eine 96px-Zeile braecke darin in vier Zeilen. Die Headline laeuft jetzt breit, der Fliesstext darunter behaelt seine Lesebreite. */ .section-head{max-width:62rem;margin-bottom:clamp(2.2rem,4vw,3.4rem)} .section-head p{max-width:46rem;margin-top:1.1rem;font-size:1.02rem;line-height:1.7;color:var(--text)} .h-section{margin-top:.9rem} /* Asymmetrisches Split-Layout (Regel 8) */ .split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:center} .split--rev{grid-template-columns:minmax(0,5fr) minmax(0,6fr)} .split-media{position:relative;border-radius:var(--radius-card);overflow:hidden;aspect-ratio:4/3; box-shadow:0 2px 4px rgba(var(--shadow-rgb),.05),0 24px 44px -20px rgba(var(--shadow-rgb),.28)} .split-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94) contrast(1.03)} .split-media .tag{position:absolute;left:14px;bottom:12px;z-index:2;font-size:.6rem;letter-spacing:.2em; text-transform:uppercase;color:rgba(253,248,240,.85);background:rgba(46,40,35,.42); padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px)} /* Echtes Foto in Sektion 02 "Die Bar": hochkant wie das Poster, gleiche Rundung und Tiefe wie .split-media, aber ohne dessen 4:3-Zwang. */ .bar-foto{position:relative;margin:0;border-radius:var(--radius-card);overflow:hidden; box-shadow:0 2px 4px rgba(var(--shadow-rgb),.05),0 24px 44px -20px rgba(var(--shadow-rgb),.28)} .bar-foto img{width:100%;height:auto;display:block} .split-body p{font-size:1rem;line-height:1.75;color:var(--text);margin-top:1rem} .split-body .lead{font-size:1.08rem} /* Tages-Rhythmus-Zeile (Konzept) */ .rhythm{display:flex;gap:1rem;margin-top:1.6rem;flex-wrap:wrap} .rhythm span{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;letter-spacing:.14em; text-transform:uppercase;color:var(--text-mute);border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:var(--card-top)} .rhythm .dot{width:7px;height:7px;border-radius:50%;background:var(--blush)} /* ── Die drei Module: gestapelte Reihen, nicht drei gleiche Kacheln ── */ .modul-grid{display:grid;gap:1.1rem} .modul{display:grid;grid-template-columns:96px 1fr;gap:clamp(1rem,3vw,2.4rem); background:linear-gradient(180deg,var(--card-top) 0%,var(--card) 52%,var(--card-bottom) 100%); border:1px solid var(--line);border-radius:var(--radius-card); padding:clamp(1.6rem,3vw,2.4rem) clamp(1.4rem,3vw,2.6rem); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -14px 26px -20px rgba(var(--shadow-rgb),.2), 0 2px 4px rgba(var(--shadow-rgb),.05), 0 16px 30px -18px rgba(var(--shadow-rgb),.22); transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1),border-color .45s} .modul:hover{transform:translateY(-5px) scale(1.006);border-color:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(var(--shadow-rgb),.05), 0 34px 60px -24px rgba(var(--shadow-rgb),.4)} .modul--feature{border-color:var(--blush)} .modul__num{font-family:var(--font-head);font-size:clamp(2.4rem,4vw,3.4rem);line-height:.9; color:var(--blush);letter-spacing:-.02em} .modul__body h3{font-family:var(--font-head);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.15;color:var(--text-strong)} .modul__lead{font-size:1rem;line-height:1.65;color:var(--text);margin-top:.6rem;max-width:44rem} .modul__body ul{list-style:none;margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.5rem .7rem} .modul__body ul li{font-size:.83rem;line-height:1.4;color:var(--text); border:1px solid var(--line);background:rgba(255,255,255,.5); padding:7px 13px;border-radius:999px} .modul-note{margin-top:1.8rem;max-width:48rem;font-size:.92rem;line-height:1.7;color:var(--text-mute)} /* ══════════════════════════════════════════════════════════════════ Der Baukasten (Sektion 01 "Eure Bar") Loest die drei Module ab. Lu arbeitet komplett individuell, deshalb kein Paket-Denken, sondern Bausteine zum Durchstoebern, die beim Lesen Ideen liefern. Jede Karte traegt eine echte Checkbox, die per form-Attribut direkt zum Anfrage-Formular gehoert. Dadurch landet die Auswahl ohne JS-Synchronisation in der FormData. ══════════════════════════════════════════════════════════════════ */ .kit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:2.2rem} .kit-card{position:relative;display:block;cursor:pointer; background:linear-gradient(180deg,var(--card-top) 0%,var(--card) 52%,var(--card-bottom) 100%); border:1px solid var(--line);border-radius:var(--radius-card); padding:clamp(1.5rem,2.4vw,1.9rem) clamp(1.3rem,2.2vw,1.7rem); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -14px 26px -20px rgba(var(--shadow-rgb),.2), 0 2px 4px rgba(var(--shadow-rgb),.05), 0 16px 30px -18px rgba(var(--shadow-rgb),.22); transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1),border-color .3s} .kit-card:hover{transform:translateY(-5px) scale(1.006);border-color:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(var(--shadow-rgb),.05), 0 34px 60px -24px rgba(var(--shadow-rgb),.4)} /* Volle Breite fuer die Ausbaustufe. Sie steht bewusst NICHT gleichwertig neben den anderen, sonst ankert sie das uebrige Angebot nach unten. */ .kit-card--wide{grid-column:1/-1} .kit-card--wide .kit-card__head{max-width:46rem} /* Die Checkbox selbst ist unsichtbar, aber fokussierbar und bedienbar */ .kit-card input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} .kit-card:focus-within{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:3px} /* z-index Pflicht: das Bild-Visual steht spaeter im DOM und wuerde den Haken sonst verdecken. Der Ring liegt auf Fotos, deshalb deckender Hintergrund plus Schatten, damit er auf hellen wie dunklen Motiven lesbar bleibt. */ .kit-card__tick{position:absolute;top:16px;right:16px;z-index:3;width:26px;height:26px;border-radius:50%; border:1.5px solid rgba(255,255,255,.85);background:rgba(80,72,66,.42); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); box-shadow:0 2px 8px rgba(var(--shadow-rgb),.35); display:grid;place-items:center;transition:background .28s,border-color .28s,transform .28s} .kit-card__tick svg{width:13px;height:13px;stroke:#FFFDF8;stroke-width:2.6;fill:none; stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity .22s,transform .28s cubic-bezier(.2,1.5,.4,1)} .kit-card:hover .kit-card__tick{border-color:#FFFDF8;background:rgba(80,72,66,.6)} /* Bildslot oben in der Karte. Muster uebernommen von .step-visual aus der till-weilemann-website: dort entsteht die Tiefe genau dadurch. Funktioniert mit und mit Inline-SVG. Ohne Inhalt bleibt eine getoente Flaeche stehen, die nicht wie ein Fehler aussieht. */ .kit-card__visual{position:relative;height:150px;margin:-.4rem 0 1.15rem;overflow:hidden; border:1px solid var(--line);border-radius:12px; background:linear-gradient(160deg,#F6EEE2 0%,#EADFCB 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -12px 22px -14px rgba(var(--shadow-rgb),.2)} .kit-card__visual img{width:100%;height:100%;object-fit:cover;display:block; filter:saturate(.94) contrast(1.03);transition:transform .6s cubic-bezier(.2,.7,.2,1)} .kit-card:hover .kit-card__visual img{transform:scale(1.045)} .kit-card__visual svg{width:100%;height:100%;display:block} /* Platzhalter, solange kein echtes Bild da ist */ .kit-card__visual--tbd::after{content:attr(data-motiv);position:absolute;inset:0; display:grid;place-items:center;text-align:center;padding:0 14px; font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute); background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(132,117,106,.06) 9px 18px)} /* Die breite Karte legt das Bild NEBEN den Text, nicht darueber. Ueber die volle Breite gestreckt wuerde der Anhaenger mittig zerschnitten, und genau das verbietet Regel 6 des Design-Standards. */ .kit-card--wide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:auto 1fr;column-gap:clamp(1.4rem,3vw,2.4rem);row-gap:0} .kit-card--wide .kit-card__visual{grid-column:1;grid-row:1/3;height:100%;min-height:220px;margin:0} .kit-card--wide .kit-card__visual img{object-position:center 45%} .kit-card--wide .kit-card__head{grid-column:2;grid-row:1;align-self:end} .kit-card--wide ul{grid-column:2;grid-row:2;align-self:start} @media(max-width:820px){ .kit-card--wide{grid-template-columns:1fr;grid-template-rows:auto auto auto} .kit-card--wide .kit-card__visual{grid-column:1;grid-row:1;min-height:170px;margin-bottom:1.15rem} .kit-card--wide .kit-card__head{grid-column:1;grid-row:2} .kit-card--wide ul{grid-column:1;grid-row:3} } .kit-card__head{padding-right:34px} .kit-card h3{font-family:var(--font-head);font-weight:400;font-size:clamp(1.22rem,1.9vw,1.48rem); line-height:1.2;color:var(--text-strong)} .kit-card p{font-size:.94rem;line-height:1.6;color:var(--text);margin-top:.5rem} .kit-card ul{list-style:none;margin-top:1rem;display:flex;flex-wrap:wrap;gap:.45rem .5rem} .kit-card ul li{font-size:.79rem;line-height:1.35;color:var(--text); border:1px solid var(--line);background:rgba(255,255,255,.5); padding:6px 11px;border-radius:999px;transition:border-color .28s,background .28s} /* Ausgewaehlter Zustand: Taupe statt Sandgold, weil der Akzent auf hellem Grund zu wenig Kontrast fuer einen Zustandshinweis haette (1,9:1). */ .kit-card:has(input:checked){border-color:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px var(--accent), 0 2px 4px rgba(var(--shadow-rgb),.05), 0 24px 44px -20px rgba(var(--shadow-rgb),.34)} .kit-card:has(input:checked) .kit-card__tick{background:var(--accent);border-color:#FFFDF8;transform:scale(1.06); box-shadow:0 2px 10px rgba(var(--shadow-rgb),.45)} .kit-card:has(input:checked) .kit-card__tick svg{opacity:1;transform:scale(1)} .kit-card:has(input:checked) ul li{border-color:rgba(var(--accent-rgb),.4);background:rgba(255,255,255,.75)} /* Auswahl-Leiste: erscheint erst, wenn wirklich etwas gewaehlt wurde */ .kit-bar{margin-top:1.6rem;display:none;align-items:center;justify-content:space-between; gap:1.2rem 1.8rem;flex-wrap:wrap; background:linear-gradient(180deg,var(--card-top) 0%,var(--card) 100%); border:1px solid var(--accent);border-radius:var(--radius-card); padding:clamp(1.1rem,2vw,1.4rem) clamp(1.3rem,2.4vw,1.8rem); box-shadow:0 2px 4px rgba(var(--shadow-rgb),.05),0 20px 40px -22px rgba(var(--shadow-rgb),.34)} .kit-bar.is-on{display:flex;animation:kitbar-in .45s cubic-bezier(.2,.8,.3,1)} @keyframes kitbar-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .kit-bar__text{font-size:.95rem;line-height:1.6;color:var(--text);min-width:0} .kit-bar__text strong{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase; color:var(--text-mute);font-weight:600;margin-bottom:.35rem} .kit-bar__list{color:var(--text-strong);font-weight:500} .kit-bar__count{display:none;color:var(--text-strong);font-weight:500} .kit-note{margin-top:1.6rem;max-width:48rem;font-size:.92rem;line-height:1.7;color:var(--text-mute)} /* Spiegel der Baukasten-Auswahl im Formular (dunkle Sektion) */ .form-pick{font-size:.94rem;line-height:1.65;color:var(--on-dark-mute); border:1px solid rgba(242,233,220,.2);border-radius:12px; padding:13px 16px;background:rgba(255,255,255,.04)} .form-pick a{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px} .form-pick.is-filled{color:var(--on-dark);border-color:rgba(242,233,220,.4);background:rgba(255,255,255,.07)} .form-pick.is-filled b{font-weight:500} @media(max-width:1000px){ .kit-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:640px){ .kit-grid{grid-template-columns:1fr;gap:.9rem} /* Mobil klebt die Leiste am unteren Rand. Sie muss deshalb flach bleiben, sonst verdeckt sie die Karte darunter: nur die Anzahl statt der Namen, Button daneben statt darunter. */ .kit-bar{position:sticky;bottom:12px;z-index:5; flex-wrap:nowrap;gap:.9rem;padding:11px 12px 11px 16px;align-items:center} .kit-bar__text{line-height:1.35;font-size:.88rem} .kit-bar__text strong{margin-bottom:.15rem;font-size:.6rem} .kit-bar__list{display:none} .kit-bar__count{display:block} .kit-bar .btn{padding:11px 17px;font-size:.72rem;white-space:nowrap;flex:0 0 auto} } /* Wer Bewegung reduziert haben will, bekommt die Zustaende trotzdem, nur ohne Animation */ @media(prefers-reduced-motion:reduce){ .kit-card,.kit-card__tick,.kit-card__tick svg,.kit-bar.is-on{transition:none;animation:none} .kit-card:hover{transform:none} } /* ── Anlass-Liste (kompakt, statt eigener Unterseiten) ── */ .anlass-liste{margin-top:1.8rem;display:grid;gap:0;max-width:34rem} .anlass-liste li{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem; padding:15px 0;border-bottom:1px solid var(--line)} .anlass-liste li:last-child{border-bottom:none} .anlass-liste strong{font-family:var(--font-head);font-weight:400;font-size:1.22rem;color:var(--text-strong)} .anlass-liste span{font-size:.86rem;color:var(--text-mute);text-align:right} /* ── Umbau-Karussell ──────────────────────────────────────────────────────── Bis 06.08.2026 lag die Strecke auf einem Bogen, der sich beim Scrollen drehte. Ersetzt durch ein normales Karussell mit Pfeilen: es bewegt sich nur auf Bedienung, nicht auf Scroll. Grundzustand ist die Reihe zum Wischen (auch ohne JS), die Pfeile blendet js/site.js dazu. Die Bildflaechen sind Platzhalter im gleichen Muster wie .kit-card__visual --tbd, damit spaeter nur der Inhalt getauscht wird. */ .umbau{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden} .umbau-head .hero-ctas{margin-top:2rem} .karussell{position:relative;margin-top:clamp(2.4rem,5vw,3.6rem)} .karussell-spur{display:flex;gap:1.1rem; padding:.4rem clamp(1.1rem,5vw,3rem) 1.4rem; overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none} .karussell-spur::-webkit-scrollbar{display:none} @media (prefers-reduced-motion:reduce){.karussell-spur{scroll-behavior:auto}} .umbau-card{flex:0 0 clamp(240px,72vw,340px);scroll-snap-align:center;margin:0} .umbau-card__visual{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden; border:1px solid rgba(242,233,220,.18); background:linear-gradient(160deg,rgba(242,233,220,.09) 0%,rgba(242,233,220,.03) 100%)} .umbau-card__visual img{width:100%;height:100%;object-fit:cover;display:block} /* Platzhalter: gleiche Schraffur wie im Baukasten, nur auf dunklem Grund. */ .umbau-card__visual.is-tbd::after{content:attr(data-motiv);position:absolute;inset:0; display:grid;place-items:center;text-align:center;padding:0 14px; font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,233,220,.5); background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(242,233,220,.05) 9px 18px)} /* Pfeile: liegen ueber der Spur, kommen erst per JS dazu (.hat-pfeile), damit ohne JS niemand auf tote Knoepfe klickt. */ .karussell-pfeil{display:none} .karussell.hat-pfeile .karussell-pfeil{display:grid;place-items:center; position:absolute;top:calc(50% - 1.4rem);transform:translateY(-50%); width:46px;height:46px;border-radius:50%;cursor:pointer; border:1px solid rgba(242,233,220,.28); background:rgba(43,36,29,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px); color:var(--on-dark); box-shadow:0 6px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(242,233,220,.16); transition:background .18s ease,border-color .18s ease,opacity .18s ease,transform .18s ease} .karussell-pfeil svg{width:20px;height:20px} .karussell-pfeil--zurueck{left:clamp(.5rem,2.5vw,1.6rem)} .karussell-pfeil--vor{right:clamp(.5rem,2.5vw,1.6rem)} .karussell.hat-pfeile .karussell-pfeil:hover{background:rgba(43,36,29,.9); border-color:rgba(242,233,220,.5);transform:translateY(-50%) scale(1.06)} .karussell-pfeil:focus-visible{outline:2px solid var(--blush);outline-offset:3px} /* Am Anfang bzw. Ende tritt der jeweilige Pfeil zurueck, statt zu verschwinden: ein springendes Layout ist unruhiger als ein blasser Knopf. */ .karussell.hat-pfeile .karussell-pfeil[disabled]{opacity:.28;cursor:default;pointer-events:none} /* ── Aufbau-Sektion mit Zeitstrahl ── */ .aufbau-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,5rem);align-items:start} .aufbau-lead{font-size:1.1rem;line-height:1.7;color:var(--on-dark);margin-top:1.2rem;max-width:34rem} .aufbau-text{font-size:.98rem;line-height:1.75;color:var(--on-dark-mute);margin-top:1rem;max-width:34rem} .timeline{list-style:none;margin-top:.6rem;position:relative;padding-left:26px} .timeline::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:rgba(242,233,220,.2)} .timeline__item{position:relative;padding:16px 0} .timeline__item::before{content:"";position:absolute;left:-26px;top:22px;width:11px;height:11px; border-radius:50%;background:var(--footer);border:1.5px solid rgba(242,233,220,.35)} .timeline__item.is-done::before{background:var(--on-dark-mute);border-color:var(--on-dark-mute)} .timeline__item.is-now::before{background:var(--blush);border-color:var(--blush); box-shadow:0 0 0 0 rgba(var(--blush-rgb),.55);animation:pulse 2.4s infinite} .timeline__when{display:block;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase; color:var(--blush);font-weight:600;margin-bottom:.35rem} .timeline__item:not(.is-now):not(.is-done) .timeline__when{color:var(--on-dark-mute)} .timeline__what{display:block;font-family:var(--font-head);font-size:1.14rem;line-height:1.4;color:#F6F0E6} .timeline__item:not(.is-now):not(.is-done) .timeline__what{color:var(--on-dark-mute)} /* ── Ablauf-Schritte ── */ .steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem);counter-reset:s} .step{position:relative;padding-top:1.6rem;border-top:2px solid var(--line)} .step__num{position:absolute;top:-.9rem;left:0;width:34px;height:34px;border-radius:50%; background:var(--ink);color:var(--surface);display:flex;align-items:center;justify-content:center; font-size:.82rem;font-weight:700} .step h3{font-family:var(--font-head);font-weight:400;font-size:1.35rem;color:var(--text-strong);margin-top:1.2rem} .step p{font-size:.94rem;line-height:1.7;color:var(--text);margin-top:.6rem} /* Anlass-Karten (Bild-Teaser) */ .occasions{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:1.4rem} .occasion{position:relative;display:block;border-radius:var(--radius-card);overflow:hidden;min-height:340px; box-shadow:0 2px 4px rgba(var(--shadow-rgb),.05),0 20px 38px -18px rgba(var(--shadow-rgb),.26); transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1)} .occasion:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 34px 60px -24px rgba(var(--shadow-rgb),.4)} .occasion img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.03);transition:transform .6s cubic-bezier(.2,.7,.2,1)} .occasion:hover img{transform:scale(1.045)} /* Der Verlauf traegt die Schrift auch auf hellen Motiven, deshalb frueh und satt. */ .occasion::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,40,35,0) 22%,rgba(46,40,35,.42) 58%,rgba(46,40,35,.88) 100%)} .occasion-label{position:absolute;left:22px;right:22px;bottom:20px;z-index:2} .occasion-label .kicker{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--blush)} .occasion-label h3{font-family:var(--font-head);font-weight:400;font-size:1.7rem;color:#FDF8F0;margin-top:.3rem} .occasion-label .go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;font-size:.8rem;color:rgba(253,248,240,.85)} .occasion-label .go .arr{transition:transform .3s} .occasion:hover .go .arr{transform:translateX(4px)} .occasions{margin-top:2.4rem} /* ── Anlass-Kacheln mit Motiv (Till, 11.08.2026) ──────────────────────────── Historie: am 06.08. standen die Kacheln bewusst ohne Bild (fuenf Anhaenger- Motive untereinander wirkten generiert), danach lag eine Klappen-Variante im CSS, die nie ins HTML kam. Till hat sich am 11.08. fuer offene Motive entschieden, weil der Sektion sonst jede visuelle Wirkung fehlt. Die beiden alten Varianten sind entfernt statt auskommentiert, sie stehen in der Historie (Commit f6b59ba und aelter). Der Verlauf laeuft auf zwei Achsen, und beide werden gebraucht: der senkrechte allein reichte nicht, weil die breite Festival-Kachel das Motiv so beschneidet, dass der helle Anhaenger genau hinter dem Text lag. Der waagerechte von links haelt die Textspalte dunkel, egal wie das Motiv sitzt. */ .occasions--bild .occasion{min-height:200px;display:flex;align-items:flex-end; border:1px solid var(--line);padding:1.6rem 1.5rem;isolation:isolate} .occasions--bild .occasion::after{display:none} .occasions--bild .occasion-media{position:absolute;inset:0;z-index:0;overflow:hidden} .occasions--bild .occasion-media img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;filter:saturate(.94) contrast(1.03); transition:transform .7s cubic-bezier(.2,.7,.2,1)} .occasions--bild .occasion-media::after{content:"";position:absolute;inset:0; background: linear-gradient(90deg,rgba(46,40,35,.72) 0%,rgba(46,40,35,.34) 34%,rgba(46,40,35,0) 62%), linear-gradient(180deg,rgba(46,40,35,.08) 12%,rgba(46,40,35,.46) 48%, rgba(46,40,35,.82) 76%,rgba(46,40,35,.96) 100%)} .occasions--bild .occasion-label{position:relative;z-index:2;left:auto;right:auto;bottom:auto;width:100%} .occasions--bild .occasion-label .kicker{color:#F2D3B4;text-shadow:0 1px 10px rgba(28,24,20,.7)} .occasions--bild .occasion-label h3{color:#FDF8F0;font-size:1.55rem} .occasions--bild .occasion-label .go{color:rgba(253,248,240,.88)} .occasions--bild .occasion:hover, .occasions--bild .occasion:focus-visible{transform:translateY(-6px) scale(1.006)} .occasions--bild .occasion:hover .occasion-media img, .occasions--bild .occasion:focus-visible .occasion-media img{transform:scale(1.05)} @media (prefers-reduced-motion:reduce){ .occasions--bild .occasion-media img{transition:none} .occasions--bild .occasion:hover .occasion-media img, .occasions--bild .occasion:focus-visible .occasion-media img{transform:none} } /* Ein Abschnitt je Anlass, Titel links, Inhalt rechts. */ .occ-details{margin-top:3.4rem;display:grid;gap:0} .occ-detail{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1.4rem,4vw,3.4rem); padding:2.2rem 0;border-top:1px solid var(--line);scroll-margin-top:96px} .occ-detail h3{font-family:var(--font-head);font-weight:400;font-size:1.6rem;color:var(--text-strong)} .occ-detail p{font-size:1rem;line-height:1.75;color:var(--text)} .occ-detail__body p + p{margin-top:.9rem} .occ-detail ul{margin-top:1.1rem;display:grid;gap:.5rem;list-style:none;padding-left:0} .occ-detail li{position:relative;padding-left:1.1rem;font-size:.92rem;line-height:1.6;color:var(--text-mute)} .occ-detail li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--blush)} @media(max-width:860px){ .occ-detail{grid-template-columns:1fr;gap:.9rem;padding:1.8rem 0} } /* ── Preis-Kontingente ── Der Preis haengt an der Getraenkemenge, nicht am Inhalt. Deshalb steht die Menge oben und der Preis gross darunter, die Gaestezahl uebersetzt sie. */ .tiers{margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem} .tier{background:linear-gradient(180deg,var(--card-top),var(--card-bottom));border:1px solid var(--line); border-radius:var(--radius-card);padding:2rem 1.6rem;text-align:center; box-shadow:0 2px 4px rgba(var(--shadow-rgb),.05),0 18px 34px -20px rgba(var(--shadow-rgb),.24)} .tier--mid{border-color:var(--blush);box-shadow:0 2px 4px rgba(var(--shadow-rgb),.05),0 26px 46px -20px rgba(var(--shadow-rgb),.3)} .tier__menge{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-label)} .tier__preis{font-family:var(--font-head);font-weight:400;font-size:2.5rem;color:var(--text-strong);margin-top:.5rem;line-height:1.1;white-space:nowrap} .tier__gaeste{font-size:.95rem;color:var(--text);margin-top:.4rem} .tier__weiter{font-size:.84rem;color:var(--text-mute);margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)} .inklusiv{margin-top:2.4rem;background:var(--card);border:1px solid var(--line); border-radius:var(--radius-card);padding:1.9rem clamp(1.4rem,3vw,2.4rem)} .inklusiv h3{font-family:var(--font-head);font-weight:400;font-size:1.3rem;color:var(--text-strong)} .inklusiv ul{margin-top:1.1rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem 1.6rem;list-style:none;padding-left:0} .inklusiv li{position:relative;padding-left:1.4rem;font-size:.92rem;line-height:1.6;color:var(--text)} .inklusiv li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:5px; border-left:1.6px solid var(--blush);border-bottom:1.6px solid var(--blush);transform:rotate(-45deg)} .preis-note{margin-top:1.6rem;max-width:52rem;font-size:.9rem;line-height:1.7;color:var(--text-mute)} /* ── CTA-RECHTECK ──────────────────────────────────────────────────────────── Zentrierter Abschluss-Baustein: Badge, Titel, Satz, EIN Knopf (Till, 14.08.2026, nach dem Launch-UI-Muster "cta-with-rectangle", uebersetzt in unsere Marke). Bewusst generisch benannt, damit ihn jede Seite bekommen kann, nicht nur die Preisseite. Tiefe kommt aus zwei Schichten: die Karte selbst plus ein warmer Schein dahinter, sonst liegt so ein Block flach auf dem Sandton. Der Knopf ist hier ECKIG statt Pill: er steht allein in der Mitte, die Pill-Form wirkt dort wie ein verirrter Navigationsknopf. */ /* Kein gleichmaessiger Kasten: die Flaeche selbst verlaeuft (schraeg, hell oben nach warm unten) und traegt unten eine leuchtende Bank, die aus dem Rand heraussteigt. Genau das macht die Vorlage aus, und genau das fehlte in der ersten Fassung, die dadurch wie ein Standard-Kasten aussah (Till, 14.08.). Kein Rahmen: eine Umrandung zieht das Auge auf die Kante statt auf den Verlauf. */ .cta-rect{position:relative;margin-top:3.4rem;padding:clamp(3rem,6vw,4.6rem) clamp(1.4rem,4vw,3rem) clamp(3.4rem,6.5vw,5rem); text-align:center;border-radius:28px;border:0;overflow:hidden;isolation:isolate; background: radial-gradient(80% 60% at 50% -25%,rgba(255,255,255,.85),transparent 62%), linear-gradient(166deg,var(--card-top) 0%,var(--card) 46%,var(--surface-2) 100%); box-shadow:0 44px 80px -46px rgba(var(--shadow-rgb),.5),inset 0 1px 0 rgba(255,255,255,.8)} /* KEINE Leuchtbank unten und kein Signal im Verlauf (Till, 14.08.): Rot mit Deckkraft ueber Beige wird rosa, und Rosa gehoert nicht in diese Marke. Die Tiefe kommt jetzt allein aus dem schraegen Verlauf hell nach warm und dem weichen Schlagschatten. */ .cta-rect>*{position:relative} .cta-rect__badge{display:inline-block;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase; font-weight:700;color:var(--signal);padding:8px 16px;border-radius:999px; border:1px solid rgba(var(--signal-rgb),.28);background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} /* Display-Schrift wie jede andere Ueberschrift der Seite. Marcellus (--font-head) war hier falsch: der Block ist eine Sektions-Aussage, keine Kartenzeile. */ .cta-rect__titel{margin-top:1.5rem;font-family:var(--font-display);font-weight:400; font-size:clamp(2.1rem,4.6vw,3.2rem);line-height:.94;letter-spacing:-.014em; color:var(--text-strong)} .cta-rect__text{margin:1rem auto 0;max-width:44rem;font-size:1.02rem;line-height:1.7;color:var(--text)} .cta-rect .btn{margin-top:2rem} .cta-rect__note{margin-top:1.1rem;font-size:.85rem;line-height:1.6;color:var(--text)} /* Eckige Variante des Hauptknopfes: gleiche Tiefe, gleiche Fuellung, nur weich abgerundet statt rund. Fuer allein stehende Knoepfe in der Mitte. */ .btn--eck{border-radius:14px} @media(max-width:860px){ .tiers{grid-template-columns:1fr;gap:.9rem} .inklusiv ul{grid-template-columns:1fr} } /* Instagram-Band */ .social-band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:center} .social-handles{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.6rem} /* ── Anfrage-Formular ── */ .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem} .form-grid .full{grid-column:1/-1} .field label{display:block;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--on-dark-mute);margin-bottom:.45rem} .field input,.field select,.field textarea{width:100%;background:rgba(253,248,240,.06);color:var(--on-dark); border:1px solid rgba(242,233,220,.22);border-radius:12px;padding:13px 15px;font:inherit;font-size:.94rem; transition:border-color .25s,background .25s} .field input::placeholder,.field textarea::placeholder{color:rgba(242,233,220,.4)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blush);background:rgba(253,248,240,.1)} .field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C2B4A8' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center} .field select option{color:var(--ink);background:#FDF8F0} .checkline{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--on-dark-mute)} .checkline input{width:auto;accent-color:var(--blush)} .modul-checks{display:flex;gap:1.4rem;flex-wrap:wrap} .form-note{font-size:.8rem;color:var(--on-dark-mute);margin-top:1rem;line-height:1.6} .anfrage-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.4rem,5vw,4.5rem);align-items:start} .avail-points{margin-top:1.4rem;display:grid;gap:.9rem} .avail-points li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;line-height:1.6;color:var(--on-dark-mute)} .avail-points li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--blush);margin-top:.5em} /* ── CTA-Band (Unterseiten) ── */ .cta-band{text-align:left} .cta-band .h-section{max-width:22ch} /* ── Footer-Layout ── */ .footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:2.2rem} .footer-brand img{height:30px;width:auto;display:block;margin-bottom:1rem} .footer-brand p{font-size:.88rem;line-height:1.65;color:var(--on-dark-mute);max-width:26rem} .footer ul{display:grid;gap:.55rem} .footer ul a{font-size:.9rem} .footer-base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; border-top:1px solid rgba(242,233,220,.14);margin-top:3rem;padding-top:1.6rem; font-size:.78rem;color:var(--on-dark-mute)} /* ── FAQ ── */ .faq{display:grid;gap:.9rem;max-width:52rem} .faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden; box-shadow:0 2px 4px rgba(var(--shadow-rgb),.04),0 12px 24px -16px rgba(var(--shadow-rgb),.16)} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:18px 22px;font-family:var(--font-head);font-size:1.08rem;color:var(--text-strong)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--font-body);color:var(--accent);font-size:1.2rem;transition:transform .3s} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 22px 20px;font-size:.94rem;line-height:1.7;color:var(--text)} /* ── Responsive ── */ @media(max-width:1020px){ .modules{grid-template-columns:1fr;max-width:34rem} .occasions{grid-template-columns:1fr 1fr} .occasions .occasion:first-child{grid-column:1/-1} .anfrage-grid,.social-band,.aufbau-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr;gap:2rem} } @media(max-width:860px){ .hero-grid,.split,.split--rev{grid-template-columns:1fr} .hero{min-height:88vh} .hero--sub{min-height:64vh} .split-media{order:-1} /* Mobil traegt das Poster den Hero allein und in voller Breite: hochkant passt es hier ohnehin, Maske und Ueberhoehe braucht es nicht. */ .hero--marke{flex-direction:column;align-items:stretch;min-height:0} .hero--marke .hero-inner{padding-top:clamp(2.6rem,9vw,4rem);padding-bottom:2.6rem} .hero--marke .hero-grid>div{max-width:none} .hero--marke .hero-sub{max-width:none} /* Einspaltig: Poster unter den Text, volle Breite, ungeschnitten, ohne Maske. */ .hero-poster{position:static;transform:none;width:100%;height:auto;order:2; aspect-ratio:auto;-webkit-mask-image:none;mask-image:none} .hero-poster img{height:auto;object-fit:contain} } @media(max-width:960px){ /* Icons wandern ins Menue, im Band bleibt der Header ruhig */ .site-header__actions .site-header__social{display:none} .site-header__nav-social{display:flex;flex-direction:column} .site-header__nav .site-header__nav-social a{color:var(--text-mute)} } @media(max-width:760px){ .site-header__mark{height:38px} .site-header__type{font-size:.98rem;letter-spacing:.24em} .site-header__actions .nav-cta{display:none} .livestrip__inner{flex-direction:column;align-items:stretch;gap:1rem;padding-block:22px} .livestrip__text{font-size:.94rem;align-items:flex-start} .livestrip__text .pulse{margin-top:.45em} .livestrip__links{flex-direction:column;width:100%;gap:.6rem} .social-btn{width:100%} .hero{min-height:calc(100vh - 69px)} .hero h1{font-size:clamp(2.5rem,10.5vw,3.2rem)} .hero--sub h1{font-size:clamp(2.1rem,9vw,2.8rem)} .hero-eyebrow{font-size:.58rem;letter-spacing:.2em;flex-wrap:wrap} .hero-eyebrow::before{display:none} .ways,.occasions{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} /* Mobil steht der Text auf der hellen Anhaengerwand: Scrim kraeftiger */ .hero-bg img{object-position:70% 58%} /* Seit dem laengeren Untertitel (06.08.2026) liegt mehr Text auf der hellen Wand, deshalb deckt der Verlauf die Textzone staerker ab. */ .hero-scrim{background:linear-gradient(180deg,rgba(46,40,35,.5) 0%,rgba(46,40,35,.66) 38%,rgba(46,40,35,.86) 100%)} .modul{grid-template-columns:1fr;gap:.4rem} .modul__num{font-size:2rem} .status-pill{font-size:.66rem;letter-spacing:.04em;padding:8px 14px 8px 12px;line-height:1.4} .anlass-liste li{flex-direction:column;gap:.2rem;align-items:flex-start} .anlass-liste span{text-align:left} } /* ================================================================ Drink-Karten · zwei Bausteine (07.08.2026) A "kartenfaecher" → Startseite, dunkler Block, Karten wie ein Deck B "kartenbuch" → angebot.html, Stapel zum Durchblaettern Interaktion in js/site.js. Beide funktionieren ohne JS als einfache Bilderreihe, das Skript reichert nur an. ================================================================ */ /* ---- gemeinsam ---- */ .karten{position:relative;display:flex;flex-direction:column;align-items:center; user-select:none;-webkit-user-select:none;touch-action:pan-y} .karten__titel{font-family:var(--font-head);font-size:1.35rem;margin:0; position:relative;z-index:30} .karten__zaehler{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase; opacity:.62;margin-top:.4rem;position:relative;z-index:30} .karten__nav{display:flex;gap:.6rem;margin-top:1.3rem;position:relative;z-index:30} .karten__nav button{width:46px;height:46px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.92);color:var(--ink);font-size:1.2rem;line-height:1; box-shadow:0 6px 16px rgba(0,0,0,.22);transition:transform .18s ease,background .18s ease} .karten__nav button:hover{transform:translateY(-2px);background:#fff} .karten__nav button:focus-visible{outline:3px solid var(--blush);outline-offset:3px} /* ---- A · Faecher ---- */ .faecher-band{background:var(--footer);color:var(--on-dark);overflow:hidden} .faecher-band .karten__titel{color:var(--on-dark)} .faecher-band .karten__zaehler{color:var(--on-dark-mute)} .fan{position:relative;width:100%;height:600px;perspective:1600px} /* margin als EINE Kurzform: das Skript darf die Zentrierung nicht ueberschreiben */ .fan__card{position:absolute;left:50%;top:0;width:250px;height:375px;margin:0 0 0 -125px; border-radius:12px;overflow:hidden;cursor:pointer;transform-origin:50% 165%; transition:transform .55s cubic-bezier(.22,.68,.32,1),opacity .45s ease,box-shadow .45s ease; box-shadow:0 18px 36px rgba(0,0,0,.34);background:var(--card)} .fan__card img{width:100%;height:100%;object-fit:cover;display:block} .fan__card::after{content:"";position:absolute;inset:0;background:rgba(40,34,30,.44); transition:opacity .45s ease} .fan__card.is-active{box-shadow:0 30px 60px rgba(0,0,0,.5);cursor:default} .fan__card.is-active::after{opacity:0} .fan.is-dragging .fan__card{transition:none} /* ohne JS: schlichte scrollbare Reihe statt Faecher */ .fan:not(.is-ready){display:flex;gap:14px;overflow-x:auto;height:auto;padding-bottom:12px} .fan:not(.is-ready) .fan__card{position:static;margin:0;flex:0 0 200px;height:300px;transform:none} .fan:not(.is-ready) .fan__card::after{display:none} /* ---- B · Buch ---- */ /* --surface, nicht --surface-2: auf /angebot steht direkt darueber die Baukasten-Sektion mit section--alt (= surface-2), sonst verschmelzen beide */ .buch-band{background:var(--surface)} .book{position:relative;width:290px;height:435px;perspective:2200px;margin:0 0 2rem} .book__card{position:absolute;inset:0;margin:0;border-radius:12px;overflow:hidden; transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden; transition:transform .72s cubic-bezier(.42,.02,.28,1),box-shadow .5s ease,filter .5s ease; box-shadow:0 20px 44px rgba(var(--shadow-rgb),.32);background:var(--card)} .book__card img{width:100%;height:100%;object-fit:cover;display:block} .book__card.is-flipped{box-shadow:0 6px 18px rgba(var(--shadow-rgb),.2)} .book:not(.is-ready){display:flex;gap:14px;overflow-x:auto;height:auto;width:100%; perspective:none;padding-bottom:12px} .book:not(.is-ready) .book__card{position:static;inset:auto;flex:0 0 200px;height:300px;transform:none} /* ---- Buchkarten ohne Foto (10.08.2026, fuer die Modul-Seiten) ---- Geometrie, 3D-Verhalten und Schatten kommen weiter von .book__card, hier steht nur, was IN der Karte passiert. --platz = Kaffee und Matcha, solange es keine gezeichneten Karten gibt --text = Eventmanagement, rein typografisch, bewusst ohne Bild transform-style:flat ist kein Detail: mit preserve-3d landen die Textkinder im selben 3D-Kontext und Safari laesst sie beim Wegklappen spiegelverkehrt durchblitzen. Bildkarten bleiben unangetastet. */ .book__card--platz, .book__card--text, .fan__card--platz, .fan__card--text{display:grid;align-content:center;justify-items:center;gap:.5rem; padding:1.6rem 1.3rem;text-align:center;transform-style:flat; background:linear-gradient(180deg,var(--card-top) 0%,var(--card) 55%,var(--card-bottom) 100%); border:1px solid var(--line)} /* ---- Wunschkarte (14.08.2026, Lu) ---- Die Karten sind eine Beispielauswahl, keine Speisekarte: zusammengestellt wird vorher im Gespraech. Am Ende jedes Stapels steht deshalb eine dunkle Karte mit Fragezeichen, die genau das sagt. Gleiche Geometrie wie die anderen Karten, nur invertiert. */ .book__card--wunsch, .fan__card--wunsch{display:grid;align-content:center;justify-items:center;gap:.35rem; padding:1.6rem 1.3rem;text-align:center;transform-style:flat; background:linear-gradient(170deg,#3a332c 0%,var(--ink) 62%,#191510 100%); border:1px solid rgba(255,255,255,.14)} .book__frage,.fan__frage{font-family:var(--font-head);font-weight:400; font-size:clamp(3.4rem,7vw,4.6rem);line-height:1;margin:0 0 .35rem; color:rgba(var(--accent-rgb),.85)} .book__card--wunsch .book__name, .fan__card--wunsch .fan__name{color:#fff} .book__card--wunsch .book__zeile, .fan__card--wunsch .fan__zeile{color:rgba(255,255,255,.72)} .book__name,.fan__name{font-family:var(--font-head);font-weight:400;font-size:1.24rem;line-height:1.25; color:var(--text-strong);margin:0} .book__zutaten,.fan__zutaten{font-size:.78rem;line-height:1.55;color:var(--text-mute);margin:0;max-width:14rem} .book__zeile,.fan__zeile{font-size:.84rem;line-height:1.6;color:var(--text);margin:0;max-width:14rem} .book__card--text .book__name,.fan__card--text .fan__name{font-size:1.44rem} .book__card--text .book__name::after,.fan__card--text .fan__name::after{content:"";display:block;width:34px;height:1px; margin:.75rem auto .1rem;background:rgba(var(--accent-rgb),.42)} .book__card--text .book__eyebrow, .book__card--platz .book__eyebrow, .fan__card--text .fan__eyebrow, .fan__card--platz .fan__eyebrow{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase; color:var(--text-label);margin:0 0 .2rem} /* Flaeche, auf der spaeter das gezeichnete Motiv sitzt. Gleiche Schraffur wie die Foto-Platzhalter im Baukasten und im Umbau-Karussell. */ .book__motiv,.fan__motiv{position:relative;width:100%;aspect-ratio:4/3;border-radius:10px; border:1px solid var(--line);margin-bottom:.35rem; background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(132,117,106,.07) 9px 18px)} .book__motiv::after,.fan__motiv::after{content:attr(data-motiv);position:absolute;inset:0;display:grid; place-items:center;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase; color:var(--text-mute)} @media (prefers-reduced-motion:reduce){ .fan__card,.book__card,.karten__nav button{transition-duration:.01ms !important} } @media(max-width:760px){ .fan{height:450px} .fan__card{width:180px;height:270px;margin:0 0 0 -90px} .book{width:215px;height:322px} .karten__titel{font-size:1.15rem} /* Kartenformat schrumpft, der Text muss trotzdem lesbar bleiben */ .book__card--platz,.book__card--text,.fan__card--platz,.fan__card--text{padding:1.1rem .9rem;gap:.4rem} .book__name,.fan__name{font-size:1.06rem} .book__card--text .book__name,.fan__card--text .fan__name{font-size:1.2rem} .book__zutaten,.book__zeile,.fan__zutaten,.fan__zeile{font-size:.74rem} } /* Ohne JS staucht .book:not(.is-ready) jede Karte auf 200x300px. */ .book:not(.is-ready) .book__card--platz, .book:not(.is-ready) .book__card--text{padding:.9rem .7rem;gap:.3rem} .book:not(.is-ready) .book__name{font-size:.98rem} .book:not(.is-ready) .book__zutaten, .book:not(.is-ready) .book__zeile{font-size:.7rem} /* Echtes Foto an der Stelle eines .imgslot (07.08.2026, erstes Bild: Lu). Gleiche Geometrie wie der Platzhalter, damit der Wechsel vom markierten Kasten zum fertigen Foto nichts am Layout verschiebt. Weitere Fotos ersetzen ihren Platzhalter genauso: div.imgslot -> figure.splitfoto. */ .splitfoto{position:relative;margin:0;border-radius:var(--radius-card);overflow:hidden; background:var(--card-bottom);box-shadow:0 18px 40px rgba(var(--shadow-rgb),.14)} .splitfoto img{width:100%;height:100%;object-fit:cover;display:block} /* ── Vergleichsvariante B (nur lokal): Off-White statt warmem Beige ───────── Test auf Tills Wunsch (10.08.): der Grundton der Till-Weilemann-Website (--paper #FBFAF6, Haarlinie #E7E1D5) auf Lus Seite. Geaendert werden NUR die hellen Flaechen und Linien. Die Markenfarben von Vamora (Dunkelbraun, Taupe, Blush, Sandgold) bleiben unangetastet, ebenso alle dunklen Sektionen. */ /* Mischung aus Tills Off-White und Vamoras warmem Beige, Gewichtung 75:25 zugunsten des Beige (Till, 10.08.: "noch mehr beige"). Behaelt die Waerme, die Blush und Sandgold stuetzt, bleibt aber einen Tick klarer als das urspruengliche Beige. */ :root{ --surface:#FAF6EE; /* Beige #FAF5EC ↔ Off-White #FBFAF6 */ --surface-2:#F4EBDD; /* #F4E9D9 ↔ #F3F1EA */ --card:#FFFCF6; /* #FFFBF4 ↔ #FFFFFF */ --card-top:#FFFEFB; /* #FFFEFA ↔ #FFFFFF */ --card-bottom:#F2EADA; /* #F1E7D5 ↔ #F6F4ED */ --line:#E6DCCA; /* #E6DAC6 ↔ #E7E1D5 */ --line-soft:rgba(120,108,94,.13); --header-bg:rgba(250,246,238,.89); } /* ACHTUNG, Stand 12.08.2026: die Startseiten-Hero-Fassungen vom 10./11.08. (Textblock nach unten versetzt, Poster raumfuellend links, Schriftgrad aus der Spaltenbreite) sind abgeloest. Die gueltige Fassung steht als geschlossener Block am ENDE dieser Datei ("Startseiten-Hero: Typo fuehrt, Poster als Karte"). Hier stehen nur noch die Regeln, die beide Fassungen teilen. Die alte Startseite liegt unveraendert in archives/. */ .hero--startseite h1{font-size:clamp(2.4rem,6.2vw,5.2rem)} .hero--startseite .hero-sub{font-size:clamp(.98rem,1.2vw,1.06rem)} /* Canvas des Beams-Effekts: fuellt die Hero-Flaeche, liegt unter Poster, Glasflaeche und Text. */ .hero-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block} /* ── Mobiler Hero: erst das Bild, darunter Text und Effekt (Till, 10.08.2026) ── Am Dateiende, weil die Nachtraege oben (Text-Padding 36vh, Textbreite 44%, Glasflaeche rechts) ohne Media Query stehen und sonst auch mobil greifen. Genau das hat den Hero auf dem Telefon zerrissen: Text ragte seitlich heraus und das Poster stand erst nach einem leeren Bildschirm. Reihenfolge hier bewusst ueber `order`: im HTML kommt das Poster zuerst, dann die Glasflaeche, dann der Text. */ @media(max-width:860px){ .hero--marke{display:flex;flex-direction:column;align-items:stretch;min-height:0} /* Poster als Aufmacher ganz oben, volle Breite, ungeschnitten. */ .hero-poster{order:1;position:static;left:auto;right:auto;bottom:auto; width:100%;height:auto;aspect-ratio:auto;transform:none; -webkit-mask-image:none;mask-image:none} .hero-poster img{width:100%;height:auto;object-fit:contain} /* Textteil direkt darunter, volle Breite statt der 44% vom Desktop. */ .hero--marke .hero-inner{order:2;padding-top:2.2rem;padding-bottom:2.6rem} .hero--marke .hero-grid{grid-template-columns:1fr} .hero--marke .hero-grid>div{max-width:none;margin-left:0} .hero--marke .hero-sub{max-width:none} .hero--startseite h1{font-size:clamp(2.2rem,8.6vw,2.9rem);white-space:normal} .hero--startseite .hero-sub{font-size:1rem} /* Die seitliche Glasflaeche ergibt einspaltig keinen Sinn mehr. Ihr Rezept (Blur + Saturate + Innenlicht) wandert stattdessen unter den Textblock, damit "Bild oben, Text mit Effekt unten" als ein Block liest. Die Beams laufen weiter im Hintergrund ueber die ganze Hero-Flaeche. */ .hero-glasflaeche{display:none} .hero--marke .hero-inner{ background:linear-gradient(180deg,rgba(253,248,240,.14) 0%,rgba(253,248,240,.05) 100%); -webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.16)} } /* Auf Tablets und breiten Telefonen wuerde das hochkante Poster in voller Breite ueber 1000 px hoch, der Text stuende weit unter der Falz. Deshalb mittig begrenzt: das Motiv bleibt komplett sichtbar, der Hero wird kuerzer. */ @media(min-width:561px) and (max-width:860px){ .hero-poster{max-width:520px;margin-inline:auto} } /* ── Baukasten-Karte plus Modul-Link (10.08.2026) ─────────────────────────── Seit es Modul-Seiten gibt, haengt unter jeder Baukasten-Karte ein Link dorthin. Er liegt bewusst AUSSERHALB des