/*
 Theme Name:   Ortmann Sicherheitsdienst
 Theme URI:    https://www.neckarmedia.com
 Description:  WordPress Child Theme
 Author:       Neckarmedia
 Author URI:   https://www.neckarmedia.com
 Template:     enfold
 Version:      1.0
*/


/* =======================================================================================================================================
Font Import
======================================================================================================================================= */
/* exo-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/exo-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* exo-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/exo-v25-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* exo-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/exo-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* =======================================================================================================================================
Custom Properties
======================================================================================================================================= */
/* @link https://utopia.fyi/type/calculator?c=375,16,1.2,1770,18,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
  --step--2: clamp(0.6944rem, 0.6876rem + 0.0293vw, 0.72rem);
  --step--1: clamp(0.8333rem, 0.8154rem + 0.0765vw, 0.9rem);
  --step-0: clamp(1rem, 0.9664rem + 0.1434vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1446rem + 0.2366vw, 1.4063rem);
  --step-2: clamp(1.44rem, 1.3546rem + 0.3645vw, 1.7578rem);
  --step-3: clamp(1.728rem, 1.6019rem + 0.5382vw, 2.1973rem);
  --step-4: clamp(2.0736rem, 1.8927rem + 0.7719vw, 2.7466rem);
  --step-5: clamp(2.4883rem, 2.2343rem + 1.0838vw, 3.4332rem);
  --step-6: clamp(2.986rem, 2.635rem + 1.4974vw, 4.2915rem);
  --step-7: clamp(3.5832rem, 3.1044rem + 2.043vw, 5.3644rem);
  --step-8: clamp(4.2998rem, 3.6531rem + 2.7592vw, 6.7055rem);
}

/* Colors, fonts, component sizes */
:root {
    --or-gold: #8B7A54;
    --or-black: #000;
    --or-white: #FFF;
    --or-grey: #F8F8F8;
    --or-error: #B3261E;
    --or-error-bg: #FCEEEE;

    --primary-font: 'Exo', sans-serif;
    --heading-font: 'Exo', sans-serif;

    --toggler-light-mode-icon-size: 2.5em;
    --toggler-dark-mode-icon-size: 2.5em;
    --or-transition: .2s ease;
    --or-text-underline-offset: 4px;
}


/* =======================================================================================================================================
Typo
======================================================================================================================================= */
html{-webkit-tap-highlight-color: transparent;}
body{-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
body,p{font-family: var(--primary-font); font-size: var(--step-0); font-weight: 400; line-height: 1.6}
p{margin: 0 0 1em;}
h1,h2,h3,h4,h5,h6{font-family: var(--heading-font); font-weight: 400 !important; line-height: 1.2; letter-spacing: 0 !important; text-transform: inherit !important; margin: 0 0 .4em 0 !important;}

@media only screen and (max-width: 767px) {
    h1,h2,h3,h4,h5,h6{hyphens: auto; overflow-wrap: break-word;}
}

#top ::selection {background: #C9A85C; color: var(--or-black);}

#top h1{font-size: var(--step-6);}
/* h2 ohne Subheading bekommt Abstand nach unten */
#top h2:not(:has(+ .av-subheading)) {padding-bottom: 1em;}
#top h2{font-size: var(--step-4); margin-bottom: 0 !important; }
#top h3{font-size: var(--step-2);}
#top h4{font-size: var(--step-1);}
#top h5{font-size: var(--step-0);}
#top h6{font-size: var(--step-0);}

#top.home h1{font-size: var(--step-4);}
/* Hero Section Adjustment of Optical H1*/
#top div.avia_textblock.hero-section-h1 p{font-size: var(--step-7);	line-height: 1.2;}

#top .special_amp{color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;}
#top .av-special-heading{padding: 0 !important}
#top .av-special-heading .special-heading-border{display: none;}
#top .av-special-heading.avia-builder-el-no-sibling .av-special-heading-tag{margin: 0 !important}
#top .av-subheading p{font-size: var(--step-2); padding-bottom: 2em;}

#top .avia-section b,
#top .avia-section strong,
#top .footer_color b,
#top .footer_color strong,
#top .socket_color b,
#top .socket_color strong{color: inherit}

/* Blockquote */
#top blockquote{border: 0; font-size: var(--step-1); margin: 2em 0 2em; padding: 0 0 0 2em; position: relative; max-width: 420px; font-style: italic; line-height: 1.6}
#top blockquote:before{content: '\e833'; font-family: 'entypo-fontello'; position: absolute; top: -.3em; left: 0; opacity: .1; font-size: 4em; font-style: normal; line-height: 1}
#top blockquote p{font-size: 1em; margin: 0}

/* List */
#top .avia_textblock ul{
    list-style: none;
    margin: 0 0 1em 0;
}
#top .avia_textblock ul > li{
    margin: 0 0 0.5em 0;
    padding: 0 0 0 1em;
    position: relative;
}
#top .avia_textblock ul > li:before{
    content: '\e875';
    font-family: 'entypo-fontello';
    position: absolute;
    left: 0;
    display: inline-block;
}

/* Links */
#top .avia_textblock a {text-decoration: underline; text-decoration-color: var(--or-gold); text-underline-offset: var(--or-text-underline-offset);}
#top .alternate_color a{text-decoration-color: var(--or-white);}
#top .boxed-text-on-gray a,
#top .__four_columns a{text-decoration: underline; text-decoration-color: var(--or-gold); text-underline-offset: var(--or-text-underline-offset);}


/* =======================================================================================================================================
Buttons
======================================================================================================================================= */
/* BASE BUTTON
   Transparent / black / gold */
#top div .avia-button{
    font-size: var(--step-1);
    font-family: inherit;
    cursor: pointer;
    font-weight: 500;
    padding: 0.8em 1.5em;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--or-gold) !important;
    color: var(--or-black) !important;
    text-decoration: none !important;
    transition: var(--or-transition);
    position: relative;
}

/* BUTTON VARIATIONS (Background/Color/Border) */
/* Transparent / white / gold */
#top div .avia-button.avia-color-theme-color-highlight { background: transparent; border-color: var(--or-gold) !important; color: var(--or-white) !important; }
/* Transparent / white / white */
#top div .avia-button.avia-color-theme-color-subtle { background: transparent; border-color: var(--or-white) !important; color: var(--or-white) !important; }
/* Transparent / white / white + ARROW */
#top div .avia-button.avia-color-white{ background: transparent; border-color: var(--or-white) !important; color: var(--or-white) !important; }
#top div .avia-button.avia-color-white::before { content: url("/wp-content/uploads/2026/09/button_arrow.svg"); content: url("/wp-content/uploads/2026/09/button_arrow.svg") / ''; margin-right: 15px; display: inline-block; }
/* White / black / no visible border */
#top div .avia-button.avia-color-light { background: var(--or-white) !important; border-color: transparent !important; color: var(--or-black) !important; }
/* Gold / white / white */
#top div .avia-button.avia-color-silver {background: var(--or-gold);border-color: var(--or-white) !important; color: var(--or-white) !important;}
/* Black / white / none */
#top div .avia-button.avia-color-dark {background: var(--or-black); color: var(--or-white)!important;}

/* LARGE DARK BUTTON */
#top div .__large_dark_button { width: 100%; }
#top div .__large_dark_button .avia-button {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.8em;
    padding: 2.5em 10em 2.5em 3rem;
    font-size: var(--step-1);
    background: var(--or-black);
    border-radius: 0.8em;
    color: var(--or-white) !important;
    text-align: left;
}
/* Circular arrow */
#top div .__large_dark_button .avia-button::after {
    content: '\e87d';
    font-family: 'entypo-fontello';
    color: var(--or-gold);
    position: absolute;
    right: 2em;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    width: var(--toggler-dark-mode-icon-size);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid currentColor;
    border-radius: 50%;
}

/* HEADER CLAIM / PHONE BUTTON */
#top div .__claim_plus_phone_button .avia-button {border-radius: 4px;font-size: var(--step-0);font-weight: 400;}

/* Animation on Button-Hover */
#top div .avia-button:hover,
#top div .avia-button:focus-visible,
#top div .frm_button_submit:hover,
#top div .frm_button_submit:focus-visible{opacity: 1}
@media (hover: hover) and (prefers-reduced-motion: no-preference){
    #top div .avia-button:hover,
    #top div .avia-button:focus-visible,
    #top div .frm_button_submit:hover,
    #top div .frm_button_submit:focus-visible{translate: 0 -2px;}
}


/* =======================================================================================================================================
Header
======================================================================================================================================= */
#header:not(.av_header_transparency){
    box-shadow: 0 1px 1px rgba(0,0,0,0.02), 0 2px 2px rgba(0,0,0,0.02), 0 4px 4px rgba(0,0,0,0.02), 0 6px 8px rgba(0,0,0,0.02), 0 8px 16px rgba(0,0,0,0.02);
}

/* Höhe des mobilen Headers: nur hier ändern */
:root{--or-header-height-mobile: 90px;}

@media only screen and (max-width: 989px){
    .responsive #top #header{position: fixed !important; top: 0; left: 0; right: 0; width: 100%}
    .responsive #top #main{padding-top: var(--or-header-height-mobile) !important}
    .responsive #top #wrap_all .av-logo-container{height: var(--or-header-height-mobile) !important; line-height: var(--or-header-height-mobile) !important;}
    .responsive #top .logo{height: var(--or-header-height-mobile) !important; max-height: none !important}
}

@media only screen and (min-width: 990px){
    #header .inner-container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    #header .inner-container > .logo{order: 1; margin-right: auto; position: relative;}
    #header .inner-container > nav{order: 3;}
}

/* Logo */
#header_main .inner-container > .logo,
#header_main .inner-container > .logo a{display: flex; align-items: center; overflow: visible}
#header_main .inner-container > .logo a{height: auto}
#header_main .inner-container > .logo a svg,
#header_main .inner-container > .logo a img{width: 160px; padding: 5px 0;}

@media only screen and (min-width: 990px){
    #header_main .inner-container > .logo a svg,
    #header_main .inner-container > .logo a img{width: 290px; max-height: var(--or-header-height-mobile);}
}

/* Button in Header */
@media screen and (max-width: 1449px) {
    #header_main .inner-container .__claim_plus_phone_button .__button .avia_iconbox_title{display: none;}
    #header_main .inner-container .__claim_plus_phone_button .__button .avia_button_icon{left:0;}
}


/* =======================================================================================================================================
Accessibility
======================================================================================================================================= */
#top :focus-visible{
    outline: 2px solid var(--or-error);           /* Fallback (z. B. Firefox) */
    outline: -webkit-focus-ring-color auto 2px;   /* nativer Fokusring in Chromium/Safari */
    outline-offset: 2px;
    opacity: 1 !important;
    box-shadow: inset 0 0 0 2px var(--or-white);
}


/* =======================================================================================================================================
Misc
======================================================================================================================================= */
/* Layout */
.widgettitle{font-weight: inherit; text-transform: inherit; letter-spacing: inherit; font-size: inherit;}

@media only screen and (max-width: 767px){
    .responsive #top #wrap_all .container{width: 90%; max-width: 90%;}
}

/* Images */
#top .image-overlay{display: none !important;}
#top .avia_image,
#top .av-image-caption-overlay,
#top .avia-image-container-inner{border-radius: 0}

#top .__section_zertifizierungen .entry-content-wrapper > .flex_column {display: flex; flex-direction: row;}

/* Zertifikate Bilder kleiner in mobil */
@media only screen and (max-width: 767px){
    .responsive .__section_zertifizierungen .entry-content-wrapper > .flex_column img{width: 30vw}
}


/* ===========================================
TOGGLES – Light Mode (Basis)
=========================================== */
#top section.av_toggle_section .toggler{position: relative; padding: 2em 10em 2em 3rem; margin: 0 0 .8em; font-size: var(--step-1); background: transparent; border: 1px solid var(--or-gold); border-radius: .5em}
#top section.av_toggle_section .toggler:hover{background: transparent;}
#top section.av_toggle_section .toggler .toggle_icon{display: none;}
#top section.av_toggle_section .toggler:after{
    content: '\e87b';
    content: '\e87b' / '';
    font-family: 'entypo-fontello';
    color: var(--or-gold);
    position: absolute;
    right: 1em;
    top: calc(50% - var(--toggler-light-mode-icon-size) / 2);
    transition: var(--or-transition);
    width: var(--toggler-light-mode-icon-size);
    height: var(--toggler-light-mode-icon-size);
    line-height: var(--toggler-light-mode-icon-size);
    text-align: center;
    border: 1px solid currentcolor;
    border-radius: 50%;
}
#top section.av_toggle_section .toggler.activeTitle:after{rotate: 180deg}
#top section.av_toggle_section .toggle_content{border: 0; background: transparent; padding: .5em 1rem 1.5em;}
#top section.av_toggle_section .toggle_content *{font-size: var(--step-0);}
#top section.av_toggle_section .toggle_content * a{text-decoration: underline; text-underline-offset: var(--or-text-underline-offset);}

@media only screen and (max-width: 767px){
    #top section.av_toggle_section .toggler{font-size: var(--step-0);}
}


/* ===========================================
TOGGLES – Dark Mode (mit Abweichungen zur Basis)
=========================================== */
#top .toggler-dark section.av_toggle_section .toggler{
    padding: 2.5em 10em 2.5em 3rem;
    background: var(--or-black);
    border-radius: .8em;
    color: var(--or-white);
}
#top .toggler-dark section.av_toggle_section .toggler:hover{background: var(--or-black);}
#top .toggler-dark section.av_toggle_section .toggler::after{
    content: '\e816'; /* PLUS ICON */
    content: '\e816' / '';
    right: 2em;
    text-align: center;
    width: var(--toggler-dark-mode-icon-size);
    height: var(--toggler-dark-mode-icon-size);
    line-height: var(--toggler-dark-mode-icon-size);
    top: calc(50% - var(--toggler-dark-mode-icon-size) / 2);
    border-width: 2px;
}

@media only screen and (max-width: 767px){
    #top section.av_toggle_section .toggler,
    #top .toggler-dark section.av_toggle_section .toggler{padding-right: 5em; padding-left: 1.5rem;}
    #top .toggler-dark section.av_toggle_section .toggler::after{right: 1em;}
}

@media (prefers-reduced-motion: reduce){
    #top section.av_toggle_section .toggler::after{transition: none;}
}


/* ===========================================
SOCIAL ICONS
=========================================== */
#top ul.__social--media--icons{display: flex; gap: 0; font-size: var(--step-4); margin: 0 0 1em 0; line-height: 1;}
#top ul.__social--media--icons > li > a{padding: .2em .4em; text-decoration: none;}
#top #wrap_all .__social--media--icons li a:focus-visible,
#top #wrap_all .__social--media--icons li:hover a{background-color: var(--or-black) !important; color: var(--or-gold);}


/* ===========================================
BOXED CONTENT ON GRAY
=========================================== */
#top div .boxed-text-on-gray {
	border-radius:15px;
	background: transparent;
	border:.7px solid var(--or-gold);
	padding: 100px 100px 100px 270px;
	font-size: var(--step-1);
}

#top div .boxed-text-on-gray a{font-size: var(--step-1);}
#top div .boxed-text-on-gray a:hover,
#top div .boxed-text-on-gray a:focus-visible{color:var(--or-gold)}

@media screen and (max-width: 767px){
    #top div .boxed-text-on-gray{padding: 30px;}
    #top div .boxed-text-on-gray a{font-size: var(--step-0) !important;}
}


/* ===========================================
BOXED CONTENT ON GOLD (allgemein + Standort-Sektion)
=========================================== */
#top div .boxed-content-on-gold,
#top div .__standort_boxed-content-on-gold{
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
    background: transparent;
}

#top div .boxed-content-on-gold p,
#top div .__standort_boxed-content-on-gold p{
    font-size: var(--step-1);
    font-weight: 500;
    margin-bottom: 0;
}

/* Allgemein */
#top div .boxed-content-on-gold{
    border: 1px solid var(--or-white) !important;
    padding: 34px;
    margin-bottom: 60px;
}

/* Standort: zwei Spalten (Name + Adresse | Telefon + Mail) */
#top div .__standort_boxed-content-on-gold{
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 8em;
    align-items: end;
    max-width: min(100%, 1290px);
    border: 1px solid currentColor !important;
    padding: 50px 150px 50px 120px;
    margin-bottom: 0;
}
#top div .__standort_boxed-content-on-gold a{color: inherit; text-decoration: underline; text-underline-offset: var(--or-text-underline-offset); text-decoration-color: var(--or-white);}

@media only screen and (min-width: 768px){
    #top .__einsatzgebiet_standort_sektion h2{width: 45%;}
}

@media only screen and (max-width: 1100px){
    #top div .logo-overlay-on-gold .boxed-content-on-gold{column-count: 1 !important;}
}

@media only screen and (max-width: 767px){
    #top div .__standort_boxed-content-on-gold{
        grid-template-columns: 1fr;
        gap: 1em;
        padding: 50px 30px;
    }
    #top div .__standort_boxed-content-on-gold p{font-size: var(--step-0) !important;}
}


/* ===========================================
Slider Adjustments
=========================================== */
#top .avia-content-slider .slide-entry-title{font-size: var(--step-2); padding-top: 1em; margin-bottom: 0;}
#top .avia-content-slider .slide-meta .slide-meta-time{font-size: var(--step--1);}
#top .avia-content-slider .read-more-link{
    display: inline-block;
    font-size: var(--step-1);
    font-weight: 500;
    padding: .5em .8em;
    margin-bottom: 1em;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--or-gold) !important;
    color: var(--or-black) !important;
}
#top .avia-content-slider .read-more-link a{text-decoration: none;}
#top .avia-content-slider .more-link-arrow.avia-svg-icon svg:first-child{display: none;}
#top .avia-content-slider .slide-image,
#top .avia-content-slider .slide-image img{aspect-ratio: 3 / 2; object-fit: cover;}

/* Layout: Beiträge, darunter Fortschrittsleiste, darunter Pfeile rechts */
#top .avia-content-slider{display: flex; flex-wrap: wrap; align-items: center;}
#top .avia-content-slider .avia-content-slider-inner{width: 100%;}

/* Pfeile unten rechts */
#top .avia-content-slider .avia-slideshow-arrows{position: static; display: flex; order: 3; gap: 12px; margin-left: auto; width: auto; height: auto;}
#top .avia-content-slider .avia-slideshow-arrows a{position: static; inset: auto; margin: 0; transform: none;}
#top .av-control-minimal .avia-slideshow-arrows a.avia-svg-icon{border-radius: 50%; border-color: var(--or-gold);}
#top .av-control-minimal-dark .avia-slideshow-arrows a.avia-svg-icon svg:first-child{fill: var(--or-gold);}


/* =======================================================================================================================================
Blog: Single Post
======================================================================================================================================= */
#top .template-single-blog article.post-entry .big-preview{max-width: 720px; margin: auto;}
#top .fullsize .template-blog .post .entry-content-wrapper{max-width: 720px; text-align: left; line-height: 1.6; font-size: var(--step-0);}
#top .template-single-blog article.post-entry .entry-content-wrapper header h1{text-align: left; font-size: var(--step-3); padding: 1rem 0}
#top .template-single-blog article.post-entry .entry-content-wrapper header .post-meta-infos{text-align: left; font-size: var(--step--1);}

/* Verwandte Beiträge */
#top .related_posts{width: 100%; max-width: 720px; margin: 0; padding: 4em 0 0; border: 0; margin-left: auto; margin-right: auto;}
#top .related_posts .related_title{font-size: var(--step-2); margin: 0 0 1em !important;}
#top .related_entries_container{display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5em; width: 100%; max-width: none; margin: 0;}
#top .related_entries_container .related_column{width: auto; margin: 0; padding: 0; float: none;}

/* Karte */
#top .related_column .relThumWrap{display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; border: .7px solid var(--or-gold); border-radius: 15px; background: var(--or-grey); color: var(--or-black); text-decoration: none; transition: var(--or-transition);}

/* Bild: Enfold-Rundung und feste Maße zurücksetzen */
#top .related_column .related_image_wrap{position: static; display: block; float: none; width: 100%; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0 !important; overflow: hidden;}
#top .related_column .related_image_wrap img{display: block; width: 100%; max-width: none; height: 150px; object-fit: cover; border-radius: 0 !important;}
#top .related_column .related-format-icon{display: none;}

/* Text + Button */
#top .related_column .av-related-title{position: static; display: block; margin: 0; padding: 1em 1.25em .25em; font-size: var(--step-0); font-weight: 500; line-height: 1.3;}
#top .related_column .relThumWrap::after{content: 'Weiterlesen'; align-self: flex-start; margin: 1.25em; padding: .5em .8em; border: 1px solid var(--or-gold); border-radius: 6px; font-weight: 500;}

@media (hover: hover) and (prefers-reduced-motion: no-preference){
    #top .related_column .relThumWrap:focus-visible,
    #top .related_column .relThumWrap:hover{translate: 0 -2px;}
}


/* =======================================================================================================================================
Formular
======================================================================================================================================= */
#top input[type=email], #top input[type=number], #top input[type=password],
#top input[type=search], #top input[type=tel], #top input[type=text], #top input[type=url], #top select, #top textarea{
    font-family: var(--primary-font); padding: 1em; border-radius: .5em; border: 1px solid; margin: 0; font-size: var(--step--1);
    transition: border-color var(--or-transition), box-shadow var(--or-transition);
}
#top .frm_forms :is(input, textarea, select):hover{border-color: currentColor; box-shadow: none;}
/* Placeholder etwas heller als Eingabetext (Kontrast ca. 7:1), damit leere Felder nicht ausgefüllt wirken */
#top .frm_forms :is(input, textarea)::placeholder{color: #595959; opacity: 1;}

#top form label{font-size: var(--step--1)}
#top form button{
    font-size: var(--step--1); font-weight: 700; padding: 1em 2em; border-radius: .5em; box-shadow: none; transition: var(--or-transition);
    background: var(--enfold-main-color-color); color: var(--enfold-main-color-bg);}
#top .alternate_color form button{background: var(--enfold-alternate-color-color); color: var(--enfold-alternate-color-bg);}

/* Formidable Forms */
#top .frm_forms > form .frm_primary_label{color: inherit; font-size: var(--step-0); font-weight: 400;}
#top .frm_forms > form .frm_required{font-weight: inherit; font-size: inherit; color: inherit;}
#top .frm_forms > form :is(p.description, div.description, div.frm_description, .frm_pro_max_limit_desc){color: inherit; font-size: var(--step--1);}

/* Fehlerzustand: Feld */
#top .frm_forms .frm_blank_field :is(input, textarea, select),
#top .frm_forms :is(input, textarea, select)[aria-invalid="true"],
#top #contactsidebar .frm_forms .frm_blank_field :is(input, textarea, select){border-color: var(--or-error); box-shadow: inset 0 0 0 1px var(--or-error);}

/* Fehlerzustand: Meldung unter dem Feld + Sammelmeldung oben */
#top .frm_forms :is(.frm_error, .frm_error_style){
    position: relative; display: flex; align-items: flex-start; gap: .6em; padding: .7em 1em; margin: .7em 0 0;
    border: 1px solid var(--or-error); border-left-width: 4px; border-radius: .5em;
    background: var(--or-error-bg); color: var(--or-error); font-size: var(--step--1); font-weight: 500; line-height: 1.4;
}
#top .frm_forms .frm_error_style{margin: 0 0 1.5em;}
#top .frm_forms .frm_error_style p{margin: 0; font-size: inherit; color: inherit;}
#top .frm_forms :is(.frm_error, .frm_error_style)::before{
    content: '!'; content: '!' / ''; flex: none; display: grid; place-content: center; width: 1.4em; height: 1.4em;
    border-radius: 50%; background: var(--or-error); color: var(--or-white); font-weight: 700; font-size: .9em; line-height: 1;
}
#top .frm_forms .frm_error::after{
    content: ''; position: absolute; top: -7px; left: 1.2em; width: 12px; height: 12px; rotate: 45deg;
    background: var(--or-error-bg); border: solid var(--or-error); border-width: 1px 0 0 1px;
}
@media (prefers-reduced-motion: no-preference){#top .frm_forms :is(.frm_error, .frm_error_style){animation: or-error-in .2s ease;}}
@keyframes or-error-in{from{opacity: 0; translate: 0 -4px;}}


/* =======================================================================================================================================
Footer
======================================================================================================================================= */
#footer{padding: 2rem 0}
#footer .widget{margin: 0; overflow: visible;}


/* ===========================================
Footer Desktop (Grid 2×2)
=========================================== */
#footer .container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em 4em; /* Zeilen-, dann Spaltenabstand */
}

/* Alle 4 Columns ohne feste Breite */
#footer .container > .flex_column{width: auto; margin: 0;}

/* Logo – oben links */
#footer .container > .flex_column:nth-child(1){grid-column: 1; grid-row: 1; align-self: start;}
#footer .container > .flex_column:nth-child(1) .widget_media_image img{height: auto; width: 250px; margin: 0; padding: 2em 0;}

/* Social Icons – oben rechts */
#footer .container > .flex_column:nth-child(2){grid-column: 2; grid-row: 1; padding: 2em 0; align-self: end; justify-self: end;}

/* Text – unten links */
#footer .container > .flex_column:nth-child(3){grid-column: 1; grid-row: 2; align-self: start;}
#footer .container > .flex_column:nth-child(3) #custom_html-5{padding-block: 2em;}

/* Zertifikate – unten rechts */
#footer .container > .flex_column:nth-child(4){
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-self: end;
    align-items: flex-start;
    padding: 2em 0;
}
#footer .container > .flex_column:nth-child(4) img{display: block; height: 60px; width: auto; margin: 15px 0;}

/* Goldene Trennlinie zwischen oben und unten */
#footer .container::before{
    content: "";
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: .8px;
    background: var(--or-gold);
}


/* =====
Footer Mobile
=======*/
@media only screen and (max-width: 767px){
    #footer .container{display: flex; flex-direction: column; gap: 0;}
    #footer .container > .flex_column{
        width: 100% !important;
        margin: 0 !important;
        padding: 0;
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: stretch !important;
    }

    #footer .container::before{display: none;}

    #top ul.__social--media--icons{margin: 0;}
    #footer .icon_count_5 li{flex: 1; text-align: center; font-size: 30px;}

    #footer .container > .flex_column:nth-child(1){text-align: center;}
    #footer .container > .flex_column:nth-child(4){flex-direction: row; padding: 2em 0;}
}


/* =======================================================================================================================================
Socket
======================================================================================================================================= */
#socket{font-size: var(--step-0); text-transform: uppercase;}
#socket a,
#socket a > span{text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--or-gold) !important;}
#socket a:hover,
#socket a:focus-visible{color: var(--or-gold);}
#socket .container{padding-block: 2rem;}
@media only screen and (max-width: 767px){
    #socket .container{padding-bottom: 5rem;} /* Platz für mobile FAB-Leiste */
    #socket .sub_menu_socket li {padding: 10px 10px;}
}


/* =======================================================================================================================================
Content Leistungen Kacheln
======================================================================================================================================= */
#top .__content_display_leistung{
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr; /* alle Zeilen = Höhe der höchsten Kachel */
    max-width: fit-content;
    margin-left: auto;
}
#top .__content_display_leistung .__single_content_block{
    display: flex;
    flex-direction: column;
    border: .7px solid var(--or-gold);
    background-color: var(--or-grey);
    border-radius: 15px;
    padding: 67px;
    max-width: 615px;
}
#top .__content_display_leistung .__single_content_block img{width: 100%; height: auto;}
#top .__content_display_leistung .__single_content_block h3{font-weight: 500 !important; padding-top: 40px; font-size: var(--step-2);}
#top .__content_display_leistung .__single_content_block p{font-size: var(--step-1);}

#top .__content_display_leistung .__single_content_block .avia-button{margin-top: auto; align-self: flex-start;}

@media (max-width: 989px) {
    #top .__content_display_leistung{grid-template-columns: 1fr !important; grid-auto-rows: auto; margin: 0 auto;}
    #top .__content_display_leistung .__single_content_block{padding: 30px;}
}

/* KACHELN */
#top .__kachel > ul{display: grid; gap: 2em; grid-template-columns: repeat(2, 1fr);}
#top .__kachel > ul > li:before{display: none;}
#top .__kachel > ul > li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: .7px solid var(--or-gold);
    background-color: var(--or-grey);
    border-radius: 15px;
    padding: 40px;
    max-width: 615px;
    min-width: 0;
    font-size: var(--step-1);
}

/* Mobil: 1 Spalte */
@media only screen and (max-width: 767px){
    #top .__kachel > ul{grid-template-columns: 1fr; gap: 1.5em;}
}


/* =================================
Small fixes
==================================*/
/* Hero on Startpage Video Adjustment */
#top .mejs-mediaelement .avia_video{object-fit: cover;}

/* Button-Row Standorte */
#top .__standorte_uebersicht .avia-button{margin-right: 30px; margin-top: 30px;}
@media screen and (max-width: 767px) {
    #top .__standorte_uebersicht .avia-button{margin-right: 16px; margin-top: 20px;}
}

/* Post-Nav*/
#top .avia-post-nav{display:none}

/* Logo-Overlay auf Gold */
#top div .logo-overlay-on-gold{position: relative;}
#top div .logo-overlay-on-gold::before{
        content: url("/wp-content/uploads/2026/09/logo-ortmann-rittmann-transparent.png");
        content: url("/wp-content/uploads/2026/09/logo-ortmann-rittmann-transparent.png") / '';
        right: 0;
        transform:translateY(-50%);
        position: absolute;
        top: 50%;
        z-index: 3;
        pointer-events: none;
}


/* =======================================================================================================================================
Leistungsübersicht in dark Toggles
======================================================================================================================================= */
#top .__leistungen_sektion{margin-bottom: 3em;}
#top .__leistungen_sektion_titel{font-size: var(--step-2); margin-bottom: 1em !important;}

/* Grid je Sektion: Desktop einspaltig, bei __two_columns zweispaltig */
#top .__leistungen_sektionen .__button_grid{display: grid; grid-template-columns: 1fr; column-gap: 18px;}
#top .__leistungen_sektionen .__button_grid.__two_columns{grid-template-columns: repeat(2, 1fr);}

#top .__leistungen_sektionen .__large_dark_button .avia-button{overflow-wrap: break-word; hyphens: auto;}

/* TABLET: immer einspaltig */
@media only screen and (max-width: 989px){
    #top .__leistungen_sektionen .__button_grid.__two_columns{grid-template-columns: 1fr;}
}

/* MOBILE: kompaktere Buttons, Pfeil-Kreis verkleinert */
@media only screen and (max-width: 767px){
    #top .__leistungen_sektion{margin-bottom: 2em;}
    #top .__leistungen_sektionen .__large_dark_button{--toggler-dark-mode-icon-size: 2em;}
    #top .__leistungen_sektionen .__large_dark_button .avia-button{
        padding: 1.5em 4.5em 1.5em 1.5rem;
        font-size: var(--step-0);
    }
    #top .__leistungen_sektionen .__large_dark_button .avia-button::after{right: 1em;}
}


/* =======================================================================================================================================
FAB Floating action button
======================================================================================================================================= */
#fab {
    position: fixed;
    right: 16px;
    bottom: 260px;
    z-index: 400;
}

#fab .__wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

#fab .__button {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    overflow: hidden;
    border-radius: 4px;
    transition: width .5s ease;
    background-color: var(--or-black);
    color: var(--or-white);
    padding: 0 20px;
    border: .5px var(--or-white) solid;
}

#fab .__button span {white-space: nowrap; display: none;}
#fab .__button .av-icon-char{font-size: 36px;}
#fab .__wrap .__button:nth-of-type(2) .av-icon-char{font-size: 25px;}

/* Hover + Tastaturfokus: Button ausklappen (nur Tablet/Desktop) */
@media only screen and (min-width: 768px){
    #fab .__button:hover,
    #fab .__button:focus-visible{width: 240px; justify-content: space-between;}
    #fab .__button:hover span,
    #fab .__button:focus-visible span{display: inline;}
    #fab .__button:nth-of-type(3):hover,
    #fab .__button:nth-of-type(3):focus-visible{gap: 9px;}
}

@media only screen and (min-width: 1920px){
    #fab{right: 36px}
}

/* MOBILE: Leiste am unteren Rand */
@media only screen and (max-width: 767px) {
    #fab { right: 0; bottom: 0; width: 100%; }
    #fab .__wrap { flex-direction: row; gap: 0; align-items: stretch; }

    #fab .__button {
        width: 25%;
        border-width: 1px 1px 0 0;
        border-radius: 0;
        gap: 8px;
        flex-direction: column;
    }

    /* Button Größe für Leiste */
    #fab .__button .av-icon-char{font-size: 25px;}
    #fab .__wrap .__button:nth-of-type(2) .av-icon-char{font-size: 17px;}

    #fab .__button:first-child { width: 50%; flex-direction: row; }
    #fab .__button:first-child span { display: inline; }
}

@media (prefers-reduced-motion: reduce){
    #fab .__button{transition: none;}
}


/* =======================================================================================================================================
Circles – Animated Numbers
======================================================================================================================================= */
/* Flexbox um die Kreise */
#top .circle-style-flexbox{display: flex; width: 100%; justify-content: space-between; margin: 0 !important;}

/* Kreis */
#top .custom-circle-style.avia-animated-number{
    border: 1.64px solid var(--or-white);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    align-self: center;
    width: 11em;
    height: 11em;
    border-radius: 50% !important;
    margin-bottom: 35px;
}

/* Größe, Farbe, Deckkraft der Zahl im Kreis */
#top .avia-animated-number-title{display: flex; align-items: center; justify-content: center; width: 100%;}
#top .avia-animated-number .avia-single-number{font-size: var(--step-5) !important;}
#top div .avia-animated-number .avia-no-number{font-size: var(--step-5) !important; color: var(--or-white) !important; opacity: 1 !important;}

/* Text unterhalb des Kreises */
#top div .avia-animated-number .avia-animated-number-content{position: absolute; top: 100%; width: 100%; margin-top: 35px;}

@media only screen and (max-width: 1060px){
    #top .custom-circle-style.avia-animated-number{margin: 0 auto 6em;}
}
@media only screen and (max-width: 767px){
    #top .circle-style-flexbox{flex-direction: column; align-items: center; min-width: 0 !important;}
}


/* =======================================================================================================================================
Sections
======================================================================================================================================= */
@media screen and (min-width: 990px) {
    /* GOLD - H-LEFT - TEXT AND BUTTON RIGHT */
    #top .__gold_h_text_button .avia-button{margin-top: 20px;}
    #top .__gold_h_text_button .flex_column:nth-child(2){margin-left: 12%;}

    /* WHITE - IMAGE LEFT - TITLE SUBTITLE TEXT BUTTON RIGHT */
    #top .__white_img_left_text_button_right .avia-button{margin-top: 40px;}
    #top .__white_img_left_text_button_right .flex_column:nth-child(2){margin-left: 3%;}

    /* GRAY - OVERVIEW STANDORTE */
    #top .__gray_overview_standorte_map .flex_column:nth-child(2){margin-left: 24%;}
    #top .__gray_overview_standorte_map .content{padding: 240px 0 170px;}

    /* GOLD - ANIMATED CIRCLES */
    #top .__gold_circles_section .content{padding: 130px 0 180px;}

    /* WHITE - SICHERHEITSDIENSTLEISTUNGEN */
    #top .__section_sicherheitsdienstleistungen .content{padding: 260px 0 300px;}
    #top .__section_sicherheitsdienstleistungen h2{padding-bottom: 2em;}

    /* BLACK - Überwachungsroboter */
    #top .__section_black_img_h_text_button_right .content{padding: 250px 0 210px}
    #top .__section_black_img_h_text_button_right .flex_column:nth-child(1){width: 48%;}
    #top .__section_black_img_h_text_button_right .flex_column:nth-child(1) .avia-image-container-inner{width: 100%;}
    #top .__section_black_img_h_text_button_right .flex_column:nth-child(2){width: 37%; margin-left: 10%;}
    #top .__section_black_img_h_text_button_right .avia-button{margin-top: 40px}

    /* GOLD - TITEL LINKS TEXT RECHTS - SICHERHEITSBERATUNG */
    #top .__section_gold_titleleft_text_button_right .content{padding: 210px 0 140px}
    #top .__section_gold_titleleft_text_button_right .flex_column:nth-child(2){width: 37%; margin-left: 13%;}
    #top .__section_gold_titleleft_text_button_right .avia-button{margin-top: 20px}

    /* BLOG BEITRAEGE */
    #top .__blog_uebersicht .content{padding: 210px 0;}
    #top .__blog_uebersicht{border: none;}

    /* CTA - SECTION */
    #top .logo-overlay-on-gold .content{padding: 240px 0 200px}
    #top div .logo-overlay-on-gold h2{max-width: 800px}

    #top div .logo-overlay-on-gold .avia-button-wrap{text-align:left;}
    #top div .logo-overlay-on-gold .avia-button{margin-bottom: 12px;}
    #top div .logo-overlay-on-gold p{margin-bottom: 0;}

    #top .logo-overlay-on-gold .flex_column:nth-of-type(3){display: flex; flex-direction: column; height: 430px;}
    #top .logo-overlay-on-gold .flex_column:nth-of-type(3) .avia-button-wrap{margin-top: auto}

    /* WHITE - IMAGE LEFT - TITLE TEXT RIGHT */
    #top .__section_white_imgleft_htextright .content{padding: 200px 0 250px;}

    /* WHITE - SICHERHEITSDIENSTLEISTUNGEN ÜBERSICHT*/
    #top .__section_sicherheitsdienstleistungen_mit_schwarz .content{padding: 250px 0 115px;}

    /* UNSERE EINSATZGEBIETE */
    #top .__section_unsere_einsatzgebiete .content{padding: 180px 0 140px}

    /* ROBOTICS */
    #top .__section_robotics .content{padding: 340px 0 225px;}

    /* SECTION FAQ */
    #top .__section_faq .content{padding: 180px 0 225px;}

    /* ZERTIFIZIERUNGEN */
    #top .__section_zertifizierungen .content{padding: 250px 0 200px;}

}

/* MOBILE */
@media screen and (max-width: 989px) {
    /* GOLD - H-LEFT - TEXT AND BUTTON RIGHT */
    #top .__gold_h_text_button .content{padding: 80px 0 80px;}
}
/* MOBILE: CTA - SECTION */
@media only screen and (max-width: 767px){
    #top .logo-overlay-on-gold::before{ right: -50px !important;}
    #top div .logo-overlay-on-gold .avia-button {margin-bottom: 0;}

}


/* =======================================================================================================================================
Contact Sidebar
======================================================================================================================================= */
#top #contactsidebar{
    position: fixed;
    inset: 0 0 0 auto;
    width: 720px;
    max-width: 100vw;
    height: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background-color: var(--or-white);
    pointer-events: none;
    visibility: hidden; /* zusätzlich zu inert: geschlossen nicht fokussierbar */
    transform: translateX(100%);
    transition: transform .3s ease, visibility 0s linear .3s;
}
#top #contactsidebar.is-active{
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
    transition: transform .3s ease, visibility 0s;
    box-shadow: 0 0 80px rgba(0,0,0,.2);
}

#top #contactsidebar .textwidget h3{font-size: var(--step-3);}
#top #contactsidebar .frm_form_field h3{font-size: var(--step-1);}

/* Header */
#top #contactsidebar > header{
    display: flex;
    gap: 1em;
    justify-content: flex-end;
    padding: 2em;
    border-bottom: 1px solid var(--or-gold);
}
#top #contactsidebar button.__contactsidebar-close{
    all: unset;
    cursor: pointer;
    display: grid;
    place-content: center;
    width: 1.5em;
    height: 1.5em;
    line-height: 1;
    font-size: var(--step-3);
    color: currentColor;
    border-radius: 50%;
    transition: transform var(--or-transition);
}
#top #contactsidebar button.__contactsidebar-close:hover{transform: scale(.95);}
#top #contactsidebar button.__contactsidebar-close:focus-visible{outline: 2px solid var(--or-gold); outline-offset: 2px;}

/* Inhalt */
#top #contactsidebar > .__wrap{padding: 2em; overflow: auto; overscroll-behavior: contain;}
#top #contactsidebar > .__wrap p{margin-top: 0;}
#top #contactsidebar > .__wrap .widget{padding: 0 0 2em 0;}
#top #contactsidebar > .__wrap .widget::after,
#top #contactsidebar > .__wrap .widget::before{display: none;}

/* Formular */
#top #contactsidebar input[type="text"],
#top #contactsidebar input[type="tel"],
#top #contactsidebar input[type="email"],
#top #contactsidebar textarea{
    border: 1px solid var(--or-gold);
    border-radius: 4px;
    background-color: var(--or-white);
}
#top #contactsidebar input:focus,
#top #contactsidebar textarea:focus{
    border-color: var(--or-gold);
    outline: 2px solid var(--or-gold);
    outline-offset: 1px;
}

#top #contactsidebar .frm_button_submit{
    background: var(--or-gold);
    border: 1px solid var(--or-white);
    color: var(--or-white);
    border-radius: 6px;
    font-family: inherit;
    font-weight: 500;
    font-size: var(--step-0);
    padding: .8em 1.5em;
}

@media screen and (max-width: 767px){
    #top #contactsidebar > header{padding: 1em;}
    #top #contactsidebar > .__wrap{padding: 2em 1em;}
    #top #contactsidebar button.__contactsidebar-close{font-size: 32px;}
}

@media (prefers-reduced-motion: reduce){
    #top #contactsidebar,
    #top #contactsidebar.is-active,
    #top #contactsidebar button.__contactsidebar-close{transition: none;}
}


/* =======================================================================================================================================
404-Seite
======================================================================================================================================= */
/* Linke Spalte */
#top .__404_hero{display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; color: var(--or-black); padding-block: clamp(40px, 8vw, 120px);}
#top .__404_hero > :not(.avia-button-wrap, .avia-button){flex: 0 0 100%;}
#top .__404_hero .avia-button-wrap,
#top .__404_hero .avia-button{float: none; margin: 0; line-height: 1.2;}

/* Eyebrow + Lead */
#top .__404_hero > .av_textblock_section:first-child p{text-transform: uppercase; letter-spacing: .14em; font-size: var(--step--1); font-weight: 500;}
#top .__404_hero .av-special-heading + .av_textblock_section p{font-size: var(--step-1); margin-bottom: 1.5em;}