/* Nur für WordPress: was es in der Vorschau nicht gibt. Das Aussehen der Seite selbst steht in stil.css. */

/* Formular: der Absenden-Knopf ist in WordPress ein echter button (in der Vorschau ein Link), er sieht genauso aus */
button.knopf { border: 0; margin: 0; font: inherit; font-weight: 700; cursor: pointer; }
.formular-honig { display: none !important; }
.formular-meldung { margin: 0 0 1.5rem; max-width: 46rem; font-weight: 700; color: var(--tinte); }
.formular-meldung.fehler { color: var(--rot-tief); }
/* Turnstile: unsichtbar, solange Cloudflare keinen Klick braucht; dann steht das Kästchen über dem Knopf */
.cf-turnstile iframe { margin-bottom: 1rem; }
button.knopf:disabled { opacity: .7; cursor: progress; }

/* Farbe „Ruhig“ (Wunsch Frau Schmidt 04.11.2026, gewählt 05.11.2026; header.php setzt html.ruhig): Rot bleibt für
   Knöpfe und Hover, Text schwarz bzw. warmgrau, Symbole grau. Die Varianten Blau und Grün sind verworfen. */
html.ruhig h1 em { color: var(--grau-tief); }
html.ruhig .zahlen b, html.ruhig .navi details div a.alle, html.ruhig .mobilmenu__navi > a[aria-current],
html.ruhig .mobilmenu .unter .unter__alle { color: var(--tinte); }
html.ruhig .meldung time, html.ruhig .archiv time, html.ruhig .artikel > time, html.ruhig .artikel .stand,
html.ruhig .person .rolle, html.ruhig .mobilmenu__gruppe .winkel { color: var(--leise); }
html.ruhig .artikel li::marker { color: var(--grau); }
html.ruhig .weiter, html.ruhig .kontaktliste a, html.ruhig .mobilmenu__ort a, html.ruhig .artikel a:not(.knopf) { text-decoration-color: var(--grau); }
/* Symbole: sauberer Verlauf ohne Körnung und ohne Rot (die Körnung wirkte bei kleinen Symbolen fleckig) */
html.ruhig #verlauf stop:nth-child(1) { stop-color: #b3a5a6; }
html.ruhig #verlauf stop:nth-child(2) { stop-color: #8a7e7e; }
html.ruhig #verlauf stop:nth-child(3) { stop-color: #5e5454; }
html.ruhig #verlauf stop:nth-child(4) { stop-color: #3a3232; }
html.ruhig .ikon use, html.ruhig .ikon path, html.ruhig .ikon rect, html.ruhig .ikon circle { filter: none; }
/* Der große Zahn im Hero behält die Körnung, sonst wirkt er wie eine flache graue Fläche */
html.ruhig .buehne .ikon use, html.ruhig .buehne .ikon path { filter: url(#koernung); }
/* Zahn etwas weiter nach unten rechts, weg vom Gesicht (Alessio 05.11.2026), nur über 760 px */
@media (min-width: 761px) { html.ruhig .buehne .ikon { right: -2.75rem; bottom: -1%; } }
/* Sterne in Gold, wie man sie von Google kennt */
html.ruhig .sterne-reihe svg { fill: #e8a317; }
/* Häufige Fragen: Plus in Schwarz */
/* als SVG statt zwei Verläufen: die Verlaufsbalken landeten auf halben Pixeln und wirkten angeschnitten */
html.ruhig .fragen summary::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5v13M1.5 8h13' stroke='%232b2525' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 1rem 1rem no-repeat; }
/* Fuß: Kontaktsymbole weiß */
html.ruhig .fuss .kontaktliste svg { stroke: #fff; }
html.ruhig .fuss .kontaktliste use[href="#s-whatsapp"] { fill: #fff; }
/* Hero ohne roten Schein: Hintergrund neutral, Bildrahmen und Bewertungskasten von Hell- nach Dunkelgrau */
html.ruhig .wasch::before { background: radial-gradient(60% 75% at 82% 32%, #ebe5e2 0%, rgba(235, 229, 226, 0) 70%), radial-gradient(45% 55% at 6% 95%, #e6dedb 0%, rgba(230, 222, 219, 0) 70%), linear-gradient(180deg, #f3eeec 0%, var(--grund) 100%); }
html.ruhig .blob.farbe { background: linear-gradient(140deg, #ece4e2 0%, #cdc2c0 30%, #8a7e7e 65%, #4a4141 100%); }
/* WhatsApp-Knopf: dunkler Verlauf ohne roten Ausläufer, beim Darüberfahren nur heller statt rot */
html.ruhig .wa { background: linear-gradient(140deg, #6a5e5e 0%, #2b2525 70%); }
@media (hover: hover) and (pointer: fine) { html.ruhig .wa:hover { background: linear-gradient(140deg, #8a7e7e 0%, #4a4141 70%); } }
html.ruhig .sterne { background: linear-gradient(140deg, #8a7e7e 0%, #5e5454 55%, #2b2525 130%); }

/* Ablauf-Ziffern und Aufzählungspunkte grau */
html.ruhig .schritte li::before { background-image: var(--korn), linear-gradient(140deg, #b3a5a6, #6a5f5f 60%, #3a3232); }
html.ruhig .merkmale li::before { background: linear-gradient(140deg, #8a7e7e, #3a3232); }

/* Fotos ohne Körnung (Alessio 05.11.2026, die MC-Media-Fotos wirkten damit grießig); Flächen ohne Foto behalten sie */
.korn:has(> img)::after { content: none; }

/* Collage mit Bildwechsel: Safari (iPhone) schneidet das überblendende Bild nicht in die runde Form, man sah kurz Ecken
   (Alessio 05.11.2026). Bild selbst mit abrunden und den Rahmen per Maske zum Zuschneiden zwingen. */
.collage .foto { -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); }
.collage .foto img, .blob.foto img { border-radius: inherit; }

/* iOS legt beim Antippen ein halbtransparentes dunkles Feld über klickbare Elemente (FAQ und Logo blinkten, Alessio
   05.11.2026). Die Eigenschaft vererbt sich, deshalb einmal an der Wurzel; Rückmeldung geben die :hover/:active-Zustände. */
html { -webkit-tap-highlight-color: transparent; }
/* Falls iOS trotz format-detection etwas verlinkt: wie normaler Text, und in Flex-Listen keine eigene Spalte */
a[x-apple-data-detectors] { color: inherit; text-decoration: none; font: inherit; }
.merkmale li > a[x-apple-data-detectors] { display: contents; }

/* Partnerlogo statt Symbol in einer Karte (ZA bei „Ratenzahlung“): grau wie die Symbole, beim Darüberfahren in Farbe */
.partnerlogo { height: 4.5rem; margin-bottom: 1.1rem; display: flex; align-items: center; } /* so hoch wie .ikon, damit die Überschriften auf einer Linie stehen */
.partnerlogo img { display: block; height: 3.25rem; width: auto; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.karte:hover .partnerlogo img { filter: none; opacity: 1; }
/* Partnerkarte unter „Unser Partner“: Logo, Name und Link untereinander */
.logos li > p { margin: 0; text-align: center; color: var(--tinte); }
.logos li > img + p { margin-top: .9rem; }
.logos li > p + p { margin-top: .5rem; }

/* Cookie-Hinweis (Complianz) in der Schrift der Seite */
.cmplz-cookiebanner, #cmplz-manage-consent .cmplz-manage-consent { font-family: inherit; }