/* Korrekturen für Handy-Ansicht und Barrierefreiheit angelegt 24.08.2026 – bewusst getrennt vom erzeugten Stylesheet, damit sich alles jederzeit wieder entfernen lässt */ /* 1) Der Browser gibt
von Haus aus 40px Rand links und rechts. Auf dem Handy schob das die Ergebniskarten aus dem Bild. */ figure.result-card { margin-left: 0; margin-right: 0; } /* 2) Lange deutsche Wörter wie "Kopfhautpigmentierung" konnten nicht umbrechen und haben die Seite breiter gemacht als den Bildschirm. */ h1, h2, h3, h4, h5, p, li, dt, dd, figcaption, blockquote, address { overflow-wrap: break-word; hyphens: auto; /* Erst ab 14 Buchstaben trennen. Sonst wird aus "gemacht" ein "ge-macht" – das sieht in einer Überschrift schrecklich aus. Lange Wörter wie "Kopfhautpigmentierung" werden weiter getrennt. */ hyphenate-limit-chars: 14 5 4; } /* 3) Rasterfelder dürfen schmaler werden als ihr längster Inhalt. Ohne das sprengt ein einziges langes Wort das ganze Layout. */ .overview-grid > *, .results-grid > *, .gallery-page-grid > *, .training-grid > *, .related-grid > *, .values-grid > *, .process-grid > *, .benefit-grid > *, .faq-grid > * { min-width: 0; } /* Nur Textspalten dürfen schrumpfen – Bildkästen NICHT, sonst fallen sie auf 0 Pixel zusammen (passierte dem Porträt bei "Über mich"). */ .treatment-hero-copy, .about-copy, .story-copy, .academy-intro-copy, .contact-cta-inner > div { min-width: 0; } /* 4) Sichtbarer Rahmen bei Bedienung über die Tastatur. Für Mausnutzer ändert sich nichts (:focus-visible). */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } .site-header a:focus-visible, .page-hero a:focus-visible, .home-hero a:focus-visible, .treatment-hero a:focus-visible, .section-dark a:focus-visible, .site-footer a:focus-visible, .contact-cta a:focus-visible { outline-color: var(--champagne); } /* ============================================================ Paket 2 – Lesbarkeit, Kontrast, Tippziele (24.08.2026) ============================================================ */ /* --- Farben, die den Kontrastwert 4.5:1 erreichen --- Das Gold #bd8b3d hat auf Cremeweiß nur 2,7:1 und ist damit für kleine Schrift zu schwach. Drei abgestufte Töne: */ :root{ --gold-lesbar: #855e21; /* kleine Schrift auf hellem Grund 4,7:1 */ --gold-gross: #a87a2f; /* große Schrift ab 24px 3,4:1 */ --gold-flaeche: #946d27; /* Flächen mit weißer Schrift 4,6:1 */ --taupe: #6f6458; /* Fließtext, vorher #887d70 5,2:1 */ } /* Kleine goldene Schrift auf hellem Grund */ .eyebrow:not(.eyebrow--light), .card-kicker, .overview-card > p, .related-grid a > span, .training-card > span, .academy-days span, .contact-detail-row > span, .training-card > a { color: var(--gold-lesbar); } /* Große goldene Schrift – Auszeichnungen in Überschriften, Preise */ h1 em, h2 em, h3 em, .preisliste dd { color: var(--gold-gross); } /* Goldene Flächen mit weißer Schrift */ .button--gold, .mobile-booking { background: var(--gold-flaeche); } .button--gold:hover { background: var(--gold-lesbar); } /* Zu blasse helle Schrift auf dunklem Grund */ .breadcrumbs { color: #f7f3ecb0; } .hero-scroll { color: #f7f3ec99; } .footer-bottom { color: #f7f3ecab; } /* --- Schriftgrößen: nichts unter 11px --- 9px liest niemand mehr bequem, der über 40 ist. */ .hero-signature span, .trust-grid span, .card-kicker, .overview-card > p, .related-grid a > span, .studio-address-card > span, .contact-cta-actions .text-link, .footer-title, .footer-bottom, .training-card > span, .academy-days span, .training-price small, .contact-detail-row > span, .breadcrumbs, .result-card figcaption small, .button--small { font-size: 11px; } .card-link, .studio-address-card a, .training-price span, .training-card > a { font-size: 12px; } .hero-scroll { font-size: 10px; } .hero-seal small { font-size: 9px; } .mobile-menu-panel .mobile-sub-link { font-size: 13px !important; } /* --- Tippziele: mindestens 44px hoch --- Gilt nur für Geräte, die mit dem Finger bedient werden. Auf dem Desktop bleibt alles wie es ist. */ @media (pointer: coarse){ .mobile-menu-panel .mobile-sub-link { padding: 13px 0 13px 20px !important; } .site-footer address a, .footer-links a, .collage-links a, .text-link, .card-link, .studio-address-card a, .training-card > a, .legal-copy a { min-height: 44px; display: inline-flex; align-items: center; } } /* --- Nachtrag: goldene Flächen und weitere Fundstellen --- */ /* Der Kontakt-Aufruf steht komplett auf Gold. Weiße Schrift darauf erreichte nur 3:1 – der Farbton wird eine Spur tiefer. */ .contact-cta { background: var(--gold-flaeche); } .contact-cta .eyebrow--light, .contact-cta .text-link--light { color: var(--white); } .contact-cta .text-link--light { border-bottom-color: #fffdf9a6; } /* Weitere Stellen, die das helle Gold benutzen */ .stimmen-sterne, .collage-links a { color: var(--gold-lesbar); } blockquote, .story-copy blockquote { color: var(--gold-gross); } /* --- Feinschliff --- */ /* Die Schrittzahlen 01/02/03 sind 18px groß und brauchen 4,5:1 */ .benefit-list > div > span, .process-grid article > span { color: var(--gold-lesbar); } /* Kundenstimmen: goldener Text, aber klein – dunklerer Ton */ .stimmen-gitter blockquote, .stimmen-gitter blockquote p, .stimmen-gitter cite { color: var(--gold-lesbar); } /* Auf der DUNKLEN Academy-Karte wirkt dunkles Gold umgekehrt. Dort bleibt es hell. */ .training-card--dark > span, .training-card--dark > a { color: var(--champagne); } .training-card--dark .training-price span, .training-card--dark .training-price small, .training-card--dark p { color: #f7f3ecc4; } /* Zwei letzte Fundstellen auf dunklem Grund */ .contact-cta p:not(.eyebrow) { color: #fff; } .section-dark .academy-days span, .academy-path .academy-days span { color: var(--champagne); } /* --- Porträt im Aufmacher deutlich größer (24.08.2026) --- Vorher 196x236 am Rechner und nur 125x150 auf dem Handy – da war Monika kaum zu erkennen. Position bleibt gleich. */ .hero-image-detail { width: 250px; height: 300px; } @media (max-width: 820px){ .hero-image-detail { width: 200px; height: 240px; } } @media (max-width: 620px){ .hero-image-detail { width: 172px; height: 208px; } } /* --- Porträt bei "Über mich" war auf dem Handy unsichtbar --- Die Vorlage setzt dort `margin:0 auto`. Dadurch schrumpft der Kasten auf seinen Inhalt – und der ist rechnerisch null breit, weil das Bild absolut positioniert ist. Eine Breite genügt. */ .about-portrait, .story-portrait, .academy-intro-image, .contact-photo { width: 100%; }