/* Grokbot UX fixes for autoabsichern.de (2026-10-04, approved by Roman).
   Loaded from tpls/blocks/head.php after the template CSS. Rollback: remove the <link> in head.php. */

/* ---------- 9. Strong CTA for the PLZ forms ---------- */
#t3-content .quote-form button[type="submit"],
#t3-content button.btn-quote--green,
.gb404 .quote-form button[type="submit"] {
  background: #0f7a41 !important;
  border: 1px solid #0b6534 !important;
  color: #fff !important;
  min-height: 50px !important;
  padding: 0 26px !important;
  border-radius: 10px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: .1px;
  box-shadow: 0 3px 10px rgba(15,122,65,.30) !important;
  cursor: pointer;
}
#t3-content .quote-form button[type="submit"]:hover,
#t3-content button.btn-quote--green:hover,
.gb404 .quote-form button[type="submit"]:hover { background: #0b6534 !important; }
#t3-content .quote-form button[type="submit"]:focus-visible,
.gb404 .quote-form button[type="submit"]:focus-visible { outline: 3px solid #ffbf47 !important; outline-offset: 2px; }
#t3-content .quote-form input[name="zipcode"] { min-height: 48px; font-size: 17px !important; }

/* PLZ block (div.gb-plz-block wraps the article PLZ form) */
#t3-content .gb-plz-block { scroll-margin-top: 12px; }

@media (max-width: 767px) {
  #t3-content .quote-form { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  #t3-content .quote-form > div { max-width: none !important; min-width: 0 !important; flex: 1 1 auto !important; width: 100% !important; }
  #t3-content .quote-form button[type="submit"],
  .gb404 .quote-form button[type="submit"] { width: 100% !important; }
  #t3-content .gb-plz-block { padding: 12px 14px 14px !important; margin: 12px 0 22px !important; }
  #t3-content .gb-plz-block .quote-form { gap: 8px !important; }
  #t3-content .gb-plz-block .zip-label { font-size: 16px !important; }
  #t3-content .gb-plz-block h4 { font-size: 17px !important; margin-bottom: 4px !important; }
  #t3-content .gb-plz-block > p:first-of-type { font-size: 15px !important; margin-bottom: 10px !important; }
  #t3-content .gb-plz-block > div:first-child { display: none !important; } /* decorative badge */
  #t3-content .gb-plz-block .zip-label { margin-bottom: 4px !important; }
  #t3-content .gb-plz-block > p:first-of-type { font-size: 14px !important; line-height: 1.4 !important; margin-bottom: 8px !important; }
  #t3-content .article-content > p, #t3-content .item-page p { font-size: 16px; line-height: 1.5; }
  /* com_forms hero on mobile: compact trust chips, no big gap (CSS override only) */
  .qf-trust-chips { gap: 6px !important; flex-wrap: wrap !important; flex-direction: row !important; }
  .qf-hero-shell { padding-top: 10px !important; }
}

/* ---------- 4. Horizontal overflow ---------- */
h1, h2, h3, h4,
.qf-hero-title, .qf-form-title, .qf-hero-sub, .qf-insurance-note, .qf-trust-chips,
#t3-content p, #t3-content li, #t3-content td, #t3-content th {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.qf-hero-shell, .qf-hero-copy, .qf-insurance-note, .qf-trust-chips { min-width: 0; max-width: 100%; box-sizing: border-box; }
#t3-content img { max-width: 100%; height: auto; }
@media (max-width: 767px) {
  #t3-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #t3-content .article-content a, #t3-content .item-page a { overflow-wrap: anywhere; }
  .qf-hero-title { font-size: 26px !important; line-height: 1.2 !important; }
  #t3-content .btn, #t3-content .btn-primary { white-space: normal; max-width: 100%; }
}

/* ---------- 5. Compact mobile header + tappable language switcher ---------- */
@media (max-width: 767px) {
  #t3-header.t3-header { min-height: 0 !important; padding: 6px 12px !important; position: relative; z-index: 40; }
  #t3-header > .row { display: flex; align-items: center; flex-wrap: nowrap; margin: 0; min-height: 50px; }
  #t3-header .logo { flex: 0 0 auto; width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; }
  #t3-header .logo .logo-img { width: 120px !important; }
  #t3-header .header-right { flex: 1 1 auto; width: auto !important; float: none !important; margin: 0 !important; padding: 0 60px 0 6px !important; display: flex; justify-content: flex-end; align-items: center; position: static; }
  #t3-header .languageswitcherload { margin: 0 !important; padding: 0 !important; float: none !important; position: relative; z-index: 45; }
  #t3-header .mod-languages { margin: 0 !important; }
  #t3-header .mod-languages .dropdown-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 8px !important; font-size: 15px !important; line-height: 1.2; }
  #t3-header .mod-languages .dropdown-menu { left: auto !important; right: 0 !important; min-width: 150px; }
  #t3-header .mod-languages .dropdown-menu a { display: block; padding: 10px 14px !important; font-size: 15px; }
  #t3-header #blogru-menu { display: none !important; }

  #t3-mainnav, #t3-mainnav.wrap, #t3-mainnav.navbar {
    position: absolute !important; top: 9px !important; right: 12px !important; left: auto !important;
    width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; z-index: 46 !important;
  }
  #t3-mainnav > .container { width: auto !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
  #t3-mainnav .navbar-header { min-height: 0 !important; padding: 0 !important; margin: 0 !important; float: none !important; display: block !important; }
  #t3-mainnav .off-canvas-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 48px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; border-radius: 10px !important; background: #140b5c !important; border-color: #140b5c !important; }
  #t3-mainnav .t3-mainnav-inner { display: none !important; }
  #t3-mainbody, #t3-mainbody.container, .t3-mainbody { padding-top: 0 !important; margin-top: 0 !important; }
  #t3-content .item-page h1, #t3-content .article-content h1, #t3-content > h1 { font-size: 28px !important; line-height: 1.2 !important; margin: 10px 0 12px !important; }
  /* RU guide links moved into the burger by grokbot-ux.js */
  .t3-off-canvas .gb-offcanvas-extra { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e5e5e5; }
  .t3-off-canvas .gb-offcanvas-extra .gb-offcanvas-title { padding: 0 15px 6px; font-size: 13px; text-transform: uppercase; color: #555; font-weight: 700; }
}

/* Active item in the mobile menu: readable contrast (white on dark green, 6.4:1) */
#t3-off-canvas .nav .active > a,
#t3-off-canvas .nav-pills > li.active > a { background-color: #1f6b33 !important; color: #fff !important; }
#t3-off-canvas .nav > li > a { min-height: 44px; display: flex; align-items: center; }

/* ---------- Sticky mobile CTA ---------- */
.gb-sticky-cta { display: none; }
@media (max-width: 767px) {
  .gb-sticky-cta {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 990;
    min-height: 52px; border-radius: 12px; background: #0f7a41; color: #fff !important; font-size: 17px; font-weight: 700;
    text-decoration: none !important; box-shadow: 0 6px 18px rgba(0,0,0,.25);
    transform: translateY(0); transition: transform .2s ease, opacity .2s ease; opacity: 1;
  }
  .gb-sticky-cta.gb-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
  body.gb-has-sticky { padding-bottom: 76px; }
}

/* ---------- 10. Cookie consent bar ---------- */
.gb-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: #fff; color: #222;
  border-top: 1px solid #d9dee5; box-shadow: 0 -4px 16px rgba(0,0,0,.12);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); font: 14px/1.4 Roboto, Arial, sans-serif;
}
.gb-consent__inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.gb-consent__text { flex: 1 1 auto; margin: 0; font-size: 14px; line-height: 1.4; }
.gb-consent__text a { color: #0b4f8a; text-decoration: underline; }
.gb-consent__btns { display: flex; gap: 8px; flex: 0 0 auto; }
.gb-consent__btn { min-height: 44px; min-width: 96px; padding: 0 16px; border-radius: 8px; border: 1px solid #0b4f8a; background: #fff; color: #0b4f8a; font-weight: 700; font-size: 15px; cursor: pointer; }
.gb-consent__btn--yes { background: #0b4f8a; color: #fff; }
@media (max-width: 767px) {
  .gb-consent { padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px)); }
  .gb-consent__inner { gap: 8px; }
  .gb-consent__text { font-size: 12px; line-height: 1.3; }
  .gb-consent__btns { flex-direction: row; gap: 6px; }
  .gb-consent__btn { min-height: 44px; min-width: 0; padding: 0 10px; font-size: 14px; }
  .gb-consent__long { display: none; }
}
@media (min-width: 768px) { .gb-consent__short { display: none; } }

/* Language switcher: text labels only (Deutsch / English / Русский), no flags */
.mod-languages img { display: none !important; }
.mod-languages .dropdown-toggle { white-space: nowrap; }

/* Content panel moved below the quote form (grokbot_ux_hooks.php): align with the form card */
.gb-moved-seo { max-width: 760px; margin: 18px auto 8px; padding: 0 10px; box-sizing: border-box; }
.gb-moved-seo > aside { margin-top: 0; }
.gb-moved-seo > aside + aside { margin-top: 14px; }

/* ---------- cookiefix 2026-10-04 11:3x: slim consent bar + body padding while shown; compact first screen on mobile ---------- */
@media (max-width: 767px) {
  #t3-header.t3-header { padding: 4px 12px !important; }
  #t3-header > .row { min-height: 46px; }
  #t3-mainnav, #t3-mainnav.wrap, #t3-mainnav.navbar { top: 5px !important; }
  #t3-mainbody #t3-content { padding-top: 8px !important; }
  #t3-content .item-page h1, #t3-content .article-content h1, #t3-content > h1 { font-size: 25px !important; line-height: 1.18 !important; margin: 6px 0 8px !important; }
  #t3-content .item-page h1 + p, #t3-content .article-content h1 + p { font-size: 15px !important; line-height: 1.45 !important; margin-bottom: 8px !important; }
  #t3-content .gb-plz-block { padding: 10px 12px 12px !important; margin: 8px 0 20px !important; }
  #t3-content .gb-plz-block h4 { font-size: 16px !important; line-height: 1.2 !important; margin: 0 0 4px !important; }
  #t3-content .gb-plz-block > p:first-of-type { font-size: 13.5px !important; line-height: 1.35 !important; margin: 0 0 6px !important; }
  #t3-content .gb-plz-block .zip-label { font-size: 15px !important; margin-bottom: 2px !important; }
  #t3-content .gb-plz-block input[name="zipcode"] { min-height: 46px !important; height: 46px !important; }
  #t3-content .gb-plz-block button[type="submit"] { min-height: 48px !important; }
  .gb-consent { padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px)) !important; }
  .gb-consent__text { font-size: 11.5px !important; line-height: 1.25 !important; }
  .gb-consent__btn { min-height: 38px !important; padding: 0 10px !important; font-size: 13.5px !important; }
}
body.gb-consent-open { padding-bottom: var(--gb-consent-h, 0px) !important; }