header .svg-bg01 {
  position: absolute;
  /*bottom: -35px;*/
  top:6%;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index:1000;
}

.lead {
  letter-spacing: 0em;
  font-size: 19.2px;
  font-size: 1.2rem;
}


.about-section-home {
  background: url(../img/background_03_01.png) no-repeat,url(../img/background_03_02.png) no-repeat;
  background-position: left top, right bottom;
  background-size: 70%, 100%, 14%;
  background-color: #f6f6f0;
  position: relative;
}

.about-section-home .container {
  position: relative;
  z-index: 3;
}

.about-section-home .about-svg {
  position: absolute;
  top: -63px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}

.about-section-home .about-svg-02 {
  position: absolute;
  bottom: -40px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}

.about-section-home .sub-text {
  font-size: 30px;
}

.about-section-home h6 {
  color: #ae8b2b;
}

.about-section-home h2 {
  color: #181818;
}

.about-section-home p {
  color: #85847d;
  font-weight: 300;
}



.footer-new .fotter-comgh .calloi-texr {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.footer-new .fotter-comgh .calloi-texr a, .footer-new .fotter-comgh a, .right-cop a{
  color: #f6f6f0;
}





















/* ==========================================================================
   Kopfzeile: Logo, "Wir sind erreichbar" und Navi/Burger in einer Reihe
   Markup: index.php, .header-container > .header-row
   ========================================================================== */

/* Unter lg soll nichts umbrechen - vorher rutschte der Kontaktblock auf
   schmalen Schirmen unter das Logo. min-width:0 erlaubt dem Block, sich zu
   verkleinern, statt die Reihe aufzublaehen. */
@media (max-width: 991.98px) {
  #header .header-container {
    flex-wrap: nowrap;
  }

  #header .kontakt-kopf {
    flex-grow: 1;
    min-width: 0;
  }

  /* Die Navi-Spalte waechst per Theme mit (#header .header-column {flex-grow:1})
     und wuerde dem Kontaktblock den freien Platz streitig machen. Auf den
     Burger geschrumpft reicht der Kontaktblock exakt von Logo bis Button -
     nur dann ist "mittig" auch wirklich die Mitte dazwischen. */
  #header .header-column.justify-content-end {
    flex-grow: 0;
  }
}

/* Ab md steht der Block mittig im freien Platz zwischen Logo und Burger. */
@media (min-width: 768px) and (max-width: 991.98px) {
  #header .kontakt-kopf {
    display: flex;
    justify-content: center;
  }
}

/* Unter md wird die Reihe zu eng: mit dem 150px-Logo schiebt es den Burger
   aus dem Bild. Logo und Kontakt-Icon schrumpfen deshalb, damit alle drei
   Elemente nebeneinander in den Schirm passen. */
@media (max-width: 767.98px) {
  /* Die Breite gehoert an den Logo-KASTEN, nicht ans Bild. Grund: Bootstraps
     .img-fluid setzt max-width: 100% - diese 100% beziehen sich auf einen
     Kasten, dessen Breite bisher selbst erst aus dem Bild entstand. Diese
     Ringabhaengigkeit loest Chrome zu Ungunsten des Bildes auf und rendert
     77px statt der angeforderten 90px. Mit definierter Kastenbreite ist der
     Bezug eindeutig und das Bild fuellt ihn seitenverhaeltnistreu. */
  #header .header-logo {
    width: 90px;
    flex: 0 0 auto;
  }

  #header .header-logo img {
    width: 100%;
    height: auto;
  }

  #header .kontakt-kopf .feature-box-icon i {
    font-size: 1.5rem;
  }

  #header .kontakt-kopf .kontakt-dropdown-btn p {
    font-size: 0.75rem;
  }
  
  
  
}

@media (min-width: 992px) {
  #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a, #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li > a {
    color: var(--dark);
  }
}








@media (min-width: 992px) {
  #header .header-nav-main nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    white-space: normal;
    border-radius: var(--border-radius);
    color: var(--grey-500);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    padding: 0.5rem 1rem;
    letter-spacing: -0.5px;
    text-decoration: none;
  }
}

.img-logo {
	  filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.5));
}

.bg-whiter {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dde0cc+0,f6f6f0+12 */
background: linear-gradient(to bottom,  #dde0cc 0%,#f6f6f0 12%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

.slider h1,.slider h2,.slider h3,.slider h4,.slider p {
	color:#ffffff !important;
	text-shadow: 2px 2px 3px #000000; 
}



.btn-circle.circ.btn-lg {
  width: 130px;
  height: 130px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.6;
  border-radius: 65px !important;
}

@media (max-width: 767.98px) {
  .btn-circle.circ.btn-lg {
  width: 100px;
  height: 100px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.6;
  border-radius: 50% !important;
}
  
}

.btn-circle.btn-lg {
  width: 100px;
  height: 100px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.6;
  border-radius: 50px !important;
}

.sorti p {
	color:#c5c5c5 !important;
}

.sub-texter {
  font-size: 5em;
  color:#f6f6f0;
}

.about-section-home {
  background: url(../img/background_03_01.png) no-repeat, url(../img/background_03_02.png) no-repeat;
  background-position: left top, right bottom, left top;
  background-size: 70%, 100%, 14%;
  background-color: #f6f6f0;
  position: relative;
}

.light-newd-section {
  background: url(../img/background_03_02.jpg) no-repeat;
  background-position: right top;
  background-size: 100%, 100%;
  padding: 60px 0;
  position: relative;
}

.light-newd-section .about-svg {
  position: absolute;
  top: -110px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
}

.offer-div-services {
  padding: 60px 0 100px 0;
  background: #181818 url(../img/bg-05-h.jpg) no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
  background-position: top left;
  background-size: cover;
  margin: 40px 0;
}

.slif-client-logo {
  margin-bottom: 0px;
  position: relative;
  /*top: -70px;*/
}

/* Das Bild (1366x511) ist deutlich breiter als hoch, der Footer deutlich
   hoeher als breit. Mit cover wurde es auf die volle Hoehe hochgezogen und
   seitlich weggeschnitten. contain laesst es in seinen Proportionen ueber die
   ganze Breite unten stehen; die Flaeche darueber fuellt #ffffff.
   100% auto statt contain: contain wuerde auf sehr breiten Schirmen (ab ca.
   2100px, wenn die Footer-Hoehe nicht mehr mitwaechst) das Bild schmaler
   rechnen und weisse Streifen links und rechts stehen lassen. */
.footer-new {
  background: #0c0f0c url(../img/footer-bg.jpg) no-repeat;
  background-size: 100% auto;
  background-position: top center;
  padding: 60px 0 20px 0;
  margin-top: 0px;
  min-height: 780px;
}

.comon-heding {
  font-size: 50px;
}

/* mulish-200 - 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: 'Mulish';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/mulish-v13-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-200italic - 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: 'Mulish';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/mulish-v13-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-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: 'Mulish';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/mulish-v13-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-300italic - 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: 'Mulish';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/mulish-v13-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-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: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/mulish-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-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: 'Mulish';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/mulish-v13-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-500 - 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: 'Mulish';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/mulish-v13-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-500italic - 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: 'Mulish';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/mulish-v13-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-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: 'Mulish';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/mulish-v13-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-600italic - 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: 'Mulish';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/mulish-v13-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-700 - 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: 'Mulish';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/mulish-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-700italic - 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: 'Mulish';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/mulish-v13-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-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: 'Mulish';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/mulish-v13-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-800italic - 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: 'Mulish';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/mulish-v13-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-900 - 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: 'Mulish';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/mulish-v13-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-900italic - 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: 'Mulish';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/mulish-v13-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ============================================================================
   Poppins - lokal, latin, woff2 (Dateien liegen bereits in /fonts)
   Poppins ist die Hausschrift: css/theme.css setzt
       body { font-family: "Poppins", Arial, sans-serif; }
   bisher gab es dafuer aber keine @font-face-Deklaration -> der Browser ist
   auf Arial zurueckgefallen. Mit diesen Bloecken laedt die Seite Poppins lokal.
   Es werden keine externen Schriftdienste (Google Fonts o.ae.) angefragt.
   Ungenutzte Schnitte verursachen keinen Traffic - der Browser laedt nur die
   Gewichte, die tatsaechlich gesetzt werden (auf index.php: 300-700).
   ========================================================================== */

/* poppins-100 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/poppins-v20-latin-100.woff2') format('woff2');
}

/* poppins-100italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/poppins-v20-latin-100italic.woff2') format('woff2');
}

/* poppins-200 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/poppins-v20-latin-200.woff2') format('woff2');
}

/* poppins-200italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/poppins-v20-latin-200italic.woff2') format('woff2');
}

/* poppins-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v20-latin-300.woff2') format('woff2');
}

/* poppins-300italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/poppins-v20-latin-300italic.woff2') format('woff2');
}

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

/* poppins-italic (400) - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/poppins-v20-latin-italic.woff2') format('woff2');
}

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

/* poppins-500italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/poppins-v20-latin-500italic.woff2') format('woff2');
}

/* poppins-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v20-latin-600.woff2') format('woff2');
}

/* poppins-600italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/poppins-v20-latin-600italic.woff2') format('woff2');
}

/* poppins-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v20-latin-700.woff2') format('woff2');
}

/* poppins-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/poppins-v20-latin-700italic.woff2') format('woff2');
}

/* poppins-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/poppins-v20-latin-800.woff2') format('woff2');
}

/* poppins-800italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/poppins-v20-latin-800italic.woff2') format('woff2');
}

/* poppins-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/poppins-v20-latin-900.woff2') format('woff2');
}

/* poppins-900italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/poppins-v20-latin-900italic.woff2') format('woff2');
}

/* ============================================================================
   Bilbo Swash Caps - Handschrift, lokal, latin, woff2
   Kalligrafische Feder mit Schwuengen. Nur ein Schnitt (regular/400) -
   die Familie hat von Haus aus keine weiteren Gewichte und kein Kursiv.
   Wird nirgends automatisch gesetzt: per Klasse .handwritten im Markup
   vergeben, z.B. <span class="handwritten">Frisch aus heimischer Jagd</span>
   ========================================================================== */

/* bilbo-swash-caps-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Bilbo Swash Caps';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bilbo-swash-caps-v22-latin-regular.woff2') format('woff2');
}

/* Hilfsklasse zum Setzen der Handschrift.
   Hinweis: Bilbo laeuft optisch deutlich kleiner als Poppins - fuer denselben
   Eindruck etwa den 1,4- bis 1,6-fachen font-size waehlen. Groesse und Farbe
   bewusst nicht vorgegeben, damit die Klasse ueberall einsetzbar bleibt. */
.handwritten {
  font-family: 'Bilbo Swash Caps', cursive;
  font-weight: 400;
  font-style: normal;
}

/* ============================================================================
   Shadows Into Light - Handschrift, lokal, latin, woff2
   Locker und leicht. Ebenfalls nur ein Schnitt (regular/400).

   Diese Familie wird vom Theme bereits an mehreren Stellen angesprochen und
   war bisher nie geladen (Fallback auf die System-Schreibschrift):
     .alternative-font              (css/theme-elements.css)
     .highlighted-word              (css/theme-elements.css)
     .thumb-info-ribbon span        (css/theme-elements.css)
     .home-concept strong           (css/theme-elements.css)
     #footer .footer-ribbon span    (css/theme.css)
   Mit dieser Deklaration greifen diese Stellen ab sofort richtig.
   Keine dieser Klassen kommt in index.php vor - dort aendert sich nichts.

   Zum Setzen im Markup gibt es die Theme-Klasse .alternative-font; Achtung,
   die bringt font-size: 1.6em mit und arbeitet mit !important - sie schlaegt
   also .handwritten, wenn beide am selben Element haengen.
   ========================================================================== */

/* shadows-into-light-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/shadows-into-light-v15-latin-regular.woff2') format('woff2');
}


/* ============================================================================
   Kontakt-Aufklapper im Header (Telefonnummern + Oeffnungszeiten)
   Markup: index.php, Block ".kontakt-dropdown" im Header.
   Technik: Bootstrap-5-Dropdown (data-bs-toggle="dropdown") - kein eigenes JS.
   Verhalten (im Browser geprueft):
     - Klick daneben schliesst.
     - Klick INNERHALB des Panels schliesst NICHT (data-bs-auto-close="outside"),
       damit das Antippen einer Nummer nicht ins Leere laeuft.
     - ESC schliesst, solange der Fokus auf dem Button oder im Panel liegt -
       so macht Bootstrap das; nach einem Klick auf reinen Text im Panel liegt
       der Fokus woanders und ESC greift dann nicht.
   Das Panel muss im Markup das direkte Geschwister-Element des Buttons
   bleiben - Bootstrap sucht es genau dort (SelectorEngine.next).
   ========================================================================== */

/* --- Schaltflaeche: sieht aus wie der frueherer Telefon-Link ------------- */
.kontakt-dropdown-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--dark, #181818);
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color 0.3s;
}

.kontakt-dropdown-btn:hover,
.kontakt-dropdown-btn:focus-visible,
.kontakt-dropdown-btn[aria-expanded="true"] {
  color: #ae8b2b;
}

.kontakt-dropdown-caret {
  font-size: 0.5em;
  margin-left: 0.4em;
  position: relative;
  bottom: 0.15em;
  transition: transform 0.3s;
}

.kontakt-dropdown-btn[aria-expanded="true"] .kontakt-dropdown-caret {
  transform: rotate(180deg);
}

/* --- Das aufklappende Panel --------------------------------------------- */
.kontakt-dropdown .kontakt-panel {
  z-index: 1100;             /* ueber dem Sticky-Header und der SVG-Kante */
  min-width: 310px;
  margin-top: 10px;
  padding: 20px 24px 16px;
  border: 1px solid #e4e4d8;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  /* Der Header arbeitet mit text-uppercase und negativem letter-spacing -
     im Panel wollen wir normalen Text. */
  font-size: 14px;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  color: #181818;
}

.kontakt-panel-block + .kontakt-panel-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eeeee4;
}

.kontakt-panel-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #ae8b2b;
}

.kontakt-panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kontakt-panel-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 3px 0;
  white-space: nowrap;
}

.kontakt-panel-label {
  color: #6b6b5e;
}

.kontakt-panel-list a {
  color: #181818;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s;
}

.kontakt-panel-list a:hover,
.kontakt-panel-list a:focus-visible {
  color: #ae8b2b;
}

.kontakt-panel-zu {
  color: #9a9a8c;
}


/* ============================================================================
   Kreis-Badge (im Porto-Template ".custom-el-3")

   Originalwerte uebernommen aus:
     themeforest-zj0yxLB5-porto-responsive-html5-template/HTML/
     css/demos/demo-accounting-2.css, Zeile 167
       width / height / min-width / min-height : 180px
       margin-left: -40px;  margin-top: -15px;

   Die beiden negativen Margins sind reiner Layout-Versatz aus jener Demo -
   dort wird der Kreis in das darueberliegende Element hineingezogen. Fuer die
   freie Verwendung auf Unterseiten stehen sie NICHT in der Basisklasse; wer
   sie braucht, haengt zusaetzlich .kreis-versatz ans Element.

   FARBE UND GROESSE werden ueber CSS-Variablen am Element gesetzt:

     <div class="rounded-circle custom-el-3 p-relative"
          style="--kreis-farbe:#ae8b2b; --kreis-textfarbe:#fff">

   Ohne style-Attribut gelten die Vorgaben unten (Gold, weisse Schrift, 180px).

   WICHTIG: Die Porto-Klassen bg-color-* und text-light / text-color-* setzen
   ihre Farben mit !important und wuerden diese Variablen aushebeln. Sie
   duerfen an einem Kreis-Badge also NICHT im Markup stehen - genau daran ist
   die erste Fassung gescheitert.
   ========================================================================== */

.custom-el-3 {
  --kreis-farbe: #ae8b2b;
  --kreis-textfarbe: #fff;
  --kreis-groesse: 180px;

  width: var(--kreis-groesse);
  height: var(--kreis-groesse);
  min-width: var(--kreis-groesse);
  min-height: var(--kreis-groesse);
  border-radius: 50%;
  background-color: var(--kreis-farbe);
  color: var(--kreis-textfarbe);
}

/* Versatz exakt wie in der Porto-Demo - nur bei Bedarf dazunehmen. */
.kreis-versatz {
  margin-left: -40px;
  margin-top: -15px;
}

.pos-11 {
	position:absolute;
	top:-30px;
	right:5%;
	z-index:500; 
	transform: rotate(5deg);
}



.pos-12 {
  position: absolute;
  top: -86px;
  left: 9%;
  z-index: 500;
  transform: rotate(-4deg);
}

/* ==========================================================================
   Blog-Kurzuebersicht auf der Startseite
   Markup: admin/includes/blog-short-news.php, Grundstyles: css/customtest.css
   (.comon-posrt / .right-post0). Hier stehen nur die beiden Sondervarianten.
   ========================================================================== */

/* Querformat: der Textblock unter dem Bild liegt ausdruecklich auf Weiss und
   bleibt damit lesbar, auch wenn die Karte selbst mal transparent wird. */
.comon-posrt.bsn-quer .parar-delatsy {
  background: #fff;
}

/* Kein Titelbild: das Zufallsbild aus img/page-header ist nur Deko und laeuft
   als flacher Streifen statt ueber die vollen 300px. */
.comon-posrt.bsn-ersatzbild .img-boxv,
.comon-posrt.bsn-ersatzbild .img-boxv figure {
  height: 150px;
  max-height: 150px;
}

/* Gruener Schleier ueber dem Ersatzbild - er macht sofort sichtbar, dass hier
   kein echtes Titelbild steht. Farbe ist das Hausgruen (--primary, css/skin.css).
   Gleiche Technik wie .middle-post .img-boxv:after in css/customtest.css. */
.comon-posrt.bsn-ersatzbild .img-boxv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #2a2d25;
  opacity: 0.65;
  pointer-events: none;
}

/* Querformat: Schleier ueber dem Titelbild, der erst beim Mouse-over auffaehrt.
   Das :not(.bsn-ersatzbild) muss sein - die Ersatzbild-Karte traegt .bsn-quer
   ebenfalls, und diese Regel hat dieselbe Spezifitaet (0,3,1) wie die darueber.
   Ohne den Ausschluss wuerde sie deren dauerhaften Schleier auf 0 zuruecksetzen. */
.comon-posrt.bsn-quer:not(.bsn-ersatzbild) .img-boxv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #39412f;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.comon-posrt.bsn-quer:not(.bsn-ersatzbild):hover .img-boxv::after,
.comon-posrt.bsn-quer:not(.bsn-ersatzbild):focus-visible .img-boxv::after {
  opacity: 0.75;
}

/* Hochformat: der Vorschautext liegt eingeklappt unter dem Titel und faehrt
   erst beim Mouse-over auf - zusammen mit dem gruenen Schleier, ohne den die
   weisse Schrift auf dem Foto nicht sicher lesbar waere. */
.comon-posrt.right-post0 .img-boxv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #39412f;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.comon-posrt.right-post0:hover .img-boxv::after,
.comon-posrt.right-post0:focus-visible .img-boxv::after {
  opacity: 0.75;
}

.comon-posrt.right-post0 .bsn-teaser {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.comon-posrt.right-post0:hover .bsn-teaser,
.comon-posrt.right-post0:focus-visible .bsn-teaser {
  max-height: 12em;
  opacity: 1;
}

/* Der Textblock liegt beim Hochformat direkt auf dem Foto und bekommt deshalb
   einen weiss transparenten Kasten. Die Ueberschriften sind ohnehin dunkel
   (theme.css), nur den geerbten weissen Fliesstext aus customtest.css
   (.right-post0 .parar-delatsy { color: #fff }) muss man mitziehen. */
.comon-posrt.right-post0 .parar-delatsy {
  background: rgba(255, 255, 255);
  color: var(--primary, #60635c);
  padding-bottom: 15px;
}

/* Die ganze Karte ist ein <a>. theme.css unterstreicht mit a:not(.btn):hover
   jeden Link beim Mouse-over - in einer Karte sieht das nach Fehler aus.
   Das :not(.btn) ist hier mit Absicht mitgeschrieben: es hebt die Spezifitaet
   auf (0,3,1) und schlaegt die Theme-Regel (0,2,1) damit unabhaengig von der
   Ladereihenfolge - ohne !important. */
a.comon-posrt:not(.btn):hover,
a.comon-posrt:not(.btn):focus,
a.comon-posrt:not(.btn):focus-visible {
  text-decoration: none;
}

/* Das Datumsplaettchen steht im selben Kasten wie der Schleier und wuerde
   sonst mit uebermalt. */
.comon-posrt.bsn-ersatzbild .img-boxv .daet01,
.comon-posrt.bsn-quer .img-boxv .daet01,
.comon-posrt.right-post0 .img-boxv .daet01 {
  z-index: 2;
}