/* ============================================================== Gustav Erb - Der Weg des DreiEins, Landingpage Wird ausschliesslich auf der DreiEins-Seite geladen, nach style.css. Zwei Gruende dafuer: 1. Die Landingpage nimmt Regeln des Onepagers zurueck, allen voran das Klappmenue unterhalb 1040 px. Global geladen wuerde die Praxisseite ihr Menue verlieren. 2. Quellreihenfolge. Mehrere Regeln hier haben dieselbe Spezifitaet wie ihre Gegenstuecke in style.css. Bei Gleichstand entscheidet die Reihenfolge, und gewinnen soll hier immer die Landingpage. Der erste Teil ist Zeile fuer Zeile aus landingpage-dreieins.html uebernommen und nicht angefasst. Was WordPress zusaetzlich braucht, steht gesammelt am Ende der Datei. ============================================================== */ /* ============================================================== AB HIER: NUR FUER DIESE LANDINGPAGE Alles oberhalb ist Zeile fuer Zeile aus design-osteopathie-v6.html uebernommen und nicht angefasst. Das garantiert, dass Farben, Schriftstufen, Abstaende, Knoepfe, Kreisfelder, Ablauf-Animation und FAQ hier exakt so aussehen wie auf dem Onepager. Neu sind nur die Bausteine, die der Onepager nicht kennt: Belegleiste, beschriftetes Zeichen, Nutzenraster, Preisstufen und das Anfrageformular. ============================================================== */ /* --- Kopf mit Menue ------------------------------------------- Seit 1.12.0 traegt auch die Landingpage das Menue des Onepagers (ohne DreiEins). Klappmechanik und Masse kommen unveraendert aus style.css, der Knopf „DreiEins anfragen“ sitzt wie „Termin buchen“ als letzter Punkt im Menue. */ /* Die Wortmarke traegt hier den Namen der Seite, also dieselbe Schrift wie das DreiEins-Logo. Amatic hat eine kleine Mittellaenge, 30 px wirken so gross wie die 22 px Outfit auf dem Onepager. */ .kopf .marke b{ font-family:var(--dreieins); font-weight:400; font-size:30px; line-height:1; letter-spacing:.02em; } /* --- Textmasse ------------------------------------------------- Die Lesespalten standen bei rund der Haelfte der Inhaltsbreite und brachen dadurch frueher um, als noetig. Zwei Regeln: 1. Steht Text in einer Rasterspalte, fuellt er die Spalte. Eine zusaetzliche Begrenzung darin erzeugt nur einen Knick, den niemand erklaeren kann. 2. In den vollbreiten Abschnitten bekommt er --textbreite. HIER WIRD JUSTIERT. Prozent der Inhaltsbreite, also bei 1128 px rund 752 px. Enger: Wert senken. Nicht angefasst sind die Stellen, die aus v6 stammen und dort bewusst entschieden wurden: die Hero-Lead, der FAQ-Antworttext (64 Zeichen, siehe oben) und der Absatz im Abschlussband. Sonst liefe die Landingpage gegenueber dem Onepager auseinander. */ :root{ --textbreite:66.6%; } /* Zwei Drittel ergeben nur Sinn, solange etwas zu teilen da ist. Bei 375 px waeren es 223 px, also eine unlesbare Saeule. Ab 900 px abwaerts nimmt der Text die volle Spalte. 900 px ist ohnehin die Breite, bei der die zweispaltigen Abschnitte umbrechen. */ @media (max-width:900px){ :root{ --textbreite:100%; } } .beschwerden .lead, .nutzen .lead, .ablauf .lead, .herkunft .lead, .preis .lead, .wende .satz, .wende .erklaerung, .herkunft .fliess-2, .preis-begruendung{ max-width:var(--textbreite); } /* Der Schlussabsatz stand mit 22 px unter der letzten Trennlinie der Quellenliste und las sich dadurch wie eine siebte Zeile darin. */ .herkunft .fliess-2{ margin-top:clamp(28px,3vw,38px); } /* In der Spalte: Spaltenbreite ist die Lesebreite. */ .loesung .dazu, .abgrenzung span, .n-liste p, .preis-grid .text, .preis-grid li{ max-width:none; } /* --- Fliesstext ausserhalb der v6-Abschnitte ------------------- .antwort und .dazu sind in v6 an .zusammenhang gebunden. Hier dieselben Werte, aber ohne Abschnittsbindung. */ .fliess{ margin-top:26px; font-size:clamp(18px,1.9vw,20.5px); line-height:1.58; max-width:52ch; } .fliess-2{ margin-top:22px; color:var(--tinte-2); max-width:56ch; } /* --- Hero: statt des Signets die DreiEins-Marke ---------------- */ .dreieins-hero{ width:100%; max-width:470px; margin:0 auto; } .dreieins-hero img{ width:100%; height:auto; display:block; } /* --- Belegleiste direkt unter dem Hero ------------------------- Vier nachpruefbare Angaben, keine Zahlen, keine Stimmen. §11 HWG laesst Patientenstimmen und Erfolgsberichte nicht zu, Qualifikation und Aufsichtsbehoerde dagegen schon. */ .belege{ padding-block:0; } .belege .wrap{ padding-block:clamp(26px,3.4vw,38px); border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); } .beleg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,44px); } .beleg-grid b{ display:block; font-family:var(--display); font-weight:400; font-size:clamp(17px,1.7vw,20px); letter-spacing:-.015em; line-height:1.2; } .beleg-grid span{ display:block; margin-top:7px; color:var(--tinte-2); font-size:15.5px; line-height:1.45; } @media (max-width:820px){ .beleg-grid{ grid-template-columns:repeat(2,1fr); row-gap:26px; } } @media (max-width:460px){ .beleg-grid{ grid-template-columns:1fr; } } /* --- Loesung: Ueberschrift darf laenger laufen ----------------- */ .loesung h2{ max-width:19ch; } /* --- Das beschriftete Zeichen ---------------------------------- Die Klassen .k1 bis .k3 und .marken-text liegen seit v1 im Stylesheet, wurden in v6 aber nicht mehr benutzt. Hier tragen sie wieder etwas: drei beschriftete Kreise, multiply, die Ueberlagerung in der Mitte ist die These der Marke. In v6 lief die Einlaufbewegung beim Laden - dieses Zeichen steht mitten auf der Seite und waere durch, bevor man es sieht. Deshalb haengt die Bewegung hier am Sichtbarwerden. */ .js .zeichen-scroll .k, .js .zeichen-scroll .marken-text{ animation-play-state:paused; } .js .zeichen-scroll.sichtbar .k, .js .zeichen-scroll.sichtbar .marken-text{ animation-play-state:running; } .zeichen .marken-text{ font-family:var(--display); font-weight:300; letter-spacing:.03em; fill:var(--tinte); } .zeichen .marken-text.mitte{ font-weight:400; letter-spacing:.01em; } /* --- Abgrenzung: was dieser Weg nicht ist ---------------------- Vorher ein Kasten mit Randlinie links. Diese Seite kennt keine Kaesten: sie arbeitet mit Linien und Flaechen, und die 3-px-Kante in Logofarbe markiert ueberall sonst schon, dass hier ein eigener Gedanke beginnt. Also dieselbe Kante statt eines Fremdkoerpers. */ /* Die Kante laeuft ueber die volle Spalte, wie bei den Zitatkarten. Nur der Lesetext bekommt sein Mass, sonst endet der Strich mitten im Nichts und sieht nach Zufall aus. */ .abgrenzung{ margin-top:clamp(32px,3.8vw,46px); padding-top:22px; border-top:3px solid var(--logo-blau); } .abgrenzung b{ display:block; font-family:var(--display); font-weight:400; font-size:clamp(19px,2vw,22px); letter-spacing:-.015em; line-height:1.2; color:var(--tinte); } .abgrenzung span{ display:block; margin-top:11px; color:var(--tinte-2); font-size:16.5px; } /* --- Randnotiz mit Mittelpunkt als Trenner --------------------- Die Beschwerdeliste stand als grosser Absatz ueber dem wichtigsten Satz des Abschnitts und hat ihn erdrueckt. Sie ist eine Aufzaehlung, also sieht sie jetzt auch so aus. Der Mittelpunkt als Trenner ist im Preisabschnitt ohnehin schon in Gebrauch. Er haengt am vorangehenden Begriff, damit er beim Umbruch nicht allein am Zeilenanfang steht. */ .dazu-oft{ margin-top:clamp(44px,5.5vw,72px); display:flex; flex-wrap:wrap; align-items:baseline; row-gap:6px; color:var(--tinte-2); font-size:16.5px; } .dazu-oft b{ color:var(--tinte); font-weight:600; margin-right:14px; } .dazu-oft span{ white-space:nowrap; } .dazu-oft span:not(:last-child)::after{ content:"\00B7"; padding:0 11px; color:var(--platz-linie); } /* --- Die Wende des Abschnitts --------------------------------- Der Satz, um den es geht, stand klein und grau unter einer grossen Aufzaehlung. Die Rangfolge war genau verkehrt herum. */ .wende{ margin-top:clamp(30px,3.6vw,44px); } .wende .satz{ font-family:var(--display); font-weight:200; letter-spacing:-.025em; line-height:1.12; font-size:clamp(25px,3vw,36px); } .wende .erklaerung{ margin-top:24px; color:var(--tinte-2); } /* --- Nutzenraster: wie .b-liste, aber zwei Spalten ------------- */ .nutzen h2{ font-size:clamp(26px,3.2vw,40px); } .nutzen .lead{ margin-top:22px; } .n-liste{ margin-top:clamp(44px,5.5vw,72px); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(30px,3.5vw,48px) clamp(36px,5vw,72px); } .n-liste article{ padding-top:26px; border-top:3px solid var(--linie); } .n-liste article:nth-child(1){ border-top-color:var(--logo-gelb); } .n-liste article:nth-child(2){ border-top-color:var(--logo-rot); } .n-liste article:nth-child(3){ border-top-color:var(--logo-blau); } .n-liste article:nth-child(4){ border-top-color:var(--logo-gelb); } .n-liste h3{ font-family:var(--display); font-weight:400; font-size:clamp(20px,2.1vw,25px); letter-spacing:-.015em; line-height:1.18; } .n-liste p{ margin-top:12px; color:var(--tinte-2); font-size:16.5px; } @media (max-width:700px){ .n-liste{ grid-template-columns:1fr; } } /* --- Herkunft der Methode: Belege statt Stimmen ---------------- */ .herkunft h2{ font-size:clamp(26px,3.2vw,40px); } .herkunft .lead{ margin-top:22px; } .linien-liste{ margin:clamp(36px,4.5vw,56px) 0 0; padding:0; list-style:none; } .linien-liste li{ padding:18px 0; border-top:1px solid var(--linie); color:var(--tinte-2); font-size:16.5px; display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,.66fr); gap:6px clamp(20px,3vw,44px); } .linien-liste li:last-child{ border-bottom:1px solid var(--linie); } .linien-liste b{ color:var(--tinte); font-weight:600; } @media (max-width:700px){ .linien-liste li{ grid-template-columns:1fr; } } /* --- Preis: zwei Stufen, eine davon empfohlen ----------------- Linien statt Kaesten, wie im Abschnitt "Das Praktische". Die Empfehlung traegt die Logofarbe Gelb als Kante und ein Etikett, der Rest bleibt identisch. Kein durchgestrichener Preis, keine Frist, kein Zaehler - es gibt keinen, der echt waere. */ .preis h2{ font-size:clamp(26px,3.2vw,40px); } .preis .lead{ margin-top:22px; } .preis-grid{ margin-top:clamp(40px,5vw,68px); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(32px,4.5vw,64px); align-items:start; } .preis-grid article{ padding-top:26px; border-top:3px solid var(--linie); } .preis-grid article.empfehlung{ border-top-color:var(--logo-gelb); } /*