/* ========================================================================== AgenturWP – core.css (wird auf JEDER Seite geladen, bewusst schlank) Inhalt 01 Tokens (Farben, Schriften, Groessen, Radien) 02 Basis & Enfold-Farbsets 03 Layout: Container & Sektionen 04 Typografie 05 Header & Navigation 06 Buttons 07 Kleine Bausteine (Kicker, Badge, Checks, Pills) 08 Titelleiste, Footer, Socket 09 Barrierefreiheit & Motion Specificity: Enfold nutzt . Alle Overrides beginnen mit #top, damit sie Enfolds Farbset-Regeln (.main_color ...) ohne !important schlagen. ========================================================================== */ /* 01 TOKENS ---------------------------------------------------------------- */ :root { /* Farben (hell) */ --agwp-bg: #F2F4F6; --agwp-bg2: #FFFFFF; --agwp-surf: #E7EBEF; --agwp-ink: #0D1520; --agwp-ink2: #4A5563; --agwp-line: rgba(13, 21, 32, .10); --agwp-acc: #1DA8EB; --agwp-accink: #2464D8; --agwp-accsoft: #E1F1FC; --agwp-glow: rgba(29, 168, 235, .18); --agwp-onacc: #04121B; --agwp-code: #0F141A; --agwp-danger: #E5484D; --agwp-success: #16A34A; --agwp-grad: linear-gradient(45deg, #2464D8 0%, #1DA8EB 55%, #67D9E9 100%); /* Schriften – Namen wie im Enfold-Font-Manager, danach Fallbacks */ --agwp-font-body: 'manrope', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --agwp-font-head: 'bricolage-grotesque', 'Bricolage Grotesque', 'manrope', 'Manrope', system-ui, sans-serif; --agwp-font-mono: 'jetbrains-mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Typo-Skala (fluid, Werte aus der Vorlage) */ --agwp-fs-display: clamp(2.125rem, 5.4vw, 4.875rem); /* 34 -> 78 Statement, Footer-Claim */ --agwp-fs-h1: clamp(2.75rem, 6.6vw, 5.75rem); /* 44 -> 92 */ --agwp-fs-h2: clamp(2.25rem, 4.6vw, 4rem); /* 36 -> 64 */ --agwp-fs-h3: clamp(1.625rem, 2.6vw, 2.25rem); /* 26 -> 36 */ --agwp-fs-h4: clamp(1.25rem, 1.8vw, 1.5rem); /* 20 -> 24 */ --agwp-fs-h5: 1.125rem; /* 18 */ --agwp-fs-lead: clamp(1.125rem, 1.5vw, 1.3125rem); /* 18 -> 21 */ --agwp-fs-body: 1.0625rem; /* 17 */ --agwp-fs-small: .9375rem; /* 15 */ --agwp-fs-kicker: .8125rem; /* 13 */ --agwp-fs-meta: .75rem; /* 12 */ /* Layout */ --agwp-maxw: 1410px; --agwp-gutter: clamp(20px, 4vw, 48px); --agwp-sec-s: clamp(40px, 5vw, 64px); --agwp-sec-m: clamp(56px, 7vw, 96px); --agwp-sec-l: clamp(72px, 9vw, 130px); --agwp-sec-xl: clamp(96px, 12vw, 180px); /* Radien */ --agwp-r-sm: 14px; --agwp-r-md: 18px; --agwp-r-lg: 24px; --agwp-r-xl: 28px; --agwp-r-xxl: 36px; --agwp-r-pill: 999px; /* Logo-Hoehe im Header (Vorlage: 30px) */ --agwp-logo-h: 34px; /* Logo-Breite im Footer (Klasse "agwp-logo" am Enfold-Bild) */ --agwp-footer-logo-w: 120px; } /* Alternative Ueberschriften-Schrift (AGWP_HEADING_FONT in inc/loader.php) */ body.agwp-font-archivo { --agwp-font-head: 'archivo', 'Archivo', 'manrope', 'Manrope', system-ui, sans-serif; } body.agwp-font-manrope { --agwp-font-head: 'manrope', 'Manrope', system-ui, sans-serif; } /* 02 BASIS & ENFOLD-FARBSETS ----------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body#top { font-family: var(--agwp-font-body); font-size: var(--agwp-fs-body); line-height: 1.6; color: var(--agwp-ink); background-color: var(--agwp-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #top input, #top textarea, #top select, #top button { font-family: var(--agwp-font-body); } /* Enfold-Farbsets auf Tokens legen (macht auch den Dark Mode moeglich) */ #top #wrap_all, #top #main, #top .main_color { background-color: var(--agwp-bg); color: var(--agwp-ink); } #top .alternate_color { background-color: var(--agwp-bg2); color: var(--agwp-ink); } #top .header_color .header_bg { background-color: var(--agwp-bg); } #top .footer_color, #top .socket_color { background-color: var(--agwp-bg2); color: var(--agwp-ink2); } /* Enfold setzt Rahmenfarben auf fast alle Elemente – :where() haelt die Specificity niedrig, damit Komponenten-Rahmen weiter unten gewinnen. */ #top :where(.main_color, .alternate_color, .header_color, .footer_color, .socket_color), #top :where(.main_color, .alternate_color, .header_color, .footer_color, .socket_color) :where(div, section, article, header, footer, aside, nav, ul, ol, li, table, tr, td, th, span, p, hr, blockquote, pre) { border-color: var(--agwp-line); } /* Enfold faerbt ueber die Farbsets direkt ein (.main_color span …) – in eigenen Komponenten sollen Spans die Farbe erben. Eigene Span-Farben stehen mit hoeherer Specificity in den Komponenten-Dateien. */ #top :is(.agwp-layers, .agwp-related, .agwp-authorbox, .agwp-snippet, .agwp-toc, .agwp-tldr, .agwp-callout, .agwp-bars, .agwp-table, .agwp-figure, .agwp-posts, .agwp-steps, .agwp-projects, .agwp-readers, .agwp-problems, .agwp-showcase, .agwp-diffs, .agwp-visual, .agwp-services, .agwp-flow, .agwp-badge, .agwp-meter, .agwp-codewin, .agwp-header-actions, .agwp-checks, .agwp-pills, .agwp-strike, .agwp-solution) span { color: inherit; } /* Nur fuer Screenreader sichtbar */ #top .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } ::selection { background: var(--agwp-accsoft); color: var(--agwp-ink); } #top img { max-width: 100%; height: auto; } /* Enfold-Bild-Element: abgerundete Ecken (28px) inkl. Hover-Overlay. Ausnahme per Custom CSS Class "agwp-no-radius" (Logo-Klasse "agwp-logo" ist automatisch ausgenommen). */ #top .avia-image-container:not(.agwp-logo, .agwp-no-radius) :is(.avia-image-container-inner, .avia-image-overlay-wrap, .avia_image, .image-overlay) { border-radius: var(--agwp-r-xl); } #top .avia-image-container:not(.agwp-logo, .agwp-no-radius) :is(.avia-image-container-inner, .avia-image-overlay-wrap) { overflow: hidden; } /* Hell/Dunkel-Varianten von Bildern (z. B. Flow-Icons) */ .agwp-only-dark { display: none !important; } html[data-theme="dark"] .agwp-only-dark { display: inline-block !important; } html[data-theme="dark"] .agwp-only-light { display: none !important; } /* 03 LAYOUT ------------------------------------------------------------------ */ #top #wrap_all .container { box-sizing: border-box; max-width: calc(var(--agwp-maxw) + 2 * var(--agwp-gutter)); padding-left: var(--agwp-gutter); padding-right: var(--agwp-gutter); } @media only screen and (max-width: 767px) { .responsive #top #wrap_all .container { width: 100%; max-width: 100%; } } /* Enfold zieht zwischen Sektionen eine Linie – standardmaessig aus, per Klasse an */ #top #main .container_wrap { border-top-width: 0; } #top #main .avia-section.agwp-sec--lined { border-top: 1px solid var(--agwp-line); border-bottom: 1px solid var(--agwp-line); } /* Sektionsabstaende: Enfold-Farbsektion > "Abstand" (klein / standard / gross / riesig) */ #top .avia-section.avia-section-small .content { padding-top: var(--agwp-sec-s); padding-bottom: var(--agwp-sec-s); } #top .avia-section.avia-section-default .content { padding-top: var(--agwp-sec-m); padding-bottom: var(--agwp-sec-m); } #top .avia-section.avia-section-large .content { padding-top: var(--agwp-sec-l); padding-bottom: var(--agwp-sec-l); } #top .avia-section.avia-section-huge .content { padding-top: var(--agwp-sec-xl); padding-bottom: var(--agwp-sec-xl); } /* Sektions-Varianten (Farbsektion > Custom CSS Class). Keine Hintergrundfarbe im Element setzen. */ #top #main .avia-section.agwp-sec--bg { background-color: var(--agwp-bg); } #top #main .avia-section.agwp-sec--bg2 { background-color: var(--agwp-bg2); } #top #main .avia-section.agwp-sec--surf { background-color: var(--agwp-surf); } /* Dezenter blauer Schein oben rechts (z. B. Beitragskopf): Class "agwp-sec--glow", kombinierbar */ #top #main .avia-section.agwp-sec--glow { background-image: radial-gradient(55% 70% at 92% 0%, color-mix(in oklab, var(--agwp-acc) 14%, transparent), transparent 70%); background-repeat: no-repeat; } /* Dunkle Technik-Sektion (bleibt auch im hellen Modus dunkel) #wrap_all erhoeht die Specificity, damit die Typografie-Regeln weiter unten (Ueberschriften, Kicker, Lead) hier nicht wieder dunkel faerben. */ #top #main .avia-section.agwp-sec--code { background-color: var(--agwp-code); color: #E9EEF2; } #top #wrap_all .agwp-sec--code :is(h1, h2, h3, h4, h5, h6, .av-special-heading-tag, strong) { color: #E9EEF2; } #top #wrap_all .agwp-sec--code :is(.avia_textblock, p, .agwp-lead, .agwp-lead p, .av-subheading_below, .av-subheading_below p) { color: #A6B1BC; } #top #wrap_all .agwp-sec--code :is(.agwp-kicker, .av-subheading_above, .av-subheading_above p) { color: #67D9E9; } #top #wrap_all .agwp-sec--code :is(.agwp-acc, :is(h1, h2, h3, h4, .av-special-heading-tag) strong) { color: var(--agwp-acc); } #top #wrap_all .agwp-sec--code :where(div, section, article, ul, li, span, p, hr) { border-color: rgba(255, 255, 255, .08); } /* 04 TYPOGRAFIE -------------------------------------------------------------- */ #top :is(h1, h2, h3, h4, h5, h6), #top .av-special-heading .av-special-heading-tag, #top .av-special-font, #top .main-title { font-family: var(--agwp-font-head); color: var(--agwp-ink); text-transform: none; text-wrap: balance; font-variant-ligatures: common-ligatures; } #top h1 { font-size: var(--agwp-fs-h1); font-weight: 800; line-height: .98; letter-spacing: -.035em; } #top h2 { font-size: var(--agwp-fs-h2); font-weight: 800; line-height: 1; letter-spacing: -.03em; } #top h3 { font-size: var(--agwp-fs-h3); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } #top h4 { font-size: var(--agwp-fs-h4); font-weight: 700; line-height: 1.22; letter-spacing: -.015em; } #top h5 { font-size: var(--agwp-fs-h5); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; } #top h6 { font-family: var(--agwp-font-mono); font-size: var(--agwp-fs-kicker); font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--agwp-accink); } /* Akzent in Ueberschriften: im Titel oder */ #top :is(h1, h2, h3, h4, .av-special-heading-tag) strong, #top .agwp-acc { color: var(--agwp-accink); font-weight: inherit; } /* Enfold setzt "&" in Ueberschriften in eine Zierschrift (span.special_amp) – zuruecksetzen */ #top .special_amp { font-family: inherit; font-style: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } /* Enfold "Spezielle Ueberschrift" */ #top .av-special-heading { padding-bottom: 0; } #top .av-special-heading .special-heading-border { display: none; } /* Untertitel OBERHALB = Kicker "// Label", UNTERHALB = Lead-Text */ #top .av-special-heading .av-subheading_above, #top .agwp-kicker { font-family: var(--agwp-font-mono); font-size: var(--agwp-fs-kicker); font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--agwp-accink); opacity: 1; margin: 0 0 18px; } #top .av-special-heading .av-subheading_above p { margin: 0; font: inherit; color: inherit; } #top .av-special-heading .av-subheading_above::before, #top .agwp-kicker::before { content: "// "; } /* Enfold packt den Untertitel in ein
(Blockelement) – dann muss das "// " IN den Absatz, sonst steht es in einer eigenen Zeile. */ #top .av-special-heading .av-subheading_above:has(> p)::before { content: none; } #top .av-special-heading .av-subheading_above > p:first-child::before { content: "// "; } #top .av-special-heading .av-subheading_below, #top .agwp-lead, #top .agwp-lead .avia_textblock, #top .agwp-lead p, #top .agwp-post-lead { font-family: var(--agwp-font-body); font-size: var(--agwp-fs-lead); font-weight: 400; line-height: 1.55; color: var(--agwp-ink2); text-wrap: pretty; } #top .av-special-heading .av-subheading_below { margin-top: 22px; max-width: 560px; } #top .agwp-post-lead { max-width: 760px; margin: 22px 0 0; } /* Grosse Statement-Schrift (Klasse an Textblock/Ueberschrift) */ #top .agwp-display, #top .agwp-display p, #top .agwp-display .av-special-heading-tag { font-family: var(--agwp-font-head); font-size: var(--agwp-fs-display); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; color: var(--agwp-ink); text-wrap: balance; } /* Fliesstext */ #top .avia_textblock { color: var(--agwp-ink2); font-size: var(--agwp-fs-body); line-height: 1.6; } #top .avia_textblock p { text-wrap: pretty; } #top .avia_textblock :is(strong, b) { color: var(--agwp-ink); font-weight: 700; } /* Nur "normale" Links ohne eigene Klasse. :where() haelt die Specificity bewusst niedrig, damit Komponenten-Links (Leistungsliste, Menues, Pills, Buttons …) ihren eigenen Stil behalten. */ #top :where(.avia_textblock) a:where(:not([class])) { color: var(--agwp-accink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in oklab, var(--agwp-accink) 40%, transparent); transition: color .2s, text-decoration-color .2s; } #top :where(.avia_textblock) a:where(:not([class])):hover { color: var(--agwp-acc); text-decoration-color: currentColor; } #top .agwp-muted, #top .agwp-muted p { color: var(--agwp-ink2); } #top .agwp-small, #top .agwp-small p { font-size: var(--agwp-fs-small); } #top .agwp-mono, #top .agwp-meta { font-family: var(--agwp-font-mono); font-weight: 500; } #top .agwp-meta { font-size: var(--agwp-fs-meta); color: var(--agwp-ink2); } /* Inline-Code */ #top :not(pre) > code { font-family: var(--agwp-font-mono); font-size: .88em; padding: .12em .4em; border-radius: 6px; background: var(--agwp-surf); color: var(--agwp-ink); } /* 05 HEADER & NAVIGATION ---------------------------------------------------- */ /* Keine hellen Ebenen hinter dem halbtransparenten Header (sonst wird er im Dark Mode grau) */ html { background-color: var(--agwp-bg); } #top #header, #top #header_main, #top #header_main .container { background-color: transparent; } #top #header_main { border-bottom: 1px solid var(--agwp-line); } #top #header .header_bg { background-color: color-mix(in oklab, var(--agwp-bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 1; } #top #header .av-main-nav > li > a { font-family: var(--agwp-font-body); font-size: var(--agwp-fs-small); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--agwp-ink); transition: color .2s; } #top #header .av-main-nav > li > a:hover, #top #header .av-main-nav > li:is(.current-menu-item, .current-menu-ancestor, .current_page_item) > a { color: var(--agwp-accink); } #top #header .av-main-nav .avia-menu-fx { background-color: var(--agwp-acc); height: 2px; } #top #header .av-main-nav .avia-menu-fx .avia-arrow-wrap { display: none; } /* Untermenue */ #top #header .av-main-nav ul { background: var(--agwp-bg2); border: 1px solid var(--agwp-line); border-radius: var(--agwp-r-sm); box-shadow: 0 24px 50px -24px rgba(13, 21, 32, .25); padding: 8px; } #top #header .av-main-nav ul a { font-family: var(--agwp-font-body); font-size: var(--agwp-fs-small); font-weight: 600; color: var(--agwp-ink2); background: transparent; border: 0; border-radius: 10px; padding: 10px 14px; transition: background-color .2s, color .2s; } #top #header .av-main-nav ul a:hover { background: var(--agwp-accsoft); color: var(--agwp-ink); } /* Menue-Button: im Menue CSS-Klasse "av-menu-button av-menu-button-colored" (dunkel, wie Vorlage) oder "av-menu-button av-menu-button-bordered" (Kontur) */ #top #header .av-main-nav .av-menu-button > a .avia-menu-text { border-radius: var(--agwp-r-pill); padding: 10px 18px; font-weight: 700; line-height: 1.2; transition: transform .2s, background-color .2s, border-color .2s; } #top #header .av-main-nav .av-menu-button-colored > a .avia-menu-text { background: var(--agwp-ink); border: 1px solid var(--agwp-ink); color: var(--agwp-bg); } #top #header .av-main-nav .av-menu-button-bordered > a .avia-menu-text { background: var(--agwp-bg2); border: 1.5px solid var(--agwp-line); color: var(--agwp-ink); } #top #header .av-main-nav .av-menu-button > a:hover .avia-menu-text { transform: translateY(-1px); } #top #header .av-main-nav .av-menu-button-bordered > a:hover .avia-menu-text { border-color: var(--agwp-acc); } #top #header .av-main-nav .av-menu-button > a .avia-menu-fx { display: none; } /* Mobil: Burger + Overlay */ #top .av-hamburger-inner, #top .av-hamburger-inner::before, #top .av-hamburger-inner::after { background-color: var(--agwp-ink); } #top .av-burger-overlay-bg { background: var(--agwp-bg); opacity: .98; } #top #av-burger-menu-ul li a { font-family: var(--agwp-font-body); font-size: 1.25rem; font-weight: 700; color: var(--agwp-ink); border-bottom: 1px solid var(--agwp-line); } #top #av-burger-menu-ul li a:hover { color: var(--agwp-accink); } /* 05b HEADER-LAYOUT: Logo links | Menue mittig | Aktionen rechts -------------- Markup: .inner-container > .logo + nav.main_menu > (.av-main-nav-wrap + .agwp-header-actions) Das Menue sitzt exakt mittig, egal wie breit Logo und Aktionen sind. Enfold-Einstellung "Mobiles Menue: Tablet" -> Burger ab 989px. */ #top #header_main .inner-container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 100%; } #top #header_main .logo { position: static; float: none; grid-column: 1; grid-row: 1; justify-self: start; display: flex; align-items: center; height: 100%; } #top #header_main .logo a { display: flex; align-items: center; height: 100%; } #top #header_main .logo img { max-height: var(--agwp-logo-h); width: auto; height: auto; } #top #header_main .main_menu { position: static; float: none; grid-column: 2 / 4; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: center; height: 100%; } #top #header_main .main_menu .av-main-nav-wrap { grid-column: 1; grid-row: 1; justify-self: center; float: none; } .agwp-header-actions { grid-column: 2; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 12px; } /* Browser ohne subgrid: Aktionen rechts, Menue nahezu mittig */ @supports not (grid-template-columns: subgrid) { #top #header_main .main_menu { display: flex; justify-content: space-between; } .agwp-header-actions { margin-left: auto; } } /* CTA-Menuepunkt: im Desktop-Menue ausblenden, rechts als Button zeigen. Im Burger-Menue (geklont, ausserhalb von #header_main) bleibt er sichtbar. */ #top #header_main .av-main-nav > li.agwp-header-cta { display: none; } #top .agwp-header-btn { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: var(--agwp-r-pill); background: var(--agwp-ink); color: var(--agwp-bg); font-family: var(--agwp-font-body); font-size: var(--agwp-fs-small); font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: transform .2s; } #top .agwp-header-btn:hover { transform: translateY(-1px); color: var(--agwp-bg); } /* Mobil/Tablet (Burger aktiv): Logo | Umschalter | Burger, Button nur im Burger-Menue */ @media only screen and (max-width: 989px) { #top #header_main .inner-container { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; } #top #header_main .main_menu .av-main-nav-wrap { grid-column: 2; } .agwp-header-actions { grid-column: 1; } #top .agwp-header-btn { display: none; } } /* 06 BUTTONS ------------------------------------------------------------------ */ #top .avia-button, #top .avia_ajax_form .button, #top input[type="submit"], #top .agwp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--agwp-font-body); font-size: var(--agwp-fs-body); font-weight: 800; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none; border: 1.5px solid transparent; border-radius: var(--agwp-r-pill); padding: 16px 26px; cursor: pointer; transition: transform .2s, box-shadow .2s, background-color .2s, border-color .2s, color .2s; } #top .avia-button.avia-size-small { padding: 10px 18px; font-size: var(--agwp-fs-small); } #top .avia-button.avia-size-medium { padding: 13px 22px; font-size: 1rem; } #top .avia-button :is(.avia_iconbox_title, span) { color: inherit; } /* Primaer (Enfold: Farbe "Theme Color") */ #top .avia-button.avia-color-theme-color, #top .avia_ajax_form .button, #top input[type="submit"], #top .agwp-btn { background-color: var(--agwp-acc); border-color: var(--agwp-acc); color: var(--agwp-onacc); box-shadow: 0 8px 30px var(--agwp-glow); } #top .avia-button.avia-color-theme-color:hover, #top .avia_ajax_form .button:hover, #top input[type="submit"]:hover, #top .agwp-btn:hover { background-color: var(--agwp-acc); color: var(--agwp-onacc); transform: translateY(-2px); box-shadow: 0 12px 40px var(--agwp-glow); } /* Dunkel (Enfold: Farbe "Dark") */ #top .avia-button.avia-color-dark { background-color: var(--agwp-ink); border-color: var(--agwp-ink); color: var(--agwp-bg); box-shadow: none; } #top .avia-button.avia-color-dark:hover { color: var(--agwp-bg); transform: translateY(-1px); } /* Kontur (Enfold: Farbe "Light" oder Klasse "agwp-btn-ghost") */ #top .avia-button.avia-color-light, #top .agwp-btn-ghost .avia-button, #top .avia-button.agwp-btn-ghost { background-color: var(--agwp-bg2); border-color: var(--agwp-line); color: var(--agwp-ink); box-shadow: none; } #top .avia-button.avia-color-light:hover, #top .agwp-btn-ghost .avia-button:hover, #top .avia-button.agwp-btn-ghost:hover { border-color: var(--agwp-acc); color: var(--agwp-ink); } /* 07 KLEINE BAUSTEINE (Shortcodes aus inc/shortcodes.php) -------------------- */ /* [agwp_badge] */ .agwp-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px; border-radius: var(--agwp-r-pill); border: 1px solid var(--agwp-line); background: var(--agwp-bg2); font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--agwp-ink2); margin-bottom: 28px; } .agwp-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--agwp-acc); animation: agwp-pulse 2.4s infinite; } /* [agwp_checks] */ #top .agwp-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 34px 0 0; padding: 0; list-style: none; font-size: .875rem; font-weight: 600; color: var(--agwp-ink2); } #top .agwp-checks li { margin: 0; padding: 0; border: 0; } #top .agwp-checks li::before { content: "\2713\00a0"; color: var(--agwp-accink); } /* [agwp_pills] */ #top .agwp-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; } #top .agwp-pills li { margin: 0; padding: 10px 16px; border-radius: var(--agwp-r-pill); border: 1px solid var(--agwp-line); background: var(--agwp-bg2); font-size: var(--agwp-fs-small); font-weight: 600; line-height: 1.3; color: var(--agwp-ink); } /* Verlinkte Pillen */ #top .agwp-pills li:has(> a) { padding: 0; } #top .agwp-pills li > a { display: block; padding: 10px 16px; border-radius: inherit; color: var(--agwp-ink); text-decoration: none; transition: color .2s; } #top .agwp-pills li:has(> a) { transition: border-color .2s, background-color .2s; } #top .agwp-pills li:has(> a):hover { border-color: var(--agwp-acc); } #top .agwp-pills li > a:hover { color: var(--agwp-ink); } /* Beitragskategorien: [agwp_post_cats] – Hauptkategorie hervorgehoben */ #top .agwp-pills--cats { margin: 0 0 22px; gap: 8px; } #top .agwp-pills--cats li { padding: 8px 14px; font-size: .875rem; } #top .agwp-pills--cats li:has(> a) { padding: 0; } #top .agwp-pills--cats li > a { padding: 8px 14px; } #top .agwp-pills--cats li.is-primary { background: var(--agwp-acc); border-color: var(--agwp-acc); color: var(--agwp-onacc); } #top .agwp-pills--cats li.is-primary > a, #top .agwp-pills--cats li.is-primary > a:hover { color: var(--agwp-onacc); } /* Gleich grosse Kacheln: [agwp_pills style="grid" cols="2"] */ #top .agwp-pills--grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 12px; } #top .agwp-pills--grid li { display: flex; align-items: center; min-height: 64px; padding: 18px 20px; border-radius: var(--agwp-r-md); font-size: var(--agwp-fs-small); font-weight: 700; line-height: 1.3; } #top .agwp-pills--grid li:has(> a) { padding: 0; } #top .agwp-pills--grid li > a { display: flex; align-items: center; width: 100%; min-height: 64px; padding: 18px 20px; } @media (max-width: 480px) { #top .agwp-pills--grid { grid-template-columns: 1fr; } } #top .agwp-pills--mono li { font-family: var(--agwp-font-mono); font-weight: 500; font-size: .875rem; padding: 9px 16px; } #top .agwp-sec--code .agwp-pills li { background: transparent; border-color: rgba(255, 255, 255, .14); color: #E9EEF2; } /* 08 TITELLEISTE, FOOTER, SOCKET ----------------------------------------------- */ #top .title_container { background: var(--agwp-bg2); border-bottom: 1px solid var(--agwp-line); } #top .title_container .main-title { font-size: var(--agwp-fs-h4); font-weight: 700; } #top .title_container .main-title a { color: var(--agwp-ink); } #top .title_container .breadcrumb { font-family: var(--agwp-font-mono); font-size: var(--agwp-fs-meta); color: var(--agwp-ink2); } #top .title_container .breadcrumb a { color: var(--agwp-ink2); } #top .title_container .breadcrumb a:hover { color: var(--agwp-accink); } #top #footer { background: var(--agwp-bg2); border-top: 1px solid var(--agwp-line); padding: var(--agwp-sec-m) 0 clamp(40px, 5vw, 64px); } #top #footer .widgettitle { font-family: var(--agwp-font-mono); font-size: var(--agwp-fs-meta); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--agwp-accink); margin: 0 0 14px; } #top #footer, #top #footer p { font-size: var(--agwp-fs-small); color: var(--agwp-ink2); } #top #footer a { color: var(--agwp-ink2); font-weight: 600; transition: color .2s; } #top #footer a:hover { color: var(--agwp-ink); } #top #footer .widget ul li { border: 0; padding: 5px 0; margin: 0; background: none; } #top #socket { background: var(--agwp-bg2); border-top: 1px solid var(--agwp-line); font-size: .875rem; color: var(--agwp-ink2); } #top #socket .container { padding-top: 24px; padding-bottom: 24px; } #top #socket a { color: var(--agwp-ink2); font-weight: 600; } #top #socket a:hover { color: var(--agwp-ink); } /* Footer-Seite (Enfold "Footer ueber Seite") --------------------------------- agwp-footer an den Farbsektionen des Footers (plus agwp-sec--bg2 fuer Weiss) agwp-socket an der Sockel-Sektion agwp-label Spaltenueberschrift:
Leistungen
agwp-totop Link "nach oben": nach oben ↑ */ #top .agwp-label { font-family: var(--agwp-font-mono); font-size: var(--agwp-fs-meta); font-weight: 500; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--agwp-accink); margin: 0 0 14px; } /* [agwp_menu] */ #top .agwp-menu { list-style: none; margin: 0; padding: 0; } #top .agwp-menu li { margin: 0; padding: 0; border: 0; background: none; list-style: none; } #top .agwp-menu a { font-family: var(--agwp-font-body); font-size: var(--agwp-fs-small); font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--agwp-ink2); text-decoration: none; transition: color .2s; } #top .agwp-menu a:hover, #top .agwp-menu .current-menu-item > a { color: var(--agwp-ink); } #top .agwp-menu--list { display: flex; flex-direction: column; gap: 14px; } #top .agwp-menu--inline { display: flex; flex-wrap: wrap; gap: 10px 24px; } #top .agwp-menu--center { justify-content: center; } #top .agwp-menu--end { justify-content: flex-end; } /* Footer-Logo: Klasse "agwp-logo" am Enfold-Bild ODER direkt am , Breite ueber --agwp-footer-logo-w. !important, weil Enfold Bildbreiten teils pro Element in eigene CSS-Dateien schreibt. */ #top .agwp-logo, #top .agwp-logo .avia-image-container-inner, #top .agwp-logo .avia-image-overlay-wrap { width: auto; max-width: 100%; } #top .agwp-logo img, #top img.agwp-logo { width: var(--agwp-footer-logo-w) !important; max-width: 100%; height: auto !important; display: block; } /* Footer-Markenspalte: Klasse "agwp-foot-brand" an der SPALTE (Logo, Text, E-Mail, Ort). Werte wie Vorlage: 15px, Mail dunkel/600, Ort grau/600. #wrap_all erhoeht die Specificity, damit auch eine im Textblock gesetzte Schriftgroesse verliert. */ #top #wrap_all .agwp-foot-brand, #top #wrap_all .agwp-foot-brand :is(.avia_textblock, p, a, span, li) { font-size: var(--agwp-fs-small); line-height: 1.6; } #top #wrap_all .agwp-foot-brand p { margin: 0 0 16px; color: var(--agwp-ink2); } #top #wrap_all .agwp-foot-brand p:last-child { margin-bottom: 0; } #top #wrap_all .agwp-foot-brand a[href^="mailto:"] { color: var(--agwp-ink); font-weight: 600; text-decoration: none; } #top #wrap_all .agwp-foot-brand a[href^="mailto:"]:hover { color: var(--agwp-accink); } /* E-Mail und Ort eng untereinander – auch wenn beide eigene Absaetze sind */ #top #wrap_all .agwp-foot-brand p:has(> a[href^="mailto:"]) { margin-bottom: 6px; } #top #wrap_all .agwp-foot-brand p:has(> a[href^="mailto:"]) + p, #top #wrap_all .agwp-foot-brand .agwp-foot-meta { display: block; font-weight: 600; color: var(--agwp-ink2); } #top #wrap_all .agwp-foot-brand .agwp-foot-meta { margin-top: 6px; } #top #wrap_all .agwp-foot-brand .agwp-logo { margin-bottom: 16px; } /* Kleiner Fliesstext im Footer: Klasse "agwp-small" am Textblock (15px, wie Vorlage) */ #top .agwp-footer .agwp-small, #top .agwp-footer .agwp-small p { font-size: var(--agwp-fs-small); line-height: 1.55; } /* Links im Footer ohne Unterstreichung (ueberschreibt den Textblock-Linkstil) */ #top .agwp-footer .avia_textblock a:not(.avia-button), #top .agwp-socket .avia_textblock a:not(.avia-button) { color: var(--agwp-ink2); font-weight: 500; text-decoration: none; } #top .agwp-footer .avia_textblock a:not(.avia-button):hover, #top .agwp-socket .avia_textblock a:not(.avia-button):hover { color: var(--agwp-ink); } #top .agwp-footer .avia_textblock a.agwp-foot-strong { color: var(--agwp-ink); } /* Enfold "Footer ueber Seite" liegt in #footer: dessen Innenabstand entfernen, die Abstaende kommen dann nur aus den Farbsektionen. */ #top #footer:has(.agwp-footer) { padding: 0; border-top: 0; } /* Sockel – Klasse "agwp-socket" an der Sockel-Farbsektion Kompakte Hoehe, 14px, alle Spalten vertikal mittig, Menue mittig, "nach oben" rechts. */ #top #wrap_all .avia-section.agwp-socket .content { padding-top: 24px; padding-bottom: 24px; } #top #wrap_all .agwp-socket .entry-content-wrapper { display: flex; flex-wrap: wrap; align-items: center; } #top #wrap_all .agwp-socket .entry-content-wrapper::before, #top #wrap_all .agwp-socket .entry-content-wrapper::after { display: none; } #top #wrap_all .agwp-socket .flex_column { float: none; margin-top: 0; margin-bottom: 0; } #top #wrap_all .agwp-socket .flex_column_table_cell { vertical-align: middle; } #top #wrap_all .agwp-socket, #top #wrap_all .agwp-socket :is(.avia_textblock, p, a, span, li) { font-size: .875rem; line-height: 1.5; color: var(--agwp-ink2); } #top #wrap_all .agwp-socket :is(p, .avia_textblock, .av_textblock_section) { margin: 0; padding: 0; } #top #wrap_all .agwp-socket .agwp-menu--inline { justify-content: center; } #top #wrap_all .agwp-socket .flex_column:last-child .avia_textblock { text-align: right; } @media only screen and (max-width: 767px) { #top #wrap_all .agwp-socket .flex_column { margin-bottom: 12px; } #top #wrap_all .agwp-socket .avia_textblock, #top #wrap_all .agwp-socket .flex_column:last-child .avia_textblock { text-align: center; } } #top #wrap_all .agwp-socket a.agwp-totop, #top a.agwp-totop { font-family: var(--agwp-font-mono); font-size: var(--agwp-fs-kicker); font-weight: 500; color: var(--agwp-ink2); text-decoration: none; } #top #wrap_all .agwp-socket a.agwp-totop:hover, #top a.agwp-totop:hover { color: var(--agwp-accink); } #top #scroll-top-link { border-radius: 50%; background: var(--agwp-acc); color: var(--agwp-onacc); border: 0; box-shadow: 0 8px 24px var(--agwp-glow); } /* 09 BARRIEREFREIHEIT & MOTION -------------------------------------------------- */ #top a:focus-visible, #top button:focus-visible, #top input:focus-visible, #top textarea:focus-visible, #top select:focus-visible, #top .avia-button:focus-visible { outline: 3px solid color-mix(in oklab, var(--agwp-acc) 70%, transparent); outline-offset: 3px; border-radius: 6px; } #top .avia-button:focus-visible { border-radius: var(--agwp-r-pill); } @keyframes agwp-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--agwp-glow); } 50% { box-shadow: 0 0 0 8px transparent; } } @media (prefers-reduced-motion: reduce) { #top *, #top *::before, #top *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }