/* ========================================================================= Tillabu Blog – Main Stylesheet Vanilla CSS, kein Framework. CSS Custom Properties als zentrale Design-Tokens. ========================================================================= */ :root { /* --- Tillabu CI-Farben --------------------------------------------- Platzhalter-Hexwerte, bitte mit dem finalen Tillabu-Styleguide/Logo abgleichen und hier zentral anpassen. */ --tillabu-navy: #0b2545; --tillabu-navy-dark: #081b34; --tillabu-yellow: #ffc93c; --tillabu-yellow-dark: #eab324; --tillabu-cream: #fff8e8; --tillabu-white: #ffffff; --tillabu-text: #16233a; --tillabu-muted: #5b6b84; --tillabu-border: #e7e9ee; /* --- Typografie ------------------------------------------------- */ --tillabu-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* --- Layout-Breiten ---------------------------------------------- */ --tillabu-container-wide: 1150px; --tillabu-container-article: 1100px; --tillabu-container-text: 760px; /* --- Sonstiges ---------------------------------------------------- */ --tillabu-radius-m: 12px; --tillabu-radius-l: 18px; } /* ========================================================================= Reset / Basis ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--tillabu-font-sans); color: var(--tillabu-text); background: var(--tillabu-white); line-height: 1.5; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font-family: inherit; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Sichtbare, konsistente Fokuszustände für Tastaturbedienung. */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--tillabu-yellow-dark); outline-offset: 2px; border-radius: 2px; } /* ========================================================================= Header ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--tillabu-white); border-bottom: 1px solid var(--tillabu-border); } /* WP Admin Bar: sticky Header muss unterhalb der fixierten Admin Bar andocken, sonst verschwindet er beim Scrollen dahinter (WP versetzt nur , nicht position:sticky-Elemente automatisch). Breakpoint 782px = WP-Kernwert, ab dem die Admin Bar auf 46px Höhe wechselt. */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } .site-header__inner { max-width: var(--tillabu-container-wide); margin: 0 auto; padding: 0 24px; height: 76px; display: flex; align-items: center; gap: 32px; } .site-header__logo { flex: 0 0 auto; display: flex; align-items: center; } .site-header__logo img { max-height: 40px; width: auto; height: auto; } .site-header__logo-text { font-size: 22px; font-weight: 800; color: var(--tillabu-navy); text-decoration: none; letter-spacing: -0.01em; } .site-header__nav { flex: 1 1 auto; display: flex; justify-content: flex-end; } .site-header__menu { list-style: none; display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; } .site-header__menu a { font-size: 15px; font-weight: 500; color: var(--tillabu-navy); text-decoration: none; white-space: nowrap; } .site-header__menu a:hover { color: var(--tillabu-yellow-dark); } .site-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; } .site-header__icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: none; color: var(--tillabu-navy); cursor: pointer; border-radius: var(--tillabu-radius-m); } .site-header__icon-button:hover { background: var(--tillabu-cream); } .site-header__cta { display: inline-flex; align-items: center; background: var(--tillabu-yellow); color: var(--tillabu-navy); font-size: 14px; font-weight: 700; text-decoration: none; padding: 10px 20px; border-radius: var(--tillabu-radius-m); white-space: nowrap; } .site-header__cta:hover { background: var(--tillabu-yellow-dark); } .site-header__menu-toggle { display: none; flex-direction: column; gap: 4px; } .site-header__menu-toggle-bar { display: block; width: 20px; height: 2px; background: var(--tillabu-navy); border-radius: 2px; } .site-header__search-form { max-width: var(--tillabu-container-wide); margin: 0 auto; padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease, padding 0.2s ease; } .site-header__search-form.is-open { max-height: 72px; padding: 0 24px 16px; } .site-header__search-input { width: 100%; font-size: 15px; padding: 10px 16px; border: 1px solid var(--tillabu-border); border-radius: var(--tillabu-radius-m); background: var(--tillabu-cream); } .site-header__search-input:focus { outline: 2px solid var(--tillabu-yellow); outline-offset: 1px; } @media (max-width: 900px) { .site-header__logo img { max-height: 30px; } .site-header__nav { position: fixed; top: 76px; left: 0; right: 0; bottom: 0; background: var(--tillabu-white); justify-content: flex-start; padding: 24px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; } .site-header__nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .site-header__menu { flex-direction: column; align-items: flex-start; gap: 20px; } .site-header__menu a { font-size: 18px; } .site-header__menu-toggle { display: flex; } .site-header__cta { padding: 10px 16px; } } /* ========================================================================= Footer ========================================================================= */ .site-footer { background: var(--tillabu-navy); color: var(--tillabu-white); } .site-footer__inner { max-width: var(--tillabu-container-wide); margin: 0 auto; padding: 64px 24px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; } .site-footer__brand { max-width: 380px; } .site-footer__logo-text { font-size: 22px; font-weight: 800; color: var(--tillabu-white); } .site-footer__tagline { margin-top: 16px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); } .site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 12px 48px; } .site-footer__nav a { font-size: 15px; color: rgba(255, 255, 255, 0.85); text-decoration: none; } .site-footer__nav a:hover { color: var(--tillabu-yellow); } .site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 20px 24px; text-align: center; } .site-footer__bottom p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.6); } @media (max-width: 600px) { .site-footer__nav ul { grid-template-columns: 1fr; } } /* ========================================================================= Single Article ========================================================================= */ .tillabu-main { padding-bottom: 80px; } .tillabu-article-header { max-width: var(--tillabu-container-article); margin: 56px auto 0; padding: 0 24px; text-align: center; } .tillabu-article-category { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tillabu-navy); background: var(--tillabu-cream); padding: 6px 14px; border-radius: 999px; text-decoration: none; } .tillabu-article-meta { margin-top: 20px; font-size: 15px; color: var(--tillabu-muted); display: flex; align-items: center; justify-content: center; gap: 8px; } .tillabu-article-title { margin: 20px 0 0; font-size: clamp(2.75rem, 5vw, 4rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: var(--tillabu-navy); } .tillabu-article-lead { margin: 24px auto 0; max-width: 700px; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; color: var(--tillabu-muted); } .tillabu-featured-image { max-width: var(--tillabu-container-article); margin: 40px auto 0; padding: 0 24px; } .tillabu-featured-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--tillabu-radius-l); } /* ========================================================================= Content-Typografie (the_content) ========================================================================= */ .tillabu-article-content { max-width: var(--tillabu-container-text); margin: 48px auto 0; padding: 0 24px; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); line-height: 1.75; color: var(--tillabu-text); } .tillabu-article-content > * + * { margin-top: 1.4em; } .tillabu-article-content h2 { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); line-height: 1.25; font-weight: 800; color: var(--tillabu-navy); margin-top: 2em; letter-spacing: -0.01em; scroll-margin-top: 120px; } .tillabu-article-content h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.35; font-weight: 700; color: var(--tillabu-navy); margin-top: 1.8em; scroll-margin-top: 120px; } .tillabu-article-content strong { font-weight: 700; color: var(--tillabu-navy); } .tillabu-article-content h4 { font-size: 1.125rem; font-weight: 700; color: var(--tillabu-navy); margin-top: 1.6em; } .tillabu-article-content p { margin: 0; } .tillabu-article-content ul, .tillabu-article-content ol { padding-left: 1.4em; } .tillabu-article-content li + li { margin-top: 0.5em; } .tillabu-article-content li::marker { color: var(--tillabu-yellow-dark); } .tillabu-article-content blockquote { margin: 0; padding: 0.2em 0 0.2em 1.4em; border-left: 3px solid var(--tillabu-yellow); font-size: 1.15em; font-style: italic; color: var(--tillabu-navy); } .tillabu-article-content table { width: 100%; border-collapse: collapse; font-size: 0.95em; } .tillabu-article-content th, .tillabu-article-content td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--tillabu-border); } .tillabu-article-content th { color: var(--tillabu-navy); font-weight: 700; } .tillabu-article-content figure { margin: 0; } .tillabu-article-content figure img { border-radius: var(--tillabu-radius-m); } .tillabu-article-content figcaption { margin-top: 10px; font-size: 0.85em; color: var(--tillabu-muted); text-align: center; } .tillabu-article-content a { color: var(--tillabu-navy); text-decoration: underline; text-decoration-color: var(--tillabu-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; } .tillabu-article-content a:hover { color: var(--tillabu-yellow-dark); } /* Bilder/Blöcke, die breiter sein dürfen als der Textbereich. */ .tillabu-article-content .alignwide { width: 100%; max-width: var(--tillabu-container-article); margin-left: 50%; transform: translateX(-50%); } .tillabu-article-content .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); transform: none; } /* ========================================================================= CTA-Shortcode [tillabu_cta] ========================================================================= */ .tillabu-cta { max-width: var(--tillabu-container-text); margin: 2.4em auto 0; padding: 40px; background: var(--tillabu-cream); border-radius: var(--tillabu-radius-l); text-align: left; } .tillabu-cta__headline { margin: 0; font-size: 1.375rem; font-weight: 800; color: var(--tillabu-navy); line-height: 1.3; } .tillabu-cta__text { margin: 12px 0 0; font-size: 1rem; line-height: 1.6; color: var(--tillabu-muted); } .tillabu-cta__button { display: inline-flex; align-items: center; margin-top: 24px; background: var(--tillabu-navy); color: var(--tillabu-white); font-size: 15px; font-weight: 700; text-decoration: none; padding: 14px 28px; border-radius: var(--tillabu-radius-m); } .tillabu-cta__button:hover { background: var(--tillabu-navy-dark); } @media (max-width: 600px) { .tillabu-cta { padding: 28px 24px; } .tillabu-cta__button { width: 100%; justify-content: center; } .site-header__cta { padding: 8px 12px; font-size: 13px; } } /* ========================================================================= Inline-CTA [tillabu_cta type="inline"] ========================================================================= */ .tillabu-cta-inline { max-width: var(--tillabu-container-text); margin: 2.4em auto 0; padding: 24px 28px; background: var(--tillabu-cream); border-left: 3px solid var(--tillabu-yellow); border-radius: var(--tillabu-radius-m); } .tillabu-cta-inline__headline { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--tillabu-navy); } .tillabu-cta-inline__text { margin: 8px 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--tillabu-muted); } .tillabu-cta-inline__link { display: inline-block; margin-top: 12px; font-size: 0.95rem; font-weight: 700; color: var(--tillabu-navy); text-decoration: underline; text-decoration-color: var(--tillabu-yellow); text-underline-offset: 3px; } .tillabu-cta-inline__link:hover { color: var(--tillabu-yellow-dark); } /* ========================================================================= Fazit [tillabu_takeaways] ========================================================================= */ .tillabu-takeaways { max-width: var(--tillabu-container-text); margin: 2.4em auto 0; padding: 28px 32px; background: var(--tillabu-white); border: 1px solid var(--tillabu-border); border-radius: var(--tillabu-radius-m); } .tillabu-takeaways__title { margin: 0 0 12px; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tillabu-yellow-dark); } .tillabu-takeaways__body ul, .tillabu-takeaways__body ol { margin: 0; padding-left: 1.2em; } .tillabu-takeaways__body li { font-size: 1rem; line-height: 1.6; color: var(--tillabu-text); } .tillabu-takeaways__body li + li { margin-top: 0.5em; } .tillabu-takeaways__body li::marker { color: var(--tillabu-yellow-dark); } /* ========================================================================= Inhaltsverzeichnis ========================================================================= */ .tillabu-toc { max-width: var(--tillabu-container-text); margin: 40px auto 0; padding: 28px 32px; background: var(--tillabu-cream); border-left: 3px solid var(--tillabu-yellow); border-radius: var(--tillabu-radius-m); } .tillabu-toc__title { margin: 0 0 14px; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tillabu-navy); } .tillabu-toc__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .tillabu-toc__item a { font-size: 0.95rem; line-height: 1.5; color: var(--tillabu-navy); text-decoration: none; } .tillabu-toc__item a:hover { color: var(--tillabu-yellow-dark); text-decoration: underline; } .tillabu-toc__item--level-3 { padding-left: 20px; } .tillabu-toc__item--level-3 a { font-size: 0.9rem; color: var(--tillabu-muted); } @media (max-width: 600px) { .tillabu-toc { padding: 22px 20px; } } /* ========================================================================= Finaler CTA (automatisch am Artikelende) ========================================================================= */ .tillabu-final-cta { background: var(--tillabu-yellow); margin-top: 72px; } .tillabu-final-cta__inner { max-width: var(--tillabu-container-article); margin: 0 auto; padding: 72px 24px; text-align: center; } .tillabu-final-cta__headline { margin: 0; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 800; color: var(--tillabu-navy); letter-spacing: -0.01em; } .tillabu-final-cta__text { margin: 16px auto 0; max-width: 600px; font-size: 1.125rem; line-height: 1.6; color: var(--tillabu-navy); opacity: 0.85; } .tillabu-final-cta__button { display: inline-flex; align-items: center; margin-top: 32px; background: var(--tillabu-navy); color: var(--tillabu-white); font-size: 16px; font-weight: 700; text-decoration: none; padding: 16px 32px; border-radius: var(--tillabu-radius-m); } .tillabu-final-cta__button:hover { background: var(--tillabu-navy-dark); } @media (max-width: 600px) { .tillabu-final-cta__inner { padding: 48px 24px; } .tillabu-final-cta__button { width: 100%; justify-content: center; } } /* ========================================================================= Related Posts ========================================================================= */ .tillabu-related { margin-top: 72px; } .tillabu-related__inner { max-width: var(--tillabu-container-wide); margin: 0 auto; padding: 0 24px; } .tillabu-related__title { margin: 0 0 32px; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); font-weight: 800; color: var(--tillabu-navy); text-align: center; } .tillabu-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .tillabu-related__card-link { display: block; text-decoration: none; color: inherit; } .tillabu-related__card-image { border-radius: var(--tillabu-radius-m); overflow: hidden; aspect-ratio: 16 / 10; } .tillabu-related__card-image img { width: 100%; height: 100%; object-fit: cover; } .tillabu-related__card-body { padding-top: 16px; } .tillabu-related__card-category { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tillabu-navy); background: var(--tillabu-cream); padding: 4px 10px; border-radius: 999px; } .tillabu-related__card-title { margin: 12px 0 0; font-size: 1.1875rem; line-height: 1.35; font-weight: 700; color: var(--tillabu-navy); } .tillabu-related__card-excerpt { margin: 8px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--tillabu-muted); } .tillabu-related__card-meta { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; color: var(--tillabu-muted); } .tillabu-related__card-read { font-weight: 700; color: var(--tillabu-navy); } @media (max-width: 900px) { .tillabu-related__grid { grid-template-columns: 1fr; gap: 40px; } } /* ========================================================================= Previous / Next ========================================================================= */ .tillabu-prev-next { max-width: var(--tillabu-container-article); margin: 56px auto 0; padding: 32px 24px 0; border-top: 1px solid var(--tillabu-border); display: flex; justify-content: space-between; gap: 24px; } .tillabu-prev-next__link { display: flex; flex-direction: column; gap: 6px; max-width: 45%; text-decoration: none; } .tillabu-prev-next__link--next { margin-left: auto; text-align: right; } .tillabu-prev-next__direction { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tillabu-yellow-dark); } .tillabu-prev-next__title { font-size: 1rem; font-weight: 600; color: var(--tillabu-navy); line-height: 1.4; } @media (max-width: 600px) { .tillabu-prev-next { flex-direction: column; } .tillabu-prev-next__link, .tillabu-prev-next__link--next { max-width: 100%; text-align: left; margin-left: 0; } } /* ========================================================================= Autorenbox ========================================================================= */ .tillabu-author-box { max-width: var(--tillabu-container-text); margin: 56px auto 0; padding: 24px; display: flex; align-items: flex-start; gap: 16px; background: var(--tillabu-cream); border-radius: var(--tillabu-radius-m); } .tillabu-author-box__avatar { border-radius: 50%; flex-shrink: 0; } .tillabu-author-box__name { margin: 0; font-size: 1rem; font-weight: 700; color: var(--tillabu-navy); } .tillabu-author-box__bio { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--tillabu-muted); } @media (max-width: 600px) { .tillabu-author-box { padding: 20px; } }