/*
Theme Name: sage niro
Theme URI: https://sageniro.de
Description: Child-Theme von Hello Elementor mit dem sage niro Design-System (Tokens, Basis-Typografie, Logo).
Author: SAGE NIRO GmbH
Template: hello-elementor
Version: 1.0.0
*/

/* ===== fonts ===== */
/* Outfit ist die Hausschrift (wie sagemedia.de), auch für die Logo-Wortmarke. Von Google Fonts geladen, für DSGVO-konformes Hosting lokal einbinden. */
/* Outfit lokal aus /fonts (SIL Open Font License), keine Verbindung zu Google */
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/outfit-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/outfit-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ===== colors ===== */
:root{
/* Base palette — from the supplied logo system (Anwendung.dc.html).
   Akzent (green/lime) seit 30.10.2026 im Grün von niro-media.de: lime-500 = #A1D334 für dunkle Flächen,
   green-500/600 = dunklere Stufen desselben Tons, damit Text auf hellem Grund lesbar bleibt. */
--sn-anthracite-900:#0B0C0E;
--sn-anthracite-800:#14151A;
--sn-anthracite-700:#16171C;
--sn-anthracite-600:#3A372F;
--sn-gray-500:#5C584F;
--sn-gray-400:#6E695F;
--sn-gray-300:#8F8A80;
--sn-gray-250:#B9B3A7;
--sn-gray-200:#D9D3C7;
--sn-gray-100:#EFE9DD;
--sn-offwhite-50:#F6F2EA;
--sn-white:#FBF8F2;
--sn-green-600:#526D18;
--sn-green-500:#688A1E;
--sn-green-100:#EFF8DE;
--sn-green-50:#F7FBEE;
--sn-lime-500:#A1D334;
--sn-lime-400:#B5DC60;
--sn-red-500:#B8432D;
--sn-red-100:#FBE7E5;
--sn-blue-500:#3B74C4;
--sn-blue-100:#E6EEF9;
/* Semantic */
--color-primary:var(--sn-anthracite-900);
--color-primary-hover:var(--sn-anthracite-600);
--color-secondary:var(--sn-anthracite-700);
--color-accent:var(--sn-green-500);
--color-accent-hover:var(--sn-green-600);
--color-accent-soft:var(--sn-green-100);
--color-accent-on-dark:var(--sn-lime-500);
--color-accent-on-dark-hover:var(--sn-lime-400);
--text-heading:var(--sn-anthracite-800);
--text-body:var(--sn-gray-500);
--text-muted:var(--sn-gray-400);
--text-on-dark:var(--sn-offwhite-50);
--text-on-dark-muted:var(--sn-gray-250);
--text-on-accent:var(--sn-anthracite-800);
--text-link:var(--sn-anthracite-800);
--text-link-hover:var(--sn-green-600);
--surface-page:var(--sn-offwhite-50);
--surface-alt:var(--sn-white);
--surface-card:var(--sn-white);
--surface-card-on-dark:rgba(243,238,228,.06);
--surface-dark:var(--sn-anthracite-900);
--surface-dark-2:var(--sn-anthracite-700);
--surface-input:var(--sn-white);
--border-default:var(--sn-gray-200);
--border-strong:var(--sn-gray-300);
--border-on-dark:rgba(243,238,228,.12);
--border-focus:var(--sn-green-500);
--state-success:var(--sn-green-500);
--state-success-soft:var(--sn-green-100);
--state-error:var(--sn-red-500);
--state-error-soft:var(--sn-red-100);
--state-info:var(--sn-blue-500);
--state-info-soft:var(--sn-blue-100);
--chart-line:var(--sn-green-500);
--chart-line-on-dark:var(--sn-lime-500);
--chart-line-2:var(--sn-gray-300);
--chart-grid:var(--sn-gray-200);
--chart-grid-on-dark:rgba(255,255,255,.12);
}

/* ===== typography ===== */
:root{
--font-sans:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-logo:var(--font-sans);
--font-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
/* Scale: H1 48 SemiBold, H2 32 SemiBold, body 17 Regular, accent 15 Medium. Logo wordmark is Outfit Medium. */
--fs-display:clamp(40px,3.2vw + 20px,60px); 
--fs-h1:clamp(34px,2.4vw + 18px,48px); 
--fs-h2:clamp(26px,1.4vw + 16px,32px); 
--fs-h3:22px;
--fs-h4:18px;
--fs-body:17px;
--fs-body-sm:15px;
--fs-accent:15px;
--fs-caption:13px;
--fs-eyebrow:14px;
--fs-kpi:clamp(40px,3vw + 20px,56px); 
--leading-tight:1.08;
--leading-snug:1.25;
--leading-normal:1.6;
--tracking-tight:-0.01em;
--tracking-normal:0;
--tracking-eyebrow:0.14em;
--tracking-tagline:0.34em;
}

/* ===== spacing ===== */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
--section-y:clamp(64px,8vw,112px); 
--container-max:1200px;
--container-narrow:760px;
--container-pad:clamp(20px,4vw,40px);
--grid-gap:24px;
--radius-sm:8px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;
--control-h-sm:36px;--control-h-md:44px;--control-h-lg:52px;
}

/* ===== effects ===== */
:root{
--shadow-none:none;
--shadow-float:0 8px 24px rgba(20,23,28,.12),0 1px 2px rgba(20,23,28,.08);
--shadow-dialog:0 24px 64px rgba(14,16,20,.32);
--focus-ring:0 0 0 3px rgba(161,211,52,.4);
--ease-out:cubic-bezier(.2,.7,.2,1); 
--duration-fast:120ms; 
--duration-base:200ms; 
--duration-slow:360ms; 
/* Cursor blink from the logo system */
--anim-cursor-blink:snblink 1.1s linear infinite; 
}
@keyframes snblink{0%,55%{opacity:1}56%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){:root{--anim-cursor-blink:none; }}

/* ===== base ===== */
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--leading-normal);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--text-heading);letter-spacing:var(--tracking-tight);text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:var(--weight-semibold);line-height:var(--leading-tight)}
h2{font-size:var(--fs-h2);font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
h3{font-size:var(--fs-h3);font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
h4{font-size:var(--fs-h4);font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
.sn-eyebrow{font-size:var(--fs-eyebrow);font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.sn-tagline{font-size:var(--fs-caption);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tagline);text-transform:uppercase;color:var(--text-muted);padding-left:var(--tracking-tagline)}
/* Text-cursor logo: <span class="sn-logo"><span>sage</span><i></i><span>niro</span></span>; font-size sets the scale */
.sn-logo{display:inline-flex;align-items:center;font-family:var(--font-sans);font-weight:var(--weight-medium);line-height:1;letter-spacing:-0.01em;color:var(--text-heading);text-decoration:none}
.sn-logo i{display:inline-block;width:.085em;height:1.1em;margin:0 .09em 0 .105em;border-radius:.025em;background:var(--color-accent);animation:var(--anim-cursor-blink)}
.sn-logo.on-dark{color:var(--text-on-dark)}.sn-logo.on-dark i{background:var(--color-accent-on-dark)}
.sn-logo.static i{animation:none}

/* Logo-Cursor für Elementor-Widgets (Header/Footer): Text „sage<span></span>niro“ + globale Klasse sn-logo-mark */
.sn-logo-mark a{display:inline-flex;align-items:center;color:inherit}
.sn-logo-mark span:empty{display:inline-block;width:.085em;height:1.1em;margin:0 .09em 0 .105em;border-radius:.025em;background:var(--color-accent-on-dark);animation:var(--anim-cursor-blink)}
.sn-logo-mark.on-light span:empty{background:var(--color-accent)}

/* Suchfeld-Motiv (nur Hero): Lupe per CSS, Cursor als <span></span> im Suchtext */
.sn-search-icon{position:relative;flex:0 0 18px;width:18px!important;height:18px}
body .sn-search-icon.sn-search-icon::before{content:""!important;position:absolute!important;left:0!important;top:0!important;width:11px!important;height:11px!important;border:2px solid var(--text-muted)!important;border-radius:50%!important;box-sizing:content-box!important}
.sn-search-icon::after{content:"";position:absolute;left:12px;top:12px;width:7px;height:2px;background:var(--text-muted);transform:rotate(45deg);transform-origin:left center}
.sn-search-query span:empty{display:inline-block;width:2px;height:1.15em;margin-left:2px;vertical-align:-0.2em;background:var(--color-accent);animation:var(--anim-cursor-blink)}
.sn-section .sn-logo-mark span:empty,.sn-card .sn-logo-mark span:empty{background:var(--color-accent)}

/* Mobil: Logo im Header nicht umbrechen */
.sn-logo-mark,.sn-logo-mark a{white-space:nowrap;flex-shrink:0}

/* ===== Kontaktformular (Contact Form 7) ===== */
.wpcf7 form{display:flex;flex-direction:column;gap:20px}
.sn-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:767px){.sn-form-grid{grid-template-columns:1fr}}
.sn-field{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-body-sm);font-weight:var(--weight-medium);color:var(--text-heading)}
.sn-field .wpcf7-form-control-wrap{display:block}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 select,.wpcf7 textarea{box-sizing:border-box;width:100%;min-height:var(--control-h-md);padding:10px 14px;font:400 16px/1.5 var(--font-sans);color:var(--text-heading);background:var(--surface-input);border:1px solid var(--border-default);border-radius:var(--radius-md);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.wpcf7 textarea{min-height:150px;resize:vertical}
.wpcf7 ::placeholder{color:var(--sn-gray-300)}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.sn-consent{font-size:14px;line-height:1.5;color:var(--text-muted)}
.sn-consent label{display:flex;gap:10px;align-items:flex-start}
.sn-consent input[type=checkbox]{margin-top:3px;width:16px;height:16px;accent-color:var(--color-accent)}
.sn-consent a{color:var(--text-heading);text-decoration:underline}
.wpcf7 .wpcf7-list-item{margin:0}
.wpcf7 input.sn-submit{align-self:flex-start;cursor:pointer;padding:12px 22px;font:500 15px/1.4 var(--font-sans);color:var(--text-on-accent);background:var(--color-accent-on-dark);border:0;border-radius:var(--radius-md);transition:background var(--duration-base) var(--ease-out)}
.wpcf7 input.sn-submit:hover{background:#DBBD84}
.wpcf7 input.sn-submit:disabled{opacity:.5;cursor:not-allowed}
.wpcf7-spinner{margin:0 0 0 12px}
.wpcf7-not-valid-tip{margin-top:6px;font-size:13px;color:var(--state-error)}
.wpcf7 .wpcf7-not-valid{border-color:var(--state-error)}
.wpcf7 form .wpcf7-response-output{margin:0;padding:12px 16px;border-radius:var(--radius-md);font-size:15px}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--state-success);background:var(--state-success-soft);color:var(--text-heading)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output{border-color:var(--state-error);background:var(--state-error-soft);color:var(--text-heading)}

/* ===== Mobil-Menü im Header (HTML-Widget mit <details>, ohne JavaScript) ===== */
.elementor-widget-html:has(.sn-mobile-nav){display:none}
@media (max-width:767px){
.elementor-widget-html:has(.sn-mobile-nav){display:block;position:static;width:auto;flex:0 0 auto}
.sn-mobile-nav summary{list-style:none;display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;box-sizing:border-box;cursor:pointer;border:1px solid var(--border-on-dark);border-radius:var(--radius-md)}
.sn-mobile-nav summary::-webkit-details-marker{display:none}
.sn-mobile-nav summary span{display:block;height:2px;background:var(--text-on-dark);border-radius:2px;transition:transform var(--duration-base) var(--ease-out),opacity var(--duration-fast)}
.sn-mobile-nav[open] summary span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sn-mobile-nav[open] summary span:nth-child(2){opacity:0}
.sn-mobile-nav[open] summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sn-mobile-nav summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sn-mobile-nav nav{position:absolute;left:0;right:0;top:100%;z-index:999;display:flex;flex-direction:column;padding:8px clamp(20px,4vw,40px) 24px;background:var(--surface-dark);border-top:1px solid var(--border-on-dark);box-shadow:var(--shadow-float)}
.sn-mobile-nav nav a{display:block;padding:14px 0;font:500 17px/1.3 var(--font-sans);color:var(--text-on-dark);border-bottom:1px solid var(--border-on-dark)}
.sn-mobile-nav nav a:hover{color:var(--color-accent-on-dark)}
.sn-mobile-sub{display:flex;flex-direction:column;padding-left:16px}
.sn-mobile-sub a{font-size:15px!important;color:var(--text-on-dark-muted)!important}
.sn-mobile-nav nav a.sn-mobile-cta{margin-top:20px;padding:13px 20px;text-align:center;border:0;border-radius:var(--radius-md);background:var(--color-accent-on-dark);color:var(--text-on-accent)}
}
@media (max-width:767px){.e-con:has(> .elementor-widget-html .sn-mobile-nav){position:static}}


/* ===== Geteilter Hero (Variante C): dunkle H1-Hälfte, helle Text-Hälfte ===== */
.sn-hero-h1 em{font-style:normal;color:var(--color-accent-on-dark)}
.sn-hero-light .sn-logo-mark span:empty{background:var(--color-accent)}
.sn-hero-light .sn-hero-mail a{color:var(--text-heading);text-decoration:underline;text-decoration-color:var(--sn-gray-200);text-underline-offset:3px}

/* ===== Ausklappbare Leistungs-Kacheln (Elementor-Accordion als Kachelraster) ===== */
.sn-tile > summary{list-style:none}
.sn-tile > summary::-webkit-details-marker{display:none}
.sn-tile .sn-tile-icon{transition:transform var(--duration-base) var(--ease-out),background var(--duration-base),color var(--duration-base)!important}
.sn-tile[open] .sn-tile-icon{transform:rotate(45deg)!important;background:var(--color-accent-on-dark);border-color:var(--color-accent-on-dark)!important;color:var(--text-on-accent)!important}
.sn-tile[open]{border-color:var(--color-accent)!important}
.sn-tile > summary:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:12px}
.sn-tile > summary{min-height:96px;box-sizing:border-box}
@media (max-width:767px){.sn-tile > summary{min-height:0}}

/* ===== Team-Karussell (Scroll-Snap, Steuerung per HTML-Widget .sn-carousel-nav) ===== */
.sn-carousel{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.sn-carousel::-webkit-scrollbar{display:none}
.sn-carousel > .sn-carousel-item{flex:0 0 calc((100% - 72px) / 4)!important;width:auto!important;scroll-snap-align:start}
@media (max-width:1024px){.sn-carousel > .sn-carousel-item{flex-basis:calc((100% - 24px) / 2)!important}}
@media (max-width:767px){.sn-carousel > .sn-carousel-item{flex-basis:82%!important}}
.sn-carousel-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.sn-carousel-dots{display:flex;gap:8px}
.sn-carousel-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--sn-gray-200);cursor:pointer;transition:width var(--duration-base) var(--ease-out),background var(--duration-base)}
.sn-carousel-dots button[aria-current="true"]{width:24px;background:var(--color-accent-on-dark)}
.sn-carousel-arrows{display:flex;gap:10px}
.sn-carousel-arrows button{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--border-default);border-radius:999px;background:var(--surface-card);color:var(--text-heading);font:400 20px/1 var(--font-sans);cursor:pointer;transition:background var(--duration-base),border-color var(--duration-base),opacity var(--duration-base)}
.sn-carousel-arrows button:hover:not(:disabled){background:var(--color-accent-on-dark);border-color:var(--color-accent-on-dark);color:var(--text-on-accent)}
.sn-carousel-arrows button:disabled{opacity:.35;cursor:default}
.sn-carousel-arrows button:focus-visible,.sn-carousel-dots button:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.elementor-widget-html:has(.sn-carousel-nav){width:100%}

/* ===== Rechtstexte (Datenschutz) im Text-Editor-Widget ===== */
.elementor-widget-text-editor h2{font-size:24px;margin:40px 0 12px}
.elementor-widget-text-editor h3{font-size:19px;margin:28px 0 8px}
.elementor-widget-text-editor p,.elementor-widget-text-editor li{font-size:16px;line-height:1.7;color:var(--text-body);margin:0 0 14px}
.elementor-widget-text-editor a{text-decoration:underline}
.sn-ds-hinweis{padding:14px 18px;border:1px solid var(--color-accent);border-radius:var(--radius-md);background:var(--sn-green-50)}

/* Suchfeld: Cursor blinkt nicht, während getippt wird */
.sn-search-query.is-typing span:empty{animation:none}
.sn-search-query .sn-typed{white-space:pre}
.sn-ds-stand{font-size:14px!important;color:var(--text-muted)!important}
.elementor-widget-text-editor ul{padding-left:20px;margin:0 0 14px}