@charset "UTF-8";
/* =============================================================== *\
   Frontend Entry Point

   Einstiegspunkt für alle Frontend-Styles.

   Wird nach build/style.css kompiliert
   und im Frontend geladen.
\* =============================================================== */
/* =============================================================== *\
   Variablen (Farben, Spacing, Radius, Shadow)
\* =============================================================== */
:root {
  /* Theme Colors */
  --ud-theme-100: #b7cdbb;
  --ud-theme-100-90: rgba(183, 205, 187, 0.9);
  --ud-theme-200: #97b89c;
  --ud-theme-200-90: rgba(151, 184, 156, 0.9);
  --ud-theme-300: #7fa985;
  --ud-theme-300-90: rgba(127, 169, 133, 0.9);
  --ud-theme-300-70: rgba(127, 169, 133, 0.7);
  --ud-theme-400: #68976e;
  --ud-theme-400-90: rgba(104, 151, 110, 0.9);
  --ud-theme-500: #55805a;
  --ud-theme-500-90: rgba(85, 128, 90, 0.9);
  --ud-theme-600: #486d4c;
  --ud-theme-600-90: rgba(72, 109, 76, 0.9);
  --ud-theme-700: #3c5b40;
  --ud-theme-700-90: rgba(60, 91, 64, 0.9);
  --ud-theme-800: #304a34;
  --ud-theme-800-90: rgba(48, 74, 52, 0.9);
  --ud-theme-900: #2D433A;
  /* Highlight Colors */
  --ud-highlight-100: #e6f7f8;
  --ud-highlight-200: #eeebd8;
  --ud-highlight-300: #9fe0e6;
  --ud-highlight-400: #63cdd8;
  --ud-highlight-500: #1fb6c9;
  --ud-highlight-600: #1695a5;
  --ud-highlight-700: #117580;
  --ud-highlight-800: #0b555c;
  --ud-highlight-900: #06373b;
  /* Shadows */
  --ud-shadow-100: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ud-shadow-200: 0 1px 3px rgba(0, 0, 0, 0.08);
  --ud-shadow-300: 0 2px 4px rgba(0, 0, 0, 0.1);
  --ud-shadow-400: 0 3px 6px rgba(0, 0, 0, 0.12);
  --ud-shadow-500: 0 4px 8px rgba(0, 0, 0, 0.14);
  --ud-shadow-700: 0 6px 12px rgba(0, 0, 0, 0.18);
  --ud-shadow-900: 0 8px 16px rgba(0, 0, 0, 0.22);
  /* Border-Radius */
  --ud-border-radius-500: 20px;
  /* =============================================================== *\
         UI-Farbschema

         Übersicht und Varianten:
         ulrichdigital_block_theme > color_system.html
     \* =============================================================== */
  /* Positive (Green) */
  --ud-positive-100: #fbfefc;
  --ud-positive-200: #e6f9ec;
  --ud-positive-300: #d1f3da;
  --ud-positive-400: #b0ebc6;
  --ud-positive-500: #30a46c;
  --ud-positive-600: #299764;
  --ud-positive-700: #18794e;
  --ud-positive-800: #193b2d;
  --ud-positive-900: #0d1912;
  /* Warning (Amber) */
  --ud-warning-100: #fefdfb;
  --ud-warning-200: #fef6e7;
  --ud-warning-300: #ffedc7;
  --ud-warning-400: #ffd386;
  --ud-warning-500: #f5a623;
  --ud-warning-600: #e08d00;
  --ud-warning-700: #ad5700;
  --ud-warning-800: #5f2a00;
  --ud-warning-900: #341500;
  /* Error (Red) */
  --ud-error-100: #fffcfc;
  --ud-error-200: #fef0ef;
  --ud-error-300: #fdd8d7;
  --ud-error-400: #fbb5b4;
  --ud-error-500: #e5484d;
  --ud-error-600: #d93d42;
  --ud-error-700: #cd2b31;
  --ud-error-800: #381316;
  --ud-error-900: #1f0a0a;
  /* Info (Blue) */
  --ud-info-100: #fbfdff;
  --ud-info-200: #edf6ff;
  --ud-info-300: #e1f0ff;
  --ud-info-400: #cee7fe;
  --ud-info-500: #0091ff;
  --ud-info-600: #0880ea;
  --ud-info-700: #0b68cb;
  --ud-info-800: #113264;
  --ud-info-900: #0a0e1c;
  /* Neutral (Gray) */
  --ud-neutral-100: #fcfcfc;
  --ud-neutral-200: #f8f9fa;
  --ud-neutral-300: #f1f3f5;
  --ud-neutral-400: #e6e8eb;
  --ud-neutral-500: #9ba1a6;
  --ud-neutral-600: #6c7278;
  --ud-neutral-700: #464b50;
  --ud-neutral-800: #11181c;
  --ud-neutral-900: #0d0f11;
  /* =============================================================== *\
         Layout & Spacing
     \* =============================================================== */
  /* Radius */
  --ud-radius-100: 8px;
  --ud-radius-200: 10px;
  --ud-radius-300: 12px;
  --ud-radius-400: 18px;
  --ud-radius-500: 24px;
  --ud-radius-600: 36px;
  --ud-radius-700: 42px;
  --ud-radius-800: 48px;
  --ud-radius-900: 1000px;
  /* Theme Layout */
  --ud-site-inline-spacing: 60px;
}

/* =============================================================== *\
   Anpassungen für Mobile (Variablen)
\* =============================================================== */
@media screen and (max-width: 800px) {
  :root {
    --ud-site-inline-spacing: 30px;
  }
}
/* =============================================================== *\
   CSS-Reset
\* =============================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-font-smoothing: subpixel-antialiased; /* Safari, Chrome */
  -moz-osx-font-smoothing: auto; /* Firefox (kein subpixel support, aber auto ≈ subpixel) */
  text-rendering: optimizeLegibility; /* Optional: bessere Kerning/Lesbarkeit */
  text-size-adjust: 100%;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  margin: 0;
}

textarea {
  resize: vertical;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

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

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

strong {
  font-weight: bold;
}

hr {
  border: none;
  height: 1px;
  background-color: currentColor;
}

blockquote {
  margin: 0;
  padding-left: 1.5rem;
  border-left: 4px solid currentColor;
}

:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* =============================================================== *\ 
   Input-Elemente
\* =============================================================== */
/* Entfernt die Autofill-Hintergrundfarbe und -Textfarbe, um den Stil des Inputs zu übernehmen */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px transparent inset !important; /* Setzt den Autofill-Hintergrund auf transparent */
  -webkit-text-fill-color: inherit !important; /* Vererbt die Textfarbe */
}

/* Entfernt die Pfeile (Spinners) in WebKit-basierten Browsern (Chrome, Safari, Edge) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Entfernt die Pfeile in Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Dropdown-Pfeil bei select-Elementen */
/* Entfernt den Standard-Pfeil in WebKit-basierten Browsern */
select::-webkit-inner-spin-button,
select::-webkit-appearance {
  -webkit-appearance: none;
}

/* Entfernt den Standard-Pfeil in Firefox */
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

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%;"*/
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
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%;
}

/* =============================================================== *\
   Frontend Entry Point

   Einstiegspunkt für alle Frontend-Styles.

   Wird nach build/style.css kompiliert
   und im Frontend geladen.
\* =============================================================== */
/* =============================================================== *\
   Basis HTML-Elemente
\* =============================================================== */
body {
  background: var(--ud-theme-200);
  font-size: 1.125rem;
  color: #2d362f;
  font-weight: 500;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.entry-content a {
  border-bottom: 1px solid;
  color: inherit;
}

/* =============================================================== *\
   Formularfelder
\* =============================================================== */
input,
textarea {
  margin: 10px 20px;
  border: none;
  padding: 10px 16px;
  line-height: 1em;
}

input:focus,
textarea:focus {
  border: none;
  outline: none;
}

input[type=submit] {
  cursor: pointer;
  border: 1px solid;
  border-radius: 100px;
  padding: 0.7rem 1.4rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wp-site-blocks {
  position: relative;
  isolation: isolate;
}

.wp-block-template-part:has(.ud-paint-wall) {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.wp-site-blocks > *:not(.wp-block-template-part:has(.ud-paint-wall)) {
  position: relative;
  z-index: 1;
}

.ud-paint-wall {
  position: absolute;
  inset: 0;
  min-height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.ud-paint-wall__item {
  position: absolute;
  margin: 0;
  width: clamp(220px, 28vw, 520px);
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}

.ud-paint-wall__item.is-left {
  left: clamp(-180px, -8vw, -80px);
}

.ud-paint-wall__item.is-right {
  right: clamp(-180px, -8vw, -80px);
}

.ud-paint-wall__item img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 781px) {
  .ud-paint-wall__item {
    width: clamp(180px, 46vw, 320px);
    opacity: 0.55;
  }
  .ud-paint-wall__item.is-left {
    left: -120px;
  }
  .ud-paint-wall__item.is-right {
    right: -120px;
  }
}
/* =============================================================== *\
   Frontend Entry Point

   Einstiegspunkt für alle Frontend-Styles.

   Wird nach build/style.css kompiliert
   und im Frontend geladen.
\* =============================================================== */
/* =============================================================== *\
   Layout
\* =============================================================== */
body {
  background-image: url("../assets/images/background_pattern.jpg");
  background-repeat: repeat;
  background-position: top left;
  background-attachment: fixed;
  background-size: 300px;
}
body .wp-site-blocks > .entry-content.wp-block-post-content {
  margin-top: clamp(180px, 10vw, 200px);
  padding-right: var(--ud-site-inline-spacing);
  padding-left: var(--ud-site-inline-spacing);
}
body .wp-site-blocks > .entry-content.wp-block-post-content > .alignfull {
  width: calc(100% + var(--ud-site-inline-spacing) * 2);
  max-width: none;
  margin-right: calc(var(--ud-site-inline-spacing) * -1);
  margin-left: calc(var(--ud-site-inline-spacing) * -1);
}

/* =============================================================== *\
   Seitentitel
\* =============================================================== */
body .wp-site-blocks .wp-block-post-title {
  width: 100%;
  max-width: calc(var(--wp--style--global--content-size) + var(--ud-site-inline-spacing) * 2);
  margin-top: clamp(180px, 10vw, 200px);
  margin-right: auto;
  margin-bottom: 5.5rem;
  margin-left: auto;
  padding-right: var(--ud-site-inline-spacing);
  padding-left: var(--ud-site-inline-spacing);
}
body .wp-site-blocks {
  /* =============================================================== *\
            Seitentitel und Content-Abstand
        \* =============================================================== */
}
body .wp-site-blocks > .wp-block-post-title + .entry-content.wp-block-post-content {
  margin-top: 0;
}

.entry-content p + p {
  margin-top: 1rem;
}

/* =============================================================== *\
   Listen im Content
\* =============================================================== */
.entry-content ul {
  margin-top: 0;
  padding-left: 1.25rem;
  margin-bottom: 1rem;
  list-style: disc;
}

/* =============================================================== *\
   Frontend Entry Point

   Einstiegspunkt für alle Frontend-Styles.

   Wird nach build/style.css kompiliert
   und im Frontend geladen.
\* =============================================================== */
/* =============================================================== *\
   Header
\* =============================================================== */
header.wp-block-template-part {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 1000;
  box-sizing: border-box;
  padding-right: 20px;
  padding-left: 20px;
  width: 100%;
  height: 100px;
  transition: transform 0.28s ease;
}
header.wp-block-template-part > .wp-block-group {
  width: 100%;
}
header.wp-block-template-part .wp-block-site-logo.is-default-size img {
  width: 170px;
}

header.wp-block-template-part.is-hidden {
  transform: translateY(-100%);
}

/* =============================================================== *\
   Frontend Entry Point

   Einstiegspunkt für alle Frontend-Styles.

   Wird nach build/style.css kompiliert
   und im Frontend geladen.
\* =============================================================== */
/* =============================================================== *\
   Footer
\* =============================================================== */
footer {
  margin-top: 10vw;
  border: 1px solid var(--ud-theme-900);
  background-color: var(--ud-theme-900);
  color: var(--ud-highlight-200);
  padding: var(--ud-site-inline-spacing);
}
@media screen and (max-width: 1000px) {
  footer > .wp-block-columns {
    flex-direction: column-reverse;
  }
}
footer .left > .wp-block-group {
  height: 100%;
}
footer .middle p {
  border: 1px solid white;
  height: 200px;
}
footer .right {
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}

/* =============================================================== *\
   Frontend Entry Point

   Einstiegspunkt für alle Frontend-Styles.

   Wird nach build/style.css kompiliert
   und im Frontend geladen.
\* =============================================================== */
/* =============================================================== *\
   Page-Styles
\* =============================================================== */
/* =============================================================== *\
   Frontend Entry Point

   Einstiegspunkt für alle Frontend-Styles.

   Wird nach build/style.css kompiliert
   und im Frontend geladen.
\* =============================================================== */
/* =============================================================== *\
ud-overlay-navigation
\* =============================================================== */
.ud-overlay-navigation .ud-overlay-navigation__backdrop {
  background: var(--ud-theme-300-70);
  backdrop-filter: blur(4px) brightness(0.85);
  -webkit-backdrop-filter: blur(4px) brightness(0.85);
}
.ud-overlay-navigation .ud-overlay-navigation__toggle {
  background: var(--ud-highlight-200);
  border-radius: 1000px;
  width: 60px;
  height: 60px;
  box-shadow: var(--ud-shadow-400);
}
.ud-overlay-navigation__icon {
  color: #2d362f;
}
.ud-overlay-navigation__close {
  top: 10px;
  right: 10px;
  color: #2d362f;
}
.ud-overlay-navigation {
  /* Card mit den Menü-Einträgen*/
}
.ud-overlay-navigation__panel {
  border-radius: var(--ud-border-radius-500);
  background: var(--ud-highlight-200);
  box-shadow: var(--ud-shadow-400);
}
.ud-overlay-navigation .ud-overlay-navigation__content > .wp-block-list {
  list-style: none;
  padding-left: 0;
  font-weight: 800;
  margin-bottom: 0;
}
.ud-overlay-navigation .ud-overlay-navigation__content > .wp-block-list a {
  text-decoration: none;
  border-bottom: 0;
  display: inline-block;
  transition: all 0.2s ease;
}
.ud-overlay-navigation .ud-overlay-navigation__content > .wp-block-list a:hover {
  color: var(--ud-theme-600);
  transform: scale(1.05);
}
.ud-overlay-navigation .ud-overlay-navigation__content > .wp-block-list > li + li {
  margin-top: 1rem;
}
.ud-overlay-navigation .ud-overlay-navigation__content > .wp-block-list {
  /* Verschachtelte Liste, für Anker*/
}
.ud-overlay-navigation .ud-overlay-navigation__content > .wp-block-list .wp-block-list {
  padding-left: 1.125rem;
  font-weight: 400;
  list-style: none;
}