/* ======================================== * CUSTOM CSS - Basierend auf theme.json * ======================================== */ /* * 1. SCHRIFTGRÖSSEN CSS-VARIABLEN * Basierend auf typography.fontSizes aus theme.json */ :root { --wp--preset--font-size--xs: 0.75rem; --wp--preset--font-size--sm: 0.875rem; --wp--preset--font-size--base: 1rem; --wp--preset--font-size--lg: 1.125rem; --wp--preset--font-size--xl: 1.25rem; --wp--preset--font-size--2xl: 1.5rem; --wp--preset--font-size--3xl: 1.875rem; --wp--preset--font-size--4xl: 2.25rem; --wp--preset--font-size--5xl: 3rem; --wp--preset--font-size--6xl: 3.75rem; } /* * 1.1 BASIS-SCHRIFTGRÖSSE * Setzt die Default-Font-Size für den Hauptinhalt auf 18px (text-lg). * Vererbt sich per CSS-Inheritance an alle Kind-Elemente, * wird aber von Tailwind-Klassen (text-lg etc.) überschrieben. */ #main-content { font-size: 1.125rem; } /* * 2. ÜBERSCHRIFTEN-STILE - SCOPED * Diese Regeln gelten NUR für den Hauptinhalt (#main-content). * Modal, Header und Footer werden davon nicht beeinflusst. * Elemente innerhalb von .y-prose-reset werden ausgenommen, * damit Komponenten-Blöcke (Cards, Teaser etc.) eigene * Tailwind-Klassen verwenden können. * HINWEIS: :where() in :not() hat Spezifität 0, damit die * Gesamt-Spezifität nicht steigt. */ #main-content h1:not(:where(.y-prose-reset, .y-prose-reset *)) { font-size: clamp(1.875rem, 1.5rem + 1.5vw, 3rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; color: #111827; } #main-content h2:not(:where(.y-prose-reset, .y-prose-reset *)) { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.025em; color: #111827; } /* Margin-bottom für Content-Headings - proportional zur Type-Scale (je größer das Element, desto mehr Luft darunter). Gilt nur für Headings im Content-Flow (direkte Kinder von #main-content oder wp-block-group/-column), nicht für Block-Wrapper innerhalb .y-prose-reset. */ #main-content > h1:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content .wp-block-group > h1:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content .wp-block-column > h1:not(:where(.y-prose-reset, .y-prose-reset *)) { margin-bottom: 2rem; /* 32 px (mb-8) */ } #main-content > h2:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content .wp-block-group > h2:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content .wp-block-column > h2:not(:where(.y-prose-reset, .y-prose-reset *)) { margin-bottom: 1.5rem; /* 24 px (mb-6) */ } #main-content > h3:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content .wp-block-group > h3:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content .wp-block-column > h3:not(:where(.y-prose-reset, .y-prose-reset *)) { margin-bottom: 0.75rem; /* 12 px (mb-3) */ } #main-content > h4:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content > h5:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content > h6:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content .wp-block-group > h4:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content .wp-block-group > h5:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content .wp-block-group > h6:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content .wp-block-column > h4:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content .wp-block-column > h5:not(:where(.y-prose-reset, .y-prose-reset *)), #main-content .wp-block-column > h6:not(:where(.y-prose-reset, .y-prose-reset *)) { margin-bottom: 0.5rem; /* 8 px (mb-2) */ } /* Sidebar-Layout-Blogposts: Headings sitzen in #main-content > .blog-post-layout > .blog-post-content, weshalb die `#main-content > h2`-Regeln oben nicht matchen. Spiegelt das Spacing-Pattern, das in Fullwidth-Blogposts (z.B. /blog/ausstand-im-job/) pro Heading inline gesetzt wird: oben Luft (large), unten kompakt (small) - damit Sektionen visuell zur folgenden Überschrift gehören. Inline-Styles im Post-Content gewinnen weiter durch höhere Spezifität. */ .blog-post-content > h2:not(:where(.y-prose-reset, .y-prose-reset *)), .blog-post-content > h3:not(:where(.y-prose-reset, .y-prose-reset *)), .blog-post-content > h4:not(:where(.y-prose-reset, .y-prose-reset *)) { margin-top: var(--wp--preset--spacing--large); margin-bottom: var(--wp--preset--spacing--small); } /* Erstes Heading direkt nach dem Hero-Content braucht keine zusätzliche Top-Luft. */ .blog-post-content > .blog-hero__content + h2:not(:where(.y-prose-reset, .y-prose-reset *)), .blog-post-content > .blog-hero__content + h3:not(:where(.y-prose-reset, .y-prose-reset *)), .blog-post-content > .blog-hero__content + h4:not(:where(.y-prose-reset, .y-prose-reset *)) { margin-top: 0; } /* Listen im Fließtext: globaler Default (0.25em) ist für Blog-Lesefluss zu eng. Mehr Luft zwischen Items, damit längere Punkte als eigene Einheit lesbar bleiben. */ .blog-post-content ul.wp-block-list > li:not(:where(.y-prose-reset, .y-prose-reset *)), .blog-post-content ol.wp-block-list > li:not(:where(.y-prose-reset, .y-prose-reset *)) { margin: 0.5em 0; } #main-content h3:not(:where(.y-prose-reset, .y-prose-reset *)) { font-size: clamp(1.125rem, 1.0625rem + 0.25vw, 1.25rem); /* text-lg bis text-xl */ font-weight: 600; line-height: 1.4; color: #111827; } /* Agenda-Item h3: etwas größer als Body-Text (text-lg) */ #main-content .eventkonzept-agenda-question h3 { font-size: 1.125rem; line-height: 1.5; } /* Agenda-Badge: CI-Farben rotierend per nth-child */ .eventkonzept-agenda-item:nth-child(5n+1) .agenda-badge { background-color: #FF6B00; } /* y_orange-500 */ .eventkonzept-agenda-item:nth-child(5n+2) .agenda-badge { background-color: #BA70FA; } /* y_lilac-500 */ .eventkonzept-agenda-item:nth-child(5n+3) .agenda-badge { background-color: #999CFF; } /* y_dreamy-500 */ .eventkonzept-agenda-item:nth-child(5n+4) .agenda-badge { background-color: #FF8700; } /* y_pumpkin-500 */ .eventkonzept-agenda-item:nth-child(5n+5) .agenda-badge { background-color: #91E0C7; } /* y_mint-500 */ #main-content h4:not(:where(.y-prose-reset, .y-prose-reset *)) { font-size: clamp(1rem, 0.9375rem + 0.25vw, 1.125rem); /* text-base bis text-lg */ font-weight: 600; line-height: 1.5; color: #111827; } #main-content h5:not(:where(.y-prose-reset, .y-prose-reset *)) { font-size: 1rem; /* text-base */ font-weight: 600; line-height: 1.5; color: #111827; } #main-content h6:not(:where(.y-prose-reset, .y-prose-reset *)) { font-size: 0.875rem; /* text-sm */ font-weight: 600; line-height: 1.6; color: #111827; } /* * 2.05 HALF-LEADING KOMPENSATION - entfernt 2026-04-14 * Die ursprüngliche `margin-top: -0.75em` Compensation wirkte in verschachtelten * Layouts (wp-block-columns mit is-vertically-aligned-center) zu aggressiv und * erzeugte sichtbare Section-Top-vs-Bottom-Asymmetrie. Mit dem neuen * Section-Padding-System (2xlarge = 64 px) ist der Half-Leading-Effekt * (~5-22 px) prozentual klein genug, um ohne Compensation akzeptabel zu sein. * Dokumentiert in docs/typography-system.md § 5. */ /* * 2.1 PARAGRAPHEN - SCOPED * Entspricht: text-gray-600 mb-6 leading-relaxed * Abgestimmt auf die Block-Templates in younited-blocks.html, * die konsistent text-gray-600 verwenden. * .y-prose-reset Bereiche werden ausgenommen. */ #main-content p:not(:where(.y-prose-reset, .y-prose-reset *)) { color: #4B5563; margin-bottom: 1.5rem; line-height: 1.625; } #main-content p:last-child:not(:where(.y-prose-reset, .y-prose-reset *)) { margin-bottom: 0; } #main-content .wp-block-paragraph + .wp-block-paragraph { margin-top: 1.5rem; } /* .occasion-card p und .local-links-block p Overrides entfernt - * diese Blöcke haben jetzt .y-prose-reset auf ihrem Wrapper. * .faq-answer wird vom Gutenberg-Editor gerendert (kein PHP-Render), * daher bleibt der manuelle Reset bestehen: */ #main-content .faq-answer p, #main-content [class*="tracking-wide"] p { color: inherit; font-size: inherit; line-height: inherit; margin-bottom: inherit; } /* Pill Links Section: Wrapper-Block fuer manuelle Pill-Link-Navigation */ /* ul.wp-block-list mitselektieren, sonst killt die globale Regel weiter unten (ul.wp-block-list { margin: 1em 0 }) das margin:0 auto durch gleiche Spezifitaet. */ .pill-links-section ul, .pill-links-section ul.wp-block-list { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: center; list-style: none; padding: 0; margin: 0 auto; max-width: 66.66%; } .pill-links-section ul li { display: inline-block; margin: 0; padding: 0.5rem 1rem; background: rgb(243, 244, 246); border-radius: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: rgb(55, 65, 81); transition: all 200ms; } .pill-links-section ul li::marker { content: none; } /* Verlinkte Pills: Hover-Effekt */ .pill-links-section ul li:has(a):hover { background: #FF6B00; color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); transform: translateY(-0.125rem); } .pill-links-section ul li a { color: inherit !important; text-decoration: none !important; background-image: none !important; background-size: 0 !important; } /* #main-content Overrides fuer Pill Links */ #main-content .pill-links-section ul li { font-size: 0.875rem; color: rgb(55, 65, 81); } #main-content .pill-links-section ul li:has(a):hover { color: white; } #main-content .pill-links-section ul li:has(a):hover a { color: white !important; } #main-content .pill-links-section ul li a { color: inherit !important; text-decoration: none !important; background-image: none !important; } #main-content .pill-links-section h2, #main-content .pill-links-section h3 { font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 1rem; } /* CTA-Text innerhalb pill-links-section */ #main-content .pill-links-section .pill-links-cta-text, .pill-links-section .pill-links-cta-text { margin-top: 1.25rem; margin-bottom: 0.25rem; color: rgb(156, 163, 175) !important; /* gray-400 */ } /* * 2.2 LINKS IM CONTENT - SCOPED * Tailwind-Reset entfernt alle Link-Styles (color: inherit). * Hier werden Links im Fließtext auf y-orange gesetzt. * Gleicher Style wie .faq-answer a (faq-block.css) * .editor-styles-wrapper Selektoren: gleiche Styles im Gutenberg-Editor */ #main-content p:not(:where(.y-prose-reset, .y-prose-reset *)) a:not(nav a):not(.glossar-index a), #main-content li:not(nav li):not(.pill-links-section li):not(.glossar-index li):not(:where(.y-prose-reset, .y-prose-reset *)) a, #main-content td:not(:where(.y-prose-reset, .y-prose-reset *)) a, .faq-answer a, .editor-styles-wrapper p a:not(nav a):not(.glossar-index a), .editor-styles-wrapper li:not(nav li):not(.pill-links-section li):not(.glossar-index li) a, .editor-styles-wrapper td a { color: #f97316 !important; text-decoration: none; background-image: linear-gradient(#f97316, #f97316); background-size: 0% 1px; background-repeat: no-repeat; background-position: left calc(100% - 0px); transition: background-size 0.3s ease, color 0.2s ease; } #main-content p:not(:where(.y-prose-reset, .y-prose-reset *)) a:not(nav a):not(.glossar-index a):hover, #main-content li:not(nav li):not(.pill-links-section li):not(.glossar-index li):not(:where(.y-prose-reset, .y-prose-reset *)) a:hover, #main-content td:not(:where(.y-prose-reset, .y-prose-reset *)) a:hover, .faq-answer a:hover, .editor-styles-wrapper p a:not(nav a):not(.glossar-index a):hover, .editor-styles-wrapper li:not(nav li):not(.pill-links-section li):not(.glossar-index li) a:hover, .editor-styles-wrapper td a:hover { color: #f97316 !important; background-size: 100% 1px; } /* * 2.3 OCCASION CARDS */ @keyframes card-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .occasion-card--reveal, .product-card--reveal { opacity: 0; } .occasion-card--reveal.is-visible, .product-card--reveal.is-visible { animation: card-reveal 0.25s ease-out forwards; } /* Sticker-Cards: Nur Opacity, kein Transform (wuerde Rotation ueberschreiben) */ @keyframes card-fade-in { from { opacity: 0; } to { opacity: 1; } } .sticker-card.product-card--reveal.is-visible { animation: card-fade-in 0.3s ease-out forwards; } @media (prefers-reduced-motion: reduce) { .occasion-card--reveal, .product-card--reveal { opacity: 1; } .occasion-card--reveal.is-visible, .product-card--reveal.is-visible, .sticker-card.product-card--reveal.is-visible { animation: none; } } .occasion-card { text-decoration: none; color: inherit; transition: transform 0.3s ease, box-shadow 0.3s ease; } .occasion-card:hover { text-decoration: none; color: inherit; transform: translateY(-4px); } /* Occasion-Cards im Blog-Post-Kontext: - Cards: gray-50 statt weiß (Blog-Single hat weißen BG, Cards würden sonst untergehen) - Grid-Wrapper: extra margin-bottom (im Block-Editor folgt direkt eine Heading) */ .blog-post-content .occasion-card { background-color: #f9fafb; } .blog-post-content .occasion-cards-grid { margin-bottom: 3rem; } @media (min-width: 1024px) { .blog-post-content .occasion-cards-grid { margin-bottom: 4rem; } } .occasion-card svg { transition: transform 0.3s ease; } .occasion-card:hover svg { transform: scale(1.1); } .occasion-card-image img { transition: transform 0.3s ease; } .occasion-card:hover .occasion-card-image img { transform: scale(1.05); } /* "Weitere Anlässe"-Card hat statt eines Image eine Icon-Area - y_lilac-50 als sanfter Tint, abgestimmt auf die Lilac-Icon-Farbe der nth-child(5n+1)-Position (= Weitere-Card bei 6er-Grid). Weißes BG würde nahtlos in die Card-Karte fließen. */ .occasion-card-icon-area { background-color: #f6effe; } /* Farb-Zyklus (5er-Rotation aus Designentwurf) */ .occasion-card:nth-child(5n+1) .occasion-card-icon { color: #BA70FA; } /* lilac */ .occasion-card:nth-child(5n+2) .occasion-card-icon { color: #91E0C7; } /* emerald */ .occasion-card:nth-child(5n+3) .occasion-card-icon { color: #FF7675; } /* coral */ .occasion-card:nth-child(5n+4) .occasion-card-icon { color: #FF8700; } /* pumpkin */ .occasion-card:nth-child(5n+5) .occasion-card-icon { color: #91E0C7; } /* mint */ /* * 3. GRID-BLOCK RESPONSIVE */ /* 1. Grid Container Einstellungen */ .wp-block-group.is-layout-grid { display: grid; gap: 2rem; /* WICHTIG: 'stretch' sorgt dafür, dass alle Spalten so hoch sind wie die höchste Spalte in der Reihe. */ align-items: stretch; } /* 2. Die Cards (direkte Kinder) auf 100% Höhe zwingen */ .wp-block-group.is-layout-grid > div, .wp-block-group.is-layout-grid > .wp-block-column { height: 100%; /* Füllt die ganze Grid-Höhe aus */ display: flex; /* Aktiviert Flexbox für das Innere der Card */ flex-direction: column; /* Stapelt Inhalt von oben nach unten */ } /* 3. Button am Boden fixieren (Optional, aber empfohlen) */ /* Das sorgt dafür, dass der Button immer ganz unten in der Card klebt, auch wenn wenig Text da ist. */ .cta-btn, .extras-cta-btn { margin-top: auto; } /* 4. Desktop Layout (wie gehabt) */ @media (min-width: 782px) { .wp-block-group.is-layout-grid { grid-template-columns: repeat(2, 1fr); } } /* 5. Mobile Layout (wie gehabt) */ @media (max-width: 781px) { .wp-block-group.is-layout-grid { grid-template-columns: 1fr !important; } } /* * 4. IMAGE SIZE KLASSEN RESET - nur auf native WP Image-Blöcke, nicht auf Custom Blocks */ .wp-block-image .size-auto, .wp-block-image .size-full, .wp-block-image .size-large, .wp-block-image .size-medium, .wp-block-image .size-thumbnail { width: auto !important; height: auto !important; max-width: 100% !important; } /* * 5. SERVICE-LISTE MIT CHECKMARK-ICON */ .service-list { list-style: none; padding: 0; margin-bottom: 40px; } .service-list li { padding: 8px 0 8px 24px; position: relative; } .service-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 16px; height: 16px; background-image: url('data:image/svg+xml,'); background-size: contain; background-repeat: no-repeat; } /* * 6. CORE BLOCK LAYOUTS */ .wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-buttons, .wp-block-button__link { box-sizing: border-box; } /* * 7. SPALTEN-LAYOUT */ .wp-block-columns { display: flex; flex-wrap: wrap !important; align-items: normal !important; gap: 2rem; } @media (max-width: 781px) { .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; } } @media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap !important; } .wp-block-columns > .wp-block-column { flex-basis: 0; flex-grow: 1; } } .wp-block-column { flex-grow: 1; min-width: 0; word-break: break-word; } /* WEITERE CUSTOMS */ .bg-y-gradient-subtle { background-image: linear-gradient(45deg, rgba(145, 224, 199, 0.1) 0%, rgba(153, 156, 255, 0.1) 25%, rgba(186, 112, 250, 0.1) 50%, rgba(255, 135, 0, 0.1) 75%, rgba(255, 107, 0, 0.1) 100%); } .gradient-bg-light { background: linear-gradient(135deg, rgba(145, 224, 199, 0.1) 0%, rgba(153, 156, 255, 0.1) 25%, rgba(186, 112, 250, 0.1) 50%, rgba(255, 135, 0, 0.1) 75%, rgba(255, 107, 0, 0.1) 100%); } .page-hero-y-bg { right: 0; } .page-hero em, #page-hero em, .has-gradient-text em { background: linear-gradient(135deg, #91E0C7 0%, #999CFF 25%, #BA70FA 50%, #FF8700 75%, #FF6B00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; } /* * 8. USP-LISTE MIT ORANGE CHECKMARK-ICON */ .usp-list { list-style: none; padding: 0; } .usp-list li { padding: 4px 0 4px 36px; position: relative; margin-bottom: 12px; /* entspricht space-y-3 */ color: #4B5563; /* text-gray-600 */ line-height: 1.5; } .usp-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 24px; height: 24px; background-image: url('data:image/svg+xml,'); background-size: contain; background-repeat: no-repeat; flex-shrink: 0; } .usp-list li:last-child { margin-bottom: 0; } /* * 8b. INFO CARD GRID ALIGNMENT (Subgrid fuer gleiche Zeilenhoehen) */ @media (min-width: 768px) { .info-card-grid { grid-template-rows: auto auto 1fr auto; row-gap: 0; } .info-card-grid .info-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; } .info-card-grid .info-card-content { display: contents; } .info-card-grid .info-card-content > :nth-child(2) { align-self: center; } } /* * 8c. INFO CARD LISTE (core/list in Eventkonzept Info Cards) */ .info-card-list, ul.info-card-list, ul.wp-block-list.info-card-list { list-style: none; padding: 0; margin: 0 0 1.5rem 0; flex-grow: 1; text-align: left; } .info-card-list li, ul.info-card-list li { padding: 4px 0 4px 32px; position: relative; margin-bottom: 10px; font-size: 1rem; color: #4B5563; /* text-gray-600 */ line-height: 1.6; } .info-card-list li::before, ul.info-card-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; background-image: url('data:image/svg+xml,'); background-size: contain; background-repeat: no-repeat; } .info-card-list li:last-child { margin-bottom: 0; } @media (min-width: 768px) { .info-card-list, ul.info-card-list, ul.wp-block-list.info-card-list { margin: 0 0 2rem 0; } .info-card-list li, ul.info-card-list li { font-size: 1rem; margin-bottom: 12px; padding: 4px 0 4px 32px; } } /* * 8d. INFO CARD B Overrides: "+"-Bullet & natuerliche Hoehe (kein full-height) Anker: nur Card B hat .info-card-content (Card A hat das nicht). Block-Supports className=false unterdrueckt den auto-class-Selector, deshalb ueber Struktur. */ .info-card-content .info-card-list li::before, .info-card-content ul.info-card-list li::before { background-image: url('data:image/svg+xml,'); } @media (min-width: 768px) { /* Card B aus Subgrid-Alignment ausnehmen, damit sie nur so hoch wie ihr Inhalt ist. grid-row: span 4 bleibt erhalten, damit Card As Row-Hoehen NICHT durch Card B-Inhalt in Row 1 verzerrt werden. align-self: start klebt Card B oben in ihrem 4-Row-Span. */ .info-card-grid .info-card:has(> .info-card-content) { display: flex; grid-template-rows: none; align-self: start; } .info-card-grid .info-card-content { display: flex; } .info-card-grid .info-card-content > :nth-child(2) { align-self: auto; } /* Liste in Card B nicht mehr aufblasen, damit kein leerer Raum zwischen List und "auf Anfrage" entsteht */ .info-card-content .info-card-list, .info-card-content ul.info-card-list, .info-card-content ul.wp-block-list.info-card-list { flex-grow: 0; } } .cta-bt-icon-phone::before { content: ''; display: inline-block; width: 20px; height: 20px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } .cta-bt-icon-mail::before { content: ''; display: inline-block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; flex-shrink: 0; } /* Gradient Fade für Mobile mit Mask */ .ap-section-image-wrapper { -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); } @media (min-width: 1024px) { .ap-section-image-wrapper { -webkit-mask-image: none; mask-image: none; } /* Variante B: Bild absolut positioniert, damit nur die Text-Spalte * die Section-Hoehe bestimmt. Bild sitzt grid-relativ und wird mit * negativem bottom durch die pb-Zone bis an die Section-Aussenkante * gezogen; nach oben ragt es ueber die Section aus - der Ueberstand * wird per min-height am Grid gedeckelt (siehe unten). * --ap-pb wird per PHP render_block Filter gesetzt (inc/custom.php). */ .ap-section-image-wrapper { position: absolute; bottom: calc(-1 * var(--ap-pb, 0px)); left: 0; width: 100%; max-width: 600px; margin: 0; } /* Ueberlappungs-Schutz fuer die Section darueber: * Das Bild sitzt mit bottom: -ap-pb am Grid und bleibt damit buendig an * der Section-Unterkante - es MUSS nicht nach oben ueberstehen, ein * kurzes Bild steht einfach unten. Wird es aber hoch (max. 700px via * lg:max-h-[700px]) und der Textinhalt ist kurz, koennte es zu weit nach * oben in die darueberliegende Section ragen. Eine min-height am GRID * (nicht an der Section!) faengt das ab: das Grid waechst, die Section * waechst mit, und das Bild bleibt unten buendig. * Rechnung: max. Bildhoehe(700) - Section-Paddings(2x 2-xlarge) * - erlaubter Ueberstand(1x 2-xlarge) = 700px - 3x 2-xlarge. * Damit ragt das Bild hoechstens um EIN grosses WP-Standard-Padding ueber * die Section-Oberkante - also nur in deren leere Padding-Zone, nie in * Text. Greift nur als Sicherheitsnetz; bei genug Text ist die Section * ohnehin hoeher und die min-height bleibt wirkungslos. */ .ap-section-grid { position: relative; min-height: calc(700px - 3 * var(--wp--preset--spacing--2-xlarge)); } .ap-section-grid > :not(.ap-section-image-wrapper) { grid-column: 2 / -1; align-self: start; } } /* CTA-Buttons: auf Mobile immer volle Breite des Containers. * Desktop bleibt shrink-to-fit (inline-flex), die full_width-Option * regelt dort weiterhin, ob der Button 100% breit sein soll. */ @media (max-width: 639px) { .cta-btn { width: 100%; } } /* Text Alignment Utilities */ .has-text-align-left { text-align: left; } .has-text-align-center { text-align: center; } .has-text-align-right { text-align: right; } .has-text-align-justify { text-align: justify; } /* Trust Banner B Animationen */ .usp-item { transition: transform 0.3s ease; } .usp-item:hover { transform: translateY(-4px); } .usp-item.badge-item:hover { transform: none; /* Verhindert doppelte Bewegung für Badge-Items */ } .usp-item.google-rating:hover { transform: none; /* Verhindert Aufwärtsbewegung für Google Rating */ } .usp-value { transition: all 0.3s ease; } .usp-item:hover .usp-value { transform: scale(1.15); } .badge-container { transition: transform 0.3s ease; } .badge-item:hover .badge-container { transform: scale(1.05); } .badge-container img { transition: transform 0.3s ease, opacity 0.3s ease; } /* Google Reviews Footer-Badge: HTML/CSS-Nachbau der frueheren google-reviews-badge.png (Sprechblase mit G-Logo, Rating, Sterne, Anzahl) mit echten dynamischen Werten statt statischem Bild. Kein Link (rein informativ), Hover-Animation wie bei den Nachbar-Badges (Tailwind transition-transform duration-200 ease-in-out hover:scale-105). Kompakt skaliert (kleinere Schrift, 2-zeiliges Label), damit die Card nicht neben den flachen Award-Logos dominiert. */ .grfb-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 0.125rem; min-width: 4.75rem; padding: 0.5rem 0.6875rem; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 0.5rem; } .grfb-bubble { position: relative; display: flex; align-items: center; justify-content: center; width: 1.0625rem; height: 1.0625rem; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 0.25rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .grfb-bubble::after { content: ""; position: absolute; bottom: -3px; left: 4px; width: 4px; height: 4px; background: #ffffff; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; transform: rotate(45deg); } .grfb-icon { width: 0.5625rem; height: 0.5625rem; } .grfb-label { display: block; text-align: center; font-size: 0.5625rem; font-weight: 600; line-height: 1.1; color: #374151; } .grfb-rating { font-size: 0.9375rem; line-height: 1.1; font-weight: 700; color: #111827; } .grfb-stars { display: flex; align-items: center; gap: 1px; color: #facc15; } .grfb-star { width: 7px; height: 7px; fill: currentColor; } .grfb-count { font-size: 0.5rem; color: #6b7280; } /* ntv-Badge Stack: 3 Siegel mit ~55% Überlappung. Custom CSS weil Pinegrow JIT große negative -ml-* utilities nicht zuverlässig generiert. 2024 ist nur leicht kleiner als 2025 (via .ntv-size-back-2). */ .ntv-stack-back-1 { margin-left: -2.5rem; } .ntv-stack-back-2 { margin-left: -2.5rem; } @media (min-width: 1024px) { .ntv-stack-back-1 { margin-left: -3.75rem; } .ntv-stack-back-2 { margin-left: -3.5rem; } } /* Custom-Größe für 2024-Badge (leicht kleiner als 2025) in Trust Banner A/B */ .ntv-size-back-2 { height: 5.5rem; width: 5.5rem; } @media (min-width: 1024px) { .ntv-size-back-2 { height: 6.5rem; width: 6.5rem; } } /* Größere Variante für gestapelte Standalone-Badges (ntv-badges-stack Block) */ .ntv-stack-lg-back-1 { margin-left: -4rem; } .ntv-stack-lg-back-2 { margin-left: -3.75rem; } @media (min-width: 1024px) { .ntv-stack-lg-back-1 { margin-left: -5rem; } .ntv-stack-lg-back-2 { margin-left: -4.75rem; } } /* Custom-Größe für 2024-Badge im ntv-badges-stack (leicht kleiner als 2025) */ .ntv-size-lg-back-2 { height: 7.5rem; width: 7.5rem; } @media (min-width: 1024px) { .ntv-size-lg-back-2 { height: 9.5rem; width: 9.5rem; } } @keyframes wave { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .star-icon { transition: transform 0.2s ease; } .usp-item:hover .star-icon { animation: wave 0.6s ease-in-out; } .usp-item:hover .star-icon:nth-child(1) { animation-delay: 0s; } .usp-item:hover .star-icon:nth-child(2) { animation-delay: 0.1s; } .usp-item:hover .star-icon:nth-child(3) { animation-delay: 0.2s; } .usp-item:hover .star-icon:nth-child(4) { animation-delay: 0.4s; } .usp-item:hover .star-icon:nth-child(5) { animation-delay: 0.5s; } /* * 9. BLOCK CENTERING UTILITIES * Für horizontale Zentrierung von Blöcken */ .aligncenter { justify-content: center; } /* ======================================== * 10. GERMANY MAP BLOCK * Interaktive Deutschlandkarte * ======================================== */ .germany-map-block { position: relative; } .germany-map-svg-wrapper { position: relative; width: 100%; } .germany-map-svg { width: 100%; height: auto; max-height: 700px; display: block; } /* Tooltip */ .germany-map-tooltip { position: absolute; background: #1e293b; color: white; padding: 8px 14px; border-radius: 8px; font-size: 0.875rem; font-weight: 500; pointer-events: none; opacity: 0; transform: translateY(-5px); transition: opacity 0.15s ease, transform 0.15s ease; z-index: 100; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); white-space: nowrap; } .germany-map-tooltip.visible { opacity: 1; transform: translateY(0); } /* SEO-Nav: visuell versteckt, aber crawlbar und accessible */ .germany-map-nav { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* SVG-Regionen (Bundesländer) */ .germany-region { fill: #E5E7EB; stroke: #ffffff; stroke-width: 1; cursor: pointer; transition: fill 0.2s ease; } .germany-region:hover { fill: #fb923c; } .germany-region.active { fill: #fb923c; } .germany-region.no-link { cursor: default; opacity: 0.7; } .germany-region.no-link:hover { fill: #E5E7EB; } .germany-region.active.no-link { opacity: 1; cursor: default; } .germany-region.legend-hover { fill: #fb923c; } /* Preview-Bild (Editor-Fallback + Ladezustand, wird von JS entfernt) */ .germany-map-preview { width: 100%; height: auto; display: block; } /* Responsive */ @media (max-width: 480px) { .germany-map-svg-wrapper { max-width: 320px; margin: 0 auto; } } /* ============================================================ Germany Map - Office Dots & Influence Animation ============================================================ */ /* Office-Pin (Ruhezustand): Y-Circle Brand-Icon + dezenter weisser Halo + Pulsring. Pin-Design analog zum Niederlassungen-Block fuer kohaerentes Auftreten. */ /* Weisser Hintergrund-Kreis fuer Lesbarkeit auf farbigen Bundeslaendern */ .office-icon-bg { fill: #ffffff; cursor: pointer; transition: opacity 0.15s ease; } /* Y-Circle Brand-Icon */ .office-icon { fill: #FF6B00; cursor: pointer; transition: opacity 0.15s ease; } /* Pulsring um den Y-Kreis (gefuellt, expandiert nach aussen, fadet aus) */ .office-pulse { fill: #FF6B00; opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: office-pulse-wave 2.4s ease-out infinite; } @keyframes office-pulse-wave { 0% { opacity: 0.5; transform: scale(1); } 65% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; transform: scale(3.2); } } /* Teardrop-Marker: bei Hover/Aktiv "in die Karte gesteckt" */ .office-pin-marker { pointer-events: none; opacity: 0; transition: opacity 0.15s ease; } .office-pin-marker-body { transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(-26px) scale(0.45); opacity: 0; } .office-pin-marker-shape { fill: #FF6B00; stroke: #ffffff; stroke-width: 1.5; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28)); } .office-pin-marker-inner { fill: #ffffff; } .office-pin-marker-shadow { fill: rgba(0, 0, 0, 0.32); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scaleX(0.3); } /* Aktiv: Icon + Halo + Puls ausblenden, Marker droppt rein */ .office-dot-container:hover .office-icon, .office-dot-container.active .office-icon, .office-dot-container:hover .office-icon-bg, .office-dot-container.active .office-icon-bg, .office-dot-container:hover .office-pulse, .office-dot-container.active .office-pulse { opacity: 0; } .office-dot-container:hover .office-pin-marker, .office-dot-container.active .office-pin-marker { opacity: 1; } .office-dot-container:hover .office-pin-marker-body, .office-dot-container.active .office-pin-marker-body { animation: office-pin-drop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .office-dot-container:hover .office-pin-marker-shadow, .office-dot-container.active .office-pin-marker-shadow { animation: office-pin-shadow 0.4s ease 0.18s forwards; } @keyframes office-pin-drop { 0% { transform: translateY(-26px) scale(0.45); opacity: 0; } 55% { transform: translateY(0) scale(1.1); opacity: 1; } 75% { transform: translateY(0) scale(0.94); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes office-pin-shadow { 0% { opacity: 0; transform: scaleX(0.3); } 100% { opacity: 0.9; transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .office-dot-container:hover .office-pin-marker-body, .office-dot-container.active .office-pin-marker-body { animation: none; transform: translateY(0) scale(1); opacity: 1; } .office-dot-container:hover .office-pin-marker-shadow, .office-dot-container.active .office-pin-marker-shadow { animation: none; opacity: 0.7; transform: scaleX(1); } } /* Unsichtbarer Klickbereich */ .office-hit-area { cursor: pointer; } /* Einflussbereich: Sanfter Fade ueber Transition */ .germany-region.office-influence { fill: #fed7aa; transition: fill 0.6s ease; } /* Aktives Bundesland behält staerkere Farbe im Einflussbereich */ .germany-region.active.office-influence { fill: #fb923c; transition: fill 0.6s ease; } /* Reichhaltiger Tooltip fuer Office-Punkte (Name + Adresse) */ .germany-map-tooltip.office-tooltip-rich { white-space: normal; min-width: 160px; max-width: 240px; text-align: left; line-height: 1.4; padding: 10px 14px; } .germany-map-tooltip.office-tooltip-rich strong { display: block; margin-bottom: 4px; font-size: 0.875rem; } .office-tooltip-address { font-size: 0.875rem; opacity: 0.85; } /* ============================================================ City Silhouette Block ============================================================ */ .has-silhouette { position: relative; overflow: visible; isolation: isolate; } /* Spacer im Normal-Flow: schiebt den unteren Section-Rand 250px nach unten, damit die absolute Silhouette nicht in die Buttons vorhergehender Bloecke reinragt. */ .city-silhouette-spacer { height: 200px; pointer-events: none; } .city-silhouette { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); /* Einheitliche Box-Geometrie: alle Silhouetten erscheinen in derselben Breite/Hoehe-Hoechstgrenze, das SVG wird mit object-fit:contain proportional eingepasst und am Boden ausgerichtet. Hoehe ggue. urspr. 28rem um ~30% reduziert (besseres Verhalten ggue. CTAs darueber). */ width: min(63rem, 90%); height: 19.5rem; max-width: 100%; object-fit: contain; object-position: center bottom; z-index: -1; opacity: 0.3; pointer-events: none; } @media (max-width: 1024px) { .city-silhouette-spacer { height: 144px; } .city-silhouette { height: 15.5rem; } } @media (max-width: 768px) { .city-silhouette-spacer { height: 104px; } .city-silhouette { height: 11rem; opacity: 0.2; } } @media (max-width: 480px) { .city-silhouette-spacer { height: 72px; } .city-silhouette { height: 8.5rem; opacity: 0.15; } } /* ============================================================ HINWEIS BLOCK (Notice/Callout) ============================================================ */ .hinweis-block { position: relative; border: 2px solid var(--hinweis-color-500); border-radius: 12px; background-color: var(--hinweis-color-bg); padding: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem; clear: both; } .hinweis-block:last-child { margin-bottom: 0; } /* Icon Badge */ .hinweis-icon-badge { position: absolute; top: -16px; left: 20px; width: 32px; height: 32px; border-radius: 50%; background: white; border: 2px solid var(--hinweis-color-500); display: flex; align-items: center; justify-content: center; color: var(--hinweis-color-500); } .hinweis-title { font-weight: 700; font-size: 1.125rem; color: var(--hinweis-color-700); margin-bottom: 0.5rem; } .hinweis-content > *:last-child { margin-bottom: 0; } /* --- Typ-Defaults (wenn hinweis-color-auto) --- */ .hinweis-type-info.hinweis-color-auto { --hinweis-color-500: #999CFF; --hinweis-color-700: #7f82d4; --hinweis-color-bg: rgba(153, 156, 255, 0.08); } .hinweis-type-tipp.hinweis-color-auto { --hinweis-color-500: #BA70FA; --hinweis-color-700: #9b5dd0; --hinweis-color-bg: rgba(186, 112, 250, 0.08); } .hinweis-type-warnung.hinweis-color-auto { --hinweis-color-500: #FF6B00; --hinweis-color-700: #d45900; --hinweis-color-bg: rgba(255, 107, 0, 0.08); } .hinweis-type-fehler.hinweis-color-auto { --hinweis-color-500: #FF8700; --hinweis-color-700: #d47000; --hinweis-color-bg: rgba(255, 135, 0, 0.08); } .hinweis-type-erfolg.hinweis-color-auto { --hinweis-color-500: #91E0C7; --hinweis-color-700: #568576; --hinweis-color-bg: rgba(145, 224, 199, 0.08); } .hinweis-type-kontakt.hinweis-color-auto { --hinweis-color-500: #BA70FA; --hinweis-color-700: #9b5dd0; --hinweis-color-bg: rgba(186, 112, 250, 0.08); } /* --- Farb-Overrides (ueberschreiben Typ-Defaults) --- */ .hinweis-color-orange { --hinweis-color-500: #FF6B00; --hinweis-color-700: #d45900; --hinweis-color-bg: rgba(255, 107, 0, 0.08); } .hinweis-color-pumpkin { --hinweis-color-500: #FF8700; --hinweis-color-700: #d47000; --hinweis-color-bg: rgba(255, 135, 0, 0.08); } .hinweis-color-lilac { --hinweis-color-500: #BA70FA; --hinweis-color-700: #9b5dd0; --hinweis-color-bg: rgba(186, 112, 250, 0.08); } .hinweis-color-dreamy { --hinweis-color-500: #999CFF; --hinweis-color-700: #7f82d4; --hinweis-color-bg: rgba(153, 156, 255, 0.08); } .hinweis-color-mint { --hinweis-color-500: #91E0C7; --hinweis-color-700: #568576; --hinweis-color-bg: rgba(145, 224, 199, 0.08); } .hinweis-color-green { --hinweis-color-500: #91E0C7; --hinweis-color-700: #15803d; --hinweis-color-bg: rgba(34, 197, 94, 0.08); } /* ===== FEATURE CARDS BLOCK ===== */ .feature-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .feature-card .feature-icon { width: 64px; height: 64px; min-width: 64px; display: flex; align-items: center; justify-content: center; border-radius: 1rem; } /* Icon Hintergrund-Varianten (Klasse auf Card-Root, Target Icon-Child) */ .feature-icon-bg-orange .feature-icon { background-color: rgb(255 237 213); } .feature-icon-bg-purple .feature-icon { background-color: rgb(250 245 255); } .feature-icon-bg-emerald .feature-icon { background-color: rgb(236 253 245); } .feature-icon-bg-blue .feature-icon { background-color: rgb(239 246 255); } .feature-icon-bg-gray .feature-icon { background-color: rgb(249 250 251); } /* Icon Farb-Varianten (Klasse auf Card-Root, Target Icon SVG) */ .feature-icon-color-orange .feature-icon svg { color: #FF6B00; } .feature-icon-color-purple .feature-icon svg { color: #BA70FA; } .feature-icon-color-emerald .feature-icon svg { color: #91E0C7; } .feature-icon-color-blue .feature-icon svg { color: #999CFF; } .feature-icon-color-gray .feature-icon svg { color: #6b7280; } /* ===== STATS CARD BLOCK ===== */ .stats-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; height: 100%; } .stats-card p { flex-grow: 1; } .stats-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } /* ===== ICON BULLET NUMBER BADGE ===== */ .icon-bullet-badge { width: 2rem; height: 2rem; min-width: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 0.75rem; margin-top: 0.25rem; } .icon-bullet-badge span { color: white; font-weight: 700; font-size: 0.875rem; } /* Rotierende CI-Farben wie Agenda-Block */ li:nth-child(5n+1) .icon-bullet-badge { background-color: #FF6B00; } li:nth-child(5n+2) .icon-bullet-badge { background-color: #BA70FA; } li:nth-child(5n+3) .icon-bullet-badge { background-color: #999CFF; } li:nth-child(5n+4) .icon-bullet-badge { background-color: #FF8700; } li:nth-child(5n+5) .icon-bullet-badge { background-color: #91E0C7; } .stats-card .stat-number { background: linear-gradient(135deg, #91E0C7 0%, #999CFF 25%, #BA70FA 50%, #FF8700 75%, #FF6B00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ======================================== * WORDPRESS ALIGNMENT RESTORE * Nur auf figure/img-Blöcke scopen, damit Flex-Container * mit .aligncenter (z.B. CTA-Buttons) nicht kaputt gehen * ======================================== */ figure.alignright, .wp-block-image.alignright { float: right; margin-left: 1.5em; margin-bottom: 1em; } figure.alignleft, .wp-block-image.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1em; } figure.aligncenter, .wp-block-image.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1em; } /* Inline-Bilder: rounded + shadow */ .wq-inline-image img { border-radius: 0.75rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } /* Clearfix für Container mit gefloateten Bildern */ .entry-content::after, #main-content .wp-block-group::after { content: ""; display: table; clear: both; } /* Responsive: Auf kleinen Screens float aufheben */ @media (max-width: 599px) { figure.alignright, .wp-block-image.alignright, figure.alignleft, .wp-block-image.alignleft { float: none; margin-left: auto; margin-right: auto; display: block; } } /* Kundenreferenzen (simpel) */ /* lg:grid-cols-6 fehlt im kompilierten Tailwind - wird nach Pinegrow-Reexport überflüssig */ @media (min-width: 1024px) { .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lg\:gap-12 { gap: 3rem; } .lg\:mt-12 { margin-top: 3rem; } } .clients-row-2, .clients-row-3, .clients-row-4, .clients-row-5, .clients-row-6 { display: none; } .logos-12 .clients-row-2, .logos-18 .clients-row-2, .logos-18 .clients-row-3 { display: grid; } /* Load-More: zeigt jede sonst versteckte Reihe + sanfte Einblendung */ [data-kundenref-row].is-revealed { display: grid !important; animation: kundenref-fade-in 0.45s ease both; } [data-kundenref-row].is-revealed .logo-grid-item { animation: kundenref-logo-pop 0.55s ease both; animation-delay: calc(var(--kundenref-i, 0) * 60ms); } @keyframes kundenref-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes kundenref-logo-pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .kundenref-load-more-wrap { transition: opacity 0.3s ease, margin 0.3s ease, height 0.3s ease; } .kundenref-load-more-wrap.is-hidden { opacity: 0; pointer-events: none; height: 0; margin-top: 0 !important; overflow: hidden; } @media (prefers-reduced-motion: reduce) { [data-kundenref-row].is-revealed, [data-kundenref-row].is-revealed .logo-grid-item, .kundenref-load-more-wrap { animation: none !important; transition: none !important; } } /* ====================== TESTIMONIALS SECTION \u2192 GRID (override horizontalen Scroll) Aggressiv gegen Tailwind utilities: flex, overflow-x-auto etc. ====================== */ div.testimonials-horizontal-scroll, .testimonials-horizontal-scroll { display: grid !important; grid-template-columns: 1fr !important; gap: 1.5rem !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; padding-left: 0 !important; padding-right: 0 !important; max-width: 80rem !important; margin-left: auto !important; margin-right: auto !important; flex-wrap: initial !important; flex-direction: initial !important; } @media (min-width: 768px) { div.testimonials-horizontal-scroll, .testimonials-horizontal-scroll { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1024px) { div.testimonials-horizontal-scroll, .testimonials-horizontal-scroll { grid-template-columns: repeat(3, 1fr) !important; } } .testimonials-horizontal-scroll > article, .testimonials-horizontal-scroll > .flex-none { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; flex-shrink: 1 !important; } /* Testimonial-Zitat: Card-Body-Token (16 px) laut Type-Scale */ .testimonial-card-hover > p, .testimonials-horizontal-scroll article > p, .tg-card > p { font-size: 1rem; } /* Scroll-Buttons verbergen */ #testimonials-scroll-left, #testimonials-scroll-right { display: none !important; } /* Scroll-Container-Wrapper fix (negative margin + full-bleed padding entfernen) */ div[cms-block="testimonials-scroll-container"], .testimonials-scroll-container, [data-pg-name*="testimonials"] > div[style*="calc"] { margin-left: auto !important; padding-left: 0 !important; max-width: 80rem !important; } /* Portrait-Bilder: rund, Schatten, weißer Rand */ .wp-block-image.portrait-circle img { border-radius: 9999px; object-fit: cover; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); border: 4px solid #fff; } /* Drop-Shadow für Siegel/Badges */ .wp-block-image.has-drop-shadow img { filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15)); } /* ======================================== * TIMELINE BLOCK * Dezente vertikale Linie + alternierendes * Layout (odd: Jahr links, even: Jahr rechts) * nth-child targets Pinegrow wrapper divs * ======================================== */ .timeline-container { position: relative; } /* Dezente vertikale Linie - nur Desktop */ @media (min-width: 1024px) { .timeline-container::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, #e5e7eb, #d1d5db, #e5e7eb); transform: translateX(-50%); } /* Base desktop layout for all items */ .timeline-container .tl-item { flex-direction: row; align-items: center; border-bottom: none; } .timeline-container .tl-year { width: 50%; } .timeline-container .tl-content { width: 50%; } /* Odd items (1., 3., 5., 7.): Jahr links (text-right), Content rechts */ .timeline-container > *:nth-child(odd) .tl-year { padding-right: 3rem; text-align: right; } .timeline-container > *:nth-child(odd) .tl-content { padding-left: 3rem; text-align: left; } /* Even items (2., 4., 6., 8.): flex-row-reverse → Jahr rechts, Content links */ .timeline-container > *:nth-child(even) .tl-item { flex-direction: row-reverse; } .timeline-container > *:nth-child(even) .tl-year { padding-left: 3rem; text-align: left; } .timeline-container > *:nth-child(even) .tl-content { padding-right: 3rem; text-align: right; } /* Letztes Item: kein border */ .timeline-container > *:last-child .tl-item { border-bottom: none; } } /* ======================================== * MISSION BREAKOUT IMAGE * ======================================== */ .mission-breakout { position: relative; overflow: visible; } .mission-breakout .mission-breakout-img { display: none; } @media (min-width: 1024px) { .mission-breakout .mission-breakout-img { display: block; position: absolute; bottom: 0; right: 0; height: 41rem; width: auto; max-width: 650px; z-index: 5; margin: 0; } .mission-breakout .mission-breakout-img img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; } } /* ======================================== * ARBEITGEBER SECTION * Text links 50%, Bild absolute rechts * ======================================== */ @media (min-width: 1024px) { .arbeitgeber-text { width: 50%; } } /* ======================================== * BLOG SINGLE POST (inc/blog-sidebar.php) * Hero, Sidebar, Autorenbox - alles per * the_content Filter injiziert * ======================================== */ /* --- Padding-Override für Single-Post-Hero --- */ body.single-post #main-content > .mx-auto.max-w-7xl { padding-top: 0 !important; } body.single-post #main-content { overflow-x: clip; } /* ====================== BLOG HERO ====================== */ /* -- Hero-Image (nur Featured Image, ganze Breite mit Container-Constraint) -- */ .blog-hero--has-image { position: relative; max-width: 80rem; margin: 0 auto 2rem; padding: 0 1rem; overflow: hidden; } @media (min-width: 640px) { .blog-hero--has-image { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .blog-hero--has-image { padding-left: 2rem; padding-right: 2rem; } } .blog-hero__image { position: relative; width: 100%; aspect-ratio: 21 / 9; max-height: 32rem; overflow: hidden; border-radius: 1.5rem; } .blog-hero__img { width: 100%; height: 100%; object-fit: cover; } /* -- Hero-Content (innerhalb blog-post-content, oberhalb Beitragstext) -- */ .blog-hero__content { margin-bottom: 2rem; } .blog-hero__title { font-size: clamp(1.875rem, 1.5rem + 1.5vw, 3rem); font-weight: 700; line-height: 1.25; color: #111827; margin: 0.75rem 0; } .blog-hero__category-wrap { margin-bottom: 0.75rem; } .blog-hero__category { display: inline-block; font-size: 0.75rem; font-weight: 600; color: #FF6B00; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.375rem 0.875rem; background: rgba(255, 107, 0, 0.08); border-radius: 9999px; transition: all 150ms; } .blog-hero__category:hover { background: rgba(255, 107, 0, 0.15); color: #EA580C; } /* Meta: veröffentlicht am DD.MM.YYYY · zuletzt aktualisiert am DD.MM.YYYY */ .blog-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.875rem; font-weight: 400; color: #6b7280; } .blog-hero__meta time { font-weight: 400; color: #6b7280; } .blog-hero__meta-sep { color: #d1d5db; } /* ====================== BREADCRUMBS (Blog) ====================== */ .blog-breadcrumbs { max-width: 80rem; margin: 0 auto 1rem; padding: 2rem 1rem 0; } @media (min-width: 640px) { .blog-breadcrumbs { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .blog-breadcrumbs { padding-top: 3rem; padding-left: 2rem; padding-right: 2rem; } } /* ====================== GRID-LAYOUT ====================== */ .blog-post-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: 80rem; margin: 0 auto; padding: 0 1rem 3rem; } /* Mobile: Sidebar UND Sticky-Wrapper werden per display:contents flach gezogen, damit AP-Card und Share-Box als separate, orderbare Items im Layout-Grid liegen. Reihenfolge: Content → Share → Nav → AP-Card → Widgets. Desktop: beide Elemente bekommen ihr block/flex-Verhalten zurück, Share bleibt im sticky Wrapper (AP + Share kleben gemeinsam oben). */ .blog-post-layout > .blog-post-sidebar { display: contents; } .blog-post-sidebar > .sidebar-ap-sticky { display: contents; } .blog-post-layout > .blog-post-content { order: 1; } .sidebar-ap-sticky > .sidebar-share { order: 2; } .blog-post-layout > .blog-post-nav { order: 3; } .sidebar-ap-sticky > .sidebar-ap { order: 4; } .blog-post-sidebar > .sidebar-widget { order: 5; } /* Mobile Spacing: das Layout-Gap (2.5rem) regelt den Abstand zwischen Share und Nachbarn - margin-top der Share-Box würde on-top addieren. */ .sidebar-ap-sticky > .sidebar-share { margin-top: 0; } @media (min-width: 640px) { .blog-post-layout { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .blog-post-layout { grid-template-columns: 1fr 340px; grid-template-areas: "content sidebar" "nav nav"; gap: 3rem; padding: 0 2rem 5rem; } /* Sidebar zurück als Flex-Spalte (Base-Regel), Sticky-Wrapper als normaler Block */ .blog-post-layout > .blog-post-sidebar { display: flex; grid-area: sidebar; } .blog-post-sidebar > .sidebar-ap-sticky { display: block; } .blog-post-layout > .blog-post-content { grid-area: content; order: initial; } .blog-post-layout > .blog-post-nav { grid-area: nav; order: initial; } /* Mobile-Orders neutralisieren */ .sidebar-ap-sticky > .sidebar-share, .sidebar-ap-sticky > .sidebar-ap, .blog-post-sidebar > .sidebar-widget { order: initial; } /* Share-Box margin-top auf Desktop wiederherstellen (sitzt unter AP-Card im sticky Wrapper) */ .sidebar-ap-sticky > .sidebar-share { margin-top: 1.5rem; } } /* --flush Variante: Horizontal-Padding analog zum Rest der Theme-Templates (max-w-7xl + px-4 lg:px-0). Für single-stelle, damit Content-Spalte bündig zum Hero startet. */ .blog-post-layout.blog-post-layout--flush { padding-left: 1rem; padding-right: 1rem; } @media (min-width: 1024px) { .blog-post-layout.blog-post-layout--flush { padding-left: 0; padding-right: 0; } } /* Stellen-Hero Meta-Row: 3 Items pro Zeile, dann Umbruch. Break-Item zwischen jedem 3er-Block erzwingt flex-wrap. row-gap bewusst klein: läuft zweimal (vor + nach break-li), also effektiv = 2 × row-gap zwischen echten Item-Zeilen. */ .stelle-meta-row { row-gap: 0.375rem; } .stelle-meta-row .stelle-meta-break { flex-basis: 100%; width: 100%; height: 0; margin: 0; padding: 0; } /* Stellen-Single: extra Atemraum oberhalb des Beitragstexts */ .single-stelle .blog-post-content { padding-top: 3rem; } /* Content-Spalte: WP-Alignment-Overrides */ .blog-post-content .alignfull, .blog-post-content .alignwide { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } /* Gutenberg-Listen: Bullets wiederherstellen (Tailwind-Preflight killt list-style global). Wirkt in Frontend + Gutenberg-Editor. Spezial-Listen wie .info-card-list überschreiben mit höherer Spezifität (list-style: none). */ ul.wp-block-list { list-style: disc; padding-left: 1.5rem; margin: 1em 0; } ol.wp-block-list { list-style: decimal; padding-left: 1.5rem; margin: 1em 0; } .wp-block-list li { margin: 0.25em 0; } /* Blog-CTA-Box (Schluss-CTA unter Blog-Artikeln) - dezente Brand-Tint-Box, passt in die schmale Content-Spalte (im Gegensatz zur alignfull Gradient-Section). */ .wp-block-group.blog-cta-box { background-color: #ffefeb; border-radius: 1rem; padding: var(--wp--preset--spacing--large, 2rem); margin-top: var(--wp--preset--spacing--large, 2rem); margin-bottom: var(--wp--preset--spacing--large, 2rem); } /* Heading-Zeile: Größe + Weight + Line-Height analog zur Sidebar-Headline (H3-Rolle). */ .blog-cta-box p.has-gradient-text { font-size: clamp(1.125rem, 1.0625rem + 0.25vw, 1.25rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; } /* ====================== SIDEBAR ====================== */ .blog-post-sidebar { min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; } .sidebar-sticky { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.5rem; } /* -- Widget Basis (CI: identisch zu Blog-Teaser-Cards) -- */ .sidebar-widget { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: box-shadow 300ms; } .sidebar-widget:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .sidebar-widget-title { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 1rem; letter-spacing: -0.01em; } /* -- Blog Post Navigation (Prev / Next) - im Blog-Post-Layout-Grid, spannt auf Desktop beide Spalten -- */ .blog-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-top: 2.5rem; border-top: 1px solid #e5e7eb; } @media (min-width: 1024px) { .blog-post-nav { gap: 3rem; padding-top: 3rem; } } .blog-post-nav__card { display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; color: inherit; border-radius: 0.5rem; min-width: 0; } .blog-post-nav__card:focus-visible { outline: 2px solid #FF6B00; outline-offset: 6px; } .blog-post-nav__card--next { text-align: right; align-items: flex-end; } .blog-post-nav__card--empty { pointer-events: none; } .blog-post-nav__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #9CA3AF; transition: color 200ms; } .blog-post-nav__card:hover .blog-post-nav__eyebrow, .blog-post-nav__card:focus-visible .blog-post-nav__eyebrow { color: #FF6B00; } .blog-post-nav__arrow { width: 0.875rem; height: 0.875rem; flex-shrink: 0; transition: transform 200ms ease; } .blog-post-nav__card--prev:hover .blog-post-nav__arrow { transform: translateX(-4px); } .blog-post-nav__card--next:hover .blog-post-nav__arrow { transform: translateX(4px); } .blog-post-nav__title { font-size: 1rem; font-weight: 600; color: #6B7280; line-height: 1.4; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 200ms; } .blog-post-nav__card:hover .blog-post-nav__title, .blog-post-nav__card:focus-visible .blog-post-nav__title { color: #4B5563; } @media (max-width: 640px) { .blog-post-nav { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 0 0; } .blog-post-nav__card--empty { display: none; } .blog-post-nav__card--next { text-align: left; align-items: flex-start; } .blog-post-nav__title { font-size: 1rem; } } /* -- CTA Widgets -- */ .sidebar-cta { text-align: center; } .sidebar-cta-heading { font-size: 1.125rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; } .sidebar-cta-text { font-size: 0.875rem; color: #6B7280; line-height: 1.5; margin-bottom: 1rem; } /* CTA Button - Primary (solid orange) */ .sidebar-cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; background: #FF6B00; color: #fff; font-size: 1rem; font-weight: 600; padding: 0.75rem 1.25rem; border-radius: 0.75rem; border: 2px solid #FF6B00; text-decoration: none; transition: all 200ms; box-shadow: 0 4px 6px rgba(255, 107, 0, 0.15); cursor: pointer; font-family: inherit; } .sidebar-cta-button:hover { background: #FF8700; border-color: #FF8700; box-shadow: 0 6px 12px rgba(255, 107, 0, 0.25); color: #fff; transform: translateY(-1px); } .sidebar-cta-button svg { flex-shrink: 0; } /* CTA Button - Secondary (outline) */ .sidebar-cta-button--secondary { background: #fff; color: #4B5563; border-color: #e5e7eb; box-shadow: none; } .sidebar-cta-button--secondary:hover { background: #fff; border-color: #FF6B00; color: #FF6B00; box-shadow: none; } .sidebar-cta-button--secondary svg { color: #FF6B00; } .sidebar-cta-button--secondary:hover svg { color: #FF6B00; } /* -- Persönliche Eventberatung (AP dynamisch, Sticky, Breakout-Image) -- */ /* Sticky-Wrapper: auf Desktop mitscrollend, mobil normaler Flow */ @media (min-width: 1024px) { .sidebar-ap-sticky { position: sticky; top: 6rem; } } .sidebar-ap { position: relative; overflow: visible; padding: 0; text-align: center; /* Ruhiger Hintergrund - wie andere Sidebar-Widgets, kein aufdringlicher Gradient */ background: #fff; margin-top: 3rem; } /* Bild ragt oben aus dem Widget heraus, mit weichem Fade nach unten */ .sidebar-ap-image-wrap { margin: -3rem -0.75rem 0.5rem; text-align: center; line-height: 0; overflow: visible; } .sidebar-ap-image { display: block; margin: 0 auto; width: auto; max-width: 100%; height: auto; max-height: 280px; object-fit: contain; object-position: center bottom; /* Sanfter Verlauf nach unten zu transparent (wie .ap-section-image-fade) */ -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%); } .sidebar-ap-body { padding: 0 1.25rem 1.5rem; } /* Eyebrow-Label - dezentes CI-Signal (orange, uppercase), matcht .blog-post-nav__eyebrow */ .sidebar-ap-eyebrow { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #FF6B00; margin-bottom: 0.375rem; } /* Heading - explizite Typografie, da Sidebar in .y-prose-reset liegt * und die globale #main-content h3 clamp-Regel dort nicht greift. */ .sidebar-ap-heading { font-size: clamp(1.125rem, 1.0625rem + 0.25vw, 1.25rem); font-weight: 600; line-height: 1.4; color: #111827; letter-spacing: -0.015em; margin-top: 0; margin-bottom: 0.75rem; text-align: center; } .sidebar-ap-heading em { background: linear-gradient(135deg, #91E0C7 0%, #999CFF 25%, #BA70FA 50%, #FF8700 75%, #FF6B00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; } /* sup im Gradient-em: erbt transparenten Text, aber NICHT background-image. * Ohne eigenen Gradient wäre das ® unsichtbar → hier erneut anwenden. */ .sidebar-ap-heading em sup { background: linear-gradient(135deg, #91E0C7 0%, #999CFF 25%, #BA70FA 50%, #FF8700 75%, #FF6B00 100%); -webkit-background-clip: text; background-clip: text; } /* Body - theme-typografie: gray-600, leading-relaxed */ .sidebar-ap-text { font-size: 1rem; color: #4B5563; line-height: 1.625; margin: 0 0 1rem; text-align: center; } /* AP Name + Rolle */ .sidebar-ap-name { display: flex; flex-direction: column; font-size: 1rem; font-weight: 700; color: #111827; line-height: 1.3; margin: 0 0 1.125rem; letter-spacing: -0.01em; } .sidebar-ap-role { display: block; font-size: 0.875rem; font-weight: 500; color: #4B5563; letter-spacing: 0; margin-top: 0.1875rem; } /* CTAs gestapelt, volle Breite */ .sidebar-ap-ctas { display: flex; flex-direction: column; gap: 0.5rem; } .sidebar-ap-ctas .sidebar-cta-button { width: 100%; } /* Primary im Sidebar-AP: Outline-Variante (Orange-Border + Orange-Text). * Vermeidet Farbkonflikt mit großflächig orangem Primary-CTA im Sticky-Header. */ .sidebar-ap-cta-primary { background: #fff; color: #FF6B00; border-color: #FF6B00; box-shadow: none; } .sidebar-ap-cta-primary:hover { background: #FF6B00; border-color: #FF6B00; color: #fff; box-shadow: 0 6px 12px rgba(255, 107, 0, 0.2); } .sidebar-ap-cta-primary svg { color: #FF6B00; transition: color 200ms; } .sidebar-ap-cta-primary:hover svg { color: #fff; } /* ====================== SIDEBAR-SHARE (unter der AP-Card, dezent ohne Card-Wrapper) ====================== */ .sidebar-share { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #e5e7eb; } .sidebar-share__heading { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 500; color: #6b7280; text-align: left; letter-spacing: normal; text-transform: none; } .sidebar-share__buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; } .sidebar-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; color: #9ca3af; background: transparent; border: 1px solid #e5e7eb; text-decoration: none; transition: color 200ms, background-color 200ms, border-color 200ms, transform 200ms; } .sidebar-share__btn:hover, .sidebar-share__btn:focus-visible { color: #fff; transform: translateY(-1px); outline: none; text-decoration: none; } .sidebar-share__btn--linkedin:hover, .sidebar-share__btn--linkedin:focus-visible { background: #0A66C2; border-color: #0A66C2; } .sidebar-share__btn--xing:hover, .sidebar-share__btn--xing:focus-visible { background: #006567; border-color: #006567; } .sidebar-share__btn--facebook:hover, .sidebar-share__btn--facebook:focus-visible { background: #1877F2; border-color: #1877F2; } .sidebar-share__btn--whatsapp:hover, .sidebar-share__btn--whatsapp:focus-visible { background: #25D366; border-color: #25D366; } .sidebar-share__btn--mail:hover, .sidebar-share__btn--mail:focus-visible { background: #FF6B00; border-color: #FF6B00; } .sidebar-share__btn-icon { width: 0.9375rem; height: 0.9375rem; display: block; } /* Mobile (<1024px): Share-Box sitzt zwischen Author-Box und Nav im Haupt-Flow - zentrieren */ @media (max-width: 1023.98px) { .sidebar-share { text-align: center; } .sidebar-share__heading { text-align: center; } .sidebar-share__buttons { justify-content: center; } } /* ====================== AUTORENBOX (horizontal, unter dem Content) ====================== */ .author-box { display: flex; align-items: center; gap: 1.5rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); max-width: 56rem; margin: 2.5rem auto; transition: box-shadow 300ms; } .author-box:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .author-box-avatar-wrap { flex-shrink: 0; line-height: 0; } .author-box-avatar, .author-box .avatar { width: 7.5rem !important; height: 7.5rem !important; border-radius: 9999px; object-fit: cover; display: block; background: #F9FAFB; } .author-box-body { flex: 1; min-width: 0; } /* Label - matcht .blog-post-nav__eyebrow */ .author-box-label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #FF6B00; margin-bottom: 0.125rem; } /* Name - matcht .sidebar-widget-title */ .author-box-name { font-size: clamp(1.125rem, 1.0625rem + 0.25vw, 1.25rem); font-weight: 600; color: #111827; line-height: 1.4; margin-top: 0; margin-bottom: 0; letter-spacing: -0.01em; } /* Bio - matcht .sidebar-cta-text */ .author-box-bio { margin-top: 0.375rem; font-size: 1rem; color: #6B7280; line-height: 1.6; } /* Follow-Row - Text-Links statt Icons ("{Vorname} folgen: LinkedIn · Xing · …") */ .author-box-follow { margin: 0.75rem 0 0; font-size: 0.875rem; color: #6B7280; line-height: 1.6; } .author-box-follow-label { display: block; margin-bottom: 0.25rem; } .author-box-follow-sep { color: #D1D5DB; margin: 0 0.375rem; user-select: none; } .author-box-follow-link { display: inline-flex; align-items: center; gap: 0.3125rem; vertical-align: -0.15em; color: #6B7280; text-decoration: none; font-weight: 500; transition: color 150ms; } .author-box-follow-link:hover, .author-box-follow-link:focus-visible { color: #1F2937; outline: none; text-decoration: none; } .author-box-follow-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: #9CA3AF; transition: color 150ms; } .author-box-follow-link:hover .author-box-follow-icon, .author-box-follow-link:focus-visible .author-box-follow-icon { color: #6B7280; } /* Mobil: Avatar mittig oben, Name/Text/Follow-Row darunter zentriert */ @media (max-width: 640px) { .author-box { flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 1.5rem 1.25rem; } .author-box-avatar, .author-box .avatar { width: 6rem !important; height: 6rem !important; } } /* ================================================================ BLOG TEASER CARDS (Excerpt & Titel-Hierarchie) ================================================================ */ /* Blog-Teaser-Excerpt: Card-Body-Token (16 px) laut Type-Scale */ .blog-teaser-card__excerpt { font-size: 1rem !important; } /* ================================================================ BLOG ARCHIVE ================================================================ */ /* Topline override - prevent #main-content p from overriding */ .hero-section .text-y_orange-500 { color: #f97316 !important; background-image: none !important; background-size: 0 !important; } /* Card Link */ .blog-archive-card-link { display: block; text-decoration: none !important; color: inherit !important; background-image: none !important; background-size: 0 !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1); border-radius: 1rem; overflow: hidden; } .blog-archive-card-link:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 20px -8px rgba(0, 0, 0, 0.15); color: inherit !important; } /* Card Grid - stacked mobile, 40/60 side-by-side on md+ */ .blog-card-grid { display: grid; grid-template-columns: 1fr; } @media (min-width: 768px) { .blog-card-grid { grid-template-columns: 40% 1fr; } } /* Image column */ .blog-card-image { min-width: 0; overflow: hidden; } /* Image Container */ .blog-archive-image-container { width: 100%; overflow: hidden; background: #f3f4f6; aspect-ratio: 16 / 10; } @media (min-width: 768px) { .blog-archive-image-container { aspect-ratio: auto; min-height: 400px; height: 100%; } } .blog-archive-image-container img, .blog-archive-image-container .wp-post-image { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: center; transition: transform 0.5s ease; } .blog-archive-card-link:hover .blog-archive-image-container img { transform: scale(1.05); } /* Ensure grid rows stretch equally */ .blog-card-grid { align-items: stretch; } .blog-card-image { display: flex; } /* Card Content - 60% side */ .blog-card-content { min-width: 0; padding: 2rem; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 1024px) { .blog-card-content { padding: 2.5rem; } } /* Alternating layout: even cards flip image to right */ @media (min-width: 768px) { .blog-archive-card:nth-child(even) .blog-card-grid { grid-template-columns: 1fr 40%; } .blog-archive-card:nth-child(even) .blog-card-image { order: 2; } .blog-archive-card:nth-child(even) .blog-card-content { order: 1; } } /* Read More */ .blog-archive-read-more { display: inline-flex; align-items: center; color: #f97316; font-weight: 600; transition: color 0.3s ease; } .blog-archive-card-link:hover .blog-archive-read-more { color: #ea580c; } .blog-archive-read-more svg { transition: transform 0.3s ease; } .blog-archive-card-link:hover .blog-archive-read-more svg { transform: translateX(4px); } /* Category Navigation */ .blog-category-nav { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; align-items: center; } .blog-category-link { padding: 0.625rem 1.25rem; border-radius: 9999px; font-weight: 600; font-size: 0.875rem; transition: all 0.3s ease; text-decoration: none !important; background-image: none !important; background-size: 0 !important; border: 2px solid #e5e7eb; background-color: #fff; color: #6b7280 !important; } .blog-category-link:hover { background-color: #fff7ed; color: #f97316 !important; border-color: #f97316; } .blog-category-link.active { background-color: #f97316; color: #fff !important; border-color: #f97316; } /* Posts Section Spacing */ .blog-posts-section { padding-top: var(--wp--preset--spacing--2-xlarge, 8rem); padding-bottom: var(--wp--preset--spacing--2-xlarge, 8rem) !important; margin-bottom: 0 !important; background-color: #f9fafb; } /* Posts List */ .blog-posts-list { display: flex; flex-direction: column; gap: 4rem; } @media (min-width: 1024px) { .blog-posts-list { gap: 5rem; } } /* Card Meta */ .blog-card-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .blog-card-date { font-size: 0.875rem; color: #6b7280; font-weight: 500; } .blog-card-dot { color: #d1d5db; } /* Card Title */ .blog-card-title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: #111827; margin: 0 0 1rem; } @media (min-width: 1024px) { .blog-card-title { font-size: 1.875rem; } } /* Card Excerpt */ .blog-card-excerpt { color: #6b7280; line-height: 1.625; margin: 0 0 1.5rem; } /* Read More Icon */ .blog-read-more-icon { width: 1.25rem; height: 1.25rem; margin-left: 0.5rem; } /* Category Label (in cards) */ .blog-category-label { display: inline-block; color: #9ca3af; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } /* Override global link styles inside cards */ .blog-archive-card-link h2, .blog-archive-card-link p, .blog-archive-card-link time, .blog-archive-card-link span { background-image: none !important; background-size: 0 !important; } /* Pagination: Tailwind-gestylt in younitedtheme_blog_pagination(), Klassen in wq-tailwind-safelist.html gelistet - kein Custom-CSS nötig. */ /* ================================================================ GLOSSAR INDEX - 100% CSS, no Tailwind classes in PHP ================================================================ */ /* ── Container ── */ .glossar-index { padding-top: 2.5rem; padding-bottom: var(--wp--preset--spacing--2-xlarge, 8rem); } /* ── Search Section ── */ .glossar-search-section { text-align: center; max-width: 36rem; margin: 0 auto 3rem; position: relative; } .glossar-search-section__title { font-size: 1.25rem; font-weight: 700; color: #111827; margin: 0 0 0.25rem; } .glossar-search-section__subtitle { font-size: 0.875rem; color: #6b7280; margin: 0 0 1.25rem; } /* ── Search Input ── */ .glossar-search { position: relative; } .glossar-search__icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: #9ca3af; pointer-events: none; z-index: 1; } .glossar-search__input { width: 100%; border: 1px solid #d1d5db !important; border-radius: 0.75rem !important; padding: 0.8125rem 1rem 0.8125rem 2.75rem !important; font-size: 1rem; line-height: 1.5; color: #111827; background-color: #fff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); transition: border-color 0.2s, box-shadow 0.2s; } .glossar-search__input:focus { border-color: #f97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06) !important; outline: none !important; --tw-ring-color: transparent !important; } .glossar-search__input::placeholder { color: #9ca3af; opacity: 1; } .glossar-search__input::-webkit-search-cancel-button { -webkit-appearance: none; } /* ── Search Dropdown ── */ .glossar-search__dropdown { position: absolute; z-index: 50; left: 0; right: 0; margin-top: 0.375rem; background: #fff; border-radius: 0.75rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); max-height: 20rem; overflow-y: auto; scrollbar-width: thin; /* hidden by default - no border/visual until JS shows it */ display: none; border: 0; } .glossar-search__dropdown.is-open { display: block; border: 1px solid #e5e7eb; } .glossar-search__empty { padding: 1rem 1.25rem; font-size: 0.875rem; color: #6b7280; text-align: left; } .glossar-search__result { display: block; padding: 0.625rem 1.25rem; font-size: 1rem; color: #4B5563 !important; background-image: none !important; background-size: 0 !important; text-decoration: none !important; cursor: pointer; transition: background-color 0.1s, color 0.1s; } .glossar-search__result:hover, .glossar-search__result.is-active { background-color: #fff7ed !important; color: #ea580c !important; } .glossar-search__result + .glossar-search__result { border-top: 1px solid #f3f4f6; } .glossar-search__result mark { background-color: #fed7aa; color: #9a3412; border-radius: 2px; padding: 0 2px; } /* ── Letter Navigation (gleiches Pattern wie .staedte-regionen-nav) ── */ .glossar-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; } .glossar-nav__letter { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background-color: #fff; border: 1px solid #e5e7eb; color: #374151; font-size: 0.875rem; font-weight: 700; transition: background-color 0.15s, color 0.15s, border-color 0.15s; } .glossar-nav__letter--active { color: #374151 !important; background-color: #fff; text-decoration: none !important; background-image: none !important; background-size: 0 !important; } .glossar-nav__letter--active:hover { color: #fff !important; background-color: #f97316; border-color: #f97316; } .glossar-nav__letter--empty { color: #d1d5db; background-color: #fff; border-color: #f3f4f6; cursor: default; } /* ── 4-Column Grid ── */ .glossar-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 640px) { .glossar-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } } @media (min-width: 1024px) { .glossar-grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2rem; } } .glossar-grid__group { scroll-margin-top: 6rem; } /* ── Letter-Heading als rundes CI-Badge (glossar-index + staedte-regionen) ── */ /* Padding-Verhältnis Container:Text ≈ 2.8 (analog zu .glossar-nav__letter) */ .glossar-grid__letter, .staedte-regionen-letter { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 9999px; font-size: 1.125rem; font-weight: 700; line-height: 1; margin: 0 0 1.25rem; padding: 0; border: none; color: #ff6b00; /* Fallback (y_orange-500) */ background-color: rgba(255, 107, 0, 0.15); } @media (min-width: 768px) { .glossar-grid__letter, .staedte-regionen-letter { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; } } /* ── CI-Farbrotation (Text + Badge-Hintergrund mit 18% Opacity) ── */ .glossar-grid__group:nth-of-type(5n+1) .glossar-grid__letter, .staedte-regionen-letter-group:nth-of-type(5n+1) .staedte-regionen-letter { color: #ff6b00; /* y_orange-500 */ background-color: rgba(255, 107, 0, 0.18); } .glossar-grid__group:nth-of-type(5n+2) .glossar-grid__letter, .staedte-regionen-letter-group:nth-of-type(5n+2) .staedte-regionen-letter { color: #3cb895; /* y_mint-500 (textsicherer) */ background-color: rgba(145, 224, 199, 0.30); } .glossar-grid__group:nth-of-type(5n+3) .glossar-grid__letter, .staedte-regionen-letter-group:nth-of-type(5n+3) .staedte-regionen-letter { color: #ff8700; /* y_pumpkin-500 */ background-color: rgba(255, 135, 0, 0.18); } .glossar-grid__group:nth-of-type(5n+4) .glossar-grid__letter, .staedte-regionen-letter-group:nth-of-type(5n+4) .staedte-regionen-letter { color: #ba70fa; /* y_lilac-500 */ background-color: rgba(186, 112, 250, 0.18); } .glossar-grid__group:nth-of-type(5n) .glossar-grid__letter, .staedte-regionen-letter-group:nth-of-type(5n) .staedte-regionen-letter { color: #7a7dff; /* y_dreamy-500 (textsicherer) */ background-color: rgba(153, 156, 255, 0.25); } .glossar-grid__list { list-style: none; margin: 0; padding: 0; } .glossar-grid__link { display: block; padding: 0.3125rem 0; font-size: 1rem; line-height: 1.4; color: #4B5563 !important; text-decoration: none !important; background-image: none !important; background-size: 0 !important; transition: color 0.15s ease, padding-left 0.15s ease; } .glossar-grid__link:hover { color: #ea580c !important; padding-left: 0.25rem; } /* ============================================================ MEGA MENU CARDS (\u00dcberarbeitung 04/2026, v2) Vollst\u00e4ndig klickbare Cards (anchor wraps all) Kreuzgrid-Trennstriche mittig zwischen Cards Grayscale Hover-Effekt auf nicht-gehoverte Cards ============================================================ */ /* Symmetrisches Padding: oben gleich wie unten (zum CTA-Balken) */ .dropdown-menu:has(.wq-mega-card) { padding-top: 0 !important; min-height: auto !important; } .dropdown-menu .grid:has(.wq-mega-card) { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .wq-mega-card { position: relative; border-radius: 0.5rem; transition: background-color 0.25s ease; color: inherit; text-decoration: none !important; } .wq-mega-card:hover { background-color: rgba(249, 250, 251, 0.5); } .wq-mega-card__title { transition: color 0.25s ease; } .wq-mega-card:hover .wq-mega-card__title { color: #FF6B00 !important; } .wq-mega-card__image { transition: filter 0.35s ease, transform 0.35s ease, opacity 0.35s ease; } /* ── 2-Reihen-Grids: gleiche Zeilenhöhe damit Kreuzlinie zentriert ist ── */ .dropdown-menu .grid:has(.wq-mega-card:nth-child(6)), .dropdown-menu .wq-simple-menu:has(.wq-simple-menu__item:nth-child(6)) { grid-auto-rows: 1fr; row-gap: 1rem !important; } /* ── Vertikale Trennlinien: Mega-Card- + Simple-Menu-Grids ── DRY via Custom Properties: - --divider-gradient: Fade in fixen Pixeln (16px top/bottom), funktioniert auch bei kurzen Containern (Simple-Menu mit py-4) und bleibt bei langen (Mega mit py-10) dezent - --divider-pos-N: Gap-Center-Positionen, ändern sich nur am xl-Breakpoint (gap 8px→16px) - Formel: Position N = N/5 * (100% + gap) - gap/2 Count-basierte Overrides darunter zeichnen weniger Linien, wenn weniger Spalten gefüllt sind. */ .dropdown-menu .grid:has(.wq-mega-card), .dropdown-menu .wq-simple-menu { position: relative; --divider-gradient: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.07) 16px, rgba(0,0,0,0.07) calc(100% - 16px), transparent 100%); --divider-pos-1: calc(20% - 2.4px); --divider-pos-2: calc(40% - 0.8px); --divider-pos-3: calc(60% + 0.8px); --divider-pos-4: calc(80% + 2.4px); } /* Ab xl-Breakpoint: column-gap wechselt zu 16px (xl:gap-x-4) */ @media (min-width: 1280px) { .dropdown-menu .grid:has(.wq-mega-card), .dropdown-menu .wq-simple-menu { --divider-pos-1: calc(20% - 4.8px); --divider-pos-2: calc(40% - 1.6px); --divider-pos-3: calc(60% + 1.6px); --divider-pos-4: calc(80% + 4.8px); } } /* Default: 5+ Items → alle 4 Linien */ .dropdown-menu .grid:has(.wq-mega-card)::after, .dropdown-menu .wq-simple-menu::after { content: ''; position: absolute; top: 0; bottom: 0; /* Im Content-Bereich positionieren (Padding überspringen) */ left: 32px; right: 32px; pointer-events: none; z-index: 1; background: var(--divider-gradient) var(--divider-pos-1) 0 / 1px 100% no-repeat, var(--divider-gradient) var(--divider-pos-2) 0 / 1px 100% no-repeat, var(--divider-gradient) var(--divider-pos-3) 0 / 1px 100% no-repeat, var(--divider-gradient) var(--divider-pos-4) 0 / 1px 100% no-repeat; } /* Exakt 4 Items → 3 Linien (4. weglassen) */ .dropdown-menu .grid:has(.wq-mega-card:nth-child(4):last-child)::after, .dropdown-menu .wq-simple-menu:has(.wq-simple-menu__item:nth-child(4):last-child)::after { background: var(--divider-gradient) var(--divider-pos-1) 0 / 1px 100% no-repeat, var(--divider-gradient) var(--divider-pos-2) 0 / 1px 100% no-repeat, var(--divider-gradient) var(--divider-pos-3) 0 / 1px 100% no-repeat; } /* Exakt 3 Items → 2 Linien */ .dropdown-menu .grid:has(.wq-mega-card:nth-child(3):last-child)::after, .dropdown-menu .wq-simple-menu:has(.wq-simple-menu__item:nth-child(3):last-child)::after { background: var(--divider-gradient) var(--divider-pos-1) 0 / 1px 100% no-repeat, var(--divider-gradient) var(--divider-pos-2) 0 / 1px 100% no-repeat; } /* Exakt 2 Items → 1 Linie */ .dropdown-menu .grid:has(.wq-mega-card:nth-child(2):last-child)::after, .dropdown-menu .wq-simple-menu:has(.wq-simple-menu__item:nth-child(2):last-child)::after { background: var(--divider-gradient) var(--divider-pos-1) 0 / 1px 100% no-repeat; } /* Exakt 1 Item → keine Linien */ .dropdown-menu .grid:has(.wq-mega-card:only-child)::after, .dropdown-menu .wq-simple-menu:has(.wq-simple-menu__item:only-child)::after { background: none; } /* ── Horizontale Linie NUR bei 2-Reihen-Grids (≥6 Cards/Items) ── */ .dropdown-menu .grid:has(.wq-mega-card:nth-child(6))::before, .dropdown-menu .wq-simple-menu:has(.wq-simple-menu__item:nth-child(6))::before { content: ''; position: absolute; left: 32px; right: 32px; top: 50%; height: 1px; pointer-events: none; z-index: 1; background: linear-gradient(to right, transparent, rgba(0,0,0,0.07) 5%, rgba(0,0,0,0.07) 95%, transparent); } /* Hover-Filter: andere Bilder in Grayscale wenn eine Card gehovered wird */ .dropdown-menu .grid:has(.wq-mega-card:hover) .wq-mega-card:not(:hover) .wq-mega-card__image { filter: grayscale(100%); opacity: 0.5; } .dropdown-menu .grid:has(.wq-mega-card:hover) .wq-mega-card:hover .wq-mega-card__image { filter: none; transform: scale(1.03); } /* Fallback ohne :has() Support */ @supports not selector(:has(*)) { .wq-mega-card:hover .wq-mega-card__image { transform: scale(1.03); } } /* ============================================================ DROPDOWN-LINK als