/* GV Trinkhalme – Ergänzungen zum GV-AG-Stylesheet (style.css).
   Gleiche Tokens, Schrift und Bänder; dazu Halmfarben, Maßstabsgrafiken und das Musterformular. */

:root{
  --s-transparent:#EEF3F0;
  --s-transparent-line:#8E9C94;
  --s-schwarz:#262A27;
  --s-blau:#1E5FB4;
  --s-rot:#D7262E;
  --s-gruen:#2E8B47;
  --s-gelb:#F6C445;
  --s-orange:#EF7D1A;
  --s-pink:#D94D93;
}

.brand__name{font-size:1.55rem}
@media (max-width:1180px){.brand__name{font-size:1.3rem}}

/* Hero-Illustration */
.hero-glass{background:#fff;border-radius:20px;padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:14px;max-width:520px;width:100%;justify-self:end}
.hero-glass svg{width:100%;height:auto;display:block}
.hero-glass figcaption{color:var(--muted);font-size:.86rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hero-glass figcaption b{color:var(--green-800)}
@media (max-width:860px){.hero-glass{justify-self:stretch;max-width:none}}

/* Drei Wege */
.route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.route{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:12px;color:var(--ink);border-top:6px solid var(--fam);transition:box-shadow .15s,transform .15s}
.route:hover{color:var(--ink);box-shadow:0 10px 28px rgba(20,40,25,.10);transform:translateY(-2px)}
.route p{color:var(--muted);font-size:.96rem}
.route ul{margin:0;padding-left:18px;color:var(--muted);font-size:.92rem;display:flex;flex-direction:column;gap:4px}
.route .link-arrow{margin-top:auto;padding-top:6px}
@media (max-width:900px){.route-grid{grid-template-columns:minmax(0,1fr)}}

/* Farbmuster */
.swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.swatches li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-weight:600;font-size:.92rem}
.band--mist .swatches li{background:#fff}
.swatches i{flex-shrink:0;width:14px;height:44px;border-radius:7px;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.swatches i.is-clear{background:linear-gradient(90deg,var(--s-transparent) 0 30%,#fff 30% 55%,var(--s-transparent) 55%);box-shadow:inset 0 0 0 1.5px var(--s-transparent-line)}
.swatches small{display:block;font-weight:500;color:var(--muted);font-size:.78rem}

/* Längen im Maßstab */
.lengths{display:flex;flex-direction:column;gap:22px}
.len{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center}
.len b{font-size:1.5rem;font-weight:800;color:var(--green-800);font-variant-numeric:tabular-nums;white-space:nowrap}
.len__bar{height:14px;border-radius:7px;background:var(--sw,var(--green-600));width:calc(var(--l) / 24 * 100%)}
.len__txt{grid-column:2;color:var(--muted);font-size:.92rem;margin-top:-10px}
.scale-note{font-size:.8rem;color:var(--muted)}

/* Wandstärke im Maßstab */
.wall{display:flex;flex-direction:column;gap:18px}
.wall__row{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:16px;align-items:center}
.wall__row span{font-size:.92rem;font-weight:600}
.wall__track{position:relative;height:36px;border-radius:6px;background:var(--mist)}
.band--mist .wall__track{background:#fff}
.band--dark .wall__track{background:rgba(255,255,255,.08)}
.wall__fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--fill);width:var(--w)}
.wall__val{position:absolute;top:50%;transform:translateY(-50%);left:calc(var(--w) + 10px);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.92rem}
.wall__fill--range{background:repeating-linear-gradient(90deg,var(--fill) 0 6px,transparent 6px 10px)}
.band--dark .wall__row span{color:#fff}
.band--dark .wall__val{color:var(--yellow)}
@media (max-width:560px){.wall__row{grid-template-columns:minmax(0,1fr);gap:6px}}

/* Kennzahlen */
.keyfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.keyfacts div{border-top:4px solid var(--fam,var(--yellow));padding-top:16px;display:flex;flex-direction:column;gap:6px}
.keyfacts b{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:var(--green-800);letter-spacing:-.02em;line-height:1.05}
.keyfacts span{color:var(--muted);font-size:.92rem}
.band--dark .keyfacts b{color:#fff}
.band--dark .keyfacts span{color:var(--on-dark-muted)}
@media (max-width:900px){.keyfacts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Tabellen */
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums;background:#fff}
.tbl th{text-align:left;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:12px 14px;border-bottom:2px solid var(--line);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid #EEF1EE;vertical-align:top}
.tbl td:first-child{font-weight:700;color:var(--green-800);white-space:nowrap}
.tbl-box{border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto;background:#fff}

/* Ablauf */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:st}
.steps li{counter-increment:st;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;display:flex;flex-direction:column;gap:8px}
.steps li::before{content:counter(st);width:36px;height:36px;border-radius:50%;background:var(--yellow);color:var(--green-800);font-weight:800;display:flex;align-items:center;justify-content:center}
.steps b{color:var(--green-800)}
.steps span{color:var(--muted);font-size:.9rem}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}

/* Checkliste */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.checks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.checks li::before{content:"";width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--green-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.band--dark .checks li::before{background-color:var(--yellow)}
.checks b{color:var(--green-800)}
.band--dark .checks b{color:#fff}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:860px){.two-col{grid-template-columns:minmax(0,1fr)}}

/* FAQ */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--green-800);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--green-600)}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin-top:10px;color:var(--muted);max-width:70ch}

/* Musterformular */
.form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(22px,4vw,40px);display:flex;flex-direction:column;gap:22px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.field legend{font-weight:600;font-size:.9rem;color:var(--green-800)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid #CBD3CD;border-radius:8px;padding:12px 14px;min-height:50px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--yellow);outline-offset:1px;border-color:var(--green-600)}
fieldset.field{border:0;padding:0;margin:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border:1.5px solid #CBD3CD;border-radius:999px;font-weight:600;font-size:.9rem;cursor:pointer;background:#fff}
.opt span i{width:10px;height:10px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.opt input:checked + span{border-color:var(--green-800);background:var(--green-100);color:var(--green-800)}
.opt input:focus-visible + span{outline:3px solid var(--yellow);outline-offset:2px}
.form small{color:var(--muted);font-size:.84rem}
.form-ok{background:var(--green-100);border:1px solid #BFDCC3;border-radius:12px;padding:18px 20px;color:var(--green-800)}

.hint{font-size:.85rem;color:var(--muted)}
.band--dark .hint{color:var(--on-dark-muted)}
html,body{overflow-x:clip}

/* Fotos */
.photo{display:block;width:100%;max-width:100%;height:auto;border-radius:16px;object-fit:cover;background:var(--mist)}
.hero-photo{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.hero-photo img{aspect-ratio:4/3;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.hero-photo figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.86rem;color:var(--on-dark-muted)}
.hero-photo figcaption b{color:#fff}
.route{padding:0;overflow:hidden}
.route__img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.route__body{padding:24px 28px 28px;display:flex;flex-direction:column;gap:12px;flex-grow:1}
.page-hero__photo{border-radius:16px;overflow:hidden;aspect-ratio:4/3;min-width:0}
.page-hero__photo img{width:100%;height:100%;object-fit:cover;display:block}
.color-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.color-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.color-card img{width:100%;aspect-ratio:1;object-fit:contain;padding:12px;background:#fff}
.color-card__ph{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--mist)}
.color-card__ph i{width:22px;height:70%;border-radius:11px;background:var(--sw);box-shadow:16px 6px 0 -1px var(--sw),-16px 10px 0 -1px var(--sw)}
.color-card span{border-top:1px solid #EEF1EE;padding:12px 14px;font-weight:700;display:flex;align-items:center;gap:8px;font-size:.92rem}
.color-card span::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
@media (max-width:900px){.color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.photo-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.photo-row img{aspect-ratio:3/2;object-fit:cover;border-radius:12px;width:100%}
@media (max-width:760px){.photo-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.photo-band{display:block;width:100%;max-height:520px;object-fit:cover}

/* Produktfotos wie auf gv.ag: freigestellt, weiße Kachel, contain */
.route__img{object-fit:contain;background:#fff;padding:18px;border-bottom:1px solid #EEF1EE;aspect-ratio:4/3}
.page-hero__photo{background:#fff;border:1px solid var(--line);padding:clamp(20px,3vw,36px);display:flex;align-items:center;justify-content:center}
.page-hero__photo img{object-fit:contain}
.photo--product{object-fit:contain;background:#fff;border:1px solid var(--line);padding:24px;aspect-ratio:1}
.hero-tiles .hero-tile img{aspect-ratio:1;object-fit:contain;padding:14px}
.hero-tile{border-top-color:var(--fam)}
.color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.color-card img{aspect-ratio:4/3}
@media (max-width:640px){.color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pack-card{display:flex;flex-direction:column;gap:10px}
.pack-card .photo--product{aspect-ratio:4/3;margin-bottom:6px}
.pack-card p{color:var(--muted);font-size:.95rem}
.pack-card__nr{font-weight:700;color:var(--green-800)!important;font-variant-numeric:tabular-nums}
.tbl--art td{white-space:nowrap;font-weight:500}
.tbl--art td:first-child{display:flex;align-items:center}
.ean summary{cursor:pointer;font-weight:700;color:var(--green-600);padding:8px 0}
.ean .tbl-box{margin-top:12px;max-height:520px;overflow:auto}
.page-hero__photo img{background:#fff}
.photo-row img.photo--product{aspect-ratio:1;object-fit:contain;padding:14px}
.tbl--art th,.tbl--art td{padding:10px 9px;font-size:.86rem}
.tbl--art th{font-size:.68rem;letter-spacing:.06em}
.header-cta .shop-link{min-height:52px}
.header-cta .shop-link{display:none!important}
.topbar__right a.topbar__muster{color:var(--yellow);font-weight:700}
[data-shop][hidden]{display:none!important}