/* Theme Name: AS Coaching Theme URI: https://example.com/as-coaching Author: Codex Author URI: https://openai.com Description: WordPress-Theme auf Basis des AS-Styleguides mit Gutenberg-Support, eingebettetem SVG-Logo/Favicon und vorgefertigten Block-Patterns. Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 7.4 Version: 1.0.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: as-coaching Tags: custom-logo, custom-menu, editor-style, featured-images, block-patterns */ @font-face { font-family: "Gilroy"; src: url("assets/fonts/gilroy/Gilroy-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Gilroy"; src: url("assets/fonts/gilroy/Gilroy-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Gilroy"; src: url("assets/fonts/gilroy/Gilroy-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Gilroy"; src: url("assets/fonts/gilroy/Gilroy-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "Gilroy"; src: url("assets/fonts/gilroy/Gilroy-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } :root { --accent: #eb825e; --ink: #353535; --canvas: #ffffff; --surface: #faf7f2; --verlauf-start: rgba(37, 32, 30, 0.82); --verlauf-end: rgba(37, 32, 30, 0.72); --verlauf: linear-gradient(180deg, var(--verlauf-start), var(--verlauf-end)); --line-soft: rgba(53, 53, 53, 0.09); --line: rgba(53, 53, 53, 0.12); --ink-80: rgba(53, 53, 53, 0.8); --ink-60: rgba(53, 53, 53, 0.6); --display-white: #ffffff; --display-plate: var(--verlauf-start); --display-plate-soft: var(--verlauf-end); --radius-md: 18px; --radius-lg: 26px; --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.06); --shadow-2: 0 18px 60px rgba(0, 0, 0, 0.1); --container: 1180px; --content: 760px; --font-display: "Gilroy", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-sans: "Gilroy", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --step--1: clamp(0.92rem, 0.85rem + 0.3vw, 1.02rem); --step-0: clamp(1rem, 0.92rem + 0.35vw, 1.12rem); --step-1: clamp(1.14rem, 1.02rem + 0.6vw, 1.36rem); --step-2: clamp(1.3rem, 1.1rem + 1vw, 1.72rem); --step-3: clamp(1.56rem, 1.24rem + 1.6vw, 2.24rem); --step-4: clamp(1.92rem, 1.38rem + 2.7vw, 3.1rem); --step-5: clamp(2.34rem, 1.55rem + 3.9vw, 4.2rem); --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 22px; --space-5: 30px; --space-6: 44px; --space-7: 64px; --space-8: 92px; --focus: 0 0 0 4px rgba(235, 130, 94, 0.35); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6; letter-spacing: 0.01em; } body.admin-bar .site-header { top: 32px; } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure { margin-top: 0; } p:last-child, li:last-child, blockquote:last-child { margin-bottom: 0; } a, a:visited { color: inherit; text-decoration-color: rgba(235, 130, 94, 0.55); text-underline-offset: 0.16em; text-decoration-thickness: 0.08em; } a:hover { text-decoration-color: var(--accent); } img { display: block; max-width: 100%; height: auto; } button, input, textarea, select { font: inherit; } input, textarea, select { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); } input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus); } .container { width: min(var(--container), calc(100% - 2 * clamp(14px, 2.6vw, 36px))); margin-inline: auto; } .skip-link { position: absolute; left: -999px; top: 10px; z-index: 9999; padding: 10px 14px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-1); } .skip-link:focus { left: 10px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .site-header { position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid rgba(53, 53, 53, 0.07); } .header-inner { display: flex; align-items: center; gap: var(--space-3); min-height: 78px; padding: 10px 0; } .brand { display: inline-flex; flex: 0 0 auto; align-items: center; line-height: 0; text-decoration: none; } .brand-logo { width: clamp(156px, 19vw, 232px); height: auto; color: var(--ink); } .brand-logo svg { width: 100%; height: auto; display: block; } .site-nav { margin-left: auto; } .site-nav .menu { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: 0; list-style: none; } .site-nav .page_item, .site-nav li { margin: 0; } .site-nav a { display: inline-flex; align-items: center; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.98rem; } .site-nav a:hover, .site-nav .current-menu-item > a, .site-nav .current_page_item > a { background: rgba(0, 0, 0, 0.04); } .nav-toggle { display: none; margin-left: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: transparent; color: var(--ink); } .burger { position: relative; display: block; width: 22px; height: 2px; background: currentColor; } .burger::before, .burger::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; } .burger::before { top: -7px; } .burger::after { top: 7px; } .site-main { min-height: calc(100vh - 210px); } .site-main .alignwide { width: min(var(--container), calc(100% - 2 * clamp(14px, 2.6vw, 36px))); max-width: min(var(--container), calc(100% - 2 * clamp(14px, 2.6vw, 36px))); margin-left: auto; margin-right: auto; } .site-main .alignfull { width: 100%; max-width: none; } .entry-shell, .post-listing, .post-single { padding: clamp(56px, 7vw, 96px) 0; } .entry-shell__article, .post-card, .post-single__article, .as-empty-state__card { background: color-mix(in srgb, var(--surface) 78%, #fff); border: 1px solid var(--line-soft); border-radius: 28px; padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-1); } .entry-header, .post-card__header, .post-single__header { margin-bottom: var(--space-5); } .entry-title, .post-card__title, .post-single__title { margin-bottom: 10px; font-size: var(--step-4); line-height: 1.06; letter-spacing: -0.02em; } .entry-meta, .post-card__meta, .post-single__meta { color: var(--ink-60); font-size: var(--step--1); } .post-grid { display: grid; gap: clamp(20px, 2.4vw, 28px); } .post-card__excerpt { margin: 0 0 var(--space-4); color: var(--ink-80); } .entry-content > * + *, .post-single__content > * + * { margin-top: 1.25rem; } .site-main > .entry-content > *:not(.alignwide):not(.alignfull), .entry-content > *:not(.alignwide):not(.alignfull), .post-single__content > *:not(.alignwide):not(.alignfull) { width: min(var(--content), calc(100% - 2 * clamp(14px, 2.6vw, 36px))); margin-left: auto; margin-right: auto; } .entry-content > .alignwide, .post-single__content > .alignwide { width: min(var(--container), calc(100% - 2 * clamp(14px, 2.6vw, 36px))); max-width: min(var(--container), calc(100% - 2 * clamp(14px, 2.6vw, 36px))); margin-inline: auto; } .entry-content > .alignfull, .post-single__content > .alignfull { width: 100%; max-width: none; } .entry-content h2, .entry-content h3, .entry-content h4, .post-single__content h2, .post-single__content h3, .post-single__content h4 { line-height: 1.12; letter-spacing: -0.01em; } .entry-content h2, .post-single__content h2 { font-size: var(--step-3); } .entry-content h3, .post-single__content h3 { font-size: var(--step-2); } .entry-content ul, .entry-content ol, .post-single__content ul, .post-single__content ol { padding-left: 1.2rem; } .entry-content blockquote, .post-single__content blockquote { margin: 0; padding: 24px 28px; border-left: 4px solid var(--accent); border-radius: 0 22px 22px 0; background: color-mix(in srgb, var(--surface) 78%, #fff); color: var(--ink-80); } .entry-content hr, .post-single__content hr { border: 0; border-top: 1px solid rgba(53, 53, 53, 0.1); } .entry-content .wp-block-image img, .post-single__content .wp-block-image img { border-radius: 24px; } .entry-content .wp-block-button__link, .post-single__content .wp-block-button__link, .btn, button[type="submit"], input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border: 1px solid transparent; border-radius: 999px; text-decoration: none; font-weight: 600; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .entry-content .wp-block-button__link:hover, .post-single__content .wp-block-button__link:hover, .btn:hover, button[type="submit"]:hover, input[type="submit"]:hover { transform: translateY(-1px); } .entry-content .wp-block-button.is-style-outline .wp-block-button__link, .post-single__content .wp-block-button.is-style-outline .wp-block-button__link, .btn--secondary { background: #fff; border-color: var(--line); color: var(--ink); } .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover, .post-single__content .wp-block-button.is-style-outline .wp-block-button__link:hover, .btn--secondary:hover { background: rgba(255, 255, 255, 0.85); } .entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link, .post-single__content .wp-block-button:not(.is-style-outline) .wp-block-button__link, .btn--primary, button[type="submit"], input[type="submit"] { background: var(--accent); color: #fff; box-shadow: 0 10px 26px rgba(235, 130, 94, 0.3); } .entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, .post-single__content .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, .btn--primary:hover, button[type="submit"]:hover, input[type="submit"]:hover { box-shadow: 0 16px 36px rgba(235, 130, 94, 0.38); } .btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); } .btn--ghost:hover { background: rgba(0, 0, 0, 0.03); } .btn--lg { padding: 14px 20px; font-size: 1.02rem; } .as-badge, .as-pill, .as-tag { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 0.86rem; font-weight: 700; } .as-badge { background: var(--accent); color: #fff; } .as-badge--soft { background: rgba(235, 130, 94, 0.16); color: var(--ink); border: 1px solid rgba(235, 130, 94, 0.32); } .as-pill { background: rgba(0, 0, 0, 0.06); border: 1px solid var(--line-soft); } .as-tag { background: rgba(255, 255, 255, 0.65); border: 1px solid var(--line-soft); color: var(--ink-80); } .as-hero { position: relative; overflow: clip; padding: clamp(42px, 6vw, 94px) 0 clamp(46px, 7vw, 96px); border-top: 1px solid rgba(53, 53, 53, 0.05); border-bottom: 1px solid rgba(53, 53, 53, 0.06); background: radial-gradient(circle at 12% 18%, rgba(235, 130, 94, 0.1), transparent 42%), radial-gradient(circle at 88% 14%, rgba(235, 130, 94, 0.07), transparent 50%), linear-gradient(180deg, rgba(250, 247, 242, 0.82) 0%, rgba(250, 247, 242, 0.64) 56%, #fff 100%); } .as-hero::before, .as-hero::after { content: ""; position: absolute; border-radius: 999px; filter: blur(18px); pointer-events: none; } .as-hero::before { width: 520px; height: 520px; left: -180px; top: -140px; background: radial-gradient(circle at 30% 30%, rgba(235, 130, 94, 0.42), transparent 62%); opacity: 0.6; } .as-hero::after { width: 620px; height: 620px; right: -230px; top: -190px; background: radial-gradient(circle at 40% 40%, rgba(235, 130, 94, 0.18), transparent 68%); opacity: 0.5; } .as-hero-grid { position: relative; gap: clamp(28px, 4vw, 48px); align-items: start; } .as-hero-grid, .as-section-heading, .as-feature-grid, .as-offer-grid, .as-contact-grid, .as-card.alignwide { width: min(var(--container), calc(100% - 2 * clamp(14px, 2.6vw, 36px))); max-width: min(var(--container), calc(100% - 2 * clamp(14px, 2.6vw, 36px))); margin-left: auto; margin-right: auto; } .as-hero-grid > .wp-block-column:first-child { max-width: 680px; } .as-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(243, 243, 243, 0.42); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03); color: var(--ink-80); font-weight: 600; } .as-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(235, 130, 94, 0.2); } .as-display { display: grid; justify-items: start; gap: 0.02em; margin: 0; padding-bottom: 0.12em; font-family: var(--font-display); font-size: clamp(2.2rem, 1.65rem + 2.35vw, 3.35rem); font-weight: 600; font-style: italic; line-height: 1.02; letter-spacing: -0.02em; } .as-display-line { position: relative; z-index: 1; display: inline-block; width: fit-content; padding: 0.12em 0.26em 0.14em; margin-left: -0.08em; border-radius: 0.42em; color: var(--display-white); text-shadow: 0 3px 14px rgba(0, 0, 0, 0.14); } .as-display-line::before { content: ""; position: absolute; inset: 0.06em -0.02em -0.03em -0.01em; z-index: -2; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.48em; background: radial-gradient(circle at 12% 14%, rgba(235, 130, 94, 0.14), transparent 54%), linear-gradient(180deg, var(--display-plate), var(--display-plate-soft)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); transform: rotate(-0.45deg); } .as-display-line + .as-display-line { margin-top: 0.04em; } .as-display-accent::after { content: ""; position: absolute; left: 0.12em; right: 0.14em; bottom: 0.45em; z-index: -1; height: 0.35em; border-radius: 0.82em 0.6em 0.94em 0.56em / 0.44em 0.38em 0.52em 0.46em; background: radial-gradient(circle at 10% 48%, rgba(255, 255, 255, 0.2), transparent 38%), radial-gradient(circle at 88% 58%, rgba(255, 255, 255, 0.1), transparent 46%), radial-gradient(circle at 94% 54%, rgba(0, 0, 0, 0.1), transparent 56%), linear-gradient(180deg, rgba(235, 130, 94, 0.78) 0%, rgba(235, 130, 94, 0.88) 35%, rgba(235, 130, 94, 0.94) 68%, rgba(235, 130, 94, 0.8) 100%); box-shadow: 0 0.03em 0 rgba(235, 130, 94, 0.42), 0 0.01em 0.18em rgba(235, 130, 94, 0.18); opacity: 0.92; transform: rotate(-0.9deg) skewX(-1.5deg); } .as-lead { max-width: 35ch; font-size: clamp(1.02rem, 0.96rem + 0.34vw, 1.2rem); line-height: 1.62; color: var(--ink-80); } .as-button-row { display: flex; flex-wrap: wrap; gap: 14px; } .as-hero-media .wp-block-image { margin: 0; } .as-hero-media img { min-height: 420px; border: 1px solid var(--line-soft); border-radius: 30px; object-fit: cover; object-position: center 42%; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.06); } .as-section { padding: clamp(68px, 8vw, 112px) 0; } .as-section--tinted { background: linear-gradient(180deg, rgba(250, 247, 242, 0.58) 0%, rgba(250, 247, 242, 0.46) 100%); } .as-section-heading { max-width: 80ch; margin-bottom: clamp(28px, 4vw, 44px); } .as-section-heading p { max-width: 66ch; color: var(--ink-60); } .as-label { margin-bottom: var(--space-2); color: var(--ink-60); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .as-card, .as-feature-card, .as-product-card, .as-contact-card, .as-note { background: color-mix(in srgb, var(--surface) 78%, #fff); border: 1px solid var(--line-soft); border-radius: 28px; padding: clamp(22px, 3vw, 34px); background-clip: padding-box; } .as-card.is-style-elevated, .as-product-card, .as-contact-card { background: color-mix(in srgb, var(--surface) 92%, #fff); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.05); } .as-card--bordered { background: rgba(243, 243, 243, 0.34); border-color: rgba(53, 53, 53, 0.1); } .as-feature-grid, .as-offer-grid, .as-contact-grid { gap: clamp(20px, 2.6vw, 30px); } .as-feature-card p, .as-product-card p, .as-contact-card p { color: var(--ink-80); } .as-feature-icon { width: 42px; height: 42px; border: 1px solid rgba(235, 130, 94, 0.3); border-radius: 16px; background: rgba(235, 130, 94, 0.18); } .as-split-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .as-price { font-size: var(--step-2); font-weight: 800; } .as-note { border-style: dashed; background: rgba(242, 242, 242, 0.36); } .as-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; } .as-kv__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; } .as-kv__term { color: var(--ink-80); font-weight: 700; } .as-kv__value { text-align: right; } .as-faq { display: grid; gap: 12px; } .as-faq-item { overflow: hidden; border: 1px solid var(--line-soft); border-radius: 28px; background: rgba(244, 244, 244, 0.24); } .as-faq-item summary { position: relative; padding: 20px 22px; list-style: none; cursor: pointer; font-weight: 700; } .as-faq-item summary::-webkit-details-marker { display: none; } .as-faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; font-size: 1.25rem; transform: translateY(-50%); } .as-faq-item[open] summary::after { content: "−"; } .as-faq-item .wp-block-group { padding: 0 22px 22px; } .as-cta-shell { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); } .as-cta-copy { max-width: 38ch; } .as-cta-title { display: inline-block; padding: 0.04em 0.18em 0.14em; margin: 0 0 10px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.4em; background: radial-gradient(circle at 85% 15%, rgba(235, 130, 94, 0.22), transparent 45%), linear-gradient(180deg, var(--display-plate), var(--display-plate-soft)); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1); color: var(--display-white); font-family: var(--font-display); font-size: var(--step-4); font-style: italic; font-weight: 600; line-height: 1; letter-spacing: -0.02em; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.14); } .as-cta-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .as-empty-state { padding: clamp(56px, 8vw, 110px) 0; } .as-empty-state__card p { color: var(--ink-80); } .site-footer { padding: var(--space-6) 0; border-top: 1px solid rgba(53, 53, 53, 0.1); } .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); } .site-footer p { color: var(--ink-60); font-size: var(--step--1); } .footer-nav .menu { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; } .footer-nav a { text-decoration: none; font-weight: 700; } .footer-nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); } @media (max-width: 920px) { .site-nav { display: none; } .nav-toggle { display: inline-flex; } .brand-logo { width: clamp(132px, 34vw, 176px); } .site-nav.is-open { display: block; position: absolute; top: 66px; right: clamp(14px, 2.6vw, 36px); width: min(320px, calc(100vw - 2 * clamp(14px, 2.6vw, 36px))); padding: 12px; border: 1px solid rgba(53, 53, 53, 0.12); border-radius: 16px; background: #fff; box-shadow: var(--shadow-2); } .site-nav.is-open .menu { flex-direction: column; align-items: flex-start; gap: 6px; } .as-hero { padding-top: var(--space-6); } .as-hero-grid { gap: 18px; } .as-display { font-size: clamp(1.95rem, 7.2vw, 2.95rem); } .as-lead { max-width: none; } .as-hero-media img { min-height: 0; aspect-ratio: 16 / 11; border-radius: 22px; } .as-kv { grid-template-columns: 1fr; gap: 8px; } .as-kv__row { flex-wrap: wrap; justify-content: flex-start; gap: 10px; } .as-kv__value { text-align: left; } .as-cta-shell, .footer-inner { flex-direction: column; align-items: flex-start; } .as-cta-actions { justify-content: flex-start; } } @media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }