/
um die Felder: für das Raster neutralisieren */
.ah-form .wpcf7-form br { display: none; }
.ah-f-row > p { display: contents; }
.ah-form .wpcf7-form p:has(> .ah-f-l), .ah-form .wpcf7-form p:has(> .ah-f-consent) { margin: 0 !important; }
.ah-form input[type=text], .ah-form input[type=email], .ah-form textarea { width: 100% !important; margin: 0 !important; }
.ah-f-note { font-weight: 400 !important; }
.ah-form .wpcf7-turnstile, .ah-form .cf7-cf-turnstile { margin: 2px 0; }
.ah-posts .tmb, .ah-posts .tmb .t-inside, .ah-posts .tmb .t-entry-text, .ah-posts .tmb [class*="style-color-ah-white-bg"] { border-radius: 20px !important; }
@media (min-width: 960px) {
.ah-wissen .ah-posts .cssgrid-container > *:first-child .tmb, .ah-wissen .ah-posts .cssgrid-container > *:first-child .t-inside, .ah-wissen .ah-posts .cssgrid-container > *:first-child .t-entry-text, .ah-wissen .ah-posts .cssgrid-container > *:first-child [class*="style-color-ah-white-bg"] { border-bottom-right-radius: 0 !important; }
.ah-wissen .ah-posts .cssgrid-container > *:first-child .t-inside { background: radial-gradient(90% 70% at 100% 0%, var(--ah-tint) 0%, transparent 70%), linear-gradient(160deg, var(--ah-tintw) 0%, #FFFFFF 100%) !important; }
}
.ah-kontakt .ah-intro { margin-top: 32px !important; font-size: 18px; }
.ah-cinfo { margin-top: 40px; }
@media (max-width: 959px) {
.ah-hero-show .t-overlay-text .t-entry { padding-right: 104px; }
.ah-hero-show .t-entry-meta { display: none; }
.ah-hero-show .t-entry-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-work .ah-rail .owl-carousel { width: 86%; }
.ah-work .ah-rail .owl-stage-outer { clip-path: inset(-60px -100vw -60px 0); }
}
/* =========================================================================
Mega-Menüs wie Vorlage (.mega-in / .mega-list / .mega-prev / .sys-col / .sys-note)
========================================================================= */
@media (min-width: 960px) {
#masthead .megamenu-block-wrapper > .vc_row.ah-mega { max-width: 1080px; margin: 0 0 0 auto; padding: 12px; border-radius: 24px; overflow: hidden; background: linear-gradient(150deg, #FFFFFF 0%, var(--ah-tintw) 100%); box-shadow: 0 30px 80px -30px rgba(20, 20, 20, .35); }
#masthead .megamenu-block-wrapper > .vc_row.ah-mega-systeme { max-width: 900px; }
#masthead ul.block-wrapper-parent { padding: 0 var(--ah-gutter, 54px) 20px !important; }
}
#masthead .ah-mega .row-inner { margin: 0 !important; }
#masthead .ah-mega .uncell { padding: 0 !important; }
/* Liste Bereiche */
#masthead .ah-mega-list { display: flex !important; flex-direction: column; padding: 8px; }
#masthead .ah-mega-list a { display: grid !important; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 16px !important; border-radius: 14px; color: var(--ah-ink) !important; transition: background .2s; }
#masthead .ah-mega-list a strong { grid-column: 1; font: 600 20.2px/1.1 Onest, Arial, sans-serif !important; letter-spacing: -.02em !important; color: var(--ah-ink); }
#masthead .ah-mega-list a > span { grid-column: 1; display: block !important; color: var(--ah-ink2) !important; font: 400 14px/1.45 'Schibsted Grotesk', Arial, sans-serif !important; margin: 0 !important; }
#masthead .ah-mega-list a .ah-ar { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-size: 18px; opacity: 0; transform: translateX(-6px); transition: all .3s var(--ah-ease); }
#masthead .ah-mega-list a:hover, #masthead .ah-mega-list a:focus-visible { background: var(--ah-wall); }
#masthead .ah-mega-list a:hover .ah-ar, #masthead .ah-mega-list a:focus-visible .ah-ar { opacity: 1; transform: none; }
#masthead .ah-mega-list .ah-badge { font: 600 11px/1 'Schibsted Grotesk', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; background: var(--ah-pine); color: #fff; border-radius: 999px; padding: 4px 7px; margin-left: 8px; vertical-align: 4px; }
/* Vorschau: Bilder gestapelt, Wechsel beim Hover über den Eintrag */
#masthead .ah-mega-prev .uncont { position: relative; min-height: 340px; height: 100%; border-radius: 16px; overflow: hidden; background: var(--ah-wall); margin: 0 !important; }
#masthead .ah-mega-prev .uncoltable, #masthead .ah-mega-prev .uncell { height: 100%; }
#masthead .ah-mega-prev .ah-prev-img { position: absolute !important; inset: 0; margin: 0 !important; opacity: 0; transform: scale(1.04); transition: opacity .45s, transform 1s var(--ah-ease); }
#masthead .ah-mega-prev .ah-prev-img *, #masthead .ah-mega-prev .ah-prev-img img { height: 100% !important; width: 100% !important; max-width: none; }
#masthead .ah-mega-prev .ah-prev-img img { object-fit: cover; }
#masthead .ah-mega-prev .ah-prev-1, #masthead .ah-mega-prev .ah-cap-1 { opacity: 1; transform: none; }
#masthead .ah-mega-prev .uncode_text_column { position: absolute !important; left: 12px; right: 12px; bottom: 12px; margin: 0 !important; z-index: 2; }
#masthead .ah-mega-cap { position: relative; min-height: 64px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-radius: 12px; }
#masthead .ah-mega-cap p { position: absolute; inset: 0; margin: 0 !important; padding: 12px 14px; font-size: 14px; line-height: 1.45; color: var(--ah-ink); opacity: 0; transition: opacity .3s; }
#masthead .ah-mega-cap p strong { display: block; font-weight: 600; }
#masthead .ah-mega-bereiche:has(.ah-mega-list a:not(.ah-p1):hover) .ah-prev-1, #masthead .ah-mega-bereiche:has(.ah-mega-list a:not(.ah-p1):hover) .ah-cap-1 { opacity: 0; }
#masthead .ah-mega-bereiche:has(.ah-p1:hover) .ah-prev-1, #masthead .ah-mega-bereiche:has(.ah-p1:focus-visible) .ah-prev-1 { opacity: 1; transform: none; }
#masthead .ah-mega-bereiche:has(.ah-p1:hover) .ah-cap-1, #masthead .ah-mega-bereiche:has(.ah-p1:focus-visible) .ah-cap-1 { opacity: 1; }
#masthead .ah-mega-bereiche:has(.ah-p2:hover) .ah-prev-2, #masthead .ah-mega-bereiche:has(.ah-p2:focus-visible) .ah-prev-2 { opacity: 1; transform: none; }
#masthead .ah-mega-bereiche:has(.ah-p2:hover) .ah-cap-2, #masthead .ah-mega-bereiche:has(.ah-p2:focus-visible) .ah-cap-2 { opacity: 1; }
#masthead .ah-mega-bereiche:has(.ah-p3:hover) .ah-prev-3, #masthead .ah-mega-bereiche:has(.ah-p3:focus-visible) .ah-prev-3 { opacity: 1; transform: none; }
#masthead .ah-mega-bereiche:has(.ah-p3:hover) .ah-cap-3, #masthead .ah-mega-bereiche:has(.ah-p3:focus-visible) .ah-cap-3 { opacity: 1; }
#masthead .ah-mega-bereiche:has(.ah-p4:hover) .ah-prev-4, #masthead .ah-mega-bereiche:has(.ah-p4:focus-visible) .ah-prev-4 { opacity: 1; transform: none; }
#masthead .ah-mega-bereiche:has(.ah-p4:hover) .ah-cap-4, #masthead .ah-mega-bereiche:has(.ah-p4:focus-visible) .ah-cap-4 { opacity: 1; }
#masthead .ah-mega-bereiche:has(.ah-p5:hover) .ah-prev-5, #masthead .ah-mega-bereiche:has(.ah-p5:focus-visible) .ah-prev-5 { opacity: 1; transform: none; }
#masthead .ah-mega-bereiche:has(.ah-p5:hover) .ah-cap-5, #masthead .ah-mega-bereiche:has(.ah-p5:focus-visible) .ah-cap-5 { opacity: 1; }
/* Systeme */
#masthead .ah-sys-col .uncont { padding: 18px 12px 12px; }
#masthead .ah-sys-col .ah-eyebrow { padding: 0 12px 10px; margin: 0 !important; }
#masthead .ah-mega-sys { display: block; }
#masthead .ah-mega-sys a { display: flex !important; justify-content: space-between !important; align-items: center; padding: 12px !important; border-radius: 12px; font: 600 18.5px/1.1 Onest, Arial, sans-serif !important; letter-spacing: -.02em !important; color: var(--ah-ink) !important; transition: background .2s; }
#masthead .ah-mega-sys a span { font: 500 13px 'Schibsted Grotesk', Arial, sans-serif !important; color: var(--ah-ink2) !important; }
#masthead .ah-mega-sys a:hover { background: var(--ah-wall); }
#masthead .ah-sys-note .uncont { background: var(--ah-wall); border-radius: 16px; padding: 22px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; margin: 0 !important; }
#masthead .ah-sys-note .uncoltable, #masthead .ah-sys-note .uncell { height: 100%; }
#masthead .ah-sys-note .btn-textual, #masthead .ah-sys-note .btn { font-weight: 600 !important; font-size: 14px !important; }
/* Cases: Abstand zum Button wie Vorlage (.stage-foot margin-top) */
.ah-stage-foot { margin-top: clamp(64px, 8vw, 120px) !important; }
/* Karussell-Pfeile als runde Buttons mit ← → wie Vorlage */
.ah-hero-show .owl-prev, .ah-hero-show .owl-next { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.ah-hero-show .owl-prev, .ah-hero-show .owl-next { width: 38px !important; height: 38px !important; }
.ah-hero-show .owl-carousel .owl-nav-container { border-radius: 50% !important; box-shadow: none !important; }
.ah-hero-show .owl-nav-container i { display: none !important; }
.ah-hero-show .owl-prev .owl-nav-container::before { content: "←"; font: 400 16px/1 'Schibsted Grotesk', Arial, sans-serif; }
.ah-hero-show .owl-next .owl-nav-container::before { content: "→"; font: 400 16px/1 'Schibsted Grotesk', Arial, sans-serif; }
/* Referenzen: Bereichs-Chips (Links auf die Portfolio-Kategorien) */
.ah-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ah-chips a { background: var(--ah-wall); color: var(--ah-ink); font: 500 14px/1 'Schibsted Grotesk', Arial, sans-serif; padding: 11px 16px; border-radius: 999px; transition: background .2s, color .2s; }
.ah-chips a:hover, .ah-chips a.is-on { background: var(--ah-ink); color: #fff; }
@media (max-width: 959px) { .ah-chips { justify-content: flex-start; margin-top: 18px; } }
/* =========================================================================
Mobilmenü (Uncode „Menu Mobile Content Block“) wie Vorlage (.drawer)
========================================================================= */
@media (max-width: 959px) {
#masthead .main-menu-container { background: var(--ah-wall) !important; }
#masthead .main-menu-container .menu-block-104071 { min-height: calc(100vh - 70px); min-height: calc(100dvh - 70px); }
}
.ah-drawer { display: flex; flex-direction: column; text-align: left; padding-top: 8px; }
.ah-drawer a.ah-dr-big { display: block; font: 600 33.6px/1.15 Onest, Arial, sans-serif; letter-spacing: -.02em; color: var(--ah-ink); padding: 6px 0; }
.ah-drawer a.ah-dr-big:active, .ah-drawer a.ah-dr-big:hover { color: var(--ah-pine); }
.ah-dr-sub { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.ah-dr-sub a { background: #fff; color: var(--ah-ink); border-radius: 999px; padding: 9px 14px; font: 500 14px/1.2 'Schibsted Grotesk', Arial, sans-serif; }
.ah-dr-sub a:active, .ah-dr-sub a:hover { background: var(--ah-ink); color: #fff; }
.ah-dr-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 28px; color: var(--ah-ink2); font-size: 15px; text-align: left; }
.ah-dr-foot a { color: var(--ah-ink2); }
#masthead .ah-dr-foot > *, #masthead .ah-drawer a { position: static !important; float: none !important; line-height: 1.5; }
#masthead .ah-drawer a.ah-dr-big { line-height: 1.15 !important; }
#masthead .ah-dr-foot > * { display: block !important; margin: 0 !important; padding: 0 !important; }
/* Header bündig mit dem Inhalt (Rows: 54 px Rand + 18 px halbe Spaltenlücke). Uncodes „Padding lateral“ greift nur bei Vollbreiten-Menü. */
@media (min-width: 960px) { #masthead .row-menu-inner { padding-left: 72px !important; padding-right: 72px !important; } }
/* Titel ausgewogen umbrechen wie Vorlage (text-wrap: balance) */
.fontsize-ah-section, .fontsize-ah-display { text-wrap: balance; }
/* Footer-Listen kompakter wie Vorlage */
.ah-foot-list li { margin: 0 0 8px !important; }
.ah-foot-list a, .ah-foot-adr { font-size: 15px !important; }
.ah-foot-adr { line-height: 1.7 !important; }
/* Hero-Pfeile am Bild ausrichten (Bezug: Wrapper statt Owl-Container) */
.ah-hero-show.owl-carousel-wrapper { position: relative; }
.ah-hero-show .owl-carousel { position: static !important; }
.ah-hero-show .owl-prev .owl-nav-container, .ah-hero-show .owl-next .owl-nav-container { position: static !important; top: auto !important; margin: 0 !important; transform: none !important; }
/* Header wie Vorlage: über dem Hero transparent, beim Scrollen Fläche mit Unschärfe (Uncode setzt dann .shrinked am Logo) */
@media (min-width: 960px) {
#masthead { position: relative; z-index: 60; }
#masthead .menu-container:has(.logo-container:not(.shrinked)) { background: transparent !important; backdrop-filter: none !important; }
#masthead .menu-container:has(.logo-container.shrinked) { background: color-mix(in srgb, #F5F4F0 82%, transparent) !important; backdrop-filter: saturate(1.3) blur(16px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ah-line) 70%, transparent); }
#masthead .logo-container .logo-image { height: 38px !important; line-height: 38px !important; }
.ah-hero { margin-top: -84px !important; }
.ah-hero > .row { padding-top: calc(84px + 54px) !important; }
}
/* Abschnitts-Einleitungen wie Vorlage (.sec-top > p: 17 px, max. 48 Zeichen) */
.ah-sec:not(.ah-hero) .ah-intro { font-size: 17px; max-width: 48ch; }
.ah-kontakt .ah-intro { font-size: 18px; max-width: 46ch; }
/* Footer-Listen: Zeilenhöhe wie Vorlage */
.ah-foot-list li, .ah-foot-list a { line-height: 1.55 !important; }
.ah-foot-list { display: flex !important; flex-direction: column; gap: 8px; }
.ah-foot-list li { margin: 0 !important; }
/* Kontrast-Schalter (Plugin wcag-stylesheet-switcher) wird doppelt ausgegeben; die ungestylte Kopie erzeugt einen Streifen unter dem Footer */
.wcag-contrast-button.right-position-inverse:has(~ .wcag-contrast-button.right-position) { display: none !important; }
/* Linkkarten KI / Barrierefrei: Abstand nach oben wie Vorlage (.more2 margin-top) */
.ah-more-row { margin-top: clamp(32px, 4vw, 56px) !important; }
/* =========================================================================
Footer dunkel (Bühne mit Animated Overlay wie die Cases)
========================================================================= */
.ah-footer { background: linear-gradient(180deg, #1B1B1A 0%, var(--ah-stage) 50%, #0C0C0C 100%) !important; border-top: 0 !important; }
.ah-footer .ah-foot-h { color: #8D8B85 !important; }
.ah-footer .ah-foot-claim, .ah-footer .ah-foot-adr { color: #B9B7B0 !important; }
.ah-footer .ah-foot-list a, .ah-footer .ah-foot-adr a { color: #FFFFFF !important; }
.ah-footer .ah-foot-list a:hover, .ah-footer .ah-foot-adr a:hover { color: #9DACE6 !important; }
.ah-footer .ah-legal-row { margin-top: clamp(40px, 5vw, 64px) !important; }
.ah-footer .ah-legal, .ah-footer .ah-legal a { color: #8D8B85 !important; }
.ah-footer .ah-legal a:hover { color: #fff !important; }
.ah-footer .ah-legal { border-top: 0 !important; padding-top: 0 !important; }
.ah-footer hr, .ah-stage hr { border-color: rgba(255, 255, 255, .12) !important; }
/* Referenzen: Pfeile (Uncode Carousel/Slider Nav) links neben dem Button */
.ah-rail-foot .uncont { display: flex; justify-content: flex-end; align-items: center; gap: 16px; flex-wrap: wrap; }
.ah-rail-foot .uncont > * { margin: 0 !important; }
@media (max-width: 959px) { .ah-rail-nav, .ah-rail-foot .uncode-owl-nav-out { display: none !important; } .ah-rail-foot .uncont { justify-content: flex-start; } }
/* Owl verschiebt beim Klicken den Fokus auf Karten außerhalb des Containers; overflow:clip verhindert, dass die Seite seitlich mitwandert */
.box-wrapper { overflow: clip !important; }
/* Pfeile wie Vorlage: helle Kreise mit ← →, ohne Zähler */
.ah-rail-nav .uncode-nav-counter, .ah-rail-nav .uncode-nav-dots { display: none !important; }
.ah-rail-nav .uncode-nav-prev, .ah-rail-nav .uncode-nav-next { margin: 0 4px !important; }
.ah-rail-nav .uncode-nav-container { width: 48px !important; height: 48px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--ah-wall) !important; color: var(--ah-ink) !important; box-shadow: none !important; display: grid !important; place-items: center; transition: background .2s, color .2s; }
.ah-rail-nav .uncode-nav-container:hover { background: var(--ah-ink) !important; color: #fff !important; }
.ah-rail-nav .uncode-nav-container i { display: none !important; }
.ah-rail-nav .uncode-nav-prev .uncode-nav-container > span::before { content: "←"; font: 400 18px/1 'Schibsted Grotesk', Arial, sans-serif; }
.ah-rail-nav .uncode-nav-next .uncode-nav-container > span::before { content: "→"; font: 400 18px/1 'Schibsted Grotesk', Arial, sans-serif; }
.ah-rail-nav .uncode-nav-disabled .uncode-nav-container { opacity: .45; cursor: default; }
/* Mega-Menü: Spaltenabstand 12 px wie Vorlage (.mega-in gap), Row-Gap in Uncode = 0 */
#masthead .ah-mega-prev .uncont, #masthead .ah-sys-note .uncont { margin-left: 12px !important; }
#masthead .ah-sys-col + .ah-sys-col .uncont { margin-left: 12px; }
/* Schmale Desktops (960–1199 px): Header-Ränder kleiner, sonst ragt der CTA-Button über den Rand */
@media (min-width: 960px) and (max-width: 1199px) { #masthead .row-menu-inner { padding-left: 36px !important; padding-right: 36px !important; } }
/* Abstand Abschnittskopf → Inhalt wie Vorlage (.sec-top margin-bottom 48 px, .work-head 36 px) */
.ah-after-head { margin-top: 48px !important; }
.ah-after-head-s { margin-top: 36px !important; }
.ah-systems { margin-bottom: 0 !important; }
/* Mobilmenü: Hauptpunkte als klickbare Zeilen mit Pfeil (wie die Bereichsliste im Hero), Pillen-Hover weiß */
.ah-drawer a.ah-dr-big { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0 !important; border-bottom: 1px solid var(--ah-line); }
.ah-drawer a.ah-dr-big::after { content: "→"; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 400 20px/1 'Schibsted Grotesk', Arial, sans-serif; background: #fff; color: var(--ah-ink); transition: background .2s, color .2s; }
.ah-drawer a.ah-dr-big:hover, .ah-drawer a.ah-dr-big:active, .ah-drawer a.ah-dr-big:focus-visible { color: var(--ah-ink) !important; }
.ah-drawer a.ah-dr-big:hover::after, .ah-drawer a.ah-dr-big:active::after { background: var(--ah-ink); color: #fff; }
.ah-dr-sub { margin: 14px 0 18px !important; }
#masthead .ah-dr-sub a:hover, #masthead .ah-dr-sub a:active, #masthead .ah-dr-sub a:focus-visible { background: var(--ah-ink) !important; color: #fff !important; }
/* Cases mobil: AH!-Karten kompakter */
@media (max-width: 959px) {
.ah-aha { padding: 14px 16px 16px 14px; column-gap: 12px; border-radius: 16px; }
.ah-aha .ah-mark { width: 34px; }
.ah-aha p { font-size: 15px !important; padding-top: 10px; line-height: 1.4; }
}
/* WordPress setzt
um die Links im Mobilmenü: für gleichmäßige Abstände neutralisieren */ .ah-drawer > p { display: contents; } /* ========================================================================= Unterseiten (Vorlage pages/e-commerce.src.html) ========================================================================= */ /* Brotkrümel (Rank Math) */ .ah-crumbs .rank-math-breadcrumb p, .ah-crumbs nav { margin: 0; font-size: 13px; color: var(--ah-ink2); } .ah-crumbs a { color: var(--ah-ink2); } .ah-crumbs a:hover { color: var(--ah-ink); } .ah-crumbs .separator { margin: 0 8px; opacity: .6; } .ah-crumbs .last { color: var(--ah-ink); } /* Hero */ .ah-p-hero .ah-display { margin-top: 18px; } .ah-p-hero .ah-display h1, .ah-p-hero h1.fontsize-ah-display { font-size: calc(clamp(46px, 6vw, 104px) * .87) !important; line-height: .95 !important; } .ah-p-hero-tx .ah-intro { margin-top: 26px !important; max-width: 46ch; } .ah-p-hero-tx .btn-container { margin-top: 32px !important; margin-right: 10px !important; display: inline-block; } .ah-p-hero-img .uncode-single-media-wrapper { box-shadow: 0 40px 80px -45px rgba(20, 20, 20, .35); } .ah-p-hero .ah-crumbs { margin-top: 0 !important; } /* Fließtext */ .ah-prose p { margin: 0 0 18px !important; color: var(--ah-ink2); max-width: 62ch; } .ah-prose p.ah-lead { color: var(--ah-ink); } .ah-prose p:last-child { margin-bottom: 0 !important; } .ah-note { font-size: 15px; color: var(--ah-ink2); margin-top: 24px !important; max-width: 62ch; } /* Leistungs-/Themenkarten: abgesetzte, abgerundete Flächen (Weiß, leicht transparent) */ .ah-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ah-svc-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ah-svc-i { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7); border-radius: 20px; padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 8px; transition: background .3s, transform .4s var(--ah-ease), box-shadow .4s; } .ah-svc-i:hover { background: rgba(255, 255, 255, .85); transform: translateY(-3px); box-shadow: 0 30px 60px -40px rgba(20, 20, 20, .3); } .ah-svc-i .fa { font-size: 22px; color: var(--ah-pine); width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; margin-bottom: 10px; } .ah-svc-i h3 { margin: 0 !important; font: 600 20.3px/1.15 Onest, Arial, sans-serif !important; letter-spacing: -.02em; color: var(--ah-ink); } .ah-svc-i p { margin: 0 !important; color: var(--ah-ink2); font-size: 15px; } .ah-svc-link { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 14px; color: var(--ah-ink); } .ah-svc-link:hover { color: var(--ah-pine); } .ah-work .ah-svc-i { background: var(--ah-wall); border-color: transparent; } @media (max-width: 1199px) { .ah-svc-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 959px) { .ah-svc, .ah-svc-4 { grid-template-columns: 1fr; gap: 12px; } } /* Zahlenband */ .ah-zahlen-row { margin-top: 28px !important; } .ah-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ah-zahl { display: flex; flex-direction: column; gap: 10px; padding: 28px 0 0; border-top: 1px solid var(--ah-ink); } .ah-zahl-n { font: 400 calc(clamp(60px, 7vw, 120px) * .87)/.9 'DM Serif Display', Georgia, serif; letter-spacing: -.02em; color: var(--ah-ink); } .ah-zahl:last-child .ah-zahl-n::after { content: " ★"; font-size: .4em; color: var(--ah-pine); vertical-align: .55em; letter-spacing: 0; } .ah-zahl-t { color: var(--ah-ink2); max-width: 26ch; } @media (max-width: 959px) { .ah-zahlen { grid-template-columns: 1fr; gap: 28px; } } /* Punkte-Liste (optional nummeriert) */ .ah-points { display: flex; flex-direction: column; counter-reset: ahp; margin-top: 8px; } .ah-points > div { padding: 24px 0; border-top: 1px solid var(--ah-line); display: grid; gap: 8px; } .ah-points > div:last-child { border-bottom: 1px solid var(--ah-line); } .ah-points h3 { margin: 0 !important; font: 600 clamp(19.5px, 1.7vw, 23px)/1.2 Onest, Arial, sans-serif !important; letter-spacing: -.02em; color: var(--ah-ink); } .ah-points p { margin: 0 !important; color: var(--ah-ink2); max-width: 60ch; } .ah-points-num > div { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; } .ah-points-num > div::before { counter-increment: ahp; content: counter(ahp, decimal-leading-zero); grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 400 18px/1 'DM Serif Display', Georgia, serif; color: var(--ah-ink); } /* Titel bleibt beim Scrollen stehen (Desktop) */ @media (min-width: 960px) { .ah-sticky .uncont { position: sticky; top: 120px; } .ah-sticky .uncell, .ah-sticky .uncoltable { height: 100%; } } /* Erfahrung auf der dunklen Bühne */ .ah-quote, .ah-quote p { line-height: 1.12 !important; text-wrap: balance; } .ah-quote em { font-style: normal; color: #9DACE6; } .ah-tl { list-style: none; margin: 0 !important; padding: 0 !important; border-top: 1px solid rgba(255, 255, 255, .12); } .ah-tl li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 20px 0 !important; margin: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .12); } .ah-tl li::before { content: none !important; } .ah-tl .y { font: 400 26px/1 'DM Serif Display', Georgia, serif; color: #fff; } .ah-tl b { display: block; font-weight: 600; color: #fff; } .ah-tl span:not(.y) { color: #B9B7B0; font-size: 15px; } .ah-stage-p .ah-intro-dark { margin-top: 24px !important; } /* FAQ (Uncode-Akkordeon) wie Vorlage */ .ah-faq { border-top: 1px solid var(--ah-ink); } .ah-faq .panel { border: 0 !important; border-bottom: 1px solid var(--ah-line) !important; background: transparent !important; border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; } .ah-faq .panel-heading { padding: 0 !important; background: transparent !important; } .ah-faq .panel-title, .ah-faq .panel-title > a { padding: 22px 48px 22px 0 !important; color: var(--ah-ink) !important; line-height: 1.25 !important; letter-spacing: -.02em; position: relative; } .ah-faq .panel-title > a:hover { color: var(--ah-pine) !important; } .ah-faq .panel-body { padding: 0 56px 26px 0 !important; color: var(--ah-ink2); max-width: 70ch; border: 0 !important; } .ah-faq .panel-body p { margin: 0 !important; } /* Abschluss-Band */ .ah-steps { list-style: none; margin: clamp(32px, 4vw, 52px) 0 0 !important; padding: 0 !important; counter-reset: st; border-top: 1px solid var(--ah-line); } .ah-steps li { counter-increment: st; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 20px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--ah-line); } .ah-steps li::before { content: counter(st) !important; grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; background: var(--ah-wall); display: grid !important; place-items: center; font: 400 20px/1 'DM Serif Display', Georgia, serif; color: var(--ah-ink); position: static !important; } .ah-steps b { font: 600 20.3px/1.2 Onest, Arial, sans-serif; letter-spacing: -.02em; color: var(--ah-ink); } .ah-steps span { color: var(--ah-ink2); font-size: 15px; } .ah-direct { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ah-direct a { display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 16px; padding: 16px 18px; color: var(--ah-ink); transition: background .25s, color .25s; } .ah-direct a .fa { font-size: 20px; color: var(--ah-pine); } .ah-direct a small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ah-ink2); font-weight: 600; } .ah-direct a b { font-weight: 600; font-size: 15px; word-break: break-word; } .ah-direct a:hover { background: var(--ah-pine); color: #fff; } .ah-direct a:hover .fa, .ah-direct a:hover small { color: #fff; } .ah-or { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ah-ink2); margin: 18px 0 10px; } .ah-or::before, .ah-or::after { content: ""; flex: 1; border-top: 1px solid var(--ah-line); } @media (max-width: 569px) { .ah-direct { grid-template-columns: 1fr; } } .ah-faq .panel-title, .ah-faq .panel-title > a, .ah-faq .panel-title > a span { font: 600 19.5px/1.25 Onest, Arial, sans-serif !important; letter-spacing: -.02em !important; text-transform: none !important; } .ah-direct a b { font-size: 14px; word-break: normal; white-space: nowrap; } @media (max-width: 959px) { .ah-faq .panel-body { padding-right: 0 !important; } } /* Projektkarten (Referenzen mit Kurzgeschichte) */ .ah-proj-row-2 { margin-top: clamp(32px, 4vw, 56px) !important; } .ah-proj-foot { margin-top: clamp(32px, 4vw, 48px) !important; } .ah-proj-img .uncode-single-media-wrapper { border-radius: 18px; overflow: hidden; } .ah-proj-img img { transition: transform .9s var(--ah-ease); } .ah-proj-img:hover img { transform: scale(1.04); } .ah-proj-meta { margin: 18px 0 6px !important; font: 600 11px/1.3 'Schibsted Grotesk', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ah-pine); } .ah-proj-h { margin: 0 0 10px !important; font: 600 20.3px/1.2 Onest, Arial, sans-serif !important; letter-spacing: -.02em; color: var(--ah-ink); } .ah-proj-tx { margin: 0 0 12px !important; font-size: 15px; color: var(--ah-ink2); } @media (max-width: 959px) { .ah-proj-row .wpb_column + .wpb_column { margin-top: 40px; } } /* Google-Bewertung */ .ah-rating { display: flex; align-items: baseline; gap: 18px; margin: 14px 0 0 !important; } .ah-rating-n { font: 400 calc(clamp(60px, 9vw, 150px) * .87)/.9 'DM Serif Display', Georgia, serif; color: var(--ah-ink); letter-spacing: -.02em; } .ah-stars { font-size: clamp(22px, 2vw, 30px); letter-spacing: 4px; color: var(--ah-pine); } .ah-bewertungen .btn-container { margin-top: 24px !important; display: inline-block; } /* Unterseiten-Hero: Abstände wie Vorlage (Uncode setzt Element-Abstände in .uncont zurück) */ .ah-sec.ah-p-hero .ah-p-hero-tx .uncont > .btn-container { margin-top: 32px !important; margin-right: 6px !important; } .ah-sec.ah-p-hero .ah-proof { margin: 0 !important; padding-top: clamp(40px, 5vw, 72px); } .ah-sec .ah-bewertungen .uncont > .btn-container, .ah-sec.ah-bewertungen .uncont > .btn-container { margin-top: 24px !important; } /* Kosten als helles Band (trennt von „So läuft Ihr Projekt ab“), Verlauf wie Referenzen */ .ah-kosten .ah-points > div { border-color: var(--ah-line); } /* Nummern-Kreise: Akzentfarbe, weiße Ziffer, serifenlos */ .ah-points-num > div::before, .ah-steps li::before { background: var(--ah-pine) !important; color: #fff !important; font: 600 15px/1 Onest, Arial, sans-serif !important; letter-spacing: 0; } /* Projektkarten als abgerundete Boxen (Uncode-Spaltenhintergrund), Inhalt füllt die Höhe */ .ah-proj-card .uncont { display: flex; flex-direction: column; height: 100%; } .ah-proj-card .uncoltable, .ah-proj-card .uncell { height: 100%; } .ah-proj-card .uncode_text_column:last-child { margin-top: 0 !important; flex: 1; display: flex; flex-direction: column; } .ah-proj-card .ah-svc-link { margin-top: auto; } .ah-proj-card .ah-proj-meta { margin-top: 20px !important; } .ah-proj-card .uncont > .uncode_text_column { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 0 !important; } .ah-proj-card .uncont > .uncode_text_column > .ah-svc-link { margin-top: auto !important; } /* Link „Projekt ansehen“ immer an der Unterkante der Box (Uncode-Zelle ist table-cell, daher absolut statt Flex) */ .ah-proj-card .uncell { position: relative; } .ah-proj-card .uncont > .uncode_text_column { padding-bottom: 34px; } .ah-proj-card .uncont > .uncode_text_column > .ah-svc-link { position: absolute; left: 36px; bottom: 36px; margin: 0 !important; padding: 0; } .ah-proj-card .uncont, .ah-proj-card .uncont > .uncode_text_column { position: static !important; } .ah-proj-card .ah-svc-link { position: absolute !important; left: 18px; bottom: 18px; margin: 0 !important; padding: 0 !important; } .ah-proj-card .uncode_text_column p:has(> .ah-svc-link) { margin: 0 !important; } /* Projektbox: 18 px Innenabstand, Rundung konzentrisch (Box 36 px = Bild 18 px + Abstand 18 px), Text mit etwas Luft */ .ah-proj-card .uncell { border-radius: 36px !important; } .ah-proj-card .uncont > .uncode_text_column { padding: 0 6px 34px; } .ah-proj-card .ah-svc-link { left: 24px !important; bottom: 22px !important; } .ah-proj-card .uncell { padding: 18px !important; } .ah-kontakt .ah-cinfo { margin-top: 0 !important; padding-top: 40px; } /* ---------- Bausteine: Hinweis-Box, Rechenweg (Kette), Gegenüberstellung, Pillen, Angebotsbox ---------- */ .ah-test-label { margin: 0 !important; color: #fff; font: 600 13px/1 'Schibsted Grotesk', Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .ah-svc-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* B: Hinweis-Box */ .ah-hint-row { margin-top: 16px !important; } .ah-hint { display: flex; gap: 16px; align-items: center; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7); border-radius: 20px; padding: 18px 24px; } .ah-hint .fa { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ah-pine); color: #fff; display: grid; place-items: center; font-size: 18px; } .ah-hint p { margin: 0 !important; color: var(--ah-ink2); font-size: 15px; } /* C: Rechenweg */ .ah-chain { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 16px; } .ah-chain-i { position: relative; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7); border-radius: 20px; padding: 24px 22px; } .ah-chain-i:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 34px; width: 24px; height: 24px; border-radius: 50%; background: var(--ah-wall); display: grid; place-items: center; font-size: 13px; color: var(--ah-ink2); z-index: 2; } .ah-chain-n { width: 40px; height: 40px; border-radius: 50%; background: var(--ah-pine); color: #fff; display: grid; place-items: center; font: 600 15px/1 Onest, Arial, sans-serif; margin-bottom: 14px; } .ah-chain-i h3 { margin: 0 0 8px !important; font: 600 18.5px/1.2 Onest, Arial, sans-serif !important; letter-spacing: -.02em; color: var(--ah-ink); } .ah-chain-i p { margin: 0 !important; font-size: 14.5px; color: var(--ah-ink2); } .ah-chain-end { background: var(--ah-ink); border-color: var(--ah-ink); } .ah-chain-end h3 { color: #fff !important; } .ah-chain-end p { color: #B9B7B0 !important; } .ah-chain-end .ah-chain-n { background: #fff; color: var(--ah-ink); font-size: 20px; } /* D: Gegenüberstellung */ .ah-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ah-cmp-box { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .7); border-radius: 24px; padding: 32px; } .ah-cmp-ic { width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--ah-pine); display: grid; place-items: center; font-size: 22px; margin-bottom: 16px; } .ah-cmp-box h3 { margin: 0 0 16px !important; font: 600 24px/1.15 Onest, Arial, sans-serif !important; letter-spacing: -.02em; color: var(--ah-ink); } .ah-cmp-box ul { list-style: none; margin: 0 !important; padding: 0 !important; } .ah-cmp-box li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0 !important; margin: 0 !important; border-top: 1px solid rgba(20, 20, 20, .08); color: var(--ah-ink2); } .ah-cmp-box li::before { content: none !important; } .ah-cmp-box li .fa { color: var(--ah-pine); font-size: 13px; } .ah-cmp-dark { background: var(--ah-ink); border-color: var(--ah-ink); } .ah-cmp-dark h3 { color: #fff !important; } .ah-cmp-dark li { color: #B9B7B0; border-color: rgba(255, 255, 255, .12); } .ah-cmp-dark li .fa { color: #9DACE6; } .ah-cmp-dark .ah-cmp-ic { background: rgba(255, 255, 255, .1); color: #fff; } .ah-pills-row { margin-top: 28px !important; } .ah-chips-label { margin: 0 0 12px !important; font: 600 12px/1 'Schibsted Grotesk', Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ah-ink2); } .ah-pills { display: flex; flex-wrap: wrap; gap: 8px; } .ah-pills span { background: #fff; border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--ah-ink); } /* E: Große Antwort + Angebotsbox */ .ah-big-answer { margin: 14px 0 0 !important; font: 500 clamp(24px, 2.4vw, 38px)/1.3 Onest, Arial, sans-serif; letter-spacing: -.02em; color: var(--ah-ink); } .ah-offer { background: var(--ah-ink); border-radius: 24px; padding: 28px; } .ah-offer p { margin: 0 !important; color: #B9B7B0; font-size: 15px; } .ah-offer .ah-offer-h { margin-bottom: 10px !important; font: 600 22px/1.2 Onest, Arial, sans-serif; color: #fff; letter-spacing: -.02em; } .ah-offer-col .uncont > .btn-container { margin-top: 16px !important; } @media (max-width: 959px) { .ah-chain, .ah-cmp, .ah-svc-2 { grid-template-columns: 1fr; } .ah-chain-i:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -14px; transform: translateX(-50%); } } .ah-cmp-box .fa.ah-cmp-ic { display: grid !important; place-items: center; line-height: 1; } /* Handgezeichneter Pfeil (Lottie) über der Rechenweg-Kette: Spitze landet auf der Ergebnis-Karte */ .ah-pfeil-row { margin-top: 16px !important; } .ah-pfeil { margin: 0 140px 0 auto !important; max-width: 640px; pointer-events: none; } .ah-chain-row { margin-top: 0 !important; } @media (max-width: 959px) { .ah-chain-row { margin-top: 48px !important; } } @media (min-width: 960px) and (max-width: 1199px) { .ah-pfeil { margin-right: 110px !important; max-width: 480px; } } @media (min-width: 960px) { .ah-pfeil { margin-bottom: -14px !important; } .ah-pfeil-row { margin-top: -10px !important; } } /* Pfeil nach Vorlage (796×148, Spitze an der rechten Unterkante) */ @media (min-width: 960px) { .ah-pfeil { max-width: 700px !important; margin: 0 150px 6px auto !important; } } @media (min-width: 960px) and (max-width: 1199px) { .ah-pfeil { max-width: 520px !important; margin-right: 110px !important; } } /* Google-Bewertung: fünf Sterne in Akzentfarbe neben der Zahl */ .ah-zahl:last-child .ah-zahl-n::after { content: "★★★★★"; font-family: Arial, sans-serif; font-size: .28em; letter-spacing: .12em; color: var(--ah-pine); vertical-align: .9em; margin-left: .35em; } /* Gegenüberstellung auf weißem Band: helle Box in Wandfarbe, Abstand zu den Karten darüber */ .ah-vergleich-row { margin-top: clamp(48px, 5vw, 72px) !important; } .ah-vergleich-row .ah-eyebrow, .ah-vergleich-row h3.ah-eyebrow { margin-bottom: 18px !important; } .ah-work .ah-cmp-box:not(.ah-cmp-dark) { background: var(--ah-wall); border-color: transparent; } .ah-work .ah-cmp-box:not(.ah-cmp-dark) li { border-color: rgba(20, 20, 20, .1); } .ah-zahlen-lead { margin: 18px 0 0 !important; } .ah-zahlen-lead + * , .ah-bewertungen .ah-zahlen-row { margin-top: 40px !important; } /* Welliger Pfeil (Lottie) unter der Einleitung im Ablauf, zeigt auf die Schritte */ .ah-welle { margin: 28px 0 0 18px !important; pointer-events: none; } @media (max-width: 959px) { .ah-welle { display: none !important; } } /* Welliger Pfeil zwischen den Spalten, über die ganze Höhe der Schritte */ .ah-welle-col .uncont, .ah-welle-col .uncell, .ah-welle-col .uncoltable { height: 100%; } .ah-welle-col .ah-welle { margin: 0 auto !important; height: 100%; display: flex; justify-content: center; } .ah-welle-col .uncode-lottie-wrap, .ah-welle-col lottie-player { height: 100% !important; max-width: 90px !important; width: 90px !important; } /* Kontaktseite: Bewertungszeile unter den Kontaktdaten */ .ah-k-rating { margin: 28px 0 0 !important; font-size: 15px; color: var(--ah-ink2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ah-k-rating .ah-stars { font-size: 18px; letter-spacing: 2px; } .ah-kontakt-seite .ah-hello { margin-top: 8px; } /* Referenzen-Übersicht: Uncode-Filter als Chips wie auf der Startseite (weiß auf Wandfarbe) */ .ah-port .isotope-filters { margin-bottom: 36px !important; } .ah-port .isotope-filters .menu-horizontal { padding: 0 !important; } .ah-port .isotope-filters ul.menu-smart { display: flex !important; flex-wrap: wrap; gap: 8px; } .ah-port .isotope-filters ul.menu-smart > li { margin: 0 !important; padding: 0 !important; float: none !important; } .ah-port .isotope-filters ul.menu-smart > li > span { display: block; padding: 0 !important; } .ah-port .isotope-filters a.grid-nav-link { display: block; background: #fff; color: var(--ah-ink) !important; font: 500 14px/1 'Schibsted Grotesk', Arial, sans-serif !important; letter-spacing: 0 !important; padding: 11px 16px !important; border-radius: 999px; transition: background .2s, color .2s; } .ah-port .isotope-filters a.grid-nav-link:hover, .ah-port .isotope-filters a.grid-nav-link.active { background: var(--ah-ink); color: #fff !important; } .ah-port .isotope-filters a.grid-nav-link::after, .ah-port .isotope-filters a.grid-nav-link::before { display: none !important; } /* Rechtstexte (Impressum, Datenschutzerklärung) */ .ah-legal { max-width: 72ch; color: var(--ah-ink2); } .ah-legal p, .ah-legal li { font-size: 16px; line-height: 1.7; } .ah-legal p { margin: 0 0 16px !important; } .ah-legal h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; color: var(--ah-ink); margin: 56px 0 18px !important; scroll-margin-top: 110px; } .ah-legal h2:first-child { margin-top: 0 !important; } .ah-legal h3 { font-size: 18px; font-weight: 600; color: var(--ah-ink); margin: 32px 0 10px !important; } .ah-legal strong { color: var(--ah-ink); font-weight: 600; } .ah-legal a { color: var(--ah-ink); border-bottom: 1px solid var(--ah-line); } .ah-legal a:hover { color: var(--ah-pine); border-color: var(--ah-pine); } .ah-legal-adr p { font-size: 18px; color: var(--ah-ink); } .ah-legal-toc { display: flex; flex-direction: column; gap: 4px; padding: 24px; border-radius: 20px; background: rgba(255,255,255,.55); } .ah-legal-toc .ah-k { margin: 0 0 10px !important; font: 600 12px/1 'Schibsted Grotesk', Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ah-ink2); } .ah-legal-toc a { color: var(--ah-ink); font-size: 15px; padding: 6px 0; } .ah-legal-toc a:hover { color: var(--ah-pine); } .ah-legal-h1 { hyphens: manual; overflow-wrap: break-word; } .uncode_text_column.ah-legal { display: block !important; } .ah-legal h3 { font-family: 'Schibsted Grotesk', Arial, sans-serif !important; letter-spacing: 0 !important; } .ah-legal-toc p { margin: 0 !important; } .ah-legal-toc p a { display: block; } /* Blog: Beitragskopf und Beitragstext */ .ah-post-meta-z { margin: 0 0 18px !important; display: flex; flex-wrap: wrap; gap: 6px 10px; font: 600 12px/1.4 'Schibsted Grotesk', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ah-ink2); } .ah-post-meta-z a { color: var(--ah-pine); } .ah-post-h1 { text-wrap: balance; } .single-post .post-content { padding-bottom: 40px; } .single-post .post-content p, .single-post .post-content li { font-size: 18px; line-height: 1.75; color: var(--ah-ink2); } .single-post .post-content p { margin: 0 0 20px; } .single-post .post-content > .row-container:first-child p:first-of-type { font-size: 21px; line-height: 1.6; color: var(--ah-ink); } .single-post .post-content h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; color: var(--ah-ink); margin: 56px 0 18px; text-wrap: balance; } .single-post .post-content h3 { font-family: 'Schibsted Grotesk', Arial, sans-serif; font-size: 20px; font-weight: 600; color: var(--ah-ink); margin: 36px 0 12px; letter-spacing: 0; text-transform: none; } .single-post .post-content ul, .single-post .post-content ol { margin: 0 0 24px; padding-left: 1.2em; } .single-post .post-content li { margin-bottom: 8px; } .single-post .post-content a { color: var(--ah-ink); border-bottom: 1px solid var(--ah-pine); } .single-post .post-content a:hover { color: var(--ah-pine); } .single-post .post-content img { border-radius: 20px; } .single-post .post-content blockquote { border-left: 3px solid var(--ah-pine); padding: 4px 0 4px 22px; margin: 32px 0; font-size: 20px; color: var(--ah-ink); } .single-post .post-content a:has(img) { border-bottom: 0; } @media (max-width: 959px) { .single-post .post-content p, .single-post .post-content li { font-size: 17px; } .single-post .post-content > .row-container:first-child p:first-of-type { font-size: 19px; } } /* Referenz-Detail (Muster ParaStruct): Kernaussage, Eckdaten-Box, Projekttext */ .ah-ref-lead { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3; color: var(--ah-ink); margin: 0 !important; max-width: 34ch; } .ah-facts-row { margin-top: 40px !important; } .ah-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 28px; padding: 26px 30px; border-radius: 20px; background: rgba(255, 255, 255, .55); } .ah-facts .ah-k { margin: 0 0 8px !important; font: 600 12px/1 'Schibsted Grotesk', Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ah-ink2); } .ah-facts span, .ah-facts a { font-size: 16px; font-weight: 500; color: var(--ah-ink); } .ah-facts a { border-bottom: 1px solid var(--ah-pine); } .ah-ref-hero { margin-top: 28px !important; } .ah-ref-text h3 { font-family: 'Schibsted Grotesk', Arial, sans-serif; font-size: 18px; font-weight: 600; color: var(--ah-ink); margin: 30px 0 10px !important; letter-spacing: 0; text-transform: none; } @media (max-width: 959px) { .ah-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px; } } /* Referenz-Detail: Einblicke (Uncode-Galerie) – gleich hohe Karten, lange Screenshots scrollen beim Hover, Klick öffnet die Lightbox */ .ah-einblicke .t-entry-visual { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(20,20,20,.04); transition: box-shadow .4s, transform .4s var(--ah-ease); } .ah-einblicke .tmb:hover .t-entry-visual { transform: translateY(-3px); box-shadow: 0 30px 60px -35px rgba(20,20,20,.35); } .ah-einblicke .t-entry-visual-cont { position: relative; aspect-ratio: 4 / 5; overflow: hidden; } .ah-einblicke .t-entry-visual-cont .dummy { display: none !important; } .ah-einblicke .t-entry-visual-cont img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 0; transition: object-position 6s ease-in-out; } .ah-einblicke .tmb:hover .t-entry-visual-cont img { object-position: 50% 100%; } .ah-einblicke .t-entry-visual-overlay, .ah-einblicke .t-overlay-wrap { background: transparent !important; } .ah-einblicke-hint { margin-top: 18px !important; } @media (hover: none) { .ah-einblicke-hint { display: none; } } @media (max-width: 959px) { .ah-einblicke .cssgrid-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } .ah-einblicke .t-entry-visual { border-radius: 14px; } } /* Einblicke: Uncode setzt eigene transition auf Bilder (transform/filter/opacity) – object-position muss sie überstimmen; Karten 1:1, damit auch weniger hohe Screenshots sichtbar scrollen */ .ah-einblicke .t-entry-visual-cont { aspect-ratio: 1 / 1 !important; } .ah-einblicke .tmb .t-entry-visual-cont img { transition: object-position 5s ease-in-out !important; transform: none !important; } .ah-einblicke .tmb:hover .t-entry-visual-cont img { object-position: 50% 100% !important; transition-duration: 5s !important; } /* Einblicke: bewusst kleinerer Radius (8px, Handy 6px) – Screenshots wirken so eher wie Seiten als wie Fotos (mit User abgestimmt 20.10.2026) */ .ah-einblicke .t-entry-visual, .ah-einblicke .t-entry-visual-cont, .ah-einblicke .tmb, .ah-einblicke .t-inside { border-radius: 8px !important; } @media (max-width: 959px) { .ah-einblicke .t-entry-visual, .ah-einblicke .t-entry-visual-cont, .ah-einblicke .tmb, .ah-einblicke .t-inside { border-radius: 6px !important; } } /* Einblicke-Hinweis: klein, einzeilig, mehr Abstand nach oben */ .ah-einblicke-hint { margin-top: 32px !important; font-size: 13px !important; line-height: 1.4 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none !important; } .ah-ref-einblicke p.ah-einblicke-hint { padding-top: 28px !important; } /* Referenz-Kopf (Uncode Flex): Titel darf umbrechen, Kernaussage folgt bei Platzmangel darunter */ .ah-ref-kopf .ah-ref-titel { min-width: 0; } .ah-ref-kopf .ah-ref-titel .ah-display { overflow-wrap: break-word; } .ah-ref-kopf .ah-ref-lead { max-width: none; } /* Uncode-Flex innen setzt width:100% – Titelbox soll nur so breit wie der Titel sein */ .ah-ref-kopf .ah-ref-titel > .uncode-flex-int, .ah-ref-kopf .ah-ref-lead-box > .uncode-flex-int { width: auto !important; } .ah-ref-kopf > .uncode-flex-int { width: 100% !important; flex: 1 1 100%; margin: 0 !important; } .ah-ref-kopf .ah-ref-titel > .uncode-flex-int, .ah-ref-kopf .ah-ref-lead-box > .uncode-flex-int { margin: 0 !important; } .ah-ref-kopf .ah-ref-titel { width: auto !important; flex: 0 1 auto !important; } .ah-ref-kopf .ah-ref-lead-box { width: auto !important; flex: 0 1 460px !important; } /* Footer-Rechtszeile heißt ebenfalls .ah-legal – Rechtstext-Linkstil dort nicht anwenden */ .ah-footer p.ah-legal a { border-bottom: 0 !important; } /* Referenz-Kopf: Titel auf Desktop höchstens so breit, dass die Kernaussage (460px + Abstand) daneben Platz hat – lange Namen brechen um */ @media (min-width: 1200px) { .ah-ref-kopf .ah-ref-titel { max-width: calc(100% - 524px) !important; } .ah-ref-kopf .ah-ref-titel .ah-display { text-wrap: balance; } } /* unter 1200px: Titel volle Breite, Kernaussage darunter (lange Einzelwörter wie „Gebäudereinigung“ passen sonst nicht) */ @media (max-width: 1199px) { .ah-ref-kopf .ah-ref-titel { flex-basis: 100% !important; } } .ah-legal h4 { font-family: 'Schibsted Grotesk', Arial, sans-serif !important; font-size: 16px; font-weight: 600; color: var(--ah-ink); margin: 22px 0 8px !important; letter-spacing: 0 !important; text-transform: none !important; } /* Rechtstexte: keine Trennlinie über den Textspalten (Regel für die Fußzeile oben greift sonst mit) */ .ah-legal-sec .ah-legal { display: block; border-top: 0; padding-top: 0; } .ah-legal-angaben h3 { margin: 36px 0 10px !important; } .ah-legal-angaben h3:first-child { margin-top: 0 !important; }