/*
 Theme Name: Kalium Child
 Theme URI: 
 Description: Child Theme für Kalium
 Author: Heinz Sanders
 Template: kalium
 Version: 1.0.3
 Text Domain: kalium-child
*/

/* =========================
   Utils
   ========================= */
 /* etwas Abstand vor dem Reply-Link */
.comment-reply-link { margin-left: .4em; }

:root{
  --header-offset: 78px;
  --adminbar-offset: 0px;
}
body.admin-bar{ --adminbar-offset: 32px; }

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

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important;
     transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* Zweite AddToAny-Leiste unten ausblenden */
.addtoany_share_save_container.addtoany_content_bottom{ display:none !important; }

/* =========================
   Single Attachment (Bild)
   – alles .single-attachment scopen, damit Portfolio sauber bleibt
   ========================= */
.single-attachment .art-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:clamp(16px,3vw,32px);
}
.single-attachment .art-grid{
  display:grid; grid-template-columns:2fr 1fr;
  gap:clamp(16px,3vw,32px); align-items:start;
}
.single-attachment .art-image{ margin:0; }
.single-attachment .art-img{
  display:block; width:100%; height:auto;
  border-radius:6px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.single-attachment .art-meta{
  position:sticky; top:calc(var(--header-offset) + var(--adminbar-offset));
  display:flex; flex-direction:column; min-height:100%; gap:.5rem;
}
.single-attachment .art-title{
  margin:0 0 .25em; font-size:clamp(28px,3.2vw,42px);
  line-height:1.15; color:#ffc13b;
}
.single-attachment .art-date{ margin-bottom:1rem; opacity:.75; }

/* YASR – linke Einrückung weg + Transform-Fix */
.single-attachment .art-rating{ margin-top:.25rem; }
.single-attachment .art-rating .yasr-custom-text-vv-before{ margin-bottom:.5rem; opacity:.8; font-size:1.5rem; }
.single-attachment .art-rating .yasr-small-block-bold{ opacity:.8; font-size:1.5rem; }
.single-attachment .art-rating [id^="yasr_visitor_votes_"].yasr-visitor-votes{
  transform:translateZ(0); margin:8px 0 12px 5px; padding-left:0 !important;
}
.single-attachment .art-rating [id^="yasr_visitor_votes_"] .yasr-stars,
.single-attachment .art-rating [id^="yasr_visitor_votes_"] .yasr-star-rating{
  margin-left:0 !important; padding-left:0 !important;
}

/* Share */
.single-attachment .art-share{ margin-top:auto; margin-bottom:0; display:grid; gap:.5rem; }
.single-attachment .art-share .a2a_label{ display:none !important; }
.single-attachment .art-share .a2a_kit{ line-height:0; }

/* Bild-Details */
.single-attachment .art-details{ list-style:none; margin:1.5rem 0 0; padding:0; font-size:1.5rem; }
.single-attachment .art-details li{ margin:.35rem 0; }
.single-attachment .art-details li span{ opacity:.75; display:inline-block; min-width:8ch; }

/* Kommentare */
.single-attachment .art-comments{
  margin-top:clamp(24px,5vw,48px);
  padding-top:clamp(12px,3vw,24px);
  border-top:1px solid rgba(255,255,255,.12);
}

/* =========================
   Kommentarformular (global nutzbar)
   ========================= */
.post-comment-form .comment-respond{
  background:#202224; border-radius:12px; padding:16px 18px;
  box-shadow:0 8px 24px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.06);
}
.post-comment-form p.logged-in-as{
  margin:0 0 12px; background:#2a2d31; padding:8px 12px; border-radius:8px; font-size:.9rem; color:#d6d6d6;
}
.post-comment-form p.logged-in-as a{ color:#ffd25a; text-decoration:none; }
.post-comment-form p.logged-in-as a:hover{ text-decoration:underline; }

.comment-form label{ font-weight:600; color:#e9e9e9; }
.comment-form .required{ color:#ffb300; }
.comment-form .comment-form-url{ display:none !important; }

.comment-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 12px; }
.comment-form .comment-form-author,
.comment-form .comment-form-email{ margin:0; width:auto; }

.comment-form textarea{
  width:100%; min-height:220px; resize:vertical; color:#eaeaea; background:#16181b;
  border:1px solid #3a3f45; border-radius:10px; padding:14px 16px; line-height:1.45;
}
.comment-form textarea:focus{ outline:none; border-color:#ffd25a; box-shadow:0 0 0 3px rgba(255,210,90,.15); }

.comment-form .form-submit .button,
#commentform input[type="submit"]{
  background:#ffcc33; color:#111; border:none; border-radius:10px;
  padding:10px 16px; font-weight:700; cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.comment-form .form-submit .button:hover,
#commentform input[type="submit"]:hover{ background:#ffd966; box-shadow:0 6px 18px rgba(255,204,51,.35); transform:translateY(-1px); }
.comment-form textarea:focus-visible,
#commentform input[type="submit"]:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,210,90,.3); }

/* Abstand über dem Formular */
.single-attachment .post-comment-form{ margin-top:28px; }

/* =========================
   Responsiv
   ========================= */
@media (max-width:1024px){
  .single-attachment .art-grid{ grid-template-columns:1fr; }
  .single-attachment .art-meta{ position:static; display:block; }
}
@media (max-width:768px){
  .comment-form .row{ grid-template-columns:1fr; }
}

/* ========== Baumartige Kommentare ========== */
.comments-wrap { margin-top: 24px; }
.comments-title {
  margin: 0 0 6px; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.2;
}
.comments-subtitle { margin: 0 0 18px; opacity: .75; }

/* Liste & Einzüge */
.comment-list,
.comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list > li { margin-bottom: 16px; }
.comment-list .children {
  margin-top: 12px;
  margin-left: 28px;           /* Einzug der Antworten */
  padding-left: 18px;
  border-left: 2px solid rgba(255,255,255,.08);
}

/* Einzelkommentar */
.cmt { position: relative; }
.cmt__body {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
}
.cmt__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.cmt__main {
  background: #202224;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.cmt__head { display:flex; gap:.5rem; align-items:baseline; }
.cmt__author { font-weight: 700; }
.cmt__time { opacity: .65; font-size: .9rem; }
.cmt__mod { display:block; margin:.25rem 0 .35rem; color:#ffcc66; }
.cmt__text p { margin: .5rem 0; }
.cmt__actions {
  margin-top: 6px; display:flex; gap:.5rem; align-items:center; opacity:.9;
}
.cmt__actions a { text-decoration:none; color:#ffd25a; }
.cmt__actions a:hover { text-decoration:underline; }
.cmt__sep { opacity:.5; }

/* Verbindungspunkte (kleine "Knoten" an der Linie) */
.comment-list .children > li .cmt__body::before {
  content: ""; position: absolute; left: -27px; top: 22px;
  width: 10px; height: 10px; border-radius: 50%; background: #ffd25a;
  box-shadow: 0 0 0 3px rgba(255,210,90,.18);
}

/* Mobile: weniger Einzug, 1-spaltig */
@media (max-width: 768px){
  .comment-list .children { margin-left: 16px; padding-left: 14px; }
  .cmt__body { grid-template-columns: 40px 1fr; }
  .cmt__avatar { width: 40px; height: 40px; }
}

/* nur Produktseiten 
   Produkt-Titel*/
.single-product .summary .product_title.entry-title {
  color: #ffd25a; /* gewünschte Farbe */
}

/* falls etwas sehr Spezifisches aus dem Parent noch gewinnt */
.single-product .summary .product_title.entry-title { 
  color: #ffd25a !important; 
}

.ia-empty-box{
  background:#202224;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:16px 18px;margin-top:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.22)
}
.ia-empty-box h3{margin:0 0 .35rem;font-size:2rem}
.ia-empty-box p{margin:.5rem 1rem .7rem;opacity:1.5}
.ia-cta{display:flex;gap:.6rem;flex-wrap:wrap}
.ia-cta .btn{display:inline-block;padding:.6rem .9rem;border-radius:10px;text-decoration:none}
.ia-cta .btn-primary{background:#ffd25a;color:#111;font-weight:700}
.ia-cta .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff}
.ia-cta .btn-primary:hover{filter:brightness(.95)}
.ia-cta .btn-ghost:hover{border-color:rgba(255,255,255,.55)}

/* ===============================
   WooCommerce – Dark UI Cleanup
   =============================== */

:root {
  --ia-bg:        #1d1f22;
  --ia-card:      #212529;
  --ia-card-2:    #24282d;
  --ia-border:    #3a3f45;
  --ia-text:      #e8e8e8;
  --ia-text-dim:  #b7bcc3;
  --ia-accent:    #ffd25a;   /* Akzent (Gelb) */
  --ia-accent-ink:#111;
  --ia-success:   #28c76f;
  --ia-danger:    #ef5350;
  --ia-info:      #6ec1ff;
}

/* Grund-Lesbarkeit in Woo Bereichen */
.woocommerce,
.woocommerce-page {
  color: var(--ia-text);
}
.woocommerce a,
.woocommerce-page a { color: var(--ia-accent); }
.woocommerce a:hover,
.woocommerce-page a:hover { filter: brightness(.92); }

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--ia-card);
  border: 1px solid var(--ia-border);
  color: var(--ia-text);
}
.woocommerce-error { border-left: 4px solid var(--ia-danger); }
.woocommerce-info  { border-left: 4px solid var(--ia-info); }
.woocommerce-message{ border-left:4px solid var(--ia-success); }

/* Karten / Boxen */
.woocommerce .card,
.woocommerce .shop_table,
.woocommerce .order_details,
.woocommerce .woocommerce-order,
.woocommerce .woocommerce-customer-details,
.woocommerce .woocommerce-checkout-review-order,
.woocommerce .woocommerce-MyAccount-content,
.woocommerce .woocommerce-MyAccount-navigation,
.woocommerce .cart_totals {
  background: var(--ia-card);
  border: 1px solid var(--ia-border);
}

/* Tabellen (Warenkorb, Bestellung, Review) */
.woocommerce table.shop_table {
  border: 1px solid var(--ia-border);
  border-collapse: separate;
  border-radius: 10px;
  background: var(--ia-card);
}
.woocommerce table.shop_table th {
  background: var(--ia-card-2);
  color: var(--ia-text);
  border-bottom: 1px solid var(--ia-border);
}
.woocommerce table.shop_table td {
  color: var(--ia-text);
  border-top: 1px solid var(--ia-border);
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  background: var(--ia-card-2);
  color: var(--ia-text);
}
.woocommerce table.shop_table tr:not(:last-child) td { border-bottom: 1px solid var(--ia-border); }

/* Eingabefelder (Kasse, Gutscheine, Adressen) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .woocommerce-input-wrapper input,
.woocommerce .woocommerce-input-wrapper textarea,
.woocommerce .woocommerce-input-wrapper select,
.woocommerce-cart table.cart td.actions .input-text {
  background: #2a2d31;
  border: 1px solid var(--ia-border);
  color: var(--ia-text);
  border-radius: 10px;
  padding: .7rem .8rem;
}
.woocommerce ::placeholder { color: var(--ia-text-dim); }
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--ia-accent);
  box-shadow: 0 0 0 3px rgba(255,210,90,.15);
}

/* Buttons – einheitlich */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce .woocommerce-button {
  background: var(--ia-accent);
  color: var(--ia-accent-ink);
  border: none;
  border-radius: 10px;
  font-weight: 700;
  padding: .7rem 1.1rem;
  line-height: 1.1;
  text-transform: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce .woocommerce-button:hover {
  filter: brightness(.95);
}
.woocommerce button.button.alt,
.woocommerce a.button.alt { background: var(--ia-accent); color: var(--ia-accent-ink); }

/* Sekundäre Buttons (z.B. „Warenkorb aktualisieren“, Coupon) */
.woocommerce .button.secondary,
.woocommerce-cart .actions .button {
  background: transparent !important;
  color: var(--ia-text);
  border: 1px solid var(--ia-border);
}
.woocommerce .button.secondary:hover,
.woocommerce-cart .actions .button:hover {
  border-color: var(--ia-text-dim);
}

/* Warenkorb – Summen/Kasten rechts */
.woocommerce .cart_totals {
  border-radius: 10px;
  padding: 1rem;
}
.woocommerce .cart_totals h2 { color: var(--ia-text); }

/* Checkout – Bestellübersicht & Payment */
.woocommerce-checkout-review-order,
.woocommerce #order_review {
  background: var(--ia-card);
  border-radius: 10px;
  padding: 1rem;
}
.woocommerce #payment,
.woocommerce-checkout #payment {
  background: var(--ia-card);
  border: 1px solid var(--ia-border);
  border-radius: 10px;
}
.woocommerce-checkout #payment div.payment_box {
  background: #2a2d31;
  color: var(--ia-text);
  border: 1px solid var(--ia-border);
}
.woocommerce-checkout #payment ul.payment_methods li label { color: var(--ia-text); }
.woocommerce-terms-and-conditions-checkbox-text,
.woocommerce form .form-row .required { color: var(--ia-text); }

/* Order received / Bestelldetails */
.woocommerce-order .woocommerce-order-overview,
.woocommerce-order .woocommerce-order-details {
  background: var(--ia-card);
  border: 1px solid var(--ia-border);
  border-radius: 10px;
  padding: .8rem 1rem;
}
.woocommerce ul.order_details {
  background: var(--ia-card);
  border: 1px solid var(--ia-border);
}
.woocommerce ul.order_details li { border-right-color: var(--ia-border); }

/* Mein Konto */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border: 1px solid var(--ia-border);
  border-radius: 10px;
  background: var(--ia-card);
}
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: .75rem 1rem;
  color: var(--ia-text);
  border-bottom: 1px solid var(--ia-border);
}
.woocommerce-MyAccount-navigation ul li:last-child a { border-bottom: 0; }
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--ia-card-2);
  color: var(--ia-accent);
}
.woocommerce-MyAccount-content {
  background: var(--ia-card);
  border: 1px solid var(--ia-border);
  border-radius: 10px;
  padding: 1rem;
}

/* Kleinere Kosmetik */
.woocommerce table.shop_table td.product-remove a { color: var(--ia-danger); }
.woocommerce .amount, .woocommerce .order-total .amount { color: var(--ia-text); }
.woocommerce .woocommerce-breadcrumb { color: var(--ia-text-dim); }
.woocommerce .woocommerce-breadcrumb a { color: var(--ia-accent); }

/* Falls du irgendwo noch Woo Blocks verwendest (Sicherheitsnetz) */
.wc-block-components-panel,
.wc-block-components-totals-item,
.wc-block-cart__totals-title,
.wc-block-cart,
.wc-block-components-notice-banner {
  background: var(--ia-card);
  color: var(--ia-text);
  border-color: var(--ia-border);
}
.wc-block-components-button {
  background: var(--ia-accent) !important;
  color: var(--ia-accent-ink) !important;
  border-radius: 10px !important;
}

/* ===== Menge / Quantity (Up-Down Feld) ===== */

/* Container */
.woocommerce .quantity,
.woocommerce div.quantity {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* Das Eingabefeld selbst */
.woocommerce .quantity .qty {
  width: 72px;              /* gern anpassen */
  height: 36px;
  text-align: center;
  background: #2a2d31;
  color: var(--ia-text);
  border: 1px solid var(--ia-border);
  border-radius: 10px;
  padding: .4rem .5rem;
  font-weight: 600;
}
.woocommerce .quantity .qty:focus {
  outline: none;
  border-color: var(--ia-accent);
  box-shadow: 0 0 0 3px rgba(255,210,90,.15);
}

/* Firefox – native Pfeile ausblenden, damit das Feld sauber aussieht */
.woocommerce .quantity .qty[type="number"] {
  -moz-appearance: textfield;
}

/* Chrome/Edge – Spin-Buttons sichtbar, aber ans Dark-Theme angepasst */
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
  opacity: .7;          /* besser sichtbar auf dunkel */
  filter: invert(1);    /* weiße Pfeile */
  margin: 0;
}

/* =========================================================
   1) Eingabefelder wie das Mengenfeld (Dark, rounded, Focus)
   ========================================================= */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="url"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select,
.woocommerce-cart table.cart td.actions .input-text {
  background: #2a2d31;
  color: var(--ia-text);
  border: 1px solid var(--ia-border);
  border-radius: 10px;
  padding: .6rem .75rem;
  height: 36px;
}

.woocommerce textarea {
  height: auto;
  min-height: 110px;
  line-height: 1.4;
}

.woocommerce ::placeholder { color: var(--ia-text-dim); }

/* Fokus wie beim Qty-Feld */
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="url"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  outline: none;
  border-color: var(--ia-accent);
  box-shadow: 0 0 0 3px rgba(255,210,90,.15);
}

/* Select2 (Kasse-Länder/State) an Dark-Theme angleichen */
.select2-container--default .select2-selection--single {
  background: #2a2d31; border:1px solid var(--ia-border); border-radius:10px; height: 36px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ia-text); line-height: 36px; padding-left: .75rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-dropdown { background:#2a2d31; border:1px solid var(--ia-border); }
.select2-results__option { color: var(--ia-text); }
.select2-results__option--highlighted { background: var(--ia-card-2); }

/* =========================================================
   2) Produktlink im Warenkorb: lesbar (normal/hover/visited)
   ========================================================= */
.woocommerce-cart table.cart td.product-name a,
.woocommerce table.shop_table td a:not(.remove) {
  color: var(--ia-text);
  text-decoration: none;
}
.woocommerce-cart table.cart td.product-name a:hover,
.woocommerce table.shop_table td a:not(.remove):hover {
  color: var(--ia-accent);
}
.woocommerce-cart table.cart td.product-name a:visited {
  color: var(--ia-text);
}

/* =========================================================
   3) Sekundärbuttons (Gutschein anwenden / Warenkorb aktualisieren)
      – dunkler Stil, Hover bleibt lesbar
   ========================================================= */
/* Namen sind stabil in Woo: apply_coupon + update_cart */
.woocommerce-cart .actions .button[name="apply_coupon"],
.woocommerce-cart .actions .button[name="update_cart"] {
  background: transparent !important;
  color: var(--ia-text) !important;
  border: 1px solid var(--ia-border) !important;
  border-radius: 10px;
  padding: .55rem .9rem;
  font-weight: 600;
  transition: border-color .2s, background .2s, color .2s;
}
.woocommerce-cart .actions .button[name="apply_coupon"]:hover,
.woocommerce-cart .actions .button[name="update_cart"]:hover {
  background: var(--ia-card-2) !important;
  color: var(--ia-text) !important;
  border-color: var(--ia-text-dim) !important;
}

/* Falls irgendwo allgemeine .button-Hover-Regeln greiffen: neutralisieren */
.woocommerce .button:not(.checkout-button):not(.alt):not(.single_add_to_cart_button):hover {
  color: var(--ia-text);
}

/* Mengeneingabe: gleiche Optik wie oben (nur der Vollständigkeit halber) */
.woocommerce .quantity .qty {
  background:#2a2d31; color:var(--ia-text);
  border:1px solid var(--ia-border); border-radius:10px; height:36px;
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button { opacity:.8; filter: invert(1); }
.woocommerce .quantity .qty[type="number"] { -moz-appearance: textfield; }

/* ================================
   CART: Produktlink gut lesbar
   (Theme-Regel überschreiben)
   ================================ */
.woocommerce .shop_table.cart .cart_item .product-name a,
.woocommerce .shop_table.cart .cart_item .product-name a:visited,
.woocommerce-cart .shop_table.cart td.product-name a,
.woocommerce-cart .shop_table.cart td.product-name a:visited {
  color: var(--ia-text) !important;
  text-decoration: none;
}
.woocommerce .shop_table.cart .cart_item .product-name a:hover,
.woocommerce-cart .shop_table.cart td.product-name a:hover {
  color: var(--ia-accent) !important;
}

/* Falls irgendwo noch generelle Link-Regeln greifen: */
.woocommerce .shop_table.cart td a:not(.remove) {
  color: var(--ia-text) !important;
}
.woocommerce .shop_table.cart td a:not(.remove):hover {
  color: var(--ia-accent) !important;
}

/* ================================
   CART: Sekundärbuttons (Hover)
   ================================ */
.woocommerce-cart .actions .button[name="apply_coupon"]:hover,
.woocommerce-cart .actions .button[name="update_cart"]:hover {
  background: var(--ia-card-2) !important;
  color: var(--ia-text) !important;
  border-color: var(--ia-text-dim) !important;
}
/* ===== Qty-Feld HART überschreiben (Produkt, Warenkorb, Kasse) ===== */
.woocommerce div.quantity input.qty,
.woocommerce .quantity .qty,
.woocommerce-cart table.cart .product-quantity .quantity .qty,
.woocommerce table.shop_table .quantity .qty,
.woocommerce-page .quantity .qty {
  background: #2a2d31 !important;
  color: var(--ia-text) !important;
  border: 1px solid var(--ia-border) !important;
  border-radius: 10px !important;
  height: 36px !important;
  width: 80px !important;       /* ggf. 72px oder auto; Geschmackssache */
  padding: .4rem .5rem !important;
  text-align: center !important;
  text-indent: 0 !important;
  box-shadow: none !important;
}

/* Spin-Buttons in hell (damit sichtbar auf dunkel) */
.woocommerce div.quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.quantity input.qty::-webkit-inner-spin-button {
  opacity: .8;
  filter: invert(1);
}

/* Firefox: sauberes Number-Feld */
.woocommerce div.quantity input.qty[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* =========================================================
   1) WooCommerce Hinweis-/Meldungsboxen (dark, gut lesbar)
   ========================================================= */
.woocommerce .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce-checkout .checkout-form-option--header .woocommerce-info {
  background: #2a2d31 !important;                 /* Feldhintergrund dunkel */
  color: var(--ia-text) !important;                /* Lesbarer Text */
  border: 1px solid var(--ia-border) !important;   /* Rahmen an Layout anpassen */
  border-left: 4px solid var(--ia-accent) !important; /* farbliche Akzentkante */
  box-shadow: none !important;
}

/* Links in den Boxen (z. B. „Klicken Sie hier…“) */
.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-error a {
  color: var(--ia-accent) !important;
  text-decoration: underline;
}
.woocommerce .woocommerce-info a:hover,
.woocommerce .woocommerce-message a:hover,
.woocommerce .woocommerce-error a:hover {
  color: var(--ia-accent-strong, #ffc033) !important;
}

/* =========================================================
   2) Select2 (Land / Bundesland …) auf Dark-Theme stylen
   ========================================================= */
/* Grundcontainer */
.select2-container .select2-selection--single {
  background: #2a2d31 !important;
  border: 1px solid var(--ia-border) !important;
  border-radius: 10px !important;
  height: 40px !important;
}

/* Anzeigetext im Feld */
.select2-container .select2-selection--single .select2-selection__rendered {
  color: var(--ia-text) !important;
  line-height: 40px !important;
  padding-left: 12px !important;
}

/* Placeholder-Farbe */
.select2-container .select2-selection--single .select2-selection__placeholder {
  color: var(--ia-text-dim) !important;
}

/* Pfeil-/Arrow-Bereich */
.select2-container .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--ia-text) transparent transparent transparent !important;
  /* einige Skins nutzen ein SVG – notfalls invertieren: */
  filter: none;
}

/* Fokus-/Open-Zustand */
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ia-accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ia-accent) 30%, transparent) !important;
}

/* Dropdown-Menü */
.select2-dropdown {
  background: #2a2d31 !important;
  border: 1px solid var(--ia-border) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.select2-results__option {
  color: var(--ia-text) !important;
}
.select2-results__option--highlighted[aria-selected] {
  background: #3a3f45 !important;
  color: var(--ia-text) !important;
}

/* Suchfeld im Dropdown (falls aktiv) */
.select2-search--dropdown .select2-search__field {
  background: #23272b !important;
  color: var(--ia-text) !important;
  border: 1px solid var(--ia-border) !important;
  border-radius: 8px !important;
}

/* Barrierefreiheit: Fokusrahmen */
.select2-container--default .select2-selection--single:focus {
  outline: none !important;
}

/* Ende */

/*
/* Start Wrapper Klasse contact-card*/
/* Seite scopen (Kontakt): page-id-2261 */
body.page-id-2261 .contact-card {
  background: #1b1f25;
  border: 1px solid #2b3138;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Typo/Labels */
body.page-id-2261 .contact-card label {
  display: block;
  margin: 10px 0 6px;
  font-weight: 500;
  color: #d7dde4;
}

/* Felder (Text, E-Mail, Betreff etc.) */
body.page-id-2261 .contact-card input[type="text"],
body.page-id-2261 .contact-card input[type="email"],
body.page-id-2261 .contact-card input[type="tel"],
body.page-id-2261 .contact-card input[type="url"],
body.page-id-2261 .contact-card input[type="search"],
body.page-id-2261 .contact-card textarea,
body.page-id-2261 .contact-card select {
  width: 100%;
  background: #0f141a;
  border: 1px solid #343a42;
  color: #e9edf2;
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.4;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.page-id-2261 .contact-card textarea {
  min-height: 140px;
  resize: vertical;
}

/* Fokus – gleiche Akzentfarbe wie Shop-Buttons */
body.page-id-2261 .contact-card input:focus,
body.page-id-2261 .contact-card textarea:focus,
body.page-id-2261 .contact-card select:focus {
  outline: none;
  border-color: #f2b632;        /* dein Gelb */
  box-shadow: 0 0 0 3px rgba(242,182,50,.25);
  background: #11161d;
}

/* Placeholder dezenter */
body.page-id-2261 .contact-card ::placeholder { color: #98a2ad; }

/* Checkbox (modern) */
body.page-id-2261 .contact-card input[type="checkbox"] { accent-color: #f2b632; }
/* Fallback für sehr alte Browser – optional:
   body.page-id-2261 .contact-card input[type="checkbox"] { outline: 2px solid #f2b632; } */

/* Senden-Button im Shop-Stil */
body.page-id-2261 .contact-card button,
body.page-id-2261 .contact-card input[type="submit"] {
  display: inline-block;
  background: #f2b632;
  color: #111;
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 14px rgba(242,182,50,.25);
}

body.page-id-2261 .contact-card button:hover,
body.page-id-2261 .contact-card input[type="submit"]:hover {
  filter: brightness(1.06);
}

body.page-id-2261 .contact-card button:active,
body.page-id-2261 .contact-card input[type="submit"]:active {
  transform: translateY(1px);
}

/* Spaltenabstände zwischen linkem Info-Block & Formular */
@media (min-width: 768px) {
  body.page-id-2261 .contact-card { margin-top: 6px; }
}
/*
/* Ende Wrapper Klasse contact-card*/

/* Über mich Seite*/
/* Plakatives Zitat – About */
.ms-quote{
  position: relative;
  display: block;
  margin: 10px 0 28px;
  padding: 26px 28px 26px 82px;
  border-radius: 14px;
  border: 1px solid #2c333b;                  /* gleiche Rahmenfarbe wie Karten */
  background: #1e2329;                         /* dunkle Card-Fläche */
  color: #f0f4fa;                              /* helle Schrift */
  font-weight: 700;
  line-height: 1.25;
  font-size: clamp(22px, 3.1vw, 40px);         /* responsiv groß */
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.03);       /* dezenter Card-Glanz */
}

/* goldene Schmucklinie links */
.ms-quote::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg,#ffbf3b 0%, #e0a400 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
}

/* große Anführungsmarke */
.ms-quote::before{
  content: "“";
  position: absolute;
  left: 22px;
  top: -12px;
  font-size: clamp(60px, 8vw, 110px);
  line-height: .8;
  color: #ffbf3b;                              /* Marken-Gold */
  opacity: .9;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

/* optionaler Autor */
.ms-quote cite{
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #9fb2c8;
  opacity: .9;
}

/* Feintuning auf schmalen Screens */
@media (max-width: 640px){
  .ms-quote{
    padding: 22px 18px 22px 64px;
    border-radius: 12px;
  }
  .ms-quote::after{ width: 5px; border-radius: 12px 0 0 12px; }
  .ms-quote::before{ left: 16px; top: -10px; }
}

/* Zitat: Typo & Rhythmus */
.ms-quote{
  line-height: 1.15;                     /* dichter für plakatives Zitat */
  letter-spacing: .2px;
}

/* Autorzeile dezenter & mit feinem Trenner */
.ms-quote cite{
  margin-top: 12px;
  font-size: 13px;
  color: #a9b8c9;
  position: relative;
  padding-left: 16px;
}
.ms-quote cite::before{
  content: "—";
  position: absolute; left: 0; top: 0;
  color: #ffbf3b;
}

/* noch etwas kompakter auf schmalen Screens */
@media (max-width: 480px){
  .ms-quote{ font-size: clamp(20px, 7vw, 28px); padding-left: 58px; }
  .ms-quote::before{ left: 12px; font-size: clamp(54px, 16vw, 80px); }
}

.ms-quote{
  box-shadow:
    0 12px 28px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.02);
  border-color: #2a3037; /* minimal heller */
}

/* Zitat darf nichts überdecken und bekommt mehr Luft nach unten */
.ms-quote{
  position: relative;     /* eigener Stacking-Context */
  z-index: 1;             /* unter folgendem Inhalt */
  margin-bottom: 42px;    /* mehr Abstand nach unten */
}

.ms-quote{ padding-bottom: 6px; }


/* rein dekorativ */
.ms-quote::before{ pointer-events: none; }

/* Sicherheitsnetz: Der nächste allgemeine Row soll nicht hochrutschen */
.wpb_row{ margin-top: 0; }                  /* nimmt evtl. Theme-Offsets raus */
.wpb_row + .wpb_row{ margin-top: 12px; }    /* etwas Standard-Abstand zwischen Rows */

/* Bessere Lesbarkeit: Schrift, Zeilenhöhe, Breite, Trennungen */
.ms-readable {
  font-size: 17px;                 /* minimal größer */
  line-height: 1.75;               /* luftigere Zeilen */
  letter-spacing: .005em;
  color: #e6e9ee;                  /* etwas heller auf dem Dark-Theme */
  max-width: 65ch;                 /* angenehme Zeilenlänge */
  hyphens: auto;                   /* Silbentrennung */
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;         /* bricht lange Wörter notfalls */
  text-wrap: pretty;               /* hübschere Umbrüche (unterstützte Browser) */
}

/* Abstand zwischen Absätzen */
.ms-readable p + p {
  margin-top: 0.9rem;
}

/* Optional: dezente Abschnittsüberschriften im Text */
.ms-readable h3 {
  margin: 1.4rem 0 .6rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #f5b33d;                  /* Dein Akzentgelb */
  letter-spacing: .02em;
}

/* Links im Text */
.ms-readable a {
  color: #f5b33d;
  text-decoration-color: rgba(245,179,61,.45);
}
.ms-readable a:hover {
  text-decoration-color: rgba(245,179,61,.9);
}

/* Optional: Dropcap im ersten Absatz (kannst du weglassen) */
.ms-readable p:first-of-type::first-letter {
  float: left;
  font-size: 3.1rem;
  line-height: .9;
  padding-right: .22rem;
  color: #f5b33d;
  font-weight: 700;
}

/* Optionale „Card“-Optik passend zum Zitat-Block */
.ms-textcard {
  background: #1e2327;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  padding: 24px 28px;
}
@media (min-width: 1024px) {
  .ms-textcard { padding: 28px 32px; }
}

/* Container fürs Portrait */
.about-photo {
  position: relative;
  max-width: 520px;           /* nach Bedarf */
  margin: 0 3vw 0 1vw;        /* Abstand zur rechten Textspalte */
  z-index: 0;
}

/* Bild sanft nach unten ausblenden + leichter Drop-Shadow */
.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.35));
  /* sanftes Ausblenden zum Seitenhintergrund hin */
  -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent);
          mask-image: linear-gradient(to bottom, #000 92%, transparent);
}

/* „Boden“-Schatten unter dem Bild, damit es verankert wirkt */
.about-photo::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -8px;
  height: 22px;
  background: radial-gradient(ellipse at center,
              rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
  opacity: .55;
}

/* Mobile Feinschliff */
@media (max-width: 768px) {
  .about-photo {
    margin: 0 auto 12px auto;   /* zentrieren + Abstand */
    max-width: 340px;           /* etwas kleiner auf Handy */
  }
  .about-photo img{
    -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent);
            mask-image: linear-gradient(to bottom, #000 85%, transparent);
  }
}
/* Ende Über mich Seite */

/* Start Mobile Menü*/
/* ===== Farben (bei Bedarf anpassen) ===== */
/* =========================
   Mobile Off-Canvas Menü (Kalium)
   ========================= */

/* Farben zentral */
:root{
  --ms-bg: #2b2d31;         /* Panel-Hintergrund */
  --ms-text: #e7e9ee;       /* Textfarbe */
  --ms-muted: #a9b0bb;      /* Placeholder / Neben-Text */
  --ms-line: rgba(255,255,255,.08);
  --ms-accent: #f6b13c;     /* Gold */
  --ms-bg: #2b2d31;            /* bleibt als Fallback */
  --ms-bg-rgb: 43,45,49;       /* gleiche Farbe als RGB */
  --ms-bg-alpha: .88;          /* Transparenz: 0–1 -> hier 88% Deckkraft */
}

/* Panel selbst – höhere Spezifität + !important gegen Theme-Regel */
div.mobile-menu-wrapper.mobile-menu-slide .mobile-menu-container{
  background: var(--ms-bg) !important;
  color: var(--ms-text) !important;

  /* Breite/Look */
  width: min(220px, 84vw) !important;
  max-width: none !important;
  min-width: 0 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border-right: 1px solid var(--ms-line);
}

/* Overlay abdunkeln (falls vorhanden) */
.mobile-menu-overlay, .site-overlay{
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(2px);
}

/* Body nicht scrollen, wenn Menü offen */
body.mobile-menu-open{ overflow: hidden; }

/* Liste/Links */
div.mobile-menu-wrapper.mobile-menu-slide .mobile-menu-container ul#menu-main-menu.menu{
  padding-top: 6px;
  padding-bottom: 8px;
}

div.mobile-menu-wrapper.mobile-menu-slide .mobile-menu-container ul#menu-main-menu.menu > li > a{
  display: block;
  padding: 14px 22px;
  min-height: 44px;
  color: var(--ms-text) !important;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .2px;
  border-bottom: 1px solid var(--ms-line);
}

div.mobile-menu-wrapper.mobile-menu-slide .mobile-menu-container ul#menu-main-menu.menu > li > a:hover,
div.mobile-menu-wrapper.mobile-menu-slide .mobile-menu-container ul#menu-main-menu.menu > li > a:focus{
  color: var(--ms-accent) !important;
  background: linear-gradient(90deg, rgba(246,177,60,.10), transparent);
}

div.mobile-menu-wrapper.mobile-menu-slide .mobile-menu-container ul#menu-main-menu.menu > li.current-menu-item > a{
  color: var(--ms-accent) !important;
  border-left: 3px solid var(--ms-accent);
  background: linear-gradient(90deg, rgba(246,177,60,.12), transparent);
}

/* Submenüs (falls vorhanden) */
div.mobile-menu-wrapper.mobile-menu-slide .mobile-menu-container ul#menu-main-menu.menu .sub-menu a{
  padding-left: 34px;
  font-weight: 500;
  opacity: .95;
}

/* Suche im Panel */
div.mobile-menu-wrapper.mobile-menu-slide .mobile-menu-container form.search-form input[type="search"]{
  width: calc(100% - 24px);
  margin: 14px 12px 18px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--ms-line);
  background: #1f2125;
  color: var(--ms-text);
}
div.mobile-menu-wrapper.mobile-menu-slide .mobile-menu-container form.search-form input::placeholder{
  color: var(--ms-muted);
}
.mobile-menu-overlay, .site-overlay{
  background: rgba(0,0,0,.40) !important; /* vorher .55 */
  backdrop-filter: blur(2px);
}

/* --- Mobile-Menü: Zeilen transparent & sauber getrennt --- */
.mobile-menu-wrapper .mobile-menu-container ul.menu,
.mobile-menu-wrapper .mobile-menu-container ul#menu-main-menu {
  background: transparent !important;
}

/* einzelne Menüzeilen */
.mobile-menu-wrapper .mobile-menu-container ul.menu > li > a {
  display: block;
  padding: 16px 22px !important;
  background: transparent !important;             /* <-- keine blaue Fläche mehr */
  color: var(--ms-text, #e6e6e6) !important;
  border-bottom: 1px solid rgba(255,255,255,.08); /* feine Divider-Linie */
}

/* Hover-Effekt (dezent) */
.mobile-menu-wrapper .mobile-menu-container ul.menu > li > a:hover {
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
}

/* Aktiver Eintrag: linke Akzentlinie + Farbe */
.mobile-menu-wrapper .mobile-menu-container ul.menu > li.current-menu-item > a,
.mobile-menu-wrapper .mobile-menu-container ul.menu > li.current_page_item > a {
  background: transparent !important;
  color: var(--ms-accent, #f0b12a) !important;
  border-left: 3px solid var(--ms-accent, #f0b12a);
  padding-left: 19px !important; /* Platz für die linke Linie */
}

/* --- Suchfeld im Off-Canvas-Menü entfernen --- */
.mobile-menu-wrapper .mobile-menu-container .search-form,
.mobile-menu-wrapper .mobile-menu-container form[role="search"] {
  display: none !important;
}

/* ggf. kleine Abstände anpassen, wenn Suche weg ist */
.mobile-menu-wrapper .mobile-menu-container {
  padding-bottom: 12px; /* nach Bedarf trimmen */
}

/* Panel-Hintergrund (das "Slide") transparenter machen */
.mobile-menu-wrapper.mobile-menu-slide .mobile-menu-container {
  background-color: rgba(43, 45, 49, 0.78) !important; /* 0.78 = 78% Deckung, nach Geschmack anpassen */
  box-shadow: none !important;                           /* dunkler Rand/Schatten weg */
  border-right: 1px solid rgba(255,255,255,0.06);        /* dezente Trennlinie (optional) */
}

/* Falls Theme zusätzliche Überlagerungen am Panel setzt, deaktivieren */
.mobile-menu-wrapper.mobile-menu-slide .mobile-menu-container::after,
.mobile-menu-wrapper.mobile-menu-slide::after {
  display: none !important;
}
/* Nur das Mobile-Panel: leicht transparent */
.mobile-menu-wrapper.mobile-menu-slide .mobile-menu-container{
  --ms-bg: rgba(43, 45, 49, .62);   /* <— hier Transparenz anpassen */
  --ms-line: rgba(255,255,255,.08); /* (optional) sehr dezente Trennlinie */
  box-shadow: none !important;      /* (optional) Schatten aus */
}
/* Ende Mobile Menü*/

/* Start FooGallery Album*/
/* ==============================
   FooGallery – ALBUM: Dark Cards
   ============================== */

/* Grid-Spacer */
[id^="foogallery-album-"] .foogallery-album-gallery-list { --ms-gap: 28px; }
[id^="foogallery-album-"] .foogallery-album-gallery-list li { margin: calc(var(--ms-gap)/2); }

/* Karte (Wrapper) */
[id^="foogallery-album-"] .foogallery-pile-inner {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #12161a;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* gelber Akzent links */
[id^="foogallery-album-"] .foogallery-pile-inner::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg,#ffc531,#ff9a00);
  opacity: .85;
}

/* Thumbnails vereinheitlichen + leichter Zoom */
[id^="foogallery-album-"] .foogallery-album-gallery-list img {
  display: block;
  width: 100%;
  height: 260px;               /* -> bei Bedarf anpassen */
  object-fit: cover !important;
  transform: scale(1);
  transition: transform .45s ease;
}
[id^="foogallery-album-"] .foogallery-pile-inner:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  border-color: rgba(255,197,49,.55);
}
[id^="foogallery-album-"] .foogallery-pile-inner:hover img { transform: scale(1.04); }

/* Verlauf-Overlay für gute Lesbarkeit */
[id^="foogallery-album-"] .foogallery-pile-inner::after {
  content: "";
  position: absolute; left:0; right:0; bottom:0; height: 42%;
  background: linear-gradient(180deg,
              rgba(0,0,0,0) 0%,
              rgba(0,0,0,.45) 55%,
              rgba(0,0,0,.72) 100%);
  pointer-events: none;
}

/* Titel/Caption positionieren – FooGallery nutzt je nach Album Skin leicht andere Knoten.
   Wir fangen die gängigen ab und setzen sie unten in die Card. */
[id^="foogallery-album-"] .foogallery-caption,
[id^="foogallery-album-"] .foogallery-album-caption,
[id^="foogallery-album-"] .fg-album-caption {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  margin: 0; padding: 0; z-index: 2;
  color: #e9eef4;
}

/* Albentitel */
[id^="foogallery-album-"] .foogallery-album-title,
[id^="foogallery-album-"] .foogallery-caption .title,
[id^="foogallery-album-"] .fg-album-caption .title {
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .2px;
  margin: 0 0 6px 0;
}

/* Bildanzahl als Badge */
[id^="foogallery-album-"] .foogallery-album-count,
[id^="foogallery-album-"] .foogallery-caption .count,
[id^="foogallery-album-"] .fg-album-caption .count {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: #ffc531;
  color: #1a1f24;
}

/* evtl. vorhandene Balken/Bar-Hintergründe der Caption neutralisieren */
[id^="foogallery-album-"] .foogallery-caption-bg,
[id^="foogallery-album-"] .foogallery-album-meta,
[id^="foogallery-album-"] .fg-caption-bar {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Responsive Feinschliff */
@media (max-width: 1024px) {
  [id^="foogallery-album-"] .foogallery-album-gallery-list img { height: 220px; }
}
@media (max-width: 640px) {
  [id^="foogallery-album-"] .foogallery-album-gallery-list img { height: 190px; }
  [id^="foogallery-album-"] .foogallery-album-title { font-size: 17px; }
}

/* Textcard nur auf der Album-Übersichtsseite anzeigen */
body.single-foogallery .ms-textcard,
body.single-foogallery-album .ms-textcard,
body.post-type-archive-foogallery .ms-textcard,
body.post-type-archive-foogallery-album .ms-textcard { 
  display: none !important;
}


/* Ende FooGallery Album*/

/* FooGallery – Einzel-Galerien hübsch machen, Caption/Overlay UNVERÄNDERT lassen */
:root{
  --ms-card: #1f232a;
  --ms-border: rgba(255,255,255,.08);
  --ms-border-hover: rgba(255,255,255,.16);
  --ms-shadow: 0 10px 28px rgba(0,0,0,.35);
  --ms-shadow-hover: 0 16px 40px rgba(0,0,0,.45);
}

/* Kachel-Container (ohne Einfluss auf Caption/Overlay) */
.foogallery:not(.foogallery-album-gallery-list) .fg-item > .fg-item-inner{
  position: relative;
  background: var(--ms-card);
  border: 1px solid var(--ms-border);
  border-radius: 16px;
  overflow: hidden;                 /* Overlay sauber clippen */
  box-shadow: var(--ms-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.foogallery:not(.foogallery-album-gallery-list) .fg-item > .fg-item-inner:hover{
  transform: translateY(-4px);
  box-shadow: var(--ms-shadow-hover);
  border-color: var(--ms-border-hover);
}

/* Bild sauber einpassen – hat keinen Einfluss auf Overlay/Caption */
.foogallery:not(.foogallery-album-gallery-list) .fg-item img{
  display:block;
  width:100%;
  height:auto;
}

/* Gutter etwas luftiger (falls von FooGallery unterstützt) */
.foogallery .fg-item{ padding: 10px; }

/* Ende FooGallery*/

/* =========================================================
   Attachment Page (Einzelbild)
   ========================================================= */
/* === Attachment: Bild korrekt füllen/croppen & Bewertung stabil === */

/* Bild-Kachel: feste, sinnvolle Höhe – der Inhalt bestimmt NICHT mehr die Höhe */
/* Bild-Kachel: füllt die gleiche Zeilenhöhe wie die Infobox */
.single-attachment .art-grid{
  display:grid;
  grid-template-columns:minmax(520px,1fr) 520px; /* Bild | Infobox */
  gap:28px;
  align-items:stretch; /* beide gleich hoch */
}

/* Figure als „Rahmen“ für das Bild */
.single-attachment figure.art-image{
  position:relative;
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background:#0f1317;          /* Fallback, bis das Bild geladen ist */
  min-height:420px;             /* nicht kleiner werden */
}

/* Der Link (Lightbox) füllt die Kachel komplett */
.single-attachment figure.art-image > a{
  position:absolute;
  inset:0;                      /* top/right/bottom/left: 0 */
  display:block;
  background:transparent !important;
}

/* Das eigentliche Bild: immer die Kachel ausfüllen (croppen/zentrieren) */
.single-attachment figure.art-image img{
  display:block !important;
  width:100%;
  height:100% !important;
  object-fit:cover;             /* flächig, ggf. Zuschnitt */
  object-position:center;       /* zentriert */
  opacity:1 !important;
  visibility:visible !important;
}

/* mögliche Theme-/Lightbox-Overlays vollständig abschalten */
.single-attachment figure.art-image::before,
.single-attachment figure.art-image::after,
.single-attachment figure.art-image > a::before,
.single-attachment figure.art-image > a::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
  opacity:0 !important;
}

/* etwas kompakter auf schmalen Screens */
@media (max-width: 900px){
  .single-attachment .art-grid{ grid-template-columns:1fr; }
  .single-attachment figure.art-image{ min-height:320px; }
}


/* Bewertung (Stars + Text) sauber in einer Zeile ausrichten */
.single-attachment .art-rating{
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}
.single-attachment .art-rating > *{
  margin: 0 !important;
  line-height: 1;
}
/* =========================================================
   /Attachment Page
   ========================================================= */


/* =========================================================
   BLOG – Übersicht (Liste): Kartenlayout + Masonry aus
   ========================================================= */

/* Farbtokens */
:root{
  --ms-card:   #1f262d;
  --ms-accent: #f0aa2b;
  --ms-text:   #e6e6e6;
}

/* Masonry/Isotope auf Desktop neutralisieren */
/*@media (min-width: 980px){
/*  #blog-posts-main{                       /* UL */
/*    height: auto !important;
/*  }
/*  #blog-posts-main > li{                  /* LI = Kachel */
/*    position: static !important;
/*    left: auto !important;
/*    top:  auto !important;
/*    transform: none !important;           /* Isotope-translate killen */
/*    width: 100% !important;
/*    margin: 0 0 28px !important;
/*    display: block !important;
/*  }
/*}

/* Die eigentliche Karte */
#blog-posts-main > li > .post-item{
  background: var(--ms-card);
  color: var(--ms-text);
  border-left: 4px solid var(--ms-accent);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  padding: 18px 20px;

  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr; /* Bild | Text */
  gap: 22px;
  align-items: start;
}

/* Thumbnail links – sauber croppen */
#blog-posts-main > li > .post-item .post-thumbnail{
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
}
#blog-posts-main > li > .post-item .post-thumbnail img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Textspalte wirklich frei machen (Theme setzt gern feste Breiten/Floats) */
#blog-posts-main > li > .post-item .post-details,
#blog-posts-main > li > .post-item .entry-header,
#blog-posts-main > li > .post-item .post-excerpt,
#blog-posts-main > li > .post-item .entry-summary{
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

/* Typografie / Meta */
#blog-posts-main > li > .post-item .entry-header h3.post-title.entry-title a{
  color:#fff; text-decoration:none;
}
#blog-posts-main > li > .post-item .post-meta{ opacity:.85; }

/* Runde Format-Icons aus */
#blog-posts-main > li > .post-item .post-format-icon,
#blog-posts-main > li > .post-item .post-format{ display:none !important; }

/* Mobile: untereinander stapeln */
@media (max-width: 900px){
  #blog-posts-main > li > .post-item{
    grid-template-columns: 1fr;
  }
  #blog-posts-main > li > .post-item .post-thumbnail{
    height: clamp(180px, 42vh, 300px);
  }
}

/* BLOG – Übersicht: Thumbnail-Spalte erzwingen / Theme-Styles neutralisieren */
#blog-posts-main > li > .post-item {
  grid-template-columns: 280px 1fr;      /* feste, ausreichend breite Thumb-Spalte */
}

#blog-posts-main > li > .post-item .post-thumbnail{
  width: 100% !important;                /* füllt die Grid-Spalte */
  max-width: none !important;            /* überschreibt max-width:33% vom Theme */
  float: none !important;                /* falls das Theme floatet */
}

#blog-posts-main > li > .post-item .post-details,
#blog-posts-main > li > .post-item .entry-header,
#blog-posts-main > li > .post-item .post-excerpt,
#blog-posts-main > li > .post-item .entry-summary{
  width: auto !important; max-width: none !important; float: none !important;
  min-width: 0;                          /* verhindert Text-Überbreite im Grid */
}

/* Blog-Übersicht: Hover-Overlay deutlich abdunkeln */
#blog-posts-main .post-item .post-thumbnail .post-hover,
.blog #blog-posts-main .post-item .post-hover,
.archive #blog-posts-main .post-item .post-hover{
  background: rgba(0,0,0,.22) !important;   /* sanftes Abdunkeln statt Gelb */
}

/* (optional) ganz leichtes Zoom auf dem Bild beim Hover */
#blog-posts-main .post-item:hover .post-thumbnail img{
  transform: scale(1.01);
  transition: transform .25s ease;
}
/* =========================================================
   SINGLE POST – kompaktes Hero + einheitliche Karten + Kommentare
   ========================================================= */

/* zentrale Breite + Farben */
:root{
  --post-max: 1100px;
  --card:    #1f262d;
  --text:    #e6e6e6;
  --accent:  #f0aa2b;
}

/* ---------- Spaltenbreite unter dem Header ---------- */
.single-post .container,
.single-post .wrapper .container,
.single-post .container > .row,
.single-post .post-navigation{
  max-width: var(--post-max);
  margin-inline: auto;
  padding-inline: 12px;
}

/* =========================
   HERO / FEATURED IMAGE
   ========================= */

/* Wrapper neutralisieren (sonst Doppelrahmen) */
.single-post .post-image{
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Optik NUR auf dem inneren Link/Thumb */
.single-post .post-image a.featured-image,
.single-post .entry-thumbnail a{
  display: block;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  background: transparent !important;
}

/* Placeholder vom Theme neutralisieren */
.single-post .post-image .image-placeholder{
  padding: 0 !important;              /* Ratio-Hack aus */
  height: auto !important;
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* eventuelle Overlays/Pseudoelemente abschalten */
.single-post .post-image::before,
.single-post .post-image a.featured-image::before{
  content: none !important;
}

/* Bild selbst – bestimmt die Höhe */
.single-post .post-image .image-placeholder img,
.single-post .post-image img,
.single-post .entry-thumbnail img{
  position: static !important;
  display: block;
  width: 100%;
  height: clamp(220px, 45vh, 520px);  /* moderat groß */
  object-fit: cover;                  /* füllt die Breite (mit Cropping) */
  object-position: center;
  background: transparent;
}

/* etwas kompakter auf großen Screens */
@media (min-width: 1024px){
  .single-post .post-image .image-placeholder img,
  .single-post .post-image img,
  .single-post .entry-thumbnail img{
    height: clamp(220px, 36vh, 460px);
  }
}

/* noch kompakter auf sehr kleinen Geräten */
@media (max-width: 600px){
  .single-post .post-image .image-placeholder img,
  .single-post .post-image img,
  .single-post .entry-thumbnail img{
    height: clamp(200px, 42vh, 420px);
  }
}

/* kleiner Abstand, damit Schatten nicht kollidieren */
.single-post .entry-content,
.single-post .post-content{ margin-top: 14px; }

/* =========================
   CONTENT-KARTE
   ========================= */
.single-post article.type-post .post-content,
.single-post article.type-post .entry-content,
.single-post .post-content.post-body{
  background: var(--card);
  color: var(--text);
  border-left: 4px solid var(--accent);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  margin-bottom: 18px;
}

/* =========================================================
   KOMMENTAR-BEREICH – gleiche Breite wie Content
   ========================================================= */

/* Äußere Hülle: als „Container“ behandeln */
.single-post #comments.comments-wrap{
  max-width: var(--post-max);
  width: 100%;
  margin: 22px auto 0;
  padding-inline: 12px;               /* entspricht Container-Gutter */
  box-sizing: border-box;
  position: relative;
  clear: both;
  background: transparent;            /* keine Doppelkarte hier */
  border: 0;
  box-shadow: none;
}

/* eigentliche Karte */
.single-post #comments .comment-respond{
  background: var(--card);
  color: var(--text);
  border-left: 4px solid var(--accent);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  max-width: 100%;
}

/* doppelte Innenboxen/Ränder verhindern */
.single-post #comments .comment-form,
.single-post #respond{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Formular-Layout: mobil 1 Spalte, ab 900px zwei Felder nebeneinander */
.single-post #comments .comment-form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 18px;
}
@media (min-width: 900px){
  .single-post #comments .comment-form{ grid-template-columns: 1fr 1fr; }
  .single-post #comments .comment-form .comment-form-comment,
  .single-post #comments .comment-form .form-submit{ grid-column: 1 / -1; }
}

/* Floats/Legacy-Breiten des Themes neutralisieren */
.single-post #comments .comment-form .comment-form-author,
.single-post #comments .comment-form .comment-form-email,
.single-post #comments .comment-form .comment-form-url{
  float: none !important;
  width: auto !important;
}

/* Felder wirklich auf volle Kartenbreite */
.single-post #comments .comment-form input[type="text"],
.single-post #comments .comment-form input[type="email"],
.single-post #comments .comment-form input[type="url"],
.single-post #comments .comment-form textarea{
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Button rechts unten in der Karte */
.single-post #comments .comment-form .form-submit{
  justify-self: end;
  margin-top: 4px;
}

/* kleine optische Luft über den Kommentaren */
.single-post #comments::before{
  content: "";
  display: block;
  height: 6px;
}

/* ===== SINGLE POST – Kommentarbereich (Card + sauberes Formular) ===== */

/* an Contentbreite koppeln */
.single-post #comments {
  max-width: var(--post-max);
  width: min(100%, var(--post-max));
  margin: 24px auto 0;
  padding: 0 12px;                 /* etwas Rand zur Seitenkante */
  box-sizing: border-box;
}

/* eigentliche Card */
.single-post #comments .comment-respond {
  background: #1f262d;
  color: #e6e6e6;
  border-left: 4px solid #f0aa2b;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

/* Theme-Rahmen/-Shadows sicher neutralisieren */
.single-post #comments,
.single-post #comments .comment-respond,
.single-post #comments .comment-form {
  border: 0 !important;
  background: transparent;
  box-shadow: none;
}

/* ===== Formular-Layout (Grid statt Floats) ===== */
.single-post #comments .comment-form {
  display: grid;
  grid-template-columns: 1fr;        /* mobil: 1 Spalte */
  gap: 14px 18px;
}

/* Floats/Hard-Widths des Themes killen */
.single-post #comments .comment-form .comment-form-author,
.single-post #comments .comment-form .comment-form-email,
.single-post #comments .comment-form .comment-form-url {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Labels & Grundabstände */
.single-post #comments .comment-form > p { margin: 0; }
.single-post #comments .comment-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #f1f1f1;
}

/* Felder auf volle Breite der Grid-Zelle */
.single-post #comments .comment-form input[type="text"],
.single-post #comments .comment-form input[type="email"],
.single-post #comments .comment-form input[type="url"],
.single-post #comments .comment-form textarea {
  width: 100% !important;
  max-width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: #12181e;
  color: #e6e6e6;
  box-shadow: none;
  outline: 0;
}

/* Fokus-Feedback */
.single-post #comments .comment-form input:focus,
.single-post #comments .comment-form textarea:focus {
  border-color: rgba(240,170,43,.75); /* Akzent */
}

/* Textarea angenehm groß + frei skalierbar */
.single-post #comments .comment-form textarea {
  min-height: 180px;
  resize: vertical;
}

/* Submit rechts unten in der Card */
.single-post #comments .comment-form .form-submit {
  justify-self: end;
  margin-top: 6px;
}

/* ab Tablet/Desk: Name & E-Mail nebeneinander,
   Kommentar-Textarea + Button über volle Breite */
@media (min-width: 900px) {
  .single-post #comments .comment-form {
    grid-template-columns: 1fr 1fr;
  }
  .single-post #comments .comment-form .comment-form-comment,
  .single-post #comments .comment-form .form-submit {
    grid-column: 1 / -1;
  }
}

/* ===== SINGLE POST – Felder + Button in einer Reihe (Desktop) ===== */

/* Basis (mobil/hochkant): alles untereinander – das hast du schon */
.single-post #comments .comment-form {
  display: grid;
  grid-template-columns: 1fr;        /* 1 Spalte mobil */
  gap: 14px 18px;
}

/* Grid-Positionen benennen (wir nutzen sie unten am Desktop) */
.single-post #comments .comment-form .comment-form-comment { grid-area: comment; }
.single-post #comments .comment-form .comment-form-author  { grid-area: author; }
.single-post #comments .comment-form .comment-form-email   { grid-area: email;  }
/* falls vorhanden: DSGVO/Cookies-Einverständnis über ganze Breite */
.single-post #comments .comment-form .comment-form-cookies-consent { grid-column: 1 / -1; }

/* Desktop: eine Reihe für Name | E-Mail | Button */
@media (min-width: 1024px){
  .single-post #comments .comment-form{
    grid-template-columns: 1fr 1fr auto;               /* Felder dehnen, Button so breit wie nötig */
    grid-template-areas:
      "comment comment comment"                         /* Textarea über volle Breite */
      "author  email    submit";                        /* zweite Reihe: drei Spalten */
    align-items: end;
  }

  /* Kommentar-Textarea weiterhin über volle Breite */
  .single-post #comments .comment-form .comment-form-comment{ grid-column: 1 / -1; }

  /* Name/E-Mail jeweils eine Spalte; Button rechts */
  .single-post #comments .comment-form .comment-form-author { grid-area: author; }
  .single-post #comments .comment-form .comment-form-email  { grid-area: email;  }
  .single-post #comments .comment-form .form-submit{
    grid-area: submit;
    justify-self: end;                                  /* Button an rechten Rand */
    margin: 0 0 2px 18px;                               /* etwas Abstand links zum E-Mail-Feld */
  }

  /* Sicherheit: alles bleibt innerhalb der Card-Breite */
  .single-post #comments .comment-form input[type="text"],
  .single-post #comments .comment-form input[type="email"],
  .single-post #comments .comment-form input[type="url"],
  .single-post #comments .comment-form textarea{
    width: 100% !important;
    max-width: 100%;
  }

  .single-post #comments .comment-form input[type="submit"]{
    white-space: nowrap;                                /* Button nicht umbrechen */
    max-width: 100%;
  }
}

/* =========================================================
   /Blog Page
   ========================================================= */