/* ============================================================================ * InfoMedia :: custom.css -- SPAETE CSS-Schicht * ---------------------------------------------------------------------------- * Herkunft: bis 2026-08-28 lag dieser Block im WordPress-Customizer unter * "Zusaetzliches CSS" (custom_css Post 19). Jetzt versionierbar im Child-Theme. * * WARUM ZWEI CSS-DATEIEN? Die Ladereihenfolge im ist: * 1. assets/design.css (frueh, VOR Kadences Block-CSS) * 2. Kadence Theme- + Block-CSS * 3. assets/custom.css (spaet, NACH Kadences Block-CSS) <-- diese Datei * * Daraus folgt die Faustregel: * - Regeln HIER gewinnen gegen Kadence OHNE !important. * - Regeln in design.css brauchen dafuer !important oder mehr Spezifitaet. * Deshalb NICHT einfach Regeln zwischen den Dateien verschieben - das aendert, * wer gewinnt. Neue Overrides gegen Kadence gehoeren hierher. * * REIHENFOLGE INNERHALB DIESER DATEI IST BEDEUTSAM: die Bloecke IM-MOBILE-2 bis * IM-MOBILE-13 sind ueber viele Sitzungen gewachsen und korrigieren einander. * Spaetere Bloecke ueberschreiben fruehere. Nicht umsortieren. * ========================================================================== */ /* ============================================================================ * KLASSEN-INDEX -- custom.css (spaete Schicht) * ---------------------------------------------------------------------------- * Alle projektspezifischen .im-*-Klassen DIESER Datei, thematisch gruppiert. * Markierung [auch in design.css] = die Klasse wird von BEIDEN Schichten * gestylt; dort entscheidet die Ladereihenfolge (siehe Kopf dieser Datei). * Stand 2026-08-28. * ========================================================================== */ /* --- Global & Hilfsklassen ------------------------------------------- */ /* .im-tag (1x) [auch in design.css] Eyebrow/Section-Tag über einer Überschrift: Pille mit feinem Rahmen, Versalien. Sparsam einsetzen — laut Design höchstens eine pro drei Sektionen. */ /* .im-btn-lime (5x) Lime-CTA-Button: Hover skaliert sanft statt die Farbe zu wechseln. An jeden Lime-Button hängen, sonst fehlt die Animation. */ /* .im-chips (1x) Container für eine Reihe kleiner Chips/Pillen nebeneinander, bricht auf Mobil um. */ /* --- Header & Navigation --------------------------------------------- */ /* .im-login (4x) Login-Button im Header: heller Ghost-Button mit Schloss-Icon. */ /* .im-mi (1x) Basisklasse für Menüpunkte im Mega-Menü — zeichnet das Icon links über eine CSS-Maske. */ /* .im-mi-globe (1x) Icon-Variante Weltkugel (Websites). */ /* .im-mi-users (1x) Icon-Variante Personen (Recruiting). */ /* .im-mi-file (1x) Icon-Variante Dokument (Journal). */ /* .im-mi-calc (1x) Icon-Variante Rechner (Online-Rechner). */ /* .im-mi-video (1x) Icon-Variante Video. */ /* .im-mi-pen (1x) Icon-Variante Stift (Grafikdesign). */ /* .im-mi-book (1x) Icon-Variante Broschüre. */ /* .im-mm-group (3x) Spalten-Überschrift im Mega-Menü („Online“, „Print & Grafik“) — nicht klickbar. */ /* .im-mm-cta (5x) Hervorgehobener Abschluss-Eintrag unten im Mega-Menü, spannt beide Spalten. */ /* .im-badge-de (2x) Menüpunkt mit Länder-Badge („Nur in DE“) — richtet Text und Badge auseinander aus. */ /* .im-marquee (1x) Laufband-Container: blendet die Ränder weich aus (Maske). */ /* .im-marquee-track (3x) Die laufende Spur im Laufband — trägt die Animation. */ /* --- Hero-Bereiche --------------------------------------------------- */ /* .im-hero (6x) Startseiten-Hero mit Hintergrundvideo: Positionierung und Überlagerung. */ /* .im-hero-eyebrow (2x) Kleine Zeile über der Hero-Überschrift, mit Strich-Symbol davor. */ /* .im-web-hero (3x) Hero der Unterseiten mit dezentem Farbschein im Hintergrund. */ /* .im-web-mockup (1x) Positionierungsrahmen für das Geräte-Mockup neben dem Hero-Text. */ /* --- Startseite: Bento, Case Study, Beispiele ------------------------ */ /* .im-bento (11x) Das Bento-Raster: vier Spalten, Kacheln unterschiedlicher Größe. */ /* .im-b-feat (7x) Große Kachel im Bento — belegt zwei Spalten und zwei Zeilen. */ /* .im-b-wide (2x) Breite Kachel im Bento — belegt zwei Spalten. */ /* .im-cs-grid (3x) Raster der Case-Study-Sektion. */ /* .im-cs-metrics (3x) Spalte mit den Kennzahlen der Case Study. */ /* .im-cs-metric (1x) Einzelne Kennzahl. */ /* .im-cs-phase (1x) Phasen-Beschriftung im Ablauf der Case Study. */ /* .im-cs-link (1x) Link in der Case Study ohne Unterstreichung. */ /* .im-why-reasons (2x) Raster der „Warum InfoMedia“-Gründe. */ /* .im-ex-card (4x) Beispiel-Karte mit Hover-Zoom des Screenshots. */ /* .im-ex-shot (1x) Der Screenshot-Bereich in der Beispiel-Karte (festes Seitenverhältnis). */ /* .im-ex-window (1x) Nachgebildete Browserleiste über dem Screenshot. */ /* .im-ex-bar (1x) Adressleisten-Attrappe darin. */ /* .im-ex-line (1x) Dekorative Linie in der Attrappe. */ /* .im-ex-hover (4x) Overlay, das beim Überfahren der Beispiel-Karte erscheint. */ /* --- Geräte-Mockups ------------------------------------------------- */ /* .im-web-browser (1x) Rahmen des Browserfensters. */ /* .im-web-bar (3x) Titelleiste des Browserfensters. */ /* .im-web-nav (2x) Navigationszeile darin. */ /* .im-web-navlinks (3x) Angedeutete Menüpunkte (graue Balken). */ /* .im-web-site (1x) Inhaltsfläche des Mockups. */ /* .im-web-band (4x) Farbband im Mockup. */ /* .im-web-cards (5x) Karten-Raster im Mockup. */ /* .im-web-phone (2x) Telefon-Mockup, überlappt den Browser. */ /* .im-web-ptop (3x) Kopfzeile im Telefon-Mockup. */ /* .im-web-pband (3x) Farbband im Telefon-Mockup. */ /* .im-web-pcards (2x) Karten im Telefon-Mockup. */ /* --- Unterseite /website/ -------------------------------------------- */ /* .im-web-tgrid (5x) [auch in design.css] Testimonial-Raster: zwei Spalten (Desktop), einspaltig auf Mobil. */ /* .im-web-steps (4x) Ablauf-Schritte nebeneinander. */ /* .im-web-refex (4x) Referenz-Beispiele nebeneinander. */ /* .im-web-ext4 (6x) Raster der vier Erweiterungs-Karten. */ /* .im-web-preiscard (5x) [auch in design.css] Preis-Karte: zweispaltig, stapelt auf Mobil. */ /* .im-web-pricebox (1x) Preis-Box in der rechten Spalte — auf Mobil weniger Innenabstand. */ /* .im-web-ctabadge (1x) Badge über der CTA-Karte, mittig. */ /* .im-web-faqsec (4x) [auch in design.css] FAQ-Sektion: Spalte behält volle Breite statt zu schrumpfen; trägt auch das Badge. */ /* .im-web-morelink (2x) Textlink „mehr…“ mit Pfeil, der beim Überfahren wandert. */ /* --- Referenzen ------------------------------------------------------ */ /* .im-refcard (4x) Referenz-Karte mit Hover-Zoom. */ /* .im-refshot (1x) Screenshot-Bereich der Referenz-Karte. */ /* .im-refwin (3x) Nachgebildete Fensterleiste darüber. */ /* .im-refbar (2x) Adressleisten-Attrappe darin. */ /* .im-refhover (4x) Overlay beim Überfahren der Referenz-Karte. */ /* .im-quote (2x) Anführungszeichen-Symbol über einer Kundenstimme. */ /* --- Formulare ------------------------------------------------------- */ /* .im-form-dark (22x) Formular auf dunklem Grund: Feldfarben, Fokusrahmen, Fehlermeldungen und DSGVO-Zeile werden hell umgestellt. Auf jedes Formular in einer dunklen Sektion setzen. */ /* --- Footer & Rechtsseiten ------------------------------------------- */ /* .im-footer (3x) Fußbereich-Container. */ /* .im-footer-grid (2x) Spaltenraster des Footers, stapelt auf Mobil. */ /* .im-footer-bottom (1x) Untere Zeile mit Trennlinie (Copyright). */ /* .im-f-tagline (1x) Slogan im Footer. */ /* .im-f-contact (4x) Kontaktspalte im Footer. */ /* .im-f-links (3x) Linkspalte im Footer. */ /* .im-f-phone (3x) Telefonzeile mit Icon (CSS-Maske). */ /* .im-f-mail (4x) E-Mail-Zeile mit Icon. */ /* .im-f-addr (2x) Adresszeile mit Icon. */ /* .im-f-aws (2x) Hinweiszeile zum Hosting. */ /* ===== InfoMedia :: Header ===== */ .site-main-header-wrap{background:transparent !important;box-shadow:none !important;} .site-main-header-wrap .site-header-row-container-inner{max-width:64rem;margin:1rem auto;padding:0 8px 0 20px;background:rgba(250,248,245,.85);border-radius:1.75rem;box-shadow:0 8px 32px rgba(16,32,27,.08),inset 0 0 0 1px rgba(16,32,27,.08);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);} .site-main-header-wrap .site-container{padding-left:0 !important;padding-right:0 !important;} .site-main-header-wrap.item-is-fixed .site-header-row-container-inner{background:rgba(250,248,245,.92);box-shadow:0 10px 34px rgba(16,32,27,.12),inset 0 0 0 1px rgba(16,32,27,.08);} .site-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.25rem;line-height:1;} .site-title a{color:var(--global-palette3);} .site-title::after{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--global-palette2);margin-left:4px;vertical-align:baseline;} .site-header-main-section-right .site-header-item:has(.im-login){margin-right:6px !important;} .site-header-item .header-button{height:40px !important;min-height:40px !important;padding:0 20px !important;font-size:14px !important;line-height:1 !important;display:inline-flex;align-items:center;justify-content:center;} .site-header-item .im-login{display:inline-flex;align-items:center;justify-content:center;gap:.45em;height:40px;padding:0 16px;border:1px solid rgba(16,32,27,.2);border-radius:999px;font-size:15px;font-weight:600;line-height:1;color:var(--global-palette3);text-decoration:none !important;transition:border-color .2s,background-color .2s,color .2s;} .site-header-item .im-login:hover{border-color:var(--global-palette1);background:var(--global-palette7);color:var(--global-palette1);} .site-header-item .im-login::before{content:'';width:15px;height:15px;flex:0 0 auto;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;} /* ===== InfoMedia :: Footer ===== */ .im-footer{max-width:72rem;margin:0 auto;padding:0 1.5rem;text-align:left;color:rgba(250,248,245,.6);font-size:14px;line-height:1.6;} .im-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;} .im-f-tagline{margin:1rem 0 0;max-width:24rem;} .im-f-aws{margin:1rem 0 0;position:relative;padding-left:14px;font-size:12px;color:rgba(250,248,245,.45);} .im-f-aws::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--global-palette2);} .im-f-contact{display:flex;flex-direction:column;gap:.75rem;} .im-f-contact p{display:flex;align-items:flex-start;gap:.625rem;margin:0;} .im-f-contact a{color:inherit;text-decoration:none;} .im-f-contact a:hover{color:var(--global-palette8);} .im-f-addr::before,.im-f-phone::before,.im-f-mail::before{content:'';width:16px;height:16px;flex:0 0 auto;margin-top:2px;background-color:var(--global-palette2);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .im-f-addr::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");} .im-f-phone::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E");} .im-f-mail::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E");} .im-f-links{display:flex;flex-direction:column;gap:.625rem;} .im-f-links a{color:rgba(250,248,245,.6);text-decoration:none;} .im-f-links a:hover{color:var(--global-palette8);} .im-footer-bottom{max-width:72rem;margin:3rem auto 0;padding:1.5rem 0 0;border-top:1px solid rgba(250,248,245,.1);font-size:12px;color:rgba(250,248,245,.35);} .im-f-phone a{white-space:nowrap;} body .im-footer a{text-decoration:none !important;} body .im-footer a:hover{text-decoration:none !important;} /* ===== InfoMedia :: Hero ===== */ .im-hero-eyebrow{display:flex;align-items:center;gap:12px;} .im-hero-eyebrow::before{content:'';width:40px;height:1px;background:var(--global-palette2);flex:0 0 auto;} /* ===== InfoMedia :: Hero Video ===== */ .im-hero{position:relative;overflow:hidden;} .im-hero .kb-blocks-bg-video-container{z-index:0;} .im-hero .kb-blocks-bg-video{top:0 !important;left:0 !important;inset:0 !important;width:100% !important;height:100% !important;min-width:100% !important;min-height:100% !important;object-fit:cover !important;object-position:62% center !important;transform:scale(1.06) !important;transform-origin:center !important;} .im-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(16,32,27,.9) 0%,rgba(16,32,27,.55) 45%,rgba(16,32,27,.1) 100%),linear-gradient(to top,rgba(16,32,27,.7) 0%,rgba(16,32,27,0) 55%,rgba(16,32,27,.25) 100%);} .im-hero > .kt-row-column-wrap{position:relative;z-index:2;} /* transparent header pill + home top offset */ .site-main-header-wrap .site-header-row-container-inner{background:rgba(250,248,245,.85) !important;} .site-main-header-wrap.item-is-fixed .site-header-row-container-inner{background:rgba(250,248,245,.92) !important;} body.home .content-area{margin-top:0 !important;margin-bottom:0 !important;} body.home .entry-content-wrap{padding-top:0 !important;} /* ===== InfoMedia :: Trust Marquee (nur Animation, Rest nativ) ===== */ .im-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);} .im-marquee-track{display:flex;align-items:center;gap:56px;width:max-content;margin:0;padding:0;list-style:none;animation:im-marquee 34s linear infinite;} .im-marquee-track li{white-space:nowrap;font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:600;color:rgba(16,32,27,.35);} @keyframes im-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.im-marquee-track{animation:none;justify-content:center;flex-wrap:wrap;row-}} /* ===== InfoMedia :: Section-Tag (Badge) ===== */ .im-tag{display:inline-flex;align-items:center;width:-moz-fit-content;width:fit-content;vertical-align:middle;} /* ===== InfoMedia :: Pain-Point-Chips (horizontale Flex-Reihe) ===== */ .im-chips .kt-inside-inner-col{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;align-items:center;justify-content:flex-start;} /* ===== InfoMedia :: Bento-Grid ===== */ .im-bento .kt-row-column-wrap{display:grid !important;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(184px,auto);gap:16px;} .im-bento .kt-row-column-wrap > .wp-block-kadence-column{flex:0 1 auto !important;max-width:none !important;width:auto !important;} .im-bento .kt-row-column-wrap > .im-b-feat{grid-column:span 2;grid-row:span 2;} .im-bento .kt-row-column-wrap > .im-b-wide{grid-column:span 2;} .im-bento .wp-block-kadence-column{height:100%;} .im-bento .kt-blocks-info-box-link-wrap{height:100%;} .im-b-feat .kt-inside-inner-col{position:relative;overflow:hidden;border-radius:24px;height:100% !important;display:flex;flex-direction:column;justify-content:flex-end;} .im-b-feat .kt-inside-inner-col::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0B3B2E 0%,rgba(11,59,46,0.55) 48%,rgba(11,59,46,0.12) 100%);z-index:0;pointer-events:none;} .im-b-feat .wp-block-kadence-infobox{position:relative;z-index:1;} @media (max-width:1024px){.im-bento .kt-row-column-wrap{grid-template-columns:repeat(2,1fr);}.im-bento .kt-row-column-wrap > .im-b-feat{grid-row:span 1;}} @media (max-width:600px){.im-bento .kt-row-column-wrap{grid-template-columns:1fr;}.im-bento .kt-row-column-wrap > .im-b-feat,.im-bento .kt-row-column-wrap > .im-b-wide{grid-column:span 1;}} .im-b-feat .kt-blocks-info-box-link-wrap{background-color:transparent !important;box-shadow:none !important;padding:0 !important;} /* ===== InfoMedia :: Case Study ===== */ .im-cs-grid .kt-row-column-wrap{display:grid !important;grid-template-columns:1.2fr 1fr;gap:16px;align-items:stretch;} .im-cs-grid .kt-row-column-wrap > .wp-block-kadence-column{flex:0 1 auto !important;max-width:none !important;width:auto !important;} .im-cs-metrics .kt-inside-inner-col{display:flex;flex-direction:column;gap:16px;height:100%;} .im-cs-metrics .kt-inside-inner-col > .wp-block-kadence-infobox{flex:1;} .im-cs-metrics .kt-blocks-info-box-link-wrap{height:100%;} .im-cs-phase .kt-blocks-info-box-number{font-size:14px !important;font-weight:700;color:#0B3B2E;font-family:'Bricolage Grotesque',sans-serif;line-height:1.3;} .im-cs-metric .kt-blocks-info-box-media{display:none !important;} .im-cs-link{text-decoration:none;} @media (max-width:1023px){.im-cs-grid .kt-row-column-wrap{grid-template-columns:1fr;}} /* ===== InfoMedia :: Warum InfoMedia ===== */ .im-why-reasons .kt-inside-inner-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;} @media (max-width:600px){.im-why-reasons .kt-inside-inner-col{grid-template-columns:1fr;}} /* ===== InfoMedia :: Beispiele ===== */ .im-ex-card{overflow:hidden;transition:transform .3s ease;} .im-ex-card:hover{transform:translateY(-6px);} .im-ex-shot{position:relative;margin:12px 12px 0;aspect-ratio:16/10;overflow:hidden;border-radius:16px;background:#E9EFE7;} .im-ex-window{position:absolute;left:32px;right:32px;top:28px;background:#FAF8F5;border-radius:12px 12px 0 0;padding:16px;box-shadow:0 2px 8px rgba(16,32,27,0.08);} .im-ex-bar{display:block;width:56px;height:8px;border-radius:99px;background:rgba(11,59,46,0.5);margin:0 0 10px;} .im-ex-line{display:block;height:36px;border-radius:8px;background:rgba(16,32,27,0.08);} .im-ex-hover{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,59,46,0);transition:background .3s ease;} .im-ex-card:hover .im-ex-hover{background:rgba(11,59,46,0.55);} .im-ex-hover b{display:inline-flex;align-items:center;gap:8px;background:#FAF8F5;color:#10201B;font-size:14px;font-weight:700;padding:10px 20px;border-radius:999px;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;} .im-ex-card:hover .im-ex-hover b{opacity:1;transform:translateY(0);} /* ===== InfoMedia :: Fluent Forms (global – kuenftige Formulare erben) ===== */ .fluentform .ff-el-group{margin-bottom:16px;} .fluentform .ff-el-input--label label{font-size:14px;font-weight:600;color:var(--global-palette3);margin-bottom:6px;} .fluentform .ff-el-form-control{width:100% !important;height:auto !important;padding:14px 16px !important;font-size:16px !important;line-height:1.4 !important;border-radius:12px !important;border:1px solid rgba(16,32,27,0.15) !important;background:#ffffff !important;color:var(--global-palette3) !important;box-shadow:none !important;transition:border-color .2s,background-color .2s,box-shadow .2s !important;} .fluentform .ff-el-form-control::placeholder{color:rgba(16,32,27,0.4) !important;opacity:1;} .fluentform .ff-el-form-control:focus{border-color:var(--global-palette1) !important;background:#fff !important;box-shadow:0 0 0 3px rgba(11,59,46,0.08) !important;outline:none !important;} .fluentform .ff-el-is-required.asterisk-right label:after,.fluentform .ff-el-is-required.asterisk-right:after{color:var(--global-palette1) !important;} .fluentform .ff-btn-submit{background-color:var(--global-palette2) !important;color:var(--global-palette3) !important;border:none !important;border-radius:999px !important;padding:15px 30px !important;font-size:16px !important;font-weight:700 !important;font-family:'Instrument Sans',sans-serif !important;line-height:1.2 !important;cursor:pointer;box-shadow:none !important;transition:transform .28s cubic-bezier(0.16,1,0.3,1) !important;} .fluentform .ff-btn-submit:hover{transform:scale(1.02) !important;} .fluentform .ff-btn-submit:active{transform:scale(0.98) !important;} .fluentform .ff-el-tc .ff-el-form-check-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:2px 0 0;} .fluentform .ff_tc_checkbox{flex:0 0 auto;margin-top:1px;} .fluentform .ff-el-form-check-input{width:18px;height:18px;accent-color:var(--global-palette1);cursor:pointer;} .fluentform .ff_t_c{font-size:13px;line-height:1.45;margin:0;} /* Dunkel-Variante (Formulare auf dunklem Hintergrund) */ .im-form-dark .ff-el-input--label label{color:rgba(250,248,245,0.85) !important;} .im-form-dark .fluentform .ff-el-form-control{border-color:rgba(250,248,245,0.15) !important;background:rgba(250,248,245,0.05) !important;color:var(--global-palette8) !important;} .im-form-dark .fluentform .ff-el-form-control::placeholder{color:rgba(250,248,245,0.35) !important;} .im-form-dark .fluentform .ff-el-form-control:focus{ border-color:var(--global-palette2) !important; background:rgba(250,248,245,0.1) !important; box-shadow:0 0 0 3px rgba(198,242,78,0.18) !important; outline:none !important; } .im-form-dark .ff-el-is-required.asterisk-right label:after,.im-form-dark .ff-el-is-required.asterisk-right:after{color:var(--global-palette2) !important;} .im-form-dark .ff-btn-submit{width:100% !important;justify-content:center;text-align:center;} .im-form-dark .ff_t_c{color:rgba(250,248,245,0.7) !important;} .im-form-dark .ff_t_c a{color:var(--global-palette2) !important;text-decoration:underline;} .im-form-dark .ff-el-form-check-input{accent-color:var(--global-palette2);} .im-form-dark .ff-message-success,.im-form-dark .ff_submit_success{color:var(--global-palette8) !important;font-size:18px;line-height:1.5;} /* ===== InfoMedia :: Popup-CTA Hover (Scale statt Farbwechsel) ===== */ .kb-btnimwn_btn{transition:transform .28s cubic-bezier(0.16,1,0.3,1),background-color .2s !important;} .kb-btnimwn_btn:hover{background:var(--global-palette2) !important;color:var(--global-palette3) !important;transform:scale(1.02) !important;} .kb-btnimwn_btn:hover .kt-btn-inner-text{color:var(--global-palette3) !important;} .kb-btnimwn_btn:hover svg{stroke:var(--global-palette3) !important;} .kb-btnimwn_btn:active{transform:scale(0.98) !important;} /* ===== InfoMedia :: Lime-CTA Hover (global: Scale statt Farbwechsel) ===== */ .im-btn-lime{transition:transform .28s cubic-bezier(0.16,1,0.3,1) !important;} .im-btn-lime:hover{transform:scale(1.02) !important;} .im-btn-lime:active{transform:scale(0.98) !important;} .im-btn-lime:hover svg{transform:translate(2px,-2px);} /* ============================================================ IM-MOBILE :: Mobile-Optimierungen (2026-07-31) ============================================================ */ /* Basis-Hintergrund creme statt weiss (entfernt weissen Balken vor dem Footer) */ .wp-site-blocks{ background-color: var(--global-palette8, #FAF8F5) !important; } /* Hero-Headline: saubere Silbentrennung statt Wortumbruch auf Mobil */ @media (max-width: 767px){ .im-hero h1{ -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } } /* Slide-in Was-ist-neu: mobil als Bottom-Sheet (unten-zentriert, viewport-breit) */ @media (max-width: 767px){ .kc-wisn2027.kadence-conversion-wrap{ left:0 !important; right:0 !important; justify-content:center !important; align-items:flex-end !important; } .kc-wisn2027 .kadence-conversion{ flex:1 1 auto !important; width:auto !important; max-width:none !important; margin:0 12px 12px 12px !important; } } /* Lead-Form-Karte: weniger Padding auf Mobil + Formular/Button volle Breite */ @media (max-width: 767px){ .im-lf-card > .kt-row-column-wrap{ padding:28px !important; } } .im-form-dark .fluentform, .im-form-dark .frm-fluent-form, .im-form-dark .ff_submit_btn_wrapper{ width:100% !important; } .im-form-dark .ff-btn-submit{ width:100% !important; white-space:normal !important; } /* Footer: auf Mobil einspaltig stacken (kein Overflow / abgeschnittene E-Mail) */ @media (max-width: 767px){ .im-footer-grid{ grid-template-columns:1fr !important; gap:32px !important; } .im-f-mail, .im-f-mail a{ white-space:normal !important; word-break:break-word !important; } } /* Mobiles Menue (Drawer): alle Links lesbar (Porcelain), Hover Lime */ .popup-drawer .menu-item > a, .popup-drawer .mobile-navigation a{ color: var(--global-palette8, #FAF8F5) !important; } .popup-drawer .menu-item > a:hover, .popup-drawer .menu-item > a:focus{ color: var(--global-palette2, #C6F24E) !important; } /* ===== IM-MOBILE-2 :: Drawer-CTA-Kontext, Popup-Glow, Header-Rand (2026-07-31) ===== */ /* Slide-in Was-ist-neu: Lime-Glow oben rechts (wie Prototyp WinFloatingCard, bg-lime/20 blur) */ .kc-wisn2027 .kadence-conversion{ background-image: radial-gradient(52% 46% at 100% 0%, rgba(198,242,78,0.20) 0%, rgba(198,242,78,0.05) 45%, rgba(198,242,78,0) 70%) !important; } /* Mobile-Header-Pill: Abstand zu den Bildschirmraendern (nicht buendig andocken) */ @media (max-width:767px){ .site-mobile-header-wrap .site-header-row-container-inner{ margin-left:16px !important; margin-right:16px !important; } } /* ===== IM-MOBILE-3 :: Helles Mobil-Menue (Fullwidth wie Prototyp) 2026-07-31 ===== */ /* Panel: Porcelain + Blur statt near-black */ .popup-drawer.popup-drawer-layout-fullwidth .drawer-inner{ background: rgba(250,248,245,0.96) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .popup-drawer .drawer-overlay{ background: rgba(16,32,27,0.25) !important; } /* Menue-Links dunkel (Inkgreen), Hover Evergreen */ .popup-drawer .menu-item > a, .popup-drawer .mobile-navigation a{ color: var(--global-palette3,#10201B) !important; } .popup-drawer .menu-item > a:hover, .popup-drawer .menu-item > a:focus{ color: var(--global-palette1,#0B3B2E) !important; } /* Divider dunkel-subtil */ .popup-drawer .mobile-navigation li, .popup-drawer .mobile-navigation .menu-item, .popup-drawer .mobile-navigation a{ border-color: rgba(16,32,27,0.10) !important; } /* Close-X dunkel */ .popup-drawer .menu-toggle-close{ color: var(--global-palette3,#10201B) !important; } /* ===== IM-MOBILE-4 :: Mobil-Menue als andockende Pillen-Karte (Prototyp) 2026-08-01 ===== */ @media (max-width:1024px){ .popup-drawer.popup-drawer-layout-fullwidth .drawer-inner{ position:fixed !important; top:72px !important; left:16px !important; right:16px !important; bottom:auto !important; width:auto !important; max-width:none !important; height:auto !important; max-height:calc(100dvh - 96px) !important; overflow-y:auto !important; padding:6px 8px 14px !important; border-radius:0 0 26px 26px !important; background:rgba(250,248,245,0.82) !important; -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5); box-shadow:0 26px 50px rgba(16,32,27,0.18) !important; border:1px solid rgba(16,32,27,0.06) !important; border-top:none !important; transform:translateY(-12px) !important; opacity:0; transition:transform .30s cubic-bezier(.16,1,.3,1), opacity .22s ease !important; transform-origin:top center; } .popup-drawer.popup-drawer-layout-fullwidth.show-drawer .drawer-inner{ transform:translateY(0) !important; opacity:1 !important; } .popup-drawer .drawer-overlay{ top:72px !important; background:rgba(16,32,27,0.18) !important; } body.showing-popup-drawer-from-full .site-mobile-header-wrap .site-header-row-container-inner{ border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; } } /* Hamburger -> X an gleicher Stelle */ .site-mobile-header-wrap .menu-toggle-open[aria-expanded=true]{ opacity:0 !important; pointer-events:none !important; } .popup-drawer .menu-toggle-close{ position:fixed !important; top:24px !important; right:30px !important; width:40px !important; height:40px !important; display:grid !important; place-items:center !important; z-index:100001 !important; color:var(--global-palette3,#10201B) !important; background:transparent !important; } /* Leistungen-Submenue aufgeklappt, Toggle-Pfeil aus */ .popup-drawer .mobile-navigation .sub-menu{ display:block !important; } .popup-drawer .mobile-navigation .drawer-nav-drop-wrap{ display:none !important; } /* Badge Nur in DE */ .popup-drawer .im-badge-de > a{ display:inline-flex !important; align-items:center; gap:8px; } /* CTA: Header bis 400px, darunter Drawer */ @media (min-width:400px){ .popup-drawer .header-button{ display:none !important; } } @media (max-width:399.98px){ .site-mobile-header-wrap .header-button{ display:none !important; } } /* ===== IM-MOBILE-5 :: Korrekturen X-Position, CTA dunkel, Leistungen sichtbar 2026-08-01 ===== */ /* CTA dunkel (Header + Drawer) */ .popup-drawer .header-button, .site-mobile-header-wrap .header-button{ background-color:var(--global-palette3,#10201B) !important; color:var(--global-palette8,#FAF8F5) !important; } .popup-drawer .header-button:hover, .site-mobile-header-wrap .header-button:hover{ background-color:var(--global-palette1,#0B3B2E) !important; color:var(--global-palette8,#FAF8F5) !important; } /* Leistungen-Parent sichtbar, nur Toggle-Pfeil aus */ .popup-drawer .mobile-navigation .drawer-nav-drop-wrap{ display:block !important; } .popup-drawer .mobile-navigation .drawer-nav-drop-wrap > button, .popup-drawer .mobile-navigation .drawer-sub-toggle, .popup-drawer .mobile-navigation .dropdown-nav-toggle{ display:none !important; } /* X am Hamburger-Platz statt separatem Close-Button */ .popup-drawer .menu-toggle-close{ display:none !important; } .popup-drawer.popup-drawer-layout-fullwidth{ pointer-events:none !important; } .popup-drawer.popup-drawer-layout-fullwidth .drawer-inner, .popup-drawer.popup-drawer-layout-fullwidth .drawer-overlay{ pointer-events:auto !important; } .site-mobile-header-wrap .menu-toggle-open[aria-expanded=true]{ opacity:1 !important; pointer-events:auto !important; position:relative; } .site-mobile-header-wrap .menu-toggle-open[aria-expanded=true] .menu-toggle-icon{ opacity:0 !important; } .site-mobile-header-wrap .menu-toggle-open[aria-expanded=true]::before, .site-mobile-header-wrap .menu-toggle-open[aria-expanded=true]::after{ content:""; position:absolute; top:50%; left:50%; width:20px; height:2px; background:var(--global-palette3,#10201B); border-radius:2px; } .site-mobile-header-wrap .menu-toggle-open[aria-expanded=true]::before{ transform:translate(-50%,-50%) rotate(45deg); } .site-mobile-header-wrap .menu-toggle-open[aria-expanded=true]::after{ transform:translate(-50%,-50%) rotate(-45deg); } /* ===== IM-MOBILE-6 :: leeren Drawer-Header ausblenden + Top-Padding ===== */ .popup-drawer .drawer-header{ display:none !important; } .popup-drawer.popup-drawer-layout-fullwidth .drawer-inner{ padding-top:14px !important; } /* ===== IM-MOBILE-7 :: Slide-in nicht page-blockierend ===== */ .wp-block-kadence-conversions-conversion.kadence-conversion-slide_in{ pointer-events:none !important; } .wp-block-kadence-conversions-conversion.kadence-conversion-slide_in .kadence-conversion{ pointer-events:auto !important; } /* ===== IM-MOBILE-8 :: Menue-Feinschliff an Entwurf (Divider, Label, Spacing) 2026-08-01 ===== */ /* Dezenter Divider unter der Header-Zeile (Pille) */ .popup-drawer.popup-drawer-layout-fullwidth .drawer-inner{ border-top:1px solid rgba(16,32,27,0.08) !important; padding-top:10px !important; } /* Keine Divider zwischen einzelnen Menuepunkten */ .popup-drawer .mobile-navigation li, .popup-drawer .mobile-navigation .menu-item, .popup-drawer .mobile-navigation a{ border:0 !important; } /* EIN Gruppen-Trenner nach Leistungen (vor Referenzen) */ .popup-drawer .mobile-navigation .menu-item-has-children + .menu-item{ border-top:1px solid rgba(16,32,27,0.10) !important; margin-top:12px !important; padding-top:14px !important; } /* LEISTUNGEN als Label (uppercase, gedaempft) */ .popup-drawer .mobile-navigation .menu-item-has-children > .drawer-nav-drop-wrap > a{ text-transform:uppercase !important; letter-spacing:0.12em !important; font-size:12px !important; font-weight:700 !important; color:rgba(16,32,27,0.42) !important; padding-bottom:4px !important; } /* Sub-Items buendig (kein Extra-Einzug) */ .popup-drawer .mobile-navigation .sub-menu{ padding-left:0 !important; margin-left:0 !important; } /* Luftigeres Spacing */ .popup-drawer .mobile-navigation a{ padding-top:11px !important; padding-bottom:11px !important; } /* ===== IM-MOBILE-9 :: Karte gerundet, Typo, Badge, Login-Icon 2026-08-01 ===== */ @media (max-width:1024px){ .popup-drawer.popup-drawer-layout-fullwidth .drawer-inner{ top:80px !important; border-radius:26px !important; border:1px solid rgba(16,32,27,0.06) !important; padding-top:16px !important; } .popup-drawer .drawer-overlay{ top:80px !important; } body.showing-popup-drawer-from-full .site-mobile-header-wrap .site-header-row-container-inner{ border-bottom-left-radius:28px !important; border-bottom-right-radius:28px !important; } } /* Menue-Item-Typografie an Entwurf: 16px medium */ .popup-drawer .mobile-navigation a{ font-size:16px !important; font-weight:500 !important; } /* Badge nach rechts */ .popup-drawer .im-badge-de > a{ display:flex !important; justify-content:space-between !important; align-items:center; width:100%; gap:8px; } /* ===== IM-MOBILE-10 :: Menue in die Pille (eine Karte, browser-robust) 2026-08-01 ===== */ @media (max-width:1024px){ .site-mobile-header-wrap .site-header-row-container-inner{ overflow:hidden !important; -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4); } .site-header, .site-header-wrap, .site-header-inner-wrap, .site-mobile-header-wrap{ overflow:visible !important; } .site-mobile-header-wrap .popup-drawer{ position:static !important; inset:auto !important; display:block !important; width:100% !important; height:auto !important; max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.16,1,.3,1); background:transparent !important; box-shadow:none !important; pointer-events:auto !important; z-index:auto !important; } .site-mobile-header-wrap .popup-drawer.show-drawer{ max-height:78vh; overflow-y:auto; } .site-mobile-header-wrap .popup-drawer .drawer-overlay, .site-mobile-header-wrap .popup-drawer .drawer-header{ display:none !important; } .site-mobile-header-wrap .popup-drawer .drawer-inner{ position:static !important; inset:auto !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:100% !important; max-width:none !important; height:auto !important; max-height:none !important; transform:none !important; opacity:1 !important; background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; border-top:1px solid rgba(16,32,27,0.08) !important; margin:0 !important; padding:14px 4px 16px !important; } .site-mobile-header-wrap .popup-drawer .mobile-navigation a{ padding-top:8px !important; padding-bottom:8px !important; } } /* ===== IM-MOBILE-11 :: Fix Stacking + Popup waehrend Menue aus ===== */ .site-mobile-header-wrap .popup-drawer .mobile-navigation ul{ display:block !important; } body.showing-popup-drawer-from-full .wp-block-kadence-conversions-conversion{ display:none !important; } /* ===== IM-MOBILE-12 :: CTA-Sichtbarkeit fixen (Drawer liegt jetzt im Header-Wrap) ===== */ @media (max-width:399.98px){ .site-mobile-header-wrap .popup-drawer .header-button{ display:inline-flex !important; } } @media (min-width:400px){ .site-mobile-header-wrap .popup-drawer .header-button{ display:none !important; } } .site-mobile-header-wrap .popup-drawer .header-button{ margin-top:6px !important; } /* ===== IM-MOBILE-13 :: drawer-content Padding reduzieren ===== */ .site-mobile-header-wrap .popup-drawer .drawer-content{ padding:0 8px 10px !important; } /* ============================================================ IM-WEB :: Seite "Websites fuer Steuerberater" (id 140) ============================================================ */ /* Hero Glow */ .im-web-hero{ position:relative; overflow:hidden; } .im-web-hero::before{ content:""; position:absolute; top:-220px; right:-220px; width:520px; height:520px; border-radius:50%; background:rgba(198,242,78,0.16); filter:blur(150px); pointer-events:none; } .im-web-hero > .kt-row-column-wrap{ position:relative; z-index:1; } /* Chips */ /* Device-Mockup */ .im-web-mockup{ position:relative; } .im-web-browser{ overflow:hidden; border-radius:16px; border:1px solid rgba(16,32,27,0.10); background:#fff; box-shadow:0 32px 80px rgba(11,59,46,0.28); } .im-web-bar{ display:flex; align-items:center; gap:6px; border-bottom:1px solid rgba(16,32,27,0.08); background:var(--global-palette7); padding:12px 16px; } .im-web-bar > span{ width:10px; height:10px; border-radius:50%; background:rgba(16,32,27,0.15); } .im-web-bar em{ margin-left:12px; background:#fff; border-radius:5px; padding:2px 12px; font-size:10px; font-style:normal; color:rgba(16,32,27,0.5); } .im-web-site{ background:var(--global-palette8); } .im-web-nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 20px; } .im-web-nav b{ font-size:14px; font-weight:700; color:var(--global-palette3); } .im-web-navlinks{ display:flex; gap:12px; } .im-web-navlinks i{ width:32px; height:6px; border-radius:999px; background:rgba(16,32,27,0.2); } .im-web-navlinks i.on{ background:rgba(11,59,46,0.7); } .im-web-band{ background:var(--global-palette1); padding:28px 20px; } .im-web-band .l1{ display:block; height:10px; width:60%; border-radius:999px; background:rgba(250,248,245,0.85); } .im-web-band .l2{ display:block; height:10px; width:40%; border-radius:999px; background:rgba(250,248,245,0.5); margin-top:8px; } .im-web-band .cta{ display:block; height:24px; width:96px; border-radius:999px; background:var(--global-palette2); margin-top:16px; } .im-web-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:20px; } .im-web-cards .c{ border-radius:8px; border:1px solid rgba(16,32,27,0.10); background:#fff; padding:12px; } .im-web-cards .ic{ display:block; width:20px; height:20px; border-radius:5px; background:rgba(11,59,46,0.15); margin-bottom:8px; } .im-web-cards .t{ display:block; height:6px; width:100%; border-radius:999px; background:rgba(16,32,27,0.12); margin-bottom:5px; } .im-web-cards .t.s{ width:66%; margin-bottom:0; } .im-web-phone{ position:absolute; bottom:-24px; left:-24px; width:112px; overflow:hidden; border-radius:20px; border:4px solid var(--global-palette3); background:#fff; box-shadow:0 20px 40px rgba(11,59,46,0.25); } .im-web-ptop{ display:flex; align-items:center; justify-content:space-between; background:var(--global-palette8); padding:8px 10px; } .im-web-ptop b{ font-size:7px; font-weight:700; color:var(--global-palette3); } .im-web-ptop i{ width:12px; height:4px; border-radius:999px; background:rgba(16,32,27,0.25); } .im-web-pband{ background:var(--global-palette1); padding:16px 10px; } .im-web-pband .l1{ display:block; height:6px; width:80%; border-radius:999px; background:rgba(250,248,245,0.85); } .im-web-pband .cta{ display:block; height:12px; width:48px; border-radius:999px; background:var(--global-palette2); margin-top:6px; } .im-web-pcards{ display:flex; flex-direction:column; gap:6px; padding:10px; background:var(--global-palette8); } .im-web-pcards span{ display:block; height:24px; border-radius:4px; background:#fff; box-shadow:0 1px 3px rgba(16,32,27,0.1); } @media (max-width:767px){ .im-web-phone{ display:none; } } /* IM-WEB :: Ablauf-Steps */ .im-web-steps > .kt-row-column-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .im-web-steps .wp-block-kadence-column{ flex:1 1 auto; max-width:none; width:auto; } @media (max-width:1024px){ .im-web-steps > .kt-row-column-wrap{ grid-template-columns:1fr; } } /* IM-WEB :: Referenzen */ .im-web-refex > .kt-row-column-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; } .im-web-refex .wp-block-kadence-column{ flex:1 1 auto; max-width:none; width:auto; overflow:hidden; } .im-refcard{ transition:transform .3s cubic-bezier(.16,1,.3,1); } .im-refcard:hover{ transform:translateY(-6px); } .im-refshot{ position:relative; margin:12px 12px 0; aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:var(--global-palette6); } .im-refbar{ position:absolute; inset:0 0 auto 0; display:flex; gap:5px; padding:8px 12px; background:rgba(255,255,255,0.7); } .im-refbar span{ width:6px; height:6px; border-radius:50%; background:rgba(16,32,27,0.2); } .im-refwin{ position:absolute; left:24px; right:24px; top:40px; border-radius:6px 6px 0 0; background:rgba(11,59,46,0.8); padding:12px; } .im-refwin .l{ display:block; height:6px; width:66%; border-radius:999px; background:rgba(250,248,245,0.7); } .im-refwin .b{ display:block; height:16px; width:48px; border-radius:4px; background:var(--global-palette2); margin-top:6px; } .im-refhover{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(11,59,46,0); transition:background .3s; } .im-refhover b{ display:inline-flex; align-items:center; gap:6px; background:var(--global-palette8); color:var(--global-palette3); font-size:14px; font-weight:700; padding:10px 20px; border-radius:999px; opacity:0; transform:translateY(8px); transition:all .3s; } .im-refcard:hover .im-refhover{ background:rgba(11,59,46,0.55); } .im-refcard:hover .im-refhover b{ opacity:1; transform:translateY(0); } /* Testimonials 2-col */ .im-web-tgrid > .kt-row-column-wrap{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:stretch; } .im-web-tgrid .wp-block-kadence-column{ flex:1 1 auto; max-width:none; width:auto; } .im-quote{ display:inline-block; color:var(--global-palette2); } .im-quote svg{ width:30px; height:26px; } /* Mehr-Referenzen-Link */ .im-web-morelink a{ display:inline-flex; align-items:center; gap:8px; color:var(--global-palette1); text-decoration:none; transition:color .2s; } .im-web-morelink a:hover{ color:var(--global-palette3); } @media (max-width:1024px){ .im-web-refex > .kt-row-column-wrap{ grid-template-columns:1fr; } .im-web-tgrid > .kt-row-column-wrap{ grid-template-columns:1fr; } } /* IM-WEB :: Erweiterungen 4-Karten */ .im-web-ext4 > .kt-inside-inner-col{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .im-web-ext4 .wp-block-kadence-infobox{ height:100%; } .im-web-ext4 .kt-blocks-info-box-link-wrap{ height:100%; transition:background .25s; } .im-web-ext4 .kt-blocks-info-box-learnmore{ margin-top:16px; } @media (max-width:1024px){ .im-web-ext4 > .kt-inside-inner-col{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .im-web-ext4 > .kt-inside-inner-col{ grid-template-columns:1fr; } } /* IM-WEB :: Preis-Karte */ .im-web-preiscard > .kt-row-column-wrap{ display:grid; grid-template-columns:60% 40%; gap:40px; align-items:center; } .im-web-preiscard .wp-block-kadence-column{ flex:1 1 auto; max-width:none; width:auto; } @media (max-width:900px){ .im-web-preiscard > .kt-row-column-wrap{ grid-template-columns:1fr; } } /* IM-WEB :: FAQ (native details) */ /* IM-WEB :: Website-Check CTA */ .im-web-ctabadge{ width:fit-content; margin-left:auto !important; margin-right:auto !important; } /* IM-WEB :: Grosse Karten mobil weniger Padding */ @media (max-width:767px){ .im-web-preiscard > .kt-row-column-wrap, .im-web-ctacard > .kt-row-column-wrap{ padding-left:24px !important; padding-right:24px !important; padding-top:40px !important; padding-bottom:40px !important; } .im-web-pricebox{ padding-left:20px !important; padding-right:20px !important; } } /* ===== IM-WEB :: Feinschliff-Fixes 2026-08-02 ===== */ /* FAQ: Spalte volle Breite statt auf Inhalt schrumpfen */ .im-web-faqsec .wp-block-kadence-column{ width:100% !important; max-width:768px; margin-left:auto !important; margin-right:auto !important; } .im-web-faqsec .kt-inside-inner-col{ width:100%; } /* FAQ-Badge: "Haeufige Fragen" als zentrierte Pille */ .im-web-faqsec .kt-inside-inner-col > p.wp-block-kadence-advancedheading:first-child{ display:flex; width:-moz-fit-content; width:fit-content; margin-left:auto; margin-right:auto; align-items:center; gap:9px; border:1px solid rgba(16,32,27,0.12); border-radius:999px; padding:6px 16px; } .im-web-faqsec .kt-inside-inner-col > p.wp-block-kadence-advancedheading:first-child::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--global-palette1); flex:0 0 auto; } /* Preis-Grid: fr-Einheiten (kein Overflow durch Gap) */ .im-web-preiscard > .kt-row-column-wrap{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) !important; } /* Hero-Chips: Abstand unter Buttons (Theme-ul-Reset ueberschrieb) */ /* Hero-Button: Icon smooth animieren */ .im-btn-lime svg{ transition:transform .28s cubic-bezier(.16,1,.3,1); } /* Gleiche Kartenhoehen: innere BG-Box fuellt gestreckte Grid-Zelle */ .im-web-steps .kt-inside-inner-col, .im-web-tgrid .wp-block-kadence-column, .im-web-tgrid .kt-inside-inner-col, .im-web-refex .kt-inside-inner-col{ height:100% !important; } n /* ===== IM :: Native Mega-Menu Skin (Struktur nativ, nur Optik/Icons) 2026-08-03 ===== */ .kadence-menu-mega-enabled > .sub-menu{ background:var(--global-palette8) !important; border:1px solid rgba(16,32,27,0.08) !important; border-radius:20px !important; box-shadow:0 24px 64px rgba(16,32,27,0.16) !important; padding:18px !important; width:600px !important; max-width:600px !important; min-width:0 !important; left:50% !important; transform:translateX(-50%) !important; grid-template-columns:1fr 1fr !important; gap:6px 20px !important; } .kadence-menu-mega-enabled > .sub-menu > .im-mm-group{ border:0 !important; background:transparent !important; } .kadence-menu-mega-enabled > .sub-menu > .im-mm-group > a{ color:rgba(16,32,27,0.42) !important; background:transparent !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; padding:8px 12px 6px !important; pointer-events:none; cursor:default; } .kadence-menu-mega-enabled > .sub-menu .drawer-sub-toggle, .kadence-menu-mega-enabled > .sub-menu .dropdown-nav-toggle, .kadence-menu-mega-enabled > .sub-menu .dropdown-nav-special-toggle, .kadence-menu-mega-enabled .screen-reader-text{ display:none !important; } .kadence-menu-mega-enabled > .sub-menu .sub-menu{ display:block !important; position:static !important; opacity:1 !important; visibility:visible !important; transform:none !important; background:transparent !important; box-shadow:none !important; border:0 !important; padding:0 !important; width:auto !important; min-width:0 !important; } .kadence-menu-mega-enabled > .sub-menu .sub-menu > li{ border:0 !important; } .kadence-menu-mega-enabled > .sub-menu .sub-menu > li > a{ position:relative; display:flex !important; align-items:center; color:var(--global-palette3) !important; background:transparent !important; font-size:15px !important; font-weight:500 !important; padding:9px 14px 9px 44px !important; border-radius:12px !important; white-space:nowrap; } .kadence-menu-mega-enabled > .sub-menu .sub-menu > li > a:hover{ background:var(--global-palette7) !important; color:var(--global-palette1) !important; } .kadence-menu-mega-enabled .im-mi > a::before{ content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; background-color:var(--global-palette1); -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; } .kadence-menu-mega-enabled .menu-highlight-item{ margin-left:8px !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.03em !important; color:var(--global-palette8) !important; background:var(--global-palette1) !important; padding:2px 8px !important; border-radius:999px !important; text-transform:none !important; } .im-mi-globe{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%2710%27/%3E%3Cpath%20d=%27M2%2012h20%27/%3E%3Cpath%20d=%27M12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201-4%2010%2015.3%2015.3%200%200%201-4-10%2015.3%2015.3%200%200%201%204-10z%27/%3E%3C/svg%3E"); } .im-mi-users{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%27/%3E%3Ccircle%20cx=%279%27%20cy=%277%27%20r=%274%27/%3E%3Cpath%20d=%27M22%2021v-2a4%204%200%200%200-3-3.87%27/%3E%3Cpath%20d=%27M16%203.13a4%204%200%200%201%200%207.75%27/%3E%3C/svg%3E"); } .im-mi-file{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%27/%3E%3Cpath%20d=%27M14%202v6h6%27/%3E%3Cpath%20d=%27M16%2013H8%27/%3E%3Cpath%20d=%27M16%2017H8%27/%3E%3Cpath%20d=%27M10%209H8%27/%3E%3C/svg%3E"); } .im-mi-calc{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M21.21%2015.89A10%2010%200%201%201%208%202.83%27/%3E%3Cpath%20d=%27M22%2012A10%2010%200%200%200%2012%202v10z%27/%3E%3C/svg%3E"); } .im-mi-video{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27m22%208-6%204%206%204V8z%27/%3E%3Crect%20x=%272%27%20y=%276%27%20width=%2714%27%20height=%2712%27%20rx=%272%27/%3E%3C/svg%3E"); } .im-mi-book{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M2%203h6a4%204%200%200%201%204%204v14a3%203%200%200%200-3-3H2z%27/%3E%3Cpath%20d=%27M22%203h-6a4%204%200%200%200-4%204v14a3%203%200%200%201%203-3h7z%27/%3E%3C/svg%3E"); } .im-mi-pen{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%2020h9%27/%3E%3Cpath%20d=%27M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4z%27/%3E%3C/svg%3E"); } #menu-item-16 > .sub-menu{ background:var(--global-palette8) !important; border:1px solid rgba(16,32,27,0.08) !important; border-radius:20px !important; box-shadow:0 24px 64px rgba(16,32,27,0.16) !important; padding:28px 20px 20px !important; width:600px !important; max-width:600px !important; min-width:0 !important; grid-template-columns:1fr 1fr !important; gap:6px 20px !important; position:fixed !important; top:82px !important; left:50% !important; transform:translateX(-50%) !important; } #menu-item-16 > .sub-menu > .im-mm-group{ background:transparent !important; } .menu-highlight-item{ display:inline-block; margin-left:8px !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.03em !important; color:var(--global-palette8) !important; background:var(--global-palette1) !important; padding:2px 8px !important; border-radius:999px !important; text-transform:none !important; vertical-align:middle; line-height:1.6; } #menu-item-16 > .sub-menu > .im-mm-cta{grid-column:1 / -1 !important;margin-top:14px !important;padding-top:0 !important;} #menu-item-16 > .sub-menu > .im-mm-cta > a{position:relative;display:flex !important;align-items:center;gap:10px;background:var(--global-palette7) !important;color:var(--global-palette3) !important;font-size:14px !important;font-weight:600 !important;padding:13px 16px 13px 46px !important;border-radius:12px !important;white-space:nowrap;} #menu-item-16 > .sub-menu > .im-mm-cta > a:hover{background:#DDE6C9 !important;color:var(--global-palette1) !important;} #menu-item-16 > .sub-menu > .im-mm-cta > a::before{content:'';position:absolute;left:18px;top:50%;transform:translateY(-50%);width:17px;height:17px;background-color:var(--global-palette1);-webkit-mask:var(--ic-spark) center/contain no-repeat;mask:var(--ic-spark) center/contain no-repeat;} .im-mm-cta{--ic-spark:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m12%203-1.9%205.8a2%202%200%200%201-1.3%201.3L3%2012l5.8%201.9a2%202%200%200%201%201.3%201.3L12%2021l1.9-5.8a2%202%200%200%201%201.3-1.3L21%2012l-5.8-1.9a2%202%200%200%201-1.3-1.3z%22/%3E%3Cpath%20d=%22M5%203v4%22/%3E%3Cpath%20d=%22M19%2017v4%22/%3E%3Cpath%20d=%22M3%205h4%22/%3E%3Cpath%20d=%22M17%2019h4%22/%3E%3C/svg%3E');} /* ===== Fluent Forms: DSGVO-Checkbox Abstand ===== */ .fluentform .ff_tc_checkbox{ padding-right:12px; } /* im-form-dark: DSGVO-/Checkbox-Text + Links */ .im-form-dark .ff-el-form-check-label, .im-form-dark .ff_tc_label{ color:rgba(250,248,245,0.85) !important; } .im-form-dark .fluentform a, .im-form-dark .ff_tc_label a{ color:var(--global-palette2) !important; } .im-form-dark .fluentform .text-danger, .im-form-dark .fluentform .error{ color:#ffb4a2 !important; } /* ===== Fluent Forms: Hilfe-Tooltips (Info-Icon neben dem Label) ===== */ /* Plugin-Default war 11px Schrift, Zeilenhoehe 1,2 und praktisch unbegrenzte Breite (1084px) -> eine duenne, sehr breite Leiste, schwer lesbar. ACHTUNG: max-width setzt das Fluent-Forms-JS INLINE (zusammen mit top/left fuer die Positionierung) -> nur dafuer ist !important noetig. Alle anderen Angaben gewinnen ohne, weil diese Datei nach der Plugin-CSS laedt. */ .ff-el-pop-content{ max-width: 340px !important; /* vorher inline bis 1084px */ font-size: 15px; /* vorher 11px */ line-height: 1.55; /* vorher 1,2 - bei 15px sonst gedraengt */ padding: 12px 14px; /* vorher 10px, passt zur groesseren Schrift */ text-align: left; /* mehrzeilig linksbuendig besser lesbar als zentriert */ /* Design-Angleichung (Plugin-Default war reines Schwarz, Radius 3px, schwarzer Schatten - alles drei widerspricht dem DESIGN.md). */ background: #10201B; /* Ink statt #000 - "kein reines Schwarz" */ border-radius: 12px; /* Radius-Skala des Projekts (klein), vorher 3px */ box-shadow: 0 20px 40px rgba(11,59,46,0.18); /* Evergreen-getoent, bereits im Projekt verwendet */ color: var(--global-palette8, #FAF8F5); /* Porcelain statt reinem Weiss - das Design nutzt auf Dunkel kein #FFF */ } /* Info-Icon neben dem Label: Lime-Scheibe mit dunklem Glyph. Plugin-Default war fill:var(--fluentform-primary) = Blau, Kontrast nur 2,78:1 (unter der 3:1-Anforderung fuer UI-Elemente). Lime EINFACH als fill waere mit 1,3:1 praktisch unsichtbar und widerspricht der Design-Regel "Lime nie als Farbe auf hellem Grund" - daher das Design-eigene Muster: Lime als FLAECHE, Inhalt in Ink. Kontrast Glyph/Flaeche = 12,9:1. */ .fluentform .ff-el-tooltip{ display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--global-palette2, #C6F24E); margin-left: 6px; transition: transform .15s ease; } .fluentform .ff-el-tooltip:hover{ transform: scale(1.08); } .fluentform .ff-el-tooltip svg{ width: 12px; height: 12px; fill: var(--global-palette3, #10201B); /* Ink statt Plugin-Blau */ } @media (prefers-reduced-motion:reduce){ .fluentform .ff-el-tooltip{ transition:none } .fluentform .ff-el-tooltip:hover{ transform:none } } /* ===== Seiten-Einstellung "Content Width: schmal" auf Kadence-Rows durchreichen ===== Kadence setzt bei "narrow" nur .content-container/.hero-container auf --global-content-narrow-width (842px). Rows mit align:full brechen aus diesem Container aus und holen ihre Innenbreite aus --global-content-width (1152px) - die Seiten-Einstellung wirkt dort also NICHT. Betrifft z. B. die Online-Rechner- Unterseiten, die komplett aus alignfull-Rows bestehen. Spezifitaet 3 Klassen schlaegt Kadences .kb-row-layout-id > .kt-row-column-wrap (2 Klassen), zusaetzlich laedt diese Datei spaeter -> kein !important noetig. Wirkt nur auf Seiten, die BEIDES sind: narrow UND mit Rows gebaut. */ .content-width-narrow .wp-block-kadence-rowlayout > .kt-row-column-wrap{ max-width: var(--global-content-narrow-width); } /* AUSNAHME: Die Rechner-Zeile bleibt breit. Die Rechner-Karte .im-or-calc ist auf max-width:920px ausgelegt UND hat overflow:hidden. Bei 842px Zeilenbreite bleiben nur 794px Karte / 770px iframe -> die Ergebnis-Tabelle des Drittanbieter-Rechners wird ABGESCHNITTEN (die Spalte "Jahr" verschwindet komplett, nicht scrollbar). Daher hier die volle Breite; die Karte deckelt sich selbst bei 920px. */ .content-width-narrow .wp-block-kadence-rowlayout:has(.im-or-calc) > .kt-row-column-wrap{ max-width: var(--global-content-width); } /* ===== Kadence-Bild-Tooltip (Tippy.js) ================================== Der Kadence-Image-Block kann einen Tooltip tragen (Bild-Einstellung "Tooltip", Attribut tooltipPlacement). Kadence rendert ihn ueber Tippy.js (popper.min.js + kb-tippy.min.js) als .tippy-box DIREKT AM -- nicht innerhalb des Blocks. Default war der Bibliotheks-Look: #333 Hintergrund, 14px, Radius 4px, Padding 5/9, kein Schatten. Hier auf exakt dieselben Werte gezogen wie die Fluent-Forms-Tooltips weiter oben, damit die Site nur EINE Tooltip-Optik hat. ACHTUNG: max-width setzt Tippy INLINE -- nur dafuer ist !important noetig. Stand 2026-09-01 genutzt auf Seite 261 (Recruiting, Demo-Screenshot); die Regeln gelten site-weit fuer jeden weiteren Kadence-Tooltip. */ .tippy-box{ background: #10201B; /* Ink, identisch zum FF-Tooltip */ color: var(--global-palette8, #FAF8F5); /* Porcelain, kein reines Weiss */ border-radius: 12px; /* Radius-Skala des Projekts, vorher 4px */ font-size: 15px; /* vorher 14px */ line-height: 1.55; text-align: left; max-width: 340px !important; /* Tippy setzt max-width inline */ box-shadow: 0 20px 40px rgba(11,59,46,0.18); /* Evergreen-getoent wie im Projekt ueblich */ } .tippy-box > .tippy-content{ padding: 12px 14px; /* vorher 5px 9px */ } /* Der Pfeil wird pro Richtung ueber ::before eingefaerbt. */ .tippy-box[data-placement^='top'] > .tippy-arrow::before{ border-top-color: #10201B; } .tippy-box[data-placement^='bottom'] > .tippy-arrow::before{ border-bottom-color: #10201B; } .tippy-box[data-placement^='left'] > .tippy-arrow::before{ border-left-color: #10201B; } .tippy-box[data-placement^='right'] > .tippy-arrow::before{ border-right-color: #10201B; } /* ===== Beispiel-Karten (Startseite): echte Website-Screenshots ===== Ersetzt seit 2026-09-02 die stilisierte Fenster-Grafik (.im-ex-window). Der Container .im-ex-shot gibt Seitenverhaeltnis 16/10, Radius und overflow:hidden bereits vor - das Bild fuellt ihn nur noch aus. object-position:top haelt den Kopfbereich der Website im Bild, weil Screenshots unten meist Fliesstext zeigen. */ .im-ex-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; } /* ===== Rabatt-Hinweis der Was-ist-neu-Aktion ([im_rabatt]) ===== Drei Stile, gesteuert ueber data-stil. Das Element wird per JS befuellt und eingeblendet (siehe inc/infomedia-aktion.php) - ohne aktive Aktion bleibt es unsichtbar. "pille" folgt dem Design-Muster "Lime als Flaeche, Inhalt in Ink" - Lime als Textfarbe auf Hell waere laut DESIGN.md unzulaessig. */ .im-rabatt[data-stil="pille"]{ display:inline-flex; align-items:center; gap:8px; background:var(--global-palette2,#C6F24E); color:var(--global-palette3,#10201B); font-size:14px; font-weight:700; line-height:1; padding:9px 16px; border-radius:999px; white-space:nowrap; } .im-rabatt[data-stil="text"]{ font-weight:700; color:var(--global-palette1,#0B3B2E); white-space:nowrap; } .im-rabatt[data-stil="satz"]{ font-weight:600; color:var(--global-palette1,#0B3B2E); } /* Satz-Inhalt in Pillen-Optik. Bewusst OHNE font-size: die Groesse kommt aus dem Umfeld (wie bei stil="satz"), damit sich die Pille in Fliesstext und Ueberschriften gleichermassen einfuegt. Kein nowrap - der Satz darf auf schmalen Viewports umbrechen. */ .im-rabatt[data-stil="satzpille"]{ display:inline-flex; align-items:center; gap:8px; background:var(--global-palette2,#C6F24E); color:var(--global-palette3,#10201B); font-weight:700; line-height:1.35; padding:10px 18px; border-radius:999px; } /* Auf Smartphones etwas kleiner: die Satz-Varianten sind lang und sollen auf schmalen Viewports nicht zu viel Raum einnehmen. Relativ (em), damit die Vererbung aus dem Umfeld erhalten bleibt. */ @media (max-width:767px){ .im-rabatt[data-stil="satz"]{font-size:0.9em} .im-rabatt[data-stil="satzpille"]{font-size:0.9em;padding:8px 14px} }