/* Feierwerk Merseburg - Stylesheet * * Herkunft: Claude-Design-Entwurf "Feierwerk 4d". Die Inline-Styles des * Entwurfs wurden 1:1 in die Klassen fw-1 ... fw-201 uebernommen, damit die * Optik exakt bleibt. Geaendert wurde nur, was fuer eine echte Website noetig * ist: selbst gehostete Schriften, echte :hover-Regeln statt style-hover, * und der Responsive-Block am Ende. * * Aufbau * 1. Schriften (selbst gehostet, kein Google-CDN) * 2. Farb- und Schrift-Variablen * 3. Grundlagen * 4. Uebernommene Entwurfsklassen (fw-*) * 5. Responsive */ /* ---------- 1. Schriften ---------------------------------------------- */ /* Subset "latin", enthaelt Umlaute, Eszett und typografische Anfuehrungs- zeichen. Kein Google-CDN: sonst waere ein Cookie-Banner faellig. */ @font-face { font-family: 'Marcellus'; src: url('../fonts/marcellus-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Karla'; src: url('../fonts/karla-var.woff2') format('woff2-variations'); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-var.woff2') format('woff2-variations'); font-weight: 300 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Bad Script'; src: url('../fonts/badscript-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ---------- 2. Variablen ---------------------------------------------- */ :root { --fw-display: 'Marcellus', serif; --fw-text: 'Karla', sans-serif; --fw-quote: 'Newsreader', serif; --fw-hand: 'Bad Script', cursive; --fw-petrol: #106369; --fw-petrol-dunkel: #0a4d52; --fw-sand: #f2d18c; --fw-papier: #f5ead8; --fw-rand: 46px; /* seitlicher Sektionsabstand, mobil kleiner */ } /* ---------- 3. Grundlagen --------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; /* Im Entwurf lag hier das dunkle Canvas-Grau. Auf der echten Seite ist der Seitenhintergrund selbst das Papier. */ background: var(--fw-papier); color: #1c1b19; font-family: var(--fw-text); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: var(--fw-petrol); text-decoration: none; } a:hover { color: var(--fw-petrol-dunkel); } [data-storyscroll] { scrollbar-width: none; -ms-overflow-style: none; } [data-storyscroll]::-webkit-scrollbar { width: 0; height: 0; display: none; } @keyframes fwDrift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(0, -1.5%, 0); } } /* Sprungziele nicht unter den Sticky-Header rutschen lassen */ [id] { scroll-margin-top: 130px; } /* Tastaturbedienung sichtbar machen - im Entwurf nicht enthalten */ a:focus-visible, button:focus-visible { outline: 2px solid var(--fw-petrol); outline-offset: 3px; } /* ---------- 4. Uebernommene Entwurfsklassen ---------------------------- */ /* Aus den Inline-Styles des Entwurfs extrahiert. Werte unveraendert. */ /* Reihenfolge = Reihenfolge im Dokument. */ .fw-2 { width: 1180px; max-width: 100%; background: #f5ead8; } .fw-3 { position: sticky; top: 0; margin-bottom: -118px; height: 118px; box-sizing: border-box; transform: translateY(-100%); opacity: 0; transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease; z-index: 60; background: rgba(13,79,84,0.96); border-bottom: 1px solid rgba(242,209,140,0.45); padding: 10px 46px; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .fw-4 { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex: 0 0 auto; } .fw-5 { font-family: var(--fw-display); font-size: 31px; line-height: 1; letter-spacing: 0.01em; color: var(--fw-sand, #f2d18c); } .fw-6 { font-family: var(--fw-display); font-size: 8.2px; line-height: 1; letter-spacing: 0.117em; text-indent: 0.117em; color: var(--fw-sand, #f2d18c); white-space: nowrap; } .fw-7 { display: flex; align-items: center; gap: 26px; white-space: nowrap; font-family: var(--fw-text); font-size: 14px; color: rgba(245,234,216,0.9); } .fw-8 { color: inherit; } .fw-8:hover { color: var(--fw-sand, #f2d18c); } .fw-9 { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 999px; background: var(--fw-sand, #f2d18c); color: #0a4d52; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-7deg); transition: transform 0.35s ease; font-family: var(--fw-display); font-size: 14px; line-height: 1.2; text-align: center; } .fw-9:hover { transform: rotate(0deg) scale(1.05); } .fw-10 { position: relative; } .fw-11 { position: sticky; top: 0; height: 0; padding-bottom: 71.40625%; overflow: hidden; } .fw-12 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.8s ease; } .fw-13 { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 0 0; } .fw-18 { position: absolute; left: 0; right: 0; top: 38.2%; transform: translateY(-50%); background: rgba(13,79,84,0.9); border-top: 1px solid rgba(242,209,140,0.5); border-bottom: 1px solid rgba(242,209,140,0.5); padding: 38px 46px; display: flex; align-items: center; justify-content: center; } .fw-19 { width: 268px; height: 155px; overflow: hidden; position: relative; } .fw-20 { position: absolute; width: 327px; max-width: none; left: -31px; top: -87px; filter: brightness(0) invert(1) sepia(1) saturate(5.2) hue-rotate(-16deg) brightness(0.99); } .fw-21 { display: flex; flex-direction: column; align-items: center; } .fw-22 { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; background: linear-gradient(180deg, rgba(13,79,84,0) 40%, rgba(13,79,84,0.5) 72%, rgba(13,79,84,0.88) 100%); pointer-events: none; } .fw-23 { position: absolute; left: 0; right: 0; top: 80%; transform: translateY(-38%); opacity: 0; transition: opacity 1.9s ease, transform 2.2s cubic-bezier(0.16, 0.68, 0.3, 1); padding: 0 46px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .fw-24 { margin: 0; font-family: var(--fw-display); font-weight: 400; font-size: 50px; line-height: 1.12; color: #fffcf4; max-width: 24ch; } .fw-25 { margin: 0; font-family: var(--fw-text); font-size: 19px; line-height: 1.6; color: #fffcf4; max-width: 46ch; } .fw-26 { font-family: var(--fw-text); font-size: 14px; letter-spacing: 0.04em; color: #fffcf4; } .fw-27 { height: 340px; } .fw-28 { padding: 78px 46px 70px; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 54px; align-items: start; } .fw-29 { margin: 0; font-family: var(--fw-display); font-weight: 400; font-size: 44px; line-height: 1.2; color: var(--fw-petrol, #106369); max-width: 24ch; } .fw-30 { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; } /* Rechte Intro-Spalte bewusst wieder Fliesstext und nicht Ueberschrift: Nach der Abnahme angeglichen (gleiche Schrift und Groesse wie links), danach auf Wunsch zurueckgenommen - zwei gleich grosse Blocks neben- einander waren zu schwer. Also nicht erneut "angleichen". */ .fw-31 { font-family: var(--fw-text); font-size: 17px; line-height: 1.7; color: #474238; } .fw-32 { font-family: var(--fw-text); font-size: 15px; font-weight: 600; color: #8c491a; transition: transform 0.25s ease; display: inline-block; } .fw-32:hover { transform: translateX(4px); } .fw-33 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; } .fw-34 { position: relative; height: 560px; overflow: hidden; } .fw-35 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); } .fw-36 { position: absolute; left: 28px; bottom: 26px; font-family: var(--fw-text); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #fffcf4; text-shadow: 0 2px 10px rgba(13,79,84,0.6); } .fw-37 { background: #f5ead8; padding: 96px 46px 104px; } .fw-38 { text-shadow: 0 2px 5px rgba(46,43,37,0.16); transform: rotate(-3deg); transform-origin: left center; font-family: 'Bad Script', cursive; font-size: 32px; line-height: 1.25; color: var(--fw-petrol, #106369); display: block; margin-bottom: 26px; } .fw-39 { display: grid; grid-template-columns: 400px 1fr; gap: 76px; align-items: start; } .fw-40 { position: sticky; top: 150px; margin-top: -6px; } .fw-41 { width: 400px; aspect-ratio: 3/4; object-fit: cover; border-radius: 999px 999px 26px 26px; } .fw-42 { position: absolute; right: -30px; bottom: -30px; width: 132px; height: 132px; border-radius: 999px; background: var(--fw-sand, #f2d18c); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; } .fw-43 { font-family: var(--fw-quote); font-style: italic; font-size: 16px; color: #0a4d52; } .fw-44 { font-family: var(--fw-display); font-size: 18px; line-height: 1.15; color: #0a4d52; text-align: center; } .fw-45 { display: flex; flex-direction: column; gap: 34px; padding-top: 18px; position: relative; } .fw-46 { position: absolute; left: 92px; top: -118px; width: 176px; height: 116px; overflow: hidden; opacity: 0.09; pointer-events: none; } .fw-47 { position: absolute; width: 1138px; max-width: none; left: -485px; top: -316px; } .fw-48 { display: flex; flex-direction: column; gap: 20px; position: relative; } .fw-49 { margin: 0; font-family: var(--fw-display); font-weight: 400; font-size: 44px; line-height: 1.14; color: var(--fw-petrol, #106369); } .fw-50 { margin: 0 0 0 -14px; font-family: var(--fw-quote); font-style: italic; font-size: 32px; line-height: 1.4; color: #2e2b25; max-width: 30ch; } .fw-51 { max-width: 62ch; display: flex; flex-direction: column; gap: 16px; } .fw-52 { font-family: var(--fw-text); font-size: 16px; line-height: 1.75; color: #474238; } .fw-53 { font-family: 'Bad Script', cursive; font-size: 38px; line-height: 1.2; color: var(--fw-petrol, #106369); margin-top: 6px; transform: rotate(-4deg); transform-origin: left center; } .fw-54 { text-shadow: 0 2px 5px rgba(46,43,37,0.16); font-family: 'Bad Script', cursive; font-size: 32px; line-height: 1.25; color: var(--fw-petrol, #106369); display: block; margin-top: 92px; transform: rotate(-3deg); transform-origin: left center; } .fw-55 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 6px; padding-top: 0; } .fw-56 { display: flex; flex-direction: column; gap: 3px; padding-top: 0; } .fw-57 { font-family: var(--fw-display); font-size: 19px; color: #2e2b25; } .fw-58 { font-family: var(--fw-text); font-size: 15px; line-height: 1.65; color: #474238; } .fw-59 { position: relative; height: 720px; overflow: hidden; } .fw-60 { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; object-fit: cover; object-position: center 42%; } .fw-61 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,79,84,0) 44%, rgba(13,79,84,0.18) 62%, rgba(13,79,84,0.55) 82%, rgba(13,79,84,0.78) 100%); } .fw-62 { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 46px; gap: 14px; } .fw-63 { margin: 0; font-family: var(--fw-quote); font-style: italic; font-size: 34px; line-height: 1.35; color: #fffcf4; max-width: 26ch; } .fw-64 { font-family: var(--fw-text); font-size: 17px; line-height: 1.7; color: #fffcf4; max-width: 52ch; } .fw-65 { padding: 118px 46px 6px; } .fw-66 { text-shadow: 0 2px 5px rgba(46,43,37,0.16); transform: rotate(-3deg); transform-origin: left center; font-family: 'Bad Script', cursive; font-size: 32px; line-height: 1.25; color: var(--fw-petrol, #106369); display: block; } .fw-67 { padding: 0 46px 30px; } .fw-68 { margin: 0; font-family: var(--fw-display); font-weight: 400; font-size: 36px; color: var(--fw-petrol, #106369); } .fw-69 { padding: 0 46px 34px; } .fw-70 { font-family: var(--fw-text); font-size: 17px; line-height: 1.75; color: #474238; max-width: 64ch; display: block; } .fw-71 { padding: 0 46px 150px; position: relative; height: 660px; overflow: hidden; } .fw-72 { position: absolute; left: 50%; bottom: 120px; width: 286px; margin-left: -143px; transform-origin: 50% 118%; transform: translateX(0px) rotate(0deg); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease; z-index: 1; box-shadow: 0 10px 26px rgba(46,43,37,0.22); border-radius: 20px; overflow: hidden; background: #f9f4ed; cursor: pointer; } .fw-73 { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 78% 50%; display: block; } .fw-74 { padding: 12px 16px 14px; } .fw-75 { font-family: var(--fw-quote); font-style: italic; font-size: 16px; color: #645c50; } .fw-76 { font-family: var(--fw-text); font-size: 11px; letter-spacing: 0.08em; color: #a19786; } .fw-77 { position: absolute; left: 50%; bottom: 120px; width: 286px; margin-left: -143px; transform-origin: 50% 118%; transform: translateX(0px) rotate(0deg); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease; z-index: 2; box-shadow: 0 10px 26px rgba(46,43,37,0.22); border-radius: 20px; overflow: hidden; background: #f9f4ed; cursor: pointer; } .fw-78 { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; } .fw-79 { position: absolute; left: 50%; bottom: 120px; width: 286px; margin-left: -143px; transform-origin: 50% 118%; transform: translateX(0px) rotate(0deg); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease; z-index: 3; box-shadow: 0 10px 26px rgba(46,43,37,0.22); border-radius: 20px; overflow: hidden; background: #f9f4ed; cursor: pointer; } .fw-80 { position: absolute; left: 50%; bottom: 120px; width: 286px; margin-left: -143px; transform-origin: 50% 118%; transform: translateX(0px) rotate(0deg); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease; z-index: 4; box-shadow: 0 10px 26px rgba(46,43,37,0.22); border-radius: 20px; overflow: hidden; background: #f9f4ed; cursor: pointer; } .fw-81 { position: absolute; left: 50%; bottom: 120px; width: 286px; margin-left: -143px; transform-origin: 50% 118%; transform: translateX(0px) rotate(0deg); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease; z-index: 5; box-shadow: 0 10px 26px rgba(46,43,37,0.22); border-radius: 20px; overflow: hidden; background: #f9f4ed; cursor: pointer; } .fw-82 { position: absolute; left: 50%; bottom: 120px; width: 286px; margin-left: -143px; transform-origin: 50% 118%; transform: translateX(0px) rotate(0deg); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease; z-index: 6; box-shadow: 0 10px 26px rgba(46,43,37,0.22); border-radius: 20px; overflow: hidden; background: #f9f4ed; cursor: pointer; } .fw-83 { padding: 0 46px 150px; position: relative; height: 660px; overflow: hidden; } .fw-84 { margin-top: -40px; padding: 0 46px 82px; display: flex; justify-content: center; position: relative; z-index: 20; } .fw-85 { font-family: var(--fw-text); font-size: 16px; font-weight: 600; background: transparent; color: var(--fw-petrol, #106369); border: 1px solid rgba(16,99,105,0.42); border-radius: 999px; padding: 15px 30px; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease; } .fw-85:hover { background: rgba(16,99,105,0.08); border-color: rgba(16,99,105,0.7); } .fw-86 { padding: 86px 46px 30px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; } .fw-87 { text-shadow: 0 2px 5px rgba(46,43,37,0.16); transform: rotate(-3deg); transform-origin: left center; font-family: 'Bad Script', cursive; font-size: 32px; line-height: 1.25; color: var(--fw-petrol, #106369); display: block; margin-bottom: 6px; } .fw-88 { padding: 26px 46px 88px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; max-width: 1000px; margin: 0 auto; } .fw-89 { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; cursor: pointer; } .fw-90 { width: 76px; height: 50px; overflow: hidden; position: relative; transition: opacity 0.3s ease; } .fw-91 { position: absolute; width: 491px; max-width: none; left: -210px; top: -136px; } .fw-92 { font-family: var(--fw-display); font-size: 25px; line-height: 1.2; transition: color 0.3s ease; } .fw-93 { font-family: var(--fw-text); font-size: 15px; line-height: 1.75; text-align: justify; hyphens: auto; color: #474238; display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; transition: grid-template-rows 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease; } .fw-94 { min-height: 0; } .fw-95 { background: #f9f4ed; padding: 84px 46px; } .fw-96 { text-shadow: 0 2px 5px rgba(46,43,37,0.16); transform: rotate(-3deg); transform-origin: left center; font-family: 'Bad Script', cursive; font-size: 32px; line-height: 1.25; color: var(--fw-petrol, #106369); display: block; margin-bottom: 10px; } .fw-97 { margin: 0 0 30px; font-family: var(--fw-display); font-weight: 400; font-size: 36px; line-height: 1.18; color: var(--fw-petrol, #106369); } .fw-98 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .fw-99 { display: flex; flex-direction: column; gap: 12px; } .fw-100 { display: flex; align-items: center; gap: 0; } .fw-101 { font-family: var(--fw-text); font-size: 12px; letter-spacing: 0.2em; color: #a19786; flex: 0 0 auto; margin-right: 10px; } .fw-102 { flex: 1; height: 1px; background: rgba(16,99,105,0.3); margin-right: -1px; } .fw-103 { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid rgba(16,99,105,0.5); flex: 0 0 7px; align-self: center; transform: translateY(1px); } .fw-104 { font-family: var(--fw-display); font-size: 21px; color: var(--fw-petrol, #106369); } .fw-105 { font-family: var(--fw-text); font-size: 15px; line-height: 1.7; color: #474238; } .fw-106 { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .fw-107 { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .fw-108 { display: flex; align-items: center; justify-content: center; height: 17px; position: relative; overflow: visible; } .fw-109 { position: absolute; left: calc(50% + -24px); top: calc(50% + -6px); width: 5px; height: 3px; background: rgba(16,99,105,0.55); border-radius: 999px; transform: rotate(24deg); pointer-events: none; } .fw-110 { position: absolute; left: calc(50% + -16px); top: calc(50% + 4px); width: 4px; height: 4px; background: var(--fw-sand, #f2d18c); border-radius: 999px; transform: rotate(0deg); pointer-events: none; } .fw-111 { position: absolute; left: calc(50% + -6px); top: calc(50% + -14px); width: 3px; height: 7px; background: rgba(16,99,105,0.35); border-radius: 1px; transform: rotate(-32deg); pointer-events: none; } .fw-112 { position: absolute; left: calc(50% + 20px); top: calc(50% + 2px); width: 6px; height: 3px; background: var(--fw-sand, #f2d18c); border-radius: 1px; transform: rotate(48deg); pointer-events: none; } .fw-113 { position: absolute; left: calc(50% + 28px); top: calc(50% + -10px); width: 4px; height: 4px; background: rgba(16,99,105,0.45); border-radius: 999px; transform: rotate(0deg); pointer-events: none; } .fw-114 { position: absolute; left: calc(50% + 9px); top: calc(50% + -19px); width: 3px; height: 5px; background: rgba(16,99,105,0.3); border-radius: 1px; transform: rotate(18deg); pointer-events: none; } .fw-115 { font-family: var(--fw-text); font-size: 12px; color: var(--fw-petrol, #106369); flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(16,99,105,0.45); display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: -6.5px 0; position: relative; background: #f9f4ed; } .fw-116 { background: #e1eecc; padding: 96px 46px 92px; } .fw-117 { margin-bottom: 40px; } .fw-118 { margin: 0; text-shadow: 0 2px 5px rgba(46,43,37,0.16); font-family: 'Bad Script', cursive; font-weight: 400; font-size: 40px; line-height: 1.25; color: var(--fw-petrol, #106369); max-width: 24ch; transform: rotate(-3deg); transform-origin: left center; } .fw-119 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; align-items: start; } .fw-120 { display: flex; flex-direction: column; gap: 14px; cursor: pointer; } .fw-121 { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 999px; box-shadow: 0 12px 28px rgba(46,43,37,0.18); } .fw-122 { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; } .fw-123 { font-family: var(--fw-display); font-size: 23px; line-height: 1.25; color: #3f6b62; transition: color 0.3s ease; } .fw-124 { display: flex; align-items: center; gap: 9px; } .fw-125 { flex: 0 0 30px; height: 1px; background: rgba(16,99,105,0.45); transition: flex-basis 0.4s ease, background 0.3s ease; } .fw-126 { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(16,99,105,0.55); flex: 0 0 8px; transition: transform 0.35s ease, border-top-color 0.3s ease; } .fw-127 { font-family: var(--fw-text); font-size: 15px; line-height: 1.7; color: #33302b; display: block; min-height: 128px; opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s ease; padding-top: 6px; } .fw-128 { display: block; } .fw-129 { padding: 90px 46px; display: flex; flex-direction: column; gap: 34px; } .fw-130 { display: flex; align-items: center; justify-content: space-between; } .fw-131 { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 11px; color: #a19786; } .fw-132 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .fw-133 { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid rgba(16,99,105,0.3); padding-top: 20px; } .fw-134 { margin: 0; font-family: var(--fw-quote); font-style: italic; font-size: 22px; line-height: 1.5; color: #2e2b25; } .fw-135 { display: flex; flex-direction: column; gap: 8px; } .fw-136 { height: 7px; border-radius: 999px; background: rgba(46,43,37,0.12); width: 92%; } .fw-137 { height: 7px; border-radius: 999px; background: rgba(46,43,37,0.12); width: 64%; } .fw-138 { font-family: var(--fw-text); font-size: 13px; letter-spacing: 0.06em; color: #82796a; } .fw-139 { height: 7px; border-radius: 999px; background: rgba(46,43,37,0.12); width: 88%; } .fw-140 { height: 7px; border-radius: 999px; background: rgba(46,43,37,0.12); width: 58%; } .fw-141 { height: 7px; border-radius: 999px; background: rgba(46,43,37,0.12); width: 94%; } .fw-142 { height: 7px; border-radius: 999px; background: rgba(46,43,37,0.12); width: 52%; } .fw-143 { background: #f9f4ed; padding: 88px 46px; display: grid; grid-template-columns: 0.6fr 1.4fr; gap: 56px; align-items: start; } .fw-144 { display: flex; flex-direction: column; gap: 14px; } .fw-145 { text-shadow: 0 2px 5px rgba(46,43,37,0.16); transform: rotate(-3deg); transform-origin: left center; font-family: 'Bad Script', cursive; font-size: 32px; line-height: 1.25; color: var(--fw-petrol, #106369); display: block; margin-bottom: 4px; } .fw-146 { display: flex; flex-direction: column; } .fw-147 { border-top: 1px solid rgba(16,99,105,0.28); padding: 20px 0; } .fw-148 { font-family: var(--fw-display); font-size: 21px; color: #2e2b25; cursor: pointer; list-style: none; } .fw-149 { padding-top: 14px; } .fw-150 { border-top: 1px solid rgba(16,99,105,0.28); border-bottom: 1px solid rgba(16,99,105,0.28); padding: 20px 0; } .fw-151 { background: var(--fw-petrol, #106369); padding: 62px 46px 64px; } .fw-152 { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; } .fw-153 { display: flex; flex-direction: column; gap: 16px; } .fw-154 { text-shadow: 0 2px 5px rgba(46,43,37,0.16); transform: rotate(-3deg); transform-origin: left center; font-family: 'Bad Script', cursive; font-size: 32px; line-height: 1.25; color: var(--fw-sand, #f2d18c); display: block; } .fw-155 { font-family: var(--fw-text); font-size: 17px; line-height: 1.7; color: rgba(245,234,216,0.86); max-width: 44ch; } .fw-156 { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; } .fw-157 { font-family: var(--fw-text); font-size: 16px; font-weight: 600; background: var(--fw-sand, #f2d18c); color: #0a4d52; border-radius: 999px; padding: 17px 30px; white-space: nowrap; } .fw-157:hover { background: #fff5df; } .fw-158 { font-family: var(--fw-text); font-size: 13px; color: rgba(245,234,216,0.6); } .fw-159 { padding: 88px 46px; display: grid; grid-template-columns: 1fr 0.85fr; gap: 60px; align-items: start; } .fw-160 { display: flex; flex-direction: column; gap: 22px; } .fw-161 { margin: 0; font-family: var(--fw-display); font-weight: 400; font-size: 36px; line-height: 1.18; color: var(--fw-petrol, #106369); } .fw-162 { font-family: var(--fw-text); font-size: 17px; line-height: 1.75; color: #474238; max-width: 52ch; } .fw-163 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .fw-164 { display: flex; flex-direction: column; gap: 7px; } .fw-165 { font-family: var(--fw-text); font-size: 13px; color: #645c50; } .fw-166 { font-family: var(--fw-text); font-size: 16px; color: #2e2b25; background: #f9f4ed; border: 1px solid rgba(16,99,105,0.28); border-radius: 999px; padding: 14px 18px; } .fw-166:focus-visible { outline: 2px solid var(--fw-petrol, #106369); outline-offset: 2px; } .fw-167 { font-family: var(--fw-text); font-size: 16px; color: #2e2b25; background: #f9f4ed; border: 1px solid rgba(16,99,105,0.28); border-radius: 22px; padding: 14px 18px; resize: vertical; } .fw-167:focus-visible { outline: 2px solid var(--fw-petrol, #106369); outline-offset: 2px; } .fw-168 { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .fw-169 { font-family: var(--fw-text); font-size: 16px; font-weight: 600; background: var(--fw-petrol, #106369); color: #f5ead8; border-radius: 999px; padding: 16px 28px; } .fw-169:hover { background: #0a4d52; } /* WhatsApp-Knopf: war Oliv mit dem Mintgruen des Entwurfs als Hover - der einzige Gruenton, der auf der Seite noch uebrig war. Jetzt Petrol. */ .fw-170 { font-family: var(--fw-text); font-size: 15px; font-weight: 600; color: var(--fw-petrol, #106369); border: 1px solid rgba(16,99,105,0.45); border-radius: 999px; padding: 14px 22px; } .fw-170:hover { background: rgba(16,99,105,0.1); } .fw-171 { display: flex; flex-direction: column; gap: 26px; padding-top: 44px; } .fw-172 { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(16,99,105,0.3); padding-top: 16px; } .fw-173 { font-family: var(--fw-text); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #a19786; } .fw-174 { font-family: var(--fw-display); font-size: 22px; color: var(--fw-petrol, #106369); } .fw-175 { font-family: var(--fw-text); font-size: 16px; line-height: 1.6; color: #33302b; } .fw-176 { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid rgba(16,99,105,0.3); padding-top: 34px; margin-top: 12px; } .fw-177 { transform: rotate(-3deg); transform-origin: left center; font-family: 'Bad Script', cursive; font-size: 26px; line-height: 1.25; color: var(--fw-petrol, #106369); display: block; } .fw-178 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .fw-179 { font-family: var(--fw-text); font-size: 14px; color: var(--fw-petrol, #106369); border: 1px solid rgba(16,99,105,0.3); border-radius: 999px; padding: 9px 17px; } .fw-180 { transform: rotate(-3deg); transform-origin: left center; font-family: 'Bad Script', cursive; font-size: 26px; line-height: 1.25; color: var(--fw-petrol, #106369); display: block; margin-top: 30px; } .fw-181 { display: flex; flex-wrap: wrap; gap: 10px; } .fw-182 { font-family: var(--fw-text); font-size: 14px; color: var(--fw-petrol, #106369); background: rgba(16,99,105,0.08); border: 1px solid rgba(16,99,105,0.3); border-radius: 999px; padding: 9px 17px; } .fw-183 { background: #0d4f54; padding: 44px 46px 34px; display: flex; flex-direction: column; gap: 30px; } .fw-184 { display: flex; align-items: flex-start; justify-content: space-between; gap: 50px; } .fw-185 { display: flex; flex-direction: column; gap: 10px; } .fw-186 { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; } .fw-187 { font-family: var(--fw-display); font-size: 38px; line-height: 1; letter-spacing: 0.01em; color: var(--fw-sand, #f2d18c); } .fw-188 { font-family: var(--fw-display); font-size: 10px; line-height: 1; letter-spacing: 0.117em; text-indent: 0.117em; color: var(--fw-sand, #f2d18c); white-space: nowrap; } .fw-189 { font-family: var(--fw-text); font-size: 13px; line-height: 1.7; color: rgba(245,234,216,0.7); margin-top: 4px; } .fw-190 { display: flex; flex-direction: column; gap: 9px; } .fw-191 { font-family: var(--fw-text); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(242,209,140,0.6); } .fw-192 { font-family: var(--fw-text); font-size: 14px; color: rgba(245,234,216,0.86); } .fw-193 { position: fixed; inset: 0; z-index: 200; background: rgba(23,24,26,0.92); display: none; align-items: center; justify-content: center; padding: 46px; opacity: 0; transition: opacity 0.35s ease; } .fw-194 { position: absolute; right: 30px; top: 26px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(245,234,216,0.4); background: transparent; color: #f5ead8; font-family: var(--fw-text); font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.25s ease; } .fw-194:hover { background: rgba(245,234,216,0.14); } .fw-195 { position: absolute; left: 30px; top: 50%; margin-top: -26px; width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(245,234,216,0.4); background: transparent; color: #f5ead8; font-family: var(--fw-text); font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.25s ease; } .fw-195:hover { background: rgba(245,234,216,0.14); } .fw-196 { position: absolute; right: 30px; top: 50%; margin-top: -26px; width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(245,234,216,0.4); background: transparent; color: #f5ead8; font-family: var(--fw-text); font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.25s ease; } .fw-196:hover { background: rgba(245,234,216,0.14); } .fw-197 { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; } .fw-198 { max-width: min(760px, 82vw); max-height: 74vh; width: auto; height: auto; object-fit: contain; border-radius: 20px; display: block; } .fw-199 { display: flex; flex-direction: column; align-items: center; gap: 4px; } .fw-200 { font-family: var(--fw-quote); font-style: italic; font-size: 19px; color: #f5ead8; } .fw-201 { font-family: var(--fw-text); font-size: 12px; letter-spacing: 0.08em; color: rgba(245,234,216,0.6); } /* ---------- 5. Breite und Responsive ---------------------------------- */ /* Der Entwurf lag in einem festen Kasten von 1180 px: farbige Baender und Bilder endeten mittendrin, links und rechts blieb Papier stehen. Das wirkt wie eine Seite in einer Seite. Hier laufen die Sektionen ueber die volle Breite, waehrend der Text in einer Spalte von hoechstens --fw-inhalt bleibt. Erreicht wird das ueber den seitlichen Innenabstand statt ueber eine Maximalbreite: padding-inline: max(--fw-rand, (100% - --fw-inhalt) / 2) Schmaler Schirm -> es gilt --fw-rand, also der Mindestabstand. Breiter Schirm -> die Haelfte des Ueberschusses, die Spalte bleibt mittig. Dadurch braucht keine Sektion ein zusaetzliches inneres div. */ :root { --fw-inhalt: 1180px; /* Breite der Textspalte */ --fw-rand: 46px; /* Mindestabstand zum Bildschirmrand */ } /* Container: im Entwurf hart 1180px, jetzt volle Breite. */ .fw-2 { width: 100%; max-width: none; margin: 0; /* Schneidet waagerechten Ueberlauf ab - einzelne Entwurfselemente ragen seitlich heraus, etwa das runde Abzeichen am Portraitbild. clip statt hidden, weil hidden einen Scroll-Container erzeugen und damit position: sticky brechen wuerde - daran haengen der Hero-Pin und die Kopfzeile. Und hier statt am body: Auf dem body traf das Abschneiden auch Elemente mit position: fixed. Der Knopf des mobilen Menues war dadurch zwar im Dokument, aber unsichtbar. Deshalb liegt das Menue jetzt ausserhalb dieses Containers. */ overflow-x: clip; } /* Alle Sektionen mit seitlichem Abstand bekommen die fliessende Variante. Ausgenommen: .fw-88 zentriert sich ueber eine eigene max-width, und .fw-193 ist die bildschirmfuellende Grossansicht. */ .fw-3, .fw-18, .fw-23, .fw-28, .fw-37, .fw-62, .fw-65, .fw-67, .fw-69, .fw-71, .fw-83, .fw-84, .fw-86, .fw-95, .fw-116, .fw-129, .fw-143, .fw-151, .fw-159, .fw-183 { padding-inline: max(var(--fw-rand), (100% - var(--fw-inhalt)) / 2); } .fw-88 { padding-inline: var(--fw-rand); } /* Hero: bildschirmfuellend, in der Breite wie in der Hoehe. Der Entwurf hielt das Seitenverhaeltnis ueber padding-bottom: 71.4%, das ergab ueber die volle Breite auf grossen Schirmen mehr als 1800 px Hoehe und liess unten immer einen Streifen der naechsten Sektion stehen. svh statt vh: Auf dem Handy zaehlt vh die Fensterhoehe OHNE die ein- und ausfahrende Adressleiste, das Bild wuerde also unten angeschnitten. svh nimmt die kleinste Variante, damit passt es immer. Die vh-Zeile davor ist der Rueckfall fuer aeltere Browser. Das Bild selbst liegt mit object-fit: cover darin und wird beschnitten statt verzerrt. */ .fw-11 { height: 100vh; height: 100svh; padding-bottom: 0; } /* Bildpaar und das grosse Bildband laufen bewusst randlos durch. */ /* Grosse Schriftgrade fliessend. Der Maximalwert ist jeweils exakt der Entwurfswert - auf dem Desktop aendert sich also nichts. */ .fw-24 { font-size: clamp(30px, 5.4vw, 50px); } /* H1 Hero */ .fw-29, .fw-49 { font-size: clamp(26px, 4.4vw, 44px); } /* "Warum Feierwerk?" bewusst eine Spur kleiner als die uebrigen H2. */ .fw-118 { font-size: clamp(24px, 4vw, 40px); } .fw-53, .fw-187 { font-size: clamp(24px, 3.8vw, 38px); } .fw-68, .fw-97, .fw-161 { font-size: clamp(23px, 3.6vw, 36px); } .fw-63 { font-size: clamp(22px, 3.4vw, 34px); } .fw-32, .fw-38, .fw-50, .fw-54, .fw-66, .fw-87, .fw-96, .fw-145, .fw-154 { font-size: clamp(21px, 3.2vw, 32px); } /* ---- Sehr breite Schirme ---- */ @media (min-width: 1600px) { /* Etwas mehr Luft, damit die Spalte nicht verloren wirkt. */ :root { --fw-inhalt: 1320px; } } /* ---- Tablet ---- */ @media (max-width: 1000px) { :root { --fw-rand: 34px; } .fw-28, .fw-39, .fw-143, .fw-159 { grid-template-columns: 1fr; gap: 34px; } .fw-88, .fw-132 { grid-template-columns: repeat(2, 1fr); } .fw-98, .fw-119 { grid-template-columns: repeat(2, 1fr); gap: 20px; } .fw-55 { grid-template-columns: repeat(3, 1fr); } /* Fusszeile darf umbrechen, bevor sie ganz untereinander rutscht. */ .fw-184 { flex-wrap: wrap; gap: 34px 46px; } /* Portraitbild im Ueber-mich-Block: feste 400px -> fliessend */ .fw-41 { width: 100%; max-width: 400px; } .fw-39 { justify-items: center; } /* Das Bild klebt im zweispaltigen Layout mit, waehrend der Text daneben laeuft (position: sticky). Sobald beides untereinander steht, ergibt das keinen Sinn mehr: Das Bild bliebe stehen und der Text schoebe sich darueber. Deshalb hier wieder mitlaufend. */ .fw-40 { position: static; top: auto; } } /* ---- Mobil ---- */ @media (max-width: 700px) { :root { --fw-rand: 20px; } .fw-33, .fw-88, .fw-132, .fw-98, .fw-119, .fw-55, .fw-163 { grid-template-columns: 1fr; } /* Fusszeile: vier Spalten nebeneinander werden auf dem Handy zu vier unlesbaren Schnipseln. Untereinander statt gequetscht. */ .fw-184 { flex-direction: column; gap: 26px; } .fw-34 { height: 300px; } /* Bildpaar, statt 560px */ .fw-59 { height: 460px; } /* grosses Bildband, statt 720px */ /* Sticky-Kopfzeile */ .fw-3 { height: 76px; margin-bottom: -76px; } .fw-5 { font-size: 22px; } .fw-6 { font-size: 6.1px; } /* Logo-Banderole */ .fw-18 { padding-top: 20px; padding-bottom: 20px; } .fw-19 { width: 196px; height: 114px; } .fw-20 { width: 240px; left: -23px; top: -64px; } .fw-27 { height: 140px; } /* Abstandshalter, bestimmt die Pin-Dauer */ } /* Welcher der beiden Kartensaetze zu sehen ist, steuert der Knopf "mehr sehen" ueber dieses Attribut - nicht mehr ueber Inline-Styles. Im Entwurf stand display:none inline am zweiten Satz; beim Herausloesen der Inline-Styles ist es in die Klasse .fw-83 gewandert, womit das Umschalten ins Leere lief. Zwei Attribute im Selektor, damit die Regel auch die Wischleiste unten sticht, die [data-faecher] auf display:flex setzt. */ [data-faecher][data-verborgen] { display: none; } /* ---- Karten-Faecher ---- Desktop: die Karten faechern beim Scrollen auf, Ueberfahren hebt eine an. Beides setzt Maus und Breite voraus. Schmal wird daraus eine Wischleiste mit Einrasten - dieselben Karten, andere Geste. feierwerk.js baut die Faecher-Logik unterhalb von 900px gar nicht erst auf. */ @media (max-width: 900px) { [data-faecher] { display: flex; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 4px var(--fw-rand) 24px; -webkit-overflow-scrolling: touch; } [data-faecher] [data-karte] { position: static; flex: 0 0 76%; max-width: 300px; margin-left: 0; transform: none !important; scroll-snap-align: center; transition: none; } } /* ---------- 6. Mobiles Menue ------------------------------------------ */ /* Im Entwurf nicht vorhanden. Ohne ein Menue waere die Seite auf dem Handy nur ueber die Fusszeile navigierbar. Gestaltet in der Sprache der Seite: Petrol, Sandgelb, Marcellus. */ .fw-menue-knopf { display: none; position: fixed; top: 14px; right: var(--fw-rand); z-index: 120; width: 54px; height: 54px; padding: 0; border: 1px solid rgba(242,209,140,0.5); border-radius: 999px; background: rgba(13,79,84,0.94); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .fw-menue-knopf span { display: block; width: 22px; height: 1.5px; background: var(--fw-sand); transition: transform 0.3s ease, opacity 0.2s ease; } .fw-menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .fw-menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .fw-menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .fw-menue { position: fixed; inset: 0; z-index: 110; background: #0d4f54; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 90px var(--fw-rand) 40px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; overflow-y: auto; } .fw-menue[data-offen] { opacity: 1; visibility: visible; } .fw-menue a { font-family: var(--fw-display); font-size: clamp(26px, 7vw, 38px); line-height: 1.5; color: var(--fw-sand); border-bottom: 1px solid rgba(242,209,140,0.2); padding: 10px 0; } .fw-menue a:last-of-type { margin-top: 26px; border: 1px solid var(--fw-sand); border-radius: 999px; padding: 14px 26px; text-align: center; font-size: clamp(19px, 5vw, 24px); } .fw-menue a:hover, .fw-menue a:focus-visible { color: #fffcf4; } /* Bis 900px statt bis 700px: Auf einem Tablet oder einem Handy im Querformat blieb sonst die volle Linkleiste stehen, die dort schon zu eng wird - und der Menueknopf fehlte. */ @media (max-width: 900px) { .fw-menue-knopf { display: flex; } .fw-7 { display: none; } /* Linkleiste der Kopfzeile weicht dem Menue */ } /* ---------- 7. Bewegung abschalten, wenn das System es verlangt -------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- 8. Konfetti um die "04" ----------------------------------- */ /* Der Entwurf streute sechs Schnipsel um die runde 04 (fw-109 bis fw-114). Hier sind es vierzehn, kleiner und unregelmaessiger verteilt. Entwurf jetzt Anzahl 6 14 Groesse 3-7 px 2-4 px Verteilung dicht ungleichmaessig, mit Klumpen und Luecken Zwei Dinge sind hier wichtig: 1. FESTER BEZUGSPUNKT. Die Flocken sitzen auf left: calc(50% + Xpx). Ohne feste Breite waere fw-108 so breit wie die Beschriftung darunter, die 50 % haetten also an der Textlaenge gehangen - beim Umbenennen von "Hochzeit" in "Fest" ist genau das passiert und das Konfetti wanderte rund 22 px nach links in den Pfeil von Schritt 03. Die feste Breite von 30 px entspricht dem Durchmesser der 04, damit ist deren Mitte der Bezugspunkt - unabhaengig davon, wie die Beschriftung spaeter heisst. 2. NACH LINKS BEGRENZT. Von der Mitte der 04 bis zur Pfeilspitze von Schritt 03 sind es nur rund 41 px. Die Flocken bleiben deshalb rechts von -29 px. Nach rechts ist Platz, dorthin streut es weiter - was zum letzten Schritt auch passt: das Konfetti fliegt nach aussen. Die sechs Entwurfsklassen werden hier ueberschrieben statt in Abschnitt 4 geaendert, damit die maschinelle Extraktion unangetastet bleibt. */ /* Bezugspunkt festnageln: so breit wie die 04 selbst. */ .fw-108 { width: 30px; } /* -- die sechs Flocken aus dem Entwurf: Position und Groesse neu -- */ .fw-109 { left: calc(50% + -3px); top: calc(50% + -23px); width: 3px; height: 2px; } .fw-110 { left: calc(50% + -3px); top: calc(50% + -32px); width: 3px; height: 3px; } .fw-111 { left: calc(50% + -29px); top: calc(50% + -23px); width: 2px; height: 4px; } .fw-112 { left: calc(50% + 14px); top: calc(50% + -20px); width: 4px; height: 2px; } .fw-113 { left: calc(50% + 7px); top: calc(50% + -22px); width: 2px; height: 2px; } .fw-114 { left: calc(50% + 22px); top: calc(50% + -26px); width: 2px; height: 3px; } /* -- acht zusaetzliche Flocken -- Gemeinsames einmal in .fw-konfetti, je Flocke nur Position, Groesse, Drehung. Sandgelb ist ueber alle Ecken verteilt, sonst klumpt die Farbe. */ .fw-konfetti { position: absolute; background: rgba(16,99,105,0.4); border-radius: 999px; /* Punkt */ pointer-events: none; } .fw-konfetti-sand { background: var(--fw-sand, #f2d18c); } .fw-konfetti-band { border-radius: 1px; } /* laenglicher Schnipsel */ .fw-k7 { left: calc(50% + 23px); top: calc(50% + 13px); width: 3px; height: 2px; transform: rotate(-18deg); } .fw-k8 { left: calc(50% + 22px); top: calc(50% + -8px); width: 2px; height: 2px; } .fw-k9 { left: calc(50% + 26px); top: calc(50% + -20px); width: 2px; height: 4px; transform: rotate(38deg); background: rgba(16,99,105,0.45); } .fw-k10 { left: calc(50% + 35px); top: calc(50% + -22px); width: 3px; height: 2px; transform: rotate(-26deg); } .fw-k11 { left: calc(50% + 38px); top: calc(50% + -9px); width: 3px; height: 3px; background: rgba(16,99,105,0.32); } .fw-k12 { left: calc(50% + 17px); top: calc(50% + 17px); width: 2px; height: 3px; transform: rotate(62deg); background: rgba(16,99,105,0.38); } .fw-k13 { left: calc(50% + -28px); top: calc(50% + 11px); width: 2px; height: 2px; } .fw-k14 { left: calc(50% + 37px); top: calc(50% + 10px); width: 2px; height: 2px; transform: rotate(-40deg); background: rgba(16,99,105,0.42); } /* ---------- 9. "Warum Feierwerk": Hintergrund ------------------------- */ /* Der Entwurf gab dieser Sektion ein helles Mintgruen (#e1eecc) - den einzigen Gruenton der ganzen Seite. Hier liegt jetzt das Petrol der Kopfzeile (#0d4f54), leicht durchscheinend ueber dem Papier. WARUM 0.86 UND NICHT WENIGER Zwischen den Werten liegt eine Zone, in der keine Textfarbe funktioniert: der Grund ist dort zu dunkel fuer dunkle Schrift und zu hell fuer helle. Alpha ergibt brauchbar mit bis 0.24 #bdc5b8 dunkler Schrift (Entwurfsfarben) 0.32 - 0.72 ... NICHTS - Finger weg ab 0.80 #3b6e6e heller Schrift 0.86 ist der hellste Wert der oberen Zone, bei dem auch der 15px-Fliesstext noch besteht (5.0:1). Bei 0.80 waeren es nur 4.4:1. Zum Nachstellen innerhalb der oberen Zone: 0.80 #3b6e6e heller, Fliesstext grenzwertig 0.86 #2d6566 <- aktuell 0.92 #205b5f kraeftiger 1.00 #0d4f54 volles Kopfzeilen-Petrol Ergebnis #2d6566 ist R45 G101 B102 - Gruen und Blau gleichauf, also klares Petrol. Das alte Mintgruen war R225 G238 B204, dort lag Gruen deutlich ueber beiden anderen. Die hellen Textfarben stammen aus der Termin-Sektion, dort loest der Entwurf "Text auf Petrol" bereits. Kontrast gegen #2d6566: Ueberschrift Sandgelb 4.5:1 Punkt-Titel aktiv Sandgelb 4.5:1 Punkt-Titel ruhend 80 % 4.2:1 Punkt-Text 92 % 5.0:1 ACHTUNG: setupPunkte() in feierwerk.js setzt beim Ueberfahren und Anklicken weitere Farben. Die sind dort mit umgestellt - eine Aenderung hier allein genuegt nicht. */ .fw-116 { background: rgba(13, 79, 84, 0.86); } .fw-118 { color: var(--fw-sand, #f2d18c); } /* "Warum Feierwerk?" */ .fw-123 { color: rgba(245,234,216,0.80); } /* Punkt-Titel, ruhend */ .fw-125 { background: rgba(242,209,140,0.45); } /* Trennstrich */ .fw-126 { border-top-color: rgba(242,209,140,0.55); } /* Pfeil nach unten */ .fw-127 { color: rgba(245,234,216,0.92); } /* Punkt-Text */ /* ---------- 10. Die vier Schritte: Ziffern und Pfeile ----------------- */ /* Drei Korrekturen an der Arbeitsweise-Sektion: 1. ZIFFERN GROESSER. 12px waren im Verhaeltnis zur Beschriftung (21px) zu zurueckhaltend. Jetzt 16px. Die Farbe #a19786 des Entwurfs kam damit auf nur 2.6:1 - fuer 16px zu wenig, deshalb #766e62 mit 4.6:1 (derselbe Farbton, um gut ein Viertel abgedunkelt). 2. PFEILSPITZEN SASSEN SCHIEF. In .fw-103 stand ein transform: translateY(1px) - eine Notkorrektur aus dem Entwurf, die den Pfeil um genau diesen Pixel unter die Linie gedrueckt hat. Rechnerisch fallen die Mitten von Linie und Pfeil ohnehin zusammen, sobald beide mit align-items: center zentriert sind. Der Versatz ist also ersatzlos gestrichen. Die feste, gerade Reihenhoehe verhindert zusaetzlich, dass die 1px hohe Linie auf einem halben Pixel landet und gerundet wird. 3. MEHR LUFT. Die Reihe mit Linie und Pfeil bekommt eine Mindesthoehe, der Abstand zur Beschriftung darunter waechst von 12px auf 18px. Der Pfeil ist im gleichen Zug von 8px auf 10px Hoehe gewachsen, sonst wirkt er neben den groesseren Ziffern verloren. */ .fw-101 { font-size: 16px; color: #766e62; margin-right: 12px; } .fw-100 { min-height: 26px; /* gerade Zahl: keine halben Pixel */ } .fw-103 { border-top-width: 5px; border-bottom-width: 5px; border-left-width: 9px; flex-basis: 9px; transform: none; /* war translateY(1px) - siehe oben */ } /* Abstand zur Beschriftung, in allen vier Schritten gleich */ .fw-99, .fw-106, .fw-107 { gap: 18px; } /* Schritt 04: Ziffer im Kreis mitwachsen lassen. Der Kreis bleibt bewusst klein genug, dass das Konfetti aussen frei bleibt - die innersten Flocken liegen 18px von der Mitte entfernt. */ .fw-115 { font-size: 16px; width: 32px; height: 32px; margin: -7.5px 0; /* (32 - 17) / 2, damit der Kreis mittig ueberlappt */ } /* ---------- 11. Die vier Ziffern als weisse Kreise -------------------- */ /* Im Entwurf standen 01 bis 03 als kleine Ziffern frei neben der Linie, nur die 04 sass in einem Kreis. Jetzt bekommen alle vier denselben weissen Kreis mit leichtem Schatten - die Schritte lesen sich damit als Kette von Stationen statt als drei Beschriftungen plus ein Sonderfall. Der Schatten nutzt den Farbton, den der Entwurf auch sonst fuer Schatten verwendet: rgba(46,43,37,...). Kein letter-spacing in den Kreisen. Es haengt der Zahl rechts einen Zwischenraum an, wodurch sie im Kreis leicht nach links rutschen wuerde. Die 04 behaelt Petrol und ihren duennen Rand - sie ist das Ziel der Kette und darf sich weiterhin abheben. */ .fw-101 { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(46,43,37,0.14); display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-size: 19px; letter-spacing: 0; margin-right: 14px; } /* Die Reihe muss den Kreis fassen; gerade Zahl, damit die 1px-Linie nicht auf einem halben Pixel landet. */ .fw-100 { min-height: 42px; } /* Schritt 04: gleicher Kreis, aber Petrol als Akzent. */ .fw-115 { width: 42px; height: 42px; flex: 0 0 42px; font-size: 19px; background: #fff; box-shadow: 0 2px 6px rgba(46,43,37,0.14); margin: -12.5px 0; /* (42 - 17) / 2, damit der Kreis mittig ueberlappt */ } /* ---------- 12. Ornament bei "Über mich" und "Leistungen" ------------- */ /* Der Entwurf hatte hier kein eigenes Ornament: Er blies das Logo-SVG auf Ueberbreite auf und zeigte durch ein kleines Fenster mit overflow: hidden nur den Sonnenausschnitt. Das war ein Behelf. Jetzt liegt das Ornament als eigene, freigestellte Datei vor: assets/img/feierwerk-merseburg-ornament-petrol.webp Aus "Ornamentale Trennlinie.png" von Miriam erzeugt. Die Vorlage war Gold auf weissem Grund. Der Weg zur freigestellten Fassung: 1. weissen Rand abschneiden -> 334 x 113 2. Helligkeit in Deckkraft umrechnen -> dunkel wird deckend 3. Bereich strecken, das helle Gold lag sonst bei nur 20 % Deckung 4. Petrol #106369 mit dieser Maske einfaerben Soll die Farbe je wechseln, muss die Datei neu erzeugt werden - Schritt 4 mit dem neuen Farbwert genuegt. Die Fenster behalten Groesse und Position aus dem Entwurf (176 x 116 bzw. 76 x 50), damit sich am Seitenrhythmus nichts verschiebt. Statt eines Ausschnitts steht das Ornament nun vollstaendig und mittig darin. Die Deckkraft des Wasserzeichens unter "Über mich" ist weiter unten nachgezogen, bei den Leistungen steuert sie setupLeistungen(). */ .fw-46, .fw-90 { display: flex; align-items: center; justify-content: center; overflow: visible; width: auto; height: auto; } .fw-47, .fw-91 { position: static; height: auto; left: auto; top: auto; } /* GROESSE: nicht die alte Fensterbreite uebernehmen! Die Fenster zeigten nur 19 % der Ornamentbreite - den herangezoomten Mittelteil. Haette man das ganze Ornament in dieselbe Breite gesetzt, waere das Motiv rund fuenfmal kleiner erschienen. Massgabe ist deshalb die HOEHE des Motivs, die vorher zu sehen war: Über mich 34.7 Einheiten x 3.03 px = 105 px -> 311 px breit Leistungen 34.7 Einheiten x 1.31 px = 45 px -> 134 px breit Das Verhaeltnis der beiden zueinander bleibt damit 2.32 wie zuvor (frueher 176/76, jetzt 311/134). */ .fw-47 { width: 311px; max-width: 311px; } /* Über mich */ .fw-91 { width: 134px; max-width: 134px; } /* Leistungen */ /* Das Wasserzeichen behaelt seinen Mittelpunkt (180 / -60 in fw-45), nur die Kanten wandern mit der neuen Groesse. DECKKRAFT: 9 % stammten aus dem Entwurf, in dem hier nur der kleine herangezoomte Sonnenausschnitt sass. Das vollstaendige Ornament ist deutlich groesser und traegt viel mehr Flaeche, bei gleicher Deckkraft draengte es sich neben die Ueberschrift. 5 % lassen es wieder als Untergrund lesen statt als zweites Motiv. */ /* Deckkraft des Wasserzeichens. Entwurf 0.09, zwischenzeitlich 0.05 und damit kaum wahrnehmbar, dann 0.10. Jetzt 0.14 - das Ornament traegt, bleibt aber Hintergrund und draengt sich nicht vor die Ueberschrift. Dunkelste Stelle ergibt #d6d8c9 auf dem Papier. Nur die Deckkraft, nicht die Groesse: die Breite steht in .fw-47 und ist bewusst unveraendert geblieben. 0.10 #dedccd vorher 0.14 #d6d8c9 <- aktuell 0.18 #ccd2c4 deutlich praesent 0.24 #becabd nicht mehr subtil */ .fw-46 { left: 24px; top: -112px; opacity: 0.14; } /* ---------- 13. Schritt 04 auf eine Linie mit 01 bis 03 --------------- */ /* Der vierte Schritt hing schief in der Reihe. Zwei Ursachen, beide noch aus dem Entwurf, in dem nur die 04 einen Kreis hatte: 1. WAAGERECHT. Der Konfetti-Rahmen .fw-108 war 30px breit - das war einmal der Durchmesser der 04. Seit Abschnitt 11 misst der Kreis 42px und stand mit justify-content: center 6px links aus der Spalte heraus, waehrend 01 bis 03 buendig an der Spaltenkante beginnen. 2. SENKRECHT. .fw-108 war 17px hoch, die Reihen von 01 bis 03 sind es 42px. Der Kreis hing per margin: -12.5px 0 mittig darin, seine Mitte lag damit 12.5px hoeher als die der anderen drei - und die Beschriftung "Euer Event!" entsprechend 25px zu hoch. Der Rahmen bekommt jetzt beide Masse des Kreises. Damit liegt seine Mitte wieder genau auf der Kreismitte, der Bezugspunkt calc(50% + X) der vierzehn Flocken bleibt also unveraendert gueltig. Der Kreis selbst darf etwas groesser sein, 48 statt 42px. Er waechst nach links buendig mit der Spaltenkante und nach oben/unten um je 3px ueber die 42px-Reihe hinaus (margin: -3px 0), seine Mitte bleibt dabei auf der Hoehe der drei anderen Kreise. Weil der Radius von 21 auf 24px steigt, wandern die fuenf innersten Flocken ein Stueck nach aussen - sonst verschwinden sie hinter dem weissen Kreis, der als position: relative ueber ihnen liegt. */ .fw-108 { width: 48px; height: 42px; /* gleiche Reihenhoehe wie .fw-100 */ } .fw-115 { width: 48px; height: 48px; flex: 0 0 48px; font-size: 21px; margin: -3px 0; /* (48 - 42) / 2, Mitte bleibt auf 21px */ } /* Beschriftung und Fliesstext sollen sich verhalten wie in 01 bis 03: ueber die volle Spaltenbreite, nicht auf Inhaltsbreite geschrumpft. */ .fw-106, .fw-107 { align-items: stretch; } /* Die fuenf Flocken, die sonst unter dem groesseren Kreis lagen. */ .fw-109 { left: calc(50% + -3px); top: calc(50% + -27px); } .fw-112 { left: calc(50% + 16px); top: calc(50% + -23px); } .fw-113 { left: calc(50% + 8px); top: calc(50% + -26px); } .fw-k8 { left: calc(50% + 25px); top: calc(50% + -9px); } .fw-k12 { left: calc(50% + 19px); top: calc(50% + 19px); } /* ---------- 14. Bildunterschriften im Bildpaar lesbar machen ---------- */ /* "Trauung im Schlosshof" und "Gartenfest im Herbst" standen im Entwurf nur mit einem Textschatten auf dem Foto. Ueber hellen Bildstellen reicht das nicht: weisse Schrift auf weissem Bild ergibt 1:1 Kontrast, der Schatten rettet das nicht. Deshalb ein weicher schwarzer Verlauf am unteren Rand jeder Kachel. Er liegt als ::after auf dem Container, das Markup bleibt unberuehrt. Die Stufen sind in PIXELN vom unteren Rand gemessen, nicht in Prozent. Grund: die Kacheln sind am Desktop 560 px hoch, mobil 300 px. Mit Prozentwerten waere der Verlauf mobil genau dort schon zu schwach, wo die Schrift steht. So sitzt die kraeftige Zone immer an derselben Stelle. Die Schrift steht 26 bis 39 px ueber der Unterkante, dort liegt die Deckung bei 0.56 bis 0.60. Schlimmster Fall - weisses Bild darunter: 0.56 -> 4.8:1 0.60 -> 5.6:1 (Soll 4.5:1) Zum Vergleich: der Verlauf des Entwurfs im Pinterest-Abschnitt (fw-61) geht bis 0.78. Dieser hier ist also zurueckhaltender. */ .fw-34::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) calc(100% - 210px), rgba(0, 0, 0, 0.18) calc(100% - 130px), rgba(0, 0, 0, 0.52) calc(100% - 55px), rgba(0, 0, 0, 0.66) 100% ); } /* Die Beschriftung muss ueber dem Verlauf liegen - ohne z-index wuerde sie verdeckt, weil ::after im Markup nach ihr kommt. */ .fw-36 { z-index: 2; } /* ---------- 15. Leistungen: Text anreissen statt ausbreiten ----------- */ /* Der Entwurf hatte die Aufklapp-Mechanik bereits angelegt - .fw-93 stand auf grid-template-rows: 0fr mit passender Transition. Nur hat das Skript sie ausgehebelt, indem es immer 1fr setzte; sichtbar blieb allein ein Wechsel der Deckkraft, der ganze Text stand also von Anfang an da. Jetzt stehen eingeklappt genau zwei Zeilen, darunter ein Knopf. Ein Klick oeffnet genau die angeklickte Karte, die anderen schliessen sich. Statt 0fr/1fr laeuft die Begrenzung ueber max-height, weil fr-Werte sich nicht gegen eine feste Hoehe animieren lassen - und zwei Zeilen sind nun einmal eine feste Hoehe. Die Einheit lh ist genau dafuer da: 2lh sind zwei Zeilenhoehen, unabhaengig von Schriftgrad und Zeilenabstand. Die em-Zeile davor ist der Rueckfall fuer aeltere Browser. Ohne JavaScript bleibt der Text auf zwei Zeilen gekuerzt, aber lesbar - .fw-93 hatte im Entwurf opacity: 0 und waere sonst unsichtbar. */ /* Ruhezustand der Titel: der Entwurf setzte #9a9488 und kam damit auf 2.5:1. Da jetzt alle drei Karten eingeklappt starten, waeren alle drei Ueberschriften blass. Petrol liegt bei 5.9:1. */ .fw-92 { color: var(--fw-petrol, #106369); } .fw-93 { display: block; position: relative; opacity: 1; width: 100%; } .fw-94 { display: block; overflow: hidden; max-height: calc(2 * 1.75em); /* Rueckfall: Zeilenabstand x 2 */ max-height: 2lh; /* exakt zwei Zeilen */ transition: max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } [data-leistung][data-aktiv] .fw-94 { max-height: 20em; } /* Weicher Auslauf am Textende, solange eingeklappt - macht sichtbar, dass da noch etwas kommt. Papierfarbe, denn die Sektion hat keinen eigenen Hintergrund. */ .fw-93::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5em; background: linear-gradient(180deg, rgba(245,234,216,0), #f5ead8); pointer-events: none; transition: opacity 0.3s ease; } [data-leistung][data-aktiv] .fw-93::after { opacity: 0; } .fw-mehr { font-family: var(--fw-text); font-size: 14px; font-weight: 600; color: var(--fw-petrol, #106369); background: none; border: 0; padding: 2px 4px; cursor: pointer; } .fw-mehr:hover { color: var(--fw-petrol-dunkel, #0a4d52); } /* ---------- 16. Leistungen: nur die offene Karte in voller Deckkraft -- */ /* Ist eine der drei Karten aufgeklappt, treten die beiden anderen zurueck. Vorher standen alle drei gleich kraeftig da und der aufgeklappte Text musste sich seine Aufmerksamkeit allein ueber die Hoehe holen. Das Attribut data-blass setzt setupLeistungen() - immer genau auf den Karten ohne data-aktiv und nur, solange ueberhaupt eine Karte offen ist. Im Ruhezustand (alle zu) traegt es keine Karte, dann sind wieder alle drei gleichwertig. 0.5 ist bewusst deutlich: der angerissene Fliesstext faellt damit auf rund 2.5:1 und ist nicht mehr komfortabel lesbar. Das ist hier in Ordnung, weil es ein Zustand auf Abruf ist - Mauszeiger drauf oder Tastaturfokus hinein hebt die Karte sofort auf 0.85, ein Klick auf 1. Ohne JavaScript wird das Attribut nie gesetzt, dann bleibt alles voll deckend. */ [data-leistung] { transition: opacity 0.35s ease; } [data-leistung][data-blass] { opacity: 0.5; } [data-leistung][data-blass]:hover, [data-leistung][data-blass]:focus-within { opacity: 0.85; } /* ---------- 17. Konfetti mit den groesseren Kreisen mitwachsen -------- */ /* Die Ziffernkreise sind in Abschnitt 11 und 13 von 30px auf 48px gewachsen. Die vierzehn Schnipsel standen aber noch auf den Werten aus Abschnitt 8, die fuer den kleinen Kreis gedacht waren - die Wolke sass dadurch eng am Rand und die Flocken wirkten neben dem groesseren Kreis zu fein. Zwei Aenderungen, beide bewusst zurueckhaltend: 1. WOLKE WEITER. Alle Abstaende zur Mitte mal 1.18. Der innerste Schnipsel liegt damit 31px statt 26px von der Mitte entfernt, der aeusserste 50px statt 42px. Der Kreisradius ist 24px, es bleiben also weiter rund 7px Luft zwischen Kreiskante und erster Flocke. 2. SCHNIPSEL GROESSER. Je Kante ein Pixel mehr (2->3, 3->4, 4->5). Weniger geht nicht, ein halber Pixel wuerde die kleinen Punkte nur verwaschen. Die Positionen sind als linke obere Ecke notiert, gerechnet wurde aber mit den Mittelpunkten - deshalb ist in jedem Wert die halbe neue Groesse schon abgezogen. PLATZ NACH LINKS. Abschnitt 8 hielt die Flocken rechts von -29px, weil die Pfeilspitze von Schritt 03 damals 41px entfernt lag. Seit der Rahmen .fw-108 48px breit ist (Abschnitt 13), liegt die Mitte 24px von der Spaltenkante entfernt, mit den 26px Spaltenabstand sind es also 50px bis zur Pfeilspitze. Die neue Grenze von -35px laesst davon noch 15px frei; auf Tablet-Breite mit 20px Spaltenabstand sind es 9px. Nach unten reicht k12 jetzt 5px unter den Rahmen. Bis zur Beschriftung "Euer Event!" sind es 18px Abstand, es bleiben also 13px Luft. */ .fw-109 { left: calc(50% + -4px); top: calc(50% + -32px); width: 4px; height: 3px; } .fw-110 { left: calc(50% + -4px); top: calc(50% + -38px); width: 4px; height: 4px; } .fw-111 { left: calc(50% + -35px); top: calc(50% + -27px); width: 3px; height: 5px; } .fw-112 { left: calc(50% + 19px); top: calc(50% + -27px); width: 5px; height: 3px; } .fw-113 { left: calc(50% + 9px); top: calc(50% + -31px); width: 3px; height: 3px; } .fw-114 { left: calc(50% + 26px); top: calc(50% + -31px); width: 3px; height: 4px; } .fw-k7 { left: calc(50% + 27px); top: calc(50% + 15px); width: 4px; height: 3px; } .fw-k8 { left: calc(50% + 29px); top: calc(50% + -11px); width: 3px; height: 3px; } .fw-k9 { left: calc(50% + 30px); top: calc(50% + -24px); width: 3px; height: 5px; } .fw-k10 { left: calc(50% + 41px); top: calc(50% + -26px); width: 4px; height: 3px; } .fw-k11 { left: calc(50% + 45px); top: calc(50% + -11px); width: 4px; height: 4px; } .fw-k12 { left: calc(50% + 22px); top: calc(50% + 22px); width: 3px; height: 4px; } .fw-k13 { left: calc(50% + -33px); top: calc(50% + 13px); width: 3px; height: 3px; } .fw-k14 { left: calc(50% + 43px); top: calc(50% + 11px); width: 3px; height: 3px; } /* ---------- 17. Kontaktspalte: Strich vor den Partnern --------------- */ /* Die rechte Spalte hat drei Bloecke, jeder mit einem Strich obendrauf. Die Abstaende waren ungleich: Strich vor "WO" 26 px darueber (der gap von .fw-171), 16 px darunter Strich vor "Partnern" 26 + 12 px darueber (margin-top), 34 px darunter Das margin-top faellt weg, damit der Strich denselben Abstand zum Text darueber hat wie der andere. Damit die Ueberschrift dabei nicht mit nach oben rutscht, waechst das padding im gleichen Mass mit: 34 + 12 = 46 px. Der Strich wandert also nach oben, der Text bleibt stehen, dazwischen entsteht Luft. Die braucht es dort auch: "Mit welchen Partnern arbeite ich?" steht in Bad Script und ist um 3 Grad gedreht, Drehpunkt links. Bei rund 340 px Textlaenge steigt das rechte Ende um etwa 18 px an und ragt damit ueber seinen Textkasten hinaus. Von den 34 px blieben real nur 16 px bis zum Strich - daher der geklemmte Eindruck. Jetzt sind es 28 px. */ .fw-176 { margin-top: 0; padding-top: 46px; } /* ---------- 18. Kontaktformular --------------------------------------- */ /* Der Entwurf hatte nur die Optik: keine
, der Absender war ein Link. Hier kommt dazu, was ein echtes Formular braucht. Die Feldklassen des Entwurfs (fw-163 bis fw-170) bleiben unveraendert. */ /* Honigtopf. Nicht display:none - manche Skripte erkennen das und lassen das Feld dann aus. So steht es ausserhalb des Sichtfelds, bleibt aber technisch vorhanden. */ .fw-honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Der Absender war ein , ist jetzt ein