/*
Theme Name:  Visualtech-Website
Theme URI:  https://visualtech.de
Description:  Theme für die Website der Visualtech GmbH
Author:  Visualtech GmbH
Author URI:  https://visualtech.de
Version:  1.0.0
Requires at least: 6.5
Requires PHP: 8.4
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: visualtech
*/

/* ---------------------------------------------------------------------------
 * Bis Version 0.1.0 war dies ein Child-Theme von "vt-basis". Beide Stylesheets
 * sind hier zusammengefuehrt: erst der fruehere Parent-Teil, dann der frueher
 * ueberschreibende Child-Teil. Die Reihenfolge entspricht damit exakt der
 * bisherigen Ladereihenfolge (parent_style vor child_style).
 * ------------------------------------------------------------------------- */

/* === Basis (frueher vt-basis/style.css) ================================= */
:root {
  
  /* Fonts */
  --heading-font: ui-rounded, Helvetica, sans-serif;
  --text-font: ui-sans-serif, Arial, sans-serif;
  --main-menu-font: var(--heading-font);
  --font-size-small: .9rem;
	--line-height: 1.2;
  
  /* Colors */
  --primary-color-hex: #fc354c;
	--primary-color-rgb: 252,53,76;
  --secondary-color-hex: #0abfbc;
	--secondary-color-rgb: 10,191,188;
  --tertiary-color-hex: #38369a;
	--tertiary-color-rgb: 56,54,154;
	--quarternary-color-hex: ;
	--quarternary-color-rgb: ;
	
	--dark-gray-hex: #222;
	
	--scrollbar-thumb-background: rgba(var(--tertiary-color-rgb),.5);
	--scrollbar-track-background: transparent;
	
	--background-gradient-horizontal: linear-gradient(to right, var(--primary-color-hex), var(--secondary-color-hex));
  --background-gradient-vertical: linear-gradient(to bottom, var(--primary-color-hex), var(--secondary-color-hex));
  
/*   --text-color: #535353; */
  --text-color: var(--secondary-color-hex);
  --text-color-light: #555;
  
  --body-background: #eee;
	
	/* Headings */
	--heading-margin: .7em 0;
  --heading-text-align: center;
	--heading-font-weight: 700;
	--heading-color: var(--text-color);
	
	--h1-font-size: 3.5rem;
	--h1-color: var(--heading-color);
	
	--h2-font-size: 2rem;
	--h2-color: var(--heading-color);
	
	--h3-font-size: 1.5rem;
	--h3-color: var(--heading-color);
	
	/* Buttons */
	--button-padding: .75em 1.25em;
  --button-background:  var(--background-gradient-horizontal);
	--button-border-width: 0px;
	--button-border-style: solid;
	--button-border-color: transparent;
	--button-font-family: var(--heading-font);
	--button-font-size: 1.1rem;
	--button-font-weight: 700;
	--button-text-transform: none;
	--button-letter-spacing: normal;
  --button-color: var(--body-background);
	
  --button-background-hover: inherit;
	--button-border-color-hover: inherit;
	--button-color-hover: inherit;
	
	/* Links */
	--link-color: var(--primary-color-hex);
	--link-hover-color: var(--secondary-color-hex);
	--link-text-decoration: none;
	--link-text-underline-offset: .2em;
	--link-text-decoration-color: var(--link-hover-color);
	
	/* Icons */
	--above-footer-icon-color: var(--priamary-color-hex);
	
	/* Header */
  --header-shadow: 0 3px 24px rgb(0 0 0 / 16%);
  
  --top-menu-height: 40px;
  --top-menu-background-color: #fff;
  --top-menu-color: var(--text-color);
  --top-menu-hover-color: inherit;
  
  --main-menu-height: 75px;
  --main-menu-background-color: var(--body-background);
  --main-menu-color: var(--tertiary-color-hex);
  --main-menu-hover-color: inherit;

  --logo-width: 60px;
  
  /* Section */
  --section-padding-top-bottom: 50px;
  --section-padding-side: max(calc((100vw - var(--content-max-width)) / 2), var(--min-padding-side));
	
	/* Category */
	--category-max-width: 1000px;
	
	/* Footer */
  --footer-background-color: var(--dark-gray-hex);
	--footer-color: #fff9;
	--footer-link-hover-color: #fff;
  
	/* Miscellaneous specs */
  --100vh: 100vh;
  --mobile-vh: 100vh;
	
	--scroll-percent: 0%;
	
	--scrollbar-width: 10px; /* Webkit only */
	
  --content-max-width: 1000px;
  --min-padding-side: 30px;
  --content-width: min(var(--content-max-width), calc(100vw - var(--min-padding-side) * 2));
	
  font-family: var(--text-font);
  font-weight: 400;
  font-size: 100%;
	line-height: var(--line-height);
  color: var(--text-color);
}

/* General */

* {
	scrollbar-with: thin;
  scrollbar-color: var(--scrollbar-thumb-background) var(--scrollbar-track-background);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

*::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-background);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-background);
}

body {
  max-width: 100vw;
  width: 100vw;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin: 0;
  position: relative;
  background: var(--body-background);
  overflow: overlay;
  overflow-x: hidden;
  -moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smooth: antialiased;
  transition: opacity 0.8s;
}

body * {
  box-sizing: border-box;
}

/* Admin-Toolbar (nur angemeldet): fest über dem Header statt darüber. Früher war sie
   unsichtbar (opacity 0 bis zum Hover) und lag trotzdem über dem Top-Menü — dessen Links
   waren für Angemeldete nicht klickbar. Die Höhe setzt WordPress als Variable
   (32 px, bis 782 px Breite 46 px). Bis 600 px scrollt WordPress die Toolbar mit weg;
   der Header ist aber fest, also hier ebenfalls fest. Den Inhalt schiebt WordPress
   selbst per margin-top am <html> nach unten — das hat das Theme früher mit
   `html { margin-top: 0 !important }` unterdrückt. */
.admin-bar header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed;
  }
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: var(--heading-margin);
/* 	text-align: var(--heading-text-align); */
	font: var(--heading-font);
	font-weight: var(--heading-font-weight);
	color: var(--heading-color);
/*   word-break: normal; */
/*   hyphens: auto; */
}

h1 {
  font-size: var(--h1-font-size);
	color: var(--h1-color);
}

h2 {
  font-size: var(--h2-font-size);
	color: var(--h2-color);
}

h3 {
  font-size: var(--h3-font-size);
	color: var(--h3-color);
}

/* Links */

a {
  color: var(--link-color);
  text-decoration: var(--link-text-decoration);
  text-underline-offset: var(--link-text-underline-offset);
  text-decoration-color: var(--link-text-decoration-color);
  transition: all 0.2s ease-out;
}

a:hover {
  color: var(--link-hover-color);
}

/* Icons */

.icon {
  flex-shrink: 0;
  min-width: 1em;
  min-height: 1em;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.icon.mail {
  mask-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-mail%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M3%207a2%202%200%200%201%202%20-2h14a2%202%200%200%201%202%202v10a2%202%200%200%201%20-2%202h-14a2%202%200%200%201%20-2%20-2v-10z%22%20/%3E%3Cpath%20d=%22M3%207l9%206l9%20-6%22%20/%3E%3C/svg%3E);
}

.icon.phone {
  mask-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-phone%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M5%204h4l2%205l-2.5%201.5a11%2011%200%200%200%205%205l1.5%20-2.5l5%202v4a2%202%200%200%201%20-2%202a16%2016%200%200%201%20-15%20-15a2%202%200%200%201%202%20-2%22%20/%3E%3C/svg%3E);
}

.icon.chevron-down {
  mask-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-chevron-down%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M6%209l6%206l6%20-6%22%20/%3E%3C/svg%3E);
}

.icon.chevrons-down {
  mask-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-chevrons-down%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M7%207l5%205l5%20-5%22%20/%3E%3Cpath%20d=%22M7%2013l5%205l5%20-5%22%20/%3E%3C/svg%3E);
}

.icon.burger-menu {
  mask-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-menu-2%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M4%206l16%200%22%20/%3E%3Cpath%20d=%22M4%2012l16%200%22%20/%3E%3Cpath%20d=%22M4%2018l16%200%22%20/%3E%3C/svg%3E);
}

.icon.close-x {
  mask-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-x%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M18%206l-12%2012%22%20/%3E%3Cpath%20d=%22M6%206l12%2012%22%20/%3E%3C/svg%3E);
}

.icon.map-pin {
  mask-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-map-2%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M12%2018.5l-3%20-1.5l-6%203v-13l6%20-3l6%203l6%20-3v7.5%22%20/%3E%3Cpath%20d=%22M9%204v13%22%20/%3E%3Cpath%20d=%22M15%207v5.5%22%20/%3E%3Cpath%20d=%22M21.121%2020.121a3%203%200%201%200%20-4.242%200c.418%20.419%201.125%201.045%202.121%201.879c1.051%20-.89%201.759%20-1.516%202.121%20-1.879z%22%20/%3E%3Cpath%20d=%22M19%2018v.01%22%20/%3E%3C/svg%3E);
}

.icon.printer {
  mask-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-printer%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M17%2017h2a2%202%200%200%200%202%20-2v-4a2%202%200%200%200%20-2%20-2h-14a2%202%200%200%200%20-2%202v4a2%202%200%200%200%202%202h2%22%20/%3E%3Cpath%20d=%22M17%209v-4a2%202%200%200%200%20-2%20-2h-6a2%202%200%200%200%20-2%202v4%22%20/%3E%3Cpath%20d=%22M7%2013m0%202a2%202%200%200%201%202%20-2h6a2%202%200%200%201%202%202v4a2%202%200%200%201%20-2%202h-6a2%202%200%200%201%20-2%20-2z%22%20/%3E%3C/svg%3E);
}

.icon.bank {
  mask-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22none%22%20%20stroke=%22currentColor%22%20%20stroke-width=%222%22%20%20stroke-linecap=%22round%22%20%20stroke-linejoin=%22round%22%20%20class=%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-building-bank%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M3%2021l18%200%22%20/%3E%3Cpath%20d=%22M3%2010l18%200%22%20/%3E%3Cpath%20d=%22M5%206l7%20-3l7%203%22%20/%3E%3Cpath%20d=%22M4%2010l0%2011%22%20/%3E%3Cpath%20d=%22M20%2010l0%2011%22%20/%3E%3Cpath%20d=%22M8%2014l0%203%22%20/%3E%3Cpath%20d=%22M12%2014l0%203%22%20/%3E%3Cpath%20d=%22M16%2014l0%203%22%20/%3E%3C/svg%3E);
}

.icon.facebook {
  mask-image: url(data:image/svg+xml,%3Csvg%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20width=%2224%22%20%20height=%2224%22%20%20viewBox=%220%200%2024%2024%22%20%20fill=%22currentColor%22%20%20class=%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-brand-facebook%22%3E%3Cpath%20stroke=%22none%22%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3Cpath%20d=%22M18%202a1%201%200%200%201%20.993%20.883l.007%20.117v4a1%201%200%200%201%20-.883%20.993l-.117%20.007h-3v1h3a1%201%200%200%201%20.991%201.131l-.02%20.112l-1%204a1%201%200%200%201%20-.858%20.75l-.113%20.007h-2v6a1%201%200%200%201%20-.883%20.993l-.117%20.007h-4a1%201%200%200%201%20-.993%20-.883l-.007%20-.117v-6h-2a1%201%200%200%201%20-.993%20-.883l-.007%20-.117v-4a1%201%200%200%201%20.883%20-.993l.117%20-.007h2v-1a6%206%200%200%201%205.775%20-5.996l.225%20-.004h3z%22%20/%3E%3C/svg%3E);
}

/* Buttons */

.button {
  display: inline-flex;
	justify-content: center;
	align-items: center;
  padding: var(--button-padding);
	position: relative;
  background: var(--button-background);
  border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
	text-align: center;
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: initial;
  text-transform: var(--button-text-transform);
  letter-spacing: var(--button-letter-spacing);
  color: var(--button-color);
  cursor: pointer;
  transition: all 0.3s ease-out;
}
	
.button:hover {
	background: var(--button-background-hover);
  border-color: var(--button-border-color-hover);
  color: var(--button-color-hover);
}

/* General */

.small {
  font-size: 0.8rem;
}

/* ul and li */

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Header */

header {
  grid-row: 1 / 2;
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  position: fixed;
  top: 0;
  box-shadow: var(--header-shadow);
  z-index: 999;
  user-select: none;
}

header::before {
  content: "";
  width: var(--scroll-percent);
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-image: var(--background-gradient-horizontal);
}

#logo {
  width: var(--logo-width);
  height: calc(var(--main-menu-height) * 0.6);
  align-self: center;
  margin: 0 var(--min-padding-side) 0 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}


/* Menu - top */

nav#header-top-menu {
  grid-row: 1;
  width: 100%;
  height: var(--top-menu-height);
  display: flex;
  align-items: center;
  padding: 0 var(--min-padding-side);
  background: var(--top-menu-background-color);
  z-index: 2;
}

nav#header-top-menu a {
  color: var(--top-menu-color);
}

nav#header-top-menu a:hover {
  color: var(--top-menu-hover-color);
}


/* Menu - main */

nav#header-main-menu {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  width: 100%;
  height: var(--main-menu-height);
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-column-gap: 10px;
  align-items: center;
  position: relative; 
  padding: 0 var(--min-padding-side);
  background: var(--main-menu-background-color);
  z-index: 2;
  transition: all 0.3s ease-out;
}

nav#header-main-menu .submenu-toggle-indicator {
  display: none;
}

/* Das Symbol füllt den Button; die Maskengröße bestimmt, wie groß der Pfeil
   darin erscheint (Regeln unten). */
nav#header-main-menu .submenu-toggle-icon {
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--main-menu-color);
}

header a {
}

nav#header-main-menu ul a {
  display: block;
  padding-left: 1em;
  padding-right: 1em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--main-menu-color);
}

nav#header-main-menu li.menu-item > a:hover,
nav#header-main-menu li.menu-item > a:hover + .submenu-toggle-indicator {
  color: var(--primary-color-hex);
}

nav#header-main-menu > ul.menu {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--main-menu-font);
}

nav#header-main-menu > ul.menu > li.menu-item {
  height: 100%;
  position: relative;
}

nav#header-main-menu > ul.menu > li.menu-item-has-children {
	padding-right: 5px;
}

nav#header-main-menu > ul.menu > li.menu-item > a {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  transition: all 0.3s ease-out;
}

/* Aufklapper: Klickfläche 24 × 24 px (WCAG 2.5.8, vorher 15 × 20), das Symbol
   bleibt 15 px groß. Mitte wie vorher, deshalb die Versätze. */
nav#header-main-menu > ul.menu > li.menu-item-has-children > .submenu-toggle-indicator {
	width: 24px;
	height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: calc(50% - 12px);
	right: -4.5px;
	opacity: 1;
}

nav#header-main-menu > ul.menu > li.menu-item-has-children > .submenu-toggle-indicator > .submenu-toggle-icon,
nav#header-main-menu ul.sub-menu li.menu-item-has-children > .submenu-toggle-indicator > .submenu-toggle-icon {
	mask-size: 15px;
}


nav#header-main-menu ul.sub-menu {
  position: absolute;
  background-color: var(--main-menu-background-color);
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: all 0.3s ease-out 0.2s;
}

nav#header-main-menu ul.sub-menu:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  box-shadow: var(--header-shadow);
  overflow: hidden;
  pointer-events: none;
}

/* .sub-menu-dismissed: per Escape geschlossen, bleibt zu, bis die Maus den
   Menüpunkt verlässt (WCAG 1.4.13, scripts.js) */
nav#header-main-menu li.menu-item-has-children:hover:not(.sub-menu-dismissed) > ul.sub-menu {
  opacity: 1;
  visibility: visible;
}

nav#header-main-menu li.menu-item {
  position: relative;
}

nav#header-main-menu ul.sub-menu li.menu-item-has-children {
	padding-right: 30px;
}

nav#header-main-menu ul.sub-menu li.menu-item > a {
  width: 100%;
  height: 100%;
  display: block;
  padding-top: 0.9em;
  padding-bottom: 0.9em;
}

nav#header-main-menu ul.sub-menu li.menu-item:first-child > a {
  padding-top: 1.3em;
}

nav#header-main-menu ul.sub-menu li.menu-item:last-child > a {
  padding-bottom: 1.3em;
}

nav#header-main-menu ul.sub-menu li.menu-item-has-children > .submenu-toggle-indicator {
	width: 24px;
	height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: calc(50% - 9px);
	right: 15.5px;
	opacity: 1;
  transform: rotate(-90deg);
}

nav#header-main-menu > ul.menu > li.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu {
  top: 0;
  left: 100%;
  z-index: 3;
}

nav#header-main-menu > ul.menu > li.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu > li.menu-item {
  
}

nav#header-main-menu > #cart-button-mobile {
  display: none;
}

nav#header-main-menu > #header-main-menu-toggle {
  display: none;
}

nav#header-main-menu > #header-main-menu-toggle > .icon {
  background-color: var(--main-menu-color);
}

nav#header-main-menu .button {
  margin: 0 0 0 auto;
  font-size: .8rem;
}

/* Header Links */

#header-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.header-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.header-link > * {
  pointer-events: none;
}

.header-link-icon {
  width: 1.5em;
  height: 1.5em;
  background-color: var(--primary-color-hex);
}

nav#header-top-menu .header-link-icon {
  background-color: var(--top-menu-color);
}

.header-link-text {
  color: var(--secondary-color-text);
  transition: all 0.3s ease-out;
}

.header-link:hover > .header-link-text {
  color: var(--primary-color-text);
}


/* Main */

main {
  grid-row: 2 / 3;
  z-index: 0;
  height: 100%;
  width: 100%;
}

/* Above the Fold */

#above {
  width: 100vw;
/*   height: 100vh; */
  display: grid;
/*   grid-template-rows: 1fr 120px; */
  grid-template-rows: calc(100vh - var(--top-menu-height) - var(--main-menu-height)) 120px;
  padding-top: calc(var(--top-menu-height) + var(--main-menu-height));
/*   position: relative; */
}

#above-header {
  width: 100%;
  height: 100%;
	display: flex;
	justify-content: center;
  position: relative;
  overflow: hidden;
}

#above-slides {
	width: 100%;
	height: 100%;
}

.above-slide {
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	transition: all .75s ease-out;
}

.above-slide.active {
	opacity: 1;
	z-index: 9;
	transition: all .75s ease-out;
}

.above-background {
  width: 100%;
  height: 100%;
  position: absolute;
}

.above-background-image {
  width: 100%;
  height: 100%;
  position: absolute;
}

.above-background-image > img,
.above-background-image > picture > img,
.above-background-image > .above-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Video liegt über dem Standbild (gleicher Zuschnitt) und blendet erst ein,
   wenn es läuft — bis dahin ist das Standbild zu sehen (scripts.js). */
.above-background-image > .above-video {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .6s ease-out;
}

.above-background-image > .above-video.is-playing {
  opacity: 1;
}

.above-background-color {
  width: 80%;
  height: 100%;
  position: absolute;
}

.above-content {
  width: 100%;
  height: 100%;
  display: grid;
  grid-column-gap: 10px;
  position: absolute;
  padding: 0 15vh;
}

/* Content Position */

.above-slide.right .above-content {
  width: 55%;
  margin-left: 45%;
  text-align: right;
}

/* .above-slide.right .above-title {
  text-align: right;
} */

.above-slide.right .above-buttons {
  justify-content: flex-end;
}

.above-slide.right .above-background-color {
  right: 0;
}

.above-slide.right.gradient-white .above-background-color {
  background-image: linear-gradient(to right, transparent, #fff);
}

.above-slide.right.gradient-black .above-background-color {
  background-image: linear-gradient(to right, transparent, #000);
}

.above-slide.right.gradient-primary .above-background-color {
  background-image: linear-gradient(to right, transparent, var(--primary-color-hex));
}

.above-slide.right.gradient-secondary .above-background-color {
  background-image: linear-gradient(to right, transparent, var(--secondary-color-hex));
}

.above-slide.right.gradient-tertiary .above-background-color {
  background-image: linear-gradient(to right, transparent, var(--tertiary-color-hex));
}

.above-slide.left .above-content {
  width: 55%;
  margin-right: 45%;
  text-align: left;
}

/* .above-slide.left .above-title {
  text-align: left;
} */

.above-slide.left .above-buttons {
  justify-content: flex-start;
}

.above-slide.left.gradient-white .above-background-color,
.above-slide.center.gradient-white .above-background-color {
  background-image: linear-gradient(to left, transparent 20%, #fff);
}

.above-slide.left.gradient-black .above-background-color,
.above-slide.center.gradient-black .above-background-color {
  background-image: linear-gradient(to left, transparent 20%, #000);
}

.above-slide.left.gradient-primary .above-background-color,
.above-slide.center.gradient-primary .above-background-color {
  background-image: linear-gradient(to left, transparent 20%, var(--primary-color-hex));
}

.above-slide.left.gradient-secondary .above-background-color,
.above-slide.center.gradient-secondary .above-background-color {
  background-image: linear-gradient(to left, transparent 20%, var(--secondary-color-hex));
}

.above-slide.left.gradient-tertiary .above-background-color,
.above-slide.center.gradient-tertiary .above-background-color {
  background-image: linear-gradient(to left, transparent 20%, var(--tertiary-color-hex));
}

/* Weiße Schrift auf blauem oder grünem Verlauf: Das helle Markenblau trägt
   Weiß nur mit 2,6 : 1. Der Verlauf endet deshalb in der kräftigeren Textvariante
   (Blau 5,2 : 1, Grün 4,5 : 1) — die Seite bleibt hell und blau, die Schrift weiß.
   Die Buttons bekommen eine dunklere Fläche (weiter unten). */
.above-slide.white.right.gradient-primary .above-background-color {
  background-image: linear-gradient(to right, transparent, var(--primary-color-text) 85%);
}

.above-slide.white:is(.left, .center).gradient-primary .above-background-color {
  background-image: linear-gradient(to left, transparent, var(--primary-color-text) 85%);
}

.above-slide.white.right.gradient-secondary .above-background-color {
  background-image: linear-gradient(to right, transparent, var(--secondary-color-text) 85%);
}

.above-slide.white:is(.left, .center).gradient-secondary .above-background-color {
  background-image: linear-gradient(to left, transparent, var(--secondary-color-text) 85%);
}

/* Text Color */

.above-slide.white .above-text,
.above-slide.white .above-title {
  color: #fff;
}

.above-slide.white .above-buttons > .button {
  color: #fff;
  border-color: #fff;
}

.above-slide.black .above-text,
.above-slide.black .above-title {
  color: #000;
}

.above-slide.black .above-buttons > .button {
  color: #000;
  border-color: #000;
}

.above-slide.primary .above-text,
.above-slide.primary .above-title  {
  color: var(--primary-color-text);
}

.above-slide.primary .above-buttons > .button {
  color: var(--primary-color-text);
  border-color: var(--primary-color-text);
}

.above-slide.secondary .above-text,
.above-slide.secondary .above-title  {
  color: var(--secondary-color-text);
}

.above-slide.secondary .above-buttons > .button {
  color: var(--secondary-color-text);
  border-color: var(--secondary-color-text);
}

.above-slide.tertiary .above-text,
.above-slide.tertiary .above-title  {
  color: var(--tertiary-color-hex);
}

.above-slide.tertiary .above-buttons > .button {
  color: var(--tertiary-color-hex);
  border-color: var(--tertiary-color-hex);
}

.above-image {
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
}

.above-text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
	position: relative;
  color: #fff;
  text-shadow: 0 3px 24px rgb(0 0 0 / 16%);
}

.above-title {
  margin: 0;
  font-size: 3.5rem;
  hyphens: manual;
}

.above-subheading {
  margin-bottom: 0;
  color: inherit;
}

.above-teaser {
  font-size: 1.2rem;
  line-height: 1.35;
}

.above-teaser a {
  color: inherit;
	text-decoration: underline;
}

.above-buttons {
	display: flex;
}

.above-buttons > .button + .button {
  margin-left: .75em;
}

.above-person {
  position: absolute;
  bottom: 40px;
  left: 0px;
  color: #fff;
  text-shadow: 0 3px 36px rgb(0 0 0 / 30%);
}

.above-person-name {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
}

.above-person-function {
  margin-top: 7px;
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.12;
}

#above-slide-controls {
	display: flex;
	justify-content: center;
	gap: 25px;
	position: absolute;
	bottom: 2.5%;
	padding: 15px 30px;
	z-index: 99;
}

#above-slide-controls.white {
	background: #ffffff1a;
}

#above-slide-controls.black {
	background: #0000001a;
}

#above-slide-controls.primary {
	background: rgba(var(--primary-color-rgb),.1);
}

#above-slide-controls.secondary {
	background: rgba(var(--secondary-color-rgb),.1);
}

#above-slide-controls.tertiary {
	background: rgba(var(--tertiary-color-rgb),.1);
}

#above-slide-controls > * {
	opacity: .75;
	transition: all .3s ease-out;
}

#above-slide-controls:hover > * {
	opacity: 1;
}

.above-slide-arrow,
.above-slide-pause {
	width: 24px;
	height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all .3s ease-out;
}

.above-slide-arrow::before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
}

#above-slide-controls.white {
	--slide-color: #fff;
}

#above-slide-controls.black {
	--slide-color: #000;
}

#above-slide-controls.primary {
	--slide-color: var(--primary-color-hex);
}

#above-slide-controls.secondary {
	--slide-color: var(--secondary-color-hex);
}

#above-slide-controls.tertiary {
	--slide-color: var(--tertiary-color-hex);
}

.above-slide-arrow.previous::before {
	border-width: 8px 10px 8px 0;
	border-color: transparent var(--slide-color) transparent transparent;
}

.above-slide-arrow.next::before {
	border-width: 8px 0 8px 10px;
	border-color: transparent transparent transparent var(--slide-color);
}

#above-slide-dots {
	display: flex;
	gap: 15px;
}

.above-slide-dot {
	width: 15px;
	height: 15px;
/*     padding: 5px; */
	background: var(--slide-color);
	cursor: pointer;
	transition: all .3s ease-out;
}

.above-slide-dot.active {
	scale: 1.5;
	transition: all .3s ease-out;
}

#above-footer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  overflow: hidden;
}

.above-footer-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.above-footer-icon {
  width: 2em;
  height: 2em;
  background-color: var(--above-footer-icon-color);
}

.above-footer-label {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text-color);
}

.above-footer-label a {
  color: var(--primary-color-text);
}
.above-footer-label a.hidden-link {
  color: var(--text-color);
}

#above-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

a.above-social-background {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
	position: relative;
  background-color: var(--secondary-color-hex);
  border-radius: 50%;
  font-size: 18px;
  color: #fff; 
}

a.above-social-background:hover {
  background-color: var(--primary-color-hex);
}

.above-social-icon {
  width: 80%;
  height: 80%;
  background-color: #fff;
}

a.section-more-link {
  text-align: center;
}

/* Section */

/* Abschnitte des Themes. Nur <section class="vt-section"> — vorher traf die Regel
   jedes <section>, auch aus Plugins und Blöcken (Slider, Suchergebnisse und das
   Buchungsformular hat das zerschossen). :where() hält die Spezifität bei der
   eines einfachen section-Selektors, damit sich am Zusammenspiel nichts ändert. */
section:where(.vt-section) {
  width: 100%;
  margin: 0 auto;
  padding: var( --section-padding-top-bottom) var(--section-padding-side);
}

section:where(.vt-section):first-child {
  padding-top: var(--main-menu-height);
}

section:where(.vt-section):last-child {
  padding-bottom: var(--main-menu-height);
}

.section-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  padding: 40px 0 20px;
  font-size: 0.9rem;
}

.secondary .section-link {
  color: var(--secondary-color-text);
}

/* Post Grid */

.post-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 15px;
}

a.post-grid-item {
  display: grid;
  grid-template-rows: auto 1fr;
  position: relative;
  box-shadow: 0 3px 24px rgb(0 0 0 / 16%);
  color: var(--text-color);
  text-decoration: none;
}

a.post-grid-item:hover {
  box-shadow: 0 2px 24px rgb(0 0 0 / 32%);
}

#post-content .post-grid-item {
  width: 300px;
  display: inline-grid;
  margin: 30px;
  padding: 0;
}

#post-content .post-grid-item.left {
  float: left;
  margin-left: calc(50vw - 500px + 20px);
}

#post-content .post-grid-item.right {
  float: right;
  margin-right: calc(50vw - 500px + 20px);
}

#post-content .post-grid-item li {
  margin: 0;
  padding: 0;
}

.post-grid-item-thumbnail {
  width: 100%;
  height: 170px;
  position: relative;
  overflow: hidden;
}

/* Kategorie-Etiketten oben links auf dem Bild, im Stil des Bildnachweises
   (.vt-image-credit). 80 % Dunkelblau statt 65 %, weil die Schrift fett und das
   Etikett ein Bedienhinweis ist — über rein weißem Bild 8,5 : 1. */
.post-grid-item-categories {
  max-width: calc(100% - 16px);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}

.post-grid-item-category {
  padding: .2em .55em;
  background: rgba(var(--tertiary-color-rgb), .8);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.4;
}

.post-grid-item-image {
  width: 100%;
  height: 100%;
  position: absolute;
}

.post-grid-item-image > img,
.post-grid-item-image > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-grid-item-no-image {
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='120' height='120'%3E%3Cpath d='M5 11.1005L7 9.1005L12.5 14.6005L16 11.1005L19 14.1005V5H5V11.1005ZM5 13.9289V19H8.1005L11.0858 16.0147L7 11.9289L5 13.9289ZM10.9289 19H19V16.9289L16 13.9289L10.9289 19ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM15.5 10C14.6716 10 14 9.32843 14 8.5C14 7.67157 14.6716 7 15.5 7C16.3284 7 17 7.67157 17 8.5C17 9.32843 16.3284 10 15.5 10Z' fill='rgba(255,255,255,1)'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
	background-position: center center;
}

.post-grid-item-background {
  width: 100%;
  height: 100%;
  position: absolute;
}

.post-grid-item-text {
  height: 100%;
  padding: 20px 20px 50px 20px;
  font-size: 0.85rem;
  color: var(--text-color);
}

.post-grid-item-headline {
  margin-top: 0;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  color: var(--primary-color-text);
  word-break: break-word;
  hyphens: auto;
}

.post-grid-item-date {
  margin-bottom: 12px;
}

.post-grid-item-price {
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.2;
}

.post-grid-item-description {
  font-size: 0.85rem;
  line-height: 1.2;
  word-break: break-word;
  hyphens: auto;
}

.post-grid-item-description > ul {
  padding-left: 1rem;
}

.post-grid-item-more {
  text-align: right;
  margin-top: 10px;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 20px;
  color: var(--primary-color-text);
}


/* Contact */

#kontakt {
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  background-image: var(--background-gradient-horizontal);
  box-shadow: 0 3px 24px rgb(0 0 0 / 16%);
}

#kontakt-author {
  grid-column: 1 / 2;
  position: relative;
}

#kontakt-author:not(.has-image) {
	display: flex;
	justify-content: center;
	align-items: center;
}

#kontakt-author:not(.has-image) > * {
	font-size: 400px;
	line-height: 1;
	color: #fff;
	opacity: .6;
	text-shadow: 0 0 10px rgba(0,0,0,.16);
}

#kontakt-author-image {
  width: 100%;
  height: 100%;
  position: absolute;
}

#kontakt-author-image > img,
#kontakt-author-image > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#kontakt-author-background {
  width: 100%;
  height: 100%;
  position: absolute;
}

#kontakt-author-info {
  position: absolute;
  bottom: 50px;
  left: var(--min-padding-side);
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 36px rgb(0 0 0 / 30%);
}

#kontakt-author-name {
  font-size: 0.9rem;
  font-weight: 700;
}

#kontakt-author-function {
  margin-top: 7px;
  font-size: 0.8rem;
/*   letter-spacing: 0.12rem; */
}

#kontakt-form {
  grid-column: 1 / 3;
  display: grid;
  grid-template-rows: auto;
  grid-row-gap: 10px;
  padding: 50px var(--section-padding-side);
}

#kontakt-author + #kontakt-form {
  grid-column: 2 / 3;
}

#kontakt-form p {
	position: relative;
  margin: 0;
}

#kontakt-form span.wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 10px;
}

#kontakt-form span.wpcf7-form-control-wrap + br {
  display: none;
}

#kontakt-headline {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--tertiary-color-hex);
}

#kontakt-description {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--tertiary-color-hex);
  word-break: break-word;
  hyphens: auto;
}

#kontakt-description a {
  color: var(--tertiary-color-hex);
  text-decoration: none;
}

#kontakt-booking {
  margin: .5em 0 0;
  font-size: 0.9rem;
  color: var(--tertiary-color-hex);
}

/* Link mitten im Satz: unterstrichen, sonst nur an der Farbe erkennbar (WCAG 1.4.1) */
#kontakt-booking a {
  color: inherit;
  text-decoration: underline;
}

/* CF7 ab 6.0 legt die versteckten Felder in ein eigenes <fieldset>. Das
   Plugin-Stylesheet blendet es aus, ist hier aber deregistriert. */
#kontakt .hidden-fields-container {
  display: none;
}

#kontakt .screen-reader-response {
	font-size: .9rem;
	color: var(--tertiary-color-hex);
}

#kontakt form {
  margin: 0;
}

.kontakt-input,
.kontakt-textarea,
.kontakt-submit {
  width: 100%;
  padding: 10px;
  border: none;
  font-family: var(--text-font);
  font-size: 0.95rem;
}

.kontakt-input.wpcf7-not-valid,
.kontakt-textarea.wpcf7-not-valid {
  background-color: #fcdee4;
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: .25em;
  color: var(--tertiary-color-hex);
  font-size: var(--font-size-small);
  font-weight: 600; /* Fehler nicht nur über die Feldfarbe anzeigen (WCAG 1.4.1, 3.3.1) */
}

.wpcf7 form .wpcf7-response-output.wpcf7-response-output {
  margin: 10px 0 0 0;
  padding: 0;
  border: none;
  text-align: center;
  font-weight: 400;
	font-size: .9rem;
	color: var(--tertiary-color-hex);
}

/* Rahmen, damit die Felder als solche erkennbar sind: Weiß auf dem Verlauf der
   Kontaktbox hebt sich nur mit 2,2–2,6 : 1 ab, nötig sind 3 : 1 (WCAG 1.4.11). */
.kontakt-input,
.kontakt-textarea {
  border: 1px solid var(--tertiary-color-hex);
}

.kontakt-input {
  height: 40px;
}

.kontakt-textarea {
  height: 120px;
}

.kontakt-submit {
/*   height: 40px; */
  background-color: rgba(255,255,255,0.6);
  color: var(--secondary-color-text);
  cursor: pointer;
  font-weight: 600;
}

#kontakt-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

a.kontakt-detail {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  color: var(--tertiary-color-hex);
  text-decoration: none;
}

a.kontakt-detail > i {
  margin: -2px 10px 0 0;
  font-size: 1.1rem;
}

/* Category Grid */

.category-grid {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.category-grid-item {
  width: calc(calc(100% / 3) - 10px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 30px 25px;
  text-align: center;
  font-size: 0.9rem;
  text-decoration: none;
  /* Keine automatische Silbentrennung: Die Kacheln sind breit genug, „hy-bride"
     und „digita-les" sahen zerhackt aus. overflow-wrap bricht nur ein Wort um,
     das allein nicht in die Zeile passt (schmale Handys). */
  overflow-wrap: break-word;
  box-shadow: 0 3px 24px rgb(0 0 0 / 16%);
}

.category-grid-item:hover {
  box-shadow: 0 2px 24px rgb(0 0 0 / 32%);
}

a.category-grid-item {
  color: var(--text-color);
}

.category-grid-item-icon {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.category-grid-item-icon > i {
  font-size: 2rem;
  color: var(--primary-color-text);
}

.category-grid-item-icon:before {
  display: block;
}

.category-grid-item-headline {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 0.7em 0;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: var(--heading-font);
  overflow-wrap: break-word;
  word-wrap: break-word;
  color: var(--primary-color-text);
}

.category-grid-item-description > p {
  margin: 0;
}

.category-grid-item-more {
  margin-top: 10px;
}

/* Category page */

#category {
  max-width: var(--category-max-width);
  margin: 0 auto;
  padding: calc(var(--top-menu-height) + var(--main-menu-height)) 20px 0 20px;
}

#category-title {
  padding-top: 20px;
  text-align: center;
  font-size: 2.8rem;
}

#category-description {
  text-align: center;
  font-size: 1.15rem;
}

#category-others {
  max-width: var(--category-max-width);
  margin: 0 auto;
  padding: 40px 20px 20px 20px;
}

#category-others-title {
  text-align: center;
  font-size: 1.7rem; 
}

/* Post page */

#post {
  width: 100%;
/*   display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr; */
  margin-bottom: 0px;
  font-size: 1.15rem;
  font-weight: 400;
}

#post strong,
#post b {
  font-weight: 600;
}

#post-header {
  grid-column: 1 / 3;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  position: relative;
  padding-top: calc(var(--top-menu-height) + var(--main-menu-height));
  line-height: 1.4;
}

#post-teaser {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  max-width: 100%;
  max-height: 100%;
  padding: 50px 70px 50px 70px;
  position: relative;
}

#post-title {
  width: 100%;
  margin: 0 0 0.5em 0;
  line-height: 1.3;
  color: var(--text-color);  
}

#post-excerpt {
  margin-top: 1em;
  font-size: 1.45rem;
}

#post-thumbnail {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  position: relative;
}

#post-thumbnail-image {
  width: 100%;
  height: 100%;
  position: absolute;
}

#post-thumbnail-image > img,
#post-thumbnail-image > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#post-thumbnail-background {
  width: 100%;
  height: 100%;
  position: absolute;
}

#post-separator {
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 0;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
/* 	background-image: linear-gradient(to right, var(--primary-color-hex), var(--secondary-color-hex)); */
  pointer-events: none;
}

#post-details {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 50px 70px;
  z-index: 1;
  font-size: 1.1rem;
  color: var(--lighter-text-color);
}

.post-detail > a {
  text-decoration: none;
}

#post-categories {
  color: var(--primary-color-text);
}

#post-scroll {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -30px;
  bottom: 25px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 24px rgb(0 0 0 / 16%);
  z-index: 10;
  cursor: pointer;
/*   font-size: 1.5rem; */
}

#post-scroll > .icon {
  width: 2rem;
  height: 2rem;
  background-color: #aaa;
  pointer-events: none;
  animation-name: post-scroll;
  animation-duration: 1s;
  animation-iteration-count: 3; /* endlos wäre Bewegung > 5 s ohne Stopp (WCAG 2.2.2) */
  animation-timing-function: linear;
}

@keyframes post-scroll {
  0% {margin-top: -5px;}
  80% {margin-top: 15px;}
  100% {margin-top: -5px;}
}

/* Home Content */

.home-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 30px;
}

.home-section.highlight {
  background-color: var(--tertiary-color-hex);
}

.home-section > h2 {
  text-align: center;
  margin-top: 70px;
/*   padding: 0 30px; */
}

.home-section > h2,
.home-section > h3 {
  text-align: center;
  width: calc(100vw - 60px);
  max-width: 1000px;
/*   padding: 0 30px; */
}

.home-section > h2 {
  margin: 70px auto 30px auto;
}

.home-section > h3 {
  margin: 20px auto;
  font-weight: normal;
}

.home-section .highlight {
  color: var(--primary-color-text);
}


/* Features */

.grid-2 {
  grid-template-columns: repeat(2, minmax(auto, 270px));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(auto, 270px));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(auto, 270px));
}

.features {
  margin: 0 auto;
  display: grid;
  margin: 0 0 30px 0;
/*   grid-template-columns: ; */
  grid-gap: 20px;
  padding: 20px;
}

.feature {
/*   height: 250px; */
/*   max-width: 250px; */
  box-shadow: 0 3px 15px #dcdcdc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--text-color);
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

a.feature {
  text-decoration: none;
}

a.feature:hover {
  transform: scale(1.05);
}

.feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-icon {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color-text);
  padding: 50px 30px 0 30px
}

.feature-heading {
  font-size: 1.2rem;
  color: var(--text-color);
  margin: 0;
  text-align: center;
  padding: 20px 30px 20px 30px;
}

.feature-text {
  font-size: 0.9rem;
  text-align: center;
  padding: 0 30px 30px 30px;
}


/* Post Content */

#post-content {
  max-width: 100vw;
  margin-bottom: 70px;
  padding: 0 var(--section-padding-side);
  font-size: 1.1rem;
}

#post-content > * {
  line-height: 1.5;
}

#post-content > ul,
#post-content > ol {
  padding: 0 50px;
  overflow: hidden;
}

#post-content li {
  margin-bottom: 15px;
  padding-left: 5px;
}

#post-content > ul > li > ul > li {
  margin-bottom: 0px;
}

#post-content h2 {
  width: 100%;
  margin-top: 1.4em;
  font-size: 1.5rem;
}

#post-content .wp-block-quote {
  padding: 0 70px;
  font-size: 1rem;
}

#post-content > p {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Block „Buttons": Abstand wie ein Absatz. Der Link darin bekommt im Frontend die
   Klasse .button (functions/editor.php). */
#post-content .wp-block-buttons {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Links im Fließtext unterstrichen — auch in Spalten, Gruppen und Media-Text-Blöcken,
   nicht nur in Absätzen direkt im Inhalt. Nur an der Farbe erkennbar wären sie zu
   schwach (3,1 : 1 gegen den Text, WCAG 1.4.1). Buttons ausgenommen: ein
   <a class="button"> im Absatz sähe sonst wie ein unterstrichener Link aus. */
#post-content :is(p, li) a:not(.button, .wp-block-button__link) {
  text-decoration: underline;
}
/* 
#post-content > :first-child:not(.wp-block-image) {
  padding-top: 30px;
}

#post-content > :last-child:not(.wp-block-image) {
  padding-bottom: 30px;
} */

#post-content .wp-block-image {
/*   margin-top: 2em;
  margin-bottom: 2em; */
  margin-left: 0;
  margin-right: 0;
}

#post-content .wp-block-image img {
  width: 100%;
  height: auto;
  box-shadow: 0 3px 24px rgb(0 0 0 / 16%);
}

#post-content .wp-block-image figcaption {
  font-size: 0.9rem;
}

#post-content .wp-block-video {
  margin-left: 0;
  margin-right: 0;
}

#post-content .wp-block-video video {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 3px 24px rgb(0 0 0 / 16%);
}

/* YouTube erst nach Klick (functions/embeds.php): Platzhalter im 16:9-Format, nach dem Klick
   ersetzt das iframe den Inhalt. Weiße Schrift auf Dunkelblau: 15,6 : 1. */
#post-content .vt-youtube {
  margin: 1.5em 0;
}

.vt-youtube-frame {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background-color: var(--tertiary-color-hex);
  color: #fff;
  box-shadow: 0 3px 24px rgb(0 0 0 / 16%);
}

.vt-youtube-consent {
  max-width: 34em;
  padding: 1.5em;
  text-align: center;
  font-size: .95rem;
}

.vt-youtube-consent a {
  color: #fff;
  text-decoration: underline;
}

.vt-youtube-consent .vt-youtube-title {
  font-weight: 700;
}

.vt-youtube-play {
  margin: .5em 0 1em;
}

.vt-youtube-link {
  display: block;
}

.vt-youtube-frame > iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sehr schmale Spalten: 16:9 reicht nicht für Text und Button. */
@media (max-width: 480px) {
  .vt-youtube-frame:has(.vt-youtube-consent) {
    aspect-ratio: auto;
  }
}

#post-content figure.wp-block-table th,
#post-content figure.wp-block-table td {
  padding: 10px;
  border: 1px solid var(--text-color);
  font-size: 1rem;
}

#post-content figure.wp-block-table th {
  background-color: #eee;
}

#post-content figure.wp-block-table figcaption {
  font-size: 0.8rem;
}

#post-content .wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-column-gap: 40px;
  padding-top: 30px;
  
}

#post-content .wp-block-media-text.has-media-on-the-right {
  grid-template-columns: 1.5fr 1fr;
}

#post-content figure.wp-block-media-text__media {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#post-content figure.wp-block-media-text__media > picture > img{
  width: 100%;
  height: auto;
  border-radius: 10px;
}

#post > #post-content {
  margin-top: 50px;
}

/* Newsletter Plugin */

#post-content > .mailpoet_form {
  width: 100vw;
  max-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
/*   float: right; */
/*   position: relative; */
/*   margin: 10px calc(50% - 500px + 20px) 20px 40px; */
  margin: 50px 0 50px calc(var(--section-padding-side) * -1);
  padding: 0 var(--section-padding-side);
  background-color: var(--tertiary-color-hex);
/*   background-image: url("data:image/svg+xml;utf8,<svg id='test' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='1' stroke='rgba(33,33,33,,0.3)' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'></path><path d='M14.872 14.287l6.522 6.52a2.996 2.996 0 0 1 -2.218 1.188l-.176 .005h-14a2.995 2.995 0 0 1 -2.394 -1.191l6.521 -6.522l2.318 1.545l.116 .066a1 1 0 0 0 .878 0l.116 -.066l2.317 -1.545z' stroke-width='0' fill='rgba(33,33,33,,0.3)'></path><path d='M2 9.535l5.429 3.62l-5.429 5.43z' stroke-width='0' fill='rgba(33,33,33,,0.3)'></path><path d='M22 9.535v9.05l-5.43 -5.43z' stroke-width='0' fill='rgba(33,33,33,,0.3)'></path><path d='M12.44 2.102l.115 .066l8.444 5.629l-8.999 6l-9 -6l8.445 -5.63a1 1 0 0 1 .994 -.065z' stroke-width='0' fill='rgba(33,33,33,,0.3)'></path></svg>"); */
  background-repeat: no-repeat;
  background-position: top right;
  z-index: 1;
  
  font-size: 0.9rem;
/*   color: #fff; */
/*   text-shadow: 0 3px 24px rgb(0 0 0 / 16%); */
}

#post-content > .mailpoet_form:last-child {
  margin-bottom: -70px;
}

#post-content > .mailpoet_form > form.mailpoet_form {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto auto auto auto;
  margin: 0;
  padding: 50px 0;
/*   padding: 25px; */
/* 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='40' height='40'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z' fill='rgba(255,255,255,.6)'/%3E%3C/svg%3E"); */
	background-position: calc(100% - 22px) 30px;
	background-repeat: no-repeat;
}

#post-content > .mailpoet_form a {
/*   color: #fff; */
/*   text-decoration: underline; */
  color: var(--primary-color-hex);
}

#post-content > .mailpoet_form .mailpoet-heading {
  grid-column: 1 / 3;
/*   display: flex; */
/*   justify-content: space-between; */
/*   align-items: center; */
/*   gap: 25px; */
/*   margin: 0 45px 10px 0 !important; */
  font-family: var(--text-font);
  font-size: 1.5rem !important;
  line-height: 1.2;
	hyphens: initial;
  margin-top: 0;
}

#post-content > .mailpoet_form .mailpoet_form_paragraph {
  grid-row: 2 / 5;
  margin: 0;
  font-family: var(--text-font);
  font-size: 1.1rem;
}

#post-content > .mailpoet_form .mailpoet_paragraph {
  grid-column: 2 / 3;
  margin: 0;
}

#post-content > .mailpoet_form .mailpoet_text {
 
  width: 100% !important;
  margin-bottom: 10px !important;
  padding: 10px !important;
  border: none;
/*   box-shadow: 0 3px 24px rgb(0 0 0 / 16%); */
  text-align: left;
  font-family: var(--text-font);
  font-size: 0.95rem;
  border-radius: 5px;
/*   font-size: 1.1rem; */
}

#post-content > .mailpoet_form .mailpoet_submit {
  width: 100% !important;
  height: 40px;
  padding: 10px !important;
  background-color: var(--primary-color-hex);
  border: none;
/*   box-shadow: 0 3px 24px rgb(0 0 0 / 16%); */
  font-family: var(--text-font);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease-out;
}

#post-content > .mailpoet_form .mailpoet_submit:hover {
  background-color: var(--secondary-color-hex);
}

#post-content > #post-end-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

#post-content > #post-end-cta > a {
  display: block;
}


/* Page */

#page {
  margin-top: calc(var(--top-menu-height) + var(--main-menu-height));
}

#page-header {
  height: 250px;
  display: block;
}

#page-header img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#page-breadcrumbs {
  padding-top: 60px;
}

#page-header + #post-content > #page-breadcrumbs {
  padding-top: 30px;
}

#page-breadcrumbs > a {
  color: var(--secondary-color-text); 
}

#page-breadcrumbs > a:hover {
  color: var(--primary-color-text); 
}

#page-breadcrumbs > svg {
  color: var(--primary-color-text);
  margin: 0 3px -3px 3px;
}

#page-title {
  line-height: var(--line-height);
  margin-top: calc(var(--top-menu-height) + var(--main-menu-height) + 60px);
}

#page-breadcrumbs + #page-title {
  margin-top: 60px;
}

#page-header + #post-content > #page-title {
  margin-top: 60px;
}

#page-feature {
  width: 400px;
  display: block;
  float: left;
  margin: 0 40px 20px 0;
  background-color: var(--tertiary-color-hex);
}

#page-thumbnail {
  width: 100%;
  display: block;
}

#page-thumbnail .wp-post-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

#page-info {
  display: inline-block;
  padding: 30px;
}

#page-info > .page-info-heading {
  margin-top: 0;
}

#page-info > ul {
  margin-bottom: 0;
  padding: 0;
}

#page-info ul {
  list-style: none;
}

#page-info ul ul {
  padding-left: 25px;
}

#page-info li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 10px 0;
  padding: 0;
  font-size: 1.05rem;
}

#page-info li:last-of-type {
	margin-bottom: 0;
}

#page-info li > a.active {
  font-weight: bold;
}

.page-info-detail {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  color: var(--secondary-color-hex); /* steht auf Dunkelblau: hell 7,0 : 1 */
  gap: 10px;
  margin: 10px 0;
  font-size: 0.95rem;
}

.page-info-detail > svg {
  color: var(--primary-color-hex);
}

#post-page-excerpt {
  font-size: 1.2rem;
}

.post-page-price-cta {
  margin-top: 30px;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	line-height: 1.2;
}

.post-page-price-information {
	display: flex;
	flex-direction: column;
}

.post-page-price-container {
	display: flex;
	align-items: center;
	gap: .75em;
}

.post-page-price {
	font-size: 1.75em;
	font-weight: 600;
	color: var(--primary-color-text);
}

.post-page-former-price {
	font-size: 1rem;
	text-decoration: line-through;
	opacity: .75;
}

.post-page-price-annotation {
	font-size: .75rem;
	line-height: 1.5;
}

#landingpage #page-ctas {
  display: flex;
  gap: 10px;
}

.post-page-cta {
	height: fit-content;
}

#post-content > .post-page-price-cta {
  justify-content: center;
}

#post-aside-container + #post-title {
  text-align: left;
}

.post-person-detail > a {
  color: var(--text-color);
}

.post-person-details > .button {
  margin: 20px 0;
}

.post-person-function {
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.3;
}


/* Footer */

footer {
  grid-row: 3 / 4;
  width: 100%;
}

section#footer-logos {
	max-width: unset;
  padding-top: 40px;
  padding-bottom: 40px;
	background-color: #eee; 
}

.footer-logos-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
  gap: 40px;
}

.footer-logo {
  height: 50px;
  display: block;
  filter: grayscale(1);
  transition: all 0.3s ease-out;
}

.footer-logo:hover {
  filter: grayscale(0);
}

.footer-logo > img,
.footer-logo > picture > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

section#footer-main {
  padding: var( --section-padding-top-bottom) var(--section-padding-side);
  background-color: var(--footer-background-color); 
}

/* Zwei Spalten: links das Fußmenü, rechts die Kontaktdaten in ihrer
   natürlichen Breite. */
#footer-content {
 	display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 50px;
  margin: 0 auto;
  color: var(--footer-color);
}

#footer-menu {
  width: 100%;
}

#footer-menu a {
  color: inherit;
  text-decoration: none;
}

#footer-menu a:hover {
  color: var(--footer-link-hover-color);
}

/* Schlichte Linkliste (Impressum, Datenschutz …) statt des früheren
   Spaltenrasters mit Überschriften. */
#footer-menu > ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

#footer-menu > ul > li.menu-item > a {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
}

#footer-menu > ul > li.menu-item > ul.sub-menu > li.menu-item > a {
  display: inline-block;
  margin: 7px 0;
  font-size: 0.8rem;
}

#footer-side {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-form {
  display: grid;
  grid-template-columns: 1fr auto;
  margin: 0;
}

.footer-input {
  width: 100%;
  padding: 10px;
  border: none;
  box-shadow: 0 3px 24px rgb(0 0 0 / 16%);
  font-family: var(--text-font);
  font-size: 0.95rem;
}

.footer-submit {
  padding: 0 15px;
  background-color: rgba(255,255,255,0.6);
  border: none;
  font-weight: 600;
  color: var(--secondary-color-text);
  cursor: pointer;
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-info-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 15px;
}

.footer-info-icon {
  width: 1.3em;
  height: 1.3em;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: var(--footer-color);
  font-size: 1.15rem;
}

.footer-info-text {
  font-size: 0.8rem;
  line-height: 1.5;
}

.footer-info-company {
  font-weight: 700;
}

a.footer-info-text {
  color: inherit;
	text-decoration: none;
}

a.footer-info-text:hover {
	color: var(--footer-link-hover-color);
}


/* Gutenberg Settings */

#post-content > .alignfull {
	width: 100vw;
  margin-left: calc(var(--section-padding-side) * -1);
	padding: 0px var(--section-padding-side);
}

#post-content > .alignfull > :not(figure) {
	padding: 40px 0;
}

#post-content .aligncenter {
	display: flex;
	justify-content: center;
}

#post-content > .wp-block-group.has-background {
	padding-top: 10px;
  padding-bottom: 10px;
}

#post-content > .has-background .wp-block-heading {
	margin-top: 0;
}

#post-content > .wp-block-table {
  margin: 1em 0;
}

#post-content .wp-block-media-text img {
	width: 100%;
	height: auto;
}

#post-content figure.wp-block-media-text__media > picture > img {
	display: block;
}

#post-content .with-shadow img {
	box-shadow: 0 3px 15px rgba(0,0,0,.15);
}

#post-content .wp-block-image.noshadow img {
  box-shadow: none;
}

#post-content .is-vertically-aligned-center > * {
	align-self: center;
}

#post-content .has-text-align-left {
	text-align: left;
}

#post-content .has-text-align-center {
	text-align: center;
}

#post-content .has-text-align-right {
	text-align: right;
}

#post-content .has-text-align-justify {
	text-align: justify;
}

#post-content .has-small-font-size {
	font-size: var(--font-size-small) !important;
}

/* Produktseiten mit großen Screenshots (Zusatzklasse „is-showcase" am Block
   „Medien und Text", z. B. Visualbox): Der normale Medien-Text-Block ist für kleine
   Illustrationen gebaut, hier soll das Bild die größere Spalte bekommen. Die Bilder
   sind freigestellt und liegen direkt auf dem Seitenhintergrund – daher ohne Rundung. */
/* clear: Neben der links umflossenen Themenbox (#page-feature) wäre das Raster sonst
   auf die Restbreite gequetscht. */
#post-content .wp-block-media-text.is-showcase {
  clear: both;
  grid-template-columns: 1.2fr 1fr;
  padding-top: 50px;
}

#post-content .wp-block-media-text.is-showcase.has-media-on-the-right {
  grid-template-columns: 1fr 1.2fr;
}

#post-content .is-showcase .wp-block-media-text__content > h2 {
  margin-top: 0;
}

#post-content .is-showcase .wp-block-media-text__media img {
  border-radius: 0;
}

/* Teamstimmen (Gruppe „vt-team-quotes" mit je einer Gruppe „vt-team-quote" aus
   Bild + Zitat): Foto mit Namensbanner wie auf visualbox.de, nur ist der Name hier
   echter Text (die <cite> des Zitats) statt ins Foto gebrannt – lesbar für
   Screenreader und ohne neues Foto änderbar. Das Banner steht im Quelltext hinter
   dem Zitat und wird per order nach oben geholt. */
#post-content .vt-team-quotes > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  margin-top: 30px;
}

#post-content .vt-team-quote .wp-block-image {
  margin: 0;
}

#post-content .vt-team-quote .wp-block-image img {
  display: block;
  box-shadow: none;
}

#post-content .vt-team-quote .wp-block-quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

#post-content .vt-team-quote .wp-block-quote cite {
  order: -1;
  margin: 0 0 20px;
  padding: 12px 15px;
  background-color: var(--primary-color-text);
  color: #fff;
  font-family: var(--heading-font);
  font-style: normal;
  font-weight: 700;
  text-align: center;
}

#post-content .vt-team-quote .wp-block-quote p {
  margin: 0;
  font-style: italic;
}


/* Landingpage */

#landingpage header {
	position: absolute;
  box-shadow: none;
}

#landingpage header .header-link-icon {
	background-color: #fff;
}

#landingpage header .header-link-text {
	color: #fff;
}

#landingpage header > nav#header-main-menu {
	background-color: transparent;
}

#landingpage #page {
  margin-top: 0;
}

#landingpage #page-above {
  height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr;
	position: relative;
	color: #fff;
	overflow: hidden;
}

#landingpage #page-above #page-above-background {
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  position: absolute;
  top: -10px;
  left: -10px;
  background-size: cover;
	background-position: center center;
	filter: blur(0px) grayscale(1);
	mix-blend-mode: multiply;
}

#landingpage #page-above-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
	opacity: 1;
  background: linear-gradient(to right, var(--secondary-color-hex), var(--primary-color-hex));
  mix-blend-mode: multiply;
}

#landingpage #page-above-container {
  width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
  position: absolute;
  padding: var(--main-menu-height) var(--section-padding-side) var(--section-padding-top-bottom);
}

#landingpage #page-above.has-header-image #page-above-container {
  padding-right: max(calc((100vw - var(--content-max-width) - 100px) / 2), var(--min-padding-side));
  padding-left: max(calc((100vw - var(--content-max-width) - 100px) / 2), var(--min-padding-side));
}

#landingpage #page-above-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-column-gap: 50px;
  line-height: 1.5;
}

#landingpage #page-thumbnail {
	display: flex;
}

#landingpage #page-thumbnail .wp-post-image {
	object-fit: initial;
}

#landingpage #page-thumbnail picture {
  display: flex;
  align-items: center;
  justify-content: center;
}

#landingpage #page-above-text {
	grid-column: 1/3;
  text-shadow: 0 3px 24px rgb(0,0,0,.16);
}

#landingpage #page-thumbnail + #page-above-text {
	grid-column: 2;
}

#landingpage #page-title {
	margin-top: 0;
  word-break: break-word;
}

#landingpage #page-excerpt {
	margin: 30px 0;
	font-size: 1.2rem;
}

#landingpage #post-content h2 {
  margin-top: 1.5em;
	margin-bottom: 1.2em;
  font-size: 1.7rem;
}

#landingpage #post-content > .has-background h2 {
	margin-top: 0;
}

#landingpage #post-content h3 {
  margin-top: 1.4em;
	margin-bottom: 1em;
  font-size: 1.4rem;
}

#landingpage #post-content .is-layout-grid {
	gap: 1em;
}

#landingpage #post-content .is-layout-grid > .wp-block-heading {
	margin-top: 0;
}

#landingpage #post-content .wp-block-image img {
  box-shadow: none;
	border-radius: 10px;
}

#landingpage #post-content .wp-block-table.aligncenter {
	align-items: center;
}

#landingpage #post-content figure.wp-block-table th,
#landingpage #post-content figure.wp-block-table td {
	border: none;
}

.pricing-block {
  --pricing-background-color: var(--secondary-color-hex);
}

.pricing-intervals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-gap: 10px;
}

.pricing-interval-input {
  display: none;
}

.pricing-interval-label {
  grid-row: 1 / 2;
  display: block;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  font-size: .9rem;
  color: #fff;
  transition: all .3s linear;
}

.pricing-interval-label:first-of-type {
  justify-self: end;
}

.pricing-interval-label:last-of-type {
  justify-self: start;
}

.pricing-interval-input:checked + .pricing-interval-label {
  background-color: #fff;
  color: var(--pricing-background-color);
}

.pricing-table {
  grid-row: 2 / 3;
  grid-column: 1 / 3;
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 40px;
  visibility: hidden;
  opacity: 0;
  color: #fff;
  transition: visibility .3s linear, opacity .3s linear;
}

.pricing-interval-input:checked + .pricing-interval-label + .pricing-table {
  visibility: visible;
  opacity: 1;
}

.pricing-column {
  padding: 20px;
}

.pricing-single {
  grid-row: 2 / 3;
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
  margin-top: 50px;
  visibility: hidden;
  opacity: 0;
  color: #fff;
  transition: visibility .3s linear, opacity .3s linear;
}

.pricing-interval-input:checked + .pricing-interval-label + .pricing-single {
  visibility: visible;
  opacity: 1;
}

.pricing-features > ul {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: .7em;
  padding: 0;
}

.pricing-features > ul > li {
  display: flex;
  justify-content: start;
  align-items: center;
  list-style: none;
  padding: 0;
  font-size: .95rem;
  line-height: 1.5;
}

.pricing-features > ul > li:before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white' class='icon icon-tabler icons-tabler-filled icon-tabler-circle-check'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z' /%3E%3C/svg%3E");
  display: flex;
  justify-content: start;
  align-items: center;
  margin-right: 1.5em;
}

.pricing-specifics {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: .8em;
}

.pricing-price {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: .6em;
}

.pricing-current-price {
  font-size: 2rem;
  font-weight: bold;
}

.pricing-former-price {
  opacity: .75;
  font-size: 1.3rem;
  font-weight: bold;
  text-decoration: line-through;
}

.pricing-savings {
  background-color: #fff;
  opacity: .7;
  padding: .3em .6em;
  border-radius: 3px;
  font-size: .8rem;
  font-weight: bold;
  color: var(--pricing-background-color);
}

.pricing-info {
  opacity: .75;
  font-size: .9rem;
}

.pricing-info a, .pricing-info a:hover {
  color: inherit;
  text-decoration: underline;
}

.pricing-button {
  margin-top: 15px;
}

.pricing-button:hover {
  background-color: #fff;
  color: var(--primary-color-text);
}

.countdown {
	display: flex;
	justify-content: center;
	align-items: center;
}

.countdown-field {
  display: inline-block;
  list-style-type: none;
  padding: 1em;
  font-size: 1.1rem;
  text-align: center;
}

.countdown-field > span {
  display: block;
  font-size: 3.5rem;
	font-weight: bold;
}


/* Overlay */

#overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0,0,0,.5);
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-out;
}

#overlay.open {
  visibility: visible;
  opacity: 1;
}


/* PLUGINS */


/* Cookie Layer */

#cookie-law-info-bar, #cookie-law-info-again {
  border-radius: 10px;
}

#cookie-law-info-bar[data-cli-style="cli-style-v2"][data-cli-type="popup"] {
  padding: 30px;
}

#cookie-law-info-bar[data-cli-type="popup"] .cli_messagebar_head {
  margin-bottom: 15px;
}

#cookie-law-info-bar[data-cli-type="popup"] .cli-style-v2 .cli-bar-message {
  font-size: 0.85rem;
}

#cookie-law-info-bar[data-cli-type="popup"] .cli-style-v2 .cli-bar-btn_container {
  justify-content: flex-end;
  margin-top: 20px;
}

#cookie-law-info-bar[data-cli-type="popup"] .cli-style-v2 .cli-bar-btn_container .cli-plugin-button {
  box-sizing: border-box;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#cookie-law-info-bar[data-cli-type="popup"] .cli-style-v2 .cli-bar-btn_container .cli-plugin-button.cli_settings_button {
  background-color: #fff !important;
  border: 1.5px solid var(--primary-color-hex);
}

#cookie-law-info-bar[data-cli-type="popup"] .cli-style-v2 .cli-bar-btn_container .cli-plugin-button.cli_action_button {
  margin: 0;
  background-color: var(--primary-color-hex) !important;
}

#cookie-law-info-bar[data-cli-style="cli-style-v2"] .cli_messagebar_head {
  font-size: 0.8rem;
}

.cli-style-v2 .cli-bar-message {
  font-size: 0.75rem;
}


/* Yoast FAQ Schema */

.schema-faq-question {
  width: 100%;
	display: block;
	position: relative;
  padding: 18px 35px 18px 0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  text-align: left;
  transition: .4s;
}

.schema-faq-question:after {
  content: '+';
	width: 35px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
  float: right;
	font-size: 1.2rem;
}

.schema-faq-section .active:after {
  content: '-';
}

.schema-faq-answer {
  max-height: 0;
	margin: 0;
  overflow: hidden;
  background-color: #fff;
	font-size: .95rem;
  transition: max-height 0.2s ease-out;
}

.schema-faq-section .active + .schema-faq-answer {
  border-bottom: 1px solid #ccc;
}

.schema-faq-answer:before, .schema-faq-answer:after {
	content: "";
	height: 18px;
	display: block;
}


/* === Visualtech-spezifisch (frueher visualtech/style.css) =============== */
/* Fonts
 *
 * Je Schnitt zwei @font-face-Regeln:
 *  1. der volle Zeichensatz als WOFF2 (ohne unicode-range)
 *  2. das latin/latin-ext-Subset MIT unicode-range
 * Der Browser lädt für lateinischen Text nur das Subset; die Vollversion wird
 * erst angefordert, wenn ein Zeichen ausserhalb des Bereichs vorkommt.
 * Die TTF-Originale bleiben als Quelle liegen, werden aber nicht mehr geladen
 * (WOFF2 spart hier rund 85 Prozent Übertragungsvolumen).
 */

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0304, U+0308, U+0329, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Medium-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0304, U+0308, U+0329, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-SemiBold-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0304, U+0308, U+0329, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0304, U+0308, U+0329, U+2C60-2C7F, U+A720-A7FF;
}


/* Variables */

:root {
  
  /* Fonts */
  --heading-font: "Montserrat", sans-serif;
  --text-font: "Montserrat", sans-serif;
  --main-menu-font: var(--heading-font);
  --font-size-small: .9rem;
	--line-height: 1.2;
  
  /* Colors */
  --primary-color-hex: #3eaddd; /* Visualtech blue */
/*   --primary-color-hex: #FFC857; */
	--primary-color-rgb: 62,173,221;
  --secondary-color-hex: #2fc18e; /* light green */
  /* Textvarianten der Markenfarben: gleicher Farbton, dunkel genug für WCAG AA.
     Blau 5,2 : 1 auf Weiß / 4,5 : 1 auf #eee, Grün 4,5 : 1 auf Weiß; weiße Schrift
     darauf erreicht dieselben Werte. Die hellen Töne bleiben für Flächen und Deko. */
  --primary-color-text: #1b749b;
  --secondary-color-text: #218663;
/*   --secondary-color-hex: #ffc857; */
/*   --secondary-color-hex: #9680a9; */
	--secondary-color-rgb: 47,193,142;
/* 	--secondary-color-rgb: 255,200,87; */
/* 	--secondary-color-rgb: 150,128,169; */
  --tertiary-color-hex: #082430; /* dark blue */
	--tertiary-color-rgb: 8,36,48;
	--quarternary-color-hex: ;
	--quarternary-color-rgb: ;
	
	--dark-gray-hex: #222;
	
	--scrollbar-thumb-background: rgba(var(--tertiary-color-rgb),.5);
	--scrollbar-track-background: transparent;
	
  /* Endfarbe der Verläufe: Markengrün gedämpft (gleicher Farbton, S 61 → 38 %,
     L 47 → 58 %) — das volle Grün war in der Fläche zu grell. Dunkelblau darauf 7,2 : 1. */
  --gradient-end-color: #6bbda0;
	--background-gradient-horizontal: linear-gradient(to right, var(--primary-color-hex), var(--gradient-end-color));
  --background-gradient-vertical: linear-gradient(to bottom, var(--primary-color-hex), var(--gradient-end-color));
  
  --text-color: var(--tertiary-color-hex);
  --text-color-light: #555;
  
  --body-background: #fff;
	
	/* Headings */
	--heading-margin: .75em 0;
  --heading-text-align: left;
	--heading-font-weight: 700;
	--heading-color: var(--primary-color-text);
	
	--h1-font-size: 3rem;
	--h1-color: var(--heading-color);
	
	--h2-font-size: 2rem;
	--h2-color: var(--heading-color);
	
	--h3-font-size: 1.5rem;
	--h3-color: var(--heading-color);
	
	/* Buttons */
	--button-padding: .75em 1.75em;
  --button-background: rgba(var(--primary-color-rgb),.1);
	--button-border-width: 3px;
	--button-border-style: solid;
	--button-border-color: var(--primary-color-text);
	--button-font-family: var(--heading-font);
	--button-font-size: 1rem;
	--button-font-weight: 700;
	--button-text-transform: uppercase;
	--button-letter-spacing: normal;
  --button-color: var(--primary-color-text);
	
  --button-background-hover: var(--button-background);
	--button-border-color-hover: var(--button-border-color);
	--button-color-hover: var(--button-color);
	
	/* Links */
	--link-color: var(--primary-color-text);
	--link-hover-color: var(--secondary-color-text);
	--link-text-decoration: none;
	--link-text-underline-offset: .1em;
	--link-text-decoration-color: var(--primary-color-text);
	
	/* Icons */
	--above-footer-icon-color: var(--primary-color-hex);
	
	/* Header */
  --header-shadow: 0;
  
  --top-menu-height: 40px;
  --top-menu-background-color: var(--primary-color-text);
  --top-menu-color: #fff;
  --top-menu-hover-color: var(--tertiary-color-hex);
  
  --main-menu-height: 75px;
  --main-menu-background-color: var(--tertiary-color-hex);
  --main-menu-color: #fffc;
  --main-menu-hover-color: #fff;

  --logo-width: 175px;
  
  /* Section */
  --section-padding-top-bottom: 50px;
  --section-padding-side: max(calc((100vw - var(--content-max-width)) / 2), var(--min-padding-side));
  
  /* Visualtech specifics */
  --services-gap: var(--section-padding-top-bottom);
  --service-item-columns: 3;
  --service-item-width: min(calc((var(--content-width) - var(--services-gap) * (var(--service-item-columns) - 1)) / var(--service-item-columns)), 450px);
  
  --team-gap: var(--section-padding-top-bottom);
  --team-member-image-width: 150px;
  --team-member-image-height: calc(var(--team-member-image-width) / 3 * 4);
	
	/* Category */
	--category-max-width: 1000px;
	
	/* Footer */
  --footer-background-color: var(--tertiary-color-hex);
	--footer-color: #fff9;
	--footer-link-hover-color: #fff;
  
	/* Miscellaneous specs */
  --100vh: 100vh;
  --mobile-vh: 100vh;
	
	--scrollbar-width: 8px; /* Webkit only */
	
  --content-max-width: 1000px;
  --min-padding-side: 30px;
  --content-width: min(var(--content-max-width), calc(100vw - var(--min-padding-side) * 2));
	
  font-family: var(--text-font);
  font-weight: 400;
  font-size: 100%;
	line-height: var(--line-height);
  color: var(--text-color);
}


/* Icons */

.icon.mail {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM20 7.23792L12.0718 14.338L4 7.21594V19H20V7.23792ZM4.51146 5L12.0619 11.662L19.501 5H4.51146Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon.phone {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9.36556 10.6821C10.302 12.3288 11.6712 13.698 13.3179 14.6344L14.2024 13.3961C14.4965 12.9845 15.0516 12.8573 15.4956 13.0998C16.9024 13.8683 18.4571 14.3353 20.0789 14.4637C20.599 14.5049 21 14.9389 21 15.4606V19.9234C21 20.4361 20.6122 20.8657 20.1022 20.9181C19.5723 20.9726 19.0377 21 18.5 21C9.93959 21 3 14.0604 3 5.5C3 4.96227 3.02742 4.42771 3.08189 3.89776C3.1343 3.38775 3.56394 3 4.07665 3H8.53942C9.0611 3 9.49513 3.40104 9.5363 3.92109C9.66467 5.54288 10.1317 7.09764 10.9002 8.50444C11.1427 8.9484 11.0155 9.50354 10.6039 9.79757L9.36556 10.6821ZM6.84425 10.0252L8.7442 8.66809C8.20547 7.50514 7.83628 6.27183 7.64727 5H5.00907C5.00303 5.16632 5 5.333 5 5.5C5 12.9558 11.0442 19 18.5 19C18.667 19 18.8337 18.997 19 18.9909V16.3527C17.7282 16.1637 16.4949 15.7945 15.3319 15.2558L13.9748 17.1558C13.4258 16.9425 12.8956 16.6915 12.3874 16.4061L12.3293 16.373C10.3697 15.2587 8.74134 13.6303 7.627 11.6707L7.59394 11.6126C7.30849 11.1044 7.05754 10.5742 6.84425 10.0252Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon.chevron-down {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon.chevrons-down {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 19.1642L18.2071 12.9571L16.7929 11.5429L12 16.3358L7.20711 11.5429L5.79289 12.9571L12 19.1642ZM12 13.5143L18.2071 7.30722L16.7929 5.89301L12 10.6859L7.20711 5.89301L5.79289 7.30722L12 13.5143Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon.burger-menu {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-close-x {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon.map-pin {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 20.8995L16.9497 15.9497C19.6834 13.2161 19.6834 8.78392 16.9497 6.05025C14.2161 3.31658 9.78392 3.31658 7.05025 6.05025C4.31658 8.78392 4.31658 13.2161 7.05025 15.9497L12 20.8995ZM12 23.7279L5.63604 17.364C2.12132 13.8492 2.12132 8.15076 5.63604 4.63604C9.15076 1.12132 14.8492 1.12132 18.364 4.63604C21.8787 8.15076 21.8787 13.8492 18.364 17.364L12 23.7279ZM12 13C13.1046 13 14 12.1046 14 11C14 9.89543 13.1046 9 12 9C10.8954 9 10 9.89543 10 11C10 12.1046 10.8954 13 12 13ZM12 15C9.79086 15 8 13.2091 8 11C8 8.79086 9.79086 7 12 7C14.2091 7 16 8.79086 16 11C16 13.2091 14.2091 15 12 15Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon.printer {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 2C17.5523 2 18 2.44772 18 3V7H21C21.5523 7 22 7.44772 22 8V18C22 18.5523 21.5523 19 21 19H18V21C18 21.5523 17.5523 22 17 22H7C6.44772 22 6 21.5523 6 21V19H3C2.44772 19 2 18.5523 2 18V8C2 7.44772 2.44772 7 3 7H6V3C6 2.44772 6.44772 2 7 2H17ZM16 17H8V20H16V17ZM20 9H4V17H6V16C6 15.4477 6.44772 15 7 15H17C17.5523 15 18 15.4477 18 16V17H20V9ZM8 10V12H5V10H8ZM16 4H8V7H16V4Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon.bank {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M2 20H22V22H2V20ZM4 12H6V19H4V12ZM9 12H11V19H9V12ZM13 12H15V19H13V12ZM18 12H20V19H18V12ZM2 7L12 2L22 7V11H2V7ZM4 8.23607V9H20V8.23607L12 4.23607L4 8.23607ZM12 8C11.4477 8 11 7.55228 11 7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7C13 7.55228 12.5523 8 12 8Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon.facebook {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14 13.5H16.5L17.5 9.5H14V7.5C14 6.47062 14 5.5 16 5.5H17.5V2.1401C17.1743 2.09685 15.943 2 14.6429 2C11.9284 2 10 3.65686 10 6.69971V9.5H7V13.5H10V22H14V13.5Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon.instagram {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12.001 9C10.3436 9 9.00098 10.3431 9.00098 12C9.00098 13.6573 10.3441 15 12.001 15C13.6583 15 15.001 13.6569 15.001 12C15.001 10.3427 13.6579 9 12.001 9ZM12.001 7C14.7614 7 17.001 9.2371 17.001 12C17.001 14.7605 14.7639 17 12.001 17C9.24051 17 7.00098 14.7629 7.00098 12C7.00098 9.23953 9.23808 7 12.001 7ZM18.501 6.74915C18.501 7.43926 17.9402 7.99917 17.251 7.99917C16.5609 7.99917 16.001 7.4384 16.001 6.74915C16.001 6.0599 16.5617 5.5 17.251 5.5C17.9393 5.49913 18.501 6.0599 18.501 6.74915ZM12.001 4C9.5265 4 9.12318 4.00655 7.97227 4.0578C7.18815 4.09461 6.66253 4.20007 6.17416 4.38967C5.74016 4.55799 5.42709 4.75898 5.09352 5.09255C4.75867 5.4274 4.55804 5.73963 4.3904 6.17383C4.20036 6.66332 4.09493 7.18811 4.05878 7.97115C4.00703 9.0752 4.00098 9.46105 4.00098 12C4.00098 14.4745 4.00753 14.8778 4.05877 16.0286C4.0956 16.8124 4.2012 17.3388 4.39034 17.826C4.5591 18.2606 4.7605 18.5744 5.09246 18.9064C5.42863 19.2421 5.74179 19.4434 6.17187 19.6094C6.66619 19.8005 7.19148 19.9061 7.97212 19.9422C9.07618 19.9939 9.46203 20 12.001 20C14.4755 20 14.8788 19.9934 16.0296 19.9422C16.8117 19.9055 17.3385 19.7996 17.827 19.6106C18.2604 19.4423 18.5752 19.2402 18.9074 18.9085C19.2436 18.5718 19.4445 18.2594 19.6107 17.8283C19.8013 17.3358 19.9071 16.8098 19.9432 16.0289C19.9949 14.9248 20.001 14.5389 20.001 12C20.001 9.52552 19.9944 9.12221 19.9432 7.97137C19.9064 7.18906 19.8005 6.66149 19.6113 6.17318C19.4434 5.74038 19.2417 5.42635 18.9084 5.09255C18.573 4.75715 18.2616 4.55693 17.8271 4.38942C17.338 4.19954 16.8124 4.09396 16.0298 4.05781C14.9258 4.00605 14.5399 4 12.001 4ZM12.001 2C14.7176 2 15.0568 2.01 16.1235 2.06C17.1876 2.10917 17.9135 2.2775 18.551 2.525C19.2101 2.77917 19.7668 3.1225 20.3226 3.67833C20.8776 4.23417 21.221 4.7925 21.476 5.45C21.7226 6.08667 21.891 6.81333 21.941 7.8775C21.9885 8.94417 22.001 9.28333 22.001 12C22.001 14.7167 21.991 15.0558 21.941 16.1225C21.8918 17.1867 21.7226 17.9125 21.476 18.55C21.2218 19.2092 20.8776 19.7658 20.3226 20.3217C19.7668 20.8767 19.2076 21.22 18.551 21.475C17.9135 21.7217 17.1876 21.89 16.1235 21.94C15.0568 21.9875 14.7176 22 12.001 22C9.28431 22 8.94514 21.99 7.87848 21.94C6.81431 21.8908 6.08931 21.7217 5.45098 21.475C4.79264 21.2208 4.23514 20.8767 3.67931 20.3217C3.12348 19.7658 2.78098 19.2067 2.52598 18.55C2.27848 17.9125 2.11098 17.1867 2.06098 16.1225C2.01348 15.0558 2.00098 14.7167 2.00098 12C2.00098 9.28333 2.01098 8.94417 2.06098 7.8775C2.11014 6.8125 2.27848 6.0875 2.52598 5.45C2.78014 4.79167 3.12348 4.23417 3.67931 3.67833C4.23514 3.1225 4.79348 2.78 5.45098 2.525C6.08848 2.2775 6.81348 2.11 7.87848 2.06C8.94514 2.0125 9.28431 2 12.001 2Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon.linkedin {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.94048 4.99993C6.94011 5.81424 6.44608 6.54702 5.69134 6.85273C4.9366 7.15845 4.07187 6.97605 3.5049 6.39155C2.93793 5.80704 2.78195 4.93715 3.1105 4.19207C3.43906 3.44699 4.18654 2.9755 5.00048 2.99993C6.08155 3.03238 6.94097 3.91837 6.94048 4.99993ZM7.00048 8.47993H3.00048V20.9999H7.00048V8.47993ZM13.3205 8.47993H9.34048V20.9999H13.2805V14.4299C13.2805 10.7699 18.0505 10.4299 18.0505 14.4299V20.9999H22.0005V13.0699C22.0005 6.89993 14.9405 7.12993 13.2805 10.1599L13.3205 8.47993Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon.visualtech {
  mask-image: url("assets/images/Logo_ohne_Schrift_weiß.svg");
}


/* Buttons */

a.button,
.button {
	border-top: transparent;
	border-bottom: transparent;
	text-decoration: none;
}

.button::before,
.button::after {
	content: '';
  width: 0;
  height: var(--button-border-width);
  position: absolute;
  background: var(--button-border-color);
  transition: all .3s linear;
}

.button::before {
	top: 0;
	left: 0;
}

.button::after {
	right: 0;
	bottom: 0;
}

.button:hover::before,
.button:hover::after {
	width: 100%;
}

.button.secondary {
  color: var(--secondary-color-text);
  border-color: var(--secondary-color-text);
}

.button.reverse {
  background-color: var(--primary-color-text);
  color: #fff;
}

nav#header-main-menu .button {
	padding: var(--button-padding);
	background: rgba(255,255,255,.25);
	font-size: var(--button-font-size);
}

.above-slide.white .above-buttons > .button {
  background: rgba(255,255,255,.25);
}

/* Feste Fläche in Hellblau mit dunkelblauer Schrift (6,3 : 1), damit die Buttons als
   Buttons erkennbar sind. Weiße Schrift ginge auf Hellblau nicht (2,6 : 1). Rahmen
   und Hover-Linien bleiben weiß. */
.above-slide.white:is(.gradient-primary, .gradient-secondary) .above-buttons > .button {
  background: var(--primary-color-hex);
  color: var(--tertiary-color-hex);
}

.above-slide.white .above-buttons > .button::before,
.above-slide.white .above-buttons > .button::after {
  background: #fff;
}

.above-slide.black .above-buttons > .button {
  background: rgba(0,0,0,.2);
}

.above-slide.black .above-buttons > .button::before,
.above-slide.black .above-buttons > .button::after {
  background: #000;
}

.above-slide.primary .above-buttons > .button {
  background: rgba(var(--primary-color-rgb),.2);
}

.above-slide.primary .above-buttons > .button::before,
.above-slide.primary .above-buttons > .button::after {
  background: var(--primary-color-text);
}

.above-slide.secondary .above-buttons > .button {
  background: rgba(var(--secondary-color-rgb),.2);
}

.above-slide.secondary .above-buttons > .button::before,
.above-slide.secondary .above-buttons > .button::after {
  background: var(--secondary-color-text);
}

.above-slide.tertiary .above-buttons > .button {
  background: rgba(var(--tertiary-color-rgb),.2);
}

.above-slide.tertiary .above-buttons > .button::before,
.above-slide.tertiary .above-buttons > .button::after {
  background: var(--tertiary-color-hex);
}


/* List items */

ul.wp-block-list > li {
  position: relative;
  list-style: none;
}

ul.wp-block-list > li::before {
  content: '';
  width: 0px;
  height: 0px;
  display: inline-block;
  position: absolute;
  top: .35em;
  left: -1em;
  border-style: solid;
  border-width: .375em 0 .375em .65em;
  border-color: transparent transparent transparent var(--primary-color-hex);
  -webkit-transform: rotate(360deg);
}


/* Header */

#logo {
  background-image: url("assets/images/Logo_Visualtech_blau_weiß.svg");
}

nav#header-main-menu > ul.menu > li.menu-item-has-children > i.submenu-toggle-indicator,
nav#header-main-menu ul.sub-menu li.menu-item-has-children > i.submenu-toggle-indicator{
	opacity: .5;
	color: var(--main-menu-color);
}

.header-link-text {
  color: inherit;
}


/* Above */

#above {
	height: unset;
	grid-template-rows: calc(100vh - var(--top-menu-height) - var(--main-menu-height)) 120px;
}

.above-teaser {
	font-size: 1.5rem;
	font-weight: 500;
}

.above-teaser a {
	text-decoration-thickness: 2px;
}

#above-footer a:not(.above-social-background) {
	color: var(--primary-color-text);
	text-decoration: none;
}

/* Social-Media-Links: Icons ohne Dreieck (bis 10.10.2026 auf blauen Dreiecken).
   44 × 44 px Klickfläche; Icon in der Textvariante des Markenblaus, weil ein Icon
   ohne Text 3 : 1 braucht (Hellblau auf dem grauen Streifen nur 2,2 : 1). */
a.above-social-background {
	width: 44px;
	height: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	border-radius: 0;
}

a.above-social-background:hover {
  background-color: transparent;
}

a.above-social-background > .above-social-icon {
	width: 32px;
	height: 32px;
	position: static;
	background-color: var(--primary-color-text);
	transition: background-color .3s ease-out;
}

a.above-social-background:hover > .above-social-icon {
	background-color: var(--secondary-color-text);
}


/* Section */

section:where(.vt-section) > h1 {
  text-align: center;
  font-size: 2.8rem;
  margin-bottom: 0; 
}

section:where(.vt-section) > h2 {
  margin: 0 0 40px;
  text-transform: none;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: normal;
  text-align: center;
  color: var(--primary-color-text);
}

section:where(.vt-section).secondary > h2 {
  color: var(--secondary-color-text);
}

#home > section:where(.vt-section) {
  max-width: unset;
/*   padding: 50px max(calc((100vw - var(--content-max-width)) / 2), var(--min-padding-side)); */
}

#home > section:where(.vt-section):nth-of-type(2n) {
  background-color: rgba(var(--tertiary-color-rgb),.075);
}


/* Above the Fold */

#above-footer {
	background: rgba(var(--tertiary-color-rgb),.075);
}


/* Team (Startseite und Shortcode [personen]) */

/* Verteilung ohne feste Bildschirm-Grenzen: Jede Box will 450 px und braucht
   mindestens 400 px. Passen zwei nicht nebeneinander, steht eine pro Reihe; eine
   übrige Box steht mittig. Früher teilte sich der Platz immer in zwei Spalten —
   auf dem Handy wurde eine Box so schmaler als ihr Bild. */
.team-members {
  display: flex;
  justify-content: center;
  gap: var(--team-gap);
  flex-wrap: wrap;
}

/* Die Box ist Container: Ihr Inneres richtet sich nach der Breite, die sie
   tatsächlich hat — auf der Startseite, im Shortcode und in einer Spalte. */
.team-member {
  flex: 0 1 450px;
  min-width: min(100%, 400px);
  container-type: inline-size;
}

.team-member-card {
  height: 100%;
  display: flex;
}

/* Bild so hoch wie die Textbox: Die Kachel streckt beide Spalten auf dieselbe Höhe,
   die feste Höhe ist nur noch das Minimum. Vorher endete das Bild bei 200 px und
   die Textbox stand darunter über. */
.team-member-image {
  width: var(--team-member-image-width);
  min-height: var(--team-member-image-height);
  flex-shrink: 0;
  position: relative;
/*   background-image: radial-gradient(circle at 50% 30%, #fff, rgba(var(--tertiary-color-rgb),.2));
  background-image: radial-gradient(circle at 50% 30%, #efeee9 40%, #d7d3ca); */
  overflow: hidden;
}

/* Das Profilbild kommt fertig im Hochformat 3:4 (Hinweis am Feld).
   Früher saß hier pro Person ein eigener Ausschnitt aus einem Querformat-Foto —
   jedes neue Bild brauchte damit neues CSS. */
.team-member-image > img,
.team-member-image > picture > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.team-member-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  padding: 1.5em;
  /* Ruhige Fläche statt Farbverlauf, wie die Kontaktleiste über dem Footer */
  background-color: rgba(var(--tertiary-color-rgb), .075);
  color: var(--tertiary-color-hex);
}

.team-member-details-group {
  display: flex;
  flex-direction: column;
  gap: .5em;
}

.team-member-detail {
  display: flex;
  align-items: center;
  gap: .5em;
}

/* Name ist je nach Seite h3 (Startseite) oder h4 (unter einer h3 im Seiteninhalt) —
   die Größe bleibt gleich */
.team-member-detail.name {
  margin: 0;
  font-size: var(--h3-font-size);
  color: var(--tertiary-color-hex);
}

/* Name als Link zum Profil: sieht aus wie vorher, beim Überfahren unterstrichen
   (allgemeine Hover-Regel am Ende) */
.team-member-detail.name > a {
  color: inherit;
  text-decoration: none;
}

.team-member-detail-icon {
  background-color: var(--tertiary-color-hex);
}

.team-member-detail > a {
  min-width: 0;
  color: var(--tertiary-color-hex);
  /* Gleiche Farbe wie der Text — erst die Linie macht E-Mail und Telefon als Link erkennbar */
  text-decoration: underline;
  /* Lange E-Mail-Adressen notfalls umbrechen statt aus der Box laufen */
  overflow-wrap: anywhere;
}

/* Schmale Box (Handy): Bild über dem Text, als Querformat-Ausschnitt mit dem Kopf
   im oberen Bereich. Nebeneinander blieben neben 150 px Bild keine 200 px Text. */
@container (max-width: 420px) {

  .team-member-card {
    flex-direction: column;
  }

  .team-member-image {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .team-member-image > img,
  .team-member-image > picture > img {
    object-position: center 20%;
  }

  .team-member-details {
    gap: 1em;
    padding: 1.25em;
  }

}


/* Services */

#services-container {
  display: flex;
  justify-content: center;
  gap: var(--services-gap);
  flex-wrap: wrap;
}

/* Genau vier Kacheln als 2 × 2 statt 3 + 1. Die Breite muss hier neu berechnet
   werden: Am :root ist sie mit der dortigen Spaltenzahl schon aufgelöst und
   übernimmt eine hier geänderte --service-item-columns nicht. Mobil setzt
   media-queries.css die Spalten wieder auf 1. */
#services-container:has(> .service-item:nth-child(4):last-child) {
  --service-item-columns: 2;
  --service-item-width: min(calc((var(--content-width) - var(--services-gap) * (var(--service-item-columns) - 1)) / var(--service-item-columns)), 450px);
}

a.service-item {
  width: var(--service-item-width);
  background-color: var(--tertiary-color-hex);
}

.service-image {
  width: 100%;
  height: calc(var(--service-item-width) / 3 * 2);
}

.service-image img {
  width: 100%;
  height: 100%;
}

.service-title {
  padding: .5em 2em;
  background-color: var(--tertiary-color-hex);
}

.service-title > h3 {
  text-align: center;
}


/* Post grid */

a.post-grid-item,
a.post-grid-item:hover {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.post-grid-item-background {
	background: var(--tertiary-color-hex);
	z-index: -1;
}

.post-grid-item-text {
	background: rgba(var(--tertiary-color-rgb),.075);
	border-top: 0;
}


/* Contact */

#kontakt-author.has-image {
	display: flex;
	justify-content: center;
}

#kontakt-author-image > img,
#kontakt-author-image > picture > img {
	object-fit: contain;
	object-position: center bottom;
}

#kontakt-author-info {
	left: 0;
	padding: 15px 100px 15px 50px;
	background: linear-gradient(to right, #fff 0%, #fffc 50%, #fff9 75%, #fff0 100%);
}

#kontakt-author-name {
	font-size: 1.5rem;
	color: var(--primary-color-text);
}

#kontakt-author-function {
	font-size: 1rem;
/* 	font-weight: 500; */
	letter-spacing: normal;
	color: var(--text-color);
}

#kontakt-headline {
	font-size: 2.5rem;
	font-weight: 700;
}

#kontakt-author + #kontakt-form {
  padding-left: 0;
}

.kontakt-submit {
  background-color: rgba(255,255,255,.25);
	border: var(--button-border-width) var(--button-border-style) var(--tertiary-color-hex);
	border-top: transparent;
	border-bottom: transparent;
	font-size: 1rem;
  font-weight: 700;
	text-transform: uppercase;
  color: var(--tertiary-color-hex);
}

/* Ober- und Unterkante des Buttons laufen bei Hover/Fokus ein. Vorher hing das
   an einem unsichtbaren CF7-Textfeld, das bei jedem Absenden leer mitging. */
#kontakt-form .kontakt-submit-wrap::before,
#kontakt-form .kontakt-submit-wrap::after {
	content: '';
  width: 0;
  height: var(--button-border-width);
  position: absolute;
  background: var(--tertiary-color-hex);
  transition: all .3s linear;
  pointer-events: none;
}

#kontakt-form .kontakt-submit-wrap::before {
	top: 0;
	left: 0;
}

#kontakt-form .kontakt-submit-wrap::after {
	right: 0;
	bottom: 0;
}

#kontakt-form .kontakt-submit-wrap:hover::before,
#kontakt-form .kontakt-submit-wrap:hover::after,
#kontakt-form .kontakt-submit-wrap:focus-within::before,
#kontakt-form .kontakt-submit-wrap:focus-within::after {
	width: 100%;
}

.kontakt-detail-icon {
  margin-right: .5em;
  background-color: var(--tertiary-color-hex);
}


/* Page */

#page-breadcrumbs > svg {
  color: inherit;
}

#page-feature,
#page-info > .page-info-heading {
  color: #fff;
}


/* Post page */

#post-teaser {
  padding: var(--section-padding-top-bottom) var(--min-padding-side);
}

#post-title {
	color: var(--primary-color-text);
}

#post-details {
  padding: var(--section-padding-top-bottom) 70px var(--section-padding-top-bottom) var(--min-padding-side);
}

#post-page-thumbnail > .wp-post-image {
	box-shadow: none;
}

#post-scroll {
	background: var(--tertiary-color-hex);
	box-shadow: none;
}

#post-scroll > .icon {
  background-color: var(--primary-color-hex);
}

#post-separator {
	height: 10px;
	background: rgba(var(--secondary-color-rgb),1);
	z-index: -1;
}


/* Footer */

.footer-info-icon {
  width: 1em;
  height: 1em;
}


/* ---------------------------------------------------------------------------
 * Barrierefreiheit (WCAG 2.2 AA, Stand 10.10.2026)
 * ------------------------------------------------------------------------- */

/* Buttons, die vorher <div> waren, sehen aus wie vorher: :where() hat
   Spezifität 0, alle bestehenden Theme-Regeln gewinnen (auch background-color,
   über die die Masken-Icons ihre Farbe bekommen). */
:where(#header-main-menu-toggle, .submenu-toggle-indicator, .above-slide-arrow, .above-slide-dot, .above-slide-pause, #post-scroll, .error-page-video-toggle, .a11y-trigger, .a11y-dialog-close) {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Icons waren <div>, sind jetzt <span> (gültig innerhalb von Links/Buttons). */
span.icon {
  display: block;
}

/* Nur für Screenreader sichtbar */
.screen-reader-text {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100000;
  padding: .75em 1.25em;
  background: #fff;
  color: var(--tertiary-color-hex);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

#main-content:focus {
  outline: none; /* Sprungziel des Skip-Links, kein Bedienelement */
}

/* Fokus: zweifarbiger Ring, auf hellen und dunklen Flächen sichtbar. Die
   transparente outline bleibt für den Windows-Kontrastmodus stehen. */
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--tertiary-color-hex);
}

/* Beitragskacheln tragen einen eigenen Schatten (a.post-grid-item, spezifischer
   als :focus-visible) — der Fokusring fiel dort ganz weg. */
a.post-grid-item:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--tertiary-color-hex);
}

/* Der fixierte Header darf fokussierte Elemente nicht verdecken (WCAG 2.4.11). */
html {
  scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--top-menu-height) + var(--main-menu-height) + 1rem);
}

/* Per Tastatur öffnet das Untermenü über den Aufklapp-Button (.sub-menu-open,
   aria-expanded). Früher zusätzlich per :focus-within — dann stand das Menü offen,
   während der Button „zugeklappt“ meldete, und Escape schloss es nicht. */
nav#header-main-menu li.menu-item-has-children.sub-menu-open > ul.sub-menu {
  opacity: 1;
  visibility: visible;
}

/* Slider: Pause-Symbol (zwei Balken) bzw. Abspielen-Dreieck */
.above-slide-pause::before {
  content: '';
  width: 10px;
  height: 14px;
  border-left: 4px solid var(--slide-color);
  border-right: 4px solid var(--slide-color);
  box-sizing: border-box;
}

.above-slide-pause[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent var(--slide-color);
}

/* Formular: sichtbare Beschriftungen */
#kontakt-form label {
  display: block;
  margin-bottom: .25em;
  color: var(--tertiary-color-hex);
  font-weight: 600;
}

/* Sternchen an Pflichtfeldern, „Pflichtfeld" erscheint als Tooltip (title). Für
   Screenreader ausgeblendet — dort sagt das required-Attribut „erforderlich" an. */
.kontakt-pflicht {
  cursor: help;
}

/* Dachzeile im Slider und „Thema:" sind keine Überschriften-Elemente mehr
   (Hierarchie), sehen aber aus wie vorher. */
.above-subheading {
  margin-top: .75em;
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  font-size: var(--h3-font-size);
}

/* Farbe kommt weiter aus der Visualtech-Regel (weiß); hier nur, was vorher
   das h3-Element mitbrachte. */
#page-info > .page-info-heading {
  margin-bottom: .75em;
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  font-size: var(--h3-font-size);
}

/* Bewegung reduzieren: Systemeinstellung respektieren */
@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

}

/* Top-Leiste: Beim Darüberfahren färbte eine Regel aus dem Basis-Theme den Text
   in Markenblau — auf der markenblauen Leiste unsichtbar. Auf dem Blau ist nur
   Weiß lesbar (Dunkelblau 3,1 : 1), deshalb Hover per Unterstreichung. */
nav#header-top-menu a:hover {
  color: var(--top-menu-color);
}

/* Nur der Text wird unterstrichen (am Link selbst entstünde eine zweite Linie).
   Abstand schon im Ruhezustand setzen und nur die Farbe animieren — sonst
   animiert "transition: all" den Linienabstand und die Linie springt. */
nav#header-top-menu .header-link-text {
  text-underline-offset: .2em;
  transition-property: color;
}

nav#header-top-menu .header-link:hover > .header-link-text {
  color: var(--top-menu-color);
  text-decoration: underline;
}

/* Bildnachweis am Bild („Bild: Urheber / Quelle", functions/image-credits.php).
   Weiß auf 65 % Dunkelblau: auch über einem rein weißen Bildbereich noch 5,1 : 1.
   Untergrenze für AA (4,5 : 1) liegt bei etwa 62 % — nicht weiter absenken. */
.vt-image-credit {
  max-width: calc(100% - 1em);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: .2em .55em;
  overflow: hidden;
  background: rgba(var(--tertiary-color-rgb), .65);
  color: #fff;
  font-family: var(--text-font);
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: none;
  pointer-events: none;
}

/* Container, die für den Nachweis einen Bezugspunkt brauchen */
#page-header,
#page-thumbnail,
.wp-block-image,
.wp-block-video {
  position: relative;
}

/* Am Video oben, sonst läge der Nachweis über der Steuerleiste */
.wp-block-video > .vt-image-credit {
  top: 0;
  bottom: auto;
}

/* Im Slider über Farbverlauf und Text, aber unter der Steuerung */
.above-slide > .vt-image-credit {
  z-index: 20;
}

/* Liste im Impressum */
.vt-image-credits {
  padding-left: 1.2em;
}

.vt-image-credits li + li {
  margin-top: .35em;
}

/* Fehlerseite (404): templates/page-404.php, parts/error-page.php ------------ */

/* Mehr Breite als normale Seiten (dort max. 1000 px Inhalt), damit Video und Text
   nebeneinander ohne viele Umbrüche passen. Abstand nach oben als padding: ein
   margin fiele mit dem margin-top von #page zusammen (Margin-Collapsing), und die
   Überschrift klebte am fixierten Menü. */
.error-page #post-content {
  padding: 70px max(var(--min-padding-side), calc((100vw - 1240px) / 2)) 0;
}

.error-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: 60px;
  max-width: 1240px;
  margin: 0 auto;
}


.error-page-media {
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 24px rgb(0 0 0 / 16%);
}

.error-page-video,
.error-page-media > img,
.error-page-media > picture > img {
  width: 100%;
  height: auto;
  display: block;
}

/* Pause/Abspielen unten links (der Bildnachweis steht unten rechts) */
.error-page-video-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: .5em;
  bottom: .5em;
  z-index: 10;
  border-radius: 50%;
  background: rgba(var(--tertiary-color-rgb), .65);
}

.error-page-video-toggle::before {
  content: '';
  width: 10px;
  height: 14px;
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
  box-sizing: border-box;
}

.error-page-video-toggle[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #fff;
}

/* Terminal-Fenster unter dem Video. Farben auf #082430: Text 14 : 1,
   Prompt 7,2 : 1, Status 8,2 : 1 */
.error-terminal {
  position: relative;
  margin: 1.25em 0 0;
  padding: 2.4em 1.25em 1.1em;
  border-radius: 8px;
  background: var(--tertiary-color-hex);
  color: #e8f1f4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Die drei Fensterpunkte */
.error-terminal::before {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: .9em;
  left: 1.1em;
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 16px 0 0 #f5c451, 32px 0 0 #6bbda0;
}

.error-terminal-prompt {
  color: #6bbda0;
}

.error-terminal-status {
  color: #ff9e9e;
  font-weight: 700;
}

.error-page-title {
  margin: 0 0 .4em;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.15;
}

.error-page-quote {
  padding-left: .8em;
  border-left: 4px solid var(--primary-color-text);
  color: var(--tertiary-color-hex);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
}

.error-page-suggestions-heading {
  margin: 1.75em 0 .5em;
  font-size: 1.2rem;
  color: var(--tertiary-color-hex);
}

.error-page-suggestions ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#post-content .error-page-suggestions li {
  margin: 0;
  border-bottom: 1px solid rgba(var(--tertiary-color-rgb), .15);
}

.error-page-suggestions a {
  display: block;
  padding: .5em 0;
  text-decoration: none;
}

.error-page-suggestions a::before {
  content: '→ ';
}

.error-page-suggestions a:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.error-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75em;
  margin-top: 1.75em;
}

/* Suchformular (parts/search-form.php): 404-Seite und Suchergebnisse */
.vt-search-form {
  margin-top: 1.5em;
}

.vt-search-label {
  display: block;
  margin-bottom: .35em;
  font-weight: 600;
  color: var(--tertiary-color-hex);
}

.vt-search-row {
  display: flex;
  gap: .5em;
}

/* Rahmen 3 : 1 gegen Weiß (#767676 auf Weiß: 4,5 : 1) — Eingabefelder sind
   Bedienelemente und brauchen eine erkennbare Begrenzung (WCAG 1.4.11). */
.vt-search-input {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  padding: .75em 1em;
  border: 1px solid #767676;
  font: inherit;
  font-size: 1.05rem;
  color: var(--tertiary-color-hex);
  background: #fff;
}

.vt-search-submit {
  flex-shrink: 0;
}

#category .vt-search-form {
  max-width: 600px;
  margin: 1.5em auto 0;
}

.vt-search-count,
.vt-search-empty {
  text-align: center;
}

/* Trefferliste (search.php): links die Treffer, rechts die neue Suche;
   auf dem Handy steht die Suche unter den Treffern (Reihenfolge im HTML). */
.vt-search-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 20px;
}

.vt-search-aside {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--top-menu-height) + var(--main-menu-height) + 30px);
  padding: 1.25em;
  background: #fff;
}

.vt-search-aside .vt-search-form {
  margin: 0;
}

.vt-search-aside .vt-search-row {
  flex-direction: column;
}

.vt-search-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-search-result {
  padding: 1.4em 0;
  border-bottom: 1px solid rgba(var(--tertiary-color-rgb), .15);
}

.vt-search-result:first-child {
  padding-top: 0;
}

/* Inhaltsart: klar zum eigenen Treffer gehörend, nicht als Fußzeile des vorigen */
.vt-search-result-type {
  margin: 0 0 .35em;
  color: var(--primary-color-text);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.vt-search-result-title {
  margin: 0 0 .2em;
  font-size: 1.25rem;
  line-height: 1.3;
}

.vt-search-result-title a {
  text-decoration: none;
}

.vt-search-result-title a:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.vt-search-result-url {
  margin: 0 0 .6em;
  color: var(--text-color-light);
  font-size: .8rem;
  word-break: break-all;
}

.vt-search-result-excerpt {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
}

/* Markierter Suchbegriff: helles Markenblau, Text Dunkelblau (12,8 : 1) */
.vt-search-results mark {
  padding: 0 .15em;
  border-radius: 2px;
  background: #cfeaf6;
  color: var(--tertiary-color-hex);
}

.vt-search-layout .section-links {
  margin-top: 2em;
}

@media (max-width: 900px) {

  .vt-search-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .vt-search-aside {
    position: static;
    padding: 0;
    background: none;
  }

}

.vt-search-empty {
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 900px) {

  .error-page #post-content {
    padding-top: 40px;
  }

  .error-page-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

}

/* Buchungs-Plugin nc-booking: Es legt seine Regeln in CSS-Layer, damit Themes es
   anpassen können — Regeln ohne Layer gewinnen dadurch immer. Die allgemeinen
   Element-Regeln dieses Themes (h2/h3, #post-content h2/li/p; bis Oktober 2026 auch
   section) überstimmten so das ganze Formular.
   revert-layer nimmt die Theme-Werte für diese Elemente zurück, dann gelten die des
   Plugins. Die Variante mit #post-content braucht es wegen der ID-Spezifität von
   #post-content h2 / li. Eigene Anpassungen am Formular über die --ncb-*-Variablen. */
.ncb-booking :is(section, h1, h2, h3, h4, p, ul, ol, li, table, thead, tbody, tr, th, td, label, abbr),
#post-content .ncb-booking :is(section, h1, h2, h3, h4, p, ul, ol, li, table, thead, tbody, tr, th, td, label, abbr) {
  all: revert-layer;
}

/* Schriftfarbe der Website statt des neutralen Plugin-Standards (#1e1e1e); Hilfstexte,
   Linien und Flächen leitet das Plugin daraus ab. */
.ncb-booking {
  --ncb-ink: var(--tertiary-color-hex);
}

/* Slider auf Unterseiten (page.php, Feld „Slider" in der Seitenleiste): statt des
   Kopfbilds, flacher als auf der Startseite — der Inhalt bleibt ohne Scrollen
   erreichbar. Die Höhe kommt hier vom Wrapper, auf der Startseite vom #above-Raster. */
.vt-page-slider {
  position: relative;
  height: 60vh;
  min-height: 380px;
}

.vt-page-slider #above-header {
  height: 100%;
}

@media (max-width: 1000px) {

  /* Mobil zeigt das Theme nur die erste Folie und blendet die Steuerung aus. Mit
     Video muss der Pause-Button bleiben (WCAG 2.2.2): oben links über dem Bild, mit
     eigenem dunklem Grund, damit er auf jedem Motiv erkennbar ist. */
  #above-slide-controls[data-has-video] {
    --slide-color: #fff;
    display: flex;
    top: calc(var(--top-menu-height) + var(--main-menu-height) + 10px);
    bottom: auto;
    left: 10px;
    padding: 6px;
    border-radius: 50%;
    background: rgba(var(--tertiary-color-rgb), .65);
  }

  #above-slide-controls[data-has-video] > :not(.above-slide-pause) {
    display: none;
  }

  /* Unterseiten: #page hat den Header-Abstand schon */
  .vt-page-slider {
    height: auto;
    min-height: 0;
  }

  .vt-page-slider #above-header {
    padding-top: 0;
  }

  .vt-page-slider #above-slide-controls[data-has-video] {
    top: 10px;
  }

}

/* Dunkle Flächen (#082430): Hier sind die hellen Markenfarben die lesbaren
   (Blau 6,3 : 1, Grün 7,0 : 1), die Textvarianten kämen nur auf 3,1 bzw. 3,6 : 1.
   Die Ebenen-Variablen einzeln setzen — --h3-color usw. sind am :root schon
   aufgelöst und folgen einem hier überschriebenen --heading-color nicht. */
#page-feature,
.service-title,
.home-section.highlight {
  --heading-color: var(--primary-color-hex);
  --h1-color: var(--primary-color-hex);
  --h2-color: var(--primary-color-hex);
  --h3-color: var(--primary-color-hex);
  --link-color: var(--primary-color-hex);
  --link-hover-color: var(--secondary-color-hex);
  --link-text-decoration-color: var(--primary-color-hex);
}


/* ---------------------------------------------------------------------------
 * Dialog „Barrierefreiheit" (12.10.2026)
 * Markup parts/a11y-dialog.php, Verhalten scripts.js, Liste vt_a11y_settings().
 * Die Einstellungen setzen data-a11y-<schlüssel> am <html> und zielen auf
 * WCAG-AAA-Kriterien, die das Standard-Design nicht für alle erfüllen kann.
 * ------------------------------------------------------------------------- */

.icon.accessibility {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='7' r='1.5' fill='black' stroke='none'/%3E%3Cpath d='M7.5 10l4.5 1l4.5 -1M12 11v3l-2.5 4M12 14l2.5 4'/%3E%3C/svg%3E");
}

/* Der Button steht zwischen Links und soll aussehen wie sie */
nav#header-top-menu .a11y-trigger {
  color: var(--top-menu-color);
}

#a11y-dialog {
  width: min(26rem, calc(100vw - 2 * var(--min-padding-side)));
  max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - var(--top-menu-height) - 1rem);
  /* Unter dem Button rechts oben statt mittig — der Bezug zum Auslöser bleibt sichtbar */
  margin: calc(var(--wp-admin--admin-bar--height, 0px) + var(--top-menu-height) + .5rem) var(--min-padding-side) auto auto;
  padding: 0;
  overflow-y: auto;
  border: 2px solid var(--tertiary-color-hex);
  border-radius: 4px;
  background: #fff;
  color: var(--tertiary-color-hex);
  box-shadow: 0 8px 32px rgb(0 0 0 / 25%);
  font-family: var(--text-font);
}

#a11y-dialog::backdrop {
  background: rgba(var(--tertiary-color-rgb), .5);
}

/* Der Inhalt füllt den Dialog ganz aus, damit ein Klick auf das <dialog>
   selbst nur vom Hintergrund kommen kann (schließt, siehe scripts.js). */
.a11y-dialog-inner {
  padding: 1rem 1.5rem 1.5rem;
}

.a11y-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#a11y-dialog-title {
  margin: 0;
  font-size: 1.5rem;
  text-align: left;
  color: var(--tertiary-color-hex);
}

.a11y-dialog-close {
  width: 44px;
  height: 44px;
  margin-right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.a11y-dialog-close > .icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
}

.a11y-dialog-intro {
  margin: .25em 0 1em;
  font-size: var(--font-size-small);
  line-height: 1.5;
}

.a11y-dialog-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.a11y-dialog-list > li {
  border-top: 1px solid rgba(var(--tertiary-color-rgb), .2);
}

/* Das ganze Label ist Klickfläche, mindestens 44 px hoch */
.a11y-dialog-option {
  min-height: 44px;
  padding: .65rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .75rem;
  align-items: start;
  cursor: pointer;
}

.a11y-dialog-option > input {
  grid-row: 1 / 3;
  width: 1.25rem;
  height: 1.25rem;
  margin: .1rem 0 0;
  accent-color: var(--tertiary-color-hex);
  cursor: pointer;
}

.a11y-dialog-label {
  font-weight: 600;
  line-height: 1.4;
}

/* #555 auf Weiß: 7,5 : 1 */
.a11y-dialog-hint {
  font-size: var(--font-size-small);
  line-height: 1.4;
  color: var(--text-color-light);
}

.a11y-dialog-footer {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
}

/* Hoher Kontrast (1.4.6 AAA: 7 : 1, erreicht 21 : 1).
   Über die Farbvariablen statt Element für Element: Inhalt Schwarz auf Weiß,
   Kopf und Fuß Weiß auf Schwarz. html[…] schlägt :root (Spezifität 0,1,1 zu
   0,1,0), deshalb lösen sich auch die abgeleiteten Variablen (--heading-color
   usw.) mit diesen Werten auf. */
html[data-a11y-contrast] {
  --primary-color-hex: #000;
  --primary-color-rgb: 0,0,0;
  --secondary-color-hex: #000;
  --secondary-color-rgb: 0,0,0;
  --tertiary-color-hex: #000;
  --tertiary-color-rgb: 0,0,0;
  --primary-color-text: #000;
  --secondary-color-text: #000;
  --gradient-end-color: #fff;
  --background-gradient-horizontal: linear-gradient(#fff, #fff);
  --background-gradient-vertical: linear-gradient(#fff, #fff);
  --text-color: #000;
  --text-color-light: #000;
  --body-background: #fff;
  --link-text-decoration: underline;
  --top-menu-background-color: #000;
  --top-menu-color: #fff;
  --top-menu-hover-color: #fff;
  --main-menu-background-color: #000;
  --main-menu-color: #fff;
  --main-menu-hover-color: #fff;
  --footer-background-color: #000;
  --footer-color: #fff;
  --footer-link-hover-color: #fff;
  --scrollbar-thumb-background: #000;
}

/* Dunkle Flächen bleiben schwarz (ihr Hintergrund ist --tertiary-color-hex);
   alles, was darauf in Markenfarbe stand, wird weiß. Wie bei der Regel für
   dunkle Flächen oben müssen die abgeleiteten Variablen einzeln gesetzt werden. */
html[data-a11y-contrast] :is(header, section#footer-main, #page-feature, a.service-item, .home-section.highlight, #post-content > .mailpoet_form, #post-scroll, .error-terminal) {
  --primary-color-hex: #fff;
  --primary-color-rgb: 255,255,255;
  --secondary-color-hex: #fff;
  --secondary-color-rgb: 255,255,255;
  --primary-color-text: #fff;
  --secondary-color-text: #fff;
  --text-color: #fff;
  --text-color-light: #fff;
  --heading-color: #fff;
  --h1-color: #fff;
  --h2-color: #fff;
  --h3-color: #fff;
  --link-color: #fff;
  --link-hover-color: #fff;
  --link-text-decoration-color: #fff;
  --button-color: #fff;
  --button-color-hover: #fff;
  --button-border-color: #fff;
  --button-border-color-hover: #fff;
  --button-background: transparent;
  --button-background-hover: transparent;
  color: #fff;
}

/* Text über Fotos und Verläufen lässt sich nicht verlässlich auf 7 : 1 bringen —
   das Foto der Folie entfällt, Text und Bedienelemente stehen auf Weiß. */
html[data-a11y-contrast] .above-background,
html[data-a11y-contrast] .above-slide > .vt-image-credit {
  display: none;
}

html[data-a11y-contrast] .above-slide :is(.above-text, .above-title, .above-subheading, .above-teaser) {
  color: #000 !important;
}

html[data-a11y-contrast] .above-slide .above-buttons > .button {
  background: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}

html[data-a11y-contrast] .above-slide .above-buttons > .button::before,
html[data-a11y-contrast] .above-slide .above-buttons > .button::after {
  background: #000 !important;
}

html[data-a11y-contrast] #above-slide-controls,
html[data-a11y-contrast] #above-slide-controls[data-has-video] {
  --slide-color: #000;
  background: #fff;
}

/* Mobil hat #kontakt eine Fläche in --primary-color-hex (jetzt Schwarz) mit
   dunkler Schrift. Weiße Karten auf Weiß bekommen einen Rahmen. */
html[data-a11y-contrast] #kontakt {
  background-color: #fff !important;
}

html[data-a11y-contrast] :is(#kontakt, .team-member-details) {
  box-shadow: inset 0 0 0 2px #000;
}

html[data-a11y-contrast] * {
  text-shadow: none !important;
}

html[data-a11y-contrast] ::placeholder {
  color: #000;
  opacity: 1;
}

/* Größere Schrift (1.4.4). Die Schriftgrößen stehen fast überall in rem/em,
   damit wächst alles mit. */
html[data-a11y-large-text] {
  font-size: 125%;
}

/* Einfache Schriftart: Systemschrift, die das Gerät ohnehin gut darstellt */
html[data-a11y-font] {
  --heading-font: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --text-font: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --main-menu-font: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --button-font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Textabstände: Werte aus 1.4.12 (AA) und 1.4.8 (AAA) — Zeilenhöhe 1,5,
   Absatzabstand das 1,5-Fache davon, Buchstaben 0,12 em, Wörter 0,16 em. */
html[data-a11y-spacing] :is(p, li, dt, dd, blockquote, td, th, figcaption, label, .above-teaser, .footer-info-text) {
  line-height: 1.6 !important;
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
}

html[data-a11y-spacing] main p {
  margin-bottom: 2.4em !important;
}

/* Kürzere Zeilen (1.4.8 AAA: höchstens 80 Zeichen, kein Blocksatz).
   Nur Fließtext — Überschriften sind teils zentriert und würden mit
   max-width aus der Mitte rutschen. */
html[data-a11y-narrow] main :is(p, li, dd, blockquote, figcaption) {
  max-width: 70ch;
}

html[data-a11y-narrow] main .has-text-align-justify {
  text-align: left;
}

/* Links unterstreichen (1.4.1). Kacheln sind ganze Links — unterstrichen wird
   nur ihr Titel, sonst stünde die Linie unter Datum, Kategorie und Anrisstext. */
html[data-a11y-underline] a:not(.button, .skip-link, #logo, .footer-logo, .above-social-background, .service-item, .post-grid-item, .category-grid-item),
html[data-a11y-underline] :is(.service-title > h3, .post-grid-item-headline, .category-grid-item-headline) {
  text-decoration: underline !important;
  text-underline-offset: .15em;
}

/* Bewegung anhalten (2.3.3) — wie bei prefers-reduced-motion oben. Slider
   und Videos hält scripts.js an (motionReduced()). */
html[data-a11y-reduce-motion] *,
html[data-a11y-reduce-motion] *::before,
html[data-a11y-reduce-motion] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Größere Bedienflächen (2.5.5 AAA: 44 × 44 px). Fließtext-Links sind vom
   Kriterium ausgenommen, Menüpunkte nicht. */
html[data-a11y-large-targets] {
  --top-menu-height: 48px;
}

html[data-a11y-large-targets] :is(.button, button, input[type="submit"], select, .header-link) {
  min-width: 44px;
  min-height: 44px;
}

html[data-a11y-large-targets] :is(input[type="checkbox"], input[type="radio"]) {
  min-width: 24px;
  min-height: 24px;
}

html[data-a11y-large-targets] nav li > a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Die Icon-Buttons sind Masken mit mask-size: contain — ohne festes Maß
   wüchse das Symbol mit der Fläche. */
html[data-a11y-large-targets] nav#header-main-menu .submenu-toggle-indicator > .submenu-toggle-icon {
  mask-size: 24px;
}

/* Desktop-Menü: Der Aufklapper hängt absolut an der rechten Kante des
   Menüpunkts (15 × 20 px). Die 44-px-Fläche um dieselbe Mitte legen, sonst
   wächst sie nach rechts unten und das Symbol rutscht unter den Text.
   Ab 1280 px ist das Menü mobil und der Aufklapper steht im Fluss. */
@media (min-width: 1281px) {

  html[data-a11y-large-targets] nav#header-main-menu > ul.menu > li.menu-item-has-children > .submenu-toggle-indicator {
    top: calc(50% - 22px);
    right: -14.5px;
  }

  html[data-a11y-large-targets] nav#header-main-menu ul.sub-menu li.menu-item-has-children > .submenu-toggle-indicator {
    top: calc(50% - 19px);
    right: 2px;
  }

  html[data-a11y-large-targets] nav#header-main-menu .submenu-toggle-indicator > .submenu-toggle-icon {
    mask-size: 15px;
  }

}

/* Punkte bleiben 15 px groß, die Klickfläche wächst über das Padding */
html[data-a11y-large-targets] #above-slide-dots {
  gap: 0;
}

html[data-a11y-large-targets] .above-slide-dot {
  box-sizing: content-box;
  padding: 14.5px;
  background-clip: content-box;
}

/* Hover bei Textlinks: Bisher wechselte nur die Farbe, und das oft gar nicht,
   weil Bereichsregeln wie `#kontakt-booking a { color: inherit }` stärker sind
   als `a:hover`. Darum zeigt jetzt die Linie den Hover an: Nicht unterstrichene
   Links werden unterstrichen, unterstrichene bekommen eine dickere Linie. Die ID
   im :is() hebt die Spezifität über die Bereichsregeln, Farben bleiben unberührt.
   Buttons, Kacheln und Icon-Links haben eigene Effekte und sind ausgenommen,
   ebenso nc-booking (eigenes Styling in @layer). */
:is(#post-content, #page-breadcrumbs, #page-info, #kontakt, #above-footer, #team, #footer-main, .error-page-suggestions, .vt-search-result-title) a:not(.button, .wp-block-button__link, .post-grid-item, .category-grid-item, .service-item, .above-social-background, .footer-logo, #kontakt-author-info, .team-member-image, .ncb-booking a):hover {
  text-decoration-line: underline;
  text-decoration-thickness: max(3px, .12em);
  text-underline-offset: .2em;
}