/* ========================================================================== Studio 207 – Hauptstylesheet 1. Grundlagen 2. Typografie 3. Buttons 4. Kopf 5. Abschnitte & Blöcke 6. Archive & Beiträge 7. Formular 8. Footer 9. Signature Style 10. Mobil ========================================================================== */ :root { --s-paper: #F6F6F4; --s-paper-2: #EBEBE7; --s-white: #fff; --s-ink: #0F1012; --s-ink-2: #4A4B50; --s-muted: #8C8D92; --s-wine: #7A1F2E; --s-wine-d: #5E1622; --s-wine-l: #E3A6AE; --s-dark: #121317; --s-line: rgba(15, 16, 18, .12); --s-sans: var(--wp--preset--font-family--inter, Inter, system-ui, sans-serif); --s-display: var(--wp--preset--font-family--inter-display, "Inter Display", Inter, system-ui, sans-serif); --s-pad: max(64px, calc((100% - 1280px) / 2)); --s-radius: 16px; --sig: .7; } /* 1. Grundlagen ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 110px; } html, body { overflow-x: clip; } body { margin: 0; background: var(--s-paper); color: var(--s-ink); font-family: var(--s-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } p a, .s207-prose a, dd a { color: var(--s-wine); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed !important; top: 10px; left: 10px; z-index: 999; width: auto; height: auto; clip: auto; padding: 12px 18px; background: var(--s-ink); color: #fff; border-radius: 8px; } :focus-visible { outline: 2px solid var(--s-wine); outline-offset: 3px; } .s207-container { width: 100%; max-width: calc(1280px + 128px); margin: 0 auto; padding: 0 64px; } .s207-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* 2. Typografie ----------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--s-display); font-weight: 600; color: inherit; margin: 0; } h1 { font-size: clamp(2.75rem, 6vw, 5.5rem); letter-spacing: -.045em; line-height: .98; } h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.04em; line-height: 1.02; } h3 { font-size: clamp(1.25rem, 1.7vw, 1.75rem); letter-spacing: -.03em; line-height: 1.12; } h1 em, h2 em, h3 em { font-style: normal; color: var(--s-wine); } p { margin: 0; } .s207-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--s-wine); } .s207-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; flex-shrink: 0; } .s207-lead { font-size: clamp(1.0625rem, 1.3vw, 1.3125rem); line-height: 1.55; color: var(--s-ink-2); max-width: 640px; } .s207-meta { font-size: 14px; color: var(--s-muted); } .s207-kicker { font-size: 11px !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--s-wine); } .s207-num { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--s-wine); } .s207-note { font-size: 14px; color: var(--s-muted); text-align: center; } /* 3. Buttons -------------------------------------------------------------- */ .wp-element-button, .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; border-radius: 10px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; transition: background .2s, color .2s, border-color .2s, transform .2s; cursor: pointer; border: 0; text-decoration: none; } .wp-element-button:hover, .wp-block-button__link:hover { background: var(--s-wine-d); color: #fff; } .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; } .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--s-ink); border: 1.5px solid var(--s-ink); padding: 14px 25px; } .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--s-ink); color: #fff; } .wp-block-button.s207-light > .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .7); } .wp-block-button.s207-light > .wp-block-button__link:hover { background: #fff; color: var(--s-ink); } .s207-arrow .wp-block-button__link::after, .s207-arrow-link::after { content: "→"; font-weight: 400; transition: transform .2s; } .s207-arrow .wp-block-button__link:hover::after, .s207-arrow-link:hover::after { transform: translateX(3px); } /* 4. Kopfbereich ---------------------------------------------------------- */ .s207-topbar { background: var(--s-ink); color: #cfcfd2; font-size: 13px; } .s207-topbar .s207-container { display: flex; justify-content: space-between; align-items: center; min-height: 42px; gap: 24px; } .s207-topbar .l, .s207-topbar .r { display: flex; gap: 26px; align-items: center; } .s207-topbar strong { color: #fff; font-weight: 500; } .s207-topbar a:hover { color: #fff; } .s207-lang { display: inline-flex; border: 1px solid rgba(255, 255, 255, .25); border-radius: 4px; overflow: hidden; } .s207-lang a { padding: 2px 8px; font-size: 12px; } .s207-lang a[aria-current] { background: rgba(255, 255, 255, .15); color: #fff; } .s207-header { position: sticky; top: 0; z-index: 100; background: rgba(246, 246, 244, .94); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--s-line); transition: box-shadow .2s; } .admin-bar .s207-header { top: 32px; } .s207-header.is-scrolled { box-shadow: 0 8px 30px rgba(15, 16, 18, .06); } .s207-header-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 92px; } .s207-logo { font-family: var(--s-display); font-weight: 700; font-size: 26px; letter-spacing: -.04em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--s-ink); } .s207-logo .b { color: var(--s-wine); } .s207-logo.is-light { color: #fff; } .s207-logo.is-light .b { color: var(--s-wine-l); } .s207-logo-img img { max-height: 52px; width: auto; } .s207-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; } .s207-menu > li { position: relative; display: flex; align-items: center; } .s207-menu > li > .s207-ml { padding: 10px 14px; font-size: 15px; font-weight: 500; border-radius: 8px; transition: color .15s; } .s207-menu > li > .s207-ml:hover, .s207-menu > li > .s207-ml[data-active] { color: var(--s-wine); } .s207-sub-toggle { width: 22px; height: 30px; margin-left: -10px; background: none; border: 0; cursor: pointer; color: inherit; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .s207-sub-toggle::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; } .s207-menu > li.is-open .s207-sub-toggle::before { transform: rotate(225deg) translate(-1px, -1px); } .s207-dd { position: absolute; top: calc(100% + 18px); left: -20px; min-width: 560px; background: #fff; border-radius: 18px; box-shadow: 0 30px 70px rgba(15, 16, 18, .16); padding: 18px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; } .s207-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } .s207-menu > li:hover > .s207-dd, .s207-menu > li:focus-within > .s207-dd, .s207-menu > li.is-open > .s207-dd { opacity: 1; visibility: visible; transform: none; } .s207-dd .sub-menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .s207-dd .sub-menu a { display: block; padding: 14px 16px; border-radius: 12px; transition: background .15s; } .s207-dd .sub-menu a:hover, .s207-dd .sub-menu .current-menu-item > a { background: var(--s-paper); } .s207-dd .t { display: block; font-weight: 600; font-size: 15px; } .s207-dd .d { display: block; font-size: 13.5px; color: var(--s-ink-2); margin-top: 2px; line-height: 1.4; } .s207-header-cta { padding: 13px 22px; font-size: 15px; white-space: nowrap; } .s207-burger, .s207-nav-mobile-extra { display: none; } .s207-crumb ol { list-style: none; margin: 0; padding: 30px 0 0; display: flex; flex-wrap: wrap; gap: 0; font-size: 14px; color: var(--s-muted); } .s207-crumb li + li::before { content: "/"; margin: 0 10px; opacity: .5; } .s207-crumb a { color: var(--s-ink-2); } .s207-crumb a:hover { color: var(--s-wine); } .s207-crumb [aria-current] { color: var(--s-ink); } /* 5. Abschnitte & Blöcke -------------------------------------------------- */ .s207-blocks > *, .s207-main > .s207-section { margin: 0; } .s207-section { padding: 120px var(--s-pad); margin: 0; } .s207-section.is-tight-top { padding-top: 0; } .s207-section.s207-subhero { padding-top: 40px; padding-bottom: 100px; } .s207-section.is-alt { background: var(--s-paper-2); } .s207-section.is-white { background: #fff; } .s207-section.is-dark { background: var(--s-dark); color: #EFEFF1; } .s207-section.is-dark .s207-eyebrow, .s207-section.is-dark .s207-kicker { color: var(--s-wine-l); } .s207-section.is-dark .s207-lead { color: #b9b9bf; } .s207-section.is-dark h2 em { color: var(--s-wine-l); } .s207-section.is-stats { padding-top: 0; padding-bottom: 0; } .s207-section > * + * { margin-block-start: 0; } /* Kopfzeile eines Abschnitts: Titel links, Text rechts */ .wp-block-columns.s207-head { gap: 60px; align-items: flex-end !important; margin: 0 0 56px; } .wp-block-columns.s207-head > .wp-block-column:last-child { display: flex; flex-direction: column; align-items: flex-start !important; justify-content: flex-end; } .wp-block-columns.s207-head > .wp-block-column:last-child:has(.wp-block-buttons) { align-items: flex-end !important; } .s207-head h2 { margin-top: 14px; max-width: 780px; } .s207-head h1 { margin-top: 18px; } .s207-head .s207-lead { font-size: 18px; max-width: 440px; } .s207-head-xl { margin-bottom: 64px !important; } .s207-archive-head .s207-head, .s207-single .s207-subhero .s207-head { display: grid; grid-template-columns: 1.25fr 1fr; gap: 80px; align-items: end; } .s207-single .s207-subhero { padding-bottom: 50px; } .s207-single .s207-subhero h1 { margin-top: 18px; } .s207-postnav > div:nth-child(2):not(:last-child) { text-align: center; } .s207-postnav > div:last-child { text-align: right; } .s207-postnav > div { flex: 1; } .s207-archive-head h1 { margin-top: 18px; } .s207-section.s207-archive-head { padding-bottom: 20px; } .wp-block-columns { margin-bottom: 0; } .wp-block-image { margin: 0; } .wp-block-image img { border-radius: var(--s-radius); width: 100%; } /* Hero (Cover-Block) */ .wp-block-cover.s207-hero { padding: 80px var(--s-pad) !important; align-items: center; justify-content: flex-start; color: #fff; } .s207-hero .wp-block-cover__background { background: linear-gradient(90deg, rgba(10, 10, 12, .74) 0%, rgba(10, 10, 12, .32) 55%, rgba(10, 10, 12, .08) 100%) !important; opacity: 1 !important; } .s207-hero .wp-block-cover__inner-container { max-width: 880px; width: 100%; margin: 0 !important; z-index: 2; } .s207-hero .wp-block-cover__inner-container > * + * { margin-top: 22px; } .s207-hero h1 { font-size: clamp(3rem, 7vw, 6.5rem); letter-spacing: -.05em; color: #fff; } .s207-hero h1 em { color: var(--s-wine-l); } .s207-hero .s207-eyebrow { color: var(--s-wine-l); } .s207-hero .s207-lead { color: rgba(255, 255, 255, .9); max-width: 580px; } .s207-hero .wp-block-buttons { margin-top: 34px; } /* Kennzahlen */ .wp-block-columns.s207-stats { gap: 0; border-bottom: 1px solid var(--s-line); } .s207-stats > .wp-block-column { padding: 36px 30px; border-right: 1px solid var(--s-line); } .s207-stats > .wp-block-column:last-child { border-right: 0; } .s207-stat-num, .s207-fact-num { font-family: var(--s-display); font-weight: 600; letter-spacing: -.04em; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.1; } .s207-stat-label, .s207-fact-label { font-size: 15px; color: var(--s-ink-2); margin-top: 4px !important; } /* Kacheln mit Bild und Titel (Startseite) */ .wp-block-columns.s207-tiles { gap: 20px; margin-bottom: 20px; } .s207-tile { position: relative; border-radius: 18px; overflow: hidden; color: #fff; isolation: isolate; aspect-ratio: 9 / 10; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 24px; } .s207-tile > .wp-block-image { position: absolute; inset: 0; margin: 0 !important; } .s207-tile .wp-block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .s207-tile:hover .wp-block-image img { transform: scale(1.04); } .s207-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .72)); z-index: 1; pointer-events: none; } .s207-tile > .s207-kicker, .s207-tile > h3 { position: relative; z-index: 2; margin: 0 !important; } .s207-tile > .s207-kicker { color: rgba(255, 255, 255, .82); margin-bottom: 6px !important; } .s207-tile > h3 { font-size: clamp(1.25rem, 1.6vw, 1.6rem); } .s207-tile h3 a::after, .s207-related h3 a::after, .s207-svccard h3 a::after, .s207-banner h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; } /* Geteilte Abschnitte (Bild + Text) */ .wp-block-columns.s207-split { gap: clamp(40px, 6vw, 90px); align-items: center !important; } .s207-split h1, .s207-split h2 { margin: 16px 0 22px; } .s207-split .wp-block-buttons { margin-top: 32px; } .s207-tall img { aspect-ratio: 4 / 4.4; object-fit: cover; } .s207-hero-img img { aspect-ratio: 4 / 4.2; object-fit: cover; } .wp-block-columns.s207-facts { gap: 0; margin-top: 40px !important; border-top: 1px solid var(--s-line); } .s207-facts > .wp-block-column { padding: 20px 20px 0 0; } .s207-facts .s207-fact-num { font-size: 22px; } .s207-facts .s207-fact-label { font-size: 14px; color: var(--s-muted); } /* Karten & Raster */ .wp-block-columns.s207-grid-2 { gap: 28px; margin-bottom: 28px; } .wp-block-columns.s207-grid-3 { gap: 28px; } .wp-block-columns.s207-grid-4 { gap: 24px; } .s207-card .wp-block-image img { aspect-ratio: 16 / 10; object-fit: cover; } .s207-card .s207-tall img { aspect-ratio: auto; height: 100%; } .wp-block-columns.s207-refs { gap: 28px; align-items: stretch !important; } .s207-refs .wp-block-column:last-child .s207-card .wp-block-image img { aspect-ratio: 10 / 11.2; } .s207-card .s207-kicker { margin-top: 20px !important; } .s207-card h3 { margin: 6px 0 4px !important; } .s207-offer .wp-block-image img { aspect-ratio: 4 / 3.3; object-fit: cover; } .s207-offer h3 { margin: 20px 0 8px !important; font-size: 24px; } .s207-offer p, .s207-related p, .s207-why p:not(.s207-num), .s207-step p:not(.s207-step-num), .s207-member p:not(.s207-kicker) { font-size: 15.5px; color: var(--s-ink-2); } .s207-wide-img img { aspect-ratio: 21 / 8.5; object-fit: cover; } /* Kundenstimmen */ .s207-quote { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 26px; } .s207-quote-text { font-family: var(--s-display); font-weight: 500; font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.42; letter-spacing: -.02em; } .s207-quote-who { margin-top: 20px !important; font-size: 15px; opacity: .75; } .s207-quote-big { background: var(--s-dark); color: #EFEFF1; border-radius: 18px; padding: 60px 70px; } .s207-quote-big .wp-block-columns { gap: 50px; align-items: center !important; } .s207-quote-big .s207-quote-text { font-size: clamp(1.4rem, 2.2vw, 1.9rem); } .s207-avatar img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; } .s207-stars { color: var(--s-wine-l); letter-spacing: 4px; font-size: 15px; margin-bottom: 12px !important; } /* Neueste Beiträge (Block) */ .wp-block-latest-posts.s207-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; } .wp-block-latest-posts.s207-posts li { display: flex; flex-direction: column; margin: 0; } .s207-posts .wp-block-latest-posts__featured-image { order: -1; margin: 0 0 18px; } .s207-posts .wp-block-latest-posts__featured-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--s-radius); } .s207-posts .wp-block-latest-posts__post-date { order: 0; font-size: 13px; color: var(--s-muted); text-transform: uppercase; letter-spacing: .12em; } .s207-posts .wp-block-latest-posts__post-title { order: 1; font-family: var(--s-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.15; margin-top: 8px; } /* Galerie (Mosaik) */ .wp-block-gallery.s207-gallery { display: grid !important; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 130px; gap: 14px !important; margin: 0; } .wp-block-gallery.s207-gallery figure.wp-block-image:not(#s207) { width: auto !important; margin: 0 !important; grid-column: span 4; grid-row: span 2; } .wp-block-gallery.s207-gallery figure.wp-block-image:not(#s207):nth-child(1) { grid-column: span 5; grid-row: span 3; } .wp-block-gallery.s207-gallery figure.wp-block-image:not(#s207):nth-child(2) { grid-column: span 4; } .wp-block-gallery.s207-gallery figure.wp-block-image:not(#s207):nth-child(3) { grid-column: span 3; } .wp-block-gallery.s207-gallery figure.wp-block-image:not(#s207):nth-child(4) { grid-column: span 3; } .wp-block-gallery.s207-gallery figure.wp-block-image:not(#s207):nth-child(5) { grid-column: span 4; } .wp-block-gallery.s207-gallery figure.wp-block-image:not(#s207):nth-child(6) { grid-column: span 5; grid-row: span 1; } .wp-block-gallery.s207-gallery-studio { grid-auto-rows: 260px; } .wp-block-gallery.s207-gallery-studio figure.wp-block-image:not(#s207) { grid-column: span 3 !important; grid-row: span 1 !important; } .wp-block-gallery.s207-gallery-studio figure.wp-block-image:not(#s207):nth-child(1) { grid-column: span 6 !important; grid-row: span 2 !important; } .wp-block-gallery.s207-gallery figure.wp-block-image:not(#s207) img { width: 100%; height: 100% !important; object-fit: cover; border-radius: 14px; } /* Pakete */ .wp-block-columns.s207-pkgs { gap: 24px; align-items: stretch !important; } .s207-pkgs > .wp-block-column { display: flex; } .s207-pkg { position: relative; display: flex; flex-direction: column; width: 100%; background: var(--s-paper); border: 1.5px solid transparent; border-radius: 18px; padding: 40px 36px; } .s207-pkg.is-featured { border-color: var(--s-wine); background: #fff; box-shadow: 0 24px 50px rgba(122, 31, 46, .14); } .s207-badge { position: absolute; top: -13px; left: 36px; margin: 0 !important; background: var(--s-wine); color: #fff; font-size: 12px !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; } .s207-pkg h3 { font-size: 30px; } .s207-pkg .s207-badge + h3 { margin-top: 0 !important; } .s207-pkg-sub { color: var(--s-muted); font-size: 15px; margin-top: 6px !important; } .s207-price { font-family: var(--s-display); font-weight: 600; letter-spacing: -.04em; font-size: 44px; margin: 22px 0 4px !important; } .s207-price span { font-family: var(--s-sans); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--s-muted); margin-right: 6px; } .s207-check { list-style: none; padding: 0; margin: 18px 0 30px !important; flex: 1; } .s207-check li { padding: 10px 0 10px 26px; border-top: 1px solid var(--s-line); font-size: 15px; position: relative; } .s207-check li::before { content: "✓"; position: absolute; left: 0; color: var(--s-wine); font-weight: 700; } .s207-pkg .wp-block-buttons { margin-top: auto; } .s207-pkg .wp-block-button { width: 100%; } .s207-pkg .wp-block-button__link { width: 100%; justify-content: center; } #preise .s207-note { margin-top: 26px !important; } /* Ablauf */ .wp-block-columns.s207-steps { gap: 0; border-top: 1.5px solid var(--s-ink); } .s207-step { position: relative; padding: 30px 30px 0 0; } .s207-step::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 3px; background: var(--s-wine); } .s207-step-num { font-family: var(--s-display); font-weight: 600; letter-spacing: -.04em; font-size: 56px; line-height: 1; color: var(--s-wine); } .s207-step h3 { margin: 14px 0 8px !important; font-size: 24px; } /* Warum / Werte */ .s207-why { border-top: 1.5px solid var(--s-ink); padding-top: 26px; } .s207-why h3 { margin: 12px 0 10px !important; font-size: 28px; } /* FAQ */ .wp-block-columns.s207-faq-wrap { gap: 80px; } .s207-faq-wrap h2 { margin: 14px 0 20px !important; } .s207-faq .wp-block-details { border-bottom: 1px solid var(--s-line); padding: 22px 0; margin: 0; } .s207-faq summary { font-family: var(--s-display); font-weight: 600; font-size: 21px; letter-spacing: -.02em; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; } .s207-faq summary::-webkit-details-marker { display: none; } .s207-faq summary::after { content: "+"; color: var(--s-wine); font-family: var(--s-sans); font-weight: 400; font-size: 24px; line-height: 1; } .s207-faq details[open] summary::after { content: "–"; } .s207-faq details p { margin-top: 12px !important; color: var(--s-ink-2); font-size: 16px; } /* Weitere Leistungen */ .s207-related { position: relative; background: #fff; border-radius: 18px; overflow: hidden; transition: transform .25s, box-shadow .25s; } .s207-related:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15, 16, 18, .1); } .s207-related .wp-block-image img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; } .s207-related h3 { margin: 0 !important; padding: 22px 24px; font-size: 22px; display: flex; justify-content: space-between; } .s207-related h3::after { content: "→"; color: var(--s-wine); font-weight: 400; } /* Bereichsübersicht: Karten */ .s207-svccard { position: relative; background: #fff; border-radius: 18px; overflow: hidden; height: 100%; transition: box-shadow .25s; } .s207-svccard:hover { box-shadow: 0 20px 40px rgba(15, 16, 18, .1); } .s207-svccard .wp-block-columns { gap: 0; align-items: stretch !important; height: 100%; } .s207-svccard .wp-block-image, .s207-svccard .wp-block-image img { height: 100%; } .s207-svccard .wp-block-image img { border-radius: 0; object-fit: cover; min-height: 320px; } .s207-svccard .wp-block-column:last-child { padding: 38px 34px; display: flex; flex-direction: column; } .s207-svccard h3 { font-size: 30px; margin: 12px 0 12px !important; } .s207-svccard p:not(.s207-num) { font-size: 15.5px; color: var(--s-ink-2); } .s207-more { margin-top: auto !important; padding-top: 22px; font-weight: 600; color: var(--s-wine) !important; } .s207-more::after { content: " →"; } /* Banner (dunkel), z. B. Vereinspaket */ .s207-banner { position: relative; border-radius: 18px; padding: 44px 50px; } .s207-banner.is-dark { background: var(--s-dark); color: #EFEFF1; } .s207-banner.is-dark .s207-eyebrow { color: var(--s-wine-l); } .s207-banner.is-dark h1 em { color: var(--s-wine-l); } .s207-banner .wp-block-columns { gap: 40px; align-items: center !important; } .s207-banner h3 { font-size: 30px; margin-top: 8px !important; } .s207-banner .wp-block-column:last-child .wp-block-buttons { justify-content: flex-end; position: relative; z-index: 4; } .s207-banner.is-xl { padding: 90px; } .s207-banner.is-xl h1 { margin: 18px 0 24px !important; font-size: clamp(2.6rem, 5vw, 4.6rem); } .s207-banner.is-xl .s207-lead { color: #c9c9ce; } .s207-banner.is-xl .wp-block-buttons { margin-top: 32px; } .s207-banner.is-xl .wp-block-column:last-child { text-align: center; } .s207-banner.is-xl .s207-note { color: #a3a3a9; } .s207-big-num { font-family: var(--s-display); font-weight: 600; letter-spacing: -.05em; line-height: .9; color: var(--s-wine-l); font-size: clamp(3.5rem, 7vw, 6rem); white-space: nowrap; } .s207-banner.is-xl .s207-big-num { font-size: clamp(4.5rem, 10vw, 9rem); } .s207-grid-2 + .s207-banner, .wp-block-columns + .s207-banner { margin-top: 0; } /* Über uns */ .wp-block-columns.s207-timeline { gap: 0; border-top: 1.5px solid var(--s-ink); } .s207-tl { position: relative; padding: 30px 30px 0 0; } .s207-tl::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 3px; background: var(--s-wine); } .s207-tl-year { font-family: var(--s-display); font-weight: 600; letter-spacing: -.04em; font-size: 42px; line-height: 1.1; } .s207-tl p:not(.s207-tl-year) { color: var(--s-ink-2); font-size: 16px; margin-top: 8px !important; } .s207-portrait img { aspect-ratio: 3 / 4; object-fit: cover; } .s207-member .s207-kicker { margin-top: 18px !important; } .s207-member h3 { margin: 4px 0 8px !important; font-size: 28px; } /* Kontakt */ .s207-contact.wp-block-columns { align-items: flex-start !important; } .s207-contact h1 { margin: 18px 0 24px !important; } .s207-info { margin: 40px 0 0; } .s207-info div { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid var(--s-line); } .s207-info dt { color: var(--s-muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding-top: 3px; } .s207-info dd { margin: 0; font-weight: 600; text-align: right; } .s207-info dd a { color: inherit; text-decoration: none; } .s207-map { margin-top: 28px !important; background: var(--s-paper-2); border-radius: 16px; padding: 28px; } .s207-map .wp-block-buttons { margin-top: 16px; } .s207-map .wp-block-button__link { padding: 10px 18px; font-size: 14px; } /* Textseiten */ .s207-prose-sec { max-width: calc(760px + 128px); margin: 0 auto; padding-left: 64px; padding-right: 64px; padding-top: 40px; } .s207-prose-sec > h1 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); margin-bottom: 32px; } .s207-prose > * + *, .s207-prose-sec > * + * { margin-top: 1.1em; } .s207-prose h2 { font-size: 2rem; margin-top: 1.6em; } .s207-prose h3 { margin-top: 1.4em; } .s207-prose ul, .s207-prose ol { padding-left: 1.3em; } .s207-prose img { border-radius: 14px; } .s207-prose blockquote { border-left: 3px solid var(--s-wine); margin-left: 0; padding-left: 22px; font-family: var(--s-display); font-size: 1.35rem; letter-spacing: -.02em; } /* 6. Archive & Beiträge --------------------------------------------------- */ .s207-media { display: block; position: relative; overflow: hidden; border-radius: var(--s-radius); background: var(--s-paper-2); } .s207-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .s207-media:hover img { transform: scale(1.03); } .s207-media-empty { display: block; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--s-paper-2), #dcdcd6); } .s207-chiprow { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; } .s207-chiprow a { padding: 10px 18px; border: 1.5px solid var(--s-line); border-radius: 10px; font-size: 15px; font-weight: 500; transition: border-color .15s; } .s207-chiprow a:hover { border-color: var(--s-ink); } .s207-chiprow a[aria-current] { background: var(--s-ink); border-color: var(--s-ink); color: #fff; } .s207-featpost { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center; background: #fff; border-radius: 18px; overflow: hidden; margin-bottom: 70px; } .s207-featpost .s207-media { border-radius: 0; } .s207-featpost .s207-media img { aspect-ratio: 4 / 3.1; } .s207-featpost .c { padding: 40px 60px 40px 0; } .s207-featpost h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); margin: 14px 0 16px; } .s207-featpost .s207-meta { margin: 18px 0 26px; } .s207-postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; } .s207-post .s207-meta { margin-top: 18px; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; } .s207-post h3 { margin: 8px 0; font-size: 1.5rem; } .s207-post h3 a:hover, .s207-ref h3 a:hover { color: var(--s-wine); } .s207-post p:last-child { font-size: 15px; color: var(--s-ink-2); } .s207-refgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 28px; grid-auto-flow: dense; } .s207-ref.is-big { grid-column: span 2; } .s207-ref.is-big .s207-media img { aspect-ratio: 16 / 9.5; } .s207-ref .s207-media img { aspect-ratio: 4 / 3.15; } .s207-ref:not(.is-big) .s207-media img { height: 100%; } .s207-ref .s207-kicker { margin-top: 18px; } .s207-ref h3 { margin: 6px 0 4px; } .s207-single-head { padding-top: 40px; padding-bottom: 50px; max-width: calc(980px + 128px); margin: 0 auto; } .s207-single-head h1 { margin: 18px 0 16px; font-size: clamp(2.4rem, 5vw, 4.4rem); } .s207-single-img img { border-radius: 18px; width: 100%; max-height: 720px; object-fit: cover; } .s207-postnav { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 100px; font-weight: 600; } .s207-postnav a:hover { color: var(--s-wine); } .navigation.pagination { margin-top: 60px; } .nav-links { display: flex; gap: 8px; justify-content: center; } .nav-links .page-numbers { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--s-line); border-radius: 10px; font-weight: 600; } .nav-links .page-numbers.current { background: var(--s-ink); color: #fff; border-color: var(--s-ink); } .s207-404 { min-height: 50vh; } .s207-404 h1 { margin: 18px 0 20px; } .s207-404 .wp-block-buttons { margin-top: 30px; } /* 7. Formular ------------------------------------------------------------- */ .s207-form { background: #fff; border-radius: 18px; padding: 48px; box-shadow: 0 20px 50px rgba(15, 16, 18, .07); } .s207-form h3 { font-size: 30px; } .s207-form-sub { color: var(--s-muted); font-size: 15px; margin: 6px 0 8px; } .s207-form fieldset { border: 0; padding: 0; margin: 0; } .s207-field { margin-top: 22px; } .s207-field > label, .s207-field legend { display: block; font-size: 13px; font-weight: 600; margin-bottom: 10px; padding: 0; } .s207-field input[type=text], .s207-field textarea { width: 100%; font: inherit; font-size: 16px; padding: 14px 16px; border: 1.5px solid var(--s-line); border-radius: 10px; background: var(--s-paper); color: var(--s-ink); transition: border-color .15s, background .15s; } .s207-field input:focus, .s207-field textarea:focus { outline: none; border-color: var(--s-wine); background: #fff; } .s207-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .s207-chips { display: flex; flex-wrap: wrap; gap: 8px; } .s207-chips label { cursor: pointer; } .s207-chips input { position: absolute; opacity: 0; pointer-events: none; } .s207-chips span { display: inline-block; padding: 9px 16px; border: 1.5px solid var(--s-line); border-radius: 10px; font-size: 14.5px; transition: all .15s; } .s207-chips input:checked + span { border-color: var(--s-wine); background: #F6E8EA; color: var(--s-wine-d); font-weight: 600; } .s207-chips input:focus-visible + span { outline: 2px solid var(--s-wine); outline-offset: 2px; } .s207-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--s-ink-2); margin: 24px 0 26px; } .s207-consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--s-wine); flex-shrink: 0; } .s207-submit { width: 100%; justify-content: center; padding: 17px 24px; font-size: 16px; } .s207-submit::after { content: "→"; font-weight: 400; } .s207-hp { position: absolute; left: -9999px; } .s207-form-msg { border-radius: 12px; padding: 16px 18px; margin-bottom: 20px; font-size: 15px; } .s207-form-msg.is-ok { background: #EEF3EC; padding: 30px; } .s207-form-msg.is-ok h3 { margin-bottom: 8px; } .s207-form-msg.is-error { background: #F6E8EA; color: var(--s-wine-d); } /* 8. Abschluss-Aufruf & Footer ------------------------------------------- */ .s207-cta { background: var(--s-ink); color: #fff; padding: 100px 0; } .s207-cta-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; } .s207-cta .s207-eyebrow { color: var(--s-wine-l); } .s207-cta h2 { font-size: clamp(2.1rem, 4.4vw, 4rem); max-width: 840px; margin-top: 18px; } .s207-cta-r { flex-shrink: 0; text-align: right; } .s207-cta-r .wp-element-button { padding: 16px 28px; } .s207-cta-r p { margin-top: 16px; font-size: 16px; color: #c9c9ce; } .s207-cta-r p a { color: #fff; text-decoration: none; } .s207-footer { background: #08090A; color: #cfcfd2; padding: 90px 0 40px; } .s207-fcols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; } .s207-fbrand p { margin-top: 18px; max-width: 280px; font-size: 15px; color: #9a9aa0; } .s207-fhead { font-family: var(--s-sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #85858b; margin-bottom: 18px; } .s207-fcol ul { list-style: none; margin: 0; padding: 0; } .s207-fcol li { margin-bottom: 10px; font-size: 15px; } .s207-fcol a:hover { color: #fff; } .s207-fbottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 70px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: #85858b; } .s207-legal { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; } .s207-legal a:hover { color: #fff; } .s207-mobilebar { display: none; } /* Signature-Schnellwahl (nur Admins) */ .s207-sigswitch { position: fixed; left: 20px; bottom: 20px; z-index: 200; display: flex; align-items: center; gap: 4px; background: rgba(15, 16, 18, .92); color: #fff; padding: 6px; border-radius: 12px; font-size: 13px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); backdrop-filter: blur(8px); } .s207-sigswitch span { padding: 0 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; color: var(--s-wine-l); } .s207-sigswitch button { font: inherit; color: #d9d9dd; background: none; border: 0; padding: 7px 11px; border-radius: 8px; cursor: pointer; } .s207-sigswitch button[aria-pressed=true] { background: var(--s-wine); color: #fff; } .s207-sigswitch a { padding: 7px 11px; color: #fff; text-decoration: underline; text-underline-offset: 3px; font-size: 12px; } /* 9. Signature Style ------------------------------------------------------ Der Look wird nur bei der Anzeige angewendet – die Bilddateien bleiben original. */ body.sig-warm { --sig-filter: sepia(calc(.38 * var(--sig))) saturate(calc(1 + .18 * var(--sig))) contrast(calc(1 + .1 * var(--sig))) brightness(calc(1 + .03 * var(--sig))) hue-rotate(calc(-6deg * var(--sig))); } body.sig-matt { --sig-filter: contrast(calc(1 - .16 * var(--sig))) saturate(calc(1 - .3 * var(--sig))) brightness(calc(1 + .06 * var(--sig))) sepia(calc(.1 * var(--sig))); } body.sig-sw { --sig-filter: grayscale(1) contrast(calc(1 + .22 * var(--sig))) brightness(calc(1 + .02 * var(--sig))); } body.sig-wein { --sig-filter: url(#s207-duotone); } .sig-on :is(.wp-block-image, .wp-block-gallery, .wp-block-post-featured-image, .s207-media, .wp-block-latest-posts__featured-image, .s207-sig) img, .sig-on .wp-block-cover__image-background { filter: var(--sig-filter); transition: filter .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1); } /* Ausnahmen: Stil „Original“, Logos, auf Wunsch der Hero */ .sig-on .is-style-s207-original img, .sig-on .is-style-s207-original .wp-block-cover__image-background, .sig-on img.no-signature, .sig-on .custom-logo, .sig-no-hero .s207-hero .wp-block-cover__image-background { filter: none; } /* Original beim Überfahren */ .sig-hover :is(.wp-block-image, .s207-media, .wp-block-latest-posts__featured-image, .wp-block-post-featured-image):hover img { filter: none; } /* Filmkorn */ .sig-grain :is(.wp-block-image:not(.is-style-s207-original), .s207-media, .wp-block-latest-posts__featured-image, .wp-block-post-featured-image) { position: relative; } .sig-grain :is(.wp-block-image:not(.is-style-s207-original):not(.is-style-s207-sucher), .s207-media, .wp-block-latest-posts__featured-image, .wp-block-post-featured-image)::after, .sig-grain .wp-block-cover:not(.is-style-s207-original)::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 1; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } .sig-grain .wp-block-image::after { border-radius: var(--s-radius); } .sig-grain .s207-tile .wp-block-image::after, .sig-grain .s207-related .wp-block-image::after, .sig-grain .s207-svccard .wp-block-image::after { border-radius: 0; } .sig-grain .wp-block-cover .wp-block-cover__inner-container { z-index: 2; } /* 10. Mobil & Tablet ------------------------------------------------------ */ @media (max-width: 1180px) { .s207-topbar .l span:last-child, .s207-topbar .soc { display: none; } .s207-burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--s-ink); background: none; cursor: pointer; padding: 0; } .s207-burger span:not(.screen-reader-text) { width: 16px; height: 1.5px; background: var(--s-ink); transition: transform .2s; } .s207-nav-open .s207-burger span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); } .s207-nav-open .s207-burger span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); } .s207-header-cta { display: none; } .s207-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--s-paper); } .s207-nav-open .s207-mobilebar, .s207-nav-open .s207-sigswitch { display: none; } .s207-header-in { min-height: 76px; } .s207-nav { position: fixed; inset: 0; top: var(--s207-head, 76px); background: var(--s-paper); overflow-y: auto; padding: 10px 24px 120px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease, visibility .22s; z-index: 90; } .admin-bar .s207-nav { top: calc(var(--s207-head, 76px) + 46px); } .s207-nav-open { overflow: hidden; } .s207-nav-open .s207-nav { opacity: 1; transform: none; visibility: visible; } .s207-menu { flex-direction: column; align-items: stretch; gap: 0; } .s207-menu > li { display: block; border-bottom: 1px solid var(--s-line); } .s207-menu > li > .s207-ml { display: block; padding: 16px 0; font-family: var(--s-display); font-weight: 600; font-size: 26px; letter-spacing: -.03em; } .s207-sub-toggle { display: none; } .s207-dd { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 14px; min-width: 0; background: none; border-radius: 0; } .s207-dd .sub-menu { grid-template-columns: 1fr; gap: 0; } .s207-dd .sub-menu a { padding: 9px 0; border-radius: 0; } .s207-dd .sub-menu a:hover { background: none; color: var(--s-wine); } .s207-dd .d { display: none; } .s207-dd .t { font-weight: 500; font-size: 17px; } .s207-nav-mobile-extra { display: block; padding-top: 26px; } .s207-nav-mobile-extra .wp-element-button { width: 100%; justify-content: center; padding: 16px; } .s207-nav-mobile-extra p { text-align: center; margin-top: 16px; color: var(--s-muted); font-size: 14px; } .s207-fcols { grid-template-columns: 1fr 1fr 1fr; } .s207-fbrand { grid-column: 1 / -1; } } @media (max-width: 960px) { .s207-postgrid, .s207-refgrid, .wp-block-latest-posts.s207-posts { grid-template-columns: 1fr 1fr; } .s207-ref.is-big { grid-column: span 2; } .s207-featpost { grid-template-columns: 1fr; gap: 0; } .s207-featpost .c { padding: 30px; } .s207-archive-head .s207-head, .s207-single .s207-subhero .s207-head { grid-template-columns: 1fr; gap: 24px; } .s207-cta-in { flex-direction: column; align-items: flex-start; } .s207-cta-r { text-align: left; } } @media (max-width: 781px) { body { font-size: 16px; } :root { --s-pad: 20px; } .s207-container { padding: 0 20px; } .s207-topbar { display: none; } .admin-bar .s207-header { top: 0; } .s207-section { padding: 64px 20px; } .s207-section.s207-subhero { padding-top: 24px; padding-bottom: 56px; } .s207-section.is-tight-top { padding-top: 0; } .wp-block-cover.s207-hero { min-height: 600px !important; padding: 40px 20px !important; align-items: flex-end; } .s207-hero .wp-block-cover__background { background: linear-gradient(180deg, rgba(10, 10, 12, .15), rgba(10, 10, 12, .78)) !important; } .s207-hero .wp-block-button { flex: 1 1 100%; } .s207-hero .wp-block-button__link { width: 100%; justify-content: center; } .wp-block-columns.s207-head { gap: 16px; margin-bottom: 32px; } .wp-block-columns.s207-head > .wp-block-column:last-child:has(.wp-block-buttons) { align-items: flex-start !important; } .wp-block-columns.s207-stats { flex-wrap: wrap !important; } .s207-section .wp-block-columns.s207-stats > .wp-block-column { flex: 1 1 50% !important; flex-basis: 50% !important; padding: 22px 14px 22px 0; border-right: 0; border-bottom: 1px solid var(--s-line); } .wp-block-columns.s207-tiles { flex-wrap: wrap !important; gap: 12px; margin-bottom: 12px; } .s207-section .wp-block-columns.s207-tiles > .wp-block-column { flex: 1 1 calc(50% - 6px) !important; flex-basis: calc(50% - 6px) !important; } .s207-tile { padding: 16px; } .s207-tile > h3 { font-size: 1.1rem; } .s207-tile > .s207-kicker { font-size: 9.5px !important; } .s207-facts > .wp-block-column { padding-top: 14px; } .wp-block-columns.s207-steps, .wp-block-columns.s207-timeline { border-top: 0; gap: 0; } .s207-step, .s207-tl { border-top: 1.5px solid var(--s-ink); padding: 24px 0 28px; } .s207-quote-big { padding: 36px 26px; } .s207-quote-big .wp-block-columns { gap: 20px; } .s207-avatar img { width: 90px; height: 90px; } .wp-block-columns.s207-faq-wrap { gap: 20px; } .s207-svccard .wp-block-image img { min-height: 220px; aspect-ratio: 16 / 9; } .s207-banner, .s207-banner.is-xl { padding: 36px 26px; } .s207-banner .wp-block-column:last-child .wp-block-buttons { justify-content: flex-start; } .wp-block-gallery.s207-gallery { grid-auto-rows: 110px; gap: 8px !important; } .wp-block-gallery.s207-gallery figure.wp-block-image:not(#s207) { grid-column: span 6 !important; grid-row: span 2 !important; } .wp-block-gallery.s207-gallery figure.wp-block-image:not(#s207):nth-child(1) { grid-column: span 12 !important; grid-row: span 3 !important; } .s207-postgrid, .s207-refgrid, .wp-block-latest-posts.s207-posts { grid-template-columns: 1fr; } .s207-ref.is-big { grid-column: auto; } .s207-form { padding: 28px 22px; } .s207-row { grid-template-columns: 1fr; gap: 0; } .s207-prose-sec { padding-left: 20px; padding-right: 20px; } .s207-cta { padding: 64px 0; } .s207-footer { padding: 64px 0 120px; } .s207-fcols { grid-template-columns: 1fr 1fr; gap: 32px; } .s207-mobilebar { display: flex; gap: 8px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 150; } .s207-mobilebar a { flex: 1; text-align: center; padding: 15px; border-radius: 12px; background: var(--s-wine); color: #fff; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); } .s207-mobilebar a.is-dark { background: var(--s-ink); } .s207-sigswitch { left: 12px; right: 12px; bottom: 80px; overflow-x: auto; } .s207-sigswitch a { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* Editor: Abschnitte im Block-Editor */ .editor-styles-wrapper .s207-section { padding-top: 80px; padding-bottom: 80px; } .editor-styles-wrapper .s207-section.is-tight-top { padding-top: 0; } /* Fließtext-Abschnitte (übernommene Texte) ----------------------------------- */ .wp-block-columns.s207-story { gap: clamp(40px, 6vw, 96px); align-items: flex-start !important; } .s207-story-head { position: sticky; top: 130px; } .s207-story-head h2 { margin: 14px 0 18px !important; } .s207-story-body { max-width: 760px; } .s207-story-body > * + * { margin-top: 1.1em !important; } .s207-story-body p { font-size: 17.5px; line-height: 1.7; color: var(--s-ink-2); } .s207-story-body p strong { color: var(--s-ink); } .s207-story-body h3 { font-size: 24px; margin-top: 1.9em !important; color: var(--s-ink); } .s207-dash { list-style: none; padding: 0; margin: 0; } .s207-dash li { position: relative; padding: 11px 0 11px 30px; border-top: 1px solid var(--s-line); font-size: 16px; line-height: 1.55; color: var(--s-ink-2); } .s207-dash li:last-child { border-bottom: 1px solid var(--s-line); } .s207-dash li::before { content: ""; position: absolute; left: 0; top: 21px; width: 14px; height: 2px; background: var(--s-wine); } .s207-dash li strong { color: var(--s-ink); } .s207-pull { font-family: var(--s-display); font-weight: 600; font-size: clamp(1.35rem, 2vw, 1.8rem) !important; line-height: 1.3 !important; letter-spacing: -.025em; color: var(--s-ink) !important; border-left: 3px solid var(--s-wine); padding-left: 24px; margin-top: 1.6em !important; } .s207-section.is-dark .s207-story-body p, .s207-section.is-dark .s207-dash li { color: #c9c9ce; } /* Kategorie-Karten */ .wp-block-columns.s207-catgrid { gap: 24px; margin-bottom: 24px; align-items: stretch !important; } .s207-catgrid > .wp-block-column { display: flex; } @media (min-width: 782px) { .s207-section .wp-block-columns.s207-catgrid > .wp-block-column { flex: 0 0 calc((100% - 48px) / 3) !important; } } .s207-cat { width: 100%; background: #fff; border-radius: 18px; padding: 32px 30px; } .s207-section.is-alt .s207-cat { background: var(--s-paper); } .s207-cat h3 { font-size: 22px; margin-bottom: 14px !important; } .s207-cat p { color: var(--s-ink-2); font-size: 16px; } .s207-cat .s207-dash li { font-size: 15px; padding: 8px 0 8px 26px; } .s207-cat .s207-dash li::before { top: 18px; width: 12px; } /* Chips-Liste und Kundenliste */ .s207-chiplist, .s207-clients { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; } .s207-chiplist li { padding: 12px 20px; background: #fff; border-radius: 12px; font-weight: 500; font-size: 16px; } .s207-clients { gap: 0; border-top: 1px solid var(--s-line); } .s207-clients li { flex: 1 1 20%; padding: 26px 20px 26px 0; border-bottom: 1px solid var(--s-line); font-family: var(--s-display); font-weight: 600; font-size: 19px; letter-spacing: -.02em; color: var(--s-ink); } .s207-why-row + .s207-why-row { margin-top: 40px !important; } @media (max-width: 781px) { .s207-story-head { position: static; } .s207-story-body p { font-size: 16px; } .s207-clients li { flex-basis: 50%; font-size: 16px; padding: 18px 12px 18px 0; } .s207-cat { padding: 26px 22px; } .s207-why-row + .s207-why-row { margin-top: 0 !important; } } /* ========================================================================== Version 1.2 – Journal (Magazin), Beitragsseite, Kontakt ========================================================================== */ /* Journal: Kopf und Leiste */ .s207-journal-sec { padding-top: 34px; } .s207-jmast { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding-bottom: 26px; border-bottom: 1.5px solid var(--s-ink); } .s207-jmast h1 { font-size: clamp(3.4rem, 10vw, 8.5rem); letter-spacing: -.06em; line-height: .86; margin-top: 16px; } .s207-jmast-r { text-align: right; font-size: 14px; color: var(--s-ink-2); display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; } .s207-jmast-r b { font-family: var(--s-display); font-size: 22px; letter-spacing: -.03em; color: var(--s-ink); } .s207-jbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--s-line); margin-bottom: 34px; position: relative; z-index: 4; } .s207-jtopics { display: flex; flex-wrap: wrap; gap: 6px; } .s207-jtopics a { padding: 8px 14px; border-radius: 99px; font-size: 14.5px; font-weight: 500; color: var(--s-ink-2); transition: background .15s, color .15s; } .s207-jtopics a:hover { background: var(--s-paper-2); color: var(--s-ink); } .s207-jtopics a.is-on { background: var(--s-ink); color: #fff; } .s207-jtools { display: flex; gap: 10px; align-items: center; } .s207-jarch { position: relative; } .s207-jarch summary { list-style: none; cursor: pointer; padding: 8px 14px; border: 1px solid var(--s-line); border-radius: 99px; font-size: 14.5px; font-weight: 500; } .s207-jarch summary::-webkit-details-marker { display: none; } .s207-jarch summary::after { content: " ▾"; color: var(--s-muted); } .s207-jarch ul { position: absolute; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 8px; background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(15, 16, 18, .14); min-width: 220px; max-height: 320px; overflow: auto; } .s207-jarch li a { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 8px; font-size: 14.5px; } .s207-jarch li a:hover, .s207-jarch li a.is-on { background: var(--s-paper); color: var(--s-wine); } .s207-jarch li span { color: var(--s-muted); font-variant-numeric: tabular-nums; } .s207-jsearch { display: flex; align-items: center; gap: 8px; border: 1px solid var(--s-line); border-radius: 99px; padding: 0 14px; color: var(--s-muted); } .s207-jsearch input { border: 0; background: none; font: inherit; font-size: 14.5px; padding: 8px 0; width: 150px; color: var(--s-ink); outline: none; } .s207-jsearch:focus-within { border-color: var(--s-wine); } .s207-jstatus { margin: -14px 0 28px; font-size: 14.5px; color: var(--s-ink-2); } .s207-jstatus span { font-weight: 600; color: var(--s-ink); } .s207-jempty { margin: 40px 0; } /* Journal: Meta, Titel */ .s207-jmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--s-muted); margin: 0 0 8px; } .s207-jmeta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; display: inline-block; opacity: .7; } .s207-jtopic { color: var(--s-wine); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; } .s207-jtitle { font-family: var(--s-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; margin: 0; } .s207-jtitle a:hover { color: var(--s-wine); } .s207-jexcerpt { color: var(--s-ink-2); font-size: 15.5px; margin-top: 10px; } .s207-noimg { display: block; width: 100%; height: 100%; min-height: 160px; background: linear-gradient(135deg, var(--s-paper-2), #d9d9d3); } .s207-jimg img, .s207-jimg .s207-noimg { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; } /* Aufmacher */ .s207-jlead { position: relative; border-radius: 20px; overflow: hidden; min-height: 560px; display: flex; align-items: flex-end; color: #fff; isolation: isolate; } .s207-jlead-img { position: absolute !important; inset: 0; border-radius: 0 !important; } .s207-jlead-img img { height: 100%; aspect-ratio: auto; } .s207-jlead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 12, 0) 30%, rgba(10, 10, 12, .82) 100%); z-index: 1; pointer-events: none; } .s207-jlead-text { position: relative; z-index: 2; padding: 44px 48px; max-width: 760px; } .s207-jchip { display: inline-block; background: var(--s-wine); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 6px; margin-bottom: 16px; } .s207-jlead .s207-jmeta { color: rgba(255, 255, 255, .78); } .s207-jlead .s207-jtopic { color: var(--s-wine-l); } .s207-jlead .s207-jtitle { font-size: clamp(1.9rem, 3.6vw, 3.2rem); } .s207-jlead .s207-jtitle a:hover { color: var(--s-wine-l); } .s207-jlead .s207-jexcerpt { color: rgba(255, 255, 255, .86); font-size: 17px; max-width: 620px; } .s207-jmore { display: inline-block; margin-top: 18px; font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; } /* Bento */ .s207-jbento { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; margin-top: 44px; } .s207-jbento.is-single { grid-template-columns: 1fr; } .s207-jbig .s207-jimg { aspect-ratio: 16 / 10; margin-bottom: 18px; } .s207-jbig .s207-jtitle { font-size: clamp(1.5rem, 2.2vw, 2rem); } .s207-jside { display: flex; flex-direction: column; gap: 18px; } .s207-jmini { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--s-line); } .s207-jmini:last-child { border-bottom: 0; } .s207-jmini .s207-jimg { aspect-ratio: 1; border-radius: 12px; } .s207-jmini .s207-jtitle { font-size: 18px; } /* Hochformat-Karten */ .s207-jrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--s-line); } .s207-jcard .s207-jimg { aspect-ratio: 4 / 5; margin-bottom: 16px; } .s207-jcard .s207-jtitle { font-size: 21px; } .s207-jtime { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: rgba(15, 16, 18, .7); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; backdrop-filter: blur(6px); } /* Kurz gelesen */ .s207-jsec { margin: 56px 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--s-wine); } .s207-jquick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px; } .s207-jq { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--s-line); } .s207-jq .s207-jimg { aspect-ratio: 1; border-radius: 10px; } .s207-jq .s207-jtitle { font-size: 16.5px; } /* Archiv */ .s207-jarchive { margin-top: 64px; padding: 40px 44px; background: #fff; border-radius: 20px; } .s207-jarchive-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; } .s207-jarchive-head h2 { font-size: 30px; } .s207-jarchive-head small { font-family: var(--s-sans); font-size: 14px; font-weight: 500; color: var(--s-muted); letter-spacing: 0; margin-left: 8px; } .s207-jarchive-chips { display: flex; flex-wrap: wrap; gap: 6px; } .s207-jarchive-chips button { font: inherit; font-size: 13.5px; font-weight: 500; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--s-line); background: none; cursor: pointer; color: var(--s-ink-2); } .s207-jarchive-chips button small { color: var(--s-muted); margin-left: 3px; } .s207-jarchive-chips button.is-on { background: var(--s-ink); color: #fff; border-color: var(--s-ink); } .s207-jarchive-chips button.is-on small { color: rgba(255, 255, 255, .7); } .s207-jarchive-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 44px; } .s207-jarchive-list li { break-inside: avoid; border-top: 1px solid var(--s-line); } .s207-jarchive-list a { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: baseline; padding: 12px 0; font-size: 15.5px; } .s207-jarchive-list a:hover .t { color: var(--s-wine); } .s207-jarchive-list time { font-size: 13px; color: var(--s-muted); font-variant-numeric: tabular-nums; } .s207-jarchive-list .t { font-weight: 500; } .s207-jarchive-list .c { font-size: 12px; color: var(--s-muted); text-transform: uppercase; letter-spacing: .08em; } .s207-jarchive-more { text-align: center; margin-top: 22px; } .s207-jarchive-more button { font: inherit; font-weight: 600; font-size: 15px; background: none; border: 1.5px solid var(--s-ink); border-radius: 10px; padding: 11px 20px; cursor: pointer; } .s207-jarchive-more button:hover { background: var(--s-ink); color: #fff; } /* Startseite: Journal-Vorschau im gleichen Stil */ .s207-posts .wp-block-latest-posts__featured-image img { aspect-ratio: 1 / 1; border-radius: 16px; } /* Beitragsseite */ .s207-section.s207-post-top { padding-top: 34px; padding-bottom: 56px; } .s207-ph { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .s207-ph.no-img { grid-template-columns: 1fr; max-width: 900px; } .s207-ph-topic { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--s-wine); } .s207-ph h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); margin: 16px 0 20px; } .s207-ph-stand { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--s-ink-2); } .s207-ph-by { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 14px; color: var(--s-muted); } .s207-ph-by b { display: block; color: var(--s-ink); font-size: 15px; } .s207-ph-img { margin: 0; } .s207-ph-img img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 20px; } .s207-avatar-mono { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--s-ink); color: var(--s-wine-l); font-family: var(--s-display); font-weight: 700; font-size: 13px; letter-spacing: -.04em; flex-shrink: 0; } .s207-avatar-img { border-radius: 50%; object-fit: cover; flex-shrink: 0; } .s207-post-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr); padding: 0 var(--s-pad); gap: 40px; } .s207-post-body > .s207-post-content { grid-column: 2; } .s207-post-content > * + * { margin-top: 1.15em; } .s207-post-content p, .s207-post-content li { font-size: 18px; line-height: 1.75; color: #2b2c30; } .s207-post-content h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-top: 1.8em; scroll-margin-top: 120px; } .s207-post-content h3 { font-size: 1.35rem; margin-top: 1.5em; } .s207-post-content .wp-block-image { margin: 2em 0; } .s207-toc { grid-column: 1; justify-self: end; width: 100%; max-width: 230px; position: sticky; top: 130px; align-self: start; } .s207-toc details { border-left: 1.5px solid var(--s-line); padding-left: 18px; } .s207-toc summary { list-style: none; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--s-muted); cursor: pointer; margin-bottom: 10px; } .s207-toc summary::-webkit-details-marker { display: none; } .s207-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .s207-toc li { margin: 0 0 10px; font-size: 14px; line-height: 1.35; } .s207-toc a { color: var(--s-ink-2); } .s207-toc a:hover, .s207-toc a.is-on { color: var(--s-wine); } .s207-toc a.is-on { font-weight: 600; } .s207-section.s207-post-end { padding-top: 70px; } .s207-pe-author { display: flex; gap: 24px; align-items: flex-start; max-width: 760px; margin: 0 auto 80px; padding: 30px 32px; background: #fff; border-radius: 20px; } .s207-pe-name { font-family: var(--s-display); font-weight: 600; font-size: 20px; letter-spacing: -.02em; } .s207-pe-bio { color: var(--s-ink-2); font-size: 15.5px; margin-top: 6px !important; } .s207-pe-cta { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--s-wine); } .s207-pe-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 26px; } .s207-pe-head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); } .s207-pe-head a { font-weight: 600; color: var(--s-wine); } .s207-pe-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .s207-pe-card .s207-jimg { aspect-ratio: 4 / 3; margin-bottom: 14px; } .s207-pe-card h3 { font-size: 20px; margin-top: 6px; } .s207-pe-card h3 a:hover { color: var(--s-wine); } .s207-pn { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 64px; padding: 28px 0 40px; border-top: 1px solid var(--s-line); } .s207-pn-item { display: flex; align-items: center; gap: 14px; } .s207-pn-next { justify-content: flex-end; text-align: right; } .s207-pn-arrow, .s207-pn-all { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--s-line); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, color .15s, transform .2s; } .s207-pn-all:hover, .s207-pn-item:hover .s207-pn-arrow { background: var(--s-ink); color: #fff; border-color: var(--s-ink); } .s207-pn-label { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--s-muted); } .s207-pn-title { display: block; font-weight: 600; font-size: 15.5px; } .s207-pn-item:hover .s207-pn-title { color: var(--s-wine); } /* Kontakt */ .s207-contact.wp-block-columns { gap: clamp(32px, 4vw, 64px); } .s207-form { padding: 44px; border-radius: 20px; } .s207-form h3 { font-size: 30px; } .s207-form-sub { font-size: 16px; color: var(--s-ink-2); margin: 8px 0 28px; } .s207-field .opt { font-weight: 400; color: var(--s-muted); margin-left: 4px; } .s207-field input[type=email], .s207-field input[type=tel] { width: 100%; font: inherit; font-size: 16px; padding: 14px 16px; border: 1.5px solid var(--s-line); border-radius: 10px; background: var(--s-paper); color: var(--s-ink); transition: border-color .15s, background .15s; } .s207-form-foot { text-align: center; font-size: 13.5px; color: var(--s-muted); margin-top: 14px; } .s207-cd { position: sticky; top: 130px; } .s207-cd-title { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 14px 0 12px; } .s207-cd-title em { color: var(--s-wine); } .s207-cd-lead { color: var(--s-ink-2); font-size: 16.5px; } .s207-cd-list { margin-top: 26px; border-top: 1px solid var(--s-line); } .s207-cd-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--s-line); transition: background .15s; } .s207-cd-row:hover { background: rgba(122, 31, 46, .04); } .s207-cd-row:hover .s207-cd-arrow { transform: translateX(3px); color: var(--s-wine); } .s207-cd-ico { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--s-wine); flex-shrink: 0; } .s207-cd-label { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--s-muted); } .s207-cd-value { display: block; font-weight: 600; font-size: 16px; } .s207-cd-arrow { color: var(--s-muted); transition: transform .2s, color .15s; } .s207-cd-studio { display: flex; gap: 14px; margin-top: 22px; padding: 20px; background: #fff; border-radius: 16px; } .s207-cd-address { font-weight: 600; margin-top: 2px !important; } .s207-cd-area { font-size: 14px; color: var(--s-ink-2); margin-top: 2px !important; } .s207-cd-route { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 14.5px; color: var(--s-wine); } .s207-cd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .s207-cd-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; padding: 7px 12px; border-radius: 99px; background: var(--s-paper-2); color: var(--s-ink-2); } .s207-cd-sign { margin-top: 26px !important; color: var(--s-ink-2); font-size: 15.5px; } .s207-cd-sign span { display: block; font-family: var(--s-display); font-weight: 600; font-size: 22px; letter-spacing: -.03em; color: var(--s-ink); margin-top: 4px; } @media (max-width: 1099px) { .s207-post-body { grid-template-columns: minmax(0, 1fr); } .s207-post-body > .s207-post-content, .s207-toc { grid-column: 1; } .s207-toc { position: static; max-width: none; justify-self: stretch; } .s207-toc details { border: 1px solid var(--s-line); border-radius: 12px; padding: 14px 18px; background: #fff; } .s207-toc summary { margin: 0; } .s207-toc details[open] summary { margin-bottom: 10px; } .s207-post-body { max-width: calc(720px + 2 * var(--s-pad)); margin: 0 auto; } } @media (max-width: 960px) { .s207-jbento, .s207-ph { grid-template-columns: 1fr; } .s207-jrow, .s207-pe-cards { grid-template-columns: 1fr 1fr; } .s207-cd { position: static; } } @media (max-width: 781px) { .s207-jmast { flex-direction: column; align-items: flex-start; gap: 10px; } .s207-jmast-r { text-align: left; padding: 0; } .s207-jbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } .s207-jtopics { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; } .s207-jtopics a { white-space: nowrap; } .s207-jtools { justify-content: space-between; } .s207-jsearch { flex: 1; min-width: 0; } .s207-jbar .s207-jsearch input[type="search"] { flex: 1 1 0; width: 0; min-width: 0; } .s207-jarch ul { left: 0; right: auto; } .s207-jlead { min-height: 460px; border-radius: 16px; } .s207-jlead-text { padding: 26px 22px; } .s207-jlead .s207-jexcerpt { display: none; } .s207-jrow, .s207-pe-cards, .s207-jquick { grid-template-columns: 1fr; } .s207-jcard .s207-jimg { aspect-ratio: 4 / 3; } .s207-jmini { grid-template-columns: 96px 1fr; } .s207-jarchive { padding: 26px 20px; } .s207-jarchive-list { columns: 1; } .s207-jarchive-list a { grid-template-columns: 64px 1fr; } .s207-jarchive-list .c { display: none; } .s207-ph-img img { aspect-ratio: 4 / 3; } .s207-post-content p, .s207-post-content li { font-size: 17px; } .s207-pe-author { flex-direction: column; padding: 24px; } .s207-pn { grid-template-columns: 1fr auto 1fr; margin-top: 44px; } .s207-pn-text { display: none; } .s207-form { padding: 26px 20px; } } /* ========================================================================== Version 2 – „Licht & Linie“ Fotografie = Licht (Blende, Sucher, Kameradaten) · Design = Linie (Pfad, Schnittmarken, Specs) Das „&“ in Instrument Serif verbindet beide Bereiche. ========================================================================== */ :root { --s-serif: var(--wp--preset--font-family--serif, "Instrument Serif", Georgia, serif); --s-mono: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace); --s-ease: cubic-bezier(.2, .7, .2, 1); --s-m-foto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.3 3.3L9 12.5M20.6 9.5H10.2M17.6 18.8L12.4 9.8M9.7 20.7L15 11.5M3.4 14.5h10.4M6.4 5.2l5.2 9'/%3E%3C/svg%3E"); --s-m-design: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M4 18C7 8 17 8 20 18'/%3E%3Cpath d='M4 18L8 6M20 18L16 6' stroke-width='1.1'/%3E%3Crect x='2.5' y='16.5' width='3' height='3'/%3E%3Crect x='18.5' y='16.5' width='3' height='3'/%3E%3Ccircle cx='8' cy='6' r='1.3'/%3E%3Ccircle cx='16' cy='6' r='1.3'/%3E%3C/svg%3E"); } h1 { font-weight: 700; } h1 em, h2 em, h3 em, .s207-statement em, .s207-cta h2 em { font-family: var(--s-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--s-wine); } .s207-amp { font-family: var(--s-serif); font-style: italic; font-weight: 400; color: var(--s-wine); font-size: 1.25em; line-height: 0; letter-spacing: 0; padding: 0 .04em; } .s207-footer .s207-amp, .s207-cta .s207-amp, .is-dark .s207-amp, .s207-marquee .s207-amp { color: var(--s-wine-l); } .s207-hand { font-family: var(--s-serif); font-style: italic; font-weight: 400; color: var(--s-wine); letter-spacing: 0; line-height: 1.1; } .s207-mark { flex-shrink: 0; } /* Menü mit Zeichen */ .s207-menu > li > .s207-ml { display: inline-flex; align-items: center; gap: 8px; } .s207-menu > li > .s207-ml .s207-mark { color: var(--s-wine); } .s207-menu > li > .s207-ml .s207-amp { font-size: 1.4em; } /* Kleine Überschriften mit Bereichszeichen */ .s207-eyebrow.is-foto::before, .s207-eyebrow.is-design::before, .s207-svc-head span::before, .wp-block-button.s207-pill > .wp-block-button__link::before { content: ""; width: 18px; height: 18px; border-radius: 0; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; flex-shrink: 0; } .is-foto { --m: var(--s-m-foto); } .is-design { --m: var(--s-m-design); } .s207-kicker .s207-mark { vertical-align: -3px; margin-right: 6px; } /* Startseite: Licht & Linie */ .s207-section.s207-ll-hero { padding-top: 56px; padding-bottom: 0; } h1.s207-lichtlinie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 24px; font-size: clamp(4rem, 14.5vw, 13.25rem); line-height: .86; letter-spacing: -.06em; font-weight: 700; margin: 0; } h1.s207-lichtlinie em { font-size: 1.12em; line-height: .7; } .wp-block-columns.s207-hero-row { gap: 20px 40px; align-items: center !important; margin: 30px 0 40px; } .s207-hero-row .s207-lead { max-width: 560px; } .s207-hero-row .wp-block-buttons { justify-content: flex-end; gap: 10px; } .wp-block-button.s207-pill > .wp-block-button__link { border-radius: 99px; padding: 12px 20px 12px 16px; font-size: 15px; gap: 8px; } .wp-block-button.s207-pill > .wp-block-button__link::before { width: 17px; height: 17px; } .s207-doors { position: relative; } .s207-doors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .s207-door { position: relative; height: 600px; border-radius: 22px; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; text-decoration: none; } .s207-door.is-design { background: var(--s-dark); } .s207-door-bg, .s207-door-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .s207-door-bg img { transition: transform .9s var(--s-ease), filter .45s ease; } .s207-door:hover .s207-door-bg img { transform: scale(1.045); } .s207-door.is-foto::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 16, 18, .2) 0%, rgba(15, 16, 18, 0) 32%, rgba(15, 16, 18, .72) 100%); } .s207-sucher { position: absolute; inset: 22px; z-index: 2; pointer-events: none; background: linear-gradient(#fff,#fff) left top/34px 2.5px, linear-gradient(#fff,#fff) left top/2.5px 34px, linear-gradient(#fff,#fff) right top/34px 2.5px, linear-gradient(#fff,#fff) right top/2.5px 34px, linear-gradient(#fff,#fff) left bottom/34px 2.5px, linear-gradient(#fff,#fff) left bottom/2.5px 34px, linear-gradient(#fff,#fff) right bottom/34px 2.5px, linear-gradient(#fff,#fff) right bottom/2.5px 34px; background-repeat: no-repeat; transition: inset .4s var(--s-ease); } .s207-door:hover .s207-sucher { inset: 30px; } .s207-exif, .s207-specs { position: absolute; top: 30px; z-index: 2; display: flex; gap: 16px; align-items: center; font-family: var(--s-mono); font-size: 12px; letter-spacing: .03em; } .s207-exif { left: 70px; } .s207-exif .rec { display: inline-flex; align-items: center; gap: 6px; } .s207-exif .rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s-wine-l); animation: s207-blink 1.6s steps(2, start) infinite; } .s207-specs { left: 30px; color: #C9CAD0; } .s207-focus { position: absolute; left: 50%; top: 40%; width: 70px; height: 52px; margin-left: -35px; z-index: 2; pointer-events: none; background: linear-gradient(#fff,#fff) left top/12px 1.5px, linear-gradient(#fff,#fff) left top/1.5px 12px, linear-gradient(#fff,#fff) right top/12px 1.5px, linear-gradient(#fff,#fff) right top/1.5px 12px, linear-gradient(#fff,#fff) left bottom/12px 1.5px, linear-gradient(#fff,#fff) left bottom/1.5px 12px, linear-gradient(#fff,#fff) right bottom/12px 1.5px, linear-gradient(#fff,#fff) right bottom/1.5px 12px; background-repeat: no-repeat; transition: transform .4s var(--s-ease); } .s207-door:hover .s207-focus { transform: scale(.82); } .s207-door-text { position: relative; z-index: 3; padding: 40px 48px 50px; display: flex; flex-direction: column; gap: 12px; } .s207-door-title { font-family: var(--s-display); font-weight: 700; font-size: clamp(2.75rem, 5vw, 4.5rem); letter-spacing: -.055em; line-height: .95; } .s207-door-sub { font-size: 16px; color: rgba(255, 255, 255, .88); } .s207-door-link { margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15.5px; } .s207-door-link span { border-bottom: 1.5px solid currentColor; padding-bottom: 3px; } .s207-door-link svg { transition: transform .25s var(--s-ease); } .s207-door:hover .s207-door-link svg { transform: translateX(5px); } .s207-gridbg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 48px 48px; } .s207-artboard { position: absolute; z-index: 1; } .s207-door .s207-artboard { right: 64px; top: 92px; width: 210px; height: 290px; transform: rotate(4deg); transition: transform .6s var(--s-ease); } .s207-door:hover .s207-artboard { transform: rotate(1deg) scale(1.03); } .s207-artboard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .s207-crop { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .s207-crop i { position: absolute; background: var(--s-wine-l); } .s207-crop i:nth-child(odd) { width: 14px; height: 1.5px; } .s207-crop i:nth-child(even) { width: 1.5px; height: 14px; } .s207-crop i:nth-child(1) { left: -22px; top: 0; } .s207-crop i:nth-child(2) { left: 0; top: -22px; } .s207-crop i:nth-child(3) { right: -22px; top: 0; } .s207-crop i:nth-child(4) { right: 0; top: -22px; } .s207-crop i:nth-child(5) { left: -22px; bottom: 0; } .s207-crop i:nth-child(6) { left: 0; bottom: -22px; } .s207-crop i:nth-child(7) { right: -22px; bottom: 0; } .s207-crop i:nth-child(8) { right: 0; bottom: -22px; } .s207-poster { position: absolute; inset: 0; background: var(--s-paper); color: var(--s-ink); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; } .s207-poster-top { font-family: var(--s-mono); font-size: 10.5px; color: var(--s-wine); } .s207-poster-aa { font-family: var(--s-display); font-weight: 700; font-size: 100px; letter-spacing: -.06em; line-height: .8; } .s207-poster.is-big { background: var(--s-wine); color: #fff; padding: 28px; } .s207-poster.is-big .s207-poster-top { color: #F3D2D6; font-size: 11.5px; } .s207-poster.is-big .s207-poster-aa { font-size: 160px; } .s207-poster-sw { position: absolute; right: 18px; top: 18px; display: flex; flex-direction: column; gap: 6px; } .s207-poster-sw i { width: 24px; height: 24px; border-radius: 50%; background: var(--s-wine); } .s207-poster-sw i:nth-child(2) { background: var(--s-wine-l); } .s207-poster-sw i:nth-child(3) { background: var(--s-ink); } .s207-poster.is-big .s207-poster-sw i:nth-child(1) { background: #fff; } .s207-poster.is-big .s207-poster-sw i:nth-child(3) { background: var(--s-dark); } .s207-poster-lines { display: flex; flex-direction: column; gap: 7px; } .s207-poster-lines i { height: 4px; background: #C9CAC4; } .s207-poster-lines i:nth-child(1) { height: 7px; width: 82%; background: currentColor; } .s207-poster-lines i:nth-child(3) { width: 64%; } .s207-poster.is-big .s207-poster-lines i:not(:first-child) { background: rgba(255, 255, 255, .45); } .s207-bezier { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; } .s207-bezier path, .s207-bezier rect { vector-effect: non-scaling-stroke; } .s207-bezier .c { stroke: var(--s-wine-l); stroke-width: 2; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: s207-draw 2.6s .4s var(--s-ease) forwards; } .s207-bezier .h { stroke: rgba(227, 166, 174, .55); stroke-width: 1; } .s207-bezier .a { fill: var(--s-dark); stroke: var(--s-wine-l); stroke-width: 1.5; } .s207-bezier .k { fill: var(--s-wine-l); } .s207-seal { position: absolute; left: 50%; top: 50%; z-index: 5; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: var(--s-wine); box-shadow: 0 0 0 10px var(--s-paper); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .3s var(--s-ease), background .2s; text-decoration: none; } .s207-seal:hover { transform: scale(1.07); background: var(--s-wine-d); color: #fff; } .s207-seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: s207-spin 18s linear infinite; } .s207-seal-ring text { fill: #fff; font-family: var(--s-sans); font-size: 9.6px; font-weight: 600; letter-spacing: 2.1px; } .s207-seal-amp { font-family: var(--s-serif); font-style: italic; font-size: 58px; line-height: 1; } /* Laufband */ .s207-band { padding: 76px 0 0; overflow: hidden; } .s207-marquee { background: var(--s-wine); color: #fff; padding: 22px 0; transform: rotate(-1.2deg); width: 104%; margin-left: -2%; overflow: hidden; } .s207-marquee-in { display: flex; gap: 28px; padding-right: 28px; width: max-content; white-space: nowrap; align-items: center; font-family: var(--s-display); font-weight: 700; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.04em; line-height: 1.1; animation: s207-marquee 42s linear infinite; } .s207-marquee:hover .s207-marquee-in { animation-play-state: paused; } .s207-marquee-in .is-outline { color: transparent; -webkit-text-stroke: 1.4px #fff; } .s207-marquee-in .s207-amp { font-size: 1.1em; line-height: 1; } /* Karten: Foto & Design */ .wp-block-columns.s207-kombis, .wp-block-columns.s207-prints, .wp-block-columns.s207-designcards { align-items: stretch !important; } .s207-kombis > .wp-block-column, .s207-designcards > .wp-block-column, .s207-prints > .wp-block-column { display: flex; } .s207-kombi, .s207-designcard { position: relative; width: 100%; background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--s-ease), box-shadow .3s; } .s207-kombi:hover, .s207-designcard:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(15, 16, 18, .1); } .s207-kombi > :not(.s207-collage), .s207-designcard > :not(.s207-mini) { margin-left: 28px !important; margin-right: 28px !important; } .s207-kombi h3, .s207-designcard h3 { margin-top: 26px !important; margin-bottom: 10px !important; font-size: 26px; letter-spacing: -.04em; } .s207-designcard h3 { font-size: 22px; margin-top: 22px !important; } .s207-kombi h3 a::after, .s207-designcard h3 a::after, .s207-printcard h3 a::after, .s207-bridge h2 a::after { content: ""; position: absolute; inset: 0; z-index: 4; } .s207-kombi p:not(.s207-cardfoot):not(.s207-hand), .s207-designcard p:not(.s207-cardfoot), .s207-printcard p:not(.s207-cardfoot) { font-size: 15.5px; line-height: 1.6; color: var(--s-ink-2); } .s207-cardfoot { display: flex; justify-content: space-between; gap: 12px; margin-top: auto !important; padding: 14px 0 26px; border-top: 1px solid var(--s-line); font-size: 15px; } .s207-kombi p + .s207-cardfoot, .s207-designcard p + .s207-cardfoot { margin-top: 18px !important; } .s207-cardfoot span { color: var(--s-muted); } .s207-cardfoot a { color: var(--s-wine); font-weight: 600; text-decoration: none; } .s207-collage { position: relative; height: 250px; background: #ECE9E3; flex-shrink: 0; } .s207-collage > .wp-block-image { position: absolute; margin: 0 !important; transition: transform .45s var(--s-ease); } .s207-collage .s207-c1 { left: 9%; top: 11%; width: 40%; transform: rotate(-5deg); z-index: 1; } .s207-collage .s207-c2 { right: 8%; top: 24%; width: 48%; transform: rotate(4deg); z-index: 2; } .s207-collage .s207-c1 img { aspect-ratio: 4 / 5; object-fit: cover; } .s207-collage .s207-c2 img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; box-shadow: 0 14px 30px rgba(15, 16, 18, .2); } .s207-kombi:hover .s207-c1 { transform: rotate(-2deg) translateY(-4px); } .s207-kombi:hover .s207-c2 { transform: rotate(6deg) translateY(-2px); } .s207-collage > .s207-hand { position: absolute; right: 10%; bottom: 8%; z-index: 3; margin: 0 !important; font-size: 22px; transform: rotate(-4deg); } .s207-collage.is-small { height: 280px; background: none; } .s207-collage.is-large { height: 540px; border-radius: 22px; } .s207-collage.is-large .s207-c1 { width: 44%; left: 7%; top: 9%; } .s207-collage.is-large .s207-c2 { width: 52%; top: 30%; } .s207-collage.is-large > .s207-hand { font-size: 30px; bottom: 7%; } .wp-block-image.is-style-s207-abzug { background: #fff; padding: 9px 9px 34px; box-shadow: 0 14px 30px rgba(15, 16, 18, .16); position: relative; } .wp-block-image.is-style-s207-abzug img { border-radius: 0 !important; } .wp-block-image.is-style-s207-abzug figcaption { position: absolute; left: 13px; right: 13px; bottom: 6px; margin: 0; font-family: var(--s-serif); font-style: italic; font-size: 19px; line-height: 1.2; color: #3A3C42; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s207-split .is-style-s207-abzug.s207-tall { transform: rotate(-1.5deg); } /* Fotoabzüge als Leistungskarten */ .s207-printcard { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; } .s207-printcard .wp-block-image { transform: rotate(-1.5deg); transition: transform .4s var(--s-ease); margin-bottom: 8px !important; } .s207-prints > .wp-block-column:nth-child(even) .s207-printcard .wp-block-image { transform: rotate(1.4deg); } .s207-printcard:hover .wp-block-image { transform: rotate(0) translateY(-5px) !important; } .s207-printcard .wp-block-image img { aspect-ratio: 4 / 3.5; object-fit: cover; } .s207-printcard h3 { font-size: 22px; margin: 6px 0 0 !important; } .s207-printcard .s207-cardfoot { padding-bottom: 0; } /* Was wir machen */ .wp-block-columns.s207-svc-cols { gap: 24px 56px; margin-top: 40px !important; } .s207-svc-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--s-ink); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--s-wine); } .s207-svc-head span { display: inline-flex; align-items: center; gap: 9px; } .s207-svc-head a { text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--s-ink); text-decoration: none; font-weight: 600; } .s207-svc-head a:hover { color: var(--s-wine); } .s207-svc-row { position: relative; display: flex; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--s-line); } .s207-svc-row > .wp-block-image, .s207-svc-row > .s207-mini { width: 72px; height: 72px; flex-shrink: 0; margin: 0 !important; } .s207-svc-row > .wp-block-image img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; } .s207-svc-txt { flex: 1; min-width: 0; } .s207-svc-txt h3 { font-size: 20px; margin: 0 0 3px !important; transition: color .15s; } .s207-svc-txt h3 a::after { content: ""; position: absolute; inset: 0; } .s207-svc-txt p { font-size: 14.5px; color: var(--s-muted); } .s207-svc-row::after { content: "→"; font-size: 20px; transition: transform .2s var(--s-ease); } .s207-svc-row:hover::after { transform: translateX(5px); } .s207-svc-row:hover h3 { color: var(--s-wine); } /* Mini-Illustrationen (Design) – Größen in em */ .s207-mini { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.2em; height: 22em; font-size: 10px; background: #ECECE8; overflow: hidden; flex-shrink: 0; } .s207-mini.is-print { background: var(--s-dark); } .s207-mini.is-werbemittel { background: #F3E4E6; } .s207-svc-row .s207-mini { font-size: 3.3px; border-radius: 10px; height: 72px; } .s207-mini .m-card { width: 17em; height: 10.4em; background: #fff; border-radius: .4em; box-shadow: 0 1.2em 3em rgba(15, 16, 18, .14); padding: 1.4em; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-4deg); } .s207-mini .m-card b { font-family: var(--s-display); font-weight: 700; font-size: 1.75em; letter-spacing: -.045em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--s-ink); } .s207-mini .m-card em { color: var(--s-wine); font-style: normal; } .s207-mini .m-card i { display: block; height: .3em; width: 55%; background: #C9CAC4; } .s207-mini .m-poster { width: 9.2em; height: 13em; background: var(--s-wine); padding: 1em; display: flex; flex-direction: column; justify-content: space-between; color: #fff; transform: rotate(-4deg); } .s207-mini .m-poster b { font-family: var(--s-display); font-weight: 700; font-size: 1.9em; line-height: .88; letter-spacing: -.06em; } .s207-mini .m-poster em { font-family: var(--s-serif); font-weight: 400; letter-spacing: 0; } .s207-mini .m-poster i { display: block; height: .3em; width: 70%; background: var(--s-wine-l); } .s207-mini .m-flyer { width: 7.2em; height: 10.2em; background: var(--s-paper); padding: .8em; display: flex; flex-direction: column; gap: .45em; transform: rotate(5deg); } .s207-mini .m-flyer i { display: block; height: .3em; background: #C9CAC4; } .s207-mini .m-flyer i:first-child { height: 3em; background: var(--s-wine-l); } .s207-mini .m-flyer i:last-child { width: 60%; } .s207-mini .m-rollup { width: 5.6em; height: 15em; background: var(--s-dark); color: var(--s-wine-l); display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; font-size: 1em; font-weight: 700; letter-spacing: .2em; border-radius: .3em; } .s207-mini .m-badge { font-size: 3em; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--s-wine); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--s-serif); font-style: italic; transform: rotate(-10deg); } .s207-mini .m-browser { width: 20em; height: 13em; background: var(--s-dark); border-radius: .6em; padding: .8em; display: flex; flex-direction: column; gap: .6em; transform: rotate(3deg); } .s207-mini .m-browser .dots { display: flex; gap: .3em; } .s207-mini .m-browser .dots i { width: .5em; height: .5em; border-radius: 50%; background: #5E6066; } .s207-mini .m-browser .page { flex: 1; background: var(--s-paper); border-radius: .3em; padding: 1em; display: flex; flex-direction: column; gap: .5em; } .s207-mini .m-browser .page i { display: block; height: .3em; width: 80%; background: #C9CAC4; } .s207-mini .m-browser .page i:first-child { height: .7em; width: 55%; background: var(--s-ink); } .s207-mini .m-browser .page b { display: block; margin-top: auto; height: 1.1em; width: 38%; background: var(--s-wine); border-radius: .2em; } .s207-designcard .s207-mini { transition: transform .4s var(--s-ease); } .s207-designcard:hover .s207-mini > span { transform: rotate(0); transition: transform .4s var(--s-ease); } /* Werktisch */ .s207-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; } .s207-pills a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(15, 16, 18, .18); font-size: 14.5px; font-weight: 500; color: var(--s-ink); text-decoration: none; transition: border-color .15s, background .15s; } .s207-pills a:hover { border-color: var(--s-ink); } .s207-pills a .s207-mark { color: var(--s-wine); } .s207-pills a.is-on, .s207-pills a[aria-current] { background: var(--s-ink); border-color: var(--s-ink); color: #fff; } .s207-pills a.is-on .s207-mark, .s207-pills a[aria-current] .s207-mark { color: var(--s-wine-l); } .s207-pills a.is-sub { font-size: 13.5px; padding: 8px 14px; color: var(--s-ink-2); } .s207-desk-scroll { overflow-x: auto; border-radius: 24px; -webkit-overflow-scrolling: touch; } .s207-desk { position: relative; min-width: 980px; aspect-ratio: 1232 / 680; background-color: #E6E3DC; background-image: radial-gradient(rgba(15, 16, 18, .09) 1px, transparent 1px); background-size: 18px 18px; border-radius: 24px; overflow: hidden; } .s207-desk-item { position: absolute; display: block; transform: rotate(var(--r, 0deg)); transition: transform .4s var(--s-ease), box-shadow .4s; text-decoration: none; } .s207-desk-item:hover, .s207-desk-item:focus-visible { transform: rotate(0deg) scale(1.03); z-index: 6; } .s207-desk-item.is-print { background: #fff; padding: 12px 12px 40px; box-shadow: 0 18px 40px rgba(15, 16, 18, .18); } .s207-desk-item.is-mock { box-shadow: 0 18px 40px rgba(15, 16, 18, .24); background: #fff; } .s207-desk-img { display: block; width: 100%; height: 100%; overflow: hidden; } .s207-desk-img img, .s207-desk-img .s207-img-empty { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; background: #d9d6cf; } .s207-desk-item .s207-hand { position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .s207-desk-item.is-print .s207-hand { left: 14px; right: 14px; bottom: 9px; font-size: 20px; color: #3A3C42; } .s207-desk-item.is-mock .s207-hand { left: 2px; bottom: -34px; font-size: 22px; max-width: 280px; } .s207-desk .slot-1 { left: 4%; top: 6%; width: 21%; aspect-ratio: 4 / 5; --r: -4deg; } .s207-desk .slot-2 { left: 31%; top: 5%; width: 17%; aspect-ratio: 1 / 1.414; --r: 3deg; } .s207-desk .slot-3 { left: 56%; top: 12%; width: 21%; aspect-ratio: 85 / 55; --r: -3deg; } .s207-desk .slot-4 { left: 81%; top: 6%; width: 15%; height: 72%; --r: 6deg; background: var(--s-ink) !important; padding: 10px; border-radius: 30px; } .s207-desk .slot-4 .s207-desk-img { border-radius: 21px; } .s207-desk .slot-4 .s207-hand { bottom: -38px; } .s207-desk .slot-5 { left: 64%; top: 52%; width: 13%; aspect-ratio: 1 / 1.18; --r: 7deg; } .s207-desk .slot-6 { left: 6%; top: 69%; width: 17%; aspect-ratio: 4 / 3; --r: 3deg; } .s207-desk .slot-7 { left: 30%; top: 59%; width: 14%; aspect-ratio: 1 / 1; --r: -6deg; } .s207-chip { position: absolute; left: 51%; top: 59%; width: 9.5%; aspect-ratio: 3 / 4.2; background: #fff; transform: rotate(-8deg); box-shadow: 0 12px 26px rgba(15, 16, 18, .18); display: flex; flex-direction: column; } .s207-chip i { flex: 1.3; background: var(--s-wine); } .s207-chip b { padding: 8px 9px 0; font-size: 10.5px; } .s207-chip span { padding: 0 9px; font-family: var(--s-mono); font-size: 9px; color: var(--s-muted); } .s207-chip span:last-child { padding-bottom: 9px; } .s207-desk-note { position: absolute; left: 25%; top: 50%; font-size: 30px; transform: rotate(-6deg); } .s207-desk-all { position: absolute; right: 24px; bottom: 22px; z-index: 7; background: var(--s-ink); color: #fff; border-radius: 99px; padding: 14px 22px; font-size: 15px; font-weight: 600; text-decoration: none; } .s207-desk-all:hover { background: var(--s-wine); color: #fff; } /* Signature-Style-Regler */ .s207-look { display: flex; flex-direction: column; gap: 14px; } .s207-look-btns { display: flex; flex-wrap: wrap; gap: 8px; } .s207-look-btns button { font: inherit; font-size: 14.5px; font-weight: 600; padding: 10px 18px; border-radius: 99px; border: 1.5px solid rgba(15, 16, 18, .18); background: #fff; color: var(--s-ink); cursor: pointer; transition: all .15s; } .s207-look-btns button:hover { border-color: var(--s-ink); } .s207-look-btns button[aria-pressed=true] { background: var(--s-wine); border-color: var(--s-wine); color: #fff; } .s207-look-stage { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; background: var(--s-paper-2); } .s207-look-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; pointer-events: none; } .s207-look-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); } .s207-look[data-look=warm] .s207-look-after img { filter: sepia(.38) saturate(1.18) contrast(1.1) brightness(1.03) hue-rotate(-6deg); } .s207-look[data-look=matt] .s207-look-after img { filter: contrast(.84) saturate(.7) brightness(1.06) sepia(.1); } .s207-look[data-look=wein] .s207-look-after img { filter: url(#s207-duotone); } .s207-look[data-look=sw] .s207-look-after img { filter: grayscale(1) contrast(1.22); } .s207-look-stage::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; z-index: 2; } .s207-look-handle { position: absolute; top: 50%; left: var(--pos); z-index: 3; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fff; color: var(--s-ink); box-shadow: 0 6px 18px rgba(15, 16, 18, .25); display: flex; align-items: center; justify-content: center; } .s207-look-tag { position: absolute; top: 16px; z-index: 3; font-family: var(--s-mono); font-size: 12px; color: #fff; padding: 5px 9px; border-radius: 6px; } .s207-look-tag.is-l { left: 18px; background: rgba(15, 16, 18, .5); } .s207-look-tag.is-r { right: 18px; background: rgba(122, 31, 46, .88); } .s207-look-range { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--s-muted); } .s207-look-range input { flex: 1; accent-color: var(--s-wine); height: 32px; } /* Ablauf als Filmstreifen */ .s207-section.s207-film-sec > h2 { margin-bottom: 34px !important; } .s207-film { margin-inline: calc(50% - 50vw) !important; padding: 36px calc(50vw - 50%); background-color: #141518; background-image: repeating-linear-gradient(90deg, var(--s-paper) 0 14px, transparent 14px 34px), repeating-linear-gradient(90deg, var(--s-paper) 0 14px, transparent 14px 34px); background-size: 100% 9px, 100% 9px; background-position: 0 12px, 0 calc(100% - 12px); background-repeat: no-repeat; } .wp-block-columns.s207-frames { gap: 12px; align-items: stretch !important; } .s207-frame { background: #26272C; border-radius: 6px; padding: 24px; color: #fff; min-height: 196px; } .s207-frame:last-child { background: var(--s-wine); } .s207-frame-no { font-family: var(--s-mono); font-size: 11px; color: var(--s-wine-l); } .s207-frame:last-child .s207-frame-no, .s207-frame:last-child p { color: #F3D2D6 !important; } .s207-frame h3 { font-size: 22px; margin: 10px 0 8px !important; color: #fff; } .s207-frame p:not(.s207-frame-no) { color: #C9CAD0; font-size: 15px; } /* Ablauf auf dem Gestaltungsraster */ .s207-raster { position: relative; --g: 16px; border-radius: 18px; padding: 54px 28px 40px; background: repeating-linear-gradient(90deg, rgba(227, 166, 174, .24) 0 calc((100% - 11 * var(--g)) / 12), transparent calc((100% - 11 * var(--g)) / 12) calc((100% - 11 * var(--g)) / 12 + var(--g))) content-box, #fff; } .s207-raster-label { position: absolute; left: 28px; top: 18px; font-family: var(--s-mono); font-size: 11px; color: var(--s-wine); } .wp-block-columns.s207-rsteps { gap: var(--g); align-items: flex-start !important; } .s207-rstep { border-top: 2px solid var(--s-ink); padding-top: 16px; } .s207-rstep:nth-child(2) { margin-top: 40px; } .s207-rstep:nth-child(3) { margin-top: 80px; } .s207-rstep:nth-child(4) { margin-top: 120px; } .s207-rstep:last-child { border-color: var(--s-wine); } .s207-rstep:last-child h3 { color: var(--s-wine); } .s207-raster-no { font-family: var(--s-mono); font-size: 11px; color: var(--s-wine); } .s207-rstep h3 { font-size: 22px; margin: 8px 0 !important; } .s207-rstep p:not(.s207-raster-no) { font-size: 15px; color: var(--s-ink-2); } /* Logo-Spielwiese */ .s207-playbox { background: var(--s-dark); color: #fff; border-radius: 26px; padding: clamp(28px, 5vw, 60px); } .s207-playbox .s207-eyebrow, .s207-playbox h2 em { color: var(--s-wine-l); } .s207-playbox .s207-head { margin-bottom: 32px; } .s207-play-ctrl { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; margin-bottom: 28px; } .s207-play-input { flex: 1 1 380px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #C9CAD0; } .s207-play-input input { font: inherit; font-size: 20px; font-weight: 600; color: #fff; background: #1F2025; border: 1.5px solid #3A3C42; border-radius: 12px; padding: 14px 18px; outline: none; } .s207-play-input input:focus { border-color: var(--s-wine-l); } .s207-play-sw { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #C9CAD0; } .s207-play-sw button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #3A3C42; cursor: pointer; padding: 0; transition: transform .15s; } .s207-play-sw button:hover { transform: scale(1.08); } .s207-play-sw button[aria-pressed=true] { border: 3px solid #fff; } .s207-play-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .s207-play-t { position: relative; border-radius: 16px; height: 240px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: background .3s; } .s207-play-t .lab { font-family: var(--s-mono); font-size: 11px; color: #5E6066; } .s207-play-t.is-word { background: var(--s-paper); color: var(--s-ink); } .s207-play-t.is-word .n { font-family: var(--s-display); font-weight: 700; font-size: 40px; letter-spacing: -.055em; line-height: 1; overflow-wrap: anywhere; } .s207-play-t.is-word i { font-style: normal; color: var(--acc); transition: color .3s; } .s207-play-t .bar { height: 4px; width: 56px; background: var(--acc); transition: background .3s; } .s207-play-t.is-mono { background: #fff; color: var(--s-ink); align-items: center; justify-content: center; gap: 16px; } .s207-play-t.is-mono .lab { position: absolute; left: 22px; top: 22px; } .s207-play-t.is-mono .c { width: 104px; height: 104px; border-radius: 50%; background: var(--acc); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--s-serif); font-style: italic; font-size: 52px; line-height: 1; transition: background .3s; } .s207-play-t.is-mono .n { font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; text-align: center; } .s207-play-t.is-label { background: var(--acc); color: #fff; } .s207-play-t.is-label .lab { color: rgba(255, 255, 255, .75); } .s207-play-t.is-label .n { font-family: var(--s-serif); font-style: italic; font-size: 48px; line-height: .95; overflow-wrap: anywhere; } .s207-play-t.is-label .foot { display: flex; justify-content: space-between; font-family: var(--s-mono); font-size: 11px; color: rgba(255, 255, 255, .8); border-top: 1px solid rgba(255, 255, 255, .35); padding-top: 10px; } .s207-play-note { margin-top: 26px !important; color: #B9BAC0; font-size: 15px; } .s207-play-note a { color: var(--s-wine-l); font-weight: 600; text-decoration: none; } /* Kontaktbogen */ .s207-sheet { background: #141518; border-radius: 16px; padding: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px 18px; } .s207-sheet-frame { position: relative; display: flex; flex-direction: column; gap: 8px; text-decoration: none; } .s207-sheet-frame .s207-sig { display: block; overflow: hidden; } .s207-sheet-frame img, .s207-sheet-frame .s207-img-empty { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; transition: transform .6s var(--s-ease); } .s207-sheet-frame:hover img { transform: scale(1.05); } .s207-sheet-frame .no { font-family: var(--s-mono); font-size: 11px; color: #8A8C92; } .s207-sheet-frame.is-fav::before { content: ""; position: absolute; left: -7%; top: -10%; width: 114%; height: 100%; z-index: 2; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 0 112 84' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M50 4 C 90 2, 99 30, 94 52 C 88 78, 20 82, 7 58 C -4 34, 14 6, 56 8' stroke='%23E04A5F' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .s207-sheet-frame .s207-hand { position: absolute; right: 4px; top: -26px; z-index: 3; color: var(--s-wine-l); font-size: 24px; transform: rotate(-6deg); } /* Druckbogen */ .s207-printsheet { position: relative; background: #fff; border-radius: 6px; padding: 64px 48px 48px; box-shadow: 0 20px 50px rgba(15, 16, 18, .08); } .s207-colorbar { position: absolute; left: 48px; top: 22px; display: flex; } .s207-colorbar i { width: 22px; height: 14px; background: var(--s-ink); } .s207-colorbar i:nth-child(2) { background: var(--s-wine); } .s207-colorbar i:nth-child(3) { background: var(--s-wine-l); } .s207-colorbar i:nth-child(4) { background: #C9CAC4; } .s207-colorbar i:nth-child(5) { background: #8A8C92; } .s207-colorbar i:nth-child(6) { background: #ECECE8; } .s207-printname { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); font-family: var(--s-mono); font-size: 11px; color: var(--s-muted); white-space: nowrap; } .s207-reg { position: absolute; right: 48px; top: 18px; fill: none; stroke: var(--s-ink); stroke-width: 1; } .s207-printsheet > .s207-crop { inset: 48px 36px 32px; } .s207-printsheet > .s207-crop i { background: var(--s-ink); } .s207-print-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .s207-print-cell { display: flex; flex-direction: column; gap: 10px; text-decoration: none; } .s207-print-cell .pic { display: block; height: 300px; background: #ECECE8; overflow: hidden; } .s207-print-cell .pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .6s var(--s-ease); } .s207-print-cell:hover .pic img { transform: scale(1.04); } .s207-print-cell .pic.is-demo .s207-mini { height: 100%; font-size: 12px; } .s207-print-cell .cap { font-weight: 600; font-size: 16px; } /* Design-Entwurf (Bereichsseite) */ .s207-draft { position: relative; height: 580px; border-radius: 22px; overflow: hidden; background: var(--s-dark); } .s207-draft .s207-specs { top: 28px; } .s207-artboard.is-big { left: 50%; top: 52%; width: 290px; height: 410px; margin: -205px 0 0 -145px; transform: rotate(-3deg); } /* Fotografie: Bild im Kamerasucher */ .wp-block-image.is-style-s207-sucher { position: relative; } .wp-block-image.is-style-s207-sucher img { border-radius: 22px; } .wp-block-image.is-style-s207-sucher::after { content: ""; position: absolute; inset: 22px; z-index: 2; pointer-events: none; background: linear-gradient(#fff,#fff) left top/34px 2.5px, linear-gradient(#fff,#fff) left top/2.5px 34px, linear-gradient(#fff,#fff) right top/34px 2.5px, linear-gradient(#fff,#fff) right top/2.5px 34px, linear-gradient(#fff,#fff) left bottom/34px 2.5px, linear-gradient(#fff,#fff) left bottom/2.5px 34px, linear-gradient(#fff,#fff) right bottom/34px 2.5px, linear-gradient(#fff,#fff) right bottom/2.5px 34px; background-repeat: no-repeat; } .wp-block-image.is-style-s207-sucher::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 22px; background: linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .35) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255, 255, 255, .35) 0 calc(66.66% + .5px), transparent 0), linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .35) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255, 255, 255, .35) 0 calc(66.66% + .5px), transparent 0); } .wp-block-image.is-style-s207-sucher figcaption { position: absolute; left: 70px; top: 30px; z-index: 3; margin: 0; font-family: var(--s-mono); font-size: 12px; color: #fff; letter-spacing: .03em; } /* Brücken zwischen den Bereichen */ .s207-bridge { position: relative; border-radius: 24px; padding: clamp(32px, 5vw, 60px); background: #fff; overflow: hidden; } .s207-bridge.is-dark { background-color: var(--s-dark); color: #fff; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 40px 40px; } .s207-bridge::after { content: "&"; position: absolute; right: 30px; bottom: -130px; font-family: var(--s-serif); font-style: italic; font-size: 420px; line-height: 1; color: rgba(227, 166, 174, .13); pointer-events: none; } .s207-bridge:not(.is-dark)::after { right: auto; left: 40%; color: #F3E4E6; } .wp-block-columns.s207-bridge-cols { position: relative; z-index: 1; gap: 32px; align-items: center !important; } .s207-bridge h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin: 14px 0 !important; } .s207-bridge.is-dark h2 em, .s207-bridge.is-dark .s207-eyebrow { color: var(--s-wine-l); } .s207-bridge .s207-lead { color: inherit; opacity: .8; } .s207-bridge-link { margin-top: 20px !important; display: inline-block; font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; } /* Aussagen mit Handschrift-Akzent */ .s207-statements { display: flex; flex-direction: column; gap: 8px; } .s207-statements > * + * { margin-top: 0 !important; } .s207-statement { font-family: var(--s-display); font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.12; letter-spacing: -.05em; color: var(--s-ink); } .s207-statement.is-muted { color: #8A8C92; } .s207-statement.is-muted em { color: var(--s-ink); } .s207-statement em, h1.is-style-s207-strich em, h2.is-style-s207-strich em, h1.is-style-s207-kringel em, h2.is-style-s207-kringel em { position: relative; display: inline-block; } .s207-statement.is-kringel em::after, .is-style-s207-kringel em::after { content: ""; position: absolute; left: -7%; top: -14%; width: 114%; height: 128%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 0 216 60' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M104 6 C 170 4, 198 18, 196 32 C 193 52, 60 58, 14 46 C -6 40, 2 16, 40 9 C 70 4, 100 4, 126 6' stroke='%237A1F2E' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; } .s207-statement.is-strich em::after, .is-style-s207-strich em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.1em; height: .2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M3 12 C 60 2, 120 18, 180 8 S 270 4, 297 10' stroke='%237A1F2E' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; } .s207-bridge.is-dark .is-style-s207-strich em::after, .s207-playbox .is-style-s207-strich em::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M3 12 C 60 2, 120 18, 180 8 S 270 4, 297 10' stroke='%23E3A6AE' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); } /* Große Kundenstimme */ .s207-bigquote { position: relative; background: #fff; border-radius: 24px; padding: clamp(36px, 6vw, 72px); overflow: hidden; } .s207-qmark { position: absolute; right: 36px; top: 18px; font-family: var(--s-serif); font-size: 280px; line-height: .8; color: #F3E4E6; pointer-events: none; } .s207-bigquote .s207-quote-text { position: relative; max-width: 920px; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.28; font-weight: 500; } .s207-bigquote .s207-quote-who { position: relative; margin-top: 24px !important; color: var(--s-muted); opacity: 1; } .wp-block-columns.s207-smallquotes { margin-top: 28px !important; } .s207-smallquotes .s207-quote { border-top: 1px solid var(--s-line); } /* Pakete auf „Foto & Design“ */ .s207-paket h2 { margin: 14px 0 16px !important; } .s207-paket .s207-check { margin: 24px 0 0 !important; } .s207-paket .s207-price { margin: 22px 0 22px !important; } /* Abschluss-Aufruf: drei Wege */ .s207-cta { position: relative; overflow: hidden; background: var(--s-dark); padding: 110px 0; } .s207-cta-amp { position: absolute; right: -40px; bottom: -220px; font-family: var(--s-serif); font-style: italic; font-size: 660px; line-height: 1; color: rgba(227, 166, 174, .07); pointer-events: none; } .s207-cta-in { position: relative; display: block; } .s207-cta h2 { font-size: clamp(2.6rem, 6vw, 5.25rem); line-height: .95; letter-spacing: -.055em; margin: 16px 0 40px; max-width: none; } .s207-cta h2 em { color: var(--s-wine-l); } .s207-cta-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .s207-cta-choice { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 18px; padding: 28px; color: #fff; font-family: var(--s-display); font-size: 28px; font-weight: 600; letter-spacing: -.04em; text-decoration: none; transition: background .2s, border-color .2s, transform .2s var(--s-ease); } .s207-cta-choice > span:first-child { display: flex; align-items: center; gap: 14px; } .s207-cta-choice .s207-mark { color: var(--s-wine-l); } .s207-cta-choice:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .45); color: #fff; transform: translateY(-3px); } .s207-cta-choice.is-wine { background: var(--s-wine); border-color: var(--s-wine); } .s207-cta-choice.is-wine .s207-amp { color: #F3D2D6; font-size: 1.3em; } .s207-cta-choice.is-wine:hover { background: var(--s-wine-d); } .s207-cta-hint { margin-top: 28px !important; color: #B9BAC0; font-size: 16px; } .s207-cta-hint a { color: #fff; font-weight: 600; text-decoration: none; } /* Kontaktformular: Leistungen nach Bereich */ .s207-chipgroups { display: flex; flex-direction: column; gap: 6px; } .s207-chipgroup { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: start; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; transition: background .2s; } .s207-chipgroup.is-on { background: #F6E8EA; order: -1; } .s207-chipgroup-label { font-size: 13px; font-weight: 600; padding-top: 10px; } .s207-chipgroup.is-on .s207-chipgroup-label { color: var(--s-wine); } @keyframes s207-spin { to { transform: rotate(360deg); } } @keyframes s207-marquee { to { transform: translateX(-50%); } } @keyframes s207-draw { to { stroke-dashoffset: 0; } } @keyframes s207-blink { to { visibility: hidden; } } @media (max-width: 1099px) { .s207-door .s207-artboard { width: 170px; height: 236px; right: 40px; } .s207-play-tiles { grid-template-columns: 1fr 1fr; } .s207-play-t.is-label { grid-column: 1 / -1; } } @media (max-width: 960px) { .s207-print-grid { grid-template-columns: 1fr 1fr; } .s207-cta-choices { grid-template-columns: 1fr; } } @media (max-width: 781px) { .s207-section.s207-ll-hero { padding-top: 30px; } h1.s207-lichtlinie { font-size: 21vw; gap: 0 14px; } .s207-hero-row .wp-block-buttons { justify-content: flex-start; } .wp-block-columns.s207-hero-row { margin: 18px 0 26px; } .s207-doors-grid { grid-template-columns: 1fr; gap: 12px; } .s207-door { height: 400px; border-radius: 18px; } .s207-sucher { inset: 14px; background: linear-gradient(#fff,#fff) left top/24px 2px, linear-gradient(#fff,#fff) left top/2px 24px, linear-gradient(#fff,#fff) right top/24px 2px, linear-gradient(#fff,#fff) right top/2px 24px, linear-gradient(#fff,#fff) left bottom/24px 2px, linear-gradient(#fff,#fff) left bottom/2px 24px, linear-gradient(#fff,#fff) right bottom/24px 2px, linear-gradient(#fff,#fff) right bottom/2px 24px; background-repeat: no-repeat; } .s207-exif { left: 46px; top: 19px; font-size: 10.5px; gap: 10px; } .s207-specs { left: 20px; top: 19px; font-size: 10.5px; gap: 10px; } .s207-door-text { padding: 24px 26px 30px; gap: 8px; } .s207-door-title { font-size: 42px; } .s207-door-sub { font-size: 14.5px; } .s207-door .s207-artboard { width: 120px; height: 166px; right: 30px; top: 56px; } .s207-door .s207-poster-aa { font-size: 54px; } .s207-door .s207-poster { padding: 12px; } .s207-poster-sw i { width: 14px; height: 14px; } .s207-seal { width: 104px; height: 104px; margin: -52px 0 0 -52px; box-shadow: 0 0 0 7px var(--s-paper); left: auto; right: 26px; } .s207-seal-amp { font-size: 40px; } .s207-band { padding-top: 44px; } .s207-marquee { padding: 14px 0; transform: rotate(-2deg); width: 120%; margin-left: -10%; } .s207-marquee-in { font-size: 28px; gap: 16px; padding-right: 16px; } .s207-collage.is-large { height: 380px; } .s207-desk { min-width: 860px; } .s207-film { padding-block: 30px; } .s207-raster { --g: 10px; padding: 48px 18px 28px; } .wp-block-columns.s207-rsteps { gap: 0; } .s207-rstep { margin-top: 0 !important; padding: 16px 0 24px; } .s207-play-tiles { grid-template-columns: 1fr; } .s207-play-t { height: 200px; } .s207-sheet { padding: 18px; grid-template-columns: 1fr 1fr; gap: 16px 12px; } .s207-printsheet { padding: 52px 18px 24px; } .s207-printname { display: none; } .s207-colorbar { left: 18px; } .s207-reg { right: 18px; } .s207-printsheet > .s207-crop { display: none; } .s207-print-grid { grid-template-columns: 1fr; } .s207-print-cell .pic { height: 240px; } .s207-draft { height: 440px; } .s207-artboard.is-big { transform: rotate(-3deg) scale(.78); } .wp-block-image.is-style-s207-sucher::after { inset: 14px; background: linear-gradient(#fff,#fff) left top/24px 2px, linear-gradient(#fff,#fff) left top/2px 24px, linear-gradient(#fff,#fff) right top/24px 2px, linear-gradient(#fff,#fff) right top/2px 24px, linear-gradient(#fff,#fff) left bottom/24px 2px, linear-gradient(#fff,#fff) left bottom/2px 24px, linear-gradient(#fff,#fff) right bottom/24px 2px, linear-gradient(#fff,#fff) right bottom/2px 24px; background-repeat: no-repeat; } .wp-block-image.is-style-s207-sucher figcaption { left: 46px; top: 19px; font-size: 10.5px; } .s207-cta { padding: 72px 0; } .s207-cta h2 { font-size: 44px; margin-bottom: 28px; } .s207-cta-choice { padding: 22px; font-size: 24px; } .s207-chipgroup { grid-template-columns: 1fr; gap: 4px; } .s207-chipgroup-label { padding-top: 0; } .s207-qmark { font-size: 180px; top: 10px; right: 18px; } } /* Abstände Version 2 */ .s207-section > h2.wp-block-heading + .wp-block-columns, .s207-section > h2.wp-block-heading + .wp-block-group { margin-top: 44px !important; } #look .wp-block-columns.s207-split { align-items: flex-start !important; } @media (min-width: 782px) { #look .wp-block-columns.s207-split > .wp-block-column:first-child { padding-top: 70px; } } .s207-colorbar { left: 64px; }