a {
  transition: all .15s ease-in-out;
}

.gradient {
  background: #0000D2;
  background: linear-gradient(321deg,rgba(0, 0, 0, 1) 10%, rgba(0, 0, 210, 1) 30%, rgba(210, 0, 210, 1) 50%, rgba(0, 0, 210, 1) 70%, rgba(0, 0, 0, 1) 90%);
  background-size: 500% 500%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Slow perpetual drift instead of one-shot, so the gradient stays alive
     instead of locking to opaque black after 5s. */
  animation: gradient-shift 22s ease-in-out infinite alternate;
}

.hgradient:hover {
  background: #0000D2;
  background: linear-gradient(321deg,rgba(0, 0, 0, 1) 10%, rgba(0, 0, 210, 1) 30%, rgba(210, 0, 210, 1) 50%, rgba(0, 0, 210, 1) 70%, rgba(0, 0, 0, 1) 90%);
  background-size: 500% 500%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 2s ease forwards;
}

.wp-block-navigation ul, .wp-block-navigation ul li {
  white-space: nowrap;
}

h2.hgradient a:hover {
  text-decoration: none;
}

.hgradient,
.hgradient:active,
.hgradient:focus {
  background: #0000D2;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: black;
}


@keyframes gradient-shift {
  0% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

/* Brand-blue focus ring stays visible on buttons whose text matches the
   background (currentColor failed on the filled custom-blau button). */
:focus-visible { outline: 3px solid #354367; outline-offset: 2px; border-radius: 2px; }

.blur a {
  line-height: 1.5;
  display: inline-block;
  margin-bottom: .2rem;
  backdrop-filter: blur(5px);
}

.bgrblur {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(20px);
}

.blur a:not(:first-of-type) {
  margin-left: .2rem;
}

:root :where(.wp-block-post-terms a) {
  text-decoration: none;
}

a:active {
  transform: scale(.97);
}

:root :where(.wp-element-button, .wp-block-button__link) {
  padding: .75rem 1rem;
}

.wp-block-navigation__submenu-container.wp-block-navigation-submenu .wp-block-navigation-item.wp-block-navigation-link .wp-block-navigation-item__content {
  margin-top: .5rem !important;
}

ul#menu-leistungen li,
ul#menu-services li {
  font-size: .82em;
  display: block;
  margin-bottom: 1rem;
}

ul#menu-leistungen li a,
ul#menu-services li a {
  text-decoration: none;
}

ul#menu-leistungen li a:hover,
ul#menu-services li a:hover {
  text-decoration: underline;
}

.logoadjust {
  margin-left: -1rem !important;
}

.wp-block-post-author__avatar img {
  border-radius: 100%;
}

.widget_polylang ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

@keyframes animatr {
  100% { 
    transform: scale(1.05);
  }
}

@keyframes zoom {
  100% { 
    transform: translate(0, -15%) scale(1.05);
  }
}

img.wp-block-cover__image-background.wp-post-image {
  animation: animatr 10s forwards;
  overflow: hidden;
}

figure.wp-block-post-featured-image a {
  overflow: hidden;
}

figure.wp-block-post-featured-image a img {
  transition: all 1s ease;
}

figure.wp-block-post-featured-image a:hover img {
  transform: scale(1.05);
}

.widget.widget_nav_menu li a,
.widget.widget_nav_menu li a {
  text-decoration: none !important;
}

.widget.widget_nav_menu li a:hover,
.widget.widget_nav_menu li a:hover {
  text-decoration: underline !important;
}

.nolinebreak {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media only screen and (max-width: 768px) {
  .single-post h1 {
    hyphens: auto;
  }

  .entry-content p {
    hyphens: auto;
  }
}

/*************************************
 * CONTACT FORM 7 – TWENTY TWENTY-FIVE
 * Enhanced version with improved UX & accessibility
 *************************************/

/* Overall form container */
.wpcf7 form {

  background-color: #ffffff;
  border-radius: 8px;
  max-width: 600px;

  transition: box-shadow 0.3s ease;
}

/* Form field wrapper for better spacing */
.wpcf7 form p {
  margin-bottom: 1.5rem;
}

.wpcf7 form p:last-of-type {
  margin-bottom: 0;
}

/* Form labels */
.wpcf7 form p label,
.wpcf7 form label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  color: var(--global-palette-foreground, #222);
  cursor: pointer;
}

/* Required field indicator */
.wpcf7 form .wpcf7-form-control-wrap abbr[title] {
  color: #d9534f;
  text-decoration: none;
  border: none;
}

/* Text inputs, email inputs, tel, etc. */
.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="url"],
.wpcf7 form input[type="tel"],
.wpcf7 form input[type="number"],
.wpcf7 form input[type="date"],
.wpcf7 form input[type="file"],
.wpcf7 form input[type="password"],
.wpcf7 form select,
.wpcf7 form textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  border: 2px solid #d5d5d5;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  appearance: none;
}

/* Textarea specific height */
.wpcf7 form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Placeholder styling */
.wpcf7 form input::placeholder,
.wpcf7 form textarea::placeholder {
  color: #999;
  opacity: 1;
}

/* Hover state for better feedback */
.wpcf7 form input[type="text"]:hover,
.wpcf7 form input[type="email"]:hover,
.wpcf7 form input[type="url"]:hover,
.wpcf7 form input[type="tel"]:hover,
.wpcf7 form input[type="number"]:hover,
.wpcf7 form input[type="date"]:hover,
.wpcf7 form input[type="password"]:hover,
.wpcf7 form select:hover,
.wpcf7 form textarea:hover {
  border-color: #a8a8a8;
}

/* Focus states with improved accessibility */
.wpcf7 form input[type="text"]:focus,
.wpcf7 form input[type="email"]:focus,
.wpcf7 form input[type="url"]:focus,
.wpcf7 form input[type="tel"]:focus,
.wpcf7 form input[type="number"]:focus,
.wpcf7 form input[type="date"]:focus,
.wpcf7 form input[type="file"]:focus,
.wpcf7 form input[type="password"]:focus,
.wpcf7 form select:focus,
.wpcf7 form textarea:focus {
  outline: none;
  border-color: #354367;
  box-shadow: 0 0 0 3px rgba(53, 67, 103, 0.15);
  background-color: #fafbff;
}

/* Select dropdown arrow styling */
.wpcf7 form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1.41 0L6 4.58 10.59 0 12 1.42l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* File input styling */
.wpcf7 form input[type="file"] {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.wpcf7 form input[type="file"]::file-selector-button {
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  background-color: #f5f5f5;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wpcf7 form input[type="file"]::file-selector-button:hover {
  background-color: #e8e8e8;
}

/* Submit button — Blau base + Hellblau shimmer band sweeping L→R on hover.
   The gradient image is 250% the button width with the bright band centered;
   resting position 100% 0 keeps the band parked off-LEFT (out of view), and
   animating to 0% 0 sweeps it across the button. */
.wpcf7 form input[type="submit"] {
  cursor: pointer;
  background-color: #354367;
  background-image: linear-gradient(
    110deg,
    #354367 0%,
    #354367 35%,
    #7DA1C8 50%,
    #354367 65%,
    #354367 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  transition: background-position 0.9s ease, transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 4px rgba(53, 67, 103, 0.2);
  width: 100%;
  margin-top: 0.5rem;
}

.wpcf7 form input[type="submit"]:hover {
  background-position: 0% 0;
  box-shadow: 0 6px 16px rgba(53, 67, 103, 0.3);
}

.wpcf7 form input[type="submit"]:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(53, 67, 103, 0.2);
}

.wpcf7 form input[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(53, 67, 103, 0.4);
}

/* Loading state */
.wpcf7 form.submitting input[type="submit"] {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Validation errors */
.wpcf7 form .wpcf7-not-valid-tip {
  color: #d9534f;
  font-size: 0.875rem;
  margin: 0.25rem 0 0 0;
  display: block;
  font-weight: 500;
}

.wpcf7 form .wpcf7-not-valid {
  border-color: #d9534f !important;
  background-color: #fff5f5 !important;
}

.wpcf7 form .wpcf7-not-valid:focus {
  box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.15) !important;
}

/* Success message */
.wpcf7 .wpcf7-mail-sent-ok {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border: 2px solid #3c763d;
  background-color: #dff0d8;
  color: #3c763d;
  border-radius: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.wpcf7 .wpcf7-mail-sent-ok::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #3c763d;
  color: white;
  border-radius: 50%;
  flex-shrink: 0;
  font-weight: bold;
}

/* Error message */
.wpcf7 .wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-validation-errors {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border: 2px solid #a94442;
  background-color: #f2dede;
  color: #a94442;
  border-radius: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.wpcf7 .wpcf7-mail-sent-ng::before,
.wpcf7 .wpcf7-validation-errors::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #a94442;
  color: white;
  border-radius: 50%;
  flex-shrink: 0;
  font-weight: bold;
}

/* Spinner/loading indicator */
.wpcf7 .ajax-loader {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Radio buttons and checkboxes */
.wpcf7 .wpcf7-list-item {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
}

.wpcf7 .wpcf7-list-item input[type="checkbox"],
.wpcf7 .wpcf7-list-item input[type="radio"] {
  width: auto;
  margin: 0 0.5rem 0 0;
  cursor: pointer;
  transform: scale(1.1);
}

.wpcf7 .wpcf7-list-item-label {
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}

/* Acceptance checkbox (terms & conditions) */
.wpcf7 .wpcf7-acceptance {
  margin: 1rem 0;
}

/* Screen reader only text for accessibility */
.wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  
  .wpcf7 form input[type="submit"] {
    padding: 1rem 1.5rem;
  }
}



/* ---------- Primary button shimmer ----------
 * Filled Blau buttons (header Kontakt, hero Anfrage senden / Send inquiry)
 * get a Hellblau band that sweeps left-to-right on hover. Same mechanic
 * as the CF7 submit above: gradient sized 250% of the button, parked off
 * the left edge at rest, animated to expose the bright center on hover.
 *
 * Specificity note: `.wp-block-button__link.has-custom-blau-background-color`
 * targets exactly the filled variant we ship — outline buttons (which use
 * `has-custom-blau-color` for the text color instead) are untouched.
 */
.wp-block-button__link.has-custom-blau-background-color {
    background-image: linear-gradient(
        110deg,
        #354367 0%,
        #354367 35%,
        #7DA1C8 50%,
        #354367 65%,
        #354367 100%
    );
    background-size: 250% 100%;
    background-position: 100% 0;
    transition:
        background-position 0.9s ease,
        box-shadow 0.2s ease,
        transform 0.1s ease;
}

.wp-block-button__link.has-custom-blau-background-color:hover {
    background-position: 0% 0;
    box-shadow: 0 6px 16px rgba(53, 67, 103, 0.22);
}


/* ---------- Atmospheric pixel field ----------
 * Two layers of 40px squares scattered across the viewport, drifting along
 * the Z-axis with perspective so they read as 3D depth. Restoration of the
 * site's signature "XXL pixels" effect — but with 14 squares across 2 layers
 * instead of the previous 60 across 4, so the compositing cost is roughly
 * a quarter. Off on mobile (perf), stilled by prefers-reduced-motion.
 */

:root {
    --px-light: rgba(26, 91, 184, 0.05);
    --px-mid:   rgba(26, 91, 184, 0.09);
    --px-dark:  rgba(26, 91, 184, 0.13);
}

html {
    /* Perspective + translate3d can push the layers outside the viewport;
       prevent that from creating a horizontal scrollbar. */
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";
    position: fixed;
    top: -10vh; left: -10vw;
    width: 120vw; height: 120vh;
    pointer-events: none;
    z-index: -1;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    /* Edge fade so squares dissolve toward the viewport edges. */
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
    will-change: transform, opacity;
}

/* Deep layer — slow, swims forward from -400px Z toward the viewer. */
body::before {
    background-image:
        linear-gradient(var(--px-mid),   var(--px-mid)),
        linear-gradient(var(--px-light), var(--px-light)),
        linear-gradient(var(--px-dark),  var(--px-dark)),
        linear-gradient(var(--px-mid),   var(--px-mid)),
        linear-gradient(var(--px-light), var(--px-light)),
        linear-gradient(var(--px-dark),  var(--px-dark)),
        linear-gradient(var(--px-mid),   var(--px-mid));
    background-position:
        calc(50% - 280px) calc(50% - 240px),
        calc(50% + 240px) calc(50% - 180px),
        calc(50% - 120px) calc(50% + 200px),
        calc(50% + 320px) calc(50% + 120px),
        calc(50% - 320px) calc(50% +  80px),
        calc(50% +  80px) calc(50% - 320px),
        calc(50% -  80px) calc(50% + 280px);
    animation: pixels-deep 80s ease-in-out infinite alternate;
}

/* Near layer — slightly faster, drifts away from viewer (counter-direction). */
body::after {
    background-image:
        linear-gradient(var(--px-dark),  var(--px-dark)),
        linear-gradient(var(--px-light), var(--px-light)),
        linear-gradient(var(--px-mid),   var(--px-mid)),
        linear-gradient(var(--px-dark),  var(--px-dark)),
        linear-gradient(var(--px-mid),   var(--px-mid)),
        linear-gradient(var(--px-light), var(--px-light)),
        linear-gradient(var(--px-dark),  var(--px-dark));
    background-position:
        calc(50% + 160px) calc(50% - 240px),
        calc(50% - 200px) calc(50% -  80px),
        calc(50% +  80px) calc(50% + 240px),
        calc(50% - 280px) calc(50% + 200px),
        calc(50% + 280px) calc(50% -  80px),
        calc(50% -  40px) calc(50% - 200px),
        calc(50% + 200px) calc(50% +  40px);
    animation: pixels-near 65s ease-in-out infinite alternate;
}

@keyframes pixels-deep {
    0%   { transform: perspective(600px) translate3d(0, 0, -400px); opacity: 0.3; }
    100% { transform: perspective(600px) translate3d(0, 0,    0px); opacity: 0.7; }
}

@keyframes pixels-near {
    0%   { transform: perspective(600px) translate3d(0, 0,  200px); opacity: 0.9; }
    100% { transform: perspective(600px) translate3d(0, 0, -200px); opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after,
    .gradient { animation: none; }

    /* No shimmer sweep — buttons keep a subtle box-shadow lift on hover. */
    .wp-block-button__link.has-custom-blau-background-color:hover,
    .wpcf7 form input[type="submit"]:hover {
        background-position: 100% 0;
    }
}

@media (max-width: 768px) {
    body::before,
    body::after { display: none; }
}