/* ===================================================================== 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;} /* ===================================================================== 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){ 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%);} .imp-hero .imp-hero-grad{display:none;} .imp-hero > svg{display:none;} .imp-hero .lp-wrap{position:relative;z-index:2;padding:0 var(--pad);} /* Weicher Grund hinter dem Textblock: die Überschriften sind je nach Seite unterschiedlich lang und reichen sonst ins Motiv hinein. */ .imp-hero .lp-wrap::before{content:"";position:absolute;left:0;right:0; top:-72px;bottom:-40px;z-index:-1;pointer-events:none; background:linear-gradient(to bottom, rgba(230,233,226,0) 0%, rgba(230,233,226,.72) 34%, rgba(230,233,226,.94) 52%, var(--bg) 68%);} .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%;} /* 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;} } /* ===================================================================== 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;} }