/* ============================================================ mod_awo_landingpage – additive Styles Baut NUR neue Komponenten, die das Theme (main_v13.css) noch nicht kennt. Alles über die Theme-Variablen, damit es sich ins Farbleitsystem einfügt. main_v13.css bleibt unangetastet. Primärfarbe der Seite = theme-red. Nur die Icon-Cards sind bewusst orange (--clr-orange-*). ============================================================ */ /* --- Farbleitsystem auf dem Modul-Wrapper (unabhängig vom Body) --- Spiegelt die body.theme-* Regeln aus main_v13.css, damit das Modul sein Theme selbst trägt, egal welche Klasse am hängt. --- */ .lp.theme-red{ --clr-theme-main: var(--clr-red-main); --clr-theme-1: var(--clr-red-1); --clr-theme-2: var(--clr-red-2); --clr-theme-3: var(--clr-red-3); --clr-theme-4: var(--clr-red-4); --clr-theme-5: var(--clr-red-5); --clr-theme-6: var(--clr-red-6); --clr-theme-7: var(--clr-red-7); --clr-theme-text: var(--clr-red-text); --clr-theme-text-on-white: var(--clr-red-main); } .lp.theme-orange{ --clr-theme-main: var(--clr-orange-main); --clr-theme-1: var(--clr-orange-1); --clr-theme-2: var(--clr-orange-2); --clr-theme-3: var(--clr-orange-3); --clr-theme-4: var(--clr-orange-4); --clr-theme-5: var(--clr-orange-5); --clr-theme-6: var(--clr-orange-6); --clr-theme-7: var(--clr-orange-7); --clr-theme-text: var(--clr-orange-text); --clr-theme-text-on-white: var(--clr-orange-main); } .lp.theme-yellow{ --clr-theme-main: var(--clr-yellow-main); --clr-theme-1: var(--clr-yellow-1); --clr-theme-2: var(--clr-yellow-2); --clr-theme-3: var(--clr-yellow-3); --clr-theme-4: var(--clr-yellow-4); --clr-theme-5: var(--clr-yellow-5); --clr-theme-6: var(--clr-yellow-6); --clr-theme-7: var(--clr-yellow-7); --clr-theme-text: var(--clr-yellow-text); --clr-theme-text-on-white: var(--clr-yellow-main); } .lp.theme-green{ --clr-theme-main: var(--clr-green-main); --clr-theme-1: var(--clr-green-1); --clr-theme-2: var(--clr-green-2); --clr-theme-3: var(--clr-green-3); --clr-theme-4: var(--clr-green-4); --clr-theme-5: var(--clr-green-5); --clr-theme-6: var(--clr-green-6); --clr-theme-7: var(--clr-green-7); --clr-theme-text: var(--clr-green-text); --clr-theme-text-on-white: var(--clr-green-main); } .lp.theme-blue{ --clr-theme-main: var(--clr-blue-main); --clr-theme-1: var(--clr-blue-1); --clr-theme-2: var(--clr-blue-2); --clr-theme-3: var(--clr-blue-3); --clr-theme-4: var(--clr-blue-4); --clr-theme-5: var(--clr-blue-5); --clr-theme-6: var(--clr-blue-6); --clr-theme-7: var(--clr-blue-7); --clr-theme-text: var(--clr-blue-text); --clr-theme-text-on-white: var(--clr-blue-main); } .lp.theme-purple{ --clr-theme-main: var(--clr-purple-main); --clr-theme-1: var(--clr-purple-1); --clr-theme-2: var(--clr-purple-2); --clr-theme-3: var(--clr-purple-3); --clr-theme-4: var(--clr-purple-4); --clr-theme-5: var(--clr-purple-5); --clr-theme-6: var(--clr-purple-6); --clr-theme-7: var(--clr-purple-7); --clr-theme-text: var(--clr-purple-text); --clr-theme-text-on-white: var(--clr-purple-main); } /* --- Team-Person --- */ .lp-person{ display: flex; gap: 20px; align-items: flex-start; } .lp-person__img{ flex: 0 0 auto; } .lp-person__img img{ width: 200px; height: 200px; border-radius: 10px; object-fit: cover; } .lp-person__role{ color: var(--clr-theme-main); font-weight: 700; margin: 2px 0 8px; } .lp-person .iconblock{ margin-top: 6px; margin-bottom: 0; } @media (max-width: 575px){ .lp-person{ flex-direction: column; } } /* --- Hero-Band --- */ .lp-hero{ border-bottom: 3px solid var(--clr-theme-main, var(--clr-red-main)); } .lp-hero img{ width: 100%; height: 420px; object-fit: cover; display: block; } /* --- Generische Section-Helfer --- */ .lp-section .module-headline{ margin-bottom: 24px; } .lp-lead{ font-size: 22px; color: var(--clr-grey-4); margin-bottom: 30px; } .lp-subhead{ margin-top: 32px; } /* --- Intro (2-spaltig) --- */ .lp-intro__eyebrow{ font-weight: 700; color: var(--clr-grey-5); margin-bottom: 10px; } .lp-intro__cta{ display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin: 8px 0 24px; } .lp-intro__img img{ width: 100%; border-radius: 15px; object-fit: cover; box-shadow: 0 3px 10px rgba(151,151,151,.4); } /* --- Vorteile: 2-spaltige list-check --- */ .lp-checkcols{ columns: 2; column-gap: 56px; } .lp-checkcols > ul{ padding-left: 30px; } .lp-checkcols a{ color: inherit; text-decoration: none; } .lp-checkcols a:hover .lp-check-title{ color: var(--clr-theme-main); } .lp-check-title{ display: block; font-weight: 700; color: var(--clr-grey-5); } @media (max-width: 767px){ .lp-checkcols{ columns: 1; } } /* --- Icon-Cards (Für wen) – ORANGE als bewusster Akzent --- */ .lp-iconcards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .lp-iconcard{ position: relative; display: flex; align-items: center; gap: 18px; background: var(--clr-white); border-radius: 8px; overflow: hidden; padding: 22px 24px 22px 30px; box-shadow: 0 3px 10px rgba(151,151,151,.4); } .lp-iconcard::before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--clr-orange-main); } .lp-iconcard__icon{ flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--clr-orange-1); color: var(--clr-orange-main); font-size: 22px; } .lp-iconcard__text{ margin: 0; font-size: 18px; line-height: 1.45; color: var(--clr-grey-4); } .lp-iconcard__text b, .lp-iconcard__text strong{ color: var(--clr-grey-5); } /* --- Chips / Tags --- */ .lp-tags{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .lp-tag{ background: var(--clr-grey-1); color: var(--clr-grey-4); border-radius: 20px; padding: 7px 16px; font-size: 16px; font-weight: 700; } .lp-tag.--accent{ background: var(--clr-orange-1); color: var(--clr-orange-5); } /* --- Eckdaten / Key-Facts (Label–Wert-Zeilen, in .infobox) --- */ .lp-keyfacts{ margin: 0; } .lp-keyfacts__row{ display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--clr-grey-2); } .lp-keyfacts__row:last-child{ border-bottom: 0; } .lp-keyfacts__row b{ color: var(--clr-grey-5); } /* --- Anfahrt-/Adressblock (Adresse + 2x2 Icon-Raster) --- */ .lp-anfahrt{ display: grid; grid-template-columns: 300px 1fr; background: var(--clr-white); border: 1px solid var(--clr-grey-2); border-radius: 15px; overflow: hidden; box-shadow: 0 3px 10px rgba(151,151,151,.4); } .lp-anfahrt__addr{ padding: 28px 32px; border-right: 1px solid var(--clr-grey-2); } .lp-anfahrt__label{ display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--clr-grey-3); } .lp-anfahrt__label .fa, .lp-anfahrt__label .fas{ color: var(--clr-theme-main); } .lp-anfahrt__street{ font-size: 21px; font-weight: 700; color: var(--clr-grey-5); line-height: 1.35; margin-bottom: 18px; } .lp-anfahrt__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; padding: 28px 32px; } .lp-anfahrt__grid .iconblock{ margin-bottom: 0; } /* --- Tagesablauf-Karten --- */ .lp-daycards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .lp-daycard{ background: var(--clr-white); border-radius: 15px; overflow: hidden; box-shadow: 0 3px 6px rgba(0,0,0,.16); } .lp-daycard__img img{ width: 100%; height: 160px; object-fit: cover; } .lp-daycard__body{ padding: 20px 24px; } .lp-daycard__time{ display: inline-block; margin-bottom: 12px; padding: 4px 12px; background: var(--clr-theme-main); color: var(--clr-theme-text); font-size: 14px; font-weight: 700; border-radius: 4px; } .lp-daycard__body ul{ margin-bottom: 0; } /* --- Öffnungszeiten-Box --- */ .lp-hours{ display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; } .lp-hours__time{ font-size: 22px; font-weight: 700; color: var(--clr-grey-5); } .lp-hours__note{ margin: 0; max-width: 640px; } /* --- Schritte (nummeriert) --- */ .lp-steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .lp-step{ position: relative; background: var(--clr-white); border-radius: 8px; padding: 32px 26px 24px; box-shadow: 0 3px 10px rgba(151,151,151,.4); } .lp-step__num{ position: absolute; top: -18px; left: 26px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--clr-theme-main); color: var(--clr-theme-text); font-weight: 700; } .lp-step__title{ margin: 4px 0 8px; } /* --- Kontakt-Karten (ergänzt .card-contact, zentriert) --- */ .lp-contactcards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .lp-contactcard{ text-align: center; background: var(--clr-white); border: 1px solid var(--clr-grey-2); border-radius: 10px; padding: 30px 24px; box-shadow: 0 3px 10px rgba(151,151,151,.4); } .lp-contactcard__icon{ width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: var(--clr-theme-main); color: var(--clr-theme-text); font-size: 22px; } .lp-contactcard__phone{ display: block; font-weight: 700; color: var(--clr-theme-main); margin: 6px 0 14px; } /* --- Responsive --- */ @media (max-width: 991px){ .lp-iconcards, .lp-daycards, .lp-steps, .lp-contactcards{ grid-template-columns: 1fr 1fr; } .lp-anfahrt{ grid-template-columns: 1fr; } .lp-anfahrt__addr{ border-right: 0; border-bottom: 1px solid var(--clr-grey-2); } } @media (max-width: 575px){ .lp-iconcards, .lp-daycards, .lp-steps, .lp-contactcards, .lp-anfahrt__grid{ grid-template-columns: 1fr; } } /* ============================================================ Feedback-Runde – additive Overrides / Feinschliff ============================================================ */ /* 1 · Eigene Checkmarks für .list-check (unabhängig von FontAwesome) --- Theme nutzt das FA-Glyph \f00c; wir zeichnen den Haken selbst als SVG-Maske in der Theme-Farbe, damit er immer erscheint. */ .lp{ --lp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); } .lp ul.list-check > li::before{ content: ''; width: 18px; height: 18px; top: 5px; left: -28px; border-radius: 0; background: var(--clr-theme-main, var(--clr-red-main)); -webkit-mask: var(--lp-check) no-repeat center / contain; mask: var(--lp-check) no-repeat center / contain; } /* 2 · Vorteile: keine Umbrüche mitten in einem Punkt (3 links / 2 rechts) */ .lp-checkcols > ul > li{ -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } /* 3 · Sublines (Lead) Breitenbegrenzung wie im HTML-Konzept (.sec-head 780px) */ .lp-lead{ max-width: 780px; } /* 4 · Graue Chips (Stadtteile, Aktivitäten) etwas intensiver */ .lp-tag{ background: #ececec; } /* 5 · Adress-Icons mit rundem Hintergrund wie die Card-Icons */ .lp-anfahrt__grid .iconblock__stat{ padding-left: 60px; } .lp-anfahrt__grid .iconblock__icon{ left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--clr-theme-1); color: var(--clr-theme-main); font-size: 18px; } /* 6 · Öffnungszeiten als Card (statt grauer Box) */ .lp .lp-hours{ background: var(--clr-white); border: 1px solid var(--clr-grey-2); border-radius: 15px; padding: 24px 30px; box-shadow: 0 3px 10px rgba(151,151,151,.4); } /* 7 · Räume-Teaser: ohne Pfeil (::after), Titel mittig (Theme-Override) */ .lp .teaser-classic .title{ text-align: center; padding: 26px 34px; } .lp .teaser-classic .title::after{ display: none; } /* 8 · Preistabelle: etwas mehr vertikales Zellen-Padding */ .lp .lp-content table th, .lp .lp-content table td{ padding-top: 16px; padding-bottom: 16px; } /* ============================================================ Feedback-Runde 2 – neue Komponenten ============================================================ */ /* Intro: 3-Punkte-Liste über den Buttons (mehr Abstand zu den Buttons) */ .lp-intro__badges{ margin-bottom: 28px; } /* Aktivitäten: gleiche Card wie Räume (teaser-classic, farbige Titelleiste mittig), nur 4 pro Reihe und kompaktere Bildhöhe/Titel. */ .lp-actcards .teaser-classic .image img{ height: 200px; } .lp-actcards .teaser-classic .title{ padding: 16px 18px; } .lp-actcards .teaser-classic .title span{ font-size: 18px; line-height: 22px; } /* Kontakt: Karte(n) + Formular nebeneinander – Karten gestapelt (kein 3-Spalten-Grid) */ .lp-contactcards--stack{ display: flex; flex-direction: column; gap: 22px; } .lp-form{ background: var(--clr-white); border: 1px solid var(--clr-grey-2); border-radius: 10px; padding: 30px 32px; box-shadow: 0 3px 10px rgba(151,151,151,.4); } /* Demo-Formular (nur Demo-Modul; im echten Modul kommt Visforms) */ .lp-demoform__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 18px; } .lp-demoform label{ display: block; font-size: 13px; font-weight: 700; color: var(--clr-grey-5); } .lp-demoform__full{ grid-column: 1 / -1; } .lp-demoform input, .lp-demoform select, .lp-demoform textarea{ width: 100%; margin-top: 6px; padding: 11px 12px; font: inherit; font-size: 15px; border: 1px solid var(--clr-grey-2); border-radius: 6px; background: var(--clr-white); } @media (max-width: 575px){ .lp-demoform__grid{ grid-template-columns: 1fr; } } /* Vertikaler Abstand für mehrreihige Bootstrap-Karten-Reihen (Team, Qualifikationen, Schwerpunkte, Räume, Kontakt-Split). Bootstrap setzt --bs-gutter-y standardmäßig 0 → ohne das kleben umgebrochene Karten vertikal aneinander. Teaser haben ein eigenes padding-bottom und werden daher auf 0 zurückgesetzt. */ .lp .row-largegaps{ row-gap: 30px; } /* CTA: Bild/Animation horizontal spiegeln (z. B. Oma) */ .cta__imageblock.lp-cta-flip .lottie, .cta__imageblock.lp-cta-flip img{ transform: scaleX(-1); } /* CTA mit Bild/Animation links (z. B. oranger Mann): Box direkt unter das vorherige Element rücken – kein oberer Modulabstand, keine Überhang-Reserve. Die Figur ragt dadurch nach oben über die Box (Position der Figur bleibt relativ zur Box). */ .lp .lp-cta-tighttop{ padding-top: 0; } .lp .lp-cta-tighttop .cta-single{ padding-top: 0; } /* Visforms im Kontakt-Formular: vertikaler Abstand zwischen den Feldern */ .lp .lp-form .visforms .col-12[class*="field"]{ margin-bottom: 20px; } .lp .lp-form .visforms .form-group.row.required{ margin-bottom: 20px; }