/* Theme Name: Gebhart Theme URI: https://philippgebhart.de Author: Philipp Gebhart Description: Schlankes Classic Theme ohne Page Builder. Georgia-Überschriften, ein Akzent in Orange, warmer Off-White-Hintergrund. Referenzen kommen aus dem Plugin "Gebhart Referenzen". Version: 1.0.0 Requires at least: 6.3 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: gebhart */ /* ---------- Tokens ---------- */ :root { --bg: #F9F7F3; --panel: #EFEAE1; --placeholder: #EAE4D9; --ink: #141210; --text: #333333; --muted: #6B645C; --line: #E4DFD6; --line-strong: #D8D1C4; --accent: #D95C09; --accent-text: #AD4705; --accent-strong: #B84B05; --accent-hover: #8F3A04; --dark: #141210; --on-dark: #F9F7F3; --on-dark-muted: #D8D1C4; --serif: Georgia, "Times New Roman", serif; --sans: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --gutter: clamp(16px, 4vw, 48px); --wrap: 1200px; --radius: 4px; } /* ---------- Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; } img, video { max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0; line-height: 1.15; text-wrap: balance; } h1 { font-size: clamp(32px, 5vw, 48px); } h2 { font-size: clamp(26px, 3.4vw, 36px); } h3 { font-size: clamp(20px, 2.4vw, 24px); } p { margin: 0; } a { color: var(--accent-text); } a:hover { color: var(--accent-hover); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; background: var(--ink); color: #fff; padding: 10px 16px; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 760px; } .eyebrow, .meta-label { font-family: var(--sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin: 0; } .meta-label { color: var(--muted); } .muted { color: var(--muted); } /* ---------- Buttons ---------- */ .btn, .wp-block-button__link { display: inline-block; background: var(--accent-strong); color: #fff; padding: 14px 24px; border-radius: var(--radius); font-size: 16px; line-height: 1.3; text-decoration: none; border: 0; cursor: pointer; } .btn:hover, .wp-block-button__link:hover { background: var(--accent-hover); color: #fff; } .btn--small { padding: 12px 20px; font-size: 15px; } .wp-block-button.is-style-outline .wp-block-button__link, .btn--ghost { background: transparent; color: var(--ink); border: 0; padding-inline: 8px; } .wp-block-button.is-style-outline .wp-block-button__link:hover, .btn--ghost:hover { background: transparent; color: var(--accent-hover); } .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; } /* ---------- Header ---------- */ .site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; } .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .site-header { top: 0; } } @media (max-width: 899px) { .site-header { max-height: 100vh; max-height: 100dvh; overflow-y: auto; } } html { scroll-padding-top: 96px; } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 14px; } .site-logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); } .site-logo img { display: block; max-height: 44px; width: auto; } .site-logo__text { font-family: var(--serif); font-size: 22px; color: var(--ink); } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; } .site-nav a { color: var(--ink); text-decoration: none; font-size: 15px; display: inline-block; padding: 6px 0; border-bottom: 2px solid transparent; } .site-nav a:hover, .site-nav .current-menu-item > a, .site-nav .current-menu-ancestor > a { border-bottom-color: var(--accent); } .site-nav .menu-item-has-children { position: relative; } .site-nav .sub-menu { display: none; position: absolute; top: 100%; left: -16px; z-index: 20; flex-direction: column; gap: 0; min-width: 280px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 16px; box-shadow: 0 8px 24px rgba(20, 18, 16, .08); } @media (hover: hover) and (pointer: fine) { .site-nav .menu-item-has-children:hover > .sub-menu { display: flex; } } .site-nav .menu-item-has-children:focus-within > .sub-menu { display: flex; } .site-header__cta { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: transparent; border: 0; color: var(--ink); cursor: pointer; } .nav-toggle__bars { position: relative; display: block; width: 24px; height: 16px; } .nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor; transition: transform .25s cubic-bezier(.23, 1, .32, 1), opacity .2s ease, top .25s cubic-bezier(.23, 1, .32, 1); } .nav-toggle__bars span:nth-child(1) { top: 0; } .nav-toggle__bars span:nth-child(2) { top: 7px; } .nav-toggle__bars span:nth-child(3) { top: 14px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .nav-toggle__bars span { transition: none; } } .site-header__nav { display: none; width: 100%; } .site-header__nav.is-open { display: block; } .site-header__nav .site-nav ul { flex-direction: column; gap: 0; } .site-header__nav .site-nav li { border-top: 1px solid var(--line); } .site-header__nav .site-nav a { padding: 12px 0; width: 100%; } .site-header__nav .sub-menu { display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 8px 16px; min-width: 0; background: transparent; } .site-header__nav .sub-menu li { border-top: 0; } .site-header__nav .btn { margin: 12px 0 8px; } @media (min-width: 900px) { .nav-toggle { display: none; } .site-header__nav { display: flex; align-items: center; gap: 28px; width: auto; flex: 1 1 auto; justify-content: flex-end; } .site-header__nav .site-nav ul { flex-direction: row; gap: 4px 28px; } .site-header__nav .site-nav li { border-top: 0; } .site-header__nav .site-nav a { width: auto; padding: 6px 0; } .site-header__nav .sub-menu { display: none; position: absolute; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(20, 18, 16, .08); padding: 8px 16px; background: var(--bg); min-width: 280px; } .site-header__nav .menu-item-has-children:focus-within > .sub-menu { display: flex; } @media (hover: hover) and (pointer: fine) { .site-header__nav .menu-item-has-children:hover > .sub-menu { display: flex; } } .site-header__nav .btn { margin: 0; } } /* ---------- Seitenaufbau ---------- */ .site-main { display: block; } .page-head { padding-block: clamp(40px, 7vw, 72px) clamp(24px, 4vw, 40px); } .page-head .wrap { display: flex; flex-direction: column; gap: 16px; } .page-head h1 { max-width: 820px; } .page-head__lead { font-size: 18px; max-width: 720px; } .section { padding-block: clamp(40px, 6vw, 72px); } .section--panel { background: var(--panel); } .section--dark { background: var(--dark); color: var(--on-dark-muted); } .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-dark); } /* Inhalte aus dem Block-Editor */ /* Gruppen-Blöcke: WordPress setzt je nach Setup einen Innen-Container ein. Der wird "durchsichtig" gemacht. */ .entry-content .wp-block-group__inner-container { display: contents; } .entry-content > *, .entry-content > .wp-block-group > :not(.wp-block-group__inner-container), .entry-content > .wp-block-group > .wp-block-group__inner-container > * { width: 100%; max-width: var(--wrap); margin-left: max(0px, calc((100% - var(--wrap)) / 2)); margin-right: 0; padding-inline: var(--gutter); } .entry-content > .wp-block-group { max-width: none; width: 100%; margin: 0; padding-inline: 0; } .entry-content > * + * { margin-top: 20px; } .entry-content > .wp-block-group + .wp-block-group { margin-top: 0; } .entry-content h2 { margin-top: 32px; } .entry-content > p, .entry-content > h2, .entry-content > h3, .entry-content > ul, .entry-content > ol, .entry-content > .wp-block-group > p, .entry-content > .wp-block-group > h2, .entry-content > .wp-block-group > h3, .entry-content > .wp-block-group > ul, .entry-content > .wp-block-group > ol, .entry-content > .wp-block-group > .wp-block-group__inner-container > :is(p, h1, h2, h3, ul, ol) { max-width: calc(780px + var(--gutter) * 2); } .entry-content > :is(ul, ol), .entry-content > .wp-block-group > :is(ul, ol), .entry-content > .wp-block-group > .wp-block-group__inner-container > :is(ul, ol) { padding-left: calc(var(--gutter) + 22px); } .entry-content li { margin-bottom: 6px; } .entry-content .wp-block-image img { border-radius: var(--radius); } /* Bausteine der Startseite (Klassen im Block-Editor setzbar) */ .hero { padding-block: clamp(48px, 8vw, 96px); background-size: cover; background-position: right center; } .entry-content > .hero > * + *, .entry-content > .hero > .wp-block-group__inner-container > * + * { margin-top: 20px; } .entry-content > .hero > h1, .entry-content > .hero > .wp-block-group__inner-container > h1 { max-width: calc(780px + var(--gutter) * 2); } .entry-content > .hero > p, .entry-content > .hero > .wp-block-group__inner-container > p { max-width: calc(600px + var(--gutter) * 2); } .hero[style*="background-image"] { background-repeat: no-repeat; background-color: var(--bg); background-blend-mode: multiply; position: relative; z-index: 1; box-shadow: 0 8px 14px -10px rgba(20, 18, 16, .28); } @media (min-width: 1200px) { .entry-content > .hero[style*="background-image"] > .wp-block-group__inner-container > :is(h1, p), .entry-content > .hero[style*="background-image"] > :is(h1, p) { max-width: calc(560px + var(--gutter) * 2); } } @media (max-width: 899px) { .hero[style*="background-image"] { background-position: right bottom !important; background-size: 130% auto !important; padding-bottom: calc(50vw + 28px); } } @media (min-width: 900px) and (max-width: 1199px) { .hero[style*="background-image"] { background-position: center bottom !important; background-size: 100% auto !important; padding-bottom: clamp(320px, 40vw, 470px); } .hero[style*="background-image"]::before { background-position: center bottom; background-size: 100% auto; } } .hero .hero__location { color: var(--accent-text); font-weight: 600; } .block-section { padding-block: clamp(40px, 6vw, 72px); } /* Rechtstexte (eRecht24) stehen ohne Abschnitts-Wrapper: gleicher Abstand zum CTA-Band wie bei den anderen Seiten */ .entry-content--legal { padding-bottom: clamp(40px, 6vw, 72px); } .entry-content > .block-section > * + *, .entry-content > .block-section > .wp-block-group__inner-container > * + * { margin-top: 20px; } .entry-content > .block-section > :is(.grid-2, .grid-3, .grid-4), .entry-content > .block-section > .wp-block-group__inner-container > :is(.grid-2, .grid-3, .grid-4) { margin-top: 36px; } .entry-content > .band--dark > .wp-block-group__inner-container > * + *, .entry-content > .band--panel > .wp-block-group__inner-container > * + * { margin-top: 20px; } .grid-2, .grid-3, .grid-4 { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .entry-content .grid-2 > *, .entry-content .grid-3 > *, .entry-content .grid-4 > *, .entry-content .grid-2 > .wp-block-group__inner-container > *, .entry-content .grid-3 > .wp-block-group__inner-container > *, .entry-content .grid-4 > .wp-block-group__inner-container > * { padding-inline: 0; max-width: none; margin-inline: 0; } .item { border-top: 1px solid var(--ink); padding-top: 20px; } .item, .item > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 10px; } .entry-content .item > *, .entry-content .item .wp-block-group__inner-container > * { margin: 0; } .item__no { font-family: var(--serif); font-size: 32px; color: var(--accent-text); line-height: 1; margin: 0; } .item ul { margin: 0; padding-left: 20px; } .entry-content .wp-block-columns { gap: 32px 56px; align-items: center; margin-bottom: 0; } .entry-content .wp-block-column > * { margin-top: 0; margin-bottom: 0; } .entry-content .wp-block-column > * + * { margin-top: 20px; } .entry-content .wp-block-column .wp-block-image { margin: 0; } .entry-content .wp-block-column .wp-block-image img { width: 100%; height: auto; border-radius: var(--radius); display: block; } .band--panel { background: var(--panel); } .band--dark { background: var(--dark); color: var(--on-dark-muted); } .band--dark h2, .band--dark h3 { color: var(--on-dark); } .band--dark a { color: #F08A3C; } .band--dark .wp-block-button__link { color: #fff; } .band--dark .wp-block-button.is-style-outline .wp-block-button__link { color: var(--on-dark); } .band--dark .wp-block-button.is-style-outline .wp-block-button__link:hover { color: #F08A3C; } .ref-row__text h2 a, .post-feature h2 a { color: inherit; text-decoration: none; } .ref-row__text h2 a:hover, .post-feature h2 a:hover { color: var(--accent-hover); } /* ---------- Referenzen ---------- */ .placeholder-img { width: 100%; aspect-ratio: 4 / 3; background: var(--placeholder); border: 2px dashed #C9C1B3; border-radius: 6px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--muted); font-size: 14px; } .ref-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--placeholder); } .ref-list { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 80px); } .ref-row { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; } .ref-row:nth-child(even) { flex-direction: row-reverse; } .ref-row > * { flex: 1 1 420px; min-width: 0; } .ref-row__text { display: flex; flex-direction: column; gap: 16px; } .ref-row__text h2 { font-size: clamp(28px, 3.4vw, 36px); } .ref-row__tags { font-size: 14px; color: var(--muted); } .ref-filter, .post-filter { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; list-style: none; margin: 0; padding: 0; } .ref-filter a, .post-filter a { display: inline-block; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); text-decoration: none; } .ref-filter .is-active a, .post-filter .is-active a { background: var(--ink); color: #fff; border-color: var(--ink); } .single-ref { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; } .single-ref__head { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .single-ref__head .lead { font-size: 19px; max-width: 640px; } .single-ref__facts { background: var(--panel); border-radius: 6px; padding: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px 24px; min-width: 0; } .single-ref__facts dt { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .single-ref__facts dd { margin: 2px 0 0; color: var(--ink); } .single-ref__facts .full { grid-column: 1 / -1; } .single-ref__body { display: flex; flex-direction: column; gap: 40px; min-width: 0; } .single-ref__body section { display: flex; flex-direction: column; gap: 12px; max-width: 640px; } .single-ref__body h2 { font-size: 28px; } .single-ref__body section > * { margin: 0; } .single-ref__body section h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--ink); margin-top: 12px; } .single-ref__body .check-list li:last-child { padding-bottom: 0; } .single-ref__image { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: var(--placeholder); } @media (min-width: 900px) { .single-ref { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 64px; } .single-ref__head, .single-ref__media, .single-ref__body { grid-column: 1; } .single-ref__facts { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: 104px; } } .next-link { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 32px; text-decoration: none; } .next-link strong { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--ink); } /* ---------- Wissen ---------- */ .post-feature { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; } .post-feature > * { flex: 1 1 380px; min-width: 0; } .post-feature__text { display: flex; flex-direction: column; gap: 16px; } .post-feature h2 { font-size: clamp(28px, 3.4vw, 36px); } .post-feature img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; display: block; } .post-list { border-top: 1px solid var(--ink); } .post-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 40px; padding: 28px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; } .post-row--thumb { grid-template-columns: 25% minmax(0, 1fr) auto; } .post-row__thumb { display: block; overflow: hidden; border-radius: 6px; background: var(--line); } .post-row__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .4s ease; } .post-row:hover .post-row__thumb img { transform: scale(1.03); } .post-row__main { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .post-row__title { font-family: var(--serif); font-size: 26px; color: var(--ink); line-height: 1.2; } .post-row__more { color: var(--accent-text); white-space: nowrap; } .post-row:hover .post-row__title { color: var(--accent-hover); } @media (max-width: 699px) { .post-row, .post-row--thumb { grid-template-columns: 30% minmax(0, 1fr); gap: 8px 20px; align-items: start; } .post-row:not(.post-row--thumb) { grid-template-columns: 1fr; } .post-row__title { font-size: 21px; } .post-row__excerpt, .post-row__more { display: none; } } .pager { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: 15px; } .pager a { text-decoration: none; } .article { display: flex; flex-direction: column; gap: 40px; } .article__head { display: flex; flex-direction: column; gap: 16px; } .article__head h1 { font-size: clamp(32px, 5vw, 46px); } .article__lead { font-size: 20px; color: #555; } .article__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display: block; } .toc { background: var(--panel); border-radius: 6px; padding: 24px 28px; display: flex; flex-direction: column; gap: 8px; } .toc a { color: var(--ink); } .article__body { font-size: 18px; line-height: 1.7; display: flex; flex-direction: column; gap: 20px; } .article__body > * { margin: 0; } .article__body h2 { font-size: 30px; padding-top: 12px; } .article__body h3 { padding-top: 8px; } .article__body ul, .article__body ol { padding-left: 22px; } .article__body img { border-radius: 6px; } .article__body blockquote { margin: 0; padding-left: 20px; border-left: 3px solid var(--accent); font-family: var(--serif); font-size: 22px; color: var(--ink); } .cta-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: var(--panel); border-radius: 6px; padding: 32px; } .cta-box > div { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; } /* ---------- CTA-Band und Footer ---------- */ .cta-band { background: var(--dark); padding-block: clamp(48px, 6vw, 64px); } .cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .cta-band__text { display: flex; flex-direction: column; gap: 12px; max-width: 640px; } .cta-band h2 { color: var(--on-dark); font-size: clamp(24px, 3vw, 32px); } .cta-band p { color: var(--on-dark-muted); } .site-footer { border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); } .site-footer a { color: var(--muted); } .site-footer__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding-block: 48px; } .site-footer__top h2 { font-family: var(--sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; } .site-footer__top ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 24px; border-top: 1px solid var(--line); } .site-footer__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; } .back-link { font-size: 14px; } .not-found { padding-block: 96px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /* ---------- Kontaktformular ---------- */ .entry-content > .form-section > .wp-block-group__inner-container > .gebhart-form, .entry-content > .form-section > .wp-block-group__inner-container > .form-note, .entry-content > .form-section > .gebhart-form, .entry-content > .form-section > .form-note { max-width: calc(720px + var(--gutter) * 2); } .gebhart-form { display: flex; flex-direction: column; gap: 20px; } .gebhart-form__row { display: flex; flex-direction: column; gap: 6px; } .gebhart-form label { font-size: 15px; font-weight: 600; color: var(--ink); } .gebhart-form input[type="text"], .gebhart-form input[type="email"], .gebhart-form input[type="tel"], .gebhart-form input[type="url"], .gebhart-form select, .gebhart-form textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid #C9C2B6; border-radius: var(--radius); padding: 12px 14px; } .gebhart-form textarea { resize: vertical; min-height: 140px; } .gebhart-form input:focus-visible, .gebhart-form select:focus-visible, .gebhart-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .gebhart-form__check label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 15px; } .gebhart-form__check input { margin-top: 4px; flex: none; width: 18px; height: 18px; } .gebhart-form .btn { align-self: flex-start; } .gebhart-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { padding-block: 16px; border-left: 3px solid var(--accent); background: var(--panel); margin-bottom: 24px; } .form-note p { margin: 0; } .form-note--ok { border-left-color: #2E7D4F; } /* ---------- Icons (Linien-Piktogramme in Akzentfarbe) ---------- * Verwendung im Editor: Gruppe mit Klasse "item" erhält zusätzlich z. B. "icon-target". */ .item[class*="icon-"]::before { content: ""; display: block; width: 40px; height: 40px; background-color: var(--accent); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .icon-target { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%279%27/%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%274.5%27/%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%27.6%27/%3E%3C/svg%3E"); } .icon-layout { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%273%27%20y=%274%27%20width=%2718%27%20height=%2716%27%20rx=%271.5%27/%3E%3Cpath%20d=%27M3%209h18M9%209v11%27/%3E%3C/svg%3E"); } .icon-wrench { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%27/%3E%3C/svg%3E"); } .icon-server { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%273%27%20y=%273%27%20width=%2718%27%20height=%277%27%20rx=%271.5%27/%3E%3Crect%20x=%273%27%20y=%2714%27%20width=%2718%27%20height=%277%27%20rx=%271.5%27/%3E%3Cpath%20d=%27M7%206.5h.01M7%2017.5h.01%27/%3E%3C/svg%3E"); } .icon-browser { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%273%27%20y=%274%27%20width=%2718%27%20height=%2716%27%20rx=%271.5%27/%3E%3Cpath%20d=%27M3%209h18M6.5%206.5h.01M9.5%206.5h.01%27/%3E%3C/svg%3E"); } .icon-refresh { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M3%2012a9%209%200%200%201%209-9%209.75%209.75%200%200%201%206.74%202.74L21%208M21%203v5h-5M21%2012a9%209%200%200%201-9%209%209.75%209.75%200%200%201-6.74-2.74L3%2016M8%2016H3v5%27/%3E%3C/svg%3E"); } .icon-shield { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%203l8%203v6c0%204.5-3.2%208.2-8%209-4.8-.8-8-4.5-8-9V6l8-3z%27/%3E%3Cpath%20d=%27M8.5%2012l2.5%202.5%204.5-5%27/%3E%3C/svg%3E"); } .icon-clipboard { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%275%27%20y=%274%27%20width=%2714%27%20height=%2717%27%20rx=%272%27/%3E%3Cpath%20d=%27M9%204h6v3H9zM9%2014l2%202%204-4%27/%3E%3C/svg%3E"); } .icon-search { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2711%27%20cy=%2711%27%20r=%277%27/%3E%3Cpath%20d=%27M21%2021l-4.3-4.3%27/%3E%3C/svg%3E"); } .icon-document { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%27/%3E%3Cpath%20d=%27M14%203v5h5M9%2013h6M9%2017h6%27/%3E%3C/svg%3E"); } .icon-pin { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%2021s-7-6.2-7-11a7%207%200%200%201%2014%200c0%204.8-7%2011-7%2011z%27/%3E%3Ccircle%20cx=%2712%27%20cy=%2710%27%20r=%272.5%27/%3E%3C/svg%3E"); } .icon-star { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%203l2.8%205.9%206.2.9-4.5%204.4%201.1%206.3L12%2017.5l-5.6%203%201.1-6.3L3%209.8l6.2-.9z%27/%3E%3C/svg%3E"); } .icon-eye-level { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%279%27%20cy=%2712%27%20r=%276%27/%3E%3Ccircle%20cx=%2715%27%20cy=%2712%27%20r=%276%27/%3E%3C/svg%3E"); } .icon-coffee { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M4%209h12v6a5%205%200%200%201-5%205H9a5%205%200%200%201-5-5z%27/%3E%3Cpath%20d=%27M16%2011h2a2.5%202.5%200%200%201%200%205h-2M8%203v3M12%203v3%27/%3E%3C/svg%3E"); } .icon-chat { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M21%2012a8%208%200%200%201-11.6%207.1L4%2020l1-4.6A8%208%200%201%201%2021%2012z%27/%3E%3C/svg%3E"); } .icon-euro { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%279%27/%3E%3Cpath%20d=%27M15.5%208.7A4%204%200%200%200%209%2010.5v3a4%204%200%200%200%206.5%201.8M7.5%2011h5M7.5%2013h5%27/%3E%3C/svg%3E"); } .icon-lifebuoy { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%279%27/%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%273.5%27/%3E%3Cpath%20d=%27M5.6%205.6l3.9%203.9M14.5%2014.5l3.9%203.9M18.4%205.6l-3.9%203.9M9.5%2014.5l-3.9%203.9%27/%3E%3C/svg%3E"); } .icon-network { --icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%271.25%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%275%27%20r=%272.5%27/%3E%3Ccircle%20cx=%275%27%20cy=%2718%27%20r=%272.5%27/%3E%3Ccircle%20cx=%2719%27%20cy=%2718%27%20r=%272.5%27/%3E%3Cpath%20d=%27M10.7%207.2L6.3%2015.8M13.3%207.2l4.4%208.6M7.5%2018h9%27/%3E%3C/svg%3E"); } /* ---------- Hub-Grafik: "Du / Dein Business" mit sechs Leistungsfeldern ---------- */ .hub { container-type: inline-size; max-width: 1000px; margin-inline: auto; } .hub__stage { position: relative; } .hub__svg { display: none; } .hub__center { display: grid; place-items: center; align-content: center; gap: 2px; width: 150px; height: 150px; margin: 8px auto 28px; border-radius: 50%; border: 1px solid #D8D2C6; text-align: center; position: relative; } .hub__center strong { font-family: var(--serif); font-size: 26px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); line-height: 1; } .hub__center span { font-size: 14px; color: var(--muted); } .hub__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px 28px; grid-template-columns: minmax(0, 1fr); } .hub__item { position: relative; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; } .hub__item::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .hub__item strong { font-size: 17px; color: var(--ink); } .hub__item span { font-size: 15px; color: var(--muted); } @container (min-width: 520px) { .hub__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (min-width: 720px) { .hub__stage { aspect-ratio: 1000 / 340; } .hub__svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .hub__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22%; height: auto; aspect-ratio: 1; margin: 0; border: 0; } .hub__center strong { font-size: clamp(18px, 2.6cqw, 28px); } .hub__center span { font-size: clamp(12px, 1.5cqw, 15px); } .hub__items { display: block; } .hub__item { position: absolute; top: var(--top); width: 26%; transform: translateY(-50%); padding-left: 0; } .hub__item::before { display: none; } .hub__item--l { left: 1%; } .hub__item--r { left: 73%; } .hub__item strong { font-size: clamp(14px, 1.75cqw, 18px); } .hub__item span { font-size: clamp(12px, 1.4cqw, 15px); } } .hub__ring { fill: none; stroke: #D8D2C6; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; } .hub__ring--inner { stroke: #E6E0D5; stroke-dasharray: 2 7; transform-box: fill-box; transform-origin: center; } .hub__line { fill: none; stroke: #CFC8BB; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; } .hub__dot { fill: var(--accent); } .hub__halo { fill: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: center; } /* Bewegung: nur wenn gewünscht und nur nach dem Einblenden */ .hub.is-armed .hub__ring { transition: stroke-dashoffset 1.6s cubic-bezier(.23, 1, .32, 1); } .hub.is-armed .hub__line { transition: stroke-dashoffset .9s cubic-bezier(.23, 1, .32, 1) calc(.9s + var(--i) * .12s); } .hub.is-armed .hub__dot { transition: transform .5s cubic-bezier(.23, 1, .32, 1) calc(1.1s + var(--i) * .12s), opacity .3s cubic-bezier(.23, 1, .32, 1) calc(1.1s + var(--i) * .12s); transform-box: fill-box; transform-origin: center; } .hub.is-armed .hub__item, .hub.is-armed .hub__center { transition: opacity .7s cubic-bezier(.23, 1, .32, 1) calc(.9s + var(--i, 0) * .12s), translate .7s cubic-bezier(.23, 1, .32, 1) calc(.9s + var(--i, 0) * .12s); } .hub.is-armed:not(.is-visible) .hub__ring, .hub.is-armed:not(.is-visible) .hub__line { stroke-dashoffset: 1; } .hub.is-armed:not(.is-visible) .hub__dot { transform: scale(0); opacity: 0; } .hub.is-armed:not(.is-visible) .hub__item { opacity: 0; translate: 0 8px; } .hub.is-armed:not(.is-visible) .hub__center { opacity: 0; } .hub.is-visible .hub__halo { animation: hub-pulse 3.2s ease-out calc(2.4s + var(--i) * .45s) 3; } .hub.is-visible .hub__ring--inner { animation: hub-spin 90s linear infinite; } @keyframes hub-pulse { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(3.2); opacity: 0; } } @keyframes hub-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .hub *, .hub *::before { animation: none !important; transition: none !important; } } /* ---------- Akzente (Kreisbögen, Linien mit Rauten) ---------- */ :root { --deco-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1942' height='809' viewBox='0 0 1942 809' fill='none'%3E%3Cstyle%3E .arc%7Bstroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.6s cubic-bezier(.23,1,.32,1) forwards%7D .a2%7Banimation-delay:.5s%7D.a3%7Banimation-delay:1s%7D .ln%7Bstroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s cubic-bezier(.23,1,.32,1) 1.6s forwards%7D .dm%7Bopacity:0;transform-box:fill-box;transform-origin:center;animation:pop .7s ease-out 1.2s forwards,glow 6s ease-in-out 3s 3%7D .dm2%7Banimation-delay:1.9s,3.6s%7D .arcs%7Banimation:breathe 10s ease-in-out 3.2s 2%7D %40keyframes draw%7Bto%7Bstroke-dashoffset:0%7D%7D %40keyframes pop%7Bfrom%7Bopacity:0;transform:scale(.7)%7Dto%7Bopacity:.8;transform:scale(1)%7D%7D %40keyframes glow%7B0%25,100%25%7Bopacity:.8%7D50%25%7Bopacity:.6%7D%7D %40keyframes breathe%7B0%25,100%25%7Bopacity:.22%7D50%25%7Bopacity:.28%7D%7D %40media (prefers-reduced-motion:reduce)%7B.arc,.ln%7Banimation:none;stroke-dashoffset:0%7D.dm%7Banimation:none;opacity:.8%7D.arcs%7Banimation:none%7D%7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='lineLeft' x1='883' y1='286' x2='1115' y2='286' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EF6500' stop-opacity='0.65'/%3E%3Cstop offset='1' stop-color='%23EF6500' stop-opacity='0.08'/%3E%3C/linearGradient%3E%3ClinearGradient id='lineRight' x1='1700' y1='286' x2='1860' y2='286' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EF6500' stop-opacity='0.65'/%3E%3Cstop offset='1' stop-color='%23EF6500' stop-opacity='0.08'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg class='arcs' stroke='%23EF6500' stroke-width='1' opacity='0.22'%3E%3Cpath class='arc' pathLength='1' d='M 994 286 A 340 330 0 0 1 1480 43'/%3E%3Cpath class='arc a2' pathLength='1' d='M 1490 47 A 340 330 0 0 1 1669 397'/%3E%3Cpath class='arc a3' pathLength='1' d='M 1460 107 A 274 266 0 0 1 1810 571'/%3E%3C/g%3E%3Cpath class='ln' pathLength='1' d='M 889 286 H 1115' stroke='url(%23lineLeft)' stroke-width='1'/%3E%3Cpath class='ln' pathLength='1' style='animation-delay:2.2s' d='M 1706 286 H 1860' stroke='url(%23lineRight)' stroke-width='1'/%3E%3Cg stroke='%23EF6500' stroke-width='1.3'%3E%3Cpath class='dm' d='M 883 280 L 889 286 L 883 292 L 877 286 Z'/%3E%3Cpath class='dm dm2' d='M 1700 280 L 1706 286 L 1700 292 L 1694 286 Z'/%3E%3C/g%3E%3C/svg%3E"); --deco-arcs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1942' height='809' viewBox='0 0 1942 809' fill='none'%3E%3Cg stroke='%23EF6500' stroke-width='1' opacity='0.22'%3E%3Cpath d='M 994 286 A 340 330 0 0 1 1480 43'/%3E%3Cpath d='M 1490 47 A 340 330 0 0 1 1669 397'/%3E%3Cpath d='M 1460 107 A 274 266 0 0 1 1810 571'/%3E%3C/g%3E%3C/svg%3E"); } .hero[style*="background-image"]::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--deco-hero) right center / cover no-repeat; mix-blend-mode: multiply; } @media (max-width: 899px) { .hero[style*="background-image"]::before { background-position: right bottom; background-size: 130% auto; } } .hero--arcs { position: relative; } .hero--arcs::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--deco-arcs) right center / auto 130% no-repeat; } .hero--arcs :is(h1, h2, p, .wp-block-buttons, figure) { position: relative; z-index: 1; } .hero--arcs .wp-block-columns { position: relative; z-index: 1; } .band--dark { position: relative; overflow: hidden; } .band--dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--deco-arcs) 105% center / auto 170% no-repeat; } .band--dark :is(h2, p, .wp-block-buttons) { position: relative; z-index: 1; } /* ---------- Kontaktblock / Trust ---------- */ .contact-line { margin: 0 0 16px; line-height: 1.5; } .contact-line strong { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .contact-line a { font-family: var(--serif); font-size: 1.375rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); } .contact-line a:hover { color: var(--accent); } .check-list { list-style: none; padding: 0; margin: 0 0 20px; } .check-list li { position: relative; padding: 0 0 12px 28px; } .check-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--accent); transform: rotate(45deg) scale(.8); } .trust-line { padding-top: 16px; border-top: 1px solid var(--line-strong); font-size: .9375rem; color: var(--muted); } /* ---------- Rezensionen ---------- */ .review { border-top: 2px solid var(--accent); padding-top: 20px; } .review__stars { color: var(--accent); letter-spacing: .12em; margin: 0 0 8px; font-size: 1.125rem; } .review__quote { margin: 0 0 16px; padding: 0; border: 0; font-family: var(--serif); font-size: 1.1875rem; line-height: 1.5; color: var(--ink); } .review__quote p { margin: 0; } .review__who { margin: 0; font-size: .9375rem; color: var(--muted); } .review__who strong { color: var(--ink); } .review__more { margin-top: 24px; } .review-slider { scroll-padding-inline: var(--gutter); display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; margin-top: 32px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .review-slider::-webkit-scrollbar { display: none; } .entry-content .review-slider > .review, .entry-content .review-slider > .wp-block-group__inner-container > .review { flex: 0 0 min(420px, 84%); scroll-snap-align: start; } .review-nav { display: flex; gap: 8px; margin-top: 20px; align-items: center; } .review-nav button { width: 44px; height: 44px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; border-radius: var(--radius); } .review-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .review-nav button:disabled { opacity: .35; cursor: default; } .review-nav .review__more { margin: 0 0 0 auto; } @media (prefers-reduced-motion: reduce) { .review-slider { scroll-behavior: auto; } } /* Rezensionen auf dunklem Band */ .band--dark .review__quote, .band--dark .review__quote p { color: var(--on-dark); } .band--dark .review__who { color: var(--on-dark-muted); } .band--dark .review__who strong { color: var(--on-dark); } .band--dark .review__stars { color: #F08A3C; } .band--dark .review { border-top-color: #F08A3C; } .band--dark .review-nav button { border-color: rgba(249,247,243,.3); color: var(--on-dark); } .band--dark .review-nav button:hover:not(:disabled) { border-color: #F08A3C; color: #F08A3C; } .band--dark .review-slider, .band--dark .review-nav { position: relative; z-index: 1; } .band--dark .eyebrow { color: #F08A3C; } .review-widget { margin-top: 32px; } .review-widget .ti-widget { max-width: 100%; } /* Rezensions-Widget: bricht aus dem Content-Raster aus (fast volle Breite) */ .entry-content .band--dark .review-widget, .entry-content .band--dark > .wp-block-group__inner-container > .review-widget { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; padding-inline: clamp(12px, 2.5vw, 40px) !important; box-sizing: border-box; } .band--dark .review-widget .ti-widget { max-width: 1600px; margin-inline: auto; } /* Hover: kurze Farbübergänge (nur Farbe, keine Bewegung) */ a, .btn, .wp-block-button__link, .review-nav button { transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .hub.is-offscreen .hub__ring--inner, .hub.is-offscreen .hub__halo { animation-play-state: paused; } /* ---------- Touch-Feinschliff ---------- */ html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; } a, button, [role="button"], .nav-toggle, .btn, .wp-block-button__link, input[type="submit"] { touch-action: manipulation; } button, [role="button"], .nav-toggle, .btn, .wp-block-button__link, .review-nav button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .btn:active, .wp-block-button__link:active, .nav-toggle:active, .review-nav button:active { transform: scale(.97); } .btn, .wp-block-button__link, .nav-toggle, .review-nav button { transition-property: color, background-color, border-color, transform; transition-duration: .15s; transition-timing-function: ease; } /* Über mich: Kreisbögen werden beim Laden eingezeichnet */ :root { --deco-arcs-live: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1942' height='809' viewBox='0 0 1942 809' fill='none'%3E%3Cstyle%3E .arc%7Bstroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.6s cubic-bezier(.23,1,.32,1) forwards%7D .a2%7Banimation-delay:.5s%7D.a3%7Banimation-delay:1s%7D .arcs%7Banimation:breathe 10s ease-in-out 3.2s 2%7D %40keyframes draw%7Bto%7Bstroke-dashoffset:0%7D%7D %40keyframes breathe%7B0%25,100%25%7Bopacity:.22%7D50%25%7Bopacity:.28%7D%7D %40media (prefers-reduced-motion:reduce)%7B.arc%7Banimation:none;stroke-dashoffset:0%7D.arcs%7Banimation:none%7D%7D %3C/style%3E%3Cg class='arcs' stroke='%23EF6500' stroke-width='1' opacity='0.22'%3E%3Cpath class='arc' pathLength='1' d='M 994 286 A 340 330 0 0 1 1480 43'/%3E%3Cpath class='arc a2' pathLength='1' d='M 1490 47 A 340 330 0 0 1 1669 397'/%3E%3Cpath class='arc a3' pathLength='1' d='M 1460 107 A 274 266 0 0 1 1810 571'/%3E%3C/g%3E%3C/svg%3E"); } .hero--arcs::before { background-image: var(--deco-arcs-live); } /* Über mich, Handy: rundes Porträt mit Kreisbögen statt großem Foto und Bögen quer über dem Text */ @media (max-width: 781px) { .hero--arcs::before { display: none; } .hero--arcs .wp-block-column:last-child { flex-basis: 100% !important; } .hero--arcs figure.wp-block-image:not(.shot):not(.hero-photo) { position: relative; width: min(62%, 260px); aspect-ratio: 1; margin: 12px auto 28px !important; } .hero--arcs figure.wp-block-image:not(.shot):not(.hero-photo) img { width: 100% !important; height: 100% !important; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; border-radius: 50% !important; display: block; } .hero--arcs figure.wp-block-image:not(.shot):not(.hero-photo)::before, .hero--arcs figure.wp-block-image:not(.shot):not(.hero-photo)::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; border: 1px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent); opacity: .45; } .hero--arcs figure.wp-block-image:not(.shot):not(.hero-photo)::before { inset: -14px; transform: rotate(-20deg); } .hero--arcs figure.wp-block-image:not(.shot):not(.hero-photo)::after { inset: -30px; transform: rotate(35deg); opacity: .25; } } /* ---------- Ablauf: Schritte + Browser-Animation ---------- */ .process { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: 36px; } @media (min-width: 900px) { .process { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 56px; } .process__main { grid-column: 1; grid-row: 1; } .process__stage { grid-column: 2; grid-row: 1; position: sticky; top: 120px; } } .process__stage { width: 100%; aspect-ratio: 16 / 11; } @media (max-width: 899px) { .process { display: block; } .process__stage { position: sticky; top: 72px; z-index: 5; aspect-ratio: 16 / 9; max-height: 34vh; margin-bottom: 24px; box-shadow: 0 10px 0 6px var(--panel); } .process__step { scroll-margin-top: 40vh; } } .pf { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; } .pf__bar { flex: none; display: flex; gap: 6px; align-items: center; padding: 0 12px; height: 28px; border-bottom: 1px solid var(--line); } .pf__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); } .pf__bar i:first-child { background: var(--accent); } .pf__body { position: relative; flex: 1; } .pf__l { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .45s cubic-bezier(.23, 1, .32, 1), transform .45s cubic-bezier(.23, 1, .32, 1); pointer-events: none; } .pf__l1 { display: grid; grid-template-columns: 36% 1fr; column-gap: 8%; align-content: center; row-gap: 10px; padding: 0 7%; } .pf__img { grid-row: 1 / span 4; position: relative; display: flex; align-items: center; justify-content: center; min-height: 52%; background: var(--panel); border: 1px solid var(--line-strong); font-size: clamp(11px, 1.5vw, 14px); font-weight: 600; color: var(--ink); } .pf__ln { display: block; height: 6px; border-radius: 3px; background: var(--line-strong); } .pf__ln--s { width: 60%; } .pf__l2 { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 9%; } .pf__li { position: relative; padding-left: 20px; font-family: var(--serif); font-size: clamp(14px, 2vw, 20px); color: var(--ink); } .pf__li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); } .pf__svg { display: block; width: 100%; height: 100%; padding: 4% 5%; box-sizing: border-box; } .pf__svg text { font-family: var(--serif); font-size: 11px; fill: #141210; } .pf__svg .aa { font-size: 34px; } .pf__svg .cap text { font-family: var(--sans); font-size: 9px; fill: #6B645C; } .pf__svg .n { opacity: 0; transition: opacity .4s cubic-bezier(.23, 1, .32, 1); } .pf__page > *, .pf__live > * { position: absolute; display: block; } .pf__ttl { left: 7%; top: 14%; width: 44%; height: 14px; border-radius: 2px; background: var(--ink); } .pf__page .pf__ln--a { left: 7%; top: 31%; width: 38%; } .pf__page .pf__ln--b { left: 7%; top: 38%; width: 28%; } .pf__blk { left: 7%; top: 50%; width: 44%; height: 20%; background: var(--panel); } .pf__cta { left: 7%; top: 76%; padding: 9px 16px; background: var(--accent-strong); color: #fff; font-size: clamp(11px, 1.5vw, 14px); font-weight: 600; } .pf__chk { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 7% 0 62%; } .pf__chk span { position: relative; padding-left: 28px; font-size: clamp(11px, 1.6vw, 15px); color: var(--ink); } .pf__chk span::before { content: ""; position: absolute; left: 0; top: -1px; width: 16px; height: 16px; border: 1px solid var(--accent); border-radius: 50%; } .pf__chk span::after { content: ""; position: absolute; left: 6px; top: 2px; width: 4px; height: 8px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); opacity: 0; transition: opacity .3s cubic-bezier(.23, 1, .32, 1), transform .3s cubic-bezier(.23, 1, .32, 1); } .pf__live { display: flex; align-items: center; gap: 10px; padding: 0 7% 0 62%; font-size: clamp(12px, 1.8vw, 16px); font-weight: 600; color: var(--ink); } .pf__live > span { position: static; } .pf__live .pf__ok { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); } .pf__live .pf__ok::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .pf__url { margin-left: 14px; padding: 2px 12px; border-radius: 10px; background: var(--panel); font-size: 11px; color: var(--muted); opacity: 0; transform: translateY(4px); transition: opacity .4s cubic-bezier(.23, 1, .32, 1) .2s, transform .4s cubic-bezier(.23, 1, .32, 1) .2s; } .process__stage[data-state="5"] .pf__url { opacity: 1; transform: none; } .process__stage[data-state="5"] .pf__live .pf__ok { animation: pf-dot .6s cubic-bezier(.23, 1, .32, 1) .3s both; } .process__stage[data-state="0"] .pf__l { transition: none; } .process__step { cursor: pointer; } .process__stage[data-state="1"] .pf__l1, .process__stage[data-state="2"] .pf__l2, .process__stage[data-state="3"] .pf__l3, .process__stage:is([data-state="4"], [data-state="5"]) .pf__page, .process__stage[data-state="4"] .pf__chk, .process__stage[data-state="5"] .pf__live { opacity: 1; transform: none; } .process__stage[data-state="3"] .pf__svg .n { opacity: 1; transition-delay: var(--d); } .process__stage[data-state="4"] .pf__chk span::after { opacity: 1; transform: rotate(45deg) scale(1); } .process__stage[data-state="4"] .pf__chk span:nth-child(1)::after { transition-delay: .5s; } .process__stage[data-state="4"] .pf__chk span:nth-child(2)::after { transition-delay: .9s; } .process__stage[data-state="4"] .pf__chk span:nth-child(3)::after { transition-delay: 1.3s; } @keyframes pf-dot { from { transform: scale(.4); } to { transform: scale(1); } } .process__list { list-style: none; margin: 0; padding: 0; } .process__step { position: relative; border-top: 1px solid var(--line-strong); padding: 6px 0 16px 18px; } .process__step::before { content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: 2px; background: transparent; transition: background-color .25s ease; } .process__step.is-active::before { background: var(--accent); } .process__btn { display: flex; gap: 14px; align-items: baseline; width: 100%; min-height: 44px; padding: 10px 0; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; } .process__no { font-family: var(--serif); color: var(--muted); transition: color .25s ease; } .process__step.is-active .process__no { color: var(--accent-text); } .process__title { font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; } .process__text p { margin: 0 0 .6em; } .process__ctrl { margin: 20px 0 0; } .process__play { min-height: 44px; padding: 10px 18px; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; color: var(--ink); cursor: pointer; touch-action: manipulation; } @media (hover: hover) and (pointer: fine) { .process__play:hover { border-color: var(--accent); color: var(--accent-text); } } /* ---------- FAQ ---------- */ .faq { margin-top: 28px; border-bottom: 1px solid var(--line-strong); max-width: 860px; } .faq__item { border-top: 1px solid var(--line-strong); } .faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 44px; padding: 18px 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; color: var(--ink); cursor: pointer; list-style: none; touch-action: manipulation; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; flex: none; font-family: var(--sans); font-size: 1.5rem; line-height: 1; color: var(--accent-text); transition: transform .3s cubic-bezier(.23, 1, .32, 1); } .faq__item[open]:not(.is-closing) summary::after { transform: rotate(45deg); } .faq__a { padding: 0 0 18px; max-width: 760px; } .faq__a p { margin: 0 0 .7em; } /* Hero WordPress-Seite: zwei Projekt-Screenshots in Browserfenstern */ .hero-shots { position: relative; padding-bottom: 26%; } .shot { margin: 0; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px -20px rgba(20, 18, 16, .4); } .shot::before { content: ""; display: block; height: 24px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 12px 12px, var(--accent) 3.5px, transparent 4px), radial-gradient(circle at 26px 12px, var(--line-strong) 3.5px, transparent 4px), radial-gradient(circle at 40px 12px, var(--line-strong) 3.5px, transparent 4px), #fff; } .shot img { display: block; width: 100%; height: auto; } .hero-shots .shot--a { width: 84%; } .hero-shots .shot--b { position: absolute; right: 0; bottom: 0; width: 72%; } @keyframes shot-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .hero-shots .shot--a { animation: shot-in .7s cubic-bezier(.23, 1, .32, 1) .1s both; } .hero-shots .shot--b { animation: shot-in .7s cubic-bezier(.23, 1, .32, 1) .3s both; } @media (max-width: 781px) { .hero-shots { margin-top: 12px; } } /* Hero WordPress-Seite: Foto mit Credit */ .hero-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 18px 40px -22px rgba(20, 18, 16, .45); animation: shot-in .7s cubic-bezier(.23, 1, .32, 1) .1s both; } .hero-photo figcaption { margin: 10px 0 0; font-size: .8125rem; color: var(--muted); text-align: right; } .hero-photo figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Hero-Foto-Credit */ .hero { position: relative; } .entry-content > .hero > p.hero__credit, .entry-content > .hero > .wp-block-group__inner-container > p.hero__credit { position: absolute; right: var(--gutter); left: auto; bottom: 10px; margin: 0; width: auto; max-width: none; font-size: .75rem; color: var(--muted); z-index: 2; } @media (max-width: 899px) { .hero--sketch[style*="background-image"] { padding-bottom: calc(58vw + 32px); } } .hero .hero__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ---------- Besucherweg (Anforderungen) ---------- */ .journey__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; position: relative; } .journey__step { position: relative; padding-left: 36px; display: flex; flex-direction: column; gap: 4px; } .journey__dot { position: absolute; left: 0; top: .35em; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); } .journey__step strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; color: var(--ink); line-height: 1.25; } .journey__step span:not(.journey__dot) { font-size: .9375rem; color: var(--muted); } .journey__list::before, .journey__list::after { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; background: var(--line-strong); transform-origin: top; } .journey__list::after { background: var(--accent); } @media (min-width: 800px) { .journey__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .journey__step { padding: 40px 0 0; } .journey__dot { top: 0; } .journey__list::before, .journey__list::after { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px; transform-origin: left; } } .journey.is-armed .journey__list::after { transition: transform 1.8s cubic-bezier(.23, 1, .32, 1); } .journey.is-armed .journey__dot { transition: transform .5s cubic-bezier(.23, 1, .32, 1) calc(.2s + var(--i) * .5s), opacity .3s cubic-bezier(.23, 1, .32, 1) calc(.2s + var(--i) * .5s); } .journey.is-armed .journey__step strong, .journey.is-armed .journey__step span:not(.journey__dot) { transition: opacity .6s cubic-bezier(.23, 1, .32, 1) calc(.3s + var(--i) * .5s), translate .6s cubic-bezier(.23, 1, .32, 1) calc(.3s + var(--i) * .5s); } .journey.is-armed:not(.is-visible) .journey__list::after { transform: scale(0, 1); } @media (max-width: 799px) { .journey.is-armed:not(.is-visible) .journey__list::after { transform: scale(1, 0); } } .journey.is-armed:not(.is-visible) .journey__dot { transform: scale(0); opacity: 0; } .journey.is-armed:not(.is-visible) .journey__step strong, .journey.is-armed:not(.is-visible) .journey__step span:not(.journey__dot) { opacity: 0; translate: 0 8px; } /* ---------- Referenzen: versetzte Zeilen mit Browser-Screenshot ---------- */ .ref-row { display: grid; gap: 24px 56px; align-items: center; grid-template-columns: minmax(0, 1fr); margin-top: 48px; } .ref-row__text, .ref-row__text > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 14px; } .entry-content .ref-row__text > * { margin: 0; max-width: none; } .ref-row .ref-row__meta { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; } .ref-row h3 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; } .entry-content .ref-row figure.shot { margin: 0; max-width: none; transition: transform .35s cubic-bezier(.23, 1, .32, 1), box-shadow .35s cubic-bezier(.23, 1, .32, 1); } @media (min-width: 900px) { .ref-row { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); } .ref-row--flip { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); } .ref-row--flip .ref-row__text { order: 2; } } @media (hover: hover) { .entry-content .ref-row figure.shot:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -22px rgba(20, 18, 16, .45); } } .ref-row.is-armed { transition: opacity .7s cubic-bezier(.23, 1, .32, 1), translate .7s cubic-bezier(.23, 1, .32, 1); } .ref-row.is-armed:not(.is-visible) { opacity: 0; translate: 0 14px; } .entry-content .ref-row figure.shot { max-width: 480px; } /* Referenzen: Vergleichsvarianten */ .ref-variant{margin:72px 0 0!important;padding-top:14px;border-top:1px dashed var(--line-strong);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .reftabs{margin-top:24px} .reftabs__bar{display:inline-flex;gap:4px;padding:4px;background:var(--sand,#efe9de);border-radius:999px} .reftabs__bar button{font:inherit;font-size:.9375rem;font-weight:600;padding:8px 20px;border:0;border-radius:999px;background:transparent;color:var(--ink,#222);cursor:pointer;transition:background-color .25s,color .25s} .reftabs__bar button[aria-selected="true"]{background:var(--accent,#D95C09);color:#fff} .reftabs__bar button:focus-visible{outline:2px solid var(--accent,#D95C09);outline-offset:2px} .reftabs__panel{display:grid;gap:24px 48px;align-items:center;margin-top:28px} .reftabs__panel[hidden]{display:none} .reftabs__panel.is-active{animation:reftab-in .4s cubic-bezier(.23,1,.32,1)} @keyframes reftab-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .reftabs__text{display:flex;flex-direction:column;gap:14px} .reftabs__text h3{font-family:Georgia,serif;font-size:1.5rem;margin:0} .reftabs__text p{margin:0} .entry-content .reftabs figure.shot{margin:0;max-width:none} @media (min-width:900px){.reftabs__panel{grid-template-columns:minmax(0,480px) minmax(0,1fr)}} .ref-minis{display:grid;gap:0;margin-top:24px} .ref-mini{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:start;padding:24px 0;border-top:1px solid var(--line-strong)} .ref-mini:last-child{border-bottom:1px solid var(--line-strong)} .ref-mini .wp-block-group__inner-container{display:contents} .entry-content .ref-mini figure.shot{margin:0;max-width:none} .ref-mini .ref-row__text h3{font-size:1.25rem;margin:0} .ref-mini .ref-row__text p{margin:0} @media (min-width:700px){.ref-mini{grid-template-columns:220px minmax(0,1fr);gap:32px}} .reftabs .ref-row__meta,.ref-mini .ref-row__meta{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);font-weight:600} .ref-mini h3 a{color:inherit;text-decoration:none} .ref-mini .ref-mini__more{font-weight:600} .ref-mini .ref-mini__more a{text-decoration:none} .ref-mini figure.shot a{display:block;overflow:hidden} .ref-mini figure.shot img{transition:transform .5s cubic-bezier(.23,1,.32,1)} @media (hover:hover){ .entry-content .ref-mini figure.shot{transition:transform .35s cubic-bezier(.23,1,.32,1),box-shadow .35s cubic-bezier(.23,1,.32,1)} .ref-mini:hover figure.shot{transform:translateY(-3px)} .ref-mini:hover figure.shot img{transform:scale(1.03)} .ref-mini h3 a:hover,.ref-mini .ref-mini__more a:hover{color:var(--accent-text)} } /* Relaunch-Seite */ .hero__art{margin-top:32px;max-width:480px} .hero__art svg{display:block;width:100%;height:auto} .ha-old{animation:ha-in .6s cubic-bezier(.23,1,.32,1) both} .ha-arrow{stroke-dasharray:1;stroke-dashoffset:1;animation:ha-draw .7s cubic-bezier(.23,1,.32,1) .5s forwards} .ha-new{animation:ha-in .7s cubic-bezier(.23,1,.32,1) .9s both} @keyframes ha-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes ha-draw{to{stroke-dashoffset:0}} @media (prefers-reduced-motion:reduce){.ha-arrow{stroke-dashoffset:0}} @media (min-width:1100px){ .entry-content .hero--art{position:relative} .entry-content .hero--art .hero__art{position:absolute;right:var(--gutter);top:50%;translate:0 -50%;width:min(40%,480px);margin:0} } .scope{display:grid;gap:40px;grid-template-columns:minmax(0,1fr);margin-top:36px} .entry-content > .block-section > .scope,.entry-content > .block-section > .wp-block-group__inner-container > .scope{margin-top:36px} .scope__items{display:flex;flex-direction:column;gap:32px} .scope__viz{display:flex;flex-direction:column;gap:12px} .scope__viz h3{margin:0}.scope__viz p{margin:0} @media (min-width:1000px){.scope{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:start}.scope__viz{position:sticky;top:120px}} .keep__stage{position:relative;aspect-ratio:16/10;background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden} .keep__c{position:absolute;top:10%;width:28%;height:72%;box-sizing:border-box;padding:7% 6%;display:flex;flex-direction:column;gap:9%;background:var(--bg);border:1px solid var(--line-strong);transition:transform .7s cubic-bezier(.23,1,.32,1),opacity .5s cubic-bezier(.23,1,.32,1),border-color .4s} .keep__c b,.keep__o b{font-family:var(--serif);font-weight:400;font-size:clamp(11px,1.5vw,14px);color:var(--ink)} .keep__c i,.keep__o i{display:block;height:5px;border-radius:3px;background:var(--line-strong)} .keep__c i:last-child,.keep__o i:last-child{width:60%} .keep__c--1{left:3%}.keep__c--2{left:36%}.keep__c--3{left:69%} .keep__cap{position:absolute;left:0;right:0;bottom:3%;margin:0;height:1.4em;text-align:center;font-size:clamp(10px,1.3vw,12px);color:var(--muted)} .keep__cap span{position:absolute;inset:0;opacity:0;transition:opacity .4s cubic-bezier(.23,1,.32,1)} .keep[data-state="1"] .k1,.keep[data-state="2"] .k2,.keep[data-state="3"] .k3{opacity:1} .keep[data-state="2"] .keep__c--2,.keep[data-state="3"] .keep__c--2{border-color:var(--accent)} .keep:is([data-state="2"],[data-state="3"]) .keep__c--1{transform:translateX(118%);opacity:0} .keep:is([data-state="2"],[data-state="3"]) .keep__c--3{transform:translateX(-118%);opacity:0} .keep[data-state="3"] .keep__c--2{transform:translateX(-118%)} .keep__o{position:absolute;left:58%;width:38%;height:20%;box-sizing:border-box;padding:2.5% 4%;display:flex;flex-direction:column;gap:7%;background:var(--bg);border:1px solid var(--accent);opacity:0;transform:translateX(8px);transition:opacity .45s cubic-bezier(.23,1,.32,1),transform .45s cubic-bezier(.23,1,.32,1)} .keep__o--1{top:12%}.keep__o--2{top:40%}.keep__o--3{top:68%} .keep__ln{position:absolute;left:31%;width:27%;height:2px;margin-top:-1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.23,1,.32,1)} .keep__ln--1{top:22%}.keep__ln--2{top:50%}.keep__ln--3{top:78%} .keep[data-state="3"] .keep__ln{transform:scaleX(1)} .keep[data-state="3"] .keep__ln--1{transition-delay:.55s}.keep[data-state="3"] .keep__ln--2{transition-delay:.7s}.keep[data-state="3"] .keep__ln--3{transition-delay:.85s} .keep[data-state="3"] .keep__o{opacity:1;transform:none} .keep[data-state="3"] .keep__o--1{transition-delay:.8s}.keep[data-state="3"] .keep__o--2{transition-delay:.95s}.keep[data-state="3"] .keep__o--3{transition-delay:1.1s} .keep__ctrl{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .keep__tabs{display:flex;flex-wrap:wrap;gap:8px} .keep__ctrl button{min-height:44px;padding:8px 14px;background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius);font:inherit;font-size:.875rem;color:var(--ink);cursor:pointer;touch-action:manipulation} .keep__ctrl button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-text)} @media (hover:hover) and (pointer:fine){.keep__ctrl button:hover{border-color:var(--accent);color:var(--accent-text)}} .keep__note{margin:10px 0 0!important;font-size:.8125rem;color:var(--muted)} .pf__map{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:0 6%} .pf__row{display:flex;align-items:center;gap:8px;font-size:clamp(10px,1.4vw,13px)} .pf__row em{font-style:normal;padding:3px 8px;border:1px solid var(--line-strong);background:var(--bg);white-space:nowrap} .pf__row em:last-child{border-color:var(--accent)} .pf__row b{flex:1;min-width:16px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.23,1,.32,1)} .process--rl .process__stage[data-state="5"] .pf__page{opacity:0} .process--rl .process__stage[data-state="5"] .pf__map{opacity:1;transform:none} .process--rl .process__stage[data-state="5"] .pf__row b{transform:scaleX(1)} .process--rl .process__stage[data-state="5"] .pf__row:nth-child(1) b{transition-delay:.3s} .process--rl .process__stage[data-state="5"] .pf__row:nth-child(2) b{transition-delay:.6s} .process--rl .process__stage[data-state="5"] .pf__row:nth-child(3) b{transition-delay:.9s} .process--rl .process__stage[data-state="0"] .pf__row b{transition:none} .entry-content > .block-section > :is(.grid-2, .grid-3, .grid-4, .scope) + *, .entry-content > .block-section > .wp-block-group__inner-container > :is(.grid-2, .grid-3, .grid-4, .scope) + * { margin-top: 40px; } /* Hero Relaunch: Elemente ordnen sich zur Struktur */ .hero__art{max-width:560px} .hj{transform-box:fill-box;transform-origin:center;animation:hj 1.5s cubic-bezier(.23,1,.32,1) var(--d,0s) both} @keyframes hj{from{opacity:.45;transform:translate(var(--x),var(--y)) rotate(var(--r))}to{opacity:1;transform:none}} .hg{opacity:.4;animation:hg .8s cubic-bezier(.23,1,.32,1) 1.9s both} @keyframes hg{from{opacity:0}to{opacity:var(--hgo,.4)}} @media (min-width:1100px){.entry-content .hero--art .hero__art{width:min(40%,560px)}} .hero__art-cap{margin:12px 0 0;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);font-weight:600;animation:hg .8s cubic-bezier(.23,1,.32,1) 1.9s both} .hero__art-cap::before{content:"";display:inline-block;width:20px;height:1px;margin-right:10px;vertical-align:middle;background:var(--accent)} @media (min-width:1100px){.entry-content .hero--art .hero__art{translate:0 -54%}} .hero__art-cap{--hgo:1} /* Betreuung-Foto (Relaunch) */ .care-photo { margin: 0; } .care-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: 0 18px 40px -22px rgba(20, 18, 16, .45); } .care-photo figcaption { margin: 10px 0 0; font-size: .8125rem; color: var(--muted); text-align: right; } .care-photo figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Keep-Steuerung kompakter */ .keep__ctrl{align-items:center;gap:4px 12px;margin-top:10px} .keep__ctrl .keep__tabs{gap:6px} .keep__ctrl .keep__tabs button{min-height:40px;padding:6px 12px;font-size:.8125rem} .keep__ctrl button.keep__play{min-height:40px;padding:6px 4px;border:0;font-size:.8125rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px;margin-left:auto} @media (hover:hover) and (pointer:fine){.keep__ctrl button.keep__play:hover{color:var(--accent-text)}} /* ---------- Wartungsseite ---------- */ /* Hero: freistehendes Motiv (Fenster + Schraubenschlüssel), kein Rahmen */ .hero__art--care svg { overflow: visible; } .ca-win { animation: ha-in .7s cubic-bezier(.23, 1, .32, 1) both; } .ca-row { animation: ha-in .6s cubic-bezier(.23, 1, .32, 1) var(--d) both; } .ca-tool { transform-box: fill-box; transform-origin: 30% 100%; animation: ca-tool .9s cubic-bezier(.23, 1, .32, 1) .3s both; } @keyframes ca-tool { from { opacity: 0; transform: translateY(-18px) rotate(-6deg); } to { opacity: 1; transform: none; } } @media (max-width: 1099px) { .entry-content > .hero--care .hero__art { max-width: calc(340px + var(--gutter) * 2); } } @media (prefers-reduced-motion: reduce) { .ca-win, .ca-row, .ca-tool { animation-name: ca-fade; } } @keyframes ca-fade { from { opacity: 0; } to { opacity: 1; } } /* Preisspalten mit gemeinsamem Hosting-Schalter */ .plans { margin-top: 36px; display: flex; flex-direction: column; gap: 28px; } .entry-content .plans > * { margin: 0; } .plans__grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } } .plan { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--ink); padding-top: 22px; } .plan--plus { border-top: 3px solid var(--accent); padding-top: 20px; } .plan > * { margin: 0; } .plan__tag { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .plan--plus .plan__tag { color: var(--accent-text); } .plan h3 { font-size: clamp(24px, 2.6vw, 28px); } .plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .plan__amount { font-family: var(--serif); font-size: clamp(44px, 6vw, 60px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .plan__unit { font-size: .9375rem; color: var(--muted); } .plan__host { display: none; } .plans.is-hosting .plan__host { display: inline; } .plans.is-hosting .plan__amount { color: var(--accent-text); } .plan__lead { font-weight: 600; color: var(--ink); } .plan .check-list { margin: 4px 0 0; } .plan .check-list li { padding-bottom: 10px; } .plan__note { font-size: .9375rem; color: var(--muted); } .plan__cta { margin-top: auto !important; padding-top: 8px; } .plans__switch { padding: 14px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); } .switch { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; cursor: pointer; color: var(--ink); touch-action: manipulation; } .switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch__track { position: relative; flex: none; width: 44px; height: 24px; border-radius: 12px; background: var(--line-strong); transition: background-color .2s cubic-bezier(.23, 1, .32, 1); } .switch__track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(20, 18, 16, .25); transition: transform .2s cubic-bezier(.23, 1, .32, 1); } .switch__input:checked + .switch__track { background: var(--accent); } .switch__input:checked + .switch__track::after { transform: translateX(20px); } .switch__input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; } .plans__nojs { font-weight: 600; color: var(--ink); } .plans.is-js .plans__nojs { display: none; } .plans__foot { font-size: .875rem; color: var(--muted); max-width: 780px; } @media (prefers-reduced-motion: reduce) { .switch__track, .switch__track::after { transition-property: background-color; } } /* Wartungsablauf: vier Zustände */ .care__stage { position: relative; aspect-ratio: 16 / 11; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; } .care__bar { flex: none; display: flex; gap: 6px; align-items: center; padding: 0 12px; height: 28px; border-bottom: 1px solid var(--line); } .care__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); } .care__bar i:first-child { background: var(--accent); } .care__bar span { margin-left: 14px; padding: 2px 12px; border-radius: 10px; background: var(--panel); font-size: 11px; color: var(--muted); } .care__body { position: relative; flex: 1; } .care__l { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 10%; opacity: 0; transform: translateY(8px); transition: opacity .45s cubic-bezier(.23, 1, .32, 1), transform .45s cubic-bezier(.23, 1, .32, 1); pointer-events: none; } .care[data-state="1"] .care__l1, .care[data-state="2"] .care__l2, .care[data-state="3"] .care__l3, .care[data-state="4"] .care__l4 { opacity: 1; transform: none; } .care__l1 { align-items: center; } .care__doc { position: relative; width: 34%; aspect-ratio: 3 / 4; display: flex; flex-direction: column; gap: 9%; padding: 12% 12%; background: var(--bg); border: 1px solid var(--line-strong); } .care__doc::after { content: ""; position: absolute; right: -1px; top: -1px; width: 22%; aspect-ratio: 1; background: linear-gradient(225deg, #fff 50%, var(--line-strong) 50%, var(--line-strong) calc(50% + 1px), var(--panel) calc(50% + 1px)); } .care__doc b { font-family: var(--serif); font-weight: 400; font-size: clamp(12px, 1.6vw, 16px); color: var(--ink); } .care__doc i { display: block; height: 5px; border-radius: 3px; background: var(--line-strong); } .care__doc i:last-child { width: 60%; } .care__say { margin: 0; font-size: clamp(11px, 1.4vw, 13px); color: var(--muted); } .care__doc { transform: scale(.94); transition: transform .6s cubic-bezier(.23, 1, .32, 1) .1s, border-color .4s; } .care[data-state="1"] .care__doc { transform: none; border-color: var(--accent); } .care__up { display: grid; grid-template-columns: 34% 1fr; align-items: center; gap: 12px; font-family: var(--serif); font-size: clamp(13px, 1.8vw, 18px); color: var(--ink); } .care__up b { display: block; height: 8px; border-radius: 4px; background: var(--panel); position: relative; overflow: hidden; } .care__up b::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.23, 1, .32, 1); } .care[data-state="2"] .care__up b::after { transform: scaleX(1); } .care[data-state="2"] .care__up:nth-child(1) b::after { transition-delay: .2s; } .care[data-state="2"] .care__up:nth-child(2) b::after { transition-delay: .5s; } .care[data-state="2"] .care__up:nth-child(3) b::after { transition-delay: .8s; } .care__chk { position: relative; padding-left: 32px; font-family: var(--serif); font-size: clamp(13px, 1.8vw, 18px); color: var(--ink); } .care__chk::before { content: ""; position: absolute; left: 0; top: .1em; width: 18px; height: 18px; border: 1px solid var(--accent); border-radius: 50%; } .care__chk::after { content: ""; position: absolute; left: 7px; top: .25em; width: 4px; height: 9px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); opacity: 0; transition: opacity .3s cubic-bezier(.23, 1, .32, 1), transform .3s cubic-bezier(.23, 1, .32, 1); } .care[data-state="3"] .care__chk::after { opacity: 1; transform: rotate(45deg) scale(1); } .care[data-state="3"] .care__chk:nth-child(1)::after { transition-delay: .3s; } .care[data-state="3"] .care__chk:nth-child(2)::after { transition-delay: .7s; } .care[data-state="3"] .care__chk:nth-child(3)::after { transition-delay: 1.1s; } .care__l4 { flex-direction: row; align-items: center; gap: 16px; } .care__l4 small { display: block; font-size: clamp(11px, 1.3vw, 13px); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .care__l4 strong { font-family: var(--serif); font-weight: 400; font-size: clamp(18px, 2.6vw, 26px); color: var(--ink); } .care__ok { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); } .care__ok::after { content: ""; position: absolute; left: 14px; top: 8px; width: 8px; height: 16px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .care.is-reset .care__l, .care.is-reset .care__up b::after, .care.is-reset .care__chk::after, .care.is-reset .care__doc { transition: none; } .care__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; } .care__tabs { display: flex; flex-wrap: wrap; gap: 6px; } .care__ctrl button { min-height: 40px; padding: 6px 12px; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; font-size: .8125rem; color: var(--ink); cursor: pointer; touch-action: manipulation; } .care__ctrl button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); } .care__ctrl button.care__play { padding: 6px 4px; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; margin-left: auto; } @media (hover: hover) and (pointer: fine) { .care__ctrl button:hover { border-color: var(--accent); color: var(--accent-text); } } .care__note { margin: 10px 0 0 !important; font-size: .8125rem; color: var(--muted); } @media (prefers-reduced-motion: reduce) { .care__l, .care__doc { transform: none !important; transition-property: opacity, border-color; } .care__up b::after, .care__chk::after { transition: none; } } /* Hosting: Text + Preisfeld */ .entry-content .wp-block-columns.split { align-items: start; margin-top: 28px; } .price-box { background: #fff; border: 1px solid var(--line-strong); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 14px; } .price-box > * { margin: 0; } .price-box__head { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; } .price-box__big { font-family: var(--serif); font-size: clamp(36px, 4.6vw, 48px); line-height: 1; color: var(--ink); } .price-box__big span { font-family: var(--sans); font-size: .9375rem; color: var(--muted); } .price-box__rows { margin: 0; border-top: 1px solid var(--line-strong); } .price-box__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); } .price-box__rows dt { color: var(--text); } .price-box__rows dd { margin: 0; font-family: var(--serif); font-size: 1.25rem; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; } .price-box__note { font-size: .875rem; color: var(--muted); } /* Wartung: Ansprechpartner mit Porträt */ .entry-content .wp-block-columns.split--portrait { align-items: center; } .entry-content .contact-portrait { margin: 0; max-width: 360px; margin-inline: auto; } .entry-content .contact-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--radius); box-shadow: 0 18px 40px -22px rgba(20, 18, 16, .45); } @media (max-width: 781px) { .entry-content .contact-portrait { max-width: 280px; margin-inline: 0; } } /* Porträt: leichter Schatten wie auf der Wartungsseite (Startseite, Über mich) */ .entry-content .is-portrait img { box-shadow: 0 18px 40px -22px rgba(20, 18, 16, .45); } /* Projektanfrage: Paketfelder (nur bei Wartung & Betreuung) */ .gebhart-form__care { display: flex; flex-direction: column; gap: inherit; padding: 16px 18px; background: var(--panel); border-left: 3px solid var(--accent); } .gebhart-form__care[hidden] { display: none; } /* Wartung: Ablaufschritte als ruhiges 2×2-Raster */ .care__ctrl { display: block; } .care__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .care__tabs button { width: 100%; text-align: left; } .care__ctrl button.care__play { display: inline-block; margin: 8px 0 0; } /* Betreuung Plus: Änderungszeit als entscheidender Unterschied */ .plan .check-list li.plan__key { margin: 2px 0 10px; padding: 12px 14px 12px 40px; background: #fff; border-left: 3px solid var(--accent); color: var(--ink); } .plan .check-list li.plan__key::before { left: 16px; top: calc(12px + .5em); } .plan .check-list li.plan__key strong { font-weight: 600; } /* Leistungsübersicht: kompakter Einstieg, drei Kernleistungen, Abschluss zweispaltig */ .hero--overview { padding-bottom: 0; } .entry-content > .services { padding-top: clamp(48px, 6vw, 64px); } .entry-content > .services > .grid-3, .entry-content > .services > .wp-block-group__inner-container > .grid-3 { margin-top: 0; } .services .grid-3 { gap: 32px 40px; } .entry-content .services .item h2 { font-size: clamp(22px, 2.4vw, 26px); } .entry-content .item > .item__link { margin-top: auto; padding-top: 6px; } .band-split { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .band-split__text { display: flex; flex-direction: column; gap: 16px; max-width: 640px; } .entry-content .band-split h2, .entry-content .band-split p, .entry-content .band-split .wp-block-buttons { margin: 0; } @media (min-width: 800px) { .band-split { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; } .band-split .wp-block-buttons { flex: 0 0 auto; } } /* Mobiles Menü: "Leistungen" bleibt ein Link, der Pfeil daneben klappt das Untermenü auf */ .sub-toggle { display: none; } @media (max-width: 899px) { .site-header__nav .has-sub-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .site-header__nav .has-sub-toggle > .sub-menu { grid-column: 1 / -1; } .site-header__nav .has-sub-toggle:not(.is-sub-open) > .sub-menu { display: none; } .site-header__nav .has-sub-toggle.is-sub-open > .sub-menu { display: flex; } .sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; background: transparent; border: 0; border-radius: var(--radius); color: var(--ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .sub-toggle svg { transition: transform .2s cubic-bezier(0.23, 1, 0.32, 1); } .is-sub-open > .sub-toggle svg { transform: rotate(180deg); } .sub-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } } /* Rasterspalten: Link "Mehr über …" unten bündig, auch mit WordPress-Innencontainer */ .item > .wp-block-group__inner-container { flex: 1 1 auto; } .entry-content .item .item__link { margin-top: auto; padding-top: 6px; } /* ---------- SEO-Seite ---------- */ /* Hero: freistehende, schematische Website-Prüfung (ohne Zahlen/Ampeln) */ .hero__art--seo svg { overflow: visible; } .sh-scan { opacity: 0; animation: sh-scan 2.4s cubic-bezier(.23, 1, .32, 1) 1.2s both; } @keyframes sh-scan { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; transform: translateY(0); } 45% { opacity: 1; transform: translateY(92px); } 80% { opacity: 1; transform: translateY(184px); } 100% { opacity: 0; transform: translateY(184px); } } @media (max-width: 1099px) { .entry-content > .hero--seo .hero__art { max-width: calc(380px + var(--gutter) * 2); } } @media (prefers-reduced-motion: reduce) { .sh-scan { display: none; } .hero__art--seo .ca-win, .hero__art--seo .ca-row { animation-name: ca-fade; } } /* FAQ-Fragen als H3, optisch wie bisher */ .faq__item summary .faq__q { font: inherit; color: inherit; margin: 0; text-wrap: pretty; } /* Bestandsaufnahme: drei Ergebniszeilen */ .outcome { display: flex; flex-direction: column; gap: 14px; } .outcome > * { margin: 0; } .outcome__head { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; } .outcome__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line-strong); } .outcome__list li { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line-strong); font-family: var(--serif); font-size: clamp(19px, 2vw, 22px); color: var(--ink); } .outcome__list li span { flex: none; min-width: 2ch; font-size: .85em; color: var(--accent-text); } /* Texte: kleine Materialansicht Briefing → Entwurf → Freigabe */ .entry-content .wp-block-columns.split--center { align-items: center; } .material { position: relative; aspect-ratio: 5 / 4; max-width: 420px; margin-inline: auto; } .material__sheet { position: absolute; width: 52%; aspect-ratio: 3 / 4; display: flex; flex-direction: column; gap: 8%; padding: 9% 9%; background: #fff; border: 1px solid var(--line-strong); border-radius: 2px; box-shadow: 0 14px 30px -24px rgba(20, 18, 16, .5); } .material__sheet b { font-family: var(--serif); font-weight: 400; font-size: clamp(13px, 1.6vw, 16px); line-height: 1.2; color: var(--ink); margin-bottom: 4%; } .material__sheet i { display: block; height: 5px; border-radius: 3px; background: var(--line-strong); } .material__sheet i:last-of-type { width: 60%; } .material__sheet--1 { left: 0; top: 0; background: var(--bg); } .material__sheet--2 { left: 24%; top: 9%; } .material__sheet--2 i:nth-of-type(2) { background: var(--accent); opacity: .55; } .material__sheet--3 { left: 48%; top: 18%; border-top: 3px solid var(--accent); } .material__ok { position: absolute; right: 9%; bottom: 8%; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); } .material__ok::after { content: ""; position: absolute; left: 11px; top: 6px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } @media (max-width: 781px) { .material { max-width: 320px; margin: 8px 0 0; } } /* Zusammenarbeit: Modelle + Abgrenzung */ .item__tag { margin: 0; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; } .delimit, .case { position: relative; display: flex; flex-direction: column; } .entry-content .delimit > *, .entry-content .delimit > .wp-block-group__inner-container > *, .entry-content .case > *, .entry-content .case > .wp-block-group__inner-container > * { position: relative; z-index: 1; margin: 0; } /* Die Inhaltsbreite kommt vom Theme-Raster (Innenabstand = Gutter); die Fläche/Linie sitzt als Pseudo-Element darin. */ .entry-content > .wp-block-group > .delimit, .entry-content > .wp-block-group > .wp-block-group__inner-container > .delimit { max-width: calc(860px + var(--gutter) * 2); padding: 22px calc(var(--gutter) + 24px); gap: 12px; margin-top: 40px; } .delimit::before { content: ""; position: absolute; inset: 0 var(--gutter); background: var(--bg); border-left: 3px solid var(--accent); } .delimit h3 { font-size: clamp(19px, 2vw, 22px); } @media (max-width: 600px) { .entry-content > .wp-block-group > .delimit, .entry-content > .wp-block-group > .wp-block-group__inner-container > .delimit { padding-inline: calc(var(--gutter) + 18px); } } /* Praxisbeispiel: kompakter redaktioneller Beleg */ .entry-content > .wp-block-group > .case, .entry-content > .wp-block-group > .wp-block-group__inner-container > .case { max-width: calc(760px + var(--gutter) * 2); padding-top: 20px; gap: 14px; margin-top: 28px; } .case::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--ink); } /* Ablauf: Grafik mobil vor der Schrittliste */ @media (max-width: 999px) { .scope--viz-first .scope__viz { order: -1; } } /* Ablauf-Grafik: vier Zustände (nutzt Bühne/Steuerung der Wartungsseite) */ .seoflow[data-state="1"] .sf__l1, .seoflow[data-state="2"] .sf__l2, .seoflow[data-state="3"] .sf__l3, .seoflow[data-state="4"] .sf__l4 { opacity: 1; transform: none; } .sf__row { display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); } .sf__row:last-child { border-bottom: 1px solid var(--line); } .sf__row b { font-family: var(--serif); font-weight: 400; font-size: clamp(13px, 1.7vw, 17px); color: var(--ink); } .sf__row i { display: block; height: 6px; border-radius: 3px; background: var(--line-strong); } .sf__task { display: flex; align-items: center; gap: 14px; padding: 9px 12px; background: var(--bg); border: 1px solid var(--line-strong); transform: translateX(10px); opacity: .4; transition: transform .5s cubic-bezier(.23, 1, .32, 1), opacity .5s cubic-bezier(.23, 1, .32, 1), border-color .4s; } .sf__task span { flex: none; font-family: var(--serif); font-size: clamp(14px, 1.8vw, 18px); color: var(--muted); } .sf__task i { flex: 1; height: 6px; border-radius: 3px; background: var(--line-strong); } .seoflow[data-state="2"] .sf__task { transform: none; opacity: 1; } .seoflow[data-state="2"] .sf__task:nth-child(2) { transition-delay: .15s; } .seoflow[data-state="2"] .sf__task:nth-child(3) { transition-delay: .3s; } .seoflow[data-state="2"] .sf__task--key { border-color: var(--accent); transition-delay: .5s; } .sf__task--key span { color: var(--accent-text); } .sf__task--key i { background: var(--accent); opacity: .55; } .sf__l3 { padding: 0 12%; } .sf__site { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 10px; height: 72%; } .sf__blk { border: 1px solid var(--line-strong); background: var(--bg); position: relative; overflow: hidden; } .sf__blk--h { grid-column: 1 / -1; height: 26px; background: var(--panel); border-color: var(--line); } .sf__blk--a, .sf__blk--b { border-color: var(--line-strong); transition: border-color .4s .2s; } .sf__blk--a::after, .sf__blk--b::after { content: ""; position: absolute; left: 12%; right: 30%; top: 40%; height: 6px; border-radius: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.23, 1, .32, 1) .35s; } .sf__blk--b::after { transition-delay: .7s; } .seoflow[data-state="3"] .sf__blk--a, .seoflow[data-state="3"] .sf__blk--b { border-color: var(--accent); } .seoflow[data-state="3"] .sf__blk--a::after, .seoflow[data-state="3"] .sf__blk--b::after { transform: none; } .sf__links { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .sf__links path { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .6s cubic-bezier(.23, 1, .32, 1) 1s; } .seoflow[data-state="3"] .sf__links path { opacity: 1; } .sf__map { display: flex; flex-direction: column; gap: 18px; } .sf__pair { display: flex; align-items: center; gap: 8px; font-size: clamp(10px, 1.4vw, 13px); } .sf__pair em { font-style: normal; padding: 4px 9px; border: 1px solid var(--line-strong); background: var(--bg); white-space: nowrap; color: var(--ink); } .sf__pair em:last-child { border-color: var(--accent); } .sf__pair b { flex: 1; min-width: 16px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.23, 1, .32, 1); } .seoflow[data-state="4"] .sf__pair b { transform: none; } .seoflow[data-state="4"] .sf__pair:nth-child(1) b { transition-delay: .3s; } .seoflow[data-state="4"] .sf__pair:nth-child(2) b { transition-delay: .55s; } .seoflow[data-state="4"] .sf__pair:nth-child(3) b { transition-delay: .8s; } .seoflow.is-reset .sf__task, .seoflow.is-reset .sf__blk, .seoflow.is-reset .sf__blk::after, .seoflow.is-reset .sf__links path, .seoflow.is-reset .sf__pair b { transition: none; } @media (prefers-reduced-motion: reduce) { .sf__task { transform: none; transition-property: opacity, border-color; } .sf__blk::after, .sf__links path, .sf__pair b { transition: none; } } .sf__l1 { gap: 0; } .case__role { color: var(--ink); } .case__role strong { font-weight: 600; } .entry-content .case .check-list { margin: 4px 0 0; } /* ---------- Referenzen-Übersicht (Entwurf A1): Zeilen im Wechsel ---------- */ .ref-list .ref-row--archive { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; margin-top: 0; } .ref-list .ref-row--archive:nth-child(even) { flex-direction: row-reverse; } .ref-list .ref-row--archive > * { flex: 1 1 420px; min-width: 0; } .ref-row__media { display: block; } .ref-row__media .shot { transition: transform .35s cubic-bezier(.23, 1, .32, 1), box-shadow .35s cubic-bezier(.23, 1, .32, 1); } .ref-shot { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; } @media (hover: hover) { .ref-row--archive:hover .ref-row__media .shot { transform: translateY(-4px); box-shadow: 0 26px 48px -22px rgba(20, 18, 16, .45); } } .single-ref__media .shot .single-ref__image { border-radius: 0; aspect-ratio: auto; height: auto; } /* Referenz: vorherige / nächste */ .ref-pager { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 56px; border-top: 1px solid var(--line); padding-top: 32px; } .ref-pager__link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; } .ref-pager__link strong { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; color: var(--ink); transition: color .2s ease; } .ref-pager__link:hover strong { color: var(--accent-hover); } @media (min-width: 700px) { .ref-pager { grid-template-columns: 1fr 1fr; gap: 48px; } .ref-pager__link--next { grid-column: 2; text-align: right; align-items: flex-end; } } /* ---------- Wissen: Bildnachweis und Grafiken in Beiträgen ---------- */ .article__body .photo-credit { font-size: .8125rem; color: var(--muted); margin-top: 40px; } .article__body .photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .post-figure { margin: 36px 0; padding: 28px; background: var(--panel); border-radius: var(--radius); } .post-figure figcaption { margin: 18px 0 0; font-size: .875rem; color: var(--muted); } .pf-title { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 6px; font-weight: 600; } /* Schichten */ .pf-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: end; } .pf-stack__col { display: flex; flex-direction: column; gap: 6px; } .pf-layer { padding: 10px 12px; border-radius: 4px; background: #fff; border: 1px solid var(--line-strong); font-size: .875rem; color: var(--ink); line-height: 1.3; } .pf-layer--extra { border-style: dashed; color: var(--muted); } .pf-layer--key { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } /* Weiterleitung */ .pf-flow { display: flex; flex-direction: column; gap: 18px; } .pf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .pf-row__label { flex: 0 0 100%; font-size: .8125rem; color: var(--muted); } .pf-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; padding: 6px 10px; border-radius: 4px; background: #fff; border: 1px solid var(--line-strong); color: var(--ink); overflow-wrap: anywhere; } .pf-url--bad { border-color: #B3261E; color: #8C1D18; } .pf-url--good { border-color: var(--accent); } .pf-arrow { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; color: var(--accent-text); } .pf-arrow::after { content: ""; display: block; width: 28px; height: 2px; background: currentColor; transform-origin: left; } .pf-arrow--muted { color: var(--muted); } .pf-strike { text-decoration: line-through; text-decoration-color: #B3261E; color: var(--muted); } /* Kostenbausteine */ .pf-costs, .article__body .pf-costs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .article__body .post-figure p, .article__body .post-figure li { margin: 0; } .pf-cost { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 12px; align-items: center; font-size: .875rem; color: var(--ink); } .pf-cost__bar { display: block; height: 14px; width: var(--w, 50%); border-radius: 3px; background: var(--accent); transform-origin: left; } .pf-cost--base .pf-cost__bar { background: var(--ink); } .pf-cost--run .pf-cost__bar { background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 12px); } @media (max-width: 520px) { .pf-cost { grid-template-columns: minmax(0, 1fr); gap: 4px; } } /* Aufbau beim Hereinscrollen */ .post-figure.is-armed .pf-layer, .post-figure.is-armed .pf-row { transition: opacity .5s cubic-bezier(.23, 1, .32, 1), translate .5s cubic-bezier(.23, 1, .32, 1); transition-delay: calc(var(--i, 0) * 90ms); } .post-figure.is-armed:not(.is-visible) .pf-layer, .post-figure.is-armed:not(.is-visible) .pf-row { opacity: 0; translate: 0 8px; } .post-figure.is-armed .pf-arrow::after { transition: transform .6s cubic-bezier(.23, 1, .32, 1) .3s; } .post-figure.is-armed:not(.is-visible) .pf-arrow::after { transform: scaleX(0); } .post-figure.is-armed .pf-cost__bar { transition: transform .8s cubic-bezier(.23, 1, .32, 1); transition-delay: calc(var(--i, 0) * 110ms); } .post-figure.is-armed:not(.is-visible) .pf-cost__bar { transform: scaleX(0); } /* Über mich: Werdegang als Zeitleiste, Dozenten-Band, Abschluss */ .entry-content .steps { position: relative; display: flex; flex-direction: column; gap: 36px; } .entry-content .steps::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line-strong, #D8D1C4); } .entry-content .step { position: relative; padding-left: 36px; display: flex; flex-direction: column; gap: 4px; } .entry-content .step > * { margin: 0; } .entry-content .step::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); } .entry-content .step.is-now::before { background: var(--ink); box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px var(--accent); } .entry-content .step__label { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .entry-content .step h3 { font-size: 22px; } .entry-content .um-way .wp-block-column:first-child h2 { margin-top: 0; } @media (min-width: 900px) { .entry-content .um-way .wp-block-column:first-child { position: sticky; top: 120px; } } .entry-content .band--dark .split { position: relative; z-index: 1; margin-top: 0; } .entry-content .band--dark .eyebrow { color: #F08A3C; } .entry-content .band--dark h2 { margin-top: 0; } .entry-content .um-teach__meta { font-size: 15px; } .entry-content .um-quote { margin: 0; border-left: 2px solid var(--accent); padding: 8px 0 8px 28px; display: flex; flex-direction: column; gap: 14px; } .entry-content .um-quote p { margin: 0; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.4; color: var(--on-dark); } .entry-content .um-quote cite { font-style: normal; font-size: 14px; color: var(--on-dark-muted); } .entry-content .um-cta h2 { margin-top: 0; font-size: clamp(26px, 3vw, 32px); } .entry-content .um-cta__btn { justify-content: flex-end; } @media (max-width: 781px) { .entry-content .um-cta__btn { justify-content: flex-start; } } /* Weiterbildung (Zertifikate): Über mich, Zeilen im Stil der Wissen-Liste */ .entry-content .um-cert h2 { margin-top: 0; } .entry-content .um-cert ul.cert-list { list-style: none; margin-top: 32px; padding-block: 0; padding-left: var(--gutter); max-width: var(--wrap); } .cert-row:first-child { border-top: 1px solid var(--ink); } .entry-content .um-cert .cert-lead { margin-top: 32px; padding-block: 0; max-width: var(--wrap); display: flex; flex-direction: column; gap: 6px; } .entry-content .um-cert .cert-lead + .cert-list { margin-top: 28px; } .entry-content .cert-lead__label { margin: 0; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); } .entry-content .cert-lead__title { margin: 0; font-size: clamp(26px, 3vw, 32px); } .entry-content .cert-lead__meta { margin: 0; font-size: 15px; color: var(--muted); max-width: 640px; } .cert-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 12px 28px; padding: 18px 0; border-bottom: 1px solid var(--line); } .cert-row__badge { width: 96px; height: 96px; display: block; } .cert-row__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .entry-content .cert-row__title { font-size: clamp(20px, 2.2vw, 24px); margin: 0; } .entry-content .cert-row__meta { margin: 0; font-size: 14px; color: var(--muted); } .cert-row__verify { color: var(--accent-text); white-space: nowrap; font-size: 15px; } @media (max-width: 599px) { .cert-row { grid-template-columns: 72px minmax(0, 1fr); gap: 4px 16px; align-items: start; } .cert-row__badge { width: 72px; height: 72px; grid-row: span 2; } .cert-row__verify { grid-column: 2; } } /* Persönliches Foto (Café): Über mich */ .entry-content .um-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 52% 60%; border-radius: var(--radius); box-shadow: 0 18px 40px -22px rgba(20, 18, 16, .45); display: block; } .entry-content .um-cafe h2 { margin-top: 0; } /* Hero mit Foto als Hintergrund (Projektanfrage): dunkler Verlauf von links für lesbaren Text */ .entry-content > .hero--photo { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: var(--on-dark-muted); padding-block: clamp(72px, 10vw, 140px); } .entry-content .hero--photo .hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; max-width: none; height: 100%; margin: 0; padding: 0; } .entry-content .hero--photo .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; border-radius: 0; } .entry-content > .hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(20, 18, 16, 1) 0%, rgba(20, 18, 16, 1) var(--photo-x), rgba(20, 18, 16, .85) calc(var(--photo-x) + 8%), rgba(20, 18, 16, .25) calc(var(--photo-x) + 28%), rgba(20, 18, 16, .05) 100%); } @media (min-width: 900px) { .entry-content > .hero--photo { --photo-x: 38%; } .entry-content .hero--photo .hero__bg { left: var(--photo-x); width: auto; } } @media (min-width: 1200px) { .entry-content > .hero--photo { --photo-x: 32%; } } .entry-content .hero--photo h1 { color: var(--on-dark); } .entry-content .hero--photo p { color: var(--on-dark-muted); } .entry-content .hero--photo .eyebrow, .entry-content .hero--photo .hero__location { color: #F08A3C; } .entry-content .hero--photo :is(h1, p), .entry-content .hero--photo .wp-block-group__inner-container > :is(h1, p) { max-width: calc(600px + var(--gutter) * 2); } @media (max-width: 899px) { .entry-content > .hero--photo::after { background: linear-gradient(180deg, rgba(20, 18, 16, .78) 0%, rgba(20, 18, 16, .88) 100%); } .entry-content .hero--photo .hero__bg img { object-position: 55% 60%; } } /* Autorenkasten unter Beiträgen */ .author-box { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: start; padding: 28px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); } .author-box > * , .author-box__text > * { margin: 0; } .author-box__text { display: flex; flex-direction: column; gap: 8px; } .author-box__img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 20%; box-shadow: 0 10px 24px -14px rgba(20, 18, 16, .5); } .author-box__name { font-family: var(--serif); font-size: 22px; color: var(--ink); line-height: 1.2; } @media (max-width: 599px) { .author-box { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; } .author-box__img { width: 72px; height: 72px; } } /* Hinweis auf passenden Wissensbeitrag (Leistungsseiten) */ .entry-content .wissen-hint { border-left: 3px solid var(--accent); padding-left: 16px; font-size: 15px; color: var(--text); } .entry-content .wissen-hint strong { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; display: block; margin-bottom: 2px; } /* Footer: Kontaktspalte */ .site-footer__top .footer-contact { gap: 12px; } .footer-contact li { display: flex; flex-direction: column; gap: 2px; } .footer-contact__label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .footer-contact a { color: var(--ink); text-decoration: none; } .footer-contact a:hover { color: var(--accent-hover); text-decoration: underline; } /* Danke-Seite nach der Projektanfrage */ .entry-content .danke__lead { font-size: 18px; max-width: 600px; } .entry-content .danke-section:has(.danke-box) { padding-top: 0; } .entry-content .danke-section:not(:has(.danke-box)) { display: none; } .danke-box { background: #fff; border: 1px solid var(--line-strong); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; max-width: 760px; } .danke-box > * { margin: 0; } .danke-box__rows { margin: 0; border-top: 1px solid var(--line); } .danke-box__rows div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); } .danke-box__rows dt { color: var(--muted); font-size: 14px; } .danke-box__rows dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; } .danke-box__msg { background: var(--bg); border-radius: var(--radius); padding: 16px; color: var(--ink); overflow-wrap: anywhere; } .danke-box__hint { font-size: 14px; color: var(--muted); } /* Logo: Bildmarke vor dem Namen */ .site-logo { gap: 10px; } .site-logo__mark { display: block; width: auto; height: 32px; flex: none; transition: color .2s ease; } .site-logo:hover .site-logo__mark, .site-logo:focus-visible .site-logo__mark { color: var(--accent); } @media (max-width: 599px) { .site-logo__mark { height: 28px; } } /* Logo: Unterzeile unter dem Namen */ .site-logo__words { display: flex; flex-direction: column; line-height: 1.1; } .site-logo__claim { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } .site-logo__mark { height: 36px; } @media (max-width: 599px) { .site-logo__mark { height: 32px; } .site-logo__claim { font-size: 9.5px; letter-spacing: .12em; } } .site-footer .footer-logo { margin-bottom: 16px; color: var(--ink); text-decoration: none; } .site-footer .footer-logo .site-logo__text { font-size: 20px; } .site-logo__claim { white-space: nowrap; } .site-footer .footer-logo .site-logo__claim { letter-spacing: .1em; font-size: 10px; } /* Startseiten-Hero mobil: Buttons unten links auf dem Bild */ @media (max-width: 899px) { .hero[style*="background-image"]:not(.hero--sketch) .wp-block-buttons { position: absolute; left: var(--gutter); bottom: 18px; margin: 0; flex-direction: column; align-items: flex-start; gap: 2px; z-index: 2; } } /* Google-Bewertungen: Platzhalter, solange keine Einwilligung vorliegt */ .ti-consent__notice { max-width: 640px; margin-inline: auto; padding: 32px 28px; text-align: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; color: var(--on-dark-muted, #c9c4bc); } .ti-consent__notice p { margin: 0 0 12px; } .ti-consent__notice p:last-child { margin-bottom: 0; } .ti-consent__notice strong { color: var(--on-dark, #fff); font-family: Georgia, serif; font-size: 1.15em; font-weight: 400; } .ti-consent__notice button { cursor: pointer; font: inherit; font-weight: 600; padding: 12px 22px; border: 0; border-radius: 4px; background: var(--accent-strong); color: #fff; } .ti-consent__notice button:hover { background: var(--accent-hover); } .ti-consent:has(img[src*="trustindex"]) .ti-consent__notice, .ti-consent:has(img[src*="googleusercontent"]) .ti-consent__notice { display: none; } .ti-consent:not(:has(img[src])) .ti-consent__widget { display: none; }