/*
Theme Name: Backauf Theme
Theme URI: https://www.backauf.de
Author: Niklas Hasch
Description: Theme
Version: 3.0.1
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
@import "theme.css";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&display=swap');
/*******************
*** RESET
*******************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {font-family: arial, helvetica, sans-serif;line-height: 1;}
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table{border-collapse: collapse;border-spacing: 0;}
/**** VORGEGEBENE REGELN ****/
html{overflow-x: hidden}
.right{text-align:right;}
p{margin-bottom:1em;}
h1, h2, h3, h4, h5, h6{margin-bottom:0.5em;}
#giant404{font-size:120px;text-align:center;}
#sub404{font-size:26px;text-align:center;}
#rightside{position:fixed;clear:both;height:150px;padding-top:20px;right:-880px;width:1000px;top:66%;transition:right 2.2s ease-in-out;background-color:black;z-index:1003;-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius-topleft:10px;-moz-border-radius-bottomleft:10px;border-top-left-radius:10px;border-bottom-left-radius:10px}
#rightside.MagicDingDong{right:-1px}
.rightside_left{height:50%;}
.rightside_right{height:50%;}
.clear{clear:both;}
strong{font-weight:bold;}
.center{text-align:center;}
#header_infos{border-bottom:none !important;padding:5px 50px;}
#header_infos a{text-decoration:none;color::#006b4b;}
#header_infos a:hover{text-decoration:underline;}
#header_infos p{margin-bottom:0px;color:#006b4b;font-size:13px}
#header_infos .fa-envelope{margin-left:15px;}
.product-category {box-sizing: border-box;}
.product-category a{text-decoration:none !important;}
.woocommerce-loop-category__title > .count{display:none;}
.woocommerce-loop-category__title{font-size:18px !important;font-weight:bold;font-family:sans-serif;text-align:center;}
.woocommerce ul.products li.product a img{margin-bottom:0px;}
.posted_in{display:none;}
/**** EIGENE CSS REGELN ****/
a{text-decoration:underline !important;}
.center{text-align:center;}
.smallBlue{color:#264571;margin-bottom:0px !important}

header nav ul li {line-height:80px !important;}
.hero{position:relative;}
.hero div div{margin-bottom:0 !important;}
.heroText{position:absolute;top:0;height:100%;width:100%;background: linear-gradient(
    90deg,
    rgba(38, 69, 113, 1) 0%,
    rgba(38, 69, 113, 0.9) 20%,
    rgba(38, 69, 113, 0.6) 40%,
    rgba(38, 69, 113, 0.3) 60%,
    rgba(38, 69, 113, 0) 100%
);}
.heroText *{color:white !important;}
.heroText ul li::marker {color:white !important;}
.heroText div{padding:20px 50px;}
.heroText a:hover{color:white !important;}
.heroText h1{width:40%;font-size:36px !important;}
.heroText p{width:40%;font-size:24px !important;}
.heroText li{width:40%;font-size:24px !important;}
main{padding-top:114px !important;}

.btn-mehr{display:inline-block;padding:12px 28px;background-color:#264571;color:white;font-size:15px;font-weight:600;text-decoration:none !important;border:none;border-radius:4px;cursor:pointer;transition:background-color 0.25s ease;}
.btn-mehr:hover{background-color:#264571;;color:white !important;}
.btn-mehr-white{display:inline-block;padding:12px 28px;background-color:#ffffff;color:#264571;font-size:15px;font-weight:600;text-decoration:none !important;border:none;border-radius:4px;cursor:pointer;transition:background-color 0.25s ease;}
.btn-mehr-white:hover{background-color:#ffffff;;color:#264571 !important;}

.blueBG{background-color:#D3D9E2;}
.zebraBG{background-color:#D3D9E2;padding:100px 0;}
.blueBox{background-color:#264571;padding:20px;border-radius:10px;}
.blueBox p{color:#ffffff !important;}
.blueBox .info-text p{color:#ffffff !important;}
.blueBox .smallHeadline{color:#ffffff !important;}
.blueBox .info-card h3, .blueBox .info-card h3{color:#ffffff !important;}
.lightblueBox{background-color:#D3D9E2;padding:20px;border-radius:10px;}
.lightblueBox .info-icon{background-color:#264571 !important;}
.whiteBox{background-color:#ffffff;padding:20px;border-radius:10px;}

.wpcf7-form{width:100% !important;font-family:Arial, Helvetica, sans-serif !important;font-size:15px !important;color:#333 !important;}
.wpcf7-form label{display:block !important;margin-bottom:20px !important;font-weight:600 !important;font-size:14px !important;color:#444 !important;}
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="date"], .wpcf7-form select, .wpcf7-form textarea {
display:block !important;width:100% !important;max-width:100% !important;margin-top:6px !important;padding:10px 14px !important;font-family:Arial, Helvetica, sans-serif !important;
font-size:15px !important;color:#333 !important;background-color:#ffffff !important;border:1px solid #ccc !important;border-radius:4px !important;box-sizing:border-box !important;transition:border-color 0.25s ease, box-shadow 0.25s ease !important;}
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus{outline:none !important;border-color:#264571 !important;box-shadow:0 0 0 3px rgba(38, 69, 113, 0.15) !important;}
.wpcf7-form textarea{min-height:120px !important;resize:vertical !important;}
.wpcf7-form select{appearance:none !important;-webkit-appearance:none !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;background-position:right 14px center !important;padding-right:40px !important;cursor:pointer !important;}
.twocollums{display:flex !important;gap:20px !important;}
.twocollums p{width:100%;}
.twocollums > label{flex:1 1 0 !important;min-width:0 !important;max-width:none !important;width:50% !important;}
.twocollums > label > span, .twocollums > label > .wpcf7-form-control-wrap{display:block !important;width:100% !important;}
.twocollums input[type="text"], .twocollums input[type="email"], .twocollums input[type="date"], .twocollums select{width:100% !important;max-width:100% !important;box-sizing:border-box !important;}
.wpcf7-form input[type="file"]{display:block !important;margin-top:6px !important;padding:10px !important;font-size:14px !important;border:2px dashed #ccc !important;border-radius:4px !important;
background-color:#fafafa !important;width:100% !important;box-sizing:border-box !important;cursor:pointer !important;transition:border-color 0.25s ease !important;}
.wpcf7-form input[type="file"]:hover{border-color:#264571 !important;}
.wpcf7-form .wpcf7-acceptance{display:flex !important;align-items:flex-start !important;gap:10px !important;margin:24px 0 !important;font-size:14px !important;line-height:1.5 !important;}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]{margin-top:3px !important;accent-color:#264571 !important;width:18px !important;height:18px !important;cursor:pointer !important;flex-shrink:0 !important;}
.wpcf7-form .wpcf7-acceptance a{color:#264571 !important;text-decoration:underline !important;}
.wpcf7-form .wpcf7-acceptance a:hover{color:#1a3155 !important;}
.wpcf7-form .greenButton{display:inline-block !important;padding:14px 36px !important;background-color:#264571 !important;color:#ffffff !important;font-family:Arial, Helvetica, sans-serif !important;
font-size:15px !important;font-weight:600 !important;border:none !important;border-radius:4px !important;cursor:pointer !important;transition:background-color 0.25s ease !important;}
.wpcf7-form .greenButton:hover{background-color:#1a3155 !important;}
.wpcf7-form .greenButton:active{background-color:#132440 !important;}
.wpcf7-form .wpcf7-not-valid-tip{display:block !important;margin-top:4px !important;font-size:13px !important;color:#d63031 !important;}
.wpcf7-form .wpcf7-not-valid{border-color:#d63031 !important;}
.wpcf7-form .wpcf7-response-output{margin-top:20px !important;padding:14px 18px !important;font-size:14px !important;border-radius:4px !important;border:1px solid #264571 !important;
background-color:#e8ecf3 !important;color:#333 !important;}

.leistungenRow{display:flex !important;align-items: stretch !important;}
.leistungenRow > .panel-grid-cell{display:flex !important;flex-direction:column !important;}
.leistungenRow > .panel-grid-cell > .so-panel{display:flex !important;flex-direction:column !important;}
.leistungenRow > .panel-grid-cell > .so-panel.widget_sow-editor{flex:1 !important;}
.leistungenRow > .panel-grid-cell > .so-panel.widget_sow-image{flex:0 0 auto !important;}
.leistungenRow .panel-widget-style{flex:1 !important;display:flex !important;flex-direction:column !important;}
.leistungenRow .so-widget-sow-editor{flex:1 !important;display:flex !important;flex-direction:column !important;padding:10px;}
.leistungenRow .textwidget{flex:1 !important;display:flex !important;flex-direction:column !important;}
.leistungenRow .textwidget > p:last-child{margin-top:auto !important;}
.leistungenRow > .panel-grid-cell{border-radius:8px !important;overflow:hidden !important;box-shadow:0 2px 12px rgba(0, 0, 0, 0.06) !important;}
.leistungenRow > .panel-grid-cell:empty{box-shadow:none !important;border: none !important;}

.cta-banner{background:#D3D9E2 !important;border-left:4px solid #264571 !important;border-radius:10px !important;}
.cta-banner .siteorigin-widget-tinymce.textwidget{display:flex !important;align-items:center !important;flex-wrap:wrap !important;gap:6px 24px !important;padding:36px 40px !important;}
.cta-banner .siteorigin-widget-tinymce.textwidget h3{font-size:20px !important;font-weight:700 !important;color:#2d2d2d !important;margin:0 !important;width:100% !important;}
.cta-banner .siteorigin-widget-tinymce.textwidget p:first-of-type{font-size:15px !important;color:#666 !important;flex:1 1 0 !important;margin:0 !important;}
.cta-banner .siteorigin-widget-tinymce.textwidget p:last-of-type{margin:0 0 0 auto !important;flex:none !important;}
.cta-banner .btn-mehr{white-space:nowrap !important;}

.benefits{background:#ffffff !important;border:1px solid #e4e4e4 !important;border-radius:10px !important;padding:32px 28px !important;transition:transform 0.3s ease, box-shadow 0.3s ease !important;}
.benefits-row{display:flex !important;align-items:stretch !important;}
.benefits-row > .panel-grid-cell{display:flex !important;flex-direction:column !important;}
.benefits-row > .panel-grid-cell > .so-panel{flex:1 !important;display:flex !important;flex-direction:column !important;}
.benefits-row .benefits{flex:1 !important;}
.aufgaben-list{list-style:none;padding:0;margin:24px 0 0 0;}
.aufgaben-list li{padding:6px 0 6px 36px;background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='%23264571'/%3E%3Cpolyline points='18 8 10 16 6 12' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:left 4px;font-size:18px;color:#3d4d5e;line-height:1.6;margin-bottom:10px;}
.info-card{display:flex !important;align-items:flex-start !important;gap:16px !important;padding:5px 0 !important;border-bottom:1px solid #D3D9E2 !important;}
.info-card:last-of-type{border-bottom:none !important;}
.info-icon{width:44px !important;height:44px !important;min-width:44px !important;background:#D3D9E2 !important;border-radius:10px !important;display:flex !important;align-items:center !important;
justify-content:center !important;}
.info-icon svg{width:20px !important;height:20px !important;}
.info-text h3{font-size:15px !important;font-weight:700 !important;color:#2d2d2d !important;margin-bottom:4px !important;}
.info-text p{font-size:14px !important;color:black !important;line-height:1.6 !important;}
.info-text a{color:#264571 !important;text-decoration:none !important;font-weight:600 !important;}
.info-text a:hover{color:#264571 !important;}
.info-card p{margin-bottom:0px;}

.fact-box {
    background: #f0f3f6;
    border: 1px solid #dce3eb;
    border-radius: 10px;
    padding: 20px;
}

.fact-box p:first-child {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #264571;
    line-height: 1;
    margin-bottom: 6px;
}

.fact-box p:last-child {
    font-size: 0.82rem;
    color: black;
    line-height: 1.4;
    margin: 0;
}

.hugeHeadline{font-size:48px !important;}
.smallHeadline{font-size:24px !important;}

.GreyBG{background-color:#D3D9E2;padding:100px 0;}
.greyBox > .panel-grid-cell{background-color:#D3D9E2;padding:10px;border:1px solid black;border-radius:15px;}

.marginBottom{margin-bottom:70px;}

.smallMarginTop{margin-top:-70px;}

footer .smallHeadline{color:white !important;}

/* ===================================================================
   AB HIER: Ergaenzungen fuer die Vorstellungsseite, die Startseite,
   den Footer, den Header und die Kontaktseite
   =================================================================== */

/* ==================================================================
   GEMEINSAMES DESIGNSYSTEM – wiederverwendbar auf jeder Seite
   (Vorstellung, Startseite, …), nicht mehr an #pl-15 gebunden.

   Leitidee: Auf dem Friedhof geht es um Zitate/Epitaphe – deshalb
   ziehen sich dezente Anführungszeichen als wiederkehrendes Motiv
   durch Namen und hervorgehobene Absätze. Bilder bekommen einen
   schmalen bronzefarbenen Rahmen, der an eine Gedenktafel erinnert,
   ohne kitschig zu wirken.
   ================================================================== */

/* Ruhige Serife nur für Namen & Zitate – der Fließtext bleibt bei
   der bestehenden Arial-Schrift, damit die Seite lesbar & vertraut
   bleibt. Der @import dafür steht ganz oben in der Datei (Zeile 11),
   da CSS @import-Regeln vor allen anderen Regeln stehen müssen –
   sonst ignoriert der Browser sie stillschweigend. */

:root {
  --vs-wine: #7a2b3a;      /* gedämpftes Weinrot statt Signalrot für "roteSchrift" */
  --vs-moss: #4a6741;      /* gedecktes Grün für "gruenSchrift" */
  --vs-bronze: #a9865a;    /* Bilderrahmen & Trennlinie */
  --vs-paper: #fbfaf6;     /* warmes Kartenweiß für die Text-Widgets */
  --vs-line: rgba(17, 17, 17, 0.09);
  --vs-serif: 'Cormorant Garamond', Georgia, serif;
}

/* ---------- Grundabstand (nur Vorstellungsseite) ---------- */
#pl-15.panel-layout {
  padding: 10px 0 20px;
}
#pl-15 #pg-15-0,
#pl-15 #pg-15-1 {
  align-items: stretch;
}

/* ---------- Karte: eigenständiges Textwidget (z. B. Dietmar) ---------- */
#pl-15 .so-widget-sow-editor {
  background: var(--vs-paper);
  border: 1px solid var(--vs-line);
  border-radius: var(--bc-radius);
  padding: 36px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, var(--bc-shadow-a));
  height: 100%;
  box-sizing: border-box;
}

/* ---------- .aboutCard: EINE gemeinsame Karte für Text + Bild
   nebeneinander – das Bild bekommt keine eigene Box mehr, sondern
   liegt zusammen mit dem Text auf einer Papierfläche. Funktioniert
   auf jeder Seite, überall wo einem Panel-Widget die CSS-Klasse
   "aboutCard" gegeben wird. ---------- */
.aboutCard {
  background: var(--vs-paper);
  border: 1px solid var(--vs-line);
  border-radius: var(--bc-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, var(--bc-shadow-a));
  padding: 28px;
  box-sizing: border-box;
}
.aboutCard .panel-grid {
  align-items: stretch !important;
}
.aboutCard .so-widget-sow-editor {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}
.aboutCard .so-widget-sow-image {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* ---------- Namen/Titel: Serife + dekoratives Anführungszeichen ---------- */
#pl-15 .so-widget-sow-editor .widget-title,
.aboutCard .so-widget-sow-editor .widget-title {
  font-family: var(--vs-serif);
  font-style: italic;
  font-weight: 600 !important;
  font-size: 30px !important;
  color: #1a1a1a !important;
  letter-spacing: 0.01em;
  margin-bottom: 20px !important;
  position: relative;
  padding-left: 34px;
}
#pl-15 .so-widget-sow-editor .widget-title::before,
.aboutCard .so-widget-sow-editor .widget-title::before {
  content: '\201C';
  position: absolute;
  left: -4px;
  top: -14px;
  font-family: var(--vs-serif);
  font-size: 54px;
  font-style: italic;
  color: var(--vs-bronze);
  line-height: 1;
}

/* ---------- Fließtext (nur Vorstellungsseite – dort ist die
   Schriftgröße bewusst etwas größer als im Theme-Standard) ---------- */
#pl-15 .siteorigin-widget-tinymce p {
  font-size: 16.5px !important;
  color: #2a2a2a !important;
  line-height: 1.75;
  margin-bottom: 1.1em;
}
#pl-15 .siteorigin-widget-tinymce strong {
  color: #1a1a1a;
  font-family: var(--vs-serif);
  font-style: italic;
  font-size: 1.08em;
  font-weight: 600;
}

/* ---------- Bilder innerhalb einer aboutCard: Passepartout-Rahmen ---------- */
.aboutCard .sow-image-container {
  position: relative !important;
  width: 100% !important;
  flex: 1 1 100% !important;
  border-radius: calc(var(--bc-radius) - 4px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(169, 134, 90, 0.35) !important;
}
.aboutCard .sow-image-container a {
  display: block !important;
  width: 100% !important;
}
.aboutCard .sow-image-container img,
.aboutCard .so-widget-sow-image img,
.aboutCard img.so-widget-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  transition: transform 400ms ease;
}
.aboutCard:hover .sow-image-container img {
  transform: scale(1.02);
}

/* ---------- Trennung zwischen den beiden Vorstellungen (nur dort) ---------- */
#pl-15 #pg-15-1 {
  margin-top: 40px !important;
  padding-top: 40px;
  position: relative;
}
#pl-15 #pg-15-1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vs-bronze), transparent);
}

/* ---------- "Projektziel"-Kasten auf der Vorstellungsseite ---------- */
#pl-15 p:has(.roteSchrift) {
  background: #fff;
  border-left: 3px solid var(--vs-bronze);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 1.6em 0;
  font-family: var(--vs-serif);
  font-style: italic;
  font-size: 18px !important;
  line-height: 1.6;
  position: relative;
}
#pl-15 p:has(.roteSchrift)::before {
  content: '\201C';
  position: absolute;
  top: -6px;
  left: 10px;
  font-size: 46px;
  color: var(--vs-line);
  font-style: italic;
}

/* ---------- Farbklassen für hervorgehobenen Text – funktionieren
   auf jeder Seite, unabhängig vom Kasten oben ---------- */
.roteSchrift {
  color: var(--vs-wine) !important;
  font-weight: 600;
}
.blaueSchrift {
  color: var(--bc-primary) !important;
  font-weight: 600;
}
.gruenSchrift {
  color: var(--vs-moss) !important;
  font-weight: 600;
}

/* ---------- .zitatQuote: großer, zitierter Absatz mit Anführungs-
   zeichen – für die kurzen, poetischen "Zitat"-Texte auf der
   Startseite. Auf jeder Seite verwendbar. ---------- */
.zitatQuote {
  background: #fff;
  border-left: 3px solid var(--vs-bronze);
  border-radius: 0 8px 8px 0;
  padding: 24px 28px;
  margin: 0 0 1.6em 0;
  font-family: var(--vs-serif);
  font-style: italic;
  font-size: 19px !important;
  line-height: 1.65;
  position: relative;
}
.zitatQuote::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  left: 12px;
  font-size: 50px;
  color: var(--vs-line);
  font-style: italic;
}
.zitatQuote p {
  font-size: inherit !important;
  color: #2a2a2a !important;
  margin-bottom: 0.6em;
}
.zitatQuote p:last-child {
  margin-bottom: 0;
}

/* ---------- Ausklappbare "Kurze Erklärung": <details>/<summary>
   statt JavaScript – funktioniert nativ im Browser. Der Text bleibt
   verborgen, bis jemand auf den Bronze-Button klickt. ---------- */
details summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: var(--vs-bronze);
  color: #fff;
  border-radius: 999px;
  font-family: var(--vs-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 16px !important;
  line-height: 1;
  list-style: none;
  transition: background-color 200ms ease;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::marker {
  content: '';
}
details summary::after {
  content: '\2193';
  font-style: normal;
  transition: transform 200ms ease;
}
details[open] summary::after {
  transform: rotate(180deg);
}
details summary:hover {
  background: #8a6f47;
}
details[open] summary {
  margin-bottom: 22px;
}
details > p:first-of-type {
  margin-top: 0;
}

/* ---------- Reduzierte Bewegung respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .aboutCard .sow-image-container img {
    transition: none;
  }
  details summary::after {
    transition: none;
  }
}

/* ---------- Mobil ---------- */
@media screen and (max-width: 780px) {
  #pl-15 .so-widget-sow-editor {
    padding: 26px 22px;
  }
  .aboutCard {
    padding: 18px;
  }
  #pl-15 .so-widget-sow-editor .widget-title,
  .aboutCard .so-widget-sow-editor .widget-title {
    font-size: 26px !important;
  }
  #pl-15 #pg-15-1 {
    margin-top: 30px !important;
    padding-top: 30px;
  }
  .zitatQuote {
    font-size: 17px !important;
    padding: 20px 22px;
  }
  footer {
    margin-top: 36px;
  }
}

/* ==================================================================
   FOOTER – ruhige Naturtöne
   Gilt site-weit (nicht auf #pl-15 beschränkt), da der Footer auf
   jeder Seite erscheint. Leitidee: Moos auf einer Bronzetafel –
   gedecktes Waldgrün statt reinem Schwarz, mit einem schmalen
   bronzenen Trennstrich oben, der die Bilderrahmen der
   Vorstellungsseite aufgreift.

   Hinweis: Alle Selektoren schließen #wpadminbar aus. Die
   WordPress-Admin-Leiste ist technisch im <footer> verschachtelt,
   aber nur für dich als eingeloggten Administrator sichtbar – ohne
   diesen Ausschluss würden die Regeln auch dort greifen.
   ================================================================== */
footer {
  background-color: #333a32;
  border-top: 1px solid rgba(169, 134, 90, 0.35);
  margin-top: 60px;
}
footer p,
footer a:not(#wpadminbar *) {
  color: #e9e4d8;
  font-size: 14px !important;
}
footer a:not(#wpadminbar *) {
  color: #c9a06c;
  text-decoration: none !important;
  transition: color 200ms ease;
}
footer a:not(#wpadminbar *):hover {
  color: #e3c391;
  text-decoration: underline;
}

/* ---------- Menü: keine Aufzählungspunkte, ruhige Liste ---------- */
footer ul:not(#wpadminbar *) {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer li:not(#wpadminbar *) {
  margin-bottom: 10px;
  padding-left: 0;
}

/* ---------- Überschriften im Footer (z. B. "Besonderer Dank an:"):
   erben sonst die globale schwarze, viel zu große Theme-Schrift –
   hier auf Footer-Farbe und -Größe vereinheitlicht ---------- */
footer h1:not(#wpadminbar *),
footer h2:not(#wpadminbar *),
footer h3:not(#wpadminbar *),
footer h4:not(#wpadminbar *),
footer h5:not(#wpadminbar *),
footer h6:not(#wpadminbar *),
footer .smallHeadline:not(#wpadminbar *) {
  color: #e9e4d8 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  margin-bottom: 12px !important;
}

/* ---------- Logos: Papier-Plakette statt aufgesetzter, nackter
   Rechtecke – greift dieselbe Passepartout-Idee wie die Portraits
   auf der Vorstellungsseite auf ---------- */
footer img:not(#wpadminbar *) {
  display: inline-block;
  max-height: 55px;
  width: auto;
  padding: 12px 20px;
  background: #fbfaf6;
  border: 1px solid rgba(169, 134, 90, 0.35);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* ==================================================================
   HEADER – dieselbe Moos-Palette wie der Footer, damit die
   cremefarbenen Karten oben und unten von einem dunklen,
   bronze-gesäumten Rahmen eingefasst werden.
   ================================================================== */
:root {
  --bc-nav-active: #c9a06c; /* Bronze statt Signalblau für die aktive Menü-Unterstreichung */
}

header {
  background-color: #333a32 !important;
  border-bottom: 1px solid rgba(169, 134, 90, 0.35) !important;
}

/* Logo: kleine Papier-Plakette, damit es unabhängig von seinen
   eigenen Farben auf dem dunklen Grund lesbar bleibt – dieselbe
   Passepartout-Idee wie bei den Footer-Logos */
#logo a {
  display: inline-block;
  background: #fbfaf6;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(169, 134, 90, 0.35);
}

header nav,
header nav ul li,
header nav ul ul {
  background-color: transparent !important;
}
header nav ul li a {
  color: #e9e4d8 !important;
}
header nav ul li:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}
header nav ul ul {
  background-color: #333a32 !important;
  border: 1px solid rgba(169, 134, 90, 0.35);
}
header nav ul ul li a:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---------- Mobiles Menü: Toggle-Button passend zum dunklen Header ---------- */
.bc-mm-toggle {
  background: #333a32 !important;
  border: 1px solid rgba(169, 134, 90, 0.35) !important;
}
.bc-mm-bar {
  background: #e9e4d8 !important;
}
.bc-mm-panel .current-menu-item > a,
.bc-mm-panel .current_page_item > a,
.bc-mm-panel .current-menu-ancestor > a,
.bc-mm-panel .current_page_ancestor > a {
  color: #8a6f47 !important;
}

/* ==================================================================
   KONTAKTSEITE (#pl-49) – Kopf, Adress-/Formular-Karten, Karte
   ================================================================== */

/* ---------- Kopfbereich: Eyebrow, H1, Lead ---------- */
#pl-49 .eyebrow {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-bronze);
  margin-bottom: 10px !important;
}
#pl-49 h1 {
  font-family: var(--vs-serif);
  font-style: italic;
  font-weight: 600 !important;
  font-size: 40px !important;
  color: #1a1a1a !important;
  margin-bottom: 12px !important;
}
#pl-49 .lead {
  font-size: 17px !important;
  color: #2a2a2a !important;
  line-height: 1.6;
  max-width: 640px;
}

/* ---------- Adress- und Formular-Karten ---------- */
#pl-49 .kontakt .so-widget-sow-editor {
  background: var(--vs-paper);
  border: 1px solid var(--vs-line);
  border-radius: var(--bc-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, var(--bc-shadow-a));
  padding: 32px;
  height: 100%;
  box-sizing: border-box;
}

/* ---------- Adressliste ---------- */
#pl-49 .kontakt-liste dt {
  font-family: var(--vs-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 19px;
  color: #1a1a1a;
  margin-top: 20px;
}
#pl-49 .kontakt-liste dt:first-child {
  margin-top: 0;
}
#pl-49 .kontakt-liste dd {
  font-size: 15.5px;
  color: #2a2a2a;
  line-height: 1.6;
  margin: 4px 0 0 0;
}
#pl-49 .kontakt-liste dd a {
  color: var(--vs-bronze);
}
#pl-49 .kontakt-liste dd a:hover {
  color: #8a6f47;
}

/* ---------- Kontaktformular: Bronze statt Navy ---------- */
#pl-49 .wpcf7-form label {
  font-family: var(--vs-serif) !important;
  font-style: italic;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  font-size: 16px !important;
}
#pl-49 .wpcf7-form input[type="text"],
#pl-49 .wpcf7-form input[type="email"],
#pl-49 .wpcf7-form textarea {
  border: 1px solid var(--vs-line) !important;
  border-radius: 8px !important;
}
#pl-49 .wpcf7-form input:focus,
#pl-49 .wpcf7-form textarea:focus {
  border-color: var(--vs-bronze) !important;
  box-shadow: 0 0 0 3px rgba(169, 134, 90, 0.15) !important;
}
#pl-49 .wpcf7-form input[type="submit"] {
  display: inline-block !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  background-color: var(--vs-bronze) !important;
  border: 1.5px solid var(--vs-bronze) !important;
  color: #fbfaf6 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer;
  transition: background-color 200ms ease;
}
#pl-49 .wpcf7-form input[type="submit"]:hover {
  background-color: #8a6f47 !important;
}

/* ---------- Karten-Zeile ---------- */
#pl-49 .kontakt-karte-row h2 {
  font-family: var(--vs-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  color: #1a1a1a;
  margin-bottom: 6px;
}
#pl-49 .kontakt-karte-row > p {
  color: #2a2a2a;
  margin-bottom: 16px;
}
#pl-49 .kontakt-karte {
  border-radius: var(--bc-radius);
  overflow: hidden;
  border: 1px solid rgba(169, 134, 90, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, var(--bc-shadow-a));
}
#pl-49 .kontakt-karte iframe {
  display: block;
}
#pl-49 .karte-hinweis {
  margin-top: 10px !important;
  font-size: 13px !important;
}
#pl-49 .karte-hinweis a {
  color: var(--vs-bronze);
}
#pl-49 .karte-hinweis a:hover {
  color: #8a6f47;
}

@media screen and (max-width: 780px) {
  #pl-49 h1 {
    font-size: 30px !important;
  }
  #pl-49 .kontakt .so-widget-sow-editor {
    padding: 22px;
  }
}

/* ==================================================================
   HEADER-LAYOUT: Logo zentriert, Menü darunter zentriert
   #logo und <nav> sind im HTML zwei Geschwister-Elemente direkt im
   <header> – die Reihenfolge lässt sich nicht ändern, aber per Flex-
   Spalte werden beide unabhängig von ihrer Breite zu zwei zentrierten
   Zeilen übereinander gestapelt.
   ================================================================== */
header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
}
#header_infos:empty {
  display: none;
}
#logo {
  text-align: center !important;
}
header nav[role="navigation"] {
  width: 100%;
}

/* ---------- Menü-Typografie: dezente Versalien statt Standardtext,
   passend zur ruhigen, redaktionellen Anmutung der restlichen Seite ---------- */
header nav ul li a {
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
header nav > div > ul > li,
header nav > ul > li {
  margin: 0 20px !important;
}

@media screen and (max-width: 992px) {
  header {
    flex-direction: row !important;
    justify-content: space-between !important;
  }
  #logo {
    text-align: left !important;
  }
}

/* ==================================================================
   STICKY FOOTER: Auf kurzen Seiten (z. B. Impressum) soll der
   Footer immer am unteren Bildschirmrand kleben, statt direkt
   hinter dem kurzen Inhalt zu stehen und darunter Leerraum zu
   lassen. body wird zur Flex-Spalte über die volle Fensterhöhe,
   <main> wächst, der Footer wird dadurch automatisch nach unten
   gedrückt.
   ================================================================== */
html {
  height: 100%;
}
body {
  display: flex !important;
  flex-direction: column;
  min-height: 100vh !important;
}
body > main {
  flex: 1 0 auto;
  width: 100%;
  box-sizing: border-box;
}
body > footer {
  flex-shrink: 0;
  width: 100%;
}

/* ==================================================================
   STICKY FOOTER: Der Footer soll immer am unteren Bildschirmrand
   bleiben, auch wenn eine Seite (z. B. Impressum) kaum Inhalt hat –
   statt direkt unter dem kurzen Text zu kleben. body wird zur
   Flex-Spalte über die volle Fensterhöhe, main wächst automatisch
   und schiebt den Footer nach unten, sobald der Inhalt kürzer ist
   als der Bildschirm. Bei langen Seiten ändert sich nichts, main
   wächst dann einfach über die volle Inhaltshöhe hinaus.
   ================================================================== */
html {
  height: 100%;
}
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
main {
  flex: 1 0 auto !important;
}
footer {
  flex-shrink: 0;
}