/* ==============================================================
   HEPPERLE & OSINSKI – HOMEPAGE / DESIGNVARIANTE 9 + SHOPFARBEN
   Ergänzende Design-Datei; die ursprüngliche CSS bleibt erhalten.
   Die Firmenmotive stammen unverändert aus den Originaldateien.
   ============================================================== */

/* 01. FARBEN UND GRUNDEINSTELLUNGEN */
:root{--color-bg:#f5f5f3;--color-bg-alt:#fff;--color-accent:#d4af37;--color-accent-soft:#e2c76b;--color-text:#242220;--color-text-muted:#5c5852;--max-width:1180px;--shadow-soft:0 10px 28px #00000016}
html{scroll-behavior:smooth;scroll-padding-top:82px}
body{background:#f5f5f3;color:#242220;font-family:Arial,Helvetica,sans-serif}

/* 02. HEADER UND FIXIERTE NAVIGATION */
body>header{position:sticky;top:0;z-index:1000;background:#181818;border-bottom:2px solid #d4af37;backdrop-filter:none}
.nav-inner{max-width:1320px;min-height:88px;padding:10px 26px;gap:24px}
body>header nav ul{gap:clamp(10px,1.4vw,24px)}
body>header nav a{color:#f4f1ec;font-size:.88rem}
body>header nav a:hover{color:#d4af37}

/* 03. KRONE UND SCHRIFTZUG – ORIGINALDATEIEN */
.brand-original{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;flex-shrink:0;min-width:0}
.brand-original .crown-original{width:115px;height:auto;max-width:18vw;object-fit:contain;flex-shrink:0}
.brand-original .wordmark-original{width:285px;height:auto;max-width:31vw;object-fit:contain;flex-shrink:1}

/* 04. STARTBEREICH / GOLDMOTIV AUS DEM SHOP */
main{background:#f5f5f3}
main section{scroll-margin-top:94px}
#start{background:linear-gradient(90deg,rgba(15,15,15,.96) 0%,rgba(15,15,15,.87) 39%,rgba(15,15,15,.15) 78%),url('../images/shop-hero-edelmetalle.jpg') center/cover no-repeat!important;color:#fff;padding:65px max(22px,calc((100vw - 1180px)/2))!important}
#start .hero{display:block;max-width:1180px;margin:0 auto;min-height:330px}
#start .hero>div:first-child{max-width:630px}
#start .hero-card{display:none}
#start .hero-badge{color:#e2bc5b;background:transparent;border:0}
#start .hero-title{font-family:Georgia,serif;color:#fff;font-size:clamp(2rem,3.5vw,3.3rem);line-height:1.13}
#start .hero-title span{color:#e4bb55}
#start .hero-text,#start .hero-meta{color:#f1eee8}

/* 05. BUTTONS UND INTERAKTIONEN */
.btn-primary{background:#cda044!important;border-color:#cda044!important;color:#fff!important;border-radius:100px!important}
.btn-outline{background:transparent!important;border:1px solid #d4af37!important;color:#d4af37!important;border-radius:100px!important}
#start .btn-outline{color:#fff!important}
.btn:hover{filter:brightness(1.08)}

/* 06. ABSCHNITTE, ÜBERSCHRIFTEN UND FLÄCHEN */
main>section:not(#start){padding-top:58px;padding-bottom:58px;background:#f5f5f3;color:#242220}
main>section:nth-of-type(2n+1):not(#start){background:#fff}
.section-heading{color:#262321;font-family:Georgia,serif;font-weight:400}
.section-subtitle,main p,main li{color:#5a5650}
main h3{color:#2b2824}

/* 07. LEISTUNGEN, SHOP-KARTEN UND GALERIE */
.service-card,.product-card,.gallery-item,.blog-card{background:#fff!important;color:#2b2824!important;border:1px solid #e7e0d4!important;box-shadow:0 6px 20px #0000000a!important;border-radius:2px!important}
.service-tagline,.product-price{color:#a57929!important}
.gallery-item img{object-fit:cover}
#services{border-top:1px solid #e9e2d5}

/* 08. FORMULARE */
input,textarea,select{background:#fff!important;color:#2b2824!important;border:1px solid #d5cabb!important}

/* 09. FOOTER */
footer{background:#181818!important;border-top:2px solid #d4af37!important;color:#e8e0d0!important;margin-top:0!important}
footer .footer-inner,footer .footer-inner a{color:#e8e0d0}
footer .footer-inner a:hover{color:#d4af37}

/* 10. GOLDENER NACH-OBEN-BUTTON */
.nach-oben{position:fixed;bottom:24px;right:24px;z-index:1100;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border:0;border-radius:50%;background:#dfbd52;color:#fff;box-shadow:0 5px 16px #0004;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility .2s}
.nach-oben.sichtbar{opacity:1;visibility:visible;transform:translateY(0)}
.nach-oben:hover{background:#d4af37}

/* 11. SMARTPHONE UND TABLET */
@media(max-width:1050px){.nav-inner{gap:10px;padding:10px 15px}.brand-original .crown-original{width:90px}.brand-original .wordmark-original{width:220px}body>header nav a{font-size:.78rem}}
@media(max-width:750px){.nav-inner{min-height:70px;padding:8px 60px 8px 12px}.brand-original{gap:6px}.brand-original .crown-original{width:66px;max-width:19vw}.brand-original .wordmark-original{width:185px;max-width:48vw}.nav-toggle{right:15px;top:24px}#start{padding:44px 18px!important;background-position:65% center!important}#start .hero{min-height:0}#start .hero-title{font-size:clamp(1.75rem,7vw,2.5rem)}.nach-oben{right:18px;bottom:18px}}


/* ==============================================================
   SCHRITT 1 – HEADER UND NAVIGATION (freigegebene Designrichtung)
   Originaldateien werden nur skaliert, nicht nachgezeichnet.
   Diese Regeln überschreiben ältere Header-Regeln gezielt.
   ============================================================== */
body > header {
  position: sticky; top: 0; z-index: 2000;
  width: 100%; background: #191919;
  border-bottom: 2px solid #c6a04b;
  box-shadow: 0 3px 16px rgba(0,0,0,.18);
}
body > header .nav-inner {
  box-sizing: border-box; max-width: 1440px; margin: 0 auto;
  min-height: 112px; padding: 12px clamp(18px,3vw,48px);
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
body > header .brand-original {
  display: flex; align-items: center; gap: 12px;
  flex: 0 1 auto; min-width: 0; text-decoration: none;
}
body > header .brand-original img {display: block; object-fit: contain; height: auto; border: 0; box-shadow: none; background: transparent}
body > header .brand-original .crown-original {width: clamp(95px,9.3vw,142px); max-width: none; flex: 0 0 auto}
body > header .brand-original .wordmark-original {width: clamp(210px,22vw,340px); max-width: none; flex: 0 1 auto}
body > header nav {flex: 0 1 auto}
body > header nav ul {display:flex; align-items:center; flex-wrap:nowrap; gap:clamp(8px,1.15vw,20px); margin:0; padding:0; list-style:none}
body > header nav a {display:block; padding:10px 2px; color:#f4f0e8; font-size:clamp(11px,.83vw,13px); font-weight:500; letter-spacing:.065em; text-transform:uppercase; text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; background:transparent; border-radius:0}
body > header nav a:hover,body > header nav a:focus-visible {color:#d9b45f; border-bottom-color:#d9b45f}
body > header .nav-toggle {display:none; border:0; background:transparent; padding:12px; cursor:pointer}
body > header .nav-toggle span {width:25px; height:2px; background:#d9b45f}
@media(max-width:1120px){
 body > header .nav-inner {min-height:94px; gap:12px; padding:10px 20px}
 body > header .brand-original .crown-original {width:92px}
 body > header .brand-original .wordmark-original {width:220px}
 body > header nav ul {gap:9px}
 body > header nav a {font-size:10px;letter-spacing:.035em}
}
@media(max-width:900px){
 body > header .nav-inner {min-height:80px; padding:8px 15px; position:relative}
 body > header .brand-original .crown-original {width:clamp(65px,13vw,90px)}
 body > header .brand-original .wordmark-original {width:clamp(165px,36vw,230px)}
 body > header .nav-toggle {display:flex;flex-direction:column;gap:5px;flex-shrink:0}
 body > header nav ul {display:none;position:absolute;left:0;right:0;top:100%;background:#191919;flex-direction:column;align-items:stretch;padding:10px 18px 18px;border-bottom:2px solid #c6a04b;box-shadow:0 14px 22px #0005;gap:0}
 body > header nav ul.open {display:flex}
 body > header nav a {font-size:13px;padding:13px 8px;letter-spacing:.07em}
}
@media(max-width:430px){
 body > header .nav-inner {padding:8px 10px;gap:6px}
 body > header .brand-original {gap:4px}
 body > header .brand-original .crown-original {width:62px}
 body > header .brand-original .wordmark-original {width:min(53vw,195px)}
}


/* =============================================================
   SCHRITT 1B – ZWEIZEILIGER HEADER UND STICKY-NAVIGATION
   Nur .navigation-zeile ist sticky, nicht der Logobereich.
   Original-Logodateien bleiben unverändert eingebunden.
   ============================================================= */
body > header.firmenkopf {
  position: static; z-index: auto; background: #191919;
  border: 0; box-shadow: none; width: 100%;
}
body > header.firmenkopf .logo-zeile {
  display: flex; align-items: center; justify-content: center;
  padding: 16px 20px; min-height: 112px; box-sizing: border-box;
}
body > header.firmenkopf .brand-original {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; min-width: 0; text-decoration: none;
}
body > header.firmenkopf .brand-original img {
  display: block; height: auto; object-fit: contain;
  border: 0; box-shadow: none; background: transparent;
}
body > header.firmenkopf .crown-original {width: clamp(95px,9.3vw,142px); max-width: none; flex: 0 0 auto}
body > header.firmenkopf .wordmark-original {width: clamp(210px,22vw,340px); max-width: none; flex: 0 1 auto}
.navigation-zeile {
  position: sticky; top: 0; z-index: 2000; width: 100%;
  background: #191919; border-top: 1px solid #c6a04b;
  border-bottom: 1px solid #c6a04b;
  box-shadow: 0 3px 12px rgba(0,0,0,.16);
}
.navigation-inhalt {
  position: relative; max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; padding: 0 20px;
}
.navigation-zeile nav ul {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: clamp(16px,2.4vw,38px);
  margin: 0; padding: 0; list-style: none;
}
.navigation-zeile nav a {
  display: block; padding: 15px 2px; color: #f4f0e8;
  font-size: 13px; font-weight: 500; letter-spacing: .065em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid transparent; background: transparent;
  border-radius: 0; white-space: nowrap;
}
.navigation-zeile nav a:hover,
.navigation-zeile nav a:focus-visible {color: #d9b45f; border-bottom-color: #d9b45f}
.navigation-zeile .nav-toggle {display: none; border: 0; background: transparent; padding: 12px; cursor: pointer}
.navigation-zeile .nav-toggle span {display:block;width:25px;height:2px;background:#d9b45f}
@media (max-width: 900px) {
  body > header.firmenkopf .logo-zeile {min-height: 85px; padding: 12px}
  body > header.firmenkopf .crown-original {width: clamp(65px,13vw,90px)}
  body > header.firmenkopf .wordmark-original {width: clamp(165px,36vw,230px)}
  .navigation-inhalt {justify-content: flex-end; min-height: 52px; padding: 0 15px}
  .navigation-zeile .nav-toggle {display: flex; flex-direction: column; gap: 5px}
  .navigation-zeile nav ul {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #191919; flex-direction: column; align-items: stretch;
    gap: 0; padding: 10px 18px 18px;
    border-bottom: 2px solid #c6a04b; box-shadow: 0 14px 22px #0005;
  }
  .navigation-zeile nav ul.open {display: flex}
  .navigation-zeile nav a {font-size: 13px; padding: 13px 8px}
}
@media (max-width: 430px) {
  body > header.firmenkopf .brand-original {gap: 4px}
  body > header.firmenkopf .crown-original {width: 62px}
  body > header.firmenkopf .wordmark-original {width: min(53vw,195px)}
}
/* Sprungmarken bleiben unterhalb der fixierten Navigation sichtbar. */
main section[id] {scroll-margin-top: 65px}


/* =============================================================
   SCHRITT 2 – STARTBEREICH / ABGESTIMMTE VARIANTE 1
   Überschrift oben, linksbündig; gesamter Textblock nach links versetzt.
   Beschreibung und Buttons darunter mittig ausgerichtet.
   Weiße Seitenflächen bleiben erhalten; keine Textänderungen.
   Header und Navigation werden hier nicht verändert.
   ============================================================= */
#start {
  box-sizing: border-box;
  width: 100%;
  background: linear-gradient(180deg,rgba(12,12,12,.82) 0%,rgba(12,12,12,.65) 47%,rgba(12,12,12,.24) 100%),
              url('../images/shop-hero-edelmetalle.jpg') center center/cover no-repeat !important;
  padding: 48px 30px 64px !important;
}
#start .hero {max-width: 100%; min-height: 405px; display:flex; justify-content:flex-start; align-items:flex-start}
#start .hero > div:first-child {width: min(100%, 760px); max-width: 760px; margin: 0 0 0 clamp(0px, 3vw, 38px)}
#start .hero-badge {text-align: left}
#start .hero-title {text-align: left; font-size: clamp(1.9rem,3.5vw,3.05rem); letter-spacing: .055em; line-height: 1.16; margin-bottom: 22px}
#start .hero-text {text-align:center; max-width: 660px; margin: 0 auto 24px; color:#fff}
#start .hero-actions {justify-content:center; align-items:center; gap:14px; margin-bottom:20px}
#start .hero-meta {text-align:center; max-width: 690px; margin: 0 auto; color:#f4eee5}
@media(max-width:750px){
  #start {padding:36px 20px 45px !important}
  #start .hero {min-height:0; justify-content:center}
  #start .hero > div:first-child {margin:0 auto}
  #start .hero-title {font-size:clamp(1.6rem,6.5vw,2.25rem); letter-spacing:.035em}
  #start .hero-actions {flex-direction:column}
  #start .hero-actions .btn {width:min(100%,310px);box-sizing:border-box}
}

/* =============================================================
   SCHRITT 2B – ROT MARKIERTEN INHALT NACH LINKS VERSCHIEBEN
   Nur Beschreibung, Button-Zeile und Hinweistext verschieben.
   Überschrift, Titelbild, Header und Navigation bleiben unverändert.
   ============================================================= */
@media (min-width: 751px) {
  #start .hero-text,
  #start .hero-actions,
  #start .hero-meta {
    position: relative;
    left: -55px;
  }
}

/* ==============================================================
   SCHRITT 4 – LEISTUNGEN: DUNKLER HINTERGRUND UND VIER KARTEN
   Ausschließlich visuelle Anpassungen; Originaltexte bleiben erhalten.
   ============================================================== */
main > section#services {
  background: #1b1b1b !important;
  color: #f4f0e8 !important;
  border-top: 1px solid #b9994e;
}
#services .section-heading { color: #d9b75e !important; }
#services .section-subtitle { color: #f0ece4 !important; }
#services .services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
#services .service-card {
  background: #393939 !important;
  color: #f7f4ef !important;
  border: 1px solid #b9994e !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
  padding: 20px;
  min-width: 0;
}
#services .service-tagline,
#services .service-card h3 { color: #d9b75e !important; }
#services .service-card p,
#services .service-card li { color: #f7f4ef !important; }
#services .service-card li::before { color: #d9b75e !important; }
@media (max-width: 1000px) {
  #services .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #services .services-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   SCHRITT 4B – LEISTUNGEN: ABSTAENDE UND HOEHE OPTIMIEREN
   Nur dieser Bereich; Texte und Karteninhalte bleiben erhalten.
   ============================================================ */
main > section#services {
  padding: 30px 30px 32px !important;
  box-sizing: border-box;
}
#services .section-heading,
#services .section-subtitle {
  margin-left: 0 !important;
}
#services .section-heading { margin-top: 0 !important; margin-bottom: 12px !important; }
#services .section-subtitle { margin-bottom: 24px !important; }
#services .services-grid { width: 100%; box-sizing: border-box; }
@media (max-width: 600px) {
  main > section#services { padding: 28px 18px 30px !important; }
}

/* ==============================================================
   SCHRITT 5 – ONLINE-SHOP: HELLE FLÄCHE, EINE BREITE KARTE
   Andere Homepage-Bereiche bleiben unberührt.
   ============================================================== */
main > section#shop.shop-showcase {background:#f8f8f6 !important;color:#1b1b1b !important;padding:54px clamp(18px,4vw,62px) 60px !important;}
#shop .section-heading {font-family:Georgia,serif;font-size:clamp(2rem,3vw,2.6rem);letter-spacing:.055em;color:#141923;margin:0 0 25px;}
#shop .section-subtitle {max-width:840px;font-size:1.03rem;line-height:1.75;color:#303641;margin-bottom:42px;}
#shop .shop-showcase-card {box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:24px;min-height:420px;padding:35px clamp(24px,3vw,52px);border:1px solid #d7b76e;border-radius:10px;background:#fbfaf8;box-shadow:0 10px 35px rgba(0,0,0,.035);}
#shop .shop-showcase-eyebrow {color:#b48935;letter-spacing:.18em;font-size:.85rem;margin:0 0 17px;}
#shop .shop-showcase-copy h3 {font-family:Georgia,serif;font-weight:400;font-size:clamp(1.6rem,2.65vw,2.9rem);line-height:1.18;color:#101720;margin:0 0 22px;}
#shop .shop-showcase-intro {font-size:1.04rem;line-height:1.6;color:#262b33;margin:0 0 15px;}
#shop .shop-showcase-products {font-size:.83rem;line-height:1.48;color:#444;max-width:750px;}
#shop .shop-showcase-products p {color:#424242;margin:0 0 8px;}
#shop .shop-showcase-products strong {color:#1d1d1d;}
#shop .shop-showcase-button {box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:24px;min-width:300px;max-width:100%;margin-top:22px;padding:15px 28px;border:1.5px solid #b68a30;border-radius:999px;color:#a67b25;text-decoration:none;font-size:.93rem;letter-spacing:.06em;background:#fff;transition:background .2s,color .2s;}
#shop .shop-showcase-button:hover,#shop .shop-showcase-button:focus-visible {background:#b68a30;color:#fff;}
#shop .shop-showcase-button span {font-size:1.45rem;line-height:1;}
#shop .shop-showcase-image {display:flex;justify-content:center;align-items:center;min-width:0;}
#shop .shop-showcase-image img {display:block;width:100%;height:auto;max-height:410px;object-fit:contain;mix-blend-mode:multiply;}
#shop .shop-showcase-note {margin-top:18px;color:#5b5650;font-size:.78rem;}
@media(max-width:850px){#shop .shop-showcase-card {grid-template-columns:1fr;gap:12px;}#shop .shop-showcase-image {max-width:580px;margin:0 auto;}#shop .shop-showcase-button {min-width:0;width:100%;}}

/* ============================================================
   ONLINE-SHOP – KARTENHINTERGRUND MIT BILDSCHATTIERUNG ABSTIMMEN
   Nur die Karte wird angepasst; Bilddatei und Texte bleiben gleich.
   ============================================================ */
#shop .shop-showcase-card {
  background-color: #f9f8f5;
  background-image:
    radial-gradient(ellipse 46% 53% at 79% 82%, rgba(168,155,137,.18) 0%, rgba(208,199,185,.095) 43%, transparent 82%),
    radial-gradient(ellipse 66% 64% at 44% 18%, rgba(255,255,255,.72), transparent 90%),
    linear-gradient(112deg, #faf9f7 0%, #f8f7f4 58%, #f7f6f3 100%);
}
/* Das Produktfoto behält seine Originalpixel; die helle Bildfläche
   fügt sich durch die bestehende Mischmethode in die Karte ein. */
#shop .shop-showcase-image img { mix-blend-mode: multiply; }

/* ============================================================
   ONLINE-SHOP – PRODUKTBILD OHNE SICHTBAREN RECHTECKRAND
   Nur die Darstellung der Bildkanten wird weich ausgeblendet.
   Die Original-Bilddatei und die übrigen Seiten bleiben unverändert.
   ============================================================ */
#shop .shop-showcase-image img {
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 73% 74% at 50% 53%, #000 66%, rgba(0,0,0,.95) 77%, transparent 100%);
  mask-image: radial-gradient(ellipse 73% 74% at 50% 53%, #000 66%, rgba(0,0,0,.95) 77%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ============================================================
   SCHRITT 5C – ONLINE-SHOP: 30 PX INNENABSTAND WIE LEISTUNGEN
   Ueberschrift, Einleitung, Karte und Hinweis an gleicher Flucht.
   Produktbild, Karteninhalt und alle anderen Bereiche unveraendert.
   ============================================================ */
main > section#shop.shop-showcase {
  padding-left: 30px !important;
  padding-right: 30px !important;
}
#shop .section-heading,
#shop .section-subtitle,
#shop .shop-showcase-card,
#shop .shop-showcase-note {
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 600px) {
  main > section#shop.shop-showcase {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* LEISTUNGEN – VARIANTE 2: GOLDENE LICHTWELLEN NUR IM HINTERGRUND */
main > section#services {
  background-color: #11100f !important;
  background-image: linear-gradient(90deg,rgba(12,12,12,.24),rgba(12,12,12,.05)),url('../images/leistungen-goldwellen-v2.svg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* KORREKTUR: leuchtende goldene Lichtwellen statt dezenter Linien; Karten unveraendert */
main > section#services {background-image: linear-gradient(90deg,rgba(8,8,8,.08),rgba(8,8,8,.02)),url("../images/leistungen-goldwellen-leuchtend.jpg") !important;background-size:cover !important;background-position:center center !important;}

/* Footer: klare dreispaltige Anordnung, bestehende Hintergrundfarbe beibehalten */
footer.ho-footer { padding: 36px 30px 20px; }
footer.ho-footer .ho-footer-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr .9fr; gap: clamp(24px, 4vw, 70px); align-items: start; }
footer.ho-footer .ho-footer-col { min-width: 0; }
footer.ho-footer .ho-footer-col h3 { margin: 0 0 19px; padding: 0 0 12px; border-bottom: 1px solid rgba(255,255,255,.24); font-size: 1rem; letter-spacing: .07em; color: inherit; }
footer.ho-footer .ho-footer-col p { margin: 0 0 18px; line-height: 1.75; }
footer.ho-footer .ho-footer-col strong { font-weight: 650; }
footer.ho-footer a { color: inherit; text-decoration: none; }
footer.ho-footer a:hover, footer.ho-footer a:focus-visible { text-decoration: underline; }
footer.ho-footer .ho-footer-mail { overflow-wrap: anywhere; }
footer.ho-footer .ho-footer-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
footer.ho-footer .ho-footer-social { display: flex; align-items: center; gap: 16px; margin-top: 25px; }
footer.ho-footer .ho-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; }
footer.ho-footer .ho-footer-social img { max-width: 28px; max-height: 28px; width: auto; height: auto; object-fit: contain; }
footer.ho-footer .ho-footer-bottom { max-width: 1280px; margin: 22px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; font-size: .85rem; }
footer.ho-footer .ho-footer-goldchart img { display: block; max-width: min(100%, 360px); height: auto; }
footer.ho-footer .ssl-badge { margin: 0; padding: 0; position: static; }
footer.ho-footer .ssl-badge img { display: block; max-width: 64px; height: auto; }
@media(max-width: 760px) { footer.ho-footer { padding: 30px 18px 20px; } footer.ho-footer .ho-footer-grid { grid-template-columns: 1fr; gap: 14px; } footer.ho-footer .ho-footer-bottom { justify-content: flex-start; } }

/* FOOTER – FREIGEGEBENE GOLDENE TRENNLINIEN; ORIGINALFARBEN DER SOCIAL-MEDIA-ICONS */
footer.ho-footer .ho-footer-col h3 {
  border-bottom: 2px solid #d5a744;
  color: #e0bd6d;
}
footer.ho-footer .ho-footer-col:not(:last-child) {
  border-right: none;
  padding-right: 0;
}
footer.ho-footer .ho-footer-bottom {
  border-top: 2px solid #d5a744;
}
footer.ho-footer .ho-footer-social img {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
@media (max-width: 760px) {
  footer.ho-footer .ho-footer-col:not(:last-child) {
    border-right: none;
    padding-right: 0;
  }
}

/* MARKENZEICHEN – ORIGINALGRAFIKEN, UNTERKANTEN BÜNDIG AUF ALLEN STANDARDSEITEN */
body > header.firmenkopf .brand-original,
body > header .brand-original { align-items: flex-end !important; text-decoration: none !important; border-bottom: none !important; }
body > header.firmenkopf .brand-original .crown-original,
body > header.firmenkopf .brand-original .wordmark-original { align-self: flex-end !important; margin-bottom: 0 !important; transform: none !important; }