/* ==========================================================================
   Banki Leihhaus – Design-Ebene (über dem übernommenen Theme)
   Typografie: Poly (Überschriften, wie im Logo) + Source Sans 3 (Fließtext)
   ========================================================================== */

:root {
  --orange: #ff7d18;
  --orange-dark: #e0650a;
  --ink: #1a1a1a;
  --text: #2b2b2b;
  --muted: #5c5c5c;
  --panel: #f5f5f5;          /* wie die Kästen auf der Startseite (whitesmoke) */
  --panel-border: #c4c4c4;
  --radius: 7px;
  --font-head: "Poly", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Typografie ---------- */
body, p, li, td, th, input, button, select, textarea,
.lead, #footer #footer-copyright .copyright, #header .navbar-default .navbar-nav > li > a {
  font-family: var(--font-body);
}
body { color: var(--text); }
#main-content p, #main-content li, #main-content td {
  font-size: 20px;
  line-height: 1.6;
  color: var(--text);
}
#header .navbar-default .navbar-nav > li > a { font-size: 18px; letter-spacing: .2px; }
#footer #footer-copyright .copyright, #footer .f1 { font-size: 18px; line-height: 1.55; }

h1, h2, h3, h4, h5, h6, .title {
  font-family: var(--font-head);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .2px;
}
/* Poly hat nur einen Schnitt – kein künstliches Fett */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b { font-weight: 400; }

#main-content h1 { font-size: 34px; line-height: 1.2; margin: 0 0 18px; }
#main-content h2 { font-size: 28px; line-height: 1.25; margin: 0 0 16px; }
#main-content h3 { font-size: 25px; line-height: 1.3; margin: 0 0 10px; }
#main-content h4 { font-size: 22px; line-height: 1.3; }
#main-content a { color: var(--orange); }
#main-content a:hover { color: var(--orange-dark); }

/* ---------- Unterseiten: Grundraster ---------- */
.page-body { max-width: 1170px; margin: 0 auto; padding: 45px 15px 10px; }
.page-body > section { margin-bottom: 48px; }
.page-body > section:last-child { margin-bottom: 20px; }
.lead-text { font-size: 22px !important; color: var(--muted) !important; max-width: 860px; }
.section-title { text-align: center; margin-bottom: 28px !important; }
.section-title:after {
  content: ""; display: block; width: 56px; height: 3px;
  background: var(--orange); margin: 14px auto 0; border-radius: 2px;
}
.prose { max-width: 900px; }
.prose p { margin: 0 0 14px; }
.prose h3 { margin-top: 30px !important; }
.prose ul { padding-left: 22px; margin: 0 0 16px; }

/* ---------- Kasten (gleicher Stil wie auf der Startseite) ---------- */
.panel-box {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.panel-box > :last-child { margin-bottom: 0; }

/* Hinweis-/Highlight-Box */
.note-box {
  border-left: 4px solid var(--orange);
  background: #fff7f0;
  padding: 18px 22px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.note-box p { margin: 0; }

/* Medienobjekt: Bild links, Text rechts */
.media-box { display: flex; gap: 28px; align-items: flex-start; }
.media-box img { flex: 0 0 auto; width: 120px; height: auto; border-radius: 4px; }
.media-box .media-body { flex: 1 1 auto; }

/* ---------- Kartenraster (Vorteile, Infos) ---------- */
.card-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); border-color: #b5b5b5; }
.card.text-left { text-align: left; }
.card h3 { font-size: 24px !important; margin: 0 0 10px !important; }
.card p { margin: 0; font-size: 20px !important; }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--orange); color: #fff; font-size: 22px;
  margin-bottom: 16px; box-shadow: 0 4px 10px rgba(255,125,24,.3);
}
.card.text-left .card-icon { margin-bottom: 14px; }

/* ---------- Buttons ---------- */
.btn-banki, a.btn-banki, a.btn-banki:visited {
  display: inline-block; background: var(--orange); color: #fff !important;
  font-family: var(--font-body); font-weight: 600; font-size: 18px;
  padding: 11px 24px; border-radius: 6px; text-decoration: none !important;
  border: 0; cursor: pointer; transition: background .15s ease;
}
.btn-banki:hover, a.btn-banki:hover { background: var(--orange-dark); color: #fff !important; }
.btn-banki.btn-outline { background: transparent; color: var(--orange) !important; border: 2px solid var(--orange); padding: 9px 22px; }
.btn-banki.btn-outline:hover { background: var(--orange); color: #fff !important; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ---------- Rechner-iframe auf Unterseiten ---------- */
.calc-frame { width: 100%; height: 260px; border: 0; display: block; }

/* ---------- Versteigerungs-Kästen auf Unterseiten ---------- */
.auction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.auction-grid h3 { margin-bottom: 14px !important; }
.auction-grid .ff { height: auto !important; min-height: 190px; width: 100%; }

/* ---------- Galerie ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-grid a {
  display: block; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 3 / 2; background: #eee; position: relative;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.gallery-grid a:hover img { transform: scale(1.05); }
.gallery-grid a:after {
  content: "\f00e"; font-family: FontAwesome; position: absolute; right: 12px; bottom: 10px;
  color: #fff; font-size: 18px; opacity: 0; transition: opacity .2s; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.gallery-grid a:hover:after { opacity: 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.92);
  display: none; align-items: center; justify-content: center; padding: 50px 60px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lightbox button {
  position: absolute; background: none; border: 0; color: #fff; font-size: 34px;
  cursor: pointer; padding: 10px 14px; line-height: 1; opacity: .8;
}
.lightbox button:hover { opacity: 1; color: var(--orange); }
.lightbox .lb-close { top: 10px; right: 14px; }
.lightbox .lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #bbb; font-size: 14px; }

/* ---------- Familie / Team ---------- */
.family-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.family-card { text-align: center; }
.family-card img {
  width: 100%; max-width: 165px; aspect-ratio: 166 / 228; object-fit: cover;
  border-radius: var(--radius); border: 3px double #000; padding: 3px; background: #fff;
  filter: grayscale(15%);
}
.family-card h3 { color: var(--orange) !important; font-size: 22px !important; margin: 14px 0 4px !important; }
.family-card .gen { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 6px; }
.family-card p { font-size: 20px !important; margin: 0; }

/* ---------- Anfahrt / Kontakt ---------- */
.contact-list { list-style: none; padding: 0 !important; margin: 0; }
.contact-list li { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.contact-list i { color: var(--orange); width: 18px; text-align: center; }
.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 6px 0; border-bottom: 1px solid #e1e1e1; }
.hours tr:last-child td { border-bottom: 0; }
.hours td:last-child { text-align: right; font-weight: 600; }
.map-consent {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--panel-border); background: #111 url(../img/back1.png) repeat;
  min-height: 380px; display: flex; align-items: center; justify-content: center;
}
.map-consent:before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255,125,24,.18), rgba(0,0,0,0) 70%); }
.map-consent .map-consent-inner { position: relative; max-width: 520px; text-align: center; padding: 30px; color: #fff; }
.map-consent .map-consent-inner p { color: #fff !important; font-size: 20px !important; }
.map-consent .map-consent-inner a { color: #fff; text-decoration: underline; }
.map-consent iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-consent.loaded:before, .map-consent.loaded .map-consent-inner { display: none; }

/* ---------- Rechtstexte / Daten-Tabelle ---------- */
.data-table { border-collapse: collapse; margin: 6px 0 18px; }
.data-table th, .data-table td { text-align: left; padding: 5px 24px 5px 0; vertical-align: top; font-size: 20px; }
.data-table th { font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ---------- Jobs ---------- */
.job-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 20px; padding: 0; list-style: none; }
.job-meta li { background: #fff; border: 1px solid var(--panel-border); border-radius: 20px; padding: 4px 14px; font-size: 14.5px !important; }
.job-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.check-list { list-style: none; padding: 0 !important; }
.check-list li { position: relative; padding-left: 28px; margin-bottom: 7px; }
.check-list li:before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 1px; color: var(--orange); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .family-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .page-body { padding: 30px 16px 0; }
  #main-content h1 { font-size: 28px; }
  #main-content h2 { font-size: 24px; }
  .card-grid, .card-grid.cols-2, .auction-grid, .job-cols { grid-template-columns: 1fr; }
  .family-grid { grid-template-columns: repeat(2, 1fr); }
  .media-box { flex-direction: column; gap: 16px; }
  .panel-box { padding: 22px 20px; }
  .lightbox { padding: 50px 10px; }
  .calc-frame { height: 750px; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ---------- Logo als Link zur Startseite ---------- */
.logo-link-text, .logo-link-text:hover, .logo-link-text:focus { display: block; text-decoration: none !important; color: #fff; }

/* ---------- Kopfbilder für Seiten ohne eigenes Theme-Bild ---------- */
.pp909  { background-image: url(../img/sliderbanki.jpg) !important; background-size: 100% auto; }
.pp1152 { background-image: url(../img/s11.jpg) !important; background-size: 100% auto; }
.pp909 .xxxs, .pp1152 .xxxs { display: none; }
@media (min-width: 1250px) { .pp909 #main-content-header, .pp1152 #main-content-header { padding: 0 !important; min-height: 220px !important; } }
@media (min-width: 800px) and (max-width: 1249px) { .pp909 #main-content-header, .pp1152 #main-content-header { padding: 0 !important; min-height: 180px !important; } }
@media (min-width: 600px) and (max-width: 799px) { .pp909 #main-content-header, .pp1152 #main-content-header { padding: 0 !important; min-height: 140px !important; } }
@media (max-width: 599px) {
  .pp909, .pp1152 { background-size: 300% 158px !important; }
  .pp909 #main-content-header, .pp1152 #main-content-header { padding: 0 !important; min-height: 160px !important; }
}

/* ==========================================================================
   Navigation: niemals zweizeilig.
   >= 1100px  Menü einzeilig (auf 1100–1279px mit engeren Abständen)
   <  1100px  Ausklapp-Menü (Burger) – wie auf dem Handy
   ========================================================================== */
@media (min-width: 1100px) and (max-width: 1279px) {
  #header .navbar-default .navbar-nav > li > a { padding-left: 9px !important; padding-right: 9px !important; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  #header .container { min-height: 0 !important; padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100%; }
  #header .navbar-default { border: none !important; }
  .navbar-header { display: block !important; float: none !important; width: auto !important; height: 90px; }
  #header .navbar-default .navbar-toggle { display: block !important; float: right; margin: 27px 15px 0 0 !important; }
  #header .navbar-default .navbar-brand { display: none; }
  #header .navbar-default .navbar-collapse.collapse { display: none !important; }
  #header .navbar-default .navbar-collapse.collapse.in,
  #header .navbar-default .navbar-collapse.collapsing { display: block !important; }
  #header .navbar-default .navbar-collapse {
    background-image: url(../img/back1.png) !important; background-repeat: repeat; background-color: transparent !important;
    width: 100%; float: none; border-top: 1px solid rgba(255,255,255,.12); box-shadow: none; max-height: none; overflow: visible !important;
  }
  #menu-mainnew, .navbar-nav.navbar-right { float: none !important; margin: 0 !important; width: 100%; background: transparent !important; }
  #menu-mainnew > li { float: none !important; display: block; }
  #header .navbar-default .navbar-nav > li > a { padding: 12px 20px !important; }
  #header .navbar-default .navbar-nav > li.active > a { color: #ff7d18 !important; }
  #logoBanki { font-size: 35px !important; margin-top: -80px !important; margin-left: 15px !important; }
  #logoWarenhaus { font-size: 28px !important; margin-left: 17px !important; margin-top: -10px !important; }
  #wrapper { background-position: center 91px !important; }
  #header { box-shadow: none !important; }
}

/* ---------- Überschriften: semantische Ebene ≠ Optik ---------- */
#main-content h2.as-h3 { font-size: 25px; line-height: 1.3; margin: 0 0 10px; }
#main-content h2.as-h4 { font-size: 22px; line-height: 1.3; margin: 10px 0; }
.card h2.as-h3 { font-size: 24px !important; margin: 0 0 10px !important; }
.media-box h2.as-h3 { margin-bottom: 12px; }
.auction-grid h2.as-h3 { margin-bottom: 14px !important; }
.prose h2.as-h3 { margin-top: 30px !important; }
.prose > h2.as-h3:first-of-type { margin-top: 0 !important; }

/* ---------- Häufige Fragen (Startseite) ---------- */
.faq-wrap { width: 100%; padding: 30px 0 10px; }
.faq-section { max-width: 980px; margin: 0 auto; }
.faq-head { text-align: center; margin-bottom: 28px; }
.faq-intro { max-width: 820px; margin: 0 auto; color: var(--muted) !important; }
.faq-list { display: grid; gap: 12px; }
.faq-item {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] { background: #fff; border-color: var(--orange); box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 22px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0 !important; font-size: 22px !important; line-height: 1.35 !important; }
.faq-item summary:hover h3 { color: var(--orange-dark); }
.faq-item summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: var(--radius); }
.faq-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); position: relative; transition: transform .2s ease; }
.faq-icon:before, .faq-icon:after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 1px; transform: translate(-50%, -50%); }
.faq-icon:before { width: 13px; height: 2px; }
.faq-icon:after { width: 2px; height: 13px; transition: opacity .2s ease; }
.faq-item[open] .faq-icon:after { opacity: 0; }
.faq-answer { padding: 0 22px 18px; }
.faq-answer p { margin: 0; }
@media (max-width: 767px) {
  .faq-item summary { padding: 15px 16px; }
  .faq-item summary h3 { font-size: 19px !important; }
  .faq-answer { padding: 0 16px 16px; }
}