/* ========================================================================== Die Seite "Kontakt" (46) im Kleid der Startseite Die Seite ist am 13.08.2026 aus dem Entwurf B01 hervorgegangen und hat die\n fruehere Begleitungsseite (102, jetzt im Papierkorb) abgeloest. Inhalt und\n Aufbau stammen unveraendert von dort. Geaendert ist allein das Aussehen: dieselbe Farbfamilie, dieselbe Typografie und dieselben Bausteine wie auf Start14. Die Abschnitte 1 bis 4 sind wortgleich aus start14.css uebernommen (Palette, Kopf- und Fusszeile, Schrift, Schaltflaechen) - nur die Seiten-Kennung ist eine andere. Was danach kommt, betrifft die Bausteine, die es nur auf dieser Seite gibt: den Seitenkopf, die Angebotskarten, das gruene Band und den Kasten zur Unterkunft. Der feste Drachengrund aus start5.css ist nicht dabei - der Drache traegt hier wie auf Start14 nur den Kopf. Technik: wird nur auf Seite 270 geladen (novamira-sandbox/lumentra-begleitung.php). Alle Regeln haengen an body.page-id-46 und gewinnen so ohne !important gegen den gelieferten Entwurf. ========================================================================== */ /* ---------- 1. bis 4. stehen jetzt im Basisblatt --------------------------- Farbwerte, Kopf- und Fusszeile, Schrift und Schaltflaechen standen hier wortgleich wie in den anderen Seitenblaettern. Seit dem 13.08.2026 stehen sie einmal in style.css (Abschnitt "DIE PALETTE DER SEITE") und gelten fuer jede Seite. Dieses Blatt traegt nur noch, was dieser Seite eigen ist. -------------------------------------------------------------------------- */ /* ---------- 5. Der Seitenkopf --------------------------------------------------- Im Entwurf ist er ein tiefes Pflaumenband mit weisser Schrift. Auf Start14 traegt der Kopf das Drachenbild, licht und mit dunkelblauer Schrift darauf - genau das bekommt diese Seite auch, nur flacher: sie ist eine Unterseite, ihr Kopf soll den Auftakt der Startseite nicht wiederholen, sondern ihn zitieren. Der Aufbau ist derselbe wie dort: das Bild als eigene Ebene (nur so laesst es sich weich zeichnen, ohne die Schrift mitzunehmen), darueber ein diagonaler Schleier, links offen fuer den Drachen, rechts dicht fuer den Text. Beide Ebenen liegen auf z-index:-1, deshalb steht die Sektion auf isolation:isolate. -------------------------------------------------------------------------- */ body.page-id-46 .page-hero{ position:relative; overflow:hidden; isolation:isolate; /* Oben etwas weniger als unten: der Pfad ist von der Oberkante an den Fuss gewandert, der Text darf entsprechend hoeher stehen. */ padding:104px 0 112px; color:var(--s5-tinte-weich); background:var(--s5-himmel); } body.page-id-46 .page-hero::before{ content:""; display:block; position:absolute; inset:-40px; z-index:-1; width:auto; height:auto; border:0; border-radius:0; box-shadow:none; background:url("Lumentra-Lichtdrache-Blumental.webp") left top / cover no-repeat; filter:blur(var(--s14-unschaerfe)); clip-path:inset(40px); } body.page-id-46 .page-hero::after{ content:""; display:block; position:absolute; inset:0; z-index:-1; width:auto; height:auto; border:0; border-radius:0; box-shadow:none; background: linear-gradient(100deg, rgba(231,238,248,.04) 0%, rgba(231,238,248,.10) 30%, rgba(240,245,252,.60) 52%, rgba(244,248,253,.86) 72%, rgba(244,248,253,.92) 100%); } /* Ausrichtung wie im Auftakt von Start14. Wichtig zu wissen, warum das nicht "rechts" heisst: Auf Start14 steht der Text in der LINKEN Spalte des Satzspiegels, rechts daneben sitzt der Portraetkreis. Der Text beginnt dort also am linken Rand der Zeile (732 px im Fenster von 2544), und der Drache endet bei rund 460 px - beide kommen sich nicht ins Gehege. Auf B01 gibt es kein Bild in der rechten Spalte; dieselbe Ausrichtung heisst hier deshalb schlicht: Text linksbuendig am Anfang der Zeile, Breite wie die Textspalte auf Start14. Zwei Fallen dabei: 1. .page-hero-inner ist die Divi-Zeile selbst. Eine eigene Breite mit margin-left:auto stellt sie an den Rand des FENSTERS, nicht an den des Satzspiegels. Die Zeile behaelt deshalb ihre Breite von Divi (min(80%,1080px), mittig) - verschoben wird nur ihr Inhalt. 2. Die Spalte laesst sich nicht ueber width steuern, die Bruecke setzt width:auto!important. max-width ist frei und begrenzt die Zeilenlaenge auf das Mass der Textspalte von Start14. */ body.page-id-46 .page-hero-inner{ position:relative; z-index:1; /* Dieselbe Breite wie die Zeilen der uebrigen Sektionen (1080 px), damit der Text rechts genau dort endet, wo darunter die Karten enden. Die 930 px max-width des Entwurfs muessen dafuer weichen - ohne eigene Breite waere die Zeile sonst 80 Prozent des Fensters breit. */ width:min(1080px,calc(100% - 44px)); max-width:none; margin-inline:auto; display:flex; justify-content:flex-start; text-align:left; } body.page-id-46 .page-hero-inner .et_pb_column{max-width:min(700px,100%)} /* Ueberschrift und Vorspann ruecken naeher an die Kleinzeile: Divi haelt in der Spalte 30 px zwischen allen Modulen, dazu kamen 18 px margin-top an der Ueberschrift - zusammen 48 px unter "Begleitung". Jetzt sind es 24. */ body.page-id-46 .page-hero-inner .et_pb_column{row-gap:20px} body.page-id-46 .page-hero h1{ color:var(--s5-titel); font-size:clamp(2.4rem,4.2vw,3.9rem); line-height:1.08; /* Kein Eigenabstand nach unten: den Abstand zum Vorspann setzt allein der Zeilenabstand der Spalte (20 px). Damit steht der Vorspann so dicht unter der Ueberschrift wie im Auftakt von Start14. */ margin:4px 0 0; } body.page-id-46 .page-hero .lead{color:var(--s5-tinte-weich)} body.page-id-46 .page-hero .eyebrow{color:var(--s5-gold-tief)} body.page-id-46 .page-hero .eyebrow::before{background:var(--s5-gold)} /* Der Pfad ganz oben stand in Weiss auf dem dunklen Band des Entwurfs und war auf dem hellen Kopf kaum zu sehen. */ /* Der Pfad steht nicht mehr ueber der Kleinzeile, sondern unter dem Vorspann am Fuss des Kopfes (Kundenwunsch). Die Spalte ist ein senkrechter Flexcontainer, ein order genuegt also - der Seiteninhalt bleibt unberuehrt. Sein Abstand nach unten aus dem Entwurf entfaellt dabei, dafuer bekommt er einen nach oben. */ body.page-id-46 .page-hero-inner .et_pb_column>.et_pb_text:first-child{ order:2; /* Ganz an den Fuss des Kopfes, knapp ueber der Kante zur naechsten Sektion. Frei gestellt statt im Fluss: so waechst der Kopf nicht mit, der Pfad legt sich in die Polsterung, die ohnehin da ist. Bezugspunkt ist die Zeile (.page-hero-inner steht auf position:relative), deshalb sitzt left:0 genau am linken Rand des Satzspiegels - dort, wo auch die Ueberschrift beginnt. */ position:absolute; left:0; bottom:-78px; margin:0; } body.page-id-46 .breadcrumb{ color:var(--s5-tinte-weich); margin:0; } body.page-id-46 .breadcrumb a{color:var(--s5-tinte)} body.page-id-46 .breadcrumb a:hover{color:var(--s5-gold-tief)} /* ---------- 6. Die Flaeche mit dem Formular ------------------------------------- */ body.page-id-46 .paper{ background: radial-gradient(circle at 84% 12%,rgba(246,227,194,.24),transparent 30%), linear-gradient(135deg,#ffffff 0%,#f4f8fd 55%,#eaf1fa 100%); } /* ---------- 7. Das Band mit dem Portraet ---------------------------------------- Hier stand das Handbild in einem Rundbogen auf salbeigruenem Grund. Auf Wunsch steht dort jetzt dasselbe Portraet wie im Auftakt der Startseite - und zwar auch in derselben Fassung: als Kreis mit feiner blauer Linie innen und hellem Ring in Gold aussen. So erkennt man die Seite als dieselbe Hand. -------------------------------------------------------------------------- */ /* Der Abstand zwischen Kopf und diesem Band ist halbiert (Kundenwunsch): Er setzte sich aus 112 px Sektionspolsterung und 38 px Eigenabstand des Bandes zusammen, zusammen 150 px - jetzt sind es 75. */ body.page-id-46 .paper{padding-top:56px} body.page-id-46 .ritual-inline{ margin-top:19px; gap:48px; padding:34px 38px; border:1px solid var(--s5-linie); background:linear-gradient(135deg,#ffffff,#eaf1fa); box-shadow:0 14px 40px rgba(17,40,82,.06); } body.page-id-46 .ritual-inline-image{ width:min(300px,100%); height:auto; aspect-ratio:1; margin-inline:auto; border-radius:50%; border:1px solid var(--s14-kreis-linie); box-shadow: 0 0 0 12px rgba(255,255,255,.38), 0 0 0 13px rgba(228,171,83,.38), 0 22px 50px rgba(17,40,82,.16); } body.page-id-46 .ritual-inline h2{color:var(--s5-titel);font-size:clamp(1.8rem,2.6vw,2.5rem)} body.page-id-46 .ritual-inline .lead{color:var(--s5-tinte-weich)} /* ---------- 8. Die dunkle Karte neben dem Formular ------------------------------ Im Entwurf ein tiefes Pflaumenband. Sie bleibt dunkel - hier traegt das die Seite, weil das Formular daneben hell steht - wechselt aber in dasselbe Marineblau wie die Fusszeile. */ body.page-id-46 .contact-panel{ background: radial-gradient(circle at 90% 12%,rgba(228,171,83,.16),transparent 28%), linear-gradient(150deg,#1b2f6e,#1b2f6e); box-shadow:0 26px 70px rgba(17,40,82,.20); } /* Die Palette faerbt Ueberschriften und Absaetze dunkelblau - auf der dunklen Karte stuenden sie damit unsichtbar auf dem eigenen Grund. Dieselbe Falle wie bei der dunklen Sektion des Entwurfs. */ body.page-id-46 .contact-panel h2, body.page-id-46 .contact-panel h3{color:#fff} body.page-id-46 .contact-panel p, body.page-id-46 .contact-fact{color:rgba(255,255,255,.76)} body.page-id-46 .contact-panel h2{font-size:clamp(1.9rem,2.6vw,2.4rem)} body.page-id-46 .contact-panel a{color:var(--s5-gold-weich)} body.page-id-46 .contact-panel a:hover{color:#fff} body.page-id-46 .contact-fact{border-top-color:rgba(228,171,83,.24)} /* ---------- 9. Das Formular ------------------------------------------------------ Die Felder tragen im Entwurf ein Flieder als Fokusfarbe. Sie wechselt in Gold, damit die Tastaturfuehrung dieselbe Sprache spricht wie die Schaltflaechen. Divi setzt seine Feldregeln mit !important, deshalb muss hier ebenfalls !important stehen. */ body.page-id-46 .form-card{ border:1px solid var(--s5-linie); background:rgba(255,255,255,.86); box-shadow:0 14px 40px rgba(17,40,82,.07); } body.page-id-46 .form-card label, body.page-id-46 .form-card .et_pb_contact_captcha_question{color:var(--s5-tinte-weich)} body.page-id-46 .form-card .et_pb_contact_field .input{ border-color:var(--s5-linie)!important; color:var(--s5-tinte)!important; } body.page-id-46 .form-card .et_pb_contact_field .input:focus{ border-color:var(--s5-gold)!important; box-shadow:0 0 0 3px rgba(228,171,83,.22)!important; } body.page-id-46 .form-card .et_pb_contact_field_checkbox label i{border-color:rgba(17,30,62,.30)} body.page-id-46 .form-card .et_pb_contact_field_checkbox input[type=checkbox]:checked+label i{ background:var(--s5-tinte); border-color:var(--s5-tinte); } body.page-id-46 .form-card .et_pb_contact_field_checkbox input[type=checkbox]:focus-visible+label i{outline-color:var(--s5-gold)} /* ---------- 10. Die Kleinzeile mit dem Strich davor ----------------------------- */ body.page-id-46 .eyebrow{font-size:.84rem} body.page-id-46 .eyebrow::before{width:46px} /* ---------- 11. Kleine Schirme --------------------------------------------------- */ @media(max-width:900px){ body.page-id-46{--s14-unschaerfe:1.5px} body.page-id-46 .page-hero{padding:92px 0 84px} body.page-id-46 .page-hero-inner{display:block} body.page-id-46 .ritual-inline{padding:26px} /* ---------- 13. Zwei getrennte Einwilligungen ----------------------------------- Kundenwunsch vom 14.08.2026: Datenschutz und der Hinweis zur Begleitung sind zwei Haekchen statt eines. Wer zustimmt, soll beidem einzeln zustimmen - zwei Sachverhalte in einer Erklaerung zu buendeln ist genau das, was bei Einwilligungen angreifbar ist. Der Link kommt von Divi selbst: jede Checkbox-Option kennt ein Feld link mit url und text, das hinter den Beschriftungstext gehaengt wird. Deshalb steht im Inhalt kein HTML - das waere ohnehin vergeblich, Divi zieht dem Optionstext die Tags ab (wp_strip_all_tags). Divi setzt an diese Links immer target="_blank". Fuer ein Formular ist das richtig herum: die schon getippte Nachricht geht nicht verloren. Die Optik folgt dem Weiterlesen-Link im Hinweiskasten (Basisblatt, .callout-mehr): Gold-tief und unterstrichen. Im hellen Formularfeld traegt das helle Palettengold den Kontrast nicht. -------------------------------------------------------------------------- */ body.page-id-46 .form-card .et_pb_contact_field_checkbox label a{ font-weight:600; color:var(--s5-gold-tief); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; } body.page-id-46 .form-card .et_pb_contact_field_checkbox label a:hover{color:var(--s5-tinte)} /* Zwischen den beiden Haekchen etwas mehr Luft als zwischen Feld und Feld: sie sollen als zwei Entscheidungen lesbar sein, nicht als ein Block. */ body.page-id-46 .form-card .et_pb_contact_field[data-id="hinweis"]{margin-top:4px}