/* ============================================================
   DO NOT EDIT THIS FILE - EDIT /src/css/*.css AND RUN build-css.js
   Generiert: 2026-10-02T19:23:56.966Z
   Quelldateien: 00-cms-imports.css, 01-fonts.css, awards.css, base.css, faq.css, footer.css, header.css, hero.css, kontakt.css, kundenmeinungen.css, projekt-modal.css, projekte.css, textblock.css, zz-cms-compat.css
   ============================================================ */

/* ===== Quelle: src/css/00-cms-imports.css ===== */ @import url("/css/styles_forms.css?v=1790851659"); @import url("/js/remixicon/remixicon.css?v=1790854151"); @import url("/js/leaflet/leaflet.css?v=1790854141"); /* ===== Quelle: src/css/01-fonts.css ===== */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations'); 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: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/inter/inter-latin-wght-normal.woff2') format('woff2-variations'); 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: 'Inter'; font-style: italic; font-display: swap; font-weight: 100 900; src: url('/fonts/inter/inter-latin-wght-italic.woff2') format('woff2-variations'); 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; }
/* ===== Quelle: src/css/awards.css ===== */ /* ============================================================= Anwendung Erfolge/Awards – Karten (anwendungen/Awards.php) ============================================================= */ .es-awards { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .es-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .es-awards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.es-award { background-color: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-8) var(--space-6); text-align: center; transition: all var(--dur-base) var(--ease); }
.es-award:hover { transform: translateY(-10px); }
.es-award__icon { font-size: var(--fs-title); color: var(--color-gold); }
.es-award__title { font-size: var(--fs-lg); line-height: 1.5rem; font-weight: var(--fw-bold); color: var(--color-text); margin: var(--space-4) 0 var(--space-3); }
.es-award__text { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); margin: 0; }
/* ===== Quelle: src/css/base.css ===== */ /* ============================================================= EVENT SERVICE RS – Basis Design-Tokens 1:1 aus der Vorlage test2025 (www.event-service.cc/test2025) abgeleitet. Alle Farben, Abstände, Radien, Schatten und Dauern werden ausschließlich über diese Variablen verwendet. ============================================================= */ :root { --color-gold: #927b48; --color-gold-light: #a89467; --color-gold-90: rgb(146 123 72 / 0.9); --color-gold-80: rgb(146 123 72 / 0.8); --color-gold-50: rgb(146 123 72 / 0.5); --color-gold-20: rgb(146 123 72 / 0.2); --color-text: #333333; --color-text-muted: #4b5563; --color-text-subtle: #6b7280; --color-text-light: #d1d5db; --color-white: #ffffff; --color-bg: #ffffff; --color-bg-soft: #f9fafb; --color-bg-tag: #f3f4f6; --color-border: #e5e7eb; --color-border-strong: #d1d5db; --color-dark: #333333; --color-darker: #1a1a1a; --color-dark-card: #2a2a2a; --color-dark-input: #1f2937; --color-dark-placeholder: #9ca3af; --color-dark-line: rgb(255 255 255 / 0.2); --overlay-hero: rgb(0 0 0 / 0.4); --overlay-header: rgb(0 0 0 / 0.5); --overlay-menu: rgb(51 51 51 / 0.95); --overlay-modal: rgb(0 0 0 / 0.8); --overlay-zoom: rgb(0 0 0 / 0.9); --overlay-play: rgb(0 0 0 / 0.35); --overlay-light: rgb(255 255 255 / 0.2); --overlay-light-hover: rgb(255 255 255 / 0.4); --font-main: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fs-xs: 0.8rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; --fs-4xl: 2rem; --fs-title: 2.25rem; --fs-title-md: 3rem; --fs-hero: 3rem; --fs-hero-md: 4.5rem; --lh-tight: 1.25; --lh-normal: 1.6; --lh-relaxed: 1.625; --container-max: 80rem; --container-px: 1.5rem; --content-max: 48rem; --section-py: 5rem; --header-h: 5rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 24px; --radius-full: 9999px; --shadow-header: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-card: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-image: 0 25px 50px -12px rgb(0 0 0 / 0.25); --shadow-modal: 0 20px 40px rgb(0 0 0 / 0.3); --shadow-dark-card: 0 10px 20px rgb(0 0 0 / 0.2); --shadow-soft: 0 10px 20px rgb(0 0 0 / 0.08); --shadow-button: 0 4px 8px rgb(0 0 0 / 0.2); --focus-ring: 0 0 0 3px var(--color-gold-20); --dur-fast: 0.2s; --dur-base: 0.3s; --dur-slow: 0.5s; --ease: ease; --hero-fade: 0.9s; --hero-setzen: 1.4s; --hero-zoom-start: 1.03; --ease-setzen: cubic-bezier(0.16, 1, 0.3, 1); --hero-wechsel: 1s; --hero-wechsel-zoom: 7s; --hero-slide-start: 1.06; --ease-wechsel: cubic-bezier(0.25, 0.1, 0.25, 1); --hero-intervall: 6500; --z-header: 50; --z-progress: 100; --z-modal: 100; --z-menu: 1000; --z-zoom: 1000; --z-video: 10001; }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { font-family: var(--font-main); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: inherit; }
.es-container { max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-px); padding-right: var(--container-px); }
.es-section { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.es--hintergrund-weiss { background-color: var(--color-bg); }
.es--hintergrund-hell { background-color: var(--color-bg-soft); }
.es--hintergrund-dunkel { background-color: var(--color-darker); color: var(--color-white); }
.es-section-head { text-align: center; margin-bottom: var(--space-16); }
.es-title { font-size: var(--fs-title); line-height: 2.5rem; font-weight: var(--fw-bold); margin-top: 0; margin-bottom: var(--space-6); color: var(--color-text); }
.es--hintergrund-dunkel .es-title { color: var(--color-gold-light); }
.es-subtitle { font-size: var(--fs-xl); line-height: 1.75rem; color: var(--color-text-muted); max-width: var(--content-max); margin-left: auto; margin-right: auto; }
.es-subtitle p { margin: 0; }
@media (min-width: 768px) { .es-title { font-size: var(--fs-title-md); line-height: 1; }
}
.es-button { display: inline-block; background-color: var(--color-gold); color: var(--color-white); padding: var(--space-4) var(--space-8); font-weight: var(--fw-semibold); font-size: var(--fs-base); white-space: nowrap; text-decoration: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; transition: all var(--dur-base) var(--ease); }
.es-button:hover { background-color: var(--color-gold-90); }
/* ===== Quelle: src/css/faq.css ===== */ /* ============================================================= Anwendung FAQ – Akkordeon (anwendungen/Faq.php) ============================================================= */ .es-accordion { max-width: var(--content-max); margin-left: auto; margin-right: auto; }
.es-accordion__item { border-top: 1px solid var(--color-border); }
.es-accordion__item:last-child { border-bottom: 1px solid var(--color-border); }
.es-accordion__trigger { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-6); font-family: inherit; font-size: var(--fs-lg); line-height: 1.75rem; font-weight: var(--fw-semibold); background-color: transparent; border: none; cursor: pointer; color: var(--color-text); }
.es-accordion__icon { font-size: var(--fs-xl); transition: transform var(--dur-base) var(--ease); }
.es-accordion__content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.es-accordion__content.is-open { max-height: 40rem; transition: max-height 0.4s ease-in; padding-bottom: var(--space-6); }
.es-accordion__content p { padding-right: var(--space-8); color: var(--color-text-muted); line-height: var(--lh-relaxed); margin: 0 0 var(--space-3); }
.es-accordion__content p:last-child { margin-bottom: 0; }
/* ===== Quelle: src/css/footer.css ===== */ /* ============================================================= Footer (inc.adresse.php) – index.php umschließt ihn mit <footer class="footer"> ============================================================= */ footer.footer { background-color: var(--color-dark); color: var(--color-bg-soft); padding-top: var(--section-py); padding-bottom: var(--space-12); }
.es-footer__grid { display: grid; gap: var(--space-12); }
@media (min-width: 768px) { .es-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.es-footer__brand { display: flex; flex-direction: column; gap: var(--space-6); }
.es-footer__logo { width: 200px; height: auto; display: block; }
.es-footer__text { font-size: var(--fs-sm); line-height: 1.25rem; color: var(--color-text-light); margin: 0; }
.es-footer .es-social { flex-direction: row; padding: var(--space-8) 0; }
.es-footer__group { display: flex; flex-direction: column; gap: var(--space-4); }
.es-footer__heading { font-size: var(--fs-base); font-weight: var(--fw-semibold); text-transform: uppercase; color: var(--color-white); margin: 0 0 var(--space-2); }
.es-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.es-footer__link { color: var(--color-text-light); text-decoration: none; transition: all var(--dur-base) var(--ease); }
.es-footer__link:hover { color: var(--color-gold); }
.es-newsletter { display: flex; align-items: center; }
.es-newsletter__input { width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--color-text-muted); background-color: var(--color-dark-input); color: var(--color-bg-soft); outline: 2px solid transparent; outline-offset: 2px; font-family: inherit; font-size: var(--fs-base); }
.es-newsletter__input::placeholder { color: var(--color-dark-placeholder); }
.es-newsletter__input:focus { border-color: var(--color-gold); }
.es-newsletter__button { margin-left: var(--space-2); background-color: var(--color-gold); padding: var(--space-3) var(--space-6); font-weight: var(--fw-semibold); font-family: inherit; font-size: var(--fs-base); white-space: nowrap; transition: all var(--dur-base) var(--ease); border-radius: var(--radius-sm); border: none; color: var(--color-white); cursor: pointer; }
.es-newsletter__button:hover { background-color: var(--color-gold-90); }
.es-footer__bottom { border-top: 1px solid var(--color-dark-line); margin-top: var(--space-12); padding-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); justify-content: space-between; align-items: center; }
@media (min-width: 768px) { .es-footer__bottom { flex-direction: row; }
}
.es-footer__copyright { color: var(--color-text-light); font-size: var(--fs-sm); line-height: 1.25rem; text-align: center; margin: 0; }
.es-footer__legal { display: flex; gap: var(--space-6); }
.es-footer__legal a { color: var(--color-text-light); text-decoration: none; font-size: var(--fs-sm); transition: all var(--dur-base) var(--ease); }
.es-footer__legal a:hover { color: var(--color-gold); }
/* ===== Quelle: src/css/header.css ===== */ /* ============================================================= Header, Navigation, Lesefortschritt (inc.topSection.php) ============================================================= */ .es-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background-color: var(--color-gold); z-index: var(--z-progress); transition: width 0.1s linear; }
.es-header { position: fixed; top: 0; left: 0; width: 100%; box-sizing: border-box; z-index: var(--z-header); background-color: var(--overlay-header); border-bottom: 1px solid transparent; padding-left: var(--container-px); padding-right: var(--container-px); transition: all var(--dur-base) var(--ease); }
.es-header.is-solid { background-color: var(--color-dark); box-shadow: var(--shadow-header); border-bottom: 1px solid var(--color-gold-50); }
.es-nav { max-width: var(--container-max); margin-left: auto; margin-right: auto; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-8); box-sizing: border-box; position: relative; }
.es-logo { width: 220px; height: 60px; flex-shrink: 0; display: block; }
.es-logo img { height: 100%; width: auto; display: block; }
.es-menu { display: flex; align-items: center; gap: var(--space-8); }
.es-nav-link { position: relative; color: var(--color-white); font-weight: var(--fw-medium); text-decoration: none; transition: all var(--dur-base) var(--ease); }
.es-nav-link:hover { color: var(--color-gold); }
.es-nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background-color: var(--color-gold); transition: all var(--dur-base) var(--ease); transform: translateX(-50%); }
.es-nav-link:hover::after { width: 100%; }
.es-lang { display: flex; gap: var(--space-2); margin-left: var(--space-4); }
.es-lang a { color: var(--color-text-light); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; text-transform: uppercase; transition: color var(--dur-base) var(--ease); }
.es-lang a:hover, .es-lang a.is-active { color: var(--color-gold); }
.es-burger { display: none; background: none; border: none; cursor: pointer; padding: var(--space-2); align-items: center; justify-content: center; z-index: calc(var(--z-menu) + 1); }
.es-burger svg { width: 24px; height: 24px; stroke: var(--color-white); }
@media (max-width: 767px) { .es-burger { display: flex; }
.es-menu { display: none; position: fixed; inset: 0; width: 100%; height: 100%; background-color: var(--overlay-menu); flex-direction: column; justify-content: center; align-items: center; gap: var(--space-8); z-index: var(--z-menu); }
.es-menu.is-open { display: flex; }
.es-menu .es-nav-link { font-size: var(--fs-2xl); }
.es-lang { margin-left: 0; }
.es-lang a { font-size: var(--fs-lg); }
}
/* ===== Quelle: src/css/hero.css ===== */ /* ============================================================= Layout 90 – Hero (Preset es_hero), renderEsHero() in inc.es-layouts.php ============================================================= */ .es-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: clip; background-color: var(--color-dark); }
.es-hero__bilder { position: absolute; inset: 0; }
.es-hero__bild { position: absolute; inset: 0; background-size: cover; background-position: center; }
.es-hero.is-laedt .es-hero__bilder { opacity: 0; animation: es-hero-notfall 0s linear 3s forwards; }
@keyframes es-hero-notfall { to { opacity: 1; transform: none; }
}
.es-hero.is-laedt.es-hero--einzel .es-hero__bilder { transform: scale(var(--hero-zoom-start)); }
.es-hero.is-da .es-hero__bilder { animation: none; opacity: 1; transform: none; transition: opacity var(--hero-fade) ease-out, transform var(--hero-setzen) var(--ease-setzen); }
.es-hero--wechsel .es-hero__bild { opacity: 0; transform: scale(var(--hero-slide-start)); transition: opacity var(--hero-wechsel) ease, transform 0s linear var(--hero-wechsel); }
.es-hero--wechsel .es-hero__bild.is-aktiv { opacity: 1; transform: none; transition: opacity var(--hero-wechsel) ease, transform var(--hero-wechsel-zoom) var(--ease-wechsel); }
.es-hero__pause { position: absolute; right: var(--space-4); bottom: var(--space-8); z-index: 11; width: var(--space-10); height: var(--space-10); display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background-color: rgb(0 0 0 / 0.45); color: var(--color-white); font-size: var(--fs-xl); cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.es-hero__pause:hover { background-color: rgb(0 0 0 / 0.75); }
.es-hero__pause:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .es-hero.is-laedt.es-hero--einzel .es-hero__bilder { transform: none; }
.es-hero.is-da .es-hero__bilder { transition: opacity var(--dur-base) ease-out; }
.es-hero--wechsel .es-hero__bild, .es-hero--wechsel .es-hero__bild.is-aktiv { transform: none; transition: opacity var(--dur-base) ease; }
}
.es-hero__overlay { position: absolute; inset: 0; background-color: var(--overlay-hero); }
.es-hero__content { position: relative; z-index: 10; text-align: center; color: var(--color-white); padding-left: var(--container-px); padding-right: var(--container-px); }
.es-hero__title { font-size: var(--fs-hero); line-height: var(--lh-tight); font-weight: var(--fw-bold); margin-top: 0; margin-bottom: var(--space-6); }
.es-hero__subtitle { font-size: var(--fs-xl); line-height: var(--lh-relaxed); margin: 0 auto var(--space-8); max-width: var(--content-max); }
.es-hero__subtitle p { margin: 0; }
.es-hero__scroll { position: absolute; bottom: var(--space-8); left: 50%; transform: translateX(-50%); width: var(--space-6); height: var(--space-6); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); color: var(--color-white); text-decoration: none; animation: es-bounce 2s infinite; }
@keyframes es-bounce { 0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
40% { transform: translate(-50%, -10px); }
60% { transform: translate(-50%, -5px); }
}
.es-hero--hoehe-kompakt { min-height: 50vh; }
@media (min-width: 768px) { .es-hero__title { font-size: var(--fs-hero-md); line-height: 1; }
.es-hero__subtitle { font-size: var(--fs-2xl); line-height: 2rem; }
}
/* ===== Quelle: src/css/kontakt.css ===== */ /* ============================================================= Anwendung Kontakt – Formular, Kontaktdaten, Karte (anwendungen/Kontakt.php) ============================================================= */ .es-contact { display: grid; gap: var(--space-12); align-items: start; }
@media (min-width: 768px) { .es-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.es-form { display: flex; flex-direction: column; gap: var(--space-6); }
.es-form__group { display: grid; gap: var(--space-6); }
.es-form__label { font-weight: var(--fw-medium); color: var(--color-text); display: block; margin-bottom: var(--space-2); }
.es-form__input { width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); outline: 2px solid transparent; outline-offset: 2px; transition: all var(--dur-fast); box-sizing: border-box; font-family: inherit; font-size: var(--fs-base); color: var(--color-text); background: var(--color-bg); }
.es-form__input:focus { border-color: var(--color-gold); box-shadow: var(--focus-ring); }
textarea.es-form__input { min-height: 8rem; resize: vertical; }
.es-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.es-form__consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--color-text-muted); }
.es-form__consent a { color: var(--color-gold); }
.es-form__message { padding: var(--space-4); border-radius: var(--radius-sm); font-weight: var(--fw-medium); }
.es-form__message--ok { background: var(--color-gold-20); color: var(--color-text); }
.es-form__message--fehler { background: #fde8e8; color: #9b1c1c; }
.es-contact__title { font-size: var(--fs-2xl); line-height: 2rem; font-weight: var(--fw-semibold); margin-top: 0; margin-bottom: var(--space-6); }
.es-contact__list { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.es-contact__item { display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--fs-lg); line-height: 1.75rem; }
.es-contact__item a { text-decoration: none; }
.es-contact__item a:hover { color: var(--color-gold); }
.es-contact__icon { font-size: var(--fs-2xl); margin-top: var(--space-1); color: var(--color-gold); }
.es-map { width: 100%; height: 320px; border-radius: var(--radius-md); margin-top: var(--space-4); box-shadow: var(--shadow-soft); z-index: 0; background: var(--color-bg-tag); }
@media (max-width: 480px) { .es-map { height: 220px; }
}
.es-social { display: flex; flex-direction: column; align-items: self-start; gap: var(--space-4); padding: var(--space-8) 0; }
.es-social__title { margin: 0; font-size: var(--fs-lg); }
.es-social__links { display: flex; gap: var(--space-4); }
.es-social__link { display: inline-flex; justify-content: center; align-items: center; width: var(--space-12); height: var(--space-12); background-color: var(--color-gold); border-radius: 50%; color: var(--color-white); text-decoration: none; transition: all var(--dur-base) var(--ease); }
.es-social__link:hover { background-color: var(--color-gold-light); }
.es-social__link i { font-size: var(--fs-2xl); }
/* ===== Quelle: src/css/kundenmeinungen.css ===== */ /* ============================================================= Anwendung Kundenmeinungen – Karussell (anwendungen/Kundenmeinungen.php) Abschnitt mit Gestaltung hintergrund=dunkel ============================================================= */ .es-app--kundenmeinungen { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.es-app--kundenmeinungen .es-section-head { margin-bottom: var(--space-12); }
.es-carousel { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; }
.es-carousel__viewport { overflow: hidden; position: relative; width: 100%; }
.es-carousel__track { display: flex; gap: var(--space-8); transition: transform var(--dur-base) var(--ease); }
.es-quote { flex: 0 0 calc(40% - 1rem); background-color: var(--color-dark-card); padding: var(--space-10); border-radius: var(--radius-md); box-shadow: var(--shadow-dark-card); display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; }
.es-quote__text { font-size: 1.1rem; line-height: var(--lh-normal); margin: 0 0 var(--space-6); font-style: italic; color: var(--color-white); }
.es-quote__text p { margin: 0; }
.es-quote__author { font-weight: var(--fw-semibold); }
.es-quote__name { display: block; font-size: var(--fs-base); color: var(--color-white); }
.es-quote__company { display: block; font-size: 0.9rem; color: var(--color-gold); }
.es-carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: var(--color-gold); color: var(--color-white); border: none; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; font-size: var(--fs-2xl); z-index: 10; transition: background-color var(--dur-base) var(--ease); box-shadow: var(--shadow-button); display: flex; align-items: center; justify-content: center; }
.es-carousel__btn:hover { background-color: var(--color-gold-light); }
.es-carousel__btn:disabled { background-color: var(--color-text-muted); cursor: not-allowed; opacity: 0.7; }
.es-carousel__btn--prev { left: -60px; }
.es-carousel__btn--next { right: -60px; }
@media (max-width: 1300px) { .es-carousel { width: calc(100vw - 160px); max-width: 800px; }
.es-carousel__track { gap: 0; }
.es-quote { flex: 0 0 100%; width: 100%; min-width: 100%; }
}
@media (max-width: 768px) { .es-carousel { width: calc(100vw - 120px); }
.es-quote { padding: var(--space-8); }
.es-carousel__btn { width: 40px; height: 40px; font-size: 1.2rem; }
.es-carousel__btn--prev { left: -50px; }
.es-carousel__btn--next { right: -50px; }
}
/* ===== Quelle: src/css/projekt-modal.css ===== */ /* ============================================================= Projekt-Overlay mit Galerie, Zoom und Video (anwendungen/Projekte.php, js/es.js) Wird auch für die Projekt-Einzelseite (?projekt=…) ohne Overlay verwendet. ============================================================= */ .es-modal { position: fixed; inset: 0; background-color: var(--overlay-modal); display: flex; justify-content: center; align-items: center; z-index: var(--z-modal); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) ease-in-out, visibility 0s var(--dur-base); }
.es-modal.is-active { opacity: 1; visibility: visible; transition: opacity var(--dur-base) ease-in-out; }
.es-modal__box { background: var(--color-bg); border-radius: var(--radius-md); max-width: 1200px; width: 90%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-modal); transform: translateY(20px); transition: transform var(--dur-base) ease-in-out; }
.es-modal.is-active .es-modal__box { transform: translateY(0); }
@media (min-width: 768px) { .es-modal__box { width: 80%; }
}
.es-modal__close { position: absolute; top: var(--space-6); right: var(--space-6); background: none; border: none; font-size: var(--fs-4xl); color: var(--color-white); cursor: pointer; z-index: 2; transition: color var(--dur-base) var(--ease); text-shadow: 0 1px 4px rgb(0 0 0 / 0.5); }
.es-modal__close:hover { color: var(--color-border-strong); }
@media (max-width: 767px) { .es-modal__close { top: var(--space-4); right: var(--space-4); font-size: 1.75rem; }
}
.es-project__image-wrap { width: 100%; overflow: hidden; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.es-project__image { width: 100%; height: auto; display: block; }
.es-project__image-wrap { background-color: var(--color-dark); }
.es-project__image.is-laedt { opacity: 0; transform: scale(var(--hero-zoom-start)); }
.es-project__image.is-da { opacity: 1; transform: none; transition: opacity var(--hero-fade) ease-out, transform var(--hero-setzen) var(--ease-setzen); }
@media (prefers-reduced-motion: reduce) { .es-project__image.is-laedt { transform: none; }
.es-project__image.is-da { transition: opacity var(--dur-base) ease-out; }
}
.es-project__info { padding: var(--space-8); }
.es-project__tags-top { margin-bottom: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.es-project__category { display: inline-block; background-color: var(--color-gold); color: var(--color-white); font-size: var(--fs-sm); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--fw-semibold); }
.es-project__title { font-size: var(--fs-4xl); font-weight: var(--fw-bold); margin: 0 0 var(--space-2); color: var(--color-text); }
.es-project__subline { font-size: var(--fs-xl); color: var(--color-text-muted); margin: 0 0 var(--space-6); }
.es-project__description { max-height: 300px; overflow: hidden; transition: max-height var(--dur-slow) ease-in-out; color: var(--color-text-muted); line-height: var(--lh-relaxed); }
.es-project__description.is-expanded { max-height: none; overflow: visible; }
.es-project__description p { margin: 0 0 var(--space-4); }
.es-project__description a { color: var(--color-gold); }
.es-project__toggle { display: none; background: transparent; border: none; color: var(--color-gold); font-weight: var(--fw-semibold); font-family: inherit; cursor: pointer; margin-top: var(--space-4); font-size: var(--fs-base); padding: 0; }
.es-project__toggle.is-visible { display: block; }
.es-project__basics { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-6); margin-bottom: var(--space-8); }
@media (min-width: 768px) { .es-project__basics { flex-direction: row; justify-content: space-between; }
}
.es-project__details { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.es-detail { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); }
.es-detail i { font-size: var(--fs-2xl); color: var(--color-gold); }
.es-detail__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-subtle); margin: 0; }
.es-detail__text { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0; }
.es-project__tags { flex: 1; display: flex; flex-direction: column; }
.es-project__tags-title { font-weight: var(--fw-bold); font-size: var(--fs-base); margin: 0 0 var(--space-2); color: var(--color-text); }
.es-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.es-tag { background-color: var(--color-bg-tag); color: var(--color-text-muted); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--fs-sm); white-space: nowrap; }
.es-gallery { padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
.es-gallery__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-8); }
.es-gallery__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-text); margin: 0; }
.es-gallery__filter { display: flex; gap: var(--space-2); }
.es-gallery__btn { background-color: transparent; border: none; color: var(--color-text-muted); font-weight: var(--fw-medium); font-family: inherit; font-size: var(--fs-base); padding: var(--space-2) var(--space-3); cursor: pointer; border-radius: var(--radius-full); }
.es-gallery__btn.is-active { background-color: var(--color-gold); color: var(--color-white); }
.es-gallery__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .es-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .es-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.es-gallery__item { position: relative; overflow: hidden; border-radius: var(--radius-md); cursor: pointer; aspect-ratio: 4 / 3; background: var(--color-bg-tag); }
.es-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.es-gallery__item.is-video::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgb(0 0 0 / 0.7); border-radius: 50%; pointer-events: none; }
.es-gallery__item.is-video::before { content: ''; position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%); border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--color-white); z-index: 1; pointer-events: none; }
.es-zoom { background-color: var(--overlay-zoom); z-index: var(--z-zoom); }
.es-zoom__box { position: relative; width: 90%; height: 90%; display: flex; align-items: center; justify-content: center; }
.es-zoom__image { max-width: 100%; max-height: 100%; object-fit: contain; }
.es-zoom .es-modal__close { top: 20px; right: 20px; }
.es-zoom__nav { position: absolute; top: 50%; transform: translateY(-50%); background: var(--overlay-light); border: none; border-radius: 50%; color: var(--color-white); font-size: var(--fs-4xl); padding: 10px; cursor: pointer; line-height: 1; transition: background var(--dur-fast); z-index: 2; }
.es-zoom__nav:hover { background: var(--overlay-light-hover); }
.es-zoom__nav--prev { left: 20px; }
.es-zoom__nav--next { right: 20px; }
.es-video { z-index: var(--z-video); }
.es-video__box { position: relative; width: 90%; max-width: 1200px; background: #000; border-radius: var(--radius-sm); overflow: hidden; }
.es-video__box video { width: 100%; height: auto; display: block; }
.es-video .es-modal__close { top: 15px; right: 15px; background: rgb(0 0 0 / 0.7); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.es-project-page__inner { max-width: 1200px; margin: 0 auto; }
.es-project-page__card { background: var(--color-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
.es-project-page__back { display: inline-block; margin-bottom: var(--space-6); color: var(--color-gold); font-weight: var(--fw-semibold); text-decoration: none; }
/* ===== Quelle: src/css/projekte.css ===== */ /* ============================================================= Anwendung Projekte – Filter + Karten (anwendungen/Projekte.php) ============================================================= */ .es-filter { display: flex; justify-content: center; margin-bottom: var(--space-12); padding: 0 var(--space-4); }
.es-filter__buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.es-filter__btn { padding: var(--space-2) var(--space-4); font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium); white-space: nowrap; border-radius: var(--radius-full); border: 1px solid var(--color-gold); background-color: transparent; color: var(--color-text-muted); cursor: pointer; transition: all var(--dur-base); }
.es-filter__btn.is-active { background-color: var(--color-gold); color: var(--color-white); border-color: var(--color-gold); }
@media (max-width: 768px) { .es-filter__btn { padding: 0.4rem 0.8rem; font-size: var(--fs-sm); }
}
@media (max-width: 480px) { .es-filter__btn { padding: 0.35rem 0.6rem; font-size: var(--fs-xs); }
}
.es-projects { display: grid; gap: var(--space-8); }
@media (min-width: 768px) and (max-width: 1023px) { .es-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .es-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.es-card { background-color: var(--color-bg); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: all var(--dur-base) var(--ease); }
.es-card:hover { transform: translateY(-10px); }
.es-card[hidden] { display: none; }
.es-card__image { width: 100%; height: 16rem; object-fit: cover; object-position: top; display: block; }
.es-card__content { padding: var(--space-6); }
.es-card__title { font-size: var(--fs-xl); line-height: 1.75rem; font-weight: var(--fw-bold); margin-top: 0; margin-bottom: var(--space-3); color: var(--color-text); }
.es-card__title small { display: block; font-weight: var(--fw-regular); font-size: var(--fs-base); color: var(--color-text-muted); }
.es-card__text { color: var(--color-text-muted); margin-top: 0; margin-bottom: var(--space-4); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.es-card__link { color: var(--color-gold); font-weight: var(--fw-semibold); white-space: nowrap; display: inline-block; text-decoration: none; }
.es-card__link:hover { color: var(--color-gold-80); }
.es-projects__more { text-align: center; margin-top: var(--space-12); }
/* ===== Quelle: src/css/textblock.css ===== */ /* ============================================================= Layout 93 – Textblock (Preset es_text), renderEsText() in inc.es-layouts.php Gestaltung: bild = links | ohne, hintergrund = weiss | hell | dunkel ============================================================= */ .es-text { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.es-text__grid { display: grid; gap: var(--space-16); align-items: center; }
.es-text--bild-ohne .es-text__grid { display: block; max-width: var(--content-max); }
.es-text__image { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: var(--radius-lg); box-shadow: var(--shadow-image); display: block; }
.es-text__title { font-size: var(--fs-title); line-height: 2.5rem; font-weight: var(--fw-bold); margin-top: 0; margin-bottom: var(--space-8); color: var(--color-text); }
.es-text__subtitle { margin-top: 0; }
.es-text__body { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--color-text-muted); }
.es-text__body p { margin: 0 0 var(--space-6); }
.es-text__body a { color: var(--color-gold); }
.es-text__body h2, .es-text__body h3, .es-text__body h4 { color: var(--color-text); }
.es-text__button { margin-top: var(--space-6); }
.es--hintergrund-dunkel .es-text__title, .es--hintergrund-dunkel .es-text__body h2, .es--hintergrund-dunkel .es-text__body h3 { color: var(--color-white); }
.es--hintergrund-dunkel .es-text__body { color: var(--color-text-light); }
@media (max-width: 768px) { .es-text__grid { gap: var(--space-8); }
}
@media (min-width: 768px) { .es-text--bild-links .es-text__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.es-text__title { font-size: var(--fs-title-md); line-height: 1; }
}
.es-text--ausrichtung-zentriert .es-text__grid { margin-left: auto; margin-right: auto; text-align: center; }
.es-text--ausrichtung-zentriert .es-text__body { font-size: var(--fs-xl); }
.es-text--stil-rechtstext .es-text__body { font-size: var(--fs-base); }
.es-text--stil-rechtstext .es-text__body h2, .es-text--stil-rechtstext .es-text__body h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
/* ===== Quelle: src/css/zz-cms-compat.css ===== */ /* ============================================================= zz-cms-compat.css – Anpassungen an das CMS-Grundgerüst (index.php, inc.content_parts.php), das die statische Vorlage so nicht kennt. ============================================================= */ .header-content { display: none; }
#mainContainer, #contentAussen, .contentBox { margin: 0; padding: 0; max-width: none; width: auto; }
.contentBox > section > .content { position: relative; }
.contentBox > section > .content > .abstand { display: block; }
.pt_0, .pt_- , .pt_ { height: 0; }
.pt_1 { height: 20px; }
.pt_2 { height: 50px; }
.pt_3 { height: 70px; }
.pt_4 { height: 120px; }
.pt_5 { height: 160px; }
.pt_6 { height: 240px; }
body.contentpage #mainContainer { padding-top: var(--header-h); }
#mainContainer .contentBox[style] { padding: calc(var(--header-h) + var(--space-12)) var(--container-px) var(--section-py) !important; max-width: var(--container-max); }
.errorpage, .pagePasswordForm { max-width: var(--content-max); margin: 0 auto; padding: calc(var(--header-h) + var(--space-12)) var(--container-px) var(--section-py); }