/*!
Theme Name: docnkSlate
Theme URI: http://underscores.me/.com/blankslate
Author: Underscores.me
Author URI: http://underscores.me/.com/blankslate#section-contributors
Description: Descriptionps://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/webguyio/blankslate/issues. Thank you.
Version: 1.0.0ility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Tested up to: 5.4
Requires PHP: 5.6: 5.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: doceral Public License v3 or Later
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
Text Domain: blankslate
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
BlankSlate is distributed under the terms of the GNU GPL
doc is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
Normalizing styles have been helped along thanks to the fine work ofion{}.alignright{}.alignleft{}.aligncenter{}
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/set(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
*/creen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#000;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
/*--------------------------------------------------------------ont-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
>>> TABLE OF CONTENTS:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}----------------------------------------------------------------# Generic	- Normalize	- Box sizing# Base	- Typography	- Elements	- Links	- Forms## Layouts# Components	- Navigation	- Posts and pages	- Comments	- Widgets	- Media	- Captions	- Galleries# plugins	- Jetpack infinite scroll# Utilities	- Accessibility	- Alignments--------------------------------------------------------------*//*--------------------------------------------------------------# Generic--------------------------------------------------------------*//* Normalize--------------------------------------------- *//*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css *//* Document	 ========================================================================== *//** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */html {	line-height: 1.15;	-webkit-text-size-adjust: 100%;}/* Sections	 ========================================================================== *//** * Remove the margin in all browsers. */body {	margin: 0;}/** * Render the `main` element consistently in IE. */main {	display: block;}/** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */h1 {	font-size: 2em;	margin: 0.67em 0;}/* Grouping content	 ========================================================================== *//** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */hr {	box-sizing: content-box;	height: 0;	overflow: visible;}/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */pre {	font-family: monospace, monospace;	font-size: 1em;}/* Text-level semantics	 ========================================================================== *//** * Remove the gray background on active links in IE 10. */a {	background-color: transparent;}/** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */abbr[title] {	border-bottom: none;	text-decoration: underline;	text-decoration: underline dotted;}/** * Add the correct font weight in Chrome, Edge, and Safari. */b,strong {	font-weight: bolder;}/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */code,kbd,samp {	font-family: monospace, monospace;	font-size: 1em;}/** * Add the correct font size in all browsers. */small {	font-size: 80%;}/** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */sub,sup {	font-size: 75%;	line-height: 0;	position: relative;	vertical-align: baseline;}sub {	bottom: -0.25em;}sup {	top: -0.5em;}/* Embedded content	 ========================================================================== *//** * Remove the border on images inside links in IE 10. */img {	border-style: none;}/* Forms	 ========================================================================== *//** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */button,input,optgroup,select,textarea {	font-family: inherit;	font-size: 100%;	line-height: 1.15;	margin: 0;}/** * Show the overflow in IE. * 1. Show the overflow in Edge. */button,input {	overflow: visible;}/** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */button,select {	text-transform: none;}/** * Correct the inability to style clickable types in iOS and Safari. */button,[type="button"],[type="reset"],[type="submit"] {	-webkit-appearance: button;}/** * Remove the inner border and padding in Firefox. */button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {	border-style: none;	padding: 0;}/** * Restore the focus styles unset by the previous rule. */button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {	outline: 1px dotted ButtonText;}/** * Correct the padding in Firefox. */fieldset {	padding: 0.35em 0.75em 0.625em;}/** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out *		`fieldset` elements in all browsers. */legend {	box-sizing: border-box;	color: inherit;	display: table;	max-width: 100%;	padding: 0;	white-space: normal;}/** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */progress {	vertical-align: baseline;}/** * Remove the default vertical scrollbar in IE 10+. */textarea {	overflow: auto;}/** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */[type="checkbox"],[type="radio"] {	box-sizing: border-box;	padding: 0;}/** * Correct the cursor style of increment and decrement buttons in Chrome. */[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {	height: auto;}/** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */[type="search"] {	-webkit-appearance: textfield;	outline-offset: -2px;}/** * Remove the inner padding in Chrome and Safari on macOS. */[type="search"]::-webkit-search-decoration {	-webkit-appearance: none;}/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */::-webkit-file-upload-button {	-webkit-appearance: button;	font: inherit;}/* Interactive	 ========================================================================== *//* * Add the correct display in Edge, IE 10+, and Firefox. */details {	display: block;}/* * Add the correct display in all browsers. */summary {	display: list-item;}/* Misc	 ========================================================================== *//** * Add the correct display in IE 10+. */template {	display: none;}/** * Add the correct display in IE 10. */[hidden] {	display: none;}/* Box sizing--------------------------------------------- *//* Inherit box-sizing to more easily change it's value on a component level.@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */*,*::before,*::after {	box-sizing: inherit;}html {	box-sizing: border-box;}/*--------------------------------------------------------------# Base--------------------------------------------------------------*//* Typography--------------------------------------------- */body,button,input,select,optgroup,textarea {	color: #404040;	font-family: 'DOCArticulate', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;	font-size: 1rem;	line-height: 1.5;}h1,h2,h3,h4,h5,h6 {	clear: both;}p {	margin-bottom: 1.5em;}dfn,cite,em,i {	font-style: italic;}blockquote {	margin: 0 1.5em;}address {	margin: 0 0 1.5em;}pre {	background: #eee;	font-family: "Courier 10 Pitch", courier, monospace;	line-height: 1.6;	margin-bottom: 1.6em;	max-width: 100%;	overflow: auto;	padding: 1.6em;}code,kbd,tt,var {	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;}abbr,acronym {	border-bottom: 1px dotted #666;	cursor: help;}mark,ins {	background: #fff9c0;	text-decoration: none;}big {	font-size: 125%;}/* Elements--------------------------------------------- */body {	background: #fff;}hr {	background-color: #ccc;	border: 0;	height: 1px;	margin-bottom: 1.5em;}ul,ol {	margin: 0 0 1.5em 3em;}ul {	list-style: disc;}ol {	list-style: decimal;}li > ul,li > ol {	margin-bottom: 0;	margin-left: 1.5em;}dt {	font-weight: 700;}dd {	margin: 0 1.5em 1.5em;}/* Make sure embeds and iframes fit their containers. */embed,iframe,object {	max-width: 100%;}img {	height: auto;	max-width: 100%;}figure {	margin: 1em 0;}table {	margin: 0 0 1.5em;	width: 100%;}/* Links--------------------------------------------- */a {
  color: #000;
  text-decoration: none;
}

/* Font Definitions */
/* wird in der header.php geladen
} */

/* CSS variable for easy reuse and predictable overrides */
:root {
  --doc-font: 'DOCArticulate', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --subnav-height: 34px;
  --swiper-theme-color: #000;
  --swiper-navigation-color: #000;
  --swiper-pagination-color: #000;
  --swiper-pagination-bullet-border-radius: 0;
  --swiper-pagination-bullet-height: 4px;
  --swiper-pagination-bullet-width: 4px;
  
  /* Breakpoints als Custom Properties */
  --bp-mobile-max: 768px;
  --bp-tablet-min: 769px;
  --bp-tablet-max: 992px;
  --bp-desktop-min: 993px;
  
  /* Spacing */
  --container-padding-mobile: 15px;
  --container-padding-desktop: 20px;
  --container-max-width: 1265px;

  /* Typography: responsive font sizes */
  --font-size-normal: 14px;
  --font-size-small: 10px;

  /* Make vertical gutter equal to horizontal (20px) */
  --masonry-gutter: 40px;
}

a:visited {
  color: #000;
}

a:hover,
a:focus,
a:active {
  color: #FF7C40;
}

/* Global custom cursor: 8x8 orange circle */
:root {
  --cursor-orange: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='%23FF7C40'/></svg>") 5 5, auto;
}

/* Apply everywhere */
html, body, * {
  cursor: var(--cursor-orange) !important;
}

/* Keep I‑beam for text inputs/areas */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea {
  cursor: text !important;
}

/* Forms--------------------------------------------- */button,input[type="button"],input[type="reset"],input[type="submit"] {	border: 1px solid;	border-color: #ccc #ccc #bbb;	border-radius: 3px;	background: #e6e6e6;	color: rgba(0, 0, 0, 0.8);	line-height: 1;	padding: 0.6em 1em 0.4em;}button:hover,input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover {	border-color: #ccc #bbb #aaa;}button:active,button:focus,input[type="button"]:active,input[type="button"]:focus,input[type="reset"]:active,input[type="reset"]:focus,input[type="submit"]:active,input[type="submit"]:focus {	border-color: #aaa #bbb #bbb;}input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="search"],input[type="number"],input[type="tel"],input[type="range"],input[type="date"],input[type="month"],input[type="week"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="color"],textarea {	color: #666;	border: 1px solid #ccc;	border-radius: 3px;	padding: 3px;}input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="number"]:focus,input[type="tel"]:focus,input[type="range"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="week"]:focus,input[type="time"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="color"]:focus,textarea:focus {	color: #111;}select {	border: 1px solid #ccc;}textarea {	width: 100%;}/*--------------------------------------------------------------# Layouts--------------------------------------------------------------*//*--------------------------------------------------------------# Components--------------------------------------------------------------*//* Navigation--------------------------------------------- */.main-navigation {	display: block;	width: 100%;}.main-navigation ul {	display: none;	list-style: none;	margin: 0;	padding-left: 0;}.main-navigation ul ul {	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);	float: left;	position: absolute;	top: 100%;	left: -999em;	z-index: 99999;}.main-navigation ul ul ul {	left: -999em;	top: 0;}.main-navigation ul ul li:hover > ul,.main-navigation ul ul li.focus > ul {	display: block;	left: auto;}.main-navigation ul ul a {	width: 200px;}.main-navigation ul li:hover > ul,.main-navigation ul li.focus > ul {	left: auto;}.main-navigation li {	position: relative;}.main-navigation a {	display: block;	text-decoration: none;}/* Small menu. */.menu-toggle,.main-navigation.toggled ul {	display: block;}@media screen and (min-width: 37.5em) {	.menu-toggle {		display: none;	}	.main-navigation ul {		display: flex;	}}.site-main .comment-navigation,.site-main.posts-navigation,.site-main.post-navigation {	margin: 0 0 1.5em;}.comment-navigation .nav-links,.posts-navigation .nav-links,.post-navigation .nav-links {	display: flex;}.comment-navigation .nav-previous,.posts-navigation .nav-previous,.post-navigation .nav-previous {	flex: 1 0 50%;}.comment-navigation .nav-next,.posts-navigation .nav-next,.post-navigation .nav-next {	text-align: end;	flex: 1 0 50%;}/* Posts
/* Tabellen-Layout / klickbare Zeilen */
.project-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.project-table thead th {
  text-transform: uppercase;
  font-size: var(--font-size-small);
  padding: 10px;
  text-align: left;
  font-weight: 600;
}

.project-table tbody tr {
  border-bottom: 1px solid #000; /* schwarze 1px Linie zwischen Zeilen */
}

.project-table td,
.project-table th {
  padding: 12px 10px;
  font-size: var(--font-size-normal);
}

/* Deaktivierte Zeilen: grauer Text, kein Hover, nicht klickbar */
tr.disabled-row {
  color: #999;
  cursor: default;
  pointer-events: none;
}

tr.disabled-row td {
  color: #999;
}

tr.disabled-row a {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

/* Hover nur für klickbare Zeilen */
tr.clickable-row:hover td {
  cursor: pointer;
  color: #FF7C40;
}

/* Zeilen-Hover: alle Texte orange (inkl. Links) */
.project-table tbody tr.clickable-row:hover td {
  color: #FF7C40 !important;
}

.project-table tbody tr.clickable-row:hover td a {
  color: #FF7C40 !important;
}

/* Mobile: nur Projekt und Status anzeigen */
@media (max-width: 768px) {
  .project-table thead th.col-status,
  .project-table td.col-status,
  .entry-info-table thead th.col-status,
  .entry-info-table td.col-status {
    display: none;
  }

  .project-table thead th.col-projekt,
  .project-table td.col-projekt,
  .project-table thead th.col-jahr,
  .project-table td.col-jahr {
    display: table-cell;
  }
}

/* Fokus-Styling für Tastatur-Zugänglichkeit */
tr.clickable-row:focus {
  outline: 3px solid rgba(0,0,0,0.15);
  outline-offset: -3px;
}

/* Global container width */
.container-fluid,
.project-list {
  max-width: 1265px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Global image styles */
img {
}

/* Project item styles */
.project-list-selection__item {
  position: relative;
}

.project-list-selection__item img {
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.project-list-selection__item:hover img {
  filter: grayscale(0);
}

/* Title always occupies space under the image, but is initially hidden (visibility keeps layout) */
.project-list-selection__desc {
  display: block;
  visibility: hidden; /* Raum bleibt erhalten */
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  text-align: left;
  padding-top: 7px;
  font-size: var(--font-size-small);
  min-height: 40px; /* Reservierter Platz, verhindert Verspringen - anpassen falls nötig */
  line-height: 1;
}

/* On hover/focus show title and image full color */
.project-list-selection__item:hover img,
.project-list-selection__item:focus-within img {
  filter: grayscale(0);
}

.project-list-selection__item:hover .project-list-selection__desc,
.project-list-selection__item:focus-within .project-list-selection__desc {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s;
}

/* Mobile & Tablet: Titel komplett ausblenden */
@media (max-width: 992px) {
  .project-list-selection__desc {
    display: none !important;
  }
  
  .project-list-selection__item {
    min-height: auto; /* kein reservierter Platz mehr nötig */
  }
}

/* Projektliste: Videos wie Bilder stylen */
.project-list__inner img,
.project-list__inner video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Zentrierung in Slides ist bereits definiert; hier nur für Liste nötig */
.project-list__inner .project-media {
  margin: 0 auto;
}

.project-list__inner .project-media.is-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16; /* oder 9 / 16 für Standard-Portrait */
  object-fit: cover;
  background: #E9E9E9; /* Placeholder bis Video lädt */
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

/* Bei Hover: farbig */
.project-list-selection__item:hover .project-media.is-video {
  filter: grayscale(0%);
}

/* Falls Bilder noch nicht grayscale haben: */
.project-list__inner .project-media {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.project-list-selection__item:hover .project-media {
  filter: grayscale(0%);
}

/* Global styles */
body {
  font-size: var(--font-size-normal);
  line-height: 1.4;
  color: #000;
}

a:hover {
  color: #FF7C40;
}

#branding {
  grid-column: 1 / 2;
  justify-self: start;
}

/* Header-Ausrichtung: #menu zentriert, #projekte-sub rechts */
#menu {
  grid-column: 2 / 3;
  justify-self: center;
}

#menu ul {
  justify-content: center; /* Menüpunkte im Container zentrieren */
}

#projekte-sub {
  grid-column: 3 / 4;
  justify-self: end; /* Container rechts im Grid */
}

#projekte-sub ul {
  justify-content: flex-end; /* Items innerhalb rechtsbündig */
  text-align: right;
}

#projekte-sub a {
  color: #A6A6A6;
  text-decoration: none;
  display: inline-block;
  padding: 20px; /* gleicher Padding wie aktiver Zustand - verhindert Verspringen */
  border-radius: 100px;
  padding-left: 20px;
  padding-right: 20px;
}

#projekte-sub .current-menu-item > a,
#projekte-sub .current-category-ancestor > a {
  background-color: #E9E9E9;
  color: inherit;
  border-radius: 100px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Header: beim Scrollen fixiert (sticky), transparenter Hintergrund, bleibt in Flow */
#header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: transparent;
  width: 100%;
  display: block;
  margin-bottom: 12.5vh;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* Branding | Menu | Projekte-Sub */
  align-items: center;
  gap: 20px;
  max-width: var(--container-max-width); /* 1265px */
  margin: 0 auto;
  padding: 40px var(--container-padding-desktop) 0;
}

/* Fallback / explizites Mobile-Override falls gewünscht */
@media (max-width: 768px) {
  body {
    font-size: var(--font-size-normal);
  }

  #header {
    margin-bottom: 0;
  }

  #projekte-sub .projekte-sub__menu li {
    display: flex;
    align-items: center;
  }

  #projekte-sub .projekte-sub__menu li a {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  /* Text komplett verstecken */
  #projekte-sub .projekte-sub__menu li a {
    font-size: 0;
    color: transparent;
  }

  /* Default icon für alle Items */
  #projekte-sub .projekte-sub__menu li a:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0;
  }

  /* menu-item-70 (Auswahl) → icon-grid.png */
  #projekte-sub .projekte-sub__menu li.menu-item-70 a:before {
    background-image: url('assets/icons/icon-grid.svg');
  }

  /* menu-item-71 (Liste) → icon-liste.png */
  #projekte-sub .projekte-sub__menu li.menu-item-71 a:before {
    background-image: url('assets/icons/icon-liste.svg');
  }

  /* Aktiver Zustand: behält das jeweilige Icon */
  #projekte-sub .projekte-sub__menu li.menu-item-70.current-menu-item a:before,
  #projekte-sub .projekte-sub__menu li.menu-item-70.current-category-ancestor a:before {
    background-image: url('assets/icons/icon-grid.svg');
  }

  #projekte-sub .projekte-sub__menu li.menu-item-71.current-menu-item a:before,
  #projekte-sub .projekte-sub__menu li.menu-item-71.current-category-ancestor a:before {
    background-image: url('assets/icons/icon-liste.svg');
  }
}

/* Main Menu Styles */
#menu ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 55px;
}

/* Aktiver Zustand für Hauptmenü-Items (allgemein: current item / ancestor) */
#menu .current-menu-item > a,
#menu .current-menu-ancestor > a,
body.category .menu-item-projekte > a,
body.has-projekte-sub .menu-item-projekte > a {
  color: #FF7C40;
}

/* Projekte Sub Menu Styles */
#projekte-sub ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}

#projekte-sub li a {
  color: #A6A6A6;
  padding: 7px 20px;
  border-radius: 100px;
  display: inline-block;
}

#projekte-sub .current-menu-item a,
#projekte-sub .current-category-ancestor a {
  background-color: #E9E9E9;
  color: #A6A6A6;
}

/* Entry Carousel Styles */
.entry-carousel {
    margin-bottom: 2rem;
}

.swiper {
    width: 100%;
    max-width: 1265px; /* max width */
    margin: 0 auto; /* center */
    overflow: hidden;
    padding-left: 20px;
    padding-right: 20px;
}

.swiper-slide img,
.swiper-slide video {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
}

/* Desktop: slides mit max 70vh Höhe */
@media (min-width: 769px) {
  .swiper { 
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .swiper-wrapper, 
  .swiper-slide { 
    height: 100%;
  }

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

  .swiper-slide img,
  .swiper-slide video {
    max-height: 70vh;
    object-fit: contain;
    margin: 0 auto;
  }
}

/* Mobile: natürliche Höhe */
@media (max-width: 768px) {
  .swiper { 
    height: auto;
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }
  
  .swiper-wrapper, 
  .swiper-slide { 
    height: auto; 
  }
  
  .swiper-slide img
  .swiper-slide video { 
    width: 100%; 
    height: auto; 
    object-fit: cover; 
  }
}

/* Optional: falls Layout-Anpassung nötig, main container full width */
#container, .content, #content {
  width: 100%;
  max-width: none;
}

/* Site title: Desktop vs Mobile Varianten */
.site-title__desktop { display: none; }
.site-title__mobile  { display: inline; }

@media (min-width: 769px) {
  .site-title__desktop { display: inline; }
  .site-title__mobile  { display: none; }
}

/* Ensure global usage of DOCArticulate */
body, button, input, select, optgroup, textarea {
  font-family: var(--doc-font);
}

/* Footer menu: horizontal, left-aligned, same active state as main menu */
#footer-menu {
  margin-top: 1rem;
}

#footer-menu .footer-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 55px;           /* gleiche Abstände wie main-menu */
  align-items: center;
  justify-content: flex-start; /* linksbündig */
  flex-wrap: nowrap;   /* nicht untereinander umbrechen */
  overflow-x: auto;    /* bei sehr engen Viewports horizontal scrollen */
}

/* Links styling: wie im main-menu (keine Unterstreichung, schwarze Farbe, Hover orange) */
#footer-menu .footer-menu li a {
  color: #000;
  text-decoration: none;
  display: inline-block;
  padding: 0; /* falls main-menu nutzt kein extra padding */
}

/* Hover / Fokus */
#footer-menu .footer-menu li a:hover,
#footer-menu .footer-menu li a:focus {
  color: #FF7C40;
}

/* Aktiver Zustand - gleiche Hervorhebung wie main-menu */
#footer-menu .footer-menu .current-menu-item > a,
#footer-menu .footer-menu .current-menu-ancestor > a {
  color: #FF7C40;
}

/* Optional: etwas Abstand rechts einbauen, falls Footer-Layout das benötigt */
#footer-menu .footer-menu li:not(:last-child) {
  margin-right: 0;
}

/* Footer: gleiche max-width wie header und 60px Abstand nach unten */
#footer {
  background: transparent;
  padding-top: 30px;
  padding-bottom: 60px;
  margin-top: 30px;
}

#footer .container-fluid {
  max-width: 1265px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Footer menu left-aligned already handled, ensure it does not wrap unexpectedly */
#footer-menu .footer-menu {
  justify-content: flex-start;
  gap: 55px;
  flex-wrap: nowrap;
}

/* Ensure header remains clickable and visible on top of other elements */
#header * {
  position: relative;
  z-index: 1;
}

/* Keep pagination at the bottom (undo earlier 50% centering for it) to avoid overlay issues; no other layout shift. */
.swiper .swiper-pagination {
  position: static !important;
  margin-top: 16px;
}

/* Alte bottom-Positionierung deaktivieren */
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: auto !important;
  top: auto !important;
}

/* Desktop: Carousel passt sich der Bildhöhe an, Bullets darunter */
@media (min-width: 769px) {
  .swiper {
    height: auto !important;
    max-height: none !important;
    display: block; /* verhindert Flex-Nebeneffekt */
  }
  .swiper-wrapper,
  .swiper-slide {
    height: auto !important;
  }
}

/* Entry info table: Linie oben */
.entry-info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0 0;
  border-top: 1px solid #000; /* Linie über der Tabelle */
}

.entry-info-table tbody tr {
  border-bottom: 1px solid #000;
}

.entry-info-table td {
  padding: 12px 10px;
  font-size: var(--font-size-normal);
}

/* Entry data field: gleiche Linie darunter */
.entry-data {
  padding: 12px 0;
  border-bottom: 1px solid #000;
  font-size: var(--font-size-normal);
}

/* Swiper navigation: schwarz, kein Hintergrund/Border */
.swiper-button-next,
.swiper-button-prev {
  color: #000;
  background: none;
  border: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}

/* Swiper arrows: use custom SVG, 20px high, auto width; prev mirrored */
.swiper-button-next::after,
.swiper-button-prev::after {
  content: "";
  display: inline-block;
  height: 30px;
  aspect-ratio: 10.39 / 19.62; /* width auto via aspect-ratio */
  width: auto;
  background: center / contain no-repeat url('assets/icons/carousel_arrow.svg');
  font-size: 0 !important; /* override default icon size */
}

/* mirror the same icon for prev */
.swiper-button-prev::after {
  transform: scaleX(-1);
  transform-origin: center;
}

/* Swiper slide caption: gleicher Stil wie .project-list-selection__desc */
.swiper-slide-caption {
  display: block;
  text-align: left;
  padding: 8px 0;
  font-size: 14px;
  color: #000;
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px 10px;
  border-radius: 3px;
  text-align: center;
}

/* Desktop: caption fix positioning */
@media (min-width: 769px) {
  .swiper-slide-caption {
    position: static;
    background: transparent;
    padding: 8px 0;
  }
}

.entry-info-table .col-nr,
.project-table .col-nr {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.entry-info-table .col-jahr,
.project-table .col-jahr {
  padding-right: 0 !important;
  margin-right: 0 !important;
  text-align: right !important;
}

/* Typography: normalize site title size regardless of heading level */

h1 {
  font-size: var(--font-size-normal);
  line-height: 1.2;
}

#site-title h1 {
  display: inline;
}

/* Grid-Positionen der Kinder */
#branding { grid-column: 1 / 2; justify-self: start; }
#menu     { grid-column: 2 / 3; justify-self: center; }
#projekte-sub { grid-column: 3 / 4; justify-self: end; }

#menu ul { justify-content: center; }
#projekte-sub ul { justify-content: flex-end; text-align: right; }

/* Verhindert Layout-Sprung bei (De-)Erscheinen der vertikalen Scrollbar */
html {
  scrollbar-gutter: stable both-edges; /* modern: Platz reservieren, zentriert bleibt stabil */
}

/* Fallback für Browser ohne scrollbar-gutter */
@supports not (scrollbar-gutter: stable) {
  html, body {
    overflow-y: scroll; /* immer vertikale Scrollbar reservieren */
  }
}

/* Entry image: gleiche Behandlung wie Swiper-Slides */
.entry-image {
  max-width: 1265px;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
}

.entry-image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* ==========================================================================
   MOBILE STYLES (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
  #branding,
  #menu,
  #projekte-sub {
    grid-column: 1;
    justify-self: start;
  }
  
  #menu ul,
  #projekte-sub ul {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  /* Mobile Header: Elemente in einer Zeile */
  .header-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px var(--container-padding-mobile) 40px;
  }

  #branding,
  #menu,
  #projekte-sub {
    flex: 1;
    justify-self: center;
  }

  #menu ul,
  #projekte-sub ul {
    flex-direction: row;
    gap: 15px;
    align-items: center;
  }
  
  /* Tabellen: nur Projekt + Status */

  .entry-info-table thead th.col-status,
  .entry-info-table td.col-status {
    display: none;
  }
  
  /* Footer: Stack-Layout -> Row-Layout für Menu */
  #footer .container-fluid {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  #footer-menu .footer-menu {
    flex-direction: row; /* Eine Zeile statt column */
    gap: 20px; /* Etwas kleinerer Gap als Desktop */
    flex-wrap: wrap; /* Falls zu viele Items, umbrechen */
  }
  
  /* Site title: Mobile-Variante */
  .site-title__desktop { display: none; }
  .site-title__mobile  { display: inline; }
  
  /* Swiper: natürliche Höhe */
  .swiper { 
    height: auto; 
  }
  
  .swiper-wrapper, 
  .swiper-slide { 
    height: auto; 
  }
  
  .swiper-slide { 
    display: block; 
  }
  
  .swiper-slide img { 
    width: 100%; 
    height: auto; 
    object-fit: cover; 
  }
  
  /* Entry image: volle Breite */
  .entry-image {
    height: auto;
  }
  
  .entry-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* ==========================================================================
   TABLET STYLES (769px - 992px)
   ========================================================================== */

@media (min-width: 769px) and (max-width: 992px) {
  :root {
    --font-size-normal: 18px;
    --font-size-small: 12px;
  }
}

/* ==========================================================================
   DESKTOP STYLES (min-width: 993px)
   ========================================================================== */

@media (min-width: 993px) {

  :root {
    --font-size-normal: 20px;
    --font-size-small: 14px;
  }
  
  /* Site title: Desktop-Variante */
  .site-title__desktop { display: inline; }
  .site-title__mobile  { display: none; }
  
  /* Swiper: viewport height mit max 70vh */
  .swiper { 
    height: 100vh;
    max-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .swiper-wrapper, 
  .swiper-slide { 
    height: 100%;
  }

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

  .swiper-slide.portrait img,
  .swiper-slide.portrait video {
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 55vh;
    object-fit: contain;
    margin: 0 auto;
  }

  .swiper-slide.landscape img,
  .swiper-slide.landscape video {
    width: 100%;
    height: auto;
    max-height: 55vh;
    object-fit: contain;
    margin: 0 auto;
  }
  
  /* Entry image: zentriert, max 70vh */
  /* .entry-image {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 70vh;
  }
  
  .entry-image img {
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
  } */
  
  /* Swiper caption: static positioning */
  .swiper-slide-caption {
    position: static;
    background: transparent;
    padding: 8px 0;
  }
}

/* Project table: Linie unter dem Kopf */
.project-table {
  border-collapse: collapse;
}

.project-table thead tr {
  border-bottom: 1px solid #000;
}

/* Tabellenkopf: Linie unten (falls noch nicht gesetzt) */
.project-table thead tr { border-bottom: 1px solid #000; }

/* Mobile: nur Projekt + Status anzeigen (Typ ausblenden) */
@media (max-width: 768px) {
  .project-table thead th.col-typ,
  .project-table td.col-typ {
    display: none;
  }
}

/* Sticky Footer Layout */
html, body {
  height: 100%;
}

#wrapper {
  min-height: 100vh;   /* Fallback */
  min-height: 100svh;  /* stabiler auf Mobile */
  display: flex;
  flex-direction: column;
}

main#content,
section.content,
.site-content,
#primary {
  flex: 1 0 auto;      /* Inhalt füllt den Raum */
}

#footer {
  margin-top: auto;    /* Footer an das Seitenende schieben */
  flex-shrink: 0;
}

.is-hidden {
  opacity: 0;
}

/* Page two-column layout: featured image left, content right */
.page-two-col {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.page-media {
  flex: 0 0 35%;
  max-width: 35%;
}

.page-media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.page-two-col .entry-content {
  flex: 1 1 0%;
  min-width: 0;
}

/* Mobile: stack */
@media (max-width: 768px) {
  .page-two-col {
    flex-direction: column;
    gap: 20px;
  }
  .page-media {
    flex: 0 0 auto;
    max-width: 100%;
  }
}

/* Swiper: mehr Abstand zwischen Bullets und Bild */
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 24px; /* vorher ~10px */
}

@media (max-width: 768px) {
  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 18px;
  }
}

/* Swiper: 20px Padding links/rechts */
.swiper {
  padding-left: 20px;
  padding-right: 20px;
}

/* Mobile: weniger Padding */
@media (max-width: 768px) {
  .swiper {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }
}

/* ---- Masonry (JS) compatible CSS for .project-list ----
   Replace the previous grid/column-count rules with these.
   .grid-sizer + floated items: Masonry will use .grid-sizer as columnWidth.
*/
.project-list__inner {
  display: block !important; /* allow Masonry to position children */
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

/* default mobile: 1 column (100%) */
.project-list__inner .grid-sizer,
.project-list__inner .project-list-selection__item {
  float: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
  
  display: block;
  vertical-align: top;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 40px;  
}

/* Tablet: 2 columns (50%) */
@media (min-width: 769px) and (max-width: 992px) {
  .project-list__inner .grid-sizer,
  .project-list__inner .project-list-selection__item {
    width: calc(50% - 20px) !important;
    
  }
}

@media (min-width: 769px) {
  .project-list__inner .grid-sizer,
  .project-list__inner .project-list-selection__item {
   /* padding: 0 1%;  ergibt ~2% Gesamtzwischenraum */
    box-sizing: border-box;
    padding: 0;
  }

  .project-list__inner {
    /* margin-left: -1%;
    margin-right: -1%; */
    margin: 0;
    padding: 0;
  }
}

/* Desktop: 3 columns (33.333%) */
@media (min-width: 993px) {
  .project-list__inner .grid-sizer,
  .project-list__inner .project-list-selection__item {
    width: 33.333333% !important;
    width: calc(33.333% - 26.67px) !important;
    margin: 0 !important;
    /* width: calc(33.333% - 14px) !important; /* 3 Spalten mit 20px Gutter 
    margin-right: 20px;
    margin-bottom: 20px; */
  }

  
}

/* Ensure inner content fits the item */
.project-list__inner .project-list-selection__item > * {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.project-list__inner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* optional: smaller vertical gutter on narrow desktops */
@media (min-width: 993px) and (max-width: 1200px) {
  .project-list__inner .project-list-selection__item { margin-bottom: 16px; }
}

/* Swiper Lazy Loading Spinner */
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s infinite linear;
  border: 4px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: #000;
}

@keyframes swiper-preloader-spin {
  100% { transform: rotate(360deg); }
}

.swiper-lazy-loading { opacity: 0.5; }
.swiper-lazy-loaded { opacity: 1; transition: opacity 0.3s; }

.page-id-2 .entry-content {
  max-width: 800px;
  margin: 0 auto;
}