/* /scripts/ankaufspreise-startseite.css  – STARTSEITE (Drop-in v2.9, mit harten Overrides) */

/* ===== Farb-/Typo-System (Startseiten-Theme) ===== */
:root{
  --apH-blue:#79D0E6;     /* Fläche */
  --apH-border:#57BEDA;   /* Rahmen */
  --apH-text:#12343B;     /* Text */
  --apH-head:#0E2A31;
  --apH-muted:#5b7a84;
  --apH-row:#F6FCFF;
  --apH-bg:#fff;
}
.ap-home{
  color:var(--apH-text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ===== Board/Karte (Preistabelle) ===== */
.ap-home #apH-board{
  max-width:920px;
  margin:0 auto 36px;
  background:var(--apH-bg);
  border:8px solid var(--apH-border);
  border-radius:10px;
  box-shadow:0 6px 24px rgba(18,52,59,.10);
  padding:12px 14px 18px;
}
.ap-home #apH-head{
  text-align:center;
  margin:6px 0 10px;
}
.ap-home #apH-head .apH-sub{
  letter-spacing:.18em;
  color:#6a8e98;
  font-size:.78rem;
  margin:8px 0 4px;
}
.ap-home #apH-head .apH-title{
  margin:0;
  font-size:1.35rem;
  letter-spacing:.18em;
  color:var(--apH-head);
  text-transform:uppercase;
  font-weight:800;
  text-align:center;
  display:block;
}
.ap-home #apH-head .apH-since{
  font-size:.72rem;
  color:#688;
  margin:2px 0 6px;
}
.ap-home #apH-head .apH-note{
  font-size:.78rem;
  color:#456;
  letter-spacing:.08em;
  border-top:1px solid rgba(87,190,218,.35);
  margin:8px auto 0;
  padding-top:6px;
  max-width:420px;
  text-align:center;
}

/* H2 + Subline zentrieren */
.ap-home h2{
  text-align:center;
  margin:6px 0 2px;
  font-size:1.0rem;
  color:var(--apH-head);
}
.ap-home > p{
  text-align:center;
  margin:0 0 14px;
  color:#59747c;
  font-size:.9rem;
}

/* ===== Sektionen + 2 Spalten für Tabellen (Basis-Layout) ===== */
.ap-home .apH-section{
  margin:18px 0;
}
.ap-home .apH-section > h3{
  margin:0 0 8px;
  padding:10px 12px;
  font-size:.95rem;
  font-weight:800;
  color:#0b3a44;
  background:linear-gradient(180deg,#e6f8fd 0%,#d8f2fb 100%);
  border:2px solid var(--apH-border);
  border-radius:8px;
}
.ap-home .apH-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:760px){
  .ap-home .apH-columns{
    grid-template-columns:1fr;
  }
}

/* ===== Tabellen ===== */
.ap-home .apH-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:2px solid var(--apH-border);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  table-layout:fixed;
}
.ap-home .apH-table caption{display:none;}
.ap-home .apH-table thead th{
  background:#e9f9ff;
  color:#0d3c46;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.02em;
  text-align:left;
  padding:9px 10px;
  border-bottom:2px solid var(--apH-border);
}
.ap-home .apH-table td{
  padding:9px 10px;
  font-size:.9rem;
  color:#1a3d45;
  vertical-align:top;
}
.ap-home .apH-table tbody tr:nth-child(odd){
  background:var(--apH-row);
}

/* feste Spaltenbreiten */
.ap-home .apH-table col.col-material{width:66%;}
.ap-home .apH-table col.col-price{width:34%;}
.ap-home .apH-table td:first-child{
  word-break:break-word;
  hyphens:auto;
}

/* Preisspalte: leicht vom Rand weg, aber rechtsbündig */
.ap-home .apH-table th:last-child,
.ap-home .apH-table td:last-child{
  text-align:right;
  white-space:nowrap;
  padding-right:14px;
  padding-left:6px;
}

/* ===== STARTSEITE: Info-Block (Leistungen | Metalle | Warum wir?) ===== */
/* Reset gegen geerbte Fremd-Styles */
.ap-home-info,
.ap-home-info *{
  word-break:normal!important;
  overflow-wrap:anywhere;
  white-space:normal!important;
}

.ap-home-info{
  width:100%;
  max-width:960px;
  margin:18px auto 28px;
  padding:0 8px;
}
.aphi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}
.aphi-col{min-width:0;}

/* H3-Balken im Info-Block – zentriert */
.aphi-h3{
  margin:0 0 8px;
  padding:8px 10px;
  font-size:1rem;
  font-weight:800;
  color:#0b3a44;
  background:linear-gradient(180deg,#e6f8fd 0%,#d8f2fb 100%);
  border:2px solid var(--apH-border);
  border-radius:8px;
  text-align:center;
}
.aphi-text{
  margin:8px 0 0;
  color:#4b6a73;
  line-height:1.5;
}
.aphi-text a{
  color:#4cbdd9;
  text-decoration:underline;
}
.aphi-phone{
  margin:6px 0 2px;
  color:#0e2a31;
  font-size:1.05rem;
}

.aphi-list{
  margin:8px 0 0 18px;
  padding:0;
}
.aphi-list li{margin:4px 0;}

/* Metalle – Basis */
.aphi-metals{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  column-width:220px;
  column-gap:22px;
}
.aphi-metals li{
  break-inside:avoid;
  margin:2px 0;
  color:#4b6a73;
}

/* Kleine Screens */
@media (max-width:640px){
  .aphi-grid{grid-template-columns:1fr;}
  .aphi-metals{
    column-width:auto;
    column-count:1;
  }
}

/* „Geisterbilder“ neutralisieren */
.ap-home-info img[width="1"],
.ap-home-info img[height="1"],
.ap-home-info .ghost,
.ap-home-info .hidden-image{
  display:none!important;
}

/* Vollbreiter Unterblock innerhalb des aphi-grid */
.aphi-col-full{ grid-column: 1 / -1; }

/* Metalle-Liste: 3 Spalten Desktop, 2 Spalten Tablet, 1 Spalte mobil */
.aphi-metals-3{
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  column-gap: 22px;
}
@media (min-width: 900px){ .aphi-metals-3{ column-count: 3; } }
@media (min-width: 640px) and (max-width: 899px){ .aphi-metals-3{ column-count: 2; } }
@media (max-width: 639px){ .aphi-metals-3{ column-count: 1; } }

/* Sicherheit: keine ererbten Max-Breiten einklemmen */
.aphi-col-full,
.aphi-col-full *{
  max-width: none;
}

/* 6-Spalten-Liste, hübsch & responsiv */
.aphi-metals-6{
  margin:10px 0 0;
  padding:0;
  list-style:none;
  column-count:6;
  column-gap:24px;
  font-size:.94rem;
  line-height:1.35;
}
.aphi-metals-6 li{
  margin:2px 0;
  break-inside:avoid;
}

/* Breakpoints: 6 → 5 → 4 → 3 → 2 → 1 */
@media (max-width:1100px){ .aphi-metals-6{ column-count:5; } }
@media (max-width:980px) { .aphi-metals-6{ column-count:4; } }
@media (max-width:820px) { .aphi-metals-6{ column-count:3; } }
@media (max-width:640px) { .aphi-metals-6{ column-count:2; } }
@media (max-width:420px) { .aphi-metals-6{ column-count:1; } }

/* Alte Vorgaben neutralisieren – immer Spalten, keine feste column-width mehr */
.aphi-metals{
  column-width:auto !important;
}

/* ---------------------------
   START: Aufräum-/Layout-Fixes
   --------------------------- */

/* 2-zeilige Linkliste, schön zentriert */
.ap-links-wrap{
  max-width:780px;
  margin:8px auto 16px;
}
.resource-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 24px;
  list-style:none;
  padding:0;
  margin:0;
}
.resource-links li{ white-space:nowrap; }
.resource-links a{
  color:#7CD4EA;
  text-decoration:none;
}
.resource-links a:hover{ text-decoration:underline; }

/* Facebook / Google Translate / 1&1 Banner zentral ausrichten */
.facebook-content,
.diysdk_webServices_translator .alignment,
.bannerContainer .alignment,
.diysdk_contentApps_paymentTypes.web_view.webcomponent .alignment{
  max-width:780px;
  margin:12px auto;
  text-align:center;
}

/* Hr-Abstände zarter */
.n.module-type-hr .hr{ margin:10px auto; }

/* Footer: Navi mittig, Content-Zeile ordentlich */
.diywebFooter .webnavigation ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 18px;
  list-style:none;
  padding:0;
  margin:0 0 8px;
}
.diywebFooter .webnavigation li{ white-space:nowrap; }
.diywebFooter .webnavigation a{ text-decoration:none; }
.diywebFooter .webnavigation a:hover{ text-decoration:underline; }

/* Footer: links/rechts in einer Zeile (mit Wrap) */
#contentfooter{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  max-width:1020px;
  margin:0 auto;
}
#contentfooter .leftrow,
#contentfooter .rightrow{
  margin:0;
}

/* Sicherheitsnetz: volle Breite in diesem Bereich */
.section-content,
.diywebMainGutter,
.diywebLiveArea{
  width:100%;
}

/* Falls alte Styles Linklisten „quetschen“: neutralisieren */
.aphi-metals{ column-width:auto !important; }

/* ---------------------------
   ENDE: Aufräum-/Layout-Fixes
   --------------------------- */

/* A. Hilfsklassen */
.visually-hidden{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  padding:0;
  border:0;
  height:1px;
  width:1px;
  overflow:hidden;
}

/* B. Nützliche Links */
.ap-start-links{
  margin:16px auto 8px;
  max-width:1060px;
  text-align:center;
}
.ap-start-links .ap-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  justify-content:center;
}
.ap-start-links .ap-links li a{
  text-decoration:none;
  border-bottom:1px solid rgba(124,212,234,.35);
  padding-bottom:2px;
}
.ap-start-links .ap-links li a:hover{
  border-color:rgba(124,212,234,.9);
}

/* C. Social & Translate */
.ap-social{
  max-width:1060px;
  margin:18px auto;
  text-align:center;
}
.ap-social .ap-social-row{ margin:8px 0; }
.ap-share{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  border:1px solid #59C2DC;
  border-radius:18px;
  padding:6px 12px;
}
.ap-share:hover{ background:#EAF9FE; }

/* D. Footer sauber zentriert */
.ap-footer{
  background:#7CD4EA;
  margin-top:22px;
  padding:14px 12px;
  color:#12343B;
}
.ap-footernav{
  list-style:none;
  margin:0 auto 10px;
  padding:0;
  max-width:1060px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:6px 16px;
}
.ap-footernav a{
  text-decoration:none;
  color:#12343B;
}
.ap-footernav a:hover{ text-decoration:underline; }

.ap-footer-meta{
  max-width:1060px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.ap-footer-meta .sep{
  margin:0 8px;
  opacity:.6;
}
@media (max-width:740px){
  .ap-footernav{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .ap-footer-meta{
    flex-direction:column;
    text-align:center;
  }
}

/* E. Sicherheitsnetz für Header-/Footer-Breiten */
.diywebHeader,
.diywebFooter{
  background:#fff;
}
.diywebHeader .diywebMainGutter,
.diywebFooter .diywebMainGutter{
  max-width:1060px;
  margin:0 auto;
}



/* =========================================
   HARTE OVERRIDES FÜR STARTSEITEN-TABELLE
   ========================================= */

/* 1) Spalten-Layout im Board erzwingen (falls 1&1 irgendwas reinfunkt) */
#ankaufspreise-section #apH-board .apH-section .apH-columns{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  align-items:flex-start !important;
}

/* 2) Tabellen in den Spalten */
#ankaufspreise-section #apH-board .apH-columns .apH-table{
  display:table !important;
  width:100% !important;
  margin:0 !important;
  float:none !important;
  border:2px solid var(--apH-border) !important;
  border-radius:8px !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

/* 3) Kopf- und Preisspalte sicher formatieren */
#ankaufspreise-section #apH-board .apH-table thead th{
  background:#e9f9ff !important;
  border-bottom:2px solid var(--apH-border) !important;
}
#ankaufspreise-section #apH-board .apH-table th:last-child,
#ankaufspreise-section #apH-board .apH-table td:last-child{
  text-align:right !important;
  white-space:nowrap !important;
  padding-right:6px !important;
  padding-left:0px !important;
}

/* === Startseite: Überschriften zentrieren (mit !important) === */

/* Kopf der Ankaufstabelle */
#ankaufspreise-section #apH-head,
#ankaufspreise-section #apH-head .apH-sub,
#ankaufspreise-section #apH-head .apH-title,
#ankaufspreise-section #apH-head h2,
#ankaufspreise-section #apH-head .apH-since,
#ankaufspreise-section #apH-head .apH-note {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Titel unterhalb der Tabelle:
   "Diese Metalle können Sie bei uns verkaufen"
   "Unsere Leistungen"
   "Warum wir?" */
.ap-home-info .aphi-h3 {
  text-align: center !important;
}
/* Metalle-Block: Überschrift zentrieren (Diese Metalle können Sie bei uns verkaufen) */
.aphi-col-full .aphi-h3 {
  text-align: center !important;
}

/* Tabellenkopf: "Ankaufspreis kg" & "Ankaufspreis g" etwas nach links schieben */
.ap-home .apH-table thead th:last-child {
  text-align: left !important;
  padding-left: 16px !important;
  padding-right: 6px !important;
}

/* Hinweistext unter der Tabelle zentrieren */
.ap-home #apH-foot {
  text-align: center !important;
  margin: 10px 0 3px !important;
  font-size: 0.9rem !important;
  color: #12343B !important;
}

/* Mehr Abstand zwischen Metalle-Liste und "Unsere Leistungen / Warum wir?" */
.ap-home-info {
  margin-top: 36px !important;
}

/* Spaltenabstand innerhalb von "Unsere Leistungen / Warum wir?" vergrößern */
.ap-home-info .aphi-grid {
  gap: 24px 48px !important;
}

/* ==== Facebook-Button sauber stylen ==== */

.ap-share.ap-share-facebook {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  border: 1px solid #1877F2 !important;   /* Facebook-Blau */
  background: #ffffff !important;
  text-decoration: none !important;
}

.ap-share.ap-share-facebook:hover {
  background: #EAF2FF !important;
}

/* Icon-Kreis */
.ap-share-facebook .ap-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1877F2;
}

/* SVG-„f“ im Kreis */
.ap-share-facebook .ap-share-icon svg {
  width: 12px;
  height: 12px;
  fill: #ffffff;
  display: block;
}

/* Text „Facebook“ */
.ap-share-facebook .ap-share-label {
  font-size: 13px;
  font-weight: 600;
  color: #1877F2;
}

/* ==== GOOGLE TRANSLATE: Button & Menü fixen (OVERRIDE) ==== */

/* Container zentrieren */
#google_translate_element{
  text-align:center !important;
  margin:14px 0 18px !important;
}

/* Button selbst: Pillen-Form, Text sauber zentriert */
#google_translate_element .goog-te-gadget,
#google_translate_element .goog-te-gadget-simple{
  font-size:0 !important;          /* alten Textfluss abschalten */
}

#google_translate_element .goog-te-gadget-simple{
  display:inline-block !important;
  padding:6px 24px !important;
  border-radius:999px !important;
  border:2px solid #57BEDA !important;
  background:#EAF9FE !important;
  cursor:pointer !important;
  text-align:center !important;
  box-shadow:0 2px 6px rgba(0,0,0,.06) !important;
  white-space:nowrap !important;
}

/* Text im Button neu definieren und wirklich mittig setzen */
#google_translate_element .goog-te-gadget-simple span,
#google_translate_element .goog-te-gadget-simple a{
  display:inline-block !important;
  margin:0 !important;
  padding:0 !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:#0b3a44 !important;
  line-height:1.3 !important;
}

/* Google-Icon verstecken, eigenen Pfeil anhängen */
#google_translate_element .goog-te-gadget-icon{
  display:none !important;
}

#google_translate_element .goog-te-gadget-simple a::after{
  content:" ▾";
  font-size:11px;
}

/* ==== Menü-Fenster (Iframe) verkleinern & mittig setzen ==== */
.goog-te-menu-frame.skiptranslate{
  width:360px !important;       /* Desktopbreite */
  max-width:94vw !important;    /* auf kleinen Screens nie breiter als Viewport */
  height:320px !important;
  border-radius:10px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.25) !important;
  border:0 !important;
  left:50% !important;
  right:auto !important;
  top:120px !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;
  z-index:9999 !important;
}

/* Mobile: Menü kompakter und höher */
@media (max-width:768px){
  .goog-te-menu-frame.skiptranslate{
    width:94vw !important;
    height:60vh !important;
    top:80px !important;
  }
}

/* Google-Banner oben ausblenden + Body nicht nach unten schieben */
.goog-te-banner-frame.skiptranslate{
  display:none !important;
}
body{
  top:0 !important;
}

/* === Google Translate: Button & Dropdown fixen (Startseite) === */

/* Container mittig */
#google_translate_element {
  text-align: center !important;
  margin: 10px 0 !important;
}

/* Button selbst als „Chip“ darstellen */
#google_translate_element .goog-te-gadget-simple {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  border: 2px solid #57BEDA !important;
  background: #EAF9FE !important;
  font-size: .9rem !important;
  color: #22A0C6 !important;
  cursor: pointer !important;
  text-align: center !important;
}

/* Text im Button sauber mittig, kein Versatz durch Logo */
#google_translate_element .goog-te-gadget-icon {
  display: none !important;
}
#google_translate_element .goog-te-menu-value span {
  margin: 0 !important;
  padding: 0 2px !important;
}

/* === Dropdown-Fenster begrenzen (iframe) === */
.goog-te-menu-frame.skiptranslate {
  max-width: 90vw !important;
  width: 340px !important;
  height: 70vh !important;
  max-height: 420px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 120px !important;
  z-index: 9999 !important;
}

/* Mobil: fast volle Breite, etwas tiefer */
@media (max-width: 600px) {
  .goog-te-menu-frame.skiptranslate {
    width: 95vw !important;
    height: 75vh !important;
    top: 90px !important;
  }
}

/* === Globale Desktop-Schablone + Mobile-Skalierung – NEU (ohne Zoom) === */
:root{
  /* Breite deines klassischen Desktop-Layouts */
  --desktop-width: 1025px;
}

/* Grundlayout */
html,
body {
  margin: 0;
  padding: 0;
}

/* Body darf auf kleinen Screens schmaler werden, kein Mindestmaß mehr */
body {
  font-size: 16px;
  line-height: 1.4;
  min-width: 0;
}

/* Inhalt: auf Desktop auf ~1025px begrenzen, auf Handy volle Breite nutzen */
.diywebContent {
  max-width: var(--desktop-width);
  width: 100%;
  margin: 0 auto;
}

/* Tablets / kleinere Laptops: etwas mehr Zeilenhöhe */
@media (max-width: 1024px) {
  body {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* Smartphones: Schrift leicht größer, aber ohne Zoom-Trick und ohne Ränder */
@media (max-width: 640px) {
  body {
    font-size: 17px;
    line-height: 1.55;
  }
}

/* Handy-Menü / Footer / Linkleisten besser lesbar lassen */
@media (max-width: 640px) {

  /* Hauptnavigation im Header */
  .diywebHeader .webnavigation a,
  .diywebHeader .webnavigation li a {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
  }

  /* Footer-Navigation (blaue Box) */
  .diywebFooter .webnavigation a,
  .ap-footernav a {
    font-size: 1.0rem !important;
    line-height: 1.5 !important;
  }

  /* Dünne Linkzeilen (Rohstoff-Links / Startseiten-Links) */
  .resource-links a,
  .ap-start-links .ap-links li a {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
}



/* ===========================================================
   NEUER BLOCK: Startseite – Sidebar links, Tabelle rechts
   breiter + bündig mit blauem Container
   (gilt NUR für page-1324470 = Startseite)
   =========================================================== */

/* Gesamtbreite für Bereich "Ankaufspreise" auf der Startseite:
   exakt wie die anderen Content-Container (~1060px) */
body#page-1324470 #ankaufspreise-section{
  max-width:1060px;
  margin:0 auto 36px;
}

/* Layout-Wrapper: Sidebar links, Tabelle rechts */
body#page-1324470 #ankaufspreise-section .ap-layout{
  display:flex;
  align-items:flex-start;
  gap:32px;
}

/* Sidebar links */
body#page-1324470 #ap-side-nav{
  flex:0 0 160px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:.9rem;
  color:#12343B;

  /* NEU: schiebt die Sidebar nach links aus dem Layout raus */
  margin-left:-40px;   /* bei Bedarf z.B. -22px oder -15px testen */
}

body#page-1324470 #ap-side-nav .ap-side-title{
  font-size:.8rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin:0 0 10px;
}

body#page-1324470 #ap-side-nav h3{
  margin:0 0 8px;
  font-size:.95rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#0b3a44;
}

body#page-1324470 #ap-side-nav ul{
  list-style:none;
  margin:0 0 12px;
  padding:0;
}

body#page-1324470 #ap-side-nav li{
  margin:2px 0;
}

body#page-1324470 #ap-side-nav a{
  display:block;
  padding:4px 0;
  text-decoration:none;
  color:#12343B;
  font-weight:600;
  font-size:.88rem;
}

body#page-1324470 #ap-side-nav a:hover,
body#page-1324470 #ap-side-nav a:focus{
  text-decoration:underline;
}

/* Block "Metalle Anwendungen" */
body#page-1324470 #ap-side-nav .ap-side-block{
  margin-top:18px;
  border-top:1px solid #e0e6ea;
  padding-top:12px;
}

body#page-1324470 #ap-side-nav .ap-side-block-title{
  font-size:.9rem;
  font-weight:700;
  color:#22A0C6;
  margin:0 0 6px;
}

body#page-1324470 #ap-side-nav .ap-side-subblock{
  margin:10px 0;
}

body#page-1324470 #ap-side-nav .ap-side-subhead{
  font-size:.9rem;
  font-style:italic;
  color:#79BFD9;
  margin:0 0 2px;
}

body#page-1324470 #ap-side-nav .ap-side-sublist{
  list-style:none;
  margin:0 0 4px 0;
  padding-left:10px;
}

body#page-1324470 #ap-side-nav .ap-side-sublist li{
  margin:1px 0;
}

/* Rechter Block: Preistabelle – breiter und bündig rechts */
body#page-1324470 #ankaufspreise-section #apH-board{
  flex:1 1 auto;
  max-width:1060px !important;
  margin:0 -40px 16px 0 !important;  /* rechts leicht „überziehen“ = bündig mit blauem Container */
}

/* Auf der Startseite: 2 Spalten für die Tabellen auch auf kleinen Screens
   (damit die Tabelle neben der Sidebar bleibt und nicht darunter springt) */
body#page-1324470 .apH-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:760px){
  body#page-1324470 .apH-columns{
    grid-template-columns:1fr 1fr;
  }
}
/* Abstand zwischen Kategorie-Überschrift (z.B. "6. Seltene Erden")
   und dem Tabellenkopf ("Material / Ankaufspreis kg") wiederherstellen */
.ap-home .apH-section > h3{
  margin-bottom: 12px !important;   /* Abstand unter der blauen Balken-Überschrift */
}

.ap-home .apH-section .apH-columns{
  margin-top: 0 !important;         /* verhindert, dass hier extra Abstand weggedrückt wird */
}
/* ===========================================
   STARTSEITE – Header-Kontaktbox wie im Layout
   =========================================== */

body#page-1324470 #emotion-header {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}

/* Position der Box im Bild */
body#page-1324470 .header-contact-box {
  position: absolute;
  top: 10%;                 /* Höhe der Box – kleiner = höher */
  right: -2%;               /* weiter nach rechts/links schieben */
  width: 36%;
  max-width: 340px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5c6b;
}

/* Jede Zeile */
body#page-1324470 .header-contact-box .line {
  display: flex;
  align-items: flex-start;
  margin: 4px 0;
}

/* OBEREN ZWEI TELEFONZEILEN zentrieren */
body#page-1324470 .header-contact-box .line-phone {
  justify-content: center !important;      /* Icon + Text als Block zentrieren */
}

body#page-1324470 .header-contact-box .line-phone .text {
  display: block !important;
  width: 100% !important;
  text-align: center !important;           /* Label + Nummer mittig */
}

/* >>> Abstand zwischen 2. Telefonnummer und ERSTER E-Mail-Zeile <<<
   diesen Wert kannst du nach Geschmack ändern (z.B. 12px, 18px, …) */
body#page-1324470 .header-contact-box .line-mail:first-of-type {
  margin-top: 16px !important;
}

/* Icon-Container (Größe der Icons hier ändern) */
body#page-1324470 .header-contact-box .icon {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin-right: 8px;
}

body#page-1324470 .header-contact-box .icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Basis-Text rechts vom Icon */
body#page-1324470 .header-contact-box .text {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 4px;
}

/* Label (grau, fett) */
body#page-1324470 .header-contact-box .label {
  font-weight: 700;
  color: #4b5c6b;
}

/* Nummer / Mailadresse (blau, fett) */
body#page-1324470 .header-contact-box .number {
  font-weight: 700;
  color: #0067c5;
  text-decoration: none;
}

body#page-1324470 .header-contact-box .number:hover {
  text-decoration: underline;
}

/* WhatsApp-Zeile – etwas mehr Abstand nach oben */
body#page-1324470 .header-contact-box .line-wa {
  margin-top: 6px;
}

/* Startseite: alten Header-Telefon-Overlay ausblenden,
   damit der neue header-contact-box Block nicht überdeckt wird */
body#page-1324470 #emotion-header::after {
  content: "" !important;
  display: none !important;
}
/* Startseite: CTA-Schrift immer weiß halten */
body#page-1324470 .ap-cta,
body#page-1324470 .ap-cta:link,
body#page-1324470 .ap-cta:visited {
  color: #ffffff !important;
}

/* beide Textzeilen explizit weiß */
body#page-1324470 .ap-cta-line1,
body#page-1324470 .ap-cta-line2 {
  color: #ffffff !important;
}
/* Startseite: CTA-Schrift immer weiß halten */
body#page-1324470 .ap-cta,
body#page-1324470 .ap-cta:link,
body#page-1324470 .ap-cta:visited {
  color: #ffffff !important;
}

/* beide Textzeilen explizit weiß */
body#page-1324470 .ap-cta-line1,
body#page-1324470 .ap-cta-line2 {
  color: #ffffff !important;
}

/* ============================================================
   RETTUNGS-CODE: Buttons stabil & Scrollbalken statt Quetschen
   ============================================================ */

/* 1. Scrollbalken erzwingen, wenn Fenster zu klein */
/* Damit bleibt die Seite breit, auch wenn man das Fenster schmal zieht */
body {
  min-width: 1050px !important; 
  overflow-x: auto !important;
}

/* 2. Der Container für die Buttons */
.dual-cta-container {
  display: flex !important;
  flex-direction: row !important; /* Immer nebeneinander */
  justify-content: center !important; /* Mittig */
  align-items: stretch !important; /* Gleiche Höhe */
  gap: 20px !important;
  
  /* Breite passt sich dem Inhalt an, aber nicht breiter als die Seite */
  width: 100% !important; 
  max-width: 1060px !important; 
  margin: 30px auto !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}

/* 3. Die Buttons selbst */
.ap-cta-btn {
  flex: 1 !important; /* Teilen sich den Platz gerecht auf */
  
  /* WICHTIG: Damit sie nicht zu schmal werden */
  min-width: 380px !important; 
  
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px 10px !important;
  
  /* Optik */
  background: linear-gradient(180deg, #ff6b5f 0%, #d32f2f 100%);
  background-color: #F44336;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  border: 1px solid #c62828;
  text-decoration: none !important;
  color: #ffffff !important;
}

/* 4. Text-Inhalt zentriert */
.cta-text-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  white-space: nowrap !important; /* Text in einer Zeile halten */
}

/* 5. Schriftgrößen */
.cta-title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1 !important;
  color: #ffffff !important;
  font-size: 19px !important; 
  display: block !important;
}

.cta-sub {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  margin-top: 3px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  display: block !important;
}

.highlight-yellow { color: #fff700 !important; }

/* 6. Icons */
.cta-icon-left, 
.cta-icon-right {
  display: inline-block !important;
  font-size: px !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
}

.cta-icon-left { margin-right: 15px !important; }
.cta-icon-right { margin-left: 15px !important; }
.arrow-small { font-size: 14px; margin-left: 4px; color: #fff !important; }
/* ============================================================
   STABILE BUTTONS: Schrift kleiner (16px) & einzeilig
   ============================================================ */

/* 1. Container für die zwei Buttons */
.dual-cta-container {
  display: flex !important;
  flex-direction: row !important; /* Nebeneinander */
  justify-content: center !important;
  align-items: stretch !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1060px !important;
  margin: 30px auto !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}

/* 2. Die Buttons selbst */
.ap-cta-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* Alles mittig */
  padding: 12px 10px !important;
  
  /* Rotes Design */
  background: linear-gradient(180deg, #ff6b5f 0%, #d32f2f 100%);
  background-color: #F44336;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  border: 1px solid #c62828;
  text-decoration: none !important;
  color: #ffffff !important;
}

/* 3. Text-Gruppe zentrieren */
.cta-text-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* 4. Hauptschrift: KLEINER (16px) & EINZEILIG */
.cta-title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1 !important;
  color: #ffffff !important;
  
  /* HIER ist die Änderung: */
  font-size: 16px !important;      /* Kleiner als vorher (war 19px) */
  white-space: nowrap !important;  /* Zwingt den Text in eine Zeile */
}

/* 5. Unterschrift */
.cta-sub {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  margin-top: 3px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* 6. Icons */
.cta-icon-left, 
.cta-icon-right {
  display: inline-block !important;
  font-size: 36px !important; /* Auch Icons etwas dezenter */
  flex-shrink: 0 !important;
  color: #ffffff !important;
}

.cta-icon-left { margin-right: 10px !important; }
.cta-icon-right { margin-left: 10px !important; }
.highlight-yellow { color: #fff700 !important; }
.arrow-small { font-size: 14px; margin-left: 4px; color: #fff !important; }

/* 7. Mobile Ansicht (Handy) */
@media (max-width: 768px) {
  .dual-cta-container {
    flex-direction: column !important; /* Untereinander */
    gap: 15px !important;
  }
  .ap-cta-btn {
    width: 100% !important;
  }
}
/* ============================================================
   HEADER-KONTAKTBOX OPTIMIERUNG (Startseite)
   Schriftgröße leicht reduziert & Abstand optimiert
   ============================================================ */

/* Basis-Schriftgröße für den gesamten Block minimal reduzieren */
body#page-1324470 .header-contact-box {
    font-size: 14px !important;  /* War vorher 15px */
    width: 38% !important;       /* Breite leicht erhöht, damit lange Mail passt */
    max-width: 360px !important; /* Max-Breite ebenfalls angepasst */
    right: -6% !important;       /* Etwas weiter nach links rücken */
}

/* Speziell für die langen E-Mail-Adressen: Schrift noch einen Tick kleiner */
body#page-1324470 .header-contact-box .line-mail .number {
    font-size: 13px !important;  /* Damit .de nicht abgeschnitten wird */
    white-space: nowrap !important; /* Verhindert Umbruch */
}

/* Optional: Icon-Größe anpassen, damit es harmonisch bleibt */
body#page-1324470 .header-contact-box .icon {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 6px !important;
}