/* CASCIA-full — LP-Layer. * * Die Design-Sprache des cascialp-Mandanten (violette Bänder, Heldenreise-Pfad, * Icon-Kacheln) — gelegt auf das BESTEHENDE Klassen-Vokabular der Startseite. Damit bleibt `data/casciafull/index.md` unverändert: kein * Redaktions-Text wandert, keine Blocksyntax wird umgeschrieben. * * BEWUSST ANDERS ALS DIE LANDINGPAGE: die greift Aufmerksamkeit, die Hauptseite * muss Seriosität tragen. Deshalb hier Linien statt Hartschatten, gedämpfte * Radien, kleinere Headlines, Weiß als Grundfläche (Lila nur noch als Hauch), * Orange nur noch am echten CTA — und keine Herzchen-Spielerei im Hero. Der * Headline-Schnitt bleibt dagegen der Display-Grotesk der Landingpage (eine * Serif war getestet und verworfen). Wer den lauten Ton zurückholen will, * findet die LP-Werte als Kommentar an den Variablen unten. * * Die Sektions-KANTEN sind seit 19.08.2026 wieder geschwungen — siehe den * FORM-LAYER am Dateiende. Der Absatz „gerade Kanten statt Ellipsen-Cuts" galt * bis dahin und ist überholt; die Wölbung dort ist bewusst flacher als der * Ellipsen-Cut der Landingpage. * * ALLES hängt unter `.lp` (Body-Klasse aus misc/header.php). Die Klasse liegt * inzwischen auf ALLEN Seiten, nicht mehr nur auf der Startseite — der * Unterseiten-Teil weiter unten lebt genau davon. Rücknahme = Body-Klasse weg. * * Reihenfolge: nach style.css laden, sonst gewinnt die alte Palette. */ /* ---------- Fonts lokal (DSGVO — kein Google-CDN auf einer deutschen Live-Site) ---------- */ /* Überschriften-Schnitt — bleibt der Display-Grotesk der Landingpage. Eine Serif * war hier ausprobiert und wieder verworfen: sie liest sich auf dieser Seite alt * statt seriös. Die Seriosität trägt jetzt alles andere (Kanten, Radien, Farbe, * Ruhe), die Headline darf Charakter behalten. */ @font-face{ font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap; src:url(assets/fonts/bricolage-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap; src:url(assets/fonts/bricolage-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap; src:url(assets/fonts/figtree-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap; src:url(assets/fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ---------- Palette ---------- * Die vorhandenen Variablen werden auf dem Body UMDEFINIERT statt jede alte Regel * einzeln zu überschreiben — so ziehen Header, Footer, Mobilebar & Co. den neuen * Look automatisch mit. Was danach kommt, ist nur noch Form, nicht mehr Farbe. */ body.lp{ --violet:#5B3E96; --deep:#2A1D4E; --accent:#F1791F; --pale:#F2EDFA; /* Abgesetzte Flächen (`.soft`, `.callout`, `.subHero`) — Violett mit 16 % * Deckung statt eines fixen Hellwerts. Der Alphakanal ist Absicht: die * Tönung bleibt derselbe Farbton wie --violet und läuft nicht davon, wenn * die Palette einmal nachjustiert wird. Über Weiß ergibt das rund #E4E0EE. */ --cream:#5b3e9629; --ink:#241C3D; --muted:#5A5273; --line:#E3D9F5; --shadow:none; --wrap:1120px; --lp-violet-deep:#3E2A6B; /* Markenorange, identisch zur Landingpage — ein zweiter Ton wäre auffälliger * als der laute. Zurückgenommen ist nicht die Farbe, sondern ihr EINSATZ: * Orange markiert nur noch echte CTAs. Was vorher mitgesungen hat (Eyebrows, * Links, Icon-Kacheln, Akkordeon-Plus), läuft in Violett. */ --lp-orange:#F1791F; --lp-orange-deep:#C95E0E; --lp-lilac:#F2EDFA; --lp-lilac-mid:#E3D9F5; --lp-light:#D6C9F0; /* Eyebrow auf dunklem Grund — hell genug für 4,5:1 auf --violet */ --lp-display:'Bricolage Grotesque','Figtree',sans-serif; /* Radien und Schatten hängen an Variablen, damit sich der Ton der Seite an * einer Stelle justieren lässt: LP-Werte = laut, die Werte hier = seriös. * Zum Vergleichen einfach die Kommentar-Werte einsetzen. */ --lp-radius:14px; /* Karten — LP: 22px */ --lp-radius-btn:10px; /* Buttons — LP: 999px (Pille) */ --lp-radius-sm:8px; /* Chips, Kleinteile — LP: 999px */ --lp-flat:none; /* Karten/Chrome — LP: 0 6px 0 rgba(42,29,78,.16) */ --lp-cta:none; /* Buttons — LP: 0 6px 0 var(--lp-orange-deep) */ --lp-soft:none; /* Fotos — LP: 0 22px 60px rgba(52,26,92,.28) */ font:17px/1.6 'Figtree',system-ui,sans-serif; } /* KEIN overflow-x:hidden auf dem Body — das macht den Body zum Scroll-Container * und nimmt dem `position:sticky`-Header seinen Halt. */ /* Die Größen bleiben unter denen der Landingpage — eine redaktionelle Seite * arbeitet über Abstand, nicht über Schriftgrad. */ .lp h1,.lp h2,.lp h3,.lp h4{font-family:var(--lp-display);letter-spacing:-.01em;line-height:1.12} .lp h1{font-weight:800;font-size:clamp(2.1rem,4vw,3rem)} .lp h2{font-weight:800;font-size:clamp(1.7rem,2.8vw,2.2rem)} .lp h3{font-weight:700} .lp .eyebrow{color:var(--violet);font-weight:800;font-size:.8rem;letter-spacing:.14em} .lp .careerHeroCopy .eyebrow {color:#CFC4E8} /* ---------- Buttons ---------- * Statt der Pille mit Hartschatten und Druck-Animation: ruhige Fläche, Hover * nur über die Farbe. Kein Versatz beim Klick — das war LP-Spielerei. */ .lp .btn{ min-height:0;border:none;border-radius:var(--lp-radius-btn); /* Dunkler Text auf Orange = 5,7:1 (AA); Weiß auf Orange lag bei 2,8:1. */ background:var(--lp-orange);color:var(--deep); font-family:'Figtree',sans-serif;font-weight:700;font-size:1.02rem; gap:10px;padding:15px 28px;box-shadow:var(--lp-cta); transition:background-color .15s ease,color .15s ease,border-color .15s ease; } .lp .btn:hover{background:var(--violet);color:#fff} .lp .btn.small{padding:11px 20px;font-size:.94rem} .lp .btn.ghost{background:none;color:var(--violet);border:2px solid var(--violet);padding:13px 26px;box-shadow:none} .lp .btn.ghost:hover{background:var(--violet);color:#fff} .lp .btn.white{background:#fff;color:var(--violet);border:none;box-shadow:none} .lp .btn.white:hover{background:var(--lp-lilac)} /* Telefon-Buttons bekommen denselben Hörer wie die topline. Über den * href-Selektor statt über eine Klasse: die Buttons stehen als Markdown-Links * im Content (`[02233 …](tel:…){.btn .ghost}`), dort käme kein SVG hinein ohne * HTML in der .md. So greift es auf allen Seiten, ohne Redaktions-Eingriff. * `mask` statt `background-image`, damit das Icon `currentColor` erbt und den * Farbwechsel des ghost-Buttons beim Hover mitgeht. */ .lp .btn[href^="tel:"]::before{ content:"";flex:none;width:18px;height:18px;background-color:currentColor; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 3 5a1 1 0 0 1 1-1'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------- Header ---------- */ /* Die .84rem aus style.css waren für eine Zeile mit EINEM Claim gedacht. Mit * vier Einträgen, davon zwei ohne Link-Fettung, war das Band nicht mehr zu * lesen — deshalb hier grösser UND halbfett. Auf dunklem Grund frisst dünner * Strich mehr Lesbarkeit als fehlende Punktgrösse. */ .lp .topline{background:var(--lp-violet-deep);font-size:.95rem;font-weight:600} /* Jeder Eintrag trägt ein Icon als Erkennungszeichen — in einer Zeile aus vier * gleich formatierten Textblöcken ist sonst nicht zu sehen, was Adresse und was * Aktion ist. inline-flex, damit das SVG auf der Grundlinie sitzt statt darauf * zu reiten. */ .lp .topline a,.lp .tl-item{display:inline-flex;align-items:center;gap:8px} /* Orange statt gedimmtem Weiss. Das Dimmen war der Fehler: es macht das Icon * leiser, ohne es abzusetzen. Die Akzentfarbe trennt Icon von Text und lässt * beide bei voller Deckkraft stehen — dieselbe Rollenteilung wie in der * Vorteilsleiste, wo `.acc` das Orange trägt. */ .lp .topline svg{flex:none;color:var(--lp-orange)} .lp .topline a:hover{text-decoration:underline;text-underline-offset:3px} /* Vier gleichwertige Einträge, also gleiche Abstände: `space-between` verteilt * den Freiraum gleichmässig, statt drei Einträge links zusammenzudrängen und * einen per `margin-left:auto` nach rechts abzuhängen. */ .lp .topline .wrap{ justify-content:space-between;flex-wrap:wrap; gap:6px 30px;min-height:54px; } /* Der Doppelpunkt sitzt als ::after am Label, nicht als Zeichen vor der Nummer. * Grund ist der `gap` oben: Label und Nummer sind Flex-Geschwister, der Abstand * liegt also ZWISCHEN ihnen — ein Doppelpunkt am Anfang der Nummer bekäme ihn * vorgeschaltet und läse sich als „Notfall : Nummer". Am Label klebt er direkt * am Wort, und der gap wird zum Abstand dahinter. Unter 700px fällt er mit der * Nummer weg, sonst zeigte er ins Leere. */ .lp .tl-label::after{content:":"} .lp .tl-social{display:inline-flex;align-items:center;gap:2px} /* Klickfläche um die 16px-Icons: die nackte Glyphe wäre auf dem Touchscreen * kaum zu treffen. Kreisform, weil der Hover sonst als Kasten in einer Zeile * ohne Kästen sitzt. */ .lp .tl-social a{padding:7px;border-radius:50%;line-height:0;transition:background-color .15s ease} .lp .tl-social a:hover{background:rgba(255,255,255,.15)} @media (width <= 700px){ /* Alles auf EINE Zeile, indem die Texte weichen und die Icons als * Schaltflächen stehenbleiben: Adresse ganz raus (sie ist der längste * Eintrag und auf dem Handy am wenigsten dringend), Rufnummern nur noch als * Icon. Einzige Ausnahme ist das Kurzlabel der Notfallzeile — ein blosses * Uhr-Icon würde niemand als Notfallnummer lesen. * * style.css blendet hier pauschal `.topline span` aus. Das war für den alten * Claim gedacht und trifft jetzt die Label INNERHALB der Links, deshalb * zurücknehmen und die Sichtbarkeit gezielt selbst steuern. Danach braucht * `.tl-item` seinen inline-flex zurück — das trifft auch die Adresse, die als * einziger Eintrag ein ist. Ihre Ausblendung muss deshalb dieselbe * Spezifität tragen (drei Klassen), sonst gewinnt der inline-flex und die * Adresse steht wieder da. */ .lp .topline span{display:inline} .lp .topline .tl-item{display:inline-flex} .lp .topline .tl-address{display:none} .lp .tl-item .tl-text{display:none} .lp .tl-label::after{content:""} .lp .topline .wrap{gap:0;min-height:48px} } .lp header{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--lp-lilac-mid)} .lp .navrow nav a{font-weight:700;color:var(--deep);text-underline-offset:6px} .lp .navrow nav a:hover{color:var(--violet);text-decoration:underline} .lp .menu summary{border:2px solid var(--violet);border-radius:var(--lp-radius-btn);color:var(--violet);font-weight:800} /* Das Dropdown hängt an einem festen `top` — das muss zur Header-Höhe passen. */ .lp .menu > nav{top:93px;border:1px solid var(--lp-lilac-mid);border-radius:var(--lp-radius-sm);box-shadow:var(--lp-flat)} .lp .menu > nav a{border-bottom:1px solid var(--lp-lilac-mid);font-weight:700} /* ---------- Hero ---------- * Ohne den geschwungenen Ellipsen-Cut: die geschwungene Kante zwischen den * Farbflächen war das deutlichste „hier wird verkauft"-Signal der Seite. */ .lp .hero{background:var(--violet);color:#fff;position:relative} .lp .heroGrid{grid-template-columns:1.1fr .9fr;gap:56px;min-height:0;padding:88px 0} .lp .hero .eyebrow{color:var(--lp-light)} .lp .hero h1{color:#fff;margin-bottom:22px} .lp .hero .lead,.lp .careerHero .lead{color:#E9E1F8;font-size:1.16rem;max-width:34rem;margin-bottom:0} .lp .actions{gap:16px;margin:30px 0 32px} .lp .hero .btn.ghost,.lp .careerHero .btn.ghost{color:#fff;border-color:#fff} .lp .hero .btn.ghost:hover,.lp .careerHero .btn.ghost:hover{background:#fff;color:var(--violet)} /* Trust-Zeile statt Chip-Leiste: Sticker sehen nach Werbung aus, eine Textzeile * mit Trennpunkten liest sich wie eine Tatsachenbehauptung. */ .lp .trust{gap:6px 18px;font-weight:600;color:#E9E1F8} .lp .trust li{display:inline-flex;align-items:center;gap:8px;font-size:.9rem} .lp .trust li::before{content:"✓";color:#fff;margin:0;font-weight:800} .lp .trust li:not(:last-child)::after{content:"·";margin-left:18px;color:#9B87C8} /* Hero-Foto: liegendes Rechteck statt Kreis — zeigt mehr vom Motiv und wirkt * redaktionell statt dekorativ. Deko-Kreise ersatzlos gestrichen. */ .lp .hero figure img{ aspect-ratio:4/3;min-height:0;width:100%;border:none;border-radius:var(--lp-radius); object-position:50% 30%;box-shadow:var(--lp-soft); } /* ---------- Sektionen ---------- */ .lp .section{padding:96px 0} .lp .sectionHead{gap:60px;margin-bottom:56px} .lp .sectionHead h2{color:var(--deep)} .lp .sectionHead > p{color:var(--muted);font-size:1.12rem} /* Leistungs-Karten → Flat-Cards mit Icon-Kachel links */ .lp .cards{grid-template-columns:repeat(2,1fr);gap:20px} .lp .card{ min-height:0;border:1px solid var(--lp-lilac-mid);border-radius:var(--lp-radius); background:#fff;padding:32px 30px; /* die Linie trägt die Karte, nicht die Füllung */ display:grid;grid-template-columns:56px 1fr;column-gap:20px;align-content:start; transition:border-color .15s ease; } .lp .card:hover{border-color:var(--violet)} .lp .card > span{ grid-column:1;grid-row:1/span 3;margin:0; width:56px;height:56px;border-radius:var(--lp-radius-sm); background:var(--violet);color:#fff; font-family:var(--lp-display);font-weight:800;font-size:1.15rem; } .lp .card h3{grid-column:2;font-size:1.2rem;color:var(--deep);margin-bottom:6px} .lp .card p{grid-column:2;color:var(--muted);font-size:.97rem;margin-bottom:14px} .lp .card b{grid-column:2;color:var(--violet);margin-top:0} /* Zweispalter mit Foto */ .lp .twoCol{gap:56px} .lp .rounded{border-radius:var(--lp-radius)} .lp .ticks{gap:14px} .lp .ticks li{display:flex;align-items:flex-start;gap:12px;color:var(--muted);font-size:1.05rem} .lp .ticks li::before{ content:"✓";flex:none;width:26px;height:26px;margin:2px 0 0; border-radius:50%;background:var(--violet);color:#fff; display:grid;place-items:center;font-size:.78rem; } .lp .link{color:var(--violet);font-weight:800;text-decoration:none;border-bottom:2px solid var(--lp-lilac-mid);padding-bottom:2px} .lp .link:hover{border-color:var(--violet)} /* Redaktionelle Inline-Links im Fließtext unterstreichen: Farbe allein ist kein * ausreichender Träger (1.4.1). Buttons/.link/Breadcrumbs kennzeichnen sich selbst. */ .lp .contentBlock p a,.lp .contentBlock li a,.lp .articleWrap p a,.lp .articleWrap li a{text-decoration:underline} /* Schritte → Heldenreise-Pfad (gestrichelte Linie + Nummern-Dots) */ .lp .steps{display:block;position:relative;max-width:760px;margin:0 auto;padding:10px 0 0} .lp .steps::before{content:"";position:absolute;left:29px;top:24px;bottom:24px;border-left:2px solid var(--lp-lilac-mid)} .lp .steps li{position:relative;background:none;border:none;border-radius:0;padding:0 0 44px 92px} .lp .steps li:last-child{padding-bottom:0} .lp .steps span{ position:absolute;left:0;top:0;margin:0; width:62px;height:62px;border-radius:50%; background:var(--violet);color:#fff;display:grid;place-items:center; font:800 1.3rem/1 var(--lp-display); box-shadow:var(--lp-flat); } .lp .steps li:last-child span{background:var(--lp-violet-deep);box-shadow:var(--lp-flat)} .lp .steps h3{font-size:1.25rem;color:var(--deep);margin-bottom:6px} .lp .steps p{color:var(--muted);margin-bottom:0} /* Kosten-Callout → UMGEDREHT gegenüber der Landingpage: die Sektion liegt auf * dem abgesetzten Ton (wie `.soft`), allein die Kostenkarte rechts trägt das * Violett. Die volle Farbfläche mitten auf der Seite war der größte Lila-Posten; * als Karte behält der Block sein Gewicht, ohne die Seite einzufärben. Violett * bleibt damit die Klammer aus Hero und Abschluss-Band, und der Wechsel * weiß/abgesetzt geht über die ganze Seite sauber auf. * Der Ellipsen-Cut ist raus, deshalb reicht normales Sektions-Maß. */ .lp .callout{background:var(--cream);position:relative} .lp .final{background:var(--violet);position:relative} .lp .calloutGrid{grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:92px 0} .lp .calloutGrid > div{padding:0} .lp .callout h2{color:var(--deep)} .lp .callout .eyebrow.light{color:var(--violet)} .lp .calloutGrid > div:first-child p{color:var(--muted);font-size:1.08rem} /* Die Karte: violett, Text invertiert. */ .lp .calloutGrid > div + div{ background:var(--violet);color:#fff;border-radius:var(--lp-radius); padding:38px 36px;box-shadow:var(--lp-flat); } .lp .callout strong{ display:block;margin-bottom:12px; font-family:var(--lp-display);font-weight:700;font-size:1.2rem;color:#fff; } .lp .calloutGrid > div + div p{color:#DCD1F2} .lp .calloutGrid > div + div .btn.white{background:var(--lp-orange);color:var(--deep);box-shadow:var(--lp-cta)} .lp .calloutGrid > div + div .btn.white:hover{background:var(--violet);color:#fff} .lp .final .eyebrow.light{color:var(--lp-light)} /* Standort-Karten */ .lp .homeGrid{gap:24px} .lp .homeCard{ min-height:0;border:1px solid var(--lp-lilac-mid);border-radius:var(--lp-radius); background:#fff;padding:32px 30px;transition:border-color .15s ease; } .lp .homeCard:hover{border-color:var(--violet)} .lp .homeCard > span{color:var(--violet)} .lp .homeCard h3{color:var(--deep);font-size:1.2rem;margin:12px 0 6px} .lp .homeCard p{color:var(--muted);margin-bottom:16px} .lp .homeCard b{color:var(--violet)} /* FAQ-Akkordeon */ .lp .homeFaq{max-width:820px} .lp .accordions{gap:10px} .lp .accordions details{background:#fff;border:1px solid var(--lp-lilac-mid);border-radius:var(--lp-radius-sm);padding:0;box-shadow:var(--lp-flat);overflow:hidden} .lp .accordions summary{position:relative;padding:20px 68px 20px 24px;font-weight:700;font-size:1.05rem;color:var(--deep);list-style:none} .lp .accordions summary::-webkit-details-marker{display:none} .lp .accordions summary::after{ /* das „+" des LP-Akkordeons; [open] dreht es zum × */ content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%); width:30px;height:30px;border-radius:50%;background:var(--lp-lilac);color:var(--violet); display:grid;place-items:center;font-weight:800;transition:transform .15s ease; } .lp .accordions details[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--violet);color:#fff} /* FAQ-Summary füllt die ganze Breite des `overflow:hidden`-Details → ein äußerer * Ring (auch der globale box-shadow) würde gekappt. Darum HIER ein nach innen * gezogener Fokusring (auf weißer Fläche, gut sichtbar). */ .lp .accordions summary:focus-visible{box-shadow:none !important;outline:3px solid var(--deep) !important;outline-offset:-3px !important} .lp .accordions details p{margin:0;padding:0 24px 22px;color:var(--muted)} .lp .homeFaq p.center{margin-top:38px} /* „Alle Fragen ansehen" klebte am Akkordeon */ /* Abschluss-Band */ .lp .finalGrid{min-height:0;padding:92px 0} .lp .final h2{color:#fff} .lp .final p{color:#DCD1F2;font-size:1.08rem} /* ---------- Footer ---------- */ .lp footer{background:var(--deep);color:#CFC4E6;padding:60px 0 44px;font-size:.92rem} .lp .footerGrid img{width:270px;background:#fff;border-radius:var(--lp-radius-sm);padding:10px 14px;mix-blend-mode:normal;margin-bottom:20px;} .lp .footerGrid b{color:#fff;font-family:var(--lp-display);font-size:1.05rem;margin-bottom:14px} .lp footer a{color:#CFC4E6;text-decoration:underline} .lp footer a:hover{color:#fff;text-decoration:underline} .lp .footnote{border-top:1px solid rgba(255,255,255,.14);color:#9B8DC2} /* Mobile-Schnellkontakt in LP-Optik */ .lp .mobilebar{background:#fff;border-top:1px solid var(--lp-lilac-mid)} .lp .mobilebar a{color:var(--violet)} .lp .mobilebar a + a{background:var(--lp-orange);color:var(--deep)} /* ================================================================== * UNTERSEITEN * Ab hier das Vokabular, das die Startseite nicht kennt. Alle 25 Unterseiten * folgen demselben Bauplan: subHero (Brotkrümel + Kopf) → articleWrap mit * nummerierten contentBlocks → Abschluss-Band. Die Regeln unten bedienen genau * diesen Bauplan, kein Seiten-Sonderfall. * ================================================================== */ /* ---------- Seitenkopf ---------- * Bewusst HELL statt violett wie der Home-Hero: 25 farbige Köpfe wären genau die * Lila-Flut, die wir gerade abgebaut haben. Das Violett trägt auf Unterseiten das * Abschluss-Band unten; oben arbeitet die Typografie. */ .lp .subHero{background:var(--cream);border-bottom:1px solid var(--lp-lilac-mid)} .lp .subHero .wrap{padding-block:26px 66px} .lp .subHero h1{color:var(--deep);font-size:clamp(2rem,3.6vw,2.8rem)} .lp .subHeroGrid{grid-template-columns:1fr .85fr;gap:56px} .lp .subHeroText{max-width:820px} .lp .lead{color:var(--muted);font-size:1.16rem} .lp .breadcrumbs{color:var(--muted);font-size:.86rem;margin-bottom:44px;gap:8px} .lp .breadcrumbs a{color:var(--violet);font-weight:700;text-decoration:none} .lp .breadcrumbs a:hover{text-decoration:underline} /* ---------- Redaktioneller Fließteil ---------- */ .lp .articleWrap{max-width:940px;padding-block:64px 88px} .lp .contentBlock{grid-template-columns:76px 1fr;gap:32px;padding-block:44px;border-bottom:1px solid var(--lp-lilac-mid)} .lp .contentBlock h2{font-size:clamp(1.5rem,2.4vw,1.95rem);color:var(--deep)} .lp .contentBlock p,.lp .contentBlock li{color:var(--muted)} .lp .sectionNumber{ padding-top:8px;color:var(--violet);letter-spacing:.1em; font:800 1rem/1 var(--lp-display); } .lp .stack{padding-block:44px;border-bottom:1px solid var(--lp-lilac-mid)} .lp .stack:last-child,.lp .contentBlock:last-child{border-bottom:0} /* Hinweis- und Entwurfs-Kästen. Das Gelb der Vorlage ist ein Warnton und * schlägt aus dem Farbklang; hier ein ruhiger Kasten mit violetter Kante. * Die Textfarbe braucht `!important`, weil style.css sie so setzt. */ .lp .note,.lp .draftWarning{ background:var(--cream);border-left:3px solid var(--violet); border-radius:0 var(--lp-radius-sm) var(--lp-radius-sm) 0; padding:16px 20px;color:var(--ink) !important; } .lp .draftWarning b{color:var(--deep)} /* ---------- Verweis-Karten ---------- */ .lp .linkCards{gap:20px} .lp .linkCards a{ background:#fff;border:1px solid var(--lp-lilac-mid);border-radius:var(--lp-radius); padding:24px;gap:8px;transition:border-color .15s ease; } .lp .linkCards a:hover{border-color:var(--violet)} .lp .linkCards b{color:var(--violet);font-family:var(--lp-display);font-weight:700;font-size:1.08rem} .lp .linkCards span{color:var(--muted)} .lp .editorialGrid{gap:20px} .lp .editorialGrid article{background:#fff;border:1px solid var(--lp-lilac-mid);border-radius:var(--lp-radius);padding:24px} .lp .editorialGrid article b{color:var(--violet)} /* ---------- Tabellen ---------- */ .lp .tableWrap{border:1px solid var(--lp-lilac-mid);border-radius:var(--lp-radius-sm)} .lp .table-responsive{overflow-x:auto} /* ohne Spectre gäbe es sonst keinen Scroll */ .lp th{background:var(--violet);color:#fff;font-weight:700} .lp th,.lp td{border-bottom:1px solid var(--lp-lilac-mid)} /* ---------- Formulare ---------- */ .lp .formCard{ background:#fff;border:1px solid var(--lp-lilac-mid);border-radius:var(--lp-radius); gap:20px;margin-top:24px; } .lp .formCard label{color:var(--deep);font-weight:700} .lp .field-error{display:block;margin-top:5px;font-size:.85rem;font-weight:700;color:#b91c1c} .lp .formCard input,.lp .formCard select,.lp .formCard textarea{ /* Rand --muted statt --lp-lilac-mid: letzterer lag bei 1,35:1, Bedienelement- * Ränder brauchen 3:1 (1.4.11). */ border:1px solid var(--muted);border-radius:var(--lp-radius-sm); padding:13px 15px;background:#fff; } .lp .formCard input:focus,.lp .formCard select:focus,.lp .formCard textarea:focus{ outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet); } /* Ein einzeln übrig bleibendes Feld füllt die Zeile, statt bei 50 % aufzuhören. * Über `:last-child:nth-child(odd)` statt einer festen Regel fürs E-Mail-Feld: * bei drei Feldern trifft es die E-Mail, bei fünf das fünfte, bei vier gar * nichts. Die Feldliste steht im Markdown (`:::contactform prename phone …`) * und darf sich ändern, ohne dass hier jemand nachzieht. */ .lp .formGrid > label:last-child:nth-child(odd){grid-column:1/-1} .lp .formHint,.lp .formCard label span{color:var(--muted)} .lp .formError{background:#FBE9E7;border-radius:var(--lp-radius-sm)} /* ---------- Scroll-Reveal ---------- * Die `.reveal`-Klasse setzt lp.js (nicht das Markup) — ohne JS bleibt alles sichtbar. * Bewusst knapp gehalten: ein kurzes Aufblenden, kein Hereinfliegen. Die Herzchen * im Hero sind ersatzlos entfallen — Spielerei der Landingpage, nicht der Hauptseite. */ .lp .reveal{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease} /* `translateY(0)` statt `none` — NICHT kosmetisch: ein Element mit transform ist * der Bezugsrahmen für `position:absolute`-Nachkommen. Beim Wechsel auf `none` * verliert es diese Rolle, und jedes absolut positionierte Kind springt in dem * Moment auf den nächsten Vorfahren um. Mit einem neutralen transform bleibt der * Bezugsrahmen über die Animation hinweg derselbe. */ .lp .reveal.in{opacity:1;transform:translateY(0)} /* ---------- Responsive ---------- * Muss die Breakpoints von style.css spiegeln: Media Queries erhöhen die * Spezifität nicht, die `.lp`-Regeln oben würden sonst auch mobil greifen. */ @media (width <= 1000px){ .lp .subHeroGrid{grid-template-columns:1fr;gap:34px} .lp .heroGrid{grid-template-columns:1fr;gap:44px;padding:64px 0} .lp .cards,.lp .homeGrid{grid-template-columns:repeat(2,1fr)} .lp .hero figure img{aspect-ratio:16/9} } @media (width <= 700px){ .lp .menu > nav{top:79px} /* Navrow 78px + 1px LP-Rand */ .lp .section{padding:68px 0} .lp .heroGrid{gap:34px;padding:52px 0} .lp .sectionHead{gap:24px;margin-bottom:38px} .lp .cards,.lp .homeGrid,.lp .twoCol,.lp .calloutGrid,.lp .footerGrid{grid-template-columns:1fr} .lp .twoCol{gap:32px} .lp .hero figure img{aspect-ratio:4/3} .lp .trust{gap:8px 0} .lp .trust li{flex:0 0 100%} .lp .trust li:not(:last-child)::after{content:none} /* untereinander braucht es keine Trennpunkte */ .lp .card,.lp .homeCard{padding:26px 24px} .lp .steps li{padding-left:78px;padding-bottom:36px} .lp .steps span{width:54px;height:54px;font-size:1.15rem} .lp .steps::before{left:25px} .lp .calloutGrid{padding:68px 0;gap:28px} .lp .calloutGrid > div + div{padding:28px 24px} .lp .finalGrid{min-height:0;padding:68px 0} /* Unterseiten: die Nummern-Spalte wandert über den Text statt daneben */ .lp .subHero .wrap{padding-block:20px 46px} .lp .breadcrumbs{margin-bottom:28px} .lp .articleWrap{padding-block:44px 62px} .lp .contentBlock{grid-template-columns:1fr;gap:10px;padding-block:32px} .lp .sectionNumber{padding-top:0} .lp .stack{padding-block:32px} .lp .linkCards,.lp .editorialGrid{gap:14px} } @media (prefers-reduced-motion: reduce){ .lp .reveal{opacity:1;transform:none;transition:none} .lp .btn{transition:none} /* Der Stern-Kreis wächst beim Hover — die Endgrösse bleibt, nur der Weg * dorthin entfällt. Bildzoom ebenso. */ .lp .starGrid .card,.lp .starGrid .card img{transition:none} } /* ================================================================== * FORM-LAYER — Linienführung & Visuals (Kundenwunsch 19.08.2026) * * Auftrag: verspieltere Kanten zwischen den Sektionen, Visuals größer und * stärker mit der Fläche verzahnt. NUR Form — keine Farbe wird angefasst. * * Die Wölbung entsteht über ELLIPTISCHE Eckradien der Sektion selbst * (`border-bottom-*-radius: % px`), nicht über ein eingefärbtes * Pseudo-Element. Das ist der entscheidende Punkt: die Regel muss die Farbe der * Nachbarsektion nicht kennen — sie nimmt der eigenen Fläche an den Ecken * Material weg, dahinter steht der weiße Body. Ein Farbwechsel in der Palette * oben zieht hier also lautlos mit, und kein Trenner kann „danebenliegen". * * Links/rechts sind die Anteile bewusst ungleich (70/30 statt 50/50): der * tiefste Punkt wandert aus der Mitte, und weil die gefärbten Sektionen * abwechselnd nach links und rechts ausschlagen, entsteht über die Seite ein * Zickzack statt einer Reihe gleicher Bögen. Das ist das „Verspielte" — nicht * die Tiefe der Wölbung, die bleibt flach. * * Gewölbt wird ausschließlich, was FARBE trägt (hero · soft · callout · final · * subHero). Die weißen Sektionen dazwischen bleiben gerade — sonst wölbt sich * Unsichtbares und der Rhythmus geht verloren. * * Kommt hinter die Media-Queries oben, deshalb müssen die Grid- und * Abstandswerte am Ende dieses Blocks für Schmalbild NOCHMAL zurückgenommen * werden: Media Queries erhöhen die Spezifität nicht, hier gewinnt sonst * schlicht die spätere Regel. * ================================================================== */ body.lp{ --lp-arc:clamp(26px,4.2vw,58px); /* Wölbungstiefe der Sektionskante — LP: Ellipsen-Cut, ~2× so tief */ --lp-arc-sm:clamp(14px,2.2vw,30px); /* flache Gegenwölbung an Bandoberkanten */ --lp-corner:clamp(26px,4.6vw,64px); /* großer Foto-Eckradius */ --lp-photo:clamp(14px,2.2vw,26px); /* kleiner Foto-Eckradius (die Gegenecke) */ /* Zwei diagonal gegenüberliegende Ecken groß, die anderen klein — ein Foto mit * vier gleichen Radien liest sich als Kachel, dieses als Form. */ --lp-photo-shape:var(--lp-corner) var(--lp-photo) var(--lp-corner) var(--lp-photo); --lp-photo-shape-alt:var(--lp-photo) var(--lp-corner) var(--lp-photo) var(--lp-corner); --lp-radius:20px; /* Karten runder als die 14px von oben — sonst wirken sie neben den Bögen hart */ } /* ---------- Sektionskanten ---------- * Ausschlagrichtung alternierend: hero rechts · soft links · callout rechts · * final rechts (spiegelt den Hero, klammert die Seite oben/unten). */ .lp .hero, .lp .careerHero{ /* der Karriere-Kopf trägt dieselbe Kante wie der Home-Hero */ border-bottom-left-radius:30% var(--lp-arc); border-bottom-right-radius:70% var(--lp-arc); } .lp .section.soft{ border-top-left-radius:70% var(--lp-arc-sm); border-top-right-radius:30% var(--lp-arc-sm); border-bottom-left-radius:70% var(--lp-arc); border-bottom-right-radius:30% var(--lp-arc); } .lp .callout{ border-top-left-radius:30% var(--lp-arc-sm); border-top-right-radius:70% var(--lp-arc-sm); border-bottom-left-radius:30% var(--lp-arc); border-bottom-right-radius:70% var(--lp-arc); } .lp .final{ border-top-left-radius:30% var(--lp-arc); border-top-right-radius:70% var(--lp-arc); } .lp .subHero{ /* Unterseiten: dieselbe Sprache, nur an einer Kante */ border-bottom-left-radius:70% var(--lp-arc); border-bottom-right-radius:30% var(--lp-arc); } /* Die Wölbung frisst Fläche an den Rändern — Innenabstand um ihre Tiefe erhöhen, * sonst rutscht die unterste Textzeile in den Bogen. */ .lp .heroGrid{padding-block:88px calc(88px + var(--lp-arc))} .lp .section.soft{padding-block:calc(96px + var(--lp-arc-sm)) calc(96px + var(--lp-arc))} .lp .calloutGrid{padding-block:calc(92px + var(--lp-arc-sm)) calc(92px + var(--lp-arc))} .lp .finalGrid{padding-block:calc(92px + var(--lp-arc)) 92px} .lp .subHero .wrap{padding-block:26px calc(66px + var(--lp-arc))} /* ---------- Visuals: Startseite ---------- * Das Bild bleibt stehendes Format (annähernd quadratisch statt 4:3) — daneben * wirkt es als zweiter Hauptdarsteller, nicht als Illustration. Die Textspalte * führt trotzdem: 1.3 zu 1.12, damit Headline und Lead nicht zu früh umbrechen. * Diese Zeile ist der aktive Desktop-Wert — die Deklaration weiter oben * (Abschnitt „Hero") wird von hier überschrieben. */ .lp .heroGrid{grid-template-columns:1.3fr 1.12fr;gap:clamp(36px,4.4vw,64px)} .lp .hero figure img{ aspect-ratio:4/3.6;object-position:50% 28%; border-radius:var(--lp-photo-shape); } /* Die Bildunterschrift ist ersatzlos entfallen — den Verzahnungs-Job an der * Bildkante macht jetzt der Finanzierungs-Störer (`.heroBadge`, s.u.). Zwei * Elemente, die sich an derselben Kante über das Foto schieben, wären ein * Gedränge; der Störer beantwortet zusätzlich einen echten Einwand, während * die Caption nur bebilderte, was der Lead schon sagt. */ /* Zweispalter: die Bildseite bekommt den größeren Anteil — welche das ist, * steht im Markup (mal links, mal rechts), deshalb über `:has()` statt über * eine feste Spaltenregel. */ .lp .twoCol{gap:clamp(36px,5vw,72px)} .lp .twoCol:has(> .rounded:first-child){grid-template-columns:1.12fr .88fr} .lp .twoCol:has(> .rounded:last-child){grid-template-columns:.88fr 1.12fr} .lp .rounded{aspect-ratio:4/4.15;border-radius:var(--lp-photo-shape-alt)} .lp .twoCol:has(> .rounded:last-child) .rounded{border-radius:var(--lp-photo-shape)} /* Das Foto im abgesetzten Band ragt über dessen gewölbte Kanten hinaus — der * eine Griff, der aus „Bild liegt in Sektion" ein „Bild durchstößt Sektion" * macht. z-index, weil die folgende Sektion später im DOM steht und eine * gefärbte sonst über das überstehende Stück laufen könnte. */ .lp .soft .rounded{ position:relative;z-index:1; margin-block:calc(var(--lp-arc) * -0.95); } /* ---------- Visuals: Unterseiten ---------- */ .lp .subHeroGrid{grid-template-columns:1fr .96fr;gap:clamp(36px,4.4vw,64px)} .lp .subHeroGrid .rounded{aspect-ratio:4/3.5} .lp .articleWrap figure img,.lp .articleWrap .rounded{border-radius:var(--lp-photo-shape)} /* ---------- Responsive ---------- * Rücknahme der Grid- und Überstandswerte oben (Reihenfolge schlägt hier * Spezifität, s. Blockkopf). Die Wölbung selbst darf bleiben: `clamp()` zieht * sie auf Schmalbild von allein flach. */ @media (width <= 1000px){ .lp .heroGrid{grid-template-columns:1fr;gap:44px;padding-block:64px calc(64px + var(--lp-arc))} .lp .hero figure img{aspect-ratio:16/9} .lp .subHeroGrid{grid-template-columns:1fr;gap:34px} .lp .subHeroGrid .rounded{aspect-ratio:16/9} } @media (width <= 700px){ .lp .heroGrid{gap:34px;padding-block:52px calc(52px + var(--lp-arc))} .lp .hero figure img{aspect-ratio:4/3} /* Einspaltig steht Bild ÜBER Text — ein Überstand würde die Textkante * anschneiden statt die Sektionskante. */ .lp .twoCol, .lp .twoCol:has(> .rounded:first-child), .lp .twoCol:has(> .rounded:last-child){grid-template-columns:1fr;gap:32px} .lp .rounded{aspect-ratio:4/3.2} .lp .soft .rounded{margin-block:0} .lp .section.soft{padding-block:calc(68px + var(--lp-arc-sm)) calc(68px + var(--lp-arc))} .lp .calloutGrid{padding-block:calc(68px + var(--lp-arc-sm)) calc(68px + var(--lp-arc));gap:28px} .lp .finalGrid{padding-block:calc(68px + var(--lp-arc)) 68px} .lp .subHero .wrap{padding-block:20px calc(46px + var(--lp-arc))} } /* ================================================================== * TRUST-BADGES (`.badge`, index.md) * * Runde Aufkleber-Störer. Beide sitzen jetzt im Seitenkopf, aber in zwei * verschiedenen Rollen — deshalb zwei Modifier auf derselben Basis: * * .heroBadge — „Über die Pflegekasse finanzierbar", überlappt die rechte * untere Ecke des Hero-Fotos. Beantwortet den teuersten * Einwand („zahlt das die Kasse?") im ersten Blickfeld und * verzahnt gleichzeitig Foto und Fläche — den Job hatte vorher * die Bildunterschrift, die dafür entfallen ist. * .trustBadge — „Anerkannt nach § 45a SGB XI", eingereiht in die Beleg- * leiste. Die Anerkennung IST ein Beleg und gehört zu den * Siegeln, nicht als freistehender Aufkleber an eine * Sektionskante. Deshalb hier ohne Drehung und im Fluss: in * einer Reihe von Belegen ist ein schiefer Kreis Unruhe. * * Kreis statt Kasten: ein Störer soll AUF der Seite liegen, nicht in ihr. Beim * heroBadge ist die leichte Drehung der ganze Trick — ohne sie wirkt der Kreis * wie ein Bauteil des Rasters, mit ihr wie ein aufgeklebtes Siegel. * * Orange gefüllt, weiße Schrift — dieselbe Signalfarbe wie das Angebots-Band * im Kopf. Beide sind Störer und sollen als eine Familie lesen; Violett hätte * sie in die Fläche eingemeindet, die sie überlagern sollen. * * Kontrast (AA-Fix): Schrift auf --deep statt Weiß (5,7:1 auf --lp-orange); * Weiß lag bei 2,8:1. `small` trägt darum volle Deckung (Opacity würde die * dunkle Schrift Richtung Orange aufhellen und den Kontrast wieder brechen). * ================================================================== */ .lp .badge{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; width:148px;height:148px;flex:none;padding:0 16px; border-radius:50%;background:var(--lp-orange);color:var(--deep);text-align:center; } .lp .badge > span:first-child{line-height:0;opacity:.9} .lp .badge svg{width:26px;height:26px} .lp .badge b{font-family:var(--lp-display);font-weight:700;font-size:.83rem;line-height:1.25} .lp .badge small{font-size:.72rem;line-height:1.3} .lp .section,.lp .callout{position:relative} /* --- heroBadge: an der Bildecke, nicht an der Sektionskante --- * Bezugsrahmen ist `.heroFigure` (der Wrapper um Foto + Störer im Markdown), * NICHT die Sektion: so klebt der Kreis an der Bildecke und wandert mit ihr, * egal wie die Hero-Spalten stehen. Die negativen Offsets lassen ihn halb über * die Kante ragen — genau dieser Überstand verzahnt Foto und Fläche. * `.heroFigure` darf kein `.reveal`-Ziel von lp.js sein (s. `.reveal.in`), * sonst springt der Störer beim Hereinscrollen um. */ .lp .heroFigure{position:relative} .lp .heroBadge{ position:absolute;z-index:3; right:clamp(-24px,-1.8vw,-10px);bottom:clamp(-24px,-1.8vw,-10px); transform:rotate(-6deg); } /* --- trustBadge: einer von mehreren Belegen, nicht der Chef --- * Im Fluss, ungedreht, und auf der Deckelgrösse der Bildsiegel daneben * (`.trustItem img` läuft auf clamp(70px,8vw,100px)). Grösser wäre ein Fehler: * der Kreis weicht ohnehin schon in Form UND Farbe von den Siegeln ab, eine * dritte Abweichung macht ihn nicht wichtiger, sondern zum Fremdkörper in der * Reihe. Die Betonung trägt das Orange, nicht die Fläche. * * Die Schrift ist auf genau diese 100px gerechnet: „Anerkannt nach § 45a SGB * XI" bricht dreizeilig, die längste Zeile („nach § 45a") misst rund 59px, und * auf ihrer Höhe ist der Kreis 80px breit. Wer die Grösse anfasst, muss die * Schriftgrade mitziehen — sonst steht der Text aussen. */ .lp .trustBadge{ width:100px;height:100px; gap:3px;padding:0 10px;transform:none; } .lp .trustBadge svg{width:18px;height:18px} .lp .trustBadge b{font-size:.7rem;line-height:1.18} @media (width <= 700px){ /* Kein Überstand mehr: bei 14px Außenabstand des Wrap würde der Kreis sonst * an der Viewport-Kante kleben. Er rutscht ins Bild und auf 128px — bei 148px * deckt er auf einem 360er-Display fast die halbe Bildbreite ab. * * Schrift und Icon MÜSSEN dabei mit runter. Ein Kreis ist oben und unten am * schmalsten, und hier stehen vier Zeilen drin („Über die Pflegekasse * finanzierbar" bricht dreizeilig, dazu „ab Pflegegrad 1"). Wer nur * width/height zurückdreht, schiebt den Text aus dem Kreis heraus — genau * das war hier schon einmal kaputt. */ .lp .heroBadge{ right:10px;bottom:10px; width:128px;height:128px;gap:3px;padding:0 12px; } .lp .heroBadge svg{width:19px;height:19px} .lp .heroBadge b{font-size:.72rem;line-height:1.18} .lp .heroBadge small{font-size:.62rem;line-height:1.2} } /* ================================================================== * KONTAKT IM ABSCHLUSSBAND (`.finalContact`, index.md) * * Das Formular sitzt im violetten Band ganz unten statt in einer eigenen * Sektion darüber — es ist der stärkste Block der Seite, dort greift es die * meiste Aufmerksamkeit ab, und die Seite endet mit der Handlung statt mit * einem Verweis darauf. * * EIGENE Klasse, NICHT `.finalGrid` erweitert: dieselbe Sektion trägt auf 20 * Unterseiten den schlichten Zweisatz-Abschluss mit Button. Ein Formular-Grid * in `.finalGrid` hätte die alle mitgerissen. * * Aufbau von der Landingpage übernommen (Ansprache + Zusicherungen + Direktruf * links, Formular rechts), Optik von hier: das Formular ist das bestehende * `.formCard`-Template aus tpl/casciafull/contactform/, kein zweites Layout. * * `align-items:start`, weil das Formular deutlich höher ist als der Text * daneben — zentriert hinge die Überschrift in der Luft. * ================================================================== */ .lp .finalContact{ display:grid;grid-template-columns:1fr .88fr; gap:clamp(34px,4.5vw,68px);align-items:start; padding-block:calc(92px + var(--lp-arc)) 92px; } .lp .finalContact .formCard{margin-top:0} /* Die Häkchenliste steht hier auf Violett statt auf Weiß: Text aufhellen und * den Marker invertieren, sonst verschwindet der violette Kreis im Untergrund. */ .lp .final .ticks li{color:#EDE8F7} .lp .final .ticks li::before{background:#fff;color:var(--violet)} .lp .final .phoneBox{border-color:transparent} .lp .final .phoneBox:hover{background:var(--lp-lilac)} @media (width <= 1000px){ .lp .finalContact{grid-template-columns:1fr;gap:38px} } @media (width <= 700px){ .lp .finalContact{padding-block:calc(68px + var(--lp-arc)) 68px;gap:30px} } /* Direktruf — für alle, die nicht tippen wollen. Bewusst als eigene Fläche * neben dem Formular und nicht als weiterer Button: bei dieser Zielgruppe ist * das Telefon der Hauptkanal, nicht die Ausweichlösung. */ .lp .phoneBox{ display:inline-flex;align-items:center;gap:15px; margin-top:28px;padding:15px 22px;text-decoration:none; background:#fff;border:1px solid var(--lp-lilac-mid);border-radius:var(--lp-radius); transition:border-color .15s ease; } .lp .phoneBox:hover{border-color:var(--violet)} .lp .phoneBox > span:first-child{ flex:none;width:46px;height:46px;border-radius:50%; background:var(--lp-lilac);color:var(--violet); display:grid;place-items:center; } .lp .phoneBox small{display:block;color:var(--muted);font-size:.86rem;margin-bottom:2px} .lp .phoneBox b{display:block;color:var(--violet);font-family:var(--lp-display);font-size:1.22rem} /* Erreichbarkeit unter der Nummer — wer nicht weiß, ob jemand rangeht, ruft * im Zweifel nicht an. Kleiner als das Label darüber, damit die Nummer die * dominante Zeile bleibt. */ .lp .phoneBox .hours{margin:3px 0 0;font-size:.8rem} @media (width <= 700px){ .lp .phoneBox{margin-top:22px;padding:13px 18px;gap:12px} .lp .phoneBox > span:first-child{width:40px;height:40px} .lp .phoneBox b{font-size:1.1rem} } /* ================================================================== * ABLAUFPLAN (`.steps`, index.md + karriere.md) * * Der Pfad als Anordnung bleibt — nur das Piktogramm wird zum Hauptdarsteller: * 64px im 132px-Kreis statt einer 1,3rem-Ziffer im 62er. Es soll auf Armlänge * erkennbar sein, nicht als Aufzähl-Marke danebenstehen. * * Der Kreis wird dabei HELLER, nicht kräftiger. Bei 132px wäre die volle * Violettfläche der lauteste Block der Seite gewesen — und hätte ausgerechnet * das Piktogramm erschlagen, das größer werden sollte. Jetzt trägt die * Zeichnung, die Fläche hält sie nur. Deshalb darf hier auch der `.acc`-Pfad * orange sein: auf Hell ist er lesbar, auf Violett wäre er Unruhe gewesen. * Der letzte Schritt bleibt gefüllt — er markiert das Ziel des Pfads. * * Die Schrittnummer wandert als Badge an den Kreisrand und kommt aus einem * CSS-Counter statt aus dem Content. Im Markdown steht jetzt der * Icon-Schlüssel; eine Zahl daneben zu pflegen hieße, sie beim Umsortieren von * Hand nachzuziehen. Im Badge steht sie dunkel auf Orange (5,4:1) — weiß auf * Orange läge bei 2,8:1. * * Die Verbindungslinie startet und endet jetzt auf Kreismitte (66px), damit * sie hinter dem ersten und letzten Kreis verschwindet statt darüber * hinauszustehen. * ================================================================== */ .lp .steps{counter-reset:step;max-width:820px} .lp .steps::before{left:65px;top:66px;bottom:66px} /* min-height MUSS Kreis + Abstand sein, nicht nur den Kreis: `box-sizing: * border-box` (global in style.css) rechnet das padding-bottom hinein. Mit * min-height:132px blieben dem Inhalt 76px, der 132er-Kreis ragte in den * nächsten Schritt und die Kreise klebten ohne Lücke aneinander. */ .lp .steps li{ counter-increment:step;padding:0 0 56px 166px;min-height:188px; /* Überschrift und Text auf Kreismitte statt an dessen Oberkante: der Kreis ist * absolut positioniert und damit aus dem Fluss, der Innenraum des li ist exakt * kreishoch — zentrieren genügt. Bei kurzem Text hing der Absatz sonst oben * und ließ den Kreis unbegleitet nach unten auslaufen. */ display:flex;flex-direction:column;justify-content:center; } .lp .steps li:last-child{min-height:132px} .lp .steps span{width:132px;height:132px;background:var(--lp-lilac);color:var(--violet)} .lp .steps span svg{display:block;width:76px;height:76px} .lp .steps p:last-child{margin-bottom:0} .lp .steps svg .acc{stroke:var(--lp-orange)} .lp .steps li:last-child span{background:var(--violet);color:#fff} .lp .steps li:last-child svg .acc{stroke:#fff} .lp .steps li::before{ content:counter(step); position:absolute;left:101px;top:4px;z-index:2; width:34px;height:34px;border-radius:50%; background:var(--lp-orange);color:var(--deep); display:grid;place-items:center; font:800 .95rem/1 var(--lp-display); } @media (width <= 700px){ /* 132px Kreis plus Text ginge auf 390px nicht mehr auf — der Kreis schrumpft, * das Piktogramm bleibt aber überproportional groß (46 statt 64 bei 96er Kreis). */ .lp .steps::before{left:47px;top:48px;bottom:48px} .lp .steps li{padding:0 0 40px 120px;min-height:136px} /* 96 Kreis + 40 Abstand, s.o. */ .lp .steps li:last-child{min-height:96px} .lp .steps span{width:96px;height:96px} .lp .steps span svg{width:56px;height:56px} .lp .steps li::before{left:72px;top:0;width:28px;height:28px;font-size:.8rem} } /* ================================================================== * KARRIERE-KOPF (`.careerHero` + `.careerIntro`, karriere.md) * * Der einzige Seitenkopf des Mandanten, bei dem das Foto die volle Breite * nimmt und die Headline daraufliegt — überall sonst steht Bild NEBEN Text * (`.subHeroGrid`). Bewusst nur hier: eine Karriereseite verkauft zuerst * Zugehörigkeit, und dafür braucht das Bild Fläche. Für die Kundenseiten * bleibt der ruhige, helle Kopf richtig — 25 Vollbild-Köpfe wären wieder * die Reizüberflutung, die der LP-Layer gerade abgebaut hat. * * Das Bild kommt als `:::box.figure` in den Media-Container — das Warum steht * unten an der Regel. `object-position` 50% 30%: Gesichter liegen im oberen * Drittel, mittiger Beschnitt köpft sie im breiten Zuschnitt. * * Der Verlauf ist keine Deko, sondern Lesbarkeit — weiße Schrift auf einem * Foto, das der Kunde jederzeit austauschen kann, ist sonst Glückssache. Er * liegt links dicht (dort steht der Text) und läuft nach rechts aus, damit * das Bild nicht zur grauen Fläche wird. * * Unter 700px kippt der Kopf: Text NEBEN Bild wird zu Text UNTER Bild auf * violetter Fläche. Schrift über Foto ist auf 390px nicht mehr sicher * lesbar, und ein Kopf, der nur auf dem Desktop funktioniert, ist keiner. * ================================================================== */ .lp .careerHero{ position:relative;overflow:hidden; background:var(--lp-violet-deep); /* trägt die weiße Schrift, bis das Foto da ist */ min-height:clamp(340px,42vw,560px); display:flex;align-items:flex-end; } /* Das Foto kommt als normales
(`:::box.figure`) — BEWUSST NICHT über * parsers/image.php: dessen Inline-`position:absolute` ankert ohne diese * CSS-Schicht (veralteter Browser-Cache reicht!) am Viewport und legte sich * gestreckt über Topline und Header — der Bug vom 21.08. Ein Bild im Fluss * kann schlimmstenfalls unschön ausfallen, aber nie das Chrome überdecken. */ .lp .careerHeroMedia,.lp .careerHeroMedia figure{position:absolute;inset:0;margin:0} .lp .careerHeroMedia img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} /* Kräftiger als der erste Wurf: rechts der Bildmitte stand die Schrift * praktisch ungeschützt auf dem Foto. */ .lp .careerHeroMedia::after{ content:"";position:absolute;inset:0; background:linear-gradient(96deg, rgb(26 17 50 / .94) 0%, rgb(26 17 50 / .78) 42%, rgb(26 17 50 / .30) 100%); } /* Unterer Innenabstand um die Bogentiefe erhöht — dieselbe Rechnung wie bei * `.heroGrid`, sonst rutscht die Headline in die Wölbung. */ .lp .careerHeroCopy{ position:relative;z-index:1; padding-block:clamp(34px,5vw,74px) calc(clamp(34px,5vw,74px) + var(--lp-arc)); } .lp .careerHeroCopy > *{max-width:42rem} /* KEINE eigene Schriftgröße: die H1 zieht `.lp h1` und ist damit exakt so groß * wie die der Startseite. Eine größere wäre die auffälligste Headline der * ganzen Website gewesen — auf einer Unterseite. */ .lp .careerHeroCopy h1{color:#fff;margin-bottom:18px} .lp .careerHero .breadcrumbs{color:#CFC4E8;margin-bottom:20px} .lp .careerHero .breadcrumbs a{color:#fff} /* Finanzierungs-Störer im Vollbild-Hero (Startseite): ohne Bildecke ankert er * an der Sektion — rechts, über der Bogenkante, wo der Verlauf ausläuft und * das Foto sichtbar ist. Die negativen Offsets der Bildecken-Variante würden * hier vom overflow:hidden der Sektion gekappt. */ .lp .careerHero .heroBadge{ right:clamp(18px,5vw,72px); bottom:calc(var(--lp-arc) + 26px); } /* Zweispaltiger Fließtext unter dem Kopf. Bewusst NICHT `.twoCol`: das * zentriert vertikal — richtig für Bild neben Text, falsch für zwei * Textspalten ungleicher Länge (die kürzere rutschte in die Mitte). */ .lp .careerIntro{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px);align-items:start; } .lp .careerIntro h2{margin-top:0} /* `box.strongline` gibt ein klassenloses `` aus (s. parsers/box.php), * die Gestaltung hängt deshalb am Container — genau wie `.callout strong` * auf der Startseite. */ .lp .careerIntro strong{ display:block;font-family:var(--lp-display);font-weight:700; font-size:1.2rem;line-height:1.3;color:var(--violet); } /* Feinabstände der Banden-Seite: Folgetext klebte sonst am Karten-Raster, die * Randnotiz unterm Ablauf lief auf volle wrap-Breite, und die Buttons stapelten * ihre Marge auf das Sektions-Padding. */ .lp .careerIntro .actions{margin-bottom:0} .lp .editorialGrid + p{margin:30px 0 10px} .lp .steps + .note{max-width:820px;margin:24px auto 0} @media (width <= 700px){ .lp .careerHero{min-height:0;display:block} /* Unter 700px liegt das Foto als eigener Block oben — der Störer wandert * mit auf die Bildfläche, statt im violetten Textteil zu schweben. */ .lp .careerHero .heroBadge{top:12px;right:12px;bottom:auto} .lp .careerHeroMedia{position:relative;height:clamp(210px,54vw,300px)} .lp .careerHeroMedia::after{ background:linear-gradient(180deg,rgb(26 17 50 / .05),rgb(26 17 50 / .45)); } .lp .careerHeroCopy{padding-block:26px calc(30px + var(--lp-arc-sm))} .lp .careerHeroCopy > *{max-width:none} .lp .careerHero .breadcrumbs{margin-bottom:14px} .lp .careerIntro{grid-template-columns:1fr;gap:22px} } /* ================================================================== * TEAMSTIMME (`.quoteBand`, karriere.md) * * Ein Zitat, groß gesetzt, im getönten Band — kein Karussell, keine Karten: * eine einzelne Stimme wirkt wie ein Mensch, drei anonyme wie Deko. Nutzt den * globalen `:::quote`-Parser (blockquote + cite), hier nur die Gestalt. */ .lp .quoteBand{ max-width:820px; padding-block:calc(76px + var(--lp-arc-sm)) calc(76px + var(--lp-arc)); } .lp .quoteBand blockquote{ margin:18px 0 0;border:none;padding:0; font-family:var(--lp-display);font-weight:700; font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.35;color:var(--deep); } .lp .quoteBand blockquote p{margin:0} .lp .quoteBand cite{ display:block;margin-top:18px;font-style:normal; font-family:'Figtree',sans-serif;font-weight:600;font-size:.95rem;color:var(--muted); } /* ================================================================== * PFLEGEGRAD-TABELLE (`.pgTable` > `.pgRow`, pflegekasse.md) * * Aus dem cascialp-Mandanten portiert (dort `.pg-table`): die Balken machen * aus „ca. 26 Stunden" ein Bild — man sieht auf einen Blick, dass ab * Pflegegrad 2 richtig Volumen dahintersteht, ohne eine Zahl lesen zu müssen. * * VIOLETT wie die Kostenkarte im Callout — dasselbe Hausmuster: Kosten-Kästen * tragen das Violett, die Fläche drumherum bleibt hell. Sekundärtext in * #DCD1F2, dem Ton der Kostenkarte. Zebra und Balken laufen über Weiß-Alpha * statt eigener Töne, damit die Karte bei einem Palettenwechsel mitzieht. * Die Balkenbreite steht als `icon`-Prozentwert im Content (wie drüben) — * der Redakteur pflegt Stunden UND Balken an einer Stelle. */ .lp .pgTable{ background:var(--violet);color:#fff; border-radius:var(--lp-radius);padding:34px 32px;box-shadow:var(--lp-flat); } .lp .pgTable h3{color:#fff;font-size:1.25rem;margin-bottom:4px} .lp .pgTable > p{color:#DCD1F2;font-size:.92rem;margin-bottom:18px} .lp .pgRow{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:11px 16px;border-radius:12px;margin-bottom:8px; background:rgb(255 255 255 / .12); } /* nth-of-type statt nth-child: h3 und Absätze zählen sonst mit und * verschieben die Zebra-Parität. Die Zeilen sind die einzigen divs. */ .lp .pgRow:nth-of-type(even){background:rgb(255 255 255 / .05)} .lp .pgRow .pg{font-weight:700;color:#fff;white-space:nowrap} .lp .pgBar{flex:1;height:12px;border-radius:999px;background:rgb(255 255 255 / .22);overflow:hidden} .lp .pgBar i{display:block;height:100%;background:#fff;border-radius:999px} .lp .pgRow .h{font-weight:700;white-space:nowrap;font-size:.95rem} .lp .pgFoot{font-size:.8rem;color:#DCD1F2;margin:14px 0 0} /* § 45a-Störer an der Stunden-Tabelle: als aufgeklebtes Siegel über der * rechten oberen Kartenecke, leicht gedreht und mit Überstand — dieselbe * Sticker-Logik wie der heroBadge. Etwas kleiner als im Hero: die Karte ist * schmaler als ein Hero-Foto. Er steht im Markdown NACH den pgRow-Zeilen, * sonst kippt deren nth-of-type-Zebra. */ .lp .pgTable{position:relative} .lp .pgBadge{position:absolute;z-index:2;width:118px;height:118px} .lp .pgBadge svg{width:22px;height:22px} .lp .pgBadge b{font-size:.74rem} .lp .pgBadge.pgBadgeTop{top:-30px;right:-24px;transform:rotate(6deg)} @media (width <= 700px){ .lp .pgTable{padding:22px 18px} .lp .pgRow{gap:10px;padding:10px 12px} /* Weniger Überstand — negative Offsets würden sonst horizontales Scrollen * provozieren. */ .lp .pgBadge{width:96px;height:96px} .lp .pgBadge.pgBadgeTop{top:-20px;right:-6px} } /* ================================================================== * VORTEILSLEISTE (`.perkBand` > `.perkGrid` > `.perk`, index.md) * * Sechs Piktogramme mit je einer Zeile — als FUSS der Vorteils-Sektion, nicht * als eigene Sektion. Inhaltlich ist es dasselbe Thema wie der Zweispalter * darüber („was sich für Sie ändert"), und eine eigene Sektion mit eigener H2 * hätte daraus zwei Kapitel gemacht, die dasselbe sagen. Deshalb: h3 statt h2, * eine feine Linie als Zäsur statt eines Farbwechsels, gemeinsamer Untergrund. * * Ton bleibt leise — keine Kästen, keine Flächen, nur Icon über Text. Der * Zweispalter darüber trägt das Gewicht, das hier ist seine Auflistung. * * Die Icons liefert CasciafullIcons::get() als Outline-Pfade mit * `currentColor`. Der `.acc`-Pfad in jedem Icon ist die einzige Stelle, an der * Orange sitzt — ein Detail je Piktogramm, gesteuert von hier statt im SVG * verdrahtet, damit ein Farbwechsel eine CSS-Zeile bleibt. * ================================================================== */ .lp .perkBand{ margin-top:clamp(46px,6vw,76px);padding-top:clamp(38px,4.5vw,58px); border-top:1px solid var(--lp-lilac-mid); } .lp .perkBand h3{ text-align:center;color:var(--deep); font-size:clamp(1.2rem,1.9vw,1.5rem);margin-bottom:clamp(26px,3.4vw,44px); } .lp .perkGrid{ display:grid;grid-template-columns:repeat(6,1fr); gap:clamp(16px,2.4vw,32px);align-items:start; } .lp .perk{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center} .lp .perk > span{color:var(--violet);line-height:0} .lp .perk svg .acc{stroke:var(--lp-orange)} .lp .perk b{color:var(--muted);font-weight:600;font-size:.95rem;line-height:1.45;max-width:15rem} @media (width <= 1000px){ .lp .perkGrid{grid-template-columns:repeat(3,1fr);gap:32px 20px} } @media (width <= 700px){ /* Zwei je Zeile — bei einer Spalte wird aus der Leiste eine lange Liste und * die Atempause ist weg. Seit es sechs sind, gehen die Reihen glatt auf; die * Sonderregel, die das fünfte zentriert unter die anderen setzte, ist raus. */ .lp .perkGrid{grid-template-columns:repeat(2,1fr);gap:28px 14px} .lp .perk b{font-size:.9rem} } /* ================================================================== * LEISTUNGS-KACHELN MIT FOTO — sechs Karten im Stern * * Hier standen zwei Entwürfe zur Wahl (`.cardsPhoto` als Raster gegen * `.starGrid` als Kreis). Entschieden wurde der Stern; das Raster ist samt * seiner Selektoren entfernt. Ein neuer Anlauf kostet nur einen zweiten * Container-Modifier — die Karte selbst liegt unter `.starGrid .card` und ist * von der Anordnung unabhängig. * * Das Foto liegt als hinter dem Text, nicht als background-image: so * greifen lazy-loading und der Bild-Cache, und der Austausch pro Karte läuft * über das Markdown statt über eine CSS-Regel je Kachel. * ================================================================== */ /* ---------- Die Foto-Karte ---------- * Grundzustand. Der Stern ist weiter unten nur eine Zutat für breite Viewports; * darunter bleibt exakt diese Karte stehen. Vorher war der Stern der * Grundzustand und wurde schmal zurückgebaut — dabei blieben `p` und `b` * ausgeblendet und es standen nackte Kacheln da. * * `display:flex` ist hier nicht Geschmack, sondern Pflicht: die Basiskarte * (.lp .card) ist ein Grid mit `56px 1fr`, und `.lp .card h3` sitzt fest in * `grid-column:2`. Ohne Wechsel des Anzeigemodus klebt der Titel in der rechten * Spalte und wird beschnitten. */ .lp .starGrid .card{ position:relative;overflow:hidden;border:none;background:var(--deep); display:flex;flex-direction:column;justify-content:flex-end; min-height:260px;padding:26px 24px;border-radius:var(--lp-radius); } .lp .starGrid .card img{ position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover; transition:transform .45s ease; } /* Verlauf statt Flächen-Overlay: oben bleibt das Motiv lesbar, unten trägt es * den Text. Der dunkelste Punkt liegt bei 88 % — dort steht die Schrift. */ .lp .starGrid .card::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(42,29,78,.12) 0%,rgba(42,29,78,.55) 46%,rgba(42,29,78,.88) 100%); } .lp .starGrid .card h3,.lp .starGrid .card p,.lp .starGrid .card b{position:relative;z-index:2} .lp .starGrid .card h3{color:#fff;font-size:1.24rem;margin-bottom:6px} .lp .starGrid .card p{color:#EDE8F7;font-size:.95rem;margin-bottom:12px} .lp .starGrid .card b{color:#fff} /* Die Nummer verlässt die Grid-Spalte der Basiskarte und wird zur Ecken-Marke. */ .lp .starGrid .card > span{ position:absolute;top:20px;left:24px;z-index:2; width:44px;height:44px;border-radius:var(--lp-radius-sm); background:rgba(255,255,255,.18);color:#fff;font-size:1rem; } .lp .starGrid .card:hover img{transform:scale(1.06)} /* Der Stern-Container ist bis 1000px ein ganz normales Raster — das ist sein * Grundzustand, nicht sein Notfall. */ .lp .starGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .lp .starGrid .starCenter{ grid-column:1/-1;width:100%;height:auto;aspect-ratio:16/7;margin:0; border-radius:var(--lp-radius);object-fit:cover; } @media (width <= 700px){ .lp .starGrid{grid-template-columns:1fr} .lp .starGrid .card{min-height:230px;padding:22px 20px} .lp .starGrid .card > span{top:16px;left:20px;width:40px;height:40px} .lp .starGrid .starCenter{aspect-ratio:16/9} } /* ---------- Variante B: der Stern, ab 1001px ---------- * Sechs runde Foto-Buttons auf einem Kreis um ein Motiv. Bewusst als * min-width-Query: schmaler säßen die Kreise übereinander und die * Trefferflächen würden sich verdecken. Alles hier ist reine Zutat — fällt die * Query weg, steht die Karte von oben unverändert da. * * Die Position kommt als fertiger X/Y-Versatz, NICHT als * `rotate() translate() rotate()`-Kette. Der Grund ist Robustheit: bei der * Kette verwirft ein einziger ungültiger Teilausdruck die komplette * transform-Deklaration, die Karte fällt auf `top/left:50%` ohne Zentrierung * zurück, und aus dem Kreis wird ein versetzter Teilkreis. Hier ist jeder Wert * eine schlichte Zahl: Radius 310 auf 60°-Schritten, also ±310 bzw. * ±268/±155 (cos30·310 und sin30·310). Zwischen Kartenrand und Mittelbild * bleiben so ~60px Luft, außen ~30px zum Containerrand. */ @media (width >= 1001px){ .lp .starGrid{position:relative;display:block;aspect-ratio:1;width:min(100%,880px);margin:0 auto} .lp .starGrid .card{ position:absolute;top:50%;left:50%;width:200px;aspect-ratio:1;min-height:0; padding:0;border-radius:50%;justify-content:center;align-items:center;text-align:center; transition:width .3s ease; } /* Nur `width` — die Höhe zieht `aspect-ratio:1` mit, auch während der * Transition. Eine zweite Deklaration wäre nicht nur überflüssig, sie würde * die aspect-ratio überstimmen und müsste bei jeder Grössenänderung * mitgepflegt werden. * * Der Kreis wächst aus seinem Mittelpunkt: `translate(-50%,-50%)` rechnet auf * die eigene Box, die neue Grösse zentriert sich also von selbst auf dem * Radius. Deshalb kein Nachfassen an den sechs Positionen. * * 250px ist die Obergrenze, die die Geometrie hergibt: benachbarte Mittelpunkte * liegen 310px auseinander (2·310·sin30°), zwei 250er berühren sich bei 250px — * 60px Luft. Nach aussen endet der Kreis bei 440+310+125 = 875px in einem * 880er Container. Wer den Radius oder die Containerbreite anfasst, muss hier * nachrechnen, sonst überlappen die Trefferflächen oder es wird beschnitten. */ .lp .starGrid .card:hover, .lp .starGrid .card:focus-visible{width:250px;z-index:2} .lp .starGrid .card:nth-of-type(1){transform:translate(-50%,-50%) translate(0,-310px)} .lp .starGrid .card:nth-of-type(2){transform:translate(-50%,-50%) translate(268px,-155px)} .lp .starGrid .card:nth-of-type(3){transform:translate(-50%,-50%) translate(268px,155px)} .lp .starGrid .card:nth-of-type(4){transform:translate(-50%,-50%) translate(0,310px)} .lp .starGrid .card:nth-of-type(5){transform:translate(-50%,-50%) translate(-268px,155px)} .lp .starGrid .card:nth-of-type(6){transform:translate(-50%,-50%) translate(-268px,-155px)} /* Im Kreis trägt die Karte nur den Titel — Fließtext in 206px wäre unlesbar. * Er steht trotzdem im Markdown und erscheint schmal wieder. */ .lp .starGrid .card > span,.lp .starGrid .card > p,.lp .starGrid .card > b{display:none} /* Feste 200px statt „Kartenbreite minus Padding": beim Hover wächst die Karte * auf 250px, und mit ihr würde die Zeilenlänge wachsen — der Titel bräche neu * um, mitten in der Bewegung. Das liest als Fehler. border-box, die 20px * Padding stecken also drin: Textbreite 160px, exakt wie im Ruhezustand. * * 1.2rem ist ebenfalls gerechnet, nicht gegriffen: 19,2px fett liegt über der * WCAG-Schwelle für „large text" (18,66px fett). Damit sinkt die geforderte * Kontrastschwelle von 4,5:1 auf 3:1 — und genau das kauft die hellere * Bildfläche unten. Wer die Schriftgrösse wieder senkt, muss den Schleier * zurückdrehen. */ .lp .starGrid .card h3{margin:0;width:200px;padding:0 20px;font-size:1.2rem;line-height:1.3} /* Kontrast UND Bildhelligkeit — RADIAL statt flächendeckend. * * Vorher lag hier eine geschlossene Fläche mit .74; die trug den Text, machte * aus dem Foto aber eine eingefärbte Scheibe. Der Titel steht mittig, also * braucht auch nur die Mitte Deckung: der Verlauf hält im Zentrum .55 und * läuft zum Rand auf .06 aus. Der Außenring bleibt damit nahezu unbehandelt, * und genau dort sitzt der Bildkontext, an dem das Auge die Helligkeit misst. * Weich auslaufend, also ohne die harte Kante eines Balkens. * * .40 im Zentrum ist gerechnet, nicht gegriffen: über einem mittelhellen * Motiv ergibt das rund 3,9:1 für Weiss. Möglich wird der niedrige Wert erst * durch den Schriftgrad unten — 19,2px fett gilt als „large text", da genügen * 3:1 statt 4,5:1. Die beiden Werte hängen zusammen; einer allein geändert * kippt die Rechnung. * * Der Schatten zählt für WCAG nicht mit, trägt real aber den Rest: eng+hart * trennt die Buchstabenkante, weit+weich hebt sie aus unruhigen Bildpartien. * Er ist die Reserve für helle Bildstellen, an denen die Rechnung oben von * einem mittleren Motiv ausgeht. */ .lp .starGrid .card::after{ background:radial-gradient(circle at 50% 50%, rgba(42,29,78,.4) 0%, rgba(42,29,78,.36) 38%, rgba(42,29,78,.2) 63%, rgba(42,29,78,0) 100%); } .lp .starGrid .card h3{text-shadow:0 1px 2px rgba(20,12,40,.7),0 2px 14px rgba(20,12,40,.55)} .lp .starGrid .starCenter{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:300px;height:300px;aspect-ratio:1;border-radius:50%; } /* Bildmarke in der Mitte des Team-Fotos — NUR hier, nur im Stern. * * Als `::before` des Containers statt als Element im Markdown: das Zeichen * ist reine Dekoration der Stern-Anordnung und existiert unterhalb 1001px * nicht. Im Content stünde es sonst auf jeder Breite und der Redakteur * müsste ein Bild pflegen, das er nirgends sieht. `.starCenter` ist ein * und kann selbst kein Pseudo-Element tragen, deshalb hängt es am * Container. * * `z-index` ist nötig, nicht kosmetisch: `.starCenter` steht später im DOM * und läge sonst über dem Zeichen (beide positioniert, beide z-index auto). * * Die Grafik ist `cascia-care-mark.png` — aus dem Logo herausgelöst, nur * Hand + Dach + Herz, ohne Schriftzug (203×185, transparent). Die Kanten * sind entmattet: im Logo lagen sie als Weiss-Mischung auf weissem Grund, * diese Mischung ist in echtes Alpha zurückgerechnet. Auf dunklem Foto gäbe * es sonst einen weissen Saum. * * Komplett weiß (El-Commandante-Ansage 21.08.): brightness(0) löscht die * Logofarben auf Schwarz, invert(1) kippt auf Weiß — die Schatten laufen * NACH der Umfärbung, sonst würden sie mit invertiert. Der Schatten trennt * das weiße Zeichen von hellen Bildpartien, auf denen es sonst verschwindet. */ .lp .starGrid::before{ content:"";position:absolute;top:65%;left:50%;z-index:1; width:30px;aspect-ratio:203/185; transform:translate(-50%,-50%); background:url(assets/cascia-care-mark.png) center/contain no-repeat; filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(20,12,40,.4)) drop-shadow(0 6px 16px rgba(20,12,40,.45)); pointer-events:none; } } /* ================================================================== * TRUSTBAR (`.trustband` > `.trustbar` > `.trustItem`, index.md) * * Liegt direkt unter dem Hero im Weiß — keine eigene Fläche, keine Wölbung. * Das ist Absicht: die Leiste soll die Wölbung des Hero auffangen, nicht mit * ihr konkurrieren. Deshalb auch kein `.section`-Padding, sondern ein eigenes, * deutlich knapperes — eine Belegleiste ist eine Fußnote zum Hero, kein * eigenes Kapitel. * * Bestückt mit den `_entwurf-siegel-*.svg` — PLATZHALTERN, erkennbar am * gestrichelten Rand und am roten ENTWURF-Band. Sie stehen hier, damit der * Kunde die Leiste beurteilen kann, bevor echte Siegel vorliegen. Vor Go-Live * müssen alle fünf ersetzt oder der Block entfernt sein — ausgedachte * Gütesiegel sind nach UWG §5 abmahnfähig. * * Der Zweig in parsers/box.php nimmt daneben auch reinen Text (Kennung + Zeile * darunter) statt `src`, falls es am Ende keine Bildsiegel gibt. * ================================================================== */ /* display:none (21.08. abends, El-Commandante-Ansage) — die ENTWURF-Siegel * stehen noch ohne Belege (siehe arch/offene-punkte.md, Punkt C). Markup * bleibt in index.md/karriere.md: display wieder freigeben, sobald echte * Siegel da sind. */ .lp .trustband{display:none;padding-block:clamp(30px,4vw,46px)} .lp .trustbar{ display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center; gap:clamp(12px,1.8vw,20px); } .lp .trustItem{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-width:190px;padding:16px 22px;text-align:center; border:1px solid var(--lp-lilac-mid);border-radius:var(--lp-radius); } .lp .trustItem b{ font-family:var(--lp-display);font-weight:800;font-size:1.05rem; color:var(--violet);letter-spacing:-.01em; } .lp .trustItem span{color:var(--muted);font-size:.9rem} /* Bild-Variante: das Siegel trägt seine eigene Form mit, deshalb rahmenlos. */ .lp .trustItem:has(img){border:none;padding:0;min-width:0} .lp .trustItem img{height:clamp(70px,8vw,100px);width:auto;max-width:100%;object-fit:contain} @media (width <= 700px){ /* Zwei je Zeile statt Einspalter — vier volle Breiten wären eine Wand. * * GRID statt Flex, seit der Störer in der Leiste steht: er soll eine eigene * Zeile bekommen, aber ein Kreis bleiben. In Flex geht das nicht — dort * erzwingt man den Umbruch nur über `flex-basis:100%`, und das zieht das * Item selbst auf volle Breite, aus dem Kreis wird eine Ellipse. Im Grid * trennt `grid-column` (Zeile) sauber von `justify-self` (Größe). */ .lp .trustband{padding-block:28px} .lp .trustbar{display:grid;grid-template-columns:1fr 1fr;gap:10px} .lp .trustItem{min-width:0;padding:14px 12px} .lp .trustItem b{font-size:.98rem} .lp .trustItem span{font-size:.84rem} /* Normale Zelle, KEINE eigene Zeile: sechs Kacheln ergeben so drei volle * Reihen. Mit einer Vollzeile für den Störer blieben fünf Siegel übrig und * die Leiste endete auf 1-2-2-1, also mit einem halbbreiten Waisen unten. * `justify-self` zentriert den Kreis in seiner Zelle, statt ihn zu dehnen. */ .lp .trustBadge{justify-self:center;width:92px;height:92px} } /* ================================================================== * ANGEBOTS-BAND (`.promo`) * * Quelle ist der Redaktionstext: `:::box.promo` in der index.md, gerendert vom * promo-Zweig in parsers/box.php. Damit liegt das Angebot im Admin-Editor — * Block löschen = Band weg. Nur das Geschenk-SVG steckt im Parser, weil es am * CSS hängt und kein Redakteur SVG-Pfade pflegen soll. * * Trägt --lp-orange als Fläche. Das Band kündigt ein befristetes Geschenk an * (kostenfreie Kennenlernstunde) — es SOLL lauter sein als der Hero, weil es * der einzige Platz ist, an dem das Angebot überhaupt auftaucht. Damit trägt * hier ausnahmsweise die Fläche das Signal, nicht nur das Icon; Versalien * ziehen zusätzlich an. Das Icon wechselt deshalb auf Weiß — orange auf orange * wäre unsichtbar —, der Hover vertieft die eigene Fläche (--lp-orange-deep) * statt in die Violett-Familie zu springen. * * ACHTUNG Kontrast: Weiß auf --lp-orange sind ~3,1:1 — unter WCAG AA (4.5:1) * für Fließtext dieser Größe. AA-Fix: Schrift auf --deep (5,7:1), Hover kippt * auf Violett mit weißer Schrift (Orange-deep + dunkle Schrift läge bei 3,9:1). * * Bewusst FLACH, ohne die Wölbung des Form-Layers: die Kante darunter gehört * dem Hero. Zwei geschwungene Kanten übereinander wären Unruhe, keine Führung. * * Vollständig hier statt in style.css, weil das Band im Original-Theme nicht * existiert. Steht hinter den Media-Queries oben, bringt seine eigenen mit. * ================================================================== */ .lp .promo{ display:block;text-decoration:none; background:var(--lp-orange);color:var(--deep); /* Versalien brauchen Laufweite, sonst kleben sie — knapp gehalten, das Band * ist keine Eyebrow (die läuft mit .15em deutlich weiter). */ font-size:.94rem;text-transform:uppercase;letter-spacing:.04em; transition:background-color .15s ease; } .lp .promo:hover{background:var(--violet);color:#fff} .lp .promo .wrap{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:4px 11px;min-height:48px;padding-block:10px; } /* Weiß wie die Schrift — auf der orangen Fläche wäre Orange unsichtbar. * Dekorativ (aria-hidden), trägt keine Information. */ .lp .promo svg{flex:none;color:var(--deep)} /* Kein eigener Ton für die Zusatzzeile — sie erbt das Weiß des Bandes, genau * wie in der topline darüber. Die Hierarchie trägt das Fettgewicht. */ .lp .promo b{font-weight:700} .lp .promo:hover b{text-decoration:underline;text-underline-offset:3px} @media (width <= 700px){ /* Umbruch statt Kürzung — die Zusatzzeile trägt die Einschränkung * („für Neukundinnen"), die darf nicht wegfallen. */ .lp .promo{font-size:.86rem} .lp .promo .wrap{gap:2px 9px;padding-block:9px;text-align:center} } /* ================================================================== * TEAMS VOR ORT (`.teamGrid` > `.teamCard`, kontakt.md) * * Zwei gleichrangige Karten. Bewusst NICHT `.homeCard` wiederverwendet: die ist * ein Link auf eine Unterseite und trägt ihre „Mehr erfahren"-Zeile; hier steht * eine Anschrift, die für sich gelesen wird. Deshalb ein eigener, stiller * Container aus dem generischen box-Zweig — kein neuer Dispatch nötig. * ================================================================== */ .lp .teamGrid{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,20px);margin-top:26px; } .lp .teamCard{ background:#fff;border:1px solid var(--lp-lilac-mid); border-radius:var(--lp-radius);padding:26px 24px; } .lp .teamCard h3{ color:var(--violet);font-family:var(--lp-display); font-size:1.15rem;margin:0 0 12px; } /* Die Anschrift ist der Kern der Karte — sie trägt Farbe und Gewicht, nicht die * Zeile darunter. `.plines` liefert sie als einzelnen

mit
. */ .lp .teamCard p{color:var(--ink);font-weight:600;margin-bottom:14px} .lp .teamCard .ticks{margin-bottom:14px} .lp .teamCard .ticks li{color:var(--muted);font-size:.95rem} /* Direktwahl in der Ortskachel (Startseite): Hörer + Nummer statt Gebiets- * Häkchen. Die phoneBox wird zur schlichten Zeile — die Karte ist schon die * Kachel, eine Kachel in der Kachel wäre zu viel Chrom. */ .lp .teamCard .phoneBox{margin-top:0;padding:0;background:none;border:0;gap:10px} .lp .teamCard .phoneBox > span:first-child{width:32px;height:32px} .lp .teamCard .phoneBox b{font-size:1.02rem} .lp .teamCard .phoneBox small:empty{display:none} .lp .teamCard .phoneBox:hover b{text-decoration:underline} @media (width <= 700px){ .lp .teamGrid{grid-template-columns:1fr} } /* ================================================================== * EINSATZGEBIET-KARTE (`.nrwmap` > `.nrwSvg`, kontakt.md) * * Die Grafik kommt aus lib/nrwmap.php. Hier liegt AUSSCHLIESSLICH die Farbe — * das SVG bringt keine mit, damit ein Palettenwechsel nicht in PHP stattfindet. * * Die Hierarchie ist der ganze Zweck: Landesfläche als ruhiger Ton, Städte in * Grau, Büros in Orange mit Ring. Wer die drei Ebenen gleich laut macht, * zerstört die Aussage — man soll „ganz NRW" sehen und darin zwei Punkte. * ================================================================== */ .lp .nrwmap{margin-top:26px} .lp .nrwSvg{display:block;width:100%;max-width:560px;margin:0 auto;height:auto} .lp .nrw-outline{fill:var(--pale);stroke:var(--violet);stroke-width:2;stroke-linejoin:round} /* Gebietsteilung Hürth | Werl — gestrichelt und halbtransparent: Orientierung, * keine harte Grenze. Punktstrich statt Strich, damit sie nicht mit dem * Umriss konkurriert. */ .lp .nrw-divide{fill:none;stroke:var(--violet);stroke-width:2.5;stroke-dasharray:1 9;stroke-linecap:round;opacity:.6} .lp .nrw-cities circle{fill:var(--muted)} .lp .nrw-cities text{fill:var(--muted);font-size:13px;font-weight:600} /* Der Ring ist eine Fläche mit niedriger Deckung, kein Strich: so bleibt er * auch dort sichtbar, wo er die Landesfläche verlässt. */ .lp .nrw-ring{fill:var(--lp-orange);opacity:.22} .lp .nrw-dot{fill:var(--lp-orange)} .lp .nrw-offices text{ fill:var(--deep);font-family:var(--lp-display); font-size:16px;font-weight:800; } .lp .mapNote{color:var(--muted);font-size:.9rem;text-align:center;margin-top:14px} /* ---------- Einsatzgebiet — erste Reihe der Abschluss-Sektion ---------- * Karte und Zentralen stehen INNERHALB von `.final`, nicht in einer eigenen * Sektion. Das ist der Punkt: die Seite hat unten genau einen Kontaktbereich. * Eine zweite Sektion mit eigener Rufnummer daneben wäre ein zweiter Abschluss * — der Leser fragt sich dann, welcher der richtige ist. * * Reihenfolge innerhalb der Sektion: erst der Kontakt, dann das Einsatzgebiet. * Das Formular bekommt damit den Platz direkt unter der Bogenkante, wo der * Blick nach dem Scrollen zuerst landet; die Karte arbeitet dahinter als * Beleg nach — „und das alles in ganz NRW". * * Die Kartenspalte bekommt WENIGER Platz als die Textspalte: die Karte ist * quadratisch und zöge die Sektion bei gleicher Breite in die Länge. * `align-items:center`, weil beide Spalten unterschiedlich hoch bauen. */ .lp .coverageGrid{ display:grid;grid-template-columns:.92fr 1.08fr; gap:clamp(32px,4vw,64px);align-items:center; } .lp .coverageGrid .nrwmap{margin-top:0} .lp .coverageGrid .nrwSvg{max-width:440px} .lp .coverageGrid .teamGrid{margin-top:22px} /* Die Karte war für hellen Grund gezeichnet — auf Violett kehren sich die * Werte um: Landesfläche als aufgehellte Fläche, Beschriftung hell. Nur Ring * und Kern der Büros bleiben orange; sie sind auf beiden Untergründen das * Lauteste, und genau das sollen sie sein. */ .lp .final .nrw-outline{fill:rgba(255,255,255,.10);stroke:rgba(255,255,255,.5)} .lp .final .nrw-divide{stroke:rgba(255,255,255,.65)} .lp .final .nrw-cities circle{fill:rgba(255,255,255,.55)} .lp .final .nrw-cities text{fill:#DCD1F2} .lp .final .nrw-offices text{fill:#fff} /* Teamkarten hier NICHT weiss: das Formular ist die einzige weisse Fläche in * dieser Sektion und soll es bleiben — Weiss markiert hier die Handlung. Die * Karten bekommen deshalb die aufgehellte Variante wie im Kosten-Band. */ .lp .final .teamCard{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)} .lp .final .teamCard h3{color:#fff} .lp .final .teamCard p{color:#EDE8F7} .lp .final .teamCard .ticks li{color:var(--lp-light)} /* Auf dem violetten Band: weißer Hörer-Dot, weiße Nummer (wie die Häkchen-Optik * dort), und der lilac-Hover der großen phoneBoxen bleibt draußen. */ .lp .final .teamCard .phoneBox:hover{background:none} .lp .final .teamCard .phoneBox > span:first-child{background:#fff;color:var(--violet)} .lp .final .teamCard .phoneBox b{color:#fff} /* Die Karten-Reihe steht oben und trägt deshalb die Bogenkante; die Kontakt- * Reihe folgt darunter und bringt den unteren Abschluss mit. Die Haarlinie * trennt die beiden Gedanken, ohne dass es zwei Sektionen bräuchte. */ .lp .final .coverageGrid{padding-block:calc(92px + var(--lp-arc)) 0} .lp .final .finalContact{ padding-block:clamp(38px,4.4vw,58px) 92px; margin-top:clamp(38px,4.4vw,58px); border-top:1px solid rgba(255,255,255,.16); } /* Steht die finalContact allein im Band (pflegekasse.md), trägt sie Bogenkante * und Abschluss selbst und braucht keine Trennlinie. Strukturell gelöst statt * per Seiten-Klasse: die Sektion entscheidet, nicht die Seite. */ .lp .final .finalContact:first-child{ padding-block:calc(92px + var(--lp-arc)) 92px; margin-top:0; border-top:0; } /* Zwei Direktruf-Flächen untereinander statt nebeneinander: als inline-flex * würden sie sich in der breiten Spalte eine Zeile teilen und als Doppelbutton * lesen. Die Notfall-Fussnote ist lang, deshalb eine Breite zum Umbrechen. */ .lp .finalContact .phoneBox{display:flex;max-width:430px} .lp .finalContact .phoneBox + .phoneBox{margin-top:12px} @media (width <= 1000px){ .lp .coverageGrid{grid-template-columns:1fr;gap:34px} .lp .coverageGrid .nrwSvg{max-width:420px} } @media (width <= 700px){ .lp .final .coverageGrid{padding-block:calc(68px + var(--lp-arc)) 0} .lp .final .finalContact{padding-block:32px 68px;margin-top:32px} .lp .final .finalContact:first-child{padding-block:calc(68px + var(--lp-arc)) 68px;margin-top:0} } /* ------------------------------------------------------------------ * ÜBER-UNS (ueber-uns.md) * * Die Seite lebt von Textfiguren statt neuer Kartentypen — alles reine * Modifier auf dem generischen box-Container: `.wordRow` stellt wenige * Begriffe als Display-Zeile in den Raum (die Zulieferung setzt mehrfach * auf dieses Stilmittel), `.duet` zwei gespiegelte Aussagen nebeneinander, * `.chain` die Verbindungs-Kette als Typo statt Diagramm. Alle Abstände * als margin-top, damit die Blöcke in beliebiger Folge sauber stapeln. * ------------------------------------------------------------------ */ .lp .wordRow{text-align:center;margin-top:40px} .lp .wordRow p{font-family:var(--lp-display);font-weight:800;font-size:clamp(1.4rem,3vw,2.1rem);letter-spacing:-.01em;color:var(--violet);margin:0} /* Editorial-Breitformat: volle Wrap-Breite, flacher Beschnitt für die * grossen Zwischenbilder. Klasse liegt auf dem von `.rounded`. * Beide Motive tragen die Gesichter im oberen Drittel — deshalb Anker * oben statt Bildmitte, sonst schneidet der Beschnitt die Köpfe an. */ .lp .wideShot{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:50% 18%;margin-top:44px} /* Mission in drei Feldern: Bild, Begriff, Absatz. Bewusst kein * `.card` — das ist ein Link, hier gibt es kein Ziel. */ .lp .trioGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px} .lp .trioGrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--lp-radius)} /* Die Durchstoss-Regel des soft-Bands (`.soft .rounded`, negative * margin-block) gewinnt per Spezifität auch über die Kartenbilder — * hier zurückholen, die Karten sollen IM Band liegen. */ .lp .trioGrid .rounded{margin-block:0 16px} .lp .trioGrid h3{font-size:1.15rem;color:var(--deep);margin-bottom:4px} .lp .trioGrid p{color:var(--muted);margin:0} .lp .duet{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px} .lp .duet > div{background:var(--pale);border-radius:var(--lp-radius);padding:26px 30px;text-align:left} .lp .duet p{color:var(--muted);margin:0} .lp .duet strong{display:block;font-family:var(--lp-display);font-size:1.12rem;color:var(--deep);margin-top:10px} /* Verbindungs-Kette: auf Breitbild EINE Zeile mit ↔ zwischen den Gliedern * (vier Wörter untereinander waren ein magerer Turm), schmal gestapelt * mit ↕. Der Pfeil sitzt als ::before im Folge-Absatz, der Wechsel der * Richtung ist nur ein content-Swap im Media Query. */ .lp .chain{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:20px;row-gap:10px;margin:30px 0 26px} .lp .chain p{font-family:var(--lp-display);font-weight:700;font-size:1.3rem;color:var(--deep);margin:0} .lp .chain p + p::before{content:"↔";color:var(--lp-orange);font-weight:800;margin-right:20px} /* Nachsatz unter dem Visions-Zitat (quoteBand kennt sonst nur blockquote). */ .lp .quoteBand > p{color:var(--muted);max-width:46rem;margin:20px auto 0} /* Gründer-Statement: das Portrait haftet unter dem sticky-Header (93px), * während der lange Text rechts durchläuft. Die abgesetzten Kernsätze der * Zulieferung stehen als eigene

-Zeilen — strong bleibt inline, * der Absatz macht den Block; Inline-Betonung im Fliesstext bleibt kursiv. */ .lp .founderGrid{display:grid;grid-template-columns:.62fr 1fr;gap:56px;align-items:start;margin-top:52px} /* Nach den zentrierten Seiten-Köpfen (kein sectionHead auf dieser Seite) * brauchen die Raster einen eigenen Abstand nach oben. */ .lp .center + .editorialGrid{margin-top:44px} .lp .founderCard{position:sticky;top:117px} .lp .founderCard img{width:100%} .lp .founderMeta{margin-top:14px} .lp .founderMeta p{margin:0;color:var(--muted)} .lp .founderMeta strong{font-family:var(--lp-display);color:var(--deep);font-size:1.05rem} .lp .founderCopy p{color:var(--muted);margin:0 0 16px} .lp .founderCopy p:last-child{margin-bottom:0} .lp .founderCopy strong{font-family:var(--lp-display);font-size:1.18rem;color:var(--violet);font-weight:800} @media (width <= 900px){ .lp .trioGrid{grid-template-columns:1fr 1fr} .lp .founderGrid{grid-template-columns:1fr;gap:34px} .lp .founderCard{position:static;max-width:420px} } @media (width <= 700px){ .lp .trioGrid{grid-template-columns:1fr} .lp .duet{grid-template-columns:1fr} .lp .wideShot{aspect-ratio:4/3} .lp .chain{flex-direction:column;align-items:center;row-gap:0} .lp .chain p + p::before{content:"↕";display:block;text-align:center;margin:8px 0} } /* Über-uns-Region — Ortsnamen mit gezeichnetem Wahrzeichen dahinter (Dom, * Wasserturm, Basilika aus dem Icon-Kit, lib/icons.php `landmark`). Das * Violett kommt per currentColor, das Orange sitzt wie überall auf dem * acc-Pfad. Ersetzt die alte Fett-Zeile „Köln · Hürth · Werl". */ .lp .cityRow{display:flex;flex-wrap:wrap;gap:14px 30px;margin:18px 0 22px} .lp .cityItem{display:flex;align-items:center;gap:10px} .lp .cityItem b{font-family:var(--lp-display);font-weight:700;font-size:1.08rem;color:var(--deep)} .lp .cityItem span{display:inline-flex;flex:none;color:var(--violet)} .lp .cityItem svg .acc{stroke:var(--lp-orange)} /* Standorte — Stadtfotos im Kreis statt der Blocknummern (Kundenwunsch * 27.08.): die erste Grid-Spalte wird breiter, das Foto rund beschnitten, * und der geforderte „Kreis darum" ist der violette Ring per box-shadow * (border wäre Teil des Radius und würde ins Bild schneiden). Der letzte * Block (ohne Ort) behält eine leere Nummernspalte, damit das Grid steht. */ .lp .cityBlock{grid-template-columns:110px 1fr} .lp .cityPhoto{width:110px;height:110px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 0 0 3px var(--violet)} @media (width <= 700px){ /* steht NACH dem 700er-Block oben — den Einspalter darum hier wiederholen */ .lp .cityBlock{grid-template-columns:1fr} } /* Bildnachweis (Lizenzpflicht CC BY-SA) — Kleingedrucktes, kein Hinweis-Kasten. * !important, weil schon style.css die note-Farbe mit !important setzt. */ .lp .note.credits{background:none;border:0;padding:0;margin-top:26px;font-size:.8rem;color:var(--muted) !important} .lp .note.credits a{color:inherit;text-decoration:underline}