/* QUAMARO site-wide layout v3 – 2026-09-09
   Vereinheitlicht alle Inhalts-, Beratungs- und Ratgeberseiten.
   Mobile-first Ergänzung: kompakter, ruhiger, ohne horizontales Überlaufen. */
:root{
  --ql-ink:var(--q-ink,#102a47);
  --ql-text:var(--q-text,#536877);
  --ql-green:var(--q-theme-accent,#0a8c99);
  --ql-green-dark:var(--q-theme-accent-dark,#08747f);
  --ql-green-soft:var(--q-theme-accent-soft,#e8f8f7);
  --ql-bg:var(--q-bg,#f6f8fb);
  --ql-card:var(--q-card,#fff);
  --ql-line:var(--q-line,rgba(16,42,71,.11));
  --ql-shadow:var(--q-shadow,0 14px 34px rgba(16,42,71,.075));
  --ql-shadow-lg:var(--q-shadow-lg,0 22px 58px rgba(16,42,71,.11));
  --ql-radius:var(--q-radius,20px);
}
html{scroll-padding-top:92px}
body.qsite-layout-v3{background:#fff;color:var(--ql-ink);text-rendering:optimizeLegibility}
body.qsite-layout-v3 *,body.qsite-layout-v3 *:before,body.qsite-layout-v3 *:after{box-sizing:border-box}
body.qsite-layout-v3 img,body.qsite-layout-v3 video,body.qsite-layout-v3 svg{max-width:100%}
body.qsite-layout-v3 main,body.qsite-layout-v3 section,body.qsite-layout-v3 article,body.qsite-layout-v3 aside{min-width:0}

/* Typografie und Grundrhythmus */
body.qsite-layout-v3:not(.qhome-v1) h1,
body.qsite-layout-v3:not(.qhome-v1) h2{color:var(--ql-ink);font-family:Georgia,"Times New Roman",serif;letter-spacing:-.025em}
body.qsite-layout-v3:not(.qhome-v1) h1{font-size:clamp(2.2rem,4.8vw,4rem);line-height:1.02}
body.qsite-layout-v3:not(.qhome-v1) h2{line-height:1.08}
body.qsite-layout-v3:not(.qhome-v1) p{line-height:1.62}
body.qsite-layout-v3:not(.qhome-v1) .eyebrow,
body.qsite-layout-v3:not(.qhome-v1) [class*="kicker"],
body.qsite-layout-v3:not(.qhome-v1) [class*="eyebrow"]{color:var(--ql-green-dark);font-weight:850;letter-spacing:.075em;text-transform:uppercase}

/* Einheitliche Seitenbreite ohne bestehende Speziallayouts zu zerlegen */
body.qsite-layout-v3:not(.qhome-v1) :is(.questionnaire-shell,.categories-page-shell,.guide-page-shell,.rg-shell,.page-shell,.legal-shell,.content-shell,.section-inner,.hero-grid){width:min(1180px,calc(100% - 2rem));max-width:1180px;margin-left:auto;margin-right:auto}
body.qsite-layout-v3:not(.qhome-v1) main{overflow:visible}

/* Inhalts-Hero: gleiche Formsprache wie Startseite */
body.qsite-layout-v3:not(.qhome-v1) > .hero-section,
body.qsite-layout-v3:not(.qhome-v1) main > .categories-hero,
body.qsite-layout-v3:not(.qhome-v1) .qg-hero{
  background:radial-gradient(circle at 82% 20%,rgba(25,183,178,.12),transparent 31%),linear-gradient(135deg,#f7fafb,#eef3fb);
  border-bottom:1px solid rgba(16,42,71,.07);
}
body.qsite-layout-v3:not(.qhome-v1) > .hero-section{padding:clamp(1.7rem,4vw,3.3rem) 0}
body.qsite-layout-v3:not(.qhome-v1) > .hero-section .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.78fr);gap:clamp(1.4rem,4vw,3rem);align-items:center}
body.qsite-layout-v3:not(.qhome-v1) > .hero-section :is(.questionnaire-intro,.hero-copy,.hero-content)>p:not(.eyebrow){max-width:68ch;color:var(--ql-text);font-size:clamp(.96rem,1.5vw,1.08rem)}
body.qsite-layout-v3:not(.qhome-v1) > .hero-section :is(.q-lawn-v3-hero-visual,.hero-photo,.hero-visual,[class*="hero-media"],[class*="hero-visual"]){overflow:hidden;border:1px solid var(--ql-line);border-radius:24px;background:var(--q-bg-2,#eef3fb);box-shadow:var(--ql-shadow-lg);aspect-ratio:16/10;max-height:380px}
body.qsite-layout-v3:not(.qhome-v1) > .hero-section :is(.q-lawn-v3-hero-visual,.hero-photo,.hero-visual,[class*="hero-media"],[class*="hero-visual"]) img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* Bestehende Foto-Heros in Ratgebern */
body.qsite-layout-v3.qsite-page-article .article-hero{margin:1rem 0 1.6rem!important;border-radius:24px!important;box-shadow:var(--ql-shadow-lg)!important}
body.qsite-layout-v3.qsite-page-article .article-hero__copy{padding:clamp(1.5rem,4vw,2.8rem)!important}
body.qsite-layout-v3.qsite-page-article main{width:min(1180px,calc(100% - 2rem));max-width:1180px;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
body.qsite-layout-v3.qsite-page-article main>p,
body.qsite-layout-v3.qsite-page-article main>ol,
body.qsite-layout-v3.qsite-page-article main>ul,
body.qsite-layout-v3.qsite-page-article main>h2,
body.qsite-layout-v3.qsite-page-article main>h3,
body.qsite-layout-v3.qsite-page-article main>.note{max-width:820px}
body.qsite-layout-v3.qsite-page-article main>h2{margin-top:2.15rem;margin-bottom:.65rem}
body.qsite-layout-v3.qsite-page-article main>h3{margin-top:1.45rem;margin-bottom:.45rem}
body.qsite-layout-v3.qsite-page-article main>p{color:#314a5d}
body.qsite-layout-v3.qsite-page-article :is(.facts,.related){gap:.8rem!important;margin:1rem 0 1.5rem}
body.qsite-layout-v3.qsite-page-article :is(.facts>*,.related>*){border:1px solid var(--ql-line)!important;border-radius:16px!important;background:#f8fbf9!important;box-shadow:none!important}

/* Ratgeber-Hubs */
body.qsite-layout-v3.qsite-page-hub .rg-list-hero{padding-top:2rem;padding-bottom:1.4rem}
body.qsite-layout-v3.qsite-page-hub .rg-list-hero-media{border-radius:24px!important;box-shadow:var(--ql-shadow-lg)!important}
body.qsite-layout-v3.qsite-page-hub .rg-list-grid{gap:.9rem!important}
body.qsite-layout-v3.qsite-page-hub .rg-card{border-color:var(--ql-line)!important;border-radius:18px!important;box-shadow:var(--ql-shadow)!important}
body.qsite-layout-v3.qsite-page-hub .rg-card-body{padding:1rem!important}
body.qsite-layout-v3.qsite-page-hub .rg-card h3{font-family:inherit!important;letter-spacing:0!important}

/* Beratungsseiten */
body.qsite-layout-v3.qsite-page-advisor .questionnaire-shell{padding-top:1.2rem;padding-bottom:2.4rem}
body.qsite-layout-v3.qsite-page-advisor :is(.questionnaire-card,.result-card,.analysis-card,.planner-card){border:1px solid var(--ql-line)!important;border-radius:22px!important;background:#fff!important;box-shadow:var(--ql-shadow)!important}
body.qsite-layout-v3.qsite-page-advisor .questionnaire-card{padding:clamp(1rem,2.5vw,1.55rem)!important}
body.qsite-layout-v3.qsite-page-advisor .form-grid{gap:.8rem!important}
body.qsite-layout-v3.qsite-page-advisor :is(.form-field,.field,.input-card){min-width:0}
body.qsite-layout-v3.qsite-page-advisor :is(input,select,textarea){min-height:46px;border-radius:12px!important;border-color:rgba(16,42,71,.14)!important;background:#fff}
body.qsite-layout-v3.qsite-page-advisor label{color:var(--ql-ink)}

/* Karten und Sektionen allgemein */
body.qsite-layout-v3:not(.qhome-v1) :is(.highlight-card,.category-card,.guide-card,.card,.result-main,.result-side,.quantity-banner,.cta-panel__box,.cta-panel__contact){border-color:var(--ql-line)}
body.qsite-layout-v3:not(.qhome-v1) :is(.highlight-card,.category-card,.guide-card,.card){border-radius:17px}
body.qsite-layout-v3:not(.qhome-v1) .section{padding-top:clamp(1.5rem,3.5vw,2.8rem);padding-bottom:clamp(1.5rem,3.5vw,2.8rem)}
body.qsite-layout-v3:not(.qhome-v1) .section-heading{margin-bottom:1rem}
body.qsite-layout-v3:not(.qhome-v1) .section-heading p{color:var(--ql-text)}

/* Buttons konsistent */
body.qsite-layout-v3:not(.qhome-v1) :is(.button,.btn,[class*="button-primary"]){border-radius:12px;min-height:44px;font-weight:800}
body.qsite-layout-v3:not(.qhome-v1) a.button:not(.button-secondary),
body.qsite-layout-v3:not(.qhome-v1) button.button:not(.button-secondary){background:var(--ql-green);border-color:var(--ql-green);color:#fff}
body.qsite-layout-v3:not(.qhome-v1) a.button:not(.button-secondary):hover,
body.qsite-layout-v3:not(.qhome-v1) button.button:not(.button-secondary):hover{background:var(--ql-green-dark);border-color:var(--ql-green-dark)}
body.qsite-layout-v3:not(.qhome-v1) .button-secondary{background:#fff;color:var(--ql-ink);border-color:rgba(16,42,71,.18)}

/* Tabellen und breite Ausgaben */
.qsite-table-scroll{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;border-radius:14px}
.qsite-table-scroll>table{min-width:620px;margin:0}
body.qsite-layout-v3 table{max-width:100%}
body.qsite-layout-v3 pre,body.qsite-layout-v3 code{max-width:100%;overflow-wrap:anywhere}

/* Footer – auch dynamisch ergänzte Footer */
body.qsite-layout-v3 .site-footer{margin-top:clamp(2.4rem,5vw,4.6rem);background:#102a47!important;color:#fff}
body.qsite-layout-v3 .site-footer .footer-inner{width:min(1180px,calc(100% - 2rem));margin:auto;display:grid;grid-template-columns:minmax(220px,1.35fr) repeat(3,minmax(145px,.7fr));gap:1.6rem;padding:2.2rem 0 1.8rem}
body.qsite-layout-v3 .site-footer .footer-brand{width:160px;height:auto;background:#fff;border-radius:10px;padding:.28rem .45rem}
body.qsite-layout-v3 .site-footer .footer-copy{max-width:42ch;color:rgba(255,255,255,.74);font-size:.88rem;line-height:1.55}
body.qsite-layout-v3 .site-footer .footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
body.qsite-layout-v3 .site-footer .footer-column h3{margin:0 0 .25rem;color:#fff;font-family:inherit;font-size:.88rem;letter-spacing:0}
body.qsite-layout-v3 .site-footer a{color:rgba(255,255,255,.82);text-decoration:none;font-size:.84rem}
body.qsite-layout-v3 .site-footer .footer-bottom{padding:.9rem 1rem;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.62);text-align:center;font-size:.78rem}

/* Tablet */
@media(max-width:900px){
  html{scroll-padding-top:76px}
  body.qsite-layout-v3:not(.qhome-v1) > .hero-section .hero-grid{grid-template-columns:1fr;gap:1rem}
  body.qsite-layout-v3:not(.qhome-v1) > .hero-section :is(.q-lawn-v3-hero-visual,.hero-photo,.hero-visual,[class*="hero-media"],[class*="hero-visual"]) img{height:clamp(220px,44vw,330px)}
  body.qsite-layout-v3 .site-footer .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.qsite-layout-v3 .site-footer .footer-inner>:first-child{grid-column:1/-1}
}

/* Handy – bewusst kompakt, aber nicht gequetscht */
@media(max-width:700px){
  body.qsite-layout-v3:not(.qhome-v1) :is(.questionnaire-shell,.categories-page-shell,.guide-page-shell,.rg-shell,.page-shell,.legal-shell,.content-shell,.section-inner,.hero-grid),
  body.qsite-layout-v3.qsite-page-article main{width:calc(100% - 1rem)!important}
  body.qsite-layout-v3:not(.qhome-v1) h1{font-size:clamp(1.85rem,8.2vw,2.55rem);line-height:1.04}
  body.qsite-layout-v3:not(.qhome-v1) h2{font-size:clamp(1.35rem,6.3vw,1.8rem)}
  body.qsite-layout-v3:not(.qhome-v1) p{line-height:1.52}
  body.qsite-layout-v3:not(.qhome-v1) > .hero-section{padding:1.2rem 0 1.35rem}
  body.qsite-layout-v3:not(.qhome-v1) > .hero-section .hero-grid{width:calc(100% - 1rem)!important}
  body.qsite-layout-v3:not(.qhome-v1) > .hero-section :is(.q-lawn-v3-hero-visual,.hero-photo,.hero-visual,[class*="hero-media"],[class*="hero-visual"]){border-radius:17px!important;box-shadow:0 10px 28px rgba(16,42,71,.09)!important}
  body.qsite-layout-v3:not(.qhome-v1) > .hero-section :is(.q-lawn-v3-hero-visual,.hero-photo,.hero-visual,[class*="hero-media"],[class*="hero-visual"]) img{height:auto!important;aspect-ratio:16/9;object-fit:cover}

  /* Vorteile/Statuschips nicht zu langen Zeilen wachsen lassen */
  body.qsite-layout-v3 .trust-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.4rem!important}
  body.qsite-layout-v3 .trust-pill{min-width:0!important;padding:.5rem .58rem!important;font-size:.72rem!important;line-height:1.25!important;text-align:center}
  body.qsite-layout-v3 .trust-row .trust-pill:last-child:nth-child(odd){grid-column:1/-1}

  /* Standard-Karten zweispaltig, damit Übersichtsseiten nicht endlos werden */
  body.qsite-layout-v3 :is(.banner-grid,.category-grid,.guide-article-grid,.guide-category-grid,.card-grid,.related-grid,.topic-grid){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.55rem!important}
  body.qsite-layout-v3 :is(.highlight-card,.category-card,.guide-card,.card){min-width:0!important;padding:.75rem!important;border-radius:14px!important}
  body.qsite-layout-v3 :is(.highlight-card,.category-card,.guide-card,.card) h3{font-size:.9rem!important;line-height:1.25!important}
  body.qsite-layout-v3 :is(.highlight-card,.category-card,.guide-card,.card) p{font-size:.76rem!important;line-height:1.4!important}

  /* Formulare: vorhandene 2-Spalten-Logik respektieren, lange Felder volle Breite */
  body.qsite-layout-v3.qsite-page-advisor .questionnaire-card{padding:.75rem!important;border-radius:16px!important}
  body.qsite-layout-v3.qsite-page-advisor .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.5rem!important}
  body.qsite-layout-v3.qsite-page-advisor .form-field.full,
  body.qsite-layout-v3.qsite-page-advisor .form-field:has(textarea),
  body.qsite-layout-v3.qsite-page-advisor .form-field:has(input[type="file"]){grid-column:1/-1!important}
  body.qsite-layout-v3.qsite-page-advisor :is(input,select,textarea){min-height:43px;font-size:16px!important}
  body.qsite-layout-v3.qsite-page-advisor label{font-size:.79rem!important;line-height:1.3}
  body.qsite-layout-v3.qsite-page-advisor .question-actions,
  body.qsite-layout-v3.qsite-page-advisor .result-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.45rem!important}
  body.qsite-layout-v3.qsite-page-advisor .question-actions>:only-child{grid-column:1/-1}

  /* Ratgeber-Hubs: 2 Karten nebeneinander bis sehr kleine Displays */
  body.qsite-layout-v3.qsite-page-hub .rg-list-hero{padding-top:1.1rem;padding-bottom:1rem}
  body.qsite-layout-v3.qsite-page-hub .rg-list-hero h1{font-size:clamp(1.9rem,8.5vw,2.65rem)!important}
  body.qsite-layout-v3.qsite-page-hub .rg-list-hero-media{margin-top:.85rem!important;border-radius:16px!important}
  body.qsite-layout-v3.qsite-page-hub .rg-list-hero-media img{height:auto!important;aspect-ratio:16/9!important}
  body.qsite-layout-v3.qsite-page-hub .rg-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.55rem!important}
  body.qsite-layout-v3.qsite-page-hub .rg-card{border-radius:14px!important}
  body.qsite-layout-v3.qsite-page-hub .rg-card img{height:112px!important;object-fit:cover}
  body.qsite-layout-v3.qsite-page-hub .rg-card-body{padding:.68rem!important}
  body.qsite-layout-v3.qsite-page-hub .rg-card h3{font-size:.88rem!important;line-height:1.22;margin:.28rem 0!important}
  body.qsite-layout-v3.qsite-page-hub .rg-card p{font-size:.72rem!important;line-height:1.35!important;margin-bottom:.45rem!important}
  body.qsite-layout-v3.qsite-page-hub .rg-link,.rg-meta{font-size:.66rem!important}

  /* Artikel: Hero kürzer und lesbarer, Fakten 2-spaltig */
  body.qsite-layout-v3.qsite-page-article .article-hero{min-height:330px!important;border-radius:16px!important;margin:.7rem 0 1rem!important}
  body.qsite-layout-v3.qsite-page-article .article-hero__copy{min-height:330px!important;padding:1.25rem!important;justify-content:flex-end!important}
  body.qsite-layout-v3.qsite-page-article .article-hero h1{font-size:clamp(1.75rem,8vw,2.4rem)!important}
  body.qsite-layout-v3.qsite-page-article .article-hero .lead{font-size:.92rem!important;line-height:1.46!important}
  body.qsite-layout-v3.qsite-page-article :is(.facts,.related){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.5rem!important}
  body.qsite-layout-v3.qsite-page-article :is(.facts>*,.related>*){padding:.72rem!important;font-size:.78rem!important;line-height:1.4!important}
  body.qsite-layout-v3.qsite-page-article main>h2{margin-top:1.65rem}

  body.qsite-layout-v3 .site-footer{margin-top:2.2rem}
  body.qsite-layout-v3 .site-footer .footer-inner{width:calc(100% - 1rem);grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;padding:1.4rem 0 1.15rem}
  body.qsite-layout-v3 .site-footer .footer-inner>:first-child{grid-column:1/-1}
  body.qsite-layout-v3 .site-footer .footer-column:last-child{grid-column:1/-1}
  body.qsite-layout-v3 .site-footer .footer-copy{font-size:.78rem}
  body.qsite-layout-v3 .site-footer a{font-size:.76rem}
}

@media(max-width:430px){
  body.qsite-layout-v3 :is(.banner-grid,.category-grid,.guide-article-grid,.guide-category-grid,.card-grid,.related-grid,.topic-grid){gap:.45rem!important}
  body.qsite-layout-v3.qsite-page-hub .rg-list-grid{grid-template-columns:1fr!important}
  body.qsite-layout-v3.qsite-page-hub .rg-card{display:grid!important;grid-template-columns:116px minmax(0,1fr)!important}
  body.qsite-layout-v3.qsite-page-hub .rg-card img{width:116px!important;height:100%!important;min-height:118px!important}
  body.qsite-layout-v3.qsite-page-article :is(.facts,.related){grid-template-columns:1fr!important}
  body.qsite-layout-v3.qsite-page-advisor .question-actions,
  body.qsite-layout-v3.qsite-page-advisor .result-actions{grid-template-columns:1fr!important}
}

@media(prefers-reduced-motion:reduce){body.qsite-layout-v3 *,body.qsite-layout-v3 *:before,body.qsite-layout-v3 *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}