/* ===================================================================== einseitig.css – die Brücke zwischen styles.css und m/mobile.css Beide bestehenden Stylesheets bleiben unverändert. Sie sind im über das media-Attribut getrennt: styles.css ab 641 px, mobile.css bis 640 px. Weil sich ihre Regeln niemals gleichzeitig anwenden, dürfen sie dieselben Klassennamen benutzen. Hier steht nur, was keine der beiden Dateien wissen kann: 1. welche Bausteine in welcher Ansicht sichtbar sind 2. wie sich Markup verhält, das eine Seite bisher nicht kannte (Bildwechsler am Rechner, Vertrauenskarten auf dem Handy, Technologiekarten mit Bild und Video im selben Element) ===================================================================== */ /* ---------- Sichtbarkeitsschalter ---------- */ @media (max-width: 640px){ .only-desktop{display:none !important;} } @media (min-width: 641px){ .only-mobile{display:none !important;} } /* Symbolvorrat nimmt keinen Platz ein */ .sprite{position:absolute;width:0;height:0;overflow:hidden;} /* ---------- [hidden] muss display schlagen ---------- .dc-card und andere Bausteine setzen display:grid bzw. display:flex. Eine Klassenregel gewinnt gegen das [hidden]-Attribut aus dem Browser-Stylesheet, deshalb blendete die Dokumentsuche im Download-Center nichts aus – auf beiden Ansichten. */ [hidden]{display:none !important;} /* ---------- Sprungmarke ---------- Wer mit der Tastatur ankommt, musste bisher durch sechzig Menüpunkte tabben, bevor der Inhalt kam. Die Marke ist unsichtbar, bis sie den Fokus bekommt. */ .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;} .skip-link:focus{left:12px;top:12px;z-index:200;width:auto;height:auto; padding:11px 18px;border-radius:999px;background:#1E2A24;color:#F3F5EF; font:600 14px/1 'Inter',system-ui,sans-serif;text-decoration:none; box-shadow:0 10px 24px -12px rgba(30,42,36,.6);} /* ---------- Lange Wörter brechen ---------- Deutsche Komposita wie „Zahnfleischrekonstruktionen“ sind breiter als 375 px und liefen rechts aus dem Bild. Der Umbruch allein genügt, damit nichts mehr abgeschnitten wird. */ h1,h2,h3,h4,.eyebrow,.kr-job h3,.dc-card h3{overflow-wrap:break-word;} /* Einen echten Trennstrich gibt es nur dort, wo der Browser die Trennung auch begrenzen kann: erst ab 14 Zeichen, und nie weniger als fünf Buchstaben je Zeile. Sonst würde aus „Darmstadt“ ein „Darm-stadt“. Browser ohne hyphenate-limit-chars bleiben beim reinen Umbruch. */ @supports (hyphenate-limit-chars: 14 5 5){ h1,h2,h3,h4,.kr-job h3,.dc-card h3,.tcard p{ hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:14 5 5;} } /* ===================================================================== HANDY (bis 640 px) ===================================================================== */ @media (max-width: 640px){ /* --- Gerüst: die .wrap-Container des Desktops sind hier neutral --- */ .wrap{max-width:none;margin:0;padding:0;} /* --- Strichsymbole aus dem Desktop-Markup: sie tragen weder die Klasse .icon noch eine Größenangabe, mobile.css kennt sie also nicht und sie würden in voller SVG-Standardgröße erscheinen. --- */ main svg:not([width]):not(.icon):not(.g):not(.gm):not(.arch):not(.hero-arc){ width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;} .back svg{width:15px;height:15px;} .btn svg:not(.icon){width:18px;height:18px;} /* --- Hero: Bildausschnitte je Foto (früher inline im /m/-Markup) --- */ #hero-slides .slide:nth-child(1) .pic{object-position:26% 50%;} #hero-slides .slide:nth-child(2) .pic{object-position:50% 40%;} #hero-slides .slide:nth-child(3) .pic{object-position:50% 50%;} #hero-slides .slide:nth-child(4) .pic{object-position:50% 50%;} /* --- Hero-Knöpfe: gemeinsames Markup mit dem Desktop. Dort sitzt die Beschriftung in /, hier zählt nur die Hauptzeile. --- */ .btn .cbtn-tx{display:block;text-align:left;} .btn .cbtn-tx small{display:none;} .btn .cbtn-tx strong{font-weight:600;font-size:15px;} .btn-arrow .cbtn-tx{margin-right:auto;} .hero-cta-row .btn .cbtn-tx strong{font-size:14px;} /* --- Vertrauen: am Rechner eine Dreierreihe, hier drei Karten --- */ #vertrauen .trust-grid{display:grid;gap:12px;} #vertrauen .trust-card{padding:18px 16px 16px;text-align:center;} #vertrauen .trust-illo{height:116px;width:auto;max-width:80%;object-fit:contain;margin:0 auto 12px;} #vertrauen .trust-divider{width:48px;height:2px;border-radius:2px;margin:0 auto 12px; background:linear-gradient(90deg,var(--sand),var(--sand-deep));} #vertrauen .trust-card h3{font-size:16px;} #vertrauen .trust-card p{margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--muted);} /* --- Technologie: Wischreihe. Die Kachel zeigt Videoschleife und Kurzzeile, der Fließtext des Desktops bleibt hier verborgen. --- */ .service-card-media{position:absolute;inset:0;} .service-card-body p, .service-card-body .service-more{display:none;} .thumb-cap h3{font-size:12px;font-weight:600;line-height:1.25;} .thumb-cap small{display:block;} /* --- Zahnarzt Darmstadt: der Desktop-Zweispalter wird zum Stapel --- */ .local-grid{display:block;} /* --- Team --- */ .team-photo-wrap{margin:0 var(--pad);} /* ===================================================================== Seitentypen: das Desktop-Markup hat Zwischenebenen und Klassennamen, die mobile.css nicht kennt. Hier steht nur, was dort fehlt. ===================================================================== */ /* Abschnittsköpfe des Desktops: der Zierbogen entfällt, der Text bekommt denselben Rand wie der übrige Inhalt */ .section-head{padding:0 var(--pad);} .section-head > svg{display:none;} /* Impressum, Datenschutz: die Telefonzeile aus dem Desktop-Kopf entfällt, die Nummer steht auf dem Handy in der Leiste am unteren Rand */ .page-head .legal-phone-note{display:none;} /* Sprach-Chips: im Desktop-Markup steckt die Fahne als eigenes span im Chip */ .chips .flag{min-height:0;padding:0;background:none;border:0;border-radius:0;} /* Werdegang: Jahr, Titel und Text stehen nebeneinander statt in zwei Spalten */ .timeline .wg-item{grid-template-columns:78px 1fr;} .timeline .wg-item .wg-year{grid-row:1 / span 2;} .timeline .wg-item h3,.timeline .wg-item p{grid-column:2;} .wg-timeline-head svg{display:none;} /* Praxisimpressionen: jedes Bild steckt in einem .pg-item */ .gallery .pg-item{break-inside:avoid;} /* Leistungsübersicht: ohne Pfeilspalte bleibt eine Spalte */ .svc-list a{grid-template-columns:1fr;} /* Team: Foto und Angaben liegen je eine Ebene tiefer als in der Mobilfassung */ .tcard .team-member-photo,.tcard .team-member-info{display:contents;} .tcard .spoken-langs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 4px 0; font-size:11.5px;color:var(--muted);} .tcard .spoken-langs-label{display:none;} .tcard .spoken-lang{display:inline-flex;align-items:center;gap:3px;} /* Kontaktseite: die Karten des Desktops bekommen das Zeilenbild der Kontaktkarte (Kreis-Icon links, Bezeichnung und Wert rechts) */ .kontakt-cards{display:grid;gap:8px;padding:14px var(--pad) 0;} .kontakt-card{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center; padding:12px 14px;border-radius:var(--r-sm);background:var(--raised); border:1px solid rgba(30,42,36,.08);box-shadow:var(--raised-shadow);} .kontakt-card .icon-circle{grid-row:1 / span 2;width:38px;height:38px;border-radius:50%; background:#FFFFFF;border:1px solid rgba(30,42,36,.1); display:flex;align-items:center;justify-content:center;} .kontakt-card .icon-circle svg{width:18px;height:18px;} .kontakt-card h4{grid-column:2;font-size:11px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);} .kontakt-card a,.kontakt-card p,.kontakt-card span{grid-column:2;font-size:14.5px; font-weight:600;color:var(--text);} .kontakt-directions{padding:26px var(--pad) 0;} .kontakt-directions h2{font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:22px;} .directions-intro{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.55;} .direction-item{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start; margin-top:10px;padding:12px 14px;border-radius:var(--r-sm);background:var(--raised); border:1px solid rgba(30,42,36,.08);} .direction-icon{width:38px;height:38px;border-radius:50%;background:#FFFFFF; border:1px solid rgba(30,42,36,.1);display:flex;align-items:center;justify-content:center;} .direction-icon svg{width:18px;height:18px;} .direction-text h3{font-size:14.5px;} .direction-text p{margin-top:2px;font-size:13px;color:var(--muted);line-height:1.45;} .kontakt-map-wrap{margin:16px var(--pad) 0;border-radius:var(--r);overflow:hidden; border:1px solid rgba(30,42,36,.1);} .kontakt-map-wrap img,.kontakt-map-wrap iframe{width:100%;display:block;} .kontakt-hero-actions{display:flex;flex-direction:column;gap:10px;padding:14px var(--pad) 0;} /* Kontaktseite, Fragen: das Aufklapp-Zeichen kommt am Rechner aus styles.css */ .faq-list summary::after{content:"+";font:300 24px/1 'Fraunces',Georgia,serif;color:var(--sand);} .faq-list details[open] summary::after{content:"\2013";} /* Downloadseite: die Kachel des Desktops wird zur Listenzeile */ .dc-facts{display:flex;flex-wrap:wrap;gap:6px 16px;padding:12px var(--pad) 0; font-size:13px;color:var(--muted);} .dc-section-head{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start; padding:26px var(--pad) 0;} .dc-num{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:26px;line-height:1; color:var(--sand);} .dc-section-head h2{font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:22px; line-height:1.15;} .dc-section-head p{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.5;} .dl-card{grid-template-columns:56px 1fr;align-items:start;} .dl-card .cover{grid-row:1 / span 2;} .dl-card .dc-pages{display:none;} .dl-card .dc-body{min-width:0;} .dl-card .dc-body p{margin-top:4px;font-size:12px;color:var(--muted);line-height:1.45;} .dl-card .dc-actions{grid-column:2;display:flex;align-items:center;flex-wrap:wrap; gap:8px;margin-top:8px;} .dl-card .dc-dl{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px; border-radius:999px;background:var(--sand);color:var(--on-sand); font-size:12.5px;font-weight:600;} .dl-card .dc-dl svg{width:14px;height:14px;stroke:var(--on-sand);} .dl-card .dc-view{display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);} .dl-card .dc-size{font-size:11.5px;color:var(--muted);} .dc-howto-head,.dc-note,.dc-empty{padding-left:var(--pad);padding-right:var(--pad);} .dc-howto-head h2{font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:22px; margin-top:6px;} /* ===================================================================== Landingpages (Implantate, Zahnreinigung, Philosophie, Kinderzahnarzt) Sie bringen zahnimplantate.css mit – ein in sich geschlossenes und bereits responsives Stylesheet mit eigenen Farbtoken. Statt das Layout nachzubauen, werden hier nur seine Grundfarben auf die Handy-Palette gestellt. Die abgeleiteten Token (--bg, --card, --accent …) hängen per var() daran und ziehen von selbst mit. ===================================================================== */ :root{ --cream:#E6E9E2; --cream-deep:#DDE2D8; --white:#F3F5EF; --ink:#1E2A24; --ink-deep:#101613; --ink-soft:#5C6A62; --blue:#2B3B33; --blue-light:#5E7A6B; --leather:#B5673F; --line:rgba(30,42,36,.12); --radius-lg:22px; --radius-md:16px; } /* Der Verlaufshintergrund der Landingpages hat eine höhere Spezifität als die Grundregel aus mobile.css – hier gewinnt wieder der ruhige Ton. */ :root:not([data-theme="dark"]) body{background:var(--bg);} body::before{display:none;} /* --- Hero: auf dem Handy steht das Foto ÜBER dem Text, nicht dahinter --- Am Rechner läuft der Text über das Bild, links abgedunkelt durch einen Verlauf. Auf dem schmalen Schirm ginge das nicht auf: die Überschrift läge mitten im Motiv. Die frühere /m/-Fassung hat das Foto deshalb oben abgesetzt und nach unten weich auslaufen lassen; genau das stellen diese Regeln mit dem Desktop-Markup her. */ .imp-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end; min-height:100svh;padding:0 0 26px;overflow:hidden;background:var(--bg);} .imp-hero .imp-hero-bg{position:absolute;top:0;left:0;width:100%;height:auto; aspect-ratio:1.075;object-fit:cover; -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%);} /* Der Verlauf liegt über dem ganzen Hero – oben ein Hauch, in der Mitte klar, nach unten in den Seitengrund. Exakt die Werte der früheren /m/-Fassung (.hero-shade in mobile.css, Farbwelt „Salbei hell"). */ /* Bildausschnitt der Übersichtsseite wie in der früheren Mobilfassung (zahnimplantate.css setzt am Rechner einen anderen Ausschnitt) */ .imp-hero-bg[src$="hero-uebersicht.webp"]{object-position:72% 20%;} .imp-hero .imp-hero-grad{display:block;position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to bottom, rgba(230,233,226,.35) 0%, rgba(230,233,226,.05) 12%, rgba(230,233,226,0) 24%, rgba(230,233,226,.35) 44%, rgba(230,233,226,.8) 62%, rgba(230,233,226,.96) 82%, var(--bg) 100%);} .imp-hero > svg{display:none;} .imp-hero .lp-wrap{position:relative;z-index:2;padding:0 var(--pad);} .imp-hero-inner{padding:0;} /* Der Aufmacher-Absatz ist hier Fließtext, keine Karte (mobile.css macht aus .lead sonst den Kasten der gewöhnlichen Seiten) */ .imp-hero .lead{margin:12px 0 0;padding:0;background:none;border:0;box-shadow:none; font-size:15.5px;line-height:1.55;color:var(--muted);} .imp-hero .imp-hero-cta{display:flex;flex-direction:column;gap:10px;margin-top:20px;} /* Überschriften: mobile.css setzt h1–h3 auf Inter und überschreibt damit die Serifenschrift von zahnimplantate.css (gleiche Spezifität, später geladen). Hier zurückgeholt, in den Größen der früheren /m/-Fassung. */ .lp-wrap h1,.lp-wrap h2,.lp-wrap h3{font-family:'Fraunces',Georgia,serif; font-weight:500;letter-spacing:-.01em;line-height:1.1;} .lp-wrap h1 em,.lp-wrap h2 em,.lp-wrap h3 em{font-style:italic;color:#B5673F;} .imp-hero h1{font-size:clamp(1.6rem,6.8vw,2.2rem);max-width:none;} .imp-hero h1 .h1-kicker{display:block;margin-bottom:10px; font-family:'Inter',system-ui,sans-serif;font-size:11.5px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--sand);line-height:1.35;} .chapter-head h2{font-size:clamp(1.5rem,6.2vw,1.95rem);max-width:none;} .chapter-head .no{font-size:3.4rem;} /* Knöpfe im Hero wie früher: Anrufen breit mit Pfeilkreis, darunter Online-Termin und WhatsApp nebeneinander */ .imp-hero .lp-btn{display:inline-flex;align-items:center;gap:9px;width:100%; min-height:54px;padding:10px 18px;border-radius:999px; font-size:15px;font-weight:600;line-height:1.25;border:0;} .imp-hero .lp-btn-primary{padding:0 8px 0 22px; background:linear-gradient(180deg,#2F3F37,#1E2A24);color:#F3F5EF; box-shadow:0 10px 22px -12px rgba(30,42,36,.45);} .imp-hero .lp-btn-primary svg{width:18px;height:18px;stroke:#F3F5EF;} .imp-hero .lp-btn-primary::after{content:"→";flex:none;margin-left:auto; width:40px;height:40px;border-radius:50%;background:#F3F5EF;color:#1E2A24; display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;} .imp-hero .hero-cta-row{display:flex;gap:10px;} .imp-hero .hero-cta-row .btn{flex:1;min-height:50px;padding:0 12px;font-size:14px;} /* Zweispaltige Vertrauensleiste der Landingpages passt nicht auf den Schirm */ .lp-trust{grid-template-columns:1fr;} .imp-hero .imp-hero-bg{max-width:100%;} /* ---------- Tabellen ---------- Drei Spalten passen nicht auf 375 px. Statt seitwärts zu scrollen wird jede Zeile zu einer Karte: erste Spalte als Überschrift, Rest darunter. Bei den Krankenkassen bleibt die Kopfzeile als Beschriftung stehen, damit die Tabelle als Tabelle lesbar bleibt. (.cmp-table bleibt unangetastet – sie hat unter 760 px schon einen Spaltenumschalter.) */ .kk-table,.fahrplan-table{display:block;min-width:0;background:none;border:0;} .kk-table thead{display:block;padding:0 4px 8px;} .kk-table thead tr{display:grid;grid-template-columns:1fr auto;gap:10px; background:none;border:0;padding:0;margin:0;} .kk-table thead th{padding:0;border:0;background:none;font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--muted);} .kk-table thead th:nth-child(2){text-align:right;} .kk-table thead th:last-child{display:none;} .kk-table tbody{display:block;} .kk-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline; margin-bottom:8px;padding:12px 14px;border:1px solid rgba(30,42,36,.1); border-radius:var(--r-sm);background:var(--surface);} .kk-table td{display:block;padding:0;border:0;white-space:normal;min-width:0;} .kk-table td:first-child{font-size:14.5px;font-weight:600;} .kk-table td.amt{text-align:right;font-size:14px;font-weight:600;color:#B5673F;white-space:nowrap;} .kk-table td:last-child{grid-column:1 / -1;margin-top:4px;font-size:12.5px; color:var(--muted);line-height:1.5;} .kk-table tr.hl{background:rgba(211,189,156,.22);border-color:rgba(181,103,63,.3);} .kk-table tr.hl td{background:none;} .fahrplan-table thead{display:none;} .fahrplan-table tbody{display:block;} .fahrplan-table tr{display:block;margin-bottom:8px;padding:12px 14px; border:1px solid rgba(30,42,36,.1);border-radius:var(--r-sm);background:var(--surface);} .fahrplan-table td{display:block;padding:0;border:0;white-space:normal;width:auto;} .fahrplan-table td:first-child{font-size:11px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:#B5673F;} .fahrplan-table td:nth-child(2){margin-top:5px;font-size:14px;line-height:1.5;} .fahrplan-table td:nth-child(3){margin-top:6px;font-size:12px;color:var(--muted);} .fahrplan-table tr.hl{background:rgba(211,189,156,.22);} .fahrplan-table tr.hl td{background:none;} /* ---------- Abschluss-Aufruf der Landingpages ---------- Am Rechner steht die Anruf-Karte neben dem Text, auf dem Handy darunter. Die Knöpfe sind dort volle Breite; auf dem dunklen Grund brauchen sie eigene Farben, sonst verschwinden sie. */ .lp-final{padding:26px 20px;border-radius:var(--r);} .lp-final-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px;} .lp-final .lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; width:100%;min-height:52px;padding:10px 18px;border-radius:999px; font-size:15px;font-weight:600;line-height:1.25;border:0;} .lp-final .lp-btn-ghost{background:rgba(243,245,239,.1);color:#F3F5EF; border:1px solid rgba(243,245,239,.4);} .lp-final .lp-btn-whatsapp{background:#25D366;color:#0B2A13;} .lp-final .callcard{margin-top:18px;padding:18px 16px;border-radius:var(--r-sm);} .lp-final .callcard-number{font-size:2.1rem;} .lp-final .callcard-btn{width:100%;justify-content:center;margin-top:14px;min-height:50px; background:#F3F5EF;color:#1E2A24;} .lp-final .callcard-btn svg{stroke:#1E2A24;} /* Der Sprunglink im Hero entfällt auf dem Handy (siehe build-einseitig.py) */ .imp-hero .lp-btn-ghost{display:none;} /* Häkchenliste: das Symbol steckt als Datei-URI im Stylesheet und trägt noch das Blau der Desktop-Fassung */ .checks li::before{background-image:url("data:image/svg+xml;utf8,");} /* Der Aufhellungston der Tabellen stammt aus der alten Blau-Welt */ :root{--hl:rgba(94,122,107,.12);} .imp-hero .imp-hero-hours{margin-top:16px;font-size:11.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);line-height:1.5;} /* Ärzte: dasselbe für die Arztkarte */ .doccard .aerzte-info{display:contents;} .doccard .doctor-photo img{width:100%;aspect-ratio:4/5;object-fit:cover; object-position:50% 12%;border-radius:16px;} .doccard .doctor-photo svg,.doccard .doctor-quote-mark{display:none;} .doccard .aerzte-role{display:block;margin:14px 6px 0;font-size:11.5px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--sand);} .doccard .aerzte-role svg{display:none;} .doccard .doctor-cv-link{display:flex;align-items:center;justify-content:center;gap:9px; min-height:54px;margin:16px 6px 0;padding:10px 18px;border-radius:999px; background:linear-gradient(180deg,#2F3F37,#1E2A24);color:#F3F5EF; font-weight:600;font-size:15px;line-height:1.25;text-align:center; box-shadow:0 10px 22px -12px rgba(30,42,36,.45);} .doccard .doctor-cv-link svg{stroke:#F3F5EF;} /* ===================================================================== Nachbesserungen 13.09.2026 – zweiter Durchgang ===================================================================== */ /* --- Google-Sterne --------------------------------------------------- Die Strichsymbol-Regel ganz oben nimmt jedem ohne width-Attribut die Füllung (fill:none) – die Sterne im Abschnitt „Was Patienten sagen“ waren dadurch unsichtbar. Sie sind Flächen, keine Striche. */ .stars svg{width:13px !important;height:13px !important; fill:#F5A623 !important;stroke:none !important;} .review .stars{display:inline-flex;gap:2px;} /* --- .btn-primary / .btn-ghost --------------------------------------- Beide Varianten stehen nur in styles.css. Auf dem Handy hatten die Knöpfe „Unsere Ärzte“ und „Unser Team“ deshalb weder Grund noch Rand und sahen aus wie Fließtext. */ .btn-primary{background:linear-gradient(180deg,#2F3F37,#1E2A24);color:#F3F5EF; border-color:transparent;box-shadow:0 10px 22px -12px rgba(30,42,36,.45);} .btn-primary svg{stroke:#F3F5EF;} .btn-ghost{background:#FFFFFF;color:#1E2A24;border-color:#CBD2C6; box-shadow:0 8px 18px -12px rgba(30,42,36,.25);} .btn-ghost svg{stroke:#1E2A24;} .team-actions{display:grid;gap:10px;padding:16px var(--pad) 0;} .team-actions .btn{width:100%;} /* --- Abschnitt „Zahnmedizin in Darmstadt“ (.local) -------------------- Kommt unverändert aus dem Desktop-Markup. mobile.css kennt .local-text, nicht aber .local-copy – Überschrift und Absätze standen ohne jeden Abstand untereinander. */ .local{padding-top:26px;} .local-copy{padding:0 var(--pad);} .local-copy .eyebrow{display:block;margin-bottom:8px;} .local-copy h2{font-family:'Fraunces',Georgia,serif;font-weight:300; font-size:23px;line-height:1.2;letter-spacing:-.01em;margin:0 0 12px;} .local-copy p{font-size:14.5px;line-height:1.62;color:var(--muted);margin:0 0 14px;} .local-copy p:last-of-type{margin-bottom:4px;} .local-facts{padding-left:0;padding-right:0;margin-top:6px;} .local-links{padding-left:var(--pad);padding-right:var(--pad);} /* --- Stellenanzeigen (karriere.html) --------------------------------- mobile.css stylt die alten Klassennamen der /m/-Fassung (.kr-job .cat, .meta, .body). Das Markup kommt jetzt vom Rechner und heißt .kr-job-cat, .kr-job-meta, .kr-job-body – keine dieser Regeln griff. Aufgeklappt war die Anzeige eine Textwand ohne Abstände, Zwischentitel und Aufzählungspunkte. Hier die Übersetzung der Namen. */ .kr-job-cat{display:block;font-size:10.5px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--sand);margin-bottom:4px;} .kr-job-head h3{font-family:'Fraunces',Georgia,serif;font-weight:500; font-size:21px;line-height:1.15;margin:0;} .kr-job-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;} .kr-job-meta span{font-size:11px;font-weight:600;color:var(--muted); background:rgba(30,42,36,.05);border:1px solid rgba(30,42,36,.08); border-radius:999px;padding:3px 8px;} .kr-job-toggle{display:inline-flex;align-items:center;justify-content:center; width:20px;height:20px;transition:transform .25s ease;} .kr-job-toggle svg{width:18px;height:18px;fill:none;stroke:var(--muted); stroke-width:2;stroke-linecap:round;} .kr-job[open] .kr-job-toggle{transform:rotate(45deg);} .kr-job-body{padding:14px 16px 16px;border-top:1px solid rgba(30,42,36,.08);} .kr-job-body p{font-size:13.5px;line-height:1.62;color:var(--muted);margin:0 0 12px;} .kr-job-body > *:last-child{margin-bottom:0;} .kr-job-intro{font-family:'Fraunces',Georgia,serif;font-size:15.5px; line-height:1.5;color:var(--text) !important;} .kr-job-body h4{font-size:11.5px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--text);margin:18px 0 8px;} .kr-job-body h5{font-size:13.5px;font-weight:600;color:var(--text);margin:12px 0 6px;} .kr-job-body ul{list-style:none;margin:0 0 12px;padding:0;} .kr-job-body li{position:relative;padding-left:18px;font-size:13.5px; line-height:1.55;color:var(--muted);margin-bottom:6px;} .kr-job-body li::before{content:"";position:absolute;left:2px;top:8px; width:5px;height:5px;border-radius:50%;background:var(--sand);} .kr-job-cols{display:grid;grid-template-columns:1fr;gap:0;} .kr-job-cols h4:first-child{margin-top:6px;} .kr-job-note{font-size:13px;color:var(--muted);font-style:italic;} .kr-job-perks{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 12px;} .kr-job-perks span{font-size:11px;font-weight:600;color:var(--text); background:rgba(43,59,51,.08);border-radius:999px;padding:4px 9px;} .kr-job-apply{margin-top:16px;padding:14px;border-radius:var(--r-sm); background:rgba(43,59,51,.06);display:grid;gap:10px;} .kr-job-apply p{margin:0;font-size:13px;} .kr-job-apply .btn{width:100%;} /* --- Download-Center: „In drei Schritten gut vorbereitet“ ------------- mobile.css legt jede Schrittkarte als Raster 34px|1fr an – gedacht für zwei Kinder (Nummer, Text). Das Markup vom Rechner bringt vier mit (Nummer, Symbol, Titel, Text). Die automatische Platzierung schob den Titel in die 34-px-Spalte und den Absatz auf dieselbe Zeile: beides lag übereinander. Titel und Text bekommen deshalb ihre Spalte zugewiesen. */ .dc-steps li{position:relative;} .dc-steps li h3,.dc-steps li p{grid-column:2;} .dc-steps .dc-step-icon{position:absolute;top:12px;right:12px; display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:50%;background:rgba(43,59,51,.07);} .dc-steps .dc-step-icon svg{width:15px;height:15px;fill:none; stroke:var(--sand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .dc-steps li h3{padding-right:34px;} /* --- Landingpage-Knöpfe: Text darf umbrechen ------------------------- „Kennenlerntermin: 06151 79983“ ist breiter als der Knopf; mit white-space:nowrap schob der Text den Pfeilkreis über den Rand. */ .imp-hero .lp-btn{white-space:normal;text-align:left;} .imp-hero .lp-btn-primary{padding:8px 8px 8px 18px;font-size:14.5px;gap:8px;} .imp-hero .lp-btn-primary svg:first-child{flex:none;} .lp-final .lp-btn{white-space:normal;} /* --- Kopfzeile ------------------------------------------------------- */ /* Der Grund ist zu 8 % durchsichtig und hatte keinen Weichzeichner: beim Scrollen las man den Text dahinter mit. */ .topbar.is-solid{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);} /* Die Karriere-Pille stand mit 70 % Weiß über dem Hero-Foto und war beim Scrollen kaum zu lesen. */ .top-karriere{background:rgba(255,255,255,.96); box-shadow:0 6px 16px -10px rgba(30,42,36,.45);} /* Auf der Karriereseite selbst trägt die Pille aria-current und damit helle Schrift. Sobald die Leiste beim Scrollen deckend wurde, gewann .topbar.is-solid .top-karriere mit hellem Grund – hell auf hell, die Beschriftung verschwand. Der Zustand „aktuelle Seite“ sticht jetzt. */ .topbar .top-karriere[aria-current], .topbar.is-solid .top-karriere[aria-current]{ background:var(--sand);color:var(--on-sand);border-color:transparent;} /* Menü-Overlay: der Grund war zu 2 % durchsichtig, die Knöpfe darunter schimmerten durch. Und die Karriere-Pille schwebte über dem offenen Menü, obwohl „Karriere“ dort schon als eigene Zeile steht. */ .sheet{background:#E6E9E2;} body.menu-open .top-karriere{display:none;} /* --- Weitere Opfer der Strichsymbol-Regel ---------------------------- Sie greift auf jedes ohne width-Attribut. Zeichnungen haben aber keins – sie wurden auf 16×16 gestaucht und ihre Flächen gelöscht. */ /* Zahnkarte auf zahnimplantate.html (Abschnitt 03) */ .arch{width:100% !important;height:auto !important;max-width:none;} .arch .tooth ellipse{fill:var(--surface);stroke:var(--text);stroke-width:1.6;} .arch .tooth text{font:600 12px 'Inter',sans-serif;fill:var(--muted);} .arch .tooth.missing ellipse{fill:transparent;stroke:var(--line-strong);stroke-dasharray:3 3;} .arch-box{padding:14px 4px 8px;} /* Zahn-Maskottchen auf kinderzahnarzt.html */ .kid-mascot svg{width:104px !important;height:auto !important; fill:currentColor !important;stroke:none !important;} /* Die Zierbögen im Hero und auf der 404-Seite sind auf dem Handy überflüssig – wie die übrigen Bänder, die hier schon ausgeblendet sind. Gestaucht auf 16 px waren sie ohnehin nur ein Fleck. */ .hero-arc,.nf-arc{display:none;} /* Google-Zeichen im Kreis: mehrfarbige Flächen, kein Strichsymbol */ .google-icon svg{width:20px !important;height:20px !important; fill:initial !important;stroke:none !important;} /* --- Vereinslogos (DGI · ITI · DGZMK) -------------------------------- Die Logos stehen in einem .doc-Block. Dessen Regel .doc img{width:100%} steht in mobile.css hinter .logos img{width:auto} und gewann deshalb: die Logos wurden auf Kartenbreite gezogen und auf 30 px Höhe zusammengedrückt – drei verzerrte Balken untereinander. */ .doc .logos img,.logos img{width:auto;height:26px;max-width:31%; aspect-ratio:auto;object-fit:contain;} .logos{gap:14px;justify-content:space-around;} /* --- Technikkarten auf philosophie.html ------------------------------ philosophie.css gilt auf beiden Breiten und stellt unter 520 px auf eine Spalte um: aus dem quadratischen Bild wurde eine 325-px-Kachel. Auf dem Handy steht das Bild jetzt als Symbol neben dem Text. */ .techs{grid-template-columns:1fr;gap:10px;} .techs a{display:grid;grid-template-columns:56px 1fr;gap:14px; align-items:start;padding:14px;border-radius:16px;} .techs img{width:56px;height:56px;aspect-ratio:1/1;border-radius:14px; object-fit:cover;} .techs .tb{padding:0;min-width:0;} .techs .instead{margin-bottom:5px;font-size:10.5px;} .techs h3{font-size:16px;margin-bottom:5px;line-height:1.25;} .techs p{font-size:13.5px;line-height:1.55;} /* --- Rastermodule dürfen schrumpfen ---------------------------------- Eine 1fr-Spalte klingt nach „ein gleicher Anteil“, hat aber als kleinste Größe den Inhalt selbst. Ein langes Wort – „Профилактика“, ein Name im Teamraster – macht die Spalte deshalb breiter als ihren Anteil, und das ganze Raster sprengt den Schirm. Bekommen die Kinder min-width:0, fällt diese Untergrenze weg und die Spalten teilen sich den Platz wirklich gleichmäßig. */ .tiles > *, .quick > *, .docs > *, .hours > *, .tgrid > *, .kr-ben-grid > *, .sheet .langs > *, .svc-list a > *, .dl > *, .dl-card > *, .dc-steps li > *, .tl-item > *, .crow > *, .steps li > *, .dc-sec > *, .kr-job > summary > *, .members > div > *, .dir-list > div > *{min-width:0;} .tgrid{grid-template-columns:repeat(2,minmax(0,1fr));} /* „Prophylaxeassistentin" braucht 124 px, die Spalte ist bei 320 px aber nur 111 px breit – das Wort lief über den Kartenrand hinaus. */ .tcard p,.tcard h3{overflow-wrap:break-word;} .quick,.docs,.hours,.kr-ben-grid{grid-template-columns:repeat(2,minmax(0,1fr));} /* --- Kachelreihe „Unsere Bereiche" ------------------------------------ repeat(4,1fr) klingt nach vier gleichen Vierteln, aber 1fr schrumpft nie unter den Inhalt. „Профилактика“ ist breiter als ein Viertel von 375 px – die Reihe lief 41 px über den Schirm. Weil die Seite damit waagerecht überlief, dehnten sich auch die fixierten Leisten oben und unten mit, und der Menüknopf lag außerhalb des Bildes. */ .tiles{grid-template-columns:repeat(4,minmax(0,1fr));} .tile{min-width:0;padding-left:4px;padding-right:4px;} .tile span{display:block;min-width:0;overflow-wrap:break-word;hyphens:auto; font-size:clamp(9.5px,2.9vw,11px);} /* --- WhatsApp-Zeichen ------------------------------------------------- Das Logo ist eine gefüllte Fläche und trägt weder width noch .icon. Die Strichsymbol-Regel ganz oben machte daraus eine Kontur – der Knopf sah leer aus. */ .cbtn-wa svg,.btn-wa svg,.lp-btn-whatsapp svg,a.wa svg{ fill:#25D366 !important;stroke:none !important;} .lp-final .lp-btn-whatsapp svg{fill:#0B2A13 !important;} /* ===================================================================== Bausteine, die nur styles.css kennt – auf dem Handy waren sie nackt ===================================================================== */ /* --- Karriere: Abschnittsrhythmus ------------------------------------ .kr-sec bringt oben 26 px mit, unten nichts: der letzte Absatz stieß direkt an die nächste Überschrift. */ .kr-sec{padding-bottom:30px;} .kr-section-head{margin-bottom:14px;} .kr-section-head h2{margin-top:6px;} .kr-section-head p{margin-top:8px;} .kr-intro-grid,.kr-culture-grid{display:grid;gap:16px;} .kr-intro-text p + p{margin-top:12px;} .kr-culture-photo{margin:0 0 4px;border-radius:var(--r);overflow:hidden; border:1px solid rgba(30,42,36,.1);box-shadow:var(--raised-shadow);} .kr-culture-photo img{width:100%;height:auto;display:block;} .kr-culture-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;} .kr-culture-links a{display:inline-flex;align-items:center;gap:6px; min-height:38px;padding:0 13px;border-radius:999px;background:var(--raised); border:1px solid rgba(30,42,36,.1);font-size:12.5px;font-weight:600;} .kr-culture-links a svg{width:14px;height:14px;} /* --- Karriere: „Was Sie bei uns erwartet" ---------------------------- mobile.css stylt .kr-ben-grid / .kr-ben / .ic – das Markup vom Rechner heißt .kr-benefit-grid / .kr-benefit / .kr-benefit-icon. Keine Regel griff: vier Absätze ohne Karte, ohne Abstand, mit 16-px-Symbol. */ .kr-benefit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;} .kr-benefit{min-width:0;padding:16px 14px;border-radius:var(--r); background:var(--raised);border:1px solid rgba(30,42,36,.08); box-shadow:var(--raised-shadow);} .kr-benefit-icon{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:12px;background:rgba(43,59,51,.08); margin-bottom:10px;} .kr-benefit-icon svg{width:22px !important;height:22px !important; fill:none;stroke:var(--sand);stroke-width:1.6;} .kr-benefit h3{font-size:14.5px;line-height:1.25;margin:0;} .kr-benefit p{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.45;} /* --- Karriere: Bewerbungskarte --------------------------------------- */ .kr-apply{padding-bottom:0;} .kr-apply-card{padding:20px 18px 22px;border-radius:var(--r);} .kr-apply-card h2{margin:6px 0 10px;} .kr-apply-actions{display:grid;gap:10px;margin-top:16px;} .kr-apply-addr,.kr-mail-addr{display:block;font-size:12px;opacity:.85;} .kr-hero-actions{display:grid;gap:10px;padding:16px var(--pad) 0;} /* --- Kontakt: Raster, Anfahrt, Kartenunterschrift, Abschluss --------- .kontakt-grid, .kontakt-section, .direction-item und .faq-cta kommen vom Rechner; mobile.css kennt nur die alten Namen (.dir-list). */ .kontakt-section{padding-bottom:28px;} .kontakt-grid{display:grid;gap:20px;} .kontakt-info,.kontakt-map-wrap{min-width:0;} .direction-item{display:grid;grid-template-columns:38px 1fr;gap:12px; align-items:start;padding:12px 0;border-top:1px solid var(--line);} .direction-item:first-of-type{border-top:0;} .direction-icon{display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%;background:rgba(43,59,51,.08); font-weight:700;font-size:14px;color:var(--sand);} .direction-icon svg{fill:none;stroke:var(--sand);stroke-width:1.7;} .direction-text{min-width:0;} .direction-text h3{font-size:14.5px;font-weight:600;margin:0;} .direction-text p{font-size:13px;color:var(--muted);margin:3px 0 0;line-height:1.5;} .directions-intro{font-size:14px;color:var(--muted);line-height:1.6;margin:8px 0 6px;} .kontakt-map-card{border-radius:var(--r);overflow:hidden;} .kontakt-map-caption{display:grid;grid-template-columns:18px 1fr;gap:10px; align-items:center;padding:12px 14px;background:var(--raised); border-top:1px solid rgba(30,42,36,.08);} .kontakt-map-caption svg{width:18px;height:18px;stroke:var(--sand);fill:none;} .kontakt-map-caption p{margin:0;font-size:13.5px;font-weight:600;min-width:0;} .kontakt-map-caption span{display:block;font-size:12px;font-weight:400;color:var(--muted);} .faq-cta{display:grid;gap:10px;padding:18px var(--pad) 0;} /* --- Für Kollegen: Unterschrift und Abschluss ------------------------- */ .fk-signature{margin:20px var(--pad) 0;padding-top:14px; border-top:1px solid var(--line);} .fk-sig-name{font-family:'Fraunces',Georgia,serif;font-size:17px;margin:0;} .fk-sig-role{font-size:12px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--sand);margin:4px 0 0;} .fk-sig-praxis{font-size:13px;color:var(--muted);margin:6px 0 0;line-height:1.5;} .fk-download-head{margin:28px var(--pad) 12px; font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:22px; line-height:1.15;} .fk-dl-grid{display:grid;gap:10px;padding:0 var(--pad);} .fk-download-more{margin:14px var(--pad) 0;font-size:13.5px;} .fk-download-more a{display:inline-flex;align-items:center;gap:7px; font-weight:600;color:var(--text);} .fk-download-more svg{width:15px;height:15px;fill:none;stroke:currentColor; stroke-width:2;} .tx-cta{margin-top:26px;} .tx-cta-actions{display:grid;gap:10px;margin-top:14px;} /* --- Untere Aktionsleiste -------------------------------------------- .tabbar ist ein Raster 1fr 1.35fr 1fr. Rasterspalten schrumpfen von sich aus nicht unter ihren Inhalt (min-width:auto), deshalb wurde die Leiste breiter als der Schirm – auf Deutsch um 8 px, auf Russisch um 42 px. Und weil die Seite dadurch waagerecht überlief, dehnte sich auch die fixierte Kopfzeile mit: der Menüknopf lag außerhalb des Bildes. Beides hängt an derselben Zeile. */ .tabbar{max-width:100%;min-width:0;} /* Flex-Kind: sonst nie unter min-content */ .tabbar a{min-width:0;overflow:hidden;white-space:nowrap;padding:0 4px; font-size:clamp(11px,3.05vw,13px);gap:6px;} .tabbar a .icon{width:17px;height:17px;} /* Unter 340 px (iPhone SE der ersten Reihe) passen die Beschriftungen auch verkleinert nicht mehr – „WhatsApp“ wurde um vier Pixel beschnitten. Dort stehen nur noch die drei Symbole; die Beschriftung bleibt im Markup und damit für Screenreader lesbar. */ @media (max-width:340px){ .tabbar a{font-size:0;gap:0;} .tabbar a .icon{width:21px;height:21px;} } } /* ===================================================================== RECHNER (ab 641 px) ===================================================================== */ @media (min-width: 641px){ /* --- Strichsymbole: die Klasse .icon kommt aus der Mobilfassung, styles.css kennt sie nicht. Größen, die styles.css selbst setzt (.cbtn svg, .local-facts svg, .lang-caret …), gewinnen weiterhin. --- */ .icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;} .cbtn-wa .icon{fill:currentColor;stroke:none;} /* --- Hero: von den vier Fotos des Handy-Wechslers bleibt das erste. .blur ist die weiche Verlängerung der Mobilfassung und entfällt. --- */ #hero-slides .slide{position:absolute;inset:0;opacity:1;} #hero-slides .slide:not(.on){display:none;} #hero-slides .blur{display:none;} #hero-slides .pic{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto; object-fit:cover;object-position:56% 24%; -webkit-mask-image:none;mask-image:none;} /* --- Hero-Knöpfe: die Reihe der beiden Nebenknöpfe ist eine Handy-Gruppierung. display:contents lässt sie hier verschwinden, die drei Knöpfe stehen wieder direkt in .cta-group. --- */ .cta-group .hero-cta-row{display:contents;} .cbtn{height:58px;padding:0 20px;border-radius:14px;} /* --- Technologie: Karte mit Produktfoto, ohne Videoschleife --- */ .service-card-media video{display:none;} .service-card-body small{display:none;} }