/*
Theme Name: Golflover 2027
Theme URI: https://golflover.com
Description: Golf
Version: 7.5
Author: Klaus Oppermann
Author URI: https://www.klausoppermann.de/
*/

/* ==========================================================================
   1. FONTS
   ========================================================================== */

/* playfair-display-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/playfair-display-v30-latin-regular.woff2') format('woff2');
}

/* playfair-display-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/playfair-display-v30-latin-700.woff2') format('woff2');
}

/* source-sans-3-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/source-sans-3-v9-latin-regular.woff2') format('woff2');
}

/* source-sans-3-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/source-sans-3-v9-latin-700.woff2') format('woff2');
}

/* oswald-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/oswald-v49-latin-regular.woff2') format('woff2');
}

/* oswald-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/oswald-v49-latin-500.woff2') format('woff2');
}


/* ==========================================================================
   2. CUSTOM PROPERTIES & VARIABLES
   ========================================================================== */

:root {
  --body-bg: #fff;

  --weiss: #fff;
  --hell: #F6F6F6;
  --medium: #558000;
  --dunkel: #4A7300;
  --dunkel-2: #02132C;
  --schwarz: #000;

  --vibrant: #98D518;
  --on-vibrant: #000;
  --vibrant-hov: #75A70B;
  --on-vibrant-hov: #fff;

  --warning: #BB2F0C;
  --success: #75A70B;
  --hallo: #98D518;

  --verlauf-medium: linear-gradient(0deg, #cccccc 0%, #f5f5f5 100%);
  --gradient: linear-gradient(135deg, var(--medium) 0%, var(--vibrant) 100%);

  --trans-dunkel--1: rgba(0,0,0,0.05);
  --trans-dunkel-1: rgba(0,0,0,0.1);
  --trans-dunkel-2: rgba(0,0,0,0.2);
  --trans-dunkel-3: rgba(0,0,0,0.3);
  --trans-dunkel-4: rgba(0,0,0,0.4);
  --trans-dunkel-6: rgba(0,0,0,0.6);
  --trans-dunkel-8: rgba(0,0,0,0.8);
  --trans-dunkel-9: rgba(0,0,0,0.9);

  --trans-hell-1: rgba(255,255,255,0.1);
  --trans-hell-2: rgba(255,255,255,0.2);
  --trans-hell-4: rgba(255,255,255,0.4);
  --trans-hell-5: rgba(255,255,255,0.5);
  --trans-hell-6: rgba(255,255,255,0.6);
  --trans-hell-7: rgba(255,255,255,0.7);
  --trans-hell-8: rgba(255,255,255,0.8);

  /* Fluid Typography (Utopia) */
  --step--2: clamp(0.78rem, calc(0.77rem + 0.05vw), 0.84rem);
  --step--1: clamp(0.94rem, calc(0.81rem + 0.63vw), 1.1rem);
  --step-0: clamp(1.00rem, calc(0.80rem + 0.98vw), 1.20rem);
  --step-1: clamp(1.07rem, calc(0.79rem + 1.41vw), 1.5rem);
  --step-2: clamp(1.14rem, calc(0.75rem + 1.93vw), 2.25rem);
  --step-3: clamp(1.22rem, calc(0.70rem + 2.58vw), 2.70rem);
  --step-4: clamp(1.30rem, calc(0.62rem + 3.38vw), 3.24rem);
  --step-5: clamp(1.38rem, calc(0.51rem + 4.36vw), 3.89rem);
  --step-6: clamp(1.48rem, calc(0.37rem + 5.55vw), 6.67rem);

  --but-pad: 1em 1.5em;
  --min: 30ch;
  --max: 45ch;
  --gap: 2.5rem;
  --golfball: calc(100% - 25px);

  --mwidth: 68rem;
  --bigwidth: 90rem;
  --biggerwidth: 100rem;
  --fullwidth: 120rem;

  --font-text: 'Source Sans 3', Arial, Verdana, Helvetica, sans-serif;
  --font-headlines: 'Playfair Display', Arial, Verdana, Helvetica, sans-serif;
  --font-secondary: Oswald, Arial, Verdana, Helvetica, sans-serif;
}


/* ==========================================================================
   3. MODERN RESET & BASE
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  background: var(--dunkel-2);
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  background: var(--body-bg);
  color: var(--dunkel-2);
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.7;
  text-align: start;
  position: relative;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

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

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

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a, a:hover, a:focus {
  color: var(--dunkel);
  text-decoration: underline;
}

a:hover, a:focus {
  color: var(--dunkel-2);
  text-decoration: none;
}

a.break {
  word-break: break-all;
  overflow-wrap: break-word;
  hyphens: auto;
}

a[href$=".pdf"] {
  background: var(--vibrant);
  color: var(--weiss);
  padding: 0 5px;
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

a.icon-mobile {
  text-decoration: none;
  cursor: text;
}

address {
  margin: 15px 0;
  font-style: normal;
}

code {
  font-family: 'Courier New', Courier, monospace;
  font-style: normal;
}

cite, em {
  font-style: italic;
}

small {
  font-size: var(--step--1);
  line-height: 1.4;
  font-style: italic;
}

strong {
  font-family: var(--font-secondary);
  font-weight: 500;
}

sup, sub {
  font-size: var(--step--1);
  height: 0;
  line-height: 1;
  vertical-align: baseline;
  position: relative;
}
sup { top: -0.35rem; }
sub { bottom: -0.25rem; }

pre {
  margin: 15px 0;
  overflow: auto;
}
pre a { font-weight: 400; }

hr {
  background: var(--trans-dunkel-2);
  border: none;
  color: transparent;
  clear: both;
  display: block;
  height: 0;
  margin: 25px 0;
  padding: 1px 0 0 0;
}
hr.abstand {
  background: transparent;
  margin: 35px 0;
}


/* ==========================================================================
   4. TYPOGRAPHY & HEADINGS
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--dunkel-2);
  font-family: var(--font-headlines);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.5em auto 1em auto;
  text-align: center;
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--step-5);
  letter-spacing: 1px;
  line-height: 1.1;
  margin: 1em auto;
  font-weight: 700;
  max-width: 30ch;
}
h1 b {
  display: inline-block;
  font-size: var(--step-5);
  letter-spacing: 1px;
  font-style: normal;
}
h1 span, h1 em {
  display: block;
  font-size: var(--step-2);
  margin: 0.5em auto 0 auto;
  font-style: normal;
}

h2, .h2 { font-size: var(--step-4); line-height: 1.1; max-width: 35ch; }
h3, .h3 { font-size: var(--step-3); max-width: 45ch; }
h4, .h4 { font-size: var(--step-2); }
h5, .h5 { font-size: var(--step-1); }
h6, .h6 { font-size: var(--step-0); }

h4, .h4, h5, .h5, h6, .h6 {
  margin-inline: auto;
  max-width: 70ch;
}

h1 a, h2 a, h3 a, h4 a, h5 a,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {
  text-decoration: none;
}

p { margin: 1.5em 0; text-align:left;}
p.frame { margin: 0; }
p:empty { margin: 0; padding: 0; }

p a, ul li a, ol li a { position: relative; }

p.absatzz {
  clear: both;
  display: flow-root;
  margin: 1.5em 0;
  position: relative;
  padding-left: 45px;
}
p.absatzz::before {
  color: rgba(0,0,0,0.1);
  content: attr(data-first_letter);
  display: block;
  font-family: var(--font-headlines);
  font-size: var(--step-6);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  inset: -25px 0 0 -20px;
}

p.init:first-letter {
  initial-letter: 3 3;
  font-family: var(--font-headlines);
  font-size: var(--step-6);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  margin-right: 1rem;
}

blockquote {
  background: var(--weiss);
  border: 12px double var(--vibrant);
  border-radius: 0;
  color: var(--schwarz);
  display: grid;
  place-items: center;
  font-size: var(--step-0);
  margin: 3em auto;
  padding: 2.5em;
  position: relative;
  isolation: isolate;
}
blockquote h2, blockquote h3 {
  margin: 10px auto;
  padding: 0;
  text-align: center;
}
blockquote p { margin-inline: auto; }


/* ==========================================================================
   5. LISTS & TABLES (MOBILE-FIRST)
   ========================================================================== */

ol {
  display: block;
  inline-size: fit-content;
  margin: 25px auto;
  padding: 0;
  counter-reset: list-number;
  position: relative;
}
ol li {
  display: block;
  margin: 0;
  padding: 12px 25px 12px 60px;
  position: relative;
  text-align:left;
}
ol li::before {
  counter-increment: list-number;
  content: counter(list-number);
  margin-inline: auto;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--step-1);
  font-weight: 700;
  background-color: var(--vibrant);
  border-radius: 50%;
  color: var(--on-vibrant);
  position: absolute;
  left: 10px;
  top: 12px;
  line-height: 1;
}
ol li p { margin: 0; }

ul {
  margin: 25px auto;
  inline-size: fit-content;
}
ul li, ul.postinfos li { list-style-type: square; }
ul li { padding: 5px; position: relative; text-align:left;}
ul ul, ul ul ul { margin: 0 15px; }
ul ul li, ul ul ul li { background-image: none; padding: 5px; }

ul.cols, p.cols, div.cols {
  columns: 30ch 3;
  gap: 2em;
  break-inside: avoid;
}
ul.cols li {
  break-inside: avoid;
  padding: 0.5rem;
}

/* Mobile-First Responsive Table */
table {
  margin: 50px auto;
  border-collapse: collapse;
  width: 100%;
  outline: 1px solid var(--trans-dunkel-2);
}
tr {
  background: var(--trans-dunkel--1);
  display: block;
}
tr:nth-child(even) { background: var(--trans-hell-1); }

th {
  display: none;
  background: var(--dunkel);
  color: var(--weiss);
  font-weight: 700;
}

td {
  display: block;
  color: var(--schwarz);
  text-align: left;
  padding: 0.5em;
}
td::before {
  content: attr(data-cell) ": ";
  font-weight: 700;
  width: 6.5em;
  display: inline-block;
}

.dunkel table th, .dunkel table td { color: var(--weiss); }
.dunkel table th { background: var(--trans-dunkel-4); }


/* ==========================================================================
   6. SITE STRUCTURE: HEADER, WRAPPER, FOOTER
   ========================================================================== */

div.st {
  color: var(--weiss);
  background: var(--medium);
  display: block;
  font-size: var(--step-0);
  line-height: 1;
  margin: -90px 0 0 0;
  padding: 3px 15px;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  vertical-align: top;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 500;
  transition: all 0.5s ease-in-out;
}
.scrolled div.st { transform: translateY(70px); margin: 0; }

#wrapheader {
  background: var(--weiss);
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  text-align: left;
  width: 100%;
  z-index: 800;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  margin-inline: auto;
  padding: 0 25px;
  position: relative;
  max-width: var(--bigwidth);
}

#header .logo { height: 60px; max-width: 260px; text-align: left; }
#header .logo img { height:100%;width:100%; object-fit: contain; }
#header .logo a { color: var(--dunkel-2); display: block;height: 100%;width: 100%;}
#header .logo a:hover { color: var(--dunkel-2); filter: grayscale(100%); }
#header .logo .titel {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
  line-height: 1.25;
}
#header .logo .beschreibung {
  color: var(--dunkel);
  display: none;
  font-size: var(--step-1);
  font-weight: 700;
  margin: 5px 0;
  padding: 0;
}

#wrapper {
  display: block;
  margin-inline: auto;
  text-align: left;
  overflow: hidden;
  padding: 25px;
  position: relative;
  max-width: var(--mwidth);
}

/* Custom Template (Page & Single) */
.post-template-single-parallax #wrapper,
.page-template-page-parallax #wrapper,
.post-template-page-parallax-php #wrapper,
.post-template-single-parallax-php #wrapper,
.post-template-single-parallax #wrapper article.post,
.page-template-page-parallax-php #wrapper article.post,
.post-template-page-parallax-php #wrapper article.post,
.post-template-single-parallax-php #wrapper article.post {
  padding: 0;
  max-width: 100% !important;
}

/* Archiv-, Blog- und Suchseiten */
.blog #wrapper,
.search #wrapper,
.archive #wrapper {
  max-width: var(--bigwidth);
}

#wrapper ul.maximal { max-width: 70ch; margin: 25px auto; }
#wrapper ul.maximal > li { margin: 0 25px; }
#wrapper ol:not(.commentlist, .interview) { max-width: 70ch; }
#wrapper ol.links { margin: 25px 0; max-width: 70ch; text-align: left; }
#wrapper p:not(.cols, .myref-excerpt, .datum, .contact-form p, .txt, .bildsplit p, .mehrwertboxtext p, .text p,#wrapper p.date) {
  margin-inline: auto;
  max-width:70ch;
}
#wrapper p:has(> img) { max-width: 100% !important; }
#wrapper p.date { margin-inline: auto; width:auto; text-align:center; }
#wrapper p.date span {
  background: var(--hell);
  border-radius: 3px;
  display: inline-block;
  margin: 2px 10px;
  padding: 5px 8px;
  vertical-align: middle;
  white-space: nowrap;
}

#footer {
  display: block;
  background: var(--dunkel-2);
  color: var(--trans-hell-8);
  clear: both;
  font-size: var(--step-0);
  margin-inline: auto;
  padding: 0 0 75px 0;
  position: relative;
  text-align: center;
  box-shadow: inset 0 10px 5px var(--trans-dunkel-2);
}
#footer .inner {
  background: transparent;
  color: var(--weiss);
  line-height: 1.7;
  margin-inline: auto;
  padding: 50px 25px;
  text-align: left;
  max-width: var(--bigwidth);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}
#footer .inner > * { flex: 0 1 25ch; }
#footer .inner:empty { padding: 0; }

#footer a, #footer strong { color: inherit; }
#footer a:hover { color: var(--weiss); }

#footer ul { margin: 0; font-size: var(--step-0); }
#footer ul li { display: block; margin: 0; padding: 0; text-align: left; }
#footer ul li a {
  border: none;
  color: inherit;
  display: block;
  padding: 8px 5px;
  z-index: 1;
}
#footer ul li a:hover,
#footer ul li a[aria-current="page"] {
  color: var(--weiss);
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}
#footer ul li a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--trans-dunkel-2);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 250ms ease-in;
  z-index: -1;
}
#footer ul li a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

#footer p {
  margin: 25px auto;
  font-size: var(--step--1);
  line-height: 1.9;
}
#footer p a, #footer ul li a { text-decoration: none; position: relative; }
#footer strong { font-weight: 700; }
#footer h3, #footer h3 a, #footer h4, #footer h4 a {
  color: var(--trans-hell-8);
  font-size: var(--step-1);
  font-weight: 700;
  text-align: left;
  margin-left: 5px;
}

#footer .fullbox { clear: both; display: block; line-height: 1.7; float: none; padding: 0; width: 100%; }
#footer .fullbox .fullboxinner {
  background: transparent;
  color: var(--weiss);
  display: block;
  margin-inline: auto;
  padding: 25px;
  text-align: center;
  max-width: var(--bigwidth);
}
#footer .fullbox ul { margin: 25px auto; }
#footer .fullbox ul li { border: none; display: inline-block; padding: 10px 15px; vertical-align: middle; }
#footer .fullbox ul li a { display: inline-block; padding: 0; vertical-align: middle; }
#footer .footerbox { margin: 0 auto; text-align: center; }

#footer .fullbox.formularbox .fullboxinner {
  padding: 25px;
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}
#footer .fullbox.formularbox p { margin: 10px 0; text-align: left; }
#footer div.wpcf7 form {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  position: relative;
}
#footer div.wpcf7 form h2, #footer div.wpcf7 form h3 { text-align: left; }
#footer div.wpcf7 input[type=submit] { margin: 25px 0 0 0; }
#footer div.wpcf7 textarea { height: 120px; }
#footer .tooltipp { margin: 0; display: block; text-align: left; }
#footer .tooltipp .tooltipptext { width: 290px; text-align: left; left: 0; margin-left: 0; }

#footer address.vcard {
  display: block;
  line-height: 1.95rem;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: auto;
}
#footer address.vcard .innervcard { display: inline-block; margin: 0 auto; padding: 0 0 0 5px; vertical-align: top; }
#footer address.vcard span { display: block; padding: 8px 0; text-align: left; }
#footer address.vcard span.plz,
#footer address.vcard span.ort { display: inline-block; text-align: left; vertical-align: top; }
#footer address.vcard .adr { text-align: left; }
#footer address.vcard img { border-radius: 50%; display: block; margin: 0 auto 10px auto; text-align: center; }
#footer .adress { display: inline-block; padding: 0 10px; vertical-align: middle; }

#footer .views {
  color: var(--trans-hell-8);
  display: block;
  font-size: 0.9em;
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
}

/* ==========================================================================
   7. COMPONENTS & SHORTCODES
   ========================================================================== */

/* Mail & Phone CTAs */
.mail {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
.mail .icon-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
}
.mail .email-icon {
  width: 1.1em;
  height: 1.1em;
  font-size: 1.5rem;
  vertical-align: middle;
}
.mail.is-cta-button { display: inline-block; margin: 5px 0; }
.mail.is-cta-button a,
div.mail.is-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 1.5rem 0;
  padding: 10px 20px;
  background-color: var(--vibrant);
  color: var(--on-vibrant) !important;
  text-decoration: none;
  border-radius: 9px;
  font-weight: bold;
  transition: background-color 0.4s ease, color 0.4s ease, opacity 0.4s ease;
}
.mail.is-cta-button a:hover,
.mail.is-cta-button a:focus {
  background-color: var(--vibrant-hov);
  color: var(--on-vibrant-hov) !important;
  text-decoration: none;
  opacity: 0.9;
}
.mail.is-cta-button .email-icon { font-size: 1.2em; vertical-align: middle; }

.phone a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
  transition: background-color 0.4s ease, color 0.4s ease, opacity 0.4s ease;
}
.phone .phone-icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
  font-size: 1.5rem;
}
.phone .text { font-weight: 400; }

.phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 1.5rem 0;
  padding: 0.6em 1.2em;
  background-color: var(--vibrant);
  color: var(--on-vibrant) !important;
  text-decoration: none;
  border-radius: 9px;
  font-weight: 600;
  transition: background-color 0.4s ease, color 0.4s ease, opacity 0.4s ease;
}
.phone-btn:hover {
  background-color: var(--vibrant-hov);
  color: var(--on-vibrant-hov) !important;
  text-decoration: none;
  opacity: 0.9;
}
.phone-btn:active { transform: translateY(1px); }
.phone-btn .phone-icon { width: 1.2em; height: 1.2em; flex-shrink: 0; }

/* Buttons & Navigation Shortcuts */
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: center;
  inline-size: fit-content;
  margin: 0 auto;
}
.buttons li { flex: 0 1 350px; margin: 10px; }

a.button {
  background: var(--vibrant);
  border: 1px solid var(--vibrant);
  color: var(--on-vibrant);
  display: inline-block;
  font-family: var(--font-secondary);
  font-weight: 700;
  letter-spacing: 2px;
  margin: 20px auto;
  padding: var(--but-pad);
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: scale 0.3s;
  border-radius: 0.5rem;
  vertical-align: middle;
}
a.button::after {
  content: '';
  margin: 0 0 0 8px;
  font-size: var(--step-0);
  text-decoration: none;
  transition: transform 0.3s;
}
a.button:hover { scale: 1.05; }
a.button:hover::after { transform: translateX(5px); }
a.button.center, #topsegment a.button { display: block; max-width: 36ch; }

ul.sprungmarken { clear: both; display: block; margin: 25px auto; text-align: center; }
ul.sprungmarken li { display: inline-block; padding: 0; text-align: center; }
ul.sprungmarken li::before { display: none; }
ul.sprungmarken li a {
  background: var(--weiss);
  border: 1px solid var(--dunkel-2);
  color: var(--dunkel-2);
  display: block;
  font-weight: 500;
  margin: 5px;
  padding: 5px 8px;
  position: relative;
  text-decoration: none;
  transition: all 0.5s;
}
ul.sprungmarken li a:hover {
  background: var(--dunkel);
  color: var(--weiss);
}

.wp-pagenavi { clear: both; display: block; margin: 15px 0; padding: 15px 0; text-align: center; }
.wp-pagenavi a, .wp-pagenavi span {
  background: var(--hell);
  color: var(--dunkel);
  display: inline-block;
  margin: 5px;
  padding: 5px 15px;
  text-align: center;
  border-radius: 5px;
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.wp-pagenavi a:hover { background: var(--vibrant); color: var(--on-vibrant); }
.wp-pagenavi span.current { background: var(--dunkel); color: var(--weiss); }
.wp-pagenavi span.pages { padding: 5px 10px; }

/* PayPal */
.paypal { inline-size: fit-content; margin: 25px auto; text-align: center; }
.paypal a {
  border: 1px solid #003087;
  border-radius: 9px;
  color: #003087;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  text-decoration: none;
  transition: scale 0.5s;
}
.paypal a::before { font-size: var(--step-4); margin: 0 5px 0 0; }
.paypal a:hover { scale: 1.05; }
#footer .paypal a, .medium .paypal a, .dunkel .paypal a { border-color: var(--trans-hell-4); }

/* Accordion */
.accordion {
  background-color: var(--hell);
  color: var(--schwarz);
  cursor: pointer;
  border-radius: 1rem;
  margin: 5px 0;
  padding: 1rem 1.5rem;
  width: 100%;
  border: none;
  text-align: left;
  font-size: var(--step-0);
  transition: 0.5s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.active, .accordion:hover { background-color: var(--dunkel); color: var(--weiss); }
.accordion::after { content: '\002B'; color: var(--dunkel); font-weight: bold; transition: transform 0.5s; }
.accordion:hover::after { color: var(--hell); }
.active::after { color: var(--hell); transform: rotate(45deg); }
.panel { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out; }
.panel .innerpanel {
  background-color: var(--hell);
  border-radius: 1rem;
  color: var(--schwarz);
  display: block;
  margin: 1rem;
  padding: 1rem;
  text-align: left;
}

/* Klickmichan CTA Widget */
.klickmichan, #content .klickmichan {
  background: var(--dunkel);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--weiss);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  font-size: 1.2em;
  height: 160px;
  width: 160px;
  line-height: 1.25em;
  text-align: center;
  margin: 50px auto;
  padding: 15px;
  position: relative;
  transition: all 0.5s ease;
  border-radius: 50%;
  transform: scale(1);
  animation: pulse-red 2s infinite;
  display: block;
}
#content .klickmichan { font-size: 1.4em; }
.klickmichan a, #content .klickmichan a {
  color: var(--weiss);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-family: var(--font-headlines);
  position: relative;
  text-decoration: none;
  height: 100%;
  width: 100%;
  transition: color 0.5s ease;
}
.klickmichan p, #content .klickmichan p { line-height: 1.4em; margin: 0; }
.klickmichan p strong, #content .klickmichan p strong { color: var(--weiss); display: block; font-size: 1.3em; }
.klickmichan:hover, #content .klickmichan:hover {
  background: var(--vibrant);
  color: var(--dunkel-2);
  animation: pulse-green 2s infinite;
}
.klickmichan:hover a { color: var(--dunkel-2); }

/* Search & Overlays */
#searchform {
  line-height: 1;
  margin: 25px auto;
  padding: 0;
  position: relative;
  text-align: center;
  display: flex;
  max-width: 600px;
}
#searchform input {
  border-color: var(--dunkel);
  border-radius: 100vh;
  caret-color: var(--vibrant);
  margin: 0 auto;
  padding: 0.8rem;
  flex-grow: 1;
}
#searchform button {
  background: var(--vibrant);
  border: 2px solid var(--vibrant);
  color: var(--on-vibrant);
  cursor: pointer;
  font-size: var(--step-2);
  margin: 0 0 0 5px;
  padding: 0;
  border-radius: 50%;
  aspect-ratio: 1;
  height: 50px;
  width: 50px;
  transition: all 0.3s;
}
#searchform button:hover { background: var(--vibrant-hov); }
#searchform button::before { color: var(--on-vibrant); margin: 0; }
#searchform button:hover::before { color: var(--weiss); background: transparent; }

.suchfenster { opacity: 0; transition: opacity 0.3s; height: 0; overflow: hidden; }
.suchfenster.open {
  background-color: var(--vibrant);
  color: var(--weiss);
  display: grid;
  place-items: center;
  height: auto;
  position: fixed;
  inset: 2em;
  z-index: 2000;
  border-radius: 1rem;
  opacity: 1;
}
.suchfenster .close {
  position: absolute;
  top: 1rem;
  right: 2rem;
  color: var(--weiss);
  cursor: pointer;
  font-size: 3.5rem;
  transform: rotate(45deg);
  transition: transform 0.3s;
}
.suchfenster .close:hover { transform: rotate(0deg); }

#searchformfenster {
  line-height: 1;
  margin: 25px auto;
  padding: 0 1rem;
  position: relative;
  text-align: center;
  display: flex;
  width: 100%;
  max-width: 800px;
}
#searchformfenster input {
  border-color: var(--dunkel);
  border-radius: 100vh;
  caret-color: var(--dunkel);
  margin: 0 auto;
  padding: 0.8rem;
  flex-grow: 1;
}
#searchformfenster button {
  background: var(--dunkel);
  border: none;
  color: var(--weiss);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 3rem;
  margin: 0 0 0 5px;
  padding: 0;
  border-radius: 50%;
  aspect-ratio: 1;
  width: 50px;
  transition: all 0.3s;
}
#searchformfenster button:hover { background: transparent; }
#searchformfenster button::before { color: var(--weiss); margin: 0; transition: all 0.3s; border-radius: 50%; }
#searchformfenster button:hover::before { color: var(--vibrant); background: var(--weiss); }

.suchfenster .golfball {
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04);
  position: absolute;
  animation: moveX 5s linear 0s infinite alternate, moveY 7s linear 0s infinite alternate;
}

#backtotop {
  background: var(--dunkel);
  color: var(--weiss);
  cursor: pointer;
  font-size: var(--step-2);
  height: 50px;
  width: 50px;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 5px var(--trans-dunkel-4);
  mix-blend-mode: difference;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}
#backtotop::before { margin: 0; line-height: 100%; }
#backtotop span { display: none; }
.scrolled #backtotop { visibility: visible; opacity: 1; }

/* Tooltips */
.tooltipp { color: var(--hell); margin: 0 auto; position: relative; display: inline-block; vertical-align: middle; }
.tooltipp .tooltipptext {
  visibility: hidden;
  width: 250px;
  background-color: var(--vibrant);
  color: var(--hell);
  text-align: center;
  border-radius: 6px;
  font-size: 0.85em;
  line-height: 1.4;
  padding: 7px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -125px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltipp:hover .tooltipptext { visibility: visible; opacity: 1; }
.tooltipp::before { font-size: var(--step-2); }


/* ==========================================================================
   8. FORMS & COMMENTS
   ========================================================================== */

/* Comments */
#comments h3 { margin: 50px auto; }
#comments h3 em { color: var(--dunkel); font-size: var(--step-1); }

.commentsblock { border: none; margin: 50px 0; padding: 0; hyphens: auto; }
.commentsblock form, .commentsblock fieldset { border: none; margin: 0; padding: 0; }
.commentsblock label { clear: left; display: block; font-weight: 400; margin: 0; padding: 0; }
.commentsblock input,
.commentsblock textarea,
.commentsblock select {
  background: var(--trans-dunkel--1);
  border: 1px solid var(--weiss);
  color: var(--dunkel-2);
  margin: 10px 0;
  padding: 10px;
  width: 100%;
  border-radius: 3px;
}
.commentsblock input { caret-color: var(--vibrant); }
.commentsblock input:hover, .commentsblock textarea:hover {
  background: var(--weiss);
  border: 1px solid var(--dunkel);
}
.commentsblock input[type=checkbox], .commentsblock input[type=radio] {
  background: transparent;
  border: none;
  color: var(--dunkel-2);
  display: inline-block;
  margin: 0 0.2em 0 0;
  width: 1.0em;
}
.commentsblock textarea { overflow: auto; }

ol.commentlist { color: var(--dunkel-2); margin: 0 auto; }
ol.commentlist li.comment { margin: 25px 0; padding: 0 0 0 60px; text-align:left; z-index: 10; }
ol.commentlist li.comment ul { padding: 0; }
ol.commentlist li:before { position: absolute; left: 0; top: 28px; }
ol.commentlist li li:before { background-color: var(--hell); color: var(--dunkel); left: -60px; top: 25px; }
ol.commentlist li.comment > .innercomment {
  background: var(--trans-dunkel--1);
  border-radius: 1rem;
  padding: 25px;
  position: relative;
}
ol.commentlist li.comment > .innercomment::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  z-index: 1;
  border-style: solid;
  border-color: transparent var(--trans-dunkel--1);
  border-width: 20px 20px 20px 0;
  top: 45px;
  left: -20px;
  margin-top: -20px;
}
ol.commentlist li.comment div.vcard cite.fn { font-style: normal; }
ol.commentlist li.comment div.comment-meta { font-size: var(--step--1); text-align: center; }
ol.commentlist li.comment p { margin: 25px 0; }
ol.commentlist li.comment div.reply { text-align: center; }
ol.commentlist li.comment ul.children { list-style: none; margin: 1rem 0; }
ol.commentlist li.comment ul.children li { list-style: none; padding: 0; }
ol.commentlist li.comment.author-admin,
ol.commentlist li.comment.bypostauthor > .innercomment { background: var(--hell); z-index: -1; }
ol.commentlist li.comment.bypostauthor > .innercomment::after { border-color: transparent var(--hell); }
ol.commentlist li.pingback > .innercomment { background: #ddd; padding: 25px; }

/* Contact Form 7 */
div.wpcf7 form { border: none; margin: 35px auto; padding: 0; text-align: left; position: relative; }
div.wpcf7 fieldset { border: none; color: #000; clear: both; margin: 0; padding: 0; }
div.wpcf7 label { font-weight: 400; margin: 0; padding: 0; }
div.wpcf7 input, div.wpcf7 textarea, div.wpcf7 select {
  background: var(--hell);
  border: 1px solid var(--trans-dunkel-3);
  color: var(--schwarz);
  margin: 5px 0 10px 0;
  padding: 0.8rem;
  width: 100%;
  box-shadow: 0 0 1px #666;
}
div.wpcf7 input { caret-color: var(--vibrant); }
div.wpcf7 select { max-width: 400px; }
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.wpcf7-not-valid,
select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required.wpcf7-not-valid {
  border-color: var(--warning) !important;
}
.wpcf7-not-valid-tip { display: inline-block; margin: -20px 0 5px 0; }
div.wpcf7 textarea { height: 250px; overflow: auto; }
div.wpcf7 .upload input { background: var(--weiss); color: var(--dunkel); margin: 5px 5px 0 0; padding: 5px; width: 70%; }
div.wpcf7 input:hover, div.wpcf7 textarea:hover, div.wpcf7 select:hover { background: var(--weiss); color: var(--dunkel); box-shadow: none; }
div.wpcf7 input[type=checkbox], div.wpcf7 input[type=radio] {
  background: transparent;
  border: none;
  color: var(--dunkel);
  margin: 0 5px 0 10px;
  padding: 0;
  width: 1.0rem;
}
div.wpcf7 input::placeholder { color: var(--trans-dunkel-3); opacity: 1; font-size: var(--step--1); }
div.wpcf7 { display: block; margin: 0; }
span.wpcf7-list-item { margin: 0; }
div.wpcf7 p { margin: 15px 0 5px 0; }
.wpcf7 form .wpcf7-response-output { vertical-align: middle; }
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
  color: var(--weiss) !important;
  background: var(--warning) !important;
  border: none !important;
  padding: 25px !important;
}
.wpcf7 form.sent .wpcf7-response-output { background: var(--success) !important; color: var(--weiss) !important; }

/* Generic Form Submits */
div.wpcf7 input[type=submit],
.commentsblock input[type=submit],
.commentsblock button[type=submit] {
  background: var(--vibrant);
  border: 1px solid var(--vibrant);
  color: var(--on-vibrant);
  clear: both;
  display: block;
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 3px;
  margin: 25px 0;
  padding: var(--but-pad);
  text-align: center;
  text-decoration: none;
  width: auto;
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
div.wpcf7 input[type=submit]:hover,
.commentsblock input:hover[type=submit],
.commentsblock button:hover[type=submit] {
  background: var(--vibrant-hov);
  border: 1px solid var(--vibrant-hov);
  color: var(--on-vibrant-hov);
  scale: 1.1;
}

/* Contact Form Grid Layout */
.contact-form { display: grid; gap: 1em; }
div.wpcf7 .contact-form p,
div.wpcf7 .contact-form input,
div.wpcf7 .contact-form textarea,
div.wpcf7 .contact-form select { margin: 0; }
p.form-group { display: grid; gap: 0.5em; }
p.form-group-full-width { grid-column: 1 / -1; }

/* Simple Contact Form */
#simple-contact-form .scf-row { display: block; margin: 0; padding: 10px; }
#simple-contact-form .scf-row input {
  background: var(--weiss);
  border: 1px solid var(--trans-dunkel-2);
  caret-color: var(--vibrant);
  color: var(--dunkel);
  margin: 0;
  padding: 0.8rem;
  width: 100%;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
#simple-contact-form .scf-row label { font-weight: 400; margin: 0; padding: 0; }
#simple-contact-form .scf-row textarea#scf_message {
  border: 1px solid var(--trans-dunkel-2);
  display: block;
  height: 200px;
  padding: 0.8rem;
  width: 100%;
  overflow: auto;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
#simple-contact-form .scf-row input:hover,
#simple-contact-form .scf-row textarea#scf_message:hover { box-shadow: 0 0 5px rgba(0,0,0,0.1); }
div.scf-submit input#scf-button {
  background: var(--vibrant);
  border: 1px solid var(--vibrant);
  color: var(--on-vibrant);
  clear: both;
  display: inline-block;
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 3px;
  margin: 25px 0;
  padding: var(--but-pad);
  text-align: center;
  text-decoration: none;
  width: auto;
  border-radius: 1rem;
  transition: all 0.3s ease-in-out;
}
div.scf-submit input#scf-button:hover {
  background: var(--vibrant-hov);
  border: 1px solid var(--vibrant-hov);
  color: var(--on-vibrant-hov);
  scale: 1.1;
}
#scf_success pre { white-space: pre-wrap; }
p.scf_error, p.scf_spam { color: var(--warning); }
p.scf_success { color: var(--success); }
.scf-website3dhhsy3 { display: none; }


/* ==========================================================================
   9. POSTS, BLOG & NEWS
   ========================================================================== */

ul.news { color: var(--dunkel-2); display: block; margin-inline: auto; padding: 0; }
ul.news li {
  background: var(--trans-hell-8);
  display: block;
  list-style: none;
  margin: 75px auto;
  padding: 0;
  position: relative;
  text-align: center;
}
ul.news li::before { content: ''; display: none; }
ul.news .text { padding: 1rem; }
ul.news .text h2, ul.news .text h3 {
  border: none;
  margin: 10px 0;
  font-size: var(--step-1);
  font-weight: 700;
  text-align: left;
  hyphens: auto;
  hyphenate-limit-chars: auto 3 4;
}
ul.news .text p {
  font-size: var(--step-0);
  margin: 10px 0;
  text-align: left;
  hyphens: auto;
  hyphenate-limit-chars: auto 3 4;
}
ul.news a {
  color: inherit;
  display: block;
  text-decoration: none;
  margin: 0;
  padding: 0;
  transition: color 0.5s;
  height: 100%;
}
ul.news a:hover h2, ul.news a:hover h3 { color: var(--dunkel); }
ul.news .more, .cats .more, article.post .more {
  color: inherit;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: right;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}
ul.news li .thumbnail {
  display: block;
  float: none;
  height: auto;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}
ul.news li img {
  display: block;
  margin: 0 auto;
  text-align: center;
  transition: scale 0.3s;
  object-fit: cover;
  width: 100%;
}
ul.news li:hover img { scale: 1.1; }

ul.news.grid { display: block; }
ul.news.grid li { margin: 0; padding: 0; }
ul.news.grid li .thumbnail { position: relative; left: auto; top: auto; width: auto; max-width: 330px; }
ul.news.grid li img { margin: 0 auto; text-align: center; }
ul.news.grid li .text { padding-bottom: 3.2em; }
ul.news.grid li .text h2, ul.news.grid li .text h3, ul.news.grid li .text p { margin-inline: auto; }
ul.news.grid li .text p.datum { position: absolute; bottom: 0.6rem; left: 1.2rem; padding: 0; }
ul.news.grid li .text p.datum span {
  background: var(--hell);
  border-radius: 3px;
  display: inline-block;
  margin: 2px;
  padding: 5px;
  vertical-align: middle;
}
ul.news.grid .comments { border-left: 10px solid var(--weiss); }
ul.news.grid2 h3 { font-size: var(--step-0); padding: 5px 1.2rem; }

article.post {
  background: var(--trans-hell-8);
  border: none;
  color: var(--dunkel-2);
  display: block;
  margin: 25px auto;
  padding: 0;
  position: relative;
  vertical-align: middle;

}
article.post:hover { background: var(--weiss); }
article.post a { color: inherit; display: block; text-decoration: none; }
article.post h2, article.post h3 { font-size: var(--step-1); font-weight: 700; margin: 15px auto; }
article.post p { margin: 15px 0; text-align:left; }
article.post .text { padding: 0 25px; }
article.post p.datum span { display: inline-block; vertical-align: middle; }
article.post p.datum span.comments { padding-left: 10px; }
article.post .thumbnailbox {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: block;
  margin: 0 auto 15px auto;
  padding: 0;
  overflow: hidden;
  max-width: 100%;
  transition: transform 0.5s;
  position: relative;
}
article.post .thumbnailbox img { display: block; margin-inline: auto; transition: scale 0.5s; }
article.post:not(.rund) .thumbnailbox:hover img { scale: 1.1; }
article.post.rund .thumbnailbox:hover img { filter: grayscale(100%); }
article.post.rund .thumbnailbox, article.post.rund .thumbnailbox img { border-radius: 50%; }
article.post .postbody { position: relative; }
article.post .postmeta { clear: both; display: block; font-size: var(--step-0); padding: 10px 0; }
article.post .postmetadata a, article.post .postmeta a { color: #000; display: inline; margin: 0; padding: 0; width: auto; }
article.post .postinfo span { margin-right: 10px; }
article.post .entrybody p { margin: 10px 0; }

footer.entry-meta {
  display: block;

}
footer.entry-meta .meta-item{
  display: block;

}
footer.entry-meta .meta-item a{
  border:1px solid var(--medium);
  display: inline-block;
  margin: 3px;
  padding: 3px;
}
footer.entry-meta .meta-item a:hover{
  background: var(--hell);
}

article.mypost { color: var(--dunkel-2); margin: 0 auto; padding: 1rem; }
article.mypost a { color: inherit; list-style: none; }
article.mypost h2, article.mypost h3, article.mypost p { margin: 10px 0; }

/* Line Clampings */
ul.news li h2, article.post h2, .mytext h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
ul.news li p.txt, article.post p.txt, .mytext p:not(.date, .myref-excerpt) {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==========================================================================
   10. SECTIONS, MODULES & PARALLAX
   ========================================================================== */

/* --------------------------------------------------------------------------
   Basis-Modul
   -------------------------------------------------------------------------- */
section.module {
  background: var(--weiss);
  clear: both;
  display: block;
  min-height: 100px;
  width: 100%;
}

section.module .wrap-inner-section {
  min-height: 100px;
  margin: 0 auto;
  padding: 15px 15px 25px 15px;
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 1280px;
  z-index: 2;
}

/* Modul-Breiten (funktioniert für <div> und <article>) */
section.module.big .wrap-inner-section { max-width: var(--bigwidth, 1440px); }
section.module.bigger .wrap-inner-section { max-width: var(--biggerwidth, 1600px); }
section.module.full .wrap-inner-section { padding: 0; max-width: 100%; }

section#aktuelles .wrap-inner-section { padding: 1px 0; }
section.module.full .wrap-inner-section ul.galerie { margin-inline: auto; }
section.module.full .wrap-inner-section ul.galerie li a { margin: 0; }

/* --------------------------------------------------------------------------
   Parallax Modul (CSS-only via Clip-Path & Fixed IMG)
   -------------------------------------------------------------------------- */
section.module.parallax {
  border-top: 2px solid rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  position: relative;
  text-align: center;
  width: 100%;
  clip-path: inset(0 0 0 0);
  height: 60vh;
  height: 60dvh;
  min-height: 400px;
  max-height: 800px;
}

section.module.parallax img.bg-image-seo,
section.module.parallax img.muster-image-seo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  pointer-events: none;
  transform: translateZ(0); /* Hardware-Beschleunigung für flüssiges Scrollen */
}

section.module.parallax .wrap-inner-section {
  height: 100%;
  padding: 1px 0;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
}

section.module.parallax h1,
section.module.parallax h2,
section.module.parallax h3 {
  background: var(--trans-dunkel-4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 9px;
  color: var(--weiss);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.2;
  margin: 10px 0;
  padding: 10px 15px;
  text-shadow: 0 1px 1px #000000;
  text-align: center;
  width: auto;
  max-width: 100%;
}

section.module.parallax h1 { font-size: var(--step-5); }
section.module.parallax h2 { font-size: var(--step-3); }

/* --------------------------------------------------------------------------
   Farb-Varianten (hell, medium, dunkel)
   -------------------------------------------------------------------------- */
section.module.hell {
  background: var(--hell);
  color: #111111;
}

section.module.medium {
  background: var(--medium);
  color: var(--weiss);
}

section.module.dunkel {
  background: var(--dunkel);
  background: linear-gradient(135deg, var(--button, #333) 0%, var(--dunkel, #111) 100%);
  color: var(--weiss);
}

/* Gemeinsame Stile für dunkle Hintergründe (.medium & .dunkel) */
section.module.medium article.post,
section.module.medium ul.news li,
section.module.dunkel article.post,
section.module.dunkel ul.news li {
  background: var(--trans-dunkel-2);
}

section.module.medium h1, section.module.medium h2, section.module.medium h3, section.module.medium h4,
section.module.dunkel h1, section.module.dunkel h2, section.module.dunkel h3, section.module.dunkel h4 {
  background: transparent;
  color: inherit;
}

section.module.medium ul.news li,
section.module.medium article.post h2,
section.module.medium article.post h3 {
  border-color: var(--medium);
  color: var(--weiss);
}

section.module.dunkel ul.news li,
section.module.dunkel article.post h2,
section.module.dunkel article.post h3 {
  border-color: var(--dunkel);
  color: var(--weiss);
}

section.module.medium ul.news li a,
section.module.medium a:not(a.button),
section.module.dunkel ul.news li a,
section.module.dunkel a:not(a.button) {
  color: var(--weiss);
}

section.module.medium ul.news li a:hover h3,
section.module.medium article.post a:hover h3,
section.module.dunkel ul.news li a:hover h3,
section.module.dunkel article.post a:hover h3 {
  color: var(--vibrant);
}

section.module.medium blockquote,
section.module.dunkel blockquote {
  background: var(--trans-dunkel-1);
  color: var(--weiss);
}

section.module.medium ul.vergleiche li,
section.module.dunkel ul.vergleiche li {
  background: var(--trans-dunkel-2);
}

section.module.medium p.absatzz::before {
  color: var(--trans-hell-2);
}


/* ==========================================================================
   11. PODCAST STYLES
   ========================================================================== */

.page-template-page-mypodcast,
.post-template-page-mypodcast { background-color: var(--dunkel); }

.pagebg-container {
  background-color: var(--medium);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  position: fixed;
  width: 100%;
}
.pagebg-container::before {
  content: "";
  background-color: var(--dunkel);
  position: absolute;
  inset: 0;
  z-index: -1;
  mix-blend-mode: multiply;
}

.page-template-page-mypodcast-php #wrapper { padding: 0; max-width: 100%; }
.post-template-page-mypodcast-php #wrapper,
.post-type-archive-golfpodcast #wrapper,
.single-golfpodcast #wrapper,
.podcastseite #wrapper { background: var(--trans-hell-8); }

.single-golfpodcast .commentsblock input,
.single-golfpodcast .commentsblock textarea,
.single-golfpodcast .commentsblock select { background: var(--weiss); border: 1px solid var(--medium); }
.single-golfpodcast .commentsblock input[type=submit] { background: var(--medium); color: var(--weiss); }

.podcast-item {
  background: var(--trans-hell-5);
  border: 1px solid var(--trans-dunkel-1);
  border-radius: 5px;
  display: block;
  margin: 2.5rem auto;
  padding: 1rem;
  position: relative;
}
.podcast-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.podcast-thumbnail {
  display: block;
  margin: 1em auto;
  padding: 0;
  max-width: 320px;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.podcast-thumbnail img { display: block; object-fit: cover; width: 100%; height: 100%; }
.podcast-title { font-size: var(--step-1); margin: 0; padding: 0; text-align: left; max-width: 100%; hyphens: auto; hyphenate-limit-chars: auto 3 4; }
.podcast-title a { text-decoration: none; color: var(--dunkel); }
.podcast-excerpt { font-size: var(--step-0); margin-bottom: 1rem; line-height: 1.5; text-align: left; hyphens: auto; hyphenate-limit-chars: auto 3 4; }
.podcast-more { color: var(--dunkel); text-decoration: underline; text-align: left; }

.music-share-group {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--trans-dunkel-2);
  width: fit-content;
}
.music-share-group a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: #333;
  font-size: 1rem;
  transition: all 0.3s ease;
  padding: 5px 10px;
  border-radius: 4px;
}
.music-share-group a:hover { background-color: #f0f0f0; }
.music-share-group a svg {
  width: 32px;
  height: 32px;
  margin-right: 10px;
  fill: currentColor;
  flex-shrink: 0;
}
.icon-spotify:hover, #footer .icon-spotify:hover { color: #1DB954; }
.icon-amazon-music:hover, #footer .icon-amazon-music:hover { color: #00A8E1; }
.icon-apple-music:hover, #footer .icon-apple-music:hover { color: #872EC4; }
.icon-youtube-music:hover, #footer .icon-youtube-music:hover { color: #FF0000; }
.music-share-group.layout-text a svg { display: none; }


/* ==========================================================================
   12. SLIDERS, CAROUSELS & INTERACTIVE VISUALS
   ========================================================================== */

/* Slider CSS-only */
.slider-wrapper { display: block; position: relative; overflow-anchor: none; }
.slider-wrapper a { text-decoration: none; }

ul.thumbs, ul.slides,
ul.thumbs > li, ul.slides > li { list-style: none; margin: 0; padding: 0; position: relative; overflow: hidden; }
ul.thumbs { display: flex; gap: 0.5rem; margin: 0.5rem 0; }
ul.thumbs > li { flex: 1; aspect-ratio: 16/9; }
ul.thumbs > li a img { transition: scale 250ms ease-in-out; object-fit: cover; height: 100%; width: 100%; }
ul.thumbs > li a:hover img { scale: 1.05; }

ul.slides { width: 100%; aspect-ratio: 16/9; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }
ul.slides > li.image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: absolute;
  inset: 0;
  aspect-ratio: 16/9;
  width: 100%;
  transform: scale(0,1);
  transition: transform 0.9s ease-in-out;
  transform-origin: left;
}
ul.slides > li.image:target { transform: scale(1,1); transform-origin: right; }
ul.slides > li .arrows { font-size: var(--step-5); color: var(--weiss); position: absolute; top: 40%; z-index: 99; }
ul.slides > li .arrows.arrow-left { left: 0; }
ul.slides > li .arrows.arrow-right { right: 0; }

/* Carousel */
section.carousel { background: var(--medium); display: block; margin: 0 auto; position: relative; text-align: center; }
.carousel__inner { display: block; margin: 0 auto; position: relative; text-align: center; aspect-ratio: 16 / 9; max-width: 1920px; max-height: 100vh; }
ul.carousel__viewport {
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
ul.carousel__viewport::-webkit-scrollbar { display: none; }
li.carousel__slide { list-style: none; margin: 0; padding: 0; position: relative; flex: 0 0 100%; width: 100%; }

.carousel__prev, .carousel__next {
  backdrop-filter: blur(2px);
  background: var(--trans-dunkel-2);
  color: var(--weiss);
  cursor: pointer;
  font-size: var(--step-5);
  margin: 0;
  padding: 0;
  position: absolute;
  top: 45%;
  text-decoration: none;
  transition: color 0.3s ease-in-out, background 0.5s ease-in-out;
}
.carousel__prev:hover, .carousel__next:hover { background: var(--trans-hell-8); color: var(--schwarz); }
.carousel__prev { left: 0; border-radius: 0 1rem 1rem 0; }
.carousel__next { right: 0; border-radius: 1rem 0 0 1rem; }
.carousel__texte { background: var(--trans-hell-8); color: var(--dunkel); position: relative; padding: 1em; z-index: 500; }
.carousel__texte h1, .carousel__texte h2, .carousel__texte h3, .carousel__texte p { margin: 10px 0; text-align: left; }
.carousel__texte h1, .carousel__texte h2, .carousel__texte h3 { font-size: var(--step-2); font-weight: 700; }

/* Image Comparisons */
.img-vergleich-container { display: grid; margin: 50px auto; aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.img-vergleich-container img { grid-area: 1 / 1; width: 100%; object-fit: cover; opacity: 1; transition: opacity 2500ms ease-in-out; }
.img-vergleich-container img#vorher { opacity: 1; }
.img-vergleich-container img#nachher { opacity: 0; }
.img-vergleich-container img#vorher:target,
.img-vergleich-container img#nachher:target { opacity: 1; }
.img-vergleich-container a.btn {
  background: var(--trans-hell-8);
  color: var(--schwarz);
  display: inline-block;
  padding: 0.5em 1em;
  position: absolute;
  bottom: 0;
  text-decoration: none;
  transition: all 300ms ease-in-out;
  z-index: 100;
}
.img-vergleich-container a.btn.vorher { left: 0; }
.img-vergleich-container a.btn.nachher { right: 0; }
.img-vergleich-container a.btn:hover, .img-vergleich-container a.btn:focus { background: var(--trans-hell-4); color: var(--weiss); }

aside.wrap-ba { display: grid; width: 100%; aspect-ratio: 16/9; overflow: hidden; margin: 50px auto; }
aside.wrap-ba > * { grid-column: 1/2; grid-row: 1/2; }
aside.wrap-ba img { aspect-ratio: 16/9; object-fit: cover; }
aside.wrap-ba #left-side { transform: translateX(-90%); transition: transform 2s; }
aside.wrap-ba:hover #left-side { transform: translateX(0); }

/* Tabs Slider */
nav.tabthumbs { display: grid; grid-gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr)); border-top: 1px solid transparent; }
nav.tabthumbs > * { aspect-ratio: 16/9; }
.tabbed figure { display: block; clear: both; margin: 0; }
.tabbed > input, .tabbed figure > div { display: none; }
.tabbed figure > div, .tabbed figure > div > img { aspect-ratio: 16/9; width: 100%; }

#tab1:checked ~ figure .tab1,
#tab2:checked ~ figure .tab2,
#tab3:checked ~ figure .tab3,
#tab4:checked ~ figure .tab4,
#tab5:checked ~ figure .tab5,
#tab6:checked ~ figure .tab6 { display: block; }

#tab1:checked ~ nav label[for="tab1"],
#tab2:checked ~ nav label[for="tab2"],
#tab3:checked ~ nav label[for="tab3"],
#tab4:checked ~ nav label[for="tab4"],
#tab5:checked ~ nav label[for="tab5"],
#tab6:checked ~ nav label[for="tab6"] { opacity: 0.8; }

/* Lightbox Gallery */
.wrapgallery-wrapper { display: block; margin: 50px 0; }
.gallery-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1.5rem; justify-content: center; align-items: center; margin: 50px auto; padding: 1rem; }
.gallery-wrapper a { transition: all 0.3s ease-in-out; }
.gallery-wrapper a img { height: 12rem; width: 18rem; object-fit: cover; transition: scale 250ms ease-in-out; vertical-align: bottom; }
.gallery-wrapper a img:hover { scale: 1.05; }
.gallery-wrapper:hover > :not(:hover) { filter: blur(2px); opacity: 0.5; }

.gallery-lightboxes .image-lightbox { position: fixed; inset: 0; background: var(--trans-dunkel-9); opacity: 0; visibility: hidden; padding: 1rem; }
.gallery-lightboxes .image-lightbox:target { opacity: 1; visibility: visible; z-index: 99998; }
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper { opacity: 0; margin: 0; padding: 1rem; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.gallery-lightboxes .image-lightbox:target .image-lightbox-wrapper { opacity: 1; }
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper img { border: 2px solid #fff; margin: 0 auto; max-height: 70vh; border-radius: 1rem; }
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.close { background: transparent; height: 3rem; width: 3rem; text-decoration: none; position: absolute; right: 1rem; top: 1rem; z-index: 99999; }
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.close::before,
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.close::after {
  content: '';
  background: var(--weiss);
  border-radius: 2px;
  height: 3px;
  width: 2rem;
  position: absolute;
  transform: rotate(45deg);
  top: 1.5rem;
}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.close::after { transform: rotate(-45deg); }
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.arrows { position: absolute; top: 47%; background: transparent; color: var(--weiss); font-size: 2.5rem; text-decoration: none; }
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.arrow-left { left: 15px; }
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.arrow-right { right: 15px; }
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.arrows::before { cursor: pointer; }

/* Responsive Slides (rslides) */
.rslides { background: transparent; height: auto; list-style: none; overflow: hidden; margin: 0 auto; padding: 0; text-align: center; width: 100%; }
.rslides .slide { background: transparent; margin: 0; padding: 0; position: absolute; display: none; height: 100%; width: 100%; left: 0; top: 0; text-align: center; }
.rslides img, .wrapbslider img { display: block; margin: 0 auto; text-align: center; }
.rslides.tn img { float: none !important; }
.rslides .slide:first-child { position: relative; display: block; }
.rslides .slide span { background: #fff; display: block; height: 100%; width: 100%; text-align: center; }

ul.rslides_tabs { display: block; margin: 5px 0; padding: 0; text-align: right; text-shadow: none; z-index: 999; position: absolute; bottom: 0; width: 100%; }
ul.rslides_tabs li { background: transparent; display: inline-block; margin: 0; padding: 0; list-style: none; }
ul.rslides_tabs li a, ul.rslides_tabs li a:hover {
  background: #000;
  border: 1px solid #000;
  color: #000;
  display: block;
  line-height: 1em;
  margin: 0 5px;
  padding: 5px 8px;
  text-decoration: none;
  border-radius: 50%;
}
ul.rslides_tabs li.rslides_here a, ul.rslides_tabs a:hover { background: #fff; border: 1px solid #fff; color: #fff; }
ul.rslides_tabs li a:hover { background: #fff; border-color: #fff; color: #fff; }

.rslides_nav { z-index: 999; }
.rslides_nav.prev, .rslides_nav.next {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 2.0em;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 45%;
  text-decoration: none;
  vertical-align: middle;
  z-index: 100;
}
.rslides_nav.prev a, .rslides_nav.next a { text-decoration: none; }
.rslides_nav.prev { left: 0; border-radius: 0 9px 9px 0; }
.rslides_nav.next { right: 0; border-radius: 9px 0 0 9px; }
.rslides_nav.next::before, .rslides_nav.prev::before { margin: 0; padding: 0; vertical-align: middle; }

ul.rslider, ul.rslider li { list-style: none; margin: 0; padding: 0; overflow: hidden; width: 100%; max-height: 800px; }
ul.rslider.mega, ul.rslider.mega li { max-height: 100%; }

.wrapbslider { background: var(--medium); clear: both; margin: 0; padding: 0; position: relative; text-align: center; width: 100%; }
.wrapbslider ul.rslides li { margin: 0 auto; overflow: hidden; width: 100%; }
.wrapbslider .elemente { color: var(--weiss); display: block; height: auto; margin: 0 auto; padding: 15px; z-index: 99; width: 100%; max-width: 1920px; }
.wrapbslider .elemente .img { margin: 0 auto; text-align: center; }
.wrapbslider .elemente .img img { height: auto; width: auto; max-height: 100%; max-width: 100%; }
.wrapbslider .elemente .text {
  color: var(--weiss);
  display: block;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1.2;
  margin: 0 auto;
  padding: 10px;
  position: relative;
  text-align: center;
  width: auto;
  max-width: 100%;
}
.wrapbslider .elemente .text.eins, .wrapbslider .elemente .text.eins h1 {
  font-size: var(--step-3);
  font-family: var(--font-headlines);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  margin: 0 auto;
  text-wrap: balance;
}
.wrapbslider .elemente .text.zwei { font-size: var(--step-1); margin: 10px auto; }
.wrapbslider .elemente.big .text { color: #fff; font-weight: 700; letter-spacing: 0; margin: 0 auto; padding: 0; text-align: center; }
.wrapbslider .elemente.big .text.eins, .wrapbslider .elemente.big .text.eins h1, .wrapbslider .elemente.big .text.zwei { color: #fff; display: block; }
.wrapbslider .elemente.big .text.eins, .wrapbslider .elemente.big .text.eins h1 { font-size: var(--step-6); font-weight: 700; letter-spacing: 1px; line-height: 1.1; margin: 0 auto 25px auto; }
.wrapbslider .elemente.big .text.zwei { font-size: var(--step-2); font-weight: 400; margin: 25px auto 0 auto; }


/* ==========================================================================
   13. MISCELLANEOUS, GRIDS & UTILITIES
   ========================================================================== */

/* Utility Classes */
.clear { clear: both; display: block; margin-inline: auto; padding: 25px 0; }
.clearer { clear: both; display: block; margin-inline: auto; padding: 1px 0; }
.group::after, #nav::after, #wrapper::after { content: ""; display: table; clear: both; margin: 0; padding: 0; line-height: 0; }
.hyphens { hyphens: auto; }
.aligncenter.vcard span { text-align: left; background: var(--hell); }
.line-up { display: flex; flex-direction: column; padding: 1rem; justify-content: space-between; height: 100%; }

a.post-edit-link {
  background: var(--warning);
  color: var(--weiss);
  display: inline-block;
  margin: 0;
  padding: 10px 25px;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  border-radius: 5px;
  z-index: 9999;
}

/* Shadows */
.shadow { box-shadow: 0px 0px 5px rgba(0,0,0,0.3); transition: box-shadow 0.3s; }
.shadow:hover { box-shadow: 0px 0px 5px rgba(0,0,0,0.1); }
.big-shadow {
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.5), -5px -5px 10px 0px rgba(0, 0, 0, 0.08), 0 8px 10px -5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
}
.big-shadow:hover {
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.5), 0 0 5px 0px rgba(0, 0, 0, 0.05), 0 5px 5px -5px rgba(0, 0, 0, 0.05);
}
.shadow-glow { box-shadow: 1px 1px 35px 8px rgba(255,255,255,0.7); transition: box-shadow 0.3s; }
.shadow-glow:hover { box-shadow: 1px 1px 35px 8px rgba(255,255,255,0.4); }
.drop-shadow { filter: drop-shadow(-2px 5px 5px rgba(0, 0, 0, 0.5)); transition: filter 0.3s; }
.drop-shadow:hover { filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5)); }

/* Grids */
ul.vergleiche, ul.news.grid, .postwrap {
  margin: 5em 0;
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min)), 1fr));
  width: 100%;
}
ul.news.grid.grid2 { --min: 28ch; --gap: 2rem; }

ul.vergleiche { margin: 50px auto; }
ul.vergleiche li { border-radius: 0.5rem; display: flex; flex-flow: column nowrap; background: var(--hell); list-style: none; padding: 0; }
ul.vergleiche li div { margin: 0; padding: 1rem 1.5rem; }
ul.vergleiche li h3 { background: var(--dunkel); color: var(--weiss); border-radius: 1rem 1rem 0 0; margin: 0; padding: 1rem; }
ul.vergleiche li .preis { font-size: var(--step-2); font-weight: 700; text-align: center; }
ul.vergleiche li a.button { background: var(--vibrant-hov); color: var(--on-vibrant-hov); border-color: var(--vibrant-hov); margin-top: auto; padding: 0.5rem 1rem; }
ul.vergleiche li a.button:hover { background: var(--vibrant); color: var(--on-vibrant); border-color: var(--vibrant); }
ul.vergleiche li span { border-bottom: 1px dotted var(--dunkel); display: block; padding: 10px; }
ul.vergleiche li ul { display: inline-block; margin: 0 auto; width: 90%; }
ul.vergleiche li ul li { border-bottom: 1px dotted var(--dunkel); border-radius: 0; display: block; padding: 10px; text-align: left; }

/* Social Icons & Share */
.group.share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin: 1.5rem auto;
  width: 100%;
}
.group.share a { font-size: 2.5rem; text-decoration: none; transition: transform 0.3s, color 0.3s, background 0.3s; }
.group.share a:hover { color: var(--vibrant); }
.group.share .social-icon { display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; transition: transform 0.2s ease, opacity 0.2s ease; }
.group.share .social-icon:hover { transform: translateY(-2px); opacity: 0.8; }
.group.share .social-icon svg { display: block; width: 24px; height: 24px; }
.socialmedia .share a.tiktok::before { content: ''; background-image: url(images/tiktok.png); background-size: 100% 100%; display: inline-block; vertical-align: middle; width: 24px; height: 24px; border-radius: 50%; }

.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Logos & Ratings */
.ko-logos { display: flex; flex-wrap: wrap; column-gap: 1.0em; row-gap: 1.0em; align-items: center; justify-content: center; margin: 0 auto; padding: 0; }
.ko-logos a { flex: 0 1 115px; }
.ko-logos a img { filter: grayscale(100%); transition: filter 2s; max-height: 45px; margin: 0 auto; }
.ko-logos a:hover img { filter: grayscale(0); transition: filter 0.3s; }

.h-review {
  background: var(--trans-hell-8);
  color: var(--dunkel);
  border-radius: 1rem;
  margin: 50px auto;
  padding: 1.5em;
  position: relative;
  display: grid;
  place-items: center;
}
.h-review h3 { margin: 10px auto; text-align: center; }
.h-review p { margin: 10px auto; }
.h-review span { color: var(--vibrant); font-size: var(--step-3); }
.h-review img { border-radius: 50%; display: block; margin: 0 auto 10px auto; text-align: center; height: 110px; width: 110px; }

/* Symbols & Mehrwertbox */
.symbol { display: block; margin: 0 auto; text-align: center; font-size: var(--step-3); }
.symbol.inline { display: inline-block; vertical-align: middle; }
.symbol.links, .symbol.left { float: left; margin: 0 25px 0 0; }
.symbol.rechts, .symbol.right { float: right; margin: 0 0 0 25px; }
.symbol.size-1::before { font-size: var(--step-1); }
.symbol.size-2::before { font-size: var(--step-2); }
.symbol.size-3::before { font-size: var(--step-3); }
.symbol.size-4::before { font-size: var(--step-4); }
.symbol.size-5::before { font-size: var(--step-5); }
.symbol.size-6::before { font-size: var(--step-6); }

.gsymbole {
  margin: 50px auto;
  text-align: center;
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}
.gsymbole .gsymbole-tab { background: rgba(255,255,255,0.5); border: none; display: block; height: auto; margin: 25px auto; padding: 25px; width: 100%; transition: all 0.3s; }
.gsymbole .gsymbole-tab:hover { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); }
.gsymbole .gsymbole-tab a { color: var(--dunkel-2); display: block; height: 100%; text-decoration: none; }
.gsymbole .gsymbole-tab a:hover h3 { color: var(--dunkel); }
.gsymbole .gsymbole-tab h3 { line-height: 1.25; margin: 10px auto; text-align: center; }
.gsymbole .gsymbole-tab p { margin: 0 auto; text-align: left; }
.gsymbole .gsymbole-tab p:empty { margin: 0; }
.gsymbole .gsymbole-tab .bild, .symbol .bild,
.gsymbole .gsymbole-tab.hell .bild, .symbol.hell .bild {
  background: var(--vibrant);
  border: 15px solid var(--vibrant);
  margin: 0 auto;
  text-align: center;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  transition: scale 0.3s;
}
.gsymbole .gsymbole-tab.dunkel .bild, .symbol.dunkel .bild { background: var(--dunkel-2); border: 15px solid var(--dunkel-2); }
.symbol .bild.image { border: none; }
.symbol .bild.image img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 100%; max-width: 250px; }
.gsymbole .gsymbole-tab .symbol::before,
.gsymbole .gsymbole-tab.hell .symbol::before {
  background: var(--vibrant);
  border: 15px solid var(--vibrant);
  color: #fff;
  margin: 10px auto;
  padding: 5px;
  text-align: center;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  transition: scale 0.3s;
}
.gsymbole .gsymbole-tab .bild:hover,
.gsymbole .gsymbole-tab .symbol:hover::before,
.symbol .bild:hover { scale: 1.05; }

/* ==========================================================================
   Mehrwertbox (Social Media / Web-Icons)
   ========================================================================== */

ul.mehrwertbox {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 2.5rem auto;
  padding: 0;
  width: 100%;
  max-width: 70ch;
}

ul.mehrwertbox .mehrwert-item {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

ul.mehrwertbox a {
  --icon-box-size: 44px; /* Mindestklickfläche nach WCAG: 44x44px */
  --icon-size: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  aspect-ratio: 1;
  border-radius: 50%; /* Kreisrund; für Squircle/Abgerundet z.B. 10px nutzen */
  background: var(--trans-dunkel-1, rgba(0, 0, 0, 0.06));
  color: var(--schwarz, #111111);
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

/* SVG Icon Skalierung */
ul.mehrwertbox a svg {
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  pointer-events: none;
}

/* Hover- & Focus-Status */
ul.mehrwertbox a:hover,
ul.mehrwertbox a:focus-visible {
  background: var(--trans-dunkel-2, rgba(0, 0, 0, 0.14));
  color: var(--dunkel, #000000);
  transform: translateY(-2px);
  outline: none;
}

ul.mehrwertbox a:focus-visible {
  box-shadow: 0 0 0 3px var(--vibrant, #4A7300);
}

/* Screenreader-Text visuell verbergen, aber lesbar halten */
ul.mehrwertbox .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Container-Spezifität für oum_location_description */
.oum_location_description ul.mehrwertbox {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 1.5rem auto;
  padding: 0;
  width: 100%;
  max-width: 70ch;
}

/* Automatisch generierte <br>-Tags im Flex-Container ausblenden */
.oum_location_description ul.mehrwertbox > br {
  display: none !important;
}

/* Listenelemente */
.oum_location_description ul.mehrwertbox li {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Icon-Links (Button-Styling) */
.oum_location_description ul.mehrwertbox a {
  --icon-box-size: 44px; /* Mindestklickfläche nach WCAG */
  --icon-size: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--trans-dunkel-1, rgba(0, 0, 0, 0.06));
  color: var(--schwarz, #111111);
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

/* SVG-Icons (falls vorhanden) */
.oum_location_description ul.mehrwertbox a svg {
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  pointer-events: none;
}

/* Textlabel (<span>) für Screenreader zugänglich halten, aber visuell verbergen */
.oum_location_description ul.mehrwertbox a span,
.oum_location_description ul.mehrwertbox .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Hover- & Focus-Zustände */
.oum_location_description ul.mehrwertbox a:hover,
.oum_location_description ul.mehrwertbox a:focus-visible {
  background: var(--trans-dunkel-2, rgba(0, 0, 0, 0.14));
  color: var(--dunkel, #000000);
  transform: translateY(-2px);
  outline: none;
}

.oum_location_description ul.mehrwertbox a:focus-visible {
  box-shadow: 0 0 0 3px var(--vibrant, #4A7300);
}

#content .gsymbole .gsymbole-tab.medium .bild { background: var(--medium); border-color: var(--medium); }
#content .gsymbole .gsymbole-tab a:hover .bild { animation: pulse-red 2s infinite; }

aside.kundenstimmenwrapper {
  margin: 50px auto;
  padding: 1rem;
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28ch), 1fr));
}
aside.kundenstimmenwrapper > * {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 1.5em;
  justify-content: space-between;
  height: 100%;
  font-size: var(--step--1);
}
aside.kundenstimmenwrapper p.e-content, aside.kundenstimmenwrapper p em { text-align: left; font-size: var(--step--1); }

/* Splits, Videos, Images & Maps */
.wrapsplits { display: block; margin-inline: auto; padding: 0; position: relative; text-align: center; max-width: var(--mwidth); }
.big .wrapsplits { max-width: var(--bigwidth); }
.bigger .wrapsplits { max-width: var(--biggerwidth); }
.full .wrapsplits { max-width: 100%; }
.wrapsplits .splits { display: block; padding: 1em 1.5em; position: relative; text-align: center; }
.wrapsplits .splits.bild {
  background-color: transparent;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-inline: auto;
  min-height: 400px;
  max-width: 800px;
  width: 100%;
}
.full .wrapsplits .splits.bild { max-width: 100%; }
.wrapsplits .splits img { border-radius: 1rem; }
.wrapsplits .splits.bild h2 { color: var(--weiss); margin: 25px auto; text-align: center; font-weight: 700; }
.wrapsplits .innertextsplits { display: block; margin-inline: auto; padding: 0; max-width: 70ch; text-align: left; }
.wrapsplits .innertextsplits h1, .wrapsplits .innertextsplits h2, .wrapsplits .innertextsplits h3 { margin: 1em 0; font-weight: 700; text-align: left; }
.wrapsplits .innertextsplits p { margin: 1.5em 0; text-wrap: pretty; }
.grafik .wrapsplits .splits.bild { min-height: 1px; padding-top: 2em; }
.grafik .wrapsplits .splits.bild .innerbildsplits { padding: 1.5em 0; }
.grafik.rund .wrapsplits .splits.bild .innerbildsplits { border-radius: 50%; aspect-ratio: 1; }
.grafik.rund .wrapsplits .splits.bild img.portrait { border-radius: 50%; object-fit: cover; }

.bildsplit article.wrap-inner-section { isolation: isolate; position: relative; }
.bildsplit .iicon { background-position: 50% 100%; background-repeat: no-repeat; background-size: 67% auto; opacity: 0.1; position: absolute; inset: 0; z-index: -1; }
.bildsplit.klein .iicon { background-size: 50% auto; }
.bildsplit.klein h2 { font-size: var(--step-2); }
.bildsplit h4, .bildsplit .h4 { font-size: var(--step-0); text-align: left; margin: 2em 0 1em 0; max-width: 150ch; }
.bildsplit p { hyphens: auto; margin: 1em 0; }
.bildsplit img.portrait { aspect-ratio: 1; border-radius: 50%; display: block; margin: 1em auto; object-fit: cover; width: 100%; shape-outside: circle(50%); }

.golfnetzwerk { border-bottom: 2px solid var(--trans-dunkel-1); display: block; margin: 25px auto; padding: 0 0 25px 0; position: relative; }
.golfnetzwerk h2, .golfnetzwerk h3 { margin: 0.5em 0; text-align: left; }
.golfnetzwerk h2 { font-size: var(--step-2); }
.golfnetzwerk h3 { font-size: var(--step-1); }
.golfnetzwerk img.portraitt { aspect-ratio: 1; border-radius: 50%; display: block; margin: 25px auto; object-fit: cover; width: 90%; max-width: 300px; }
.golfnetzwerk img.qrcode { display: block; margin: 25px auto; max-width: 150px; }
.golfnetzwerk .box { display: block; margin: 25px auto; }
.golfnetzwerk p { hyphens: auto; margin: 1em 0; }

.fragen { display: block; margin: 25px 0; padding: 25px 0; position: relative; }
.fragen-inner { background-color: rgba(255,255,255,0.5); border: 2px solid #fff; border-radius: 5px; min-height: 100px; margin: 0; padding: 15px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); }
.fragen .bild { background-color: transparent; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; position: relative; margin: 10px auto; padding: 10px; text-align: center; height: auto; width: 280px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); }
.fragen .bild img { border: 1px solid var(--weiss); display: block; margin: 0 auto; }
.fragen.rund .fragen-inner { min-height: 200px; }
.fragen.rund .bild { border-radius: 50%; height: 250px; width: 250px; padding: 0; }
.fragen.rund .bild img { border-radius: 50%; }
.fragen h3 { margin: 0 0 10px 0; text-align: left; font-size: var(--step-1); }
.fragen .text { margin: 0 auto; text-align: center; max-width: 70ch; }
.fragen .text p { margin: 1.5rem 0; text-align: left; }
.fragen .text ul { margin: 1.5rem; text-align: left; }
.fragen.dunkel .fragen-inner { background: var(--dunkel); border-color: var(--dunkel); color: var(--weiss); }
.fragen.dunkel .fragen-inner a, .fragen.dunkel .fragen-inner h3, .fragen.dunkel .fragen-inner strong { color: var(--weiss); }
.fragen.dunkel .bild img { border-color: var(--dunkel); }

.lesetipp { background: var(--trans-dunkel--1); border: 1px solid var(--trans-dunkel-1); border-radius: 5px; display: block; margin: 2.5rem auto; padding: 1rem; position: relative; }
.lesetipp .anzeige { display: block; font-size: 0.9em; margin: 0 0 10px 0; padding: 0; line-height: 100%; text-align: left; }
.lesetipp h2 { font-size: 1.3em; margin: 0; padding: 0; text-align: left; max-width: 100%; }
.lesetipp p { margin: 1rem 0; line-height: 1.4em; }
.lesetipp a { color: var(--schwarz); text-decoration: none; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; transition: filter 2s; }
.lesetipp a:hover { filter: grayscale(100%); transition: filter 0.3s; }
.lesetipp a > * { flex-grow: 1; flex-shrink: 1; flex-basis: 280px; }
.lesetipp a .anzeigen { color: var(--dunkel); text-decoration: underline; }
.lesetipp .thumby { display: block; margin: 1em auto; padding: 0; position: relative; width: 100%; aspect-ratio: 16/9; }
.lesetipp .thumby img { display: block; object-fit: cover; width: 100%; height: 100%; }

.mythumbnails { display: block; margin: 50px auto; position: relative; }
.mobile-screenshot { max-width: 240px; }
.mobile-screenshot.links { transform: rotate(-3deg); float: left; margin: 0.5rem 3rem 0.5rem 0; }
.mobile-screenshot.rechts { transform: rotate(3deg); float: right; margin: 0.5rem 0 0.5rem 3rem; }

.leistung { background: var(--hell); display: inline-block; margin: 10px 15px 10px 0; padding: 3px 10px; position: relative; vertical-align: middle; }
.leistungen { background: var(--hell); display: block; margin: 50px auto; padding: 15px; }
.inner-post-nav { background: var(--trans-hell-8); color: var(--dunkel); display: block; margin: 50px auto; padding: 15px; }
.inner-post-nav > * { display: block; padding: 10px 0; }
.inner-post-nav a { color: var(--schwarz); }
.inner-post-nav > .next { text-align: right; }

.fixbox { clear: both; display: block; background-color: var(--hell); background-image: var(--verlauf-medium); color: var(--dunkel-2); box-shadow: 0 -2px 5px rgba(0,0,0,0.1); position: relative; }
.fixbox .fixboxinner { background: transparent; color: var(--dunkel-2); padding: 10px 25px; }

video { margin-inline: auto; max-width: 100%; height: auto; text-align: center; }
.video-wrapper { display: block; clear: both; background: transparent; border: none; margin-inline: auto; width: 100%; max-width: 100%; }
#wrapper .video-wrapper { margin: 25px auto; }
#wrapper .full .video-wrapper { margin-inline: auto; }
.video-container { background: transparent; position: relative; aspect-ratio: 16/9; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed {
  background: transparent;
  margin-inline: auto;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-caption { background: var(--hell); margin: 1rem 0 0 0; padding: 1rem; }
.video-caption:empty { background: transparent; margin: 0; padding: 0; display: none; }
.framewrapper { display: block; }
.framewrapper iframe { height: auto; width: 100%; }

.my-frame, iframe.map-frame { border: none; padding: 0; text-align: center; min-height: 600px; height: 100%; width: 100%; }
.open-user-map-locations-list .oum-locations-list-item { align-items: center; }
.open-user-map-locations-list .oum-locations-list-item .oum_location_image { background-color: transparent !important; padding: 10px; flex-basis: 30% !important; }
.open-user-map-locations-list .oum-locations-list-item .oum_location_image img { background-color: transparent; }
.oum_location_text h3 { max-width: none !important; margin: 1em 0; text-align: left; }
.oum_location_description{text-align:left;}
.oum_location_text_bottom > .oum_read_more{display:block;min-width:200px}
.oum-locations-list-items { display: flex; flex-wrap: wrap; gap: 1rem; }
.oum-locations-list-items > * { flex: 1 1 550px; }
.oum_read_more a { display: block; visibility: hidden; position: relative; text-align: center; width: auto; }
.oum_read_more a::after {
  background: var(--vibrant);
  color: var(--weiss);
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  padding: 3px 8px;
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: "Weiter zur Infoseite";
  text-decoration: underline;
}
.leaflet-popup-content { scrollbar-width: thin; }

.open-user-map-image-gallery { display: flex !important; flex-wrap: wrap; column-gap: 2.5em; row-gap: 1.5em; align-items: center; justify-content: center; }
.open-user-map-image-gallery .oum-gallery-item { display: grid; place-items: center; flex: 0 1 135px; }
.open-user-map-image-gallery .oum-gallery-item a { display: block; padding: 0.5em; }
.open-user-map-image-gallery .oum-gallery-item img { object-fit: none; object-position: center; width: auto; height: auto; max-height: 100px; }

/* Captions & Alignment */
img.alignleft, .alignleft, img.alignright, .alignright, img.aligncenter, .aligncenter, img.alignnone, .alignnone {
  display: block;
  float: none;
  text-align: center;
  margin: 25px auto;
}
img.center { text-align: center; margin: 5px auto; }
img.kreis.alignleft { float: left; border-radius: 50%; height: 250px; width: 250px; shape-outside: circle(50%); margin: 1rem 2rem 1rem 0; }
img.kreis.alignright { float: right; border-radius: 50%; height: 250px; width: 250px; shape-outside: circle(50%); margin: 1rem 0 1rem 2rem; }
.beitragsbild { display: block; margin: 50px auto; }
.beitragsbild img { margin: 0 auto; text-align: center; }
figure.ko-einzelbild.center { margin: 0 auto; text-align: center; }
figure.ko-einzelbild.rund img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 100%; max-width: 350px; margin: 0 auto; text-align: center; }

.wp-caption { height: auto; margin: 50px auto; padding: 0; position: relative; text-align: center; width: auto; max-width: 100% !important; }
.wp-caption img { display: block; margin-inline: auto; padding: 0; text-align: center; max-width: 100% !important; height: auto; }
.wp-caption p { background: var(--hell); color: var(--dunkel); display: block; font-style: italic; margin: 5px auto; padding: 0.5em; text-align: center; }
.hell .wp-caption p { background: var(--trans-dunkel-1); }
.dunkel .wp-caption p { background: var(--trans-hell-2); }
blockquote .wp-caption { max-width: 100% !important; }
blockquote .wp-caption img { max-width: 100% !important; }
blockquote .wp-caption.alignleft, blockquote .wp-caption.alignright { float: none; max-width: 100%; }

/* Graphic Shapes & Effects */
.stroke {
  font-family: Helvetica, Verdana, sans-serif;
  font-size: 4rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--weiss);
}
.buntertext, section.module h2.buntertext, section.module.dunkel h2.buntertext {
  font-size: var(--step-6);
  font-weight: 800;
  letter-spacing: 4px;
  background-image: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 100%;
}
.text-mit-bg {
  font-size: var(--step-6);
  font-weight: 800;
  letter-spacing: 4px;
  background-image: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 300%;
  animation: coloranimation 5s infinite alternate;
  position: relative;
  z-index: 1;
}

.loader {
  border: 10px solid var(--vibrant);
  display: grid;
  place-items: center;
  margin: 25px auto;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  border-bottom: 10px solid var(--hell);
  animation: spin linear 3s infinite;
  transform-origin: center;
}
.rundlich { border-radius: 50%; animation: kontraste linear 10s infinite; transform-origin: center; filter: grayscale(0); overflow: hidden; }

.clip-rombus { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.clip-pfeil-links, .clip-pfeil-rechts { clip-path: polygon(0% 0%, 100% 0, 100% 85%, 50% 100%, 0 85%); }
.clip-up { clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 100%, 0 100%); }
.clip-kreis { clip-path: circle(50% at 50% 50%); }
.clip-stern { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.clip-parallelogram-r { clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%); }
.clip-parallelogram-l { clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%); }
.clip-polygon { clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%); }
.clippara { animation: clippara 6s infinite; transition: animation 0.3s; }
.coloranimation { background-image: var(--gradient); background-size: 500%; animation: coloranimation 5s infinite alternate; }

.wraptextbox { display: flex; flex-wrap: wrap; gap: var(--gap); margin: 50px auto; }
.wraptextbox > * { flex: 1 1 var(--max); }
.textbox {
  border: 1px solid #ddd;
  display: block;
  height: 100%;
  width: 100%;
  margin-inline: auto;
  padding: 1rem 1.5rem;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  scale: 0.9;
  transition: scale 0.3s ease-in-out;
}
.textbox.go, .nojs .textbox { scale: 1.0; }
.textbox img { display: block; margin: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.textbox.backdrop::before { content: ''; position: absolute; inset: 0; background: blue; mix-blend-mode: multiply; }
.textbox2 { display: grid; grid-gap: 3em; grid-template-columns: 2fr 1fr; place-items: center; }

ul.fortschritte { background: var(--dunkel); color: var(--weiss); margin: 50px auto; padding: 0; }
ul.fortschritte li {
  display: grid;
  place-items: center;
  list-style: none;
  margin: 0;
  padding: 15px;
  position: relative;
  width: 100%;
  height: 500px;
  min-height: 50vh;
  z-index: 1;
}
ul.fortschritte li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 10px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1s ease-in;
  z-index: 10;
}
ul.fortschritte li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 10px;
  background: var(--trans-hell-2);
  z-index: 9;
}
ul.fortschritte li.go::before, .nojs ul.fortschritte li::before {
  background: var(--vibrant);
  transform: scaleY(1);
  transform-origin: top;
  transition-delay: 2s;
}

.wrap-bilder-effekte { background-color: transparent; border-radius: 9px; display: block; height: 0; margin: 50px auto; padding: 0 0 56.5% 0; overflow: hidden; position: relative; }
.wrap-bilder-effekte > .bilder-effekte { background-position: bottom center; background-size: cover; background-attachment: fixed; height: 100%; width: 100%; position: absolute; inset: 0; opacity: 0; }

.wrap-bilder-effekte.go > .bilder-effekte.effekt1, .nojs .wrap-bilder-effekte > .bilder-effekte.effekt1 { animation: koslices1 0.5s ease-in-out forwards; }
.wrap-bilder-effekte.go > .bilder-effekte.effekt2, .nojs .wrap-bilder-effekte > .bilder-effekte.effekt2 { animation: koslices2 0.5s ease-in-out forwards; }
.wrap-bilder-effekte.go > .bilder-effekte.effekt3, .nojs .wrap-bilder-effekte > .bilder-effekte.effekt3 { animation: koslices3 0.5s ease-in-out forwards; }
.wrap-bilder-effekte.go > .bilder-effekte.effekt4, .nojs .wrap-bilder-effekte > .bilder-effekte.effekt4 { animation: koslices4 0.5s ease-in-out forwards; }
.wrap-bilder-effekte.go > .bilder-effekte.effekt5, .nojs .wrap-bilder-effekte > .bilder-effekte.effekt5 { animation: koslices5 0.5s ease-in-out forwards; }

.slideup { animation: sslideUp 0.9s ease both; }
.slidedown { animation: sslideDown 0.9s ease 0.3s both; }
.ko-animate-fading { animation: fading 0.9s; }


/* ==========================================================================
   14. KEYFRAME ANIMATIONS
   ========================================================================== */

@keyframes pulse-green {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(117, 167, 11, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(117, 167, 11, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(117, 167, 11, 0); }
}

@keyframes pulse-red {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(190,18,32, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(190,18,32, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(190,18,32, 0); }
}

@keyframes spin {
  0% { rotate: 0deg; }
  100% { rotate: 360deg; }
}

@keyframes kontraste { 0%, 100% {} 50% {} }

@keyframes clippara {
  0%, 100% { clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%); }
  50% { clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%); }
}

@keyframes coloranimation {
  0% { background-position: left top; }
  100% { background-position: right bottom; }
}

@keyframes moveX { from { left: 0; } to { left: var(--golfball); } }
@keyframes moveY { from { top: 0; } to { top: var(--golfball); } }

@keyframes koslices1 {
  0% { opacity: 0; transform: translateY(-100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes koslices2 {
  0% { opacity: 0; transform: scale(0) rotate(25deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes koslices3 {
  0% { opacity: 0; transform: translateY(-100%) scale(0) rotate(-35deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes koslices4 {
  0% { opacity: 0; filter: blur(10px); }
  100% { opacity: 1; filter: blur(0); }
}
@keyframes koslices5 {
  0% { opacity: 0; transform: scale(0) rotate(45deg) translateY(-100%); }
  100% { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); }
}

@keyframes sslideUp {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes sslideDown {
  0% { opacity: 0; transform: translateY(-100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fading {
  0% { opacity: 0; transform: scaleY(0); transition: transform 250ms ease-in; }
  100% { opacity: 1; transform: scaleY(1); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-30px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes translate-left-in-out {
  0%, 100% { transform: translateX(0); }
}


/* ==========================================================================
   15. CONSOLIDATED MEDIA QUERIES (ASCENDING)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breakpoint: min-width: 35rem (560px)
   -------------------------------------------------------------------------- */
@media (min-width: 35em) {
  .contact-form {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   Breakpoint: min-width: 40rem (640px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 40rem) {
  /* Tables: Revert to standard table layout */
  th, td { display: table-cell; }
  td::before { display: none; }

  /* News List */
  ul.news:not(.grid) li {
    clear: both;
    margin: 75px auto;
    padding: 1rem 2rem;
    position: relative;
    max-width: var(--mwidth);
  }
  ul.news:not(.grid) li a {
    display: flex;
    gap: 2rem;
    align-items: center;
    padding: 0;
  }
  ul.news:not(.grid) li .thumbnail {
    flex-shrink: 0;
    width: 280px;
    height: auto;
    margin: 0;
    padding: 0;
    border-radius: 5px;
  }
  ul.news:not(.grid) li .text { flex-grow: 1; }
  ul.news:not(.grid) li h2,
  ul.news:not(.grid) li h3 { margin: 10px 0; }
  ul.news:not(.grid) li .thumbnail img { margin: 0; }
  ul.news.grid li .thumbnail { max-width: 100%; }

  .inner-post-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
  }
}

/* --------------------------------------------------------------------------
   Breakpoint: min-width: 50rem (800px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 50rem) {
  ul.news:not(.grid) li .thumbnail { width: 400px; }
  ol.commentlist li.comment ul { padding: 0 0 0 2rem; }
  #footer ul li { text-align: left; }

  .bildsplit.klein article { min-height: 525px; }
  .bildsplit img.portrait { width: 50%; }
  .bildsplit.klein img.portrait { width: 33%; }
  .bildsplit.links img.portrait { float: left; margin: 2em 2em 1em 0; }
  .bildsplit.rechts img.portrait { float: right; margin: 2em 0 1em 2em; }
  .bildsplit.rechts.klein img.portrait,
  .bildsplit.links.klein img.portrait { margin-top: 0; }

  .bildsplit.links .iicon { background-position: 95% 100%; background-size: 33% auto; }
  .bildsplit.rechts .iicon { background-position: 5% 100%; background-size: 33% auto; }

  .fragen { padding: 25px 0; min-height: 100px; }
  .fragen .fragen-inner,
  .fragen.rechts .fragen-inner { margin: 0 105px 0 50px; padding: 25px 200px 25px 25px; }
  .fragen.links .fragen-inner { margin: 0 50px 0 105px; padding: 25px 25px 25px 200px; }
  .fragen .bild { display: block; position: absolute; top: 0; }
  .fragen.rechts .bild { right: 0; }
  .fragen.links .bild { left: 0; }
  .fragen h3 { text-align: left; }

  /* Animations triggered via classes */
  .zoomfadein { opacity: 0; scale: 0.9; transition: opacity 0.5s linear, scale 0.5s ease-in-out; }
  .zoomfadein.go, .nojs .zoomfadein { opacity: 1; scale: 1; }

  .upfadein { opacity: 0; transform: translateY(100px); transition: opacity 0.5s linear, transform 0.5s ease-in-out; }
  .upfadein.go, .nojs .upfadein { opacity: 1; transform: translateY(0); }

  .push { opacity: 0; transform: translateX(-5rem); transition: opacity 0.5s linear, transform 0.5s ease-in-out; }
  .push.go, .nojs .push { opacity: 1; transform: translateX(0); }

  .fadeInLeft {
    animation: fadeInLeft 1s cubic-bezier(0.68, 0, 0.265, 1) 0s 1 both;
  }
}

/* --------------------------------------------------------------------------
   Breakpoint: min-width: 55rem (880px)
   -------------------------------------------------------------------------- */
@media all and (min-width: 55rem) {
  .carousel__texte {
    background: var(--trans-hell-8);
    color: var(--dunkel);
    position: absolute;
    bottom: 10%;
    left: 1rem;
    max-width: 65ch;
    padding: 1em;
    z-index: 500;
  }
}

/* --------------------------------------------------------------------------
   Breakpoint: min-width: ~780px (Special components)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 720px) {
  .wrapbslider .elemente { position: absolute; bottom: 5%; left: 50%; transform: translate(-50%, 0); }
  .wrapbslider.mega .elemente { bottom: 12%; }
  .wrapbslider .elemente.big .text.eins,
  .wrapbslider .elemente.big .text.eins h1 { line-height: 1; padding: 0 25px; }
}

@media screen and (min-width: 779px) {
  .klickmichan, #content .klickmichan {
    margin: 0;
    padding: 15px;
    position: fixed;
    left: 10px;
    top: 45%;
    z-index: 5000;
  }
}

/* --------------------------------------------------------------------------
   Breakpoint: min-width: 62.5rem (1000px)
   -------------------------------------------------------------------------- */
@media all and (min-width: 62.5rem) {
  .wrapsplits { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
  #topsegment .wrapsplits { padding: 2em 0; }
  .wrapsplits .splits { min-height: 500px; display: flex; align-items: center; justify-content: center; }
  .wrapsplits .splits.bild { margin: inherit; padding: 0 25px; }
  .grafik .wrapsplits .innertextsplits { padding: 0; }
  .grafik .wrapsplits .splits.bild { padding-top: 0; }
  .wrapsplits.links .innertextsplits { padding: 1.5em 0 1.5em 1.5em; }
  .wrapsplits.rechts .innertextsplits { padding: 1.5em 1.5em 1.5em 0; }
  .wrapsplits.rechts .splits.bild { order: 2; }
  .wrapsplits.rechts .splits.text { order: 1; }

  .wrapsplits .splits.bild img:not(.clip, .zoom-in-left img, .zoom-in-right img) {
    transform: perspective(3000px) rotateY(0);
    transition: transform 1s ease 0s;
  }
  .wrapsplits.rechts .splits.bild:hover img:not(.clip, .zoom-in-left img, .zoom-in-right img) {
    transform: perspective(3000px) rotateY(-15deg);
  }
  .wrapsplits.links .splits.bild:hover img:not(.clip, .zoom-in-left img, .zoom-in-right img) {
    transform: perspective(3000px) rotateY(15deg);
  }

  .golfnetzwerk { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 25px; }
  .golfnetzwerk.rechts { grid-template-columns: 2fr 1fr; }
  .golfnetzwerk.rechts .mehrwertboxbild { order: 2; }
  .golfnetzwerk.rechts .mehrwertboxtext { order: 1; }

  .clip-pfeil-links { clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 15% 100%, 0% 50%); }
  .clip-pfeil-rechts { clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%); }

  img.alignleft, .alignleft { float: left; margin: 10px 50px 10px 0; }
  img.alignright, .alignright { float: right; margin: 10px 0 10px 50px; }
  img.alignnone, .alignnone { display: block; float: none; text-align: left; margin: 25px 0; }

  #topsegment a.button { margin: 35px 0 10px 0; }

  section.module.dunkel.verlauf {
    background: radial-gradient(circle at 66% 50%, rgba(255, 255, 255, 1) 0%, rgba(98, 128, 184, 1) 0%, rgba(0, 54, 103, 1) 50%, rgba(0, 54, 103, 1) 100%);
  }
  section.module.dunkel.verlauf2 {
    background-image: linear-gradient(to right, var(--dunkel), rgba(0, 69, 131, 0.6));
  }

  .fixbox { display: block; position: fixed; bottom: 0; left: 0; width: 100%; padding: 0; z-index: 800; }
  .fixbox .fixboxinner { background-color: transparent; color: var(--dunkel-2); padding: 0.5em 1em; }
}

/* --------------------------------------------------------------------------
   Mobile Offcanvas Navigation (max-width: 79.999rem)
   -------------------------------------------------------------------------- */
@media all and (max-width: 79.999rem) {
    /* Burger-Button (Standard) */
    .ko-menu {
        background: transparent;
        border: 0;
        width: 35px;
        height: 27px;
        margin: 10px;
        position: relative; /* Muss positioniert sein, damit z-index wirkt */
        z-index: 10000;      /* WICHTIG: Höher als nav#konavigation (9999) */
        cursor: pointer;
        display: inline-block;
    }

    /* Klicks auf die Balken an den Button durchreichen */
    .ko-menu span {
        background-color: var(--dunkel-2);
        position: absolute;
        border-radius: 3px;
        transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
        pointer-events: none;
    }

    .ko-menu span:first-child { width: 100%; height: 3px; display: block; top: 0; left: 0; }
    .ko-menu span:nth-child(2) { width: 100%; height: 3px; display: block; top: 12px; left: 0; }
    .ko-menu span:nth-child(3) { width: 100%; height: 3px; display: block; bottom: 0; left: 0; }

    /* Wenn das Menü offen ist, muss der Button immer noch sichtbar sein */
    .ko-menu.open { 
        transform: rotate(-90deg); 
        position: fixed;     /* Ändert Position auf fixed, damit er beim Scollen über dem fixierten Menü bleibt */
        right: 15px;         /* Optional: Setzt ihn rechtsbündig fest, falls das Menü von rechts kommt */
        top: 10px;           /* Behält den Abstand von oben bei */
        z-index: 10000;      /* Über dem Navigations-Container */
    }

    /* Die inneren Linien verändern ihre Farbe bei geöffnetem Menü (da der Hintergrund nun dunkelgrün ist) */
    .ko-menu.open span {
        background-color: var(--weiss) !important; /* Weiß statt dunkel-2, damit man das 'X' auf grünem Grund sieht */
    }

    .ko-menu.open span:first-child { 
        left: 3px; 
        top: 12px; 
        width: 30px; 
        transform: rotate(90deg); 
        transition-delay: 150ms; 
    }
    .ko-menu.open span:nth-child(2) { 
        left: 2px; 
        top: 20px; 
        width: 20px; 
        transform: rotate(45deg); 
        transition-delay: 50ms; 
    }
    .ko-menu.open span:nth-child(3) { 
        left: 14px; 
        top: 20px; 
        width: 20px; 
        transform: rotate(-45deg); 
        transition-delay: 0.1s; 
    }

    /* Grundzustand: Außerhalb des sichtbaren Bereichs (rechts) */
    nav#konavigation {
        font-size: var(--step-1);
        margin: 0;
        position: fixed;
        top: 0;
        right: -100%;
        left: auto;
        height: 100%;
        width: 70%;
        max-width: 400px;
        z-index: 9999;
        transition: right 0.4s ease-in-out;
        isolation: isolate;
        background-color: rgba(73, 115, 32, 0.95);
        -webkit-backdrop-filter: invert(100%);
        backdrop-filter: invert(100%);
    }

    /* Zustand geöffnet */
    nav#konavigation.open {
        right: 0;
        box-shadow: -5px 0 15px var(--trans-dunkel-2);
    }

    .nav__container {
        position: absolute;
        inset: 0;
        padding: 25px 15px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: var(--hell) var(--dunkel);
        scrollbar-width: thin;
    }

    .nav__container::-webkit-scrollbar { width: 10px; }
    .nav__container::-webkit-scrollbar-track { background: var(--dunkel-2); }
    .nav__container::-webkit-scrollbar-thumb { 
        background: var(--hell); 
        border: 1px solid var(--dunkel); 
        border-radius: 3rem; 
    }

    /* Menü-Elemente */
    nav#konavigation ul, 
    nav#konavigation li { 
        background: transparent; 
        display: block; 
        margin: 0; 
        padding: 0; 
        text-align: left; 
        width: auto; 
    }

    nav#konavigation ul a:not(.share a) {
        background: transparent;
        color: var(--weiss);
        display: inline-block;
        font-family: var(--font-secondary);
        font-weight: 500;
        margin: 0;
        padding: 10px 10px;
        position: relative;
        text-decoration: none;
    }

    nav#konavigation li::before { 
        color: var(--weiss); 
    }

    nav#konavigation ul a:not(.share a):hover,
    nav#konavigation ul a:not(.share a):focus,
    nav#konavigation.open a:not(.share a)[aria-current="page"],
    nav#konavigation ul ul a:hover,
    nav#konavigation ul ul a[aria-current="page"] {
        color: var(--weiss);
        background: var(--trans-dunkel-2);
    }

    nav#konavigation ul a:not([href]) { 
        cursor: text; 
    }

    nav#konavigation li.menu-item-has-children > a::after { 
        font-size: var(--step-0); 
        text-decoration: none; 
        margin: 0 0 0 10px; 
    }

    nav#konavigation li.menu-item-has-children li a::after { 
        content: ''; 
        margin: 0; 
        padding: 0; 
        width: 0; 
    }

    nav#konavigation li.current_page_ancestor a::after { 
        color: var(--weiss); 
    }

    /* Suche / Share */
    nav#konavigation li.sosearch { 
        text-align: center; 
        padding: 15px 0; 
    }

    nav#konavigation li.sosearch .group.share { 
        margin: 15px auto; 
        gap: 2.5rem; 
    }

    nav#konavigation li.sosearch .group.share a { 
        color: var(--weiss); 
        background: transparent; 
    }

    nav#konavigation li.sosearch .searchbutton::before { 
        color: var(--hell); 
        font-size: 2.5rem; 
        cursor: pointer; 
        margin: 0 auto; 
        text-align: center; 
        transform: scaleX(-1); 
    }
}

/* --------------------------------------------------------------------------
   Breakpoint: Desktop Header & Menu (min-width: 80rem)
   -------------------------------------------------------------------------- */
@media all and (min-width: 80rem) {
  #wrapheader { background: var(--trans-hell-8); }
  #header { height: 90px; padding: 0 25px; }

  .ko-menu { display: none; }

  nav#konavigation, nav#konavigation.open {
    border: none;
    display: block;
    font-size: var(--step--1);
    height: auto;
    margin: 0;
    overflow: visible;
    position: relative;
    text-align: center;
    width: auto;
    z-index: 900;
    box-shadow: none;
  }
  nav#konavigation ul { display: inline-block; margin-inline: auto; text-align: left; vertical-align: middle; z-index: 901; }
  nav#konavigation ul li { display: inline-block; padding: 10px; position: relative; }

  nav#konavigation a:not(.share a) {
    color: var(--dunkel-2);
    border-bottom: 2px solid transparent;
    font-family: var(--font-secondary);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin: 0 0.6em 0 0;
    padding: 5px;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
  }
  nav#konavigation a:not(.share a)[aria-current="page"] { color: var(--medium); border-color: var(--medium); }

  nav#konavigation li.kontakt { padding-right: 0; }
  nav#konavigation li.kontakt > a {
    background: var(--vibrant);
    color: var(--on-vibrant);
    border-radius: 1rem;
    border-color: transparent;
    margin: 0;
    padding: 0.5em 1em;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
  }
  nav#konavigation li.kontakt > a:hover,
  nav#konavigation li.kontakt > a:focus,
  nav#konavigation li.kontakt > a[aria-current="page"] {
    background: var(--vibrant-hov);
    color: var(--on-vibrant-hov);
    border-color: transparent;
  }

  nav#konavigation a:not(.share a)::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--medium);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 250ms ease-in;
  }
  nav#konavigation a:hover:not(li.kontakt > a):not(.share a)::before,
  nav#konavigation a:focus:not(li.kontakt > a, .share a)::before {
    transform: scaleX(1);
    transform-origin: center;
  }

  nav#konavigation ul.sub-menu {
    background: var(--weiss);
    border-radius: 9px;
    color: var(--dunkel);
    height: auto;
    top: 100%;
    left: -100vw;
    opacity: 0;
    margin: 0;
    padding: 5px;
    position: absolute;
    width: 400px;
    transition: opacity 0.6s ease-in-out;
  }
  nav#konavigation li:hover > ul.sub-menu,
  nav#konavigation li:active > ul.sub-menu,
  nav#konavigation li:focus > ul.sub-menu {
    left: 0;
    opacity: 1;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  }
  nav#konavigation ul.sub-menu ul { border: none; margin: 0; padding: 10px; }
  nav#konavigation ul.sub-menu li { border: none; display: block; padding: 0; width: auto; }
  nav#konavigation ul.sub-menu a {
    display: block;
    font-weight: 400;
    font-size: var(--step--1);
    margin: 0;
    padding: 10px 15px;
    border: none;
    transition: background 0.6s ease-in-out;
  }
  nav#konavigation ul.sub-menu a:hover,
  nav#konavigation ul.sub-menu a:focus {
    background-color: var(--hell);
    padding: 10px 15px;
  }
  nav#konavigation ul.sub-menu a[aria-current="page"] { text-decoration: underline; }
  nav#konavigation ul.sub-menu a::before { display: none; }
  nav#konavigation li.menu-item-has-children > a::after { font-size: var(--step--2); text-decoration: none; margin: 0 0 0 10px; }

  nav#konavigation li.sosearch {
    background: var(--medium);
    position: fixed;
    top: 125px;
    right: -1px;
    text-align: center;
    width: 50px;
    border-radius: 0.5em 0 0 0.5em;
    box-shadow: -3px 3px 5px var(--trans-dunkel-2);
  }
  nav#konavigation li.sosearch .group.share { flex-direction: column; margin: 0 auto; gap: 1rem; }
  nav#konavigation li.sosearch .socialmedia .share a { color: var(--weiss); background: transparent; font-size: 1.8rem; margin: 0 auto; transition: color 0.3s ease-in-out; }
  nav#konavigation li.sosearch .socialmedia .share a:hover { color: var(--trans-hell-8); }
  nav#konavigation li.sosearch .search { text-align: center; padding: 10px 0; }
  nav#konavigation li.sosearch .search .searchbutton::before { color: var(--weiss); font-size: 1.8rem; cursor: pointer; transform: scaleX(-1); margin: 0 auto; transition: color 0.3s ease-in-out; }
  nav#konavigation li.sosearch .search .searchbutton:hover::before { color: var(--trans-hell-8); }

  .scrolled div.st { transform: translateY(90px); }
}

/* --------------------------------------------------------------------------
   Breakpoint: min-width: 90rem (1440px)
   -------------------------------------------------------------------------- */
@media all and (min-width: 90rem) {
  article.myref { margin: 100px auto 200px auto; }
  article.myref .mythumbnail { transform: perspective(3000px) rotateY(20deg) translateX(75px); }
  article.myref:hover .mythumbnail { transform: perspective(3000px) rotateY(0deg) translateX(75px); }
  article.myref .mytext { transform: translateX(-75px); padding: 4rem 2rem; }

  .wrapsplits .splits.bild, .wrapsplits .splits.text { padding: 0; }
  .wrapsplits.links .innertextsplits { padding: 2.5em 0 2.5em 4em; }
  .wrapsplits.rechts .innertextsplits { padding: 2.5em 4em 2.5em 0; }
  .full .wrapsplits.links .innertextsplits { padding: 2.5em 0 2.5em 1em; }
  .full .wrapsplits.rechts .innertextsplits { padding: 2.5em 1em 2.5em 0; }

  .carousel__texte {
    background: var(--trans-hell-8);
    color: var(--dunkel);
    position: absolute;
    bottom: 15%;
    left: 1rem;
    max-width: 65ch;
    padding: 1em;
    z-index: 500;
  }
}

/* --------------------------------------------------------------------------
   Device- & Accessibility-Queries
   -------------------------------------------------------------------------- */
@media only screen and (max-device-width: 1366px) {
  section.module.parallax { background-attachment: scroll; }
}

@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;
  }
}