/* CoupleMinutes - Grundlagen * * Alles, was jede Seite braucht: Reset, Typografie, Bahn, Knoepfe. * Ausschliesslich in Tokens notiert - es steht hier kein Farbwert und * keine Schriftgroesse als Zahl. * * Kopf- und Fusszeile stehen NICHT hier, sondern in kopf-fuss.css. * * WER HIER ETWAS AENDERT, aendert es fuer die ganze Seite. Abschnitts- * eigene Gestaltung gehoert in eine eigene Datei je Abschnitt, sobald es * die ersten gibt - nicht hierher. * * Die Reihenfolge im Ladevorgang ist: tokens.css, DIESE DATEI, * bestand.css, kopf-fuss.css. Das uebernommene Customizer-CSS kommt also * NACH den Grundlagen und kann sie ueberschreiben - dort stehen die * gewachsenen Feinheiten der bestehenden Seite. Kopf und Fuss stehen * zuletzt, weil sie vollstaendig abgeloest sind und sich von den * Altlasten nichts mehr sagen lassen muessen. */ /* ========================================================================== 1. Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--cm-color-surface); color: var(--cm-color-ink); font: var(--cm-text-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas { display: block; max-width: 100%; height: auto; } /* SVG STEHT HIER ABSICHTLICH NICHT MEHR. * * Bis zum 27.08.2026 war es dabei - und hat jedes eingebettete SVG im * Seiteninhalt umgestellt, also auch die von Elementor. Sichtbar wurde das * am FAQ-Akkordeon: dessen zwei Zeichen sind unterschiedlich geschnitten, * 12x7 fuer "offen" und 7x12 fuer "geschlossen". Mit "height: auto" und * einer von aussen gesetzten Breite von 12px wurde aus dem geschlossenen * Zeichen ein 12x20-Balken - das Chevron sass schief und wirkte kaputt. * * Dasselbe gilt fuer die Sternebewertungen, die Symbole der Icon-Boxen und * jedes weitere Inline-SVG, das ein Plugin ausliefert. Ein Reset darf * Fremdmarkup nicht nachtraeglich umbauen. * * Eigene SVG bekommen ihre Masse dort, wo sie benutzt werden - etwa * .cm-p-merkmale__symbol in produkt.css. */ button, input, select, textarea { font: inherit; color: inherit; } /* Bewegung nur, wo sie gewuenscht ist. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 2. Typografie ========================================================================== */ h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: var(--cm-weight-regular); text-wrap: balance; } h1 { font: var(--cm-text-h1); } h2 { font: var(--cm-text-h2); } h3 { font: var(--cm-text-h3); } h4 { font: var(--cm-text-h4); } h5 { font: var(--cm-text-h5); } h6 { font: var(--cm-text-h6); } p { margin: 0 0 1em; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } /* Sichtbarer Fokus. Der Vorgabe-Umriss verschwindet in manchen Browsern fast; ohne ihn ist die Seite mit der Tastatur nicht bedienbar. */ :focus-visible { outline: 2px solid var(--cm-color-signal); outline-offset: 2px; } /* Auf kleinen Bildschirmen sind 55px Ueberschrift zu viel. Die Tokens halten den Entwurfswert; hier wird er verkleinert, ohne ihn zu verlieren. */ @media (max-width: 780px) { h1 { font-size: calc(var(--cm-size-h1) * 0.62); line-height: 1.1; } h2 { font-size: calc(var(--cm-size-h2) * 0.66); line-height: 1.15; } h3 { font-size: calc(var(--cm-size-h3) * 0.78); line-height: 1.2; } } /* ========================================================================== 3. Bahn - die zentrierte Inhaltsspalte ========================================================================== */ .cm-bahn { width: 100%; max-width: var(--cm-content-width); margin-inline: auto; padding-inline: 20px; } .cm-main { display: block; min-height: 40vh; } /* Sprungmarke fuer die Tastaturbedienung. Sichtbar erst beim Fokus. */ .cm-skip { position: absolute; left: -9999px; z-index: 100000; padding: 12px 20px; background: var(--cm-color-ink); color: var(--cm-color-surface); text-decoration: none; } .cm-skip:focus { left: 12px; top: 12px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* ========================================================================== 4. Kopf- und Fusszeile: stehen in kopf-fuss.css ========================================================================== Sie sind Nachbauten der Elementor-Vorlagen 68 und 72, mit Massen, die aus deren erzeugtem CSS abgelesen sind. Das ist genug Stoff fuer eine eigene Datei - und diese hier soll die Grundlagen enthalten, nicht die Bauteile. ========================================================================== */ /* ========================================================================== 5. Knoepfe ========================================================================== */ /* Knoepfe: Pillenform, 17px fett, Textfarbe als Grund. * * --------------------------------------------------------------------- * WARUM DIE WOOCOMMERCE-AUSWAHLLISTE MIT DABEISTEHT * * WooCommerce bringt eine vollstaendige eigene Knopfgestaltung mit, und * ihre Auswahlliste ist spezifischer als eine einzelne Klasse: * * .woocommerce a.button.alt -> drei Klassen und ein Element * .cm-amazon-button -> eine Klasse * * Der Amazon-Knopf stand deshalb bis zum 27.08.2026 auf Staging in * WooCommerce-LILA (#7f54b3) statt in der Signalfarbe - obwohl die Regel * dafuer richtig hier stand. Sie hat nur nie gewonnen. * * WooCommerce hat fuer genau diesen Fall einen Ausstieg: die Koerperklasse * woocommerce-block-theme-has-button-styles schaltet den ganzen Satz ab. * Sie wird hier BEWUSST NICHT benutzt - an ihr haengen auch der Wartekreis * beim Hinzufuegen zum Warenkorb und das Haekchen danach. Die abzuschalten * waere ein Nebeneffekt, den niemand bestellt hat. * * Stattdessen dieselbe Spezifitaet und die spaetere Stelle: assets werden * mit Prioritaet 20 eingereiht, WooCommerce mit 10 - unsere Regel steht * also weiter unten und gewinnt bei Gleichstand. */ .button, button, input[type="submit"], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit, .woocommerce #respond input#submit.alt { display: inline-block; padding: 15px 45px; border: 0; border-radius: var(--cm-radius-pill); background: var(--cm-color-ink); color: var(--cm-color-surface); font: var(--cm-text-button); text-align: center; text-decoration: none; cursor: pointer; } .button:hover, button:hover, input[type="submit"]:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit:hover, .woocommerce #respond input#submit.alt:hover { background: var(--cm-color-ink); color: var(--cm-color-surface); opacity: 0.8; } /* ========================================================================== Elementors Kit faerbt h1-h6 UND a - staerker als eine einzelne Klasse ========================================================================== post-41.css setzt: .elementor-kit-41 a color: primary (0,1,1) .elementor-kit-41 h1..h6 color: primary (0,1,1) Eine Regel dieses Themes mit nur EINER Klasse - .button, .cm-s-hero__titel - kommt auf (0,1,0) und verliert. Sichtbar wurde das am 27.08.2026 an zwei Stellen der Startseite: die weisse Ueberschrift auf dem Kopfbild kam in der Textfarbe heraus, und der Knopf "Find out more" stand als dunkle Schrift auf dunklem Grund - eine leere Pille. Ueberschriften sind einzeln hochgeruestet (Abschnittsklasse davor). Knoepfe gehen HIER ueber eine Regel, weil sie ueberall vorkommen und ALLE dieselbe Textfarbe wollen: weiss auf farbigem Grund. Es gibt im Theme keinen Knopf, der etwas anderes will - nachgezaehlt. body[class*="elementor-kit-"] statt der festen 41: das Gegenmittel lebt und stirbt mit dem Gift. Ist Elementor abgeschaltet, traegt der Koerper die Klasse nicht mehr, und die Regel greift nicht mehr - dann gibt es aber auch die Kit-Regel nicht mehr, gegen die sie steht. ========================================================================== */ body[class*="elementor-kit-"] a.button { color: var(--cm-color-surface); } /* Der Amazon-Knopf. Er ersetzt ueberall den Kaufknopf - Produktseite wie Uebersicht - und traegt deshalb die Signalfarbe, nicht die Textfarbe. Die WooCommerce-Fassung steht daneben, siehe oben. */ .cm-amazon-button, .woocommerce a.button.cm-amazon-button, .woocommerce a.button.alt.cm-amazon-button { background: var(--cm-color-signal); color: var(--cm-color-surface); } .cm-amazon-button:hover, .woocommerce a.button.cm-amazon-button:hover, .woocommerce a.button.alt.cm-amazon-button:hover { background: var(--cm-color-signal); color: var(--cm-color-surface); opacity: 0.8; } .cm-amazon { margin: 20px 0; } /* ========================================================================== 6. Einzelteile ========================================================================== */ .cm-seite__kopf { padding-top: 40px; } .cm-beitrag { padding-block: 24px; border-bottom: 1px solid var(--cm-color-tint-blush); } .cm-404 { padding-block: 80px; text-align: center; } .cm-404__wege { display: flex; justify-content: center; gap: 16px; margin-block: 28px; } .cm-blaettern { display: flex; gap: 12px; justify-content: center; padding-block: 32px; } /* ========================================================================== Trenngrafiken zwischen den Abschnitten ========================================================================== cm_trenner() gibt eine geschwungene SVG-Kante aus. Die Startseite benutzt sie viermal, die Produktseite zweimal - die Regeln gehoeren deshalb HIERHER und nicht in eine seitenweise geladene Datei. Genau das war am 27.08.2026 der Fehler: sie standen in produkt.css, und auf der Startseite lagen die Wellen ohne jede Regel da. DIE GRAFIKEN SIND EINFARBIGE FORMEN AUF DURCHSICHTIGEM GRUND - nachgesehen, nicht angenommen: home-dreierpack-top-1.svg 1204x124 #F79E4B (Signal) home-rezensionen-top.svg 1201x114 #E9795E (Koralle) home-rezensionen-bottom.svg 1201x127 #E9795E (Koralle) Sie tragen also die Farbe des Abschnitts, in den sie hineinfliessen, und muessen ueber die VOLLE Breite laufen. In ihrer Eigenbreite von 1201px enden sie auf einem breiteren Fenster mittendrin, und die Farbflaeche darunter setzt hart an - genau das war zu sehen. Die 10px Ueberbreite mit 6px Versatz nach links sind kein Zierrat: die Formen ragen in ihrer eigenen Zeichenflaeche ueber den Rand hinaus (der Dreierpack-Trenner ist 1204 statt 1200 Einheiten breit), und ohne den Ueberstand blitzt an den Seiten eine Haarlinie durch. Im Original steht dasselbe, dort je Grafik mit 4px bzw. 6px; hier ein Wert fuer alle. Beschnitten wird es vom overflow-x der Seite. ========================================================================== */ .cm-trenner { /* line-height 0: ein ist zeileninhalt und saesse sonst auf der Grundlinie - darunter blieben ein paar Pixel Grund stehen. */ line-height: 0; /* Nach OBEN 1px, nach UNTEN 3px ueberlappen. * * Die -1px oben sind nicht dieselben wie die am Bild darunter, auch * wenn beide gleich aussehen. Sie decken zwei verschiedene Faelle: * * hier - dass zwischen zwei Kaesten ueberhaupt eine LUECKE * entsteht. Firefox rundet Kastenkanten auf ganze * Geraetepixel; liegen zwei Kanten auf einem Bruchteil, * bleibt dazwischen eine Reihe unbemalt, und da scheint der * Seitengrund durch. Ueberlappen sich die Kaesten, kann das * nicht passieren. * * Bild - dass die durchsichtige oberste Reihe der GRAFIK den * Hintergrund dieses Abschnitts sehen laesst. */ margin-top: -1px; margin-bottom: -3px; } /* DIE -1px GEHOEREN AN DAS BILD, NICHT AN DEN ABSCHNITT. * * Der Unterschied ist der ganze Punkt. Die Wellenform beginnt in ihrer * Zeichenflaeche nicht bei 0, sondern bei 0.5 - die oberste Pixelreihe * der Grafik ist also durchsichtig, und die Kante darunter ist * kantengeglaettet, also halb deckend. Sichtbar wird dort, was HINTER * der Grafik liegt: der Hintergrund des Trennabschnitts. * * Zieht man den ganzen ABSCHNITT hoch, wandert sein Hintergrund mit - * der helle Streifen bleibt. Am 28.08.2026 genau so gemessen: erst weiss, * nach dem Einfaerben des Abschnitts pfirsichfarben, aber immer da. * * Zieht man das BILD hoch, liegt seine durchsichtige Reihe ueber dem * Abschnitt DARUEBER - und der ist genau die Farbe, aus der die Welle * herausfliesst. Der Streifen verschwindet. * * So steht es auch im Original: margin: -1px 0px 0px 0px an der * Bildkachel, nicht am Container. */ .cm-trenner img { display: block; width: calc(100% + 10px); max-width: none; height: auto; margin-top: -1px; margin-left: -6px; }