/* Theme Name: ZacoDan Tech Theme URI: https://zacodantech.de Author: Mahmood Asgharzada Description: Blockthema für ZacoDan Tech — Direktimport und Großhandel für LDPE- und HDPE-Säcke. Ohne externe Requests, DSGVO-freundlich. Version: 2.9.2 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: zacodantech */ /* Die Farben und Abstände kommen aus theme.json; hier steht nur, was sich über theme.json nicht ausdrücken lässt. Keine externen Schriften, keine CDNs. */ :root{ --zdt-shadow:0 1px 2px rgba(16,32,58,.06),0 12px 32px rgba(16,32,58,.07); } /* Polsterung und Rahmen zaehlen zur Breite, nicht obendrauf. Ohne diese Regel rechnet der Browser die 2 rem Polsterung einer Karte auf ihre Flex-Basis drauf: aus 364 px werden 422, und statt drei Karten passen nur zwei in die Reihe. Dieselbe Ursache hatte zuvor die verrutschten Formularfelder. In der statischen Vorlage stand die Regel ganz oben; beim Umzug ins Theme ist sie untergegangen. */ *, *::before, *::after{box-sizing:border-box} html{scroll-behavior:smooth} body{-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} /* ---------- Kopfzeile ---------- */ .zdt-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93); backdrop-filter:blur(10px);border-bottom:1px solid var(--wp--preset--color--linie)} .zdt-header .wp-block-site-logo img{width:170px;height:auto} .zdt-header .wp-block-navigation{font-weight:600;font-size:.95rem} /* Der gruene Knopf steckt im selben Navigationsblock wie die Menuepunkte. Ohne die Ausnahme bekaeme er den Unterstrich der Menuepunkte mit: der Rahmen von 2 px und vor allem padding-bottom:.25rem haben den unteren Innenabstand des Knopfes von .95rem ueberschrieben. Oben 15,2 px, unten 4 px — die Beschriftung sass dadurch rund 8 px zu tief. */ .zdt-header .wp-block-navigation a:not(.wp-block-button__link){text-decoration:none; border-bottom:2px solid transparent;padding-bottom:.25rem;transition:border-color .18s} .zdt-header .wp-block-navigation a:not(.wp-block-button__link):hover{border-bottom-color:var(--wp--preset--color--gruen)} /* ---------- Worttrennung in Überschriften ---------- WordPress setzt auf Überschriften `word-break: break-word`. Damit gilt jede Stelle im Wort als Umbruchstelle, und der Browser bricht an der spätesten Stelle, die noch passt — ohne Bindestrich. Aus „Kunststoffverpackungen“ wurde so „Kunststoffv / erpackungen“. Aus demselben Grund wurde ein weiches Trennzeichen (­) ignoriert: „Kunststoffv“ ist schmaler als „Kunststoff-“ und gewann. `word-break: normal` schaltet die willkürlichen Umbrüche ab. `hyphens: auto` trennt stattdessen nach den deutschen Silbenregeln — das Dokument ist als lang="de" ausgezeichnet, sonst würde die Trennung nicht greifen. Bleibt ein Wort trotzdem breiter als seine Spalte, fängt `overflow-wrap` es ab, damit nichts seitlich aus dem Layout läuft. */ h1,h2,h3{word-break:normal;overflow-wrap:break-word;hyphens:auto} /* Die Hauptüberschrift der Startseite trennen wir bewusst selbst: an der Fuge des zusammengesetzten Wortes ergibt das „Kunststoff- / verpackungen“ statt der Wörterbuchtrennung „Kunststoffverpackun- / gen“. `manual` heißt: nur das gesetzte ­ gilt als Trennstelle. */ .wp-block-post-content h1{hyphens:manual} /* ---------- Schaltflächen ---------- */ .wp-block-button__link{font-weight:700;border-radius:9px;padding:.95rem 1.75rem; transition:transform .15s,box-shadow .18s,background .18s} .wp-block-button.is-style-fill .wp-block-button__link{box-shadow:0 6px 18px rgba(79,119,34,.30)} .wp-block-button__link:hover{transform:translateY(-1px)} .wp-block-button__link:focus-visible{outline:3px solid var(--wp--preset--color--gruen);outline-offset:3px} /* ---------- Hero ---------- */ .zdt-hero{position:relative;overflow:hidden} .zdt-hero::after{content:"";position:absolute;right:-14%;top:-38%;width:62%;aspect-ratio:1; background:radial-gradient(circle,rgba(119,179,51,.30),transparent 62%);pointer-events:none} .zdt-hero > *{position:relative;z-index:1} .zdt-eyebrow{display:inline-flex;align-items:center;font-size:.8rem;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--wp--preset--color--gruen); background:rgba(119,179,51,.13);border:1px solid rgba(119,179,51,.34); padding:.45rem 1rem;border-radius:99px} .zdt-karte{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14); border-radius:18px;padding:2rem;backdrop-filter:blur(6px)} .zdt-karte .zdt-usp + .zdt-usp{border-top:1px solid rgba(255,255,255,.1);margin-top:.95rem;padding-top:.95rem} .zdt-usp strong{display:block;font-size:1rem;margin-bottom:.15rem} .zdt-usp span{font-size:.92rem;color:#b7c3d6;line-height:1.5} /* ---------- Karten ---------- */ .zdt-karten .wp-block-column{background:#fff;border:1px solid var(--wp--preset--color--linie); border-radius:14px;padding:2rem 1.75rem; transition:transform .2s,box-shadow .2s,border-color .2s} .zdt-karten .wp-block-column:hover{transform:translateY(-4px);box-shadow:var(--zdt-shadow);border-color:#cfd8e4} .zdt-marker{font-size:.78rem;font-weight:600;color:var(--wp--preset--color--marine-700); background:#eef2f7;border:1px solid #dde4ed;border-radius:6px;padding:.3rem .65rem; display:inline-block;margin:.15rem .25rem 0 0} /* ---------- Tabelle ---------- */ .zdt-tabelle{overflow-x:auto;border:1px solid var(--wp--preset--color--linie); border-radius:14px;background:#fff} .zdt-tabelle table{width:100%;border-collapse:collapse;min-width:640px;font-size:.96rem} .zdt-tabelle th,.zdt-tabelle td{text-align:left;padding:1.05rem 1.4rem; border-bottom:1px solid var(--wp--preset--color--linie);vertical-align:top} .zdt-tabelle thead th{background:var(--wp--preset--color--marine);color:#fff; font-weight:650;font-size:.9rem;border-bottom:0} .zdt-tabelle tbody tr:last-child td,.zdt-tabelle tbody tr:last-child th{border-bottom:0} .zdt-tabelle tbody th{font-weight:650;color:var(--wp--preset--color--marine); background:#fafbfd;width:11rem} .zdt-tabelle td{color:var(--wp--preset--color--grau)} /* ---------- Ablauf ---------- */ .zdt-schritte{counter-reset:schritt} .zdt-schritte .wp-block-column{position:relative;padding-top:3.4rem} .zdt-schritte .wp-block-column::before{counter-increment:schritt; content:counter(schritt,decimal-leading-zero);position:absolute;top:0;left:0; font-size:1.05rem;font-weight:800;color:var(--wp--preset--color--gruen-700); background:#fff;border:1.5px solid var(--wp--preset--color--gruen); width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center; font-variant-numeric:tabular-nums} /* ---------- FAQ ---------- */ .wp-block-details{border:1px solid var(--wp--preset--color--linie);border-radius:12px; background:#fff;padding:0;overflow:hidden} .wp-block-details[open]{border-color:#cfd8e4;box-shadow:var(--zdt-shadow)} /* Das Dreieck, das der Browser von sich aus vor die Zusammenfassung setzt, muss weg — sonst springt die Zeile beim Aufklappen, weil der Marker seine Form aendert und die Breite mitnimmt. Stattdessen ein eigener Pfeil rechts, der sich dreht und dabei keinen Platz im Textfluss beansprucht. */ .wp-block-details summary{cursor:pointer;padding:1.05rem 1.4rem;font-weight:650; color:var(--wp--preset--color--marine);font-size:1rem; list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem} .wp-block-details summary::-webkit-details-marker{display:none} .wp-block-details summary::marker{content:""} .wp-block-details summary::after{content:"";flex:0 0 9px;width:9px;height:9px; border-right:2px solid var(--wp--preset--color--gruen); border-bottom:2px solid var(--wp--preset--color--gruen); transform:rotate(45deg) translateY(-2px);transition:transform .2s} .wp-block-details[open] summary::after{transform:rotate(-135deg) translateY(-2px)} .wp-block-details summary:focus-visible{outline:3px solid var(--wp--preset--color--gruen);outline-offset:-3px} .wp-block-details > *:not(summary){padding:0 1.4rem 1.2rem;margin:0; color:var(--wp--preset--color--grau);font-size:.95rem;max-width:70ch} /* ---------- Formular (Contact Form 7) ---------- */ .zdt-formular{background:#fff;border:1px solid var(--wp--preset--color--linie); border-radius:18px;padding:2.25rem;box-shadow:var(--zdt-shadow)} /* Die Spalten richten sich nach dem Platz IM Formular, nicht nach der Breite des Browserfensters. Das Formular steht in einer Spalte von rund 590 px — eine Medienabfrage auf die Fensterbreite presst dort drei Felder auf je 160 px zusammen. auto-fit bricht stattdessen um, sobald es eng wird. */ .zdt-formular .zdt-reihe{display:grid;gap:1rem;margin-bottom:1rem} .zdt-formular .zdt-reihe.zwei{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))} .zdt-formular .zdt-reihe.drei{grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr))} .zdt-formular label{display:block;font-size:.87rem;font-weight:650; color:var(--wp--preset--color--marine);margin-bottom:.4rem} .zdt-formular input[type=text],.zdt-formular input[type=email],.zdt-formular input[type=tel], .zdt-formular select,.zdt-formular textarea{width:100%;font:inherit;font-size:.97rem; color:var(--wp--preset--color--tinte);padding:.8rem .9rem;border:1.5px solid #d7dee8; border-radius:9px;background:#fff;transition:border-color .15s,box-shadow .15s} .zdt-formular textarea{min-height:120px;resize:vertical} .zdt-formular :is(input,select,textarea):focus{outline:0; border-color:var(--wp--preset--color--gruen);box-shadow:0 0 0 3px rgba(119,179,51,.16)} .zdt-zustimmung{display:flex;gap:.7rem;align-items:flex-start;margin:1.4rem 0 1.6rem; font-size:.88rem;color:var(--wp--preset--color--grau);line-height:1.55} .zdt-zustimmung input{margin-top:.25rem;width:17px;height:17px;accent-color:var(--wp--preset--color--gruen)} .zdt-formular input[type=submit]{width:100%;background:var(--wp--preset--color--gruen-700); color:#fff;border:0;border-radius:9px;padding:1.05rem 2rem;font:inherit;font-weight:700; font-size:1.02rem;cursor:pointer;box-shadow:0 6px 18px rgba(79,119,34,.30)} .zdt-formular input[type=submit]:hover{background:var(--wp--preset--color--gruen-700)} .wpcf7 form .wpcf7-response-output{border-radius:9px;margin:1.2rem 0 0;padding:.9rem 1.1rem} /* ---------- Fußzeile ---------- */ .zdt-footer .wp-block-site-logo img{width:150px;height:auto} .zdt-footer a{text-decoration:none;font-weight:600} .zdt-footer a:hover{color:var(--wp--preset--color--gruen)} /* ---------- Bewegung ---------- Bewusst ohne Einblende-Effekt beim Scrollen: Der Inhalt einer Großhandels-Website muss sofort dastehen. Ein Effekt, der Abschnitte zunaechst unsichtbar macht, kostet nichts als Risiko — faellt das Skript aus, ist die halbe Seite leer. Uebrig bleiben nur die dezenten Hover-Zustaende, und auch die nur, wenn der Besucher Bewegung zulaesst. */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .zdt-karten .wp-block-column:hover,.wp-block-button__link:hover{transform:none} /* Wer im Betriebssystem weniger Bewegung wünscht, bekommt das Wisch-Sinnbild ruhig gestellt — sichtbar bleibt es. */ .zdt-tabelle::after{animation:none} } /* ---------- Listen und Kennzahlen ---------- */ .zdt-liste{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:.85rem} .zdt-liste li{position:relative;padding-left:1.9rem} .zdt-liste li::before{content:"";position:absolute;left:0;top:.45rem;width:1.1rem;height:.6rem; border-left:2.4px solid var(--wp--preset--color--gruen); border-bottom:2.4px solid var(--wp--preset--color--gruen); transform:rotate(-45deg);border-radius:1px} .zdt-kv{margin:0} .zdt-kv > div{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.11);font-size:.96rem} .zdt-kv > div:last-child{border-bottom:0} /* Die Beschriftung darf nicht schrumpfen. Als Flex-Element wurde „Kundenkreis“ um ein einziges Pixel gestaucht und brach dadurch in zwei Zeilen um, waehrend alle anderen Beschriftungen einzeilig blieben. Der Wert rechts bricht stattdessen um — er besteht ohnehin aus mehreren Woertern. */ .zdt-kv dt{color:#a9b8ce;margin:0;flex-shrink:0} .zdt-kv dd{margin:0;font-weight:650;text-align:right} .zdt-punkte{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1rem} .zdt-punkte li{display:flex;gap:.8rem;align-items:flex-start;font-size:.98rem;color:#dde5f0} .zdt-punkte svg{flex:0 0 20px;margin-top:.25rem} /* ---------- Recycling-Anzeige ---------- */ .zdt-anzeige{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14); border-radius:18px;padding:2.25rem} .zdt-anzeige-kopf{display:flex;justify-content:space-between;font-size:.86rem;color:#a9b8ce; margin-bottom:.7rem;font-variant-numeric:tabular-nums} .zdt-anzeige-spur{height:16px;border-radius:99px;background:rgba(255,255,255,.1); overflow:hidden;position:relative} .zdt-anzeige-fuell{position:absolute;inset:0;width:80%;border-radius:99px; background:linear-gradient(90deg,var(--wp--preset--color--gruen-700),var(--wp--preset--color--gruen))} .zdt-anzeige-zone{position:absolute;top:0;bottom:0;left:80%;right:0; background:repeating-linear-gradient(135deg,var(--wp--preset--color--gruen) 0 4px,rgba(119,179,51,.45) 4px 9px)} .zdt-anzeige-fuss{display:flex;justify-content:space-between;font-size:.8rem;color:#8fa0ba; margin-top:.6rem;font-variant-numeric:tabular-nums} .zdt-anzeige-hinweis{color:#a9b8ce;font-size:.9rem;margin:1.5rem 0 0} /* ---------- Kontaktangaben im Formularkasten ---------- */ .zdt-kontakt{margin:1.75rem 0 0} .zdt-kontakt > div{padding:.7rem 0;font-size:.97rem} .zdt-kontakt dt{color:#a9b8ce;font-size:.85rem;margin:0 0 .15rem} .zdt-kontakt dd{margin:0;color:#dde5f0;font-weight:600} /* ---------- FAQ-Abstände ---------- */ .zdt-faq{display:grid;gap:.85rem} /* ---------- Formular: Meldungen und Spamschutz ---------- */ .zdt-meldung{border-radius:9px;padding:1rem 1.2rem;margin:0 0 1.4rem} .zdt-meldung p{margin:0;font-size:.97rem} .zdt-erfolg{background:var(--wp--preset--color--gruen-050); border:1px solid var(--wp--preset--color--gruen);color:#2f4a12} .zdt-fehler{background:#fdf0f0;border:1px solid #e3b5b5;color:#7d2b2b} .zdt-hinweis{background:#fff6e5;border:1px solid #f0dcb4;color:#7a5a15} /* Der Honigtopf muss für Bots im Quelltext stehen, für Menschen aber unsichtbar sein — und zwar so, dass auch Screenreader ihn nicht vorlesen. */ .zdt-honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .zdt-formular button[type=submit]{width:100%;background:var(--wp--preset--color--gruen-700); color:#fff;border:0;border-radius:9px;padding:1.05rem 2rem;font:inherit;font-weight:700; font-size:1.02rem;cursor:pointer;box-shadow:0 6px 18px rgba(79,119,34,.30); transition:background .18s,transform .15s} .zdt-formular button[type=submit]:hover{background:var(--wp--preset--color--gruen-700); transform:translateY(-1px)} .zdt-formular button[type=submit]:focus-visible{outline:3px solid var(--wp--preset--color--gruen); outline-offset:3px} .zdt-hinweis-klein{font-size:.82rem;color:var(--wp--preset--color--grau);margin:.9rem 0 0} /* ---------- Abschnitte ohne weisse Naht ---------- WordPress setzt zwischen die Bloecke im Inhalt einen Abstand von 24 px (--wp--style--block-gap). Zwischen zwei Abschnitten mit eigener Hintergrundfarbe wird daraus ein weisser Streifen quer ueber die Seite. Die Abschnitte dieser Startseite sollen aneinanderstossen; ihren Abstand regelt das Innenabstand-Polster in jedem Abschnitt selbst. */ .wp-block-post-content .alignfull{margin-block-start:0} /* Auf den Rechtsseiten sind die Kinder des Inhalts keine Abschnitte, sondern Ueberschriften und Absaetze. Die brauchen ihren Abstand — deshalb gilt die Regel oben nur fuer randlose Abschnitte. Vor einer Ueberschrift darf es etwas mehr Luft sein als zwischen zwei Absaetzen. */ .wp-block-post-content h2{margin-block-start:2.75rem} .wp-block-post-content h3{margin-block-start:2rem} .wp-block-post-content > *:first-child{margin-block-start:0} /* Das Formular etwas luftiger: kleinere Beschriftungsabstaende, flachere Felder. Bei 53 px Hoehe wirkte das Formular klobig. */ .zdt-formular{padding:2rem} .zdt-formular label{margin-bottom:.3rem} .zdt-formular input[type=text],.zdt-formular input[type=email], .zdt-formular input[type=tel],.zdt-formular select,.zdt-formular textarea{padding:.7rem .85rem} .zdt-formular textarea{min-height:104px} .zdt-formular button[type=submit]{padding:.95rem 2rem} /* ---------- FAQ kompakter ---------- Sechs Fragen sollen ueberblickbar sein, nicht eine halbe Bildschirmseite fuellen. Geschlossene Zeilen flacher, weniger Luft dazwischen. */ .zdt-faq{gap:.6rem} .wp-block-details summary{padding:.85rem 1.3rem} .wp-block-details > *:not(summary){padding:0 1.3rem 1.05rem} #faq{padding-top:4rem !important;padding-bottom:4rem !important} /* ---------- Formularfelder: Groessenberechnung ---------- Ohne diese Zeile rechnet der Browser bei Textfeldern Polsterung und Rahmen ZUSAETZLICH zur Breite von 100 % — die Felder ragen dann rund 29 px aus ihrer Rasterzelle heraus, ueberlappen die Nachbarspalte und stehen rechts weiter als Knopf und Zustimmungszeile. Auswahlfelder rechnen von Haus aus anders, deshalb waren ausgerechnet die buendig und alles wirkte schief. */ .zdt-formular :is(input,select,textarea,button){box-sizing:border-box} /* ---------- FAQ als zweispaltiges Raster ---------- Statt Aufklappen: alle Antworten stehen da. Sechs kurze Fragen sind zum Ueberfliegen da, nicht zum Anklicken — und was nicht klappt, kann auch nicht springen. */ .zdt-faq-raster{display:grid;gap:1.75rem 2.5rem; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))} .zdt-faq-raster h3{font-size:1.02rem;font-weight:700;margin:0 0 .45rem; color:var(--wp--preset--color--marine);line-height:1.35; padding-left:1.1rem;position:relative} .zdt-faq-raster h3::before{content:"";position:absolute;left:0;top:.5em; width:6px;height:6px;border-radius:50%;background:var(--wp--preset--color--gruen)} .zdt-faq-raster p{margin:0;padding-left:1.1rem;font-size:.95rem; color:var(--wp--preset--color--grau);line-height:1.6} /* ---------- Karten: Symbol und Aufbau ---------- Voller Markengruenton statt blassem Kasten: Die Karten standen vorher als vier gleich helle Textbloecke nebeneinander, ohne etwas, das das Auge festhaelt. Das Symbol ist jetzt der farbige Anker. */ .zdt-symbol{width:54px;height:54px;border-radius:14px; background-color:var(--wp--preset--color--gruen); background-repeat:no-repeat;background-position:center;background-size:26px 26px; margin:0 0 1.3rem;box-shadow:0 4px 12px rgba(79,119,34,.22)} /* Gleich hohe Karten: Die Merkmale sitzen unten buendig, egal wie lang der Beschreibungstext ist. Vorher endete jede Karte auf anderer Hoehe. */ .zdt-karten .wp-block-column{display:flex;flex-direction:column} .zdt-karten .wp-block-column > p:last-child{margin-top:auto;padding-top:1.2rem} /* Merkmale als eine ruhige Zeile statt als Pillenhaufen: drei umbrechende Kaestchen je Karte erzeugten zwei bis drei ausgefranste Reihen. */ .zdt-marker{display:inline;background:none;border:0;padding:0; font-size:.86rem;font-weight:600;color:var(--wp--preset--color--marine-700)} .zdt-marker + .zdt-marker::before{content:" · ";color:var(--wp--preset--color--gruen); font-weight:700} /* ---------- Symbole der Karten ---------- Die Symbole stehen hier und nicht im Seiteninhalt. Zwei Gruende: WordPress entfernt SVG beim Speichern, wenn der Bearbeiter nicht ausdruecklich unformatiertes HTML setzen darf — die Kaesten blieben dann leer. Und im Stylesheet kann der Kunde sie nicht versehentlich loeschen, waehrend er Texte pflegt. */ .zdt-symbol--ldpe{background-image:url("data:image/svg+xml,")} .zdt-symbol--hdpe{background-image:url("data:image/svg+xml,")} .zdt-symbol--bio{background-image:url("data:image/svg+xml,")} .zdt-symbol--druck{background-image:url("data:image/svg+xml,")} .zdt-symbol--reinigung{background-image:url("data:image/svg+xml,")} .zdt-symbol--gesundheit{background-image:url("data:image/svg+xml,")} .zdt-symbol--industrie{background-image:url("data:image/svg+xml,")} .zdt-symbol--handel{background-image:url("data:image/svg+xml,")} /* ---------- Sprungziele unter der klebenden Kopfzeile ---------- Die Kopfzeile bleibt beim Scrollen stehen und ist rund 78 px hoch. Ohne Abstand landet jeder Menue-Klick so, dass genau die Ueberschrift des Abschnitts dahinter verschwindet — man springt und sieht den Anfang nicht. */ /* Die Kopfzeile ist 79 px hoch. Ein Abstand von 96 px setzt zwar die Kante des Abschnitts sauber darunter — nur beginnt der Text erst nach dem Innenabstand des Abschnitts, also 88 px spaeter. Man landet dann vor einer leeren Flaeche und denkt, der Sprung habe nicht funktioniert. Der Abstand rechnet den Innenabstand deshalb heraus, damit die Ueberschrift selbst knapp unter der Kopfzeile steht. */ #produkte, #nachhaltigkeit, #branchen, #ablauf{scroll-margin-top:8px} #faq{scroll-margin-top:32px} #angebot{scroll-margin-top:-32px} #groessen{scroll-margin-top:96px} /* ---------- Tastaturbedienung ---------- Wer mit der Tabulatortaste navigiert, muss sehen, wo er ist. Bisher war das nur bei Knoepfen und Formularfeldern der Fall. */ a:focus-visible, summary:focus-visible, .wp-block-navigation a:focus-visible{ outline:3px solid var(--wp--preset--color--gruen);outline-offset:3px; border-radius:3px} .zdt-footer a:focus-visible{outline-color:var(--wp--preset--color--gruen)} /* ---------- Hinweis, dass die Tabelle seitlich scrollt ---------- Auf schmalen Schirmen ist die Vergleichstabelle breiter als der Schirm. Ohne Hinweis sieht man die HDPE-Spalte nie, weil nichts auf das Wischen hindeutet. Der weiche Schatten am rechten Rand tut genau das. */ @media(max-width:700px){ .zdt-tabelle{position:relative; background:linear-gradient(to right,#fff 70%,rgba(255,255,255,0)), linear-gradient(to right,rgba(16,32,58,.10),rgba(255,255,255,0) 14px) 100% 0; background-repeat:no-repeat;background-size:100% 100%,18px 100%; background-attachment:local,scroll} /* Der frühere Texthinweis „seitlich wischen“ stand auf der dunklen Kopfzeile und verdeckte dort die dritte Spaltenüberschrift. Er ist durch ein Sinnbild ersetzt: eine Fingerkuppe über einem Doppelpfeil. Das versteht man ohne Text und in jeder Sprache. Es sitzt unten in einem eigens freigehaltenen Streifen und verdeckt keine Zahl. In Weiss ging es auf der weissen Tabelle unter, deshalb das Gruen der Marke mit weisser Zeichnung. Die Raute der Farbe muss als %23 kodiert sein — doppelt kodiert (%2523) bliebe das Bild unsichtbar. */ .zdt-tabelle{padding-bottom:2.6rem} .zdt-tabelle::after{content:"";position:absolute;right:.75rem;bottom:.6rem; width:34px;height:34px;border-radius:50%;pointer-events:none; background-color:var(--wp--preset--color--gruen-700);background-image:url("data:image/svg+xml,"); background-repeat:no-repeat;background-position:center;background-size:21px 21px; box-shadow:0 3px 12px rgba(16,32,58,.30); animation:zdt-wisch 2.4s ease-in-out infinite} @keyframes zdt-wisch{ 0%,55%,100%{transform:translateX(0)} 70%{transform:translateX(-7px)} 85%{transform:translateX(0)} } } /* ---------- Druckfassung ---------- Ein Einkaeufer druckt so eine Seite aus, legt sie in die Angebotsmappe und telefoniert danach. Ohne Druckstile kommen dabei grossflaechig dunkelblaue Kaesten aufs Papier, das Menue steht mitten im Text und die Adresse hinter jedem Link fehlt. */ @media print{ html{scroll-behavior:auto} body{background:#fff;color:#000;font-size:11pt} .zdt-header, .zdt-footer, .wp-block-buttons, .zdt-formular, .wp-block-navigation, .wp-block-template-skip-link{display:none !important} .zdt-hero, .eco, .zdt-symbol, [class*="has-marine"], [class*="has-background"]{ background:none !important;background-image:none !important; color:#000 !important;box-shadow:none !important} .zdt-hero *, .eco *, [class*="has-marine"] *{color:#000 !important} .zdt-karten .wp-block-column, .branche, .zdt-tabelle, .wp-block-details{ border:1px solid #999 !important;box-shadow:none !important; break-inside:avoid;page-break-inside:avoid} .zdt-tabelle{overflow:visible} .zdt-tabelle table{min-width:0} h2, h3{break-after:avoid;page-break-after:avoid} /* Adressen ausschreiben — auf Papier nuetzt ein Link nichts, dessen Ziel man nicht lesen kann. Sprungmarken auf derselben Seite bleiben stumm. */ a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555} .zdt-faq-raster{grid-template-columns:1fr 1fr} } /* Symbole der 2026 hinzugekommenen Produktlinien */ .zdt-symbol--dose{background-image:url("data:image/svg+xml,")} .zdt-symbol--flasche{background-image:url("data:image/svg+xml,")} .zdt-symbol--deckel{background-image:url("data:image/svg+xml,")} .zdt-symbol--maschine{background-image:url("data:image/svg+xml,")} .zdt-symbol--versand{background-image:url("data:image/svg+xml,")} /* ---------- Hervorgehobene Karte ---------- Sechs gleich gestaltete Karten lassen das Auge nirgends landen. Die PET-Dosen sind die einzige Linie mit vollstaendigen Daten auf der Seite, deshalb bekommen sie einen ruhigen gruenen Rahmen und einen Verweis auf die Groessentabelle — Hervorhebung, die dem Leser etwas bringt, statt blosser Farbe. */ .zdt-karten .wp-block-column.zdt-hervor{ border-color:var(--wp--preset--color--gruen); box-shadow:0 2px 4px rgba(79,119,34,.10),0 14px 34px rgba(79,119,34,.14); position:relative;overflow:hidden} .zdt-karten .wp-block-column.zdt-hervor::before{ content:"";position:absolute;inset:0 0 auto 0;height:4px; background:linear-gradient(90deg,var(--wp--preset--color--gruen-700),var(--wp--preset--color--gruen))} .zdt-verweis{margin:0;padding-top:.9rem;font-size:.9rem;font-weight:650} .zdt-verweis a{color:var(--wp--preset--color--gruen-700);text-decoration:none; display:inline-flex;align-items:center;gap:.4rem} .zdt-verweis a::after{content:"";width:6px;height:6px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(-45deg);transition:transform .15s} .zdt-verweis a:hover{text-decoration:underline} .zdt-verweis a:hover::after{transform:rotate(-45deg) translate(2px,2px)} /* ---------- Kopfzeile auf kleinen Schirmen ---------- 170 px Logo nehmen auf einem 375-px-Schirm fast die halbe Breite ein und draengen die Menuetaste an den Rand. */ @media(max-width:600px){ .zdt-header .wp-block-site-logo img{width:132px} .zdt-header{padding-top:.6rem;padding-bottom:.6rem} } /* Ueberschriften der Karten nicht unter Fliesstextgroesse fallen lassen. Ohne eigene Untergrenze rechnet WordPress bei fluider Typografie eine sehr niedrige Mindestgroesse aus — auf dem Telefon waren die Kartentitel damit kleiner als der Text darunter. */ .zdt-karten h3, .zdt-faq-raster h3{font-size:clamp(1.08rem,1rem + .3vw,1.2rem)} /* ===================== Karten in jeder Breite ===================== WordPress zwingt .wp-block-columns oberhalb von 782 px auf flex-wrap:nowrap — mit !important. Sechs Karten quetschen sich dann in eine Reihe, statt umzubrechen. Alle sechs Karten stehen deshalb in EINEM Block, und die Zahl der Karten je Reihe bestimmt die Basisbreite: bis 700 px -> eine Karte je Reihe bis 1000 px -> zwei Karten je Reihe darueber -> drei Karten je Reihe */ .zdt-karten.wp-block-columns{flex-wrap:wrap !important;gap:1.5rem} .zdt-karten.wp-block-columns > .wp-block-column{ flex-basis:calc(33.333% - 1rem) !important;flex-grow:0;margin-left:0 !important} @media(max-width:1080px){ /* Tablet quer (rund 1024 px): drei Karten waeren nur 307 px breit — bei 28 px Polsterung bleiben davon 251 px Text. Zwei Karten lesen sich dort deutlich besser. */ .zdt-karten.wp-block-columns > .wp-block-column{flex-basis:calc(50% - .75rem) !important} } @media(max-width:700px){ .zdt-karten.wp-block-columns > .wp-block-column{flex-basis:100% !important} } /* ===================== Tablet ===================== Zwischen Telefon und Laptop war die Seite am schwaechsten: die Menueleiste klappt von Haus aus erst unter 600 px ein, darueber standen sechs Menuepunkte umgebrochen in einer 138 px hohen Kopfzeile. */ @media(max-width:1000px){ .zdt-header .wp-block-navigation__responsive-container-open{display:flex} .zdt-header .wp-block-navigation__responsive-container:not(.is-menu-open){display:none} /* Formular, Kontaktkasten, Ueber uns und Nachhaltigkeit untereinander, damit jeder Teil seine volle Breite bekommt. */ #angebot .wp-block-columns, #nachhaltigkeit .wp-block-columns{flex-wrap:wrap !important} #angebot .wp-block-column, #nachhaltigkeit .wp-block-column{ flex-basis:100% !important;margin-left:0 !important} #angebot .wp-block-column + .wp-block-column, #nachhaltigkeit .wp-block-column + .wp-block-column{margin-top:2.5rem} }