/*
Theme Name: Lieblingsmaler 2026
Theme URI: https://lieblingsmaler.de/
Description: MeinMaler Lieblingsmaler
Version: 7.00
Author: Klaus Oppermann
Author URI: http://www.klausoppermann.de
*/

/* https://gwfh.mranftl.com/fonts  */

/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-v44-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v44-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-v44-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/open-sans-v44-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* https://mycolor.space/?hex=%237D776D&sub=1 */

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

  --weiss: #fff; /* weiss */
  --hell: #f7f7f7;  /* hell */
  --soft: #00a6dd; /* hellblau */
  --medium: #014a8f;   /* medium */  
  --dunkel: #002968;    /* dunkel */
  --dunkel-grau: #111;
  --schwarz: #000; /* schwarz */


  --vibrant: #bf1724; /* orange */
  --on-vibrant: #fff;    /* weiss */
  --vibrant-hov: #bf1724; /* orange */
  --on-vibrant-hov: #fff;  /*  weiss */

  --warning: #bf1724;   /* rot */
  --success: #497b00;  /* gruen */


  /* Dunkle Transparenzen gebunden an var(--schwarz) */
  --trans-dunkel--2: color-mix(in srgb, var(--schwarz) 3%, transparent);
  --trans-dunkel--1: color-mix(in srgb, var(--schwarz) 5%, transparent);
  --trans-dunkel-1:  color-mix(in srgb, var(--schwarz) 10%, transparent);
  --trans-dunkel-2:  color-mix(in srgb, var(--schwarz) 20%, transparent);
  --trans-dunkel-3:  color-mix(in srgb, var(--schwarz) 30%, transparent);
  --trans-dunkel-4:  color-mix(in srgb, var(--schwarz) 40%, transparent);
  --trans-dunkel-5:  color-mix(in srgb, var(--schwarz) 50%, transparent);
  --trans-dunkel-6:  color-mix(in srgb, var(--schwarz) 60%, transparent);
  --trans-dunkel-7:  color-mix(in srgb, var(--schwarz) 70%, transparent);
  --trans-dunkel-8:  color-mix(in srgb, var(--schwarz) 80%, transparent);
  --trans-dunkel-9:  color-mix(in srgb, var(--schwarz) 90%, transparent);

  /* Helle Transparenzen gebunden an var(--weiss) */
  --trans-hell--1:   color-mix(in srgb, var(--weiss) 5%, transparent);
  --trans-hell-1:    color-mix(in srgb, var(--weiss) 10%, transparent);
  --trans-hell-2:    color-mix(in srgb, var(--weiss) 20%, transparent);
  --trans-hell-3:    color-mix(in srgb, var(--weiss) 30%, transparent);
  --trans-hell-4:    color-mix(in srgb, var(--weiss) 40%, transparent);
  --trans-hell-5:    color-mix(in srgb, var(--weiss) 50%, transparent);
  --trans-hell-6:    color-mix(in srgb, var(--weiss) 60%, transparent);
  --trans-hell-7:    color-mix(in srgb, var(--weiss) 70%, transparent);
  --trans-hell-8:    color-mix(in srgb, var(--weiss) 80%, transparent);
  --trans-hell-9:    color-mix(in srgb, var(--weiss) 90%, transparent);


/* @link https://utopia.fyi/type/calculator?c=320,16,1.067,1240,18,1.2,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
  --step-0: clamp(1.00rem, calc(0.96rem + 0.22vw), 1.13rem);
  --step-1: clamp(1.07rem, calc(1.00rem + 0.35vw), 1.27rem);
  --step-2: clamp(1.14rem, calc(1.04rem + 0.50vw), 1.42rem);
  --step-3: clamp(1.22rem, calc(1.08rem + 0.67vw), 1.60rem);
  --step-4: clamp(1.30rem, calc(1.12rem + 0.88vw), 1.80rem);
  --step-5: clamp(1.38rem, calc(1.16rem + 1.12vw), 2.03rem);
  --step-6: clamp(1.48rem, calc(1.20rem + 1.40vw), 2.6rem);
  
  --headline-font: 'Noto Sans JP',Arial, Verdana, Helvetica,sans-serif;
  --headline-color: #000; /* schwarz */

  --but-pad: 1em 1.5em;
  --min: 28ch;
  --max: 70ch;
  --gap: 1.5rem;

  --mwidth: 68rem;
  --bigwidth: 92rem;
  --biggerwidth: 100rem;
  --fullwidth: 120rem;
  
  --transition-smooth: cubic-bezier(0.25, 1, 0.5, 1);

}

/* ==========================================================================
   1. MODERNER CSS RESET
   ========================================================================== */

/* 1.1 Box-Sizing für alle Elemente vereinheitlichen */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 1.2 Sanfter Bildlauf & Textgrößen-Optimierung */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* 1.3 Body-Grundkonfiguration */
body {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  line-height: 1.7;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

/* 1.4 Medien-Elemente flexibel & responsive halten */
img,
picture,
video,
canvas {
  display: block;
  max-inline-size: 100%;
  max-width: 100%;
  height: auto;
}

/* 1.5 Typografie- & Formular-Vererbung */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* 1.6 Textarea Standard-Verhalten */
textarea {
  resize: vertical;
  field-sizing: content; /* Modern: Passt sich automatisch dem Inhalt an (Progressive Enhancement) */
}

/* 1.7 Cursor für interaktive Steuerelemente */
button,
label,
select,
summary,
[role="button"],
input[type="checkbox"],
input[type="radio"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  cursor: pointer;
}

/* 1.8 Listen ohne Semantik-Verlust bereinigen (nur wenn class-basiert oder explizit gewünscht) */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* 1.9 Barrierefreie Focus-Styles (Outline niemals global entfernen!) */
:focus-visible {
  outline: 2px solid var(--vibrant, #bf1724);
  outline-offset: 3px;
}

/* 1.10 Rücksichtnahme auf Nutzer mit Bewegungsempfindlichkeit */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Allgemein */

html{background:var(--dunkel);}
body{background:var(--body-bg);color:var(--dunkel-grau);
font-family:'Roboto',Arial, Verdana, Helvetica,sans-serif;font-size:var(--step-0);font-weight:400;line-height:1.7;
margin:0;padding:0;text-align:center;position:relative;overflow-x: clip;}

a,a:hover,a:focus{color:var(--dunkel);text-decoration:underline;transition: color 0.5s;}
a:hover,a:focus{color:var(--schwarz);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}

button{outline-color:transparent;}
code{font-family:'courier new', serif;font-style:normal;}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--headline-color);display:block;font-family:var(--headline-font);font-weight:700;line-height:1.3;margin:1.5em auto 1em auto;text-align:center;text-wrap: balance;-webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;}

h1,.h1{font-size:var(--step-6);letter-spacing:1px;margin:1.5em auto;max-width:var(--bigwidth);font-weight:700}
h1 b{display:inline-block;font-size:var(--step-6);letter-spacing:1px;font-style:normal;}
h1 span{display:block;font-size:var(--step-2);margin:0.5em auto 0 auto;}

h2,.h2{font-size:var(--step-5);}
h3,.h3{font-size:var(--step-3);}
h4,.h4{font-size:var(--step-2);}
h5,.h5{font-size:var(--step-2);}
h6,.h6{font-size:var(--step-1);}

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}

hr{background:var(--dunkel);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;}

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}

ol {text-align:left;}

ul{margin:25px auto;text-align:left;}
ul li,ul.postinfos li {list-style-type: square;}
ul li{padding:5px;position:relative;}
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}
ul.big{font-size:var(--step-3);max-width:80ch;}
ul.big li{list-style:none;}

small{font-size:var(--step--1);line-height:1.4}
cite, em{font-style:italic}
pre{margin:15px 0;overflow:auto;}
pre a{font-weight:400;}
strong{font-weight:700;}
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;}
small{font-size:var(--step--1);font-style:italic}

table{margin:50px auto;border-collapse:collapse;width:100%;outline:1px solid var(--trans-dunkel-2);}
tr{background:var(--trans-dunkel--1);display:table-row;}
tr:nth-child(even){background:var(--trans-hell-1);}
th, td{color:var(--schwarz);display: table-cell;text-align: left;padding:0.5em;}
th{display: none;}
td{display:block;}
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)}

@media screen and (min-width: 40rem) {
th,td{display: table-cell;}
td::before {display:none;}
th{background:var(--dunkel);color:var(--weiss);font-weight: 700;}
}



/*  Sonstiges   */

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

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}

.clear{clear:both;display:block;margin-inline:auto;padding:1rem 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;}

.mail .icon-mail {
    display: inline-flex;
    align-items: center;
    gap: 0.4em; /* Abstand zwischen Icon und Text */
    text-decoration: none;
}

.mail .email-icon {
    width: 1.1em;
    height: 1.1em;
    font-size:1.5rem;
    vertical-align: middle;
}

/* Grundlegende Button-Formatierung */
.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; /* Abstand zwischen Icon und Text */
    margin:1.5rem 0;
    padding: 10px 20px;
    background-color: var(--vibrant); /* Button-Farbe (anpassen) */
    color: var(--weiss) !important; /* Textfarbe */
    text-decoration: none;
    border-radius: 9px;
    font-weight: bold;
    transition: background-color 0.4s ease, color 0.4s ease, opacity 0.4s ease;
}

/* Hover- & Focus-Effekt für den Link-Button */
.mail.is-cta-button a:hover,
.mail.is-cta-button a:focus {
    background-color: var(--vibrant-hov); /* Dunklere Farbe beim Drüberfahren */
    color: var(--schwarz);
    text-decoration: none;
    opacity:0.9;
}

/* Icon-Ausrichtung im Button */
.mail.is-cta-button .email-icon {
    font-size: 1.2em;
    vertical-align: middle;
}

.modern-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin:1.5rem;
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 9999px; /* Pill-Shape */
    background-color: var(--cta-background, #0073aa);
    color: var(--cta-color, #ffffff);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

.modern-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    filter: brightness(1.06);
    color: var(--cta-color, #ffffff);
    text-decoration: none;
}

.modern-cta-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.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);}
.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));}

.hyphens{hyphens: auto;}

#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%;height:50px;width:50px;transition: all 0.3s;}
#searchform button:hover{background:var(--dunkel);}
#searchform button::before{color:var(--on-vibrant);margin:0;}
#searchform button:hover::before{color:var(--weiss);}

/* Header */

#wrapheader {
  background: var(--weiss);
  box-shadow:0 3px 5px var(--trans-dunkel-4);
  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: 90px;
  margin-inline: auto;
  padding: 0 25px;
  position: relative;
  max-width: var(--bigwidth);
}

#header .logo { height: 80px; 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;
}

#headerbox {background:var(--dunkel); color:var(--weiss);display:block;font-size:var(--step--1);text-align:center;z-index:801;}
.headerbox-inner{position:relative;margin:0 auto;max-width:var(--bigwidth);}
.headerbox-inner .textwidget{display: flex;  align-items: center;  justify-content: space-between; width:100%}
#headerbox .phone{display:inline-block;margin:0 15px}
#headerbox .mail{margin:0 15px}
#headerbox .phone a, #headerbox .mail a{color:var(--weiss);}

/* ==========================================================================
   Mail & Phone CTAs – Bereinigtes Komplett-CSS
   ========================================================================== */

/* Optionaler Container: Hält die Buttons sauber nebeneinander mit passendem Abstand */
.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content:center;
  gap: 12px;
  margin: 1.5rem auto;
}

/* --------------------------------------------------------------------------
   1. Basis-Stile für Mail (Text-/Inline-Variante)
   -------------------------------------------------------------------------- */
.mail {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

.mail .icon-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
}

.mail .email-icon {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Wrapper-Entkopplung bei CTA: Verhindert doppelten Margin-Versatz */
.mail.is-cta-button {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   2. Basis-Stile für Phone (Text-/Inline-Variante)
   -------------------------------------------------------------------------- */
.phone {
  display: inline-block;
  vertical-align: middle;
}

.phone a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.phone .phone-icon {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  vertical-align: middle;
}

.phone .text {
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   3. CTA-Buttons (Exakt identische Abmessungen für Mail & Phone)
   -------------------------------------------------------------------------- */
.mail.is-cta-button a,
div.mail.is-cta-button,
.phone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  /* Exakte Maße & Typografie */
  padding: 10px 20px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  vertical-align: middle; /* Verhindert das Verspringen bei Inline-Fluss */
  border-radius: 9px;
  box-sizing: border-box;

  /* Farben & Animationen */
  background-color: var(--vibrant);
  color: var(--on-vibrant) !important;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.1s ease;
}

/* Hover- & Focus-Status */
.mail.is-cta-button a:hover,
.mail.is-cta-button a:focus,
.phone-btn:hover,
.phone-btn:focus {
  background-color: var(--vibrant-hov);
  color: var(--on-vibrant-hov) !important;
  text-decoration: none;
  opacity: 0.95;
}

/* Klick-/Active-Feedback */
.mail.is-cta-button a:active,
.phone-btn:active {
  transform: translateY(1px);
}

/* Einheitliche Button-Icons */
.mail.is-cta-button .email-icon,
.phone-btn .phone-icon {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.mail span {display:inline-block;padding:0 0 0 5px;}

/* Navigation */

/* ==========================================================================
   Mobile Navigation (< 68rem)
   ========================================================================== */
@media (width < 68rem) {

  /* Hamburger- / Schließen-Button */
  .ko-menu {
    background: transparent;
    border: 0;
    width: 35px;
    height: 27px;
    margin: 10px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    z-index: 10000; /* Höher als das Menü (9999) */
  }

  .ko-menu span {
    background-color: var(--dunkel);
    position: absolute;
    border-radius: 3px;
    height: 3px;
    display: block;
    transition: transform 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4), 
                top 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4), 
                left 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4),
                background-color 0.2s ease;
  }

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

  /* Geöffneter Zustand: Fixiert oben rechts über dem Menü & weiße Balken */
  .ko-menu.open {
    position: fixed;
    top: 18px;
    right: 18px;
    margin: 0;
    transform: rotate(-90deg);
  }

  .ko-menu.open span {
    background-color: var(--weiss);
  }

  .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: 100ms;
  }

  /* Slide-in Menü-Drawer */
  nav#konavigation {
    font-size: var(--step-1);
    margin: 0;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 80%;
    max-width: 400px;
    z-index: 9999;
    background-color: var(--dunkel);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
    isolation: isolate;
  }

  nav#konavigation.open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.25);
  }

  .nav__container {
    position: absolute;
    inset: 0;
    padding: 70px 20px 30px 20px; /* Platz oben für den fixierten X-Button */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--hell) var(--dunkel);
    scrollbar-width: thin;
  }

  .nav__container::-webkit-scrollbar {
    width: 8px;
  }

  .nav__container::-webkit-scrollbar-track {
    background: var(--dunkel);
  }

  .nav__container::-webkit-scrollbar-thumb {
    background: var(--hell);
    border-radius: 4px;
  }

  nav#konavigation ul,
  nav#konavigation li {
    background: transparent;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    width: 100%;
  }

  nav#konavigation ul a {
    color: var(--weiss);
    display: block;
    font-weight: 700;
    padding: 14px 10px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }

  nav#konavigation ul a:hover,
  nav#konavigation ul a:focus-visible {
    background: var(--trans-dunkel-2);
  }
  
  nav#konavigation li.menu-item-has-children > a:after{
  font-size:12px;
  }

  /* Untermenüs mobil eingerückt */
  nav#konavigation ul.sub-menu {
    padding-left: 1rem;
  }

  nav#konavigation ul.sub-menu a {
    font-weight: 400;
    opacity: 0.9;
    padding: 10px;
  }
}

/* ==========================================================================
   Desktop Navigation (>= 68rem)
   ========================================================================== */
@media (width >= 68rem) {

  .ko-menu {
    display: none;
  }

  nav#konavigation {
    display: block;
    font-size: var(--step-0);
    height: auto;
    position: relative;
    text-align: center;
    width: auto;
    z-index: 900;
    transform: none;
    visibility: visible;
  }

  .nav__container {
    position: static;
    padding: 0;
    overflow: visible;
  }

  nav#konavigation ul {
    display: inline-flex;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }

  nav#konavigation ul li {
    list-style: none;
    position: relative;
    padding: 0.5rem 0.75rem;
  }

  nav#konavigation a {
    color: var(--dunkel-grau);
    padding: 6px 4px;
    text-decoration: none;
    position: relative;
    display: inline-block;
  }

  /* Animierter Hover-Unterstrich */
  nav#konavigation a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--dunkel-grau);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 250ms ease-in-out;
  }

  nav#konavigation a:hover:not(li.kontakt > a)::before,
  nav#konavigation a:focus-visible:not(li.kontakt > a)::before {
    transform: scaleX(1);
  }
  
  nav#konavigation li.menu-item-has-children > a:after{
  font-size:12px;
  }

  /* Kontakt-Button Hervorhebung */
  nav#konavigation li.kontakt > a {
    background: var(--vibrant);
    color: var(--weiss);
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  }

  nav#konavigation li.kontakt > a:hover,
  nav#konavigation li.kontakt > a:focus-visible {
    background: transparent;
    color: var(--dunkel-grau);
    box-shadow: inset 0 0 0 2px var(--vibrant);
  }

  nav#konavigation li.kontakt > a::before {
    display: none;
  }

  /* Dropdown-Menü */
  nav#konavigation ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px;
    padding: 8px;
    background: var(--weiss);
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 1000;
  }

  nav#konavigation li:hover > ul.sub-menu,
  nav#konavigation li:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  nav#konavigation ul.sub-menu li {
    padding: 0;
    width: 100%;
  }

  nav#konavigation ul.sub-menu a {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-radius: 4px;
    text-align: left;
    box-sizing: border-box;
  }

  nav#konavigation ul.sub-menu a:hover,
  nav#konavigation ul.sub-menu a:focus-visible {
    background-color: var(--hell);
  }

  nav#konavigation ul.sub-menu a::before {
    display: none;
  }
}

/*  Main   */

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

.blog #wrapper,
.search #wrapper,
.archive #wrapper{max-width:var(--bigwidth);}

#wrapper ul.maximal{max-width:70ch;margin:50px auto;}
#wrapper ul.maximal > li{margin:0 25px;}
#wrapper ol:not(.commentlist){max-width:70ch;}
#wrapper p:not(.cols, .myref-excerpt, .datum,.contact-form p, .teaserboxx-text,section.module.parallax p){margin-inline:auto;max-width:70ch;}

/*  Pagenavi   */

.wp-pagenavi {clear:both;display:block;margin:15px 0;padding:15px 0;text-align:center;}
.wp-pagenavi a,.wp-pagenavi a:hover,.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,.wp-pagenavi span.current {background:var(--hell);color:var(--dunkel);}
.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;}

/*  Footer   */

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

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

#footer ul{margin:25px auto;}
#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;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;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;font-size:var(--step-0);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 25px 65px 25px;text-align:center;max-width:var(--bigwidth);}
#footer .fullbox p{margin:25px auto;text-align:center;}
#footer .fullbox ul{margin:25px auto;text-align:center;}
#footer .fullbox ul li{border:none;display:inline;}
#footer .fullbox ul li+li::before{content:'|';display:inline-block;margin:0 5px 0 0;vertical-align:middle;}
#footer .fullbox ul li a{display:inline-block;padding:5px 10px;vertical-align:middle;}

#footer .group.share{margin:25px auto;justify-content:center;width:100%;}

/* Kontakt  */

#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 span.telefon{}
#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 .phone{display:inline-block;vertical-align:middle;}
#footer .adress{display:inline-block;padding:0 10px;vertical-align:middle;}

/* Videos */

video {margin-inline:auto;max-width:100%;height:auto;text-align:center;}
.video-wrapper{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;padding-bottom:56.25%;padding-top:30px;height:0;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%;}

/* Map */

.my-frame,iframe.map-frame{border:none;padding:0;text-align:center;min-height:600px;height:100%;width:100%;}

/* align */

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

/* wp-caption  */

.wp-caption{height:auto;margin:50px auto;padding:0;position:relative;text-align:center;width:auto;max-width:100%;}
.wp-caption img{display:block;margin-inline:auto;padding:0;text-align:center;}
.wp-caption p{background:var(--hell);display:block;font-style:italic;margin:15px auto;padding:1rem;text-align:center;}

/* News / Blogartikel */

ul.news{color:var(--dunkel-grau);display:block;margin-inline:auto;padding:0;}
ul.news li{background:var(--trans-hell-8);border-radius:9px;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 1.2rem;text-align:left;}
ul.news .text h2,ul.news .text h3{border:none;margin:10px 0;font-size:var(--step-1);font-weight:700;text-align:left;}
ul.news .text p{font-size:var(--step-0);margin:10px 0;}
ul.news  p.datum{}
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;text-decoration-skip-ink: auto;}

ul.news li .thumbnail{border-radius:9px 9px 0 0;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:100%;}
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;background:var(--hell);padding:3px 5px;}

ul.news.grid2 h3{font-size:var(--step-0);padding:5px 1.2rem;}

/* News / Blogartikel II */

article.post{background:var(--trans-hell-8);border:none;color:var(--dunkel-grau);display:block;margin:35px auto;padding:25px;position:relative;vertical-align:middle;max-width:800px;}
#wrapper.site-main.parallax-template article.post{max-width:100%;padding:0;}
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 0;}
article.post p{margin:15px 0;}
article.post .text{padding:0 0 25px 0;}

article.post .thumbnailbox{background:transparent;margin-inline:auto;position:relative;overflow:hidden;border-radius:1rem;}
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 .thumbnailbox{background-position: 50% 50%; background-repeat: no-repeat;background-size: 100% auto;display:block;margin:15px auto;padding:0;overflow:hidden;max-width:100%;transition: transform 0.5s;}

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;
  max-width:var(--mwidth);
  margin:0 auto;
}
footer.entry-meta .meta-item{
  display: block; text-align:left;

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

article.mypost{color:var(--dunkel-grau);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;}
article.mypost p.postinfos{}


@media(hover:hover) {}

/* Grids */

ul.vergleiche,
ul.referenzen,
ul.news.grid,
.postwrap {
  margin:2.5em 0;
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

ul.news.grid.grid2{
  --min: 24ch;
  --gap: 3rem;
}

/*   */

.mythumbnails{display:block;margin:50px auto;position:relative;}

.mobile-screenshot{max-width:240px;}
.mobile-screenshot.links{-webkit-transform: rotate(-3deg);transform: rotate(-3deg);float:left;margin:0.5rem 3rem 0.5rem 0;}
.mobile-screenshot.rechts{-webkit-transform: rotate(3deg);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(--hell);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;}

/* ==========================================================================
   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: var(--mwidth);
  z-index: 2;
}

/* Modul-Breiten (funktioniert für <div> und <article>) */

#wrapper.site-main.parallax-template {padding:0;max-width:100%}

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.mega {
  height: 80vh;
  height: 80dvh;
  min-height: 400px;
  max-height: 1000px;
}

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: 1.5rem;
  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-6); }
section.module.parallax h2 { font-size: var(--step-5); }
section.module.parallax h3 { font-size: var(--step-3); }

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

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

section.module.dunkel {
  background: var(--dunkel);
  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 {
  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);
}


/*  Wrapsplits */


.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:1rem 1.5rem;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:200px;max-width:100%;width:100%;}
.full .wrapsplits .splits.bild{max-width:100%;}
.wrapsplits .innerbildsplits span{display:block;margin:0 auto;max-width:560px;}

.wrapsplits .splits.bild h2{color:var(--weiss);margin:25px auto;text-align:center;font-weight:700;}
.wrapsplits .innertextsplits{display:block;margin: 0;padding:0;max-width:70ch;text-align:left;}
.wrapsplits .innertextsplits h1,.wrapsplits .innertextsplits h2,.wrapsplits .innertextsplits  h3{margin:0 0 1em 0;font-weight:400;text-align:left;}
.wrapsplits .innertextsplits p{margin: 1.5em 0;-webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;}
.wrapsplits .innertextsplits ul{}

.grafik .wrapsplits .splits.bild{min-height:1px;padding-top:2em;}
.grafik.rund .wrapsplits .splits.bild img{clip-path: circle(50% at 50% 50%);max-width:400px;}

/* Kommentare */

#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{border:none;margin:0;}
.commentsblock fieldset{border:none;margin:0;padding:0}
.commentsblock label,.commentsblock select,.commentsblock input[type=checkbox],.commentsblock input[type=radio],.commentsblock input[type=button],.commentsblock input[type=submit]{cursor:pointer}
.commentsblock label{clear:left;display:block;font-weight:400;margin:0;padding:0}
.commentsblock input,.commentsblock textarea,.commentsblock input:hover,.commentsblock textarea:hover,.commentsblock select{background:var(--trans-dunkel--1);border:1px solid var(--weiss);color:var(--dunkel-grau);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-grau);display:inline-block;margin:0 0.2em 0 0;width:1.0em}
.commentsblock textarea{overflow:auto}

ol.commentlist {color:var(--dunkel-grau);margin:0;}
ol.commentlist li.comment{margin:25px 0;padding:0 0 0 60px;z-index:10;}
ol.commentlist li.comment ul{padding:0;}
ol.commentlist li.comment ul 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 div.comment-meta a {  }
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 ul.children li.depth-2 {padding:0; }
ol.commentlist li.comment ul.children li.depth-3 {  }
ol.commentlist li.comment ul.children li.depth-4 {  }
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;}

/*  Formulare */

div.wpcf7 form{background:var(--trans-dunkel-1);border:none;border-radius:0;margin:35px auto;padding:1rem;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(--weiss);border:1px solid var(--trans-dunkel-4);color:var(--schwarz);margin:5px 0 10px 0;padding:0.8rem;width:100%;box-sizing:border-box;}
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:200px;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);border-color:var(--trans-dunkel-6);color:var(--schwarz);}
div.wpcf7 input[type=checkbox],div.wpcf7 input[type=radio]{background:transparent;border:none;color:var(--schwarz);margin:0 5px 0 10px;padding:0;width:1.0rem;}
div.wpcf7 input::placeholder { color: var(--trans-dunkel-4); opacity:1;font-size:var(--step-1); }
div.wpcf7 input:-ms-input-placeholder { color: var(--trans-dunkel-4);font-size:var(--step-1); }
div.wpcf7 input::-ms-input-placeholder { color: var(--trans-dunkel-4);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; }



div.wpcf7 input[type=submit],
.commentsblock input[type=submit],
.commentsblock button[type=submit],.commentsblock input:hover[type=submit],.commentsblock button:hover[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.5em;transition:all 0.3s ease-in-out;}
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;}


/* ************* */
/* Shortcode-CSS */
/* ************* */

/* Container: Automatisch 1 bis 4 Spalten */
.lm-boxes-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 30px;
    margin: 40px 0;
}

/* Einzelne Box Card */
.lm-box-item {
    background-color: var(--hell);
    border-radius: 9px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--trans-dunkel-1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.lm-box-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.lm-boxes-container.lm-boxes-small .lm-box-item {
    padding:15px;
}

/* Icon-Styling */
.lm-box-icon {
    width: 64px;
    height: 64px;
    background-color: var(--weiss);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.lm-box-icon svg {
    width: 32px; 
    height: 32px;
    stroke: var(--medium);
}

/* Titel & Text */
.lm-box-title,
h3.lm-box-title  {
    font-size: var(--step-2);
    font-weight: 700;
    color: var(--dunkel);
    margin: 0 auto 15px auto;
}

.lm-box-text {
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 5px;
    flex-grow: 1;
}

/* Link */
.lm-box-link {
    color: #0a4d68;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.lm-box-link:hover {
    color: #083344;
    text-decoration: underline;
}

/* Auf Handys nur noch das Gap reduzieren */
@media (width < 48rem) {
    .lm-boxes-container {
        gap: 20px;
    }
}

/* Container für die Boxen */
.teaserboxen-wrapper {
  display: grid;
  /* Automatische Spalten: Mindestens 280px breit, maximal gleichmäßig verteilt */
  /* Bei schmalen Displays schrumpft es auf 100% Breite */
  grid-template-columns: repeat(auto-fit, minmax(clamp(100% / 3 - 2rem, 280px, 100%), 1fr));
  gap: 2rem;
  width: 100%;
  margin-bottom: 2rem;
}

/* Einzelne Teaserbox */
.teaserbox-item {
  display: flex;
  flex-direction: column;
  background-color: var(--weiss);
  border:1px solid var(--trans-dunkel-1);
  border-radius: 8px;
  position:relative;
}

/* Bildanpassung */
.teaserbox-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* Content-Bereich */
.teaserbox-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

h3.teaserbox-title {
  font-size:var(--step-2);
  margin:0 0 1rem 0;
  text-align:left;
}

.teaserbox-link-wrapper{ 
   background:transparent;
   border-top:1px solid var(--trans-dunkel-2);
   display:block;
   line-height:1.8;
   padding:5px 1.5rem;
   position: absolute;
   bottom:0;
   left:0;
   right:0;
}

.teaserbox-content p{
  margin:0 0 2rem 0;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;
}

/* Container für die Flexbox-Ausrichtung */
        .teaserboxx-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
            width: 100%;
        }
        
        /* Box-Styling: Automatische Skalierung für 1 bis 2 Boxen pro Zeile ohne Breakpoints */
        .teaserboxx-item {
            flex: 1 1 300px; /* Nimmt mind. 300px ein; wächst gleichmäßig und bricht automatisch um */
            box-sizing: border-box;
            padding: 1.0rem;
            border: 1px solid var(--trans-dunkel--2);
            border-radius: 8px;
            background-color: var(--weiss);
        }
        
        .dunkel .teaserboxx-item {
            background-color: var(--trans-hell-1);
            
        }

        h3.teaserboxx-title, .innertextsplits h3.teaserboxx-title{
            margin-top: 0;
            margin-bottom: 10px;
            text-align:left;
        }

        p.teaserboxx-text, .innertextsplits p.teaserboxx-text{
            margin: 0;
            text-align:left;
            -webkit-hyphens: auto; 
            hyphens: auto; 
            hyphenate-limit-chars: 6 3 3;


        }
        
.zweiboxen-grid {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            width: 100%;
            margin: 1.5rem 0;
        }
        .zweiboxen-item {
            flex: 1 1 360px; /* Bricht automatisch untereinander um, wenn weniger als 300px Platz ist */
            box-sizing: border-box;
            padding: 1rem;
        }
        
        .zweiboxen-item h2{text-align:left;}

/* Modernes Blockquote Design */
.modern-quote {
    position: relative;
    margin: 2.5rem 0;
    padding: 2.5rem 1.5rem 2.5rem 5rem;
    background:var(--trans-dunkel-4);
    border-left: 5px solid var(--vibrant);
    border-radius: 0 12px 12px 0;
    color: var(--vibrant);
    font-family: Georgia, Times, 'times new roman', serif;
}

/* Großes Anführungszeichen im Hintergrund */
.modern-quote::before {
    content: "“";
    position: absolute;
    top: -0.2rem;
    left: 0.8rem;
    font-size: 8rem;
    line-height: 1;
    color: var(--vibrant);
    opacity: 0.8;
    font-family: Georgia, Times, 'times new roman', serif;
    pointer-events: none;
}

.modern-quote blockquote {
    margin: 0;
    padding: 0;
    border: none;
}

.modern-quote blockquote p {
    margin: 0 0 0.75rem 0;
    font-size: var(--step-6);
    line-height: 1.6;
    color: var(--vibrant);
    font-style: italic;
}

.modern-quote blockquote p:last-child {
    margin-bottom: 0;
}

/* Autor & Quellen-Angabe */
.modern-quote .quote-caption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--medium);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modern-quote .quote-author {
    font-weight: 600;
}

.modern-quote .quote-author::before {
    content: "— ";
}

.modern-quote .quote-source {
    font-style: normal;
}

.modern-quote .quote-source::before {
    content: "• ";
    margin-right: 0.2rem;
}

.modern-quote .quote-source a {
    color: var(--medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.modern-quote .quote-source a:hover {
    color: var(--vibrant-hov);
}



/* VARIATION 2: Zentriert & Elegant (typ="zentriert") */
.modern-quote.zentriert {
    border-left: none;
    border-top: 5px solid var(--quote-border-color);
    border-radius: 12px;
    text-align: center;
}

.modern-quote.zentriert::before {
    display: none;
}

.modern-quote.zentriert .quote-caption {
    justify-content: center;
}

.sprungmarken-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.sprungmarken-wrapper .sprungmarke {
    /* Maximal 3 nebeneinander (unter Berücksichtigung des Gap) */
    flex: 1 1 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
    box-sizing: border-box;
}

.sprungmarken-wrapper .sprungmarke a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-decoration: none;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: all 0.3s ease;
    height: 100%;
}

.sprungmarken-wrapper .sprungmarke a:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.sprungmarken-wrapper .sprungmarke-icon {
    max-width: 64px;
    height: auto;
    margin-bottom: 12px;
}

.sprungmarken-wrapper h3 {
    margin: 0;
    font-size: 1.1rem;
}

/* Responsive: 1 Spalte auf mobilen Geräten */
@media (max-width: 768px) {
    .sprungmarken-wrapper .sprungmarke {
        flex: 1 1 100%;
        max-width: 100%;
    }
}


.group.share {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.group.share a, #footer .group.share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    background:transparent;
    text-decoration: none;
    transition:transform .3s, color .3s, background .3s;
}

.group.share a:hover, #footer .group.share a:hover {
    color:var(--vibrant);
}

.group.share .social-icon {
    width: 1.8em;
    height: 1.8em;
}

/* Versteckt den Text visuell, bleibt für Screenreader lesbar */
.group.share .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* FAQ - Boxen mit ausklappbaren Inhalten */

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

.klickmichan a,.klickmichan a:hover{background:var(--vibrant);color:var(--on-vibrant);border:1px solid var(--vibrant);display:block;font-size:var(--step-0);font-weight:700;height:160px;width:160px;line-height:1.25;text-align:center;margin:50px auto;padding:15px;position:relative;transition:all 0.5s ease;border-radius:50%;transform: scale(1);animation: pulse-grau 2s infinite;display: flex;justify-content: center;align-items: center;}
.klickmichan a:hover{background:var(--vibrant-hov);border-color:var(--vibrant-hov);color:var(--on-vibrant-hov);animation: pulse-grau 2s infinite;}
.klickmichan a::before{display:block;margin:0 auto;font-size:var(--step-3);}

@keyframes pulse-grau {0% {transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);}
                      70% {transform: scale(1); box-shadow: 0 0 0 10px rgba(0,0,0, 0);}
                      100% {transform: scale(1);box-shadow: 0 0 0 0 rgba(0,0,0, 0);}
                      }

@media screen and (min-width: 60rem) {
.klickmichan{margin:0;padding:15px;position:fixed;right:10px;top:25%;z-index:5000}
}

/* Container */
.mm-partnergrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  width: 100%;
  margin: 2rem 0;
  
}

.mm-partnergrid-large {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Items */
.mm-partner {
  display: flex;
}

.mm-partner > a,
.mm-partner .mm-partner-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 1.5rem 1.25rem;
  background-color: var(--hell);
  border: 1px solid var(--trans-dunkel-2);
  border-radius: 12px;
  text-decoration: none;
  color: #1e293b;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
}

.mm-partner > a:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 18px -3px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

/* Logo */
.mm-partner .userlogo {
  width: 100%;
  height: 50px;
  margin-bottom: 1rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Avatar */
.mm-partner .userthumb {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 0.75rem;
  box-shadow: 0 0 0 2px #f1f5f9;
}

/* Text */
.mm-partner h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  color: inherit;
  line-height: 1.3;
}

/* Sektions-Container */
.bento-section {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.bento-header {
  margin-bottom: 2.5rem;
}

.bento-badge {
  display: inline-block;
  font-size: 0.825rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.bento-header h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

.bento-header p {
  font-size: 1.05rem;
  margin: 0;
}

/* Bento Grid Layout */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Responsive Grid-Spalten ab Tablet / Desktop */
@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .bento-grid {
    /* 4 gleich breite Spalten */
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 240px 240px;
  }

  /* Die linke Highlight-Kachel nimmt 2 Spalten und 2 Zeilen ein */
  .bento-card--large {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* Die 4 kleineren Kacheln füllen die rechten zwei Spalten */
  .bento-card:not(.bento-card--large) {
    grid-column: span 1;
  }
}

/* Karten-Styling */
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  padding: 1.75rem;
  text-decoration: none;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--dunkel);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.4s var(--transition-smooth), 
              box-shadow 0.4s var(--transition-smooth);
}

.bento-card:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
}

/* Hintergrundbild mit sanftem Zoom-Effekt */
.bento-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--transition-smooth);
  z-index: 1;
}

.bento-card:hover .bento-card__bg {
  transform: scale(1.05);
}

/* Abdunkelnder Verlauf für perfekte Lesbarkeit */
.bento-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 20, 23, 0.05) 0%,
    rgba(18, 20, 23, 0.45) 50%,
    rgba(18, 20, 23, 0.88) 100%
  );
  z-index: 2;
  transition: opacity 0.3s ease;
}

.bento-card:hover .bento-card__overlay {
  opacity: 0.95;
}

/* Inhalt / Typografie in der Karte */
.bento-card__content {
  position: relative;
  z-index: 3;
  color: var(--weiss);
}

.bento-card__tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  padding: 0.25rem 0.65rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.bento-card__title {
  color: var(--weiss);
  margin: 0 0 0.35rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.bento-card--large .bento-card__title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
}

.bento-card__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #fff;
}

.bento-card--large .bento-card__text {
  font-size: 1rem;
  max-width: 85%;
}

.bento-card__cta {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--weiss);
  transition: transform 0.25s ease;
}

.bento-card:hover .bento-card__cta {
  transform: translateX(4px);
}


@media screen and (min-width: 40rem) {

.headerbox-inner > div{display:flex;align-items:center;justify-content:space-between;}

/* News */

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

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

}

@media screen and (min-width: 50rem) {

#header .logo .beschreibung{display:block;}

ul.news:not(.grid) li .thumbnail{width:400px;}
ol.commentlist li.comment ul{padding:0 0 0 2rem;}
#footer ul li{text-align:left;}

/* .animated.go */

.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);}

.textbox{scale:0.9;transition:scale 0.3s ease-in-out;}
.textbox.go,.nojs .textbox{scale:1.0;}

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

@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-30px, 0, 0);transform:translate3d(-30px, 0, 0);}
to{opacity:1;-webkit-transform:none;transform:none;}
}
@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-30px, 0, 0);transform:translate3d(-30px, 0, 0);}
to{opacity:1;-webkit-transform:none;transform:none;}
}

}

@media all and (min-width: 62.5rem){

#header{height:110px;padding:0 25px;}
#header .logo { height: 100px; max-width: 300px;}


/*  Wrapsplits */

.wrapsplits {display:grid;grid-template-columns:50% 50%;padding:2.5rem 1.5rem;}
.wrapsplits.links{grid-template-columns:50% 50%;}

.wrapsplits .splits{min-height:300px;display:flex;align-items: center;justify-content:center;}
.wrapsplits .splits.bild{margin:inherit;padding:0 25px;min-height:400px;}

.grafik .wrapsplits .innertextsplits{padding:0;}
.grafik .wrapsplits .splits.bild{padding-top:0;}

.wrapsplits.links .innertextsplits{padding:1.5rem;}
.wrapsplits.rechts .innertextsplits{padding:1.5rem;}

.wrapsplits.rechts .splits.bild{order:2}
.wrapsplits.rechts .splits.text{order:1;}
.rund .wrapsplits.rechts .splits.bild {}




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}


}

@media all and (min-width: 92rem){

#header{padding:0}


.wrapsplits .splits.bild,.wrapsplits .splits.text{padding:0;}
.wrapsplits.links .innertextsplits{padding:1.5rem 0 1.5rem 2.5rem;}
.wrapsplits.rechts .innertextsplits{padding:1.5rem 2.5rem 1.5rem 0;}

}