@charset "UTF-8";
/* =============================================================== *\
   SCSS Struktur

   _reset.scss       → Reset / Normalize / Form-Reset
   _variables.scss   → Farben, Abstände, Schriftgrößen als Variablen
   _fonts.scss       → @font-face Deklarationen
   _base.scss        → Basis-Styles für HTML-Elemente
   _layout.scss      → Grids, Container, Header, Footer, Sidebar
   _components.scss  → Buttons, Cards, Modals, Formulare

   Terminal: npm run watch

\* =============================================================== */
/* Farben */
:root {
  /* Farben */
  --ans-violett: #A78BFA;
  --ans-hellviolett: ans-hellviolett;
  --ans-hellgrau: #F4F4F4;
  --ans-orange: #FF8C3F;
  --ans-hellgruen: #4BFE70;
  --ans-gruen: #15B436;
  --ans-dunkelrot: #D20016;
  --ans-rot: #E3001B;
  --ans-grau: #D0D0D0;
  --ans-dunkelgrau: #707070;
  --ans-hintergrundgrau: #F3F4F6;
  --ans-weiss: #FFFFFF;
  --ans-elfenbein: #231F20;
  --ans-blau: #005CB9;
  --ans-kachel-shadow: 6px 6px 12px rgba(16, 39, 94, 0.08);
}

/* =============================================================== *\
   CSS Reset (Peter Meyer) + Form-Reset
\* =============================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Form Reset */
input,
select,
textarea,
button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 100%;
}

/* =============================================================== *\
   Fonts
\* =============================================================== */
@font-face {
  font-family: "Housky Demo";
  src: url("../assets/fonts/HouskyDemo.woff2") format("woff2"), url("../assets/fonts/HouskyDemo.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Brown Regular";
  src: url("../assets/fonts/Brown-Regular.woff2") format("woff2"), url("../assets/fonts/Brown-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Brown Italic";
  src: url("../assets/fonts/Brown-RegularItalic.woff2") format("woff2"), url("../assets/fonts/Brown-RegularItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Brown Bold";
  src: url("../assets/fonts/Brown-Bold.woff2") format("woff2"), url("../assets/fonts/Brown-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Brown Bold Italic";
  src: url("../assets/fonts/Brown-BoldItalic.woff2") format("woff2"), url("../assets/fonts/Brown-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}
/* =============================================================== *\
   SCSS Struktur

   _reset.scss       → Reset / Normalize / Form-Reset
   _variables.scss   → Farben, Abstände, Schriftgrößen als Variablen
   _fonts.scss       → @font-face Deklarationen
   _base.scss        → Basis-Styles für HTML-Elemente
   _layout.scss      → Grids, Container, Header, Footer, Sidebar
   _components.scss  → Buttons, Cards, Modals, Formulare

   Terminal: npm run watch

\* =============================================================== */
/* =============================================================== *\
   Basis-Styles für HTML-Elemente
\* =============================================================== */
html,
body {
  font-family: "Brown Regular", sans-serif;
  font-size: 20px;
  line-height: 1.5;
  background-color: #F3F4F6;
  scroll-behavior: smooth;
  hyphens: auto;
  color: #231F20;
  padding: 0 !important;
  margin: 0 !important;
}

body.no-scroll {
  overflow: hidden;
  height: 100%;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  hyphens: auto;
  color: #005CB9;
  line-height: 1.2em;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 40px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

a {
  color: #005CB9;
  text-decoration: none;
}
a:hover {
  color: #E3001B;
  text-decoration: none;
}

p {
  line-height: 1.2em;
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

blockquote p {
  font-family: "Housky Demo";
  font-size: 80px;
  color: #005CB9;
  line-height: 0.8em;
}

.ud-titel {
  margin-bottom: 2.5vw;
  gap: 1em;
  line-height: 2em;
}

.ud-icon-row {
  display: flex;
  align-items: center;
  vertical-align: middle;
}

#hinweis {
  margin-top: 1em;
  font-size: 0.8em;
}

.ud-fett {
  font-weight: bold;
}

.ud-kursiv {
  font-style: italic;
}

/* =============================================================== *\
   SCSS Struktur

   _reset.scss       → Reset / Normalize / Form-Reset
   _variables.scss   → Farben, Abstände, Schriftgrößen als Variablen
   _fonts.scss       → @font-face Deklarationen
   _base.scss        → Basis-Styles für HTML-Elemente
   _layout.scss      → Grids, Container, Header, Footer, Sidebar
   _components.scss  → Buttons, Cards, Modals, Formulare

   Terminal: npm run watch

\* =============================================================== */
/* =============================================================== *\
   Layout: Container, Grids, Header, Footer, Sidebar
\* =============================================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: #005CB9;
  font-weight: bold;
  color: #FFFFFF;
  padding: 30px;
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}
header .custom-logo {
  transition: max-height 0.3s ease;
  height: auto;
  max-height: 80px;
}
header.scrolled {
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
header.scrolled .custom-logo {
  max-height: 40px;
}
header #ud-menu {
  column-gap: 3em;
}
header #ud-menu figure {
  display: flex;
  align-items: center;
}
header #ud-menu a {
  color: #FFFFFF;
}
header .ud-menu-zeile {
  width: 100%;
  font-size: 40px;
  align-items: center;
  margin: 0.2em 0;
  column-gap: 0.5em;
}
header .ud-menu-zeile figure {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 65px;
  max-width: 65px;
}
header .ud-menu-zeile a {
  color: #FFFFFF;
  transition: all 0.4s ease-in-out;
}
header .ud-menu-zeile a:hover {
  color: #a78bfa;
}

#hero-section,
.hero-section {
  width: 100vw;
  position: relative;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  max-width: none;
  margin-bottom: 200px;
  aspect-ratio: 8/4 !important;
  margin-top: 129px;
  margin-bottom: 400px;
}
#hero-section .wp-block-cover,
.hero-section .wp-block-cover {
  height: 100%;
  width: 100%;
  overflow: visible;
}
#hero-section .wp-block-cover .wp-block-cover__inner-container,
.hero-section .wp-block-cover .wp-block-cover__inner-container {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #005CB9;
  color: #FFFFFF;
  padding-top: clamp(10px, 3vw, 40px);
  padding-bottom: clamp(20px, 6vw, 80px);
  padding-left: clamp(20px, 5vw, 100px);
  padding-right: clamp(20px, 5vw, 100px);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 2;
}
#hero-section .wp-block-cover .wp-block-cover__inner-container h2,
.hero-section .wp-block-cover .wp-block-cover__inner-container h2 {
  font-size: clamp(38px, 4vw, 55px) !important;
  line-height: 1em;
  margin-bottom: 1em;
}
#hero-section .wp-block-cover .wp-block-cover__inner-container p,
.hero-section .wp-block-cover .wp-block-cover__inner-container p {
  max-width: 80%;
  margin-left: 0 !important;
  font-size: clamp(18px, 2vw, 24px);
}
#hero-section .wp-block-cover .wp-block-cover__inner-container .ud-claim,
.hero-section .wp-block-cover .wp-block-cover__inner-container .ud-claim {
  font-family: "Housky Demo";
  font-size: clamp(40px, 4vw, 80px);
  line-height: 0.8em;
}

#online-schalter h2 {
  margin-bottom: 0.2em;
}
#online-schalter .ud-claim {
  margin-bottom: 0.2em;
}

#unternehmensprofil h3 {
  margin-bottom: 1em;
}

#kostenuebersicht h2,
#akkreditierung h2,
#willkommen h2 {
  margin-bottom: 0.2em;
}
#kostenuebersicht .ud-claim,
#akkreditierung .ud-claim,
#willkommen .ud-claim {
  margin-top: 0.6em;
  margin-bottom: 0.4em;
  -webkit-text-stroke: 0.5px white;
}

h2.wp-block-post-title {
  display: none;
}

.entry-content {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.entry-content #agb-content,
.entry-content #contact-content,
.entry-content #beratung-content,
.entry-content #faq-content-wrapper {
  border-left: 8px solid #D0D0D0;
  padding: clamp(20px, 3vw, 40px);
  background-color: #FFFFFF;
}
.entry-content .ud-media-text-grid,
.entry-content #faq-content {
  counter-reset: iconitem;
  column-count: 2;
  column-gap: 4vw;
}
@media (max-width: 768px) {
  .entry-content .ud-media-text-grid,
  .entry-content #faq-content {
    column-count: 1;
  }
}
.entry-content #faq-content h3 {
  font-size: 28px;
  margin-bottom: 1em;
}
.entry-content #contact-content,
.entry-content #beratung-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6vw;
}
@media (max-width: 768px) {
  .entry-content #contact-content,
  .entry-content #beratung-content {
    grid-template-columns: 1fr;
  }
}
.entry-content #contact-content #filiale-seewen,
.entry-content #beratung-content #filiale-seewen {
  margin-top: 3vw;
}
.entry-content .ud-text-item h2::before {
  content: counter(iconitem) ". ";
  font-weight: bold;
  margin-right: 0.25em;
  color: #005cb9;
}
.entry-content .ud-icon-item {
  counter-increment: iconitem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 3em;
}
.entry-content .ud-icon-item img {
  width: 40px;
  height: auto;
  margin-top: 0.6em;
}
.entry-content .ud-text-item h2 {
  margin: 0 0 0.25em;
  line-height: 1.2em;
}
.entry-content .ud-text-item p {
  margin: 0;
}
.entry-content .ud-abschnitt {
  margin-bottom: 5vw;
}
.entry-content .ud-abschnitt h2 {
  line-height: 1.1em;
  font-size: 28px;
  margin-bottom: 2vw;
}
.entry-content .ud-abschnitt p {
  margin-bottom: 1em;
}
.entry-content .ud-abschnitt ul {
  margin-bottom: 1em;
  list-style: disc;
  padding-left: 1em;
}
.entry-content .ud-abschnitt ul li {
  position: relative;
  line-height: 1.2em;
  margin-bottom: 0.8em;
}
.entry-content #email-adresse {
  margin-top: 1.5vw;
  margin-bottom: 3vw;
}
.entry-content #filiale-seewen,
.entry-content #filiale-seewen {
  margin-bottom: 3vw;
}
.entry-content .ud-zitat-block > .wp-block-group,
.entry-content .ud-zitat-block > figure {
  flex-basis: 50%;
}
.entry-content .ud-zitat-block > figure {
  max-width: 400px;
  z-index: 2;
}
.entry-content .ud-zitat-block > figure img {
  transform: translateY(70px);
}
.entry-content .ud-zitat-block > .wp-block-group {
  flex-grow: 2;
}

.ud-block {
  background-color: #FFFFFF;
  box-shadow: var(--ans-kachel-shadow);
  margin-bottom: clamp(200px, 10vw, 280px);
}
.ud-block.ud-grey {
  border-left: 8px solid #D0D0D0;
  padding: clamp(10px, 3vw, 40px) clamp(20px, 5vw, 100px);
}
.ud-block .ud-titel-icon {
  padding-bottom: 1em;
}
.ud-block .ud-titel-icon > figure {
  transform: translateX(clamp(5px, 3vw, 40px));
}
.ud-block p {
  max-width: 85%;
  margin-bottom: 1em;
  margin-left: 0 !important;
}
.ud-block .wp-block-list {
  list-style: none;
  padding-left: 0;
}
.ud-block .wp-block-list li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.75em;
  line-height: 1.2em;
}
.ud-block .wp-block-list li::before {
  content: "\f14a";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 400;
  position: absolute;
  left: 0;
  top: 0.05em;
  color: #005CB9;
  font-size: 1.5em;
  line-height: 1;
}
.ud-block .ud-list-icon:first-of-type {
  margin-top: 2.5vw;
}

/* Angebots Block */
.ud-angebot-block {
  background-color: #E6EAFF;
  padding: clamp(30px, 2vw, 60px) clamp(40px, 4vw, 80px);
  box-shadow: 6px 6px 12px rgba(16, 39, 94, 0.08);
  margin-bottom: 8vw;
}
.ud-angebot-block.ud-blue {
  border-left: 8px solid #005CB9;
  padding: clamp(10px, 3vw, 40px) clamp(20px, 5vw, 100px);
}
.ud-angebot-block h2 {
  font-size: 40px;
  margin-bottom: 0.4em;
}
.ud-angebot-block h3 {
  font-size: 30px;
  margin-bottom: 0.4em;
}
.ud-angebot-block .ud-angebotshinweis {
  max-width: 80%;
  margin-left: 0 !important;
}
.ud-angebot-block .ud-angebot-vorteil {
  display: flex;
  gap: 4vw;
  margin-top: 2.5vw;
}
.ud-angebot-block .ud-angebot-vorteil > div {
  flex: 1;
}
@media (max-width: 768px) {
  .ud-angebot-block .ud-angebot-vorteil {
    flex-direction: column;
  }
  .ud-angebot-block .ud-angebot-vorteil > div {
    flex: none;
    width: 100%;
  }
}
.ud-angebot-block .ud-angebot-vorteil .ud-angebot .ud-angebot-liste {
  list-style: none;
  margin-top: 1vw;
  padding: 0;
  color: #005CB9;
}
.ud-angebot-block .ud-angebot-vorteil .ud-angebot .ud-angebot-liste li {
  position: relative;
  padding: 0.4em 2em;
  line-height: 1em;
}
.ud-angebot-block .ud-angebot-vorteil .ud-angebot .ud-angebot-liste li::before {
  content: "\f14a";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 400;
  position: absolute;
  left: 0;
  top: 0.3em;
  color: #005CB9;
  font-size: 1.2em;
  line-height: 1;
}
.ud-angebot-block .ud-angebot-vorteil .ud-vorteile .ud-vorteile-liste {
  list-style: none;
  margin-top: 1vw;
  padding: 0;
  color: #005CB9;
}
.ud-angebot-block .ud-angebot-vorteil .ud-vorteile .ud-vorteile-liste li {
  position: relative;
  padding: 0.4em 2em;
  line-height: 1em;
}
.ud-angebot-block .ud-angebot-vorteil .ud-vorteile .ud-vorteile-liste li::before {
  content: "\f164";
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  position: absolute;
  left: 0;
  top: 0.2em;
  color: #005CB9;
  font-size: 1.2em;
  line-height: 1;
}
.ud-angebot-block .ud-angebot-cta {
  margin-top: 2vw;
  position: relative;
  font-family: "Housky Demo";
  color: var(--ans-gruen);
  -webkit-text-stroke: 0.5px var(--ans-gruen);
  text-shadow: -0.5px -0.5px 0 var(--ans-gruen), 0.5px -0.5px 0 var(--ans-gruen), -0.5px 0.5px 0 var(--ans-gruen), 0.5px 0.5px 0 var(--ans-gruen) n;
  font-size: 60px;
  letter-spacing: 1px;
  transition: background-color 0.3s;
  cursor: pointer;
}
.ud-angebot-block .ud-angebot-cta a {
  font-family: "Housky Demo";
  font-size: clamp(40px, 4vw, 60px);
  color: var(--ans-gruen);
  position: relative;
  padding: 0 1rem;
  line-height: 0.8em;
  background-color: transparent;
}
.ud-angebot-block .ud-angebot-cta a::after {
  content: "->";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
.ud-angebot-block .ud-angebot-cta a:hover::after {
  transform: translateY(-50%) translateX(5px);
}

#Periodische-Elektrokontrolle {
  background-image: url("/wp-content/uploads/2025/10/cal-background.svg");
  background-size: 30% auto;
  background-position: right -20px bottom;
  background-repeat: no-repeat;
}

#Abnahmekontrolle {
  background-image: url("/wp-content/uploads/2025/10/lupe-backround.svg");
  background-size: 35% auto;
  background-position: right bottom;
  background-repeat: no-repeat;
}

#Abnahme-von-Blitzschutzanlagen {
  background-image: url("/wp-content/uploads/2025/10/stroke-background.svg");
  background-size: 35% auto;
  background-position: right bottom;
  background-repeat: no-repeat;
}

#Elektrokontrolle-von-akkreditierten-Spezialanlagen {
  background-image: url("/wp-content/uploads/2025/10/windrad-background.svg");
  background-size: 35% auto;
  background-position: right bottom;
  background-repeat: no-repeat;
}

#Sicherheitsnachweis-bei-Immobilienübergabe {
  background-image: url("/wp-content/uploads/2025/10/immo-background.svg");
  background-size: 35% auto;
  background-position: right 10px bottom -20px;
  background-repeat: no-repeat;
}

#Gerätepruefung {
  background-image: url("/wp-content/uploads/2025/10/plug-background.svg");
  background-size: 35% auto;
  background-position: right bottom;
  background-repeat: no-repeat;
}

#nah-verlässlich {
  background-color: #FFFFFF;
  border-left: 8px solid #D0D0D0;
  margin-bottom: 8vw;
}
#nah-verlässlich .ud-slogan {
  font-family: "Housky Demo";
  font-size: 80px;
  font-weight: normal;
  line-height: 1em;
  color: #005CB9;
  -webkit-text-stroke: 0.5px #005CB9;
  text-shadow: -0.5px -0.5px 0 #005CB9, 0.5px -0.5px 0 #005CB9, -0.5px 0.5px 0 #005CB9, 0.5px 0.5px 0 #005CB9;
  margin-bottom: 0.5em;
}
#nah-verlässlich .ud-flexbox {
  display: flex;
}
#nah-verlässlich .ud-flexbox .ud-column-text {
  padding: clamp(10px, 3vw, 40px) 0 clamp(10px, 3vw, 40px) clamp(20px, 5vw, 100px);
  max-width: 350px;
  box-sizing: content-box;
}
@media (max-width: 1000px) {
  #nah-verlässlich .ud-flexbox {
    display: block;
  }
  #nah-verlässlich .ud-flexbox .ud-column-text {
    width: 100%;
    max-width: fit-content;
    padding: clamp(30px, 2vw, 60px) clamp(40px, 4vw, 80px);
  }
}
#nah-verlässlich .ud-kontaktieren-cta {
  margin-top: 2vw;
  position: relative;
  font-family: "Housky Demo";
  color: var(--ans-gruen);
  -webkit-text-stroke: 0.5px var(--ans-gruen);
  text-shadow: -0.5px -0.5px 0 var(--ans-gruen), 0.5px -0.5px 0 var(--ans-gruen), -0.5px 0.5px 0 var(--ans-gruen), 0.5px 0.5px 0 var(--ans-gruen) n;
  font-size: 60px;
  letter-spacing: 1px;
  transition: background-color 0.3s;
  cursor: pointer;
}
#nah-verlässlich .ud-kontaktieren-cta a {
  font-family: "Housky Demo";
  font-size: clamp(40px, 4vw, 60px);
  color: var(--ans-gruen);
  position: relative;
  padding: 0 1rem;
  line-height: 0.8em;
  background-color: transparent;
}
#nah-verlässlich .ud-kontaktieren-cta a::after {
  content: "->";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
#nah-verlässlich .ud-kontaktieren-cta a:hover::after {
  transform: translateY(-50%) translateX(5px);
}
#nah-verlässlich .ud-kontaktieren-cta {
  /* add space under cta */
  padding-bottom: clamp(10px, 3vw, 40px);
}

#ud-konditionen {
  padding: clamp(10px, 3vw, 40px) clamp(20px, 5vw, 100px);
  background-color: #FFFFFF;
  border-left: 8px solid #D0D0D0;
  margin-bottom: 8vw;
}
#ud-konditionen > div {
  gap: 4vw;
}
#ud-konditionen figure {
  min-width: 106px;
}
#ud-konditionen figure img {
  width: 100%;
  height: auto;
}
#ud-konditionen .ud-konditionen-cta {
  margin-top: 2vw;
  position: relative;
  font-family: "Housky Demo";
  color: var(--ans-gruen);
  -webkit-text-stroke: 0.5px var(--ans-gruen);
  text-shadow: -0.5px -0.5px 0 var(--ans-gruen), 0.5px -0.5px 0 var(--ans-gruen), -0.5px 0.5px 0 var(--ans-gruen), 0.5px 0.5px 0 var(--ans-gruen) n;
  font-size: 60px;
  letter-spacing: 1px;
  transition: background-color 0.3s;
  cursor: pointer;
}
#ud-konditionen .ud-konditionen-cta a {
  font-family: "Housky Demo";
  font-size: clamp(40px, 4vw, 60px);
  color: var(--ans-gruen);
  position: relative;
  padding: 0 1rem;
  line-height: 0.8em;
  background-color: transparent;
}
#ud-konditionen .ud-konditionen-cta a::after {
  content: "->";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
#ud-konditionen .ud-konditionen-cta a:hover::after {
  transform: translateY(-50%) translateX(5px);
}

#fragen {
  padding: clamp(10px, 3vw, 40px) clamp(20px, 5vw, 100px);
  background-color: #FFFFFF;
  border-left: 8px solid #D0D0D0;
  margin-bottom: 8vw;
}
#fragen h3 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  line-height: 1.1em;
}
#fragen > div {
  gap: 4vw;
  align-items: start;
}
#fragen figure {
  min-width: 148px;
}
#fragen figure img {
  width: 100%;
  height: auto;
}
#fragen #elektrokontrolle-liste {
  list-style-type: none;
  list-style-position: inside;
}
#fragen #elektrokontrolle-liste li::marker {
  content: "✔ ";
  color: #005cb9;
  font-size: 1.2em;
}
#fragen #ud-fragen-cta {
  margin-top: 2vw;
  position: relative;
  font-family: "Housky Demo";
  color: var(--ans-gruen);
  -webkit-text-stroke: 0.5px var(--ans-gruen);
  text-shadow: -0.5px -0.5px 0 var(--ans-gruen), 0.5px -0.5px 0 var(--ans-gruen), -0.5px 0.5px 0 var(--ans-gruen), 0.5px 0.5px 0 var(--ans-gruen) n;
  font-size: 60px;
  letter-spacing: 1px;
  transition: background-color 0.3s;
  cursor: pointer;
}
#fragen #ud-fragen-cta a {
  font-family: "Housky Demo";
  font-size: clamp(40px, 4vw, 60px);
  color: var(--ans-gruen);
  position: relative;
  padding: 0 1rem;
  line-height: 0.8em;
  background-color: transparent;
}
#fragen #ud-fragen-cta a::after {
  content: "->";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
#fragen #ud-fragen-cta a:hover::after {
  transform: translateY(-50%) translateX(5px);
}
#fragen #ud-fragen-cta {
  gap: 4vw;
}

#ablauf {
  padding: clamp(10px, 3vw, 40px) clamp(20px, 5vw, 100px);
  background-color: #FFFFFF;
  border-left: 8px solid #D0D0D0;
  margin-bottom: 8vw;
}
#ablauf p:first-of-type {
  max-width: 80%;
  margin-left: 0 !important;
}
#ablauf #ablauf-kontrolle {
  margin-top: 4em;
}
#ablauf #ablauf-kontrolle #maengel {
  display: flex;
  flex-direction: row;
}
#ablauf #ablauf-kontrolle #maengel > div {
  flex: 1;
}
#ablauf #ablauf-kontrolle #maengel > div:first-of-type {
  justify-content: space-between;
}
#ablauf #ablauf-kontrolle #maengel .ud-maengel-legende {
  color: #005CB9;
}
#ablauf #ablauf-kontrolle .ud-box-blau {
  background-color: #005CB9;
  padding: clamp(10px, 2vw, 20px);
  color: #FFFFFF;
  gap: 2em;
}
#ablauf #ablauf-kontrolle .ud-box-blau figure {
  min-width: 70px;
  max-width: 70px;
  width: 70px;
}
#ablauf #ablauf-kontrolle .ud-box-blau h2,
#ablauf #ablauf-kontrolle .ud-box-blau h3,
#ablauf #ablauf-kontrolle .ud-box-blau h4 {
  color: #FFFFFF;
  line-height: 1.1em;
  font-size: 25px;
}
#ablauf #ablauf-kontrolle .ud-pfeil-down {
  margin: 5px 0;
}
#ablauf #ud-ablauf-cta {
  padding-top: 2em;
  margin-top: 2vw;
  position: relative;
  font-family: "Housky Demo";
  color: var(--ans-gruen);
  -webkit-text-stroke: 0.5px var(--ans-gruen);
  text-shadow: -0.5px -0.5px 0 var(--ans-gruen), 0.5px -0.5px 0 var(--ans-gruen), -0.5px 0.5px 0 var(--ans-gruen), 0.5px 0.5px 0 var(--ans-gruen) n;
  font-size: 60px;
  letter-spacing: 1px;
  transition: background-color 0.3s;
  cursor: pointer;
}
#ablauf #ud-ablauf-cta a {
  font-family: "Housky Demo";
  font-size: clamp(40px, 4vw, 60px);
  color: var(--ans-gruen);
  position: relative;
  padding: 0 1rem;
  line-height: 0.8em;
  background-color: transparent;
}
#ablauf #ud-ablauf-cta a::after {
  content: "->";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
#ablauf #ud-ablauf-cta a:hover::after {
  transform: translateY(-50%) translateX(5px);
}
#ablauf #ud-ablauf-cta {
  gap: 2vw;
}

#ud-swiss-accreditation {
  padding: clamp(10px, 3vw, 40px) clamp(20px, 5vw, 100px);
  background-color: #FFFFFF;
  border-left: 8px solid #D0D0D0;
  margin-bottom: 8vw;
}
@media screen and (max-width: 800px) {
  #ud-swiss-accreditation > .wp-block-group {
    flex-direction: column;
  }
}
#ud-swiss-accreditation > div {
  gap: 6vw;
  align-items: start;
}
#ud-swiss-accreditation > div #swiss-acc-badge {
  min-width: 260px;
}
#ud-swiss-accreditation > div #swiss-acc-badge img {
  width: 100%;
  height: auto;
}
#ud-swiss-accreditation > div #sicherheit-liste {
  margin: 2em 0;
}
#ud-swiss-accreditation > div #sicherheit-liste .ud-sicherheit-row {
  gap: 2vw;
  margin-bottom: 1em;
}
#ud-swiss-accreditation > div #sicherheit-liste .ud-sicherheit-row figure {
  width: 60px;
  max-width: 60px;
  min-width: 60px;
}
#ud-swiss-accreditation > div #sicherheit-liste .ud-sicherheit-row figure img {
  width: 100%;
  height: auto;
}
#ud-swiss-accreditation .ud-swissacc-cta {
  margin-top: 2vw;
  position: relative;
  font-family: "Housky Demo";
  color: var(--ans-gruen);
  -webkit-text-stroke: 0.5px var(--ans-gruen);
  text-shadow: -0.5px -0.5px 0 var(--ans-gruen), 0.5px -0.5px 0 var(--ans-gruen), -0.5px 0.5px 0 var(--ans-gruen), 0.5px 0.5px 0 var(--ans-gruen) n;
  font-size: 60px;
  letter-spacing: 1px;
  transition: background-color 0.3s;
  cursor: pointer;
}
#ud-swiss-accreditation .ud-swissacc-cta a {
  font-family: "Housky Demo";
  font-size: clamp(40px, 4vw, 60px);
  color: var(--ans-gruen);
  position: relative;
  padding: 0 1rem;
  line-height: 0.8em;
  background-color: transparent;
}
#ud-swiss-accreditation .ud-swissacc-cta a::after {
  content: "->";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
#ud-swiss-accreditation .ud-swissacc-cta a:hover::after {
  transform: translateY(-50%) translateX(5px);
}

#referenzen {
  padding: clamp(10px, 3vw, 40px) clamp(20px, 5vw, 100px);
  background-color: #FFFFFF;
  border-left: 8px solid #D0D0D0;
  margin-bottom: 8vw;
}
#referenzen h2 {
  font-family: "Housky Demo";
  font-size: clamp(40px, 4vw, 60px);
  font-weight: normal;
  -webkit-text-stroke: 0.5px var(--ans-blau);
  text-shadow: -0.5px -0.5px 0 var(--ans-blau), 0.5px -0.5px 0 var(--ans-blau), -0.5px 0.5px 0 var(--ans-blau), 0.5px 0.5px 0 var(--ans-blau);
}
#referenzen > div {
  gap: 8vw;
}

#daniel-ulrich-zitat figure img {
  mix-blend-mode: multiply;
}

#preisberechnung ul li,
#zusatzleistungen ul li {
  padding-left: 1em;
}
#preisberechnung ul li::before,
#zusatzleistungen ul li::before {
  content: "•";
  font-family: "Font Awesome Pro";
  font-weight: 900;
}

#sicherheitsprüfung #ud-pruefung-cta {
  margin-top: 2vw;
  position: relative;
  font-family: "Housky Demo";
  color: var(--ans-gruen);
  -webkit-text-stroke: 0.5px var(--ans-gruen);
  text-shadow: -0.5px -0.5px 0 var(--ans-gruen), 0.5px -0.5px 0 var(--ans-gruen), -0.5px 0.5px 0 var(--ans-gruen), 0.5px 0.5px 0 var(--ans-gruen) n;
  font-size: 60px;
  letter-spacing: 1px;
  transition: background-color 0.3s;
  cursor: pointer;
}
#sicherheitsprüfung #ud-pruefung-cta a {
  font-family: "Housky Demo";
  font-size: clamp(40px, 4vw, 60px);
  color: var(--ans-gruen);
  position: relative;
  padding: 0 1rem;
  line-height: 0.8em;
  background-color: transparent;
}
#sicherheitsprüfung #ud-pruefung-cta a::after {
  content: "->";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
#sicherheitsprüfung #ud-pruefung-cta a:hover::after {
  transform: translateY(-50%) translateX(5px);
}

/* Was bedeutet SIS 0194 Block */
#ud-swiss-accreditation-bedeutung .wp-block-group {
  column-gap: 4vw;
}
#ud-swiss-accreditation-bedeutung .wp-block-group figure {
  min-width: 260px;
  max-width: 260px;
  width: 260px;
  align-self: self-start;
}
#ud-swiss-accreditation-bedeutung #ud-swissacc-cta {
  margin-top: 2vw;
  position: relative;
  font-family: "Housky Demo";
  color: var(--ans-gruen);
  -webkit-text-stroke: 0.5px var(--ans-gruen);
  text-shadow: -0.5px -0.5px 0 var(--ans-gruen), 0.5px -0.5px 0 var(--ans-gruen), -0.5px 0.5px 0 var(--ans-gruen), 0.5px 0.5px 0 var(--ans-gruen) n;
  font-size: 60px;
  letter-spacing: 1px;
  transition: background-color 0.3s;
  cursor: pointer;
}
#ud-swiss-accreditation-bedeutung #ud-swissacc-cta a {
  font-family: "Housky Demo";
  font-size: clamp(40px, 4vw, 60px);
  color: var(--ans-gruen);
  position: relative;
  padding: 0 1rem;
  line-height: 0.8em;
  background-color: transparent;
}
#ud-swiss-accreditation-bedeutung #ud-swissacc-cta a::after {
  content: "->";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
#ud-swiss-accreditation-bedeutung #ud-swissacc-cta a:hover::after {
  transform: translateY(-50%) translateX(5px);
}

/* Geltungsbereich unserer Akkreditierung */
#geltungsbereich .wp-block-group {
  column-gap: 2vw;
}
#geltungsbereich .wp-block-group figure {
  align-self: self-start;
  width: 65px;
  min-width: 65px;
  max-width: 65px;
}
#geltungsbereich ul {
  margin-bottom: 1em;
  list-style: disc;
  padding-left: 1em;
}
#geltungsbereich ul li {
  position: relative;
  line-height: 1.2em;
  margin-bottom: 0.8em;
  padding-left: 0;
}
#geltungsbereich ul li::before {
  display: none;
}
#geltungsbereich #ud-geltung-cta {
  margin-top: 2vw;
  position: relative;
  font-family: "Housky Demo";
  color: var(--ans-gruen);
  -webkit-text-stroke: 0.5px var(--ans-gruen);
  text-shadow: -0.5px -0.5px 0 var(--ans-gruen), 0.5px -0.5px 0 var(--ans-gruen), -0.5px 0.5px 0 var(--ans-gruen), 0.5px 0.5px 0 var(--ans-gruen) n;
  font-size: 60px;
  letter-spacing: 1px;
  transition: background-color 0.3s;
  cursor: pointer;
}
#geltungsbereich #ud-geltung-cta a {
  font-family: "Housky Demo";
  font-size: clamp(40px, 4vw, 60px);
  color: var(--ans-gruen);
  position: relative;
  padding: 0 1rem;
  line-height: 0.8em;
  background-color: transparent;
}
#geltungsbereich #ud-geltung-cta a::after {
  content: "->";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
#geltungsbereich #ud-geltung-cta a:hover::after {
  transform: translateY(-50%) translateX(5px);
}

/* Unsere Dienstleistungen und Expertise */
#expertise ul {
  margin-bottom: 1em;
  list-style: disc;
  padding-left: 1em;
}
#expertise ul li {
  position: relative;
  line-height: 1.2em;
  margin-bottom: 0.8em;
  padding-left: 0;
}
#expertise ul li::before {
  display: none;
}
#expertise #ud-geltung-cta {
  margin-top: 2vw;
  position: relative;
  font-family: "Housky Demo";
  color: var(--ans-gruen);
  -webkit-text-stroke: 0.5px var(--ans-gruen);
  text-shadow: -0.5px -0.5px 0 var(--ans-gruen), 0.5px -0.5px 0 var(--ans-gruen), -0.5px 0.5px 0 var(--ans-gruen), 0.5px 0.5px 0 var(--ans-gruen) n;
  font-size: 60px;
  letter-spacing: 1px;
  transition: background-color 0.3s;
  cursor: pointer;
}
#expertise #ud-geltung-cta a {
  font-family: "Housky Demo";
  font-size: clamp(40px, 4vw, 60px);
  color: var(--ans-gruen);
  position: relative;
  padding: 0 1rem;
  line-height: 0.8em;
  background-color: transparent;
}
#expertise #ud-geltung-cta a::after {
  content: "->";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
#expertise #ud-geltung-cta a:hover::after {
  transform: translateY(-50%) translateX(5px);
}

/* Stellenanzeige Block */
#ud-stellenanzeige {
  border-left: 8px solid #15B436;
  padding: clamp(10px, 3vw, 40px) clamp(20px, 5vw, 100px);
}
#ud-stellenanzeige h2 {
  line-height: 1.1em;
  margin-bottom: 0.6em;
}
#ud-stellenanzeige .ud-button {
  margin-top: 2vw;
  position: relative;
  font-family: "Housky Demo";
  color: var(--ans-gruen);
  -webkit-text-stroke: 0.5px var(--ans-gruen);
  text-shadow: -0.5px -0.5px 0 var(--ans-gruen), 0.5px -0.5px 0 var(--ans-gruen), -0.5px 0.5px 0 var(--ans-gruen), 0.5px 0.5px 0 var(--ans-gruen) n;
  font-size: 60px;
  letter-spacing: 1px;
  transition: background-color 0.3s;
  cursor: pointer;
}
#ud-stellenanzeige .ud-button a {
  font-family: "Housky Demo";
  font-size: clamp(40px, 4vw, 60px);
  color: var(--ans-gruen);
  position: relative;
  padding: 0 1rem;
  line-height: 0.8em;
  background-color: transparent;
}
#ud-stellenanzeige .ud-button a::after {
  content: "->";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
#ud-stellenanzeige .ud-button a:hover::after {
  transform: translateY(-50%) translateX(5px);
}
#ud-stellenanzeige .ud-button {
  margin-top: 1rem;
  line-height: 1em;
}

/* Details zur Akkreditierung */
#detail-akkreditierung .wp-block-group {
  column-gap: 2vw;
}
#detail-akkreditierung .wp-block-group figure {
  align-self: self-start;
  max-width: 60px;
}
#detail-akkreditierung .wp-block-group figure#ch-schild {
  max-width: 100px;
}
#detail-akkreditierung .wp-block-group .wp-block-group {
  column-gap: 1vw;
  row-gap: 0.2vw;
}

/* Seite Impressum / Datenschutz */
.page-id-824 .ud-block,
.page-id-3 .ud-block {
  margin-bottom: clamp(100px, 5vw, 140px);
}
.page-id-824 .ud-block h3,
.page-id-3 .ud-block h3 {
  margin-bottom: 1em;
}
.page-id-824 .ud-block ul,
.page-id-3 .ud-block ul {
  margin-bottom: 1em;
  list-style: disc;
  padding-left: 1em;
}
.page-id-824 .ud-block ul li,
.page-id-3 .ud-block ul li {
  position: relative;
  line-height: 1.2em;
  margin-bottom: 0.8em;
  padding-left: 0;
}
.page-id-824 .ud-block ul li::before,
.page-id-3 .ud-block ul li::before {
  display: none;
}

.page-id-3 .ud-title-icon {
  margin-bottom: 1em;
}
.page-id-3 h3 {
  font-size: 24px;
  margin-bottom: 0.2em !important;
}

footer {
  background-color: #005CB9;
  color: #FFFFFF;
  padding: 80px 30px 30px 60px;
  margin-top: 20vw;
}
footer a {
  color: #FFFFFF;
  transition: all 0.3s ease-in-out;
}
footer a:hover {
  color: #A78BFA;
}
footer h2 {
  color: #FFFFFF;
  line-height: 1em;
  font-size: 24px;
  margin-bottom: 30px;
}
footer li {
  line-height: 1.4em;
}
footer #kontrollorgan,
footer #ans-elektrosicherheit,
footer #oeffnungszeiten {
  position: relative;
}
footer #kontrollorgan {
  padding-bottom: 0.8em;
}
footer #kontrollorgan::before {
  content: url("https://ans-elektrosicherheit.ulrich.digital/wp-content/uploads/2025/09/Swiss.svg");
  position: absolute;
  left: -40px;
  top: 0.1em;
  width: 25px;
  height: 25px;
}
footer #ans-elektrosicherheit::before {
  content: url("https://ans-elektrosicherheit.ulrich.digital/wp-content/uploads/2025/09/location.svg");
  position: absolute;
  left: -40px;
  top: 0.1em;
  width: 25px;
  height: 25px;
}
footer #oeffnungszeiten::before {
  content: url("https://ans-elektrosicherheit.ulrich.digital/wp-content/uploads/2025/09/clock.svg");
  position: absolute;
  left: -40px;
  top: 0.1em;
  width: 25px;
  height: 25px;
}
footer #bottom-menu {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}
footer #bottom-menu #bottom-menu-nav {
  display: flex;
}
footer #bottom-menu #bottom-menu-nav li {
  position: relative;
  padding: 0 0.75em;
}
footer #bottom-menu #bottom-menu-nav li:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: 0;
}

/* =============================================================== *\
   SCSS Struktur

   _reset.scss       → Reset / Normalize / Form-Reset
   _variables.scss   → Farben, Abstände, Schriftgrößen als Variablen
   _fonts.scss       → @font-face Deklarationen
   _base.scss        → Basis-Styles für HTML-Elemente
   _layout.scss      → Grids, Container, Header, Footer, Sidebar
   _components.scss  → Buttons, Cards, Modals, Formulare

   Terminal: npm run watch

\* =============================================================== */
/* =============================================================== *\
   Komponenten: Buttons, Formulare, Spinner, Modals
\* =============================================================== */
#start-analysis-btn {
  padding: 1rem 1.5rem;
  background-color: aliceblue;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Dropzone */
#file7_dropzone .dz-preview.dz-complete.dz-image-preview {
  cursor: pointer;
}
#file7_dropzone a.dz-remove.frm_remove_link {
  pointer-events: none !important;
  cursor: pointer;
}

/* TinyMCE Hacks */
#wp-field_zo3g2-editor-tools {
  visibility: hidden;
}

.mce-top-part {
  display: none !important;
}

#mceu_33 > * {
  visibility: hidden;
}

#mceu_32 {
  border-top: none;
}

#mceu_31,
#field_zo3g2_ifr {
  min-height: 420px !important;
}

#frm_desc_field_zo3g2,
#frm_desc_field_2md7y {
  padding-top: 10px;
}

.frm_description {
  font-size: 0.8rem !important;
  line-height: 1.2em;
}

#frm_checkbox_110-0 label,
#frm_checkbox_116-0 label {
  display: flex;
  align-items: center;
}

/* Spinner */
.spinner-modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease;
}
.spinner-modal.active {
  visibility: visible;
  opacity: 1;
}
.spinner-modal .spinner-container {
  background-color: #f8d7da;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 300px;
  width: 90%;
}
.spinner-modal .spinner-container .spinner {
  width: 40px;
  height: 40px;
  border: 5px solid #ccc;
  border-top: 5px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}
.spinner-modal .spinner-container p {
  margin: 0;
  font-size: 16px;
  color: #721c24;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Error-Message */
.error-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 5px;
  width: 80%;
  max-width: 500px;
  z-index: 9999;
  display: block;
}
.error-message .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #721c24;
}
.error-message .close-btn:hover {
  color: black;
}

.frm_error {
  color: #E3001B !important;
  font-size: 0.8rem !important;
  font-style: italic !important;
  padding: 0.5em 0 !important;
}

/* Image-Container */
.ud-image-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin-top: 25px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

/* Formulare */
.frm_form_field:not(.frm_compact) .frm_dropzone {
  max-width: none;
}

.frm-show-form input,
.frm-show-form textarea {
  margin: 10px 0;
}

#frm_form_2_container h3.frm_pos_top {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  font-size: 30px;
  color: #005CB9;
}

#frm_radio_17-14-0 img,
#frm_radio_17-14-1 img,
#frm_radio_17-14-2 img {
  height: 120px;
  width: auto;
}

#field_zo3g2_label {
  position: absolute;
}

/* Auftrags-Form */
#auftrags-form {
  margin-top: 4em;
  display: flex;
  column-gap: 2em;
}
#auftrags-form .form-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 5px;
  padding: clamp(5px, 1.5vw, 20px) clamp(10px, 2.5vw, 40px) !important;
  box-shadow: 6px 6px 12px rgba(16, 39, 94, 0.08);
  background-color: #FFFFFF;
  border-left: 8px solid #D0D0D0;
}
#auftrags-form .form-option ul.form-option-details {
  margin: 1em 0;
  list-style: disc;
  padding-left: 1em;
}
#auftrags-form .form-option ul.form-option-details li {
  position: relative;
  line-height: 1.2em;
  margin-bottom: 0.8em;
}
#auftrags-form input[type=radio] {
  margin-right: 10px;
}
#auftrags-form h3 {
  margin-bottom: 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: 10px;
}
#auftrags-form h3 i {
  font-family: "Font Awesome 6 Sharp";
  font-weight: 400;
  font-size: 1.5em;
}
#auftrags-form ul {
  padding-left: 10px;
  padding-top: 10px;
  list-style: disc;
  list-style-position: inside;
}
#auftrags-form ul li {
  margin-bottom: 5px;
}
#auftrags-form .form-option-button-container {
  display: flex;
  justify-content: center;
}

/* OCR Formulare */
#ud-ocr-formular,
#ud-ohne-ocr-formular {
  display: none;
  margin-top: 20px;
  padding: clamp(5px, 1.5vw, 20px) clamp(10px, 2.5vw, 40px);
  box-shadow: 6px 6px 12px rgba(16, 39, 94, 0.08);
  border-left: 8px solid #D0D0D0;
}
#ud-ocr-formular.active,
#ud-ohne-ocr-formular.active {
  display: block;
}
#ud-ocr-formular .frm_description,
#ud-ohne-ocr-formular .frm_description {
  color: #005CB9;
}
#ud-ocr-formular .frm_primary_label,
#ud-ocr-formular .frm_pos_top,
#ud-ohne-ocr-formular .frm_primary_label,
#ud-ohne-ocr-formular .frm_pos_top {
  font-size: 0.8rem;
  border: none;
}

#ud-ocr-formular {
  background-color: #FFFFFF;
  border-radius: 0;
  margin-top: 5em;
}
#ud-ocr-formular h3 {
  margin-top: 0.5em;
  margin-bottom: 0.2em;
}
#ud-ocr-formular .frm_dropzone .dz-message {
  border: 1.5px dashed #231F20;
}
#ud-ocr-formular #frm_field_8_container,
#ud-ocr-formular #frm_field_25_container {
  margin-top: 2rem;
}
#ud-ocr-formular .frm_submit {
  justify-content: center;
}
#ud-ocr-formular .ud-image-container {
  margin-top: 158px !important;
  line-height: 1.1em;
  align-items: center;
  font-size: 0.8em;
  color: #231F20;
  border: 1.5px solid #231F20;
  aspect-ratio: 1/1.414;
}
#ud-ocr-formular .frm_opt_container .frm_checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-top: 8px;
  line-height: 1.2em;
}
#ud-ocr-formular .frm_opt_container .frm_checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-weight: normal;
  font-size: 0.8rem !important;
  color: #231F20 !important;
  cursor: pointer;
  line-height: 1.2em !important;
}
#ud-ocr-formular .frm_opt_container .frm_checkbox input[type=checkbox] {
  accent-color: #005CB9;
  transform: scale(1.2);
  flex-shrink: 0;
  margin-top: 6px;
}
#ud-ocr-formular .frm_opt_container .frm_checkbox {
  /* Wenn der gesamte Text im Label steht */
}
#ud-ocr-formular .frm_opt_container .frm_checkbox label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8em;
  line-height: 1.4;
}
#ud-ocr-formular .frm_submit {
  margin-top: 2rem;
}

#frm_checkbox_89-0 {
  width: 80%;
  font-size: 0.75rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
}

.frm_rootline_group {
  pointer-events: none !important;
  cursor: default;
}

.with_frm_style .vertical_radio .frm_checkbox label, .with_frm_style .vertical_radio .frm_radio label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.frm_dropzone .dz-message {
  border-color: #231F20 !important;
  border-width: 1.5px !important;
}

#field_stisu {
  min-height: 294px;
}

.frm_form_fields textarea.frm_focus,
.frm_form_fields textarea:focus {
  border: 1.5px solid #005CB9 !important;
}

.frm_image_options .frm_image_option_container {
  border: none;
  border-radius: 15px;
}

.frm_radio {
  background-color: #F4F4F4 !important;
  border-radius: 10px;
}

h3.frm_pos_top {
  font-size: 30px;
}

/* Recaptcha Badge */
.grecaptcha-badge {
  visibility: hidden;
  height: 0;
  opacity: 0;
}

/* Formular ohne Aufforderungsschreiben */
#ud-ohne-ocr-formular {
  background-color: #FFFFFF;
  border-radius: 0;
  margin-top: 5em;
  box-shadow: 6px 6px 12px rgba(16, 39, 94, 0.08);
  border-left: 8px solid #D0D0D0;
  padding: clamp(10px, 3vw, 40px) clamp(20px, 5vw, 100px);
  padding-top: 10px;
}
#ud-ohne-ocr-formular .frm_page_bar input:hover,
#ud-ohne-ocr-formular .frm_page_bar input:focus {
  background-color: #15B436;
}
#ud-ohne-ocr-formular .frm_current_page .frm_rootline_title {
  color: #005CB9;
  font-weight: bold;
}
#ud-ohne-ocr-formular .frm_submit {
  justify-content: center;
  margin-top: 1em;
}
#ud-ohne-ocr-formular .frm_description,
#ud-ohne-ocr-formular #frm_field_34_container {
  margin-top: 0.2rem;
  margin-bottom: 1em;
  font-size: 0.8rem;
  max-width: 80%;
  color: #005CB9;
}
#ud-ohne-ocr-formular #frm_field_34_container {
  margin-top: 2em;
}
#ud-ohne-ocr-formular h3.frm_pos_top {
  font-size: 3rem;
  color: #005CB9;
  margin-bottom: 1.4em;
}
#ud-ohne-ocr-formular {
  /* Radios: Auswahl Funktion */
}
#ud-ohne-ocr-formular #frm_field_33_container .frm_radio {
  display: flex;
  padding: 10px 20px;
  margin-bottom: 15px;
}
#ud-ohne-ocr-formular #frm_field_33_container .frm_radio label {
  display: flex;
  align-items: center;
  gap: 10px;
}
#ud-ohne-ocr-formular #frm_field_33_container .frm_radio label .ud-fett {
  font-size: 0.9rem;
  color: #005CB9;
}
#ud-ohne-ocr-formular #frm_field_33_container .frm_radio label .ud-kursiv {
  font-size: 0.8rem;
  color: #707070;
}
#ud-ohne-ocr-formular #frm_field_44_container,
#ud-ohne-ocr-formular #frm_field_137_container,
#ud-ohne-ocr-formular #frm_field_139_container,
#ud-ohne-ocr-formular #frm_field_76_container {
  background-color: #F4F4F4;
  padding: 15px 20px 10px 20px;
  border-radius: 15px;
  margin-bottom: 15px;
}
#ud-ohne-ocr-formular .frm_html_container.form-field {
  margin-bottom: 10px;
  color: #005CB9;
  font-size: 0.8rem;
}
#ud-ohne-ocr-formular #frm_field_78_container .frm_opt_container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  margin: 20px 0;
}
#ud-ohne-ocr-formular #frm_field_78_container .frm_opt_container label {
  display: flex;
  align-items: center;
}
#ud-ohne-ocr-formular {
  /* Alle icons auf der Zusammenfassungsseite ausblenden */
}
#ud-ohne-ocr-formular #frm_field_88_container i {
  display: none;
}
#ud-ohne-ocr-formular #frm_field_88_container .frm-summary-page-wrapper table tr:last-of-type {
  border-bottom: none;
}

.frm_error_style {
  margin-top: 20px;
}

/* Buttons */
#mit-aufforderung-button,
#ohne-aufforderung-button,
.ud-kontakt-senden button,
#ud-ocr-formular .frm_submit button:not(.frm_prev_page),
#ud-ohne-ocr-formular .frm_submit button:not(.frm_prev_page) {
  position: relative;
  font-family: "Housky Demo";
  color: #15B436;
  -webkit-text-stroke: 0.5px #15B436;
  text-shadow: -0.5px -0.5px 0 #15B436, 0.5px -0.5px 0 #15B436, -0.5px 0.5px 0 #15B436, 0.5px 0.5px 0 #15B436;
  font-size: 60px;
  background-color: transparent;
  letter-spacing: 1px;
  padding: 10px 20px;
  transition: background-color 0.3s;
  cursor: pointer;
}
#mit-aufforderung-button::after,
#ohne-aufforderung-button::after,
.ud-kontakt-senden button::after,
#ud-ocr-formular .frm_submit button:not(.frm_prev_page)::after,
#ud-ohne-ocr-formular .frm_submit button:not(.frm_prev_page)::after {
  content: "->";
  position: absolute;
  right: -20px;
  transition: transform 0.3s ease;
}
#mit-aufforderung-button:hover::after,
#ohne-aufforderung-button:hover::after,
.ud-kontakt-senden button:hover::after,
#ud-ocr-formular .frm_submit button:not(.frm_prev_page):hover::after,
#ud-ohne-ocr-formular .frm_submit button:not(.frm_prev_page):hover::after {
  animation: move-arrow 0.8s ease-in-out infinite;
}

@keyframes move-arrow {
  0% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(-5px);
  }
}
button.frm_prev_page {
  position: relative;
  font-size: 40px !important;
  font-family: "Housky Demo";
  color: #15B436;
  -webkit-text-stroke: 0.5px #15B436;
  text-shadow: -0.5px -0.5px 0 #15B436, 0.5px -0.5px 0 #15B436, -0.5px 0.5px 0 #15B436, 0.5px 0.5px 0 #15B436 !important;
  font-size: 60px;
  background-color: transparent;
  letter-spacing: 1px;
  padding: 10px 20px !important;
  transition: background-color 0.3s;
  cursor: pointer;
}
button.frm_prev_page::before {
  content: "<-";
  position: absolute;
  left: -20px;
  transition: transform 0.3s ease;
}
button.frm_prev_page:hover::before {
  animation: move-arrow 0.8s ease-in-out infinite;
}

#frm_field_6_container .frm_submit {
  display: flex;
  flex-direction: column-reverse;
}

.frm_text_label_for_image_inner {
  font-size: 0.7rem;
}

/* Höhenkorrektur */
.frm_forms input,
.frm_forms textarea {
  margin-top: 0;
}

/* Menu */
#menu-bar {
  width: 32px;
  height: 28px;
  position: relative;
  cursor: pointer;
}
#menu-bar span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
  transition: all 0.3s ease;
}
#menu-bar span:nth-child(1) {
  top: 0;
}
#menu-bar span:nth-child(2) {
  top: 12px;
}
#menu-bar span:nth-child(3) {
  bottom: 0;
}
#menu-bar.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 12px;
}
#menu-bar.open span:nth-child(2) {
  opacity: 0;
}
#menu-bar.open span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: auto;
  top: 12px;
}

/* SearchWP Anpassungen */
.wp-block-search__button {
  background-color: transparent;
  padding: 0;
}
.wp-block-search__button .search-icon {
  height: 40px;
  width: auto;
}

.wp-block-search.wp-block-search__button-only.wp-block-search__icon-button.wp-block-search__searchfield-hidden .wp-block-search__button {
  pointer-events: auto;
}
.wp-block-search.wp-block-search__button-only.wp-block-search__icon-button:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
  pointer-events: none;
}

.wp-block-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.wp-block-search__inside-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.wp-block-search__inside-wrapper .wp-block-search__input {
  color: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  padding: 0;
}

/* Overlay Menu */
#overlay-menu-wrapper {
  height: 0;
  overflow: hidden;
  transition: height 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
#overlay-menu-wrapper.open {
  height: calc(100vh - 130px);
}
#overlay-menu-wrapper #overlay-menu ul li a {
  font-size: clamp(30px, 3vw, 40px);
  color: #FFFFFF;
  text-decoration: none;
}
#overlay-menu-wrapper #overlay-menu ul li a:hover {
  color: #A78BFA;
  transition: all 0.4s ease-in-out;
}

header.scrolled #overlay-menu-wrapper.open {
  height: calc(100vh - 60px);
}

#wpadminbar {
  z-index: 100;
}

/* =============================================================== *\
   Formidable Forms – TinyMCE Editor Styling
\* =============================================================== */
/* Editor-Container (um das iframe herum) */
.js .tmce-active .wp-editor-wrap {
  background-color: #FFFFFF;
  border: 1px solid #231F20;
}
.js .tmce-active .wp-editor-container {
  background-color: #fff;
  border: 1.4px solid #231F20;
  margin-top: 8px;
}
.js .tmce-active .wp-editor-area {
  color: #231F20 !important;
  font-family: "Brown Regular", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.js .tmce-active iframe {
  background-color: #fff !important;
}

/* Sicherheitsfallback, falls iframe nicht sofort geladen ist */
#field_zo3g2_ifr {
  background-color: #fff !important;
}

/* Wenn der Editor deaktiviert ist (reines Textfeld) */
textarea.wp-editor-area {
  font-family: "Brown Regular", Arial, sans-serif;
  font-size: 16px;
  color: #000;
  background-color: #fff;
  line-height: 1.5;
}

.launch-anim::after {
  content: "🔥";
  position: absolute;
  bottom: -0.2em;
  left: 0.3em;
  font-size: 0.6em;
  animation: flame 0.2s infinite alternate;
}

@keyframes flame {
  from {
    opacity: 0.6;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.3);
  }
}