/* ===================================================================== GrowCologne – Inhaltsseiten und Seiten-Vorlagen (P6b–d) Laden-Seiten, Kontakt, Warengruppen, Sortiment, Text/Recht, Beitrag, Wissen-Archiv, Suche, 404. Aufbau der Seiten: scripts/relaunch/build/seiten.php, Markup: content/elementor/src/seiten.html, laden.html, kontakt.html, sortiment.html, seitenvorlagen.html; Shortcodes [gc_search] und [gc_post_group]: inc/pages.php. Lädt nach components.css auf jeder Seite. Schreibweise wie dort: jede Regel beginnt mit `html:root body` + gc-Klasse, Werte aus tokens.css, kein `!important`, keine ID-Selektoren. Seitenkopf (Brotkrumen, H1 `.gc-page-h1`): components.css Teil 7. Produktkarte: card.css. Aufbau: 1 Seitenkopf mit Foto · 2 Abschnitte und Text · 3 Listen und Karten · 4 Warengruppen · 5 Sortiment · 6 Laden-Seiten · 7 Kontakt und Formular · 8 Text/Recht · 9 Beitrag · 10 Karten-Raster (Wissen, Suche) · 11 Suche · 12 404. ===================================================================== */ /* Grundschrift an den Wurzeln der Bausteine (wie components.css Teil 1) */ html:root body :where(.gc-page-head,.gc-checks,.gc-cards,.gc-card,.gc-brandline,.gc-note,.gc-scards,.gc-gallery,.gc-facts,.gc-chips,.gc-search,.gc-related,.gc-form-note,.gc-404-links){font:400 var(--gc-fs-body)/1.6 var(--gc-sans);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* ===================================================================== 1 · Seitenkopf mit Foto (Laden-Seiten, Warengruppen): `.gc-page-head.gc-ph` ===================================================================== */ html:root body .gc-ph{padding-bottom:clamp(36px,1.6rem + 3vw,88px)} html:root body .gc-ph-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s4)} html:root body .gc-ph-copy{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s2);justify-items:start;align-content:center} html:root body .gc-ph-copy .gc-cta-row{margin-top:var(--gc-s1)} html:root body .gc-ph-photo{--gc-rot:1.4deg;align-self:center} html:root body .gc-ph-photo img{aspect-ratio:3/2} @media (min-width:1024px){ html:root body .gc-ph-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gc-cgap);align-items:center} html:root body .gc-ph-copy{grid-column:1/8} html:root body .gc-ph-photo{grid-column:8/-1} html:root body .gc-ph-photo img{aspect-ratio:4/3} } @media (min-width:1024px) and (max-height:800px){ html:root body .gc-ph-photo img{aspect-ratio:3/2} } /* ===================================================================== 2 · Abschnitte und Text ===================================================================== */ /* Abschnitt direkt unter dem Seitenkopf: der Kopf bringt den Abstand mit */ html:root body .gc-sec.gc-page-body{padding-top:0} html:root body .gc-sec-white{background:#fff} /* Kleinere H2 für schmale Spalten */ html:root body .gc-h2.gc-h2-s{font-size:clamp(1.6rem,1.1rem + 1.5vw,2.6rem);line-height:1.05} /* Fließtext am Text-Widget (Zeilenlänge am inneren Element, siehe components.css Teil 6) */ html:root body .gc-copy{color:var(--gc-ink);font-size:var(--gc-fs-body);line-height:1.65} html:root body .gc-copy.elementor-widget>.elementor-widget-container{max-width:64ch} html:root body .gc-copy p{margin:0;text-wrap:pretty} html:root body .gc-copy p+p{margin-top:1em} html:root body .gc-copy a{color:var(--gc-gruen);font-weight:700;text-decoration:underline;text-underline-offset:.18em} /* Zwei Spalten: Text links, Foto oder Zahlen rechts */ html:root body .gc-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s5)} html:root body .gc-duo-copy{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s3);align-content:start;justify-items:start} html:root body .gc-duo-photo{--gc-rot:-1.4deg;max-width:420px;justify-self:center} html:root body .gc-duo-photo img{aspect-ratio:4/5} @media (min-width:1024px){ html:root body .gc-duo{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gc-cgap);align-items:center} html:root body .gc-duo-copy{grid-column:1/8} html:root body .gc-duo .gc-facts, html:root body .gc-duo-photo{grid-column:8/-1} html:root body .gc-duo-photo{max-width:none;justify-self:stretch} } /* Sichtbarer Fokus in Elementor-Widgets mit gc-Klasse: components.css Teil 1. */ /* Hinweiszeile unter einem Raster */ html:root body .gc-note{margin-top:var(--gc-s4);max-width:70ch;color:var(--gc-ink-2);text-wrap:pretty} html:root body .gc-note a{display:inline-block;padding:11px;margin:-11px;font-weight:700;color:var(--gc-gruen)} html:root body .gc-note a:focus-visible{outline-offset:-10px} /* ===================================================================== 3 · Listen und Karten ===================================================================== */ /* Liste mit Zeichen: „Im Laden ansehen“ */ html:root body .gc-checks{display:grid;gap:16px} html:root body .gc-checks li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;line-height:1.4} html:root body .gc-checks .gc-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--gc-r-s);background:var(--gc-salbei);color:var(--gc-gruen)} html:root body .gc-checks .gc-ic svg{width:22px;height:22px} html:root body .gc-checks b{display:block;font-weight:800;color:var(--gc-ink)} html:root body .gc-checks span span{color:var(--gc-ink-2);font-size:.9375rem;text-wrap:pretty} @media (min-width:721px){ html:root body .gc-checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--gc-s4)} } /* Karte: weiße Fläche mit Linie – Kaufkriterien, Gründe, Wissen (B28) */ html:root body .gc-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-gap)} html:root body .gc-card{position:relative;display:grid;align-content:start;gap:8px;min-width:0;padding:20px 20px 22px;border-radius:var(--gc-r-m);background:#fff;color:var(--gc-ink);box-shadow:inset 0 0 0 1.5px var(--gc-line)} html:root body .gc-card h3{font-weight:800;font-size:var(--gc-fs-h3);line-height:1.15;letter-spacing:-.02em;text-wrap:balance;hyphens:auto} html:root body .gc-card p{color:var(--gc-ink-2);font-size:.96875rem;line-height:1.5;text-wrap:pretty} html:root body .gc-card p a{font-weight:700;color:var(--gc-gruen)} html:root body .gc-card-n{font:400 2.25rem/1 var(--gc-hand);color:var(--gc-gruen)} html:root body .gc-card-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--gc-r-s);background:var(--gc-salbei);color:var(--gc-gruen)} html:root body .gc-card-ic svg{width:24px;height:24px} @media (min-width:481px){ html:root body .gc-cards{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1024px){ html:root body .gc-cards{grid-template-columns:repeat(4,minmax(0,1fr))} html:root body .gc-card{padding:24px 22px 26px} } /* Verweise als Pillen */ html:root body .gc-chips{display:flex;flex-wrap:wrap;gap:10px} html:root body .gc-chips a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:999px;background:#fff;color:var(--gc-ink);font-weight:700;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--gc-line);transition:background-color .15s,color .15s} html:root body .gc-chips a:hover{background:var(--gc-nacht);color:#fff} /* ===================================================================== 4 · Warengruppen ===================================================================== */ html:root body .gc-see-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s5)} html:root body .gc-see-copy{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s3);align-content:center} html:root body .gc-see-photo{--gc-rot:-1.4deg;align-self:center} html:root body .gc-see-photo img{aspect-ratio:3/2} @media (min-width:1024px){ html:root body .gc-see-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gc-cgap);align-items:center} html:root body .gc-see-photo{grid-column:1/6} html:root body .gc-see-photo img{aspect-ratio:4/3} html:root body .gc-see-copy{grid-column:6/-1} } /* Marken der Warengruppe unter den Kaufkriterien */ html:root body .gc-brandline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:var(--gc-s4);color:var(--gc-ink)} html:root body .gc-brandline p{font-weight:700} html:root body .gc-brandline ul{display:flex;flex-wrap:wrap;gap:8px} html:root body .gc-brandline li{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:#fff;font-weight:700;font-size:.9375rem;line-height:1.1;box-shadow:inset 0 0 0 1.5px var(--gc-line)} /* Produkte aus Woo (Loop Grid mit der Produktkarte aus card.css) */ html:root body .gc-loop{--grid-column-gap:var(--gc-gap);--grid-row-gap:var(--gc-gap)} /* ===================================================================== 5 · Sortiment (/sortiment/) ===================================================================== */ /* Legende im Seitenkopf: nur so breit wie nötig */ html:root body .gc-page-head .gc-legend-box{max-width:560px;margin-top:var(--gc-s1)} html:root body .gc-scards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-gap)} html:root body .gc-scard{position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0;border-radius:var(--gc-r-m);background:#fff;color:var(--gc-ink);overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--gc-line);transition:transform .2s var(--gc-ease),box-shadow .2s var(--gc-ease)} html:root body .gc-scard:hover{transform:translateY(-3px);box-shadow:0 0 0 3px var(--gc-gruen)} html:root body .gc-scard:focus-within{box-shadow:0 0 0 3px var(--gc-nacht)} html:root body .gc-scard-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--gc-nacht-2)} html:root body .gc-scard-img img{width:100%;height:100%;object-fit:cover} html:root body .gc-scard-body{display:grid;gap:8px;align-content:start;justify-items:start;padding:16px 18px 20px} html:root body .gc-scard :is(h2,h3){font-weight:800;font-size:clamp(1.25rem,1rem + .8vw,1.75rem);line-height:1.08;letter-spacing:-.028em} html:root body .gc-scard :is(h2,h3) a{text-decoration:none} /* Die ganze Karte ist klickbar; weitere Links liegen darüber */ html:root body .gc-scard :is(h2,h3) a::after{content:"";position:absolute;inset:0;z-index:1} html:root body .gc-scard :is(h2,h3) a:focus-visible{outline:none} html:root body .gc-scard p{color:var(--gc-ink-2);font-size:.9375rem;line-height:1.4;text-wrap:pretty} html:root body .gc-scard-more{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--gc-gruen)} html:root body .gc-scard-more svg{width:20px;height:20px;flex:none} html:root body .gc-scard .gc-graphic b{font-size:clamp(2.6rem,1.8rem + 3vw,4.5rem)} html:root body .gc-scard .gc-graphic span{font-size:1.0625rem} @media (min-width:481px){ html:root body .gc-scards{grid-template-columns:repeat(2,minmax(0,1fr))} html:root body .gc-scard-wide{grid-column:1/-1;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr)} html:root body .gc-scard-wide .gc-scard-img{aspect-ratio:auto;min-height:200px} html:root body .gc-scard-wide .gc-scard-body{align-content:center} } @media (min-width:1024px){ html:root body .gc-scards{grid-template-columns:repeat(3,minmax(0,1fr))} /* „Mehr über den Laden“: zwei Karten nebeneinander */ html:root body .gc-scards-2{grid-template-columns:repeat(2,minmax(0,1fr))} html:root body .gc-scards-2 .gc-scard-img{aspect-ratio:21/9} } /* ===================================================================== 6 · Laden-Seiten ===================================================================== */ /* Rundgang in Bildern: Felder im Format 3:2, Zeilenhöhe aus der Spaltenbreite gerechnet (ein Foto ist zwei Felder breit, zwei sind zwei Felder hoch – 12 Felder, die bei 2, 3 und 4 Spalten ohne Lücke aufgehen) */ html:root body .gc-gallery{--gc-gcols:2;display:grid;grid-template-columns:repeat(var(--gc-gcols),minmax(0,1fr));grid-auto-rows:calc((min(100vw,var(--gc-wrap)) - 2*var(--gc-gut) - (var(--gc-gcols) - 1)*var(--gc-gap))/var(--gc-gcols)*.6667);grid-auto-flow:dense;gap:var(--gc-gap)} html:root body .gc-gal{position:relative;min-width:0;border:5px solid #fff;border-radius:var(--gc-r-m);background:var(--gc-salbei);overflow:hidden;box-shadow:var(--gc-sh)} html:root body .gc-gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} html:root body .gc-gal-wide{grid-column:span 2} html:root body .gc-gal-tall{grid-row:span 2} html:root body .gc-gal-cap{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:6px 10px;border-radius:var(--gc-r-xs);background:rgba(255,255,255,.95);color:var(--gc-nacht);font-weight:700;font-size:.8125rem;line-height:1.2} @media (min-width:721px){ html:root body .gc-gallery{--gc-gcols:3} html:root body .gc-gal-cap{left:12px;bottom:12px;font-size:.9375rem;padding:8px 12px} } @media (min-width:1024px){ html:root body .gc-gallery{--gc-gcols:4} } /* Der Laden in Zahlen */ html:root body .gc-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-gap);width:100%} html:root body .gc-facts li{display:grid;gap:4px;padding:18px 20px 20px;border-radius:var(--gc-r-m);background:var(--gc-nacht);color:var(--gc-on-dark)} html:root body .gc-facts b{font-weight:900;font-size:clamp(2rem,1.4rem + 1.8vw,3.25rem);line-height:1;letter-spacing:-.04em;color:var(--gc-neon)} html:root body .gc-facts span{font-weight:600;font-size:.9375rem;line-height:1.35} @media (min-width:481px) and (max-width:1023px){ html:root body .gc-facts{grid-template-columns:repeat(3,minmax(0,1fr))} } /* Growshop Köln: Karten unter dem Text */ html:root body .gc-warum .gc-cards{margin-top:var(--gc-s5)} html:root body .gc-warum .gc-card{background:var(--gc-mint)} /* ===================================================================== 7 · Kontakt und Formular (B25/B26: `.gc-form` am Shortcode-Widget von Contact Form 7) ===================================================================== */ html:root body .gc-kontakt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s5)} html:root body .gc-kontakt-info{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s3);align-content:start;justify-items:start} html:root body .gc-form-card{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s2);align-content:start;padding:clamp(20px,1rem + 2vw,40px);border-radius:var(--gc-r-l);background:#fff;box-shadow:var(--gc-sh-lg);scroll-margin-top:calc(var(--gc-hdr) + 16px)} html:root body .gc-form-note{color:var(--gc-ink-2);font-size:.9375rem;line-height:1.5} html:root body .gc-form-note a{font-weight:700;color:var(--gc-gruen)} @media (min-width:1024px){ html:root body .gc-kontakt-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gc-cgap);align-items:start} html:root body .gc-kontakt-info{grid-column:1/7} html:root body .gc-form-card{grid-column:7/-1} } /* Felder: schlicht nach den Tokens. Healfio gestaltet `.theme-contact-form` und `.wpcf7`-Felder selbst. */ html:root body .gc-form{color:var(--gc-ink);font:400 1rem/1.5 var(--gc-sans);letter-spacing:normal} html:root body .gc-form .wpcf7-form, html:root body .gc-form .theme-contact-form{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0;padding:0} /* Die Überschrift des Formulars steht als H2 darüber */ html:root body .gc-form .theme-contact-form h6{display:none} html:root body .gc-form label{display:block;margin:0;font-weight:600;font-size:.9375rem;color:var(--gc-ink)} html:root body .gc-form .wpcf7-form-control-wrap{display:block} /* Sichtbare Beschriftung über jedem Feld (seit S8; vorher nur Platzhalter) */ html:root body .gc-form .gc-field{display:grid;gap:6px;margin:0;padding:0} html:root body .gc-form .gc-form-req{margin:0;color:var(--gc-ink-2);font-size:.875rem;line-height:1.4} html:root body .gc-form :is(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],input[type="date"],select,textarea){display:block;width:100%;max-width:none;min-height:52px;margin:0;padding:12px 16px;border:1.5px solid rgba(7,59,46,.5);border-radius:var(--gc-r-s);background:#fff;color:var(--gc-ink);font:400 1rem/1.4 var(--gc-sans);letter-spacing:normal;box-shadow:none;transition:border-color .15s} html:root body .gc-form textarea{min-height:160px;height:auto;resize:vertical} html:root body .gc-form :is(input,select,textarea)::placeholder{color:var(--gc-ink-2);opacity:1} html:root body .gc-form :is(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],input[type="date"],select,textarea):hover{border-color:var(--gc-gruen)} html:root body .gc-form :is(input,select,textarea):focus-visible{border-color:var(--gc-gruen);outline:3px solid var(--gc-nacht);outline-offset:2px} html:root body .gc-form :is(input[type="checkbox"],input[type="radio"]){width:22px;height:22px;margin:0 10px 0 0;accent-color:var(--gc-gruen);vertical-align:-5px} html:root body .gc-form .mcf-submit{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:4px 0 0;padding:0} html:root body .gc-form :is(input[type="submit"],button[type="submit"]){display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:52px;margin:0;padding:0 1.6em;border:2px solid transparent;border-radius:999px;background:var(--gc-gruen);color:#fff;font:700 1rem/1.15 var(--gc-sans);letter-spacing:normal;text-transform:none;box-shadow:none;cursor:pointer;transition:transform .18s var(--gc-ease),box-shadow .18s var(--gc-ease),background-color .18s} html:root body .gc-form :is(input[type="submit"],button[type="submit"]):hover{background:var(--gc-gruen-d);transform:translateY(-2px);box-shadow:0 12px 20px -12px rgba(7,59,46,.6)} html:root body .gc-form :is(input[type="submit"],button[type="submit"]):focus-visible{outline:3px solid var(--gc-nacht);outline-offset:3px} /* Rückmeldungen (B25): Fehler am Feld, Ergebnis unter dem Formular */ html:root body .gc-form .wpcf7-not-valid{border-color:#B3261E} html:root body .gc-form .wpcf7-not-valid-tip{display:block;margin-top:6px;color:#B3261E;font-weight:600;font-size:.875rem;line-height:1.3} html:root body .gc-form .wpcf7 form .wpcf7-response-output{margin:4px 0 0;padding:12px 16px;border:0;border-radius:var(--gc-r-s);background:var(--gc-beige);color:var(--gc-nacht);font-weight:600;font-size:.9375rem;line-height:1.4} html:root body .gc-form .wpcf7 form.sent .wpcf7-response-output{background:var(--gc-salbei)} html:root body .gc-form .wpcf7 form.init .wpcf7-response-output{display:none} /* ===================================================================== 8 · Text/Recht (B27): schmale Textspalte, Inhalt der Seiten unverändert `.gc-narrow` am Boxed-Container begrenzt die Spalte auf 720px; `.gc-prose` am Widget „Inhalt“. ===================================================================== */ html:root body .gc-narrow.e-con-boxed>.e-con-inner{max-width:720px} html:root body :is(.gc-prose,.gc-page-content){color:var(--gc-ink);font:400 var(--gc-fs-body)/1.7 var(--gc-sans);letter-spacing:normal;overflow-wrap:break-word} html:root body .gc-prose :is(p,ul,ol,dl,table,blockquote,figure,pre,address){margin:0 0 1.1em} html:root body .gc-prose :is(h1,h2,h3,h4,h5,h6){margin:1.7em 0 .5em;font-family:var(--gc-sans);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--gc-ink);text-transform:none;text-wrap:balance} html:root body .gc-prose :is(h1,h2){font-size:clamp(1.4rem,1.2rem + .9vw,2rem)} html:root body .gc-prose h3{font-size:clamp(1.2rem,1.1rem + .4vw,1.45rem)} html:root body .gc-prose :is(h4,h5,h6){font-size:1.0625rem;letter-spacing:-.01em} html:root body .gc-prose :is(p,li,td,th,dd,dt){font-family:var(--gc-sans);font-size:inherit;line-height:1.7;letter-spacing:normal;color:var(--gc-ink)} html:root body .gc-prose a{color:var(--gc-gruen);font-weight:600;text-decoration:underline;text-underline-offset:.18em;overflow-wrap:anywhere} html:root body .gc-prose a:hover{color:var(--gc-gruen-d)} html:root body .gc-prose a:focus-visible{outline:3px solid var(--gc-nacht);outline-offset:3px} html:root body .gc-prose ul{padding-left:1.3em;list-style:disc} html:root body .gc-prose ol{padding-left:1.4em;list-style:decimal} html:root body .gc-prose li{margin:.3em 0} html:root body .gc-prose li>:is(ul,ol){margin:.3em 0} html:root body .gc-prose :is(b,strong){font-weight:700} html:root body .gc-prose img{max-width:100%;height:auto;border-radius:var(--gc-r-s)} html:root body .gc-prose table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:.9375rem} html:root body .gc-prose :is(th,td){padding:8px 10px;border:1px solid var(--gc-line);text-align:left;vertical-align:top} html:root body .gc-prose blockquote{padding:14px 18px;border:0;border-left:4px solid var(--gc-gruen);border-radius:0 var(--gc-r-s) var(--gc-r-s) 0;background:#fff;font-style:normal} html:root body .gc-prose hr{margin:2em 0;border:0;border-top:1px solid var(--gc-line)} /* erstes und letztes Element ohne Außenabstand */ html:root body .gc-prose>.elementor-widget-container>:first-child, html:root body .gc-prose .elementor-widget-container>:is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0} html:root body .gc-prose .elementor-widget-container>:last-child{margin-bottom:0} /* Altinhalt aus Elementor (Abschnitte/Spalten der Rechtsseiten): volle Spaltenbreite, keine eigenen Polster, Schrift und Farbe der Textspalte statt der alten Widget-Einstellungen */ html:root body .gc-prose .elementor-section>.elementor-container{max-width:none} html:root body .gc-prose .elementor-section.elementor-section{margin:0;padding:0} html:root body .gc-prose .elementor-column>.elementor-widget-wrap.elementor-element-populated{padding:0} /* mehrspaltige Alt-Abschnitte untereinander: in der 720er-Spalte wären die Spalten zu schmal */ html:root body .gc-prose .elementor-section>.elementor-container{flex-wrap:wrap;row-gap:1.1em} html:root body .gc-prose .elementor-column.elementor-column{width:100%} /* Alt-Widgets mit eigener Breite oder fester Position (Impressum: schmale Textspalte, Bild daneben) → volle Spalte, im Fluss */ html:root body .gc-prose .elementor-element.elementor-widget{position:relative;inset:auto;width:100%;max-width:100%} html:root body .gc-prose .e-con{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px} html:root body .gc-prose .elementor-widget:not(:last-child){margin-bottom:1.1em} html:root body .gc-prose .elementor-widget-heading .elementor-heading-title{font-family:var(--gc-sans);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--gc-ink);text-transform:none} html:root body .gc-prose .elementor-widget-text-editor{font-family:var(--gc-sans);font-size:inherit;line-height:1.7;color:var(--gc-ink)} html:root body .gc-prose .elementor-widget-spacer .elementor-spacer-inner{height:var(--gc-s2)} /* ===================================================================== 9 · Beitrag ===================================================================== */ html:root body .gc-post-meta{color:var(--gc-ink-2);font-weight:600;font-size:.9375rem;line-height:1.4} html:root body .gc-post-meta .elementor-heading-title{margin:0;font:inherit;letter-spacing:inherit;color:inherit} /* Abstand zwischen Bild, Inhalt und Verweis über die Lücke des Containers (Elementor setzt Widget-Abstände selbst) */ html:root body .gc-post.e-con-boxed>.e-con-inner{gap:var(--gc-s4)} html:root body .gc-post-img img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:5px solid #fff;border-radius:var(--gc-r-l);background:var(--gc-salbei);box-shadow:var(--gc-sh)} /* Passende Warengruppe ([gc_post_group]) */ html:root body .gc-related{display:grid;gap:10px;justify-items:start;margin-top:var(--gc-s2);padding:clamp(20px,1rem + 1.6vw,32px);border-radius:var(--gc-r-l);background:var(--gc-salbei);color:var(--gc-ink)} html:root body .gc-related-k{font-weight:700;font-size:.875rem;line-height:1.3;color:var(--gc-ink-2)} html:root body .gc-related-t{font-weight:800;font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);line-height:1.08;letter-spacing:-.03em} html:root body .gc-related-x{max-width:52ch;text-wrap:pretty} html:root body .gc-related .gc-cta-row{margin-top:6px} /* ===================================================================== 10 · Karten-Raster: Wissen-Archiv und Suche (Loop Grid mit dem Loop-Item „GC Wissenskarte“) ===================================================================== */ html:root body .gc-wcard.e-con{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;height:100%;padding:0;overflow:hidden;transition:transform .2s var(--gc-ease),box-shadow .2s var(--gc-ease)} html:root body .gc-wcard.e-con:hover{transform:translateY(-3px);box-shadow:0 0 0 3px var(--gc-gruen)} html:root body .gc-wcard.e-con:focus-within{box-shadow:0 0 0 3px var(--gc-nacht)} html:root body .gc-wcard-img{background:var(--gc-salbei)} html:root body .gc-wcard-img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover} html:root body .gc-wcard-body.e-con{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start;padding:16px 18px 20px} html:root body .gc-wcard-t .elementor-heading-title{margin:0;font:800 clamp(1.15rem,1rem + .5vw,1.45rem)/1.15 var(--gc-sans);letter-spacing:-.02em;color:var(--gc-ink);text-wrap:balance;overflow-wrap:anywhere;hyphens:auto} html:root body .gc-wcard-t a{color:inherit;text-decoration:none} html:root body .gc-wcard-t a::after{content:"";position:absolute;inset:0;z-index:1} html:root body .gc-wcard-t a:focus-visible{outline:none} html:root body .gc-wcard-x{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;margin:0;color:var(--gc-ink-2);font:400 .9375rem/1.5 var(--gc-sans);letter-spacing:normal} /* Art des Treffers in der Suche (Klassen aus post_class() am Loop-Item). Am Titel-Widget, nicht am Container: `.e-con::before` belegt Elementor selbst (Überlagerung). */ html:root body .gc-loop-search .e-loop-item .gc-wcard-t::before{content:"Seite";display:inline-flex;align-items:center;min-height:24px;margin-bottom:8px;padding:0 8px;border-radius:var(--gc-r-xs);background:var(--gc-salbei);color:var(--gc-nacht);font:700 .75rem/1 var(--gc-sans);letter-spacing:normal} html:root body .gc-loop-search .e-loop-item.type-product .gc-wcard-t::before{content:"Produkt";background:var(--gc-nacht);color:#fff} html:root body .gc-loop-search .e-loop-item.type-post .gc-wcard-t::before{content:"Beitrag";background:var(--gc-beige)} /* Produktbilder ganz zeigen */ html:root body .gc-loop-search .e-loop-item.type-product .gc-wcard-img{background:#fff} html:root body .gc-loop-search .e-loop-item.type-product .gc-wcard-img img{object-fit:contain} /* „Nichts gefunden“ */ html:root body .gc-loop .e-loop-nothing-found-message{padding:18px 20px;border-radius:var(--gc-r-m);background:#fff;color:var(--gc-ink);font:600 1rem/1.5 var(--gc-sans);box-shadow:inset 0 0 0 1.5px var(--gc-line)} /* Seitenzahlen */ html:root body .gc-loop .elementor-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:var(--gc-s4)} html:root body .gc-loop .elementor-pagination .page-numbers{display:inline-grid;place-items:center;min-width:44px;min-height:44px;margin:0;padding:0 14px;border-radius:999px;background:#fff;color:var(--gc-ink);font:700 .9375rem/1 var(--gc-sans);text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--gc-line)} html:root body .gc-loop .elementor-pagination a.page-numbers:hover{background:var(--gc-salbei);color:var(--gc-ink)} html:root body .gc-loop .elementor-pagination .page-numbers.current{background:var(--gc-nacht);color:#fff;box-shadow:none} html:root body .gc-loop .elementor-pagination span.page-numbers:not(.current,.dots){color:var(--gc-ink-2);box-shadow:none;background:transparent} /* ===================================================================== 11 · Suche ([gc_search]) ===================================================================== */ html:root body .gc-search{display:flex;flex-wrap:wrap;gap:10px;width:100%;max-width:640px;margin:var(--gc-s1) 0 0} html:root body .gc-search input[type="search"]{flex:1 1 220px;min-width:0;min-height:52px;margin:0;padding:0 20px;border:1.5px solid rgba(7,59,46,.5);border-radius:999px;background:#fff;color:var(--gc-ink);font:400 1rem/1.2 var(--gc-sans);letter-spacing:normal;box-shadow:none;-webkit-appearance:none;appearance:none} html:root body .gc-search input[type="search"]::placeholder{color:var(--gc-ink-2);opacity:1} html:root body .gc-search input[type="search"]:focus-visible{border-color:var(--gc-gruen);outline:3px solid var(--gc-nacht);outline-offset:2px} html:root body .gc-search .gc-btn{flex:0 0 auto;padding:0 1.6em} /* ===================================================================== 12 · 404 (B29) ===================================================================== */ html:root body .gc-404{padding-bottom:clamp(40px,2rem + 4vw,112px)} html:root body .gc-404-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s3);justify-items:start} html:root body .gc-404-copy{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gc-s2);justify-items:start} html:root body .gc-404 .gc-badge{--gc-bs:clamp(150px,34vw,300px);--gc-rot:-8deg} html:root body .gc-404 .gc-badge-big{font-size:calc(var(--gc-bs)*.36)} html:root body .gc-404 .gc-badge-small{font-size:max(13px,calc(var(--gc-bs)*.095))} html:root body .gc-404-links{margin-top:var(--gc-s1)} @media (min-width:721px){ html:root body .gc-404-grid{grid-template-columns:auto minmax(0,1fr);column-gap:var(--gc-cgap);align-items:center} }