/** * Easy Lebenslauf – Brand Theme (styleguide) * Loaded only when body has .theme-el * * Die Google-Fonts (Spectral, Public Sans) werden im von layouts/masco.blade.php * verlinkt, nicht hier per @import: @import wird erst nach dem Parsen dieser Datei * aufgelöst und verzögert dadurch den Textrender. */ .theme-el { --el-bg-page: #f1ebdf; --el-bg-cream: #fbf8f1; --el-bg-card: #ffffff; --el-border: #e3dac8; --el-border-input: #dcd2bf; --el-primary: #1c6b53; --el-primary-hover: #19604a; --el-primary-shadow: #134b3a; --el-primary-tint: #e7f1ec; --el-accent: #e7b65a; --el-accent-shadow: #c2933a; --el-text: #23201a; --el-text-secondary: #3a3526; --el-text-muted: #6e6655; --el-dark: #23201a; --el-dark-alt: #2b2820; color: var(--el-text-secondary); font-family: "Public Sans", sans-serif; background-color: var(--el-bg-page); } /* app.css setzt "body, .page-wrapper { font-family: Inter }". Das .theme-el auf schlägt zwar den body-Selektor, aber .page-wrapper holt sich Inter als Kind zurück und vererbt es an die ganze Seite – deshalb hier explizit mitsetzen. */ .theme-el .page-wrapper { background-color: var(--el-bg-page) !important; font-family: "Public Sans", sans-serif; } .theme-el h1, .theme-el h2, .theme-el h3, .theme-el h4, .theme-el h5, .theme-el h6, .theme-el .font-Sora { font-family: Spectral, Georgia, serif !important; color: var(--el-text); } .theme-el p { color: var(--el-text-secondary); } /* =========================================================================== Artikel-Typografie (.el-article) Das Template bringt keine Fliesstext-Styles mit: die Markdown-Ausgabe lief in einen .prose-Wrapper, den es im kompilierten CSS gar nicht gibt. Folge: Ueberschriften ohne Abstand, Listen ohne Punkte, Links in Textfarbe. Daher hier eine eigene, vollstaendige Typografie fuer Ratgeber-Seiten. =========================================================================== */ .theme-el .el-article { /* ~42rem ergibt rund 75 Zeichen pro Zeile - der Bereich, in dem laengere Fliesstexte am angenehmsten zu lesen sind. */ max-width: 42rem; margin-left: auto; margin-right: auto; font-size: 1.0625rem; line-height: 1.75; color: var(--el-text-secondary); } .theme-el .el-article > * + * { margin-top: 1.35em; } .theme-el .el-article h2 { margin-top: 2.75em; margin-bottom: 0.6em; font-size: 1.875rem; line-height: 1.25; letter-spacing: -0.5px; color: var(--el-text); } .theme-el .el-article h3 { margin-top: 2em; margin-bottom: 0.5em; font-size: 1.3125rem; line-height: 1.35; color: var(--el-text); } .theme-el .el-article h2:first-child, .theme-el .el-article h3:first-child { margin-top: 0; } .theme-el .el-article ul, .theme-el .el-article ol { padding-left: 1.5em; } .theme-el .el-article ul { list-style: disc; } .theme-el .el-article ol { list-style: decimal; } .theme-el .el-article li { margin-top: 0.5em; color: var(--el-text-secondary); padding-left: 0.25em; } .theme-el .el-article li::marker { color: var(--el-primary); } .theme-el .el-article a { color: var(--el-primary); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; } .theme-el .el-article a:hover { color: var(--el-primary-shadow); } .theme-el .el-article strong { color: var(--el-text); font-weight: 700; } /* Hinweis-/Tipp-Box */ .theme-el .el-note { margin-top: 2em; margin-bottom: 2em; border-left: 4px solid var(--el-primary); border-radius: 0 12px 12px 0; background-color: var(--el-primary-tint); padding: 1.25rem 1.5rem; } .theme-el .el-note > * + * { margin-top: 0.75em; } .theme-el .el-note p { color: var(--el-text-secondary); } .theme-el .el-note-label { display: block; font-family: "Public Sans", sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--el-primary); margin-bottom: 0.4em; } /* Do/Don't-Paare */ .theme-el .el-dodont { display: grid; gap: 1.25rem; margin-top: 2em; margin-bottom: 2em; } @media (min-width: 768px) { .theme-el .el-dodont { grid-template-columns: 1fr 1fr; } } .theme-el .el-do, .theme-el .el-dont { border: 1px solid var(--el-border); border-radius: 12px; background-color: #fff; padding: 1.5rem; } .theme-el .el-do { border-top: 3px solid var(--el-primary); } .theme-el .el-dont { border-top: 3px solid #b4472f; } .theme-el .el-do-label, .theme-el .el-dont-label { display: flex; align-items: center; gap: 0.5rem; font-family: "Public Sans", sans-serif; font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.75em; } .theme-el .el-do-label { color: var(--el-primary); } .theme-el .el-dont-label { color: #b4472f; } .theme-el .el-dodont ul { padding-left: 1.25em; margin-top: 0; } .theme-el .el-dont li::marker { color: #b4472f; } .theme-el .el-dodont li { font-size: 1rem; } .theme-el .el-dodont p { font-size: 1rem; margin-top: 0; } /* Inhaltsverzeichnis */ .theme-el .el-toc { border: 1px solid var(--el-border); border-radius: 12px; background-color: var(--el-bg-cream); padding: 1.5rem 1.75rem; margin-bottom: 3rem; } .theme-el .el-toc-title { font-family: "Public Sans", sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--el-text-muted); margin-bottom: 0.85em; } .theme-el .el-toc ol { list-style: decimal; padding-left: 1.25em; margin: 0; } .theme-el .el-toc li { margin-top: 0.4em; font-size: 1rem; } /* Offset-Schatten der Buttons: app.css enthaelt zwar group-hover:translate-*-0, aber nicht den Ausgangszustand translate-y-[3px]/translate-x-[0px]. Ohne den lag die Schattenebene exakt hinter dem Button und war unsichtbar. Gleiches Var-Muster wie die vorhandenen Tailwind-Regeln, damit der group-hover sauber zurueckschiebt. */ .theme-el .translate-x-\[0px\] { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)); } .theme-el .translate-y-\[3px\] { --tw-translate-y: 3px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)); } /* Icon-Kachel (Trust-Karten). Als Komponenten-Klasse statt Utility-Kette, weil Tailwind hier nicht kompiliert wird: app.css enthaelt nur die Klassen, die der Masco-Autor zufaellig verwendet hat (h-16 fehlt, w-16 gibt es, usw.). */ .theme-el .el-icon-tile { display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; flex: none; border-radius: 12px; background-color: var(--el-primary-tint); } .theme-el .el-icon-tile img { width: 44px; height: auto; } /* Styleguide color utilities (not in compiled Tailwind) */ .bg-\[\#F1EBDF\] { background-color: #f1ebdf !important; } .bg-\[\#FBF8F1\] { background-color: #fbf8f1 !important; } .bg-\[\#1C6B53\] { background-color: #1c6b53 !important; } .bg-\[\#134B3A\] { background-color: #134b3a !important; } .bg-\[\#E7B65A\] { background-color: #e7b65a !important; } .bg-\[\#23201A\] { background-color: #23201a !important; } .bg-\[\#E7F1EC\] { background-color: #e7f1ec !important; } .bg-\[\#C2933A\] { background-color: #c2933a !important; } .text-\[\#23201A\] { color: #23201a !important; } .text-\[\#3A3526\] { color: #3a3526 !important; } .text-\[\#5C5544\] { color: #5c5544 !important; } .text-\[\#1C6B53\] { color: #1c6b53 !important; } .text-\[\#FBF8F1\] { color: #fbf8f1 !important; } .text-\[\#6E6655\] { color: #6e6655 !important; } .text-\[\#E7F1EC\] { color: #e7f1ec !important; } .border-\[\#E3DAC8\] { border-color: #e3dac8 !important; } .border-\[\#134B3A\] { border-color: #134b3a !important; } .border-\[\#23201A\] { border-color: #23201a !important; } .border-\[\#1C6B53\] { border-color: #1c6b53 !important; } .border-\[\#C2933A\] { border-color: #c2933a !important; } .border-t { border-top-width: 1px; border-top-style: solid; } .border-y { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; } .pb-16 { padding-bottom: 4rem; } @media (min-width: 1024px) { .lg\:pb-24 { padding-bottom: 6rem; } } .hover\:bg-\[\#1C6B53\]:hover { background-color: #1c6b53 !important; } .hover\:text-\[\#1C6B53\]:hover { color: #1c6b53 !important; } .rounded-\[12px\] { border-radius: 12px; } /* Primary green utilities */ .theme-el .bg-ColorGreen, .theme-el .is-green { background-color: var(--el-primary) !important; border-color: var(--el-primary) !important; color: #fff !important; } .theme-el .is-green:hover { background-color: var(--el-primary-hover) !important; color: #fff !important; } .theme-el .btn.is-green:hover { background-color: var(--el-primary-hover) !important; color: #fff !important; } /* btn-animation fuellt den Button auf Hover weiss – Text muss dann gruen sein, sonst weiss-auf-weiss (siehe is-blue Pattern im Template). */ .theme-el .btn.is-green.btn-animation:hover, .theme-el .btn.is-green.btn-animation:hover span { background-color: transparent !important; color: var(--el-primary) !important; border-color: var(--el-primary) !important; } /* Remap template blues/purples → brand primary */ .theme-el .bg-ColorBlue, .theme-el .bg-ColorBluePurple, .theme-el .is-blue, .theme-el .btn.is-blue { background-color: var(--el-primary) !important; border-color: var(--el-primary) !important; color: #fff !important; } .theme-el .is-blue:hover, .theme-el .btn.is-blue:hover { background-color: var(--el-primary-hover) !important; color: #fff !important; } .theme-el .text-ColorBlue, .theme-el .hover\:text-ColorBlue:hover, .theme-el .group:hover .group-hover\:text-ColorBlue, .theme-el .hover\:text-ColorBluePurple:hover { color: var(--el-primary) !important; } .theme-el .hover\:bg-ColorBlue:hover, .theme-el .active\:bg-ColorBlue:active, .theme-el .focus\:border-ColorBlue:focus { background-color: var(--el-primary) !important; border-color: var(--el-primary) !important; } /* Dark sections / footer */ .theme-el .bg-ColorBlack, .theme-el .section-footer .bg-ColorBlack { background-color: var(--el-dark) !important; } .theme-el .hover-solid-shadow::after { background-color: var(--el-dark) !important; } /* Accent gold button variant */ .theme-el .bg-ColorAccent, .theme-el .is-accent { background-color: var(--el-accent) !important; border-color: var(--el-accent-shadow) !important; color: var(--el-text) !important; } .theme-el .is-accent:hover { background-color: #dfab4a !important; } /* Header / nav Kein backdrop-filter: das erzeugt einen Containing Block fuer position:fixed Nachfahren – das Mobile-Menue (fixed, height:100%) waere dann nur so hoch wie der Header und wuerde vom Content verdeckt. */ .theme-el .site-header.site-header--absolute.is--white, .theme-el #sticky-menu.sticky-menu { background-color: rgba(251, 248, 241, 0.96); } .theme-el .site-menu-main .nav-link-item { color: var(--el-text) !important; } .theme-el .hamburger-menu span, .theme-el .hamburger-menu span:before, .theme-el .hamburger-menu span:after { background-color: var(--el-text) !important; } /* Mobile offcanvas CTAs – nur im Drawer, nicht in der Desktop-Nav */ .mobile-menu-ctas { display: none; } @media (max-width: 991px) { .mobile-menu-ctas { display: flex; flex-direction: column; gap: 12px; padding: 20px 16px 24px; margin-top: auto; border-top: 1px solid rgba(0, 0, 0, 0.08); } .theme-el .mobile-menu-ctas { border-top-color: var(--el-border); } .mobile-menu-ctas__login { display: block; text-align: center; padding: 12px 16px; font-weight: 600; color: inherit; } .theme-el .mobile-menu-ctas__login { color: var(--el-text); } .theme-el .mobile-menu-ctas__login:hover { color: var(--el-primary); } .mobile-menu-ctas__signup { display: block !important; width: 100%; text-align: center; } .site-header .menu-block.active { display: flex; flex-direction: column; } .site-header .menu-block.active .site-menu-main { flex: 1 1 auto; min-height: 0; height: auto; /* override vendors/menu.css height:100%, sonst CTAs ausserhalb */ } } /* Pressed button shadow (styleguide) */ .theme-el .btn-pressed-green { box-shadow: 0 3px 0 0 var(--el-primary-shadow); } .theme-el .btn-pressed-accent { box-shadow: 0 3px 0 0 var(--el-accent-shadow); } .theme-el .btn-pressed-dark { box-shadow: 0 3px 0 0 var(--el-dark); } /* Cards */ .theme-el .el-card { background-color: var(--el-bg-card); border: 1px solid var(--el-border); border-radius: 12px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .theme-el .el-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(60, 50, 30, 0.1); } .theme-el .el-panel { background-color: var(--el-bg-cream); border: 1px solid var(--el-border); border-radius: 12px; } /* ============================================================ Vorlagen-Galerie (/templates) Komponenten-Klassen statt Utility-Ketten: Tailwind wird in diesem Projekt nicht kompiliert, app.css enthaelt nur die Klassen, die der Masco-Autor zufaellig verwendet hat. ============================================================ */ /* --- Filterleiste --- */ .theme-el .el-tpl-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .theme-el .el-tpl-filter button { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; border: 1px solid var(--el-border); background-color: #fff; color: var(--el-text); font-family: "Public Sans", sans-serif; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .theme-el .el-tpl-filter button:hover { border-color: var(--el-primary); color: var(--el-primary); } .theme-el .el-tpl-filter button.is-active { background-color: var(--el-primary); border-color: var(--el-primary); color: #fff; } .theme-el .el-tpl-filter .el-tpl-count { display: inline-block; min-width: 22px; padding: 2px 7px; border-radius: 999px; background-color: var(--el-primary-tint); color: var(--el-primary); font-size: 12px; font-weight: 700; text-align: center; } .theme-el .el-tpl-filter button.is-active .el-tpl-count { background-color: rgba(255, 255, 255, .22); color: #fff; } /* --- Raster --- */ .theme-el .el-tpl-grid { display: grid; grid-template-columns: 1fr; gap: 30px; } @media (min-width: 640px) { .theme-el .el-tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .theme-el .el-tpl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Ausgefilterte Karten */ .theme-el .el-tpl-card[hidden] { display: none; } /* --- Karte --- */ .theme-el .el-tpl-card { display: flex; flex-direction: column; overflow: hidden; background-color: #fff; border: 1px solid var(--el-border); border-radius: 16px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .theme-el .el-tpl-card:hover { transform: translateY(-4px); border-color: var(--el-primary-tint); box-shadow: 0 20px 44px -22px rgba(35, 32, 26, .38); } /* --- Vorschau --- */ .theme-el .el-tpl-preview { position: relative; display: flex; justify-content: center; overflow: hidden; padding: 30px 30px 0; background-color: var(--el-bg-page); aspect-ratio: 4 / 3; } .theme-el .el-tpl-preview img { width: 72%; height: auto; align-self: flex-start; border-radius: 3px; box-shadow: 0 12px 28px -14px rgba(35, 32, 26, .5); transition: transform .4s ease; } .theme-el .el-tpl-card:hover .el-tpl-preview img { transform: translateY(-8px) scale(1.03); } /* --- Badges --- */ .theme-el .el-tpl-badge { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background-color: var(--el-dark); color: var(--el-accent); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; line-height: 1; } .theme-el .el-tpl-ats { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background-color: var(--el-primary-tint); border: 1px solid rgba(28, 107, 83, .22); color: var(--el-primary); font-size: 12px; font-weight: 700; line-height: 1; } /* --- Fusszeile --- */ .theme-el .el-tpl-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 22px; } .theme-el .el-tpl-name { font-family: Spectral, Georgia, serif; font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--el-text); } .theme-el .el-tpl-note { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12.5px; line-height: 1.2; white-space: nowrap; color: var(--el-text-muted); } .theme-el .el-tpl-btn { flex: none; padding: 12px 17px; border-radius: 10px; background-color: var(--el-dark); color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1; white-space: nowrap; transition: background-color .25s ease; } .theme-el .el-tpl-btn:hover { background-color: var(--el-primary); color: #fff; } /* Leerzustand, falls ein Filter nichts trifft */ .theme-el .el-tpl-empty { padding: 50px 0; text-align: center; color: var(--el-text-muted); } /* --- Vorschau als Lightbox-Trigger --- */ .theme-el .el-tpl-zoom { position: absolute; inset: 0; display: block; cursor: zoom-in; /* ueber dem Bild, aber unter den Badges */ z-index: 1; } /* Badges muessen klickbar bleiben bzw. duerfen den Trigger nicht verdecken */ .theme-el .el-tpl-badge, .theme-el .el-tpl-ats { z-index: 2; pointer-events: none; } .theme-el .el-tpl-zoom-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background-color: rgba(35, 32, 26, .88); color: #fff; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; opacity: 0; transition: opacity .25s ease, transform .25s ease; } .theme-el .el-tpl-card:hover .el-tpl-zoom-hint, .theme-el .el-tpl-zoom:focus-visible .el-tpl-zoom-hint { opacity: 1; transform: translate(-50%, -50%) scale(1); } .theme-el .el-tpl-zoom:focus-visible { outline: 3px solid var(--el-primary); outline-offset: -3px; } /* Auf Touch-Geraeten gibt es kein Hover: Hinweis dauerhaft, dezenter */ @media (hover: none) { .theme-el .el-tpl-zoom-hint { opacity: .92; transform: translate(-50%, -50%) scale(1); bottom: 14px; top: auto; left: auto; right: 14px; padding: 9px 12px; font-size: 0; gap: 0; } .theme-el .el-tpl-zoom-hint i { font-size: 14px; } } /* ============================================================ Blog-Detailseite (/post/…) Das Masco-Template liefert hier mehrere kaputte Bausteine: - .prose/.prose-lg existieren im kompilierten CSS nicht -> Artikeltext war voellig ungestylt - pt-10 fehlt ebenfalls -> Buttons klebten auf der Trennlinie - bg-opacity-5 wird von bg-ColorBlack ueberschrieben -> dunkler Text auf fast schwarzem Grund, unlesbar Deshalb eigene Komponenten statt Utility-Ketten. ============================================================ */ /* --- Kopfbereich --- */ .theme-el .el-post-hero { background-color: var(--el-bg-page); } .theme-el .el-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 14px; color: var(--el-text-muted); } .theme-el .el-crumbs a { color: var(--el-primary); text-decoration: none; font-weight: 500; } .theme-el .el-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Trenner als Textzeichen statt Hintergrundbild: die Template-Regel zeigte auf /assets/img/icons/… (404), korrekt waere /assets/masco/img/icons/… */ .theme-el .el-crumbs .el-crumb-sep { /* Nicht --el-border verwenden: das waere auf dem cremefarbenen Grund praktisch unsichtbar - genau der Fehler des Template-Pfeils. */ color: var(--el-text-muted); font-size: 13px; } .theme-el .el-crumbs [aria-current="page"] { color: var(--el-text-muted); } .theme-el .el-post-title { font-family: Spectral, Georgia, serif; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.5px; color: var(--el-text); } .theme-el .el-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 20px; font-size: 14.5px; color: var(--el-text-muted); } .theme-el .el-post-meta span { display: inline-flex; align-items: center; gap: 8px; } .theme-el .el-post-meta i { color: var(--el-primary); } .theme-el .el-post-cat { padding: 5px 14px; border-radius: 999px; background-color: var(--el-primary-tint); color: var(--el-primary); font-size: 13px; font-weight: 700; } /* --- Layout --- */ .theme-el .el-post-layout { display: grid; grid-template-columns: 1fr; gap: 48px; } @media (min-width: 1024px) { .theme-el .el-post-layout { grid-template-columns: minmax(0, 1fr) 350px; gap: 56px; } } .theme-el .el-post-figure { overflow: hidden; border-radius: 14px; border: 1px solid var(--el-border); margin-bottom: 40px; } .theme-el .el-post-figure img { display: block; width: 100%; height: auto; } /* Artikeltext nutzt .el-article, hier nur die Breitenbegrenzung aufheben: die Spalte gibt das Mass bereits vor. */ .theme-el .el-post-body { max-width: none; } /* --- Abschnitt unter dem Artikel --- */ .theme-el .el-post-foot { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--el-border); } .theme-el .el-post-foot + .el-post-foot { margin-top: 32px; } .theme-el .el-foot-label { margin-bottom: 16px; font-family: "Public Sans", sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--el-text-muted); } /* --- Schlagworte --- */ .theme-el .el-tags { display: flex; flex-wrap: wrap; gap: 10px; } .theme-el .el-tag { display: inline-block; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--el-border); background-color: var(--el-bg-cream); color: var(--el-text-secondary); font-size: 13.5px; font-weight: 500; line-height: 1.2; } /* --- Teilen --- */ .theme-el .el-share { display: flex; flex-wrap: wrap; gap: 12px; } .theme-el .el-share a, .theme-el .el-share button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--el-border); background-color: #fff; color: var(--el-text-secondary); font-size: 14.5px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .theme-el .el-share a:hover, .theme-el .el-share button:hover { background-color: var(--el-primary); border-color: var(--el-primary); color: #fff; } .theme-el .el-share i { font-size: 15px; } /* --- Seitenspalte --- */ .theme-el .el-side { display: flex; flex-direction: column; gap: 26px; } @media (min-width: 1024px) { .theme-el .el-side { position: sticky; top: 110px; align-self: start; } } .theme-el .el-side-card { border: 1px solid var(--el-border); border-radius: 14px; background-color: var(--el-bg-cream); padding: 26px; } .theme-el .el-side-title { margin-bottom: 20px; font-family: Spectral, Georgia, serif; font-size: 1.25rem; font-weight: 600; color: var(--el-text); } .theme-el .el-side-list { display: flex; flex-direction: column; gap: 20px; } .theme-el .el-side-post { display: flex; gap: 14px; align-items: flex-start; } .theme-el .el-side-post img { flex: none; width: 84px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--el-border); } .theme-el .el-side-post .el-side-date { display: block; font-size: 12.5px; color: var(--el-text-muted); margin-bottom: 5px; } .theme-el .el-side-post a.el-side-link { color: var(--el-text); font-weight: 600; font-size: 15px; line-height: 1.35; text-decoration: none; } .theme-el .el-side-post a.el-side-link:hover { color: var(--el-primary); } .theme-el .el-side-links { display: flex; flex-direction: column; gap: 12px; } .theme-el .el-side-links a { display: flex; align-items: center; gap: 10px; color: var(--el-text-secondary); font-size: 15px; font-weight: 500; text-decoration: none; } .theme-el .el-side-links a:hover { color: var(--el-primary); } .theme-el .el-side-links i { color: var(--el-primary); font-size: 13px; } /* Hinweis-Karte am Ende der Seitenspalte */ .theme-el .el-side-cta { border: 1px solid var(--el-primary-shadow); border-radius: 14px; background-color: var(--el-primary); padding: 26px; text-align: center; } .theme-el .el-side-cta .el-side-title { color: #fff; } .theme-el .el-side-cta p { color: var(--el-primary-tint); font-size: 14.5px; margin-bottom: 18px; } .theme-el .el-side-cta a { display: inline-block; padding: 12px 20px; border-radius: 10px; background-color: var(--el-accent); color: var(--el-text); font-weight: 700; font-size: 15px; text-decoration: none; } .theme-el .el-side-cta a:hover { background-color: var(--el-accent-shadow); } /* ============================================================ Ratgeber-Uebersicht (/lebenslauf-ratgeber) Gleiche Kartensprache wie die Vorlagen-Galerie. ============================================================ */ .theme-el .el-blog-grid { display: grid; grid-template-columns: 1fr; gap: 30px; } @media (min-width: 640px) { .theme-el .el-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .theme-el .el-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .theme-el .el-blog-card { display: flex; flex-direction: column; overflow: hidden; background-color: #fff; border: 1px solid var(--el-border); border-radius: 16px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .theme-el .el-blog-card:hover { transform: translateY(-4px); border-color: var(--el-primary-tint); box-shadow: 0 20px 44px -22px rgba(35, 32, 26, .38); } .theme-el .el-blog-thumb { display: block; overflow: hidden; aspect-ratio: 16 / 10; background-color: var(--el-bg-page); } .theme-el .el-blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .theme-el .el-blog-card:hover .el-blog-thumb img { transform: scale(1.04); } .theme-el .el-blog-body { display: flex; flex: 1; flex-direction: column; padding: 26px; } .theme-el .el-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; font-size: 13px; color: var(--el-text-muted); } .theme-el .el-blog-meta i { color: var(--el-primary); margin-right: 6px; } .theme-el .el-blog-title { margin-bottom: 12px; font-family: Spectral, Georgia, serif; font-size: 1.375rem; font-weight: 600; line-height: 1.3; color: var(--el-text); } .theme-el .el-blog-title a { color: inherit; text-decoration: none; } .theme-el .el-blog-title a:hover { color: var(--el-primary); } .theme-el .el-blog-excerpt { flex: 1; margin-bottom: 20px; font-size: 15.5px; line-height: 1.6; color: var(--el-text-secondary); } .theme-el .el-blog-more { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--el-primary); font-weight: 600; font-size: 15px; text-decoration: none; } .theme-el .el-blog-more:hover { text-decoration: underline; text-underline-offset: 3px; } .theme-el .el-blog-more i { font-size: 12px; transition: transform .25s ease; } .theme-el .el-blog-card:hover .el-blog-more i { transform: translateX(3px); } /* Leerzustand */ .theme-el .el-blog-empty { border: 1px dashed var(--el-border); border-radius: 16px; background-color: var(--el-bg-cream); padding: 60px 30px; text-align: center; color: var(--el-text-muted); } /* Kacheln zu den Ratgeber-Seiten */ .theme-el .el-guide-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 640px) { .theme-el .el-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .theme-el .el-guide-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .theme-el .el-guide-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--el-border); border-radius: 14px; background-color: #fff; text-decoration: none; transition: border-color .25s ease, transform .25s ease; } .theme-el .el-guide-card:hover { border-color: var(--el-primary); transform: translateY(-3px); } .theme-el .el-guide-card .el-guide-name { font-family: Spectral, Georgia, serif; font-size: 1.125rem; font-weight: 600; color: var(--el-text); } .theme-el .el-guide-card p { font-size: 14.5px; line-height: 1.55; color: var(--el-text-muted); margin: 0; } /* Platzhalter fuer Beitraege ohne Bild: haelt den Rhythmus im Raster, statt die Karte ohne Kopf beginnen zu lassen. */ .theme-el .el-blog-thumb.is-placeholder { display: flex; align-items: center; justify-content: center; background-color: var(--el-primary-tint); border-bottom: 1px solid var(--el-border); } .theme-el .el-blog-thumb.is-placeholder i { font-size: 40px; color: var(--el-primary); opacity: .55; } /* ============================================================ Hilfe-Center (/hilfe) ============================================================ */ .theme-el .el-help-nav { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .theme-el .el-help-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .theme-el .el-help-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .theme-el .el-help-nav a { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border: 1px solid var(--el-border); border-radius: 14px; background-color: #fff; color: var(--el-text); font-weight: 600; font-size: 16px; text-decoration: none; transition: border-color .25s ease, transform .25s ease; } .theme-el .el-help-nav a:hover { border-color: var(--el-primary); transform: translateY(-3px); } .theme-el .el-help-nav .el-help-ico { display: flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 11px; background-color: var(--el-primary-tint); color: var(--el-primary); font-size: 17px; } /* Themenblock */ .theme-el .el-help-group + .el-help-group { margin-top: 56px; } .theme-el .el-help-group-title { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-family: Spectral, Georgia, serif; font-size: 1.625rem; font-weight: 600; color: var(--el-text); scroll-margin-top: 110px; } .theme-el .el-help-group-title i { color: var(--el-primary); font-size: 20px; } .theme-el .el-help-list { border: 1px solid var(--el-border); border-radius: 14px; background-color: #fff; padding: 8px 26px; } /* Kontaktbereich */ .theme-el .el-contact-grid { display: grid; grid-template-columns: 1fr; gap: 26px; } @media (min-width: 900px) { .theme-el .el-contact-grid { grid-template-columns: minmax(0, 1fr) 340px; } } .theme-el .el-form-card, .theme-el .el-contact-card { border: 1px solid var(--el-border); border-radius: 16px; background-color: #fff; padding: 30px; } .theme-el .el-field { margin-bottom: 18px; } .theme-el .el-field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--el-text); } .theme-el .el-field input, .theme-el .el-field select, .theme-el .el-field textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--el-border-input); border-radius: 10px; background-color: var(--el-bg-cream); color: var(--el-text); font-family: "Public Sans", sans-serif; font-size: 15.5px; line-height: 1.4; outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .theme-el .el-field textarea { min-height: 140px; resize: vertical; } .theme-el .el-field input::placeholder, .theme-el .el-field textarea::placeholder { color: var(--el-text-muted); } .theme-el .el-field input:focus, .theme-el .el-field select:focus, .theme-el .el-field textarea:focus { border-color: var(--el-primary); box-shadow: 0 0 0 3px rgba(28, 107, 83, .14); } .theme-el .el-form-submit { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border: none; border-radius: 10px; background-color: var(--el-primary); color: #fff; font-family: "Public Sans", sans-serif; font-size: 16px; font-weight: 700; cursor: pointer; transition: background-color .25s ease; } .theme-el .el-form-submit:hover { background-color: var(--el-primary-shadow); } .theme-el .el-contact-card .el-contact-lead { font-size: 15px; line-height: 1.6; color: var(--el-text-secondary); margin-bottom: 18px; } .theme-el .el-contact-mail { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 10px; background-color: var(--el-primary-tint); color: var(--el-primary); font-weight: 700; font-size: 15.5px; text-decoration: none; word-break: break-all; } .theme-el .el-contact-mail:hover { background-color: var(--el-primary); color: #fff; } /* Danke / Thank-you */ .theme-el .el-thanks { background-color: var(--el-bg-page); min-height: min(70vh, 640px); display: flex; align-items: center; justify-content: center; } .theme-el .el-thanks .section-space, .theme-el .el-thanks .container-default { width: 100%; } .theme-el .el-thanks-inner { margin-left: auto; margin-right: auto; max-width: 640px; text-align: center; } .theme-el .el-thanks-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 28px; border-radius: 50%; background-color: var(--el-primary-tint); color: var(--el-primary); font-size: 32px; } .theme-el .el-thanks-title { margin: 0; font-family: Spectral, Georgia, serif; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.5px; color: var(--el-text); text-align: center; } .theme-el .el-thanks-lead { margin: 1.25rem auto 0; max-width: 28em; font-size: 1.0625rem; line-height: 1.65; color: var(--el-text-muted); text-align: center; } .theme-el .el-thanks-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 2rem; } .theme-el .el-thanks-secondary { color: var(--el-primary); font-weight: 600; text-decoration: none; } .theme-el .el-thanks-secondary:hover { color: var(--el-primary-shadow); text-decoration: underline; text-underline-offset: 3px; } .theme-el .el-contact-note { margin-top: 16px; font-size: 13.5px; color: var(--el-text-muted); } /* Externe/eingebettete Inhalte (z. B. Impressum von passioncode.de) nutzen h4-h6. Ohne diese Regeln erbten sie app.css-Groessen und waren groesser als h3. */ .theme-el .el-article h4 { margin-top: 1.8em; margin-bottom: 0.45em; font-size: 1.1875rem; line-height: 1.4; font-weight: 600; color: var(--el-text); } .theme-el .el-article h5, .theme-el .el-article h6 { margin-top: 1.6em; margin-bottom: 0.4em; font-size: 1.0625rem; line-height: 1.45; font-weight: 600; color: var(--el-text); } /* Artikel an einem linksbuendigen Kopfbereich ausrichten. .el-article zentriert sich selbst auf 42rem. Steht darueber ein Kopfbereich mit anderer Breite (z. B. 856px), liegen die linken Kanten nicht uebereinander - auf /imprint waren das sichtbare 92px Versatz. Mit .is-aligned faengt der Text buendig unter der H1 an, die Zeilenlaenge bleibt bei 42rem. */ .theme-el .el-article.is-aligned { margin-left: 0; margin-right: auto; } /* ============================================================ Preisseite (/pricing) ============================================================ */ .theme-el .el-trust-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; margin-top: 26px; font-size: 14px; font-weight: 600; color: var(--el-text-secondary); } .theme-el .el-trust-strip span { display: inline-flex; align-items: center; gap: 7px; } .theme-el .el-trust-strip i { color: var(--el-primary); font-size: 13px; } /* --- Pakete --- */ .theme-el .el-plans { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: stretch; } @media (min-width: 860px) { .theme-el .el-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .theme-el .el-plan { position: relative; display: flex; flex-direction: column; padding: 36px 28px 28px; border: 1px solid var(--el-border); border-radius: 18px; background-color: #fff; } /* Das beliebteste Paket traegt Rahmen, Schatten und Badge - bewusst NICHT herausgehoben (kein translate/scale), das bricht sonst die Grundlinie der Reihe. */ .theme-el .el-plan.is-featured { border: 2px solid var(--el-primary); box-shadow: 0 16px 44px rgba(28, 107, 83, .16); } .theme-el .el-plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 5px 14px; border-radius: 999px; background-color: var(--el-primary); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .theme-el .el-plan.is-best .el-plan-badge { background-color: var(--el-accent-shadow); } .theme-el .el-plan-name { font-family: Spectral, Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1; color: var(--el-text); text-align: center; } /* Feste Hoehe: die Taglines sind unterschiedlich lang, sonst driften die Preiszeilen der drei Karten auseinander. */ .theme-el .el-plan-tagline { min-height: 40px; max-width: 220px; margin: 9px auto 0; font-size: 13.5px; line-height: 1.45; color: var(--el-text-muted); text-align: center; } .theme-el .el-plan-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 20px; } .theme-el .el-plan-cur { font-size: 16px; font-weight: 600; color: var(--el-text-muted); } .theme-el .el-plan-amount { font-family: Spectral, Georgia, serif; font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--el-text); } .theme-el .el-plan.is-featured .el-plan-amount { color: var(--el-primary); } .theme-el .el-plan-once { font-size: 13.5px; font-weight: 500; color: var(--el-text-muted); } .theme-el .el-plan-sub { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 26px; margin-top: 12px; font-size: 12.5px; color: var(--el-text-muted); } .theme-el .el-plan-save { padding: 3px 8px; border-radius: 999px; background-color: var(--el-primary-tint); color: var(--el-primary); font-size: 11.5px; font-weight: 800; } .theme-el .el-plan-credits { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; padding: 10px 12px; border-radius: 10px; background-color: rgba(231, 182, 90, .18); /* #8a6d22 ergab auf diesem Grund nur 2.62 Kontrast - bei 12,5px zu wenig (AA: 4.5). */ color: #6b5210; font-size: 12.5px; font-weight: 700; } .theme-el .el-plan-cta { display: block; margin-top: auto; padding-top: 24px; } .theme-el .el-plan-cta a { display: block; width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--el-border-input); background-color: var(--el-bg-cream); color: var(--el-text); font-size: 14.5px; font-weight: 700; text-align: center; text-decoration: none; transition: border-color .25s ease, color .25s ease, background-color .25s ease; } .theme-el .el-plan-cta a:hover { border-color: var(--el-primary); color: var(--el-primary); } .theme-el .el-plan.is-featured .el-plan-cta a { border-color: var(--el-primary); background-color: var(--el-primary); color: #fff; box-shadow: 0 3px 0 var(--el-primary-shadow); } .theme-el .el-plan.is-featured .el-plan-cta a:hover { background-color: var(--el-primary-hover); color: #fff; } /* --- Hinweiszeilen unter den Paketen --- */ .theme-el .el-pay-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin-top: 26px; font-size: 12.5px; color: var(--el-text-muted); text-align: center; } .theme-el .el-pay-note strong { display: inline-flex; align-items: center; gap: 7px; color: var(--el-text-secondary); font-weight: 600; } .theme-el .el-pay-note i { color: var(--el-primary); } /* --- Vergleichstabelle --- */ .theme-el .el-compare { overflow: hidden; border: 1px solid var(--el-border); border-radius: 18px; background-color: #fff; } .theme-el .el-compare h2 { padding: 28px 24px 0; font-family: Spectral, Georgia, serif; font-size: 22px; font-weight: 600; text-align: center; color: var(--el-text); } .theme-el .el-compare-body { padding: 20px 12px 12px; } @media (min-width: 640px) { .theme-el .el-compare-body { padding: 20px 24px 24px; } } .theme-el .el-compare-row { display: grid; /* Auf schmalen Displays bekommt die Label-Spalte Vorrang - sonst brechen laengere Bezeichnungen auf vier bis fuenf Zeilen um. */ grid-template-columns: minmax(0, 1fr) 78px 118px; align-items: center; } @media (min-width: 640px) { .theme-el .el-compare-row { grid-template-columns: minmax(0, 1fr) 170px 190px; } } .theme-el .el-compare-row + .el-compare-row { border-top: 1px solid #f0eadd; } .theme-el .el-compare-label { padding: 14px 16px 14px 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--el-text-secondary); } .theme-el .el-compare-free, .theme-el .el-compare-prem { display: flex; align-items: center; justify-content: center; height: 100%; padding: 14px 8px; font-size: 12.5px; line-height: 1.4; text-align: center; } .theme-el .el-compare-free { color: var(--el-text-muted); } .theme-el .el-compare-prem { background-color: rgba(231, 241, 236, .6); color: var(--el-primary); font-weight: 600; } .theme-el .el-compare-head .el-compare-free, .theme-el .el-compare-head .el-compare-prem { padding: 10px 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .03em; } .theme-el .el-compare-head .el-compare-prem { border-radius: 12px 12px 0 0; background-color: var(--el-primary); color: #fff; } .theme-el .el-compare-yes { color: var(--el-primary); font-size: 15px; } .theme-el .el-compare-no { color: #d8cfbc; font-size: 15px; } .theme-el .el-compare-cta .el-compare-prem { border-radius: 0 0 12px 12px; padding: 10px; } .theme-el .el-compare-cta a { display: block; width: 100%; padding: 10px; border-radius: 10px; background-color: var(--el-primary); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; box-shadow: 0 2px 0 var(--el-primary-shadow); } .theme-el .el-compare-cta a:hover { background-color: var(--el-primary-hover); color: #fff; } /* Hinweisbox (Steuertipp). Als Komponente statt Utility-Kette - die verwendeten Werte (rgba-Hintergrund, #EAD9B0, rounded-[16px], leading-relaxed) sind im kompilierten Tailwind nicht enthalten. */ .theme-el .el-tip { display: flex; align-items: flex-start; gap: 16px; max-width: 620px; margin: 32px auto 0; padding: 20px 24px; border: 1px solid #ead9b0; border-radius: 16px; background-color: rgba(231, 182, 90, .14); } .theme-el .el-tip i { margin-top: 3px; flex: none; color: var(--el-accent-shadow); } .theme-el .el-tip-title { font-weight: 600; color: var(--el-text); } .theme-el .el-tip p { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--el-text-muted); } /* Breiten und Sprungmarken-Offset fuer die Preisseite */ .theme-el .el-plans-wrap { max-width: 1060px; margin-left: auto; margin-right: auto; } .theme-el .el-hero-sub { max-width: 540px; margin-left: auto; margin-right: auto; } .theme-el .el-anchor { scroll-margin-top: 7rem; } /* Hero Trust-Bullets (Kreis-Check wie cupkick check-list-one) */ .theme-el .el-check-list { display: flex; flex-direction: column; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; } .theme-el .el-check-list li { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--el-text); } .theme-el .el-check-list-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background-color: rgba(19, 75, 58, 0.88); color: #3ddc97; font-size: 11px; line-height: 1; }