/* ═══════════════════════════════════════════════════════════════════ LANDINGPAGES · gemeinsame Ebene (Prefix l-) Ergaenzt basis.css, ersetzt sie nicht. Reihenfolge im : basis.css zuerst, lp.css danach. Warum eine eigene Ebene: die dreizehn Orts- und Leistungsseiten sind eine FAMILIE unter den fuenf Hauptseiten, keine Geschwister. Sie teilen sich denselben Bauplan (Hero · vier Punkte · Arbeitsproben · Ablauf · Zitat · Servicegebiet · Fragen), weil sie inhaltlich denselben Bauplan haben. Die Anti-Monotonie-Regel aus GERUEST 6a gilt ausdruecklich fuer die vier Hauptunterseiten — nicht hier: eine Landingpage-Familie SOLL wiedererkennbar sein, sonst wirkt jede wie eine fremde Webseite. Unterschieden wird ueber das Klima (data-welt) und ueber die Welt im Hero, nicht ueber das Layout: webdesign-* → vormittag ki-telefonassistent-* → nacht ki-chatbot-* → nacht softwareentwicklung-* → nachmittag Das merkbare Detail der ganzen Familie ist die SCHILDERREIHE am Horizont. Das ist keine Deko, sondern die Rolle dieser Seiten in der Welt der Hauptseiten: die Hauptseiten sind die Ziele, die Landingpages sind die Schilder an der Strasse, die dorthin zeigen. ═══════════════════════════════════════════════════════════════════ */ /* Der Zweiton fuer h1/h2/h3 steht jetzt in basis.css — er wird auch auf Hauptseiten gebraucht. */ /* ────────── Klima-Ergaenzungen: Himmel und Duenen ────────── */ body[data-welt="vormittag"]{ --l-himmel:linear-gradient(180deg,#FCF5E5 0%,#F9EDD5 34%,#F4E2B8 62%,#EFD7A6 100%); --l-duene-fern:#E9CE9C; --l-duene-nah:#E0BC82; --l-rim:rgba(255,250,236,.75); --l-sonne:radial-gradient(circle,#FFFDF4 0%,#FFF0CE 58%,#F8D9A0 100%); --l-sonne-schein:0 0 60px 20px rgba(255,238,200,.72); --l-schild:#5A3212; } body[data-welt="nachmittag"]{ --l-himmel:linear-gradient(180deg,#F6DCAC 0%,#F1CB92 32%,#E9B878 60%,#E0A868 100%); --l-duene-fern:#DFA663; --l-duene-nah:#CE8F4E; --l-rim:rgba(255,246,224,.6); --l-sonne:radial-gradient(circle,#FFF6E0 0%,#FFE3AE 55%,#F6C078 100%); --l-sonne-schein:0 0 78px 28px rgba(255,206,140,.55); --l-schild:#4A2A12; } body[data-welt="nacht"]{ --l-himmel:linear-gradient(180deg,#100A04 0%,#181007 46%,#241708 74%,#33200B 100%); --l-duene-fern:#2A1B0B; --l-duene-nah:#1C1207; --l-rim:rgba(255,214,150,.22); --l-sonne:radial-gradient(circle,#FFF3D6 0%,#FFD9A0 55%,rgba(255,190,120,0) 100%); --l-sonne-schein:0 0 90px 34px rgba(255,196,120,.28); --l-schild:#0D0804; } /* ────────── Hero: Himmel, zwei Duenen, Sonne, Schilderreihe ────────── */ .l-hero{ position:relative;overflow:clip; min-height:min(70svh,600px); display:flex;align-items:center; padding:clamp(112px,15vh,158px) var(--rand) clamp(52px,8vh,92px); } .l-himmel{position:absolute;inset:0;background:var(--l-himmel)} .l-sonne{ position:absolute;right:13%;top:20%; width:clamp(40px,4.6vw,64px);aspect-ratio:1;border-radius:50%; background:var(--l-sonne);box-shadow:var(--l-sonne-schein); } /* Duenen als sehr breite Ellipsenkuppen — dadurch echte Tiefe ohne SVG und ohne dass eine Datei pro Seite gepflegt werden muss. */ .l-duene{position:absolute;left:-14%;right:-14%;pointer-events:none} .l-duene-fern{ bottom:0;height:34%;background:var(--l-duene-fern); border-radius:50% 50% 0 0 / 82px 58px 0 0; box-shadow:inset 0 2px 0 var(--l-rim); } .l-duene-nah{ bottom:0;height:19%;left:-24%;right:-8%;background:var(--l-duene-nah); border-radius:50% 50% 0 0 / 64px 96px 0 0; box-shadow:inset 0 2px 0 var(--l-rim); } /* Die Schilderreihe: drei Silhouetten, die in die Tiefe kleiner werden. Sie steht rechts, wo der Text nicht hinreicht. */ .l-schilder{position:absolute;right:6%;bottom:22%;display:flex;align-items:flex-end;gap:clamp(14px,2.2vw,30px)} .l-schild{ position:relative;background:var(--l-schild);border-radius:2px; /* eine helle Kante oben: sonst liest sich die Silhouette als Kasten, nicht als beschriftetes Brett */ box-shadow:inset 0 2px 0 var(--l-rim); } /* Der Pfahl laeuft absichtlich lang nach unten — die vordere Duene liegt im Aufbau spaeter und deckt ihn teilweise ab. Das erzeugt die Tiefe, die Prinzip 08 verlangt, ohne ein zweites Bild. */ .l-schild::after{ content:"";position:absolute;left:50%;top:100%;width:2.5px;height:var(--l-pfahl); transform:translateX(-50%);background:var(--l-schild); } .l-schild-1{width:clamp(26px,3.4vw,44px);height:clamp(16px,2vw,26px);opacity:.30;--l-pfahl:30px} .l-schild-2{width:clamp(34px,4.4vw,58px);height:clamp(21px,2.6vw,34px);opacity:.52;--l-pfahl:42px} .l-schild-3{width:clamp(44px,5.6vw,74px);height:clamp(27px,3.3vw,44px);opacity:.78;--l-pfahl:56px} .l-satz{position:relative;z-index:3;max-width:640px} .l-satz .u-lead{max-width:34rem} .l-satz .u-lead b{font-weight:500;color:var(--schrift)} @media(prefers-reduced-motion:no-preference){ .l-satz > *{animation:l-erscheinen .9s ease-out both;animation-delay:.25s} .l-satz > .u-h1{animation-delay:.36s} .l-satz > .u-lead{animation-delay:.52s} .l-satz > .u-handlung{animation-delay:.68s} @keyframes l-erscheinen{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} } @media(max-width:900px){ .l-hero{min-height:auto;padding-bottom:clamp(120px,20svh,190px)} /* .l-duene-nah ist 19% hoch — alles darunter verschwindet dahinter. Erster Versuch stand auf 12% und war weg. */ .l-schilder{right:5%;bottom:23%;gap:12px} } /* Platz fuer die zweizeilige Nav — der Kopf liegt absolut ueber der Welt und reserviert selbst keinen (siehe pruefe-kopf-ueberdeckung.mjs). */ @media(max-width:680px){ .l-hero{padding-top:clamp(150px,22vh,190px)} } /* ────────── Bahn 1 · Was Sie bekommen: vier nummerierte Punkte ────────── Nummern und Haarlinien statt Karten — die Karten gehoeren den Hauptseiten. */ .l-punkte{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,52px) clamp(26px,4vw,64px); margin-top:clamp(30px,5vh,56px); } @media(max-width:760px){.l-punkte{grid-template-columns:1fr}} .l-punkt{padding-top:16px;border-top:2px solid var(--akzent)} .l-punkt-nr{ display:block;margin-bottom:6px; font:500 12px/1 "Synonym",sans-serif;letter-spacing:.18em; text-transform:uppercase;color:var(--akzent); } .l-punkt h3{margin:0 0 8px} .l-punkt p{margin:0;font-size:16px;line-height:1.6;color:var(--schrift-2)} /* ────────── Bahn 2 · Arbeitsproben ────────── */ /* Seit 2026-07-30 stehen hier zwei echte Projekte statt drei bis vier Konzept-Karten. auto-fit statt fester Dreierspalte, damit die Reihe bei zwei Karten voll aufgeht und ein spaeteres drittes Projekt ohne Layout-Arbeit einziehen kann. */ .l-proben{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(18px,2.6vw,32px); margin-top:clamp(28px,4.5vh,50px); } @media(max-width:860px){.l-proben{grid-template-columns:1fr}} .l-probe{ display:flex;flex-direction:column; background:var(--karte);border:1px solid var(--karte-linie);border-radius:14px; padding:clamp(18px,2.2vw,26px);box-shadow:var(--wurf); text-decoration:none;color:inherit;transition:transform .14s ease; } .l-probe:hover{transform:translateY(-2px)} .l-probe-marke{ font:500 12px/1 "Synonym",sans-serif;letter-spacing:.16em; text-transform:uppercase;color:var(--akzent);margin-bottom:10px; } .l-probe h3{margin:0 0 8px} .l-probe p{margin:0 0 14px;font-size:15.5px;line-height:1.58;color:var(--schrift-2)} .l-probe-weg{margin-top:auto;font-size:15.5px;color:var(--schrift);border-bottom:1px solid var(--linie);align-self:flex-start;padding-bottom:2px} .l-echt{ margin-top:clamp(22px,3.4vh,34px);padding:clamp(16px,2.2vw,24px); border-radius:12px;border:1px solid var(--karte-linie); background:linear-gradient(120deg,rgba(162,90,42,.10),rgba(162,90,42,.03)); max-width:820px;font-size:16.5px;line-height:1.62;color:var(--schrift-2); } body[data-welt="nacht"] .l-echt{background:linear-gradient(120deg,rgba(255,217,160,.10),rgba(255,217,160,.03))} .l-echt b{font-weight:500;color:var(--schrift)} .l-echt a{color:var(--schrift);border-bottom:1px solid var(--linie);text-decoration:none} /* ────────── Bahn 3 · Ablauf: vier Schritte an einer Linie ────────── */ .l-weg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px);margin-top:clamp(32px,5vh,58px)} .l-weg::before{ content:"";position:absolute;left:7px;right:7px;top:8px; border-top:2px dashed var(--linie); } .l-schritt{position:relative;padding-top:32px} .l-schritt::before{ content:"";position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:50%; background:var(--akzent);box-shadow:0 0 0 4px var(--grund); } .l-schritt-nr{ display:block;margin-bottom:2px; font:500 12px/1 "Synonym",sans-serif;letter-spacing:.18em; text-transform:uppercase;color:var(--schrift-2); } .l-schritt h3{margin:0 0 3px} .l-schritt-dauer{ display:inline-block;margin-bottom:9px;padding:2px 9px;border-radius:999px; border:1px solid var(--karte-linie); font:500 12px/1.5 "Synonym",sans-serif;letter-spacing:.06em;color:var(--schrift-2); } .l-schritt p{margin:0;font-size:15.5px;line-height:1.58;color:var(--schrift-2)} @media(max-width:820px){ .l-weg{grid-template-columns:1fr;gap:24px} .l-weg::before{left:7px;right:auto;top:6px;bottom:6px;border-top:0;border-left:2px dashed var(--linie)} .l-schritt{padding-top:0;padding-left:36px} .l-schritt::before{top:3px} } /* ────────── Bahn 4 · Das Zitat ────────── */ .l-stimme{ display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,44px); align-items:start;margin-top:clamp(20px,3vh,32px);max-width:940px; } @media(max-width:680px){.l-stimme{grid-template-columns:1fr;gap:20px}} .l-portrait{ flex:none;width:clamp(104px,12vw,152px);aspect-ratio:4/5;border-radius:10px; overflow:hidden;background:var(--karte);box-shadow:var(--wurf); } .l-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;filter:saturate(1.06) sepia(.05)} .l-zitat{margin:0} .l-zitat p{ margin:0;font-family:"Cabinet Grotesk","Segoe UI",sans-serif;font-weight:800; font-size:clamp(19px,2.1vw,26px);line-height:1.34;letter-spacing:-.01em;color:var(--schrift); } .l-zitat cite{ display:block;margin-top:14px;font-style:normal; font:500 12.5px/1.4 "Synonym",sans-serif;letter-spacing:.14em; text-transform:uppercase;color:var(--schrift-2); } /* ────────── Bahn 5 · Servicegebiet ────────── */ .l-orte{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(24px,3.6vh,36px) 0 0;padding:0;list-style:none} .l-orte li{ padding:7px 15px;border-radius:999px;border:1px solid var(--karte-linie); background:var(--karte);font-size:15px;color:var(--schrift-2); } /* ────────── Bahn 6 · Fragen ────────── */ .l-fragen{margin-top:clamp(26px,4vh,44px);max-width:860px} .l-frage{border-top:1px solid var(--karte-linie)} .l-frage:last-child{border-bottom:1px solid var(--karte-linie)} .l-frage summary{ list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative; font-family:"Cabinet Grotesk","Segoe UI",sans-serif;font-weight:800; font-size:clamp(16.5px,1.6vw,19px);line-height:1.34;color:var(--schrift); } .l-frage summary::-webkit-details-marker{display:none} .l-frage summary::after{ content:"";position:absolute;right:6px;top:calc(50% - 4px); width:11px;height:11px;border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent); transform:rotate(45deg);transition:transform .16s ease; } .l-frage[open] summary::after{transform:rotate(-135deg);top:calc(50% - 1px)} .l-frage-text{margin:0 0 20px;font-size:16px;line-height:1.68;color:var(--schrift-2);max-width:62ch} /* ────────── Weiterfuehrende Links unter einer Bahn ────────── */ .l-weiter{display:flex;flex-wrap:wrap;gap:12px 26px;margin:clamp(18px,2.6vh,26px) 0 0} .l-weiter a{ font-size:16px;color:var(--schrift);text-decoration:none; border-bottom:1px solid var(--linie);padding-bottom:2px; } .l-weiter a:hover{border-color:var(--schrift)} /* ────────── Zurueck zur Hauptseite ────────── */ .l-eltern{ margin-top:clamp(30px,5vh,54px);padding-top:20px;border-top:1px solid var(--karte-linie); font-size:16px;color:var(--schrift-2); } .l-eltern a{color:var(--schrift);border-bottom:1px solid var(--linie);text-decoration:none} .l-eltern a:hover{border-color:var(--schrift)}